/* ==========================================================================
   PHILLIAS 32 — V7 « SALLE NOIRE, FICHE BLANCHE » · 12/09/2026 · FLY LAB
   La page est une salle plongée dans le noir : ce sont ses photos et sa
   lumière qui travaillent. Par-dessus, la rigueur d'un catalogue de loueur —
   une référence et une étiquette de prix par machine, tous les chiffres en
   chasse fixe. Et une seule couleur de lyre à la fois.

   Contrastes mesurés sur le fond RÉEL (le canvas éclaircit le noir jusqu'à
   rgb(34 21 36)), pas sur #0B0708 :
     blanc #FAF7F8 17,2:1 · gris #B4A7B8 7,9:1 · gris sourd #9A8DA0 5,6:1
     violet #D46BE2 6,2:1 · rouge texte #FF6B7A 6,4:1 · jaune #FFC53D 10,9:1
     bleu #6BA4FF 6,8:1 · magenta #FF6BA5 7,1:1 · cyan #2FD4D4 8,8:1
   Rien n'est écrit en dessous de 4,5:1.
   ========================================================================== */

/* ─── 1 · LES POLICES ──────────────────────────────────────────────────────
   La V6 ne les déclarait nulle part : sur iPhone et Android toute la page
   tombait en police système. Les trois woff2 sont déjà sur le serveur. */
