/* ============================================================================
   FAST RIVIERA — DESIGN SYSTEM
   Theme : Vice City / Outrun · fond noir · neon rose & cyan
   ============================================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Neons du logo */
  --pink:        #ff2d8f;
  --pink-hot:    #ff0a78;
  --pink-soft:   #ff7ab8;
  --cyan:        #23e0ff;
  --cyan-hot:    #00d5ff;
  --blue:        #1b7dff;
  --violet:      #7b2ff7;
  --gold:        #ffb648;

  /* Fonds */
  --ink:         #05010c;
  --ink-2:       #0a0416;
  --ink-3:       #120a22;
  --line:        rgba(255,255,255,.09);
  --line-2:      rgba(255,255,255,.16);

  /* Texte */
  --fg:          #f4f0ff;
  --fg-dim:      #a99fc4;
  --fg-faint:    #6e6588;

  /* Degrades */
  --grad-neon:   linear-gradient(100deg, var(--pink) 0%, var(--violet) 48%, var(--cyan) 100%);
  --grad-hot:    linear-gradient(100deg, var(--pink-hot) 0%, var(--pink) 40%, var(--blue) 100%);
  --grad-sun:    linear-gradient(180deg, #ffd76e 0%, #ff8a3d 32%, var(--pink-hot) 68%, var(--violet) 100%);
  --grad-text:   linear-gradient(92deg, #fff 0%, var(--pink-soft) 42%, var(--cyan) 100%);

  /* Glow */
  --glow-pink:   0 0 24px rgba(255,45,143,.55), 0 0 64px rgba(255,45,143,.25);
  --glow-cyan:   0 0 24px rgba(35,224,255,.5),  0 0 64px rgba(35,224,255,.22);

  /* Type */
  --f-display: "Syne", "Space Grotesk", system-ui, sans-serif;
  --f-body:    "Space Grotesk", system-ui, -apple-system, sans-serif;

  /* Layout */
  --wrap: 1280px;
  --gut: clamp(20px, 4vw, 56px);
  --r:   18px;
  --r-lg: 28px;

  --ease: cubic-bezier(.22,.9,.28,1);
  --nav-h: 76px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* Pas de scroll-behavior:smooth global : il entre en conflit avec Lenis et
   avec les ancres pilotées en JS. Le lissage est géré par Lenis, ou natif. */
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--ink);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--pink); color:#fff; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--pink),var(--blue)); border-radius:10px; }

/* ---------- 3. AMBIANCE GLOBALE ---------- */
/* Blobs d'ambiance : dérive lente en CSS, JAMAIS liée au scroll.
   Les animer au scroll obligeait le GPU à refaire le flou à chaque frame. */
.amb{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.amb i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(110px); opacity:.5;
}
.amb i:nth-child(1){ width:52vw; height:52vw; left:-14vw; top:-12vw; background:rgba(255,45,143,.42); animation:drift1 34s ease-in-out infinite; }
.amb i:nth-child(2){ width:46vw; height:46vw; right:-12vw; top:22vh; background:rgba(27,125,255,.36); animation:drift2 44s ease-in-out infinite; }
.amb i:nth-child(3){ width:40vw; height:40vw; left:24vw; bottom:-16vw; background:rgba(123,47,247,.30); animation:drift3 52s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(4vw,3vh,0) } }
@keyframes drift2{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(-3vw,4vh,0) } }
@keyframes drift3{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(3vw,-3vh,0) } }

.grain{
  position:fixed; inset:-60px; z-index:9998; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 700ms steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-6px,4px)} 66%{transform:translate(5px,-5px)} 100%{transform:translate(0,0)}
}
/* Scanlines : plus de mix-blend-mode. Un calque en blend mode plein écran
   force le navigateur à refusionner toute la page à chaque frame de scroll. */
.scan{
  position:fixed; inset:0; z-index:9997; pointer-events:none; opacity:.32;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.26) 2px 4px);
}

.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; z-index:1; pointer-events:none;
  margin:-260px 0 0 -260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,45,143,.16) 0%, rgba(35,224,255,.08) 40%, transparent 66%);
  filter:blur(24px); opacity:0; transition:opacity .5s;
}
@media (hover:hover){ .cursor-glow{ opacity:1; } }

/* ---------- 4. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:2; }
main{ position:relative; z-index:2; }
section{ position:relative; padding-block:clamp(72px,10vw,150px); }
.sec-tight{ padding-block:clamp(48px,6vw,84px); }

/* ---------- 5. TYPO ---------- */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:800; line-height:1.02; letter-spacing:-.03em; }
.h-xxl{ font-size:clamp(2.9rem, 8.4vw, 7.4rem); }
.h-xl { font-size:clamp(2.3rem, 5.6vw, 4.6rem); }
.h-l  { font-size:clamp(1.7rem, 3.2vw, 2.8rem); }
.h-m  { font-size:clamp(1.25rem, 2vw, 1.6rem); }

.grad{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-neon{ background:var(--grad-neon); -webkit-background-clip:text; background-clip:text; color:transparent; }

.outline{ color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.30); }
.neon-pink{ color:#fff; text-shadow:var(--glow-pink); }
.neon-cyan{ color:#fff; text-shadow:var(--glow-cyan); }

.lead{ font-size:clamp(1.02rem,1.35vw,1.2rem); color:var(--fg-dim); max-width:62ch; }
.muted{ color:var(--fg-dim); }
.faint{ color:var(--fg-faint); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg-dim); margin-bottom:22px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--grad-neon); box-shadow:var(--glow-pink); }

