/* ═══════════════════════════════════════════════════════════════════════
   SUD ORGANISATION ÉVÈNEMENT — « PLAN DE FEU »
   Fait main, zéro framework, zéro requête tierce.
   L'or n'est pas une peinture : c'est un statut. Il ne marque que ce qui
   est terminé, validé, prêt.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Archivo"; src:url("/f/Archivo.subset.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
}
@font-face{
  font-family:"Plex Mono"; src:url("/f/PlexMono-400.subset.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Plex Mono"; src:url("/f/PlexMono-500.subset.woff2") format("woff2");
  font-weight:500; font-display:swap;
}
/* Repli calibré : Helvetica/Arial sont plus larges qu'Archivo à wdth 100. */
@font-face{
  font-family:"Archivo Fallback"; src:local("Helvetica Neue"),local("Arial");
  size-adjust:96%; ascent-override:92%; descent-override:24%; line-gap-override:0%;
}

:root{
  /* ── FONDS : trois noirs distincts, jamais #000 ── */
  --c-cage:       #08090B;
  --c-molleton:   #101318;
  --c-flightcase: #1B2029;

  /* ── TEXTES : deux blancs délibérés + un gris qui tient AA ── */
  --c-regie:      #DDE1E5;
  --c-poursuite:  #E4DED4;
  --c-alu:        #9AA3AD;
  --c-contour:    #5C646E;

  /* ── OR : un statut, pas une décoration ── */
  --c-laiton:     #C8A45B;
  --c-gerbe:      #E8C874;
  --g-or-metal:   linear-gradient(112deg,#7A5A1E 0%,#F3E0A8 42%,#C9932F 100%);

  /* ── CONTRE-JOUR : la seule couleur froide, et ce qui sauve tout ── */
  --c-contrejour: #4A7FA5;

  --a-alu-14: rgba(154,163,173,.14);
  --a-alu-06: rgba(154,163,173,.06);
  --a-voile:  rgba(8,9,11,.96);

  --sh-lightbox: 0 24px 64px rgba(0,0,0,.60);

  --r-0:0; --r-1:2px;

  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px;

  --ease-pont: cubic-bezier(.22,.61,.36,1);
  --ease-etat: cubic-bezier(.65,0,.35,1);
  --t-micro:150ms; --t-objet:240ms; --t-modal:320ms; --t-max:400ms;

  --ff-display:"Archivo","Archivo Fallback",Arial,system-ui,sans-serif;
  --ff-mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --largeur:1280px;
  --pad:var(--s-5);
  --rythme:var(--s-9);
}

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

html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}

body{
  background:var(--c-cage); color:var(--c-regie);
  font-family:var(--ff-display); font-size:17px; font-weight:400;
  line-height:1.62; letter-spacing:0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,canvas{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
ul{list-style:none}

::selection{background:var(--c-laiton); color:var(--c-cage)}

:focus-visible{
  outline:2px solid var(--c-gerbe); outline-offset:2px;
}

/* Grain anti-banding : le banding des dégradés sombres est LE marqueur du
   site sombre bon marché. Posé par JS, jamais interactif. */
#grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.035; mix-blend-mode:overlay;
}

.saut{
  position:absolute; left:var(--s-4); top:-100px; z-index:60;
  background:var(--c-laiton); color:var(--c-cage);
  padding:var(--s-3) var(--s-5); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; font-size:15px;
}
.saut:focus{top:var(--s-3)}

.enveloppe{
  width:100%; max-width:var(--largeur); margin-inline:auto;
  padding-inline:var(--pad);
}
/* Sans cela, un long mot ou une image large empêche la colonne de
   rétrécir et pousse toute la page hors de l'écran. */
.enveloppe > *,
.heros .enveloppe > *,
.contact-grille > *,
.metier > *,
.fiches > *,
.duo > *,
.plateau > *{ min-width:0 }
.corps,.chapo,.sec,.promesse{ overflow-wrap:break-word }

/* ─────────────────────────────────────────────── typographie ── */
h1,h2,h3{ text-wrap:balance }

h1{
  font-size:clamp(2.4rem,5vw,4.1rem); font-weight:800; font-stretch:100%;
  line-height:.94; letter-spacing:-.01em; text-transform:uppercase;
  color:var(--c-regie);
}
h2{
  font-size:clamp(1.75rem,3.4vw,2.75rem); font-weight:700; font-stretch:100%;
  line-height:1.05; letter-spacing:-.005em; text-transform:uppercase;
}
h3{ font-size:21px; font-weight:600; line-height:1.25 }

.fonts-loading h1{letter-spacing:.015em}

.mono{
  font-family:var(--ff-mono); font-variant-numeric:tabular-nums;
}
.kicker{
  font-family:var(--ff-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-alu);
  line-height:1.4;
}
.donnee{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--c-alu); font-variant-numeric:tabular-nums;
}
.chapo{ font-size:19px; line-height:1.55; color:var(--c-alu); max-width:34em }
.corps{ max-width:34em }
.sec{ font-size:15px; color:var(--c-alu); max-width:34em }

/* ─────────────────────────────────────────────── boutons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:14px 28px; border-radius:var(--r-1);
  font-size:15px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  transition:background var(--t-micro) var(--ease-etat),
             border-color var(--t-micro) var(--ease-etat),
             color var(--t-micro) var(--ease-etat);
}
.btn-or{ background:var(--c-laiton); color:var(--c-cage) }
.btn-or:hover{ background:var(--c-gerbe) }
.btn-fantome{
  background:transparent; color:var(--c-regie);
  border:1px solid rgba(154,163,173,.45);
}
.btn-fantome:hover{ border-color:var(--c-laiton) }

/* ─────────────────────────────────────────────── sections ── */
.bloc{ padding-block:var(--rythme); position:relative }
.filet-sec{
  height:1px; background:var(--c-flightcase); transform-origin:left;
  transition:transform var(--t-objet) var(--ease-pont);
}
.js .filet-sec{ transform:scaleX(0) }
.js .vu .filet-sec{ transform:scaleX(1) }

/* Grammaire unique : on trace, on remplit. Une seule fois, jamais rejoué. */
.js .monte{
  opacity:0; transform:translateY(8px);
  transition:opacity var(--t-objet) var(--ease-pont),
             transform var(--t-objet) var(--ease-pont);
}
.js .vu .monte{ opacity:1; transform:none }
.vu .monte:nth-child(2){transition-delay:.08s}
.vu .monte:nth-child(3){transition-delay:.14s}
.vu .monte:nth-child(4){transition-delay:.20s}
.vu .monte:nth-child(5){transition-delay:.26s}
.vu .monte:nth-child(6){transition-delay:.32s}

.entete-sec{ display:grid; gap:var(--s-3); margin-bottom:var(--s-7) }