@font-face{font-family:"Archivo Black";src:url("fonts/ArchivoBlack-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* ─── 2 · LES JETONS ─────────────────────────────────────────────────────── */
@property --accent      { syntax:'<color>'; inherits:true; initial-value:#C43BD6 }
@property --accent-txt  { syntax:'<color>'; inherits:true; initial-value:#D46BE2 }
@property --accent-nuit { syntax:'<color>'; inherits:true; initial-value:#241029 }

:root{
  color-scheme:dark;
  --noir:#0B0708; --noir-2:#141013; --noir-3:#1D1720; --encre:#050304;
  --blanc:#FAF7F8; --gris:#B4A7B8; --gris-sourd:#9A8DA0; --filet:#2B2430;

  --violet:#C43BD6;  --violet-txt:#D46BE2;
  --rouge:#B41432;   --rouge-txt:#FF6B7A;
  --jaune:#FFC53D;   --jaune-txt:#FFC53D;
  --bleu:#2E7BFF;    --bleu-txt:#6BA4FF;
  --magenta:#FF3D8B; --magenta-txt:#FF6BA5;
  --cyan:#2FD4D4;    --cyan-txt:#2FD4D4;
  --accent:var(--violet); --accent-txt:var(--violet-txt); --accent-nuit:#241029;

  /* familles du parc : le code couleur fonctionnel du loueur */
  --fam-son:#2FD4D4; --fam-lumiere:#FFC53D; --fam-effets:#FF6BA5;

  --wrap:1720px; --wrap-moyen:1280px; --wrap-texte:68ch;
  --pad:clamp(20px,3.4vw,60px);

  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:72px; --e9:104px; --e10:152px;
  --section-y:clamp(84px,10vh,148px);
  --souffle-l:clamp(120px,16vh,264px);

  --display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --texte:"Barlow",-apple-system,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --t-ultra:clamp(2.15rem,5.2vw,4.6rem);
  --t-geant:clamp(3.4rem,9vw,10.5rem);
  --t-mega:clamp(2.2rem,4.6vw,4.6rem);
  --t-h2:clamp(1.85rem,3.4vw,3.4rem);
  --t-h3:clamp(1.15rem,1.6vw,1.5rem);
  --t-corps:clamp(1.0625rem,1.02vw,1.1875rem);
  --t-petit:.9375rem; --t-micro:.8125rem;
  --t-ref:.6875rem; --t-data:1.0625rem; --t-prix:clamp(1.45rem,2.1vw,2rem);

  --r:14px; --r-petit:10px; --r-rond:999px;
  --ombre-3:0 34px 76px -24px rgb(0 0 0 / .72), 0 4px 14px rgb(0 0 0 / .4);
  --ease:cubic-bezier(.22,1,.36,1); --ease-doux:cubic-bezier(.4,0,.2,1);
  --rapide:140ms; --moyen:260ms; --lent:520ms;
}
[data-faisceau="violet"] {--accent:var(--violet); --accent-txt:var(--violet-txt); --accent-nuit:#241029}
[data-faisceau="rouge"]  {--accent:var(--rouge);  --accent-txt:var(--rouge-txt);  --accent-nuit:#26080F}
[data-faisceau="jaune"]  {--accent:var(--jaune);  --accent-txt:var(--jaune-txt);  --accent-nuit:#2C2005}
[data-faisceau="bleu"]   {--accent:var(--bleu);   --accent-txt:var(--bleu-txt);   --accent-nuit:#071226}
[data-faisceau="magenta"]{--accent:var(--magenta);--accent-txt:var(--magenta-txt);--accent-nuit:#2A0818}
[data-faisceau="cyan"]   {--accent:var(--cyan);   --accent-txt:var(--cyan-txt);   --accent-nuit:#052526}
[data-faisceau]{transition:--accent 620ms var(--ease-doux),--accent-txt 620ms var(--ease-doux),
                           --accent-nuit 620ms var(--ease-doux)}

@media (prefers-reduced-motion:reduce){:root{--rapide:0ms;--moyen:0ms;--lent:0ms}}

/* ─── 3 · BASE ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--noir);color:var(--blanc);
  font:var(--t-corps)/1.65 var(--texte);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,canvas{max-width:100%;height:auto;display:block}
a{color:var(--accent-txt);text-underline-offset:.22em}
:focus-visible{outline:2px solid var(--accent-txt);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.03;
  letter-spacing:-.028em;text-wrap:balance;margin:0}
h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);letter-spacing:-.012em}
p{margin:0 0 var(--e4)}
b,strong{font-weight:600}
/* UN SEUL utilitaire de masquage. [hidden] ne suffit pas : .objet{display:grid}
   est une règle d'auteur et bat la feuille du navigateur — c'est exactement
   pour ça que les filtres de la V6 ne filtraient rien. */
.est-cache{display:none!important}
[hidden]{display:none!important}

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

/* chasse fixe pour TOUT chiffre : c'est ce qui fait « loueur » et pas « site de DJ » */
.data,.prix,.objet__prix,.objet__ref,.cal__c,.chiffres strong,.hero__preuves b,
.recap__total,.oeil,.bandeau-def{font-variant-numeric:tabular-nums}

/* ─── 4 · LE FOND ────────────────────────────────────────────────────────── */
#fond{position:fixed;inset:-4%;width:108%;height:108%;z-index:0;pointer-events:none;
  display:block;filter:blur(30px) saturate(122%);opacity:.82}
@media (max-width:700px){#fond{filter:blur(20px) saturate(118%);opacity:.66}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter>\
<rect width='160' height='160' filter='url(%23b)'/></svg>");
  mix-blend-mode:overlay}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 0%,transparent 0%,rgb(11 7 8/.42) 62%,rgb(11 7 8/.82) 100%)}
/* On nomme les éléments de contenu au lieu d'exclure les décors un par un :
   la version « body>*:not(#fond) » écrasait le position:fixed de la barre de
   progression (2 px parasites en haut de page), du curseur et du <dialog>. */
body>:is(header,section,footer,figure,.bandeau-def,.evite){position:relative;z-index:2}

/* ─── 5 · SECTIONS ───────────────────────────────────────────────────────── */
.sec{position:relative;padding-block:var(--section-y);--raccord:clamp(80px,9vh,150px)}
.sec::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:0;right:0;bottom:0;top:calc(-1 * var(--raccord));
  background:linear-gradient(180deg,transparent 0,
    color-mix(in oklch,var(--accent-nuit) 52%,transparent) var(--raccord),
    color-mix(in oklch,var(--accent-nuit) 74%,transparent) calc(var(--raccord) + 60px),
    color-mix(in oklch,var(--accent-nuit) 38%,transparent) 52%, transparent 82%)}
.sec--souffle{padding-top:var(--souffle-l)}

.oeil{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;
  font-family:var(--mono);font-size:var(--t-ref);letter-spacing:.22em;
  color:var(--accent-txt);text-transform:uppercase;margin:0 0 var(--e5)}
.oeil::before{content:"";width:clamp(24px,3vw,52px);height:1px;background:currentColor;opacity:.7}
.oeil--marque::before{display:none}
.oeil--marque span+span::before{content:"·";margin-right:var(--e3);opacity:.5}
.oeil--serre{margin-bottom:0}
.chapo{color:var(--gris);max-width:62ch;font-size:1.06rem}
.chapo--fort{font-size:clamp(1.1rem,1.35vw,1.3rem);color:#CFC4D2;max-width:54ch}
.sec__tete{margin-bottom:var(--e8);max-width:var(--wrap-texte)}
.mention{margin:var(--e8) 0 0;color:var(--gris-sourd);font-size:var(--t-micro);text-align:center}

/* le chiffre-image : 30 ANS, 120 €, 12 m² */
.geant{font-family:var(--display);font-size:var(--t-geant);line-height:.86;
  letter-spacing:-.045em;margin:0;color:var(--blanc)}
.geant small{font-family:var(--texte);font-size:clamp(.9rem,1.1vw,1.15rem);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-txt);
  display:block;margin-top:var(--e3)}

/* ─── 6 · BOUTONS ────────────────────────────────────────────────────────── */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:56px;padding:0 var(--e7);border-radius:var(--r-rond);border:0;cursor:pointer;
  font:600 1.0625rem/1 var(--texte);letter-spacing:.01em;text-decoration:none;
  background:var(--accent);color:var(--encre);
  transition:transform var(--rapide) var(--ease),box-shadow var(--moyen) var(--ease),
             background var(--moyen) var(--ease-doux)}
[data-faisceau="rouge"] .bouton{color:var(--blanc)}
@media (hover:hover){.bouton:hover{transform:translateY(-2px);
  box-shadow:0 14px 38px -12px color-mix(in oklch,var(--accent) 62%,transparent)}}
.bouton:active{transform:scale(.97);transition-duration:90ms}
.bouton--fantome{background:transparent;color:var(--accent-txt);
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 54%,transparent)}
.bouton--grand{min-height:64px;padding:0 var(--e8);font-size:1.125rem}
.bouton--petit{min-height:44px;padding:0 var(--e5);font-size:var(--t-petit)}

/* ─── 7 · RÉVÉLATIONS ────────────────────────────────────────────────────
   L'état FINAL est l'état par défaut : sans support de scroll-timeline et
   sans JS, rien n'est invisible. C'est l'animation qui s'ajoute, jamais
   l'opacité qui se retire. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .monte{animation:monte linear both;animation-timeline:view();animation-range:entry 4% cover 26%}
  }
  @supports not (animation-timeline:view()){
    .monte{opacity:0;transform:translateY(26px);
      transition:opacity var(--lent) var(--ease),transform var(--lent) var(--ease)}
    .monte.vu{opacity:1;transform:none}
  }
}
@keyframes monte{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes entre{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

.evite{position:absolute!important;left:-9999px;top:0;background:var(--blanc);color:var(--noir);
  padding:var(--e3) var(--e5);border-radius:0 0 var(--r-petit) 0;z-index:99}
.evite:focus{left:0}

/* barre de progression de lecture */
.progres{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;
  background:var(--accent);transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progres{animation:pousse linear both;animation-timeline:scroll(root)}
  }
}
@keyframes pousse{to{transform:scaleX(1)}}

/* ─── 8 · EN-TÊTE ────────────────────────────────────────────────────────── */
.entete{position:sticky;top:0;z-index:50;background:rgb(11 7 8/.86);
  border-bottom:1px solid transparent;transition:background var(--moyen) var(--ease-doux),
    border-color var(--moyen) var(--ease-doux),padding var(--moyen) var(--ease-doux)}
.entete.est-posee{background:rgb(11 7 8/.96);border-bottom-color:var(--filet)}
.entete.est-repliee{transform:translateY(-100%);transition:transform 320ms var(--ease)}
.entete{transition:transform 320ms var(--ease),background var(--moyen) var(--ease-doux),
  border-color var(--moyen) var(--ease-doux)}
.entete__in{display:flex;align-items:center;gap:clamp(12px,2vw,32px);
  padding-block:var(--e3);min-height:76px}
.entete__logo{display:block;flex:0 0 auto;line-height:0}
.entete__logo .logo{width:clamp(150px,13vw,186px)}
.entete__nav{display:flex;gap:clamp(12px,1.5vw,28px);margin-left:auto;flex-wrap:wrap}
.entete__nav a{color:var(--gris);text-decoration:none;font-size:var(--t-petit);
  font-weight:600;letter-spacing:.02em;position:relative;padding-block:var(--e2);
  transition:color var(--rapide) var(--ease)}
.entete__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent-txt);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--moyen) var(--ease)}
@media (hover:hover){.entete__nav a:hover{color:var(--blanc)}
  .entete__nav a:hover::after{transform:scaleX(1)}}
.entete__tel{color:var(--blanc);text-decoration:none;font-weight:600;font-size:var(--t-petit);
  white-space:nowrap;font-variant-numeric:tabular-nums;
  padding:var(--e3) var(--e5);border-radius:var(--r-rond);
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 56%,transparent);
  transition:background var(--rapide) var(--ease)}