.sec-head{ max-width:760px; margin-bottom:clamp(38px,5vw,64px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow::before{ display:none; }
.sec-head p{ margin-top:20px; }
.sec-head.center p{ margin-inline:auto; }

/* ---------- 6. BOUTONS ---------- */
.btn{
  --bh:56px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--bh); padding:0 30px; border-radius:999px;
  font-family:var(--f-display); font-weight:700; font-size:.86rem;
  letter-spacing:.11em; text-transform:uppercase; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s, border-color .3s;
  overflow:hidden; isolation:isolate; will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn svg{ position:relative; z-index:2; width:17px; height:17px; flex:none; }

.btn-primary{ color:#fff; background:var(--grad-hot); box-shadow:0 8px 34px rgba(255,45,143,.36); }
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:1; opacity:0;
  background:linear-gradient(100deg, var(--cyan), var(--violet), var(--pink));
  transition:opacity .45s var(--ease);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 46px rgba(255,45,143,.52), 0 0 34px rgba(35,224,255,.3); }
.btn-primary:hover::after{ opacity:1; }

.btn-ghost{
  color:var(--fg); background:rgba(255,255,255,.045);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);
}
.btn-ghost:hover{ transform:translateY(-3px); border-color:transparent; box-shadow:0 0 0 1px var(--cyan), 0 10px 40px rgba(35,224,255,.28); }

.btn-wa{ color:#04160c; background:linear-gradient(100deg,#4ffc9b,#25d366); box-shadow:0 8px 30px rgba(37,211,102,.34); }
.btn-wa:hover{ transform:translateY(-3px); box-shadow:0 14px 44px rgba(37,211,102,.5); }

.btn-sm{ --bh:46px; padding:0 22px; font-size:.76rem; }
.btn-lg{ --bh:64px; padding:0 40px; font-size:.92rem; }
.btn-block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:.9rem; color:var(--cyan);
  transition:gap .3s var(--ease), color .3s;
}
.link-arrow:hover{ gap:16px; color:var(--pink); }

/* ---------- 7. VERRE / CARTES ---------- */
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.062), rgba(255,255,255,.014));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.glow-border{ position:relative; }
.glow-border::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:var(--grad-neon);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--ease); pointer-events:none;
}
.glow-border:hover::before{ opacity:1; }

/* ---------- 8. PRELOADER ---------- */
#preload{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center; gap:26px;
  background:var(--ink);
}
#preload .pl-logo{ width:min(300px,54vw); filter:drop-shadow(0 0 40px rgba(255,45,143,.5)); animation:plPulse 2s var(--ease) infinite; }
@keyframes plPulse{ 0%,100%{opacity:.72; transform:scale(.985)} 50%{opacity:1; transform:scale(1)} }
#preload .pl-bar{ width:min(240px,50vw); height:2px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden; }
#preload .pl-bar i{ display:block; height:100%; width:0%; background:var(--grad-neon); box-shadow:var(--glow-pink); transition:width .3s linear; }
#preload.done{ opacity:0; visibility:hidden; transition:opacity .7s var(--ease), visibility .7s; }

/* ---------- 9. BARRE DE PROGRESSION ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:var(--grad-neon); box-shadow:var(--glow-pink); z-index:9996;
}

/* ---------- 10. NAVIGATION ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:9000; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), backdrop-filter .45s, border-color .45s, height .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  height:64px;
  background:rgba(5,1,12,.72);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo img{ height:clamp(34px,4.4vw,46px); width:auto; filter:drop-shadow(0 0 16px rgba(255,45,143,.45)); transition:filter .4s, transform .4s var(--ease); }
.nav-logo:hover img{ filter:drop-shadow(0 0 26px rgba(35,224,255,.6)); transform:scale(1.04); }

.nav-menu{ display:flex; align-items:center; gap:4px; }
.nav-menu > li{ position:relative; }
.nav-menu a.nav-link{
  display:block; padding:10px 15px; border-radius:999px;
  font-size:.83rem; font-weight:600; letter-spacing:.03em; color:var(--fg-dim);
  transition:color .3s, background .3s;
}
.nav-menu a.nav-link:hover, .nav-menu a.nav-link[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.06); }
.nav-menu a.nav-link[aria-current="page"]{ box-shadow:inset 0 0 0 1px rgba(255,45,143,.4); }

/* Dropdown */
.has-drop > .nav-link::after{ content:"▾"; margin-left:6px; font-size:.7em; opacity:.6; }
.drop{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,10px);
  min-width:250px; padding:10px; border-radius:20px;
  background:rgba(10,4,22,.92);
  backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid var(--line-2);
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(255,45,143,.1);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.drop a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 15px; border-radius:13px; font-size:.86rem; color:var(--fg-dim);
  transition:background .25s, color .25s, padding-left .25s;
}
.drop a:hover{ background:rgba(255,45,143,.13); color:#fff; padding-left:20px; }
.drop a small{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); }
.drop-grid{ display:grid; grid-template-columns:1fr 1fr; min-width:430px; }

.nav-cta{ display:flex; align-items:center; gap:10px; }

