/* =========================================================
   Citations Ahl Allah — feuille de style
   Design : émeraude & or, spirale de perles, lumière lente.
   ========================================================= */

/* ---------- 1. Jetons de couleur & thèmes ----------
   Trois ambiances. « Plein jour » est celle du stand : sur un écran
   exposé à la lumière du jour, la vitre renvoie l'ambiance comme un
   miroir et un fond sombre se change en surface réfléchissante. Un fond
   clair, lui, écrase le reflet par sa propre luminosité.
   Les deux ambiances sombres restent pour l'intérieur et le soir.
   ---------------------------------------------------- */
:root {
  /* Thème « Nuit & or » */
  --bg-deep:      #04090f;
  --bg-mid:       #071522;
  --bg-soft:      #0b2130;
  --ink:          #f3e9da;
  --ink-soft:     rgba(243, 233, 218, .72);
  --ink-faint:    rgba(243, 233, 218, .62);
  --gold:         #d9b26a;
  --gold-bright:  #f2dcab;
  --gold-deep:    #a97f3d;
  --accent:       #57b9ae;
  --pattern:      rgba(217, 178, 106, .16);
  --card-bg:      rgba(255, 255, 255, .028);
  --card-line:    rgba(217, 178, 106, .38);
  --halo-a:       rgba(87, 185, 174, .30);
  --halo-b:       rgba(217, 178, 106, .26);
  --vignette:     rgba(2, 6, 10, .85);
  --grain-op:     .035;
  --shadow:       0 40px 90px -40px rgba(0, 0, 0, .95);

  /* Le cœur de la spirale : lumineux sur fond sombre, encre sur fond clair */
  --core:         var(--gold-bright);
  --core-glow:    0 0 14px var(--gold);
  --quote-weight: 300;
  --hairline:     var(--card-line);   /* filets décoratifs de l'emblème */
  --heart-1:      .55;                /* halo central : opacité des deux arrêts */
  --heart-2:      .16;
  --bead-floor:   .28;                /* perles de la spirale : plancher… */
  --bead-range:   .55;                /* …et amplitude vers le cœur */

  /* Typographie */
  --font-display: "Amiri", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-quote:   "Amiri", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui:      "Amiri", ui-serif, Georgia, serif;
  --font-sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rythme */
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* « Plein jour » — pour un hall traversé de soleil de midi à 19 h.
   Vert très pâle plutôt que blanc : assez lumineux pour écraser le
   reflet de la verrière, assez coloré pour rester de la même famille
   que l'Émeraude. Encre presque noire, or ramené à un bronze foncé. */
[data-theme="jour"] {
  --bg-deep:      #eef4f0;
  --bg-mid:       #e2ece7;
  --bg-soft:      #ffffff;
  --ink:          #0a1c17;
  --ink-soft:     #2e463f;
  --ink-faint:    #4f645c;
  --gold:         #6f4d13;
  --gold-bright:  #543a0d;
  --gold-deep:    #a5843f;
  --accent:       #0d5f52;
  --pattern:      rgba(13, 95, 82, .17);
  --card-bg:      #ffffff;
  --card-line:    rgba(13, 95, 82, .62);
  --halo-a:       rgba(13, 95, 82, .10);
  --halo-b:       rgba(165, 132, 63, .13);
  --vignette:     rgba(16, 60, 50, .10);
  --grain-op:     0;
  --shadow:       0 26px 60px -38px rgba(10, 60, 50, .45);

  --core:         #0a4c41;
  --core-glow:    0 0 0 transparent;
  --quote-weight: 400;   /* le 300 s'évapore sous l'éblouissement */
  --hairline:     rgba(13, 95, 82, .44);
  --heart-1:      .14;   /* sur fond clair, un halo doré vire vite à la tache */
  --heart-2:      .05;
  /* Sous le reflet, tout ce qui est translucide s'efface en premier :
     les perles de la spirale gardent un plancher d'opacité élevé. */
  --bead-floor:   .74;
  --bead-range:   .26;
}

[data-theme="emeraude"] {
  --bg-deep:      #071c18;
  --bg-mid:       #0d2f29;
  --bg-soft:      #124137;
  --ink:          #eaf6f0;
  --ink-soft:     rgba(234, 246, 240, .72);
  --ink-faint:    rgba(234, 246, 240, .62);
  --gold:         #cbb27a;
  --gold-bright:  #f0e2bc;
  --gold-deep:    #8d7743;
  --accent:       #46c9a5;
  --pattern:      rgba(203, 178, 122, .17);
  --card-bg:      rgba(255, 255, 255, .03);
  --card-line:    rgba(203, 178, 122, .40);
  --halo-a:       rgba(70, 201, 165, .26);
  --halo-b:       rgba(203, 178, 122, .22);
  --vignette:     rgba(4, 16, 14, .48);
  --hairline:     rgba(203, 178, 122, .48);
  /* Quand la lumière tape sur l'écran, ce qui est translucide s'efface
     en premier : les perles pâles de la spirale gardent du corps. */
  --bead-floor:   .42;
  --bead-range:   .45;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg-deep);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .8s var(--ease), color .8s var(--ease);
}

