/* ==========================================================================
   Le Temple — Experience layer (scoped)
   Twilight-descent palette + immersive components.
   Relies on the global design system (variables.css, components.css .btn).
   ========================================================================== */

html { scroll-behavior: smooth; }

/* --- Scoped palette tokens (default = dawn / light) --- */
.t-body {
  --t-bg:       #FDF8F3;
  --t-ink:      #3D2E2E;
  --t-ink-soft: #6B5A5A;
  --t-accent:   #C5A55A;
  --t-accent-2: #C9A0A0;
  --t-line:     rgba(61, 46, 46, 0.14);
  --t-panel:    rgba(255, 255, 255, 0.66);
  --t-panel-bd: rgba(61, 46, 46, 0.10);
  --t-glow:     transparent;

  margin: 0;
  background-color: var(--t-bg);
  color: var(--t-ink);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  transition: background-color 1100ms var(--ease-in-out), color 900ms var(--ease-in-out);
  overflow-x: hidden;
}
.t-body::before {
  /* candlelit glow, intensifies in the deep palettes */
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 42%, var(--t-glow), transparent 70%);
  opacity: 1; transition: background 1100ms var(--ease-in-out);
}

/* --- The descent --- */
.t-body[data-palette="dawn"] { --t-bg:#FDF8F3; --t-ink:#3D2E2E; --t-ink-soft:#6B5A5A; --t-accent:#C5A55A; --t-line:rgba(61,46,46,.14); --t-panel:rgba(255,255,255,.66); --t-panel-bd:rgba(61,46,46,.10); --t-glow:transparent; }
.t-body[data-palette="warm"] { --t-bg:#EFDFCF; --t-ink:#4A372E; --t-ink-soft:#6E5648; --t-accent:#B5853F; --t-line:rgba(74,55,46,.16); --t-panel:rgba(255,255,255,.5); --t-panel-bd:rgba(74,55,46,.12); --t-glow:rgba(197,165,90,.10); }
.t-body[data-palette="dusk"] { --t-bg:#8A5A52; --t-ink:#FBEEE6; --t-ink-soft:rgba(251,238,230,.80); --t-accent:#EBC987; --t-accent-2:#E6B7AE; --t-line:rgba(251,238,230,.24); --t-panel:rgba(255,255,255,.09); --t-panel-bd:rgba(251,238,230,.22); --t-glow:rgba(235,201,135,.10); }
.t-body[data-palette="deep"] { --t-bg:#43293B; --t-ink:#F4E7EC; --t-ink-soft:rgba(244,231,236,.76); --t-accent:#E6C079; --t-accent-2:#D9A6AE; --t-line:rgba(244,231,236,.20); --t-panel:rgba(255,255,255,.07); --t-panel-bd:rgba(244,231,236,.18); --t-glow:rgba(230,192,121,.12); }
.t-body[data-palette="night"] { --t-bg:#1E1521; --t-ink:#F1E4EA; --t-ink-soft:rgba(241,228,234,.72); --t-accent:#EBCB87; --t-accent-2:#D9A6AE; --t-line:rgba(241,228,234,.16); --t-panel:rgba(255,255,255,.05); --t-panel-bd:rgba(241,228,234,.16); --t-glow:rgba(235,203,135,.16); }
.t-body[data-palette="lift"] { --t-bg:#5E4654; --t-ink:#F5EAEF; --t-ink-soft:rgba(245,234,239,.80); --t-accent:#EBC987; --t-accent-2:#E6B7AE; --t-line:rgba(245,234,239,.22); --t-panel:rgba(255,255,255,.08); --t-panel-bd:rgba(245,234,239,.20); --t-glow:rgba(235,201,135,.10); }

/* --- Layout helpers --- */
.t-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 3rem); position: relative; z-index: 1; }
.t-narrow { max-width: 720px; }
.t-eyebrow {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--t-accent);
  margin: 0 0 var(--space-md);
}
.t-h2 { font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: var(--fs-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0 0 var(--space-md); color: var(--t-ink); }
.t-subtitle { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-md); color: var(--t-ink-soft); margin: 0 0 var(--space-xl); }
.t-lead { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--t-ink); margin: 0 0 var(--space-lg); }
.t-body-copy { font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--t-ink); margin: 0 0 var(--space-lg); }
.t-skiplink { position: absolute; left: -999px; }
.t-skiplink:focus { position: fixed; left: 1rem; top: 1rem; z-index: 2000; background: var(--color-text); color:#fff; padding:.6rem 1rem; border-radius: var(--radius-pill); }

/* --- Reveal on scroll (only when JS present) --- */
.t-reveal-up { opacity: 1; }
.t-js .t-reveal-up { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.t-js .t-reveal-up.is-visible { opacity: 1; transform: none; }
.t-reduced-only { display: none; }

/* ==========================================================================
   Chrome: progress, topbar, rail
   ========================================================================== */
.t-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; background: transparent; }
.t-progress__bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--t-accent), var(--t-accent-2)); transition: width 120ms linear; }