/* Burger */
.burger{ display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); position:relative; }
.burger i{ position:absolute; left:13px; width:20px; height:1.5px; background:#fff; border-radius:2px; transition:transform .4s var(--ease), opacity .3s; }
.burger i:nth-child(1){ top:18px; }
.burger i:nth-child(2){ top:23px; }
.burger i:nth-child(3){ top:28px; }
.burger.open i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger.open i:nth-child(2){ opacity:0; }
.burger.open i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* Panneau mobile */
.mobile-nav{
  position:fixed; inset:0; z-index:8999; padding:calc(var(--nav-h) + 24px) var(--gut) 40px;
  background:rgba(5,1,12,.97);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.mobile-nav.open{ opacity:1; visibility:visible; transform:none; }
.mobile-nav h4{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-faint); margin:26px 0 10px; font-weight:600; font-family:var(--f-body); }
.mobile-nav a{ display:block; padding:13px 0; font-family:var(--f-display); font-size:1.5rem; font-weight:700; border-bottom:1px solid var(--line); }
.mobile-nav .m-sub a{ font-size:1rem; font-weight:500; font-family:var(--f-body); color:var(--fg-dim); padding:10px 0; }
.mobile-nav .btn{ margin-top:26px; }

/* ---------- 11. HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 40px); padding-bottom:60px; overflow:hidden;
}
/* Grille retro en perspective */
#gridCanvas{ position:absolute; left:0; right:0; bottom:0; width:100%; height:46vh; z-index:1; opacity:.85; }
/* Soleil outrun */
.sun{
  position:absolute; left:50%; bottom:34vh; transform:translateX(-50%);
  width:min(560px,84vw); aspect-ratio:1; border-radius:50%;
  background:var(--grad-sun); z-index:0;
  filter:blur(2px); opacity:.5;
  -webkit-mask:linear-gradient(#000 55%, transparent 55%),
        repeating-linear-gradient(180deg, #000 0 10px, transparent 10px 18px);
  -webkit-mask-composite:source-over;
  mask:linear-gradient(#000 55%, transparent 55%),
       repeating-linear-gradient(180deg, #000 0 10px, transparent 10px 18px);
  animation:sunFloat 9s ease-in-out infinite;
}
@keyframes sunFloat{ 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(-18px) } }
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 50% 45%, transparent 30%, rgba(5,1,12,.55) 75%, var(--ink) 100%);
}
.hero .wrap{ z-index:3; }
.hero-inner{ max-width:920px; }
.hero h1{ margin-bottom:26px; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; }
.hero .lead{ margin-bottom:36px; font-size:clamp(1.02rem,1.5vw,1.28rem); }

/* Badges de confiance */
.trust{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:44px; }
.trust li{ display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--fg-dim); }
.trust svg{ width:16px; height:16px; color:var(--cyan); flex:none; }

/* Indicateur de scroll */
.scroll-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:var(--fg-faint);
}
.scroll-hint i{ display:block; width:1px; height:44px; background:linear-gradient(var(--pink),transparent); }

/* ---------- 12. FORMULAIRE DE RECHERCHE ---------- */
.search-form{
  display:grid; gap:12px; grid-template-columns:repeat(3,1fr) auto;
  padding:16px; border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid var(--line-2);
  box-shadow:0 26px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
}
.search-form::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(100deg, rgba(255,45,143,.7), rgba(123,47,247,.3), rgba(35,224,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; pointer-events:none;
}
.search-form select, .search-form input{
  height:56px; padding:0 42px 0 18px; border-radius:15px;
  background:rgba(5,1,12,.55); border:1px solid var(--line);
  color:var(--fg); font-size:.92rem; width:100%;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323e0ff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:17px;
  transition:border-color .3s, box-shadow .3s, background-color .3s;
  cursor:pointer;
}
.search-form input{ background-image:none; padding-right:18px; cursor:text; }
.search-form select:hover{ border-color:var(--line-2); }
.search-form select:focus, .search-form input:focus{
  outline:none; border-color:transparent;
  box-shadow:0 0 0 1.5px var(--pink), 0 0 26px rgba(255,45,143,.3);
  background-color:rgba(5,1,12,.8);
}
.search-form select option{ background:#0a0416; color:#f4f0ff; }
.search-form select:disabled{ opacity:.45; cursor:not-allowed; }
.search-form button{
  height:56px; padding:0 30px; border-radius:15px;
  font-family:var(--f-display); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--grad-hot); background-size:180% 100%;
  box-shadow:0 8px 30px rgba(255,45,143,.4);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-position .5s var(--ease);
  white-space:nowrap;
}
.search-form button:hover{ transform:translateY(-2px); background-position:100% 0; box-shadow:0 14px 42px rgba(255,45,143,.55), 0 0 30px rgba(35,224,255,.3); }

.search-shell{ margin-top:14px; }
.search-note{ margin-top:14px; font-size:.78rem; color:var(--fg-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.search-note b{ color:var(--cyan); font-weight:600; }

@media (max-width:1000px){
  .search-form{ grid-template-columns:1fr 1fr; }
  .search-form button{ grid-column:1/-1; }
}
@media (max-width:560px){
  .search-form{ grid-template-columns:1fr; padding:13px; }
}

/* ---------- 13. MARQUEE ---------- */
.marquee{
  position:relative; overflow:hidden; padding:22px 0;
  border-block:1px solid var(--line);
  background:linear-gradient(90deg, rgba(255,45,143,.07), rgba(35,224,255,.07));
  -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{ display:flex; width:max-content; gap:0; will-change:transform; }
.marquee-group{ display:flex; align-items:center; gap:clamp(28px,4vw,64px); padding-right:clamp(28px,4vw,64px); }
.marquee-item{
  display:inline-flex; align-items:center; gap:16px;
  font-family:var(--f-display); font-weight:800; font-size:clamp(1.1rem,2.1vw,1.9rem);
  letter-spacing:-.02em; text-transform:uppercase; color:rgba(255,255,255,.9); white-space:nowrap;
}
.marquee-item::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--pink); box-shadow:var(--glow-pink); flex:none; }
.marquee-item.dim{ color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.34); }
.marquee-item.dim::after{ background:var(--cyan); box-shadow:var(--glow-cyan); }

/* Logos constructeurs dans le bandeau.
   Les .webp de assets/logos/ sont déjà des aplats blancs sur fond transparent :
   pas de filtre à appliquer, seulement l'opacité pour les faire respirer. */
.marquee-item.is-logo{ gap:20px; }
.marquee-item.is-logo img{
  height:clamp(30px,3.6vw,50px); width:auto; max-width:none;
  object-fit:contain; opacity:.72;
  transition:opacity .4s;
}
.marquee-item.is-logo.dim{ -webkit-text-stroke:0; }
.marquee-item.is-logo.dim img{ opacity:.5; }
.marquee:hover .marquee-item.is-logo img{ opacity:1; }

/* ---------- 13b. FILTRES CATÉGORIE ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.filter{
  display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 20px; border-radius:999px;
  font-size:.82rem; font-weight:600; letter-spacing:.03em; color:var(--fg-dim);
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  transition:color .3s, border-color .3s, background .3s, transform .3s var(--ease);
}
.filter span{
  display:grid; place-items:center; min-width:22px; height:20px; padding:0 6px;
  border-radius:999px; font-size:.68rem; font-weight:700;
  background:rgba(255,255,255,.08); color:var(--fg-faint);
  transition:background .3s, color .3s;
}
.filter:hover{ color:#fff; border-color:var(--line-2); transform:translateY(-2px); }
.filter.is-on{
  color:#fff; border-color:transparent;
  background:var(--grad-hot);
  box-shadow:0 8px 26px rgba(255,45,143,.34);
}
.filter.is-on span{ background:rgba(0,0,0,.28); color:#fff; }

/* Carte masquée par le filtre */
.car.is-hidden{ display:none; }

/* ---------- 14. GRILLE VOITURES ---------- */
.cars-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(16px,2vw,26px); }
.car{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--ink-2); border:1px solid var(--line);
  transition:transform .55s var(--ease), border-color .5s, box-shadow .55s var(--ease);
  will-change:transform;
  /* colonne : le bouton se cale en bas, quelle que soit la hauteur du contenu */
  display:flex; flex-direction:column;
}
.car:hover{ transform:translateY(-8px); border-color:rgba(255,45,143,.42); box-shadow:0 26px 66px rgba(0,0,0,.6), 0 0 42px rgba(255,45,143,.16); }

