/* =============================================================
   حكاية سبيطلة — feuille de style (thème clair de mariage)
   Ivoire, or champagne, rose poudré + couleurs de la selle brodée
   ============================================================= */
:root {
  /* thème « soirée arabe » : nuit prune, velours grenat, or des lanternes */
  --ivory: #1d1631;      /* fond de page */
  --paper: #2a2042;      /* cartes */
  --cream: #160f26;      /* fond plus profond */
  --sand: #c9a46a;
  --ink: #f6ecd8;        /* texte principal (ivoire) */
  --ink-soft: #cdbda2;   /* texte secondaire */
  --gold: #d4a64a;
  --gold-light: #f1d48c;
  --gold-deep: #e6bf68;  /* or lumineux pour les textes forts */
  --rose: #d7928f;
  --rose-soft: #3a2340;
  --blush: #3b2238;
  --garnet: #b0283f;
  --emerald: #2c8a68;
  --saffron: #e2a822;

  --f-callig: 'Aref Ruqaa', 'Amiri', serif;
  --f-classic: 'Amiri', serif;
  --f-quran: 'Amiri Quran', 'Amiri', serif;
  --f-ui: 'Tajawal', system-ui, sans-serif;

  --gold-text: linear-gradient(100deg, #b8892f 0%, #f1d48c 16%, #fff4cf 28%, #d4a64a 44%, #f6dc95 60%, #a87a2e 80%, #e6c46e 100%);
  --zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d4a64a' stroke-opacity='.12' stroke-width='1'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Cpath d='M0 0L10 10M64 0L54 10M0 64L10 54M64 64L54 54'/%3E%3C/g%3E%3C/svg%3E");
  --shadow-card: 0 16px 40px rgba(5, 2, 12, .45), 0 2px 6px rgba(5, 2, 12, .3);
  --paper-bg: linear-gradient(180deg, rgba(52, 38, 78, .92), rgba(36, 26, 56, .94));
  --well: rgba(255, 240, 210, .06);
  --star8: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--ivory); }
