/*
  HERO FX — mise en scène premium pour la section .hero.
  N'altère jamais : tarifs, liens, PHP, i18n, disposition du panneau de
  réservation, ni la photo hero-banner.jpg elle-même (jamais recadrée ni
  modifiée — tous les effets sont des calques superposés).

  Répartition (voir hero-fx.js) :
  - [data-reveal] (base.css/main.js) : entrée en cascade du badge, du
                 titre, du sous-titre, des CTA et des stats.
  - GSAP       : parallaxe (léger, scroll de la photo + profondeur au
                 mouvement de la souris sur deux calques), spotlight
                 (discret).
  - CSS pur    : vignette, halo chaud, scène vivante de la Hero (feux
                 arrière, avion, soleil, sol, terminal, panneau
                 départs/arrivées, carrosserie, poussière), badge
                 premium, typographie du titre, cartes stats "glass",
                 boutons CTA, balayage des boutons header.
*/

.hero { position: relative; overflow: hidden; }

.hero-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* .hero-copy-col doit rester lisible au-dessus des calques */
.hero-copy-col { position: relative; z-index: 3; }

/* ====================================================================
   GRADE SOBRE — posé sur la photo uniquement (.hero-media), jamais sur
   la colonne de texte. Statique, coût nul.
   ==================================================================== */
.hero-fx-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    radial-gradient(160% 120% at 50% 12%, rgba(10, 6, 0, 0) 50%, rgba(8, 5, 0, 0.32) 100%),
    linear-gradient(180deg, rgba(10, 6, 0, 0.18) 0%, rgba(10, 6, 0, 0) 24%, rgba(10, 6, 0, 0) 62%, rgba(6, 4, 0, 0.38) 100%);
}

.hero-fx-glowgrade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: radial-gradient(44% 58% at 74% 46%, rgba(255, 196, 120, 0.22) 0%, rgba(255, 176, 96, 0.07) 50%, rgba(255, 176, 96, 0) 75%);
}

/* ====== Spotlight interactif — très discret ====== */
.hero-fx-spotlight {
  z-index: 2;
  opacity: 0;
  background: radial-gradient(
    280px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(217, 169, 104, 0.08),
    rgba(217, 169, 104, 0.03) 40%,
    transparent 70%
  );
}

/* ====== Parallaxe (scroll uniquement, léger) ====== */
.hero-media {
  will-change: transform;
  transform: translate3d(0, var(--hero-scroll-y, 0px), 0);
}

/* ====================================================================
   SCÈNE VIVANTE DU HERO — tous les éléments ci-dessous sont des calques
   superposés à hero-banner.jpg (jamais de modification du fichier
   photo, jamais un déplacement de la Mercedes). Coordonnées mesurées
   directement sur les pixels réels de hero-banner.jpg (1983×793) pour
   un calage précis : feux arrière, avion, soleil, sol, façade vitrée,
   panneau départs/arrivées, carrosserie, poussière en suspension.

   Intensité voulue ~2-3× la version initiale (retour utilisateur :
   trop discrète) : planchers d'opacité relevés (pas seulement
   l'amplitude des respirations, pour que l'effet soit visible dès la
   première frame, même écran lumineux), halos plus larges/diffus,
   halo d'ambiance supplémentaire. Reste premium : toujours
   mix-blend-mode: screen (n'éclaircit jamais en aplat, jamais de
   couleur saturée plaquée), jamais de clignotement (ease-in-out lent).
   Deux calques de profondeur (.hero-fx-depth-far / --near) reçoivent
   en plus un très léger déplacement piloté par la souris (GSAP, voir
   hero-fx.js).
   ==================================================================== */
