/* =========================================================
   SIMULATEUR HÉLICO — Versonnex (74)
   Feuille de style unique. Polices auto-hébergées (RGPD).
   ========================================================= */

/* ---------- POLICES ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/instrument-sans-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/instrument-sans-600.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/instrument-sans-700.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrains-mono-var.woff2') format('woff2-variations');
  font-weight: 100 800; font-display: swap;
}

/* ---------- JETONS ---------- */
:root {
  --nuit:    #080C18;
  --acier:   #101728;
  --acier2:  #17203A;
  --trace:   #253150;
  --vitre:   #EEF2FA;
  --sourd:   #8B99B8;
  --route:    #9D5CFF;   /* violet — accent principal */
  --route-d:  #5E36A8;
  --route-txt: #D4BCFF;  /* violet clair : pour les PETITS textes, lisible sur fond sombre */
  --ambre:   #FFC24D;   /* ambre instrument — sol / préparation */
  --ambre-d: #7A5A20;

  --lg: min(1240px, 92vw);
  --pad: clamp(56px, 7vw, 104px);

  --f-disp: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'Instrument Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--nuit);
  position: relative;
  color: var(--vitre);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fond d'écran : une photo par section. Chaque bloc porte son image dans --f.
   Pour changer une photo : modifier le style="--f:url('assets/img/...')" de la section. */
/* La photo est affichée ENTIÈRE, sur toute la largeur, en haut de la section,
   puis se fond dans le bleu nuit. Elle n'est plus agrandie ni recadrée.
   Le rapport largeur/hauteur de chaque photo est donné plus bas (aspect-ratio). */
.hero, .sec, .cta { position: relative; z-index: 0; isolation: isolate; overflow: hidden; }
.hero::before, .sec::before, .cta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: -2;
  aspect-ratio: 16/9;
  background-image: var(--f); background-position: top center; background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
          mask-image: linear-gradient(#000 72%, transparent);
}
[style*="fond-accueil"]::before    { aspect-ratio: 1619/1000; } /* Annecy, Cabri */
[style*="fond-atelier"]::before    { aspect-ratio: 1546/1000; } /* Lama, coucher de soleil */
[style*="fond-boutique"]::before   { aspect-ratio: 1613/1000; } /* Morzine sous la neige */
[style*="fond-cadeau"]::before     { aspect-ratio: 1611/987; }  /* Las Vegas de nuit */
[style*="fond-contact"]::before    { aspect-ratio: 1619/1000; } /* Courchevel, EC145 */
[style*="fond-experience"]::before { aspect-ratio: 1614/1000; } /* Las Vegas, The Sphere */
[style*="fond-formules"]::before   { aspect-ratio: 1400/973; }  /* Lama jaune en vol, retourné, cabine à droite */
.hero::after, .sec::after, .cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(8,12,24,.20);
}
.hero, .sec, .cta { background-color: var(--nuit); }
/* Section sans photo de fond : seul le bleu nuit du site reste.
   Pour lui en donner une, ajouter style="--f:url('assets/img/mon-image.jpg')". */
.sec.sans-fond::before { display: none; }
.sec.sans-fond::after { background: var(--nuit); }
.nav, .strip, .cell, .fiche, .card, .note, footer, .opt { position: relative; }

img, video { max-width: 100%; display: block; }
a { color: inherit; }

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

