/* DRAKORA — maquette de la page d'accueil. Jetons repris de ../ui/drakora-ui.css (même DA que l'interface du jeu). */

@font-face {
  font-family: "Fredoka";
  src: url("../ui/fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../ui/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 200 1000; font-style: normal; font-display: swap;
}

:root {
  --nuage-loin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 V80 V80 H16 V88 H32 V88 H48 V88 H64 V88 H80 V96 H96 V104 H112 V96 H128 V88 H144 V88 H160 V96 H176 V104 H192 V104 H208 V120 H224 V136 H240 V144 H256 V144 H272 V128 H288 V120 H304 V120 H320 V120 H336 V104 H352 V104 H368 V112 H384 V120 H400 V112 H416 V96 H432 V88 H448 V88 H464 V80 H480 V72 H496 V72 H512 V80 H528 V104 H544 V112 H560 V112 H576 V112 H592 V120 H608 V120 H624 V112 H640 V112 H656 V120 H672 V128 H688 V136 H704 V136 H720 V136 H736 V136 H752 V128 H768 V104 H784 V88 H800 V200 Z' fill='%23F6C3A6'/%3E%3C/svg%3E");
  --nuage-pres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 V50 V50 H20 V50 H40 V50 H60 V60 H80 V70 H100 V100 H120 V120 H140 V130 H160 V130 H180 V120 H200 V110 H220 V110 H240 V100 H260 V90 H280 V70 H300 V50 H320 V50 H340 V60 H360 V70 H380 V70 H400 V70 H420 V70 H440 V80 H460 V90 H480 V90 H500 V90 H520 V80 H540 V90 H560 V100 H580 V110 H600 V110 H620 V110 H640 V100 H660 V100 H680 V110 H700 V100 H720 V80 H740 V60 H760 V50 H780 V40 H800 V200 Z' fill='%23FFF3E6'/%3E%3Cpath d='M0 200 V120 V120 H20 V130 H40 V130 H60 V130 H80 V140 H100 V150 H120 V160 H140 V170 H160 V170 H180 V160 H200 V160 H220 V160 H240 V150 H260 V150 H280 V130 H300 V130 H320 V130 H340 V130 H360 V140 H380 V140 H400 V140 H420 V140 H440 V140 H460 V150 H480 V150 H500 V150 H520 V140 H540 V140 H560 V150 H580 V160 H600 V160 H620 V160 H640 V150 H660 V150 H680 V160 H700 V160 H720 V150 H740 V130 H760 V120 H780 V120 H800 V200 Z' fill='%23F3D2C4'/%3E%3C/svg%3E");
  --dk-nuit: #0B1524;
  --dk-nuit-2: #0E1B2E;
  --dk-surface: #14263A;
  --dk-verre: rgba(20, 38, 58, 0.78);
  --dk-accent: #3FA9D8;
  --dk-accent-fort: #58B2EE;
  --dk-accent-doux: rgba(63, 169, 216, 0.18);
  --dk-or: #E7B85B;
  --dk-or-clair: #FFE7A8;
  --dk-filet-or: rgba(231, 184, 91, 0.32);
  --dk-filet: rgba(255, 255, 255, 0.08);
  --dk-carte: rgba(255, 255, 255, 0.05);
  --dk-texte: #F3F5F7;
  --dk-texte-2: #AAB8C7;
  --dk-erreur: #F08A87;
  --dk-succes: #63C79A;
  --dk-ombre: 0 8px 24px rgba(0, 0, 0, 0.35);
  --dk-ombre-haute: 0 24px 60px rgba(0, 0, 0, 0.45);
  --dk-sortie: cubic-bezier(0.23, 1, 0.32, 1);
  --dk-t-appui: 120ms;
  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-pilule: 999px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --largeur: 1200px;
  --goutiere: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--dk-texte);
  background:
    radial-gradient(900px 600px at 78% -10%, rgba(63, 169, 216, 0.16), transparent 70%),
    radial-gradient(700px 500px at 10% 30%, rgba(231, 184, 91, 0.06), transparent 70%),
    var(--dk-nuit);
  min-height: 100vh;
}
/* Trame voxel discrète : petits carrés, rappel du monde en cubes */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--dk-accent-fort); text-underline-offset: 3px; }
::selection { background: rgba(231, 184, 91, 0.35); color: #fff; }
:focus-visible { outline: 3px solid var(--dk-or-clair); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: "Fredoka", "Nunito", sans-serif; font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.evitement {
  position: absolute; left: var(--e-4); top: -60px; z-index: 100;
  background: var(--dk-or); color: #1B1408; padding: var(--e-2) var(--e-4); border-radius: var(--r-s); font-weight: 800; text-decoration: none;
}
.evitement:focus { top: var(--e-3); }

.conteneur { width: min(100% - 2 * var(--goutiere), var(--largeur)); margin-inline: auto; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 21, 36, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dk-filet);
}
.entete .conteneur { display: flex; align-items: center; gap: var(--e-5); min-height: 68px; }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dk-texte); }
.marque svg { width: 30px; height: 30px; flex: none; }
.marque span { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: 0.06em; }
.nav { display: flex; gap: var(--e-5); margin-left: auto; }
.nav a { color: var(--dk-texte-2); text-decoration: none; font-weight: 700; font-size: 0.95rem; padding: var(--e-2) 0; }
.nav a:hover { color: var(--dk-texte); }
.entete-actions { display: flex; align-items: center; gap: var(--e-3); }

