/* ==========================================================================
   ItaSchool — The Sorcery · Règlement officiel
   Feuille de style principale — reconstruction fidèle, écrite à la main.
   Sombre uniquement (le site original n'a pas de mode clair).
   Partagée par index.html et les pages maisons/*.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables de design (tokens du site original — couleurs en oklch)
   -------------------------------------------------------------------------- */
:root {
  --radius: .625rem;
  --background: oklch(14% .02 260);
  --foreground: oklch(92% .04 75);
  --card: oklch(18% .03 260);
  --card-foreground: oklch(92% .04 75);
  --primary: oklch(78% .14 78);
  --primary-foreground: oklch(14% .02 260);
  --popover: oklch(18% .03 260);
  --popover-foreground: oklch(92% .04 75);
  --secondary: oklch(25% .05 270);
  --secondary-foreground: oklch(92% .04 75);
  --muted: oklch(22% .03 265);
  --muted-foreground: oklch(72% .04 75);
  --accent: oklch(55% .18 28);
  --accent-foreground: oklch(96% .02 75);
  --destructive: oklch(55% .22 27);
  --destructive-foreground: oklch(96% .02 75);
  --border: oklch(32% .05 270 / .6);
  --input: oklch(32% .05 270 / .6);
  --ring: oklch(78% .14 78);
  --gold: oklch(82% .15 82);
  --gold-deep: oklch(62% .14 70);
  --ember: oklch(60% .22 30);
  --parchment: oklch(88% .06 80);
  --ink: oklch(22% .04 50);
  --wax: oklch(42% .18 22);
  --shadow-arcane: 0 30px 80px -20px oklch(0% 0 0 / .7), 0 0 120px -20px oklch(78% .14 78 / .15);
  --gradient-night: radial-gradient(ellipse at top, oklch(22% .06 270) 0%, oklch(10% .02 260) 70%);
  --gradient-gold: linear-gradient(135deg, oklch(88% .13 82), oklch(62% .14 70));

  /* Alias utilisés partout dans le balisage original */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-border: var(--border);
  --color-gold: var(--gold);
  --color-parchment: var(--parchment);
  --color-ink: var(--ink);

  /* Rôles typographiques (5 polices Google) */
  --font-display: "Cinzel Decorative", serif;   /* grands titres gravés   */
  --font-heading: "Cinzel", serif;              /* étiquettes majuscules  */
  --font-body: "IM Fell English", serif;        /* prose                  */
  --font-arcane: "Cormorant Garamond", serif;   /* panneaux des portraits */
  --font-incant: "Spectral", serif;             /* petites incantations   */

  /* Palette « arcane » bleue du diptyque (Le Veilleur / Le Directeur) */
  --arcane-accent: #5d8bff;
  --arcane-light: #cfe1ff;
  --arcane-deep: #0b1330;
  --arcane-black: #05060c;
  --arcane-border: rgba(26, 42, 107, 0.55);

  /* Accents de maison — surchargés en ligne (cartes) ou par page (maisons/) */
  --house-ember: oklch(60% .22 30);
  --house-glow: var(--gold);
  --house-top: oklch(22% .04 260);
}

/* --------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--color-border); margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body {
  background: var(--color-background);
  color: var(--color-foreground);
}

body {
  font-family: var(--font-body);
  background: var(--gradient-night);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
input { font: inherit; }
ul { list-style: none; }
[hidden] { display: none !important; }

/* Barre de défilement (rehaussement discret, or sur nuit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: oklch(10% .02 260); }
::-webkit-scrollbar-thumb { background: oklch(32% .06 70); border-radius: 5px; border: 2px solid oklch(10% .02 260); }
::-webkit-scrollbar-thumb:hover { background: oklch(45% .1 75); }
* { scrollbar-width: thin; scrollbar-color: oklch(32% .06 70) oklch(10% .02 260); }

/* Sélection de texte */
::selection { background: oklch(82% .15 82 / .35); color: oklch(98% .02 60); }

/* --------------------------------------------------------------------------
   3. Rôles typographiques et utilitaires de texte
   -------------------------------------------------------------------------- */
.font-display { font-family: var(--font-display); letter-spacing: .02em; }
.font-heading { font-family: var(--font-heading); letter-spacing: .08em; }
.font-body    { font-family: var(--font-body); }

/* Titre « gravé dans l'or » */
.text-engraved {
  color: transparent;
  filter: drop-shadow(0 1px oklch(0% 0 0 / .6));
  background: linear-gradient(#ffe0a9, #dc9b3a, #a26000);
  background: linear-gradient(color(xyz 0.768 0.772 0.291), #dc9b3a, color(xyz 0.196 0.158 0.006));
  -webkit-background-clip: text;
  background-clip: text;
}

.text-glow-gold {
  text-shadow: 0 0 8px oklch(82% .15 82 / .6), 0 0 28px oklch(78% .14 78 / .35), 0 2px oklch(0% 0 0 / .4);
}

.text-gold { color: var(--color-gold); }
.text-ink { color: var(--color-ink); }
.text-wax { color: var(--wax); }
.bg-parchment { background-color: var(--color-parchment); }
.shadow-arcane { box-shadow: var(--shadow-arcane); }

/* --------------------------------------------------------------------------
   4. @keyframes (jeu complet du site original)
   -------------------------------------------------------------------------- */
@keyframes flicker {
  0%, 100% { opacity: .95; filter: brightness(1); }
  45%      { opacity: .78; filter: brightness(.85); }
  50%      { opacity: 1;   filter: brightness(1.15); }
  55%      { opacity: .82; filter: brightness(.9); }
}

@keyframes ember-rise {
  0%   { opacity: 0; transform: translate(0) scale(.6); }
  15%  { opacity: .9; }
  100% { transform: translate3d(var(--drift, 20px), -110vh, 0) scale(1); opacity: 0; }
}

@keyframes seal-pulse {
  0%, 100% { box-shadow: 0 0 oklch(78% .18 30 / .55), 0 8px 18px -4px rgba(0,0,0,.6); }
  50%      { box-shadow: 0 0 0 14px oklch(78% .18 30 / 0), 0 8px 18px -4px rgba(0,0,0,.6); }
}

@keyframes mouth-talk {
  0%, 100% { opacity: .55; transform: scaleY(.35) scaleX(.9); }
  20%      { opacity: .95; transform: scaleY(.9)  scaleX(1.05); }
  40%      { opacity: .7;  transform: scaleY(.45) scaleX(.95); }
  60%      { opacity: 1;   transform: scaleY(1)   scaleX(1.1); }
  80%      { opacity: .75; transform: scaleY(.55) scaleX(1); }
}

@keyframes head-sway {
  0%, 100% { transform: rotate(-.6deg) translateY(0); }
  50%      { transform: rotate(.6deg) translateY(-2px); }
}

@keyframes crest-glow {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.3) saturate(1.35) contrast(1.05); }
}

@keyframes grain-shift {
  0%   { transform: translate(0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0); }
}

@keyframes godray-drift {
  0%   { transform: rotate(0) scale(1.05); }
  100% { transform: rotate(360deg) scale(1.05); }
}

@keyframes fog-drift {
  0%   { transform: translate(-3%) scale(1.05); }
  100% { transform: translate(4%, -2%) scale(1.12); }
}

