/* =====================================================================
   public/assets/style.css
   Système de design : LedgerOps Data
   Palette bleue, sobre et professionnelle. Sans emoji.

   PRINCIPE DIRECTEUR : la grille de tableur.
   Le sujet enseigné fournit son propre langage visuel (cellules,
   en-têtes de colonnes, bordure de sélection, références en chasse
   fixe). On s'en sert comme ossature plutôt que d'ajouter des effets
   décoratifs : une seule audace, le bloc sélectionné du hero, et le
   reste discipliné autour.
   ===================================================================== */

:root {
    /* Bleu de marque */
    --bleu-900: #0f2b4a;
    --bleu-800: #14406f;
    --bleu-700: #17518c;
    --bleu-600: #1a5c9e;   /* Primaire */
    --bleu-500: #2374c4;
    --bleu-100: #e7f0fa;
    --bleu-050: #f3f7fc;

    /* Neutres */
    --encre:   #16202e;    /* Titres */
    --texte:   #3d4756;    /* Corps */
    --doux:    #6b7683;    /* Secondaire */
    --ligne:   #e4e9ef;    /* Bordures */
    --fond:    #f6f8fb;    /* Fond de page */
    --surface: #ffffff;

    /* Sémantiques */
    --vert:      #1f9d61;
    --vert-050:  #eaf7f0;
    --rouge:     #d64545;
    --rouge-050: #fbecec;

    /* Le vert sémantique ci-dessus est à 3,48:1 sur blanc : il convient
       à un trait ou à une bordure, jamais à du texte. Cette variante
       plus sombre (4,73:1) prend le relais partout où le vert porte du
       texte, ou sert de fond à du blanc.                              */
    --vert-texte: #12844f;

    --ombre-sm: 0 1px 2px rgba(16, 32, 55, .06);
    --ombre:    0 4px 18px rgba(16, 32, 55, .07);
    --ombre-lg: 0 12px 34px rgba(16, 32, 55, .12);
    --radius:   14px;
    --radius-s: 9px;
    --transition: .2s ease;

    /* --- Langage « tableur » ---------------------------------------
       La sélection reprend le vert des poignées d'Excel. Elle est
       réservée à un seul rôle : ce qui est sélectionné ou focalisé.
       Distinct de --vert, qui reste le vert sémantique « réussite ».  */
    --selection:     #21a366;
    --selection-050: #e8f6ef;
    --grille-claire: rgba(23, 81, 140, .07);
    --grille-sombre: rgba(255, 255, 255, .07);

    /* Le vert de sélection plafonne à 3,23:1 sur blanc : suffisant pour
       un trait ou un contour de focus, insuffisant sous du texte. Cette
       variante (4,64:1) est réservée aux boutons pleins.              */
    --selection-fonce: #17864f;

    /* Chasse fixe : la voix du tableur. Références de cellules,
       en-têtes, chiffres alignés. Utilisée avec parcimonie.          */
    --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Courbes de mouvement. Sortie franche, jamais de rebond.        */
    --sortie:  cubic-bezier(.22, .61, .36, 1);
    --entrant: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--texte);
    background: var(--fond);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { color: var(--encre); line-height: 1.25; }

.conteneur { width: min(1150px, 92%); margin-inline: auto; }
main { flex: 1; }

.icone { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Suréclat / eyebrow */
.eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bleu-600);
}

/* ============================ Boutons ============================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .72rem 1.4rem;
    border-radius: var(--radius-s);
    font-weight: 600;
    font-size: .94rem;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
    line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn .icone { width: 18px; height: 18px; }
.btn-primaire  { background: var(--bleu-600); color: #fff; }
.btn-primaire:hover { background: var(--bleu-700); }
.btn-bleu      { background: var(--bleu-600); color: #fff; }
.btn-bleu:hover { background: var(--bleu-700); }
.btn-contour   { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-contour:hover { background: rgba(255,255,255,.12); }
/* Action dominante sur fond bleu : le vert de marque, en aplat. Il ne
   partage sa teinte avec rien d'autre sur la page, donc l'œil y va.
   La nuance employée est --selection-fonce : le vert de sélection lui
   même ne tient pas le contraste sous du texte blanc.               */
.btn-accent    { background: var(--selection-fonce); color: #fff; border-color: var(--selection-fonce); }
.btn-accent:hover { background: #126b40; border-color: #126b40; }
/* Action secondaire : présente, sans disputer l'attention à la première. */
.btn-fantome   { background: transparent; color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.22); }
.btn-fantome:hover { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.btn-clair     { background: #fff; color: var(--bleu-700); border-color: var(--ligne); }
.btn-clair:hover { border-color: var(--bleu-500); color: var(--bleu-700); }
.btn-bloc      { display: flex; width: 100%; }
/* Action secondaire sur fond clair : lisible sans concurrencer le bouton
   principal, contrairement à btn-contour qui vise les fonds bleus.     */
.btn-secondaire { background: #fff; color: var(--bleu-700); border-color: var(--bleu-100); }
.btn-secondaire:hover { border-color: var(--bleu-500); background: var(--bleu-050); }
/* Action indisponible : présente, mais visiblement inerte. */
.btn-desactive {
    background: var(--fond); color: var(--doux);
    border-color: var(--ligne); cursor: not-allowed;
}
.btn-desactive:hover { transform: none; }

/* ========================= Barre de navigation ================== */
.nav {
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--ligne);
    position: sticky; top: 0; z-index: 50;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; gap: 1rem; }
.nav-logo img { display: block; height: 48px; width: auto; }
.nav-liens { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.nav-liens a.lien { font-weight: 500; font-size: .93rem; color: var(--texte); display: inline-flex; align-items: center; gap: .35rem; }
.nav-liens a.lien:hover { color: var(--bleu-600); }
.nav-user { font-size: .9rem; color: var(--doux); }
.nav-user strong { color: var(--encre); font-weight: 600; }

/* ============================ Hero ==============================
   Le hero travaille la lumière plutôt que la géométrie : un halo
   diffus en haut à droite, un voile de colonnes verticales très
   estompé, et un seul accent vert posé sur le mot qui porte la
   promesse. Aucune bordure ni cellule dessinée.
   ================================================================ */
/* Base commune à tous les héros bleus (accueil, tarifs, progression). */
.hero {
    background:
        radial-gradient(120% 90% at 88% 0%, rgba(35, 116, 196, .55) 0%, transparent 58%),
        linear-gradient(155deg, var(--bleu-900) 0%, var(--bleu-800) 60%, var(--bleu-700) 100%);
    color: #fff;
    padding: 4.2rem 0 4.5rem;
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* L'accueil respire davantage et ménage la place aux cartes d'infos
   qui chevauchent le bas du hero.                                   */
.hero-accueil { padding: 5rem 0 6.5rem; }

/* ------------------- Bannière de session --------------------------
   La photo n'est pas posée sur le bleu : elle est le fond de la
   bande. Un voile bleu, dense à gauche pour porter le texte, se lève
   vers la droite et laisse voir la salle. La photo n'apporte aucune
   information que le texte ne donne pas : elle est décorative, donc
   retirée de l'arbre d'accessibilité côté HTML.
   ------------------------------------------------------------------ */
.hero-banniere {
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.hero-banniere img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Le cadrage garde l'écran de projection en haut et la salle à
       droite ; le formateur tombe dans la zone voilée.              */
    object-position: center 42%;
    filter: saturate(.9);
}
/* Les paliers du voile sont calés sur la mesure du texte : aucune
   ligne ne dépasse la moitié de la largeur, où le bleu couvre encore
   à 95 %. Le contraste du blanc n'y descend jamais sous 9:1.        */
.hero-banniere::after {
    content: "";
    position: absolute; inset: 0;
    background:
        /* Le côté texte est couvert à plein : sans cette reprise de la
           lumière du hero, il retomberait en aplat mort.             */
        radial-gradient(85% 80% at 12% 0%, rgba(35, 116, 196, .30) 0%, transparent 62%),
        linear-gradient(90deg,
            var(--bleu-900) 0%,
            rgba(15, 43, 74, .97) 44%,
            rgba(15, 43, 74, .90) 60%,
            rgba(17, 55, 95, .54) 78%,
            rgba(20, 64, 111, .30) 100%);
}

@media (max-width: 900px) {
    /* En une colonne, le texte prend toute la largeur : le voile
       bascule à la verticale et reste dense partout. La photo devient
       une texture, la lisibilité passe devant.                       */
    .hero-banniere::after {
        background: linear-gradient(180deg,
            rgba(15, 43, 74, .96) 0%,
            rgba(15, 43, 74, .88) 100%);
    }
    .hero-banniere img { object-position: center 35%; }
}

/* Halo lumineux. Purement décoratif, donc masqué aux lecteurs
   d'écran via aria-hidden côté HTML.                                */
.hero-lueur {
    position: absolute;
    top: -30%; right: -10%;
    width: 62vw; height: 130%;
    background: radial-gradient(circle at 50% 50%, rgba(33, 163, 102, .20) 0%, rgba(35, 116, 196, .16) 38%, transparent 68%);
    filter: blur(12px);
    opacity: 0;
    animation: lueur-monte 1.2s var(--sortie) forwards;
    pointer-events: none;
}
@keyframes lueur-monte { to { opacity: 1; } }

/* Voile de colonnes : des bandes verticales larges et à peine
   perceptibles. Elles suggèrent la donnée en colonnes sans jamais
   refermer de cellule.                                              */
.hero-colonnes-douces {
    position: absolute; inset: 0;
    background-image: linear-gradient(to right, rgba(255,255,255,.05) 0 1px, transparent 1px 100%);
    background-size: 132px 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, transparent 95%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, transparent 95%);
    opacity: 0;
    animation: lueur-monte 1.4s var(--sortie) .2s forwards;
    pointer-events: none;
}

.hero .conteneur { position: relative; z-index: 1; }

/* Sur-titre en chasse fixe, commun à tous les héros. */
.hero .eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--mono);
    font-size: .74rem; letter-spacing: .04em; text-transform: none;
    color: rgba(255,255,255,.66);
}
/* Une pastille verte tient lieu de signal : plus léger qu'un cadre. */
.eyebrow-point::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--selection);
    box-shadow: 0 0 0 4px rgba(33, 163, 102, .18);
    flex-shrink: 0;
}