/* ═════════════════════════════════ BLOC 0 — BARRE DE RÉGIE ══ */
.regie{
  position:fixed; inset:0 0 auto; z-index:40; height:56px;
  background:rgba(16,19,24,.86); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.regie::after{
  content:""; position:absolute; inset:auto 0 0; height:1px;
  background:var(--g-or-metal); opacity:.30;
}
.regie .enveloppe{
  height:100%; display:flex; align-items:center; gap:var(--s-5);
}
.marque{ display:flex; align-items:center; gap:var(--s-3); flex:none }
.marque svg{ height:24px; width:auto }
.marque .nom{
  display:none;
  font-family:var(--ff-mono); font-size:12px; font-weight:500;
  letter-spacing:.22em; color:var(--c-regie);
}

.nav-bureau{ display:none; margin-inline:auto; gap:var(--s-5) }
.nav-bureau a{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-alu); position:relative;
  padding-block:var(--s-2); display:flex; align-items:center; gap:8px;
  transition:color var(--t-micro) var(--ease-etat);
}
.nav-bureau a:hover{ color:var(--c-regie) }
.nav-bureau a[aria-current="true"]{ color:var(--c-regie) }

/* L'entrée active porte un micro-égaliseur : le geste de marque devient
   l'indicateur de navigation. Aucun soulignement. */
.eq{ display:none; gap:2px; align-items:flex-end; height:10px }
.nav-bureau a[aria-current="true"] .eq{ display:flex }
.eq i{
  display:block; width:2px; height:10px; background:var(--c-laiton);
  transform-origin:bottom; transform:scaleY(.6);
}
.anime .eq i:nth-child(1){ animation:eq 900ms var(--ease-etat) infinite alternate }
.anime .eq i:nth-child(2){ animation:eq 1300ms var(--ease-etat) infinite alternate }
.anime .eq i:nth-child(3){ animation:eq 700ms var(--ease-etat) infinite alternate }
.defile .eq i{ animation-play-state:paused }
@keyframes eq{ from{transform:scaleY(.6)} to{transform:scaleY(1)} }

.appel{
  margin-left:auto; flex:none; display:inline-flex; align-items:center;
  gap:var(--s-2); min-height:36px; padding:6px 14px;
  border:1px solid var(--c-laiton); border-radius:var(--r-1);
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em;
  color:var(--c-laiton); font-variant-numeric:tabular-nums;
  transition:background var(--t-micro) var(--ease-etat),
             color var(--t-micro) var(--ease-etat);
}
.appel:hover{ background:var(--c-laiton); color:var(--c-cage) }
.appel .num{ display:none }
.appel svg{ width:18px; height:18px }

.burger{
  margin-left:var(--s-2); width:44px; height:44px; flex:none;
  display:grid; place-items:center;
}
.burger span{
  display:block; width:20px; height:1px; background:var(--c-regie);
  position:relative;
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:1px;
  background:var(--c-regie); transition:transform var(--t-micro) var(--ease-etat);
}
.burger span::before{ top:-6px } .burger span::after{ top:6px }

.progression{
  position:absolute; inset:auto 0 0; height:2px; background:var(--c-laiton);
  transform:scaleX(0); transform-origin:left; z-index:1;
}

/* Panneau de navigation mobile */
.panneau{
  position:fixed; inset:0; z-index:45; background:var(--c-molleton);
  display:grid; align-content:center; gap:var(--s-5);
  padding:var(--s-8) var(--s-5); opacity:0; visibility:hidden;
  transition:opacity var(--t-modal) var(--ease-etat),
             visibility var(--t-modal) var(--ease-etat);
}
.panneau[data-ouvert="true"]{ opacity:1; visibility:visible }
.panneau a{
  font-size:28px; font-weight:700; text-transform:uppercase;
  letter-spacing:-.005em; padding-block:var(--s-2);
}
.panneau .fermer{
  position:absolute; top:var(--s-3); right:var(--s-3);
  width:44px; height:44px; display:grid; place-items:center;
  font-family:var(--ff-mono); font-size:20px; color:var(--c-alu);
}

/* ═════════════════════════════════ BLOC 1 — HÉROS ══════════ */
.heros{
  min-height:100svh; padding-top:calc(56px + var(--s-8));
  padding-bottom:var(--s-8); display:flex; align-items:center;
}
.heros .enveloppe{
  display:grid; gap:var(--s-8); width:100%;
}
.heros h1{ margin-block:var(--s-4) }
.heros .actions{
  display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-6);
}

/* Le plan de feu */
.plan{ position:relative }
.plan-boite{
  position:relative; width:100%; aspect-ratio:4/5;
  border:1px solid var(--c-flightcase); background:var(--c-cage);
}
.plan-boite canvas{ width:100%; height:100%; cursor:crosshair }
.plan-repli{
  position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 22%,rgba(232,200,116,.10),transparent 70%);
}

/* Les cotes sont en HTML, positionnées sur les coordonnées normalisées du
   canvas : jamais de texte dans le canvas (netteté, accessibilité, zoom). */
.cote{
  position:absolute; font-family:var(--ff-mono); font-size:10px;
  letter-spacing:.10em; text-transform:uppercase; color:var(--c-alu);
  opacity:0; transition:opacity var(--t-objet) var(--ease-pont);
  white-space:nowrap; pointer-events:none;
}
.cote.is-on{ opacity:1 }
.cote-ouverture{ left:50%; top:2%; transform:translateX(-50%) }
.cote-profondeur{
  left:6px; top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
}
.cote-regie{ right:2%; bottom:2%; text-align:right }

.cartouche{
  margin-top:var(--s-3); font-family:var(--ff-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--c-alu);
  opacity:0; transition:opacity var(--t-objet) var(--ease-pont);
  font-variant-numeric:tabular-nums;
}
.cartouche.is-on{ opacity:1 }

/* Les six points, listés en permanence sur tous les formats */
.points{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  margin-top:var(--s-4); max-width:34em;
}
.points button{
  display:block; width:100%; text-align:left; min-height:44px;
  padding:var(--s-2) var(--s-3); border-left:2px solid transparent;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-alu);
  transition:color var(--t-micro) var(--ease-etat),
             border-color var(--t-micro) var(--ease-etat),
             background var(--t-micro) var(--ease-etat);
}
.points button:hover,.points button[aria-pressed="true"]{
  color:var(--c-poursuite); border-left-color:var(--c-contrejour);
  background:var(--c-molleton);
}

/* ═════════════════════════════════ BLOC 2 — FAITS + PHOTOS ══ */
.faits{
  background:var(--c-molleton);
  border-block:1px solid var(--c-flightcase);
}
.faits .enveloppe{
  display:grid; gap:0;
}
.fait{
  padding:var(--s-5) 0; display:grid; gap:var(--s-1);
  border-bottom:1px solid var(--c-flightcase);
}
.fait:last-child{ border-bottom:none }
.fait .v{
  font-size:40px; font-weight:800; font-stretch:115%; line-height:1;
  letter-spacing:-.02em; color:var(--c-laiton);
  font-variant-numeric:tabular-nums;
}
.fait .l{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-alu);
}

.bande{ padding-block:var(--s-6) }
.bande ul{
  display:grid; grid-auto-flow:column; grid-auto-columns:78vw;
  gap:var(--s-2); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--s-2);
}
.bande li{ scroll-snap-align:start }
.bande img{
  width:100%; height:140px; object-fit:cover;
  border:1px solid var(--c-flightcase);
}
.bande figcaption{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-poursuite); margin-top:var(--s-2);
}

