/* =====================================================================
   Parcours candidat — composants (lot F1 : accueil + tableau de bord).

   Consomme les tokens de anacours-ds.css. Jamais un littéral de couleur :
   si une valeur manque, elle est ajoutée au DS, pas écrite ici.

   Tout est scopé sous .anac-front. Le thème parent (hello-elementor) reste
   chargé — il pose une base légère — mais rien de ce qui suit ne peut fuir
   vers le reste du site, et l'ancien anacours.css est retiré de cette page
   (voir anacours_front_dequeue_legacy()).

   Mobile-first : clamp() partout, aucune largeur fixe, cibles ≥ 44px.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Coque
   --------------------------------------------------------------------- */

.anac-front{
    /* Largeur du contenu, partagée par l'en-tête et le corps pour qu'ils
       s'alignent. Le handoff proposait 920px ; c'est trop étroit sur un écran
       de bureau, où la page paraissait tassée au milieu d'un grand vide. On
       laisse le contenu respirer jusqu'à 1280px, et la gouttière latérale
       grandit elle aussi avec la fenêtre. */
    --anac-front-largeur: 1280px;
    --anac-front-gouttiere: clamp(16px, 4vw, 40px);

    font-family: var(--font-sans);
    color: var(--ana-ink);
    background: var(--ana-surface);
    min-height: 100vh;
    /* Les espaces insécables avant ? ! : % du contenu français ne doivent
       jamais casser en fin de ligne — c'est le rôle du nbsp dans le HTML,
       on s'assure juste de ne pas le compresser. */
    font-variant-numeric: tabular-nums lining-nums;
    -webkit-font-smoothing: antialiased;
}

/* Le thème peut poser des marges sur les titres et paragraphes : on repart
   d'une base nette plutôt que de lutter règle par règle.

   :where() est indispensable ici, il ne se discute pas. Écrit `.anac-front h1`,
   ce sélecteur pèse (0,1,1) et l'emporte donc sur `.anac-front__titre` (0,1,0)
   quoi qu'on fasse ensuite : la remise à zéro écrase les marges des composants
   au lieu de leur servir de base, et toute la page se tasse. :where() ramène le
   poids à (0,0,0), donc n'importe quelle règle plus bas reprend la main. */
:where(.anac-front) :where(h1, h2, h3, p, ul, li){
    margin: 0;
    padding: 0;
}

.anac-front *,
.anac-front *::before,
.anac-front *::after{
    box-sizing: border-box;
}

/* `hidden` veut dire « pas rendu », point. Toute règle de `display` posée sur
   un composant l'emporte pourtant sur le comportement par défaut de
   l'attribut, et l'élément réapparaît : c'est ainsi que le bandeau
   d'anti-triche s'affichait dès le chargement avec un compteur à zéro, et que
   les modales auraient été visibles sans une règle dédiée.
   Le !important est ici légitime : aucune règle de mise en page ne doit pouvoir
   rendre visible ce que le HTML déclare masqué. */
.anac-front [hidden],
.anac-front[hidden]{
    display: none !important;
}

.anac-front img{
    max-width: 100%;
}

.anac-front .anac-icon{
    flex: none;
    fill: currentColor;
}

/* Focus visible partout, y compris là où le thème l'aurait retiré.
   :focus-visible et non :focus : un clic à la souris ne doit pas dessiner
   d'anneau, une tabulation si. */
.anac-front :focus-visible{
    outline: 2px solid var(--ana-blue);
    outline-offset: 2px;
}