::selection { background: var(--route); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ambre); color: var(--nuit); padding: 12px 20px; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- TYPOGRAPHIE ---------- */
.disp {
  font-family: var(--f-disp);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.005em;
  line-height: 0.96;
}
.mono {
  font-family: var(--f-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 11.5px;
}

h1, h2, h3 { font-family: var(--f-disp); font-weight: 800; font-stretch: 112%;
             line-height: 1.04; letter-spacing: -0.012em;
             text-shadow: 0 1px 3px rgba(8,12,24,1), 0 3px 14px rgba(8,12,24,.98), 0 0 42px rgba(8,12,24,.92); }
.cell h3, .fiche h3, .card h3, .vign h3, .faq summary, .doc h2, .doc h3 { text-shadow: none; }
h1 { font-size: clamp(27px, 4.3vw, 50px); }
h2 { font-size: clamp(21px, 2.9vw, 36px); }
h3 { font-size: clamp(16px, 1.8vw, 21px); font-stretch: 110%; }

p { text-wrap: pretty; }
.lead { font-size: clamp(17px, 1.55vw, 20px); color: #C3CDE4; max-width: 58ch;
        text-shadow: 0 1px 3px rgba(8,12,24,1), 0 2px 12px rgba(8,12,24,.98), 0 0 34px rgba(8,12,24,.9); }

/* ---------- BANDEAU BROUILLON (à supprimer en production) ---------- */
#brouillon {
  background: repeating-linear-gradient(45deg, #241a06, #241a06 12px, #2b1f08 12px, #2b1f08 24px);
  border-bottom: 1px solid var(--ambre-d);
  color: var(--ambre);
  padding: 9px 4vw;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center;
}

/* ---------- NAVIGATION ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,12,24,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trace);
}
.nav-in {
  width: var(--lg); margin-inline: auto;
  display: flex; align-items: center; gap: 28px;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand-ic { width: 96px; height: auto; flex: none; }
.brand-tx { font-family: var(--f-disp); font-weight: 800; font-stretch: 120%;
            font-size: 20px; letter-spacing: 0.005em; line-height: 1; }
.brand-tx em { font-style: normal; color: var(--route); }
.brand-sub { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.18em;
             color: var(--sourd); text-transform: uppercase; display: block; margin-top: 3px; }

.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sourd); text-decoration: none;
  padding: 6px 0; border-bottom: 1px solid transparent; transition: color .18s, border-color .18s;
}
.nav-links a:hover { color: var(--vitre); border-bottom-color: var(--route); }
.nav-links a[aria-current="page"] { color: var(--vitre); border-bottom-color: var(--route); }

.nav-cta {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--route); color: #fff !important; text-decoration: none;
  padding: 11px 18px; border-radius: 2px; white-space: nowrap;
  transition: background .18s;
}
.nav-cta:hover { background: #B27FFF; }

.burger { display: none; background: none; border: 1px solid var(--trace); color: var(--vitre);
          width: 40px; height: 36px; border-radius: 2px; cursor: pointer; font-size: 15px; }

@media (max-width: 940px) {
  .burger { display: block; order: 3; }
  .brand-sub { display: none; }
  .brand-tx { font-size: 18px; }
  .brand svg { width: 25px; height: 25px; }
  .brand-ic { width: 78px; }
  .nav-links {
    order: 4; width: 100%; display: none; flex-direction: column; align-items: stretch;
    gap: 0; padding-bottom: 14px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--trace); font-size: 13px; }
  .nav-in { flex-wrap: wrap; padding-block: 12px; gap: 10px; }
  .nav-cta { order: 2; padding: 10px 14px; font-size: 11px; }
}

/* ---------- BOUTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 2px; text-decoration: none; border: 1px solid transparent;
  transition: transform .16s, background .16s, border-color .16s;
}
.btn:hover { transform: translateY(-2px); }
.btn-1 { background: var(--route); color: #fff; }
.btn-1:hover { background: #B27FFF; }
.btn-2 { border-color: var(--trace); color: var(--vitre); }
.btn-2:hover { border-color: var(--sourd); }
.btn-3 { background: var(--route); color: #fff; }
.btn-3:hover { background: #B27FFF; }

/* ---------- MISE EN PAGE ---------- */
.wrap { width: var(--lg); margin-inline: auto; }
.sec { padding-block: var(--pad); }
.sec + .sec { border-top: 1px solid var(--trace); }

/* Petite étiquette au-dessus des titres : pastille violette pleine, texte blanc,
   pour rester lisible sur n'importe quelle photo de fond. */
.eyebrow {
  font-family: var(--f-mono); font-size: 13.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: #7440D6; border-radius: 3px; padding: 7px 14px;
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  box-shadow: 0 2px 14px rgba(8,12,24,.55);
}
.blason { width: 17px; height: auto; flex: none; vertical-align: -2px; }

.sec-head { margin-bottom: 44px; }
.sec-head p { max-width: 62ch; }
.sec-head p { color: #C3CDE4; margin-top: 16px; max-width: 62ch;
             text-shadow: 0 1px 3px rgba(8,12,24,1), 0 2px 12px rgba(8,12,24,.98), 0 0 34px rgba(8,12,24,.9); }

/* ---------- HERO ---------- */
.hero { border-bottom: 1px solid var(--trace); }
.hero-in {
  width: var(--lg); margin-inline: auto;
  display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(28px, 4vw, 64px);
  align-items: center; padding-block: clamp(44px, 6vw, 76px);
}
/* variante : la photo à gauche, le texte à droite */
.hero-in.hero-inverse { grid-template-columns: .82fr 1.18fr;
}
.hero h1 { margin-bottom: 20px; font-size: clamp(30px, 3.8vw, 48px); letter-spacing: -0.018em; }
.hero h1 em { font-style: normal; color: inherit; }
.hero-p { color: #D3DBEE; font-size: clamp(16px, 1.5vw, 19px); max-width: 44ch; margin-bottom: 30px;
          text-shadow: 0 1px 3px rgba(8,12,24,1), 0 2px 12px rgba(8,12,24,.98), 0 0 34px rgba(8,12,24,.9); }
.hero-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-acts .btn { min-width: 186px; justify-content: center; }
.hero-note { font-family: var(--f-body); font-size: 14.5px; color: #B6C1DC;
             text-shadow: 0 1px 3px rgba(8,12,24,1), 0 2px 12px rgba(8,12,24,.98), 0 0 34px rgba(8,12,24,.9); }

.hero-media { position: relative; align-self: start; }
.hero-media img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 505px;
  border-radius: 3px; border: 1px solid var(--trace);
}
.hero-badge {
  position: absolute; left: -14px; bottom: 22px;
  background: var(--nuit); border: 1px solid var(--route-d); border-left: 3px solid var(--route);
  padding: 12px 16px; max-width: 235px;
}
.hero-badge b { font-family: var(--f-disp); font-stretch: 110%; font-size: 16px; display: block; }
.hero-badge span { font-family: var(--f-body); font-size: 13.5px; color: var(--sourd); }

@media (max-width: 880px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-badge { left: 0; }
}

/* ---------- BANDE INSTRUMENTS ---------- */
.strip { border-bottom: 1px solid var(--trace); background: rgba(12,17,32,.95); }
.strip-in { width: var(--lg); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.strip-in.strip-3 { grid-template-columns: repeat(3, 1fr); }
.inst { padding: 26px 18px; border-right: 1px solid var(--trace);
        display: flex; align-items: center; justify-content: center; text-align: center; }
.inst:last-child { border-right: 0; }
.inst-k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
          color: var(--sourd); text-transform: uppercase; margin-bottom: 8px; }
.inst-t { font-family: var(--f-disp); font-weight: 700; font-stretch: 110%;
          font-size: clamp(15px, 1.4vw, 18px); line-height: 1.2; color: var(--vitre); }
a.inst-lien { text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
              border-bottom: 1px solid var(--route-d); padding-bottom: 3px; transition: color .18s, border-color .18s; }