.hero h1 {
    color: #fff;
    font-size: clamp(2.05rem, 4.6vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.032em;
    line-height: 1.12;
    margin: 1.2rem 0 1.3rem;
    text-wrap: balance;
    position: relative;
    max-width: 22ch;
}
/* L'accent tient dans un seul mot : trait vert qui se trace sous
   « autonome », là où la bordure de sélection enfermait tout le titre. */
.hero h1 .mot-cle { position: relative; white-space: nowrap; }
.hero h1 .mot-cle::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -.06em;
    height: .1em; border-radius: 999px;
    background: linear-gradient(to right, var(--selection), rgba(33, 163, 102, .35));
    transform: scaleX(0); transform-origin: left;
    animation: trait-trace .6s var(--sortie) .5s forwards;
}
@keyframes trait-trace { to { transform: scaleX(1); } }

/* ---- Hero de reprise : accueil du particulier connecté ----------
   Même fond que l'accueil vitrine, mais le contenu n'est plus une
   promesse commerciale : c'est l'étape en cours de l'apprenant.     */
.hero-reprise { padding: 3.4rem 0 3.2rem; }
.hero-reprise h1 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); max-width: 26ch; }
/* Un titre de module peut être long : il doit pouvoir se couper. */
.hero-reprise h1 .mot-cle { white-space: normal; }

.reprise-meta {
    display: flex; flex-wrap: wrap; gap: .5rem .9rem;
    list-style: none; margin: 0 0 1.6rem;
    font-family: var(--mono); font-size: .78rem;
    color: rgba(255,255,255,.72);
}
.reprise-meta li { display: inline-flex; align-items: center; gap: .4rem; }
.reprise-meta .icone { color: rgba(255,255,255,.5); }

.reprise-rappel {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .88rem !important;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius-s);
    padding: .55rem .9rem;
    margin: 0 0 1.6rem !important;
}
.reprise-rappel .icone { color: var(--selection); }

/* Jauge de fin de hero : le contexte, pas l'action principale. */
.reprise-jauge { max-width: 460px; margin-top: 2.6rem; }
.reprise-jauge-txt {
    display: flex; justify-content: space-between; gap: 1rem;
    font-family: var(--mono); font-size: .74rem;
    color: rgba(255,255,255,.6);
    margin-bottom: .5rem;
}
/* Variante de .prog-barre lisible sur fond bleu. */
.prog-barre-claire { height: 6px; background: rgba(255,255,255,.14); }
.prog-barre-claire span { background: linear-gradient(90deg, var(--selection), #6ecf9f); }

/* Texte d'accroche : un cran plus grand et nettement plus contrasté
   qu'auparavant. Un blanc légèrement cassé se détache mieux du bleu
   profond qu'un blanc pur voilé de transparence.                     */
.hero p {
    font-size: clamp(1.08rem, 2vw, 1.24rem);
    line-height: 1.6;
    max-width: 580px;
    margin: 0 0 2.2rem;
    color: #e8eef6;
}
.hero .actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* Chiffres alignés en colonne, comme une plage de données. */
.hero .stats {
    display: flex; flex-wrap: wrap;
    gap: 0;
    margin-top: 3.4rem;
    border-top: 1px solid var(--grille-sombre);
}
.hero .stats > div {
    padding: 1.3rem 2.4rem 0 0;
    margin-right: 2.4rem;
    border-right: 1px solid var(--grille-sombre);
}
.hero .stats > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
/* L'icône dit ce que le chiffre mesure, avant même de le lire. */
.hero .stats .stat-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-bottom: .55rem;
    border-radius: 8px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.78);
}
.hero .stats .chiffre {
    display: block;
    font-family: var(--mono);
    font-size: 2.3rem; font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    color: #fff;
}
.hero .stats .libelle {
    font-family: var(--mono);
    font-size: .71rem; color: rgba(255,255,255,.62);
    text-transform: uppercase; letter-spacing: .1em;
}

@media (max-width: 720px) {
    .hero { text-align: left; padding: 3.5rem 0 5rem; }
    .hero-accueil { padding: 3.8rem 0 6rem; }
    .hero-colonnes-douces { display: none; }
    /* La coupure forcée du titre n'a de sens qu'en pleine largeur. */
    .hero h1 br { display: none; }
    .hero h1 { max-width: none; }
    .hero .stats > div { padding-right: 1.3rem; margin-right: 1.3rem; }
}

/* ====================== Bandeau infos =========================== */
.infos { margin-top: -3.5rem; position: relative; z-index: 2; }
.infos-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.carte-info {
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--ombre);
    padding: 1.9rem; border: 1px solid var(--ligne);
    display: flex; gap: 1.1rem; align-items: flex-start;
    /* Les cartes chevauchent le bas du hero : un liseré vert au survol
       les rattache à l'accent de la page sans les alourdir au repos. */
    position: relative; overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.carte-info::before {
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--selection);
    transform: scaleY(0); transform-origin: center;
    transition: transform var(--transition);
}
.carte-info:hover { box-shadow: var(--ombre-lg); transform: translateY(-2px); }
.carte-info:hover::before { transform: scaleY(1); }
.carte-info .puce {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
    background: var(--bleu-100); color: var(--bleu-600);
    display: flex; align-items: center; justify-content: center;
}
.carte-info h3 {
    font-size: .78rem; font-family: var(--mono);
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--doux); font-weight: 700;
    margin-bottom: .45rem;
}
.carte-info p { color: var(--encre); font-size: 1rem; line-height: 1.55; }

/* ============================ Sections ========================== */
.section { padding: 5rem 0; }
.titre-section { text-align: center; margin-bottom: 3rem; }
.titre-section h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.02em; margin: .5rem 0 .6rem; }
.titre-section p { color: var(--doux); max-width: 560px; margin: 0 auto; }

/* ========================= Cartes modules ======================= */
.modules-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(345px, 1fr)); gap: 1.8rem; }
.carte-module {
    background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--radius);
    box-shadow: var(--ombre-sm); overflow: hidden; display: flex; flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-module:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); border-color: #d3ddea; }
/* Survol : la référence de module passe en « sélectionnée », comme une
   ligne que l'on désigne dans une feuille. */
.carte-module:hover .num-module,
.carte-module:focus-within .num-module {
    border-color: var(--selection);
    background: var(--selection-050);
    color: #14724a;
}