.t-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(1rem, 4vw, 2rem); pointer-events: none;
}
.t-topbar__back, .t-topbar__title { pointer-events: auto; }
.t-topbar__back { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--t-ink); opacity: .82; transition: opacity var(--duration-fast); }
.t-topbar__back:hover { opacity: 1; }
.t-topbar__title { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-sm); color: var(--t-ink-soft); }

.t-rail { position: fixed; left: clamp(.6rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); z-index: 1100; }
.t-rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.05rem; }
.t-rail a { display: flex; align-items: center; gap: .65rem; color: var(--t-ink); text-decoration: none; }
.t-rail__dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--t-ink); opacity: .45; transition: all var(--duration-base) var(--ease-out); flex: 0 0 auto; }
.t-rail__name { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); opacity: 0; transform: translateX(-6px); transition: all var(--duration-base) var(--ease-out); white-space: nowrap; }
.t-rail a:hover .t-rail__name, .t-rail a:focus-visible .t-rail__name { opacity: .85; transform: none; }
.t-rail a.is-active .t-rail__dot { opacity: 1; background: var(--t-accent); border-color: var(--t-accent); transform: scale(1.3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-accent) 22%, transparent); }
.t-rail a.is-active .t-rail__name { opacity: 1; transform: none; color: var(--t-accent); }

/* ==========================================================================
   Sections
   ========================================================================== */
.t-sec { position: relative; z-index: 1; padding-block: clamp(5rem, 12vh, 9rem); }
.t-mouvement { padding-block: clamp(5rem, 14vh, 10rem); }

/* Seuil / hero */
.t-seuil { min-height: 100vh; display: flex; align-items: center; text-align: center; padding-top: 64px; }
.t-seuil__inner { display: flex; flex-direction: column; align-items: center; }
.t-seuil__motif { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: clamp(160px, 30vw, 280px); color: var(--t-accent); opacity: .14; z-index: 0; }
.t-seuil__title { font-family: var(--font-heading); font-weight: var(--fw-light); font-size: var(--fs-hero); line-height: 1.05; letter-spacing: var(--ls-tight); margin: 0 0 var(--space-xl); color: var(--t-ink); }
.t-seuil__def { max-width: 640px; margin: 0 0 var(--space-2xl); border: 0; padding: 0; }
.t-seuil__def p { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--t-ink-soft); margin: 0 0 var(--space-md); }
.t-seuil__def cite { font-style: normal; font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--t-accent); }
.t-scrollcue { font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--t-ink-soft); display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.t-scrollcue__chev { width: 14px; height: 14px; border-right: 1.5px solid var(--t-accent); border-bottom: 1.5px solid var(--t-accent); transform: rotate(45deg); animation: t-bob 1.8s var(--ease-in-out) infinite; }
@keyframes t-bob { 0%,100%{ transform: rotate(45deg) translate(0,0); opacity:.5 } 50%{ transform: rotate(45deg) translate(3px,3px); opacity:1 } }

/* Préambule */
.t-movements { list-style: none; margin: var(--space-xl) 0; padding: 0; display: grid; gap: var(--space-sm); }
.t-movements li { display: flex; align-items: baseline; gap: var(--space-md); font-family: var(--font-heading); font-size: var(--fs-md); color: var(--t-ink); }
.t-movements__num { font-size: var(--fs-sm); color: var(--t-accent); font-family: var(--font-body); letter-spacing: var(--ls-wide); border: 1px solid var(--t-line); border-radius: 50%; width: 2em; height: 2em; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.t-safetynote, .t-disclaimer { font-style: italic; font-size: var(--fs-sm); color: var(--t-ink-soft); border-left: 2px solid var(--t-accent); padding-left: var(--space-lg); margin-top: var(--space-xl); }

/* Movement headers */
.t-mhead { margin-bottom: var(--space-xl); }
.t-mhead__num { display: block; font-family: var(--font-heading); font-size: clamp(3rem, 8vw, 5rem); line-height: 1; color: var(--t-accent); opacity: .35; margin-bottom: var(--space-sm); }

/* Split layout (II) */
.t-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: var(--space-3xl); }
.t-diagram { margin: 0; text-align: center; }
.t-diagram__art { width: clamp(150px, 60%, 230px); margin: 0 auto var(--space-md); color: var(--t-accent); }
.t-diagram figcaption { font-style: italic; font-size: var(--fs-sm); color: var(--t-ink-soft); max-width: 32ch; margin: 0 auto; }