a.inst-lien::after { content: '↓'; color: var(--route); font-size: .85em; }
a.inst-lien:hover { color: #C09BFF; border-color: var(--route); }
.inst-v { font-family: var(--f-disp); font-weight: 800; font-stretch: 112%; font-size: 24px;
          line-height: 1.1; }
.inst-v small { font-family: var(--f-body); font-size: 13.5px; letter-spacing: 0;
                color: var(--sourd); margin-left: 7px; font-weight: 400; }
@media (max-width: 760px) {
  .strip-in, .strip-in.strip-3 { grid-template-columns: 1fr; }
  .inst { border-right: 0 !important; border-bottom: 1px solid var(--trace); }
  .inst:last-child { border-bottom: 0; }
  .inst { padding: 20px 14px; }
  .inst:nth-child(2) { border-right: 0; }
  .inst:nth-child(-n+2) { border-bottom: 1px solid var(--trace); }
}

/* =========================================================
   SIGNATURE : LA BANDE DE TEMPS (préparation / vol / débriefing)
   ========================================================= */
.tl { margin: 13px 0 2px; }
.tl-track {
  display: flex; height: 30px; border-radius: 2px; overflow: hidden;
  width: calc(var(--total) / 90 * 100%);
  min-width: 118px;
  border: 1px solid var(--trace);
}
.tl-seg {
  flex: var(--m) 1 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.04em;
  overflow: hidden; white-space: nowrap;
}
.tl-brf, .tl-dbr {
  background: repeating-linear-gradient(-45deg, #1b2338, #1b2338 5px, #202942 5px, #202942 10px);
  color: var(--ambre);
}
.tl-vol { background: var(--route); color: #fff; font-weight: 700; clip-path: inset(0 0 0 0); }
.tl.in .tl-vol { animation: revealVol .85s cubic-bezier(.2,.8,.25,1) both; }
@keyframes revealVol { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Règle graduée : ticks à 0 / 30 / 60 / 90 min sur toute la largeur */
.tl-rule { position: relative; height: 19px; margin-top: 6px; border-top: 1px solid var(--trace); }
.tl-rule span {
  position: absolute; top: 0; padding: 5px 0 0 5px;
  border-left: 1px solid var(--trace); height: 14px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--sourd); white-space: nowrap;
}
.tl-rule span:nth-child(1) { left: 0; }
.tl-rule span:nth-child(2) { left: 33.333%; }
.tl-rule span:nth-child(3) { left: 66.666%; }
.tl-rule span:nth-child(4) { right: 0; border-left: 0; padding-left: 0; }
.tl-total {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ambre); margin-top: 12px;
}

/* ---------- FICHES FORMULES ---------- */
.fiches { display: grid; gap: 18px; }
.fiche {
  background: rgba(12,17,32,.60);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--trace); border-radius: 3px;
  display: grid; grid-template-columns: 1fr minmax(220px, 270px);
  overflow: hidden;
}
.fiche-main { padding: 18px 22px; border-right: 1px solid var(--trace); }
.fiche-side { padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.fiche { border-color: var(--route-d); }
.fiche .fiche-main { background: linear-gradient(100deg, rgba(157,92,255,.10), transparent 62%); }
.fiche h3, .fiche .prix { text-shadow: 0 1px 10px rgba(8,12,24,.92); }
.fiche-main { border-right-color: var(--route-d); }

.fiche-tag {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--sourd); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.pill {
  background: var(--route); color: #fff; padding: 3px 9px; border-radius: 2px;
  font-weight: 700; letter-spacing: 0.1em;
}
.pill-a { background: none; color: var(--ambre); border: 1px solid var(--ambre-d); }
.fiche h3 { margin-bottom: 4px; }
.fiche-sub { color: var(--sourd); font-size: 15px; }
.fiche ul { list-style: none; padding: 0; margin: 12px 0 0;
           display: grid; grid-template-columns: 1fr 1fr; gap: 5px 24px; }
.fiche li { font-size: 15px; padding-left: 20px; position: relative; color: var(--vitre); }
.fiche li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 7px; height: 7px; border-right: 1.5px solid var(--route); border-bottom: 1.5px solid var(--route);
  transform: rotate(-45deg);
}
.prix { font-family: var(--f-disp); font-weight: 800; font-stretch: 118%; font-size: 42px; line-height: 1; }
.prix small { font-family: var(--f-body); font-size: 14px; letter-spacing: 0;
              color: var(--sourd); display: block; margin-top: 8px; font-weight: 400; }
.prix del { color: var(--sourd); font-size: 20px; font-weight: 500; }

@media (max-width: 820px) {
  .fiche { grid-template-columns: 1fr; }
  .fiche-main { border-right: 0; border-bottom: 1px solid var(--trace); }
}

/* ---------- GRILLES GÉNÉRIQUES ---------- */
.sous-titre {
  font-family: var(--f-disp); font-weight: 700; font-stretch: 110%;
  font-size: clamp(16px, 1.7vw, 20px); color: var(--vitre);
  margin: 40px 0 16px;
}
.sous-titre:first-of-type { margin-top: 0; }
.sous-titre { text-shadow: 0 1px 3px rgba(8,12,24,1), 0 3px 14px rgba(8,12,24,.98), 0 0 40px rgba(8,12,24,.9); }
/* vignettes d'appareils et de lieux : image au-dessus, hauteur égale pour toutes */
.vign { padding: 0; display: flex; flex-direction: column; }
.vign img, .vign-attente { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; flex: none; }
.vign-attente {
  background: repeating-linear-gradient(-45deg, #141d33, #141d33 9px, #18223c 9px, #18223c 18px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--sourd);
}
.vign h3, .vign p { padding-inline: 24px; }
.vign h3 { margin-top: 20px; }
.vign p { padding-bottom: 24px; }
.vign > h3:first-child { margin-top: 24px; }

/* Cases semi-transparentes : la photo de fond reste visible derrière le texte */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 10px; }
.cell { background: rgba(12,17,32,.58); padding: 26px 24px;
        border: 1px solid var(--trace); border-radius: 3px;
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vign { overflow: hidden; }
.cell h3 { margin-bottom: 10px; font-size: 18px; }
.cell p { color: var(--sourd); font-size: 15px; }
.cell-n { font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
          color: var(--route-txt); margin-bottom: 12px; display: block; }

/* ---------- TABLEAU SPECS ---------- */
.specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.specs th, .specs td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--trace);
                       vertical-align: top; }
