/* =====================================================================
   core.css — livraison 20260818l

   Deux registres, et rien entre les deux.

   I.  APPARAT — le panneau d’accueil et les tuiles de modules, et eux
       seuls. C’est la vitrine : ornements, filigranes, or, lanternes.
   II. ATELIER — tout le reste. Deux sous-registres :
       II.a consultation (listes, sommaires, chemin de leçon, fiches,
            progrès, réglages) : filets fins, arrondis 12 à 14 px,
            aucune ombre, rien qui distraie de la lecture ;
       II.b exercices : saturé au contraire, cibles d’au moins 46 px,
            arrondis 18 à 20 px, bordures de 2 px, enfoncement de 4 à 5 px.

   Ce qui traverse les deux : le fond crème, la typographie, le sceau
   pour marquer une position, le codage des tons, et le trio
   jade (acquis) / ocre (en cours) / rouge (à revoir).
   ===================================================================== */


/* =====================================================================
   0. SOCLE COMMUN
   ===================================================================== */
:root{

  /* Le contour guide du tracé, plus pâle que le filet ordinaire. */
  --trace-guide:#E2D6C4;

  /* ---- Lanternes de l’accueil -------------------------------------
     Trois teintes, plus chaudes que la palette générale : elles sont là
     pour l’ornement du panneau rouge, pas pour la lisibilité. */
  --lant-or:#F0D08A;
  --lant-armature:#EBC578;
  --lant-corps:#D9483C;

  /* ---- Échelle d’espacement ----------------------------------------
     Six rangs, un seul endroit. Le JavaScript nomme un rang, jamais une
     taille : changer tout le rythme de l’application se fait ici. */
  --esp-0:2px;   /* collé       */
  --esp-1:4px;   /* serré       */
  --esp-2:8px;   /* normal      */
  --esp-3:12px;  /* aéré        */
  --esp-4:16px;  /* séparation  */
  --esp-5:24px;  /* respiration */

  /* ---- Échelle typographique ---------------------------------------
     Les écarts s’élargissent à mesure qu’on monte : c’est ce qu’on
     attend d’une échelle de corps — petits pas dans le texte courant,
     grands pas dans les titres. */
  --tx-1:17px;  /* courant    */
  --tx-2:19px;  /* accent     */
  --tx-3:23px;  /* sous-titre */
  --tx-4:30px;  /* titre      */
  --tx-5:42px;  /* caractère isolé */

  --build:'20260818l';   /* marqueur de livraison, lu par l’écran Réglages */

  --bg:#FBF6EE;
  --card:#FFFFFF;
  --tuile:#FFFDF8;       /* le blanc légèrement chaud des tuiles de modules */
  --ink:#2C2723;
  --muted:#776E66;
  --line:#EEE4D6;
  --line2:#E2D6C4;

  --red:#B8342E;      --red-d:#8E2622;  --red-s:#FBEDEA;
  --gold:#B98526;     --gold-d:#8E651A; --gold-s:#FCF3E0;
  --jade:#3D7A69;     --jade-d:#2C5B4E; --jade-s:#E9F3F0;
  --indigo:#3C5375;   --indigo-d:#2B3D57;--indigo-s:#ECF0F7;
  --plum:#8A4260;     --plum-d:#6A3049; --plum-s:#F9EDF2;
  --clay:#A85A32;     --clay-d:#824426; --clay-s:#FBEFE6;

  /* Le filet or, sur fond crème. Deux autres valeurs à essayer sur
     l’écran réel : #D9BC7E plus doux, #E3CFA0 presque effacé. */
  --or-filet:#C6A053;
  /* L’or sur fond rouge, qui doit être bien plus clair pour se détacher. */
  --or-clair:#F0D08A;
  --panneau:#A82F2A;

  --ui:'Quicksand',system-ui,-apple-system,sans-serif;
  --han:'Noto Sans SC',sans-serif;
  --han-serif:'Noto Serif SC',serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--ui);font-weight:600;font-size:16px;line-height:1.5;
  padding-bottom:calc(78px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-weight:700;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--jade);outline-offset:3px}
.wrap{max-width:620px;margin:0 auto;padding:0 16px}
.hz,.sentence,.tile,.py,.opt.han,.emb{font-family:var(--han)}
.hidden{display:none}

/* Les tons. Un mot mémorisé avec le mauvais ton coûte plus cher qu’un
   mot jamais vu : cette échelle ne bouge nulle part dans l’application. */