.hero-fx-depth-far,
.hero-fx-depth-near {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.hero-fx-depth-far { z-index: 1; }
.hero-fx-depth-near { z-index: 2; }

/* ---- 1. Feux arrière — lumière rouge calée sur le vrai bloc optique
   (jamais déplacée du centre mesuré, seul le rayon du flou augmente),
   trois couches (cœur / halo / ambiance) pour une vraie profondeur de
   halo façon photo automobile, respiration lente (~4,2s) mais bien
   perceptible. */
.hero-fx-taillight2 {
  position: absolute;
  left: 88.7%;
  top: 55.6%;
  width: 7.4%;
  height: 12.6%;
  transform: translate(-50%, -50%) rotate(-20deg);
}
.hero-fx-taillight2__ambient {
  position: absolute;
  inset: -115%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(230, 50, 32, 0.26) 0%, rgba(220, 44, 28, 0.08) 45%, rgba(220, 44, 28, 0) 76%);
  filter: blur(12px);
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: taillightAmbientBreathe 4200ms ease-in-out infinite;
}
.hero-fx-taillight2__halo {
  position: absolute;
  inset: -95%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(235, 55, 34, 0.55) 0%, rgba(224, 44, 28, 0.20) 46%, rgba(224, 44, 28, 0) 75%);
  filter: blur(8px);
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: taillightHaloBreathe 4200ms ease-in-out infinite;
}
.hero-fx-taillight2__core {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 42% 46%, rgba(255, 190, 160, 1) 0%, rgba(235, 55, 34, 0.96) 34%, rgba(160, 20, 15, 0.4) 64%, rgba(160, 20, 15, 0) 82%);
  filter: blur(0.6px);
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: taillightCoreBreathe 4200ms ease-in-out infinite;
}
@keyframes taillightAmbientBreathe { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.66; } }
@keyframes taillightHaloBreathe { 0%, 100% { opacity: 0.62; } 50% { opacity: 0.92; } }
@keyframes taillightCoreBreathe { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }

/* Reflet rouge net et perceptible au sol, dans l'axe de la voiture et
   de la perspective (aplati, flouté, jamais net). */
.hero-fx-taillight2__groundglow {
  position: absolute;
  left: 78%;
  top: 87.5%;
  width: 19%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(215, 45, 30, 0.46) 0%, rgba(215, 45, 30, 0.16) 50%, rgba(215, 45, 30, 0) 78%);
  filter: blur(5px);
  transform: translate(-50%, -50%) scaleY(0.46);
  transform-origin: center;
  opacity: 0.6;
  animation: taillightGroundBreathe 4200ms ease-in-out infinite;
}
@keyframes taillightGroundBreathe { 0%, 100% { opacity: 0.46; } 50% { opacity: 0.68; } }

/* Large flaque de lumière chaude sous/autour de la Mercedes, sur le
   dallage brillant — renforce le détachement du véhicule par rapport
   au décor (indépendante du rouge des feux, teinte plus neutre/chaude,
   comme les lumières du terminal captées par le sol mouillé). */
.hero-fx-car-ambient-ground {
  position: absolute;
  left: 73%;
  top: 84.5%;
  width: 27%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 214, 160, 0.32) 0%, rgba(255, 200, 140, 0.12) 50%, rgba(255, 200, 140, 0) 80%);
  filter: blur(9px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scaleY(0.5);
  transform-origin: center;
  opacity: 0.5;
  animation: carAmbientGroundBreathe 6000ms ease-in-out infinite;
}
@keyframes carAmbientGroundBreathe { 0%, 100% { opacity: 0.38; } 50% { opacity: 0.58; } }

/* ---- 2. Avion — calque extrait de la photo elle-même (mêmes pixels,
   contour flouté pour une fusion invisible à l'arrêt), dérive de
   quelques pixels à peine, cycle très long (voir hero-fx.js pour la
   création conditionnelle : jamais sous prefers-reduced-motion). */
.hero-fx-plane {
  position: absolute;
  left: 14.12%;
  top: 6.94%;
  width: 20.17%;
  height: 23.96%;
  animation: heroPlaneDrift 27s ease-in-out infinite alternate;
}
.hero-fx-plane img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@keyframes heroPlaneDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-4px, 2px) scale(1.006); }
}

/* ---- 3. Soleil — halo net + micro lens-flare cinématique le long de
   la diagonale, respiration lente mais bien visible. */
.hero-fx-sunflare {
  position: absolute;
  left: 16.6%;
  top: 48%;
  width: 32%;
  height: 48%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 218, 0.36) 0%, rgba(255, 224, 170, 0.14) 42%, rgba(255, 224, 170, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: sunBreathe 7000ms ease-in-out infinite;
}
.hero-fx-flare-dot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 205, 0.75) 0%, rgba(255, 240, 205, 0) 72%);
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: sunBreathe 7000ms ease-in-out infinite;
}
.hero-fx-flare-dot--1 { left: 33%; top: 54%; width: 1.5%; height: 1.5%; animation-delay: 300ms; }
.hero-fx-flare-dot--2 { left: 46%; top: 58.5%; width: 1%; height: 1%; animation-delay: 900ms; }
@keyframes sunBreathe { 0%, 100% { opacity: 0.68; } 50% { opacity: 0.98; } }

