/* ==========================================================================
   Kurdi School — la plateforme (app, account, admin). DA « Chemin de montagne » :
   papier chaud, relief 3D façon Duolingo (boutons épais, nœuds flottants),
   couleurs d'unité vives. Mobile d'abord.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
ul,ol{list-style:none;padding:0}

:root{
  --papier:#FBF7EF;--papier-2:#FFFFFF;--papier-3:#F3EDE0;
  /* --encre-3 est le ton SOURD du produit : les notes, les legendes, les
     liens du pied. Il valait #7A809B, soit 3,47:1 sur le lin — sous le
     seuil de 4,5:1 du texte courant, et employe partout. Le banc de rendu
     en comptait 296 occurrences fautives par passage. Ce ton-ci donne
     4,73:1 et reste nettement plus clair que --encre-2 (8,39:1) : la
     hierarchie tient, la lisibilite arrive. */
  --encre:#14183A;--encre-2:#3D4468;--encre-3:#646A87;
  --ligne:rgba(20,24,58,.10);--ligne-2:rgba(20,24,58,.18);
  --soleil:#FFB020;--soleil-d:#E0900A;--soleil-2:#FF8A00;
  /* ------------------------------------------------------------------
     LES FONDS SUR LESQUELS ON ECRIT EN BLANC.

     Mesure du 12/09 : du texte blanc sur --vert donnait 2,28:1, sur --ciel
     2,14:1, sur --rouge 3,76:1, sur --violet 4,23:1, sur --cuivre 2,97:1.
     Il en faut 4,5. Autrement dit le bouton le plus presse du produit — le
     « Continuer » vert — et les six etiquettes de l'ecran de fin, celui de
     la celebration, etaient la chose la moins lisible de l'application.

     On ne touche pas aux teintes vives : elles font les jauges, les
     surlignages et les bordures, ou rien ne s'ecrit. On ajoute la version
     la plus SOMBRE qui garde la teinte, et c'est elle qui porte du blanc.
     `auditer.py` recalcule ces rapports a chaque passage.
     ------------------------------------------------------------------ */
  --vert-fond:#12813A;--vert-fond-d:#0B6B2F;
  --rouge-fond:#D92B2B;--rouge-fond-d:#A81818;
  --violet-fond:#7C4DEE;--violet-fond-d:#5B21B6;
  --ciel-fond:#046FAE;--ciel-fond-d:#034E7B;
  --cuivre-fond:#955C35;--feu-fond:#B84C05;
  --vert:#22C55E;--vert-d:#16A34A;/* Le vert de --vert-d ne fait que 3,30:1 sur du blanc : sous le seuil WCAG de 4,5:1. Ce ton-ci, un cran plus sombre, monte a 5,02:1 sans changer de couleur. A employer pour tout VERT ecrit sur fond clair. */--vert-txt:#15803D;/* Meme raison : ces trois-la sont ECRITS sur du clair dans la barre du haut, ou ils portent une information (serie, XP, coeurs) et non une decoration. Les jetons d'origine restent pour les fonds et les bordures. */--feu-txt:#C55405;/* #835206 et non #A56A07 : l'ancien tenait 4,50:1 pile sur du blanc et tombait a 4,01 sur le creme des pastilles. Celui-ci — deja la couleur de la jauge XP — fait 6,19 sur le papier et 5,89 sur le creme (mesure du 15/09). */--soleil-txt:#835206;--rouge-txt:#EB1515;--vert-c:#DCFCE7;
  --rouge:#EF4444;--rouge-d:#C62828;--rouge-c:#FEE2E2;
  --focus:#0284C7;--ciel:#38BDF8;--ciel-d:#0369A1;--violet:#8B5CF6;--violet-d:#6D28D9;--violet-txt:#6D28D9;
  --ciel-txt:#0369A1;--grenade:#B8324F;--r-m:20px;
  --nuit:#0F1533;--nuit-2:#1B2350;
  --r:16px;--r-l:24px;--r-xl:32px;
  --f-disp:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);--pop:cubic-bezier(.34,1.56,.64,1);
  --barre-h:64px;--nav-bas:68px;
}

html{scroll-behavior:smooth}
body{font-family:var(--f-body);font-size:16px;line-height:1.55;color:var(--encre);background:var(--papier);min-height:100vh}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
h1,h2,h3{font-family:var(--f-disp);line-height:1.15;letter-spacing:-.01em}
.mono{font-variant-numeric:tabular-nums}

/* ---------- Boutons 3D ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border-radius:14px;border:0;font-family:var(--f-disp);font-weight:700;font-size:.98rem;letter-spacing:.01em;cursor:pointer;text-decoration:none;text-transform:uppercase;position:relative;transition:transform .08s,box-shadow .08s,filter .15s;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:disabled{opacity:.55;cursor:default}
.btn-1{background:var(--vert-fond);color:#fff;box-shadow:0 5px 0 var(--vert-fond-d)}
.btn-1:hover:not(:disabled){filter:brightness(1.05)}
.btn-1:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 var(--vert-fond-d)}
/* --ciel-d sur du blanc ne fait que 4,10:1 : sous le seuil du texte
   courant. --ciel-txt, un cran plus sombre, monte a 5,9:1 sans changer
   de couleur. C'est le bouton « Ouvrir le lexique » et la barre du bas. */
.btn-2{background:var(--papier-2);color:var(--ciel-txt);box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 2px var(--ligne-2)}
.btn-2:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--ligne-2),inset 0 0 0 2px var(--ligne-2)}
.btn-3{background:var(--soleil);color:var(--nuit);box-shadow:0 5px 0 var(--soleil-d)}
.btn-3:active:not(:disabled){transform:translateY(5px);box-shadow:none}
.btn-4{background:var(--violet-fond);color:#fff;box-shadow:0 5px 0 var(--violet-fond-d)}
.btn-4:active:not(:disabled){transform:translateY(5px);box-shadow:none}
.btn-rouge{background:var(--rouge-fond);color:#fff;box-shadow:0 5px 0 var(--rouge-fond-d)}
.btn-rouge:active:not(:disabled){transform:translateY(5px);box-shadow:none}
/* Le survol : le vert l'avait seul. Les autres repondent de la meme facon. */
.btn-2:hover:not(:disabled){background:var(--papier-3)}
.btn-3:hover:not(:disabled),.btn-4:hover:not(:disabled),.btn-rouge:hover:not(:disabled){filter:brightness(1.05)}
.btn-sm{min-height:40px;padding:8px 14px;font-size:.85rem;border-radius:12px}
.btn-lg{min-height:58px;font-size:1.05rem;padding:14px 28px}
.btn-bloc{width:100%}
.btn.is-loading::after{content:"";width:16px;height:16px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:roue .7s linear infinite}
@keyframes roue{to{transform:rotate(360deg)}}
.lien{background:none;border:0;padding:0;color:var(--ciel-d);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- Coquille ---------- */
.shell{width:min(100% - 32px,1100px);margin-inline:auto}
.app{display:grid;grid-template-columns:1fr;min-height:100vh}
.barre{position:sticky;top:0;z-index:30;height:var(--barre-h);background:rgba(251,247,239,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ligne)}
.barre-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-disp);font-weight:800;font-size:1.15rem;color:var(--encre);white-space:nowrap;min-height:40px}
.logo-mark{flex:0 0 auto;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--soleil),var(--soleil-2));display:grid;place-items:center;box-shadow:0 3px 0 var(--soleil-d)}
.logo-mark img{width:26px;height:26px}
/* `position:relative` ICI et `static` sur la jauge : le panneau d'information
   se cale sur le groupe entier, pas sur sa jauge. Cale sur la premiere, il
   sortait de l'ecran a gauche de 102 px a 320 et de 54 px a 390 (mesure du
   15/09). */
.jauges{display:flex;align-items:center;gap:6px;position:relative}
.jauge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;min-height:34px;border-radius:12px;background:var(--papier-2);box-shadow:0 2px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);font-family:var(--f-disp);font-weight:800;font-size:.95rem;position:static;cursor:default}
.jauge .ic{font-size:1.1rem;line-height:1}
.jauge svg.ic{width:19px;height:19px}
/* Les trois compteurs portent une INFORMATION, en petit corps et en gras.
   Les jetons d'origine tenaient 4,50:1 — juste au-dessus du seuil, donc a
   un arrondi de le rater. Ceux-ci sont a 5,1 et plus, et gardent la
   teinte : le feu reste orange, l'XP reste ambre, le coeur reste rouge. */
.jauge-feu{color:#A84505}.jauge-xp{color:#835206}.jauge-coeur{color:#C20E0E}
.jauge-coeur.is-vide{color:var(--encre-3)}
.jauge.pop{animation:pop .5s var(--pop)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.jauge-info{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--papier-2);border-radius:14px;padding:12px 14px;box-shadow:0 12px 30px -12px rgba(20,24,58,.35),inset 0 0 0 1.5px var(--ligne);font-weight:600;font-size:.9rem;color:var(--encre-2);z-index:5;text-transform:none;max-width:calc(100vw - 32px)}
.coeurs-ligne{display:flex;gap:3px;margin-bottom:6px;font-size:1.3rem}

.nav-cote{display:none}
.nav-bas{position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--nav-bas);background:var(--papier-2);border-top:1.5px solid var(--ligne);display:flex;justify-content:space-around;align-items:stretch;padding-bottom:env(safe-area-inset-bottom)}
.nav-cote button[data-sortir]{background:none;border:0;cursor:pointer;text-align:left;font:inherit;width:100%}
.nav-bas button[data-menu]{background:none;border:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.nav-bas a,.nav-bas button[data-menu],.nav-cote a,.nav-cote button[data-sortir]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;text-decoration:none;font-family:var(--f-disp);font-weight:700;font-size:.76rem;color:var(--encre-3);text-transform:uppercase;letter-spacing:.04em;border-radius:12px;margin:6px 4px;transition:background .15s,color .15s}
.nav-bas a .ic,.nav-bas button[data-menu] .ic,.nav-cote a .ic{font-size:1.45rem;line-height:1}
/* L'onglet courant : --ciel-d ne fait que 4,10:1 sur du blanc, et c'est le
   libelle qui dit ou l'on est. --ciel-txt en fait 5,9. */
.nav-bas a.is-here,.nav-bas button[data-menu].is-here,.nav-cote a.is-here{color:var(--ciel-txt);background:rgba(56,189,248,.14);box-shadow:inset 0 0 0 2px rgba(56,189,248,.35)}
/* Le bouton de sortie faisait deux lignes et 76 px de haut la ou les cinq
   liens font 48 : il cassait le rythme de la colonne. Meme gabarit qu'eux,
   couche, sans fond — le rouge n'arrive qu'au survol.
   A ECRIRE APRES la regle partagee ci-dessus, qui impose la colonne. */
.nav-cote button[data-sortir]{flex:0 0 auto;flex-direction:row;justify-content:flex-start;
  gap:12px;padding:0 12px;min-height:48px;font-size:.78rem;letter-spacing:.03em;margin:6px 4px;
  border-radius:12px;background:none;box-shadow:none;color:var(--encre-3);white-space:nowrap}
.nav-cote button[data-sortir] .ic{width:22px;height:22px;flex:0 0 auto}
.nav-cote button[data-sortir]:hover{color:var(--rouge-d);background:var(--rouge-c)}
/* Les libelles inactifs etaient a --encre-3, 3,90:1 sur blanc pour du 13 px.
   Sous le seuil de 4,5. --encre-2 monte a 8,83:1 sans rien changer d'autre. */
.nav-bas a,.nav-bas button[data-menu],.nav-cote a{color:var(--encre-2)}
main.contenu{padding:18px 0 calc(var(--nav-bas) + 28px)}
/* Sous 400 px, sept libelles ne tiennent pas, meme a 12 px (367 px pour 360) :
   les icones suffisent, et le texte reste lisible par un lecteur d'ecran.
   Le reste de la barre — sept onglets, 12 px, colonnes qui retrecissent — est
   regle plus bas, avec le lot du 13/09 qui l'avait resserree. */
@media (max-width:399px){
  .nav-bas a,.nav-bas button[data-menu]{margin:6px 1px;text-transform:none;letter-spacing:0}
}
@media (min-width:900px){
  .app{grid-template-columns:230px 1fr}
  .nav-bas{display:none}
  .nav-cote{display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;padding:20px 14px;border-right:1.5px solid var(--ligne);background:var(--papier-2)}
  .nav-cote .logo{margin:4px 8px 22px}
  .nav-cote a{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 14px;font-size:.82rem;margin:0}
  .nav-cote .pousser{flex:1}
  main.contenu{padding:24px 0 60px}
  .barre{background:transparent;backdrop-filter:none;border:0;position:static;height:auto}
  .barre .logo{display:none}
  .barre-in{justify-content:flex-end;padding-top:14px}
}

/* ---------- Écrans ---------- */
.ecran{display:block}
.ecran[hidden]{display:none}
.en-tete{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.en-tete h1{font-size:clamp(1.5rem,4vw,2.2rem)}
.en-tete p{color:var(--encre-2);font-weight:600}
.bulle{position:relative;background:var(--papier-2);border-radius:18px;padding:14px 18px;box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);font-weight:700}
/* La queue ne se dessine que si un aigle la precede. Sur la revision et le
   classement, `.bulle` sert d'en-tete SANS mascotte : la pointe designait
   le vide et se faisait rogner par le bord gauche. Bonus du selecteur
   d'adjacence : le jour ou MASCOTTE_FICHIER repasse a null, la queue
   disparait toute seule au lieu de pointer vers rien. */
.mascotte + .bulle::after{content:"";position:absolute;left:-10px;bottom:22px;border:10px solid transparent;border-right-color:var(--papier-2);border-left:0}
/* --- EMPLACEMENTS DE LA MASCOTTE ---------------------------------------
   Ces regles ne servent a rien tant que M.mascotte() rend la chaine vide
   (membre.js, MASCOTTE_FICHIER = null). Ce n'est pas du code mort : c'est
   la mise en page reservee a l'aigle, elle revient avec lui. */
/* Les rendus arrivent en 1024 et sont servis en 512 : a 96 px on jetait
   les cinq sixiemes de la definition. Le personnage porte le produit, il
   a la place de se voir. */
.mascotte{width:150px;height:auto;flex:0 0 auto;filter:drop-shadow(0 8px 12px rgba(20,24,58,.18))}
/* --- L'AIGLE EST TOUJOURS POSE ---------------------------------------------
   Il est dessine sans pieds. Flottant au milieu d'un bloc, il a l'air ampute.
   La regle de la maison : il s'appuie TOUJOURS sur un bord, et ce bord le
   COUPE de quelques pour cent. L'ombre portee suit la silhouette et se pose
   donc SUR la coupe — ce qui se lit comme un contact avec le sol.
   Meme regle, meme classe que sur la vitrine (site.css). */
/* L'ombre au SOL, et non seulement l'ombre portee : quand aucun bord ne le
   coupe — l'ecran de fin, le classement vide — la coupe seule se lisait comme
   une amputation. Le degrade est pose en FOND de l'image : il ne se voit que
   la ou l'image est transparente, c'est-a-dire autour des pattes. La ou un
   bord coupe vraiment, il tombe hors cadre et ne coute rien. */
/* Anthony : « il est coupe mais on voit la coupure, ca ne fait pas smooth ;
   il ne sort pas de la section, il est pose dessus. » Les deux reproches
   viennent du meme geste : un `clip-path` tranche net, et une ligne droite
   au milieu d'un personnage se lit comme un autocollant.

   Un MASQUE en degrade, pas une coupe. Le bas du corps se dissout sur son
   dernier quart : il n'y a plus de bord a voir, donc plus rien qui dise ou
   l'image s'arrete. Le `filter` s'applique APRES le masque, donc l'ombre
   portee se dissout avec lui — c'est ce qui fait qu'il parait entrer dans
   le fond plutot que reposer dessus.

   Consequence a tenir : un porteur en `overflow:hidden` ne doit plus couper
   l'aigle avant la fin de son fondu, sinon on retrouve un bord franc. */
.mascotte.pose{
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.45) 89%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.45) 89%,transparent 99%);
  filter:drop-shadow(0 8px 7px rgba(20,24,58,.22))}
.mascotte.pose.flotte{animation:none}
.mascotte-sm{width:96px}
.mascotte-lg{width:240px}
.mascotte.flotte{animation:flotte 3.6s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- Objectif du jour ---------- */
.objectif{display:flex;align-items:center;gap:14px;background:var(--papier-2);border-radius:var(--r-l);padding:14px 16px;box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);margin-bottom:22px}
.anneau{--p:0;width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--soleil) calc(var(--p)*1%),#FFEFC7 0);display:grid;place-items:center;flex:0 0 auto;transition:--p .6s}
.anneau i{width:42px;height:42px;border-radius:50%;background:var(--papier-2);display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:.8rem;font-style:normal}
/* Le texte prend la place qui reste et replie ses lignes : a 320 px il passait
   entier SOUS l'anneau, faute de pouvoir retrecir. */