/* ═════════════════════════════════ BLOC 3 — CONTINUITÉ ══════ */
.conduite{ position:relative; padding-left:var(--s-5) }
.conduite::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--c-flightcase);
}
.curseur-conduite{
  position:absolute; left:-2px; width:5px; height:5px; border-radius:50%;
  background:var(--c-laiton); top:0;
}
.conduite table{ width:100%; border-collapse:collapse }
.conduite td{
  padding:var(--s-4) 0; border-bottom:1px solid var(--c-flightcase);
  vertical-align:top;
}
.conduite tr:last-child td{ border-bottom:none }
.conduite td:first-child{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.10em;
  color:var(--c-laiton); white-space:nowrap; padding-right:var(--s-5);
  font-variant-numeric:tabular-nums; width:1%;
}
.conduite tr:last-child td:first-child{ color:var(--c-contrejour) }
.conduite td:last-child{ font-size:15px; color:var(--c-regie) }
.cloture{
  font-size:28px; font-weight:600; line-height:1.25; color:var(--c-regie);
  margin-top:var(--s-7); max-width:22em;
}

/* ═════════════════════════════════ BLOC 4 — RÉFÉRENCES ═════ */
.fiches{ display:grid; gap:var(--s-6) }
.fiche{
  background:var(--c-molleton); border:1px solid var(--c-flightcase);
  border-left:2px solid transparent; border-radius:var(--r-1);
  transition:transform var(--t-objet) var(--ease-pont),
             border-color var(--t-objet) var(--ease-etat);
}
.fiche:hover{ transform:translateY(-2px); border-left-color:var(--c-contrejour) }
.fiche img{ width:100%; aspect-ratio:3/2; object-fit:cover }
.fiche .dedans{ padding:var(--s-5); display:grid; gap:var(--s-3) }
.fiche h3{ color:var(--c-poursuite) }
.fiche dl{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-1) var(--s-4);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.10em;
  text-transform:uppercase;
}
.fiche dt{ color:var(--c-contour) }
.fiche dd{ color:var(--c-alu) }

/* ═════════════════════════════════ BLOC 5 — MÉTIERS ════════ */
.metier{
  display:grid; gap:var(--s-5); position:relative;
  padding-top:var(--s-7); margin-top:var(--s-7);
  border-top:1px solid var(--c-flightcase);
}
.metier:first-of-type{ border-top:none; margin-top:0; padding-top:0 }
.metier .circuit{
  position:absolute; top:var(--s-5); right:0; z-index:0;
  font-family:var(--ff-mono); font-size:72px; line-height:1;
  color:var(--c-alu); opacity:.20; user-select:none;
  font-variant-numeric:tabular-nums;
}
.metier .texte{ position:relative; z-index:1; display:grid; gap:var(--s-3) }
.metier img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.metier .pictos{ display:flex; align-items:center; gap:var(--s-3) }
.metier .pictos svg{ width:32px; height:32px; flex:none }
.materiel{
  display:grid; gap:var(--s-2); margin-top:var(--s-2);
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em;
  color:var(--c-alu); line-height:1.5;
}
.materiel li{ position:relative; padding-left:var(--s-4) }
.materiel li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:3px; height:3px; background:var(--c-laiton);
}
.materiel li b{ color:var(--c-regie); font-weight:400 }

/* ── Le vestiaire des mascottes ── */
.mascottes{ margin-top:var(--s-9); padding-top:var(--s-7);
  border-top:1px solid var(--c-flightcase) }
.entete-mascottes{ display:grid; gap:var(--s-3); margin-bottom:var(--s-6) }
.entete-mascottes h3{ font-size:21px }
.grille-mascottes{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:var(--s-2);
}
.grille-mascottes figure{ margin:0 }
.grille-mascottes button{
  display:block; width:100%; padding:0;
  border:1px solid var(--c-flightcase); border-left-width:2px;
  border-left-color:var(--c-flightcase);
  transition:border-color var(--t-micro) var(--ease-etat);
}
.grille-mascottes button:hover{
  border-color:var(--c-laiton); border-left-color:var(--c-contrejour);
}
.grille-mascottes img{ width:100%; aspect-ratio:1; object-fit:cover }
@media (min-width:900px){
  .grille-mascottes{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) }
}

/* ═════════════════════════════════ BLOC 6 — TARIFS ═════════ */
.tarifs-tete{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-4);
}
.grille-tarifs{ width:100%; border-collapse:collapse }
.grille-tarifs caption{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-alu); text-align:left;
  padding-bottom:var(--s-3);
}
.grille-tarifs th{
  font-family:var(--ff-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-alu);
  text-align:left; padding:var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom:1px solid var(--c-flightcase);
}
.grille-tarifs th:last-child{ text-align:right; padding-right:0 }
.grille-tarifs td{
  padding:var(--s-4) var(--s-3) var(--s-4) 0;
  border-bottom:1px solid var(--c-flightcase); vertical-align:baseline;
}
.grille-tarifs tbody tr{ transition:background var(--t-micro) var(--ease-etat) }
.grille-tarifs tbody tr:hover{ background:var(--c-molleton) }
.grille-tarifs .nom{ font-size:17px; font-weight:600; white-space:nowrap }
.grille-tarifs .contenu{ font-size:15px; color:var(--c-alu) }
.grille-tarifs .prix{
  text-align:right; white-space:nowrap; padding-right:0;
  font-size:28px; font-weight:700; color:var(--c-laiton);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.grille-tarifs .prix small{
  display:block; font-family:var(--ff-mono); font-size:11px; font-weight:400;
  letter-spacing:.10em; color:var(--c-alu);
}
/* Pack recommandé : un filet, rien d'autre. Cette retenue est exactement
   ce qui signale l'excellence. */
.grille-tarifs tr.retenu td:first-child{
  box-shadow:inset 2px 0 0 var(--c-laiton); padding-left:var(--s-3);
}

/* ═════════════════════════════════ BLOC 7 — GALERIE ════════ */
.filtres{
  display:flex; gap:var(--s-2); flex-wrap:wrap; margin-bottom:var(--s-6);
}
.filtres button{
  min-height:44px; padding:var(--s-2) var(--s-4);
  border:1px solid var(--c-flightcase); border-radius:var(--r-1);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-alu);
  transition:border-color var(--t-micro) var(--ease-etat),
             color var(--t-micro) var(--ease-etat);
}
.filtres button:hover{ color:var(--c-regie) }
.filtres button[aria-pressed="true"]{
  border-color:var(--c-laiton); color:var(--c-poursuite);
}
.plateau{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--s-4);
}
.plateau figure{ margin:0 }
.plateau button{
  display:block; width:100%; padding:0; border:1px solid var(--c-flightcase);
  border-left-width:2px; border-left-color:var(--c-flightcase);
  transition:border-color var(--t-micro) var(--ease-etat);
}
.plateau button:hover{
  border-color:var(--c-laiton); border-left-color:var(--c-contrejour);
}
.plateau img{ width:100%; aspect-ratio:3/2; object-fit:cover }
.plateau figcaption{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-poursuite); margin-top:var(--s-2);
  line-height:1.45;
}
.compte-galerie{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-alu); margin-top:var(--s-5);
}