/* ---- 4. Sol de l'aéroport — reflets nets qui glissent lentement,
   comme des lumières de terminal/véhicules captées par le dallage
   brillant. Fondu-enchaîné complet à chaque passage, jamais de bord net. */
.hero-fx-groundlight {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 238, 214, 0) 0%, rgba(255, 238, 214, 0.32) 50%, rgba(255, 238, 214, 0) 100%);
  filter: blur(4px);
  opacity: 0;
}
.hero-fx-groundlight--1 {
  left: 4%;
  top: 66%;
  width: 28%;
  height: 5.5%;
  animation: groundlightDrift1 13000ms ease-in-out infinite;
}
.hero-fx-groundlight--2 {
  left: 34%;
  top: 78%;
  width: 24%;
  height: 4.5%;
  animation: groundlightDrift2 16000ms ease-in-out infinite 3000ms;
}
@keyframes groundlightDrift1 {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 0.85; }
  50% { transform: translateX(6%); opacity: 0.85; }
  85% { opacity: 0; }
  100% { transform: translateX(10%); opacity: 0; }
}
@keyframes groundlightDrift2 {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 0.75; }
  55% { transform: translateX(-5%); opacity: 0.75; }
  90% { opacity: 0; }
  100% { transform: translateX(-8%); opacity: 0; }
}

/* ---- 5. Façade vitrée du terminal ("lumières de la ville" en
   arrière-plan) — chaque zone a son propre rythme (durée/délai
   différents) pour éviter tout synchronisme artificiel : l'aéroport
   paraît actif, pas clignotant. */
.hero-fx-terminal-light {
  position: absolute;
  border-radius: 3px;
  background: radial-gradient(ellipse, rgba(255, 240, 208, 0.68) 0%, rgba(255, 224, 170, 0.24) 55%, rgba(255, 224, 170, 0) 80%);
  filter: blur(2px);
  opacity: 0.4;
}
.hero-fx-terminal-light--1 { left: 53.5%; top: 24%; width: 2.4%; height: 9.5%; animation: terminalPulse 9000ms ease-in-out infinite; }
.hero-fx-terminal-light--2 { left: 58%; top: 30%; width: 2%; height: 7.5%; animation: terminalPulse 11000ms ease-in-out infinite 2500ms; }
.hero-fx-terminal-light--3 { left: 62%; top: 22%; width: 1.8%; height: 10.5%; animation: terminalPulse 13000ms ease-in-out infinite 6000ms; }
.hero-fx-terminal-light--4 { left: 55.5%; top: 27%; width: 1.6%; height: 6%; animation: terminalPulse 10000ms ease-in-out infinite 1200ms; }
.hero-fx-terminal-light--5 { left: 60%; top: 25%; width: 1.4%; height: 8%; animation: terminalPulse 12000ms ease-in-out infinite 4200ms; }
@keyframes terminalPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }

/* ---- 6. Panneau Départs / Arrivées — intensification nette de
   l'orange déjà présent dans la photo, pulsation lente. */
.hero-fx-sign-glow {
  position: absolute;
  left: 53%;
  top: 38%;
  width: 9.5%;
  height: 16.5%;
  background: radial-gradient(ellipse, rgba(255, 174, 65, 0.62) 0%, rgba(255, 140, 40, 0.26) 55%, rgba(255, 140, 40, 0) 80%);
  mix-blend-mode: screen;
  filter: blur(3px);
  opacity: 0.8;
  animation: signPulse 5500ms ease-in-out infinite;
}
@keyframes signPulse { 0%, 100% { opacity: 0.62; } 50% { opacity: 0.95; } }

/* ---- 7. Carrosserie — deux effets combinés pour détacher nettement la
   Mercedes du décor : un reflet fin qui glisse (cycle plus court, plus
   fréquent) + un rim-light statique le long de la ligne de toit, comme
   une lumière de studio automobile qui accroche la peinture. Bande
   confinée à la zone du coffre (overflow hidden). */