button { font: inherit; color: inherit; cursor: pointer; }

kbd {
  font-family: var(--font-sans);
  font-size: .8em;
  padding: .12em .45em;
  border-radius: .35em;
  border: 1px solid var(--card-line);
  background: var(--card-bg);
}

::selection { background: var(--gold); color: var(--bg-deep); }

/* ---------- 3. Décor de fond ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.backdrop::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(58% 48% at 50% 8%,  var(--bg-soft) 0%, transparent 62%),
    radial-gradient(80% 70% at 50% 110%, var(--bg-mid) 0%, transparent 70%),
    var(--bg-deep);
  transition: background .8s var(--ease);
}

.pattern {
  position: absolute;
  top: -160px; left: -160px;
  width: calc(100% + 320px);
  height: calc(100% + 320px);
  color: var(--pattern);
  /* Pas de dérive : translater cette couche pleine page obligeait le
     navigateur à redessiner tout le motif à chaque image (9 img/s en
     1920×1080) pour un déplacement de 160 px en 90 s, invisible. Le
     mouvement du fond, c'est le tissage qui le porte. */
}

/* Un dégradé radial est déjà flou : lui superposer un filter: blur()
   coûtait une re-rastérisation à chaque image, pour un résultat
   visuellement identique. */
.glow {
  position: absolute;
  border-radius: 50%;
  opacity: .85;
  mix-blend-mode: screen;
}
.glow-a {
  width: 46vmax; height: 46vmax;
  top: -14vmax; left: 50%;
  background: radial-gradient(circle, var(--halo-b) 0%, transparent 62%);
  transform: translateX(-50%);
  animation: breathe 14s ease-in-out infinite;
}
.glow-b {
  width: 52vmax; height: 52vmax;
  bottom: -24vmax; left: 12%;
  background: radial-gradient(circle, var(--halo-a) 0%, transparent 62%);
  animation: breathe 19s ease-in-out infinite reverse;
}
[data-theme="jour"] .glow { mix-blend-mode: multiply; opacity: .55; }

@keyframes breathe {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: .95; transform: translateX(-50%) scale(1.14); }
}
.glow-b { animation-name: breathe-b; }
@keyframes breathe-b {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .8;  transform: scale(1.16); }
}

.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 48%, var(--vignette) 118%);
}

.grain {
  position: absolute; inset: 0;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. Scène & écrans ---------- */
.stage {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--pad);
}

