/*
 * Jetons du systeme de design « Le cahier clair » (docs/07 v4, DEC-31).
 *
 * Regle de contraste : toute couleur portee en texte est verifiee
 * contre son fond effectif, 4,5:1 courant et 3:1 en texte large.
 * Un seul accent d'action, le sarcelle. L'encre est la couleur des
 * moments de bascule : chrome de l'application, lecteur, sorties.
 */
:root {
    --papier: #FFFDF9;
    --papier-2: #F7F5EF;
    --encre: #171410;
    --ardoise: #5A5344;
    --ligne: #E9E4D8;

    --accent: #0E6B6A;
    --accent-fonce: #094D4C;
    --accent-texte: #0E6B6A;
    --sur-accent: #FFFFFF;
    --accent-p: #DFF1E6;

    --menthe: #DFF1E6;
    --sable: #F6ECD9;
    --peche: #FBE7DC;
    --ambre: #8A6210;

    --ok: #20602C;
    --ok-bg: #DFF1E6;
    --err: #B3261E;
    --err-bg: #FDEAEA;
    --warn: #8A6210;
    --warn-bg: #F6ECD9;
    --info: #094D4C;
    --info-bg: #DFF1E6;

    --r-carte: 20px;
    --r-bouton: 12px;
    --ombre: 0 1px 2px rgba(23, 20, 16, .05), 0 12px 32px rgba(23, 20, 16, .08);

    --police-latin: 'Inter', system-ui, sans-serif;
    --police-arabe: 'Cairo', system-ui, sans-serif;
    --police-donnees: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--police-latin);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--encre);
    -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body { font-family: var(--police-arabe); line-height: 1.5; }

h1, h2, h3 { font-weight: 900; line-height: 1.16; }
[dir="ltr"] h1, [dir="ltr"] h2 { letter-spacing: -0.018em; }

a { color: var(--accent-texte); }

/* Chrome de la vitrine : papier clair, en-tete leger et collant. */
.vitrine { background: var(--papier); min-height: 100vh; }

.vitrine-entete {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: rgba(255, 253, 249, .88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ligne);
}

.marque {
    font-weight: 900;
    font-size: 20px;
    color: var(--encre);
    text-decoration: none;
}

.marque small { display: block; font-weight: 600; font-size: 11px; color: var(--ardoise); }

.vitrine-entete nav { display: flex; align-items: center; gap: 16px; }
.vitrine-entete a { color: var(--ardoise); text-decoration: none; font-size: 15px; font-weight: 700; }
.vitrine-entete a:hover { color: var(--encre); }


/* Chrome de l'application : papier clair, decision du client du 16 aout 2026
   (le registre sombre de DEC-31 est abandonne pour l'espace ; la scene video du
   lecteur, elle, reste sombre). Mobile d'abord : l'en-tete se fait discret, la
   navigation vit dans la barre inferieure fixe sous 720 px. */
.application { background: var(--papier-2); min-height: 100vh; color: var(--encre); }

.application-entete {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(255, 253, 249, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ligne);
}

.application-entete .marque { color: var(--encre); }
.application-entete .marque small { color: var(--ardoise); }
.application-entete nav { display: flex; align-items: center; gap: 14px; }
.application-entete a, .application-entete button { color: var(--ardoise); }
.application-entete a:hover, .application-entete button:hover { color: var(--encre); }

/* Deconnexion : un bouton du chrome sombre, pas un bouton de formulaire.
   Fond transparent sur l'encre, texte papier, bordure discrete. */
.bouton-quitter {
    background: none;
    border: 2px solid var(--ligne);
    border-radius: 999px;
    padding: 6px 14px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.bouton-quitter:hover { border-color: var(--encre); color: var(--encre); }

/* 860 et non 720 : l'ecran de lecon porte desormais un lecteur, des documents et
   des questions, il respirait mal dans la colonne etroite de la coquille 1.3. */
.application-contenu { max-width: 860px; margin: 0 auto; padding: 48px 20px; }
.application-contenu h1 { color: var(--encre); font-size: 28px; margin: 0 0 12px; }
.application-contenu p { color: var(--ardoise); }
.application .champ { color: var(--encre); }

/* La fenetre d'authentification (DEC-08). Rendue par le serveur, pilotee par l'adresse :
   sans JavaScript, tout fonctionne, y compris la fermeture, qui est un lien. */
.voile {
    position: fixed;
    inset: 0;
    background: rgba(23, 20, 16, .55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    z-index: 100;
}

.fenetre {
    background: var(--papier);
    border: 2px solid var(--encre);
    border-radius: var(--r-carte);
    width: 100%;
    max-width: 430px;
    padding: 26px;
    box-shadow: 8px 8px 0 rgba(223, 241, 230, .55), 0 18px 50px rgba(23, 20, 16, .3);
}

.fenetre h2 { margin: 0 0 6px; font-size: 22px; }

.fenetre-fermer {
    float: inline-end;
    text-decoration: none;
    color: var(--ardoise);
    font-size: 20px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
}
.fenetre-fermer:hover { color: var(--encre); background: var(--papier-2); }

.champ { display: block; margin: 14px 0 5px; font-weight: 800; font-size: 14px; }

/* Les select figurent ici au meme titre que les champs texte : ils n'heritent
   ni de la police ni de la largeur sans le demander, et rendaient en Arial a
   leur taille par defaut au milieu de champs stylés (trouve a la passe manuelle
   du 15 aout sur le profil). */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select {
    width: 100%;
    padding: 11px 13px;
    border: 2px solid var(--ligne);
    border-radius: var(--r-bouton);
    font: inherit;
    background: #fff;
    color: var(--encre);
}

input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }

/* Bouton principal : sarcelle, blanc dessus (6,3:1), ombre autocollant. */
.bouton-principal {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 13px 16px;
    border: 0;
    border-radius: var(--r-bouton);
    background: var(--accent);
    color: var(--sur-accent);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 5px 0 rgba(23, 20, 16, .14);
    transition: transform .12s, background .12s;
}
.bouton-principal:hover { background: var(--accent-fonce); transform: translateY(-1px); }

.bouton-google {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--encre);
    border-radius: var(--r-bouton);
    background: var(--papier);
    color: var(--encre);
    font: inherit;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: background .12s;
}
.bouton-google:hover { background: var(--papier-2); }

.mention { font-size: 13px; color: var(--ardoise); text-align: center; margin: 6px 0 0; }

.separateur {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ardoise);
    font-size: 13px;
    margin: 18px 0 4px;
}
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }

.pastille {
    display: inline-block;
    background: var(--accent-p);
    color: var(--accent-texte);
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    padding: 3px 11px;
    margin-inline-start: 8px;
    vertical-align: middle;
}

.benefices { margin: 10px 0 0; padding: 0; list-style: none; }
.benefices li { font-size: 13.5px; color: var(--ardoise); padding-inline-start: 20px; position: relative; }
.benefices li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--ok); font-weight: 800; }

.lien-discret { display: block; margin-top: 16px; font-size: 13.5px; color: var(--ardoise); text-align: center; }

.bandeau-repli {
    background: var(--warn-bg);
    color: var(--warn);
    border-radius: var(--r-bouton);
    padding: 10px 12px;
    font-size: 13.5px;
    font-weight: 700;
    margin: 12px 0;
}

.comparatif { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 4px; }
.comparatif th, .comparatif td { padding: 7px 8px; border-bottom: 1px solid var(--ligne); text-align: start; }
.comparatif th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ardoise); }
[dir="rtl"] .comparatif th { text-transform: none; letter-spacing: 0; }
.comparatif .oui { color: var(--ok); font-weight: 800; }
.comparatif .non { color: var(--err); font-weight: 800; }

.message { border-radius: var(--r-bouton); padding: 10px 12px; font-size: 14px; margin: 12px 0; }
.message-ok { background: var(--ok-bg); color: var(--ok); }
.message-erreur { background: var(--err-bg); color: var(--err); }