.hero-fx-carsheen {
  position: absolute;
  left: 75%;
  top: 33%;
  width: 15%;
  height: 34%;
  overflow: hidden;
  transform: rotate(-8deg);
}
.hero-fx-carsheen::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 30%;
  height: 140%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 240, 224, 0.42) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  animation: carsheenSweep 8000ms ease-in-out 800ms infinite;
}
@keyframes carsheenSweep {
  0% { left: -60%; opacity: 0; }
  6% { opacity: 0.95; }
  22% { left: 120%; opacity: 0.95; }
  26% { opacity: 0; }
  100% { left: 120%; opacity: 0; }
}
.hero-fx-car-rim {
  position: absolute;
  left: 74%;
  top: 27%;
  width: 25%;
  height: 3.2%;
  transform: rotate(-7deg);
  background: linear-gradient(90deg, rgba(255, 236, 214, 0) 0%, rgba(255, 236, 214, 0.5) 40%, rgba(255, 246, 230, 0.62) 55%, rgba(255, 236, 214, 0) 100%);
  filter: blur(1.5px);
  mix-blend-mode: screen;
  opacity: 0.65;
  animation: carRimBreathe 5200ms ease-in-out infinite;
}
@keyframes carRimBreathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.78; } }

/* ---- Nouveau : léger effet cinématique de lumière en mouvement sur
   toute la scène — une large bande de lumière très diffuse qui
   traverse lentement l'ensemble de la photo (jamais localisée, jamais
   un flash : montée/descente douces, longue pause entre deux passages).
   mix-blend-mode: screen uniquement, donc ne peut qu'éclaircir, jamais
   plaquer une couleur ou assombrir la scène. */
.hero-fx-cine-sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-fx-cine-sweep::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -45%;
  width: 38%;
  height: 170%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 244, 222, 0.22) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  mix-blend-mode: screen;
  animation: cineSweep 15000ms ease-in-out 1000ms infinite;
}
@keyframes cineSweep {
  0% { left: -45%; opacity: 0; }
  8% { opacity: 1; }
  40% { left: 120%; opacity: 1; }
  48% { opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* ---- 9. Poussière atmosphérique — particules fines et élégantes dans
   la zone éclairée par le soleil, dérive lente, bien visibles sans
   jamais évoquer de la neige (positions/durées injectées en
   inline-style par hero-fx.js). */
.hero-fx-dust {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255, 247, 228, 0.85);
  box-shadow: 0 0 3px rgba(255, 240, 210, 0.7);
  opacity: 0;
}
.hero-fx-dust--a { animation-name: dustDriftA; animation-timing-function: linear; animation-iteration-count: infinite; }
.hero-fx-dust--b { animation-name: dustDriftB; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes dustDriftA {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.8; }
  85% { opacity: 0.8; }
  100% { transform: translate(7px, -28px); opacity: 0; }
}
@keyframes dustDriftB {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.68; }
  85% { opacity: 0.68; }
  100% { transform: translate(-6px, -22px); opacity: 0; }
}

/* ====== Boutons du header : balayage lumineux + léger soulèvement au
   survol (CSS pur — remplace l'ancienne interaction pilotée par JS) ====== */
.btn-header-cta {
  position: relative;
  overflow: hidden;
  transition: transform 220ms var(--p-ease-out, ease);
}
.btn-header-cta:hover {
  transform: translateY(-1px);
}
.btn-header-cta:active {
  transform: translateY(0) scale(0.98);
}
.btn-header-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  transition: transform 620ms var(--p-ease-out, ease);
  pointer-events: none;
}
.btn-header-cta:hover::after {
  transform: translateX(340%) skewX(-20deg);
}

/* ====================================================================
   BADGE PREMIUM — remplace l'ancien simple texte "eyebrow" : petit
   chip anthracite avec liseré doré, icône, coins arrondis. L'icône vit
   HORS du <p data-i18n>, en frère dans .hero-badge : le script i18n
   réécrit uniquement le textContent du <p>, jamais celui du wrapper,
   donc l'icône n'est jamais effacée par un changement de langue.
   ==================================================================== */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 13px;
  background: rgba(17, 17, 17, 0.92);
  border: 1px solid rgba(200, 169, 106, 0.4);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.16);
  transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}
