/* ==========================================================================
   Dounya & Zaki — huit jours
   Un seul thème clair par choix : chaque chapitre a sa propre lumière, du jour à la nuit.
   ========================================================================== */

:root {
  --bg: #f6f0e4;
  --fg: #2a1d2c;
  --ac: #86631b;
  --or: #b58f45;
  --or-clair: #e6c982;
  --vin: #6d1c38;

  --display: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --texte: "EB Garamond", Georgia, serif;
  --label: "Jost", system-ui, -apple-system, sans-serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --ar: "Amiri", "Geeza Pro", "Noto Naskh Arabic", serif;
  --coran: "Amiri Quran", "Amiri", "Geeza Pro", serif;
  --ruqaa: "Aref Ruqaa", "Amiri", serif;

  --marge: clamp(20px, 5vw, 72px);
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --ressort: cubic-bezier(.34, 1.56, .64, 1);
  --hover-ring: color-mix(in srgb, var(--ac) 45%, transparent);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ac) 55%, transparent) transparent;
}
html.ferme, html.ferme body { overflow: hidden; height: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--texte);
  font-size: clamp(18px, 1.05vw + 14px, 22px);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "liga", "dlig", "onum";
}

h1, h2, p, ol, blockquote, figure { margin: 0; padding: 0; }
ol { list-style: none; }
cite { font-style: normal; }
sup { font-size: .62em; line-height: 0; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
a { color: inherit; text-decoration: none; }
canvas, svg { display: block; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 4px;
  border-radius: 4px;
}
::selection { background: color-mix(in srgb, var(--ac) 28%, transparent); }

#sonde-s, #sonde-l {
  position: fixed; left: -9999px; top: 0; width: 1px;
  visibility: hidden; pointer-events: none;
}
#sonde-s { height: 100vh; height: 100svh; }
#sonde-l { height: 100vh; height: 100lvh; }

/* ---------- Couches fixes ---------- */
#fond {
  position: fixed; inset: 0; z-index: 0;
  background: var(--bg);
  height: 100vh; height: 100lvh;
}
#gl {
  position: fixed; left: 0; top: 0; z-index: 1;
  width: 100%; height: 100vh; height: 100lvh;
  pointer-events: none;
}
html.ferme #gl { z-index: 41; }
#fil {
  position: fixed; left: 0; top: 0; z-index: 2;
  width: 100%; height: 100vh; height: 100lvh;
  pointer-events: none;
}
main { position: relative; z-index: 3; }
#fx {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: 100vw; height: 100vh; height: 100lvh;
  pointer-events: none;
}
#grain {
  position: fixed; inset: -2px; z-index: 59;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: multiply;
  background-size: 180px 180px;
}
@media (hover: none) {
  /* Le mélange plein écran coûte cher sur téléphone, pour un effet à peine visible */
  #grain { mix-blend-mode: normal; opacity: .028; }
}

/* ---------- Chargement ---------- */
#chargeur {
  position: fixed; inset: 0; z-index: 50;
  height: 100vh; height: 100lvh;
  background: #160e1d;
  color: #f4ead8;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  will-change: transform;
}
.charge-jour {
  display: flex; align-items: baseline; gap: .28em;
  font-family: var(--display);
  overflow: hidden;
}
.charge-chiffre {
  display: inline-block;
  font-size: clamp(68px, 12vw, 132px);
  line-height: 1;
  font-weight: 300;
  font-variant-numeric: lining-nums;
  min-width: 1.1em;
  text-align: right;
  color: var(--or-clair);
}
.charge-mois {
  font-size: clamp(26px, 4vw, 44px);
  font-style: italic;
  font-weight: 300;
  min-width: 4.4em;
}
.charge-perles { display: flex; gap: 12px; align-items: center; }
.charge-perles i {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid rgba(230, 201, 130, .5);
  transition: background .3s, transform .5s var(--ressort), border-color .3s;
}
.charge-perles i.ev { width: 9px; height: 9px; }
.charge-perles i.on { background: var(--or-clair); border-color: var(--or-clair); transform: scale(1.25); }
.charge-noms {
  font-family: var(--script);
  font-size: 30px;
  line-height: 1;
  color: rgba(244, 234, 216, .72);
}
.charge-noms i { font-family: var(--display); font-size: .7em; padding: 0 .1em; }

/* ---------- Le seuil ---------- */
#seuil {
  position: fixed; inset: 0; z-index: 40;
  height: 100vh; height: 100lvh;
  background:
    radial-gradient(120% 90% at 50% 38%, #33203f 0%, #1d1228 52%, #0f0916 100%);
}
#seuil::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 45% at 50% 90%, rgba(158, 106, 58, .16), transparent 70%);
}
#seuil-ui {
  position: fixed; inset: 0; z-index: 42;
  height: 100vh; height: 100svh;
  color: #f4ead8;
  pointer-events: none;
}
.seuil-salut {
  position: absolute; left: 0; right: 0;
  top: max(calc(env(safe-area-inset-top) + 7svh), 44px);
  text-align: center;
  font-family: var(--script);
  font-size: clamp(38px, 6.4vw, 72px);
  line-height: 1.15;
  padding: 0 var(--marge);
  color: #f3e3c4;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .45);
  visibility: hidden;
}
.seuil-bas {
  position: absolute; left: 0; right: 0;
  bottom: max(calc(env(safe-area-inset-bottom) + 6svh), 34px);
  text-align: center;
  padding: 0 var(--marge);
  font-family: var(--label);
  font-weight: 300;
  letter-spacing: .05em;
  font-size: clamp(13px, 1.1vw + 9px, 16px);
  line-height: 1.5;
}
.seuil-bas p { visibility: hidden; }
#astuce-sceau { color: #f4ead8; }
.seuil-son { margin-top: 6px; color: rgba(244, 234, 216, .58); font-size: .88em; }

#sceau-btn {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  border-radius: 50%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  visibility: hidden;
  will-change: transform;
}
#sceau-btn svg {
  position: absolute; left: -24%; top: -24%;
  width: 148%; height: 148%;
  transform: rotate(-90deg);
  overflow: visible;
  pointer-events: none;
}
.anneau-fond { fill: none; stroke: rgba(240, 216, 152, .22); stroke-width: 1.2; }
.anneau {
  fill: none; stroke: #f0d898; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 7px rgba(255, 224, 150, .75));
}
.env-dom-sceau { display: none; }
#sceau-btn::after {
  content: ""; position: absolute; inset: -6%;
  border-radius: 50%;
  border: 1px solid rgba(240, 216, 152, .5);
  animation: pulse-sceau 2.4s var(--sortie) infinite;
}
@keyframes pulse-sceau {
  0% { transform: scale(.9); opacity: .8; }
  100% { transform: scale(1.5); opacity: 0; }
}
#eclat {
  position: fixed; inset: 0; z-index: 45;
  height: 100vh; height: 100lvh;
  background: radial-gradient(70% 60% at 50% 45%, #fffdf4, #fff5dc 60%, #f6f0e4);
  opacity: 0;
  pointer-events: none;
}