/* ==========================================================================
   Breathing pacer
   ========================================================================== */
.t-breath { margin: var(--space-3xl) 0; padding: var(--space-2xl); text-align: center; background: var(--t-panel); border: 1px solid var(--t-panel-bd); border-radius: var(--radius-xl); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.t-breath__intro { font-style: italic; color: var(--t-ink-soft); max-width: 46ch; margin: 0 auto var(--space-xl); }
.t-breath__stage { position: relative; width: 220px; height: 220px; margin: 0 auto var(--space-xl); display: grid; place-items: center; }
.t-breath__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--t-line); }
.t-breath__orb {
  width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--t-accent) 60%, transparent), color-mix(in srgb, var(--t-accent-2) 35%, transparent));
  display: grid; place-items: center; color: var(--t-ink);
  box-shadow: 0 0 40px color-mix(in srgb, var(--t-accent) 35%, transparent);
  transform: scale(.62);
  transition: transform var(--t-breath-dur, 4000ms) var(--ease-in-out), box-shadow var(--t-breath-dur, 4000ms) var(--ease-in-out);
}
.t-breath__orb.is-inhale { transform: scale(1); box-shadow: 0 0 70px color-mix(in srgb, var(--t-accent) 55%, transparent); }
.t-breath__orb.is-exhale { transform: scale(.62); }
.t-breath__label { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-md); }
.t-breath__btn { margin-top: var(--space-xs); }
.t-breath__hint { margin-top: var(--space-lg); font-size: var(--fs-sm); color: var(--t-ink-soft); }

/* ==========================================================================
   Reveal boxes (<details>) — also the explicit-content gate
   ========================================================================== */
.t-reveal-box { margin: var(--space-2xl) 0; border: 1px solid var(--t-line); border-radius: var(--radius-lg); background: var(--t-panel); overflow: hidden; }
.t-reveal-box__summary {
  cursor: pointer; list-style: none; padding: var(--space-lg) var(--space-xl);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide);
  color: var(--t-ink); display: flex; align-items: center; gap: var(--space-sm);
}
.t-reveal-box__summary::-webkit-details-marker { display: none; }
.t-reveal-box__summary::after { content: "+"; margin-left: auto; font-size: 1.4em; color: var(--t-accent); transition: transform var(--duration-base); }
.t-reveal-box[open] .t-reveal-box__summary::after { content: "−"; }
.t-reveal-box__summary:hover { color: var(--t-accent); }
.t-reveal-box--intime .t-reveal-box__summary { text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: var(--ls-wider); color: var(--t-accent); }
.t-reveal-box__lock { font-size: .9em; }
.t-reveal-box__body { padding: 0 var(--space-xl) var(--space-xl); border-top: 1px solid var(--t-line); }
.t-reveal-box__body > *:first-child { margin-top: var(--space-lg); }
.t-reveal-box[open] .t-reveal-box__body { animation: t-fade-in 600ms var(--ease-out); }
@keyframes t-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.t-practice__title { font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--t-ink); margin: 0 0 var(--space-sm); }
.t-practice__after { font-style: italic; font-size: var(--fs-sm); color: var(--t-ink-soft); }
.t-traditions, .t-steps { padding-left: 0; list-style: none; display: grid; gap: var(--space-md); }
.t-traditions li, .t-steps li { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--t-ink); padding-left: var(--space-lg); position: relative; }
.t-traditions li strong { color: var(--t-accent); font-weight: var(--fw-semibold); }
.t-steps { counter-reset: step; }
.t-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; color: var(--t-accent); font-family: var(--font-heading); font-size: var(--fs-md); line-height: 1; }
.t-traditions li::before { content: "✦"; position: absolute; left: 0; color: var(--t-accent); }

