/* ============================================================
   FEUILLE DES PAGES — Apprenons Juntos !
   Créée le 18/10/2026 pour sortir les 1 721 lignes de CSS qui
   vivaient dans des blocs <style> au milieu des pages.

   Chargée APRÈS theme.css et design.css : la dernière règle gagne.
   Une section par page, dans l'ordre des fichiers.

   LES TROIS RÈGLES DE CETTE FEUILLE
     1. Ici, uniquement ce qui ne sert QU'À une page ;
     2. un composant partagé (bouton, carte, pilule, jauge, tableau)
        appartient à design.css — s'il est dupliqué ici, c'est un
        défaut à corriger, pas une habitude ;
     3. aucune couleur en dur : on prend les variables de theme.css
        (--texte-doux pour LE gris, --vert, --bleu, --bord, --fond…).
   ============================================================ */

/* ============================================================
   APERÇU — « voir le site comme l'élève »
   Extrait du bloc <style> de apercu_site.php le 18/10/2026.
   ============================================================ */    /* Repli local du système « a- » (l'écran vit hors du dossier /admin/,
       où admin.css n'est pas chargé). Mêmes jetons que la spécification. */
    .page-apercu-site .a-carte { background:#fff; border:1px solid #e6eaf0; border-radius:16px; max-width:820px;
               margin:24px auto; overflow:hidden; box-shadow:0 4px 14px rgba(43,58,82,.07); }
    .page-apercu-site .a-carte-tete { padding:18px; border-bottom:1px solid #e6eaf0; }
    .page-apercu-site .a-carte-tete h1 { margin:0; font-size:1.35rem; font-weight:800; color:#2b3a52; }
    .page-apercu-site .a-carte-corps { padding:18px; color:#4c5a70; }
    .page-apercu-site .a-tableau { width:100%; border-collapse:collapse; font-size:.95rem; }
    .page-apercu-site .a-tableau th { background:#22304a; color:#e8eef7; text-align:left; padding:10px 12px; font-weight:600; }
    .page-apercu-site .a-tableau td { padding:10px 12px; border-top:1px solid #e6eaf0; vertical-align:middle; }
    .page-apercu-site .a-tableau tr:hover td { background:#f7f9fc; }
    .page-apercu-site .a-bouton { display:inline-block; padding:8px 15px; border:0; border-radius:12px; font-weight:700;
                text-decoration:none; color:#fff; background:#58cc02; box-shadow:0 4px 0 rgba(0,0,0,.12); }
    .page-apercu-site .a-alerte { padding:12px 14px; border-radius:12px; margin:0 0 14px; font-weight:600; }
    .page-apercu-site .a-alerte.attention { background:rgba(255,215,0,.14); color:#b58900; border:1px solid rgba(255,215,0,.45); border-left:4px solid #ffd700; }
    .page-apercu-site .a-vide { padding:22px; text-align:center; color:#9db4d0; background:#f7f9fc; border-radius:12px; }
    .page-apercu-site .apercu-pastille { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:8px;
                  vertical-align:-1px; background:#3A86FF; }

/* ============================================================
   EXERCICE — le moteur de questions
   Extrait du bloc <style> de exercice_vue.php le 18/10/2026.
   ============================================================ *//* Palette locale retirée : elle est dans theme.css. */
/* Le fond de page est celui de theme.css (--fond). */
    .page-exercice-vue .exercise-container { max-width: 650px; margin: auto; padding-top: 1rem; padding-left: 1rem; padding-right: 1rem; padding-bottom: 220px; /* Espace vital pour le footer */ }
    .page-exercice-vue .exercise-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
    .page-exercice-vue .progress-bar-duo { flex-grow: 1; height: 16px; background-color: var(--duo-grey); border-radius: 8px; overflow: hidden; }
    .page-exercice-vue .progress-bar-duo-fill { width: 0%; height: 100%; background-color: var(--duo-green); transition: width 0.3s ease; }
    .page-exercice-vue .lives-counter { display: flex; align-items: center; font-size: 1.2rem; font-weight: bold; color: var(--duo-red); font-family: 'Poppins', sans-serif; }
    .page-exercice-vue .lives-counter .heart-icon { font-size: 1.8rem; margin-right: 0.25rem; }
    .page-exercice-vue .lives-counter.shake { animation: shake 0.5s; }
    @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
    
    .page-exercice-vue #question-area { perspective: 1000px; min-height: 450px; position: relative; }
    .page-exercice-vue .card-base { position: absolute; width: 100%; min-height: 400px; background-color: white; border-radius: 1rem; padding: 1.5rem; transition: transform 0.6s; transform-style: preserve-3d; backface-visibility: hidden; }
    .page-exercice-vue .card-base.is-flipping { transform: rotateY(180deg); }
    /* LE RETOURNEMENT SE FAIT EN DEUX TEMPS, ET LA CARTE RESTE VISIBLE.
       Avant : la carte tournait de 180° d'un seul geste, mais elle est à
       FACE UNIQUE et `backface-visibility: hidden`. Passé 90° elle
       disparaissait, et la question suivante surgissait d'un coup : on
       croyait l'animation interrompue. Maintenant la carte tourne jusqu'à
       90° (on la voit jusqu'au bout), le contenu suivant est monté, puis
       elle revient de -90° à 0 : un seul geste pour l'œil, jamais de vide. */
    @keyframes carte-part { from { transform: rotateY(0deg); } to { transform: rotateY(90deg); } }
    @keyframes carte-vient { from { transform: rotateY(-90deg); } to { transform: rotateY(0deg); } }
    .page-exercice-vue .card-base.est-partante { animation: carte-part .26s ease-in both; }
    .page-exercice-vue .card-base.est-arrivante { animation: carte-vient .26s ease-out both; }
    @media (prefers-reduced-motion: reduce) {
        .page-exercice-vue .card-base.est-partante,
        .page-exercice-vue .card-base.est-arrivante { animation-duration: .01s; }
    }
    
    .page-exercice-vue .question-title { font-size: 1.5rem; font-weight: 700; color: var(--duo-text); }
    .page-exercice-vue .response-options, .page-exercice-vue .association-container { margin-top: 1rem; }
    .page-exercice-vue .response-option, .page-exercice-vue .association-word, .page-exercice-vue .word-token { display: inline-block; width: auto; text-align: center; background-color: #fff; border: 2px solid var(--duo-grey); border-bottom-width: 4px; border-radius: 0.75rem; padding: 0.75rem 1.25rem; margin: 0.25rem; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; user-select: none; }
    .page-exercice-vue .response-option.full-width { display: block; width: 100%; }
    .page-exercice-vue .response-option:hover:not(.disabled), .page-exercice-vue .association-word:hover:not(.disabled), .page-exercice-vue .word-token:hover:not(.placed) { background-color: #f7f7f7; transform: translateY(-2px); }
    /* La SÉLECTION ne doit être aucune des quatre couleurs de paire — le bleu
       est déjà la paire n°2, et une carte sélectionnée ressemblait à une
       carte déjà associée (décision du 30/10, appliquée d'abord au test de
       niveau ; le moteur commun l'applique maintenant partout). */
    .page-exercice-vue .response-option.selected, .page-exercice-vue .association-word.selected { border-color: var(--encre) !important; background-color: #eef1f5 !important; box-shadow: 0 0 0 3px rgba(43, 58, 82, .18); }
    /* Le vert « correct » est le FALLBACK : une carte de paire porte une
       des quatre couleurs de paire (assets/css/moteur-exercice.css), et
       c'est elle qui doit gagner. Sans le `:not`, toutes les paires
       redevenaient vertes et l'on ne distinguait plus les paires. */
    .page-exercice-vue .response-option.correct:not([class*="paire-"]), .page-exercice-vue .association-word.correct:not([class*="paire-"]) { border-color: var(--duo-green-dark) !important; background-color: #d7ffb8 !important; color: var(--duo-green-dark) !important; cursor: default; }
    .page-exercice-vue .response-option.incorrect, .page-exercice-vue .association-word.incorrect { border-color: var(--duo-red-dark) !important; background-color: #ffdfe0 !important; color: var(--duo-red-dark) !important; animation: shake 0.5s; }
    .page-exercice-vue .response-option.disabled { cursor: default; }
    
    .page-exercice-vue .association-container, .page-exercice-vue .word-bank-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
    /* La banque se détache de la phrase par l'espace, pas par un trait :
       c'est le trait qui coupait la lecture en deux. */
    .page-exercice-vue .word-bank-container { margin-top: 2.2rem; }
    .page-exercice-vue .association-column { width: 48%; display: flex; flex-direction: column; gap: 0.5rem; }

    /* ================================================================
       REMISE EN ORDRE — « Remettez la phrase dans le bon ordre »

       AVANT : une zone de réponse vide soulignée de pointillés, un `<hr>`
       juste en dessous, puis les mots. Deux traits empilés pour une seule
       idée, et rien qui dise où l'on écrit ni ce qu'on choisit.
       Jérémy : « on voit une barre puis des pointillés, ce n'est pas très
       clair ».

       MAINTENANT : deux zones NOMMÉES, chacune dans son cadre.
         · « Votre phrase »  — la boîte où les mots se posent : pointillés
           et fond très clair tant qu'elle est vide (elle s'annonce comme
           une place à remplir), puis trait PLEIN et curseur qui bat dès
           le premier mot posé.
         · « Mots à placer » — le plateau des mots restants, sur fond doux.
       Le trait de séparation du `<hr>` est remplacé par l'étiquette de
       zone : un mot, puis un filet. Plus lisible, moins bruyant.
       ================================================================ */
    .page-exercice-vue .ordre-zone { display: flex; flex-direction: column; gap: 1.15rem; }

    /* L'étiquette de zone : un mot en petites capitales, puis un filet. */
    .page-exercice-vue .ordre-entete {
        display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem;
    }
    .page-exercice-vue .ordre-titre {
        font-size: .72rem; font-weight: 800; letter-spacing: .09em;
        text-transform: uppercase; color: var(--texte-doux); white-space: nowrap;
    }
    .page-exercice-vue .ordre-entete::after {
        content: ''; flex: 1 1 auto; height: 2px; border-radius: 2px;
        background: var(--bord);
    }
    /* L'aide n'apparaît QUE quand un mot est posé : elle explique un geste
       qui existe à ce moment-là, pas avant. */
    .page-exercice-vue .ordre-aide {
        display: none; font-size: .72rem; font-weight: 700;
        color: var(--duo-blue); white-space: nowrap;
    }
    .page-exercice-vue .ordre-zone:has(.sentence-area:not(.est-vide)) .ordre-aide { display: inline; }

    /* ---- LA ZONE DE RÉPONSE — un cadre, pas un trait ---- */
    .page-exercice-vue .sentence-area {
        display: flex; flex-wrap: wrap; align-items: center; align-content: center;
        gap: .45rem; min-height: 96px; padding: .85rem 1rem;
        background: #fff; border: 2px solid var(--bord); border-radius: 1rem;
        transition: border-color .18s, background-color .18s, box-shadow .18s;
    }
    .page-exercice-vue .sentence-area.est-vide {
        border-style: dashed; border-color: #cdd8e4; background: #f8fbfd;
    }
    .page-exercice-vue .ordre-vide {
        display: none; align-items: center; justify-content: center; gap: .5rem;
        width: 100%; color: var(--texte-doux);
        font-size: .95rem; font-weight: 600; text-align: center;
    }
    .page-exercice-vue .sentence-area.est-vide .ordre-vide { display: flex; }
    .page-exercice-vue .ordre-vide .bi { font-size: 1.05rem; opacity: .75; }

    /* PLEINE : trait plein, halo léger, et un curseur qui bat au bout —
       le signal « il reste de la place ici ». */
    .page-exercice-vue .sentence-area:not(.est-vide) {
        border-color: #cfe8f8;
        box-shadow: 0 6px 18px rgba(28, 176, 246, .07);
    }
    .page-exercice-vue .sentence-area:not(.est-vide):not(.est-juste):not(.est-faux)::after {
        content: ''; width: 2px; height: 1.6em; border-radius: 2px;
        background: var(--duo-blue); animation: ordre-curseur 1.05s steps(1) infinite;
    }
    @keyframes ordre-curseur { 50% { opacity: 0; } }

    /* La correction : la boîte entière dit juste ou faux. */
    .page-exercice-vue .sentence-area.est-juste {
        border-color: var(--duo-green-dark); background: #f3ffe6;
    }
    .page-exercice-vue .sentence-area.est-faux {
        border-color: var(--duo-red-dark); background: #fff5f5; animation: shake 0.5s;
    }
    /* Un mot posé garde l'allure d'un mot à prendre : c'est sa PLACE qui
       change, pas son état. Au survol, il s'éclaire en bleu — le geste
       « je le reprends » se devine. */
    .page-exercice-vue .sentence-area .word-token:hover:not(.disabled) {
        background: #f2faff; border-color: #bfe4f7;
    }
    /* Au clic, le mot s'enfonce (sa tranche 3D se réduit). */
    .page-exercice-vue .word-token:hover:active { transform: translateY(2px); border-bottom-width: 2px; }

    /* ---- LE PLATEAU DES MOTS À PLACER ---- */
    .page-exercice-vue .ordre-zone .word-bank-container {
        align-items: center; min-height: 64px; padding: .7rem .8rem; margin-top: 0;
        background: #f7fafc; border: 2px solid var(--bord-doux); border-radius: 1rem;
        transition: background-color .18s, border-color .18s;
    }
    /* Plateau vide (tous les mots sont posés) : il ne reste pas un trou
       blanc, il dit ce qui se passe. `:has()` évite d'ajouter un drapeau
       de plus dans le JavaScript. */
    .page-exercice-vue .ordre-banque-vide {
        display: none; width: 100%; text-align: center;
        color: var(--texte-doux); font-size: .85rem; font-weight: 600;
    }
    .page-exercice-vue .ordre-zone .word-bank-container:not(:has(.word-token)) .ordre-banque-vide {
        display: block;
    }

    /* ---- LA PHRASE À TROUS — UNE SEULE LIGNE DE LECTURE ---------------
       Le trou n'est plus un bloc posé entre deux morceaux de phrase : c'est
       une pastille grise À LA PLACE DU MOT, dans le fil du texte. La phrase
       se lit d'un bout à l'autre et se replie seule quand elle est longue.
       `line-height` réserve la hauteur de la pastille sur chaque ligne. */
    .page-exercice-vue .phrase-trous {
        font-size: 1.35rem;
        line-height: 2.3;
        text-align: center;
        color: var(--duo-text);
    }
    .page-exercice-vue .phrase-trous.multi-trous-texte { text-align: left; }

    /* LE TROU VIDE : un fond gris et un pointillé, pour qu'on voie OÙ le
       mot manque. `min-width` lui garde sa place une fois rempli. */
    .page-exercice-vue .blank-spot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        min-width: 110px;
        min-height: 2em;
        padding: 0 .45rem;
        margin: 0 .15rem;
        background: var(--duo-grey);
        border: 2px dashed var(--texte-doux);
        border-radius: .7rem;
        cursor: pointer;
        transition: background-color .15s, border-color .15s;
    }
    /* TROU REMPLI : il s'efface devant son mot — c'est le mot qui porte la
       pastille blanche bordée, comme dans la banque. */
    .page-exercice-vue .blank-spot:has(.word-token) {
        min-width: 0;
        padding: 0;
        margin: 0 .1rem;
        background: transparent;
        border-color: transparent;
    }
    .page-exercice-vue .blank-spot .word-token {
        margin: 0;
        padding: .3rem .85rem;
        font-size: 1.05rem;
        vertical-align: middle;
    }
    .page-exercice-vue .word-token.placed { cursor: default; background-color: var(--duo-grey); border-color: #ccc; color: #ccc; }

    /* LA BARRE DE VALIDATION PASSE DEVANT LE PIED DE PAGE.
       À 1000 comme lui, elle perdait : le pied arrive APRÈS elle dans le
       DOM, et à altitude égale c'est le dernier qui gagne. Mesuré : au
       bas de la page, le clic au centre du bouton « Vérifier » tombait
       sur `.pied-bas` — le copyright recouvrait le bouton. 1050 la place
       au-dessus du pied et de `.barre-fin` (1000) comme du calque
       d'annotations (900), et sous l'en-tête (1071). */
    .page-exercice-vue .exercise-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; }

    /* La barre est FIXE : elle mange les 130 à 155 derniers pixels de la
       page (davantage quand un retour s'affiche). On rend cette place au
       pied de page, sinon sa dernière ligne reste cachée derrière elle. */
    .page-exercice-vue .pied-de-page { padding-bottom: calc(1.4rem + 170px); }
    .page-exercice-vue .feedback-section { padding: 1.5rem; transition: all 0.3s ease; visibility: hidden; opacity: 0; }
    .page-exercice-vue .feedback-section.visible { visibility: visible; opacity: 1; }
    .page-exercice-vue .feedback-correct { background-color: #d7ffb8; color: var(--duo-green-dark); }
    .page-exercice-vue .feedback-incorrect { background-color: #ffdfe0; color: var(--duo-red-dark); }

    /* ---- LE RÉCAPITULATIF DES ERREURS, À LA FIN --------------------
       Décision du professeur : on n'interrompt pas l'élève à chaque faute.
       On lui rend, au bout, la liste de ce qu'il doit revoir — sa réponse
       en rouge, la bonne en vert, côte à côte pour comparer. */
    .page-exercice-vue .recap-titre { margin: 1.6rem 0 .9rem; font-size: 1.1rem; color: var(--duo-text); }
    .page-exercice-vue .recap-titre i { color: #ff9600; }
    .page-exercice-vue .recap-erreurs { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
    .page-exercice-vue .recap-item {
        padding: .8rem 1rem;
        border: 1px solid var(--duo-grey);
        border-left: 4px solid var(--duo-red);
        border-radius: 1rem;
        background: #fff;
    }
    .page-exercice-vue .recap-question { display: block; margin-bottom: .35rem; font-weight: 700; color: var(--duo-text); }
    .page-exercice-vue .recap-reponses { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .92rem; }
    .page-exercice-vue .recap-faux { color: var(--duo-red-dark); }
    .page-exercice-vue .recap-juste { color: var(--duo-green-dark); }
    .page-exercice-vue .recap-sans-erreur {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        margin-top: 1.4rem;
        padding: 1rem;
        border-radius: 1rem;
        font-weight: 700;
        color: var(--duo-green-dark);
        background: #d7ffb8;
    }
    .page-exercice-vue .recap-sans-erreur i { font-size: 1.3rem; }

    /* ---- LE VERDICT D'UNE EVALUATION DE CHAPITRE -------------------
       Le seuil de 70 % vient du professeur. L'eleve doit savoir sans
       ambiguite s'il a valide, parce que c'est ce verdict qui ouvre la
       suite — et c'est le professeur qui l'ouvrira. */
    .page-exercice-vue .eval-verdict {
        max-width: 640px;
        margin: 1.4rem auto 0;
        padding: 1rem 1.2rem;
        border-radius: 1rem;
        text-align: center;
    }
    .page-exercice-vue .eval-verdict.est-validee { color: var(--duo-green-dark); background: #d7ffb8; }
    .page-exercice-vue .eval-verdict.est-a-refaire { color: #a76a00; background: #fff4d6; }
    .page-exercice-vue .eval-verdict-tete {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        font-size: 1.15rem;
        font-weight: 800;
    }
    .page-exercice-vue .eval-verdict-tete i { font-size: 1.5rem; }
    .page-exercice-vue .eval-verdict-seuil { margin: .5rem 0 0; font-size: .92rem; }

    /* ---- LE TEXTE A TROUS ECRIT ------------------------------------
       L'eleve TAPE le mot. Le champ doit se lire comme un trou dans la
       phrase, pas comme un formulaire : souligne, centre, et de la place
       pour le mot le plus long. */
    .page-exercice-vue .ecrit-texte { line-height: 2.4; }
    .page-exercice-vue .champ-trou {
        display: inline-block;
        width: 8.5rem;
        margin: 0 .15rem;
        padding: .3rem .4rem;
        border: 2px dashed var(--texte-doux);
        border-radius: .7rem;
        background-color: var(--duo-grey);
        font: inherit;
        font-weight: 700;
        /* Sans cela, le champ hérite du `line-height` de la phrase (2,4) et
           devient deux fois plus haut que le texte qu'il remplace. */
        line-height: 1.4;
        color: var(--duo-text);
        text-align: center;
    }
    /* Le champ prend le focus : la pastille s'éclaire et le bord devient
       franc, comme un trou qui s'ouvre. */
    .page-exercice-vue .champ-trou:focus {
        outline: none;
        border-color: var(--duo-blue);
        border-style: solid;
        background-color: #fff;
    }
    .page-exercice-vue .champ-trou.correct { border-color: var(--duo-green-dark) !important; background-color: #d7ffb8 !important; color: var(--duo-green-dark) !important; }
    .page-exercice-vue .champ-trou.incorrect { border-color: var(--duo-red-dark) !important; background-color: #ffdfe0 !important; color: var(--duo-red-dark) !important; animation: shake 0.5s; }
    .page-exercice-vue .ecrit-aide { margin: 1rem 0 0; font-size: .85rem; color: #8a95a5; }
    @media (max-width: 767px) { .page-exercice-vue .champ-trou { width: 6.5rem; } }
    .page-exercice-vue .feedback-content { display: flex; justify-content: space-between; align-items: center; max-width: 900px; margin: auto; }
    .page-exercice-vue .feedback-content h4 { margin: 0; font-weight: 700; }
    .page-exercice-vue .action-section { padding: 1rem; background-color: white; border-top: 2px solid var(--duo-grey); }
    .page-exercice-vue .action-section .container { max-width: 900px; display: flex; justify-content: flex-end; }
    .page-exercice-vue .result-screen { text-align: left; padding: 2rem 1rem; }
    .page-exercice-vue .result-screen-header { text-align: center; }
    .page-exercice-vue .result-icon { font-size: 5rem; }
    .page-exercice-vue .result-summary { list-style-type: none; padding-left: 0; }
    .page-exercice-vue .result-summary li { background-color: #fff; border: 1px solid var(--duo-grey); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; }
    .page-exercice-vue .result-summary .answer { display: flex; align-items: center; }
    .page-exercice-vue .result-summary .answer i { font-size: 1.2rem; margin-right: 0.75rem; }

    /* --- TEXTE À TROUS MULTIPLE : UN texte, PLUSIEURS trous, une banque ---
       Les trous multiples prennent EXACTEMENT le style du trou unique
       (.blank-spot ci-dessus) : une seule pastille grise dans le texte. */
    .page-exercice-vue .word-token.selected { border-color: var(--duo-blue); background-color: #e8f7ff; }
    .page-exercice-vue .word-token.correct { border-color: var(--duo-green-dark) !important; background-color: #d7ffb8 !important; color: var(--duo-green-dark) !important; cursor: default; }
    .page-exercice-vue .word-token.incorrect { border-color: var(--duo-red-dark) !important; background-color: #ffdfe0 !important; color: var(--duo-red-dark) !important; animation: shake 0.5s; }

    /* ---- LE GLISSER-DÉPOSER ----------------------------------------
       On peut POSER un mot dans un trou, comme sur Duolingo. La main
       indique qu'on peut l'attraper, le mot traîné s'estompe, et une
       zone d'accueil se creuse en bleu pour montrer où il va tomber. */
    .page-exercice-vue .word-token[draggable="true"] { cursor: grab; }
    .page-exercice-vue .word-token.en-deplacement { opacity: .45; cursor: grabbing; }
    .page-exercice-vue .blank-spot.survol {
        border-color: var(--duo-blue);
        border-style: solid;
        background-color: #e8f7ff;
    }
    .page-exercice-vue .sentence-area.survol, .page-exercice-vue .word-bank-container.survol {
        border-radius: .75rem;
        background-color: #f2faff;
        box-shadow: inset 0 0 0 2px var(--duo-blue);
    }

    /* NOUVEAU : Media Queries pour le responsive mobile */
    @media (max-width: 767px) {
        .page-exercice-vue .question-title { font-size: 1.2rem; }
        .page-exercice-vue .response-option, .page-exercice-vue .association-word, .page-exercice-vue .word-token { font-size: 0.95rem; padding: 0.5rem 0.8rem; }
        /* Remise en ordre : les deux zones restent lisibles au pouce. */
        .page-exercice-vue .sentence-area { min-height: 84px; padding: .7rem .75rem; border-radius: .85rem; }
        .page-exercice-vue .ordre-titre, .page-exercice-vue .ordre-aide { font-size: .66rem; }
        .page-exercice-vue .ordre-aide { display: none !important; }  /* le geste se devine sur mobile */
        .page-exercice-vue .ordre-vide { font-size: .85rem; }
        .page-exercice-vue .ordre-zone .word-bank-container { min-height: 56px; padding: .55rem .6rem; border-radius: .85rem; }
        .page-exercice-vue .ordre-zone { gap: .9rem; }
        /* La phrase garde sa lecture d'un seul fil, en plus petit. */
        .page-exercice-vue .phrase-trous { font-size: 1.05rem; line-height: 2.1; }
        .page-exercice-vue .blank-spot { min-width: 76px; }
        .page-exercice-vue .blank-spot .word-token { font-size: 0.9rem; padding: .25rem .6rem; }
        .page-exercice-vue .card-base { padding: 1rem; min-height: 350px; }
        .page-exercice-vue .association-container { flex-direction: row; } /* Force les 2 colonnes */
    }

/* ============================================================
   S'ENTRAÎNER — la liste des exercices
   Extrait du bloc <style> de exercices.php le 18/10/2026.
   ============================================================ */    .page-exercices .category-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .page-exercices .category-card:hover { transform: translateY(-10px); box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; }
    .page-exercices .category-icon { font-size: 3.5rem; color: var(--bs-primary); }

    
/* ============================================================
   S'ENTRAÎNER — les exercices d'une catégorie
   Extrait du bloc <style> de exercices_liste.php le 18/10/2026.
   ============================================================ */    /* Les puces de difficulté, le badge d'XP et la mise en page des
       lignes sont COMMUNS aux deux pages « S'entraîner » : une seule
       définition, dans la section « COMPOSANT COMMUN » plus bas. */
    
    /* Style pour l'accordéon */
    .page-exercices-liste .accordion-button {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 1.2rem;
    }
    .page-exercices-liste .accordion-button:not(.collapsed) {
        color: var(--primary-color);
        background-color: #e9f5ff;
    }


/* ============================================================
   FLASHCARDS — la révision SRS
   Extrait du bloc <style> de flashcards.php le 18/10/2026.
   ============================================================ *//* Palette locale retirée : elle est dans theme.css. */
    /* --- STRUCTURE RESPONSIVE SANS SCROLL --- */
    /* Page SANS DÉFILEMENT : la classe est posée sur <body> par le gabarit
       (includes/layout.php, $GLOBALS['classe_page']). Écrire « html, body
       { overflow:hidden } » ici aurait bloqué le défilement de TOUT le
       site — c'est exactement la fuite que cette refonte supprime.

       LA HAUTEUR SE PREND, ELLE NE SE DEVINE PAS.
       Avant : `main { height: calc(100vh - 80px) }`. L'en-tête mesure en
       réalité 78 px + ses marges, donc `main` finissait 27 px SOUS l'écran
       et le bouton du bas était coupé. On fait de la page une colonne
       flex : l'en-tête garde sa hauteur, `main` prend le RESTE. */
    .page-flashcards { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
    .page-flashcards .app-header { flex: 0 0 auto; }
    /* Une activité plein écran : pas de pied de page (il poussait `main`
       hors de l'écran). Le bouton de sortie est en haut de la carte. */
    .page-flashcards .pied-de-page { display: none; }
    .page-flashcards main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .page-flashcards .container.py-4 { display: flex; flex-direction: column; height: 100%; min-height: 0; padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .page-flashcards .review-wrapper { max-width: clamp(560px, 62vw, 860px); width: 100%; margin: 0 auto; display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }

    .page-flashcards .progress-container { margin-bottom: 1rem; flex-shrink: 0; position: relative; }
    .page-flashcards .progress-bar-container { width: 100%; height: 20px; background-color: var(--duo-grey); border-radius: 10px; overflow: hidden; }
    .page-flashcards .progress-bar-fill { width: 0%; height: 100%; background: linear-gradient(to right, var(--duo-green), #8aff2e); border-radius: 10px; transition: width 0.5s ease-out; }
    .page-flashcards .progress-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; font-weight: 700; color: var(--duo-text); text-shadow: 0 0 2px white; }

    /* --- NOUVELLE LOGIQUE DE CARTE QUI TOURNE (FLIP) --- */
    .page-flashcards .flashcard-viewport {
        flex-grow: 1;
        position: relative;
        display: flex; align-items: center; justify-content: center;
        min-height: 160px;
        perspective: 1500px; /* Active la perspective 3D */
    }
    .page-flashcards .flashcard {
        width: 100%; height: 100%;
        position: relative;
        transition: transform .5s cubic-bezier(.2, .8, .2, 1);
        transform-style: preserve-3d;
        cursor: pointer;
        will-change: transform;
    }
    .page-flashcards .flashcard.is-flipped {
        transform: rotateY(180deg);
    }

    .page-flashcards .flashcard-face {
        position: absolute;
        width: 100%; height: 100%;
        -webkit-backface-visibility: hidden; /* Pour Safari */
        backface-visibility: hidden;
        display: flex; flex-direction: column;
        background-color: white; border-radius: 1.5rem;
        border: 2px solid var(--duo-grey); border-bottom-width: 8px;
        box-shadow: 0 22px 50px -30px rgba(43, 58, 82, .55);
        padding: 1.5rem;
    }
    /* ---- LES ANIMATIONS DE PASSAGE D'UNE CARTE À L'AUTRE -------------
       Elles vivent sur le CONTENEUR, pas sur la carte : la carte porte son
       retournement (rotateY), et un `transform` posé sur elle l'écraserait
       — c'était le défaut de l'ancien `style.transform = 'scale(0.8)'`.
       Une seule propriété animée à la fois : l'enchaînement reste fluide. */
    @keyframes carte-entree { from { opacity: 0; transform: scale(.96) translateY(12px); } }
    @keyframes carte-sortie { to { opacity: 0; transform: scale(.9); } }
    .page-flashcards .flashcard-viewport.est-entree { animation: carte-entree .32s cubic-bezier(.2, .8, .2, 1) both; }
    .page-flashcards .flashcard-viewport.est-sortie { animation: carte-sortie .22s ease-in both; }
    .page-flashcards .flashcard-verso {
        transform: rotateY(180deg);
        background-color: #f8f9fa; /* Fond légèrement plus foncé */
    }

    .page-flashcards .face-content {
        width: 100%; height: 100%;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        text-align: center;
        position: relative;
    }
    .page-flashcards .card-audio-btn {
        position: absolute;
        top: -10px; right: -5px;
        background: none; border: none; color: var(--duo-blue);
        font-size: clamp(2rem, 6vw, 2.8rem);
        cursor: pointer; transition: transform 0.2s; z-index: 5;
    }
    .page-flashcards .card-audio-btn:hover { transform: scale(1.1); }
    
    .page-flashcards .card-text {
        font-weight: 700; color: var(--duo-text); line-height: 1.3;
        width: 100%;
        word-wrap: break-word;
    }
    .page-flashcards .card-explanation { font-size: 1rem; color: #6c757d; margin-top: 0.75rem; }

    .page-flashcards .xp-toast { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, #ffdf40, #ffb800); color: white; padding: 0.5rem 1.25rem; border-radius: 2rem; font-size: 1.75rem; font-family: 'Poppins', sans-serif; font-weight: 800; text-shadow: 0 2px 4px rgba(0,0,0,0.2); box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 3px solid white; animation: float-up-and-fade 1.5s ease-out forwards; z-index: 20; }
    /* L'XP n'existe plus : le toast confirme simplement « carte révisée ». */
    .page-flashcards .revision-toast { background: linear-gradient(180deg, #58CC02, #46A302); font-size: 1.15rem; padding: 0.6rem 1.3rem; }
    @keyframes float-up-and-fade { 0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.8); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-150px) scale(1.2); } }

    .page-flashcards .controls-container { flex-shrink: 0; display: grid; grid-template-areas: "cmd"; align-items: end; padding-top: 1.2rem; }
    /* LA CARTE NE CHANGE JAMAIS DE TAILLE.
       Les deux blocs de commandes occupent LA MÊME CELLULE de grille : la
       zone réserve donc, dès la première carte, la hauteur du plus grand
       (les trois choix). Le bloc masqué GARDE sa place (`visibility`) — avec
       `display:none` la carte grandissait, puis rétrécissait au retournement. */
    .page-flashcards .bloc-commandes { grid-area: cmd; transition: opacity .2s ease, transform .2s ease; }
    .page-flashcards .bloc-commandes.est-cache { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); }
    .page-flashcards .controls-container .btn { width: 100%; padding: .85rem 1rem; font-size: 1.2rem; }
    /* Sur ordinateur, les trois choix tiennent sur UNE ligne : la zone de
       commandes reste basse, donc la carte reste grande. */
    @media (min-width: 768px) {
        .page-flashcards #evaluation-controls .d-grid { display: flex !important; gap: .6rem; }
        .page-flashcards #evaluation-controls .d-grid .btn { flex: 1 1 0; min-width: 0; }
    }
    /* La traduction portugaise sous le libellé français, plus petite :
       l'élève lit l'action en français, et comprend en portugais. */
    .page-flashcards .btn-libelle { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
    .page-flashcards .btn-trad { font-size: .62em; font-weight: 600; opacity: .92; margin-top: .1rem; }
    .page-flashcards .session-message { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

    /* ÉCRAN BAS (portable 13 pouces, téléphone couché) : on resserre les
       boutons pour que la carte ET les trois choix tiennent sans être
       coupés. La carte a déjà son minimum à 160 px. */
    @media (max-height: 720px) {
        .page-flashcards .progress-container { margin-bottom: .6rem; }
        .page-flashcards .controls-container { padding-top: .7rem; }
        .page-flashcards .controls-container .btn { padding: .5rem .9rem; font-size: 1.02rem; }
        .page-flashcards .btn-trad { font-size: .58em; }
        .page-flashcards #evaluation-controls p { font-size: .85rem; margin-bottom: .35rem !important; }
    }

/* ============================================================
   ACCUEIL — tableau de bord de l'élève
   Extrait du bloc <style> de index.php le 18/10/2026.
   ============================================================ */    /* Styles spécifiques pour le leaderboard */
    .page-index .podium { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; height: 250px; }
    .page-index .podium-stand { width: 30%; text-align: center; border-radius: 10px 10px 0 0; padding: 1rem; color: white; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: all 0.3s ease; }
    .page-index .podium-stand .name { font-weight: bold; font-size: 1.1rem; word-break: break-word; }
    .page-index .podium-stand .score { font-size: 1.3rem; font-weight: 800; }
    .page-index .podium-stand.gold { background: linear-gradient(145deg, #ffd700, #f0c400); height: 100%; border: 2px solid #c9a300; }
    .page-index .podium-stand.silver { background: linear-gradient(145deg, #c0c0c0, #a9a9a9); height: 85%; border: 2px solid #8e8e8e; }
    .page-index .podium-stand.bronze { background: linear-gradient(145deg, #cd7f32, #b8732d); height: 70%; border: 2px solid #8c5a20; }
    
    .page-index .podium-avatar-wrapper { width: 70px; height: 70px; border-radius: 50%; border-style: solid; border-width: 4px; padding: 3px; margin: 0 auto 0.5rem; background-color: #fff; }
    .page-index .podium-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

    .page-index #full-leaderboard li { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-radius: 0.5rem; transition: background-color 0.2s; }
    .page-index #full-leaderboard li:nth-child(odd) { background-color: #f8f9fa; }
    .page-index #full-leaderboard li:hover { background-color: #e9ecef; }
    .page-index #full-leaderboard .rank { font-weight: bold; font-size: 1.1rem; width: 40px; }
    
    .page-index .list-avatar-wrapper { width: 40px; height: 40px; border-radius: 50%; border-style: solid; border-width: 2px; padding: 2px; margin-right: 1rem; flex-shrink: 0; }
    .page-index .list-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    
        /* L'avatar est un composant partagé : voir design.css. */

    /* Responsive pour le leaderboard */
    @media (max-width: 767.98px) {
        .page-index .podium {
            flex-direction: column;
            height: auto;
            align-items: center;
            gap: 1rem;
        }
        .page-index .podium-stand {
            order: 3; /* Bronze par défaut */
            width: 90%;
            max-width: 300px;
            height: auto;
            padding: 0.75rem;
        }
        .page-index .podium-stand.gold { order: 1; }
        .page-index .podium-stand.silver { order: 2; }

        .page-index .podium-stand .name { font-size: 1rem; }
        .page-index .podium-stand .score { font-size: 1.1rem; }
        .page-index .podium-avatar-wrapper { width: 50px; height: 50px; }
    }
    /* Styles spécifiques pour les cartes de catégorie sur l'accueil */
    .page-index .category-card-home {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .page-index .category-card-home:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 2rem rgba(0,0,0,.15) !important;
    }
    .page-index .category-icon-home {
        font-size: 3rem;
        color: var(--primary-color);
    }

/* ============================================================
   MENTIONS LÉGALES
   Extrait du bloc <style> de mentions.php le 18/10/2026.
   ============================================================ */    .page-mentions .carte-legale {
        background: #fff;
        border: 2px solid #ececec;
        border-radius: 1.25rem;
        padding: 1.25rem 1.5rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.04);
    }
    .page-mentions .carte-legale h2 { color: #58cc02; }
    .page-mentions .liste-credits { padding-left: 1.1rem; }
    .page-mentions .liste-credits li { margin-bottom: .85rem; }

/* ============================================================
   MES CARTES — la bibliothèque de l'élève
   Extrait du bloc <style> de mes_flashcards.php le 18/10/2026.
   ============================================================ *//* Palette locale retirée : elle est dans theme.css. */
    .page-mes-flashcards .page-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--duo-text);
        text-align: center;
        margin-bottom: 2rem;
    }

    /* Style du conteneur principal */
    .page-mes-flashcards .flashcard-manager-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    @media (min-width: 992px) {
        .page-mes-flashcards .flashcard-manager-grid {
            grid-template-columns: 400px 1fr;
        }
    }

    /* Style des cartes et panneaux */
    .page-mes-flashcards .panel {
        background-color: var(--card-bg);
        border-radius: 1.5rem;
        padding: 2rem;
        border: 1px solid var(--duo-grey);
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .page-mes-flashcards .panel-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: var(--duo-text);
    }

    /* Formulaire de création */
    .page-mes-flashcards .form-label {
        font-weight: 700;
        color: var(--duo-dark-grey);
        margin-bottom: 0.5rem;
    }
    .page-mes-flashcards .form-control {
        border-radius: 0.75rem;
        border: 2px solid var(--duo-grey);
        padding: 0.75rem 1rem;
    }
    .page-mes-flashcards .form-control:focus {
        border-color: var(--duo-blue);
        box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.2);
    }
    .page-mes-flashcards .btn-create {
        width: 100%;
        background-color: var(--duo-blue);
        color: white;
        font-weight: 700;
        border: none;
        border-radius: 0.75rem;
        padding: 0.75rem;
        transition: all 0.2s ease;
        box-shadow: 0 4px 0 #1899d6;
    }
    .page-mes-flashcards .btn-create:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #1899d6;
    }
    .page-mes-flashcards .btn-create:active {
        transform: translateY(1px);
        box-shadow: 0 2px 0 #1899d6;
    }

    /* Liste des cartes créées */
    .page-mes-flashcards .user-card-list {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 60vh;
        overflow-y: auto;
    }
    .page-mes-flashcards .user-card-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid var(--duo-grey);
    }
    .page-mes-flashcards .user-card-item:last-child {
        border-bottom: none;
    }
    .page-mes-flashcards .card-text-content {
        display: flex;
        gap: 1rem;
        align-items: center;
    }
    .page-mes-flashcards .card-text-content .recto {
        font-weight: 700;
        color: var(--duo-text);
    }
    .page-mes-flashcards .card-text-content .verso {
        color: #777;
    }
    .page-mes-flashcards .card-actions .btn-delete {
        background: none;
        border: none;
        color: var(--duo-red);
        font-size: 1.2rem;
        opacity: 0.5;
        transition: opacity 0.2s;
    }
    .page-mes-flashcards .card-actions .btn-delete:hover {
        opacity: 1;
    }
    .page-mes-flashcards .empty-list-message {
        text-align: center;
        padding: 2rem;
        color: #999;
    }

/* ============================================================
   MON ÉVOLUTION — les statistiques
   Extrait du bloc <style> de mon_progres.php le 18/10/2026.
   ============================================================ */    /* Styles pour la nouvelle page de progrès */
    .page-mon-progres .progress-card { text-align: center; }
    .page-mon-progres .progress-chart-container { position: relative; width: 150px; height: 150px; margin: 0 auto; }
    .page-mon-progres #daily-progress-chart { width: 100% !important; height: 100% !important; }
    .page-mon-progres .progress-chart-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; font-weight: 800; font-family: 'Poppins', sans-serif; }
    
    .page-mon-progres .timeline { list-style: none; padding: 0; position: relative; }
    .page-mon-progres .timeline:before { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: #e9ecef; left: 20px; margin-left: -1.5px; }
    .page-mon-progres .timeline-item { position: relative; margin-bottom: 1.5rem; }
    .page-mon-progres .timeline-icon { position: absolute; left: 20px; top: 0; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 3px solid #e9ecef; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--primary-color); }
    .page-mon-progres .timeline-content { margin-left: 60px; background: #fff; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

    /* L'avatar est un composant partagé : voir design.css. */

    /* --- NOUVEAUX STYLES POUR LE CALENDRIER --- */
    .page-mon-progres .calendar-container {
        padding: 1.5rem;
    }
    .page-mon-progres .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }
    .page-mon-progres .calendar-header h4 {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        margin: 0;
    }
    .page-mon-progres .calendar-nav-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #6c757d;
    }
    .page-mon-progres .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10px; /* Espace entre les cases */
    }
    .page-mon-progres .calendar-day-header, .page-mon-progres .calendar-day {
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        border-radius: 0.75rem; /* Cases plus arrondies */
    }
    .page-mon-progres .calendar-day-header {
        font-weight: 700;
        color: #6c757d;
    }
    .page-mon-progres .calendar-day {
        background-color: #f0f2f5;
        color: #6c757d;
        transition: all 0.2s;
        position: relative;
    }
    .page-mon-progres .calendar-day.empty {
        background-color: transparent;
    }
    /* La couleur de l'utilisateur sera appliquée ici via une variable CSS */
    .page-mon-progres .calendar-day.active {
        background-color: var(--user-profile-color);
        color: white;
        font-weight: 700;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transform: scale(1.05);
    }
    /* Style pour le jour actuel */
    .page-mon-progres .calendar-day.today {
        border: 2px solid var(--user-profile-color);
        font-weight: 700;
    }
    .page-mon-progres .calendar-day.active.today {
        box-shadow: 0 0 15px var(--user-profile-color);
    }

/* ============================================================
   PROFIL
   Extrait du bloc <style> de profil.php le 18/10/2026.
   ============================================================ */    .page-profil .profile-avatar-wrapper {
        position: relative;
        width: 160px; /* Taille du cercle extérieur */
        height: 160px;
        border-radius: 50%;
        padding: 5px; /* Épaisseur de la bordure colorée */
        background: #fff; /* Fond pour que la bordure soit visible */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        border-width: 5px;
        border-style: solid;
    }
    .page-profil .profile-avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    .page-profil .stat-card { background: #f8f9fa; border: none; text-align: center; padding: 1.5rem; }
    .page-profil .stat-icon { font-size: 2.5rem; color: var(--primary-color); }
    .page-profil .stat-value { font-size: 2rem; font-weight: 700; }
    .page-profil .stat-label { font-size: 1rem; color: #6c757d; }

/* ============================================================
   MON AGENDA
   Extrait du bloc <style> de mon_agenda.php le 18/10/2026.
   ============================================================ */    /* ---------- Les styles PROPRES à la page (design.css reste intact) ---------- */
    .page-mon-agenda .agenda-carte { padding: 1.4rem 1.4rem 1.6rem; }
    .page-mon-agenda .agenda-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .8rem;
        margin-bottom: 1rem;
    }
    .page-mon-agenda .agenda-nav-btn {
        padding: .5rem 1rem;
        font-size: .85rem;
        white-space: nowrap;
    }
    .page-mon-agenda .agenda-mois-titre {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--encre);
        text-align: center;
        flex: 1;
    }
    .page-mon-agenda .agenda-retour { text-align: center; margin: -.4rem 0 1rem; font-size: .85rem; }
    .page-mon-agenda .agenda-retour a { font-weight: 700; }

    /* ---------- La grille du mois : 7 colonnes ---------- */
    .page-mon-agenda .agenda-grille {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
    }
    .page-mon-agenda .agenda-col-tete {
        text-align: center;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--texte-doux);
        padding-bottom: .3rem;
    }
    .page-mon-agenda .agenda-jour {
        position: relative;
        min-height: 84px;
        padding: .4rem .35rem .45rem;
        border: 2px solid var(--bord);
        border-radius: var(--r-sm);
        background: var(--blanc);
        display: flex;
        flex-direction: column;
        gap: .25rem;
        min-width: 0;
        overflow: hidden;
    }
    /* Un jour sans cours reste discret : simple case claire. */
    .page-mon-agenda .agenda-jour--vide {
        border-color: transparent;
        background: transparent;
    }
    .page-mon-agenda .agenda-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: .8rem;
        font-weight: 800;
        color: var(--encre);
        flex: 0 0 auto;
    }
    /* Le jour d'aujourd'hui est marqué. */
    .page-mon-agenda .agenda-jour--aujourdhui {
        border-color: var(--vert);
        background: #f3fce9;
    }
    .page-mon-agenda .agenda-jour--aujourdhui .agenda-num {
        background: var(--vert);
        color: #fff;
    }

    /* ---------- Un cours = une pastille verte ---------- */
    .page-mon-agenda .agenda-pastille {
        display: block;
        padding: .2rem .4rem;
        border-radius: 8px;
        border-left: 4px solid var(--bleu);
        background: #eaf7ff;
        color: var(--bleu-fonce);
        font-size: .72rem;
        font-weight: 700;
        line-height: 1.25;
        /* Le titre d'un cours peut tenir sur deux lignes : « Cours de
           conversation » ne doit plus s'afficher « Cours de… ». */
        white-space: normal;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .page-mon-agenda .agenda-pastille b { font-weight: 800; }
    .page-mon-agenda .agenda-pastille--cours {
        background: var(--vert);
        border-left-color: var(--vert-fonce);
        color: #fff;
    }
    .page-mon-agenda .agenda-pastille--indispo {
        background: var(--bord-doux);
        border-left-color: #c7ced8;
        color: var(--texte-doux);
        font-weight: 600;
    }
    .page-mon-agenda .agenda-pastille--autre {
        background: #fff4e0;
        border-left-color: var(--orange);
        color: #a35a00;
    }

    /* ---------- État vide ---------- */
    .page-mon-agenda .agenda-vide { padding: 1.6rem 1rem; }

    /* ---------- Mes prochains cours ---------- */
    .page-mon-agenda .agenda-section-titre {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--encre);
        margin: 0 0 .9rem;
    }
    .page-mon-agenda .agenda-liste { list-style: none; margin: 0; padding: 0; }
    .page-mon-agenda .agenda-liste-item {
        display: flex;
        align-items: center;
        gap: .8rem;
        padding: .7rem .2rem;
        border-bottom: 1px solid var(--bord-doux);
    }
    .page-mon-agenda .agenda-liste-item:last-child { border-bottom: none; }
    .page-mon-agenda .agenda-liste-puce {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--vert);
        flex: 0 0 auto;
    }
    .page-mon-agenda .agenda-liste-titre { font-weight: 700; color: var(--encre); }
    .page-mon-agenda .agenda-liste-date { font-size: .84rem; color: var(--texte-doux); }

    /* ---------- Abonnement (A5) ---------- */
    .page-mon-agenda .agenda-abonner .agenda-abonnement-bouton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .7rem 1.2rem;
        border-radius: var(--r-pilule);
        font-weight: 800;
        background: var(--blanc);
        color: var(--bleu-fonce);
        border: 2px solid var(--bord);
        box-shadow: 0 4px 0 var(--bord);
    }
    .page-mon-agenda .agenda-abonner .agenda-abonnement-google .agenda-abonnement-bouton { border-color: var(--bleu); }
    .page-mon-agenda .agenda-abonner .agenda-abonnement-adresse {
        border: 2px solid var(--bord);
        border-radius: var(--r-sm);
        padding: .55rem .7rem;
        font-size: .82rem;
        color: var(--texte);
        background: var(--fond);
    }

    /* ---------- Téléphone ---------- */
    @media (max-width: 640px) {
        .page-mon-agenda .agenda-carte { padding: 1rem .7rem 1.1rem; }
        .page-mon-agenda .agenda-grille { gap: 4px; }
        .page-mon-agenda .agenda-jour { min-height: 62px; padding: .25rem .2rem; }
        .page-mon-agenda .agenda-pastille { font-size: .6rem; padding: .15rem .25rem; }
        .page-mon-agenda .agenda-nav-btn { padding: .45rem .6rem; font-size: .78rem; }
        .page-mon-agenda .agenda-mois-titre { font-size: 1.05rem; }
    }


/* ============================================================
   LOGIN — page autonome (aucun gabarit : ni barre, ni pied)
   ============================================================ */

/* Ces pages n'ont PAS de barre fixe en haut : la réserve de 78 px que
   theme.css pose sur <body> pour le gabarit serait un trou blanc. On la
   retire ici, et seulement ici.

   TOUTES les pages de compte portent la classe .page-auth : une seule
   maquette (includes/gabarit_auth.php) pour la connexion, l'inscription,
   le mot de passe oublié, le nouveau mot de passe et l'activation. */
body.page-auth { padding-top: 0; }

/* DEUX MOITIÉS EXACTES — l'image à gauche, le formulaire centré à droite.
   La grille Bootstrap donnait 33 % au medium et 50 % au large, et les
   marges de « container-fluid » rognaient l'image : elle n'atteignait
   pas le bord. Une grille simple, à 50/50, plein cadre. */
body.page-auth .auth-ecran {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    min-height: 100dvh;   /* mobile : tient compte de la barre d'URL */
}
body.page-auth .auth-image {
    background-image: url('/assets/img/learn.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
body.page-auth .auth-forme {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--blanc);
}
body.page-auth .auth-boite { width: 100%; max-width: 430px; }
body.page-auth .login-logo { max-height: 130px; margin-bottom: 1rem; }

/* Sur téléphone : une seule colonne, l'image disparaît, le formulaire
   occupe tout l'écran. */
@media (max-width: 767.98px) {
    body.page-auth .auth-ecran { grid-template-columns: 1fr; }
    body.page-auth .auth-image { display: none; }
    body.page-auth .auth-forme { min-height: 100vh; min-height: 100dvh; padding: 1.75rem 1.15rem; }
}

/* Le lien discret, sous les champs (« mot de passe oublié ? ») */
body.page-auth .lien-discret {
    color: var(--texte-doux);
    font-size: .9rem;
    text-decoration: none;
}
body.page-auth .lien-discret:hover {
    color: var(--bleu-fonce);
    text-decoration: underline;
}

/* Les messages de ces pages : même respiration que les formulaires */
body.page-auth .alert { border-radius: var(--r-sm); font-size: .95rem; }

/* ============================================================
   CHANGEMENT DE MOT DE PASSE — sous-titres bilingues
   ============================================================ */

body.page-mot-de-passe .form-label-subtitle,
body.page-mot-de-passe .text-subtitle {
    font-size: .85rem;
    font-weight: 400;
    color: var(--texte-doux);
}


/* ============================================================
   COMPOSANT COMMUN — « S'entraîner » (les deux pages)
   exercices.php et exercices_liste.php affichaient la même liste,
   avec les mêmes règles copiées deux fois. Elles sont ici une seule
   fois, pour les deux pages : ':is()' évite de dupliquer le bloc.
   ============================================================ */

:is(.page-exercices, .page-exercices-liste) .exercise-details {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: .5rem;
}
:is(.page-exercices, .page-exercices-liste) .difficulty-icon {
    display: flex;
    align-items: flex-end;
    height: 16px;
    gap: 2px;
}
:is(.page-exercices, .page-exercices-liste) .difficulty-icon .bar {
    width: 4px;
    background-color: var(--bord);
    border-radius: 2px;
}
:is(.page-exercices, .page-exercices-liste) .difficulty-icon.facile .bar.active { background-color: var(--vert); }
:is(.page-exercices, .page-exercices-liste) .difficulty-icon.moyen .bar.active { background-color: var(--jaune-ombre); }
:is(.page-exercices, .page-exercices-liste) .difficulty-icon.difficile .bar.active { background-color: var(--rouge); }
:is(.page-exercices, .page-exercices-liste) .difficulty-icon .bar1 { height: 33%; }
:is(.page-exercices, .page-exercices-liste) .difficulty-icon .bar2 { height: 66%; }
:is(.page-exercices, .page-exercices-liste) .difficulty-icon .bar3 { height: 100%; }
:is(.page-exercices, .page-exercices-liste) .xp-badge { font-weight: 700; color: var(--jaune-ombre); }

@media (max-width: 767px) {
    :is(.page-exercices, .page-exercices-liste) .list-group-item { flex-direction: column; align-items: flex-start !important; }
    :is(.page-exercices, .page-exercices-liste) .list-group-item > div:last-child { margin-top: 1rem; width: 100%; }
    :is(.page-exercices, .page-exercices-liste) .list-group-item .btn { width: 100%; }
    :is(.page-exercices, .page-exercices-liste) .list-group-item .text-success { margin-bottom: .5rem; }
}

/* ============================================================
   L'ACCUEIL — refonte du 18/10/2026
   Six zones, une seule action principale. L'XP et le classement ont
   été supprimés : « La communauté » montre qui est là, pas qui est
   premier. Les blocs apparaissent l'un après l'autre, les chiffres
   s'incrémentent, les cartes se soulèvent au survol.
   ============================================================ */

body.page-index .accueil { padding: 1.6rem 0 3rem; }
body.page-index .accueil > * {
    animation: accueil-apparition .55s ease both;
}
body.page-index .accueil > *:nth-child(2) { animation-delay: .06s; }
body.page-index .accueil > *:nth-child(3) { animation-delay: .12s; }
body.page-index .accueil > *:nth-child(4) { animation-delay: .18s; }
body.page-index .accueil > *:nth-child(5) { animation-delay: .24s; }
body.page-index .accueil > *:nth-child(6) { animation-delay: .30s; }
body.page-index .accueil > *:nth-child(7) { animation-delay: .36s; }

@keyframes accueil-apparition {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* --- Le rappel de cours (agenda) --- */
body.page-index .accueil-rappel {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    background: linear-gradient(135deg, var(--jaune), var(--orange));
    color: #5a3b00;
    border-radius: var(--r);
    padding: 1rem 1.25rem;
    margin-bottom: 1.6rem;
    font-weight: 800;
    box-shadow: 0 4px 0 var(--jaune-ombre);
    transition: transform .15s ease, box-shadow .15s ease;
}
body.page-index .accueil-rappel:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--jaune-ombre);
    color: #5a3b00;
}
body.page-index .accueil-rappel-icone { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
body.page-index .accueil-rappel-texte { flex: 1; font-size: 1.02rem; line-height: 1.35; }
body.page-index .accueil-rappel-lien {
    white-space: nowrap;
    background: rgba(255, 255, 255, .55);
    border-radius: var(--r-pilule);
    padding: .4rem .9rem;
    font-size: .88rem;
}

/* --- 1. Le bonjour + la carte d'action --- */
body.page-index .accueil-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 1.25rem;
    align-items: stretch;
    margin-bottom: 1.25rem;
}
body.page-index .accueil-bonjour {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--blanc);
    border-radius: var(--r);
    padding: 1.5rem;
    box-shadow: var(--ombre-douce);
}
body.page-index .accueil-avatar {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 4px solid var(--bleu);
    padding: 3px;
    background: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--police-titre);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--encre);
}
body.page-index .accueil-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
body.page-index .accueil-titre {
    font-family: var(--police-titre);
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--encre);
    margin: 0 0 .2rem;
}
body.page-index .accueil-soustitre { color: var(--texte-doux); margin: 0; }

body.page-index .accueil-action {
    background: linear-gradient(150deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
    color: var(--blanc);
    border-radius: var(--r);
    padding: 1.6rem 1.75rem;
    box-shadow: 0 6px 18px rgba(28, 176, 246, .28);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
body.page-index .accueil-action-label {
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: .72rem;
    font-weight: 700;
    opacity: .85;
    margin: 0 0 .35rem;
}
body.page-index .accueil-action-titre {
    font-family: var(--police-titre);
    font-size: 1.42rem;
    font-weight: 800;
    margin: 0 0 .3rem;
    line-height: 1.25;
}
body.page-index .accueil-action-pt {
    margin: 0 0 1.15rem;
    opacity: .92;
    font-size: .95rem;
}

/* --- 2. La flamme --- */
body.page-index .accueil-bloc {
    background: var(--blanc);
    border-radius: var(--r);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--ombre-douce);
}
body.page-index .accueil-titre-bloc {
    font-family: var(--police-titre);
    font-size: 1.16rem;
    font-weight: 800;
    color: var(--encre);
    margin: 0 0 .75rem;
}
body.page-index .accueil-flamme {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
body.page-index .flamme-compteur {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: linear-gradient(135deg, var(--jaune), var(--orange));
    border-radius: var(--r-pilule);
    padding: .65rem 1.35rem;
    box-shadow: 0 4px 0 var(--jaune-ombre);
}
body.page-index .flamme-icone {
    font-size: 1.55rem;
    line-height: 1;
    animation: flamme-palpiter 1.9s ease-in-out infinite;
}
body.page-index .flamme-valeur {
    font-family: var(--police-titre);
    font-size: 1.65rem;
    font-weight: 800;
    color: #5a3b00;
}
body.page-index .flamme-texte p { margin: 0; color: var(--texte); }

@keyframes flamme-palpiter {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50%      { transform: scale(1.12) rotate(3deg); }
}

body.page-index .flamme-semaine {
    display: flex;
    gap: .5rem;
    margin-top: 1.1rem;
    flex-wrap: wrap;
}
body.page-index .flamme-jour {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: .88rem;
    color: var(--texte-doux);
    background: var(--bord-doux);
}
body.page-index .flamme-jour.fait {
    background: var(--vert);
    color: var(--blanc);
    box-shadow: 0 3px 0 var(--vert-ombre);
    animation: flamme-jour-apparir .35s ease both;
}

@keyframes flamme-jour-apparir {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* --- 3. Ma progression --- */
body.page-index .accueil-chiffres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}
body.page-index .chiffre {
    background: var(--bord-doux);
    border-radius: var(--r-sm);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
body.page-index .chiffre-valeur {
    font-family: var(--police-titre);
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--bleu);
    line-height: 1.1;
}
body.page-index .chiffre-libelle {
    color: var(--texte-doux);
    font-size: .88rem;
}
body.page-index .accueil-jauge .jauge-fond {
    height: 16px;
    border-radius: var(--r-pilule);
    background: var(--bord-doux);
    overflow: hidden;
}
body.page-index .accueil-jauge .jauge-remplissage {
    height: 100%;
    border-radius: var(--r-pilule);
    background: linear-gradient(90deg, var(--vert), var(--vert-clair));
    box-shadow: 0 2px 0 var(--vert-ombre);
    transition: width 1.1s cubic-bezier(.2, .8, .25, 1);
}
body.page-index .jauge-libelle {
    margin: .55rem 0 0;
    color: var(--texte-doux);
    font-size: .88rem;
}

/* --- 4. Mes outils --- */
body.page-index .accueil-outils {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 520px) {
    body.page-index .accueil-outils { grid-template-columns: 1fr; }
}
body.page-index .outil-carte {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-decoration: none;
    border-radius: var(--r);
    padding: 1.35rem 1.5rem;
    color: var(--blanc);
    transition: transform .18s ease, box-shadow .18s ease;
}
body.page-index .outil-carte:hover {
    transform: translateY(-4px);
    color: var(--blanc);
}
body.page-index .outil-flashcards {
    background: linear-gradient(140deg, var(--vert), var(--vert-fonce));
    box-shadow: 0 5px 0 var(--vert-ombre);
}
body.page-index .outil-flashcards:hover { box-shadow: 0 9px 0 var(--vert-ombre); }
body.page-index .outil-exercices {
    background: linear-gradient(140deg, var(--violet), #a45cff);
    box-shadow: 0 5px 0 #8e4bd6;
}
body.page-index .outil-exercices:hover { box-shadow: 0 9px 0 #8e4bd6; }
body.page-index .outil-icone { font-size: 1.75rem; line-height: 1.2; }
body.page-index .outil-titre {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1.12rem;
}
body.page-index .outil-texte { opacity: .94; font-size: .93rem; line-height: 1.45; }

/* --- 5. La communauté — SANS classement --- */
body.page-index .accueil-bloc-texte {
    color: var(--texte-doux);
    margin: -.35rem 0 1.15rem;
    max-width: 62ch;
}
body.page-index .communaute-liste {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
body.page-index .membre {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--bord-doux);
    border-radius: var(--r-pilule);
    padding: .45rem .95rem .45rem .55rem;
    transition: transform .15s ease, background-color .15s ease;
}
body.page-index .membre:hover {
    transform: translateY(-2px);
    background: var(--bord);
}
body.page-index .membre-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid var(--bleu);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blanc);
    font-family: var(--police-titre);
    font-weight: 800;
    color: var(--encre);
    flex-shrink: 0;
}
body.page-index .membre-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.page-index .membre-nom { font-weight: 700; color: var(--encre); }
body.page-index .membre:hover .membre-nom { color: var(--bleu-fonce); }
body.page-index .membre-flamme {
    font-size: .85rem;
    color: var(--texte-doux);
    font-weight: 700;
}

/* --- 6. Le mot du professeur --- */
body.page-index .mot-professeur {
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
    background: linear-gradient(140deg, #fff8e6, #ffefd0);
    border-radius: var(--r);
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--jaune-ombre);
}
body.page-index .mot-icone {
    font-size: 1.9rem;
    color: var(--jaune-ombre);
    line-height: 1.1;
}
body.page-index .mot-titre {
    font-family: var(--police-titre);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--encre);
    margin: 0 0 .35rem;
}
/* Le gel de série, sous la flamme : discret, mais lisible et cliquable
   (le title explique ce qu'est un gel). */
body.page-index .flamme-gels {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: .7rem 0 0;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(255, 200, 40, .16);
    color: #7a5200;
    font-size: .85rem;
    cursor: help;
}
body.page-index .flamme-gels strong { font-weight: 800; }
body.page-index .mot-date {
    margin: .6rem 0 0;
    font-size: .82rem;
    color: rgba(90, 59, 0, .75);
}
body.page-index .mot-texte {
    margin: 0;
    color: #5a3b00;
    line-height: 1.6;
    max-width: 70ch;
}

/* --- Sur téléphone, tout passe en une colonne --- */
@media (max-width: 780px) {
    body.page-index .accueil-hero { grid-template-columns: 1fr; }
    body.page-index .accueil-chiffres { grid-template-columns: 1fr; }
    body.page-index .accueil-titre { font-size: 1.35rem; }
    body.page-index .accueil-action-titre { font-size: 1.22rem; }
}

/* ============================================================
   LE PROFIL PUBLIC — ce que les autres élèves peuvent voir.
   Prénom, photo, flamme, leçons terminées. RIEN d'autre : ni nom de
   famille, ni e-mail, ni classement (décision du 18/10/2026).
   ============================================================ */
body.page-profil-public .profil-public {
    max-width: 620px;
    margin: 2rem auto 3rem;
    background: var(--blanc);
    border-radius: var(--r);
    padding: 2.25rem 2.25rem 2rem;
    box-shadow: var(--ombre-douce);
    animation: accueil-apparition .5s ease both;
}
body.page-profil-public .profil-public-entete {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin-bottom: 1.75rem;
}
body.page-profil-public .profil-public-avatar {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 5px solid var(--bleu);
    padding: 4px;
    background: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--police-titre);
    font-size: 2.35rem;
    font-weight: 800;
    color: var(--encre);
}
body.page-profil-public .profil-public-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
body.page-profil-public .profil-public-nom {
    font-family: var(--police-titre);
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--encre);
    margin: 0 0 .25rem;
}
body.page-profil-public .profil-public-texte {
    color: var(--texte-doux);
    margin: 0;
}
body.page-profil-public .profil-public-chiffres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1.5rem;
}
body.page-profil-public .profil-public-chiffres .chiffre {
    background: var(--bord-doux);
    border-radius: var(--r-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    text-align: center;
}
body.page-profil-public .profil-public-chiffres .chiffre-valeur {
    font-family: var(--police-titre);
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--bleu);
    line-height: 1.15;
}
body.page-profil-public .profil-public-chiffres .chiffre-libelle {
    color: var(--texte-doux);
    font-size: .85rem;
}
body.page-profil-public .profil-public-note {
    color: var(--texte-doux);
    font-size: .92rem;
    text-align: center;
    margin: 0 0 1.5rem;
}
body.page-profil-public .profil-public-actions {
    display: flex;
    justify-content: center;
}
body.page-profil-public .profil-public-vide {
    text-align: center;
    padding: 1.5rem 0;
}
body.page-profil-public .profil-public-vide-icone {
    font-size: 3rem;
    color: var(--texte-doux);
    margin: 0 0 .75rem;
}
@media (max-width: 560px) {
    body.page-profil-public .profil-public { padding: 1.6rem 1.25rem; }
    body.page-profil-public .profil-public-chiffres { grid-template-columns: 1fr; }
}

/* ============================================================
   LA PAGE « VOTRE DATE DE NAISSANCE » (30/10/2026)
   Elle passe par le gabarit de compte (page_auth) : elle charge
   theme/design/pages/mobile.css, PAS culture.css. Les styles du
   formulaire vivent donc ici, avec le reste des pages.
   ============================================================ */
.formulaire-date .date-champs {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1.05fr;
    gap: .55rem;
}
.formulaire-date .date-champ {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;           /* sans cela, un <select> long élargit sa colonne */
}
.formulaire-date .date-champ span {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texte-doux, #6b7280);
    padding-left: .15rem;
}
.formulaire-date select {
    width: 100%;
    height: 52px;
    padding: 0 2rem 0 .85rem;
    border: 2px solid var(--bord, #e3e6ea);
    border-radius: 12px;
    background-color: #fff;
    /* Chevron dessiné : la flèche native change de forme selon le
       navigateur et déborde sur les noms de mois portugais. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 15px;
    -webkit-appearance: none;
    appearance: none;
    color: var(--encre, #1f2937);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.formulaire-date select:hover { border-color: #c8ced6; }
.formulaire-date select:focus {
    outline: none;
    border-color: var(--bleu, #1cb0f6);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bleu, #1cb0f6) 18%, transparent);
}
.formulaire-date select:invalid,
.formulaire-date select.est-vide { color: #9aa3ad; }

/* L'âge se calcule à la volée : c'est la seule façon pour l'élève de
   voir qu'il a tapé 2006 au lieu de 2016. */
.formulaire-date .date-age {
    display: block;
    margin: .55rem 0 0;
    min-height: 1.15rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--bleu, #1cb0f6);
    opacity: 0;
    transition: opacity .18s;
}
.formulaire-date .date-age.visible { opacity: 1; }

.formulaire-date .btn-primary {
    height: 52px;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: .01em;
}
.formulaire-date .date-note {
    display: flex;
    gap: .55rem;
    margin: 1rem 0 0;
    padding: .7rem .8rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bleu, #1cb0f6) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--bleu, #1cb0f6) 14%, #e3e6ea);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--texte-doux, #6b7280);
}
.formulaire-date .date-note i { margin-top: .1rem; color: var(--bleu, #1cb0f6); }

@media (max-width: 420px) {
    /* Trois listes côte à côte restent lisibles jusqu'à 360 px : on
       resserre les marges plutôt que d'empiler, sinon la page devient
       une colonne de trois blocs et l'on perd la lecture « jj/mm/aaaa ». */
    .formulaire-date .date-champs { gap: .4rem; }
    .formulaire-date select { height: 48px; padding: 0 1.6rem 0 .6rem; font-size: .9rem; background-position: right .45rem center; }
}

/* ============================================================
   UNE COULEUR PAR PAIRE — association
   Les quatre teintes sont désormais définies UNE SEULE FOIS, pour toutes
   les pages, dans `assets/css/moteur-exercice.css`. Ne pas les recopier
   ici : c'est cette copie-là qui faisait diverger les écrans.
   ============================================================ */

/* La sélection d'une carte à associer — couleur neutre, jamais une
   couleur de paire (le bleu est réservé à la paire n°2). */
.page-exercice-vue .association-word.selected {
    border-color: var(--duo-dark-grey) !important;
    background-color: #eef1f5 !important;
    box-shadow: 0 0 0 3px rgba(43, 58, 82, .18);
}


/* ============================================================
   LE PANNEAU VITRÉ SUR LA PHOTO
   Sur PC, les objectifs de l'élève se posent PAR-DESSUS l'image, dans une
   boîte au fond flouté. Sur téléphone, l'image s'efface et la même boîte
   retombe dans le flux, après la carte.
   ============================================================ */
body.page-auth .auth-image { position: relative; }

.auth-panneau {
    position: absolute;
    left: 1.75rem;
    right: 1.75rem;
    bottom: 1.75rem;
    max-height: calc(100% - 3.5rem);
    overflow: auto;
    padding: 1.15rem 1.25rem;
    border-radius: 20px;
    /* Le flou ne servait à rien sur cette photo claire : il ne laissait
       qu'un halo laiteux. Une carte franche, blanche, avec une vraie ombre. */
    background: #fff;
    border: 1px solid var(--bord);
    box-shadow: 0 20px 45px rgba(16, 28, 48, .20), 0 2px 6px rgba(16, 28, 48, .06);
}
.auth-panneau .espace-objectifs { margin: 0; }
.auth-panneau .espace-objectifs h3 { margin-top: 0; }

/* Sur téléphone : la photo disparaît, le panneau devient une carte normale
   sous le formulaire. */
@media (max-width: 767.98px) {
    body.page-auth .auth-image:has(.auth-panneau) {
        display: contents;          /* l'image s'efface… */
        background: none;
    }
    /* La carte d'abord, le panneau ENSUITE : dans le flux du téléphone,
       les objectifs passent sous les étapes, pas au-dessus. */
    body.page-auth .auth-forme { order: 1; }
    body.page-auth .auth-panneau { order: 2; }
    /* Sans cela, la carte garde la hauteur d'un écran entier et le panneau
       commencerait pile à la ligne de flottaison : on le veut juste APRÈS
       la carte, pas après un écran vide. */
    body.page-auth .auth-ecran:has(.auth-panneau) .auth-forme {
        min-height: auto;
        padding-bottom: 1.25rem;
    }
    body.page-auth .auth-panneau {
        position: static;           /* …et la boîte retombe dans le flux */
        max-height: none;
        overflow: visible;
        margin: 0 1.15rem 1.75rem;
        padding: 1rem 1.1rem;
        border-radius: 18px;
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 2px solid var(--bord);
        box-shadow: 0 6px 18px rgba(16, 28, 48, .08);
    }
}

/* ============================================================
   CARTES DE RÉVISION — LE BOUTON DU BAS ET LA BARRE GESTUELLE
   04/11/2026 : sur un vrai téléphone Android, « Voir la réponse »
   touchait le bord bas de la fenêtre et passait sous la barre de
   navigation gestuelle (bande blanche + pilule). Le conteneur de
   commandes n'avait aucun remplissage bas. On réserve la zone sûre,
   avec un minimum de 14 px même quand le système n'en déclare pas.
   ============================================================ */
body.est-mobile.page-flashcards .controls-container {
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}
/* Même réserve pour l'écran d'exercice : son bouton de validation est
   posé au même endroit. */
body.est-mobile.page-exercice-vue .barre-validation,
body.est-mobile.page-exercice-vue .actions-bas {
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------
   CORRECTION 04/11/2026 — la barre gestuelle Android
   14 px ne suffisaient pas : la barre blanche du système recouvre
   ~40 px. En application installée, la zone est DANS la fenêtre et
   certains navigateurs la déclarent à 0 — on réserve donc une valeur
   plancher franche.
   ------------------------------------------------------------ */
body.est-mobile.page-flashcards .controls-container {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
body.est-mobile.est-webapp.page-flashcards .controls-container {
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
}
body.est-mobile.est-webapp.page-exercice-vue main {
    padding-bottom: calc(96px + 44px + env(safe-area-inset-bottom, 0px));
}


/* ============================================================
   CHOIX DE LA LANGUE (profil) — 08/11/2026

   Même famille que les cartes de statistiques juste au-dessus :
   verre dépoli, rayon --r, ombre douce. Les langues sont des TUILES et
   non des pastilles : une pastille se lit comme un filtre, une tuile
   comme un choix. La langue active porte un liseré bleu et une coche.
   ============================================================ */
body.page-profil .profil-langues {
    margin-top: 1.4rem;
    padding: 1.4rem 1.3rem 1.5rem;
    background: var(--verre);
    backdrop-filter: var(--blur-verre);
    -webkit-backdrop-filter: var(--blur-verre);
    border: 1px solid var(--verre-bord);
    border-radius: var(--r);
    box-shadow: var(--verre-ombre);
}
body.page-profil .profil-langues .profil-section-titre {
    margin-bottom: .3rem;
}
body.page-profil .profil-langues-aide {
    color: var(--texte-doux);
    font-size: .88rem;
    margin: 0 0 1.15rem;
    max-width: 46ch;
}

body.page-profil .profil-langues-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: .7rem;
}

body.page-profil .profil-langue {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1rem .6rem .85rem;
    border: 1px solid var(--verre-bord);
    border-radius: var(--r-sm);
    background: var(--verre-tres-fort);
    text-decoration: none;
    color: var(--encre);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.page-profil .profil-langue:hover,
body.page-profil .profil-langue:focus-visible {
    transform: translateY(-3px);
    border-color: var(--bleu-clair);
    box-shadow: 0 14px 30px rgba(43, 58, 82, .14);
    color: var(--encre);
}
body.page-profil .profil-langue.est-active {
    border-color: var(--bleu);
    background: linear-gradient(180deg, #f6fcff 0%, #e8f6ff 100%);
    box-shadow: 0 0 0 2px rgba(28, 176, 246, .16), 0 12px 26px rgba(28, 176, 246, .16);
}

body.page-profil .profil-langue-drapeau {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--blanc);
    box-shadow: 0 2px 8px rgba(43, 58, 82, .12);
}
body.page-profil .profil-langue-drapeau img {
    width: 30px;
    height: 21px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(43, 58, 82, .10);
}

body.page-profil .profil-langue-nom {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: .86rem;
    letter-spacing: .01em;
    text-align: center;
    line-height: 1.2;
}

body.page-profil .profil-langue-coche {
    position: absolute;
    top: .45rem;
    right: .5rem;
    font-size: .8rem;
    color: var(--bleu);
}

@media (prefers-reduced-motion: reduce) {
    body.page-profil .profil-langue { transition: none; }
    body.page-profil .profil-langue:hover { transform: none; }
}