/* =============================================================
   Lingala Facile — feuille de style principale
   Palette : couleurs du drapeau RDC (bleu, or, rouge) mêlées à des
   tons terre inspirés des tissus kuba (raffia, terracotta, ocre).
   Chaleureux et joueur pour un enfant dès 9 ans, mais soigné.
   Motifs géométriques discrets, formes rondes, animations sobres.
   ============================================================= */

/* -------------------- 0. Police de titres -------------------- */
/* Andika (SIL, licence OFL) : police conçue pour l'alphabétisation
   multilingue en Afrique. Ronde et chaleureuse, elle couvre ɛ ɔ ŋ et
   les tons du lingala. Servie en local (medias/polices/) : compatible
   CSP stricte, aucun appel extérieur. */
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/medias/polices/andika-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/medias/polices/andika-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-030F, U+1D00-1DBF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------- 1. Variables -------------------- */
:root {
  /* Drapeau */
  --bleu:        #0a6ee0;
  --bleu-clair:  #e6f0fb;
  --indigo:      #123a63;   /* héros */
  --nuit:        #0c2340;   /* fonds les plus profonds, pied */
  --or:          #f2b705;
  --or-fonce:    #9c6f08;   /* or lisible en texte sur fond clair */
  --rouge:       #ce1126;
  --rouge-fonce: #a50d1e;

  /* Terre (tissus kuba) */
  --terre:       #c15a34;   /* terracotta */
  --ocre:        #e0973f;
  --raffia:      #f5ead7;   /* fond de page, chaud */
  --sable:       #ecdfc6;
  --blanc-chaud: #fffdf8;   /* cartes, sections claires */

  /* Encre */
  --encre:       #2c2117;   /* texte, brun chaud */
  --encre-doux:  #6d5d49;
  --titre:       #14304f;   /* titres, indigo du drapeau */
  --bord:        #e6d8bd;
  --carte-vive:  #fff;                        /* champs et touches (plus clairs que les cartes) */
  --entete-fond: rgba(245, 234, 215, .9);     /* voile de l'en-tête collant */

  --r-s: 10px;  --r-m: 18px;  --r-l: 28px;
  /* Ombres en deux couches : contact net + halo diffus (plus de relief) */
  --ombre-s: 0 1px 2px rgba(44, 33, 23, .07), 0 4px 14px rgba(44, 33, 23, .08);
  --ombre-m: 0 6px 14px rgba(44, 33, 23, .10), 0 24px 48px rgba(44, 33, 23, .17);
  --largeur: 1120px;
  --entete-h: 70px;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titres: 'Andika', var(--police);
  --transi: .25s cubic-bezier(.4, 0, .2, 1);
  --rebond: cubic-bezier(.22, .9, .35, 1.08);   /* sortie légèrement élastique */
  --frise: url("/medias/frise.svg");
}

/* -------------------- 1b. Mode sombre --------------------
   Le thème suit le réglage de l'appareil. On ne change QUE les jetons :
   les fonds clairs (raffia, sable, cartes) deviennent la matière nuit du
   site, les encres s'éclaircissent ; l'or, la terre et le drapeau restent.
   Le héros, les bandeaux et le pied sont déjà sombres : ils ne bougent pas. */
@media (prefers-color-scheme: dark) {
  :root {
    --raffia:      #0e1c30;
    --sable:       #22344f;
    --blanc-chaud: #16283f;
    --carte-vive:  #1d3251;
    --entete-fond: rgba(12, 26, 45, .88);
    --bleu-clair:  #163150;
    --or-fonce:    #f7c73e;   /* l'or redevient lisible tel quel sur fond sombre */
    --encre:       #e7ecf6;
    --encre-doux:  #a9b6cc;
    --titre:       #ecf1fb;
    --bord:        #30455f;
    --ombre-s: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .35);
    --ombre-m: 0 6px 14px rgba(0, 0, 0, .42), 0 24px 48px rgba(0, 0, 0, .5);
  }
}

/* -------------------- 2. Base -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 106.25%; overflow-x: clip; } /* 17px */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--police);
  color: var(--encre);
  background: var(--raffia);
  line-height: 1.7;
  /* « clip » barre le débordement horizontal SANS faire du body un conteneur
     de défilement : sinon l'en-tête sticky décroche sur mobile (bug dj-shan). */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
/* L'attribut hidden doit toujours l'emporter : sans ça, une règle
   display: (ex. .btn inline-flex, .mot-detail grid) le neutralise et
   l'élément reste visible. Règle unique, plutôt qu'un correctif par cas. */
[hidden] { display: none !important; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 {
  line-height: 1.14; font-weight: 700; color: var(--titre);
  font-family: var(--police-titres); text-wrap: balance; letter-spacing: -.01em;
}
p { text-wrap: pretty; }
::selection { background: var(--or); color: var(--nuit); }

.enveloppe { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

.sr-uniquement {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--nuit); color: #fff; padding: .6rem 1rem;
  border-radius: var(--r-s); transition: top var(--transi);
}
.lien-evitement:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; border-radius: 4px; }
.i { width: 1.4em; height: 1.4em; fill: currentColor; }

/* -------------------- 3. En-tête & navigation -------------------- */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: var(--entete-fond);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
  transition: box-shadow var(--transi), background var(--transi);
}
.entete.est-compact { box-shadow: var(--ombre-s); background: rgba(245, 234, 215, .97); }
.entete-contenu {
  max-width: var(--largeur); margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  min-height: var(--entete-h);
  display: flex; align-items: center; gap: 1rem;
}
.entete-liseret {
  display: block; height: 4px;
  background: linear-gradient(90deg, var(--bleu) 0 34%, var(--or) 34% 66%, var(--rouge) 66% 100%);
}

.marque { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--titre); }
.marque:hover { text-decoration: none; }
.marque-drapeau { border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.28); flex: none; }
.marque-nom { font-size: 1.3rem; letter-spacing: -.01em; white-space: nowrap; font-family: var(--police-titres); font-weight: 700; }
.marque-accent { color: var(--terre); }

.nav { display: flex; align-items: center; gap: .85rem; }
.nav-tete { display: none; }   /* n'apparaît que dans le tiroir mobile */
/* Le choix de langue vit dans l'en-tête et se cale à droite (avant le burger). */
.langues { margin-left: auto; }
.nav-liste { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
@media (min-width: 1025px) {
  /* La liste se centre par rapport à la PAGE (marque à gauche, langues à droite). */
  .entete-contenu { position: relative; }
  .nav-liste { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex-wrap: nowrap; }
}
.nav-liste a {
  display: inline-block; padding: .42rem .5rem; border-radius: var(--r-s);
  color: var(--encre); font-weight: 600; font-size: .9rem; position: relative; white-space: nowrap;
}
.nav-liste a:hover { background: var(--bleu-clair); text-decoration: none; }
.nav-liste a[aria-current="page"] { color: var(--bleu); }
.nav-liste a::after {   /* souligné qui pousse depuis la gauche */
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .12rem;
  height: 3px; background: var(--or); border-radius: 3px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--transi);
}
.nav-liste a:hover::after,
.nav-liste a[aria-current="page"]::after { transform: scaleX(1); }

/* Hubs à sous-menu (Découvrir / Apprendre / S'entraîner) */
.nav-groupe { position: relative; }
.nav-hub {
  display: inline-flex; align-items: center; gap: .3rem; position: relative;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  padding: .42rem .5rem; border-radius: var(--r-s);
  color: var(--encre); font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.nav-hub:hover { background: var(--bleu-clair); }
.nav-hub .nav-chevron { width: .95em; height: .95em; flex: none; transition: transform var(--transi); }
.nav-groupe.est-ouvert > .nav-hub .nav-chevron { transform: rotate(180deg); }
.nav-hub::after {   /* même souligné or que les liens */
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .12rem;
  height: 3px; background: var(--or); border-radius: 3px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--transi);
}
.nav-hub:hover::after,
.nav-hub.est-actif::after { transform: scaleX(1); }
.nav-hub.est-actif { color: var(--bleu); }

@media (min-width: 1025px) {
  .nav-sous {
    position: absolute; top: calc(100% + .45rem); left: 0; z-index: 110;
    min-width: 200px; margin: 0; padding: .45rem; list-style: none;
    background: var(--blanc-chaud); border: 1px solid var(--bord);
    border-radius: var(--r-m); box-shadow: var(--ombre-m);
    display: none;
  }
  .nav-sous::before {   /* pont invisible : le survol ne se perd pas entre le hub et le menu */
    content: ""; position: absolute; left: 0; right: 0; top: -.55rem; height: .55rem;
  }
  .nav-groupe.est-ouvert .nav-sous,
  .nav-groupe:hover .nav-sous { display: block; animation: monterCourt .22s ease both; }
  .nav-sous a { display: block; padding: .5rem .7rem; }
  .nav-sous a::after { display: none; }   /* pas de souligné dans le menu déroulant */
  .nav-sous a[aria-current="page"] { background: var(--bleu-clair); }
}

.langues { display: inline-flex; gap: .2rem; padding: .22rem; background: var(--sable); border-radius: 999px; }
.langue {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-weight: 700; font-size: .8rem; color: var(--encre-doux);
  padding: .32rem .58rem; border-radius: 999px; transition: var(--transi);
}
.langue:hover { color: var(--titre); }
.langue.est-actif { background: var(--blanc-chaud); color: var(--terre); box-shadow: var(--ombre-s); animation: pop .3s var(--rebond); }

.burger {
  display: none; border: 1px solid var(--bord);
  background: var(--blanc-chaud); border-radius: var(--r-s); padding: .38rem;
  cursor: pointer; color: var(--titre);
}
.burger .i-fermer { display: none; }
.burger[aria-expanded="true"] .i-menu { display: none; }
.burger[aria-expanded="true"] .i-fermer { display: block; }
.nav-voile {
  position: fixed; inset: 0; z-index: 90; background: rgba(12, 35, 64, .45);
  backdrop-filter: blur(2px);
  animation: fondu .3s ease both;
}

