@charset "utf-8";
/* =============================================================================
   LE COMPTOIR DES SORTS — maquette one-page
   Système de design. Maquette réalisée par SDR-WEB.

   Deux registres :
   · NUIT      — teinte ~22°, brun-ambré, relevée sur ses propres rendus.
                 C'est la pièce. Fond dominant.
   · PARCHEMIN — son moodboard. Les documents posés dans la pièce.
   L'or est un matériau : il change de valeur selon le registre.
   Tous les ratios notés en commentaire sont calculés (WCAG 2.1, sRGB).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  --flag-h: 22px;

  /* — Nuit (H ≈ 22°) ----------------------------------------------------- */
  --nuit-1000: #0D0905;
  --nuit-900:  #171009;   /* fond de page */
  --nuit-800:  #241A10;   /* surfaces, champs */
  --nuit-700:  #352618;
  --nuit-600:  #4B3726;
  --nuit-500:  #634B35;

  /* — Velours : le violet vit dans les objets, jamais dans l'architecture -- */
  --velours-900: #1F1529;
  --velours-700: #3A2545;
  --prune:       #523049;
  --violet-800:  #332538;
  --lilas:       #B79CD6;  /* l'étincelle du logo. 3 occurrences maximum. */

  /* — Or -------------------------------------------------------------------
     300 = or de texte sur nuit (9,30:1) · 400 = or d'interface (7,40:1)
     500 = son « or antique », filets pleins (4,34:1) · 600 = ornement seul  */
  --or-100: #F0DCB0;
  --or-200: #E8CE9A;
  --or-300: #D9B06A;
  --or-400: #C89B4A;
  --or-500: #A16F33;
  --or-600: #7A5526;

  /* — Parchemin ---------------------------------------------------------- */
  --parch-50:  #F3EBDF;
  --parch-100: #EFE6DA;
  --parch-200: #E4D9CD;   /* son hex mesuré */
  --parch-300: #D8C5AD;   /* son « parchemin crème » */
  --parch-400: #C0A987;

  /* — Encres sur parchemin ------------------------------------------------ */
  --encre-900: #261A21;   /* 12,06:1 */
  --encre-800: #332538;   /* 10,33:1 */
  --encre-600: #4A3A52;   /*  7,48:1 */
  --or-encre:  #754E20;   /*  5,27:1 */
  --vert:      #343D29;   /*  8,18:1 — son vert botanique */
  --sauge:     #5A5744;   /*  5,24:1 */

  /* — Textes sur nuit ----------------------------------------------------- */
  --creme:   #EFE6DA;     /* 15,25:1 */
  --creme-2: #CBBCA9;     /* 10,14:1 */
  --creme-3: #A89681;     /*  6,59:1 */

  /* — Accents chauds (son moodboard 2) — décoratifs ----------------------- */
  --quartz: #BB8B87;
  --peche:  #D7A483;
  --flamme: #FFB25C;

  /* — États ---------------------------------------------------------------- */
  --erreur-nuit:  #E89C8C;
  --succes-nuit:  #A6C79E;
  --erreur-parch: #8E3B2F;
  --succes-parch: #3E5C39;

  /* — Couleurs actives (redéfinies par registre) -------------------------- */
  --fond:       var(--nuit-900);
  --surface:    var(--nuit-800);
  --texte:      var(--creme);
  --texte-2:    var(--creme-2);
  --texte-3:    var(--creme-3);
  --titre:      var(--creme);
  --accent:     var(--or-300);
  --filet:      var(--or-500);
  --focus:      var(--or-400);
  --erreur:     var(--erreur-nuit);

  /* — Espacement --------------------------------------------------------- */
  --e1: .25rem; --e2: .5rem;  --e3: .75rem; --e4: 1rem;   --e5: 1.5rem;
  --e6: 2rem;   --e7: 3rem;   --e8: 4rem;   --e9: 6rem;   --e10: 8rem;

  /* — Structure ---------------------------------------------------------- */
  --wrap:        75rem;      /* 1200px */
  --wrap-etroit: 58rem;
  --wrap-texte:  62ch;
  --gouttiere:   clamp(1.25rem, 5vw, 4rem);
  --section-y:   clamp(4.5rem, 9vw, 8rem);

  /* — Rayons, ombres ----------------------------------------------------- */
  --r1: 3px; --r2: 6px; --r3: 12px;
  --sh-papier:    0 1px 0 rgba(255,255,255,.22) inset, 0 12px 26px -14px rgba(13,9,5,.85);
  --sh-carte:     0 18px 38px -20px rgba(13,9,5,.9);
  --sh-flottante: 0 26px 56px -22px rgba(13,9,5,.95);

  /* — Temps -------------------------------------------------------------- */
  --d1: 160ms; --d2: 280ms; --d3: 520ms; --d4: 900ms;
  --e-out:    cubic-bezier(.22,1,.36,1);
  --e-in-out: cubic-bezier(.65,0,.35,1);
  --e-clip:   cubic-bezier(.76,0,.24,1);

  /* — Typographie -------------------------------------------------------- */
  --f-titre: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --f-cap:   'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
  --f-corps: 'EB Garamond', 'Garamond', 'Iowan Old Style', Georgia, serif;

  --fs-d1:    clamp(2.125rem, 1.25rem  + 3.89vw, 4.75rem);
  --fs-d2:    clamp(1.75rem,  1.25rem  + 2.22vw, 3.25rem);
  --fs-d3:    clamp(1.375rem, 1.167rem + 0.93vw, 2rem);
  --fs-d4:    clamp(1.1875rem,1.083rem + 0.46vw, 1.5rem);
  --fs-lead:  clamp(1.1875rem,1.042rem + 0.65vw, 1.625rem);
  --fs-body:  clamp(1.0625rem,1.021rem + 0.19vw, 1.1875rem);
  --fs-sm:    clamp(.9688rem, .948rem  + .09vw,  1.0625rem);
  --fs-micro: clamp(.8125rem, .802rem  + .05vw,  .875rem);
  --fs-label: clamp(.75rem,   .729rem  + .09vw,  .8125rem);

  --z-decor: 0; --z-corps: 1; --z-nav: 60; --z-sus: 90;
  color-scheme: dark;
}