.langue { display: inline-flex; padding: 3px; border-radius: var(--r-pilule); background: var(--dk-carte); border: 1px solid var(--dk-filet); }
.langue button {
  font: 800 0.8rem/1 "Nunito", sans-serif; letter-spacing: 0.06em; color: var(--dk-texte-2);
  background: none; border: 0; border-radius: var(--r-pilule); min-width: 44px; min-height: 36px; cursor: pointer;
  transition: background var(--dk-t-appui), color var(--dk-t-appui);
}
.langue button[aria-pressed="true"] { background: var(--dk-surface); color: var(--dk-texte); box-shadow: inset 0 0 0 1px var(--dk-filet-or); }

/* ---------- Boutons ---------- */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 var(--e-5); border-radius: var(--r-pilule);
  font: 800 1rem/1 "Nunito", sans-serif; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; color: var(--dk-texte); background: var(--dk-carte);
  transition: transform var(--dk-t-appui) var(--dk-sortie), background var(--dk-t-appui), box-shadow var(--dk-t-appui), border-color var(--dk-t-appui);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--jouer {
  --h: 60px;
  padding: 0 var(--e-7); font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.3rem; letter-spacing: 0.02em;
  color: #2A160C;
  background: linear-gradient(180deg, #F6CF7C 0%, #E7B85B 55%, #D9A346 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -4px 0 #A8772A inset, 0 10px 28px rgba(231, 140, 60, 0.38);
}
.btn--jouer:hover { background: linear-gradient(180deg, #FFDB8E 0%, #F0C46A 55%, #E2AD50 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -4px 0 #A8772A inset, 0 14px 34px rgba(231, 140, 60, 0.55); }
.btn--jouer:active { box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -1px 0 #A8772A inset, 0 6px 16px rgba(231, 140, 60, 0.3); }
.btn--jouer svg { width: 22px; height: 22px; }
.btn--secondaire { background: transparent; border-color: var(--dk-filet-or); color: var(--dk-or-clair); }
.btn--secondaire:hover { background: rgba(231, 184, 91, 0.1); }
.btn--discret { background: var(--dk-carte); border-color: var(--dk-filet); --h: 44px; padding: 0 var(--e-4); font-size: 0.95rem; white-space: nowrap; }
.btn--discret:hover { background: rgba(255,255,255,0.09); }
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; }
.btn[aria-busy="true"]::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: tourne 0.8s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.lien-bouton { background: none; border: 0; padding: 6px 2px; color: var(--dk-accent-fort); font: 700 0.95rem "Nunito", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }

/* ---------- Héros ---------- */
.heros { position: relative; isolation: isolate; min-height: min(calc(100svh - 68px), 900px); padding: clamp(40px, 7vw, 96px) 0 clamp(140px, 16vw, 220px); }
.heros .conteneur { display: grid; grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr); }
.surtitre {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-pilule);
  border: 1px solid var(--dk-filet-or); background: rgba(231, 184, 91, 0.08);
  color: var(--dk-or-clair); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.surtitre::before { content: ""; width: 8px; height: 8px; background: var(--dk-or); transform: rotate(45deg); border-radius: 1px; }
.heros h1 { margin-top: var(--e-5); font-size: clamp(2.3rem, 5.2vw, 4.1rem); }
.heros h1 em { font-style: normal; color: var(--dk-or); }
.heros h1 { color: #FFF3DC; text-shadow: 0 2px 0 rgba(33, 48, 88, 0.6), 0 12px 32px rgba(20, 24, 50, 0.45); }
.heros .chapo { margin-top: var(--e-5); font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: #E9E2EE; max-width: 50ch; }
.heros .note { color: #DAD3E6; }
.heros .surtitre { background: rgba(33, 48, 88, 0.55); }

.zone-etat { margin-top: var(--e-6); }
.carte-etat {
  display: grid; gap: var(--e-4);
  padding: var(--e-5); border-radius: var(--r-l);
  background: linear-gradient(180deg, rgba(20, 38, 58, 0.9), rgba(16, 30, 47, 0.9));
  border: 1px solid var(--dk-filet); box-shadow: var(--dk-ombre);
  max-width: 520px;
}
.carte-etat .ligne-session { display: flex; align-items: center; gap: var(--e-4); }
.avatar {
  width: 52px; height: 52px; flex: none; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 70%, rgba(231,184,91,0.35), transparent 70%), var(--dk-surface);
  border: 1px solid var(--dk-filet-or);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25) translateY(6%); }
.carte-etat h2 { font-size: 1.35rem; }
.carte-etat .detail { color: var(--dk-texte-2); font-size: 0.95rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.note { margin-top: var(--e-4); color: var(--dk-texte-2); font-size: 0.92rem; max-width: 52ch; }
.note svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; color: var(--dk-succes); }

/* Les blocs d'état : un seul visible, piloté par html[data-etat] (posé dans <head>, avant le premier rendu : aucun
   clignotement) ; dans la carte « session », html[data-partie] choisit les lignes d'un invité ou d'un compte. */
html[data-etat="nouveau"] [data-pour]:not([data-pour~="nouveau"]),
html[data-etat="session"] [data-pour]:not([data-pour~="session"]),
html[data-etat="appareil"] [data-pour]:not([data-pour~="appareil"]),
html[data-partie="invite"] [data-partie="compte"],
html[data-partie="compte"] [data-partie="invite"] { display: none !important; }

/* Scène du héros : ciel d'heure dorée, îles du jeu détourées, mer de nuages en voxels (marches de la même grille que le
   monde), braises de Forge-Volcan. Le texte reste sur la partie haute, sombre, du ciel (contraste AA). Trois mouvements
   superposés sans conflit : parallaxe au défilement (transform du calque, accueil-motion.js), suivi du pointeur
   (propriété translate du calque, souris fine seulement), flottement et montée d'entrée (transform de l'image). */
.ciel {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(27, 37, 74, 0.82) 0%, rgba(27, 37, 74, 0.55) 32%, rgba(27, 37, 74, 0) 56%),
    radial-gradient(60% 55% at 74% 66%, rgba(255, 236, 196, 0.85) 0%, rgba(255, 196, 140, 0.35) 30%, transparent 62%),
    linear-gradient(180deg, #213058 0%, #34477D 26%, #6C6795 46%, #C98A8F 64%, #F2AE88 80%, #FFD6A6 100%);
}
.soleil {
  position: absolute; left: 66%; top: 47%; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, #FFF6DC 0%, rgba(255, 233, 186, 0.9) 22%, rgba(255, 205, 150, 0.25) 52%, transparent 70%);
  transform: translate(-50%, -50%);
}
.nuages { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.nuages i { position: absolute; inset: 0 auto 0 0; width: 200%; background-repeat: repeat-x; background-position: 0 100%; }
.nuages--loin { height: min(24%, 210px); }
.nuages--loin i { background-image: var(--nuage-loin); background-size: 50% 100%; opacity: 0.7; }
.nuages--pres { height: min(15%, 130px); }
.nuages--pres i { background-image: var(--nuage-pres); background-size: 50% 100%; }
/* sous la mer de nuages : la nuit des sections suivantes (on descend du ciel vers le couvoir) */
.heros::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; z-index: -1;
  background: linear-gradient(180deg, rgba(243, 210, 196, 0) 0%, #B08494 40%, #3B3D63 75%, var(--dk-nuit) 100%);
}
.couche { position: absolute; transition: translate 900ms var(--dk-sortie); }
.couche img { width: 100%; height: auto; }
.couche--forge { right: 1%; top: 8%; width: min(36vw, 540px); }
.couche--refuge { right: 19%; top: 44%; width: min(28vw, 420px); }
.couche--navette { right: 5%; top: 50%; width: min(7vw, 100px); }
.ile { filter: drop-shadow(0 24px 30px rgba(120, 60, 70, 0.25)); }
.braises { position: absolute; inset: 0; }
.braises i {
  position: absolute; bottom: 24%; width: 5px; height: 5px; background: #FFC26A; box-shadow: 0 0 8px 2px rgba(255, 150, 60, 0.6);
  opacity: 0;
}
.braises i:nth-child(1) { left: 58%; --d: 7s; --t: 0s; }
.braises i:nth-child(2) { left: 64%; --d: 9s; --t: 1.6s; }
.braises i:nth-child(3) { left: 71%; --d: 8s; --t: 3.1s; width: 4px; height: 4px; }
.braises i:nth-child(4) { left: 77%; --d: 10s; --t: 0.8s; }
.braises i:nth-child(5) { left: 83%; --d: 7.5s; --t: 4.4s; width: 4px; height: 4px; }
.braises i:nth-child(6) { left: 88%; --d: 9.5s; --t: 2.3s; }
.braises i:nth-child(7) { left: 69%; --d: 11s; --t: 5.2s; width: 3px; height: 3px; }
.braises i:nth-child(8) { left: 92%; --d: 8.5s; --t: 6.1s; width: 3px; height: 3px; }
.braises i:nth-child(9) { left: 61%; --d: 10.5s; --t: 3.8s; width: 3px; height: 3px; }
.ciel .etiquette {
  position: absolute; right: var(--goutiere); bottom: 12px;
  padding: 4px 10px; border-radius: var(--r-pilule);
  background: rgba(59, 61, 99, 0.55); color: #FFE9D6;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.mouvement .nuages--loin i { animation: derive 120s linear infinite; }
.mouvement .nuages--pres i { animation: derive 70s linear infinite; }
.mouvement .ile--refuge { animation: monte-ile 1.6s var(--dk-sortie) both, flotte 9s ease-in-out 1.6s infinite; }
.mouvement .ile--forge { animation: monte-ile 1.9s var(--dk-sortie) 0.15s both, flotte 11s ease-in-out 2.05s infinite; }
.mouvement .navette { animation: monte-ile 2.2s var(--dk-sortie) 0.4s both, vol 6s ease-in-out 2.6s infinite; }
.mouvement .braises i { animation: braise var(--d) linear var(--t) infinite; }
@keyframes derive { to { transform: translate3d(-50%, 0, 0); } }
@keyframes monte-ile { from { transform: translate3d(0, 70px, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes flotte { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes vol { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-10px, -16px, 0) rotate(-3deg); } }
@keyframes braise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: 0.95; }
  70% { opacity: 0.6; }
  100% { transform: translate3d(-30px, -260px, 0); opacity: 0; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.section .intro { margin-top: var(--e-4); color: var(--dk-texte-2); max-width: 60ch; font-size: 1.08rem; }

.etapes { list-style: none; padding: 0; margin: var(--e-7) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); counter-reset: etape; }
.etape {
  counter-increment: etape;
  border-radius: var(--r-l); overflow: hidden;
  background: var(--dk-surface); border: 1px solid var(--dk-filet);
  display: flex; flex-direction: column;
}
.etape .media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--dk-nuit-2); }
.etape .media img { width: 100%; height: 100%; object-fit: cover; }
.etape .corps { padding: var(--e-5); display: grid; gap: var(--e-2); }
.etape h3 { font-size: 1.3rem; display: flex; align-items: center; gap: var(--e-3); }
.etape h3::before {
  content: counter(etape);
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px;
  background: var(--dk-accent-doux); color: var(--dk-accent-fort); font-size: 1rem;
}
.etape p { color: var(--dk-texte-2); }


.duo { list-style: none; padding: 0; margin: var(--e-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); }
.duo li { border-radius: var(--r-l); padding: var(--e-5); background: var(--dk-surface); border: 1px solid var(--dk-filet); display: grid; gap: var(--e-2); align-content: start; }
.duo h3 { font-size: 1.3rem; }
.duo p { color: var(--dk-texte-2); }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; gap: var(--e-4); } }


.faq { display: grid; gap: var(--e-3); margin-top: var(--e-6); max-width: 820px; }
.faq details { border-radius: var(--r-m); background: var(--dk-surface); border: 1px solid var(--dk-filet); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--e-4) var(--e-5); min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  font: 600 1.1rem/1.3 "Fredoka", sans-serif;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--dk-or); transition: transform 200ms var(--dk-sortie); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--e-5) var(--e-5); color: var(--dk-texte-2); max-width: 66ch; }