/* -------------------- 4. Boutons -------------------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px; font-weight: 700;
  font-family: var(--police-titres);
  border: 2px solid transparent; cursor: pointer; font-size: 1.02rem;
  transition: transform var(--transi), box-shadow var(--transi), background var(--transi);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn::after {   /* reflet qui balaie le bouton au survol */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-180%) skewX(-18deg); transition: transform .7s ease;
}
.btn:hover::after { transform: translateX(320%) skewX(-18deg); }
.btn-primaire { background: var(--rouge); color: #fff; box-shadow: 0 8px 20px rgba(206, 17, 38, .3); }
.btn-primaire:hover { background: var(--rouge-fonce); color: #fff; }
.btn-or { background: var(--or); color: var(--nuit); box-shadow: 0 8px 20px rgba(242, 183, 5, .32); }
.btn-or:hover { background: #ffc721; color: var(--nuit); }
.btn-fantome { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-fantome:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn .i { width: 1.15em; height: 1.15em; }

/* -------------------- 5. Héros -------------------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background-color: var(--nuit);
  /* Superposition (du haut vers le bas) : lueur or, voile indigo dégradé
     (dense à gauche pour la lisibilité, clair à droite pour révéler le
     drapeau), puis le DRAPEAU RDC en filigrane sur la droite. */
  background-image:
    radial-gradient(820px 480px at 92% -15%, rgba(242,183,5,.20), transparent 62%),
    linear-gradient(102deg, rgba(10,30,56,.97) 40%, rgba(16,52,92,.74) 70%, rgba(16,52,92,.55) 100%),
    url("/medias/drapeau-rdc.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, right -30px center;
  background-size: auto, cover, auto 128%;
}
.hero::before {   /* texture kuba qui dérive lentement, par-dessus le drapeau */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/medias/motif-kuba.svg") 0 0/48px repeat;
  opacity: .1; animation: deriveMotif 60s linear infinite;
}
.hero-contenu { position: relative; padding-block: clamp(2.6rem, 8vw, 5.5rem) clamp(3rem, 8vw, 5rem); max-width: 730px; }
.hero-surtitre {
  display: inline-block; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-size: .82rem; color: var(--nuit); background: var(--or);
  padding: .34rem .9rem; border-radius: 999px; margin-bottom: 1.2rem;
  box-shadow: 0 4px 14px rgba(242,183,5,.3);
  animation: monter .6s .05s both;
}
.hero h1 {
  color: #fff; font-size: clamp(2.2rem, 6.2vw, 3.7rem); margin: 0 0 1rem;
  text-shadow: 0 2px 22px rgba(6, 20, 40, .45);   /* décolle le titre du fond */
  animation: monter .7s .16s both;
}
.hero-sous-titre { font-size: clamp(1.08rem, 2.4vw, 1.32rem); color: #e7eef7; margin: 0 0 2rem; animation: monter .7s .3s both; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; animation: monter .7s .44s both; }
.hero::after {   /* hem tissé qui glisse doucement */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background: var(--frise) repeat-x; background-size: auto 16px;
  animation: deriveFrise 26s linear infinite;
}
/* Parallaxe douce au défilement : le texte du héros reste un instant en
   arrière pendant que le fond monte (profondeur). CSS pur, appliqué
   seulement si le navigateur le gère et si les animations sont permises. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-contenu {
      animation: heroRecul linear both;
      animation-timeline: scroll();
      animation-range: 0 90vh;
    }
  }
}

/* -------------------- 6. Sections génériques -------------------- */
.section { padding: clamp(3rem, 8vw, 5rem) 0; position: relative; }
.section-alt { background: var(--blanc-chaud); }
.section-tete { max-width: 640px; margin-bottom: 2.5rem; }
.section-tete.centre { margin-inline: auto; text-align: center; }
.section-tete.centre::before {   /* petite frise tissée au-dessus du titre centré */
  content: ""; display: block; width: 52px; height: 14px; margin: 0 auto .9rem;
  background: var(--frise) repeat-x; background-size: auto 14px;
}
.section h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 .6rem; }
.section-tete p { color: var(--encre-doux); font-size: 1.1rem; margin: 0; }

/* Bandeau vision */
.vision { background: linear-gradient(180deg, #fbf3e3, var(--raffia)); }
.vision-grille { display: grid; gap: 1.5rem; }
.vision-texte p { font-size: 1.12rem; color: var(--encre); margin: 0 0 1rem; }
.vision-texte p:first-of-type {
  font-size: 1.28rem; color: var(--titre); font-weight: 600;
  border-left: 5px solid var(--terre); padding-left: 1rem;
}

/* -------------------- 7. Cartes (piliers) -------------------- */
.grille-cartes { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
.carte {
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l);
  border-top: 5px solid var(--ocre); padding: 1.7rem;
  box-shadow: var(--ombre-s);
  transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi);
  will-change: transform;   /* inclinaison 3D pilotée par js/main.js (data-tilt) */
}
.carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-m); }
.grille-cartes .carte:nth-child(1) { border-top-color: var(--terre); }
.grille-cartes .carte:nth-child(2) { border-top-color: var(--ocre); }
.grille-cartes .carte:nth-child(3) { border-top-color: var(--bleu); }
.carte-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; font-weight: 700; font-size: 1.3rem;
  font-family: var(--police-titres);
  color: #fff; background: var(--ocre); margin-bottom: 1rem;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), 0 6px 14px rgba(44,33,23,.18);
}
.grille-cartes .carte:nth-child(1) .carte-num { background: var(--terre); }
.grille-cartes .carte:nth-child(3) .carte-num { background: var(--bleu); }
.carte h3 { font-size: 1.3rem; margin: 0 0 .5rem; }
.carte p { margin: 0; color: var(--encre-doux); }

/* -------------------- 8. Langues nationales -------------------- */
.grille-langues { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.tuile-langue {
  position: relative; background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-radius: var(--r-m); padding: 1.4rem 1.2rem; text-align: center;
  transition: transform var(--transi), box-shadow var(--transi);
  will-change: transform;   /* inclinaison 3D pilotée par js/main.js (data-tilt) */
}
.tuile-langue:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); }
.tuile-langue.est-prioritaire {
  border-color: var(--or); background: linear-gradient(180deg, #fff8e8, var(--blanc-chaud));
  box-shadow: 0 0 0 3px rgba(242,183,5,.28);
}
.tuile-langue h3 { font-size: 1.2rem; margin: .3rem 0 0; }
.badge {
  display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; padding: .24rem .7rem; border-radius: 999px;
}
.badge-or { background: var(--or); color: var(--nuit); }
.badge-doux { background: var(--sable); color: var(--encre-doux); }

/* -------------------- 9. Appel final -------------------- */
.cta-final { text-align: center; }
.cta-carte {
  background:
    url("/medias/motif-kuba.svg") 0 0/48px repeat,
    linear-gradient(150deg, #17456f, var(--nuit));
  color: #fff; border-radius: var(--r-l); padding: clamp(2.2rem, 6vw, 3.6rem);
  position: relative; overflow: hidden; box-shadow: var(--ombre-m);
}
.cta-carte::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(23,69,111,.86), rgba(12,35,64,.92)); }
.cta-carte > * { position: relative; }
.cta-carte h2 { color: #fff; }
.cta-carte p { color: #e7eef7; max-width: 490px; margin: .6rem auto 1.7rem; }

/* -------------------- 10. Pied de page (resserré et centré) -------------------- */
/* Colonne étroite centrée : marque, slogan, liens utiles, puis ligne légale.
   La navigation et le choix de langue restent dans l'en-tête. */
.pied { position: relative; background: var(--nuit); color: #c9d6e8; margin-top: 2rem; }
.pied::before {   /* frise tissée en haut du pied */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px;
  background: var(--frise) repeat-x; background-size: auto 16px; transform: scaleY(-1);
}
.pied-contenu {
  max-width: 680px; margin-inline: auto;
  padding: 2.7rem clamp(1rem, 4vw, 2rem) 1.4rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem;
}
.pied .marque-nom { color: #fff; }
.pied .marque-accent { color: var(--ocre); }
.pied-slogan { color: #aebfd6; margin: 0; max-width: 44ch; }
.pied-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: .4rem;
}
.pied-nav a,
.pied-nav .pied-lien { color: #c9d6e8; font-weight: 600; font-size: .95rem; }
.pied-nav a:hover,
.pied-nav .pied-lien:hover { color: #fff; }
/* Boutons d'action (Partager, Installer) rendus comme des liens. */
.pied-lien { background: none; border: 0; margin: 0; padding: 0; font-family: inherit; cursor: pointer; }
.pied-bas {
  border-top: 1px solid rgba(255,255,255,.12);
  max-width: 680px; margin-inline: auto; padding: 1.1rem clamp(1rem, 4vw, 2rem);
  display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; align-items: center;
  /* Copyright à gauche, liens légaux à droite, sur la même ligne. */
  justify-content: space-between;
}
@media (max-width: 560px) {
  .pied-bas { justify-content: center; }   /* empilé et centré sur mobile */
}
.pied-copyright { margin: 0; font-size: .86rem; color: #9fb1cb; }
.pied-bas-liens { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; }
.pied-bas-liens a { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; color: #c9d6e8; }
.pied-bas-liens a:hover { color: #fff; }

/* -------------------- 11. Apparition au scroll -------------------- */
[data-apparait] { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
[data-apparait].est-visible { opacity: 1; transform: none; }
.js [data-apparait] { will-change: opacity, transform; }

/* -------------------- 12. Responsive -------------------- */
@media (min-width: 560px) {
  .grille-langues { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 760px) {
  .grille-cartes { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .burger { display: inline-flex; }
  /* Le tiroir : un panneau nuit/indigo, même matière que les bannières
     (drapeau en filigrane, texture kuba), accents or. Sombre et net. */
  .nav {
    position: fixed; top: 0; right: 0; z-index: 95;
    height: 100dvh; width: min(84vw, 340px);
    margin: 0; padding: 0 0 2rem;
    flex-direction: column; align-items: stretch; gap: 0;
    color: #eaf1fb;
    background-color: var(--nuit);
    background-image:
      radial-gradient(560px 300px at 118% -8%, rgba(242,183,5,.20), transparent 60%),
      linear-gradient(158deg, rgba(10,30,56,.98) 40%, rgba(13,38,68,.94) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: auto, cover;
    border-left: 1px solid rgba(242,183,5,.28);
    box-shadow: -16px 0 42px rgba(6,20,40,.42);
    transform: translateX(105%); transition: transform var(--transi);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav::before {   /* texture kuba en filigrane, par-dessus le drapeau */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: url("/medias/motif-kuba.svg") 0 0/46px repeat; opacity: .06;
  }
  .menu-ouvert .nav { transform: translateX(0); }
  html:has(body.menu-ouvert) { overflow: hidden; }

  /* En-tête du tiroir : la marque, soulignée d'une frise tissée. */
  .nav-tete {
    position: relative; display: flex; align-items: center; gap: .55rem;
    padding: calc(var(--entete-h) - .5rem) 1.4rem 1.25rem;
  }
  .nav-tete .marque-nom { color: #fff; font-size: 1.2rem; }
  .nav-tete .marque-accent { color: var(--or); }
  .nav-tete::after {
    content: ""; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0; height: 12px;
    background: var(--frise) repeat-x; background-size: auto 12px; opacity: .85;
  }

  .nav-liste { position: relative; flex-direction: column; gap: .12rem; padding: 1rem .8rem; }

  /* Liens (Accueil, Bible et sous-liens) : des lignes tapables, chevron or. */
  .nav-liste a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .8rem .9rem; font-size: 1.06rem; font-weight: 600;
    color: #eaf1fb; border-radius: var(--r-s);
    transition: background .18s, color .18s;
  }
  .nav-liste a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
  .nav-liste a::after {   /* le souligné desktop devient un chevron discret */
    content: "›"; position: static; transform: none;
    width: auto; height: auto; background: none;
    color: rgba(255,255,255,.38); font-size: 1.25rem; line-height: 1; font-weight: 400;
  }
  .nav-liste a[aria-current="page"] {
    background: rgba(242,183,5,.15); color: var(--or); font-weight: 800;
  }
  .nav-liste a[aria-current="page"]::after { color: var(--or); }

  /* Étiquettes de groupe (Découvrir / Apprendre / S'entraîner), dorées. */
  .nav-groupe { position: static; }
  .nav-hub {
    pointer-events: none; width: 100%; background: transparent;
    padding: 1.15rem .9rem .35rem; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .13em;
    color: var(--or); font-weight: 800;
  }
  .nav-hub .nav-chevron { display: none; }
  .nav-hub::after { display: none; }
  /* Le groupe de la page courante reste doré (pas de bleu illisible ici). */
  .nav-hub.est-actif { color: var(--or); }
  /* Les sous-liens s'alignent le long d'un fil doré. */
  .nav-sous {
    list-style: none; margin: 0 0 0 1.3rem; padding: 0 0 0 .35rem;
    border-left: 2px solid rgba(242,183,5,.25);
  }
  .nav-sous a { font-size: 1.04rem; }

  /* Les langues restent dans l'en-tête (jamais dans le tiroir) : on les
     resserre pour tenir à côté de la marque et du burger. */
  .entete-contenu { gap: .5rem; }
  .langues { gap: .1rem; padding: .18rem; }
  .langue { padding: .3rem .42rem; font-size: .74rem; }
  .marque-nom { font-size: 1.15rem; }

  /* À l'ouverture, l'en-tête puis les entrées montent en cascade. */
  .menu-ouvert .nav-tete { animation: monterCourt .34s ease backwards; }
  .menu-ouvert .nav-liste > li { animation: monterCourt .34s ease backwards; }
  .menu-ouvert .nav-liste > li:nth-child(1) { animation-delay: .06s; }
  .menu-ouvert .nav-liste > li:nth-child(2) { animation-delay: .10s; }
  .menu-ouvert .nav-liste > li:nth-child(3) { animation-delay: .14s; }
  .menu-ouvert .nav-liste > li:nth-child(4) { animation-delay: .18s; }
  .menu-ouvert .nav-liste > li:nth-child(5) { animation-delay: .22s; }
}

@media (min-width: 1025px) {
  .nav-voile { display: none !important; }
}

@media (max-width: 640px) {
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  /* Drapeau plus petit, dans le coin bas-droit, loin du texte */
  .hero {
    background-position: center, center, right -16px bottom -12px;
    background-size: auto, cover, auto 52%;
  }
}

/* -------------------- 12a. Bannière de page intérieure -------------------- */
/* Petit bandeau indigo commun à toutes les pages hors accueil : même
   matière que le héros (motif kuba + hem tissé), en plus court. */
.banniere-page {
  position: relative; overflow: hidden; color: #fff;
  background-color: var(--nuit);
  /* Même montage que le héros de l'accueil : lueur or, voile indigo dense
     à gauche (lisibilité) qui s'éclaircit à droite, drapeau RDC en filigrane. */
  background-image:
    radial-gradient(640px 320px at 88% -30%, rgba(242,183,5,.16), transparent 62%),
    linear-gradient(102deg, rgba(10,30,56,.97) 40%, rgba(16,52,92,.74) 70%, rgba(16,52,92,.55) 100%),
    url("/medias/drapeau-rdc.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  /* Le bord gauche du drapeau s'aligne sur la fin du segment bleu du
     liseret (34 % de la largeur), comme sur le héros de l'accueil.
     Calé vers le haut pour montrer l'étoile. */
  background-position: center, center, right -30px top -50px;
  background-size: auto, cover, calc(66% + 30px) auto;
}
.banniere-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/medias/motif-kuba.svg") 0 0/48px repeat;
  opacity: .09; animation: deriveMotif 60s linear infinite;
}
.banniere-page::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--frise) repeat-x; background-size: auto 14px;
  animation: deriveFrise 26s linear infinite;
}
@media (max-width: 640px) {
  /* Bannière étroite et haute : le drapeau remplit le fond (cover) pour
     rejoindre le liseret en haut, comme sur desktop où il couvre le côté
     droit. Le voile passe à l'HORIZONTALE (90°) : en 102°, le coin
     haut-droite d'une bannière presque carrée tombait dans la zone dense
     et le drapeau y restait sombre. Dense à gauche (texte lisible). */
  .banniere-page {
    background-image:
      radial-gradient(640px 320px at 88% -30%, rgba(242,183,5,.16), transparent 62%),
      linear-gradient(90deg, rgba(10,30,56,.97) 30%, rgba(16,52,92,.72) 64%, rgba(16,52,92,.52) 100%),
      url("/medias/drapeau-rdc.svg");
    background-position: center, center, right center;
    background-size: auto, cover, cover;
  }
}
.banniere-contenu { position: relative; padding-block: clamp(2rem, 5vw, 3.2rem) clamp(2.2rem, 5vw, 3.4rem); max-width: 730px; }
.banniere-page h1 {
  color: #fff; font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 0 0 .6rem;
  text-shadow: 0 2px 18px rgba(6, 20, 40, .45);
  animation: monter .6s .05s both;
}
.banniere-intro { font-size: clamp(1.02rem, 2.2vw, 1.18rem); color: #e7eef7; margin: 0; max-width: 620px; animation: monter .6s .18s both; }

/* -------------------- 12b. Dictionnaire -------------------- */
.dico-tete { padding: clamp(1.6rem, 4vw, 2.4rem) 0 1.5rem; animation: monter .6s .28s both; }
.dico-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .6rem; }
.dico-champ { position: relative; flex: 1 1 260px; max-width: 520px; }
.dico-tri-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--encre-doux); white-space: nowrap; }
.dico-select {
  font: inherit; font-weight: 600; padding: .7rem 2.4rem .7rem 1rem;
  border: 2px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud);
  color: var(--encre); cursor: pointer; appearance: none;
  /* Une option longue (nom de thème, autre langue) ne casse pas la ligne :
     le select se borne et coupe le texte au besoin. */
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d5d49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.dico-select:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(10,110,224,.15); }
.dico-loupe { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 1.2em; height: 1.2em; color: var(--encre-doux); pointer-events: none; }
#dico-recherche, #bible-recherche {
  width: 100%; font: inherit; padding: .8rem 1rem .8rem 2.7rem;
  border: 2px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud);
  color: var(--encre); transition: border-color var(--transi), box-shadow var(--transi);
}
#dico-recherche:focus, #bible-recherche:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(10,110,224,.15); }

.dico-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between; align-items: baseline; margin: 1.2rem 0 .2rem; color: var(--encre-doux); font-size: .95rem; }
.dico-depuis strong { color: var(--terre); }
.dico-compteur { font-weight: 700; color: var(--titre); }
.dico-note { margin: 0; font-size: .88rem; color: var(--encre-doux); font-style: italic; }

/* Liste compacte : chaque mot est une ligne qui se déplie */
.dico-liste { display: grid; gap: .55rem; grid-template-columns: 1fr; align-items: start; }
.mot {
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m);
  box-shadow: var(--ombre-s); overflow: hidden;
  transition: border-color var(--transi), box-shadow var(--transi);
  animation: monterCourt .3s ease backwards;   /* les lignes entrent en fondu */
}
.mot:nth-child(1) { animation-delay: .02s; }
.mot:nth-child(2) { animation-delay: .05s; }
.mot:nth-child(3) { animation-delay: .08s; }
.mot:nth-child(4) { animation-delay: .11s; }
.mot:nth-child(5) { animation-delay: .14s; }
.mot:nth-child(6) { animation-delay: .17s; }
.mot:nth-child(7) { animation-delay: .20s; }
.mot:nth-child(8) { animation-delay: .23s; }
.mot:hover { border-color: var(--ocre); box-shadow: var(--ombre-m); }
.mot.est-ouvert { border-color: var(--ocre); }
.mot-tete { display: flex; align-items: center; gap: .6rem; }
.mot-toggle {
  flex: 1 1 auto; display: flex; align-items: center; gap: .7rem; min-width: 0;
  border: 0; background: transparent; cursor: pointer; font: inherit; text-align: left;
  padding: .8rem 1rem; color: var(--titre);
}
.mot-toggle:hover { background: rgba(224,151,63,.09); }
.mot-chevron { width: 1.05em; height: 1.05em; color: var(--ocre); flex: none; transition: transform var(--transi); }
.mot-toggle[aria-expanded="true"] .mot-chevron { transform: rotate(180deg); }
.mot-ref { font-weight: 800; font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mot-cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #b09a7d; flex: none; }
/* Pastille de niveau : vert Débutant, or Intermédiaire, terre Avancé. */
.mot-niveau {
  flex: none; width: .58rem; height: .58rem; border-radius: 50%;
  background: var(--or); box-shadow: 0 0 0 2px rgba(255, 255, 255, .6);
}
.mot-niveau--1 { background: #1f8a4c; }
.mot-niveau--2 { background: var(--or); }
.mot-niveau--3 { background: var(--terre); }
/* Légende des niveaux, sous la barre d'outils. */
.dico-legende { display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: center; margin: .1rem 0 0; font-size: .82rem; color: var(--encre-doux); }
.dico-legende-item { display: inline-flex; align-items: center; gap: .4rem; }
.dico-legende .mot-niveau { box-shadow: none; }
/* Astuce d'usage : encadré qui montre bien qu'on ouvre un mot pour les
   autres langues. Même couleur (ocre) que le chevron et la pastille
   « +3 langues » des lignes, pour que le geste se lise d'un coup d'œil. */
.dico-astuce {
  display: flex; align-items: center; gap: .8rem;
  max-width: 620px; margin: 1.2rem auto 0; padding: .7rem 1.1rem;
  background: rgba(224, 151, 63, .13); border: 1px solid rgba(224, 151, 63, .3);
  border-radius: var(--r-m); box-shadow: var(--ombre-s);
  color: var(--titre); font-size: .95rem; font-weight: 600; line-height: 1.35;
}
.dico-astuce-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; color: #fff;
  background: linear-gradient(150deg, var(--ocre), var(--terre));
  box-shadow: var(--ombre-s);
}
.dico-astuce-ico .i { width: 1.1em; height: 1.1em; animation: nudgeBas 1.8s ease-in-out infinite; }
.mot-phare { display: inline-flex; align-items: center; gap: .5rem; padding-right: .9rem; flex: none; }
.mot-ln { font-weight: 800; color: var(--terre); font-size: 1.08rem; }
/* Dépliage animé : la boîte passe de 0fr à 1fr (hauteur fluide, sans JS de mesure) */
.mot-detail-boite {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.4, 0, .2, 1);
}
.mot.est-ouvert .mot-detail-boite { grid-template-rows: 1fr; }
.mot-detail {
  list-style: none; margin: 0; min-height: 0; overflow: hidden;
  padding: 0 1rem 0 2.7rem; display: grid; gap: .3rem;
  background: rgba(236,223,198,.35); visibility: hidden;
  transition: padding .38s cubic-bezier(.4, 0, .2, 1), visibility .38s;
}
.mot.est-ouvert .mot-detail { padding: .5rem 1rem .9rem 2.7rem; visibility: visible; }
.mot-trad { display: grid; grid-template-columns: 6rem 1fr auto; align-items: center; gap: .6rem; }
.mot-langue { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--encre-doux); }
.mot-val { font-weight: 600; color: var(--encre); }
.dico-avenir { font-size: .9rem; font-style: italic; color: #a99b83; }
.mot-trad--vide .dico-avenir { grid-column: 2 / 4; }
.dico-son {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: var(--bleu-clair); color: var(--bleu); transition: var(--transi);
}
.dico-son:hover { background: var(--or); color: var(--nuit); transform: scale(1.12); box-shadow: 0 4px 12px rgba(242,183,5,.4); }
.dico-son:active { transform: scale(.92); transition-duration: .08s; }
.dico-son .i { width: 1.15em; height: 1.15em; }
.dico-plus-zone { text-align: center; margin-top: 1.6rem; }
.dico-vide {
  text-align: center; color: var(--encre-doux); font-size: 1.05rem;
  padding: 2.5rem 1rem; background: var(--blanc-chaud);
  border: 1px dashed var(--bord); border-radius: var(--r-m);
}
@media (min-width: 760px) { .dico-liste { grid-template-columns: repeat(2, 1fr); } }

/* -------------------- 12c. Méthode -------------------- */
.meth-section h3 { font-size: 1.3rem; margin: 2.2rem 0 .9rem; }
.meth-note { max-width: 640px; margin: 1rem 0 0; font-size: .92rem; font-style: italic; color: var(--encre-doux); }
.meth-texte { max-width: 640px; margin: 0; color: var(--encre); }

/* Cartes de sons (voyelles et paires de consonnes) */
.sons-grille { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
.son-carte {
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m);
  padding: .95rem .7rem .85rem; text-align: center; box-shadow: var(--ombre-s);
  transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi);
}
.son-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); border-color: var(--ocre); }
.son-lettre { display: block; font-family: var(--police-titres); font-size: 1.9rem; line-height: 1.1; color: var(--terre); }
.son-exemple { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .5rem 0 .15rem; font-weight: 700; color: var(--titre); }
.son-gloss { display: block; font-size: .85rem; color: var(--encre-doux); }
.son-astuce { display: block; margin-top: .4rem; font-size: .78rem; font-style: italic; color: var(--encre-doux); }

/* Le duel des tons : mêmes lettres, deux mélodies. La syllabe haute
   s'élève et se colore ; les points dessinent la mélodie sous le mot. */
.tons-duel { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .9rem; margin-top: 1.1rem; }
.tons-vs { align-self: center; font-family: var(--police-titres); font-size: 1.5rem; color: var(--terre); padding: 0 .2rem; }
.ton-carte {
  flex: 1 1 200px; max-width: 290px; display: flex; flex-direction: column; align-items: center; gap: .55rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 4px solid var(--bleu);
  border-radius: var(--r-m); padding: 1.1rem 1rem 1rem; text-align: center; box-shadow: var(--ombre-s);
  transition: transform var(--transi), box-shadow var(--transi);
}
.ton-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); }
.ton-carte--haut { border-top-color: var(--or); }
.ton-badge {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--terre); background: var(--sable); border-radius: 999px; padding: .22rem .7rem;
}
.ton-mot { font-family: var(--police-titres); font-size: 2.1rem; line-height: 1.15; color: var(--titre); }
.ton-syllabe { display: inline-block; }
.ton-syllabe.est-haut { color: var(--terre); transform: translateY(-.14em); }
/* La mélodie : un point par syllabe, posé sur la ligne (ton bas) ou au-dessus (ton haut). */
.ton-piste { display: flex; gap: 1.6rem; align-items: flex-end; height: 24px; padding: 0 .5rem; border-bottom: 2px dotted var(--bord); }
.ton-point { width: 10px; height: 10px; border-radius: 50%; background: var(--bleu); }
.ton-point.est-haut { background: var(--or); transform: translateY(-12px); }
@media (prefers-reduced-motion: no-preference) {
  .ton-point.est-haut { animation: pouls 2.4s ease-in-out infinite; }
  .ton-point.est-haut:nth-child(2) { animation-delay: .5s; }
}

/* Familles de mots (préfixe singulier -> pluriel) */
.classes-grille { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.classe-carte {
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 4px solid var(--ocre);
  border-radius: var(--r-m); padding: 1.15rem 1.2rem 1rem; box-shadow: var(--ombre-s);
  transition: transform var(--transi), box-shadow var(--transi);
}
.classe-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); }
.classes-grille .classe-carte:nth-child(odd) { border-top-color: var(--terre); }
.classe-prefixe { font-family: var(--police-titres); font-size: 1.35rem; color: var(--bleu); }
.classe-qui { margin: .15rem 0 .7rem; font-size: .88rem; color: var(--encre-doux); }
.paire { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; padding: .4rem 0; border-top: 1px dashed var(--bord); }
.paire-sg { font-weight: 700; color: var(--titre); }
.paire-fleche { color: var(--ocre); font-weight: 700; }
.paire-pl { font-weight: 800; color: var(--terre); }
.paire-gloss { margin-left: auto; font-size: .85rem; color: var(--encre-doux); }

/* Conjugaison : une syllabe par personne */
.conj-grille { display: grid; gap: .5rem; grid-template-columns: 1fr; max-width: 620px; margin-top: 1rem; }
.conj-ligne {
  display: grid; grid-template-columns: 3.4rem auto 1fr auto; align-items: center; gap: .7rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m);
  padding: .45rem .75rem; box-shadow: var(--ombre-s);
}
.conj-pref { font-family: var(--police-titres); font-weight: 700; color: var(--bleu); }
.conj-forme { font-weight: 800; color: var(--terre); }
.conj-gloss { font-size: .92rem; color: var(--encre-doux); }

/* Les temps (maintenant, d'habitude, passé, futur) */
.temps-grille { display: grid; gap: .5rem; grid-template-columns: 1fr; max-width: 720px; margin-top: 1rem; }
.temps-ligne {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m);
  padding: .55rem .8rem; box-shadow: var(--ombre-s);
}
.temps-forme { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; color: var(--terre); }
.temps-schema {
  font-size: .78rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px;
  background: var(--sable); color: var(--encre-doux); white-space: nowrap;
}
.temps-gloss { flex: 1 1 240px; font-size: .93rem; color: var(--encre-doux); }

/* Les petites briques (te, ya, na) réutilisent .grille-cartes/.carte */
.brique-mot { font-size: 1.5rem; color: var(--terre); }
.brique-exemple { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--titre); margin: 0 0 .5rem; }

/* Les pronoms (moi, toi, lui…), les questions et les possessifs : des
   rangées légères qui se replient sur écran étroit (comme les temps). */