@media (hover:hover){.entete__tel:hover{background:color-mix(in oklch,var(--accent) 14%,transparent)}}
@media (max-width:1080px){.entete__nav{display:none}}
@media (max-width:620px){.entete__cta{display:none}}

/* barre basse sur téléphone */
.barre-basse{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  background:rgb(11 7 8/.97);border-top:1px solid var(--filet);
  padding:var(--e2) var(--e3) calc(var(--e2) + env(safe-area-inset-bottom))}
.barre-basse ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e1)}
.barre-basse a{display:grid;place-items:center;min-height:52px;text-decoration:none;
  color:var(--gris);font-size:var(--t-ref);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.barre-basse a.est-fort{color:var(--encre);background:var(--accent);border-radius:var(--r-petit)}
@media (max-width:1080px){.barre-basse{display:block} body{padding-bottom:76px}}

/* ─── 9 · LE LOGO ET SON ÉGALISEUR ───────────────────────────────────────
   Les quatre hampes du « illi » sont des vumètres : deux courtes pleines,
   deux hautes en six segments plus une pointe. Géométrie relevée au pixel
   sur logo@2x.png. L'image de base a ses segments ÉTEINTS (logo-eq.png) :
   le SVG posé par-dessus les rallume un par un. */
.logo{position:relative;display:inline-block;line-height:0;width:100%}
.logo img{width:100%;height:auto}
.logo .eq{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.eq__s{fill:#B6142C;opacity:0;transition:opacity 90ms linear}
.eq__s.est-on{opacity:1}
.logo--moyeu{width:74%}
/* au survol de l'en-tête, le logo « monte le volume » */
.entete__logo:hover .eq__s.est-on{filter:drop-shadow(0 0 6px rgb(182 20 44/.9))}

/* ─── 10 · LE CURSEUR MICRO ──────────────────────────────────────────────
   Modèle flylab.fr : un micro lissé suit la souris, un point net marque la
   position exacte. Pointeur fin uniquement, jamais en mouvement réduit,
   jamais sans JS (le curseur système reste tant que .a-curseur n'est pas posé). */
.curseur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;display:none}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .a-curseur .curseur.est-la{display:block}
  .a-curseur,.a-curseur a,.a-curseur button,.a-curseur summary,.a-curseur label{cursor:none}
  .a-curseur :is(input,textarea,select){cursor:auto}
  .curseur__micro,.curseur__point,.curseur__mot{position:fixed;left:0;top:0;will-change:transform}
  /* la POINTE de la capsule tombe exactement sur le point du curseur : la
     rotation est faite dans le svg, pas sur l'élément, sinon elle tournait
     autour du centre de la boîte et décalait le micro. */
  /* ⚠️ la propriété CSS `scale` entre dans la matrice AVANT `transform` : une
     échelle posée ici multipliait aussi le translate3d du suivi, et le micro
     partait à 270 px du pointeur. L'échelle est donc portée par le <svg>. */
  .curseur__micro{margin:-3.28px 0 0 -11.22px;
    /* un liseré sombre : sans lui, le micro blanc disparaît sur le bouton magenta */
    filter:drop-shadow(0 0 1.4px rgb(5 3 4/.9)) drop-shadow(0 2px 5px rgb(5 3 4/.5));
    transition:opacity var(--moyen) var(--ease)}
  .curseur__micro svg{display:block;overflow:visible;transform-origin:11.22px 3.28px;
    transition:scale var(--moyen) var(--ease)}
  .curseur__corps{fill:#EDE7EB}
  .curseur__grille{fill:#FAF7F8}
  .curseur__maille{stroke:rgb(11 7 8/.42);stroke-width:1;fill:none}
  .curseur__halo circle{fill:var(--accent);opacity:0;transition:opacity var(--moyen) var(--ease)}
  .curseur__ondes path{stroke:var(--accent-txt);stroke-width:1.6;fill:none;stroke-linecap:round;
    opacity:0;transition:opacity var(--moyen) var(--ease)}
  .curseur__point{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;z-index:1;
    background:var(--accent-txt);box-shadow:0 0 0 1.5px rgb(11 7 8/.7);
    transition:opacity var(--moyen) var(--ease)}
  .curseur.est-chaud .curseur__micro svg{scale:1.32}
  .curseur.est-chaud .curseur__halo circle{opacity:.3}
  .curseur.est-chaud .curseur__ondes path{opacity:.8;animation:onde 900ms var(--ease-doux) infinite}
  .curseur.est-chaud .curseur__ondes path:last-child{animation-delay:180ms}
  .curseur.a-mot .curseur__micro{opacity:.25}
  .curseur.a-mot .curseur__point{opacity:0}
  .curseur__mot{display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;
    font:600 20px/1 var(--texte);color:var(--encre);background:var(--accent);
    border-radius:var(--r-rond);opacity:0;transition:opacity var(--moyen) var(--ease)}
  .curseur.a-mot .curseur__mot{opacity:1}
  .curseur.est-presse .curseur__micro svg{scale:.86;transition-duration:90ms}
  .curseur.est-cache{opacity:0}
}
@keyframes onde{0%{opacity:0;transform:translateX(-3px)}35%{opacity:.85}100%{opacity:0;transform:translateX(3px)}}

/* ─── 11 · LE HÉROS ET LA ROUE ───────────────────────────────────────────── */
.sec--roue{padding-block:clamp(40px,6vh,84px) clamp(28px,4vh,56px);overflow:hidden}
.sec--roue::before{background:none}
.heros__fond{position:absolute;inset:0;z-index:-2;overflow:hidden}
.heros__fond img{width:100%;height:100%;object-fit:cover;opacity:.44;
  filter:saturate(112%) contrast(104%)}
.heros__fond::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(11 7 8/.62) 0%,rgb(11 7 8/.74) 46%,rgb(11 7 8/.97) 100%),
             linear-gradient(90deg,rgb(11 7 8/.88) 0%,rgb(11 7 8/.35) 58%,transparent 100%)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .heros__fond img{animation:derive linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes derive{from{transform:translate3d(0,-4%,0) scale(1.08)}to{transform:translate3d(0,5%,0) scale(1.08)}}

.roue__bloc{display:grid;gap:clamp(32px,5vw,84px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));
  min-height:min(78svh,860px)}
.mega{font-size:var(--t-ultra);line-height:1.02;letter-spacing:-.035em;margin:0 0 var(--e5)}
/* les quatre lignes du titre sont écrites à la main : au-dessus de 860 px on
   les empêche de se recasser en six (« qui » tout seul sur une ligne). */
@media (min-width:860px){.mega .mot>span{white-space:nowrap}}
.mega .mot{display:block;overflow:hidden}
.mega .mot>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .mega .mot>span{animation:leve 780ms var(--ease) both;animation-delay:calc(var(--i,0) * 80ms)}
}
@keyframes leve{from{transform:translateY(105%)}to{transform:translateY(0)}}
.hero__actions{display:flex;gap:var(--e3);flex-wrap:wrap;margin-top:var(--e7)}
.hero__preuves{list-style:none;margin:var(--e8) 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:clamp(20px,3vw,52px)}
.hero__preuves li{display:grid;gap:2px;padding-left:var(--e4);
  border-left:2px solid color-mix(in oklch,var(--accent) 66%,transparent)}
.hero__preuves b{font-family:var(--display);font-size:clamp(1.6rem,2.4vw,2.35rem);
  letter-spacing:-.03em;line-height:1}
.hero__preuves span{color:var(--gris-sourd);font-size:var(--t-micro);
  letter-spacing:.06em;text-transform:uppercase}

.roue__col{min-width:0}
.roue{position:relative;width:min(82vmin,580px);aspect-ratio:1;justify-self:center;
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
  filter:drop-shadow(0 28px 76px rgb(0 0 0 / .7))}
.roue--saisie{cursor:grabbing}
.roue::before{content:"";position:absolute;inset:-9%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,color-mix(in oklch,var(--accent) 26%,transparent) 0%,transparent 62%);
  animation:respire 6s var(--ease) infinite alternate}