/* Lightbox */
.lb{
  position:fixed; inset:0; z-index:50; background:var(--a-voile);
  display:grid; place-items:center; padding:var(--s-5);
  opacity:0; visibility:hidden;
  transition:opacity var(--t-modal) var(--ease-etat),
             visibility var(--t-modal) var(--ease-etat);
}
.lb[data-ouvert="true"]{ opacity:1; visibility:visible }
.lb figure{ max-width:min(1100px,92vw); display:grid; gap:var(--s-3) }
.lb img{
  max-height:78svh; width:auto; margin-inline:auto;
  border:1px solid var(--c-flightcase); box-shadow:var(--sh-lightbox);
}
.lb figcaption{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-poursuite); text-align:center;
}
.lb .cmd{
  position:absolute; top:var(--s-4); right:var(--s-4);
  display:flex; gap:var(--s-2);
}
.lb .cmd button,.lb .fleche{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--c-flightcase); color:var(--c-alu);
  font-family:var(--ff-mono); font-size:16px; background:var(--c-molleton);
  transition:color var(--t-micro) var(--ease-etat),
             border-color var(--t-micro) var(--ease-etat);
}
.lb .cmd button:hover,.lb .fleche:hover{
  color:var(--c-regie); border-color:var(--c-laiton);
}
.lb .fleche{ position:absolute; top:50%; transform:translateY(-50%) }
.lb .prec{ left:var(--s-3) } .lb .suiv{ right:var(--s-3) }

/* ═════════════════════════════════ BLOC 8 — ZONE ═══════════ */
.zone{ text-align:center }
.zone .villes{
  font-size:19px; line-height:1.8; color:var(--c-alu);
  max-width:44em; margin-inline:auto;
}
.zone .villes b{ color:var(--c-regie); font-weight:400 }
.zone .villes .pastille{
  display:inline-block; width:6px; height:6px; background:var(--c-laiton);
  margin-right:var(--s-2); vertical-align:middle;
}
.zone .loin{
  font-size:clamp(1.75rem,4vw,3rem); font-weight:800; font-stretch:115%;
  text-transform:uppercase; line-height:1.1; letter-spacing:-.01em;
  color:var(--c-regie); margin-top:var(--s-6); max-width:16em;
  margin-inline:auto;
}

/* ═════════════════════════════════ BLOC 9 — CONTACT ════════ */
.contact-grille{ display:grid; gap:var(--s-8) }
.canaux{ display:grid; gap:var(--s-5); align-content:start }
.canal-tel{
  display:block; font-size:28px; font-weight:700; color:var(--c-laiton);
  font-variant-numeric:tabular-nums; padding-bottom:var(--s-3);
  border-bottom:1px solid var(--c-flightcase); letter-spacing:-.01em;
  transition:color var(--t-micro) var(--ease-etat);
}
.canal-tel:hover{ color:var(--c-gerbe) }
.canal-mail{
  display:block; font-size:17px; color:var(--c-regie);
  padding-bottom:var(--s-3); border-bottom:1px solid var(--c-flightcase);
  word-break:break-word;
  transition:color var(--t-micro) var(--ease-etat);
}
.canal-mail:hover{ color:var(--c-laiton) }
.dirigeants{ display:grid; gap:var(--s-1) }
.promesse{ font-size:17px; color:var(--c-regie); max-width:30em }

form{ display:grid; gap:var(--s-4) }
.champ{ display:grid; gap:var(--s-2) }
.champ label{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-alu);
}
.champ label .obl{ color:var(--c-laiton) }
.champ input,.champ select,.champ textarea{
  width:100%; min-height:48px; padding:12px 14px;
  background:var(--c-molleton); border:1px solid var(--c-contour);
  border-radius:var(--r-1); color:var(--c-regie); font-size:16px;
  transition:border-color var(--t-micro) var(--ease-etat),
             box-shadow var(--t-micro) var(--ease-etat);
}
.champ textarea{ min-height:120px; resize:vertical; line-height:1.55 }
.champ input:focus-visible,.champ select:focus-visible,
.champ textarea:focus-visible{
  border-color:var(--c-laiton);
  box-shadow:inset 0 -2px 0 var(--c-laiton);
}
.champ input::placeholder,.champ textarea::placeholder{ color:var(--c-contour) }
.duo{ display:grid; gap:var(--s-4) }

details.technique{
  border:1px solid var(--c-flightcase); border-radius:var(--r-1);
  padding:var(--s-4);
}
details.technique summary{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-alu); cursor:pointer;
  min-height:24px; display:flex; align-items:center; gap:var(--s-2);
}
details.technique summary::marker{ color:var(--c-laiton) }
details.technique[open] summary{ margin-bottom:var(--s-4) }
details.technique .dedans{ display:grid; gap:var(--s-4) }

.pot-de-miel{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.retour-form{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; min-height:20px;
}
.retour-form.ok{ color:var(--c-laiton) }
.retour-form.ko{ color:#D2685A }

.conformite{
  margin-top:var(--s-7); padding-top:var(--s-5);
  border-top:1px solid var(--c-flightcase);
  display:grid; gap:var(--s-2);
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-alu);
}
.conformite li{ position:relative; padding-left:var(--s-4) }
.conformite li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:3px; height:3px; background:var(--c-laiton);
}

/* ═════════════════════════════════ BLOC 10 — PIED ══════════ */
.pied{ position:relative; padding-block:var(--s-8) var(--s-9) }
.pied::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:var(--g-or-metal); opacity:.30;
}
.pied .enveloppe{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--s-6); flex-wrap:wrap;
}
.identite{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em;
  line-height:1.7; color:var(--c-alu); text-transform:uppercase;
}
.identite a{ color:var(--c-alu) }
.identite a:hover{ color:var(--c-regie) }
.pied .marque-pied svg{ height:34px; width:auto; opacity:.9 }

/* ═════════════════════════════════ ASSISTANT ═══════════════ */
.pastille-chat{
  position:fixed; right:var(--s-4); bottom:var(--s-4); z-index:35;
  display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:48px; padding:12px 18px; border-radius:var(--r-1);
  background:var(--c-laiton); color:var(--c-cage);
  font-size:14px; font-weight:600; letter-spacing:.04em;
  transition:background var(--t-micro) var(--ease-etat);
}
.pastille-chat:hover{ background:var(--c-gerbe) }
.pastille-chat svg{ width:18px; height:18px }