/* Ritual (numbered cards) */
.t-ritual { list-style: none; padding: 0; margin: var(--space-lg) 0; display: grid; gap: var(--space-lg); }
.t-ritual__step { display: flex; gap: var(--space-lg); align-items: flex-start; }
.t-ritual__num { flex: 0 0 auto; width: 2.4em; height: 2.4em; border-radius: 50%; border: 1px solid var(--t-accent); color: var(--t-accent); font-family: var(--font-heading); display: inline-flex; align-items: center; justify-content: center; }
.t-ritual__step-title { font-family: var(--font-heading); font-size: var(--fs-md); margin: .1em 0 .25em; color: var(--t-ink); }
.t-ritual__step p { margin: 0; color: var(--t-ink-soft); font-size: var(--fs-base); }

/* ==========================================================================
   Cycle & moon guide
   ========================================================================== */
.t-cycle { margin: var(--space-3xl) 0; padding: var(--space-2xl); background: var(--t-panel); border: 1px solid var(--t-panel-bd); border-radius: var(--radius-xl); }
.t-cycle__eyebrow { margin-bottom: var(--space-xs); }
.t-cycle__title { font-family: var(--font-heading); font-size: var(--fs-lg); margin: 0 0 var(--space-sm); color: var(--t-ink); }
.t-cycle__intro { color: var(--t-ink-soft); font-size: var(--fs-sm); margin: 0 0 var(--space-xl); }
.t-cycle__tabs { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--t-line); border-radius: var(--radius-pill); margin-bottom: var(--space-xl); }
.t-cycle__tab { background: transparent; border: 0; cursor: pointer; padding: .5rem 1.2rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--t-ink-soft); transition: all var(--duration-fast); }
.t-cycle__tab.is-active { background: var(--t-accent); color: #fff; }
.t-cycle__choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
.t-cycle__choice { cursor: pointer; background: transparent; border: 1px solid var(--t-line); border-radius: var(--radius-md); padding: var(--space-md) var(--space-sm); display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; color: var(--t-ink); transition: all var(--duration-fast) var(--ease-out); }
.t-cycle__choice:hover { border-color: var(--t-accent); transform: translateY(-2px); }
.t-cycle__choice[aria-pressed="true"] { border-color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 14%, transparent); }
.t-cycle__choice-label { font-family: var(--font-heading); font-size: var(--fs-base); }
.t-cycle__choice-sub { font-size: var(--fs-xs); color: var(--t-ink-soft); letter-spacing: var(--ls-wide); }
.t-cycle__moon { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--t-ink); display: inline-block; }
.t-cycle__moon--nouvelle { background: transparent; }
.t-cycle__moon--croissante { background: linear-gradient(90deg, transparent 0 50%, var(--t-ink) 50% 100%); }
.t-cycle__moon--pleine { background: var(--t-ink); }
.t-cycle__moon--decroissante { background: linear-gradient(90deg, var(--t-ink) 0 50%, transparent 50% 100%); }
.t-cycle__result { display: block; margin-top: var(--space-xl); padding: var(--space-lg); border-radius: var(--radius-md); border: 1px dashed var(--t-line); min-height: 4.5em; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--t-ink); }
.t-cycle__result-placeholder { color: var(--t-ink-soft); font-style: italic; }
.t-cycle__result strong { color: var(--t-accent); display: block; font-family: var(--font-heading); font-size: var(--fs-md); margin-bottom: .25rem; font-weight: var(--fw-regular); }

/* ==========================================================================
   Journal
   ========================================================================== */
.t-journal { margin: var(--space-3xl) 0; padding: var(--space-2xl); background: var(--t-panel); border: 1px solid var(--t-panel-bd); border-radius: var(--radius-xl); }
.t-journal__title { font-family: var(--font-heading); font-size: var(--fs-lg); margin: 0 0 var(--space-md); color: var(--t-ink); }
.t-journal__prompt { display: block; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--t-ink); margin-bottom: var(--space-md); }
.t-journal__field { width: 100%; padding: var(--space-md); font-family: var(--font-body); font-size: var(--fs-base); color: var(--t-ink); background: color-mix(in srgb, var(--t-bg) 70%, transparent); border: 1px solid var(--t-line); border-radius: var(--radius-md); resize: vertical; }
.t-journal__field:focus { outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 18%, transparent); }
.t-journal__meta { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); flex-wrap: wrap; }
.t-journal__privacy { font-size: var(--fs-xs); color: var(--t-ink-soft); }
.t-journal__saved { font-size: var(--fs-xs); color: var(--t-accent); }

/* ==========================================================================
   Sécurité + care grid
   ========================================================================== */