.screen {
  grid-area: 1 / 1;
  width: min(1100px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(.985);
  transition: opacity .6s var(--ease), transform .7s var(--ease), visibility .6s;
  pointer-events: none;
}

.screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Sortie légèrement différente pour donner un sens au mouvement */
.screen--home:not(.is-active) { transform: translateY(-14px) scale(.97); }

/* ---------- 5. Accueil ---------- */
.kicker {
  margin: 0 0 clamp(.5rem, 2vh, 1.4rem);
  font-family: var(--font-sans);
  font-size: clamp(.62rem, 1.5vw, .74rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: 1.1em;
}
.kicker::before, .kicker::after {
  content: "";
  width: clamp(28px, 8vw, 74px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-deep), transparent);
}

.title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .02em;
  font-size: clamp(2.4rem, 8.2vw, 5.4rem);
  display: flex;
  flex-direction: column;
}
.title-line--accent {
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-bright) 42%, var(--gold) 70%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-family: var(--font-quote);
  font-weight: 700;
}

.lede {
  margin: clamp(.6rem, 2vh, 1.1rem) 0 clamp(1.4rem, 5vh, 3rem);
  font-size: clamp(1rem, 2.4vw, 1.45rem);
  color: var(--ink-soft);
  font-style: italic;
  letter-spacing: .01em;
}

/* --- L'emblème : la spirale du dhikr, l'objet du désir --- */
.emblem-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(210px, 37vmin, 360px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--ease);
}
.emblem-btn > * { grid-area: 1 / 1; }
.emblem-btn:hover, .emblem-btn:focus-visible { transform: scale(1.045); }
.emblem-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 18px; }
.emblem-btn:active { transform: scale(.97); }

.emblem-halo {
  width: 190%; height: 190%;
  justify-self: center; align-self: center;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo-b) 0%, transparent 58%);
  animation: pulse 5.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

.emblem-ring {
  width: 128%; height: 128%;
  justify-self: center; align-self: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  animation: ripple 5.5s var(--ease) infinite;
}
@keyframes ripple {
  0%   { transform: scale(.78); opacity: 0; }
  35%  { opacity: .75; }
  100% { transform: scale(1.25); opacity: 0; }
}

.emblem-art { width: 100%; height: 100%; overflow: visible; }
.emblem-art .em-thin  { fill: none; stroke: var(--hairline); stroke-width: .9; }
.emblem-art .em-line  { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linejoin: round; }
.emblem-art .em-core  { fill: var(--core); filter: drop-shadow(var(--core-glow)); }
.emblem-art .em-beads circle,
.emblem-art .em-spiral circle { fill: var(--gold); }
/* --t : position de la perle le long de la spirale, posée par le script */
.emblem-art .em-spiral circle { opacity: calc(var(--bead-floor) + var(--t) * var(--bead-range)); }
.em-heart-1 { stop-opacity: var(--heart-1); }
.em-heart-2 { stop-opacity: var(--heart-2); }

/* La couronne tourne lentement dans un sens, la spirale plus vite dans
   l'autre : le centre semble aspirer le regard. */
