/* ============================================================
   MYTHÉO — Template KAILASH · LA FONDATION (le cadre unifié).
   Cf. docs/kailash-cadre-unifie.md.

   Kailash = l'ANTI-ATLAS : exploration & découverte, immersif
   plein-cadre grand écran, langage « jeu / carte au trésor ».

   Ce fichier pose UNE fois : les tokens d'ambiance (repris VERBATIM
   de RD, pour porter les écrans sans réécriture), la coque
   .kailash-app, le chrome global, et le squelette d'écran partagé
   .kailash-screen (slot titre fixe + slot contenu) avec ses 5
   catégories de layout. Les écrans (matière RD) se branchent dessus.

   Contraintes projet : vanilla, file:///offline, CSP (zéro JS inline).
   Anti-régression : UN seul --kailash-chrome-top, UN seul patron
   titre-fixe/scroll-séparé. Plus aucun `mousse-` de classe.
   ============================================================ */

/* ============================================================
   1. TOKENS D'AMBIANCE  (verbatim RD → noms inchangés)
   Scopés sous le template kailash. Défaut = or grec.
   ============================================================ */
html[data-template="kailash"] {
  --nuit-0:#0f141c; --nuit-1:#141a24; --nuit-2:#1d2733; --nuit-3:#243244;
  --or:#E7C56E; --or-clair:#F6E4A9; --or-braise:#caa451;
  --creme:#EADCBE; --terracotta:#C0553B;
  --texte:#f3ead4; --texte-doux:#c9bda0;
  --disp:"Zilla Slab",Georgia,serif; --corps:"Spectral",Georgia,serif;
  --glowor:0 0 24px rgba(var(--lueur),.55), 0 0 60px rgba(var(--lueur),.25);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  /* Identité par-monde (défaut = or grec) : nuit + ciel + lueur propres. */
  --nuit-a:#1a2230; --nuit-b:#0a0d12; --ciel-a:#24314a; --ciel-b:#16202e; --lueur:231,197,110;

  /* ---- Les DEUX seules mesures de chrome de tout le thème (fin des duplications RD) ---- */
  --kailash-chrome-top: calc(var(--safe-t) + 66px);   /* bas du chrome = haut du slot titre */
  --kailash-title-h: 116px;                            /* hauteur réservée au slot titre fixe */
  --kailash-body-top: calc(var(--kailash-chrome-top) + var(--kailash-title-h));
}