/* La carte ne porte plus ni photo ni prix : marque + tag en tête,
   modèle, specs, puis l'appel à l'action sur toute la largeur. */
.car-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:28px; margin-bottom:12px; }
.car-tag{
  padding:6px 12px; border-radius:999px; font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; white-space:nowrap;
  background:rgba(255,45,143,.9);
  box-shadow:0 4px 20px rgba(255,45,143,.45);
}
.car-brand{
  display:flex; align-items:center; gap:9px; min-width:0;
  font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan);
  text-shadow:0 0 14px rgba(35,224,255,.7);
}
/* Logo constructeur dans la carte : livre blanc sur transparent comme ceux
   de .brand-card, donc aucun filtre de couleur - seule l opacite varie. */
.car-logo{
  height:22px; width:auto; max-width:74px; object-fit:contain; flex:none;
  opacity:.8; transition:opacity .45s var(--ease);
}
.car:hover .car-logo{ opacity:1; }
.car-body{ display:flex; flex-direction:column; flex:1; padding:22px 22px 24px; }
.car-body h3{ font-size:1.32rem; margin-bottom:16px; }
.car-specs{ display:flex; gap:20px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.car-specs div{ display:flex; flex-direction:column; gap:2px; }
.car-specs b{ font-family:var(--f-display); font-size:1.02rem; font-weight:700; color:#fff; }
.car-specs small{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); }
.car-foot{ display:flex; margin-top:auto; }
.car-foot .btn{ width:100%; justify-content:center; }

/* ---------- 15. LOGOS MARQUES ---------- */
.brands-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
/* Pas de backdrop-filter ici : jusqu'à 15 cartes par page, le flou se
   recalculait à chaque frame de scroll pour un rendu quasi invisible sur
   ce fond sombre. Le dégradé seul donne le même résultat visuel. */
.brand-card{
  display:grid; place-items:center; gap:12px; min-height:132px; padding:22px 16px;
  border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  transition:transform .45s var(--ease), border-color .4s, box-shadow .45s, background .4s;
  text-align:center;
}
.brand-card:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:rgba(35,224,255,.45);
  box-shadow:0 18px 46px rgba(0,0,0,.5), 0 0 34px rgba(35,224,255,.18);
}
/* Les logos sont livrés blancs sur transparent (voir assets/logos/) :
   seule l'opacité varie, aucun filtre de couleur n'est nécessaire. */
