/* Genialab — « Bureau 16 bits » (décision 0019) : palette fixe, accent orange, Pixelify Sans + Atkinson Hyperlegible Next. */
:root {
  --encre: #2E2433;
  --papier: #F6EBDD;
  --papier-2: #F3E3D3;
  --blanc: #FFFFFF;
  --sur-couleur: #FFFFFF; /* texte posé sur un aplat de couleur (vert, nuit, bois, rouge) : blanc dans les deux thèmes */
  --nuit: #2F4B66;
  --gris: #5E5566;
  --accent: #E3612B;
  --accent-sombre: #B3352A;
  --vert: #2F8F4E;
  --rouge: #C8331F;
  --jaune: #F59E1B;
  --ciel: #9FD3F0;
  --creme: #FFF1A8;
  --bois: #7A4E32;
  /* Couleurs de texte lisibles sur les fonds du thème (4,5:1 au moins) : le vert, le rouge, l'orange et le bleu nuit de la
     palette servent d'aplats et de bordures ; posés en texte, on prend ces variantes. */
  --accent-texte: #AD3F16;
  --accent-fond: #B94418; /* aplat orange sous un petit texte blanc (pastilles, petits boutons) */
  --vert-fond: #256F3D; /* aplat vert sous un petit texte blanc */
  --vert-texte: #246B3A;
  --rouge-texte: #B0281A;
  --nuit-texte: #2F4B66;
  --sur-clair: #2E2433; /* texte posé sur un aplat clair (jaune, ciel, médailles) : sombre dans les deux thèmes */
  /* Fonds d'état (réponse juste, fausse, choisie ; encadrés) : clairs en thème clair, teintés sombres en thème sombre. */
  --fond-juste: #DDEFD9;
  --fond-faux: #FBD9CF;
  --fond-choisi: #FDEEE6;
  --fond-info: #EEF2F6;
  --fond-carte-claire: #FFF6E0;
  --fond-pays: #DCE8F7;
  --ombre: 0 4px 0 var(--encre);
  --titre: "Pixelify Sans", ui-monospace, monospace;
  --texte: "Atkinson Hyperlegible Next", system-ui, sans-serif;
}
/* Thème sombre : « Bureau 16 bits » de nuit. Suit l'appareil, ou le réglage du profil (data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --encre: #F2EAE0; --papier: #1E1A24; --papier-2: #2B2533; --blanc: #29232F; --gris: #B9AFC4; --accent-sombre: #F28A5B; --creme: #3A3320; --accent-texte: #F28A5B; --vert-texte: #6FCF8E; --rouge-texte: #FF8F7A; --nuit-texte: #A9C8E8; --fond-juste: #1F3B29; --fond-faux: #45231F; --fond-choisi: #452B20; --fond-info: #25303B; --fond-carte-claire: #332B22; --fond-pays: #1F2F45; --ombre: 0 4px 0 #0C0A10; color-scheme: dark; }
}
:root[data-theme="dark"] { --encre: #F2EAE0; --papier: #1E1A24; --papier-2: #2B2533; --blanc: #29232F; --gris: #B9AFC4; --accent-sombre: #F28A5B; --creme: #3A3320; --accent-texte: #F28A5B; --vert-texte: #6FCF8E; --rouge-texte: #FF8F7A; --nuit-texte: #A9C8E8; --fond-juste: #1F3B29; --fond-faux: #45231F; --fond-choisi: #452B20; --fond-info: #25303B; --fond-carte-claire: #332B22; --fond-pays: #1F2F45; --ombre: 0 4px 0 #0C0A10; color-scheme: dark; }
[data-theme="light"] { --encre: #2E2433; --papier: #F6EBDD; --papier-2: #F3E3D3; --blanc: #FFFFFF; --gris: #5E5566; --accent-sombre: #B3352A; --creme: #FFF1A8; --accent-texte: #AD3F16; --vert-texte: #246B3A; --rouge-texte: #B0281A; --nuit-texte: #2F4B66; --fond-juste: #DDEFD9; --fond-faux: #FBD9CF; --fond-choisi: #FDEEE6; --fond-info: #EEF2F6; --fond-carte-claire: #FFF6E0; --fond-pays: #DCE8F7; color: var(--encre); }
* { box-sizing: border-box; }
html { background: var(--papier); }
body { margin: 0; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0; font-family: var(--texte); color: var(--encre); background: var(--papier); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img.pixel { image-rendering: pixelated; }
h1, h2, h3 { font-family: var(--titre); font-weight: 500; line-height: 1.2; letter-spacing: .01em; }
h1 { font-size: 1.7rem; margin: .4em 0; }
h2 { font-size: 1.3rem; margin: .8em 0 .4em; }
p { margin: .5em 0; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.bandeau-preversion { background: var(--encre); color: var(--creme); text-align: center; font-size: .8rem; padding: 4px 8px; }

.barre { position: sticky; top: 0; z-index: 9; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--papier); border-bottom: 3px solid var(--encre); }
.bandeau-paiement { margin: 0; padding: 8px 16px; background: var(--rouge); color: var(--sur-couleur); font-weight: 700; font-size: 0.9rem; }
.bandeau-paiement a { color: var(--sur-couleur); text-decoration: underline; }
.k-garantie fieldset.k-motifs { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.k-garantie .k-confirmer { display: grid; gap: 8px; margin-top: 8px; }
.k-echec { border-color: var(--rouge); }
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--titre); font-size: 1.35rem; font-weight: 700; color: var(--encre); text-decoration: none; }
.serie { display: flex; align-items: center; gap: 4px; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.2rem; }

.onglets { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; background: var(--blanc); border-top: 3px solid var(--encre); padding-bottom: env(safe-area-inset-bottom); }
.onglets a { flex: 1; text-align: center; padding: 12px 4px; font-family: var(--texte); font-weight: 700; color: var(--gris); text-decoration: none; min-height: 48px; }
.onglets a.actif { color: var(--accent-texte); background: var(--papier-2); }

.page { max-width: 640px; margin: 0 auto; padding: 16px 16px 110px; }
.page.etroite { max-width: 420px; }
.chargement { text-align: center; color: var(--gris); padding: 40px 0; }
.salut { font-size: 1.5rem; }
.surtitre { font-family: var(--texte); font-weight: 700; color: var(--accent-sombre); font-size: .9rem; margin: 0; }
.section-titre { margin-top: 1.4em; }
.section-sous { color: var(--gris); }
.centre { display: block; margin: 8px auto; }

.btn { display: block; width: 100%; min-height: 52px; margin: 12px 0 0; padding: 12px 18px; border: 3px solid var(--encre); border-radius: 12px; background: var(--accent); color: #FFFFFF; font-family: var(--texte); font-weight: 700; font-size: 1.17rem; box-shadow: var(--ombre); cursor: pointer; transition: transform .06s; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.btn:disabled { background: #cbbfb3; color: var(--gris); cursor: not-allowed; box-shadow: none; }
.btn-second { background: var(--blanc); color: var(--encre); }
.lien { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--accent-sombre); text-decoration: underline; cursor: pointer; min-height: 44px; }
.icone { background: var(--blanc); border: 3px solid var(--encre); border-radius: 10px; width: 44px; height: 44px; font-size: 1.2rem; cursor: pointer; flex: none; }
.erreur { color: var(--rouge-texte); font-weight: 600; }

.reprendre { background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; padding: 16px; box-shadow: var(--ombre); }
.reprendre h2 { margin: .2em 0; }
.liste-cours { display: grid; gap: 12px; }
.carte-cours { display: flex; gap: 14px; align-items: center; background: var(--blanc); border: 3px solid var(--encre); border-left: 12px solid var(--accent-cours, var(--accent)); border-radius: 14px; padding: 12px; color: var(--encre); text-decoration: none; box-shadow: var(--ombre); }
.carte-cours > div { flex: 1; display: grid; gap: 2px; }
.carte-cours strong { font-family: var(--texte); font-weight: 700; font-size: 1.2rem; }
.carte-cours span { color: var(--gris); font-size: .9rem; }
.jauge { height: 10px; background: var(--papier-2); border: 2px solid var(--encre); border-radius: 6px; overflow: hidden; }
.jauge > div { height: 100%; background: var(--accent-cours, var(--accent)); }
.appel-compte, .test-final-bloc { margin-top: 24px; padding: 16px; border: 3px dashed var(--gris); border-radius: 14px; }

/* Parcours */
.parcours-tete { display: flex; gap: 12px; align-items: center; }
.parcours-tete h1 { margin: 0; }
.parcours-tete p { margin: 0; color: var(--gris); }
.unite-titre { display: grid; background: var(--accent-cours); color: var(--sur-couleur); border: 3px solid var(--encre); border-radius: 12px; padding: 10px 14px; font-size: 1.1rem; }
.unite-titre span { font-size: .8rem; opacity: .85; text-transform: uppercase; }
.serpentin { list-style: none; padding: 8px 0; margin: 0; }
.noeud-ligne { display: flex; align-items: center; gap: 12px; margin: 14px 0; position: relative; }
.noeud-ligne.pos-0 { padding-left: 8%; } .noeud-ligne.pos-1 { padding-left: 32%; } .noeud-ligne.pos-2 { padding-left: 56%; }
.noeud { flex: none; width: 64px; height: 64px; border: 3px solid var(--encre); border-radius: 16px; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 700; cursor: pointer; box-shadow: 0 5px 0 var(--encre); }
.noeud.fait { background: var(--vert-fond); color: var(--sur-couleur); }
.noeud.actuel { background: var(--accent); color: var(--sur-couleur); animation: pulse 1.6s ease-in-out infinite; }
.noeud.a-venir { background: var(--papier-2); color: var(--gris); }
.noeud-titre { font-size: .9rem; max-width: 40%; }
.noeud-titre em { display: block; color: var(--jaune); font-style: normal; }
.noeud-bip { position: absolute; right: 0; }
@keyframes pulse { 50% { transform: translateY(-3px); } }
.fin-parcours { text-align: center; color: var(--gris); margin-top: 24px; }