.t-care { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.t-care__item { padding: var(--space-xl); border: 1px solid var(--t-line); border-radius: var(--radius-lg); background: var(--t-panel); }
.t-care__title { font-family: var(--font-heading); font-size: var(--fs-md); margin: 0 0 var(--space-sm); color: var(--t-accent); }
.t-care__item p { margin: 0; font-size: var(--fs-sm); color: var(--t-ink-soft); line-height: var(--lh-normal); }

/* ==========================================================================
   Clôture
   ========================================================================== */
.t-cloture { text-align: center; }
.t-cloture .t-eyebrow { display: block; }
.t-cloture__motif { width: clamp(90px, 18vw, 140px); margin: 0 auto var(--space-xl); color: var(--t-accent); opacity: .8; }
.t-ritualcard { margin: var(--space-2xl) auto; padding: var(--space-2xl); max-width: 560px; border: 1px solid var(--t-accent); border-radius: var(--radius-lg); background: var(--t-panel); text-align: left; }
.t-ritualcard__title { font-family: var(--font-heading); font-style: italic; text-align: center; font-size: var(--fs-lg); margin: 0 0 var(--space-lg); color: var(--t-ink); }
.t-ritualcard__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); }
.t-ritualcard__list li { display: grid; grid-template-columns: 2.2em 1fr; grid-template-rows: auto auto; column-gap: var(--space-md); align-items: baseline; }
.t-ritualcard__num { grid-row: 1 / 3; font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--t-accent); }
.t-ritualcard__name { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--t-ink); }
.t-ritualcard__line { font-size: var(--fs-sm); color: var(--t-ink-soft); }
.t-cta { margin-top: var(--space-2xl); }
.t-cta__text { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-md); color: var(--t-ink); max-width: 46ch; margin: 0 auto var(--space-xl); }
.t-cta__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
.t-cloture__back, .t-hub__back { margin-top: var(--space-3xl); font-size: var(--fs-sm); }
.t-cloture__back a, .t-hub__back a { color: var(--t-ink-soft); letter-spacing: var(--ls-wide); }
.t-cloture__back a:hover, .t-hub__back a:hover { color: var(--t-accent); }

/* ==========================================================================
   Consent gate
   ========================================================================== */
.t-gate { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--space-xl); }
html.t-consented .t-gate { display: none; }
.t-gate.is-dismissed { opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease-out), visibility 0s 600ms; }
.t-gate__veil { position: absolute; inset: 0; background: radial-gradient(80% 80% at 50% 40%, #2a1d28, #140d16); }
.t-gate__panel { position: relative; max-width: 540px; text-align: center; color: #F4E7EC; background: rgba(255,255,255,.04); border: 1px solid rgba(244,231,236,.18); border-radius: var(--radius-xl); padding: clamp(2rem, 5vw, 3.5rem); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.t-gate__panel .t-eyebrow { color: #EBC987; }
.t-gate__motif { width: 92px; margin: 0 auto var(--space-lg); color: #EBC987; opacity: .85; }
.t-gate__title { font-family: var(--font-heading); font-weight: var(--fw-light); font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 0 0 var(--space-lg); color: #F7ECF1; }
.t-gate__text { font-size: var(--fs-sm); line-height: var(--lh-normal); color: rgba(244,231,236,.82); margin: 0 0 var(--space-md); }
.t-gate__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }
.t-gate__decline { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: rgba(244,231,236,.6); }
.t-gate__decline:hover { color: #fff; }
.t-gate__note { margin-top: var(--space-lg); font-style: italic; font-size: var(--fs-xs); color: rgba(244,231,236,.55); }

/* ==========================================================================
   Hub (/temple/)
   ========================================================================== */
.t-body--hub { --t-bg:#FDF8F3; }
.t-hub-hero { text-align: center; padding: clamp(6rem, 16vh, 9rem) clamp(1.25rem, 5vw, 3rem) var(--space-2xl); position: relative; }
.t-hub-hero__motif { width: clamp(100px, 20vw, 150px); margin: 0 auto var(--space-lg); color: var(--color-dusty-rose); opacity: .7; }
.t-hub-hero__title { font-family: var(--font-heading); font-weight: var(--fw-light); font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); margin: 0 0 var(--space-lg); color: var(--color-text); }
.t-hub-hero__intro { max-width: 60ch; margin: 0 auto; font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--color-text-light); }
.t-ornament { width: 200px; margin: var(--space-2xl) auto 0; color: var(--color-gold); }

.t-hub { max-width: var(--container-max); margin: 0 auto; padding: var(--space-2xl) clamp(1.25rem, 5vw, 3rem) var(--space-5xl); }
.t-hub__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-xl); }
.t-topic { position: relative; }
.t-topic__link { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: var(--space-2xl) var(--space-xl); background: var(--color-white); border: 1px solid rgba(61,46,46,.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
a.t-topic__link:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.t-topic--soon .t-topic__link { opacity: .72; }
.t-topic__motif { height: 68px; color: var(--color-terracotta); margin-bottom: var(--space-md); display: flex; align-items: center; }
.t-topic__motif .t-svg { height: 100%; width: auto; }
.t-topic--soon .t-topic__motif { color: var(--color-sage); }
.t-topic__badge { position: absolute; top: var(--space-md); right: var(--space-md); font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-sage); border: 1px solid var(--color-sage); border-radius: var(--radius-pill); padding: .15rem .7rem; background: rgba(156,175,136,.08); }
.t-topic__tag { font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-terracotta); margin-bottom: var(--space-sm); }
.t-topic--soon .t-topic__tag { color: var(--color-sage); }
.t-topic__title { font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--color-text); margin: 0 0 var(--space-sm); }
.t-topic__text { font-size: var(--fs-sm); color: var(--color-text-light); line-height: var(--lh-normal); margin: 0 0 var(--space-lg); }
.t-topic__cta { margin-top: auto; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-terracotta); }
.t-hub__note { text-align: center; font-style: italic; color: var(--color-text-light); margin-top: var(--space-3xl); }
.t-hub__back { text-align: center; }

