/* ==========================================================================
   Cut & Clean — D.A. « Trait de lumière »
   Tout vient du salon : béton ciré noir, lignes LED blanc chaud tracées en
   diagonale, néon sneaker violet, sol résiné marbré, enseigne crème sur noir.
   Ronds = lumière (ring lights, boutons). Droits = béton (cartes, filets).
   ========================================================================== */

:root {
  --noir: #0b0b0d;
  --beton: #141416;
  --beton-2: #1c1c1f;
  --filet: #2a2a2f;
  --os: #eee9dc;            /* crème de l'enseigne */
  --os-2: #a9a59b;
  --led: #ffe2b0;           /* lignes LED du salon */
  --led-rgb: 255, 226, 176;
  --neon: #7c4dff;          /* néon sneaker, relevé sur photo */
  --neon-rgb: 124, 77, 255;
  --neon-clair: #bda9ff;

  --lum: 1;                 /* 0 = salon éteint, 1 = allumé (piloté par le film d'entrée) */

  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --head: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 12px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--noir);
  /* grain léger : le béton ciré n'est jamais un aplat */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--os);
  font: 400 1rem/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; height: auto; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

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

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--os); color: var(--noir); padding: 10px 16px; font-weight: 600; border-radius: 999px; }
.skip-link:focus { top: 12px; }

/* ---------- Typographie ---------- */

h1, h2, .presta-highlight-name, .team-name, .footer-name {
  font-family: var(--f-sans);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.94;
}
h1 { font-size: clamp(1.9rem, 8.8vw, 3.4rem); }
h2 { font-size: clamp(2rem, 5.2vw, 4.2rem); text-wrap: balance; }

.eyebrow {
  display: inline-block; margin-bottom: 20px; padding: 6px 12px 5px;
  background: var(--os); color: var(--noir); border-radius: 7px;
  font: 800 0.74rem/1 var(--f-sans); font-stretch: 125%; letter-spacing: 0.02em; text-transform: uppercase;
  transform: rotate(-3deg); transform-origin: 0 100%;
}
.eyebrow--neon { background: var(--neon); color: #fff; transform: rotate(2deg); }

/* ---------- Boutons : anneaux de lumière ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  border: 1.5px solid transparent; border-radius: 999px;
  font: 600 0.84rem/1.1 var(--f-sans); font-stretch: 112%;
  letter-spacing: 0.05em; text-transform: uppercase; text-align: center;
  transition: background-color .25s, border-color .25s, color .25s, box-shadow .35s, transform .35s var(--ease);
}
.btn { position: relative; overflow: hidden; isolation: isolate; transition: color .3s, border-color .3s, transform .35s var(--ease), translate .5s var(--ease); }
/* au survol, la couleur monte dans le bouton comme une lumière qu'on allume */
.btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--led); transform: translateY(102%); transition: transform .5s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn-icon { transition: transform .35s var(--ease); }
.btn:hover .btn-icon { transform: translateX(6px); }
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--os); color: var(--noir); }
.btn-primary:hover { color: var(--noir); }

.btn-outline { border-color: rgba(238, 233, 220, .34); color: var(--os); }
.btn-outline::before { background: var(--os); }
.btn-outline:hover { border-color: var(--os); color: var(--noir); }

.btn-neon { border-color: var(--neon); color: var(--neon-clair); }
.btn-neon::before { background: var(--neon); }
.btn-neon:hover { color: #fff; }

/* ---------- Le trait de lumière ---------- */

.trait {
  position: absolute; top: clamp(56px, 8vw, 118px); left: -6%; width: 112%; height: 2px;
  background: var(--led);
  box-shadow: 0 0 10px rgba(var(--led-rgb), .75), 0 0 38px rgba(var(--led-rgb), .32);
  transform: rotate(var(--a, 0deg)); transform-origin: 0 50%;
  pointer-events: none;
}
.trait--neon { background: #d9ccff; box-shadow: 0 0 10px rgba(var(--neon-rgb), .95), 0 0 42px rgba(var(--neon-rgb), .6); }
.js .trait { transform: rotate(var(--a, 0deg)) scaleX(0); transition: transform 1.5s var(--ease); }
.js .trait.in { transform: rotate(var(--a, 0deg)) scaleX(1); }

.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- En-tête ---------- */

.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--head); transition: background-color .4s; }
.site-header.scrolled { background: rgba(11, 11, 13, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.scroll-progress {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--led); box-shadow: 0 0 12px rgba(var(--led-rgb), .8);
  transform: scaleX(var(--scroll, 0)); transform-origin: 0 50%;
  opacity: calc(.25 + .75 * var(--lum));
}

/* logotype officiel : grand en haut de page, il se range quand l'en-tête prend son fond */
.logo { display: flex; align-items: center; }
.logotype { display: block; width: auto; height: 58px; fill: var(--os); overflow: visible; transform-origin: 0 50%; transition: height .5s var(--ease), transform .7s var(--ease); }
.site-header.scrolled .logotype { height: 46px; }
.logo:hover .logotype { transform: rotate(-3deg) scale(1.04); }

.main-nav { display: none; gap: clamp(18px, 2.4vw, 34px); }
.nav-link { position: relative; padding: 8px 0; font: 500 0.78rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--os-2); transition: color .25s; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--led); box-shadow: 0 0 8px rgba(var(--led-rgb), .8); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.nav-link:hover, .nav-link.active { color: var(--os); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-cta { min-height: 42px; padding: 10px 20px; font-size: 0.76rem; }

.menu-toggle { width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; border: 1.5px solid rgba(238, 233, 220, .3); border-radius: 50%; }
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--os); transition: transform .35s var(--ease); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: calc(var(--head) + 28px) var(--gut) calc(28px + env(safe-area-inset-bottom)); background: var(--noir); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-nav a { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--filet); font-stretch: 125%; font-weight: 800; font-size: clamp(1.3rem, 6vw, 2rem); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }
.menu-nav a span { font: 500 0.72rem var(--f-mono); letter-spacing: 0.1em; color: var(--led); }
.menu-foot { display: grid; gap: 14px; }
.menu-tel { font: 500 1.1rem var(--f-mono); }
.menu-addr { font: 400 0.78rem var(--f-mono); color: var(--os-2); }

.sticky-cta-mobile { position: fixed; inset: auto 0 0 0; z-index: 80; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(11, 11, 13, .94); border-top: 1px solid var(--filet); }
.sticky-cta-mobile .btn { min-height: 48px; padding: 12px 14px; }

/* ---------- Entrée : film d'allumage ---------- */

.hero { position: relative; height: 100svh; min-height: 620px; }
.js .hero { height: 260vh; }
.js.no-film .hero { height: 100svh; }

.hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; display: grid; grid-template-rows: 1fr auto; padding-top: var(--head); background: #050409; }

.film { position: absolute; inset: 0; }
.film picture, .film video, .film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-video { opacity: 0; transition: opacity .5s; }
.film-ready .film-video { opacity: 1; }
/* la boucle du choix se pose sur la dernière image du film (même image de départ) : le passage ne se voit pas */
.film-boucle { opacity: 0; transition: opacity .25s; pointer-events: none; }
.hero-stage.choisir .film-boucle.prete { opacity: 1; }
html.accueil-photo .hero .film-boucle { display: none; }
.js:not(.no-film) .hero .film-real { opacity: var(--real, 0); }
.hero .film-real img { object-position: 50% 50%; }

.hero-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(5, 4, 9, .88) 0%, rgba(5, 4, 9, .55) 38%, rgba(5, 4, 9, 0) 72%),
  linear-gradient(0deg, rgba(5, 4, 9, .92) 0%, rgba(5, 4, 9, 0) 42%),
  linear-gradient(180deg, rgba(5, 4, 9, .7) 0%, rgba(5, 4, 9, 0) 22%); }