.hero-badge:hover {
  border-color: rgba(217, 178, 118, 0.7);
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.22), 0 0 0 1px rgba(200, 169, 106, 0.15);
  transform: translateY(-1px);
}
.hero-badge .icon {
  width: 14px;
  height: 14px;
  color: var(--p-champagne-light, #d9a968);
  flex-shrink: 0;
}
.hero .eyebrow {
  margin: 0;
  color: var(--p-white);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: none;
  font-variant-caps: small-caps;
  letter-spacing: 0.1em;
}

/* ====================================================================
   TYPOGRAPHIE PREMIUM DU TITRE — "chrome / graphite", inspirée des
   centrales de réservation VTC haut de gamme. Sora (chargée dans
   index.html), scopée au H1 du Hero uniquement : le reste du site
   continue d'utiliser Fraunces (--font-display), rien d'autre n'est
   affecté. Taille et impact identiques à la version précédente
   (clamp inchangé), tout en restant lisible sur mobile.
   ==================================================================== */
.hero-title {
  position: relative;
  isolation: isolate;
  font-family: 'Sora', var(--font-body), sans-serif;
  font-size: clamp(2.75rem, 4.6vw, 4.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  cursor: default;
}

/* Halo très doux, en pulsation quasi imperceptible, derrière le titre. */
.hero-title::before {
  content: "";
  position: absolute;
  inset: -20% -8%;
  z-index: -1;
  background: radial-gradient(60% 70% at 32% 45%, rgba(180, 184, 192, 0.16) 0%, rgba(180, 184, 192, 0) 72%);
  filter: blur(20px);
  opacity: 0.4;
  animation: heroTitleGlowPulse 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroTitleGlowPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.03); }
}

/* Texture "métal / chrome noir" commune aux deux lignes : bandes
   graphite/argent superposées à un fin reflet diagonal (micro-reflets
   statiques), puis découpées dans le texte. Contour extrêmement
   subtil pour garder des arêtes nettes sur fond clair. */
.hero-title > span:first-child,
.hero-title-accent {
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg,
      #fafafa 0%,
      #d3d5da 11%,
      #8a8d95 27%,
      #3a3c42 43%,
      #131417 53%,
      #2c2e33 63%,
      #767981 79%,
      #e6e7ea 93%,
      #ffffff 100%);
  background-blend-mode: overlay, normal;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.14);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 -1px 1px rgba(0, 0, 0, 0.5),
    0 6px 14px rgba(17, 17, 17, 0.14);
}

/* Ligne d'accent : même texture, tons légèrement plus clairs pour
   distinguer la hiérarchie sans recourir à la couleur (pas d'italique,
   typographie technique et nette). */
.hero-title-accent {
  font-style: normal;
  font-weight: 700;
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg,
      #ffffff 0%,
      #e8e9ec 12%,
      #b6b9c0 29%,
      #6c6f77 45%,
      #232529 55%,
      #52545a 65%,
      #9a9da4 81%,
      #f4f5f6 95%,
      #ffffff 100%);
}

/* Bande de reflet déclenchée au survol : profondeur et micro-reflet
   supplémentaires, sans aucun mouvement de mise en page. */
.hero-title-hoverband {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.hero-title-hoverband::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 30%;
  height: 100%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg) translateX(0);
  transition: transform 680ms var(--p-ease-out, ease);
  mix-blend-mode: overlay;
}
.hero-title:hover .hero-title-hoverband::after {
  transform: skewX(-20deg) translateX(430%);
}
.hero-title:hover > span:first-child,
.hero-title:hover > .hero-title-accent {
  filter: brightness(1.06) contrast(1.03);
  transition: filter 320ms ease;
}

/* Les <span> de titre sont "inline" par défaut : transform n'a aucun
   effet sur les éléments inline. inline-block corrige ceci (sans rien
   changer visuellement au saut de ligne, déjà forcé par le <br>) pour
   que le mouvement vertical d'entrée soit réellement visible. */
.hero-title > span:not(.hero-fx-title-shine):not(.hero-title-hoverband) {
  display: inline-block;
}

/* Entrée du titre : fondu + léger flou qui se dissipe ("les lettres
   gagnent en netteté"), en plus du fondu/translation générique
   [data-reveal] (base.css). Étend la transition plutôt que de la
   dupliquer : mêmes durée/ease que le reste du site. */