/* Réservé aux lecteurs d'écran (libellés des cases du code, par exemple). */
.anac-front .anac-sr{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------
   2. Surlignage jaune signature
   --------------------------------------------------------------------- */

/* Un trait jaune arrondi passé sous le mot, très légèrement de biais.
   Dessiné en ::before plutôt qu'en background : une image de fond ne pourrait
   ni dépasser du mot, ni pivoter.

   `isolation: isolate` n'est pas décoratif : sans lui, le z-index négatif du
   ::before le fait passer derrière le fond opaque de .anac-front, donc le trait
   jaune disparaît purement et simplement. isolate crée un contexte
   d'empilement sur le mot lui-même, si bien que le -1 reste borné à ce
   contexte — sous le texte, mais au-dessus du fond de la page.

   white-space: nowrap est nécessaire : le ::before est un rectangle unique, il
   ne saurait souligner que la dernière ligne si le groupe se coupait en deux.
   Le groupe entier peut en revanche passer à la ligne suivante du titre, ce
   qui suffit — « espace d'évaluation », le plus long des deux, mesure environ
   210px à 22px de corps, donc tient dans un mobile de 320px. */
.anac-front .anac-hl{
    position: relative;
    display: inline-block;
    isolation: isolate;
    white-space: nowrap;
    font-weight: var(--weight-semibold);
}

.anac-front .anac-hl::before{
    content: "";
    position: absolute;
    left: -.08em;
    right: -.08em;
    bottom: .04em;
    height: .34em;
    background: var(--ana-yellow);
    border-radius: 3px;
    transform: rotate(-1deg);
    z-index: -1;
}

/* ---------------------------------------------------------------------
   3. Boutons
   --------------------------------------------------------------------- */

.anac-front .anac-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 48px de haut, jamais moins de 44 : c'est la cible tactile minimale. */
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s var(--ease), border-color .15s var(--ease),
                box-shadow .15s var(--ease), opacity .15s var(--ease);
}

.anac-front .anac-btn--primary{
    background: var(--ana-gradient-blue);
    box-shadow: var(--shadow-btn);
    color: #fff;
}

.anac-front .anac-btn--primary:hover:not(:disabled){
    background: var(--ana-blue-dark);
}

.anac-front .anac-btn--outline{
    background: #fff;
    border-color: var(--ana-line);
    color: var(--ana-ink);
}

.anac-front .anac-btn--outline:hover:not(:disabled){
    border-color: var(--ana-blue);
    color: var(--ana-blue);
}

.anac-front .anac-btn--sm{
    min-height: 44px;
    padding: 0 18px;
}

.anac-front .anac-btn--block{
    width: 100%;
    min-height: 52px;
}

/* Désactivé et non caché : le bouton reste visible pour que le candidat
   sache ce qui l'attend, il devient seulement inopérant. */
.anac-front .anac-btn:disabled{
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

.anac-front .anac-btn__arrow{
    /* La flèche ne doit pas être lue par les lecteurs d'écran : le libellé
       du bouton se suffit. aria-hidden est posé dans le HTML. */
    font-size: 1.15em;
    line-height: 1;
    transition: transform .15s var(--ease);
}

.anac-front .anac-btn:hover:not(:disabled) .anac-btn__arrow{
    transform: translateX(2px);
}

/* ---------------------------------------------------------------------
   4. Carte
   --------------------------------------------------------------------- */

.anac-front .anac-card{
    background: var(--ana-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: clamp(20px, 2.5vw, 28px);
}

/* ---------------------------------------------------------------------
   5. Écran 1 — accueil / saisie du code
   --------------------------------------------------------------------- */

.anac-front--accueil{
    display: flex;
    flex-direction: column;
    /* Le dégradé va du blanc au gris de surface, de haut en bas. */
    background: linear-gradient(180deg, #fff 0%, var(--ana-surface) 100%);
}

.anac-front--accueil .anac-front__logo{
    padding: 28px var(--anac-front-gouttiere);
}

/* 44px au lieu des 32 du handoff : c'est le seul élément de marque de l'écran
   d'accueil, il peut le porter. Le fichier fait 768px de large, donc même à
   44px de haut sur un écran à densité doublée on reste très au-dessus de la
   résolution nécessaire. */
.anac-front--accueil .anac-front__logo img{
    display: block;
    height: 44px;
    width: auto;
    margin: 0 auto;
}

.anac-front--accueil main{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px) 16px;
}

.anac-accueil{
    max-width: 440px;
    width: 100%;
    text-align: center;
}

.anac-accueil__titre{
    font-size: var(--text-h2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-h2);
    line-height: var(--leading-snug);
    margin-bottom: 16px;
}

.anac-accueil__intro{
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--ana-gray);
    margin-bottom: clamp(32px, 4vw, 40px);
}

.anac-accueil__carte{
    padding: clamp(24px, 5vw, 36px);
}

.anac-accueil__rassurance{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-sm);
    color: var(--ana-gray-soft);
    margin-top: 24px;
}

.anac-accueil__rassurance .anac-icon{
    color: var(--ana-success);
}

/* --- Les six cases du code --- */

.anac-code{
    display: flex;
    justify-content: center;
    gap: clamp(6px, 1.5vw, 10px);
    margin-bottom: 8px;
}

