/* ============================================================
   TRIUMPHAL TOUR — maquette home
   Direction : luxe nuit — bleu nuit profond, crème, touches or
   Référence structurelle : cooksonadventures.com
   ============================================================ */

:root {
  /* Permet d'animer block-size vers auto (ouverture douce des <details>) */
  interpolate-size: allow-keywords;
  --night:        #0A1424;
  --night-deep:   #060D19;
  --night-raised: #0F1D33;
  --cream:        #F4EFE4;
  /* Retour client 04/08 : les textes « bleu ciel » passent en blanc cassé */
  --cream-dim:    rgba(244, 239, 228, .92);
  --gold:         #A6783A;
  --gold-bright:  #C09150;
  --gold-dark:    #6E4F26;   /* or lisible sur fond crème (contraste AA) */
  --hairline:     rgba(166, 120, 58, .28);
  --overlay:      rgba(6, 13, 25, .32);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Poppins', 'Helvetica Neue', sans-serif;

  --ease-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-fade: cubic-bezier(.39, .575, .565, 1);
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;   /* le rideau .intro.done (scale 1.04) débordait de 14px en mobile — contrôle 06/09 */
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 27px;
  color: var(--cream-dim);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--cream);
  text-wrap: balance;
}

h2 { font-size: clamp(30px, 16px + 1.8vw, 42px); line-height: 1.35; }
h3 { font-size: 22px; line-height: 30px; }

img { display: block; max-width: 100%; }

a { color: var(--gold); text-decoration: none; }

strong { font-weight: 400; color: var(--cream); }

em { font-family: var(--font-display); font-style: italic; }

/* ---------- Utilitaires ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
}

/* Lien texte souligné center-out — micro-pattern signature */
.text-link {
  position: relative;
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 6px;
  transition: color .2s;
}
.text-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width .2s ease;
}
.text-link:hover { color: var(--gold-bright); }
.text-link:hover::after, .text-link:focus-visible::after { width: 100%; }

/* Variante légèrement plus grande — différencie le lien du titre (retour client 22/07) */
.text-link--lg {
  font-size: 16px;
  letter-spacing: 2.5px;
  padding-bottom: 8px;
}

:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* Reveal au scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s var(--ease-fade), transform .6s var(--ease-fade);
  transition-delay: .15s;
}
.reveal.animate { opacity: 1; transform: none; }

/* ---------- Préloader ---------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--night-deep);
  transition: opacity .7s var(--ease-fade), transform .5s .6s ease-in;
}
.intro-mark {
  width: clamp(180px, 24vw, 260px);
  height: auto;
}
.intro.done { opacity: 0; transform: none;   /* le scale(1.04) résiduel élargissait la page de 14px en mobile */ pointer-events: none; }

/* ---------- Header ---------- */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease, background .3s ease;
}
.site-header.is-fixed {
  position: fixed;
  height: 90px;
  background: var(--night-deep);
  border-bottom: 1px solid var(--hairline);
}
.site-header.is-hidden { transform: translateY(-100%); }

.brand {
  display: block;
  line-height: 0;
}
.brand-logo {
  display: block;
  width: 118px;
  height: auto;
  transition: width .3s ease;
}
.site-header.is-fixed .brand-logo { width: 92px; }

/* Burger — seul élément de nav visible, comme la référence */
.burger {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform .25s;
}
.burger span {
  grid-area: 1 / 1;
  width: 26px;
  height: 2px;
  background: var(--gold);
  transition: transform .25s, opacity .25s;
}
.burger span:nth-child(1) { transform: translateY(-8px); }
.burger span:nth-child(3) { transform: translateY(8px); }
.burger[aria-expanded="true"] { transform: translateY(-50%) rotate(180deg); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* ---------- Menu overlay ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--night-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.menu-overlay.open { opacity: 1; visibility: visible; }

.menu-overlay nav { text-align: center; }
.menu-overlay ul { list-style: none; }
.menu-overlay li { margin: 14px 0; }
.menu-overlay li a {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--cream);
  transition: color .2s;
}
.menu-overlay li a:hover { color: var(--gold); }
.menu-overlay li { opacity: 0; transform: translateY(20px); transition: opacity .4s var(--ease-fade), transform .4s var(--ease-fade); }
.menu-overlay.open li { opacity: 1; transform: none; }

.menu-secondary {
  margin-top: 40px;
  display: flex;
  gap: 28px;
  justify-content: center;
}
.menu-secondary a {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.menu-secondary a:hover { color: var(--gold); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Pas de voile sur la vidéo hero : l'étalonnage du film s'en charge, les
   couleurs doivent rester vives (retour client 17/08). La lisibilité du
   lettrage repose sur son drop-shadow. */

.hero-captions .caption { text-shadow: 0 2px 24px rgba(6, 13, 25, .55); }

.hero-captions {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: end center;
  text-align: center;
  padding: 0 24px 88px;
}
.caption {
  grid-area: 1 / 1;
  max-width: 900px;
  visibility: hidden;
}
.caption.visible { visibility: visible; }

.caption h1, .caption .cap-line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 24px + 2.4vw, 62px);
  line-height: 1.25;
  color: var(--cream);
}

/* « Ride your Movie » manuscrit — PNG officiel fourni par le client (04/08) :
   révélation gauche → droite façon écriture à la main. */
.caption h1.hero-script {
  clip-path: inset(-5% 100% -5% -2%);
}
.caption.visible .hero-script {
  animation: scriptWrite 2.4s var(--ease-fade) .4s forwards;
}
@keyframes scriptWrite {
  to { clip-path: inset(-5% -2% -5% -2%); }
}
.hero-script img {
  /* Desktop réduit de 20 % (retour Gabriel 25/08) — était min(560px, 76vw) ;
     72vw = grossi en MOBILE uniquement (retour Fred 29/08, était 61vw) */
  width: min(448px, 72vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 2px 16px rgba(6, 13, 25, .55));
}

/* cascade lettre par lettre (délais posés en JS) */
.caption .letter {
  display: inline-block;
  opacity: 0;
  transform: translateX(40px);
  transition: transform 1.4s var(--ease-expo), opacity 1.4s var(--ease-expo);
}
.caption.visible .letter { opacity: 1; transform: none; }

.caption.cap-fade { opacity: 0; transition: opacity 1.2s var(--ease-fade); }
.caption.cap-fade.visible { opacity: 1; }

/* CTA hero — ghost : fond transparent + bordure or 2px (retour client 23/07) */
.hero-cta {
  display: inline-block;
  margin-top: 30px;
  padding: 15px 37px;
  border-radius: 3px;
  background: transparent;
  border: 1px solid var(--gold);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s var(--ease-fade) 2.4s, transform 1s var(--ease-expo) 2.4s,
    background .25s ease, color .25s ease, border-color .25s ease;
}
.caption.visible .hero-cta { opacity: 1; transform: none; }
.hero-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--night-deep);
}

/* ---------- Sections texte (patron 850px + filets dorés verticaux) ---------- */

/* ============================================================
   RYTHME VERTICAL DES RUBRIQUES (maquettes finales 06/09, mesuré) :
   air au-dessus du filet 110px · filet 85px · filet→texte 57px · contenu→bord 110px
   (mobile 47 · 33 · 33 · 47). Toute rubrique a SON filet ; quand deux rubriques se
   suivent, la première n'a pas de padding bas (l'air de 110 est celui de la suivante).
   Seul le CTA final garde un filet bas, en miroir (57 · 85 · 110).
   ============================================================ */
:root {
  --rhythm: 110px;
  --rule-h: 85px;
  --rule-gap: 49px;   /* 57px jusqu'à l'encre de l'eyebrow (8px de blanc de ligne) */
}
.line-section {
  position: relative;
  max-width: 850px;
  margin: 0 auto;
  padding: calc(var(--rhythm) + var(--rule-h) + var(--rule-gap)) 25px var(--rhythm);
  text-align: center;
}
.line-section::before, .line-section::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: var(--rule-h);
  background: var(--gold);
  opacity: .7;
}
.line-section::before { top: var(--rhythm); }
.line-section::after { display: none; }
.line-section:has(+ .line-section) { padding-bottom: 0; }

/* Anciennes variantes (--snug/--close/--raise) : neutralisées, le rythme est unique */
.line-section--snug, .line-section--close, .line-section--raise { margin-top: 0; }

/* Filet vertical seul au-dessus d'une section qui n'est pas une .line-section
   (retour client 05/08 : sous la photo savoir-faire, avant SAVOIR-FAIRE) */
.rule-top {
  position: relative;
  padding-top: calc(var(--rhythm) + var(--rule-h) + var(--rule-gap));
}
.rule-top::before {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--rhythm);
  width: 1px;
  height: var(--rule-h);
  background: var(--gold);
  opacity: .7;
}

.line-section .eyebrow { display: block; margin-bottom: 24px; }
.line-section p { margin-top: 26px; }
.line-section .text-link { margin-top: 34px; }

/* CTA final des pages tours : 2e déclencheur du widget Bokun rendu comme un lien texte */
button.text-link { background: none; border: none; cursor: pointer; font-family: inherit; }

/* Signature « Ride your Movie » — PNG officiel du client (04/08),
   taille réduite (retour client 05/08) */
.promesse-signature { margin-top: 40px; }
.promesse-signature img {
  width: min(300px, 56vw);
  height: auto;
  margin: 0 auto;
}

/* En-tête de grille (« Nos expériences » avant les 4 tours — retour client 04/08) */
.grid-heading {
  position: relative;
  text-align: center;
  margin: 0 0 38px;
  padding-top: calc(var(--rhythm) + var(--rule-h) + var(--rule-gap));   /* même rythme que les rubriques (maquette : filet au-dessus de NOS EXPÉRIENCES) */
}
.grid-heading::before { content: ''; position: absolute; left: 50%; top: var(--rhythm); width: 1px; height: var(--rule-h); background: var(--gold); opacity: .7; }
.line-section:has(+ #experiences) { padding-bottom: 0; }

/* Lien texte en blanc (« En savoir plus » — retour client 04/08) */
.text-link--light { color: var(--cream); }
.text-link--light:hover { color: var(--cream); }

/* Bouton dans une line-section centrée */
.line-section .btn-gold { margin-top: 36px; }

/* Nos side-cars (home) : photo contenue — pas bord à bord — avec bouton
   Découvrir posé dans la partie basse (retour client 04/08 v2) */
.sidecars-teaser {
  max-width: 1000px;
  margin: 0 auto 30px;
  padding: 0 25px;
}
.sidecars-photo {
  position: relative;
  display: block;
  overflow: hidden;
}
.sidecars-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transform: scale(1);
  transition: transform 4s ease;
}
.sidecars-photo:hover img { transform: scale(1.04); }
.sidecars-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,13,25,0) 45%, rgba(6,13,25,.55) 100%);
}
.sidecars-photo .btn-gold {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 2;
}
.sidecars-photo:hover .btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--night-deep);
}

