/* diagnostic-france.html — grille B (2026-09-07). Tokens de base.css et
dashboard.css seulement ; aucune couleur ni police nouvelle. */
.diag-intro{ max-width:720px; margin-bottom:24px; }
/* Lot DIAGNOSTIC BREF (2026-10-29) : l'intro est un <section>, et
css/base.css donne à toute section un grand rembourrage (64 px en haut et
en bas sur téléphone). La question doit venir tout de suite. */
section.diag-intro{ padding:8px 0 0; }
.diag-intro h2{ margin:0 0 10px; }
.diag-intro p{ margin:0; color:var(--text-light); line-height:1.6; }

.diag-form{ max-width:720px; padding:24px; display:grid; gap:18px; }
.diag-form .field label,
.diag-form .field-label{ display:block; font-weight:600; margin-bottom:6px; }
.diag-montant{ display:grid; grid-template-columns:1fr auto; gap:10px; }
.diag-montant input,
.diag-montant select{ font-family:var(--font-body); font-size:var(--fs-body); padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border-color); background:var(--background-soft); color:var(--text-color); }
.diag-montant input:focus,
.diag-montant select:focus{ outline:none; border-color:var(--accent-color); }
.diag-choix{ display:flex; gap:18px; flex-wrap:wrap; }
.diag-choix label,
.diag-check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.field-hint{ margin:6px 0 0; font-size:var(--fs-caption); color:var(--text-muted); }
.diag-form .btn{ justify-self:start; }

.diag-resultat{ max-width:720px; margin-top:28px; display:grid; gap:16px; }
.diag-verdict{ margin:0; font-size:var(--fs-h3); font-weight:600; line-height:1.4; }
.diag-blocs{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.diag-bloc{ border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--background-soft); padding:14px 16px; }
.diag-bloc.is-ecart{ border-color:var(--amber-700); }
.diag-bloc strong{ display:block; margin-bottom:4px; }
.diag-bloc p{ margin:0 0 6px; line-height:1.55; }
.diag-source{ font-size:var(--fs-caption); color:var(--text-muted); text-decoration:underline; text-underline-offset:3px; }
.diag-source:hover, .diag-source:focus-visible{ color:var(--amber-700); }
/* Absence de source : surtout PAS souligne — un soulignement se lit
comme un lien, donc comme une source qui existerait. */
.diag-source--absente{ text-decoration:none; font-style:italic; }
.diag-total{ margin:0; font-weight:600; }
.diag-note, .diag-sauvegarde{ margin:0; font-size:var(--fs-small); color:var(--text-muted); }

@media(max-width:640px){
.diag-form{ padding:18px; }
.diag-form .btn{ width:100%; justify-content:center; }
}

/* ------------------------------------------------------------------
LOT DIAGNOSTIC-2 (2026-09-09) — du total au chemin.

Le résultat n'est plus trois blocs et une somme : c'est un document, et
il se lit comme un document. Sept sections, un titre chacune, et une
seule règle de hiérarchie — le verdict est la seule ligne qui grossit,
la phrase de fin est la seule qui se détache sans grossir.

Aucune couleur ni police nouvelle : tokens de base.css et dashboard.css.
------------------------------------------------------------------ */
.diag-resultat{ gap:28px; }
.diag-verdict{ font-size:var(--fs-h2); letter-spacing:-.01em; }

.diag-section{ display:grid; gap:12px; }
.diag-section h3{ margin:0; font-size:var(--fs-h4); }
.diag-section-intro{ margin:0; color:var(--text-light); line-height:1.6; }
.diag-source-ligne{ margin:0; }

/* Les points de vigilance : le seul bloc de la page qui porte un filet
de couleur. Il est là parce qu'une règle éliminatoire lue trop tard
coûte une année — pas pour décorer. */
.diag-section--vigilance{ border-left:3px solid var(--amber-700); padding-left:16px; }
.diag-vigilance,
.diag-leviers,
.diag-calendrier,
.diag-offres,
.diag-bourses{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.diag-vigilance li,
.diag-levier{ border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--background-soft); padding:14px 16px; }
.diag-vigilance p,
.diag-levier > p{ margin:0 0 6px; line-height:1.55; }
.diag-levier.is-partiel{ background:transparent; }

.diag-calendrier li{ padding-left:14px; border-left:2px solid var(--border-color); line-height:1.5; }
.diag-calendrier li.is-proche{ border-left-color:var(--amber-700); font-weight:600; }
.diag-calendrier li.is-passe{ color:var(--text-muted); }
.diag-absence{ margin:0; color:var(--text-light); line-height:1.6; }

