/* ============================================================
   MYTHÉO — Kailash · écran NOTIONS.
   Style porté du CODE RD (screens/notions.css), renommé .kailash-notions-*
   et consolidé sur les slots du cadre : le ciel cosmique vit dans
   .kailash-screen-bg, les étoiles dans .kailash-screen-stars, le titre
   dans le slot fixe, la constellation dans .kailash-screen-body (field).
   ============================================================ */

/* ---- Ciel cosmique (bg du cadre) ---- */
.kailash-notions .kailash-screen-bg {
  background:
    radial-gradient(120% 62% at 50% 2%, rgba(58,49,26,.9), rgba(20,16,11,0) 60%),
    radial-gradient(70% 44% at 80% 30%, rgba(var(--lueur),.14), transparent 70%),
    radial-gradient(60% 40% at 16% 66%, rgba(var(--lueur),.1), transparent 72%),
    radial-gradient(130% 90% at 50% 0%, #221d12, #12100b 44%, #0b0906 100%);
}

/* ---- Étoiles denses (couche stars du cadre) ---- */
.kailash-notions .kailash-screen-stars {
  background-image:
    radial-gradient(1.6px 1.6px at 10% 6%,  rgba(var(--lueur),.9), transparent), radial-gradient(1.2px 1.2px at 72% 9%,  #fff, transparent),
    radial-gradient(1.4px 1.4px at 40% 13%, rgba(var(--lueur),.7), transparent), radial-gradient(1px 1px   at 88% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 22% 26%, rgba(var(--lueur),.7), transparent), radial-gradient(1.2px 1.2px at 60% 30%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 14% 40%, rgba(var(--lueur),.65),transparent), radial-gradient(1px 1px   at 84% 44%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 34% 52%, rgba(var(--lueur),.6), transparent), radial-gradient(1.2px 1.2px at 66% 58%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 18% 66%, rgba(var(--lueur),.62),transparent), radial-gradient(1px 1px   at 78% 72%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 46% 78%, rgba(var(--lueur),.6), transparent), radial-gradient(1.2px 1.2px at 30% 88%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 62% 92%, rgba(var(--lueur),.55),transparent), radial-gradient(1px 1px   at 88% 86%, #fff, transparent);
}

/* ---- Titre fixe (aligné sur l'échelle du cadre : h1 = 44px) ---- */
.kailash-notions .kailash-screen-title h1 { font-size: 44px; }
.kailash-notions .kailash-screen-title .sub { font-size: 15px; margin-top: 9px; }

/* ---- Constellation (dans le body scrollable) ---- */
.kailash-notions-canvas { position: relative; width: 100%; }
.kailash-notions-links { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }

/* Courant d'énergie + entrée = primitive partagée K.field : le courant via la
   classe .kailash-flow (posée sur les liens par field.createLink), l'entrée via
   le keyframe partagé kailash-fade-in (opacité seule → pas de conflit avec le
   transform de flottement). */
.kailash-notions-node { animation: kailash-fade-in .6s ease both; animation-delay: var(--d, 0s); }

/* Nœud = bouton illustré */
.kailash-notions-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 3; cursor: pointer;
  background: none; border: none; padding: 0; -webkit-tap-highlight-color: transparent;
}
/* Le disque = médaillon PARTAGÉ (.kailash-medallion) ; notions ne pose que sa
   taille (via --k-med) et son survol propre. Recette/anneaux/overlay/état
   .is-todo hérités du cadre. NB : on scope sous html[data-template] pour égaler
   la spécificité de la base (qui pose --k-med:64px) — sinon la taille locale ne
   l'emporterait pas (cf. modificateurs --sm/--lg du cadre, même mécanisme). */
html[data-template="kailash"] .kailash-notions-orb { --k-med: 92px; }
.kailash-notions-node:hover .kailash-notions-orb {
  transform: scale(1.1);
  box-shadow: 0 0 0 2.5px var(--or-clair), 0 0 42px rgba(var(--lueur),.55), 0 8px 22px rgba(0,0,0,.55), inset 0 -10px 20px rgba(6,8,14,.4);
}
.kailash-notions-lab { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 11px; width: 170px; text-align: center; pointer-events: none; }
.kailash-notions-lab .kailash-notions-t { display: block; font-family: var(--disp); font-weight: 700; font-size: 19px; line-height: 1; color: #efe4c6; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.kailash-notions-lab .kailash-notions-s { display: block; font-size: 14px; font-weight: 500; font-style: italic; line-height: 1.32; color: #ece1c4; margin-top: 5px; text-shadow: 0 2px 8px rgba(0,0,0,.9); }