/* =====================================================================
   THÈME V19 — SECTIONS DYNAMIQUES PREMIUM (effets de mouvement)
   =====================================================================
   Feuille complémentaire à theme-v19.css, chargée juste après elle par
   templates/base.html.twig (même préfixe `body.theme-v19`, même
   spécificité : à égalité, c'est l'ordre de chargement qui tranche, d'où
   les surcharges ci-dessous sans !important).

   Pilotée par public/assets/js/_init/theme-v19/scroll-effects.js :
     - html.js-motion        : posée avant le premier rendu (script inline
                               dans le <head>) uniquement si l'utilisateur
                               n'a PAS demandé prefers-reduced-motion. Tous
                               les états initiaux masqués sont sous cette
                               classe : sans JS, tout reste visible.
     - [data-reveal].is-visible, .hero-showcase.is-loaded
     - variables --progress / --progress-enter / --progress-exit
       (sections [data-scroll-progress]), --page-scroll (sur <html>),
       --mx / --my (cartes [data-spotlight]).

   Sommaire :
     1. Moteur (reveal, cascade, filet de sécurité)
     2. Hero premium (.hero-showcase--premium)
     3. Section véhicule floqué au défilement (.fleet-drive)
     4. Réassurance premium (.guarantees-reassurance--premium)
     5. Pied de page dynamique (.site-footer)
   ===================================================================== */

/* ============ 1. MOTEUR ============ */
/* État initial masqué UNIQUEMENT si le JS a confirmé qu'il est là et que
   l'utilisateur accepte le mouvement. Cascade : --i (0, 1, 2…) posé en
   style inline sur chaque élément, 90 ms d'écart. */
html.js-motion body.theme-v19 [data-reveal]{
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
  /* Filet de sécurité : si scroll-effects.js ne pose jamais .is-visible
     (fichier bloqué, erreur JS en amont…), l'animation ci-dessous rend
     l'élément visible d'elle-même après 2,5 s. */
  animation: motion-reveal-fallback 0s linear 2.5s forwards;
}
html.js-motion body.theme-v19 [data-reveal="left"]{ transform: translate3d(-36px, 0, 0); }
html.js-motion body.theme-v19 [data-reveal="right"]{ transform: translate3d(36px, 0, 0); }
html.js-motion body.theme-v19 [data-reveal="zoom"]{ transform: scale(.94); }
html.js-motion body.theme-v19 [data-reveal].is-visible{ opacity: 1; transform: none; }
@keyframes motion-reveal-fallback { to { opacity: 1; transform: none; } }

/* ============ 2. HERO PREMIUM ============ */
/* Même principe que la V19 (texte à gauche, véhicule floqué + Paris à
   droite) : la photo n'est plus un background-image figé mais une couche
   dédiée (.hero-showcase__bg, parallaxe lente au défilement + arrivée en
   fondu/zoom au chargement), sous un voile lisible, deux halos animés, et
   des cartes « verre » flottantes qui bougent plus vite que le texte
   (profondeur). */