.bloc-aide { background: var(--info-bg); color: var(--info); border-radius: var(--r-bouton); padding: 12px; font-size: 13.5px; margin-top: 16px; }
.bloc-aide a { color: var(--info); font-weight: 800; }

.fenetre-pied { margin-top: 16px; font-size: 13.5px; color: var(--ardoise); text-align: center; }

/* Donnees a recopier ou a comparer : monospace (docs/07). */
.donnee { font-family: var(--police-donnees); }

@media (max-width: 480px) {
    .fenetre { padding: 18px; box-shadow: 5px 5px 0 rgba(223, 241, 230, .55), 0 18px 50px rgba(23, 20, 16, .3); }
}

/* ----- Catalogue et fiches (tranche 1.2, maquettes vitrine-cours et
   vitrine-unite). Jetons de docs/07 v4. ----- */
:root {
    --t1: #0E6B6A; --t1-p: #DFF1E6;
    --t2: #6D28D9; --t2-p: #EFE8FB;
    --t3: #8A6210; --t3-p: #F6ECD9;
    --r-carte: 20px;
    --ombre-douce: 0 1px 2px rgba(23, 20, 16, .05), 0 12px 32px rgba(23, 20, 16, .08);
}

.bloc { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

/* Bandeau de page : pastel plein, vague vers le papier, filtres en face du titre. */
.bandeau-page {
    padding: 56px 0 88px;
    background: var(--menthe);
    position: relative;
    overflow: hidden;
}
.bandeau-page::after {
    content: "";
    position: absolute; bottom: -1px; left: 0; right: 0; height: 42px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60C150 12 350 54 600 32 850 10 1050 50 1200 22L1200 60Z' fill='%23FFFDF9'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.bandeau-page .bloc { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.bandeau-page h1 { font-size: clamp(30px, 5vw, 52px); margin: 0; }
.bandeau-page .sous { color: var(--ardoise); max-width: 560px; margin: 10px 0 0; }

.groupe-filtres { display: grid; gap: 12px; }
.groupe-filtres .etiquette { font-size: 12px; font-weight: 800; color: var(--ardoise); text-transform: uppercase; letter-spacing: .06em; }
[dir="rtl"] .groupe-filtres .etiquette { text-transform: none; letter-spacing: 0; }
.filtres { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 6px; }
.filtre {
    border: 2px solid var(--ligne); background: var(--papier); border-radius: 999px;
    padding: 8px 18px; font-weight: 800; font-size: 14px; color: var(--ardoise);
    text-decoration: none; box-shadow: 0 2px 0 rgba(23, 20, 16, .08);
    transition: transform .12s, border-color .12s;
}
.filtre:hover { transform: translateY(-2px); border-color: var(--encre); color: var(--encre); }
.filtre.actif { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.filtre.actif:hover { color: var(--papier); }

/* Cartes d'unites, miniatures a la craie teintees par trimestre. */
.unites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.unite {
    background: #fff; border: 1.5px solid var(--ligne); border-radius: var(--r-carte);
    overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .15s, transform .15s, border-color .15s;
    min-width: 0;
}
.unite:hover { box-shadow: var(--ombre-douce); transform: translateY(-3px); border-color: var(--encre); }
.vignette { aspect-ratio: 21 / 9; background: var(--encre); position: relative; overflow: hidden; }
.vignette::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(90% 130% at 15% 0%, color-mix(in srgb, var(--tc) 38%, transparent), transparent 60%);
}
.vignette .motif { position: absolute; top: 50%; inset-inline-start: 24px; transform: translateY(-50%) rotate(-6deg); width: 64px; height: 64px; color: rgba(255, 253, 249, .9); transition: transform .25s; }
.unite:hover .vignette .motif { transform: translateY(-50%) rotate(4deg) scale(1.1); }
.vignette .craie { position: absolute; top: 12px; inset-inline-end: 16px; width: 58px; opacity: .4; color: #FFFDF9; }
.vignette .barre-t { position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: var(--tc); }
.doodle { display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.unite .corps { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.unite .trim { font-size: 12px; font-weight: 900; border-radius: 999px; padding: 3px 12px; align-self: flex-start; }
.unite h3 { font-size: 17px; margin: 0; }
.unite .meta { color: var(--ardoise); font-size: 13.5px; }
.unite .sous-titre { color: var(--ardoise); font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unite .pied { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ligne); }
.unite .prix { font-weight: 900; font-size: 19px; }
.unite .prix small { color: var(--ardoise); font-weight: 700; font-size: 12px; }
.unite .voir { color: var(--accent-texte); font-weight: 800; font-size: 14px; text-decoration: none; }
.vide { color: var(--ardoise); text-align: center; padding: 36px 0; }

/* Section packs. */
.section-packs { background: var(--papier-2); padding: 56px 0; margin-top: 56px; }
.section-packs h2 { text-align: center; margin: 0 0 6px; }
.section-packs .sous-section { text-align: center; color: var(--ardoise); margin: 0 0 28px; }
.packs-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pack-carte {
    background: #fff; border: 2px solid var(--encre); border-radius: var(--r-carte);
    padding: 24px; display: flex; flex-direction: column; gap: 10px;
    box-shadow: 8px 8px 0 var(--accent-p); min-width: 0;
}
.pack-carte h3 { margin: 0; font-size: 19px; }
.pack-carte .contenu { color: var(--ardoise); font-size: 14.5px; margin: 0; }
.pack-carte .prix-ligne { display: flex; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 10px; }
.pack-carte .prix { font-weight: 900; font-size: 24px; }
.pack-carte .barre-prix { color: var(--ardoise); text-decoration: line-through; }

/* Fiche unite en split (disposition D validee) : la vente a gauche, la
   scene video a droite, la vague fond vers le gris des tuiles. */
.fil-ariane { padding: 16px 0 0; color: var(--ardoise); font-size: 14px; font-weight: 600; }
.fil-ariane a { color: var(--ardoise); text-decoration: none; }
.fil-ariane a:hover { color: var(--encre); }
.fiche-split {
    position: relative; overflow: hidden; padding: 24px 0 104px;
    background:
        radial-gradient(48% 70% at 90% 6%, var(--accent-p), transparent 70%),
        radial-gradient(40% 60% at 2% 96%, var(--peche), transparent 72%);
}
.fiche-split::after {
    content: "";
    position: absolute; bottom: -1px; left: 0; right: 0; height: 44px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60C150 12 350 54 600 32 850 10 1050 50 1200 22L1200 60Z' fill='%23F7F5EF'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.fiche-split .bloc { position: relative; z-index: 1; }
.grille-split {
    display: grid; grid-template-columns: 1.02fr .98fr;
    grid-template-areas: "identite video" "vente video";
    column-gap: clamp(32px, 4.5vw, 72px); align-items: start;
}
.grille-split > * { min-width: 0; }
.zone-identite { grid-area: identite; }
.zone-video { grid-area: video; }
.zone-vente { grid-area: vente; max-width: 420px; }

.badges-ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zone-identite .trim { font-size: 13px; font-weight: 900; border-radius: 999px; padding: 4px 13px; }
.badge-vert { font-size: 12.5px; font-weight: 800; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 4px 12px; }
.zone-identite h1 { font-size: clamp(24px, 3.6vw, 40px); margin: 12px 0 4px; }
.sous-titre-fiche { color: var(--ardoise); font-weight: 600; font-size: 16px; margin: 0; }
.prof-chip { display: flex; gap: 10px; align-items: center; margin: 12px 0 0; }
.prof-chip .avatar {
    width: 38px; height: 38px; border-radius: 999px; background: var(--sable); color: var(--ambre);
    display: grid; place-items: center; font-weight: 900; flex-shrink: 0;
}
.prof-chip b { font-size: 14.5px; display: block; }
.prof-chip span { display: block; color: var(--ardoise); font-size: 12.5px; }
.description-fiche {
    color: var(--ardoise); margin: 16px 0 0; font-size: 15px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.decision { margin-top: 24px; display: grid; gap: 12px; }
.prix-rang { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.decision .prix { font-weight: 900; font-size: 28px; white-space: nowrap; }
.decision .prix small { font-size: 14px; color: var(--ardoise); font-weight: 700; }
.decision .duree-acces { color: var(--ardoise); font-size: 13px; font-weight: 600; }
.garantie-mini { display: flex; gap: 8px; align-items: center; color: var(--ok); font-size: 13px; font-weight: 700; }
.garantie-mini svg { flex-shrink: 0; }
.decision .note { color: var(--ardoise); font-size: 12.5px; }
.bandeau-hors-catalogue {
    background: var(--warn-bg); color: var(--warn); border: 1.5px solid var(--warn);
    border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 14.5px; margin: 0 0 18px;
}

/* La scene video : carre penche, ombre autocollant, doodles en orbite. */
.scene-video { position: relative; padding: 34px 14px 8px; margin-top: 20px; }
.scene-video .flotte { position: absolute; z-index: 1; color: var(--accent-texte); width: 68px; height: 68px; top: -6px; inset-inline-start: -2px; transform: rotate(-12deg); }
.scene-video .flotte.ambre { color: var(--ambre); width: 54px; height: 54px; top: auto; bottom: 30px; inset-inline-start: auto; inset-inline-end: -8px; transform: rotate(9deg); }
.scene-video .flotte.violet { color: var(--t2); width: 42px; height: 54px; top: -12px; inset-inline-start: auto; inset-inline-end: 36px; transform: rotate(8deg); }
.scene-video .flotte.onde { width: 84px; height: 32px; top: auto; bottom: -2px; inset-inline-start: 12px; inset-inline-end: auto; transform: rotate(-7deg); }
.lecteur-carre {
    position: relative; z-index: 2; background: var(--encre); border-radius: var(--r-carte);
    overflow: hidden; aspect-ratio: 1 / 1; border: 2px solid var(--encre);
    box-shadow: 12px 12px 0 var(--accent-p); transform: rotate(1.4deg); transition: transform .25s;
}
.scene-video:hover .lecteur-carre { transform: rotate(0); }
/* Le cadre du prestataire occupe exactement la place de la balise video qu'il
   remplace (DEC-37) : meme calage absolu, sans bordure propre. */
.lecteur-carre video, .lecteur-carre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.badge-sur-video {
    position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3;
    background: var(--papier); color: var(--encre); border-radius: 999px;
    padding: 5px 13px; font-weight: 800; font-size: 12.5px; max-width: 80%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* L'appel de l'extrait, pose sur le lecteur.
 *
 * Il ne porte plus de bouton de lecture : le lecteur du prestataire a le sien, au
 * centre, et deux boutons pour une seule decision est un defaut d'interface. Le
 * calque est donc transparent, la miniature reste entierement visible, et seule la
 * promesse est ecrite dans un bandeau opaque en bas. Toute la surface reste
 * cliquable : cliquer la miniature, ou le bouton du prestataire dessous, lance la
 * lecture par le meme chemin.
 */
.lancement {
    position: absolute; inset: 0; z-index: 2;
    display: grid; align-content: end; justify-items: stretch; gap: 0;
    /* Pas de width ici : sur un element absolu, une largeur explicite l'emporte sur
       inset et le bord droit est ignore. Le calque faisait 5 px de moins que le
       cadre, sans consequence sous un voile, tres visible sous un bandeau plein. */
    border: 0; cursor: pointer; padding: 0; text-align: center;
    background: none;
    color: var(--papier); font: inherit;
}
.lancement.cache { display: none; }
/* Le bandeau est quasi opaque, et non un degrade : le texte doit tenir son contraste
   quelle que soit la miniature au dessous, claire ou sombre (DEC-31). */
.lancement b, .lancement .sans-compte {
    background: rgba(23, 20, 16, .92);
    padding-inline: 16px;
    display: block;
}
.lancement b { font-size: clamp(15px, 2vw, 18px); padding-top: 12px; }
.lancement .sans-compte { color: rgba(255, 253, 249, .82); font-size: 14px; padding-bottom: 12px; }
.lancement:hover b, .lancement:hover .sans-compte { background: var(--encre); }
.lecteur-carre .scene {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: rgba(255, 253, 249, .85); text-align: center; padding: 20px;
    background: radial-gradient(70% 90% at 30% 20%, rgba(223, 241, 230, .16), transparent 60%);
}
.lecteur-carre .scene .craie { position: absolute; top: 11%; inset-inline-start: 8%; width: 32%; opacity: .5; color: #FFFDF9; }
.lecteur-carre .scene .titre-craie { display: block; font-size: clamp(16px, 2.4vw, 21px); font-weight: 800; opacity: .85; margin-bottom: 8px; }
.lecteur-carre .scene .mention-scene { color: rgba(255, 253, 249, .7); font-size: 14px; }
.fin-extrait {
    position: absolute; inset: 0; z-index: 3; display: none;
    place-items: center; text-align: center; padding: 24px;
    background: rgba(23, 20, 16, .92); color: var(--papier);
}
.fin-extrait.visible { display: grid; }
.fin-extrait h3 { margin: 0 0 6px; font-size: 21px; }
.fin-extrait p { margin: 0 0 16px; color: rgba(255, 253, 249, .78); }
.legende-video { margin: 18px 0 0; text-align: center; color: var(--ardoise); font-size: 13.5px; font-weight: 600; }

/* Fiche pack : deux colonnes, carte de decision a droite. */
.fiche { padding: 32px 0 56px; }
.fiche .duo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 52px); align-items: start; }
.fiche .duo > * { min-width: 0; }
.fiche h1 { font-size: clamp(24px, 3.6vw, 38px); margin: 0 0 8px; }
.fiche .meta-ligne { display: flex; gap: 18px; flex-wrap: wrap; color: var(--ardoise); font-size: 14.5px; font-weight: 600; margin: 10px 0 18px; }
.carte-achat {
    background: #fff; border: 2px solid var(--encre); border-radius: var(--r-carte);
    padding: 22px; box-shadow: 8px 8px 0 var(--accent-p);
    display: flex; flex-direction: column; gap: 12px; max-width: 420px;
}
.carte-achat .prix { font-weight: 900; font-size: 30px; }
.carte-achat .prix small { font-size: 15px; color: var(--ardoise); font-weight: 700; }
.carte-achat .note { color: var(--ardoise); font-size: 13.5px; }

/* La barre de rappel : des que la decision sort de l'ecran vers le haut,
   le prix et l'achat reapparaissent en haut. Bureau seulement, le mobile
   a deja sa barre fixe du bas. */
.rappel-achat {
    position: fixed; top: 0; left: 0; right: 0; z-index: 70;
    background: var(--papier); border-bottom: 2px solid var(--encre);
    transform: translateY(-110%); transition: transform .25s;
    box-shadow: 0 6px 24px rgba(23, 20, 16, .1);
}
.rappel-achat.visible { transform: none; }
.rappel-achat .rappel-int {
    display: flex; align-items: center; gap: 20px; padding-top: 10px; padding-bottom: 10px;
}
.rappel-achat .titre-rappel {
    flex: 1; min-width: 0; font-weight: 800; font-size: 15.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rappel-achat .prix { font-weight: 900; font-size: 19px; white-space: nowrap; }
.rappel-achat .prix small { color: var(--ardoise); font-size: 12px; font-weight: 700; }
.rappel-achat .bouton-principal { width: auto; margin-top: 0; padding: 10px 22px; }

/* Le corps gris : la vague y fond, les tuiles s'y posent. */
.corps-gris { background: var(--papier-2); padding: 36px 0 72px; overflow: hidden; }
.tuiles-bande { margin-bottom: 36px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tuile {
    background: #fff; border: 1.5px solid var(--ligne); border-radius: 16px;
    padding: 16px 10px; text-align: center; box-shadow: var(--ombre-douce);
}
.tuile b { display: block; font-size: 22px; font-weight: 900; color: var(--accent-texte); }
.tuile span { color: var(--ardoise); font-size: 12.5px; font-weight: 600; }
.corps-colonnes { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; }
.corps-colonnes > * { min-width: 0; }
.corps-colonnes .titre-section { font-size: 20px; margin: 0 0 14px; }
.num-doc { background: var(--sable); color: var(--ambre); }
.etat-extrait { border: 0; cursor: pointer; font: inherit; }
.carte-prof {
    background: #fff; border: 2px solid var(--encre); border-radius: var(--r-carte); padding: 20px;
    box-shadow: 7px 7px 0 var(--sable); transform: rotate(-.8deg);
    display: flex; gap: 14px; align-items: center; margin-top: 24px;
}
.carte-prof .avatar {
    width: 50px; height: 50px; border-radius: 16px; background: var(--sable); color: var(--ambre);
    display: grid; place-items: center; font-weight: 900; font-size: 19px; flex-shrink: 0;
}
.carte-prof b { display: block; }
.carte-prof span { color: var(--ardoise); font-size: 13.5px; }

.lecon-liste { display: grid; gap: 10px; }
.lecon { display: flex; align-items: center; gap: 13px; background: #fff; border: 1.5px solid var(--ligne); border-radius: 14px; padding: 12px 15px; min-width: 0; }
.lecon:hover { border-color: var(--encre); box-shadow: var(--ombre-douce); }
.lecon .num { width: 30px; height: 30px; border-radius: 10px; background: var(--accent-p); color: var(--accent-texte); display: grid; place-items: center; font-weight: 900; font-size: 13px; flex-shrink: 0; }
.lecon .txt { flex: 1; min-width: 0; }
.lecon .txt b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecon .txt span { color: var(--ardoise); font-size: 12.5px; }
.lecon .etat { font-size: 12px; font-weight: 800; color: var(--accent-texte); background: var(--accent-p); border-radius: 999px; padding: 3px 10px; flex-shrink: 0; }
.lecon .etat.verrou { color: var(--ardoise); background: var(--papier-2); }
.section-lecons { background: var(--papier-2); padding: 48px 0; }
.section-lecons h2 { text-align: center; margin: 0 0 28px; }

.prof-bloc { display: flex; gap: 16px; align-items: center; background: #fff; border: 1.5px solid var(--ligne); border-radius: var(--r-carte); padding: 20px; margin: 32px 0 0; }
.prof-bloc b { display: block; }
.prof-bloc span { color: var(--ardoise); font-size: 14px; }

/* Barre d'achat collante, mobile seulement (DEC-15 conservee par DEC-32). */
.barre-achat { display: none; }

/* Onboarding : une question, des boutons, rien d'autre. */
.bienvenue { max-width: 560px; margin: 0 auto; padding: 48px 20px; text-align: center; }
.bienvenue h1 { color: var(--encre); font-size: 30px; margin: 0 0 4px; }
.bienvenue .question { color: var(--encre); font-size: 21px; font-weight: 800; margin: 18px 0 6px; }
.bienvenue .aide { color: var(--ardoise); font-size: 14.5px; margin: 0 0 24px; }
.choix-filieres { display: grid; gap: 12px; }
.choix-filieres button {
    display: block; width: 100%; padding: 16px; border-radius: 14px;
    border: 2px solid var(--ligne); background: var(--papier);
    color: var(--encre); font: inherit; font-weight: 800; font-size: 17px; cursor: pointer;
    transition: border-color .12s, background .12s, transform .12s;
}
.choix-filieres button:hover { border-color: var(--accent); background: var(--menthe); transform: translateY(-2px); }
.choix-filieres button.tout-voir { border-style: dashed; }
.lien-passer { display: inline-block; margin-top: 20px; color: var(--ardoise); font-size: 14px; background: none; border: 0; cursor: pointer; font-family: inherit; text-decoration: underline; }
.lien-passer:hover { color: var(--encre); }

@media (max-width: 900px) {
    .bandeau-page .bloc { grid-template-columns: 1fr; gap: 22px; }
    .unites { grid-template-columns: 1fr; }
    .packs-grille { grid-template-columns: 1fr; }
    .rappel-achat { display: none; }
    .fiche .duo { grid-template-columns: 1fr; }
    .carte-achat { max-width: none; }
    /* Le split en une colonne : identite, video, puis la vente. La barre
       fixe du bas porte l'achat, le bouton de la decision s'efface. */
    .grille-split { grid-template-columns: 1fr; grid-template-areas: "identite" "video" "vente"; }
    .zone-vente { max-width: none; }
    .decision > .bouton-principal { display: none; }
    .scene-video { margin-top: 8px; padding: 26px 6px 4px; }
    .scene-video .flotte { width: 54px; height: 54px; }
    .scene-video .flotte.ambre { width: 44px; height: 44px; }
    .scene-video .flotte.violet { width: 34px; height: 44px; }
    .scene-video .flotte.onde { width: 68px; height: 26px; }
    .lecteur-carre { box-shadow: 8px 8px 0 var(--accent-p); }
    .fiche-split { padding-bottom: 84px; }
    .tuiles-bande { margin-bottom: 28px; }
    .corps-colonnes { grid-template-columns: 1fr; gap: 32px; }
    .barre-achat {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
        background: var(--papier); border-top: 2px solid var(--encre);
        padding: 11px 16px; align-items: center; gap: 14px;
        box-shadow: 0 -6px 24px rgba(23, 20, 16, .12);
    }
    .barre-achat .prix { font-weight: 900; font-size: 19px; white-space: nowrap; }
    .barre-achat .prix small { color: var(--ardoise); font-size: 12px; font-weight: 700; }
    .barre-achat .bouton-principal { flex: 1; margin-top: 0; }
    body.avec-barre-achat { padding-bottom: 70px; }

}
@media (max-width: 600px) {
    .bandeau-page { padding: 36px 0 64px; }
    .bandeau-page::after { height: 28px; }
    .filtres { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
    .filtres::-webkit-scrollbar { display: none; }
    .filtre { flex-shrink: 0; }
}

/* Le contenu pedagogique reste arabe quel que soit l'affichage (CLAUDE.md 4). */
.titre-ar { direction: rtl; font-family: var(--police-arabe); }

/* Toute la carte d'unite est cliquable : le lien « Voir » s'etend a la carte
   entiere. Il reste le lien semantique, focalisable au clavier, et les autres
   liens de la carte repassent au-dessus de la zone etendue. */
.unite { position: relative; }
.unite .voir::after { content: ""; position: absolute; inset: 0; }
.unite .corps a:not(.voir), .unite .corps [dir="auto"] a { position: relative; z-index: 1; }
.unite:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.unite .voir:focus { outline: none; }

/* ----- Tunnel d'achat (tranche 1.3) : panier, paiement, commandes, code.
   Le chrome reste l'encre, le contenu vit dans des cartes papier ; chaque
   couleur de texte est verifiee contre son fond effectif (DEC-31). ----- */
.carte-claire {
    background: var(--papier);
    color: var(--encre);
    border-radius: var(--r-carte);
    padding: 22px;
    margin-top: 18px;
}
.carte-claire .champ { color: var(--encre); }
.carte-claire .mention { color: var(--ardoise); }

.panier-vide { color: var(--ardoise); margin: 0 0 6px; }

.panier-ligne {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ligne);
}
.panier-ligne-txt { flex: 1; min-width: 0; }
.panier-ligne-txt b { display: block; font-size: 15.5px; }
.panier-nature { display: block; color: var(--ardoise); font-size: 12.5px; font-weight: 600; }
.panier-deduction { display: block; color: var(--ok); font-size: 12.5px; font-weight: 700; }
.panier-prix { text-align: end; white-space: nowrap; }
.panier-prix b { font-weight: 900; font-size: 16.5px; display: block; }
.panier-prix b small { color: var(--ardoise); font-weight: 700; font-size: 11.5px; }
.panier-prix s { color: var(--ardoise); font-size: 12.5px; }
.panier-retirer {
    background: none; border: 0; cursor: pointer; font: inherit;
    color: var(--err); font-size: 13px; font-weight: 700; padding: 4px 6px;
    border-radius: 8px;
}
.panier-retirer:hover { background: var(--err-bg); }

.panier-totaux { padding: 14px 0 2px; }
.panier-total-ligne { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--ardoise); padding: 2px 0; }
.panier-total-deduction { color: var(--ok); font-weight: 700; }
.panier-total-final { color: var(--encre); font-weight: 900; font-size: 19px; padding-top: 6px; }
.panier-total-final small { color: var(--ardoise); font-weight: 700; font-size: 12px; }

/* La classe sert deux mondes : sur l'espace clair, encre et ardoise ; dans la
   barre sombre de la fiche vitrine (.rappel-achat), le papier reste. */
.rappel-montant { color: var(--ardoise); }
.rappel-montant b { color: var(--encre); }
.rappel-achat .rappel-montant { color: rgba(255, 253, 249, .78); }
.rappel-achat .rappel-montant b { color: var(--papier); }

/* Choix du moyen : des cartes radio, l'accent au choix. */
.choix-moyen {
    display: flex; align-items: center; gap: 12px;
    border: 2px solid var(--ligne); border-radius: var(--r-bouton);
    padding: 13px 15px; margin: 10px 0; cursor: pointer;
    transition: border-color .12s;
}
.choix-moyen:hover { border-color: var(--encre); }
.choix-moyen:has(input:checked) { border-color: var(--accent); background: var(--accent-p); }
.choix-moyen input { accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
.choix-txt b { display: block; font-size: 15.5px; }
.choix-txt span { color: var(--ardoise); font-size: 13px; }
.bloc-telephone { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--ligne); }

/* La reference de commande : impossible a rater, et copiable en un geste. */
.reference-carte {
    background: var(--papier);
    color: var(--encre);
    border: 2px solid var(--encre);
    border-radius: var(--r-carte);
    box-shadow: 8px 8px 0 var(--accent-p);
    padding: 18px 22px;
    margin-top: 18px;
    text-align: center;
}
.reference-legende { display: block; color: var(--ardoise); font-size: 12.5px; font-weight: 800; }
.reference-rang { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 6px 0; }
.reference-valeur { font-size: clamp(24px, 6vw, 34px); font-weight: 700; letter-spacing: .04em; }
.bouton-copier {
    background: var(--papier); border: 2px solid var(--encre); border-radius: 999px;
    padding: 6px 16px; font: inherit; font-weight: 800; font-size: 13.5px;
    color: var(--encre); cursor: pointer; transition: background .12s;
}
.bouton-copier:hover { background: var(--papier-2); }
.reference-aide { display: block; color: var(--ardoise); font-size: 13px; }

.etapes { margin: 0; padding-inline-start: 22px; display: grid; gap: 12px; }
.etapes li { font-size: 15px; }
.etapes b { font-size: 17px; }
.compte-plateforme { display: block; font-size: 19px; font-weight: 700; margin-top: 4px; }
.compte-titulaire { display: block; color: var(--ardoise); font-size: 13.5px; }

/* Les issues du tunnel : un bandeau par etat, texte fonce sur pastel. */
.bandeau-etat { border-radius: var(--r-carte); padding: 20px 22px; margin-top: 18px; }
.bandeau-etat b { font-size: 17px; }
.bandeau-etat p { margin: 6px 0 0; }
.bandeau-etat .bouton-principal { margin-top: 14px; }
.bandeau-etat .champ { color: inherit; }
.bandeau-paye { background: var(--ok-bg); color: var(--ok); }
.bandeau-attente { background: var(--warn-bg); color: var(--warn); }
.bandeau-refus { background: var(--err-bg); color: var(--err); }
.bandeau-annule { background: var(--papier-2); color: var(--ardoise); }
.refus-motif { font-weight: 700; }
.retires-liste { margin: 6px 0 0; padding-inline-start: 20px; }

/* Mes commandes : une ligne par commande, toute la carte cliquable. */
.commandes-liste { display: grid; gap: 12px; }
.commande-rang {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    text-decoration: none; margin-top: 0;
    transition: box-shadow .15s, transform .15s;
}
.commande-rang:hover { box-shadow: var(--ombre-douce); transform: translateY(-2px); }
.commande-ref { color: var(--encre); font-weight: 700; font-size: 15.5px; }
.commande-date { color: var(--ardoise); font-size: 13.5px; flex: 1; }
.commande-montant { color: var(--encre); font-weight: 900; }
.commande-montant small { color: var(--ardoise); font-weight: 700; font-size: 11.5px; }
.etat-pastille { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 12px; }
.etat-payee { background: var(--ok-bg); color: var(--ok); }
.etat-attente_verif, .etat-attente_preuve, .etat-creee { background: var(--warn-bg); color: var(--warn); }
.etat-refusee { background: var(--err-bg); color: var(--err); }
.etat-annulee { background: var(--papier-2); color: var(--ardoise); }

.lien-retour { margin-top: 18px; }
.lien-retour a { color: var(--accent-texte); font-weight: 700; }

/* Le formulaire d'achat des fiches : le bouton se comporte comme l'ancien lien,
   y compris dans les barres en flex. */
.form-achat { display: contents; }

@media (max-width: 600px) {
    .panier-ligne { flex-wrap: wrap; }
    .commande-rang { gap: 8px; }
    .commande-date { flex-basis: 100%; }
}

.liens-espace { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.liens-espace a { color: var(--accent-texte); font-weight: 700; }
.liens-espace a:hover { color: var(--accent-fonce); }

/* Les paragraphes des cartes claires et des bandeaux d'etat ne heritent jamais du
   texte papier du chrome sombre : la couleur du conteneur fait foi. Attrape par
   l'audit du rendu, texte papier sur pastel a 1,12:1. */
.carte-claire p, .bandeau-etat p { color: inherit; }
.carte-claire p.panier-vide { color: var(--ardoise); }

/* Le scan du QR d'un coupon, cote eleve : commodite offerte par le navigateur,
   jamais un passage oblige. Le bouton vit dans une carte claire, il en porte
   les couleurs (encre sur papier). */
.bouton-scanner {
    display: block; width: 100%; margin-top: 12px;
    padding: 12px 16px; border: 2px solid var(--encre);
    border-radius: var(--r-bouton); background: var(--papier);
    color: var(--encre); font: inherit; font-weight: 800;
    text-align: center; cursor: pointer; transition: background .12s;
}
.bouton-scanner:hover { background: var(--papier-2); }

.zone-scan { margin-top: 14px; text-align: center; }
.zone-scan video {
    width: 100%; max-width: 320px; aspect-ratio: 1 / 1;
    object-fit: cover; background: var(--encre);
    border: 2px solid var(--encre); border-radius: var(--r-carte);
}
.scan-etat { color: var(--ardoise); font-size: 13.5px; margin: 8px 0 0; }
.scan-annuler {
    background: none; border: 0; font: inherit; font-weight: 700; font-size: 13.5px;
    color: var(--err); cursor: pointer; padding: 6px 10px; border-radius: 8px; margin-top: 4px;
}
.scan-annuler:hover { background: var(--err-bg); }

/* ----- Espace eleve (tranche 1.6, etape A) : tableau de bord, mes cours,
   detail d'une unite, mon compte. Le chrome reste l'encre, le contenu vit
   dans des cartes papier, et chaque couleur de texte est verifiee contre son
   fond effectif et non contre celui du chrome (DEC-31). ----- */

.titre-espace { color: var(--encre); font-size: 20px; margin: 28px 0 4px; }

/* Le bloc de reprise : l'action principale de l'ecran, donc la seule carte qui
   porte l'accent. Tout le reste est informatif. */
.carte-reprise {
    display: block;
    background: var(--papier);
    color: var(--encre);
    border-radius: var(--r-carte);
    border: 2px solid var(--encre);
    box-shadow: 8px 8px 0 var(--accent-p);
    padding: 20px 22px;
    margin-top: 18px;
    text-decoration: none;
    transition: transform .15s;
}
.carte-reprise:hover { transform: translateY(-2px); }
.reprise-legende { display: block; color: var(--ardoise); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.carte-reprise b { display: block; font-size: 20px; margin-top: 4px; }
.reprise-unite { display: block; color: var(--ardoise); font-size: 13.5px; }
.reprise-action { display: inline-block; margin-top: 12px; color: var(--accent-texte); font-weight: 900; }

/* La jauge d'avancement. Le pourcentage est aussi porte en texte par l'aria-label :
   une barre seule n'est pas lisible par qui ne la voit pas. */
.jauge { display: block; height: 8px; border-radius: 999px; background: var(--papier-2); margin: 12px 0 0; overflow: hidden; }
.jauge-part { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.unites-espace { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.unite-espace { display: block; text-decoration: none; margin-top: 14px; transition: transform .15s, box-shadow .15s; }
.unite-espace:hover { transform: translateY(-2px); box-shadow: var(--ombre-douce); }
.unite-espace-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.unite-espace-tete b { font-size: 17px; }
.unite-espace-sous { display: block; color: var(--ardoise); font-size: 13.5px; }
.unite-espace-pied { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--ardoise); font-size: 12.5px; margin-top: 10px; }

/* Une unite echue reste entiere et lisible : elle porte une bordure d'alerte, pas
   un voile qui la ferait disparaitre a moitie (RG-13, ELV-04). */
.unite-echue { border-inline-start: 5px solid var(--ambre); }
.etat-echue { background: var(--warn-bg); color: var(--warn); }
.unite-espace-echue-note { color: var(--ambre); font-weight: 700; }

.sous-titre-unite { color: var(--ardoise); margin: 2px 0 0; }
.unite-prof { color: var(--ardoise); font-size: 14px; margin: 6px 0 0; }

.lecon .etat.etat-termine { background: var(--ok-bg); color: var(--ok); }
.lecon-avancement { margin-inline-start: 8px; }

/* Une alerte cliquable garde la couleur de son bandeau : le lien n'est pas
   souligne en accent sur un fond pastel, il porterait un contraste different
   de son propre texte. */
.bandeau-lien { display: block; text-decoration: none; }
.bandeau-lien:hover { filter: brightness(.97); }

.titre-carte { font-size: 18px; margin: 0 0 4px; }

@media (max-width: 600px) {
    .unites-espace { grid-template-columns: 1fr; }
}

/* ----- Ecran de lecture (tranche 1.6, etape B). ----- */

.fil-lecon { margin: 0 0 4px; }
.fil-lecon a { color: var(--ardoise); font-size: 14px; text-decoration: none; }
.fil-lecon a:hover { color: var(--encre); text-decoration: underline; }

.scene-lecteur { position: relative; margin-top: 16px; border-radius: var(--r-carte); overflow: hidden; background: #000; }
.lecteur-lecon { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* Le filigrane nominatif (RG-122). Opacite 0,28, seule exemption documentee de la
   regle de contraste de DEC-31 : il n'est pas fait pour etre lu confortablement.
   Il ne capte jamais le pointeur, sans quoi il generait la lecture. */
.filigrane {
    position: absolute;
    color: rgba(255, 253, 249, .28);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    transition: top .6s ease, left .6s ease;
}

.mention-reprise { color: var(--ardoise); font-size: 13.5px; margin: 10px 0 0; }

.nav-lecon { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.nav-lecon a { color: var(--accent-texte); font-weight: 700; text-decoration: none; }
.nav-lecon a:hover { color: var(--accent-fonce); text-decoration: underline; }

.sommaire { margin-top: 22px; background: var(--papier); color: var(--encre); border-radius: var(--r-carte); padding: 18px 22px; }
.sommaire summary { font-weight: 800; cursor: pointer; }
.sommaire .lecon-liste { margin-top: 14px; }
.sommaire .lecon { text-decoration: none; color: inherit; }
.lecon-courante { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }

/* Le lien de telechargement d'un document reprend la pastille d'etat : meme place,
   meme poids, et il porte les couleurs de l'accent sur son propre fond pastel. */
.lecon a.etat { text-decoration: none; }
.lecon a.etat:hover { background: var(--accent); color: var(--sur-accent); }
.lecon-liste a.lecon { text-decoration: none; color: inherit; }

/* ----- Mes appareils (tranche 1.6, etape C) ----- */

.compteur-appareils { color: var(--ardoise); font-size: 14px; margin: 10px 0 0; }
.mention-appareils { color: var(--ardoise); font-size: 13.5px; margin-top: 16px; }

.appareil-rang {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--ligne);
}
.appareil-rang:last-child { border-bottom: 0; }
.appareil-rang .txt { flex: 1; min-width: 0; }
.appareil-rang .txt b { display: block; font-size: 15.5px; }
.appareil-rang .txt span { color: var(--ardoise); font-size: 12.5px; }

.bouton-liberer {
    background: var(--papier); border: 2px solid var(--encre); border-radius: 999px;
    padding: 6px 16px; font: inherit; font-weight: 800; font-size: 13.5px;
    color: var(--encre); cursor: pointer; transition: background .12s;
}
.bouton-liberer:hover { background: var(--papier-2); }

/* Le cadre du prestataire remplace la balise video en production (DEC-37) : meme
   place, meme format, le filigrane restant dans notre page au-dessus de lui. */
iframe.lecteur-lecon { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* ---- La zone de questions sous une lecon (QNA-01 a QNA-06). ---- */
.question-form textarea, .question textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--ligne);
    border-radius: 10px; font: inherit; color: var(--encre); background: #fff;
    resize: vertical;
}
.question-form-pied {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.question-form-pied .bouton-principal { width: auto; margin-top: 0; padding: 9px 22px; }
.question-erreur { color: var(--alerte-texte, #B3261E); font-size: 13.5px; margin: 6px 0 0; }
.question-info { color: var(--accent-fonce); font-size: 14px; font-weight: 700; margin: 12px 0 0; }
.question-lecture-seule, .question-vide { color: var(--ardoise); font-size: 14.5px; margin: 4px 0; }

.question { padding: 16px 0 14px; border-top: 1px solid var(--ligne); margin-top: 14px; }
.question-form + .question, .question-info + .question, .question-lecture-seule + .question { margin-top: 18px; }
.question-epinglee { background: #F1F6F3; border-radius: 12px; padding-inline: 14px; border-top: 0; }
.question-masquee { opacity: .75; }
.question-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.question-tete b { font-size: 14.5px; }
.question-badge {
    font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
    background: var(--accent-p); color: var(--accent-fonce);
}
.question-badge-verrou { background: #f3f4f6; color: var(--ardoise); }
.question-badge-prof { background: var(--accent); color: #fff; }
.question-corps { margin: 8px 0 0; font-size: 15px; line-height: 1.65; white-space: pre-line; }
.question-note-masquee { color: var(--ardoise); font-size: 13px; margin: 6px 0 0; font-style: italic; }
.question-gestes { display: flex; gap: 14px; align-items: baseline; margin-top: 8px; flex-wrap: wrap; }
.question-geste {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 700; color: var(--encre-douce, #374151);
}
.question-geste:hover { color: var(--accent-fonce); }
.question-vote { color: var(--accent-fonce); }
.question-vote-fait { cursor: default; color: var(--ardoise); font-weight: 400; }
.question-geste-danger { color: #B3261E; }
.question-geste-discret { color: var(--ardoise); font-weight: 400; }
.question-reponse {
    margin-top: 12px; margin-inline-start: 18px; padding: 12px 14px;
    border-inline-start: 3px solid var(--ligne); background: #fafaf9; border-radius: 0 10px 10px 0;
}
.reponse-professeur { border-inline-start-color: var(--accent); background: #EFF6F2; }

/* ---- Le centre de notifications (NOT-01) et sa cloche. ---- */
.cloche {
    position: relative; display: inline-flex; align-items: center;
    color: inherit; padding: 4px;
}
.cloche-pastille {
    position: absolute; top: -4px; inset-inline-end: -6px;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    /* Le rouge d'alerte du systeme, pas l'orange : blanc sur #E4572E tombait a
       3,68:1, sous le seuil de DEC-31. Ici 6,6:1, mesure. */
    background: #B3261E; color: #fff; font-size: 10.5px; font-weight: 800;
    display: grid; place-items: center; line-height: 1;
}
.notification-vide { color: var(--ardoise); font-size: 15px; margin: 0; }
.notification-ligne {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 14px 0; border-bottom: 1px solid var(--ligne);
}
.notification-ligne:last-of-type { border-bottom: 0; }
.notification-nouvelle { position: relative; padding-inline-start: 14px; }
.notification-nouvelle::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 22px;
    width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
}
.notification-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.notification-texte b { font-size: 14.5px; }
.notification-texte a { font-size: 13.5px; font-weight: 700; color: var(--accent-fonce); }
.notification-detail { color: var(--ardoise); font-size: 13.5px; }
.notification-corps-annonce {
    font-size: 14.5px; line-height: 1.6; white-space: pre-line;
    padding: 8px 12px; background: #fafaf9; border-radius: 8px;
    border-inline-start: 3px solid var(--ligne);
}
.notification-ligne time { white-space: nowrap; font-size: 12.5px; }
.notification-pages { display: flex; justify-content: space-between; margin-top: 14px; }
.notification-pages a { font-weight: 700; color: var(--accent-fonce); }
.canal-professeur {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; font-size: 14px;
}
.canal-professeur a { font-weight: 800; color: var(--accent-fonce); }

/* ---- L'en-tete de l'espace, rehausse : logo, navigation, etat actif. ---- */
.marque-lien {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; font-weight: 800; font-size: 17px;
}
.marque-logo {
    width: 30px; height: 30px; display: block;
    -webkit-mask: url('/images/logo-masque.png') center/contain no-repeat;
    mask: url('/images/logo-masque.png') center/contain no-repeat;
    background: var(--accent);
}
.nav-espace {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin-inline: 16px; flex: 1; min-width: 0;
}
.nav-espace a {
    padding: 7px 14px; border-radius: 999px;
    font-weight: 700; font-size: 14px;
    color: var(--ardoise); text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.nav-espace a:hover { background: var(--papier-2); color: var(--encre); }
.nav-espace a.actif { background: var(--accent); color: #fff; }

@media (max-width: 720px) {
    .application-entete { flex-wrap: wrap; gap: 8px; }
    /* flex-basis et non width : avec flex:1 (base 0), une largeur explicite est
       ignoree par le dimensionnement flex, la nav restait ecrasee sur la premiere
       ligne et ses pastilles debordaient de l'ecran. Mesure par l'audit. */
    .nav-espace { order: 3; flex: 0 0 100%; margin-inline: 0; justify-content: flex-start; }
    .nav-espace a { padding: 6px 12px; font-size: 13.5px; }
}

/* ---- La refonte de l'espace eleve (16 aout) : chiffres, acces rapides,
        en-tete d'unite, lecon en deux colonnes. ---- */

/* Les trois chiffres du tableau de bord : dire ou en est l'eleve avant de lister. */
.chiffres-espace {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px;
}
.chiffre-espace {
    background: var(--papier); color: var(--encre);
    border-radius: var(--r-carte); padding: 16px 18px;
    box-shadow: var(--ombre);
}
.chiffre-espace b { display: block; font-size: 30px; font-weight: 900; line-height: 1.1; }
.chiffre-espace b small { font-size: 16px; }
.chiffre-espace span { color: var(--ardoise); font-size: 12.5px; font-weight: 700; }

/* Les acces rapides : des cartes qui disent ou elles menent et pourquoi. */
.acces-rapides {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px; margin-top: 28px;
}
.acces-rapide {
    display: block; text-decoration: none;
    background: var(--papier);
    border-radius: var(--r-carte); padding: 16px 18px;
    color: var(--encre);
    box-shadow: var(--ombre);
    transition: transform .15s, box-shadow .15s;
}
.acces-rapide:hover { transform: translateY(-2px); box-shadow: 0 4px 4px rgba(23, 20, 16, .06), 0 16px 40px rgba(23, 20, 16, .12); }
.acces-rapide .doodle { color: var(--accent); }
.acces-rapide b { display: block; color: var(--encre); font-size: 15px; margin-top: 8px; }
.acces-rapide span { display: block; font-size: 12.5px; color: var(--ardoise); margin-top: 2px; }

/* Le professeur sur la carte d'unite : une unite est un cours signe. */
.unite-espace-prof { display: block; color: var(--ardoise); font-size: 13px; font-weight: 700; margin-top: 2px; }

/* L'en-tete du detail d'unite : titre, professeur et avancement en un bloc. */
.entete-unite {
    background: var(--papier); color: var(--encre);
    border-radius: var(--r-carte); padding: 22px 24px;
    box-shadow: var(--ombre); margin-bottom: 18px;
}
.entete-unite h1 { color: var(--encre); margin: 0 0 4px; }
.entete-unite .sous-titre-unite { margin: 0 0 4px; color: var(--ardoise); }
.entete-unite .unite-prof { color: var(--ardoise); margin: 0; font-size: 14.5px; }
/* Deux classes et non une : la regle generale des paragraphes du chrome sombre
   (.application-contenu p, en papier translucide) battait la classe seule, et le
   pied devenait blanc sur blanc dans la carte claire. Paye a l'audit. */
.entete-unite .entete-unite-pied {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; color: var(--ardoise); font-size: 13px; margin: 8px 0 0;
}
.entete-unite-pct { font-weight: 900; color: var(--accent-texte); font-size: 17px; }
.entete-unite-pct small { font-size: 12px; }
.entete-unite .canal-professeur { margin-top: 14px; }

/* La lecon en deux colonnes au bureau : le contenu travaille, le sommaire situe.
   En dessous de 1080 px, une seule colonne, le sommaire redevient repliable. */
.application-contenu-large { max-width: 1200px; }
@media (min-width: 1080px) {
    .lecon-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
    .lecon-laterale { position: sticky; top: 20px; }
    .lecon-laterale .sommaire { margin-top: 0; }
}
@media (max-width: 720px) {
    .chiffres-espace { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .chiffre-espace { padding: 12px 12px; }
    .chiffre-espace b { font-size: 22px; }
}

/* ---- La barre inferieure fixe du telephone (docs/06 section 5.2) : la
        navigation vit sous le pouce, l'en-tete se contente de la marque. ---- */
.barre-espace {
    position: fixed; bottom: 0; inset-inline: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--papier);
    border-top: 1px solid var(--ligne);
    box-shadow: 0 -6px 24px rgba(23, 20, 16, .07);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.barre-espace a {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 9px 4px 8px;
    color: var(--ardoise); text-decoration: none;
    font-size: 11px; font-weight: 700;
}
.barre-espace a.actif { color: var(--accent-fonce); }
.barre-espace a.actif::before {
    content: ''; position: absolute; top: 0; width: 34px; height: 3px;
    border-radius: 0 0 999px 999px; background: var(--accent);
}
.barre-espace .cloche-pastille { top: 4px; inset-inline-end: calc(50% - 20px); font-style: normal; }

@media (max-width: 719px) {
    /* Sous 720 px la barre porte la navigation : l'en-tete rend ses pastilles et
       sa cloche, et le contenu garde l'air au-dessus de la barre. */
    .application-entete .nav-espace, .application-entete .cloche { display: none; }
    .application-contenu { padding-bottom: 92px; }
}
@media (min-width: 720px) {
    .barre-espace { display: none; }
}

/* ---- Portraits, vignettes et animations de progression (16 aout). ---- */

/* Le portrait : photo ou initiales, toujours rond, jamais deforme. */
.avatar {
    display: inline-grid; place-items: center;
    border-radius: 999px; object-fit: cover;
    flex: none; vertical-align: middle;
    background: var(--papier-2);
}
.avatar-initiales { color: #fff; font-weight: 800; letter-spacing: .01em; line-height: 1; }
.avatar-entete { display: inline-flex; }
.avatar-entete .avatar { box-shadow: 0 0 0 2px var(--papier), 0 0 0 3px var(--ligne); }

/* Le champ photo du profil : le portrait actuel a cote du champ, on voit ce
   qu'on remplace. */
.champ-photo { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 6px; }
.champ-photo-texte { flex: 1; min-width: 0; }
.champ-photo-texte .champ { margin-top: 0; }
.champ-photo input[type="file"] { font-size: 13.5px; max-width: 100%; }
.champ-case { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; color: var(--ardoise); }
.champ-case input { width: auto; }

/* La vignette de l'unite, en tete de carte. Sans image, un motif sur teinte. */
.unite-vignette {
    display: grid; place-items: center;
    aspect-ratio: 16 / 7; margin: -20px -22px 14px;
    border-radius: var(--r-carte) var(--r-carte) 0 0;
    overflow: hidden; color: var(--accent-fonce);
}
.unite-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unite-espace-prof { display: flex; align-items: center; gap: 8px; }

/* Les animations de progression. Le rendu serveur pose la largeur finale en
   style inline ; l'animation part de zero et s'arrete dessus, sans JavaScript
   (DEC-08) : une keyframe sans « to » revient a la valeur calculee. */
@keyframes jauge-pousse { from { width: 0; } }
@keyframes carte-apparait { from { opacity: 0; transform: translateY(8px); } }

.jauge-part { animation: jauge-pousse .9s cubic-bezier(.2, .7, .3, 1) both; }
.chiffre-espace { animation: carte-apparait .5s ease-out both; }
.chiffre-espace:nth-child(2) { animation-delay: .07s; }
.chiffre-espace:nth-child(3) { animation-delay: .14s; }

/* Le reglage systeme prime : qui demande moins d'animation n'en recoit aucune,
   et surtout garde des jauges a leur vraie valeur. */
@media (prefers-reduced-motion: reduce) {
    .jauge-part, .chiffre-espace { animation: none; }
    .unite-espace, .acces-rapide, .carte-reprise { transition: none; }
}

/* ---- Le passage d'un quiz (QCM-04, QCM-05). Mobile d'abord : les propositions
        sont des cibles larges, faciles a viser au pouce. ---- */
.quiz-intro { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; }
.quiz-intro b { font-size: 16px; color: var(--encre); }
.quiz-intro span { color: var(--ardoise); font-size: 13.5px; }
.quiz-apercu-note, .quiz-tentatives, .quiz-epuise { font-size: 13.5px; margin: 0 0 12px; }
.quiz-apercu-note { color: var(--accent-fonce); font-weight: 700; }
.quiz-tentatives { color: var(--ardoise); }
.quiz-epuise { color: var(--ambre); font-weight: 700; }

.quiz-question { padding: 16px 0; border-top: 1px solid var(--ligne); }
.quiz-question:first-of-type { border-top: 0; padding-top: 0; }
.quiz-question-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.quiz-question-tete b { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.55; }
.quiz-numero {
    display: grid; place-items: center; flex: none;
    width: 26px; height: 26px; border-radius: 999px;
    background: var(--papier-2); color: var(--ardoise);
    font-size: 13px; font-weight: 800;
}
.quiz-points { color: var(--ardoise); font-size: 12.5px; white-space: nowrap; }

.quiz-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.quiz-option {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 14px; border: 2px solid var(--ligne); border-radius: 12px;
    background: #fff; color: var(--encre); font: inherit; font-size: 14.5px;
    text-align: start; cursor: pointer; transition: border-color .12s, background .12s;
}
.quiz-option:hover:not(:disabled) { border-color: var(--accent); }
.quiz-option:disabled { cursor: default; }
.quiz-coche { color: var(--ardoise); font-size: 15px; flex: none; }
.quiz-option-choisie { border-color: var(--accent); background: #F4F9F7; }
.quiz-option-choisie .quiz-coche { color: var(--accent); }
.quiz-option-bonne { border-color: var(--ok); background: var(--ok-bg); }
.quiz-marque { margin-inline-start: auto; color: var(--ok); font-weight: 900; }

.quiz-numerique { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.quiz-numerique input { max-width: 220px; }
.quiz-unite { color: var(--ardoise); font-weight: 700; }

.quiz-explication {
    margin-top: 12px; padding: 11px 14px; border-radius: 10px;
    background: var(--papier-2); font-size: 14px;
}
.quiz-explication b { display: block; margin-bottom: 3px; }
.quiz-explication p { margin: 0; color: var(--ardoise); line-height: 1.6; }
.quiz-juste .quiz-explication { background: var(--ok-bg); }
.quiz-juste .quiz-explication b { color: var(--ok); }
.quiz-faux .quiz-explication { background: var(--err-bg); }
.quiz-faux .quiz-explication b { color: var(--err); }

.quiz-rendre { max-width: 280px; }
.quiz-resultat {
    margin-top: 18px; padding: 20px; border-radius: var(--r-carte);
    background: var(--papier-2); text-align: center;
}
.quiz-resultat-reussi { background: var(--ok-bg); }
.quiz-note { display: block; font-size: 30px; font-weight: 900; color: var(--encre); }
.quiz-pourcentage { display: block; font-size: 15px; font-weight: 800; color: var(--accent-fonce); }
.quiz-resultat p { margin: 8px 0 0; color: var(--ardoise); font-size: 14px; }
.quiz-resultat .bouton-principal { max-width: 260px; margin-inline: auto; }

/* Mes resultats (STA-04). */
.resultat-ligne {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--ligne);
}
.resultat-ligne:last-child { border-bottom: 0; }
.resultat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resultat-txt b { font-size: 14.5px; }
.resultat-txt span { color: var(--ardoise); font-size: 12.5px; }
.resultat-note { font-weight: 900; font-size: 17px; white-space: nowrap; }
.resultat-reussi { color: var(--ok); }
.resultat-echoue { color: var(--ambre); }

/* ---- Les seances en direct, cote eleve (LIV-02, LIV-05). ---- */
.sessions-liste { display: flex; flex-direction: column; gap: 14px; }
.session-carte { margin-top: 0; }
.session-annulee { opacity: .72; }
.session-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.session-tete b { font-size: 17px; }
.session-en-cours { background: var(--err-bg); color: var(--err); }
.session-quand { color: var(--encre); font-weight: 700; font-size: 14px; margin: 8px 0 0; }
.session-prof { display: flex; align-items: center; gap: 8px; color: var(--ardoise); font-size: 13.5px; margin: 6px 0 0; }
.session-description { color: var(--ardoise); font-size: 14px; margin: 10px 0 0; line-height: 1.6; }
.session-motif { color: var(--ambre); font-size: 14px; margin: 10px 0 0; font-weight: 700; }
.session-gestes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.session-gestes .bouton-principal { width: auto; margin-top: 0; padding: 10px 22px; }
.session-desinscrire {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ardoise);
    text-decoration: underline;
}
.session-desinscrire:hover { color: var(--encre); }
.session-rappel { color: var(--ok); font-size: 13px; font-weight: 700; }