/* Registre clair — appliqué à une section, pas au document */
.reg-parchemin {
  --fond:    var(--parch-200);
  --surface: var(--parch-100);
  --texte:   var(--encre-800);
  --texte-2: var(--encre-600);
  --texte-3: var(--sauge);
  --titre:   var(--encre-900);
  --accent:  var(--or-encre);
  --filet:   var(--or-500);
  --focus:   var(--prune);
  --erreur:  var(--erreur-parch);
}

/* ------------------------------------------------------------ 2. BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding-top: var(--flag-h);
  background: var(--nuit-900);
  color: var(--creme);
  font-family: var(--f-corps);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.68;
  letter-spacing: .008em;
  font-synthesis: none;
  hyphens: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(h1,h2,h3,h4,p,ul,ol,figure,blockquote) { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--or-300); color: var(--nuit-1000); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r1);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.saut {
  position: fixed; left: var(--e4); top: -100px; z-index: var(--z-sus);
  padding: var(--e3) var(--e5); background: var(--or-300); color: var(--nuit-1000);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; transition: top var(--d1);
}
.saut:focus { top: calc(var(--flag-h) + var(--e2)); }

/* ------------------------------------------------- 3. TYPOGRAPHIE */
h1, .d1 {
  font-family: var(--f-titre); font-weight: 600; font-size: var(--fs-d1);
  line-height: 1.04; letter-spacing: .045em; text-transform: uppercase;
  color: var(--titre);
}
h2, .d2 {
  font-family: var(--f-titre); font-weight: 600; font-size: var(--fs-d2);
  line-height: 1.1; letter-spacing: .055em; text-transform: uppercase;
  color: var(--titre);
}
h3, .d3 {
  font-family: var(--f-titre); font-weight: 600; font-size: var(--fs-d3);
  line-height: 1.2; letter-spacing: .03em; color: var(--titre);
}
h4, .d4 {
  font-family: var(--f-titre); font-weight: 600; font-size: var(--fs-d4);
  line-height: 1.25; letter-spacing: .01em; color: var(--titre);
}

.surtitre {
  font-family: var(--f-cap); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4);
}
.surtitre::after {
  content: ''; flex: 0 0 auto; width: 42px; height: 1px;
  background: linear-gradient(90deg, var(--filet), transparent);
}
.surtitre--centre { justify-content: center; }
.surtitre--centre::before {
  content: ''; width: 42px; height: 1px;
  background: linear-gradient(270deg, var(--filet), transparent);
}

.chapo {
  font-family: var(--f-titre); font-weight: 500; font-size: var(--fs-lead);
  line-height: 1.46; letter-spacing: .004em; color: var(--texte);
  max-width: 46ch; text-transform: none;
}
.note { font-size: var(--fs-sm); color: var(--texte-2); }
.micro { font-size: var(--fs-micro); line-height: 1.55; color: var(--texte-3); }
.italique { font-style: italic; font-family: var(--f-titre); font-weight: 500; }
p + p { margin-top: var(--e4); }
p { max-width: var(--wrap-texte); color: var(--texte-2); }
strong, b { font-weight: 600; color: var(--texte); }
em { font-style: italic; }
.chiffre { font-variant-numeric: lining-nums tabular-nums; }

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
    text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--d1); }
a:hover { color: var(--or-200); text-decoration-color: currentColor; }
.reg-parchemin a:hover { color: var(--prune); }

/* --------------------------------------------------- 4. STRUCTURE */
.wrap { width: min(100% - var(--gouttiere) * 2, var(--wrap)); margin-inline: auto; }
.wrap--etroit { max-width: var(--wrap-etroit); }

.section {
  position: relative; z-index: var(--z-corps);
  padding-block: var(--section-y);
  background: var(--fond); color: var(--texte);
}
.section--nuit { --fond: var(--nuit-900); }
/* Section fermée par un lavis : le padding bas doit disparaître, sinon la
   couleur du registre repasse en bande sous la vague. L'air se reporte
   au-dessus du lavis. */
.section--ferme { padding-bottom: 0; }
.section--ferme > .lavis { margin-top: calc(var(--section-y) * .55); }
.section--puits { --fond: var(--nuit-1000); }
.section > .wrap { position: relative; z-index: 2; }

.entete { max-width: 54ch; margin-bottom: var(--e8); }
.entete--centre { margin-inline: auto; text-align: center; }
/* En-tête dont le titre porte ses propres coupes : la mesure du texte courant
   ne doit plus le contraindre, seul le chapeau garde la sienne. */
.entete--large { max-width: none; }
.entete--centre .chapo { margin-inline: auto; max-width: 52ch; }
.entete h2 + .chapo { margin-top: var(--e5); }

/* Ligne de lumière — le rétro-éclairage de son comptoir.
   Elle ferme chaque section nuit. */
.lueur-comptoir {
  position: relative; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--or-500) 18%, var(--or-500) 82%, transparent);
  transform-origin: left center;
}
.lueur-comptoir::after {
  content: ''; position: absolute; inset: -1px 0 auto 0; height: 2px;
  box-shadow: 0 -1px 34px 5px rgba(255,178,92,.16);
}

/* --------------------------------------------------- 5. DÉCOR DE FOND */
#poussiere {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: var(--z-decor); pointer-events: none; opacity: .85;
}
.halo {
  position: fixed; inset: 0; z-index: var(--z-decor); pointer-events: none;
  background:
    radial-gradient(115% 62% at 50% -6%,  rgba(255,178,92,.10), transparent 62%),
    radial-gradient( 78% 52% at 8%  104%, rgba(82,48,73,.16),   transparent 68%),
    radial-gradient(140% 100% at 50% 118%, transparent 42%, rgba(13,9,5,.55));
}
.halo::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 58% 42% at 50% 8%, rgba(255,178,92,.09), transparent 70%);
  animation: bougie 4200ms ease-in-out infinite alternate;
}
@keyframes bougie { from { opacity: .74; transform: scale(1); } to { opacity: 1; transform: scale(1.035); } }