@keyframes word-incant {
  0%   { opacity: 0; filter: blur(3px); transform: translateY(4px); }
  100% { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

@keyframes star-twinkle {
  0%, 100% { opacity: .2;  transform: scale(.9); }
  50%      { opacity: .95; transform: scale(1.2); }
}

@keyframes smoke-drift {
  0%   { opacity: .55; transform: translate(-4%) scale(1); }
  100% { opacity: .8;  transform: translate(6%, -3%) scale(1.15); }
}

@keyframes sunray-sweep {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes serpent-glide {
  0%, 100% { transform: translate(0) rotate(0); }
  50%      { transform: translate(2px) rotate(.6deg); }
}

@keyframes phoenix-breath {
  0%, 100% { filter: drop-shadow(0 0 18px #ff782880); }
  50%      { filter: drop-shadow(0 0 38px #ffaa3ce6); }
}

@keyframes lunar-orbit {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes tiger-stride {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

@keyframes ping { 75%, 100% { opacity: 0; transform: scale(2); } }

@keyframes pulse { 50% { opacity: .5; } }

@keyframes caret-blink {
  0%, 70%, 100% { opacity: 1; }
  20%, 50%      { opacity: 0; }
}

/* Pulsation du point actif du ruban de progression */
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}

/* Étincelle du blason animé — trajectoire radiale par variables */
@keyframes spark-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  30%  { opacity: 1; transform: translate(calc(-50% + var(--sx) * .4), calc(-50% + var(--sy) * .4)) scale(1.6); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0); }
}

/* Onde lumineuse pendant le scellage de la candidature */
@keyframes seal-wave {
  0%   { opacity: 0;  transform: translate(-50%, -50%) scale(.4); }
  45%  { opacity: .9; transform: translate(-50%, -50%) scale(3.5); }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(4.2); }
}

/* Apparition d'une section déverrouillée (Codex / Directeur) */
@keyframes gate-in {
  0%   { opacity: 0; transform: translateY(32px); filter: blur(14px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* Séquence de l'overlay d'intro */
@keyframes intro-castle {
  0%   { opacity: 0;   transform: scale(1.4);  filter: blur(30px) brightness(.4); }
  100% { opacity: .85; transform: scale(1.08); filter: blur(0)    brightness(1); }
}
@keyframes intro-glyph {
  0%   { opacity: 0;  transform: scale(.4); }
  30%  { opacity: 1;  transform: scale(1.2); }
  55%  { opacity: .6; transform: scale(1); }
  80%  { opacity: 1;  transform: scale(1.1); }
  100% { opacity: 0;  transform: scale(1.4); }
}
@keyframes intro-text {
  0%   { opacity: 0; letter-spacing: .6em; transform: translateY(20px); }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; letter-spacing: .2em; transform: translateY(0); }
}
@keyframes hero-castle-in {
  0%   { opacity: 0;   transform: scale(1.18); }
  100% { opacity: .62; transform: scale(1.06); }
}
@keyframes glyph-float {
  0%, 100% { opacity: 0;  transform: scale(.8); }
  25%      { opacity: .9; transform: scale(1.1); }
  50%      { opacity: .3; transform: scale(1); }
  75%      { opacity: .9; transform: scale(1.05); }
}

/* Classes d'animation nommées (les autres keyframes restent accessibles
   par les styles en ligne des pages maisons) */
.animate-flicker    { animation: 4.5s ease-in-out infinite flicker; }
.animate-ember      { animation: linear infinite ember-rise; } /* durée fixée en ligne */
.animate-seal       { animation: 2.8s ease-out infinite seal-pulse; }
.animate-mouth      { animation: .42s ease-in-out infinite mouth-talk; }
.animate-sway       { animation: 6s ease-in-out infinite head-sway; }
.animate-crest-glow { animation: 3s ease-in-out infinite crest-glow; }
.animate-ping       { animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite; }
.animate-pulse      { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.animate-caret-blink{ animation: 1.25s ease-out infinite caret-blink; }

/* --------------------------------------------------------------------------
   5. Textures & matières
   -------------------------------------------------------------------------- */
.parchment-paper {
  background:
    radial-gradient(at 50% 0, #ffeccdb3, transparent 60%),
    radial-gradient(at 30% 80%, #ab56372e, transparent 50%),
    radial-gradient(at 80% 20%, #ab56371f, transparent 40%),
    linear-gradient(#f4dab2, #e2bd93);
  background:
    radial-gradient(at 50% 0, color(xyz 0.823 0.855 0.677 / 0.702), transparent 60%),
    radial-gradient(at 30% 80%, #ab56372e, transparent 50%),
    radial-gradient(at 80% 20%, #ab56371f, transparent 40%),
    linear-gradient(#f4dab2, #e2bd93);
  box-shadow: inset 0 0 60px #64230959, inset 0 0 180px #400d0740, 0 40px 80px -20px #000000b3;
}

.parchment-edge {
  -webkit-mask-image: radial-gradient(120% 8px at 50% 0, #000 60%, transparent 100%),
    radial-gradient(120% 8px at 50% 100%, #000 60%, transparent 100%),
    linear-gradient(#000, #000);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.film-grain {
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.9  0 0 0 0 0.7  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: 1.2s steps(6, end) infinite grain-shift;
}

/* Variante neutre du panneau texte du diptyque (bruit non teinté, très discret) */
.film-grain.panel-grain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Variante teintée bleu nuit (panneau image du diptyque) */
.film-grain.grain-blue {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.7 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.cinema-frame { will-change: transform, filter; }

/* --------------------------------------------------------------------------
   6. Structure générale de page
   -------------------------------------------------------------------------- */
.page { position: relative; min-height: 100vh; overflow: hidden; }

.section { position: relative; z-index: 10; padding: 6rem 1.5rem; }
.section-tall { padding-top: 8rem; padding-bottom: 8rem; } /* section I (py-32 dans l'original) */
.section-tight { padding-top: 2.5rem; }

.scroll-target { scroll-margin-top: 6rem; }

/* Champ de braises fixe plein écran */
.ember-field {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.ember-field > span,
.ember-layer > span {
  position: absolute;
  bottom: 0;
  border-radius: 9999px;
}

/* Couche de braises propre à une section (arrival / headmaster / finale) */
.ember-layer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.ember-layer .ember-haze {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}

/* --------------------------------------------------------------------------
   7. Overlay d'intro
   -------------------------------------------------------------------------- */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: oklch(5% .02 260);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 1.2s ease-in-out;
}
.intro-overlay.is-leaving { opacity: 0; }
.intro-castle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: intro-castle 3s cubic-bezier(.2, .7, .2, 1) both;
}
/* 3 nappes lumineuses (radial-gradients violets/verts, blur 30px) :
   opacity [1 → .6 → 0] sur 3.6 s, glissement x ±40% → 0, décalage i × .3 s */
.intro-nappe {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  filter: blur(30px);
  mix-blend-mode: screen;
  animation: 3.6s ease-out both;
}
.intro-nappe.nappe-1 {
  background: radial-gradient(ellipse at 25% 40%, oklch(45% .2 295 / .5), transparent 60%);
  animation-name: intro-nappe-l;
}
.intro-nappe.nappe-2 {
  background: radial-gradient(ellipse at 75% 55%, oklch(48% .16 150 / .45), transparent 60%);
  animation-name: intro-nappe-r;
  animation-delay: .3s;
}
.intro-nappe.nappe-3 {
  background: radial-gradient(ellipse at 50% 70%, oklch(42% .18 295 / .4), transparent 55%),
    radial-gradient(ellipse at 40% 25%, oklch(46% .14 150 / .3), transparent 50%);
  animation-name: intro-nappe-l;
  animation-delay: .6s;
}
@keyframes intro-nappe-l {
  0%   { opacity: 1; transform: translateX(-40%); }
  50%  { opacity: .6; }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes intro-nappe-r {
  0%   { opacity: 1; transform: translateX(40%); }
  50%  { opacity: .6; }
  100% { opacity: 0; transform: translateX(0); }
}

.intro-glyphs { position: absolute; inset: 0; pointer-events: none; }
.intro-glyphs span {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 44px);
  mix-blend-mode: screen;
  animation: intro-glyph 3.6s ease-in-out both;
}
.intro-texts {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  text-align: center;
  animation: intro-text 3.4s ease-in-out 1.4s both;
}
.intro-kicker {
  font-family: var(--font-heading);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: oklch(82% .15 82 / .8);
}
.intro-title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 6vw, 3rem);
}
.intro-skip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .4em;
  color: oklch(82% .15 82 / .4);
}

/* --------------------------------------------------------------------------
   8. Bouton d'ambiance sonore (fixe, haut droite)
   -------------------------------------------------------------------------- */
.sound-toggle {
  position: fixed;
  right: 1.5rem;
  top: 1.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid oklch(78% .14 78 / .5);
  background: oklch(10% .02 260 / .85);
  padding: .5rem 1rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-gold);
  backdrop-filter: blur(8px);
  transition: background .15s, color .15s, box-shadow .3s;
}
.sound-toggle:hover { background: oklch(20% .04 270 / .9); color: oklch(95% .16 82); }
.sound-toggle.is-on { box-shadow: 0 0 24px oklch(78% .16 50 / .4); }
.sound-toggle svg { width: 1rem; height: 1rem; }
.sound-toggle .icon-on { display: none; }
.sound-toggle.is-on .icon-on { display: block; }
.sound-toggle.is-on .icon-off { display: none; }
.sound-label { display: none; }
@media (min-width: 40rem) { .sound-label { display: inline; } }

/* --------------------------------------------------------------------------
   9. Ruban de progression (Préambule · WhiteList · Règlement · Directeur)
   -------------------------------------------------------------------------- */
.progress-nav {
  pointer-events: none;
  position: fixed;
  left: 50%;
  top: 1rem;
  z-index: 40;
  transform: translateX(-50%);
}
.progress-pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid oklch(82% .15 82 / .3);
  background: oklch(8% .02 260 / .85);
  padding: .5rem 1rem;
  font-family: var(--font-heading);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: oklch(82% .15 82 / .8);
  backdrop-filter: blur(8px);
}
.progress-step { display: flex; align-items: center; gap: .5rem; }
.progress-step .step-inner { display: flex; align-items: center; gap: .375rem; }
.progress-step .step-dot {
  display: inline-block;
  width: .375rem;
  height: .375rem;
  border-radius: 9999px;
  background: oklch(40% .05 60);
  transition: background .4s, box-shadow .4s;
}
.progress-step .step-label { color: oklch(82% .15 82 / .4); transition: color .4s; }
.progress-step .step-sep { display: none; color: oklch(82% .15 82 / .3); }
.progress-step.is-active .step-dot {
  background: oklch(85% .18 60);
  box-shadow: 0 0 12px oklch(85% .18 60 / .9);
  animation: dot-pulse 1.6s ease-in-out infinite;
}
.progress-step.is-active .step-label { color: var(--color-gold); }
.progress-step.is-done .step-dot {
  background: oklch(82% .2 60);
  box-shadow: 0 0 8px oklch(82% .2 60 / .6);
}
.progress-step.is-done .step-label { color: oklch(82% .15 82 / .8); }
@media (min-width: 40rem) {
  .progress-pill { gap: .75rem; padding: .5rem 1.25rem; font-size: .75rem; }
  .progress-step { gap: .75rem; }
  .progress-step .step-sep { display: inline; }
  .progress-step:last-child .step-sep { display: none; }
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-castle-wrap {
  position: absolute;
  inset: 0;
  will-change: transform;
  animation: hero-castle-in 3.2s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-castle-wrap img { height: 100%; width: 100%; object-fit: cover; }
.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, oklch(8% .02 260 / .4) 50%, oklch(8% .02 260 / .95) 100%),
    linear-gradient(180deg, oklch(8% .02 260 / .7) 0%, transparent 35%, transparent 60%, oklch(8% .02 260) 100%);
}
.hero-aurora {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 55%;
  background:
    radial-gradient(ellipse at 30% 90%, oklch(78% .04 280 / .35) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 95%, oklch(82% .05 150 / .28) 0%, transparent 60%);
  filter: blur(20px);
}
.hero-glow {
  position: absolute;
  left: 50%;
  top: 38%;
  height: 44%;
  width: 52%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, oklch(62% .18 150 / .22) 0%, oklch(55% .16 295 / .16) 40%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(40px);
}
.hero-glyphs span {
  position: absolute;
  font-family: var(--font-display);
  user-select: none;
  mix-blend-mode: screen;
  animation: glyph-float var(--gdur, 6s) ease-in-out var(--gdel, 0s) infinite;
}
.hero-content { position: relative; z-index: 10; max-width: 56rem; }
.hero-logo {
  width: clamp(140px, 22vw, 240px);
  height: auto;
  margin: 0 auto 1.75rem;
  border-radius: 9999px;
  filter: drop-shadow(0 0 34px oklch(80% .14 78 / .38)) drop-shadow(0 6px 18px oklch(0% 0 0 / .6));
  animation: hero-logo-float 7s ease-in-out infinite;
}
@keyframes hero-logo-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-9px) scale(1.02); }
}
.hero-kicker {
  font-family: var(--font-heading);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: oklch(82% .15 82 / .8);
}
@media (min-width: 40rem) { .hero-kicker { font-size: .875rem; } }
.hero-title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 7rem);
  line-height: .95;
  letter-spacing: .04em;
}
.hero-divider {
  margin: 2rem auto 0;
  height: 1px;
  width: 20rem;
  max-width: 80%;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.hero-quote {
  margin: 2.5rem auto 0;
  max-width: 42rem;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-style: italic;
  color: oklch(92% .06 80 / .85);
}
@media (min-width: 40rem) { .hero-quote { font-size: 1.25rem; } }
.crest-row {
  margin: 3rem auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 2.5rem;
  row-gap: 1.5rem;
}
.crest-link { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.crest-label {
  font-family: var(--font-heading);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .4em;
  color: var(--house-glow);
  transition: color .15s;
}
.crest-link:hover .crest-label { color: var(--color-gold); }
.hero-scroll-hint {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: oklch(82% .15 82 / .6);
}

/* --------------------------------------------------------------------------
   11. Blason animé (composant récurrent)
   -------------------------------------------------------------------------- */
.crest {
  position: relative;
  display: inline-block;
  width: var(--crest-size, 160px);
  height: var(--crest-size, 160px);
  transform: scale(1.05); /* état « selected », le seul utilisé sur le site */
}
/* Halo flouté derrière l'image */
.crest::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--crest-ember, var(--house-ember)) 0%, transparent 70%);
  filter: blur(2px);
  opacity: .55;
}
/* Balayage conique lumineux (sheen rotatif) */
.crest::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: conic-gradient(from 0deg, transparent 0%, color-mix(in srgb, var(--crest-ring, var(--house-glow)) 25%, transparent) 18%, transparent 38%);
  mix-blend-mode: overlay;
  animation: crest-sweep-rotate 6s linear infinite;
}
@keyframes crest-sweep-rotate { to { transform: rotate(360deg); } }
.crest-img {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 0 40px var(--crest-ember, var(--house-ember)), inset 0 0 0 3px var(--crest-ring, var(--house-glow));
  transition: box-shadow 1.2s ease, transform 1.2s ease;
}
.crest .film-grain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  opacity: .25;
}
.crest-sparks { pointer-events: none; position: absolute; inset: 0; }
.crest-sparks span {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 9999px;
  background: radial-gradient(circle, var(--crest-ring, var(--house-glow)) 0%, var(--crest-ember, var(--house-ember)) 100%);
  filter: blur(.4px);
  opacity: 0;
  animation: spark-fly var(--sdur, 2s) ease-out var(--sdel, 0s) infinite;
}

/* --------------------------------------------------------------------------
   12. En-tête de section récurrent (· I · … · V ·)
   -------------------------------------------------------------------------- */
.section-header {
  margin: 0 auto 4rem;
  max-width: 48rem;
  text-align: center;
}
.sh-num {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: oklch(82% .15 82 / .6);
}
.sh-eyebrow {
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: oklch(82% .15 82 / .7);
}
@media (min-width: 40rem) { .sh-eyebrow { font-size: .75rem; } }
.sh-title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
}
@media (min-width: 40rem) { .sh-title { font-size: 3.75rem; } }
.sh-subtitle {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: italic;
  color: oklch(92% .06 80 / .7);
}
@media (min-width: 40rem) { .sh-subtitle { font-size: 1.125rem; } }
.sh-rule {
  margin: 1.5rem auto 0;
  height: 1px;
  width: 10rem;
  background: oklch(82% .15 82 / .4);
}

/* --------------------------------------------------------------------------
   13. Diptyque arcane (portraits parlants — Le Veilleur / Le Directeur)
   -------------------------------------------------------------------------- */
.diptych-wrap { position: relative; margin: 0 auto; width: 100%; max-width: 72rem; padding: 0 1rem; }
.diptych-halo {
  position: absolute;
  inset: -2rem;
  background: radial-gradient(circle at 50% 50%, var(--arcane-deep) 0%, var(--arcane-black) 70%);
  opacity: .55;
  filter: blur(40px);
}
.diptych-dot {
  position: absolute;
  width: .25rem;
  height: .25rem;
  border-radius: 9999px;
  background: var(--arcane-accent);
  filter: blur(1px);
}
.diptych-dot-right { right: -2%; top: 20%; opacity: .3; }
.diptych-dot-left  { left: 2%; bottom: 15%; opacity: .2; }

.arcane-diptych {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--arcane-border);
  background: rgba(11, 19, 48, .2);
  box-shadow: 0 0 50px rgba(5, 6, 12, .8);
  contain: paint;
  /* Variables audio-réactives (animées par JS pendant l'écriture) */
  --amp: 0; --low: 0; --mid: 0; --high: 0; --peak: 0; --mouth: 0; --beat: 0; --draw: 0; --wand: 0;
}
@media (min-width: 64rem) { .arcane-diptych { grid-template-columns: 1fr 1fr; } }

/* — panneau image (gauche) — */
.diptych-image {
  position: relative;
  height: 460px;
  overflow: hidden;
  border-bottom: 1px solid var(--arcane-border);
}
@media (min-width: 64rem) {
  .diptych-image { height: 640px; border-bottom: 0; border-right: 1px solid var(--arcane-border); }
}
.diptych-image > * { position: absolute; }
.d-glow {
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(93, 139, 255, .35), transparent 70%);
  opacity: calc(.25 + var(--mid) * .5 + var(--peak) * .25);
}
.d-godrays {
  inset: -20%;
  background: conic-gradient(from 210deg at 50% 0%,
    transparent 0deg, rgba(93, 139, 255, .12) 8deg, transparent 16deg,
    transparent 40deg, rgba(93, 139, 255, .08) 48deg, transparent 56deg,
    transparent 300deg, rgba(93, 139, 255, .1) 310deg, transparent 320deg);
  animation: godray-drift 18s linear infinite;
  filter: blur(2px);
}
.d-portrait {
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transform: scale(1.04);
  filter: brightness(calc(.78 + var(--mid) * .22 + var(--peak) * .08)) saturate(calc(1 + var(--mid) * .15)) contrast(1.05);
}
.d-mouth {
  left: 50%;
  top: var(--mouth-y, 62%);
  width: 26%;
  height: 10%;
  transform: translate(-50%, -50%) scaleY(calc(.2 + var(--mouth) * .8));
  background: radial-gradient(ellipse, rgba(93, 139, 255, .4), transparent 70%);
  opacity: calc(var(--mouth) * .9);
  mix-blend-mode: screen;
  filter: blur(6px);
}
.d-wand {
  right: 12%;
  bottom: 18%;
  width: 4px;
  height: 32%;
  transform: rotate(-22deg);
  background: linear-gradient(to top, transparent, rgba(207, 225, 255, .9), rgba(93, 139, 255, .6));
  opacity: var(--wand);
  filter: drop-shadow(0 0 12px rgba(93, 139, 255, .8));
  transition: opacity .8s ease;
}
.d-shade {
  inset: 0;
  background:
    linear-gradient(to top, var(--arcane-black) 0%, transparent 55%),
    linear-gradient(to right, transparent 80%, rgba(5, 6, 12, .6) 100%);
}
.d-fog {
  inset: -10%;
  background: radial-gradient(ellipse at 30% 70%, rgba(93, 139, 255, calc(.08 + var(--beat) * .1)), transparent 60%);
  filter: blur(24px);
  animation: fog-drift 22s ease-in-out infinite alternate;
}
.d-fog.d-fog-2 {
  background: radial-gradient(ellipse at 70% 40%, rgba(93, 139, 255, calc(.06 + var(--beat) * .08)), transparent 55%);
  animation: fog-drift 30s ease-in-out infinite alternate-reverse;
}
.d-frame {
  inset: 1.5rem;
  border: 1px solid rgba(93, 139, 255, .18);
}
.d-rune {
  position: absolute;
  right: .75rem;
  top: .75rem;
  width: 56px;
  height: 56px;
  color: rgba(93, 139, 255, .55);
  transform: rotate(calc(var(--peak) * 12deg));
}
.d-rune path, .d-rune circle {
  stroke-dasharray: 90;
  stroke-dashoffset: calc(90 - 90 * var(--draw));
}
.d-caption {
  position: absolute;
  bottom: .75rem;
  left: .75rem;
  font-family: var(--font-incant);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: rgba(207, 225, 255, .55);
}
.d-runes-float { inset: 0; pointer-events: none; }
.d-runes-float span {
  position: absolute;
  font-family: var(--font-arcane);
  color: rgba(93, 139, 255, .75);
  mix-blend-mode: screen;
  text-shadow: 0 0 calc(6px + var(--high) * 14px) rgba(93, 139, 255, .8);
  animation: lunar-orbit var(--gdur, 6s) ease-in-out infinite;
}
.d-motes { inset: 0; pointer-events: none; }
.d-motes span {
  position: absolute;
  border-radius: 9999px;
  background: rgba(93, 139, 255, .9);
  filter: blur(1px);
  animation: star-twinkle var(--gdur, 4s) ease-in-out var(--gdel, 0s) infinite;
}
.diptych-image .film-grain { inset: 0; opacity: .07; }

/* — panneau texte (droite) — */
.diptych-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 12, .7);
  padding: 2.5rem;
  text-align: center;
  backdrop-filter: blur(12px);
}
@media (min-width: 40rem) { .diptych-panel { padding: 3.5rem; } }
.panel-kicker {
  margin-bottom: 1.25rem;
  font-family: var(--font-incant);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: var(--arcane-accent);
  opacity: .8;
}
.panel-name {
  font-family: var(--font-arcane);
  font-size: 2.25rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--arcane-light);
  text-shadow: 0 0 calc(10px + var(--mid) * 28px) rgba(93, 139, 255, .5);
}
@media (min-width: 40rem) { .panel-name { font-size: 3rem; } }
.panel-ornament { margin-top: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.panel-ornament .orn-line { height: 1px; width: 4rem; background: linear-gradient(to right, transparent, rgba(93, 139, 255, .55)); }
.panel-ornament .orn-line.rev { background: linear-gradient(to left, transparent, rgba(93, 139, 255, .55)); }
.panel-ornament .orn-glyph {
  font-family: var(--font-arcane);
  color: var(--arcane-accent);
  filter: drop-shadow(0 0 calc(4px + var(--peak) * 10px) rgba(93, 139, 255, .9));
}
.manuscript { position: relative; margin-top: 2.5rem; width: 100%; max-width: 28rem; }
.manuscript-rune { margin: 0 auto; transform: translateY(-1.5rem); display: block; }
.manuscript-text {
  font-family: var(--font-arcane);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.625;
  color: var(--arcane-light);
  text-shadow: 0 0 calc(6px + var(--mid) * 16px) rgba(93, 139, 255, .35);
}
@media (min-width: 40rem) { .manuscript-text { font-size: 1.5rem; } }
.manuscript-text .quote-open { opacity: .55; margin-right: .15em; }
.manuscript-text .word { display: inline-block; animation: word-incant 360ms ease-out both; }
.manuscript-text .caret {
  margin-left: .125rem;
  display: inline-block;
  height: .9em;
  width: 2px;
  transform: translateY(2px);
  background: currentColor;
  opacity: .7;
  animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
.page-dots { margin-top: 1.5rem; display: flex; justify-content: center; gap: .5rem; }
.page-dots span {
  display: block;
  height: .25rem;
  width: .25rem;
  border-radius: 9999px;
  background: var(--arcane-accent);
  opacity: .18;
  transition: opacity .5s, box-shadow .5s;
}
.page-dots span.is-current { opacity: 1; box-shadow: 0 0 8px rgba(93, 139, 255, .9); }
.page-dots span.is-past { opacity: .5; box-shadow: none; }
.status-pill {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  padding: .375rem .75rem;
  background: rgba(0, 0, 0, .45);
}
.status-pill .pill-label {
  font-family: var(--font-incant);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--arcane-light);
}
.ping-wrap { position: relative; display: flex; height: .5rem; width: .5rem; }
.ping-wrap .ping {
  position: absolute;
  display: inline-flex;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  background: var(--ping-color, var(--arcane-accent));
  opacity: .6;
  animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}
.ping-wrap .ping-core {
  position: relative;
  display: inline-flex;
  height: .5rem;
  width: .5rem;
  border-radius: 9999px;
  background: var(--ping-color, var(--arcane-accent));
}
.corner-sigil {
  position: absolute;
  font-family: var(--font-arcane);
  font-size: 8px;
  line-height: 1.25;
  color: rgba(93, 139, 255, .22);
}
.corner-sigil.left  { bottom: .75rem; left: 1rem; }
.corner-sigil.right { bottom: .75rem; right: 1rem; text-align: right; }

/* --------------------------------------------------------------------------
   14. Cartes des Maisons
   -------------------------------------------------------------------------- */
.houses-grid {
  margin: 0 auto;
  display: grid;
  max-width: 72rem;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 0 1rem;
}
@media (min-width: 40rem) { .houses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .houses-grid { grid-template-columns: repeat(4, 1fr); } }

.house-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--house-glow);
  padding: 1.5rem;
  text-align: center;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, var(--house-top) 0%, oklch(12% .02 260) 100%);
  box-shadow: 0 0 30px color-mix(in oklab, var(--house-ember) 33%, transparent), 0 14px 36px -10px oklch(0% 0 0 / .7);
  transition: transform .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