.brand-card img, .brand-card svg{ height:46px; width:auto; max-width:100%; object-fit:contain; opacity:.72; transition:opacity .4s; }
.brand-card:hover img, .brand-card:hover svg{ opacity:1; }
.brand-card span{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); font-weight:600; }
.brand-card:hover span{ color:#fff; }

/* Wordmark de repli (si pas de logo image) */
.wordmark{
  display:grid; place-items:center; height:46px; padding:0 6px;
  font-family:var(--f-display); font-weight:800; font-size:1.02rem;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.05;
  color:#fff; text-align:center;
}

/* ---------- 16. VILLES ---------- */
.city-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; }
.city-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg); min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:26px;
  border:1px solid var(--line);
  transition:transform .55s var(--ease), border-color .5s, box-shadow .55s;
}
.city-card:hover{ transform:translateY(-8px); border-color:rgba(255,45,143,.45); box-shadow:0 26px 60px rgba(0,0,0,.6); }
.city-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform 1.1s var(--ease); }
.city-card:hover img{ transform:scale(1.09); }
.city-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(5,1,12,.1) 0%, rgba(5,1,12,.75) 62%, rgba(5,1,12,.96) 100%);
}
.city-card > *{ position:relative; z-index:2; }
.city-card h3{ font-size:1.7rem; margin-bottom:6px; }
.city-card .city-pays{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); margin-bottom:12px; text-shadow:0 0 12px rgba(35,224,255,.6); }
.city-card p{ font-size:.88rem; color:var(--fg-dim); margin-bottom:16px; }

/* ---------- 16b. GALERIE DESTINATION ----------
   Deux colonnes ; .is-wide traverse la grille. Le cadrage est fait en CSS
   (aspect-ratio + object-fit) et non au recadrage des fichiers : les trois
   variantes WebP gardent toutes le meme ratio 16/10. */
.photo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,22px); }
.photo{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--ink-2);
  transition:transform .55s var(--ease), border-color .5s, box-shadow .55s var(--ease);
}
.photo:hover{
  transform:translateY(-6px); border-color:rgba(35,224,255,.4);
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 36px rgba(35,224,255,.14);
}
.photo.is-wide{ grid-column:1 / -1; }
.photo img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; transition:transform 1.1s var(--ease); }
.photo.is-wide img{ aspect-ratio:21/9; }
.photo:hover img{ transform:scale(1.05); }
/* La legende est posee sur l'image : elle doit rester lisible sur un ciel
   clair comme sur un plan de nuit, d'ou le degrade plutot qu'un aplat. */
.photo figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:38px 22px 18px; font-size:.84rem; line-height:1.5; color:var(--fg-dim);
  background:linear-gradient(180deg, transparent, rgba(5,1,12,.82) 42%, rgba(5,1,12,.96));
}
/* Illustrations vehicules : plans rapproches d'habitacle ou d'atelier.
   Le 21/9 de la galerie destination couperait le volant ou le capot, on
   reste donc sur un 2/1 en pleine largeur. */
.photo-grid.is-illus .photo.is-wide img{ aspect-ratio:2/1; }

@media (max-width:760px){
  .photo-grid{ grid-template-columns:1fr; }
  .photo.is-wide img, .photo img{ aspect-ratio:16/10; }
  .photo figcaption{ font-size:.8rem; padding:32px 18px 15px; }
}

/* ---------- 17. SPLIT / FEATURES ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.split.rev .split-media{ order:2; }
.split-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.split-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
/* Variante portrait : une image verticale tient mieux la hauteur de la
   colonne de texte qu'un 4/3 qui laisse du vide de part et d'autre. */
.split-media.is-portrait img{ aspect-ratio:3/4; }
@media (max-width:1000px){ .split-media.is-portrait img{ aspect-ratio:4/3; } }
.split-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(140deg, rgba(255,45,143,.14), transparent 55%, rgba(35,224,255,.14)); }

.feat-list{ display:grid; gap:2px; margin-top:34px; }
.feat{
  display:flex; gap:18px; padding:22px 0; border-top:1px solid var(--line);
  transition:padding-left .4s var(--ease);
}
.feat:hover{ padding-left:12px; }
.feat:last-child{ border-bottom:1px solid var(--line); }
.feat-num{
  font-family:var(--f-display); font-size:.78rem; font-weight:700; letter-spacing:.1em;
  color:var(--pink); padding-top:4px; flex:none; width:34px;
}
.feat h3{ font-size:1.1rem; margin-bottom:7px; }
.feat p{ font-size:.9rem; color:var(--fg-dim); }

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stat{ padding:34px 26px; background:var(--ink); text-align:center; transition:background .4s; }
.stat:hover{ background:var(--ink-2); }
.stat b{ display:block; font-family:var(--f-display); font-size:clamp(2.2rem,4.4vw,3.4rem); font-weight:800; line-height:1; margin-bottom:10px; }
.stat span{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); }

/* ---------- 18. ETAPES ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; counter-reset:s; }
/* idem .brand-card : dégradé seul, pas de backdrop-filter répété */
.step{ padding:32px 26px; border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.012)); position:relative; overflow:hidden; }
.step::before{
  counter-increment:s; content:"0" counter(s);
  position:absolute; top:-14px; right:12px;
  font-family:var(--f-display); font-size:5.2rem; font-weight:800;
  color:transparent; -webkit-text-stroke:1.4px rgba(255,45,143,.28);
  pointer-events:none;
}
.step h3{ font-size:1.14rem; margin-bottom:10px; }
.step p{ font-size:.9rem; color:var(--fg-dim); }

/* ---------- 19. FAQ ---------- */
.faq{ display:grid; gap:0; max-width:900px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 4px; text-align:left;
  font-family:var(--f-display); font-size:clamp(1rem,1.6vw,1.18rem); font-weight:700; color:var(--fg);
  transition:color .3s;
}
.faq-q:hover{ color:var(--cyan); }
.faq-icon{ position:relative; width:22px; height:22px; flex:none; }
.faq-icon::before, .faq-icon::after{ content:""; position:absolute; inset:50% 0 auto 0; height:1.6px; background:var(--pink); border-radius:2px; transition:transform .4s var(--ease); }
.faq-icon::after{ transform:rotate(90deg); }
.faq-item.open .faq-icon::after{ transform:rotate(0); }
.faq-a{ overflow:hidden; height:0; }
.faq-a > div{ padding:0 4px 28px; color:var(--fg-dim); font-size:.94rem; max-width:74ch; }