/* flex:1 1 0 + min-width:0 : sans ça, six champs de largeur fixe débordent
   à 390px de large. La largeur suit le conteneur, plafonnée à 54px. */
.anac-code__case{
    flex: 1 1 0;
    min-width: 0;
    max-width: 54px;
    height: clamp(52px, 13vw, 64px);
    padding: 0;
    border: 1.5px solid var(--ana-line);
    border-radius: var(--radius-md);
    background: #fff;
    font-family: inherit;
    font-size: 24px;
    font-weight: var(--weight-semibold);
    text-align: center;
    color: var(--ana-ink);
    outline: none;
    /* Les flèches d'incrément d'un input numérique n'ont aucun sens sur une
       case d'un seul chiffre. inputmode=numeric fait sortir le pavé
       numérique sur mobile sans imposer type=number. */
    appearance: none;
}

.anac-code__case:focus{
    border-color: var(--ana-blue);
    box-shadow: var(--shadow-focus);
}

/* En erreur, les six cases se colorent d'un coup : c'est le code entier qui
   est refusé, pas un chiffre en particulier. */
.anac-code--erreur .anac-code__case{
    border-color: var(--ana-danger);
}

.anac-code__erreur{
    font-size: var(--text-sm);
    color: var(--ana-danger);
    margin-top: 10px;
    text-align: center;
}

.anac-accueil__action{
    margin-top: 24px;
}

/* ---------------------------------------------------------------------
   6. Écran 2 — tableau de bord
   --------------------------------------------------------------------- */

.anac-front__entete{
    background: #fff;
    border-bottom: 1px solid var(--ana-line);
    position: sticky;
    top: 0;
    /* Au-dessus du contenu, sous les modales (z-index 60). */
    z-index: 40;
}

/* Connecté à WordPress, la barre d'admin est fixée en haut : sans ce décalage
   l'en-tête collant se glisse dessous. Elle passe à 46px sous 783px de large,
   c'est le point de rupture de WordPress, pas le nôtre. */
body.admin-bar .anac-front__entete{
    top: 32px;
}

@media screen and (max-width: 782px){
    body.admin-bar .anac-front__entete{
        top: 46px;
    }
}

.anac-front__entete-inner{
    max-width: var(--anac-front-largeur);
    margin: 0 auto;
    padding: 16px var(--anac-front-gouttiere);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Hauteur imposée, largeur libre : c'est la seule façon de ne pas déformer le
   logo. Les attributs width/height du HTML portent les dimensions réelles du
   fichier (768×199) pour que le navigateur réserve le bon rapport avant même
   d'avoir chargé l'image. */
.anac-front__entete img{
    display: block;
    height: 34px;
    width: auto;
}

.anac-identite{
    display: flex;
    align-items: center;
    gap: 10px;
}

.anac-identite__avatar{
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--ana-blue-10);
    color: var(--ana-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.anac-identite__texte{
    display: flex;
    flex-direction: column;
    line-height: var(--leading-body);
    /* Un nom long ne doit pas pousser le logo hors de l'écran. */
    min-width: 0;
}

.anac-identite__nom{
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anac-identite__ref{
    font-size: var(--text-xs);
    color: var(--ana-gray-soft);
}

/* --- Sortie de session --- */

.anac-front .anac-quitter{
    /* Discret par défaut (machine personnelle), il n'a pas à concurrencer les
       actions d'évaluation. */
    margin-left: 6px;
    min-height: 40px;
    padding: 0 14px;
    color: var(--ana-gray);
}

/* Session ouverte par un code = poste partagé : la sortie devient une action
   de premier plan, parce que l'oublier expose l'espace au visiteur suivant. */
.anac-front .anac-quitter--fort{
    border-color: var(--ana-blue);
    color: var(--ana-blue);
}

.anac-front .anac-quitter--fort:hover{
    background: var(--ana-blue-06);
}

/* Sous 560px, l'en-tête est déjà chargé : on ne garde que l'icône. Le libellé
   est masqué à l'œil mais reste dans l'arbre d'accessibilité — c'est pour ça
   qu'on le décale au lieu de le supprimer (display:none le retirerait aussi
   des lecteurs d'écran, et le bouton n'aurait plus de nom). */
@media (max-width: 560px){
    .anac-front .anac-quitter span{
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .anac-front .anac-quitter{
        padding: 0 12px;
    }
}

/* Rappel de bas de page, sur poste partagé uniquement. */
.anac-sortie{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: clamp(36px, 4vw, 52px);
    padding-top: 20px;
    border-top: 1px solid var(--ana-line);
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--ana-gray-soft);
}

.anac-sortie .anac-icon{
    color: var(--ana-success);
    margin-top: 4px;
}

/* Un vrai <button> déguisé en lien : l'action a besoin d'être un bouton pour
   le clavier et les lecteurs d'écran, mais elle se lit dans une phrase. */
.anac-front .anac-lien{
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ana-blue);
    text-decoration: underline;
    cursor: pointer;
}

.anac-front .anac-lien:hover{
    color: var(--ana-blue-dark);
}

.anac-front__contenu{
    max-width: var(--anac-front-largeur);
    margin: 0 auto;
    padding: clamp(32px, 4vw, 56px) var(--anac-front-gouttiere) clamp(56px, 8vw, 96px);
}

.anac-front__titre{
    font-size: var(--text-h2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-h2);
    line-height: var(--leading-snug);
    margin-bottom: 16px;
}

.anac-front__intro{
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--ana-gray);
    /* Le blanc qui sépare l'introduction de la première section est ce qui
       fait lire le haut de page comme trois blocs et non comme un pavé. */
    margin-bottom: clamp(40px, 5vw, 64px);
    /* En ch plutôt qu'en px : la mesure reste lisible (~65 caractères) quelle
       que soit la taille de police héritée, y compris si le visiteur l'a
       augmentée dans son navigateur. */
    max-width: 66ch;
}

.anac-section{
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: clamp(36px, 4vw, 52px);
}

.anac-section:last-child{
    margin-bottom: 0;
}

.anac-section__titre{
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-h4);
}