@keyframes respire{from{opacity:.5;transform:scale(.97)}to{opacity:1;transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.roue::before{animation:none}.roue{cursor:default}}
.roue__svg{width:100%;height:100%;display:block;transform-origin:50% 50%;will-change:transform}
.roue__part{cursor:pointer;outline:none}
.roue__secteur{transition:filter var(--moyen) var(--ease)}
.roue__liseré{fill:none;stroke-width:1.6;opacity:.85;filter:drop-shadow(0 0 5px currentColor);pointer-events:none}
.roue__jante{fill:#0E0A10;stroke:rgb(255 255 255 / .1);stroke-width:1.5}
.roue__bille{opacity:.9;filter:drop-shadow(0 0 5px currentColor);pointer-events:none}
.roue__icone{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;filter:drop-shadow(0 0 7px currentColor)}
.roue__texte{font-family:var(--display);font-size:15px;letter-spacing:.07em;
  paint-order:stroke;stroke:rgb(0 0 0 / .55);stroke-width:4px;pointer-events:none}
.roue__texte--long{font-size:12px;letter-spacing:.02em}
@media (hover:hover){.roue:not(.roue--saisie) .roue__part:hover .roue__secteur{filter:brightness(1.5) saturate(1.25)}}
.roue__part:focus-visible .roue__secteur{filter:brightness(1.5)}
.roue__moyeu{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40.8%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 36% 30%,#FCFAFB,#E6E0E3);
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .18), 0 8px 26px rgb(0 0 0 / .5);
  display:grid;place-items:center}
.roue__aide{margin:var(--e7) 0 0;text-align:center;color:var(--gris-sourd);
  font-family:var(--mono);font-size:var(--t-ref);letter-spacing:.2em;text-transform:uppercase}

/* ─── 12 · LE BANDEAU DÉFILANT ───────────────────────────────────────────── */
.bandeau-def{overflow:hidden;padding-block:var(--e6);border-block:1px solid var(--filet);
  background:rgb(11 7 8/.5);--vitesse:42s}
.bandeau-def__piste{display:flex;width:max-content;gap:0}
.bandeau-def__lot{display:flex;gap:clamp(28px,4vw,64px);padding-right:clamp(28px,4vw,64px);
  align-items:center;white-space:nowrap}
.bandeau-def span{font-family:var(--display);font-size:clamp(1.3rem,2.5vw,2.4rem);
  letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px color-mix(in oklch,var(--accent) 74%,transparent)}
.bandeau-def span:nth-child(even){color:var(--accent-txt);-webkit-text-stroke:0}
@media (prefers-reduced-motion:no-preference){
  .bandeau-def__piste{animation:defile var(--vitesse) linear infinite}
}
@keyframes defile{to{transform:translate3d(-50%,0,0)}}

/* ─── 13 · GRILLES ET CARTES ─────────────────────────────────────────────── */
.grille{display:grid;gap:clamp(20px,2.2vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.duo{display:grid;gap:clamp(32px,4.5vw,84px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.carte{background:linear-gradient(180deg,var(--noir-2),color-mix(in oklch,var(--noir-2) 38%,var(--noir)));
  border:1px solid var(--filet);border-radius:var(--r);padding:clamp(26px,2.6vw,42px);
  position:relative;overflow:hidden;
  transition:border-color var(--moyen) var(--ease),transform var(--moyen) var(--ease)}
.carte::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.65}
@media (hover:hover){.carte:hover{border-color:color-mix(in oklch,var(--accent) 46%,transparent);
  transform:translateY(-4px)}}

/* les formules */
.formules{display:grid;gap:clamp(20px,2.2vw,36px);grid-template-columns:7fr 5fr}
@media (max-width:1000px){.formules{grid-template-columns:1fr}}
.formules__col{display:grid;gap:clamp(20px,2.2vw,36px);align-content:start}
.carte--offre{display:flex;flex-direction:column;gap:var(--e4)}
.carte--phare{box-shadow:var(--ombre-3);border-color:color-mix(in oklch,var(--accent) 52%,transparent)}
.carte__num{margin:0;font-family:var(--mono);color:var(--gris);font-size:var(--t-ref);
  letter-spacing:.2em;text-transform:uppercase;display:flex;gap:var(--e3);align-items:center;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:var(--t-ref);letter-spacing:.14em;text-transform:uppercase;
  padding:5px var(--e3);border-radius:var(--r-rond);background:var(--accent);color:var(--encre)}
.prix{margin:0;font-family:var(--display);font-size:var(--t-geant);line-height:.88;
  letter-spacing:-.045em;color:var(--blanc)}
.prix--moyen{font-size:clamp(2.6rem,5vw,5rem)}
.prix span{font-family:var(--texte);font-size:clamp(.85rem,1vw,1rem);font-weight:600;
  color:var(--gris);letter-spacing:.02em;margin-left:.3em;vertical-align:.5em}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--e3);color:var(--gris)}
.liste li{padding-left:1.35em;position:relative;font-size:var(--t-petit);line-height:1.5}
.liste li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:2px;background:var(--accent)}
.liste--large li{font-size:var(--t-corps)}
.liste--large{margin-block:var(--e5) var(--e6)}
.carte__note{margin:auto 0 0;color:var(--gris-sourd);font-size:var(--t-micro);line-height:1.45}
.carte--offre .bouton{align-self:flex-start;margin-top:var(--e3)}

/* le tableau des déplacements, en chasse fixe */
.tableau{width:100%;border-collapse:collapse;margin-top:var(--e6);font-family:var(--mono);
  font-size:var(--t-micro)}
.tableau__titre{caption-side:top;text-align:left;margin-bottom:12px;color:var(--gris);font-size:1.06rem}
.tableau th,.tableau td{text-align:left;padding:var(--e3) var(--e4);border-bottom:1px solid var(--filet)}
.tableau th{color:var(--gris-sourd);font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.tableau td:last-child{text-align:right;color:var(--accent-txt);font-size:var(--t-data)}

/* ─── 14 · FIGURES ET PLEINS ÉCRANS ──────────────────────────────────────── */
.figure{margin:0}
.figure img{width:100%;border-radius:var(--r);box-shadow:var(--ombre-3)}
.figure figcaption{margin-top:var(--e4);color:var(--gris-sourd);font-size:var(--t-micro)}
.figure--portrait img{max-width:460px}
.bandeau{margin:var(--e9) 0 0}
.bandeau img{width:100%;max-height:min(56vh,520px);object-fit:cover;
  border-radius:var(--r);box-shadow:var(--ombre-3)}
.bandeau figcaption{margin-top:var(--e4);color:var(--gris-sourd);font-size:var(--t-micro)}
.plein{margin:0;position:relative;height:min(62svh,620px);overflow:hidden}
.plein img{width:100%;height:100%;object-fit:cover}
.plein::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(11 7 8/.92) 0%,transparent 26%,transparent 74%,rgb(11 7 8/.94) 100%)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .plein img{animation:derive linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}

/* ─── 15 · FILTRES ───────────────────────────────────────────────────────── */
.filtres{display:flex;gap:var(--e2);flex-wrap:wrap;margin-bottom:var(--e7)}
.filtre{border:0;cursor:pointer;background:transparent;color:var(--gris);
  font:600 var(--t-petit)/1 var(--texte);padding:var(--e3) var(--e5);min-height:44px;
  border-radius:var(--r-rond);box-shadow:inset 0 0 0 1px var(--filet);
  transition:color var(--rapide) var(--ease),box-shadow var(--rapide) var(--ease),
             background var(--rapide) var(--ease)}
@media (hover:hover){.filtre:hover{color:var(--blanc);box-shadow:inset 0 0 0 1px var(--gris-sourd)}}
.filtre:active{transform:scale(.97)}
.filtre--actif{color:var(--encre);background:var(--accent);box-shadow:none}
.filtre[data-famille="son"].filtre--actif{background:var(--fam-son)}
.filtre[data-famille="lumiere"].filtre--actif{background:var(--fam-lumiere)}
.filtre[data-famille="effets"].filtre--actif{background:var(--fam-effets)}

/* ─── 16 · LE PARC ───────────────────────────────────────────────────────── */
.rail{position:sticky;top:76px;z-index:20;display:flex;flex-wrap:wrap;gap:var(--e5);
  padding:var(--e3) 0;margin-bottom:var(--e6);
  font-family:var(--mono);font-size:var(--t-ref);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-sourd);border-bottom:1px solid var(--filet);background:rgb(11 7 8/.9)}