.hero-title > span[data-reveal] {
  filter: blur(5px);
  transition: filter 640ms var(--ease-entrance, var(--p-ease-out)),
              opacity var(--dur-slow) var(--ease-entrance),
              transform var(--dur-slow) var(--ease-entrance);
}
.hero-title > span[data-reveal].is-visible {
  filter: blur(0);
}
.no-js .hero-title > span[data-reveal] {
  filter: none;
}

.hero .hero-subtitle {
  margin-top: var(--space-xl);
  font-size: 1.125rem;
  max-width: 400px;
  line-height: 1.65;
}

.hero-fx-subtitle-keyword {
  font-weight: 600;
  color: var(--color-heading);
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  flex-wrap: wrap;
}
.hero-cta-primary,
.hero-cta-secondary {
  height: 54px;
  padding-inline: var(--space-xl);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: transform 220ms var(--p-ease-out, ease), box-shadow 220ms var(--p-ease-out, ease), border-color 220ms ease;
}
.hero-cta-primary {
  box-shadow: 0 14px 30px rgba(17, 17, 17, 0.16);
}
.hero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(17, 17, 17, 0.22);
}
.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-cta-secondary .icon {
  width: 17px;
  height: 17px;
}
.hero-cta-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--p-champagne, #b8853a);
  box-shadow: 0 10px 24px rgba(184, 133, 58, 0.16);
}
.hero-cta-primary:active,
.hero-cta-secondary:active {
  transform: translateY(0) scale(0.98);
}

.hero .hero-stats {
  margin-top: var(--space-3xl);
}

/* Mots mis en valeur ("Paris", "aéroports") : léger éclat argenté,
   jamais de fond/surlignage, jamais de couleur criarde — voir
   hero-fx.js pour le repérage du mot dans le texte (résilient aux
   changements de langue). */
.hero-fx-keyword {
  color: #eceef1;
  -webkit-text-fill-color: #eceef1;
  text-shadow: 0 0 18px rgba(210, 213, 219, 0.55);
}
.hero-title-accent .hero-fx-keyword {
  color: inherit;
  -webkit-text-fill-color: inherit;
}

/* ====================================================================
   ENTRÉE DU TEXTE — réutilise le système [data-reveal] du site
   (voir base.css, piloté par js/main.js via IntersectionObserver) :
   badge, les deux lignes du titre, le sous-titre et les 3 blocs stats
   portent chacun data-reveal dans index.html. Par défaut tout est
   visible (aucune dépendance JS, dégradé propre si JS désactivé ou
   prefers-reduced-motion) ; [data-reveal] gère l'opacité/la translation
   de base, on ajoute seulement ici le fait que les <span> de titre
   doivent être inline-block pour que la translation soit visible. */

/* ---- Reflet métallique qui traverse lentement le titre ----
   Un premier passage a lieu peu après le chargement (delay 550ms,
   synchronisé avec l'apparition/mise au point du titre), puis
   l'animation se répète très lentement (cycle de 7s, dont ~1,1s de
   balayage réellement visible) pour un effet "plaque de métal sous
   une lumière qui glisse", jamais un clignotement. */
.hero-title { position: relative; }
.hero-fx-title-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-fx-title-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 16%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  mix-blend-mode: overlay;
  animation: heroTitleChromeSweep 7s ease-in-out 550ms infinite;
}
@keyframes heroTitleChromeSweep {
  0% { left: -35%; opacity: 0; }
  5% { opacity: 1; }
  15% { left: 125%; opacity: 1; }
  17% { opacity: 0; }
  100% { left: 125%; opacity: 0; }
}

/* ====================================================================
   BLOC "CENTRALE DE RÉSERVATION" — micro-indicateur de dispatch sous
   le titre : ligne lumineuse qui s'allume, puce verte "en ligne" avec
   ping doux, mention CENTRALE ACTIVE et typographie technique
   RÉSERVATION • DISPATCH • 24/7, posées sur une puce verre fumé pour
   rester lisibles sur la photo comme sur le fond clair. Apparition
   pilotée par [data-reveal] (comme le reste du Hero) + une légère
   temporisation propre pour que la ligne s'allume avant le texte.
   ==================================================================== */