.diag-bourses{ margin-top:10px; gap:10px; }
.diag-bourses li{ border-top:1px solid var(--border-color); padding-top:10px; }
.diag-bourses p{ margin:4px 0 6px; font-size:var(--fs-small); line-height:1.5; color:var(--text-light); }
.diag-passerelle{ display:inline-block; margin-top:6px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

.diag-avertissement{ margin:0; padding:14px 16px; border-radius:var(--radius-sm); background:var(--background-soft); border:1px solid var(--amber-700); line-height:1.55; }

.diag-etapes{ margin:0; padding-left:20px; display:grid; gap:14px; }
.diag-etapes li{ line-height:1.55; }
.diag-etapes strong{ display:block; }
.diag-etapes p{ margin:4px 0 6px; color:var(--text-light); }
.diag-etape-echeance{ display:inline-block; margin-bottom:4px; font-size:var(--fs-caption); font-weight:600; color:var(--amber-700); }

/* L'offre : une seule fois, sans insistance. Pas de carte, pas d'ombre,
pas de fond coloré — elle se lit, elle ne se vend pas. */
.diag-section--offre{ border-top:1px solid var(--border-color); padding-top:22px; }
.diag-offre-preambule{ margin:0; line-height:1.6; }
.diag-offres li{ line-height:1.55; }
.diag-section--offre .btn{ justify-self:start; }

/* La phrase de fin : le dernier mot appartient au projet de l'étudiant.
Elle se détache par l'espace et par une taille de lecture, jamais par
un effet : un dernier mot qui crie n'en est plus un. */
.diag-fin{ margin:0; padding-top:4px; font-size:var(--fs-lead); line-height:1.65; }

@media(max-width:640px){
.diag-resultat{ gap:22px; }
.diag-section--vigilance{ padding-left:12px; }
.diag-etapes{ padding-left:18px; }
.diag-section--offre .btn{ width:100%; justify-content:center; }
}

/* ------------------------------------------------------------------
« PUIS-JE ME LANCER ? » (lot 98, 2026-09-25) — les questions sur les
études et les quatre voyants. Tokens existants seulement : le filet
ambre dit « un point à régler » ou « pas encore », comme la vigilance.
------------------------------------------------------------------ */
.rec-questions{ border:0; padding:0 0 18px; margin:0; display:grid; gap:16px; border-bottom:1px solid var(--border-color); }
.rec-questions legend{ font-size:var(--fs-h4); padding:0; margin-bottom:4px; }
.rec-questions > .field-hint{ margin:0; }
.rec-questions input[type=number]{ font-family:var(--font-body); font-size:var(--fs-body); padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border-color); background:var(--background-soft); color:var(--text-color); width:100%; max-width:220px; }
.rec-questions input[type=number]:focus{ outline:none; border-color:var(--accent-color); }
.rec-resultat{ display:grid; gap:14px; }
.rec-titre{ margin:0; font-size:var(--fs-caption); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.rec-titre--pas-encore,
.rec-titre--lancer-si{ color:var(--amber-700); }
.rec-voyants{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.rec-voyant{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--background-soft); padding:14px 16px; }
.rec-voyant > i, .rec-voyant > svg{ width:22px; height:22px; margin-top:1px; color:var(--text-muted); }
.rec-voyant--ok > svg{ color:var(--text-color); }
.rec-voyant--condition, .rec-voyant--bloque{ border-left:3px solid var(--amber-700); }
.rec-voyant--condition > svg, .rec-voyant--bloque > svg{ color:var(--amber-700); }
.rec-voyant strong{ display:block; margin-bottom:4px; }
.rec-voyant p{ margin:0 0 6px; line-height:1.55; }
.rec-deblocage{ font-weight:600; }
/* Une question sans objet pour ce pays ou ce diplôme se retire vraiment :
.field porte un display qui l'emporte sur l'attribut hidden. */
.rec-questions .field[hidden]{ display:none; }
.diag-form .field[hidden]{ display:none; }
.diag-fcfa{ font-weight:400; color:var(--text-muted); }
.rec-questions .field.has-error .fitz-select-trigger,
.rec-questions .field.has-error input[type=number]{ border-color:var(--danger); }
.rec-questions .rec-manque{ color:var(--danger); font-weight:600; }

/* ------------------------------------------------------------------
LOT DIAGNOSTIC BREF ET FIABLE (2026-10-29) — trois niveaux. La carte
réponse, les voyants en une ligne, le détail replié. Tokens existants.
------------------------------------------------------------------ */
.rep-carte{ display:grid; gap:10px; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--background-soft); padding:20px; }
.rep-carte--lancer-si, .rep-carte--pas-encore{ border-left:3px solid var(--amber-700); }
.rep-titre{ margin:0; font-size:var(--fs-h3); line-height:1.3; }
.rep-ligne{ margin:0; line-height:1.55; }
.rep-avancer{ font-weight:600; }
.rep-action{ justify-self:start; margin-top:4px; }
.rep-mention{ margin:0; font-size:var(--fs-caption); color:var(--text-muted); }
.rec-voyants--court{ gap:8px; }
/* Une ligne par voyant : le nom, puis son titre court, à la suite. */
.rec-voyants--court .rec-voyant{ grid-template-columns:22px 1fr; align-items:center; gap:10px; padding:10px 14px; }
.rec-voyant-ligne{ min-width:0; line-height:1.4; overflow-wrap:anywhere; }
.rec-voyant-nom{ font-weight:600; }
.rec-voyant-titre{ color:var(--text-light); }
.rec-autres, .diag-detail{ border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:12px 14px; }
.rec-autres > summary, .diag-detail > summary{ cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center; }
/* Le triangle natif disparaît avec display:flex (et diffère d'un moteur à
l'autre) : une flèche dessinée dit « ça s'ouvre », partout pareil. */
.rec-autres > summary, .diag-detail > summary{ list-style:none; justify-content:space-between; gap:12px; }
.rec-autres > summary::-webkit-details-marker, .diag-detail > summary::-webkit-details-marker{ display:none; }
.rec-autres > summary::after, .diag-detail > summary::after{ content:""; flex:none; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin:-4px 4px 0 0; }
.rec-autres[open] > summary::after, .diag-detail[open] > summary::after{ transform:rotate(-135deg); margin-top:4px; }
.rec-autres-corps, .diag-detail-corps{ display:grid; gap:16px; padding-top:12px; }
@media(max-width:640px){
.rep-action{ width:100%; justify-content:center; }
}