/* --- Carte d'évaluation --- */

.anac-eval{
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 24px);
    flex-wrap: wrap;
}

.anac-eval__pastille{
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Une teinte et une couleur d'icône par état. Le statut n'est jamais porté
   par la seule couleur : l'icône et le titre de section le disent aussi. */
.anac-eval__pastille--a-realiser{
    background: var(--ana-blue-10);
    color: var(--ana-blue);
}

.anac-eval__pastille--en-cours{
    background: var(--ana-warning-tint);
    color: var(--ana-warning);
}

.anac-eval__pastille--finalisee{
    background: var(--ana-success-tint);
    color: var(--ana-success);
}

.anac-eval__corps{
    /* 1 1 220px : la carte passe en colonne sous ~340px de large, le bouton
       repassant à la ligne plutôt que de se comprimer. */
    flex: 1 1 220px;
    min-width: 0;
}

.anac-eval__titre{
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
}

.anac-eval__meta{
    font-size: var(--text-sm);
    color: var(--ana-gray-soft);
    margin-top: 4px;
}

.anac-eval__action{
    /* Poussé à droite quand la place le permet, sur sa propre ligne sinon. */
    margin-left: auto;
}

/* --- Barre de progression --- */

.anac-progres{
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    margin-top: 8px;
}

.anac-progres__piste{
    flex: 1;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--ana-track);
    overflow: hidden;
}

.anac-progres__part{
    height: 100%;
    background: var(--ana-blue);
    border-radius: var(--radius-full);
}

.anac-progres__valeur{
    font-size: var(--text-xs);
    color: var(--ana-gray-soft);
    flex: none;
}

/* --- État vide --- */

.anac-vide{
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ana-gray-soft);
    font-size: var(--text-sm);
}

.anac-vide__pastille{
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--ana-surface);
    color: var(--ana-gray-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* ---------------------------------------------------------------------
   7. Modales (consignes, reprise)
   --------------------------------------------------------------------- */

.anac-modale{
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(51, 63, 72, .55);
}

.anac-modale__boite{
    position: relative;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-pop);
    padding: clamp(24px, 4vw, 32px);
    width: 100%;
    max-width: 480px;
    /* Sur un petit écran en paysage, la modale doit pouvoir défiler. */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.anac-modale__fermer{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ana-gray-soft);
    cursor: pointer;
}

.anac-modale__fermer:hover{
    background: var(--ana-surface);
    color: var(--ana-ink);
}

.anac-modale__titre{
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-h3);
    line-height: var(--leading-snug);
    /* De la place pour la croix. */
    padding-right: 40px;
    margin-bottom: 8px;
}