html.is-locked, html.is-locked body { overflow: hidden; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-ui);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* Texte doré avec reflet qui glisse */
.gold-text {
  background: var(--gold-text);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--gold);
}
.kicker::before, .kicker::after {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.kicker::after { transform: scaleX(-1); }
.star8 {
  display: inline-block;
  width: 11px;
  height: 11px;
  clip-path: var(--star8);
  background: linear-gradient(135deg, #e6c46e, #a87a2e);
}
.chapter-title {
  margin: 0;
  font-family: var(--f-callig);
  font-weight: 400;
  font-size: clamp(2.8rem, 13vw, 5rem);
  line-height: 1.25;
  color: var(--ink);
}
.chapter-title--sm { font-size: clamp(2.3rem, 10.5vw, 3.6rem); }
.flourish { display: block; width: min(70vw, 300px); height: 22px; margin: 0 auto; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--gold {
  color: #fffaf0;
  background: linear-gradient(135deg, #d4a64a, #a87a2e 60%, #c99a3c);
  box-shadow: 0 8px 22px rgba(168, 122, 46, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn--garnet {
  color: #fffaf0;
  background: linear-gradient(135deg, #a8293d, var(--garnet));
  box-shadow: 0 8px 22px rgba(142, 27, 46, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn--garnet.is-done { background: linear-gradient(135deg, #2c8a68, var(--emerald)); }
.btn--ghost {
  color: var(--gold-deep);
  background: var(--well);
  box-shadow: inset 0 0 0 1.5px rgba(184, 137, 47, .6);
}
.btn--sm { padding: 10px 18px; font-size: .92rem; }
.btn--wide { width: 100%; }
.btn:disabled { opacity: .6; }

/* ---------- Bouton son ---------- */
.sound-toggle {
  position: fixed;
  z-index: 80;
  top: calc(46px + env(safe-area-inset-top));
  left: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 137, 47, .55);
  background: rgba(255, 253, 248, .75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--gold-deep);
  box-shadow: 0 4px 14px rgba(120, 84, 40, .15);
}
.sound-toggle svg { width: 22px; height: 22px; }
.sound-toggle .ico-off,
.sound-toggle.is-muted .ico-on { display: none; }
.sound-toggle.is-muted .ico-off { display: block; }

/* ---------- Jasmin ---------- */
.jasmine { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.2s; }
.jasmine-on .jasmine { opacity: 1; }
.jasmine span {
  position: absolute;
  top: -40px;
  width: var(--s);
  height: var(--s);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23fffdf6' stroke='%23e9dcc4' stroke-width='.6'%3E%3Cellipse rx='3.4' ry='7' transform='rotate(0) translate(0 -5)'/%3E%3Cellipse rx='3.4' ry='7' transform='rotate(72) translate(0 -5)'/%3E%3Cellipse rx='3.4' ry='7' transform='rotate(144) translate(0 -5)'/%3E%3Cellipse rx='3.4' ry='7' transform='rotate(216) translate(0 -5)'/%3E%3Cellipse rx='3.4' ry='7' transform='rotate(288) translate(0 -5)'/%3E%3C/g%3E%3Ccircle r='2.2' fill='%23ecc65c'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(120, 84, 40, .18));
  animation: jasmineFall var(--d) linear var(--dl) infinite;
  animation-play-state: paused;
}
.jasmine-on .jasmine span { animation-play-state: running; }
@keyframes jasmineFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(var(--sway), 55vh, 0) rotate(200deg); }
  100% { transform: translate3d(0, 112vh, 0) rotate(400deg); }
}

/* ═══════════ PROLOGUE ═══════════ */
.prologue {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(70% 45% at 50% 42%, rgba(212, 166, 74, .2), transparent 70%),
    var(--zellige),
    linear-gradient(180deg, var(--paper), var(--cream));
  touch-action: none;
  overflow: hidden;
}
.prologue__arch {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(84vw, 380px);
  height: min(80vh, 620px);
  height: min(80svh, 620px);
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(184, 137, 47, .7);
  border-radius: 999px 999px 22px 22px;
}
.prologue__arch::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(184, 137, 47, .35);
  border-radius: 999px 999px 16px 16px;
}
.prologue__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.prologue__kicker { margin: 0; font-family: var(--f-classic); font-size: 1.15rem; color: var(--gold); }
.prologue__names {
  margin: -12px 0 0;
  padding: 0 .1em;
  font-family: var(--f-callig);
  font-weight: 700;
  font-size: clamp(3rem, 15vw, 4.6rem);
  line-height: 1.35;
}
.prologue__names span { font-size: .6em; }
.prologue__date { margin: -14px 0 0; font-weight: 700; font-size: 1rem; color: var(--ink); }
.prologue__flourish { width: 200px; margin: -6px 0 2px; }
.prologue__meta { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.prologue__icon { width: 46px; height: 46px; color: var(--gold); animation: breathe 3.2s ease-in-out infinite; }
.prologue__inner { z-index: 2; gap: 16px; }
.prologue__hint { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--ink-soft); }
.start-btn {
  margin-top: 6px;
  padding: 15px 34px 17px;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-classic);
  font-size: 1.32rem;
  font-weight: 700;
  color: #fffaf0;
  background: linear-gradient(135deg, #d4a64a, #a87a2e 60%, #c99a3c);
  animation: callPulse 2.6s ease-out infinite;
  transition: transform .2s;
}
.start-btn:active { transform: scale(.97); }
.prologue__mark { margin: 20px 0 0; font-family: var(--f-callig); font-size: 1.15rem; color: rgba(138, 98, 32, .7); }
.motes { position: absolute; inset: 0; pointer-events: none; }
.motes span {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 166, 74, .8), rgba(212, 166, 74, 0) 70%);
  opacity: 0;
  animation: mote var(--d) linear var(--dl) infinite;
}
@keyframes mote {
  0%   { transform: translateY(20px); opacity: 0; }
  15%  { opacity: .8; }
  85%  { opacity: .5; }
  100% { transform: translateY(-140px); opacity: 0; }
}
@keyframes callPulse {
  0%       { box-shadow: 0 0 0 0 rgba(184, 137, 47, .45), 0 8px 22px rgba(168, 122, 46, .3); }
  70%,100% { box-shadow: 0 0 0 18px rgba(184, 137, 47, 0), 0 8px 22px rgba(168, 122, 46, .3); }
}
@keyframes breathe {
  0%, 100% { opacity: .75; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}

/* ═══════════ OUVERTURE ═══════════ */
.scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 56px 20px 96px;
  text-align: center;
  overflow: hidden;
}
.scene--verse {
  background:
    radial-gradient(70% 45% at 50% 45%, rgba(212, 166, 74, .16), transparent 70%),
    var(--zellige),
    linear-gradient(180deg, var(--cream), var(--ivory));
}
.verse-frame {
  position: relative;
  max-width: 460px;
  padding: 64px 26px 40px;
  border: 1.5px solid rgba(184, 137, 47, .65);
  border-radius: 999px 999px 24px 24px;
  background: rgba(30, 22, 50, .7);
  box-shadow: 0 20px 50px rgba(5, 2, 12, .45), inset 0 0 0 8px rgba(30, 22, 50, .6), inset 0 0 0 9px rgba(212, 166, 74, .3);
}
.bismillah {
  margin: 0 0 18px;
  font-family: var(--f-classic);
  font-weight: 700;
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  color: var(--gold-deep);
  opacity: 0;
}
.verse {
  margin: 0;
  font-family: var(--f-quran);
  font-size: clamp(1.35rem, 6.4vw, 2rem);
  line-height: 2.25;
  color: var(--ink);
}
.verse .w { display: inline-block; opacity: 0; }
.verse-ref { margin: 18px 0 0; font-size: .95rem; font-weight: 500; color: var(--gold); opacity: 0; }
.scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  color: var(--ink-soft);
  opacity: 0;
}
.scroll-hint svg { width: 28px; height: 28px; color: var(--gold); animation: hintBob 1.8s ease-in-out infinite; }
@keyframes hintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ═══════════ DÉCORS PARTAGÉS ═══════════ */
.temples-svg, .hills-svg { display: block; width: 100%; height: 100%; }
.stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }

/* ═══════════ CHAPITRE 1 — L'AUBE ═══════════ */
.ch1__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.ch1__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1c1840 0%, #3b2a5c 32%, #7a4064 56%, #c9705e 74%, #e9a160 88%, #f0b56c 100%);
}
.ch1__sky--day { background: linear-gradient(180deg, #0c0b24 0%, #181538 38%, #2c2049 64%, #4a2c52 84%, #5c3550 100%); opacity: 0; }
.ch1__sun {
  position: absolute;
  left: 70%;
  top: 50%;
  width: 34vmin;
  height: 34vmin;
  margin: -17vmin 0 0 -17vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 222, 170, .32) 0%, rgba(241, 212, 140, .1) 45%, transparent 70%);
}
/* le disque de la lune */
.ch1__sun::before {
  content: '';
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 38%, rgba(196, 178, 140, .55) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 30%, rgba(196, 178, 140, .45) 0 6%, transparent 7%),
    radial-gradient(circle at 58% 64%, rgba(196, 178, 140, .5) 0 11%, transparent 12%),
    radial-gradient(circle at 35% 35%, #fffbef 0%, #f3e6c6 60%, #e0cfa4 100%);
  box-shadow: 0 0 30px 8px rgba(255, 236, 190, .35), inset -6px -6px 14px rgba(150, 120, 80, .35);
}
.ch1__rays {
  position: absolute;
  inset: -60%;
  display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ch1__layer { position: absolute; left: 50%; }
.ch1__hills   { bottom: 17%; --h: clamp(110px, 17vh, 210px); height: var(--h); width: calc(var(--h) * 8); margin-left: calc(var(--h) * -4); }
.ch1__temples { bottom: 16%; --h: clamp(180px, 30vh, 320px); height: var(--h); width: calc(var(--h) * 6); margin-left: calc(var(--h) * -3); }
.ch1__front   { left: 0; right: 0; bottom: 0; height: 24%; }
.ch1__front svg { display: block; width: 100%; height: 100%; }
.ch1__photo {
  position: absolute;
  inset: 0;
  display: none;
  background: url('../images/temples-sbeitla.webp') center 60% / cover no-repeat;
}
.ch1.has-photo .ch1__photo { display: block; }
.ch1.has-photo .ch1__temples, .ch1.has-photo .ch1__hills { display: none; }
.ch1.has-photo .ch1__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 40, .85) 0%, rgba(20, 14, 40, .35) 40%, rgba(40, 20, 40, .55) 100%);
}
.ch1__mist {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(29, 22, 49, .55) 60%, rgba(29, 22, 49, .9));
  pointer-events: none;
}
.ch1__branch { position: absolute; top: 0; right: 0; width: min(48vw, 250px); }
.ch1__branch svg { display: block; width: 100%; height: auto; }
.ch1__text { position: absolute; top: 12%; left: 0; right: 0; padding: 0 24px; text-align: center; }
.ch1__line {
  margin: 10px 0 0;
  font-family: var(--f-classic);
  font-size: clamp(1.35rem, 6vw, 2rem);
  color: var(--ink);
  text-shadow: 0 2px 12px rgba(10, 5, 22, .9);
}
.ch1__line .w { display: inline-block; }