/* Nos side-cars (home, maquette Gabriel 25/08) : packshot bord à bord,
   CTA « Secrets d'atelier » centré sous la photo */
.packshot-band { margin: 20px 0 30px; }
.packshot-band > a { display: block; line-height: 0; }
.packshot-band img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1920 / 880;   /* cadrage serré des maquettes finales (06/09) */
  object-fit: cover;
  object-position: center;
}
.packshot-cta {
  text-align: center;
  padding: 44px 25px 0;
}
.packshot-text {
  max-width: 640px;
  margin: 0 auto 30px;
}

/* Bandes bleu profond (maquettes finales 06/09) : NOS SIDE-CARS + packshot, POURQUOI-NOUS.
   flow-root garde les marges des sections À L'INTÉRIEUR de la bande (pas de fuite du
   fond nuit au-dessus/au-dessous) ; le filet bas de la section précédente est masqué
   pour n'avoir qu'un filet, celui de la rubrique, en tête de bande. */
.deep-band {
  display: flow-root;
  background: var(--night-deep);
}
.line-section:has(+ .deep-band)::after { display: none; }
.deep-band > .line-section:last-child::after { display: none; }   /* pas de filet en bas d'une bande (maquette : un seul filet, en tête de la rubrique suivante) */
.deep-band + .full-visual { margin-top: 0; }   /* la bande touche le visuel plein bord qui suit */
/* La 1re rubrique d'une bande, et celle qui suit une bande, retrouvent un vrai haut de
   section (filet + air) : leur variante --snug/--close ne « colle » plus à rien */


/* Nos pilotes (home, maquette Gabriel 25/08) : 3 portraits bord à bord sans
   espace, prénoms sur bandeau bleu nuit sous les photos */
.pilots { margin: 0; }
.pilots-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.pilots-photos img {
  width: 100%;
  height: 100%;
  aspect-ratio: 43 / 59;   /* ratio natif 860×1180 — évite tout décalage entre colonnes */
  object-fit: cover;
  display: block;
}
.pilots-names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* prénoms centrés dans le bandeau : même espace au-dessus et en dessous
     (retour Fred 25/08 — la marge de la citation crème est neutralisée) */
  padding: 40px 0;
  text-align: center;
}
.pilots + .press-line { margin-top: 0; }
.pilots-names span {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--cream);
}

/* ---------- Grilles d'images ---------- */

.grid-line {
  display: grid;
  gap: 14px;
  margin: 0 50px;
}
.grid-line.by-4 { grid-template-columns: repeat(4, 1fr); }
.grid-line.by-3 { grid-template-columns: repeat(3, 1fr); }
.grid-line.by-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 4s ease;   /* Ken Burns lent, signature de la référence */
}
.card:hover img { transform: scale(1.04); }

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,13,25,.3) 0%, rgba(6,13,25,.42) 55%, rgba(6,13,25,.55) 100%);
  transition: opacity .3s;
}
.card:hover::after { opacity: .8; }
.card-content { text-shadow: 0 1px 14px rgba(6, 13, 25, .6); }

.card-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 20px;
}
.card-content .card-scene {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.card-content h3 {
  font-size: calc(17px + .9vw);
  line-height: 1.3;
  color: var(--cream);
}
.card-content .card-meta {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(244, 239, 228, .85);
}
/* Sous-titre de vignette (« By Veuve Clicquot » — retour client 15/08) */
.card-content .card-sub {
  margin-top: -8px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-bright);
}
/* Vignettes home (maquette Gabriel 25/08) : titres calés à la même hauteur sur
   les 4 cartes — contenu ancré en haut à hauteur fixe plutôt que centré, la
   signature Veuve Clicquot et la durée descendent sous le titre sans le décaler */
#experiences .card-content {
  justify-content: flex-start;
  padding-top: 52%;
  gap: 10px;
}
/* Signature manuscrite « by Veuve Clicquot » (PNG blanc, Gabriel 25/08).
   ⚠️ Spécificité : `.card img` (100 % + zoom hover) doit être neutralisé */
.card .card-sig,
.card:hover .card-sig {
  width: min(170px, 52%);
  height: auto;
  object-fit: contain;
  transform: none;
  transition: none;
  filter: drop-shadow(0 1px 10px rgba(6, 13, 25, .6));
}
/* Variante hub : logée dans le titre, à droite de « Parisian Night » */
.card .card-sig--inline,
.card:hover .card-sig--inline {
  display: inline-block;
  width: 122px;
  margin-left: 12px;
  vertical-align: baseline;
  transform: translateY(5px);
}
/* Vignettes tours home + hub quasi bord à bord (maquette Gabriel 25/08) :
   les bordures bleu nuit 12px du 16/08 sont supprimées, marges et gouttières
   réduites à 10px pour coller à la maquette */
#experiences .grid-line, .tours-hub { margin: 0 10px; gap: 10px; }
@media (max-width: 768px) {
  /* Maquette mobile Gabriel : cadre bleu nuit autour des vignettes.
     ⚠️ .grid-line.tours-hub (double classe) : le `.grid-line { margin: 0 }` du
     bloc media suivant, déclaré plus bas, écrasait la marge du hub */
  #experiences .grid-line, .grid-line.tours-hub { margin: 0 20px; gap: 20px; }
}
/* Vignettes du hub façon Retro Tour (retour client 16/08) :
   nom + specs en bas à gauche de la photo */
.tours-hub .card-content {
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: 26px 24px;
  gap: 10px;
}
.card-specs {
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(244, 239, 228, .85);
}
.card-specs strong { font-weight: 600; color: var(--cream); }
.card-content .card-cta {
  position: relative;
  margin-top: 6px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
  padding-bottom: 5px;
}
.card-content .card-cta::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--cream);
  transform: translateX(-50%);
  transition: width .4s ease;
}
.card:hover .card-cta::after { width: 100%; }

/* Bouton partagé — ghost : fond transparent, bordure or 1px (retour client 23/07) */
.btn-gold {
  display: inline-block;
  padding: 14px 29px;
  border-radius: 3px;
  background: transparent;
  border: 1px solid var(--gold);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-gold:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--night-deep);
}

/* Bouton Bokun (résa en ligne) et boutons de formulaire — même habillage */
button.btn-gold {
  cursor: pointer;
  font-family: var(--font-body);
}
button.btn-gold:disabled { opacity: .55; cursor: wait; }

/* Expériences : CTA ghost bordé or, ancré en bas de case (retour client 23/07) */
#experiences .card-cta {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  margin-top: 0;
  padding: 12px 27px;
  border-radius: 3px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--cream);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
#experiences .card-cta::after { display: none; }
#experiences .card:hover .card-cta {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--night-deep);
}

/* Mobile : léger zoom des visuels quand la case entre dans le viewport */
.card.in-view img { transform: scale(1.05); }

/* Teasers : accroche courte au-dessus du lien */
.card-content .card-hook {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(244, 239, 228, .9);
  max-width: 300px;
}

/* Teasers by-2 (« Nos side-cars » / « Pourquoi-nous ? ») — lisibilité renforcée
   (retour client 04/08) : titre Playfair plein format, accroche droite en Poppins,
   voile assombri. Photos : en attente des nouveaux visuels client. */
.by-2 .card-content .card-scene {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 20px + 1.2vw, 36px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cream);
}
.by-2 .card-content .card-hook {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  color: var(--cream);
  max-width: 360px;
}
.by-2 .card::after {
  background: linear-gradient(180deg, rgba(6,13,25,.42) 0%, rgba(6,13,25,.55) 55%, rgba(6,13,25,.68) 100%);
}

/* ---------- Bandeau partenaires (respiration crème) ---------- */

.press-line {
  margin: 50px 0;
  padding: 120px 50px;
  background: var(--cream);
  text-align: center;
}
.press-line blockquote {
  position: relative;
  /* guillemets logés dans le padding du bloc : jamais coupés par le bord
     de l'écran (retour client 06/08) */
  max-width: 810px;
  padding: 0 80px;
  margin: 36px auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 16px + 1vw, 28px);
  line-height: 1.5;
  color: var(--night);
}
.press-line blockquote::before, .press-line blockquote::after {
  font-family: var(--font-display);
  font-size: 104px;   /* guillemets grossis (retours client 04/08 puis 06/08) */
  line-height: 1;
  color: var(--gold);
  opacity: .6;
}
.press-line blockquote::before { content: '“'; position: absolute; top: -30px; left: 0; }
.press-line blockquote::after { content: '”'; position: absolute; bottom: -64px; right: 0; }

.press-line .attribution {
  margin-top: 28px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--night);
}

.partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 56px;
  margin-top: 64px;
}
.partners span {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--night);
  opacity: .55;
}

/* ---------- CTA final ---------- */

/* Filet rapproché de « Votre film commence ici » (retour client 05/08) */
.final-cta { margin: 0 auto; }
main > .line-section:last-child { padding-bottom: calc(var(--rule-gap) + 8px + var(--rule-h) + var(--rhythm)); }   /* 57 de l'encre au filet bas */
main > .line-section:last-child > .text-link:last-child { display: inline-block; margin-bottom: -23px; }   /* blanc de ligne du lien */
main > .line-section:last-child::after { display: block; bottom: var(--rhythm); }
.final-cta h2 { margin-bottom: 40px; }

/* CTA final avec signature manuscrite (maquette Gabriel 25/08) : le lettrage
   « Ride your Movie » remplace « Votre film commence ici » sur home + hub */
.final-cta--script .cta-script { margin: 0; line-height: 0; }
.final-cta--script .cta-script + .text-link { margin-top: 46px; }
/* Hub : quand le lettrage suit une line-section (À bord), il vient juste sous
   son filet — le shorthand margin/padding de .final-cta écrase --close, d'où
   cette règle dédiée plus spécifique (maquette Gabriel 25/08) */

