/* ============================================================
   ACCÈS — la porte d'entrée de la pré-inscription.
   Trois écrans, une seule feuille :

     .page-tuto    le mode d'emploi que le professeur PARTAGE à l'écran
     .page-code    la saisie du code à six chiffres
     .page-espace  l'espace de l'élève après le code

   DEUX RÈGLES DE FABRICATION

   1. CES PAGES SONT VUES À TRAVERS UNE VISIO. Le partage d'écran
      dégrade d'abord le contraste et les petits caractères. Donc :
      grand, contrasté, jamais de gris clair sur blanc.

   2. LA PAGE TUTO TIENT DANS LA FENÊTRE, SANS DÉFILEMENT. Le
      professeur la partage en direct : s'il doit faire défiler son
      écran, l'élève perd le fil. Tout est donc exprimé en `vh` et en
      `clamp()` — la page se comprime et grandit avec la fenêtre au
      lieu de déborder.

      La hauteur est répartie par flexbox : l'en-tête garde sa taille,
      la zone des trois étapes prend ce qui reste et le distribue.
      Si l'écran est vraiment trop petit, c'est le CADRE qui défile à
      l'intérieur (jamais la page) : rien n'est jamais coupé.
   ============================================================ */

/* ---------- LE MODE D'EMPLOI (page tuto) ---------- */

html:has(body.page-tuto),
body.page-tuto {
    height: 100%;
}

.page-tuto {
    background: var(--fond-degrade);
    min-height: 100dvh;
    margin: 0;
    padding: clamp(6px, 1.2vh, 18px) clamp(6px, 1vw, 16px);
    font-family: var(--police-texte);
    color: var(--texte);
    overflow: hidden;
}

.tuto {
    max-width: 1180px;
    height: 100%;
    margin: 0 auto;
    background: var(--blanc);
    border-radius: clamp(14px, 2vh, 26px);
    box-shadow: 0 18px 44px rgba(43, 58, 82, .12);
    border: 1px solid var(--bord);
    padding: clamp(9px, 1.8vh, 26px) clamp(14px, 2.2vw, 38px);
    display: flex;
    flex-direction: column;
    gap: clamp(3px, .9vh, 12px);
    overflow: auto;          /* filet de sécurité : jamais de contenu coupé */
}

/* ---------- L'en-tête ---------- */

.tuto-entete {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.6vw, 20px);
    padding-bottom: clamp(4px, .9vh, 13px);
    border-bottom: 2px solid var(--bord-doux);
}

.tuto-logo {
    height: clamp(44px, 8.2vh, 84px);
    width: auto;
    flex: 0 0 auto;
}

.tuto-titres h1 {
    font-family: var(--police-titre);
    font-size: clamp(1.1rem, min(2.5vw, 3.5vh), 2.1rem);
    line-height: 1.08;
    color: var(--encre);
    margin: 0;
    font-weight: 800;
}

.tuto-titres p {
    margin: clamp(1px, .4vh, 5px) 0 0;
    color: var(--texte-doux);
    font-size: clamp(.74rem, min(1.1vw, 1.8vh), 1rem);
}