.anac-modale__soustitre{
    font-size: var(--text-sm);
    color: var(--ana-gray-soft);
    margin-bottom: 20px;
}

.anac-consignes{
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.anac-consignes li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: var(--leading-loose);
    color: var(--ana-gray);
    list-style: none;
}

.anac-consignes .anac-icon{
    color: var(--ana-blue);
    /* Aligné sur la première ligne de texte, pas sur le centre du bloc. */
    margin-top: 3px;
}

.anac-modale__actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* À partir de 420px, les deux boutons tiennent côte à côte. */
@media (min-width: 420px){
    .anac-modale__actions{
        flex-direction: row;
    }

    .anac-modale__actions .anac-btn{
        flex: 1;
    }
}

/* Le fond ne défile pas derrière une modale ouverte. */
.anac-front--modale-ouverte{
    overflow: hidden;
}

/* ---------------------------------------------------------------------
   8. Bandeau d'erreur global
   --------------------------------------------------------------------- */

.anac-avis{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    /* En tête de page, l'avis précède le titre : il lui faut assez d'air pour
       ne pas se lire comme une ligne du titre. */
    margin-bottom: clamp(28px, 3vw, 36px);
}

/* Dans une modale, l'avis est un élément parmi d'autres : rythme resserré. */
.anac-modale .anac-avis{
    margin-bottom: 20px;
}

.anac-avis--erreur{
    background: var(--ana-danger-tint);
    color: var(--ana-danger);
}

.anac-avis--info{
    background: var(--ana-blue-08);
    color: var(--ana-blue);
}

/* ---------------------------------------------------------------------
   9. Pilules d'état (mode évaluation / mode correction)
   --------------------------------------------------------------------- */

.anac-pilule{
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.anac-pilule--eval{
    background: var(--ana-yellow);
    color: var(--ana-ink);
}

.anac-pilule--correction{
    background: var(--ana-blue-08);
    color: var(--ana-blue);
}

/* ---------------------------------------------------------------------
   10. Écran 3 — passage
   --------------------------------------------------------------------- */

/* Deux rangées dans l'en-tête : marque + mode + chrono, puis position +
   matière + barre segmentée. La seconde n'a pas de bordure propre, les deux
   forment un seul bloc collant. */
.anac-passage__entete .anac-front__entete-inner{
    padding-top: 12px;
    padding-bottom: 12px;
}

.anac-passage__rang1{
    /* Le logo est plus discret ici que sur les écrans d'accueil : l'attention
       doit aller à la question, pas à la marque. */
    gap: 12px;
}

.anac-passage__rang1 img{
    height: 26px;
    width: auto;
}

.anac-passage__rang2{
    flex-wrap: wrap;
    border-top: 1px solid var(--ana-line);
    padding-top: 12px;
}

.anac-chrono{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* tabular-nums : sans elle, la largeur du chrono danse à chaque seconde et
       tout l'en-tête tremble. */
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm);
    color: var(--ana-gray);
    margin-left: auto;
}

.anac-passage__position{
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.anac-passage__matiere{
    font-size: var(--text-sm);
    color: var(--ana-gray-soft);
    /* Une matière au nom long ne doit pas pousser la barre hors de l'écran. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Barre segmentée --- */

.anac-segments{
    display: flex;
    gap: 5px;
    flex: 1 1 100%;
    /* Chaque segment prend la même part : avec 20 questions sur mobile, ça fait
       des traits très fins mais toujours visibles. */
    min-width: 0;
}

.anac-segments__part{
    flex: 1 1 0;
    min-width: 0;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--ana-track);
}

.anac-segments__part--fait{
    background: var(--ana-blue);
}

.anac-segments__part--courant{
    background: var(--ana-yellow);
}

.anac-passage__contenu{
    /* 760px : la mesure du handoff pour l'écran de passage. Plus étroit que le
       tableau de bord, et c'est voulu — un énoncé se lit mieux en colonne. */
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px) var(--anac-front-gouttiere) clamp(48px, 6vw, 72px);
}

.anac-question{
    padding: clamp(20px, 3vw, 40px);
}

.anac-question__enonce{
    font-size: clamp(20px, 2.5vw, 24px);
    font-weight: var(--weight-semibold);
    line-height: 1.35;
    /* text-wrap:pretty évite les lignes orphelines d'un seul mot en fin
       d'énoncé. Ignoré par les navigateurs qui ne le connaissent pas. */
    text-wrap: pretty;
    margin-bottom: 24px;
}