/* Palettes « joyau » par-monde (verbatim RD). data-theme posé sur html OU un descendant. */
html[data-template="kailash"][data-theme="amber"],     html[data-template="kailash"] [data-theme="amber"]     { --or:#F0CE79;--or-clair:#FBEEBE;--nuit-a:#3a3018;--nuit-b:#14100a;--ciel-a:#4a3c1c;--ciel-b:#241d0e;--lueur:240,206,121; }
html[data-template="kailash"][data-theme="teal"],      html[data-template="kailash"] [data-theme="teal"]      { --or:#5FE0CE;--or-clair:#a9f2e6;--nuit-a:#123f3a;--nuit-b:#08201d;--ciel-a:#175049;--ciel-b:#0c2b27;--lueur:95,224,206; }
html[data-template="kailash"][data-theme="crimson"],   html[data-template="kailash"] [data-theme="crimson"]   { --or:#F59C82;--or-clair:#f8c2b2;--nuit-a:#48201f;--nuit-b:#1c0f0d;--ciel-a:#5c2725;--ciel-b:#2e1614;--lueur:245,156,130; }
html[data-template="kailash"][data-theme="ice"],       html[data-template="kailash"] [data-theme="ice"]       { --or:#AEDDF6;--or-clair:#d6eefc;--nuit-a:#1a3a52;--nuit-b:#0b1e2e;--ciel-a:#224a68;--ciel-b:#122c40;--lueur:174,221,246; }
html[data-template="kailash"][data-theme="saffron"],   html[data-template="kailash"] [data-theme="saffron"]   { --or:#FBB44E;--or-clair:#ffd490;--nuit-a:#3e2c10;--nuit-b:#191108;--ciel-a:#503815;--ciel-b:#28190a;--lueur:251,180,78; }
html[data-template="kailash"][data-theme="verdant"],   html[data-template="kailash"] [data-theme="verdant"]   { --or:#8FD891;--or-clair:#bde8bf;--nuit-a:#1a3d22;--nuit-b:#0b1e12;--ciel-a:#224d2c;--ciel-b:#122c1a;--lueur:143,216,145; }
html[data-template="kailash"][data-theme="sakura"],    html[data-template="kailash"] [data-theme="sakura"]    { --or:#F4AEC8;--or-clair:#fad4e2;--nuit-a:#48222f;--nuit-b:#1e0f16;--ciel-a:#5c2c3d;--ciel-b:#2e1620;--lueur:244,174,200; }
html[data-template="kailash"][data-theme="imperial"],  html[data-template="kailash"] [data-theme="imperial"]  { --or:#F4C05C;--or-clair:#f9dda0;--nuit-a:#4a221d;--nuit-b:#1e0f0c;--ciel-a:#5e2c25;--ciel-b:#2f1712;--lueur:244,192,92; }
html[data-template="kailash"][data-theme="lapis"],     html[data-template="kailash"] [data-theme="lapis"]     { --or:#E6C86A;--or-clair:#f4e2ac;--nuit-a:#1c3057;--nuit-b:#0d182c;--ciel-a:#25406e;--ciel-b:#132241;--lueur:230,200,106; }
html[data-template="kailash"][data-theme="lotus"],     html[data-template="kailash"] [data-theme="lotus"]     { --or:#E7BA5C;--or-clair:#f4dc9c;--nuit-a:#33234f;--nuit-b:#160e28;--ciel-a:#432f66;--ciel-b:#221a3c;--lueur:231,186,92; }
html[data-template="kailash"][data-theme="jade"],      html[data-template="kailash"] [data-theme="jade"]      { --or:#71D8B0;--or-clair:#a9ecd6;--nuit-a:#173d32;--nuit-b:#0a1e18;--ciel-a:#1f5042;--ciel-b:#102c24;--lueur:113,216,176; }
html[data-template="kailash"][data-theme="obsidian"],  html[data-template="kailash"] [data-theme="obsidian"]  { --or:#EC8B6E;--or-clair:#f4b6a1;--nuit-a:#2a2440;--nuit-b:#130f22;--ciel-a:#372f56;--ciel-b:#1c1836;--lueur:236,139,110; }
html[data-template="kailash"][data-theme="royal"],     html[data-template="kailash"] [data-theme="royal"]     { --or:#AEC0F4;--or-clair:#d2dcfa;--nuit-a:#1e2c52;--nuit-b:#0e162c;--ciel-a:#283c6e;--ciel-b:#151f41;--lueur:174,192,244; }
html[data-template="kailash"][data-theme="aurora"],    html[data-template="kailash"] [data-theme="aurora"]    { --or:#7DE6CE;--or-clair:#b2f2e2;--nuit-a:#163d46;--nuit-b:#0a1e24;--ciel-a:#1e5060;--ciel-b:#102c36;--lueur:125,230,206; }
html[data-template="kailash"][data-theme="manuscrit"], html[data-template="kailash"] [data-theme="manuscrit"] { --or:#E6C078;--or-clair:#f4dcae;--nuit-a:#3a3018;--nuit-b:#16110a;--ciel-a:#4a3c1e;--ciel-b:#241d0e;--lueur:230,192,120; }

/* ============================================================
   2. LA COQUE  .kailash-app  (racine plein-cadre immersive)
   ============================================================ */
#kailash-root { position: fixed; inset: 0; z-index: 1; }

/* Safe-area / overscroll : le fond derrière l'app (html/body) prend la nuit
   du thème → plus de bande claire en bas (le portail garde var(--bg)). */
html[data-template="kailash"], html[data-template="kailash"] body { background: #0a0d12; }

.kailash-app {
  position: absolute; inset: 0; overflow: hidden;
  font-family: var(--corps); color: var(--texte);
  background: var(--nuit-b) radial-gradient(135% 95% at 50% -8%, var(--nuit-a) 0%, var(--nuit-b) 72%);
}
/* Réinitialisations locales scopées (le reset global appartient à base.css). */
.kailash-app *, .kailash-app *::before, .kailash-app *::after { box-sizing: border-box; }
.kailash-app * { -webkit-tap-highlight-color: transparent; scrollbar-width: none; -ms-overflow-style: none; }
.kailash-app *::-webkit-scrollbar { width: 0; height: 0; display: none; }
.kailash-app svg { display: block; }

/* L'hôte des écrans : chaque écran s'y monte en absolute inset:0. */
.kailash-host { position: absolute; inset: 0; overflow: hidden; }
.kailash-host > * { position: absolute; inset: 0; }

/* ============================================================
   3. CHROME GLOBAL  (retour · réglages · atlas) — rendu UNE fois
   ============================================================ */
.kailash-chrome {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(var(--safe-t) + 14px) 16px 0; pointer-events: none;
}
.kailash-chrome-right { display: flex; gap: 10px; }
.kailash-chrome-btn {
  pointer-events: auto; position: relative; width: 44px; height: 44px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #f6e6ba;
  background: rgba(22,15,7,.84); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid rgba(231,197,110,.85);
  box-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.28), inset 0 0 0 1px rgba(246,228,169,.12);
}
.kailash-chrome-btn:active { transform: scale(.92); }
.kailash-chrome-btn svg { width: 19px; height: 19px; }
.kailash-chrome .kailash-lock {
  position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px;
  border-radius: 50%; background: #2a1e0c; border: 1px solid rgba(216,178,90,.7);
  display: grid; place-items: center;
}
.kailash-chrome .kailash-lock svg { width: 9px; height: 9px; }
/* Sur la home (aucun écran parent), le bouton retour n'a pas lieu d'être. */
.kailash-chrome[data-back="off"] .kailash-back { visibility: hidden; }
/* Mode focus (lecteur conte plein écran) : le chrome global s'efface. */
.kailash-app.kailash-focus .kailash-chrome { display: none; }

/* ============================================================
   4. SQUELETTE D'ÉCRAN PARTAGÉ  .kailash-screen  (+ 5 catégories)
   Slot titre fixe + slot contenu séparé. Modèle : RD notions/tresors.
   ============================================================ */
.kailash-screen { position: absolute; inset: 0; overflow: hidden; }

/* Couche fond (dégradé / héros / étoiles) — toujours fixe, jamais scrollée. */
.kailash-screen-bg { position: absolute; inset: 0; z-index: 0; }
/* Ciel étoilé PARTAGÉ (dense + scintillant). Hérité par TOUS les écrans qui
   ne le surchargent pas → fin des starfields maison, plus aucun écran terne. */
.kailash-screen-stars {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 8%,  rgba(var(--lueur),.8),  transparent),
    radial-gradient(1.3px 1.3px at 80% 14%, rgba(var(--lueur),.6),  transparent),
    radial-gradient(1.4px 1.4px at 34% 20%, rgba(var(--lueur),.65), transparent),
    radial-gradient(1.1px 1.1px at 64% 30%, rgba(var(--lueur),.5),  transparent),
    radial-gradient(1.3px 1.3px at 20% 46%, rgba(var(--lueur),.55), transparent),
    radial-gradient(1.2px 1.2px at 88% 54%, rgba(var(--lueur),.45), transparent),
    radial-gradient(1.5px 1.5px at 48% 12%, rgba(var(--lueur),.6),  transparent),
    radial-gradient(1.1px 1.1px at 6% 66%,  rgba(var(--lueur),.5),  transparent),
    radial-gradient(1.2px 1.2px at 72% 72%, rgba(var(--lueur),.5),  transparent),
    radial-gradient(1.3px 1.3px at 40% 82%, rgba(var(--lueur),.45), transparent),
    radial-gradient(1.1px 1.1px at 92% 88%, rgba(var(--lueur),.4),  transparent),
    radial-gradient(1.2px 1.2px at 26% 94%, rgba(var(--lueur),.45), transparent);
  animation: kailash-twinkle 5.5s ease-in-out infinite;
}
.kailash-screen-stars::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 54% 24%, rgba(255,247,224,.5),  transparent),
    radial-gradient(1px 1px at 16% 34%, rgba(255,247,224,.4),  transparent),
    radial-gradient(1px 1px at 84% 42%, rgba(255,247,224,.45), transparent),
    radial-gradient(1px 1px at 30% 62%, rgba(255,247,224,.4),  transparent),
    radial-gradient(1px 1px at 68% 88%, rgba(255,247,224,.4),  transparent);
  animation: kailash-twinkle 3.8s ease-in-out infinite reverse;
}
@keyframes kailash-twinkle { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }

/* SLOT TITRE : absolu, ancré sous le chrome, ne scrolle jamais. */
.kailash-screen-title {
  position: absolute; top: var(--kailash-chrome-top); left: 0; right: 0; z-index: 6;
  text-align: center; pointer-events: none; padding: 0 24px;
}
.kailash-screen-title .k {
  font-family: var(--disp); font-style: italic; font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--or-clair);
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.kailash-screen-title h1 {
  font-family: var(--disp); font-weight: 700; font-size: 44px; line-height: .95; margin: 3px 0 0;
  color: #fbefc9; text-shadow: 0 3px 24px rgba(var(--lueur),.45), 0 2px 10px rgba(0,0,0,.6);
}
.kailash-screen-title .sub { font-family: var(--disp); font-style: italic; font-weight: 500; font-size: 17.5px; color: #dbcca6; margin-top: 8px; }

/* SLOT CONTENU : base = plein-cadre sous le titre. Les catégories l'affinent. */
.kailash-screen-body { position: absolute; inset: 0; z-index: 3; }

/* ---- Catégorie A · field : champ 2D de médaillons, titre fixe, pan/scroll ----
   Le champ occupe tout (inset:0) et défile SOUS le titre fixe ; le contenu
   (constellation / grille) gère son propre décalage de tête (modèle RD notions). */
.kailash-screen--field .kailash-screen-body {
  inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}

/* ---- Catégorie B · grid : mur de cartes défilant sous le titre ---- */
.kailash-screen--grid .kailash-screen-body {
  top: var(--kailash-body-top); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 22px calc(var(--safe-b) + 26px);
}

/* ---- Catégorie C · map : carte plein-cadre, titre flottant discret ---- */
.kailash-screen--map .kailash-screen-body { inset: 0; }
.kailash-screen--map .kailash-screen-title { top: var(--kailash-chrome-top); }
.kailash-screen--map .kailash-screen-title h1 { font-size: 26px; }

/* ---- Catégorie D · hero : fond héros + contenu ancré bas, défilant ---- */
.kailash-screen--hero .kailash-screen-title { display: none; }   /* le nom vit dans le contenu */
.kailash-screen--hero .kailash-screen-body {
  inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* ---- Catégorie E · focus : scène unique centrée/séquentielle ---- */
.kailash-screen--focus .kailash-screen-title { display: none; }  /* remplacé par une barre de progression */
.kailash-screen--focus .kailash-screen-body {
  inset: 0; display: flex; flex-direction: column;
  padding: var(--kailash-body-top) 20px calc(var(--safe-b) + 20px);
}

/* ============================================================
   PRIMITIVE « champ vivant » (K.field) — partagée notions / liens.
   Courant d'énergie dans les liens (.kailash-flow) + entrée en fondu
   (.kailash-fade-in, utilisée par les nœuds via animation-delay --d).
   ============================================================ */
@keyframes kailash-flow { to { stroke-dashoffset: -20; } }
.kailash-app .kailash-flow { animation: kailash-flow 1.6s linear infinite; }
@keyframes kailash-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Karaoké (K.karaoke) : le mot lu = stabilo doré. Scopé au template pour
   atteindre AUSSI l'overlay fiche (qui vit dans <body>, hors .kailash-app). */
html[data-template="kailash"] .kailash-kw { border-radius: 5px; transition: background .12s ease, color .12s ease, box-shadow .12s ease; }
html[data-template="kailash"] .kailash-kw.on {
  background: var(--or-clair, #f6e4a9); color: #201603;
  box-shadow: 0 0 0 3px var(--or-clair, #f6e4a9), 0 0 18px rgba(var(--lueur,231,197,110),.7);
}

/* Bouton LECTURE standard (.kailash-playbtn) — médaillon illustré + anneau doré
   + triangle blanc + halo pulsé. Partagé fiche ↔ conte ; la TAILLE est posée par
   la classe spécifique. L'illustration = background-image (posée en JS). */
html[data-template="kailash"] .kailash-playbtn {
  position: relative; border-radius: 50%; cursor: pointer; border: none; padding: 0; display: grid; place-items: center;
  background-color: #14110a; background-size: cover; background-position: center 18%; background-repeat: no-repeat;
  box-shadow: 0 0 0 2px rgba(var(--lueur,231,197,110),.75), 0 0 0 4px rgba(10,14,20,.8), 0 0 26px rgba(var(--lueur,231,197,110),.25), 0 8px 22px rgba(0,0,0,.55);
  animation: kailash-play-pulse 3s ease-in-out infinite;
}
html[data-template="kailash"] .kailash-playbtn-ov { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(8,6,3,.2) 38%, rgba(8,6,3,.66) 96%); }
html[data-template="kailash"] .kailash-playbtn::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(var(--lueur,231,197,110),.4); animation: kailash-play-halo 3s ease-out infinite; }
html[data-template="kailash"] .kailash-playbtn:active { transform: scale(.95); }
html[data-template="kailash"] .kailash-playbtn svg { position: relative; z-index: 2; color: #fff; margin-left: 3px; filter: drop-shadow(0 1px 6px rgba(0,0,0,.85)); }
@keyframes kailash-play-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(var(--lueur,231,197,110),.75), 0 0 0 4px rgba(10,14,20,.8), 0 0 24px rgba(var(--lueur,231,197,110),.25), 0 8px 22px rgba(0,0,0,.55); }
  50%      { box-shadow: 0 0 0 2.5px var(--or-clair,#f6e4a9), 0 0 0 4px rgba(10,14,20,.85), 0 0 44px rgba(var(--lueur,231,197,110),.6), 0 8px 22px rgba(0,0,0,.55); }
}
@keyframes kailash-play-halo { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-template="kailash"] .kailash-playbtn, html[data-template="kailash"] .kailash-playbtn::after { animation: none; }
}

/* ============================================================
   COMPOSANTS PARTAGÉS (convergence — cf. docs/kailash-audit-convergence.md)
   Une seule grammaire pour : médaillon · carte-affiche · boutons · focus.
   Les écrans s'y rebranchent (Phase 2) au lieu de re-décliner la recette.
   ============================================================ */

/* --- LE médaillon (base = recette .kailash-em, ex-forkée 6×). Taille via
   modificateur ; états is-here / is-todo / is-locked partagés. --- */
/* Taille par défaut à specificité NULLE (:where) → une simple classe d'écran
   (.kailash-monde-disc { --k-med: … }) suffit à la surcharger. */
:where(html[data-template="kailash"] .kailash-medallion) { --k-med: 64px; }
html[data-template="kailash"] .kailash-medallion {
  position: relative; display: block; width: var(--k-med); height: var(--k-med); border-radius: 50%; flex: none;
  background-color: #12100c; background-size: cover; background-position: center 20%; background-repeat: no-repeat;
  box-shadow: 0 0 0 2px rgba(var(--lueur),.75), 0 0 0 4px rgba(10,14,20,.82), 0 6px 15px rgba(0,0,0,.5), inset 0 -11px 20px rgba(6,8,14,.5);
  transition: transform .3s cubic-bezier(.34,1.5,.5,1), box-shadow .25s, opacity .25s, filter .25s;
}
html[data-template="kailash"] button.kailash-medallion { border: none; padding: 0; cursor: pointer; }
html[data-template="kailash"] .kailash-medallion--sm { --k-med: 46px; }
html[data-template="kailash"] .kailash-medallion--lg { --k-med: 92px; }
html[data-template="kailash"] .kailash-medallion--xl { --k-med: 116px; }
html[data-template="kailash"] .kailash-medallion-ov { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(8,6,3,0) 44%, rgba(8,6,3,.32) 94%); }
html[data-template="kailash"] .kailash-medallion-ic { position: absolute; inset: 0; display: grid; place-items: center; }
html[data-template="kailash"] .kailash-medallion-ic svg { width: 40%; height: 40%; color: var(--or-clair); stroke: var(--or-clair); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 5px rgba(0,0,0,.85)); }
html[data-template="kailash"] button.kailash-medallion:hover { transform: scale(1.1); }
html[data-template="kailash"] .kailash-medallion.is-here {
  box-shadow: 0 0 0 3px #f0c24a, 0 0 0 5px rgba(10,14,20,.85), 0 0 26px rgba(var(--lueur),.65), 0 6px 15px rgba(0,0,0,.5);
}
html[data-template="kailash"] .kailash-medallion.is-here::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(var(--lueur),.6); animation: kailash-med-pulse 2.3s ease-out infinite; }
@keyframes kailash-med-pulse { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.3); opacity: 0; } }
html[data-template="kailash"] .kailash-medallion.is-todo { filter: grayscale(.55) brightness(.7); opacity: .7; }
html[data-template="kailash"] .kailash-medallion.is-locked { filter: grayscale(1) brightness(.5); }

/* --- LA carte-affiche (canva grid ; ex-forkée 4×) --- */
html[data-template="kailash"] .kailash-poster-card {
  position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; cursor: pointer; padding: 0;
  background-color: #14110a; border: 1px solid rgba(var(--lueur),.28); font: inherit; text-align: left;
  box-shadow: 0 12px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(var(--lueur),.08), 0 0 26px rgba(var(--lueur),.06);
  transition: transform .3s, box-shadow .3s;
}
html[data-template="kailash"] .kailash-poster-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.6), 0 0 30px rgba(var(--lueur),.28); }
html[data-template="kailash"] .kailash-poster-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; background-color: #14110a; }
html[data-template="kailash"] .kailash-poster-card-scrim { position: absolute; inset: 0; background: linear-gradient(rgba(8,7,4,.55), rgba(8,7,4,.08) 24%, rgba(8,7,4,.42) 56%, rgba(8,7,4,.9)); }
html[data-template="kailash"] .kailash-poster-card-meta { position: absolute; left: 14px; right: 14px; bottom: 13px; }
html[data-template="kailash"] .kailash-poster-card-src { display: block; font-family: var(--disp); font-style: italic; font-size: 11.5px; color: var(--or); text-shadow: 0 1px 5px #000; overflow: hidden; text-overflow: ellipsis; }
html[data-template="kailash"] .kailash-poster-card-ti { display: block; font-family: var(--disp); font-weight: 700; font-size: 16px; line-height: 1.1; color: #fdf6e2; margin-top: 3px; text-shadow: 0 2px 8px rgba(0,0,0,.9); }

/* --- LES boutons (ex-redéclarés 5×+) --- */
html[data-template="kailash"] .kailash-btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--disp); font-weight: 700; font-size: 15px; color: #241a08; cursor: pointer;
  background: linear-gradient(180deg, #F6E4A9, #E7C56E 55%, #caa451); border: none; border-radius: 26px; padding: 12px 22px;
  box-shadow: 0 6px 18px rgba(var(--lueur),.35);
}
html[data-template="kailash"] .kailash-btn-gold:active { transform: scale(.97); }
html[data-template="kailash"] .kailash-btn-gold svg { width: 20px; height: 20px; }
html[data-template="kailash"] .kailash-btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--disp); font-weight: 700; font-size: 14px; color: var(--texte); cursor: pointer;
  background: rgba(20,16,10,.55); border: 1px solid rgba(var(--lueur),.4); border-radius: 22px; padding: 10px 18px;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
html[data-template="kailash"] .kailash-btn-glass:active { transform: scale(.97); }
html[data-template="kailash"] .kailash-btn-glass svg { width: 18px; height: 18px; color: var(--or-clair); }

/* --- Accessibilité : anneau de focus clavier PARTOUT (round + rect) --- */
html[data-template="kailash"] :focus-visible { outline: 3px solid var(--or-clair, #f6e4a9); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .kailash-screen-stars, .kailash-screen-stars::after { animation: none; }
  html[data-template="kailash"] .kailash-medallion.is-here::after { animation: none; }
}

/* ============================================================
   Composant LECTURE (K.reading) — typos + panneau accordéon, partagés
   fiche ↔ conte. Scopé au template pour atteindre l'overlay fiche (body).
   ============================================================ */
html[data-template="kailash"] .kailash-read-sub { text-align: left; font-family: var(--disp); font-style: italic; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--or, #e7c56e); text-shadow: 0 1px 6px #000; }
html[data-template="kailash"] .kailash-read-title { text-align: left; font-family: var(--disp); font-weight: 700; font-size: 44px; line-height: 1; color: #fbefc9; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
html[data-template="kailash"] .kailash-readtoggle {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 22px; cursor: pointer;
  background: rgba(20,16,10,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(231,197,110,.4); color: var(--creme, #eadcbe); font-family: var(--disp); font-weight: 700; font-size: 17px;
}
html[data-template="kailash"] .kailash-readtoggle svg { width: 21px; height: 21px; color: var(--or, #e7c56e); }
html[data-template="kailash"] .kailash-readtoggle:active { transform: scale(.97); }

html[data-template="kailash"] .kailash-readpanel {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column;
  background: #0c0a06 radial-gradient(130% 90% at 50% -10%, #17130b, #0b0805 72%);
  transform: translateY(100%); visibility: hidden; transition: transform .34s ease, visibility .34s;
}
html[data-template="kailash"] .kailash-readpanel.open { transform: translateY(0); visibility: visible; }
html[data-template="kailash"] .kailash-readpanel-close { flex: 0 0 auto; align-self: center; margin: calc(env(safe-area-inset-top) + 8px) 0 2px; width: 48px; height: 34px; border-radius: 17px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(231,197,110,.3); color: var(--or-clair, #f6e4a9); cursor: pointer; }
html[data-template="kailash"] .kailash-readpanel-close svg { width: 22px; height: 22px; }
html[data-template="kailash"] .kailash-readpanel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 26px 18px; }
html[data-template="kailash"] .kailash-readpanel-text { margin: auto; max-width: 44ch; font-family: var(--corps); font-size: calc(19px * var(--ts, 1)); line-height: 1.72; color: #f3ead4; text-align: left; }
html[data-template="kailash"] .kailash-readpanel-foot { flex: 0 0 auto; display: grid; place-items: center; padding: 8px 0 calc(env(safe-area-inset-bottom) + 18px); }

/* ============================================================
   5. OVERLAYS RÉUTILISÉS, restylés Kailash (canva 7)
   Onboard + bandeau RGPD sont PARTAGÉS avec le portail Atlas :
   on garde leur logique/markup (portal.js, analytics.js) et on
   restyle UNIQUEMENT sous html[data-template="kailash"] → le portail
   conserve son look exact (zéro régression).
   ============================================================ */

/* ---- Bandeau de consentement (RGPD Google) ---- */
html[data-template="kailash"] .consent {
  background: rgba(20,14,7,.94); border: 1px solid rgba(231,197,110,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 34px rgba(0,0,0,.6), inset 0 0 0 1px rgba(246,228,169,.08);
  color: var(--texte);
}
html[data-template="kailash"] .consent-txt { color: var(--texte); font-family: var(--ui-legible); }
html[data-template="kailash"] .consent-link { color: var(--or-clair); text-decoration-color: rgba(var(--lueur),.6); }
html[data-template="kailash"] .consent-btn { font-family: var(--ui-legible); font-weight: 600; }
html[data-template="kailash"] .consent-btn.refuse {
  background: rgba(255,255,255,.06); color: var(--creme); border: 1px solid rgba(231,197,110,.35);
}
html[data-template="kailash"] .consent-btn.accept {
  background: linear-gradient(180deg,#F6E4A9,#E7C56E 55%,#caa451); color: #241a08; border-color: transparent;
  box-shadow: 0 0 16px rgba(var(--lueur),.4);
}

/* ---- Onboarding (« Bienvenue dans Mythéo ») ---- */
html[data-template="kailash"] .onboard { background: rgba(6,8,12,.82); }
html[data-template="kailash"] .onboard-card {
  background: var(--nuit-b) radial-gradient(120% 90% at 50% -10%, var(--nuit-a), var(--nuit-b) 74%);
  border: 1px solid rgba(231,197,110,.5); color: var(--texte); font-family: var(--corps);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(246,228,169,.06);
}
html[data-template="kailash"] .onboard-mark { color: var(--or); text-shadow: 0 0 24px rgba(var(--lueur),.6); }
html[data-template="kailash"] .onboard-card h2 { font-family: var(--disp); font-weight: 700; color: #fbefc9; }
html[data-template="kailash"] .onboard-list li { color: var(--texte-doux); }
html[data-template="kailash"] .onboard-list b { color: var(--or-clair); }
html[data-template="kailash"] .onboard-list li svg { color: var(--or); }
html[data-template="kailash"] .onboard-card .btn.primary {
  background: linear-gradient(180deg,#F6E4A9,#E7C56E 55%,#caa451); color: #241a08; border: none;
  font-family: var(--disp); font-weight: 600; box-shadow: var(--glowor);
}

@media (prefers-reduced-motion: reduce) {
  .kailash-app * { animation: none !important; transition-duration: .001s !important; }
}

/* ============================================================
   RÉGLAGES (modale partagée #settingsModal + portillon #parentGate) — habillage
   KAILASH. La modale est écrite avec les tokens Atlas (teal) ; sur l'app Kailash
   on la ré-habille en NUIT + OR (Zilla/Spectral) pour rester cohérente. Libellés
   et structure INCHANGÉS — uniquement l'apparence.
   ============================================================ */
html[data-template="kailash"] .settings-modal { background: rgba(6, 8, 13, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-template="kailash"] .settings-card {
  background: var(--nuit-b) radial-gradient(130% 90% at 50% -12%, var(--nuit-a), var(--nuit-b) 74%);
  border: 1px solid rgba(var(--lueur), .34); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .62); color: var(--texte);
}
html[data-template="kailash"] .settings-card h2 { font-family: var(--disp); font-weight: 700; color: #fbefc9; }
html[data-template="kailash"] .settings-close { width: 42px; height: 42px; border-radius: 50%; background: rgba(20, 26, 36, .7); border: 1px solid rgba(var(--lueur), .3); color: var(--or-clair); font-size: 20px; }
html[data-template="kailash"] .set-label { font-family: var(--disp); font-weight: 700; color: var(--texte-doux); }
html[data-template="kailash"] .set-hint { color: var(--texte-doux); }
html[data-template="kailash"] .settings .seg { background: rgba(18, 24, 33, .7); border: 1px solid rgba(var(--lueur), .26); border-radius: 12px; padding: 4px; gap: 4px; }
html[data-template="kailash"] .settings .seg button { color: var(--texte-doux); font-family: var(--disp); font-weight: 600; border-radius: 9px; padding: 9px 8px; }
html[data-template="kailash"] .settings .seg button[aria-pressed="true"] { background: linear-gradient(180deg, var(--or-clair), var(--or)); color: #241a08; box-shadow: 0 1px 8px rgba(var(--lueur), .4); }
html[data-template="kailash"] .set-section { border-top: 1px solid rgba(var(--lueur), .16); }
html[data-template="kailash"] .set-section-title { font-family: var(--disp); color: var(--or); }
html[data-template="kailash"] .settings-card .inner { color: var(--texte-doux); font-family: var(--corps); }
html[data-template="kailash"] .settings-card .inner h4 { font-family: var(--disp); color: var(--texte); }
html[data-template="kailash"] .settings-card .inner a { color: var(--or-clair); }
html[data-template="kailash"] .ghost-btn { background: rgba(20, 26, 36, .55); border: 1px solid rgba(var(--lueur), .34); color: var(--or-clair); border-radius: 11px; }
html[data-template="kailash"] .danger-btn { background: rgba(70, 26, 24, .5); border: 1px solid rgba(226, 104, 95, .5); color: #f2b8b0; border-radius: 11px; }
html[data-template="kailash"] .btn.primary { background: linear-gradient(180deg, var(--or-clair), var(--or)); color: #241a08; border: none; border-radius: 12px; font-family: var(--disp); font-weight: 700; }
html[data-template="kailash"] .gate-q { font-family: var(--disp); color: #fbefc9; }
html[data-template="kailash"] .gate-input { background: rgba(18, 24, 33, .8); border: 1px solid rgba(var(--lueur), .4); color: var(--texte); }

/* Police RÉELLEMENT LISIBLE (sans-serif système) pour le TEXTE des modales
   fonctionnelles — onboard + réglages + portillon. On neutralise ici les
   var(--disp)/var(--corps) posés plus haut (l'habillage nuit/or est conservé). */
html[data-template="kailash"] .onboard-card,
html[data-template="kailash"] .onboard-card h2,
html[data-template="kailash"] .onboard-list li,
html[data-template="kailash"] .settings-card h2,
html[data-template="kailash"] .set-label,
html[data-template="kailash"] .set-hint,
html[data-template="kailash"] .set-section-title,
html[data-template="kailash"] .settings .seg button,
html[data-template="kailash"] .settings-card .inner,
html[data-template="kailash"] .settings-card .inner h4,
html[data-template="kailash"] .gate-q,
html[data-template="kailash"] .onboard-card .btn.primary,
html[data-template="kailash"] .settings-card .btn.primary,
html[data-template="kailash"] .gate-card .btn.primary { font-family: var(--ui-legible); }