/* ═══════════ CHAPITRE 2 — LE CAVALIER ═══════════ */
.ch2 { position: relative; background: var(--cream); }
.ch2__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  --rw: min(88vw, 57vh, 640px);
}
@supports (height: 100svh) { .ch2__stage { --rw: min(88vw, 57svh, 640px); } }
.ch2__shake { position: absolute; inset: 0; }
.ch2__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #221b46 0%, #4a2f62 30%, #94506a 52%, #d7785c 68%, #f0a85e 80%, #f6c47a 100%); }
.ch2__sun {
  position: absolute;
  top: 46%;
  right: 14%;
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0%, #ffd690 16%, rgba(255, 170, 90, .5) 36%, transparent 70%);
}
.ch2__clouds i {
  position: absolute;
  width: 46vmin;
  height: 12vmin;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 170, .5), rgba(255, 196, 170, 0));
  animation: cloud 60s linear infinite;
}
.ch2__clouds i:nth-child(1) { top: 22%; left: -10%; }
.ch2__clouds i:nth-child(2) { top: 34%; left: 40%; width: 34vmin; animation-duration: 80s; animation-delay: -30s; }
.ch2__clouds i:nth-child(3) { top: 14%; left: 70%; width: 28vmin; animation-duration: 70s; animation-delay: -50s; }
@keyframes cloud { from { transform: translateX(-40vw); } to { transform: translateX(110vw); } }
.ch2__hills, .ch2__temples { position: absolute; left: 50%; }
.ch2__hills   { bottom: 19%;   --h: clamp(110px, 16vh, 200px); height: var(--h); width: calc(var(--h) * 8); }
.ch2__temples { bottom: 19.6%; --h: clamp(190px, 31vh, 330px); height: var(--h); width: calc(var(--h) * 6); }
.ch2__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  overflow: hidden;
  background: linear-gradient(180deg, #c58f5c 0%, #9a6a48 30%, #5e3f36 100%);
  box-shadow: inset 0 1px 0 rgba(255, 210, 150, .8);
}
.ch2__ground::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -260px;
  right: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='80'%3E%3Cg fill='none' stroke='%23704a30' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 30l-4-10M20 30l2-12M20 30l6-9'/%3E%3Cpath d='M150 56l-5-12M150 56l1-14M150 56l7-10'/%3E%3Cpath d='M232 22l-3-8M232 22l2-9'/%3E%3C/g%3E%3Cg fill='%237a5238'%3E%3Cellipse cx='80' cy='44' rx='9' ry='3'/%3E%3Cellipse cx='200' cy='68' rx='12' ry='4'/%3E%3Cellipse cx='110' cy='14' rx='5' ry='2'/%3E%3C/g%3E%3C/svg%3E") repeat;
  background-size: 260px 80px;
  animation: groundRun .55s linear infinite;
  animation-play-state: paused;
}
.ch2__stage.is-running .ch2__ground::before { animation-play-state: running; }
@keyframes groundRun { to { transform: translateX(260px); } }
.ch2__troupe { position: absolute; left: 50%; bottom: 16.5%; z-index: 1; will-change: transform; }
.crider { position: absolute; bottom: 0; }
.ch2__rider {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 2;
  width: var(--rw);
  margin-left: calc(var(--rw) / -2);
  will-change: transform;
}
.rider-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch2__nameWrap {
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(120, 80, 20, .25));
}
.ch2__label { margin: 0 0 .1em; font-family: var(--f-classic); font-size: clamp(1.05rem, 4.6vw, 1.5rem); color: var(--gold-light); opacity: 0; }
.ch2__nameReveal { opacity: 0; }
.ch2__name {
  display: inline-block;
  margin: 0;
  padding: 0 .12em;
  font-family: var(--f-callig);
  font-weight: 700;
  font-size: clamp(5.6rem, 31vw, 13rem);
  line-height: 1.15;
}
.ch2__flourish { margin-top: -.1em; opacity: 0; }
.ch2__fx { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.puff {
  position: absolute;
  z-index: 4;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 220, 212, .85), rgba(225, 220, 212, 0) 68%);
  pointer-events: none;
}
.ch2__vignette { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(10, 5, 22, .45) 100%); }
.ch2__title { position: absolute; top: 30%; left: 0; right: 0; z-index: 6; padding: 0 24px; text-align: center; pointer-events: none; }
.ch2__title .chapter-title { text-shadow: 0 2px 20px rgba(10, 5, 22, .9); }
.ch2__sub { margin: 8px 0 0; font-family: var(--f-classic); font-size: clamp(1rem, 4.2vw, 1.3rem); color: var(--ink-soft); text-shadow: 0 1px 10px rgba(10, 5, 22, .95); }
.ch2__flash {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(60% 50% at 40% 45%, rgba(255, 250, 230, .95), rgba(255, 220, 160, .5) 50%, rgba(255, 255, 255, 0) 80%);
}

/* Lambrequin brodé, avec franges et pompons */
.valance {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 7;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='34' viewBox='0 0 48 34'%3E%3Crect width='48' height='34' fill='%237a1426'/%3E%3Crect width='48' height='3' fill='%23d4a64a'/%3E%3Crect y='31' width='48' height='3' fill='%23d4a64a'/%3E%3Cpath d='M0 3L12 15L24 3Z' fill='%230f6b4f'/%3E%3Cpath d='M24 3L36 15L48 3Z' fill='%23e2a822'/%3E%3Cpath d='M12 31L24 19L36 31Z' fill='%230f6b4f'/%3E%3Cpath d='M-12 31L0 19L12 31ZM36 31L48 19L60 31Z' fill='%23e2a822'/%3E%3Cpath d='M24 9L31 17L24 25L17 17Z' fill='%23f6e2a1'/%3E%3Ccircle cx='24' cy='17' r='2.5' fill='%237a1426'/%3E%3Ccircle cx='0' cy='17' r='2' fill='%23f6e2a1'/%3E%3Ccircle cx='48' cy='17' r='2' fill='%23f6e2a1'/%3E%3C/svg%3E") repeat-x;
  background-size: 48px 34px;
  box-shadow: 0 6px 14px rgba(90, 50, 20, .2);
}
.valance::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 11px;
  background: repeating-linear-gradient(90deg, rgba(184, 137, 47, .9) 0 1px, transparent 1px 4px);
  -webkit-mask: linear-gradient(#000, rgba(0, 0, 0, .35));
  mask: linear-gradient(#000, rgba(0, 0, 0, .35));
}
.pompom {
  position: absolute;
  top: 100%;
  width: 1.5px;
  height: var(--h);
  background: linear-gradient(#d4a64a, #b8892f);
  transform-origin: 50% 0;
  animation: sway var(--dur) ease-in-out var(--delay) infinite alternate;
}
.pompom::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 13px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 40% 32%, rgba(255, 255, 255, .45), transparent 42%), var(--c);
  box-shadow: 0 3px 6px rgba(90, 50, 20, .3);
}
@keyframes sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.ribbon { position: relative; height: 70px; background: var(--ivory); }
.valance--ribbon { height: 22px; background-size: 32px 22px; }
.valance--ribbon .pompom::after { width: 10px; height: 12px; bottom: -11px; }