.volet{
  position:fixed; right:0; bottom:0; z-index:46;
  width:min(400px,100vw); height:min(640px,100dvh);
  background:var(--c-molleton); border-left:1px solid var(--c-flightcase);
  border-top:1px solid var(--c-flightcase);
  display:grid; grid-template-rows:auto auto 1fr auto;
  transform:translateY(102%); visibility:hidden;
  transition:transform var(--t-modal) var(--ease-pont),
             visibility var(--t-modal) var(--ease-etat);
  padding:0;
}
.volet[data-ouvert="true"]{ transform:none; visibility:visible }
.volet .tete{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--c-flightcase);
}
.volet .tete .titre{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-regie);
}
.volet .tete button{
  margin-left:auto; width:44px; height:44px; display:grid; place-items:center;
  color:var(--c-alu); font-family:var(--ff-mono); font-size:18px;
}
.volet .identite-chat{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2);
  padding:var(--s-3) var(--s-5); border-bottom:1px solid var(--c-flightcase);
}
.volet .identite-chat input{
  min-height:40px; padding:8px 10px; font-size:14px;
  background:var(--c-cage); border:1px solid var(--c-flightcase);
  border-radius:var(--r-1); color:var(--c-regie);
}
.fil{
  overflow-y:auto; padding:var(--s-4) var(--s-5);
  display:grid; gap:var(--s-3); align-content:start;
}
.bulle{
  max-width:88%; padding:var(--s-3) var(--s-4); border-radius:var(--r-1);
  font-size:15px; line-height:1.55; white-space:pre-wrap;
}
.bulle.lui{ background:var(--c-cage); border:1px solid var(--c-flightcase); justify-self:start }
.bulle.moi{ background:var(--c-laiton); color:var(--c-cage); justify-self:end }
.bulle.equipe{
  background:var(--c-cage); border:1px solid var(--c-laiton); justify-self:start;
}
.bulle.equipe::before{
  content:"Réponse de l’équipe"; display:block; font-family:var(--ff-mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-laiton); margin-bottom:var(--s-2);
}
.suggestions{ display:flex; gap:var(--s-2); flex-wrap:wrap }
.suggestions button{
  padding:8px 12px; border:1px solid var(--c-flightcase);
  border-radius:var(--r-1); font-size:13px; color:var(--c-alu);
  text-align:left; transition:color var(--t-micro),border-color var(--t-micro);
}
.suggestions button:hover{ color:var(--c-regie); border-color:var(--c-laiton) }
.saisie{
  display:flex; gap:var(--s-2); padding:var(--s-4) var(--s-5);
  border-top:1px solid var(--c-flightcase);
}
.saisie input{
  flex:1; min-height:44px; padding:10px 12px; font-size:16px;
  background:var(--c-cage); border:1px solid var(--c-flightcase);
  border-radius:var(--r-1); color:var(--c-regie);
}
.saisie button{
  min-width:44px; min-height:44px; padding:0 var(--s-4);
  background:var(--c-laiton); color:var(--c-cage); border-radius:var(--r-1);
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase;
}

/* ═════════════════════════════════ RESPONSIVE ══════════════ */
@media (min-width:600px){
  :root{ --pad:var(--s-6) }
  .appel .num{ display:inline }
  .marque .nom{ display:inline }
  .faits .enveloppe{ grid-template-columns:repeat(3,1fr); gap:var(--s-6) }
  .fait{ border-bottom:none }
  .bande ul{
    grid-auto-columns:1fr; grid-template-columns:repeat(3,1fr);
    overflow:visible; scroll-snap-type:none;
  }
  .bande img{ height:180px }
  .fiches{ grid-template-columns:repeat(2,1fr) }
  .duo{ grid-template-columns:1fr 1fr }
  .points{ grid-template-columns:repeat(3,1fr) }
}

@media (min-width:900px){
  h1{ font-stretch:115% }
  .nav-bureau{ display:flex }
  .burger{ display:none }
  .fiches{ grid-template-columns:repeat(3,1fr) }
  .contact-grille{ grid-template-columns:1fr 1fr }
  .plan-boite{ aspect-ratio:16/10 }
  .points{ grid-template-columns:repeat(2,1fr) }
}

@media (min-width:1024px){
  .heros .enveloppe{ grid-template-columns:1.05fr 1fr; align-items:center }
  .metier{ grid-template-columns:1.2fr 1fr; gap:var(--s-8); align-items:center }
  .metier:nth-of-type(even) .visuel{ order:2 }
  .metier .circuit{ top:0 }
}

@media (min-width:1280px){
  :root{ --pad:var(--s-8); --rythme:var(--s-11) }
}

/* ═════════════════════════════════ MOUVEMENT RÉDUIT ════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  html{ scroll-behavior:auto }
  .monte{ opacity:1; transform:none }
  .filet-sec{ transform:scaleX(1) }
  /* L'égaliseur reste lisible comme signe, il cesse d'être un mouvement. */
  .eq i:nth-child(1){ transform:scaleY(1) }
  .eq i:nth-child(2){ transform:scaleY(.7) }
  .eq i:nth-child(3){ transform:scaleY(.85) }
}

@media print{
  .regie,.pastille-chat,.volet,.lb,#grain,.plan{ display:none!important }
  body{ background:#fff; color:#000 }
}
</style>

/* ═══════════════════════════════════════════════════════════════════════
   EXTENSION MULTI-PAGES — sous-menu, hub, pages prestations, effets.
   Même grammaire : l'or est un statut, le mouvement vient de la lumière.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sous-menu « Prestations » (bureau) ─────────────────────────────── */
.deroulant{ position:relative; display:flex; align-items:center }
.deroulant > a .chevron{
  width:8px; height:8px; margin-left:6px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t-micro) var(--ease-etat);
}
.deroulant:hover > a .chevron,
.deroulant:focus-within > a .chevron{ transform:rotate(-135deg) translateY(-1px) }
.sous-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,6px);
  min-width:240px; padding:var(--s-3) 0;
  background:rgba(16,19,24,.97); backdrop-filter:blur(14px);
  border:1px solid var(--c-flightcase);
  opacity:0; visibility:hidden;
  transition:opacity var(--t-objet) var(--ease-etat),
             transform var(--t-objet) var(--ease-pont),
             visibility var(--t-objet) var(--ease-etat);
}
.sous-menu::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:var(--g-or-metal); opacity:.35;
}
/* Pont invisible entre le lien et le panneau : le survol ne se coupe pas. */
.sous-menu::after{ content:""; position:absolute; inset:-12px 0 auto; height:12px }
.deroulant:hover .sous-menu,
.deroulant:focus-within .sous-menu{
  opacity:1; visibility:visible; transform:translate(-50%,0);
}
.sous-menu a{
  display:flex; align-items:baseline; gap:var(--s-3);
  padding:var(--s-3) var(--s-5); min-height:44px; align-items:center;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-alu); white-space:nowrap;
  transition:color var(--t-micro) var(--ease-etat),
             background var(--t-micro) var(--ease-etat);
}
.sous-menu a:hover{ color:var(--c-regie); background:var(--c-cage) }
.sous-menu a[aria-current="true"]{ color:var(--c-laiton) }
.sous-menu a .n{ color:var(--c-contour); font-size:10px }
.sous-menu a:hover .n{ color:var(--c-laiton) }
.sous-menu .tout{
  border-top:1px solid var(--c-flightcase); margin-top:var(--s-2);
  padding-top:var(--s-3); color:var(--c-poursuite);
}

