/* ============================================================
   MYTHÉO — Kailash · composant FICHE (overlay plein écran, canva 7).
   Design porté de la V1 « perso » (mousse.css) : figure en plein cadre,
   contenu ANCRÉ EN BAS et centré ; seul le récit défile en interne. Gros
   bouton lumineux « Écouter son histoire ». Surlignage karaoké sur les
   mots (.w / .w.hi). Renommé .kailash-fiche-*.
   ============================================================ */

/* OVERLAY plein écran (colonne immersive centrée). */
.kailash-fiche {
  position: fixed; inset: 0; z-index: 600; background: #0b0805;   /* PLEIN CADRE (héros edge-to-edge) */
  opacity: 0; visibility: hidden; transition: opacity .34s; overflow: hidden;
  font-family: var(--corps, "Spectral", Georgia, serif); color: var(--texte, #f3ead4);
}
.kailash-fiche.kailash-open { opacity: 1; visibility: visible; }

/* Aucune scrollbar dans la fiche (overlay hors .kailash-app). */
.kailash-fiche, .kailash-fiche * { scrollbar-width: none; -ms-overflow-style: none; }
.kailash-fiche::-webkit-scrollbar, .kailash-fiche *::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Figure en PLEIN CADRE (respire doucement) + scrim + étoiles. */
.kailash-fiche-bg { position: absolute; inset: 0; z-index: 0; background-color: #14110a; background-size: cover; background-position: center 20%; animation: kailash-fiche-breathe 22s ease-in-out infinite; }
/* Voile sombre uniforme au-dessus de l'image → le texte reste lisible même sur une image claire. */
.kailash-fiche-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.2); }
.kailash-fiche-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(15,20,28,.15) 0%, rgba(15,20,28,0) 34%, rgba(12,16,22,.55) 62%, rgba(9,11,16,.99) 90%); }
.kailash-fiche-stars {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 16% 12%, rgba(var(--lueur,231,197,110),.7), transparent),
    radial-gradient(1.2px 1.2px at 80% 16%, rgba(var(--lueur,231,197,110),.5), transparent),
    radial-gradient(1px 1px at 44% 9%, rgba(var(--lueur,231,197,110),.55), transparent),
    radial-gradient(1.2px 1.2px at 66% 24%, rgba(var(--lueur,231,197,110),.45), transparent);
}

/* Boutons de coin. */
.kailash-fiche-x, .kailash-fiche-fav {
  position: absolute; top: calc(env(safe-area-inset-top) + 18px); z-index: 6;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(20,16,10,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(234,220,190,.25); color: var(--texte, #f3ead4);
  display: grid; place-items: center; cursor: pointer; padding: 0; font: inherit;
}
.kailash-fiche-x { right: 16px; }
.kailash-fiche-x svg { width: 18px; height: 18px; }
.kailash-fiche-fav { left: 16px; transition: transform .2s cubic-bezier(.34,1.5,.5,1), color .2s, border-color .2s, box-shadow .2s; }
.kailash-fiche-fav svg { width: 20px; height: 20px; transition: fill .2s; }
.kailash-fiche-fav.is-on { color: var(--or, #e7c56e); border-color: rgba(var(--lueur,231,197,110),.6); box-shadow: 0 0 18px rgba(var(--lueur,231,197,110),.45); }
.kailash-fiche-fav.is-on svg { fill: currentColor; }
.kailash-fiche-fav:active, .kailash-fiche-x:active { transform: scale(.9); }

/* CONTENU ancré en bas ; seul le récit défile → nom + bouton + liens toujours visibles. */
.kailash-fiche-content {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 640px); z-index: 5;   /* colonne de LECTURE bornée, centrée dans le héros plein cadre */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(56px + env(safe-area-inset-top)) 30px calc(34px + env(safe-area-inset-bottom));
  text-align: center;
}
.kailash-fiche-content > * { flex: 0 0 auto; }
/* Typo eyebrow/nom = classes partagées .kailash-read-sub / .kailash-read-title ;
   ici on ne pose que les marges. */
.kailash-fiche-ep { margin-bottom: 6px; }
.kailash-fiche-name { margin-bottom: 14px; }

/* CTA « Lire le récit » : positionnement seul ; look = .kailash-readtoggle (partagé). */
.kailash-fiche-readtoggle { align-self: flex-start; margin: 0 0 20px; }

/* Le panneau de lecture est le composant partagé .kailash-readpanel (kailash.css) ;
   ici on ne dimensionne que son bouton lecture. */
.kailash-readpanel-foot .kailash-fiche-play { width: 76px; height: 76px; }
.kailash-readpanel-foot .kailash-fiche-play svg { width: 28px; height: 28px; }

/* Rangée de contrôles : ‹ prev · play · next › — centrée en bas, à portée de pouce,
   ne recouvre jamais le texte. */
.kailash-fiche-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 0 auto; }

/* Bouton lecture = standard partagé .kailash-playbtn (médaillon + triangle + halo) ;
   ici on ne pose que la TAILLE. L'illustration est mise en JS. */
.kailash-fiche-play { width: 92px; height: 92px; flex: 0 0 auto; }
.kailash-fiche-play svg { width: 32px; height: 32px; }
.kailash-fiche-pll { margin-top: 14px; font-family: var(--disp); font-weight: 700; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--or, #e7c56e); }

/* Flèches fiche-à-fiche, DANS la rangée (affichées en JS seulement si liste). */
.kailash-fiche-nav {
  width: 52px; height: 52px; border-radius: 50%; display: none; place-items: center; cursor: pointer; flex: 0 0 auto;
  background: rgba(20,16,10,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--lueur,231,197,110),.45); color: var(--or-clair, #f6e4a9);
}
.kailash-fiche-nav svg { width: 24px; height: 24px; }
.kailash-fiche-nav:disabled { opacity: .25; cursor: default; }
.kailash-fiche-nav:active { transform: scale(.92); }

/* « Ses liens » — médaillons horizontaux. */
.kailash-fiche-lcap { margin-top: 26px; font-style: italic; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux, #c9bda0); }
.kailash-fiche-lcap:empty { display: none; }
.kailash-fiche-links { display: flex; gap: 16px; margin: 12px -30px 0; padding: 2px 30px 4px; overflow-x: auto; overflow-y: hidden; }
.kailash-fiche-links:empty { display: none; }
.kailash-fiche-pl-item { flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
.kailash-fiche-pl-item:active { transform: scale(.93); }
/* Puck « ses liens » = médaillon partagé .kailash-medallion --sm (kailash.css). */
.kailash-fiche-pl-nm { font-family: var(--disp); font-weight: 600; font-size: 11.5px; line-height: 1.05; color: var(--creme, #eadcbe); text-align: center; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px #000; }

@keyframes kailash-fiche-breathe { 0%, 100% { transform: scale(1.02); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .kailash-fiche-bg { animation: none; }
}