/* ═══════════ CHAPITRE 3 — LA LANTERNE ═══════════ */
.ch3__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
.ch3__bg { position: absolute; inset: 0; background: var(--zellige), linear-gradient(180deg, #1a1230 0%, #2e1a3a 100%); }
.ch3__bg--warm { background: radial-gradient(90% 60% at 50% 22%, #6a3a3a 0%, #42213e 45%, #241634 100%); opacity: 0; }
.ch3__glow {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 120vmin;
  height: 90vmin;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 214, 140, .8), rgba(255, 190, 120, .3) 45%, transparent 75%);
  opacity: 0;
  pointer-events: none;
}
.ch3__lantern {
  position: relative;
  z-index: 2;
  height: min(30vh, 270px);
  height: min(30svh, 270px);
  transform-origin: 50% 0;
  animation: lanternSwing 4.5s ease-in-out infinite alternate;
}
@keyframes lanternSwing { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.lantern { display: block; height: 100%; width: auto; overflow: visible; filter: drop-shadow(0 8px 14px rgba(120, 70, 20, .25)); }
.lantern .lit { opacity: 0; }
.lantern .flame { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.lantern .flame ellipse:first-child { animation: flicker .18s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes flicker { from { transform: scale(1, 1); } to { transform: scale(.92, 1.08); } }
.ch3__head { position: relative; z-index: 2; margin-top: 6px; text-align: center; }
.ch3__henna { position: relative; z-index: 2; flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; padding: 8px 16px 0; }
.ch3__henna svg { display: block; width: min(88vw, 44vh, 460px); height: auto; aspect-ratio: 1; }
@supports (height: 100svh) { .ch3__henna svg { width: min(88vw, 44svh, 460px); } }
.hp { fill: none; stroke: #e2b86a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hd { fill: #e2b86a; }
.henna-name {
  font-family: var(--f-callig);
  font-weight: 700;
  font-size: 98px;
  fill: #f1d48c;
  fill-opacity: 0;
  stroke: #f1d48c;
  stroke-width: 1.4;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.ch3__label { position: relative; z-index: 2; margin: 4px 0 0; font-family: var(--f-classic); font-size: clamp(1.1rem, 4.8vw, 1.5rem); color: var(--gold-light); opacity: 0; }

/* ═══════════ CHAPITRE 4 — LA RENCONTRE ═══════════ */
.ch4__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.ch4__bg { position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 55%, #4a2a4a 0%, var(--ivory) 70%), var(--ivory); }
.ch4__paths { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch4__paths path { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.ch4__paths .path-a { stroke: #c99a3c; filter: drop-shadow(0 0 6px rgba(232, 204, 132, .9)); }
.ch4__paths .path-b { stroke: #d18f8a; filter: drop-shadow(0 0 6px rgba(240, 190, 185, .9)); }
.ch4__burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vmin;
  height: 70vmin;
  margin: -35vmin 0 0 -35vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 210, 1) 0%, rgba(240, 200, 120, .55) 30%, rgba(240, 180, 170, .2) 55%, transparent 72%);
  opacity: 0;
  transform: scale(0);
}
.ch4__head { position: absolute; top: 5%; left: 0; right: 0; text-align: center; z-index: 3; }

.card3d {
  --cw: min(84vw, 400px, 50vh);
  position: relative;
  z-index: 2;
  width: var(--cw);
  height: calc(var(--cw) * 1.5);
  margin-top: 8vh;
  perspective: 1400px;
  opacity: 0;
}
@supports (height: 100svh) { .card3d { --cw: min(84vw, 400px, 50svh); margin-top: 8svh; } }
.card3d__body { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.card3d__page {
  --ink: #3b2a1e;
  --ink-soft: #6b5644;
  --gold-deep: #8a6220;
  --garnet: #8e1b2e;
  --gold-text: linear-gradient(100deg, #8a6220 0%, #b8892f 16%, #e6c46e 28%, #a87a2e 44%, #d9b25c 60%, #7a5418 80%, #b8892f 100%);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cw) * .022);
  padding: calc(var(--cw) * .1) calc(var(--cw) * .08);
  text-align: center;
  border-radius: calc(var(--cw) * .5) calc(var(--cw) * .5) 14px 14px;
  background: var(--zellige), linear-gradient(180deg, #fffdf8, #fbf1e3);
  box-shadow: var(--shadow-card), inset 0 0 0 7px #fffdf8, inset 0 0 0 8.5px rgba(184, 137, 47, .55);
}
.card3d__page > * { margin: 0; }
.cp-bism { font-family: var(--f-classic); font-weight: 700; font-size: calc(var(--cw) * .05); color: var(--gold-deep); }
.cp-families, .cp-invite, .cp-insha { font-family: var(--f-classic); font-size: calc(var(--cw) * .052); line-height: 1.7; color: var(--ink); }
.cp-families strong { color: var(--garnet); font-weight: 700; }
.cp-names { font-family: var(--f-callig); font-weight: 700; font-size: calc(var(--cw) * .15); line-height: 1.35; }
.cp-flourish { width: 70%; }
.cp-date, .cp-place { font-family: var(--f-ui); font-weight: 500; font-size: calc(var(--cw) * .042); color: var(--ink-soft); }
.cp-date { color: var(--gold-deep); font-weight: 700; }

.card3d__door {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
}
.card3d__door--r { right: 0; transform-origin: 100% 50%; }
.card3d__door--l { left: 0; transform-origin: 0 50%; }
.door-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.card3d__door--r .door-face { border-radius: 0 calc(var(--cw) * .5) 14px 0; }
.card3d__door--l .door-face { border-radius: calc(var(--cw) * .5) 0 0 14px; }
.door-front { background: linear-gradient(180deg, #fffaf0, #f6ead4); box-shadow: inset 0 0 0 1px rgba(184, 137, 47, .4); }
.door-front svg { display: block; width: 100%; height: 100%; }
.door-front--mirror svg { transform: scaleX(-1); }
.door-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(90, 60, 30, .35), rgba(90, 60, 30, 0)); opacity: 0; pointer-events: none; }
.door-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(rgba(142, 27, 46, .9), rgba(122, 20, 38, .92)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 1.5L18.5 10L10 18.5L1.5 10Z' fill='none' stroke='%23e2a822' stroke-width='1.2'/%3E%3C/svg%3E");
  background-blend-mode: normal, overlay;
  box-shadow: inset 0 0 0 4px #d4a64a;
}
.card3d__seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cw) * .28);
  height: calc(var(--cw) * .28);
  margin: calc(var(--cw) * -.14) 0 0 calc(var(--cw) * -.14);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #c13a4f, var(--garnet) 55%, #5e0f1e);
  box-shadow: 0 6px 16px rgba(94, 15, 30, .4), inset 0 0 0 3px rgba(226, 168, 34, .6), inset 0 0 0 6px rgba(94, 15, 30, .5);
  transform: translateZ(2px);
}
.card3d__seal span { font-family: var(--f-callig); font-size: calc(var(--cw) * .085); color: #f6e2a1; }
.card3d__shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
}

/* ═══════════ CHAPITRE 5 — LE VOYAGE ═══════════ */
.ch5__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; --sw: min(76vw, 320px); }
.ch5__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #120f2c 0%, #251c45 50%, #46294d 80%, #5b3248 100%); }
.ch5__head { position: absolute; top: 4%; left: 0; right: 0; text-align: center; z-index: 3; }
.ch5__track { position: absolute; inset: 0; z-index: 2; will-change: transform; }
.stop {
  position: absolute;
  top: 19%;
  bottom: 21%;
  width: var(--sw);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stop__card {
  position: relative;
  width: 100%;
  padding: 18px 18px 20px;
  text-align: center;
  border-radius: 22px;
  background: var(--paper-bg);
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px rgba(184, 137, 47, .45);
  opacity: .5;
  transform: scale(.9);
  transition: opacity .5s, transform .5s;
}
.stop__card::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 6px;
  border-radius: 0 0 6px 6px;
  background: repeating-linear-gradient(90deg, var(--garnet) 0 14px, var(--saffron) 14px 22px, var(--emerald) 22px 36px, var(--saffron) 36px 44px);
}
.stop.is-active .stop__card { opacity: 1; transform: scale(1); }
.stop__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-top: 6px;
  border-radius: 50%;
  color: var(--gold-deep);
  background: radial-gradient(circle at 40% 35%, #4a3460, #2a1d40);
  box-shadow: inset 0 0 0 1.5px rgba(212, 166, 74, .6);
}
.stop__icon svg { width: 30px; height: 30px; }
.stop__day { margin: 10px 0 0; font-size: .9rem; color: var(--ink-soft); }
.stop__time { margin: 2px 0 0; font-weight: 700; font-size: 2.3rem; line-height: 1.1; color: var(--gold-deep); }
.stop__title { margin: 4px 0 0; font-family: var(--f-callig); font-weight: 400; font-size: 1.8rem; color: var(--ink); }
.stop__desc { margin: 2px 0 0; font-family: var(--f-classic); font-size: 1.02rem; color: var(--ink-soft); }
.stop__pole { position: relative; flex: 1; width: 2px; min-height: 10px; background: linear-gradient(#d4a64a, #a87a2e); }
.stop__pole::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--garnet);
  box-shadow: 0 0 0 4px rgba(142, 27, 46, .18);
}
.ch5__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cg fill='none' stroke='%23e6bf68' stroke-width='2' stroke-linecap='round' opacity='.35'%3E%3Cpath d='M22 26a6 6 0 0 1 12 0M82 16a6 6 0 0 1 12 0'/%3E%3C/g%3E%3C/svg%3E") 0 18px / 120px 40px repeat-x,
    linear-gradient(180deg, #8a6248 0%, #6a4a3c 40%, #47302e 100%);
  box-shadow: inset 0 2px 0 rgba(241, 212, 140, .45);
}
.ch5__horse { position: absolute; left: 50%; bottom: 8%; z-index: 3; width: min(54vw, 340px); transform: translateX(-50%); }
.ch5__dots { position: absolute; bottom: 2.5%; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.ch5__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(241, 212, 140, .3); transition: background .3s, transform .3s; }
.ch5__dots i.is-on { background: var(--gold-deep); transform: scale(1.3); }

/* Mouvement réduit : programme en liste verticale */
/* le texte reste devant les fleurs de jasmin */
.verse-frame, .scroll-hint, .rsvp, .wishes, .closing { position: relative; z-index: 31; }
.scroll-hint { position: absolute; }

.ch5--static .ch5__stage { height: auto; padding: 120px 20px 40px; }
.ch5--static .ch5__track { position: relative; display: grid; gap: 18px; justify-items: center; }
.ch5--static .stop { position: static; transform: none; }
.ch5--static .stop__pole, .ch5--static .ch5__horse, .ch5--static .ch5__dots, .ch5--static .ch5__ground { display: none; }

/* ═══════════ SECTIONS DE CONTENU (6, 7, final) ═══════════ */
.page-section {
  position: relative;
  padding: 72px 20px 80px;
  background: var(--zellige), var(--ivory);
}
.page-section > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.sec-head { text-align: center; margin-bottom: 28px; }
.sec-lead { margin: 6px 0 0; font-family: var(--f-classic); font-size: 1.15rem; color: var(--ink-soft); }
.card-title { margin: 0 0 8px; font-family: var(--f-classic); font-weight: 700; font-size: 1.2rem; color: var(--gold-deep); }

.map-card {
  padding: 14px 14px 20px;
  border-radius: 24px;
  background: var(--paper-bg);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.map { display: block; width: 100%; height: auto; margin-bottom: 14px; }
.map-roads path { stroke-dashoffset: 0; }
.map-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2s ease-out infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: .5; } to { transform: scale(2.2); opacity: 0; } }

.travel { margin-top: 20px; padding: 20px; border-radius: 22px; background: var(--paper-bg); box-shadow: var(--shadow-card); }
.travel__list { list-style: none; margin: 0; padding: 0; }
.travel__list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(184, 137, 47, .35); }
.travel__list li:last-child { border-bottom: 0; }
.travel__list b { color: var(--gold-deep); }
.travel__note { margin: 10px 0 0; font-size: .85rem; color: var(--ink-soft); }

.info-grid { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 640px) { .info-grid { grid-template-columns: 1fr 1fr; } }
.info-card {
  position: relative;
  padding: 20px 20px 20px 20px;
  padding-inline-start: 70px;
  border-radius: 22px;
  background: var(--paper-bg);
  box-shadow: var(--shadow-card);
}
.info-card p { margin: 0; line-height: 1.8; color: var(--ink-soft); }
.info-card__icon {
  position: absolute;
  inset-inline-start: 16px;
  top: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  color: var(--gold-deep);
  background: radial-gradient(circle at 40% 35%, #4a3460, #2a1d40);
  box-shadow: inset 0 0 0 1.5px rgba(212, 166, 74, .6);
}
.info-card--contact { text-align: start; }
.phone { display: inline-block; margin: 0 0 10px; font-weight: 700; font-size: 1.25rem; color: var(--garnet); text-decoration: none; }
.cal-box { margin-top: 24px; text-align: center; }
.cal-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }

/* Compte à rebours */
.ch7 { overflow: hidden; }
.hoofprints { position: absolute; inset: 0; pointer-events: none; max-width: none; }
.hoof {
  position: absolute;
  width: 30px;
  height: 30px;
  color: rgba(241, 212, 140, .55);
  animation: hoofFade 3.4s ease-out forwards;
}
@keyframes hoofFade {
  0%   { opacity: 0; transform: scale(1.4) rotate(var(--r)); }
  12%  { opacity: 1; transform: scale(1) rotate(var(--r)); }
  100% { opacity: 0; transform: scale(1) rotate(var(--r)); }
}
.countdown { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cd {
  position: relative;
  padding: 18px 4px 14px;
  text-align: center;
  border-radius: 18px;
  background: var(--paper-bg);
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px rgba(184, 137, 47, .4);
  overflow: hidden;
}
.cd::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--garnet) 0 10px, var(--saffron) 10px 16px, var(--emerald) 16px 26px, var(--saffron) 26px 32px);
}
.cd b { display: block; font-size: clamp(1.8rem, 9vw, 2.8rem); line-height: 1.1; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.cd span { font-size: .88rem; color: var(--ink-soft); }
.countdown.is-over { display: none; }
.cd-over { text-align: center; font-family: var(--f-callig); font-size: 2.6rem; margin: 10px 0 0; }
.notify { position: relative; margin-top: 28px; text-align: center; }
.notify__ios, .notify__hint {
  margin: 14px auto 0;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: .92rem;
  line-height: 1.8;
  color: var(--ink-soft);
  background: var(--rose-soft);
}

/* Confirmation de présence */
.rsvp {
  display: grid;
  gap: 16px;
  padding: 26px 20px;
  border-radius: 26px;
  background: var(--paper-bg);
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px rgba(184, 137, 47, .35);
}
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.field > span, .field legend { font-weight: 700; color: var(--ink); padding: 0; }
.field small { font-weight: 400; color: var(--ink-soft); }
.field input[type="text"], .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(212, 166, 74, .4);
  border-radius: 14px;
  background: var(--well);
  font-size: 1rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212, 166, 74, .18); }
.field textarea { resize: vertical; min-height: 90px; font-family: var(--f-classic); font-size: 1.08rem; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span {
  display: block;
  padding: 12px 8px;
  text-align: center;
  border-radius: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--well);
  box-shadow: inset 0 0 0 1.5px rgba(184, 137, 47, .4);
  transition: background .2s, color .2s;
}
.seg input:checked + span { color: #fffaf0; background: linear-gradient(135deg, #d4a64a, #a87a2e); box-shadow: none; }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.stepper { display: inline-flex; align-items: center; gap: 14px; justify-self: start; }
.stepper button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  font-size: 1.4rem;
  color: var(--gold-deep);
  background: var(--well);
  box-shadow: inset 0 0 0 1.5px rgba(212, 166, 74, .6);
}
.stepper output { min-width: 2ch; text-align: center; font-weight: 700; font-size: 1.4rem; }
.rsvp__thanks { margin: 0; text-align: center; font-weight: 700; color: var(--emerald); }

.wishes { margin-top: 28px; }
.wishes .card-title { text-align: center; }
.wishes__list { display: grid; gap: 12px; }
.wish {
  margin: 0;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--paper-bg);
  box-shadow: var(--shadow-card);
}
.wish--mine { background: var(--blush); }
.wish blockquote { margin: 0; font-family: var(--f-classic); font-size: 1.1rem; line-height: 1.8; }
.wish figcaption { margin-top: 6px; font-size: .88rem; font-weight: 700; color: var(--gold-deep); }
.wish figcaption::before { content: '— '; }

.closing { margin-top: 56px; text-align: center; }
.closing__big { margin: 10px 0 0; font-family: var(--f-callig); font-weight: 700; font-size: clamp(2.8rem, 13vw, 4.6rem); line-height: 1.3; }
.closing__names { margin: 4px 0 0; font-family: var(--f-callig); font-size: 1.8rem; color: var(--ink); }
.closing__date { margin: 6px 0 0; color: var(--ink-soft); }

.footer { position: relative; padding: 60px 20px calc(30px + env(safe-area-inset-bottom)); text-align: center; font-size: .88rem; color: var(--ink-soft); background: var(--cream); border-top: 1px solid rgba(212, 166, 74, .25); }

/* ═══════════ CÉLÉBRATION ═══════════ */
.celebrate { position: fixed; inset: 0; z-index: 70; overflow: hidden; }
.celebrate__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #161236 0%, #3a2758 35%, #8a4a68 60%, #d47a5c 78%, #f2b066 100%); }
.celebrate__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, #b9875a, #5a3c34); box-shadow: inset 0 1px 0 rgba(255, 210, 150, .8); }
.celebrate__riders { position: absolute; left: 50%; bottom: 9%; will-change: transform; }
.crider { position: absolute; bottom: 0; }
.celebrate__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celebrate__msg {
  position: absolute;
  top: 14%;
  left: 0;
  right: 0;
  padding: 0 20px;
  text-align: center;
  opacity: 0;
  filter: drop-shadow(0 4px 16px rgba(10, 5, 22, .9));
}
.celebrate__big { margin: 0; font-family: var(--f-callig); font-weight: 700; font-size: clamp(3rem, 15vw, 6rem); line-height: 1.3; }
.celebrate__names { margin: 0 0 18px; font-family: var(--f-callig); font-size: clamp(1.6rem, 7vw, 2.4rem); color: var(--ink); }
.celebrate__flash { position: absolute; inset: 0; background: #fffaf0; opacity: 0; pointer-events: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 90;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  color: #2a1d14;
  background: rgba(246, 236, 216, .96);
  transform: translate(-50%, 30px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ═══════════ FIN DE PAGE ═══════════ */
.verse-frame { z-index: 2; }
.verse-frame .bismillah { color: var(--gold-light); }
.closing { position: relative; padding: 10px 0 30px; }

/* ═══════════ INTERLUDE — LE CHAMP DE FANTASIA ═══════════ */
.arena__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; cursor: pointer; }
.arena__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #1c1640 0%, #43295c 34%, #8e4a68 56%, #d4745a 72%, #f0a25e 84%, #f6c27a 100%); }
.arena__hills, .arena__temples { position: absolute; left: 50%; }
.arena__hills   { bottom: 21%; --h: clamp(110px, 16vh, 200px); height: var(--h); width: calc(var(--h) * 8); }
.arena__temples { bottom: 21.6%; --h: clamp(160px, 26vh, 290px); height: var(--h); width: calc(var(--h) * 6); opacity: .9; }
.arena__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  overflow: hidden;
  background: linear-gradient(180deg, #c58f5c 0%, #9a6a48 35%, #5e3f36 100%);
  box-shadow: inset 0 1px 0 rgba(255, 210, 150, .8);
}
.arena__ground::before {
  content: '';
  position: absolute;
  inset: 0 0 0 -260px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='80'%3E%3Cg fill='none' stroke='%23704a30' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 30l-4-10M20 30l2-12M20 30l6-9'/%3E%3Cpath d='M150 56l-5-12M150 56l1-14M150 56l7-10'/%3E%3C/g%3E%3Cg fill='%237a5238'%3E%3Cellipse cx='80' cy='44' rx='9' ry='3'/%3E%3Cellipse cx='200' cy='68' rx='12' ry='4'/%3E%3C/g%3E%3C/svg%3E") repeat;
  background-size: 260px 80px;
  animation: groundRun .5s linear infinite;
  animation-play-state: paused;
}
.arena__stage.is-running .arena__ground::before { animation-play-state: running; }
.arena__head { position: absolute; top: calc(6% + 34px); left: 0; right: 0; z-index: 7; padding: 0 22px; text-align: center; pointer-events: none; }
.arena__head .chapter-title { text-shadow: 0 2px 18px rgba(10, 5, 22, .95); }
.arena__sub { margin: 6px auto 0; max-width: 30ch; font-family: var(--f-classic); font-size: clamp(1.02rem, 4.4vw, 1.3rem); line-height: 1.7; color: var(--ink); text-shadow: 0 1px 12px rgba(10, 5, 22, 1); }
.arena__line { position: absolute; left: 50%; bottom: 7%; z-index: 5; will-change: transform; }
.arena__fx { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.arena__badge {
  position: absolute;
  left: 50%;
  top: 34%;
  z-index: 8;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 14px 26px 16px;
  border-radius: 22px;
  background: var(--paper-bg);
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px rgba(212, 166, 74, .6), inset 0 0 0 6px rgba(36, 26, 56, .9), inset 0 0 0 7px rgba(212, 166, 74, .3);
  transform: translateX(-50%);
  translate: -50% 0;
  opacity: 0;
  pointer-events: none;
}
.arena__badge { transform: none; }
.arena__badge-time { font-weight: 700; font-size: 2.2rem; line-height: 1.1; color: var(--gold-light); }
.arena__badge-txt { font-weight: 700; font-size: .95rem; white-space: nowrap; color: var(--gold-deep); }
.arena__tap {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  z-index: 8;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 700;
  font-size: .98rem;
  color: var(--ink);
  text-shadow: 0 1px 10px rgba(10, 5, 22, 1);
  opacity: 0;
  pointer-events: none;
}
.arena__tap-ico {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--garnet);
}
.arena__tap-ico::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--garnet);
  animation: tapRing 1.4s ease-out infinite;
}
@keyframes tapRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.arena__flash { position: absolute; inset: 0; z-index: 9; background: radial-gradient(60% 50% at 50% 60%, rgba(255, 250, 230, .95), rgba(255, 220, 160, .4) 55%, rgba(255, 255, 255, 0) 80%); opacity: 0; pointer-events: none; }

/* ═══════════ GUIDAGE ═══════════ */
.progress, .rail, .next-btn { opacity: 0; pointer-events: none; transition: opacity .6s; }
.is-started .progress, .is-started .rail, .is-started .next-btn { opacity: 1; pointer-events: auto; }
.is-celebrating .progress, .is-celebrating .rail, .is-celebrating .next-btn,
.is-last-chapter .next-btn { opacity: 0; pointer-events: none; }

.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 85; height: 3px; background: rgba(184, 137, 47, .15); }
.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #a87a2e, #e6c46e, #8e1b2e);
  transform-origin: 100% 50%;
  transform: scaleX(0);
}