.em-outer  { transform-origin: 100px 100px; animation: spin 120s linear infinite; }
.em-spiral { transform-origin: 100px 100px; animation: spin 52s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.emblem-btn:hover .em-spiral { animation-duration: 18s; }

.emblem-cta {
  align-self: end;
  transform: translateY(2.4em);
  font-family: var(--font-sans);
  font-size: clamp(.6rem, 1.5vw, .72rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  opacity: .9;
}

/* Tirage en cours : la spirale s'emballe et le cœur s'embrase */
.emblem-btn.is-drawing { transform: scale(1.08); }
.emblem-btn.is-drawing .em-outer  { animation-duration: 3s; }
.emblem-btn.is-drawing .em-spiral { animation-duration: .8s; }
.emblem-btn.is-drawing .emblem-halo { animation: flare .85s var(--ease) forwards; }
@keyframes flare {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(2.1); }
}

/* --- Zone d'invitation : le rappel et l'aperçu s'y relaient --- */
.invite {
  position: relative;
  width: min(60ch, 92%);
  margin: clamp(2.6rem, 7.5vh, 4.4rem) 0 0;
  min-height: 5.4em;
}
.invite > * {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  margin: 0;
}

.hint {
  font-size: clamp(.85rem, 2vw, 1rem);
  color: var(--ink-faint);
  letter-spacing: .04em;
  transition: opacity .8s var(--ease), color .8s var(--ease);
}
.screen--home.is-teasing .hint { opacity: 0; }

/* ---------- 5 bis. Animations de veille ----------
   L'écran passe l'essentiel de la journée sans personne devant lui :
   il doit rester vivant et attirer l'œil de loin, sans jamais s'agiter.
   Tout est en transform/opacity pour tenir une journée sans échauffer
   la machine du stand.
   ------------------------------------------------- */

/* Chapelet de lumière — les perles s'allument l'une après l'autre,
   comme un tasbih que l'on égrène. */
.em-beads circle {
  animation: bead 9s linear infinite;
  animation-delay: calc(var(--i) * -.28125s);   /* 9 s / 32 perles */
  transform-box: fill-box;
  transform-origin: center;
}
.screen:not(.is-active) .em-beads circle { animation-play-state: paused; }
@keyframes bead {
  0%   { opacity: .28; transform: scale(1); }
  3%   { opacity: 1;   transform: scale(2.1); }
  11%  { opacity: .45; transform: scale(1.2); }
  22%  { opacity: .28; transform: scale(1); }
  100% { opacity: .28; transform: scale(1); }
}

/* La géométrie se tisse — l'entrelacs se dessine trait par trait,
   se tient un moment, puis se défait. Figé pendant la lecture. */
.pattern .weave {
  stroke-dasharray: 100;
  animation: weave 18s ease-in-out infinite;
}
.pattern .weave--2 { animation-delay: -2.6s; }
.pattern .weave--3 { animation-delay: -5.2s; }
body.is-reading .pattern .weave { stroke-dasharray: none; animation: none; }
@keyframes weave {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  8%   { opacity: 1; }
  38%  { stroke-dashoffset: 0; opacity: 1; }
  62%  { stroke-dashoffset: 0; opacity: 1; }
  92%  { stroke-dashoffset: -100; opacity: .15; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

/* Poussière d'or — la poussière qui monte dans un rayon de lumière. */
.dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dust i {
  position: absolute;
  bottom: -4%;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0;
  /* « dust-rise » et non « rise » : ce dernier nom sert déjà à
     l'apparition de la carte plus bas, et la dernière déclaration
     d'un même nom l'emporte — les grains héritaient alors du
     mouvement de la carte et ne montaient jamais. */
  animation: dust-rise var(--d) linear infinite;
  animation-delay: var(--delay);
}
@keyframes dust-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: var(--o); }
  80%  { opacity: var(--o); }
  100% { transform: translate3d(var(--dx), -108vh, 0); opacity: 0; }
}

/* Aperçu d'une parole — une phrase brève affleure puis s'efface. */
.teaser {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: balance;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 1.6s var(--ease), transform 1.6s var(--ease);
  pointer-events: none;
}
.teaser.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.teaser span {
  display: block;
  margin-top: .55em;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: .56em;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Rappel après silence — la spirale appelle deux fois, doucement. */
.screen--home.is-calling .emblem-btn { animation: call 2.6s var(--ease) 2; }
@keyframes call {
  0%, 100% { transform: scale(1); }
  22%      { transform: scale(1.075); }
  50%      { transform: scale(1); }
}
.screen--home.is-calling .emblem-halo { animation-duration: 2.6s; }
.screen--home.is-calling .hint { opacity: 1; color: var(--gold); }
.screen--home.is-calling .teaser { opacity: 0; }

/* Mode sobre — sur une machine modeste, on coupe les animations qui
   redessinent toute la surface et on garde celles qui portent le sens :
   le chapelet, l'aperçu d'une parole et le rappel. */
/* Sur fond clair, les traits fins et la poussière doivent être épaissis
   ou tempérés : ce qui brille sur du noir s'efface sur du papier. */
[data-theme="jour"] .dust { opacity: .45; }
[data-theme="jour"] .dust i { background: var(--gold-deep); }
[data-theme="jour"] .emblem-art .em-thin { stroke-width: 1.15; }
[data-theme="jour"] .pattern { stroke-width: 1.3; }
[data-theme="jour"] .teaser { font-weight: 400; }
[data-theme="jour"] .card { border-width: 1.5px; }

body.is-sober .dust { display: none; }
body.is-sober .pattern .weave { animation: none; stroke-dasharray: none; }
body.is-sober .glow { animation: none; }

/* ---------- 6. Écran citation ---------- */
.card {
  position: relative;
  width: min(940px, 100%);
  padding: clamp(1.6rem, 4.5vw, 3.4rem) clamp(1.2rem, 4.5vw, 3.6rem);
  border-radius: 4px;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow);
  /* Pas de backdrop-filter ici : il forçait un recalcul du flou à chaque
     image derrière la carte (le fond bouge en permanence), pour un effet
     invisible sur un fond aussi sombre. */
}
/* Coins ornés (quatre équerres dorées) */
.card::before, .card::after,
.corners::before, .corners::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--gold);
  opacity: .55;
  pointer-events: none;
}
.card::before        { top: 9px;    left: 9px;  border-right: 0; border-bottom: 0; }
.card::after         { bottom: 9px; right: 9px; border-left: 0;  border-top: 0; }
.corners::before     { top: 9px;    right: 9px; border-left: 0;  border-bottom: 0; }
.corners::after      { bottom: 9px; left: 9px;  border-right: 0; border-top: 0; }