/* Grain — filtre SVG rasterisé par le navigateur, quelques centaines d'octets */
.grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.45'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: soft-light;
}
.reg-parchemin.grain::before { opacity: .07; mix-blend-mode: multiply; }

/* --------------------------------------------------- 6. ORNEMENTS */
.etincelle { display: inline-block; vertical-align: middle; fill: currentColor; }
.etincelle--lilas { color: var(--lilas); filter: drop-shadow(0 0 7px rgba(183,156,214,.5)); }

.filet-orne {
  display: flex; align-items: center; gap: var(--e4);
  max-width: 340px; margin: var(--e7) auto; color: var(--filet);
}
.filet-orne::before, .filet-orne::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent);
}

/* Phases de lune — le motif peint sur son comptoir */
.lunes { display: flex; align-items: center; justify-content: center; gap: 14px; }
.lunes svg { width: 16px; height: 16px; color: var(--filet); opacity: .62; }

/* Coins à rinceaux — masqués sous 768px (illisibles et coûteux) */
.coin { position: absolute; width: 74px; height: 74px; color: var(--or-500);
        opacity: .55; pointer-events: none; }
.coin--hg { top: -1px; left: -1px; }
.coin--hd { top: -1px; right: -1px; transform: scaleX(-1); }
.coin--bg { bottom: -1px; left: -1px; transform: scaleY(-1); }
.coin--bd { bottom: -1px; right: -1px; transform: scale(-1); }
@media (max-width: 47.9375rem) { .coin { display: none; } }

/* Lavis violet — le pied de ses deux moodboards, repris littéralement */
.lavis { display: block; width: 100%; height: clamp(70px, 9vw, 130px); color: var(--prune); }

/* Coupe de ligne maîtrisée dans un titre. L'espace final reste dans le premier
   segment : invisible à l'écran, mais la lecture vocale garde le mot séparé.
   En dessous de 62rem on laisse le segment se replier : mieux vaut trois
   lignes qu'un débordement. */
.tr { display: block; }
@media (min-width: 62rem) { .tr { white-space: nowrap; } }

/* Bord déchiré — l'entrée d'une feuille posée sur la nuit */
.dechirure { display: block; width: 100%; height: clamp(16px, 2vw, 26px); color: var(--parch-200); }

/* --------------------------------------------------- 7. BOUTONS */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2); isolation: isolate; overflow: hidden;
  padding: 1.05rem 2rem; min-height: 48px; border: 1px solid transparent;
  border-radius: var(--r1); cursor: pointer; text-decoration: none;
  font-family: var(--f-cap); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: .13em; text-transform: uppercase; line-height: 1;
  transition: color var(--d2) ease, background-color var(--d2) ease,
              border-color var(--d2) ease, box-shadow var(--d2) ease;
}
.btn__f {                                   /* le remplissage radial au survol */
  position: absolute; z-index: -1; inset: auto; top: 0; left: 0;
  width: 260%; aspect-ratio: 1; margin: -130% 0 0 -130%; border-radius: 50%;
  transform: scale(0); pointer-events: none; will-change: transform;
}
.btn__l { position: relative; }

.btn--or { background: var(--or-300); color: var(--nuit-1000);   /* 9,80:1 */
  box-shadow: 0 10px 24px -14px rgba(13,9,5,.9); }
.btn--or .btn__f { background: radial-gradient(circle, var(--or-100) 0%, var(--or-200) 62%, var(--or-300) 100%); }
.btn--or:hover, .btn--or:focus-visible { color: var(--nuit-1000);
  box-shadow: 0 0 26px -6px rgba(255,178,92,.34), 0 12px 26px -14px rgba(13,9,5,.9); }
.btn--or:active { transform: translateY(1px); background: var(--or-400); }

.btn--grave { background: transparent; color: var(--or-300); border-color: var(--or-400); }
.btn--grave .btn__f { background: radial-gradient(circle, rgba(201,155,74,.22), rgba(201,155,74,.06) 70%); }
.btn--grave:hover, .btn--grave:focus-visible { color: var(--or-200); border-color: var(--or-200); }

.reg-parchemin .btn--or { background: var(--prune); color: var(--parch-100); } /* 9,05:1 */
.reg-parchemin .btn--or .btn__f { background: radial-gradient(circle, #6B4060, #523049 70%); }
.reg-parchemin .btn--or:hover { color: var(--or-200); }                        /* 7,31:1 */
.reg-parchemin .btn--grave { color: var(--encre-800); border-color: var(--or-500); }
.reg-parchemin .btn--grave:hover { color: var(--prune); border-color: var(--prune); }

.btn[disabled], .btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn--large { width: 100%; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: var(--accent);
}
.lien-fleche svg { transition: transform var(--d2) var(--e-out); }
.lien-fleche:hover svg { transform: translateX(5px); }

/* --------------------------------------------------- 8. BANDEAU SDR + NAV */
/* Filet de maquette — même gabarit que les autres previews SDR-WEB :
   une seule ligne, fixée en haut, toujours visible. La barre de navigation
   et le panneau de réserve sont décalés d'autant. */
.flag {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--flag-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--e4);
  background: var(--prune); color: var(--parch-100);   /* 9,05:1 */
  font-family: var(--f-cap); font-weight: 600;
  font-size: clamp(.5938rem, .57rem + .1vw, .6563rem);
  letter-spacing: .12em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.flag b { color: var(--or-200); font-weight: 600; }
.flag-short { display: none; }
@media (max-width: 47.9375rem) {
  .flag-long { display: none; }
  .flag-short { display: inline; }
}

.nav {
  position: sticky; top: var(--flag-h); z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--e5);
  padding: var(--e3) var(--gouttiere);
  background: rgba(23,16,9,.9);
  border-bottom: 1px solid rgba(161,111,51,.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav__marque { display: flex; align-items: center; gap: var(--e3); text-decoration: none;
  flex: 0 0 auto; margin-right: auto; color: var(--or-200); }
.nav__marque svg { flex: 0 0 auto; width: 15px; height: 15px; fill: var(--lilas); }
.nav__marque b {
  font-family: var(--f-cap); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: .13em; text-transform: uppercase; line-height: 1.15;
  max-width: 12ch;
}
@media (max-width: 33.9375rem) { .nav__marque b { display: none; } }
.nav__liens { display: flex; gap: var(--e5); }
.nav__liens a {
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .11em;
  text-transform: uppercase; text-decoration: none; color: var(--creme-2);
  padding-block: var(--e2); position: relative; transition: color var(--d1);
}
.nav__liens a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--or-400); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d2) var(--e-out);
}
.nav__liens a:hover, .nav__liens a[aria-current='true'] { color: var(--or-200); }
.nav__liens a:hover::after, .nav__liens a[aria-current='true']::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: var(--e3); flex: 0 0 auto; }
.nav .btn { padding: .7rem 1.25rem; min-height: 42px; }