.final-cta--script .cta-script img {
  /* 90vw = grossi en mobile uniquement (retour Fred 29/08, était 80vw) */
  width: min(640px, 90vw);
  height: auto;
  margin: 0 auto;
  display: block;
}
/* « Réserver votre expérience » sous le lettrage : BLANC sur toutes les
   maquettes Gabriel (home 25/08, side-cars desktop 26/08 + iPhone 27/08) —
   il était resté or à l'intégration. Le soulignement animé reste or. */
.final-cta--script .text-link,
.final-cta--script .text-link:hover { color: var(--cream); }

/* ---------- Pages intérieures ---------- */

.subpage main { padding-top: 97px; }   /* 110 entre le logo du header et le 1er filet (mesuré maquette concept) */
/* Pages intérieures à banner hero (side-cars) : le visuel remonte sous le
   header transparent, comme la vidéo de la home (demande client 28/08) */
.subpage--hero main { padding-top: 0; }
.subpage .line-section h1 {
  font-size: clamp(34px, 20px + 2.2vw, 54px);
  line-height: 1.3;
}

/* ---------- Nos machines — blocs empilés, visuel alterné ---------- */

.machines-stack {
  display: grid;
  gap: 100px;
  max-width: 1200px;
  margin: 0 auto 130px;
  padding: 0 50px;
}
.machine-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.machine-row--flip .machine-media { order: 2; }
.machine-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.machine-content .eyebrow { display: block; margin-bottom: 16px; }
.machine-content h3 { font-size: clamp(26px, 18px + 1.4vw, 36px); }
.machine-content p {
  margin: 20px 0 32px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- Vos événements — rubrique dédiée ---------- */

.events-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  max-width: 1200px;
  margin: 120px auto;
  padding: 0 50px;
}
.events-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 70% center;
}
.events-content .eyebrow { display: block; margin-bottom: 22px; }
.events-content p { margin-top: 24px; }
.events-list {
  list-style: none;
  margin: 34px 0 38px;
}
.events-list li {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
}
.events-list li:first-child { border-top: 1px solid var(--hairline); }
.events-list strong {
  flex: 0 0 175px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.events-list span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--cream-dim);
}

/* ---------- Footer ---------- */

/* Footer façon Cookson (retour client 04/08) : logo seul à gauche, deux colonnes
   resserrées, partenaires à droite */
.site-footer {
  background: var(--night-deep);
  border-top: 1px solid var(--hairline);
  padding: 75px 50px 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: auto max-content max-content 1fr;
  gap: 50px 64px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-brand { align-self: center; }
/* Logo grossi + légèrement décalé à gauche en desktop (retour client 05/08) */
.brand-logo-footer { width: 230px; margin-left: -16px; }

.site-footer h4 {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.site-footer ul { list-style: none; }
.site-footer li { margin: 10px 0; }
.site-footer li a {
  position: relative;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
  padding-bottom: 4px;
}
.site-footer li a:hover { color: var(--cream); }
.site-footer li a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--cream);
  transform: translateX(-50%);
  transition: width .2s;
}
.site-footer li a:hover::after { width: 100%; }

/* Pastilles réseaux sociaux au-dessus des logos partenaires (retour client
   24/08 — déplacées depuis la colonne Contact, et grossies) */
.footer-right {
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* pictos RS justifiés à droite (retour client 24/08) */
  gap: 26px;
  width: 100%;
  max-width: 500px;
}
.footer-social {
  display: flex;
  gap: 20px;
}
.footer-social a {
  color: var(--gold);
  line-height: 0;
  transition: color .2s ease;
}
.footer-social svg { width: 32px; height: 32px; }
.footer-social a:hover { color: var(--cream); }

/* Partenaires à droite — grille 3×2, logos passés en blanc et grossis
   (retour client 05/08 ; le blanc s'applique aussi en mobile) */
.footer-partners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 22px;
  justify-items: center;
  align-items: center;
  width: 100%;
}
/* Logos cliquables vers les sites partenaires (retour client 06/08) */
.footer-partners a {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: opacity .2s ease;
}
.footer-partners a:hover { opacity: .65; }
/* Versions blanches officielles de Gabriel (06/08) — plus de filtre CSS */
.footer-partners img {
  max-width: 150px;
  max-height: 64px;
  width: auto;
  height: auto;
  opacity: .9;
}
/* AIGLE 1853 réduit pour s'aligner sur la largeur du logo ANGIOLO
   (retour Gabriel 25/08 — son ratio très allongé le faisait dominer) */
.footer-partners a[href*="aigle"] img { max-width: 134px; }

.footer-bottom {
  max-width: 1200px;
  margin: 60px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(166, 120, 58, .15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(169, 179, 197, .75);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .grid-line.by-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-line { margin: 0 30px; }
  /* Citation crème resserrée + guillemets bien plus gros (retour Fred 29/08 —
     étaient 84px / padding 70px) */
  .press-line { padding: 34px 30px; }
  .press-line blockquote { padding: 0; margin-top: 24px; }
  /* Guillemets au-dessus/en dessous du texte, décalés vers le début et la fin
     de la phrase (retour client 06/08 : haut entre « Vous » et « offrir »,
     bas entre « avez » et « rêvé ») */
  .press-line blockquote::before, .press-line blockquote::after {
    position: static;
    display: block;
    margin: 0 auto;
    font-size: 130px;
    /* l'encre des guillemets Playfair n'occupe que le haut de l'em box :
       line-height réduit pour ne pas trimballer le vide */
    line-height: .55;
  }
  .press-line blockquote::before { margin-bottom: -26px; transform: translateX(-86px); }
  .press-line blockquote::after { margin-top: 22px; transform: translateX(38px); }
}

@media (max-width: 768px) {
  .grid-line { margin: 0; }
  .grid-line.by-4, .grid-line.by-3, .grid-line.by-2 { grid-template-columns: 1fr; }
  .card { aspect-ratio: 4 / 5; }
  .burger { right: 16px; }
  .hero-captions { padding-bottom: 52px; }
  :root { --rhythm: 47px; --rule-h: 33px; --rule-gap: 27px; }
  .line-section { padding-left: 20px; padding-right: 20px; }
  /* Les rubriques resserrées (--snug/--close) le restent aussi en mobile — le
     shorthand padding ci-dessus les écrasait (retour Fred 25/08) */
  /* Filet vertical : raccourci pour garder de l'air avant le texte (padding mobile 70px) */
  /* NOS EXPÉRIENCES : nom du tour et durée grossis en mobile (retour client 05/08) */
  #experiences .card-content h3 { font-size: 30px; }
  #experiences .card-content .card-meta { font-size: 16px; letter-spacing: 2px; }
  /* padding resserré (retour Fred 29/08 — cette règle écrase celle du bloc
     media plus haut, ordre du fichier) */
  .press-line { padding: 34px 24px; }
  .machines-stack { gap: 60px; margin-bottom: 80px; padding: 0 24px; }
  .machine-row { grid-template-columns: 1fr; gap: 26px; }
  .machine-row--flip .machine-media { order: 0; }
  .events-section { grid-template-columns: 1fr; gap: 40px; margin: 0 auto; padding: 0 24px; }
  .events-list strong { flex-basis: 150px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; justify-items: center; }
  /* Les grossissements du footer sont desktop uniquement (retour client 05/08) —
     seul le passage des logos partenaires en blanc s'applique aussi ici */
  .brand-logo-footer { width: 190px; margin: 0 auto; }
  .footer-social svg { width: 26px; height: 26px; }
  .footer-right { justify-self: center; max-width: 420px; gap: 20px; align-items: center; }
  .footer-partners img { max-width: 120px; max-height: 52px; }
  .footer-partners a[href*="aigle"] img { max-width: 108px; }
  /* Pilotes : les 3 portraits restent côte à côte, prénoms resserrés */
  .pilots-names { padding: 26px 0; background: var(--night-deep); }   /* maquette mobile 06/09 */
  .pilots-names span { font-size: 11px; letter-spacing: 2.5px; }
  .packshot-cta { padding-top: 32px; }
  .packshot-band img { aspect-ratio: 2 / 1; }
  .footer-social { justify-content: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .site-footer { padding: 50px 24px 30px; }
}

/* ============================================================
   PAGES INTÉRIEURES — styles consolidés (22/07)
   ============================================================ */

/* Rangées narratives (concept, événements) : mêmes blocs alternés que la
   flotte, mais titres h2 et paragraphes longs en corps Poppins — l'italique
   Playfair de .machine-content p est calibré pour une tagline d'une ligne. */
.story-stack .machine-content h2 {
  font-size: clamp(26px, 18px + 1.4vw, 36px);
  line-height: 1.35;
}
.story-stack .machine-content p {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 15px;
  line-height: 27px;
  margin: 20px 0 0;
}

.final-cta .btn-gold { margin-top: 38px; }

/* Utilitaire : titre présent pour la hiérarchie, masqué visuellement */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----- Expériences ----- */

.tour-tagline {
  margin-top: 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--gold-bright);
}
/* Accroche en tête du paragraphe descriptif (retour client 12/08) */
.tour-tagline--lead { margin: 0 0 18px; }

/* Royal Escape : les 4 destinations en tirets, alignées à gauche
   (retours client 12/08 puis 13/08 — pas de centrage, destinations en gras) */
.tour-destinations {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  text-align: left;
}
.tour-destinations li { margin: 10px 0; }
.tour-destinations strong { color: var(--cream); }

/* Hub des expériences : 4 cartes côte à côte en desktop (maquette Gabriel 25/08 —
   remplace la grille 2×2 resserrée du 12/08). Marges réduites façon maquette
   (quasi bord à bord) et specs compactées pour tenir sur une ligne */
.tours-hub .card-content { padding: 24px 20px; gap: 8px; }
.tours-hub .card-specs { font-size: 11.5px; letter-spacing: .5px; }
@media (max-width: 768px) {
  .tours-hub .card-specs { font-size: 13px; }
}
.card-meta--price { margin-top: 2px; }

.iconic-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 100px auto 130px;
  padding: 0 50px;
}
.iconic-scenario { text-align: center; }
.iconic-infos {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}
.iconic-details .eyebrow { display: block; margin-bottom: 6px; }
.iconic-details .events-list { margin: 28px 0 0; }
/* Bouton de résa : centré sous les infos pratiques (Bokun pour l'Iconic,
   lien simple pour les autres tours en attendant leurs widgets) */
.iconic-infos .bokunButton,
.iconic-infos .tour-book {
  display: block;
  width: fit-content;
  margin: 48px auto 0;
}
/* Prestation — « Ce qui est inclus » : accordéon à « + » sous les infos
   pratiques (demande Maxime 26/08, réutilise les styles .faq-item) */