.video-wrap { position: relative; width: 100%; padding-top: 56.25%; background: #0b1a2b; }
/* Les trois formes de lecteur occupent exactement le même cadre : la
   bascule d'une leçon à l'autre ne doit produire aucun soubresaut de
   mise en page, même quand on passe d'un fichier à un lecteur tiers. */
.video-wrap iframe,
.video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-wrap video { background: #0b1a2b; object-fit: contain; display: block; }

/* Emplacement encore vide : on assume l'attente plutôt que d'afficher un
   lecteur muet, qui passerait pour une panne. */
.video-attente {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .7rem; text-align: center; padding: 1rem;
    background: linear-gradient(160deg, #0f2b4a, #0b1a2b);
    color: rgba(255, 255, 255, .82);
}
.video-attente p { font-size: .88rem; margin: 0; }
.video-attente-puce {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .65);
}

/* Les règles ci-dessus imposent un « display » (flex, block) qui prend
   le pas sur le [hidden] { display: none } de la feuille du navigateur :
   sans cette ligne, le lecteur masqué resterait peint par-dessus le
   lecteur actif, et changer de leçon n'afficherait rien. La bascule du
   lecteur repose entièrement sur cet attribut. */
.video-wrap [hidden] { display: none; }

.carte-corps { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.carte-entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
/* Référence de module : traitée comme un en-tête de ligne de tableur
   (chasse fixe, angles droits) plutôt que comme une pastille générique.
   La numérotation est ici légitime : les modules SONT une séquence. */
.num-module {
    display: inline-block;
    background: var(--bleu-050); color: var(--bleu-700);
    border: 1px solid var(--bleu-100);
    font-family: var(--mono); font-weight: 600; font-size: .72rem;
    font-variant-numeric: tabular-nums;
    padding: .24rem .55rem; border-radius: 3px; letter-spacing: .02em;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.duree {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--mono); font-size: .76rem; color: var(--doux); font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.duree .icone { width: 15px; height: 15px; }
.carte-corps h3 { font-size: 1.17rem; margin-bottom: .5rem; }
.carte-corps p { color: var(--doux); font-size: .93rem; margin-bottom: 1.3rem; }
.carte-corps .btn { margin-top: auto; align-self: flex-start; }

/* ==================== Page détail module ======================== */
.detail-hero { background: linear-gradient(150deg, var(--bleu-900) 0%, var(--bleu-700) 100%); color: #fff; padding: 3rem 0; }
.fil-ariane { font-size: .85rem; color: rgba(255,255,255,.75); margin-bottom: 1.1rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.fil-ariane a:hover { color: #fff; text-decoration: underline; }
.detail-hero .num-module { background: rgba(255,255,255,.16); color: #fff; }
.detail-hero h1 { color: #fff; font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: .7rem 0; letter-spacing: -.02em; }
.detail-meta { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .9rem; color: rgba(255,255,255,.9); }
.detail-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.detail-meta .icone { width: 16px; height: 16px; }
.detail-corps { padding: 3rem 0; }
/* Sommaire à gauche, lecteur à droite. La colonne latérale est le fil
   du module : on la lit avant la vidéo, comme un plan avant le texte.
   Elle est nommée en premier dans le balisage, ce qui donne le même
   ordre au clavier qu'à l'oeil. */
.detail-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 2.2rem; align-items: start;
}
.detail-carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--radius); box-shadow: var(--ombre-sm); padding: 1.8rem; }
.detail-carte h3 { font-size: 1.1rem; margin-bottom: .8rem; }
.detail-carte p { color: var(--texte); }
.detail-nav { display: flex; justify-content: space-between; margin-top: 1.8rem; gap: 1rem; }
.detail-nav a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--bleu-600); font-size: .92rem; }
.detail-nav a:hover { color: var(--bleu-800); }
.detail-nav .desactive { color: var(--doux); pointer-events: none; opacity: .45; }
/* En une seule colonne, c'est la vidéo qui doit ouvrir la page : le
   sommaire repasse dessous. Une liste de vingt leçons avant le lecteur
   ferait défiler un écran entier avant de pouvoir regarder. */
@media (max-width: 820px) {
    .detail-grille { grid-template-columns: 1fr; }
    .detail-grille > aside { order: 1; }
}

/* Liste des leçons */
.lecons-liste ul { list-style: none; margin-top: .9rem; }
.lecon-item {
    display: flex; align-items: center; gap: .8rem; width: 100%;
    background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius-s);
    padding: .7rem .8rem; margin-bottom: .55rem; cursor: pointer; text-align: left;
    transition: border-color var(--transition), background var(--transition); font-family: inherit;
}
.lecon-item:hover { border-color: var(--bleu-500); }
.lecon-item.actif { border-color: var(--bleu-500); background: var(--bleu-050); }
.lecon-play {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--bleu-100); color: var(--bleu-600); display: flex; align-items: center; justify-content: center;
}
.lecon-play .icone { width: 17px; height: 17px; }
.lecon-item.actif .lecon-play { background: var(--bleu-600); color: #fff; }
.lecon-txt { display: flex; flex-direction: column; min-width: 0; }
.lecon-titre { font-weight: 600; font-size: .88rem; color: var(--encre); }
.lecon-duree { font-size: .78rem; color: var(--doux); }

/* ---- Sommaire hiérarchisé : chapitres et leçons isolées ------------ */
/* Le chapitre est un INTERTITRE, pas une carte : il regroupe sans se
   mettre en avant, sans quoi il volerait la vedette aux leçons, qui
   sont ce que l'apprenant vient chercher. */
.chapitre-titre {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    margin: 1.3rem 0 .5rem;
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--doux);
}
.chapitre-titre:first-of-type { margin-top: .9rem; }
.chapitre-compte {
    flex-shrink: 0;
    font-family: var(--mono); font-size: .72rem; font-weight: 600;
    letter-spacing: 0; text-transform: none;
    background: var(--fond); color: var(--doux);
    border: 1px solid var(--ligne); border-radius: 3px;
    padding: .1rem .4rem;
}
/* Léger retrait : il suffit à rattacher visuellement les leçons à leur
   chapitre sans creuser un décrochage qui casserait la colonne. */
.lecons-chapitre { padding-left: .7rem; border-left: 2px solid var(--ligne); }

/* Titre de la leçon en cours, sous le lecteur. */
.lecteur-titre {
    margin: .8rem 0 0; font-weight: 600; font-size: .95rem; color: var(--encre);
}
.lecteur-titre:empty { display: none; }

/* Encart examen */
.carte-examen { margin-top: 1.5rem; }
.carte-examen h3 { display: flex; align-items: center; gap: .5rem; color: var(--bleu-700); }
.carte-examen p { color: var(--doux); font-size: .92rem; margin: .6rem 0 1rem; }
.badge-score {
    background: var(--bleu-050); border: 1px solid var(--bleu-100); color: var(--bleu-700);
    border-radius: var(--radius-s); padding: .55rem .8rem; font-size: .88rem; margin-bottom: 1rem; text-align: center;
}

/* ========================= Cartes packs ========================= */
.onglets-cible { display: inline-flex; margin: 0 auto 2.5rem; gap: .3rem; background: #fff; padding: .35rem; border: 1px solid var(--ligne); border-radius: 999px; box-shadow: var(--ombre-sm); }
.onglets-wrap { text-align: center; }
.onglets-cible a { padding: .55rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--doux); display: inline-flex; align-items: center; gap: .45rem; }
.onglets-cible a:hover { color: var(--bleu-600); }
.onglets-cible a.actif { background: var(--bleu-600); color: #fff; }
.onglets-cible a.actif .icone { color: #fff; }
.packs-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 1.8rem; align-items: stretch; }
.carte-pack {
    background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius); box-shadow: var(--ombre-sm);
    padding: 2rem 1.8rem; display: flex; flex-direction: column; position: relative;
    transition: transform var(--transition), box-shadow var(--transition);
}
.carte-pack:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }
.carte-pack.populaire { border-color: var(--bleu-500); box-shadow: 0 0 0 1px var(--bleu-500), var(--ombre); }
.ruban {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--bleu-600); color: #fff; font-size: .7rem; font-weight: 700;
    padding: .3rem .9rem; border-radius: 999px; letter-spacing: .03em; text-transform: uppercase;
}
.carte-pack h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.carte-pack .desc { color: var(--doux); font-size: .9rem; margin-bottom: 1.3rem; min-height: 2.6rem; }
.pack-prix { font-size: 2.6rem; font-weight: 800; color: var(--encre); line-height: 1; letter-spacing: -.02em; }
/* Symbole monétaire en exposant. Il ne fait plus un caractère mais
   jusqu'à quatre (« FCFA ») : d'où la taille légèrement réduite et
   l'espace qui l'écarte du montant, sans quoi « 13 500FCFA » se lirait
   comme un seul bloc. */
.pack-prix .euro { font-size: 1.1rem; font-weight: 700; vertical-align: super; margin-left: .12em; }
.pack-note { color: var(--doux); font-size: .85rem; margin-bottom: 1.5rem; }
/* Packs entreprise : le nombre de places est le vrai critère de choix,
   il mérite d'être lu avant la liste des avantages.                  */
.pack-places {
    display: flex; align-items: center; gap: .6rem;
    background: var(--bleu-050); border: 1px solid var(--bleu-100);
    border-radius: var(--radius-s);
    padding: .7rem .85rem; margin: -.7rem 0 1.5rem;
    font-size: .87rem; color: var(--texte);
}
.pack-places .icone { color: var(--bleu-600); flex-shrink: 0; }
.pack-places strong { color: var(--encre); }
.pack-avantages { list-style: none; margin-bottom: 1.7rem; }
.pack-avantages li { padding: .5rem 0; font-size: .91rem; display: flex; gap: .55rem; align-items: flex-start; border-top: 1px solid var(--ligne); color: var(--texte); }
.pack-avantages li .icone { color: var(--bleu-600); width: 18px; height: 18px; margin-top: 1px; }
.carte-pack .btn { margin-top: auto; }
.packs-note { text-align: center; color: var(--doux); margin-top: 2.5rem; font-size: .9rem; }
.packs-note a { color: var(--bleu-600); font-weight: 600; }