/* Le badge « 1 minuto » : rassure avant même de lire (ce sera court). */
.tuto-badge {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3faff;
    border: 1.5px solid #d5ecfb;
    color: var(--bleu-fonce);
    border-radius: 999px;
    padding: clamp(3px, .7vh, 7px) clamp(8px, .9vw, 14px);
    font-size: clamp(.66rem, min(.9vw, 1.5vh), .82rem);
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- LE PREMIER MOT : le prénom, en grand ---------- */

.tuto-hero {
    flex: 0 0 auto;
}

.tuto-hero h2 {
    font-family: var(--police-titre);
    font-size: clamp(1.5rem, min(3vw, 4.6vh), 2.7rem);
    line-height: 1.08;
    margin: 0;
    color: var(--encre);
    font-weight: 700;
    letter-spacing: -.01em;
}

.tuto-hero h2 strong {
    font-weight: 800;
    color: var(--vert-fonce);
}

.tuto-vague {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: tuto-vague 2.6s ease-in-out 1.2s 1;
}

@keyframes tuto-vague {
    0%, 55%, 100% { transform: rotate(0deg); }
    65% { transform: rotate(14deg); }
    75% { transform: rotate(-8deg); }
    85% { transform: rotate(10deg); }
    95% { transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tuto-vague { animation: none; }
}

.tuto-hero p {
    margin: clamp(2px, .7vh, 9px) 0 0;
    font-size: clamp(.8rem, min(1.2vw, 1.9vh), 1rem);
    line-height: 1.35;
    color: var(--texte);
    max-width: 68ch;
}

/* ---------- La zone des trois étapes ---------- */

.tuto-etapes-zone {
    flex: 1 1 auto;
    min-height: 0;            /* sans ceci, un enfant flex refuse de rétrécir */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.tuto-etape {
    display: grid;
    grid-template-columns: clamp(30px, 5vh, 54px) minmax(0, 1fr);
    gap: clamp(8px, 1.5vh, 18px);
    align-items: center;
}

.tuto-etape > div:last-child {
    min-width: 0;
}

.tuto-num {
    width: clamp(30px, 4.8vh, 52px);
    height: clamp(30px, 4.8vh, 52px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--police-titre);
    font-size: clamp(.9rem, 2.1vh, 1.5rem);
    font-weight: 800;
    color: #fff;
    background: linear-gradient(160deg, var(--vert-clair), var(--vert));
    box-shadow: 0 3px 0 var(--vert-ombre);
    align-self: start;
}

.tuto-etape--2 .tuto-num {
    background: linear-gradient(160deg, var(--bleu-clair), var(--bleu));
    box-shadow: 0 3px 0 var(--bleu-ombre);
}

.tuto-etape--3 .tuto-num {
    background: linear-gradient(160deg, var(--violet), #a86ce0);
    box-shadow: 0 3px 0 #8b5cf6;
}

.tuto-consigne {
    margin: 0 0 clamp(4px, .9vh, 11px);
    font-size: clamp(.9rem, min(1.45vw, 2.2vh), 1.14rem);
    line-height: 1.25;
    color: var(--encre);
    font-weight: 700;
}

/* L'adresse : c'est ce qui se lit le mieux à travers une visio. */
.tuto-adresse {
    display: block;
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: clamp(1rem, min(2.7vw, 5vh), 2.6rem);
    letter-spacing: .12em;
    line-height: 1.2;
    color: var(--encre);
    background: #f2f8ff;
    border: 2px solid #cfe6fb;
    border-radius: clamp(10px, 1.4vh, 16px);
    padding: clamp(3px, .9vh, 13px) clamp(8px, 1.4vw, 18px);
    text-align: center;
    word-break: break-all;
    user-select: all;
}

/* ---------- L'étape 3 : le code et le QR ---------- */

.tuto-bas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: clamp(7px, 1.1vw, 16px);
    align-items: center;
    background: #fbfdff;
    border: 2px solid var(--bord-doux);
    border-radius: clamp(11px, 1.7vh, 19px);
    padding: clamp(5px, 1.2vh, 16px) clamp(8px, 1.4vw, 20px);
}

.tuto-code-bloc {
    min-width: 0;
}

/* Le trait vertical avec « ou » : c'est lui qui fait du code et du QR UN
   SEUL objet, deux façons d'entrer, au lieu de deux blocs côte à côte. */
.tuto-ou {
    position: relative;
    align-self: stretch;
    width: 1px;
    background: var(--bord);
}

.tuto-ou span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fbfdff;
    padding: 3px;
    font-size: clamp(.56rem, min(.75vw, 1.3vh), .7rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-doux);
    font-weight: 700;
}

.tuto-code-six {
    display: flex;
    gap: clamp(4px, .8vw, 10px);
    margin: 0 0 clamp(3px, .7vh, 9px);
}

.tuto-code-six span {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    place-items: center;
    font-family: var(--police-titre);
    font-size: clamp(1.4rem, min(3.6vw, 5.8vh), 3.2rem);
    font-weight: 800;
    color: var(--encre);
    background: var(--blanc);
    border: 3px solid var(--bleu);
    border-radius: clamp(8px, 1.2vh, 14px);
    padding: clamp(1px, .45vh, 7px) 0 clamp(2px, .65vh, 9px);
    box-shadow: 0 3px 0 rgba(28, 176, 246, .35);
}

.tuto-code-six span.est-vide {
    border-color: var(--bord);
    box-shadow: none;
    color: var(--texte-doux);
}

.tuto-code-note {
    margin: 0;
    font-size: clamp(.7rem, min(1vw, 1.7vh), .95rem);
    color: var(--texte-doux);
    line-height: 1.3;
}

.tuto-code-note strong {
    color: var(--encre);
}

.tuto-qr {
    text-align: center;
    min-width: 0;
}

.tuto-qr-cadre {
    background: #fff;
    border: 2px solid var(--bord);
    border-radius: clamp(10px, 1.4vh, 16px);
    padding: clamp(3px, .7vh, 9px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.tuto-qr-cadre img {
    /* Le QR est dessiné à sa taille naturelle et ne s'étire JAMAIS : c'est
       ce qui le garde net. Seule sa hauteur suit la fenêtre ; sa largeur
       suit son ratio. `pixelated` garde les modules carrés. */
    height: clamp(74px, 17vh, 168px) !important;
    width: auto !important;
    max-width: 100%;
    display: block;
    image-rendering: pixelated;
}

.tuto-qr p {
    margin: clamp(2px, .5vh, 8px) 0 0;
    font-size: clamp(.6rem, min(.85vw, 1.45vh), .8rem);
    color: var(--texte-doux);
    line-height: 1.25;
}

/* ---------- Ce que l'élève va trouver, en trois repères ---------- */

/* Le bandeau du bas : les trois repères et la phrase de Jérémy sont
   réunis sur un même fond, sinon ils flottent au bas de la page. */
.tuto-socle {
    flex: 0 0 auto;
    background: linear-gradient(150deg, #f4fbf1 0%, #eff8ff 100%);
    border: 1.5px solid #dcefe2;
    border-radius: clamp(11px, 1.6vh, 18px);
    padding: clamp(5px, 1vh, 13px) clamp(10px, 1.3vw, 20px);
    display: flex;
    flex-direction: column;
    gap: clamp(3px, .6vh, 8px);
}

.tuto-plus {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.4vw, 18px);
    flex-wrap: wrap;
}

.tuto-plus-titre {
    font-size: clamp(.66rem, min(.9vw, 1.5vh), .8rem);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texte-doux);
    font-weight: 700;
    white-space: nowrap;
}

.tuto-plus-liste {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(5px, .7vw, 10px);
}

.tuto-plus-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: clamp(3px, .65vh, 8px) clamp(8px, 1vw, 14px);
    border-radius: 999px;
    background: #f3faff;
    border: 1.5px solid #d5ecfb;
    color: var(--encre);
    font-size: clamp(.7rem, min(1vw, 1.6vh), .9rem);
    font-weight: 600;
    white-space: nowrap;
}

.tuto-plus-item i {
    color: var(--bleu);
    font-size: 1.05em;
    line-height: 1;
}

/* ---------- La phrase de fin d'accueil ---------- */

.tuto-final {
    margin: 0;
    text-align: center;
    font-size: clamp(.78rem, min(1.1vw, 1.8vh), 1rem);
    /* --texte, pas --texte-doux : sur le fond teinté du bandeau, le gris
       secondaire perd le contraste minimal (WCAG AA). */
    color: var(--texte);
}

.tuto-final strong {
    color: var(--encre);
}

.tuto-signature {
    display: inline-block;
    margin-left: .35em;
    font-family: var(--police-titre);
    font-weight: 700;
    color: var(--vert-fonce);
}

/* ---------- Les commandes du professeur (masquées) ---------- */

.tuto-barre {
    position: fixed;
    right: clamp(12px, 2vw, 28px);
    bottom: clamp(10px, 2vh, 24px);
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 20;
}

.tuto-barre:hover,
.tuto-barre:focus-within,
.page-tuto.est-controle .tuto-barre {
    opacity: 1;
}

.tuto-barre form {
    margin: 0;
}

.tuto-bouton {
    font-family: var(--police-texte);
    font-size: .88rem;
    font-weight: 700;
    border-radius: var(--r-pilule);
    border: 2px solid var(--bord);
    background: var(--blanc);
    color: var(--texte);
    padding: 8px 16px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(43, 58, 82, .10);
}

.tuto-bouton:hover {
    border-color: var(--bleu);
    color: var(--bleu-fonce);
}

.tuto-bouton--principal {
    background: var(--bleu);
    border-color: var(--bleu);
    color: #fff;
}

.tuto-bouton--principal:hover {
    background: var(--bleu-fonce);
    border-color: var(--bleu-fonce);
    color: #fff;
}

.tuto-alerte {
    max-width: 1180px;
    margin: 0 auto 10px;
    background: #fff5f5;
    border: 2px solid #ffd0d0;
    color: #b3261e;
    border-radius: 14px;
    padding: 10px 14px;
    font-size: .92rem;
}

/* ---------- La saisie du code (page d'entrée) ---------- */

.code-champ {
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 2rem;
    letter-spacing: .42em;
    text-align: center;
    text-indent: .42em;
    padding: 16px 8px;
    font-weight: 700;
    color: var(--encre);
}

.code-champ::placeholder {
    letter-spacing: .2em;
    text-indent: .2em;
    color: #c3ccd8;
    font-weight: 400;
}

.code-aide {
    font-size: .88rem;
    color: var(--texte-doux);
    text-align: center;
    margin: 14px 0 0;
    line-height: 1.5;
}

.code-separateur {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: var(--texte-doux);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.code-separateur::before,
.code-separateur::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bord);
}

/* ---------- L'espace de l'élève après le code ---------- */

.espace-hello {
    text-align: center;
    margin-bottom: 6px;
}

.espace-hello h2 {
    font-family: var(--police-titre);
    font-size: 1.6rem;
    color: var(--encre);
    margin: 0 0 4px;
    font-weight: 800;
}

.espace-hello p {
    margin: 0;
    color: var(--texte-doux);
    font-size: .95rem;
}

.espace-etapes {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.espace-etapes li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 2px solid var(--bord-doux);
    background: #fbfdff;
}

.espace-etapes .num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-family: var(--police-titre);
    font-size: .95rem;
    background: var(--bord);
    color: var(--texte-doux);
}