.house-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 60px var(--house-ember);
}
.house-card .crest { margin: 0 auto; }
.house-name {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  filter: drop-shadow(0 0 16px var(--house-ember));
}
.house-trait {
  margin-top: .5rem;
  font-family: var(--font-heading);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .4em;
  color: var(--house-glow);
}
.house-desc {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: .875rem;
  font-style: italic;
  color: oklch(92% .06 80 / .85);
}
.house-motto {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--house-glow);
}
.house-motto-trad {
  margin-top: .25rem;
  font-family: var(--font-body);
  font-size: .75rem;
  font-style: italic;
  color: oklch(82% .15 82 / .6);
}
.house-cta {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-heading);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .4em;
  color: var(--house-glow);
  opacity: .7;
  transition: opacity .15s;
}
.house-card:hover .house-cta { opacity: 1; }
.house-cta .arrow { transition: transform .15s; }
.house-card:hover .house-cta .arrow { transform: translateX(.25rem); }

/* --------------------------------------------------------------------------
   15. Parchemin (WhiteList & chapitres du Codex)
   -------------------------------------------------------------------------- */
.parchment {
  position: relative;
  margin: 0 auto;
  max-width: 48rem;
  transform-origin: top;
  border-radius: 4px;
  padding: 4rem 2rem;
}
@media (min-width: 40rem) { .parchment { padding: 5rem 4rem; } }
.roller {
  position: absolute;
  left: -1.5rem;
  right: -1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: linear-gradient(180deg, oklch(55% .1 60) 0%, oklch(32% .08 50) 50%, oklch(22% .06 45) 100%);
  box-shadow: 0 4px 10px oklch(0% 0 0 / .6);
}
.roller-top { top: -.75rem; }
.roller-bottom { bottom: -.75rem; }