/* Sans WebGL : un sceau en CSS, une enveloppe simple */
.sans-gl #seuil { background: linear-gradient(180deg, #2a1a33, #150d1c); }
.sans-gl #sceau-btn {
  width: 148px; height: 148px;
  left: calc(50% - 74px); top: calc(50% - 74px);
  background: radial-gradient(circle at 38% 30%, #a23b57, #6d1c38 55%, #3b0d20);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .5);
}
.sans-gl .env-dom-sceau {
  display: grid; place-items: center; grid-auto-flow: column;
  position: absolute; inset: 0;
  font-family: var(--display); font-size: 40px; font-style: italic; color: #e6c982;
}
.sans-gl .env-dom-sceau i { font-size: .62em; padding: 0 2px; }

/* ---------- Barre ---------- */
#barre {
  position: fixed; left: 0; right: 0; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 14px) var(--marge) 14px;
  color: var(--fg);
  pointer-events: none;
  visibility: hidden;
}
html.ferme #barre, html.ferme #rail { display: none; }
#barre { transition: transform .7s var(--sortie); }
#barre.cache { transform: translate3d(0, -110%, 0); }
#barre.au-seuil #barre-jour { opacity: 0 !important; }
#barre-jour { transition: opacity .5s; }
#barre > * { pointer-events: auto; }
#logo {
  font-family: var(--display);
  font-size: 23px;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  grid-auto-flow: column;
  height: 44px;
  min-width: 44px;
}
#logo i { font-size: .72em; padding: 0 1px; color: var(--ac); }
#barre-jour {
  position: relative;
  overflow: hidden;
  height: 1.5em;
  min-width: 170px;
  text-align: center;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.5;
  pointer-events: none !important;
}
#barre-jour span { position: absolute; left: 0; right: 0; top: 0; display: block; white-space: nowrap; }
#son { width: 44px; height: 44px; display: grid; place-items: center; }
.eq { display: flex; align-items: center; gap: 2.5px; height: 16px; }
.eq i {
  display: block; width: 2px; height: 100%;
  background: currentColor;
  transform-origin: 50% 50%;
  animation: eq 1.1s ease-in-out infinite;
}
.eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .85s; }
.eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.3s; }
.eq i:nth-child(4) { animation-delay: -.15s; animation-duration: .95s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
#son.muet .eq i { animation-play-state: paused; transform: scaleY(.14); }

/* Le rail des huit jours */
#rail {
  position: fixed; z-index: 20;
  right: max(14px, calc(var(--marge) * .36));
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;
  color: var(--fg);
}
#rail.visible { opacity: 1; pointer-events: auto; }
@media (min-width: 900px) and (pointer: fine) { #rail { display: flex; } }
.perle-rail { display: grid; place-items: center; width: 24px; height: 24px; }
.perle-rail i {
  display: block; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .3;
  transition: transform .5s var(--ressort), opacity .3s, background .3s;
}
.perle-rail.ev i { width: 6px; height: 6px; opacity: .65; }
.perle-rail.passe i { opacity: .85; background: var(--ac); }
.perle-rail.actif i { transform: scale(2); opacity: 1; background: var(--ac); }
.perle-rail.ev:hover i { transform: scale(2.2); opacity: 1; }

/* ---------- Curseur ---------- */
#curseur { display: none; }
.curseur-perso #curseur {
  display: block;
  position: fixed; left: 0; top: 0; z-index: 70;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.curseur-perso #curseur.present { opacity: 1; }
@media (pointer: fine) {
  html.curseur-perso, html.curseur-perso a, html.curseur-perso button,
  html.curseur-perso [role="button"], html.curseur-perso canvas { cursor: none; }
}
.c-point {
  position: absolute; left: -2.5px; top: -2.5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--fg);
  will-change: transform;
}
.c-anneau {
  position: absolute; left: -19px; top: -19px;
  width: 38px; height: 38px;
  will-change: transform;
}
.c-anneau::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 45%, transparent);
  transition: transform .45s var(--sortie), background .3s, border-color .3s;
}
#curseur.survol .c-anneau::before {
  transform: scale(1.5);
  border-color: var(--ac);
  background: color-mix(in srgb, var(--ac) 12%, transparent);
}
#curseur.avec-label .c-anneau::before {
  transform: scale(2.3);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#curseur.appuye .c-anneau::before { transform: scale(.72); }
#c-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--label);
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: .08em;
  color: var(--fg);
  opacity: 0;
  transition: opacity .25s;
}
#curseur.avec-label #c-label { opacity: 1; }

/* ---------- Éléments communs ---------- */
.etiquette {
  font-family: var(--label);
  font-size: clamp(11px, .4vw + 9.5px, 13.5px);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ac);
  line-height: 1.4;
}
.titre {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(50px, 8.6vw, 124px);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--fg);
}
.titre em { font-style: italic; color: var(--ac); font-weight: 400; }
.titre-centre { text-align: center; }
.mm { display: inline-block; white-space: nowrap; overflow: clip; padding: .14em .05em .2em; margin: -.14em -.05em -.2em; vertical-align: top; }
.mc { display: inline-block; will-change: transform; }
.recit {
  font-family: var(--texte);
  font-size: clamp(20px, 1.5vw + 14px, 30px);
  line-height: 1.42;
  max-width: 30em;
}
.recit-ar {
  font-family: var(--ar);
  font-size: clamp(23px, 1.3vw + 18px, 35px);
  line-height: 1.95;
  text-align: center;
  align-self: center;
  max-width: 21em;
  color: var(--fg);
}
.recit-ar b { font-weight: 400; color: var(--ac); white-space: nowrap; }
.recit-ar .lie { white-space: nowrap; }
.mot-ar { font-family: var(--ar); font-size: 1.08em; color: var(--ac); white-space: nowrap; }
.astuce {
  font-family: var(--label);
  font-size: clamp(12px, .3vw + 11px, 14px);
  letter-spacing: .08em;
  font-weight: 400;
  color: var(--ac);
  text-align: center;
  line-height: 1.4;
  min-height: 1.4em;
}
.citation {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.coran, .hadith { text-wrap: balance; }
.coran {
  font-family: var(--coran);
  font-size: clamp(28px, 2.4vw + 18px, 50px);
  line-height: 2;
  color: var(--fg);
}
.hadith {
  font-family: var(--ar);
  font-size: clamp(27px, 2.2vw + 18px, 46px);
  line-height: 1.75;
  color: var(--fg);
}
.ma, .mv { display: inline-block; }
.sens {
  font-family: var(--texte);
  font-style: italic;
  font-size: clamp(17px, .6vw + 15px, 22px);
  line-height: 1.45;
  margin-top: 16px;
  max-width: 34em;
  margin-inline: auto;
}
.citation cite, .verset-sens cite, .porte-sens cite {
  display: block;
  margin-top: 12px;
  font-family: var(--label);
  font-size: clamp(11px, .3vw + 10px, 13px);
  letter-spacing: .12em;
  color: var(--ac);
  font-weight: 400;
}
.lien {
  display: inline-block;
  position: relative;
  padding: 12px 4px;
  font-family: var(--label);
  font-size: clamp(12.5px, .3vw + 11.5px, 14.5px);
  letter-spacing: .08em;
  color: var(--fg);
  min-height: 44px;
}
.lien::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 9px;
  height: 1px; background: currentColor;
  transform-origin: right;
  transition: transform .5s var(--sortie);
}
@media (hover: hover) {
  .lien:hover::after { transform: scaleX(.25); }
}

