/* Polices hébergées sur le serveur du site (aucun appel à Google Fonts,
   donc aucune donnée de visiteur transmise à un tiers). */
@font-face{font-family:"Baloo 2"; src:url("/assets/fonts/baloo-2-latin-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:"Baloo 2"; src:url("/assets/fonts/baloo-2-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:"Baloo 2"; src:url("/assets/fonts/baloo-2-latin-700-normal.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:"Baloo 2"; src:url("/assets/fonts/baloo-2-latin-800-normal.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans"; src:url("/assets/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans"; src:url("/assets/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans"; src:url("/assets/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans"; src:url("/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:"Plus Jakarta Sans"; src:url("/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap;}

:root{
  --red-600:#DE3226;
  --red-700:#B92419;
  --red-100:#FDEAE7;
  --navy-900:#1B2560;
  --navy-800:#2B3B88;
  --navy-700:#3E52B0;
  --navy-100:#E8EBFB;
  --yellow-400:#F5A623;
  --cream-50:#FFF9F0;
  --cream-100:#FFF1DE;
  --ink-900:#1C2333;
  --ink-600:#5B6472;
  --ink-400:#8B93A0;
  --white:#ffffff;
  --red-600-rgb:222,50,38;
  --red-700-rgb:185,36,25;
  --navy-900-rgb:27,37,96;
  --navy-800-rgb:43,59,136;
  --navy-700-rgb:62,82,176;
  --cream-50-rgb:255,249,240;
  --shadow-red: 0 18px 34px -18px rgba(var(--red-600-rgb),.45);
  --shadow-navy: 0 18px 34px -18px rgba(var(--navy-900-rgb),.5);
  /* ===== systeme "glass" : verre depoli sobre, une seule bordure fine en
     anneau (jamais de bordure CSS cumulee avec un contour lumineux, c'est
     ce qui donnait l'effet "double liseré" premiere version). Opacite tres
     basse pour laisser vraiment deviner ce qu'il y a derriere, pas de
     surbrillance en degrade, pas de saturate() excessif. Repris partout ou
     une surface flotte au dessus du contenu : nav, popups, pastilles de
     controle sur une carte ===== */
  --glass-tint: rgba(255,255,255,.16);
  --glass-tint-soft: rgba(255,255,255,.1);
  --glass-tint-strong: rgba(255,255,255,.3);
  --glass-blur: blur(16px);
  --glass-ring: inset 0 0 0 1px rgba(255,255,255,.4);
  --glass-ring-soft: inset 0 0 0 1px rgba(var(--navy-900-rgb),.08);
  --glass-shadow: 0 10px 26px -16px rgba(var(--navy-900-rgb),.28);
}
/* ===== MOUVEMENTS SANS FLOU DE TEXTE =====
   Quand le navigateur anime directement transform ou opacity, il passe
   l'element sur un calque GPU : le texte est photographie a plat puis
   l'image est tournee / deplacee, ce qui le rend flou pendant tout le
   mouvement. Ici on anime des variables (--tilt, --lift, --rv-y...) que
   le navigateur ne sait pas deleguer au GPU : chaque image est redessinee
   avec le texte en vectoriel, donc net du debut a la fin de l'animation. */
@property --tilt{syntax:'<angle>'; inherits:false; initial-value:0deg;}
@property --lift{syntax:'<length>'; inherits:false; initial-value:0px;}
@property --rv-y{syntax:'<length>'; inherits:false; initial-value:0px;}
@property --rv-o{syntax:'<number>'; inherits:false; initial-value:1;}
@property --fade{syntax:'<number>'; inherits:false; initial-value:1;}
@property --pop{syntax:'<number>'; inherits:false; initial-value:1;}
.glass{background-color:var(--glass-tint-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-ring), var(--glass-shadow);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background-color:#fff; box-shadow:none;}
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  margin:0;
  background:var(--cream-50);
  color:var(--ink-900);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.eyebrow,.big-letter{font-family:"Baloo 2","Plus Jakarta Sans",sans-serif;}
h1,h2,h3{margin:0; color:var(--navy-900); text-wrap:balance; line-height:1.06;}
h1{font-size:clamp(2.6rem,5vw,4.1rem); font-weight:800;}
h2{font-size:clamp(2rem,3.4vw,2.7rem); font-weight:700;}
h3{font-size:1.3rem; font-weight:700;}
p{margin:0; color:var(--ink-600);}
a{color:inherit;}
button{font-family:inherit;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
section{position:relative; padding:72px 0; scroll-margin-top:96px;}
@media (max-width:720px){section{padding:56px 0;}}
/* une section qui suit une vague demarre tout de suite : la vague fait
   deja office de respiration, pas besoin d'un grand vide en plus */
.wave-divider + section, .process{padding-top:36px;}
@media (max-width:720px){.wave-divider + section, .process{padding-top:26px;}}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.84rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em;
  color:var(--red-600); margin-bottom:16px;
}
.eyebrow::before{
  content:""; width:18px; height:3px; flex-shrink:0; border-radius:3px;
  background-image:repeating-linear-gradient(90deg, currentColor 0, currentColor 7px, transparent 7px, transparent 12px);
}
.eyebrow::after{
  content:""; width:34px; height:15px; flex-shrink:0; background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MiAxOSI+CjxjaXJjbGUgY3g9IjQiIGN5PSI5IiByPSIxLjgiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEwIiBjeT0iOSIgcj0iMS44IiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxNiIgY3k9IjkiIHI9IjEuOCIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTMxIDFDMjcuNCAxIDI0IDQuMyAyNCA4LjIgMjQgMTMuNSAzMSAxOCAzMSAxOFMzOCAxMy41IDM4IDguMkMzOCA0LjMgMzQuNiAxIDMxIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=");
  mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MiAxOSI+CjxjaXJjbGUgY3g9IjQiIGN5PSI5IiByPSIxLjgiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjEwIiBjeT0iOSIgcj0iMS44IiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxNiIgY3k9IjkiIHI9IjEuOCIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTMxIDFDMjcuNCAxIDI0IDQuMyAyNCA4LjIgMjQgMTMuNSAzMSAxOCAzMSAxOFMzOCAxMy41IDM4IDguMkMzOCA0LjMgMzQuNiAxIDMxIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
  -webkit-mask-size:contain; mask-size:contain;
}
.eyebrow.on-navy{ color:var(--yellow-400); }

/* boutons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 28px; border-radius:999px; font-weight:700; font-size:1rem; text-decoration:none; border:none; cursor:pointer; transition:transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s cubic-bezier(.22,1,.36,1), background-color .3s ease, color .3s ease;}
.btn svg{width:19px; height:19px;}
.btn-red{background-color:rgba(var(--red-600-rgb),.94); color:#fff; box-shadow:var(--glass-ring), var(--shadow-red);}
.btn-red:hover{background-color:rgba(var(--red-700-rgb),.97); transform:rotate(-3deg); box-shadow:var(--glass-ring), 0 22px 40px -16px rgba(var(--red-600-rgb),.5);}
.btn-navy{background-color:rgba(var(--navy-800-rgb),.94); color:#fff; box-shadow:var(--glass-ring), var(--shadow-navy);}
.btn-navy:hover{background-color:rgba(var(--navy-900-rgb),.97); transform:rotate(3deg); box-shadow:var(--glass-ring), 0 22px 40px -16px rgba(var(--navy-900-rgb),.55);}
.btn-outline{background-color:rgba(255,255,255,.88); color:var(--navy-900); box-shadow:inset 0 0 0 1px rgba(var(--navy-900-rgb),.16), 0 10px 22px -18px rgba(var(--navy-900-rgb),.35);}
.btn-outline:hover{background-color:rgba(var(--navy-900-rgb),.7); color:#fff; box-shadow:var(--glass-ring), 0 10px 22px -18px rgba(var(--navy-900-rgb),.35); transform:rotate(3deg);}
.btn-whatsapp{background-color:rgba(33,196,94,.94); color:#fff; box-shadow:var(--glass-ring), 0 18px 34px -18px rgba(37,211,102,.5);}
.btn-whatsapp:hover{background-color:rgba(24,168,80,.97); transform:rotate(-3deg); box-shadow:var(--glass-ring), 0 22px 40px -16px rgba(37,211,102,.55);}
.btn-block{width:100%;}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn{box-shadow:none;}
  .btn-red{background-color:var(--red-600);} .btn-navy{background-color:var(--navy-800);} .btn-outline{background-color:var(--cream-100);} .btn-whatsapp{background-color:#25D366;}
}

.reveal{--rv-o:0; --rv-y:28px; opacity:var(--rv-o); translate:0 var(--rv-y); transition:--rv-o .6s ease, --rv-y .6s ease;}
.reveal.is-visible{--rv-o:1; --rv-y:0px;}

/* ===== NAV + camion GPS ===== */
.nav{position:sticky; top:0; z-index:80; background-color:rgba(var(--cream-50-rgb),.28); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid transparent; box-shadow:none; transition:padding .28s cubic-bezier(.4,0,.2,1), background-color .35s ease, border-color .35s ease, box-shadow .35s ease;}
.nav.scrolled{background-color:rgba(var(--cream-50-rgb),.42); border-bottom-color:rgba(var(--navy-900-rgb),.08); box-shadow:0 12px 30px -22px rgba(var(--navy-900-rgb),.3);}
/* ===== NAV SUR FOND SOMBRE =====
   Quand la barre passe au dessus d'une section bleu marine (comment ca
   marche, rappel, contact, pied de page), elle bascule en verre sombre
   transparent avec textes clairs, au lieu de rester une bande blanche
   quasi opaque qui cassait la transparence. Classe posee en JS. */
.nav a, .nav .nav-links a, .brand-wordmark, .route-wave-bg, .route-wave-fg, .route-stop{transition:color .35s ease, filter .35s ease, stroke .35s ease, background .35s ease, border-color .35s ease, opacity .22s ease, height .28s cubic-bezier(.4,0,.2,1);}
.nav.nav-measuring, .nav.nav-measuring *{transition:none !important;}
.nav.on-dark{background-color:rgba(var(--navy-900-rgb),.34); border-bottom-color:rgba(255,255,255,.1); box-shadow:0 12px 30px -22px rgba(0,0,0,.45);}
.nav.on-dark .nav-links a{color:rgba(255,255,255,.82);}
.nav.on-dark .nav-links a:hover{color:#fff;}
.nav.on-dark .brand-wordmark, .nav.on-dark .brand-logo{filter:brightness(0) invert(1);}
.nav.on-dark .route-wave-bg{stroke:rgba(255,255,255,.3);}
.nav.on-dark .route-wave-fg{stroke:#fff;}
.nav.on-dark .route-stop{background:rgba(255,255,255,.2); border-color:#fff;}
.nav.on-dark .route-stop.active{background:var(--red-600); border-color:var(--red-600);}
.nav.on-dark .nav-toggle{border-color:#fff;}
.nav.on-dark .nav-toggle path{stroke:#fff;}
.nav.on-dark .nav-links.open{background-color:rgba(var(--navy-900-rgb),.92); border-bottom-color:rgba(255,255,255,.1);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background-color:var(--cream-50);}
}
.nav-inner{max-width:1180px; margin:0 auto; padding:14px 24px 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; transition:padding .28s cubic-bezier(.4,0,.2,1);}
.nav-inner > .brand{justify-self:start;}
.nav-inner > nav{justify-self:center;}
.nav-inner > .nav-actions, .nav-inner > .nav-toggle{justify-self:end; grid-column:3;}
@media (min-width:920px){.nav{padding-bottom:16px;} .nav.scrolled{padding-bottom:12px;}}
.brand{display:flex; align-items:center; text-decoration:none;}
/* largeur explicite (pas laissee au contenu) : le logo et l'ecriture du
   logo n'ont pas le meme ratio largeur/hauteur, et l'ecriture (position
   absolute, pour le fondu) ne participerait pas au calcul de largeur
   automatique du conteneur flex, elle deborderait donc sur les liens du
   menu si la largeur n'etait pas fixee explicitement pour chaque etat */
.brand-media{position:relative; height:100px; width:138px; display:flex; align-items:center; transition:height .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);}
.brand-logo{height:100px; width:auto; display:block; transition:opacity .22s ease, height .28s cubic-bezier(.4,0,.2,1);}
.brand-wordmark{position:absolute; left:0; top:50%; transform:translateY(-50%); width:auto; height:0; display:block; opacity:0; transition:opacity .22s ease, height .28s cubic-bezier(.4,0,.2,1); pointer-events:none;}
.nav.scrolled .nav-inner{padding:12px 24px 0;}
.nav.scrolled .brand-media{height:60px; width:222px;}
.nav.scrolled .brand-logo{opacity:0; height:60px;}
.nav.scrolled .brand-wordmark{opacity:1; height:50px;}
.nav-links{display:none; list-style:none; margin:0; padding:0; align-items:center; gap:30px; position:relative;}
@media (min-width:920px){.nav-links{display:flex;}}
@media (min-width:920px) and (max-width:1120px){.nav-links{gap:18px;} .nav-links a{font-size:.88rem;}}
.nav-links a{position:relative; text-decoration:none; color:var(--ink-600); font-weight:600; font-size:.94rem; white-space:nowrap; padding-bottom:5px;}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; border-radius:2px; background:var(--red-600); transition:right .3s cubic-bezier(.22,1,.36,1);}
.nav-links a:hover{color:var(--navy-900);}
.nav-links a:hover::after{right:0;}
.nav-actions{display:none; align-items:center; gap:10px;}
@media (min-width:920px){.nav-actions{display:flex;}}
.nav-actions .btn{padding:11px 22px; font-size:.9rem;}
.nav-toggle{display:inline-flex; background:none; color:var(--navy-900); border:2px solid var(--navy-900); border-radius:10px; padding:7px 9px; cursor:pointer;}
@media (min-width:920px){.nav-toggle{display:none;}}
.nav-links.open{display:flex; position:absolute; top:100%; left:0; right:0; background-color:rgba(var(--cream-50-rgb),.88); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); flex-direction:column; align-items:flex-start; padding:18px 24px 22px; border-bottom:1px solid rgba(var(--navy-900-rgb),.08); box-shadow:0 16px 30px -20px rgba(var(--navy-900-rgb),.3); gap:14px;}

.route-track{position:relative; height:18px; margin:18px 0 0; opacity:1; visibility:visible; transition:margin-top .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility 0s;}
/* en haut de page (accueil), pas de piste GPS ni de camion : ils
   apparaissent seulement quand on commence a descendre dans la page */
.nav:not(.scrolled) .route-track{height:0; margin-top:0; opacity:0; visibility:hidden; transition:margin-top .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility 0s .28s;}
@media (max-width:919px){.route-track{display:none;}}
.route-wave{position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; z-index:1;}
.route-wave-bg{fill:none; stroke:rgba(var(--navy-900-rgb),.22); stroke-width:3; stroke-linecap:round; stroke-dasharray:3 10; vector-effect:non-scaling-stroke;}
.route-wave-fg{fill:none; stroke:var(--navy-800); stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke;}
#routeClipRect{transition:width .18s ease-out;}
@media (prefers-reduced-motion: reduce){#routeClipRect{transition:none;}}
.route-stop{position:absolute; top:50%; width:9px; height:9px; border-radius:50%; background:var(--navy-100); border:2px solid var(--navy-700); transform:translate(-50%,-50%); transition:background .25s ease, border-color .25s ease, transform .25s ease; z-index:2;}
.route-stop.active{background:var(--red-600); border-color:var(--red-600); transform:translate(-50%,-50%) scale(1.35);}
.route-truck{position:absolute; top:50%; width:50px; height:30px; transform:translate(-50%,-50%); left:0%; filter:drop-shadow(0 3px 4px rgba(var(--navy-900-rgb),.4)); will-change:left; z-index:3; transition:left .18s ease-out, width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1);}
.nav.scrolled .route-truck{width:44px; height:26px;}
@media (prefers-reduced-motion: reduce){.route-truck{transition:none;}}
.route-truck img{display:block; width:100%; height:100%; object-fit:contain;}

/* ===== HERO ===== */
.hero{padding-top:70px; padding-bottom:40px; overflow-x:clip; overflow-y:visible;}
.hero-blob{position:absolute; z-index:0; border-radius:63% 37% 54% 46% / 42% 46% 54% 58%;}
.hero-blob.b1{width:520px; height:520px; background:var(--navy-100); top:-140px; right:-160px;}
.hero-blob.b2{width:220px; height:220px; background:var(--cream-100); bottom:-60px; left:-80px; border-radius:41% 59% 60% 40% / 45% 41% 59% 55%;}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center;}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;}}
.hero-copy h1 .accent{color:var(--red-600);}
.hero-copy p.lead{margin-top:20px; font-size:1.1rem; max-width:50ch; line-height:1.6;}
.hero-copy p.lead-secondary{margin-top:14px; font-size:.98rem; max-width:46ch; line-height:1.65; color:var(--ink-600);}
.hero-copy p.hero-cta-line{margin-top:18px; font-size:1.02rem; font-weight:700; color:var(--navy-900);}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:32px;}
.hero-note{margin-top:14px; font-size:.86rem; color:var(--ink-600); font-weight:600;}
.google-badge{display:inline-flex; align-items:center; gap:9px; background-color:rgba(255,255,255,.92); border-radius:999px; padding:10px 20px 10px 16px; box-shadow:var(--glass-ring-soft), 0 12px 24px -16px rgba(var(--navy-900-rgb),.3); margin-top:24px; transition:transform .38s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background-color .25s ease;}
.google-badge:hover{transform:rotate(-3deg); background-color:#fff; box-shadow:var(--glass-ring-soft), 0 16px 28px -14px rgba(var(--navy-900-rgb),.36);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .google-badge{background-image:none; background-color:#fff; box-shadow:0 12px 24px -16px rgba(var(--navy-900-rgb),.35);}
}
.google-badge .stars{display:flex; gap:2px; color:var(--yellow-400);}
.google-badge .stars svg{width:15px; height:15px;}
.google-badge span.label{font-size:.85rem; font-weight:700; color:var(--navy-900);}
.google-badge span.label strong{color:var(--red-600);}


.hero-visual{position:relative; min-height:440px;}
.hero-card{position:absolute; background-color:rgba(255,255,255,.96); border-radius:22px; box-shadow:var(--glass-ring-soft), 0 24px 46px -20px rgba(var(--navy-900-rgb),.3); transform:translateY(var(--lift)) rotate(var(--tilt)); transition:--tilt .45s cubic-bezier(.22,1,.36,1), --lift .45s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), max-width .4s cubic-bezier(.22,1,.36,1);}
.hero-card.main{left:6%; top:4%; width:78%; background:linear-gradient(155deg,var(--navy-900),var(--navy-700)); color:#fff; --tilt:-3deg; z-index:2; padding:30px; box-shadow:var(--glass-ring), 0 24px 46px -20px rgba(var(--navy-900-rgb),.35);}
.hero-card.main:hover{--tilt:0deg; --lift:-3px;}
.hero-card.main .route-mini{margin-top:22px; display:flex; align-items:center; gap:10px;}
.hero-card.main .route-mini-line{flex:1; height:2px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 7px, transparent 7px 14px);}
.hero-card.main .route-mini-dot{width:11px; height:11px; border-radius:50%; background:#fff; border:2px solid rgba(255,255,255,.6);}
.hero-card.main .route-mini-dot.end{background:var(--red-600); border-color:var(--red-600);}
.hero-card.trust{right:0%; bottom:0%; width:auto; max-width:272px; --tilt:4deg; z-index:3; padding:18px 20px;}
.hero-card.trust:hover{--tilt:0deg; --lift:-3px;}
.trust-row{display:flex; align-items:center; gap:10px;}
.trust-row + .trust-row{margin-top:11px;}
.trust-row-icon{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff;}
.trust-row-icon.is-google{background:#fff; border:1px solid rgba(var(--navy-900-rgb),.12);}
.trust-row-icon svg{width:14px; height:14px;}
.trust-row-icon.is-google svg{width:16px; height:16px;}
.trust-row-text{font-size:.8rem; font-weight:700; color:var(--navy-900); line-height:1.3;}
.trust-row-text span{font-weight:600; color:var(--ink-600);}

/* TEXTE NET SUR LES CARTES PENCHEES : une carte inclinee reste nette tant
   que le navigateur dessine son texte directement en biais. Tout ce qui la
   fait passer sur un calque GPU (backdrop-filter, will-change, translate3d,
   filter) fait rasteriser le texte a plat puis tourner l'image, d'ou le
   flou. Donc aucune de ces proprietes sur .hero-card, .formule-card,
   .testi-card et .coverage-visual. */

/* badge garde meuble qui se deplie */
.hero-card.badge{left:0%; top:65.7%; width:auto; max-width:min(228px, 80%); z-index:4; --tilt:-6deg; border:none; text-align:left; cursor:pointer; padding:14px 16px; overflow:hidden;}
.hero-card.badge .badge-top{display:flex; align-items:center; gap:10px;}
.hero-card.badge svg.icon{width:26px; height:26px; color:var(--yellow-400); flex-shrink:0;}
/* largeur fixe (pas liee au survol) : le texte doit se decouper exactement
   pareil au repos et au survol, sinon il change de nombre de lignes en
   passant de l'un a l'autre, ce qui donne une animation saccadee */
.hero-card.badge .badge-label{font-weight:700; font-size:.85rem; color:var(--navy-900); max-width:148px; overflow-wrap:anywhere; line-height:1.3;}
.hero-card.badge .badge-reveal{display:block; max-height:0; --fade:0; opacity:var(--fade); overflow:hidden; transition:max-height .4s cubic-bezier(.22,1,.36,1), --fade .32s ease, margin-top .4s cubic-bezier(.22,1,.36,1); font-size:.8rem; font-weight:600; color:var(--ink-600); line-height:1.5; margin-top:0;}
.hero-card.badge .badge-reveal b{color:var(--red-600);}
.hero-card.badge:hover,.hero-card.badge:focus-visible,.hero-card.badge.open{--tilt:0deg; --lift:-3px; box-shadow:0 28px 50px -20px rgba(var(--navy-900-rgb),.4);}
.hero-card.badge:hover .badge-reveal,.hero-card.badge:focus-visible .badge-reveal,.hero-card.badge.open .badge-reveal{max-height:170px; --fade:1; margin-top:10px;}

/* ===== BANDEAU DE CONFIANCE =====
   Flotte directement sur le meme fond creme que le hero et le haut de
   formules, sans bande blanche isolee ni vagues a elle : ca evite le
   "sandwich" hero creme / bandeau blanc / formules creme qui cassait la
   continuite. Une seule vraie coupure de couleur reste, celle vers la
   bande blanche du devis plus bas. ===== */
.trust-bar{padding:26px 0 8px; position:relative; z-index:1;}
@media (max-width:520px){.trust-bar{padding:16px 0 4px;}}
/* encart blanc aux bords haut et bas ondules : le masque est fait de trois
   couches (vague du haut, corps plein, vague du bas) a hauteur fixe, pour
   que l'ondulation garde la meme amplitude quelle que soit la hauteur de
   l'encart (1 ligne sur ordinateur, 4 sur mobile). L'ombre est portee par
   le parent (drop-shadow suit la forme masquee). */
.trust-wrap{filter:drop-shadow(0 18px 26px rgba(var(--navy-900-rgb),.12));}
.trust-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;}
.trust-bar-inner{background:#fff; padding:58px 0;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2036%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C36%20L0%2C20%20C110%2C2%20230%2C34%20380%2C17%20C520%2C1%20650%2C32%20800%2C15%20C930%2C1%201070%2C30%201200%2C14%20L1200%2C36%20Z%22/%3E%3C/svg%3E"), linear-gradient(#000,#000), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2036%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C0%20L1200%2C0%20L1200%2C18%20C1080%2C34%20950%2C3%20810%2C20%20C670%2C35%20550%2C4%20410%2C19%20C270%2C34%20140%2C3%200%2C18%20Z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2036%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C36%20L0%2C20%20C110%2C2%20230%2C34%20380%2C17%20C520%2C1%20650%2C32%20800%2C15%20C930%2C1%201070%2C30%201200%2C14%20L1200%2C36%20Z%22/%3E%3C/svg%3E"), linear-gradient(#000,#000), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2036%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C0%20L1200%2C0%20L1200%2C18%20C1080%2C34%20950%2C3%20810%2C20%20C670%2C35%20550%2C4%20410%2C19%20C270%2C34%20140%2C3%200%2C18%20Z%22/%3E%3C/svg%3E");
  -webkit-mask-size:100% 36px, 100% calc(100% - 70px), 100% 36px; mask-size:100% 36px, 100% calc(100% - 70px), 100% 36px;
  -webkit-mask-position:top, center, bottom; mask-position:top, center, bottom;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;}
@media (max-width:640px){.trust-bar-inner{padding:50px 0;}}
@media (max-width:860px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:480px){.trust-grid{grid-template-columns:1fr;}}
.trust-item{display:flex; align-items:center; gap:12px;}
.trust-item .trust-icon{width:42px; height:42px; border-radius:12px; background:var(--red-100); color:var(--red-600); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.trust-item .trust-icon svg{width:22px; height:22px;}
.trust-item strong{display:block; font-size:.92rem; color:var(--navy-900); font-weight:800;}
.trust-item span{display:block; font-size:.78rem; color:var(--ink-600); margin-top:2px;}

/* ===== SEPARATEURS ONDULES ENTRE TOUTES LES SECTIONS =====
   Chaque bande de transition est un element autonome (pas des pseudo
   elements a decalage negatif) pour ne jamais se faire rogner par un
   overflow:hidden pose sur une section voisine. Le rectangle de fond
   reprend la couleur de la section du dessus, la vague dessinee par
   dessus reprend celle de la section du dessous : la jonction est donc
   toujours parfaite des deux cotes. Chaque section a sa propre forme de
   vague. Le dessin (couleurs comprises) est calcule par le serveur a partir
   du theme et des sections visibles : voir server/services/waves.js. */
.wave-divider{display:block; position:relative; z-index:1; margin:-1px 0; width:100%; height:62px; background-repeat:no-repeat; background-size:100% 100%; background-position:center; pointer-events:none;}
@media (max-width:640px){.wave-divider{height:32px;}}

/* ===== FORMULES ===== */
.section-head{max-width:620px; margin:0 0 50px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.formules-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; align-items:end;}
@media (max-width:920px){.formules-grid{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; max-width:620px; margin:0 auto;} .formule-card{--tilt:0deg !important;}}
@media (max-width:640px){.formules-grid{grid-template-columns:1fr; max-width:420px;}}
.formule-card{background:#fff; border-radius:24px; padding:34px 30px 36px; box-shadow:0 20px 40px -24px rgba(var(--navy-900-rgb),.28); position:relative; cursor:pointer; transform:translateY(var(--lift)) rotate(var(--tilt)); transition:--tilt .45s cubic-bezier(.22,1,.36,1), --lift .45s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), --rv-o .6s ease, --rv-y .6s ease;}
.formule-card:focus-visible{outline:3px solid var(--navy-700); outline-offset:3px;}
.formule-card:nth-child(1){--tilt:-2deg;}
.formule-card:nth-child(3){--tilt:2deg;}
.formules-grid .formule-card:hover{--tilt:0deg; --lift:-6px; box-shadow:0 28px 50px -22px rgba(var(--navy-900-rgb),.4);}
.formule-card.popular{z-index:2; box-shadow:0 30px 55px -20px rgba(var(--red-600-rgb),.35); border:2px solid var(--red-600);}
.formule-ribbon{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--red-600); color:#fff; font-size:.78rem; font-weight:800; padding:6px 16px; border-radius:999px; letter-spacing:.03em; box-shadow:0 10px 18px -8px rgba(var(--red-600-rgb),.6);}
.formule-icon{width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.formule-card:nth-child(1) .formule-icon{background:var(--cream-100); color:var(--red-600);}
.formule-card.popular .formule-icon{background:var(--red-100); color:var(--red-600);}
.formule-card:nth-child(3) .formule-icon{background:var(--navy-100); color:var(--navy-800);}
.formule-icon svg{width:25px; height:25px;}
.formule-card h3{font-size:1.25rem;}
.formule-card > p{font-size:.92rem !important; margin-top:5px !important;}
.formule-list{list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid rgba(var(--navy-900-rgb),.08); display:flex; flex-direction:column; gap:11px;}
.formule-list li{display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--ink-600); font-weight:500; line-height:1.42;}
.formule-list li svg{width:17px; height:17px; color:var(--red-600); flex-shrink:0; margin-top:2px;}
.formule-fit{display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding:7px 13px; border-radius:999px; background:var(--cream-100); font-size:.78rem; font-weight:700; color:var(--navy-900);}
.formule-card.popular .formule-fit{background:var(--red-100);}
.formule-card:nth-child(3) .formule-fit{background:var(--navy-100);}
.formule-fit svg{width:14px; height:14px; flex-shrink:0;}

#formules{overflow-x:clip; padding-top:48px; padding-bottom:0;}
#formules > .container{position:relative; z-index:1;}
.formules-blob{position:absolute; z-index:0; border-radius:58% 42% 39% 61% / 55% 44% 56% 45%;}
.formules-blob.f1{width:280px; height:280px; background:var(--cream-100); top:6%; right:-100px;}
.formules-blob.f2{width:180px; height:180px; background:#fff; bottom:8%; left:-70px; border-radius:41% 59% 60% 40% / 45% 41% 59% 55%; box-shadow:0 30px 50px -30px rgba(var(--navy-900-rgb),.15);}

/* ===== BANDE PLEINE LARGEUR : FORMULAIRE DE DEVIS INTEGRE (sous les formules) ===== */
.quote-band{width:100%; background:#fff; margin-top:0; position:relative;}
.quote-band .container{padding-top:56px; padding-bottom:56px; position:relative; z-index:1;}
.inline-quote{margin-top:0;}
.inline-quote h3{font-size:1.3rem;}
.inline-quote > p{margin-top:8px; font-size:.92rem;}
.inline-quote .quote-form{margin-top:24px;}
@media (max-width:640px){.quote-band{margin-top:0;} .quote-band .container{padding-top:40px; padding-bottom:40px;}}

/* ===== ENCART GARDE MEUBLE (dans la bande devis, a la place des anciens tags) ===== */
.storage-banner{max-width:940px; margin:40px auto 0; background:var(--cream-100); border-radius:24px; padding:30px 34px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; overflow:hidden; box-shadow:0 24px 46px -28px rgba(var(--navy-900-rgb),.3); cursor:pointer; transform:translateY(var(--lift)); transition:--lift .4s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), --rv-o .6s ease, --rv-y .6s ease;}
.storage-banner:hover{--lift:-4px; box-shadow:0 30px 54px -26px rgba(var(--navy-900-rgb),.38);}
.storage-banner:focus-visible{outline:3px solid var(--navy-700); outline-offset:3px;}
.storage-banner-icon{width:56px; height:56px; border-radius:16px; background:var(--navy-100); color:var(--navy-800); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.storage-banner-icon svg{width:28px; height:28px;}
.storage-banner-text{flex:1 1 260px; min-width:0; max-width:100%;}
.storage-banner-text h3{font-size:1.1rem; overflow-wrap:anywhere;}
.storage-banner-text p{margin-top:4px; font-size:.9rem; overflow-wrap:anywhere;}
.storage-banner .btn{flex:0 1 auto; max-width:100%; margin-left:auto; white-space:normal; text-align:center;}
@media (max-width:760px){.storage-banner{flex-direction:column; align-items:flex-start; padding:26px 24px;} .storage-banner .btn{margin-left:0; width:100%;}}

/* ===== FORMULAIRE : CASES A COCHER CONDITIONNELLES ===== */
.checkbox-field{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:.85rem; font-weight:600; color:var(--navy-900); cursor:pointer; line-height:1.3;}
.checkbox-field input[type="checkbox"]{-webkit-appearance:none; appearance:none; width:19px; height:19px; min-width:19px; flex:0 0 19px; margin:0; border-radius:6px; border:1.5px solid rgba(var(--navy-900-rgb),.3); background:#fff; cursor:pointer; position:relative; transition:background .15s ease, border-color .15s ease; box-shadow:none;}
.checkbox-field input[type="checkbox"]:hover{border-color:var(--navy-700);}
.checkbox-field input[type="checkbox"]:checked{background:var(--red-600); border-color:var(--red-600);}
.checkbox-field input[type="checkbox"]:checked::after{content:""; position:absolute; left:6px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.checkbox-field input[type="checkbox"]:focus-visible{outline:2px solid var(--navy-700); outline-offset:2px;}
.checkbox-field[hidden]{display:none;}

/* ===== COMMENT CA MARCHE ===== */
.process{background:var(--navy-900); color:#fff; overflow:hidden;}
.process .section-head h2{color:#fff;}
.process-route{position:relative; margin-top:30px;}
.process-route svg.path{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none;}
.process-list{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; z-index:2;}
@media (max-width:860px){.process-list{grid-template-columns:1fr; max-width:360px; margin:0 auto;} .process-route svg.path{display:none;}}
.process-step{text-align:center;}
@media (max-width:860px){.process-step{text-align:left; display:flex; gap:16px; align-items:flex-start;}}
.process-num{width:56px; height:56px; border-radius:50%; background:var(--red-600); color:#fff; font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.3rem; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; box-shadow:0 0 0 6px var(--navy-900), 0 0 0 9px rgba(var(--red-600-rgb),.25);}
@media (max-width:860px){.process-num{margin:0; flex-shrink:0;}}
.process-step h3{color:#fff; margin-bottom:8px; font-size:1.15rem;}
.process-step p{color:rgba(255,255,255,.68); font-size:.92rem;}

/* ===== ENGAGEMENTS ===== */
.engagement-intro{max-width:760px; margin:0 auto 46px; text-align:center;}
.engagement-intro p{font-size:1.02rem;}
.values-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;}
@media (max-width:860px){.values-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.values-grid{grid-template-columns:1fr;}}
.value-card{background:#fff; border-radius:22px; padding:26px 20px; text-align:center; box-shadow:0 18px 36px -24px rgba(var(--navy-900-rgb),.3);}
.value-icon{width:56px; height:56px; margin:0 auto 14px; border-radius:16px; background:var(--red-100); color:var(--red-600); display:flex; align-items:center; justify-content:center;}
.value-icon svg{width:26px; height:26px;}
.value-card:nth-child(2) .value-icon{background:var(--navy-100); color:var(--navy-800);}
.value-card:nth-child(3) .value-icon{background:#FFF3D6; color:#B8860B;}
.value-card:nth-child(4) .value-icon{background:var(--red-100); color:var(--red-600);}
.value-card h3{font-size:1.05rem; margin-bottom:6px;}
.value-card p{font-size:.86rem;}

/* ===== RAPPEL CTA INTERMEDIAIRE ===== */
.mid-cta{background:var(--navy-900); padding:34px 0;}
.mid-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.mid-cta-inner h3{color:#fff; font-size:1.2rem;}
.mid-cta-inner p{color:rgba(255,255,255,.68); margin-top:4px; font-size:.92rem;}
@media (max-width:640px){.mid-cta-inner{flex-direction:column; align-items:flex-start; text-align:left;} .mid-cta-inner .btn{width:100%;}}

/* ===== ZONES ===== */
.coverage{background:var(--cream-100);}
.coverage-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
@media (max-width:900px){.coverage-grid{grid-template-columns:1fr;}}
.zone-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.zone-pill{padding:9px 18px; border-radius:999px; background:#fff; border:1px solid rgba(var(--navy-900-rgb),.14); font-size:.9rem; font-weight:700; color:var(--navy-800);}
.zone-pill.secondary{background:transparent; border:1.5px dashed rgba(var(--navy-900-rgb),.28); color:var(--ink-600); font-weight:600;}
.coverage-visual{position:relative; background:#fff; border-radius:28px; padding:20px; border:1px solid rgba(var(--navy-900-rgb),.1); box-shadow:0 30px 56px -22px rgba(var(--navy-900-rgb),.4); transform:rotate(-1.5deg);}
.zone-leaflet-wrap{position:relative; border-radius:18px; overflow:hidden;}
.zone-leaflet-map{width:100%; height:380px; background:var(--navy-100);}
.zone-leaflet-map .leaflet-container{font-family:"Plus Jakarta Sans",sans-serif; background:var(--navy-100);}
.zone-leaflet-map .leaflet-popup-content-wrapper{background:var(--navy-900); color:#fff; border-radius:10px; box-shadow:0 12px 24px -12px rgba(0,0,0,.5);}
.zone-leaflet-map .leaflet-popup-content{margin:10px 14px; font-size:.78rem; font-weight:600; line-height:1.5;}
.zone-leaflet-map .leaflet-popup-content strong{font-family:"Baloo 2",sans-serif; font-size:.9rem;}
.zone-leaflet-map .leaflet-popup-tip{background:var(--navy-900);}
.zone-leaflet-map .leaflet-popup-close-button{color:#fff !important; opacity:.8;}
.zone-leaflet-map .leaflet-popup-close-button:hover{opacity:1;}
.zl-pin-wrap{background:none; border:none;}
.zl-pin-dot{display:block; width:16px; height:16px; border-radius:50%; background:var(--navy-700); border:3px solid #fff; box-shadow:0 4px 10px -2px rgba(var(--navy-900-rgb),.5);}
.zl-pin-dot.zl-pin-main{width:20px; height:20px; background:var(--red-600);}
.zl-pin-dot.zl-pin-national{width:13px; height:13px; background:var(--navy-800);}
.zone-leaflet-map .leaflet-tooltip.zl-pin-label{background:transparent; border:none; box-shadow:none; padding:2px 0; font-size:.66rem; font-weight:800; color:var(--navy-800); letter-spacing:.01em;}
.zone-leaflet-map .leaflet-tooltip.zl-pin-label::before{display:none;}
.zone-map-scroll-hint{position:absolute; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; background:rgba(var(--navy-900-rgb),.6); color:#fff; font-size:.84rem; font-weight:700; line-height:1.5; cursor:pointer; opacity:var(--fade); transition:--fade .3s ease;}
.zone-map-scroll-hint.hidden{--fade:0; pointer-events:none;}
.zone-map-reset{position:absolute; top:12px; right:12px; z-index:600; display:inline-flex; align-items:center; gap:6px; background-color:rgba(255,255,255,.94); border-radius:999px; padding:7px 14px 7px 12px; font-size:.72rem; font-weight:700; color:var(--navy-800); cursor:pointer; box-shadow:var(--glass-ring-soft), 0 10px 20px -10px rgba(var(--navy-900-rgb),.3); transition:background-color .2s ease, color .2s ease;}
.zone-map-reset.is-national{background:var(--navy-800); color:#fff; border-color:var(--navy-800);}
.zone-map-reset svg{width:13px; height:13px;}
@media (max-width:640px){.zone-leaflet-map{height:300px;}}
.zone-hint{margin-top:14px; font-size:.78rem; color:var(--ink-400); text-align:center; line-height:1.6;}

/* ===== AVIS ===== */
.testi-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; opacity:var(--fade); transition:--fade .25s ease;}
.testi-grid.is-swapping{--fade:0;}
.testi-controls{display:flex; justify-content:center; margin-top:28px;}
.testi-refresh{display:inline-flex; align-items:center; gap:9px; background-color:rgba(255,255,255,.9); border:1.5px dashed rgba(var(--navy-900-rgb),.3); border-radius:999px; padding:11px 22px; font-weight:700; font-size:.88rem; color:var(--navy-900); cursor:pointer; transition:background-color .2s ease, border-color .2s ease, transform .38s cubic-bezier(.22,1,.36,1);}
.testi-refresh:hover{background-color:var(--cream-100); border-color:var(--navy-700); transform:rotate(3deg);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .testi-refresh{background-color:#fff;}
}
.testi-refresh svg{width:17px; height:17px; flex-shrink:0;}
@media (max-width:920px){.testi-grid{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:640px; margin:0 auto;} .testi-card{--tilt:0deg !important;}}
@media (max-width:640px){.testi-grid{grid-template-columns:1fr; max-width:440px;}}
.testi-card{background:#fff; border-radius:22px; padding:28px; box-shadow:0 18px 36px -24px rgba(var(--navy-900-rgb),.28); display:flex; flex-direction:column; gap:14px; transform:translateY(var(--lift)) rotate(var(--tilt)); transition:--tilt .45s cubic-bezier(.22,1,.36,1), --lift .45s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1);}
.testi-grid .testi-card:hover{--tilt:0deg; --lift:-6px; box-shadow:0 26px 48px -22px rgba(var(--navy-900-rgb),.4);}
.testi-card:nth-child(1){--tilt:-1.5deg;}
.testi-card:nth-child(3){--tilt:1.5deg;}
.testi-stars{display:flex; gap:3px; color:var(--yellow-400);}
.testi-stars svg{width:16px; height:16px;}
.testi-quote{font-size:.98rem; color:var(--ink-900); font-weight:500;}
.testi-author{font-weight:800; color:var(--navy-900); font-size:.92rem;}
.testi-context{font-size:.82rem; color:var(--ink-600);}

/* ===== CTA FINALE ===== */
.cta-section{position:relative; background:linear-gradient(180deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 100%);}
.cta-section .eyebrow{color:var(--yellow-400);}
.cta-section h2{color:#fff;}
.cta-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center;}
@media (max-width:900px){.cta-grid{grid-template-columns:1fr;}}
.cta-copy p{color:rgba(255,255,255,.72); margin-top:14px; max-width:46ch;}
.cta-copy .btn{margin-top:28px;}
.quote-contact{display:flex; flex-direction:column; gap:14px;}
.quote-contact a{display:flex; align-items:center; gap:12px; font-weight:700; color:#fff; text-decoration:none; background-color:rgba(255,255,255,.1); padding:12px 16px; border-radius:14px; box-shadow:var(--glass-ring); transition:background-color .2s ease;}
.quote-contact a:hover{background-color:rgba(255,255,255,.18);}
.quote-contact svg{width:20px; height:20px; color:var(--yellow-400); flex-shrink:0;}
.hours-card{margin-top:14px; background-color:rgba(255,255,255,.1); border-radius:16px; padding:14px 18px; color:rgba(255,255,255,.85); font-size:.9rem; font-weight:600; box-shadow:var(--glass-ring);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .quote-contact a,.hours-card{box-shadow:none;}
}

/* ===== FORMULAIRE DE DEVIS (styles partages) ===== */
.quote-form{margin-top:24px;}

/* ===== POPUP DEDIEE GARDE MEUBLE UNIQUEMENT =====
   Il n'y a plus de popup pour le devis general (il est integre sous les
   formules), mais la demande "garde meuble" reste une popup courte et
   dediee, separee du parcours principal */
.modal-overlay{position:fixed; inset:0; background:rgba(var(--navy-900-rgb),.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:200; opacity:0; pointer-events:none; transition:opacity .25s ease;}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-card{position:relative; background-color:rgba(255,255,255,.97); border-radius:26px; max-width:540px; width:100%; max-height:88vh; overflow-y:auto; padding:36px; box-shadow:var(--glass-ring-soft), 0 40px 70px -20px rgba(0,0,0,.4); --pop:0; transform:scale(calc(.92 + .08 * var(--pop))) translateY(calc(10px - 10px * var(--pop))); transition:--pop .28s cubic-bezier(.2,.9,.3,1.3);}
.modal-overlay.open .modal-card{--pop:1;}
.modal-close{position:absolute; top:18px; right:22px; background:var(--cream-100); border:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--navy-900);}
.modal-card h2{font-size:1.5rem;}
.modal-card > p{margin-top:8px;}
@media (max-width:520px){.modal-overlay{padding:12px;} .modal-card{padding:26px 20px 30px; border-radius:20px;} .modal-card h2{font-size:1.3rem;}}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
/* la rangee des deux cartes adresse (bleues) respire avant date / formule */
.form-row:has(> .field-route){margin-bottom:24px;}
.form-row.form-row-name{grid-template-columns:1.35fr .95fr;}
.form-row.form-row-when{grid-template-columns:.85fr 1.15fr;}
@media (max-width:520px){.form-row,.form-row.form-row-name,.form-row.form-row-when{grid-template-columns:1fr;}}
.field{margin-bottom:16px;}
.field label{display:block; font-size:.85rem; font-weight:700; color:var(--navy-900); margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid rgba(var(--navy-900-rgb),.16); font:inherit; color:var(--ink-900); background:#fff; box-shadow:0 1px 2px rgba(var(--navy-900-rgb),.04); transition:border-color .18s ease, box-shadow .18s ease;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(var(--navy-900-rgb),.3);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(var(--navy-700-rgb),.16);}
.field textarea{resize:vertical; min-height:90px;}
.field select{-webkit-appearance:none; appearance:none; padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' stroke='%233E52B0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px;}
.field-route{background:linear-gradient(155deg,var(--navy-900),var(--navy-700)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px 16px 14px; margin-bottom:0; box-shadow:0 20px 40px -26px rgba(var(--navy-900-rgb),.55);}
.field-route label{color:#fff;}
.field-route label:first-of-type{display:flex; align-items:center; gap:8px;}
.field-route label:first-of-type::before{content:""; width:9px; height:9px; border-radius:50%; background:#fff; border:2px solid rgba(255,255,255,.5); flex-shrink:0;}
.field-route.field-route-to label:first-of-type::before{background:var(--red-600); border-color:var(--red-600);}
.field-route .checkbox-field{color:#fff;}
.field-route .checkbox-field input[type="checkbox"]{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4);}
.field-route .checkbox-field input[type="checkbox"]:checked{background:var(--red-600); border-color:var(--red-600);}
.form-note{font-size:.8rem; color:var(--ink-600); margin-top:12px;}
.form-submit-row{display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; margin-top:24px;}
.form-submit-row .btn{width:auto; padding:15px 36px;}
.form-submit-row .form-note{margin-top:0; flex:1 1 220px;}
@media (max-width:520px){.form-submit-row{flex-direction:column; align-items:stretch; gap:14px;} .form-submit-row .btn{width:100%;}}
.form-feedback{margin-top:16px; padding:12px 16px; border-radius:12px; font-size:.9rem; display:none;}
.form-feedback.success{display:block; background:#E4F7EA; color:#1F7A3D;}

/* ===== BOUTONS FLOTTANTS (WHATSAPP + APPEL) ===== */
.float-stack{position:fixed; right:22px; bottom:22px; z-index:150; display:flex; flex-direction:column; align-items:center; gap:14px;}
.wa-float,.call-float,.mail-float{position:relative; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); transition:transform .3s cubic-bezier(.22,1,.36,1), background-color .25s ease;}
.wa-float:hover,.call-float:hover,.mail-float:hover{transform:rotate(-8deg);}
.wa-float{background-color:rgba(33,196,94,.94); box-shadow:var(--glass-ring), 0 16px 30px -10px rgba(37,211,102,.55);}
.call-float{background-color:rgba(var(--navy-800-rgb),.94); box-shadow:var(--glass-ring), 0 16px 30px -10px rgba(var(--navy-900-rgb),.55);}
.mail-float{background-color:rgba(var(--red-600-rgb),.94); box-shadow:var(--glass-ring), 0 16px 30px -10px rgba(var(--red-600-rgb),.5);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wa-float,.call-float,.mail-float{box-shadow:none;}
  .wa-float{background-color:#25D366;} .call-float{background-color:var(--navy-800);} .mail-float{background-color:var(--red-600);}
}
.wa-float svg,.call-float svg,.mail-float svg{width:26px; height:26px;}
.mail-float svg{width:23px; height:23px;}
.wa-float .ping{position:absolute; inset:0; border-radius:50%; background:#25D366; animation:waPing 2.4s ease-out infinite;}
@keyframes waPing{0%{transform:scale(1); opacity:.55;} 100%{transform:scale(1.7); opacity:0;}}

/* ===== FOOTER ===== */
footer{background:var(--navy-900); color:rgba(255,255,255,.75); padding:50px 0 26px;}
.footer-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.14);}
.footer-brand img{height:34px;}
.footer-col h4{color:#fff; font-size:.9rem; margin-bottom:12px; font-weight:700;}
.footer-col div{display:flex; flex-direction:column; gap:8px; font-size:.9rem;}
.footer-meta{margin-top:20px; font-size:.8rem; color:rgba(255,255,255,.5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ===== FORMULAIRES : ETATS D'ENVOI ===== */
.form-feedback.error{display:block; background:var(--red-100); color:var(--red-700);}
.btn[disabled]{opacity:.7; cursor:progress;}
/* champ piege anti robots : invisible pour les humains */
.hp-field{position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden;}

/* ===== NUMERO DE TELEPHONE SUR ORDINATEUR =====
   Sur telephone, un clic sur "Appeler" lance directement l'appel. Sur
   ordinateur, ou aucun appel ne peut partir, une petite bulle affiche le
   numero avec un bouton pour le copier. */
.phone-pop{position:fixed; z-index:260; min-width:250px; max-width:calc(100vw - 32px); background:#fff; border-radius:18px; padding:16px 18px; box-shadow:inset 0 0 0 1px rgba(var(--navy-900-rgb),.08), 0 24px 50px -18px rgba(var(--navy-900-rgb),.45); display:flex; flex-direction:column; gap:10px;}
.phone-pop[hidden]{display:none;}
.phone-pop-label{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--red-600);}
.phone-pop-number{font-family:"Baloo 2","Plus Jakarta Sans",sans-serif; font-size:1.45rem; font-weight:800; color:var(--navy-900); letter-spacing:.02em; user-select:all;}
.phone-pop-actions{display:flex; gap:8px; flex-wrap:wrap;}
.phone-pop-actions .btn{padding:9px 16px; font-size:.85rem;}
.phone-pop-close{position:absolute; top:8px; right:10px; background:none; border:none; font-size:1.3rem; line-height:1; color:var(--ink-600); cursor:pointer; padding:4px;}

/* ===== PAGES LEGALES ===== */
.legal-page{padding:40px 0 90px;}
.legal-page .container{max-width:820px;}
.legal-page h1{font-size:clamp(2rem,4vw,2.8rem); margin-bottom:28px;}
.legal-page h2{font-size:1.3rem; margin:30px 0 10px;}
.legal-page p{line-height:1.75; margin:0 0 12px;}
.legal-back{display:inline-flex; margin-top:30px;}
.footer-links{display:flex; gap:18px; flex-wrap:wrap;}
.footer-links a{color:rgba(255,255,255,.7); text-decoration:none;}
.footer-links a:hover{color:#fff;}
.footer-links a.footer-credit{color:rgba(255,255,255,.45);}
.footer-links a.footer-credit:hover{color:#fff;}
.legal-credits{margin-top:36px; padding:22px 24px; border-radius:18px; background:#fff; box-shadow:0 18px 40px -30px rgba(27,37,96,.35);}
.legal-credits h2{margin-top:0;}
.legal-credits p{margin:0;}

/* ===== ACCESSIBILITE ===== */
.skip-link{position:absolute; left:16px; top:-60px; z-index:300; background:var(--navy-900); color:#fff; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700;}
.skip-link:focus{top:12px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ===== PETITS ELEMENTS DE TEXTE (anciennement en style en ligne) ===== */
.hero-card-kicker{text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; color:rgba(255,255,255,.65);}
.hero-card-title{color:#fff; margin-top:6px;}
.hero-card-text{margin-top:14px; font-size:.82rem; color:rgba(255,255,255,.7);}
.trust-row-icon.is-navy{background:var(--navy-700);}
.trust-row-icon.is-red{background:var(--red-600);}
.trust-row-icon.is-dark{background:var(--navy-900);}
.formule-sub{margin-top:6px; font-size:.86rem;}
.formules-hint{text-align:center; margin-top:44px; font-size:.82rem; color:var(--ink-400);}
.field-route .field-sub-label{margin-top:10px;}
.field-spaced{margin-top:16px;}
.zones-text{margin-top:16px;}
.google-badge.in-reviews{margin-top:18px;}
.google-badge a{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit;}
.reviews-footnote{text-align:center; margin-top:16px; font-size:.82rem; color:var(--ink-400);}
.footer-tagline{margin-top:14px; max-width:32ch; color:rgba(255,255,255,.55);}
.wa-float svg{position:relative;}
.footer-link{color:inherit; text-decoration:none;}
.footer-link:hover{color:#fff;}
.form-note a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.process-step h3 + p{margin-top:0;}
/* adresses email longues : retour à la ligne plutôt que débordement sur mobile */
.cta-grid > *{min-width:0;}
.quote-contact a, .footer-col a, .footer-col span{overflow-wrap:anywhere;}
/* mobile : l'encart garde meuble ne garde pas de hauteur vide, et les cartes
   de l'accueil ne se chevauchent plus */
@media (max-width:760px){.storage-banner-text{flex:0 0 auto;}}
@media (max-width:520px){.hero-visual{min-height:560px;} .hero-card.badge{top:53%;}}