.ornament {
  display: block;
  width: clamp(150px, 26vw, 240px);
  margin: 0 auto clamp(1rem, 3vh, 1.8rem);
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: .75;
}
.ornament path:nth-child(2) { fill: var(--gold); stroke: none; }
.ornament path:nth-child(3) { fill: var(--gold); stroke: none; opacity: .7; }

.quote {
  margin: 0;
  font-family: var(--font-quote);
  font-weight: var(--quote-weight);
  font-size: var(--quote-size, clamp(1.5rem, 3.5vw, 2.9rem));
  line-height: 1.42;
  letter-spacing: .004em;
  color: var(--ink);
  text-wrap: balance;
  hyphens: auto;
}
.quote em { font-style: italic; color: var(--gold-bright); }
.quote::before { content: "«\00a0"; color: var(--gold); }
.quote::after  { content: "\00a0»"; color: var(--gold); }

.attrib {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, 3vw, 1.6rem);
  margin-top: clamp(1.3rem, 4vh, 2.4rem);
}
.attrib-rule {
  flex: 0 1 clamp(30px, 12vw, 120px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-deep), transparent);
}
.attrib cite {
  font-style: normal;
  font-family: var(--font-display);
  font-size: clamp(.95rem, 2.1vw, 1.35rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* Apparition en cascade */
.screen--quote.is-active .card      { animation: rise .8s var(--ease) both; }
.screen--quote.is-active .quote     { animation: rise .8s .1s var(--ease) both; }
.screen--quote.is-active .attrib    { animation: rise .8s .28s var(--ease) both; }
.screen--quote.is-active .actions   { animation: rise .8s .38s var(--ease) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 7. Boutons ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(.6rem, 2vw, 1.1rem);
  margin-top: clamp(1.6rem, 4.5vh, 2.8rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .82em 1.7em;
  border-radius: 100px;
  border: 1px solid var(--card-line);
  background: transparent;
  font-family: var(--font-sans);
  font-size: clamp(.76rem, 1.7vw, .88rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .3s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.btn:active { transform: translateY(1px) scale(.99); }

.btn--primary {
  color: var(--bg-deep);
  background: linear-gradient(105deg, var(--gold-deep), var(--gold-bright) 55%, var(--gold));
  border-color: transparent;
  box-shadow: 0 14px 34px -18px var(--gold);
}
.btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn--ghost { color: var(--ink-faint); }
.btn--ghost:hover { color: var(--ink); border-color: var(--gold); }

.progress {
  margin: clamp(1rem, 3vh, 1.8rem) 0 0;
  font-family: var(--font-sans);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: .7;
}

/* ---------- 8. Outils & panneau ---------- */
.tools {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 5;
  display: flex;
  gap: .4rem;
  opacity: .28;
  transition: opacity .4s;
}
.tools:hover, .tools:focus-within { opacity: 1; }

.tool {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--card-line);
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  transition: border-color .3s, color .3s;
}
.tool:hover { border-color: var(--gold); color: var(--gold); }
.tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

.panel-veil {
  position: fixed; inset: 0; z-index: 8;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(2px);
  animation: fade .3s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.panel {
  position: fixed;
  z-index: 9;
  top: 0; right: 0;
  height: 100%;
  width: min(390px, 92vw);
  padding: 1.6rem 1.5rem 2rem;
  overflow-y: auto;
  background: var(--bg-mid);
  border-left: 1px solid var(--card-line);
  box-shadow: -30px 0 70px -40px #000;
  animation: slide-in .45s var(--ease);
}
@keyframes slide-in { from { transform: translateX(100%); } }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.6rem;
}
.panel-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .06em;
  color: var(--gold);
}
.panel-close {
  border: 0; background: none;
  font-size: 1.05rem;
  color: var(--ink-faint);
  padding: .3rem .5rem;
}
.panel-close:hover { color: var(--ink); }

.panel-group { margin-bottom: 1.7rem; }
.panel-group h3 {
  margin: 0 0 .75rem;
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .5em 1.05em;
  border-radius: 100px;
  border: 1px solid var(--card-line);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: .74rem;
  letter-spacing: .06em;
  transition: all .3s var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--ink); }
.chip.is-on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-deep);
  font-weight: 600;
}