.anac-question__enonce:focus{
    outline: none;
}

/* Les images d'énoncé viennent de la banque de questions : hauteur libre,
   largeur bornée, et centrées pour les schémas. */
.anac-question__enonce img,
.anac-choix__texte img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* --- Propositions (RadioCard) --- */

.anac-choix{
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* fieldset : le navigateur lui met bordure et marges par défaut. */
    border: 0;
    margin: 0;
    padding: 0;
}

.anac-choix__carte{
    display: flex;
    align-items: center;
    gap: 12px;
    /* 44px minimum : c'est la cible tactile, et une proposition d'une seule
       ligne ne doit pas être plus dure à viser qu'une longue. */
    min-height: 56px;
    padding: 14px 18px;
    border: 1.5px solid var(--ana-line);
    border-radius: var(--radius-md);
    background: #fff;
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}

.anac-choix__carte:hover{
    border-color: var(--ana-blue);
    background: var(--ana-blue-06);
}

/* Le radio réel est masqué à l'œil mais reste focusable et lisible : c'est lui
   qui porte l'état, le clavier et l'annonce « 2 sur 4 ». Le remplacer par un
   faux bouton en div coûterait tout ça. */
.anac-choix__radio{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.anac-choix__marque{
    flex: none;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--ana-line);
    border-radius: var(--radius-full);
    position: relative;
    transition: border-color .15s var(--ease);
}

.anac-choix__radio:checked + .anac-choix__marque{
    border-color: var(--ana-blue);
    border-width: 6px;
}

/* :has() porte la sélection sur toute la carte. Là où il n'est pas connu, la
   pastille suffit à indiquer le choix — la dégradation est acceptable. */
.anac-choix__carte:has(.anac-choix__radio:checked){
    border-color: var(--ana-blue);
    background: var(--ana-blue-06);
}

/* Focus clavier visible sur la carte entière, pas sur le radio invisible. */
.anac-choix__carte:has(.anac-choix__radio:focus-visible){
    outline: 2px solid var(--ana-blue);
    outline-offset: 2px;
}

.anac-choix__texte{
    min-width: 0;
}

.anac-passage__rappel{
    font-size: var(--text-sm);
    color: var(--ana-gray-soft);
    margin-top: 20px;
    line-height: var(--leading-loose);
}

.anac-passage__pied{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.anac-avis--alerte{
    background: var(--ana-warning-tint);
    color: var(--ana-warning);
}

/* ---------------------------------------------------------------------
   11. Écran 4 — résultat
   --------------------------------------------------------------------- */

.anac-front--resultat{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 48px) 16px;
}

.anac-resultat{
    max-width: 640px;
    width: 100%;
    text-align: center;
    padding: clamp(28px, 4vw, 44px);
}

.anac-resultat__logo{
    height: 34px;
    width: auto;
    display: block;
    margin: 0 auto 24px;
}

.anac-resultat__titre{
    font-size: var(--text-h3);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-h3);
    line-height: var(--leading-snug);
    margin-bottom: 12px;
}

.anac-resultat__intro{
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--ana-gray);
    margin-bottom: 32px;
}

/* --- Jauge circulaire --- */

/* conic-gradient plutôt qu'un canvas (ce que faisait l'ancien front) : un seul
   élément, net à toutes les densités d'écran, et le pourcentage reste du texte
   sélectionnable au centre. La part remplie arrive par --anac-jauge-part. */