.espace-etapes li.est-fait {
    border-color: #d9eed0;
    background: #f6fcf2;
}

.espace-etapes li.est-fait .num {
    background: var(--vert);
    color: #fff;
}

.espace-etapes li.est-courant {
    border-color: var(--bleu);
    background: #f3faff;
}

.espace-etapes li.est-courant .num {
    background: var(--bleu);
    color: #fff;
}

.espace-etapes strong {
    display: block;
    color: var(--encre);
    font-size: .98rem;
}

.espace-etapes small {
    color: var(--texte-doux);
    font-size: .84rem;
}

/* ---------- L'espace élève : le départ, la sortie ---------- */

.espace-cta {
    margin-top: 22px;
}

/* Le bouton de départ. Vert de la marque, avec la « tranche » sombre du
   site (la même que les boutons Duolingo) : il se voit, il s'enfonce au
   clic, il ne ressemble à rien d'autre sur la page. */
.espace-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 18px 16px;
    border-radius: 14px;
    background: var(--vert);
    color: #fff;
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 4px 0 var(--vert-ombre);
    transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
}

.espace-bouton:hover {
    background: var(--vert-clair);
    color: #fff;
    text-decoration: none;
}

.espace-bouton:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--vert-ombre);
}

.espace-cta-note {
    margin: 10px 0 0;
    text-align: center;
    font-size: .82rem;
    color: var(--texte-doux);
    line-height: 1.4;
}

