/* =====================================================================
   FLOTLY — Le site vitrine, d'après la maquette du client (14/09/2026)
   ---------------------------------------------------------------------
   La maquette fait 1024 px de large. Chaque mesure ci-dessous est écrite
   en pixels de la maquette, multipliés par --u : un pixel de maquette.
   Sur ordinateur, --u suit la largeur de la page (1024 px de maquette =
   toute la largeur) : à 1440 px on voit la maquette agrandie, rien ne
   bouge. Sur téléphone, --u vaut 1 px et les sections se rangent l'une
   sous l'autre (bloc « téléphone » à la fin).
   ===================================================================== */

:root {
  --bleu:        #0A8CFF;
  --bleu-titre:  #0A8FFF;
  --bleu-sur:    #178AEA;
  --nuit:        #031528;
  --encre:       #060A16;
  --gris:        #5F6270;
  --gris-2:      #454853;
  --gris-3:      #2A303C;
  --tuile:       #EDF6FF;
  --bande:       #EEF5FF;
  --vert:        #13A57B;
  --vert-fond:   #DAF6EC;
  --titre:       "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texte:       "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #FFFFFF; color: var(--encre); font-family: var(--texte); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid #4DB0FF; outline-offset: 2px; border-radius: 4px; }
i, em { font-style: normal; }

/* --- L'échelle : un pixel de maquette ------------------------------------ */
.page { --u: 1px; overflow-x: clip; }
@media (min-width: 860px) {
  .page { container-type: inline-size; }
  .page > * { --u: min(calc(100cqw / 1024), 1.875px); }
}
.cadre { position: relative; width: calc(1024 * var(--u)); height: 100%; margin-inline: auto; }

.ico { width: 1em; height: 1em; flex: none; }
.rond { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bleu); color: #fff; }
.rond .ico { width: 64%; height: 64%; stroke-width: 3; }
.bleu { color: var(--bleu-titre); }

/* --- Le logo du client (15/09/2026) : sa tuile au F, et son mot --------- */
/* Le mot est un dessin (App\Core\Marque::mot) : sa hauteur suit la taille de
   police posée plus bas ; « Flotl » en blanc sur la nuit, le « y » en bleu. */
.logo-mot { display: inline-flex; align-items: flex-start; line-height: 1; color: #fff; white-space: nowrap; }
.logo-mot .marque-mot-svg { display: block; height: 1.05em; width: auto; overflow: visible; }
img.logo-f { display: block; object-fit: contain; }

/* =====================================================================
   1. L'ENTRÉE — elle tient TOUJOURS dans l'écran (15/09/2026)
   ---------------------------------------------------------------------
   Une scène de 1440 × 810, mise à l'échelle par --h : la plus grande qui
   tienne à la fois en largeur ET en hauteur (100svh). À l'ouverture, tout
   est visible — le titre, le bouton, l'écran, la voiture, le téléphone —
   quelle que soit la taille de l'écran. La ville couvre tout le fond.
   ===================================================================== */
.heros { --h: min(calc(100cqw / 1440), calc(100svh / 810)); position: relative; z-index: 2; overflow: hidden; color: #fff; background: #06141E;
  height: max(calc(810 * var(--h)), min(100svh, calc(1015 * var(--h)))); }
@supports not (height: 100svh) { .heros { --h: min(calc(100cqw / 1440), calc(100vh / 810)); height: max(calc(810 * var(--h)), min(100vh, calc(1015 * var(--h)))); } }
.heros-fond { position: absolute; inset: -2%; translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -6px); }
.heros-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; transform-origin: 58% 58%; transform: scale(1.04); }
.heros-voile { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 12, 24, .95) 0%, rgba(3, 12, 24, .86) 26%, rgba(3, 12, 24, .5) 48%, rgba(3, 12, 24, .12) 66%, rgba(3, 12, 24, .1) 84%, rgba(3, 12, 24, .4) 100%),
    linear-gradient(180deg, rgba(3, 12, 24, .72) 0%, rgba(3, 12, 24, 0) 20%, rgba(3, 12, 24, 0) 72%, rgba(3, 12, 24, .5) 100%); }
.heros-scene { position: relative; width: calc(1440 * var(--h)); height: calc(810 * var(--h)); margin-inline: auto; }