.objectif > #c-objectif-txt{flex:1 1 170px;min-width:0}
.objectif b{font-family:var(--f-disp);display:block}
.objectif small{color:var(--encre-2);font-weight:600}

/* ---------- Le chemin ---------- */
.chemin{position:relative;max-width:520px;margin:0 auto}
.unite-carte{position:relative;border-radius:var(--r-l);padding:18px 20px;color:#fff;margin:26px 0 8px;box-shadow:0 6px 0 rgba(0,0,0,.22);overflow:hidden;transform-style:preserve-3d}
.unite-carte::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 100% 0%,rgba(255,255,255,.28),transparent 60%);pointer-events:none}
.unite-carte .ic{position:absolute;right:16px;top:12px;font-size:2.6rem;opacity:.9;transform:translateZ(30px);filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.unite-carte small{font-family:var(--f-disp);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.unite-carte h2{font-size:1.35rem;margin:2px 0 4px;padding-right:60px}
.unite-carte p{font-weight:600;font-size:.92rem;opacity:.95;padding-right:60px}
.unite-carte .verrou{display:inline-block;margin-top:8px;font-size:.75rem;font-weight:800;padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.25)}
/* 48 px en haut : la bulle COMMENCER monte au-dessus du premier noeud et
   recouvrait le titre de l unite. */
.noeuds{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;padding:48px 0 18px}
.noeuds{--amp:1}
.noeud-l{position:relative;width:100%;display:flex;justify-content:center}
.noeud-dec{display:inline-block;transform:translateX(calc(var(--dx,0px) * var(--amp)));transition:transform .3s}
@media (max-width:430px){.noeuds{--amp:.42}}
@media (min-width:431px) and (max-width:560px){.noeuds{--amp:.7}}
/* ── LE PALIER EST UN CYLINDRE, pas un autocollant avec une ombre ──────────
   Trois pieces : un SOCLE qui porte la perspective et l'ombre au sol, un CORPS
   incline de 22 deg en `preserve-3d`, et une FACE posee quinze pixels au-dessus
   de la TRANCHE. Sous la perspective le disque devient une ellipse et sa
   tranche apparait en croissant : c'est ce qui separe une piece d'un
   autocollant. Deux elements de plus par palier, zero bibliotheque, zero
   canvas — le GPU ne fait que composer des transformations.

   /!\ LE VOLUME N'EST PAS UNE ANIMATION. Il est pose au repos, dans le rendu
       initial, sans JavaScript. Les navigateurs d'Instagram et de Facebook
       gelent les transitions ; ils ne gelent pas les transformations posees.
       Ce qui bouge — l'appui, le survol — n'est que le retour au geste, et son
       absence n'enleve aucune information.
   /!\ LE PALIER DU MOMENT EST PLUS HAUT, il ne clignote pas. Une animation
       `infinite` empeche la page d'atteindre l'etat « rendu termine » (toute
       capture expire dessus) et une interface qui bouge en permanence fatigue.
       Le seul palier qui depasse de la planche est celui qu'on peut jouer. */
/* Les paliers passent de 78 a 104 px : sur un ecran de bureau, une colonne
   de pastilles de 78 px au milieu d'un champ vide faisait maquette, pas
   parcours. */
.noeud-socle{--c:#22C55E;--cd:#16A34A;position:relative;display:block;width:104px;height:104px}
.noeud-socle{perspective:560px;perspective-origin:50% 18%}
/* L'ombre vit sur le SOCLE, pas sur le cylindre : posee sur lui, elle
   tournerait avec, et une ombre qui s'incline n'est plus une ombre. Un degrade
   elliptique, pas un `filter: blur()` : le flou coute une passe de composition
   par palier, et il y en a vingt a l'ecran. */
.noeud-ombre{position:absolute;left:50%;bottom:-10px;width:64px;height:16px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(20,24,58,.30) 0%,rgba(20,24,58,.11) 45%,transparent 72%);transition:width .18s ease,opacity .18s ease;pointer-events:none}
.noeud{position:relative;display:block;width:104px;height:104px;border:0;padding:0;background:none;cursor:pointer;transform-style:preserve-3d;transform:rotateX(22deg);transition:transform .18s cubic-bezier(.2,.8,.3,1);-webkit-tap-highlight-color:transparent}
.noeud:disabled{cursor:not-allowed}
.noeud-tranche{position:absolute;inset:0;border-radius:50%;background:var(--cd);transform:translateZ(0)}
.noeud-face{position:absolute;inset:0;border-radius:50%;background:var(--c);display:grid;place-items:center;font-size:2.5rem;line-height:1;color:#fff;transform:translateZ(15px);transition:transform .16s cubic-bezier(.2,.8,.3,1)}
/* Le reflet en haut a gauche, comme sur toute chose ronde eclairee d'en haut. */
.noeud-face::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.50) 0%,rgba(255,255,255,.14) 34%,transparent 62%);pointer-events:none}
/* L'APPUI : la face s'enfonce dans le corps ET le cylindre se redresse. Deux
   gestes d'un coup — c'est ce que fait un vrai bouton. */
.noeud:not(:disabled):active{transform:rotateX(27deg)}
.noeud:not(:disabled):active .noeud-face{transform:translateZ(4px)}
/* Le survol n'existe qu'a la souris : au doigt, `:hover` reste colle et le
   palier resterait souleve. */
@media (hover:hover) and (pointer:fine){
  .noeud:not(:disabled):hover{transform:rotateX(15deg)}
  .noeud:not(:disabled):hover .noeud-face{transform:translateZ(26px)}
}
.noeud-socle.is-actuel .noeud-face{transform:translateZ(28px)}
.noeud-socle.is-actuel .noeud-ombre{width:70px;opacity:.9}
.noeud-socle.is-fait .noeud-face{filter:saturate(1.06)}
/* Les paliers fermes s'effacent : plus pales, plus petits, presque sans
   ombre. Vingt cylindres gris de la taille du palier a jouer l'ecrasaient ;
   ce qui se joue doit etre la seule chose qui ait du volume. */
.noeud-socle.is-verrou{--c:#E7E2D6;--cd:#CDC7B9}
.noeud-socle.is-verrou .noeud{transform:rotateX(22deg) scale(.84)}
.noeud-socle.is-verrou .noeud-face{color:#ABA597}
.noeud-socle.is-verrou .noeud-face::after{opacity:.4}
.noeud-socle.is-verrou .noeud-ombre{opacity:.35;width:50px}
/* L'histoire est un palet a coins arrondis : meme cylindre, autre decoupe. */
.noeud-socle.is-histoire{--c:#5A4FA0;--cd:#3F3777}
.noeud-socle.is-histoire .noeud-tranche,.noeud-socle.is-histoire .noeud-face{border-radius:24px}
.noeud-socle.is-histoire.is-verrou{--c:#E7E2D6;--cd:#CDC7B9}
.noeud-face .couronne{position:absolute;left:-9px;top:-11px;background:var(--soleil);color:var(--nuit);font-family:var(--f-disp);font-weight:800;font-size:.78rem;min-width:26px;height:26px;padding:0 6px;border-radius:99px;display:grid;place-items:center;box-shadow:0 3px 0 var(--soleil-d);border:2px solid var(--papier)}
.noeud-face .couronne.is-max{background:linear-gradient(135deg,#FFE27A,#FF8A00)}
/* La jauge de couronnes, sur le bord de la face. Elle porte sa PISTE VIDE :
   sans elle, la portion remplie flotte en croissant et se lit comme un
   defaut, pas comme une mesure. */
/* La jauge est GRAVEE SUR la face, pas suspendue autour : posee dehors,
   elle flottait comme un halo detache du cylindre. Et elle porte sa piste
   vide, sinon la portion remplie se lit comme un defaut, pas une mesure. */
.anneau-noeud{position:absolute;inset:5px;border-radius:50%;background:conic-gradient(var(--soleil) calc(var(--p,0)*1%),rgba(255,255,255,.38) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));pointer-events:none}
.noeud-socle.is-histoire .anneau-noeud{border-radius:19px}
.commencer-bulle{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);background:var(--papier-2);color:var(--vert-txt);font-family:var(--f-disp);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:12px;box-shadow:0 3px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);white-space:nowrap;animation:bondir 1.6s ease-in-out 3;pointer-events:none}
.commencer-bulle::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--papier-2);border-bottom:0}
@keyframes bondir{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
/* L'aigle du chemin ne plane plus a cote des paliers : il s'assoit sur la
   ligne de base de la rangee, coupe par elle. */
.mascotte-chemin{position:absolute;bottom:-6px;width:88px;pointer-events:none}
.mascotte-chemin.g{left:calc(50% - 175px)}.mascotte-chemin.d{right:calc(50% - 175px)}
@media (max-width:420px){.mascotte-chemin.g{left:4px}.mascotte-chemin.d{right:4px}.mascotte-chemin{width:70px}}
.chemin-fond{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.5}
.chemin-fond i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,176,32,.16),transparent 70%)}

/* Fiche d'une compétence (popover) */
.fiche{position:fixed;inset:auto 0 0 0;z-index:40;background:var(--papier-2);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px -16px rgba(20,24,58,.5);max-height:82vh;overflow:auto}
.fiche-voile{position:fixed;inset:0;z-index:39;background:rgba(15,21,51,.45)}
.fiche h3{font-size:1.3rem;margin:4px 0 4px}
.fiche .niveau{font-weight:700;color:var(--encre-2)}
.fiche .barre-niv{display:flex;gap:4px;margin:10px 0 16px}
.fiche .barre-niv i{flex:1;height:8px;border-radius:99px;background:var(--papier-3)}
.fiche .barre-niv i.on{background:var(--soleil)}
.fiche .actions{display:grid;gap:10px}
.fiche .astuces{margin-top:14px;font-size:.95rem;color:var(--encre-2);border-top:1.5px solid var(--ligne);padding-top:14px}
.fiche .astuces table{width:100%;border-collapse:collapse;margin:8px 0;font-size:.9rem}
.fiche .astuces td,.fiche .astuces th{padding:5px 6px;border-bottom:1px solid var(--ligne);text-align:left;vertical-align:top}
.fiche .astuces p{margin:6px 0}
.mots-grille{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.mots-grille div{background:var(--papier);border-radius:12px;padding:8px 10px;font-size:.9rem;box-shadow:inset 0 0 0 1.5px var(--ligne)}
.mots-grille b{display:block;font-family:var(--f-disp)}
@media (min-width:700px){.fiche{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(560px,92vw);border-radius:var(--r-xl);max-height:86vh}}

/* ---------- Leçon ---------- */
.lecon{position:fixed;inset:0;z-index:50;background:var(--papier);display:flex;flex-direction:column}
.lecon-haut{display:flex;align-items:center;gap:14px;padding:14px 16px 8px;padding-top:calc(14px + env(safe-area-inset-top))}
.lecon-haut .fermer{background:none;border:0;font-size:1.6rem;color:var(--encre-3);cursor:pointer;padding:6px;line-height:1}
.progres{flex:1;height:16px;border-radius:99px;background:var(--papier-3);overflow:hidden;box-shadow:inset 0 2px 0 rgba(0,0,0,.05)}
.progres i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--vert-d),var(--vert) 60%,#4ADE80);position:relative;transition:width .45s var(--ease)}
.progres i::after{content:"";position:absolute;left:8px;right:8px;top:4px;height:4px;border-radius:99px;background:rgba(255,255,255,.35)}
/* Le bouton qui coupe le signal de reponse. Meme discretion que la croix
   de sortie : il est la quand on le cherche, il ne demande rien sinon. */
.lecon-haut .son{background:none;border:0;font-size:1.15rem;line-height:1;cursor:pointer;
  padding:8px;border-radius:10px;opacity:.7}
.lecon-haut .son:hover{opacity:1;background:var(--ligne-2)}
.lecon-haut .son[aria-pressed="true"]{opacity:.45}
/* Le compteur de coeurs de la lecon : --rouge ne fait que 3,52:1 sur le
   papier, et c'est le chiffre qu'on regarde le plus quand il descend. Le
   meme rouge sombre que les compteurs du haut, 6,24:1. */
.lecon-coeurs{font-family:var(--f-disp);font-weight:800;color:#C20E0E;display:flex;align-items:center;gap:4px;min-width:44px;justify-content:flex-end}
/* Le contenu d'un exercice tient rarement toute la hauteur : il restait
   colle en haut avec 250 px de vide dessous, sur le guide comme sur les
   questions. En colonne flex, `margin:auto` centre l'enfant quand il est
   court ET retombe a zero des qu'il deborde, donc le defilement reste
   normal sur les ecrans charges. */
.lecon-corps{flex:1;overflow:auto;padding:8px 16px 140px;display:flex;flex-direction:column}
.lecon-in{max-width:640px;margin:auto;width:100%;animation:entree .35s var(--ease)}
/* Sur telephone, centrer verticalement posait la question a 150 px sous la
   barre : elle se lit en haut, la ou le pouce n'a pas a la chercher. */
@media (max-width:640px){.lecon-in{margin:8px auto auto}}
@keyframes entree{from{opacity:.6;transform:translateX(24px)}to{opacity:1;transform:none}}
.compteur-ex{display:inline-block;font-family:var(--f-disp);font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2);margin:4px 0 6px;
  background:var(--papier-2);border-radius:99px;padding:5px 10px;box-shadow:inset 0 0 0 1.5px var(--ligne)}
/* La consigne se repete a chaque question ; le mot, non. C'est lui qui doit
   etre gros. L'inverse etait vrai : 25,6 px pour « Que veut dire ce mot ? »
   contre 18,4 px pour le mot kurmanji. */
.consigne{font-family:var(--f-disp);font-weight:800;font-size:clamp(.95rem,2.5vw,1.05rem);
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3);margin:8px 0 16px}
/* L'aigle s'aligne sur le BAS de la bulle, pas sur son haut : il a l'air
   assis a cote d'elle plutot que suspendu au-dessus. */
.prompt{display:flex;align-items:flex-end;gap:12px;margin-bottom:22px}
/* 1,4 et non 1,2 : chaque mot de la bulle est un BOUTON, et il faut de la
   place entre les lignes pour agrandir sa zone de frappe sans que celle de
   la ligne d'au-dessus la recouvre. Un interligne plus large se lit mieux de
   toute facon sur une phrase en gros caracteres. */
.prompt .bulle{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.5rem,4.6vw,2rem);
  line-height:1.4;flex:1}
.prompt .mascotte{width:72px}
.options{display:grid;gap:10px}
.option{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:var(--papier-2);border:0;border-radius:14px;padding:14px 16px;font-size:1.05rem;font-weight:700;cursor:pointer;box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 2px var(--ligne);transition:transform .08s,box-shadow .08s,background .15s;-webkit-tap-highlight-color:transparent}
/* Le numero d'une option se lit au clavier (« appuie sur 2 ») : ce n'est pas
   une decoration, et --encre-3 ne tenait pas le seuil dessus. */
