/* ==========================================================
FITZUNIVERSE — DOCUMENTS À PRÉPARER
========================================================== */

/* Compact sub-heading (pas un second hero) — le topbar affiche déjà
le titre de page (<h1> "Documents à préparer"), ce bloc ne sert plus
qu'à donner une ligne de contexte immédiate, à l'échelle --fs-h4
comme .section-heading de dashboard.css plutôt qu'à l'échelle
marketing --fs-h2 d'avant. */
.docs-intro{
margin-bottom:18px;
}

.docs-intro-crosslink{
display:flex;
align-items:flex-start;
gap:8px;
margin-top:10px;
padding:10px 14px;
background:var(--background-light);
border-radius:var(--radius-sm);
max-width:640px !important;
}

.docs-intro-crosslink > span{min-width:0;}

.docs-intro-crosslink i,
.docs-intro-crosslink svg{width:15px;height:15px;color:var(--accent-color);flex-shrink:0;margin-top:2px;}

.docs-intro-crosslink a{font-weight:700;color:var(--accent-color);}

/* ---------- Documents générés par Fitz ---------- */

.docs-generated{
margin-bottom:32px;
}

.docs-generated-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:14px;
}

.generated-doc-card{
display:flex;
align-items:center;
gap:14px;
background:var(--background-alt);
border:1px solid var(--border-color);
border-radius:var(--radius-lg);
padding:16px 18px;
box-shadow:var(--shadow-sm);
}

.generated-doc-icon i,
.generated-doc-icon svg{ width:20px; height:20px; }

/* Pastille supprimée le 2026-08-22 — règle « Icônes » de
DESIGN_SYSTEM.md : aucun conteneur derrière une icône. L'icône
porte elle-même la couleur, et cette couleur signifie quelque
chose. Le fond, la taille fixe et le rayon ont été retirés ;
la mise en page (flex, marges) reste. */
.generated-doc-icon{
flex:0 0 auto;
color:var(--text-muted);
display:flex;
align-items:center;
justify-content:center;
}

.generated-doc-body{flex:1 1 auto;min-width:0;}

.generated-doc-body h3{
font-size:var(--fs-small);
font-weight:600;
color:var(--text-color);
margin-bottom:3px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.generated-doc-date{
display:flex;
align-items:center;
gap:5px;
font-size:var(--fs-caption);
color:var(--text-muted);
}

.generated-doc-date i,
.generated-doc-date svg{width:12px;height:12px;color:var(--accent-color);}

.generated-doc-actions{
flex:0 0 auto;
display:flex;
gap:6px;
}

/* ---------- Recherche & filtres ---------- */

.docs-toolbar{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:center;
margin-bottom:18px;
}

/* LE CHAMP NE S'ÉTIRE QUE LÀ OÙ LA BARRE EST UNE RANGÉE.
   `.fitz-recherche` ne déclare plus son propre `flex` (voir la note dans
   css/base.css) : c'est la page qui l'étire. Mais sous 640 px,
   `.docs-toolbar` passe en `flex-direction:column` — et un
   `flex:1 1 260px` y redeviendrait une HAUTEUR de 260 px, exactement le
   défaut corrigé le 2026-09-14 dans l'historique de Fitz. La borne
   min-width n'est donc pas une précaution : elle est la correction. */
@media(min-width:641px){
.docs-toolbar .fitz-recherche{
flex:1 1 260px;
width:auto;
}
}

/* LA RECETTE BESPOKE A ÉTÉ RETIRÉE (2026-09-13).
Elle est remplacée par `.fitz-recherche` (css/base.css), le champ de
recherche unique de l'espace étudiant. Le commentaire qui vivait ici
assumait la divergence « non vérifiable, page auth-gated » ; elle
coûtait un champ sans aucun état de focus, invisible à la tabulation,
et une troisième géométrie de recherche dans le même espace. */

.docs-category-filters{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.docs-category-chip{
display:inline-flex;
align-items:center;
gap:6px;
padding:9px 14px;
border-radius:var(--radius-full);
border:1px solid var(--border-color);
background:var(--background-alt);
color:var(--text-light);
font-size:var(--fs-caption);
font-weight:600;
cursor:pointer;
transition:var(--transition);
}

.docs-category-chip i,
.docs-category-chip svg{width:14px;height:14px;}

.docs-category-chip:hover{border-color:var(--accent-color);}

.docs-category-chip.is-active{
background:var(--accent-color);
border-color:var(--accent-color);
color:var(--background-soft);
}

.docs-results-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
flex-wrap:wrap;
}

.docs-results-count{
font-size:var(--fs-caption);
color:var(--text-muted);
}

.docs-obtained-count{
font-size:var(--fs-caption);
font-weight:700;
color:var(--accent-color);
}

/* ---------- Grille de documents ---------- */

.docs-priority-section{
margin-bottom:32px;
}

.docs-priority-heading{
margin-bottom:14px;
}

.docs-priority-heading h3{
display:flex;
align-items:center;
gap:10px;
font-family:var(--font-display);
font-weight:800;
font-size:var(--fs-h4);
color:var(--text-color);
margin-bottom:4px;
}

.docs-priority-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:22px;
height:22px;
padding:0 6px;
border-radius:var(--radius-full);
background:var(--background-alt);
color:var(--text-light);
font-size:var(--fs-caption);
font-weight:700;
}