/* L'en-tête : une rangée — le logo, le menu, la langue, la connexion. */
.entete { position: absolute; inset: 0 0 auto 0; z-index: 6; height: calc(92 * var(--h)); display: flex; align-items: center; padding: 0 calc(56 * var(--h)); color: #fff; }
.entete .logo { display: flex; align-items: center; gap: calc(12 * var(--h)); }
.entete .logo-f { width: calc(46 * var(--h)); height: calc(46 * var(--h)); }
.entete .logo-mot { font-size: calc(38 * var(--h)); }
.menu { display: flex; align-items: center; gap: calc(34 * var(--h)); margin-left: auto; font-size: calc(16 * var(--h)); font-weight: 450; line-height: 1; }
.menu > a, .menu summary { position: relative; padding: calc(8 * var(--h)) 0; color: rgba(255, 255, 255, .9); white-space: nowrap; transition: color .15s ease-out; }
.menu > a:hover, .menu summary:hover { color: #fff; }
.menu > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-3 * var(--h)); height: calc(3 * var(--h)); border-radius: calc(2 * var(--h)); background: #1E90FF; transform: scaleX(0); transform-origin: left; transition: transform .2s ease-out; }
.menu > a:hover::after, .menu > a.actif::after { transform: scaleX(1); }
.deroulant { position: relative; }
.deroulant summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.deroulant summary::-webkit-details-marker { display: none; }
.deroulant summary .ico { transition: transform .2s ease-out; }
.deroulant[open] summary .ico { transform: rotate(180deg); }
.menu .deroulant .ico { width: calc(10 * var(--h)); height: calc(10 * var(--h)); margin-left: calc(7 * var(--h)); stroke-width: 2.6; }
.deroulant-menu { position: absolute; left: 0; top: calc(100% + 14 * var(--h)); min-width: calc(220 * var(--h)); display: grid; padding: calc(8 * var(--h)); background: #fff; border-radius: calc(12 * var(--h)); box-shadow: 0 calc(16 * var(--h)) calc(40 * var(--h)) rgba(2, 16, 34, .35); z-index: 8; }
.deroulant[open] .deroulant-menu { animation: menu-ouvre .18s ease-out both; }
.deroulant-menu a, .deroulant-menu button { display: flex; align-items: center; gap: calc(10 * var(--h)); padding: calc(10 * var(--h)) calc(12 * var(--h)); border: 0; background: none; border-radius: calc(8 * var(--h)); color: var(--encre); font-size: calc(15 * var(--h)); font-weight: 500; text-align: left; cursor: pointer; white-space: nowrap; }
.deroulant-menu a:hover, .deroulant-menu button:hover, .deroulant-menu [aria-current] { background: var(--tuile); color: var(--bleu); }
.langue { margin-left: calc(36 * var(--h)); }
.langue summary { gap: calc(8 * var(--h)); font-size: calc(16 * var(--h)); font-weight: 500; }
.langue summary .drapeau { width: calc(28 * var(--h)); height: calc(28 * var(--h)); border-radius: 50%; box-shadow: 0 0 0 calc(2 * var(--h)) rgba(255, 255, 255, .15); }
.langue summary .ico { width: calc(10 * var(--h)); height: calc(10 * var(--h)); stroke-width: 2.6; }
.langue .deroulant-menu { left: auto; right: 0; min-width: calc(170 * var(--h)); }
.langue .deroulant-menu .drapeau { width: calc(20 * var(--h)); height: calc(20 * var(--h)); }
.connexion { margin-left: calc(28 * var(--h)); height: calc(48 * var(--h)); display: flex; align-items: center; gap: calc(11 * var(--h)); padding: 0 calc(24 * var(--h));
  border: calc(2 * var(--h)) solid #1E90FF; border-radius: calc(24 * var(--h)); background: rgba(3, 18, 38, .5); backdrop-filter: blur(6px);
  color: #fff; font-size: calc(15.5 * var(--h)); font-weight: 550; white-space: nowrap; transition: background .15s ease-out, box-shadow .15s ease-out; }
.connexion:hover { background: rgba(10, 140, 255, .28); box-shadow: 0 0 calc(24 * var(--h)) rgba(30, 144, 255, .45); }
.connexion .ico { width: calc(19 * var(--h)); height: calc(19 * var(--h)); }

/* Le texte */
.surtitre { text-transform: uppercase; white-space: nowrap; }
.heros-texte { position: absolute; left: calc(64 * var(--h)); top: calc(150 * var(--h)); width: calc(700 * var(--h)); z-index: 3; }
.heros .surtitre { display: block; font-size: calc(14 * var(--h)); font-weight: 650; letter-spacing: .09em; line-height: calc(21 * var(--h)); color: #3AA2FF; }
.heros h1 { margin-top: calc(16 * var(--h)); font-family: var(--titre); font-size: calc(58 * var(--h)); font-weight: 700; letter-spacing: -.02em; line-height: calc(64 * var(--h)); text-shadow: 0 2px calc(24 * var(--h)) rgba(0, 0, 0, .35); }
.heros h1 span { display: block; white-space: nowrap; }
.heros-para { margin-top: calc(22 * var(--h)); width: calc(590 * var(--h)); font-size: calc(19 * var(--h)); line-height: calc(31 * var(--h)); color: rgba(255, 255, 255, .9); }
.heros-coches { margin-top: calc(26 * var(--h)); display: flex; gap: calc(28 * var(--h)); font-size: calc(16 * var(--h)); font-weight: 550; white-space: nowrap; }
.heros-coches li { display: flex; align-items: center; gap: calc(10 * var(--h)); }
.heros-coches .rond { width: calc(26 * var(--h)); height: calc(26 * var(--h)); box-shadow: 0 0 0 calc(4 * var(--h)) rgba(10, 140, 255, .18); }
.heros-action { margin-top: calc(32 * var(--h)); }
.heros-note { margin-top: calc(16 * var(--h)); padding-left: calc(20 * var(--h)); font-size: calc(14 * var(--h)); line-height: 1; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.heros-note span { margin: 0 calc(7 * var(--h)); }

/* Le bouton « Nous contacter » (entrée et fenêtres) : un éclat le traverse de temps en temps. */
.bouton-contact { --b: var(--h, 1px); position: relative; overflow: hidden; display: inline-flex; align-items: center; height: calc(62 * var(--b)); padding: 0 calc(26 * var(--b)); border: 0; border-radius: calc(31 * var(--b));
  background: linear-gradient(180deg, #1B9BFF, #0284F5); color: #fff; font-family: var(--titre); font-size: calc(18 * var(--b)); font-weight: 650; white-space: nowrap; cursor: pointer;
  box-shadow: 0 calc(14 * var(--b)) calc(34 * var(--b)) rgba(0, 141, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s ease-out, box-shadow .15s ease-out; }
.bouton-contact:hover { transform: translateY(-2px); box-shadow: 0 calc(18 * var(--b)) calc(40 * var(--b)) rgba(0, 141, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.bouton-contact:active { transform: scale(.97); transition-duration: .1s; }
.bouton-contact::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: translateX(-150%) skewX(-18deg); pointer-events: none; }
.bouton-contact .ico-enveloppe { width: calc(32 * var(--b)); height: calc(32 * var(--b)); stroke-width: 1.5; }
.bouton-contact span { margin-left: calc(13 * var(--b)); }
.bouton-contact .ico-fleche { width: calc(28 * var(--b)); height: calc(28 * var(--b)); margin-left: calc(22 * var(--b)); stroke-width: 1.7; transition: transform .2s ease-out; }
.bouton-contact:hover .ico-fleche { transform: translateX(4px); }

/* Le produit : trois couches (profondeurs de parallaxe différentes). */
.heros-visuel { position: absolute; inset: 0; pointer-events: none; }
.visuel-scene { display: contents; }
.couche { position: absolute; translate: calc(var(--px, 0) * var(--prof, 0) * var(--h) * -1) calc(var(--py, 0) * var(--prof, 0) * var(--h) * -.6); }
.couche img { width: 100%; height: auto; }
.couche-ecran { left: calc(738 * var(--h)); top: calc(118 * var(--h)); width: calc(646 * var(--h)); z-index: 1; }
.couche-ecran .ecran-img { position: relative; filter: drop-shadow(0 calc(30 * var(--h)) calc(40 * var(--h)) rgba(0, 0, 0, .55)); }
.lueur { position: absolute; left: -12%; right: -12%; top: -14%; bottom: -8%; background: radial-gradient(closest-side, rgba(20, 140, 255, .42), rgba(20, 140, 255, .12) 55%, transparent 72%); }
.couche-voiture { left: calc(648 * var(--h)); top: calc(506 * var(--h)); width: calc(512 * var(--h)); z-index: 2; }
.voiture { position: relative; }
.voiture-img { position: relative; z-index: 1; filter: drop-shadow(0 calc(6 * var(--h)) calc(10 * var(--h)) rgba(0, 0, 0, .5)); }
.voiture-ombre { position: absolute; left: 3%; right: 1%; bottom: -2%; height: 16%; z-index: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .7), rgba(0, 0, 0, .35) 45%, transparent 72%); }
.voiture-reflet { position: absolute; left: 0; top: 97%; transform: scaleY(-1); opacity: .3; filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .8), transparent 38%); mask-image: linear-gradient(to top, rgba(0, 0, 0, .8), transparent 38%); }
.voiture-brillance { position: absolute; inset: 0; z-index: 2; overflow: hidden; mix-blend-mode: screen;
  -webkit-mask: url("/assets/img/vitrine/voiture-v2.webp") 0 0 / 100% 100% no-repeat; mask: url("/assets/img/vitrine/voiture-v2.webp") 0 0 / 100% 100% no-repeat; }
.voiture-brillance i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 26%; background: linear-gradient(100deg, transparent, rgba(190, 220, 255, .42) 50%, transparent); transform: translateX(-160%) skewX(-16deg); }
.phare { position: absolute; z-index: 3; width: 18%; height: 13%; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(ellipse at center, rgba(235, 247, 255, .95), rgba(120, 190, 255, .45) 38%, transparent 70%); }
.phare-g { left: 54.3%; top: 49.8%; }
.phare-d { left: 93.7%; top: 48.1%; width: 12%; }
.couche-tel { left: calc(1178 * var(--h)); top: calc(292 * var(--h)); width: calc(210 * var(--h)); z-index: 4; }
.couche-tel .tel-img { filter: drop-shadow(calc(-10 * var(--h)) calc(26 * var(--h)) calc(30 * var(--h)) rgba(0, 0, 0, .55)); }
.legende { position: absolute; left: calc(1128 * var(--h)); top: calc(740 * var(--h)); width: calc(250 * var(--h)); z-index: 5; text-align: center; font-size: calc(16 * var(--h)); font-weight: 600; line-height: calc(20 * var(--h)); color: #fff; text-shadow: 0 1px calc(10 * var(--h)) rgba(0, 0, 0, .8); white-space: nowrap; }
.legende-fleche { position: absolute; left: calc(1120 * var(--h)); top: calc(690 * var(--h)); width: calc(44 * var(--h)); height: calc(44 * var(--h)); z-index: 5; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .6)); }

/* ---------------------------------------------------------------------
   LE MOUVEMENT — à l'ouverture, tout arrive en moins d'1,4 s ; ensuite,
   la ville dérive, l'écran et le téléphone flottent, un reflet passe sur
   la voiture, un éclat traverse le bouton. Rien n'attend le défilement.
   Supprimé pour qui a demandé moins d'animations.
   --------------------------------------------------------------------- */
@keyframes monter        { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes descendre     { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes apparaitre    { from { opacity: 0; } to { opacity: 1; } }
@keyframes fond-entree   { from { opacity: .35; transform: scale(1.14); } to { opacity: 1; transform: scale(1.04); } }
@keyframes fond-derive   { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.6%, -1%, 0); } }
@keyframes ecran-entree  { from { opacity: 0; transform: translate3d(60px, 24px, 0) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes voiture-entree { 0% { opacity: 0; transform: translate3d(55%, 0, 0); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes tel-entree    { from { opacity: 0; transform: translate3d(0, 80px, 0) rotate(5deg); } to { opacity: 1; transform: none; } }
@keyframes flotter-lent  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-9 * var(--h))); } }
@keyframes flotter-vif   { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(calc(-14 * var(--h))) rotate(-1.2deg); } }
@keyframes respirer      { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes phares        { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .55; } }
@keyframes phares-vie    { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
@keyframes reflet        { 0%, 55% { transform: translateX(-160%) skewX(-16deg); } 85%, 100% { transform: translateX(480%) skewX(-16deg); } }
@keyframes eclat         { 0%, 70% { transform: translateX(-150%) skewX(-18deg); } 90%, 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes tracer        { to { stroke-dashoffset: 0; } }
@keyframes menu-ouvre    { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pousser       { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes defiler       { to { transform: translateX(-100%); } }
@keyframes flotter-appli { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-10deg) translateY(calc(-8 * var(--u))); } }

@media (prefers-reduced-motion: no-preference) {
  .heros-fond img { animation: fond-entree 1.2s cubic-bezier(.2, .7, .2, 1) both, fond-derive 30s ease-in-out 1.2s infinite alternate; }
  .heros .entete { animation: descendre .55s cubic-bezier(.2, .75, .25, 1) .05s both; }
  .entree { animation: monter .6s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(.12s + var(--i, 0) * 70ms); }
  .couche-ecran { animation: ecran-entree .7s cubic-bezier(.2, .75, .25, 1) .25s both; }
  .couche-voiture .voiture { animation: voiture-entree .7s cubic-bezier(.12, .82, .2, 1) .5s both; }
  .couche-tel { animation: tel-entree .7s cubic-bezier(.2, .75, .25, 1) .75s both; }
  .flotte-lente { animation: flotter-lent 7s ease-in-out 1.2s infinite; }
  .flotte-vive { animation: flotter-vif 5.5s ease-in-out 1.5s infinite; }
  .lueur { animation: respirer 6s ease-in-out infinite; }
  .phare { animation: phares 1s ease-out 1.1s both, phares-vie 4s ease-in-out 2.1s infinite; }
  .voiture-brillance i { animation: reflet 7s ease-in-out 1.6s infinite; }
  .legende { animation: apparaitre .5s ease-out 1.3s both; }
  .legende-fleche .trait { stroke-dasharray: 60; stroke-dashoffset: 60; animation: tracer .5s ease-out 1.15s forwards; }
  .legende-fleche .trait-pointe { stroke-dasharray: 30; stroke-dashoffset: 30; animation-delay: 1.55s; animation-duration: .25s; }
  .bouton-contact::after { animation: eclat 5.5s ease-in-out 2.2s infinite; }
  .appli-tel { animation: flotter-appli 6s ease-in-out infinite; }
  .piste { animation: defiler 32s linear infinite; }
  .defile:hover .piste { animation-play-state: paused; }
  .vc-revenus.anime .vc-barres i { animation: pousser .6s cubic-bezier(.2, .75, .25, 1) both; }
  .vc-barres i:nth-child(2) { animation-delay: 60ms; } .vc-barres i:nth-child(3) { animation-delay: 120ms; } .vc-barres i:nth-child(4) { animation-delay: 180ms; }
  .vc-barres i:nth-child(5) { animation-delay: 240ms; } .vc-barres i:nth-child(6) { animation-delay: 300ms; } .vc-barres i:nth-child(7) { animation-delay: 360ms; } .vc-barres i:nth-child(8) { animation-delay: 420ms; }
}
@media (prefers-reduced-motion: reduce) {
  .piste-double { display: none; }
  .defile { justify-content: center; -webkit-mask-image: none; mask-image: none; }
}

/* =====================================================================
   2. LES SIX MODULES (615 → 780)
   ===================================================================== */
.modules { position: relative; z-index: 1; height: calc(165 * var(--u)); background: #fff; }
.modules ul { position: absolute; left: calc(4.1 * var(--u)); top: calc(27.8 * var(--u)); width: calc(1011.6 * var(--u)); display: grid; grid-template-columns: repeat(6, 1fr); }
.modules li { display: grid; justify-items: center; align-content: start; text-align: center; }
.tuile { width: calc(54 * var(--u)); height: calc(49 * var(--u)); display: grid; place-items: center; border-radius: calc(10.5 * var(--u)); background: var(--tuile); color: var(--bleu); }
.tuile .ico { width: calc(31 * var(--u)); height: calc(31 * var(--u)); }
.modules h2 { margin-top: calc(14.5 * var(--u)); font-family: var(--titre); font-size: calc(13.5 * var(--u)); font-weight: 600; letter-spacing: -.012em; line-height: 1; color: var(--encre); white-space: nowrap; }
.modules p { width: calc(154 * var(--u)); margin-top: calc(8.6 * var(--u)); font-size: calc(10.55 * var(--u)); line-height: calc(15.4 * var(--u)); color: var(--gris); }
/* Dans la maquette, le téléphone de l'entrée cache la tuile du sixième module : seul le combiné dépasse. */
/* Au survol, la tuile se soulève. */
.modules li { cursor: default; }
.tuile { transition: transform .2s ease-out, box-shadow .2s ease-out, background .2s ease-out; }
.modules li:hover .tuile { transform: translateY(-4px); background: #E1EFFF; box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(10, 140, 255, .2); }
.modules li:hover .tuile .ico { animation: menu-ouvre .3s ease-out; }

/* =====================================================================
   3. TÉLÉCHARGEZ L'APPLICATION CHAUFFEUR (780 → 970)
   ===================================================================== */
.appli { position: relative; height: calc(190 * var(--u)); background: #fff; }
.appli-carte { position: absolute; left: calc(22 * var(--u)); top: calc(7 * var(--u)); width: calc(980 * var(--u)); height: calc(163 * var(--u)); overflow: hidden; border-radius: calc(26 * var(--u)); background: var(--bande); }
.appli-tel { position: absolute; left: calc(46 * var(--u)); top: calc(12 * var(--u)); width: calc(116 * var(--u)); height: auto; transform: rotate(-10deg); transform-origin: 50% 0;
  filter: drop-shadow(calc(-6 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)) rgba(5, 20, 45, .3)); }
.appli h2 { position: absolute; left: calc(180.7 * var(--u)); top: calc(30.7 * var(--u)); font-family: var(--titre); font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: -.0175em; line-height: 1; color: #050915; white-space: nowrap; }
.appli-sous { position: absolute; left: calc(180.7 * var(--u)); top: calc(60.8 * var(--u)); font-size: calc(12.2 * var(--u)); line-height: 1; color: var(--gris-3); }
.stores { position: absolute; left: calc(180.7 * var(--u)); top: calc(92 * var(--u)); display: flex; gap: calc(12.7 * var(--u)); }
.store { position: relative; display: block; width: calc(123.3 * var(--u)); height: calc(42.7 * var(--u)); border-radius: calc(7 * var(--u)); background: #000; color: #fff; }
.store + .store { width: calc(130 * var(--u)); }
.store { transition: transform .15s ease-out, box-shadow .15s ease-out; }
.store:hover { background: #1A1A1A; transform: translateY(-2px); box-shadow: 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .25); }
.store-logo { position: absolute; left: calc(7 * var(--u)); top: calc(6 * var(--u)); width: calc(29 * var(--u)); height: calc(29 * var(--u)); }
.store-play { left: calc(8.6 * var(--u)); top: calc(7.8 * var(--u)); width: calc(23.4 * var(--u)); height: calc(26 * var(--u)); }
.store-texte { position: absolute; left: calc(40 * var(--u)); top: calc(7 * var(--u)); display: grid; font-size: calc(16.4 * var(--u)); font-weight: 500; letter-spacing: -.02em; line-height: 1.02; white-space: nowrap; }
.store-texte small { font-size: calc(7.6 * var(--u)); font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.store + .store .store-texte small { text-transform: uppercase; font-size: calc(6.8 * var(--u)); font-weight: 600; letter-spacing: .03em; }
.appli-liste { position: absolute; left: calc(569.7 * var(--u)); top: calc(22.9 * var(--u)); display: grid; font-size: calc(11.4 * var(--u)); color: var(--gris-3); white-space: nowrap; }
.appli-liste li { display: flex; align-items: center; gap: calc(13.6 * var(--u)); height: calc(23.6 * var(--u)); }
.appli-liste .rond { width: calc(15.7 * var(--u)); height: calc(15.7 * var(--u)); }
.appli-trait { position: absolute; left: calc(803.7 * var(--u)); top: calc(26.3 * var(--u)); width: calc(1 * var(--u)); height: calc(111.7 * var(--u)); background: #D6E3F3; }
.appli-qr { position: absolute; left: calc(825 * var(--u)); top: calc(34.7 * var(--u)); width: calc(134 * var(--u)); display: grid; justify-items: center; text-align: center; }
.appli-qr img { width: calc(76.7 * var(--u)); height: calc(76.7 * var(--u)); background: #fff; border-radius: calc(2 * var(--u)); }
.appli-qr span { margin-top: calc(10.5 * var(--u)); font-size: calc(10.95 * var(--u)); line-height: 1.1; color: var(--gris-3); white-space: nowrap; }

/* =====================================================================
   4. LES CHIFFRES (970 → 1055)
   ===================================================================== */
.chiffres { position: relative; height: calc(85 * var(--u)); background: #031424; color: #F2FAFF; }
.chiffres ul { position: absolute; inset: 0; }
.chiffres li { position: absolute; inset: 0; }
.chiffres .ico { position: absolute; color: #0A87FF; }
.chiffres b { position: absolute; top: calc(21.2 * var(--u)); font-family: var(--titre); font-size: calc(26 * var(--u)); font-weight: 700; letter-spacing: -.02em; word-spacing: .12em; line-height: 1; color: var(--bleu-titre); white-space: nowrap; }
.chiffres span { position: absolute; top: calc(54.7 * var(--u)); font-size: calc(10.85 * var(--u)); line-height: 1; white-space: nowrap; }
.c1 .ico { left: calc(46.5 * var(--u)); top: calc(21.4 * var(--u)); width: calc(48.8 * var(--u)); height: calc(48.8 * var(--u)); }
.c1 b, .c1 span { left: calc(115.2 * var(--u)); }
.c2 .ico { left: calc(317.9 * var(--u)); top: calc(19.6 * var(--u)); width: calc(48.2 * var(--u)); height: calc(48.2 * var(--u)); stroke-width: 2.7; }
.c2 b, .c2 span { left: calc(381.4 * var(--u)); }
.c3 .ico { left: calc(571.1 * var(--u)); top: calc(20.8 * var(--u)); width: calc(45.6 * var(--u)); height: calc(45.6 * var(--u)); }
.c3 b, .c3 span { left: calc(633.3 * var(--u)); }
.c4 .ico { left: calc(847 * var(--u)); top: calc(20.9 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
.c4 b, .c4 span { left: calc(905.2 * var(--u)); }

/* =====================================================================
   5. TOUT CE DONT VOUS AVEZ BESOIN (1055 → 1388)
   ===================================================================== */
.ensemble { position: relative; height: calc(333 * var(--u)); background: #fff; }
.surtitre-2 { position: absolute; left: calc(42.7 * var(--u)); top: calc(34.3 * var(--u)); font-size: calc(11.6 * var(--u)); font-weight: 700; letter-spacing: calc(.55 * var(--u)); line-height: 1; color: #1D8EEB; }
.ensemble h2 { position: absolute; left: calc(42 * var(--u)); top: calc(55.7 * var(--u)); font-family: var(--titre); font-size: calc(31.3 * var(--u)); font-weight: 690; letter-spacing: -.008em; line-height: calc(34 * var(--u)); color: #050814; }
.ensemble h2 span { display: block; white-space: nowrap; }
.ensemble-para { position: absolute; left: calc(42.7 * var(--u)); top: calc(135.6 * var(--u)); width: calc(448 * var(--u)); font-size: calc(13.9 * var(--u)); line-height: calc(20.7 * var(--u)); color: var(--gris-2); }
.ensemble-liste { position: absolute; left: calc(42.7 * var(--u)); top: calc(184.5 * var(--u)); display: grid; font-size: calc(13.1 * var(--u)); color: #494E5A; white-space: nowrap; }
.ensemble-liste li { display: flex; align-items: center; gap: calc(10.9 * var(--u)); height: calc(20.9 * var(--u)); }
.ensemble-liste .rond { width: calc(15.7 * var(--u)); height: calc(15.7 * var(--u)); }
.bouton-sombre { position: absolute; left: calc(42.7 * var(--u)); top: calc(279 * var(--u)); width: calc(283.3 * var(--u)); height: calc(39.3 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20 * var(--u)) 0 calc(22.3 * var(--u));
  border-radius: calc(20 * var(--u)); background: var(--nuit); color: #fff; font-family: var(--titre); font-size: calc(13.1 * var(--u)); font-weight: 600; white-space: nowrap; transition: background .15s; }
.bouton-sombre:hover { background: #0A2744; }
.bouton-sombre .ico { width: calc(25 * var(--u)); height: calc(25 * var(--u)); color: #2B8FEA; stroke-width: 1.8; }

.ensemble-visuel, .ensemble-scene, .vitrine-cartes { display: contents; }
.vc { transition: transform .2s ease-out, box-shadow .2s ease-out; }
.vc:hover { transform: translateY(-3px); }
.vc-barres i { transform-origin: 50% 100%; }
.vc { position: absolute; border-radius: calc(10 * var(--u)); background: #fff; box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(20, 40, 80, .09), 0 0 0 calc(1 * var(--u)) rgba(15, 30, 60, .04); color: var(--encre); }
.vc-lib { position: absolute; left: calc(12.4 * var(--u)); top: calc(10.5 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 600; line-height: 1; }
.vc b { position: absolute; left: calc(12.4 * var(--u)); font-family: var(--titre); font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.vc-hausse, .vc-pale, .vc-menthe { position: absolute; display: grid; place-items: center; border-radius: calc(5 * var(--u)); font-size: calc(7 * var(--u)); font-weight: 600; line-height: 1; }
.vc-hausse { background: var(--vert-fond); color: #19A37C; }
.vc-voitures { left: calc(543.3 * var(--u)); top: calc(35 * var(--u)); width: calc(146.7 * var(--u)); height: calc(70 * var(--u)); }
.vc-voitures .vc-hausse { left: calc(108.4 * var(--u)); top: calc(10 * var(--u)); width: calc(28.3 * var(--u)); height: calc(10.7 * var(--u)); }
.vc-voitures b { top: calc(34 * var(--u)); font-size: calc(27 * var(--u)); }
.vc-voitures img { position: absolute; left: calc(57.7 * var(--u)); top: calc(26 * var(--u)); width: calc(86 * var(--u)); height: calc(45 * var(--u)); }
.vc-chauffeurs { left: calc(543.3 * var(--u)); top: calc(115 * var(--u)); width: calc(138.3 * var(--u)); height: calc(80 * var(--u)); }
.vc-chauffeurs .vc-hausse { left: calc(103.4 * var(--u)); top: calc(9 * var(--u)); width: calc(25 * var(--u)); height: calc(11 * var(--u)); }
.vc-pale { left: calc(105 * var(--u)); top: calc(30 * var(--u)); width: calc(21.7 * var(--u)); height: calc(10 * var(--u)); background: #FCEDEE; color: #E7A6A6; font-size: calc(6.4 * var(--u)); }
.vc-chauffeurs b { top: calc(29.5 * var(--u)); font-size: calc(20.5 * var(--u)); }
.vc-chauffeurs img { position: absolute; left: calc(9.7 * var(--u)); top: calc(49 * var(--u)); width: calc(120 * var(--u)); height: calc(26 * var(--u)); }
.vc-photo { position: absolute; left: calc(691.7 * var(--u)); top: calc(31.7 * var(--u)); width: calc(158.3 * var(--u)); height: calc(163.3 * var(--u)); overflow: hidden; border-radius: calc(14 * var(--u)); }
.vc-photo img { width: 100%; height: 100%; object-fit: cover; }
.vc-pointe { position: absolute; left: calc(682 * var(--u)); top: calc(118 * var(--u)); width: 0; height: 0; border-style: solid; border-width: calc(7 * var(--u)) calc(11 * var(--u)) calc(7 * var(--u)) 0; border-color: transparent #0D2B4B transparent transparent; }
.vc-revenus { left: calc(544 * var(--u)); top: calc(205 * var(--u)); width: calc(172.8 * var(--u)); height: calc(106.3 * var(--u)); }
.vc-revenus .vc-lib { left: calc(11.7 * var(--u)); top: calc(8.2 * var(--u)); font-size: calc(9.8 * var(--u)); }
.vc-revenus .vc-hausse { left: calc(134.3 * var(--u)); top: calc(9.3 * var(--u)); width: calc(26.7 * var(--u)); height: calc(10.7 * var(--u)); }
.vc-revenus b { left: calc(11.7 * var(--u)); top: calc(24.9 * var(--u)); font-size: calc(17.5 * var(--u)); letter-spacing: -.02em; }
.vc-barres { position: absolute; left: calc(13.5 * var(--u)); bottom: calc(9.6 * var(--u)); display: flex; align-items: flex-end; gap: calc(9.6 * var(--u)); }
.vc-barres i { width: calc(10 * var(--u)); height: calc(var(--h) * var(--u)); border-radius: calc(2 * var(--u)) calc(2 * var(--u)) 0 0; background: linear-gradient(180deg, #C3E2FF, #0A8BFF); }
.vc-barres i:first-child { background: #1E8AEF; }
.vc-amendes { left: calc(731.7 * var(--u)); top: calc(206.7 * var(--u)); width: calc(103.3 * var(--u)); height: calc(90 * var(--u)); background: #EEFBF9; box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(20, 60, 60, .06); }
.vc-amendes .vc-lib { left: calc(14 * var(--u)); top: calc(9.3 * var(--u)); font-size: calc(10.4 * var(--u)); }
.vc-amendes b { left: calc(14 * var(--u)); top: calc(30.9 * var(--u)); font-size: calc(26 * var(--u)); }
.vc-menthe { left: calc(13.3 * var(--u)); top: calc(65 * var(--u)); width: calc(33.3 * var(--u)); height: calc(15 * var(--u)); border-radius: calc(7 * var(--u)); background: #C9F6E7; color: var(--vert); font-size: calc(9 * var(--u)); }
.vc-entretien { left: calc(846.7 * var(--u)); top: calc(201.7 * var(--u)); width: calc(141.7 * var(--u)); height: calc(101.7 * var(--u)); border-radius: calc(12 * var(--u)); background: #021627; }
.vc-entretien .vc-lib { left: calc(18.3 * var(--u)); top: calc(11.7 * var(--u)); font-size: calc(11.5 * var(--u)); color: #10DFB0; }
.vc-outils { position: absolute; left: calc(17.6 * var(--u)); top: calc(33.3 * var(--u)); width: calc(40.7 * var(--u)); height: calc(40.7 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: #04E2B0; color: #fff; }
.vc-outils .ico { width: calc(25 * var(--u)); height: calc(25 * var(--u)); stroke-width: 2.8; }
.vc-entretien b { left: calc(66.6 * var(--u)); top: calc(44.7 * var(--u)); font-family: var(--titre); font-size: calc(19.6 * var(--u)); font-weight: 700; letter-spacing: 0; color: #06E3B3; }
/* En anglais, « Up to date » est plus long que « À jour » : il garde la carte. */
html[lang="en"] .vc-entretien b { top: calc(48 * var(--u)); font-size: calc(15 * var(--u)); }
.vc-entretien small { position: absolute; left: calc(18.3 * var(--u)); top: calc(82.5 * var(--u)); font-size: calc(8.7 * var(--u)); line-height: 1; color: #0FD3A5; }
.temoignage { position: absolute; left: calc(823.3 * var(--u)); top: calc(67.7 * var(--u)); width: calc(178.4 * var(--u)); height: calc(127.3 * var(--u)); border-radius: calc(12 * var(--u)); background: #03223F; color: #EDFDFF; box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(2, 22, 45, .28); }
.temoignage::after { content: ""; position: absolute; left: calc(8.4 * var(--u)); bottom: calc(-9.5 * var(--u)); border-style: solid; border-width: calc(10 * var(--u)) calc(15 * var(--u)) 0 0; border-color: #03223F transparent transparent transparent; }
.temoignage blockquote { position: absolute; left: calc(13.4 * var(--u)); top: calc(9.1 * var(--u)); font-size: calc(10.1 * var(--u)); line-height: calc(17 * var(--u)); white-space: nowrap; }
.temoignage figcaption img { position: absolute; left: calc(13.4 * var(--u)); top: calc(78 * var(--u)); width: calc(19.3 * var(--u)); height: calc(19.3 * var(--u)); border-radius: 50%; }
.temoignage figcaption b { position: absolute; left: calc(41.7 * var(--u)); top: calc(82.9 * var(--u)); font-size: calc(10.9 * var(--u)); font-weight: 700; line-height: 1; }
.rond-role { position: absolute; left: calc(13.9 * var(--u)); top: calc(99 * var(--u)); width: calc(18.3 * var(--u)); height: calc(18.3 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: #0270EF; color: #fff; }
.rond-role .ico { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.temoignage figcaption span { position: absolute; left: calc(41.7 * var(--u)); top: calc(102.9 * var(--u)); font-size: calc(9.7 * var(--u)); line-height: 1; color: #DDE8F2; white-space: nowrap; }

/* =====================================================================
   6. LES PLATEFORMES (1388 → 1450)
   ===================================================================== */
.plateformes { position: relative; height: calc(62 * var(--u)); background: #EEF6FE; }
.plateformes p { position: absolute; left: 0; width: calc(1024 * var(--u)); top: calc(9.3 * var(--u)); text-align: center; font-size: calc(9.5 * var(--u)); line-height: 1; color: #646B76; }
.defile { position: absolute; left: calc(150 * var(--u)); right: calc(150 * var(--u)); top: calc(22 * var(--u)); height: calc(34 * var(--u)); display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.piste { flex: none; display: flex; align-items: center; }
.piste li { position: relative; display: flex; align-items: center; height: calc(34 * var(--u)); padding: 0 calc(28 * var(--u)); line-height: 1; white-space: nowrap; }
.piste li + li::before { content: ""; position: absolute; left: 0; top: calc(5 * var(--u)); bottom: calc(5 * var(--u)); width: calc(1 * var(--u)); background: #CFD5E1; }
.piste li:first-child::before { content: ""; position: absolute; left: 0; top: calc(5 * var(--u)); bottom: calc(5 * var(--u)); width: calc(1 * var(--u)); background: #CFD5E1; }
.p-uber { font-size: calc(25 * var(--u)); font-weight: 500; letter-spacing: -.04em; color: #000; }
.p-bolt { font-family: var(--titre); font-size: calc(24 * var(--u)); font-weight: 800; letter-spacing: -.03em; color: #0BB07D; }
.p-bolt span, .p-bolt { position: relative; }
.p-bolt::after { content: ""; position: absolute; left: calc(50% - 2 * var(--u)); bottom: calc(3 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: #0BB07D; }
.p-heetch { font-family: var(--titre); font-size: calc(24 * var(--u)); font-weight: 800; letter-spacing: -.045em; color: #EF1062; }
.p-freenow { font-family: var(--titre); font-size: calc(15.5 * var(--u)); font-weight: 800; letter-spacing: -.01em; }
.p-freenow span:first-child { color: #1B59BF; margin-right: calc(3 * var(--u)); }
.p-freenow span:nth-child(2) { color: #E95A2E; }
.p-freenow svg { width: calc(22 * var(--u)); height: calc(20 * var(--u)); margin: 0 0 calc(4 * var(--u)) calc(-2 * var(--u)); }
.p-plus { font-size: calc(10.5 * var(--u)); color: #646B76; }

/* =====================================================================
   7. LE PIED (1450 → 1536)
   ===================================================================== */
.pied { position: relative; height: calc(86 * var(--u)); background: linear-gradient(180deg, #021C33, #01162B); color: #EBF6FF; }
.pied-logo { position: absolute; left: calc(41.3 * var(--u)); top: calc(11.3 * var(--u)); width: calc(160 * var(--u)); height: calc(40 * var(--u)); }
.pied-logo .logo-f { position: absolute; left: 0; top: 0; width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.pied-logo .logo-mot { position: absolute; left: calc(42.2 * var(--u)); top: calc(1.7 * var(--u)); font-size: calc(27.2 * var(--u)); }
.pied-logo small { position: absolute; left: calc(43.2 * var(--u)); top: calc(29.7 * var(--u)); font-size: calc(7.2 * var(--u)); font-weight: 500; letter-spacing: calc(.4 * var(--u)); line-height: 1; color: #8D9DAE; white-space: nowrap; }
.pied-copie { position: absolute; left: calc(42 * var(--u)); top: calc(57.5 * var(--u)); font-size: calc(9.29 * var(--u)); line-height: 1; white-space: nowrap; }
.pied-liens { position: absolute; left: calc(682 * var(--u)); top: calc(56.5 * var(--u)); display: flex; gap: calc(10.5 * var(--u)); font-size: calc(9.29 * var(--u)); line-height: 1; white-space: nowrap; }
.pied-liens a { color: #DFEDF8; text-decoration: underline; text-underline-offset: calc(2 * var(--u)); }
.pied-liens a:hover { color: #fff; }
.pied-liens span { color: #5C6E82; }

/* =====================================================================
   LES FENÊTRES : Tarifs, Contact (ouvertes par #tarifs, #contact)
   ===================================================================== */
.fenetre { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 16px; }
.fenetre:target { display: grid; }
.fenetre-fond { position: absolute; inset: 0; background: rgba(2, 12, 26, .62); }
.fenetre-boite { position: relative; width: min(28rem, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 1.75rem 1.75rem 1.5rem; border-radius: 18px; background: #fff; color: var(--encre); box-shadow: 0 30px 70px rgba(2, 12, 26, .4); }
.fenetre-large { width: min(36rem, 100%); }
.fenetre-fermer { position: absolute; right: .75rem; top: .6rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.6rem; line-height: 1; color: var(--gris); }
.fenetre-fermer:hover { background: var(--tuile); color: var(--encre); }
.fenetre h2 { font-family: var(--titre); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.fenetre-chapo { margin-top: .35rem; color: var(--gris); font-size: .92rem; }
.tarif-prix { margin-top: 1rem; color: var(--gris-2); }
.tarif-prix b { display: block; font-family: var(--titre); font-size: 2.8rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--encre); }
.tarif-points { display: grid; gap: .6rem; margin: 1.2rem 0 1.5rem; color: var(--gris-3); }
.tarif-points li { display: flex; align-items: center; gap: .65rem; }
.tarif-points .rond { width: 1.15rem; height: 1.15rem; }
.fenetre .bouton-contact { --h: .8px; }
.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; margin-top: 1.2rem; }
.champ { display: grid; gap: .35rem; min-width: 0; }
.champ-pleine, .formulaire-pied { grid-column: 1 / -1; }
.champ label { font-size: .86rem; font-weight: 600; color: var(--gris-3); }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 2.75rem; padding: .6rem .85rem; border: 1px solid #D6DEEA; border-radius: 10px; background: #fff; color: var(--encre); font-size: .95rem; }
.champ textarea { min-height: 6.5rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(10, 140, 255, .16); }
.champ .en-erreur { border-color: #D93B3B; }
.champ-erreur { font-size: .82rem; color: #D93B3B; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.messages { position: fixed; top: 1rem; right: 1rem; z-index: 60; display: grid; gap: .5rem; max-width: min(26rem, calc(100vw - 2rem)); }
.message { padding: .8rem 1rem; border-left: 4px solid var(--bleu); border-radius: 10px; background: #fff; color: var(--encre); font-size: .95rem; box-shadow: 0 14px 30px -12px rgba(2, 12, 26, .45); }
.message-erreur { border-left-color: #D93B3B; }
.message-succes { border-left-color: #13A57B; }

/* =====================================================================
   LA PAGE « INFORMATIONS LÉGALES »
   ===================================================================== */
.legal-entete { --h: min(calc(100cqw / 1440), 1.333px); position: relative; z-index: 2; height: calc(92 * var(--h)); background: #06141E; }
.legal-entete .cadre { width: calc(1440 * var(--h)); height: 100%; }
.legal { max-width: 46rem; margin: 0 auto; padding: 3rem 20px 4rem; color: var(--gris-3); line-height: 1.65; }
.legal h1 { font-family: var(--titre); font-size: 2.2rem; letter-spacing: -.02em; color: var(--encre); }
.legal h2 { margin-top: 2.2rem; font-family: var(--titre); font-size: 1.35rem; color: var(--encre); scroll-margin-top: 1rem; }
.legal p, .legal ul { margin-top: .7rem; }
.legal ul { padding-left: 1.2rem; list-style: disc; }
.legal a { color: var(--bleu); text-decoration: underline; }

/* =====================================================================
   SUR TÉLÉPHONE ET PETITE TABLETTE (< 860 px) : les sections l'une sous l'autre
   ===================================================================== */
@media (max-width: 859.98px) {
  .cadre { width: auto; height: auto; padding-inline: 20px; }

  .heros { height: auto; padding-bottom: 6px; }
  .heros-scene { width: auto; height: auto; display: flex; flex-direction: column; padding: 12px 20px 0; }
  .entete { position: relative; inset: auto; height: auto; padding: 0; gap: 12px; }
  .entete .logo { gap: 8px; }
  .entete .logo-f { width: 34px; height: 34px; }
  .entete .logo-mot { font-size: 29px; }
  .menu { display: none; }
  .langue { margin-left: auto; }
  .langue summary { gap: 6px; font-size: 13px; }
  .langue summary .drapeau { width: 24px; height: 24px; }
  .langue summary .ico { width: 9px; height: 9px; }
  .langue .deroulant-menu { min-width: 150px; top: calc(100% + 10px); padding: 6px; border-radius: 10px; }
  .deroulant-menu a, .deroulant-menu button { font-size: 14px; padding: 9px 10px; gap: 8px; }
  .langue .deroulant-menu .drapeau { width: 18px; height: 18px; }
  .connexion { margin-left: 0; height: 38px; padding: 0 14px; gap: 8px; font-size: 13px; border-width: 2px; border-radius: 19px; }
  .connexion .ico { width: 15px; height: 15px; }
  .connexion span { display: none; }
  .connexion::after { content: "Connexion"; }
  .heros-texte { position: relative; left: auto; top: auto; width: auto; padding-top: 28px; }
  .heros .surtitre { font-size: 11px; line-height: 16px; white-space: normal; }
  .heros h1 { margin-top: 12px; font-size: clamp(30px, 8.6vw, 40px); line-height: 1.1; }
  .heros h1 span { white-space: normal; }
  .heros-para { width: auto; margin-top: 16px; font-size: 16px; line-height: 1.55; }
  .heros-coches { margin-top: 18px; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; }
  .heros-coches .rond { width: 22px; height: 22px; }
  .heros-action { margin-top: 22px; }
  .heros .bouton-contact { --h: .86px; }
  .heros-note { margin-top: 12px; padding-left: 8px; font-size: 12.5px; }
  .heros-visuel { position: relative; inset: auto; margin: 16px -20px 0; container-type: inline-size; aspect-ratio: 820 / 705; overflow: hidden; }
  .visuel-scene { display: block; position: absolute; --h: calc(100cqw / 820); left: calc(-588 * var(--h)); top: calc(-112 * var(--h)); width: calc(1440 * var(--h)); height: calc(810 * var(--h)); }
  .heros-voile { background: linear-gradient(180deg, rgba(3, 12, 24, .9) 0%, rgba(3, 12, 24, .82) 42%, rgba(3, 12, 24, .25) 62%, rgba(3, 12, 24, .45) 100%); }

  .modules { height: auto; padding: 36px 0 12px; }
  .modules ul { position: static; width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .modules h2 { font-size: 15px; white-space: normal; }
  .modules p { width: auto; max-width: 180px; font-size: 13px; line-height: 1.45; }

  .appli { height: auto; padding: 24px 0; }
  .appli-carte { position: relative; left: 0; top: 0; width: auto; height: auto; display: grid; justify-items: start; gap: 14px; padding: 26px 22px; border-radius: 22px; }
  .appli-carte > * { position: static !important; }
  .appli-tel { display: none; }
  .appli h2 { font-size: 22px; white-space: normal; line-height: 1.2; }
  .appli-sous { font-size: 14px; margin-top: -6px; }
  .stores { flex-wrap: wrap; gap: 10px; }
  .appli-liste { font-size: 14px; white-space: normal; }
  .appli-liste li { height: auto; min-height: 30px; gap: 10px; }
  .appli-trait { display: none; }
  .appli-qr { width: auto; justify-self: center; }
  .appli-qr span { font-size: 13px; }

  .chiffres { height: auto; padding: 26px 0; }
  .chiffres ul { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .chiffres li { position: relative; inset: auto; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; }
  .chiffres li > * { position: static !important; }
  .chiffres .ico { grid-row: span 2; width: 38px !important; height: 38px !important; }
  .chiffres b { font-size: 24px; }
  .chiffres span { font-size: 12.5px; white-space: normal; line-height: 1.3; margin-top: 3px; }

  .ensemble { height: auto; padding: 44px 0 36px; }
  .ensemble .cadre > * { position: static; }
  .surtitre-2 { font-size: 11.5px; line-height: 1.3; }
  .ensemble h2 { margin-top: 10px; font-size: clamp(26px, 7vw, 32px); line-height: 1.15; }
  .ensemble h2 span { white-space: normal; }
  .ensemble-para { width: auto; margin-top: 14px; font-size: 15.5px; line-height: 1.55; }
  .ensemble-liste { margin-top: 16px; font-size: 15px; gap: 6px; }
  .ensemble-liste li { height: 24px; }
  .bouton-sombre { position: relative !important; left: 0; top: 0; width: auto; max-width: 100%; height: 46px; margin-top: 22px; gap: 14px; font-size: 14.5px; border-radius: 23px; }
  .ensemble-visuel { display: block; position: relative !important; margin: 30px -20px 0; container-type: inline-size; aspect-ratio: 475 / 290; overflow: hidden; }
  .ensemble-scene { display: block; position: absolute !important; --u: calc(100cqw / 475); left: calc(-532 * var(--u)); top: calc(-24 * var(--u)); width: calc(1024 * var(--u)); height: calc(333 * var(--u)); }
  .vitrine-cartes { display: contents; }

  .plateformes { height: auto; padding: 20px 0 22px; }
  .plateformes p { position: static; width: auto; font-size: 12.5px; }
  .defile { position: relative; left: auto; right: auto; top: auto; margin: 12px -20px 0; height: 40px; }
  .piste li { height: 40px; padding: 0 20px; }
  .p-uber, .p-bolt, .p-heetch { font-size: 22px; }
  .p-freenow { font-size: 15px; }
  .p-plus { font-size: 12.5px; }

  .pied { height: auto; padding: 24px 0 26px; }
  .pied .cadre { display: grid; gap: 16px; }
  .pied .cadre > * { position: relative; left: auto; top: auto; }
  .pied-logo { width: 190px; height: 44px; }
  .pied-logo .logo-f { width: 34px; height: 34px; }
  .pied-logo .logo-mot { left: 42px; top: 2px; font-size: 27px; }
  .pied-logo small { left: 43px; top: 32px; font-size: 7px; }
  .pied-copie { font-size: 12px; line-height: 1.5; white-space: normal; }
  .pied-liens { flex-wrap: wrap; gap: 8px 10px; font-size: 12.5px; }
  .legal-entete { height: auto; padding-bottom: 12px; }

  .formulaire { grid-template-columns: 1fr; }
}