/* ============================ Formulaires ======================= */
.auth-wrap { padding: 4rem 0 5rem; }
.auth-carte { background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius); box-shadow: var(--ombre); max-width: 460px; margin: 0 auto; padding: 2.6rem; }
.auth-carte h1 { font-size: 1.55rem; margin-bottom: .35rem; text-align: center; }
.auth-carte .sous { text-align: center; color: var(--doux); margin-bottom: 1.8rem; font-size: .92rem; }
.champ { margin-bottom: 1.1rem; }
.champ label { display: block; font-weight: 600; font-size: .86rem; color: var(--encre); margin-bottom: .4rem; }
.champ input, .champ select, .champ textarea {
    width: 100%; padding: .72rem .9rem; border: 1.5px solid var(--ligne); border-radius: var(--radius-s);
    font-size: .95rem; font-family: inherit; color: var(--encre); background: #fff; transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
    outline: none; border-color: var(--bleu-500); box-shadow: 0 0 0 3px var(--bleu-100);
}
.champ textarea { resize: vertical; }
.type-toggle { display: flex; gap: .6rem; margin-bottom: 1.1rem; }
.type-toggle label {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .7rem; border: 1.5px solid var(--ligne); border-radius: var(--radius-s);
    cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--texte); transition: all var(--transition);
}
.type-toggle input { display: none; }
.type-toggle label:has(input:checked) { border-color: var(--bleu-500); background: var(--bleu-050); color: var(--bleu-700); }
.alerte { background: var(--rouge-050); color: var(--rouge); border: 1px solid #f2c4c4; padding: .85rem 1rem; border-radius: var(--radius-s); font-size: .9rem; margin-bottom: 1.2rem; }
.alerte ul { margin: 0; padding-left: 1.1rem; }
.auth-bas { text-align: center; margin-top: 1.4rem; font-size: .9rem; color: var(--doux); }
.auth-bas a { color: var(--bleu-600); font-weight: 600; }

/* ----- Connexion via Google ----- */
.auth-separateur { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 1.1rem; }
.auth-separateur::before, .auth-separateur::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.auth-separateur span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); }
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: .65rem;
    width: 100%; padding: .8rem 1rem;
    background: #fff; color: var(--encre);
    border: 1px solid var(--ligne); border-radius: var(--radius-s);
    font-size: .95rem; font-weight: 600; text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
}
.btn-google:hover { background: var(--bleu-050); border-color: var(--bleu-500); }

/* Bouton Google Identity Services. Il est rendu par Google dans un
   cadre isolé, de largeur fixe : on se contente de le centrer et de
   l'empêcher de déborder de la carte sur un écran étroit. */
.google-bouton {
    display: flex; justify-content: center;
    max-width: 100%; overflow: hidden;
    margin-bottom: .5rem;
}
.google-bouton > div { max-width: 100%; }
.auth-note { text-align: center; margin-top: .6rem; font-size: .8rem; color: var(--doux); }
.champ-entreprise { display: none; }