.docs-priority-heading p{
font-size:var(--fs-small);
color:var(--text-light);
}

.docs-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:16px;
}

.doc-card{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
background:var(--background-alt);
border:1px solid var(--border-color);
border-radius:var(--radius-lg);
padding:22px 20px;
box-shadow:var(--shadow-sm);
cursor:pointer;
transition:var(--transition);
}

.doc-card.is-obtained{
border-color:rgba(34,197,94,.4);
}

.doc-card-obtained{
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
font-size:var(--fs-caption);
font-weight:600;
color:var(--text-light);
}

.doc-card-obtained input{
width:15px;
height:15px;
accent-color:var(--success);
cursor:pointer;
flex-shrink:0;
}

.doc-card.is-obtained .doc-card-obtained{color:var(--success);}

/* Pastille supprimée le 2026-08-22 — règle « Icônes » de
DESIGN_SYSTEM.md : aucun conteneur derrière une icône. L'icône
porte elle-même la couleur, et cette couleur signifie quelque
chose. Le fond, la taille fixe et le rayon ont été retirés ;
la mise en page (flex, marges) reste. */
.doc-card-icon i,
.doc-card-icon svg{ width:22px; height:22px; }

.doc-card-category{
font-size:var(--fs-caption);
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--text-muted);
}

.doc-card p{
font-size:var(--fs-small);
color:var(--text-light);
line-height:1.55;
flex:1;
}

.doc-card-cta{
display:inline-flex;
align-items:center;
gap:6px;
font-size:var(--fs-caption);
font-weight:700;
color:var(--accent-color);
margin-top:4px;
}

.doc-card-cta i,
.doc-card-cta svg{width:14px;height:14px;transition:transform .2s ease;}
.doc-card:hover .doc-card-cta i,
.doc-card:hover .doc-card-cta svg{transform:translateX(3px);}

.docs-empty-state{
grid-column:1/-1;
text-align:center;
padding:60px 24px;
border:1px dashed var(--border-color);
border-radius:var(--radius-lg);
}

.docs-empty-state-icon i,
.docs-empty-state-icon svg{ width:34px; height:34px; }

/* Pastille supprimée le 2026-08-22 — règle « Icônes » de
DESIGN_SYSTEM.md : aucun conteneur derrière une icône. L'icône
porte elle-même la couleur, et cette couleur signifie quelque
chose. Le fond, la taille fixe et le rayon ont été retirés ;
la mise en page (flex, marges) reste. */
.docs-empty-state-icon{
margin:0 auto 16px;
color:var(--amber-700);
display:flex;
align-items:center;
justify-content:center;
}

.docs-empty-state h3{
font-family:var(--font-display);
font-weight:600;
color:var(--text-color);
margin-bottom:6px;
}

.docs-empty-state p{font-size:var(--fs-small);color:var(--text-muted);}

/* ---------- Modale de détail ---------- */

.docs-modal[hidden]{display:none;}

.docs-modal-card{
width:100%;
max-width:640px;
max-height:88vh;
overflow-y:auto;
/* Panneau verre — seule surface glass de la page, la modale flotte
au-dessus du fond assombri (.docs-modal), contexte qui justifie le
glassmorphism ; les .doc-card de la grille restent plates. */
background:var(--glass);
border:1px solid var(--glass-border);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-radius:var(--radius-lg);
padding:30px;
box-shadow:var(--shadow-lg);
}

.docs-modal-head{
display:flex;
align-items:flex-start;
gap:14px;
margin-bottom:24px;
position:relative;
}

.docs-modal-icon i,
.docs-modal-icon svg{ width:22px; height:22px; }