.s1{color:#2F72A8} .s2{color:#3D8A46} .s3{color:#B98526} .s4{color:#B8342E} .s0{color:#8E857D}

/* Le sceau, qui marque une position dans les deux registres. */
.seal{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;
  border:2.5px solid var(--red);border-radius:8px;color:var(--red);
  font-family:var(--han);font-weight:700;font-size:15px}

/* La pastille carrée d’état Leitner, en fin de ligne. */
.dot{width:11px;height:11px;flex:none;border-radius:3px;background:var(--line2)}
.dot.ok{background:var(--jade)}
.dot.mid{background:var(--gold)}
.dot.due{background:var(--red)}


/* =====================================================================
   I. REGISTRE D’APPARAT
   Le panneau d’accueil et les tuiles de modules. Nulle part ailleurs.
   ===================================================================== */

/* ---------- Le panneau rouge ----------
   Quatre couches de fond, de la plus proche à la plus lointaine :
   les lanternes en haut à droite, la frise d’écailles en pied, le
   treillis de fenêtre en diagonale, puis l’aplat. */
.hero{
  position:relative;overflow:hidden;border-radius:28px;padding:22px 20px 20px;margin:14px 0 6px;
  color:#FBEFE0;
  background-color:var(--panneau);
  background-image:
    radial-gradient(circle at 50% 100%,transparent 8.5px,rgba(240,208,138,.45) 8.5px,rgba(240,208,138,.45) 10px,transparent 10px),
    repeating-linear-gradient(45deg,rgba(243,217,166,.09) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(-45deg,rgba(243,217,166,.09) 0 1px,transparent 1px 14px);
  background-repeat:repeat-x,repeat,repeat;
  background-position:bottom left,0 0,0 0;
  background-size:22px 12px,auto,auto;
  box-shadow:inset 0 0 0 1.5px rgba(198,160,83,.7);
}
/* Les deux lanternes suspendues, qui se balancent en décalé.
   transform-box:view-box est indispensable : sans lui le pivot est faux. */
.hero .lant{position:absolute;right:8px;top:-4px;width:60px;height:92px;pointer-events:none}
@keyframes sw2{from{transform:rotate(-4.5deg)}to{transform:rotate(4.5deg)}}
.hero .lant .c1{transform-box:view-box;transform-origin:20px 3px;
  animation:sw2 2.3s ease-in-out infinite alternate}
.hero .lant .c2{transform-box:view-box;transform-origin:44px 3px;
  animation:sw2 2.7s ease-in-out infinite alternate;animation-delay:-.5s}

/* Le filigrane 汉, en bas à gauche. */
.hero .mark{
  position:absolute;left:-16px;bottom:-40px;font-family:var(--han-serif);font-weight:700;
  font-size:132px;line-height:1;color:#F3D9A6;opacity:.13;pointer-events:none;
}
/* 汉语 annonce le bonjour. Le texte reste à distance des lanternes. */
.hero h1{margin:0;font-size:23px;font-weight:700;letter-spacing:-.01em;position:relative;z-index:1;
  max-width:calc(100% - 92px)}
.hero h1::before{
  content:'汉语';display:block;font-family:var(--han-serif);font-weight:500;
  font-size:14px;letter-spacing:.34em;color:#F3D9A6;opacity:.92;margin-bottom:7px;
}
.hero .sub{font-size:14px;opacity:.86;margin-top:3px;position:relative;z-index:1;
  max-width:calc(100% - 92px)}
/* Le séparateur à losange. */
.hero .rule{
  position:relative;height:1.5px;border-radius:0;margin:16px 0 14px;
  background:linear-gradient(90deg,rgba(243,217,166,.35),rgba(243,217,166,.35));
}
.hero .rule::after{
  content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-3px 0 0 -2.5px;
  background:#F3D9A6;transform:rotate(45deg);
}
.hero .figs{display:flex;position:relative;z-index:1}
.hero .fig{padding:0 14px;border-left:1px solid rgba(243,217,166,.28)}
.hero .fig:first-child{padding-left:0;border-left:0}
.hero .fig b{display:block;font-size:24px;line-height:1.1}
.hero .fig:first-child b{color:#F3D9A6}
.hero .fig span{display:block;font-size:10.5px;opacity:.72;letter-spacing:.03em}
.hero .cta{
  display:block;width:100%;margin-top:16px;padding:15px;border-radius:17px;
  background:#FFF6EC;color:var(--red-d);font-size:16.5px;
  box-shadow:0 5px 0 rgba(0,0,0,.2);position:relative;z-index:1;
}
.hero .cta:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.2)}

/* ---------- Les tuiles de modules ----------
   Le caractère emblème paraît deux fois : en petit et en couleur au
   fil de la tuile, et en grand filigrane rouge qui déborde en haut à
   droite. Le filigrane est tiré de l’attribut data-em. */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.mod{
  position:relative;overflow:hidden;
  background:var(--tuile);border:1.5px solid var(--line);border-radius:17px 5px 17px 5px;
  padding:14px;text-align:left;box-shadow:0 4px 0 rgba(120,90,50,.06);
  display:flex;flex-direction:column;gap:6px;min-height:126px;
}
.mod::before{
  content:attr(data-em);position:absolute;top:-18px;right:-12px;
  font-family:var(--han-serif);font-weight:700;font-size:78px;line-height:1;
  color:#B8342E;opacity:.12;pointer-events:none;
}
.mod:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(120,90,50,.06)}
.mod .emb{
  position:relative;z-index:1;width:46px;height:46px;flex:none;border-radius:8px;
  display:grid;place-items:center;line-height:1;
  font-family:var(--han-serif);font-weight:700;font-size:26px;
  border:1.5px solid transparent;background:transparent;
}
.mod b{position:relative;z-index:1;font-size:15px;font-weight:700;line-height:1.25;margin-top:auto}
.mod span{position:relative;z-index:1;font-size:11.5px;color:var(--muted);line-height:1.3}
.mod.wide{grid-column:1 / -1;flex-direction:row;align-items:center;gap:14px;min-height:0}
.mod.wide::before{font-size:62px;top:-14px;right:-8px}
.mod.wide .emb{width:44px;height:44px;font-size:24px}
.mod.wide .col{position:relative;z-index:1;flex:1;min-width:0}
.mod.wide b{margin-top:0;display:block;font-size:17px}