.final { text-align: center; }
.final .conteneur { display: grid; justify-items: center; gap: var(--e-5); }
.oeuf-appel { width: 156px; aspect-ratio: 1; border-radius: 28px; overflow: hidden; border: 2px solid var(--dk-filet-or);
  box-shadow: 0 0 0 6px rgba(231, 184, 91, 0.08), 0 18px 40px rgba(0,0,0,0.45), 0 0 60px rgba(255, 178, 74, 0.25); }
.oeuf-appel img { width: 100%; height: 100%; object-fit: cover; }
/* le seul élément des sections qui « respire » : l'œuf qui attend (docs ACCUEIL §6.3) */
.mouvement .oeuf-appel { animation: palpite 3.2s ease-in-out infinite; }
@keyframes palpite { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

.pied { border-top: 1px solid var(--dk-filet); padding: var(--e-6) 0 calc(var(--e-9) + env(safe-area-inset-bottom, 0px)); color: var(--dk-texte-2); font-size: 0.9rem; }
.pied .conteneur { display: flex; flex-wrap: wrap; gap: var(--e-5); align-items: center; justify-content: space-between; }
.pied nav { display: flex; flex-wrap: wrap; gap: var(--e-5); }
.pied a { color: var(--dk-texte-2); }

/* ---------- Dragons : défilé (accueil-defile.js) et raretés ----------
   Bande plus sombre pleine largeur : rupture de rythme après les trois cartes de « Comment on joue ». */
.dragons { background: linear-gradient(180deg, transparent 0%, rgba(4, 9, 18, 0.6) 14%, rgba(4, 9, 18, 0.6) 86%, transparent 100%); }
.defile { position: relative; margin-top: var(--e-6); }
.defile__piste {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: var(--e-2) var(--goutiere) var(--e-4); scroll-padding-inline: var(--goutiere);
}
/* fondu des bords : deux voiles fixes plutôt qu'un masque sur une liste de 7 000 px (coût de rendu) */
.defile::before, .defile::after { content: ""; position: absolute; top: 0; bottom: 60px; width: var(--goutiere); z-index: 1; pointer-events: none; }
.defile::before { left: 0; background: linear-gradient(90deg, #060C17, transparent); }
.defile::after { right: 0; background: linear-gradient(-90deg, #060C17, transparent); }
.defile__piste::-webkit-scrollbar { display: none; }
.defile__piste:focus-visible { outline-offset: -3px; border-radius: var(--r-l); }
.defile__liste { display: flex; gap: var(--e-4); width: max-content; list-style: none; margin: 0; padding: 0; }
.defile.est-auto .defile__piste { overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.defile.est-auto .defile__liste { will-change: transform; }
.defile.est-pris .defile__piste { cursor: grabbing; }
.defile__commandes { display: flex; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-2); }
.defile__bouton {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--dk-carte); border: 1px solid var(--dk-filet); color: var(--dk-texte);
  transition: background var(--dk-t-appui), transform var(--dk-t-appui) var(--dk-sortie);
}
.defile__bouton:hover { background: rgba(255, 255, 255, 0.1); }
.defile__bouton:active { transform: scale(0.94); }
.defile__bouton svg { width: 22px; height: 22px; }
.defile__pause[hidden] { display: none; }
.defile__pause .icone-lecture, .defile__pause[aria-pressed="true"] .icone-pause { display: none; }
.defile__pause[aria-pressed="true"] .icone-lecture { display: block; }

.dragon {
  position: relative; isolation: isolate; overflow: hidden; flex: none; width: 188px; scroll-snap-align: start;
  padding: var(--e-4) var(--e-3); border-radius: 20px; text-align: center;
  background: radial-gradient(70% 55% at 50% 36%, rgba(63, 169, 216, 0.2), transparent 72%), linear-gradient(180deg, #15283D, #0F1D30);
  border: 1px solid var(--dk-filet);
}
.dragon img { width: 100%; height: auto; aspect-ratio: 1; pointer-events: none; -webkit-user-drag: none; }
.dragon strong { display: block; margin-top: var(--e-2); font: 600 1rem/1.2 "Fredoka", sans-serif; }
.dragon__robe { display: block; margin-top: 2px; font-size: 0.85rem; font-weight: 700; color: var(--dk-or-clair); }
.dragon__marque {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 9px; border-radius: var(--r-pilule);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  background: rgba(11, 21, 36, 0.78); border: 1px solid var(--dk-filet-or); color: var(--dk-or-clair);
}
/* Prisme : la feuille holographique du jeu (client/web_ui/ui/drakora-fonds.css, .is-prisme), mêmes valeurs ; le portrait
   passe devant, l'arc-en-ciel est réservé au Prisme */
.dragon--prisme {
  border-color: transparent;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1.5px, transparent 1.5px 5px), radial-gradient(140% 120% at 50% 35%, #141A33 0%, #07080F 80%);
  box-shadow: inset 0 0 0 1px rgba(214, 190, 255, 0.35);
}
.dragon--prisme::before, .dragon--prisme::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.dragon--prisme::before {
  inset: -60%;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 47%, rgba(190, 240, 255, 0.10) 51%, transparent 60%),
    linear-gradient(120deg, #2C86B8 0%, #6A55C8 16%, #B4509A 32%, #B89040 48%, #3FA57E 64%, #2C86B8 80%, #6A55C8 100%);
  opacity: 0.72; transform: translate3d(-8%, -4%, 0) rotate(-4deg);
}
.dragon--prisme::after {
  inset: 0;
  background: radial-gradient(62% 54% at 50% 38%, rgba(7, 9, 18, 0.55) 0%, rgba(7, 9, 18, 0.25) 55%, transparent 80%),
    radial-gradient(130% 110% at 50% 40%, transparent 55%, rgba(4, 5, 10, 0.55) 100%);
}
.mouvement .dragon--prisme::before { animation: holo 7s ease-in-out infinite alternate; }
@keyframes holo { from { transform: translate3d(-16%, -8%, 0) rotate(-6deg); } to { transform: translate3d(14%, 7%, 0) rotate(4deg); } }
.dragon__marque--prisme { border: 0; color: #1A1030; background: linear-gradient(90deg, #8FE3FF 0%, #C79BFF 55%, #FFB3D9 100%); }
/* Lignée ★5 : les étoiles du jeu (lueur des cinq étoiles, .dk-etoiles.is-cinq) ; le cadre reste celui d'un dragon */
.dragon--lignee { border-color: rgba(231, 184, 91, 0.4); }
.dragon__etoiles {
  position: absolute; top: 9px; left: 0; right: 0; z-index: 2;
  color: #FFD678; font-size: 0.95rem; letter-spacing: 2px; text-shadow: 0 0 7px rgba(255, 214, 120, 0.75);
}
/* À venir : œuf voilé et point d'interrogation, aucun dragon inventé */
.dragon--inconnu {
  border-style: dashed; border-color: rgba(255, 255, 255, 0.2);
  background: radial-gradient(60% 48% at 50% 40%, rgba(170, 184, 199, 0.14), transparent 72%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 8px, transparent 8px 16px), #0D1A2C;
}
.dragon__mystere { position: relative; display: grid; place-items: center; aspect-ratio: 1; font: 600 3.4rem/1 "Fredoka", sans-serif; color: rgba(243, 245, 247, 0.72); }
.dragon__mystere::before {
  content: ""; position: absolute; z-index: -1; width: 54%; aspect-ratio: 0.78; border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); border: 2px solid rgba(255, 255, 255, 0.14);
}
.dragon--inconnu strong { color: var(--dk-texte-2); }
.dragon--inconnu .dragon__robe { color: var(--dk-texte-2); font-weight: 600; }

.raretes { list-style: none; padding: 0; margin: var(--e-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.rarete { padding: var(--e-5); border-radius: 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--dk-filet); }
.rarete h3 { display: flex; align-items: center; gap: var(--e-3); font-size: 1.2rem; }
.rarete p { margin-top: var(--e-2); color: var(--dk-texte-2); font-size: 0.95rem; }
.rarete__signe { flex: none; width: 16px; height: 16px; border-radius: 3px; transform: rotate(45deg); }
.rarete--prisme .rarete__signe { background: linear-gradient(90deg, #8FE3FF 0%, #C79BFF 55%, #FFB3D9 100%); }
.rarete--robe .rarete__signe { border-radius: 50%; transform: none; background: radial-gradient(circle at 35% 30%, #FFFFFF, #C9D2DE 45%, #7E8BA6 100%); }
.rarete__etoiles { color: #FFD678; font-size: 0.9rem; letter-spacing: 1px; text-shadow: 0 0 7px rgba(255, 214, 120, 0.6); }

/* ---------- Îles : l'archipel monte, de gauche à droite, du bleu nuit vers l'heure dorée ---------- */
.iles { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(110px, 13vw, 190px); }
.iles__ciel {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 40% at 82% 70%, rgba(255, 226, 186, 0.55) 0%, rgba(255, 196, 140, 0.18) 40%, transparent 70%),
    linear-gradient(180deg, var(--dk-nuit) 0%, #18264A 20%, #2E3F73 44%, #5F5E8E 64%, #B5838E 82%, #EDAA88 100%);
}
.iles__ciel .nuages--loin { height: min(20%, 170px); }
.iles__ciel .nuages--pres { height: min(11%, 100px); }
.iles .intro { color: #C9D3E0; }
.archipel { list-style: none; padding: 0; margin: var(--e-7) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); align-items: start; }
.archipel__ile:nth-child(1) { margin-top: 150px; }
.archipel__ile:nth-child(2) { margin-top: 70px; }
.archipel__img { position: relative; display: grid; place-items: end center; aspect-ratio: 1; }
.archipel__img img { width: 92%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 24px 28px rgba(40, 24, 70, 0.32)); }
.archipel__ile:nth-child(2) .archipel__img img { width: 80%; }
.mouvement .archipel__img img { animation: flotte 10s ease-in-out infinite; }
.mouvement .archipel__ile:nth-child(2) .archipel__img img { animation-duration: 11.5s; animation-delay: -3s; }
.mouvement .archipel__ile:nth-child(3) .archipel__img img { animation-duration: 13s; animation-delay: -6s; }
.archipel__ile--brume .archipel__img img { width: 72%; filter: blur(1.2px); opacity: 0.88; }
.archipel__ile--brume .archipel__img::after {   /* brume devant la silhouette */
  content: ""; position: absolute; inset: 8% -6% 0; pointer-events: none;
  background: radial-gradient(60% 34% at 50% 62%, rgba(255, 240, 228, 0.42), transparent 75%), radial-gradient(48% 24% at 36% 34%, rgba(255, 240, 228, 0.24), transparent 75%);
}
.archipel__mystere {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 1;
  font: 600 clamp(3rem, 6vw, 4.6rem)/1 "Fredoka", sans-serif; color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 4px 24px rgba(60, 40, 90, 0.55);
}
.archipel__texte {
  margin-top: var(--e-3); padding: var(--e-4) var(--e-5); border-radius: var(--r-m);
  background: rgba(11, 21, 36, 0.82); border: 1px solid var(--dk-filet);   /* pas de backdrop-filter : îles animées dessous */
}
.archipel__seuil { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dk-or-clair); }
.archipel__texte h3 { margin-top: 4px; font-size: 1.35rem; }
.archipel__texte p:last-child { margin-top: var(--e-2); color: #C3CEDB; font-size: 0.95rem; }

/* ---------- Plus loin : boss, Atelier, maîtrises (une grande carte, deux petites : pas une troisième rangée de 3) ---------- */
.plus__grille { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--e-5); margin-top: var(--e-6); }
.plus__carte { display: grid; align-content: start; border-radius: var(--r-l); overflow: hidden; background: var(--dk-surface); border: 1px solid var(--dk-filet); }
.plus__carte--boss {
  grid-row: span 2; align-content: space-between;
  background: radial-gradient(75% 55% at 30% 42%, rgba(255, 110, 40, 0.2), transparent 70%), radial-gradient(60% 50% at 78% 50%, rgba(90, 220, 255, 0.12), transparent 70%), linear-gradient(180deg, #1B1C30, #0F1A2B);
}
.plus__boss { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: var(--e-3); padding: var(--e-6) var(--e-5) 0; }
.plus__boss figure { margin: 0; text-align: center; }
.plus__boss img { width: 100%; max-height: 290px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.45)); }
.plus__boss figcaption { margin-top: var(--e-2); font: 600 1rem/1.2 "Fredoka", sans-serif; color: var(--dk-or-clair); }
.plus__boss figcaption span { margin-left: 4px; font: 700 0.8rem "Nunito", sans-serif; color: var(--dk-texte-2); }
.plus__corps { display: grid; gap: var(--e-2); padding: var(--e-5); }
.plus__corps h3 { font-size: 1.3rem; }
.plus__corps p { color: var(--dk-texte-2); }
.plus__objets, .plus__voies { list-style: none; margin: 0; padding: var(--e-5) var(--e-5) 0; display: flex; gap: var(--e-4); }
.plus__objets li, .plus__voies li > img {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-m);
  background: radial-gradient(circle at 50% 40%, rgba(231, 184, 91, 0.16), transparent 70%), var(--dk-nuit-2); border: 1px solid var(--dk-filet);
}
.plus__objets img { width: 48px; height: 48px; }
.plus__objets b {
  position: absolute; right: -7px; bottom: -7px; padding: 2px 6px; border-radius: 8px;
  font: 800 0.68rem/1.2 "Nunito", sans-serif; background: var(--dk-nuit); border: 1px solid var(--dk-filet-or); color: var(--dk-or-clair);
}
.plus__voies li { display: grid; justify-items: center; gap: 6px; font-size: 0.82rem; font-weight: 800; color: var(--dk-texte-2); }
.plus__voies li > img { padding: 8px; }
.relance { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-top: var(--e-6); }
.relance .note { margin-top: 0; }

@media (max-width: 860px) {
  .raretes { grid-template-columns: 1fr; gap: var(--e-3); }
  .archipel { grid-template-columns: 1fr; gap: var(--e-4); margin-top: var(--e-6); }
  .archipel__ile, .archipel__ile:nth-child(1), .archipel__ile:nth-child(2) { margin-top: 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--e-3); align-items: center; }
  /* sur mobile, l'archipel monte de bas en haut : l'île suivante en haut, dans la brume */
  .archipel__ile:nth-child(1) { order: 3; }
  .archipel__ile:nth-child(3) { order: 1; }
  .archipel__ile:nth-child(2) { order: 2; }
  .archipel__texte { margin-top: 0; padding: var(--e-3) var(--e-4); }
  .plus__grille { grid-template-columns: 1fr; }
  .plus__carte--boss { grid-row: auto; }
}
@media (max-width: 560px) {
  .dragon { width: 150px; padding: var(--e-3) var(--e-2); border-radius: 18px; }
  .dragon strong { font-size: 0.9rem; }
  .dragon__robe { font-size: 0.78rem; }
  .dragon__marque { top: 8px; left: 8px; font-size: 0.62rem; padding: 2px 7px; }
  .dragon__mystere { font-size: 2.8rem; }
  .archipel__texte h3 { font-size: 1.15rem; }
  .archipel__texte p:last-child { font-size: 0.88rem; }
  .plus__boss { padding: var(--e-5) var(--e-4) 0; }
  .plus__corps { padding: var(--e-4); }
  .relance .btn--jouer { width: 100%; }
}

/* ---------- Fenêtre de connexion ---------- */
dialog.fenetre-auth {
  width: min(440px, calc(100% - 32px)); padding: 0; border: 1px solid var(--dk-filet-or); border-radius: var(--r-l);
  background: var(--dk-surface); color: var(--dk-texte); box-shadow: var(--dk-ombre-haute);
}
dialog.fenetre-auth::backdrop { background: rgba(5, 10, 18, 0.7); backdrop-filter: blur(4px); }
.auth { display: grid; gap: var(--e-4); padding: var(--e-6) var(--e-5) var(--e-5); position: relative; }
.auth [hidden] { display: none !important; }   /* les blocs propres à un mode (connexion, création, oubli) */
.zone-auth-inline .auth { padding: 0; }
.auth h2 { font-size: 1.5rem; }
.auth .info-invite { font-size: 0.9rem; color: var(--dk-succes); }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 800; font-size: 0.92rem; }
.champ .saisie { position: relative; }
.champ input {
  width: 100%; min-height: 50px; padding: 0 var(--e-4); border-radius: var(--r-s);
  border: 1px solid rgba(255,255,255,0.16); background: var(--dk-nuit-2); color: var(--dk-texte);
  font: 600 1rem "Nunito", sans-serif;
}
.champ select {
  width: 100%; min-height: 50px; padding: 0 var(--e-4); border-radius: var(--r-s);
  border: 1px solid rgba(255,255,255,0.16); background: var(--dk-nuit-2); color: var(--dk-texte);
  font: 600 1rem "Nunito", sans-serif;
}
.champ .champ-age { width: 7.5rem; font-variant-numeric: tabular-nums; }
.champ input:focus-visible, .champ select:focus-visible { outline: 3px solid var(--dk-accent); outline-offset: 1px; }
.champ input[aria-invalid="true"], .champ select[aria-invalid="true"] { border-color: var(--dk-erreur); }
.champ .aide { font-size: 0.85rem; color: var(--dk-texte-2); }
.champ .erreur { font-size: 0.88rem; color: var(--dk-erreur); font-weight: 700; }
.champ .erreur:empty { display: none; }
.basculer-mdp {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 38px; padding: 0 12px; border-radius: 8px; border: 0; background: rgba(255,255,255,0.06);
  color: var(--dk-texte-2); font: 800 0.8rem "Nunito", sans-serif; cursor: pointer;
}
.champ--mdp input { padding-right: 96px; }
.ligne-oublie { display: flex; justify-content: flex-end; margin-top: -8px; }
.message-auth { padding: var(--e-3) var(--e-4); border-radius: var(--r-s); font-weight: 700; font-size: 0.92rem; }
.message-auth:empty { display: none; }
.message-auth.erreur { background: rgba(240, 138, 135, 0.12); color: var(--dk-erreur); border: 1px solid rgba(240, 138, 135, 0.35); }
.message-auth.succes { background: rgba(99, 199, 154, 0.1); color: #BFEBD5; border: 1px solid rgba(99, 199, 154, 0.35); font-weight: 600; }
/* choix de la partie (jamais de fusion) : plaque or, une décision à la fois */
.choix-partie { display: grid; gap: var(--e-4); padding: var(--e-4); border-radius: var(--r-m); background: rgba(231, 184, 91, 0.07); border: 1px solid var(--dk-filet-or); }
.choix-partie[hidden] { display: none; }
.choix-partie p { font-weight: 600; }
.choix-partie__actions { display: grid; gap: var(--e-3); }
.choix-partie__actions .btn { width: 100%; }
.fournisseurs .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.fournisseurs .btn:disabled:active { transform: none; }
.bientot { margin-left: auto; padding: 2px 10px; border-radius: var(--r-pilule); border: 1px solid var(--dk-filet-or); color: var(--dk-or-clair); font-size: 0.75rem; font-weight: 800; }
.separateur { display: flex; align-items: center; gap: var(--e-3); color: var(--dk-texte-2); font-size: 0.85rem; }
.separateur::before, .separateur::after { content: ""; height: 1px; flex: 1; background: var(--dk-filet); }
.fournisseurs { display: grid; gap: var(--e-3); }
.fournisseurs .btn { width: 100%; }
.fournisseurs svg { width: 20px; height: 20px; }
.auth .btn--jouer { width: 100%; --h: 54px; font-size: 1.15rem; }
.fermer {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 12px; border: 0;
  background: transparent; color: var(--dk-texte-2); font-size: 1.6rem; cursor: pointer;
}
.fermer:hover { background: rgba(255,255,255,0.06); }
.zone-auth-inline .fermer { display: none; }

/* ---------- Annonce et panneau de démo ---------- */
.annonce {
  position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  width: max-content; max-width: calc(100% - 32px);
  padding: var(--e-3) var(--e-5); border-radius: var(--r-m);
  background: var(--dk-surface); border: 1px solid var(--dk-filet-or); box-shadow: var(--dk-ombre-haute);
  font-weight: 700; transition: opacity 220ms var(--dk-sortie), transform 220ms var(--dk-sortie);
}
.annonce.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mouvement au défilement (accueil-motion.js) ----------
   Actif seulement si JS + pas de prefers-reduced-motion (classe .mouvement sur <html>). */
.mouvement [data-anim] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 600ms var(--dk-sortie), transform 800ms var(--dk-sortie);
  transition-delay: calc(var(--anim-i, 0) * 70ms);
}
.mouvement [data-anim="gauche"] { transform: translate3d(-32px, 0, 0); }
.mouvement [data-anim="droite"] { transform: translate3d(32px, 0, 0); }
.mouvement [data-anim="zoom"] { transform: scale(0.94); }
.mouvement [data-anim].est-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav { display: none; }
  .entete-actions { margin-left: auto; }
  .heros .conteneur { grid-template-columns: 1fr; }
  .heros { padding-bottom: clamp(330px, 66vw, 480px); }
  .ciel { background:
    radial-gradient(70% 34% at 60% 84%, rgba(255, 236, 196, 0.85) 0%, rgba(255, 196, 140, 0.3) 34%, transparent 64%),
    linear-gradient(180deg, #213058 0%, #2B3C70 40%, #3E4A80 58%, #9A7A98 72%, #F2AE88 86%, #FFD6A6 100%); }
  .soleil { left: 58%; top: 84%; }
  .couche--forge { right: -5%; top: auto; bottom: 13%; width: min(54vw, 400px); }
  .couche--refuge { right: auto; left: 0; top: auto; bottom: 4%; width: min(58vw, 420px); }
  .couche--navette { right: 44%; top: auto; bottom: 25%; width: min(13vw, 76px); }
  .braises i { bottom: 12%; }
  .nuages--loin { height: 22%; }
  .nuages--pres { height: 16%; }
  .etapes { grid-template-columns: 1fr; }
  .etape { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .etape .media { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 560px) {
  .entete .conteneur { gap: var(--e-3); min-height: 60px; }
  .marque span { font-size: 1.15rem; }
  .entete .btn--discret { padding: 0 var(--e-3); font-size: 0.88rem; }
  .heros { padding-top: var(--e-6); }
  .btn--jouer { width: 100%; }
  .actions .btn--secondaire { flex: 1; }
  .carte-etat { padding: var(--e-4); }
  .etape { grid-template-columns: 1fr; }
  .etape .media { aspect-ratio: 16 / 10; }
}

@media (max-width: 400px) {
  .entete .conteneur { gap: var(--e-2); }
  .marque { gap: 6px; }
  .marque span { font-size: 1.02rem; letter-spacing: 0.03em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .braises { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
@media (forced-colors: active) {
  .btn, .carte-etat, .etape, .faq details { border: 1px solid CanvasText; }
}

/* ---------- Bêta fermée (html[data-beta], posé par accueil.js d'après /api/v1/health) ---------- */
html:not([data-beta]) [data-beta-seul] { display: none !important; }
.bandeau-beta { margin: 0; padding: 6px var(--goutiere); text-align: center; font-size: 0.82rem; font-weight: 700; color: #1B1408; background: var(--dk-or); }
.champ-beta { max-width: 320px; margin-bottom: var(--e-4); }