/* Leçon */
.lecon { max-width: 680px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.lecon-tete { position: sticky; top: 0; z-index: 4; display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: var(--papier); }
.progression { flex: 1; height: 14px; background: var(--papier-2); border: 3px solid var(--encre); border-radius: 8px; overflow: hidden; }
.progression > div { height: 100%; background: var(--accent); transition: width .3s; }
.lecon-corps { flex: 1; padding: 8px 16px 140px; }
.groupe { animation: apparait .35s ease-out; }
@keyframes apparait { from { opacity: 0; transform: translateY(8px); } }
.l-titre { font-size: 1.8rem; }
.l-texte p { margin: .7em 0; }
.l-liste { padding-left: 1.3em; }
.l-liste li { margin: .35em 0; }
.l-liste li p { margin: 0; }
.encadre { background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 12px 16px; margin: 16px 0; }
.encadre-titre { font-family: var(--texte); font-weight: 700; font-weight: 700; margin-bottom: 4px; }
.encadre-astuce { background: var(--creme); }
.encadre-attention { background: var(--fond-faux); }
.encadre-a_retenir { background: var(--fond-juste); }
.encadre ul { padding-left: 1.2em; margin: .4em 0; }
/* « Le niveau pro » (règle N du contenu) : le plafond de l'outil, en encadré sombre, demande à copier. */
.encadre-pro { background: var(--blanc); border-color: var(--encre); box-shadow: var(--ombre); }
.pro-tete { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.pro-badge { background: var(--encre); color: var(--papier); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.pro-domaine { font-size: .8rem; color: var(--gris); font-weight: 700; }
.pro-demande { margin: 10px 0; padding: 10px 12px; background: var(--papier-2); border: 2px dashed var(--encre); border-radius: 10px; }
.pro-demande figcaption { font-size: .78rem; font-weight: 700; color: var(--gris); margin-bottom: 4px; }
.pro-demande blockquote { margin: 0; font-size: .98rem; line-height: 1.5; overflow-wrap: anywhere; }
.pro-copier { margin-top: 8px; min-height: 40px; padding: 6px 12px; border: 2px solid var(--encre); border-radius: 8px; background: var(--blanc); color: var(--encre); font-family: var(--texte); font-weight: 700; font-size: .9rem; cursor: pointer; }
.pro-sous { font-weight: 700; margin-top: 8px; }
.pro-mots { margin: 4px 0 8px; }
.pro-mots > div { padding: 5px 0; border-bottom: 1px solid var(--papier-2); }
.pro-mots dt { font-weight: 700; }
.pro-mots dd { margin: 0; color: var(--gris); font-size: .95rem; }
.pro-resultat { margin: 8px 0 0; }
.illu { margin: 16px 0; }
.illu-scene { display: flex; justify-content: center; align-items: flex-end; min-height: 180px; background: linear-gradient(var(--papier-2) 0 62%, var(--bois) 62% 66%, #A0704E 66%); border: 3px solid var(--encre); border-radius: 14px; padding: 12px; }
.illu figcaption, .capture figcaption { font-size: .8rem; color: var(--gris); margin-top: 6px; }
.capture { margin: 16px 0; }
.capture img { width: 100%; border: 3px solid var(--encre); border-radius: 12px; }
.capture-attente { background: var(--fond-info); border: 3px solid var(--nuit); border-radius: 12px; padding: 14px; }
.capture-outil { font-family: var(--texte); font-weight: 700; color: var(--nuit-texte); font-size: .9rem; }
.capture-texte { font-size: .95rem; }

.lecon-pied { position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--papier) 30%); }
.lecon-pied .btn { max-width: 648px; margin: 0 auto; }

/* Exercices */
.exo { background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; padding: 16px; margin: 18px 0; box-shadow: var(--ombre); }
.exo-question { font-weight: 700; font-size: 1.1rem; }
.exo-titre { font-family: var(--texte); font-weight: 700; font-size: 1.1rem; margin: 0; }
.exo-aide { color: var(--gris); font-size: .95rem; }
.options { display: grid; gap: 10px; margin: 12px 0; }
.option { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 52px; text-align: left; padding: 10px 14px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; cursor: pointer; }
.option.choisie { border-color: var(--accent); background: var(--fond-choisi); }
.option.bonne { border-color: var(--vert); background: var(--fond-juste); }
.option.fausse { border-color: var(--rouge); background: var(--fond-faux); animation: secoue .3s; }
.option:disabled { cursor: default; }
@keyframes secoue { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.case { flex: none; width: 24px; height: 24px; border: 3px solid var(--encre); border-radius: 6px; display: grid; place-items: center; font-weight: 700; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.deux .option { justify-content: center; text-align: center; font-family: var(--texte); font-weight: 700; }
.carte { position: relative; background: var(--papier-2); border: 3px solid var(--encre); border-radius: 14px; padding: 28px 16px 16px; font-size: 1.05rem; }
.carte-num { position: absolute; top: 6px; right: 12px; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gris); font-size: .8rem; }
.ordre-choisi { padding-left: 1.4em; min-height: 12px; }
.ordre-choisi li { margin: 6px 0; }
.ordre-choisi button { width: 100%; text-align: left; padding: 8px 12px; border: 3px solid var(--nuit); border-radius: 10px; background: var(--fond-info); cursor: pointer; }
.ordre-choisi li.bonne button { border-color: var(--vert); }
.ordre-choisi li.fausse button { border-color: var(--rouge); }
.paires { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paires > div { display: grid; gap: 10px; align-content: start; }
.paires .option { font-size: .92rem; min-height: 60px; }
.paires .option:disabled:not(.fausse) { opacity: .75; border-width: 4px; }
.retour { border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.retour-juste { background: var(--fond-juste); border: 3px solid var(--vert); }
.retour-faux { background: var(--fond-faux); border: 3px solid var(--rouge); }
.retour p { margin: .3em 0 0; }
.exo-resolu { color: var(--vert-texte); font-weight: 600; margin: 12px 0; }

.pratique { background: #22263A; color: #F2EEF6; border-color: var(--encre); }
.pratique .exo-aide { color: #C9C3D6; }
.pratique-entete { font-family: var(--texte); font-weight: 700; display: flex; gap: 8px; align-items: center; font-size: 1.1rem; }
.badge { background: var(--accent-fond); color: var(--sur-couleur); border-radius: 999px; padding: 2px 10px; font-size: .75rem; }
.reglages { display: flex; flex-wrap: wrap; gap: 6px; }
.reglage { background: #3A3F5C; border-radius: 999px; padding: 2px 10px; font-size: .8rem; }
.prompt { background: #2E3350; border: 2px solid #4B5178; border-radius: 12px; padding: 14px; line-height: 2.2; font-size: 1rem; }
.prompt-faux { border-color: var(--rouge); }
.prompt-libre { white-space: pre-wrap; font-family: var(--texte); line-height: 1.5; }
.trou { border: 2px solid var(--jaune); background: #4A4020; color: #FFF1A8; border-radius: 8px; padding: 2px 10px; margin: 0 2px; min-height: 36px; cursor: pointer; }
.trou.vide { border-style: dashed; background: transparent; color: #C9C3D6; min-width: 70px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.etiquette { background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); border-radius: 10px; padding: 8px 12px; min-height: 44px; cursor: pointer; }
.reponse-ia { background: #F2EEF6; color: var(--encre); border-radius: 12px; padding: 12px 14px; margin-top: 12px; animation: apparait .4s; }
.reponse-ia-tete { display: flex; align-items: center; gap: 8px; font-family: var(--texte); font-weight: 700; font-size: .9rem; color: var(--gris); }
.pratique .lien { color: #F7B08F; }
.pratique .retour { color: var(--encre); }

/* Fin de leçon */
.fin-lecon { text-align: center; padding-top: 32px; }
.fin-bip { animation: saute 1s ease-in-out infinite; }
@keyframes saute { 50% { transform: translateY(-8px); } }
.etoiles { font-size: 3rem; letter-spacing: 8px; color: #D9CFC4; }
.etoiles .on { color: var(--jaune); text-shadow: 0 3px 0 var(--encre); }
.fin-stats, .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.fin-stats div, .stats div { background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 12px; display: grid; }
.fin-stats strong, .stats strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.8rem; color: var(--accent-texte); }
.fin-stats span, .stats span { color: var(--gris); font-size: .9rem; }

/* Formulaires et profil */
.formulaire { display: grid; gap: 12px; }
.formulaire label { display: grid; gap: 4px; font-weight: 600; }
.formulaire input { font: inherit; padding: 12px; min-height: 48px; border: 3px solid var(--encre); border-radius: 10px; background: var(--blanc); color: var(--encre); }
.profil-tete { display: flex; gap: 14px; align-items: center; }
.profil-tete h1 { margin: 0; }
.profil-tete p { margin: 0; color: var(--gris); overflow-wrap: anywhere; }
.profil-tete > div { min-width: 0; }
.avatar { width: 72px; height: 72px; border: 3px solid var(--encre); border-radius: 50%; background: var(--creme); display: grid; place-items: center; font-family: var(--texte); font-weight: 700; font-size: 2rem; }
.bascule { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.bascule input { width: 22px; height: 22px; accent-color: var(--accent); }

/* Feuille commune (volets, médailles, partage, sortie, réglages du certificat) : une seule définition ; chaque module
   ne pose que son fond (.voile des jeux, .feuille-fond du certificat, .t-voile du tunnel) et ses modificateurs. */
.feuille { color: var(--encre); width: 100%; max-width: 560px; max-height: 88dvh; overflow: auto; background: var(--papier); border: 3px solid var(--encre); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); animation: feuille-monte .3s ease-out; }
@media (min-width: 768px) { .feuille { border-bottom: 3px solid var(--encre); border-radius: 20px; } }
@keyframes feuille-monte { from { transform: translateY(40px); opacity: 0; } }
.feuille-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.feuille-tete h2 { margin: 0; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Police pixel : jamais de ligatures (« Ch » et « Cl » deviennent un seul signe proche du « O »). */
h1, h2, h3, .logo, [class*="titre"], .btn, .onglets a { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0; }

/* Accueil dans l'app, test de niveau, série, coquille (onglets, carrousels, parcours), outils IA — lots 5, 6, 10, 14. */

/* Lecteur de planches (brand/formation-ia/animations/animations.css) */
.sb-anim { display: inline-block; flex: none; width: calc(var(--l) * var(--e, 3) * 1px); height: calc(var(--h) * var(--e, 3) * 1px);
  background: var(--src) 0 0 / calc(var(--l) * var(--n) * var(--e, 3) * 1px) 100% no-repeat; image-rendering: pixelated;
  animation: sb-planche-fin calc(var(--n) / var(--fps, 12) * 1s) steps(var(--n), jump-none) 1 forwards; vertical-align: middle; }
.sb-anim.sb-boucle { animation: sb-planche calc(var(--n) / var(--fps, 12) * 1s) steps(var(--n)) infinite; }
@keyframes sb-planche { from { background-position: 0 0; } to { background-position: calc(var(--l) * var(--n) * var(--e, 3) * -1px) 0; } }
@keyframes sb-planche-fin { from { background-position: 0 0; } to { background-position: calc((var(--n) - 1) * var(--l) * var(--e, 3) * -1px) 0; } }
@media (prefers-reduced-motion: reduce) { .sb-anim { animation: none !important; background-position: calc(var(--fin, 0) * var(--l) * var(--e, 3) * -1px) 0; } }

/* Barre du haut : pastille de série */
.pastille-serie { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px 2px 8px; border: 3px solid var(--encre); border-radius: 999px; background: var(--blanc); color: var(--encre); text-decoration: none; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.15rem; min-height: 44px; }
.pastille-serie.grande { font-size: 1.3rem; margin: 16px auto 0; }
.pastille-serie.serie-grise strong { color: var(--gris); }

/* Onglets du bas à icône */
.onglets a { display: grid; justify-items: center; gap: 2px; font-size: .85rem; }
.onglet-icone { width: 24px; height: 24px; background: center / contain no-repeat; image-rendering: pixelated; opacity: .6; }
.onglets a.actif .onglet-icone { opacity: 1; }


/* Mascotte flottante */
.mascotte { position: fixed; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 6; background: none; border: 0; padding: 0; cursor: pointer; }
@media (min-width: 900px) { .mascotte { right: calc(50% - 440px); } }

/* Toast */
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 30; max-width: 520px; margin: 0 auto; background: var(--encre); color: var(--papier); border-radius: 12px; padding: 12px 14px; box-shadow: var(--ombre); animation: apparait .25s ease-out; }

/* Accueil « Cours » */
.accueil > section, .accueil > .semaine-serie { margin-bottom: 20px; }
.semaine-serie { display: block; color: var(--encre); text-decoration: none; }
.semaine-serie p { margin: 0 0 8px; }
.semaine-cases { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.semaine-cases li { display: grid; place-items: center; min-height: 44px; border-radius: 999px; background: var(--papier-2); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--gris); }
.semaine-cases li.fait { background: var(--fond-juste); color: var(--vert-texte); font-size: 1.1rem; }
.semaine-cases li.aujourdhui { border: 3px solid var(--accent); color: var(--accent-sombre); }
.reprendre h2 { font-size: 1.15rem; }
.reprendre-tete { display: flex; gap: 12px; align-items: center; margin: 8px 0 12px; }
.reprendre-tete div { display: grid; }
.reprendre-tete span { color: var(--gris); font-size: .95rem; }
.reprendre-meta { display: flex; justify-content: space-between; font-size: .9rem; color: var(--gris); }
.reprendre-meta strong { color: var(--accent-sombre); }
.reprendre-meta a { color: var(--accent-sombre); font-weight: 700; }
.carte-cours-couv { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 12px; background: color-mix(in srgb, var(--accent-cours, var(--accent)) 25%, var(--blanc)); border: 2px solid var(--encre); overflow: hidden; }
.carte-cours-couv img { width: 56px; height: 56px; }
.carte-programme .carrousel-tete, .carrousel-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.carrousel-tete h2 { margin: .6em 0 .4em; font-size: 1.15rem; }
.voir-tout { background: var(--papier-2); color: var(--accent-sombre); border-radius: 10px; padding: 6px 10px; font-size: .85rem; text-decoration: none; white-space: nowrap; min-height: 32px; }
.programme-bloc { display: block; background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; padding: 14px; color: var(--encre); text-decoration: none; box-shadow: var(--ombre); }
.programme-bloc-tete { display: flex; justify-content: space-between; gap: 8px; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.pastilles-cours { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pastilles-cours li { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; background: color-mix(in srgb, var(--accent-cours, var(--papier-2)) 18%, var(--blanc)); font-size: .72rem; }
.case-test { background: var(--papier-2) !important; color: var(--gris); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.case-test.ouverte { background: var(--creme) !important; color: var(--encre); }
.bannieres { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.banniere { scroll-snap-align: start; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: linear-gradient(120deg, var(--blanc), var(--papier-2)); border: 3px solid var(--encre); border-radius: 14px; padding: 12px; color: var(--encre); text-decoration: none; min-height: 88px; }
.banniere div { display: grid; gap: 2px; }
.banniere span { font-size: .88rem; color: var(--gris); }
.carrousel-piste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 70%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; }
.carrousel-piste > * { scroll-snap-align: start; }
@media (min-width: 700px) { .carrousel-piste { grid-auto-columns: 260px; } .bannieres { grid-auto-columns: 48%; } }
.carte-cours.compacte { flex-direction: column; align-items: flex-start; }
.carte-cours.a-venir { text-align: left; width: 100%; font: inherit; cursor: pointer; opacity: .9; }
.carte-cours.a-venir .carte-cours-couv { background: var(--papier-2); }
.badge-bientot { justify-self: start; background: var(--papier-2); color: var(--accent-sombre) !important; border: 2px solid var(--encre); border-radius: 999px; padding: 0 8px; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .75rem !important; }
.etiquettes-cours { font-size: .8rem !important; }
.grille-cours { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 700px) { .grille-cours { grid-template-columns: 1fr 1fr; } }
.pastilles-filtres { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; }
.pastilles-filtres button { flex: none; min-height: 40px; padding: 6px 12px; border: 2px solid var(--encre); border-radius: 999px; background: var(--blanc); cursor: pointer; }
.pastilles-filtres button.actif { background: var(--encre); color: var(--papier); }
.carte-programme-cat { display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 12px; cursor: pointer; font: inherit; color: var(--encre); position: relative; }
.carte-programme-cat div { display: grid; flex: 1; }
.carte-programme-cat span { color: var(--gris); font-size: .9rem; }
.carte-programme-cat.a-venir { opacity: .85; }
.feuille-cours { list-style: none; padding: 0; display: grid; gap: 8px; }
.feuille-cours li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 2px dashed var(--papier-2); padding: 6px 0; }
.feuille-cours span { color: var(--gris); font-size: .9rem; }
.nav-plein { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.nav-plein h1 { margin: 0; font-size: 1.3rem; }
.carte-lien { display: flex; gap: 12px; align-items: center; background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 12px; margin: 12px 0; color: var(--encre); text-decoration: none; min-height: 64px; }
.carte-lien div { display: grid; }
.carte-lien span { color: var(--gris); font-size: .9rem; }
.pied-page { text-align: center; color: var(--gris); font-size: .8rem; }
.profil-tete .roue { margin-left: auto; }
.stats strong { display: flex; align-items: center; gap: 6px; }
.reglages-page section { margin-bottom: 20px; }
.bascule span { display: grid; }
.bascule small, .reglage-ligne small { color: var(--gris); font-size: .85rem; display: block; }
.choix-theme { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.choix-theme label { display: flex; gap: 8px; align-items: center; min-height: 40px; }
.reglage-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; }
.btn-petit { width: auto; display: inline-block; min-height: 40px; padding: 6px 16px; font-size: .95rem; margin: 0; }
.btn-petit:not(.btn-second):not(:disabled) { background: var(--accent-fond); } /* petit texte blanc : l'orange foncé tient 4,5:1 */

/* Parcours en serpentin */
.parcours-tete { position: sticky; top: 62px; z-index: 9; background: var(--papier); padding: 6px 0; }
.parcours-tete > div { flex: 1; }
.parcours-tete h1 { font-size: 1.3rem; }
.pastille-pct { margin-left: auto; background: var(--blanc); border: 2px solid var(--encre); border-radius: 999px; padding: 4px 10px; color: var(--accent-sombre); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.carte-unite { display: flex; gap: 12px; align-items: center; width: 100%; margin: 8px 0 4px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 10px 12px; cursor: pointer; text-align: left; font: inherit; color: var(--encre); }
.carte-unite div { display: grid; }
.carte-unite span { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .75rem; color: var(--accent-sombre); text-transform: uppercase; }
.carte-unite small { color: var(--gris); }
.unite-separateur { display: flex; align-items: center; gap: 10px; color: var(--gris); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9rem; margin: 20px 0 6px; }
.unite-separateur::before, .unite-separateur::after { content: ""; flex: 1; border-top: 2px dashed var(--gris); opacity: .5; }
.serpentin { position: relative; }
.noeud-ligne { min-height: 76px; }
.noeud-ligne + .noeud-ligne::before { content: ""; position: absolute; left: 50%; top: -18px; width: 3px; height: 18px; background: var(--papier-2); }
.noeud { display: grid; place-items: center; }
.noeud.intro { background: var(--jaune); color: var(--sur-clair); }
.noeud.intro.fait { background: var(--vert-fond); color: var(--sur-couleur); }
.noeud.maitrise { background: var(--blanc); color: var(--vert-texte); border-style: dashed; }
.maitrise-etiquette { display: inline-block !important; margin-left: 4px; color: var(--vert-texte) !important; font-size: .75rem; border: 2px solid var(--vert); border-radius: 999px; padding: 0 6px; }
.voile-bulle { position: fixed; inset: 0; z-index: 6; background: rgba(0, 0, 0, .24); }
.noeud-ligne.avec-bulle { z-index: 7; }
.bulle { position: absolute; left: 12px; right: 12px; top: 72px; z-index: 8; background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; padding: 14px; box-shadow: var(--ombre); animation: apparait .2s ease-out; max-width: 360px; }
.bulle strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.bulle p { margin: 4px 0; }
.bulle-note { font-size: .88rem; color: var(--vert-texte); }
.carte-certificat { margin-top: 32px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; padding: 16px; text-align: center; cursor: pointer; }
.carte-certificat.obtenu { cursor: default; }
.carte-certificat.secoue { animation: secoue .3s; }
.carte-certificat-cadre { display: grid; justify-items: center; gap: 6px; background: var(--papier-2); border-radius: 12px; padding: 12px; }
.cours-suivant { margin-top: 24px; text-align: center; }
.cours-suivant small { color: var(--accent-sombre); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.separateur { display: flex; align-items: center; gap: 10px; color: var(--gris); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.separateur::before, .separateur::after { content: ""; flex: 1; border-top: 2px solid var(--papier-2); }

/* Écrans pleins (accueil, test, série) */
.ecran-plein { min-height: 100vh; max-width: 560px; margin: 0 auto; padding: 16px 16px 120px; position: relative; }
.pied-plein { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--papier) 25%); }
.pied-plein .btn, .pied-plein .lien { max-width: 528px; margin-left: auto; margin-right: auto; }
.croix { position: absolute; top: 12px; left: 12px; width: 44px; height: 44px; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: inherit; z-index: 2; }
.centre-texte { text-align: center; }
.accueil-bienvenue { background: var(--nuit); color: #F6EBDD; max-width: none; display: grid; place-items: center; text-align: center; }
.accueil-bienvenue-corps { max-width: 420px; }
.accueil-bienvenue h1 { font-size: 1.6rem; }
.accueil-haut { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.segments { flex: 1; display: grid; grid-auto-flow: column; gap: 6px; }
.segments i { height: 6px; border-radius: 4px; background: var(--papier-2); border: 1px solid var(--encre); transition: background .3s; }
.segments i.plein { background: var(--accent); }
.accueil-corps { animation: apparait .35s ease-out; }
.certif-maquette { position: relative; border: 11px solid var(--nuit); border-radius: 24px; background: var(--blanc) repeating-linear-gradient(0deg, transparent 0 15px, var(--papier-2) 15px 16px); padding: 20px 16px 24px; text-align: center; margin-top: 12px; }
.certif-maquette h2 { font-size: 1.25rem; margin: 0 0 8px; }
.certif-maquette small { letter-spacing: .12em; color: var(--gris); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.certif-nom { display: flex; align-items: center; gap: 8px; border-bottom: 3px solid var(--encre); margin: 8px auto 16px; max-width: 260px; }
.certif-nom input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.2rem; text-align: center; color: var(--encre); padding: 8px 0; min-height: 44px; }
.certif-sceaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sceau-vide { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--papier-2); border: 3px dashed var(--gris); animation: sceau .6s ease-in-out both; }
@keyframes sceau { 0% { transform: rotateY(0); filter: grayscale(1); } 100% { transform: rotateY(360deg); filter: none; border-style: solid; border-color: var(--accent); } }
.tuiles-outils { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.tuile { display: grid; gap: 4px; border-radius: 16px; padding: 16px; background: color-mix(in srgb, var(--accent-cours, var(--accent)) 18%, var(--blanc)); border: 2px solid var(--encre); animation: apparait .3s ease-out both; }
.tuile span { color: var(--gris); font-size: .9rem; }
.bandeau-doux { background: var(--papier-2); color: var(--encre); border-radius: 16px; padding: 12px; margin-top: 12px; }
.encadre-gris { background: var(--papier-2); border-radius: 16px; padding: 12px; }
.encadre-programme { background: var(--papier-2); border-radius: 16px; padding: 20px; margin-top: 16px; display: grid; justify-items: center; gap: 12px; color: var(--encre); }
.icones-cours { display: flex; gap: 8px; }
.icones-cours span { display: grid; justify-items: center; animation: apparait .3s ease-out both; }
.icones-cours i { color: var(--vert-texte); font-style: normal; font-weight: 700; }
.fleche { color: var(--nuit-texte); font-size: 1.5rem; }
.certif-programme { display: grid; justify-items: center; gap: 2px; border: 2px solid var(--nuit); background: #fff; border-radius: 12px; padding: 12px 20px; }
.certif-programme small { letter-spacing: .1em; }
.cartes-lignes { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 16px; }
.cartes-lignes li { display: flex; gap: 12px; align-items: center; background: var(--papier-2); border-radius: 16px; padding: 14px; }
.echange-demo { background: #EEEEFF; border-radius: 16px; padding: 16px; display: grid; gap: 10px; color: #2E2433; }
.bulle-ia { display: flex; gap: 8px; align-items: flex-start; }
.bulle-ia p { background: #fff; border-radius: 12px; padding: 8px 12px; margin: 0; }
.bulle-moi { justify-self: end; background: var(--accent-fond); color: #fff; border-radius: 12px; padding: 6px 14px; font-weight: 700; }
.atouts { list-style: none; padding: 0; display: grid; gap: 10px; }
.atouts li { display: grid; border-left: 4px solid var(--accent); padding-left: 10px; }
.atouts span { color: var(--gris); font-size: .92rem; }
.frise { list-style: none; padding: 0; display: grid; gap: 16px; }
.frise li { display: flex; gap: 12px; }
.frise div { display: grid; }
.frise div span { color: var(--gris); font-size: .92rem; }
.pastille { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; color: #2E2433; border: 2px solid var(--encre); }
.pastille.bleu { background: #DBEAFE; } .pastille.jaune { background: #FEF9C3; } .pastille.vert { background: #DCFCE7; }
.carte-semaine { border: 2px solid var(--encre); border-radius: 16px; padding: 14px; background: var(--blanc); margin: 16px 0; }
.carte-semaine .semaine-cases li { background: none; min-height: 56px; gap: 2px; }
.rond-jour { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--papier-2); color: var(--vert-texte); font-weight: 700; }
.semaine-cases li.fait .rond-jour { background: #E8F6EA; border-color: #E8F6EA; }
.semaine-cases li.aujourdhui .rond-jour { border-color: var(--accent); }
.carte-semaine .semaine-cases li.aujourdhui { border: 0; }
.cartes-programmes { display: grid; gap: 12px; margin-top: 12px; }
.carte-prog { display: grid; text-align: left; width: 100%; background: var(--papier-2); border: 3px solid var(--encre); border-radius: 16px; padding: 14px; cursor: pointer; font: inherit; color: var(--encre); }
.carte-prog span { color: var(--gris); font-size: .9rem; }
.carte-prog:disabled { opacity: .6; cursor: not-allowed; }
.gros { font-size: 3rem; margin: 0; color: var(--vert-texte); }
.resume-plan { list-style: none; padding: 16px; margin: 16px 0; background: var(--papier-2); border-radius: 16px; display: grid; gap: 12px; text-align: left; }
.resume-plan li { display: grid; }
.resume-plan span { color: var(--gris); font-size: .9rem; }
.confettis { position: absolute; left: 50%; top: 0; transform: translateX(-50%); pointer-events: none; }
.marches { list-style: none; padding: 0; display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: 24px 0; }
.marches li { width: 22%; background: var(--papier-2); border: 2px solid var(--encre); border-radius: 6px 6px 0 0; display: grid; align-items: end; font-size: .7rem; padding: 4px 2px; }
.marches li.atteinte { background: var(--accent-fond); color: #fff; }

/* Test de niveau */
.test-intro h1 { margin-top: 48px; }
.cartes-depart { display: grid; gap: 16px; margin-top: 24px; }
.carte-depart { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; background: var(--blanc); border: 2px solid var(--encre); border-radius: 16px; padding: 16px; cursor: pointer; font: inherit; color: var(--encre); transition: transform .08s; }
.carte-depart:active { transform: scale(.98); }
.carte-depart div { display: grid; flex: 1; }
.carte-depart span { color: var(--gris); }
.carte-depart.reco { border: 3px solid var(--accent); }
.carte-depart-enveloppe { position: relative; }
.pastille-reco { position: absolute; top: -12px; right: 16px; z-index: 1; background: var(--accent-fond); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.carte-domaines { background: color-mix(in srgb, #F2EBFD 50%, var(--blanc)); border-radius: 16px; padding: 16px; display: grid; gap: 14px; margin-top: 24px; color: var(--encre); }
.carte-domaines-tete { display: flex; justify-content: space-between; align-items: center; }
.pastille-duree { background: #eab308; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: .7rem; font-weight: 700; }
.ligne-domaine { display: flex; gap: 10px; align-items: center; }
.ligne-domaine em { margin-left: auto; white-space: nowrap; font-style: normal; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-sombre); font-size: 1.1rem; }
.pave { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; font-weight: 700; }
.test-haut { position: sticky; top: 0; z-index: 4; background: var(--papier); margin: -16px -16px 0; padding: 8px 16px 0; }
.test-haut-ligne { display: flex; justify-content: space-between; align-items: center; }
.test-haut .lien { margin: 0; }
.barre-fine { height: 4px; background: var(--papier-2); margin: 6px -16px 0; }
.barre-fine div { height: 100%; background: var(--accent); transition: width .3s; }
.badge-domaine { display: flex; gap: 8px; align-items: center; margin: 16px 0 8px; }
.test-corps h1 { font-size: 1.3rem; }
.q-oui-non { display: grid; justify-items: center; gap: 16px; margin-top: 16px; }
.carte-glisse { width: 100%; max-width: 300px; background: #FFF8E5; color: #2E2433; border: 3px solid var(--encre); border-radius: 12px; padding: 20px 16px; text-align: center; box-shadow: 0 5px 15px rgba(86, 91, 102, .15); display: grid; justify-items: center; gap: 8px; transition: transform .35s ease-in, opacity .35s; }
.carte-glisse.indice { animation: indice 1.8s ease-in-out 1; }
@keyframes indice { 15%, 25% { transform: translateX(-40px) rotate(-4deg); } 55%, 65% { transform: translateX(40px) rotate(4deg); } }
.carte-glisse.part-oui { transform: translateX(160%) rotate(20deg); opacity: 0; }
.carte-glisse.part-non { transform: translateX(-160%) rotate(-20deg); opacity: 0; }
.boutons-oui-non { display: flex; justify-content: space-between; width: 100%; max-width: 300px; }
.boutons-oui-non button { min-height: 48px; min-width: 110px; border: 2px solid var(--encre); border-radius: 999px; background: var(--blanc); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.1rem; cursor: pointer; }
.boutons-oui-non button:disabled { opacity: .5; }
.q-appariement { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.q-appariement > div { display: grid; gap: 8px; }
.case-app { min-height: 128px; border: 2px solid var(--encre); border-radius: 16px; background: var(--blanc); padding: 12px; font-size: .9rem; font-weight: 600; cursor: pointer; color: var(--encre); }
.case-app.droite { font-weight: 400; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.case-app.choisie { border-color: var(--accent); border-width: 4px; }
.q-correcteur { display: grid; gap: 16px; margin-top: 12px; }
.modele-consigne { background: #6366F1; border-radius: 6px; padding: 12px; }
.modele-consigne p { background: #fff; color: #2E2433; border: 1px dashed #6366F1; border-radius: 6px; padding: 12px 16px; margin: 0; text-align: center; }
.modele-consigne mark { background: #DBEAFE; border-radius: 4px; padding: 1px 4px; }
.curseur { display: inline-block; width: 2px; height: 14px; background: #2E2433; margin-right: 4px; animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.choix-formulations { display: grid; gap: 8px; }
.choix-formulations button { text-align: left; min-height: 52px; padding: 10px 12px; border: 2px solid var(--encre); border-bottom-width: 5px; border-radius: 6px; background: var(--blanc); font-weight: 600; cursor: pointer; color: var(--encre); }
.choix-formulations button:active { transform: scale(.95); }
.choix-formulations button.choisie { border-color: var(--accent); }
.bloc-gris { background: var(--papier-2); border-radius: 12px; padding: 12px; margin-top: 12px; display: grid; gap: 8px; }
.consigne { font-size: .9rem; color: var(--gris); margin: 0; }
.ligne-case { display: flex; gap: 10px; align-items: center; text-align: left; min-height: 52px; padding: 8px 10px; background: var(--blanc); border: 2px solid var(--encre); border-radius: 10px; cursor: pointer; color: var(--encre); }
.ligne-case .case { background: var(--blanc); }
.ligne-case.cochee .case { background: var(--accent-fond); color: #fff; border-color: var(--accent); }
.liste-ordre { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.liste-ordre li { display: flex; gap: 8px; align-items: center; justify-content: space-between; background: var(--blanc); border: 2px solid var(--encre); border-radius: 6px; padding: 8px 8px 8px 12px; font-size: .92rem; }
.poignees { display: flex; flex-direction: column; gap: 2px; }
.poignees button { width: 44px; height: 28px; border: 2px solid var(--encre); border-radius: 6px; background: var(--papier-2); cursor: pointer; color: var(--encre); }
.poignees button:disabled { opacity: .3; }
.q-trous { display: grid; gap: 12px; margin-top: 12px; }
.texte-trous p { line-height: 2.2; margin: 0 0 8px; }
.q-trous .trou { background: var(--creme); color: var(--encre); border-color: var(--encre); }
.q-trous .trou.actif { outline: 3px solid var(--accent); }
.reserve { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; background: var(--papier-2); border-radius: 12px; padding: 16px; min-height: 76px; }
.effacer { justify-self: end; }
.test-resultats { background: linear-gradient(#F2EFFF, #E8E3FF); max-width: none; color: #2E2433; }
.test-resultats > * { max-width: 528px; margin-left: auto; margin-right: auto; }
.test-resultats .section-sous { color: #5E5566; }
.cartes-domaines { display: grid; gap: 12px; margin-top: 24px; }
.carte-domaine { background: #fff; border-radius: 16px; padding: 16px 20px; box-shadow: 0 4px 24px rgba(0, 0, 0, .08); display: grid; gap: 12px; }
.carte-domaine p { margin: 0; color: #5E5566; font-size: .92rem; }
.barre-domaine { height: 8px; border-radius: 999px; background: #E7E1EE; overflow: hidden; }
.barre-domaine div { height: 100%; background: var(--accent); transition: width .7s ease-out; }
.bloc-maitrise { background: #fff; border: 3px dashed var(--vert); border-radius: 16px; padding: 16px; margin-top: 16px; }

/* Série */
.page-serie { padding-top: 8px; }
.serie-bandeau { display: flex; justify-content: space-between; align-items: center; border: 3px solid var(--encre); border-radius: 14px; padding: 20px 16px; overflow: hidden; margin: 12px 0; background: var(--papier-2); }
.serie-bandeau > div:first-child { display: grid; }
.serie-bandeau span { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.serie-chiffre { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 4rem; line-height: 1; color: var(--couleur-serie, #A6AAB3); }
.serie-orange { --couleur-serie: #FF7008; } .serie-bleue { --couleur-serie: #0092D6; } .serie-violette { --couleur-serie: #5A5AE1; }
.serie-bandeau.serie-orange { background: #FFF1E6; } .serie-bandeau.serie-bleue { background: #F3FBFF; } .serie-bandeau.serie-violette { background: #F1EFFC; }
[data-theme="dark"] .serie-bandeau.serie-orange, [data-theme="dark"] .serie-bandeau.serie-bleue, [data-theme="dark"] .serie-bandeau.serie-violette { color: #2E2433; }
.serie-anneau, .anneau { display: grid; place-items: center; border-radius: 50%; background: var(--blanc); border: 3px solid var(--couleur-serie, #E4E4E4); width: 96px; height: 96px; }
.carte-defi { display: flex; gap: 12px; justify-content: space-between; align-items: center; border: 3px solid var(--encre); border-radius: 14px; padding: 16px; margin: 12px 0; background: var(--blanc); }
.carte-defi h2 { margin: 0 0 4px; font-size: 1.15rem; }
.carte-defi p { font-size: .9rem; color: var(--gris); }
.carte-defi.commence { display: grid; gap: 22px; }
.carte-defi-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.carte-defi-tete span { color: var(--gris); font-size: .9rem; }
.jauge-defi { position: relative; height: 10px; border-radius: 999px; background: var(--papier-2); margin: 0 12px 12px 0; }
.jauge-defi > div { height: 100%; border-radius: 999px; background: var(--accent); }
.repere { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--encre); border-top-width: 6px; border-radius: 6px; background: var(--blanc); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--gris); }
.repere.actif { border-top-color: var(--accent); color: var(--encre); }
.encadre-serie { border: 2px solid var(--papier-2); border-radius: 10px; padding: 12px; }
.encadre-serie strong { color: var(--accent-sombre); }
.calendrier { margin-top: 24px; }
.calendrier-tete { display: flex; justify-content: space-between; align-items: center; text-transform: capitalize; }
.rond { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; font-size: 1.3rem; cursor: pointer; color: var(--encre); }
.rond:disabled { color: var(--gris); opacity: .4; cursor: not-allowed; }
.calendrier-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 0; margin-top: 8px; text-align: center; }
.calendrier-jds { color: var(--gris); font-size: .8rem; }
.jour { display: grid; place-items: center; height: 38px; margin: 0 4px; border-radius: 50%; background: var(--papier-2); color: var(--gris); font-size: .9rem; position: relative; }
.jour.serie { background: #E4DFFB; color: var(--nuit-texte); border-radius: 0; margin: 0; }
.jour.serie.debut { border-radius: 19px 0 0 19px; margin-left: 4px; }
.jour.serie.fin { border-radius: 0 19px 19px 0; margin-right: 4px; }
.jour.serie.debut.fin { border-radius: 50%; }
.jour.serie.debut, .jour.serie.fin { background: #6B4FD8; color: #fff; }
.jour.gel { background: #CFEAF7; color: var(--nuit-texte); }
.jour.aujourdhui:not(.serie) { background: #EDE9FB; border: 2px solid #6B4FD8; color: #6B4FD8; }
.objectif { max-width: none; color: #fff; transition: background .4s ease-in-out; text-align: center; }
/* Orange et bleu vifs gardés, texte à l'encre (le blanc n'y tenait pas 4,5:1) ; violet foncé d'un cran sous le blanc. */
.fond-orange { background: #FF7621; } .fond-bleu { background: #78B6FF; } .fond-violet { background: #8A2BC2; } .fond-blanc { background: var(--papier); }
.objectif.fond-orange, .objectif.fond-bleu, .serie-fin.fond-orange, .serie-fin.fond-bleu { color: var(--sur-clair); }
.objectif-corps { max-width: 510px; margin: 40px auto 0; display: grid; justify-items: center; }
.objectif-corps p { margin-bottom: 24px; }
.objectif .anneau { width: 120px; height: 120px; border-color: rgba(255, 255, 255, .8); }
.objectif-cartes { display: grid; gap: 8px; width: 100%; }
.objectif-carte { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #fff; color: #2E2433; border: 3px solid transparent; border-radius: 16px; padding: 16px; font: inherit; cursor: pointer; min-height: 56px; animation: tombe-carte .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes tombe-carte { from { transform: translateY(-100px); opacity: 0; } }
.objectif-carte span { color: #5E5566; font-size: .9rem; }
.objectif-carte.choisie { border-color: var(--encre); box-shadow: 0 4px 0 #2E2433; }
.objectif .pied-plein { background: none; }
.objectif .btn:disabled { background: rgba(255, 255, 255, .5); color: #5E5566; }
.serie-fin { max-width: none; text-align: center; }
.serie-fin.fond-orange, .serie-fin.fond-bleu, .serie-fin.fond-violet { color: #fff; }
.serie-fin .pied-plein { background: none; }
.serie-fin-corps { max-width: 360px; margin: 32px auto 0; display: grid; justify-items: center; position: relative; }
.serie-fin h1 { white-space: pre-line; }
.serie-fin .carte-semaine { color: #2E2433; text-align: left; width: 100%; background: #fff; }
.serie-fin .carte-semaine p { font-size: .88rem; color: #5E5566; }
.rappel { text-align: center; }
.rappel-corps { margin-top: 64px; display: grid; justify-items: center; }
.flamme { flex: none; }

/* Leçon : espace IA et premier prompt */
.espace-ia { position: fixed; inset: 0; z-index: 25; background: #1C1F33; color: #F2EEF6; display: flex; flex-direction: column; animation: apparait .3s ease-out; }
.espace-ia-tete { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 2px solid #33385A; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.espace-ia-tete .icone { margin-left: auto; background: #2E3350; color: #F2EEF6; border-color: #4B5178; }
.espace-ia-fil { flex: 1; overflow-y: auto; padding: 16px; max-width: 640px; width: 100%; margin: 0 auto; }
.message { border-radius: 14px; padding: 10px 14px; margin: 8px 0; max-width: 88%; }
.message.ia { background: #2E3350; }
.message.ia small { display: block; color: #C9C3D6; margin-top: 4px; }
.message.moi { background: var(--accent-fond); color: #fff; margin-left: auto; }
.message p { margin: 0; }
.espace-ia-saisie { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); max-width: 640px; width: 100%; margin: 0 auto; display: grid; gap: 8px; }
.espace-ia-saisie form { display: flex; gap: 8px; }
.espace-ia-saisie input { flex: 1; min-width: 0; font: inherit; padding: 12px; min-height: 48px; border-radius: 10px; border: 2px solid #4B5178; background: #2E3350; color: #F2EEF6; }
.micro { display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, #6B4FD8, #E3612B); color: #fff; border: 0; border-radius: 14px; padding: 12px; text-align: left; cursor: pointer; font: inherit; }
.micro span { font-size: 1.6rem; }
.micro.ecoute span { animation: clignote 1s steps(1) infinite; }
.espace-ia .pied-plein { background: none; }
.premier-prompt { max-width: none; background: #1C1F33; color: #F2EEF6; text-align: center; }
.premier-prompt-corps { max-width: 420px; margin: 40px auto 0; display: grid; justify-items: center; }
.premier-prompt .pied-plein { background: none; }
.premier-prompt .lien { color: #F7B08F; }
.carte-prompt { background: #2E3350; border: 2px solid #4B5178; border-radius: 14px; padding: 16px; text-align: left; }
.carte-prompt small { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; color: #C9C3D6; letter-spacing: .1em; }
.carte-prompt span { color: #F5C66B; font-size: .85rem; }

/* Outils IA */
.outils-tete { display: flex; justify-content: center; margin-bottom: 12px; }
.bascule-vues { display: inline-flex; border: 3px solid var(--encre); border-radius: 999px; overflow: hidden; }
.bascule-vues button { border: 0; background: var(--blanc); padding: 8px 16px; min-height: 44px; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--encre); }
.bascule-vues button.actif { background: var(--encre); color: var(--papier); }
.espace-accueil { text-align: center; display: grid; justify-items: center; }
.espace-accueil h1 { font-size: 1.3rem; }
.puces-depart { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.puces-depart button { border: 2px solid var(--encre); border-radius: 999px; background: var(--blanc); padding: 8px 14px; min-height: 40px; cursor: pointer; color: var(--encre); }
.fiche-assistant { background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; padding: 16px; margin: 16px 0; }
.fiche-assistant h2 { margin-top: 0; }
.fiche-assistant dl { display: grid; gap: 8px; margin: 0; }
.fiche-assistant dl div { display: grid; }
.fiche-assistant dt { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--accent-sombre); text-transform: uppercase; }
.fiche-assistant dd { margin: 0; }
.composeur { display: flex; gap: 8px; margin-top: 12px; }
.composeur input { flex: 1; min-width: 0; font: inherit; padding: 12px; min-height: 48px; border: 3px solid var(--encre); border-radius: 12px; background: var(--papier-2); }
.conversation .message.moi { max-width: 92%; }
.conversation .message.ia { background: var(--blanc); border: 3px solid var(--encre); color: var(--encre); max-width: 100%; }
.conversation blockquote { margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--accent); background: var(--papier-2); border-radius: 0 8px 8px 0; }
.conversation h3 { font-size: 1.05rem; margin: 12px 0 4px; }
.pret { position: relative; padding-top: 150px; }
.pret .confettis { top: 0; }
.serie-bandeau.serie-grise .serie-chiffre { color: var(--gris); -webkit-text-stroke: 0; }

/* Espace IA : chat (src/app/outils/OutilsIA.tsx) */
.outils-tete { align-items: center; gap: 8px; }
.pastille-illimite { background: var(--vert-fond); border-color: var(--vert); color: #fff; cursor: default; }
.ia-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ia-modele { margin-left: auto; border: 2px solid var(--encre); border-radius: 999px; background: var(--blanc); padding: 6px 12px; min-height: 40px; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.ia-modeles { list-style: none; margin: 0 0 12px; padding: 8px; border: 3px solid var(--encre); border-radius: 14px; background: var(--blanc); display: grid; gap: 4px; }
.ia-modeles li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.ia-modeles li[aria-selected="true"] { background: var(--papier-2); font-weight: 700; }
.ia-modeles li[aria-disabled="true"] { color: var(--gris); }
.ia-modeles small { color: var(--gris); }
.ia-modeles .ia-modeles-note { font-size: .8rem; color: var(--gris); display: block; }
.ia-historique { list-style: none; margin: 0 0 12px; padding: 8px; border: 3px solid var(--encre); border-radius: 14px; background: var(--blanc); max-height: 280px; overflow-y: auto; }
.ia-historique li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px dashed var(--papier-2); }
.ia-historique .lien { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puces-depart button.actif { background: var(--encre); color: var(--papier); }
.ia-verrou { gap: 8px; }
.ia-fil { display: grid; gap: 4px; padding-bottom: 8px; }
.ia-fil .message.ia { max-width: 100%; }
.ia-fil .message.moi p { white-space: pre-wrap; }
.ia-attente { display: flex; align-items: center; gap: 8px; color: var(--gris); }
.ia-image { display: block; max-width: 100%; border-radius: 12px; border: 3px solid var(--encre); margin-top: 8px; }
.ia-copier { font-size: .85rem; margin-top: 4px; }
.ia-pj { font-size: .85rem; opacity: .85; }
.ia-saisie { position: sticky; bottom: 72px; background: var(--papier); padding-top: 8px; z-index: 2; }
.ia-saisie .composeur { align-items: flex-end; margin-top: 0; }
.ia-saisie textarea { flex: 1; min-width: 0; font: inherit; padding: 12px; min-height: 48px; max-height: 180px; resize: none; border: 3px solid var(--encre); border-radius: 14px; background: var(--blanc); color: var(--encre); }
.ia-joindre { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 3px solid var(--encre); border-radius: 14px; background: var(--blanc); font-size: 1.4rem; cursor: pointer; }
.ia-joindre input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ia-outil-choisi, .ia-fichiers li { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--encre); border-radius: 999px; padding: 2px 4px 2px 12px; background: var(--blanc); font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.ia-outil-choisi select { font: inherit; border: 0; background: transparent; }
.ia-fichiers { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ia-outil-choisi .icone, .ia-fichiers .icone, .ia-historique .icone { min-width: 32px; min-height: 32px; width: 32px; height: 32px; }
.ia-mention { font-size: .78rem; color: var(--gris); margin: 6px 0 0; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 8px; }
.md h2, .md h3, .md h4 { font-family: var(--texte); font-size: 1.02rem; margin: 12px 0 4px; }
.md ul, .md ol { margin: 4px 0 8px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md code { background: var(--papier-2); border-radius: 4px; padding: 0 4px; font-size: .9em; }
.md pre { background: var(--encre); color: var(--papier); border-radius: 10px; padding: 10px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 8px 0; padding: 6px 12px; border-left: 4px solid var(--accent); background: var(--papier-2); }
.md-tableau { overflow-x: auto; margin: 8px 0; }
.md table { border-collapse: collapse; font-size: .9rem; min-width: 100%; }
.md th, .md td { border: 2px solid var(--encre); padding: 4px 8px; text-align: left; vertical-align: top; }
.md th { background: var(--papier-2); }
.md a { color: var(--accent-texte); }
.ia-graphique { margin: 8px 0; padding: 8px; border: 2px solid var(--encre); border-radius: 12px; background: var(--blanc); }
.ia-graphique figcaption { font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
.ia-graphique svg { display: block; width: 100%; height: auto; }
.ia-legende { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; }
.ia-legende span { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.outils-tete .bascule-vues button { padding: 8px 12px; white-space: nowrap; font-size: .9rem; }
.outils-tete .pastille-pro { white-space: nowrap; font-size: .85rem; padding: 8px 12px; margin-left: 0; }
.ia-saisie textarea { height: 48px; }

/* Palier Bâtisseur (lot V09) : carte des déclencheurs, bannière du catalogue, piste, page de l'offre. Préfixe bt-. */
.bt-carte { margin: 16px 0; padding: 16px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; box-shadow: var(--ombre); }
.bt-carte h2 { margin: 4px 0 6px; font-size: 1.2rem; line-height: 1.25; }
.bt-carte p { margin: 0 0 4px; }
.bt-sur { font-weight: 700; color: var(--accent-sombre); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }

.bt-banniere { display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 12px 0 16px; padding: 14px 16px; text-align: left; background: var(--papier-2); color: var(--encre); border: 3px solid var(--encre); border-radius: 14px; box-shadow: var(--ombre); cursor: pointer; font: inherit; }
.bt-banniere strong { font-size: 1.1rem; }
.bt-banniere span { color: var(--gris); font-size: .95rem; }

.bt-page { padding-bottom: 120px; }
.bt-chapo { font-size: 1.05rem; }
.bt-etat { color: var(--gris); font-size: .95rem; }
.bt-ok { font-weight: 700; color: var(--vert-texte); }
.bt-titre { text-align: center; margin: 8px 0; }

.bt-cours { margin: 20px 0; padding: 14px; background: var(--blanc); border: 3px solid var(--encre); border-left: 10px solid var(--accent-cours, var(--accent)); border-radius: 14px; }
.bt-cours > header { display: flex; gap: 12px; align-items: center; }
.bt-cours h2 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.bt-cours small { color: var(--gris); }
.bt-code { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid var(--encre); border-radius: 10px; font-weight: 700; background: var(--papier-2); }
.bt-cours ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.bt-cours li button { display: grid; gap: 2px; width: 100%; min-height: 48px; padding: 10px 12px; text-align: left; background: var(--papier); color: var(--encre); border: 2px solid var(--encre); border-radius: 10px; font: inherit; cursor: pointer; }
.bt-cours li button:disabled { cursor: default; opacity: .75; border-style: dashed; }
.bt-cours li small { font-size: .85rem; }
.bt-cours li em { font-style: normal; font-weight: 700; font-size: .8rem; color: var(--accent-sombre); }
.bt-bientot em { color: var(--gris); }

.bt-votre { margin: 16px 0; padding: 16px; background: var(--papier-2); border: 3px solid var(--encre); border-radius: 14px; }
.bt-votre h2 { margin: 0 0 6px; font-size: 1.15rem; }
.bt-retrait { margin-top: 10px; }

.bt-bloc { margin: 22px 0; }
.bt-bloc h2 { font-size: 1.2rem; margin: 0 0 8px; }
.bt-cours-liste { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.bt-cours-liste li { display: grid; padding: 8px 10px; border: 2px solid var(--encre); border-radius: 10px; background: var(--blanc); }
.bt-cours-liste span { color: var(--gris); font-size: .9rem; }
.bt-sources { color: var(--gris); font-size: .9rem; }
.bt-alerte { padding: 12px; border: 3px solid var(--accent-sombre); border-radius: 12px; background: var(--blanc); }
.bt-note { color: var(--gris); font-size: .9rem; }

.bt-table-defile { overflow-x: auto; margin: 10px 0; }
.bt-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--blanc); }
.bt-table th, .bt-table td { padding: 8px; border: 2px solid var(--encre); vertical-align: top; text-align: left; }
.bt-table small { display: block; color: var(--gris); font-size: .78rem; font-weight: 400; }
.bt-table a { color: var(--accent-sombre); overflow-wrap: anywhere; }

.bt-formules { display: grid; gap: 10px; }
.bt-formule { display: grid; gap: 2px; width: 100%; padding: 14px; text-align: left; background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); border-radius: 14px; font: inherit; cursor: pointer; }
.bt-formule.choisie { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); }
.bt-formule strong { font-size: 1.25rem; }
.bt-formule small { color: var(--gris); }
.bt-formule ul { list-style: none; margin: 6px 0 0; padding: 0; font-size: .92rem; }
.bt-formule-nom { font-weight: 700; color: var(--accent-sombre); }
.bt-continuer { margin-top: 16px; }

/* Bonus des offres après paiement (Bonus.tsx) et paywall PRO de l'onglet Outils IA. */
.bonus-liste { display: grid; gap: 12px; margin: 12px 0 20px; }
.bonus-carte { border: 3px solid var(--encre); border-radius: 14px; padding: 12px 14px; background: var(--blanc); box-shadow: var(--ombre); }
.bonus-carte h2 { margin: 0 0 4px; font-size: 1.1rem; }
.bonus-carte.verrou { opacity: .85; border-style: dashed; box-shadow: none; }
.bonus-achats { padding-left: 18px; }
.bonus-workflows { list-style: none; padding: 0; display: grid; gap: 8px; }
.bonus-workflows li { display: grid; gap: 2px; border-bottom: 2px solid var(--papier-2); padding-bottom: 6px; }
.bonus-workflows small { color: var(--gris); }
.bonus-etapes { padding-left: 20px; display: grid; gap: 14px; }
.bonus-etapes h2 { font-size: 1.05rem; margin: 0 0 4px; }
.bonus-etapes blockquote { margin: 6px 0; padding: 8px 10px; background: var(--papier-2); border-left: 5px solid var(--accent); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pastille-pro { margin-left: 8px; border: 3px solid var(--encre); border-radius: 999px; background: var(--encre); color: var(--papier); font-family: var(--texte); font-weight: 700; padding: 6px 12px; min-height: 44px; cursor: pointer; }
.pro { text-align: center; }

/* Test final, certificats et profil public — « Bureau 16 bits » ; le certificat lui-même suit les codes du diplôme. */
/* Pixelify Sans dessine « fi » en ligature, qui se lit « A » (« Test Anal », « ProAl ») : ligatures coupées partout. */
html { font-variant-ligatures: no-common-ligatures; }
a.btn { text-align: center; text-decoration: none; line-height: 1.6; }
.btn-mini:not(.btn-second):not(:disabled) { background: var(--accent-fond); } /* petit texte blanc : orange foncé */
.btn-mini { display: inline-block; width: auto; min-height: 40px; margin: 0; padding: 6px 14px; font-size: .95rem; box-shadow: 0 3px 0 var(--encre); }
.rouge { color: var(--rouge-texte); }
.vert { color: var(--vert-texte); }
.lien-gauche { margin: 0; padding: 0; min-height: 32px; }

/* Écran plein du test */
.tf-page { max-width: 680px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--papier); }
.tf-tete { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; background: var(--papier); }
.tf-tete strong { font-family: var(--texte); font-weight: 700; font-size: 1.1rem; }
.tf-compteur { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gris); }
.tf-compteur b { color: var(--accent-texte); }
.tf-barre { height: 6px; background: var(--papier-2); margin: 0 16px; border: 2px solid var(--encre); border-radius: 4px; overflow: hidden; }
.tf-barre > div { height: 100%; background: var(--accent); transition: width .3s; }
.tf-corps { flex: 1; padding: 12px 16px 140px; animation: apparait .3s ease-out; }
.tf-pied { position: sticky; bottom: 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--papier) 28%); }
.tf-pied .btn { margin: 0; }
.tf-pied .erreur { background: var(--blanc); border: 3px solid var(--rouge); border-radius: 12px; padding: 8px 12px; }
.tf-intro { flex: 1; padding: 0 16px 140px; }
.tf-intro h1 { font-size: 1.9rem; }
.tf-intro img { display: block; margin: 0 auto; }

.tf-titre { font-size: 1.35rem; margin: .3em 0; font-family: var(--texte); font-weight: 700; }
.tf-consigne { color: var(--gris); }
.tf-panneau { background: var(--papier-2); border: 3px solid var(--encre); border-radius: 14px; padding: 12px; margin-top: 12px; }
.tf-aide { margin: 0 0 8px; color: var(--gris); font-size: .92rem; }

/* Association */
.tf-paires { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tf-paires > div { display: grid; gap: 10px; align-content: start; }
.tf-case { min-height: 104px; padding: 10px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; font-size: .92rem; cursor: pointer; box-shadow: 0 3px 0 var(--encre); text-align: center; }
.tf-case.gauche { font-weight: 700; }
.tf-case.choisie { outline: 3px dashed var(--accent); outline-offset: 2px; }
.tf-case:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--encre); }

/* Choix multiple */
.tf-option { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 12px; margin: 6px 0; background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; cursor: pointer; min-height: 52px; }
.tf-option.cochee { border-color: var(--accent); background: var(--fond-choisi); }
.tf-case-coche { flex: none; width: 24px; height: 24px; border: 3px solid var(--encre); border-radius: 6px; display: grid; place-items: center; font-weight: 700; background: var(--blanc); }
.tf-option.cochee .tf-case-coche { background: var(--accent-fond); color: var(--sur-couleur); border-color: var(--accent-sombre); }

/* Remise en ordre */
.tf-ordre { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tf-ordre li { display: grid; grid-template-columns: 28px 1fr auto 44px; gap: 8px; align-items: center; background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; padding: 6px 6px 6px 10px; touch-action: none; }
.tf-ordre li.tenu { border-color: var(--accent); opacity: .75; }
.tf-rang { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-texte); }
.tf-etape { font-size: .95rem; }
.tf-fleches { display: grid; gap: 2px; }
.tf-fleches button { width: 36px; height: 24px; border: 2px solid var(--encre); border-radius: 6px; background: var(--papier); font-size: .7rem; cursor: pointer; padding: 0; }
.tf-fleches button:disabled { opacity: .3; cursor: default; }
.tf-poignee { width: 44px; height: 44px; display: grid; place-items: center; cursor: grab; color: var(--gris); }

/* Correcteur de prompt */
.tf-modele { background: var(--nuit); border: 3px solid var(--encre); border-radius: 14px; padding: 12px; margin-top: 12px; }
.tf-modele-interieur { background: var(--blanc); border: 2px dashed var(--nuit); border-radius: 8px; padding: 14px; text-align: center; font-size: 1.02rem; line-height: 1.7; }
.tf-modele mark { background: #FFE9B8; color: var(--encre); padding: 2px 4px; border-radius: 4px; }
.tf-modele mark.depart { background: #F3E3D3; }
.tf-curseur { display: inline-block; width: 2px; height: 1em; margin-right: 2px; vertical-align: -2px; background: var(--encre); animation: tf-clignote 1s steps(1) infinite; }
@keyframes tf-clignote { 50% { opacity: 0; } }
.tf-sortie { background: var(--blanc); border: 3px solid var(--encre); border-top: 0; border-radius: 0 0 14px 14px; margin: -6px 8px 0; padding: 10px 14px; }
.tf-sortie-tete { display: flex; align-items: center; gap: 8px; font-family: var(--texte); font-weight: 700; font-size: .95rem; border-bottom: 2px solid var(--papier-2); padding-bottom: 6px; }
.tf-simule { margin-left: auto; font-family: var(--texte); font-size: .75rem; color: var(--gris); }
.tf-sortie-corps { font-size: .95rem; animation: apparait .35s ease-out; }
.tf-sortie-corps ol, .tf-sortie-corps ul { padding-left: 1.3em; margin: .4em 0; }
.tf-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tf-choix-btn { padding: 10px; background: var(--blanc); border: 3px solid var(--encre); border-bottom-width: 6px; border-radius: 12px; cursor: pointer; font-size: .9rem; text-align: left; }
.tf-choix-btn.actif { border-color: var(--accent); background: var(--fond-choisi); }
.tf-choix-btn:active { transform: scale(.97); }
@media (max-width: 420px) { .tf-choix { grid-template-columns: 1fr; } .tf-case { min-height: 88px; font-size: .86rem; } }

/* Feuilles (bas d'écran sur téléphone, fenêtre au centre sur ordinateur) : la feuille elle-même est commune (styles.css). */
.feuille-fond { position: fixed; inset: 0; z-index: 20; background: rgba(46, 36, 51, .55); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 700px) { .feuille-fond { align-items: center; } }
.cert-feuille-sous { font-family: var(--texte); font-weight: 700; font-size: 1rem; margin: 16px 0 6px; }
.choix-liste { display: grid; gap: 6px; }
.choix-liste button { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 8px 12px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; cursor: pointer; text-align: left; }
.choix-liste button.actif { border-color: var(--accent); }
.choix-liste .coche { margin-left: auto; color: var(--accent-texte); font-weight: 700; }
.pastille-style { width: 22px; height: 22px; border: 2px solid var(--encre); border-radius: 50%; }
.pastille-style.standard { background: #FFFFFF; box-shadow: inset 0 0 0 3px #E3612B; }
.pastille-style.dore { background: #F3D98B; box-shadow: inset 0 0 0 3px #A87B22; }
.pastille-style.aurore { background: linear-gradient(90deg, #1F8A70 0 33%, #3C8BC0 33% 66%, #6B4FD8 66%); }
.code-langue { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .8rem; width: 30px; text-align: center; background: var(--papier-2); border: 2px solid var(--encre); border-radius: 6px; }
.cert-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 30; max-width: calc(100% - 32px); background: var(--encre); color: var(--creme); padding: 10px 16px; border-radius: 12px; font-weight: 600; box-shadow: var(--ombre); }

/* Résultats */
.tf-resultats { flex: 1; padding: 12px 16px 140px; text-align: center; }
.tf-resultats h1 { margin: .3em 0 0; }
.tf-anneau { position: relative; width: 132px; height: 132px; margin: 8px auto 0; }
.tf-anneau > div { position: absolute; inset: 0; display: grid; place-content: center; }
.tf-anneau strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.8rem; }
.tf-anneau span { font-size: .8rem; color: var(--gris); }
.tf-sous { color: var(--gris); }
.tf-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.tf-tuiles div { background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 10px; display: grid; }
.tf-tuiles strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.5rem; }
.tf-tuiles span { font-size: .8rem; color: var(--gris); }
.tf-restantes { font-weight: 600; }
.tf-epuise { background: var(--fond-faux); border: 3px solid var(--rouge); border-radius: 14px; padding: 12px; text-align: left; }
.tf-carte-cert { background: var(--fond-carte-claire); border: 3px solid var(--encre); border-radius: 16px; padding: 14px; text-align: left; margin: 16px 0; box-shadow: var(--ombre); }
.tf-carte-cert strong { font-family: var(--texte); font-weight: 700; font-size: 1.2rem; display: block; }
.tf-delivre { color: var(--accent-sombre); margin: .2em 0 .6em; }
.tf-sceaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tf-sceau-ok { position: relative; }
.tf-sceau-ok i { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--vert-fond); color: var(--sur-couleur); font-style: normal; font-size: .7rem; display: grid; place-items: center; border: 2px solid var(--encre); }
.tf-sous-titre { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); text-align: left; margin-top: 24px; }
.tf-retours { list-style: none; padding: 0; margin: 0; text-align: left; }
.tf-retours li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 2px solid var(--papier-2); }
.tf-retours li div { display: grid; }
.tf-retours li span:not(.tf-pastille) { font-size: .85rem; color: var(--gris); }
.tf-pastille { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--encre); display: grid; place-items: center; font-weight: 700; color: var(--blanc); }
.tf-retours li.correct .tf-pastille { background: var(--vert); }
.tf-retours li.partiel .tf-pastille { background: var(--jaune); }
.tf-retours li.incorrect .tf-pastille { background: var(--rouge); }

/* Carte du test sur /programme */
.tf-carte { margin-top: 24px; padding: 16px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; box-shadow: var(--ombre); }
.tf-carte.verrouille { background: var(--papier-2); border-style: dashed; box-shadow: none; }
.tf-carte-tete { display: flex; gap: 12px; align-items: center; }
.tf-carte-tete h2 { margin: 0; }
.tf-carte-tete p { margin: 0; color: var(--gris); }
.tf-cadenas { flex: none; width: 44px; height: 44px; border: 3px solid var(--encre); border-radius: 10px; display: grid; place-items: center; background: var(--creme); font-family: var(--texte); font-weight: 700; font-size: 1.3rem; }
.tf-cadenas.ok { background: var(--vert-fond); color: var(--sur-couleur); }
.tf-carte-meta { font-size: .9rem; color: var(--gris); margin: 10px 0 0; }
.tf-carte-actions .btn { margin-top: 10px; }
.tf-termine { margin-top: 20px; padding: 16px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; box-shadow: var(--ombre); }
.tf-termine-illu { display: grid; justify-items: center; gap: 6px; padding: 16px; background: var(--papier-2); border: 3px solid var(--encre); border-radius: 12px; font-family: var(--texte); font-weight: 700; }
.tf-recette { margin-top: 20px; padding: 12px 16px; border: 3px dashed var(--nuit); border-radius: 14px; background: var(--fond-info); font-size: .9rem; }
.tf-recette-actions .btn { margin-top: 8px; }

.fin-programme { text-align: center; padding-top: 24px; }
.fin-stats.trois { grid-template-columns: repeat(3, 1fr); }
.cours-termine { margin: 20px 0; padding: 16px; background: var(--papier-2); color: var(--encre); border: 3px solid var(--encre); border-radius: 16px; display: grid; justify-items: center; }
.cours-termine h2 { margin: .3em 0 0; }

/* Pixel art */
.sceau-boite { display: inline-block; flex: none; }
.sceau-boite svg { width: 100%; height: 100%; display: block; }
.badge-pixel { display: grid; justify-items: center; gap: 6px; font-size: .8rem; font-weight: 600; text-align: center; }
.badge-pixel svg { width: 64px; height: 64px; }
.badge-pixel.verrou { opacity: .7; }
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* Page « Votre certificat » */
.cert-page { max-width: 1040px; }
.cert-page-titre { font-size: 1.2rem; margin: 0; flex: 1; }
.cert-grille { display: grid; gap: 20px; margin-top: 12px; }
@media (min-width: 900px) { .cert-grille { grid-template-columns: 1fr 300px; } }
.cert-titre { font-size: 1.6rem; margin: .1em 0; }
.cert-ids { display: flex; flex-wrap: wrap; gap: 14px; font-weight: 600; }
.cert-verifie { color: var(--vert-texte); }
.cert-id { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.cert-apercu { position: relative; background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; padding: 6px; box-shadow: var(--ombre); margin: 12px 0; }
.cert-svg { display: block; width: 100%; height: auto; }
.cert-reglages-btn { position: absolute; top: 12px; right: 12px; background: var(--accent-fond); color: var(--sur-couleur); border: 2px solid var(--encre); border-radius: 999px; padding: 4px 12px; font-family: var(--texte); font-weight: 700; cursor: pointer; min-height: 36px; }
.cert-partage { display: flex; justify-content: space-around; gap: 8px; margin: 12px 0; }
.cert-partage button { display: grid; justify-items: center; gap: 4px; background: none; border: 0; font-size: .8rem; cursor: pointer; min-width: 64px; }
.cert-partage button span { width: 48px; height: 48px; display: grid; place-items: center; background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; box-shadow: 0 3px 0 var(--encre); }
.cert-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cert-actions .btn { margin-top: 0; }
@media (max-width: 420px) { .cert-actions { grid-template-columns: 1fr; } }
.cert-cote { display: grid; gap: 16px; align-content: start; }
.cert-carte { display: grid; gap: 4px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 14px; color: var(--encre); text-decoration: none; }
.cert-carte small { text-transform: uppercase; letter-spacing: .08em; color: var(--accent-sombre); font-weight: 700; font-size: .75rem; }
.cert-carte strong { font-family: var(--texte); font-weight: 700; font-size: 1.1rem; }
.cert-delivre { grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.cert-delivre span:nth-child(2) { display: grid; }
.cert-delivre .avatar { width: 56px; height: 56px; font-size: 1.3rem; }

/* Page publique */
.cert-public { max-width: 860px; }
.cert-bandeau { display: grid; gap: 2px; background: var(--nuit); color: #FFF1A8; border: 3px solid var(--encre); border-radius: 14px; padding: 12px 16px; }
.cert-bandeau strong { font-family: var(--texte); font-weight: 700; font-size: 1.2rem; }
.cert-verif { background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 14px 16px; }
.cert-statut { font-family: var(--texte); font-weight: 700; color: var(--vert-texte); font-size: 1.2rem; margin: 0; }
.cert-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
.cert-infos div { background: var(--papier); border: 2px solid var(--encre); border-radius: 10px; padding: 8px 10px; }
.cert-infos dt { font-size: .75rem; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.cert-infos dd { margin: 0; font-weight: 700; }
.cert-acquisition { margin-top: 20px; text-align: center; background: var(--fond-carte-claire); border: 3px solid var(--encre); border-radius: 16px; padding: 16px; box-shadow: var(--ombre); }
.cert-public + .onglets { display: none; }

/* Profil public */
.profil-public { max-width: 960px; }
.profil-public .profil-tete { margin-top: 12px; }
.profil-public .profil-tete > div:nth-child(2) { flex: 1; }
.profil-public .profil-tete h2 { margin: 0; }
.profil-grille { display: grid; gap: 20px; }
@media (min-width: 860px) { .profil-grille { grid-template-columns: 1fr 320px; } }
.profil-grille aside { display: grid; gap: 16px; align-content: start; }
.profil-grille aside .section-titre { margin: 0 0 6px; }
.profil-certs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.profil-certs a { display: flex; gap: 12px; align-items: center; background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 10px 12px; color: var(--encre); text-decoration: none; box-shadow: 0 3px 0 var(--encre); }
.profil-certs a > span:last-child { display: grid; }
.profil-certs small { color: var(--gris); }
.profil-phrase { background: var(--papier-2); border-radius: 10px; padding: 8px 10px; font-weight: 600; margin: 0; }
.mes-certificats { margin: 20px 0; }

/* Compte, abonnement, e-mails (lots 15-16). Préfixe k-. */
.k-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 12px; margin: 8px 0 12px; }
.k-detail dt { color: var(--gris); font-size: .9rem; margin-top: 8px; }
.k-detail dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 560px) { .k-detail { grid-template-columns: max-content minmax(0, 1fr); } .k-detail dt { margin-top: 0; } }
.k-option { text-align: center; }
.k-option small, .k-note, .k-facultatif { color: var(--gris); font-size: .88rem; }
.k-facultatif { font-family: var(--texte); font-weight: 400; margin-left: 6px; }
.k-note { margin-top: 12px; }
.k-aide ul, .k-supprimer ul { padding-left: 20px; }
.k-motifs, .k-formules { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.k-motifs label, .k-formules label { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border: 2px solid var(--papier-2); border-radius: 10px; background: var(--blanc); cursor: pointer; }
.k-motifs input, .k-formules input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.k-champ { display: grid; gap: 4px; font-weight: 600; margin-top: 12px; }
.k-champ textarea { font: inherit; padding: 10px; border: 3px solid var(--encre); border-radius: 10px; background: var(--blanc); color: var(--encre); width: 100%; }
.k-alternatives { margin-top: 18px; padding: 12px; border: 2px dashed var(--gris); border-radius: 12px; }
.k-alt + .k-alt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--papier-2); }
.k-collant { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 4; background: var(--papier); padding: 8px 0 4px; }
.k-danger { background: var(--rouge); }
.k-mention { font-size: .88rem; color: var(--gris); margin-top: 12px; }
.k-pastille { display: inline-block; font-family: var(--titre); font-size: 1.6rem; background: var(--jaune); color: var(--encre); border: 3px solid var(--encre); border-radius: 10px; padding: 2px 12px; margin: 0 0 8px; }
.k-retour, .k-resilie { text-align: center; }
.k-retour .t-carte { text-align: left; }
.k-colonnes { display: grid; gap: 8px; }
@media (min-width: 560px) { .k-colonnes { grid-template-columns: 1fr 1fr; } }
.k-colonnes ul { padding-left: 20px; margin: 0; }
.k-colonnes h2 { font-size: 1.05rem; }
.k-code { letter-spacing: .4em; font-family: var(--titre); font-size: 1.4rem; text-align: center; }
.k-liste, .k-journal { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.k-liste .t-carte { padding: 0; }
.k-ligne { display: grid; gap: 2px; width: 100%; text-align: left; background: var(--blanc); border: 0; padding: 12px 14px; cursor: pointer; min-height: 52px; color: var(--encre); border-radius: 14px; }
.k-journal > li { border: 2px solid var(--encre); border-radius: 14px; overflow: hidden; background: var(--blanc); }
.k-ligne span, .k-ligne small { color: var(--gris); overflow-wrap: anywhere; }
.k-deplie { padding: 0 14px 14px; }
.k-cadre { display: block; width: 100%; height: 640px; border: 0; border-top: 2px solid var(--papier-2); background: #F6EBDD; }
.k-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.k-boutons .btn { margin: 0; }
.k-alerte { margin-bottom: 16px; }
.k-cle { margin-top: 24px; max-width: 420px; }
.k-apercu h2 { margin-top: 1.2em; }

/* Défis (lot 9) — « Bureau 16 bits » : cadres d'encre épais, ombres portées pleines, pixels nets. */
.defis .liste-defis, .mes-defis { display: grid; gap: 14px; }
.df-carte-defi { display: flex; gap: 12px; align-items: stretch; background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 10px; color: var(--encre); text-decoration: none; box-shadow: var(--ombre); }
.df-carte-defi.en-cours { display: grid; gap: 6px; border-left: 12px solid var(--accent-defi, var(--accent)); }
.df-carte-defi.en-cours .jauge > div, .jours-defi .jauge > div { background: var(--accent-defi, var(--accent)); }
.df-carte-defi.bientot { opacity: .72; }
.df-carte-defi strong { font-family: var(--texte); font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.df-carte-defi span { color: var(--gris); font-size: .9rem; }
.carte-defi-texte { flex: 1; display: grid; gap: 4px; align-content: center; min-width: 0; }
.pastille-etat { justify-self: start; font-style: normal; font-family: var(--texte); font-weight: 700; font-size: .85rem; padding: 2px 10px; border: 2px solid var(--encre); border-radius: 8px; background: var(--creme); }
.pastille-etat.fini { background: var(--vert-fond); color: var(--sur-couleur); }

.defi-couverture { position: relative; flex: none; width: 96px; min-height: 88px; border: 3px solid var(--encre); border-radius: 10px; background: var(--accent-defi, var(--accent)); overflow: hidden; display: grid; place-items: end center; }
.defi-couverture.grande { width: 100%; height: 190px; margin: 12px 0; border-radius: 14px; box-shadow: var(--ombre); }
.defi-couverture img { position: relative; z-index: 1; }
.defi-tuiles { position: absolute; inset: 8px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; align-content: start; opacity: .35; }
.defi-tuiles span { aspect-ratio: 1; background: var(--blanc); border-radius: 2px; }

.onglets-defis { display: flex; gap: 8px; margin: 18px 0 12px; }
.onglets-defis button { flex: 1; min-height: 44px; border: 3px solid var(--encre); border-radius: 10px; background: var(--blanc); font-family: var(--texte); font-weight: 700; cursor: pointer; }
.onglets-defis button.actif { background: var(--encre); color: var(--creme); }
.defis .vide { color: var(--gris); text-align: center; margin-top: 24px; }

.fiche-defi .promesse { font-size: 1.05rem; color: var(--gris); }
.df-badge-bientot { display: inline-block; font-family: var(--texte); font-weight: 700; background: var(--creme); border: 2px solid var(--encre); border-radius: 8px; padding: 2px 10px; }
.info-verrou { font-variant-numeric: tabular-nums; font-family: var(--texte); font-weight: 700; color: var(--nuit-texte); margin-top: 12px; }
.details-defi { margin-top: 24px; border-top: 3px solid var(--encre); padding-top: 8px; }
.details-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.details-grille div { display: grid; gap: 2px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 10px; padding: 10px 12px; }
.details-grille span { color: var(--gris); font-size: .85rem; }
.details-grille strong { font-family: var(--texte); font-weight: 700; }
.regle-jour { font-size: .92rem; color: var(--gris); }
.programme-jours { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.programme-jours li { display: flex; gap: 10px; align-items: baseline; background: var(--blanc); border: 2px solid var(--encre); border-radius: 8px; padding: 6px 10px; }
.programme-jours li span { flex: none; font-family: var(--texte); font-weight: 700; color: var(--accent-sombre); min-width: 4.2em; }
.apercu-certificat { display: flex; gap: 12px; align-items: center; margin-top: 18px; background: var(--papier-2); border: 3px dashed var(--encre); border-radius: 12px; padding: 12px; }
.apercu-certificat p { margin: 0; }

.defi-pourcent { font-variant-numeric: tabular-nums; font-family: var(--texte); font-weight: 700; font-size: 1.1rem; margin: 12px 0 6px; }
.pastilles { list-style: none; padding: 4px 2px 10px; margin: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.df-pastille { font-variant-numeric: tabular-nums; display: grid; place-items: center; gap: 2px; width: 52px; height: 58px; border: 3px solid var(--encre); border-radius: 10px; background: var(--blanc); font-family: var(--texte); font-weight: 700; cursor: pointer; }
.df-pastille.fait { background: var(--vert-fond); color: var(--sur-couleur); }
.df-pastille.verrouille { background: var(--papier-2); color: var(--gris); }
.df-pastille.courante { outline: 3px solid var(--accent); outline-offset: 2px; }
.liste-jours { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.jour-ligne button { width: 100%; display: flex; gap: 10px; align-items: center; min-height: 52px; text-align: left; background: var(--blanc); border: 3px solid var(--encre); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.jour-ligne.fait button { background: #E8F3EB; }
.jour-ligne.verrouille button { background: var(--papier-2); color: var(--gris); }
.jour-num { font-variant-numeric: tabular-nums; flex: none; font-family: var(--texte); font-weight: 700; min-width: 4.4em; }
.jour-titre { flex: 1; }
.jour-etoiles { color: var(--jaune); letter-spacing: 2px; }
.jour-ouvert { color: var(--accent-texte); }
.action-jour { position: sticky; bottom: 76px; z-index: 2; background: var(--papier); padding-bottom: 4px; }
.carte-certificat-defi { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 12px; box-shadow: var(--ombre); }
.carte-certificat-defi > div { flex: 1; }
.carte-certificat-defi p { margin: 4px 0 8px; }
.carte-certificat-defi.obtenu { background: #E8F3EB; }
.recette-defi { margin-top: 20px; border: 2px dashed var(--gris); border-radius: 10px; padding: 8px 12px; font-size: .85rem; color: var(--gris); }
.recette-defi .lien { margin: 4px 0 0; min-height: 36px; }

.volet-fond { position: fixed; inset: 0; z-index: 20; background: rgba(46, 36, 51, .55); display: grid; align-items: end; }
.volet { background: var(--papier); border-top: 4px solid var(--encre); border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); max-width: 640px; width: 100%; margin: 0 auto; }

.fin-defi { position: relative; overflow: hidden; min-height: 100vh; }
.fin-defi .fermer { position: absolute; top: 16px; left: 16px; }
.sceau-anime svg { animation: sceau-monte .5s steps(5) both; }
@keyframes sceau-monte { from { transform: translateY(40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.df-confettis { position: absolute; inset: 0; pointer-events: none; }
.df-confettis i { position: absolute; top: -12px; width: 8px; height: 8px; animation: df-tombe linear infinite; }
@keyframes df-tombe { to { transform: translateY(110vh) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .df-confettis, .sceau-anime svg { animation: none; } .df-confettis { display: none; } }
.jour-verrouille { text-align: center; padding-top: 40px; }
.liste-defis-accueil { display: grid; gap: 10px; }
.carte-defi-mini { display: flex; gap: 12px; align-items: center; background: var(--blanc); border: 3px solid var(--encre); border-left: 12px solid var(--accent-defi, var(--accent)); border-radius: 12px; padding: 8px 10px; color: var(--encre); text-decoration: none; box-shadow: var(--ombre); }
.carte-defi-mini span { display: grid; gap: 2px; }
.carte-defi-mini strong { font-family: var(--texte); font-weight: 700; }
.carte-defi-mini small { color: var(--gris); font-variant-numeric: tabular-nums; }

/* Jeux et pratique — « Bureau 16 bits ». */
.jeux .note-compte { font-size: .9rem; color: var(--gris); margin: 10px 0 0; }
.rubrique { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); margin: 1.6em 0 .6em; }
.bleu { color: var(--nuit-texte); font-weight: 700; }

.carte-niveau { display: block; width: 100%; text-align: left; background: var(--papier-2); border: 3px solid var(--encre); border-radius: 18px; padding: 16px; box-shadow: var(--ombre); cursor: pointer; }
.carte-niveau-tete { display: flex; gap: 14px; align-items: center; }
.carte-niveau-tete strong { display: block; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.45rem; line-height: 1.15; }
.carte-niveau-tete span { color: var(--gris); }
.carte-niveau-progres { display: flex; justify-content: space-between; margin: 14px 0 6px; font-weight: 600; }
.barre-progres { height: 10px; background: var(--blanc); border: 2px solid var(--encre); border-radius: 6px; overflow: hidden; }
.barre-progres > div { height: 100%; background: var(--accent); transition: width .7s ease-out; }
.carte-niveau-cible { background: var(--blanc); border: 2px solid var(--encre); border-radius: 12px; padding: 8px 12px; margin: 12px 0 0; font-size: .95rem; }
.carte-niveau-cible span { color: var(--accent-texte); font-weight: 700; margin-right: 6px; }

div.carrousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; margin: 0 -16px; padding-left: 16px; scrollbar-width: none; }
div.carrousel::-webkit-scrollbar { display: none; }
.carte-jeu { flex: none; width: 164px; scroll-snap-align: start; background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; overflow: hidden; color: var(--encre); text-decoration: none; box-shadow: var(--ombre); animation: jx-entree-carte .4s both; }
.carte-jeu img { display: block; width: 100%; height: 156px; object-fit: cover; background: var(--papier-2); }
.carte-jeu-bas { display: flex; gap: 6px; align-items: flex-end; padding: 10px; min-height: 86px; }
.carte-jeu-bas div { flex: 1; display: grid; }
.carte-jeu-bas strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1rem; line-height: 1.15; }
.carte-jeu-bas span { font-size: .8rem; color: var(--gris); line-height: 1.3; }
.pastille-jeu { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--encre); border-radius: 8px; background: var(--creme); font-size: .9rem; }
.pastille-jeu.fait { background: var(--vert-fond); color: var(--sur-couleur); animation: jx-pop .26s; }
@keyframes jx-entree-carte { from { opacity: 0; transform: translateY(20px); } }
@keyframes jx-pop { from { transform: scale(.6); opacity: 0; } }

.grille-exercices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.carte-exercice { display: grid; gap: 4px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; padding: 12px; color: var(--encre); text-decoration: none; box-shadow: var(--ombre); }
.carte-exercice strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.carte-exercice span:last-child { font-size: .85rem; color: var(--gris); }
.carte-exercice-icone { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--encre); border-radius: 12px; background: var(--ciel); color: var(--sur-clair); font-size: 1.3rem; }
.carte-exercice.fait .carte-exercice-icone { background: var(--vert-fond); color: var(--sur-couleur); }
.lien-historique { display: inline-block; margin-top: 10px; color: var(--accent-sombre); font-weight: 600; min-height: 44px; padding-top: 10px; }

.liens-jeux { display: grid; gap: 10px; margin: 16px 0; }
.liens-jeux a { display: flex; gap: 12px; align-items: center; background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 10px 12px; color: var(--encre); text-decoration: none; min-height: 60px; }
.liens-jeux a span { flex: 1; display: grid; }
.liens-jeux strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.liens-jeux em { font-style: normal; color: var(--gris); font-size: .85rem; }
.liens-jeux b { font-size: 1.4rem; color: var(--gris); }

/* Feuilles (médailles, partage, sortie) : la feuille elle-même est commune (styles.css). */
.voile { position: fixed; inset: 0; z-index: 40; background: rgba(46, 36, 51, .55); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 768px) { .voile { align-items: center; } }
@keyframes jx-monte { from { transform: translateY(40px); opacity: 0; } }
.feuille-sous { color: var(--gris); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.liste-medailles { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.liste-medailles li { display: flex; gap: 12px; align-items: center; background: var(--blanc); border: 2px solid var(--encre); border-radius: 12px; padding: 8px 10px; }
.liste-medailles li div { flex: 1; display: grid; min-width: 0; }
.liste-medailles li span { color: var(--gris); font-size: .85rem; }
/* Médaille à venir : l'image s'estompe, le texte reste lisible. */
.liste-medailles li.a-venir img { filter: grayscale(1); opacity: .55; }
.liste-medailles .coche { width: 28px; height: 28px; border-radius: 50%; background: var(--vert-fond); color: var(--sur-couleur); display: grid; place-items: center; font-weight: 700; }
.liste-medailles .compte { font-weight: 700; color: var(--gris); }
.liste-medailles li.prochain .compte { color: var(--nuit-texte); }
.sortie { text-align: center; }

/* Écran plein : niveau atteint, arrivée en ligue */
.niveau-atteint { position: fixed; inset: 0; z-index: 60; background: #1E1830; color: var(--sur-couleur); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 16px; overflow-y: auto; animation: jx-fondu .3s; }
.niveau-atteint h1 { color: #FFF1A8; font-size: 1.9rem; }
.niveau-etiquette { text-transform: uppercase; font-size: .75rem; letter-spacing: .12em; opacity: .6; }
.medaille-qui-descend { animation: jx-descend .6s .2s both; }
@keyframes jx-descend { from { transform: translateY(-40px) scale(.8); opacity: 0; } }
@keyframes jx-fondu { from { opacity: 0; } }
.pilules { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
/* Pastilles de niveau : fond coloré du niveau (écrit dans la page), texte à l'encre et en grand (≥ 18,66 px gras). */
.pilules span { color: var(--sur-clair); background: var(--creme); border-radius: 20px; padding: 2px 10px; font-weight: 700; font-size: 1.17rem; }
.niveau-vers { width: 100%; max-width: 360px; }
.niveau-vers p { display: flex; justify-content: space-between; font-size: .9rem; opacity: .8; }
.niveau-atteint .btn { max-width: 360px; }

/* Partie */
.partie { min-height: 100dvh; display: flex; flex-direction: column; background: var(--papier); }
.entete-jeu { position: sticky; top: 0; z-index: 10; background: var(--papier); border-bottom: 3px solid var(--encre); }
.entete-jeu-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.entete-jeu-titre { flex: 1; display: grid; }
.entete-jeu-titre strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.entete-jeu-titre span { color: var(--nuit-texte); font-size: .8rem; font-weight: 700; }
.entete-jeu-score { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--nuit-texte); font-weight: 700; }
.entete-jeu-barre { height: 4px; background: var(--papier-2); }
.entete-jeu-barre > div { height: 100%; background: var(--accent); transition: width .3s; }
.jx-retour { width: 44px; height: 44px; border: 0; background: none; font-size: 1.4rem; cursor: pointer; flex: none; }

.glisser, .detective { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 16px 24px; display: flex; flex-direction: column; }
.glisser h2, .resultat-ia h2 { margin: .2em 0; font-size: 1.3rem; }
.sous-consigne { color: var(--gris); margin: 0 0 16px; }
.pile { position: relative; height: min(50vh, 350px); margin: 8px 0 40px; touch-action: pan-y; }
.carte-glisser { position: absolute; inset: 0; border-radius: 16px; background: var(--blanc); border: 3px solid var(--encre); overflow: hidden; user-select: none; -webkit-user-select: none; transition: transform .2s ease-out, opacity .2s; touch-action: none; }
.carte-glisser.dessus { cursor: grab; box-shadow: var(--ombre); }
.carte-glisser.secoue { animation: jx-secoue 1.4s ease-in-out 1; }
@keyframes jx-secoue { 20% { transform: translateX(-12px) rotate(-8deg); } 40% { transform: translateX(12px) rotate(8deg); } 60% { transform: translateX(-10px) rotate(-6deg); } 80% { transform: translateX(10px) rotate(6deg); } }
.carte-image { width: 100%; height: 100%; background-size: cover; background-position: center; }
.jx-carte-prompt { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; background: var(--papier-2); text-align: center; }
.jx-carte-prompt p { font-size: 1.15rem; font-style: italic; font-weight: 600; margin: 0; }
.jx-bulle { width: 48px; height: 40px; border: 3px solid var(--gris); border-radius: 12px; display: grid; place-items: center; color: var(--gris); font-weight: 700; }
.indice-glisse { position: absolute; top: 14px; padding: 4px 10px; border: 3px solid; border-radius: 8px; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--blanc); opacity: 0; transition: opacity .1s; }
.indice-glisse.gauche { right: 14px; color: var(--nuit-texte); transform: rotate(8deg); }
.indice-glisse.droite { left: 14px; color: var(--accent-sombre); transform: rotate(-8deg); }
.vers-gauche .indice-glisse.gauche, .vers-droite .indice-glisse.droite { opacity: 1; }
.boutons-glisser { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; }
.boutons-glisser button { flex: 1; min-height: 52px; border: 3px solid var(--encre); border-radius: 12px; background: var(--blanc); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1rem; cursor: pointer; box-shadow: var(--ombre); }
.boutons-glisser button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }

.voile-retour { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.retour-manche { width: 100%; max-width: 560px; background: var(--blanc); border-top: 4px solid var(--vert); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 0 rgba(46, 36, 51, .12); animation: jx-monte .5s ease-in-out; }
.retour-manche.faux { border-top-color: var(--rouge); }
.retour-titre { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.3rem; display: flex; gap: 8px; align-items: center; margin: 0; }
.retour-manche.juste .retour-titre span { color: var(--vert-texte); }
.retour-manche.faux .retour-titre span { color: var(--rouge-texte); }
.retour-verite { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.btn-vert { background: var(--vert); }
.btn-info { background: var(--ciel); color: var(--sur-clair); }

.resultat-ia { background: var(--papier-2); border: 3px solid var(--encre); border-radius: 16px; padding: 14px; }
.resultat-image { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid var(--encre); }
.resultat-ia blockquote { margin: 8px 0 0; font-style: italic; }
.jx-options { display: grid; gap: 10px; margin: 16px 0; }
.jx-option { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; padding: 10px 12px; cursor: pointer; min-height: 52px; }
.jx-option.choisie { border-color: var(--accent); background: #FFF4EC; box-shadow: 0 0 0 2px var(--accent); }
.jx-option:disabled { opacity: .6; cursor: default; }
.lettre { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--encre); display: grid; place-items: center; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.btn.colle { position: sticky; bottom: 16px; }

/* Résultat */
.resultat-jeu { position: relative; min-height: 100dvh; overflow: hidden; background: linear-gradient(141deg, #1E1830 8%, #2F2450 50%, #2F4B66 92%); color: var(--sur-couleur); text-align: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); animation: jx-fondu .4s; }
.resultat-jeu > * { position: relative; max-width: 520px; margin-left: auto; margin-right: auto; }
.etoiles-qui-tombent { position: absolute !important; inset: 0; max-width: none !important; pointer-events: none; }
.etoiles-qui-tombent i { position: absolute; top: -8px; width: 3px; height: 3px; background: #FFF1A8; animation: jx-tombe linear infinite; }
@keyframes jx-tombe { to { transform: translateY(105vh); } }
.perso-resultat { display: block; width: min(240px, 70vw); height: auto; }
.resultat-jeu h1 { color: #FFF1A8; font-size: 2rem; }
.resultat-sous, .resultat-note { opacity: .8; }
.resultat-note { font-size: .9rem; }
.prompts-debloques { text-align: left; margin-top: 20px; }
.prompts-debloques h2 { text-align: center; color: #FFF1A8; }
.prompt-debloque { display: flex; gap: 10px; background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.prompt-debloque > div:first-child { flex: 1; }
.prompt-debloque span { font-size: .75rem; font-weight: 700; color: var(--gris); text-transform: uppercase; }
.prompt-debloque p { margin: 4px 0 0; font-size: .95rem; }
.actions-prompt { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prompt-debloque .actions-prompt { flex-direction: column; }
.resultat-actions { margin-top: 20px; }
.lien-brillant { display: block; margin: 16px auto 0; background: linear-gradient(90deg, #FFF1A8, var(--accent), #FFF1A8); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; border: 0; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 700; cursor: pointer; min-height: 44px; animation: jx-reflet 2.5s linear infinite; }
@keyframes jx-reflet { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.canaux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.canaux a, .canaux button { display: grid; justify-items: center; gap: 6px; background: none; border: 0; color: var(--encre); text-decoration: none; font-size: .8rem; cursor: pointer; }
.canaux .rond { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--encre); background: var(--blanc); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }

.toast-jeux { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 70; display: flex; gap: 12px; align-items: center; max-width: calc(100% - 32px); background: var(--encre); color: var(--creme); padding: 10px 16px; border-radius: 12px; font-weight: 600; box-shadow: var(--ombre); }
.toast-jeux button { background: none; border: 0; color: var(--creme); font-weight: 700; cursor: pointer; min-height: 32px; }

/* Correcteur et constructeur */
.jx-pratique { min-height: 100dvh; display: flex; flex-direction: column; background: var(--papier); }
.entete-simple { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 6px 12px; background: var(--papier); border-bottom: 3px solid var(--encre); }
.entete-simple h1 { font-size: 1.1rem; margin: 0; text-align: center; }
.fil { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 20px 16px; display: grid; gap: 14px; align-content: start; }
.msg { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.msg p { margin: 0 0 .5em; }
.msg.moi { justify-content: flex-end; }
.msg.moi p { background: var(--nuit); color: var(--sur-couleur); border-radius: 14px 14px 2px 14px; padding: 10px 12px; max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.ia > p, .msg.ia .reponse { background: var(--blanc); border: 2px solid var(--encre); border-radius: 14px 14px 14px 2px; padding: 10px 12px; max-width: 88%; animation: jx-fondu .5s; min-width: 0; }
.avatar-bip { flex: none; border-radius: 6px; background: var(--creme); }
.attente { color: var(--gris); font-style: italic; }
.briques { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.briques li { font-size: .75rem; font-weight: 700; border: 2px solid; border-radius: 20px; padding: 1px 8px; }
.briques li.ok { color: var(--vert-texte); }
.briques li.ok::before { content: "✓ "; }
.briques li.manque { color: var(--gris); border-style: dashed; }
.version-solide { margin-top: 8px; background: var(--papier-2); border: 2px solid var(--encre); border-radius: 12px; padding: 10px; }
.version-solide header { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.version-solide header > span:first-child { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--accent-sombre); }
.version-solide button { border: 2px solid var(--encre); background: var(--blanc); border-radius: 8px; padding: 4px 10px; font-weight: 700; font-size: .85rem; cursor: pointer; min-height: 36px; }
.version-solide pre { white-space: pre-wrap; font-family: var(--texte); font-size: .92rem; margin: 8px 0 0; overflow-wrap: anywhere; }
.saisie { position: sticky; bottom: 0; background: var(--papier); border-top: 3px solid var(--encre); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 48px; gap: 8px; }
.saisie textarea { background: var(--blanc); color: var(--encre); font: inherit; border: 2px solid var(--encre); border-radius: 12px; padding: 10px; resize: none; min-height: 48px; max-height: 140px; }
.envoyer { border: 3px solid var(--encre); border-radius: 12px; background: var(--accent); color: var(--sur-couleur); font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.envoyer:disabled { background: #cbbfb3; }
.mention { grid-column: 1 / -1; margin: 0; font-size: .75rem; color: var(--gris); text-align: center; }

.entete-page { display: flex; gap: 8px; align-items: center; }
.entete-page h1 { margin: 0; font-size: 1.35rem; }
.vide { color: var(--gris); }
.liste-lignes { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.liste-lignes a { display: flex; gap: 10px; align-items: center; background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; padding: 12px 14px; color: var(--encre); text-decoration: none; min-height: 56px; }
.liste-lignes a span { flex: 1; display: grid; min-width: 0; }
.liste-lignes strong { font-weight: 600; }
.liste-lignes em { font-style: normal; color: var(--gris); font-size: .85rem; }
.liste-lignes b { font-size: 1.4rem; color: var(--gris); }

/* Ligue */
.ligue-tete { display: flex; gap: 14px; align-items: center; background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; padding: 12px; margin: 12px 0; box-shadow: var(--ombre); }
.ligue-rang { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.6rem; margin: 0; }
.ligue-regles { margin-top: 16px; }
.paliers { display: flex; gap: 8px; flex-wrap: wrap; }
.paliers span { display: flex; gap: 6px; align-items: center; border: 2px solid var(--encre); border-radius: 20px; padding: 2px 10px 2px 4px; background: var(--blanc); }
.paliers span.actif { background: var(--creme); font-weight: 700; }

.partage-score { text-align: center; }
.chiffre { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Classement de ligue (carte du profil et page complète) */
.carte-ligue { position: relative; overflow: hidden; border: 3px solid var(--encre); border-radius: 18px; padding: 16px; margin: 12px 0; background: linear-gradient(225deg, var(--nuit) 20%, #1E1830 98%); color: var(--sur-couleur); box-shadow: var(--ombre); }
.carte-ligue-corps { display: grid; gap: 14px; transition: opacity .4s, transform .4s; }
.carte-ligue-corps.cache { opacity: 0; transform: scale(.96); }
.carte-ligue header { text-align: center; }
.carte-ligue-titre { font-family: var(--texte); font-weight: 700; font-size: 1.2rem; color: #FFF1A8; margin: 0; }
.carte-ligue-sous { white-space: pre-line; font-size: .9rem; margin: 4px 0 0; opacity: .9; }
.fenetre-ligue { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); }
.carte-ligue.complet .fenetre-ligue { -webkit-mask-image: none; mask-image: none; }
.piste-ligue { position: relative; transition: transform 1.2s cubic-bezier(.45, 0, .2, 1); }
.place { position: absolute; left: 0; right: 0; height: 48px; transition: top 1.2s cubic-bezier(.45, 0, .2, 1); }
.place.eleve { z-index: 2; }
.ligne-ligue { display: flex; align-items: center; gap: 8px; height: 48px; padding: 8px; border-radius: 12px; background: var(--blanc); color: var(--encre); }
.ligne-ligue.moi { background: var(--creme); box-shadow: 0 0 0 3px var(--accent); }
.ligne-rang { width: 26px; flex: none; text-align: center; font-family: var(--texte); font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--gris); }
.ligne-ligue img { flex: none; border-radius: 50%; background: var(--papier-2); }
.ligne-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .92rem; }
.ligne-xp { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--nuit-texte); font-size: .92rem; }
.medaille-rang { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .72rem; font-weight: 700; color: var(--sur-clair); border: 2px solid var(--encre); }
.medaille-rang.r1 { background: #FAB217; } .medaille-rang.r2 { background: #C9CDD3; } .medaille-rang.r3 { background: #E17D2D; }
.ecran-ligue { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; animation: jx-fondu .5s; }
.fleche-rebond { display: inline-block; animation: jx-rebond 1.2s ease-in-out infinite; }
@keyframes jx-rebond { 50% { transform: translateX(4px); } }
.carte-ligue.complet .ecran-ligue { justify-content: flex-start; padding-top: 32px; }

/* Lot V07 : bloc « À vous », sources des faits, « Dans votre pays », fait daté, révision à J+3, « Mes modèles ». */
.l-sources { font-size: .8rem; color: var(--gris); margin: 6px 0 0; }
.l-sources a { color: inherit; }
.encadre-fait { background: var(--papier-2); border-style: dashed; }
.encadre-pays { background: var(--fond-pays); }
/* En thème sombre, le fond reste clair : le client protège les fonds clairs (texte à l'encre), un fond sombre ici
   donnait un texte sombre sur fond sombre (recette V11, 28/09/2026). */
.a-vous-champs { display: grid; gap: 10px; margin: 12px 0; }
.a-vous-champs label, .a-vous-demande { display: grid; gap: 4px; font-size: .9rem; font-weight: 700; }
.a-vous-champs input, .a-vous-champs select, .a-vous-demande textarea, .revision-refaire { font: inherit; font-weight: 400; font-size: 1rem; color: var(--encre); background: var(--blanc); border: 3px solid var(--encre); border-radius: 10px; padding: 10px 12px; width: 100%; box-sizing: border-box; }
.a-vous-demande textarea { resize: vertical; min-height: 140px; }
.a-vous-avertissement { font-size: .8rem; color: #C9C3D6; margin: 8px 0 0; }
.a-vous-reponse { color: var(--encre); background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 12px 16px; margin: 12px 0; overflow-wrap: anywhere; }
.a-vous-exemple { border-style: dashed; }
.a-vous-reponse-tete { margin-bottom: 6px; }
.badge-exemple { background: var(--encre); color: var(--papier); }
.a-vous-note { font-size: .85rem; color: var(--gris); }
.a-vous .a-vous-note, .a-vous .a-vous-minutes, .a-vous .l-sources { color: #C9C3D6; }
.a-vous-range a, .a-vous-minutes a { color: #F7B08F; }
.a-vous-range { font-weight: 700; color: #F2EEF6; }
.a-vous-minutes { margin: 10px 0 0; }
.fin-revision { max-width: 30em; margin: 12px auto; text-align: center; }
.revision-tete { font-size: .85rem; color: var(--gris); font-weight: 700; }
.section-revisions { margin: 16px 0; }
.liste-modeles { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.modele { background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 10px 14px; box-shadow: var(--ombre); }
.modele-tete { display: grid; gap: 2px; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: var(--encre); cursor: pointer; }
.modele-tete small { color: var(--gris); }
.modele-corps { border-top: 2px dashed var(--encre); margin-top: 8px; padding-top: 6px; overflow-wrap: anywhere; }
.modele-actions { display: flex; gap: 16px; margin-top: 6px; }
.carte-modeles { margin: 8px 0; }
.a-vous .a-vous-reponse .a-vous-note { color: var(--gris); }
/* Lot V10 (veille technique) : « Vérifié le … » en tête de leçon, et la ligne sobre quand un outil a changé. */
.lecon-veille { margin: 4px 0 10px; }
.lecon-verifie { font-size: .8rem; color: var(--gris); margin: 0; }
.lecon-maj { font-size: .88rem; margin: 6px 0 0; padding: 8px 10px; border-left: 4px solid var(--jaune); background: var(--papier-2); border-radius: 6px; }
/* Recette V11 : l'exemple dit pour quel cas il a été écrit, et un champ resté à sa valeur d'exemple le signale. */
.a-vous-cas { font-size: .85rem; margin: 0 0 8px; padding: 6px 10px; background: var(--papier-2); border-left: 4px solid var(--jaune); border-radius: 6px; color: var(--encre); }
.a-vous-a-remplacer { font-weight: 400; font-style: normal; color: #F7B08F; }

/* Demande finie dans l'atelier du tunnel v2 : elle attend l'élève dans sa leçon 1 (bloc « À vous »). */
.a-vous-atelier { margin: 10px 0; padding: 10px 12px; border: 3px solid var(--vert); border-radius: 10px; background: var(--papier-2); }
.a-vous-atelier p { margin: 6px 0 0; font-weight: 600; line-height: 1.45; }
.a-vous-atelier .btn { margin-top: 8px; }
.a-vous-atelier-tete { margin: 0 0 14px; }
.a-vous-atelier-tete .a-vous-note { font-weight: 400; font-size: .9rem; }
.a-vous-atelier a { color: var(--accent-sombre); }
.a-vous .a-vous-atelier { background: rgba(255, 255, 255, .07); color: inherit; }

/* Programmes de certification : catalogue, volet du bas, page d'un programme (src/app/programmes/Programmes.tsx). */
.pg-hero { font-size: 1.35rem; margin: 8px 0 2px; }
.pg-liste { display: grid; gap: 14px; margin-top: 12px; }
.pg-carte { min-height: 76px; }
.pg-carte strong { line-height: 1.25; }
.pg-carte.actuel { border-color: var(--accent); }
.pg-carte .pg-avance { color: var(--accent-sombre); font-weight: 700; }
.pg-carte .pg-actuel, .pg-actuel { position: absolute; top: -11px; right: 12px; background: var(--accent-fond); color: var(--sur-couleur); border: 2px solid var(--encre); border-radius: 999px; padding: 0 10px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pg-vignette { flex: none; width: 85px; height: 56px; display: grid; place-items: center; position: relative; background: color-mix(in srgb, var(--accent-prog) 22%, var(--blanc)); border: 2px solid var(--encre); border-radius: 8px; overflow: hidden; }
.pg-vignette img { margin-top: -10px; }
.pg-vignette-sceaux { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; justify-content: center; gap: 1px; }
.pg-volet { max-width: 520px; width: 100%; }
.pg-volet .feuille-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pg-volet .feuille-tete h2 { margin: 0; font-size: 1.2rem; }
.pg-volet-cours { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; max-height: 50vh; overflow-y: auto; }
.pg-volet-cours li { display: flex; gap: 10px; align-items: center; padding: 10px; border: 2px solid var(--encre); border-radius: 12px; background: var(--blanc); }
.pg-volet-cours li > div { flex: 1; display: grid; gap: 4px; }
.pg-volet-cours span, .pg-cours-carte span { color: var(--gris); font-size: .9rem; }
.pg-note { text-align: center; font-size: .8rem; }
.pg-apercu { margin: 4px 0 12px; padding: 12px; background: linear-gradient(var(--blanc), var(--papier-2)); border: 3px solid var(--encre); border-radius: 0 0 16px 16px; }
.pg-apercu .cert-svg { box-shadow: 0 2px 0 var(--encre); border-radius: 4px; max-width: 420px; margin: 0 auto; }
.pg-bandeau-apercu { margin: 0 0 8px; padding: 6px 10px; background: var(--creme); border: 2px solid var(--encre); border-radius: 8px; font-size: .9rem; }
.pg-titre { margin: 8px 0 4px; font-size: 1.3rem; }
.pg-faits { padding-left: 18px; margin: 4px 0 14px; color: var(--gris); }
.pg-cours { list-style: none; padding: 0; margin: 0 0 16px; display: grid; }
.pg-cours-carte { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--blanc); color: var(--encre); text-decoration: none; border: 3px solid var(--encre); border-bottom-width: 5px; border-radius: 12px; }
.pg-cours-carte > div { flex: 1; display: grid; gap: 4px; min-width: 0; }
.pg-coche { flex: none; width: 28px; height: 28px; display: grid; place-items: center; background: var(--vert-fond); color: #fff; border: 2px solid var(--encre); border-radius: 50%; font-weight: 700; }
.pg-cours-carte .pg-coche { color: var(--sur-couleur); }
.pg-fleche { display: flex; align-items: center; gap: 8px; color: var(--gris); padding: 2px 0; }
.pg-fleche::before, .pg-fleche::after { content: ""; flex: 1; border-top: 2px dashed var(--papier-2); }
.pg-certif { margin-top: 20px; padding: 16px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; }
.pg-certif-tete { display: flex; gap: 12px; align-items: center; }
.pg-certif-tete div { display: grid; }
.pg-certif-tete span { color: var(--gris); font-size: .9rem; }
.pg-certif h2 { margin: 12px 0 4px; font-size: 1.1rem; }
.pg-pied { margin-top: 16px; padding-bottom: 24px; }
/* Programme composé (V02). */
.pc-suite { width: 100%; margin: 14px 0 6px; }
.pc-fini { font-weight: 700; margin: 14px 0; }
.pc-semaine { margin-top: 22px; }
.pc-semaine h2 { font-size: 1.05rem; margin: 0 0 8px; }
.pc-lecons { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pc-lecons a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 2px solid var(--encre); border-radius: 8px; background: var(--blanc); color: var(--encre); text-decoration: none; }
.pc-lecons li.faite a { background: var(--papier-2); }
.pc-coche { flex: none; width: 22px; height: 22px; border: 2px solid var(--encre); border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.pc-lecons li.faite .pc-coche { background: var(--vert-fond); color: var(--sur-couleur); }
.pc-texte { display: grid; gap: 2px; }
.pc-texte small { color: var(--gris); }

/* Bibliothèque de prompts et Mes prompts. */
.recherche-prompts { position: relative; margin: 12px 0 16px; }
.recherche-prompts label { display: flex; gap: 8px; align-items: center; background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; padding: 0 12px; }
.recherche-prompts label:focus-within { border-color: var(--accent); }
.recherche-prompts input { flex: 1; border: 0; background: none; font: inherit; min-height: 48px; outline: none; padding-right: 32px; }
/* Une seule croix : celle du bouton « Effacer », pas celle que le navigateur ajoute aux champs de recherche. */
.recherche-prompts input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.recherche-prompts > button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; width: 36px; height: 36px; cursor: pointer; }
.bandeau-pack { background: var(--creme); border: 2px dashed var(--encre); border-radius: 10px; padding: 8px 12px; font-size: .9rem; }
.bandeau-pack a { color: var(--accent-sombre); font-weight: 700; }
.grille-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 640px) { .grille-categories { grid-template-columns: repeat(3, 1fr); } }
.tuile-categorie { position: relative; aspect-ratio: 3 / 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; border: 3px solid var(--encre); border-radius: 14px; color: var(--sur-couleur); text-decoration: none; box-shadow: var(--ombre); overflow: hidden;
  background-image: linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.08) 75%), linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.08) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
/* Teintes foncées d'un cran (texte blanc sur le motif clair : 4,5:1 au moins). */
.teinte-0 { background-color: #B8431A; } .teinte-1 { background-color: var(--nuit); } .teinte-2 { background-color: #256F3D; }
.teinte-3 { background-color: var(--bois); } .teinte-4 { background-color: #6A45AD; }
.tuile-categorie strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1rem; line-height: 1.15; }
.tuile-icone { position: absolute; left: 10px; top: 8px; font-size: 1.5rem; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.tuile-categorie .chevron { position: absolute; right: 10px; top: 6px; font-size: 1.4rem; }
.squelettes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.squelettes span { aspect-ratio: 3 / 2; border-radius: 14px; background: var(--papier-2); animation: jx-pulse 1.2s infinite alternate; }
@keyframes jx-pulse { to { opacity: .5; } }

.liste-prompts, .resultats-prompts { display: grid; gap: 14px; }
.chemin-prompt { font-size: .8rem; color: var(--gris); margin: 0 0 4px; }
.carte-prompt-biblio { background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; padding: 14px 16px; }
.texte-prompt { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 2px solid var(--papier-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.texte-prompt.coupe { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
mark.variable { background: #FFE3CF; color: var(--accent-sombre); border-radius: 4px; padding: 0 2px; font-weight: 600; }
mark.trouve { background: var(--ciel); color: var(--sur-clair); }
.rond-action { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--encre); background: var(--papier-2); display: inline-grid; place-items: center; cursor: pointer; font-size: 1rem; }
.rond-action.plein { background: var(--creme); color: var(--accent-sombre); }
.rond-action.gris { background: #E4DDD6; border-color: #B8AEA5; cursor: default; }
.pastille-action { border: 2px solid var(--encre); border-radius: 20px; background: var(--ciel); color: var(--sur-clair); padding: 6px 12px; font-size: .85rem; font-weight: 700; cursor: pointer; min-height: 40px; }
.pastille-action.grise { background: #B8AEA5; border-color: #B8AEA5; color: var(--sur-clair); cursor: default; }
.remplir { display: grid; gap: 8px; margin: 0 0 12px; }
.remplir label { display: grid; font-size: .85rem; font-weight: 600; }
.remplir input { font: inherit; border: 2px solid var(--encre); border-radius: 8px; padding: 8px; min-height: 44px; }
.verrouillee { background: #F1EBE5; border-color: #B8AEA5; }
.barres { display: grid; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--blanc); }
.barres span { height: 20px; border-radius: 10px; background: #D8CFC6; }
.barres span:last-child { width: 60%; }
.carte-pack { display: flex; gap: 12px; align-items: center; margin-top: 20px; background: var(--creme); border: 3px solid var(--encre); border-radius: 14px; padding: 14px; }
.carte-pack h2 { margin: 0; font-size: 1.15rem; }
.carte-pack p { font-size: .95rem; }
.carte-pack .btn { display: none; }
@media (min-width: 768px) { .carte-pack .btn { display: block; } }
.bouton-colle { position: sticky; bottom: 76px; margin-top: 16px; }
@media (min-width: 768px) { .bouton-colle { display: none; } }
.vide-recherche, .vide-favoris { text-align: center; padding: 20px 0; }
.vide-recherche img, .vide-favoris img { margin: 0 auto; display: block; }

.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.filtres button { border: 2px solid var(--encre); border-radius: 20px; background: var(--blanc); padding: 6px 12px; font-weight: 600; cursor: pointer; min-height: 40px; }
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--creme); }
.liste-favoris { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.favori-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.favori-origine { font-size: .8rem; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tunnel v2 gamifié (maquettes Claude Design, 8 écrans) : HUD d'XP, compagnons, tuiles, duel, mini-boss, carte du monde,
   leçon du J1 et victoire. Préfixe « j- ». Jetons de styles.css ; les panneaux de nuit restent sombres dans les deux
   thèmes. Tout mouvement s'arrête avec prefers-reduced-motion (les planches montrent alors leur image « fin »). */

/* — Bande de décor animée à la largeur du conteneur (planche en pixels nets) — */
.j-bande { position: relative; width: 100%; aspect-ratio: var(--ratio); background-image: var(--src); background-repeat: no-repeat;
  background-size: calc(var(--n) * 100%) auto; background-position: 0 var(--y, 0%); image-rendering: pixelated; overflow: hidden; }
.j-bande-boucle { animation: j-bande calc(var(--n) / var(--fps, 12) * 1s) steps(var(--n)) infinite; }
@keyframes j-bande { from { background-position-x: 0; } to { background-position-x: calc(var(--n) / (var(--n) - 1) * 100%); } }

/* — Cadre et HUD — */
.j-cadre { min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
.j-cadre .t-page { animation: j-entre .28s ease-out; }
@keyframes j-entre { from { opacity: 0; } to { opacity: 1; } }
.j-cadre .t-pied-fixe { z-index: 7; }
.j-hud { position: sticky; top: 0; z-index: 6; background: var(--papier); padding: 8px 16px 8px; border-bottom: 3px solid var(--encre); }
.j-hud-ligne, .j-cases { max-width: 520px; margin: 0 auto; }
.j-hud-ligne { position: relative; display: flex; align-items: center; gap: 10px; }
.j-retour { flex: none; width: 40px; height: 40px; border: 3px solid var(--encre); border-radius: 10px; background: var(--blanc); color: var(--encre); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 var(--encre); }
.j-retour:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--encre); }
.j-retour-vide { flex: none; width: 0; }
.j-niv { flex: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--titre); font-weight: 700; font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.j-niv b { color: var(--accent-sombre); font-family: var(--texte); font-weight: 800; font-variant-numeric: tabular-nums; }
.j-xp { flex: 1; height: 16px; border: 3px solid var(--encre); border-radius: 4px; background: var(--blanc); box-shadow: 0 3px 0 var(--encre); overflow: hidden; }
.j-xp i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0 10px, #F07A45 10px 12px); transition: width .55s cubic-bezier(.3, 1.4, .5, 1); }
.j-gain { position: absolute; right: 8px; top: -2px; font-family: var(--titre); font-weight: 700; color: var(--accent-texte); text-shadow: 0 2px 0 var(--encre); pointer-events: none; animation: j-gain .9s ease-out forwards; }
@keyframes j-gain { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 25% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-22px) scale(1); } }
.j-cases { list-style: none; display: flex; gap: 6px; padding: 0; margin-top: 8px; }
.j-cases li { flex: 1; min-width: 0; text-align: center; font-family: var(--texte); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; padding: 2px 0; border: 2px solid var(--encre); border-radius: 4px; background: var(--blanc); color: var(--gris); }
.j-cases li.j-case-fait { background: var(--vert-fond); color: var(--sur-couleur); }
.j-cases li.j-case-actuel { background: var(--jaune); color: #2E2433; animation: j-pop .25s ease-out; }
@keyframes j-pop { 0% { transform: scale(.7); } 70% { transform: scale(1.12); } 100% { transform: none; } }

/* — Bulle du compagnon — */
.j-parle { display: flex; align-items: flex-end; gap: 8px; max-width: 520px; margin: 12px auto 0; padding: 0 16px; }
.j-cadre > .j-parle + .t-page { padding-top: 6px; }
.j-parle-perso { margin-bottom: 2px; }
.j-bulle { position: relative; flex: 1; min-width: 0; background: var(--blanc); border: 3px solid var(--encre); border-radius: 10px; padding: 10px 12px; box-shadow: 0 4px 0 var(--encre); animation: j-bulle .25s ease-out; font-size: .95rem; line-height: 1.45; }
.j-bulle::before { content: ""; position: absolute; left: -11px; bottom: 12px; border: 8px solid transparent; border-right: 10px solid var(--encre); border-left: 0; }
.j-bulle::after { content: ""; position: absolute; left: -6px; bottom: 14px; border: 6px solid transparent; border-right: 7px solid var(--blanc); border-left: 0; }
.j-bulle p { margin: 0; }
.j-bulle-source { opacity: 0; transition: opacity .4s; }
.j-bulle-source.vu { opacity: 1; }
@keyframes j-bulle { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.j-curseur { display: inline-block; width: .5em; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: j-clignote .8s steps(1) infinite; }
@keyframes j-clignote { 50% { opacity: 0; } }
.j-parle:not(.j-echo) { padding: 0; margin: 14px 0 0; }

/* — Porte : le compagnon sur un sol en pixel — */
.j-porte h1 { font-size: 1.9rem; margin-top: .3em; }
.j-porte .t-surtitre { font-size: .8rem; }
.j-scene { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 26px -16px 0; padding: 0 10px 14px; }
.j-scene::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% - 92px); z-index: 0; border-top: 3px solid var(--encre);
  background: url(/planches/Q07-sol-herbe-fleurs.png) repeat-x 0 0 / 96px 72px, repeating-linear-gradient(90deg, #7A4E32 0 12px, #8B5A3A 12px 24px); image-rendering: pixelated; }
.j-perso { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 0; padding: 0; background: none; border: 0; cursor: pointer; color: var(--encre); font: inherit;
  animation: j-marche .6s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: calc(var(--i) * 120ms); }
@keyframes j-marche { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
.j-perso-scene { position: relative; height: 104px; display: flex; align-items: flex-end; }
.j-perso-scene .sb-anim { margin-bottom: -4px; }
.j-perso-etiquette { position: relative; margin-top: 30px; width: 100%; min-height: 76px; display: grid; align-content: center; gap: 1px; padding: 8px 4px; background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); border-radius: 8px; box-shadow: 0 4px 0 #2E2433; text-align: center; line-height: 1.2; transition: transform .08s, background .08s; }
.j-perso-etiquette b { font-size: .98rem; }
.j-perso-etiquette small { font-size: .72rem; color: var(--gris); font-weight: 600; }
.j-perso-nom { margin-top: 10px; font-family: var(--titre); font-weight: 700; color: #FFF1A8; text-shadow: 0 2px 0 #2E2433; font-size: 1.05rem; }
.j-perso.j-suggere .j-perso-etiquette { background: var(--accent-fond); color: #FFFFFF; }
.j-perso.j-suggere .j-perso-etiquette small { color: #FFF1A8; }
.j-perso:hover .j-perso-etiquette { transform: translateY(-2px); }
.j-perso:active .j-perso-etiquette, .j-perso.pris .j-perso-etiquette { transform: translateY(4px); box-shadow: 0 0 0 #2E2433; background: var(--jaune); color: #2E2433; }
.j-perso.eteint { filter: brightness(.55) saturate(.6); transition: filter .2s; }
.j-perso:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; border-radius: 8px; }
.j-cest-parti { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--titre); font-weight: 700; font-size: .95rem; background: var(--blanc); border: 3px solid var(--encre); border-radius: 6px; padding: 2px 8px; box-shadow: 0 3px 0 var(--encre); animation: j-pop .15s ease-out; }
.j-porte-pied { margin-top: 18px; font-size: .9rem; color: var(--encre); }
.j-porte-mention { text-align: center; }

/* — Questions en tuiles — */
.j-question h1 { font-size: 1.55rem; margin-top: .35em; }
.j-tuiles { display: grid; gap: 10px; margin: 14px 0 12px; }
.j-tuiles.j-grille { grid-template-columns: 1fr 1fr; }
.j-tuile { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px; text-align: left; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.25;
  color: var(--encre); background: var(--blanc); border: 3px solid var(--encre); border-radius: 8px; box-shadow: 0 4px 0 var(--encre); cursor: pointer;
  transition: transform .08s, box-shadow .08s, background .08s; animation: j-tuile .3s ease-out backwards; animation-delay: calc(var(--i) * 35ms); }
@keyframes j-tuile { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Survol seulement avec une souris : sur un écran tactile, il restait « collé » sur la tuile de l'écran suivant. */
@media (hover: hover) { .j-tuile:hover { background: var(--papier-2); } }
.j-tuile:active, .j-tuile.choisie { transform: translateY(4px); box-shadow: 0 0 0 var(--encre); background: var(--creme); }
.j-tuile.partie { animation: j-tap .26s ease-out; }
@keyframes j-tap { 40% { transform: translateY(4px) scale(.97); } 100% { transform: translateY(4px); } }
.j-tuile:focus-visible { outline: 3px solid var(--nuit); outline-offset: 2px; }
.j-tuile-texte { flex: 1; min-width: 0; }
.j-icone { flex: none; }
.j-coche { flex: none; width: 32px; height: 32px; border: 3px solid var(--encre); border-radius: 4px; background: var(--blanc); display: grid; place-items: center; overflow: hidden; }
.j-coche .sb-anim { margin: -3px; }
.j-tuile-gain { flex: none; font-family: var(--texte); font-weight: 800; font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--gris); }
.j-tuile-gain.vu { color: var(--vert-texte); animation: j-pop .25s ease-out; }

/* — Compteur de temps récupéré (rouleaux) — */
.j-compteur { background: #2E2433; color: #FFFFFF; border: 3px solid #2E2433; border-radius: 10px; padding: 12px 14px 14px; box-shadow: 0 4px 0 #0C0A10; text-align: center; margin: 12px 0 4px; }
.j-avec-compteur .j-compteur { position: sticky; top: 104px; z-index: 3; }
.j-compteur-titre { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 8px; font-family: var(--titre); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #FFF1A8; }
.j-compteur-rouleaux { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; }
.j-rouleau { position: relative; display: inline-block; width: 52px; height: 62px; overflow: hidden; background: url(/planches/Q46-compteur-rouleau.png) 0 0 / 100% 100%; image-rendering: pixelated;
  font-family: var(--texte); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 2.3rem; line-height: 62px; color: #2E2433; }
.j-rouleau-bande { display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.2, 1.3, .4, 1); }
.j-rouleau-bande span { height: 62px; display: block; text-align: center; }
.j-compteur-unite { font-family: var(--titre); font-weight: 700; font-size: 1.5rem; color: #FFF1A8; }
.j-compteur-legende { margin: 8px 0 0; font-size: .95rem; }
.j-compteur-legende b { color: var(--jaune); }
.j-compteur-legende small { display: block; font-size: .78rem; color: #CFC4DA; }
.j-compteur-valeur { margin: 2px 0; font-size: 1.1rem; }
.j-compteur-valeur b { font-family: var(--texte); font-weight: 800; font-size: 2.6rem; color: var(--jaune); text-shadow: 0 3px 0 #0C0A10; display: block; line-height: 1.1; }
.j-compteur-projet { font-weight: 700; font-size: 1.3rem; color: var(--jaune); }

/* — Duel (mini-leçon) — */
.j-duel h1 { font-size: 1.45rem; margin-bottom: .2em; }
.j-arene { margin: 12px -16px 0; width: calc(100% + 32px); border-block: 3px solid var(--encre); }
.j-combattant { position: absolute; display: grid; gap: 6px; }
.j-combattant-a { right: 5%; top: 7%; justify-items: end; }
.j-combattant-b { left: 4%; bottom: 8%; grid-auto-flow: column; align-items: end; justify-items: start; }
.j-combattant-a .j-plaque { order: 0; } .j-combattant-a .j-lettre { order: 1; margin-right: 22%; }
.j-combattant-b .j-plaque { order: 1; margin-bottom: 4px; } .j-combattant-b .j-lettre { order: 0; margin-left: 8px; }
.j-plaque { min-width: 150px; background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); border-radius: 6px; padding: 5px 8px; box-shadow: 0 3px 0 #2E2433; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: .8rem; }
.j-plaque b { font-family: var(--titre); }
.j-pv { font-family: var(--titre); font-weight: 700; color: var(--vert-texte); }
.j-combattant.ko .j-pv { color: var(--rouge-texte); }
.j-vie { grid-column: 1 / -1; display: block; height: 10px; border: 2px solid var(--encre); border-radius: 3px; background: var(--papier-2); overflow: hidden; }
.j-vie i { display: block; height: 100%; background: var(--vert); transition: width .6s steps(6); }
.j-combattant.ko .j-vie i { background: var(--rouge); }
.j-lettre { position: relative; display: grid; place-items: center; width: 54px; height: 54px; font-family: var(--titre); font-weight: 700; font-size: 1.9rem; background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); border-radius: 8px; box-shadow: 0 4px 0 #2E2433; animation: j-flotte 2s ease-in-out infinite; }
.j-combattant-b .j-lettre { animation-delay: -1s; }
@keyframes j-flotte { 50% { transform: translateY(-4px); } }
.j-combattant.ko .j-lettre { animation: j-secoue .3s 2, none; filter: grayscale(1); opacity: .75; transform: rotate(-12deg); }
.j-combattant.gagne .j-lettre { background: var(--jaune); color: #2E2433; }
@keyframes j-secoue { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.j-ko, .j-coup { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.j-demandes { display: grid; gap: 10px; margin: 14px 0 0; }
.j-demande { text-align: left; font: inherit; color: var(--encre); background: var(--blanc); border: 3px solid var(--encre); border-radius: 8px; padding: 10px 12px; box-shadow: 0 4px 0 var(--encre); cursor: pointer; display: grid; gap: 4px; transition: transform .08s, box-shadow .08s; }
.j-demande:active:not(:disabled), .j-demande.pariee { transform: translateY(4px); box-shadow: 0 0 0 var(--encre); }
.j-demande.pariee { background: var(--creme); }
.j-demande:disabled { cursor: default; opacity: .7; }
.j-demande.juste { border-color: var(--vert); opacity: 1; }
.j-demande.fausse { border-color: var(--rouge); }
.j-demande-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.j-demande-tete b { font-family: var(--titre); }
.j-demande-texte { font-style: italic; font-size: .93rem; line-height: 1.4; }
.j-pari { font-family: var(--titre); font-weight: 700; font-size: .78rem; text-transform: uppercase; background: var(--jaune); color: #2E2433; border: 2px solid #2E2433; border-radius: 4px; padding: 1px 6px; animation: j-pop .15s ease-out; }
.j-demande:focus-visible { outline: 3px solid var(--nuit); outline-offset: 2px; }
.j-reponses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.j-reponse { background: var(--blanc); border: 3px solid var(--encre); border-radius: 8px; padding: 8px 10px; font-size: .84rem; line-height: 1.4; min-height: 120px; transition: opacity .3s, border-color .3s; }
.j-reponse small { display: block; font-family: var(--titre); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-bottom: 4px; }
.j-reponse p { margin: 0; }
.j-reponse.gagne { border-color: var(--vert); }
.j-reponse.gagne small { color: var(--vert-texte); }
.j-reponse.perd { opacity: .55; border-style: dashed; }
.j-verdict { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 12px 14px; border: 3px solid #2E2433; border-radius: 8px; box-shadow: 0 4px 0 #2E2433; animation: j-monte-bas .35s ease-out; }
.j-verdict div { display: grid; gap: 2px; }
.j-verdict b { font-family: var(--titre); font-size: 1.25rem; }
.j-verdict span { font-size: .9rem; }
.j-verdict.bon { background: var(--vert-fond); color: #FFFFFF; }
.j-verdict.rate { background: var(--creme); color: var(--encre); }
@keyframes j-monte-bas { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.j-combo { position: relative; flex: none; display: grid; place-items: center; animation: j-zoom .4s cubic-bezier(.2, 1.6, .4, 1); }
.j-combo b { position: absolute; font-family: var(--titre); font-size: 1.2rem; color: #FFF1A8; text-shadow: 0 2px 0 #2E2433; margin-top: 10px; }
@keyframes j-zoom { from { transform: scale(2.4); opacity: 0; } to { transform: none; opacity: 1; } }
.j-duel .j-retour-duel { padding: 0; }

/* — Mini-boss — */
.j-boss-panneau { display: flex; align-items: center; gap: 12px; background: var(--nuit); color: #FFFFFF; border: 3px solid #2E2433; border-radius: 10px; padding: 10px 14px; box-shadow: 0 4px 0 #2E2433; margin-top: 4px; }
.j-boss-panneau.touche { animation: j-secoue .25s 2; }
.j-boss-sprite { flex: none; }
.j-boss-infos { flex: 1; display: grid; gap: 4px; min-width: 0; }
.j-boss-infos small { font-family: var(--titre); text-transform: uppercase; letter-spacing: .08em; color: var(--ciel); font-size: .78rem; }
.j-boss-infos b { font-family: var(--titre); font-size: 1.35rem; }
.j-vie-boss { height: 14px; border-color: #2E2433; background: #FFFFFF; }
.j-vie-boss i { background: var(--rouge); transition: width .6s steps(8); }
.j-boss-pv { font-size: .8rem; color: #FFF1A8; }
.j-epreuve-faite { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 10px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 8px; font-size: .9rem; }
.j-epreuve { padding-top: 6px; scroll-margin-top: 110px; }
.j-epreuve h1 { font-size: 1.4rem; margin: .2em 0; }
.j-epreuve-num { margin: 14px 0 0; font-family: var(--titre); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-sombre); font-size: .85rem; }
.j-victoire-boss { margin-top: 12px; padding: 12px 14px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 10px; box-shadow: 0 4px 0 var(--encre); animation: j-monte-bas .4s ease-out; }
.j-victoire-boss .j-epreuve-num { margin-top: 0; }

/* — Badges et jauges — */
.j-badge { display: inline-flex; align-items: center; gap: 12px; background: #FFFFFF; color: #2E2433; border: 3px solid #2E2433; border-radius: 8px; padding: 8px 14px 8px 8px; box-shadow: 0 4px 0 #0C0A10; text-align: left; }
.j-badge span { display: grid; }
.j-badge small { font-family: var(--titre); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #5E5566; }
.j-badge b { font-family: var(--titre); font-size: 1.3rem; }
.j-badge-clair { margin: 10px 0 4px; box-shadow: 0 4px 0 #2E2433; }
.j-stats { display: grid; gap: 8px; margin: 12px 0; }
.j-stat { display: grid; grid-template-columns: 1fr 36% 44px; gap: 10px; align-items: center; font-size: .9rem; font-weight: 700; }
.j-stat em { font-style: normal; font-weight: 400; color: var(--gris); font-size: .8rem; }
.j-stat b { text-align: right; font-variant-numeric: tabular-nums; }
.j-stat-rail { height: 16px; border: 3px solid var(--encre); border-radius: 3px; background: var(--blanc); overflow: hidden; }
.j-stat-rail i { display: block; height: 100%; animation: j-remplit .6s ease-out backwards; animation-delay: calc(var(--k) * 300ms); transform-origin: left; }
@keyframes j-remplit { from { transform: scaleX(0); } }
.j-stat-outils i { background: var(--ciel); } .j-stat-prompting i { background: var(--jaune); } .j-stat-workflows i { background: var(--vert); }
.j-stats-bilan { background: var(--blanc); border: 3px solid var(--encre); border-radius: 10px; padding: 12px; box-shadow: 0 4px 0 var(--encre); }
.j-stats-bilan .t-texte { margin: 4px 0 0; font-size: .95rem; }

/* — Bilan — */
.j-bilan h1 { font-size: 1.5rem; }
.j-compteur-grand { padding: 16px; }
.j-lignes { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.j-lignes li { display: flex; align-items: center; gap: 10px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 8px; padding: 8px 10px; }
.j-lignes li > span { display: grid; gap: 1px; font-size: .92rem; }

/* — Carte du monde (programme) — */
.j-carte h1 { font-size: 1.6rem; margin-bottom: .1em; }
.j-mondes { list-style: none; padding: 0; margin: 14px -16px 0; display: grid; gap: 0; }
.j-monde { border-top: 3px solid var(--encre); animation: j-tuile .45s ease-out backwards; animation-delay: calc(var(--k) * 120ms); }
.j-monde:last-child { border-bottom: 3px solid var(--encre); }
.j-monde-decor { aspect-ratio: 130 / 64; --y: 75%; }
.j-monde-nom { position: absolute; left: 12px; top: 10px; right: 12px; display: grid; gap: 2px; }
.j-monde-nom small { justify-self: start; font-family: var(--titre); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #FFF1A8; background: rgba(46, 36, 51, .82); padding: 2px 6px; border-radius: 4px; }
.j-monde-nom b { justify-self: start; font-family: var(--titre); font-size: 1.2rem; color: #FFFFFF; background: rgba(46, 36, 51, .82); padding: 2px 8px; border-radius: 4px; line-height: 1.25; }
.j-jouable { position: absolute; right: 12px; bottom: 10px; font-family: var(--titre); font-weight: 700; font-size: .85rem; background: var(--jaune); color: #2E2433; border: 3px solid #2E2433; border-radius: 6px; padding: 3px 8px; box-shadow: 0 3px 0 #2E2433; animation: j-halo 1.1s ease-in-out infinite; }
@keyframes j-halo { 50% { box-shadow: 0 3px 0 #2E2433, 0 0 0 5px rgba(245, 158, 27, .45); } }
.j-niveaux { list-style: none; margin: 0; padding: 10px 16px 12px; display: grid; gap: 6px; background: var(--papier-2); position: relative; }
.j-niveaux li { position: relative; display: flex; align-items: center; gap: 10px; font-size: .92rem; line-height: 1.3; }
.j-niveaux li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 32px; height: 10px; border-left: 3px dotted var(--gris); }
.j-niveaux li b { font-family: var(--titre); color: var(--accent-sombre); margin-right: 2px; }
.j-niveaux li.verrou { color: var(--gris); }
.j-niveaux li.actuel { font-weight: 700; }
.j-niveaux li.actuel em { font-style: normal; color: var(--vert-texte); }
.j-niveaux li.projet { font-weight: 700; color: var(--encre); }
.j-carte-total { display: grid; gap: 4px; margin: 14px 0 0; padding: 10px 12px; background: var(--creme); border: 3px solid var(--encre); border-radius: 8px; font-size: .86rem; }
.j-carte-total b { font-size: 1rem; }

/* — E-mail — */
.j-email-tete { display: flex; align-items: center; gap: 10px; }
.j-email-tete h1 { flex: 1; font-size: 1.5rem; }

/* — Leçon du J1 et victoire — */
.j-j1-carte { text-align: center; background: var(--blanc); border: 3px solid var(--encre); border-radius: 10px; padding: 18px 14px; box-shadow: 0 4px 0 var(--encre); margin-top: 8px; }
.j-j1-carte h1 { font-size: 1.5rem; margin: .2em 0; }
.j-j1-carte .j-epreuve-num { margin-top: 6px; }
.j-j1-duree { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.j-j1 .t-pied-fixe .lien, .j-email .t-pied-fixe .lien { margin-top: 4px; }
.j-lecon .lecon-tete { z-index: 6; }
.j-victoire-panneau { text-align: center; background: var(--nuit); color: #FFFFFF; border: 3px solid #2E2433; border-radius: 10px; padding: 16px 12px; box-shadow: 0 4px 0 #2E2433; margin-top: 8px; }
.j-victoire-panneau h1 { color: #FFFFFF; font-size: 1.8rem; margin: .2em 0; }
.j-victoire-fete { position: relative; overflow: hidden; }
.j-victoire-fete > :not(.j-confettis) { position: relative; }
.j-confettis-panneau { opacity: .8; }
.j-victoire-perso { display: block; margin: 0 auto 4px; }
.j-victoire-lecon { margin: 0 0 10px; color: #FFF1A8; }
.j-etoiles { display: flex; justify-content: center; gap: 6px; font-size: 3rem; line-height: 1; }
.j-etoiles span { color: #1E3348; text-shadow: 0 3px 0 #2E2433, 0 0 0 #000; -webkit-text-stroke: 2px #6F8BA6; }
.j-etoiles span.on { -webkit-text-stroke: 0; }
.j-etoiles span.on { color: var(--jaune); animation: j-zoom .35s cubic-bezier(.2, 1.6, .4, 1) backwards; animation-delay: calc(var(--k) * 220ms + 200ms); }
.j-puces { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 8px 0 0; }
.j-puces li { display: inline-flex; align-items: center; gap: 6px; background: #FFFFFF; color: #2E2433; border: 3px solid #2E2433; border-radius: 6px; padding: 4px 10px; font-weight: 700; font-size: .88rem; }
.j-puces li:first-child { background: var(--jaune); }
.j-victoire-mini { display: grid; justify-items: center; gap: 2px; padding: 12px; }
.j-victoire-mini .j-etoiles { font-size: 2.2rem; }
.j-victoire-mini > b { font-family: var(--titre); font-size: 1.35rem; }

/* — Offre — */
.j-offre h1 { font-size: 1.6rem; margin-top: .6em; }
.j-offre .v2-formule { border-width: 3px; border-radius: 8px; box-shadow: 0 4px 0 var(--encre); transition: transform .08s, box-shadow .08s, background .1s; }
.j-offre .v2-formule.choisie { outline: none; transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); background: var(--creme); }
.j-offre .v2-formule-nom { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.j-radio { flex: none; width: 22px; height: 22px; border: 3px solid var(--encre); border-radius: 50%; background: var(--blanc); }
.j-offre .v2-formule.choisie .j-radio { background: radial-gradient(circle, var(--vert) 0 45%, var(--blanc) 50%); }
.j-choisir { text-align: center; color: var(--gris); font-size: .92rem; border: 3px dashed var(--gris); border-radius: 8px; padding: 10px; }

/* — Passage de niveau plein écran — */
.j-monte { position: fixed; inset: 0; z-index: 50; background: var(--nuit); display: grid; place-items: center; overflow: hidden; animation: j-nuit .15s ease-out; }
@keyframes j-nuit { from { opacity: 0; } }
.j-confettis { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fill, 192px); grid-auto-rows: 288px; justify-content: center; pointer-events: none; }
.j-monte-corps { position: relative; display: grid; justify-items: center; gap: 14px; background: none; border: 0; color: #FFFFFF; cursor: pointer; padding: 24px; font: inherit; }
.j-monte-corps:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; }
.j-monte-sur { font-family: var(--titre); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ciel); }
.j-monte-titre { font-family: var(--titre); font-weight: 700; font-size: clamp(2.8rem, 13vw, 5rem); line-height: 1; color: var(--jaune); text-shadow: 0 5px 0 #C23B2B, 0 9px 0 #2E2433; animation: j-zoom-fort .3s cubic-bezier(.2, 1.6, .4, 1), j-secoue .25s .3s; }
@keyframes j-zoom-fort { from { transform: scale(3); opacity: 0; } }
.j-monte .j-badge { animation: j-monte-bas .4s .5s ease-out backwards; }
.j-monte-perso { animation: j-monte-bas .3s .2s ease-out backwards; }

/* — Tunnel resserré (29/09/2026) : duel allégé, mini-boss en une épreuve, révélation, leçon express — */
.j-arene-basse { aspect-ratio: 16 / 5; background-position-y: 60%; }
.j-arene-basse .j-combattant-a { top: auto; bottom: 12%; right: 12%; }
.j-arene-basse .j-combattant-b { bottom: 12%; left: 12%; }
.j-ko-texte { font-family: var(--titre); font-weight: 700; color: #FFFFFF; background: var(--rouge); border: 2px solid #2E2433; border-radius: 4px; padding: 0 6px; font-size: .8rem; justify-self: center; }
.j-duel-leger .j-demande-texte { font-size: 1rem; font-style: normal; font-weight: 600; }
.j-duel-resultat { display: grid; gap: 10px; margin-top: 12px; padding-bottom: 96px; scroll-margin-top: 110px; }
.j-duel-resultat .j-verdict { margin-top: 0; }
.j-reponse-seule { min-height: 0; font-size: .92rem; }
.j-reponse-perdante { margin: 0; font-size: .82rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px dashed var(--gris); padding-left: 8px; }
.j-reponse-perdante span { font-weight: 700; }
.j-boss .j-boss-panneau.vaincu { filter: saturate(.8); }
.j-boss h1 { font-size: 1.45rem; margin: .6em 0 .1em; }
.j-demande-a-reparer { margin: 12px 0; padding: 12px 14px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 8px; box-shadow: 0 4px 0 var(--encre); font-size: 1.02rem; line-height: 1.45; font-weight: 600; }
.j-trou { display: inline-block; min-width: 3em; padding: 0 6px; border-bottom: 3px dashed var(--accent); color: var(--accent-sombre); }
.j-trou.rempli { border-bottom-style: solid; background: var(--creme); animation: j-pop .2s ease-out; }
.j-pieces { display: grid; gap: 10px; margin: 6px 0 12px; }
.j-piece.juste { border-color: var(--vert); background: #E4F5E6; color: #1D3B22; }
.j-piece.fausse { border-color: var(--rouge); }
.j-boss .j-verdict { margin: 0 0 12px; }
.j-lien-clair { display: inline-block; margin-top: 8px; color: #FFF1A8; }
.j-arrivee { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 12px; background: var(--creme); border: 3px solid var(--encre); border-radius: 8px; font-weight: 700; }
.j-arrivee span { display: grid; }
.j-arrivee small { font-family: var(--titre); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-sombre); }
.j-revelation .j-mondes { margin-top: 14px; }
.j-replie { display: block !important; }
.j-replie::after { display: none; }
.j-replie summary { cursor: pointer; font-weight: 700; color: var(--accent-sombre); padding: 4px 0 4px 42px; list-style: none; }
.j-replie summary::-webkit-details-marker { display: none; }
.j-replie summary:focus-visible { outline: 3px solid var(--nuit); outline-offset: 2px; border-radius: 4px; }
.j-niveaux-suite { padding: 6px 0 0; background: none; }
.j-express h1 { font-size: 1.55rem; margin: .2em 0 .4em; }
.j-express-pas { list-style: none; display: flex; gap: 6px; padding: 0; margin: 8px 0 0; }
.j-express-pas li { flex: 1; height: 10px; border: 2px solid var(--encre); border-radius: 3px; background: var(--blanc); }
.j-express-pas li.fait { background: var(--vert); }
.j-express-pas li.actuel { background: var(--jaune); }
.j-express-carte { background: var(--blanc); border: 3px solid var(--encre); border-radius: 10px; padding: 14px; box-shadow: 0 4px 0 var(--encre); animation: j-monte-bas .3s ease-out; margin-bottom: 8px; }
.j-express-carte .t-sous { margin-top: 0; }
.j-express-illu { display: block; margin: 0 auto 8px; }
.j-express-texte { font-size: 1.08rem; line-height: 1.5; margin: 0; }
.j-express-pieces, .j-express-livrables { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.j-express-pieces li, .j-express-livrables li { display: grid; gap: 3px; padding: 10px 12px; border: 3px solid var(--encre); border-radius: 8px; background: var(--papier-2); animation: j-tuile .35s ease-out backwards; animation-delay: calc(var(--k) * 180ms); }
.j-express-pieces b { font-family: var(--titre); color: var(--accent-sombre); }
.j-express-livrables p { margin: 0; font-size: .9rem; line-height: 1.45; }
.j-express { padding-bottom: 110px; }
.j-express .j-parle + .t-pied-fixe { margin-top: 0; }
.j-victoire-offre { display: grid; justify-items: center; gap: 4px; }
.j-victoire-titre { font-family: var(--titre); font-size: 1.4rem; }

@media (min-width: 700px) {
  .j-perso-scene { height: 152px; }
  .j-perso-scene .sb-anim { --e: 3 !important; }
  .j-scene { margin-inline: 0; border-radius: 10px; overflow: hidden; padding-top: 12px; }
  .j-arene, .j-mondes { margin-inline: 0; width: 100%; border: 3px solid var(--encre); border-radius: 10px; overflow: hidden; }
  .j-mondes { gap: 0; }
  .j-monde:first-child { border-top: 0; }
  .j-monde:last-child { border-bottom: 0; }
}
@media (max-width: 360px) {
  .j-reponses { grid-template-columns: 1fr; }
  .j-plaque { min-width: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .j-bande-boucle, .j-cadre .t-page, .j-perso, .j-tuile, .j-tuile.partie, .j-bulle, .j-gain, .j-cases li, .j-lettre, .j-combattant.ko .j-lettre, .j-verdict, .j-combo,
  .j-boss-panneau.touche, .j-victoire-boss, .j-stat-rail i, .j-monde, .j-jouable, .j-etoiles span.on, .j-monte, .j-monte-titre, .j-monte .j-badge, .j-monte-perso,
  .j-cest-parti, .j-pari, .j-tuile-gain.vu, .j-curseur, .j-trou.rempli, .j-express-carte, .j-express-pieces li, .j-express-livrables li { animation: none !important; }
  .j-xp i, .j-rouleau-bande, .j-vie i { transition: none; }
  .j-gain { display: none; }
}
/* Recette V11 (seniors) : chaque terme de jeu dit ce qu'il veut dire au premier emploi, sans casser le décor. */
.j-regle { font-size: .92rem; line-height: 1.4; margin: 2px 0 12px; padding: 8px 12px; border: 2px dashed currentColor; border-radius: 10px; opacity: .92; }

/* — Le rêve de 2026 (A11) : écran « envies », duel « l'IA sait-elle déjà faire ça ? », contexte, outils et coûts — */
.j-pixel { display: inline-block; flex: none; image-rendering: pixelated; }
.j-reves .j-tuile { align-items: center; min-height: 64px; }
.j-tuile-texte > span { display: block; }
.j-tuile-outil { display: block; margin-top: 3px; font-weight: 600; font-size: .84rem; color: var(--gris); line-height: 1.3; }
.j-cout { font-weight: 800; }
.j-cout-gratuit { color: var(--vert-texte); }
.j-cout-inclus, .j-cout-licence { color: var(--nuit-texte); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .j-cout-inclus, :root:not([data-theme="light"]) .j-cout-licence { color: var(--ciel); } }
:root[data-theme="dark"] .j-cout-inclus, :root[data-theme="dark"] .j-cout-licence { color: var(--ciel); }
.j-cout-payant { color: var(--rouge-texte); }
.j-coche-rang { background: var(--jaune); }
.j-coche-rang b { font-family: var(--titre); font-size: 1.1rem; color: #2E2433; line-height: 1; }
.j-alerte { margin: 0 0 10px; padding: 8px 12px; border: 3px solid var(--rouge); border-radius: 8px; background: var(--blanc); font-weight: 700; font-size: .92rem; animation: j-secoue .25s 1; }
.j-compteur-reves { padding: 8px 12px 10px; }
.j-compteur-reves .j-compteur-titre { margin-bottom: 4px; }
.j-compteur-cout { margin: 0; font-size: 1rem; }
.j-compteur-cout b { font-family: var(--texte); font-weight: 800; font-size: 1.9rem; color: var(--jaune); text-shadow: 0 3px 0 #0C0A10; font-variant-numeric: tabular-nums; }
.j-compteur-reves .j-compteur-legende { margin-top: 2px; font-size: .88rem; color: #E7DDF0; }
.j-compteur-temps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; margin: 6px 0 0; padding-top: 6px; border-top: 2px dashed #5E5566; font-size: .88rem; }
.j-compteur-temps b { color: var(--jaune); }
.j-compteur-temps small { flex-basis: 100%; font-size: .72rem; color: #CFC4DA; }
.j-affirmation { margin: 12px 0 0; padding: 14px 16px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 10px; box-shadow: 0 4px 0 var(--encre); }
.j-affirmation p { margin: 0; font-size: 1.12rem; line-height: 1.45; font-weight: 700; }
.j-paris { grid-template-columns: 1fr 1fr; }
.j-pari-bouton { min-height: 76px; align-content: start; }
.j-pari-bouton .j-demande-texte { font-size: 1.02rem; font-weight: 700; font-style: normal; }
.j-demande-etiquette { display: block; font-family: var(--titre); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-sombre); margin-bottom: 4px; font-weight: 700; }
.j-outils { margin: 14px 0 0; padding: 12px 14px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 10px; box-shadow: 0 4px 0 var(--encre); }
.j-outils h2 { margin: 0 0 8px; font-family: var(--titre); font-size: 1.05rem; }
.j-outils ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.j-outils li { display: flex; justify-content: space-between; gap: 10px; font-size: .95rem; border-bottom: 2px dotted var(--papier-2); padding-bottom: 4px; }
.j-outils p { margin: 6px 0 0; font-size: .92rem; }
.j-outils-zero b { color: var(--vert-texte); font-size: 1.05rem; }
.j-outils-bureau { color: var(--gris); }
.j-compteur-second { margin-top: 14px; padding: 10px 14px 12px; }
.j-compteur-second .j-compteur-valeur b { font-size: 1.8rem; display: inline; }
.j-express-outil { margin: 10px 0 0; padding-top: 8px; border-top: 2px dotted var(--papier-2); font-size: .95rem; }
.j-express-pieces li span { font-size: .98rem; line-height: 1.45; }
/* L'atelier de la demande (leçon express, carte 3, 29/09/2026) : la demande floue, trois briques de contexte à poser,
   l'aperçu qui passe de moyen à niveau pro. Chaque brique garde sa couleur, dans la réserve comme dans la demande. */
.j-atelier { display: grid; gap: 12px; }
.j-atelier { gap: 10px; }
.j-atelier-consigne { margin: 0 0 -4px; font-weight: 700; font-size: .95rem; }
.j-atelier-demande { padding: 10px 12px 12px; border: 3px dashed var(--accent); border-radius: 10px; background: var(--blanc); transition: border-color .3s, background .3s; }
.j-atelier-demande.prete { border-style: solid; border-color: var(--vert); box-shadow: 0 4px 0 var(--vert); animation: j-pop .35s ease-out; }
.j-atelier-demande > small, .j-brique-posee small, .j-apercu-tete > span:first-child { display: block; font-family: var(--titre); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-sombre); }
.j-atelier-texte { margin: 4px 0 0; font-size: 1rem; line-height: 1.55; }
.j-atelier-floue { font-weight: 700; }
.j-atelier-propre { display: block; font-weight: 600; font-size: .95rem; }
.j-brique-posee { display: inline; padding: 1px 4px; border-radius: 4px; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; animation: j-brique-entre .6s ease-out; }
.j-brique-0 { background: #FDE7C4; color: #2E2433; }
mark.j-brique-posee.j-brique-0 { background: #FFD9A0; }
mark.j-brique-posee.j-brique-1 { background: #BFE6C9; }
mark.j-brique-posee.j-brique-2 { background: #C9D5FA; }
.j-brique-1 { background: #D6EEDC; color: #2E2433; }
.j-brique-2 { background: #DCE3FA; color: #2E2433; }
@keyframes j-brique-entre { 0% { opacity: 0; background-color: #FFF1A8; } 40% { opacity: 1; background-color: #FFD34D; } }
.j-briques { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.j-brique { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 6px; width: 100%; height: 100%; min-height: 74px; padding: 7px 7px 7px 9px; border: 3px solid var(--encre); border-radius: 10px; box-shadow: 0 4px 0 var(--encre); text-align: left; font: inherit; cursor: pointer; transition: transform .08s; }
.j-brique b { font-family: var(--titre); font-size: .84rem; line-height: 1.2; }
.j-brique em { align-self: flex-end; font-style: normal; font-weight: 800; font-size: .85rem; padding: 2px 6px; border: 2px solid #2E2433; border-radius: 6px; background: var(--jaune); color: #2E2433; }
.j-brique:not(:disabled) { animation: j-halo-brique 1.6s ease-in-out infinite; }
.j-briques li:nth-child(2) .j-brique:not(:disabled) { animation-delay: .3s; }
.j-briques li:nth-child(3) .j-brique:not(:disabled) { animation-delay: .6s; }
@keyframes j-halo-brique { 50% { transform: translateY(-2px); } }
.j-brique:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.j-brique:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.j-brique:disabled { opacity: .45; box-shadow: none; transform: translateY(3px); cursor: default; }
.j-brique:disabled em { background: var(--vert); color: #FFFFFF; }
.j-atelier-fin { display: flex; gap: 12px; align-items: center; padding: 12px; border: 3px solid var(--encre); border-radius: 10px; background: #2E2433; color: #F6EBDD; box-shadow: 0 4px 0 var(--vert); animation: j-monte-bas .35s ease-out; }
.j-atelier-fin p { margin: 0; }
.j-atelier-fin-titre { font-family: var(--titre); font-size: 1.12rem; }
.j-atelier-fin-titre b { color: var(--jaune); white-space: nowrap; }
.j-atelier-fin-sous { font-weight: 700; margin-top: 2px !important; }
.j-atelier-fin-detail { font-size: .86rem; color: #CFC4DA; margin-top: 4px !important; }
.j-atelier-sceau { flex: none; }
.j-apercu { margin: 0; padding: 10px; border: 3px solid var(--encre); border-radius: 10px; background: var(--blanc); box-shadow: 0 4px 0 var(--encre); }
.j-apercu-tete { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.j-atelier-gain { position: absolute; right: 4px; top: -6px; font-family: var(--titre); color: var(--vert-texte); font-size: 1.1rem; text-shadow: 0 2px 0 var(--blanc); opacity: 0; animation: j-gain 1.1s ease-out; pointer-events: none; }
.j-apercu-tete > span:first-child { flex: 1; }
.j-jauge { display: inline-flex; gap: 3px; }
.j-jauge i { width: 16px; height: 10px; border: 2px solid var(--encre); border-radius: 3px; background: var(--papier-2); transition: background .3s; }
.j-jauge i.pleine { background: var(--vert); }
.j-jauge-3 i.pleine { background: var(--jaune); }
.j-apercu-niveau { font-size: .82rem; padding: 2px 7px; border-radius: 6px; background: var(--papier-2); animation: j-pop .3s ease-out; white-space: nowrap; }
.j-apercu-etat-2 .j-apercu-niveau { background: var(--jaune); color: #2E2433; }
.j-apercu-images { position: relative; display: grid; width: 100%; height: 210px; border-radius: 6px; overflow: hidden; background: #2E2433; }
.j-apercu-images > img { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; opacity: 0; transform: scale(1.03); transition: opacity .5s ease, transform .6s ease; }
.j-apercu-images > img.vue { opacity: 1; transform: none; }
.j-apercu-avant { position: absolute; left: 8px; bottom: 8px; display: grid; justify-items: center; padding: 3px; border: 2px solid #2E2433; border-radius: 6px; background: #FFFFFF; box-shadow: 0 2px 0 #2E2433; }
.j-apercu-avant img { width: 52px; height: 52px; display: block; border-radius: 3px; }
.j-apercu-avant small { font-size: .66rem; font-weight: 700; color: #2E2433; }
.j-apercu-legende { margin: 6px 0 0; font-size: .78rem; color: var(--gris); }
.j-apercu-legende-sur { position: absolute; right: 0; bottom: 0; margin: 0; max-width: 70%; padding: 3px 7px; border-top-left-radius: 6px; background: rgba(20, 16, 26, .78); color: #F6EBDD; font-size: .68rem; line-height: 1.3; text-align: right; }
.j-apercu-carte { padding: 10px 12px; border: 2px solid var(--encre); border-radius: 8px; background: var(--papier); animation: j-entre .35s ease-out; }
.j-apercu-carte-titre { margin: 0 0 6px; font-family: var(--titre); font-size: .95rem; }
.j-apercu-carte ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; }
.j-apercu-carte li { font-size: .95rem; line-height: 1.4; animation: j-tuile .35s ease-out backwards; animation-delay: calc(var(--k) * 120ms); }
.j-apercu-etat-0 .j-apercu-carte li { color: var(--gris); font-style: italic; }
.j-barres { display: flex; align-items: flex-end; gap: 6px; height: 84px; margin: 0 0 20px; padding: 0 2px; border-bottom: 2px solid var(--encre); }
.j-barres span { position: relative; flex: 1; background: var(--vert); border: 2px solid var(--encre); border-bottom: 0; border-radius: 3px 3px 0 0; animation: j-remplit-haut .5s ease-out; transform-origin: bottom; }
.j-barres span.basse { background: var(--rouge); }
.j-barres small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; font-size: .64rem; white-space: nowrap; }
@keyframes j-remplit-haut { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) {
  .j-alerte, .j-brique-posee, .j-brique, .j-atelier-gain, .j-atelier-demande.prete, .j-atelier-fin, .j-apercu-niveau, .j-apercu-carte, .j-apercu-carte li, .j-barres span { animation: none !important; }
  .j-apercu-images > img, .j-brique, .j-atelier-demande, .j-jauge i { transition: none; transform: none; }
}

/* Métier « autre » : « Qu'aimeriez-vous faire avec l'IA ? » — suggestions en tuiles, puis un champ libre facultatif. */
.j-envie-libre .j-tuiles { margin-bottom: 14px; }
.j-libre { display: block; margin: 0 0 12px; }
.j-libre-etiquette { display: block; margin-bottom: 6px; font-weight: 800; font-size: .95rem; }
.j-libre textarea { display: block; width: 100%; box-sizing: border-box; min-height: 64px; padding: 10px 12px; font: inherit; font-size: 1rem; line-height: 1.35;
  color: var(--encre); background: var(--blanc); border: 3px solid var(--encre); border-radius: 8px; resize: vertical; }
.j-libre textarea::placeholder { color: var(--gris); }
.j-libre textarea:focus-visible { outline: 3px solid var(--nuit); outline-offset: 2px; }
.j-libre-compte { display: block; margin-top: 4px; text-align: right; font-size: .8rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.j-suggere-note { margin: -4px 0 10px; padding: 6px 10px; border-left: 4px solid var(--jaune); background: var(--creme); font-weight: 700; font-size: .9rem; color: var(--encre); }

/* Offres après paiement 2 et 3 (OffresApres.tsx) et bannière de consentement (regies.tsx). */
.o-page { max-width: 510px; margin: 0 auto; }
.o-entete { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; min-height: 52px; }
.o-heros { position: relative; display: grid; place-items: center; margin: 8px 0; }
.o-heros img { max-width: 60vw; height: auto; }
.o-pastille { position: absolute; right: 12%; bottom: 8px; transform: rotate(10deg); background: var(--rouge); color: var(--sur-couleur); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; border: 3px solid var(--encre); border-radius: 999px; padding: 10px 12px; }
.o-carte-prix { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; width: 100%; background: var(--nuit); color: var(--sur-couleur); border: 3px solid var(--encre); border-radius: 16px; padding: 14px 16px; margin: 12px 0; font: inherit; text-align: left; cursor: pointer; box-shadow: var(--ombre); }
.o-carte-prix span { display: grid; gap: 2px; }
.o-carte-prix em { font-style: normal; font-weight: 700; text-transform: uppercase; background: var(--ciel); color: #1E1A24; border-radius: 6px; padding: 2px 6px; justify-self: start; }
.o-carte-prix strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.5rem; }
.o-carte-prix s { opacity: .8; font-size: .9rem; }
.o-carte-prix small { text-align: right; }
.o-bandeau-prix { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--creme); border: 3px solid var(--encre); border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.o-bandeau-prix s, .o-ligne s { margin-left: 6px; color: var(--gris); font-weight: 400; }
.o-titre { font-size: 1.4rem; line-height: 1.25; }
.o-titre span { color: var(--accent-sombre); }
.o-total { display: grid; gap: 8px; margin: 16px 0; }
.o-ligne { display: flex; justify-content: space-between; font-weight: 700; text-transform: uppercase; }
.o-ligne strong { font-family: var(--texte); font-variant-numeric: tabular-nums; font-size: 1.3rem; }
.o-alerte { margin: 0; background: var(--creme); border-left: 5px solid var(--rouge); padding: 6px 10px; font-size: .9rem; }
.o-livres { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 16px 0; }
.o-livres div { display: grid; gap: 4px; border: 3px solid var(--encre); border-radius: 12px; padding: 12px; background: var(--blanc); min-height: 90px; }
.o-livres small { color: var(--gris); font-size: .75rem; border-bottom: 2px solid var(--papier-2); padding-bottom: 4px; }
.o-passer-bas { display: block; margin: 8px auto 24px; }
.o-pas { margin: 0; font-weight: 700; } .o-pas small { color: var(--gris); margin-right: 6px; }
.o-applique { background: #E3F4E8; color: #1E5A32; border-radius: 8px; padding: 6px 10px; }
.o-attendez { color: var(--rouge-texte); }
.o-roue { width: min(192px, 60vw); }
.o-roue .t-roue-disque.tourne { transition-duration: 3s; }
.o-roue .t-roue-fleche { width: 36px; height: 36px; margin-left: -18px; top: -14px; }

/* Bannière de consentement : les deux boutons ont la même taille et le même style. */
.cookies { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; max-width: 560px; margin: 0 auto; background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); border-radius: 14px; padding: 12px 14px; box-shadow: var(--ombre); font-size: .92rem; }
.cookies p { margin: 0 0 8px; }
.cookies a { color: var(--accent-sombre); }
.cookies-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookies-choix .btn { width: 100%; margin: 0; }

/* Tunnel d'entrée, paywall, après-paiement et pages légales — « Bureau 16 bits », mêmes jetons que styles.css. */

/* — Cadre et en-tête — */
.t-cadre { min-height: 100vh; }
.t-entete { position: sticky; top: 0; z-index: 5; background: var(--papier); padding: 8px 16px 10px; border-bottom: 3px solid var(--encre); }
.t-entete-ligne { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.t-retour { width: 44px; height: 44px; border: 3px solid var(--encre); border-radius: 10px; background: var(--blanc); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.t-retour-vide { width: 44px; }
.t-logo { display: inline-flex; align-items: center; gap: 6px; justify-content: center; font-family: var(--titre); font-weight: 700; font-size: 1.2rem; }
.t-compteur { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--gris); font-size: .95rem; }
.t-compteur strong { color: var(--accent-sombre); }
.t-barre { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; margin-top: 8px; }
.t-barre span { height: 8px; background: var(--papier-2); border: 2px solid var(--encre); }
.t-barre span.plein { background: var(--accent); }
.t-barre-4 { grid-template-columns: repeat(4, 1fr); gap: 6px; }

.t-page { max-width: 520px; margin: 0 auto; padding: 16px 16px 120px; }
.t-centre { text-align: center; }
.t-surtitre { font-family: var(--texte); font-weight: 700; color: var(--accent-sombre); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 0; }
.t-sous { color: var(--gris); margin-top: 0; }
.t-texte { font-size: 1.05rem; }
.t-grand { font-size: 2rem; color: var(--accent-sombre); }
.t-illu { display: block; margin: 12px auto; max-width: 100%; height: auto; }
.t-illu-large { display: block; margin: 8px auto; width: 100%; max-width: 288px; height: auto; }
.t-perso { display: block; margin: 4px auto 0; }
.t-mention { font-size: .8rem; color: var(--gris); }
.t-mention a, .p-pied a, .t-case a { color: var(--accent-sombre); }
.t-avertissement { background: var(--creme); border: 2px dashed var(--bois); border-radius: 10px; padding: 6px 10px; color: var(--encre); }
.t-pied { font-size: .75rem; color: var(--gris); text-align: center; margin-top: 24px; }
.t-lien-btn { text-align: center; text-decoration: none; }
.t-pied-fixe { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--papier) 35%); }
.t-pied-fixe .btn { max-width: 488px; margin: 0 auto; }

/* — Accueil — */
.t-accueil h1 { font-size: 1.9rem; }
.t-profils { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.t-profil { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; box-shadow: var(--ombre); cursor: pointer; font-family: var(--texte); font-weight: 700; font-size: 1.05rem; }
.t-profil img { background: linear-gradient(var(--papier-2) 0 70%, var(--bois) 70%); border-radius: 12px; border: 2px solid var(--encre); }
.t-profil span { background: var(--accent-fond); color: var(--sur-couleur); border-radius: 10px; padding: 6px 10px; width: 100%; }
.t-profil:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }

/* — Questions — */
.t-question h1 { text-align: center; font-size: 1.45rem; }
.t-question .t-sous { text-align: center; }
.t-option { font-weight: 600; transition: transform .08s; }
.t-option.choisie { transform: translateY(2px); box-shadow: inset 0 -3px 0 var(--accent); }
.t-option:focus-visible, .t-profil:focus-visible, .p-carte:focus-visible, .t-coffret:focus-visible { outline: 3px solid var(--nuit); outline-offset: 2px; }

/* — Analyse (A03, A04) — */
.t-anneau { --pct: 0; width: 132px; height: 132px; margin: 8px auto; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--papier-2) 0); border: 3px solid var(--encre); }
.t-anneau span { width: 96px; height: 96px; border-radius: 50%; background: var(--papier); border: 3px solid var(--encre); display: grid; place-items: center; font-family: var(--texte); font-weight: 700; font-size: 1.6rem; font-weight: 700; }
.t-etapes { list-style: none; padding: 0; margin: 12px auto; display: inline-grid; gap: 6px; text-align: left; }
.t-etapes li { display: flex; gap: 8px; color: var(--gris); }
.t-etapes li.fait { color: var(--vert-texte); font-weight: 600; }
.t-avis-defile { background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 12px 14px; margin: 12px 0 4px; text-align: left; animation: apparait .5s ease-out; }
.t-avis-defile blockquote, .t-avis blockquote { margin: 4px 0; }
.t-avis-defile figcaption { color: var(--gris); font-size: .85rem; }
.t-etoiles { color: var(--jaune); letter-spacing: 2px; text-shadow: 0 2px 0 var(--encre); }

/* — E-mail, prénom — */
.t-case { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: .92rem; }
.t-case input { width: 22px; height: 22px; min-height: 22px !important; flex: none; accent-color: var(--accent); margin-top: 2px; }

/* — Résumé et jauge (A12) — */
.t-carte { background: var(--blanc); border: 3px solid var(--encre); border-radius: 16px; padding: 16px; box-shadow: var(--ombre); }
.t-carte h1 { text-align: center; margin-top: 0; }
.t-carte .t-sous { text-align: center; }
.t-jauge { background: var(--papier-2); border: 3px solid var(--encre); border-radius: 14px; padding: 14px; text-align: center; margin: 12px 0; }
.t-jauge-libelle { margin: 0; font-weight: 600; }
.t-jauge-niveau { margin: 0 0 8px; font-family: var(--texte); font-weight: 700; font-size: 2.2rem; font-weight: 700; }
.t-jauge-barre { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 14px; border: 3px solid var(--encre); }
.t-jauge-barre span:nth-child(1) { background: var(--rouge); } .t-jauge-barre span:nth-child(2) { background: var(--jaune); } .t-jauge-barre span:nth-child(3) { background: var(--vert); }
.t-jauge-barre i { position: absolute; top: -8px; width: 10px; height: 24px; margin-left: -5px; background: var(--blanc); border: 3px solid var(--encre); transition: left .7s ease-out; }
.t-jauge-bornes { display: flex; justify-content: space-between; font-size: .8rem; color: var(--gris); margin-top: 6px; }
.t-lignes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.t-lignes li { display: flex; gap: 12px; align-items: center; }
.t-lignes small { display: block; color: var(--gris); }
.t-pastille { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--papier-2); border: 3px solid var(--encre); border-radius: 12px; font-size: 1.3rem; color: var(--accent-sombre); }

/* — Avant / après — */
.t-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; margin-top: 8px; }
.t-colonne { border: 3px solid var(--encre); border-radius: 14px; padding: 10px; display: grid; justify-items: center; align-content: start; gap: 6px; }
.t-colonne.sans { background: var(--fond-faux); } .t-colonne.avec { background: var(--fond-juste); }
.t-colonne ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .9rem; }
.t-colonne li { border-top: 2px dashed var(--encre); padding-top: 6px; }

/* — Argumentaire, témoignages — */
.t-vignette { position: relative; border: 3px solid var(--encre); border-radius: 16px; overflow: hidden; background: var(--nuit); }
.t-vignette img { display: block; width: 100%; height: auto; opacity: .3; }
.t-vignette ul { position: absolute; inset: 0; margin: 0; padding: 16px; list-style: none; display: grid; align-content: center; gap: 10px; color: var(--blanc); font-family: var(--texte); font-weight: 700; font-size: 1.15rem; text-shadow: 0 2px 0 var(--encre), 0 0 8px var(--encre); }
.t-frise-liste { padding-left: 1.4em; display: grid; gap: 8px; }
.t-frise-liste li::marker { color: var(--accent-texte); font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.t-ne-fait-pas { border-left: 4px solid var(--bois); padding-left: 10px; }
.t-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.t-chiffres div { display: grid; }
.t-chiffres strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.8rem; color: var(--accent-texte); }
.t-chiffres span { font-size: .8rem; color: var(--gris); }
.t-avis-liste { display: grid; gap: 12px; margin-top: 12px; }
.t-avis { background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 12px; margin: 10px 0; }
.t-avis header { display: flex; gap: 10px; align-items: center; }
.t-avis header small { display: block; color: var(--gris); }
.t-avis figcaption { color: var(--gris); font-size: .85rem; }

/* — Roue (A09) et coffret (A11) — */
.t-roue { position: relative; width: min(288px, 80vw); margin: 16px auto; aspect-ratio: 1; }
.t-roue-disque { width: 100%; height: 100%; border-radius: 50%; }
.t-roue-disque.tourne { transition: transform 5s cubic-bezier(.17, .67, .12, .99); transform: rotate(1800deg); }
.t-roue-fleche { position: absolute; top: -18px; left: 50%; width: 48px; height: 48px; margin-left: -24px; }
.t-coffrets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.t-coffret { background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 6px; cursor: pointer; }
.t-coffret img { width: 100%; height: auto; }
.t-coffret.choisi { border-color: var(--accent); background: var(--fond-choisi); transform: translateY(-4px) rotate(-3deg); }
.t-voile { position: fixed; inset: 0; z-index: 20; background: rgba(46, 36, 51, .7); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.t-voile-bas { place-items: end center; padding-bottom: 0; }
.t-fenetre { position: relative; width: 100%; max-width: 420px; background: var(--papier); border: 3px solid var(--encre); border-radius: 18px; padding: 20px 16px; box-shadow: 0 6px 0 var(--encre); animation: tombe .35s ease-out; max-height: calc(100vh - 32px); overflow-y: auto; }
.t-voile-bas .t-fenetre { border-radius: 18px 18px 0 0; text-align: center; }
@keyframes tombe { from { transform: translateY(-24px); opacity: 0; } }
.t-gain { text-align: center; overflow: hidden; }
.t-confettis { position: absolute; top: 0; left: 0; width: 100%; height: 45%; object-fit: cover; pointer-events: none; opacity: .35; }
.t-gain > *:not(.t-confettis) { position: relative; }
.t-gain-remise { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 3rem; font-weight: 700; color: var(--accent-texte); margin: 0; text-shadow: 0 3px 0 var(--encre); }

/* — Écrans propres à certains tunnels — */
.t-couverture { display: block; width: 100%; max-width: 360px; height: auto; margin: 4px auto 8px; border: 3px solid var(--encre); border-radius: 16px; }
.t-infos { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-infos li { background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; padding: 8px 10px; display: grid; gap: 2px; text-align: center; }
.t-infos strong { font-family: var(--texte); font-weight: 700; }
.t-infos span { font-size: .82rem; color: var(--gris); }
.t-profils-simples .t-profil { padding: 10px 8px; }
.t-badge { display: inline-block; margin-top: 8px; background: var(--vert-fond); color: var(--sur-couleur); border: 2px solid var(--encre); border-radius: 8px; padding: 2px 10px; font-family: var(--texte); font-weight: 700; font-size: .85rem; letter-spacing: .04em; }
.t-preuve-ligne { display: inline-flex; gap: 8px; align-items: center; justify-content: center; font-weight: 600; }
.t-jauge-lineaire { width: min(260px, 80%); height: 14px; margin: 12px auto 4px; border: 3px solid var(--encre); background: var(--papier-2); }
.t-jauge-lineaire span { display: block; height: 100%; background: var(--accent); transition: width .1s linear; }
.t-compteur-pct { margin: 0; font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
.t-note-bas { margin-top: 24px; }
.t-question-centre .t-option { justify-content: center; text-align: center; }
.t-bonus { display: flex; gap: 8px; align-items: center; background: var(--creme); border: 2px dashed var(--bois); border-radius: 10px; padding: 8px 10px; font-size: .9rem; }
.t-image-seule figure { margin: 0; }
.t-potentiel { background: var(--fond-juste); border: 3px solid var(--encre); border-radius: 14px; padding: 14px; text-align: center; }
.t-encadre { margin: 0; font-weight: 600; color: var(--vert-texte); }
.t-plan-date { font-size: 1.15rem; margin: 4px 0; }
.t-objectif-pastille { display: inline-block; background: var(--papier-2); border: 2px solid var(--encre); border-radius: 10px; padding: 4px 10px; margin: 4px 0 8px; }
.t-courbe { margin: 8px 0 0; }
.t-courbe svg { width: 100%; height: auto; background: linear-gradient(transparent 0 32%, var(--papier-2) 32% 34%, transparent 34% 66%, var(--papier-2) 66% 68%, transparent 68%); border-bottom: 3px solid var(--encre); }
.t-courbe-mois { display: flex; justify-content: space-between; font-size: .8rem; color: var(--gris); padding: 4px 2px 0; }
.t-carte-gratter { position: relative; display: block; width: min(230px, 70vw); aspect-ratio: 1; margin: 16px auto 8px; padding: 0; border: 3px solid var(--encre); border-radius: 16px; overflow: hidden; background: var(--blanc); cursor: pointer; }
.t-ticket-dessous { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; background: var(--fond-juste); }
.t-ticket-dessous strong { font-family: var(--texte); font-weight: 700; font-size: 2.6rem; color: var(--accent-texte); }
.t-ticket-dessous small { font-family: var(--texte); font-weight: 700; font-size: .8rem; }
.t-surface { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: clip-path 1.4s steps(8); clip-path: inset(0 0 0 0); }
.t-carte-gratter.grattee .t-surface { clip-path: inset(0 0 0 100%); }
.t-piece { position: absolute; top: 40%; left: 10%; animation: gratte 1.4s steps(8) forwards; }
@keyframes gratte { to { left: 80%; top: 55%; } }
.t-consigne { color: var(--gris); font-weight: 600; }
.t-bloc { margin: 14px 0; }
.t-bloc h2 { font-size: 1.2rem; margin: 0 0 6px; }
.t-message { background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; padding: 12px; }
.t-message header { display: flex; gap: 10px; align-items: center; }
.t-message header small { display: block; color: var(--gris); }
.t-message blockquote { margin: 8px 0 0; }
.t-details { margin: 8px 0 0; padding-left: 1.2em; font-size: .9rem; color: var(--gris); }
.t-chat { display: grid; gap: 8px; }
.t-bulle { margin: 0; padding: 10px 12px; border: 3px solid var(--encre); border-radius: 14px; max-width: 92%; }
.t-bulle-moi { justify-self: end; background: var(--creme); border-bottom-right-radius: 4px; }
.t-bulle-ia { justify-self: start; background: var(--blanc); border-bottom-left-radius: 4px; animation: apparait .4s ease-out; }
.t-bulle mark { background: var(--papier-2); border-bottom: 3px solid var(--accent); padding: 0 4px; }
.t-bulle mark.rempli { background: var(--fond-choisi); }
.t-commentaire { margin: 0; font-size: .92rem; border-left: 4px solid var(--vert); padding-left: 10px; }
.t-puces-choix { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.t-puces-choix small { width: 100%; color: var(--gris); font-weight: 600; }
.t-puce { border: 3px solid var(--encre); border-radius: 999px; background: var(--blanc); padding: 6px 12px; min-height: 44px; font-weight: 600; cursor: pointer; }
.t-puce.choisie { background: var(--accent-fond); color: var(--sur-couleur); }
.t-option.juste { box-shadow: inset 0 -4px 0 var(--vert); background: var(--fond-juste); }
.t-option.faux { box-shadow: inset 0 -4px 0 var(--rouge); background: var(--fond-faux); }
.t-retour { padding: 8px 10px; border-radius: 10px; border: 2px solid var(--encre); }
.t-retour.juste { background: var(--fond-juste); } .t-retour.faux { background: var(--fond-faux); }
.t-liste-scene { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.t-liste-scene li { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; padding: 8px 10px; }
.t-liste-scene li div { display: grid; }
.t-liste-scene li span { font-size: .88rem; color: var(--gris); }
.t-liste-scene em { font-style: normal; font-family: var(--texte); font-weight: 700; color: var(--accent-sombre); white-space: nowrap; }

/* — Paywall — */
.p-page { max-width: 560px; margin: 0 auto; padding: 0 16px 48px; }
.p-entete { position: sticky; top: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 -16px; padding: 8px 16px; background: var(--papier); border-bottom: 3px solid var(--encre); }
.p-minuteur { display: grid; line-height: 1.1; }
.p-minuteur small { color: var(--gris); font-size: .75rem; }
.p-minuteur strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.6rem; color: var(--accent-sombre); min-width: 82px; }
.p-haut { background: var(--accent-fond); color: var(--sur-couleur); border: 3px solid var(--encre); border-radius: 10px; padding: 8px 12px; font-family: var(--texte); font-weight: 700; min-height: 44px; cursor: pointer; }
.p-bandeau { margin-top: 16px; text-align: center; background: linear-gradient(var(--creme), var(--papier)); border: 3px solid var(--encre); border-radius: 16px; padding: 14px 12px; }
.p-bandeau h1 { font-size: 1.4rem; margin: .3em 0; }
.p-bandeau-sur { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 0; font-weight: 600; }
.p-bandeau-neutre { background: var(--blanc); }
.p-pastille { display: inline-block; background: var(--rouge); color: var(--sur-couleur); border-radius: 6px; padding: 0 6px; font-family: var(--texte); font-weight: 700; font-size: .85rem; }
.p-etiquette { display: inline-block; background: var(--nuit); color: var(--sur-couleur); border-radius: 8px; padding: 2px 10px; font-size: .85rem; }
.p-expiree { color: var(--accent-sombre); font-weight: 600; }
.p-rappel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.p-rappel div { background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; padding: 8px 10px; display: grid; }
.p-rappel small { color: var(--gris); font-size: .8rem; }
.p-rappel strong { font-size: .95rem; }
.p-jauge { text-align: center; margin-top: 12px; }
.p-jauge img { max-width: 100%; height: auto; }
.p-jauge > p { margin: 4px 0; font-size: .95rem; }
.p-preuve { text-align: center; margin-top: 8px; }
.p-offres { margin-top: 16px; }
.p-offres h2 { text-align: center; }
.p-ticket { background: var(--fond-juste); border: 3px dashed var(--vert); border-radius: 14px; padding: 8px 12px; margin-bottom: 12px; }
.p-ticket p { margin: 0 0 6px; font-weight: 600; color: var(--vert-texte); }
.p-ticket > div { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.p-ticket code { background: var(--blanc); border: 2px solid var(--vert); border-radius: 8px; padding: 6px 8px; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.p-ticket-minuteur { display: grid; text-align: center; background: var(--blanc); border: 2px solid var(--vert); border-radius: 8px; padding: 2px 8px; flex: none; }
.p-ticket-minuteur strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--vert-texte); font-size: 1.2rem; }
.p-ticket-minuteur small { font-size: .65rem; color: var(--gris); }
.p-cartes { display: grid; gap: 10px; }
.p-carte { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 14px 12px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 14px; cursor: pointer; }
.p-carte.choisie { border-color: var(--accent); background: var(--fond-choisi); box-shadow: 0 4px 0 var(--accent-sombre); }
.p-reco { position: absolute; top: -12px; left: 12px; background: var(--accent-fond); color: var(--sur-couleur); border: 2px solid var(--encre); border-radius: 8px; padding: 0 8px; font-family: var(--texte); font-weight: 700; font-size: .8rem; }
.p-radio { width: 22px; height: 22px; border: 3px solid var(--encre); border-radius: 50%; background: var(--blanc); }
.p-carte.choisie .p-radio { background: radial-gradient(var(--accent) 0 45%, var(--blanc) 50%); }
.p-nom { display: grid; gap: 2px; }
.p-nom strong { font-family: var(--texte); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; }
.p-nom small { color: var(--gris); font-size: .78rem; }
.p-nom .p-pastille { justify-self: start; }
.p-prix { display: grid; justify-items: end; background: linear-gradient(var(--papier-2), var(--blanc)); border-radius: 10px; padding: 4px 8px; }
.p-prix strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.3rem; }
.p-prix s { color: var(--gris); font-size: .85rem; }
.p-prix small { color: var(--gris); font-size: .72rem; }
.p-frise { list-style: none; padding: 0; margin: 14px 0; border-left: 4px solid var(--accent); display: grid; gap: 8px; }
.p-frise li { padding-left: 12px; font-size: .92rem; }
.p-frise strong { display: block; font-family: var(--texte); font-weight: 700; }
.p-mention { font-size: .82rem; background: var(--blanc); border: 2px solid var(--gris); border-radius: 10px; padding: 8px 10px; margin: 14px 0 0; }
.p-bouton { animation: pulse-bouton 1.6s ease-in-out infinite; }
@keyframes pulse-bouton { 50% { transform: scale(1.02); } }
.p-securite { text-align: center; font-size: .82rem; color: var(--vert-texte); font-weight: 600; }
.p-bloc { margin-top: 24px; }
.p-garantie { display: flex; gap: 12px; align-items: flex-start; background: var(--fond-juste); border: 3px solid var(--vert); border-radius: 14px; padding: 12px; }
.p-garantie h2 { margin-top: 0; }
.p-faq details { background: var(--blanc); border: 3px solid var(--encre); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.p-faq summary { font-weight: 700; cursor: pointer; min-height: 28px; }
.p-pied { margin-top: 24px; text-align: center; font-size: .8rem; color: var(--gris); }
.p-fermer { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 3px solid var(--encre); border-radius: 10px; background: var(--blanc); font-size: 1.3rem; cursor: pointer; }
.p-volet { text-align: center; }
.p-volet img { max-width: 100%; height: auto; }
.p-reserve { background: var(--fond-faux); border-radius: 10px; padding: 4px 8px; text-align: center; margin: 0 40px 8px 0; font-size: .9rem; }
.p-paiement h2 { margin-top: 0; }
.p-recap { margin: 0; display: grid; gap: 6px; }
.p-recap div { display: flex; justify-content: space-between; gap: 12px; }
.p-recap dt { color: var(--gris); } .p-recap dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.p-recap .p-moins dd { color: var(--rouge-texte); }
.p-recap .p-total { border-top: 3px solid var(--encre); padding-top: 6px; font-size: 1.15rem; }
.p-recap .p-total dt { color: var(--encre); font-weight: 700; }
.p-recap .p-tva { font-size: .8rem; }
.p-email { margin-top: 12px; }
.p-caisse { background: var(--creme); border: 2px dashed var(--bois); border-radius: 10px; padding: 8px 10px; font-size: .88rem; margin-top: 12px; }
.p-motif { background: var(--blanc); border-radius: 10px; padding: 8px; display: grid; }
.p-motif small { color: var(--gris); }
.p-relance h2 { margin: .2em 0; }
.p-squelette { height: 90px; margin: 16px 0; border-radius: 14px; background: var(--papier-2); animation: pulse-bouton 1.2s infinite; }

/* — Après paiement — */
.a-etapes { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0; margin: 0 0 12px; font-family: var(--texte); font-weight: 700; font-size: .8rem; text-align: center; }
.a-etapes li { border-bottom: 5px solid var(--papier-2); padding-bottom: 4px; color: var(--gris); }
.a-etapes li.fait { border-color: var(--vert); color: var(--vert-texte); }
.a-etapes li.actuel { border-color: var(--accent); color: var(--encre); }
.a-haut { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 8px; }
.a-passer { margin: 0; }
.a-bandeau { background: var(--creme); border: 3px solid var(--encre); border-radius: 12px; padding: 8px 10px; font-weight: 600; }
.a-puces { list-style: none; padding: 0; display: grid; gap: 6px; }
.a-prix { display: grid; justify-items: center; margin: 12px 0; }
.a-prix strong { font-family: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 2rem; color: var(--accent-sombre); }
.a-prix span { font-size: .85rem; color: var(--gris); text-align: center; }
.a-ok { color: var(--vert-texte); font-weight: 700; }
.a-recap { list-style: none; padding: 0; text-align: left; display: grid; gap: 6px; }
/* Réglage des rappels (après paiement, tunnel v2 resserré) */
.a-choix { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.a-choix legend { font-family: var(--titre); font-weight: 700; margin-bottom: 6px; padding: 0; }
.a-choix-ligne { grid-template-columns: repeat(3, 1fr); }
.a-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 52px; border: 3px solid var(--encre); border-radius: 8px; background: var(--blanc); color: var(--encre); box-shadow: 0 3px 0 var(--encre); cursor: pointer; }
.a-option.choisie { background: var(--creme); transform: translateY(3px); box-shadow: 0 0 0 var(--encre); }
.a-option input { accent-color: var(--vert); width: 20px; height: 20px; margin: 0; flex: none; }
.a-option span { display: grid; gap: 1px; min-width: 0; }
.a-option small { color: var(--gris); font-size: .82rem; }
.a-choix-ligne .a-option { justify-content: center; padding: 8px 6px; }
.a-choix-ligne .a-option b { font-size: .92rem; }
.a-option:focus-within { outline: 3px solid var(--nuit); outline-offset: 2px; }

/* — Pages légales — */
.l-page section { margin-top: 20px; }
.l-brouillon { background: var(--creme); border: 3px dashed var(--bois); border-radius: 12px; padding: 10px 12px; }
.l-completer { background: var(--fond-faux); padding: 0 4px; }
.l-sommaire { font-size: .9rem; }
.l-page code { background: var(--papier-2); padding: 0 4px; border-radius: 4px; }

@media (min-width: 720px) {
  .t-question .options { grid-template-columns: 1fr; }
  .t-page { padding-top: 24px; }
}

/* — Case d'accès immédiat (L221-28 13°), avant chaque bouton de paiement — */
.p-acces { text-align: left; margin: 12px 0; padding: 10px 12px; border: 2px dashed var(--encre); border-radius: 10px; background: var(--papier-2); }
.p-acces .t-mention { margin: 6px 0 0; }
.p-acces-rappel { margin: 6px 0 0; font-size: .85rem; font-weight: 600; color: var(--accent-sombre); }

/* Recette du 27/09 : l'animation de l'analyse passait à droite de la liste ; les chiffres dans un titre en pixel
   (le 5 de Pixelify se lit comme un 8) sont écrits dans la police du texte. */
.t-analyse > img.pixel { display: block; margin: 8px auto; }
.chiffres { font-family: var(--texte); font-weight: 800; }

/* — Tunnel v2 (lot V01) : mini-leçon, niveau, bilan, programme, e-mail, offre sans pression — */
.v2-suggeree { outline: 3px solid var(--accent); outline-offset: 2px; }
.v2-pied { margin-top: 14px; }
.v2-source { font-size: .74rem; color: var(--gris); margin: 6px 0 0; }
.v2-source a { color: var(--gris); }
/* Message propre à la réponse précédente : bandeau en haut de l'écran suivant, il ne demande aucun clic. */
.v2-lien-calcul { margin: 8px 0; }
.v2-calcul { font-size: .82rem; background: var(--blanc); border: 2px solid var(--gris); border-radius: 10px; padding: 10px; overflow-x: auto; }
.v2-calcul table { border-collapse: collapse; width: 100%; }
/* Téléphone : une carte par ligne, la source sous l'hypothèse (la colonne Source sortait de l'écran à 390 px). */
@media (max-width: 560px) {
  .v2-calcul thead { display: none; }
  .v2-calcul tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--papier-2); }
  .v2-calcul td { display: block; padding: 2px 0; border: 0; }
  .v2-calcul td:first-child { font-weight: 700; }
  .v2-calcul td:nth-child(2)::before { content: "Affiché : "; color: var(--gris); }
  .v2-calcul td:nth-child(3)::before { content: "Hypothèse : "; color: var(--gris); }
  .v2-calcul td:nth-child(4)::before { content: "Source : "; color: var(--gris); }
}
.v2-calcul th, .v2-calcul td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--papier-2); }
.v2-calcul a { color: var(--accent-sombre); }
.v2-formules { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.v2-formule { text-align: left; font: inherit; color: var(--encre); background: var(--blanc); border: 2px solid var(--encre); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; box-shadow: var(--ombre); }
.v2-formule.choisie { outline: 3px solid var(--accent); outline-offset: -1px; }
.v2-formule-nom { font-weight: 700; }
.v2-formule-prix { display: flex; flex-direction: column; }
.v2-formule-prix small { color: var(--gris); }
.v2-formule ul { margin: 0; padding-left: 18px; font-size: .88rem; }
.v2-formule-plus { font-size: .88rem; color: var(--encre); }
.v2-comprend { margin: 12px 0 0; }
.v2-comprend h2 { font-size: 1rem; margin: 0 0 4px; }
.v2-comprend ul { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-size: .95rem; }
.v2-garantie { background: var(--papier-2); border-left: 6px solid var(--vert); border-radius: 8px; padding: 10px 12px; font-size: .9rem; }
.v2-payer { display: flex; flex-direction: column; gap: 10px; }
.v2-entreprise { display: grid; gap: 4px; font-weight: 600; margin-top: 12px; }
.v2-entreprise input { font: inherit; font-weight: 400; padding: 12px; min-height: 48px; border: 3px solid var(--encre); border-radius: 10px; background: var(--blanc); color: var(--encre); }
.v2-faq { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.v2-faq details { background: var(--blanc); border: 2px solid var(--gris); border-radius: 10px; padding: 8px 12px; }
.v2-faq summary { font-weight: 700; cursor: pointer; }
.v2-j1 { background: var(--blanc); border: 2px solid var(--encre); border-radius: 12px; padding: 14px; margin: 16px 0; box-shadow: var(--ombre); text-align: left; }
.v2-j1 p { margin: 6px 0 0; color: var(--gris); }
.t-accueil .t-profils:has(.v2-suggeree) { grid-template-columns: 1fr; }
.t-accueil .t-profils:has(.v2-suggeree) .t-profil { grid-template-columns: 64px 1fr; justify-items: start; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; }
.t-accueil .t-profils:has(.v2-suggeree) .t-profil img { width: 64px; height: 64px; }
.v2-j1 p.v2-j1-atelier { color: var(--vert-texte); font-weight: 700; }

/* Généré par scripts/construire-client.mjs : fonds clairs écrits en dur, lisibles en thème sombre. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.btn:disabled,
.reponse-ia,
.certif-programme,
.echange-demo,
.bulle-ia p,
.pastille.bleu,
.pastille.jaune,
.pastille.vert,
.semaine-cases li.fait .rond-jour,
.carte-domaines,
.pastille-duree,
.carte-glisse,
.modele-consigne p,
.modele-consigne mark,
.test-resultats,
.carte-domaine,
.barre-domaine,
.bloc-maitrise,
.serie-bandeau.serie-orange,
.serie-bandeau.serie-bleue,
.serie-bandeau.serie-violette,
.jour.serie,
.jour.gel,
.jour.aujourdhui:not(.serie),
.fond-bleu,
.objectif-carte,
.serie-fin .carte-semaine,
.tf-modele mark,
.tf-modele mark.depart,
.pastille-style.standard,
.pastille-style.dore,
.k-cadre,
.jour-ligne.fait button,
.carte-certificat-defi.obtenu,
.jx-option.choisie,
.etoiles-qui-tombent i,
.lien-brillant,
.envoyer:disabled,
.medaille-rang.r1,
.medaille-rang.r2,
mark.variable,
.rond-action.gris,
.pastille-action.grise,
.verrouillee,
.barres span,
.j-vie-boss,
.j-badge,
.j-puces li,
.j-piece.juste,
.j-brique-0,
mark.j-brique-posee.j-brique-0,
mark.j-brique-posee.j-brique-1,
mark.j-brique-posee.j-brique-2,
.j-brique-1,
.j-brique-2,
0%,
40%,
.j-apercu-avant,
.o-applique) { --encre: #2E2433; --gris: #5E5566; --blanc: #FFFFFF; --papier-2: #F3E3D3; --accent-sombre: #C23B2B; color: #2E2433; } }
:root[data-theme="dark"] :is(.btn:disabled,
.reponse-ia,
.certif-programme,
.echange-demo,
.bulle-ia p,
.pastille.bleu,
.pastille.jaune,
.pastille.vert,
.semaine-cases li.fait .rond-jour,
.carte-domaines,
.pastille-duree,
.carte-glisse,
.modele-consigne p,
.modele-consigne mark,
.test-resultats,
.carte-domaine,
.barre-domaine,
.bloc-maitrise,
.serie-bandeau.serie-orange,
.serie-bandeau.serie-bleue,
.serie-bandeau.serie-violette,
.jour.serie,
.jour.gel,
.jour.aujourdhui:not(.serie),
.fond-bleu,
.objectif-carte,
.serie-fin .carte-semaine,
.tf-modele mark,
.tf-modele mark.depart,
.pastille-style.standard,
.pastille-style.dore,
.k-cadre,
.jour-ligne.fait button,
.carte-certificat-defi.obtenu,
.jx-option.choisie,
.etoiles-qui-tombent i,
.lien-brillant,
.envoyer:disabled,
.medaille-rang.r1,
.medaille-rang.r2,
mark.variable,
.rond-action.gris,
.pastille-action.grise,
.verrouillee,
.barres span,
.j-vie-boss,
.j-badge,
.j-puces li,
.j-piece.juste,
.j-brique-0,
mark.j-brique-posee.j-brique-0,
mark.j-brique-posee.j-brique-1,
mark.j-brique-posee.j-brique-2,
.j-brique-1,
.j-brique-2,
0%,
40%,
.j-apercu-avant,
.o-applique) { --encre: #2E2433; --gris: #5E5566; --blanc: #FFFFFF; --papier-2: #F3E3D3; --accent-sombre: #C23B2B; color: #2E2433; }