.parchment-body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.625;
  color: color-mix(in oklab, var(--color-ink) 95%, transparent);
}
@media (min-width: 40rem) { .parchment-body { font-size: 1.25rem; } }

.criteria-label {
  margin: 2.5rem 0 1rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: color-mix(in oklab, var(--color-ink) 70%, transparent);
}
.criteria { display: flex; flex-direction: column; gap: .75rem; }
.criteria li {
  display: flex;
  gap: .75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
}
@media (min-width: 40rem) { .criteria li { font-size: 1.125rem; } }
.criteria .bullet { flex-shrink: 0; font-family: var(--font-display); color: var(--wax); }
.parchment-divider { margin-top: 3rem; border-top: 1px solid color-mix(in oklab, var(--color-ink) 15%, transparent); padding-top: .5rem; }

/* --------------------------------------------------------------------------
   16. Rituel d'admission (formulaire + sceau de cire)
   -------------------------------------------------------------------------- */
.ritual { position: relative; margin: 3rem auto 0; max-width: 36rem; }
.ritual-label {
  margin-bottom: 1rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .4em;
  color: color-mix(in oklab, var(--color-ink) 70%, transparent);
}
.ritual-form { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.ritual-quote {
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: italic;
  color: color-mix(in oklab, var(--color-ink) 90%, transparent);
}
@media (min-width: 40rem) { .ritual-quote { font-size: 1.125rem; } }
.ritual-input {
  width: 100%;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid oklch(32% .1 50 / .5);
  background: oklch(92% .05 80 / .6);
  padding: .75rem 1.25rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: .1em;
  color: oklch(22% .05 50);
  outline: none;
}
.ritual-input::placeholder { color: oklch(22% .05 50 / .35); }
.ritual-input:focus { border-color: oklch(42% .18 22 / .8); }
.btn-wax {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid oklch(42% .18 22 / .7);
  padding: 1rem 2.5rem;
  font-family: var(--font-display);
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: oklch(96% .04 80);
  background: linear-gradient(135deg, oklch(42% .18 22) 0%, oklch(28% .12 30) 100%);
  box-shadow: 0 0 30px oklch(55% .22 28 / .5), 0 12px 30px -8px oklch(0% 0 0 / .6);
  transition: opacity .15s;
}
.btn-wax:disabled { opacity: .4; cursor: not-allowed; }
.btn-shine {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(to right, transparent, oklch(95% .16 82 / .35), transparent);
  transition: transform 1s;
  pointer-events: none;
}
.btn-wax:hover:not(:disabled) .btn-shine,
.btn-gold:hover .btn-shine { transform: translateX(100%); }
.btn-wax > span, .btn-gold > span { position: relative; z-index: 10; }

/* Sceau de cire (12 côtés, dégradé cire rouge) */
.wax-seal {
  --seal-size: 96px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--seal-size);
  height: var(--seal-size);
  clip-path: polygon(98% 50%, 91.6% 74%, 74% 91.6%, 50% 98%, 26% 91.6%, 8.4% 74%, 2% 50%, 8.4% 26%, 26% 8.4%, 50% 2%, 74% 8.4%, 91.6% 26%);
  background: radial-gradient(circle at 30% 30%, oklch(65% .2 30) 0%, oklch(42% .18 22) 55%, oklch(28% .12 20) 100%);
}
.wax-seal::after {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 9999px;
  border: 1px solid oklch(85% .15 70 / .55);
}
.wax-seal .seal-letter {
  font-family: var(--font-display);
  font-size: calc(var(--seal-size) * .5);
  color: oklch(85% .12 78 / .85);
}
.wax-seal.lit .seal-letter {
  color: oklch(95% .16 82);
  text-shadow: 0 0 12px oklch(85% .18 60 / .9), 0 0 30px oklch(78% .18 45 / .6);
}
.seal-glow-wrap { position: relative; display: inline-flex; }
.seal-glow-wrap.lit { filter: drop-shadow(0 0 20px oklch(70% .22 30 / .8)) drop-shadow(0 0 50px oklch(60% .22 30 / .5)); }
.seal-row { margin-top: 2.5rem; display: flex; justify-content: center; }

