/* ============================================================================
   KIDIBOOK V2 — COUCHE « CAHIER INTERACTIF » (186 fiches gs/cp/ce1/ce2/cm1/cm2)
   ----------------------------------------------------------------------------
   Chargée APRÈS le <style> interne de chaque fiche : elle uniformise les
   6 gabarits (6 agents = 6 dialectes) en un seul cahier premium.
   Tous les sélecteurs sont préfixés `body.kb-fiche` pour gagner la cascade
   sans !important. Aucune dépendance externe. Animations transform/opacity.
   ========================================================================== */

/* ------------------------------- 1. TOKENS -------------------------------- */
body.kb-fiche{
  --lvl:#0D4C5C;          /* couleur du niveau (décor, aplats doux)          */
  --lvl-solid:#0D4C5C;    /* variante AA : fond plein + texte blanc          */
  --lvl-soft:#E9F3F6;     /* teinte très claire                              */
  --lvl-line:rgba(13,76,92,.16);
  --kb-ok:#1E7F32;  --kb-ok-soft:#E8F7EC;
  --kb-ko:#C62828;  --kb-ko-soft:#FDECEA;
  --hud-h:60px;
  --leaf-r:28px;
}
body.kb-fiche--gs {--lvl:#0D4C5C;--lvl-solid:#0D4C5C;--lvl-soft:#E9F3F6;--lvl-line:rgba(13,76,92,.16)}
body.kb-fiche--cp {--lvl:#FFD23F;--lvl-solid:#8A5A00;--lvl-soft:#FFF6DC;--lvl-line:rgba(138,90,0,.18)}
body.kb-fiche--ce1{--lvl:#FF8A00;--lvl-solid:#B65200;--lvl-soft:#FFF1E2;--lvl-line:rgba(182,82,0,.18)}
body.kb-fiche--ce2{--lvl:#7B61FF;--lvl-solid:#5B45D6;--lvl-soft:#F1EEFF;--lvl-line:rgba(91,69,214,.18)}
body.kb-fiche--cm1{--lvl:#36B24A;--lvl-solid:#1E7F32;--lvl-soft:#E8F7EB;--lvl-line:rgba(30,127,50,.18)}
body.kb-fiche--cm2{--lvl:#2060CF;--lvl-solid:#1B51AF;--lvl-soft:#E9F1FD;--lvl-line:rgba(27,81,175,.18)}

body.kb-fiche{
  font-family:var(--kb-font-body);
  color:var(--kb-ink);
  background:
    radial-gradient(120% 60% at 50% -10%, var(--lvl-soft) 0%, rgba(255,253,248,0) 60%),
    var(--kb-cream);
  background-attachment:fixed;
  -webkit-text-size-adjust:100%;
}

/* ------------------------------ 2. BANDEAU -------------------------------- */
body.kb-fiche .hud{
  position:sticky; top:0; z-index:70;
  display:flex; align-items:center; flex-wrap:nowrap; gap:10px;
  min-height:var(--hud-h); padding:0 16px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border:0; border-bottom:1px solid rgba(23,50,59,.08);
  box-shadow:0 8px 24px -22px rgba(23,50,59,.9);
  color:var(--kb-ink);
}
body.kb-fiche .hud::after{                 /* liseré du niveau, 3px */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:linear-gradient(90deg,var(--lvl),var(--lvl-solid));
  opacity:.9;
}
/* jeton mascotte — même taille partout */
body.kb-fiche .hud-masc-wrap{flex:0 0 auto; display:block; line-height:0}
body.kb-fiche .hud-masc{
  width:42px; height:42px; border-radius:50%;
  object-fit:cover; object-position:50% 12%;
  background:#fff; border:2px solid #fff;
  box-shadow:0 0 0 2px var(--lvl), 0 6px 14px -8px rgba(23,50,59,.55);
}
body.kb-fiche .hud .brand{
  display:flex; align-items:center; gap:8px;
  flex:1 1 auto; min-width:0; margin-right:auto;
  font-family:var(--kb-font-title); font-weight:800; font-size:1.02rem;
  color:var(--kb-ink); line-height:1.15;
}
body.kb-fiche .hud .brand span{
  color:var(--kb-ink); font-family:var(--kb-font-title); font-weight:800;
  font-size:1.02rem; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.kb-fiche .hud .brand b{color:var(--lvl-solid)}
body.kb-fiche .hud .brand picture{display:none}   /* ancienne mascotte inline */
/* l'emoji reste dans le DOM (lecture d'écran / SEO) mais le jeton porte
   l'identité visuelle : on le masque pour éviter le doublon de mascotte */
body.kb-fiche .brand-emoji{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* fil d'Ariane « ← Site » : même pilule fantôme partout */
body.kb-fiche .hud .btn,
body.kb-fiche .hud .btn-ghost{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 15px; border-radius:var(--kb-r-pill);
  background:#fff; border:2px solid var(--lvl-line); color:var(--lvl-solid);
  font-family:var(--kb-font-title); font-weight:700; font-size:.9rem;
  text-decoration:none; box-shadow:none; white-space:nowrap;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
body.kb-fiche .hud .btn:hover{
  transform:translateY(-1px); background:var(--lvl-soft); border-color:var(--lvl);
}
body.kb-fiche .hud .btn:active{transform:translateY(0) scale(.97)}
/* compteur d'étoiles */
body.kb-fiche .stars{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  min-height:40px; padding:0 14px; border-radius:var(--kb-r-pill);
  background:var(--lvl-solid); color:#fff; border:0;
  font-family:var(--kb-font-title); font-weight:700; font-size:.95rem;
  box-shadow:0 8px 16px -10px rgba(23,50,59,.75);
  white-space:nowrap;
}

/* -------------------------------- 3. LIVRE -------------------------------- */
body.kb-fiche .book{
  position:relative; z-index:1;
  max-width:760px; margin:28px auto 168px; padding:0 16px;
}
/* Sur grand écran, la fiche respirait comme une appli mobile étirée :
   colonne de 730 px au milieu de 1440 et ~200 px de crème sous la carte. */
@media (min-width:1100px){
  body.kb-fiche .book{max-width:880px; margin:36px auto 132px}
  body.kb-fiche .leaf{padding:38px 44px 42px; min-height:auto}
  body.kb-fiche .leaf > *:last-child{margin-bottom:0}
  /* Écrans courts (couverture, chapitres, sommaire, diplôme) : la feuille se
     centre dans la hauteur libre entre le bandeau et la pilule de navigation,
     au lieu de flotter en haut d'un grand vide crème. min-height (jamais
     height) : si le contenu dépasse, la boîte grandit, aucun débordement.
     Sans :has() (vieux navigateurs), disposition d'origine conservée. */
  body.kb-fiche .book:has(.cover),
  body.kb-fiche .book:has(.diploma){
    display:flex; flex-direction:column; justify-content:center;
    min-height:calc(100vh - var(--hud-h) - 128px);
    margin-top:0; margin-bottom:24px;
  }
  /* sur ces écrans, la feuille épouse son contenu (le min-height:64vh de la
     règle de base — plus bas dans la feuille, même spécificité — gagnerait
     sinon : ici 0-3-1 tranche, quelle que soit la position) */
  body.kb-fiche .book:has(.cover) .leaf,
  body.kb-fiche .book:has(.diploma) .leaf{min-height:0}
  /* la « pile de pages » est calée sur la boîte .book : une fois la feuille
     centrée dedans, elle dépasserait au-dessus/en dessous — on la retire */
  body.kb-fiche .book:has(.cover)::before,
  body.kb-fiche .book:has(.cover)::after,
  body.kb-fiche .book:has(.diploma)::before,
  body.kb-fiche .book:has(.diploma)::after{display:none}
}
/* effet « pile de pages » derrière la feuille */
body.kb-fiche .book::before,
body.kb-fiche .book::after{
  content:""; position:absolute; z-index:-1; left:26px; right:26px; top:10px; bottom:0;
  border-radius:var(--leaf-r); background:#fff;
  box-shadow:0 10px 24px -18px rgba(23,50,59,.55);
}
body.kb-fiche .book::after{left:36px; right:36px; top:19px; opacity:.72}
body.kb-fiche .leaf{
  position:relative; overflow:hidden;
  background:#fff; border-radius:var(--leaf-r);
  border:1px solid rgba(23,50,59,.07);
  box-shadow:0 1px 2px rgba(23,50,59,.05),
             0 18px 40px -24px rgba(23,50,59,.35),
             0 40px 80px -50px rgba(23,50,59,.4);
  padding:30px 24px 34px; min-height:64vh;
}
body.kb-fiche .leaf::before{            /* bandeau du niveau, en tête de page */
  /* Avant : une languette de 132x8 px centrée, qui se lisait comme un moignon
     coupé plutôt que comme un signet. Elle devient un filet pleine largeur,
     lisible comme un choix graphique et cohérent avec les 6 niveaux. */
  content:""; position:absolute; top:0; left:0; right:0;
  height:7px; border-radius:0;
  background:linear-gradient(90deg,var(--lvl) 0%,var(--lvl-solid) 100%);
}
body.kb-fiche .leaf::after{             /* pliure douce côté reliure */
  content:""; position:absolute; top:0; bottom:0; left:0; width:26px;
  background:linear-gradient(90deg,rgba(23,50,59,.055),rgba(23,50,59,0));
  pointer-events:none;
}
body.kb-fiche .leaf.flip{animation:kbFlip .42s cubic-bezier(.22,.61,.36,1) both}
@keyframes kbFlip{
  from{opacity:0; transform:translate3d(20px,0,0) scale(.985)}
  to  {opacity:1; transform:none}
}

/* ------------------------------ 4. CONSIGNE ------------------------------- */
body.kb-fiche .consigne{
  display:flex; gap:14px; align-items:center;
  background:var(--lvl-soft);
  border:1px solid var(--lvl-line); border-left:6px solid var(--lvl-solid);
  border-radius:20px; padding:14px 18px; margin:2px 0 22px;
}
body.kb-fiche .consigne h2{
  font-family:var(--kb-font-title); font-weight:800;
  font-size:clamp(1.05rem,3.6vw,1.28rem); line-height:1.22;
  color:var(--kb-ink); margin:0;
}
body.kb-fiche .spk{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%; border:0;
  background:var(--lvl-solid); color:#fff; font-size:1.3rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 18px -10px rgba(23,50,59,.8);
  transition:transform .15s ease, box-shadow .15s ease;
}
body.kb-fiche .spk:hover{transform:translateY(-2px) scale(1.04)}
body.kb-fiche .spk:active{transform:scale(.92)}

/* ------------------------------ 5. EXERCICES ------------------------------ */
body.kb-fiche .exo{display:flex; flex-direction:column; gap:20px; align-items:center}
body.kb-fiche .objline{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center;
  background:var(--kb-cream); border:2px dashed var(--lvl-line);
  border-radius:22px; padding:18px 16px; width:100%; min-height:112px;
}
body.kb-fiche .choices{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
body.kb-fiche .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100%}
body.kb-fiche .match{display:flex; gap:24px; justify-content:center; align-items:center}
body.kb-fiche .mcol{display:flex; flex-direction:column; gap:14px}

/* — socle commun de toutes les tuiles cliquables — */
body.kb-fiche .tile,
body.kb-fiche .numbtn,
body.kb-fiche .pick2,
body.kb-fiche .mtok,
body.kb-fiche .somm button{
  position:relative;
  background:#fff; border:2px solid var(--lvl-line); color:var(--kb-ink);
  font-family:var(--kb-font-title); font-weight:800;
  box-shadow:0 6px 16px -10px rgba(23,50,59,.35);
  cursor:pointer;
  transition:transform .16s cubic-bezier(.22,.61,.36,1),
             box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
body.kb-fiche .tile:hover,
body.kb-fiche .numbtn:hover,
body.kb-fiche .pick2:hover,
body.kb-fiche .mtok:hover,
body.kb-fiche .somm button:hover{
  transform:translateY(-3px); border-color:var(--lvl);
  box-shadow:0 14px 26px -14px rgba(23,50,59,.45);
}
body.kb-fiche .tile:active,
body.kb-fiche .numbtn:active,
body.kb-fiche .pick2:active,
body.kb-fiche .mtok:active{transform:translateY(0) scale(.97)}

body.kb-fiche .tile{min-width:96px; height:96px; padding:6px; border-radius:22px;
  display:flex; align-items:center; justify-content:center; font-size:2.6rem}
body.kb-fiche .numbtn{width:84px; height:84px; border-radius:22px; font-size:2.3rem;
  color:var(--lvl-solid)}
body.kb-fiche .pick2{flex:1; min-width:130px; border-radius:22px; padding:16px;
  display:flex; align-items:center; justify-content:center}
body.kb-fiche .mtok{min-width:84px; height:84px; padding:6px; border-radius:20px;
  display:flex; align-items:center; justify-content:center; font-size:2.3rem}
body.kb-fiche .mtok.sel{border-color:var(--lvl-solid); transform:translateY(-3px) scale(1.03);
  box-shadow:0 0 0 4px var(--lvl-soft), 0 14px 26px -14px rgba(23,50,59,.45)}
body.kb-fiche .mtok.done{opacity:.42; cursor:default; transform:none; box-shadow:none}

/* — ÉTATS : jamais la couleur seule (icône + forme + relief) — */
body.kb-fiche .tile.ok,  body.kb-fiche .tile.good,
body.kb-fiche .numbtn.ok,body.kb-fiche .numbtn.good,
body.kb-fiche .pick2.ok, body.kb-fiche .pick2.good,
body.kb-fiche .mtok.ok,  body.kb-fiche .mtok.good{
  background:var(--kb-ok-soft); border:3px solid var(--kb-ok); color:var(--kb-ink);
  box-shadow:0 0 0 4px rgba(30,127,50,.12);
  animation:kbOk .32s cubic-bezier(.22,.61,.36,1);
}
body.kb-fiche .tile.no,  body.kb-fiche .tile.bad,
body.kb-fiche .numbtn.no,body.kb-fiche .numbtn.bad,
body.kb-fiche .pick2.no, body.kb-fiche .pick2.bad,
body.kb-fiche .mtok.no,  body.kb-fiche .mtok.bad{
  background:var(--kb-ko-soft); border:3px dashed var(--kb-ko); color:var(--kb-ink);
  box-shadow:0 0 0 4px rgba(198,40,40,.10);
  animation:kbShake .34s ease;
}
body.kb-fiche .tile.ok::after,  body.kb-fiche .tile.good::after,
body.kb-fiche .numbtn.ok::after,body.kb-fiche .numbtn.good::after,
body.kb-fiche .pick2.ok::after, body.kb-fiche .pick2.good::after,
body.kb-fiche .mtok.ok::after,  body.kb-fiche .mtok.good::after,
body.kb-fiche .tile.no::after,  body.kb-fiche .tile.bad::after,
body.kb-fiche .numbtn.no::after,body.kb-fiche .numbtn.bad::after,
body.kb-fiche .pick2.no::after, body.kb-fiche .pick2.bad::after,
body.kb-fiche .mtok.no::after,  body.kb-fiche .mtok.bad::after{
  position:absolute; top:-10px; right:-10px;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--kb-font-title); font-weight:800; font-size:.95rem; line-height:1;
  color:#fff; border:2px solid #fff;
  box-shadow:0 4px 10px -4px rgba(23,50,59,.6);
  animation:kbPop .26s cubic-bezier(.22,.61,.36,1);
}
body.kb-fiche .tile.ok::after,  body.kb-fiche .tile.good::after,
body.kb-fiche .numbtn.ok::after,body.kb-fiche .numbtn.good::after,
body.kb-fiche .pick2.ok::after, body.kb-fiche .pick2.good::after,
body.kb-fiche .mtok.ok::after,  body.kb-fiche .mtok.good::after{
  content:"✓"; background:var(--kb-ok);
}
body.kb-fiche .tile.no::after,  body.kb-fiche .tile.bad::after,
body.kb-fiche .numbtn.no::after,body.kb-fiche .numbtn.bad::after,
body.kb-fiche .pick2.no::after, body.kb-fiche .pick2.bad::after,
body.kb-fiche .mtok.no::after,  body.kb-fiche .mtok.bad::after{
  content:"✕"; background:var(--kb-ko);
}
/* les mots des tuiles portent une couleur décorative en style inline :
   on la neutralise UNIQUEMENT sur les états, pour ne pas contredire le verdict */
body.kb-fiche .pick2.ok *,  body.kb-fiche .pick2.good *,
body.kb-fiche .pick2.no *,  body.kb-fiche .pick2.bad *,
body.kb-fiche .tile.ok *,   body.kb-fiche .tile.good *,
body.kb-fiche .tile.no *,   body.kb-fiche .tile.bad *{color:var(--kb-ink)!important}
@keyframes kbOk{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes kbShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  50%{transform:translateX(5px)}80%{transform:translateX(-3px)}}
@keyframes kbPop{from{opacity:0; transform:scale(.4)}to{opacity:1; transform:scale(1)}}

/* — message de retour — */
body.kb-fiche .fb{
  margin-top:10px; min-height:32px; text-align:center;
  font-family:var(--kb-font-title); font-weight:700; font-size:1.1rem;
  color:var(--kb-muted);
}
body.kb-fiche .fb.win{
  color:var(--kb-ok); background:var(--kb-ok-soft);
  border:1px solid rgba(30,127,50,.25); border-radius:var(--kb-r-pill);
  display:inline-block; padding:7px 18px; margin:12px auto 0;
  animation:kbPop .3s cubic-bezier(.22,.61,.36,1);
}
body.kb-fiche .exo{position:relative}
/* — tampon « Bravo » — */
body.kb-fiche .stamp{
  font-family:var(--kb-font-title); font-weight:800; font-size:2.3rem;
  color:var(--kb-ok); border:6px solid var(--kb-ok);
  background:rgba(232,247,236,.96); border-radius:20px; padding:10px 24px;
  box-shadow:0 18px 40px -20px rgba(23,50,59,.5);
}

/* ------------------------- 6. PILULE DE NAVIGATION ------------------------ */
body.kb-fiche .nav{
  position:fixed; left:50%; right:auto; top:auto;
  transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:80; display:flex; align-items:center; gap:14px;
  padding:9px 14px; border-radius:var(--kb-r-pill);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border:1px solid rgba(23,50,59,.08);
  box-shadow:0 20px 44px -16px rgba(23,50,59,.35), 0 2px 6px rgba(23,50,59,.06);
}
body.kb-fiche .arrow{
  width:52px; height:52px; min-width:52px; border-radius:50%; border:0;
  background:var(--lvl-solid); color:#fff; font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 18px -10px rgba(23,50,59,.85);
  transition:transform .15s ease, opacity .15s ease;
}
body.kb-fiche .arrow:hover{transform:translateY(-2px)}
body.kb-fiche .arrow:active{transform:scale(.94)}
body.kb-fiche .arrow:disabled{opacity:.28; transform:none; cursor:default}
body.kb-fiche .pmid{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:118px}
body.kb-fiche .pmid b{font-family:var(--kb-font-title); font-weight:800;
  font-size:.98rem; color:var(--kb-ink)}
body.kb-fiche .progress{width:118px; height:9px; border-radius:var(--kb-r-pill);
  background:rgba(23,50,59,.1); overflow:hidden}
body.kb-fiche .progress i{display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--lvl),var(--lvl-solid));
  border-radius:var(--kb-r-pill); transition:width .45s cubic-bezier(.22,.61,.36,1)}

/* ---------------------- 7. COUVERTURE / SOMMAIRE / DIPLÔME ---------------- */
body.kb-fiche .cover{text-align:center; padding:20px 8px}
body.kb-fiche .cover .badge{
  display:inline-block; background:var(--lvl-solid); color:#fff;
  font-family:var(--kb-font-title); font-weight:700; font-size:.9rem;
  letter-spacing:.04em; padding:8px 20px; border-radius:var(--kb-r-pill);
  box-shadow:0 10px 20px -12px rgba(23,50,59,.8);
}
body.kb-fiche .cover h1{
  font-family:var(--kb-font-title); font-weight:800;
  font-size:clamp(1.85rem,6.2vw,2.6rem); line-height:1.12;
  color:var(--kb-ink); margin:16px 0 4px;
}
body.kb-fiche .cover .lead{
  color:var(--kb-muted); font-weight:600; font-size:1.08rem;
  max-width:430px; margin:10px auto 20px;
}
body.kb-fiche .floaty{animation:kbFloat 4s ease-in-out infinite}
@keyframes kbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
body.kb-fiche .somm{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
body.kb-fiche .somm button{
  display:flex; align-items:center; gap:10px; text-align:left;
  border-radius:16px; padding:12px 14px; font-size:.94rem; font-weight:700;
  color:var(--kb-ink);
}
body.kb-fiche .somm .n{
  width:28px; height:28px; flex:0 0 auto; border-radius:50%;
  background:var(--lvl-solid); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.82rem;
}
body.kb-fiche .diploma{
  text-align:center; border:5px solid var(--lvl); border-radius:24px;
  padding:26px 20px; background:linear-gradient(180deg,#fff,var(--lvl-soft));
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.7);
}
body.kb-fiche .diploma h2{font-family:var(--kb-font-title); font-weight:800;
  color:var(--lvl-solid); font-size:clamp(1.5rem,5vw,2rem); margin:8px 0}
body.kb-fiche .diploma .name{
  border:0; border-bottom:3px dashed var(--lvl-solid); background:transparent;
  font-family:var(--kb-font-title); font-weight:800; font-size:1.45rem;
  text-align:center; color:var(--kb-ink); outline:none; padding:6px 4px;
}
/* boutons du contenu (Commencer, C'est parti…) */
body.kb-fiche .leaf .btn{min-height:48px; border-radius:var(--kb-r-pill)}

/* ------------------------------- 8. PIED ---------------------------------- */
body.kb-fiche .kb-fiche-footer{
  margin:0; padding:22px 16px 124px;   /* padding : la marge basse serait absorbée */
  background:transparent; border:0; border-top:1px solid rgba(23,50,59,.08);
  color:var(--kb-muted);
}
body.kb-fiche .kb-fiche-footer-inner{
  max-width:760px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:14px; flex-wrap:wrap;
}
body.kb-fiche .kb-fiche-footer .kb-footer-brand,
body.kb-fiche .kb-fiche-footer .kb-footer-brand span{
  display:flex; align-items:center; gap:9px; margin:0;
  font-family:var(--kb-font-title); font-weight:800; color:var(--kb-petrol);
  font-size:1rem;
}
body.kb-fiche .kb-fiche-footer .kb-footer-brand img{width:28px; height:28px}
body.kb-fiche .kb-fiche-footer a{
  color:var(--lvl-solid); font-weight:700; text-decoration:none;
  border-bottom:2px solid transparent; padding:4px 2px;
}
body.kb-fiche .kb-fiche-footer a:hover{border-bottom-color:var(--lvl-solid)}
/* les anciennes têtières décoratives sont remplacées par le jeton du bandeau */
body.kb-fiche .kb-fiche-hero,
body.kb-fiche .kb-fiche-head,
body.kb-fiche .kb-fiche-tete{display:none}

/* --------------------------- 9. ACCESSIBILITÉ ---------------------------- */
body.kb-fiche :focus-visible{
  outline:3px solid var(--lvl-solid); outline-offset:3px;
}
body.kb-fiche .hud .btn:focus-visible,
body.kb-fiche .arrow:focus-visible,
body.kb-fiche .spk:focus-visible{outline-offset:4px}

/* ----------------------------- 10. MOBILE --------------------------------- */
@media (max-width:640px){
  body.kb-fiche{--hud-h:58px; --leaf-r:22px}
  body.kb-fiche .hud{gap:8px; padding:6px 10px}
  body.kb-fiche .hud-masc{width:36px; height:36px}
  body.kb-fiche .hud .brand{gap:6px}
  body.kb-fiche .brand-emoji{font-size:.95rem}
  body.kb-fiche .hud .brand span{
    font-size:.78rem; line-height:1.14; white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:clip;
  }
  body.kb-fiche .hud .btn{min-height:36px; padding:0 10px; font-size:.78rem}
  body.kb-fiche .stars{min-height:36px; padding:0 10px; font-size:.82rem; gap:4px}
  body.kb-fiche .book{margin:18px auto 150px; padding:0 10px}
  body.kb-fiche .book::before,body.kb-fiche .book::after{display:none}
  body.kb-fiche .leaf{padding:24px 16px 28px}
  body.kb-fiche .consigne{padding:12px 14px; gap:11px; margin-bottom:18px}
  body.kb-fiche .spk{width:44px; height:44px; font-size:1.2rem}
  body.kb-fiche .tile{min-width:76px; height:76px; font-size:2.1rem; border-radius:18px}
  body.kb-fiche .numbtn{width:72px; height:72px; font-size:2rem; border-radius:18px}
  body.kb-fiche .mtok{min-width:70px; height:70px; font-size:1.9rem}
  body.kb-fiche .grid{gap:9px}
  body.kb-fiche .match{gap:16px}
  body.kb-fiche .nav{gap:10px; padding:8px 12px;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  body.kb-fiche .arrow{width:46px; height:46px; min-width:46px; font-size:1.25rem}
  body.kb-fiche .pmid{min-width:96px}
  body.kb-fiche .progress{width:96px}
  body.kb-fiche .kb-fiche-footer{margin:0; padding:18px 12px 104px}
  body.kb-fiche .kb-fiche-footer-inner{justify-content:center; text-align:center}
}
@media (max-width:380px){
  body.kb-fiche .hud .brand span{font-size:.72rem}
  body.kb-fiche .tile{min-width:66px; height:66px; font-size:1.85rem}
  body.kb-fiche .numbtn{width:64px; height:64px; font-size:1.75rem}
}

/* ---------------------- 11. MOUVEMENT RÉDUIT ------------------------------ */
@media (prefers-reduced-motion:reduce){
  body.kb-fiche *,
  body.kb-fiche *::before,
  body.kb-fiche *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  body.kb-fiche .floaty,
  body.kb-fiche .leaf.flip,
  body.kb-fiche .stamp.show{animation:none}
  body.kb-fiche .confetti{display:none}
}

/* ------------------- 12. LA MASCOTTE CÉLÈBRE LA RÉUSSITE ------------------ */
/* Injectée par win() : le guide du niveau surgit à côté du message .fb,
   félicite avec sa personnalité, puis s'efface en douceur.
   Transform/opacity uniquement ; la section 11 fige tout en mouvement réduit. */
body.kb-fiche .kb-cheer{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:10px auto 0; pointer-events:none;
  animation:kbCheerIn .3s cubic-bezier(.34,1.4,.44,1) both;
}
body.kb-fiche .kb-cheer img{
  width:74px; height:auto; display:block; flex:0 0 auto;
  filter:drop-shadow(0 8px 10px rgba(23,50,59,.25));
}
body.kb-fiche .kb-cheer-bulle{
  position:relative; max-width:250px; background:#fff;
  border:2px solid var(--lvl-line); border-radius:16px 16px 16px 5px;
  padding:9px 14px; text-align:left;
  font-family:var(--kb-font-body,'Nunito'); font-weight:700; font-size:.98rem;
  line-height:1.35; color:var(--kb-ink);
  box-shadow:0 12px 24px -14px rgba(23,50,59,.45);
}
body.kb-fiche .kb-cheer-bulle::before{
  content:""; position:absolute; left:-8px; bottom:10px; width:12px; height:12px;
  background:#fff; border-left:2px solid var(--lvl-line);
  border-bottom:2px solid var(--lvl-line);
  border-radius:0 0 0 4px; transform:skewY(22deg) rotate(45deg);
}
body.kb-fiche .kb-cheer--out{opacity:0; transition:opacity .45s ease}
@keyframes kbCheerIn{from{opacity:0; transform:scale(.6)}to{opacity:1; transform:scale(1)}}
@media (max-width:640px){
  body.kb-fiche .kb-cheer img{width:64px}
  body.kb-fiche .kb-cheer-bulle{max-width:210px; font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  body.kb-fiche .kb-cheer{animation:none}
}