body.theme-v19 .hero-showcase--premium{
  background-image: none;
  background-color: var(--ev-navy-deep);
  min-height: min(85vh, 900px);
  isolation: isolate;
}
body.theme-v19 .hero-showcase--premium::before, body.theme-v19 .hero-showcase--premium::after{ content: none; }
body.theme-v19 .hero-showcase__bg{
  position: absolute;
  inset: -22% 0;
  z-index: 0;
  will-change: transform;
}
body.theme-v19 .hero-showcase__bg-img{
  position: absolute;
  inset: 0;
  background: url("/assets/img/theme-v19/hero-vehicule-tour-eiffel.png") center 55% / cover no-repeat;
  transform-origin: 60% 60%;
  transition: transform 2.2s cubic-bezier(.2, .7, .2, 1), opacity 1.1s ease-out;
}
html.js-motion body.theme-v19 .hero-showcase:not(.is-loaded) .hero-showcase__bg-img{ opacity: 0; transform: scale(1.14) translateX(3%); }
body.theme-v19 .hero-showcase__veil{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 18, 43, .88) 0%, rgba(0, 18, 43, .64) 34%, rgba(0, 18, 43, .14) 58%, rgba(0, 18, 43, 0) 72%),
    linear-gradient(180deg, rgba(0, 9, 25, .28) 0%, rgba(0, 9, 25, 0) 26%, rgba(0, 9, 25, 0) 72%, rgba(0, 9, 25, .62) 100%);
}
body.theme-v19 .hero-showcase__glow{
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(6px);
}
body.theme-v19 .hero-showcase__glow--1{
  width: 54vw; height: 54vw; right: -16vw; top: -22vw;
  background: radial-gradient(circle, rgba(127, 176, 232, .36), transparent 62%);
  animation: hero-glow-drift 16s ease-in-out infinite alternate;
}
body.theme-v19 .hero-showcase__glow--2{
  width: 40vw; height: 40vw; left: -12vw; bottom: -20vw;
  background: radial-gradient(circle, rgba(192, 16, 16, .30), transparent 62%);
  animation: hero-glow-drift 21s ease-in-out infinite alternate-reverse;
}
@keyframes hero-glow-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-6vw, 5vw, 0) scale(1.18); }
}
body.theme-v19 .hero-showcase--premium .hero-showcase__content{ z-index: 2; }

/* Texte : sortie liée au défilement (remonte et s'efface en quittant la
   bannière), entrée en cascade au chargement. */
body.theme-v19 .hero-showcase--premium .hero-showcase__body{
  transform: translate3d(0, calc(var(--progress-exit, 0) * -70px), 0);
  opacity: calc(1 - var(--progress-exit, 0) * 1.5);
}
body.theme-v19 .hero-showcase--premium .hero-showcase__body > *{
  transition: opacity .9s ease-out, transform .9s cubic-bezier(.2, .7, .2, 1);
}
body.theme-v19 .hero-showcase--premium .hero-showcase__body > :nth-child(1){ transition-delay: .25s; }
body.theme-v19 .hero-showcase--premium .hero-showcase__body > :nth-child(2){ transition-delay: .38s; }
body.theme-v19 .hero-showcase--premium .hero-showcase__body > :nth-child(3){ transition-delay: .52s; }
body.theme-v19 .hero-showcase--premium .hero-showcase__body > :nth-child(4){ transition-delay: .66s; }
body.theme-v19 .hero-showcase--premium .hero-showcase__body > :nth-child(5){ transition-delay: .80s; }
html.js-motion body.theme-v19 .hero-showcase:not(.is-loaded) .hero-showcase__body > *{ opacity: 0; transform: translate3d(0, 30px, 0); }

/* Pastille « en direct » dans le kicker */
body.theme-v19 .hero-showcase__live{
  position: relative;
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, .7);
  animation: motion-pulse 2.2s ease-out infinite;
}
@keyframes motion-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); }
  70%  { box-shadow: 0 0 0 12px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}
/* Fin de titre en dégradé + trait qui se dessine sous le mot-clé. Le
   dégradé de texte annule le text-shadow du titre (sinon il « bave »
   derrière les lettres transparentes). */
body.theme-v19 .hero-showcase__title-accent{
  position: relative;
  display: inline-block;
  padding-bottom: .06em;
  background: linear-gradient(90deg, #ffffff 0%, var(--ev-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .55));
}
body.theme-v19 .hero-showcase__title-accent::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: .12em;
  border-radius: 100vmax;
  background: linear-gradient(90deg, var(--ev-primary), rgba(192, 16, 16, .35));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.2, .7, .2, 1) 1.05s;
}
body.theme-v19 .hero-showcase.is-loaded .hero-showcase__title-accent::after{ transform: scaleX(1); }
html:not(.js-motion) body.theme-v19 .hero-showcase__title-accent::after{ transform: scaleX(1); }

/* Reflet qui balaie le bouton principal toutes les 5 s */
body.theme-v19 .hero-showcase__cta .btn{ position: relative; overflow: hidden; }
body.theme-v19 .hero-showcase__cta .btn-primary::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .42) 50%, transparent 68%);
  transform: translateX(-130%);
  animation: motion-shine 5s ease-in-out 2.2s infinite;
  pointer-events: none;
}
@keyframes motion-shine {
  0%, 35% { transform: translateX(-130%); }
  60%, 100% { transform: translateX(130%); }
}
body.theme-v19 .hero-showcase__cta .btn{ transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
body.theme-v19 .hero-showcase__cta .btn:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }

/* Cartes « verre » flottantes (colonne droite) : plus rapides que le
   texte au défilement (profondeur), flottement lent en continu, entrée
   décalée depuis la droite. */
body.theme-v19 .hero-showcase__side{
  position: relative;
  min-height: 400px;
  align-self: stretch;
  transform: translate3d(0, calc(var(--progress-exit, 0) * -150px), 0);
  opacity: calc(1 - var(--progress-exit, 0) * 1.3);
}
body.theme-v19 .hero-showcase__card{
  position: absolute;
  transition: opacity .9s ease-out, transform .9s cubic-bezier(.2, .7, .2, 1);
}
body.theme-v19 .hero-showcase__card--1{ top: 4%; right: 0; transition-delay: .95s; }
body.theme-v19 .hero-showcase__card--2{ top: 44%; left: 4%; transition-delay: 1.12s; }
body.theme-v19 .hero-showcase__card--3{ bottom: 2%; right: 8%; transition-delay: 1.3s; }
html.js-motion body.theme-v19 .hero-showcase:not(.is-loaded) .hero-showcase__card{ opacity: 0; transform: translate3d(40px, 0, 0); }
body.theme-v19 .hero-showcase__card-inner{
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 230px;
  padding: .85rem 1.1rem .85rem .9rem;
  border-radius: 16px;
  color: #fff;
  /* Fond marine translucide (et non blanc) : les cartes se posent sur le
     ciel clair de la photo, un verre blanc y devenait illisible. */
  background: rgba(0, 18, 43, .5);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: 0 24px 50px rgba(0, 9, 25, .42), inset 0 1px 0 rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: hero-card-float 6s ease-in-out infinite;
}
body.theme-v19 .hero-showcase__card--2 .hero-showcase__card-inner{ animation-duration: 7.5s; animation-delay: -2s; }
body.theme-v19 .hero-showcase__card--3 .hero-showcase__card-inner{ animation-duration: 6.8s; animation-delay: -4s; }
@keyframes hero-card-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}
body.theme-v19 .hero-showcase__card-icon{
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ev-primary), #7a0a0a);
  box-shadow: 0 8px 18px rgba(192, 16, 16, .35);
}
body.theme-v19 .hero-showcase__card-icon .icon{ --icon-height: 22px; --icon-color: #fff; }
body.theme-v19 .hero-showcase__card-icon--live{ background: rgba(255, 255, 255, .12); box-shadow: none; }
body.theme-v19 .hero-showcase__card-icon--live .hero-showcase__live{ width: 12px; height: 12px; }
body.theme-v19 .hero-showcase__card-text{ display: flex; flex-direction: column; gap: .1rem; line-height: 1.25; }
body.theme-v19 .hero-showcase__card-text strong{ font-family: var(--ev-heading-font-family); font-size: var(--ev-step-0); font-weight: 700; }
body.theme-v19 .hero-showcase__card-text span{ font-size: var(--ev-step--2); color: rgba(255, 255, 255, .78); }

/* Indicateur de défilement (souris) : s'efface dès que l'on quitte le hero */
body.theme-v19 .hero-showcase__scroll{
  position: absolute;
  left: 50%; bottom: 18px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgba(255, 255, 255, .78);
  font-size: var(--ev-step--2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: calc(1 - var(--progress-exit, 0) * 5);
  transition: color .3s;
}
body.theme-v19 .hero-showcase__scroll:hover{ color: #fff; }
body.theme-v19 .hero-showcase__scroll-mouse{
  position: relative;
  width: 24px; height: 38px;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 14px;
}
body.theme-v19 .hero-showcase__scroll-mouse::before{
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: hero-scroll-dot 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-dot {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (max-width: 900px) {
  body.theme-v19 .hero-showcase--premium{ min-height: 76vh; }
  body.theme-v19 .hero-showcase__side{ min-height: 0; display: flex; flex-wrap: wrap; gap: .6rem; transform: none; opacity: 1; }
  body.theme-v19 .hero-showcase__card{ position: static; }
  body.theme-v19 .hero-showcase__card-inner{ min-width: 0; padding: .65rem .85rem .65rem .65rem; animation: none; }
  body.theme-v19 .hero-showcase__card-icon{ width: 34px; height: 34px; border-radius: 10px; }
  body.theme-v19 .hero-showcase__card-icon .icon{ --icon-height: 18px; }
  body.theme-v19 .hero-showcase__scroll{ display: none; }
  body.theme-v19 .hero-showcase__veil{
    background:
      linear-gradient(180deg, rgba(0, 18, 43, .62) 0%, rgba(0, 18, 43, .72) 55%, rgba(0, 18, 43, .9) 100%);
  }
}

/* ============ 3. VÉHICULE FLOQUÉ AU DÉFILEMENT (.fleet-drive) ============ */
/* Le van détouré (van-floque-detoure.webp/png, issu de la photo du hero)
   traverse la scène de gauche à droite à mesure que la section traverse
   l'écran (--progress 0 → 1, posé par scroll-effects.js). Les jalons
   s'allument à son passage (--at = progression à laquelle l'avant du
   véhicule atteint le jalon). Aucune animation temporelle sur la
   position : tout est lié au défilement, donc réversible et sans jank. */
body.theme-v19 .fleet-drive{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: var(--ev-navy-deep);
  padding-block: var(--ev-space-2xl) var(--ev-space-xl);
}
body.theme-v19 .fleet-drive__sky{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 70% at 72% 0%, rgba(127, 176, 232, .26), transparent 62%),
    radial-gradient(40% 55% at 8% 100%, rgba(192, 16, 16, .22), transparent 60%),
    linear-gradient(180deg, #001838 0%, #002050 58%, #001330 100%);
}
/* Silhouette de skyline parisienne (SVG inline, répétée) en bas de la scène */
body.theme-v19 .fleet-drive__sky::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  opacity: .16;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%237fb0e8' d='M0 200V150h40v-30h30v30h40v-50h30v50h40v-20h50v20h30v-60h30v60h50v-10h40v10h40V60l20-20 10-40 10 40 20 20v90h40v-30h40v30h40v-40h40v40h60v-20h40v20h40V80h30v70h50v-10h40v10h40v-50h30v50h40v-25h40v25h50v-35h30v35h70v50z'/%3E%3C/svg%3E") bottom / auto 100% repeat-x;
  pointer-events: none;
}
body.theme-v19 .fleet-drive__content{ position: relative; width: 100%; margin-inline: auto; padding-inline: var(--ev-grid-gutter); }
@media (min-width: 768px) {
  body.theme-v19 .fleet-drive__content{ max-width: clamp(var(--ev-grid-min-width), var(--ev-grid-preferred-width), var(--ev-grid-max-width)); }
}
body.theme-v19 .fleet-drive__eyebrow{ color: var(--ev-accent); }
body.theme-v19 .fleet-drive__title{ color: #fff; }
body.theme-v19 .fleet-drive__intro{ color: rgba(255, 255, 255, .8); }

body.theme-v19 .fleet-drive__stage{
  position: relative;
  height: clamp(230px, 31vw, 430px);
  margin-top: var(--ev-space-m);
}
body.theme-v19 .fleet-drive__road{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 27%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(0, 0, 0, .28) 100%);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
body.theme-v19 .fleet-drive__road::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 176, 232, .55), transparent);
}
/* Pointillés de la chaussée : défilent avec la progression (vitesse liée
   au scroll, comme le véhicule). */
body.theme-v19 .fleet-drive__lane{
  position: absolute;
  left: 0; right: 0; top: 48%;
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 56px, transparent 56px 112px);
  background-position-x: calc(var(--progress, 0) * -1400px);
}
body.theme-v19 .fleet-drive__van{
  position: absolute;
  left: 0; bottom: 9%;
  width: clamp(270px, 42vw, 640px);
  transform: translate3d(calc(var(--progress, 0) * (100vw + 100%) - 100%), 0, 0);
  will-change: transform;
}
body.theme-v19 .fleet-drive__van img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .5));
  animation: fleet-bob 1.15s ease-in-out infinite alternate;
}
@keyframes fleet-bob {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(0, -3px, 0) rotate(-.25deg); }
}
body.theme-v19 .fleet-drive__shadow{
  position: absolute;
  left: 4%; right: 4%; bottom: -5%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 68%);
}
/* Traînées de vitesse derrière le véhicule */
body.theme-v19 .fleet-drive__speed{
  position: absolute;
  right: 92%; top: 30%;
  width: 46%; height: 34%;
  background: repeating-linear-gradient(180deg, transparent 0 20%, rgba(255, 255, 255, .5) 20% 24%, transparent 24% 50%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 85%);
  mask: linear-gradient(90deg, transparent, #000 85%);
  opacity: .55;
}
body.theme-v19 .fleet-drive__milestones{
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 66%;
}
body.theme-v19 .fleet-drive__milestone{
  --lit: clamp(0, (var(--progress, 0) - var(--at, .5)) * 12, 1);
  position: absolute;
  left: var(--x, 50%);
  top: 0;
  height: 100%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-size: var(--ev-step--1);
  font-weight: 600;
  white-space: nowrap;
  color: rgb(255 255 255 / calc(.45 + var(--lit) * .55));
}
body.theme-v19 .fleet-drive__milestone i{
  font-style: normal;
  font-family: var(--ev-heading-font-family);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / calc(.28 + var(--lit) * .5));
  background: rgb(192 16 16 / var(--lit));
  box-shadow: 0 0 0 calc(var(--lit) * 8px) rgba(192, 16, 16, .22), 0 8px 20px rgba(0, 0, 0, calc(var(--lit) * .4));
  transform: scale(calc(1 + var(--lit) * .12));
}
body.theme-v19 .fleet-drive__milestone::after{
  content: "";
  flex: 1;
  width: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / calc(.15 + var(--lit) * .45)), transparent);
}
body.theme-v19 .fleet-drive__equip{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin: var(--ev-space-l) 0 0;
  padding: 0;
  list-style: none;
}
body.theme-v19 .fleet-drive__equip li{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.05rem .6rem .85rem;
  border-radius: 100vmax;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--ev-step--1);
  font-weight: 600;
  color: #fff;
  transition: background .3s, transform .3s;
}
body.theme-v19 .fleet-drive__equip li:hover{ background: rgba(255, 255, 255, .15); transform: translateY(-2px); }
body.theme-v19 .fleet-drive__equip li::before{
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  background: var(--ev-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 700px) {
  body.theme-v19 .fleet-drive__stage{ height: 280px; }
  body.theme-v19 .fleet-drive__van{ width: 72vw; }
  /* Libellés sur 2 lignes max (sinon ils se chevauchent à 4 jalons sur 390px) */
  body.theme-v19 .fleet-drive__milestone{ font-size: .66rem; line-height: 1.15; white-space: normal; max-width: 78px; text-align: center; gap: .4rem; }
  body.theme-v19 .fleet-drive__milestone i{ width: 28px; height: 28px; }
}

/* ============ 4. RÉASSURANCE PREMIUM ============ */
@property --gr-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
body.theme-v19 .guarantees-reassurance--premium{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%);
}
/* Trame fine estompée en fond (touche « technique ») */
body.theme-v19 .guarantees-reassurance--premium::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 32, 80, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 32, 80, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask: radial-gradient(70% 70% at 50% 35%, #000 10%, transparent 100%);
  mask: radial-gradient(70% 70% at 50% 35%, #000 10%, transparent 100%);
  pointer-events: none;
}
body.theme-v19 .guarantees-reassurance--premium::after{
  content: "";
  position: absolute;
  width: 40vw; height: 40vw;
  right: -18vw; top: -22vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 176, 232, .22), transparent 62%);
  pointer-events: none;
}
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__content{ position: relative; z-index: 1; }
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__item{
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-radius: 20px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(0, 32, 80, .08);
  box-shadow: 0 10px 30px rgba(0, 32, 80, .06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s, border-color .45s, opacity .75s cubic-bezier(.2, .7, .2, 1);
}
/* Halo qui suit le pointeur (--mx/--my posés par scroll-effects.js) */
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__item::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(192, 16, 16, .11), transparent 62%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
/* Trait dégradé qui se dessine en haut de la carte à son apparition */
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__item::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-primary), var(--ev-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms + .4s);
}
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__item.is-visible::after,
html:not(.js-motion) body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__item::after{ transform: scaleX(1); }
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__item:hover{
  transform: translateY(-7px);
  box-shadow: 0 26px 54px rgba(0, 32, 80, .15);
  border-color: rgba(192, 16, 16, .28);
}
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__item:hover::before{ opacity: 1; }
body.theme-v19 .guarantees-reassurance__num{
  position: absolute;
  top: .9rem; right: 1.1rem;
  font-family: var(--ev-heading-font-family);
  font-weight: 700;
  font-size: var(--ev-step-4);
  line-height: 1;
  color: rgba(0, 32, 80, .08);
  transition: color .4s, transform .4s;
}
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__item:hover .guarantees-reassurance__num{ color: rgba(192, 16, 16, .18); transform: translateY(-2px); }
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__icon{
  position: relative;
  width: 62px; height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(192, 16, 16, .12), rgba(127, 176, 232, .2));
}
/* Anneau dégradé qui tourne autour de l'icône au survol (@property
   --gr-angle : les navigateurs sans support gardent un anneau fixe) */
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__icon::before{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 21px;
  padding: 2px;
  background: conic-gradient(from var(--gr-angle), var(--ev-primary), var(--ev-accent), var(--ev-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s;
}
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__item:hover .guarantees-reassurance__icon::before{ opacity: 1; animation: gr-ring-spin 2.6s linear infinite; }
@keyframes gr-ring-spin { to { --gr-angle: 360deg; } }
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__icon .icon{ --icon-height: 28px; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
body.theme-v19 .guarantees-reassurance--premium .guarantees-reassurance__item:hover .guarantees-reassurance__icon .icon{ transform: scale(1.14) rotate(-6deg); }
body.theme-v19 .guarantees-reassurance__proof{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: auto;
  padding-top: .6rem;
  font-size: var(--ev-step--2);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ev-navy);
}
body.theme-v19 .guarantees-reassurance__proof::before{
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ev-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* Bandeau défilant des garanties (contenu dupliqué une fois dans le HTML :
   la translation de -50 % boucle sans raccord visible). Pause au survol. */
body.theme-v19 .guarantees-reassurance__strip{
  margin-top: var(--ev-space-xl);
  padding-block: .95rem;
  border-block: 1px solid rgba(0, 32, 80, .09);
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.theme-v19 .guarantees-reassurance__track{
  display: flex;
  width: max-content;
  animation: gr-marquee 40s linear infinite;
}
body.theme-v19 .guarantees-reassurance__strip:hover .guarantees-reassurance__track{ animation-play-state: paused; }
body.theme-v19 .guarantees-reassurance__track span{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-right: 2.75rem;
  white-space: nowrap;
  font-size: var(--ev-step--1);
  font-weight: 600;
  color: var(--ev-navy);
}
body.theme-v19 .guarantees-reassurance__track span::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ev-primary);
  box-shadow: 0 0 0 4px rgba(192, 16, 16, .12);
}
@keyframes gr-marquee { to { transform: translateX(-50%); } }

/* ============ 5. PIED DE PAGE DYNAMIQUE ============ */
/* La photo (technicien + véhicule + Tour Eiffel) passe de background-image
   figé à une couche .site-footer__bg en parallaxe lente ; vague animée en
   haut (couleur du fond de page, pour « fondre » la section précédente),
   colonnes en cascade, liens à soulignement glissant, pastille de
   disponibilité, véhicule qui avance sur une ligne à mesure que le pied
   de page apparaît, anneau de progression sur « Défiler vers le haut ». */
body.theme-v19 .site-footer{ background-image: none; padding-top: calc(clamp(2.75rem, 5vw, 4.5rem) + clamp(28px, 5vw, 70px)); }
body.theme-v19 .site-footer__bg{
  position: absolute;
  inset: -16% 0;
  z-index: 0;
  background:
    linear-gradient(125deg, rgba(0, 24, 56, .78) 0%, rgba(0, 24, 56, .66) 42%, rgba(0, 24, 56, .74) 100%),
    url("/assets/img/theme-v19/footer-technicien-tour-eiffel.png") center 38% / cover no-repeat;
  will-change: transform;
}
body.theme-v19 .site-footer::before{ z-index: 1; }
body.theme-v19 .site-footer__wave{
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: clamp(28px, 5vw, 70px);
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  line-height: 0;
}
body.theme-v19 .site-footer__wave svg{
  position: absolute;
  top: 0; left: 0;
  width: 200%;
  height: 100%;
  fill: var(--ev-body-bg);
}
body.theme-v19 .site-footer__wave svg:nth-child(1){ animation: footer-wave 22s linear infinite; }
body.theme-v19 .site-footer__wave svg:nth-child(2){ opacity: .55; animation: footer-wave 15s linear infinite reverse; }
@keyframes footer-wave { to { transform: translateX(-50%); } }
body.theme-v19 .site-footer__content{ z-index: 3; }

body.theme-v19 .site-footer__status{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: var(--ev-space-s) 0 0;
  padding: .42rem .95rem .42rem .6rem;
  border-radius: 100vmax;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: var(--ev-step--1);
  font-weight: 600;
}
body.theme-v19 .site-footer__status-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #3ddc84;
  animation: motion-pulse 2.2s ease-out infinite;
}
/* Liens : soulignement qui glisse depuis la gauche + léger décalage */
body.theme-v19 .site-footer__links a{
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: color .3s, transform .3s cubic-bezier(.2, .7, .2, 1);
}
body.theme-v19 .site-footer__links a::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, var(--ev-accent), #fff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
body.theme-v19 .site-footer__links a:hover, body.theme-v19 .site-footer__links a:focus-visible{ text-decoration: none; transform: translateX(4px); }
body.theme-v19 .site-footer__links a:hover::before, body.theme-v19 .site-footer__links a:focus-visible::before{ transform: scaleX(1); }

/* Ligne de route + véhicule qui avance avec l'apparition du pied de page
   (--progress-enter posé sur <footer> par scroll-effects.js ; cqw =
   largeur de la ligne, via container-type). */
body.theme-v19 .site-footer__track{
  position: relative;
  container-type: inline-size;
  height: 30px;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 2px dashed rgba(255, 255, 255, .2);
}
body.theme-v19 .site-footer__track-van{
  position: absolute;
  left: 0; bottom: 1px;
  width: 64px;
  line-height: 0;
  transform: translate3d(calc(var(--progress-enter, 1) * (100cqw - 64px)), 0, 0);
  transition: transform .18s linear;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
body.theme-v19 .site-footer__track-van svg{ width: 100%; height: auto; display: block; }
body.theme-v19 .site-footer__bar{ margin-top: var(--ev-space-s); border-top: 0; }

/* Retour en haut : anneau de progression (--page-scroll sur <html>) */
body.theme-v19 .site-footer__scroll-top{ gap: .7rem; }
body.theme-v19 .site-footer__scroll-ring{
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
}
body.theme-v19 .site-footer__scroll-ring svg{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
body.theme-v19 .site-footer__scroll-ring circle{ fill: none; stroke-width: 2.5; }
body.theme-v19 .site-footer__scroll-ring circle:nth-child(1){ stroke: rgba(255, 255, 255, .18); }
body.theme-v19 .site-footer__scroll-ring circle:nth-child(2){
  stroke: var(--ev-accent);
  stroke-linecap: round;
  stroke-dasharray: calc(var(--page-scroll, 0) * 100) 100;
  transition: stroke-dasharray .15s linear;
}
body.theme-v19 .site-footer__scroll-icon{ transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
body.theme-v19 .site-footer__scroll-top:hover .site-footer__scroll-icon{ transform: translateY(-4px); }

@media (max-width: 620px) {
  body.theme-v19 .site-footer__track{ margin-top: var(--ev-space-l); }
  body.theme-v19 .site-footer__track-van{ width: 48px; transform: translate3d(calc(var(--progress-enter, 1) * (100cqw - 48px)), 0, 0); }
}