/* États du rituel */
.ritual-sealing { position: relative; display: flex; justify-content: center; padding: 1rem 0; }
.ritual-sealing .seal-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  border-radius: 9999px;
  background: radial-gradient(circle, oklch(70% .22 35 / .7), transparent 70%);
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: seal-wave 2s ease-out both;
}
.ritual-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  animation: gate-in 1.2s cubic-bezier(.22, .6, .36, 1) both;
}
.ritual-granted {
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .4em;
  color: oklch(42% .18 22);
}
.ritual-welcome {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  color: oklch(32% .1 40);
  text-shadow: 0 0 18px oklch(80% .14 78 / .6);
}
@media (min-width: 40rem) { .ritual-welcome { font-size: 2.25rem; } }
.ritual-next {
  max-width: 28rem;
  font-family: var(--font-body);
  font-style: italic;
  color: color-mix(in oklab, var(--color-ink) 90%, transparent);
}

/* --------------------------------------------------------------------------
   17. Boutons dorés & blocs de déverrouillage
   -------------------------------------------------------------------------- */
.btn-gold {
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  border: 1px solid oklch(82% .15 82 / .6);
  padding: 1rem 2.5rem;
  font-family: var(--font-display);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .4em;
  color: var(--color-gold);
  background: linear-gradient(135deg, oklch(22% .08 50) 0%, oklch(14% .04 260) 100%);
  box-shadow: 0 0 30px oklch(82% .2 60 / .5), inset 0 0 0 1px oklch(82% .2 60 / .25);
  transition: transform .3s cubic-bezier(.22, .6, .36, 1);
}
.btn-gold:hover { transform: scale(1.03); }
.btn-gold:active { transform: scale(.98); }

.unlock-block {
  position: relative;
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  animation: gate-in 1.2s cubic-bezier(.22, .6, .36, 1) .2s both;
}
.unlock-block::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: radial-gradient(ellipse, oklch(82% .2 60 / .35), transparent 70%);
  filter: blur(30px);
  animation: pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.unlock-hint {
  font-family: var(--font-heading);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .4em;
  color: oklch(82% .15 82 / .6);
}

/* --------------------------------------------------------------------------
   18. Carte verrouillée (Codex scellé / Directeur silencieux)
   -------------------------------------------------------------------------- */
.locked-wrap { margin: 0 auto; max-width: 42rem; }
.locked-card {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid oklch(82% .15 82 / .4);
  padding: 3rem 2rem;
  text-align: center;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, oklch(14% .02 260 / .85) 0%, oklch(8% .02 260 / .92) 100%);
  box-shadow: 0 0 60px oklch(82% .2 60 / .18), inset 0 0 0 1px oklch(82% .2 60 / .15), 0 30px 70px -20px oklch(0% 0 0 / .8);
}
.locked-halo {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: radial-gradient(circle, oklch(82% .2 60 / .4) 0%, transparent 70%);
  filter: blur(40px);
  animation: pulse 3s ease-in-out infinite;
}
.locked-inner { position: relative; z-index: 10; }
.locked-status {
  font-family: var(--font-heading);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .55em;
  color: oklch(82% .15 82 / .7);
}
.locked-glyph {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 3rem;
  color: oklch(82% .15 82 / .85);
}
.locked-message {
  margin: 1.5rem auto 0;
  max-width: 28rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.625;
  color: oklch(92% .04 75 / .85);
}
@media (min-width: 40rem) { .locked-message { font-size: 1.125rem; } }
.locked-card .btn-gold { margin-top: 2.5rem; }

/* Contenu déverrouillé — fondu d'apparition */
.gate-reveal { animation: gate-in 1.4s cubic-bezier(.22, .6, .36, 1) both; }

/* --------------------------------------------------------------------------
   19. Chapitres du Grand Codex
   -------------------------------------------------------------------------- */