/* Le test n'est pas encore là : un encadré qui explique, pas un bouton
   grisé — un bouton désactivé ressemble à une panne. */
.espace-attente {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-top: 20px;
    padding: 14px 16px;
    background: #f3faff;
    border: 2px solid #d5ecfb;
    border-radius: 14px;
}

.espace-attente i {
    color: var(--bleu);
    font-size: 1.2rem;
    line-height: 1.1;
}

.espace-attente strong {
    display: block;
    color: var(--encre);
    font-size: .98rem;
    margin-bottom: 3px;
}

.espace-attente span {
    color: var(--texte);
    font-size: .87rem;
    line-height: 1.45;
}

/* Le professeur a fermé l'accès : ce n'est pas une étape du parcours,
   c'est une indisponibilité temporaire. Le ton change pour le dire. */
.espace-attente--bloque {
    background: #fff7f5;
    border-color: #ffd8cf;
}

.espace-attente--bloque i,
.espace-attente--bloque strong {
    color: #b42318;
}

.espace-attente--bloque em {
    display: block;
    margin-top: 4px;
    font-style: italic;
    color: var(--texte-doux);
}

/* La sortie de secours : un lien, jamais un bouton. */
.espace-sortie {
    margin-top: 20px;
    text-align: center;
}

.espace-sortie-lien {
    background: none;
    border: 0;
    padding: 6px 4px;
    color: var(--texte-doux);
    font-size: .84rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.espace-sortie-lien:hover {
    color: var(--encre);
}

/* ---------- Écran bas : on laisse défiler plutôt que couper ---------- */

@media (max-height: 560px) {
    .page-tuto {
        height: auto;
        overflow: auto;
    }

    .tuto {
        height: auto;
    }

    .tuto-qr-cadre img {
        height: 80px !important;
    }
}

/* ---------- Téléphone : le tuto s'empile et accepte le défilement ---------- */

@media (max-width: 820px) {
    .page-tuto {
        height: auto;
        overflow: auto;
        padding: 4px;
    }

    .tuto {
        height: auto;
        padding: 14px 14px 14px;
        border-radius: 20px;
    }

    .tuto-entete {
        flex-wrap: wrap;
        gap: 10px;
    }

    .tuto-badge {
        margin-left: 0;
    }

    .tuto-plus {
        align-items: flex-start;
        gap: 8px;
    }

    .tuto-etapes-zone {
        justify-content: flex-start;
    }

    .tuto-etape {
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;
        padding: 6px 0;
    }

    .tuto-num {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .tuto-bas {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .tuto-ou {
        width: auto;
        height: 1px;
        align-self: auto;
    }

    .tuto-qr {
        text-align: left;
    }

    .tuto-qr-cadre img {
        height: 128px !important;
    }
}

/* ---------- Impression (le professeur peut imprimer le tuto) ---------- */

@media print {
    .page-tuto {
        background: #fff;
        padding: 0;
        height: auto;
        overflow: visible;
    }

    .tuto {
        box-shadow: none;
        border: 0;
        padding: 0;
        max-width: none;
        height: auto;
        overflow: visible;
    }

    .tuto-barre {
        display: none;
    }
}


/* ============================================================
   LE TEST DE NIVEAU — une question à la fois.
   Aucun retour de correction : la page ne montre jamais si c'est juste.
   Elle doit donc être agréable à traverser seule : grandes cibles,
   hiérarchie nette, jamais de rouge « faux ».
   ============================================================ */

.page-test {
    background: var(--fond-degrade);
    min-height: 100dvh;
    margin: 0;
    padding: clamp(8px, 2vh, 24px) clamp(8px, 2vw, 20px);
    font-family: var(--police-texte);
    color: var(--texte);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.test-carte {
    width: 100%;
    max-width: 760px;
    min-height: calc(100dvh - clamp(16px, 4vh, 48px));
    background: var(--blanc);
    border: 1px solid var(--bord);
    border-radius: clamp(16px, 2.4vh, 26px);
    box-shadow: 0 18px 44px rgba(43, 58, 82, .10);
    padding: clamp(16px, 3vh, 32px) clamp(16px, 3.4vw, 40px) clamp(18px, 3vh, 32px);
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.4vh, 26px);
}

.test-entete {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.test-logo {
    height: clamp(34px, 5.6vh, 52px);
    width: auto;
}

.test-points {
    margin-left: auto;
    display: flex;
    gap: 7px;
}

.test-point {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bord);
}

.test-point.est-fait {
    background: var(--vert);
}

.test-point.est-courant {
    background: var(--bleu);
    transform: scale(1.5);
}

/* La progression est une BARRE, pas des points qui repartent de zéro.
   Le numéro de question est cumulé : « Pergunta 7 » après le troisième
   palier, et non « 1 » comme si le test recommençait. */
.test-progression {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.test-numero {
    font-size: .8rem;
    font-weight: 700;
    color: var(--texte-doux);
    white-space: nowrap;
}

.test-barre {
    display: block;
    width: clamp(88px, 16vw, 170px);
    height: 8px;
    border-radius: 999px;
    background: var(--bord);
    overflow: hidden;
}

.test-barre > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bleu), var(--vert));
    transition: width .35s ease;
}

/* ---------- La question ---------- */

.test-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: clamp(16px, 2.6vh, 28px);
}