.specs th { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.02em;
            color: var(--vitre); font-weight: 500; width: 200px; }
.specs td { color: var(--vitre); }
@media (max-width: 620px) {
  .specs th { width: 130px; font-size: 9.5px; }
  .specs td { font-size: 14px; }
}

/* ---------- GALERIE ---------- */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gal figure { margin: 0; position: relative; overflow: hidden; border-radius: 3px;
              border: 1px solid var(--trace); background: var(--acier); }
.gal img, .gal video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4;
                       transition: transform .5s ease; }
.gal figure:hover img { transform: scale(1.045); }
.gal .wide { grid-column: span 2; }
.gal .wide img { aspect-ratio: 3/2; }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px;
  background: linear-gradient(to top, rgba(8,12,24,.94), transparent);
  font-family: var(--f-body); font-size: 13px; color: var(--vitre);
}
@media (max-width: 880px) { .gal { grid-template-columns: repeat(2, 1fr); }
                            .gal .wide { grid-column: span 2; } }

/* ---------- ENCADRÉS ---------- */
.note {
  border-left: 3px solid var(--ambre); background: rgba(12,17,32,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 20px 24px; border-radius: 0 3px 3px 0; font-size: 15px; color: var(--vitre);
}
.note b { color: var(--ambre); }
.note-r { border-left-color: var(--route); }
.note-r b { color: var(--route-txt); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--trace); }
.faq details { border-bottom: 1px solid var(--trace); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-family: var(--f-disp); font-weight: 700; font-stretch: 108%;
  font-size: clamp(15px, 1.55vw, 19px); line-height: 1.28;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 19px; color: var(--route); transition: transform .2s;
}
.faq details[open] summary::after { content: '–'; }