/* ── Panneau mobile : sous-liens prestations ────────────────────────── */
.panneau .sous-lien{
  font-size:17px; font-weight:400; text-transform:none; letter-spacing:.02em;
  color:var(--c-alu); padding-block:var(--s-2); padding-left:var(--s-5);
  border-left:1px solid var(--c-flightcase);
}
.panneau .sous-lien b{
  font-family:var(--ff-mono); font-size:10px; color:var(--c-contour);
  font-weight:400; margin-right:var(--s-2);
}

/* ── En-tête des pages intérieures ──────────────────────────────────── */
.page-tete{
  padding-top:calc(56px + var(--s-8)); padding-bottom:var(--s-7);
  position:relative; overflow:hidden;
}
/* Le faisceau : un cône de lumière discret tombe du haut de la page.
   C'est le motif du plan de feu, réduit à une ambiance. */
.page-tete::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 42% at 78% 0%, rgba(232,200,116,.07), transparent 70%),
    radial-gradient(40% 34% at 12% 4%, rgba(74,127,165,.06), transparent 70%);
}
.page-tete .enveloppe{ display:grid; gap:var(--s-7); position:relative }
.fil-ariane{
  display:flex; flex-wrap:wrap; gap:var(--s-2);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-contour); margin-bottom:var(--s-5);
}
.fil-ariane a{ color:var(--c-alu); transition:color var(--t-micro) var(--ease-etat) }
.fil-ariane a:hover{ color:var(--c-regie) }
.fil-ariane .sep{ color:var(--c-contour) }
.page-tete h1{ font-size:clamp(2.1rem,4.4vw,3.6rem); margin-block:var(--s-4) }
.page-tete .actions{ display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-6) }
.page-photo{
  position:relative; border:1px solid var(--c-flightcase); overflow:hidden;
  aspect-ratio:4/3; background:var(--c-molleton);
}
.page-photo img{
  width:100%; height:112%; object-fit:cover; will-change:transform;
}
.page-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(15deg, rgba(8,9,11,.42), transparent 45%);
}
@media (min-width:1024px){
  .page-tete .enveloppe{ grid-template-columns:1.05fr 1fr; align-items:center }
}

/* ── Corps rédigé (markdown du cockpit) ─────────────────────────────── */
.redac{ max-width:44em }
.redac > p{ max-width:34em; margin-block:var(--s-4) }
.redac h2{
  font-size:clamp(1.4rem,2.6vw,2rem); margin:var(--s-8) 0 var(--s-4);
}
.redac h3{ margin:var(--s-6) 0 var(--s-3); color:var(--c-poursuite) }
.redac ul{
  display:grid; gap:var(--s-2); margin-block:var(--s-4);
  font-size:16px; color:var(--c-alu); line-height:1.6;
}
.redac li{ position:relative; padding-left:var(--s-4); max-width:38em }
.redac li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:3px; height:3px; background:var(--c-laiton);
}
.redac li b, .redac li strong{ color:var(--c-regie); font-weight:600 }
.redac strong{ color:var(--c-poursuite) }
.redac a{
  color:var(--c-laiton); border-bottom:1px solid rgba(200,164,91,.35);
  transition:color var(--t-micro) var(--ease-etat),
             border-color var(--t-micro) var(--ease-etat);
}
.redac a:hover{ color:var(--c-gerbe); border-bottom-color:var(--c-gerbe) }
.redac table{
  width:100%; border-collapse:collapse; margin-block:var(--s-5);
  font-size:15px;
}
.redac th{
  font-family:var(--ff-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-alu);
  text-align:left; padding:var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom:1px solid var(--c-flightcase);
}
.redac td{
  padding:var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom:1px solid var(--c-flightcase); vertical-align:baseline;
  color:var(--c-alu);
}
.redac td:first-child{ color:var(--c-regie); font-weight:600; white-space:nowrap }
.redac td:last-child{ color:var(--c-laiton); font-weight:600; white-space:nowrap }
.redac tbody tr{ transition:background var(--t-micro) var(--ease-etat) }
.redac tbody tr:hover{ background:var(--c-molleton) }
.redac .table-roule{ overflow-x:auto }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq{ display:grid; gap:var(--s-2); max-width:44em; margin-top:var(--s-6) }
.faq details{
  border:1px solid var(--c-flightcase); background:var(--c-molleton);
  transition:border-color var(--t-micro) var(--ease-etat);
}
.faq details[open]{ border-left:2px solid var(--c-laiton) }
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center;
  gap:var(--s-3); min-height:52px; padding:var(--s-3) var(--s-4);
  font-size:16px; font-weight:600; color:var(--c-regie);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; margin-left:auto; flex:none;
  font-family:var(--ff-mono); font-size:16px; color:var(--c-laiton);
  transition:transform var(--t-micro) var(--ease-etat);
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq .rep{
  padding:0 var(--s-4) var(--s-4); font-size:15px; line-height:1.62;
  color:var(--c-alu); max-width:40em;
}

/* ── Hub des prestations (liste interactive) ────────────────────────── */
.hub{ display:grid; gap:var(--s-6); padding-top:var(--s-6) }
.hub-liste{ display:grid }
.hub-ligne{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:var(--s-4); padding:var(--s-5) var(--s-2); position:relative;
  border-bottom:1px solid var(--c-flightcase);
  transition:background var(--t-micro) var(--ease-etat);
}
.hub-liste li:first-child .hub-ligne{ border-top:1px solid var(--c-flightcase) }
.hub-ligne::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--c-contrejour); transform:scaleY(0);
  transform-origin:top; transition:transform var(--t-objet) var(--ease-pont);
}
.hub-ligne:hover::before,.hub-ligne:focus-visible::before{ transform:scaleY(1) }
.hub-ligne:hover{ background:var(--c-molleton) }
.hub-num{
  font-size:12px; letter-spacing:.12em; color:var(--c-contour);
  transition:color var(--t-micro) var(--ease-etat);
}
.hub-ligne:hover .hub-num{ color:var(--c-laiton) }
.hub-texte{ display:grid; gap:2px; min-width:0 }
.hub-nom{
  font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:700;
  text-transform:uppercase; letter-spacing:-.005em; line-height:1.1;
  color:var(--c-regie); transition:color var(--t-micro) var(--ease-etat);
}
.hub-ligne:hover .hub-nom{ color:var(--c-poursuite) }
.hub-sous{ font-size:14px; color:var(--c-alu); max-width:34em }
.hub-fleche{
  font-family:var(--ff-mono); font-size:18px; color:var(--c-contour);
  transform:translateX(-6px); opacity:0;
  transition:transform var(--t-objet) var(--ease-pont),
             opacity var(--t-objet) var(--ease-etat),
             color var(--t-micro) var(--ease-etat);
}
.hub-ligne:hover .hub-fleche,.hub-ligne:focus-visible .hub-fleche{
  transform:none; opacity:1; color:var(--c-laiton);
}
.hub-photo-mobile{
  grid-column:1 / -1; width:100%; aspect-ratio:3/2; object-fit:cover;
  border:1px solid var(--c-flightcase); margin-top:var(--s-3);
}
.hub-apercu{ display:none }
@media (min-width:1024px){
  .hub{ grid-template-columns:1.15fr 1fr; align-items:start }
  .hub-photo-mobile{ display:none }
  .hub-apercu{
    display:block; position:sticky; top:calc(56px + var(--s-5));
    border:1px solid var(--c-flightcase); overflow:hidden; aspect-ratio:4/3;
    background:var(--c-molleton);
  }
  .hub-apercu img{
    width:100%; height:100%; object-fit:cover;
    transition:opacity var(--t-objet) var(--ease-etat),
               transform 1.2s var(--ease-pont);
  }
  .hub-apercu.change img{ opacity:0 }
}