.rail b{color:var(--accent-txt);font-weight:400}
.grille--parc{grid-template-columns:repeat(auto-fill,minmax(min(248px,100%),1fr));
  gap:clamp(16px,1.8vw,30px)}
@media (max-width:560px){.grille--parc{grid-template-columns:repeat(2,1fr);gap:var(--e4)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .objet.monte,.vignette{animation:monte 380ms var(--ease) both;
      animation-timeline:view();animation-range:entry 2% entry 42%}
  }
}
.objet{margin:0;display:grid;gap:var(--e3);position:relative;padding:var(--e4);
  border-radius:var(--r-petit);transition:background var(--moyen) var(--ease)}
.objet::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:radial-gradient(120% 80% at 50% 18%,var(--fam,var(--accent)),transparent 70%);
  opacity:.09;transition:opacity var(--moyen) var(--ease)}
.objet[data-cat="son"]{--fam:var(--fam-son)}
.objet[data-cat="lumiere"]{--fam:var(--fam-lumiere)}
.objet[data-cat="effets"]{--fam:var(--fam-effets)}
@media (hover:hover){.objet:hover::before{opacity:.24}
  .objet:hover .objet__img img{transform:translateY(-6px) scale(1.03)}}
.objet__img{border-radius:var(--r-petit);overflow:hidden;background:transparent}
.objet__img img{width:100%;aspect-ratio:1;object-fit:contain;
  transition:transform var(--moyen) var(--ease)}