.hero-dispatch {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
}
.hero-dispatch-line {
  display: block;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, rgba(52, 209, 124, 0.85) 0%, rgba(52, 209, 124, 0.1) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--p-ease-out, ease) 480ms;
}
.hero-dispatch.is-visible .hero-dispatch-line {
  transform: scaleX(1);
}
.hero-dispatch-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 11px;
  background: rgba(17, 17, 17, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 480ms var(--p-ease-out, ease) 760ms, transform 480ms var(--p-ease-out, ease) 760ms;
}
.hero-dispatch.is-visible .hero-dispatch-row {
  opacity: 1;
  transform: translateY(0);
}
.no-js .hero-dispatch-line,
.no-js .hero-dispatch-row {
  transition: none;
  transform: none;
  opacity: 1;
}
.hero-dispatch-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d17c;
  box-shadow: 0 0 6px rgba(52, 209, 124, 0.9);
  flex-shrink: 0;
}
.hero-dispatch-dot::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(52, 209, 124, 0.55);
  animation: heroDispatchPing 2.2s ease-out infinite;
}
@keyframes heroDispatchPing {
  0% { transform: scale(0.6); opacity: 0.9; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}
.hero-dispatch-status {
  color: var(--p-white);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-dispatch-sep {
  width: 1px;
  height: 11px;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.hero-dispatch-tags {
  color: var(--p-white-70);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ====================================================================
   CARTES STATS "GLASS" — chaque indicateur de confiance devient une
   carte anthracite/marine semi-transparente avec liseré doré, icône
   et ombre douce, au lieu du simple texte + séparateurs. Le séparateur
   d'origine (.stat-divider, réutilisé ailleurs sur le site) est
   masqué ici seulement, sans être supprimé du HTML.
   ==================================================================== */
.hero-stats .stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.hero-stats .stat-divider {
  display: none;
}
.hero-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 122px;
  padding: 16px 18px;
  background: linear-gradient(165deg, rgba(14, 27, 46, 0.94) 0%, rgba(22, 40, 63, 0.9) 100%);
  border: 1px solid rgba(200, 169, 106, 0.24);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 32px rgba(14, 27, 46, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 320ms var(--p-ease-out, ease), border-color 320ms ease, box-shadow 320ms ease;
}
.hero-stats .stat:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 178, 118, 0.55);
  box-shadow: 0 20px 40px rgba(14, 27, 46, 0.26);
}
.hero-stats .stat-icon {
  width: 18px;
  height: 18px;
  margin-bottom: 3px;
  color: var(--p-champagne-light, #d9a968);
}
.hero-stats .stat-value {
  color: var(--p-white);
  font-family: 'Playfair Display', var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  text-shadow: 0 0 14px rgba(200, 169, 106, 0.32);
}
.hero-stats .stat-label {
  color: var(--p-white-70);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* ====== Réduction de mouvement ====== */
.reduced-motion .hero-fx-spotlight,
body.reduced-motion .hero-fx-spotlight {
  display: none !important;
}
.reduced-motion .hero-media,
body.reduced-motion .hero-media {
  transform: none !important;
}
.reduced-motion .hero-fx-title-shine,
body.reduced-motion .hero-fx-title-shine {
  display: none !important;
}
.reduced-motion .btn-header-cta::after,
body.reduced-motion .btn-header-cta::after {
  display: none !important;
}
.reduced-motion .hero-title::before,
body.reduced-motion .hero-title::before {
  animation: none;
}
.reduced-motion .hero-title > span[data-reveal],
body.reduced-motion .hero-title > span[data-reveal] {
  filter: none;
  transition: none;
}
.reduced-motion .hero-title-hoverband::after,
body.reduced-motion .hero-title-hoverband::after {
  transition: none;
}
.reduced-motion .hero-dispatch-dot::before,
body.reduced-motion .hero-dispatch-dot::before {
  animation: none;
}
.reduced-motion .hero-dispatch-line,
.reduced-motion .hero-dispatch-row,
body.reduced-motion .hero-dispatch-line,
body.reduced-motion .hero-dispatch-row {
  transition: none;
  transform: none;
  opacity: 1;
}
/* Scène vivante du hero : les respirations (feux, soleil, terminal,
   panneau) restent visibles mais figées sur leur valeur de repos ;
   les effets purement animés (avion, sol, carrosserie, poussière) ne
   sont jamais créés par hero-fx.js quand prefers-reduced-motion est
   actif (voir JS), donc rien à masquer ici pour eux. */
.reduced-motion .hero-fx-taillight2__ambient,
.reduced-motion .hero-fx-taillight2__halo,
.reduced-motion .hero-fx-taillight2__core,
.reduced-motion .hero-fx-taillight2__groundglow,
.reduced-motion .hero-fx-car-ambient-ground,
.reduced-motion .hero-fx-car-rim,
.reduced-motion .hero-fx-sunflare,
.reduced-motion .hero-fx-flare-dot,
.reduced-motion .hero-fx-terminal-light,
.reduced-motion .hero-fx-sign-glow,
body.reduced-motion .hero-fx-taillight2__ambient,
body.reduced-motion .hero-fx-taillight2__halo,
body.reduced-motion .hero-fx-taillight2__core,
body.reduced-motion .hero-fx-taillight2__groundglow,
body.reduced-motion .hero-fx-car-ambient-ground,
body.reduced-motion .hero-fx-car-rim,
body.reduced-motion .hero-fx-sunflare,
body.reduced-motion .hero-fx-flare-dot,
body.reduced-motion .hero-fx-terminal-light,
body.reduced-motion .hero-fx-sign-glow {
  animation: none;
}
.reduced-motion .hero-fx-depth-far,
.reduced-motion .hero-fx-depth-near,
body.reduced-motion .hero-fx-depth-far,
body.reduced-motion .hero-fx-depth-near {
  transform: none !important;
}

/* ====== Mobile et tablette : on garde les effets visibles, on allège
   seulement ce qui coûte cher au rendu ======
   Seule la parallaxe de profondeur liée à la souris est coupée (pas de
   souris tactile). Tous les effets visuels de la scène (feux, sol,
   soleil, terminal, panneau, carrosserie, poussière) restent créés et
   avec la même intensité — demande explicite : la bannière doit rester
   bien visible sur mobile. Seul le rayon de flou est réduit sur
   quelques calques pour limiter le coût GPU. */
@media (max-width: 1024px) {
  .hero-fx-spotlight { display: none; }
  .hero-fx-title-shine { display: none; }
  .hero-fx-sunflare { filter: none; }
  .hero-fx-terminal-light { filter: blur(1px); }
  .hero-fx-taillight2__ambient { filter: blur(8px); }
  .hero-fx-groundlight { filter: blur(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fx-spotlight { display: none !important; }
  .hero-fx-title-shine { display: none !important; }
  .btn-header-cta::after { display: none !important; }
  .hero-title::before { animation: none !important; }
  .hero-title > span[data-reveal] { filter: none !important; transition: none !important; }
  .hero-title-hoverband::after { transition: none !important; }
  .hero-dispatch-dot::before { animation: none !important; }
  .hero-dispatch-line,
  .hero-dispatch-row { transition: none !important; transform: none !important; opacity: 1 !important; }
  .hero-fx-taillight2__ambient,
  .hero-fx-taillight2__halo,
  .hero-fx-taillight2__core,
  .hero-fx-taillight2__groundglow,
  .hero-fx-car-ambient-ground,
  .hero-fx-car-rim,
  .hero-fx-sunflare,
  .hero-fx-flare-dot,
  .hero-fx-terminal-light,
  .hero-fx-sign-glow {
    animation: none !important;
  }
  .hero-fx-depth-far,
  .hero-fx-depth-near {
    transform: none !important;
  }
}

/* ====== Mobile : titre qui ne déborde jamais (même breakpoint que
   layout.css, qui garde la main sur la taille exacte), CTA et cartes
   stats qui s'empilent proprement, badge qui reste lisible ====== */
@media (max-width: 767px) {
  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta-primary,
  .hero-cta-secondary {
    justify-content: center;
    width: 100%;
  }
  .hero-stats .stat-row {
    flex-direction: column;
  }
  .hero-stats .stat {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .hero-stats .stat-icon {
    margin-bottom: 0;
  }
  .hero-dispatch-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .hero-dispatch-sep {
    display: none;
  }
  .hero-dispatch-tags {
    flex-basis: 100%;
    padding-left: 17px;
    white-space: normal;
  }
}