/* Golden Era — site v4, en aplats : une ouverture en WebGL façon affiche (soleil de rayons, brume en papier découpé,
   lanterne en anneaux nets) qui raconte l'histoire au défilement, puis de grosses box, chacune avec son shader plat.
   Pas de halo, pas de flou, pas d'ombre portée : des couleurs franches, des bords nets.
   Typo : Big Shoulders Display (titres), Figtree (texte), IBM Plex Mono (étiquettes, IP, numéros). */
:root {
  --fond: #140b12;          /* aubergine de nuit */
  --panneau: #1d1119;
  --panneau-2: #26161f;
  --filet: #3a2532;
  --filet-clair: #5a3a4e;
  --texte: #f2e4cc;
  --discret: #a8939f;
  --pomme: #f5a524;         /* la pomme d'or */
  --braise: #f06a30;        /* la flamme de la lanterne */
  --ronce-rouge: #d9404f;   /* la couronne de ronces */
  --cape: #a57be6;          /* la cape */
  --capuche: #9bd13a;       /* la capuche */
  --cobalt: #3d63e0;        /* la ligne bleue : la box de l'Extension */
  --cobalt-nuit: #16247a;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --corps: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --douce: cubic-bezier(.2, .8, .2, 1);
  /* les curseurs maison : la flèche de guingois, la même en or sur ce qui se clique, la lanterne sur l'ouverture */
  --fleche: url(assets/img/curseurs/fleche.svg) 3 2, auto;
  --main: url(assets/img/curseurs/main.svg) 3 2, pointer;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; cursor: var(--fleche); }
a[href], button:not(:disabled), summary, label:has(input[type="checkbox"]) { cursor: var(--main); }
input[type="text"], textarea { cursor: text; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 16px/1.6 var(--corps); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pomme); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--pomme); color: var(--fond); }

.progression { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 3px; transform-origin: 0 50%; transform: scaleX(0); background: var(--pomme); }

/* ─── navigation : transparente sur l'ouverture, aplat ensuite ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px); transition: background .3s, padding .3s, box-shadow .3s;
}
.nav.posee { background: var(--fond); box-shadow: 0 1px 0 var(--filet); padding-block: 9px; }
.marque img { height: 40px; width: auto; transition: opacity .4s, transform .4s var(--douce); }
.nav:not(.posee) .marque img { opacity: 0; transform: translateY(-8px); }   /* le grand logo de l'ouverture suffit */
.liens { display: flex; gap: 30px; }
.liens a { position: relative; text-decoration: none; font: 800 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; opacity: .85; transition: opacity .2s; }
.liens a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--pomme); transform: scaleX(0); transition: transform .25s var(--douce); }
.liens a:hover { opacity: 1; }
.liens a:hover::after { transform: scaleX(1); }
.actions { display: flex; align-items: center; gap: 10px; }
.langue { font: 600 12px var(--mono); letter-spacing: .08em; color: var(--texte); background: var(--fond); border: 1px solid var(--filet-clair); border-radius: 10px; padding: 8px 12px; cursor: var(--main); }
.langue:hover { border-color: var(--pomme); color: var(--pomme); }

/* ─── boutons : aplats, aucun halo ─── */
.btn {
  --tranche: #a8640b; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px 13px; border-radius: 12px; box-shadow: 0 4px 0 var(--tranche);
  border: 1px solid transparent; font: 800 17px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; cursor: var(--main); transition: transform .2s var(--douce), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tranche); }
.btn-or { background: var(--pomme); color: var(--fond); }
.btn-or:hover { background: #ffbd4a; }
.btn-petit { padding: 11px 18px 10px; font-size: 15px; }
.btn-ligne { --tranche: var(--filet); color: var(--texte); background: var(--fond); border-color: var(--filet-clair); }
.btn-ligne:hover { border-color: var(--pomme); color: var(--pomme); }
.btn-blanc { --tranche: #16247a; background: #fff; color: var(--cobalt-nuit); }
.btn-blanc:hover { background: var(--pomme); color: var(--fond); }

/* ═══════════ l'ouverture : scène collante, le défilement fait avancer le récit ═══════════ */
.ouverture { position: relative; height: 340vh; height: 340svh; }
.ancre-recit { position: absolute; top: 68vh; }
.scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: var(--fond); }
.scene.curseur-flamme { cursor: none; }
.feu-follet { position: fixed; inset: 0; z-index: 95; width: 100%; height: 100%; display: block; pointer-events: none; }   /* la flamme du shader est le curseur (les liens et boutons gardent la main dorée) */
.toile { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.toile, .box > .fond { opacity: 0; transition: opacity .6s ease; }
.toile.pret, .box > .fond.pret { opacity: 1; }
.cadre { position: absolute; z-index: 1; width: min(44vw, 540px); max-width: none; pointer-events: none; filter: brightness(.3) saturate(.6); will-change: transform; }
.cadre-hg { top: -5%; left: -7%; }
.cadre-bd { bottom: -7%; right: -7%; }

.heros {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 84px 16px 70px; text-align: center; will-change: opacity, transform;
}
.heros-kicker { font: 600 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--pomme); }
.heros-logo { position: relative; transform-style: preserve-3d; will-change: transform; }
.heros-logo img { width: min(760px, 88vw, 80vh); height: auto; }
html[data-edition="ext"] .heros-logo img { width: min(712px, 84vw, 75vh); }
/* le logo en shader : un canvas 10 % plus grand que l'image (place pour l'ombre), l'image s'efface quand il est prêt */
.toile-logo { position: absolute; inset: -5%; width: 110%; height: 110%; pointer-events: none; opacity: 0; transition: opacity .3s; }
.toile-logo.pret { opacity: 1; }
.logo-shader:has(.toile-logo.pret) img { opacity: 0; }
.heros-accroche { font: 600 clamp(17px, 2vw, 22px)/1.4 var(--corps); }
.heros-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 6px; }
.ip-pilule {
  display: inline-flex; align-items: center; gap: 14px; padding: 5px 5px 5px 18px; border-radius: 12px; cursor: var(--main);
  background: var(--fond); border: 1px solid var(--pomme); box-shadow: 0 4px 0 var(--filet); transition: transform .2s var(--douce), background .2s;
}
.ip-pilule:hover { transform: translateY(-1px); background: var(--panneau); }
.ip-pilule:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--filet); }
.ip-valeur { font: 500 16px var(--mono); color: var(--pomme); letter-spacing: .02em; }
.ip-copier { font: 800 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--fond); background: var(--pomme); padding: 11px 16px 10px; border-radius: 8px; }

.keeper { position: absolute; z-index: 2; right: 9vw; bottom: 5vh; width: auto; max-width: none; opacity: 0; pointer-events: none; will-change: opacity, transform, filter; }
.keeper-marche { height: min(74vh, 680px); }
.keeper-pomme { height: min(66vh, 600px); right: 12vw; bottom: 0; }