.objet figcaption{display:grid;gap:3px}
.objet__ref{font-family:var(--mono);font-size:var(--t-ref);letter-spacing:.16em;color:var(--fam,var(--accent-txt))}
.objet__nom{font-size:var(--t-petit);font-weight:600;line-height:1.35}
.objet__det{font-size:var(--t-micro);color:var(--gris-sourd);line-height:1.4}
.objet__prix{margin-top:var(--e2);font-family:var(--mono);font-size:var(--t-data);
  font-weight:600;color:var(--blanc);line-height:1.3}
.objet__prix span{display:block;font-size:var(--t-ref);font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris-sourd)}
.objet[data-statut="pack"] .objet__prix{font-size:var(--t-ref);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fam,var(--accent-txt));font-weight:400}
.objet[data-statut="pack"] .objet__prix span{color:var(--gris);letter-spacing:.06em;
  font-size:var(--t-micro);text-transform:none}
.objet[data-statut="fourni"] .objet__prix{font-size:var(--t-ref);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris-sourd);font-weight:400}
.objet[data-statut="devis"] .objet__prix{display:inline-flex;align-items:center;gap:var(--e2);
  font-size:var(--t-ref);letter-spacing:.12em;text-transform:uppercase;font-weight:400;
  color:var(--jaune);padding:5px var(--e3);border-radius:var(--r-rond);
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--jaune) 46%,transparent);justify-self:start}
.objet__note{font-family:var(--mono);font-size:var(--t-ref);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris-sourd)}

/* ─── 17 · GALERIE ───────────────────────────────────────────────────────── */
.galerie{columns:330px;column-gap:clamp(14px,1.5vw,22px)}
.vignette{display:block;width:100%;margin:0 0 clamp(14px,1.5vw,22px);padding:0;border:0;
  background:none;cursor:zoom-in;border-radius:var(--r-petit);overflow:hidden;
  break-inside:avoid;position:relative;line-height:0}
.vignette img{width:100%;transition:transform var(--lent) var(--ease),filter var(--moyen) var(--ease)}
@media (hover:hover){.vignette:hover img{transform:scale(1.04);filter:brightness(1.1)}}
.vignette::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .09)}
.visio{border:0;padding:0;background:transparent;max-width:min(94vw,1500px);max-height:94vh}
.visio::backdrop{background:rgb(6 4 7 / .94)}
.visio img{max-width:100%;max-height:84vh;width:auto;margin-inline:auto;
  border-radius:var(--r);box-shadow:var(--ombre-3)}
.visio__leg{margin:var(--e4) 0 0;text-align:center;color:var(--gris);font-size:var(--t-petit)}
.visio__x,.visio__nav{position:fixed;border:0;cursor:pointer;color:var(--blanc);
  background:rgb(255 255 255 / .12);border-radius:50%;width:52px;height:52px;
  font-size:1.6rem;line-height:1;display:grid;place-items:center;
  transition:background var(--rapide) var(--ease)}
@media (hover:hover){.visio__x:hover,.visio__nav:hover{background:rgb(255 255 255 / .24)}}
.visio__x{top:18px;right:18px}
.visio__nav--g{left:18px;top:50%;transform:translateY(-50%)}
.visio__nav--d{right:18px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.visio__nav{bottom:20px;top:auto;transform:none}
  .visio__nav--g{left:24%}.visio__nav--d{right:24%}}

/* ─── 18 · ÉCRAN LED ─────────────────────────────────────────────────────── */
.ecrans{display:grid;gap:clamp(24px,3vw,56px);grid-template-columns:1fr 1fr;align-items:end}
@media (max-width:820px){.ecrans{grid-template-columns:1fr}}
.ecran{margin:0;display:grid;gap:var(--e4);position:relative}
.ecran__cadre{position:relative;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,#141013,#0B0708);border:1px solid var(--filet);
  aspect-ratio:4/3;display:grid;place-items:center;padding:var(--e6)}
.ecran__cadre{padding:0}
.ecran__cadre img{width:100%;height:100%;object-fit:cover}
.ecran figcaption{display:grid;gap:var(--e2)}
.ecran .geant{font-size:clamp(3rem,7vw,7.5rem)}
.ecran__det{font-family:var(--mono);font-size:var(--t-micro);color:var(--gris-sourd);
  letter-spacing:.1em;text-transform:uppercase}
/* le 6 m² est la surface de base, le 12 m² le grand format : la seconde vignette
   porte le liseré d'accent, et son cadre est un peu plus haut. */
.ecran--6 .ecran__cadre{aspect-ratio:4/3}
.ecran--12 .ecran__cadre{aspect-ratio:4/2.85;border-color:color-mix(in oklch,var(--accent) 44%,transparent)}
.ecran--12 .geant{color:var(--accent-txt)}