.reserve-btn {
  position: relative; display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 42px; padding: .6rem .9rem; background: transparent; cursor: pointer;
  border: 1px solid rgba(161,111,51,.5); border-radius: var(--r1); color: var(--creme-2);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .1em;
  text-transform: uppercase; transition: border-color var(--d1), color var(--d1);
}
.reserve-btn:hover { border-color: var(--or-400); color: var(--or-200); }
.reserve-btn__n {
  min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 999px;
  background: var(--or-300); color: var(--nuit-1000);
  display: grid; place-items: center; font-size: .7rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.reserve-btn[data-vide='true'] .reserve-btn__n { background: var(--nuit-600); color: var(--creme-3); }

@media (max-width: 61.9375rem) {
  .nav { flex-wrap: wrap; padding-bottom: 0; row-gap: 0; }
  .nav__marque { order: 1; }
  .nav__actions { order: 2; }
  .nav__liens {
    order: 3; flex: 1 0 100%;
    margin: var(--e3) calc(var(--gouttiere) * -1) 0;
    padding: 0 var(--gouttiere) var(--e3);
    gap: var(--e5);
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--gouttiere);
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2rem), transparent);
  }
  .nav__liens::-webkit-scrollbar { display: none; }
  .nav__liens a { white-space: nowrap; scroll-snap-align: start; }
  .nav .btn { padding: .7rem 1rem; }
}

/* Barre d'action collante mobile */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  display: none; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--gouttiere) calc(var(--e3) + env(safe-area-inset-bottom));
  background: rgba(13,9,5,.94); border-top: 1px solid rgba(161,111,51,.34);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateY(110%); transition: transform var(--d2) var(--e-out);
}
.barre-mobile[data-on='true'] { transform: translateY(0); }
.barre-mobile p { flex: 1; margin: 0; font-size: var(--fs-micro); color: var(--creme-3); }
@media (max-width: 61.9375rem) { .barre-mobile { display: flex; } }

/* Indicateur de progression — les phases de lune de son comptoir */
.progression {
  position: fixed; right: clamp(12px, 1.6vw, 26px); top: 50%; z-index: var(--z-nav);
  transform: translateY(-50%); display: none; flex-direction: column; gap: 14px;
}
.progression a { display: grid; place-items: center; width: 30px; height: 30px;
  color: var(--or-500); opacity: .45; transition: opacity var(--d2), color var(--d2), transform var(--d2); }
.progression a svg { width: 15px; height: 15px; }
.progression a:hover, .progression a[aria-current='true'] {
  opacity: 1; color: var(--or-200); transform: scale(1.2); }
@media (min-width: 75rem) and (min-height: 40rem) { .progression { display: flex; } }

/* --------------------------------------------------- 9. HERO */
.hero {
  position: relative; z-index: var(--z-corps);
  padding-block: clamp(3rem, 6vw, 6rem) clamp(3rem, 5vw, 5rem);
  background: var(--nuit-900);
}
.hero__grille {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 62rem) { .hero__grille { grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); } }

.hero__logo { width: min(100%, 420px); height: auto; margin-bottom: var(--e6); }
.hero__baseline {
  font-family: var(--f-titre); font-weight: 500; font-style: italic;
  font-size: var(--fs-lead); line-height: 1.4; color: var(--or-200);
  max-width: 24ch; margin-bottom: var(--e5);
}
.hero h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem); letter-spacing: .08em;
  color: var(--creme); margin-bottom: var(--e5);
}
.hero__texte { color: var(--creme-2); max-width: 42ch; margin-bottom: var(--e6); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--e4); margin-bottom: var(--e5); }

.cartouche {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4);
  padding: var(--e3) var(--e5); margin-bottom: var(--e6);
  border: 1px solid var(--or-500); border-radius: var(--r1);
  background: rgba(36,26,16,.6);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .11em;
  text-transform: uppercase; color: var(--or-200);
}
.cartouche span { display: inline-flex; align-items: center; gap: var(--e2); }
.cartouche em { font-style: normal; color: var(--creme-3); }

/* La fenêtre — une découpe sur la pièce, jamais un fond plein cadre.
   C'est ce qui garantit le contraste du texte et la netteté des rendus. */
.fenetre {
  position: relative; overflow: hidden; border-radius: var(--r1);
  border: 1px solid var(--or-500);
  box-shadow: var(--sh-carte), 0 0 0 7px rgba(23,16,9,.85), 0 0 0 8px rgba(161,111,51,.22);
}
.fenetre img { width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pos, 50% 50%);
  filter: contrast(1.05) saturate(1.02); }
.fenetre::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(122% 92% at 50% 40%, transparent 34%, rgba(13,9,5,.5) 100%),
    linear-gradient(180deg, rgba(13,9,5,.12) 0%, transparent 34%, rgba(13,9,5,.42) 100%);
}
.fenetre--portrait { aspect-ratio: 4/5; }
.fenetre--paysage  { aspect-ratio: 16/10; }
.fenetre--carre    { aspect-ratio: 1; }
@media (min-width: 62rem) { .fenetre--hero { aspect-ratio: 5/6; } }