.tour-included .included-list { margin-top: 24px; }
.tour-included .faq-item summary { font-size: 18px; padding: 21px 0; }
.tour-included .faq-answer { padding-bottom: 24px; }
.tour-included .faq-answer p { color: var(--cream-dim); }
.included-note {
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.7;
  color: #A9B3C5;
}

/* Infos pratiques : valeurs en sans-serif droit (retour client) */
.iconic-infos .events-list span {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 14px;
  line-height: 24px;
}

.scenario-list {
  list-style: none;
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 34px;
}
.scenario-list li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cream-dim);
}
.scenario-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: 15px;
  height: 1px;
  background: var(--gold);
}

.card-soon {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(244, 239, 228, .55);
}

/* Carte 3D du circuit (MapLibre, chargée au scroll) — bandeau allongé */
.tour-map {
  position: relative;
  height: 440px;
  margin-top: 34px;
  border: 1px solid var(--hairline);
  background: var(--night-deep);
  text-align: left;
}
.tour-marker {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--night-deep);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  box-shadow: 0 0 0 2px rgba(6, 13, 25, .65), 0 0 14px rgba(166, 120, 58, .5);
  cursor: pointer;
  transition: background .2s ease;
}
.tour-marker:hover { background: var(--gold-bright); }
/* Pastille sans numéro (Royal Escape : 4 horizons au choix, pas un ordre) */
.tour-marker--plain { width: 14px; height: 14px; }
/* Étiquette du lieu, posée à côté de la pastille */
.tour-marker-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tour-marker-wrap--left { flex-direction: row-reverse; }
.tour-marker-wrap--top { flex-direction: column-reverse; gap: 6px; }
.tour-marker-wrap--bottom { flex-direction: column; gap: 6px; }
.tour-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream);
  text-shadow: 0 1px 6px rgba(6, 13, 25, .95), 0 0 14px rgba(6, 13, 25, .8);
}
.tour-map .maplibregl-popup-content {
  background: var(--night-raised);
  color: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(6, 13, 25, .5);
}
.tour-map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--night-raised); }
.tour-map .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--night-raised); }
.tour-map .maplibregl-ctrl-attrib {
  background: rgba(6, 13, 25, .6);
  font-size: 10px;
}
.tour-map .maplibregl-ctrl-attrib a { color: var(--cream-dim); }

/* ----- Pourquoi-nous ? ----- */

.choix-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 120px;
  padding: 0 50px;
}
.choix-row--flip .choix-media { order: 2; }
.choix-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.choix-media--wide img { aspect-ratio: 4 / 3; }

/* Grand chiffre Bebas Neue — aligné sur les encadrés de la page Vos événements
   (retour client 04/08) */
.choix-num {
  display: block;
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-style: normal;
  font-size: 88px;
  line-height: .9;
  letter-spacing: .02em;
  color: var(--gold);
  opacity: .18;
  margin-bottom: 18px;
}
.choix-content h2 { font-size: clamp(26px, 18px + 1.4vw, 36px); }
.choix-content p { margin-top: 20px; }
.choix-content .text-link { margin-top: 32px; }

.choix-excellence {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--rhythm) + var(--rule-h) + var(--rule-gap)) 50px var(--rhythm);
  text-align: center;
}
.choix-excellence-intro { max-width: 760px; margin: 0 auto; }
.choix-excellence-intro p { margin-top: 24px; }

.partenaires-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1100px;
  margin: 60px auto 0;
  list-style: none;
}
.partenaire {
  padding: 44px 32px;
  border: 1px solid var(--hairline);
  background: transparent;
  opacity: 0;
  transition: transform .45s var(--ease-fade), border-color .45s ease,
    box-shadow .45s ease, background .45s ease;
}
/* Entrée en cascade quand la section (.reveal) s'anime — animation `backwards`
   uniquement : une fois jouée, le hover reprend la main sur transform */
.choix-excellence.animate .partenaire {
  opacity: 1;
  animation: partenaireIn .8s var(--ease-expo) backwards;
}
.choix-excellence.animate .partenaire:nth-child(2) { animation-delay: .18s; }
.choix-excellence.animate .partenaire:nth-child(3) { animation-delay: .36s; }
@keyframes partenaireIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.partenaire:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  background: var(--night-raised);
  box-shadow: 0 14px 34px rgba(6, 13, 25, .45), 0 0 24px rgba(166, 120, 58, .14);
}
/* Logo du partenaire en tête d'encadré (fichiers client 04/08) */
.partenaire-logo {
  display: block;
  max-height: 64px;
  width: auto;
  margin: 0 auto 22px;
  opacity: .92;
}
.partenaire h3 { font-size: 21px; transition: color .45s ease; }
.partenaire:hover h3 { color: var(--gold-bright); }
.partenaire h3::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  margin: 18px auto 0;
  background: var(--gold);
  opacity: .7;
  transition: width .45s var(--ease-fade), opacity .45s ease;
}
.partenaire:hover h3::after { width: 68px; opacity: 1; }
.partenaire p { margin-top: 18px; font-size: 14px; line-height: 25px; }

/* ----- Triumphal Store ----- */

.store-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
}
.store-item {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 30px 20px;
  text-align: center;
  background: var(--night-raised);
  border: 1px solid var(--hairline);
  transform: translateY(0);
  transition: transform .45s var(--ease-fade);
}
.store-item::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid var(--gold);
  opacity: 0;
  transition: opacity .45s var(--ease-fade);
  pointer-events: none;
}
.store-item:hover { transform: translateY(-6px); }
.store-item:hover::after { opacity: .55; }
.store-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--gold);
}
.store-rule {
  width: 34px;
  height: 1px;
  background: var(--gold);
  opacity: .6;
}
.store-item h3 {
  font-size: clamp(22px, 16px + 1vw, 30px);
  line-height: 1.3;
}
.store-tag {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: color .3s ease;
}
.store-item:hover .store-tag { color: var(--gold-bright); }
.store-note {
  max-width: 620px;
  margin: 65px auto 0;
  padding: 0 25px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--cream-dim);
}

/* Cartes catégories avec visuels goodies (fournis 18/07, intégrés 05/08) :
   photo en tête de carte, contenu typographique dessous */
.store-item--photo {
  aspect-ratio: auto;
  justify-content: flex-start;
  padding: 0 0 34px;
  gap: 14px;
}
.store-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 14px;
}
.store-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 4s ease;
}
.store-item--photo:hover .store-photo img { transform: scale(1.04); }

/* Déclinaisons de couleurs — vignettes carrées centrées */
.store-variants-heading {
  text-align: center;
  margin: 90px 0 34px;
}
.store-variants {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
}
.store-variant {
  flex: 0 1 calc((100% - 28px) / 3);
  max-width: 360px;
  border: 1px solid var(--hairline);
  background: var(--night-raised);
  transition: transform .45s var(--ease-fade), border-color .45s ease;
}
.store-variant:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}
.store-variant img {
  width: 100%;
  height: auto;   /* neutralise l'attribut height, sinon aspect-ratio est ignoré */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.store-variant-cap {
  display: block;
  padding: 15px 10px 17px;
  text-align: center;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* ----- FAQs (contenus client 05/08) — accordéon natif details/summary ----- */

.faq-list {
  max-width: 850px;
  margin: 0 auto 120px;
  padding: 0 25px;
}
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item:first-child { border-top: 1px solid var(--hairline); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 25px 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.4;
  color: var(--cream);
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Ouverture adoucie des tiroirs (retour client 29/08) : le contenu des
   <details> glisse au lieu d'apparaître d'un bloc. ::details-content +
   interpolate-size = navigateurs récents ; les autres ouvrent instantanément
   comme avant (dégradation propre). */
.faq-item::details-content {
  block-size: 0;
  overflow-y: clip;
  opacity: 0;
  transition: block-size .4s var(--ease-fade), opacity .32s ease .06s,
              content-visibility .4s allow-discrete;
}
.faq-item[open]::details-content {
  block-size: auto;
  opacity: 1;
}
/* Pictos dorés à gauche des items Prestation des pages tours (dossier client
   28/08) — le « + » reste à droite via ::after ; le span du titre prend
   l'espace restant. Scopé .tour-included : la page FAQs n'a pas de picto. */
.tour-included .faq-item summary { align-items: center; gap: 16px; }
.tour-included .faq-icon { flex: 0 0 auto; width: 30px; height: 30px; }
.tour-included .faq-item summary span { flex: 1; }
/* Sous-parties du tiroir « Ce qui est inclus » (livret Maxime, présentation
   revue 01/09) : gros picto centré au-dessus, titre et texte centrés — comme
   les pages intérieures du livret PDF. Fond = bleu nuit normal de la page. */
.included-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-top: 40px;
}
.included-sub:first-child { margin-top: 12px; }
.included-sub .faq-icon { width: 72px; height: 72px; }
.included-sub h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--cream);
  margin-bottom: 6px;
}

/* Récit des pages tours : le texte à droite de la photo pose sur un carré
   bleu nuit foncé (le bleu du footer — retour Maxime 01/09) */
.tour-story .events-content { background: var(--night-deep); }
.faq-item summary:hover { color: var(--gold-bright); }
.faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 2px 0 28px; max-width: 760px; }
.faq-answer p + p { margin-top: 14px; }

/* ----- Contact — coordonnées façon Cookson (retour client 06/08) ----- */

.contact-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto 40px;
  padding: 0 25px;
  list-style: none;
  text-align: center;
}
.contact-details .eyebrow { display: block; margin-bottom: 14px; }
.contact-details a {
  font-family: var(--font-display);
  font-size: clamp(18px, 15px + .4vw, 21px);
  line-height: 1.5;
  white-space: nowrap;
  color: var(--cream);
  text-decoration: none;
  transition: color .2s ease;
}
.contact-details a:hover { color: var(--gold-bright); }

@media (max-width: 768px) {
  .contact-details { grid-template-columns: 1fr; gap: 34px; margin-bottom: 20px; }
}

/* ----- CGV — texte légal aligné à gauche ----- */

.legal {
  max-width: 780px;
  margin: 0 auto 120px;
  padding: 0 25px;
  text-align: left;
}
.legal h2 {
  font-size: 22px;
  line-height: 1.4;
  margin: 52px 0 6px;
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin-top: 14px; }
.legal ul { margin: 14px 0 0 22px; }
.legal li { margin: 7px 0; }