.pron-grille, .quest-grille, .poss-grille {
  display: grid; gap: .5rem; grid-template-columns: 1fr; max-width: 720px; margin-top: 1rem;
}
.pron-ligne, .quest-ligne, .poss-ligne {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .7rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m);
  padding: .55rem .8rem; box-shadow: var(--ombre-s);
}
.pron-mot, .quest-mot, .poss-forme { font-family: var(--police-titres); font-weight: 800; color: var(--terre); }
.pron-fleche { color: var(--encre-doux); }
.pron-pref { font-family: var(--police-titres); font-weight: 700; color: var(--bleu); }
.pron-forme { font-weight: 700; color: var(--titre); }
.pron-gloss, .quest-gloss, .poss-gloss { font-size: .92rem; color: var(--encre-doux); }
.pron-gloss { margin-left: auto; }
.poss-ex { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--titre); margin-left: auto; }
/* L'exemple d'une question passe sur sa propre ligne, sens en italique. */
.quest-ex { flex: 1 1 100%; display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; font-weight: 700; color: var(--titre); }
.quest-ex-gloss { font-weight: 400; font-style: italic; font-size: .9rem; color: var(--encre-doux); }

@media (min-width: 700px)  { .classes-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .classes-grille { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .conj-ligne { grid-template-columns: 2.9rem auto auto; }
  .conj-gloss { grid-column: 1 / -1; padding-left: 3.6rem; margin-top: -.2rem; }
  .conj-ligne .dico-son { justify-self: end; }
}

/* -------------------- 12d. Nombres -------------------- */
/* Trois volets à onglets : tout tient à l'écran, pas de long défilement. */
.volets-nav { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.volet-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bord); background: var(--blanc-chaud);
  font-family: var(--police-titres); font-weight: 700; font-size: 1rem; color: var(--titre);
  box-shadow: var(--ombre-s); transition: transform var(--transi), background var(--transi), color var(--transi);
}
.volet-btn::after {   /* reflet qui balaie la pilule au survol, comme les .btn */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-180%) skewX(-18deg); transition: transform .7s ease;
  pointer-events: none;
}
.volet-btn:hover::after { transform: translateX(320%) skewX(-18deg); }
.volet-btn:hover { transform: translateY(-2px); }
.volet-btn.est-actif { background: var(--terre); border-color: transparent; color: #fff; animation: pop .3s var(--rebond); }
.volet-num {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--sable); color: var(--titre); font-size: .85rem;
}
.volet-btn.est-actif .volet-num { background: rgba(255, 255, 255, .25); color: #fff; }
.volet { animation: monterCourt .35s var(--rebond) both; }
.volet[hidden] { display: none; }
.nb-consigne { max-width: 640px; margin: 0 auto 1.5rem; text-align: center; color: var(--encre-doux); }
.section .nb-titre-bloc { font-size: 1.35rem; margin: 3.2rem 0 .9rem; }
.section .nb-titre-bloc:first-of-type { margin-top: 2.2rem; }

/* Volet 1 : les cartes du par-cœur (liseré tricolore en alternance) */
.nb-grille { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.nb-carte {
  display: grid; gap: .15rem; justify-items: center; text-align: center;
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m);
  border-top: 4px solid var(--bleu); padding: .85rem .5rem .7rem; box-shadow: var(--ombre-s);
}
.nb-carte:nth-child(3n+2) { border-top-color: var(--or); }
.nb-carte:nth-child(3n)   { border-top-color: var(--rouge); }
.nb-chiffre { font-family: var(--police-titres); font-weight: 700; font-size: 2.1rem; line-height: 1.1; color: var(--titre); }
.nb-mot { font-weight: 800; color: var(--terre); }

/* Volet 2 : les briques colorées (une couleur par rôle) */
.brq { display: inline-block; padding: .22rem .6rem; border-radius: 999px; font-weight: 800; font-size: .95rem; }
.brq--mille { background: #fde8eb; color: var(--rouge-fonce); }
.brq--cent  { background: var(--bleu-clair); color: var(--bleu); }
.brq--diz   { background: #f8e2d7; color: var(--terre); }
.brq--unite { background: #fcf0cd; color: var(--or-fonce); }
.brq--et    { background: var(--sable); color: var(--encre-doux); font-weight: 600; }

.nb-exemples { display: grid; gap: .6rem; max-width: 760px; }
.nb-exemple {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .7rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m);
  padding: .6rem .8rem; box-shadow: var(--ombre-s);
}
.nb-exemple-chiffre { font-family: var(--police-titres); font-weight: 700; font-size: 1.35rem; color: var(--titre); min-width: 3.1rem; text-align: right; }
.nb-exemple-egal { color: var(--encre-doux); }
.nb-exemple-mots { flex: 1; display: flex; flex-wrap: wrap; gap: .35rem; }
.nb-exemple-son { margin-left: auto; }

/* Les paliers (dizaines, centaines…) et les chips ordre/quantités */
.paliers-grille { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.paliers-sous { display: contents; }
.palier {
  display: flex; align-items: center; gap: .6rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m);
  padding: .5rem .7rem; box-shadow: var(--ombre-s);
}
.palier-chiffre { font-family: var(--police-titres); font-weight: 700; color: var(--bleu); min-width: 3.6rem; }
.palier-mot { font-weight: 800; color: var(--terre); }
.palier-gloss { flex: 1; font-size: .9rem; color: var(--encre-doux); }
.palier .dico-son { margin-left: auto; }

/* Volet 3 : le compteur */
.compteur {
  max-width: 680px; margin: 0 auto; display: grid; gap: 1.1rem; justify-items: center;
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--or);
  border-radius: var(--r-l); padding: 1.5rem 1.2rem; box-shadow: var(--ombre-m);
}
.compteur-haut { display: grid; gap: .6rem; justify-items: center; width: 100%; }
.compteur-label { font-weight: 700; font-size: .95rem; color: var(--encre-doux); }
.compteur-champ {
  width: min(100%, 300px); text-align: center;
  font-family: var(--police-titres); font-weight: 700; font-size: 2.4rem; color: var(--titre);
  background: var(--raffia); border: 2px solid var(--bord); border-radius: var(--r-m); padding: .15rem .6rem;
}
.compteur-boutons { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.compteur-plus {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--bord);
  background: var(--sable); font-weight: 800; color: var(--encre);
  transition: background var(--transi), transform var(--transi);
}
.compteur-plus:hover { background: var(--or); }
.compteur-plus:active { transform: translateY(2px); }
.compteur-resultat {
  display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center;
  min-height: 2.5rem; align-content: center;
}
.compteur-resultat .brq { font-size: 1.08rem; padding: .32rem .78rem; }

@media (max-width: 560px) {
  .nb-grille { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .nb-chiffre { font-size: 1.7rem; }
  .volet-btn { padding: .45rem .85rem; font-size: .92rem; }
  .nb-exemple-chiffre { min-width: 2.3rem; font-size: 1.15rem; }
  .compteur-champ { font-size: 1.9rem; }
}

/* -------------------- 12e. Vision -------------------- */
/* Le mot de présentation : une carte chaleureuse, monogramme doré, texte
   posé. Discrète, elle éclaire le projet sans voler la vedette à la vision. */
/* La section fait la scène 3D : c'est elle qui porte la perspective, pour
   que la carte se déplie vers le lecteur et que ses couches ressortent. */
.vis-mot-section { padding-bottom: 0; perspective: 1300px; }
.vis-mot {
  max-width: 760px; margin: 0 auto; padding: 2rem 1.9rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-top: 5px solid var(--or); border-radius: var(--r-l); box-shadow: var(--ombre-m);
  transform-style: preserve-3d;              /* les couches vivent dans l'espace */
}

/* Entrée « woaw » : au lieu du simple fondu, la carte se déplie en 3D.
   On confie tout à cette transition (le tilt au survol reprend ensuite). */
.vis-mot[data-apparait] {
  opacity: 0;
  transform: rotateX(24deg) rotateY(-15deg) translateY(38px) scale(.93);
  transform-origin: 50% 85%;
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .75, .2, 1), box-shadow .9s ease;
}
.vis-mot[data-apparait].est-visible { opacity: 1; transform: none; }

/* Chaque élément fort flotte à sa propre profondeur : au survol (tilt) et à
   l'entrée, ils se décollent du fond et donnent le relief. */
.vis-mot-tete { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.vis-mot-monogramme {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--or); color: var(--nuit);
  font-family: var(--police-titres); font-weight: 800; font-size: 1.35rem;
  box-shadow: 0 6px 16px rgba(242, 183, 5, .45); transform: translateZ(34px);
}
.vis-mot-surtitre {
  margin: 0; color: var(--or-fonce); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .82rem;
  transform: translateZ(20px);
}
.vis-mot-corps p { margin: 0 0 1rem; color: var(--encre-doux); line-height: 1.75; }
.vis-mot-corps p:last-child { margin-bottom: 0; }
.vis-mot-signe {
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--bord);
  font-family: var(--police-titres); font-weight: 700; color: var(--titre); font-size: 1.05rem;
  transform: translateZ(16px);
}

/* Mouvement réduit : on garde la carte, on retire la 3D et le relief. */
@media (prefers-reduced-motion: reduce) {
  .vis-mot { transform-style: flat; }
  .vis-mot[data-apparait] { transform: none; transition: opacity .3s ease; }
  .vis-mot-monogramme, .vis-mot-surtitre, .vis-mot-signe { transform: none; }
  .vis-mot-monogramme { box-shadow: var(--ombre-s); }
}

/* Le bandeau nuit : la phrase qui résume tout, balayée d'un reflet d'or.
   Même matière que le héros (texture kuba qui dérive, hem tissé). */
.vis-bandeau {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--nuit), var(--indigo) 60%, #114a86);
  padding-block: clamp(2.4rem, 6vw, 3.4rem) calc(clamp(2.4rem, 6vw, 3.4rem) + 10px);
}
.vis-bandeau::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/medias/motif-kuba.svg") 0 0/48px repeat;
  opacity: .1; animation: deriveMotif 60s linear infinite;
}
.vis-bandeau::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background: var(--frise) repeat-x; background-size: auto 16px;
  animation: deriveFrise 26s linear infinite;
}
.vis-citation {
  position: relative; max-width: 800px; margin: 0 auto; text-align: center;
  font-family: var(--police-titres); font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.35; color: #fff;
}
.vis-citation span {   /* le reflet d'or traverse le texte en continu */
  background: linear-gradient(110deg, #fff 38%, var(--or) 50%, #fff 62%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brillance 5.5s linear infinite;
}
.vis-citation::before, .vis-citation::after {
  color: var(--or); font-size: 1.35em; line-height: 0; vertical-align: -0.32em;
  display: inline-block; animation: pouls 3.2s ease-in-out infinite;
}
.vis-citation::before { content: '« '; margin-right: .12em; }
.vis-citation::after  { content: ' »'; margin-left: .12em; animation-delay: 1.6s; }

/* La mission : un paragraphe fort entre deux liserés tricolores qui coulent. */
.mission-texte {
  position: relative; max-width: 720px; margin: 0 auto; text-align: center;
  font-size: 1.22rem; line-height: 1.6; color: var(--titre); font-weight: 600;
  padding-block: 1.4rem;
}
.mission-texte::before, .mission-texte::after {
  content: ""; position: absolute; left: 12%; right: 12%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--bleu), var(--or), var(--rouge), var(--bleu));
  background-size: 200% 100%; animation: couler 9s linear infinite;
}
.mission-texte::before { top: 0; }
.mission-texte::after  { bottom: 0; animation-direction: reverse; }
.nb-titre-bloc.centre { text-align: center; }

/* Les valeurs : quatre tuiles, l'initiale en monogramme qui s'éveille au survol. */
.valeurs { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.valeur {
  position: relative; overflow: hidden;
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l);
  border-top: 5px solid var(--terre); padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: var(--ombre-s); will-change: transform;
  transition: box-shadow var(--transi);
}
.valeur:hover { box-shadow: var(--ombre-m); }
.valeurs .valeur:nth-child(2) { border-top-color: var(--or); }
.valeurs .valeur:nth-child(3) { border-top-color: var(--bleu); }
.valeurs .valeur:nth-child(4) { border-top-color: var(--rouge); }
.valeur h3 { margin: 0 0 .45rem; color: var(--titre); transition: color var(--transi); }
.valeur:hover h3 { color: var(--terre); }
.valeur p { margin: 0; color: var(--encre-doux); }
.valeur-lettre {
  position: absolute; right: .4rem; top: -1.4rem; pointer-events: none;
  font-family: var(--police-titres); font-weight: 700; font-size: 7rem; line-height: 1;
  color: var(--terre); opacity: .10;
  transition: transform .5s var(--rebond), opacity .3s ease;
}
.valeur:hover .valeur-lettre { transform: scale(1.18) rotate(-8deg); opacity: .17; }
.valeurs .valeur:nth-child(2) .valeur-lettre { color: var(--or-fonce); }
.valeurs .valeur:nth-child(3) .valeur-lettre { color: var(--bleu); }
.valeurs .valeur:nth-child(4) .valeur-lettre { color: var(--rouge); }
@media (min-width: 640px) { .valeurs { grid-template-columns: repeat(2, 1fr); } }

/* Les promesses : une étoile du drapeau qui scintille devant chaque engagement. */
.promesses {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 680px; display: grid; gap: .7rem;
}
.promesses li {
  position: relative; padding: .8rem 1rem .8rem 2.9rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-radius: var(--r-m); box-shadow: var(--ombre-s);
  transition: transform var(--transi), box-shadow var(--transi);
}
.promesses li:hover { transform: translateX(6px); box-shadow: var(--ombre-m); }
.promesses li::before {
  content: '★'; position: absolute; left: 1rem; top: .72rem;
  color: var(--or); font-size: 1.15rem;
  animation: scintille 2.8s ease-in-out infinite;
}
.promesses li:nth-child(2)::before { animation-delay: .7s; }
.promesses li:nth-child(3)::before { animation-delay: 1.4s; }
.promesses li:nth-child(4)::before { animation-delay: 2.1s; }

/* -------------------- 12f. Histoire -------------------- */
/* La frise : un fil du temps tricolore, des points qui battent,
   une carte par événement. */
.frise { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; position: relative; }
.frise::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 9px; width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--bleu), var(--or), var(--rouge));
}
.frise-etape { position: relative; padding: 0 0 1.7rem 2.6rem; }
.frise-etape:last-child { padding-bottom: .2rem; }
.frise-point {
  position: absolute; left: 0; top: .25rem; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blanc-chaud); border: 5px solid var(--terre);
  box-shadow: 0 0 0 3px rgba(44, 33, 23, .08);
  animation: pouls 3s ease-in-out infinite;
}
.frise-etape:nth-child(4n+2) .frise-point { border-color: var(--or);   animation-delay: .75s; }
.frise-etape:nth-child(4n+3) .frise-point { border-color: var(--bleu); animation-delay: 1.5s; }
.frise-etape:nth-child(4n)   .frise-point { border-color: var(--rouge); animation-delay: 2.25s; }
.frise-date {
  display: inline-block; margin-bottom: .45rem; padding: .12rem .7rem; border-radius: 999px;
  background: var(--sable); color: var(--titre);
  font-family: var(--police-titres); font-weight: 700; font-size: .95rem;
}
.frise-carte {
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m);
  padding: .95rem 1.2rem; box-shadow: var(--ombre-s); will-change: transform;
  transition: box-shadow var(--transi);
}
.frise-carte:hover { box-shadow: var(--ombre-m); }
.frise-titre { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--titre); }
.frise-txt { margin: 0; color: var(--encre-doux); }
.his-note { max-width: 760px; margin: 1.7rem auto 0; font-size: .92rem; color: var(--encre-doux); font-style: italic; }
.his-note.centre { text-align: center; }

/* Les vignettes d'ouverture des volets : le livre de 1624 qui s'écrit,
   le disque de rumba qui tourne. Dessinées main, purement décoratives. */
.volet-vignette {
  display: block; width: min(58%, 225px); height: auto;
  margin: 1.9rem auto 0; filter: drop-shadow(0 8px 18px rgba(44, 33, 23, .14));
}
.livre-plume { stroke-dasharray: 70; animation: ecrire 4.5s ease-in-out infinite; }
.vinyle { transform-box: fill-box; transform-origin: center; animation: tourner 7s linear infinite; }
.note { animation: flotter 3.6s ease-in-out infinite; }
.note-a { color: var(--terre); }
.note-b { color: var(--bleu); animation-delay: 1.2s; }
.note-c { color: var(--rouge); animation-delay: 2.4s; }

/* La carte du pays : contour dessiné main, le fleuve coule, Kinshasa bat. */
.carte-bloc {
  display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: center;
  max-width: 860px; margin: 0 auto;
}
.carte-rdc { width: min(100%, 380px); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(44, 33, 23, .16)); }
.carte-pays  { fill: var(--blanc-chaud); }
.carte-trait { fill: none; stroke: var(--encre); stroke-width: 2.5; stroke-linejoin: round; opacity: .75; }
.carte-zone  { opacity: .38; }
.carte-fleuve {
  fill: none; stroke: var(--bleu); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 7 6; animation: couleFleuve 9s linear infinite;
}
.carte-kin {
  fill: #fff; stroke: var(--encre); stroke-width: 2.5;
  transform-box: fill-box; transform-origin: center;
  animation: pouls 3s ease-in-out infinite;
}
.carte-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.carte-legende li {
  display: flex; align-items: center; gap: .6rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: 999px;
  padding: .45rem 1rem; box-shadow: var(--ombre-s);
}
.leg-puce { width: 14px; height: 14px; border-radius: 4px; background: var(--puce, var(--terre)); flex: none; }
.leg-zone { color: var(--encre-doux); }
.leg-zone::before { content: '· '; }
@media (min-width: 720px) { .carte-bloc { grid-template-columns: 1.1fr 1fr; } }

/* « Combien de mots ? » : un chiffre-phare qui parle de la famille
   bantoue, puis nos 4 cartes de dictionnaire, centrées (et non calées
   à gauche comme le remplissage automatique de .nb-grille le ferait). */
.his-phare {
  max-width: 620px; margin: 0 auto 1.6rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.his-phare-nombre {
  font-family: var(--police-titres); font-weight: 700; font-size: 2.7rem;
  line-height: 1; color: var(--terre);
}
.his-phare-txt { color: var(--encre-doux); }
#his-chiffres {
  list-style: none; margin: 0 auto; padding: 0;
  justify-content: center;
  grid-template-columns: repeat(2, minmax(118px, 150px));
}
@media (min-width: 560px) {
  #his-chiffres { grid-template-columns: repeat(4, minmax(112px, 148px)); }
}

/* -------------------- 12g. Bible -------------------- */
/* Le vis-à-vis : un verset par carte, français à gauche, lingala à droite
   (souligné d'or), et l'écoute au bout de la ligne. En tête, la rangée
   d'outils : recherche d'un livre, puis Testament, Livre, Chapitre. */
.bible-outils {
  display: grid; justify-items: center; gap: 1rem;
  max-width: 940px; margin: 0 auto 1.6rem;
  /* cible du « retour en haut » quand on change de chapitre : on dégage la
     hauteur du header collant pour ne pas passer dessous. */
  scroll-margin-top: calc(var(--entete-h) + 1rem);
}
/* Le bandeau (recherche + filtres) reste collé sous le header pendant la
   lecture, pour changer de livre ou de chapitre sans remonter. Réservé aux
   écrans assez larges : sur mobile il mangerait trop de hauteur. L'ombre et
   le flou ne s'allument qu'une fois collé (classe posée en JS). */