/* ─── 19 · PHILIPPE ──────────────────────────────────────────────────────── */
.signature{color:var(--gris-sourd);font-size:var(--t-petit);font-style:italic}
.chiffres{list-style:none;margin:var(--e8) 0 0;padding:0;display:grid;gap:var(--e6);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.chiffres li{display:grid;gap:var(--e2);padding-left:var(--e4);
  border-left:2px solid color-mix(in oklch,var(--accent) 64%,transparent)}
.chiffres strong{font-family:var(--display);font-size:clamp(2.2rem,3.6vw,3.6rem);
  letter-spacing:-.04em;line-height:.9}
.chiffres span{color:var(--gris-sourd);font-size:var(--t-micro);line-height:1.4}

/* ─── 20 · FAQ ───────────────────────────────────────────────────────────── */
.faq{display:grid;gap:var(--e3)}
.faq details{border:1px solid var(--filet);border-radius:var(--r-petit);
  background:rgb(20 16 19/.7);overflow:hidden}
.faq summary{cursor:pointer;padding:var(--e5) var(--e6);font-weight:600;font-size:1.05rem;
  list-style:none;display:flex;justify-content:space-between;gap:var(--e4);align-items:center;
  min-height:64px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-txt);font-family:var(--display);
  font-size:1.4rem;flex:0 0 auto;transition:rotate var(--moyen) var(--ease)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{margin:0;padding:0 var(--e6) var(--e5);color:var(--gris);font-size:var(--t-petit)}

/* ─── 21 · LE BLOC DE DATES — aplat magenta, la page s'inverse ──────────── */
.sec--date{background:var(--magenta);color:var(--encre);
  padding-block:clamp(96px,13vh,180px);position:relative;overflow:hidden;isolation:isolate}
.sec--date::before{background:none}
.sec--date::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 84% 8%,rgb(255 255 255/.2),transparent 60%)}
.sec--date h2,.sec--date h3{color:var(--encre)}
.sec--date .oeil{color:rgb(5 3 4/.68)}
.sec--date .chapo{color:rgb(5 3 4/.82);font-weight:500}
.date__bloc{display:grid;gap:clamp(28px,3.4vw,56px);grid-template-columns:1fr 440px;
  align-items:start;margin-top:var(--e8)}
@media (max-width:1180px){.date__bloc{grid-template-columns:1fr}}