/* ── Bande défilante (marquee) ──────────────────────────────────────── */
.rideau{
  border-block:1px solid var(--c-flightcase); background:var(--c-molleton);
  overflow:hidden; padding-block:var(--s-4); position:relative;
}
.rideau .piste{
  display:flex; gap:var(--s-7); width:max-content;
  animation:defiler 46s linear infinite;
}
.rideau:hover .piste{ animation-play-state:paused }
.rideau span{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--c-alu); white-space:nowrap;
  display:flex; align-items:center; gap:var(--s-7);
}
.rideau b{ color:var(--c-laiton); font-weight:500 }
.rideau i{ font-style:normal; color:var(--c-contour) }
@keyframes defiler{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Le héros : titre ligne à ligne, photo qui respire ──────────────── */
.js .heros h1 span,
.js .page-tete h1 span{
  display:block; opacity:0; transform:translateY(16px);
  transition:opacity var(--t-max) var(--ease-pont),
             transform var(--t-max) var(--ease-pont);
}
.js .heros h1 span:nth-child(2),
.js .page-tete h1 span:nth-child(2){ transition-delay:.09s }
.js .heros h1 span:nth-child(3),
.js .page-tete h1 span:nth-child(3){ transition-delay:.18s }
.js .heros.vu h1 span,
.js .page-tete.vu h1 span{ opacity:1; transform:none }

/* ── Reflet doré au survol des cartes (fiche, teaser, plateau) ──────── */
.fiche,.plateau button,.grille-mascottes button{ position:relative; overflow:hidden }
.fiche::after,.plateau button::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%,
             rgba(232,200,116,.10) 50%, transparent 58%);
  transform:translateX(-120%);
}
.fiche:hover::after,.plateau button:hover::after{
  transform:translateX(120%);
  transition:transform .7s var(--ease-pont);
}
.plateau img,.grille-mascottes img,.bande img,.teaser-galerie img{
  transition:transform .8s var(--ease-pont), filter .5s var(--ease-etat);
}
.plateau button:hover img,.grille-mascottes button:hover img,
.teaser-galerie a:hover img{ transform:scale(1.04) }

/* ── Teaser galerie de l'accueil ────────────────────────────────────── */
.teaser-galerie{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-2);
}
.teaser-galerie a{
  display:block; position:relative; overflow:hidden;
  border:1px solid var(--c-flightcase); aspect-ratio:3/2;
}
.teaser-galerie img{ width:100%; height:100%; object-fit:cover }
.teaser-galerie .plus{
  display:grid; place-items:center; text-align:center;
  background:var(--c-molleton); aspect-ratio:3/2;
  border:1px solid var(--c-flightcase);
  transition:border-color var(--t-micro) var(--ease-etat);
}
.teaser-galerie .plus:hover{ border-color:var(--c-laiton) }
.teaser-galerie .plus span{
  display:grid; gap:var(--s-2); justify-items:center;
}
.teaser-galerie .plus .mono{
  font-size:26px; font-weight:700; color:var(--c-laiton);
}
.teaser-galerie .plus .l{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-alu);
}
@media (min-width:900px){
  .teaser-galerie{ grid-template-columns:repeat(4,1fr) }
}

/* ── Bandeau photo des pages prestations ────────────────────────────── */
.plateau-page{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) }

/* ── Appel final des pages intérieures ──────────────────────────────── */
.cta-fin{
  margin-top:var(--s-9); border:1px solid var(--c-flightcase);
  background:var(--c-molleton); position:relative; overflow:hidden;
  padding:var(--s-7) var(--s-6); display:grid; gap:var(--s-4);
  justify-items:start;
}
.cta-fin::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:var(--g-or-metal); opacity:.4;
}
.cta-fin::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 85% 0%, rgba(232,200,116,.06), transparent 70%);
}
.cta-fin h2{ font-size:clamp(1.5rem,3vw,2.2rem); max-width:18em }
.cta-fin p{ color:var(--c-alu); max-width:34em }
.cta-fin .actions{ display:flex; gap:var(--s-3); flex-wrap:wrap; position:relative }

/* ── Maillage : les autres prestations ──────────────────────────────── */
.suite{ margin-top:var(--s-8) }
.suite .kicker{ margin-bottom:var(--s-4); display:block }
.suite-grille{
  display:grid; gap:var(--s-2);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.suite-grille a{
  display:grid; gap:var(--s-1); padding:var(--s-4);
  border:1px solid var(--c-flightcase); border-left-width:2px;
  transition:border-color var(--t-micro) var(--ease-etat),
             background var(--t-micro) var(--ease-etat);
}
.suite-grille a:hover{
  border-color:var(--c-laiton); border-left-color:var(--c-contrejour);
  background:var(--c-molleton);
}
.suite-grille .n{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em;
  color:var(--c-contour);
}
.suite-grille .t{
  font-weight:600; font-size:16px; text-transform:uppercase;
  letter-spacing:.01em; color:var(--c-regie);
}

/* ── Mouvement réduit : les extensions s'éteignent aussi ────────────── */
@media (prefers-reduced-motion:reduce){
  .rideau .piste{ animation:none }
  .heros h1 span{ opacity:1!important; transform:none!important }
  .page-photo img{ transform:none!important }
  .fiche::after,.plateau button::after{ display:none }
}

/* ═══════════════════════════════════════════════════════════════════════
   V2 — vidéo de présentation, pied de page Labodev, cinéma au défilement.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La vidéo du héros ──────────────────────────────────────────────── */
.video-boite{ position:relative; overflow:hidden }
.video-boite video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:var(--c-cage);
}
.video-boite::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid rgba(200,164,91,.16);
}

/* ── Pied de page ───────────────────────────────────────────────────── */
.pied{ overflow:hidden }
.pied-grille{
  display:grid; gap:var(--s-7); grid-template-columns:1fr;
  position:relative; z-index:1;
}
.pied-marque .identite{ margin-top:var(--s-4) }
.pied-nav{ display:grid; gap:var(--s-2); align-content:start; justify-items:start }
.pied-nav .kicker,.pied-contact .kicker{ margin-bottom:var(--s-2) }
.pied-nav a{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-alu); padding-block:2px;
  transition:color var(--t-micro) var(--ease-etat);
}
.pied-nav a:hover{ color:var(--c-laiton) }
.pied-contact{ display:grid; gap:var(--s-4); align-content:start }
.pied-contact .canal-tel{ font-size:24px }
.pied-bas{
  position:relative; z-index:1;
  margin-top:var(--s-7); padding-top:var(--s-5);
  border-top:1px solid var(--c-flightcase);
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--s-5); flex-wrap:wrap;
}
.credit{ white-space:nowrap }
.credit a{
  color:var(--c-laiton); border-bottom:1px solid rgba(200,164,91,.35);
  transition:color var(--t-micro) var(--ease-etat);
}
.credit a:hover{ color:var(--c-gerbe) }
.pied-filigrane{
  position:absolute; right:-3%; bottom:-18%; width:min(560px,55vw);
  opacity:.05; pointer-events:none; z-index:0;
}
.pied-filigrane svg{ width:100%; height:auto }
@media (min-width:900px){
  .pied-grille{ grid-template-columns:1.2fr .9fr 1fr }
}