.recit { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.recit-ligne { position: absolute; left: max(20px, 8vw); top: 50%; translate: 0 -50%; max-width: min(600px, 48vw); opacity: 0; will-change: opacity, transform; }
.recit-no { display: inline-block; margin-bottom: 16px; padding: 5px 10px 4px; font: 500 12px var(--mono); letter-spacing: .2em; color: var(--fond); background: var(--teinte); border-radius: 4px; }
.recit h2 { font: 900 clamp(54px, 8.4vw, 132px)/.88 var(--display); text-transform: uppercase; color: var(--teinte); text-wrap: balance; }
.recit p { margin-top: 20px; max-width: 40ch; font-size: clamp(16px, 1.5vw, 19px); color: var(--texte); }

.indice { position: absolute; z-index: 3; left: 50%; bottom: 26px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 500 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--discret); white-space: nowrap; }
.indice::after { content: ""; width: 2px; height: 30px; background: var(--pomme); animation: descend 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes descend { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.indice-tactile { display: none; }
@media (hover: none) { .indice-souris { display: none; } .indice-tactile { display: inline; } }

/* ─── le bandeau qui défile : l'affiche du réseau, entre l'ouverture et le livret ─── */
.bandeau { position: relative; z-index: 2; overflow: hidden; background: var(--pomme); color: var(--fond); }
.bandeau-piste { display: flex; width: max-content; animation: defile 40s linear infinite; }
.bandeau span { display: inline-flex; align-items: center; padding: 15px 0 12px; font: 900 clamp(26px, 3.4vw, 44px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.bandeau span::after { content: ""; width: 12px; height: 12px; margin: 0 30px; border-radius: 50%; background: var(--fond); }
.bandeau b { font-weight: inherit; margin-left: .3em; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ═══════════ le livret : grosses box ═══════════ */
.livret { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 120px 16px 170px; display: flex; flex-direction: column; gap: 150px; }
.livret > section { scroll-margin-top: 90px; }
.sh { --taille-sh: clamp(42px, 6.2vw, 88px); display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; row-gap: 14px; margin-bottom: 40px; }
.sh::before { content: ""; height: 4px; background: var(--pomme); align-self: start; margin-top: calc(var(--taille-sh) * .43); }
.sh h2 { grid-column: 2; font: 900 var(--taille-sh)/.9 var(--display); text-transform: uppercase; text-wrap: balance; }
.sh p { grid-column: 2; max-width: 56ch; font-size: 18px; color: var(--discret); }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.box {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: clamp(22px, 2.6vw, 34px); border-radius: 24px; background: var(--panneau); border: 1px solid var(--filet);
  transition: border-color .25s;
}
.box:hover { border-color: var(--filet-clair); }
.box > * { position: relative; z-index: 1; }
.box > .fond { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.box > .perso { position: absolute; z-index: 0; max-width: none; pointer-events: none; }

.etiquette { --bord: clamp(22px, 2.6vw, 34px); align-self: flex-start; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px 7px 12px;
  font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texte); background: var(--fond);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%); }
.box .etiquette:not(.discret), .edition-texte .etiquette { margin-left: calc(-1 * var(--bord)); padding-left: var(--bord); }
.etiquette b { color: var(--pomme); font-weight: 600; }
.etiquette.discret { padding: 0; background: none; clip-path: none; color: var(--discret); }
.box-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.box h3 { font: 900 clamp(38px, 4.4vw, 66px)/.9 var(--display); text-transform: uppercase; text-wrap: balance; }
.box-texte { max-width: 46ch; font-size: 16.5px; color: var(--texte); }
.box-texte.discret { font-size: 15px; color: var(--discret); }
.box-colonne { display: flex; flex-direction: column; gap: 12px; max-width: 60%; }

/* EraRoyale : la grande box, la tempête derrière */
.box-er { grid-column: span 7; grid-row: span 2; min-height: 680px; }
.er-logo { width: min(330px, 72%); margin: 10px 0 0 -8px; }
.box-er h3 { margin-top: auto; }
.modes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.modes li { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--filet-clair); background: var(--fond); transition: transform .25s var(--douce), border-color .2s; }
.modes li:hover { transform: translateY(-3px); border-color: var(--pomme); }
.modes img { width: 100%; height: auto; aspect-ratio: 900 / 382; object-fit: cover; }
.modes span { display: flex; align-items: baseline; gap: 6px; padding: 9px 12px 8px; font: 800 20px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.modes span b { font: 500 11px var(--mono); color: var(--pomme); }

/* Raft : la mer de nuit, le Keeper dans sa barque qui tangue */
.box-raft { grid-column: span 5; min-height: 332px; background: linear-gradient(var(--panneau) 60%, #0c1b20 60%); }
/* le Keeper de profil, debout sur le radeau dessiné par le shader (pont à 30 % du bas, centré à 74 %) */
.box-raft > .perso-radeau { height: 44%; width: auto; left: 65.5%; bottom: 27%; translate: -50% 0; animation: tangue 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes tangue { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }

/* le Verger : soleil plat, le pommier tordu */
.box-verger { grid-column: span 5; min-height: 332px; }

/* les 7 ligues */
.box-ligues { grid-column: 1 / -1; }
.ligues { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.ligues li::after { content: ""; order: 9; align-self: stretch; height: calc(12px + var(--i, 0) * 11px); margin: 10px 6px 0; border-radius: 6px 6px 0 0;
  background: var(--pomme); opacity: calc(.18 + var(--i, 0) * .13); }
.ligues li { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 4px 10px; text-align: center; border-radius: 16px; transition: background .2s, transform .25s var(--douce); }
.ligues li:hover { background: var(--panneau-2); transform: translateY(-4px); }
.ligues img { width: min(92px, 100%); height: auto; margin-bottom: 6px; }
.ligues .no { font: 500 11px var(--mono); color: var(--discret); }
.ligues b { font: 800 19px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.ligues li:last-child b { color: var(--pomme); }
.box-ligues.vu .ligues li { animation: monte .5s var(--douce) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } }

/* ═══ les deux éditions : la V1 (l'or) et l'Extension (la ligne bleue), comme deux pochettes d'un même album ═══ */
.editions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.edition { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; border: 1px solid var(--filet); background: var(--panneau); }
.edition-ext { color: #fff; background: #3d63e0; border-color: #3d63e0; }
.pochette-ed { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 1 / .74; overflow: hidden; }
.edition-v1 .pochette-ed { background: #f5a524; }
.edition-v1 .pochette-ed::before { content: ""; position: absolute; z-index: -1; inset: 12% 8% 10% 14%; background: #e2901a; clip-path: polygon(4% 8%, 100% 0, 92% 100%, 0 88%); }
.edition-v1 .pochette-ed::after { content: ""; position: absolute; z-index: -1; left: -4%; bottom: -6%; width: 46%; height: 40%; background: #c97c12; clip-path: polygon(0 30%, 100% 0, 84% 100%, 0 100%); }
.pochette-ed > .fond { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; }
.pochette-ed > .fond.pret { opacity: 1; }
.pochette-logo-ed { width: 80%; height: auto; filter: drop-shadow(8px 9px 0 #140b12); }
.edition-ext .pochette-logo-ed { filter: drop-shadow(8px 9px 0 #16247a); }
.tampon { position: absolute; top: 22px; left: 0; padding: 9px 22px 8px 16px; background: #f5a524; color: #16247a;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); font: 600 13px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.tampon-v1 { background: #140b12; color: #f5a524; }
.edition-texte { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(22px, 2.6vw, 34px); }
.edition h3 { font: 900 clamp(40px, 4.4vw, 64px)/.9 var(--display); text-transform: uppercase; }
.edition-ext h3 span { color: #f5a524; }
.etiquette-claire { color: #fff; background: #16247a; }
.edition-pistes { list-style: none; margin: 0; padding: 0; align-self: stretch; }
.edition-pistes li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--filet);
  font: 800 21px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.edition-pistes li:last-child { border-bottom: 0; }
.edition-pistes small { font: 600 12px var(--mono); color: var(--pomme); }
.edition-ext .edition-pistes li { border-color: rgba(255, 255, 255, .3); }
.edition-ext .edition-pistes small { color: #f5a524; }
.cache { display: block; width: var(--l, 50%); height: 14px; border-radius: 2px; background: #140b12; }   /* caviardé */
.extension-note { margin-top: -6px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.edition-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.edition-v1 .btn { margin-top: auto; }
.btn-ligne-claire { --tranche: #16247a; color: #fff; background: transparent; border-color: rgba(255, 255, 255, .6); }
.btn-ligne-claire:hover { background: #fff; color: #16247a; border-color: #fff; }

/* ═══ l'Extension en aperçu : tout le site passe à la ligne bleue (les shaders suivent via u_ed) ═══ */
html[data-edition="ext"] {
  --main: url(assets/img/curseurs/main_ext.svg) 3 2, pointer;
  --fond: #090c1d; --panneau: #0e1330; --panneau-2: #151c42; --filet: #263063; --filet-clair: #3a4a8a;
  --discret: #96a3cc; --pomme: #7f9cf5; --braise: #3d63e0; --cape: #7fa0ff;
}
body, .box, .edition, .nav.posee, .pied, .etiquette, .vitrine li, .dc-app * { transition: background-color .6s ease, border-color .6s ease, color .4s ease; }
html[data-edition="ext"] .pied, html[data-edition="ext"] .pied-barre { background: #060816; }
html[data-edition="ext"] .dc-rail, html[data-edition="ext"] .dc-moi { background: #060816; }
.bascule-edition { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--fond); border: 1px solid var(--filet-clair); }
.bascule-edition button { padding: 6px 10px 5px; border: 0; border-radius: 7px; background: none; cursor: var(--main); font: 600 12px var(--mono); letter-spacing: .06em; color: var(--discret); }
.bascule-edition button[aria-pressed="true"] { background: var(--pomme); color: var(--fond); }
.badge-edition { position: fixed; left: 16px; bottom: 16px; z-index: 55; display: none; padding: 10px 14px 9px; border: 0; border-radius: 10px; box-shadow: 0 4px 0 #16247a; cursor: var(--main);
  background: #3d63e0; color: #fff; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
html[data-edition="ext"] .badge-edition { display: block; }

/* ═══ le Discord : le serveur comme dans l'appli (rail des serveurs, salons, fil, barre de saisie) ═══ */
.box-discord { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: 28px 36px; align-items: start; }
.discord-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 6px; }
.box-discord h2 { font: 900 clamp(40px, 4.6vw, 68px)/.9 var(--display); text-transform: uppercase; text-wrap: balance; }
.dc-vue { display: flex; gap: 18px; }
.dc-vue button { padding: 4px 0; border: 0; border-bottom: 2px solid transparent; background: none; cursor: var(--main); font: 800 17px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--discret); }
.dc-vue button:hover { color: var(--texte); }
.dc-vue button[aria-pressed="true"] { color: var(--pomme); border-color: var(--pomme); }

.dc-app { display: grid; grid-template-columns: 64px 232px minmax(0, 1fr); height: 560px; overflow: hidden; border-radius: 14px; border: 1px solid var(--filet); font-family: var(--corps); }
.dc-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; background: #0b0609; }
.dc-serveur { position: relative; width: 48px; height: 48px; }
.dc-serveur img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.dc-serveur::before { content: ""; position: absolute; left: -8px; top: 8px; width: 4px; height: 32px; border-radius: 0 4px 4px 0; background: var(--texte); }
.dc-rail { position: relative; }
.dc-sep { width: 32px; height: 2px; border-radius: 1px; background: var(--filet); }
.dc-rond { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--panneau); color: var(--capuche); }
.dc-rond svg { width: 22px; height: 22px; }
.dc-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fond); }
.dc-banniere { position: relative; flex: none; height: 110px; overflow: hidden; }
.dc-banniere img { width: 100%; height: 100%; object-fit: cover; }
.dc-banniere b { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: rgba(11, 6, 9, .78); font: 700 15px var(--corps); }
.dc-banniere svg { width: 12px; height: 12px; }
.dc-hauts { flex: none; display: flex; flex-direction: column; padding: 8px 8px 6px; border-bottom: 1px solid var(--filet); }
.dc-hauts div { display: flex; align-items: center; gap: 10px; padding: 5px 8px; font-size: 14px; font-weight: 500; color: var(--discret); }
.dc-hauts svg { width: 16px; height: 16px; flex: none; }
.dc-salons { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 12px; scrollbar-width: thin; scrollbar-color: var(--filet) transparent; }
.dc-cat { display: flex; align-items: center; gap: 4px; padding: 16px 4px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--discret); }
.dc-cat svg { width: 10px; height: 10px; }
.dc-cat.feat { color: var(--pomme); }
.dc-salon { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: 0; border-radius: 4px; background: none; text-align: left; cursor: var(--main);
  font: 500 15px var(--corps); color: var(--discret); }
.dc-salon:hover { background: var(--panneau); color: var(--texte); }
.dc-salon[aria-current="true"] { background: var(--panneau-2); color: var(--texte); }
.dc-gl { width: 20px; flex: none; display: grid; place-items: center; font-size: 20px; line-height: 1; font-weight: 400; color: var(--discret); }
.dc-gl svg { width: 18px; height: 18px; }
.dc-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-cap { margin-left: auto; font: 500 11px var(--mono); color: var(--discret); }
.dc-moi { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #0b0609; color: var(--discret); }
.dc-moi > svg { width: 20px; height: 20px; flex: none; }
.dc-avatar { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--panneau-2); display: grid; place-items: center; }
.dc-avatar img { width: 32px; height: 32px; border-radius: 50%; }
.dc-avatar::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--capuche); border: 3px solid #0b0609; }
.dc-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.dc-qui b { font-size: 14px; color: var(--texte); }
.dc-qui small { font-size: 12px; }

.dc-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panneau); }
.dc-barre { flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-bottom: 1px solid #0b0609; white-space: nowrap; overflow: hidden; }
.dc-nom-barre { font-size: 16px; }
.dc-sujet-barre { min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--filet); font-size: 14px; color: var(--discret); }
.dc-fil { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 16px 8px; }
.dc-fil > * { animation: leve .25s ease-out both; }
@keyframes leve { from { opacity: .3; transform: translateY(5px); } }
.dc-debut { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 14px; }
.dc-debut-ico { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 6px; border-radius: 50%; background: var(--panneau-2); font-size: 42px; color: var(--texte); }
.dc-debut-ico svg { width: 36px; height: 36px; }
.dc-debut h3 { font: 800 28px/1.15 var(--corps); text-transform: none; }
.dc-debut p { color: var(--discret); font-size: 15px; }
.dc-debut .btn { margin-top: 8px; padding: 10px 16px 9px; font-size: 15px; border-radius: 4px; }
.dc-message { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 6px 0 2px; }
.dc-message > img { width: 40px; height: 40px; border-radius: 50%; }
.dc-auteur { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.dc-auteur b { color: var(--pomme); font-weight: 600; }
.dc-auteur span { font-size: 12px; color: var(--discret); }
.dc-corps { display: flex; flex-direction: column; gap: 1px; font-size: 15px; line-height: 1.4; color: var(--texte); }
.dc-corps h4 { margin: 2px 0 6px; font: 800 24px/1.1 var(--corps); }
.dc-corps p b { font-weight: 700; }
.dc-corps code { font: 500 13px var(--mono); padding: 1px 5px; border-radius: 4px; background: var(--fond); color: var(--texte); }
.dc-corps blockquote { margin: 6px 0 0; padding-left: 10px; border-left: 4px solid var(--filet-clair); }
.dc-corps small { font-size: 12px; color: var(--discret); }
.dc-saisie { flex: none; display: flex; align-items: center; gap: 12px; margin: 0 16px 16px; padding: 11px 14px; border-radius: 8px; background: var(--panneau-2); font-size: 15px; color: var(--discret); }
.dc-saisie svg { width: 22px; height: 22px; flex: none; }
.dc-saisie.fermee { justify-content: center; font-size: 14px; }

/* ═══ grades : la route du Keeper, des cartes en aplats à la couleur du grade ═══ */
.rangs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rang { gap: 10px; padding: 10px 10px 20px; }
.rang:hover { border-color: var(--teinte); }
.rang-scene { position: relative; isolation: isolate; display: grid; place-items: end center; aspect-ratio: 1 / 1.05; overflow: hidden; border-radius: 16px;
  background: color-mix(in srgb, var(--teinte), #140b12 30%); }
/* derrière le perso, un panneau de guingois à la couleur du grade ; devant, un socle en biais qui lui coupe la taille */
.rang-scene::before { content: ""; position: absolute; z-index: -1; inset: 10% 11% 14% 12%; background: var(--teinte); clip-path: polygon(8% 0, 100% 7%, 93% 100%, 0 94%); }
.rang-scene::after { content: ""; position: absolute; z-index: 1; left: -3%; right: -3%; bottom: 0; height: 17%; background: color-mix(in srgb, var(--teinte), #140b12 55%);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%); }
.rang-no { z-index: 2; }
@keyframes tourne { to { rotate: 360deg; } }
.rang-no { position: absolute; top: 12px; left: 16px; font: 900 58px/.9 var(--display); color: #140b12; }
.rang-img { position: relative; width: 86%; height: auto; margin-bottom: 0; transition: transform .4s var(--douce); }
.rang:hover .rang-img { transform: translateY(-10px); }
.rang h3 { display: flex; align-items: center; gap: 10px; padding: 8px 10px 0; font-size: clamp(30px, 3vw, 44px); color: var(--teinte); }
.rang h3 img { width: 26px; height: 26px; border-radius: 6px; }
.rang p { padding: 0 10px; color: var(--discret); }

/* ═══ boutique + rejoindre ═══ */
.box-boutique { grid-column: span 7; }
.vitrine { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* chaque article devant un panneau de guingois à la couleur de sa rareté, le nom dessous */
.vitrine li { --r: var(--filet-clair); position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; overflow: hidden;
  border-radius: 14px; text-align: center; background: color-mix(in srgb, var(--r), #140b12 72%); font-weight: 600; font-size: 14.5px; transition: transform .25s var(--douce); }
.vitrine li::before { content: ""; position: absolute; z-index: -1; left: 16%; right: 16%; top: 9%; height: 58%; background: color-mix(in srgb, var(--r), #140b12 25%); clip-path: polygon(6% 0, 100% 8%, 94% 100%, 0 92%); }
.vitrine li:hover { transform: translateY(-4px); }
.vitrine img { width: 66%; height: auto; filter: drop-shadow(5px 5px 0 rgba(20, 11, 18, .4)); transition: transform .35s var(--douce); }
.vitrine li:hover img { transform: translateY(-5px); }
.vitrine .or span { color: var(--pomme); }
.box-boutique > .btn { align-self: flex-start; margin-top: auto; }


.box-rejoindre { grid-column: span 5; min-height: 640px; justify-content: flex-end; background: var(--fond); }
.box-rejoindre > .perso-portail { height: 48%; width: auto; right: 6%; top: 6%; }
.rejoindre-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.adresse { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 18px; background: var(--panneau); border: 1px solid var(--filet); }
.adresse div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adresse small { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--discret); }
.adresse code { font: 500 clamp(17px, 2vw, 22px) var(--mono); color: var(--pomme); overflow-wrap: anywhere; }

/* logos vivants : une ombre plate qui part à l'opposé du curseur (la lanterne) et un reflet en deux bandes nettes */
.logo-vivant { --ox: 6px; --oy: 7px; --ombre: #0a0509; --reflet: rgba(255, 246, 220, .6); position: relative; display: block; }
.logo-vivant img { display: block; width: 100%; height: auto; filter: drop-shadow(var(--ox) var(--oy) 0 var(--ombre)); transition: filter .12s linear; }
.logo-vivant::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--masque) center / 100% 100% no-repeat; mask: var(--masque) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 0 44%, var(--reflet) 44% 46.5%, transparent 46.5% 48%, var(--reflet) 48% 48.8%, transparent 48.8% 100%) 100% 0 / 300% 100% no-repeat;
  animation: reflet 7s ease-in-out infinite;
}
@keyframes reflet { 0%, 62% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* apparition au défilement */
.apparait { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s var(--douce); }
.apparait.vu { opacity: 1; transform: none; }

/* ═══ pied de page : le lever de la pomme d'or derrière le grand logo, le verger en silhouettes, le Keeper assis ═══ */
.pied { position: relative; background: #0e070c; }
.pied-scene { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 640px; height: min(100vh, 940px);
  padding: 70px 16px 120px; text-align: center; background: var(--fond); }
.pied-scene > .fond { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.pied-scene > .fond.pret { opacity: 1; }
.pied-centre { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pied-kicker { padding: 7px 13px 6px; border-radius: 4px; background: var(--fond); font: 600 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--pomme); }   /* posé sur le soleil : une étiquette pleine */
.pied-logo { position: relative; width: min(740px, 88vw, 72vh); }
html[data-edition="ext"] .pied-logo { width: min(692px, 84vw, 67vh); }
.pied-logo img { width: 100%; height: auto; }
.pied-accroche { font: 600 clamp(17px, 2vw, 22px)/1.4 var(--corps); color: var(--texte); }
.pied-keeper { position: absolute; z-index: 1; right: max(16px, 8vw); bottom: 0; height: min(34%, 300px); width: auto; }   /* de dos, il regarde la pomme se lever */
.pied-barre { padding: 30px 16px 36px; text-align: center; }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; font: 800 17px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pied-liens a { text-decoration: none; opacity: .85; transition: color .2s, opacity .2s; }
.pied-liens a:hover { color: var(--pomme); opacity: 1; }
.pied-bas { max-width: 1000px; margin: 24px auto 0; padding-top: 20px; border-top: 1px solid var(--filet); font-size: 14px; color: var(--discret); }
.pied-bas strong { color: var(--texte); }
.mention { margin-top: 4px; font-size: 12.5px; opacity: .8; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 70; translate: -50% 140px; padding: 12px 20px 11px; border-radius: 10px;
  background: var(--pomme); color: var(--fond); font: 800 17px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; transition: translate .4s var(--douce); }
.toast.visible { translate: -50% 0; }

/* ─── tablette ─── */
@media (max-width: 1000px) {
  .liens { display: none; }
  .box-er { grid-column: 1 / -1; grid-row: auto; min-height: 620px; }
  .box-raft, .box-verger { grid-column: span 6; }
  .editions { grid-template-columns: minmax(0, 1fr); }
  .rangs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .box-boutique, .box-rejoindre { grid-column: 1 / -1; }
  .box-discord { grid-template-columns: minmax(0, 1fr); }
  .keeper { right: 4vw; }
  .recit-ligne { max-width: min(560px, 56vw); }
}
/* ─── téléphone ─── */
@media (max-width: 680px) {
  .livret { gap: 110px; padding-top: 80px; }
  .sh { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; margin-bottom: 28px; }
  .sh p { font-size: 16.5px; }
  .box { border-radius: 20px; }
  .box-raft, .box-verger { grid-column: 1 / -1; min-height: 460px; }
  .box-raft > .perso-radeau { height: 31%; bottom: 18%; }
  .box-er { min-height: 0; }
  .er-logo { margin-bottom: 70px; }
  .box-colonne { max-width: 64%; }
  .modes { gap: 8px; }
  .modes span { font-size: 16px; padding: 7px 8px 6px; }
  .modes span b { display: none; }
  .ligues { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
  .rangs { gap: 10px; }
  .rang { padding: 8px 8px 14px; gap: 6px; }
  .rang-no { font-size: 40px; top: 8px; left: 10px; }
  .rang h3 { font-size: 22px; gap: 7px; padding: 6px 6px 0; white-space: nowrap; }
  .rang h3 img { width: 20px; height: 20px; }
  .rang p { font-size: 14px; padding: 0 6px; }
  .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-app { grid-template-columns: 56px minmax(0, 1fr); height: auto; }
  .dc-rail { grid-row: 1; gap: 6px; }
  .dc-serveur, .dc-rond { width: 40px; height: 40px; }
  .dc-chat { grid-column: 1 / -1; min-height: 420px; }
  .dc-salons { max-height: 300px; }
  .box-rejoindre { min-height: 680px; }
  .box-rejoindre > .perso-portail { height: 34%; right: 4%; top: 4%; }
  .adresse { flex-wrap: wrap; }
  .adresse .btn { flex: 1 0 100%; }
  .cadre { width: 70vw; }
  .heros { gap: 14px; padding-bottom: 96px; }
  .heros-actions { flex-direction: column; }
  .bandeau span::after { margin: 0 20px; width: 9px; height: 9px; }
  /* le récit en haut, le Keeper en bas, centré */
  .recit-ligne { left: 20px; right: 20px; top: 13vh; translate: none; max-width: none; }
  .recit h2 { font-size: clamp(46px, 13vw, 72px); }
  .recit p { margin-top: 14px; font-size: 16px; }
  .keeper { left: 0; right: 0; margin: 0 auto; bottom: 3vh; }
  .keeper-marche { height: 42vh; }
  .keeper-pomme { height: 36vh; bottom: 5vh; right: 0; }
  .pied-scene { height: auto; min-height: 92vh; padding: 80px 16px 130px; }
  .pied-keeper { height: 150px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .apparait { opacity: 1; transform: none; }
}

/* ═══════════ la page boutique ═══════════ */
.page-boutique .nav .marque img { opacity: 1; transform: none; }
.liens a[aria-current="page"] { opacity: 1; color: var(--pomme); }
.boutique-tete { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 24px;
  min-height: min(82vh, 760px); padding: 110px max(16px, calc(50% - 604px)) 40px; background: var(--fond); }
.boutique-tete > .fond { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; }
.boutique-tete > .fond.pret { opacity: 1; }
.boutique-tete-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.boutique-tete h1 { font: 900 clamp(60px, 9vw, 140px)/.84 var(--display); text-transform: uppercase; text-wrap: balance; }
.boutique-tete-lead { max-width: 44ch; font-size: clamp(17px, 1.6vw, 20px); }
.boutique-tete-perso { position: relative; align-self: end; display: grid; place-items: end end; height: 100%; margin-bottom: -40px; }
.boutique-keeper { height: min(56vh, 500px); width: auto; filter: drop-shadow(10px 8px 0 rgba(8, 4, 7, .55)); }

.boutique-livret { gap: 90px; }
/* l'article à la une : un billet d'or ; le talon (à droite) se détache le long des pointillés, deux encoches les marquent */
.vedette { --talon: 300px; display: grid; grid-template-columns: minmax(0, 1fr) var(--talon); border-radius: 22px; background: #f5a524; color: #140b12;
  -webkit-mask: radial-gradient(circle at calc(100% - var(--talon)) 0, #0000 17px, #000 17.5px) top / 100% 51% no-repeat,
    radial-gradient(circle at calc(100% - var(--talon)) 100%, #0000 17px, #000 17.5px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at calc(100% - var(--talon)) 0, #0000 17px, #000 17.5px) top / 100% 51% no-repeat,
    radial-gradient(circle at calc(100% - var(--talon)) 100%, #0000 17px, #000 17.5px) bottom / 100% 51% no-repeat; }
.vedette-billet { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 44px);
  padding: clamp(26px, 3.6vw, 52px); overflow: hidden; }
.vedette-billet::before { content: ""; position: absolute; z-index: -1; left: -6%; top: -30%; width: 46%; height: 160%; background: #e2901a; clip-path: polygon(0 0, 78% 6%, 100% 100%, 8% 92%); }
.vedette-img { width: clamp(150px, 18vw, 250px); height: auto; filter: drop-shadow(9px 9px 0 rgba(20, 11, 18, .45)); transition: transform .4s var(--douce); }
.vedette:hover .vedette-img { transform: rotate(-4deg) translateY(-6px); }
.vedette-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.vedette-etiquette { font: 600 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.vedette h2 { font: 900 clamp(54px, 7vw, 108px)/.84 var(--display); text-transform: uppercase; }
.vedette p { max-width: 34ch; font-size: 18px; font-weight: 500; }
.vedette-talon { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 28px clamp(22px, 2.6vw, 36px);
  border-left: 3px dashed rgba(20, 11, 18, .35); }
.vedette-talon small { font: 600 11.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.vedette-talon .btn { width: 100%; }
.vedette .prix { font-size: 56px; color: #140b12; }
.vedette .prix.bientot { color: rgba(20, 11, 18, .7); }
.btn-nuit { background: #140b12; color: #f5a524; }
.btn-nuit:hover { background: #2a1626; }
.btn-nuit { --tranche: #8a5509; }
.btn:disabled { --tranche: var(--filet); }
.btn-or.dedans { --tranche: var(--pomme); }
html[data-edition="ext"] .btn-or { --tranche: #3d4f9c; }

/* les rayons et les cartes */
.rayons { display: flex; gap: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--filet); overflow-x: auto; scrollbar-width: none; }
.rayons button { position: relative; flex: none; padding: 12px 0 13px; border: 0; background: none; color: var(--discret); cursor: var(--main);
  font: 800 18px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; transition: color .2s; }
.rayons button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--pomme); transform: scaleX(0); transition: transform .25s var(--douce); }
.rayons button:hover { color: var(--texte); }
.rayons button[aria-pressed="true"] { color: var(--texte); }
.rayons button[aria-pressed="true"]::after { transform: none; }
.produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.produit { display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 16px; border-radius: 22px; background: var(--panneau); border: 1px solid var(--filet);
  animation: leve .3s ease-out both; transition: border-color .25s, transform .25s var(--douce); }
.produit:hover { border-color: var(--r); transform: translateY(-4px); }
.produit-scene { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 1 / .86; overflow: hidden; border-radius: 16px;
  background: color-mix(in srgb, var(--r), #140b12 30%); }
.produit-scene::before { content: ""; position: absolute; z-index: -1; inset: 9% 12% 16% 13%; background: var(--r); clip-path: polygon(7% 0, 100% 8%, 94% 100%, 0 93%); }
.produit-socle { position: absolute; z-index: 1; left: -3%; right: -3%; bottom: 0; height: 21%; background: color-mix(in srgb, var(--r), #140b12 55%); clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 100%); }
.produit-scene img { position: relative; z-index: 2; width: 62%; height: auto; margin-bottom: 8%; filter: drop-shadow(7px 7px 0 rgba(20, 11, 18, .42)); transition: transform .35s var(--douce); }
.produit-scene img.buste { z-index: 0; width: 80%; align-self: end; margin-bottom: 0; filter: none; }
.produit:hover .produit-scene img { transform: translateY(-7px); }
.produit-rarete { position: absolute; z-index: 3; top: 12px; left: 0; padding: 6px 16px 5px 12px; background: #140b12; color: var(--r);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.produit-corps { flex: 1; display: flex; flex-direction: column; }
.produit-cat { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--discret); padding: 0 8px; }
.produit h3 { padding: 4px 8px 0; font: 900 32px/.92 var(--display); text-transform: uppercase; }
.produit p { padding: 4px 8px 0; color: var(--discret); font-size: 15px; }
.produit-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: auto 8px 0; padding-top: 12px; border-top: 1px solid var(--filet); }
.prix { font: 900 28px/1 var(--display); color: var(--texte); }
.prix.bientot { font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--discret); }

/* l'aide */
.aide { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 10px 32px; padding-bottom: 0; }
.aide-keeper { height: 300px; width: auto; align-self: end; }
.aide-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-block: clamp(22px, 2.6vw, 34px); }
.aide h2 { font: 900 clamp(36px, 4.4vw, 60px)/.9 var(--display); text-transform: uppercase; }

.pied-marque img { height: 64px; width: auto; margin: 0 auto 22px; }

@media (max-width: 1000px) {
  .boutique-tete { grid-template-columns: minmax(0, 1fr); padding-top: 100px; }
  .boutique-tete-perso { display: none; }
  .vedette { grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; }
  .vedette-talon { flex-direction: row; flex-wrap: wrap; align-items: center; border-left: 0; border-top: 3px dashed rgba(20, 11, 18, .35); }
  .vedette-talon small { flex-basis: 100%; }
  .vedette-talon .btn { width: auto; flex: 1; }
}
@media (max-width: 680px) {
  .boutique-tete { min-height: 0; padding-bottom: min(84vw, 330px); }
  .vedette-billet { grid-template-columns: minmax(0, 1fr); }
  .vedette-img { width: 150px; }
  .vedette .prix { font-size: 44px; }
  .produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .produit { padding: 8px 8px 12px; gap: 8px; border-radius: 18px; }
  .produit h3 { font-size: 22px; padding: 0 4px; }
  .produit p, .produit-cat { padding: 0 4px; font-size: 13px; }
  .produit-pied { margin: auto 4px 0; flex-direction: column; align-items: stretch; }
  .produit-pied .btn { width: 100%; }
  .prix { font-size: 22px; }
  .aide { grid-template-columns: minmax(0, 1fr); }
  .aide-keeper { display: none; }
  .aide-texte { padding-bottom: 22px; }
}

/* ═══════════ le panier : bouton de la nav, tiroir à droite, voile plat ═══════════ */
.panier-bouton { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; cursor: var(--main);
  border: 1px solid var(--filet-clair); background: var(--fond); color: var(--texte); transition: border-color .2s, color .2s; }
.panier-bouton:hover { border-color: var(--pomme); color: var(--pomme); }
.panier-bouton svg { width: 19px; height: 19px; }
.panier-compte { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--pomme); color: var(--fond);
  font: 700 11px/20px var(--mono); text-align: center; animation: leve .3s var(--douce); }
.btn-or.dedans { background: var(--fond); color: var(--pomme); border-color: var(--pomme); }
.fige { overflow: hidden; }
.voile { position: fixed; inset: 0; z-index: 80; background: rgba(8, 4, 7, .66); opacity: 0; transition: opacity .3s; }
.voile.ouvert { opacity: 1; }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(440px, 100%); display: flex; flex-direction: column;
  background: var(--fond); border-left: 1px solid var(--filet); transform: translateX(100%); transition: transform .32s var(--douce); }
.tiroir.ouvert { transform: none; }
.tiroir-tete { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--filet); }
.tiroir-tete h2 { font: 900 34px/.9 var(--display); text-transform: uppercase; }
.tiroir-fermer { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--filet-clair); background: none; color: var(--texte); cursor: var(--main); }
.tiroir-fermer:hover { border-color: var(--pomme); color: var(--pomme); }
.tiroir-fermer svg { width: 18px; height: 18px; }
.tiroir-lignes { flex: 1; list-style: none; margin: 0; padding: 6px 22px; overflow-y: auto; }
.tiroir-lignes:empty { display: none; }
.ligne { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.ligne:last-child { border-bottom: 0; }
.ligne.nouvelle { animation: arrive .45s var(--douce); }
@keyframes arrive { from { opacity: 0; transform: translateX(28px); } }
.ligne-vignette { position: relative; display: grid; place-items: center; width: 64px; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--r); }
.ligne-vignette img { width: 72%; height: auto; }
.ligne-vignette img.buste { width: 100%; align-self: end; margin-bottom: -8%; }
.ligne-infos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ligne-infos b { font: 900 22px/1 var(--display); text-transform: uppercase; }
.ligne-infos small { font-size: 13.5px; color: var(--discret); }
.ligne-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.pas { display: inline-flex; align-items: center; border: 1px solid var(--filet-clair); border-radius: 9px; }
.pas button { width: 32px; height: 30px; border: 0; background: none; color: var(--texte); font: 600 16px var(--mono); cursor: var(--main); }
.pas button:hover:not(:disabled) { color: var(--pomme); }
.pas button:disabled { opacity: .3; cursor: var(--fleche); }
.pas output { min-width: 20px; text-align: center; font: 600 14px var(--mono); }
.lien-discret { padding: 0; border: 0; background: none; color: var(--discret); font: 500 13.5px var(--corps); text-decoration: underline; text-underline-offset: 3px; cursor: var(--main); }
.lien-discret:hover { color: var(--texte); }
.ligne-prix { padding-top: 2px; font: 800 21px/1 var(--display); white-space: nowrap; }
.tiroir-vide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.tiroir-vide img { height: 210px; width: auto; margin-bottom: 8px; }
.tiroir-vide b { font: 900 34px/.95 var(--display); text-transform: uppercase; }
.tiroir-vide p { max-width: 30ch; margin-bottom: 8px; color: var(--discret); }
.tiroir-pied { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--filet); background: var(--panneau); }
.tiroir-total { display: flex; justify-content: space-between; align-items: baseline; }
.tiroir-total span { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--discret); }
.tiroir-total b { font: 900 36px/1 var(--display); }
.tiroir-note { font-size: 13px; color: var(--discret); }
.tiroir-pied .btn { width: 100%; }
.tiroir-pied .lien-discret { align-self: center; }
.pastille-apercu { position: fixed; right: 16px; bottom: 16px; z-index: 55; padding: 9px 14px 8px; border-radius: 8px; pointer-events: none;
  background: var(--fond); border: 1px solid var(--pomme); color: var(--pomme); font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ═══════════ la caisse : ultra lisible, une colonne de questions, le récap collé à droite ═══════════ */
.page-caisse .nav .marque img, .page-legal .nav .marque img { opacity: 1; transform: none; }
.caisse-sur { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--discret); }
.caisse-sur svg { width: 16px; height: 16px; color: var(--capuche); }
.caisse-ok { color: var(--capuche); }
.caisse { max-width: 1160px; margin: 0 auto; padding: 108px 16px 90px; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; font-size: 14px; color: var(--discret); }
.fil a { color: var(--texte); text-decoration: none; }
.fil a:hover { color: var(--pomme); }
.fil b { font-weight: 600; color: var(--texte); }
.fil > span[aria-hidden] { opacity: .5; }
.caisse-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 48px; align-items: start; }
.caisse-form { display: flex; flex-direction: column; gap: 44px; min-width: 0; }
.caisse-tete h1 { font: 900 clamp(48px, 5.4vw, 76px)/.88 var(--display); text-transform: uppercase; }
.caisse-tete p { max-width: 48ch; margin-top: 12px; font-size: 17px; color: var(--discret); }
.bloc { display: flex; flex-direction: column; gap: 14px; }
.bloc h2 { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--filet); font: 900 26px/1 var(--display); text-transform: uppercase; }

.champ { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; cursor: text;
  border-radius: 18px; background: var(--fond); border: 1.5px solid var(--filet-clair); transition: border-color .2s; }
.champ:focus-within { border-color: var(--pomme); }
.champ.faux { border-color: var(--ronce-rouge); }
.champ-tete img { width: 46px; height: 46px; border-radius: 10px; background: var(--panneau-2); }
.champ.bon .champ-tete img { image-rendering: pixelated; }
.champ-corps { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.champ-label { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--discret); }
.champ input { width: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--texte); font: 600 22px/1.25 var(--corps); }
.champ input::placeholder { color: var(--filet-clair); }
.champ-ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--capuche); color: var(--fond); opacity: 0; transform: scale(.5);
  transition: opacity .2s, transform .25s var(--douce); }
.champ-ok svg { width: 16px; height: 16px; }
.champ.bon .champ-ok { opacity: 1; transform: none; }
.champ-aide { padding-left: 4px; font-size: 14px; color: var(--discret); }
.champ-aide.faux { color: var(--ronce-rouge); }
.interrupteur { position: relative; display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin-top: 4px; cursor: var(--main); font-weight: 600; }
.interrupteur input, .case input { position: absolute; opacity: 0; pointer-events: none; }
.glissiere { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--filet); transition: background .2s; }
.glissiere::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--texte); transition: transform .25s var(--douce), background .2s; }
.interrupteur input:checked + .glissiere { background: var(--pomme); }
.interrupteur input:checked + .glissiere::after { transform: translateX(18px); background: var(--fond); }
.interrupteur input:focus-visible + .glissiere, .case input:focus-visible + .coche { outline: 2px solid var(--pomme); outline-offset: 3px; }
.cadeau-champ { display: flex; flex-direction: column; gap: 10px; animation: leve .3s ease-out both; }

.case { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 6px 0 20px; cursor: var(--main); border-bottom: 1px solid var(--filet); }
.case:last-child { border-bottom: 0; padding-bottom: 0; }
.case:hover .coche { border-color: var(--pomme); }
.coche { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--filet-clair); transition: background .2s, border-color .2s; }
.coche::after { content: ""; width: 12px; height: 6px; border-left: 2.5px solid var(--fond); border-bottom: 2.5px solid var(--fond); opacity: 0;
  transform: translateY(-2px) rotate(-45deg) scale(.4); transition: transform .2s var(--douce), opacity .15s; }
.case input:checked + .coche { background: var(--pomme); border-color: var(--pomme); }
.case input:checked + .coche::after { opacity: 1; transform: translateY(-2px) rotate(-45deg); }
.case-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 15.5px; line-height: 1.5; }
.case-texte a { color: var(--pomme); font-weight: 600; text-underline-offset: 3px; }
.case-texte small { font: 500 11.5px var(--mono); letter-spacing: .04em; color: var(--discret); }
.case-liens { font-size: 14px; color: var(--discret); }

.recap { position: sticky; top: 92px; }
.recap-carte { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 24px; background: var(--panneau); border: 1px solid var(--filet); }
.recap-tete { display: flex; justify-content: space-between; align-items: baseline; }
.recap-tete h2 { font: 900 28px/1 var(--display); text-transform: uppercase; }
.recap-tete a { font-size: 14px; font-weight: 600; color: var(--pomme); text-underline-offset: 3px; }
.recap-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.recap-lignes li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.recap-lignes .ligne-vignette { width: 52px; border-radius: 12px; }
.recap-lignes .ligne-infos b { font-size: 19px; }
.recap-lignes .ligne-prix { font-size: 19px; }
.ligne-qte { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--fond); color: var(--texte); font: 600 11px/18px var(--mono); text-align: center; }
.code-promo summary { list-style: none; cursor: var(--main); font-size: 14px; color: var(--discret); }
.code-promo summary::-webkit-details-marker { display: none; }
.code-promo summary::before { content: "+ "; font-family: var(--mono); color: var(--pomme); }
.code-promo[open] summary::before { content: "− "; }
.code-promo summary:hover { color: var(--texte); }
.code-promo-champ { display: flex; gap: 8px; margin-top: 10px; }
.code-promo-champ input { flex: 1; min-width: 0; padding: 10px 14px; outline: 0; border-radius: 10px; border: 1.5px solid var(--filet-clair); background: var(--fond); color: var(--texte);
  font: 600 14px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.code-promo-champ input:focus { border-color: var(--pomme); }
.codes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.codes:empty { display: none; }
.codes li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border-radius: 8px; background: var(--fond); border: 1px solid var(--pomme); font-size: 12.5px; color: var(--discret); }
.codes b { font: 600 12px var(--mono); letter-spacing: .08em; color: var(--pomme); }
.codes button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--panneau-2); color: var(--texte); cursor: var(--main); }
.recap-totaux { margin: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--filet); }
.recap-totaux div { display: flex; justify-content: space-between; align-items: baseline; }
.recap-totaux dt { font-size: 15px; color: var(--discret); }
.recap-totaux dd { margin: 0; font-weight: 600; }
.recap-totaux .recap-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--filet); }
.recap-total dt { font: 900 26px/1 var(--display); text-transform: uppercase; color: var(--texte); }
.recap-total dd { font: 900 42px/1 var(--display); }
.btn-payer { width: 100%; padding-block: 18px 17px; font-size: 20px; }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.btn.envoi:disabled { opacity: 1; cursor: progress; }
.btn.envoi::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: tourne .7s linear infinite; }
.recap-manque { min-height: 1.5em; margin-top: -6px; text-align: center; font-size: 13.5px; color: var(--pomme); }
.recap-paynow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.5; color: var(--discret); }
.recap-paynow svg { width: 16px; height: 16px; margin-top: 2px; color: var(--capuche); }
.barre-payer { display: none; }
.caisse-vide { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 40px; text-align: center; }
.caisse-vide img { height: 260px; width: auto; }
.caisse-vide h1 { font: 900 clamp(48px, 7vw, 84px)/.9 var(--display); text-transform: uppercase; }
.caisse-vide p { margin-bottom: 8px; color: var(--discret); }
.pied-caisse { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 26px 16px 34px; border-top: 1px solid var(--filet); font-size: 14px; color: var(--discret); }
.pied-caisse a { color: var(--texte); text-decoration: none; opacity: .8; }
.pied-caisse a:hover { color: var(--pomme); opacity: 1; }
.pied-caisse p { flex-basis: 100%; text-align: center; font-size: 12.5px; }
.page-caisse .pastille-apercu { right: auto; left: 16px; }
.page-recu .pastille-apercu { left: auto; right: 16px; }

/* ═══════════ le reçu : la guirlande de l'étal en haut, un ticket thermique qui sort de sa fente, ligne par ligne ═══════════ */
.guirlande { position: absolute; top: 58px; left: 0; width: 100%; height: 150px; display: block; opacity: 0; transition: opacity .6s; pointer-events: none; }
.guirlande.pret { opacity: 1; }
.page-recu .caisse { position: relative; padding-top: 190px; }   /* positionné : passe devant la guirlande */
.recu-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 64px; align-items: start; }
.merci { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 30px; }
.merci h1 { font: 900 clamp(52px, 6.4vw, 96px)/.86 var(--display); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.merci-pseudo { color: var(--pomme); }
.merci-lead { max-width: 44ch; font-size: 19px; line-height: 1.55; }
.merci-lead code, .merci-aide code { font: 500 .88em var(--mono); color: var(--pomme); }
.merci-note { max-width: 46ch; font-size: 15px; color: var(--discret); }
.merci-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.merci-aide { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--filet); font-size: 14px; color: var(--discret); }
.merci-aide a { color: var(--texte); font-weight: 600; text-underline-offset: 3px; }
.merci-aide a:hover { color: var(--pomme); }
.ticket-zone { position: relative; width: min(390px, 100%); justify-self: center; }
.imprimante { position: relative; z-index: 2; height: 34px; border-radius: 10px; background: #2b1a25; box-shadow: 0 5px 0 #120910; }
.fente { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 6px; border-radius: 3px; background: #0d0609; }
.voyant { position: absolute; right: 16px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--capuche); }
html[data-edition="ext"] .imprimante { background: #141b3d; box-shadow: 0 5px 0 #060816; }
.ticket-sortie { position: relative; z-index: 1; margin: -11px 14px 0; padding-bottom: 30px; overflow: hidden; }
.ticket { position: relative; padding: 26px 22px 30px; background: #f6ecd8; color: #241a20; font: 500 13px/1.6 var(--mono);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
  animation: imprime 1.8s steps(30) backwards .25s; }
/* l'imprimante pousse le papier par à-coups ; transform seul : sans animation, le ticket est déjà là */
@keyframes imprime { from { transform: translateY(-100%); } }
.ticket-specimen { margin: -6px 0 16px; padding: 5px 0 4px; background: #241a20; color: #f6ecd8; text-align: center; font-weight: 600; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.ticket-tete { text-align: center; }
.ticket-tete h2 { font: 900 30px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.ticket-tete p { font-size: 11.5px; line-height: 1.5; }
.sep { height: 1.6em; overflow: hidden; white-space: nowrap; color: rgba(36, 26, 32, .55); }
.sep::before { content: "- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; }
.sep-double::before { content: "========================================================================"; color: #241a20; }
.ticket-infos, .ticket-totaux { margin: 0; display: flex; flex-direction: column; }
.ticket-infos div, .ticket-totaux div { display: flex; justify-content: space-between; gap: 12px; }
.ticket-infos dt, .ticket-totaux dt { text-transform: uppercase; }
.ticket-infos dd, .ticket-totaux dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.ticket-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ticket-ligne { display: flex; gap: 6px; }
.ticket-nom { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-transform: uppercase; }
.ticket-nom::after { content: " ........................................................"; color: rgba(36, 26, 32, .45); }
.ticket-lignes small { display: block; padding-left: 2.2em; font-size: 11.5px; color: rgba(36, 26, 32, .7); }
.ticket-total { display: flex; justify-content: space-between; align-items: baseline; }
.ticket-total span, .ticket-total b { font: 900 30px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.ticket-mention { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 16px; font-size: 11px; line-height: 1.5; text-transform: uppercase; }
.code-barres { display: block; width: 100%; height: 54px; fill: #241a20; }
.ticket-ref { margin-top: 4px; text-align: center; font-size: 12.5px; letter-spacing: .32em; }
.ticket-merci { margin-top: 14px; text-align: center; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.ticket-merci::before, .ticket-merci::after { content: " * "; }

/* ═══════════ la page légale : un sommaire collé, des cartes de lecture, « pour les parents » en or ═══════════ */
.legal { max-width: 1160px; margin: 0 auto; padding: 124px 16px 100px; }
.legal-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 56px; }
.merci-kicker { padding: 8px 20px 7px 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%); background: var(--pomme); color: #140b12; font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.legal-tete h1 { max-width: 14ch; font: 900 clamp(56px, 8vw, 120px)/.86 var(--display); text-transform: uppercase; text-wrap: balance; }
.legal-tete p:last-child { font: 500 13px var(--mono); letter-spacing: .06em; color: var(--discret); }
.legal-grille { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal-sommaire { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; }
.legal-sommaire a { padding: 10px 14px; border-radius: 12px; text-decoration: none; font: 800 17px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--discret); transition: background .2s, color .2s; }
.legal-sommaire a:hover { color: var(--texte); }
.legal-sommaire a[aria-current] { background: var(--panneau); color: var(--pomme); }
.legal-corps { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.legal-section { position: relative; scroll-margin-top: 96px; padding: clamp(24px, 3vw, 44px); border-radius: 24px; background: var(--panneau); border: 1px solid var(--filet); }
.legal-section h2 { margin-bottom: 20px; font: 900 clamp(40px, 4.6vw, 64px)/.9 var(--display); text-transform: uppercase; }
.legal-section h3 { margin: 26px 0 8px; font: 700 18px/1.3 var(--corps); }
.legal-section h3:first-child { margin-top: 0; }
.legal-section p, .legal-section li { max-width: 68ch; font-size: 16.5px; line-height: 1.7; color: color-mix(in srgb, var(--texte), var(--fond) 16%); }
.legal-section ul { margin: 8px 0; padding-left: 1.2em; }
.legal-section li + li { margin-top: 6px; }
.legal-section li::marker { color: var(--pomme); }
.legal-section b { color: var(--texte); }
html[lang="en"] .bloc-fr, html[lang="fr"] .bloc-en { display: none; }
.a-remplir { padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--pomme), transparent 80%); color: var(--pomme); font: 600 .82em var(--mono); white-space: nowrap; }
.legal-parents { overflow: hidden; background: #f5a524; border-color: #f5a524; }
.legal-parents h2, .legal-parents h3, .legal-parents p, .legal-parents li, .legal-parents b { color: #140b12; }
.legal-parents li::marker { color: #140b12; }
.legal-parents .a-remplir { background: #140b12; color: #f5a524; }
.legal-parents > *:not(.legal-keeper) { position: relative; z-index: 1; }
.legal-keeper { position: absolute; z-index: 0; top: 22px; right: 26px; height: 230px; width: auto; filter: drop-shadow(8px 8px 0 rgba(20, 11, 18, .35)); }
.legal-chapeau { max-width: 44ch !important; margin-bottom: 8px; font-size: 19px !important; font-weight: 600; }
.legal-fiche { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.legal-fiche div { display: contents; }
.legal-fiche dt, .legal-fiche dd { padding: 13px 0; border-bottom: 1px solid var(--filet); }
.legal-fiche dt { padding-right: 28px; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--discret); }
.legal-fiche dd { margin: 0; }
.legal-minecraft { margin-top: 20px; font-size: 14px !important; color: var(--discret) !important; }

@media (max-width: 860px) {
  .caisse { padding: 92px 16px 130px; }
  .caisse-grille, .recu-grille { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .recap { position: static; }
  .barre-payer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--fond); border-top: 1px solid var(--filet); }
  .barre-payer > span { display: flex; flex-direction: column; }
  .barre-payer small { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--discret); }
  .barre-payer b { font: 900 30px/1 var(--display); }
  .barre-payer .btn { flex: 1; max-width: 230px; }
  .page-caisse .pastille-apercu { bottom: 88px; }
  .page-recu .pastille-apercu { bottom: 16px; }
  .page-recu .caisse { padding: 172px 16px 50px; }
  .guirlande { height: 110px; }
  .merci { padding-top: 0; }
  .merci h1 { font-size: clamp(48px, 14vw, 76px); }
  .legal { padding-top: 96px; }
  .legal-tete { margin-bottom: 26px; }
  .legal-grille { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .legal-sommaire { top: 58px; z-index: 5; flex-direction: row; gap: 6px; overflow-x: auto; padding: 8px 0; background: var(--fond); scrollbar-width: none; }
  .legal-sommaire a { flex: none; padding: 9px 12px; border: 1px solid var(--filet); border-radius: 10px; font-size: 15px; }
  .legal-section { scroll-margin-top: 120px; }
  .legal-keeper { display: none; }
  .legal-fiche { grid-template-columns: minmax(0, 1fr); }
  .legal-fiche dt { padding-bottom: 0; border-bottom: 0; }
}
@media (max-width: 480px) {
  .caisse-sur span { display: none; }
  .tiroir-tete h2 { font-size: 30px; }
}

/* impression : seul le ticket, sans dentelle ni animation */
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; }
  body > *:not(main), .guirlande, .merci { display: none !important; }
  .caisse { padding: 0; }
  .recu-grille { display: block; }
  .ticket-zone { width: auto; }
  .imprimante { display: none; }
  .ticket-sortie { margin: 0; padding: 0; overflow: visible; }
  .ticket { margin: 0 auto; max-width: 360px; animation: none; border: 1px dashed #999; -webkit-mask: none; mask: none; }
}

/* ═══ pages des modes (eraroyale/, raft-survival/, leurs versions fr/ : générées par seo/generer.py) et la FAQ de l'accueil ═══ */
.mode-livret { padding-top: 92px; gap: 110px; }
a.langue { text-decoration: none; }
.liens a[aria-current="page"] { opacity: 1; color: var(--pomme); }
.mode-heros { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "texte logo" "faits faits";
  align-items: center; gap: 30px 40px; min-height: min(80vh, 720px); padding: clamp(26px, 4vw, 56px); }
.mode-heros-texte { grid-area: texte; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.mode-heros-texte .etiquette { --bord: clamp(26px, 4vw, 56px); }
.mode-heros h1 { font: 900 clamp(44px, 6.4vw, 96px)/.88 var(--display); text-transform: uppercase; text-wrap: balance; }
.mode-chapo { max-width: 52ch; font-size: clamp(17px, 1.5vw, 19px); }
.mode-heros .heros-actions { justify-content: flex-start; }
.mode-logo { grid-area: logo; width: min(440px, 100%); height: auto; justify-self: center; filter: drop-shadow(6px 7px 0 #0a0509); }
.mode-faits { grid-area: faits; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mode-faits li { padding: 10px 14px 9px; border-radius: 10px; background: var(--fond); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.mode-faits li b { color: var(--pomme); font-weight: 600; }
.mode-raft { background: #12304d; }

.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.galerie figure { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.galerie img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; border: 1px solid var(--filet); background: var(--panneau); }
.galerie figcaption { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--discret); }
.galerie figcaption b { color: var(--pomme); font-weight: 600; }

.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.etapes li { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 26px; border-radius: 24px; background: var(--panneau); border: 1px solid var(--filet); }
.etapes .no { font: 600 13px var(--mono); letter-spacing: .12em; color: var(--pomme); }
.etapes h3 { font: 900 clamp(30px, 2.8vw, 40px)/.92 var(--display); text-transform: uppercase; }
.etapes p { color: var(--discret); }

.mode-blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.mode-blocs .box h3 { font-size: clamp(34px, 3.4vw, 50px); }
.puces { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puces li { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px 9px; border-radius: 12px; background: var(--fond); border: 1px solid var(--filet); font-weight: 600; }
.puces small { font: 600 12px var(--mono); color: var(--pomme); }
.ligues-mini { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ligues-mini li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; font: 600 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--discret); overflow-wrap: anywhere; }
.ligues-mini img { width: 100%; max-width: 72px; height: auto; }

.mode-rejoindre { gap: 18px; padding: clamp(26px, 4vw, 56px); background: var(--fond); }
.mode-rejoindre h2 { font: 900 clamp(42px, 5.6vw, 84px)/.9 var(--display); text-transform: uppercase; text-wrap: balance; }
.mode-rejoindre .adresse { align-self: flex-start; width: min(560px, 100%); }
.mode-rejoindre .heros-actions { justify-content: flex-start; }
.rejoindre-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 980px; }
.rejoindre-etapes li { display: flex; gap: 14px; align-items: flex-start; min-width: 0; padding: 18px; border-radius: 18px; background: var(--panneau); border: 1px solid var(--filet); }
.rejoindre-etapes .no { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--pomme); color: var(--fond); font: 900 20px/1 var(--display); }
.rejoindre-etapes b { font: 800 20px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.rejoindre-etapes p { margin-top: 4px; color: var(--discret); font-size: 15px; overflow-wrap: anywhere; }

.faq { display: flex; flex-direction: column; gap: 10px; max-width: 920px; }
.faq details { border-radius: 18px; background: var(--panneau); border: 1px solid var(--filet); transition: border-color .2s; }
.faq details[open], .faq details:hover { border-color: var(--filet-clair); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px;
  font: 800 clamp(19px, 1.8vw, 23px)/1.15 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 600 24px/1 var(--mono); color: var(--pomme); transition: transform .25s var(--douce); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; max-width: 70ch; color: var(--discret); }

.autres-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.autres-modes .box { text-decoration: none; padding: 0 0 22px; gap: 12px; }
.autres-modes .box img { width: 100%; height: auto; aspect-ratio: 900 / 382; object-fit: cover; }
.autres-modes .box .etiquette { margin: 4px 0 0; padding-left: 22px; }
.autres-modes .box h3 { padding: 0 22px; font-size: clamp(30px, 3vw, 44px); }
.autres-modes .box:hover h3 { color: var(--pomme); }
.lien-mode { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pomme); text-decoration: none; }
.lien-mode:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1000px) {
  .mode-heros { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "texte" "faits"; min-height: 0; }
  .mode-logo { width: min(340px, 80%); justify-self: start; }
  .mode-heros > .fond { bottom: auto; height: clamp(260px, 48vw, 420px); }   /* le décor derrière le logo, le texte sur l'aplat */
  .mode-heros .etiquette { display: block; white-space: normal; max-width: 100%; line-height: 1.5; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejoindre-etapes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .mode-livret { gap: 80px; }
  .galerie, .etapes { grid-template-columns: minmax(0, 1fr); }
  .ligues-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mode-heros .heros-actions { flex-direction: column; align-items: stretch; }
  .mode-faits li { font-size: 11px; }
  .faq summary { padding: 16px 18px; }
  .faq details p { padding: 0 18px 18px; }
}