.option .num{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-disp);font-size:.8rem;color:var(--encre-2);box-shadow:inset 0 0 0 1.5px var(--ligne);flex:0 0 auto}
.option:active{transform:translateY(4px);box-shadow:0 0 0 var(--ligne-2),inset 0 0 0 2px var(--ligne)}
.option.is-choisi{background:#E0F2FE;box-shadow:0 4px 0 var(--ciel-d),inset 0 0 0 2px var(--ciel)}
.option.is-choisi .num{color:var(--ciel-txt);box-shadow:inset 0 0 0 1.5px var(--ciel)}
.option.is-juste{background:var(--vert-c);box-shadow:0 4px 0 var(--vert-d),inset 0 0 0 2px var(--vert)}
.option.is-faux{background:var(--rouge-c);box-shadow:0 4px 0 var(--rouge-d),inset 0 0 0 2px var(--rouge)}
.option:disabled{cursor:default}
.options.deux{grid-template-columns:1fr 1fr}
@media (min-width:600px){.options.quatre{grid-template-columns:1fr 1fr}}

.trou-phrase{font-family:var(--f-disp);font-size:1.4rem;font-weight:700;margin:6px 0 22px;line-height:1.6}
.trou-phrase .vide{display:inline-block;min-width:76px;border-bottom:3px solid var(--encre-3);text-align:center;padding:0 8px;color:var(--ciel-d)}
.trou-phrase .vide.is-rempli{border-color:var(--ciel)}
.trou-sens{color:var(--encre-2);font-weight:600;margin-top:-14px;margin-bottom:18px}

.zone{min-height:104px;border-bottom:2px solid var(--ligne-2);border-top:2px solid var(--ligne-2);padding:10px 4px;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;align-items:flex-start;/* Deux rails : la zone dit ou les mots vont se poser, meme vide. */background:linear-gradient(var(--ligne-2),var(--ligne-2)) 0 52px/100% 2px no-repeat}
/* Le texte d'attente se pose la ou la premiere tuile se posera, pas colle
   au rail : meme hauteur qu'une tuile, centre dedans. */
.zone .vide-txt{color:var(--encre-3);font-weight:600;padding:0 6px;display:flex;align-items:center;min-height:40px}
.banque{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tuile{background:var(--papier-2);border:0;border-radius:12px;padding:10px 14px;font-size:1.05rem;font-weight:700;cursor:pointer;box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 2px var(--ligne);transition:transform .08s,box-shadow .08s,opacity .2s;-webkit-tap-highlight-color:transparent}
.tuile:active{transform:translateY(4px);box-shadow:0 0 0 var(--ligne-2),inset 0 0 0 2px var(--ligne)}
.tuile.is-prise{opacity:0;pointer-events:none}
.tuile-fantome{visibility:hidden}
.zone .tuile{animation:popin .2s var(--pop)}
@keyframes popin{from{transform:scale(.7)}to{transform:scale(1)}}

.champ{width:100%;min-height:120px;resize:vertical;border:0;border-radius:14px;padding:14px 16px;font-size:1.1rem;font-weight:600;background:var(--papier-2);box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 2px var(--ligne);outline:0}
.champ:focus{box-shadow:0 4px 0 var(--ciel-d),inset 0 0 0 2px var(--ciel)}
input.champ{min-height:52px;resize:none}

.paires{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.paires .col{display:grid;gap:10px;align-content:start}
.paire{background:var(--papier-2);border:0;border-radius:14px;padding:14px 10px;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 2px var(--ligne);min-height:56px;transition:transform .08s,box-shadow .08s,background .15s,opacity .3s;-webkit-tap-highlight-color:transparent}
.paire:active{transform:translateY(4px);box-shadow:0 0 0 var(--ligne-2),inset 0 0 0 2px var(--ligne)}
.paire.is-choisi{background:#E0F2FE;box-shadow:0 4px 0 var(--ciel-d),inset 0 0 0 2px var(--ciel)}
.paire.is-ok{background:var(--vert-c);box-shadow:0 4px 0 var(--vert-d),inset 0 0 0 2px var(--vert);opacity:.55;pointer-events:none}
.paire.is-ko{animation:secouer .4s;background:var(--rouge-c);box-shadow:0 4px 0 var(--rouge-d),inset 0 0 0 2px var(--rouge)}
@keyframes secouer{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* Un tapis de PHRASES : chaque tuile tient deux a quatre lignes sur un
   telephone. Meme code, memes couleurs, seulement plus haut et plus aere —
   c'est pourquoi elles ne sont que QUATRE et non cinq. */
.paires-longues .paire{min-height:80px;padding:12px 10px;font-size:.95rem;line-height:1.35;text-align:left}

/* ---------- Les cinq exercices de l'ordre et de la production ---------- */
/* Un mot ne remplit pas trois lignes : le champ de « motjuste » est court, et
   l'indice se pose dessous, en gris. Chasse fixe et lettres espacees pour que
   les tirets s'alignent — sinon on ne compte pas les lettres qui manquent. */
.champ-mot{min-height:62px;resize:none;font-family:var(--f-disp);font-size:1.3rem;font-weight:800}
.indice{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:10px 2px 0}
.indice b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.25rem;letter-spacing:.24em;color:var(--encre-2)}
.indice small{font-weight:600;font-size:.85rem;color:var(--encre-2)}

/* Vrai ou faux : la phrase kurmanji garde la bulle (en grand), la traduction
   proposee se pose dessous en carte — c'est ELLE qu'on juge —, et les deux
   boutons prennent toute la largeur : on repond d'un pouce, sans viser. */
.vf-propose{background:var(--papier-2);border-radius:14px;border-left:6px solid var(--ciel);padding:14px 16px;margin:0 0 18px;font-size:1.08rem;font-weight:700;color:var(--encre-2);box-shadow:inset 0 0 0 2px var(--ligne)}
.vf-signe{font-family:var(--f-disp);font-weight:800;font-size:1.2rem;color:var(--encre-3);width:20px;text-align:center;flex:0 0 auto}
.option.is-juste .vf-signe{color:var(--vert-d)}
.option.is-faux .vf-signe{color:var(--rouge-d)}


/* Ranger : la consigne tient en une phrase, pas en un mot. Elle garde la
   bulle et l'aigle, mais pas les 32 px du kurmanji — une consigne qui crie
   est une consigne qu'on relit. */
.prompt .bulle.bulle-note{font-size:clamp(1.02rem,3vw,1.2rem);line-height:1.4;font-weight:700}

.ecoute{background:var(--papier-2);border-radius:var(--r-l);padding:22px;box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 2px var(--ligne);text-align:center}
.ecoute .hp{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;background:var(--papier-3);display:grid;place-items:center;font-size:2.2rem;color:var(--encre-3);position:relative}
.ecoute .hp::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px dashed var(--ligne-2)}
/* 151x31 px au banc : un pixel manquait. Les boutons d'une dictee sont les
   seuls que l'on presse sans regarder, l'oreille occupee ailleurs. */
.ecoute .lent{min-height:36px;padding:7px 14px}
.ecoute .etiquette{display:inline-block;font-family:var(--f-disp);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soleil-txt);background:#FFF1CC;padding:4px 10px;border-radius:99px;margin-bottom:10px}
.ecoute .ku{font-family:var(--f-disp);font-size:1.4rem;font-weight:800;margin:10px 0 4px}
.ecoute .sens{color:var(--encre-2);font-weight:600}
.ecoute p.note{color:var(--encre-2);font-weight:600;font-size:.92rem;margin-top:12px}

.histoire{display:grid;gap:12px}
.replique{display:flex;gap:10px;align-items:flex-end;animation:entree .3s var(--ease)}
.replique .qui{font-family:var(--f-disp);font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);margin-bottom:4px}
.replique .txt{background:var(--papier-2);border-radius:18px 18px 18px 4px;padding:12px 14px;box-shadow:0 3px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);max-width:88%}
.replique.n .txt{background:#FFF7E0}
/* Une regle et un exemple avaient exactement le meme poids : on lisait
   deux fois la meme carte. L'exemple se pose sur le papier chaud et
   prend le liset du soleil. */
.replique .txt.exemple{background:#FFF7E0;box-shadow:0 3px 0 var(--soleil-d),inset 0 0 0 1.5px var(--soleil)}
.replique .ku{font-family:var(--f-disp);font-weight:700;font-size:1.05rem}
.replique .tr{color:var(--encre-2);font-weight:600;font-size:.92rem;margin-top:4px}
.replique .avatar{width:34px;height:34px;border-radius:50%;background:var(--soleil);color:var(--nuit);display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:.85rem;flex:0 0 auto}
.histoire-intro{color:var(--encre-2);font-weight:600;margin-bottom:8px}

.lecon-bas{position:fixed;left:0;right:0;bottom:0;z-index:51;padding:14px 16px calc(16px + env(safe-area-inset-bottom));background:var(--papier);border-top:2px solid var(--ligne)}
.lecon-bas-in{max-width:640px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px}
@media (max-width:560px){
  .lecon-bas-in{flex-direction:column;align-items:stretch;gap:10px}
  .lecon-bas-in .btn{width:100%}
}
.lecon-bas.is-juste{background:var(--vert-c);border-color:var(--vert)}
.lecon-bas.is-faux{background:var(--rouge-c);border-color:var(--rouge)}
.verdict{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.verdict .mascotte{width:58px}
.verdict h3{font-size:1.15rem;color:var(--vert-txt)}
.lecon-bas.is-faux .verdict h3{color:var(--rouge-d)}
.verdict p{font-weight:600;color:var(--encre-2);font-size:.95rem;word-break:break-word}
.verdict p b{color:var(--encre)}
.verdict .expl{margin-top:4px;font-size:.9rem}
.verdict .accents{color:var(--soleil-txt)}

.fin{position:fixed;inset:0;z-index:60;background:var(--papier);overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;text-align:center}
.fin .mascotte{width:170px;animation:sauter .9s var(--pop)}
@keyframes sauter{0%{transform:translateY(40px) scale(.7);opacity:0}60%{transform:translateY(-14px) scale(1.06);opacity:1}100%{transform:none}}
.fin h1{font-size:clamp(1.8rem,6vw,2.6rem);margin:12px 0 22px;color:var(--soleil-txt)}
.fin .tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;width:min(100%,460px);margin-bottom:22px}
.fin .t{border-radius:16px;padding:3px;background:var(--cuivre-fond)}
.fin .t.v{background:var(--vert-fond)}.fin .t.c{background:var(--ciel-fond)}.fin .t.r{background:var(--rouge-fond)}.fin .t.p{background:var(--violet-fond)}
.fin .t small{display:block;font-family:var(--f-disp);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:4px 0 2px}
.fin .t b{display:block;background:var(--papier-2);border-radius:13px;padding:12px 8px;font-family:var(--f-disp);font-size:1.5rem;color:var(--encre)}
.fin .badges-neufs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
/* Les confettis tombent au-dessus du panneau de fin (60), donc ils
   traversaient « Revision terminee ! » et les libelles des tuiles — le mot
   le plus important de l'ecran, illisible au moment ou on le felicite. Le
   panneau etant opaque et plein ecran, les mettre DERRIERE les cacherait
   entierement : c'est le contenu qui passe devant. Les confettis restent
   visibles tout autour, ce qui est l'effet cherche. */
.fin > *{position:relative;z-index:2}

/* ---------- Sans cœur ---------- */
.sheet{position:fixed;inset:0;z-index:70;background:rgba(15,21,51,.5);display:flex;align-items:flex-end;justify-content:center}
.sheet-in{background:var(--papier-2);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));width:100%;max-width:560px;text-align:center;animation:monter .35s var(--ease)}
@keyframes monter{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
.sheet-in h2{font-size:1.5rem;margin:8px 0 6px}
.sheet-in p{color:var(--encre-2);font-weight:600;margin-bottom:18px}
.sheet-in .actions{display:grid;gap:10px}
.sheet-in .mascotte{margin:0 auto;width:120px}
@media (min-width:700px){.sheet{align-items:center}.sheet-in{border-radius:var(--r-xl)}}

/* ---------- Pages : classement, profil, plus ---------- */
.panneau{background:var(--papier-2);border-radius:var(--r-l);padding:18px;box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);margin-bottom:16px}
.panneau h2{font-size:1.2rem;margin-bottom:10px}
/* ---------- Le choix du debut, sur le premier ecran ----------
   Deux chemins, et le premier est celui de la majorite : il porte donc le
   bouton plein. Les deux tiennent cote a cote au-dela de 380 px, l'un sous
   l'autre en dessous — un choix ne doit jamais deborder. */
.debut{text-align:left;margin-bottom:20px}
.debut p{color:var(--encre-2);margin-bottom:14px;font-size:.95rem}
.debut-boutons{display:flex;flex-wrap:wrap;gap:10px}
.debut-boutons .btn{flex:1 1 auto;min-width:150px;text-align:center}
.liste-cl{display:grid;gap:8px}
.mur-prix{margin:6px 0 0;text-align:center;color:var(--encre-2);font-weight:700;font-size:.95rem}
.cl-seul{text-align:center;padding:30px 18px 10px;color:var(--encre-2);font-weight:600;line-height:1.5}
.cl-seul .mascotte{width:110px;margin-bottom:10px}
.ligne-cl{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--papier)}
.ligne-cl.is-moi{background:#E0F2FE;box-shadow:inset 0 0 0 2px var(--ciel)}
.ligne-cl .place{width:30px;font-family:var(--f-disp);font-weight:800;color:var(--encre-3);text-align:center}
.ligne-cl .place.or{color:#D69E00}.ligne-cl .place.argent{color:#8C8C8C}.ligne-cl .place.bronze{color:#B87333}
.ligne-cl .avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;color:#fff;background:var(--violet);flex:0 0 auto}
.ligne-cl .nom{flex:1;font-weight:700}
.ligne-cl .nom small{color:var(--encre-3);font-weight:700;font-size:.78rem;margin-left:6px}
.ligne-cl .xp{font-family:var(--f-disp);font-weight:800;color:var(--soleil-txt);white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:600px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--papier);border-radius:16px;padding:12px 14px;box-shadow:inset 0 0 0 1.5px var(--ligne)}
.stat b{display:block;font-family:var(--f-disp);font-size:1.5rem}
.stat small{color:var(--encre-2);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
/* Sous 520 px, la marque cède la place aux jauges. La règle s'arrêtait à
   400 px pour TROIS jauges ; les gemmes en ont ajouté une quatrième le 13/09,
   et entre 400 et 519 px la barre débordait — mesuré le 15/09 sur 412 px, la
   largeur des Pixel et des Samsung : la page se posait sur 463 px, le
   téléphone arrivait zoomé et, dézoomé, tout penchait à gauche. C'est ce
   qu'Anthony a vu. Le banc n'avait aucune fenêtre entre 390 et 768. */
@media (max-width:519px){
  .barre .logo-text{display:none}
  .jauge{padding:7px 8px;gap:4px;font-size:.88rem}
  .jauge .ic{font-size:1rem}
  .jauge svg.ic{width:17px;height:17px}
}
/* A 320 px, quatre jauges avec des nombres reels (12 / 820 / 140 / 4) font
   262 px : avec la tete de l'aigle et l'ecart, 310 px pour 288 disponibles.
   La marque s'efface, les jauges se serrent d'un cran. */
@media (max-width:359px){
  .barre .logo{display:none}
  .jauges{gap:4px}
  .jauge{padding:6px 7px;gap:3px;font-size:.84rem}
}
.semaine{display:flex;gap:8px;align-items:flex-end;height:120px;padding-top:8px}
.semaine div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.semaine i{width:100%;max-width:38px;border-radius:8px 8px 4px 4px;background:var(--soleil);min-height:4px;box-shadow:0 3px 0 var(--soleil-d)}
.semaine i.vide{background:var(--papier-3);box-shadow:0 3px 0 var(--ligne-2)}
.semaine small{font-family:var(--f-disp);font-weight:800;font-size:.78rem;color:var(--encre-3)}
.badges-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.badge{text-align:center;padding:12px 6px;border-radius:16px;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ligne)}
.badge .ic{width:52px;height:52px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(135deg,#FFE27A,#FF8A00);box-shadow:0 4px 0 var(--soleil-d)}
/* Un badge eteint : gris, l'icone palie, le nom en ton sourd — pas un bloc
   entier a demi transparent, dont le texte devenait illisible. */
.badge.is-off{filter:grayscale(1)}
.badge.is-off .ic{opacity:.45}
.badge.is-off b{color:var(--encre-3)}
.badge b{display:block;font-family:var(--f-disp);font-size:.78rem;line-height:1.25}
.champ-l{display:grid;gap:6px;margin-bottom:12px}
.champ-l label{font-family:var(--f-disp);font-weight:700;font-size:.85rem;color:var(--encre-2)}
.select{width:100%;border:0;border-radius:14px;padding:12px 14px;background:var(--papier);box-shadow:inset 0 0 0 2px var(--ligne);font-weight:700;appearance:none}
.plus-carte{background:linear-gradient(160deg,var(--nuit),#3B2A8C 60%,#6D28D9);color:#fff;border-radius:var(--r-xl);padding:26px 22px;box-shadow:0 8px 0 #2A1A6B;position:relative;overflow:hidden}
.plus-carte::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,176,32,.35),transparent 65%);right:-90px;top:-110px}
.plus-carte h2{font-size:1.7rem;margin-bottom:4px;position:relative}
.plus-carte .prix{font-family:var(--f-disp);font-weight:800;font-size:2.2rem;color:var(--soleil);position:relative}
.plus-carte ul{margin:14px 0 18px;display:grid;gap:8px;position:relative}
.plus-carte li{display:flex;gap:10px;font-weight:700}
.plus-carte li::before{content:"✓";color:var(--soleil);font-weight:800}
.plus-carte p{opacity:.9;font-weight:600;position:relative}
.avis{border-radius:14px;padding:12px 14px;font-weight:700;margin-bottom:14px}
.avis.ok{background:var(--vert-c);color:var(--vert-txt)}
.avis.ko{background:var(--rouge-c);color:var(--rouge-d)}
.avis.info{background:#E0F2FE;color:var(--ciel-d)}

/* ---------- Compte ---------- */
.compte{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.compte-in{width:min(100%,440px)}
.compte-in .logo{justify-content:center;margin-bottom:18px;font-size:1.6rem}
.onglets{display:flex;gap:6px;background:var(--papier-3);border-radius:14px;padding:4px;margin-bottom:18px}
.onglets button{flex:1;border:0;background:none;border-radius:11px;padding:10px;font-family:var(--f-disp);font-weight:700;font-size:.85rem;cursor:pointer;color:var(--encre-2)}
.onglets button.is-on{background:var(--papier-2);color:var(--encre);box-shadow:0 2px 0 var(--ligne-2)}
.form{display:grid;gap:12px}
/* 16 px au moins : en dessous, iOS zoome sur le champ qu'on touche et la
   page reste agrandie apres la connexion (Anthony, 15/09). */
.form input{width:100%;border:0;border-radius:14px;padding:13px 14px;background:var(--papier-2);box-shadow:inset 0 0 0 2px var(--ligne);font-weight:600;font-size:max(1rem,16px)}
.form input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--ciel)}
.form .pot{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-note{font-size:.88rem;color:var(--encre-2);font-weight:600;text-align:center}
/* Les autres formes du mot, sur la carte de decouverte. Plus petites que la
   traduction : c'est un rappel, pas une seconde definition. */
.mot-formes{display:block;margin-top:2px;font-size:.78rem;font-weight:700;color:var(--encre-3);font-style:italic}
.langue-bascule{display:inline-flex;gap:4px;background:var(--papier-3);border-radius:99px;padding:3px}
/* 29 px de haut : sous les 32 px qu'un doigt reclame, sur les trois pages
   ou l'on change de langue avant meme d'avoir un compte. Le corps ne bouge
   pas, la cible grandit. */
.langue-bascule button{border:0;background:none;border-radius:99px;padding:5px 10px;min-height:34px;font-family:var(--f-disp);font-weight:800;font-size:.75rem;cursor:pointer;color:var(--encre-3)}
.langue-bascule button.is-on{background:var(--papier-2);color:var(--encre);box-shadow:0 2px 0 var(--ligne-2)}

/* ---------- Voile ---------- */
.voile{position:fixed;inset:0;z-index:99;background:rgba(251,247,239,.92);display:grid;place-items:center;text-align:center}
.voile-in{display:grid;justify-items:center;gap:8px}
.voile-mascotte{width:110px;animation:flotte 2s ease-in-out infinite}
.voile-titre{font-family:var(--f-disp);font-weight:800;font-size:1.2rem}
.voile-sous{color:var(--encre-2);font-weight:600}
.voile-barre{width:180px;height:8px;border-radius:99px;background:var(--papier-3);overflow:hidden}
.voile-barre i{display:block;height:100%;width:40%;background:var(--soleil);border-radius:99px;animation:glisser 1.1s ease-in-out infinite alternate}
@keyframes glisser{from{transform:translateX(-40%)}to{transform:translateX(220%)}}

/* ---------- Pilotage ---------- */
.tableau{width:100%;border-collapse:collapse;font-size:.9rem}
.tableau th,.tableau td{padding:8px 10px;border-bottom:1px solid var(--ligne);text-align:left;vertical-align:top}
.tableau th{font-family:var(--f-disp);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.tableau-wrap{overflow-x:auto}
.pastille{display:inline-block;padding:3px 8px;border-radius:99px;font-size:.78rem;font-weight:800;font-family:var(--f-disp)}
.pastille.plus{background:#EDE9FE;color:var(--violet-d)}.pastille.offert{background:#FFF1CC;color:var(--soleil-txt)}.pastille.libre{background:var(--papier-3);color:var(--encre-3)}
.tunnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tunnel .m{background:var(--papier);border-radius:14px;padding:12px;box-shadow:inset 0 0 0 1.5px var(--ligne)}
.tunnel .m b{display:block;font-family:var(--f-disp);font-size:1.4rem}
.tunnel .m small{font-weight:700;color:var(--encre-2)}
.tunnel .m i{display:block;height:6px;border-radius:99px;background:var(--papier-3);margin-top:8px;overflow:hidden}
.tunnel .m i::after{content:"";display:block;height:100%;width:var(--w,0%);background:var(--ciel)}

/* --- LE DRAPEAU, A DROITE DE LA MARQUE --------------------------------------
   Pose en CSS et pas dans le HTML, a dessein : le logo se repete sur une
   vingtaine de pages, dont certaines ecrites par une autre session au moment
   ou j'ecris. Une regle unique les sert toutes, celles d'aujourd'hui et celles
   de demain, sans toucher un seul fichier de balisage.

   `height: 1em` : le drapeau fait exactement la hauteur des lettres, quelle
   que soit la taille du logo — barre du site, barre laterale, pilotage. Le
   rapport 90/60 vient du fichier, il n'est jamais ecrase.

   C'est un MARQUEUR DE LANGUE, comme un drapeau dans n'importe quelle
   application de langues. Jamais un etendard. */
/* LE DRAPEAU NE FIGURE PLUS DANS L'APPLICATION.

   Sa propre regle le disait : « C'est un MARQUEUR DE LANGUE, comme un drapeau
   dans n'importe quelle application de langues. Jamais un etendard. » Or dans
   l'application on est connecte, la langue est choisie, et le marqueur ne
   marque plus rien — il ne restait qu'une vignette de vingt pixels ou un
   soleil a vingt-et-un rayons devient une tache, posee au milieu d'une ligne
   de petites capitales.

   Il reste sur le SITE, ou choisir sa langue a un sens : `site.css` garde sa
   regle, intacte. */

/* --- LA TETE DE L'AIGLE REMPLACE LE CARRE ORANGE ---------------------------
   Le carre degrade etait une cale, posee quand la mascotte n'existait pas.
   La tete la remplace : meme emplacement, meme gabarit, et toujours aucune
   modification du balisage — `.logo-mark` est un <span> vide sur les dix-neuf
   pages, l'image passe par le fond.

   `contain` et non `cover` : la tete est plus haute que large (384 x 457), la
   recadrer en carre lui couperait le crane ou le bec. Elle occupe donc la
   hauteur et se centre.

   Ni fond ni ombre portee : la tete porte deja son propre volume, un ombrage
   de plus la salirait. */
.logo-mark{background:url("../img/aigle-tete.webp") center/contain no-repeat;
  box-shadow:none;border-radius:0}

/* Le clavier doit voir ou il est. `:focus-visible` ne se declenche pas au
   clic de souris : l'anneau n'apparait que pour qui navigue au clavier.
   Aucune couleur ne tient 3:1 contre TOUS les fonds du produit (mesure :
   #0284C7 fait 4,10 sur blanc mais 1,39 sur le violet d'unite). L'anneau
   herite donc sa couleur du contexte : bleu sur le papier, blanc sur les
   surfaces sombres, qui n'ont qu'a redeclarer --focus. */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Un navigateur sans :focus-visible garde au moins l'anneau natif : on ne
   met jamais outline:0 sans remplacement. */
.plus-carte{--focus:#FFFFFF}

/* --- LA BARRE DE NAVIGATION -------------------------------------------------
   Les emojis juraient entre eux : trois familles de dessin, trois palettes,
   et un rendu different sur chaque systeme. Des icones dessinees au trait,
   qui prennent la couleur du texte, tiennent ensemble et suivent l'etat actif
   sans qu'on ait rien a colorier. */
/* `svg.ic` et non `.ic` : la classe sert AUSSI aux emojis — icone de carte
   d'unite, jauges de la barre du haut, badges du profil. Une regle globale les
   enfermait dans une boite de 24 px, et l'emoji de l'unite, a 2,6 rem, se
   faisait rogner par l'`overflow:hidden` de la carte. */
/* La flamme, l'etoile, le coeur et la couronne sont PLEINS : evides, ils
   perdent leur silhouette a 20 px. Le remplissage est pose en attribut de
   presentation dans le `<defs>` de app.html, pas ici : une classe CSS
   n'atteint pas l'arbre fantome d'un `<use>`. */
.ic-bouton{display:inline-block;vertical-align:-4px;margin-right:2px}
/* Une icone posee DANS une ligne de texte : elle se couche a cote du mot
   plutot que de le pousser a la ligne. */
.stat svg.ic,.niveau svg.ic,.verrou svg.ic,.expl svg.ic,.rail-c .gros svg.ic,
.jauge-info svg.ic,#c-objectif-txt svg.ic,.btn svg.ic{display:inline-block;
  vertical-align:-.16em;margin-right:.28em}
.stat svg.ic{width:22px;height:22px}
.rail-c .gros svg.ic{width:30px;height:30px;vertical-align:-.14em}
.verrou svg.ic,.niveau svg.ic,.expl svg.ic,#c-objectif-txt svg.ic{width:17px;height:17px}
/* Sur un noeud du chemin, l'icone remplace un emoji de 1,9 rem : elle doit
   en tenir la place. Elle herite la couleur de la face, donc le blanc. */
.noeud-face .ic-noeud{width:38px;height:38px;stroke-width:2.1}
svg.ic{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.nav-bas a svg.ic,.nav-bas button svg.ic,.nav-cote a svg.ic,.nav-cote button svg.ic{font-size:0}

/* Le bouton de sortie gardait la disposition MOBILE dans la barre laterale :
   la regle de bureau ne redressait que les liens, jamais le bouton. D'ou une
   icone minuscule posee au-dessus d'un texte centre, qu'Anthony a vue comme
   « une barre ». C'est un vrai bouton, en bas, borde, sur toute la largeur. */
@media (min-width:900px){
  .nav-cote button[data-sortir]{flex:0 0 auto;flex-direction:row;justify-content:flex-start;
    gap:14px;padding:12px 14px;font-size:.82rem;margin:0;
    border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--ligne);background:var(--papier)}
  .nav-cote button[data-sortir]:hover{color:var(--rouge-txt);box-shadow:inset 0 0 0 1.5px var(--rouge)}
}

/* --- LE FOND ----------------------------------------------------------------
   Sur un ecran de bureau, le champ creme occupait les deux tiers de la page,
   nu. Une texture geometrique en filigrane, a cinq pour cent d'encre : elle se
   devine, elle ne se lit pas.

   HONNETETE SUR CE MOTIF : l'etoile a huit branches et le losange a crochets
   sont des figures de tissage repandues dans TOUTE la region — anatolienne,
   persane, caucasienne, centre-asiatique — et les kilims kurdes en emploient.
   Ce n'est pas pour autant un motif kurde documente, et je ne peux pas le
   certifier comme tel. Il tient donc lieu de texture, pas de citation
   culturelle. Le jour ou une reference sure existe, elle remplace celle-ci.

   Le motif est une donnee en ligne : aucun fichier a charger, aucun ?v= a
   tenir, et rien a detourer. La tuile se raccorde par ses quatre coins.

   L'ecran de lecon garde son fond uni : quand on repond, rien ne doit bouger
   derriere le texte. */
body{background-color:var(--papier);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2314183A' stroke-opacity='.055' stroke-width='1.4'%3E%3Crect x='42' y='42' width='36' height='36'/%3E%3Crect x='42' y='42' width='36' height='36' transform='rotate(45 60 60)'/%3E%3Crect x='-18' y='-18' width='36' height='36'/%3E%3Crect x='-18' y='-18' width='36' height='36' transform='rotate(45 0 0)'/%3E%3Crect x='102' y='-18' width='36' height='36'/%3E%3Crect x='102' y='-18' width='36' height='36' transform='rotate(45 120 0)'/%3E%3Crect x='-18' y='102' width='36' height='36'/%3E%3Crect x='-18' y='102' width='36' height='36' transform='rotate(45 0 120)'/%3E%3Crect x='102' y='102' width='36' height='36'/%3E%3Crect x='102' y='102' width='36' height='36' transform='rotate(45 120 120)'/%3E%3Cpath d='M60 12 72 24 60 36 48 24Z'/%3E%3Cpath d='M60 84 72 96 60 108 48 96Z'/%3E%3Cpath d='M12 60 24 48 36 60 24 72Z'/%3E%3Cpath d='M84 60 96 48 108 60 96 72Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;background-attachment:fixed}
.lecon,.fin{background-image:none}

/* --- LES MOTS NOUVEAUX ------------------------------------------------------
   Le premier ecran d'une competence : on presente avant de demander. La colonne
   se lit d'un coup d'oeil, le kurmanji d'abord, sa traduction dessous. */
/* LA CARTE D'UNE REGLE, en tete de lecon. Elle doit se lire en dix secondes
   et ne pas ressembler a une page de manuel : un titre, trois lignes, un
   exemple encadre qu'on peut entendre. Le fond papier la detache des
   exercices sans l'enfermer dans un bloc gris. */
.regle{background:var(--papier-2);border-radius:var(--r-l);padding:20px;
  box-shadow:0 4px 0 var(--ligne-2)}
.regle-haut{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.regle-haut img,.regle-haut .mascotte{width:56px;height:56px;flex:0 0 auto}
.regle-haut h3{font-size:1.2rem;line-height:1.25}
.regle-texte{font-size:1.02rem;line-height:1.55;color:var(--encre-2)}
.regle-texte b{color:var(--encre)}
.regle-ex{margin-top:16px;padding:14px 16px;border-radius:var(--r-m);
  background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ligne);
  display:grid;gap:2px}
.regle-ex .ku-rep{font-size:1.12rem}
.regle-ex span{font-size:.95rem;color:var(--encre-2)}

/* Qui parle, dans un exercice de dialogue. Petit et gris : c'est une
   didascalie, pas la question. */
.replique-qui{font-family:var(--f-disp);font-weight:800;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);margin:0 0 6px}
/* Les repliques proposees sont des PHRASES : elles ont besoin de la largeur et
   d'un texte aligne a gauche, la ou les options de vocabulaire sont centrees. */
.options-ku .option{text-align:left;line-height:1.4}

/* LE DEFI ECLAIR. Le bloc sur l'ecran de revision, et le chronometre dans la
   barre de la lecon — a la place des coeurs, qui ne sont pas en jeu. */
.eclair-bloc{margin-top:18px;padding:16px 18px;border-radius:var(--r);
  background:var(--papier-2);box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne)}
.eclair-bloc b{display:block;font-family:var(--f-disp);font-size:1.05rem;margin-bottom:4px}
.eclair-bloc p{font-size:.9rem;color:var(--encre-2);margin-bottom:12px;line-height:1.45}
.chrono{font-family:var(--f-disp);font-weight:800;font-size:1rem;color:var(--encre-2);
  white-space:nowrap}
/* Les dix dernieres secondes : la couleur change, la taille non — un chiffre
   qui grossit fait sauter la barre entiere. */
.chrono.urgent{color:#C20E0E}

/* La regle, dans le panneau d'une jauge : deux lignes, calmes, sous les
   chiffres. C'est la que le debutant pose la question, c'est la qu'on
   repond. */
.jauge-regle{margin-top:10px;font-size:.82rem;line-height:1.45;color:var(--encre-2);
  text-align:left;border-top:1px solid var(--ligne);padding-top:8px}

/* « Ces premieres lecons ne coutent pas de coeur. » A la place des coeurs,
   dans la barre de la lecon : petit, calme, et pas rouge — ce n'est pas une
   alerte, c'est un cadeau qu'on annonce. */
.coeur-offert{font-family:var(--f-body);font-weight:700;font-size:.76rem;
  color:var(--encre-3);line-height:1.2;max-width:160px;text-align:right;display:inline-block}

/* Ce qui approche, a la fin d'une lecon. Une seule ligne, sous le bouton :
   elle doit se lire apres la recompense, pas rivaliser avec elle. */
.fin-suite{margin-top:14px;font-family:var(--f-disp);font-weight:800;
  font-size:.98rem;color:var(--grenade)}

.decouverte{display:grid;gap:8px}
.mot-neuf{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  background:var(--papier-2);border-radius:14px;padding:12px 16px;
  box-shadow:0 3px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne)}
.mot-neuf .ku{font-family:var(--f-disp);font-weight:800;font-size:1.12rem}
.mot-neuf span{color:var(--encre-2);font-weight:600;text-align:right}

/* --- L'ATTENTE --------------------------------------------------------------
   C'etait une ligne de texte nue posee sur le fond, et c'est le premier ecran
   qu'on voit a chaque rechargement. L'aigle attend a la place, et il respire.

   L'animation ne porte QUE sur une translation : aucune visibilite n'en depend,
   la regle anti-page-blanche tient. Qui demande moins de mouvement le voit
   immobile. */
.chargement{display:grid;justify-items:center;gap:16px;padding:72px 16px;text-align:center;
  color:var(--encre-2);font-family:var(--f-disp);font-weight:700;font-size:1.05rem}
.chargement img{width:132px;height:auto;filter:drop-shadow(0 10px 14px rgba(20,24,58,.16));
  animation:respire 2.4s ease-in-out infinite}
.chargement p{margin:0}
@keyframes respire{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.chargement img{animation:none}}

/* --- PLUS GRAND, ET PLUS AERE ------------------------------------------------
   Le chemin tenait dans une colonne etroite au milieu d'un champ vide. Les
   paliers sont plus gros, l'ecart vertical plus franc, et le serpentement plus
   ample sur les grands ecrans : c'est ce qui fait qu'un parcours ressemble a un
   parcours et non a une liste de puces. */
.noeud-l{margin:10px 0}
.mascotte-chemin{width:132px;bottom:-8px}
@media (min-width:900px){
  .noeud-l{margin:18px 0}
  .mascotte-chemin{width:170px;bottom:-10px}
  /* L'amplitude du serpentement suit la place disponible. */
  .noeuds{--amp:1.5}
}
@media (max-width:420px){.mascotte-chemin{width:96px;bottom:-6px}}
.cl-seul .mascotte{width:170px}
.chargement img{width:190px}
.prompt .mascotte{width:120px}
@media (max-width:420px){.prompt .mascotte{width:92px}}
/* L'en-tete met la mascotte et sa bulle cote a cote : a 150 px de large,
   l'aigle ne laissait plus la place a la bulle sur un ecran de 320 et la
   poussait de deux pixels hors du cadre. Le banc l'a refuse, et il a eu
   raison — deux pixels de debordement font apparaitre une barre de
   defilement horizontale sur toute la page. */
/* LE PREMIER NOEUD DOIT ETRE A PORTEE DE POUCE.
   Mesure sur un compte neuf, 375x812 : le premier losange jouable commencait
   a 814 px — exactement un ecran plus bas. Quelqu'un qui ouvre l'application
   pour la premiere fois ne voyait donc rien a faire. L'accueil, l'objectif et
   la carte de l'unite se resserrent sur telephone ; aucun d'eux ne disparait,
   ils cessent seulement de prendre la place du jeu. */
@media (max-width:640px){
  .en-tete{gap:12px;margin-bottom:14px}
  .en-tete .bulle{padding:10px 14px}
  .en-tete h1{font-size:1.35rem}
  .en-tete p{font-size:.88rem;line-height:1.35}
  .objectif{padding:10px 14px;margin-bottom:14px;gap:12px}
  .unite-carte{margin:14px 0 6px;padding:14px 16px}
  .unite-carte h2{font-size:1.2rem}
  .unite-carte p{font-size:.86rem}
  .noeuds{padding:26px 0 14px;gap:22px}
}
@media (max-width:520px){.en-tete .mascotte{width:76px}}
@media (max-width:380px){.en-tete .mascotte{width:78px}}

/* --- L'ECRAN PLUS -----------------------------------------------------------
   Ce qu'on achete, c'est de ne plus attendre huit heures. La carte l'enterrait
   dans la deuxieme puce d'une liste : la promesse passe devant le prix, et
   l'aigle la tend, un coeur dans les mains. */
/* La carte est `overflow:hidden` — une premiere version posait l'aigle en
   debordement par le haut et il se faisait decapiter. Il tient donc DANS la
   carte, dans sa moitie droite qui etait vide, pose sur le bord bas comme s'il
   s'y appuyait. Le texte se reserve la gauche. */
.plus-carte{position:relative;min-height:340px;padding-right:280px}
.plus-aigle{position:absolute;right:14px;bottom:0;width:262px;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.38))}
.plus-promesse{margin:2px 0 8px;font-family:var(--f-disp);font-weight:800;font-size:1.45rem;
  color:#FFE7A8;letter-spacing:.01em;position:relative}
@media (max-width:860px){
  /* Trop etroit pour deux colonnes : l'aigle passe au-dessus du texte. */
  .plus-carte{padding-right:22px;padding-top:184px;min-height:0;text-align:center}
  .plus-aigle{right:50%;transform:translateX(50%);bottom:auto;top:8px;width:180px}
  /* L'aigle centre au-dessus d'un texte aligne a gauche donnait une carte de
     travers. Tout se centre, y compris les puces et la ligne de prix, qui
     sont des boites flex et ne suivent pas `text-align` toutes seules. */
  .plus-carte li,.plus-annuel-prix{justify-content:center}
  .plus-carte ul{justify-items:center}
}
@media (max-width:420px){.plus-carte{padding-top:150px}.plus-aigle{width:146px}}
@media (max-width:430px){.plus-carte .btn-lg{font-size:.98rem;letter-spacing:0;padding-left:14px;padding-right:14px}}

/* --- LE LOSANGE DU VOCABULAIRE ----------------------------------------------
   Un noeud d'apprentissage n'est pas un noeud d'exercice, et ca doit se voir
   sans lire : le rond devient losange. C'est le meme cylindre, tourne de
   quarante-cinq degres et aux coins a peine arrondis — la face, elle, se
   redresse pour que l'icone reste lisible. */
.noeud-socle.is-voc .noeud-face,
.noeud-socle.is-voc .noeud-tranche{border-radius:16px;transform:translateZ(15px) rotate(45deg)}
.noeud-socle.is-voc .noeud-face > span{transform:rotate(-45deg)}
/* Le losange verrouille restait dore alors que le rond verrouille est gris :
   deux verrous, deux couleurs, et l'or ressemblait a un noeud disponible. */
/* Les losanges : cuivre a faire, sarcelle fait. Ni or ni vert : sur une
   unite grenade, le chemin alignait rouge, jaune et vert. */
.noeud-socle.is-voc:not(.is-verrou) .noeud-face{background:#C8875A}
.noeud-socle.is-voc.is-fait .noeud-face{background:#2E7D8C}
.noeud-socle.is-voc .noeud-ombre{border-radius:14px;transform:rotate(45deg) scale(.82)}

/* --- LA PREMIERE LETTRE -----------------------------------------------------
   Le mot amputé en grand, son sens dessous, quatre lettres a choisir. */
.lettre-mot{display:flex;align-items:baseline;justify-content:center;gap:2px;
  font-family:var(--f-disp);font-weight:800;font-size:2.6rem;margin:8px 0 4px}
.lettre-vide{display:inline-grid;place-items:center;min-width:1.1em;border-bottom:4px solid var(--ciel);
  color:var(--encre-3)}
.lettre-vide.is-rempli{color:var(--encre)}
.lettre-sens{text-align:center;color:var(--encre-2);font-weight:600;margin:0 0 18px}
.options.lettres{grid-template-columns:repeat(4,1fr);gap:10px}
.options.lettres .option{justify-content:center;font-family:var(--f-disp);font-weight:800;font-size:1.6rem;
  padding:16px 0}
@media (max-width:420px){.lettre-mot{font-size:2.1rem}.options.lettres .option{font-size:1.35rem}}

/* --- LA COLONNE DE LA CARTE ------------------------------------------------
   Anthony : « la plateforme elle est vide, elle n'a que les exercices ». Sur
   un grand ecran, le chemin tenait une colonne centrale et laissait deux
   tiers de papier nu. Cette colonne porte ce qu'on veut savoir sans quitter
   la carte : la serie, les mots appris, la prochaine couronne.
   Sous 1080 px elle passe SOUS le chemin — jamais devant : sur telephone,
   ce qu'on vient chercher, c'est le bouton « Commencer ». */
.carte-grille{display:grid;gap:22px}
.rail-cote{display:grid;gap:14px;align-content:start}
@media (min-width:1080px){
  /* `align-items:start` n'est PAS decoratif : sans lui, l'element de grille
     s'etire sur toute la hauteur de la rangee, et un `sticky` qui remplit
     deja son conteneur n'a aucun espace ou glisser — il ne colle jamais.
     C'est pour ca que la colonne descendait avec le chemin. */
  .carte-grille{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
  .rail-cote{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto;
    scrollbar-width:none}
  .rail-cote::-webkit-scrollbar{display:none}
}
.rail-c{padding:16px 18px}
.rail-c h3{font-family:var(--f-disp);font-weight:800;font-size:.95rem;margin:0 0 10px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--encre-3)}
.rail-c .gros{font-family:var(--f-disp);font-weight:800;font-size:2.1rem;line-height:1;color:var(--encre)}
.rail-c .gros small{font-size:1rem;color:var(--encre-3);margin-left:4px}
.rail-c p{font-weight:600;color:var(--encre-2);font-size:.92rem;margin-top:6px}
.rail-c .btn{margin-top:12px}
.rail-semaine{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.rail-semaine i{display:grid;place-items:center;height:32px;border-radius:10px;background:var(--papier-3);
  font-style:normal;font-size:.75rem;font-weight:800;color:var(--encre-2);text-transform:uppercase}
/* .75rem et non .7 : a 11,2 px le banc refuse, et il a raison — deux lettres
   de jour, c'est deja peu de matiere pour se reperer. */
.rail-semaine i.on{background:var(--soleil);color:#3B2A00}
.rail-barre{height:10px;border-radius:99px;background:var(--papier-3);overflow:hidden;margin-top:12px}
.rail-barre i{display:block;height:100%;background:var(--vert);border-radius:99px;transition:width .4s}
/* Le lexique : des sections par theme, un titre collant pour savoir ou l'on
   est quand on fait defiler la liste. */
.lexique{margin-top:12px;max-height:340px;overflow:auto}
.lexique h4{position:sticky;top:0;background:var(--papier-2);margin:10px 0 6px;padding:4px 0;
  font-family:var(--f-disp);font-weight:800;font-size:.82rem;color:var(--encre-2);z-index:1}
.lexique h4:first-child{margin-top:0}
.lexique .mots-grille{margin:0}
.rail-c .mots-grille{margin-top:12px}

/* --- LES NUAGES ------------------------------------------------------------
   Le chemin s'arrete une unite apres celle qu'on joue, et les nuages ferment
   la vue. Trois plans du meme dessin, chacun repete deux fois cote a cote : la
   derive se boucle sans saut parce que la copie arrive exactement la ou
   l'original partait.

   DEUX pieges deja payes :
   - les trois plans etaient creme sur creme, et la bande rendait un aplat. Un
     nuage se voit parce qu'il est PLUS CLAIR que ce qu'il couvre — ici du blanc
     et du lilas sur le papier beige, jamais du papier sur du papier.
   - la bande avait une hauteur libre et le SVG etait etire 2,1 fois en hauteur
     par `preserveAspectRatio="none"`. Les lobes ronds devenaient des pics : on
     lisait des montagnes. D'ou `aspect-ratio` — le dessin est fait sur 200 x 143
     et la bande garde ce rapport a toutes les largeurs. **Ne pas remettre une
     hauteur fixe ici sans redessiner les silhouettes.**

   Les trois plans font la MEME hauteur : leur etagement vient du dessin, pas
   d'un pourcentage — un plan plus court aurait ete un plan ecrase. */
/* --- L'ENVELOPPE : ni debut ni fin visibles --------------------------------
   La bande faisait 433 px au milieu d'une colonne de 1003 : du creme de chaque
   cote, et un bord BAS net en plein milieu de la page. On voyait donc trois
   aretes sur quatre.

   1. Elle deborde la colonne du chemin -- `padding` compense la `margin` pour
      que rien du contenu ne bouge, seule la BOITE s'elargit.
   2. Un masque efface les deux extremites : le blanc s'evanouit dans le creme
      plutot que de s'arreter sur une arete.
   3. `::after` poursuit le blanc vers le BAS sur toute la hauteur qui reste :
      les nuages sortent de l'ecran, on ne voit plus ou ils s'arretent.

   /!\ PAS de `overflow-x:clip` sur `#chemin` pour borner l'elargissement :
       `overflow-clip-margin` n'est pas honore par Edge, le clip coupait donc
       pile a la boite et annulait tout l'elargissement. L'elargissement est
       donc borne par la VALEUR elle-meme, mesuree pour tenir dans la colonne
       a chaque largeur -- et reduite sous 760 px, ou la colonne occupe deja
       tout. */
/* PAS de `padding` qui compense la `margin` : le contenu doit OCCUPER la
   boite elargie. Avec le padding, le dessin restait a sa largeur d'origine
   au centre, et le fondu se jouait sur le vide autour -- mesure : a l'endroit
   ou le blanc commence, l'alpha valait deja 0,89. Le bord restait net. */
.nuages-zone{position:relative;margin-inline:-28%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
/* Sur telephone la colonne occupe deja toute la largeur : l'elargir
   ferait deborder la page horizontalement. On se contente d'un debord
   leger, le fondu suffit a effacer l'arete. */
/* Sur telephone la bande est deja presque aussi large que l'ecran : un
   fondu de 22 % mangeait les deux bouts du texte (« NCORE 10 UNITES… »).
   On le raccourcit -- il n'a que quelques pixels de creme a couvrir. */
/* JUSQU'A 1079 px, ET PAS 760. Le debord de -28 % suppose une colonne
   ETROITE au milieu d'une page large : c'est vrai en deux colonnes, faux
   partout ailleurs. Entre 760 et 1079 px la colonne occupe deja toute la
   largeur, et le debord sortait la page de l'ecran — mesure a 768 px :
   14 px de defilement horizontal sur l'accueil connecte ET sur le compte.
   Le seuil suit donc celui de la mise en page (voir `min-width:1080px`). */
@media (max-width:1079px){.nuages-zone{margin-inline:-4%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}}
/* Le socle : le blanc du premier plan poursuit vers le bas, si loin qu'on ne
   voit plus ou les nuages s'arretent -- ils sortent de l'ecran.
   /!\ EN FLUX, pas en `position:absolute`. Absolu et pose hors de la boite,
       il etait entierement efface par le masque, tout en allongeant quand
       meme la page de 70vh de vide. Mesure : body 3565, document 4057. */
/* La bande FERME l'ecran a elle seule : pas d'aplat blanc en dessous. Sa
   marge basse negative avale le `padding-bottom:60px` de `.contenu` pour
   qu'aucun filet de creme ne reapparaisse sous les nuages. Bornee a la mise
   en page deux colonnes : en dessous de 1080 px le rail se range SOUS le
   chemin, et la marge mordrait sur lui. */
.nuages{position:relative;aspect-ratio:200/143;margin:-30px 0 8px;
  overflow:hidden;isolation:isolate}
@media (min-width:1080px){.nuages-zone{margin-bottom:-60px}}
/* Sous 1080 px les nuages ne ferment plus la page : le rail se range en
   dessous. Le blanc du premier plan rencontre alors le creme sur une ligne
   droite. On le fond sur les derniers pixels.
   z-index 1 : au-dessus des plans, SOUS le mot -- pose a 2, il effacerait
   le bas des lettres, qui vivent a 9 % du bord. */
@media (max-width:1079px){
  .nuages::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58px;z-index:1;
    background:linear-gradient(180deg,transparent,var(--papier));pointer-events:none}
}
/* `max-width:none` n'est PAS decoratif : la ligne 12 pose `svg{max-width:100%}`
   et ramenait ces 200 % a 100 %. L'echelle horizontale tombait alors a la
   moitie de la verticale — mesure : 1,08 contre 2,17 — et chaque lobe rond
   devenait un pic. C'est le meme defaut que j'ai cru corriger deux fois en
   redessinant les silhouettes : ce n'etait pas le dessin, c'etait l'echelle. */
.nuage-plan{position:absolute;left:0;bottom:0;width:200%;max-width:none;
  height:100%;display:block}
.nuage-plan path{fill:currentColor}
/* Le lointain derive le plus LENTEMENT — c'est la regle de toute parallaxe, et
   c'est elle qui donne la distance, plus surement que la couleur. */
.nuage-plan.n1{color:#D9D2EB;opacity:.85;animation:deriver 64s linear infinite}
.nuage-plan.n2{color:#EFE9F7;animation:deriver 38s linear infinite}
.nuage-plan.n3{color:#FFFFFF;animation:deriver 25s linear infinite;
  filter:drop-shadow(0 -5px 12px rgba(20,24,58,.06))}
@keyframes deriver{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Le mot se pose sur le blanc du premier plan, assez bas pour etre lisible et
   assez haut pour ne pas toucher le bord de la bande. */
.nuages-mot{position:absolute;left:0;right:0;bottom:9%;text-align:center;z-index:2;
  font-family:var(--f-disp);font-weight:800;font-size:clamp(.8rem,2.3vw,.92rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3);margin:0}
@media (prefers-reduced-motion:reduce){.nuage-plan{animation:none}}

/* --- LES MOTS QUI PARLENT ---------------------------------------------------
   Chaque mot kurmanji ecrit a l'ecran est un bouton : on le touche, on
   l'entend. Le dessin doit donc dire « ca se clique » sans transformer une
   phrase en rang de boutons — d'ou un mot qui reste un mot, souligne d'un
   pointille discret, et qui ne s'allume qu'au contact.

   Rien ici ne depend d'une animation pour EXISTER : `dit` ajoute une couleur
   et une ombre, jamais une opacite ni une transformation qui laisserait un mot
   invisible si la transition ne partait pas.
--------------------------------------------------------------------------- */
/* UN MOT SE TOUCHE AVEC UN DOIGT, PAS AVEC UNE SOURIS.
   Mesure au banc : « çi » faisait 16x26 px, « na » 20x26 — trois fois moins
   que la cible de 44 px recommandee, et sous les 32 px que le banc exige.
   On ne peut pas grossir le texte sans casser la phrase ; on agrandit donc
   la ZONE, par un pseudo-element qui deborde de 4 px en haut et en bas et de
   3 px sur les cotes. Rien ne bouge a l'ecran, et le doigt trouve. */
.ku-m{font:inherit;color:inherit;background:none;border:0;padding:0 .04em;margin:0;
  border-bottom:2px dotted var(--ligne-2);border-radius:4px;cursor:pointer;
  position:relative;-webkit-tap-highlight-color:transparent}
/* SEULEMENT EN HAUTEUR. Deborder aussi de trois pixels sur les cotes
   faisait GRANDIR LA PAGE : un mot cliquable pose au bord de sa colonne
   poussait son pseudo-element au-dela, et le banc mesurait 4 a 5 px de
   debordement horizontal sur deux ecrans. La hauteur est ce qui compte
   pour un doigt qui vise une ligne ; la largeur du mot, c'est le mot. */
.ku-m::after{content:"";position:absolute;top:-4px;bottom:-4px;left:0;right:0}
.ku-m:hover{border-bottom-color:var(--ciel);color:var(--ciel-d)}
.ku-m.dit{background:var(--soleil);border-bottom-color:transparent;
  box-shadow:0 0 0 3px var(--soleil)}
/* Le haut-parleur faisait 23x15 px et son glyphe 10,9 px : la plus petite
   cible du produit, sur le geste qu'Anthony veut voir repete a chaque mot.
   Taille minimale de 32 px dans les deux sens, et un glyphe qui ne descend
   plus sous 13 px. */
.ku-hp{font-size:max(13px,.72em);line-height:1;vertical-align:.12em;background:none;border:0;
  min-width:32px;min-height:32px;padding:2px 4px;margin-left:.1em;border-radius:8px;
  display:inline-grid;place-items:center;cursor:pointer;opacity:1;color:var(--encre-3);
  -webkit-tap-highlight-color:transparent}
.ku-hp:hover{color:var(--encre)}
.ku-hp.dit{opacity:1;background:var(--soleil)}

/* La carte d'un mot nouveau devient elle-meme le bouton : la cible est large,
   au doigt comme a la souris, et le petit haut-parleur n'est qu'un indice. */
button.mot-neuf{width:100%;text-align:left;border:0;font:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
button.mot-neuf:hover{box-shadow:0 3px 0 var(--ligne-2),inset 0 0 0 2px var(--ciel)}
button.mot-neuf.dit{box-shadow:0 3px 0 var(--soleil-d),inset 0 0 0 2px var(--soleil)}
.mot-neuf .hp-mini{font-style:normal;font-size:.78rem;margin-left:.4em;opacity:.55}
button.mot-neuf:hover .hp-mini,button.mot-neuf.dit .hp-mini{opacity:1}

/* Une tuile, une option, une paire qui parlent : le meme clic choisit et fait
   entendre, donc aucun ornement en plus — juste le retour au moment ou ca
   sonne, pour qu'on sache d'ou vient la voix. */
.tuile.dit,.option.dit,.paire.dit{box-shadow:0 3px 0 var(--soleil-d),inset 0 0 0 2px var(--soleil)}

/* La reponse au verdict : elle se relit et se reecoute, mot par mot. */
.ku-rep{font-family:var(--f-disp);font-weight:800}
.ku-rep .ku-m{border-bottom-color:rgba(0,0,0,.22)}

/* --- LA COULEUR DE L'UNITE, SUR TOUTE LA PAGE ------------------------------
   Le chemin etait creme d'un bout a l'autre : on ne voyait pas ou une unite
   finissait. Un halo de sa couleur le dit.

   DEUX VERSIONS ONT ECHOUE AVANT CELLE-CI, et elles ont echoue de la meme
   facon : en essayant de peindre le halo SUR LA COLONNE DU CHEMIN.

     1. une ellipse posee sur la boite des paliers s'arretait a la largeur de
        la colonne : deux aretes verticales, une a droite et une a gauche, et
        la couleur changeait d'un coup. Anthony, le 12/09 : « on voit les
        delimitations sur le cote, il faut que ce soit smooth et que ca
        descende sur toute la largeur ».
     2. elargir cette boite de trente pour cent la faisait sortir de la page :
        4 a 5 px de defilement lateral sur deux ecrans, mesures au banc. Une
        garde `overflow-x:clip` masquait le symptome et en creait un autre.

   La colonne fait 520 px : rien de ce qu'on y peint ne fera jamais la largeur
   de la page. Le halo est donc une COUCHE FIXE, derriere tout, qui ne depend
   plus d'aucune boite — et `app.js` lui donne la couleur de l'unite qu'on est
   en train de regarder. `background-color` se transitionne, donc le passage
   d'une unite a l'autre se fond au lieu de sauter. */
.halo-unite{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-color:var(--halo,transparent);transition:background-color .5s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 16%,transparent 64%);
  mask-image:linear-gradient(180deg,#000 0%,#000 16%,transparent 64%)}
/* La carte de l'unite et les paliers passent devant : ils sont dans le flux,
   la couche est en `z-index:0` sous eux. `#app` cree son propre contexte pour
   que la couche ne remonte jamais par-dessus la barre du haut. */
#app{position:relative;z-index:1}

/* --- LA BARRE D'UNITE COLLEE ------------------------------------------------
   Vingt paliers plus bas, on ne sait plus dans quelle unite on est : la carte
   d'unite est partie en haut. Cette barre reprend son titre, sa couleur et
   l'avancement (paliers faits / paliers de l'unite) et reste collee sous la
   barre du haut tant que ses paliers sont a l'ecran. `app.js` la remplit et
   la montre ; elle n'existe pas sans lui, et rien d'autre n'en depend. */
/* La cale colle et ne mesure rien : la barre, dedans, peut apparaitre et
   disparaitre sans que le chemin bouge d'un pixel (voir app.js, vueCarte). */
.unite-cale{position:sticky;top:calc(var(--barre-h) + 8px);z-index:20;height:0;max-width:520px;margin:0 auto}
.unite-colle{position:relative;display:flex;align-items:center;gap:12px;
  padding:9px 14px;border-radius:16px;color:#fff;background:var(--cu,var(--soleil));
  box-shadow:0 4px 0 rgba(0,0,0,.22),0 14px 30px -14px rgba(20,24,58,.55);font-family:var(--f-disp);font-weight:800;
  animation:monter .25s var(--ease)}
.unite-colle .u-ic{font-size:1.3rem;line-height:1;flex:0 0 auto}
.unite-colle .u-titre{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.98rem}
.unite-colle .u-titre small{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.unite-colle .u-prog{font-size:.85rem;font-variant-numeric:tabular-nums;flex:0 0 auto}
.unite-colle .u-barre{width:56px;height:8px;border-radius:99px;background:rgba(0,0,0,.25);overflow:hidden;flex:0 0 auto}
.unite-colle .u-barre i{display:block;height:100%;width:0;background:#fff;border-radius:99px}
@media (max-width:380px){.unite-colle .u-barre{display:none}}
/* Au large, la barre du haut n'existe plus (le rail lateral la remplace) :
   la barre d'unite se colle au bord. */
@media (min-width:900px){.unite-cale{top:12px}}

/* --- LE JEU, SANS TOUCHER AUX REGLES ----------------------------------------
   Rien ici ne change ce que le serveur compte. Tout dit mieux ce qu'il compte :
   une suite de bonnes reponses, un coeur qui part, une serie qui monte, un
   objectif atteint, une unite qui s'ouvre, la personne a depasser. */
/* Le combo : une pastille qui saute au-dessus du verdict, a partir de deux. */
.verdict .combo{display:inline-flex;align-items:center;gap:6px;background:#FFF1CC;color:var(--feu-txt);font-family:var(--f-disp);font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;margin-bottom:4px;animation:combo-pop .45s var(--pop)}
.verdict .combo svg.ic{width:16px;height:16px}
@keyframes combo-pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
/* Le coeur qui part tremble, une fois. */
.lecon-coeurs.secoue{animation:secouer .45s}
/* La serie en danger : la flamme bat, doucement, le soir seulement. */
.jauge-feu.is-danger{color:var(--rouge-txt);box-shadow:0 2px 0 var(--rouge-d),inset 0 0 0 1.5px var(--rouge)}
.jauge-feu.is-danger svg.ic{animation:battre 1.4s ease-in-out infinite}
@keyframes battre{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.jauge-feu.is-danger svg.ic{animation:none}}
/* L'ecran de fin : la serie a sa tuile, les bandeaux annoncent, le rendez-vous
   de demain ferme l'ecran. */
.fin .t.f{background:var(--feu-fond)}
.fin .t.f b svg.ic{width:22px;height:22px;display:inline-block;vertical-align:-4px;color:var(--feu-fond)}
.fin-bandeau{display:inline-block;background:var(--vert-c);color:var(--vert-txt);font-family:var(--f-disp);font-weight:800;padding:8px 16px;border-radius:99px;margin:-8px 4px 16px;box-shadow:0 3px 0 var(--vert-d);animation:combo-pop .5s var(--pop)}
.fin-bandeau.neuve{background:#EDE9FE;color:var(--violet-txt);box-shadow:0 3px 0 var(--violet-d)}
.fin-nudge{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;color:var(--encre-2);font-weight:700;font-size:.95rem}
.fin-nudge svg.ic{width:18px;height:18px;color:#F97316}
/* Le classement : les trois premiers ont du volume, l'ecart se lit en tete. */
.ligne-cl.podium{padding:14px 12px}
.ligne-cl.podium .avatar{width:44px;height:44px;font-size:1.1rem;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.ligne-cl.podium .place{font-size:1.4rem}
.ligne-cl.podium .nom{font-size:1.05rem}
.cl-ecart{display:flex;align-items:center;gap:8px;background:#FFF1CC;color:var(--soleil-txt);font-family:var(--f-disp);font-weight:800;font-size:.9rem;padding:10px 14px;border-radius:14px;margin-bottom:12px}
.cl-ecart svg.ic{width:18px;height:18px;color:var(--soleil-d)}
/* La carte : une unite terminee le dit, et l'objectif atteint s'allume. */
.unite-carte .unite-finie{display:inline-block;margin-top:8px;font-family:var(--f-disp);font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.92);color:var(--vert-txt)}
.objectif.is-fait{box-shadow:0 4px 0 var(--soleil-d),inset 0 0 0 1.5px var(--soleil)}
.objectif.is-fait .anneau i{color:var(--soleil-txt)}
/* La page de connexion parle famille avant de demander un mot de passe. */
.compte-titre{font-size:clamp(1.5rem,5vw,1.9rem);text-align:center;margin:4px 0 6px;letter-spacing:-.01em}
.compte-sous{text-align:center;color:var(--encre-2);font-weight:600;margin-bottom:18px}

/* La dedicace, en fin de lecon : pour qui c'etait. */
.fin-pour{margin-top:16px;font-family:var(--f-disp);font-weight:800;color:var(--rouge-d);font-size:1.05rem}
.fin-pour + .fin-nudge{margin-top:8px}

/* L'offre a l'annee sur l'ecran Plus : l'ancien prix barre, le nouveau en
   gros, l'etiquette de lancement. Le bouton principal est l'annuel. */
.plus-annuel{position:relative;margin:14px 0 8px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16)}
.plus-promo{display:inline-block;font-family:var(--f-disp);font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#FFD9A8;background:rgba(255,176,32,.18);padding:4px 9px;border-radius:99px;margin-bottom:6px}
.plus-annuel-prix{display:flex;align-items:baseline;gap:8px;font-family:var(--f-disp);font-weight:800}
.plus-annuel-prix s{font-size:1.05rem;color:rgba(255,255,255,.72)}
.plus-annuel-prix b{font-size:2.4rem;color:var(--soleil);line-height:1}
.plus-annuel-prix small{font-size:.95rem;font-weight:700;color:rgba(255,255,255,.7)}
.plus-annuel-detail{margin-top:4px;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.8)}
.plus-annuel-detail s{color:rgba(255,255,255,.72)}
.plus-annuel-detail b{color:#fff}

/* Mode magasin (Play Store) : aucune entree vers l'abonnement. */
.magasin [data-vue="plus"]{display:none!important}

/* --- LE JEU AUTOUR DU COURS, SUITE : rang, missions, podium, mot du jour ---
   Ajoute le 13/09/2026. Rien ici ne compte un point : le serveur compte,
   ces blocs racontent. Meme relief, memes jetons, memes rayons que le reste. */

/* Le rang, dans le bloc de l'objectif : un numero en medaillon, le titre
   kurmanji, une barre. Sur telephone il passe sous l'objectif, sur toute la
   largeur, pour que la barre reste lisible. */
.objectif{flex-wrap:wrap}
.objectif-niveau{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:190px;flex:0 1 240px}
.objectif-niveau:empty{display:none}
.niveau-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(135deg,var(--violet-fond),var(--violet-fond-d));color:#fff;
  font-family:var(--f-disp);font-weight:800;font-size:1.05rem;box-shadow:0 3px 0 var(--violet-fond-d)}
.niveau-txt{display:grid;gap:4px;min-width:0;flex:1}
.niveau-txt b{font-family:var(--f-disp);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.niveau-txt small{color:var(--encre-2);font-weight:700;font-size:.8rem}
.niveau-barre{display:block;height:8px;border-radius:99px;background:var(--papier-3);overflow:hidden;font-style:normal}
.niveau-barre i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--violet-fond),var(--violet));transition:width .9s var(--ease)}
@media (max-width:640px){
  .objectif-niveau{flex:1 1 100%;margin-left:0;padding-top:10px;border-top:1.5px solid var(--ligne)}
}
/* Le bloc complet du rang (profil, ecran de fin) : le meme dessin, en grand. */
.niveau-bloc{text-align:left}
.niveau-tete{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.niveau-bloc .niveau-num{width:48px;height:48px;font-size:1.3rem}
.niveau-bloc .niveau-txt b{font-size:1.1rem}
.niveau-bloc .niveau-txt small{font-size:.9rem}
.niveau-bloc .niveau-barre{height:12px}
.niveau-suite{margin-top:8px;font-weight:700;font-size:.88rem;color:var(--encre-2)}
.pr-partage{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pr-partage .btn svg.ic{width:16px;height:16px;color:#F97316;margin-right:4px}
/* Sur l'ecran de fin, le rang tient la largeur des tuiles et parle en petit. */
.fin .fin-niveau{width:min(100%,460px);margin:-6px 0 20px;background:var(--papier-2);border-radius:16px;padding:14px 16px;
  box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne)}
.fin .t.n{background:var(--violet-fond)}
.fin-bandeau.niveau{background:#EDE9FE;color:var(--violet-txt);box-shadow:0 3px 0 var(--violet-fond-d)}
.fin-bandeau.parfaite{background:#FFF1CC;color:var(--soleil-txt);box-shadow:0 3px 0 var(--soleil-d)}
.fin-boutons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}

/* Les missions du jour : trois lignes, une coche qui se remplit. Le panneau
   entier passe au dore quand la journee est parfaite. */
.missions{margin-bottom:22px;padding:14px 16px 12px}
.missions-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.missions-tete h3{font-family:var(--f-disp);font-weight:800;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-3);margin:0}
.missions-compte{font-family:var(--f-disp);font-weight:800;font-size:.78rem;color:var(--violet-txt);background:#EDE9FE;padding:4px 10px;border-radius:99px;white-space:nowrap}
.missions ul{display:grid;gap:6px}
.mission{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ligne)}
.mission-coche{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px var(--ligne-2);font-family:var(--f-disp);font-weight:800;font-size:.9rem;color:#fff;background:transparent;transition:background .25s,box-shadow .25s}
.mission-txt{display:grid;gap:1px;font-weight:700;font-size:.95rem;min-width:0}
.mission-txt small{font-weight:700;font-size:.8rem;color:var(--encre-2)}
.mission.is-faite .mission-coche{background:var(--vert-fond);box-shadow:0 2px 0 var(--vert-fond-d);animation:combo-pop .45s var(--pop)}
.mission.is-faite .mission-txt{color:var(--encre-2)}
.mission.is-faite .mission-txt > :first-child{text-decoration:line-through;text-decoration-color:var(--ligne-2)}
.missions-pied{margin-top:10px;font-size:.82rem;font-weight:700;color:var(--encre-3)}
.missions.is-toutes{box-shadow:0 4px 0 var(--soleil-d),inset 0 0 0 1.5px var(--soleil);background:linear-gradient(180deg,#FFFBEE,var(--papier-2))}
.missions.is-toutes .missions-compte{background:var(--soleil);color:var(--nuit)}

/* Le panneau qui invite : l'aigle au drapeau, en coin, comme sur le Plus. */
.rail-c{position:relative}
.rail-aigle,.inviter-aigle{position:absolute;right:8px;top:6px;width:64px;pointer-events:none}
.rail-c.inviter h3,.rail-c.inviter p{padding-right:64px}
.installer{background:linear-gradient(160deg,#FFF7E0,var(--papier-2))}

/* Le mot du jour : le kurmanji en grand, son sens, d'ou il vient. L'aigle
   parle, cale sur le bord bas. */
.mot-jour{display:flex;align-items:flex-end;gap:14px;overflow:hidden;padding:0 18px 0 12px;margin-bottom:16px;
  background:linear-gradient(160deg,#FFF7E0,var(--papier-2))}
.mot-jour-aigle{width:92px;margin-bottom:-2px;flex:0 0 auto}
.mot-jour-in{display:grid;gap:2px;padding:16px 0;min-width:0}
.mot-jour h3{font-family:var(--f-disp);font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soleil-txt);margin:0 0 2px}
.mot-jour-ku{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.5rem,5vw,2rem);line-height:1.15;word-break:break-word}
.mot-jour-sens{font-weight:700;color:var(--encre-2);font-size:1.02rem}
.mot-jour small{font-weight:700;color:var(--encre-3);font-size:.82rem;margin-top:4px}
.mot-jour.is-vide p{font-weight:600;color:var(--encre-2);font-size:.92rem}

/* Le podium du classement : trois marches, la premiere au milieu. Les
   hauteurs viennent des socles, pas des avatars, pour que les prenoms
   restent alignes sur leur marche. */
/* `.podium-marches`, et non `.podium` : ce nom-la est celui des trois premieres
   LIGNES du classement, qui devenaient une grille a leur tour. */
.podium-marches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:end;margin:4px 0 16px;padding:0 4px}
.marche{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.marche .avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:1.2rem;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.marche.m1 .avatar{width:60px;height:60px;font-size:1.5rem;box-shadow:0 0 0 3px var(--soleil),0 4px 0 var(--soleil-d)}
.marche b{font-family:var(--f-disp);font-size:.88rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marche small{font-family:var(--f-disp);font-weight:800;font-size:.78rem;color:var(--soleil-txt)}
.marche .socle{width:100%;border-radius:12px 12px 6px 6px;display:grid;place-items:start center;padding-top:8px;font-size:1.3rem;
  background:linear-gradient(180deg,var(--papier-3),#E6DFCF);box-shadow:inset 0 0 0 1.5px var(--ligne),0 3px 0 var(--ligne-2)}
.marche.m1 .socle{height:64px;background:linear-gradient(180deg,#FFE27A,#FFC53D)}
.marche.m2 .socle{height:46px}
.marche.m3 .socle{height:34px;background:linear-gradient(180deg,#F3D9C4,#E4BFA3)}
.marche.is-moi b{color:var(--ciel-txt)}

/* Le badge qui approche porte sa barre. */
.badge.is-prochain{filter:none;box-shadow:inset 0 0 0 2px var(--soleil)}
.badge.is-prochain .ic{opacity:1}
.badge.is-prochain b{color:var(--encre)}
.badge.is-prochain .ic{background:linear-gradient(135deg,#FFF1CC,#FFE27A);box-shadow:0 4px 0 var(--soleil-d)}
.badge-barre{display:block;height:6px;border-radius:99px;background:var(--papier-3);overflow:hidden;margin:6px 4px 2px;font-style:normal}
.badge-barre i{display:block;height:100%;background:var(--soleil);border-radius:99px}
.badge small{display:block;font-family:var(--f-disp);font-weight:800;font-size:.75rem;color:var(--soleil-txt)}

/* Le mot en haut de l'ecran, par-dessus tout. */
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);z-index:120;
  background:var(--nuit);color:#fff;font-family:var(--f-disp);font-weight:700;font-size:.92rem;padding:10px 16px;border-radius:99px;
  box-shadow:0 12px 30px -10px rgba(20,24,58,.5);animation:monter .3s var(--ease);max-width:calc(100% - 32px);text-align:center;
  /* Un mot qui s'affiche ne prend aucun appui : il couvrait les jauges du haut pendant six secondes. */
  pointer-events:none}
.toast.is-parti{opacity:0;transition:opacity .4s}

/* LE PALIER DU MOMENT APPELLE, une fois. Un anneau qui s'elargit et
   s'efface, trois fois au chargement, jamais en boucle : la regle de la
   maison — rien ne bouge en permanence — tient. */
.noeud-socle.is-actuel::after{content:"";position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;
  border:3px solid var(--c);opacity:0;pointer-events:none;animation:appel 1.8s ease-out .6s 3}
@keyframes appel{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.45);opacity:0}}
/* La flamme qui a brule aujourd'hui frissonne a l'arrivee, deux fois. */
.jauge-feu:not(.is-vide):not(.is-danger) svg.ic{animation:frissonne 1.2s ease-in-out .4s 2}
@keyframes frissonne{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.15) rotate(-6deg)}60%{transform:scale(1.1) rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.noeud-socle.is-actuel::after,.jauge-feu svg.ic{animation:none}}

/* --- LE LOT DU 13/09, SUITE : gemmes, coffre, boutique, parrainage,
   passeport, lettre, episode, musique. Memes jetons, meme relief. */

/* La jauge des gemmes : violet, comme le rang. */
.jauge-gemme{color:#5B21B6}
.jauge-gemme svg.ic{color:#7C4DEE}
/* SEPT ONGLETS depuis les histoires (15/09), six depuis la musique (13/09).
   Douze pixels tout juste — la regle du 13/09 descendait a 11,2 px, sous le
   seuil que le banc impose partout ailleurs —, sans lettrage ni marge : a
   400 px la barre fait 341 px, a 439 px elle a de l'air. Et elle NE DEPASSE
   JAMAIS L'ECRAN : `flex:1` donnait sept colonnes egales, chacune au moins
   aussi large que son libelle, et quand la somme depassait la barre poussait
   « Profil » hors de l'ecran (mesure a 360 et 400). Ici les colonnes partent
   de leur contenu et RETRECISSENT ensemble si la place manque ; un libelle
   trop long se coupe en « … » au lieu de pousser la page — le cas d'un
   telephone qui grossit les polices. Jamais moins de 32 px : c'est un doigt. */
.nav-bas a,.nav-bas button[data-menu]{font-size:.75rem;letter-spacing:0;margin:6px 0;padding:0 1px;flex:1 1 auto;min-width:32px;border-radius:10px}
.nav-bas a > span:not(.ic),.nav-bas button[data-menu] > span:not(.ic){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Le coffre du jour. Ferme : gris et calme. Pret : dore et il appelle.
   Ouvert : vide, jusqu'a demain. */
.coffre{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding:14px 16px}
.coffre-icone{font-size:2.4rem;line-height:1;flex:0 0 auto;filter:drop-shadow(0 4px 4px rgba(20,24,58,.18))}
.coffre-in{display:grid;gap:4px;flex:1;min-width:0}
.coffre h3{font-family:var(--f-disp);font-weight:800;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-3);margin:0}
.coffre p{font-weight:600;font-size:.92rem;color:var(--encre-2)}
.coffre .btn{justify-self:start;margin-top:6px}
.coffre.is-pret{box-shadow:0 4px 0 var(--soleil-d),inset 0 0 0 1.5px var(--soleil);background:linear-gradient(160deg,#FFF7E0,var(--papier-2))}
.coffre.is-pret .coffre-icone{animation:coffre-appel 1.2s ease-in-out .5s 3}
@keyframes coffre-appel{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) scale(1.08)}75%{transform:rotate(8deg) scale(1.08)}}
.coffre.is-ouvert .coffre-icone{opacity:.6}
.fin .t.g{background:var(--violet-fond)}
.fin .t.g b svg.ic{width:22px;height:22px;display:inline-block;vertical-align:-4px;color:var(--violet-fond)}
.fin-bandeau.tampon{background:#E0F2FE;color:var(--ciel-txt);box-shadow:0 3px 0 var(--ciel-d)}

/* La boutique : le solde, un article, une note. */
.boutique-solde{display:flex;align-items:center;gap:6px;font-family:var(--f-disp);font-weight:800;color:var(--violet-txt);margin-bottom:12px}
.boutique-solde svg.ic{width:22px;height:22px;color:#7C4DEE}
.boutique-solde b{font-size:1.4rem}
.article{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:14px;border-radius:16px;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ligne)}
.article-gels{display:flex;gap:4px;font-size:1.6rem}
.gel-case{opacity:.25;filter:grayscale(1)}
.gel-case.is-plein{opacity:1;filter:none}
.article-in b{display:block;font-family:var(--f-disp);font-size:1.02rem}
.article-in small{font-weight:700;color:var(--encre-2);font-size:.82rem}
.article-in p{font-weight:600;color:var(--encre-2);font-size:.9rem;margin-top:4px}
.article .btn{grid-column:1/-1;justify-self:start}
@media (min-width:600px){.article{grid-template-columns:auto 1fr auto}.article .btn{grid-column:auto}}
.boutique-note{margin-top:10px;font-size:.82rem;font-weight:700;color:var(--encre-3)}

/* Le parrainage : le lien en clair, deux boutons, le compte. */
/* L'en-tete du profil : l'avatar, puis le nom et l'adresse. */
.profil-tete{display:flex;gap:14px;align-items:center}
.profil-qui{min-width:0}
.profil-qui #pr-email{overflow-wrap:anywhere}
.parrainage{position:relative;padding-right:96px}
.parrainage-aigle{position:absolute;right:6px;top:4px;width:84px;pointer-events:none}
.parrainage p{font-weight:600;color:var(--encre-2);font-size:.95rem}
.parrainage-lien{margin:12px 0;padding:10px 12px;border-radius:12px;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ligne);min-width:0}
.parrainage-lien code{display:block;font-size:.85rem;font-weight:700;line-height:1.45;overflow-wrap:anywhere;word-break:break-word;color:var(--ciel-txt)}
.parrainage-boutons{display:flex;gap:10px;flex-wrap:wrap}
.parrainage-compte{margin-top:12px;font-family:var(--f-disp);font-weight:800;font-size:.9rem;color:var(--soleil-txt)}
@media (max-width:420px){.parrainage{padding-right:18px}.parrainage-aigle{display:none}}

/* Le passeport : une grille de tampons, chacun un peu de travers. Un
   tampon obtenu est encre, les autres sont en pointille. */
.passeport-texte{font-weight:600;color:var(--encre-2);font-size:.95rem;margin-bottom:14px}
.passeport-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tampon{display:grid;gap:8px;padding:10px;border-radius:14px;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ligne);min-height:96px}
.tampon-rond{display:grid;place-items:center;text-align:center;width:88px;height:88px;margin:0 auto;border-radius:50%;
  border:3px dashed var(--ligne-2);color:var(--encre-3);transform:rotate(var(--rot,0deg));font-family:var(--f-disp)}
.tampon-rond b{font-size:.88rem;line-height:1.1}
.tampon-rond small{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.tampon.is-fait{background:var(--papier-2)}
.tampon.is-fait .tampon-rond{border:3px double #B8324F;color:#B8324F;box-shadow:inset 0 0 0 4px rgba(184,50,79,.12);background:rgba(184,50,79,.05)}
.tampon p{font-size:.8rem;font-weight:600;color:var(--encre-2);line-height:1.4}
.passeport-prochain{margin-top:12px;font-family:var(--f-disp);font-weight:800;font-size:.9rem;color:var(--ciel-txt)}
/* Les tampons qu'on n'a pas encore : une rangee de petits ronds, l'emoji et
   le numero. Quinze grandes cases vides faisaient 1 200 px de profil. */
.passeport-grille.a-venir{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.passeport-grille + .passeport-grille.a-venir{margin-top:12px}
.a-venir .tampon{min-height:0;padding:4px}
.a-venir .tampon-rond{width:56px;height:56px;border-width:2px}
.a-venir .tampon-rond b{font-size:1.1rem}

/* La lettre : la carte qui invite, puis la feuille qui compose. */
.lettre-carte{position:relative;padding-right:96px}
.lettre-aigle{position:absolute;right:6px;top:4px;width:84px;pointer-events:none}
.lettre-carte p{font-weight:600;color:var(--encre-2);font-size:.95rem;margin-bottom:12px}
@media (max-width:420px){.lettre-carte{padding-right:18px}.lettre-aigle{display:none}}
.sheet-in.lettre{text-align:left;max-height:88vh;overflow:auto}
.sheet-in.lettre h2{text-align:center;margin-bottom:12px}
.sheet-in.lettre h3{font-family:var(--f-disp);font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3);margin:14px 0 8px}
.lettre-qui{justify-content:flex-start}
.lettre-qui .tuile.is-choisi{background:#E0F2FE;box-shadow:0 4px 0 var(--ciel-d),inset 0 0 0 2px var(--ciel)}
.lettre-banque{gap:8px}
.lettre-phrase{padding:10px 14px}
/* Le kurde et sa traduction l'un SOUS l'autre : cote a cote ils se collaient
   (« Silav!Bonjour ! »). */
.lettre-phrase .mot{display:grid;gap:1px;text-align:left}
.lettre-phrase .mot b{font-family:var(--f-disp);font-size:1rem}
.lettre-phrase .mot small{font-weight:600;font-size:.85rem;color:var(--encre-2)}
.lettre-apercu{padding:14px;border-radius:14px;background:#FFF7E0;box-shadow:inset 0 0 0 1.5px var(--soleil);min-height:64px}
.lettre-apercu pre{white-space:pre-wrap;font:inherit;font-weight:600;line-height:1.5;color:var(--encre)}
.lettre-apercu p{color:var(--encre-3);font-weight:600;margin:0}
.sheet-in.lettre .actions{margin-top:16px}
/* La croix d'une feuille longue : collee en haut quand on defile, a 44 px. La
   sortie de la lettre etait un bouton tout en bas, hors de l'ecran. */
.sheet-in .sheet-x{position:sticky;top:0;float:right;z-index:3;width:44px;height:44px;margin:-10px -10px -34px 8px;padding:0;border:0;border-radius:50%;
  background:var(--papier-2);box-shadow:0 0 0 1.5px var(--ligne);font-size:1.2rem;line-height:1;color:var(--encre-2);cursor:pointer;display:grid;place-items:center}
.sheet-in .sheet-x:hover{background:var(--papier-3)}

/* L'episode : la mention dans le titre, la carte « a suivre », le recap. */
.episode-num{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:99px;background:#EDE9FE;color:var(--violet-txt);font-size:.75rem;letter-spacing:.08em}
.episode-fin{margin-top:8px;padding:18px 16px;border-radius:var(--r-l);background:var(--papier-2);box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);text-align:center}
.episode-aigle{width:110px;margin:0 auto 6px}
.episode-fin b{display:block;font-family:var(--f-disp);font-size:1.3rem;color:var(--violet-txt);margin-bottom:6px}
.episode-fin p{font-weight:600;color:var(--encre-2)}
.episode-plus{margin-top:8px;font-family:var(--f-disp);font-weight:800;color:var(--soleil-txt)}
.episode-verrou{margin-bottom:10px}
.recap{margin-bottom:14px;border-radius:14px;background:var(--papier-3);padding:8px 12px}
.recap summary{cursor:pointer;font-family:var(--f-disp);font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3)}
.recap .histoire{margin-top:10px;opacity:.85}

/* La musique : les cartes, puis le lecteur. Sur telephone la video se
   colle en haut et les paroles defilent dessous ; au large, la video a
   gauche, les paroles a droite. */
.chansons{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.chanson{display:grid;gap:0;text-align:left;border:0;padding:0;background:var(--papier-2);border-radius:var(--r);overflow:hidden;cursor:pointer;
  box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);transition:transform .12s;-webkit-tap-highlight-color:transparent}
.chanson:hover{transform:translateY(-2px)}
.chanson img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.chanson-in{display:grid;gap:2px;padding:12px 14px}
.chanson-in b{font-family:var(--f-disp);font-size:1.02rem;line-height:1.2}
.chanson-in small{font-weight:700;color:var(--encre-2);font-size:.85rem}
.chanson-theme{font-family:var(--f-disp);font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soleil-txt);margin-top:4px}
.chanson.sans-paroles .chanson-theme{color:var(--encre-3)}
.mu-retour{margin-bottom:14px}
.lecteur{display:grid;gap:18px}
.lecteur .video{position:sticky;top:calc(var(--barre-h) + 8px);z-index:10;border-radius:var(--r);overflow:hidden;background:#000;
  box-shadow:0 10px 30px -12px rgba(20,24,58,.5);aspect-ratio:16/9}
.lecteur .video iframe{width:100%;height:100%;border:0;display:block}
.paroles h2{font-size:1.3rem;margin-bottom:2px}
.chanson-meta{font-weight:700;color:var(--encre-2);font-size:.9rem;margin-bottom:8px}
.chanson-aide{font-weight:600;color:var(--encre-3);font-size:.85rem;margin-bottom:12px}
.vers-liste{display:grid;gap:8px}
.vers{display:grid;gap:2px;text-align:left;width:100%;border:0;background:var(--papier-2);border-radius:14px;padding:12px 14px;
  box-shadow:0 3px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);cursor:default;transition:background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.vers.a-temps{cursor:pointer}
.vers b{font-family:var(--f-disp);font-size:1.12rem;line-height:1.3}
.vers span{font-weight:600;color:var(--encre-2);font-size:.95rem}
.vers.is-courant{background:#FFF7E0;box-shadow:0 3px 0 var(--soleil-d),inset 0 0 0 2px var(--soleil)}
@media (min-width:900px){
  .lecteur{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
  .lecteur .video{position:static}
}
.mot-jeu{margin-bottom:16px}

/* L'histoire de la chanson et les mots a reperer : ce qui remplace les
   paroles. Le texte se lit d'un trait, les mots se posent en grille. */
.chanson-histoire{margin:12px 0 16px;padding:14px 16px;border-radius:14px;background:#FFF7E0;box-shadow:inset 0 0 0 1.5px var(--soleil)}
.chanson-histoire h3,.chanson-mots h3{font-family:var(--f-disp);font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soleil-txt);margin:0 0 6px}
.chanson-histoire p{font-weight:600;line-height:1.55;color:var(--encre)}
.chanson-mots{margin-bottom:16px;padding:14px 16px;border-radius:14px;background:var(--papier-2);box-shadow:0 4px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne)}
.chanson-mots .mots-grille{margin-top:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.chanson-mots .mots-grille b{font-size:1.05rem}
/* Au large : la video a gauche, le titre et l'histoire a droite, alignes en
   haut ; les mots a reperer en dessous, sur toute la largeur. */
@media (min-width:900px){.lecteur .chanson-mots{grid-column:1/-1}}

/* Troisieme planche : l'aigle ouvre le coffre, l'aigle ecrit la lettre. */
.coffre-aigle{width:96px;flex:0 0 auto;margin:-14px 0 -14px -6px;transform-origin:50% 90%}
.coffre.is-pret .coffre-aigle{animation:coffre-appel 1.2s ease-in-out .5s 3}
.coffre.is-ouvert .coffre-aigle{opacity:.55;filter:grayscale(.3)}
@media (max-width:380px){.coffre-aigle{width:72px}}
.lettre-sheet-aigle{display:block;width:120px;margin:-6px auto 4px}

/* --- LES PETITES HISTOIRES ---------------------------------------------------
   Une phrase par ligne, la traduction repliee dessous : on lit, on devine, on
   touche pour verifier. La ligne entiere est le bouton — la cible est large,
   au doigt aussi. */
.recits-compte{display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:800;color:var(--encre-2);margin-bottom:14px}
.recits-compte .ic{width:20px;height:20px}
.recits-unite{margin-bottom:22px}
.recits-unite h2{font-size:1.05rem;margin-bottom:8px}
.recits-unite.is-verrou h2{color:var(--encre-2)}
.recits-verrou{display:flex;align-items:center;gap:6px;color:var(--encre-2);font-weight:600;font-size:.9rem;margin-bottom:8px}
/* En lien vers la carte : c'est la que l'unite se finit. 32 px de haut, c'est un doigt. */
a.recits-verrou{color:var(--ciel-txt);text-decoration:underline;text-underline-offset:3px;min-height:32px;width:fit-content;padding:4px 0}
.recits-verrou .ic{width:18px;height:18px;flex:0 0 auto}
.recits{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.recit{display:flex;align-items:center;gap:12px;text-align:left;border:0;padding:12px 14px;min-height:56px;border-radius:var(--r);background:var(--papier-2);box-shadow:0 3px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);cursor:pointer;font:inherit;color:inherit;transition:transform .12s}
.recit:hover{transform:translateY(-2px)}
.recit:disabled{cursor:default;opacity:.55;transform:none}
.recit-num{width:34px;height:34px;border-radius:50%;background:#FFF1CC;color:var(--soleil-txt);display:grid;place-items:center;flex:0 0 auto;font-family:var(--f-disp);font-weight:800}
.recit-num .ic{width:18px;height:18px}
.recit.is-lu .recit-num{background:var(--vert-fond);color:#fff}
.recit-in{display:grid;gap:2px;min-width:0}
.recit-in b{font-family:var(--f-disp);font-size:1rem;line-height:1.25}
.recit-in small{font-weight:700;color:var(--encre-2);font-size:.82rem}
.recit-lecture{margin-top:14px}
.recit-lecture h2{font-size:1.35rem;margin-bottom:6px}
.recit-aide{color:var(--encre-2);font-weight:600;margin-bottom:14px}
.recit-lignes{display:grid;gap:10px}
.recit-ligne{display:grid;gap:4px;text-align:left;border:0;padding:12px 14px;min-height:50px;border-radius:14px;background:var(--papier-2);box-shadow:0 3px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);cursor:pointer;font:inherit;color:inherit;position:relative}
.recit-ligne::after{content:"?";position:absolute;right:12px;top:10px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:.85rem;background:#FFF1CC;color:var(--soleil-txt)}
.recit-ligne .ku{font-family:var(--f-disp);font-weight:700;font-size:1.08rem;line-height:1.35;padding-right:36px}
.recit-ligne .tr{display:none;color:var(--encre-2);font-weight:600;font-size:.95rem;line-height:1.4}
.recit-ligne.is-vu{background:#FFF7E0;box-shadow:0 3px 0 var(--soleil-d),inset 0 0 0 1.5px var(--soleil)}
.recit-ligne.is-vu::after{content:"✓";background:var(--vert-fond);color:#fff}
.recit-ligne.is-vu .tr{display:block;animation:entree .25s var(--ease)}
.recit-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px}

/* --- L'AUDIT DU 15/09 : ce qui manquait encore ------------------------------ */
/* C12. La croix de la fiche faisait 24 x 28 px : quarante dans les deux sens,
   sans bouger d'un pixel a l'ecran (la marge negative avale l'agrandissement). */
.fiche [data-fermer]{min-width:40px;min-height:40px;display:grid;place-items:center;margin:-8px -8px 0 0}

/* A1. Le parrainage sur la carte : une ligne, le titre et « Envoyer mon lien ».
   Il faisait 270 px AVANT l'objectif, et le palier a jouer arrivait a 2 100 px
   du haut sur telephone. Il se range apres le coffre, en une ligne. */
.parrainage-court{padding:12px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.parrainage-court h2{font-size:1rem;flex:1;min-width:180px;margin:0}
.parrainage-court p,.parrainage-court .parrainage-aigle,.parrainage-court .btn-2{display:none}

/* A2. Le haut de la carte — objectif, missions, coffre, parrainage — est un
   seul bloc : 14 px entre ses pieces, rien entre elles et le chemin que
   l'ecart de la grille. Une piece vide (compte neuf, base sans gemmes)
   disparait au lieu de laisser son ecart. Au large, le bloc prend la colonne
   du chemin, a sa largeur, et le rail monte a leur hauteur : trois largeurs
   empilees devenaient deux colonnes. */
.carte-haut{display:grid;gap:14px}
.carte-haut > *,.carte-haut > * > .panneau{margin-bottom:0}
.carte-haut > :empty{display:none}
@media (min-width:1080px){
  .carte-haut,.chemin{grid-column:1}
  .rail-cote{grid-column:2;grid-row:1/3}
  .carte-haut > *{max-width:520px;width:100%;margin-inline:auto}
}

/* A3. L'ecran Plus : les boutons ne s'etirent plus sur toute la largeur d'un
   ecran de bureau. */
.plus-carte .btn-bloc{max-width:440px}

/* A4. Le profil au large : deux colonnes, la tete et le parrainage sur les deux.
   Les panneaux gardent leur marge basse pour l'ecart vertical ; l'ecart de
   grille ne joue qu'entre les colonnes. */
@media (min-width:1080px){
  #vue-profil .shell{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
  #vue-profil .shell > :empty{display:none}
  #vue-profil .profil-tete,#vue-profil .shell > .profil-pied{grid-column:1/-1}
}

/* A5. Les histoires d'une unite fermee qui n'est pas la prochaine : une seule
   ligne, repliee. Soixante-quinze cartes grises n'invitaient a rien. */
.recits-unite.is-pliee{margin-bottom:10px}
.recits-unite.is-pliee h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.95rem;margin:0;padding:10px 12px;border-radius:12px;background:var(--papier-2);box-shadow:inset 0 0 0 1.5px var(--ligne)}
.recits-unite.is-pliee h2 .ic{width:16px;height:16px;flex:0 0 auto}
.recits-unite.is-pliee h2 small{margin-left:auto;font-weight:700;font-size:.8rem;color:var(--encre-3)}

/* A6. Une chanson ou une histoire ouverte : l'en-tete de l'onglet s'efface,
   la video et le texte montent. Un navigateur sans `:has()` garde l'en-tete,
   rien ne casse. */
#vue-musique:has(#mu-lecteur:not([hidden])) .en-tete,#vue-histoires:has(#h-lecteur:not([hidden])) .en-tete{display:none}

/* ============================ Le coach et le menu (18/09/2026) ============================ */

/* La barre du bas ne porte plus que cinq onglets : Apprendre, Reviser, Coach,
   Histoires, Menu. Sept s'empilaient sous 400 px. Le reste — Ensemble,
   Musique, Plus, Profil, Pilotage, la sortie — vit dans la feuille du menu. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.shell-etroit{max-width:640px}

.sheet.sheet-menu{align-items:flex-end}
.sheet-menu .sheet-in{text-align:left;padding:12px 10px calc(12px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;border-radius:var(--r-xl) var(--r-xl) 0 0}
.sheet-menu h2{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3);margin:8px 12px 10px}
.menu-lignes{display:grid;gap:4px}
.menu-ligne{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 14px;border-radius:14px;border:0;background:none;width:100%;text-align:left;cursor:pointer;
  font-family:var(--f-disp);font-weight:700;font-size:1.02rem;color:var(--encre);text-decoration:none;-webkit-tap-highlight-color:transparent}
.menu-ligne .ic{width:24px;height:24px;flex:0 0 auto;color:var(--encre-2)}
.menu-ligne:hover{background:var(--papier)}
.menu-ligne.is-here{color:var(--ciel-txt);background:rgba(56,189,248,.14);box-shadow:inset 0 0 0 2px rgba(56,189,248,.35)}
.menu-ligne.is-here .ic{color:inherit}
.menu-ligne.menu-sortir{color:var(--rouge-d);margin-top:6px;border-top:1.5px solid var(--ligne);border-radius:0 0 14px 14px}
.menu-ligne.menu-sortir .ic{color:inherit}
@media (min-width:700px){.sheet.sheet-menu .sheet-in{border-radius:var(--r-xl) var(--r-xl) 0 0}}

/* L'ecran du coach : un fil de bulles qui defile avec la page, et la saisie
   collee au-dessus de la barre du bas. Le kurmanji en grand, la traduction
   cachee dessous — la mecanique des petites histoires : on devine, puis on
   touche pour verifier. */
.coach-fil{display:grid;gap:12px;margin-bottom:14px}
.c-bulle{display:flex;gap:10px;align-items:flex-end;max-width:min(92%,560px)}
.c-bulle.coach{justify-self:start}
.c-bulle.moi{justify-self:end;flex-direction:row-reverse}
.c-avatar{width:36px;height:36px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:var(--papier-2);box-shadow:inset 0 0 0 1.5px var(--ligne)}
.c-corps{min-width:0;display:grid;gap:6px;flex:1}
.c-txt{display:block;width:100%;text-align:left;border:0;font:inherit;color:inherit;cursor:default;position:relative;
  padding:12px 14px;border-radius:18px 18px 18px 6px;background:var(--papier-2);
  box-shadow:0 3px 0 var(--ligne-2),inset 0 0 0 1.5px var(--ligne);font-family:var(--f-disp);font-weight:700;font-size:1.12rem;line-height:1.4;overflow-wrap:anywhere}
.c-bulle.coach .c-txt{cursor:pointer;padding-right:44px}
.c-bulle.coach .c-txt::after{content:"?";position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:.85rem;background:#FFF1CC;color:var(--soleil-txt)}
.c-bulle.coach.is-vu .c-txt{background:#FFF7E0;box-shadow:0 3px 0 var(--soleil-d),inset 0 0 0 1.5px var(--soleil)}
.c-bulle.coach.is-vu .c-txt::after{content:"\2713";background:var(--vert-fond);color:#fff}
.c-txt .ku-m{border-bottom-color:rgba(20,24,58,.22)}
.c-tr{display:none;color:var(--encre-2);font-weight:600;font-size:.95rem;line-height:1.4;padding:0 8px}
.c-bulle.coach.is-vu .c-tr{display:block;animation:entree .25s var(--ease)}
.c-indice{font-size:.78rem;font-weight:700;color:var(--encre-3);padding:0 8px}
.c-bulle.coach.is-vu .c-indice{display:none}
.c-note{display:grid;gap:8px;grid-template-columns:auto 1fr;align-items:start;background:var(--papier-2);box-shadow:inset 0 0 0 1.5px var(--ligne);border-radius:12px;padding:10px 12px;font-weight:600;font-size:.92rem;line-height:1.4;color:var(--encre-2)}
.c-note .c-note-in{display:grid;gap:8px;min-width:0}
.c-note .btn{justify-self:start}
.c-bulle.moi .c-txt{background:#E0F2FE;border-radius:18px 18px 6px 18px;box-shadow:0 3px 0 rgba(3,105,161,.25),inset 0 0 0 1.5px rgba(56,189,248,.5);font-family:var(--f-body);font-weight:700;font-size:1.05rem}
.c-bulle.is-attente .c-txt{padding-right:14px;cursor:default}
.c-bulle.is-attente .c-txt::after{content:none}
.c-points{display:inline-flex;gap:5px;align-items:center;height:1.4em;vertical-align:middle}
.c-points i{width:8px;height:8px;border-radius:50%;background:var(--encre-3);animation:c-pt 1s ease-in-out infinite}
.c-points i:nth-child(2){animation-delay:.15s}.c-points i:nth-child(3){animation-delay:.3s}
@keyframes c-pt{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.c-points i{animation:none;opacity:.7}}
.c-avis{margin:0}
/* Le defilement vers la derniere bulle s'arrete AU-DESSUS de la saisie collee
   et de la barre du bas, sinon la note du coach arrive cachee dessous. */
.c-bulle,.c-avis{scroll-margin-bottom:calc(var(--nav-bas) + 150px)}
.coach-saisie{position:sticky;bottom:calc(var(--nav-bas) + 8px);z-index:5;background:var(--papier);padding:10px 0 6px;
  box-shadow:0 -12px 18px -14px rgba(20,24,58,.28)}
.coach-ligne{display:flex;gap:8px;align-items:stretch}
.coach-champ{min-height:50px;flex:1;min-width:0;resize:none;padding:10px 14px;font-size:max(1rem,16px);line-height:1.3}
.coach-envoyer{flex:0 0 auto;padding:10px 16px;min-height:50px;font-size:.9rem}
.coach-banque{margin-top:8px;justify-content:flex-start}
.coach-banque .tuile{min-width:44px;min-height:40px;padding:6px 10px}
.coach-pied{display:grid;gap:8px;justify-items:center;text-align:center;color:var(--encre-2);font-weight:600;font-size:.9rem;margin-top:14px}
.coach-pied p{margin:0}
.coach-pied a{color:var(--ciel-txt);font-weight:700}
@media (max-width:380px){.coach-envoyer > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.coach-envoyer{padding:10px 14px}.coach-envoyer .ic-bouton{margin:0}}
@media (min-width:900px){.coach-saisie{bottom:12px}.c-bulle,.c-avis{scroll-margin-bottom:150px}}