.chapter { margin-top: 5rem; scroll-margin-top: 5rem; }
.chapter:first-child { margin-top: 0; }
.chapter-header { margin: 0 auto 3rem; max-width: 48rem; text-align: center; }
.chapter-eyebrow {
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .4em;
  color: oklch(82% .15 82 / .6);
}
.chapter-title {
  margin-top: .75rem;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
}
@media (min-width: 40rem) { .chapter-title { font-size: 2.25rem; } }
.chapter-subtitle {
  margin-top: .75rem;
  font-family: var(--font-body);
  font-size: .875rem;
  font-style: italic;
  color: oklch(92% .06 80 / .7);
}

.subsection { margin-top: 3rem; scroll-margin-top: 6rem; }
.subsection:first-of-type { margin-top: 0; }
.subsection-title {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  border-bottom: 1px solid oklch(32% .1 50 / .3);
  padding-bottom: .75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink);
}
@media (min-width: 40rem) { .subsection-title { font-size: 1.875rem; } }
.subsection-intro {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-style: italic;
  color: color-mix(in oklab, var(--color-ink) 85%, transparent);
}
.rule-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .875rem; }
.rule-list li {
  display: flex;
  gap: .75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--color-ink);
}
@media (min-width: 40rem) { .rule-list li { font-size: 1.125rem; } }
.rule-list .bullet { flex-shrink: 0; font-family: var(--font-display); color: var(--wax); }
.rule-list strong { font-weight: 700; }

/* Sous-section critique (1.2 Les états d'inconscience) */
.subsection-highlight {
  border: 2px solid oklch(55% .22 28 / .7);
  border-radius: calc(var(--radius) - 4px);
  background: oklch(96% .05 60 / .4);
  padding: 1.5rem;
}
.highlight-badge {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  background: oklch(45% .2 28);
  padding: .25rem .75rem;
  font-family: var(--font-heading);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: oklch(98% .02 60);
}
.badge-pill .badge-dot {
  display: inline-block;
  width: .375rem;
  height: .375rem;
  border-radius: 9999px;
  background: #fff;
  animation: pulse 1.6s ease-in-out infinite;
}
.badge-note {
  font-family: var(--font-heading);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: oklch(45% .2 28 / .8);
}
.highlight-note {
  margin-top: 1rem;
  border-left: 4px solid oklch(55% .22 28 / .7);
  padding-left: 1rem;
  font-family: var(--font-body);
  font-style: italic;
  color: oklch(35% .14 28);
}

/* Bloc de serment */
.oath-card {
  margin: 4rem auto 0;
  max-width: 42rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid oklch(82% .15 82 / .4);
  background: oklch(14% .02 260 / .7);
  padding: 2.5rem 2rem;
  text-align: center;
  backdrop-filter: blur(8px);
}
.oath-title {
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: oklch(82% .15 82 / .7);
}
.oath-text {
  margin: 1.25rem auto 0;
  max-width: 32rem;
  font-family: var(--font-body);
  font-style: italic;
  color: oklch(92% .06 80 / .85);
}
.oath-card .btn-gold { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   20. Section V — Mot du Directeur & bloc final
   -------------------------------------------------------------------------- */
.closure {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.finale {
  position: relative;
  margin-top: 6rem;
  text-align: center;
}
.finale .crest-row { margin-top: 0; }
.finale-mention {
  margin-top: 3rem;
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: oklch(82% .15 82 / .7);
}

/* --------------------------------------------------------------------------
   21. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 10;
  padding: 4rem 1rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .4em;
  color: oklch(82% .15 82 / .4);
}
.visitor-pill {
  margin: 0 auto 1.5rem;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .75rem;
  border-radius: 9999px;
  border: 1px solid oklch(82% .15 82 / .4);
  background: rgba(0, 0, 0, .5);
  padding: .5rem 1.25rem;
  font-size: .7rem;
  letter-spacing: .4em;
  color: var(--color-gold);
  box-shadow: 0 0 30px -10px rgba(212, 175, 55, .5);
  backdrop-filter: blur(8px);
  --ping-color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   22. Révélation au défilement (IntersectionObserver — voir app.js)
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}
.js [data-reveal="scale"] { transform: scaleY(.95); }
.js [data-reveal="left"] { transform: translateX(-10px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   23. Pages Maisons (maisons/*.html) — crochets génériques
   L'accent de chaque page est posé par des variables sur <body> ou <main> :
   --house-ember / --house-glow / --house-top.
   -------------------------------------------------------------------------- */
.house-page-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: oklch(82% .15 82 / .8);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid oklch(82% .15 82 / .3);
  background: oklch(8% .02 260 / .85);
  padding: .5rem 1.25rem;
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--color-gold);
  backdrop-filter: blur(8px);
  transition: background .15s, color .15s;
}
.back-link:hover { background: oklch(20% .04 270 / .9); color: oklch(95% .16 82); }

.house-hero {
  position: relative;
  z-index: 10;
  padding: 4rem 1.5rem 3rem;
  text-align: center;
}
.house-hero .crest-holder {
  display: inline-block;
  filter: drop-shadow(0 0 40px var(--house-ember));
}
.house-hero-eyebrow {
  margin-top: 2rem;
  font-family: var(--font-heading);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: oklch(82% .15 82 / .7);
}
.house-hero-title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;
}
.house-hero-quote {
  margin: 1.5rem auto 0;
  max-width: 42rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.125rem;
  color: oklch(92% .06 80 / .85);
}
.house-meta-row {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  font-family: var(--font-heading);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--house-glow);
}

.lore-article {
  margin: 3rem auto 0;
  max-width: 48rem;
  border: 1px solid color-mix(in oklab, var(--house-glow) 30%, transparent);
  border-radius: calc(var(--radius) - 4px);
  background: oklch(14% .02 260 / .6);
  padding: 2rem;
  backdrop-filter: blur(8px);
}
.lore-article h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--house-glow);
}
.lore-article p {
  margin-top: 1rem;
  font-family: var(--font-body);
  line-height: 1.625;
  color: oklch(92% .04 75 / .9);
}
.two-col-lists {
  margin: 3rem auto 0;
  display: grid;
  max-width: 48rem;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 40rem) { .two-col-lists { grid-template-columns: 1fr 1fr; } }
.devise-box {
  margin: 3rem auto 0;
  max-width: 36rem;
  border: 1px solid var(--house-glow);
  border-radius: calc(var(--radius) - 4px);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 0 40px color-mix(in oklab, var(--house-ember) 30%, transparent);
}

/* --------------------------------------------------------------------------
   23b. Pages Maisons — structure fidèle aux pages pré-rendues
   Accents par page : --house-ember / --house-glow / --house-top (oklch)
   + --house-accent / --house-light / --house-text (hex) posés sur <body>.
   -------------------------------------------------------------------------- */
.house-main { position: relative; min-height: 100vh; overflow: hidden; }

/* Couche d'ambiance fixe (braises / étoiles / brumes / rayons — voir app.js) */
.house-ambience {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.house-ambience > span { position: absolute; border-radius: 9999px; }
.house-ambience svg { position: absolute; }
.house-ambience .sunrays {
  position: absolute;
  inset: -20%;
  mix-blend-mode: screen;
  animation: sunray-sweep 28s linear infinite;
}
.house-ambience .smoke {
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
  mix-blend-mode: screen;
}

/* Voile lumineux (2 radiales en mode screen, couleurs posées en ligne) */
.house-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; }

/* En-tête (max-w-6xl, px-6 pt-10) */
.house-page-header { margin: 0 auto; max-width: 72rem; padding: 2.5rem 1.5rem 0; }
.back-link .back-arrow { transition: transform .15s; }
.back-link:hover .back-arrow { transform: translateX(-.25rem); }
.house-tagline {
  font-family: var(--font-incant);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5em;
  text-align: right;
  color: color-mix(in srgb, var(--house-accent) 80%, transparent);
}

/* Héros (max-w-5xl, pb-20 pt-16) */
.house-hero { margin: 0 auto; max-width: 64rem; padding: 4rem 1.5rem 5rem; }
.house-hero-eyebrow {
  font-family: var(--font-incant);
  font-size: 10px;
  letter-spacing: .55em;
  color: var(--house-accent);
}
.house-hero-title {
  font-family: var(--font-arcane);
  font-weight: 300;
  font-size: clamp(3rem, 9vw, 4.5rem);
  letter-spacing: .3em;
  color: var(--house-text);
  text-shadow: 0 0 40px color-mix(in oklab, var(--house-ember) 67%, transparent);
}
.house-sep { margin: 1.5rem auto 0; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.house-sep .sep-line {
  height: 1px;
  width: 5rem;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--house-light) 60%, transparent));
}
.house-sep .sep-line.rev {
  background: linear-gradient(to left, transparent, color-mix(in srgb, var(--house-light) 60%, transparent));
}
.house-sep .sep-glyph { font-size: 14px; color: var(--house-light); }
.house-hero-quote {
  font-family: var(--font-arcane);
  font-size: 1.25rem;
  color: color-mix(in srgb, var(--house-text) 85%, transparent);
}
.house-meta-row {
  font-family: var(--font-incant);
  font-size: 10px;
  letter-spacing: .4em;
  color: color-mix(in srgb, var(--house-text) 88%, transparent);
}
.house-meta-row .meta-glyph { color: var(--house-accent); }