/* Lien CGV du footer : discret, hérite de la couleur du bas de page */
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { color: var(--cream); }

/* ----- Devenir franchisé ----- */

.univers-lead {
  margin-top: 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cream);
}
/* Citation sans filet vertical (retour client 04/08) */
.univers-quote {
  margin: 30px 0 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 16px + .5vw, 23px);
  line-height: 1.55;
  color: var(--gold-bright);
}

/* Encadrés numérotés — système de cartes bordées, partagé franchise + événements
   (retour client : grand chiffre en filigrane + filet doré balayé au survol) */
.franchise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto 0;   /* maquette : 110 avant le filet Expansion (l'air de la rubrique suffit) */
  padding: 0 50px;
}
.franchise-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  padding: 32px 30px 36px;
  transition: transform .45s var(--ease-fade), border-color .45s ease, background .45s ease;
}
.franchise-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-fade);
}
.franchise-item:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  background: var(--night-raised);
}
.franchise-item:hover::before { transform: scaleX(1); }
/* Chiffres des encadrés : Bebas Neue (retour client — plus gros, droit,
   masculin), chargée uniquement sur franchise.html */
.franchise-num {
  display: block;
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 88px;
  line-height: .9;
  letter-spacing: .02em;
  color: var(--gold);
  opacity: .18;
}
.franchise-item h3 {
  margin: 14px 0 12px;
  font-size: 19px;
  line-height: 27px;
}
/* Variante 4 cartes en 2×2 (page événements) */
.franchise-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1000px;
  margin-bottom: 110px;
}

/* ----- Vos événements : prestation sur-mesure centrée ----- */

.prestation {
  max-width: 1000px;
  margin: 0 auto 120px;
  padding: 0 25px;
  text-align: center;
}
.prestation .eyebrow { display: block; margin-bottom: 24px; }
.prestation > p { margin-top: 26px; }
.prestation-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 24px;
  max-width: 900px;
  margin: 45px auto 0;
}
.prestation-grid li {
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}
.prestation-grid strong {
  display: block;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.prestation-grid span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 23px;
  color: var(--cream-dim);
}
.prestation-ambition {
  max-width: 620px;
  margin: 50px auto 0;
  color: var(--cream);
}

/* Villes — pastilles bordées sur fond nuit + légende (retour client) */
.cities-wrap {
  max-width: 940px;
  margin: 0 auto var(--rhythm);   /* maquette : 220 avant le filet Parcours */
  padding: 0 25px;
  text-align: center;
}
.cities {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.city {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--hairline);
  color: var(--cream-dim);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.city:hover { background: rgba(166, 120, 58, .08); }
.city--open {
  border-color: var(--gold);
  color: var(--gold);
}
.cities-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 40px;
  margin-top: 30px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.legend { display: flex; align-items: center; gap: 9px; }
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(166, 120, 58, .22);
  border: 1px solid rgba(166, 120, 58, .45);
}
.dot--open { background: var(--gold); border-color: var(--gold); }

/* Parcours 5 étapes — timeline verticale, filet or dégradé */
.steps {
  list-style: none;
  position: relative;
  max-width: 760px;
  margin: 0 auto 120px;
  padding: 0 25px;
}
.steps::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 47px;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold), rgba(166, 120, 58, .08));
}
.step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 30px;
  align-items: start;
  margin-bottom: 46px;
}
.step:last-child { margin-bottom: 0; }
.step-num {
  position: relative;
  z-index: 1;
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 32px;
  letter-spacing: .04em;
  line-height: 1.1;
  text-align: center;
  color: var(--gold);
  background: var(--night);
  padding: 6px 0;
}
.step-content h3 { font-size: 20px; margin-bottom: 8px; }
.step-content p { font-size: 14px; line-height: 25px; }

.franchise-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 26px;
  max-width: 680px;
  margin: 55px auto 0;
  text-align: left;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.form-field input,
.form-field textarea {
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--night-raised);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: var(--cream);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(166, 120, 58, .18);
}
.form-field textarea {
  min-height: 170px;
  resize: vertical;
}
.form-actions {
  grid-column: 1 / -1;
  margin-top: 8px;
  text-align: center;
}
/* Champ piège (honeypot) : invisible pour un humain, rempli par les robots */
.form-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Message d'état après envoi */
.form-status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: var(--cream);
}
.form-status[hidden] { display: none; }
.form-status--ok { color: var(--gold); }
.form-status--error { color: #E08A8A; }
.franchise-form.is-sent .form-field, .franchise-form.is-sent .form-actions { display: none; }

/* ----- Side-cars : bandeau visuel plein bord avant le savoir-faire ----- */

/* Filet déplacé sous la photo (retour client 05/08) : marge réduite, le filet
   est porté par .rule-top sur la section savoir-faire */
.adn-visual { margin-bottom: 30px; }
/* Savoir-faire : place pour le filet .rule-top (l'ID bat le shorthand
   `padding: 0 25px` de .prestation) + rapproché du filet NOTRE SIGNATURE
   (retour client 05/08) */
#adn { margin-bottom: 0; }
.adn-visual img {
  width: 100%;
  height: 62vh;
  min-height: 340px;
  object-fit: cover;
}

/* ----- Side-cars : logo signature ----- */

.logo-section .logo-mark {
  width: clamp(200px, 18vw, 260px);
  height: auto;
  margin: 34px auto 42px;
  filter: drop-shadow(0 0 34px rgba(166, 120, 58, .22));
}

/* ============================================================
   DAMIER PLEIN BORD — pages intérieures uniquement (retour client 22/07)
   Images collées aux bords de l'écran, sections contiguës,
   texte centré dans l'autre moitié. La home garde ses splits encadrés.
   ============================================================ */

.subpage .machines-stack {
  gap: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}
.subpage .machine-row,
.subpage .events-section,
.subpage .choix-row {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 85vh;
}
/* L'image remplit sa case en absolu : les portraits ne peuvent plus
   imposer leur hauteur naturelle — toutes les rangées font la même hauteur */
.subpage .machine-media,
.subpage .events-media,
.subpage .choix-media {
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.subpage .machine-media img,
.subpage .events-media img,
.subpage .choix-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.subpage .machine-content,
.subpage .events-content,
.subpage .choix-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 90px clamp(30px, 6vw, 100px);
}
.subpage .machine-content > *,
.subpage .events-content > *,
.subpage .choix-content > * {
  max-width: 560px;
}
/* Les listes terme/description restent alignées à gauche dans le bloc centré */
.subpage .events-content .events-list {
  width: 100%;
  max-width: 520px;
  text-align: left;
}
.subpage .events-section--flip .events-media { order: 2; }

/* ============================================================
   PAGES NOS SIDE-CARS & NOTRE CONCEPT — maquettes Gabriel 26/08
   ============================================================ */

/* Banner hero d'une page intérieure : visuel plein bord sous le header,
   recadré en bandeau comme la maquette (l'image source est plus haute) */
/* Desktop : la photo monte jusqu'en haut de page, le header transparent pose
   directement dessus (comme la vidéo home) — le ratio 2000/1076 montre 126px
   de ciel en plus au-dessus du cadrage validé, donc les motos ne bougent pas
   (retour 28/08). Mobile : bande nuit 76px + ratio serré (cf. media). */
.page-hero { line-height: 0; }
/* Le crop se cale sur le BAS de l'image : les motos et leurs ombres restent
   entières quel que soit l'écran, c'est le ciel du haut qui se rogne
   (retour 28/08 — l'ancrage haut coupait les roues sur grand écran) */
.page-hero img { object-position: center top; }
.page-hero img {
  width: 100%;
  height: auto;
  /* Ratio imposé = l'image amputée de ~20 % de ciel en haut (2000×950 au lieu
     de 2000×1189) : motos + ombres toujours entières, même part de ciel sur
     tous les écrans. height:auto obligatoire sinon l'attribut height de l'img
     gèle l'aspect-ratio (gotcha connu du projet). */
  /* Fenêtre ancrée en haut : tout le ciel est affiché (le rétro ne touche pas
     le logo), le bas est rogné. 28/08 : −15 % supplémentaires en bas à la
     demande du client (1110 × 0,85 ≈ 944), puis −5 % (897), puis −5 % (852)
     — la coupe mord le bas des roues, assumé par le client. */
  aspect-ratio: 2000 / 852;
  object-fit: cover;
  display: block;
}

/* Visuel plein bord entre deux sections ; --stack empile plusieurs images
   contiguës (les 3 packshots side-cars) */
.full-visual { margin: 0; line-height: 0; }
.full-visual img { width: 100%; height: auto; display: block; }
.full-visual--stack img + img { margin-top: 0; }

/* Damier des détails side-cars : titre Playfair or centré sur bleu nuit
   foncé (réf. footer), photo carrée en face, rangées alternées */
.craft-stack { margin: 30px 0; }
.craft-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.craft-row--flip .craft-title { order: 2; }
.craft-title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--night-deep);
  padding: 40px;
}
.craft-title h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 16px + 1.4vw, 34px);
  line-height: 1.4;
  color: var(--gold-bright);
}
.craft-media { line-height: 0; }
.craft-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Nos expériences (maquettes finales 06/09) : banner large 8:3, titre sur une ligne,
   bloc « À bord » photo 3:2 + texte sur bleu profond */
.page-hero--wide img { aspect-ratio: 2000 / 749; object-position: center; }
.line-section--open::after { display: none; }

.aboard-row .craft-media img { aspect-ratio: 3 / 2; }
@media (min-width: 1100px) {
  .hub-title h1, #machines-titre { white-space: nowrap; }
  /* Sur une ligne, ces titres sont plus larges que les 800px utiles de la
     section (1030px à 1440) : sans ceci ils débordent à droite et paraissent
     décalés. On les laisse dépasser des deux côtés, centrés sur le filet. */
  .hub-title h1, #machines-titre {
    width: max-content;
    max-width: calc(100vw - 60px);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 768px) {
  .page-hero--wide img { aspect-ratio: 4 / 3; max-height: none; }
}

/* Notre signature (maquettes finales 06/09) : paragraphes plus larges, comme la maquette */
.logo-section { max-width: 1400px; }
.logo-section p { max-width: 1240px; margin-left: auto; margin-right: auto; }

/* Pourquoi-nous (maquettes finales 06/09) : visuels carrés, textes des choix sur bleu profond */
.page-pourquoi .choix-media img { aspect-ratio: 1 / 1; }
.page-pourquoi .choix-content { background: var(--night-deep); }