/* Mention obligatoire : un rendu n'est pas une photo du lieu */
.synthese {
  position: absolute; right: var(--e3); bottom: var(--e3); z-index: 2;
  padding: .3rem .6rem; border-radius: var(--r1);
  background: rgba(13,9,5,.86); border: 1px solid rgba(161,111,51,.4);
  font-family: var(--f-corps); font-weight: 500; font-size: var(--fs-micro);
  letter-spacing: .01em; color: var(--parch-300);   /* 9,1:1 sur le fond du cartouche */
}

.defilement {
  display: inline-flex; align-items: center; gap: var(--e3);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--creme-3); text-decoration: none;
}
.defilement i { display: block; width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--or-500), transparent); }

/* --------------------------------------------------- 10. FAITS */
.faits { display: grid; gap: 1px; background: rgba(161,111,51,.3);
  border-block: 1px solid rgba(161,111,51,.3); }
@media (min-width: 48rem) { .faits { grid-template-columns: repeat(3, 1fr); } }
.fait { background: var(--nuit-900); padding: var(--e6) var(--e5); text-align: center; }
.fait dt { font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--or-400); margin-bottom: var(--e3); }
.fait dd { margin: 0; font-family: var(--f-titre); font-weight: 600;
  font-size: var(--fs-d4); color: var(--creme); text-transform: uppercase;
  letter-spacing: .04em; }
.fait p { margin: var(--e2) auto 0; font-size: var(--fs-micro); color: var(--creme-3); max-width: 30ch; }

/* --------------------------------------------------- 11. FICHES (fil rouge) */
.fiches { display: grid; gap: var(--e6); }
@media (min-width: 56rem) { .fiches { grid-template-columns: repeat(3, 1fr); } }

.fiche {
  --focus: var(--prune);
  position: relative; display: flex; flex-direction: column;
  padding: var(--e6) var(--e5) var(--e5);
  background: var(--parch-100); color: var(--encre-800);
  border-radius: var(--r1); box-shadow: var(--sh-papier);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--d2) var(--e-out), box-shadow var(--d2) var(--e-out);
}
.fiche:hover { transform: rotate(var(--tilt, 0deg)) translateY(-6px); box-shadow: var(--sh-flottante); }
.fiche__num {
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .18em;
  text-transform: uppercase; color: var(--or-encre); margin-bottom: var(--e4);
  display: flex; align-items: center; gap: var(--e2);
}
.fiche h3 { color: var(--encre-900); margin-bottom: var(--e3);
  font-size: var(--fs-d3); text-transform: uppercase; letter-spacing: .05em; }
.fiche__verbe { font-family: var(--f-titre); font-style: italic; font-weight: 500;
  color: var(--prune); font-size: var(--fs-body); margin-bottom: var(--e5); }
.fiche__verbe + p { margin-top: 0; }
.fiche p { color: var(--encre-600); font-size: var(--fs-sm); }
.fiche .lien-fleche { margin-top: auto; padding-top: var(--e5); color: var(--or-encre); }

/* --------------------------------------------------- 12. CARTE (parchemin) */
.reg-parchemin { position: relative; }
/* Les onglets n'existent que si le JS peut les piloter. Sans lui, les quatre
   familles de la carte se lisent simplement à la suite, chacune sous son titre. */
.onglets { display: none; flex-wrap: wrap; gap: var(--e2); justify-content: center;
  margin-bottom: var(--e7); }
html.js-ok .onglets { display: flex; }
.carte-titre { margin-bottom: var(--e6); text-align: center; text-transform: uppercase;
  letter-spacing: .06em; }
html.js-ok .carte-titre {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
[role="tabpanel"] + [role="tabpanel"] { margin-top: var(--e8); }
html.js-ok [role="tabpanel"] + [role="tabpanel"] { margin-top: 0; }
.onglet {
  padding: .7rem 1.2rem; min-height: 44px; cursor: pointer; border-radius: var(--r1);
  background: transparent; border: 1px solid rgba(161,111,51,.55); color: var(--encre-600);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .1em;
  text-transform: uppercase; transition: all var(--d1);
}
.onglet:hover { border-color: var(--prune); color: var(--encre-900); }
.onglet[aria-selected='true'] { background: var(--encre-800); border-color: var(--encre-800);
  color: var(--parch-100); }                                  /* 11,62:1 */

.carte-liste { display: grid; gap: var(--e5); }
@media (min-width: 48rem) { .carte-liste { grid-template-columns: repeat(2, 1fr); column-gap: var(--e8); } }

.item {
  display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e4);
  padding-bottom: var(--e5); border-bottom: 1px dotted rgba(161,111,51,.55);
}
.item h4 { grid-column: 1; display: flex; align-items: baseline; gap: var(--e2);
  font-size: var(--fs-d4); color: var(--encre-900); }
.item__prix { grid-column: 2; grid-row: 1; font-family: var(--f-cap); font-weight: 600;
  font-size: var(--fs-sm); color: var(--or-encre); white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums; }
.item p { grid-column: 1 / -1; margin: 0; font-size: var(--fs-sm); color: var(--encre-600); }
.item__note { grid-column: 1 / -1; font-family: var(--f-titre); font-style: italic;
  font-weight: 500; font-size: var(--fs-sm); color: var(--sauge); }

.encadre {
  position: relative; padding: var(--e6) var(--e5);
  border: 1px solid rgba(161,111,51,.55); border-radius: var(--r1);
  box-shadow: inset 0 0 0 3.5px rgba(161,111,51,.22);
  background: color-mix(in srgb, var(--parch-300) 55%, transparent);
}
.encadre h4 { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--or-encre); }
.encadre p { font-size: var(--fs-sm); color: var(--encre-800); }

/* --------------------------------------------------- 13. RAYONS (boutique) */
.rayons { display: grid; gap: var(--e5); }
@media (min-width: 48rem)  { .rayons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem)  { .rayons { grid-template-columns: repeat(3, 1fr); } }

.rayon {
  position: relative; display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e5); background: var(--nuit-800);
  border: 1px solid rgba(161,111,51,.32); border-radius: var(--r1);
  transition: border-color var(--d2), transform var(--d2) var(--e-out), box-shadow var(--d2);
}
.rayon:hover { border-color: var(--or-400); transform: translateY(-5px); box-shadow: var(--sh-carte); }
.rayon__icone { width: 34px; height: 34px; color: var(--or-400); }
.rayon h3 { font-size: var(--fs-d4); color: var(--creme); text-transform: uppercase;
  letter-spacing: .05em; }
