/* =========================================================================
   Accueil — palette « Or antique », contrastes, animations (index.php, body.home)
   -------------------------------------------------------------------------
   La palette (la seule du site) est écrite juste en dessous, dans :root, sous
   forme de --l-* (bandes claires) et --d-* (bandes sombres).
   Trois « tons » de bande, qui re-déclarent les variables du site :
     .tone-l  surface claire        .tone-d  surface sombre
     .tone-a  aplat d'accent (contraste fort)
   Sans JS tout reste visible (voir .js plus bas).
   ========================================================================= */
:root {
  /* Palette « Or antique » : l --l-* = surface claire, d --d-* = surface sombre
     (fond, fond 2, encre, accent, accent 2, texte sur accent). */
  --l-bg:#F6F1E4; --l-bg2:#EDE5D0; --l-ink:#241D10; --l-a:#8A6A1F; --l-b:#22705A; --l-on:#FDFAF1;
  --d-bg:#241D12; --d-bg2:#2F261A; --d-ink:#F6F1E4; --d-a:#DCB763; --d-b:#6FC4AD; --d-on:#241D12;
}

/* ---- Tons ---- */
body.home, .tone-l {
  --bg:var(--l-bg); --bg-deep:var(--l-bg2); --bg-2:var(--l-bg2);
  --surface:color-mix(in srgb,var(--l-bg),#fff 55%); --surface-2:var(--l-bg2);
  --gold:var(--l-a); --gold-soft:var(--l-a); --gold-deep:color-mix(in srgb,var(--l-a),#000 18%);
  --gold-line:color-mix(in srgb,var(--l-a) 26%,transparent); --gold-line-2:color-mix(in srgb,var(--l-a) 55%,transparent);
  --on-gold:var(--l-on);
  --ink:var(--l-ink); --cream:color-mix(in srgb,var(--l-ink) 90%,var(--l-bg));
  --mute:color-mix(in srgb,var(--l-ink) 76%,transparent); --faint:color-mix(in srgb,var(--l-ink) 66%,transparent);
  --egypte:var(--l-a); --pirate:var(--l-b);
  --egypte-line:color-mix(in srgb,var(--l-a) 50%,transparent); --pirate-line:color-mix(in srgb,var(--l-b) 50%,transparent);
  --shadow:0 24px 60px -24px color-mix(in srgb,var(--l-ink) 45%,transparent);
}
.tone-d, body.home .navbar:not(.scrolled), body.home .colophon {
  --bg:var(--d-bg); --bg-deep:var(--d-bg2); --bg-2:var(--d-bg2);
  --surface:color-mix(in srgb,var(--d-bg),#fff 7%); --surface-2:color-mix(in srgb,var(--d-bg),#fff 13%);
  --gold:var(--d-a); --gold-soft:var(--d-a); --gold-deep:color-mix(in srgb,var(--d-a),#fff 15%);
  --gold-line:color-mix(in srgb,var(--d-a) 26%,transparent); --gold-line-2:color-mix(in srgb,var(--d-a) 55%,transparent);
  --on-gold:var(--d-on);
  --ink:var(--d-ink); --cream:color-mix(in srgb,var(--d-ink) 92%,var(--d-bg));
  --mute:color-mix(in srgb,var(--d-ink) 74%,transparent); --faint:color-mix(in srgb,var(--d-ink) 62%,transparent);
  --egypte:var(--d-a); --pirate:var(--d-b);
  --egypte-line:color-mix(in srgb,var(--d-a) 50%,transparent); --pirate-line:color-mix(in srgb,var(--d-b) 50%,transparent);
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
}
.tone-a {
  --bg:var(--d-a); --bg-deep:color-mix(in srgb,var(--d-a),#000 12%); --bg-2:var(--bg-deep);
  --surface:color-mix(in srgb,var(--d-a),#fff 14%); --surface-2:var(--surface);
  --gold:var(--d-on); --gold-soft:var(--d-on); --gold-deep:var(--d-on);
  --gold-line:color-mix(in srgb,var(--d-on) 28%,transparent); --gold-line-2:color-mix(in srgb,var(--d-on) 55%,transparent);
  --on-gold:var(--d-a);
  --ink:var(--d-on); --cream:var(--d-on);
  --mute:color-mix(in srgb,var(--d-on) 82%,transparent); --faint:color-mix(in srgb,var(--d-on) 70%,transparent);
}
.tone-l, .tone-d, .tone-a { background:var(--bg); color:var(--cream); }
body.home {
  --ease:cubic-bezier(.16,1,.3,1);
  background:var(--d-bg); color:var(--cream);
}
body.home main { overflow-x:clip; }

/* ---- Logo teinté par le thème ---- */
.logo-mask { display:block; height:2.9rem; width:12.4rem; background:var(--gold);
  -webkit-mask:url(../img/coffreescape-logo-or-horizontal.svg) center/contain no-repeat; mask:url(../img/coffreescape-logo-or-horizontal.svg) center/contain no-repeat; transition:background .4s; }
@media (max-width:1400px){ .logo-mask { height:2.3rem; width:9.8rem; } }
@media (max-width:480px){ .navbar .logo-mask { height:1.9rem; width:7.2rem; } }
.colophon .logo-mask { height:3.4rem; width:14.5rem; }

/* ---- Navbar : pilule flottante ---- */
body.home .navbar { padding:.9rem clamp(.8rem,2.5vw,2rem); }
body.home .navbar::before { inset:.55rem clamp(.5rem,2vw,1.6rem); border-radius:999px; background:color-mix(in srgb,var(--l-bg) 88%,transparent); border:1px solid transparent; backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); opacity:0; transition:opacity .5s; }
body.home .navbar.scrolled::before { opacity:1; border-color:var(--gold-line-2); }
body.home .navbar.scrolled { padding-block:.9rem; border-bottom-color:transparent; }
body.home .navbar-links a { position:relative; color:var(--mute); padding:.5rem 1rem; border-radius:999px; transition:background .35s var(--ease),color .35s var(--ease); }
body.home .navbar-links a:hover { color:var(--ink); background:color-mix(in srgb,var(--gold) 14%,transparent); }
body.home .navbar-links a[aria-current="page"] { color:var(--ink); background:color-mix(in srgb,var(--gold) 22%,transparent); }
body.home .navbar-links a[href="#aventures"] { margin-left:20px; }
body.home .navbar .navbar-toggle span { background:var(--ink); }
body.home .navbar-ctas .btn--outline,
body.home .navbar:not(.scrolled) .navbar-ctas .btn--outline { border:1.5px solid var(--gold-line-2); color:var(--ink); background:transparent; font-weight:600; }
body.home .navbar-ctas .btn--outline:hover,
body.home .navbar:not(.scrolled) .navbar-ctas .btn--outline:hover { background:var(--gold); border-color:var(--gold); color:var(--on-gold); }
@media (max-width:1400px){ body.home .navbar:not(.navbar--deploye) .navbar-nav { background:var(--bg-deep); } }

/* ---- Boutons ---- */
.btn--lg { padding:1.05rem 1.9rem; font-size:1rem; border-radius:999px; }
.btn--sm, body.home .navbar .btn { border-radius:999px; }
body.home .btn--primary { background:var(--gold); color:var(--on-gold); border-color:var(--gold); }
body.home .btn--primary:hover { background:color-mix(in srgb,var(--gold),#fff 20%); box-shadow:0 16px 40px -14px var(--gold); }
.btn--ghost { background:transparent; color:var(--ink); border:1.5px solid var(--gold-line-2); }
.btn--ghost:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
body.home .btn--outline { color:var(--ink); border-color:var(--gold-line-2); }
.btn .arrow { display:inline-block; }

/* ---- Éléments communs ---- */
.h-eyebrow { display:inline-flex; align-items:center; gap:.8rem; font:700 .78rem/1 var(--font-body); letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin:0 0 1.5rem; }
.h-eyebrow::before { content:''; width:2.2rem; height:2px; background:currentColor; }
.h-title { font-family:var(--font-display); font-weight:500; font-size:clamp(2.8rem,7.2vw,6.6rem); line-height:.98; letter-spacing:-.03em; margin:0 0 1.4rem; color:var(--ink); }
.h-title em, .h-statement em, .h-final__title em { font-style:italic; color:var(--gold); }
.h-sub { font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--mute); max-width:56ch; }
.h-note { color:var(--faint); font-size:1rem; margin:2rem 0 0; }
.h-note a { color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.h-center { text-align:center; margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.h-center .h-note { flex-basis:100%; margin:.4rem 0 0; }
.h-section { padding-block:clamp(6rem,13vw,12rem); position:relative; }

/* ---- Bandes qui se chevauchent (coins arrondis) ---- */
:root { --r:clamp(1.6rem,3.4vw,3rem); }
.h-stats, .h-section, .h-adv, .h-final, .h-panel--pirate, body.home .colophon { position:relative; border-radius:var(--r) var(--r) 0 0; margin-top:calc(var(--r) * -1); }

/* ---- Hero ---- */
.h-hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate; padding:8rem var(--gutter) calc(6rem + var(--r)); }
.h-hero__video { position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; object-position:70% center; opacity:.55; mix-blend-mode:screen; filter:grayscale(1) contrast(1.15); z-index:-3; will-change:transform,opacity; }
/* Lampe torche : un voile couvre les engrenages, sauf autour du curseur */
.h-hero__lamp { position:absolute; inset:0; z-index:-2; pointer-events:none; background:var(--bg); opacity:.86;
  -webkit-mask-image:radial-gradient(circle 280px at var(--lx,70%) var(--ly,40%), transparent 0, rgba(0,0,0,.5) 55%, #000 100%);
          mask-image:radial-gradient(circle 280px at var(--lx,70%) var(--ly,40%), transparent 0, rgba(0,0,0,.5) 55%, #000 100%); }
.h-hero__glow { position:absolute; inset:0; z-index:-1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle 340px at var(--lx,70%) var(--ly,40%), color-mix(in srgb,var(--gold) 55%,transparent), transparent 70%); }
.h-hero__shade { position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 60%,transparent) 0%,transparent 40%,var(--bg) 100%); }
.h-hero__inner { max-width:var(--max); width:100%; margin-inline:auto; will-change:transform,opacity; }
.h-hero__title { font-family:var(--font-display); font-weight:500; margin:0; color:var(--ink); font-size:clamp(3.2rem,10vw,9rem); line-height:.93; letter-spacing:-.04em; }
.h-hero__title em { font-style:italic; color:var(--gold); }
.h-line { display:block; overflow:hidden; padding:0 .05em .1em; margin:0 -.05em; }
.h-line__in { display:block; transform:translateY(108%) rotate(3deg); transform-origin:0 100%; animation:h-up 1.4s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes h-up { to { transform:none; } }
.h-in { opacity:0; transform:translateY(24px); animation:h-fade 1.1s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes h-fade { to { opacity:1; transform:none; } }
.h-hero__foot { display:grid; grid-template-columns:1.1fr auto; gap:2rem 4rem; align-items:end; margin-top:clamp(1.8rem,4vw,3.2rem); }
.h-hero__tag { max-width:52ch; margin:0; font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--mute); }
.h-hero__ctas { display:flex; flex-wrap:wrap; gap:.8rem; }
.h-hero__proof { position:absolute; left:var(--gutter); bottom:calc(1.6rem + var(--r)); display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.h-hero__proof i { width:5px; height:5px; background:var(--gold); transform:rotate(45deg); }
@media (max-width:900px){ .h-hero__foot { grid-template-columns:1fr; } }

/* ---- Chiffres ---- */
.h-stats { z-index:3; }
.h-stats__grid { display:grid; grid-template-columns:repeat(4,1fr); padding-top:var(--r); }
.h-stat { padding:clamp(2.4rem,5vw,4.4rem) 1.2rem; border-left:1px solid var(--gold-line); }
.h-stat:first-child { border-left:0; }
.h-stat__num { display:block; font-family:var(--font-display); font-weight:500; font-size:clamp(2.6rem,6vw,5.4rem); line-height:1; letter-spacing:-.03em; color:var(--gold); white-space:nowrap; }
.h-stat__num small { font-size:.26em; letter-spacing:.06em; margin-left:.4em; color:var(--ink); font-family:var(--font-body); font-weight:600; text-transform:uppercase; }
.h-stat__label { display:block; margin-top:.8rem; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
@media (max-width:860px){ .h-stats__grid { grid-template-columns:repeat(2,1fr); } .h-stat:nth-child(3) { border-left:0; } .h-stat:nth-child(n+3) { border-top:1px solid var(--gold-line); } }
/* Le film de lancement : cadré comme les photos des coffres (ombre dorée décalée), sous les chiffres clés. */
.h-film { padding-bottom:calc(var(--r) + clamp(1.4rem,3.5vw,3rem)); }
.h-film__frame { margin:0 auto; max-width:1040px; border-radius:12px; overflow:hidden; background:#0b0906; box-shadow:10px 10px 0 var(--gold); }
.h-film video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0b0906; }
@media (max-width:600px){ .h-film__frame { box-shadow:6px 6px 0 var(--gold); } }

/* ---- Principe ---- */
.h-statement { font-family:var(--font-display); font-weight:500; font-size:clamp(2rem,4.6vw,4.2rem); line-height:1.1; letter-spacing:-.02em; color:var(--ink); max-width:26ch; margin:0 0 clamp(3.5rem,8vw,6rem); }
.h-statement .w, .h-final__title .w { opacity:.18; transition:opacity .4s linear; display:inline-block; }
.h-statement .w.lit, .h-final__title .w.lit { opacity:1; }
.h-features { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem); }
.h-feature { padding-top:1.6rem; border-top:2px solid var(--gold); }
.h-feature .ico { display:block; width:3rem; height:3rem; background-color:var(--gold); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; margin-bottom:1.2rem; transition:transform .6s var(--ease); }
.h-feature:hover .ico { transform:translateY(-6px) rotate(-8deg) scale(1.1); }
.h-feature h3 { font-size:1.7rem; color:var(--ink); margin:0 0 .5rem; }
.h-feature p { margin:0; color:var(--mute); font-size:1.02rem; }
@media (max-width:960px){ .h-features { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .h-features { grid-template-columns:1fr; } }

/* ---- Aventures : deux cartes côte à côte ---- */
.h-adv { padding-top:clamp(6rem,13vw,11rem); padding-bottom:clamp(5rem,10vw,8rem); z-index:5; }
.h-adv__head { margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.h-adv__row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,2.6vw,2.2rem); align-items:start; }
.h-panel { position:relative; padding:clamp(1.6rem,2.6vw,2.4rem); border-radius:20px; overflow:hidden; border:1px solid var(--gold-line); transition:transform .5s var(--ease),box-shadow .5s var(--ease); }
.h-panel:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.h-panel--egypte { background:var(--bg-deep); }
.h-panel--pirate { background:var(--bg); }
.h-panel__media { position:relative; z-index:1; overflow:hidden; border-radius:12px; aspect-ratio:4/3.2; box-shadow:10px 10px 0 var(--gold); }
.h-panel__media img { width:100%; height:118%; object-fit:cover; will-change:transform; }
.h-panel__text { position:relative; z-index:1; padding-top:1.6rem; }
.h-panel h3 { font-family:var(--font-display); text-transform:none; letter-spacing:-.02em; font-size:clamp(1.7rem,2.6vw,2.5rem); line-height:1.05; margin:.9rem 0; color:var(--ink); }
.h-panel h3 em { font-style:italic; color:var(--gold); }
.h-panel__meta { font:700 .76rem var(--font-title); letter-spacing:.14em; text-transform:uppercase; margin:0 0 1rem; color:var(--gold); }
.h-panel__lead { font-size:clamp(1rem,1.1vw,1.1rem); color:var(--ink); }
.h-panel__text p { max-width:52ch; }
/* Crayonné : même gabarit que la photo du coffre (.h-panel__media) ; les compteurs passent dessous. */
.h-panel__sketch { display:block; width:100%; height:auto; aspect-ratio:4/3.2; object-fit:cover; border-radius:12px; flex:none; }
.h-panel__foot { display:flex; align-items:center; flex-wrap:wrap; gap:clamp(1rem,2vw,1.5rem); margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--gold-line); }
.h-panel .card__tag { color:var(--gold); border-color:var(--gold-line-2); }
@media (max-width:860px){ .h-adv__row { grid-template-columns:1fr; } }
@media (max-width:480px){ .h-panel__foot { justify-content:center; } .h-panel__stats { margin-left:0; } }

/* Compteurs en bas des aventures — même dessin que le cadran fixe (.h-dial),
   en plus grand et posé dans la page plutôt que flottant. */
/* Un par coffre (dans .h-panel__text), pas un total du site. */
.h-panel__stats { display:flex; gap:clamp(.9rem,1.8vw,1.4rem); margin-left:auto; }
.h-counter { display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.h-counter__dial { position:relative; width:clamp(58px,5.6vw,76px); aspect-ratio:1; display:grid; place-items:center; color:var(--gold); }
.h-counter__dial svg { position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.h-counter__num { position:relative; font-family:var(--font-display); font-weight:500; font-size:clamp(1.2rem,1.8vw,1.5rem); color:var(--ink); line-height:1; }
.h-counter__val { position:relative; display:flex; flex-direction:column; align-items:center; line-height:1; }
.h-counter__unit { font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:.2rem; }
.h-counter__label { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); text-align:center; }

/* ---- Ils nous ont fait confiance ---- */
/* Section courte (trois cartes) : le gabarit .h-section, jusqu'à 12 rem de marge, la rendait démesurée. --r est ajouté de part et d'autre :
   la section précédente et la suivante recouvrent chacune ses coins arrondis, il faut garder de la marge visible en plus. */
#confiance { padding-block:calc(var(--r) + clamp(1.6rem,3.4vw,3rem)); }
.h-trust { text-align:center; }
.h-trust__grid { list-style:none; margin:1.2rem auto 0; padding:0; max-width:720px; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.2rem); }
.h-trust__card { display:flex; flex-direction:column; align-items:center; padding:1.3rem .9rem 1.2rem; border:1px solid var(--gold-line); border-radius:var(--radius); background:color-mix(in srgb,var(--gold) 6%,transparent); transition:border-color .3s, transform .3s; }
.h-trust__card:hover { border-color:var(--gold); transform:translateY(-4px); }
.h-trust__card img { width:60px; height:60px; border-radius:50%; object-fit:cover; border:1px solid var(--gold-line-2); margin-bottom:.8rem; }
.h-trust__card h3 { font-family:var(--font-display); font-weight:500; font-size:1.35rem; line-height:1.1; color:var(--ink); margin:0 0 .45rem; }
.h-trust__card p { margin:0 0 .3rem; font:700 .66rem var(--font-title); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.h-trust__card span { color:var(--mute); font-size:.88rem; }
@media (max-width:760px){
  .h-trust__grid { grid-template-columns:1fr; max-width:22rem; }
  .h-trust__card { display:grid; grid-template-columns:52px 1fr; column-gap:1rem; align-items:center; text-align:left; padding:.85rem 1rem; }
  .h-trust__card img { width:52px; height:52px; grid-row:1 / span 3; margin:0; }
  .h-trust__card h3 { margin-bottom:.3rem; }
}

/* ---- Tarifs ---- */
.h-plans { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(2.5rem,5vw,4rem); }
.h-plan { position:relative; display:flex; flex-direction:column; padding:clamp(1.8rem,3.4vw,3rem); border:1.5px solid var(--ink); border-radius:20px; background:var(--surface); transition:transform .6s var(--ease),box-shadow .6s var(--ease); }
.h-plan:hover { transform:translateY(-8px); box-shadow:10px 10px 0 var(--gold); }
.h-plan--feat { background:var(--bg); border-color:var(--bg); }
.h-plan__k { font:700 .72rem var(--font-title); letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.h-plan h3 { font-size:clamp(2rem,3.2vw,2.8rem); margin:0 0 1rem; color:var(--ink); }
.h-plan p { color:var(--mute); flex:1; }
.h-plan__row { margin-top:auto; }
.h-plan__row { display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--gold-line-2); }
.h-plan__l { display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:.2rem; }
.h-plan__row strong { font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem,2.6vw,2.2rem); color:var(--ink); white-space:nowrap; }
.h-plan__price strong { font-size:clamp(2.6rem,4.4vw,4rem); color:var(--gold); font-style:italic; }
.h-plan__ht { font-size:.38em; font-style:normal; letter-spacing:.08em; }
.h-plan__go { margin-top:1.4rem; font-weight:700; letter-spacing:.05em; color:var(--gold); }
.h-plan__go .arrow { display:inline-block; transition:transform .4s var(--ease); }
.h-plan:hover .h-plan__go .arrow { transform:translateX(8px); }
@media (max-width:860px){ .h-plans { grid-template-columns:1fr; } }

/* ---- Auteur ---- */
.h-author__grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.h-author__photo { position:relative; overflow:hidden; border-radius:10px; aspect-ratio:1; box-shadow:-14px 14px 0 var(--gold); }
.h-author__photo img { width:100%; height:118%; object-fit:cover; will-change:transform; }
.h-tick { list-style:none; padding:0; margin:0 0 2rem; }
.h-tick li { position:relative; padding:.9rem 0 .9rem 2rem; border-top:1px solid var(--gold-line-2); font-size:1.1rem; color:var(--cream); }
.h-tick li:last-child { border-bottom:1px solid var(--gold-line-2); }
.h-tick li::before { content:''; position:absolute; left:0; top:1.5rem; width:.9rem; height:2px; background:var(--gold); }
.h-author__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2.2rem; }
.h-author__stats strong { display:block; font-family:var(--font-display); font-weight:500; font-size:clamp(2.2rem,4vw,3.4rem); line-height:1; color:var(--gold); }
.h-author__stats small { font-size:.4em; }
.h-author__stats > div > span { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
@media (max-width:860px){ .h-author__grid { grid-template-columns:1fr; } .h-author__photo { max-width:420px; } }

/* ---- FAQ ---- */
.h-faq { max-width:980px; }
.h-faq .faq details { background:transparent; border:0; border-top:1px solid var(--gold-line-2); border-radius:0; padding:0; margin:0; }
.h-faq .faq details:last-child { border-bottom:1px solid var(--gold-line-2); }
.h-faq .faq summary { font-size:clamp(1.25rem,1.9vw,1.6rem); padding:1.5rem 0; color:var(--ink); transition:color .3s; }
.h-faq .faq summary:hover { color:var(--gold); }
.h-faq .faq summary::after { font-size:2.2rem; color:var(--gold); }
.h-faq .faq details > *:not(summary) { border-top:0; padding-top:0; max-width:64ch; font-size:1.1rem; color:var(--mute); animation:h-open .6s var(--ease); }
@keyframes h-open { from { opacity:0; transform:translateY(-10px); } }

/* ---- CTA final ---- */
.h-final { text-align:center; padding-block:clamp(7rem,15vw,13rem) clamp(6rem,12vw,10rem); z-index:6; }
.h-final__title { font-family:var(--font-display); font-weight:500; font-size:clamp(2.6rem,7vw,6.4rem); line-height:1; letter-spacing:-.035em; color:var(--ink); max-width:16ch; margin:0 auto 1.6rem; }
.h-final .h-sub { margin-inline:auto; color:var(--ink); }
.h-final .h-eyebrow::before { display:none; }
.h-final .btn--primary { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.h-final .btn--primary:hover { background:var(--bg-deep); box-shadow:0 16px 40px -14px var(--ink); }
body.home .colophon { z-index:7; border-top:0; }

/* ---- Effets « coffre » ---- */
.js [data-reveal] { opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s); }
.js [data-reveal].in { opacity:1; transform:none; }

.h-gear { position:absolute; z-index:0; color:var(--gold); opacity:.28; pointer-events:none; will-change:rotate; }
.h-gear svg { display:block; width:100%; height:100%; }
.h-stats, .h-adv, .h-final { overflow:hidden; }
.h-stats .h-stats__grid, .h-stats .h-film, .h-final .wrap, .h-adv__head { position:relative; z-index:1; }
.h-final .h-gear { color:var(--ink); opacity:.16; }

.sw { display:inline-block; overflow:hidden; vertical-align:top; padding:0 .06em .12em; margin:0 -.06em -.12em; }
.sw__in { display:inline-block; transform:translateY(112%) rotate(4deg); transform-origin:0 100%; transition:transform 1.1s var(--ease) calc(var(--i) * .07s); }
.in .sw__in { transform:none; }

[data-num] { display:inline-block; white-space:nowrap; }
.rl { display:inline-block; height:1.1em; line-height:1.1; overflow:hidden; vertical-align:-.25em; }
.rl__c { display:block; transform:translateY(0); transition:transform 2.2s cubic-bezier(.22,1,.36,1) calc(var(--i) * .16s); }
.rl__c > span { display:block; height:1.1em; }
.go .rl__c { transform:translateY(calc(var(--to) * -1.1em)); }
.h-plan__row strong, .h-stat__num, .h-author__stats strong, .rl { font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; }

.h-dial { position:fixed; right:clamp(.8rem,2vw,1.6rem); bottom:clamp(.8rem,2vw,1.6rem); z-index:60; width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center; color:var(--gold); background:color-mix(in srgb,var(--l-bg) 90%,transparent); border:1px solid var(--gold-line-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 10px 30px -12px rgba(0,0,0,.5); transition:transform .5s var(--ease); }
.h-dial:hover { transform:scale(1.12); }
.h-dial svg { position:absolute; inset:0; width:100%; height:100%; }
.h-dial__ring { transform-origin:0 0; }
.h-dial__n { position:relative; font:700 .95rem var(--font-title); letter-spacing:.06em; color:var(--ink); }
@media (max-width:700px){ .h-dial { width:56px; height:56px; } .h-dial__n { font-size:.8rem; } }

@media (prefers-reduced-motion:reduce){
  .h-line__in, .h-in { animation:none; transform:none; opacity:1; }
  .js [data-reveal] { opacity:1; transform:none; }
  .h-statement .w, .h-final__title .w { opacity:1; }
}

/* ---- Bande sous les aventures : la mosaïque sur un sable plus profond que le parchemin ----
   Elle prolonge la page sans refaire exactement la même bande claire. Tout vient des variables
   de la palette (--l-*), donc rien n'est codé en dur. */
.h-adv ~ .h-section { z-index:6; }   /* au-dessus des aventures (z-index 5) : leurs coins arrondis se voient */
.h-band { padding-block:clamp(4.5rem,9vw,8rem); }
.tone-l.h-band--sable { background:linear-gradient(180deg, var(--l-bg2), color-mix(in srgb,var(--l-bg2) 55%,var(--l-bg))); }
.h-band .h-gal { margin-top:0; }

/* ---- Photos de parties (mosaïque) ---- */
.h-gal { margin-top:clamp(3.5rem,8vw,6rem); }
.h-gal__grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,clamp(13rem,24vw,22rem)); gap:clamp(.6rem,1.4vw,1.1rem); margin-top:clamp(1.6rem,4vw,2.6rem); }
.h-gal__item { position:relative; margin:0; overflow:hidden; border:1px solid var(--gold-line-2); border-radius:20px; background:var(--bg-deep); }
.h-gal__item img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.h-gal__item:hover img { transform:scale(1.045); }
.h-gal__item figcaption { position:absolute; inset:auto 0 0 0; padding:2.6rem 1.1rem .9rem; background:linear-gradient(transparent, rgba(11,9,6,.8)); color:#f3ead6; font:600 .7rem/1.2 var(--font-body); letter-spacing:.2em; text-transform:uppercase; }
.h-gal__item--carte { grid-column:1; grid-row:1 / 3; }
.h-gal__item--duo { grid-column:2 / 4; grid-row:1; }       /* deux joueurs aux extrémités : la case large leur convient */
.h-gal__item--papyrus { grid-column:2; grid-row:2; }
.h-gal__item--equipe { grid-column:3; grid-row:2; }        /* trois joueurs serrés au centre : la case carrée convient */
.h-gal__item--carte img { object-position:50% 38%; }
.h-gal__item--duo img { object-position:50% 34%; }
.h-gal__item--papyrus img { object-position:38% 50%; }
.h-gal__item--equipe img { object-position:50% 62%; }
@media (max-width:860px){
  .h-gal__grid { grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,clamp(10rem,34vw,17rem)) clamp(11rem,46vw,20rem); }
  .h-gal__item--carte { grid-column:1; grid-row:1 / 3; }
  .h-gal__item--equipe { grid-column:2; grid-row:1; }
  .h-gal__item--papyrus { grid-column:2; grid-row:2; }
  .h-gal__item--duo { grid-column:1 / 3; grid-row:3; }
}
@media (max-width:560px){
  .h-gal__grid { grid-template-columns:1fr; grid-template-rows:none; }
  .h-gal__item, .h-gal__item--carte, .h-gal__item--equipe, .h-gal__item--papyrus, .h-gal__item--duo { grid-column:auto; grid-row:auto; aspect-ratio:4 / 3; }
  .h-gal__item--carte { aspect-ratio:3 / 4; }
}
@media (prefers-reduced-motion:reduce){ .h-gal__item img { transition:none; } .h-gal__item:hover img { transform:none; } }