/* ---------- 20. CTA ---------- */
.cta-band{
  position:relative; overflow:hidden; border-radius:clamp(24px,3vw,40px);
  padding:clamp(44px,7vw,88px) clamp(26px,5vw,72px); text-align:center;
  border:1px solid var(--line-2);
  background:linear-gradient(150deg, rgba(255,45,143,.16), rgba(123,47,247,.1) 45%, rgba(35,224,255,.14));
  backdrop-filter:blur(30px) saturate(150%); -webkit-backdrop-filter:blur(30px) saturate(150%);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.cta-band::before{
  content:""; position:absolute; width:70%; aspect-ratio:2/1; left:50%; bottom:-40%; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(255,45,143,.5), transparent 68%); filter:blur(64px); pointer-events:none;
}
.cta-band > *{ position:relative; z-index:2; }
.cta-band .btn-row{ justify-content:center; margin-top:34px; }

/* ---------- 21. FORMULAIRE COMPLET (page réservation) ---------- */
.form-card{ padding:clamp(26px,4vw,48px); border-radius:var(--r-lg); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); }
.field label .req{ color:var(--pink); }
.field input, .field select, .field textarea{
  height:54px; padding:0 17px; border-radius:14px;
  background:rgba(5,1,12,.5); border:1px solid var(--line); color:var(--fg); font-size:.94rem;
  transition:border-color .3s, box-shadow .3s, background .3s;
  width:100%;
}
.field textarea{ height:auto; min-height:126px; padding:16px 17px; resize:vertical; line-height:1.6; font-family:var(--f-body); }
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323e0ff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:17px;
}
.field select option{ background:#0a0416; color:#f4f0ff; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:transparent;
  box-shadow:0 0 0 1.5px var(--cyan), 0 0 24px rgba(35,224,255,.24);
  background:rgba(5,1,12,.78);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--fg-faint); }
.field input[type="date"], .field input[type="time"]{ color-scheme:dark; cursor:pointer; }
.field.err input, .field.err select, .field.err textarea{ border-color:var(--pink); box-shadow:0 0 0 1.5px var(--pink); }
.field .msg{ font-size:.74rem; color:var(--pink); min-height:0; }

