/* ============================================================
   MYTHÉO — Kailash · écran FRISE (le fil du temps).
   Axe VERTICAL : un sentier doré pointillé (SVG) serpente de haut en bas
   entre des médaillons illustrés, une étape par ère, en alternance
   gauche/droite. Catégorie `grid` du cadre.

   Fond IMMERSIF (au niveau accueil/histoires) : profondeur de nuit + lueur
   chaude (slot bg), champ d'étoiles dense scintillant (slot stars), voile
   d'ambiance du monde (figure centrale floutée en bas).

   Médaillons = MODÈLE PARTAGÉ (.kailash-loc .kailash-em .kailash-lab) —
   recette et survol « génie » IDENTIQUES à la carte (redéclarés ici car la
   CSS carte est scopée .kailash-carte et lazy-loadée). Lecture « lire en
   suivant » via le lecteur partagé (.kailash-readpanel). Nommage 100 %
   kailash-*. Uniquement les tokens d'ambiance (--or / --or-clair / --lueur…).
   ============================================================ */

html[data-template="kailash"] .kailash-frise {
  --frise-med: 88px;   /* diamètre du médaillon représentatif (modèle partagé) */
}

/* -------------------------------------------------- fond immersif */
html[data-template="kailash"] .kailash-frise .kailash-screen-bg {
  background:
    radial-gradient(120% 62% at 50% -12%, rgba(var(--lueur), .12), transparent 55%),
    radial-gradient(90% 55% at 50% 116%, rgba(var(--lueur), .06), transparent 62%),
    radial-gradient(140% 105% at 50% -8%, var(--nuit-a), var(--nuit-b) 68%, #06080c 100%);
}

/* voile d'ambiance du monde : figure centrale floutée, ancrée en bas */
html[data-template="kailash"] .kailash-frise-amb {
  position: absolute; left: 0; right: 0; bottom: 0; height: 66%; z-index: 0;
  background-position: center bottom; background-size: cover; background-repeat: no-repeat;
  opacity: .14; filter: blur(3px);
  -webkit-mask-image: linear-gradient(transparent, #000 55%, #000);
  mask-image: linear-gradient(transparent, #000 55%, #000);
}

/* champ d'étoiles dense + scintillement doux (deux couches) */
html[data-template="kailash"] .kailash-frise .kailash-screen-stars {
  background-image:
    radial-gradient(1.5px 1.5px at 8% 6%, #fff8e6, transparent),
    radial-gradient(1px 1px at 18% 13%, rgba(var(--lueur), .7), transparent),
    radial-gradient(1.1px 1.1px at 29% 5%, #fff, transparent),
    radial-gradient(.9px .9px at 39% 11%, rgba(var(--lueur), .55), transparent),
    radial-gradient(1.3px 1.3px at 48% 7%, #fff8e6, transparent),
    radial-gradient(1px 1px at 58% 14%, rgba(var(--lueur), .6), transparent),
    radial-gradient(.9px .9px at 67% 4%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 76% 12%, rgba(var(--lueur), .6), transparent),
    radial-gradient(1px 1px at 86% 6%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 94% 13%, rgba(var(--lueur), .6), transparent),
    radial-gradient(1px 1px at 13% 26%, rgba(var(--lueur), .5), transparent),
    radial-gradient(.9px .9px at 34% 30%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 61% 27%, rgba(var(--lueur), .5), transparent),
    radial-gradient(1px 1px at 88% 33%, #fff, transparent);
  opacity: .85; animation: kailash-frise-twinkle 6.8s ease-in-out infinite;
}
html[data-template="kailash"] .kailash-frise .kailash-screen-stars::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 6% 46%, rgba(var(--lueur), .5), transparent),
    radial-gradient(.9px .9px at 23% 54%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 44% 49%, rgba(var(--lueur), .45), transparent),
    radial-gradient(.9px .9px at 66% 57%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 82% 51%, rgba(var(--lueur), .5), transparent),
    radial-gradient(1px 1px at 14% 72%, rgba(var(--lueur), .4), transparent),
    radial-gradient(.9px .9px at 38% 78%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 70% 82%, rgba(var(--lueur), .45), transparent),
    radial-gradient(1px 1px at 90% 74%, #fff, transparent);
  opacity: .7; animation: kailash-frise-twinkle 8.4s ease-in-out infinite reverse;
}
@keyframes kailash-frise-twinkle { 0%, 100% { opacity: .85; } 50% { opacity: .55; } }

/* léger voile de lisibilité au-dessus du décor */
html[data-template="kailash"] .kailash-frise-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 50% at 50% 0%, transparent 60%, rgba(6, 8, 12, .35));
}

/* -------------------------------------------------- corps défilant (vertical) */
html[data-template="kailash"] .kailash-frise-inner { position: relative; padding: 4px 4px 8px; }

/* compteur de saga (léger) */
html[data-template="kailash"] .kailash-frise-meter { display: flex; align-items: center; gap: 10px; margin: 2px 22px 6px; }
html[data-template="kailash"] .kailash-frise-meter-lab {
  font-family: var(--disp); font-weight: 600; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-doux);
}
html[data-template="kailash"] .kailash-frise-meter-bar {
  flex: 1; height: 5px; border-radius: 5px; overflow: hidden;
  background: rgba(10, 14, 20, .5); border: 1px solid rgba(var(--lueur), .28);
}
html[data-template="kailash"] .kailash-frise-meter-fill {
  display: block; height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--or-braise), var(--or-clair));
  box-shadow: 0 0 8px rgba(var(--lueur), .5); transition: width .4s ease;
}

/* capuchon de départ */
html[data-template="kailash"] .kailash-frise-cap { position: relative; z-index: 2; text-align: center; margin: 8px 26px 0; }
html[data-template="kailash"] .kailash-frise-cap-orb {
  display: block; width: 12px; height: 12px; border-radius: 50%; margin: 0 auto;
  background: radial-gradient(circle, #fff7e2, var(--or) 60%, transparent); box-shadow: 0 0 16px rgba(var(--lueur), .8);
}
html[data-template="kailash"] .kailash-frise-cap-tx {
  display: block; margin-top: 8px; font-family: var(--disp); font-style: italic; font-weight: 600;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux);
}

/* -------------------------------------------------- sentier + étapes */
html[data-template="kailash"] .kailash-frise-path { position: relative; margin-top: 12px; padding: 8px 0 0; }
html[data-template="kailash"] .kailash-frise-trail { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
html[data-template="kailash"] .kailash-frise-trail-line { opacity: .8; }

html[data-template="kailash"] .kailash-frise-step {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 15px;
  padding: 14px 22px; min-height: 136px;
}
html[data-template="kailash"] .kailash-frise-step--right { flex-direction: row-reverse; text-align: right; }

html[data-template="kailash"] .kailash-frise-med {
  position: relative; flex: 0 0 var(--frise-med); width: var(--frise-med); height: var(--frise-med);
  display: grid; place-items: center;
}

/* carte texte — allégée (verre discret, moins d'ombre) */
html[data-template="kailash"] .kailash-frise-txt { flex: 1; min-width: 0; }
html[data-template="kailash"] .kailash-frise-card {
  background: linear-gradient(180deg, rgba(20, 28, 40, .42), rgba(12, 17, 26, .3));
  border: 1px solid rgba(var(--lueur), .16); border-radius: 16px; padding: 12px 14px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}
html[data-template="kailash"] .kailash-frise-step--right .kailash-frise-card { border-top-right-radius: 5px; }
html[data-template="kailash"] .kailash-frise-step:not(.kailash-frise-step--right) .kailash-frise-card { border-top-left-radius: 5px; }

html[data-template="kailash"] .kailash-frise-era {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px;
  background: rgba(var(--lueur), .08); border: 1px solid rgba(var(--lueur), .34);
  font-family: var(--disp); font-weight: 600; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--or-clair); white-space: nowrap;
}
html[data-template="kailash"] .kailash-frise-era-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--or); box-shadow: 0 0 7px rgba(var(--lueur), .9); }
html[data-template="kailash"] .kailash-frise-h2 { font-family: var(--disp); font-weight: 700; font-size: 21px; line-height: 1.08; letter-spacing: .3px; color: #fbf3dd; }
html[data-template="kailash"] .kailash-frise-p { margin-top: 5px; font-size: 14px; font-weight: 500; line-height: 1.5; color: #cabd9c; }

/* rangée des autres figures de l'ère (même médaillon partagé, compact) */
html[data-template="kailash"] .kailash-frise-figs { display: flex; flex-wrap: wrap; gap: 9px 11px; margin-top: 11px; }
html[data-template="kailash"] .kailash-frise-step--right .kailash-frise-figs { justify-content: flex-end; }
html[data-template="kailash"] .kailash-frise-fig { width: 58px; display: flex; flex-direction: column; align-items: center; text-align: center; }
html[data-template="kailash"] .kailash-frise-fig-nm { display: block; margin-top: 6px; font-family: var(--disp); font-weight: 600; font-size: 10.5px; line-height: 1.15; color: var(--creme); }
html[data-template="kailash"] .kailash-frise-more { align-self: center; display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 20px; background: rgba(20,16,10,.55); border: 1px solid rgba(var(--lueur),.4); font-family: var(--disp); font-weight: 700; font-size: 13px; color: var(--or-clair); }
html[data-template="kailash"] .kailash-frise-fig .kailash-loc.is-todo ~ .kailash-frise-fig-nm { color: #9fb0c4; }

/* étiquette d'état */
html[data-template="kailash"] .kailash-frise-tag {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--disp); font-weight: 600; font-size: 11px; letter-spacing: .05em; color: var(--or-clair);
}
html[data-template="kailash"] .kailash-frise-step--right .kailash-frise-tag { flex-direction: row-reverse; }
html[data-template="kailash"] .kailash-frise-tag svg { width: 14px; height: 14px; }

/* étape « à découvrir » : nom d'ère et étiquette estompés */
html[data-template="kailash"] .kailash-frise-step--dim .kailash-frise-era { color: #9fb0c4; border-color: rgba(120, 140, 165, .36); background: rgba(120, 140, 165, .07); }
html[data-template="kailash"] .kailash-frise-step--dim .kailash-frise-era-dot { background: #8296ad; box-shadow: none; }
html[data-template="kailash"] .kailash-frise-step--dim .kailash-frise-h2 { color: #c7cfda; }
html[data-template="kailash"] .kailash-frise-step--dim .kailash-frise-tag { color: #9fb0c4; }

/* ============================================================
   MÉDAILLON PARTAGÉ (recette carte : .kailash-loc .kailash-em .kailash-lab).
   ============================================================ */
html[data-template="kailash"] .kailash-frise .kailash-loc { position: relative; display: grid; place-items: center; cursor: pointer; padding: 0; background: none; border: 0; }
html[data-template="kailash"] .kailash-frise .kailash-loc .kailash-em {
  display: block; position: relative; width: var(--frise-med); height: var(--frise-med); border-radius: 50%;
  background-color: #12100c; background-size: cover; background-position: center 20%; background-repeat: no-repeat;
  transition: transform .3s cubic-bezier(.34, 1.5, .5, 1);
  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);
}
html[data-template="kailash"] .kailash-frise .kailash-loc .kailash-em .kailash-em-ov {
  position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(8, 6, 3, 0) 44%, rgba(8, 6, 3, .3) 94%);
}
html[data-template="kailash"] .kailash-frise .kailash-loc:hover .kailash-em,
html[data-template="kailash"] .kailash-frise .kailash-loc:focus-visible .kailash-em { transform: scale(1.12); }

html[data-template="kailash"] .kailash-frise .kailash-loc .kailash-num {
  position: absolute; right: -3px; bottom: -3px; z-index: 4; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--or); border: 1px solid #4a3410;
  font-family: var(--disp); font-weight: 700; font-size: 12px; color: #241a08; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

html[data-template="kailash"] .kailash-frise .kailash-loc .kailash-lab {
  position: absolute; left: 50%; top: 100%; z-index: 5; transform: translate(-50%, -6px) scale(.6); transform-origin: center top;
  opacity: 0; pointer-events: none; white-space: nowrap; padding: 3px 9px; border-radius: 5px;
  background: rgba(242, 230, 198, .94); border: 1px solid rgba(216, 178, 90, .7);
  font-family: var(--disp); font-weight: 700; font-size: 12px; color: #2e2010;
  transition: opacity .16s ease, transform .3s cubic-bezier(.34, 1.56, .5, 1);
}
html[data-template="kailash"] .kailash-frise .kailash-loc:hover .kailash-lab,
html[data-template="kailash"] .kailash-frise .kailash-loc:focus-visible .kailash-lab { opacity: 1; transform: translate(-50%, 6px) scale(1); }
html[data-template="kailash"] .kailash-frise .kailash-loc .kailash-glow {
  position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(var(--lueur), .55), rgba(var(--lueur), 0) 68%);
}
html[data-template="kailash"] .kailash-frise .kailash-loc:hover .kailash-glow { animation: kailash-frise-glow .7s ease-out; }
@keyframes kailash-frise-glow { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.7); } }

html[data-template="kailash"] .kailash-frise .kailash-loc.is-here .kailash-em {
  box-shadow: 0 0 0 3px #f0c24a, 0 0 0 5px rgba(10, 14, 20, .85), 0 0 24px rgba(var(--lueur), .6), 0 6px 15px rgba(0, 0, 0, .5);
}
html[data-template="kailash"] .kailash-frise .kailash-loc.is-here .kailash-em:after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(var(--lueur), .6);
  animation: kailash-frise-pulse 2.3s ease-out infinite;
}
@keyframes kailash-frise-pulse { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.3); opacity: 0; } }