.c-red{border-color:#F0CFCB}    .c-red .emb,.c-red b{color:var(--red)}          .c-red .bar i{background:var(--red)}
.c-gold{border-color:#F0DDB4}   .c-gold .emb,.c-gold b{color:var(--gold-d)}     .c-gold .bar i{background:var(--gold)}
.c-jade{border-color:#C6DFD8}   .c-jade .emb,.c-jade b{color:var(--jade)}       .c-jade .bar i{background:var(--jade)}
.c-indigo{border-color:#C9D5E7} .c-indigo .emb,.c-indigo b{color:var(--indigo)} .c-indigo .bar i{background:var(--indigo)}
.c-plum{border-color:#E6C9D6}   .c-plum .emb,.c-plum b{color:var(--plum)}       .c-plum .bar i{background:var(--plum)}
.c-clay{border-color:#EFD2BC}   .c-clay .emb,.c-clay b{color:var(--clay)}       .c-clay .bar i{background:var(--clay)}

/* Le sceau au repos : le fond pâle et le filet de la couleur du module.
   Seul le remplissage distingue les états ; la géométrie ne bouge pas. */
.c-red .emb{background:var(--red-s);border-color:#F0CFCB}
.c-gold .emb{background:var(--gold-s);border-color:#F0DDB4}
.c-jade .emb{background:var(--jade-s);border-color:#C6DFD8}
.c-indigo .emb{background:var(--indigo-s);border-color:#C9D5E7}
.c-plum .emb{background:var(--plum-s);border-color:#E6C9D6}
.c-clay .emb{background:var(--clay-s);border-color:#EFD2BC}

/* La tuile du module en cours : coins presque vifs, quatre cornières
   or, et l’emblème en sceau rouge plein, caractère réservé en crème.
   Ces règles viennent après les couleurs de module, pour les couvrir. */
.mod.cur{border-color:var(--or-filet)}
.mod.cur::after{
  content:'';position:absolute;inset:6px;pointer-events:none;
  --tr:linear-gradient(var(--or-filet),var(--or-filet));
  background-image:var(--tr),var(--tr),var(--tr),var(--tr),var(--tr),var(--tr),var(--tr),var(--tr);
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  background-size:14px 1.5px,1.5px 14px,14px 1.5px,1.5px 14px,14px 1.5px,1.5px 14px,14px 1.5px,1.5px 14px;
  background-repeat:no-repeat;
}
.mod.cur .emb,.mod.cur.wide .emb{
  background:var(--red);border-color:var(--red);color:#FBF6EE;
}

/* La barre d’avancement des tuiles. */
.bar{display:block;position:relative;z-index:1;height:9px;border-radius:99px;background:#F0E9DE;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px}

/* ---------- Le sélecteur de niveau, en six sceaux ----------
   Actif en rouge plein, disponible en contour or, verrouillé en
   pointillé pâle. La variante compacte sert sur les écrans de module. */
.hsk{display:flex;gap:5px;padding:10px 0 4px}
.sk{
  flex:1;min-width:0;text-align:center;padding:7px 0;border-radius:8px;
  font-family:var(--han-serif);font-weight:700;font-size:16px;
  border:1.5px solid var(--or-filet);color:var(--gold-d);background:var(--gold-s);
}
.sk .sub{display:block;font-family:var(--ui);font-size:9px;font-weight:600;
  opacity:.65;margin-top:1px;letter-spacing:.02em}
.sk.on{background:var(--red);border-color:var(--red);color:#FFF6EC}
.sk.off{border-color:#E3CFA0;color:#BCAF9A;background:transparent}
.hsk.mini{gap:4px;padding:7px 0 2px}
.hsk.mini .sk{font-size:14px;padding:5px 0}
.hsk.mini .sk .sub{font-size:8.5px}

/* ---------- Le sélecteur de thème ----------
   Le caractère 题 en rouge, le nom du thème en clair, un chevron
   discret, et le filet or dégradé en soulignement. */
.selwrap.theme{
  margin:11px 0 3px;
  background-image:linear-gradient(90deg,var(--or-filet),transparent);
  background-position:bottom left;
  background-size:100% 1.5px;
  background-repeat:no-repeat;
}
.selwrap.theme select{
  padding:11px 34px 13px 45px;border:0;border-radius:0;background:transparent;
  font-size:16.5px;color:var(--ink);
}
.selwrap.theme::before{
  content:'题';position:absolute;left:6px;top:8px;pointer-events:none;
  font-family:var(--han-serif);font-weight:700;font-size:24px;color:var(--red);
}
.selwrap.theme::after{content:'▾';right:10px;top:11px;color:var(--gold-d)}


/* =====================================================================
   II.a REGISTRE ATELIER — CONSULTATION
   Listes, sommaires, chemin de leçon, fiches, progrès, réglages.
   Filets fins, arrondis 12 à 14 px, aucune ombre. Un en-tête de
   contexte discret, jamais de filigrane.
   ===================================================================== */

/* ---------- En-tête de contexte ---------- */
.top{display:flex;align-items:center;gap:12px;padding:16px 0 8px}
.back{
  width:46px;height:46px;flex:none;border-radius:13px;background:var(--card);
  border:1.5px solid var(--line2);display:grid;place-items:center;
}
.back svg{width:20px;height:20px}
.back:active{background:var(--line)}
.htitle{flex:1;min-width:0;font-size:21px;font-weight:700;line-height:1.25}
.htitle small{display:block;font-size:13.5px;color:var(--muted);font-weight:600;margin-top:2px}

/* ---------- Blocs et libellés ---------- */
.box{background:var(--card);border:1.5px solid var(--line);border-radius:14px;
  padding:17px;margin-bottom:11px}
h2.sec{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:24px 0 11px}
p{margin:0 0 10px}
.mut{color:var(--muted);font-size:14.5px;font-weight:600}
.sm{font-size:13.5px}
.mt{margin-top:var(--esp-3)}
.row{display:flex;gap:9px}
.row>*{flex:1}

/* ---------- Boutons ----------
   L’enfoncement est la signature de l’application : il reste partout.
   Les libellés sont en bas de casse gras, jamais en capitales. */
.btn{display:block;width:100%;padding:15px 16px;border-radius:17px;
  background:var(--red);color:#fff;font-size:16.5px;box-shadow:0 5px 0 var(--red-d)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--red-d)}
.btn.jade{background:var(--jade);box-shadow:0 5px 0 var(--jade-d)}
.btn.jade:active{box-shadow:0 1px 0 var(--jade-d)}
.btn.gold{background:var(--gold);box-shadow:0 5px 0 var(--gold-d)}
.btn.gold:active{box-shadow:0 1px 0 var(--gold-d)}
.btn.pale{background:var(--card);color:var(--ink);border:1.5px solid var(--line2);box-shadow:0 4px 0 var(--line)}
.btn.pale:active{box-shadow:0 1px 0 var(--line)}
.btn.sm{padding:11px 12px;font-size:14.5px;border-radius:14px}
.btn.tiny{width:auto;display:inline-block;padding:9px 16px;font-size:14px;border-radius:13px}
/* Inerte tant que la condition n’est pas remplie. */
.btn.off,.btn[disabled]{background:#EDE5D9;color:#A79C90;box-shadow:0 5px 0 #DED3C3;pointer-events:none}
.btn.off:active,.btn[disabled]:active{transform:none;box-shadow:0 5px 0 #DED3C3}

/* ---------- Pastilles de filtre ---------- */
.pills{display:flex;gap:8px;overflow-x:auto;padding:8px 0 4px;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{flex:none;padding:9px 15px;border-radius:999px;background:var(--card);
  border:1.5px solid var(--line2);font-size:14.5px;color:var(--muted)}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pill.void{opacity:.45}
.selwrap{position:relative;margin:8px 0 2px}
.selwrap select{width:100%;appearance:none;font-family:var(--ui);font-weight:700;font-size:15px;
  padding:12px 40px 12px 16px;border-radius:13px;border:1.5px solid var(--line2);
  background:var(--card);color:var(--ink)}
.selwrap::after{content:'▾';position:absolute;right:16px;top:11px;color:var(--muted);pointer-events:none}

/* ---------- Listes de mots ---------- */
.wrow{display:flex;align-items:center;gap:13px;background:var(--card);border:1.5px solid var(--line);
  border-radius:13px;padding:12px 14px;margin-bottom:8px}
.wrow:active{background:#FDFAF4}
.wrow .g{font-family:var(--han);font-weight:700;font-size:25px;flex:none;min-width:56px}
.wrow .m{flex:1;min-width:0}
.wrow .m b{display:block;font-size:15px}
.wrow .m span{display:block;font-size:13.5px;font-weight:600}
.wrow .st{font-size:12px;color:var(--muted);flex:none}

/* ---------- Le chemin de leçon ----------
   Des sceaux 一 à 八 reliés par un pointillé or. Chaque étape porte son
   propre segment : il est or jusqu’à l’étape en cours, pâle ensuite. */
.path{position:relative;padding:6px 0 4px}
.pstep{display:flex;gap:15px;align-items:center;width:100%;text-align:left;
  padding:7px 0;margin-bottom:5px;position:relative}
.pstep:not(:last-child)::before{
  content:'';position:absolute;left:26px;top:50%;height:100%;width:2px;
  background:repeating-linear-gradient(to bottom,var(--line2) 0 6px,transparent 6px 13px);
}
.pstep.done:not(:last-child)::before,.pstep.open:not(:last-child)::before{
  background:repeating-linear-gradient(to bottom,var(--or-filet) 0 6px,transparent 6px 13px);
}
.pseal{width:54px;height:54px;flex:none;border-radius:12px;background:var(--card);
  border:1.5px solid var(--line2);display:grid;place-items:center;position:relative;z-index:1;
  font-family:var(--han-serif);font-weight:700;font-size:23px;color:var(--line2)}
.pstep:active .pseal{background:#FDFAF4}
.pstep .lab{flex:1;min-width:0}
.pstep .lab b{display:block;font-size:15.5px;color:var(--muted);line-height:1.3}
.pstep .lab span{display:block;font-size:12.5px;color:var(--line2);margin-top:2px}
.pstep.open .pseal{border-color:var(--red);color:var(--red);border-width:2px}
.pstep.open .lab b{color:var(--ink)}
.pstep.open .lab span{color:var(--muted)}
.pstep.done .pseal{background:var(--red);border-color:var(--red);color:#FFF6EC}
.pstep.done .lab b{color:var(--ink)}
.pstep.done .lab span{color:var(--jade)}

/* ---------- Bandeau de rappel du parcours ---------- */
.ribbon{display:flex;align-items:center;gap:9px;background:var(--red-s);border:1.5px solid #F0CFCB;
  border-radius:13px;padding:10px 12px;margin-bottom:12px;font-size:13.5px;color:var(--red-d)}
.ribbon .rs{width:28px;height:28px;flex:none;border-radius:7px;background:var(--red);color:#FFF6EC;
  display:grid;place-items:center;font-family:var(--han);font-size:15px;font-weight:700}
.ribbon button{margin-left:auto;flex:none;background:var(--red);color:#fff;border-radius:11px;
  padding:9px 14px;font-size:13.5px}

/* ---------- Statistiques ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.kpi{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:15px}
.kpi b{display:block;font-size:29px;line-height:1.1}
.kpi span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.ladder{display:flex;align-items:center;gap:11px;padding:7px 0}
.ladder .bx{width:30px;height:30px;flex:none;border-radius:7px;display:grid;place-items:center;
  font-size:13px;font-weight:700;background:#F0E9DE;color:var(--muted)}
.ladder .bx.on{background:var(--red);color:#FFF6EC}
.ladder .tx{flex:1;min-width:0;font-size:13.5px}
.ladder .tx b{font-size:14.5px}

/* ---------- Champs ---------- */
textarea,input[type=password],input[type=text]{width:100%;font-family:var(--ui);font-weight:600;
  font-size:16px;padding:14px;border-radius:13px;border:1.5px solid var(--line2);
  background:#FEFCF8;color:var(--ink)}
textarea{font-family:var(--han);font-size:19px;line-height:1.8;resize:vertical}
textarea:focus,input[type=password]:focus,input[type=text]:focus{outline:none;border-color:var(--jade)}
input[type=range]{width:100%;accent-color:var(--red)}
.sw{display:flex;align-items:center;gap:12px;padding:13px 0}
.sw .lb{flex:1;font-size:15px}
.sw .kn{width:52px;height:30px;flex:none;border-radius:999px;background:var(--line2);position:relative}
.sw .kn::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:#fff;transition:left .15s}
.sw.on .kn{background:var(--jade)}
.sw.on .kn::after{left:25px}
.vsel{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.vsel .who{width:88px;flex:none;font-size:13.5px;color:var(--muted)}
.vsel .selwrap{flex:1;margin:0}

/* ---------- Onglets ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-top:1.5px solid var(--line2);
  display:flex;padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
.tabs button{flex:1;padding:3px 2px;color:var(--muted);font-size:11px;font-weight:700}
.tabs button svg{display:block;margin:0 auto 3px;width:23px;height:23px}
.tabs button.on{color:var(--red)}
/* Pendant un exercice, la barre disparaît : rien ne doit détourner. */
body.exo .tabs{display:none}
body.exo{padding-bottom:24px}

/* ---------- Divers ---------- */
.void{text-align:center;padding:40px 20px;color:var(--muted)}
.void .em{font-family:var(--han-serif);font-size:46px;font-weight:700;color:var(--line2);
  display:block;margin-bottom:10px}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:14px;font-size:14.5px;
  z-index:60;max-width:88%;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.sentence{font-weight:500;font-size:22px;line-height:1.95}
.diff{font-family:var(--han);font-size:21px;line-height:1.7;word-break:break-all}
.diff u{text-decoration:none;border-bottom:3px solid currentColor}


/* =====================================================================
   II.b REGISTRE ATELIER — EXERCICES
   Saturé. Cibles d’au moins 46 px, arrondis 18 à 20 px, bordures de
   2 px, enfoncement de 4 à 5 px. Pas de cœurs, pas de vies : rien de
   punitif pour une adulte qui travaille seule.
   ===================================================================== */

/* ---------- En-tête d’exercice : progression épaisse et croix ---------- */
.qprog{display:flex;gap:5px;margin:4px 0 16px}
.qprog i{flex:1;height:13px;border-radius:7px;background:#F0E9DE}
.qprog i.ok{background:var(--jade)}
.qprog i.no{background:var(--red)}
.qprog i.now{background:var(--ink)}
.xclose{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:var(--card);border:2px solid var(--line2);color:var(--muted)}
.xclose svg{width:19px;height:19px}
.xclose:active{background:var(--line)}
.qnum{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.prompt{text-align:center;padding:18px 8px 6px}
.prompt .big{font-family:var(--han);font-weight:700;font-size:56px;line-height:1.2}
.prompt .med{font-size:22px;font-weight:700;line-height:1.35}

/* ---------- Propositions ----------
   La proposition retenue passe en aplat rouge, texte crème. Sur les
   énoncés longs — HSK 5 et 6 — la classe « long » remplace l’aplat par
   un contour épais : le crème sur rouge fatigue à la lecture. */
.opts{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.opt{width:100%;min-height:52px;text-align:left;padding:15px 17px;border-radius:19px;
  background:var(--card);border:2px solid var(--line2);font-size:17px;
  box-shadow:0 5px 0 rgba(120,90,50,.07)}
.opt:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(120,90,50,.07)}
.opt.pick{background:var(--red);border-color:var(--red-d);color:#FFF6EC;box-shadow:0 5px 0 var(--red-d)}
.opt.pick .s1,.opt.pick .s2,.opt.pick .s3,.opt.pick .s4,.opt.pick .s0,
.opt.pick .py,.opt.pick small{color:#FFF6EC}
.opt.pick.long{background:var(--red-s);color:var(--red-d);border:3px solid var(--red);
  box-shadow:0 5px 0 #F0CFCB}
.opt.pick.long .s1{color:#2F72A8} .opt.pick.long .s2{color:#3D8A46}
.opt.pick.long .s3{color:#B98526} .opt.pick.long .s4{color:#B8342E}
.opt.pick.long .s0{color:#8E857D}
/* Repérer la faute met deux phrases entières en proposition : la ligne
   doit pouvoir revenir, et le corps rester lisible. */
.opt.long{font-family:var(--han);font-size:19px;line-height:1.65;white-space:normal;padding:16px 17px}
.opt.ok{border-color:var(--jade);background:var(--jade-s);color:var(--jade-d);box-shadow:0 5px 0 #C6DFD8}
.opt.no{border-color:var(--red);background:var(--red-s);color:var(--red-d);box-shadow:0 5px 0 #F0CFCB}

@keyframes corrUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ---------- Verdict en ligne, quand la correction reste dans le flux ---------- */
.verdict{border-radius:19px;padding:14px 16px;font-size:14.5px;margin-bottom:11px}
.verdict.ok{background:var(--jade-s);color:var(--jade-d)}
.verdict.no{background:var(--red-s);color:var(--red-d)}
.score{text-align:center;padding:10px 0 4px}
.score .n{font-size:50px;font-weight:700;line-height:1}
.score .n small{font-size:22px;color:var(--muted)}
.score .lbl{font-size:13.5px;color:var(--muted);margin-top:4px}

/* ---------- Carte de révision ---------- */
.card3d{background:var(--card);border:2px solid var(--line2);border-radius:20px;
  padding:30px 20px;text-align:center;box-shadow:0 5px 0 rgba(120,90,50,.07)}
.card3d .glyph{font-family:var(--han);font-weight:700;font-size:70px;line-height:1.2}
.card3d .glyph.sm{font-size:42px}
.card3d .fr{font-size:21px;font-weight:700}
.card3d .py{font-size:20px;margin-top:6px}
.card3d hr{border:0;border-top:2px dashed var(--line);margin:18px 0}
.judge{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:12px}
.judge button{min-height:52px;padding:14px 4px;border-radius:18px;font-size:14.5px;line-height:1.2}

/* ---------- Étiquettes à remettre en ordre ---------- */
.tiles{display:flex;flex-wrap:wrap;gap:9px}
.tile{font-weight:700;font-size:21px;min-height:48px;padding:10px 15px;border-radius:18px;
  background:var(--card);border:2px solid var(--line2);box-shadow:0 4px 0 rgba(120,90,50,.06)}
.tile:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(120,90,50,.06)}
.drop{min-height:66px;border:2px dashed var(--line2);border-radius:19px;padding:10px;
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;background:#FEFCF8}

/* ---------- Appariement en deux colonnes ---------- */
.mgrid{display:flex;gap:10px}
.mgrid>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.mit{width:100%;min-height:48px;padding:13px 7px;border-radius:18px;background:var(--card);
  border:2px solid var(--line2);font-size:15.5px;font-weight:700;text-align:center;
  line-height:1.25;box-shadow:0 4px 0 rgba(120,90,50,.06)}
.mit.hz{font-family:var(--han);font-size:20px}
.mit:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(120,90,50,.06)}
.mit.sel{border-color:var(--indigo);background:var(--indigo-s);color:var(--indigo-d)}
.mit.ok{border-color:var(--jade);background:var(--jade-s);color:var(--jade-d);box-shadow:none;opacity:.7}
.mit.no{border-color:var(--red);background:var(--red-s);color:var(--red-d)}

/* ---------- Grille de complétion ---------- */
.gtab{width:100%;border-collapse:separate;border-spacing:5px}
.gtab th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:0 0 2px}
.gtab td{padding:0}
.gc{width:100%;min-height:46px;padding:12px 4px;border-radius:14px;font-size:14.5px;font-weight:700;
  text-align:center;line-height:1.25;background:#FAF5EC;border:2px solid transparent;
  color:var(--ink);font-family:var(--han)}
.gc.gap{background:#FEFCF8;border:2px dashed var(--line2);color:var(--line2)}
.gc.sel{border:2px solid var(--indigo);background:var(--indigo-s);color:var(--indigo-d)}
.gc.fill{background:var(--card);border:2px solid var(--line2)}
.gc.ok{border:2px solid var(--jade);background:var(--jade-s);color:var(--jade-d)}
.gc.no{border:2px solid var(--red);background:var(--red-s);color:var(--red-d)}

/* ---------- Conversation ---------- */
.bub{border-radius:18px;padding:14px 16px;margin:0 0 11px;border:1.5px solid #E7DCCB;background:#fff}
.bub.them{border-bottom-left-radius:5px;margin-right:34px}
.bub.me{border-bottom-right-radius:5px;margin-left:34px;background:var(--red-s);
  border-color:#F0CFCB;text-align:right}
.bub.me .sentence{color:var(--red-d)}

/* ---------- Jetons de correction ---------- */
.tbox{border-radius:19px;background:#FEFCF8;border:2px solid var(--line2);flex:none}
.tbox.ok{border-color:var(--jade)}
.tok{border-color:var(--line2)}
.tok.bon{border-color:var(--jade);color:var(--jade-d);background:var(--jade-s)}
.tok.mauvais{border-color:var(--red);color:var(--red-d);background:var(--red-s)}


/* =====================================================================
   III. MODULE GRAMMAIRE
   Registre atelier. Navigation en lignes pleine largeur, jamais en
   rangée de pastilles.
   ===================================================================== */
.grow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:13px 15px;
  margin-bottom:9px;border-radius:14px;background:var(--card);border:1.5px solid var(--line)}
.grow:active{background:#FDFAF4}
.grow .em{font-family:var(--han-serif);font-size:22px;font-weight:700;width:46px;height:46px;flex:none;
  border-radius:12px;display:grid;place-items:center;background:#FAF5EC;color:var(--muted)}
.grow .tx{flex:1;min-width:0}
.grow .tx b{display:block;font-size:15.5px;line-height:1.3}
.grow .tx small{display:block;color:var(--muted);font-size:12.5px;font-weight:600;margin-top:2px}
.grow .st{flex:none;font-size:11px;font-weight:800;letter-spacing:.05em;padding:5px 9px;
  border-radius:8px;background:#FAF5EC;color:var(--muted)}
.grow.c-jade .em{background:var(--jade-s);color:var(--jade-d)}
.grow.c-indigo .em{background:var(--indigo-s);color:var(--indigo-d)}
.grow.c-plum .em{background:var(--plum-s);color:var(--plum-d)}
.grow.c-clay .em{background:var(--clay-s);color:var(--clay-d)}
.grow .st.ok{background:var(--jade-s);color:var(--jade-d)}
.grow .st.due{background:var(--red-s);color:var(--red-d)}

.gsub{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:800;margin:20px 0 9px}

/* Résumé en tête de fiche */
.gres{border-radius:14px;padding:15px 17px;margin-bottom:16px;background:var(--gold-s);
  border:1.5px solid #F0DDB4;color:var(--gold-d);font-size:15.5px;line-height:1.5}

/* Découverte : progression et écran d’emploi */
.gprog{display:flex;gap:5px;margin-bottom:16px}
.gprog i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.gprog i.on{background:var(--jade)}
.gsec{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:17px;margin-bottom:13px}
.gsec h3{margin:0 0 11px;font-size:17px;line-height:1.3;color:var(--jade-d)}
.gsec p{margin:0 0 11px;font-size:15.5px;line-height:1.55}
.gsec p:last-child{margin-bottom:0}
.gsec b{color:var(--red-d);font-family:var(--han);font-weight:700}

/* Exemple commenté */
.gex{border-left:4px solid var(--jade);padding:2px 0 2px 13px;margin:13px 0}
/* Pastille de registre : discrète, jamais un avertissement. */
.reg{display:inline-block;vertical-align:middle;margin-left:.5em;
  padding:.05em .5em;border:1px solid var(--jade);border-radius:1em;
  color:var(--jade);background:transparent;
  font-family:var(--ui);font-size:.62rem;font-weight:600;
  letter-spacing:.04em;text-transform:lowercase;white-space:nowrap}
h3 .reg{font-size:.58rem}

.gex .hz{font-size:21px;font-weight:700;line-height:1.45}
.gex .py{font-size:13.5px;color:var(--muted);font-weight:600;margin-top:2px}
.gex .fr{font-size:14.5px;margin-top:3px}
.gex .note{font-size:13.5px;color:var(--muted);font-style:italic;margin-top:6px;line-height:1.45}

/* Le piège */
.gpiege{border-radius:14px;padding:15px 17px;margin-bottom:13px;background:var(--red-s);
  border:1.5px solid #F0CFCB}
.gpiege .lb{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  color:var(--red-d);margin-bottom:9px}
.gpiege .ln{font-family:var(--han);font-size:19px;font-weight:700;margin:3px 0}
.gpiege .ln.no{color:var(--red-d);text-decoration:line-through;text-decoration-thickness:2px}
.gpiege .ln.oui{color:var(--jade-d)}
.gpiege .why{font-size:14px;margin-top:10px;line-height:1.5;color:var(--red-d)}

/* Micro-vérification entre deux écrans */
.gchk{background:#FEFCF8;border:1.5px dashed var(--line2);border-radius:14px;padding:15px;margin-bottom:13px}
.gchk .q{font-size:14.5px;margin-bottom:11px}
.gchk .why{font-size:13.5px;margin-top:10px;line-height:1.5;color:var(--muted)}

/* Renvois et critères */
.gvoir{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.gcrit{margin:11px 0 0;padding-left:19px;font-size:14px;line-height:1.6;color:var(--muted)}
.glock{opacity:.5}

/* Liste brute des voix, repliée tant que le chinois est trouvé. */
.bwarn{position:sticky;top:0;z-index:60;background:var(--red);color:#FFF6EC;
  font-size:13px;line-height:1.5;padding:11px 15px}

.vdump{margin-top:11px;font-size:13px;color:var(--muted)}
.vdump summary{cursor:pointer;font-weight:700;color:var(--gold-d);padding:3px 0}
.vdump ol{margin:9px 0 0;padding-left:21px;line-height:1.65}
.vdump code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink)}
.gconsigne{font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:800;
  color:var(--muted);margin-bottom:9px}
.gta{width:100%;min-height:96px;padding:13px 15px;border-radius:14px;border:1.5px solid var(--line2);
  background:var(--card);font-family:var(--han);font-size:18px;font-weight:600;line-height:1.6;
  color:var(--ink);resize:vertical}
.gta:focus{outline:none;border-color:var(--jade)}
.gpy{font-family:var(--ui);font-size:13.5px;color:var(--muted);font-weight:600;margin-top:3px}
.gpiege .gpy{color:var(--red-d);opacity:.8}


/* =====================================================================
   IV. TRANSITIONS
   On anime l’entrée, jamais la sortie. Dans les exercices, la question
   suivante entre par la droite, un retour entre par la gauche.
   ===================================================================== */
@keyframes vIn  {from{opacity:0;transform:translateY(8px)}  to{opacity:1;transform:none}}
@keyframes vInR {from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:none}}
@keyframes vInL {from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
#app.in  {animation:vIn  .2s cubic-bezier(.22,.9,.3,1)}
#app.in-r{animation:vInR .2s cubic-bezier(.22,.9,.3,1)}
#app.in-l{animation:vInL .2s cubic-bezier(.22,.9,.3,1)}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vIn .2s cubic-bezier(.22,.9,.3,1)}


/* =====================================================================
   V. ADAPTATIONS
   ===================================================================== */
@media (max-width:340px){
  .grid{grid-template-columns:1fr}
  .hsk .sk{padding:5px 0;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .hero .lant .c1,.hero .lant .c2{transform:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}


/* =====================================================================
   TRADUCTEUR
   Registre atelier, sous-registre consultation : filets fins, aucune
   ombre, rien qui distraie de la lecture. La seule chose qui attire
   l’œil est l’étoile, parce que c’est la seule chose sur laquelle il y
   ait à décider.
   ===================================================================== */

/* Le sens, choisi explicitement. Deux côtés et la permutation au milieu,
   comme sur un traducteur ordinaire — on ne devine pas à la place de
   l’utilisatrice ce qu’elle veut traduire. */
.tsens{display:flex;align-items:stretch;gap:8px;margin-bottom:11px}
.tsens>button{flex:1;min-height:48px;border-radius:15px;font-family:var(--ui);font-weight:700;
  font-size:15.5px;background:var(--card);color:var(--muted);border:1.5px solid var(--line2)}
.tsens>button.on{background:var(--gold-s);color:var(--gold-d);border-color:var(--or-filet)}
.tsens>button:active{transform:translateY(2px)}
.tsens .swap{flex:none;width:48px;background:transparent;border:none;color:var(--gold-d);
  display:grid;place-items:center;padding:0}
.tsens .swap svg{width:23px;height:23px}
.tsens .swap:active{transform:rotate(180deg)}

/* Une ligne de résultat : le contenu à gauche, l’étoile à droite,
   alignée sur la première ligne de texte et non centrée verticalement. */
.trow{display:flex;align-items:flex-start;gap:12px}
.trow .tl{flex:1;min-width:0}
.tl .hz{font-size:24px;font-weight:700;line-height:1.35}
.tl .py{font-size:16px;margin-top:2px}
.tl .fr{font-size:15.5px;font-weight:600;margin-top:3px}
.tl .tg{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:5px}

/* L’étoile. Creuse tant que rien n’est gardé, pleine et or une fois au
   carnet : l’état doit se lire d’un coup d’œil, sans légende. */
.fav{flex:none;width:46px;height:46px;border-radius:14px;background:transparent;
  border:1.5px solid var(--line2);color:var(--muted);display:grid;place-items:center;padding:0}
.fav svg{width:24px;height:24px}
.fav.on{background:var(--gold-s);border-color:var(--or-filet);color:var(--gold-d)}
.fav:active{transform:translateY(2px)}

/* Un résultat incomplet doit se voir. Une ligne nue à l’écran ne dit pas
   si le modèle s’est tu ou si l’application a filtré : ce panneau le dit. */
.box.lac{border-color:var(--or-filet);background:var(--gold-s)}

/* =====================================================================
   CLASSES UTILITAIRES

   Ces classes remplacent les styles qui etaient ecrits en dur dans les
   fichiers JavaScript. Elles ne portent plus de valeur dans leur nom,
   mais un rang d’échelle : .u-mb2 veut dire « marge basse, rang 2 », et
   c’est la variable --esp-2 qui decide combien de pixels cela fait.

   Conséquence : le prochain changement de rythme ou de corps de texte
   se fera en modifiant les onze lignes de variables ci-dessus. Aucun
   fichier JavaScript n’aura à être ouvert.

   Elles portent !important : un style en ligne l’emportait sur
   n’importe quel sélecteur, y compris composé. Sans cette marque,
   « .wrow .g » reprendrait la main et l’ecran changerait.
   ===================================================================== */
.u-ai-center{align-items:center !important}
.u-bb-3-solid-gold{border-bottom:3px solid var(--gold) !important}
.u-bc-transparent{border-color:transparent !important}
.u-bd-2-solid-line{border:2px solid var(--line) !important}
.u-bg-fefcf8{background:#FEFCF8 !important}
.u-br-20{border-radius:20px !important}
.u-bs-none{box-shadow:none !important}
.u-bt-2-dashed-line{border-top:2px dashed var(--line) !important}
.u-c-clay{color:var(--clay) !important}
.u-c-gold-d{color:var(--gold-d) !important}
.u-c-indigo{color:var(--indigo) !important}
.u-c-jade{color:var(--jade) !important}
.u-c-jade-d{color:var(--jade-d) !important}
.u-c-line2{color:var(--line2) !important}
.u-c-muted{color:var(--muted) !important}
.u-c-red{color:var(--red) !important}
.u-c-red-d{color:var(--red-d) !important}
.u-d-flex{display:flex !important}
.u-ff-han{font-family:var(--han) !important}
.u-ff-ui{font-family:var(--ui) !important}
.u-fw-700{font-weight:700 !important}
.u-fwr-wrap{flex-wrap:wrap !important}
.u-fx-1{flex:1 !important}
.u-fx-none{flex:none !important}
.u-gp3{gap:var(--esp-3) !important}
.u-gtc-1fr{grid-template-columns:1fr !important}
.u-h-11{height:11px !important}
.u-h-232{height:232px !important}
.u-jc-center{justify-content:center !important}
.u-lh-125{line-height:1.25 !important}
.u-lh-16{line-height:1.6 !important}
.u-m0{margin:0 !important}
.u-mauto{margin:0 auto !important}
.u-mb0{margin:0 0 var(--esp-0) !important}
.u-mb1{margin:0 0 var(--esp-1) !important}
.u-mb2{margin:0 0 var(--esp-2) !important}
.u-mb3{margin:0 0 var(--esp-3) !important}
.u-mbo2{margin-bottom:var(--esp-2) !important}
.u-mbo3{margin-bottom:var(--esp-3) !important}
.u-mh1{margin:var(--esp-1) 0 0 !important}
.u-mh2{margin:var(--esp-2) 0 0 !important}
.u-mh3{margin:var(--esp-3) 0 0 !important}
.u-mt0{margin-top:var(--esp-0) !important}
.u-mt1{margin-top:var(--esp-1) !important}
.u-mt2{margin-top:var(--esp-2) !important}
.u-mt3{margin-top:var(--esp-3) !important}
.u-mt4{margin-top:var(--esp-4) !important}
.u-mv13{margin:var(--esp-1) 0 var(--esp-3) !important}
.u-mv23{margin:var(--esp-2) 0 var(--esp-3) !important}
.u-mv30{margin:var(--esp-3) 0 var(--esp-0) !important}
.u-mv33{margin:var(--esp-3) 0 !important}
.u-mv42{margin:var(--esp-4) 0 var(--esp-2) !important}
.u-mv44{margin:var(--esp-4) 0 !important}
.u-op-5{opacity:.5 !important}
.u-ph2{padding:0 var(--esp-2) !important}
.u-ph4{padding:0 var(--esp-4) !important}
.u-pt3{padding-top:var(--esp-3) !important}
.u-pv20{padding:var(--esp-2) 0 var(--esp-0) !important}
.u-ta-center{text-align:center !important}
.u-ta-left{text-align:left !important}
.u-ta-right{text-align:right !important}
.u-tx1{font-size:var(--tx-1) !important}
.u-tx2{font-size:var(--tx-2) !important}
.u-tx3{font-size:var(--tx-3) !important}
.u-tx4{font-size:var(--tx-4) !important}
.u-tx5{font-size:var(--tx-5) !important}
.u-w-100pc{width:100% !important}
.u-w-232{width:232px !important}
.u-w-24{width:24px !important}
.u-w-56{width:56px !important}
.u-ws-pre-wrap{white-space:pre-wrap !important}
.u-lh-195{line-height:1.95 !important}
.u-mh0{margin:var(--esp-0) 0 0 !important}

/* ---- Remplissage des barres d’avancement --------------------------
   La largeur se calcule, la couleur non : elle reste ici. */
.bar i.ok{background:var(--jade)}
.bar i.mi{background:var(--gold)}
.bar i.no{background:var(--red)}

/* ---- Ligne choisie dans une liste ---------------------------------
   Trois teintes selon le module, une seule idée : « c’est celle-ci ». */
.choisi{border-color:var(--indigo) !important;color:var(--indigo) !important}
.choisi-jade{border-color:var(--jade) !important}
.choisi-rouge{border-color:var(--red) !important}

/* ---- Cases de tracé -----------------------------------------------
   Trois tailles selon le nombre de caractères. HanziWriter mesure la
   case au montage : cette déclaration est seule maîtresse. */
.tbox.tw1{width:196px;height:196px}
.tbox.tw2{width:138px;height:138px}
.tbox.tw3{width:102px;height:102px}

.u-lh-12{line-height:1.2 !important}

/* ---- Lanternes de l’accueil ---------------------------------------
   Le dessin est en SVG dans page-accueil.js — points, courbes, rayons.
   Tout ce qui relève de l’aspect est ici : sans quoi un changement de
   palette laisserait les lanternes à l’ancienne teinte, en silence. */
.lant .l-fil{stroke:var(--lant-or);stroke-width:1.1;fill:none}
.lant .l-cerne{fill:var(--lant-corps);stroke:var(--lant-or);stroke-width:1.4}
.lant .l-corps{fill:var(--lant-corps);stroke:var(--lant-or);stroke-width:1.4}
.lant .l-cotes{stroke:var(--lant-or);stroke-width:.9;fill:none;opacity:.8}
.lant .l-franges{stroke:var(--lant-or);stroke-width:1.3;stroke-linecap:round;fill:none}
.lant .l-armature{fill:var(--lant-armature)}

/* ---- Icônes en tracé fin ------------------------------------------
   Les SVG posés dans le JavaScript ne portent que leur géométrie. La
   teinte suit celle du texte, l’épaisseur et les jointures sont
   décidées ici — une icône plus fine ou plus grasse se règle sur ces
   trois lignes, pour toute l’application. */
.ico{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.etoile{stroke-width:1.8;stroke-linecap:butt}
.fav.on .ico.etoile{fill:currentColor}