.test-question {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(10px, 1.6vh, 18px);
}

.test-mot {
    font-family: var(--police-titre);
    font-size: clamp(1.6rem, min(4vw, 5.4vh), 2.4rem);
    font-weight: 800;
    color: var(--encre);
    margin: 0;
    line-height: 1.15;
    text-align: center;
}

.test-mot--pt {
    font-weight: 700;
    color: var(--bleu-fonce);
    font-size: clamp(1.2rem, min(3vw, 4vh), 1.8rem);
}

.test-consigne {
    margin: 0;
    text-align: center;
    font-size: clamp(.9rem, min(1.4vw, 2.1vh), 1.05rem);
    color: var(--texte-doux);
}

.test-note {
    margin: 0;
    text-align: center;
    font-size: clamp(.78rem, min(1.1vw, 1.8vh), .9rem);
    color: var(--texte-doux);
    line-height: 1.4;
}

/* ---------- Les réponses ---------- */

.test-options {
    display: grid;
    gap: clamp(8px, 1.3vh, 12px);
}

.test-option,
.test-puce {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: clamp(12px, 1.9vh, 17px) clamp(14px, 2vw, 20px);
    border: 2px solid var(--bord);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    font-size: clamp(.95rem, min(1.5vw, 2.2vh), 1.1rem);
    color: var(--encre);
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
    min-height: 48px;
}

.test-option:has(input:checked),
.test-puce:has(input:checked) {
    border-color: var(--bleu);
    background: #f3faff;
}

.test-option:active,
.test-puce:active {
    transform: scale(.995);
}

.test-option input,
.test-puce input {
    accent-color: var(--bleu);
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin: 0;
}