/* ==========================================================================
   SVG motifs
   ========================================================================== */
.t-svg { width: 100%; height: auto; display: block; }
.t-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.t-js .t-svg--serpent .t-draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: t-draw 3s var(--ease-out) forwards; }
.t-js .t-svg--serpent .t-draw--delay { animation-delay: 1.4s; }
@keyframes t-draw { to { stroke-dashoffset: 0; } }
.t-svg--rose .t-rose__ring { transform-origin: 100px 100px; }
.t-js .t-svg--rose .t-rose__ring--outer { animation: t-spin 80s linear infinite; }
.t-js .t-svg--rose .t-rose__ring--mid { animation: t-spin 60s linear infinite reverse; }
@keyframes t-spin { to { transform: rotate(360deg); } }
.t-orbit__spark { offset-path: path("M100 336 C 56 312 56 70 100 46 C 144 70 144 312 100 336 Z"); offset-distance: 0%; }
.t-js .t-svg--energy .t-orbit__spark { animation: t-orbit 7s linear infinite; }
@keyframes t-orbit { to { offset-distance: 100%; } }
.t-energy__halo { transform-origin: center; }
.t-js .t-svg--energy .t-energy__halo { animation: t-pulse 4s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes t-pulse { 0%,100%{ opacity:.25 } 50%{ opacity:.7 } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .t-split { grid-template-columns: 1fr; }
  .t-care { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .t-rail { display: none; }
  .t-cycle__choices { grid-template-columns: repeat(2, 1fr); }
  .t-topbar__title { display: none; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .t-body, .t-body::before { transition: none; }
  .t-js .t-reveal-up { opacity: 1; transform: none; transition: none; }
  .t-breath__orb { transition: none !important; transform: scale(.85) !important; }
  .t-reduced-only { display: block; }
  .t-scrollcue__chev { animation: none; }
  .t-js .t-svg--serpent .t-draw,
  .t-js .t-svg--rose .t-rose__ring--outer,
  .t-js .t-svg--rose .t-rose__ring--mid,
  .t-js .t-svg--energy .t-orbit__spark,
  .t-js .t-svg--energy .t-energy__halo { animation: none; }
  .t-svg--serpent .t-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
  .t-reveal-box[open] .t-reveal-box__body { animation: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Atmospheric backdrops (generated imagery, subtle)
   ========================================================================== */
.t-seuil, .t-mouvement--apex, .t-cloture { isolation: isolate; }
.t-seuil::before, .t-mouvement--apex::before, .t-cloture::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.t-seuil::before { background-image: url("/assets/images/temple/seuil-aube.png"); opacity: .5; }
.t-mouvement--apex::before { background-image: url("/assets/images/temple/nuit-bougie.png"); opacity: .42; }
.t-cloture::before { background-image: url("/assets/images/temple/aube-cloture.png"); opacity: .3; }
.t-mouvement--apex::after {
  /* readability scrim over the candlelit apex */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 38%, transparent, color-mix(in srgb, var(--t-bg) 72%, transparent) 85%);
}