/* Les sections */
.sec { padding: clamp(90px, 15svh, 180px) var(--marge); position: relative; }
.colle-sec { position: relative; }
.colle {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
}
.chapitre {
  position: relative;
  padding: clamp(84px, 13svh, 170px) var(--marge);
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 4svh, 46px);
  align-items: stretch;
}
.ch-tete {
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 3vw, 44px);
  flex-wrap: nowrap;
}
.ch-tete.inverse { flex-direction: row-reverse; text-align: right; }
.ch-num {
  --r: 0;
  flex: none;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(118px, 25vw, 340px);
  line-height: .78;
  letter-spacing: -.045em;
  font-variant-numeric: lining-nums;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ac) 62%, transparent);
  background-image: linear-gradient(0deg, var(--ac) 0 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: 0 calc((1 - var(--r)) * -100%);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  padding: .06em .05em .02em;
  will-change: transform;
}
.ch-titres { min-width: 0; padding-bottom: clamp(4px, 1.2vw, 18px); }
@media (min-width: 900px) {
  .ch-tete.inverse ~ .recit { align-self: flex-end; text-align: right; }
}
.ch-titres .titre { font-size: clamp(42px, 7vw, 104px); margin-top: 10px; }

/* ---------- Accueil ---------- */
.accueil { position: relative; height: 240vh; height: 240svh; }
.accueil-colle {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  display: grid;
  place-items: center;
}
.accueil-decor {
  position: absolute; inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
#vignes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tige { fill: none; stroke: #a57e30; stroke-width: 1.3; }
.petale, .vfeuille { fill: rgba(246, 240, 228, .92); stroke: #a57e30; stroke-width: 1.05; stroke-linejoin: round; }
.nervure { fill: none; stroke: #a57e30; stroke-width: .7; opacity: .7; }
.pistil { fill: #a57e30; }

.lanterne-hero { position: absolute; }
.lanterne { transform-origin: 50% 0; will-change: transform; --l-corps: rgba(246, 240, 228, .28); --l-etoile: rgba(165, 126, 48, .55); --l-halo: 0; }
.lanterne.allumee { --l-corps: #ffdc92; --l-etoile: #fff6d6; --l-halo: 1; }
.l-svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.l-halo {
  position: absolute; left: 50%; top: 66%;
  width: 240%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 214, 132, .7), rgba(255, 200, 110, .18) 55%, transparent);
  opacity: var(--l-halo);
  transition: opacity 1.1s var(--sortie);
  pointer-events: none;
}
.f-chaine { fill: none; stroke: var(--l-trait, #94702a); stroke-width: 1.4; }
.f-trait { fill: none; stroke: var(--l-trait, #94702a); stroke-width: 1.4; }
.f-trait.fin { stroke-width: .8; }
.f-metal { fill: var(--l-metal, #a57e30); }
.f-corps { fill: var(--l-corps); stroke: var(--l-trait, #94702a); stroke-width: 1.2; transition: fill .9s; }
.f-etoile { fill: var(--l-etoile); transition: fill .9s; }

.accueil-contenu {
  position: relative; z-index: 2;
  --fuite: 1;
  width: 100%;
  text-align: center;
  padding: 0 var(--marge);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bismillah {
  font-family: var(--coran);
  font-size: clamp(17px, 1.1vw + 13px, 26px);
  line-height: 2;
  color: #5d4415;
  opacity: var(--fuite);
  margin-bottom: clamp(0px, 1.5svh, 12px);
}
.bismillah span { display: inline-block; }
.dounya-hero {
  font-family: var(--ruqaa);
  font-size: min(46vw, 27svh);
  line-height: 1.22;
  color: #6d1c38;
  opacity: var(--fuite);
  text-shadow: 0 0 26px rgba(255, 249, 236, .9), 0 0 6px rgba(255, 249, 236, .7);
  will-change: transform;
}
.dounya-hero span {
  --e: 1;
  display: inline-block;
  padding-inline: .08em;
  clip-path: inset(-20% -6% -20% calc((1 - var(--e)) * 112% - 6%));
}
.noms {
  font-weight: 400;
  font-family: var(--script);
  color: #2a1d2c;
  font-size: min(12.5vw, 8.5svh);
  line-height: 1.05;
  text-shadow: 0 0 18px rgba(255, 249, 236, .95), 0 0 5px rgba(255, 249, 236, .8);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: .03em;
  margin-top: clamp(0px, 1svh, 10px);
  will-change: opacity;
}
.nom { display: block; will-change: transform; white-space: nowrap; }
.lm { display: inline-block; overflow: clip; overflow-clip-margin: .46em; padding: .38em .26em .4em; margin: -.38em -.26em -.4em; vertical-align: top; }
.lc { display: inline-block; will-change: transform; }
.esper {
  font-family: var(--display);
  font-style: italic;
  font-size: .42em;
  line-height: .9;
  color: #86631b;
  display: block;
  margin: 0 .05em;
}
.accueil-titre {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(19px, 1.2vw + 14px, 30px);
  line-height: 1.2;
  margin-top: clamp(8px, 1.6svh, 16px);
  color: #2a1d2c;
  opacity: var(--fuite);
  text-shadow: 0 0 14px rgba(255, 249, 236, .95), 0 0 4px rgba(255, 249, 236, .85);
}
.accueil-titre span { display: inline-block; }
.accueil-meta { display: none; }
.badge {
  position: absolute; z-index: 3;
  left: 50%;
  margin-left: -46px;
  bottom: max(calc(env(safe-area-inset-bottom) + 3svh), 16px);
  width: 92px; height: 92px;
  display: grid; place-items: center;
  color: #2a1d2c;
  will-change: transform;
}
.badge::before {
  content: ""; position: absolute; inset: 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 245, 234, .94) 60%, rgba(250, 245, 234, .7));
  box-shadow: 0 0 0 1px rgba(165, 126, 48, .45);
}
.badge-fleche { position: relative; }
.badge svg { position: absolute; inset: 0; overflow: visible; will-change: transform; }
.badge text {
  font-family: var(--label);
  font-size: 10.5px;
  letter-spacing: .165em;
  fill: currentColor;
}
.badge-fleche {
  font-family: var(--label);
  font-size: 17px;
  line-height: 1;
  animation: fleche 1.9s ease-in-out infinite;
}
@keyframes fleche { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }

@media (min-aspect-ratio: 95/100) {
  .dounya-hero { font-size: min(21vw, 33svh); }
  .noms { font-size: min(7.5vw, 13svh); }
  .accueil-meta {
    display: flex; flex-direction: column;
    position: absolute; bottom: 30px; z-index: 3;
    font-family: var(--label);
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase;
    line-height: 1.7;
    color: #2a1d2c;
    opacity: 1;
  }
  .accueil-meta.g { left: var(--marge); }
  .accueil-meta.d { right: var(--marge); text-align: right; }
  .badge { width: 104px; height: 104px; margin-left: -52px; bottom: 22px; }
}

/* ---------- La date ---------- */
.sec-date { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sec-date .titre { margin-top: 10px; }
.chapeau {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(21px, 1vw + 17px, 30px);
  margin-top: 12px;
  color: var(--fg);
}
.cases {
  display: grid;
  grid-template-columns: .82fr 1.42fr 1fr;
  gap: clamp(8px, 2vw, 26px);
  width: min(100%, 780px, 118svh);
  margin-top: clamp(28px, 5svh, 50px);
  perspective: 900px;
}
.case-bloc { min-width: 0; }
.case {
  position: relative;
  aspect-ratio: 1 / 1.24;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #fbf7ee;
  box-shadow:
    inset 0 0 0 1px rgba(134, 99, 27, .4),
    0 16px 34px -18px rgba(70, 44, 12, .6);
  transform-style: preserve-3d;
  will-change: transform;
}
.case-bloc:nth-child(2) .case { aspect-ratio: 1.42 / 1.48; }
.case-bloc:nth-child(1) .case { aspect-ratio: .82 / 1.48; }
.case-bloc:nth-child(3) .case { aspect-ratio: 1 / 1.48; }
.case strong {
  font-family: var(--display);
  font-weight: 500;
  color: var(--vin);
  line-height: 1;
  display: block;
  font-variant-numeric: lining-nums;
}
.case .grand { font-size: clamp(66px, 13vw, 150px); }
.case .moyen { font-size: clamp(19px, 4.5vw, 54px); font-style: italic; }
.case .an { font-size: clamp(25px, 5.8vw, 66px); }
.case canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
.case-bloc small {
  display: block;
  margin-top: 10px;
  font-family: var(--label);
  font-size: clamp(11px, .3vw + 10px, 13px);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ac);
}
#reveler { margin-top: 14px; }
.apres-date {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s var(--sortie);
  width: 100%;
}
.apres-date.visible { grid-template-rows: 1fr; }
.apres-date > div { overflow: hidden; min-height: 0; }
.date-phrase {
  padding-top: clamp(24px, 4svh, 40px);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw + 16px, 50px);
  line-height: 1.12;
  max-width: 19em;
  margin-inline: auto;
  text-wrap: balance;
}
.date-hegire {
  margin-top: 16px;
  padding-bottom: 6px;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.date-hegire span { font-family: var(--ar); font-size: clamp(23px, 1vw + 19px, 32px); color: var(--ac); line-height: 1.5; }
.date-hegire small { font-family: var(--label); font-size: 11.5px; letter-spacing: .1em; color: var(--ac); opacity: .85; }

/* ---------- Le verset ---------- */
.colle-verset { height: 300vh; height: 300svh; }
.colle-verset .colle { display: grid; place-items: center; padding: 76px var(--marge) 24px; }
.verset-arche {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.verset-arche path {
  fill: none; stroke: #e4c585; stroke-width: 1.3;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  opacity: .5;
}
.verset-arche path.fin { stroke-width: .7; opacity: .34; }
.verset-bloc {
  position: relative;
  width: min(100%, 62rem);
  text-align: center;
  padding-top: 7svh;
}
.coran-grand {
  font-size: min(clamp(25px, 2.8vw + 15.5px, 56px), 5.6svh);
  line-height: 2.02;
}
.coran-grand b { font-weight: 400; color: #e4c585; }
.verset-sens { margin-top: 8px; }
.verset-sens .sens { margin-top: 0; font-size: clamp(15.5px, .6vw + 13.5px, 21px); }

/* ---------- Huit jours ---------- */
.sec-huit { padding-bottom: clamp(50px, 8svh, 90px); }
.huit-titre {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(100px, 25.5vw, 400px);
  line-height: .82;
  letter-spacing: -.04em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .2em;
  padding-bottom: .14em;
}
.huit-titre em { font-style: italic; color: var(--ac); }
.huit-sous {
  margin-top: clamp(22px, 4svh, 46px);
  font-size: clamp(20px, 1.5vw + 14px, 30px);
  line-height: 1.34;
  max-width: 24em;
}
.calendrier {
  margin-top: clamp(36px, 7svh, 76px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--fg) 26%, transparent);
}
@media (min-width: 900px) { .calendrier { grid-template-columns: repeat(8, 1fr); } }
.calendrier li {
  border-right: 1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  min-width: 0;
}
.jour {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  height: 100%;
  min-height: clamp(112px, 12.6vw, 180px);
  padding: 10px;
  overflow: hidden;
}
.jour b {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 66px);
  line-height: 1;
  font-variant-numeric: lining-nums;
  position: relative;
  transition: transform .6s var(--sortie);
}
.jour small {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  position: relative;
  opacity: .78;
}
.jour em {
  font-family: var(--display);
  font-size: clamp(15px, 1.2vw + 8px, 21px);
  line-height: 1.04;
  margin-top: auto;
  padding-top: 6px;
  position: relative;
  color: var(--ac);
}
span.jour b, span.jour small { opacity: .34; }
button.jour::before {
  content: ""; position: absolute; inset: 0;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .6s var(--sortie);
}
@media (hover: hover) {
  button.jour:hover::before { transform: scaleY(1); }
  button.jour:hover b, button.jour:hover small, button.jour:hover em { color: var(--bg); }
  button.jour:hover b { transform: translateY(-4px); }
}

/* ---------- Bandeau ---------- */
.bandeau {
  overflow: clip;
  border-top: 1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  padding: 16px 0;
  white-space: nowrap;
}
.bandeau-piste { display: inline-flex; align-items: baseline; gap: .55em; will-change: transform; }
.bandeau-piste span {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 76px);
  line-height: 1.1;
  font-variant-numeric: lining-nums;
}
.bandeau-piste em {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(34px, 5vw, 76px);
  line-height: 1.1;
  color: var(--ac);
}
.bandeau-piste i {
  font-style: normal;
  font-size: clamp(14px, 1.6vw, 24px);
  color: var(--ac);
  padding: 0 .5em;
}

/* ---------- 29 octobre : la porte ---------- */
.porte-scene {
  --fente: 0;
  --lumiere: 0;
  position: relative;
  align-self: center;
  width: min(100%, 460px, calc(78svh * 3 / 4.25));
  aspect-ratio: 3 / 4.25;
  margin-top: clamp(4px, 2svh, 20px);
  perspective: 1200px;
  outline-offset: 12px;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  --arc: polygon(0 100%, 0 38%, 1.2% 33.7%, 3.1% 29.5%, 5.8% 25.3%, 9.3% 21.2%, 13.5% 17.2%, 18.5% 13.3%, 24.1% 9.6%, 30.2% 6.1%, 36.7% 2.9%, 43.2% .9%, 50% 0, 56.8% .9%, 63.3% 2.9%, 69.8% 6.1%, 75.9% 9.6%, 81.5% 13.3%, 86.5% 17.2%, 90.7% 21.2%, 94.2% 25.3%, 96.9% 29.5%, 98.8% 33.7%, 100% 38%, 100% 100%);
}
.porte-cadre {
  position: absolute; inset: -14px -14px -2px;
  background: linear-gradient(170deg, #cda75e, #8b6a2c 45%, #c49c4c 75%, #705320);
  clip-path: var(--arc);
  filter: drop-shadow(0 24px 34px rgba(42, 26, 10, .34));
}
.porte-cadre::after {
  content: ""; position: absolute; inset: 3px 3px 0;
  background: #3a2615;
  clip-path: var(--arc);
}
.porte-interieur {
  position: absolute; inset: 0;
  clip-path: var(--arc);
  overflow: hidden;
  background:
    radial-gradient(70% 62% at 50% 62%, #fff8e0 0%, #fbe0a4 44%, #d59a49 100%);
  display: grid;
  place-items: center;
}
.porte-rayons {
  position: absolute; left: 50%; top: 62%;
  width: 190%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(calc(var(--lumiere) * 26deg));
  opacity: calc(var(--lumiere) * .85);
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .54) 0 7deg, transparent 7deg 19deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 15%, transparent 72%);
}
.porte-hadith {
  position: relative;
  font-family: var(--ar);
  font-weight: 700;
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.5;
  padding: 0 7%;
  text-align: center;
  color: #4b2513;
  text-wrap: balance;
  visibility: hidden;
  margin-top: 18%;
}
.vantaux {
  position: absolute; inset: 0;
  clip-path: var(--arc);
  transform-style: preserve-3d;
}
.vantail {
  position: absolute; top: 0; bottom: 0; width: 50.2%;
  background-color: #512f18;
  background-image:
    var(--tuile),
    linear-gradient(180deg, rgba(255, 215, 150, .12), rgba(0, 0, 0, .22)),
    linear-gradient(90deg, #6a4122, #48290f);
  background-size: 90px 90px, auto, auto;
  background-position: center top;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 2px rgba(231, 197, 126, .28), inset 0 0 30px rgba(0, 0, 0, .34);
  will-change: transform;
}
.vantaux { --tuile: none; }
.vantail.g { left: 0; transform-origin: 0 50%; }
.vantail.d { right: 0; transform-origin: 100% 50%; }
.clous {
  position: absolute; inset: 40% 7% 5%;
  background-image: radial-gradient(circle at 40% 35%, #f0d48f 0 2.4px, #765722 2.8px 3.4px, transparent 3.8px);
  background-size: 33% 18%;
  opacity: .66;
}
/* La lumière qui filtre entre les vantaux après chaque coup */
.vantaux::after {
  content: ""; position: absolute; left: 50%; top: 10%; bottom: 0; width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, #ffe9b4 26%, #ffe9b4);
  opacity: calc(var(--fente, 0) * .92);
  box-shadow: 0 0 calc(var(--fente, 0) * 16px) calc(var(--fente, 0) * 3px) rgba(255, 224, 150, .75);
}
.porte-scene { --fente-v: var(--fente); }
.heurtoir {
  position: absolute; left: 50%; top: 53%;
  width: 40px; height: 56px;
  margin-left: -20px;
  transform-origin: 50% 0;
  z-index: 3;
  will-change: transform;
}
.heurtoir::before {
  content: ""; position: absolute; left: 50%; top: -5px;
  width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7e0a4, #8b6a2c 62%, #4b3711);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .55);
}
.heurtoir i {
  position: absolute; left: 50%; top: 5px;
  width: 36px; height: 42px; margin-left: -18px;
  border: 5px solid #c49c4c;
  border-top-color: #f0d48f;
  border-radius: 50% 50% 46% 46%;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .45), inset 0 1px 3px rgba(0, 0, 0, .34);
}
#porte-astuce { margin-top: -10px; }
.porte-sens {
  text-align: center;
  visibility: hidden;
  transform: translateY(14px);
  margin-top: -6px;
}
.porte-sens .sens { margin-top: 0; font-size: clamp(21px, 1.1vw + 17px, 32px); }

/* ---------- 31 octobre : le oui ---------- */
.oui {
  --p: 0;
  width: min(100%, 640px);
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.6svh, 22px);
}
.oui-mot {
  position: relative;
  width: 100%;
  text-align: center;
  font-family: var(--ruqaa);
  font-size: clamp(130px, 40vw, 290px);
  line-height: 1.34;
  padding-block: 2px;
}
.oui-fantome { display: block; color: color-mix(in srgb, var(--fg) 12%, transparent); }
.oui-encre {
  position: absolute; left: 0; right: 0; top: 2px;
  display: block;
  color: #5c1a31;
  clip-path: inset(-20% -5% -20% calc((1 - var(--p)) * 110%));
  will-change: clip-path, transform;
}
.oui.fini .oui-encre { text-shadow: 0 2px 18px rgba(255, 244, 196, .54); }
.oui-piste {
  position: relative;
  width: min(100%, 440px);
  height: 62px;
  border-radius: 62px;
  background: rgba(255, 248, 226, .4);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 50%, transparent), inset 0 2px 7px rgba(58, 34, 6, .13);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.oui-trace {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: calc(62px + (100% - 62px) * var(--p));
  background: linear-gradient(270deg, rgba(92, 58, 11, .3), rgba(92, 58, 11, .06));
  border-radius: 62px;
}
.oui-libelle {
  position: relative;
  font-family: var(--label);
  font-size: clamp(12px, .3vw + 11px, 14px);
  letter-spacing: .05em;
  line-height: 1.2;
  padding: 0 72px;
  text-align: center;
}
.oui-pouce {
  position: absolute; right: 5px; top: 5px;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--label);
  font-size: 20px;
  color: #fff2d0;
  background: radial-gradient(circle at 38% 30%, #a23b57, #6d1c38 58%, #3b0d20);
  box-shadow: 0 7px 16px -3px rgba(50, 12, 26, .62), inset 0 1px 1px rgba(255, 255, 255, .34);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
}
.oui-pouce:active { scale: .94; }
.oui.fini .oui-libelle { color: #29190e; font-weight: 500; }
.oui.fini .oui-pouce span { display: none; }
.oui.fini .oui-pouce::after { content: "✓"; font-size: 20px; }

/* ---------- 1er novembre : la nuit ---------- */
.colle-nuit { height: 320vh; height: 320svh; }
.nuit { --lit: 0; color: #f3edf9; }
.nuit-lueur {
  position: absolute; inset: 0;
  background: radial-gradient(90% 66% at 50% 20%, rgba(252, 196, 105, calc(.24 * var(--lit))), transparent 72%);
  transition: background .4s;
}
.nuit-lune {
  position: absolute;
  right: clamp(26px, 13vw, 260px);
  top: clamp(52px, 9svh, 96px);
  width: clamp(112px, 15vw, 196px);
  aspect-ratio: 1;
  filter: drop-shadow(0 0 22px rgba(255, 238, 195, .3));
  opacity: .96;
}
.nuit-lune canvas { width: 100%; height: 100%; }
.lanternes { position: absolute; inset: 0; pointer-events: none; }
.lanterne-nuit {
  position: absolute; top: 0;
  width: 0; height: 0;
  pointer-events: none;
  --l-trait: #d9b76e;
  --l-metal: #c49c4c;
}
.l-fil {
  position: absolute; left: -.5px; top: 0; width: 1px;
  background: linear-gradient(180deg, rgba(217, 183, 110, .25), rgba(217, 183, 110, .7));
}
.l-corps {
  position: absolute;
  left: 0;
  margin-left: calc(var(--w, 0px) * -.5);
  translate: -50% 0;
  pointer-events: auto;
  cursor: pointer;
}
.lanterne-nuit .lanterne { --l-corps: rgba(243, 237, 249, .1); --l-etoile: rgba(217, 183, 110, .55); }
.lanterne-nuit .lanterne.allumee { --l-corps: #ffdc92; --l-etoile: #fff6d6; }
.nuit-contenu {
  position: absolute; left: 0; right: 0; bottom: max(calc(env(safe-area-inset-bottom) + 3.2svh), 16px);
  padding: 0 var(--marge);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.nuit-contenu .etiquette { color: #f2d08c; }
.titre-nuit {
  color: #f3edf9;
  font-size: clamp(56px, 11vw, 150px);
  margin-top: 8px;
}
.nuit-contenu .recit { margin-top: 8px; font-size: clamp(19px, 1.2vw + 14px, 28px); }
.nuit-contenu .astuce { margin-top: 8px; color: #f2d08c; }
.citation-nuit { margin-top: 8px; }
.citation-nuit .coran { color: #f3edf9; font-size: clamp(25px, 2vw + 18px, 42px); line-height: 1.9; }
.citation-nuit .sens { margin-top: 0; font-size: clamp(15.5px, .5vw + 14px, 20px); }
.citation-nuit cite { color: #f2d08c; margin-top: 4px; }
.nuit-note {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(243, 237, 249, .68);
  margin-top: 6px;
}

/* ---------- 4 novembre : l'acte ---------- */
.acte {
  position: relative;
  align-self: center;
  width: min(100%, 680px);
  padding: clamp(22px, 4.5vw, 46px);
  background:
    linear-gradient(180deg, #fffdf6, #f8f0dd);
  border-radius: 4px;
  box-shadow:
    0 30px 60px -32px rgba(60, 42, 14, .55),
    0 2px 4px rgba(60, 42, 14, .1),
    inset 0 0 0 1px rgba(134, 99, 27, .24);
  overflow: hidden;
}
.acte::before {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid rgba(134, 99, 27, .34);
  border-radius: 2px;
  pointer-events: none;
}
.acte-tete {
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(18px, 1vw + 15px, 26px);
  color: #2a1d2c;
}
.acte-signatures {
  margin-top: clamp(16px, 3vw, 30px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 3vw, 34px);
}
.sig { position: relative; min-width: 0; }
.sig > small {
  display: block;
  border-top: 1px solid rgba(42, 29, 44, .5);
  padding-top: 6px;
  text-align: center;
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2a1d2c;
}
.sig-zaki {
  --e: 0;
  display: grid;
  place-items: center;
  height: clamp(92px, 16vw, 130px);
  font-family: var(--script);
  font-size: clamp(44px, 10vw, 70px);
  line-height: 1;
  color: #201732;
  clip-path: inset(-20% calc((1 - var(--e)) * 100%) -20% -5%);
}
.sig-dounya canvas {
  display: block;
  width: 100%;
  height: clamp(92px, 16vw, 130px);
  touch-action: none;
  cursor: crosshair;
  background:
    repeating-linear-gradient(0deg, transparent 0 19px, rgba(134, 99, 27, .07) 19px 20px);
  border-radius: 3px 3px 0 0;
}
.sig-astuce {
  position: absolute; left: 0; right: 0; top: 38%;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(17px, 1vw + 14px, 22px);
  color: #86631b;
  pointer-events: none;
  animation: invite 2.2s ease-in-out infinite;
}
@keyframes invite { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
.tampon {
  position: absolute;
  right: clamp(8px, 4vw, 34px);
  bottom: clamp(26px, 6vw, 44px);
  width: clamp(92px, 20vw, 136px);
  aspect-ratio: 1;
  color: #8d1f3d;
  visibility: hidden;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.tampon svg { width: 100%; height: 100%; overflow: visible; }
.tampon-cercle { font-family: var(--label); font-size: 13.5px; letter-spacing: .08em; fill: currentColor; font-weight: 500; }
.tampon-mot { font-family: var(--ruqaa); font-size: 48px; fill: currentColor; font-weight: 700; }
#citation-fil .coran { font-size: clamp(32px, 3vw + 21px, 60px); }
.note-fil {
  text-align: center;
  font-size: clamp(17px, .7vw + 15px, 23px);
  line-height: 1.4;
  max-width: 28em;
  margin-inline: auto;
  margin-top: -8px;
}
.recit-bague { margin-top: clamp(20px, 5svh, 70px); align-self: center; text-align: center; }
.ecrin {
  position: relative;
  align-self: center;
  width: min(100%, 620px);
  aspect-ratio: 1 / .96;
  max-height: 74svh;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ecrin-repli { width: 62%; height: auto; }
.avec-gl .ecrin-repli { display: none; }
#ecrin-astuce { margin-top: -10px; }
.recit-dej { align-self: center; text-align: center; margin-top: 8px; }

/* ---------- 5 novembre : le sucré ---------- */
.chapitre-sucre { padding-top: clamp(190px, 34svh, 340px); }
#miel {
  position: absolute; left: 0; top: 0; width: 100%;
  height: clamp(190px, 38svh, 400px);
  pointer-events: none;
}
.assiette {
  position: relative;
  align-self: center;
  width: min(92%, 500px, 82svh);
  aspect-ratio: 1;
  margin-top: 8px;
  display: grid;
  place-items: center;
}
.assiette-fond {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fffdf8 0 56%, #f0e6d6 58%, #fbf6ec 62%, #fffdf8 74%, #e4d6bf 96%, #d9c7a9 100%);
  box-shadow: 0 30px 40px -18px rgba(90, 30, 40, .42), inset 0 -4px 8px rgba(120, 90, 50, .16);
}
.assiette-fond::after {
  content: ""; position: absolute; inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(181, 143, 69, .7);
}
.assiette-mot {
  position: relative;
  font-family: var(--script);
  color: #a03b52;
  font-size: clamp(38px, 11vw, 62px);
  line-height: 1.1;
  text-align: center;
  padding: 0 12%;
  opacity: 0;
  transition: opacity .7s .1s;
}
.assiette.mange .assiette-mot { opacity: 1; }
#biscuit {
  position: absolute; left: 12%; top: 12%;
  width: 76%; height: 76%;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  border-radius: 50%;
}
#biscuit-astuce { margin-top: -6px; }

/* ---------- En chiffres ---------- */
.colle-bilan { height: 420vh; height: 420svh; }
.colle-bilan .colle { display: flex; align-items: center; }
.bilan-piste {
  display: flex;
  height: 100%;
  align-items: center;
  width: max-content;
  will-change: transform;
  padding-left: 12vw;
  padding-right: 18vw;
}
.bilan-item {
  --k: 0;
  flex: none;
  width: min(78vw, 660px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 6vw;
  opacity: calc(.24 + var(--k) * .76);
}
.bilan-item b {
  font-family: var(--display);
  font-weight: 300;
  font-size: min(58vw, 58svh);
  line-height: .78;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums;
  color: #e4c585;
  transform: translateX(calc((1 - var(--k)) * 8vw));
}
.bilan-item strong {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 66px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.1;
  margin-top: 16px;
}
.bilan-item span {
  font-size: clamp(18px, 1.1vw + 14px, 26px);
  line-height: 1.3;
}
.bilan-jauge {
  position: absolute;
  left: var(--marge); right: var(--marge);
  bottom: max(calc(env(safe-area-inset-bottom) + 34px), 34px);
  height: 1px;
  background: rgba(244, 234, 216, .24);
}
.bilan-jauge i {
  position: absolute; inset: -.5px 0;
  background: #e4c585;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- Pour toi ---------- */
.sec-lettre { display: flex; flex-direction: column; align-items: center; }
.titre-lettre { text-align: center; font-size: clamp(54px, 10.5vw, 150px); }
.lettre-note {
  margin-top: 14px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 1vw + 16px, 28px);
  text-align: center;
}
.citation-dounya { margin-top: clamp(24px, 5svh, 54px); }
.dounya-mot {
  --e: 0;
  font-family: var(--ruqaa);
  font-size: clamp(100px, 32vw, 320px);
  line-height: 1.32;
  text-align: center;
  color: var(--ac);
  clip-path: inset(-10% -3% -10% calc((1 - var(--e)) * 103%));
}
.hadith-grand { font-size: clamp(29px, 2.4vw + 21px, 52px); line-height: 1.8; margin-top: 4px; }
.dounya-marque {
  --m: 0;
  color: var(--ac);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 92%;
  background-size: calc(var(--m) * 100%) 1.5px;
}
.pile {
  width: min(100%, 760px);
  margin-top: clamp(50px, 10svh, 110px);
  position: relative;
  padding-bottom: 6svh;
}
.feuille {
  --i: 0;
  position: sticky;
  top: calc(13svh + var(--i) * 18px);
  min-height: 56svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: clamp(46px, 8vw, 70px) clamp(18px, 5vw, 56px) clamp(28px, 4vw, 48px);
  margin-bottom: 26svh;
  background:
    linear-gradient(180deg, #fffdf8, #fbf5ea);
  border-radius: 6px;
  box-shadow:
    0 30px 60px -30px rgba(44, 32, 54, .5),
    0 1px 3px rgba(44, 32, 54, .14),
    inset 0 0 0 1px rgba(113, 83, 26, .22);
  transform-origin: 50% 0;
  color: #2c2036;
  will-change: transform;
}
.feuille:last-child { margin-bottom: 0; }
.feuille-num {
  position: absolute; left: 50%; top: 14px;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 18px;
  font-style: italic;
  color: #71531a;
  line-height: 1;
}
.feuille .citation { will-change: transform; }
.feuille .coran { color: inherit; font-size: clamp(26px, 2vw + 18px, 40px); }
.feuille .hadith { color: inherit; font-size: clamp(26px, 2.2vw + 17px, 42px); }
.amin {
  position: relative;
  margin-top: 8px;
  min-width: 132px;
  min-height: 62px;
  padding: 2px 30px;
  border-radius: 62px;
  font-family: var(--ruqaa);
  font-size: 32px;
  line-height: 1.5;
  color: #fbf1d8;
  background: linear-gradient(135deg, #6d1c38, #3b0d20);
  box-shadow: 0 16px 28px -12px rgba(59, 13, 32, .72);
  transition: scale .45s var(--ressort), box-shadow .5s, background .6s;
  will-change: transform;
}
.amin:active { scale: .93; }
.amin span { display: block; position: relative; }
.amin.dit {
  background: linear-gradient(135deg, #cfa95c, #8f6a21);
  box-shadow: 0 0 44px rgba(214, 170, 79, .7), 0 16px 28px -12px rgba(100, 72, 13, .7);
}
@media (hover: hover) {
  .amin:hover { scale: 1.06; }
}

/* ---------- Fin ---------- */
.sec-fin {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-bottom: calc(env(safe-area-inset-bottom) + 44px);
}
.compteur {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: clamp(10px, 3.4vw, 54px);
  margin-top: 18px;
}
.c-groupe { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.c-rang { display: flex; }
.c-fen {
  display: block;
  height: 1em;
  font-size: clamp(38px, 8.6vw, 108px);
  line-height: 1;
  font-family: var(--display);
  font-weight: 300;
  overflow: clip;
  font-variant-numeric: lining-nums tabular-nums;
  width: .56em;
}
.c-col {
  display: flex;
  flex-direction: column;
  transition: transform .75s var(--sortie);
  will-change: transform;
}
.c-col span { display: block; height: 1em; text-align: center; }
.c-groupe small {
  font-family: var(--label);
  font-size: clamp(9.5px, .3vw + 8.5px, 12.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac);
}
.fin-sceau {
  width: clamp(138px, 24vw, 212px);
  aspect-ratio: 1;
  margin-top: clamp(50px, 10svh, 100px);
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55));
}
.fin-sceau svg { width: 100%; height: 100%; overflow: visible; }
.fin-sceau-txt { font-family: var(--display); font-style: italic; font-size: 42px; fill: #e6c982; font-weight: 500; }
.fin-signature {
  --e: 0;
  font-family: var(--script);
  font-size: clamp(66px, 12vw, 140px);
  line-height: 1.2;
  margin-top: clamp(20px, 4svh, 38px);
  color: #f4ead8;
  clip-path: inset(-15% calc((1 - var(--e)) * 104%) -15% -5%);
}
.fin-signature-ar { font-family: var(--ruqaa); font-size: clamp(28px, 2vw + 20px, 44px); color: #e4c585; line-height: 1.6; }
.lien-fin { margin-top: clamp(26px, 5svh, 50px); color: #f4ead8; }
.fin-note {
  margin-top: clamp(26px, 5svh, 50px);
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .05em;
  line-height: 1.5;
  max-width: 34em;
  color: rgba(244, 234, 216, .68);
}
.fin-sourire {
  margin-top: 22px;
  font-family: var(--display);
  font-size: 56px;
  line-height: 1;
  color: #e4c585;
  cursor: pointer;
  padding: 6px 12px;
  -webkit-user-select: none;
  user-select: none;
  visibility: hidden;
}

/* ---------- Écrans très bas : téléphone à l'horizontale ---------- */
@media (max-height: 500px) {
  .seuil-salut { font-size: 26px; top: 6px; }
  .seuil-bas { bottom: 6px; font-size: 12px; }
  .seuil-son { display: none; }
  .bismillah, .badge { display: none; }
  .dounya-hero { font-size: 36svh; }
  .noms { font-size: 15svh; margin-top: 0; }
  .accueil-meta { bottom: 8px; font-size: 10px; }
  .accueil-titre { font-size: 16px; margin-top: 2px; }
  .titre-nuit { font-size: 42px; margin-top: 0; }
  .nuit-contenu .recit { font-size: 16px; margin-top: 0; }
  .nuit-note, .citation-nuit cite, .nuit-contenu .astuce { display: none; }
  .citation-nuit { margin-top: 0; }
  .citation-nuit .coran { font-size: 20px; }
  .citation-nuit .sens { font-size: 14px; }
  .feuille { top: 8px; min-height: 0; padding-top: 34px; margin-bottom: 12svh; }
  .bilan-item b { font-size: 50svh; }
}

/* ---------- Sans animation ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fin-sourire, .porte-hadith, .porte-sens { visibility: visible; }
  .colle-verset, .colle-bilan, .colle-nuit { height: auto; }
  .colle-verset .colle, .colle-nuit .colle { position: relative; height: auto; min-height: 100svh; overflow: visible; }
  .colle-bilan .colle { position: relative; display: block; height: auto; overflow: visible; }
  .bilan-piste { flex-wrap: wrap; width: 100%; height: auto; padding: 14svh var(--marge); gap: 9svh 0; }
  .bilan-item { --k: 1; width: min(100%, 460px); padding-right: 4vw; }
  .bilan-item b { font-size: min(40vw, 30svh); }
  .bilan-jauge { display: none; }
  .verset-arche path { stroke-dashoffset: 0; }
  .nuit-contenu { position: relative; padding-top: 58svh; padding-bottom: 40px; }
  .ch-num { --r: 1; }
  .fin-signature, .sig-zaki, .dounya-mot { --e: 1; }
  .dounya-marque { --m: 1; }
}

/* Sans WebGL ni animation, tout reste lisible */
.degrade #chargeur, .degrade #seuil, .degrade #seuil-ui, .degrade #eclat,
.degrade #gl, .degrade #fil, .degrade #fx, .degrade #curseur, .degrade #rail { display: none !important; }
.degrade #barre { visibility: visible; }
.degrade .fin-sourire, .degrade .porte-hadith, .degrade .porte-sens { visibility: visible; transform: none; }
.degrade .accueil, .degrade .colle-sec { height: auto; }
.degrade .accueil-colle, .degrade .colle { position: relative; height: auto; min-height: 100svh; overflow: visible; }
.degrade .colle-bilan .colle { display: block; }
.degrade .bilan-piste { flex-wrap: wrap; width: 100%; height: auto; padding: 14svh var(--marge); gap: 9svh 0; }
.degrade .bilan-item { --k: 1; width: min(100%, 460px); padding-right: 4vw; }
.degrade .bilan-item b { font-size: min(40vw, 30svh); }
.degrade .bilan-jauge { display: none; }
.degrade .ch-num { --r: 1; }
.degrade .fin-signature, .degrade .sig-zaki, .degrade .dounya-mot { --e: 1; }
.degrade .case canvas, .degrade .vantaux { display: none; }
.degrade .apres-date { grid-template-rows: 1fr; }
.degrade .assiette-mot { opacity: 1; }
.degrade #biscuit { display: none; }
.degrade .nuit-contenu { position: relative; padding-top: 40svh; padding-bottom: 40px; }
.degrade .nuit { color: #f3edf9; background: #0b0a1e; }
.degrade .colle-verset, .degrade .colle-bilan { background: #180f21; color: #f4ead8; }
.degrade .sec-fin { background: #120c1d; color: #f4ead8; }