/* Cases à cocher visuelles */
.opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt span{
  display:flex; align-items:center; gap:11px; padding:15px 17px; border-radius:14px;
  border:1px solid var(--line); background:rgba(5,1,12,.4); font-size:.86rem; cursor:pointer;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.opt span::before{
  content:""; width:18px; height:18px; border-radius:6px; border:1.5px solid var(--line-2); flex:none;
  transition:background .3s, border-color .3s; background-size:12px; background-position:center; background-repeat:no-repeat;
}
.opt input:checked + span{ border-color:rgba(255,45,143,.6); background:rgba(255,45,143,.1); box-shadow:0 0 20px rgba(255,45,143,.16); }
.opt input:checked + span::before{
  background-color:var(--pink); border-color:var(--pink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.opt input:focus-visible + span{ box-shadow:0 0 0 2px var(--cyan); }

/* Récap latéral */
.recap{ padding:26px; border-radius:var(--r-lg); position:sticky; top:calc(var(--nav-h) + 20px); }
.recap h3{ font-size:1.1rem; margin-bottom:18px; }
.recap dl{ display:grid; gap:0; }
.recap .row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
.recap .row dt{ color:var(--fg-faint); }
.recap .row dd{ text-align:right; color:#fff; font-weight:600; }
.recap .row.empty dd{ color:var(--fg-faint); font-weight:400; }

@media (max-width:820px){
  .form-grid{ grid-template-columns:1fr; }
  .recap{ position:static; }
}

/* ---------- 22. FOOTER ---------- */
.footer{ position:relative; border-top:1px solid var(--line); background:linear-gradient(180deg, transparent, rgba(255,45,143,.05)); padding-top:clamp(56px,7vw,90px); z-index:2; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(26px,4vw,52px); padding-bottom:clamp(40px,5vw,64px); }
.footer-logo img{ height:52px; width:auto; margin-bottom:20px; filter:drop-shadow(0 0 20px rgba(255,45,143,.4)); }
.footer p{ font-size:.88rem; color:var(--fg-dim); max-width:38ch; }
.footer h4{ font-family:var(--f-body); font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.footer-links{ display:grid; gap:11px; }
.footer-links a{ font-size:.87rem; color:var(--fg-dim); transition:color .3s, padding-left .3s var(--ease); }
.footer-links a:hover{ color:var(--cyan); padding-left:6px; }
.footer-contact a{ display:flex; align-items:center; gap:11px; font-size:.88rem; color:var(--fg-dim); margin-bottom:13px; transition:color .3s; }
.footer-contact a:hover{ color:#fff; }
.footer-contact svg{ width:16px; height:16px; color:var(--pink); flex:none; }
.socials{ display:flex; gap:10px; margin-top:20px; }
.socials a{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); transition:border-color .3s, background .3s, transform .3s var(--ease); }
.socials a:hover{ border-color:var(--pink); background:rgba(255,45,143,.14); transform:translateY(-3px); }
.socials svg{ width:17px; height:17px; }
.footer-bot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:24px 0 30px; border-top:1px solid var(--line); font-size:.78rem; color:var(--fg-faint); }
.footer-bot nav{ display:flex; flex-wrap:wrap; gap:20px; }
.footer-bot a:hover{ color:var(--cyan); }

@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- 23. BOUTON WHATSAPP FLOTTANT ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:9500;
  display:flex; align-items:center; gap:11px; height:58px; padding:0 22px 0 18px;
  border-radius:999px; color:#04160c; font-weight:700; font-size:.84rem;
  background:linear-gradient(100deg,#4ffc9b,#25d366);
  box-shadow:0 12px 40px rgba(37,211,102,.42);
  transition:transform .4s var(--ease), box-shadow .4s;
}
.wa-float:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 18px 54px rgba(37,211,102,.6); }
.wa-float svg{ width:24px; height:24px; flex:none; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:999px; border:2px solid rgba(79,252,155,.6);
  animation:waPing 2.4s var(--ease) infinite; pointer-events:none;
}
@keyframes waPing{ 0%{ transform:scale(1); opacity:.7 } 70%,100%{ transform:scale(1.34); opacity:0 } }
@media (max-width:560px){ .wa-float span{ display:none; } .wa-float{ width:58px; padding:0; justify-content:center; } }

/* ---------- 24. FIL D'ARIANE + PAGE HEADER ---------- */
.page-head{ position:relative; padding-top:calc(var(--nav-h) + clamp(52px,8vw,110px)); padding-bottom:clamp(44px,6vw,80px); overflow:hidden; }
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:.76rem; color:var(--fg-faint); margin-bottom:22px; }
.crumb a{ transition:color .3s; }
.crumb a:hover{ color:var(--cyan); }
.crumb span[aria-current]{ color:var(--pink); }

/* ---------- 25. CONTENU SEO / PROSE ---------- */

.prose{ max-width:76ch; }
.prose h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin:44px 0 16px; }
.prose h3{ font-size:clamp(1.15rem,1.8vw,1.4rem); margin:32px 0 12px; }
.prose p{ color:var(--fg-dim); margin-bottom:16px; }
.prose ul{ display:grid; gap:10px; margin:0 0 20px; }
.prose ul li{ position:relative; padding-left:24px; color:var(--fg-dim); font-size:.94rem; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--grad-neon); box-shadow:var(--glow-pink); }
.prose a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(35,224,255,.4); transition:color .3s; }
.prose a:hover{ color:var(--pink); text-decoration-color:var(--pink); }
.prose strong{ color:#fff; font-weight:600; }

/* Tableau tarifs */
.table-wrap{ overflow-x:auto; border-radius:var(--r); border:1px solid var(--line); }
table.tarifs{ width:100%; border-collapse:collapse; min-width:560px; font-size:.9rem; }
table.tarifs th, table.tarifs td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); }
table.tarifs th{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint); font-weight:600; background:rgba(255,255,255,.03); }
table.tarifs td:first-child{ color:#fff; font-weight:600; }
table.tarifs tr:last-child td{ border-bottom:0; }
table.tarifs tbody tr{ transition:background .3s; }
table.tarifs tbody tr:hover{ background:rgba(255,45,143,.06); }

/* ---------- 26. ANIMATIONS D'APPARITION ---------- */
[data-reveal]{ opacity:0; transform:translateY(30px); }
[data-reveal-x]{ opacity:0; transform:translateX(40px); }

/* L'état initial des groupes est posé en CSS, pas en JS : sinon les cartes
   s'affichaient une fraction de seconde avant que GSAP ne les masque. */
[data-stagger] > *{ opacity:0; transform:translateY(40px); }

/* Repli si GSAP ne charge pas (CDN bloqué, hors-ligne) : tout reste visible. */
.no-gsap [data-reveal],
.no-gsap [data-reveal-x],
.no-gsap [data-stagger] > *{ opacity:1; transform:none; }

/* Mots découpés par data-split : le conteneur masque le mot pendant qu'il monte.
   Le padding évite que overflow:hidden ne rogne les jambages (g, j, p, y). */
.split-word{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.split-word > span{ display:inline-block; }

/* ---------- 27. TOAST ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,26px); z-index:9999;
  display:flex; align-items:center; gap:12px; padding:15px 24px; border-radius:999px;
  background:rgba(10,4,22,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line-2); box-shadow:0 18px 50px rgba(0,0,0,.6);
  font-size:.87rem; opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  max-width:calc(100vw - 32px);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast svg{ width:19px; height:19px; color:var(--cyan); flex:none; }

/* ---------- 28. RESPONSIVE ---------- */
@media (max-width:1080px){
  .nav-menu, .nav-cta .btn-ghost{ display:none; }
  .burger{ display:block; }
  .split{ grid-template-columns:1fr; }
  .split.rev .split-media{ order:0; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .car-specs{ gap:14px; }
  .trust{ gap:8px 18px; }
  .wa-float{ right:14px; bottom:14px; }
  .cta-band .btn-row .btn{ width:100%; }
}

/* ---------- 29. ACCESSIBILITE ---------- */
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:10001; padding:14px 22px; background:var(--pink); color:#fff; border-radius:0 0 12px 0; }
.skip:focus{ left:0; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  [data-reveal],[data-reveal-x],[data-stagger] > *{ opacity:1 !important; transform:none !important; }
  .split-word,.split-word > span{ transform:none !important; }
  .grain,.scan,.sun{ animation:none; }
}

/* ---------- 30. CONSENTEMENT COOKIES ---------- */
/* Panneau ancre en bas, non bloquant : le visiteur peut lire le site pendant
   qu'il decide. Un voile modal serait un cookie wall deguise. */
.ck{
  position:fixed; z-index:10000; left:var(--gut); right:var(--gut); bottom:var(--gut);
  max-width:min(720px, calc(100vw - var(--gut) * 2));
  padding:clamp(22px,3.2vw,32px);
  background:linear-gradient(160deg, rgba(18,10,34,.92), rgba(5,1,12,.94));
  backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,45,143,.1);
  opacity:0; transform:translateY(22px) scale(.985);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.ck.is-on{ opacity:1; transform:none; }
.ck:focus{ outline:none; }
.ck:focus-visible{ outline:1px solid rgba(35,224,255,.45); outline-offset:3px; }

/* Filet neon en haut de la carte, meme grammaire que .glow-border */
.ck::before{
  content:""; position:absolute; left:clamp(22px,3.2vw,32px); right:clamp(22px,3.2vw,32px); top:0;
  height:1px; background:var(--grad-neon); box-shadow:var(--glow-pink); opacity:.9;
}

.ck h2{ font-family:var(--f-display); font-size:1.12rem; font-weight:800; letter-spacing:-.01em; margin-bottom:10px; }
.ck p{ color:var(--fg-dim); font-size:.86rem; line-height:1.62; }
.ck p a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.ck p a:hover{ color:var(--pink-soft); }

.ck-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; align-items:center; }
/* Accepter et refuser : meme taille, meme place, meme nombre de clics.
   Le refus n'est pas relegue dans un sous-menu — c'est une exigence CNIL,
   pas une preference esthetique. */
.ck-actions .btn{ --bh:50px; padding:0 26px; font-size:.78rem; flex:1 1 0; min-width:172px; }
.ck-personnaliser{
  flex:0 0 auto; min-width:0; background:none; border:none; padding:6px 2px;
  font-family:var(--f-body); font-size:.8rem; color:var(--fg-faint);
  text-decoration:underline; text-underline-offset:4px; cursor:pointer;
  transition:color .3s;
}
.ck-personnaliser:hover{ color:var(--cyan); }

.ck-detail{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.ck-poste{ display:flex; gap:16px; align-items:flex-start; padding:14px 0; }
.ck-poste + .ck-poste{ border-top:1px solid var(--line); }
.ck-poste-txt{ flex:1; min-width:0; }
.ck-poste b{ display:block; font-family:var(--f-display); font-size:.9rem; font-weight:700; margin-bottom:4px; }
.ck-poste small{ display:block; color:var(--fg-faint); font-size:.79rem; line-height:1.55; }
.ck-fige{
  flex:none; align-self:center; font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan); white-space:nowrap;
}

/* Interrupteur : case a cocher native masquee, apparence dessinee autour.
   Le clavier et les lecteurs d'ecran voient une vraie checkbox. */
.ck-switch{ flex:none; align-self:center; position:relative; width:50px; height:28px; }
.ck-switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2; }
.ck-switch i{
  position:absolute; inset:0; border-radius:999px; pointer-events:none;
  background:rgba(255,255,255,.07); border:1px solid var(--line-2);
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.ck-switch i::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--fg-faint); transition:transform .35s var(--ease), background .35s var(--ease);
}
.ck-switch input:checked + i{ background:var(--grad-hot); border-color:transparent; box-shadow:0 0 18px rgba(255,45,143,.45); }
.ck-switch input:checked + i::after{ transform:translateX(22px); background:#fff; }
.ck-switch input:focus-visible + i{ outline:2px solid var(--cyan); outline-offset:3px; }

/* "Enregistrer mes choix" n'apparait qu'une fois le detail ouvert : avant, il
   n'y a rien a enregistrer, et trois boutons brouilleraient la decision. */
.ck-enregistrer{ display:none; }
/* Sur sa propre ligne, pleine largeur : c'est l'action qui valide un reglage
   fin, elle ne doit pas se disputer la place avec accepter et refuser. */
.ck.is-detail .ck-enregistrer{ display:inline-flex; flex:1 1 100%; }

@media (max-width:560px){
  .ck{ left:12px; right:12px; bottom:12px; max-width:none; max-height:82vh; overflow-y:auto; }
  /* Accepter et refuser cote a cote plutot qu'empiles : la barre d'actions
     collante ci-dessous mange sinon la moitie de l'ecran. */
  .ck-actions .btn{ flex:1 1 0; min-width:0; padding:0 12px; font-size:.72rem; letter-spacing:.07em; }
  .ck.is-detail .ck-enregistrer{ flex:1 1 100%; order:1; }
  .ck-personnaliser{ flex:1 1 100%; order:2; width:auto; text-align:center; padding-top:2px; }

  /* Le detail depasse la hauteur de la carte, qui devient defilante. Les
     actions restent collees en bas : refuser doit se voir du premier coup
     d'oeil, pas au bout d'un scroll. */
  .ck-actions{
    position:sticky; bottom:-22px; z-index:2;
    margin-top:18px; padding:14px 0 22px;
    background:rgba(9,4,20,.97);
  }
  .ck.is-detail .ck-actions{ border-top:1px solid var(--line); }
}

/* Le bouton WhatsApp flottant passe au-dessus du panneau : on le decale
   tant que le panneau est affiche, sinon ils se chevauchent. */
html.ck-ouvert .wa-float{ transform:translateY(-96px); }
html.ck-ouvert .wa-float:hover{ transform:translateY(-100px) scale(1.03); }
@media (max-width:560px){ html.ck-ouvert .wa-float{ transform:none; opacity:0; pointer-events:none; } }