/* Vos événements (maquettes finales 06/09) : sur-mesure = photo vasque + contenu sur bleu profond */
.prestation-row .craft-media img { aspect-ratio: 6 / 7; }
.prestation-content { padding: var(--rhythm) 48px; }
.prestation-content > div { max-width: 560px; }
.prestation-content > div::before { content: ""; display: block; width: 1px; height: var(--rule-h); margin: 0 auto calc(var(--rule-gap) + 8px); background: var(--gold); opacity: .7; }
.prestation-content .eyebrow { display: block; margin-bottom: 20px; }
.prestation-content > div > p { margin-top: 24px; color: var(--cream-dim); }
.prestation-pictos {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px;
  margin: 34px auto 0; padding: 0; text-align: left;
}
.prestation-pictos li { display: flex; align-items: center; gap: 16px; }
.prestation-pictos img { width: 64px; height: 64px; flex: none; }
.prestation-pictos span { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; line-height: 1.7; color: var(--cream); }
.prestation-content .prestation-ambition { margin-top: 34px; }
@media (min-width: 1100px) { #evenements-titre { white-space: nowrap; } }
@media (max-width: 768px) {
  .prestation-row { grid-template-columns: 1fr; }
  .prestation-row .craft-media img { aspect-ratio: 4 / 3; }
  .craft-title.prestation-content { padding: var(--rhythm) 24px; }   /* bat le .craft-title mobile (20px 12px) déclaré plus bas */
  .craft-title.prestation-content > div::before { margin-bottom: var(--rule-gap); }
  .prestation-pictos { gap: 20px 16px; }
  .prestation-pictos img { width: 52px; height: 52px; }
}

/* Devenir franchisé (maquettes finales 06/09) : photo statue quasi carrée, Expansion sur bleu profond (classe deep-band sur la section) */
.page-franchise .events-media img { aspect-ratio: 15 / 16; }
.page-franchise .events-content { background: var(--night-deep); }

/* Damier du concept : blocs texte sur bleu nuit foncé (réf. footer) */
.subpage .story-stack .machine-content { background: var(--night-deep); }

/* L'évidence (concept) : bandeau crème plein bord, textes inversés */
.evidence-band {
  background: var(--cream);
  margin: 50px 0;
}
.evidence-band .line-section { margin: 0 auto; }
.evidence-band .eyebrow { color: var(--gold-dark); }
.evidence-band h2 { color: var(--night); }
.evidence-band p { color: rgba(10, 20, 36, .85); }

/* Case « Icône du septième art » : photo sunset + texte, collée à la photo
   désert (maquette iPhone 27/08, étendue au desktop 28/08 — le § vivait avant
   dans la section Bonneville). Le -30px annule le margin-bottom du .full-visual
   qui précède (marges adjacentes : 30 + (-30) = 0). */
.cinema-row { margin-top: 0; }
.cinema-text p {
  color: var(--cream-dim);
  font-size: 15px;
  line-height: 1.9;
  max-width: 420px;
  margin: 0 auto;
}

/* Alignement maquettes 27-28/08 (mobile + desktop) : pas de filet bas sous
   Bonneville ni sous le savoir-faire, damier collé aux packshots */
#bonneville::after, #adn::after { display: none; }

.craft-stack { margin-bottom: 0; }
.craft-stack + .full-visual { margin-top: 0; }

@media (max-width: 768px) {
  /* Damier conservé en 2 colonnes (maquette iPhone 27/08), titres réduits */
  .craft-title { padding: 20px 12px; }
  .craft-title h3 { font-size: 17px; line-height: 1.55; }
  .cinema-text p { font-size: 14px; }
  /* Mobile : photo à y=0 sous le header transparent, servie via l'asset
     hero-banner-mobile.jpg (ciel étendu en haut, coupe à mi-roue en bas —
     maquette Maxime 29/08). Le ratio = celui de l'asset, affiché entier. */
  .page-hero { padding-top: 0; }
  .page-hero img { aspect-ratio: 2000 / 1640; max-height: 60vh; object-position: center top; }

  /* Resserrage mobile (maquette iPhone) : pas non plus de filet sous l'intro,
     transitions texte→visuel ~44px */
  #machines::after { display: none; }
}

/* ----- Responsive pages intérieures ----- */

@media (max-width: 1024px) {
  .store-grid { grid-template-columns: repeat(2, 1fr); padding: 0 30px; }
  .franchise-grid { grid-template-columns: repeat(2, 1fr); padding: 0 30px; }
}

@media (max-width: 768px) {
  .iconic-details { grid-template-columns: 1fr; gap: 55px; margin-bottom: 80px; padding: 0 24px; }
  .scenario-list { grid-template-columns: 1fr; }
  .tour-map { height: 420px; }
  .choix-row { grid-template-columns: 1fr; gap: 28px; margin-bottom: 70px; padding: 0 24px; }
  .choix-row--flip .choix-media { order: 0; }
  .choix-excellence { margin-bottom: 0; padding-left: 24px; padding-right: 24px; }
  .partenaires-grid { grid-template-columns: 1fr; margin-top: 44px; }
  .partenaire { padding: 34px 26px; }
  .store-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 20px; }
  .store-item { aspect-ratio: 1 / 1; padding: 24px 14px; gap: 12px; }
  .store-item--photo { aspect-ratio: auto; padding: 0 0 24px; gap: 10px; }
  .store-photo { margin-bottom: 8px; }
  .store-variants-heading { margin: 60px 0 26px; }
  .store-variants { gap: 10px; padding: 0 20px; }
  .store-variant { flex-basis: calc((100% - 10px) / 2); }
  .store-note { margin-top: 45px; }
  .franchise-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 24px; margin-bottom: 20px; }
  .franchise-grid--2 { margin-bottom: 70px; }
  /* « Ce que vous obtenez » : carrousel horizontal automatique en mobile
     (retour client 04/08, confirmé horizontal) — 1 carte + aperçu de la
     suivante, avance carte par carte pilotée en JS, pause au toucher */
  .franchise-grid--auto {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .franchise-grid--auto::-webkit-scrollbar { display: none; }
  .franchise-grid--auto .franchise-item {
    flex: 0 0 84%;
    min-width: 0;
    scroll-snap-align: start;
  }
  /* Retour client 05/08 : le carrousel avance automatiquement au scroll vertical.
     La section est épinglée (sticky) le temps du défilement ; le JS traduit la
     progression verticale en scrollLeft. Sans JS / reduced-motion : carrousel
     à balayage manuel ci-dessus. */
  /* Retour client 15/08 : retour à l'épinglage du 12/08 (« parfait » selon
     Maxime) mais la grille se fige en moitié basse de l'écran (top:50svh au
     lieu de 84px) — le wrapper 220vh donne la course, le JS mappe la
     progression sur scrollLeft, fin du défilement pile au dés-épinglage. */
  .franchise-pin.is-scrolldriven { height: 220vh; }
  .franchise-pin.is-scrolldriven .franchise-grid--auto {
    position: sticky;
    /* retour client 16/08 v4 : les cartes doivent tenir EN ENTIER à l'écran →
       le JS cale --grid-top sur (hauteur écran − hauteur cartes − marge) */
    top: var(--grid-top, 45svh);
    height: auto;
    margin-bottom: 0;
    overflow-x: hidden;
    scroll-snap-type: none;
  }
  /* Retour client 16/08 (v2) : le texte d'intro ne doit pas disparaître
     complètement pendant la course du carrousel, mais pas rester entier non
     plus (ça se superposait) — il monte normalement et s'arrête quand SA FIN
     touche le haut de la grille (le titre peut sortir de l'écran). Le top
     exact dépend de la hauteur du bloc → calculé par le JS via --intro-top. */
  section:has(.franchise-pin.is-scrolldriven) .line-section--raise {
    position: sticky;
    top: var(--intro-top, -200px);
    z-index: 1;
  }
  .prestation { margin-bottom: 80px; }
  .prestation-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
  .city { padding: 10px 16px; letter-spacing: 2px; }
  /* Harmonisation des espaces autour des tirets verticaux (retour client
     16/08) : référence = 42px entre la fin d'un bloc et le tiret suivant
     (l'écart constaté après le carrousel). Gap visuel = marge + 12px d'inset
     du filet → marges à 30px. */
  .cities-wrap { margin-bottom: var(--rhythm); }
  .steps { margin-bottom: 30px; }
  .franchise-pin { margin-top: 30px; }
  /* le padding-bottom 65px du bloc univers creusait l'espace texte → tiret
     à 107px : ramené à 30 (pas de marge sur cette jonction, la section
     suivante est une --raise) → 30 + 12 d'inset du filet = 42px */
  .step { grid-template-columns: 38px 1fr; gap: 20px; margin-bottom: 38px; }
  .steps::before { left: 44px; }
  .step-num { font-size: 27px; }
  /* Damier plein bord en mobile : image pleine largeur au-dessus, texte dessous */
  .subpage .machine-row,
  .subpage .events-section,
  .subpage .choix-row { grid-template-columns: 1fr; min-height: 0; }
  .subpage .machine-media,
  .subpage .events-media,
  .subpage .choix-media { height: 55vh; }
  .subpage .events-section--flip .events-media { order: 0; }
  .subpage .machine-content,
  .subpage .events-content,
  .subpage .choix-content { padding: 55px 24px 65px; }
  .subpage .iconic-details { margin-top: 0; }
  .subpage .choix-excellence { margin-top: 0; }
  .franchise-form { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .menu-overlay li { opacity: 1; transform: none; transition: none; }
  .caption .letter { opacity: 1; transform: none; transition: none; }
  .caption h1.hero-script { clip-path: none; animation: none; }
  .card img, .card:hover img { transform: none; transition: none; }
  .intro { display: none; }
  .store-item, .store-item::after, .store-tag { transition: none; }
  .store-item:hover { transform: none; }
  .partenaire { opacity: 1; animation: none !important; transition: none; }
  .partenaire:hover { transform: none; }
  .franchise-item, .franchise-item::before, .city { transition: none; }
  .franchise-item:hover { transform: none; }
}

/* Réservation intégrée aux pages tours (validé Maxime 22/08) : récit pleine
   largeur, puis scénario+infos à gauche et calendrier Bokun sticky à droite
   (mobile : empilé). Le widget experience-calendar remplace boutons + modale. */
.tour-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 50px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 30px;
  align-items: start;
}
.tour-main { min-width: 0; }
.tour-side {
  position: sticky;
  top: 100px;
  padding-top: 100px;   /* aligné sur le margin-top du bloc scénario */
}
.tour-side .eyebrow { display: block; margin-bottom: 10px; }
.tour-side h3 { color: var(--cream); margin-bottom: 18px; }
.tour-side .bokunWidget {
  min-height: 520px;
  background: #fff;               /* l'iframe du calendrier est transparente :
                                     on fournit la carte blanche nous-mêmes */
  border-radius: 4px;
  padding: 10px 8px;
}
@media (max-width: 1080px) {
  .tour-cols { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .tour-side { position: static; padding: 40px 20px 0; text-align: center; }
}

/* Rythme (06/09) : voisins sans marge, filet propre au bloc Excellence, 220 avant Candidature */
.press-line { margin-top: 0; margin-bottom: 0; overflow-x: clip; }   /* le guillemet fermant (::after) dépassait de 14px en mobile */
.choix-excellence::before { content: ''; position: absolute; left: 50%; top: var(--rhythm); width: 1px; height: var(--rule-h); background: var(--gold); opacity: .7; }
.page-franchise .deep-band + #candidature { padding-top: calc(2 * var(--rhythm) + var(--rule-h) + var(--rule-gap)); }
.page-franchise .deep-band + #candidature::before { top: calc(2 * var(--rhythm)); }

/* =====================================================================
   Recalage sur les maquettes Gabriel du 02/09 (mail de corrections 07/09).
   Desktop = maquettes 1920 px, mobile = maquettes 1080 px (vues à 390).
   Mesures relevées sur la home (référence) : sous le filet 57 · eyebrow→titre
   ≈55 · titre→§ ≈60 · §→§ ≈52 · §→bouton ≈60 · texte→visuel plein bord ≈60 ·
   visuel→texte ≈60 · bouton→bord de bande 110 · boutons ≈316×85.
   ===================================================================== */

/* CTA final « Ride your Movie » (rapport filets 07/09) : 8 px de blanc de ligne
   sous le filet, compensation du lien, lettrage −20 % en desktop (mobile = 90vw, inchangé) */
.final-cta--script .cta-script { margin: 8px 0 0; }
main > .line-section:last-child > .text-link:last-child { margin-bottom: -31px; }
.final-cta--script .cta-script img { width: min(512px, 90vw); }

/* Mention « by Veuve Clicquot » en capitales (remplace la signature manuscrite) */
.card-by {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream);
}
.card-by--inline { font-size: 11px; letter-spacing: 1.5px; margin-left: 6px; vertical-align: middle; }