.cal{display:grid;gap:clamp(20px,2.4vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.cal__mois{min-width:0}
.cal__titre{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--e4);gap:var(--e3)}
.cal__titre h4{margin:0;font-family:var(--display);font-size:clamp(1.1rem,1.6vw,1.55rem);
  letter-spacing:-.02em;text-transform:uppercase}
.cal__nav{display:flex;gap:var(--e2)}
.cal__nav button{width:44px;height:44px;border-radius:var(--r-petit);cursor:pointer;
  border:1px solid rgb(5 3 4/.3);background:transparent;color:var(--encre);
  font-size:1.3rem;line-height:1;transition:background var(--rapide) var(--ease)}
.cal__nav button:hover:not([disabled]){background:rgb(5 3 4/.12)}
.cal__nav button[disabled]{opacity:.3;cursor:not-allowed}
.cal__jours,.cal__grille{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal__jours{margin-bottom:var(--e2)}
.cal__jours span{text-align:center;font-family:var(--mono);font-size:var(--t-ref);
  letter-spacing:.14em;text-transform:uppercase;color:rgb(5 3 4/.55)}
.cal__c{position:relative;min-height:52px;aspect-ratio:1;border:1px solid rgb(5 3 4/.24);
  border-radius:var(--r-petit);background:transparent;color:var(--encre);cursor:pointer;
  font:600 var(--t-data)/1 var(--mono);display:grid;place-items:center;overflow:hidden;
  transition:transform var(--rapide) var(--ease),background var(--rapide) var(--ease)}
@media (max-width:900px){.cal__c{min-height:44px}}
.cal__c[data-vide]{border:0;background:none;cursor:default;pointer-events:none}
.cal__c:hover:not([disabled]):not([data-vide]){background:rgb(5 3 4/.1);transform:scale(1.06)}
.cal__c:active:not([disabled]){transform:scale(.96)}
/* les cinq états, distinguables SANS la couleur */
.cal__c::after{content:"";position:absolute;left:50%;bottom:6px;translate:-50% 0;
  width:4px;height:4px;border-radius:50%;background:rgb(5 3 4/.5)}
.cal__c[data-etat="demande"]{background:repeating-linear-gradient(45deg,
  rgb(5 3 4/.2) 0 2px,transparent 2px 7px)}
.cal__c[data-etat="indisponible"],.cal__c[disabled]{cursor:not-allowed;color:rgb(5 3 4/.4);
  background:rgb(5 3 4/.07);border-color:rgb(5 3 4/.12)}
.cal__c[data-etat="indisponible"]::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,transparent calc(50% - 1px),
    rgb(5 3 4/.42) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
.cal__c[data-etat="indisponible"]::after,.cal__c[data-etat="passe"]::after{display:none}
.cal__c[data-etat="passe"]{opacity:.3;cursor:default}
.cal__c[data-auj]{box-shadow:inset 0 -3px 0 0 var(--encre)}
.cal__c[data-plage]{background:rgb(5 3 4/.78);color:#FAF7F8;border-color:transparent;border-radius:2px}
.cal__c[data-plage]::after{background:rgb(250 247 248/.6)}
.cal__c[data-choisi]{background:var(--encre);color:#FAF7F8;border-radius:var(--r-petit)}
.cal__legende{display:flex;flex-wrap:wrap;gap:var(--e5);margin-top:var(--e5);
  font-family:var(--mono);font-size:var(--t-ref);letter-spacing:.1em;
  text-transform:uppercase;color:rgb(5 3 4/.72)}
.cal__legende i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:7px;
  vertical-align:-3px;border:1px solid rgb(5 3 4/.3)}
.cal__legende i.l-demande{background:repeating-linear-gradient(45deg,rgb(5 3 4/.28) 0 2px,transparent 2px 7px)}
.cal__legende i.l-indispo{background:rgb(5 3 4/.12)}
.cal__legende i.l-choisi{background:var(--encre)}
.cal__note{margin:var(--e4) 0 0;font-size:var(--t-micro);color:rgb(5 3 4/.7)}

.duree{margin-top:var(--e7)}
.duree__barre{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e3)}
.duree__b{min-height:52px;padding:0 var(--e5);border-radius:var(--r-rond);cursor:pointer;
  border:1px solid rgb(5 3 4/.3);background:transparent;color:var(--encre);
  font:600 var(--t-petit)/1 var(--texte);
  transition:background var(--rapide) var(--ease),color var(--rapide) var(--ease)}
.duree__b:hover{background:rgb(5 3 4/.1)}
.duree__b.est-on{background:var(--encre);color:#FAF7F8;border-color:var(--encre)}

/* ce qui se passe ensuite, sous le calendrier : la colonne de gauche ne doit
   pas s'arrêter à mi-hauteur et laisser un aplat rose vide. */
.etapes{list-style:none;margin:var(--e9) 0 0;padding:0;display:grid;gap:var(--e5);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.etapes li{display:grid;gap:var(--e3);align-content:start;
  border-top:2px solid rgb(5 3 4/.7);padding-top:var(--e4)}
.etapes b{font-family:var(--display);font-size:2.2rem;line-height:1;font-weight:400}
.etapes span{font-size:var(--t-petit);line-height:1.5;color:rgb(5 3 4/.82)}
.appel{margin:var(--e8) 0 0;display:flex;flex-wrap:wrap;gap:var(--e4);align-items:center}
.appel span{font-weight:600}
.bouton--noir{background:var(--encre);color:#FAF7F8}
@media (hover:hover){.bouton--noir:hover{box-shadow:0 14px 38px -12px rgb(5 3 4/.6)}}

/* le récapitulatif : une carte noire dans le magenta, contraste maximal */
.recap{background:var(--noir);color:var(--blanc);border-radius:var(--r);
  padding:clamp(24px,2.4vw,36px);position:sticky;top:100px;
  box-shadow:0 34px 80px -30px rgb(5 3 4/.7)}
@media (max-width:1180px){.recap{position:static}}
.recap .oeil{color:var(--magenta-txt)}
.recap__date{font-family:var(--display);font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.05;
  letter-spacing:-.03em;margin:0 0 var(--e3)}
.cal__resume{margin:0 0 var(--e5);color:var(--gris);font-size:var(--t-petit)}
.cal__resume--choisi{color:var(--blanc)}
.cal__resume b{font-family:var(--display);font-weight:400;font-size:1.25rem;
  letter-spacing:-.02em;display:block;margin-bottom:var(--e2)}
.cal__alerte{display:block;margin-top:var(--e3);color:var(--jaune);font-size:var(--t-micro)}
.recap__ligne{display:flex;justify-content:space-between;gap:var(--e4);
  padding:var(--e3) 0;border-bottom:1px solid var(--filet);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase}
.recap__ligne b{color:var(--magenta-txt);font-weight:400}

/* ─── 22 · LE FORMULAIRE ─────────────────────────────────────────────────── */
.pot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form{display:grid;gap:var(--e5);grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  margin-top:var(--e6)}
.champ{display:grid;gap:var(--e2);min-width:0}
.champ--large{grid-column:1/-1}
.champ label{font-family:var(--mono);font-size:var(--t-ref);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris-sourd)}
.req{color:var(--magenta-txt)}
.champ input,.champ select,.champ textarea{
  width:100%;min-height:56px;padding:0 var(--e5);
  background:rgb(250 247 248/.05);color:var(--blanc);
  border:1px solid var(--filet);border-radius:var(--r-petit);
  font:400 1.0625rem/1.5 var(--texte);
  transition:border-color var(--rapide) var(--ease),background var(--rapide) var(--ease)}
.champ textarea{min-height:120px;padding:var(--e4) var(--e5);resize:vertical}
.champ input::placeholder,.champ textarea::placeholder{color:var(--gris-sourd)}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--magenta);background:rgb(250 247 248/.09)}
.rgpd{grid-column:1/-1;display:flex;gap:var(--e3);align-items:flex-start;
  color:var(--gris);font-size:var(--t-micro);line-height:1.5}
.rgpd input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--magenta)}
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;
  min-height:64px;padding:0 var(--e7);border:0;border-radius:var(--r-rond);cursor:pointer;
  font:400 1.1rem/1 var(--display);letter-spacing:-.01em;
  color:var(--encre);background:linear-gradient(100deg,var(--magenta) 0%,var(--magenta) 45%,var(--jaune) 100%);
  background-size:220% 100%;background-position:0% 50%;
  transition:background-position 420ms var(--ease),transform var(--rapide) var(--ease)}
@media (hover:hover){.btn:hover{background-position:100% 50%;transform:translateY(-2px)}}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.form__apres{grid-column:1/-1;margin:0;color:var(--gris-sourd);font-size:var(--t-micro);text-align:center}
.date-simple{display:grid;gap:var(--e2);margin-top:var(--e5)}
.js-actif .date-simple{display:none}

/* ─── 23 · PIED DE PAGE ──────────────────────────────────────────────────── */
.pied{background:rgb(11 7 8/.94);border-top:1px solid var(--filet);
  padding-block:var(--e9) var(--e7)}
.pied__in{display:grid;gap:var(--e8);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.pied__logo{width:220px}
.pied__col{display:grid;gap:var(--e3);color:var(--gris);font-size:var(--t-petit)}
.pied__col a{color:var(--gris);text-decoration:none}
@media (hover:hover){.pied__col a:hover{color:var(--blanc);text-decoration:underline}}
.pied__legal{margin-top:var(--e7);padding-top:var(--e5);border-top:1px solid var(--filet);
  display:flex;flex-wrap:wrap;gap:var(--e5);justify-content:space-between;
  font-family:var(--mono);font-size:var(--t-ref);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris-sourd)}

/* ─── 24 · COUPE GÉNÉRALE ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .bandeau-def__piste{animation:none}
  .mega .mot>span{animation:none}
}