.rayon__sous { font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .13em;
  text-transform: uppercase; color: var(--or-400); }
.rayon p { font-size: var(--fs-sm); color: var(--creme-2); }
.rayon__pied { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); margin-top: auto; padding-top: var(--e4);
  border-top: 1px solid rgba(161,111,51,.24); }
.rayon__prix { font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .08em;
  color: var(--creme-3); font-variant-numeric: lining-nums tabular-nums; }

.mettre {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 40px; padding: .5rem .85rem; cursor: pointer;
  background: transparent; border: 1px solid rgba(161,111,51,.5);
  border-radius: 999px; color: var(--creme-2);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .09em;
  text-transform: uppercase; white-space: nowrap;
  transition: all var(--d1);
}
.mettre:hover { border-color: var(--or-400); color: var(--or-200); }
.mettre svg { width: 13px; height: 13px; }
.mettre[aria-pressed='true'] { background: rgba(201,155,74,.15); border-color: var(--or-400);
  color: var(--or-200); }
.mettre[aria-pressed='true'] .mettre__off { display: none; }
.mettre:not([aria-pressed='true']) .mettre__on { display: none; }

/* --------------------------------------------------- 14. ATELIERS */
.ateliers { display: grid; gap: var(--e5); }
@media (min-width: 52rem) { .ateliers { grid-template-columns: repeat(2, 1fr); } }

.atelier {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e3) var(--e5);
  padding: var(--e5); border: 1px solid rgba(161,111,51,.3); border-radius: var(--r1);
  background: linear-gradient(180deg, rgba(36,26,16,.9), rgba(23,16,9,.9));
  transition: border-color var(--d2), transform var(--d2) var(--e-out);
}
.atelier:hover { border-color: var(--or-400); transform: translateY(-4px); }
.atelier__lune { grid-row: 1 / span 3; width: 40px; height: 40px; color: var(--or-400); }
.atelier h3 { font-size: var(--fs-d4); color: var(--creme); text-transform: uppercase;
  letter-spacing: .05em; }
.atelier p { font-size: var(--fs-sm); color: var(--creme-2); margin: 0; }
.atelier__meta { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .09em;
  text-transform: uppercase; color: var(--creme-3); }
.atelier__meta span { display: inline-flex; align-items: center; gap: var(--e2); }
.atelier__meta b { color: var(--or-300); font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums; }

.avenir {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4) var(--e6);
  margin-top: var(--e6); padding: var(--e6);
  background: var(--parch-200); color: var(--encre-800);
  border-radius: var(--r1); box-shadow: var(--sh-papier);
}
.avenir div { flex: 1 1 22rem; }
.avenir h3 { color: var(--encre-900); margin-bottom: var(--e3); }
.avenir p { color: var(--encre-600); font-size: var(--fs-sm); }

/* --------------------------------------------------- 15. FONDATRICE */
.fondatrice { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (min-width: 56rem) { .fondatrice { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); } }

.medaillon { position: relative; width: min(100%, 340px); margin-inline: auto; }
.medaillon img {
  width: 100%; aspect-ratio: 1/1.06; object-fit: cover; object-position: 50% 22%;
  clip-path: ellipse(48% 50% at 50% 50%);
  filter: grayscale(1) sepia(.2) contrast(1.06) brightness(1.02);
}
.medaillon__cadre { position: absolute; inset: -10px; color: var(--or-500); }
.medaillon__cadre ellipse { fill: none; stroke: currentColor; stroke-width: 1; }

.manifeste p { color: var(--encre-600); font-size: var(--fs-body); }
.manifeste__lead { font-family: var(--f-titre); font-weight: 500; font-style: italic;
  font-size: var(--fs-lead); color: var(--encre-900); line-height: 1.45; }
.signature { display: flex; align-items: center; gap: var(--e5); margin-top: var(--e6); }
.signature svg { width: 150px; height: auto; color: var(--prune); }
.signature p { margin: 0; font-size: var(--fs-micro); color: var(--sauge); }

/* --------------------------------------------------- 16. TIRAGES (vraies photos) */
.tirages { display: grid; gap: var(--e6); justify-items: center; }
@media (min-width: 40rem) { .tirages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .tirages { grid-template-columns: repeat(4, 1fr); } }

/* Plafond dur : jamais au-delà de 320px affichés pour une source de 480px */
.tirage {
  --focus: var(--prune);
  max-width: 320px; padding: 11px 11px 0; background: var(--parch-100);
  border-radius: var(--r1); box-shadow: var(--sh-papier);
  transform: rotate(var(--tilt, -.8deg));
  transition: transform var(--d2) var(--e-out), box-shadow var(--d2);
}
.tirage:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: var(--sh-flottante); }
.tirage img { width: 100%; aspect-ratio: 1; object-fit: cover;
  filter: saturate(.94) contrast(1.04) brightness(1.02); }
.tirage figcaption { padding: var(--e3) 0 var(--e4); text-align: center;
  font-family: var(--f-titre); font-style: italic; font-weight: 500;
  font-size: var(--fs-micro); color: var(--encre-600); }

/* --------------------------------------------------- 17. LE REGISTRE */
.registre {
  position: relative; display: grid; gap: 0;
  border-radius: var(--r1); overflow: hidden; box-shadow: var(--sh-flottante);
}
@media (min-width: 56rem) { .registre { grid-template-columns: 1fr 1fr; } }

.registre__page {
  position: relative; padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--parch-200); color: var(--encre-800);
}
.registre__page--g { background: var(--parch-300);
  box-shadow: inset -14px 0 22px -16px rgba(38,26,33,.45); }