/* =========================== CTA ================================ */
.cta { background: linear-gradient(150deg, var(--bleu-800), var(--bleu-600)); color: #fff; border-radius: var(--radius); padding: 3.2rem 2rem; text-align: center; margin-top: 3.5rem; }
.cta h2 { color: #fff; font-size: 1.7rem; margin-bottom: .5rem; }
.cta p { color: rgba(255,255,255,.88); margin-bottom: 1.6rem; }

/* ============================ Examen QCM ======================== */
.quiz-hero { background: linear-gradient(150deg, var(--bleu-900) 0%, var(--bleu-700) 100%); color: #fff; padding: 3rem 0; text-align: center; }
.quiz-hero .fil-ariane { justify-content: flex-start; }
.quiz-hero .eyebrow { color: #9ec7ef; }
.quiz-hero h1 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin: .5rem 0; }
.quiz-hero p { color: rgba(255,255,255,.9); }
.quiz-hero.ok { background: linear-gradient(150deg, #12694a 0%, var(--bleu-700) 100%); }
.quiz-hero.ko { background: linear-gradient(150deg, #8a5a1c 0%, var(--bleu-800) 100%); }

.quiz-question { background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius); box-shadow: var(--ombre-sm); padding: 1.7rem; margin-bottom: 1.3rem; border-left: 3px solid var(--bleu-500); }
.quiz-numero { font-size: .78rem; font-weight: 700; color: var(--bleu-600); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.quiz-question h3 { font-size: 1.08rem; margin-bottom: 1rem; }
.quiz-choix { display: flex; flex-direction: column; gap: .55rem; }
.quiz-option { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1.5px solid var(--ligne); border-radius: var(--radius-s); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.quiz-option:hover { border-color: var(--bleu-500); background: var(--bleu-050); }
.quiz-option input { accent-color: var(--bleu-600); width: 18px; height: 18px; }
.quiz-option:has(input:checked) { border-color: var(--bleu-500); background: var(--bleu-050); }

.quiz-question.q-correct { border-left-color: var(--vert); }
.quiz-question.q-faux { border-left-color: var(--rouge); }
.quiz-option.resultat { cursor: default; justify-content: space-between; }
.quiz-option.resultat:hover { border-color: var(--ligne); background: #fff; }
.quiz-option.resultat.bonne { border-color: var(--vert); background: var(--vert-050); }
.quiz-option.resultat.mauvaise { border-color: var(--rouge); background: var(--rouge-050); }
.quiz-option .marque { font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.quiz-option .marque .icone { width: 15px; height: 15px; }
.quiz-option.bonne .marque { color: var(--vert-texte); }
.quiz-option.mauvaise .marque { color: var(--rouge); }
.tag-ok { background: var(--vert-texte); color: #fff; padding: .12rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.tag-ko { background: var(--rouge); color: #fff; padding: .12rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }

.resultat-anneau { width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 1rem; background: rgba(255,255,255,.14); border: 5px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; }
.resultat-pourcent { font-size: 1.9rem; font-weight: 800; }

/* ====================== Espace / Progression ==================== */
.prog-resume {
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius);
    box-shadow: var(--ombre-sm); padding: 2rem; margin-bottom: 2.5rem;
}
.prog-anneau {
    --p: 0;
    width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(var(--bleu-600) calc(var(--p) * 1%), var(--bleu-100) 0);
    display: flex; align-items: center; justify-content: center;
}
.prog-anneau span {
    width: 88px; height: 88px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800; color: var(--bleu-700);
}
.prog-resume-txt { flex: 1; min-width: 240px; }
.prog-resume-txt h2 { font-size: 1.4rem; margin-bottom: .3rem; }
.prog-resume-txt p { color: var(--doux); font-size: .92rem; margin-bottom: 1rem; }
.prog-barre { height: 10px; background: var(--bleu-100); border-radius: 999px; overflow: hidden; }
.prog-barre span { display: block; height: 100%; background: linear-gradient(90deg, var(--bleu-500), var(--bleu-700)); border-radius: 999px; }

.prog-section-titre { font-size: 1.3rem; margin: 0 0 1.3rem; }
.prog-sous-titre {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1.02rem; color: var(--encre); margin: 0 0 1rem;
}
.prog-sous-titre .icone { color: var(--bleu-600); }
.form-demande { max-width: 620px; }
.prog-liste { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 3rem; }
.prog-module {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius-s);
    box-shadow: var(--ombre-sm); padding: 1rem 1.2rem;
}
.prog-module .num-module { flex-shrink: 0; }
.prog-module-titre { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.prog-module-titre strong { color: var(--encre); }
.prog-score { font-size: .82rem; color: var(--doux); }
.prog-action { margin-left: auto; }

/* Le module en cours se détache du reste de la liste : liseré vert à
   gauche, comme un signet posé sur l'étape où l'on en est.           */
.prog-module-actif {
    border-color: rgba(33, 163, 102, .38);
    box-shadow: 0 2px 14px rgba(33, 163, 102, .12);
    position: relative;
    padding-left: 1.5rem;
}
.prog-module-actif::before {
    content: "";
    position: absolute; left: 0; top: 10px; bottom: 10px;
    width: 3px; border-radius: 0 999px 999px 0;
    background: var(--selection);
}
.prog-score-actif { color: var(--vert-texte); font-weight: 600; }

/* ================= Modules hors formule ==========================
   Un module verrouillé reste visible et lisible : c'est le programme
   qu'on achète. Il s'efface juste d'un cran.
   ================================================================ */
.carte-verrouillee { border-style: dashed; box-shadow: none; }
.carte-verrouillee .video-wrap { opacity: .45; filter: grayscale(1); }
.carte-verrouillee:hover { transform: none; }

.badge-verrou {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 700;
    color: var(--doux); background: var(--fond);
    border: 1px solid var(--ligne); border-radius: 999px;
    padding: .2rem .6rem;
}

/* Bandeau de rappel au-dessus du programme. */
.bandeau-acces {
    display: flex; align-items: flex-start; gap: .6rem;
    background: var(--bleu-050); border: 1px solid var(--bleu-100);
    border-radius: var(--radius-s);
    padding: .9rem 1.1rem; margin-bottom: 2rem;
    font-size: .9rem; color: var(--texte);
}
.bandeau-acces .icone { color: var(--bleu-600); flex-shrink: 0; margin-top: 2px; }
.bandeau-acces a { color: var(--bleu-600); font-weight: 600; margin-left: .3rem; }

/* Ligne de progression verrouillée. */
.prog-module-verrouille { background: var(--fond); border-style: dashed; box-shadow: none; }
.prog-module-verrouille .prog-module-titre strong { color: var(--doux); }

/* ==================== Souscription d'un pack =====================
   Récapitulatif figé à gauche, les trois chemins empilés à droite :
   le client compare sans perdre de vue ce qu'il achète.
   ================================================================ */
.souscription-grille {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 2rem;
    align-items: start;
}
.souscription-resume {
    background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius);
    box-shadow: var(--ombre-sm); padding: 1.8rem;
    position: sticky; top: 90px;
}
.souscription-resume h2 { font-size: 1.1rem; margin-bottom: 1.2rem; }

.resume-ligne {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .6rem 0; border-top: 1px solid var(--ligne);
    font-size: .9rem; color: var(--doux);
}
.resume-ligne strong { color: var(--encre); text-align: right; }
.resume-ligne:first-of-type { border-top: 0; }
.resume-total { padding-bottom: 1rem; }
.resume-total span { font-weight: 600; color: var(--encre); }
.resume-total strong {
    font-family: var(--mono); font-size: 1.5rem; color: var(--bleu-700);
    font-variant-numeric: tabular-nums;
}

.souscription-chemins { display: flex; flex-direction: column; gap: 1.2rem; }

.chemin-carte {
    background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius);
    box-shadow: var(--ombre-sm); padding: 1.6rem 1.8rem;
}
.chemin-entete { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; }
.chemin-numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%; background: var(--bleu-050); color: var(--bleu-700);
    font-family: var(--mono); font-weight: 700; font-size: .9rem;
}
.chemin-entete h2 { font-size: 1.12rem; margin-bottom: .2rem; }
.chemin-entete p { color: var(--doux); font-size: .9rem; }
.chemin-note { color: var(--doux); font-size: .88rem; margin-bottom: 1.1rem; }
.chemin-indispo {
    display: flex; align-items: flex-start; gap: .5rem;
    color: var(--doux); font-size: .88rem;
    background: var(--fond); border: 1px dashed var(--ligne);
    border-radius: var(--radius-s); padding: .8rem 1rem;
}
.chemin-indispo .icone { flex-shrink: 0; margin-top: 2px; }

/* Choix du moyen de paiement : des blocs cliquables, pas une liste. */
.passerelles { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.2rem; }
.passerelle {
    display: flex; align-items: flex-start; gap: .75rem;
    border: 1.5px solid var(--ligne); border-radius: var(--radius-s);
    padding: .85rem 1rem; cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.passerelle:hover { border-color: var(--bleu-500); }
.passerelle input { margin-top: .25rem; accent-color: var(--bleu-600); flex-shrink: 0; }
.passerelle:has(input:checked) { border-color: var(--bleu-600); background: var(--bleu-050); }
.passerelle-corps { display: flex; flex-direction: column; gap: .15rem; }
.passerelle-corps strong { color: var(--encre); font-size: .93rem; }
.passerelle-corps span { color: var(--doux); font-size: .84rem; line-height: 1.45; }

/* Trois chemins annoncés sous le bouton d'une carte de pack. */
.pack-chemins { list-style: none; margin: .9rem 0 0; display: grid; gap: .3rem; }
.pack-chemins li {
    display: flex; align-items: center; gap: .4rem;
    font-size: .8rem; color: var(--doux);
}
.pack-chemins .icone { color: var(--selection); flex-shrink: 0; }
.pack-mention { margin-top: .8rem; font-size: .82rem; color: var(--doux); text-align: center; }
.pack-mention a { color: var(--bleu-600); font-weight: 600; }

/* ---- Écran de paiement simulé et page de retour ----------------- */
.simulation-cadre, .retour-cadre {
    max-width: 520px; margin-inline: auto;
    background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius);
    box-shadow: var(--ombre); padding: 2.2rem;
}
.simulation-banniere {
    display: flex; align-items: flex-start; gap: .55rem;
    background: #fdf3e3; color: #a05a12; border: 1px solid #f0dcb8;
    border-radius: var(--radius-s); padding: .75rem .9rem;
    font-size: .85rem; margin-bottom: 1.6rem;
}
.simulation-banniere .icone { flex-shrink: 0; margin-top: 2px; }
.simulation-cadre h1 { font-size: 1.35rem; margin: .3rem 0 1.2rem; }
.simulation-montant {
    font-family: var(--mono); font-size: 2.3rem; font-weight: 700;
    color: var(--encre); letter-spacing: -.02em; margin-bottom: 1.4rem;
}
.simulation-montant span { font-size: 1.1rem; color: var(--doux); }
.simulation-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.8rem; }

.retour-cadre { text-align: center; }
.retour-cadre h1 { font-size: 1.5rem; margin-bottom: .8rem; }
.retour-cadre > p { color: var(--texte); margin-bottom: 1.6rem; }
.retour-pastille {
    display: inline-flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; border-radius: 50%; margin-bottom: 1.2rem;
}
.retour-succes { background: var(--vert-050); color: #12694a; }
.retour-neutre { background: var(--fond); color: var(--doux); }
.retour-echec  { background: var(--rouge-050); color: var(--rouge); }
.retour-details { text-align: left; margin: 1.6rem 0; }

@media (max-width: 900px) {
    .souscription-grille { grid-template-columns: 1fr; }
    .souscription-resume { position: static; }
}

/* ================= Espace garant entreprise ======================
   La licence en carte d'en-tête, puis l'équipe en lignes : mêmes
   briques que la progression, une colonne de plus.
   ================================================================ */
.licence-carte {
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius);
    box-shadow: var(--ombre-sm); padding: 1.8rem 2rem; margin-bottom: 2.5rem;
}
.licence-identite { flex: 1; min-width: 260px; }
.licence-identite h2 { font-size: 1.35rem; margin: .35rem 0 .3rem; }
.licence-identite p { color: var(--doux); font-size: .92rem; }

.licence-chiffres { display: flex; gap: 0; flex-wrap: wrap; }
.licence-chiffres > div {
    padding: 0 1.6rem;
    border-right: 1px solid var(--ligne);
    text-align: center;
}
.licence-chiffres > div:last-child { border-right: 0; padding-right: 0; }
.licence-chiffres > div:first-child { padding-left: 0; }
.licence-chiffres .chiffre {
    display: block;
    font-family: var(--mono);
    font-size: 1.7rem; font-weight: 700; color: var(--bleu-700);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.licence-chiffres .libelle {
    font-family: var(--mono); font-size: .68rem; color: var(--doux);
    text-transform: uppercase; letter-spacing: .09em;
}

/* Sans licence, la carte invite à en prendre une. */
.licence-vide { align-items: flex-start; gap: 1.2rem; }
.licence-vide .puce {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 12px; background: var(--bleu-050); color: var(--bleu-600);
}
.licence-vide h2 { font-size: 1.2rem; margin-bottom: .4rem; }
.licence-vide p { color: var(--doux); font-size: .93rem; margin-bottom: 1.1rem; max-width: 60ch; }

/* Une ligne de collaborateur porte une jauge, d'où le gabarit propre. */
.equipe-ligne { gap: 1.2rem; }
.equipe-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%; background: var(--bleu-050); color: var(--bleu-600);
}
.equipe-progression { width: 190px; flex-shrink: 0; }
.equipe-progression-txt {
    display: flex; justify-content: space-between; gap: .6rem;
    font-family: var(--mono); font-size: .7rem; color: var(--doux);
    margin-bottom: .35rem;
}
.equipe-progression .prog-barre { height: 6px; }
.equipe-date { font-size: .78rem; color: var(--doux); white-space: nowrap; }

/* Formulaire posé sur une carte, comme le reste des blocs de contenu. */
.carte-formulaire {
    background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius);
    box-shadow: var(--ombre-sm); padding: 1.8rem;
}
.form-aide {
    font-size: .9rem; color: var(--doux);
    margin-bottom: 1.4rem; padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--ligne);
}
.form-aide strong { color: var(--encre); }

@media (max-width: 820px) {
    .equipe-progression { width: 100%; order: 3; }
    .equipe-date { display: none; }
    .licence-chiffres > div { padding: 0 1.1rem; }
}

.prog-lien-detail { margin: -1.4rem 0 0; }
.prog-lien-detail a {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .92rem; font-weight: 600; color: var(--bleu-600);
}
.prog-lien-detail a:hover { color: var(--bleu-700); }
.statut { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; padding: .3rem .8rem; border-radius: 999px; }
.statut-valide { background: var(--vert-050); color: #12694a; }
.statut-en_cours { background: #fdf3e3; color: #a05a12; }
.statut-non_commence { background: #eef1f5; color: var(--doux); }

/* Sessions live (entreprise) */
.resa-liste { display: flex; flex-direction: column; gap: .6rem; margin-top: .8rem; }
.resa-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border: 1px solid var(--ligne); border-radius: var(--radius-s); background: var(--bleu-050); }
.resa-item strong { display: block; color: var(--encre); }
.resa-meta { font-size: .84rem; color: var(--doux); }
.creneaux-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.creneau-carte { background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius); box-shadow: var(--ombre-sm); padding: 1.6rem; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
.creneau-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.creneau-theme { align-self: flex-start; background: var(--bleu-100); color: var(--bleu-700); font-size: .74rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; margin-bottom: .7rem; }
.creneau-carte h3 { font-size: 1.12rem; margin-bottom: .9rem; }
.creneau-infos { list-style: none; margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.creneau-infos li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--texte); }
.creneau-infos li .icone { color: var(--bleu-600); }
.creneau-carte form { margin-top: auto; }

/* ====================== Bande de références =====================
   Les entreprises où les formateurs ont exercé. Alignée à gauche et
   non centrée : c'est une mention factuelle en bas de page, pas une
   vitrine. Elle se pose juste au-dessus du pied de page, sur un
   filet, comme une dernière ligne de bas de bilan.
   ================================================================ */
.references {
    background: var(--surface);
    border-top: 1px solid var(--ligne);
    padding: 2rem 0 2.2rem;
}
.references-titre {
    font-family: var(--mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--doux);
    margin-bottom: 1.2rem;
}
.references-liste {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1rem 2.8rem;
    flex-wrap: wrap;
}
/* Les logos arrivent avec des couleurs, des poids et des formats très
   différents. On les ramène au gris du texte secondaire : aucun ne
   prend le pas sur les autres, et la bande reste calme.            */
.references-liste img {
    display: block;
    height: 32px; width: auto; max-width: 170px;
    object-fit: contain;
    filter: grayscale(1) opacity(.6);
    /* Tous les logos n'arrivent pas avec un fond transparent. Sur une
       bande blanche, le mode « multiply » fait disparaître les fonds
       clairs sans rien retirer au tracé : un PNG opaque se comporte
       comme un PNG détouré.                                          */
    mix-blend-mode: multiply;
    transition: filter var(--transition);
}
/* Chaque vignette mène au site de l'entreprise. Le logo reprend ses
   couleurs au survol comme au focus clavier : les deux gestes
   donnent le même signal.                                          */
.references-liste a {
    display: block;
    border-radius: var(--radius-s);
}
.references-liste a:hover img,
.references-liste a:focus-visible img { filter: grayscale(0) opacity(1); }
.references-liste a:focus-visible { outline-offset: 4px; }

/* Repli tant que le fichier du logo n'a pas été déposé. */
.references-nom {
    font-size: 1.05rem; font-weight: 700;
    letter-spacing: -.01em; color: var(--doux);
    transition: color var(--transition);
}
.references-liste a:hover .references-nom,
.references-liste a:focus-visible .references-nom { color: var(--encre); }

@media (max-width: 620px) {
    .references-liste { gap: 1rem 1.8rem; }
    .references-liste img { height: 26px; }
}

/* =========================== Footer ============================= */
footer { background: var(--bleu-900); color: rgba(255,255,255,.72); padding: 2.8rem 0; font-size: .9rem; }
footer .footer-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
footer strong { color: #fff; font-weight: 600; }

/* ===================================================================
   MOUVEMENT
   Trois gestes seulement : l'ouverture du hero (déjà définie plus
   haut), la révélation au défilement, et les micro-réactions au
   survol. Rien d'autre ne bouge : c'est ce qui distingue une mise en
   mouvement maîtrisée d'une accumulation d'effets.
   =================================================================== */

/* État initial des éléments révélés au défilement. La classe est posée
   par motion.js : sans JavaScript, le contenu reste visible. */
.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
}
[data-reveal].vu {
    opacity: 1;
    transform: none;
    transition: opacity .55s var(--sortie), transform .55s var(--sortie);
    /* Décalage en cascade, posé en style inline par motion.js. */
    transition-delay: var(--retard, 0ms);
}

/* Chiffres animés : la chasse fixe évite que la largeur saute pendant
   le décompte. */
.compteur { font-variant-numeric: tabular-nums; }

/* ------------------------- Focus clavier --------------------------
   Le focus reprend la sélection du tableur : même vert, même logique.
   Un seul geste visuel pour « voici l'élément actif ».               */
:focus-visible {
    outline: 2px solid var(--selection);
    outline-offset: 2px;
    border-radius: 3px;
}
.hero :focus-visible { outline-color: #6ee7a8; }

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
    outline: none;
    border-color: var(--selection);
    box-shadow: 0 0 0 3px var(--selection-050);
}

/* Enfoncement des boutons : retour tactile discret. */
.btn:active { transform: translateY(0); }
.btn-mini:active { transform: translateY(1px); }

/* ------------------------ Mouvement réduit ------------------------
   Préférence système respectée : plus aucune translation ni
   animation, mais le contenu reste évidemment visible.              */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .js-reveal [data-reveal] { opacity: 1; transform: none; }
    .hero-lueur, .hero-colonnes-douces { opacity: 1; }
    .hero h1 .mot-cle::after { transform: scaleX(1); }
    .btn:hover, .carte-module:hover, .carte-pack:hover, .creneau-carte:hover { transform: none; }
}

/* ===================================================================
   BACK-OFFICE ADMINISTRATEUR
   =================================================================== */
.admin-body { background: #eef2f7; }
.admin-layout { display: flex; min-height: 100vh; }

.admin-sidebar { width: 250px; background: var(--bleu-900); color: #fff; display: flex; flex-direction: column; padding: 1.5rem 1rem; position: sticky; top: 0; height: 100vh; }
.admin-logo { display: block; background: #fff; border-radius: 10px; padding: .55rem .7rem; margin-bottom: 2rem; }
.admin-logo img { display: block; height: 40px; width: auto; }
.admin-menu { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.admin-menu a { display: flex; align-items: center; gap: .7rem; padding: .72rem 1rem; border-radius: var(--radius-s); font-weight: 500; font-size: .93rem; color: rgba(255,255,255,.82); transition: background var(--transition), color var(--transition); }
.admin-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-menu a.actif { background: var(--bleu-600); color: #fff; }
.admin-menu a .icone { width: 18px; height: 18px; }
.admin-sidebar-bas { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1rem; }
.admin-retour { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.72); font-size: .9rem; }
.admin-retour:hover { color: #fff; }

.admin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.admin-topbar { background: #fff; border-bottom: 1px solid var(--ligne); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.admin-badge { background: var(--bleu-100); color: var(--bleu-700); font-weight: 700; font-size: .78rem; padding: .35rem .9rem; border-radius: 999px; letter-spacing: .02em; }
.admin-topuser { display: flex; align-items: center; gap: 1rem; font-size: .9rem; color: var(--doux); }
.admin-topuser strong { color: var(--encre); }
.admin-contenu { padding: 2rem; flex: 1; }
.admin-titre { font-size: 1.6rem; margin-bottom: .3rem; letter-spacing: -.02em; }
.admin-soustitre { color: var(--doux); margin-bottom: 2rem; }
.admin-soustitre a { color: var(--bleu-600); font-weight: 600; }
.admin-entete-page { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 1.4rem; margin-bottom: 2.5rem; }
.stat-carte { background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius); box-shadow: var(--ombre-sm); padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.stat-carte .stat-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--bleu-100); color: var(--bleu-600); display: flex; align-items: center; justify-content: center; }
.stat-chiffre { font-size: 2.1rem; font-weight: 800; color: var(--encre); letter-spacing: -.02em; }
.stat-libelle { color: var(--doux); font-size: .88rem; }
.admin-actions-rapides { display: flex; gap: .7rem; flex-wrap: wrap; }

.admin-carte { background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius); box-shadow: var(--ombre-sm); padding: 1.5rem; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-table th, .admin-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.admin-table th { color: var(--doux); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .col-actions { text-align: right; white-space: nowrap; }
.lien-video { color: var(--bleu-600); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.lien-video .icone { width: 15px; height: 15px; }

/* Liste déroulante posée directement dans un tableau, sans bloc .champ. */
.admin-select {
    flex: 1; min-width: 0;
    padding: .4rem .6rem;
    border: 1.5px solid var(--ligne); border-radius: 7px;
    background: #fff; color: var(--texte);
    font-size: .84rem; font-family: inherit;
}
.admin-select:focus { outline: none; border-color: var(--bleu-500); }

.btn-mini { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: 7px; font-size: .82rem; font-weight: 600; border: 1.5px solid var(--ligne); background: #fff; color: var(--texte); cursor: pointer; transition: all var(--transition); }
.btn-mini:hover { border-color: var(--bleu-500); color: var(--bleu-600); }
.btn-mini .icone { width: 14px; height: 14px; }
.btn-mini-danger { color: var(--rouge); }
.btn-mini-danger:hover { border-color: var(--rouge); background: var(--rouge-050); color: var(--rouge); }

.admin-flash { background: var(--vert-050); color: #12694a; border: 1px solid #bfe6d0; padding: .85rem 1.1rem; border-radius: var(--radius-s); font-weight: 500; margin-bottom: 1.5rem; }
.tag-admin { background: var(--bleu-600); color: #fff; padding: .18rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.tag-membre { background: #eaeef3; color: var(--doux); padding: .18rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 600; }
.pastille-correcte { color: var(--vert-texte); font-weight: 700; }

/* Champ « bonne réponse » du formulaire de question */
.reponse-ligne { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.reponse-ligne input[type="text"] { flex: 1; }
.reponse-ligne .radio-correcte { display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--doux); white-space: nowrap; }
.reponse-ligne .radio-correcte input { width: 17px; height: 17px; accent-color: var(--vert); }

/* ========================= Responsive =========================== */
@media (max-width: 620px) {
    /* Le hero est traité dans sa propre requête à 720px, plus haut :
       ne rien redéfinir ici sous peine d'écraser la mise en colonnes
       des chiffres (bordures au lieu d'un simple gap). */
    .hero .stats > div {
        padding-right: 1rem; margin-right: 1rem;
        padding-top: .9rem;
    }
    .hero .stats .chiffre { font-size: 1.6rem; }
    .modules-grille { grid-template-columns: 1fr; }
    .nav-liens { gap: 1rem; }
    footer .footer-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 820px) {
    .admin-layout { flex-direction: column; }
    .admin-sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .admin-logo { margin-bottom: 0; }
    .admin-menu { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; }
    .admin-sidebar-bas { border-top: 0; padding-top: 0; }
}

/* =====================================================================
   Devise et WhatsApp
   ===================================================================== */

/* ---- Sélecteur de devise (barre de navigation) --------------------
   Un groupe de boutons plutôt qu'une liste déroulante : à deux devises,
   le choix se lit d'un coup d'œil et se fait en un clic. Le bouton actif
   n'est pas signalé par la seule couleur, mais aussi par sa graisse et
   son fond, pour rester lisible sans perception fine des contrastes. */
.devise-choix {
    display: inline-flex; align-items: center; gap: .15rem;
    padding: .2rem .3rem;
    border: 1px solid var(--ligne); border-radius: 999px;
    background: var(--surface);
}
.devise-icone { display: inline-flex; color: var(--doux); margin: 0 .15rem 0 .2rem; }
.devise-icone .icone { width: 15px; height: 15px; }
.devise-option {
    border: 0; background: transparent; cursor: pointer;
    padding: .28rem .6rem; border-radius: 999px;
    font-family: inherit; font-size: .82rem; font-weight: 600;
    color: var(--doux); transition: all var(--transition);
    white-space: nowrap;
}
.devise-option:hover { color: var(--bleu-600); background: var(--bleu-050); }
.devise-option.actif { background: var(--bleu-600); color: #fff; }
.devise-option:focus-visible { outline: 2px solid var(--selection); outline-offset: 2px; }

/* Rappel du prix de référence sous le montant converti. */
.resume-conversion { font-size: .82rem; }
.resume-conversion strong { font-weight: 600; color: var(--doux); }

/* ---- WhatsApp -----------------------------------------------------
   Le vert de la marque n'est utilisé QUE pour ce canal : il ne rejoint
   pas la palette sémantique du site, où le vert dit « réussite ». */
:root {
    --whatsapp:       #128c7e;   /* 4,54:1 sur blanc : convient au texte */
    --whatsapp-fonce: #0f7268;
    --whatsapp-050:   #e9f5f3;
}

.btn-whatsapp {
    background: var(--whatsapp); color: #fff; border: 1.5px solid var(--whatsapp);
}
.btn-whatsapp:hover { background: var(--whatsapp-fonce); border-color: var(--whatsapp-fonce); color: #fff; }

.lien-whatsapp {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--whatsapp); font-weight: 600;
}
.lien-whatsapp:hover { color: var(--whatsapp-fonce); }

/* Dans le pied de page, sombre, le vert de marque n'aurait pas le
   contraste requis : on y passe au blanc, la seule icône portant
   l'identification. */
footer .lien-whatsapp { color: #fff; }
footer .lien-whatsapp:hover { color: rgba(255,255,255,.8); }
footer .footer-contact { margin: 0; }

.flash-action { margin: -1rem 0 2rem; }
.chemin-note-aide { display: flex; align-items: flex-start; gap: .45rem; margin-top: 1rem; }
.chemin-note-aide .icone { flex: 0 0 auto; margin-top: .15rem; color: var(--whatsapp); }
.retour-aide { margin: 1.4rem 0 0; font-size: .9rem; color: var(--doux); }
.retour-aide .lien-whatsapp { margin-left: .3rem; }

/* Mention « facultatif » et aide de saisie, sur le formulaire de devis. */
.champ-option {
    font-weight: 500; font-size: .78rem; color: var(--doux);
    background: var(--fond); border: 1px solid var(--ligne);
    padding: .05rem .4rem; border-radius: 999px; margin-left: .35rem;
}
.champ-aide { font-size: .8rem; color: var(--doux); margin: .35rem 0 0; }

/* Pastille flottante de contact. Ancrée en bas à droite, au-dessus du
   contenu mais sous les éventuelles couches modales. */
.whatsapp-flottant {
    position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.1rem; border-radius: 999px;
    background: var(--whatsapp); color: #fff;
    font-size: .88rem; font-weight: 600;
    box-shadow: var(--ombre-lg);
    transition: transform var(--transition), background var(--transition);
}
.whatsapp-flottant:hover { background: var(--whatsapp-fonce); color: #fff; transform: translateY(-2px); }
.whatsapp-flottant:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 620px) {
    /* Sur petit écran, la pastille se réduit à son glyphe : le libellé
       mangerait la largeur utile du contenu. L'aria-label du lien porte
       alors seul l'intitulé, et reste annoncé par les lecteurs d'écran. */
    .whatsapp-flottant span { display: none; }
    .whatsapp-flottant { padding: .8rem; right: .9rem; bottom: .9rem; }
    .devise-choix { order: 3; }
}

/* Le mouvement de la pastille est purement décoratif : on le retire
   pour qui demande à réduire les animations. */
@media (prefers-reduced-motion: reduce) {
    .whatsapp-flottant { transition: background var(--transition); }
    .whatsapp-flottant:hover { transform: none; }
}

/* ---- Page « Paramètres » du back-office ---------------------------
   Des cartes de réglage, chacune avec son titre et son explication : un
   champ de configuration sans phrase qui dise à quoi il sert se règle au
   hasard, puis ne se retouche plus. */
.admin-carte-titre {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1.05rem; margin: 0 0 .4rem; color: var(--encre);
}
.admin-carte-titre .icone { color: var(--bleu-600); }
.admin-carte-aide { color: var(--doux); font-size: .89rem; margin: 0 0 1.3rem; max-width: 62ch; }
.admin-carte-aide code {
    background: var(--fond); border: 1px solid var(--ligne);
    padding: .05rem .35rem; border-radius: 5px; font-size: .92em;
}

/* =====================================================================
   Maintenance
   ===================================================================== */

/* ---- Page d'attente servie aux visiteurs -------------------------- */
.maintenance {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1.2rem; background: var(--fond);
}
.maintenance-cadre {
    background: var(--surface); border: 1px solid var(--ligne);
    border-radius: var(--radius); box-shadow: var(--ombre);
    padding: 2.8rem 2.4rem; max-width: 520px; width: 100%; text-align: center;
}
/* Le logo occupe sa propre ligne : sans cela, l'image et la pastille,
   toutes deux en ligne, se retrouvent côte à côte et se lisent comme un
   seul bloc bancal. */
.maintenance-cadre > img { display: block; margin: 0 auto; }
.maintenance-cadre h1 { font-size: 1.5rem; margin: 0 0 .9rem; color: var(--encre); }
.maintenance-pastille {
    display: flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; border-radius: 50%;
    background: var(--bleu-050); color: var(--bleu-600);
    margin: 1.8rem auto 1.4rem;
}
.maintenance-message { color: var(--texte); line-height: 1.65; margin: 0 0 1.6rem; }
.maintenance-contact { font-size: .9rem; color: var(--doux); margin: 0; }
.maintenance-contact .lien-whatsapp { margin-left: .25rem; }
.maintenance-pied {
    margin: 2rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--ligne);
    font-size: .78rem; color: var(--doux);
}

/* ---- Carte d'état, au back-office --------------------------------- */
/* Le rouge n'annonce pas une erreur mais un site fermé : l'état mérite
   d'être visible dès l'ouverture de la page, sans avoir à lire. */
.maintenance-carte.est-fermee { border-left: 4px solid var(--rouge); }
.maintenance-etat { font-size: .92rem; line-height: 1.6; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--radius-s); }
.maintenance-etat-fermee  { background: var(--rouge-050); color: #8c2f2f; border: 1px solid #f2c4c4; }
.maintenance-etat-ouverte { background: var(--vert-050);  color: #12694a; border: 1px solid #bfe6d0; }

.btn-danger { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.btn-danger:hover { background: #b93a3a; border-color: #b93a3a; color: #fff; }

/* ---- Rappels « site fermé » --------------------------------------- */
/* Bandeau du site public, visible du seul administrateur. */
.bandeau-ferme {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    flex-wrap: wrap;
    background: var(--rouge); color: #fff;
    padding: .55rem 1rem; font-size: .86rem; font-weight: 600;
}
.bandeau-ferme a { color: #fff; text-decoration: underline; font-weight: 700; }
.bandeau-ferme a:hover { color: rgba(255,255,255,.85); }

/* Pastille de la barre du back-office. */
.bandeau-maintenance {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--rouge-050); color: #8c2f2f;
    border: 1px solid #f2c4c4; border-radius: 999px;
    padding: .3rem .5rem .3rem .75rem; margin-left: .8rem;
    font-size: .82rem; font-weight: 600;
}
.bandeau-maintenance span {
    background: var(--rouge); color: #fff;
    padding: .12rem .55rem; border-radius: 999px; font-size: .76rem;
}
.bandeau-maintenance:hover { background: #f8dcdc; color: #8c2f2f; }

/* ---- Tarifs et contenus (back-office) ----------------------------- */
.tarifs-entete {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}

/* Case à cocher accompagnée de son explication : un réglage dont on ne
   comprend pas l'effet se coche au hasard. */
.champ-case { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; font-weight: 500; }
.champ-case input { width: 17px; height: 17px; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--bleu-600); }
.champ-case em { display: block; font-style: normal; font-size: .82rem; color: var(--doux); margin-top: .2rem; }

/* Aperçu du titre d'accueil, mise en valeur du dernier mot comprise. */
.apercu-titre { display: block; margin-top: .35rem; font-size: .95rem; color: var(--encre); }
.apercu-titre strong { color: var(--bleu-600); border-bottom: 2px solid var(--selection); padding-bottom: 1px; }

/* La colonne des prix ne se coupe jamais : « 13 500 FCFA » réparti sur
   trois lignes se lit comme trois nombres différents. La description,
   elle, est bornée pour ne pas manger la largeur des autres colonnes. */
.tarifs-table td:nth-child(2) { white-space: nowrap; }
.tarifs-table td:nth-child(3) { white-space: nowrap; }
.tarifs-table th:first-child, .tarifs-table td:first-child { min-width: 15rem; }
.tarifs-table .tarif-desc {
    display: block; color: var(--doux); font-size: .85em;
    margin-top: .15rem; max-width: 34ch;
}
.tarifs-table .tarif-nom { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tarifs-table .tarif-second { color: var(--doux); font-size: .85em; }

/* ---- Barre d'état du verrou des tarifs ---------------------------- */
/* Gris quand c'est fermé, vert quand l'écriture est ouverte : l'état se
   lit d'un coup d'œil, sans avoir à cliquer pour le découvrir. */
.verrou-barre {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .8rem 1.1rem; margin-bottom: 1.6rem;
    border: 1px solid var(--ligne); border-radius: var(--radius-s);
    background: var(--fond); color: var(--doux); font-size: .89rem;
}
.verrou-barre strong { color: var(--encre); }
.verrou-barre .icone { flex: 0 0 auto; color: var(--doux); }
.verrou-barre.est-ouvert {
    background: var(--vert-050); border-color: #bfe6d0; color: #12694a;
}
.verrou-barre.est-ouvert strong,
.verrou-barre.est-ouvert .icone { color: var(--vert-texte); }

/* ===================================================================
   BACK-OFFICE : chapitres, sommaire et téléversement des vidéos
   =================================================================== */

/* ---- Petits textes d'aide sous un champ --------------------------- */
.champ-aide { font-size: .82rem; color: var(--doux); line-height: 1.5; }
.champ-facultatif {
    font-size: .72rem; font-weight: 500; color: var(--doux);
    text-transform: uppercase; letter-spacing: .04em; margin-left: .3rem;
}
.champ-case {
    display: flex; align-items: center; gap: .45rem;
    font-size: .85rem; color: var(--texte); margin: .4rem 0 .9rem;
    cursor: pointer;
}
.champ-case input { width: auto; margin: 0; }

/* ---- Bloc « vidéo » des formulaires module et leçon ---------------- */
.champ-video {
    border: 1px solid var(--ligne); border-radius: var(--radius-s);
    padding: 1.1rem 1.2rem 1.3rem; margin: 1.6rem 0 .4rem;
    background: var(--bleu-050);
}
.champ-video > legend {
    font-weight: 700; font-size: .8rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--bleu-700); padding: 0 .45rem;
}
.champ-video > .champ-aide { margin: 0 0 1rem; }

/* Le choix du régime se fait entre deux blocs de même poids : aucun des
   deux n'est un repli de l'autre, ils répondent à des besoins distincts. */
.video-regimes { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
@media (min-width: 620px) { .video-regimes { grid-template-columns: 1fr 1fr; } }
.video-regime {
    display: flex; align-items: flex-start; gap: .6rem;
    background: var(--surface); border: 1px solid var(--ligne);
    border-radius: var(--radius-s); padding: .75rem .85rem; cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.video-regime:hover { border-color: var(--bleu-500); }
.video-regime input { width: auto; margin: .15rem 0 0; flex-shrink: 0; }
.video-regime:has(input:checked) {
    border-color: var(--bleu-600); box-shadow: 0 0 0 1px var(--bleu-600);
}
.video-regime strong { display: block; font-size: .88rem; color: var(--encre); }
.video-regime em {
    display: block; font-style: normal; font-size: .78rem;
    color: var(--doux); line-height: 1.45; margin-top: .15rem;
}

.video-volet { background: var(--surface); border-radius: var(--radius-s); padding: 1rem 1.1rem .3rem; }
.video-volet[hidden] { display: none; }

/* État du fichier déjà en place. La variante d'alerte signale le cas
   sournois : une ligne qui référence un fichier absent du stockage,
   c'est-à-dire un lecteur vide côté apprenant. */
.video-etat {
    display: flex; align-items: center; gap: .4rem;
    font-size: .84rem; color: var(--vert-texte);
    background: var(--vert-050); border: 1px solid #bfe6d0;
    border-radius: var(--radius-s); padding: .5rem .7rem; margin: 0 0 .5rem;
}
.video-etat .icone { flex-shrink: 0; }
.video-etat-alerte {
    color: #9a2f2f; background: var(--rouge-050); border-color: #f0c9c9;
}

/* ---- Sommaire du module au back-office ---------------------------- */
.ligne-chapitre td { background: var(--bleu-050); }
.ligne-chapitre strong { color: var(--bleu-800); }
/* Le décrochage rend la hiérarchie lisible dans un tableau, qui est par
   nature plat : sans lui, chapitre et leçon se confondraient. */
.ligne-lecon-fille td:nth-child(2) { padding-left: 1.8rem; }

.etiquette-chapitre,
.etiquette-isolee {
    display: inline-block; margin-left: .5rem;
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; padding: .12rem .4rem; border-radius: 3px;
}
.etiquette-chapitre { background: var(--bleu-100); color: var(--bleu-700); }
.etiquette-isolee { background: var(--fond); color: var(--doux); border: 1px solid var(--ligne); }

/* État de la vidéo d'une leçon : l'information que l'administrateur
   vient chercher en premier sur cette page. */
.etat-video {
    display: inline-block; font-size: .76rem; font-weight: 600;
    padding: .2rem .5rem; border-radius: 3px; white-space: nowrap;
}
.etat-ok       { background: var(--vert-050); color: var(--vert-texte); border: 1px solid #bfe6d0; }
.etat-externe  { background: var(--bleu-050); color: var(--bleu-700);  border: 1px solid var(--bleu-100); }
.etat-vide     { background: var(--fond);     color: var(--doux);      border: 1px solid var(--ligne); }
.etat-manquant { background: var(--rouge-050); color: #9a2f2f;         border: 1px solid #f0c9c9; }

/* ===================================================================
   ÉVALUATIONS : point de contrôle de leçon et examen de module
   =================================================================== */

/* Évaluation de fin de rubrique : le bloc qui FERME le chapitre.
   Elle occupe toute la largeur de la liste, comme les leçons qu'elle
   contrôle, mais ne se lit pas comme l'une d'elles : fond bleuté,
   pastille pleine, flèche de sortie. Une leçon se regarde sur place,
   une évaluation emmène ailleurs.

   Le libellé nomme la rubrique (« Évaluation : Mise en forme ») plutôt
   que sa nature : dans une colonne où plusieurs chapitres se suivent,
   « Évaluation du chapitre » laissait chercher lequel. */
.rubrique-eval { margin-top: .35rem; }
.bloc-eval {
    display: flex; align-items: center; gap: .7rem; width: 100%;
    padding: .65rem .75rem; margin-bottom: .55rem;
    background: var(--bleu-050);
    border: 1px solid var(--bleu-100);
    border-radius: var(--radius-s);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.bloc-eval:hover { border-color: var(--bleu-500); box-shadow: var(--ombre-sm); }
.bloc-eval-puce {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--bleu-600); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.bloc-eval-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bloc-eval-titre {
    font-weight: 600; font-size: .86rem; color: var(--bleu-800);
    line-height: 1.3; overflow-wrap: anywhere;
}
.bloc-eval-etat { font-size: .77rem; color: var(--doux); margin-top: .1rem; }
.bloc-eval-etat strong { color: var(--bleu-700); font-variant-numeric: tabular-nums; }
/* La flèche recule d'un ton : elle indique la sortie, elle n'appelle
   pas le clic à elle seule. Elle avance à l'approche du bloc. */
.bloc-eval-fleche {
    flex-shrink: 0; display: flex; color: var(--bleu-500);
    transition: transform var(--transition);
}
.bloc-eval:hover .bloc-eval-fleche { transform: translateX(2px); }

/* Évaluation déjà passée : le vert dit « c'est fait », pas « c'est
   réussi ». Un point de contrôle raté n'a aucune conséquence, le
   signaler en rouge découragerait sans rien apprendre. */
.bloc-eval.est-fait { background: var(--vert-050); border-color: #bfe6d0; }
.bloc-eval.est-fait:hover { border-color: var(--vert); }
.bloc-eval.est-fait .bloc-eval-puce { background: var(--vert-texte); }
.bloc-eval.est-fait .bloc-eval-titre { color: var(--vert-texte); }
.bloc-eval.est-fait .bloc-eval-etat strong,
.bloc-eval.est-fait .bloc-eval-fleche { color: var(--vert-texte); }

/* En-tête d'une évaluation de leçon : plus sobre que celui de l'examen,
   l'enjeu n'étant pas le même. */
.quiz-hero-lecon { background: linear-gradient(160deg, var(--bleu-800), var(--bleu-900)); }

/* Résultat d'un point de contrôle en demi-teinte : ni réussite ni
   échec, puisqu'il n'y a rien à valider. */
.quiz-hero.neutre { background: linear-gradient(160deg, #3d4756, #16202e); }