.test-options--puces {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.test-puce {
    justify-content: center;
}

/* ---------- Association : le dessin des exercices du site ----------
   Deux colonnes, on touche un mot puis sa traduction. Repris de
   pages.css (.association-*), mais SANS les couleurs de correction :
   pendant un test de niveau, on ne montre jamais si c'est juste. */

.page-test .association-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.page-test .association-column {
    width: 48%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.page-test .association-word {
    display: block;
    width: 100%;
    text-align: center;
    background: #fff;
    border: 2px solid var(--bord);
    border-bottom-width: 4px;
    border-radius: 0.75rem;
    padding: 0.8rem 1.1rem;
    font-size: clamp(.95rem, min(1.4vw, 2.1vh), 1.08rem);
    font-family: var(--police-texte);
    color: var(--encre);
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.page-test .association-word:hover {
    background: #f7f7f7;
    transform: translateY(-2px);
}

/* La sélection ne prend AUCUNE couleur de paire (le bleu est la paire 2) :
   elle se marque par un contour sombre et un léger relief. */
.page-test .association-word.selected {
    border-color: var(--encre);
    background: #eef1f5;
    box-shadow: 0 0 0 3px rgba(43, 58, 82, .18);
}

/* Associé : la couleur vient de la paire (voir pages.css), pas d'un
   bleu uniforme — sinon toutes les paires se ressemblent. */
.page-test .association-word.test-associe {
    font-weight: 700;
    cursor: pointer;
}

/* ---------- Texte à trous ---------- */

.test-phrase {
    margin: 0;
    text-align: center;
    font-size: clamp(1.05rem, min(2vw, 2.8vh), 1.4rem);
    line-height: 1.9;
    color: var(--encre);
}

.test-vide {
    display: inline-block;
    min-width: 4.5em;
    /* Sans ça, un élément vide en ligne s'assied SUR la ligne de base :
       le trait descendait sous le texte et paraissait décroché. */
    vertical-align: -0.18em;
    border-bottom: 2px dashed var(--bleu);
    margin: 0 .25em;
}

.test-select {
    font-family: var(--police-texte);
    font-size: 1rem;
    padding: 8px 10px;
    border: 2px solid var(--bleu);
    border-radius: 10px;
    background: #f3faff;
    color: var(--encre);
    min-height: 42px;
}

.test-select--trou {
    margin: 0 .15em;
    vertical-align: middle;
}

/* ---------- La phrase à trous et sa banque de mots ---------- */

.page-test .phrase-trous {
    text-align: center;
    font-size: clamp(1.05rem, min(2vw, 2.8vh), 1.4rem);
    line-height: 2.1;
    color: var(--encre);
}

.page-test .blank-spot {
    display: inline-block;
    min-width: 5em;
    height: 1.75em;
    vertical-align: middle;
    margin: 0 .25em;
    border-bottom: 3px solid var(--bleu);
    border-radius: 6px;
    background: #f3faff;
}

.page-test .blank-spot:has(.word-token) {
    border-bottom-color: transparent;
    background: transparent;
}

.page-test .word-bank-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.1rem;
}

.page-test .word-token {
    display: inline-block;
    background: #fff;
    border: 2px solid var(--bord);
    border-bottom-width: 4px;
    border-radius: .75rem;
    padding: .65rem 1.15rem;
    font-family: var(--police-texte);
    font-size: clamp(.95rem, min(1.3vw, 2vh), 1.05rem);
    color: var(--encre);
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}

.page-test .word-token:hover {
    background: #f7f7f7;
    transform: translateY(-2px);
}

.page-test .blank-spot .word-token {
    font-size: .95em;
    padding: .2rem .7rem;
    margin: 0;
}

/* ---------- Association (ancien bloc) ---------- */

.test-paires {
    display: grid;
    gap: clamp(8px, 1.2vh, 12px);
}

.test-paire {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 45%);
    gap: 12px;
    align-items: center;
    padding: clamp(8px, 1.3vh, 14px) clamp(10px, 1.6vw, 16px);
    border: 2px solid var(--bord);
    border-radius: 14px;
    background: #fff;
}

.test-paire-mot {
    font-weight: 700;
    color: var(--encre);
    font-size: clamp(.95rem, min(1.4vw, 2.1vh), 1.08rem);
}

.test-paire select {
    width: 100%;
    font-family: var(--police-texte);
    font-size: .98rem;
    padding: 8px 10px;
    border: 2px solid var(--bleu);
    border-radius: 10px;
    background: #f3faff;
    color: var(--encre);
    min-height: 42px;
}

/* ---------- Remise en ordre ---------- */

.test-ordre {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.test-ordre-zone {
    min-height: 68px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 2px solid var(--bord);
    border-radius: 14px;
    background: #fbfdff;
}

.test-ordre-zone.est-vide {
    border-style: dashed;
    border-color: var(--bleu);
    justify-content: center;
}

.test-ordre-invite {
    color: var(--texte-doux);
    font-size: .9rem;
}

.test-ordre-zone:not(.est-vide) .test-ordre-invite {
    display: none;
}

.test-ordre-banque {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f2f6fa;
}

.test-jeton {
    font-family: var(--police-texte);
    font-size: clamp(.9rem, min(1.3vw, 2vh), 1rem);
    font-weight: 600;
    padding: 9px 14px;
    border: 2px solid var(--bord);
    border-radius: 999px;
    background: #fff;
    color: var(--encre);
    cursor: pointer;
    min-height: 42px;
}

.test-jeton.est-place {
    border-color: var(--bleu);
    background: #eaf6ff;
}

/* La ponctuation n'est pas un mot : ni pastille, ni bordure. */
.test-jeton--ponct {
    border-color: transparent;
    background: transparent;
    padding-left: 6px;
    padding-right: 6px;
    min-width: 30px;
    font-weight: 800;
    color: var(--texte-doux);
}

.test-jeton--ponct.est-place {
    border-color: transparent;
    background: transparent;
    color: var(--encre);
}

/* ---------- Écriture ---------- */

.test-champ {
    width: 100%;
    font-family: var(--police-texte);
    font-size: 1.05rem;
    padding: 14px 16px;
    border: 2px solid var(--bord);
    border-radius: 14px;
    background: #fff;
    color: var(--encre);
    resize: none;
}

.test-champ:focus,
.test-select:focus,
.test-paire select:focus {
    outline: 3px solid rgba(28, 176, 246, .35);
    outline-offset: 1px;
    border-color: var(--bleu);
}

/* ---------- Les deux boutons ---------- */

.test-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.test-valider {
    width: 100%;
    padding: 16px 18px 17px;
    border: 0;
    border-radius: 14px;
    background: var(--vert);
    color: #fff;
    font-family: var(--police-titre);
    font-size: 1.05rem;
    font-weight: 800;
    box-shadow: 0 4px 0 var(--vert-ombre);
    cursor: pointer;
    transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
}

.test-valider:hover {
    background: var(--vert-clair);
}

.test-valider:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--vert-ombre);
}

/* Tant qu'aucune réponse n'est donnée, le bouton est là mais inerte. */
.test-valider:disabled,
.test-valider.est-inactif {
    background: #cfe3bf;
    box-shadow: 0 4px 0 #b9d5a6;
    cursor: not-allowed;
    transform: none;
}

.test-sais-pas {
    width: 100%;
    padding: 12px 18px;
    border: 2px solid var(--bord);
    border-radius: 14px;
    background: #fff;
    color: var(--texte-doux);
    font-family: var(--police-texte);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
}

.test-sais-pas:hover {
    border-color: var(--bleu);
    color: var(--bleu-fonce);
}

/* ---------- L'écran de fin ---------- */