/* Section lore — 5 articles numérotés (max-w-4xl, space-y-20) */
.house-lore {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  max-width: 56rem;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.lore-article {
  position: relative;
  overflow: hidden;
  margin: 0;
  max-width: none;
  border: 1px solid color-mix(in srgb, var(--house-accent) 20%, transparent);
  background: linear-gradient(180deg, rgba(8, 10, 18, .55) 0%, rgba(3, 4, 8, .85) 100%);
  box-shadow: 0 0 40px color-mix(in oklab, var(--house-ember) 13%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--house-accent) 8%, transparent);
  padding: 2.5rem 2rem;
  backdrop-filter: blur(8px);
}
@media (min-width: 40rem) { .lore-article { padding: 3rem; } }
.lore-num {
  position: absolute;
  top: .5rem;
  left: 1rem;
  font-family: var(--font-arcane);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--house-accent);
  opacity: .18;
  pointer-events: none;
}
.lore-eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-incant);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: var(--house-accent);
}
.lore-eyebrow .lore-glyph { font-size: 1.25rem; letter-spacing: 0; }
.lore-title {
  margin-top: 1rem;
  font-family: var(--font-arcane);
  font-weight: 400;
  font-size: 1.875rem;
  color: var(--house-light);
}
@media (min-width: 40rem) { .lore-title { font-size: 2.25rem; } }
.lore-sep { margin-top: 1rem; display: flex; align-items: center; gap: .75rem; }
.lore-sep .sep-line {
  height: 1px;
  width: 3rem;
  background: linear-gradient(to right, color-mix(in srgb, var(--house-accent) 55%, transparent), transparent);
}
.lore-sep .sep-glyph { font-size: .75rem; color: var(--house-accent); }
.lore-article p {
  margin-top: 1.25rem;
  font-family: var(--font-arcane);
  font-size: 1.125rem;
  line-height: 1.75;
  color: color-mix(in srgb, var(--house-text) 85%, transparent);
}

/* Grille Qualités / Spécialités magiques (max-w-5xl) */
.two-col-lists { position: relative; z-index: 10; margin-top: 5rem; max-width: 64rem; padding: 0 1.5rem; }
.house-list-card {
  border: 1px solid color-mix(in srgb, var(--house-accent) 20%, transparent);
  border-radius: calc(var(--radius) - 4px);
  background: rgba(3, 4, 8, .7);
  padding: 2rem;
}
.house-list-title {
  font-family: var(--font-arcane);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--house-light);
}
.house-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.house-list li {
  display: flex;
  gap: .75rem;
  font-family: var(--font-arcane);
  font-size: 1.0625rem;
  color: color-mix(in srgb, var(--house-text) 85%, transparent);
}
.house-list .bullet { flex-shrink: 0; color: var(--house-accent); }

/* Philosophie (max-w-3xl, centré) */
.house-philo {
  position: relative;
  z-index: 10;
  margin: 5rem auto 0;
  max-width: 48rem;
  padding: 0 1.5rem;
  text-align: center;
}
.philo-eyebrow {
  font-family: var(--font-incant);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: var(--house-accent);
}
.philo-text {
  margin-top: 1.5rem;
  font-family: var(--font-arcane);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--house-text) 90%, transparent);
}
@media (min-width: 40rem) { .philo-text { font-size: 1.5rem; } }

/* Devise scellée (max-w-3xl, centré) + bouton retour */
.house-devise {
  position: relative;
  z-index: 10;
  margin: 5rem auto 0;
  max-width: 48rem;
  padding: 0 1.5rem 6rem;
  text-align: center;
}
.devise-box { position: relative; }
.devise-corner { position: absolute; font-size: .875rem; color: var(--house-accent); }
.devise-corner.tl { top: -10px; left: -10px; }
.devise-corner.tr { top: -10px; right: -10px; }
.devise-corner.bl { bottom: -10px; left: -10px; }
.devise-corner.br { bottom: -10px; right: -10px; }
.devise-eyebrow {
  font-family: var(--font-incant);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: var(--house-accent);
}
.devise-text {
  margin-top: 1.5rem;
  font-family: var(--font-arcane);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--house-text);
  text-shadow: 0 0 30px color-mix(in oklab, var(--house-ember) 67%, transparent);
}
@media (min-width: 40rem) { .devise-text { font-size: 1.875rem; } }
.devise-attrib {
  margin-top: 1.5rem;
  font-family: var(--font-incant);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: color-mix(in srgb, var(--house-light) 80%, transparent);
}
.back-bottom-wrap { margin-top: 4rem; }
.back-bottom {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid color-mix(in srgb, var(--house-accent) 33%, transparent);
  border-radius: 9999px;
  background: rgba(5, 6, 12, .5);
  padding: .75rem 2rem;
  font-family: var(--font-incant);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--house-light);
  transition: transform .3s cubic-bezier(.22, .6, .36, 1), border-color .15s;
}
.back-bottom:hover { transform: scale(1.03); border-color: color-mix(in srgb, var(--house-accent) 60%, transparent); }
.back-bottom .back-arrow { transition: transform .15s; }
.back-bottom:hover .back-arrow { transform: translateX(-.25rem); }

/* --------------------------------------------------------------------------
   24. Embellissements animés — vie supplémentaire, sans excès
   -------------------------------------------------------------------------- */

/* ——— Reflet doré qui parcourt les grands titres gravés ——— */
.hero-title.text-engraved,
.sh-title.text-engraved,
.house-hero-title.text-engraved {
  background: linear-gradient(105deg, #a26000 0%, #dc9b3a 22%, #ffe0a9 38%, #f8cf7e 50%, #dc9b3a 66%, #a26000 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: title-shimmer 9s ease-in-out infinite;
}
.hero-title.text-engraved {
  filter: drop-shadow(0 1px oklch(0% 0 0 / .6)) drop-shadow(0 0 26px oklch(80% .14 78 / .3));
}
@keyframes title-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ——— Héros : respiration du château, brume basse et rayons hauts ——— */
.hero-castle-wrap img {
  animation: hero-breathe 18s ease-in-out 3.4s infinite;
}
@keyframes hero-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.hero-bg::before { /* nappe de brume dérivante en bas du héros */
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: -6%;
  height: 38%;
  background:
    radial-gradient(ellipse at 25% 80%, oklch(60% .05 270 / .3), transparent 60%),
    radial-gradient(ellipse at 70% 90%, oklch(65% .04 220 / .22), transparent 55%);
  filter: blur(26px);
  animation: fog-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-bg::after { /* rayons descendants très discrets */
  content: "";
  position: absolute;
  inset: -10% -5% 30% -5%;
  background: repeating-linear-gradient(100deg,
    transparent 0 60px,
    oklch(80% .1 82 / .05) 60px 90px,
    transparent 90px 180px);
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: godray-drift 24s linear infinite;
  pointer-events: none;
}

/* Étincelle qui voyage le long du séparateur du héros */
.hero-divider { position: relative; overflow: visible; }
.hero-divider::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--color-gold);
  box-shadow: 0 0 10px var(--color-gold), 0 0 24px oklch(82% .15 82 / .6);
  animation: divider-spark 5.5s ease-in-out infinite alternate;
}
@keyframes divider-spark {
  0%   { left: 2%; opacity: .4; }
  50%  { opacity: 1; }
  100% { left: 98%; opacity: .4; }
}

/* Indication de défilement : flottement doux une fois révélée */
.hero-scroll-hint.is-visible { animation: hint-bob 2.8s ease-in-out 1.2s infinite; }
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ——— Blasons du héros : envol au survol ——— */
.crest-link .crest { transition: transform .6s cubic-bezier(.22, .6, .36, 1); }
.crest-link:hover .crest { transform: scale(1.18) translateY(-4px); }
.crest-link .crest-label { transition: color .4s ease, letter-spacing .4s ease, text-shadow .4s ease; }
.crest-link:hover .crest-label {
  letter-spacing: .62em;
  text-shadow: 0 0 14px oklch(82% .15 82 / .7);
}