.anac-jauge{
    width: 172px;
    height: 172px;
    margin: 0 auto 28px;
    border-radius: var(--radius-full);
    background: conic-gradient(
        var(--ana-blue) 0 var(--anac-jauge-part, 0%),
        var(--ana-track) var(--anac-jauge-part, 0%) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.anac-jauge__disque{
    width: 136px;
    height: 136px;
    border-radius: var(--radius-full);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.anac-jauge__valeur{
    font-size: 40px;
    font-weight: var(--weight-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.anac-jauge__legende{
    font-size: var(--text-xs);
    color: var(--ana-gray-soft);
    margin-top: 4px;
}

.anac-stats{
    display: flex;
    justify-content: center;
    gap: clamp(16px, 4vw, 40px);
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.anac-stats__item{
    display: flex;
    flex-direction: column;
    min-width: 72px;
}

.anac-stats__chiffre{
    font-size: 20px;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

.anac-stats__chiffre--juste{ color: var(--ana-success); }
.anac-stats__chiffre--faux{  color: var(--ana-danger); }

.anac-stats__libelle{
    font-size: var(--text-sm);
    color: var(--ana-gray-soft);
    margin-top: 4px;
}

.anac-resultat__sorties{
    font-size: var(--text-sm);
    color: var(--ana-warning);
    margin-bottom: 24px;
}

.anac-resultat__actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 440px){
    .anac-resultat__actions{
        flex-direction: row;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------
   12. Écran 5 — correction
   --------------------------------------------------------------------- */

.anac-correction__rang1{
    gap: 12px;
}

.anac-correction__rang1 img{
    height: 28px;
    width: auto;
}

.anac-correction__meta{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--ana-gray-soft);
    min-width: 0;
}

.anac-correction__meta strong{
    color: var(--ana-ink);
    font-variant-numeric: tabular-nums;
}

/* --- Pastilles de navigation --- */

.anac-pastilles{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 4px;
    border-top: 1px solid var(--ana-line);
    width: 100%;
}

.anac-pastille{
    /* inline-flex + padding:0 + line-height:1 : un <button> porte un
       remplissage par défaut et centre son texte selon sa hauteur de ligne, ce
       qui décalait le numéro vers le haut dans le cercle. Le centrage doit être
       explicite sur les deux axes. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--radius-full);
    border: 2px solid var(--ana-line);
    background: #fff;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    cursor: pointer;
    flex: none;
    transition: transform .12s var(--ease);
}

.anac-pastille--juste{
    background: var(--ana-success-tint);
    border-color: var(--ana-success);
    color: var(--ana-success);
}

.anac-pastille--faux{
    background: var(--ana-danger-tint);
    border-color: var(--ana-danger);
    color: var(--ana-danger);
}

/* La pastille courante se distingue par une bordure bleue **et** un léger
   grossissement : sur une série de vingt, la couleur seule se repère mal. */
.anac-pastille--courant{
    border-color: var(--ana-blue);
    transform: scale(1.08);
}

.anac-correction__contenu{
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px) var(--anac-front-gouttiere) clamp(48px, 6vw, 72px);
}

.anac-correction__question{
    padding: clamp(20px, 3vw, 40px);
}

.anac-correction__tete{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.anac-correction__numero{
    font-size: var(--text-sm);
    color: var(--ana-gray-soft);
}

.anac-tag{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.anac-tag--juste{  background: var(--ana-success-tint); color: var(--ana-success); }
.anac-tag--faux{   background: var(--ana-danger-tint);  color: var(--ana-danger); }
.anac-tag--neutre{ background: var(--ana-surface);      color: var(--ana-gray-soft); }

/* --- Propositions en lecture seule --- */

.anac-choix--lecture{
    list-style: none;
}

.anac-choix__carte--lecture{
    cursor: default;
    align-items: flex-start;
    flex-wrap: wrap;
}

.anac-choix__carte--lecture:hover{
    /* Pas d'effet de survol : il n'y a plus rien à cliquer. */
    border-color: var(--ana-line);
    background: #fff;
}

.anac-choix__carte--bonne{
    border-color: var(--ana-success);
    background: var(--ana-success-soft);
}

.anac-choix__carte--bonne:hover{
    border-color: var(--ana-success);
    background: var(--ana-success-soft);
}

.anac-choix__carte--erreur{
    border-color: var(--ana-danger);
    background: var(--ana-danger-tint);
}

.anac-choix__carte--erreur:hover{
    border-color: var(--ana-danger);
    background: var(--ana-danger-tint);
}

/* Le statut est toujours écrit, jamais seulement coloré. */
.anac-choix__etiquette{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.anac-choix__etiquette--bonne{  color: var(--ana-success); }
.anac-choix__etiquette--erreur{ color: var(--ana-danger); }

.anac-explication{
    margin-top: 24px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: var(--ana-blue-08);
}

.anac-explication__tete{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ana-blue);
    margin-bottom: 8px;
}

.anac-explication__corps{
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--ana-gray);
}

.anac-correction__nav{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.anac-correction__retour{
    margin-left: auto;
}

/* ---------------------------------------------------------------------
   13. Préférences d'accessibilité
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
    .anac-front *,
    .anac-front *::before,
    .anac-front *::after{
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}