.test-carte--fin {
    justify-content: center;
    text-align: center;
    gap: clamp(14px, 2.4vh, 24px);
}

.test-carte--fin .test-logo {
    margin: 0 auto;
    height: clamp(52px, 8vh, 76px);
}

.test-fin-titre {
    font-family: var(--police-titre);
    font-size: clamp(1.5rem, min(3.4vw, 4.6vh), 2.1rem);
    color: var(--encre);
    margin: 0;
    font-weight: 800;
}

.test-fin-texte {
    margin: 0;
    color: var(--texte);
    font-size: clamp(.95rem, min(1.4vw, 2.1vh), 1.05rem);
    line-height: 1.5;
}

.test-fin-niveau {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: clamp(14px, 2.2vh, 22px) clamp(14px, 2vw, 22px);
    border-radius: 18px;
    background: linear-gradient(150deg, #f4fbf1, #eff8ff);
    border: 2px solid #dcefe2;
    text-align: left;
}

.test-fin-etiquette {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--texte-doux);
}

.test-fin-niveau strong {
    font-family: var(--police-titre);
    font-size: clamp(1.15rem, min(2.2vw, 3vh), 1.5rem);
    color: var(--vert-fonce);
}

.test-fin-detail {
    font-size: clamp(.88rem, min(1.3vw, 2vh), .98rem);
    color: var(--texte);
    line-height: 1.5;
}

.test-fin-suite {
    margin: 0;
    font-size: clamp(.85rem, min(1.2vw, 1.9vh), .95rem);
    color: var(--texte-doux);
    line-height: 1.5;
}

.test-fin-retour {
    align-self: center;
    margin-top: 4px;
    color: var(--bleu-fonce);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 620px) {
    .test-paire {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
}

/* ---------- Les objectifs sur l'espace de l'élève ---------- */

.espace-objectifs {
    margin-top: 22px;
    background: #fbfdff;
    border: 2px solid var(--bord-doux);
    border-radius: 16px;
    padding: 16px 18px;
}

.espace-objectifs h3 {
    font-family: var(--police-titre);
    font-size: 1.02rem;
    color: var(--encre);
    margin: 0 0 10px;
    font-weight: 800;
}

.espace-objectifs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.espace-objectifs li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: .95rem;
    color: var(--encre);
    line-height: 1.4;
}

.espace-objectifs li small {
    display: block;
    color: var(--texte-doux);
    font-size: .78rem;
    margin-top: 2px;
}

.espace-obj-puce {
    color: var(--bleu);
    font-weight: 800;
    line-height: 1.4;
}

.espace-objectifs li.est-fait .espace-obj-puce {
    color: var(--vert);
}

.espace-obj-form {
    margin-top: 14px;
}

.espace-bouton--petit {
    padding: 12px 16px 13px;
    font-size: .96rem;
}

/* ============================================================
   UNE COULEUR PAR PAIRE (page du test)
   Mêmes teintes que pages.css, mais la page du test ne charge pas cette
   feuille : sans ce bloc, les paires restaient toutes du même gris.
   ============================================================ */


/* Les objectifs, groupés par chapitre, dans des boîtes dépliables. */
.espace-obj-groupe {
    border: 2px solid var(--bord);
    border-radius: 14px;
    margin-bottom: .6rem;
    background: #fff;
    overflow: hidden;
}
.espace-obj-groupe > summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--encre);
    padding: .7rem .9rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}
.espace-obj-groupe > summary::-webkit-details-marker { display: none; }
.espace-obj-groupe > summary::after { content: '\25BE'; color: var(--texte-doux); }
.espace-obj-groupe[open] > summary::after { content: '\25B4'; }
.espace-obj-groupe > summary small { color: var(--texte-doux); font-weight: 700; }
.espace-obj-groupe ul { margin: 0; padding: 0 .9rem .8rem; list-style: none; }
.espace-obj-note {
    background: #f3faff;
    border-left: 4px solid var(--bleu);
    border-radius: 10px;
    padding: .7rem .9rem;
    font-size: .92rem;
    color: var(--texte-doux);
    margin: 0 0 .9rem;
}


/* La fin du test : le résultat, l'explication, puis UN bouton pour la suite. */
.test-fin-apres {
    /* Même largeur que la boîte du niveau et que le bouton : la carte est
       une colonne, ce bloc doit la remplir, pas flotter au deux tiers. */
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background: #f7fbff;
    border: 2px solid var(--bord);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin: 1rem 0 1.2rem;
}
.test-fin-apres h2 {
    font-family: var(--police-titre);
    font-size: 1rem;
    margin: 0 0 .45rem;
    color: var(--encre);
}
.test-fin-apres p {
    margin: 0 0 .5rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--texte-doux);
}
.test-fin-apres p:last-child { margin-bottom: 0; }
.test-fin-attente { font-weight: 800; color: var(--encre) !important; }
.test-fin-bouton {
    display: inline-block;
    background: var(--vert);
    color: #fff !important;
    font-weight: 800;
    font-size: 1.02rem;
    padding: .9rem 1.7rem;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 4px 0 var(--vert-ombre);
}
.test-fin-bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--vert-ombre); }