/* ——— En-têtes de section : halo, numéral qui respire, ligne étirée ——— */
.section-header { position: relative; }
.section-header::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3rem;
  width: 34rem;
  max-width: 90vw;
  height: 12rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, oklch(70% .12 80 / .1), transparent 65%);
  filter: blur(18px);
  pointer-events: none;
}
.sh-num { animation: num-glow 6s ease-in-out infinite; }
@keyframes num-glow {
  0%, 100% { text-shadow: 0 0 6px oklch(82% .15 82 / .2); }
  50%      { text-shadow: 0 0 18px oklch(82% .15 82 / .55), 0 0 40px oklch(78% .14 78 / .3); }
}
.js .sh-rule { transform: scaleX(.2); opacity: 0; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1) .3s, opacity 1.2s ease .3s; }
.js [data-reveal].is-visible .sh-rule, .js .sh-rule.is-visible { transform: scaleX(1); opacity: 1; }

/* ——— Ornements : scintillement des glyphes ✦ ——— */
.orn-glyph { display: inline-block; animation: orn-twinkle 4.5s ease-in-out infinite; }
@keyframes orn-twinkle {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.18); text-shadow: 0 0 12px currentColor; }
}

/* ——— Cartes de maison : élévation et braise au survol ——— */
.house-card {
  transition: transform .55s cubic-bezier(.22, .6, .36, 1), box-shadow .55s ease, border-color .55s ease;
}
.house-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--house-glow) 45%, transparent);
  box-shadow:
    0 28px 60px -18px oklch(0% 0 0 / .8),
    0 0 46px -8px var(--house-ember);
}
.house-card .crest-img { transition: filter .6s ease; }
.house-card:hover .crest-img { filter: brightness(1.12) saturate(1.08); }
.house-card .house-name { transition: text-shadow .5s ease; }
.house-card:hover .house-name { text-shadow: 0 0 18px var(--house-glow); }

/* ——— Parchemins : reflet de lumière qui glisse lentement ——— */
.parchment-paper { position: relative; }
.parchment-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, oklch(97% .05 85 / .3) 50%, transparent 60%);
  background-size: 260% 100%;
  mix-blend-mode: soft-light;
  animation: parchment-sheen 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes parchment-sheen {
  0%, 12%   { background-position: 130% 0; }
  55%, 100% { background-position: -130% 0; }
}

/* ——— Règlement : articles qui s'écartent doucement au survol ——— */
.subsection { transition: transform .45s cubic-bezier(.22, .6, .36, 1); }
.subsection:hover { transform: translateX(6px); }
.subsection .subsection-title { transition: color .4s ease; }
.subsection:hover .subsection-title { color: oklch(38% .12 40); }

/* ——— Sceaux de cire : bascule au survol ——— */
.wax-seal { transition: transform .45s cubic-bezier(.22, .6, .36, 1); }
.seal-glow-wrap:hover .wax-seal { transform: rotate(-5deg) scale(1.06); }

/* ——— Boutons dorés : halo qui respire ——— */
.btn-gold { animation: btn-breathe 3.8s ease-in-out infinite; }
.btn-gold:hover { animation-play-state: paused; }
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 0 24px oklch(82% .2 60 / .35), inset 0 0 0 1px oklch(82% .2 60 / .25); }
  50%      { box-shadow: 0 0 44px oklch(82% .2 60 / .6), inset 0 0 0 1px oklch(82% .2 60 / .4); }
}

/* ——— Champ du rituel : lueur à la saisie ——— */
.ritual-input { transition: box-shadow .35s ease, border-color .35s ease; }
.ritual-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px oklch(62% .14 70 / .45), 0 0 26px oklch(70% .15 60 / .35);
}

/* ——— Ruban de progression & bouton sonore : réponses au survol ——— */
.progress-step .step-label { transition: color .3s ease; }
.progress-step:hover .step-label { color: var(--color-gold); }
.sound-toggle { transition: box-shadow .4s ease, border-color .4s ease; }
.sound-toggle:hover {
  border-color: oklch(78% .14 78 / .8);
  box-shadow: 0 0 20px oklch(78% .14 78 / .35);
}

/* ——— Pied de page : le compteur luit doucement ——— */
#visitor-count { animation: num-glow 5s ease-in-out infinite; }

/* ——— Pages maisons : lore vivant ——— */
.lore-article { transition: transform .5s cubic-bezier(.22, .6, .36, 1); }
.lore-article:hover { transform: translateX(6px); }
.house-list-card {
  transition: transform .5s cubic-bezier(.22, .6, .36, 1), box-shadow .5s ease, border-color .5s ease;
}
.house-list-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--house-accent, var(--house-glow)) 50%, transparent);
  box-shadow: 0 20px 44px -16px oklch(0% 0 0 / .75), 0 0 34px -10px var(--house-ember);
}
.lore-glyph { display: inline-block; animation: orn-twinkle 5s ease-in-out infinite; }

/* ——— Glyphes ambiants flottants (générés par app.js dans chaque section) ——— */
.amb-glyphs {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.amb-glyphs span {
  position: absolute;
  font-family: var(--font-display);
  color: oklch(78% .12 82);
  mix-blend-mode: screen;
  opacity: 0;
  user-select: none;
  animation: amb-glyph var(--adur, 16s) ease-in-out var(--adel, 0s) infinite;
}
@keyframes amb-glyph {
  0%, 100% { opacity: 0; transform: translateY(14px) scale(.9) rotate(-4deg); }
  30%      { opacity: .4; }
  50%      { opacity: .16; transform: translateY(-16px) scale(1.06) rotate(4deg); }
  70%      { opacity: .4; }
}

/* ——— Particules magiques : poussière d'or au curseur et au clic ——— */
.cursor-sparks {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  overflow: hidden;
}
.cursor-sparks span {
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(circle, oklch(94% .1 85) 0%, oklch(82% .15 82) 45%, transparent 72%);
  box-shadow: 0 0 8px oklch(82% .15 82 / .8);
  mix-blend-mode: screen;
  animation: cursor-spark .9s ease-out forwards;
}
@keyframes cursor-spark {
  0%   { opacity: .95; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx, 0px), var(--sy, 18px)) scale(.1); }
}

/* ——— Étoile filante dans le ciel du héros (posée par app.js) ——— */
.shooting-star {
  position: absolute;
  top: var(--st, 12%);
  left: var(--sl, 10%);
  width: 150px;
  height: 2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, oklch(96% .04 85), oklch(85% .1 82 / .5), transparent);
  filter: drop-shadow(0 0 6px oklch(92% .07 85 / .9));
  mix-blend-mode: screen;
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  animation: star-shoot var(--sd, 1.3s) ease-in forwards;
}
@keyframes star-shoot {
  0%   { opacity: 0; transform: rotate(var(--sa, 24deg)) translateX(0) scaleX(.3); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--sa, 24deg)) translateX(46vw) scaleX(1); }
}

/* ——— Variantes de révélation supplémentaires + décalage en cascade ——— */
.js [data-reveal] {
  transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1), filter 1s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal="left"]  { transform: translateX(-28px); }
.js [data-reveal="zoom"]  { transform: scale(.93) translateY(12px); }
.js [data-reveal="blur"]  { transform: translateY(20px); filter: blur(8px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

/* --------------------------------------------------------------------------
   24 bis. Portrait du Directeur (Clive) — image fixe et nette
   On neutralise tous les effets animés propres à CE portrait uniquement
   (le Veilleur garde les siens). L'image ne pulse plus, ne bouge plus,
   et aucune couche animée ne passe par-dessus.
   -------------------------------------------------------------------------- */
/* Image stable : luminosité constante, plus de pilotage audio ni de zoom */
#portrait-directeur .d-portrait {
  animation: none !important;
  filter: brightness(.92) contrast(1.03) saturate(1.02) !important;
  transform: none !important;
}
/* On masque les couches d'effet superposées à l'image (bouche, baguette,
   brume, poussières, runes flottantes, halos, rayons, ombre, grain) */
#portrait-directeur .d-mouth,
#portrait-directeur .d-wand,
#portrait-directeur .d-fog,
#portrait-directeur .d-shade,
#portrait-directeur .d-glow,
#portrait-directeur .d-godrays,
#portrait-directeur .d-runes-float,
#portrait-directeur .d-motes,
#portrait-directeur .diptych-image .film-grain,
#portrait-directeur .diptych-image .grain-blue {
  display: none !important;
}
/* Le cadre décoratif reste, mais sans animation */
#portrait-directeur .d-frame,
#portrait-directeur .d-frame * {
  animation: none !important;
}

/* --------------------------------------------------------------------------
   25. Mouvement réduit — comme le site original, on ne coupe que le
   défilement animé (la parallaxe souris est déjà gérée par app.js).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}