.rail {
  position: fixed;
  left: 6px;
  top: 50%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 2px;
  border-radius: 999px;
  background: rgba(20, 14, 36, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(5, 2, 12, .3);
  transform: translateY(-50%);
}
.is-started .rail { opacity: .45; transition: opacity .5s; }
.is-started .rail.is-awake, .is-started .rail.is-open, .is-started .rail:hover { opacity: 1; }
.rail__dot {
  position: relative;
  width: 16px;
  height: 15px;
  padding: 0;
  border: 0;
  background: none;
}
.rail__dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(241, 212, 140, .3);
  transition: transform .3s, background .3s, border-radius .3s;
}
.rail__dot.is-done::before { background: var(--gold); }
.rail__dot.is-active::before {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 0;
  clip-path: var(--star8);
  background: var(--garnet);
  transform: scale(1.35);
}
.rail__label {
  position: absolute;
  left: 24px;
  top: 50%;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 700;
  color: #2a1d14;
  background: rgba(246, 236, 216, .96);
  transform: translate(-6px, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.rail.is-open .rail__label { opacity: 1; transform: translate(0, -50%); }
.rail.is-open .rail__dot.is-active .rail__label { background: var(--gold-light); }

.next-btn {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px 11px 16px;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: .98rem;
  color: #fffaf0;
  background: linear-gradient(135deg, #c99a3c, #a87a2e 60%, #8a6220);
  box-shadow: 0 10px 24px rgba(120, 84, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 240, 200, .35);
  translate: -50% 0;
}
.next-btn svg { width: 20px; height: 20px; animation: hintBob 1.6s ease-in-out infinite; }
.is-gliding .next-btn { background: linear-gradient(135deg, #a8293d, var(--garnet)); }
.next-btn__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  padding: 7px 12px;
  border-radius: 10px;
  white-space: nowrap;
  font-size: .82rem;
  color: #2a1d14;
  background: rgba(246, 236, 216, .96);
  translate: -50% 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s, translate .4s;
}
.next-btn__tip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: rgba(246, 236, 216, .96);
}
.next-btn.is-nudge { animation: nudge 1.2s ease-in-out 3; }
.next-btn.is-nudge .next-btn__tip { opacity: 1; translate: -50% 0; }
@keyframes nudge {
  0%, 100% { box-shadow: 0 10px 24px rgba(120, 84, 40, .35), 0 0 0 0 rgba(184, 137, 47, .55); }
  50%      { box-shadow: 0 10px 24px rgba(120, 84, 40, .35), 0 0 0 14px rgba(184, 137, 47, 0); }
}

.scene-hint {
  position: absolute;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 700;
  font-size: .88rem;
  color: var(--ink);
  background: rgba(28, 20, 46, .86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(5, 2, 12, .35), inset 0 0 0 1px rgba(212, 166, 74, .4);
  translate: -50% 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s, translate .5s;
}
.scene-hint.is-on { opacity: 1; translate: -50% 0; }
.scene-hint__ico { display: grid; width: 22px; height: 22px; color: var(--gold); animation: swipeUp 1.6s ease-in-out infinite; }
.scene-hint__ico svg { width: 100%; height: 100%; }
@keyframes swipeUp { 0% { transform: translateY(5px); opacity: .4; } 50% { transform: translateY(-3px); opacity: 1; } 100% { transform: translateY(-5px); opacity: .4; } }

.speed-note {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  z-index: 86;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: 16px;
  font-weight: 500;
  font-size: .9rem;
  line-height: 1.6;
  color: #2a1d14;
  background: rgba(246, 236, 216, .96);
  box-shadow: 0 12px 30px rgba(59, 42, 30, .3);
  translate: -50% -140%;
  transition: translate .5s cubic-bezier(.2, .9, .3, 1.2);
}
.speed-note.is-on { translate: -50% 0; }
.speed-note__ico { flex: none; width: 26px; height: 26px; color: #8a6220; }
.speed-note__ico svg { width: 100%; height: 100%; }

.coach {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 75;
  display: flex;
  justify-content: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.coach__card {
  width: min(100%, 440px);
  padding: 22px 20px 18px;
  border-radius: 26px;
  text-align: center;
  background: var(--paper-bg);
  box-shadow: 0 -10px 40px rgba(5, 2, 12, .5), inset 0 0 0 1.5px rgba(212, 166, 74, .55), inset 0 0 0 7px rgba(36, 26, 56, .9), inset 0 0 0 8px rgba(212, 166, 74, .25);
  pointer-events: auto;
}
.coach__title { margin: 2px 0 12px; font-family: var(--f-callig); font-weight: 400; font-size: 1.9rem; color: var(--ink); }
.coach__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; text-align: start; }
.coach__list li { display: flex; align-items: center; gap: 12px; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }
.coach__list b { color: var(--ink); }
.coach__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--gold-deep);
  background: radial-gradient(circle at 40% 35%, #4a3460, #2a1d40);
  box-shadow: inset 0 0 0 1.5px rgba(212, 166, 74, .6);
}
.coach__ico svg { width: 24px; height: 24px; }
.coach__ico--swipe svg { animation: swipeUp 1.6s ease-in-out infinite; }

.curtain { position: fixed; inset: 0; z-index: 90; background: var(--zellige), var(--ivory); opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Sans animation (CDN indisponible) ---------- */
.no-anim .bismillah, .no-anim .verse .w, .no-anim .verse-ref, .no-anim .scroll-hint,
.no-anim .ch2__label, .no-anim .ch2__nameReveal, .no-anim .ch2__flourish,
.no-anim .ch3__label, .no-anim .card3d { opacity: 1; }
.no-anim .henna-name { fill-opacity: 1; stroke-dashoffset: 0; }
.no-anim .ch2__title, .no-anim .card3d__door, .no-anim .card3d__seal { display: none; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
  .ch2__title { display: none; }
  .jasmine { display: none; }
}

/* ═══════════ SOIRÉE : étoiles, guirlandes de lanternes ═══════════ */
.field input::placeholder, .field textarea::placeholder { color: rgba(205, 189, 162, .55); }
.stars { position: absolute; inset: 0 0 40% 0; pointer-events: none; }
.stars i { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; animation: twinkle 4s ease-in-out infinite alternate; }
.stars i:nth-child(2) { animation-duration: 5.5s; animation-delay: -2s; }
.stars i:nth-child(3) { animation-duration: 3.2s; animation-delay: -1s; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
.garland { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 3; pointer-events: none; }
.garland::before {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  top: -40px;
  height: 80px;
  border-bottom: 1.5px solid rgba(212, 166, 74, .55);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.g-lamp {
  position: absolute;
  top: 0;
  width: var(--w);
  transform-origin: 50% 0;
  animation: lanternSwing var(--d) ease-in-out var(--dl) infinite alternate;
}
.g-lamp svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 12px rgba(255, 190, 100, .55)); }
.page-section { padding-top: 120px; }
.prologue .garland, .scene--verse .garland { z-index: 1; }
.map-coords { margin: 10px 0 0; font-size: .82rem; letter-spacing: .03em; color: var(--ink-soft); }
.map-card .btn + .btn { margin-top: 10px; }
.info-card--safe { box-shadow: var(--shadow-card), inset 0 0 0 1.5px rgba(44, 138, 104, .55); }
.info-card--safe .info-card__icon { color: #7fd1ad; }

/* ═══════════ FINITIONS (audit) ═══════════ */
.page-section > :not(.garland):not(.hoofprints), .verse-frame { position: relative; z-index: 2; }
/* l'indication de défilement est remplacée par le bouton « تابعوا » */
.scroll-hint { display: none; }
.travel__list b { white-space: nowrap; }
.travel__list li { align-items: baseline; border-bottom-color: rgba(212, 166, 74, .25); }

/* pages d'informations : bouton « تابعوا » réduit à une pastille dans le coin */
.is-reading .next-btn {
  left: 14px;
  translate: 0 0;
  width: 48px;
  height: 48px;
  padding: 0;
  justify-content: center;
}
.is-reading .next-btn__txt { display: none; }
.is-reading .next-btn__tip { left: 0; translate: 0 6px; }
.is-reading .next-btn.is-nudge .next-btn__tip { translate: 0 0; }
.is-reading .next-btn__tip::after { left: 24px; }

/* carte des rappels */
.notify-card {
  margin-top: 28px;
  padding: 22px 20px 20px;
  border-radius: 24px;
  text-align: start;
  background: var(--paper-bg);
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px rgba(212, 166, 74, .45);
}
.notify-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.notify-card__head .card-title { margin: 0 0 2px; }
.notify-card__bell, .ask__bell {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--gold-light);
  background: radial-gradient(circle at 40% 35%, #c13a4f, #7a1528);
  box-shadow: 0 0 0 4px rgba(176, 40, 63, .2);
  animation: bellRing 3.2s ease-in-out infinite;
}
.notify-card__bell svg, .ask__bell svg { width: 24px; height: 24px; }
@keyframes bellRing {
  0%, 82%, 100% { rotate: 0deg; }
  86% { rotate: 14deg; } 90% { rotate: -12deg; } 94% { rotate: 8deg; } 97% { rotate: -4deg; }
}
.notify-card__lead { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--ink-soft); }
.notify-card__list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.notify-card__list li {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  padding-inline-start: 36px;
  border-radius: 14px;
  background: var(--well);
  position: relative;
}
.notify-card__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 14px;
  top: 16px;
  width: 10px;
  height: 10px;
  clip-path: var(--star8);
  background: var(--gold);
}
.notify-card__list b { font-size: .95rem; color: var(--ink); }
.notify-card__list span { font-size: .86rem; color: var(--ink-soft); }
.notify-card .btn svg { width: 20px; height: 20px; }
.notify-card__status { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.8; color: var(--ink-soft); background: var(--well); }
.notify-card__status.is-on { color: #9fe0c2; background: rgba(44, 138, 104, .16); box-shadow: inset 0 0 0 1px rgba(44, 138, 104, .45); }
.notify-card .notify__ios, .notify-card .notify__hint { max-width: none; margin: 12px 0 0; background: var(--well); }
.notify-card .cal-menu { justify-content: flex-start; }

/* demande douce avant l'autorisation */
.ask {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10, 6, 20, 0);
  transition: background .35s;
}
.ask.is-open { background: rgba(10, 6, 20, .55); }
.ask__card {
  width: min(100%, 420px);
  padding: 24px 20px 18px;
  border-radius: 26px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
  background: var(--paper-bg);
  box-shadow: 0 -10px 40px rgba(5, 2, 12, .5), inset 0 0 0 1.5px rgba(212, 166, 74, .55);
  transform: translateY(110%);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.1);
}
.ask.is-open .ask__card { transform: translateY(0); }
.ask__title { margin: 4px 0 0; font-family: var(--f-callig); font-weight: 400; font-size: 1.9rem; color: var(--ink); }
.ask__text { margin: 0 0 6px; font-size: .95rem; line-height: 1.8; color: var(--ink-soft); }
.ask__note { margin: 2px 0 0; font-size: .8rem; color: var(--ink-soft); opacity: .8; }