/* ── Second rideau, sens inverse ────────────────────────────────────── */
.rideau.inverse{ background:var(--c-cage) }
.rideau.inverse .piste{ animation-direction:reverse; animation-duration:54s }

/* ── Révélation cinéma des images : le cadre s'ouvre, l'image pose ──── */
.js .bande img,
.js .fiche > img,
.js .teaser-galerie a img{
  clip-path:inset(14% 0 0 0);
  transform:scale(1.06);
  transition:clip-path .9s var(--ease-pont),
             transform 1.2s var(--ease-pont),
             filter .5s var(--ease-etat);
}
.js .bande.vu img,
.js .fiche.vu > img,
.js .vu .teaser-galerie a img{
  clip-path:inset(0 0 0 0); transform:scale(1);
}
/* Le survol reprend la main après la révélation. */
.js .vu .teaser-galerie a:hover img{ transform:scale(1.04) }

/* ── Le héros s'éteint quand on descend (piloté par app.js) ─────────── */
.heros .enveloppe{ will-change:transform, opacity }

@media (prefers-reduced-motion:reduce){
  .js .bande img,.js .fiche > img,.js .teaser-galerie a img{
    clip-path:none!important; transform:none!important;
  }
  .rideau.inverse .piste{ animation:none }
}

/* ═══════════════════════════════════════════════════════════════════════
   CARROUSEL 3D DE LA GALERIE — un éventail de cartes en perspective.
   La carte active fait face ; ses voisines s'inclinent et reculent dans
   l'ombre, chacune portant son numéro en or et son reflet au sol.
   ═══════════════════════════════════════════════════════════════════════ */
.carrousel3d{ display:grid; gap:var(--s-4) }
.c3-scene{
  position:relative; height:min(58vw,540px);
  perspective:1500px; perspective-origin:50% 42%;
}
.c3-piste{
  position:absolute; inset:0; transform-style:preserve-3d; list-style:none;
}
.c3-carte{
  position:absolute; left:50%; top:46%;
  width:min(58vw,560px); aspect-ratio:3/2;
  background:var(--c-molleton); border:1px solid var(--c-flightcase);
  transform:translate(-50%,-50%) translateZ(-900px);
  opacity:0; pointer-events:none;
  transition:transform .7s var(--ease-pont),
             opacity .55s var(--ease-etat),
             filter .7s var(--ease-etat);
  will-change:transform;
  -webkit-box-reflect:below 14px
    linear-gradient(transparent 58%, rgba(0,0,0,.32));
}
.c3-carte img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.c3-carte::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid rgba(200,164,91,0);
  background:linear-gradient(200deg, rgba(8,9,11,.0) 55%, rgba(8,9,11,.35));
  transition:border-color .5s var(--ease-etat);
}
.c3-num{
  position:absolute; top:var(--s-3); left:var(--s-4); z-index:2;
  font-size:clamp(26px,3.4vw,40px); font-weight:500;
  letter-spacing:.14em; color:var(--c-laiton);
  text-shadow:0 2px 14px rgba(8,9,11,.8);
  opacity:.55; transition:opacity .5s var(--ease-etat);
}
/* Les cinq places de l'éventail. Tout le reste attend dans le noir. */
.c3-carte[data-pos="0"]{
  transform:translate(-50%,-50%) translateZ(150px);
  opacity:1; pointer-events:auto; z-index:5; filter:brightness(1);
}
.c3-carte[data-pos="0"]::after{ border-color:rgba(200,164,91,.35) }
.c3-carte[data-pos="0"] .c3-num{ opacity:1 }
.c3-carte[data-pos="1"]{
  transform:translate(calc(-50% + 40%),-50%) rotateY(-40deg) translateZ(-190px);
  opacity:1; pointer-events:auto; z-index:4; filter:brightness(.5);
}
.c3-carte[data-pos="-1"]{
  transform:translate(calc(-50% - 40%),-50%) rotateY(40deg) translateZ(-190px);
  opacity:1; pointer-events:auto; z-index:4; filter:brightness(.5);
}
.c3-carte[data-pos="2"]{
  transform:translate(calc(-50% + 68%),-50%) rotateY(-52deg) translateZ(-420px);
  opacity:.7; pointer-events:auto; z-index:3; filter:brightness(.3);
}
.c3-carte[data-pos="-2"]{
  transform:translate(calc(-50% - 68%),-50%) rotateY(52deg) translateZ(-420px);
  opacity:.7; pointer-events:auto; z-index:3; filter:brightness(.3);
}
.c3-carte[data-pos="3"]{
  transform:translate(calc(-50% + 88%),-50%) rotateY(-58deg) translateZ(-680px);
  opacity:0; z-index:2;
}
.c3-carte[data-pos="-3"]{
  transform:translate(calc(-50% - 88%),-50%) rotateY(58deg) translateZ(-680px);
  opacity:0; z-index:2;
}
.c3-carte:hover .c3-num{ opacity:1 }
.c3-fleche{
  position:absolute; top:42%; transform:translateY(-50%); z-index:10;
  width:52px; height:52px; display:grid; place-items:center;
  border:1px solid var(--c-flightcase); color:var(--c-regie);
  font-family:var(--ff-mono); font-size:22px;
  background:rgba(8,9,11,.6); backdrop-filter:blur(6px);
  transition:color var(--t-micro) var(--ease-etat),
             border-color var(--t-micro) var(--ease-etat),
             background var(--t-micro) var(--ease-etat);
}
.c3-fleche:hover{
  color:var(--c-cage); border-color:var(--c-laiton);
  background:var(--c-laiton);
}
.c3-prec{ left:0 } .c3-suiv{ right:0 }
.carr-progression{
  position:absolute; left:12%; right:12%; bottom:0; height:2px; z-index:10;
  background:var(--g-or-metal); transform:scaleX(0); transform-origin:left;
}
.c3-pied{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s-4); padding-inline:var(--s-2);
}
.c3-leg{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-poursuite); min-width:0; overflow-wrap:break-word;
}
.c3-compte{
  font-size:12px; letter-spacing:.14em; color:var(--c-laiton);
  font-variant-numeric:tabular-nums; flex:none;
}
@media (max-width:640px){
  .c3-carte[data-pos="2"],.c3-carte[data-pos="-2"]{ opacity:0 }
  .c3-fleche{ width:44px; height:44px }
}
@media (prefers-reduced-motion:reduce){
  .c3-carte{ transition:opacity .2s linear }
  .carr-progression{ display:none }
}