/* Pastille supprimée le 2026-08-22 — règle « Icônes » de
DESIGN_SYSTEM.md : aucun conteneur derrière une icône. L'icône
porte elle-même la couleur, et cette couleur signifie quelque
chose. Le fond, la taille fixe et le rayon ont été retirés ;
la mise en page (flex, marges) reste. */
.docs-modal-icon{
flex:0 0 auto;
color:var(--amber-700);
display:flex;
align-items:center;
justify-content:center;
}

.docs-modal-category{
display:block;
font-size:var(--fs-caption);
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
/* --text-muted ne tient que ~3,5:1 sur ce panneau verre posé sur le
fond assombri de .docs-modal (rgba(6,10,18,.6)) — --text-light passe
l'AA (~5,1:1) sans perdre l'effet "discret". */
color:var(--text-light);
margin-bottom:4px;
}

.docs-modal-head h3{
font-family:var(--font-display);
font-weight:600;
font-size:var(--fs-h3);
color:var(--text-color);
}

.docs-modal-close{
position:absolute;
top:0;
right:0;
width:32px;
height:32px;
border-radius:var(--radius-sm);
display:flex;
align-items:center;
justify-content:center;
color:var(--text-light);
background:transparent;
border:none;
cursor:pointer;
}

.docs-modal-close:hover{background:var(--background-soft);color:var(--text-color);}

.docs-modal-facts{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:var(--border-color);
border:1px solid var(--border-color);
border-radius:var(--radius-md);
overflow:hidden;
margin-bottom:22px;
}

.docs-modal-facts > div{
display:flex;
flex-direction:column;
gap:4px;
padding:12px 14px;
background:var(--background);
}

.docs-modal-facts span{
font-size:var(--fs-caption);
color:var(--text-muted);
}

.docs-modal-facts strong{
font-size:var(--fs-small);
font-weight:700;
color:var(--text-color);
}

@media(max-width:520px){
.docs-modal-facts{grid-template-columns:repeat(2,1fr);}
}

.docs-modal-section{margin-bottom:22px;}

.docs-modal-section h4{
display:flex;
align-items:center;
gap:8px;
font-size:var(--fs-small);
font-weight:700;
color:var(--text-color);
margin-bottom:10px;
}

.docs-modal-section h4 i,
.docs-modal-section h4 svg{width:16px;height:16px;color:var(--accent-color);}

.docs-modal-section > p{
font-size:var(--fs-small);
line-height:var(--lh-relaxed);
color:var(--text-light);
}

.docs-modal-list{
display:flex;
flex-direction:column;
gap:8px;
}

.docs-modal-list li{
display:flex;
align-items:flex-start;
gap:8px;
font-size:var(--fs-small);
color:var(--text-light);
line-height:1.5;
}

.docs-modal-list li i,
.docs-modal-list li svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--success);}

.docs-modal-list.is-tips li i,
.docs-modal-list.is-tips li svg{color:var(--accent-color);}
.docs-modal-list.is-mistakes li i,
.docs-modal-list.is-mistakes li svg{color:var(--warning);}

.docs-modal-tip{
display:flex;
align-items:flex-start;
gap:12px;
background:var(--background-light);
border-radius:var(--radius-md);
padding:16px 18px;
margin-bottom:20px;
}

.docs-modal-tip i,
.docs-modal-tip svg{width:20px;height:20px;color:var(--accent-color);flex-shrink:0;}

.docs-modal-tip strong{display:block;font-size:var(--fs-small);color:var(--text-color);margin-bottom:4px;}
.docs-modal-tip p{font-size:var(--fs-small);color:var(--text-light);line-height:1.55;margin:0;}

.docs-modal-generate{width:100%;justify-content:center;}

@media(max-width:640px){

.docs-toolbar{flex-direction:column;align-items:stretch;}
.docs-grid{grid-template-columns:1fr;}

}

/* Champ de recherche sur téléphone (2026-09-03, capture iPhone) : la
barre d'outils passe en COLONNE ≤640px, et `flex:1 1 260px` (pensé
pour une rangée) devenait alors une HAUTEUR de base de 260px qui
grandissait encore — un pavé vide de 370px avec le champ au milieu.
En colonne, le champ reprend sa hauteur naturelle. */
@media(max-width:640px){
/* `.fitz-recherche{flex:0 0 auto}` vivait ici. Inutile désormais : c'est
   le défaut du composant, et la règle d'étirement ne s'applique plus
   au-dessous de 641 px. */
}