.panel-note {
  font-family: var(--font-sans);
  font-size: .72rem;
  line-height: 2;
  color: var(--ink-faint);
  border-top: 1px solid var(--card-line);
  padding-top: 1.1rem;
}
.panel-note strong { color: var(--ink-soft); }
#pool-count { display: block; margin-top: .6rem; }

/* ---------- 9. Adaptations ---------- */
@media (max-height: 620px) {
  .hint { margin-top: 1.2rem; }
  .emblem-btn { width: clamp(150px, 26vmin, 220px); }
  .title { font-size: clamp(2rem, 6vw, 3.2rem); }
}

@media (max-width: 560px) {
  .kicker::before, .kicker::after { width: 26px; }
  .card { padding: 1.9rem 1.15rem 1.6rem; }
  .actions { flex-direction: column; width: 100%; }
  .btn { width: 100%; justify-content: center; }
  .tools { opacity: .6; }
}

/* Écran de stand / TV : vu de loin, il faut que tout se lise sans
   s'approcher — on ne se contente plus de « respirer », on grossit. */
@media (min-width: 1500px) and (min-height: 800px) {
  .quote { font-size: var(--quote-size, 3.15rem); }
  .card { padding: 4rem 4.5rem; }

  .screen { width: min(1500px, 92%); }
  .kicker { font-size: clamp(.85rem, 1vw, 1.05rem); }
  .title { font-size: clamp(4.6rem, 6.2vw, 7.2rem); }
  .lede { font-size: clamp(1.35rem, 1.7vw, 1.85rem); }
  .emblem-btn { width: clamp(300px, 25vmin, 460px); }
  .emblem-cta { font-size: clamp(.68rem, 1vw, .88rem); }
  .invite { width: min(84ch, 94%); margin-top: clamp(2.8rem, 5vh, 4.2rem); }
  .hint { font-size: clamp(1rem, 1.15vw, 1.2rem); }
  .teaser { font-size: clamp(1.25rem, 1.6vw, 1.7rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .18s !important;
  }
  .pattern, .glow { animation: none; }
}

@media print {
  .backdrop, .tools, .actions, .panel, .panel-veil, .progress, .screen--home { display: none !important; }
  body { background: #fff; color: #000; overflow: visible; }
  .screen--quote { opacity: 1 !important; visibility: visible !important; }
}