.hero-inner { position: relative; align-self: end; padding-bottom: clamp(24px, 4vh, 48px); }
.hero-tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(16px, 2.6vh, 28px); padding: 8px 14px; border: 1px solid rgba(238, 233, 220, .22); border-radius: 999px; font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; background: rgba(5, 4, 9, .5); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--os-2); }
.is-open .pulse { background: #7dffb0; box-shadow: 0 0 10px #7dffb0; }
.is-closed .pulse { background: #ff8a7a; }

h1 span { color: var(--neon-clair); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3.4vh, 34px); }
.hero-note { margin-top: 14px; font: 400 0.74rem var(--f-mono); letter-spacing: 0.04em; color: var(--os-2); }

.hero-foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 16px 20px; }
.hero-foot::before { content: ""; position: absolute; left: var(--gut); right: var(--gut); top: 0; height: 2px; background: var(--led); box-shadow: 0 0 12px rgba(var(--led-rgb), .8); transform: scaleX(var(--lum)); transform-origin: 0 50%; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; font: 400 0.74rem/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--os-2); }
.hero-stats strong { color: var(--os); font-weight: 500; margin-right: 6px; }
.hero-stats strong span { color: var(--led); }
.hero-hint { display: none; align-items: center; gap: 12px; font: 400 0.72rem var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--led); opacity: max(0, calc(1 - var(--lum) * 5)); }
.js:not(.no-film) .hero-hint { display: flex; }
.hint-line { width: 2px; height: 28px; background: var(--led); box-shadow: 0 0 10px var(--led); animation: hint 2s var(--ease) infinite; transform-origin: 50% 0; }
@keyframes hint { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.film-caption { font: 400 0.68rem/1.4 var(--f-mono); letter-spacing: 0.02em; color: var(--os-2); }

/* ---------- Sections ---------- */

.sec { position: relative; padding-block: clamp(96px, 13vw, 172px); overflow: clip; }
.sec-head { display: grid; gap: 20px 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-desc { max-width: 46ch; color: var(--os-2); font-size: 1.02rem; }

/* ---------- Entrée : « Mission coupe fraîche », clin d'œil aux jeux en monde ouvert ----------
   Le film suit le défilement (index.js), l'interface s'affiche par-dessus quand la classe .jeu est posée,
   l'écran de fin quand la classe .fin l'est. Rien de tout ça sans JavaScript ni en mouvement réduit. */

.js.has-mission:not(.no-film) .hero { height: 1050vh; }
.js.has-mission:not(.no-film) .hero-inner { z-index: 2; opacity: var(--texte, 1); transform: translateY(calc((1 - var(--texte, 1)) * -28px)); }
.has-mission .hero-stage.jeu .hero-inner, .has-mission .hero-stage.fin .hero-inner { visibility: hidden; }
.js.has-mission:not(.no-film) .hero-scrim { opacity: calc(.25 + .75 * var(--texte, 1)); transition: opacity .4s; }
.has-mission .hero-foot { z-index: 2; transition: opacity .4s; }
.has-mission .hero-stage.jeu .hero-foot { opacity: 0; pointer-events: none; }
.has-mission .film video { transition: filter 1.2s ease, transform 1.6s var(--ease); }
.has-mission .hero-stage.fin .film video { filter: grayscale(1) contrast(1.08) brightness(.55); transform: scale(1.04); }
.has-mission .visite-mots { display: none; }

.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
.has-mission .hud { display: block; opacity: 0; transition: opacity .5s; }
.has-mission .hero-stage.jeu .hud { opacity: 1; }
.hud p { margin: 0; }

/* mission, en haut à gauche, comme le titre d'une mission qui commence */
.hud-mission { position: absolute; left: var(--gut); top: calc(var(--head) + 18px); display: grid; gap: 4px;
  font: 900 clamp(1.3rem, 2.6vw, 2.2rem)/1 var(--f-sans); font-stretch: 125%; font-style: italic; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--os); text-shadow: 0 2px 0 #000, 0 0 24px rgba(0, 0, 0, .6); }
.hud-mission span { font: 500 0.7rem/1 var(--f-mono); font-style: normal; letter-spacing: 0.18em; color: var(--led); text-shadow: 0 1px 0 #000; }

/* les étoiles : elles s'allument une à une, et deviennent la note du salon à la fin */
.hud-droite { position: absolute; right: var(--gut); top: calc(var(--head) + 18px); display: grid; justify-items: end; gap: 8px; }
.hud-etoiles { display: flex; gap: 4px; }
.hud-etoiles i { width: clamp(20px, 2.2vw, 30px); aspect-ratio: 1; background: rgba(0, 0, 0, .35);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  box-shadow: inset 0 0 0 30px rgba(238, 233, 220, .18); transition: background-color .2s; }
.hud-etoiles i.pleine { background: var(--os); animation: etoile .9s steps(2) 3; }
@keyframes etoile { 50% { background: var(--neon-clair); } }
.hud-argent { font: 900 clamp(1.4rem, 2.6vw, 2.2rem)/1 var(--f-sans); font-stretch: 112%; color: #9fe38a; text-shadow: 0 2px 0 #000, 0 0 18px rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.hud-argent b { margin-left: .15em; font-weight: 900; }

/* la mini-carte, en bas à gauche : rues autour du 55 avenue de Paris, le salon en violet, le client en crème */
.hud-carte { position: absolute; left: var(--gut); bottom: clamp(22px, 4vh, 40px); width: clamp(120px, 13vw, 180px); display: grid; gap: 6px; }
.hud-radar { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, rgba(30, 28, 40, .85), rgba(8, 7, 12, .9)); box-shadow: 0 0 0 3px rgba(0, 0, 0, .7), 0 0 0 4px rgba(238, 233, 220, .25), 0 10px 30px rgba(0, 0, 0, .5); }
.hud-rues { position: absolute; inset: -10%; width: 120%; height: 120%; transform: rotate(var(--cap, 0deg)); transition: transform .3s linear; }
.hud-rues path { fill: none; stroke: rgba(238, 233, 220, .55); stroke-width: 7; stroke-linecap: round; }
.hud-rues path.fine { stroke-width: 3.5; stroke: rgba(238, 233, 220, .3); }
.hud-blip { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: var(--neon); box-shadow: 0 0 0 2px #fff, 0 0 14px var(--neon); }
.hud-blip::after { content: "✂"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 70%; color: #fff; }
.hud-moi { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border: 7px solid transparent; border-bottom: 14px solid var(--os); translate: -50% calc(-50% + (1 - var(--trajet, 0)) * 34px); filter: drop-shadow(0 0 4px #000); }
.hud-nord { position: absolute; left: 50%; top: 5%; translate: -50% 0; font: 800 0.6rem/1 var(--f-sans); color: var(--os); }
.hud-barres { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.hud-barres span { height: 6px; border-radius: 1px; background: rgba(0, 0, 0, .6); position: relative; overflow: hidden; }
.hud-barres span::after { content: ""; position: absolute; inset: 0; background: var(--os); transform: scaleX(calc(.3 + .7 * var(--lum, 0))); transform-origin: 0 50%; }
.hud-barres span + span::after { background: var(--neon); transform: scaleX(var(--lum, 0)); }
.hud-lieu { font: 500 0.62rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--os); text-shadow: 0 1px 0 #000; }

/* objectifs et répliques, en bas au centre, comme les sous-titres d'un jeu */
.hud-texte { position: absolute; left: 50%; bottom: clamp(30px, 7vh, 70px); width: min(640px, calc(100% - 2 * var(--gut))); translate: -50% 0; text-align: center; }
.hud-texte p { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity .35s;
  font: 600 clamp(1rem, 1.5vw, 1.3rem)/1.35 var(--f-sans); color: #fff; text-shadow: 0 2px 0 #000, 0 0 2px #000, 0 0 18px rgba(0, 0, 0, .8); }
.hud-texte p.on { opacity: 1; }
.hud-texte b { color: var(--led); font-weight: 800; }
.hud-texte i { font-style: normal; color: var(--neon-clair); font-weight: 800; }

/* fin de mission */
.hero-fin { position: absolute; inset: 0; z-index: 3; display: none; place-content: center; justify-items: center; gap: 14px; padding: var(--head) var(--gut) 0; text-align: center; }
.has-mission .hero-fin { display: grid; opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
.has-mission .hero-stage.fin .hero-fin { opacity: 1; visibility: visible; transition: opacity .6s; }
.fin-mot { font: 900 clamp(4.4rem, 15vw, 12rem)/.9 var(--f-sans); font-stretch: 125%; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; color: var(--os);
  text-shadow: 0 4px 0 #000, 0 0 40px rgba(0, 0, 0, .7); transform: scale(1.25); opacity: 0; transition: transform .9s cubic-bezier(.2, 1.3, .4, 1), opacity .3s; }
.hero-stage.fin .fin-mot { transform: none; opacity: 1; }
.fin-mission { font: 800 clamp(1rem, 1.6vw, 1.3rem)/1 var(--f-sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; color: var(--noir); background: var(--led); padding: 8px 16px 7px; transform: rotate(-2deg); }
.fin-respect { font: 500 0.78rem/1.4 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--os); text-shadow: 0 1px 0 #000; }
.fin-respect span { color: var(--led); letter-spacing: .1em; margin-right: 6px; }
.fin-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.hero-stage:not(.fin) .hero-fin a { pointer-events: none; }

@media (max-width: 699px) {
  .hud-mission { top: calc(var(--head) + 12px); max-width: calc(100% - 2 * var(--gut) - 150px); font-size: 1.05rem; line-height: 1.05; }
  .hud-droite { top: calc(var(--head) + 12px); }
  .hud-carte { width: 96px; bottom: calc(86px + env(safe-area-inset-bottom)); }
  .hud-lieu { display: none; }
  .hud-texte { bottom: calc(92px + env(safe-area-inset-bottom)); left: auto; right: var(--gut); width: calc(100% - 2 * var(--gut) - 110px); translate: 0 0; text-align: right; }
  .hud-texte p { font-size: 0.92rem; }
  .fin-btns .btn { flex: 1 1 100%; }
}

/* ---------- Le choix, sur la dernière image du film (v24) ----------
   Deux grandes cartes qu'on comprend sans mode d'emploi : Cut (tarifs) ou Clean (sneakers),
   chacune avec son prix d'appel, puis la réservation directe. Ce sont de vrais liens. */
.choix { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: clamp(10px, 1.8vh, 18px);
  padding: clamp(70px, 16vh, 150px) var(--gut) clamp(18px, 3.4vh, 34px);
  background: linear-gradient(0deg, rgba(5, 4, 9, .96) 0%, rgba(5, 4, 9, .82) 55%, rgba(5, 4, 9, 0) 100%);
  opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .45s, transform .6s var(--ease), visibility 0s .45s; }
.hero-stage.choisir .choix { opacity: 1; visibility: visible; transform: none; transition: opacity .45s, transform .6s var(--ease); }
.choix-question { margin: 0; text-align: center; font: 700 clamp(1.15rem, 2vw, 1.7rem)/1.3 var(--f-sans); color: #fff; text-shadow: 0 2px 0 #000, 0 0 18px rgba(0, 0, 0, .8); }
.choix-question i { font-style: normal; font-weight: 800; color: var(--neon-clair); }
.choix-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); width: min(820px, 100%); }
.choix-carte { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px); border-radius: 18px; text-align: left;
  transition: transform .35s var(--ease), box-shadow .35s, background-color .3s; }
.choix-cut { background: var(--os); color: var(--noir); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.choix-clean { background: var(--neon); color: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 34px rgba(var(--neon-rgb), .45); }
.cc-icone { grid-row: 1 / 3; width: clamp(46px, 5vw, 62px); aspect-ratio: 1; }
.cc-icone img { width: 100%; height: 100%; object-fit: contain; border-radius: 22%; }
.cc-texte { display: grid; gap: 2px; }
.cc-texte b { font: 900 clamp(1.6rem, 3vw, 2.4rem)/.95 var(--f-sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; }
.cc-texte span { font: 500 0.82rem/1.3 var(--f-sans); opacity: .78; }
.cc-prix { grid-column: 2; font: 500 0.82rem var(--f-mono); letter-spacing: 0.04em; margin-top: 6px; }
.cc-fleche { grid-column: 3; grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; font: 400 1.2rem/1 var(--f-mono); transition: transform .35s var(--ease); }
@media (hover: hover) {
  .choix-carte:hover { transform: translateY(-4px) rotate(-.6deg); }
  .choix-carte:hover .cc-fleche { transform: translateX(4px); }
}
.choix-carte:focus-visible { outline: 3px solid var(--led); outline-offset: 4px; }
.choix-carte.choisi { transform: scale(1.03); }
.choix-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.choix-suite { margin: 0; font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--os-2); }
.choix-suite span { display: inline-block; animation: suite 1.8s var(--ease) infinite; }
@keyframes suite { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
@media (max-width: 699px) {
  .choix { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }      /* au-dessus de la barre Appeler / Prendre RDV */
  .choix-cartes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .choix-carte { padding: 12px 14px; border-radius: 14px; }
  .cc-icone { width: 42px; }
  .cc-fleche { width: 38px; height: 38px; }
  .choix-liens { display: none; }                                           /* la barre du bas fait déjà Réserver / Appeler */
}
@media (max-width: 699px) and (max-height: 700px) {
  .choix { padding-top: 40px; gap: 8px; }
  .choix-question { font-size: 1rem; }
  .cc-texte span { display: none; }
  .choix-suite { display: none; }
}
@media (prefers-reduced-motion: reduce) { .choix-suite span { animation: none; } }

/* pendant la pause, l'interface de jeu laisse la place au choix */
.has-mission .hero-stage.choisir .hud-carte, .has-mission .hero-stage.choisir .hud-infos { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }

/* en attendant le film tourné : la vraie photo de Sergio qui accueille, le titre en haut, la question et le choix en bas */
.js.accueil-photo .hero { height: 100vh; height: 100svh; }
html.accueil-photo .hero-inner { opacity: 1 !important; transform: none !important; }
.accueil-photo .hero-stage { grid-template-rows: auto 1fr; }
.js .accueil-photo .hero-inner, .accueil-photo .hero-inner { align-self: start; padding-top: clamp(14px, 3vh, 34px); opacity: 1; transform: none; visibility: visible; }
.accueil-photo .hero-inner h1 { font-size: clamp(1.7rem, 3.4vw, 3.1rem); }
.accueil-photo .hero-ctas, .accueil-photo .hero-note, .accueil-photo .hero-foot { display: none; }
.accueil-photo .hero-scrim { background: linear-gradient(180deg, rgba(5, 4, 9, .8) 0%, rgba(5, 4, 9, 0) 34%), linear-gradient(90deg, rgba(5, 4, 9, .55) 0%, rgba(5, 4, 9, 0) 40%); }
.accueil-photo .film img { object-position: 50% 30%; }
.accueil-photo .choix-question { font-size: clamp(1.15rem, 2vw, 1.7rem); }
@media (max-width: 699px) {
  .accueil-photo .hero-inner h1 { font-size: 1.6rem; }
  .accueil-photo .hero-tag { display: none; }
  .accueil-photo .choix { padding-top: 36px; background: linear-gradient(0deg, rgba(5, 4, 9, .92) 0%, rgba(5, 4, 9, .7) 62%, rgba(5, 4, 9, 0) 100%); }
}
/* écran large : Sergio passe à droite, le titre, sa question et le choix occupent la gauche */
@media (min-aspect-ratio: 1/1) {
  .accueil-photo .film-poster img { transform: translateX(24%) scale(1.04); transform-origin: 50% 40%; }
  .accueil-photo .hero-scrim { background: linear-gradient(90deg, #050409 0%, #050409 18%, rgba(5, 4, 9, .85) 34%, rgba(5, 4, 9, .25) 52%, rgba(5, 4, 9, 0) 64%), linear-gradient(180deg, rgba(5, 4, 9, .6) 0%, rgba(5, 4, 9, 0) 22%); }
  .accueil-photo .choix { right: 46%; padding: 0 var(--gut) clamp(26px, 5vh, 54px); background: none; }
  .accueil-photo .choix-question { text-align: center; }
  .accueil-photo .hero-inner h1 { font-size: clamp(2rem, 3.6vw, 3.6rem); max-width: 9.5em; }
  .accueil-photo .hero-inner { max-width: min(var(--wrap), 50vw); margin-left: 0; }
}
@media (max-width: 699px) and (max-height: 760px) {
  /* petit téléphone : le choix se resserre pour laisser le visage de Sergio visible */
  :is(.accueil-photo, .cinema) .choix { gap: 6px; padding-top: 24px; }
  :is(.accueil-photo, .cinema) .choix-objet { width: 19vw; }
  :is(.accueil-photo, .cinema) .choix-sous { display: none; }
  :is(.accueil-photo, .cinema) .choix-fente { min-height: 70px; }
  :is(.accueil-photo, .cinema) .choix-de { min-height: 48px; }
  :is(.accueil-photo, .cinema) .choix-de-img { width: 40px; height: 40px; }
  :is(.accueil-photo, .cinema) .choix-question { font-size: 1rem; }
}

/* ---------- Entrée en mode cinéma : la séquence de vraies photos (scene3d.js), cadre de film, grain ---------- */
.js.cinema .hero { height: 900vh; }
.poster-sergio { display: none; }
html.accueil-photo .poster-rue { display: none; }
html.accueil-photo .poster-sergio { display: block; }
html.accueil-photo .visite-canvas { display: none; }
html.accueil-photo .hero .film-video { display: none; }
html.accueil-photo .hero { height: 100vh !important; height: 100svh !important; }
.cinema.has-visit .visite-canvas { opacity: 1; }
/* bandes noires de cinéma et grain, pendant la séquence */
.cine-cadre { display: none; }
.cinema .cine-cadre { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s; }
.cinema .hero-stage.jeu .cine-cadre { opacity: 1; }
.cine-cadre::before, .cine-cadre::after { content: ""; position: absolute; left: 0; right: 0; height: 7vh; background: #000; }
.cine-cadre::before { top: var(--head); }
.cine-cadre::after { bottom: 0; }
.cinema .hero-stage.jeu .hud-texte { bottom: calc(7vh + 18px); }
.cinema .hero-stage.jeu .hud-carte { bottom: calc(7vh + 14px); }
.cinema .hero-stage.jeu .hud-mission, .cinema .hero-stage.jeu .hud-droite { top: calc(var(--head) + 7vh + 14px); }
.cinema .hero-stage::before { content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .5s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
/* sur la dernière photo de Sergio : le choix, sans interface de jeu */
.cinema .hero-stage.choisir .hud { opacity: 0; }
@media (max-width: 699px) { .cinema .hud-mission { font-size: 0.9rem; max-width: none; white-space: nowrap; } }
.cinema .hero-stage.choisir .hero-foot { opacity: 0; pointer-events: none; }
@media (min-aspect-ratio: 1/1) {
  .cinema .choix { right: 46%; padding: 0 var(--gut) clamp(26px, 5vh, 54px); background: none; }
}
@media (prefers-reduced-motion: reduce) { .cinema .hero-stage::before { animation: none; } }

/* sans film : la question en bas du premier écran, sans minuteur */
.no-film:not(.accueil-photo) .choix { position: relative; background: none; padding: 24px var(--gut) 8px; grid-row: 2; }
.no-film .choix-minuteur { display: none; }
.no-film:not(.accueil-photo) .hero-stage { grid-template-rows: auto auto auto; align-content: end; }

/* les suites du film : une seule visible, quand elle est chargée et qu'on est dans la 2e partie */
.film-branche { opacity: 0; transition: opacity .4s; }
.hero-stage[data-phase="b"][data-branche="cut"].pret-cut .film-cut,
.hero-stage[data-phase="b"][data-branche="clean"].pret-clean .film-clean { opacity: 1; }

@media (max-width: 699px) {
  .choix { padding-bottom: calc(82px + env(safe-area-inset-bottom)); gap: 8px; }
  .choix-scene { gap: 12px; }
  .choix-objet { width: 26vw; }
  .choix-fente { min-height: 90px; }
  .choix-sous { font-size: 0.6rem; }
}

/* ---------- Tarifs ---------- */

.sec-head--tarifs { display: block; }
.sec-head--tarifs .sec-desc { margin-top: 18px; }
/* Prix repères + boutons en tête des tarifs, bandeau de réservation en fin de grille */
.reperes { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.reperes li { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border: 1px solid var(--filet); border-radius: 999px; font-size: .95rem; color: rgba(238, 233, 220, .8); }
.reperes b { font: 500 1.15rem var(--f-mono); color: var(--os); }
.reperes .reperes-top { border-color: var(--os); background: var(--os); color: var(--noir); }
.reperes .reperes-top b { color: var(--noir); }
.sec-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.presta-fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: clamp(36px, 5vw, 64px); padding: clamp(22px, 3vw, 34px); border: 2px solid var(--os); border-radius: 18px; }
.presta-fin-txt { margin: 0; max-width: 520px; font-size: 1.02rem; line-height: 1.5; color: rgba(238, 233, 220, .82); }
.presta-fin-txt strong { display: block; margin-bottom: 4px; font-size: 1.3rem; font-stretch: 125%; font-weight: 800; text-transform: uppercase; color: var(--os); }
.presta-fin-btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) {
  .sec-ctas .btn, .presta-fin-btns, .presta-fin-btns .btn { width: 100%; }
  .reperes li { padding: 8px 13px; font-size: .88rem; }
}

/* Deux tickets côte à côte : la formule (crème) et la remise (violet du néon) */
.tickets { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); margin-bottom: clamp(44px, 6vw, 84px); }
.tickets > * { min-width: 0; }

.presta-highlight {
  position: relative; display: grid;
  background: var(--os); color: var(--noir); border-radius: 16px;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease);
}
.presta-highlight-main { padding: clamp(24px, 3.4vw, 44px); }
.presta-highlight-tag { display: inline-block; padding: 5px 10px 4px; background: var(--noir); color: var(--os); border-radius: 6px; font: 800 0.7rem/1 var(--f-sans); font-stretch: 125%; letter-spacing: 0.04em; text-transform: uppercase; }
.presta-highlight-name { margin-block: 16px 14px; font-size: clamp(1.9rem, 3.5vw, 3.1rem); letter-spacing: -0.02em; }
.presta-highlight-desc { max-width: 46ch; color: #45423b; }
.presta-highlight-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: clamp(22px, 3vw, 36px) clamp(24px, 3.4vw, 44px); border-top: 2px dashed rgba(11, 11, 13, .35); }
.presta-highlight-old { font: 400 1.15rem var(--f-mono); color: #6f6b62; text-decoration: line-through; }
.presta-highlight-new { font: 500 clamp(3.4rem, 7vw, 5.2rem)/0.9 var(--f-mono); letter-spacing: -0.06em; white-space: nowrap; }
.presta-highlight-meta { font: 500 0.8rem var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #45423b; }
.presta-highlight-price .btn { flex-basis: 100%; margin-top: 16px; background: var(--noir); color: var(--os); }
.presta-highlight-price .btn::before { background: var(--neon); }
.presta-highlight-price .btn:hover { color: #fff; }

.remise { display: grid; align-content: center; padding: clamp(24px, 3.2vw, 44px); background: var(--neon); color: #fff; border-radius: 16px; transition: transform .5s var(--ease); }
.remise-montant { font: 500 clamp(3.6rem, 7.4vw, 5.6rem)/0.9 var(--f-mono); letter-spacing: -0.06em; white-space: nowrap; }
.remise-quoi { margin-top: 10px; font-stretch: 125%; font-weight: 800; font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1; text-transform: uppercase; }
.remise-qui { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.remise-qui li { padding: 8px 13px 7px; background: #fff; color: var(--noir); border-radius: 999px; font: 800 0.76rem/1 var(--f-sans); font-stretch: 112%; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.remise-note { margin-top: 16px; font-size: 0.92rem; line-height: 1.45; }
@media (hover: hover) { .remise:hover { transform: rotate(-1.5deg) scale(1.02); } }

.prestations-grid { display: grid; gap: clamp(18px, 2vw, 28px); align-items: start; }
.presta-cat { border-top: 2px solid var(--os); padding-top: 18px; }
#prestations .presta-cat { position: relative; padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 28px) 14px; border: 0; border-radius: 6px; background: var(--beton); overflow: hidden; }
/* une ligne LED se trace en haut de la carte au survol */
#prestations .presta-cat::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--led); box-shadow: 0 0 10px rgba(var(--led-rgb), .75), 0 0 38px rgba(var(--led-rgb), .32); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease); }
#prestations .presta-cat:hover::after, #prestations .presta-cat:focus-within::after { transform: scaleX(1); }
.cat-title { font-size: 1.12rem; font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
#prestations .cat-title { font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1; letter-spacing: -0.01em; }
.presta-subhead { margin-top: 26px; font: 500 0.74rem var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--led); }
.presta-subhead span { color: var(--os-2); letter-spacing: 0.04em; text-transform: none; margin-left: 8px; }
.presta-list { margin-top: 10px; }

.presta-item { position: relative; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.presta-item:last-child { border-bottom: 0; }
.presta-list--compact .presta-item { padding: 12px 0; }
/* nom · · · · prix : les pointillés sont un vrai élément souple, rien n'est peint derrière les textes */
.presta-meta { display: flex; align-items: baseline; gap: 10px; }
.presta-meta::before { content: ""; order: 1; flex: 1 1 18px; min-width: 14px; border-bottom: 2px dotted rgba(238, 233, 220, .26); transform: translateY(-4px); transition: border-color .3s; }
.presta-name { order: 0; font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
.presta-name small { font: 400 0.74rem var(--f-mono); color: var(--os-2); margin-left: 4px; white-space: nowrap; }
.presta-price { order: 2; font: 500 1.12rem var(--f-mono); white-space: nowrap; transition: color .25s; }
.presta-dur { display: block; margin-top: 2px; font: 400 0.72rem var(--f-mono); letter-spacing: 0.06em; color: var(--os-2); }
.presta-desc { margin-top: 6px; max-width: 46ch; font-size: 0.92rem; line-height: 1.5; color: var(--os-2); }
.presta-note { margin-top: 12px; font-size: 0.9rem; color: var(--os-2); }
.presta-note strong { color: var(--os); }

/* lignes ajoutables au ticket (activées par index.js) */
.presta-item.addable { padding-left: 36px; }
.presta-add { position: absolute; inset: 0; width: 100%; border-radius: 2px; }
.presta-add::before { content: "+"; position: absolute; left: 0; top: 15px; width: 22px; height: 22px; display: grid; place-content: center; border: 1.5px solid rgba(238, 233, 220, .4); border-radius: 50%; font: 500 0.9rem/1 var(--f-mono); color: var(--os-2); transition: background-color .25s, border-color .25s, color .25s, transform .5s var(--ease); }
.presta-list--compact .presta-add::before { top: 11px; }
.presta-add[aria-pressed="true"]::before { content: "✓"; background: var(--led); border-color: var(--led); color: var(--noir); }
.presta-item.picked .presta-price, .presta-item.picked .presta-name { color: var(--led); }
.presta-cat--neon .presta-add[aria-pressed="true"]::before { background: var(--neon); border-color: var(--neon); color: #fff; }
.presta-cat--neon .presta-item.picked .presta-price, .presta-cat--neon .presta-item.picked .presta-name { color: var(--neon-clair); }

@media (hover: hover) {
  .presta-item.addable:hover .presta-name, .presta-item.addable:hover .presta-price { color: var(--led); }
  .presta-item.addable:hover .presta-meta::before { border-color: var(--led); }
  .presta-cat--neon .presta-item.addable:hover .presta-name, .presta-cat--neon .presta-item.addable:hover .presta-price { color: var(--neon-clair); }
  .presta-cat--neon .presta-item.addable:hover .presta-meta::before { border-color: var(--neon-clair); }
  .presta-item.addable:hover .presta-add:not([aria-pressed="true"])::before { transform: rotate(90deg); background: var(--os); border-color: var(--os); color: var(--noir); }
}

.ticket-hint { margin-bottom: 22px; font: 400 0.78rem var(--f-mono); letter-spacing: 0.03em; color: var(--os-2); }
.ticket-hint::before { content: "+ "; color: var(--led); }

/* ---------- 02 · Clean : la scène ----------
   Version posée d'abord (sans JavaScript, mouvement réduit, économie de données) : tout se lit dans l'ordre.
   Plus bas, la version épinglée : le film couvre l'écran, les étiquettes de dépôt tombent une à une. */

.clean { position: relative; background: #07060c; }
.clean-stage { position: relative; display: grid; gap: 28px; padding: clamp(88px, 12vw, 140px) var(--gut) 40px; }
.clean-tete { order: -1; }
.clean-tete h2 { max-width: 13ch; }
/* sous le titre : le prix d'appel et « sans rendez-vous », lisibles d'un coup d'œil */
.clean-prix { margin-top: 14px; font: 500 0.8rem/1.4 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--os); }
.clean-prix b { font: 800 1.15em/1 var(--f-sans); font-stretch: 125%; letter-spacing: 0; color: var(--neon-clair); }
.clean-film .film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.film-course { opacity: var(--course, 0); }
.compare-avant { clip-path: inset(0 0 0 calc(var(--cmp, 50) * 1%)); }
.js:not(.no-film) .compare-avant { clip-path: none; }
.compare-range { display: none; width: 100%; margin-top: 14px; accent-color: var(--neon); }
.js.no-film .compare-range { display: block; }
.clean-etat, .clean-suite { display: none; }
.clean-fin { justify-self: start; }

.clean-stage .film-caption { justify-self: start; }

/* ----- version épinglée ----- */
.js:not(.no-film) .clean-pin { height: 300vh; }   /* court : l'essentiel est sous la scène */
.js:not(.no-film) .clean-stage { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
/* le film couvre la scène ; sa boîte garde ses proportions 16/9, c'est sur elle que la paire 3D se cale */
.js:not(.no-film) .clean-film { position: absolute; left: 50%; top: 50%; width: max(100vw, max(100svh, 600px) * 16 / 9); transform: translate(-50%, -50%); }
/* la paire 3D ouvre la séquence et fait la liaison entre les deux films : scene3d.js voile alors l'image
   (--voile) et pose une ombre sous la paire (--ombre) */
.clean-film .film::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--voile, 0);
  background: radial-gradient(58% 55% at 46% 44%, rgba(var(--neon-rgb), .26), rgba(var(--neon-rgb), 0) 72%), linear-gradient(180deg, #0b0914 0%, #0d0a17 71%, #1a1430 71.2%, #0a0910 100%); }
.clean-film .film::before { content: ""; position: absolute; z-index: 3; left: 15%; top: 68.5%; width: 56%; height: 10%; pointer-events: none; opacity: var(--ombre, 0); background: radial-gradient(closest-side, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0)); }
/* lisibilité : un peu de nuit en haut et en bas de l'image */
.js:not(.no-film) .clean-stage::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 6, 12, .86) 0%, rgba(7, 6, 12, 0) 36%), linear-gradient(0deg, rgba(7, 6, 12, .92) 0%, rgba(7, 6, 12, 0) 40%); }

.js:not(.no-film) .clean-tete { position: absolute; z-index: 3; left: var(--gut); top: calc(var(--head) + 22px); transition: opacity .45s, transform .6s var(--ease); }
.js:not(.no-film) .clean-tete h2 { font-size: clamp(1.7rem, 3.5vw, 3.2rem); }
.js:not(.no-film) [data-acte="2"] .clean-tete, .js:not(.no-film) [data-acte="3"] .clean-tete { opacity: 0; transform: translateY(-18px); }

/* l'état de la paire, en très gros : « CRADE. » se fait rayer par un trait de lumière, « NICKEL. » apparaît derrière */
.js:not(.no-film) .clean-etat { display: block; position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: clamp(26px, 5svh, 46px); pointer-events: none; }
.clean-mots { position: relative; display: grid; justify-content: start; margin-top: 4px; font-stretch: 125%; font-weight: 900; font-size: clamp(4rem, 17.4vw, 17.5rem); line-height: .84; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; }
.mot { --x: calc(var(--p, 0) * 112% - 6%); grid-area: 1 / 1; transition: opacity .45s, transform .7s var(--ease); }
.mot--crade { color: transparent; -webkit-text-stroke: clamp(1.5px, .16vw, 3px) var(--os); clip-path: polygon(calc(var(--x) + 3.5%) -12%, 101% -12%, 101% 112%, calc(var(--x) - 3.5%) 112%); }
.mot--nickel { color: var(--os); clip-path: polygon(-1% -12%, calc(var(--x) + 3.5%) -12%, calc(var(--x) - 3.5%) 112%, -1% 112%); }
.mot--filez { color: var(--os); opacity: 0; transform: translateX(-6%) skewX(-10deg); }
/* le trait de lumière qui sépare les deux mots, à la même pente que la découpe */
.clean-mots::after { content: ""; position: absolute; left: calc(var(--p, 0) * 112% - 9.5%); top: -12%; width: 7%; height: 124%; pointer-events: none;
  opacity: calc(clamp(0, var(--p, 0) * 30, 1) * clamp(0, (1 - var(--p, 0)) * 30, 1));
  background: linear-gradient(to bottom right, rgba(var(--led-rgb), 0) calc(50% - 16px), rgba(var(--led-rgb), .28) calc(50% - 2px), #fff3dc calc(50% - 1.5px), #fff3dc calc(50% + 1.5px), rgba(var(--led-rgb), .28) calc(50% + 2px), rgba(var(--led-rgb), 0) calc(50% + 16px)); }
[data-acte="3"] .mot--crade, [data-acte="3"] .mot--nickel { opacity: 0; transform: translateX(8%); }
[data-acte="3"] .mot--filez { opacity: 1; transform: skewX(-10deg); }
.js:not(.no-film) .clean-fin { position: absolute; z-index: 3; left: var(--gut); top: calc(var(--head) + 26px); display: grid; gap: 22px; justify-items: start; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .5s, transform .7s var(--ease), visibility 0s .5s; }
.js:not(.no-film) .clean-suite { display: block; max-width: 17ch; font-stretch: 125%; font-weight: 800; font-size: clamp(1.7rem, 3.5vw, 3.2rem); line-height: .96; letter-spacing: -.015em; text-transform: uppercase; }
.js:not(.no-film) [data-acte="3"] .clean-fin { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .15s, transform .7s var(--ease) .15s; }
.js:not(.no-film) .clean-stage .film-caption { position: absolute; z-index: 3; right: var(--gut); bottom: 8px; font-size: 0.6rem; opacity: .75; }

@media (max-aspect-ratio: 1/1) {
  /* écran en hauteur : le film devient une bande, calée pour que la paire reste au milieu de l'écran */
  /* --film-y : haut du film, sous les deux lignes du titre (avant, « de sneakers » débordait sur l'image)
     --film-w / --film-dx : largeur et décalage de la bande (la paire reste au milieu de l'écran) ; hauteur = largeur × 9/16 */
  .js:not(.no-film) .clean-stage { --film-y: 136px; --film-w: 132vw; --film-dx: -7vw; --film-h: calc(var(--film-w) * .5625); }
  .js:not(.no-film) .clean-film { left: 0; top: calc(var(--head) + var(--film-y)); width: var(--film-w); transform: translateX(var(--film-dx)); }
  .js:not(.no-film) .clean-stage::before { background: linear-gradient(180deg, #07060c calc(var(--head) + var(--film-y) - 6px), rgba(7, 6, 12, 0) calc(var(--head) + var(--film-y) + 90px)), linear-gradient(0deg, #07060c calc(100% - var(--head) - var(--film-y) - var(--film-h) + 20px), rgba(7, 6, 12, 0) calc(100% - var(--head) - var(--film-y) - var(--film-h) + 150px)); }
  .js:not(.no-film) .clean-etat { bottom: auto; top: calc(var(--head) + var(--film-y) + var(--film-h) - 44px); }
  .clean-mots { font-size: 17vw; }
  /* sous FILEZ. (même calcul que le mot géant), jamais par-dessus, quelle que soit la hauteur de l'écran */
  .js:not(.no-film) .clean-fin { top: calc(var(--head) + var(--film-y) + var(--film-h) - 44px + 17vw * .84 + 26px); bottom: auto; }
}

/* téléphone court, ou iPhone avec les barres de Safari affichées (moins de 800 px de haut) : tout se resserre
   pour que titre, film et mot géant tiennent l'un sous l'autre sans se chevaucher */
@media (max-aspect-ratio: 1/1) and (max-height: 800px) {
  .js:not(.no-film) .clean-stage { --film-y: 98px; --film-w: 116vw; --film-dx: -0.6vw; }
  .js:not(.no-film) .clean-tete { top: calc(var(--head) + 12px); }
  .js:not(.no-film) .clean-tete .eyebrow { margin-bottom: 10px; }
  .js:not(.no-film) .clean-tete h2 { font-size: 1.45rem; }
  .clean-mots { font-size: 13vw; }
  .js:not(.no-film) .clean-fin { top: calc(var(--head) + var(--film-y) + var(--film-h) - 44px + 13vw * .84 + 20px); gap: 14px; }
  .js:not(.no-film) .clean-suite { font-size: 1.4rem; }
}

@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .js:not(.no-film) .clean-etat { bottom: clamp(30px, 5svh, 50px); }
}

.clean-after { position: relative; display: grid; gap: clamp(32px, 5vw, 72px); padding-block: clamp(72px, 10vw, 130px); }
.clean-vitrine { position: relative; max-width: 460px; }
.clean-vitrine img { width: 100%; border-radius: 2px; }
.clean-tarifs { display: grid; gap: 30px; align-content: start; }
.clean-tarifs-title { font-size: clamp(1.5rem, 3vw, 2.2rem); font-stretch: 125%; font-weight: 800; text-transform: uppercase; line-height: 1; }
.presta-cat--neon { border-top-color: var(--neon); }
.presta-cat--neon .cat-title { font-size: 1rem; }
.clean-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.clean-insta { font: 500 0.74rem/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--os-2); text-decoration: underline; text-underline-offset: 4px; }
.clean-insta:hover { color: var(--os); }
/* comment ça marche : trois lignes, numérotées, sans paragraphe */
.etapes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.etapes li { counter-increment: etape; display: flex; align-items: baseline; gap: 12px; color: var(--os-2); }
.etapes li::before { content: counter(etape); flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--neon); border-radius: 50%; font: 600 0.72rem/1 var(--f-mono); color: var(--neon-clair); transform: translateY(-2px); }
.etapes b { color: var(--os); font-weight: 700; }

/* ---------- Avis ---------- */

.sec--avis { background: var(--beton); }
.avis-rail { display: flex; gap: 16px; overflow-x: auto; padding: 4px var(--gut) 22px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut); scrollbar-width: thin; scrollbar-color: var(--filet) transparent; }
.avis-rail::after { content: ""; flex: 0 0 1px; }
.avis-card { transition: transform .5s var(--ease), border-color .3s; flex: 0 0 min(84vw, 400px); display: flex; flex-direction: column; gap: 16px; padding: 26px; background: var(--noir); border: 1px solid var(--filet); border-radius: 2px; scroll-snap-align: start; }
.avis-stars { color: var(--led); font: 500 0.78rem var(--f-mono); letter-spacing: 0.08em; }
.avis-card blockquote { flex: 1; font-size: 1.06rem; line-height: 1.5; }
.avis-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding-top: 14px; border-top: 1px solid var(--filet); font: 400 0.72rem var(--f-mono); letter-spacing: 0.04em; color: var(--os-2); }
.avis-meta strong { color: var(--os); font-weight: 500; }
.avis-more { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) { .avis-more .btn { width: 100%; } }

@media (hover: hover) {
  .avis-card:hover { transform: translateY(-8px) rotate(-.6deg); border-color: rgba(var(--led-rgb), .55); }
  .galerie-rail figure { transition: transform .6s var(--ease); }
  .galerie-rail figure:hover { transform: translateY(-10px) rotate(.5deg); }
  .galerie-rail figure:hover figcaption strong { color: var(--led); }
  .faq-item summary { transition: padding-left .4s var(--ease), color .25s; }
  .faq-item summary:hover { padding-left: 10px; color: var(--led); }
  .site-footer a, .info-list dd a { background: linear-gradient(var(--led), var(--led)) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .25s; }
  .site-footer a:hover, .info-list dd a:hover { background-size: 100% 1px; }
  .cta-final-photo img { transition: transform .8s var(--ease); }
  .cta-final-photo:hover img { transform: rotate(0deg) scale(1.03); }
  .menu-toggle:hover { border-color: var(--led); }
}

/* ---------- Le salon en photos ---------- */

.galerie { position: relative; }
.galerie-sticky { padding-block: clamp(88px, 12vw, 150px); }
.galerie-head { display: grid; gap: 16px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.galerie-rail { display: flex; align-items: flex-start; gap: clamp(12px, 1.8vw, 24px); overflow-x: auto; padding: 0 var(--gut) 18px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut); scrollbar-width: thin; scrollbar-color: var(--filet) transparent; }
.galerie-rail::after { content: ""; flex: 0 0 1px; }
.galerie-rail figure { flex: none; scroll-snap-align: start; }
.galerie-rail img { width: 82vw; height: auto; aspect-ratio: var(--r); object-fit: cover; border-radius: 2px; background: var(--beton-2); }
.galerie-rail figcaption { margin-top: 10px; max-width: 34ch; font: 400 0.72rem/1.45 var(--f-mono); color: var(--os-2); }
.galerie-rail figcaption strong { display: block; color: var(--os); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }

.galerie.pinned .galerie-pin { height: var(--pin-h); }
.galerie.pinned .galerie-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-block: var(--head) 0; }
.galerie.pinned .galerie-rail { overflow: visible; scroll-snap-type: none; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.galerie.pinned .galerie-rail img { height: min(56svh, 600px); }

/* ---------- Accès ---------- */

.acces-grid { display: grid; gap: clamp(32px, 4vw, 56px); }
.info-list > div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.info-list > div:first-child { border-top: 2px solid var(--os); }
.info-list dt { font: 500 0.72rem/1.9 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--led); }
.info-list dd a { border-bottom: 1px solid rgba(238, 233, 220, .4); }
.info-list dd a:hover { color: var(--led); border-color: var(--led); }
.gps-label { margin-block: 28px 12px; font: 400 0.74rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--os-2); }
.gps-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.map-container { min-height: 380px; border: 1px solid var(--filet); border-radius: 2px; overflow: hidden; background: var(--beton); }
#map { width: 100%; height: 100%; min-height: 380px; }
/* préfixe .map-container : la feuille de Leaflet arrive après la nôtre */
.map-container .leaflet-container { background: var(--beton); font-family: var(--f-sans); }
.map-container .leaflet-popup-content-wrapper, .map-container .leaflet-popup-tip { background: var(--noir); color: var(--os); border: 1px solid var(--filet); border-radius: 2px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.map-container .leaflet-tile-pane { filter: invert(1) hue-rotate(200deg) saturate(.5) brightness(1.5) contrast(.82); }
.map-pin { width: 18px; height: 18px; border-radius: 50%; background: var(--led); border: 3px solid var(--noir); box-shadow: 0 0 0 2px var(--led), 0 0 26px 6px rgba(var(--led-rgb), .6); }
.map-popup strong { display: block; font-stretch: 125%; font-weight: 800; text-transform: uppercase; }
.map-popup span { display: block; margin: 2px 0 8px; font-size: 0.82rem; color: var(--os-2); }
.map-container .leaflet-popup-close-button { color: var(--os-2); }
.map-container .leaflet-bar a { background: var(--noir); color: var(--os); border-color: var(--filet); }
.map-container .leaflet-control-attribution { background: rgba(11, 11, 13, .8); color: var(--os-2); }
.map-container .leaflet-control-attribution a { color: var(--os); }
.map-container .map-popup a { color: var(--led); font: 500 0.74rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- FAQ ---------- */

.sec--faq { padding-top: 0; }
.faq-list { max-width: 860px; border-top: 2px solid var(--os); }
.faq-item { border-bottom: 1px solid var(--filet); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-weight: 600; font-size: 1.08rem; line-height: 1.3; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-content: center; border: 1.5px solid rgba(238, 233, 220, .4); border-radius: 50%; font: 400 1rem/1 var(--f-mono); transition: transform .4s var(--ease), border-color .25s, color .25s; }
.faq-item summary:hover::after { border-color: var(--led); color: var(--led); }
.faq-item[open] summary::after { transform: rotate(45deg); border-color: var(--led); color: var(--led); }
.faq-item p { max-width: 64ch; padding-bottom: 24px; color: var(--os-2); }

/* ---------- Dernier appel, devant l'enseigne ---------- */

.cta-final { position: relative; padding-block: clamp(96px, 13vw, 170px); overflow: clip; }
.cta-final-grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
.cta-final h2 { font-size: clamp(2.6rem, 8vw, 6.2rem); }
.signature { position: relative; width: clamp(200px, 30vw, 420px); aspect-ratio: 900 / 625; margin-bottom: clamp(18px, 3vw, 34px); }
.signature svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--os); overflow: visible; }
.js:not(.no-film) .signature-cut { clip-path: polygon(-30% 0%, 0% 0%, -20% 100%, -30% 100%); transition: clip-path 1.5s cubic-bezier(.55, .1, .3, 1); }
.js:not(.no-film) .signature-clean { opacity: 0; transform: translateY(-18%) rotate(-5deg) scale(1.18); transform-origin: 60% 80%; transition: opacity .35s ease-out 1.25s, transform .8s cubic-bezier(.2, 1.25, .4, 1) 1.25s; }
.js .in .signature-cut { clip-path: polygon(-30% 0%, 140% 0%, 120% 100%, -30% 100%); }
.js .in .signature-clean { opacity: 1; transform: none; }
.cta-final p { max-width: 42ch; margin-block: 22px 30px; color: rgba(238, 233, 220, .86); }
.cta-final-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-final-photo img { width: 100%; border-radius: 2px; transform: rotate(1.5deg); }
.cta-final-photo figcaption { margin-top: 16px; font: 400 0.74rem var(--f-mono); color: var(--os-2); }

/* ---------- Pied de page ---------- */

.site-footer { padding: 64px 0 calc(110px + env(safe-area-inset-bottom)); font-size: 0.94rem; color: var(--os-2); }
.footer-grid { display: grid; gap: 40px; }
.footer-name { font-size: 1.5rem; color: var(--os); margin-bottom: 10px; }
.site-footer h3 { margin-bottom: 14px; font: 500 0.72rem var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--led); }
.social-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font: 500 0.76rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--os); }
.footer-links li, .footer-hours li { padding: 5px 0; }
.footer-hours li { display: flex; justify-content: space-between; gap: 24px; max-width: 280px; font: 400 0.82rem var(--f-mono); }
.footer-tous { font: 400 0.82rem/1.5 var(--f-mono); color: var(--os-2); }
.footer-tous strong { color: var(--os); font-weight: 600; }
.site-footer a:hover { color: var(--led); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--filet); font-size: 0.8rem; }
.footer-bottom span { margin-left: 10px; white-space: nowrap; }
.footer-legal { display: flex; gap: 22px; }
.footer-wink { flex-basis: 100%; margin-top: 4px; font: 400 0.74rem/1.6 var(--f-mono); letter-spacing: 0.02em; color: var(--os-2); }
.footer-wink a { color: var(--os); text-decoration: underline; text-decoration-color: var(--neon-clair); text-underline-offset: 3px; }

/* ---------- Ticket ---------- */

.ticket { position: fixed; z-index: 85; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); background: var(--os); color: var(--noir); border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .2); font-family: var(--f-mono); overflow: hidden; }
.ticket[hidden] { display: none; }
.ticket-bar { width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 18px; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ticket-total { margin-left: auto; font-weight: 500; font-size: 1rem; }
.ticket-chevron { transition: transform .35s var(--ease); }
.ticket-bar[aria-expanded="true"] .ticket-chevron { transform: rotate(180deg); }
.ticket-body { padding: 4px 18px 18px; border-top: 1px dashed rgba(11, 11, 13, .35); max-height: 56vh; overflow-y: auto; }
.ticket-title { padding: 12px 0 6px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: .6; }
.ticket-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 0.84rem; }
.ticket-lines li.remise { opacity: .7; }
.ticket-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 10px; border-top: 1px dashed rgba(11, 11, 13, .35); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ticket-sum strong { font-weight: 500; font-size: 1.5rem; letter-spacing: -0.03em; }
.ticket-dur, .ticket-note { font-size: 0.72rem; line-height: 1.45; opacity: .7; margin-top: 4px; }
.ticket-actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.ticket-actions .btn { flex: 1; background: var(--noir); color: var(--os); min-height: 46px; padding: 12px 16px; }
.ticket-actions .btn::before { background: var(--neon); }
.ticket-actions .btn:hover { color: #fff; }
.ticket-clear { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.ticket :focus-visible { outline-color: var(--noir); }

/* ---------- Mentions légales ---------- */

.legal-wrap { max-width: 720px; margin: 0 auto; padding: 120px var(--gut) 80px; }
.legal-wrap h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 32px; }
.legal-wrap h2 { margin: 36px 0 12px; font: 500 0.78rem var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--led); }
.legal-wrap p { margin-bottom: 12px; color: rgba(238, 233, 220, .86); }
.legal-back { display: inline-block; margin-bottom: 40px; font: 500 0.78rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--led); }

/* ---------- Visite du salon et objets 3D (scene3d.js) ---------- */

.visite-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; visibility: hidden; }

.js.has-visit:not(.no-film) .hero { height: 880vh; }
.js.has-visit:not(.no-film) .hero-inner { opacity: var(--texte, 1); transform: translateY(calc((1 - var(--texte, 1)) * -28px)); transition: opacity .3s linear, transform .3s linear; }
.js.has-visit:not(.no-film) .hero-scrim { opacity: calc(.3 + .7 * var(--texte, 1)); }
.has-visit.hero-clear .hero-inner { visibility: hidden; }
/* bandeau sombre sous les mots et les chiffres, pour rester lisible sur les photos claires */
.has-visit .hero-stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(5, 4, 9, .9) 0%, rgba(5, 4, 9, .55) 38%, rgba(5, 4, 9, 0) 100%); opacity: calc(1 - var(--texte, 1)); }
.has-visit .hero-inner, .has-visit .visite-mots, .has-visit .hero-foot { z-index: 2; }

.visite-mots { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(104px, 17vh, 160px); margin: 0; pointer-events: none; }
.visite-mots span { position: absolute; left: 0; bottom: 0; max-width: 12ch; opacity: 0; transform: translateY(20px); transition: opacity .45s, transform .7s var(--ease); font-stretch: 125%; font-weight: 800; font-size: clamp(2.1rem, 6.6vw, 5.8rem); line-height: .94; letter-spacing: -.015em; text-transform: uppercase; text-shadow: 0 2px 34px rgba(0, 0, 0, .7); }
.has-visit [data-plan="1"] .visite-mots span:nth-child(1),
.has-visit [data-plan="2"] .visite-mots span:nth-child(2),
.has-visit [data-plan="3"] .visite-mots span:nth-child(3) { opacity: 1; transform: none; }

/* ---------- Équipe : on choisit son barbier ---------- */

.select { position: relative; background: #08080a; }
.select-stage { position: relative; padding: clamp(96px, 13vw, 160px) var(--gut) clamp(72px, 9vw, 110px); overflow: hidden; }
.select-head { position: relative; z-index: 3; max-width: var(--wrap); margin-inline: auto; }
.select-count, .select-nav, .perso-fantome { display: none; }
.persos { display: grid; gap: 56px 32px; max-width: var(--wrap); margin: 44px auto 0; }
.perso { position: relative; }
.perso-figure { position: relative; height: min(96vw, 560px); overflow: hidden; }
.perso-figure::after { content: ""; position: absolute; inset: auto 0 0 0; height: 24%; background: linear-gradient(0deg, #08080a, rgba(8, 8, 10, 0)); }
.pose { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 100%; }
.pose { opacity: 0; -webkit-mask-image: linear-gradient(#000 62%, rgba(0, 0, 0, 0) 76%); mask-image: linear-gradient(#000 62%, rgba(0, 0, 0, 0) 76%); }
.pose--fixe { opacity: 1; }
.pose.plein { display: none; }
.perso-fiche { position: relative; z-index: 3; display: grid; gap: 8px; justify-items: start; margin-top: -18px; }
.perso-nom { font-stretch: 125%; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: .94; letter-spacing: -.015em; text-transform: uppercase; }
.perso-role { font: 500 0.74rem var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--led); }
.perso-desc { max-width: 36ch; margin-bottom: 12px; color: var(--os-2); }

/* mode jeu : une scène épinglée, un barbier à la fois, la pose change en avançant */
.js:not(.no-film) .select-pin { height: 390vh; }   /* trois barbiers, sans faire défiler trop longtemps */
.js:not(.no-film) .select-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 620px; padding: calc(var(--head) + 22px) var(--gut) 0; }
.js:not(.no-film) .select-stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 26%; z-index: 2; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(42% 100% at var(--axe, 50%) 100%, rgba(var(--neon-rgb), .42), rgba(var(--neon-rgb), 0) 72%); }
.js:not(.no-film) .select-head h2 { font-size: clamp(1.25rem, 2.3vw, 2rem); max-width: 14ch; }
.js:not(.no-film) .select-count { display: block; position: absolute; right: 0; top: 4px; font: 500 0.9rem var(--f-mono); letter-spacing: 0.1em; color: var(--os-2); }
.js:not(.no-film) .select-count b { font-size: 2.4rem; font-weight: 500; color: var(--os); letter-spacing: -0.04em; }
.js:not(.no-film) .persos { position: absolute; inset: 0; display: block; margin: 0; max-width: none; }
.js:not(.no-film) .perso { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.js:not(.no-film) .perso.is-on { opacity: 1; visibility: visible; transition: opacity .3s; }
.js:not(.no-film) .perso-fantome { display: block; position: absolute; left: 50%; top: 45%; margin: 0; transform: translate(-44%, -50%); transition: transform 1s var(--ease); font-stretch: 125%; font-weight: 900; font-size: clamp(5.5rem, 24vw, 23rem); line-height: .8; letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; color: #141417; }
.js:not(.no-film) .perso.is-on .perso-fantome { transform: translate(-50%, -50%); }
.js:not(.no-film) .perso-figure { position: absolute; left: var(--axe, 50%); bottom: 22.5%; width: 0; height: 64%; overflow: visible; transform: translateX(70px) scale(.95); transform-origin: 0 100%; transition: transform .7s var(--ease); }
.js:not(.no-film) .perso.is-on .perso-figure { transform: none; }
.js:not(.no-film) .perso-figure::after, .js:not(.no-film) .pose--fixe { display: none; }
.js:not(.no-film) .perso-figure { cursor: pointer; }
/* le barbier en pied : deux images fixes (début et fin du geste) et, par-dessus dès qu'elle est chargée,
   la vidéo qui passe de l'une à l'autre. Même cadre 9/16 pour les trois ; le fond noir se fond dans la scène. */
.perso-video { display: none; }
.js:not(.no-film) .pose.plein, .js:not(.no-film) .perso-video { display: block; position: absolute; left: 0; top: 0; bottom: auto; height: 100%; width: auto; max-width: none; aspect-ratio: 9 / 16; transform: translateX(-50%); opacity: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, rgba(0, 0, 0, 0) 100%); }
.js:not(.no-film) .pose.plein.on { opacity: 1; }
.js:not(.no-film) .perso-video { transition: opacity .35s; }
.js:not(.no-film) .perso.video-pret .perso-video { opacity: 1; }
.js:not(.no-film) .perso.video-pret .pose.plein { opacity: 0; }
/* la flèche de sélection, au-dessus de la tête */
.js:not(.no-film) .perso.is-on::before { content: "▼"; position: absolute; left: var(--axe, 50%); bottom: 79%; z-index: 3; transform: translateX(-50%); font-size: clamp(1.2rem, 2.2vw, 1.9rem); color: var(--led); animation: fleche .9s ease-in-out infinite alternate; }
@keyframes fleche { to { transform: translate(-50%, -9px); } }
.js:not(.no-film) .perso-fiche { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(78px + env(safe-area-inset-bottom)); margin: 0; gap: 4px; }
.js:not(.no-film) .perso-nom { font-size: clamp(2.3rem, 7.4vw, 6.2rem); }
.js:not(.no-film) .perso-desc { margin-bottom: 8px; }
.js:not(.no-film) .select-nav { display: flex; position: absolute; z-index: 4; left: var(--gut); right: var(--gut); top: 31%; align-items: center; justify-content: space-between; pointer-events: none; }
.select-nav button { pointer-events: auto; }
.select-prev, .select-next { width: 48px; height: 48px; display: grid; place-content: center; border: 1.5px solid rgba(238, 233, 220, .4); border-radius: 50%; background: rgba(8, 8, 10, .6); font-size: 0.9rem; transition: border-color .25s, color .25s, transform .3s var(--ease); }
.select-prev:hover, .select-next:hover { border-color: var(--led); color: var(--led); }
.select-prev:active, .select-next:active { transform: scale(.92); }
.select-prev[disabled], .select-next[disabled] { opacity: .25; }
.select-dots { display: none; gap: 10px; }
.select-dots button { width: 34px; height: 4px; background: var(--filet); transition: background-color .3s; }
.select-dots button[aria-current="true"] { background: var(--led); }

@media (max-width: 699px) {
  .js:not(.no-film) .select-head h2 { max-width: none; font-size: clamp(.9rem, 4vw, 1.08rem); }
  .js:not(.no-film) .select-head .eyebrow { margin-bottom: 12px; }
  .js:not(.no-film) .perso-fiche { grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 14px; }
  .js:not(.no-film) .perso-desc, .js:not(.no-film) .perso-fiche .btn { grid-column: 1 / -1; }
  .js:not(.no-film) .perso-desc { font-size: 0.9rem; line-height: 1.4; }
}

@media (min-width: 700px) {
  .persos { grid-template-columns: 1fr 1fr; }
  .js:not(.no-film) .select-stage { --axe: 64%; }
  .js:not(.no-film) .perso-figure { height: 97%; bottom: -3.5%; }
  .js:not(.no-film) .perso.is-on::before { bottom: 85.5%; }
  .js:not(.no-film) .perso-fiche { left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); right: auto; bottom: clamp(96px, 17vh, 170px); max-width: 440px; gap: 8px; }
  .js:not(.no-film) .select-head { padding-inline: max(0px, calc((100vw - var(--wrap)) / 2)); max-width: none; }
  .js:not(.no-film) .select-count { right: max(0px, calc((100vw - var(--wrap)) / 2)); }
  .js:not(.no-film) .select-nav { top: auto; bottom: 36px; left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); right: auto; gap: 16px; justify-content: flex-start; }
  .select-dots { display: flex; }
}

/* ---------- Avis : une phrase en grand ---------- */

.avis-une { margin-bottom: clamp(36px, 5vw, 64px); }
.avis-une .avis-slogan { max-width: 13ch; font-stretch: 125%; font-weight: 800; font-size: clamp(2.3rem, 7.6vw, 6.8rem); line-height: .95; letter-spacing: -.02em; text-transform: uppercase; }
.avis-slogan span { color: var(--neon-clair); }
h2.avis-titre { max-width: 40ch; margin-bottom: 28px; font: 400 1.05rem/1.55 var(--f-sans); font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--os-2); }

/* ==========================================================================
   Grands écrans
   ========================================================================== */

@media (min-width: 700px) {
  h1 { font-size: clamp(2.6rem, 5.6vw, 5.05rem); }
  .sec-head, .galerie-head { grid-template-columns: 1.2fr 1fr; }
  .galerie-rail img { width: auto; height: min(52svh, 520px); }
  /* le talon passe à droite, avec deux encoches de ticket sur la ligne de pli */
  .presta-highlight { --pli: calc(100% - 250px); grid-template-columns: 1fr 250px; align-items: stretch;
    -webkit-mask: radial-gradient(circle 14px at var(--pli) 0, rgba(0, 0, 0, 0) 97%, #000 100%), radial-gradient(circle 14px at var(--pli) 100%, rgba(0, 0, 0, 0) 97%, #000 100%); -webkit-mask-composite: source-in;
    mask: radial-gradient(circle 14px at var(--pli) 0, rgba(0, 0, 0, 0) 97%, #000 100%), radial-gradient(circle 14px at var(--pli) 100%, rgba(0, 0, 0, 0) 97%, #000 100%); mask-composite: intersect; }
  .presta-highlight-price { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; border-top: 0; border-left: 2px dashed rgba(11, 11, 13, .35); }
  .presta-highlight-price .btn { flex-basis: auto; align-self: stretch; }
  .prestations-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .site-footer { padding-bottom: 48px; }
  .sticky-cta-mobile { display: none; }
  .ticket { left: auto; right: 24px; bottom: 24px; width: 360px; }
}

@media (min-width: 1000px) {
  .main-nav { display: flex; }
  .menu-toggle { display: none; }
  .prestations-grid { grid-template-columns: repeat(3, 1fr); }
  .acces-grid { grid-template-columns: 1fr 1.1fr; }
  .tickets { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); align-items: stretch; }
  .cta-final-grid { grid-template-columns: 1.05fr 1fr; }
  .clean-after { grid-template-columns: minmax(280px, 0.8fr) 1.2fr; align-items: start; }
  .clean-vitrine { position: sticky; top: calc(var(--head) + 24px); }
  .clean-tarifs { grid-template-columns: 1fr 1fr; }
  .etapes, .clean-tarifs-title, .clean-foot { grid-column: 1 / -1; }
  .etapes { margin-top: clamp(28px, 3.4vw, 52px); }   /* sous le trait néon qui ouvre la suite */
}

@media (max-width: 699px) {
  .header-cta { display: none; }
  /* sur téléphone, la barre Appeler / Prendre RDV reste en bas de l'écran du début à la fin :
     les boutons du hero feraient doublon, et tout ce qui est calé en bas lui laisse sa place */
  .hero-ctas { display: none; }
  .hero-foot { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .logotype { height: 48px; }
  .site-header.scrolled .logotype { height: 40px; }
}

@media (max-aspect-ratio: 4/5) {
  .hero-scrim { background:
    linear-gradient(0deg, rgba(5, 4, 9, .95) 0%, rgba(5, 4, 9, .62) 46%, rgba(5, 4, 9, 0) 74%),
    linear-gradient(180deg, rgba(5, 4, 9, .7) 0%, rgba(5, 4, 9, 0) 18%); }
  .hero-ctas .btn { flex: 1 1 100%; }
  /* en portrait, le texte s'efface quand le salon s'allume : le fauteuil au logo est le sujet,
     et la barre Appeler / Réserver prend le relais */
  .js:not(.no-film) .hero-inner { opacity: clamp(0, calc(2.6 - var(--lum) * 4.4), 1); transform: translateY(calc(var(--lum) * -28px)); }
  .js:not(.no-film) .hero-scrim { opacity: calc(1 - var(--lum) * .5); }
  .hero-clear .hero-inner { visibility: hidden; }
  .hero-foot { transition: padding-bottom .5s var(--ease); }
  .hero-clear .hero-foot { padding-bottom: 88px; }
  /* pendant la visite, les mots prennent la place des chiffres */
  .has-visit.hero-clear .hero-stats { display: none; }
  .has-visit .visite-mots { bottom: 168px; }
  /* le fauteuil au logo est à droite du cadre : on le garde entier sur les écrans étroits */
  .hero .film img, .hero .film video { object-position: 82% 50%; }
  .has-mission .hero .film img, .has-mission .hero .film video { object-position: 50% 50%; }   /* le film vertical est déjà cadré sur le personnage */
  .hero-hint { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .trait { transform: rotate(var(--a, 0deg)); }
  /* le minuteur du choix garde ses dix secondes : une barre qui se vide ne fait pas bouger la page */
  .choix.decompte .choix-minuteur span { animation-duration: 10s !important; }
}
.clean-prix span { white-space: nowrap; }

/* ---------- Renvois vers les pages prestations + manifeste « qui on est » (v23) ---------- */
.presta-lien { display: inline-block; margin-top: 14px; font: 500 0.76rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--led); border-bottom: 1px solid rgba(var(--led-rgb), .4); padding-bottom: 3px; }
.presta-lien:hover { border-color: var(--led); }
.presta-cat--neon .presta-lien, .clean-foot .presta-lien { color: var(--neon-clair); border-color: rgba(var(--neon-rgb), .5); margin-top: 0; }
.manifeste { padding-block: clamp(80px, 11vw, 150px); }
/* une phrase par ligne, jamais coupée sur ordinateur ; de l'air entre les trois */
.manifeste-titre { font-size: clamp(2rem, 5.6vw, 4.6rem); line-height: 1; letter-spacing: -0.01em; }
.manifeste-titre span { display: block; white-space: nowrap; }
.manifeste-titre span + span { margin-top: .14em; }
.manifeste-titre .m-neon { color: var(--neon-clair); }
@media (max-width: 700px) {
  .manifeste-titre { font-size: clamp(1.9rem, 9.4vw, 2.8rem); line-height: 1.04; }
  .manifeste-titre span { white-space: normal; }
  .manifeste-titre span + span { margin-top: .28em; }
}
.manifeste-titre .m-led { color: var(--led); }
.manifeste-pied { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 22px 40px; margin-top: clamp(28px, 4vw, 48px); padding-top: 22px; border-top: 2px solid var(--os); }
.manifeste-pied p { max-width: 56ch; color: rgba(238, 233, 220, .82); font-size: 1.04rem; }
@media (max-width: 560px) { .manifeste-pied .btn { width: 100%; } }

/* ---------- Pendant le film : cartes d'infos sur le salon, cliquables (v24) ---------- */
.hud-infos { position: absolute; right: var(--gut); bottom: clamp(26px, 6vh, 64px); width: min(380px, calc(100% - 2 * var(--gut))); }
.info-carte { position: absolute; right: 0; bottom: 0; width: 100%; padding: 18px 20px 18px; border-radius: 14px;
  background: rgba(11, 11, 13, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(238, 233, 220, .14); border-left: 3px solid var(--led); box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s, transform .45s var(--ease), visibility 0s .35s; pointer-events: auto; }
.info-carte.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .45s var(--ease); }
.info-carte--neon { border-left-color: var(--neon); }
.ic-quoi { font: 500 0.68rem/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--led); }
.info-carte--neon .ic-quoi { color: var(--neon-clair); }
.ic-titre { margin-top: 8px !important; font: 900 clamp(1.15rem, 1.7vw, 1.45rem)/1.1 var(--f-sans); font-stretch: 112%; text-transform: uppercase; color: #fff; }
.ic-txt { margin-top: 6px !important; font-size: 0.9rem; line-height: 1.45; color: rgba(238, 233, 220, .8); }
.ic-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ic-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(238, 233, 220, .4);
  font: 700 0.74rem/1 var(--f-sans); font-stretch: 112%; letter-spacing: 0.05em; text-transform: uppercase; color: var(--os); transition: background-color .25s, color .25s, border-color .25s; }
.ic-btn:hover { border-color: var(--os); }
.ic-btn--plein { background: var(--os); border-color: var(--os); color: var(--noir); }
.info-carte--neon .ic-btn--plein { background: var(--neon); border-color: var(--neon); color: #fff; }
.ic-btn:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }
@media (max-width: 699px) {
  .hud-infos { left: var(--gut); right: var(--gut); width: auto; bottom: calc(82px + env(safe-area-inset-bottom)); }
  .info-carte { padding: 14px 16px; }
  .ic-txt { font-size: 0.84rem; }
  .has-mission .hud-carte { display: none; }                                /* la mini-carte laisse la place aux infos */
}
@media (max-width: 699px) and (max-height: 700px) { .ic-txt { display: none; } }

.accueil-photo .hud-infos { display: none; }

/* ---------- Entrée v25 : le salon s'allume, puis la visite (comme la v9), une info et un bouton par photo ---------- */
.hero-desc { max-width: 46ch; margin-top: clamp(16px, 2.6vh, 26px); font-size: clamp(1rem, 1.25vw, 1.14rem); color: rgba(238, 233, 220, .86); }
.visite-mots { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(104px, 17vh, 160px); margin: 0; pointer-events: none; }
.vm { position: absolute; left: 0; bottom: 0; max-width: 780px; opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity .2s, transform .3s, visibility 0s .2s; }   /* le mot qui part s'efface vite, vers le haut */
.has-visit [data-plan="1"] .vm:nth-child(1),
.has-visit [data-plan="2"] .vm:nth-child(2),
.has-visit [data-plan="3"] .vm:nth-child(3) { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .4s .18s, transform .7s var(--ease) .18s; }   /* le suivant arrive une fois la place libre */
.vm-mot { max-width: 12ch; font: 800 clamp(2.1rem, 6.6vw, 5.8rem)/.94 var(--f-sans); font-stretch: 125%; letter-spacing: -.015em; text-transform: uppercase; text-shadow: 0 2px 34px rgba(0, 0, 0, .7); }
.vm-info { max-width: 54ch; margin-top: 14px !important; font: 500 clamp(0.92rem, 1.2vw, 1.05rem)/1.45 var(--f-sans); color: rgba(238, 233, 220, .92); text-shadow: 0 1px 14px rgba(0, 0, 0, .9); }
.vm-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-aspect-ratio: 4/5) {
  .has-visit .visite-mots { bottom: calc(118px + env(safe-area-inset-bottom)); }
  .vm-mot { font-size: clamp(2rem, 10vw, 3.2rem); }
  .vm-info { font-size: 0.88rem; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 700px) { .vm-info { display: none; } }