/* Sahel EDU — application de présentation premium (référence : demo_premium/DESIGN.md).
   Univers sombre assumé : la scène est une nuit verte, les cartes en papier ou en vert profond, l'or pour les filets.
   Mobile d'abord (360–430 px), puis tablette, ordinateur et projection. Aucune ressource extérieure.
   Mouvement : transform et opacity seulement (un clip-path de titre arabe) ; .reduit = fondus ≤ 200 ms. */

@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url(polices/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url(polices/poppins-700.woff2) format('woff2'); }
@font-face { font-family: 'Amiri'; font-weight: 400; font-display: swap; src: url(polices/amiri-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Amiri'; font-weight: 700; font-display: swap; src: url(polices/amiri-700.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

/* ------------------------------------------------------------------ jetons (DESIGN § 3) */
:root {
  color-scheme: dark;
  --nuit: #0F2418; --nuit-2: #16321F; --nuit-3: #1D3D28; --filet: #2E5039;
  --vert-profond: #1E4630; --vert: #2B6441; --vert-clair: #367A50;
  --or: #D3AF61; --or-clair: #EFD98F; --or-profond: #B8923F; --or-texte: #7A5510;
  --papier: #FAF9F6; --papier-2: #F1EEE5; --encre: #141814; --gris: #545B52;
  --blanc-nuit: #F4F2EB; --gris-nuit: #BCC7B9; --alerte-papier: #9A3B2E; --alerte-nuit: #E08A76;
  --f-titre: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-lire: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-ui: system-ui, -apple-system, Roboto, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --t-mention: clamp(.75rem, .7rem + .15vw, .875rem);
  --t-ui: clamp(.9375rem, .88rem + .2vw, 1.125rem);
  --t-corps: clamp(1rem, .94rem + .26vw, 1.25rem);
  --t-lire: clamp(1.125rem, .92rem + .9vw, 2rem);
  --t-h3: clamp(1.125rem, .98rem + .64vw, 1.75rem);
  --t-h2: clamp(1.375rem, 1.06rem + 1.4vw, 2.75rem);
  --t-h1: clamp(1.75rem, 1.23rem + 2.3vw, 4rem);
  --t-chiffre: clamp(2rem, 1.4rem + 2.6vw, 4.5rem);
  --il-lire: 1.45; --il-corps: 1.5;
  --r-s: 8px; --r-m: 14px; --r-l: 20px; --r-tel: 28px;
  --o-carte: 0 1px 0 var(--filet), 0 10px 24px rgb(0 0 0 / .28);
  --o-feuille: 0 -8px 24px rgb(0 0 0 / .35);
  --haut: 56px; --pouce: 72px;
  --courbe: cubic-bezier(.22,.61,.36,1);
  --d-micro: 120ms; --d-entree: 280ms; --d-titre: 900ms; --d-trans: 800ms; --d-flip: 700ms; --pas: 90ms;
}
.anim-en { --courbe: cubic-bezier(.2,.8,.2,1); --d-micro: 100ms; --d-entree: 220ms; --d-titre: 600ms; --d-trans: 520ms; --d-flip: 500ms; --pas: 60ms; }
.anim-ar { --courbe: cubic-bezier(.45,.05,.25,1); --d-micro: 140ms; --d-entree: 320ms; --d-titre: 1000ms; --d-trans: 900ms; --d-flip: 900ms; --pas: 110ms;
  --f-titre: 'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', serif;
  --f-lire: 'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', serif;
  --f-ui: system-ui, 'Noto Sans Arabic', 'Segoe UI', Tahoma, 'Geeza Pro', sans-serif;
  --t-lire: clamp(1.26rem, 1.03rem + 1vw, 2.24rem); --t-corps: clamp(1.12rem, 1.05rem + .29vw, 1.4rem); --t-ui: clamp(1.05rem, .98rem + .22vw, 1.26rem);
  --il-lire: 1.8; --il-corps: 1.7; }
.reduit { --d-micro: 0ms; --d-entree: 150ms; --d-titre: 150ms; --d-trans: 150ms; --d-flip: 150ms; --pas: 0ms; }

/* karaoké : couleurs par surface (DESIGN § 7.3) — sur nuit par défaut */
:root { --k-avenir: var(--gris-nuit); --k-ici: var(--or-clair); --k-ici-fond: transparent; --k-dit: var(--blanc-nuit); --k-bande: var(--nuit-3); --k-trait: var(--or); }
.sur-papier { --k-avenir: var(--gris); --k-ici: var(--encre); --k-ici-fond: var(--or-clair); --k-dit: var(--encre); --k-bande: var(--papier-2); --k-trait: var(--or-profond); }

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--nuit); }
body { margin: 0; min-height: 100%; background: var(--nuit); color: var(--blanc-nuit); font: 400 var(--t-corps)/var(--il-corps) var(--f-ui); -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
img { max-width: 100%; display: block; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg .plein { fill: currentColor; stroke: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 2px; border-radius: var(--r-s); }
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 700; text-wrap: balance; margin: 0; }
.anim-ar * { letter-spacing: 0 !important; }
.anim-ar h1, .anim-ar h2, .anim-ar h3 { line-height: 1.45; }
.evitement { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 99; background: var(--or); color: var(--encre); padding: 10px 14px; border-radius: var(--r-m); }
.evitement:focus { top: 8px; }
[dir="rtl"] .fl { transform: scaleX(-1); }

/* ------------------------------------------------------------------ barre du haut */
.haut { position: fixed; inset-inline: 0; top: 0; z-index: 30; height: calc(var(--haut) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 12px 0; display: flex; align-items: center; gap: 8px; background: var(--nuit); border-bottom: 1px solid var(--filet); }
.b-marque { display: flex; align-items: center; gap: 8px; min-height: 48px; padding-inline: 4px 8px; border-radius: var(--r-m); }
.b-marque .embleme { width: 34px; height: 34px; stroke: none; }
.marque-nom { font: 700 17px/1 'Poppins', system-ui, sans-serif; white-space: nowrap; }
.marque-nom b { color: var(--or); }
.fil { flex: 1; min-width: 0; margin: 0; font-size: var(--t-mention); color: var(--gris-nuit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.langues { display: flex; background: var(--nuit-2); border-radius: 999px; padding: 2px; border: 1px solid var(--filet); }
.langues button { min-width: 48px; min-height: 48px; border-radius: 999px; font: 600 13px/1 'Poppins', system-ui, sans-serif; color: var(--gris-nuit); }
.langues button[lang="ar"] { font: 700 18px/1 'Amiri', 'Noto Naskh Arabic', serif; }
.langues button[aria-pressed="true"] { background: var(--or); color: var(--encre); }
.b-rond { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--filet); background: var(--nuit-2); }
.haut .b-demo-haut { display: none; min-height: 44px; padding: 6px 16px; }
@media (min-width: 1024px) { .haut .b-demo-haut { display: inline-flex; } }
@media (max-width: 420px) { .marque-nom { display: none; } }
.visite-barre { position: fixed; z-index: 29; inset-inline: 0; top: calc(var(--haut) + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--nuit-2); border-bottom: 2px solid var(--or); font-size: var(--t-ui); }
.visite-barre #vb-etape { flex: 1; min-width: 0; color: var(--or-clair); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visite-barre button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--or-profond); font-weight: 600; }
body.en-visite main { padding-top: calc(var(--haut) + 58px + env(safe-area-inset-top, 0px)); }

/* ------------------------------------------------------------------ écrans */
main { padding-top: calc(var(--haut) + env(safe-area-inset-top, 0px)); min-height: 100vh; min-height: 100dvh; outline: none; }
body.avec-pouce main { padding-bottom: calc(var(--pouce) + env(safe-area-inset-bottom, 0px)); }
.ecran.actif { animation: entree var(--d-trans) var(--courbe) both; }
@keyframes entree { from { opacity: 0; } }
.page { max-width: 1080px; margin: 0 auto; padding: 20px 16px 48px; }
.sur-titre { margin: 0 0 6px; color: var(--or); font: 600 var(--t-mention)/1.3 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.anim-ar .sur-titre { text-transform: none; font-size: var(--t-ui); }
.titre-page { font-size: var(--t-h2); line-height: 1.2; margin-bottom: 18px; }
.imaginaires { margin: 14px 0; font-size: var(--t-mention); color: var(--gris-nuit); font-style: italic; }
.anim-ar .imaginaires { font-style: normal; }

/* ------------------------------------------------------------------ boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 20px; border-radius: var(--r-m);
  font: 600 var(--t-ui)/1.25 var(--f-ui); text-decoration: none; text-align: start; transition: background-color var(--d-micro), transform var(--d-micro); }
.btn:active { transform: scale(.98); }
.btn small { display: block; font-weight: 400; font-size: var(--t-mention); color: inherit; }
.btn-grand { min-height: 56px; }
.btn-or { background: var(--or); color: var(--encre); }
.btn-or:hover { background: var(--or-clair); }
.btn-vert { background: var(--vert); color: #fff; }
.btn-vert:hover { background: var(--vert-clair); }
.btn-clair { background: var(--papier); color: var(--encre); }
.btn-ligne { border: 1.5px solid var(--or-profond); color: var(--blanc-nuit); }
.btn-ligne:hover { background: var(--nuit-3); }

/* ------------------------------------------------------------------ accueil */
#e-accueil { position: relative; overflow: hidden; }
.acc-fond { position: absolute; top: -40px; inset-inline-end: -120px; width: 420px; height: 420px; pointer-events: none; opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23D3AF61' stroke-width='1.2'%3E%3Ccircle cx='200' cy='200' r='70'/%3E%3Ccircle cx='200' cy='200' r='110'/%3E%3Ccircle cx='200' cy='200' r='150'/%3E%3Ccircle cx='200' cy='200' r='190'/%3E%3C/svg%3E") center/contain no-repeat; }
.acc-corps { position: relative; max-width: 1080px; margin: 0 auto; padding: 28px 16px 8px; }
.acc-sur { margin: 0 0 14px; color: var(--gris-nuit); font-size: var(--t-mention); letter-spacing: .08em; text-transform: uppercase; }
.anim-ar .acc-sur { text-transform: none; font-size: var(--t-ui); }
.acc-titre { font-size: var(--t-h1); line-height: 1.15; max-width: 17ch; }
.acc-nombre { display: block; color: var(--or); font: 700 clamp(4rem, 20vw, 8.5rem)/1 'Poppins', system-ui, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.anim-ar .acc-nombre { font-family: 'Amiri', 'Poppins', serif; line-height: 1.15; }
.acc-slogan { margin: 16px 0 24px; font-size: var(--t-corps); color: var(--gris-nuit); max-width: 34ch; }
.acc-actions { display: grid; gap: 10px; max-width: 460px; }
.acc-actions .btn { width: 100%; justify-content: flex-start; }
.acc-troupe { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--nuit-2); border: 1px solid var(--filet); text-align: start; max-width: 460px; min-height: 58px; }
.at-portraits { display: flex; flex: none; }
.at-portraits .mini { width: 42px; height: 42px; border: 2px solid var(--nuit-2); margin-inline-start: -10px; }
.at-portraits .mini:first-child { margin-inline-start: 0; }
.at-t b { display: block; font-size: var(--t-ui); }
.at-t small { display: block; font-size: var(--t-mention); color: var(--gris-nuit); }
.acc-impact { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 640px; }
.acc-impact li { border-top: 2px solid var(--or-profond); padding-top: 10px; }
.acc-impact b { display: block; font: 700 clamp(1.4rem, 6vw, 2.1rem)/1.1 'Poppins', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.anim-ar .acc-impact b { font-family: 'Amiri', serif; }
.acc-impact span { display: block; font-size: var(--t-mention); line-height: 1.35; color: var(--gris-nuit); margin-top: 4px; }
.tuiles { max-width: 1080px; margin: 0 auto; padding: 26px 16px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tuile { display: grid; align-content: start; gap: 6px; text-align: start; min-height: 124px; padding: 16px 14px; border-radius: var(--r-l); background: var(--nuit-2); border: 1px solid var(--filet); transition: border-color var(--d-micro); }
.tuile svg { width: 28px; height: 28px; color: var(--or); }
.tu-t { font: 700 var(--t-ui)/1.25 var(--f-titre); }
.anim-ar .tu-t { font-size: 1.2rem; }
.tu-d { font-size: var(--t-mention); line-height: 1.35; color: var(--gris-nuit); }
.tuile-or { background: var(--or); border-color: var(--or); color: var(--encre); grid-column: 1 / -1; min-height: 96px; }
.tuile-or svg, .tuile-or .tu-d { color: var(--encre); }
@media (hover: hover) { .tuile:hover { border-color: var(--or-profond); } }
.mentions { max-width: 1080px; margin: 0 auto; padding: 18px 16px 32px; font-size: var(--t-mention); color: var(--gris-nuit); }
@media (min-width: 720px) { .tuiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) {
  .acc-corps { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 48px; padding-top: 48px; }
  .acc-corps > * { grid-column: 1; }
  .acc-actions { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .acc-troupe { grid-column: 2; }
  .tuiles { grid-template-columns: repeat(4, 1fr); }
  .tuile-or { grid-column: span 2; }
}

/* ------------------------------------------------------------------ l'année : frise et actes */
.frise { list-style: none; margin: 0 0 18px; padding: 4px 2px 12px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.frise::-webkit-scrollbar { display: none; }
.frise li { flex: none; scroll-snap-align: start; }
.frise button { width: 128px; min-height: 64px; display: grid; justify-items: start; gap: 2px; text-align: start; padding: 28px 10px 6px 0; position: relative; }
.frise button::before { content: ''; position: absolute; top: 11px; inset-inline: 0; height: 2px; background: var(--filet); }
.frise button::after { content: ''; position: absolute; top: 3px; inset-inline-start: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--nuit); border: 2px solid var(--gris-nuit); }
.frise button.lu::after { background: var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23141814' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--or); }
.frise button.courant::after { border-color: var(--or); box-shadow: 0 0 0 3px var(--nuit), 0 0 0 5px var(--or); }
.frise b { font: 700 var(--t-mention)/1.2 var(--f-ui); color: var(--or); }
.frise span { font-size: var(--t-mention); line-height: 1.3; color: var(--blanc-nuit); }
.chapitres { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chapitres button { width: 100%; display: grid; grid-template-columns: 58px 1fr; gap: 2px 12px; align-items: center; text-align: start; padding: 14px; border-radius: var(--r-l); background: var(--nuit-2); border: 1px solid var(--filet); min-height: 96px; }
.chapitres button:hover { border-color: var(--or-profond); }
.ch-rang { grid-row: span 5; align-self: start; font: 700 36px/1 'Poppins', system-ui, sans-serif; color: var(--or); text-align: center; }
.ch-rang small { display: block; font: 600 11px/1 var(--f-ui); color: var(--gris-nuit); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.anim-ar .ch-rang { font-family: 'Amiri', serif; font-size: 40px; }
.ch-per { font-size: var(--t-mention); color: var(--or-clair); }
.ch-t { font: 700 var(--t-h3)/1.25 var(--f-titre); }
.ch-points { display: flex; gap: 5px; margin-top: 4px; }
.ch-points i { width: 18px; height: 5px; border-radius: 3px; background: var(--filet); }
.ch-points i.lu { background: var(--or); }
.ch-persos { display: flex; gap: 4px; margin-top: 6px; }
.ch-persos .mini { width: 34px; height: 34px; border: 1.5px solid var(--or-profond); }
@media (min-width: 860px) { .chapitres { grid-template-columns: 1fr 1fr; } }

/* portrait rond d'un personnage */
.mini { display: inline-block; flex: none; border-radius: 50%; overflow: hidden; background: var(--papier-2); }
.mini .perso { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------ le lecteur */
.ecran-lecteur { display: flex; flex-direction: column; position: relative;
  height: calc(100dvh - var(--haut) - var(--pouce) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
body.en-visite .ecran-lecteur { height: calc(100dvh - var(--haut) - var(--pouce) - 58px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.lc-tete { padding: 8px 16px 4px; }
.lc-chapitre { margin: 0 0 6px; font: 500 var(--t-mention)/1.3 var(--f-ui); color: var(--gris-nuit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-chapitre b { color: var(--or-clair); font-weight: 700; }
.lc-progres { display: flex; gap: 4px; }
.lc-progres i { flex: 1; height: 4px; border-radius: 2px; background: var(--filet); overflow: hidden; position: relative; }
.lc-progres i::after { content: ''; position: absolute; inset: 0; background: var(--or); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .lc-progres i::after { transform-origin: right; }
.lc-progres i.lu::after { transform: scaleX(1); }
.lc-progres i.ici::after { transform: scaleX(var(--p, .06)); }
.lc-scene { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 8px; }
.lc-carte-zone { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* la scène : décor → personnages → bulle / écran (hauteur réservée : rien ne saute) */
.scene { position: relative; flex: none; width: 100%; aspect-ratio: 16 / 10; max-height: 36dvh; border-radius: var(--r-l); overflow: hidden; background: #CFC9BA; isolation: isolate;
  --d-mur: #D6D0C1; --d-ciel: #C3D0D2; --d-sol: #B4AB98; --d-terre: #C4A980; --d-bois: #76583A; --d-fenetre: #B4C6CE; --d-store: #97A9B1;
  --d-soleil: #E6DFC6; --d-batiment: #DDD4C1; --d-toit: #8A6B55; --d-arche: #6A584A; --d-arbre: #4A7453; --d-porte: #86683F; --d-horloge: #F4F1E8; }
.sc-decor, .d-couche { position: absolute; inset: 0; }
.d-couche.entre { animation: fondu var(--d-trans) ease-out both; }
@keyframes fondu { from { opacity: 0; } }
.decor { width: 100%; height: 100%; display: block; }
.decor .d-mur { fill: var(--d-mur); } .decor .d-ciel { fill: var(--d-ciel); } .decor .d-sol { fill: var(--d-sol); } .decor .d-terre { fill: var(--d-terre); }
.decor .d-bois { fill: var(--d-bois); } .decor .d-fenetre { fill: var(--d-fenetre); } .decor .d-store { stroke: var(--d-store); stroke-width: 3; fill: none; }
.decor .d-soleil { fill: var(--d-soleil); } .decor .d-batiment { fill: var(--d-batiment); } .decor .d-toit { fill: var(--d-toit); } .decor .d-arche { fill: var(--d-arche); }
.decor .d-arbre { fill: var(--d-arbre); } .decor .d-porte { fill: var(--d-porte); } .decor .d-horloge { fill: var(--d-horloge); stroke: #1E4630; stroke-width: 3; }
.decor .d-voile, .decor .d-rayons { display: none; }
/* l'Avant garde un voile sombre ; il se lève (400 ms) à la bascule, sans autre changement de couleur */
.sc-voile { position: absolute; inset: 0; background: #0B1A11; opacity: .3; transition: opacity 400ms ease-out; pointer-events: none; }
.scene.ph-ecran .sc-voile, .scene.ph-apres .sc-voile { opacity: 0; }
.sc-perso { position: absolute; bottom: 0; inset-inline-start: 3%; height: 82%; aspect-ratio: 200 / 240; }
.sc-perso .perso { width: 100%; height: 100%; display: block; }
.sc-perso2 { inset-inline-start: 36%; height: 64%; }
.sc-perso.change > .perso { animation: fondu 200ms ease-out both; }
.sc-perso.change .p-yeux { animation: cligne 260ms ease-in-out 700ms 1; transform-box: view-box; transform-origin: 100px 101px; }
@keyframes cligne { 50% { transform: scaleY(.1); } }
.sc-perso.geste { animation: geste 240ms var(--courbe) 1; }
@keyframes geste { 50% { transform: translateY(-4px); } }
.bulle { position: absolute; z-index: 3; top: 10px; inset-inline-end: 10px; max-width: min(64%, 36ch); background: var(--papier); color: var(--encre); border-radius: var(--r-l);
  padding: 8px 12px; box-shadow: var(--o-carte); font: 500 clamp(.95rem, .8rem + .7vw, 1.4rem)/1.4 var(--f-lire); text-wrap: balance;
  --k-avenir: var(--gris); --k-ici: var(--encre); --k-ici-fond: var(--or-clair); --k-dit: var(--encre); --k-bande: var(--papier-2); --k-trait: var(--or-profond); }
.anim-ar .bulle { font-weight: 400; font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem); line-height: 1.6; }
.bulle::after { content: ''; position: absolute; bottom: -11px; inset-inline-start: 22px; border: 11px solid transparent; border-top-color: var(--papier); border-bottom: 0; }
.bulle.entre { animation: bulle 240ms var(--courbe) both; }
@keyframes bulle { from { opacity: 0; transform: translateY(8px); } }
.bulle.sort { opacity: 0; transition: opacity 200ms ease-in; }
.sc-ecran { position: absolute; z-index: 4; bottom: 5%; inset-inline-end: 4%; height: 86%; aspect-ratio: 390 / 760; border-radius: 16px;
  opacity: 0; transform: translateY(24px); transition: opacity 320ms ease-out, transform 320ms var(--courbe); pointer-events: none; }
.scene.ph-ecran .sc-ecran, .scene.ph-apres .sc-ecran { opacity: 1; transform: none; pointer-events: auto; }
.sc-ecran .tel-cadre { height: 100%; padding: 4px; border-radius: 16px; border: 3px solid var(--encre); background: var(--encre); box-shadow: var(--o-carte); }
.sc-ecran .tel-cadre::before { display: none; }
.sc-ecran .tel-ecran { height: 100%; border-radius: 11px; aspect-ratio: auto; }
.sc-ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sc-ecran.bureau { height: auto; width: 60%; aspect-ratio: 16 / 10; }
.sc-ecran.bureau .tel-cadre { border-radius: 8px; } .sc-ecran.bureau .tel-ecran { border-radius: 5px; }
.sc-cartouche { position: absolute; z-index: 5; bottom: 10px; inset-inline-start: 10px; max-width: 56%; padding: 8px 12px; background: var(--nuit-2); border-inline-start: 3px solid var(--or); border-radius: 4px var(--r-s) var(--r-s) 4px;
  font: 700 clamp(1rem, .85rem + .7vw, 1.5rem)/1.3 var(--f-titre); color: var(--blanc-nuit); opacity: 0; transform: translateY(8px); transition: opacity 240ms, transform 240ms var(--courbe); pointer-events: none; }
[dir="rtl"] .sc-cartouche { border-radius: var(--r-s) 4px 4px var(--r-s); }
.scene.ph-ecran .sc-cartouche { opacity: 1; transform: none; }
.scene.sans-ecran .sc-cartouche { inset-inline: 10px; max-width: none; text-align: center; }
/* téléphone et tablette : le cartouche de la phrase pivot monte en haut de la scène, au-dessus de la tête ;
   il ne recouvre jamais le visage (DESIGN § 4.2). Le vrai écran reste à sa place, en bas du côté opposé. */
@media (max-width: 1023px) {
  .sc-cartouche { top: 8px; bottom: auto; inset-inline: 10px; max-width: none; font-size: 1rem; line-height: 1.3; padding: 6px 10px; }
  .scene:not(.sans-ecran) .sc-cartouche { inset-inline-end: calc(4% + 30% + 8px); }
}
.sc-nom { position: absolute; z-index: 3; bottom: 8px; inset-inline-end: 8px; margin: 0; max-width: 62%; padding: 6px 10px; border-radius: 999px; background: var(--nuit-2);
  color: var(--blanc-nuit); font-size: var(--t-mention); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 200ms; border: 1px solid var(--filet); }
.sc-nom b { color: var(--blanc-nuit); }
.sc-nom.parle { border-color: var(--or-clair); } .sc-nom.parle b { color: var(--or-clair); }
.scene.ph-ecran .sc-nom, .scene.ph-apres .sc-nom { opacity: 0; }

/* la carte Avant / Résolu : deux faces dans une cellule (la plus haute fixe la hauteur) */
.carte { flex: 1; min-height: 0; perspective: 900px; outline: none; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: pointer; }
.carte:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 3px; border-radius: var(--r-l); }
.carte-in { display: grid; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform var(--d-flip) var(--courbe); }
.carte.tournee .carte-in { transform: rotateY(180deg); }
.anim-ar .carte.tournee .carte-in { transform: rotateY(-180deg); }
.face { grid-area: 1 / 1; min-height: 0; display: flex; flex-direction: column; border-radius: var(--r-l); padding: 14px 16px 12px; box-shadow: var(--o-carte);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; position: relative; overflow: hidden; }
.face-avant { background: var(--papier-2); color: var(--encre);
  --k-avenir: var(--gris); --k-ici: var(--encre); --k-ici-fond: var(--or-clair); --k-dit: var(--encre); --k-bande: #E6E1D3; --k-trait: var(--or-profond); }
.face-apres { background: var(--vert-profond); color: var(--blanc-nuit); transform: rotateY(180deg);
  --k-avenir: var(--gris-nuit); --k-ici: var(--or-clair); --k-dit: var(--blanc-nuit); --k-bande: #173A27; --k-trait: var(--or); }
.anim-ar .face-apres { transform: rotateY(-180deg); }
.carte:not(.tournee) .face-apres, .carte.tournee .face-avant { pointer-events: none; }
.face-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.face-apres .face-tete { justify-content: flex-start; padding-inline-end: 50px; flex-wrap: wrap; }
.etiquette-avant { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.etiquette-avant svg { width: 18px; height: 18px; }
.etiquette-apres { font: 700 12px/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--or-clair); }
.anim-ar .etiquette-avant, .anim-ar .etiquette-apres { text-transform: none; font-size: 15px; }
.face-num { font: 500 var(--t-mention)/1 var(--f-ui); color: inherit; font-variant-numeric: tabular-nums; }
.face-avant .face-num { color: var(--gris); }
.face-apres .face-num { color: var(--gris-nuit); }
.face-accroche { margin: 8px 0 2px; font: 700 var(--t-ui)/1.3 var(--f-titre); color: var(--encre); }
.face-texte { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: 6px; padding-block: 2px 10px; font: 500 var(--t-lire)/var(--il-lire) var(--f-lire); scrollbar-width: thin; }
.anim-ar .face-texte { font-weight: 400; }
.face-apres .face-texte { margin-top: 10px; }
.face-indice { margin: 6px 0 0; font-size: var(--t-mention); color: var(--gris); opacity: 0; transition: opacity 280ms; }
.face-indice.vu { opacity: 1; }
.face-pied { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid #2F5A40; }
.puce-preuve { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 16px 6px 12px; border-radius: 999px; background: var(--or); color: var(--encre); font: 700 var(--t-mention)/1.2 var(--f-ui); text-align: start; }
.puce-preuve svg { width: 22px; height: 22px; }
.puce-inno { display: inline-flex; align-items: center; gap: 6px; color: var(--or-clair); font-size: var(--t-mention); font-weight: 600; }
.puce-inno svg { width: 18px; height: 18px; }
.tampon { position: absolute; top: 10px; inset-inline-end: 12px; width: 40px; height: 40px; color: var(--or); opacity: 0; pointer-events: none; }
.tampon svg { width: 40px; height: 40px; }
.tampon.pose { animation: tampon 180ms ease-out both; }
@keyframes tampon { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .lc-scene { flex-direction: row; align-items: center; max-width: 1600px; width: 100%; margin: 0 auto; padding-inline: 24px; gap: 20px; }
  .scene { flex: 1.1; aspect-ratio: 16 / 9; max-height: 100%; }
  .lc-carte-zone { flex: 1; align-self: center; max-height: 100%; }
  .carte { flex: 0 1 auto; }
  .carte-in { height: auto; max-height: 100%; }
  .face-texte { flex: 0 1 auto; }
  .face-indice { margin-bottom: 4px; }
  .face { padding: 22px 26px 18px; }
  .lc-tete { max-width: 1600px; width: 100%; margin: 0 auto; padding-inline: 24px; }
}
@media (min-width: 1024px) {
  .lc-scene { align-items: stretch; }
  .scene { aspect-ratio: auto; height: 100%; flex: 1.35; }
  .sc-ecran { height: 90%; bottom: 4%; }
  .sc-ecran.bureau { width: 64%; }
  .sc-perso { height: 72%; }
}
body.st-visible .ecran-lecteur { padding-bottom: 96px; }
.sc-loupe { position: absolute; bottom: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--nuit-2); color: var(--blanc-nuit); font-size: var(--t-mention); font-weight: 600; box-shadow: var(--o-carte); }
.sc-loupe svg { width: 16px; height: 16px; color: var(--or-clair); }
@media (max-width: 1023px) { .sc-loupe span { display: none; } .sc-loupe { padding: 5px; } }

/* intertitre : une page de livre qui tourne (ar : l'étoile à huit branches se trace une fois) */
.intertitre, .fin-chap { position: absolute; inset: 0; z-index: 6; display: flex; padding: 16px; background: var(--nuit); perspective: 1600px; }
.it-page { width: 100%; max-width: 760px; margin: auto; background: var(--papier); color: var(--encre); border-radius: 6px var(--r-l) var(--r-l) 6px; padding: 26px 22px 18px;
  box-shadow: inset 10px 0 0 #E7E1D2, var(--o-carte); display: grid; gap: 10px; transform-origin: left center; position: relative; overflow: hidden;
  --k-avenir: var(--gris); --k-ici: var(--encre); --k-ici-fond: var(--or-clair); --k-dit: var(--encre); --k-bande: var(--papier-2); --k-trait: var(--or-profond); }
[dir="rtl"] .it-page { border-radius: var(--r-l) 6px 6px var(--r-l); box-shadow: inset -10px 0 0 #E7E1D2, var(--o-carte); transform-origin: right center; }
.it-page.tourne { animation: page var(--d-titre) var(--courbe) both; }
@keyframes page { from { transform: rotateY(-70deg); opacity: .2; } }
[dir="rtl"] .it-page.tourne { animation-name: pageAr; }
@keyframes pageAr { from { transform: rotateY(70deg); opacity: .2; } }
.it-etoile { display: none; position: absolute; top: 14px; inset-inline-end: 14px; width: 64px; height: 64px; stroke: var(--or-profond); stroke-width: 1.5; }
.anim-ar .it-etoile { display: block; stroke-dasharray: 520; stroke-dashoffset: 520; animation: trace 1800ms ease-in-out 300ms forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.it-acte { margin: 0; font: 700 var(--t-mention)/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--or-texte); }
.anim-ar .it-acte { text-transform: none; font-size: var(--t-ui); }
.it-titre { font-size: var(--t-h1); line-height: 1.15; color: var(--vert-profond); }
.it-texte { font: 500 var(--t-lire)/var(--il-lire) var(--f-lire); }
.anim-ar .it-texte { font-weight: 400; }
.it-persos { display: flex; gap: 6px; flex-wrap: wrap; }
.it-persos .mini { width: 48px; height: 48px; border: 2px solid var(--or-profond); }
.it-passer { justify-self: end; color: var(--encre); border-color: var(--vert); }
.it-passer:hover { background: var(--papier-2); }
.fc-in { width: 100%; max-width: 640px; margin: auto; display: grid; gap: 14px; justify-items: stretch; text-align: center; }
.fin-chap h2 { font-size: var(--t-h2); }
.fc-question { font: 700 var(--t-h2)/1.25 var(--f-titre); color: var(--or-clair); }

/* ------------------------------------------------------------------ lecture synchronisée (DESIGN § 7.3, 7.4) */
.lisible .m { color: inherit; border-radius: .2em; transition: color var(--d-micro) linear, background-color var(--d-micro) linear; }
.lisible .phr { border-radius: .25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 160ms linear; }
.kara.en-cours .phr.actif { background: var(--k-bande); box-shadow: 0 0 0 .12em var(--k-bande); }
.kara.en-cours .m { color: var(--k-avenir); }
.kara.en-cours .m.dit { color: var(--k-dit); }
.lisible.en-cours .m.ici { color: var(--k-ici); background-color: var(--k-ici-fond); box-shadow: 0 0 0 .1em var(--k-ici-fond);
  text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--k-trait); text-underline-offset: .28em; text-decoration-skip-ink: none; }
.anim-ar .lisible.en-cours .m.ici { text-underline-offset: .4em; }
.ecri.en-cours .m { opacity: 0; transition: opacity 120ms linear; }
.ecri.en-cours .m.dit, .ecri.en-cours .m.ici { opacity: 1; }
.ecri.en-cours .m.dit { color: var(--k-dit); }

/* sous-titres (projection) */
.sous-titres { position: fixed; z-index: 24; inset-inline: 0; bottom: calc(var(--pouce) + env(safe-area-inset-bottom, 0px)); padding: 8px 16px 10px; background: var(--nuit); border-top: 2px solid var(--or-profond); }
body:not(.avec-pouce) .sous-titres { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.st-texte { max-width: 42em; margin: 0 auto; font: 500 var(--t-lire)/1.4 var(--f-lire); color: var(--blanc-nuit); text-align: center; }

/* ------------------------------------------------------------------ barre de lecture au pouce */
.pouce { position: fixed; z-index: 25; inset-inline: 0; bottom: 0; height: calc(var(--pouce) + env(safe-area-inset-bottom, 0px));
  padding: 4px 6px env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 4px; background: var(--nuit-2); border-top: 1px solid var(--filet); }
.pc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; border-radius: var(--r-m); font-size: 14px; line-height: 1.1; color: var(--gris-nuit); }
.anim-ar .pc { font-size: 15px; }
@media (min-width: 1024px) { .pc { font-size: var(--t-ui); } }
.pc svg { width: 24px; height: 24px; color: var(--blanc-nuit); }
.pc:active { background: var(--nuit-3); }
.pc:disabled { opacity: .45; }
.pc[aria-pressed="true"]:not(.pc-lire) { color: var(--or-clair); }
.pc[aria-pressed="true"]:not(.pc-lire) svg { color: var(--or-clair); }
.pc-lire .rond { width: 56px; height: 56px; border-radius: 50%; background: var(--or); display: grid; place-items: center; margin-top: -20px; box-shadow: 0 0 0 5px var(--nuit-2); }
.pc-lire .rond svg { color: var(--encre); width: 26px; height: 26px; }
.pc-lire .ic-pause path { stroke-width: 3; }
.pc-lire .ic-pause, .pc-lire[aria-pressed="true"] .ic-lire { display: none; }
.pc-lire[aria-pressed="true"] .ic-pause { display: block; }
.pc-lire { color: var(--or-clair); }
.pc-suiv .anneau { position: absolute; top: 3px; left: 50%; width: 36px; height: 36px; margin-left: -18px; pointer-events: none; }
.pc-suiv .anneau svg { width: 36px; height: 36px; transform: rotate(-90deg); }
.pc-suiv .anneau circle { fill: none; stroke: var(--or); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 100; }
.pc-suiv.remplit .anneau circle { animation: anneau var(--anneau, 3s) linear forwards; }
@keyframes anneau { to { stroke-dashoffset: 0; } }
@media (min-width: 900px) { .pouce { max-width: 680px; margin: 0 auto; border: 1px solid var(--filet); border-bottom: 0; border-radius: var(--r-l) var(--r-l) 0 0; } }

/* ------------------------------------------------------------------ prologue et épilogue */
.recit-voile { position: fixed; inset: 0; z-index: 35; background: var(--nuit); display: flex; padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px)); animation: fondu 400ms ease-out both; }
.recit-voile.clair { background: var(--papier); color: var(--encre);
  --k-avenir: var(--gris); --k-ici: var(--encre); --k-ici-fond: var(--or-clair); --k-dit: var(--encre); --k-bande: var(--papier-2); --k-trait: var(--or-profond); }
.rv-in { width: 100%; max-width: 820px; margin: auto; display: grid; gap: 18px; }
.rv-titre { margin: 0; font: 700 var(--t-mention)/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.anim-ar .rv-titre { text-transform: none; font-size: var(--t-ui); }
.recit-voile.clair .rv-titre { color: var(--or-texte); }
.rv-texte { font: 700 clamp(1.5rem, 1rem + 2.4vw, 3.2rem)/1.3 var(--f-titre); text-wrap: balance; }
.rv-troupe { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-troupe .mini { width: 52px; height: 52px; border: 2px solid var(--or); animation: fondu 400ms ease-out both; }
.rv-actions { display: grid; gap: 10px; max-width: 420px; }
.rv-mention { margin: 0; font-size: var(--t-mention); color: var(--gris-nuit); font-style: italic; }
.recit-voile.clair .rv-mention { color: var(--gris); }
.anim-ar .rv-mention { font-style: normal; }
.rv-passer { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--or-profond); font-weight: 600; font-size: var(--t-ui); }
.recit-voile.clair .rv-passer { border-color: var(--vert); color: var(--vert-profond); }

/* ------------------------------------------------------------------ catalogue */
.segm-nuit { display: inline-flex; background: var(--nuit-2); border: 1px solid var(--filet); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 12px; }
.segm-nuit button { min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 600; color: var(--gris-nuit); font-size: var(--t-ui); }
.segm-nuit button[aria-pressed="true"] { background: var(--or); color: var(--encre); }
.recherche { display: flex; align-items: center; gap: 10px; background: var(--papier); color: var(--encre); border-radius: var(--r-m); padding: 0 14px; min-height: 54px; }
.recherche input { flex: 1; min-width: 0; border: 0; background: none; min-height: 52px; font-size: 16px; color: var(--encre); outline: none; }
.recherche svg { color: var(--gris); }
.recherche:focus-within { box-shadow: 0 0 0 3px var(--or-clair); }
.filtres { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 6px; scrollbar-width: none; }
.filtres::-webkit-scrollbar { display: none; }
.filtres button { flex: none; min-height: 44px; padding: 0 14px; border-radius: var(--r-s); border: 1px solid var(--filet); background: var(--nuit-2); font-size: var(--t-mention); white-space: nowrap; }
.filtres button[aria-pressed="true"] { background: var(--or); color: var(--encre); border-color: var(--or); font-weight: 600; }
.cat-compte { font-size: var(--t-ui); color: var(--gris-nuit); margin: 6px 0 10px; }
.cat-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cat-item > button { width: 100%; text-align: start; padding: 14px; border-radius: var(--r-l); background: var(--nuit-2); border: 1px solid var(--filet); display: grid; gap: 6px; }
.cat-item > button[aria-expanded="true"] { border-color: var(--or-profond); border-end-start-radius: 0; border-end-end-radius: 0; }
.ci-tete { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-mention); color: var(--or-clair); font-weight: 600; }
.ci-titre { font: 700 var(--t-ui)/1.3 var(--f-titre); }
.ci-a { font-size: var(--t-corps); line-height: 1.45; color: var(--blanc-nuit); }
.ci-corps { background: var(--vert-profond); padding: 14px; border-radius: 0 0 var(--r-l) var(--r-l); border: 1px solid var(--or-profond); border-top: 0; display: grid; gap: 10px; justify-items: start; }
.ci-corps .lib { font-size: var(--t-mention); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--or-clair); }
.anim-ar .ci-corps .lib { text-transform: none; font-size: var(--t-ui); }
.ci-corps p { margin: 0; font-size: var(--t-corps); line-height: 1.5; }
.ci-corps .pv { font-size: var(--t-mention); color: var(--or-clair); }
.cat-liste mark { background: var(--or-clair); color: var(--encre); border-radius: 3px; padding: 0 1px; }
#cat-plus { width: 100%; margin-top: 14px; }
.cat-demo { width: 100%; margin-top: 20px; }

/* ------------------------------------------------------------------ carte du Cameroun */
.page-carte { display: grid; gap: 18px; }
.carte-svg svg { width: 100%; height: auto; max-height: 58dvh; display: block; margin: 0 auto; stroke-width: 1.4; }
.carte-svg .region { fill: var(--nuit-3); stroke: var(--or-profond); cursor: pointer; transition: fill var(--d-micro); outline: none; }
.carte-svg .region:hover, .carte-svg .region:focus-visible { fill: var(--vert-clair); }
.carte-svg .region.choisie { fill: var(--or); }
.carte-svg .reg-nom { fill: var(--blanc-nuit); stroke: none; font: 600 12px var(--f-ui); text-anchor: middle; pointer-events: none; }
.carte-svg .reg-nom.petit { font-size: 9.5px; }
.carte-svg .reg-nom.choisie { fill: var(--encre); font-weight: 700; }
.carte-svg .point { fill: #fff; stroke: var(--vert-profond); stroke-width: 2; }
.carte-svg .onde { display: none; }
.reg-compte { color: var(--or-clair); font-weight: 600; margin: -8px 0 10px; }
.reg-ex { margin: 0 0 12px; padding: 14px 16px; border-radius: var(--r-l); background: var(--papier); color: var(--encre); font-size: var(--t-corps); line-height: 1.5; }
.reg-persos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.reg-persos .rp { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-mention); }
.reg-persos .mini { width: 40px; height: 40px; border: 2px solid var(--or); }
.reg-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.reg-liste button:not(.btn) { min-height: 44px; padding: 0 14px; border-radius: var(--r-s); border: 1px solid var(--filet); background: var(--nuit-2); font-size: var(--t-mention); }
.reg-liste button[aria-current="true"] { background: var(--or); color: var(--encre); border-color: var(--or); font-weight: 600; }
.b-voir-region { width: 100%; margin-top: 8px; }
.legende-ngd { display: flex; align-items: center; gap: 10px; font-size: var(--t-mention); color: var(--gris-nuit); margin-top: 14px; }
.point-ngd { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--vert-profond), 0 0 0 5px #fff; flex: none; }
@media (min-width: 900px) { .page-carte { grid-template-columns: 1fr 1fr; align-items: center; } }

/* ------------------------------------------------------------------ jeux (le seul endroit où des sons existent) */
.jeu-reglages { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.interrupteur { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--filet); background: var(--nuit-2); font-size: var(--t-mention); color: var(--gris-nuit); }
.interrupteur svg { width: 20px; height: 20px; }
.interrupteur[aria-pressed="true"] { border-color: var(--or); color: var(--or-clair); }
.jeu-choix { display: grid; gap: 10px; }
.jeu-carte { text-align: start; display: grid; gap: 6px; padding: 18px; border-radius: var(--r-l); background: var(--nuit-2); border: 1px solid var(--filet); min-height: 120px; }
.jeu-carte svg { color: var(--or); width: 30px; height: 30px; }
.jeu-carte h3 { font-size: var(--t-h3); }
.jeu-carte p { margin: 0; color: var(--gris-nuit); font-size: var(--t-mention); }
@media (min-width: 800px) { .jeu-choix { grid-template-columns: repeat(3, 1fr); } }
.q-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.q-num { margin: 0; color: var(--or-clair); font-weight: 600; font-size: var(--t-mention); }
.q-tete h2 { font-size: var(--t-h3); }
.chrono { width: 48px; height: 48px; flex: none; }
.chrono svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.chrono .fond-c { fill: none; stroke: var(--filet); stroke-width: 4; }
.chrono .arc { fill: none; stroke: var(--or); stroke-width: 4; stroke-linecap: round; }
.q-consigne { font: 500 var(--t-ui)/1.4 var(--f-ui); color: var(--gris-nuit); margin-bottom: 8px; min-height: 1.4em; }
.q-enonce { background: var(--papier); color: var(--encre); border-radius: var(--r-l); padding: 18px; font: 500 var(--t-lire)/var(--il-lire) var(--f-lire); min-height: 5em;
  --k-avenir: var(--gris); --k-ici: var(--encre); --k-ici-fond: var(--or-clair); --k-dit: var(--encre); --k-bande: var(--papier-2); --k-trait: var(--or-profond); }
.anim-ar .q-enonce { font-weight: 400; }
.q-reponses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.q-reponses.une-col { grid-template-columns: 1fr; }
.q-reponses.portraits { grid-template-columns: 1fr; }
@media (min-width: 700px) { .q-reponses.portraits { grid-template-columns: repeat(3, 1fr); } }
.rep { min-height: 64px; border-radius: var(--r-l); padding: 10px 14px; font-weight: 700; font-size: var(--t-ui); display: flex; align-items: center; gap: 10px; justify-content: center; text-align: start;
  background: var(--nuit-3); color: var(--blanc-nuit); border: 2px solid var(--filet); }
.rep svg { width: 26px; height: 26px; }
.rep.r-avant { background: var(--papier-2); color: var(--encre); border-color: var(--papier-2); }
.rep.r-apres { background: var(--vert); color: #fff; border-color: var(--vert); }
.une-col .rep, .portraits .rep { justify-content: flex-start; font-weight: 600; }
.rep small { display: block; font-weight: 400; font-size: var(--t-mention); color: var(--gris-nuit); }
.rep .mini { width: 48px; height: 48px; border: 2px solid var(--or); }
.rep .r-acte { font: 700 var(--t-mention)/1.1 var(--f-ui); color: var(--or-clair); min-width: 4.5em; }
.rep.juste { border-color: var(--or-clair); box-shadow: 0 0 0 3px var(--or-clair); }
.rep.fausse { border-color: var(--alerte-nuit); }
.rep.r-avant.fausse { border-color: var(--alerte-papier); }
.q-image { display: flex; justify-content: center; }
.q-image .tel-cadre { width: min(230px, 62vw); }
.q-image.bureau .tel-cadre { width: 100%; max-width: 520px; }
.q-image.bureau .tel-ecran { aspect-ratio: auto; }
.q-image img { transition: filter 300ms linear; }
.retour { margin-top: 14px; padding: 16px; border-radius: var(--r-l); display: grid; gap: 10px; background: var(--nuit-2); border: 2px solid var(--filet); }
.retour.bon { border-color: var(--or-clair); }
.retour.mauvais { border-color: var(--alerte-nuit); }
.r-t { display: flex; align-items: center; gap: 10px; }
.retour.bon .r-t svg { color: var(--or-clair); } .retour.mauvais .r-t svg { color: var(--alerte-nuit); }
.retour h4 { font-size: var(--t-h3); }
.retour p { margin: 0; line-height: 1.5; } .retour .r-exp { margin-top: 10px; }
.r-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.scores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--filet); }
.scores-t { flex-basis: 100%; margin: 0; font-size: var(--t-mention); color: var(--gris-nuit); }
.eq { flex: 1 1 150px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-m); background: var(--nuit-2); border: 1px solid var(--filet); }
.eq.tete { border-color: var(--or); }
.eq-nom { flex: 1; min-width: 0; font-weight: 600; font-size: var(--t-mention); outline: none; }
.eq-pts { font: 700 20px 'Poppins', system-ui, sans-serif; color: var(--or-clair); min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.eq button { width: 48px; height: 48px; border-radius: var(--r-m); background: var(--nuit-3); font-weight: 700; font-size: 18px; }
.fin-jeu { text-align: center; display: grid; gap: 14px; justify-items: center; }
.fin-jeu h2 { font-size: var(--t-chiffre); color: var(--or); font-variant-numeric: tabular-nums; }
.fin-dit { margin: 0; font: 500 var(--t-lire)/1.3 var(--f-lire); }
.fin-jeu .btn { width: 100%; max-width: 360px; }
.confettis { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }

/* ------------------------------------------------------------------ personnages */
.persos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 680px) { .persos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .persos { grid-template-columns: repeat(3, 1fr); } }
.perso-carte { display: grid; grid-template-columns: 88px 1fr; gap: 10px 12px; align-content: start; align-items: center; padding: 14px; border-radius: var(--r-l); background: var(--nuit-2); border: 1px solid var(--filet); }
.pc-portrait { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--papier); border: 2px solid var(--or); }
.pc-portrait .perso { width: 100%; height: 100%; display: block; }
.pc-nom { font-size: var(--t-h3); }
.pc-role { font-size: var(--t-mention); color: var(--or-clair); font-weight: 600; margin: 2px 0 0; }
.pc-lieu { font-size: var(--t-mention); color: var(--gris-nuit); margin: 0; }
.pc-fiche { grid-column: 1 / -1; font-size: var(--t-ui); color: var(--blanc-nuit); line-height: 1.45; margin: 0; }
.pc-avant-apres { grid-column: 1 / -1; margin: 0; display: grid; gap: 8px; }
.pc-avant-apres div { padding: 10px 12px; border-radius: var(--r-m); background: var(--nuit-3); border-inline-start: 3px solid var(--gris-nuit); }
.pc-avant-apres div.g { border-inline-start-color: var(--or); }
.pc-avant-apres dt { font-size: var(--t-mention); font-weight: 700; color: var(--gris-nuit); }
.pc-avant-apres .g dt { color: var(--or-clair); }
.pc-avant-apres dd { margin: 2px 0 0; font-size: var(--t-mention); line-height: 1.45; }
.pc-scenes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.pc-scenes button { min-height: 48px; padding: 6px 12px; border-radius: var(--r-m); border: 1px solid var(--filet); background: var(--nuit-3); font-size: var(--t-mention); text-align: start; }
.pc-scenes button:hover { border-color: var(--or-profond); }

/* ------------------------------------------------------------------ preuve */
.pv-texte { font-size: var(--t-corps); line-height: 1.6; max-width: 62ch; color: var(--gris-nuit); }
.pv-bilan { display: grid; gap: 12px; margin: 22px 0 8px; }
.pv-bilan div { background: var(--papier); color: var(--encre); border-radius: var(--r-l); padding: 16px 18px; display: flex; align-items: center; gap: 16px; }
.pv-bilan b { font: 700 var(--t-chiffre)/1 'Poppins', system-ui, sans-serif; color: var(--vert); font-variant-numeric: tabular-nums; }
.anim-ar .pv-bilan b { font-family: 'Amiri', serif; }
.pv-bilan span { font-size: var(--t-ui); line-height: 1.4; }
.pv-date { font-size: var(--t-mention); color: var(--gris-nuit); }
.pv-chiffres { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.pv-chiffres li { border-top: 2px solid var(--or-profond); padding-top: 8px; }
.pv-chiffres b { display: block; font: 700 26px/1.1 'Poppins', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.anim-ar .pv-chiffres b { font-family: 'Amiri', serif; font-size: 30px; }
.pv-chiffres span { font-size: var(--t-mention); color: var(--gris-nuit); }
.pv-contrat { font-size: var(--t-mention); color: var(--gris-nuit); border-inline-start: 3px solid var(--or-profond); padding-inline-start: 12px; }
@media (min-width: 800px) { .pv-bilan { grid-template-columns: 1fr 1fr; } .pv-chiffres { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ feuilles */
.voile { position: fixed; inset: 0; z-index: 40; background: rgb(5 12 8 / .62); animation: fondu 250ms both; }
.feuille { position: fixed; z-index: 41; inset-inline: 0; bottom: 0; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--papier); color: var(--encre); border-radius: var(--r-l) var(--r-l) 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--o-feuille);
  animation: monte var(--d-entree) var(--courbe) both; }
@keyframes monte { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 700px) { .feuille { max-width: 580px; margin: 0 auto; } }
.poignee { width: 44px; height: 5px; border-radius: 3px; background: #C9C6BC; margin: 4px auto 14px; }
.feuille h2 { font-size: var(--t-h3); margin-bottom: 12px; color: var(--vert-profond); }
.feuille .sur-titre { color: var(--or-texte); }
.feuille .btn-ligne { color: var(--vert-profond); border-color: var(--vert); }
.feuille .btn-ligne:hover { background: var(--papier-2); }
.b-fermer { width: 100%; margin-top: 16px; }
.reglage { padding: 12px 0; border-top: 1px solid #E3E0D6; }
.rg-l { margin: 0 0 8px; font-weight: 700; font-size: var(--t-mention); color: var(--gris); }
.rg-ligne { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.rg-ligne .rg-l { margin: 0; }
.rg-info { margin: 8px 0 0; font-size: var(--t-mention); color: var(--gris); }
.choix2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choix2 button { text-align: start; display: grid; gap: 4px; padding: 12px; border-radius: var(--r-m); border: 2px solid #DDD9CE; background: #fff; min-height: 96px; }
.choix2 button[aria-pressed="true"] { border-color: var(--vert); box-shadow: 0 0 0 2px var(--vert) inset; }
.choix2 b { font-size: var(--t-ui); color: var(--vert-profond); }
.choix2 small { font-size: var(--t-mention); color: var(--gris); line-height: 1.35; }
.apercu { font: 500 15px/1.5 var(--f-lire); margin-top: 4px; color: var(--encre); }
.apercu i { font-style: normal; }
.ap-k i { color: var(--gris); } .ap-k i.d { color: var(--encre); }
.ap-k i.x { color: var(--encre); background: var(--or-clair); border-radius: 3px; text-decoration: underline 3px var(--or-profond); text-underline-offset: .28em; }
.ap-e i.z { opacity: 0; }
.segm { display: inline-flex; background: #ECE9DF; border-radius: 999px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.segm button { min-height: 44px; min-width: 64px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: var(--t-mention); color: var(--gris); }
.segm button[aria-pressed="true"] { background: var(--vert); color: #fff; }
.segm button:disabled { color: #8A8F88; }
.fp-ecran { display: flex; justify-content: center; margin-bottom: 12px; }
.fp-ecran .tel-cadre { width: min(240px, 60vw); }
.fp-ecran.bureau .tel-cadre { width: 100%; border-radius: 12px; }
.fp-ecran.bureau .tel-ecran { aspect-ratio: auto; }
.fp-expl { color: var(--gris); font-size: var(--t-ui); line-height: 1.5; margin: 0 0 12px; }
.fp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fp-liste li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-m); background: #fff; border: 1px solid #E3E0D6; }
.fp-code { font: 700 13px/1 'Poppins', system-ui, sans-serif; color: var(--encre); background: var(--or-clair); padding: 6px 8px; border-radius: var(--r-s); }
.fp-fichier { font-size: var(--t-mention); overflow-wrap: anywhere; direction: ltr; text-align: start; }
.fp-n { font-size: var(--t-mention); color: var(--gris); white-space: nowrap; }
.fp-texte { display: block !important; font-size: var(--t-ui); line-height: 1.5; }
.fe-zone { display: flex; justify-content: center; }
.fe-zone .tel-cadre { width: min(330px, 80vw); }
.fe-zone .tel-cadre.bureau { width: 100%; border-radius: 12px; }
.fe-zone .tel-cadre.bureau .tel-ecran { aspect-ratio: auto; }
.fe-exemple { font-size: var(--t-mention); color: var(--gris); text-align: center; margin: 10px 0 0; }
.fd-texte { color: var(--gris); font-size: var(--t-ui); line-height: 1.5; }
.fd-numero { font: 700 26px/1.2 'Poppins', system-ui, sans-serif; color: var(--vert-profond); margin: 8px 0 2px; user-select: all; -webkit-user-select: all; text-align: center; }
.fd-courriel { text-align: center; color: var(--vert); margin: 0 0 14px; font-size: var(--t-ui); user-select: all; -webkit-user-select: all; }
.fd-actions { display: grid; gap: 10px; }
.fd-contrat { font-size: var(--t-mention); color: var(--gris); margin: 14px 0 0; }

/* cadre de téléphone (le vrai écran) */
.tel-cadre { display: block; position: relative; padding: 8px; border-radius: var(--r-tel); background: var(--encre); }
.tel-cadre::before { content: ''; position: absolute; top: 12px; left: 50%; width: 50px; height: 6px; margin-left: -25px; border-radius: 3px; background: #2A2F2B; z-index: 1; }
.tel-cadre.bureau::before, .fp-ecran.bureau .tel-cadre::before { display: none; }
.tel-ecran { display: block; overflow: hidden; border-radius: 20px; background: var(--papier); aspect-ratio: 390 / 760; max-width: 100%; }
.tel-ecran img { width: 100%; height: auto; }

/* ------------------------------------------------------------------ divers */
.toast { position: fixed; z-index: 60; inset-inline: 16px; bottom: calc(var(--pouce) + 16px + env(safe-area-inset-bottom, 0px)); max-width: 520px; margin: 0 auto;
  background: var(--papier); color: var(--encre); padding: 12px 16px; border-radius: var(--r-m); font-size: var(--t-ui); box-shadow: var(--o-carte); animation: fondu 200ms both; text-align: center; }
.sans-js { padding: 90px 20px; max-width: 600px; margin: 0 auto; }

/* révélation des titres, par langue */
.revele-en .w { display: inline-block; overflow: hidden; vertical-align: top; }
.revele-en .w > span { display: inline-block; transform: translateY(105%); animation: mot var(--d-titre) var(--courbe) forwards; }
@keyframes mot { to { transform: none; } }
.revele-ar { animation: plume var(--d-titre) var(--courbe) both; }
@keyframes plume { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.monte { animation: monteTexte var(--d-titre) var(--courbe) both; }
@keyframes monteTexte { from { opacity: 0; transform: translateY(14px); } }

/* projection : texte lu ≥ 30 px, contrastes forts */
@media (min-width: 1600px) { :root { --haut: 64px; --pouce: 84px; } }

/* moins d'animations (réglage de l'appareil ou de l'application) : fondus ≤ 200 ms, aucune bascule 3D */
.reduit *, .reduit *::before, .reduit *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
.reduit .carte-in, .reduit .carte.tournee .carte-in { transform: none !important; }
.reduit .face-apres { transform: none !important; opacity: 0; transition: opacity 150ms !important; }
.reduit .face-avant { transition: opacity 150ms !important; }
.reduit .carte.tournee .face-apres { opacity: 1; }
.reduit .carte.tournee .face-avant { opacity: 0; }
.reduit .sc-ecran, .reduit .sc-voile, .reduit .sc-cartouche, .reduit .bulle { transition: opacity 150ms !important; transform: none !important; }
.reduit .revele-en .w > span { transform: none; }
.reduit .revele-ar { clip-path: none; }
.reduit .it-etoile { stroke-dashoffset: 0; }

/* réseau faible : bouton plein, en bas, au-dessus de tout (DESIGN § 10, loi 2) */
.reseau-faible { position: fixed; z-index: 70; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 520px; margin: 0 auto;
  min-height: 56px; padding: 12px 18px; border-radius: var(--r-m, 14px); background: var(--or, #D3AF61); color: var(--encre, #141814);
  font: 600 17px/1.3 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: center; }

/* ================================================================== onglets : Récit · Catalogue · Jeux · Pourquoi Sahel EDU */
.onglets { position: fixed; z-index: 28; inset-inline: 0; top: calc(var(--haut) + env(safe-area-inset-top, 0px)); height: 52px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--nuit); border-bottom: 1px solid var(--filet); padding: 2px 6px; gap: 2px; }
.onglets button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 6px; border-radius: var(--r-m); font: 600 13px/1.15 var(--f-ui); color: var(--gris-nuit); text-align: center; }
.anim-ar .onglets button { font-size: 14px; }
.onglets svg { width: 20px; height: 20px; flex: none; }
.onglets button[aria-current="page"] { color: var(--or-clair); background: var(--nuit-2); box-shadow: inset 0 -3px 0 var(--or); }
@media (max-width: 480px) { .onglets button { flex-direction: column; gap: 1px; font-size: 11.5px; } .anim-ar .onglets button { font-size: 12.5px; } .onglets svg { width: 18px; height: 18px; } }
@media (min-width: 900px) { .onglets { max-width: 900px; margin: 0 auto; border-inline: 1px solid var(--filet); border-radius: 0 0 var(--r-l) var(--r-l); } }
body.avec-onglets main { padding-top: calc(var(--haut) + 52px + env(safe-area-inset-top, 0px)); }
body.avec-onglets .visite-barre { top: calc(var(--haut) + 52px + env(safe-area-inset-top, 0px)); }
body.avec-onglets.en-visite main { padding-top: calc(var(--haut) + 52px + 58px + env(safe-area-inset-top, 0px)); }

/* mode intégré (surcouche du lot 101) : bouton « Fermer » visible et libellé */
.b-fermer-integre { width: auto; padding: 0 12px 0 10px; gap: 6px; display: inline-flex; align-items: center; border-radius: 999px; font-weight: 600; font-size: var(--t-mention); }
.b-fermer-integre svg { width: 20px; height: 20px; }
@media (max-width: 420px) { .b-fermer-integre .lib { display: none; } .b-fermer-integre { padding: 0; width: 48px; justify-content: center; } }

/* fin d'acte : appel à l'action du récit (jamais pendant une voix) */
.fc-cta { background: var(--nuit-2); border: 1px solid var(--or-profond); border-radius: var(--r-l); padding: 14px; display: grid; gap: 10px; justify-items: center; }
.fc-cta p { margin: 0; color: var(--blanc-nuit); }
.fc-cta-b:empty { display: none; }
.face-cta { margin-top: 10px; padding-top: 10px; border-top: 1px solid #2F5A40; display: grid; gap: 8px; justify-items: start; }
.face-cta p { margin: 0; color: var(--blanc-nuit); font-size: var(--t-corps); }
.face-cta #face-cta-b:empty { display: none; }
.rv-sec { display: grid; gap: 10px; }
.rv-sec:empty { display: none; }
.recit-voile.fin .rv-passer { display: none; }
.recit-voile.fin .rv-texte { font: 500 var(--t-lire)/1.45 var(--f-titre); }
.recit-voile.fin .rv-texte p { margin: 0 0 12px; }
.recit-voile.fin .rv-offre { color: var(--or-clair); }
.recit-voile.fin .rv-titre { font: 700 var(--t-h2)/1.25 var(--f-titre); text-transform: none; letter-spacing: 0; color: var(--or-clair); text-wrap: balance; }


/* ================================================================== « Pourquoi Sahel EDU » */
.pq-accroche { font-size: var(--t-lire); line-height: 1.4; color: var(--blanc-nuit); max-width: 40ch; margin: -6px 0 18px; font-family: var(--f-lire); }
.pq-sommaire { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; scrollbar-width: none; position: sticky; top: calc(var(--haut) + 52px + env(safe-area-inset-top, 0px)); background: var(--nuit); z-index: 2; }
.pq-sommaire::-webkit-scrollbar { display: none; }
.pq-sommaire a { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--r-s); border: 1px solid var(--filet); background: var(--nuit-2); color: var(--blanc-nuit); text-decoration: none; font-size: var(--t-mention); white-space: nowrap; }
.pq-sec { padding: 22px 0; border-top: 1px solid var(--filet); scroll-margin-top: calc(var(--haut) + 110px); }
.pq-sec > h3 { font-size: var(--t-h2); line-height: 1.2; margin-bottom: 10px; }
.pq-intro, .pq-note { color: var(--gris-nuit); max-width: 62ch; }
.pq-note { font-size: var(--t-mention); }
.pq-profils { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .pq-profils { grid-template-columns: 1fr 1fr; } }
.pq-profils > li { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: start; padding: 14px; border-radius: var(--r-l); background: var(--nuit-2); border: 1px solid var(--filet); }
.pq-profils > li > .btn { grid-column: 1 / -1; justify-self: start; }
.pq-profils .mini { width: 56px; height: 56px; border: 2px solid var(--or); }
.pq-profils h4, .pq-etapes h4, .pq-documents h4 { font-size: var(--t-h3); margin-bottom: 6px; }
.pq-points { margin: 0; padding-inline-start: 1.1em; display: grid; gap: 6px; }
.pq-points li::marker { color: var(--or); }
.pq-comparaison { display: grid; gap: 6px; }
.pq-ligne { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 12px; border-radius: var(--r-m); background: var(--nuit-2); }
.pq-ligne b { font-family: var(--f-titre); }
.pq-avant { color: var(--gris-nuit); }
.pq-avec { color: var(--or-clair); font-weight: 600; }
.pq-entete { display: none; }
@media (min-width: 760px) { .pq-ligne { grid-template-columns: 1.1fr 1fr 1fr; align-items: start; } .pq-entete { display: grid; background: none; font-weight: 700; color: var(--or); } }
.pq-accordeon { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pq-accordeon button { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: start; padding: 12px 14px; border-radius: var(--r-m); background: var(--nuit-2); border: 1px solid var(--filet); font-weight: 600; }
.pq-accordeon button[aria-expanded="true"] { border-color: var(--or-profond); }
.pq-accordeon button[aria-expanded="true"] svg { transform: rotate(180deg); }
.pq-rep { padding: 12px 14px 4px; display: grid; gap: 10px; justify-items: start; }
.pq-rep p { margin: 0; color: var(--blanc-nuit); line-height: 1.55; max-width: 62ch; }
.pq-offre-texte, .pq-cta-texte { font-size: var(--t-lire); line-height: 1.4; font-family: var(--f-lire); max-width: 40ch; }
.pq-offre { background: var(--nuit-2); border-radius: var(--r-l); padding-inline: 16px; border: 1px solid var(--or-profond); }
.pq-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .pq-etapes { grid-template-columns: repeat(4, 1fr); } }
.pq-etapes li { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; border-radius: var(--r-l); background: var(--nuit-2); }
.pq-n { width: 40px; height: 40px; border-radius: 50%; background: var(--or); color: var(--encre); display: grid; place-items: center; font: 700 18px 'Poppins', system-ui, sans-serif; }
.anim-ar .pq-n { font-family: 'Amiri', serif; }
.pq-etapes p { margin: 0; color: var(--gris-nuit); }
.pq-documents { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pq-documents li { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: start; padding: 14px; border-radius: var(--r-l); background: var(--nuit-2); }
.pq-documents li > svg { color: var(--or); width: 28px; height: 28px; }
.pq-documents p { margin: 0; color: var(--gris-nuit); font-size: var(--t-mention); }
.pq-documents .btn { grid-column: 1 / -1; justify-self: start; }
.pq-boutons { display: grid; gap: 10px; margin-top: 12px; max-width: 460px; }

/* capture qui ne charge pas : fond neutre et titre (jamais d'icône cassée) */
.tel-ecran.ko { position: relative; background: var(--papier-2); }
.tel-ecran.ko img { visibility: hidden; }
.tel-ecran.ko::after { content: attr(data-titre); position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: var(--encre); font: 600 var(--t-ui)/1.4 var(--f-ui); }