/* L'encart « test terminé » de l'espace élève. */
.espace-fait {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    background: #eefbf0;
    border: 2px solid #b7e4bf;
    border-radius: 14px;
    padding: .85rem 1rem;
}
.espace-fait i { color: #2f9e44; font-size: 1.2rem; line-height: 1.2; }
.espace-fait strong { display: block; color: var(--encre); }
.espace-fait span { color: var(--texte-doux); font-size: .9rem; }


/* L'état « terminé » écrit DANS l'étape, au lieu d'un encart collé en dessous. */
.espace-etape-etat {
    display: inline-block;
    margin-top: .4rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    color: #2f9e44;
    background: #eefbf0;
}


/* Un texte qui ne s'adresse qu'au PC, un autre qu'au téléphone. */
.pc-seul { display: inline; }
.tel-seul { display: none; }
@media (max-width: 767.98px) {
    .pc-seul { display: none; }
    .tel-seul { display: inline; }
}

/* La ligne d'état de l'étape 1 : un accent vert, pas une pastille. */
.espace-etapes small.espace-etape-etat {
    color: #2f9e44;
    font-weight: 800;
    background: none;
    padding: 0;
    margin: 0;
}


/* ============================================================
   LA LISTE DES OBJECTIFS — lisible, jamais repliée
   ============================================================ */
.obj-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .8rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--bord);
}
.obj-entete h3 {
    margin: 0;
    font-family: var(--police-titre);
    font-size: 1.02rem;
    color: var(--encre);
}
.obj-compte {
    flex: none;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--bleu);
    background: #eaf6ff;
    border-radius: 999px;
    padding: .18rem .55rem;
    white-space: nowrap;
}

.obj-bloc + .obj-bloc { margin-top: 1rem; }
.obj-bloc-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 .45rem;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--texte-doux);
}
.obj-bloc-nb {
    flex: none;
    min-width: 18px;
    text-align: center;
    background: #eef1f5;
    border-radius: 999px;
    padding: .05rem .35rem;
    color: var(--texte-doux);
}

.obj-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .3rem;
}
.obj-ligne {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: .55rem;
    align-items: start;
    padding: .45rem .5rem;
    border-radius: 11px;
    background: #f8fafc;
    font-size: .92rem;
    line-height: 1.35;
    color: var(--encre);
}
.obj-ligne:nth-child(even) { background: #fff; }
.obj-puce {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eaf6ff;
    color: var(--bleu);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1;
}
.obj-ligne.est-fait .obj-puce { background: #eefbf0; color: #2f9e44; }
.obj-ligne.est-fait .obj-texte { color: var(--texte-doux); text-decoration: line-through; }
.obj-texte { padding-top: .1rem; }


/* Le message d'attente : une vraie phrase d'information, posée au-dessus
   de la liste, jamais collée à elle. */
.obj-message {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    background: #eef6ff;
    border: 1px solid #d8e8fb;
    border-radius: 12px;
    padding: .7rem .85rem;
    margin: 0 0 1rem;
    font-size: .88rem;
    line-height: 1.45;
    color: #2b4a6b;
}
.obj-message i { color: var(--bleu); font-size: 1rem; line-height: 1.3; flex: none; }

/* La seconde langue, sous l'objectif : plus petite, en italique, discrète. */
.obj-fr {
    display: block;
    margin-top: .18rem;
    font-size: .8rem;
    font-style: italic;
    color: var(--texte-doux);
}


/* ============================================================
   L'APPEL A VALIDER — en HAUT du panneau, et collé au défilement
   En bas d'une liste de onze lignes, il finissait coupé par le bord.
   ============================================================ */
.obj-action {
    position: sticky;      /* reste visible même quand la liste défile */
    top: 0;
    z-index: 2;
    background: #eefbf0;
    border: 2px solid #bfe6c8;
    border-radius: 14px;
    padding: .8rem .9rem .85rem;
    margin: 0 0 1rem;
    animation: obj-apparait .45s ease both;
}
@keyframes obj-apparait {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.obj-action-texte {
    display: flex;
    gap: .45rem;
    align-items: flex-start;
    margin: 0 0 .65rem;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1d5c33;
}
.obj-action-texte i { font-size: 1.05rem; flex: none; }
.obj-action-form { margin: 0; }
.obj-valider {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    background: var(--vert);
    color: #fff;
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 0 var(--vert-ombre);
    transition: filter .15s;
}
.obj-valider:hover { filter: brightness(1.04); }
.obj-valider:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--vert-ombre); }
.obj-action-note { margin: .55rem 0 0; font-size: .78rem; color: #3f6b4c; }


/* Le bouton de validation, DANS l'étape « Vos objectifs » : là où l'élève
   regarde déjà, et jamais coupé par le défilement du panneau. */
.etape-valider-form { margin: .6rem 0 .1rem; }
.etape-valider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    background: var(--vert);
    color: #fff;
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: .95rem;
    padding: .7rem 1.35rem;
    border-radius: 12px;
    box-shadow: 0 4px 0 var(--vert-ombre);
    animation: obj-apparait .45s ease both;
}
.etape-valider:hover { filter: brightness(1.04); }
.etape-valider:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--vert-ombre); }