@media (min-width: 700px) {
  .bible-outils {
    position: sticky; top: calc(var(--entete-h) + 4px); z-index: 20;
    border-radius: var(--r-m); padding: .9rem 1rem;
    transition: box-shadow var(--transi), background var(--transi);
  }
  .bible-outils.est-collee {
    background: rgba(255, 253, 248, .96); backdrop-filter: blur(8px);
    box-shadow: 0 10px 18px -12px rgba(44, 33, 23, .3);
  }
}
.bible-outils .dico-champ { width: 100%; max-width: 420px; }
/* Les trois filtres restent sur une même ligne (ils se replient
   seulement quand l'écran est vraiment étroit). */
.bible-filtres {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .9rem 1.4rem;
}
/* Les livres trouvés en tapant, sous le champ de recherche. */
.bible-suggestions {
  position: absolute; top: calc(100% + .45rem); left: 0; right: 0; z-index: 30;
  background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m);
  box-shadow: var(--ombre-m); padding: .4rem;
  display: grid; gap: .1rem; max-height: 300px; overflow-y: auto;
}
.bible-suggestions[hidden] { display: none; } /* display:grid écraserait hidden */
.bible-suggestions button {
  font: inherit; text-align: left; padding: .5rem .8rem;
  border: 0; background: none; border-radius: 12px; cursor: pointer;
  color: var(--encre); font-weight: 600;
}
.bible-suggestions button:hover, .bible-suggestions button:focus-visible { background: var(--raffia); }
.bible-suggestions .sug-ln { color: var(--terre); font-weight: 500; font-size: .9em; margin-left: .3rem; }
.bible-suggestions .sug-vide { margin: 0; padding: .5rem .8rem; color: var(--encre-doux); font-style: italic; }
/* Tout le chapitre tient sur une seule « page » : les versets sont des
   rangées légères séparées d'un filet, au lieu d'une carte par verset qui
   allongeait le défilement. La page tourne en 3D à chaque chapitre, en écho
   au deck du « cœur de l'Évangile ». */
.bible-versets {
  max-width: 940px; margin: 0 auto; padding: .2rem 1.3rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-top: 4px solid var(--or); border-radius: var(--r-l); box-shadow: var(--ombre-m);
}
@keyframes bibleTourne {
  from { opacity: 0; transform: perspective(1600px) rotateY(-9deg) translateY(6px); }
  to   { opacity: 1; transform: perspective(1600px) rotateY(0) translateY(0); }
}
.bible-versets.est-tournant { animation: bibleTourne .5s cubic-bezier(.2,.7,.3,1) both; transform-origin: left center; }
.bible-entetes { display: none; }
.bible-colonne { font-family: var(--police-titres); font-weight: 700; font-size: .95rem; color: var(--encre-doux); }
.bible-colonne--ln { color: var(--terre); }
.verset {
  display: grid; grid-template-columns: 1.9rem 1fr; gap: .35rem .9rem; align-items: start;
  padding: .8rem 0; border-bottom: 1px solid var(--bord);
}
.bible-versets .verset:last-child { border-bottom: 0; }
.verset-num {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--raffia); border: 1px solid var(--bord);
  font-family: var(--police-titres); font-weight: 700; font-size: .8rem; color: var(--terre);
}
.verset-fr { margin: 0; grid-column: 2; color: var(--encre-doux); }
.verset-ln {
  grid-column: 2; display: flex; gap: .55rem; align-items: flex-start;
  border-left: 3px solid var(--or); padding-left: .85rem;
}
.verset-ln p { margin: 0; color: var(--encre); font-weight: 500; flex: 1; }
.verset-ln .dico-son { flex: none; }
/* « Voir plus » : les versets ajoutés apparaissent en cascade, un fondu de
   bas en haut décalé de proche en proche. Rien en mode « mouvement réduit ». */
@media (prefers-reduced-motion: no-preference) {
  @keyframes versetApparait {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .verset.est-apparu { animation: versetApparait .4s ease both; animation-delay: calc(var(--ordre, 0) * 45ms); }
}
@media (min-width: 760px) {
  .bible-entetes { display: grid; grid-template-columns: 2.2rem 1fr 1fr; gap: 1.1rem; padding: .6rem 0 .3rem; }
  .verset { grid-template-columns: 2.2rem 1fr 1fr; }
  .verset-fr, .verset-ln { grid-column: auto; }
}
.bible-mention {
  max-width: 940px; margin: 2.4rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--bord); font-size: .88rem; color: var(--encre-doux);
}
.bible-mention p { margin: 0 0 .35rem; }
/* Chargement d'un livre, verset absent d'une édition (tiret),
   navigation de chapitre en bas. */
.bible-attente { text-align: center; color: var(--encre-doux); margin: 2rem 0; }
.verset-vide { color: var(--encre-doux); opacity: .5; }
.bible-nav-chap {
  max-width: 940px; margin: 1.8rem auto 0;
  display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
}
.btn-page {
  background: var(--blanc-chaud); color: var(--encre);
  border-color: var(--bord); box-shadow: var(--ombre-s);
  font-size: .95rem; padding: .7rem 1.2rem;
}
.btn-page:hover { background: var(--raffia); color: var(--encre); }
.btn-page:disabled { opacity: .4; pointer-events: none; }
.btn-page .i--retour { transform: scaleX(-1); }

/* Le cœur de l'Évangile : intro, la carte « fiabilité » qui pose le cadre,
   puis un deck 3D (un verset à la fois, la carte tourne à chaque pas — pas de
   long défilement). La carte de verset porte la référence, le thème et le
   texte en vis-à-vis. */
.bible-phares .phares-tete { max-width: 760px; margin: 0 auto 1.6rem; text-align: center; }
.phares-intro { margin: .6rem 0 0; color: var(--encre-doux); }