.registre__page--d { box-shadow: inset 14px 0 22px -16px rgba(38,26,33,.45); }
@media (max-width: 55.9375rem) {
  .registre__page--g { box-shadow: inset 0 -14px 22px -16px rgba(38,26,33,.4); }
  .registre__page--d { box-shadow: inset 0 14px 22px -16px rgba(38,26,33,.4); }
}
.registre h2 { color: var(--encre-900); }
.registre__avantages { display: grid; gap: var(--e4); margin-top: var(--e6); }
.registre__avantages li { display: grid; grid-template-columns: auto 1fr; gap: var(--e4);
  align-items: start; }
.registre__avantages svg { width: 17px; height: 17px; margin-top: .35em; color: var(--or-encre); }
.registre__avantages b { display: block; font-family: var(--f-titre); font-weight: 600;
  font-size: var(--fs-d4); color: var(--encre-900); margin-bottom: .15em; }
.registre__avantages p { margin: 0; font-size: var(--fs-sm); color: var(--encre-600); }

.champ { display: block; margin-bottom: var(--e5); }
.champ > span { display: block; margin-bottom: var(--e2);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .11em;
  text-transform: uppercase; color: var(--or-encre); }
.champ > span em { font-style: normal; text-transform: none; letter-spacing: .02em;
  font-family: var(--f-corps); color: var(--sauge); }
.champ input {
  width: 100%; min-height: 52px; padding: .8rem 1rem;
  background: var(--parch-100); color: var(--encre-800);   /* 11,62:1 */
  border: 1px solid #7A6A52; border-radius: var(--r1);
  font-family: var(--f-corps); font-weight: 500; font-size: max(1rem, var(--fs-body));
  transition: border-color var(--d1), box-shadow var(--d1);
}
.champ input::placeholder { color: #6E6152; opacity: 1; }   /* 4,9:1 */
.champ input:hover { border-color: #63543F; }
.champ input:focus { outline: none; border-color: var(--prune);
  box-shadow: 0 0 0 3px rgba(82,48,73,.24); }
.champ input[aria-invalid='true'] { border-color: var(--erreur-parch);
  box-shadow: 0 0 0 3px rgba(142,59,47,.18); }
.erreur { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e2);
  font-size: var(--fs-sm); color: var(--erreur-parch); }
.erreur:empty { display: none; }

.puces { display: flex; flex-wrap: wrap; gap: var(--e2); }
.puce { position: relative; }
.puce input { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); }
.puce span {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; padding: .6rem 1rem; cursor: pointer; border-radius: 999px;
  background: color-mix(in srgb, var(--parch-100) 70%, transparent);
  border: 1px solid rgba(161,111,51,.55); color: var(--encre-600);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .09em;
  text-transform: uppercase; transition: all var(--d1);
}
.puce span:hover { border-color: var(--prune); color: var(--encre-900); }
.puce input:checked + span { background: var(--encre-800); border-color: var(--encre-800);
  color: var(--parch-100); }
.puce input:focus-visible + span { outline: 2px solid var(--prune); outline-offset: 3px; }

.consentement { display: grid; grid-template-columns: auto 1fr; gap: var(--e4);
  align-items: start; margin-bottom: var(--e5); cursor: pointer; }
.consentement input { width: 22px; height: 22px; margin: .25em 0 0; accent-color: var(--prune); }
.consentement span { font-size: var(--fs-sm); color: var(--encre-600); }

.rgpd { margin-top: var(--e4); font-size: var(--fs-sm); line-height: 1.5; color: var(--encre-600); }
.rgpd a { color: var(--or-encre); }

/* Le cachet de cire — l'état de succès */
.cachet-zone { display: none; text-align: center; padding-block: var(--e5); }
.cachet-zone[data-on='true'] { display: block; }
.cachet-zone:focus { outline: none; }
.cachet {
  position: relative; width: 96px; aspect-ratio: 1; margin: 0 auto var(--e6);
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 62% 74%, rgba(0,0,0,.34), transparent 58%),
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.16), transparent 46%),
    radial-gradient(circle at 46% 42%, #5B3358 0%, #46284A 52%, #331B38 100%);
  /* une cire écrasée n'est jamais un cercle */
  border-radius: 47% 53% 51% 49% / 52% 46% 54% 48%;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.14),
    inset 0 -6px 12px rgba(0,0,0,.42),
    0 10px 20px -10px rgba(13,9,5,.75);
  filter: saturate(.92);
}
.cachet::before {                           /* la bavure du bord */
  content: ''; position: absolute; inset: -3px;
  border-radius: 51% 49% 47% 53% / 48% 54% 46% 52%;
  background: radial-gradient(circle at 50% 54%, rgba(70,40,74,.55), transparent 68%);
  z-index: -1;
}
.cachet svg { width: 34px; height: 34px; fill: var(--or-200); opacity: .82;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); }
.cachet-zone h3 { color: var(--encre-900); margin-bottom: var(--e3); }
.cachet-zone p { margin-inline: auto; color: var(--encre-600); }

/* --------------------------------------------------- 18. VENIR / FRISE */
.venir { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 56rem) { .venir { grid-template-columns: 1fr 1fr; } }

.infos { display: grid; gap: var(--e5); align-content: start; }
.infos > div { display: grid; grid-template-columns: auto 1fr; gap: var(--e4);
  padding-bottom: var(--e5); border-bottom: 1px solid rgba(161,111,51,.24); }
.infos svg { width: 20px; height: 20px; margin-top: .25em; color: var(--or-400); }
.infos dt { font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--or-400); margin-bottom: var(--e2); }
.infos dd { margin: 0; color: var(--creme-2); font-size: var(--fs-sm); }
.infos dd b { color: var(--creme); }

.frise { position: relative; padding-left: var(--e6); }
.frise::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--or-500), rgba(161,111,51,.15)); }
.frise li { position: relative; padding-bottom: var(--e6); }
.frise li:last-child { padding-bottom: 0; }
.frise li::before {
  content: ''; position: absolute; left: calc(var(--e6) * -1); top: .38em;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--or-500); background: var(--nuit-900);
}
.frise li[data-etat='fait']::before { background: var(--or-400); border-color: var(--or-400); }
.frise li[data-etat='ici']::before { background: var(--or-200); border-color: var(--or-200);
  box-shadow: 0 0 0 5px rgba(232,206,154,.18); }