/* Indicateur de scroll : filet or animé au bas du hero (réf. Cookson, sans le mot) */
.hero { position: relative; }
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 58px;
  overflow: hidden;
  z-index: 3;
}
.hero-scroll::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform-origin: top;
  animation: heroScrollCue 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes heroScrollCue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll::before { animation: none; } }

/* Headers de pages intérieures : léger dégradé noir en haut pour que le logo
   ne se fonde pas dans le ciel (demande Gabriel, fait en CSS sur tous les headers) */
.page-hero { position: relative; }
.page-hero::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 240px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 13, 25, .62) 0%, rgba(6, 13, 25, 0) 100%);
}

/* Sur-mesure (événements) : titre centré au-dessus, photo à gauche, à droite
   les 4 pictos empilés sur filets (maquettes desktop + mobile) */
.line-section:has(+ .prestation-row) { padding-bottom: 0; }
.prestation-content > div::before { display: none; }
.prestation-content > div > p { margin-top: 0; }
.prestation-intro { text-align: center; }
.prestation-pictos { display: block; margin-top: 34px; }
.prestation-pictos li {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.prestation-pictos li:first-child { border-top: 1px solid var(--hairline); }
.prestation-pictos span { font-size: 13px; }
.prestation-content .prestation-ambition { margin-top: 34px; text-align: center; }

@media (min-width: 769px) {
  /* Corps de texte +1 en desktop (retour Maxime) */
  body { font-size: 16px; line-height: 28px; }
  .story-stack .machine-content p { font-size: 16px; }
  .cinema-text p { font-size: 16px; }
  .eyebrow { font-size: 14px; letter-spacing: 3.5px; }
  .text-link { font-size: 15px; }

  /* Rythme interne des rubriques */
  .line-section .eyebrow { margin-bottom: 34px; }
  .line-section p { margin-top: 46px; }
  .line-section p + p { margin-top: 38px; }
  .line-section .text-link { margin-top: 52px; }
  .line-section .btn-gold { margin-top: 54px; }

  /* Boutons ghost au format maquette (≈316×85) */
  .btn-gold { padding: 28px 54px; border-radius: 6px; font-size: 14px; letter-spacing: 2.5px; line-height: 1.6; }

  /* Texte → visuel plein bord = 60 ; visuel → texte = 60 ; bouton → bord de bande = 110 */
  .line-section:has(+ .packshot-band) { padding-bottom: 0; }
  .packshot-band { margin: 56px 0 0; }
  .packshot-band img { aspect-ratio: 3009 / 1338; }   /* nouveau packshot de profil, entier */
  .packshot-cta { padding: 52px 25px 110px; }
  .packshot-text { margin-bottom: 52px; }
  .line-section:has(+ .pilots) { padding-bottom: 0; }
  .pilots { margin-top: 52px; }
  .pilots-names { padding: 72px 0 84px; }
  #experiences .grid-heading { margin-bottom: 50px; }
  .prestation-row { margin-top: 56px; }
  .prestation-content { padding: 64px 48px; display: flex; align-items: center; justify-content: center; }

  /* Encart crème « Vous offrir Paris… » : bande 510, citation sur 2 lignes, guillemets 150 */
  .press-line { padding: 176px 50px; }
  .press-line blockquote {
    max-width: 1180px;
    padding: 0 130px;
    margin: 0 auto;
    font-size: 36px;
    line-height: 2.2;
  }
  .press-line blockquote::before, .press-line blockquote::after { font-size: 150px; }
  .press-line blockquote::before { top: -44px; }
  .press-line blockquote::after { bottom: -96px; }

  /* Footer : pictos réseaux sociaux alignés sur EXPLORER / CONTACT */
  .footer-right { align-self: start; margin-top: -8px; }

  /* Vignettes home : 462×535, titre centré + filet or + durée */
  #experiences .card { aspect-ratio: 462 / 535; }
  /* Titres des 4 vignettes au même niveau : contenu ancré en haut à hauteur fixe (pas centré,
     sinon la ligne « by Veuve Clicquot » décale Parisian Night) */
  #experiences .card-content { justify-content: flex-start; padding: 40% 20px 20px; gap: 14px; }
  #experiences .card-content h3 { font-size: 44px; line-height: 1.2; }
  #experiences .card-content h3::after { content: ''; display: block; width: 64px; height: 1px; margin: 16px auto 0; background: var(--gold); }
  #experiences .card-content .card-by { margin-top: -6px; }
  #experiences .card-content .card-meta { font-size: 17px; letter-spacing: 3px; color: var(--cream); }
  .card::after { background: linear-gradient(180deg, rgba(6, 13, 25, .2) 0%, rgba(6, 13, 25, .4) 50%, rgba(6, 13, 25, .48) 100%); }

  /* Headers : side-cars ramené aux 2/3 de l'écran (8:3), coupé au niveau de « PARIS » */
  .subpage--hero .page-hero img { aspect-ratio: 8 / 3; object-position: center top; }
}

@media (min-width: 1100px) {
  /* Titres sur une ligne, centrés même s'ils dépassent les 800 px utiles de la section */
  #abord-titre, #evenements-titre, #surmesure-titre {
    white-space: nowrap;
    width: max-content;
    max-width: calc(100vw - 60px);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  /* Headers mobiles des maquettes : ≈ 1080×950 */
  .page-hero--wide img { aspect-ratio: 8 / 7; }
  /* Home mobile : titre → packshot resserré (maquette 33) */
  .line-section:has(+ .packshot-band) { padding-bottom: 0; }
  .packshot-band { margin-top: 30px; }
  /* Sur-mesure mobile : photo 5/4, bloc pictos aligné à gauche */
  .prestation-row .craft-media img { aspect-ratio: 5 / 4; }
  .prestation-pictos li { padding: 14px 0; gap: 18px; }
  .prestation-pictos img { width: 52px; height: 52px; }
}

/* --- Événements + franchise (rapport filets 07/09) ------------------------- */

/* Jonction rubrique → bloc qui n'est pas une rubrique (cartes, villes, étapes) :
   la maquette y met la valeur « écart » (≈60 / 33), pas la valeur « air » */
.line-section--open,
.line-section:has(+ .franchise-pin),
.line-section:has(+ .cities-wrap),
.deep-band > .line-section:has(+ .steps) { padding-bottom: 50px; }

/* Filet Candidature : 220 de l'encre au filet — les 120 de .steps se cumulaient */
.steps { margin-bottom: 0; }
/* Légende des villes : 11 px de blanc de ligne sous l'encre */
.cities-wrap { margin-bottom: calc(var(--rhythm) - 11px); }

/* Formulaires : § → formulaire ≈ 56, textarea → bouton ≈ 58 (mêmes valeurs sur les 2 pages) */
.franchise-form { margin-top: 47px; }
.form-actions .btn-gold { margin-top: 18px; }

@media (min-width: 769px) {
  /* Bloc « La philosophie de la marque » : h2 à 78 du haut, dernier § à 95 du bas,
     h2 → lead 47, lead → citation 53, citation → § 51, § → § 46 */
  .page-franchise .events-content { justify-content: flex-start; padding-top: 78px; padding-bottom: 95px; }
  .page-franchise .events-content p { margin-top: 46px; }
  .page-franchise .univers-lead { margin-top: 40px; }
  .page-franchise .univers-quote { margin-top: 46px; margin-bottom: 0; }
}

@media (max-width: 768px) {
  /* Rythme interne mobile (maquettes 1080 : eyebrow → titre 32, titre → § 33) */
  .line-section .eyebrow { margin-bottom: 16px; }
  .line-section p { margin-top: 20px; }
  .line-section--open,
  .line-section:has(+ .franchise-pin),
  .line-section:has(+ .cities-wrap),
  .deep-band > .line-section:has(+ .steps) { padding-bottom: 30px; }
  #candidature { padding-top: calc(var(--rhythm) + var(--rule-h) + var(--rule-gap)); }
  #candidature::before { top: var(--rhythm); }
  .franchise-form { margin-top: 25px; }
  .form-actions .btn-gold { margin-top: 0; }
  /* Franchise mobile : le pin ne décale plus l'intro sticky ; bloc philosophie 33 en haut, 0 en bas */
  .franchise-pin { margin-top: 0; }
  .page-franchise .events-content { padding-top: 33px; padding-bottom: 0; }
  .page-franchise .univers-quote { margin-top: 34px; margin-bottom: 0; }
  .page-franchise .events-content p + p { margin-top: 20px; }
}
/* Événements : cartes → filet Sur-mesure = 110 (la marge basse de la grille se cumulait) */
.franchise-grid--2 { margin-bottom: 0; }
@media (min-width: 769px) {
  /* Lien du CTA final en 15px/28 : compensation du blanc de ligne recalculée (57 de l'encre au filet) */
  main > .line-section:last-child > .text-link:last-child { margin-bottom: -40px; }
  .footer-right { margin-top: -2px; }
}
@media (min-width: 1100px) {
  #franchise-titre { white-space: nowrap; width: max-content; max-width: calc(100vw - 60px); margin-left: 50%; transform: translateX(-50%); }
}
@media (min-width: 769px) {
  /* Prénoms des pilotes au format maquette */
  .pilots-names span { font-size: 20px; letter-spacing: 6px; }
  /* Sur-mesure : panneau droit centré verticalement, rangées de pictos ≈120 (maquette 109 + 27) */
  .craft-title.prestation-content { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; box-sizing: border-box; }
  .prestation-content > div { max-width: 640px; width: 100%; }
  .prestation-pictos li { padding: 22px 0; gap: 30px; }
  .prestation-pictos img { width: 76px; height: 76px; }
  .prestation-pictos span { font-size: 13px; letter-spacing: 2.5px; }
}
@media (max-width: 768px) {
  /* Filet de scroll plus court en mobile et CTA remonté : plus de chevauchement */
  .hero-scroll { height: 30px; }
  .hero-captions { padding-bottom: 64px; }
}
/* Candidature : les 220 se répartissent 110 sous la dernière étape (bord de bande) + 110 bande → filet */
.steps { margin-bottom: var(--rhythm); }
.page-franchise .deep-band + #candidature { padding-top: calc(var(--rhythm) + var(--rule-h) + var(--rule-gap)); }
.page-franchise .deep-band + #candidature::before { top: var(--rhythm); }
@media (max-width: 768px) {
  /* Sur-mesure mobile (maquette) : titre sur 2 lignes, 30 avant la photo, photo quasi carrée */
  #surmesure-titre { font-size: 26px; }
  .line-section:has(+ .prestation-row) { padding-bottom: 30px; }
  .prestation-row .craft-media img { aspect-ratio: 1 / 1; object-position: center 60%; }
}
/* Pages tours (retour Maxime 11/09) : plus de rubriques « À bord » ni « Votre film commence ici »,
   la page se termine sur récit + calendrier → un rythme d'air avant le footer */
main > .tour-cols:last-child { margin-bottom: var(--rhythm); }
@media (min-width: 769px) { main > .tour-cols:last-child .tour-main > :last-child { margin-bottom: 0; } }   /* les 130 du bloc détails se cumulaient avec le rythme */

/* =====================================================================
   Retours Gabriel/Maxime du 08/09 (réponses point par point au mail de Fred)
   ===================================================================== */

/* Filets dorés : −20 % desktop (85 → 68), +20 % mobile (33 → 40) */
:root { --rule-h: 68px; }
@media (max-width: 768px) { :root { --rule-h: 40px; } }

/* Espace entre paragraphes du corps de texte : −20 % (desktop) */
@media (min-width: 769px) { .line-section p + p { margin-top: 28px; } }

/* CTA final : les deux airs extérieurs (bord de bloc ↔ filet) passent au petit écart (57 / 35) */
main > .final-cta:last-child {
  padding-top: calc(var(--rule-gap) + 8px + var(--rule-h) + var(--rule-gap));
  padding-bottom: calc(var(--rule-gap) + 8px + var(--rule-h) + var(--rule-gap) + 8px);
}
main > .final-cta:last-child::before { top: calc(var(--rule-gap) + 8px); }
main > .final-cta:last-child::after { bottom: calc(var(--rule-gap) + 8px); }

/* Encart crème (maquette Gabriel 08/09) : guillemets collés au texte, bloc ajusté au contenu */
@media (min-width: 769px) {
  .press-line { padding: 150px 50px; }
  .press-line blockquote { width: max-content; max-width: calc(100% - 100px); padding: 0 72px; font-size: 34px; line-height: 2; }
  .press-line blockquote::before, .press-line blockquote::after { font-size: 120px; opacity: .75; }
  .press-line blockquote::before { top: -34px; left: 0; }
  .press-line blockquote::after { bottom: -62px; right: 0; }
}

/* Footer : logos partenaires centrés sur la hauteur des listes de liens */
@media (min-width: 769px) {
  .footer-right { align-self: stretch; display: grid; grid-template-rows: auto 1fr; gap: 0; justify-items: end; margin-top: -2px; }
  .footer-partners { align-self: center; }
}

/* Home : « Découvrir Paris mérite un écrin à sa hauteur » sur une ligne */
@media (min-width: 1100px) {
  #sidecars-titre { white-space: nowrap; width: max-content; max-width: calc(100vw - 60px); margin-left: 50%; transform: translateX(-50%); }
  /* Hub : « Lequel sera le vôtre ? » passe à la ligne (br dans le h1) */
  .hub-title h1 { white-space: normal; width: auto; margin-left: 0; transform: none; }
}

/* Hub : petit texte → vignettes = petit écart ; vignettes home resserrées (titre / filet / durée) ;
   filet Parisian Night 4 px orange vif */
@media (min-width: 769px) {
  .hub-title { padding-bottom: 50px; }
  #experiences .card-content { gap: 8px; }
  #experiences .card-content h3::after { margin-top: 10px; }
  #experiences .card-content .card-by { margin-top: -2px; }
  #experiences .card:last-child .card-content h3::after { height: 4px; background: #FF6600; }
}

/* Texte → bloc visuel plein bord = petit écart (concept damier, notre signature → packshot, franchise philosophie) */
@media (min-width: 769px) {
  .line-section:has(+ .story-stack),
  .line-section:has(+ .events-section),
  .deep-band > .line-section:has(+ .full-visual),
  .line-section:has(+ .full-visual) { padding-bottom: 50px; }
}

/* Concept : filet horizontal (type footer) en tête de la bande Notre signature ;
   titre du logo sur 2 lignes et body sur 6 lignes (colonne resserrée) */
.deep-band--ruled { border-top: 1px solid var(--hairline); }
.logo-section { max-width: 1000px; }

/* Événements, Sur-mesure : intro et ambition alignées à gauche sur l'axe des pictos (schéma Gabriel) */
.prestation-intro, .prestation-content .prestation-ambition { text-align: left; }
/* Vasque : verticale partout, mobile compris */
@media (max-width: 768px) { .prestation-row .craft-media img { aspect-ratio: 6 / 7; object-position: center 60%; } }

/* Pages tours : en-têtes centrés (Réserver, Infos pratiques, L'expérience), badges « Ce qui est inclus » +70 % */
.tour-side > .eyebrow, .tour-side > h3,
.iconic-infos > .eyebrow, .iconic-infos > h3,
.tour-included > .eyebrow, .tour-included > h3 { display: block; text-align: center; }
.included-sub .faq-icon { width: 122px; height: 122px; }
/* Encart crème, version finale Gabriel (capture 11/09) : « en haut à gauche au-dessus de la 1re ligne, » en bas à droite sous la 2e */
@media (min-width: 769px) {
  .press-line blockquote::before { top: -70px; left: 60px; }
  .press-line blockquote::after { bottom: -56px; right: 40px; }
}
@media (min-width: 769px) { .press-line { padding: 190px 50px; } }   /* bande ≈ 510 comme la maquette */
/* Pages tours, mobile : rythme entre la description sur bleu nuit et « Scénario type » (47 / 47) */
@media (max-width: 768px) {
  .tour-story .events-content { padding-bottom: var(--rhythm); }
  main > .tour-cols { padding-top: var(--rhythm); }   /* .tour-story est dans une section, pas frère direct */
}

/* --- Retours Maxime, sheet L62-L68 (12/09) --------------------------------- */
/* L62 : Parisian Night — filet orange aussi en mobile (home), mention orange sur le hub */
.card-by--inline { text-transform: none; color: var(--cream); }
.card-slash { color: #FF6600; font-weight: 700; font-size: 1.35em; margin-right: 2px; }
@media (max-width: 768px) {
  #experiences .card-content h3::after { content: ''; display: block; width: 56px; height: 1px; margin: 10px auto 0; background: var(--gold); }
  #experiences .card:last-child .card-content h3::after { height: 4px; background: #FF6600; }
  #experiences .card-content .card-by { font-size: 11px; letter-spacing: 2.5px; }
  /* L64 : pictos RS centrés entre la liste Contact et les logos partenaires */
  .footer-right { gap: 28px; }
  .footer-social { margin-top: -8px; }
  /* L65 : signature « Ride your Movie » réduite en mobile */
  .final-cta--script .cta-script img { width: 70vw; }
  /* L66 : hub, À bord — photo en grand, paragraphe dessous */
  .aboard-row { grid-template-columns: 1fr; }
  .aboard-row .craft-media img { aspect-ratio: 3 / 2; }
  .aboard-row .craft-title { padding: 30px 24px; }
  /* L67 : franchise, bande philosophie — de l'air sous la dernière phrase */
  .page-franchise .events-content { padding-bottom: 30px; }
}
/* Encart crème : guillemets XXL en desktop (retour Maxime, sheet L63), positions recalées */
@media (min-width: 769px) {
  .press-line blockquote::before, .press-line blockquote::after { font-size: 200px; opacity: .8; }
  .press-line blockquote::before { top: -118px; left: -10px; }
  .press-line blockquote::after { bottom: -100px; right: -30px; }
}

/* Vignette Parisian Night, desktop (retour Fred 12/09) : « by » en minuscules, graisse fine, filet orange plus large et plus fin */
@media (min-width: 769px) {
  #experiences .card-content .card-by { text-transform: none; font-weight: 400; letter-spacing: 2.5px; }
  #experiences .card:last-child .card-content h3::after { width: 90px; height: 1px; }
}