html[data-template="kailash"] .kailash-frise .kailash-loc.is-todo .kailash-em {
  filter: grayscale(.55) brightness(.6); box-shadow: 0 0 0 2px rgba(200, 214, 230, .28), 0 4px 12px rgba(0, 0, 0, .5);
}

/* variante compacte : figures secondaires */
html[data-template="kailash"] .kailash-frise .kailash-frise-fig-loc .kailash-em { width: 44px; height: 44px; box-shadow: 0 0 0 2px rgba(var(--lueur), .7), 0 0 0 3px rgba(10, 14, 20, .8), 0 4px 10px rgba(0, 0, 0, .5); }
html[data-template="kailash"] .kailash-frise .kailash-frise-fig-loc.is-todo .kailash-em { filter: grayscale(.55) brightness(.6); box-shadow: 0 0 0 2px rgba(200, 214, 230, .28), 0 4px 10px rgba(0, 0, 0, .5); }

/* finale (légère) */
html[data-template="kailash"] .kailash-frise-finale {
  margin: 8px 22px 4px; text-align: center; padding: 16px; border-radius: 18px;
  background: rgba(var(--lueur), .05); border: 1px dashed rgba(var(--lueur), .4);
}
html[data-template="kailash"] .kailash-frise-finale h3 { font-family: var(--disp); font-weight: 700; font-size: 17px; color: var(--or-clair); }
html[data-template="kailash"] .kailash-frise-finale p { margin-top: 4px; font-size: 13.5px; font-weight: 500; color: #cabd9c; }

/* état vide */
html[data-template="kailash"] .kailash-frise-empty { padding: 48px 26px; text-align: center; color: var(--texte-doux); font-family: var(--disp); font-style: italic; font-size: 15px; }

/* ============================================================
   LECTEUR « lire en suivant » (K.reading.panel) : en-tête titré par l'ère,
   pied prev / lecture / suivant.
   ============================================================ */
html[data-template="kailash"] .kailash-frise-rhead { max-width: 44ch; margin: 6px auto 14px; text-align: left; }
html[data-template="kailash"] .kailash-frise-rsub { display: block; }
html[data-template="kailash"] .kailash-frise-rtitle { margin-top: 3px; }
html[data-template="kailash"] .kailash-frise-rfiche {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  background: rgba(var(--lueur), .08); border: 1px solid rgba(var(--lueur), .35); color: var(--or-clair);
  font-family: var(--disp); font-weight: 700; font-size: 12.5px; cursor: pointer;
}
html[data-template="kailash"] .kailash-frise-rfiche svg { width: 17px; height: 17px; }
html[data-template="kailash"] .kailash-frise-rnav { display: flex; align-items: center; justify-content: center; gap: 22px; }
html[data-template="kailash"] .kailash-frise-rplay { width: 66px; height: 66px; }
html[data-template="kailash"] .kailash-frise-rplay svg { width: 27px; height: 27px; }
html[data-template="kailash"] .kailash-frise-rstep {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--lueur), .08); border: 1px solid rgba(var(--lueur), .35); color: var(--or-clair); cursor: pointer;
}
html[data-template="kailash"] .kailash-frise-rstep svg { width: 22px; height: 22px; }
html[data-template="kailash"] .kailash-frise-rstep:disabled { opacity: .32; cursor: default; }

/* -------------------------------------------------- grand écran */
@media (min-width: 720px) {
  html[data-template="kailash"] .kailash-frise { --frise-med: 104px; }
  html[data-template="kailash"] .kailash-frise-inner { max-width: 760px; margin: 0 auto; }
  html[data-template="kailash"] .kailash-frise-h2 { font-size: 24px; }
}

/* -------------------------------------------------- mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html[data-template="kailash"] .kailash-frise .kailash-screen-stars,
  html[data-template="kailash"] .kailash-frise .kailash-screen-stars::after { animation: none; }
  html[data-template="kailash"] .kailash-frise .kailash-loc .kailash-em { transition: none; }
  html[data-template="kailash"] .kailash-frise .kailash-loc.is-here .kailash-em:after,
  html[data-template="kailash"] .kailash-frise .kailash-loc:hover .kailash-glow { animation: none; }
  html[data-template="kailash"] .kailash-frise-meter-fill { transition: none; }
}