/* Le pont : la scène 3D (perspective) et la barre de navigation. */
.phares-pont { max-width: 720px; margin: 0 auto 2rem; }
.phares-scene { perspective: 1300px; }
.phare-carte {
  position: relative; min-height: 12rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-radius: var(--r-l); box-shadow: var(--ombre-m);
  padding: 1.5rem 1.6rem; transform-style: preserve-3d;
  border-top: 4px solid var(--or);
}
/* La carte tourne comme une page qu'on tourne (charnière à gauche). */
@keyframes phareEntre {
  from { opacity: 0; transform: rotateY(-42deg) translateZ(-60px); }
  to   { opacity: 1; transform: rotateY(0) translateZ(0); }
}
.phare-carte.est-entrante { animation: phareEntre .5s cubic-bezier(.2,.7,.3,1) both; transform-origin: left center; }
.phare-ref { margin: 0 0 1rem; font-family: var(--police-titres); font-size: 1rem; color: var(--terre); }
.phare-theme { color: var(--encre-doux); font-weight: 500; }
.phare-corps { display: grid; gap: .9rem; }
.phare-corps .verset-fr { grid-column: auto; margin: 0; }
.phare-corps .verset-ln { grid-column: auto; }
@media (min-width: 720px) {
  .phare-corps { grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
}
.phares-nav {
  display: flex; justify-content: center; align-items: center; gap: 1.2rem;
  margin-top: 1.1rem;
}
.phare-fleche { padding: .6rem .9rem; }
.phare-compteur {
  font-family: var(--police-titres); font-weight: 700; color: var(--encre-doux);
  min-width: 4.2rem; text-align: center; font-variant-numeric: tabular-nums;
}

.phares-fiabilite {
  max-width: 760px; margin: 0 auto 2rem; padding: 1.2rem 1.3rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-left: 4px solid var(--or); border-radius: var(--r-m); box-shadow: var(--ombre-s);
}
.phares-fiabilite p { margin: 0 0 .6rem; color: var(--encre-doux); font-size: .95rem; }
.phares-fiabilite p:last-child { margin-bottom: 0; }
.phares-fiab-titre { font-family: var(--police-titres); color: var(--terre); }

/* La bascule à deux onglets (cœur de l'Évangile / toute la Bible). On
   réutilise le style des pastilles .volet-btn, mais dans un conteneur
   .bible-bascule (et non .volets-nav) pour ne pas déclencher le handler
   générique : la page Bible gère elle-même l'affichage des volets. */
.bible-bascule-sec { padding-bottom: 0; }
.bible-bascule { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
/* Sur mobile étroit, on rétrécit les deux pastilles pour qu'elles tiennent
   côte à côte sans jamais déborder (sinon elles passent à la ligne). */
@media (max-width: 460px) {
  .bible-bascule .volet-btn { font-size: .86rem; padding: .5rem .8rem; }
}

/* Le chant d'adoration : une pochette 3D, et le vinyle qui sort et tourne
   quand ça joue (même platine que l'accueil ; activation au clic dans
   js/bible.js, rien ne se lance tout seul). */
.bible-chant-sec { padding-top: clamp(1.4rem, 3.5vw, 2rem); }
.chant {
  display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap;
  padding: 1.1rem 1.3rem; border-radius: var(--r-l);
  background: linear-gradient(160deg, #fff8e8, var(--blanc-chaud));
  border: 1px solid var(--bord); box-shadow: var(--ombre-s);
}
.chant-scene { position: relative; flex: none; width: 172px; height: 114px; perspective: 620px; }
.chant-pochette {
  position: absolute; left: 0; top: 4px; width: 106px; height: 106px; z-index: 2;
  display: grid; place-items: center; align-content: center; gap: .1rem;
  padding: .5rem; text-align: center; border-radius: 10px;
  font-family: var(--police-titres); font-weight: 700; font-size: .82rem; line-height: 1.25;
  color: var(--or);
  background:
    url("/medias/motif-kuba.svg") 0 0/48px repeat,
    linear-gradient(155deg, #17456f, var(--nuit));
  background-blend-mode: soft-light, normal;
  box-shadow: 0 10px 22px rgba(12, 35, 64, .35);
  transform: rotateY(-12deg); transform-origin: left center;
  transition: transform .6s var(--rebond);
}
.chant-pochette small { display: block; font-size: .6rem; color: #c9d6e8; letter-spacing: .04em; }
.chant-vinyle {
  position: absolute; top: 11px; left: 50px; width: 92px; height: 92px; z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffd75e 0 14px, var(--or) 14px 16px, transparent 16px),
    repeating-radial-gradient(circle, #10131a 0 2px, #232a36 2px 4px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
  animation: tourner 4s linear infinite; animation-play-state: paused;
  transition: transform .6s var(--rebond);
}
.chant.joue .chant-vinyle { animation-play-state: running; transform: translateX(30px); }
.chant.joue .chant-pochette { transform: rotateY(-24deg); }
.chant-corps { flex: 1 1 260px; display: grid; gap: .25rem; }
.chant-invite { margin: 0; color: var(--encre); }
.chant-titre { margin: 0; font-size: .92rem; color: var(--encre-doux); }
.chant-titre strong { color: var(--titre); font-family: var(--police-titres); }
.chant-btn { flex: none; }
@media (max-width: 600px) {
  .chant { flex-direction: column; text-align: center; }
  .chant-corps { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) { .chant-vinyle { animation: none; } }

/* -------------------- 12h. Retour en haut -------------------- */
/* Pastille fixe en bas à droite, sur toutes les pages (partial pied).
   Invisible en haut de page, elle apparaît après un écran de descente
   (classe est-visible posée par js/main.js § 3). */
.haut-page {
  position: fixed; right: clamp(.9rem, 3vw, 1.6rem); bottom: clamp(.9rem, 3vw, 1.6rem);
  z-index: 80; /* sous le tiroir mobile (95) et son voile (90) */
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--or); color: var(--nuit); box-shadow: var(--ombre-m);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity var(--transi), transform var(--transi), background var(--transi);
}
.haut-page.est-visible { opacity: 1; transform: none; pointer-events: auto; }
.haut-page:hover { background: #ffc721; transform: translateY(-3px); }
.haut-page:active { transform: translateY(0) scale(.94); transition-duration: .08s; }
.haut-page .i { width: 1.35rem; height: 1.35rem; transform: rotate(180deg); }

/* -------------------- 12i. Vitrine de rubrique (Jeux, Exercices) -------------------- */
/* Motif partagé : la page racine d'une rubrique (/jeux, /exercices) présente
   une tuile par activité ; chaque activité a ensuite sa propre page. Tuile
   prête = lien cliquable, tuile à venir = grisée avec badge « Bientôt ».
   Les couleurs des liserés et emblèmes tournent (terre, bleu, ocre, rouge). */
.vitrine {
  display: grid; gap: 1.4rem; grid-template-columns: 1fr;
  max-width: 920px; margin: 0 auto;
}
@media (min-width: 680px)  { .vitrine { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vitrine { grid-template-columns: repeat(3, 1fr); } }

.vitrine-tuile {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-top: 5px solid var(--terre); border-radius: var(--r-l);
  padding: 1.6rem 1.5rem 1.4rem; box-shadow: var(--ombre-s);
  color: inherit; will-change: transform;
  transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi);
}
.vitrine-tuile:hover { text-decoration: none; }
a.vitrine-tuile:hover { box-shadow: var(--ombre-m); border-color: var(--ocre); }
.vitrine .vitrine-tuile:nth-child(2) { border-top-color: var(--bleu); }
.vitrine .vitrine-tuile:nth-child(3) { border-top-color: var(--ocre); }
.vitrine .vitrine-tuile:nth-child(4) { border-top-color: var(--rouge); }

.vitrine-embleme {
  width: 60px; height: 60px; border-radius: var(--r-m);
  display: grid; place-items: center; color: #fff; margin-bottom: .4rem;
  background: linear-gradient(150deg, var(--terre), #9c3f20);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28), 0 6px 14px rgba(44, 33, 23, .18);
}
.vitrine-embleme svg, .vitrine-embleme .i { width: 1.9rem; height: 1.9rem; }
.vitrine .vitrine-tuile:nth-child(2) .vitrine-embleme { background: linear-gradient(150deg, var(--bleu), #084a97); }
.vitrine .vitrine-tuile:nth-child(3) .vitrine-embleme { background: linear-gradient(150deg, var(--ocre), var(--terre)); }
.vitrine .vitrine-tuile:nth-child(4) .vitrine-embleme { background: linear-gradient(150deg, var(--rouge), var(--rouge-fonce)); }

.vitrine-titre { font-size: 1.25rem; margin: 0; color: var(--titre); }
.vitrine-txt { margin: 0; color: var(--encre-doux); flex: 1; }
.vitrine-pied {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem;
  font-family: var(--police-titres); font-weight: 700; color: var(--terre);
}
.vitrine-pied .i { width: 1.1em; height: 1.1em; transition: transform var(--transi); }
a.vitrine-tuile:hover .vitrine-pied .i { transform: translateX(4px); }

.vitrine-tuile.est-bientot { opacity: .74; }
.vitrine-tuile.est-bientot .vitrine-embleme { filter: grayscale(.35); }
.vitrine-bientot {
  position: absolute; top: 1rem; right: 1rem;
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: .24rem .7rem; border-radius: 999px;
  background: var(--sable); color: var(--encre-doux);
}

/* -------------------- 12j. Le memory des mots (page /jeu-memory) -------------------- */
/* Des cartes à deux faces retournées en vraie 3D CSS : le dos (étoile du
   drapeau sur fond nuit) pivote sur rotateY pour révéler le mot. Aucune
   bibliothèque : perspective + preserve-3d + backface-visibility. */
/* Retour vers la vitrine, en tête de chaque page de jeu. Pilule blanc-chaud
   avec une pastille fléchée (même langage que .dico-son et .haut-page) :
   au survol elle se soulève, la pastille se remplit de terre et la flèche
   glisse vers la gauche pour dire « on revient en arrière ». */
.jeu-retour {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-bottom: 1.5rem; padding: .32rem .95rem .32rem .32rem;
  border-radius: 999px; background: var(--blanc-chaud);
  border: 1px solid var(--bord); box-shadow: var(--ombre-s);
  font-family: var(--police-titres); font-weight: 700; font-size: .9rem; color: var(--titre);
  transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi);
}
.jeu-retour:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--ombre-m); border-color: var(--ocre);
}
.jeu-retour:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.jeu-retour-pastille {
  display: grid; place-items: center; width: 1.85rem; height: 1.85rem; flex: none;
  border-radius: 50%; background: var(--sable); color: var(--terre);
  transition: background var(--transi), color var(--transi);
}
.jeu-retour:hover .jeu-retour-pastille { background: var(--terre); color: #fff; }
.jeu-retour-pastille .i { width: 1.05em; height: 1.05em; transform: scaleX(-1); transition: transform var(--transi); }
.jeu-retour:hover .jeu-retour-pastille .i { transform: scaleX(-1) translateX(3px); }
.jeu-retour-txt { padding-right: .1rem; }

.jeu-outils {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .9rem 1.4rem; margin-bottom: 1.3rem;
}
.jeu-niveaux { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.jeu-relance { font-size: .95rem; padding: .6rem 1.2rem; }

.jeu-etat {
  display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
  margin: 0 0 1.3rem; color: var(--encre-doux); font-weight: 600;
}
.jeu-etat b { color: var(--titre); font-family: var(--police-titres); font-size: 1.1em; }

/* À plusieurs : la barre des joueurs, l'actif surligné à sa couleur, et le
   classement de fin. Couleurs du drapeau : bleu, rouge, or, ocre. */
.jeu-joueurs { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 0 1.3rem; }
.jeu-joueurs[hidden] { display: none; }
.jeu-joueur {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .42rem .95rem; border-radius: 999px; font-weight: 700; font-size: .95rem;
  background: var(--blanc-chaud); border: 2px solid var(--bord); color: var(--encre-doux);
  transition: transform .2s var(--rebond), box-shadow .2s, background .2s, color .2s;
}
.jeu-joueur-score { font-family: var(--police-titres); font-size: 1.15rem; min-width: 1ch; text-align: center; }
.jeu-joueur.est-actif { transform: translateY(-2px) scale(1.06); box-shadow: var(--ombre-m); color: #fff; }

.jeu-joueur.est-j1 { border-color: var(--bleu); }
.jeu-joueur.est-j2 { border-color: var(--rouge); }
.jeu-joueur.est-j3 { border-color: var(--or); }
.jeu-joueur.est-j4 { border-color: var(--ocre); }
.jeu-joueur.est-j1.est-actif { background: var(--bleu); }
.jeu-joueur.est-j2.est-actif { background: var(--rouge); }
.jeu-joueur.est-j3.est-actif { background: var(--or); color: var(--nuit); }
.jeu-joueur.est-j4.est-actif { background: var(--ocre); }

/* Le classement de fin réutilise les pastilles du récap, en pleine couleur. */
.recap-item.jeu-classe { color: #fff; }
.recap-item.jeu-classe.est-j1 { background: var(--bleu); }
.recap-item.jeu-classe.est-j2 { background: var(--rouge); }
.recap-item.jeu-classe.est-j3 { background: var(--or); color: var(--nuit); }
.recap-item.jeu-classe.est-j4 { background: var(--ocre); }
.recap-item.jeu-classe b { font-size: 1.1rem; }

/* -------------------- Jeu « Nani azali ? » (devine qui) -------------------- */
/* Un joueur sorti de la manche : grisé dans la barre. */
.jeu-joueur.est-out { opacity: .4; filter: grayscale(1); }

#dv-reste.est-sur { color: var(--terre); transform: scale(1.15); transition: transform .2s; }

.dv-scene { margin-top: 1rem; }
.dv-consigne {
  text-align: center; font-weight: 700; color: var(--titre);
  margin: 0 0 .7rem; min-height: 1.4em; transition: color .2s;
}
.dv-consigne.est-resultat { color: var(--terre); font-size: 1.08rem; }

/* La bulle de réponse du plateau. */
.dv-bulle {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  justify-content: center; margin: 0 auto .8rem; max-width: 30rem;
  padding: .55rem .9rem; border-radius: 14px; border-bottom-left-radius: 5px;
  background: var(--blanc-chaud); border: 2px solid var(--or);
  box-shadow: var(--ombre-s);
}
.dv-bulle[hidden] { display: none; }
.dv-bulle.est-neuve { animation: masTombe .38s var(--rebond) both; transform-origin: top center; }
.dv-bulle-q { font-style: italic; color: var(--encre-doux); }
.dv-bulle-rep { display: inline-flex; align-items: baseline; gap: .4rem; }
.dv-bulle-rep b { font-size: 1.15rem; color: var(--terre); }
.dv-bulle-gloss { font-size: .84rem; color: var(--encre-doux); }

/* Le menu des questions : une carte-question par axe. */
.dv-menu { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin: 0 0 1.1rem; }
.dv-q {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .5rem .85rem; border-radius: 12px; cursor: pointer;
  background: var(--bleu); color: #fff; border: 2px solid transparent;
  transition: transform .15s, box-shadow .15s, background .2s;
}
.dv-q:hover, .dv-q:focus-visible { transform: translateY(-2px); box-shadow: var(--ombre-m); }
.dv-q-ln { font-weight: 700; }
.dv-q-gloss { font-size: .78rem; opacity: .85; }
.dv-q.est-pose { background: var(--gris-doux); color: var(--encre-doux); cursor: default; transform: none; box-shadow: none; }

/* Le plateau des frimousses. */
.dv-plateau {
  display: grid; gap: .7rem; margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 34rem;
  perspective: 900px;
}
.dv-plateau[data-cartes="12"],
.dv-plateau[data-cartes="20"] { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 46rem; }
@media (max-width: 560px) {
  .dv-plateau { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .dv-plateau[data-cartes="12"],
  .dv-plateau[data-cartes="20"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dv-carte {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .5rem .35rem .55rem; border-radius: 12px; cursor: pointer;
  background: var(--blanc-chaud); border: 2px solid var(--liseret);
  transition: transform .35s, opacity .35s, border-color .15s, box-shadow .15s;
  transform-origin: bottom center; transform-style: preserve-3d;
}
.dv-carte:hover, .dv-carte:focus-visible { border-color: var(--terre); box-shadow: var(--ombre-m); }
.dv-carte.est-cible { border-color: var(--terre); box-shadow: 0 0 0 3px var(--terre); }
.dv-carte.est-rabattue {
  transform: rotateX(-88deg) translateY(6px); opacity: .28; pointer-events: none;
  transition-delay: calc(var(--i) * 22ms);
}
.dv-carte.est-trouvee { border-color: var(--or); box-shadow: 0 0 0 3px var(--or), var(--ombre-m); animation: dvTrouve .5s var(--rebond) both; }
@keyframes dvTrouve { 0% { transform: rotateY(180deg) scale(.9); } 100% { transform: rotateY(0) scale(1.04); } }
.dv-visage { width: 54px; height: 54px; display: block; }
.dv-visage svg { width: 100%; height: 100%; }
.dv-nom { font-weight: 800; font-size: .9rem; color: var(--titre); }
.dv-chips { display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center; }
.dv-chip {
  font-size: .68rem; font-weight: 700; padding: .08rem .4rem; border-radius: 999px;
  color: #fff; white-space: nowrap;
}
.dv-chip--lieu   { background: var(--bleu); }
.dv-chip--animal { background: var(--vert, #2f8f5b); }
.dv-chip--mosala { background: var(--ocre); }
.dv-chip--humeur { background: var(--terre); }

/* La barre d'accusation. */
.dv-accuser {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .7rem; margin: 1rem auto 0; max-width: 32rem; text-align: center;
  padding: .7rem .9rem; border-radius: 14px; background: var(--blanc-chaud);
  border: 2px dashed var(--terre);
}
.dv-accuser[hidden] { display: none; }
.dv-accuser-txt { font-weight: 800; color: var(--titre); }
.dv-accuser-btns { display: flex; gap: .5rem; }
.dv-suivant { display: inline-flex; margin: 1.1rem auto 0; }
.dv-suivant[hidden] { display: none; }

/* Le journal des manches, en fin de partie. */
.dv-histo { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; }
.dv-histo-ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  padding: .45rem .7rem; border-radius: 10px; background: var(--blanc-chaud);
  border-left: 4px solid var(--liseret);
}
.dv-histo-ligne.est-juste { border-left-color: var(--or); }
.dv-histo-ligne.est-faux { border-left-color: var(--rouge); }
.dv-histo-nom { font-weight: 800; color: var(--titre); }
.dv-histo-info { font-size: .82rem; color: var(--encre-doux); }

.jeu-plateau {
  display: grid; gap: .7rem; grid-template-columns: repeat(4, 1fr);
  max-width: 620px; margin: 0 auto;
}
.jeu-plateau[data-niveau="3"] { grid-template-columns: repeat(5, 1fr); max-width: 780px; }

.jeu-carte {
  position: relative; border: 0; background: none; padding: 0; cursor: pointer;
  aspect-ratio: 4 / 5; perspective: 900px;   /* la scène 3D de chaque carte */
  animation: monterCourt .35s ease backwards;
  transition: transform var(--transi);
}
.jeu-carte:not(.est-retournee):not(.est-trouvee):hover { transform: translateY(-3px); }
.jeu-carte-int {
  position: absolute; inset: 0;
  transform-style: preserve-3d;               /* les deux faces vivent dans l'espace */
  transition: transform .55s var(--rebond);
}
.jeu-carte.est-retournee .jeu-carte-int,
.jeu-carte.est-trouvee  .jeu-carte-int { transform: rotateY(180deg); }

.jeu-face {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: .25rem; text-align: center;
  padding: .45rem; border-radius: var(--r-m);
  border: 1px solid var(--bord); box-shadow: var(--ombre-s);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.jeu-face--dos {
  background:
    url("/medias/motif-kuba.svg") 0 0/40px repeat,
    linear-gradient(150deg, #17456f, var(--nuit));
  background-blend-mode: soft-light, normal;
  color: var(--or); font-size: 1.7rem; border-color: transparent;
  text-shadow: 0 2px 10px rgba(6, 20, 40, .55);
}
.jeu-face--avant { background: var(--blanc-chaud); transform: rotateY(180deg); }
.jeu-face--ref { border-top: 4px solid var(--bleu); }
.jeu-face--ln  { border-top: 4px solid var(--or); }
.jeu-mot {
  font-weight: 800; color: var(--titre); line-height: 1.22;
  font-size: clamp(.82rem, 2.3vw, 1.05rem); overflow-wrap: anywhere;
}
.jeu-face--ln .jeu-mot { color: var(--terre); }
.jeu-langue {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #b09a7d;
}
/* Paire trouvée : halo d'or, petit rebond, et la carte reste écoutable. */
.jeu-carte.est-trouvee .jeu-face--avant {
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(242, 183, 5, .34), var(--ombre-s);
  animation: pop .45s var(--rebond);
}
/* Paire ratée : la carte tremble avant de se refermer. */
.jeu-carte.est-erreur { animation: secouer .4s ease; }

.jeu-bravo {
  max-width: 520px; margin: 1.8rem auto 0; padding: 1.8rem 1.4rem; text-align: center;
  background: var(--blanc-chaud); border: 1px solid var(--or);
  border-top: 5px solid var(--or); border-radius: var(--r-l);
  box-shadow: var(--ombre-m); animation: pop .45s var(--rebond);
}
.jeu-bravo[hidden] { display: none; }
.jeu-bravo-etoiles { display: block; color: var(--or); font-size: 1.5rem; letter-spacing: .3em; animation: scintille 2.8s ease-in-out infinite; }
.jeu-bravo h2 { margin: .4rem 0 .5rem; }
.jeu-bravo p { color: var(--encre-doux); margin: 0 0 1.3rem; }

/* Le récapitulatif de fin de partie (quiz et memory) : un décompte en
   pastilles, puis le détail ligne par ligne, aligné à gauche pour la
   lecture. Classes neutres partagées par les deux jeux. */
.recap { margin: 0 0 1.4rem; text-align: left; }
.recap-bilan { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.2rem; }
.recap-item {
  display: inline-flex; align-items: baseline; gap: .35rem;
  padding: .32rem .78rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
}
.recap-item b { font-size: 1.05rem; }
.recap-item.est-juste  { color: #1a7a43; background: rgba(31, 138, 76, .13); }
.recap-item.est-faux   { color: var(--rouge); background: rgba(206, 17, 38, .10); }
.recap-item.est-temps  { color: #b5701f; background: rgba(224, 151, 63, .18); }
.recap-item.est-neutre { color: var(--encre-doux); background: var(--sable); }

.recap-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.recap-ligne {
  display: flex; gap: .55rem; align-items: flex-start; width: 100%;
  padding: .5rem .65rem; border-radius: var(--r-s);
  border: 1px solid var(--bord); border-left: 3px solid var(--bord);
  text-align: left;
}
.recap-ligne.est-juste  { border-left-color: #2a9d5c; }
.recap-ligne.est-faux   { border-left-color: var(--rouge); }
.recap-ligne.est-temps  { border-left-color: var(--ocre); }
.recap-ligne.est-neutre { border-left-color: var(--or); }

/* Dans le memory, chaque ligne se réécoute : c'est un bouton. */
button.recap-ligne { background: var(--blanc-chaud); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.recap-ligne:hover { border-color: var(--or); box-shadow: var(--ombre-s); }

.recap-marque {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; color: #fff; line-height: 1;
}
.recap-marque .i { width: .92rem; height: .92rem; }
.est-juste  .recap-marque { background: #2a9d5c; }
.est-faux   .recap-marque { background: var(--rouge); }
.est-temps  .recap-marque { background: var(--ocre); }
.est-neutre .recap-marque { background: var(--or); }

.recap-corps { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .45rem; font-size: .92rem; }
.recap-mot { font-weight: 700; color: var(--encre); }
.recap-fleche { color: var(--encre-doux); }
.recap-cible { color: var(--encre); }
.recap-note { flex-basis: 100%; font-size: .82rem; font-style: italic; color: var(--encre-doux); }

.jeu-note { max-width: 640px; margin: 2rem auto 0; text-align: center; font-size: .9rem; font-style: italic; color: var(--encre-doux); }

@media (max-width: 560px) {
  .jeu-plateau { gap: .5rem; }
  .jeu-plateau[data-niveau="3"] { grid-template-columns: repeat(4, 1fr); max-width: 620px; }
  .jeu-etat { gap: 1.3rem; }
}

/* -------------------- 12j-bis. Le quiz éclair -------------------- */
/* Un mot, quatre réponses, un chrono. La carte-question se retourne en 3D
   à chaque question (voir @keyframes quizEntre), les bonnes réponses se
   révèlent en vert, les ratées en rouge. */

/* Le chrono : une barre fine qui se vide de gauche à droite. */
.quiz-chrono {
  height: 8px; max-width: 620px; margin: 0 auto 1.5rem;
  background: var(--bleu-clair); border-radius: 999px; overflow: hidden;
}
.quiz-chrono[hidden] { display: none; }
.quiz-chrono-jauge {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--or), var(--terre));
  border-radius: 999px;
}

/* L'écran de départ : on ne lance rien tant qu'on n'a pas cliqué. */
.quiz-depart {
  max-width: 560px; margin: 0 auto; padding: 2.2rem 1.5rem; text-align: center;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-top: 5px solid var(--bleu); border-radius: var(--r-l);
  box-shadow: var(--ombre-m); animation: monterCourt .4s var(--rebond) both;
}
.quiz-depart[hidden] { display: none; }
.quiz-depart-embleme {
  display: inline-flex; width: 3.4rem; height: 3.4rem; margin-bottom: 1rem;
  align-items: center; justify-content: center; color: #fff; border-radius: 50%;
  background: linear-gradient(150deg, var(--bleu), #084a97); box-shadow: var(--ombre-s);
}
.quiz-depart-embleme svg { width: 1.8rem; height: 1.8rem; }
.quiz-depart-txt { margin: 0 auto 1.5rem; max-width: 34ch; color: var(--encre-doux); font-size: 1.05rem; }
.quiz-depart-txt[hidden] { display: none; }
.quiz-trop-peu { color: var(--terre); font-style: italic; }
.quiz-depart-btn { font-size: 1.05rem; }

/* Message « pas assez de mots » du memory, sous le plateau. */
.jeu-vide { max-width: 420px; margin: 1.6rem auto 0; text-align: center; color: var(--terre); font-style: italic; }

/* La scène 3D : la carte-question bascule à chaque nouvelle question. */
.quiz-scene { perspective: 1200px; }
.quiz-scene[hidden] { display: none; }

.quiz-carte {
  position: relative; max-width: 620px; margin: 0 auto 1.6rem;
  padding: 2rem 1.4rem; text-align: center;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-top: 5px solid var(--or); border-radius: var(--r-l);
  box-shadow: var(--ombre-m); transform-origin: center bottom;
}
.quiz-carte.est-entrante { animation: quizEntre .55s var(--rebond) both; }

.quiz-demande { margin: 0 0 .7rem; color: var(--encre-doux); font-weight: 600; font-size: .98rem; }
.quiz-mot {
  margin: 0; font-family: var(--police-titres); font-weight: 800;
  color: var(--titre); line-height: 1.15;
  font-size: clamp(1.7rem, 6vw, 2.8rem); overflow-wrap: anywhere;
}
/* Mode Écouter : le mot est caché (· · ·), on le reconnaît à l'oreille. */
.quiz-mot--cache { color: var(--encre-doux); letter-spacing: .3em; }
.quiz-langue {
  display: inline-block; margin-top: .5rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #b09a7d;
}
.quiz-ecouter {
  display: inline-flex; margin: .9rem auto 0; padding: .5rem;
  align-items: center; justify-content: center;
  background: var(--bleu-clair); color: var(--bleu);
  border: 0; border-radius: 50%; cursor: pointer;
  transition: transform var(--transi), background var(--transi);
}
.quiz-ecouter:hover { background: var(--bleu); color: #fff; transform: scale(1.08); }
.quiz-ecouter[hidden] { display: none; }
.quiz-ecouter .i { width: 1.3rem; height: 1.3rem; }

/* Le verdict : un petit mot qui apparaît après la réponse. */
.quiz-verdict {
  min-height: 1.4em; margin: .8rem 0 0; font-weight: 700;
  font-family: var(--police-titres); letter-spacing: .01em;
}
.quiz-verdict.est-juste { color: #1f8a4c; }
.quiz-verdict.est-faux,
.quiz-verdict.est-temps { color: var(--rouge); }
.quiz-verdict:not(:empty) { animation: pop .4s var(--rebond); }

/* Les réponses : quatre pastilles cliquables. */
.quiz-choix {
  display: grid; gap: .7rem; grid-template-columns: 1fr;
  max-width: 620px; margin: 0 auto;
}
@media (min-width: 560px) { .quiz-choix { grid-template-columns: 1fr 1fr; } }

.quiz-opt {
  padding: .95rem 1.1rem; text-align: center; cursor: pointer;
  background: var(--blanc-chaud); color: var(--titre);
  font-weight: 600; font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere;
  border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s);
  transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi);
  animation: monterCourt .35s var(--rebond) backwards;
}
.quiz-opt:nth-child(2) { animation-delay: .05s; }
.quiz-opt:nth-child(3) { animation-delay: .1s; }
.quiz-opt:nth-child(4) { animation-delay: .15s; }
.quiz-opt:not(:disabled):hover { transform: translateY(-2px); border-color: var(--ocre); box-shadow: var(--ombre-m); }
.quiz-opt:disabled { cursor: default; }

/* La révélation : la bonne réponse en vert, la ratée en rouge, le reste s'efface. */
.quiz-opt.est-juste {
  border-color: #1f8a4c; color: #12703b;
  box-shadow: 0 0 0 3px rgba(31, 138, 76, .22), var(--ombre-s);
  animation: pop .45s var(--rebond);
}
.quiz-opt.est-faux {
  border-color: var(--rouge); color: var(--rouge-fonce);
  box-shadow: 0 0 0 3px rgba(206, 17, 38, .18), var(--ombre-s);
  animation: secouer .4s ease;
}
.quiz-opt.est-estompe { opacity: .5; }

/* À plusieurs : dans le détail de fin, la pastille du joueur qui répondait. */
.recap-joueur {
  flex: none; align-self: center; padding: .16rem .55rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.recap-joueur.est-j1 { background: var(--bleu); }
.recap-joueur.est-j2 { background: var(--rouge); }
.recap-joueur.est-j3 { background: var(--or); color: var(--nuit); }
.recap-joueur.est-j4 { background: var(--ocre); }

/* -------------------- 12j-ter. L'exercice de vocabulaire (page /exo-vocabulaire) -------------------- */
/* Une carte à deux faces en vraie 3D (perspective + preserve-3d +
   backface-visibility) : recto la question et le champ de réponse, verso
   la correction. Elle se retourne pour corriger, puis revient pour le mot
   suivant : tout se passe dans la carte, à hauteur fixe, sans défiler. */
.exo-scene { perspective: 1400px; max-width: 560px; margin: 0 auto; }
.exo-scene[hidden] { display: none; }
.exo-carte {
  position: relative; min-height: 23.5rem;
  transform-style: preserve-3d;
  transition: transform .65s var(--rebond);
}
.exo-carte.est-corrigee { transform: rotateY(180deg); }
/* backwards (pas both) : une fois entrée, la carte rend la main à la
   transition, sinon l'animation figerait transform et le retournement. */
.exo-carte.est-entrante { animation: quizEntre .55s var(--rebond) backwards; }

.exo-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1.5rem 1.3rem; text-align: center;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-radius: var(--r-l); box-shadow: var(--ombre-m);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.exo-face--recto { border-top: 5px solid var(--bleu); }
.exo-face--verso { transform: rotateY(180deg); border-top: 5px solid var(--or); }

.exo-mot {
  margin: 0; font-family: var(--police-titres); font-weight: 800;
  color: var(--titre); line-height: 1.15;
  font-size: clamp(1.5rem, 5vw, 2.2rem); overflow-wrap: anywhere;
}

/* Le champ de réponse et son bouton, côte à côte. */
.exo-form { display: flex; gap: .55rem; width: 100%; max-width: 24rem; margin-top: .6rem; }
.exo-champ {
  flex: 1; min-width: 0; padding: .68rem .9rem; font: inherit; font-size: 1.05rem;
  color: var(--encre); background: var(--carte-vive);
  border: 2px solid var(--bord); border-radius: var(--r-m);
  transition: border-color var(--transi), box-shadow var(--transi);
}
.exo-champ:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(10, 110, 224, .14); }
.exo-valider { font-size: .98rem; padding: .6rem 1.1rem; }
.exo-passer {
  border: 0; background: none; padding: .3rem .5rem; cursor: pointer;
  color: var(--encre-doux); font-size: .88rem; text-decoration: underline;
  transition: color var(--transi);
}
.exo-passer:hover { color: var(--terre); }

/* Le verso : le verdict, le bon mot en grand, ce qu'on avait écrit. */
.exo-verdict {
  margin: 0; min-height: 1.4em; font-weight: 700;
  font-family: var(--police-titres); letter-spacing: .01em;
}
.exo-verdict.est-juste   { color: #1f8a4c; }
.exo-verdict.est-presque { color: #b5701f; }
.exo-verdict.est-faux    { color: var(--rouge); }
.exo-verdict.est-passe   { color: var(--encre-doux); }
.exo-verdict:not(:empty) { animation: pop .4s var(--rebond); }
.exo-rappel { margin: 0; color: var(--encre-doux); font-weight: 600; overflow-wrap: anywhere; }
.exo-bonne {
  margin: 0; font-family: var(--police-titres); font-weight: 800;
  color: var(--terre); line-height: 1.15;
  font-size: clamp(1.4rem, 4.6vw, 2rem); overflow-wrap: anywhere;
}
.exo-taponse { margin: 0; min-height: 1.2em; font-size: .9rem; font-style: italic; color: var(--encre-doux); }
/* « Ton mot existe aussi » : la petite trouvaille au passage. */
.exo-autre { margin: 0; font-size: .85rem; color: #b5701f; }
.exo-autre:empty { display: none; }
.exo-face--verso .btn { margin-top: .5rem; }

/* L'astuce de l'écran de départ, plus discrète que la consigne. */
.exo-astuce { font-size: .88rem; font-style: italic; margin-top: -0.8rem; }
.exo-astuce[hidden] { display: none; }

/* Dans la barre de réglages : Écrire / Comprendre (et Nouvelle série en
   partie) sur leur propre ligne, centrés sous les sélecteurs. */
.exo-outils-ligne {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .9rem 1.4rem;
}

/* Le bilan de fin : un peu plus large que celui des jeux, pour loger
   les deux axes de jauges (par niveau, par thème). La marge de
   défilement évite que l'en-tête collant ne couvre les étoiles. */
.exo-bravo { max-width: 640px; scroll-margin-top: 5.5rem; }

.bilan-axes { display: grid; gap: 1.1rem; margin: 0 0 1.3rem; }
@media (min-width: 560px) { .bilan-axes { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 880px) { .bilan-axes { grid-template-columns: 1fr 1fr 1fr; } }
.bilan-groupe h3 {
  margin: 0 0 .5rem; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--encre-doux);
}
.bilan-ligne {
  display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr auto;
  align-items: center; gap: .55rem; padding: .2rem 0; font-size: .85rem;
}
.bilan-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--encre); }
.bilan-barre { height: 8px; border-radius: 999px; background: var(--sable); overflow: hidden; }
.bilan-jauge { display: block; height: 100%; border-radius: 999px; transition: width .8s ease; }
.bilan-jauge.est-bien   { background: #2a9d5c; }
.bilan-jauge.est-moyen  { background: var(--ocre); }
.bilan-jauge.est-faible { background: var(--rouge); }
.bilan-note { font-weight: 700; color: var(--encre-doux); font-variant-numeric: tabular-nums; }

/* Les conseils : l'encadré qui dit quoi travailler maintenant. */
.conseils {
  margin: 0 0 1.4rem; padding: .95rem 1.1rem; text-align: left;
  background: var(--sable); border-left: 4px solid var(--or); border-radius: var(--r-s);
}
.conseils h3 { margin: 0 0 .45rem; font-size: .95rem; color: var(--titre); }
.conseils ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; color: var(--encre-doux); font-size: .92rem; }

/* Les statuts « presque » et « passé » dans le récap partagé. */
.recap-item.est-presque  { color: #b5701f; background: rgba(224, 151, 63, .18); }
.recap-ligne.est-presque { border-left-color: var(--ocre); }
.est-presque .recap-marque { background: var(--ocre); }
.recap-ligne.est-passe   { border-left-color: var(--rouge); }
.est-passe .recap-marque { background: var(--rouge); }

@media (prefers-reduced-motion: reduce) {
  .exo-carte { transition: none; animation: none; }
  .bilan-jauge { transition: none; }
}

@media (max-width: 420px) {
  .exo-carte { min-height: 25rem; }
  .exo-face { padding: 1.2rem .9rem; }
  .exo-form { flex-direction: column; }
}

/* -------------------- 12j-quater. L'exercice des verbes : la machine à conjuguer -------------------- */
/* Deux rouleaux cylindriques en vraie 3D (chaque face tournée sur rotateX
   puis poussée en translateZ, géométrie posée par js/exo-verbes.js) : on
   règle la personne et le temps, le verbe s'assemble en direct au-dessus,
   en segments colorés (sujet bleu, marque du temps ocre, racine encre).
   Le tout vit dans la carte à deux faces de l'exercice (.exo-carte). */
.exv-carte { min-height: 27rem; }

.exv-consigne { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 0; }
.exv-puce {
  padding: .26rem .75rem; border-radius: 999px;
  background: var(--sable); border: 1px solid var(--bord);
  font-weight: 700; font-size: .92rem; color: var(--titre);
}
.exv-puce--temps { background: rgba(242, 183, 5, .22); border-color: rgba(242, 183, 5, .55); }

/* Le verbe assemblé : il bouge à chaque tour de rouleau. */
.exv-affichage {
  margin: .2rem 0; min-height: 1.3em;
  font-family: var(--police-titres); font-weight: 800; line-height: 1.15;
  font-size: clamp(1.5rem, 5vw, 2.1rem); overflow-wrap: anywhere;
}
.exv-seg--pronom { color: var(--terre); }
.exv-seg--sujet  { color: var(--bleu); }
.exv-seg--temps  { color: #b5701f; }
.exv-seg--racine { color: var(--titre); }
.exo-bonne .exv-seg--racine { color: var(--terre); }

/* ---------- Exercice Masolo : le dialogue à deux bulles ---------- */
/* Deux bulles de chat (l'une lance, l'autre est à compléter), un trou à
   remplir en posant une pastille (léger effet 3D), puis la carte se
   retourne pour corriger. Tout tient dans .exo-carte (pas de défilement). */
.mas-scene { display: grid; gap: .7rem; margin: .2rem 0 1rem; }
.mas-bulle {
  max-width: 22rem; padding: .75rem 1.05rem; border-radius: var(--r-m);
  background: var(--raffia); box-shadow: var(--ombre-s); line-height: 1.5;
}
.mas-bulle--a { justify-self: start; border-bottom-left-radius: 5px; }
.mas-bulle--b { justify-self: end; background: var(--blanc-chaud); border-top: 3px solid var(--or); border-bottom-right-radius: 5px; }
.mas-bulle [lang="ln"] { font-weight: 600; color: var(--titre); }
.mas-bulle--b [lang="ln"] { color: var(--terre); }
.mas-bulle-gloss, .mas-bulle-pensee { display: block; margin-top: .15rem; font-size: .84rem; font-style: italic; font-weight: 400; color: var(--encre-doux); }
.mas-indice { margin: .1rem 0 0; text-align: center; font-size: .9rem; font-style: italic; color: var(--encre-doux); }
.mas-indice[hidden] { display: none; }

.mas-trou {
  display: inline-block; min-width: 3.4rem; padding: 0 .5rem; text-align: center;
  border-bottom: 2px dashed var(--terre); color: var(--terre); letter-spacing: .12em;
}
.mas-remplie { display: inline-block; font-weight: 800; color: var(--terre); padding: 0 .15rem; }
.mas-remplie--pose { animation: masTombe .4s var(--rebond) both; transform-origin: top center; }
@keyframes masTombe {
  from { opacity: 0; transform: perspective(500px) rotateX(-90deg); }
  to   { opacity: 1; transform: perspective(500px) rotateX(0); }
}

.mas-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .1rem 0 .2rem; }
.mas-chip {
  font: inherit; font-weight: 700; color: var(--terre); cursor: pointer;
  background: var(--blanc-chaud); border: 2px solid var(--bord); border-radius: 999px; padding: .4rem .9rem;
  transition: transform var(--transi), border-color var(--transi), background var(--transi), color var(--transi);
}
.mas-chip:hover, .mas-chip:focus-visible { transform: translateY(-2px) rotateX(10deg); border-color: var(--terre); }
.mas-chip.est-choisi { background: var(--terre); color: #fff; border-color: transparent; }

.mas-rep { color: var(--terre); font-weight: 800; }
.mas-rep-faux { color: var(--rouge); font-weight: 700; text-decoration: line-through; }

/* Les rouleaux : une fenêtre qui masque le tambour, deux flèches. */
.exv-rouleaux { display: flex; gap: 1.4rem; justify-content: center; }
.exv-rouleau { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.exv-rouleau-nom {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--encre-doux);
}
.exv-fenetre {
  position: relative; width: 9.5rem; height: 84px; overflow: hidden;
  perspective: 480px; border: 1px solid var(--bord); border-radius: var(--r-m);
  background: var(--carte-vive); box-shadow: inset 0 0 14px rgba(6, 42, 82, .08);
}
/* Les bords s'estompent : on devine la face suivante, comme sur un vrai tambour. */
.exv-fenetre::before, .exv-fenetre::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22px; z-index: 2; pointer-events: none;
}
.exv-fenetre::before { top: 0; background: linear-gradient(#fff, transparent); }
.exv-fenetre::after { bottom: 0; background: linear-gradient(transparent, #fff); }
.exv-tambour {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .4s var(--rebond);
}
.exv-face {
  position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  line-height: 1.1;
}
.exv-face b { font-family: var(--police-titres); font-size: 1.12rem; color: var(--titre); }
/* La note « le pronom est optionnel » sur l'écran de départ : plus discrète. */
.exv-note-pronom {
  max-width: 560px; margin-inline: auto; font-size: .9rem; font-style: italic;
  color: var(--encre-doux); border-left: 3px solid var(--or); padding-left: .9rem; text-align: left;
}

.exv-btn {
  display: grid; place-items: center; width: 2rem; height: 1.6rem;
  border: 1px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud);
  color: var(--terre); cursor: pointer;
  transition: background var(--transi), color var(--transi), transform var(--transi);
}
.exv-btn:hover { background: var(--terre); color: #fff; }
.exv-btn:active { transform: scale(.92); transition-duration: .08s; }
.exv-btn .i { width: 1rem; height: 1rem; }
.exv-btn .i.est-haut { transform: rotate(180deg); }

.exv-actions { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; flex-wrap: wrap; justify-content: center; }

/* La forme juste du verso garde ses segments colorés. */
.exv-bonne { font-size: clamp(1.5rem, 5vw, 2.1rem); }

@media (prefers-reduced-motion: reduce) {
  .exv-tambour { transition: none; }
}

@media (max-width: 420px) {
  .exv-carte { min-height: 29rem; }
  .exv-rouleaux { gap: .8rem; }
  .exv-fenetre { width: 8rem; }
}

/* -------------------- 12j-quinquies. L'exercice des nombres : le compteur -------------------- */
/* Trois sens (lire, écouter, écrire) dans la carte à deux faces. La
   signature 3D de cet exercice : les PALETTES, des chiffres qui tombent
   en basculant (rotateX) comme un tableau d'affichage de gare, l'un
   après l'autre. Les nombres en lettres réutilisent les briques
   colorées de la page Nombres (.brq). */
.exn-carte { min-height: 24rem; }

.exn-affichage { min-height: 4.6rem; display: grid; place-items: center; width: 100%; }
.exn-phrase { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.exn-phrase--mini .brq { font-size: .76rem; padding: .14rem .45rem; }
.exn-cache {
  font-size: 2rem; letter-spacing: .3em; font-weight: 800;
  color: var(--encre-doux); font-family: var(--police-titres);
}

.exn-palettes {
  display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center;
  justify-content: center; perspective: 600px;
}
.exn-palette {
  display: grid; place-items: center; min-width: 2.2rem; height: 3rem; padding: 0 .3rem;
  font-family: var(--police-titres); font-size: 1.8rem; font-weight: 700; color: var(--or);
  border-radius: .5rem; box-shadow: var(--ombre-s);
  /* Deux volets : le haut un peu plus clair, la charnière au milieu. */
  background: linear-gradient(180deg, #17456f 0 48%, rgba(255, 255, 255, .18) 49% 51%, var(--nuit) 52% 100%);
  transform-origin: center top;
  animation: paletteTombe .5s var(--rebond) both;
}
.exn-palettes--mini .exn-palette {
  min-width: 1.35rem; height: 1.8rem; font-size: 1.05rem; border-radius: .3rem;
}
.exn-espace { width: .5rem; }

.exn-rappel { display: flex; justify-content: center; }
.exn-bonne { display: grid; place-items: center; width: 100%; }

@keyframes paletteTombe {   /* la palette bascule et se pose */
  0%   { transform: rotateX(-85deg); opacity: 0; }
  60%  { transform: rotateX(14deg); opacity: 1; }
  100% { transform: rotateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .exn-palette { animation: none; }
}

@media (max-width: 420px) {
  .exn-carte { min-height: 26rem; }
  .exn-palette { min-width: 1.8rem; height: 2.5rem; font-size: 1.45rem; }
}

/* -------------------- 12j-sexies. La phrase en morceaux (page /jeu-phrase) -------------------- */
/* Un nuage de tuiles qui flottent en vraie 3D (chacune sa rotation et sa
   profondeur, posées en variables CSS par js/jeu-phrase.js) au-dessus
   d'une ligne à creux. On tape une tuile, elle se range ; on la retape,
   elle repart flotter. Réussite : la vague d'or. Échec : la phrase se
   révèle tuile après tuile. */
.jp-scene { perspective: 900px; max-width: 620px; margin: 0 auto; }
.jp-scene[hidden] { display: none; }
.jp-carte {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  min-height: 24rem; padding: 1.6rem 1.3rem; text-align: center;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-top: 5px solid var(--bleu); border-radius: var(--r-l);
  box-shadow: var(--ombre-m); animation: quizEntre .55s var(--rebond) backwards;
}
.jp-carte .quiz-demande { margin: 0; }

.jp-sens-ligne { display: flex; align-items: center; gap: .6rem; margin: 0; flex-wrap: wrap; justify-content: center; }
.jp-sens {
  font-family: var(--police-titres); font-weight: 800; color: var(--titre);
  font-size: clamp(1.15rem, 3.6vw, 1.55rem); line-height: 1.2;
}
.jp-sens-ligne .quiz-ecouter { margin: 0; }

/* La ligne : un creux par mot attendu, la tuile vient s'y poser. */
.jp-ligne {
  display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center;
  min-height: 3rem; padding: .55rem; width: 100%;
  border: 2px dashed var(--bord); border-radius: var(--r-m);
  background: rgba(255, 255, 255, .55);
  transition: border-color var(--transi), box-shadow var(--transi);
}
.jp-ligne.est-juste { border-color: var(--or); border-style: solid; box-shadow: 0 0 0 3px rgba(242, 183, 5, .25); }
.jp-ligne.est-secouee { animation: secouer .4s ease; }
.jp-creux {
  width: 4.6rem; height: 2.2rem; border-radius: var(--r-s);
  background: var(--sable); border: 1px dashed #d9c6a8;
}

/* Le nuage : les tuiles flottent, chacune avec sa pose 3D. */
.jp-nuage {
  display: flex; flex-wrap: wrap; gap: .6rem .7rem; justify-content: center;
  align-content: center; min-height: 7.5rem; width: 100%;
  transform-style: preserve-3d;
}
.jp-tuile {
  padding: .5rem .9rem; cursor: pointer;
  font-family: var(--police-titres); font-weight: 700; font-size: 1.02rem;
  color: var(--titre); background: var(--carte-vive);
  border: 1px solid var(--bord); border-bottom: 3px solid var(--ocre);
  border-radius: var(--r-m); box-shadow: var(--ombre-s);
  transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi), opacity var(--transi);
}
/* Dans le nuage : la pose 3D (variables posées par le script) et une
   respiration lente, décalée par tuile (2 delays : entrée, flottement). */
#jp-nuage .jp-tuile {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
  animation: monterCourt .35s var(--rebond) backwards, jpFlotte 3.2s ease-in-out infinite;
}
#jp-nuage .jp-tuile:hover:not(:disabled) {
  transform: rotateX(0) rotateY(0) translateZ(46px);
  border-color: var(--or); box-shadow: var(--ombre-m);
}
.jp-tuile:disabled { cursor: default; }
.jp-tuile.est-estompee { opacity: .38; }

/* Posée dans la ligne : à plat, ancrée. Juste : la vague d'or. */
#jp-ligne .jp-tuile { animation: monterCourt .28s var(--rebond) backwards; }
#jp-ligne .jp-tuile.est-juste {
  border-color: var(--or); border-bottom-color: var(--or);
  box-shadow: 0 0 0 2px rgba(242, 183, 5, .3), var(--ombre-s);
  animation: pop .45s var(--rebond) backwards;
}
#jp-ligne .jp-tuile.est-revelee { animation: jpRevele .5s var(--rebond) backwards; }

.jp-verdict {
  margin: 0; min-height: 1.4em; font-weight: 700;
  font-family: var(--police-titres); letter-spacing: .01em;
}
.jp-verdict.est-juste  { color: #1f8a4c; }
.jp-verdict.est-encore { color: #b5701f; }
.jp-verdict.est-rate   { color: var(--rouge); }
.jp-verdict:not(:empty) { animation: pop .4s var(--rebond); }

@keyframes jpFlotte {     /* la tuile respire dans le nuage */
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -5px; }
}
@keyframes jpRevele {     /* la phrase se révèle tuile après tuile */
  from { opacity: 0; transform: rotateY(-80deg); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jp-carte, #jp-nuage .jp-tuile, #jp-ligne .jp-tuile { animation: none; }
}

@media (max-width: 420px) {
  .jp-carte { padding: 1.2rem .8rem; min-height: 25rem; }
  .jp-creux { width: 3.9rem; height: 2rem; }
  .jp-tuile { font-size: .92rem; padding: .45rem .7rem; }
}

/* -------------------- 12j-septies. Bwato, la pirogue (page /jeu-bwato) -------------------- */
/* Le pendu revisité : une pirogue sur le fleuve s'enfonce d'un cran par
   erreur (variable --enfonce posée par js/jeu-bwato.js) en tanguant.
   Les cases du mot se retournent en vraie 3D quand une lettre est
   trouvée, et le clavier est l'alphabet lingala réel : voyelles (dont
   ɛ et ɔ), consonnes, et les paires mb/nd/ng… en touches à part. */
.bw-scene { max-width: 620px; margin: 0 auto; }
.bw-scene[hidden] { display: none; }
.bw-carte {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  padding: 1.3rem 1.1rem 1.6rem; text-align: center;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-top: 5px solid var(--bleu); border-radius: var(--r-l);
  box-shadow: var(--ombre-m); animation: quizEntre .55s var(--rebond) backwards;
}

/* Le fleuve : deux bandes d'eau qui glissent, la pirogue par-dessus. */
.bw-fleuve {
  position: relative; width: 100%; height: 7.2rem; overflow: hidden;
  border-radius: var(--r-m); perspective: 700px;
  background: linear-gradient(#eaf4ff 0 55%, #9ec9ee 55% 100%);
}
.bw-eau {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 45%;
  background:
    radial-gradient(14px 9px at 14px 6px, #7db4e2 45%, transparent 47%) 0 0/56px 18px repeat-x,
    linear-gradient(#8ec0ea, #5f9fd6);
  animation: bwCourant 7s linear infinite;
  z-index: 2; opacity: .92;
}
.bw-pirogue {
  position: absolute; left: 50%; bottom: 34%; width: 8.2rem; z-index: 1;
  margin-left: -4.1rem;
  transform: translateY(calc(var(--enfonce, 0) * 5px));
  transition: transform .45s ease;
  animation: bwTangue 3.6s ease-in-out infinite;
}
.bw-pirogue svg { width: 100%; height: auto; display: block; }
/* Une erreur : la pirogue pique du nez. */
.bw-pirogue.est-touchee { animation: bwPlonge .55s ease, bwTangue 3.6s ease-in-out .55s infinite; }
/* Sauvée : elle file vers l'horizon. Coulée : elle passe sous l'eau. */
.bw-pirogue.est-sauvee {
  animation: none;
  /* Sauvée : elle se redresse (plus d'enfoncement) et file à droite. */
  transform: translateX(300%) translateY(-10px) scale(.6);
  transition: transform 1.4s ease-in;
}
.bw-pirogue.est-coulee {
  animation: none; z-index: 1;
  transform: translateY(64px) rotate(24deg); opacity: .45;
  transition: transform 1.2s ease-in, opacity 1.2s ease-in;
}

/* Le mot : une case par lettre (ou paire), qui se retourne en 3D. */
.bw-mot {
  display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center;
  perspective: 600px; min-height: 2.6rem;
}
.bw-case { display: block; width: 2.15rem; height: 2.6rem; }
.bw-case-int {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .5s var(--rebond);
}
.bw-case.est-vue .bw-case-int { transform: rotateX(180deg); }
.bw-case .bw-face {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: var(--r-s); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font-family: var(--police-titres); font-weight: 700; font-size: 1.25rem;
}
.bw-face--dos { background: var(--sable); color: #c9b28d; border: 1px dashed #d9c6a8; }
.bw-face--lettre {
  background: var(--carte-vive); color: var(--titre);
  border: 1px solid var(--bord); border-bottom: 3px solid var(--or);
  transform: rotateX(180deg);
}
.bw-case.est-manquee .bw-face--lettre { color: var(--rouge); border-bottom-color: var(--rouge); }

/* Le clavier lingala : voyelles teintées d'or, paires teintées d'ocre. */
.bw-clavier { display: flex; flex-direction: column; gap: .34rem; width: 100%; }
.bw-rangee { display: flex; gap: .34rem; justify-content: center; flex-wrap: wrap; }
.bw-touche {
  min-width: 2.15rem; height: 2.3rem; padding: 0 .45rem; cursor: pointer;
  font-family: var(--police-titres); font-weight: 700; font-size: 1rem;
  color: var(--titre); background: var(--carte-vive);
  border: 1px solid var(--bord); border-bottom: 3px solid #cbd8e6;
  border-radius: var(--r-s);
  transition: transform .12s ease, background var(--transi), border-color var(--transi), opacity var(--transi);
}
.bw-touche--voyelle { background: #fdf3d7; border-bottom-color: var(--or); }
.bw-touche--paire { background: #f8e9de; border-bottom-color: var(--ocre); font-size: .92rem; }
.bw-touche:not(:disabled):hover { transform: translateY(-2px); border-color: var(--or); }
.bw-touche:not(:disabled):active { transform: translateY(1px); border-bottom-width: 1px; }
.bw-touche:disabled { cursor: default; }
.bw-touche.est-trouvee { background: #e5f4ea; border-color: #2a9d5c; border-bottom-color: #2a9d5c; color: #1a7a43; }
.bw-touche.est-ratee { background: #fdecee; border-color: var(--rouge); border-bottom-color: var(--rouge); color: var(--rouge); opacity: .6; }

@keyframes bwCourant {    /* l'eau glisse d'une tuile de vague */
  to { background-position-x: -56px, 0; }
}
@keyframes bwTangue {     /* la pirogue respire sur l'eau */
  0%, 100% { rotate: -2.2deg; }
  50%      { rotate: 2.2deg; }
}
@keyframes bwPlonge {     /* une erreur : elle pique du nez */
  30% { rotate: -7deg; margin-top: 7px; }
  65% { rotate: 4deg; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-carte, .bw-pirogue, .bw-eau { animation: none; }
  .bw-case-int, .bw-pirogue { transition: none; }
}

@media (max-width: 420px) {
  .bw-carte { padding: 1rem .6rem 1.3rem; }
  .bw-fleuve { height: 6rem; }
  .bw-case { width: 1.85rem; height: 2.3rem; }
  .bw-case .bw-face { font-size: 1.05rem; }
  .bw-touche { min-width: 1.9rem; height: 2.15rem; font-size: .92rem; padding: 0 .3rem; }
}

/* -------------------- 12j-octies. Momekano, le grand bilan (page /exo-momekano) -------------------- */
/* L'examen blanc : la carte à deux faces des exercices, dont le recto
   change d'habillage selon la question (mot, machine à rouleaux, briques
   de nombres — tous les styles existent déjà). Ici, seulement les
   étiquettes de compétence du détail et le champ escamotable. */
.mk-verbe { display: flex; flex-direction: column; align-items: center; gap: .55rem; width: 100%; }
.mk-champ-ligne { flex: 1; display: flex; min-width: 0; }
.mk-champ-ligne .exo-champ { flex: 1; min-width: 0; }
.mk-champ-ligne[hidden] { display: none; }

/* L'étiquette de compétence, dans le détail du profil. */
.mk-tag {
  flex: none; align-self: center; padding: .16rem .55rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; white-space: nowrap; color: #fff;
}
.mk-tag--voc    { background: var(--bleu); }
.mk-tag--verbe  { background: var(--ocre); }
.mk-tag--nombre { background: var(--or); color: var(--nuit); }
.mk-tag--masolo { background: var(--terre); }
.mk-masolo { width: 100%; }

/* -------------------- 12k. Pages courtes (Contact, FAQ, Feedback, Dons) -------------------- */
/* Un mot au centre, un bouton s'il y a lieu. En attendant leur vrai contenu. */
.page-mini { max-width: 600px; margin: 0 auto; text-align: center; }
.page-mini p { color: var(--encre-doux); font-size: 1.1rem; margin: 0 0 1.6rem; }
.page-mini p:last-child { margin-bottom: 0; }

/* -------------------- 12l. Participer (contact · avis · don) -------------------- */
/* Trois volets pour éviter tout long défilement. Chaque volet entre en 3D
   (rotateX), les cartes s'inclinent au survol (data-tilt de main.js). Ton
   chaleureux et incitatif, sans jamais forcer. */
.part-section .volet { animation: part-volet3d .5s var(--rebond) both; transform-origin: top center; }
@keyframes part-volet3d {
  from { opacity: 0; transform: perspective(1100px) rotateX(-16deg) translateY(16px); }
  to   { opacity: 1; transform: perspective(1100px) rotateX(0) translateY(0); }
}

/* La carte centrale, partagée par « contact » et « soutenir ». */
.part-carte {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-top: 4px solid var(--or); border-radius: var(--r-m);
  padding: 2rem 1.7rem; box-shadow: 0 14px 34px rgba(44, 33, 23, .12);
  display: grid; gap: .9rem; justify-items: center;
}
.part-carte h2 { font-size: 1.4rem; color: var(--titre); margin: 0; }
.part-carte p { color: var(--encre-doux); margin: 0; max-width: 46ch; }
.part-carte-icone { width: 2.4rem; height: 2.4rem; color: var(--terre); }
.part-carte .btn { margin-top: .4rem; }

.part-puces { list-style: none; margin: .2rem 0 .3rem; padding: 0; display: grid; gap: .55rem; text-align: left; }
.part-puces li { position: relative; padding-left: 1.9rem; color: var(--encre); font-size: .98rem; }
.part-puces li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--or); color: var(--nuit); font-weight: 700; font-size: .78rem;
  display: grid; place-items: center;
}

/* Le formulaire d'avis. */
.part-form { max-width: 560px; margin: 0 auto; display: grid; gap: 1.1rem; }
.part-form-intro { text-align: center; color: var(--encre-doux); margin: 0; }
.part-chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.part-chips legend { width: 100%; text-align: center; font-weight: 700; color: var(--titre); margin-bottom: .5rem; padding: 0; }
.part-chip {
  border: 2px solid var(--bord); background: var(--blanc-chaud); color: var(--encre);
  border-radius: 999px; padding: .4rem .95rem; font-weight: 700; font-size: .9rem;
  font-family: var(--police-titres); cursor: pointer;
  transition: transform var(--transi), background var(--transi), border-color var(--transi), color var(--transi);
}
.part-chip:hover { transform: translateY(-2px); }
.part-chip.est-actif { background: var(--terre); border-color: transparent; color: #fff; animation: pop .3s var(--rebond); }

.part-champs { display: grid; gap: 1rem; }
@media (min-width: 560px) { .part-champs { grid-template-columns: 1fr 1fr; } }
.part-label { display: grid; gap: .35rem; text-align: left; }
.part-label > span { font-weight: 700; color: var(--titre); font-size: .92rem; }
.part-message { resize: vertical; min-height: 8.5rem; line-height: 1.5; font-size: 1rem; }

.part-consent {
  display: flex; align-items: flex-start; gap: .6rem; text-align: left;
  background: var(--sable); border: 1px solid var(--bord); border-radius: var(--r-m);
  padding: .8rem 1rem; color: var(--encre); font-size: .92rem; cursor: pointer;
}
.part-consent input { margin-top: .15rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--terre); }
.part-envoyer { justify-self: center; }
.part-form-note { text-align: center; color: var(--encre-doux); font-size: .86rem; font-style: italic; margin: 0; }

/* Le volet « soutenir » : un cœur qui bat, PayPal en bouton et en QR. */
.part-don { border-top-color: var(--rouge); }
.part-coeur { font-size: 2.2rem; color: var(--rouge); line-height: 1; animation: battement 2.6s ease-in-out infinite; }
@keyframes battement { 0%, 34%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1.06); } }
.part-don-actions { display: grid; gap: 1.2rem; justify-items: center; margin-top: .3rem; }
@media (min-width: 520px) { .part-don-actions { grid-template-columns: auto auto; align-items: center; } }
.part-qr { margin: 0; display: grid; justify-items: center; gap: .45rem; }
.part-qr img { width: 140px; height: 140px; border-radius: var(--r-m); border: 1px solid var(--bord); background: #fff; padding: .3rem; box-shadow: var(--ombre-s); }
.part-qr figcaption { font-size: .82rem; color: var(--encre-doux); max-width: 16ch; line-height: 1.35; }
.part-don-merci { color: var(--terre); font-weight: 700; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .part-section .volet { animation: none; }
  .part-coeur { animation: none; }
}

/* -------------------- 12m. FAQ (confiance · accordéon 3D) -------------------- */
/* Un bandeau de confiance (promesses tenues), puis des questions en
   accordéon : une seule ouverte à la fois, la réponse se déplie en 3D
   (rotateX) pendant que sa hauteur passe de 0fr à 1fr. Ton pro et rassurant. */
.faq-confiance-section { padding-bottom: 0; }
.faq-confiance {
  list-style: none; margin: 0 auto; padding: 0; max-width: 920px;
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center;
}
.faq-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-radius: 999px; padding: .55rem 1.05rem; box-shadow: var(--ombre-s);
  font-weight: 700; font-size: .9rem; color: var(--titre);
}
.faq-badge .i { width: 1.15rem; height: 1.15rem; color: var(--terre); flex: none; }
.faq-badge-pic {
  flex: none; display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--or); color: var(--nuit); font-weight: 800; font-size: .76rem;
}

.faq-enveloppe { max-width: 760px; }
/* Spécificité .faq-section … pour battre « .section h2 » (qui remet le
   margin à 0) et espacer nettement les trois sections. */
.faq-section .faq-groupe-titre {
  color: var(--titre); margin: 4.5rem 0 1.1rem;
  padding-left: .8rem; border-left: 4px solid var(--or);
}
.faq-section .faq-groupe-titre:first-of-type { margin-top: 1rem; }
.faq-liste { display: grid; gap: .7rem; }
.faq-item {
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-radius: var(--r-m); box-shadow: var(--ombre-s); overflow: hidden;
  transition: border-color var(--transi), box-shadow var(--transi);
}
.faq-item:hover { border-color: var(--ocre); box-shadow: var(--ombre-m); }
.faq-item.est-ouvert { border-color: var(--ocre); }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font: inherit; font-weight: 700; font-size: 1.02rem; color: var(--titre);
  font-family: var(--police-titres); padding: 1rem 1.2rem;
}
.faq-q:hover { background: rgba(224, 151, 63, .08); }
.faq-chevron { width: 1.2rem; height: 1.2rem; color: var(--ocre); flex: none; transition: transform var(--transi); }
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-r-boite { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1); }
.faq-item.est-ouvert .faq-r-boite { grid-template-rows: 1fr; }
.faq-r {
  min-height: 0; overflow: hidden; padding: 0 1.2rem;
  transform-origin: top center; transform: perspective(900px) rotateX(-7deg); opacity: .35;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .4s ease, padding .4s cubic-bezier(.4, 0, .2, 1);
}
.faq-item.est-ouvert .faq-r { transform: perspective(900px) rotateX(0); opacity: 1; padding: .1rem 1.2rem 1.1rem; }
.faq-r p { margin: 0; color: var(--encre-doux); line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .faq-r { transition: opacity .2s ease, padding .2s ease; transform: none; }
  .faq-r-boite { transition: none; }
}

/* -------------------- 12n. Accueil (fond Afrique · compteur · aperçu) -------------------- */
/* Le continent africain en filigrane, fixé derrière toute la page. Il flotte
   doucement pour donner de la profondeur, sans jamais gêner la lecture. */
.acc-fond {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  display: grid; place-items: center; overflow: hidden;
}
.acc-afrique {
  width: min(130vw, 860px); height: auto;
  fill: var(--terre); opacity: .07;
  filter: drop-shadow(0 20px 60px rgba(193, 90, 52, .25));
  animation: accFlotte 16s ease-in-out infinite;
}
@keyframes accFlotte {
  0%, 100% { transform: translateY(-1.4%) rotate(-1deg); }
  50%      { transform: translateY(1.4%)  rotate(1deg); }
}

/* Les boutons « Installer » (héros et pied) restent cachés tant que le
   navigateur ne propose pas l'installation (js/main.js § 6). */
.action-installer[hidden] { display: none; }
.acc-partager.est-copie { background: #1f8a4c; color: #fff; }

/* Sur l'accueil, les blocs n'apparaissent pas à plat : ils se redressent
   en 3D en entrant à l'écran (la règle générique .est-visible les ramène). */
.acc [data-apparait]:not(.est-visible) {
  transform: perspective(1000px) rotateX(10deg) translateY(34px);
}

/* ---- Les rubans : la langue coule sous le héros ---- */
.acc-rubans { position: relative; padding: 1.6rem 0 .4rem; overflow: hidden; }
.acc-ruban {
  width: 104%; margin-left: -2%;
  background: linear-gradient(100deg, var(--nuit), #17456f);
  color: #f7d572; box-shadow: var(--ombre-s);
  overflow: hidden; padding: .5rem 0;
}
.acc-ruban-1 { transform: rotate(-1.4deg); }
.acc-ruban-2 { transform: rotate(1deg); margin-top: .55rem; color: var(--ocre); background: linear-gradient(100deg, #17456f, var(--nuit)); }
.acc-ruban-file { display: flex; width: max-content; animation: accDefile 36s linear infinite; }
.acc-ruban-2 .acc-ruban-file { animation-direction: reverse; animation-duration: 42s; }
.acc-ruban-groupe {
  display: flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem;
  font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem;
  white-space: nowrap;
}
.acc-ruban-groupe i { font-style: normal; font-size: .55rem; opacity: .55; }

/* ---- Les cartes-mots parlantes (flip 3D + audio) ---- */
.acc-mots-jeu {
  display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr);
  max-width: 980px; margin-inline: auto;
}
@media (min-width: 620px)  { .acc-mots-jeu { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px)  { .acc-mots-jeu { grid-template-columns: repeat(6, 1fr); } }
.acc-mot3d {
  position: relative; height: 150px; padding: 0; border: 0;
  background: transparent; cursor: pointer; font: inherit;
  perspective: 800px; animation: accLevite 5.5s ease-in-out infinite;
}
.acc-mot3d:nth-child(2) { animation-delay: -1.1s; }
.acc-mot3d:nth-child(3) { animation-delay: -2.3s; }
.acc-mot3d:nth-child(4) { animation-delay: -3.4s; }
.acc-mot3d:nth-child(5) { animation-delay: -4.2s; }
.acc-mot3d:nth-child(6) { animation-delay: -1.8s; }
.acc-mot3d-int {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .65s var(--rebond);
}
.acc-mot3d:not(.est-tournee):hover .acc-mot3d-int { transform: rotateY(24deg); }
.acc-mot3d.est-tournee .acc-mot3d-int { transform: rotateY(180deg); }
.acc-mot3d-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: grid; place-items: center; align-content: center; gap: .3rem;
  border-radius: var(--r-m);
  font-family: var(--police-titres); font-weight: 700; font-size: 1.25rem;
}
.acc-mot3d-avers {
  color: var(--or);
  background:
    url("/medias/motif-kuba.svg") 0 0/48px repeat,
    linear-gradient(155deg, #17456f, var(--nuit));
  background-blend-mode: soft-light, normal;
  border: 1px solid rgba(242, 183, 5, .4);
  box-shadow: 0 10px 24px rgba(12, 35, 64, .3);
}
.acc-mot3d-son { width: 1.05rem; height: 1.05rem; opacity: .65; }
.acc-mot3d-revers {
  transform: rotateY(180deg);
  color: var(--nuit);
  background: linear-gradient(155deg, #ffd75e, var(--or));
  box-shadow: 0 10px 24px rgba(242, 183, 5, .35);
}

/* ---- Les portes : la vitrine du site en scènes 3D ----
   Deux rangées types : les portes jumelles (2 colonnes) et les portes
   de hub (3 colonnes, comme Apprendre et S'entraîner dans le menu). */
.acc-portes { display: grid; gap: 1.1rem; margin-top: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .acc-portes-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .acc-portes-3 { grid-template-columns: repeat(3, 1fr); } }
/* Apprendre et S'entraîner se suivent comme un seul ensemble. */
.acc-apprendre { padding-bottom: 0; }
.acc-porte {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-radius: var(--r-l); box-shadow: var(--ombre-s);
  transition: box-shadow var(--transi);
  will-change: transform;   /* inclinaison 3D pilotée par js/main.js (data-tilt) */
}
.acc-porte:hover { box-shadow: var(--ombre-m); }
.acc-scene {
  position: relative; min-height: 150px; overflow: hidden;
  display: grid; place-items: center; perspective: 700px;
  background:
    radial-gradient(420px 200px at 50% 120%, rgba(242, 183, 5, .18), transparent 70%),
    url("/medias/motif-kuba.svg") 0 0/48px repeat,
    linear-gradient(160deg, #17456f, var(--nuit));
  background-blend-mode: normal, soft-light, normal;
}
.acc-porte-corps { flex: 1; display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem 1.35rem 1.4rem; }
.acc-porte-corps h3 { font-size: 1.28rem; margin: 0; }
.acc-porte-corps p { margin: 0; color: var(--encre-doux); font-size: .96rem; }
.acc-porte-liens { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.acc-porte-liens .i { width: .95em; height: .95em; }

/* Bouton fantôme foncé, lisible sur les cartes claires. */
.btn-fantome-sombre { background: transparent; color: var(--terre); border-color: var(--terre); padding: .5rem 1rem; font-size: .92rem; }
.btn-fantome-sombre:hover { background: var(--terre); color: #fff; }

/* Scène dictionnaire : une pile de cartes, celle du dessus se retourne. */
.acc-pile { position: relative; width: 128px; height: 76px; transform-style: preserve-3d; transform: rotateX(14deg); }
.acc-pile-carte {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 12px; font-family: var(--police-titres); font-weight: 700;
  font-size: 1.1rem; color: var(--nuit);
  background: linear-gradient(160deg, var(--blanc-chaud), var(--sable));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}
.acc-pile-c3 { transform: translateY(16px) translateZ(-28px) rotate(-4deg); opacity: .55; }
.acc-pile-c2 { transform: translateY(8px)  translateZ(-14px) rotate(3deg);  opacity: .8; }
.acc-pile-flip {
  position: absolute; inset: 0; transform-style: preserve-3d;
  animation: accFlipLoop 6s ease-in-out infinite;
}
.acc-pile-avers, .acc-pile-revers { backface-visibility: hidden; }
.acc-pile-revers { transform: rotateY(180deg); background: linear-gradient(160deg, #ffd75e, var(--or)); }

/* Scène jeux : le dé roule sans fin (vrai cube 6 faces). */
.acc-de {
  position: relative; width: 58px; height: 58px;
  transform-style: preserve-3d;
  /* Pose de repos (aussi la pose « moins d'animations ») ; l'animation l'emporte. */
  transform: rotateX(-24deg) rotateY(32deg) rotateZ(-8deg);
  animation: accDeRoule 12s linear infinite;
}
.acc-de-face {
  position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(160deg, #fffdf8, #ecdfc6);
  border: 1px solid rgba(12, 35, 64, .25);
  box-shadow: inset 0 0 10px rgba(12, 35, 64, .12);
}
/* Les points de chaque face, en dégradés radiaux empilés. */
.acc-de-f1 { transform: translateZ(29px);
  background: radial-gradient(circle 5px at 50% 50%, var(--rouge) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); }
.acc-de-f2 { transform: rotateY(90deg) translateZ(29px);
  background: radial-gradient(circle 4.5px at 30% 30%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 70%, var(--nuit) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); }
.acc-de-f3 { transform: rotateY(180deg) translateZ(29px);
  background: radial-gradient(circle 4.5px at 26% 26%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 50% 50%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 74% 74%, var(--nuit) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); }
.acc-de-f4 { transform: rotateY(-90deg) translateZ(29px);
  background: radial-gradient(circle 4.5px at 30% 30%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 30%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 30% 70%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 70%, var(--nuit) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); }
.acc-de-f5 { transform: rotateX(90deg) translateZ(29px);
  background: radial-gradient(circle 4.5px at 28% 28%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 72% 28%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 50% 50%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 28% 72%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 72% 72%, var(--nuit) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); }
.acc-de-f6 { transform: rotateX(-90deg) translateZ(29px);
  background: radial-gradient(circle 4.5px at 30% 26%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 26%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 30% 50%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 50%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 30% 74%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 74%, var(--nuit) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); }

/* Scène bible : le livre ouvert, les pages tournent l'une après l'autre. */
.acc-livre { position: relative; width: 120px; height: 78px; transform-style: preserve-3d; transform: rotateX(38deg); }
.acc-livre-plat {
  position: absolute; inset: -6px -6px -8px; border-radius: 8px;
  background: linear-gradient(160deg, #1c5488, var(--indigo));
  box-shadow: 0 14px 26px rgba(0, 0, 0, .38);
}
.acc-livre-feuille {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #e9dfc8 0 49.6%, #d9cbab 49.6% 50.4%, #f5eeda 50.4% 100%);
  border-radius: 4px;
}
.acc-livre-page {
  position: absolute; top: 0; bottom: 0; left: 50%; right: 0;
  background: linear-gradient(100deg, #fffdf8, #efe6cf);
  border-radius: 0 4px 4px 0;
  transform-origin: left center; animation: accPageTourne 5.4s ease-in-out infinite;
}
.acc-livre-p2 { animation-delay: .35s; opacity: .92; }
.acc-livre-p3 { animation-delay: .7s;  opacity: .85; }
.acc-livre-titre {
  position: absolute; left: 0; right: 0; bottom: -34px; text-align: center;
  font-family: var(--police-titres); font-weight: 700; font-size: .95rem;
  color: #f7d572; letter-spacing: .12em; text-transform: uppercase;
}
.acc-scene-bible { perspective: 500px; }

/* Scène bases : les lettres propres au lingala flottent en profondeur. */
.acc-lettre {
  position: absolute; font-family: var(--police-titres); font-weight: 700;
  line-height: 1; text-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  animation: accLettreFlotte 6s ease-in-out infinite;
}
.acc-lettre-1 { left: 22%; top: 26%; font-size: 3.2rem; color: var(--or); }
.acc-lettre-2 { left: 56%; top: 14%; font-size: 2.3rem; color: var(--ocre); animation-delay: -2s; }
.acc-lettre-3 { left: 68%; top: 48%; font-size: 2.8rem; color: #9cc4ef; animation-delay: -3.6s; }
.acc-lettre-4 { left: 38%; top: 54%; font-size: 1.9rem; color: #e98b63; animation-delay: -4.8s; }

/* Scène nombres : le rouleau compte en lingala derrière une fenêtre. */
.acc-rouleau {
  height: 66px; overflow: hidden; padding-inline: 1.2rem;
  border-radius: 12px; background: rgba(6, 18, 36, .55);
  border: 1px solid rgba(242, 183, 5, .3);
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}
.acc-rouleau-liste { display: grid; animation: accRouleau 6.5s ease-in-out infinite; }
.acc-rouleau-liste span {
  height: 66px; display: flex; align-items: center; gap: .7rem;
  font-family: var(--police-titres); font-weight: 700; font-size: 1.25rem; color: #e7eef7;
}
.acc-rouleau-liste b { color: var(--or); font-size: 1.7rem; }

/* Scène exercices : la coche se dessine, les étoiles félicitent. */
.acc-pastille {
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: 50%; color: #fff; background: linear-gradient(160deg, #27a55d, #1f8a4c);
  box-shadow: 0 12px 26px rgba(31, 138, 76, .45); animation: pouls 3.6s ease-in-out infinite;
}
.acc-coche { width: 36px; height: 36px; }
.acc-coche path { stroke-dasharray: 24; animation: accCoche 3.6s ease-in-out infinite; }
.acc-etoile { position: absolute; color: var(--or); animation: scintille 2.4s ease-in-out infinite; }
.acc-etoile-1 { left: 28%; top: 24%; font-size: 1.3rem; }
.acc-etoile-2 { right: 26%; bottom: 22%; font-size: 1rem; animation-delay: -1.2s; }

/* Scène histoire : le vinyle de rumba tourne sur la platine. */
.acc-platine { transform-style: preserve-3d; transform: rotateX(52deg); }
.acc-vinyle {
  position: relative; width: 150px; height: 150px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    repeating-radial-gradient(circle, #10131a 0 2px, #232a36 2px 4px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 255, 255, .06);
  animation: tourner 5s linear infinite;
}
.acc-vinyle::after {   /* reflet qui balaie le disque */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(transparent 0 40deg, rgba(255, 255, 255, .14) 60deg, transparent 90deg 220deg, rgba(255, 255, 255, .08) 240deg, transparent 270deg);
}
.acc-vinyle-label {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, #ffd75e, var(--or) 70%);
  color: var(--nuit); font-family: var(--police-titres); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .06em;
  box-shadow: inset 0 0 0 2px rgba(12, 35, 64, .3);
}
.acc-scene-hist { perspective: 460px; }

/* Scène participer : motema, le cœur, bat et rayonne. */
.acc-coeur {
  position: relative; width: 44px; height: 44px;
  background: linear-gradient(160deg, var(--rouge), var(--terre));
  transform: rotate(45deg); border-radius: 0 8px 0 8px;
  animation: pouls 1.7s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(206, 17, 38, .5));
}
.acc-coeur::before, .acc-coeur::after {
  content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: inherit;
}
.acc-coeur::before { left: -22px; top: 0; }
.acc-coeur::after  { left: 0; top: -22px; }
.acc-onde {
  position: absolute; width: 76px; height: 76px; border-radius: 50%;
  border: 2px solid rgba(242, 183, 5, .8);
  animation: accOnde 1.7s ease-out infinite;
}

/* ---- Le site en vie : chiffres qui montent + compteur de visites réel ---- */
/* Le bandeau suit le héros de près, et les rubans le suivent de près. */
.acc-vivant { padding-block: clamp(1.6rem, 4vw, 2.4rem); }
.acc-vivant-carte {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--r-l); padding: clamp(2rem, 6vw, 3.2rem);
  color: #fff; box-shadow: var(--ombre-m);
  background:
    url("/medias/motif-kuba.svg") 0 0/48px repeat,
    linear-gradient(150deg, #17456f, var(--nuit));
  background-blend-mode: soft-light, normal;
}
.acc-vivant-carte::before {   /* halo d'or au sommet */
  content: ""; position: absolute; top: -46%; left: 50%; width: 460px; height: 420px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(242, 183, 5, .22), transparent 70%);
}
.acc-stats {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.3rem .8rem; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .acc-stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .acc-stats { grid-template-columns: repeat(6, 1fr); } }
.acc-stats li { display: grid; gap: .15rem; }
.acc-stat-nb {
  font-family: var(--police-titres); font-weight: 800; line-height: 1;
  font-size: clamp(1.9rem, 4vw, 2.5rem); color: var(--or);
}
.acc-stat-label { font-size: .82rem; color: #c9d6e8; }
.acc-compteur {
  position: relative; margin-top: 1.8rem; padding-top: 1.7rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.acc-compteur-nb { margin: 0; display: grid; gap: .15rem; }
.acc-nombre {
  font-family: var(--police-titres); font-weight: 800; line-height: 1;
  font-size: clamp(2.6rem, 9vw, 4.4rem);
  background: linear-gradient(120deg, #ffd75e, var(--or), #f79d2c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.acc-compteur-label { font-weight: 700; color: #fff; font-size: 1.02rem; }
.acc-compteur-invite,
.acc-compteur-indispo { color: #aebfd6; margin: .7rem 0 0; }
.acc-compteur-indispo { display: none; }
.acc-compteur.est-indispo .acc-compteur-nb,
.acc-compteur.est-indispo .acc-compteur-invite { display: none; }
.acc-compteur.est-indispo .acc-compteur-indispo { display: block; }

/* La progression locale : la série de jours + « Reprendre » (0 compte,
   données du navigateur seulement — voir main.js § 7). */
.acc-progression {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .6rem 1rem; margin-top: 1.2rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.acc-prog-etoile { width: 22px; height: 22px; flex: none; fill: var(--or); filter: drop-shadow(0 3px 8px rgba(242, 183, 5, .4)); }
.acc-prog-texte { margin: 0; color: #e8eefb; font-weight: 700; }
.acc-prog-lien {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700;
  color: var(--or); border: 1px solid rgba(242, 183, 5, .55); border-radius: 999px;
  padding: .3rem .95rem; text-decoration: none;
  transition: background var(--transi), transform var(--transi);
}
.acc-prog-lien:hover { background: rgba(242, 183, 5, .14); transform: translateY(-2px); }
.acc-prog-lien .i { width: 1em; height: 1em; }

/* ---- L'appel final ---- */
.acc-final { padding-top: 0; text-align: center; }
.acc-cta-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

/* ---- Les animations de l'accueil ---- */
@keyframes accDefile { to { transform: translateX(-50%); } }
@keyframes accLevite {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes accFlipLoop {
  0%, 38%   { transform: rotateY(0); }
  50%, 88%  { transform: rotateY(180deg); }
  100%      { transform: rotateY(360deg); }
}
@keyframes accDeRoule {
  from { transform: rotateX(-18deg) rotateY(0)      rotateZ(-8deg); }
  to   { transform: rotateX(342deg) rotateY(360deg) rotateZ(-8deg); }
}
@keyframes accPageTourne {
  0%, 12%  { transform: rotateY(0); }
  48%, 62% { transform: rotateY(-178deg); }
  98%, 100%{ transform: rotateY(0); }
}
@keyframes accLettreFlotte {
  0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
  50%      { transform: translateY(-10px) rotate(5deg) scale(1.06); }
}
@keyframes accRouleau {
  0%, 22%   { transform: translateY(0); }
  33%, 55%  { transform: translateY(-25%); }
  66%, 88%  { transform: translateY(-50%); }
  100%      { transform: translateY(-75%); }
}
@keyframes accCoche {
  0%, 8%    { stroke-dashoffset: 24; }
  38%, 82%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 24; }
}
@keyframes accOnde {
  from { transform: scale(.6); opacity: .9; }
  to   { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .acc-afrique, .acc-ruban-file, .acc-mot3d, .acc-pile-flip, .acc-de,
  .acc-livre-page, .acc-lettre, .acc-rouleau-liste, .acc-pastille,
  .acc-coche path, .acc-etoile, .acc-vinyle, .acc-coeur, .acc-onde { animation: none; }
  .acc-rouleau-liste { transform: none; }
  .acc-onde { display: none; }   /* l'onde figée n'a pas de sens */
}

/* Page « document » (mentions légales) : des sections lisibles, alignées à
   gauche, avec un titre par bloc. */
.page-doc { max-width: 720px; margin: 0 auto; }
.page-doc-bloc + .page-doc-bloc { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--bord); }
.page-doc h2 { font-size: 1.3rem; color: var(--titre); margin: 0 0 .7rem; }
.page-doc-titre-i { display: flex; align-items: center; gap: .5rem; }
.page-doc-titre-i .i { width: 1.15rem; height: 1.15rem; color: var(--ocre); }
.page-doc p { color: var(--encre-doux); line-height: 1.75; margin: 0 0 .9rem; }
.page-doc p:last-child { margin-bottom: 0; }
.page-doc-mail { font-weight: 700; color: var(--terre); }
.page-doc-cta { margin-top: 2.4rem; }

/* ---- 12p. Mentions légales & confidentialité (la page confiance) ---- */
/* Le serment des zéros : bandeau nuit, cadenas 3D qui veille, trois tuiles. */
.ml-serment {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--nuit), var(--indigo) 75%);
  border-radius: var(--r-l); padding: 2rem 1.8rem; margin-bottom: 2.2rem;
  color: #e8eefb; box-shadow: var(--ombre-m);
}
.ml-serment::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('/medias/motif-kuba.svg'); opacity: .07;
}
.ml-scene { perspective: 700px; flex: 0 0 auto; }
.ml-cadenas { display: block; width: 128px; height: 128px; }
.ml-anse { fill: none; stroke: var(--or); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; }
.ml-corps { fill: var(--or); }
.ml-trou { fill: var(--nuit); }
.ml-tige { fill: none; stroke: var(--nuit); stroke-width: 6; stroke-linecap: round; }
.ml-eclat { fill: none; stroke: #ffd75e; stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.ml-serment-corps { flex: 1 1 320px; max-width: 560px; position: relative; }
.ml-serment-titre { margin: 0 0 1rem; font-size: 1.5rem; color: #fff; }
.ml-zeros { display: flex; gap: .8rem; flex-wrap: wrap; }
.ml-zero {
  flex: 1 1 110px; text-align: center; padding: .9rem .6rem;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-m);
}
.ml-zero-chiffre { display: block; font-family: var(--police-titres); font-size: 2.3rem; line-height: 1; color: var(--or); }
.ml-zero-mot { font-size: .85rem; color: #c9d6e8; }
.ml-serment-txt { margin: 1rem 0 0; color: #c9d6e8; }

/* Les cartes des volets : un liseré-signet coloré en haut, tilt 3D au survol. */
.ml-grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ml-carte {
  position: relative; background: var(--blanc-chaud); border: 1px solid var(--bord);
  border-radius: var(--r-m); padding: 1.3rem 1.2rem 1.15rem; box-shadow: var(--ombre-s);
  transition: box-shadow var(--transi);
}
.ml-carte:hover { box-shadow: var(--ombre-m); }
.ml-carte::before {
  content: ''; position: absolute; top: 0; left: 1.2rem; width: 34px; height: 5px;
  border-radius: 0 0 5px 5px; background: var(--bleu);
}
.ml-grille .ml-carte:nth-child(4n+2)::before { background: var(--or); }
.ml-grille .ml-carte:nth-child(4n+3)::before { background: var(--terre); }
.ml-grille .ml-carte:nth-child(4n)::before   { background: var(--rouge); }
.ml-carte h3 { margin: 0 0 .55rem; font-size: 1.08rem; color: var(--titre); }
.ml-carte .page-doc-titre-i { display: flex; align-items: center; gap: .5rem; }
.ml-carte p { margin: 0; font-size: .93rem; line-height: 1.7; color: var(--encre-doux); }
.ml-carte p + p { margin-top: .6rem; }
.ml-maj { margin: 2rem 0 0; text-align: center; font-size: .85rem; font-style: italic; color: var(--encre-doux); }
.ml-cta { margin: 1.4rem 0 0; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .ml-cadenas { animation: mlVeille 7s ease-in-out infinite; }
  .ml-anse { animation: mlAnse 2.2s ease-out both; }
  .ml-eclat { animation: scintille 2.8s ease-in-out infinite; }
  .ml-eclat + .ml-eclat { animation-delay: .7s; }
  .ml-eclat + .ml-eclat + .ml-eclat { animation-delay: 1.4s; }
}

/* ---- 12q. Page 404 (la route s'arrête, l'étoile veille) ---- */
.nf-section { text-align: center; padding-top: 4.5rem; padding-bottom: 4.5rem; }
.nf-chiffres {
  display: flex; align-items: center; justify-content: center; gap: .35rem; margin: 0;
  font-family: var(--police-titres); font-size: clamp(5rem, 16vw, 8.5rem); line-height: 1; color: var(--terre);
}
.nf-etoile { width: .82em; height: .82em; fill: var(--or); filter: drop-shadow(0 6px 14px rgba(242, 183, 5, .35)); }
.nf-devise { margin: 1.2rem 0 .3rem; font-family: var(--police-titres); font-size: 1.25rem; color: var(--or-fonce); }
.nf-titre { margin: 0 0 .8rem; font-size: 1.7rem; color: var(--titre); }
.nf-txt { max-width: 480px; margin: 0 auto 1.8rem; color: var(--encre-doux); line-height: 1.7; }
.nf-actions { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .nf-etoile { animation: nfTourne 7s linear infinite; }
}

/* -------------------- 13. Animations -------------------- */
@keyframes monter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes brillance {   /* reflet d'or qui traverse un texte (background-clip) */
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}
@keyframes nfTourne {     /* l'étoile de la page 404 tourne sur elle-même */
  from { transform: rotateY(0); }
  to   { transform: rotateY(360deg); }
}
@keyframes mlVeille {     /* le cadenas des mentions légales veille en 3D */
  0%, 100% { transform: rotateY(-14deg) translateY(0); }
  50%      { transform: rotateY(14deg) translateY(-6px); }
}
@keyframes mlAnse {       /* l'anse du cadenas se dessine et se verrouille */
  0%   { stroke-dashoffset: 100; opacity: .25; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes pouls {        /* respiration douce (guillemets de la citation) */
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}
@keyframes couler {       /* liseré tricolore qui glisse en continu */
  to { background-position: 200% 0; }
}
@keyframes couleFleuve {  /* le fleuve coule (tirets qui glissent) */
  to { stroke-dashoffset: -130; }
}
@keyframes tourner {      /* le disque de rumba */
  to { transform: rotate(360deg); }
}
@keyframes ecrire {       /* une ligne d'or s'écrit sur la page */
  0%   { stroke-dashoffset: 70; opacity: 0; }
  12%  { opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes flotter {      /* une note de musique s'envole */
  0%   { transform: translateY(10px); opacity: 0; }
  25%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(-16px); opacity: 0; }
}
@keyframes scintille {    /* petite étoile qui scintille */
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3) rotate(12deg); opacity: .72; }
}
@keyframes secouer {      /* paire ratée : la carte dit non */
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  50%      { transform: translateX(5px); }
  75%      { transform: translateX(-3px); }
}
@keyframes monterCourt {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pop {
  0%   { transform: scale(.85); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes heroRecul {   /* parallaxe : le texte du héros recule au défilement */
  to { transform: translateY(90px); opacity: .25; }
}
@keyframes deriveMotif {
  to { background-position: 48px 48px; }   /* une tuile : boucle sans couture */
}
@keyframes deriveFrise {
  to { background-position-x: 32px; }        /* une tuile de frise */
}
@keyframes quizEntre {    /* la carte-question bascule vers le joueur */
  from { opacity: 0; transform: rotateX(-82deg); }
  to   { opacity: 1; transform: rotateX(0); }
}
@keyframes nudgeBas {     /* le chevron de l'astuce invite à ouvrir (vers le bas) */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}