.faq .ans { padding: 0 44px 24px 0; color: #E3E9F5; font-size: 15.5px; max-width: 76ch; }
.faq .ans p + p { margin-top: 12px; }
.faq .ans ul { margin: 12px 0 0; padding-left: 20px; }
.faq .ans li { margin-bottom: 6px; }
.faq .ans strong { color: #FFFFFF; }
.faq-grp { font-family: var(--f-mono); font-size: 13.5px; font-weight: 700; letter-spacing: 0.06em;
           color: var(--route-txt); padding: 34px 0 12px; }

/* ---------- BON CADEAU ---------- */
.gift-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (max-width: 880px) { .gift-grid { grid-template-columns: 1fr; } }

.carte {
  aspect-ratio: 1.62/1; border-radius: 5px; padding: 26px;
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(157,92,255,.20), transparent 62%),
    linear-gradient(160deg, #131C33, #0A1020);
  border: 1px solid var(--route-d);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
/* Le Lama rouge en vol, légèrement transparent, au fond du carton */
.carte::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('assets/img/carte-lama.jpg') center / cover no-repeat;
  opacity: .32;
}
.carte > * { position: relative; z-index: 1; }
.carte-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.carte-nom { font-family: var(--f-disp); font-weight: 800; font-stretch: 116%;
             font-size: clamp(22px, 2.3vw, 28px); line-height: 1.1; }
.carte-nom em { font-style: normal; color: var(--route-txt); }
.carte-ref { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; color: #C3CDE4; }
.carte-titre { font-family: var(--f-disp); font-weight: 800; font-stretch: 114%;
               font-size: clamp(30px, 4vw, 46px); line-height: 1; text-shadow: 0 2px 14px rgba(8,12,24,.9); }
.carte-champs { display: grid; gap: 6px; margin-top: 12px; }
.carte-champs div { font-family: var(--f-mono); font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .06em;
                    text-transform: uppercase; color: #E3E9F5; text-shadow: 0 1px 8px rgba(8,12,24,.95); }
.carte-champs span { display: inline-block; min-width: 46%; border-bottom: 1px dotted rgba(238,242,250,.55);
                     margin-left: 6px; }
.carte-bas { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em;
             color: #C3CDE4; text-transform: uppercase; }

.opts { display: grid; gap: 12px; margin-top: 26px; max-width: 640px; }
.opt {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border: 1px solid var(--route-d); padding: 16px 20px; border-radius: 3px;
  background: rgba(12,17,32,.42);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  transition: background .18s, border-color .18s;
}
.opt:hover { background: rgba(14,20,36,.58); border-color: var(--route); }
.opt-l b, .opt-p { text-shadow: 0 1px 10px rgba(8,12,24,.9); }
.opt-l b { font-family: var(--f-disp); font-stretch: 110%; font-size: 17px; display: block; }
.opt-l span { font-family: var(--f-body); font-size: 14px; color: var(--sourd); }
.opt-p { font-family: var(--f-disp); font-weight: 800; font-stretch: 116%; font-size: 24px; white-space: nowrap; }
.opt-achat { display: flex; align-items: center; gap: 18px; flex: none; }
.btn-achat { padding: 11px 22px; font-size: 11px; }
.fiche-alerte {
  margin-top: 16px; padding: 12px 16px; border-left: 3px solid var(--ambre);
  background: rgba(255,194,77,.07); color: var(--ambre); font-size: 14.5px; border-radius: 0 3px 3px 0;
}
@media (max-width: 560px) {
  .opt { flex-direction: column; align-items: flex-start; gap: 14px; }
  .opt-achat { width: 100%; justify-content: space-between; }
}

/* ---------- CONTACT ---------- */
.cont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 56px); }
@media (max-width: 820px) { .cont-grid { grid-template-columns: 1fr; } }
.card { background: rgba(12,17,32,.62); border: 1px solid var(--trace); border-radius: 3px; padding: 28px;
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card h3 { margin-bottom: 14px; }
.kv { display: grid; gap: 14px; margin-top: 6px; }
.kv > div { border-bottom: 1px solid var(--trace); padding-bottom: 13px; }
.kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt { font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
         color: #B9C4DE; margin-bottom: 6px; }
.kv dd { margin: 0; font-size: 16.5px; }
.kv dd a { color: var(--route-txt); text-decoration: none; border-bottom: 1px solid rgba(212,188,255,.45); }
.kv dd a:hover { border-bottom-color: var(--route-txt); }

/* ---------- CTA FINAL ---------- */
.cta {
  border-top: 1px solid var(--trace);
}
.cta-in { width: var(--lg); margin-inline: auto; padding-block: var(--pad);
          display: flex; justify-content: space-between; align-items: center; gap: 34px; flex-wrap: wrap; }
.cta h2 { max-width: none; font-size: clamp(20px, 2.5vw, 33px); }
.cta-acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- PIED DE PAGE ---------- */
footer { border-top: 1px solid var(--trace); background: var(--nuit); }
.foot-in { width: var(--lg); margin-inline: auto; padding: 54px 0 26px;
           display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-in h4 { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.15em;
              text-transform: uppercase; color: var(--route-txt); margin-bottom: 13px; font-weight: 500; }
.foot-in a, .foot-in p { font-size: 14.5px; color: var(--vitre); text-decoration: none; display: block; margin-bottom: 7px; }
.foot-in a:hover { color: var(--route); }
.foot-bot { width: var(--lg); margin-inline: auto; border-top: 1px solid var(--trace);
            padding: 20px 0 40px; font-family: var(--f-mono); font-size: 10px;
            letter-spacing: 0.11em; color: var(--sourd); text-transform: uppercase;
            display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 820px) { .foot-in { grid-template-columns: 1fr 1fr; } }

/* ---------- PAGES DE TEXTE (mentions, CGV) ---------- */
.doc { max-width: 78ch; }
.doc h2 { margin: 40px 0 14px; font-size: clamp(19px, 2.1vw, 24px); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 26px 0 10px; font-size: 17px; }
.doc p, .doc li { color: var(--sourd); font-size: 15.5px; }
.doc p { margin-bottom: 12px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 7px; }
.doc strong { color: var(--vitre); }
.doc a { color: var(--route-txt); }
.doc .maj { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--sourd); }

/* ---------- MOTION RÉDUITE ---------- */
@media (max-width: 560px) {
  .tl-seg { font-size: 8.5px; letter-spacing: 0.04em; }
  .tl-rule span { font-size: 8.5px; }
}

@media (max-width: 600px) {
  .nav-in { gap: 8px; }
  .brand { gap: 8px; }
  .brand svg { width: 23px; height: 23px; }
  .brand-ic { width: 64px; }
  .brand-tx { font-size: 16px; font-stretch: 112%; }
  .nav-cta { padding: 9px 11px; font-size: 10.5px; letter-spacing: 0.09em; }
  .burger { width: 36px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .gal figure:hover img { transform: none; }
  .btn:hover { transform: none; }
}


/* ---------- VIDÉO EN CLIC-POUR-CHARGER ---------- */
.video-bloc { max-width: 860px; }
.video-facade {
  display: flex; align-items: center; gap: 22px; width: 100%;
  aspect-ratio: 16/9; padding: 0 clamp(20px, 4vw, 48px);
  border: 1px solid var(--route-d); border-radius: 4px; cursor: pointer;
  background:
    radial-gradient(90% 130% at 18% 20%, rgba(157,92,255,.20), transparent 62%),
    linear-gradient(150deg, rgba(22,32,58,.46), rgba(10,15,32,.52));
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  color: var(--vitre); text-align: left; font: inherit;
  transition: border-color .2s, transform .2s;
}
.video-facade:hover { border-color: var(--route); transform: translateY(-2px);
  background:
    radial-gradient(90% 130% at 18% 20%, rgba(157,92,255,.26), transparent 62%),
    linear-gradient(150deg, rgba(22,32,58,.60), rgba(10,15,32,.66)); }
.video-txt b { text-shadow: 0 1px 3px rgba(8,12,24,.95), 0 2px 14px rgba(8,12,24,.8); }
.video-play {
  flex: none; width: clamp(54px, 7vw, 76px); height: clamp(54px, 7vw, 76px);
  border-radius: 50%; background: var(--route); position: relative;
  box-shadow: 0 0 0 10px rgba(157,92,255,.14);
  transition: transform .2s;
}
.video-facade:hover .video-play { transform: scale(1.07); }
.video-play::after {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-left: clamp(16px, 2.1vw, 23px) solid #fff;
  border-top: clamp(10px, 1.3vw, 14px) solid transparent;
  border-bottom: clamp(10px, 1.3vw, 14px) solid transparent;
}
.video-txt b {
  display: block; font-family: var(--f-disp); font-weight: 800; font-stretch: 112%;
  font-size: clamp(16px, 2vw, 23px); line-height: 1.15; margin-bottom: 8px;
}
.video-txt small {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--sourd);
}
.video-cadre { position: relative; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; border: 1px solid var(--route-d); }
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-note { margin-top: 14px; font-size: 13.5px; color: var(--sourd); }
.video-note a { color: var(--route-txt); }
@media (max-width: 560px) {
  .video-facade { flex-direction: column; justify-content: center; text-align: center; gap: 18px; }
}


/* ---------- FORMULAIRE DE COMMANDE ---------- */
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champs .plein { grid-column: 1 / -1; }
.champs label {
  display: block; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .06em; color: var(--sourd);
}
.champs input, .champs select, .champs textarea {
  width: 100%; margin-top: 7px; padding: 12px 14px;
  background: var(--nuit); color: var(--vitre);
  border: 1px solid var(--trace); border-radius: 3px;
  font-family: var(--f-body); font-size: 15px; line-height: 1.4;
}
.champs textarea { resize: vertical; }
.champs input:focus, .champs select:focus, .champs textarea:focus {
  outline: none; border-color: var(--route);
}
.champs input::placeholder, .champs textarea::placeholder { color: #55618a; }
@media (max-width: 620px) { .champs { grid-template-columns: 1fr; } }


/* liste à puces à l'intérieur d'une cellule */
.cell ul { margin: 14px 0 0; padding-left: 0; list-style: none; }
.cell ul li {
  position: relative; padding-left: 16px; margin-bottom: 12px;
  color: var(--sourd); font-size: 15px; line-height: 1.55;
}
.cell ul li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; background: var(--route); border-radius: 50%;
}
.cell ul strong { color: var(--vitre); }


/* ---------- EMPLACEMENTS PHOTO / VIDÉO À REMPLIR ---------- */
.media-vide {
  width: 100%; height: 100%; aspect-ratio: 3/4;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(-45deg, #121A2E, #121A2E 10px, #16203A 10px, #16203A 20px);
  border: 1px dashed var(--trace); border-radius: 3px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--sourd); text-transform: uppercase; padding: 10px;
}
.media-vide.media-film { border-color: var(--route-d); color: var(--route-txt); font-size: 12px; }
.media-vide.media-film::before {
  content: ''; width: 0; height: 0; margin-right: 10px; flex: none;
  border-left: 11px solid var(--route);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.gal .wide .media-vide { aspect-ratio: 3/2; }


/* ---------- FICHES DE FORMULES : plus compactes ---------- */
.fiche-main ul li { break-inside: avoid; margin-bottom: 5px; font-size: 14.5px; line-height: 1.42; }
.fiche-main h3 { font-size: clamp(19px, 2vw, 25px); }
.fiche-sub { margin-top: 5px; }
.fiche-alerte { margin-top: 11px; padding: 9px 13px; font-size: 13.5px; }
.tl-total { margin-top: 7px; }
@media (max-width: 760px) { .fiche ul { grid-template-columns: 1fr; } }

/* ---------- ÉTAPES SUR FOND VIOLET ---------- */
.cell.cell-violet {
  background: linear-gradient(145deg, #7440D6, #5E36A8);
  border: 1px solid var(--route);
}
.cell.cell-violet .cell-n { color: #fff; }
.cell.cell-violet h3 { color: #fff; }
.cell.cell-violet p { color: #F3ECFF; }

/* ---------- FORMULES : liste sur une colonne, carte moins large,
   bande de temps sur toute la largeur de la carte ---------- */
.fiches { max-width: 880px; }
.fiche ul { grid-template-columns: 1fr; }
.tl-track { width: 100%; min-width: 0; height: 34px; }
.tl-seg { font-size: 11.5px; }

/* ---------- BOUTIQUE ---------- */
.boutique .vign img { aspect-ratio: 4/3; }

/* Photos montrées entières (façons de voler, météo) : pas de recadrage */
.vign-entiere .vign img { aspect-ratio: 900/642; object-fit: contain; background: #0c1120; }
.boutique .fiche-tag { font-size: 12.5px; color: #B9C4DE; }
.cell .prix-boutique {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 116%; font-size: 28px;
  color: var(--vitre); margin-top: -8px;
}


/* ---------- FORMULES : fiches à gauche, rotor à 7 pales à droite ---------- */
.formules-cadre { display: grid; grid-template-columns: minmax(0, 880px) minmax(280px, 1fr);
                  gap: clamp(28px, 4vw, 56px); align-items: start; }
/* Le rotor démarre sous la photo de fond (Lama jaune), puis reste visible en défilant */
.rotor { position: sticky; top: 96px; margin-top: max(0px, calc(61vw - 330px)); }
.rotor svg { width: 100%; height: auto; display: block; overflow: visible; }
.rotor-pales { transform-origin: 0 0; animation: rotorTourne 22s linear infinite; }
.rotor:hover .rotor-pales { animation-play-state: paused; }
@keyframes rotorTourne { to { transform: rotate(360deg); } }
.rotor .pale { fill: url(#paleDegrade); stroke: #C9A8FF; stroke-width: 1; }
.rotor a:hover .pale, .rotor a:focus .pale { fill: #B27FFF; }
.rotor .pale-txt { font-family: var(--f-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
                   fill: #fff; text-transform: uppercase; }
.rotor-legende { text-align: center; font-size: 13.5px; color: #C3CDE4; margin-top: 10px;
                 text-shadow: 0 1px 6px rgba(8,12,24,.9); }
@media (max-width: 1080px) {
  .formules-cadre { grid-template-columns: 1fr; }
  .rotor { position: static; max-width: 420px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .rotor-pales { animation: none; } }

/* ---------- BOUTIQUE : rectangle violet « Commander mon hélico 3D » ---------- */
.commande-3d {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  margin-top: 30px; padding: 26px 30px; border-radius: 4px;
  background: linear-gradient(135deg, #7440D6, #5E36A8); border: 1px solid var(--route);
  box-shadow: 0 10px 34px rgba(94,54,168,.35);
}
.commande-3d h2 { font-size: clamp(22px, 2.6vw, 32px); text-shadow: none; margin: 0; }
.commande-3d p { color: #EADFFF; margin-top: 6px; font-size: 15px; }
.commande-3d .btn { background: #fff; color: #4a2a8c; font-weight: 700; }
.commande-3d .btn:hover { background: #F1E9FF; }
/* ---------- ACCUEIL : photo de fond du haut montrée en entier (cockpit visible) ---------- */
.hero[style*="fond-accueil"] { min-height: calc(100vw * 1000 / 1619); display: flex; align-items: center; }
.hero[style*="fond-accueil"] > .hero-in { width: var(--lg); }
.hero[style*="fond-accueil"]::before {
  -webkit-mask-image: linear-gradient(#000 90%, transparent);
          mask-image: linear-gradient(#000 90%, transparent);
}

/* « Le seul en Rhône-Alpes » : chaque case garde la hauteur de son texte */
.grid-haut { align-items: start; }
/* Sections dont la photo de fond doit apparaître en entier (même hauteur que la photo) */
.sec.fond-entier { min-height: calc(100vw / var(--r, 1.6)); }
[style*="fond-parrainage"]::before { aspect-ratio: 1546/1000; } /* Écureuil à Morzine */


/* Vidéo « C'est pas sorcier » décalée à droite pour laisser voir l'altiport et le cockpit */
.video-bloc.video-droite { max-width: 620px; margin-left: auto; }
/* ---------- ACCUEIL : résumé des 7 formules ---------- */
.formules-resume { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 760px; }
.formules-resume a {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; align-items: center;
  padding: 14px 20px; border: 1px solid var(--route-d); border-radius: 3px; text-decoration: none;
  background: rgba(12,17,32,.58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .18s, background .18s;
}
.formules-resume a:hover { border-color: var(--route); background: rgba(40,24,80,.6); }
.fr-nom { font-family: var(--f-disp); font-weight: 800; font-stretch: 110%; font-size: 18px; }
.fr-duree { grid-column: 1; font-size: 14px; color: #C3CDE4; }
.fr-prix { grid-column: 2; grid-row: 1 / span 2; font-family: var(--f-disp); font-weight: 800;
           font-stretch: 116%; font-size: 26px; white-space: nowrap; }

/* ---------- BON CADEAU : boutons de commande l'un sous l'autre ---------- */
.commande-pile { display: grid; gap: 10px; max-width: 360px; margin-top: 28px; }
.commande-pile .btn, .commande-pile .badge-reglement { justify-content: center; width: 100%; }
.badge-reglement { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--route);
                border-radius: 2px; padding: 13px 15px; background: #7440D6; color: #fff; }

/* ---------- Vidéo au format portrait dans les galeries ---------- */
.gal video.portrait { aspect-ratio: 3/4; object-fit: cover; }
/* ---------- MENU : textes centrés, pastilles colorées ---------- */
.nav-links { gap: 6px; }
.nav-links a {
  text-align: center; line-height: 1.25; padding: 8px 12px; border-radius: 999px;
  border: 1px solid transparent; border-bottom: 1px solid transparent;
  color: #C9D2E8; font-weight: 600; letter-spacing: .1em;
  transition: color .18s, background .18s, border-color .18s;
}
.nav-links a:hover { color: #fff; background: rgba(157,92,255,.16); border-color: rgba(157,92,255,.45); }
.nav-links a[aria-current="page"] { color: #fff; background: linear-gradient(135deg, #7440D6, #5E36A8);
  border-color: var(--route); box-shadow: 0 4px 14px rgba(116,64,214,.35); }
.nav-cta { border-radius: 999px; background: linear-gradient(135deg, #FFC24D, #F29A2E); color: #1a1205 !important;
  font-weight: 700; box-shadow: 0 4px 16px rgba(255,194,77,.25); }
.nav-cta:hover { background: linear-gradient(135deg, #FFD27A, #FFB04D); }
.nav { border-bottom: 1px solid transparent;
  background: linear-gradient(rgba(8,12,24,.9), rgba(8,12,24,.9)) padding-box,
              linear-gradient(90deg, transparent, #9D5CFF, #FFC24D, #9D5CFF, transparent) border-box; }
@media (max-width: 940px) {
  .nav-links a { border-radius: 4px; border-bottom: 1px solid var(--trace); padding: 13px 0; }
}

/* ---------- Encadrés d'action (boutique, avis) : même style que les cartes du site ---------- */
.commande-3d {
  background: rgba(12,17,32,.62); border: 1px solid var(--route-d); border-left: 3px solid var(--route);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: none;
}
.commande-3d p { color: #C3CDE4; }
.commande-3d .btn { background: var(--route); color: #fff; font-weight: 600; }
.commande-3d .btn:hover { background: #B27FFF; }
[style*="fond-police"]::before        { aspect-ratio: 1513/750; }  /* EC135 police en vol */
[style*="fond-neige-cockpit"]::before { aspect-ratio: 1600/841; } /* cockpit EC135, vallée enneigée */

/* Étoiles d'avis, couleur Google */
.etoiles { display: flex; gap: 4px; margin-bottom: 10px; }
.etoiles svg { width: 26px; height: 26px; fill: #FBBC04; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }

/* ---------- MOYENS DE PAIEMENT : mention sans carte bancaire ---------- */
.alerte-cb {
  margin-top: 12px; padding: 11px 15px;
  border-left: 3px solid var(--ambre); background: rgba(255,194,77,.09);
  color: var(--ambre); font-weight: 600; border-radius: 0 3px 3px 0;
}
.alerte-cb-l {
  display: inline-block; margin-top: 7px; color: var(--ambre);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- LOGO DU PIED DE PAGE ---------- */
.foot-logo { display: block; width: 172px; max-width: 100%; height: auto; margin-bottom: 11px; }
.foot-nom {
  display: block;
  font-family: var(--f-disp); font-weight: 800; font-stretch: 120%;
  font-size: 23px; letter-spacing: .005em; line-height: 1;
  color: var(--vitre);
}
.foot-nom em { font-style: normal; color: var(--route); }
.foot-in a:hover .foot-nom { color: var(--route); }

/* ---------- MENTIONS À COMPLÉTER AVANT L'OUVERTURE ---------- */
.a-remplir {
  color: var(--ambre); font-weight: 600;
  border-bottom: 1px dashed rgba(255,194,77,.55); padding-bottom: 1px;
}

/* Formulaire type de rétractation, replié par défaut */
.doc .retract { margin: 18px 0 0; border: 1px solid var(--trace); border-radius: 3px; background: var(--acier); }
.doc .retract summary {
  cursor: pointer; padding: 13px 17px; font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--route-txt);
}
.doc .retract summary:hover { color: var(--vitre); }
.doc .retract .ans { padding: 0 17px 15px; }
.doc .retract .ans p { color: var(--sourd); }

/* ---------- MODE « OUVERTURE PROCHAINEMENT » ----------
   Pour ouvrir le site : retirer le bloc <div class="bandeau-ouverture">…</div>
   et la classe « avant-ouverture » de la balise <body> des 10 pages.
   Tout ce qui suit redevient alors inactif de lui-même.                     */
.bandeau-ouverture {
  background: linear-gradient(135deg, #FFC24D, #F29A2E);
  color: #1a1205; padding: 11px 4vw;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; text-align: center;
  font-size: 14.5px; line-height: 1.45;
}
.bandeau-ouverture .bo-pastille {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; background: #1a1205; color: #FFD27A;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.bandeau-ouverture .bo-tx { max-width: 86ch; }
.bandeau-ouverture a { color: #1a1205; font-weight: 700; text-underline-offset: 3px; }

/* Les parcours d'achat restent visibles mais sans effet */
.avant-ouverture .btn-achat,
.avant-ouverture #bc-envoyer,
.avant-ouverture .commande-pile .btn {
  pointer-events: none; opacity: .4; filter: grayscale(.6);
}
.avant-ouverture .champs input,
.avant-ouverture .champs select,
.avant-ouverture .champs textarea { opacity: .55; pointer-events: none; }

/* Le mot qui explique pourquoi */
.avant-attente {
  margin: 18px 0 0; padding: 15px 19px; border-radius: 3px;
  border: 1px solid rgba(255,194,77,.4); background: rgba(255,194,77,.08);
  color: var(--ambre); font-size: 15px; line-height: 1.55;
}
.avant-attente b { display: block; font-family: var(--f-disp); font-weight: 700;
                   font-stretch: 112%; font-size: 16px; margin-bottom: 5px; }
.avant-attente a { color: var(--ambre); font-weight: 600; }

@media (max-width: 760px) {
  .bandeau-ouverture { font-size: 13.5px; gap: 10px; padding: 11px 5vw; }
  .bandeau-ouverture .bo-pastille { font-size: 10px; padding: 5px 10px; }
}

/* Avant l'ouverture, personne n'a encore volé : l'appel aux avis Google attend */
.avant-ouverture #avis { display: none; }

/* ---------- CÔTÉ TECHNIQUE : la photo seule ---------- */
.gal-une { display: block; max-width: 460px; margin-inline: auto; }

/* ---------- VIDÉOS : bouton de son ---------- */
.gal figure.film { position: relative; }
.btn-son {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 0;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(238,242,250,.34); background: rgba(8,12,24,.70);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s, transform .18s;
}
.btn-son:hover { background: rgba(157,92,255,.85); border-color: var(--route); transform: scale(1.07); }
.btn-son svg { width: 20px; height: 20px; fill: none; stroke: var(--vitre);
               stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn-son .barre { display: none; }
.btn-son[data-coupe] .barre { display: block; }
.btn-son[data-coupe] .ondes { display: none; }

/* ---------- ACCUEIL : la photo de la pilote ne touche jamais les cadrans ----------
   Le fond fait toute la largeur et sa hauteur suit : hauteur = largeur / 1,619.
   Le tableau de bord de l'hélicoptère occupe les 38,5 % du bas de cette image,
   mesuré sur le fichier. On réserve donc cette bande en bas de la section, et
   le contenu se centre dans ce qui reste. Marche à toutes les largeurs d'écran,
   ce qui n'était pas le cas en fixant une hauteur de photo en pixels.          */
@media (min-width: 881px) {
  .hero[style*="fond-accueil"] {
    --h-fond:  calc(100vw * 1000 / 1619);
    --h-libre: calc(var(--h-fond) * 0.60);
    padding-bottom: calc(var(--h-fond) * 0.40);
  }
  .hero[style*="fond-accueil"] .hero-in { padding-block: clamp(18px, 2vw, 40px); }
  .hero[style*="fond-accueil"] .hero-media img {
    max-height: min(505px, calc(var(--h-libre) - 92px));
  }
}