.frise b { display: block; font-family: var(--f-titre); font-weight: 600; font-size: var(--fs-d4);
  color: var(--creme); text-transform: uppercase; letter-spacing: .04em; }
.frise span { font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--or-400); }
.frise p { margin: var(--e2) 0 0; font-size: var(--fs-sm); color: var(--creme-2); }
.frise li[data-etat='avenir'] b { color: var(--creme-3); }
.frise li[data-etat='avenir'] span { color: var(--creme-3); }

/* --------------------------------------------------- 19. FAQ */
.faq { border-top: 1px solid rgba(161,111,51,.26); }
.faq__item { border-bottom: 1px solid rgba(161,111,51,.26); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e5);
  width: 100%; padding: var(--e5) 0; cursor: pointer; text-align: left;
  background: none; border: 0; color: var(--creme);
  font-family: var(--f-titre); font-weight: 600; font-size: var(--fs-d4);
  letter-spacing: .01em; transition: color var(--d1);
}
.faq__q:hover { color: var(--or-200); }
.faq__signe { position: relative; flex: 0 0 auto; width: 16px; height: 16px; color: var(--or-400); }
.faq__signe::before, .faq__signe::after {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 1px; background: currentColor;
  transition: transform var(--d2) var(--e-out);
}
.faq__signe::after { transform: rotate(90deg); }
.faq__q[aria-expanded='true'] .faq__signe::after { transform: rotate(0deg); }
.faq__a { overflow: hidden; }
.faq__a > div { padding-bottom: var(--e6); }
.faq__a p { color: var(--creme-2); font-size: var(--fs-sm); }

/* --------------------------------------------------- 20. RÉSERVE (panneau) */
.panneau {
  position: fixed; inset: var(--flag-h) 0 0; z-index: var(--z-sus); display: none;
  background: rgba(13,9,5,.72); backdrop-filter: blur(4px);
}
.panneau[data-on='true'] { display: block; }
.panneau__boite {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(100%, 25rem);
  display: flex; flex-direction: column;
  background: var(--parch-200); color: var(--encre-800);
  box-shadow: var(--sh-flottante);
}
.panneau__tete { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding: var(--e5); border-bottom: 1px solid rgba(161,111,51,.4); }
.panneau__tete h2 { font-size: var(--fs-d3); color: var(--encre-900); }
.panneau__fermer { width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 1px solid rgba(161,111,51,.5); border-radius: var(--r1);
  cursor: pointer; color: var(--encre-800); }
.panneau__corps { flex: 1; overflow-y: auto; padding: var(--e5); }
.panneau__corps li { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding-block: var(--e4); border-bottom: 1px dotted rgba(161,111,51,.5); }
.panneau__corps b { font-family: var(--f-titre); font-weight: 600; font-size: var(--fs-body);
  color: var(--encre-900); }
.panneau__corps small { display: block; font-size: var(--fs-micro); color: var(--sauge); }
.panneau__retirer { background: none; border: 0; cursor: pointer; color: var(--erreur-parch);
  font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .08em;
  text-transform: uppercase; padding: var(--e2); min-height: 44px; }
.panneau__pied { padding: var(--e5); border-top: 1px solid rgba(161,111,51,.4);
  background: var(--parch-300); }
.panneau__vide { text-align: center; padding-block: var(--e8); color: var(--encre-600); }

/* --------------------------------------------------- 21. PIED DE PAGE */
.pied { background: var(--nuit-1000); padding-block: var(--e8) var(--e6);
  border-top: 1px solid rgba(161,111,51,.26); position: relative; z-index: var(--z-corps); }
.pied__haut { display: grid; gap: var(--e7); margin-bottom: var(--e8); }
@media (min-width: 52rem) { .pied__haut { grid-template-columns: 1.3fr 1fr 1fr; } }
.pied img { width: 200px; max-width: 60%; height: auto; margin-bottom: var(--e5); }
.pied h3 { font-family: var(--f-cap); font-size: var(--fs-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--or-400); margin-bottom: var(--e4); }
.pied li { margin-bottom: var(--e3); }
.pied a { color: var(--creme-2); text-decoration: none; font-size: var(--fs-sm); }
.pied a:hover { color: var(--or-200); text-decoration: underline; }
.pied__bas { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5);
  align-items: center; justify-content: space-between;
  padding-top: var(--e5); border-top: 1px solid rgba(161,111,51,.2); }
.pied__bas p { margin: 0; font-size: var(--fs-micro); color: var(--creme-3); max-width: none; }

.mentions { background: var(--nuit-1000); padding-block: var(--e6);
  border-top: 1px solid rgba(161,111,51,.16); }
.mentions p { font-size: var(--fs-micro); color: var(--creme-3); max-width: 88ch; }
.mentions p + p { margin-top: var(--e3); }

/* --------------------------------------------------- 22. ANIMATION — GARDES
   Aucun état caché n'est posé en CSS sans la classe .gsap-ok, elle-même
   posée par JS après confirmation que GSAP a chargé. Sans JS, sans GSAP,
   ou hors ligne : la page reste intégralement lisible.                      */
.gsap-ok .ligne { display: block; overflow: hidden;
  padding-block: .18em .24em; margin-block: -.18em -.24em; }
.gsap-ok .ligne-i { display: block; will-change: transform; }
.mot { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .halo::after { animation: none; opacity: .85; }
}

/* Curseur personnalisé — desktop à pointeur fin uniquement */
.curseur { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  mix-blend-mode: screen; opacity: 0; }
.curseur i { position: absolute; top: 0; left: 0; border-radius: 50%;
  transform: translate(-50%, -50%); display: block; }
.curseur__p { width: 5px; height: 5px; background: var(--or-100); }
.curseur__h { width: 40px; height: 40px; border: 1px solid rgba(201,155,74,.5); }
html.curseur-on, html.curseur-on * { cursor: none; }
html.curseur-on input, html.curseur-on textarea, html.curseur-on select { cursor: auto; }

@media print {
  .nav, .barre-mobile, .progression, #poussiere, .halo, .curseur, .panneau { display: none !important; }
  body { padding-top: 0; }
  body { background: #fff; color: #000; }
}