/* ==========================================================================
   Coursiers Parisiens — design system
   Source de vérité : coursiersparisiens/design/ (maquette hifi)
   ========================================================================== */

/* ---------- Polices (auto-hébergées) ----------
   Hanken Grotesk seule, de 200 à 700 : toute la hiérarchie tient dans
   l'amplitude de ses graisses. Choisie sur un critère mesuré — ses dix
   chiffres ont nativement la même chasse, donc les colonnes de prix
   s'alignent sans dépendre d'une option OpenType qu'une règle CSS
   pourrait annuler. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:200;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-200-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-700-normal.woff2) format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --lime:#8CC63F; --lime2:#A4D037; --green:#4CA845; --green-deep:#2E8B3D;
  --ink:#0E1512; --black:#0E1512; --txt:#4A5750; --gray:#67766D; --gray-l:#94A39A;
  --line:#E4EBE5; --line2:#E4EBE5; --line3:#EDF2ED; --bg:#F5F8F4; --bg2:#FAFCFA;
  --star:#FBBC04;
  --grad:linear-gradient(135deg,#4CA845,#2E8B3D);
  --grad-vitrine:linear-gradient(150deg,#A4D037,#4CA845,#2E8B3D);
  --grad-dark:linear-gradient(135deg,#1A1A1A,#242424);
  --font-title:'Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'Hanken Grotesk',system-ui,sans-serif;
  --shadow-card:0 24px 60px -44px rgba(14,21,18,.5);
  --shadow-cta:0 10px 22px -14px rgba(46,139,61,.55);
  --shadow-hover:0 20px 44px -32px rgba(14,21,18,.35);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;font-family:var(--font-body);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--green-deep);text-decoration:none}
a:hover{color:var(--green)}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.leaflet-container{font-family:var(--font-body);background:#eef0ea}
/* Le fond IGN est un plan couleur ; on le désature pour que le tracé vert de
   la marque reste le seul élément coloré de la carte — ce que le fond CARTO
   « light » donnait nativement avant de réclamer une clé. */
.leaflet-tile-pane{filter:grayscale(.9) contrast(.92) brightness(1.06)}
.leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.7)}

/* ---------- Keyframes ---------- */
@keyframes ping{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.8);opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes shimmer{0%{background-position:-140% 0}100%{background-position:240% 0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- Barre de progression de scroll ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--lime),var(--green-deep));z-index:9999;transition:width .1s linear}

/* ---------- Navigation ----------
   Le menu principal est en capitales : à cette taille les capitales demandent
   un interlettrage plus large, sans quoi elles se collent et deviennent
   pénibles à lire. La graisse monte d'un cran et le corps baisse un peu, deux
   compensations habituelles — une capitale occupe optiquement plus de place
   qu'une bas-de-casse de même corps. */
.nav{position:sticky;top:0;z-index:900;padding:17px 0;background:rgba(255,255,255,0);border-bottom:1px solid transparent;transition:padding .25s ease,box-shadow .25s ease,background .25s ease}
.nav.is-scrolled{padding:11px 0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 26px -18px rgba(14,21,18,.30);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo img{height:49px;display:block}
.nav-links{display:flex;align-items:center;gap:28px;font:600 12.5px var(--font-body);text-transform:uppercase;letter-spacing:.1em}
.nav-links a{color:var(--txt)}
.nav-links a:hover,.nav-links a.is-active{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-client{font:600 12px var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);display:flex;align-items:center;gap:7px}
.nav-actions .btn{text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:12.5px;padding:12px 24px}
.nav-client-ico{width:26px;height:26px;border-radius:50%;border:1.5px solid #d9d9d4;display:inline-flex;align-items:center;justify-content:center}

/* Bascule de langue : un segment unique où la langue courante est pleine et
   l'autre cliquable. Deux liens côte à côte auraient obligé à lire pour savoir
   laquelle est active ; ici la forme le dit avant le texte. */
.nav-lang{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.7);font:600 11px var(--font-body);letter-spacing:.09em}
.nav-lang span,.nav-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:31px;height:23px;border-radius:999px;color:var(--gray);transition:color .18s ease,background .18s ease}
.nav-lang .is-on{background:var(--ink);color:#fff}
.nav-lang a:hover{color:var(--ink);background:var(--bg)}
.nav-burger{display:none;width:42px;height:42px;border:1.5px solid var(--line2);border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -30px rgba(0,0,0,.35)}
.nav-mobile.is-open{display:block}
.nav-mobile .wrap{display:flex;flex-direction:column;padding-top:8px;padding-bottom:18px}
.nav-mobile a{padding:13px 2px;font:600 13px var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);border-bottom:1px solid var(--line3)}
.nav-mobile a:last-child{border-bottom:none}
.nav-mobile .nav-lang{align-self:flex-start;margin-top:16px}
.nav-mobile .nav-lang a{border-bottom:none;padding:0;letter-spacing:.09em}

/* ---------- Boutons ---------- */
.btn{display:inline-block;border-radius:999px;font:500 15.5px var(--font-body);padding:15px 28px;cursor:pointer;border:none;text-align:center}
.btn-primary{color:#fff !important;background:var(--green-deep);box-shadow:var(--shadow-cta)}
.btn-outline{color:var(--ink) !important;background:#fff;border:1.5px solid #e4e4de;padding:13.5px 24px}
.btn-dark{color:#fff !important;background:var(--ink)}
.btn-lime{color:var(--black) !important;background:var(--lime);box-shadow:0 0 34px -6px rgba(140,198,63,.7)}
/* La bannière n'est plus sombre : ce bouton doit redevenir lisible sur clair. */
.btn-ghost-light{color:var(--ink) !important;border:1.5px solid var(--line);background:#fff;font-family:var(--font-body)}
.btn-ghost-light:hover{border-color:var(--ink)}
.btn-sm{padding:11px 22px;border-radius:999px;font-size:13.5px}
.btn-block{display:block;width:100%}

/* ---------- Titres & kickers ---------- */
.kicker{font:500 11px var(--font-mono);letter-spacing:.17em;color:var(--green-deep);text-transform:uppercase}
.kicker-pill{display:inline-flex;align-items:center;gap:8px;font:500 11px var(--font-mono);letter-spacing:.16em;color:var(--green-deep);text-transform:uppercase;background:rgba(140,198,63,.14);padding:6px 12px;border-radius:100px}
h1{font:300 62px/1.04 var(--font-title);letter-spacing:-.035em;color:var(--ink);margin:20px 0 0}
h2{font:300 40px/1.12 var(--font-title);letter-spacing:-.028em;color:var(--ink);margin:14px 0 0}
h3{font:500 19.5px var(--font-title);color:var(--ink)}
.hl{position:relative;display:inline-block;white-space:nowrap}
.hl b{position:absolute;left:-3px;right:-3px;bottom:8px;height:16px;background:var(--lime);opacity:.5;border-radius:3px;z-index:0}
.hl span{position:relative;z-index:1}
.lead{font-size:17.5px;line-height:1.6;color:var(--txt)}

/* ---------- Hero (accueil) ---------- */
/* Dégradé de gris très sobre, en deux couches basses en contraste : une nappe
   qui pose une lumière en haut à droite, puis une descente vers le blanc franc.
   Les gris portent le même biais vert que l'encre — choisis, pas hérités.
   Remplace une trame de points qui refaisait un quadrillage. */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(118% 82% at 76% -6%, #ECF1EE 0%, rgba(236,241,238,0) 58%),
    linear-gradient(178deg, #F1F5F2 0%, #F7F9F8 40%, #fff 88%);
  border-bottom:1px solid var(--line)}
/* Le halo vert qui suivait la souris est supprimé : c'est l'effet de « LED »
   écarté par le client. Aucune lueur nulle part sur le site. */
.hero-glow{display:none !important}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;padding-top:64px;padding-bottom:76px}
.hero-copy p.lead{max-width:470px;margin:24px 0 0}
.hero-ctas{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}
.hero-stats{display:flex;margin-top:44px;border-top:1px solid var(--line);padding-top:22px}
.hero-stat{flex:1}
.hero-stat + .hero-stat{border-left:1px solid var(--line);padding-left:22px}
.hero-stat-num{font:700 30px var(--font-title);color:var(--ink);display:flex;align-items:center;gap:4px}
.hero-stat-num .star{color:var(--star);font-size:23px}
.hero-stat-label{font-size:12.5px;color:var(--gray);margin-top:3px}

/* ---------- Carte de réservation ---------- */
.booking{border:1px solid var(--line2);border-radius:20px;background:#fff;box-shadow:var(--shadow-card);overflow:hidden}
.booking-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f1f1ee}
.booking-title{font:600 14px var(--font-title);color:var(--ink)}
.booking-live{display:flex;align-items:center;gap:6px;font:700 10.5px var(--font-mono);color:var(--green);letter-spacing:.06em}
.live-dot{position:relative;width:7px;height:7px;display:inline-block}
.live-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:ping 1.9s ease-out infinite}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green)}
.booking-body{padding:18px 20px}
.booking-field{display:flex;align-items:center;gap:12px;padding:6px 14px;border:1px solid var(--line);border-radius:12px;position:relative}
.booking-field:focus-within{border-color:var(--green)}
.booking-pin-a{flex:none;width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(76,168,69,.16)}
.booking-pin-b{flex:none;width:10px;height:10px;background:var(--ink);border-radius:2px}
.booking-field-main{flex:1;min-width:0}
.booking-label{font:700 8.5px var(--font-mono);letter-spacing:.14em;color:var(--gray-l);text-transform:uppercase}
.booking-input{width:100%;border:none;outline:none;font:500 14px var(--font-body);color:var(--ink);padding:2px 0 6px;background:transparent}
.booking-connector{height:15px;margin-left:19px;border-left:2px dotted #d6d6d0}
.booking-suggest{position:absolute;left:-1px;right:-1px;top:calc(100% + 4px);z-index:1100;background:#fff;border:1px solid var(--line2);border-radius:12px;box-shadow:0 24px 44px -24px rgba(0,0,0,.4);overflow:hidden;display:none}
.booking-suggest.is-open{display:block}
.booking-suggest button{display:block;width:100%;text-align:left;background:#fff;border:none;border-bottom:1px solid var(--line3);padding:10px 14px;font:500 13px var(--font-body);color:var(--ink);cursor:pointer}
.booking-suggest button:last-child{border-bottom:none}
.booking-suggest button:hover,.booking-suggest button.is-focus{background:var(--bg2)}
.booking-suggest .ctx{display:block;font-size:11px;color:var(--gray)}
.booking-pills{display:flex;gap:8px;margin-top:14px}
.booking-pills + .booking-pills{margin-top:8px}
.bpill{flex:1;text-align:center;padding:10px;border-radius:10px;background:#f4f4f1;color:var(--gray);font:500 13px var(--font-body);border:none;cursor:pointer}
.bpill.is-on{background:var(--ink);color:#fff;font-weight:600}
.bpill-delay{padding:9px;border:1px solid var(--line);background:#fff;border-radius:10px;font:500 12.5px var(--font-body);color:var(--gray)}
.bpill-delay.is-on{border:1.5px solid var(--green);background:rgba(140,198,63,.1);color:var(--green-deep);font-weight:600}
.bpill-delay:disabled{opacity:.45;cursor:not-allowed}
.booking-map-wrap{position:relative;margin-top:14px;border-radius:13px;overflow:hidden;border:1px solid var(--line)}
.booking-map{height:212px;width:100%;background:#eef0ea}
.booking-eta{position:absolute;left:10px;top:10px;z-index:1000;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:7px 11px;box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
.booking-eta-label{font:700 8px var(--font-mono);letter-spacing:.12em;color:var(--gray-l)}
.booking-eta-val{font:700 17px var(--font-title);color:var(--ink);margin-top:1px}
.booking-eta-val small{font-size:11px;color:var(--gray);font-weight:500}
.booking-progress{height:6px;border-radius:3px;background:#eef0ea;margin-top:12px;overflow:hidden}
.booking-progress-bar{width:6%;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--lime));transition:width .16s linear}
.booking-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:16px}
.booking-price-label{font:700 8.5px var(--font-mono);letter-spacing:.14em;color:var(--gray-l)}
.booking-price{font:700 38px var(--font-title);color:var(--ink);letter-spacing:-.02em;line-height:1}
.booking-price small{font-size:16px;color:var(--gray);font-weight:500}
.booking-route{font-size:11.5px;color:var(--gray);text-align:right;line-height:1.4}
.booking-note{margin-top:10px;font-size:11.5px;color:var(--gray);display:none}
.booking-note.is-visible{display:block}
.booking-cta{margin-top:16px;padding:15px;border-radius:999px}

/* ---------- Bandeau confiance ---------- */
.trust{border-top:1px solid var(--line3);border-bottom:1px solid var(--line3);background:var(--bg2)}
.trust .wrap{padding-top:24px;padding-bottom:24px;display:flex;align-items:center;gap:26px}
.trust-label{font:700 10px var(--font-mono);letter-spacing:.16em;color:#b4b4af;white-space:nowrap}
.trust-track-wrap{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.trust-track{display:flex;gap:22px;width:max-content;animation:marquee 24s linear infinite;align-items:center}
/* Bandeau de références.
   Les fichiers sont pré-normalisés : chacun est centré dans une toile de
   520 × 150 et mis à l'échelle pour que sa surface d'encre soit la même que
   celle des autres. Normaliser sur la hauteur seule rendrait les mots-symboles
   larges (SNCF, BURMA) écrasants et les marques carrées (Emmaüs, LNH)
   minuscules. Le CSS n'a donc plus qu'à leur donner à tous la même boîte. */
.trust-logo{display:flex;align-items:center;justify-content:center;
  height:64px;width:224px;flex:none}
.trust-logo img{width:100%;height:100%;object-fit:contain;
  filter:grayscale(1);opacity:.55;transition:.2s}
.trust-logo:hover img{filter:grayscale(0);opacity:1}

/* ---------- Sections ---------- */
.section{padding-top:88px;padding-bottom:20px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.section-head p{font-size:16px;color:var(--txt);margin:12px 0 0;max-width:520px}
.section-head-note{font:600 13px var(--font-body);color:var(--gray);border:1px solid var(--line);border-radius:100px;padding:9px 16px}
.section-head-center{text-align:center;max-width:560px;margin:0 auto}

/* ---------- Tarifs (cartes) ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
/* La pastille est passée à l'intérieur de la carte : débordant en haut,
   elle était rognée par le défilement horizontal des tarifs sur mobile.
   Le haut de la carte réserve donc la place. */
.price-card{border:1px solid var(--line);border-radius:18px;padding:26px 22px;background:#fff;transition:transform .3s ease,box-shadow .3s ease;position:relative}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.price-card-tag{font:700 10px var(--font-mono);letter-spacing:.14em;color:var(--gray-l)}
.price-card-delay{font:700 22px var(--font-title);margin-top:10px;color:var(--ink)}
.price-card-price{display:flex;align-items:flex-end;gap:4px;margin-top:16px}
.price-card-num{font:700 44px var(--font-title);letter-spacing:-.02em;line-height:1;color:var(--ink)}
.price-card-eur{font:700 22px var(--font-title);color:var(--green);margin-bottom:4px}
.price-card-ht{font-size:13px;color:var(--gray);margin-bottom:6px}
.price-card-sep{height:1px;background:#f0f0ec;margin:20px 0}
.price-card ul{list-style:none;padding:0;margin:0;font-size:13.5px;color:var(--txt);line-height:2}
.price-card ul .muted{color:var(--gray-l);font-style:italic}
.price-card .btn{margin-top:22px;padding:12px;border-radius:999px;font-size:13.5px;display:block}
.price-card .btn-card{border:1.5px solid var(--ink);color:var(--ink) !important;background:#fff}
.price-card.is-featured{border:2px solid var(--green);background:linear-gradient(180deg,rgba(140,198,63,.09),#fff 60%);box-shadow:0 30px 60px -34px rgba(46,139,61,.55)}
.price-card.is-featured .price-card-tag{color:var(--green-deep)}
.price-card.is-featured .price-card-num{color:var(--green-deep)}
.price-card.is-featured .price-card-sep{background:rgba(76,168,69,.25)}
.price-badge{position:absolute;top:14px;left:22px;font:700 10px var(--font-mono);letter-spacing:.12em;color:#fff;background:var(--green-deep);padding:5px 12px;border-radius:100px}
.pricing-quote{margin-top:18px;border:1px dashed #cfcfc9;border-radius:18px;padding:22px 26px;background:var(--bg2);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pricing-quote-title{font:700 20px var(--font-title);color:var(--ink)}
.pricing-quote-sub{font-size:14px;color:var(--txt);margin-top:4px}

/* ---------- À propos ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-grid p{font-size:16px;line-height:1.65;color:var(--txt);margin:18px 0 0}
.about-grid p + p{margin-top:14px}
.about-pills{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.about-pill{font:600 13px var(--font-body);color:var(--green-deep);background:rgba(140,198,63,.12);padding:9px 16px;border-radius:100px}
.about-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about-tile{border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff}
.about-tile-num{font:700 40px var(--font-title);color:var(--ink);display:flex;align-items:center;gap:5px}
.about-tile-num .star{color:var(--star);font-size:30px}
.about-tile-label{font-size:13px;color:var(--gray);margin-top:4px}
.about-tile.is-green{border:none;background:var(--green-deep);color:#fff}
.about-tile.is-green .about-tile-num{color:#fff}
.about-tile.is-green .about-tile-label{color:rgba(255,255,255,.9)}
/* La tuile noire etait le dernier fond sombre de la page : ecarte comme les
   autres. Elle garde son role d'accent, mais par le fond lave et un filet,
   pas par un aplat noir. */
.about-tile.is-dark{border:1px solid var(--line);background:var(--bg)}
.about-tile.is-dark .about-tile-num{color:var(--green-deep)}
.about-tile.is-dark .about-tile-label{color:var(--txt)}

/* ---------- Comment ça marche ---------- */
.band{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .wrap{padding-top:84px;padding-bottom:84px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.step-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 26px}
.step-card-top{display:flex;align-items:center;justify-content:space-between}
.step-num{font:700 30px var(--font-title);color:var(--lime)}
.step-ico{width:44px;height:44px;border-radius:12px;background:rgba(140,198,63,.14);display:flex;align-items:center;justify-content:center}
.step-card h3{margin:20px 0 0}
.step-card p{font-size:14.5px;line-height:1.6;color:var(--txt);margin:10px 0 0}

/* ---------- Bannière CTA ----------
   Anciennement sur fond sombre avec un halo vert : c'est précisément la
   direction écartée. Fond clair, filet fin, aucune lueur. */
.cta-banner{position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(178deg,#F1F5F2 0%,#F7F9F8 60%,#FBFCFB 100%);
  box-shadow:inset 0 0 0 1px var(--line);padding:56px 52px;color:var(--ink)}
.cta-banner-halo{display:none}
.cta-banner-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-banner .kicker{color:var(--green-deep)}
.cta-banner h2{color:var(--ink);max-width:560px;line-height:1.12}
.cta-banner-actions{display:flex;flex-direction:column;gap:12px}

/* ---------- Footer ---------- */
.footer{background:var(--bg);border-top:1px solid var(--line)}
.footer-grid{padding-top:56px;padding-bottom:32px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.footer-logo img{height:57px;display:block}
.footer-desc{font-size:13.5px;line-height:1.7;color:var(--txt);margin:18px 0 0;max-width:260px}
.footer-social{display:flex;gap:10px;margin-top:18px}
.footer-social a{width:36px;height:36px;border-radius:9px;border:1px solid #dcdcd6;display:flex;align-items:center;justify-content:center}
.footer-col-title{font:700 10px var(--font-mono);letter-spacing:.14em;color:var(--gray-l)}
.footer-links{display:flex;flex-direction:column;gap:11px;margin-top:16px;font-size:14px}
.footer-links a{color:var(--txt)}
.footer-links a:hover{color:var(--ink)}
.footer-contact{font-size:14px;line-height:1.75;color:var(--txt);margin-top:16px}
.footer-contact a{color:var(--ink);font-weight:600}
.footer-siren{font-family:var(--font-mono);font-size:12px;color:var(--gray-l)}
.footer-bottom{border-top:1px solid #e4e4de}
.footer-bottom .wrap{padding-top:18px;padding-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--gray-l);flex-wrap:wrap}
.footer-bottom-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-bottom-links a{color:var(--gray-l)}
.footer-bottom-links a:hover{color:var(--txt)}
.footer-zone{font-family:var(--font-mono)}

/* ---------- Pages intérieures ---------- */
.page-hero{background-size:24px 24px;border-bottom:1px solid var(--line3)}
.page-hero .wrap{padding-top:52px;padding-bottom:52px}
.page-hero h1{font-size:48px}
.page-hero .lead{max-width:640px;margin-top:20px}
.breadcrumb{font-size:12.5px;color:var(--gray-l);margin-bottom:18px}
.breadcrumb a{color:var(--gray)}
.breadcrumb .sep{margin:0 7px;opacity:.6}
.content{padding-top:56px;padding-bottom:72px}
.content-narrow{max-width:820px}
.prose h2{font-size:30px;margin-top:48px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;margin-top:32px;margin-bottom:0}
.prose p,.prose li{font-size:16px;line-height:1.7;color:var(--txt)}
.prose p{margin:16px 0 0}
.prose ul{margin:16px 0 0;padding-left:22px}
.prose li{margin-top:8px}
.prose strong{color:var(--ink)}

/* ---------- Tableau de tarifs ---------- */
.table-wrap{overflow-x:auto;margin-top:28px;border:1px solid var(--line);border-radius:16px}
table.tarifs{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
table.tarifs th{font:700 10.5px var(--font-mono);letter-spacing:.12em;color:var(--gray-l);text-transform:uppercase;text-align:left;padding:14px 18px;background:var(--bg2);border-bottom:1px solid var(--line)}
table.tarifs td{padding:15px 18px;border-bottom:1px solid var(--line3);color:var(--txt)}
table.tarifs tr:last-child td{border-bottom:none}
table.tarifs .t-name{font:600 15px var(--font-body);color:var(--ink)}
table.tarifs .t-price{font:700 18px var(--font-title);color:var(--ink);white-space:nowrap}
table.tarifs .t-featured{background:rgba(140,198,63,.07)}

/* Sous 700 px, la table s'empile : une carte par tarif, chaque valeur précédée
   de l'intitulé de sa colonne. Le défilement horizontal reste possible si le
   JavaScript n'a pas tourné (les intitulés viennent de lui), mais il ne cache
   plus le prix par défaut. */
@media (max-width:700px){
  table.tarifs.is-empilable{min-width:0;font-size:14.5px}
  table.tarifs.is-empilable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  table.tarifs.is-empilable tbody,
  table.tarifs.is-empilable tr,
  table.tarifs.is-empilable td{display:block;width:auto}
  table.tarifs.is-empilable tr{padding:6px 0;border-bottom:1px solid var(--line)}
  table.tarifs.is-empilable tr:last-child{border-bottom:none}
  table.tarifs.is-empilable td{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:7px 16px;border-bottom:none}
  table.tarifs.is-empilable td::before{content:attr(data-l);flex:none;font:700 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gray-l)}
  table.tarifs.is-empilable td:empty,
  table.tarifs.is-empilable td.t-vide{display:none}
  table.tarifs.is-empilable .t-name{font-size:16px;font-weight:700}
  table.tarifs.is-empilable .t-price{font-size:16px}
}

/* ---------- FAQ ---------- */
.faq{margin-top:28px}
.faq details{border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:12px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;font:600 16px var(--font-body);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px var(--font-title);color:var(--green);flex:none;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 20px 18px;font-size:15px;line-height:1.7;color:var(--txt)}
.faq .faq-body p{margin:0 0 10px}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- Encarts ---------- */
.notice{border:1px dashed #cfcfc9;border-radius:16px;background:var(--bg2);padding:20px 24px;font-size:14.5px;line-height:1.6;color:var(--txt);margin-top:28px}
.notice strong{color:var(--ink)}
.callout-green{border-radius:16px;background:rgba(140,198,63,.1);border:1px solid rgba(76,168,69,.25);padding:20px 24px;font-size:14.5px;line-height:1.6;color:var(--txt);margin-top:28px}

/* ---------- Cartes lien (maillage interne) ---------- */
.linkcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.linkcard{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff;transition:transform .25s ease,box-shadow .25s ease;display:block}
.linkcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.linkcard-tag{font:700 9.5px var(--font-mono);letter-spacing:.14em;color:var(--gray-l);text-transform:uppercase}
.linkcard-title{font:600 17px var(--font-title);color:var(--ink);margin-top:8px}
.linkcard-desc{font-size:13.5px;color:var(--txt);line-height:1.55;margin-top:6px}
.linkcard-price{font:700 15px var(--font-title);color:var(--green-deep);margin-top:10px}

/* ---------- Avis ---------- */
.rating-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.rating-big{font:700 64px var(--font-title);color:var(--ink);line-height:1}
.rating-stars{color:var(--star);font-size:26px;letter-spacing:2px}
.rating-sub{font-size:14px;color:var(--gray)}

/* ---------- Formulaires (activés en phase 2) ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field.is-full{grid-column:1/-1}
.form-field label{font:700 10px var(--font-mono);letter-spacing:.14em;color:var(--gray-l);text-transform:uppercase}
.form-field input,.form-field textarea,.form-field select{border:1px solid var(--line2);border-radius:12px;padding:13px 15px;font:500 14.5px var(--font-body);color:var(--ink);background:#fff;outline:none;width:100%}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--green)}
.form-field textarea{min-height:120px;resize:vertical}

/* Téléphone avec indicatif pays. L'indicatif est collé au numéro dans un même
   cadre : ce sont deux morceaux d'une seule donnée, les séparer en deux champs
   distincts ferait croire à deux informations sans rapport. Le sélecteur garde
   une largeur fixe pour que le champ du numéro ne bouge pas quand on passe de
   « FR +33 » à « LU +352 ». */
.tel-champ{display:flex;align-items:stretch;border:1px solid var(--line2);border-radius:12px;
  background:#fff;overflow:hidden}
.tel-champ:focus-within{border-color:var(--green)}
.form-field .tel-champ select.tel-indicatif{flex:none;width:104px;border:0;border-right:1px solid var(--line2);
  border-radius:0;padding:13px 8px 13px 14px;font:600 13.5px var(--font-mono);color:var(--txt);
  background:var(--bg2);cursor:pointer;appearance:none;
  /* La flèche est dessinée en CSS : une image de plus pour un chevron serait
     une requête réseau pour douze pixels. */
  background-image:linear-gradient(45deg,transparent 50%,var(--gray-l) 50%),
                   linear-gradient(135deg,var(--gray-l) 50%,transparent 50%);
  background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.form-field .tel-champ input{border:0;border-radius:0;flex:1;min-width:0}
.form-field .tel-champ input:focus,.form-field .tel-champ select:focus{border-color:transparent}
/* L'erreur cerne l'ensemble, pas seulement le numéro : c'est le couple
   indicatif + numéro qui est en cause. La classe est posée sur .form-field —
   le cadre étant porté par .tel-champ et non par l'input, la règle générale
   d'erreur (qui colore la bordure de l'input) n'aurait rien coloré du tout. */
.form-field.has-err .tel-champ{border-color:#D98080;background:#FEF7F7}
.form-field.has-err .tel-champ input,
.form-field.has-err .tel-champ select.tel-indicatif{background:#FEF7F7;border-color:#D98080}
@media (max-width:420px){
  .form-field .tel-champ select.tel-indicatif{width:92px;padding-left:11px;font-size:13px}
}

/* ---------- 404 ---------- */
.err-wrap{text-align:center;padding:110px 20px 130px}
.err-code{font:700 96px var(--font-title);letter-spacing:-.04em;color:var(--ink);line-height:1}
.err-code span{color:var(--green)}

/* ---------- Reveal au scroll ----------
   Le masquage initial n'est appliqué QUE si app.js a posé la classe
   .js-reveal sur <html> (progressive enhancement : sans JS, ou pour
   les robots, tout le contenu est visible d'emblée). */
html.js-reveal [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.16,.84,.44,1),transform .75s cubic-bezier(.16,.84,.44,1)}
html.js-reveal [data-reveal].is-revealed{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-top:44px;padding-bottom:56px}
  .hero-copy p.lead{max-width:none}
  h1{font-size:48px}
  .pricing-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .steps-grid{grid-template-columns:1fr;gap:16px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .linkcards{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .wrap{padding-left:20px;padding-right:20px}
  h1{font-size:40px}
  h2{font-size:31px}
  .page-hero h1{font-size:34px}
  .hl b{bottom:5px;height:11px}
  .nav-links{display:none}
  .nav-client span.nav-client-txt{display:none}
  .nav-actions .nav-lang{display:none}
  .nav-burger{display:flex}
  .nav-logo img{height:39px}
  .hero-stats{margin-top:34px}
  .hero-stat + .hero-stat{padding-left:14px}
  .hero-stat-num{font-size:24px}
  .booking-map{height:150px}
  .pricing-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:12px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .price-card{flex:0 0 78%;scroll-snap-align:start}
  .section{padding-top:60px}
  .band .wrap{padding-top:60px;padding-bottom:60px}
  .cta-banner{padding:38px 26px}
  .cta-banner-actions{width:100%}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .form-grid{grid-template-columns:1fr}
  .linkcards{grid-template-columns:1fr}
  .content{padding-top:36px;padding-bottom:52px}
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .trust-track{animation:none}
  .live-dot::before{animation:none}
  .cta-banner-halo{animation:none}
  html.js-reveal [data-reveal]{opacity:1;transform:none;transition:none}
  .scroll-progress{display:none}
}

/* ==========================================================================
   Phase 2 — tunnel de commande, page de suivi, formulaires (backend PHP)
   ========================================================================== */

/* Honeypot anti-spam (invisible, hors flux) */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

/* Statut d'envoi des formulaires (devis, candidature) */
.form-status{display:inline-block;margin-left:14px;font-size:14px;font-weight:600}
.form-status.is-ok{color:var(--green-deep)}
.form-status.is-err{color:#c0392b}

/* ---------- Tunnel ---------- */
.tunnel{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-hover);padding:26px 26px 22px;max-width:840px}
.tunnel-steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px 4px;margin:0 0 22px;padding:0;counter-reset:step}
.tstep{flex:1;min-width:110px;display:flex;align-items:center;gap:8px;font:600 12.5px var(--font-body);color:var(--gray-l)}
.tstep span{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#f1f1ee;color:var(--gray-l);font:700 12px var(--font-mono);flex:none}
.tstep.is-on{color:var(--ink)}
.tstep.is-on span{background:var(--green-deep);color:#fff}
.tstep.is-done span{background:rgba(140,198,63,.2);color:var(--green-deep)}

.tpanel{display:none;animation:tfade .3s ease}
.tpanel.is-active{display:block}
@keyframes tfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tpanel-t{font:700 21px var(--font-title);margin:0 0 18px}
.tunnel-hint{font-size:13px;color:var(--gray);line-height:1.55;margin:14px 0 0}
.tunnel-hint a{color:var(--green-deep);font-weight:600}

.addr-field{position:relative}
.suggest{position:absolute;left:-1px;right:-1px;top:calc(100% + 4px);z-index:1100;background:#fff;border:1px solid var(--line2);border-radius:12px;box-shadow:0 24px 44px -24px rgba(0,0,0,.4);overflow:hidden;display:none}
.suggest.is-open{display:block}
.suggest button{display:block;width:100%;text-align:left;background:#fff;border:none;border-bottom:1px solid var(--line3);padding:10px 14px;font:500 13px var(--font-body);color:var(--ink);cursor:pointer}
.suggest button:last-child{border-bottom:none}
.suggest button:hover{background:var(--bg2)}
.suggest .ctx{display:block;font-size:11px;color:var(--gray)}

/* Options de course */
.course-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.course-opt{position:relative;display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line2);border-radius:14px;padding:16px 18px;cursor:pointer;transition:border-color .2s,background .2s}
.course-opt input{position:absolute;opacity:0;pointer-events:none}
.course-opt:hover{border-color:var(--green)}
.course-opt.is-on{border-color:var(--green);background:rgba(140,198,63,.08)}
.course-opt.is-disabled{opacity:.45;cursor:not-allowed}
.co-name{font:700 16px var(--font-title);color:var(--ink)}
.co-delay{font-size:12.5px;color:var(--gray)}
.co-price{font:700 15px var(--font-title);color:var(--green-deep);margin-top:6px}

/* Récap + carte Stripe */
.tunnel-recap{background:var(--bg2);border:1px solid var(--line2);border-radius:14px;padding:6px 18px;margin-bottom:18px}
.rc-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px}
.rc-row:last-child{border-bottom:none}
.rc-row span{color:var(--gray)}
.rc-row b{color:var(--ink);text-align:right}
.rc-total b{font:700 18px var(--font-title);color:var(--green-deep)}
.stripe-card{border:1px solid var(--line2);border-radius:12px;padding:14px 15px;background:#fff}

/* Carte du trajet (2 points + ligne enlèvement → livraison) */
.tunnel-map{height:236px;width:100%;margin-top:22px;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#eef0ea}
.tunnel-map:empty{display:none}
.route-info{margin:10px 0 0;font:600 13.5px var(--font-body);color:var(--green-deep);
  background:rgba(140,198,63,.12);border-radius:9px;padding:8px 12px;display:inline-block}
.tunnel-map .leaflet-container{height:100%;width:100%;background:#eef0ea;font:inherit}

/* Étape finale : paiement en ligne vs relais téléphone/WhatsApp */
.tunnel.is-offline [data-online-only]{display:none}
.tunnel:not(.is-offline) [data-offline-only]{display:none}
.tunnel-handoff{background:var(--bg2);border:1px solid var(--line2);border-radius:14px;padding:18px 18px 20px}
.handoff-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* Navigation + erreurs */
.tnav{display:flex;align-items:center;gap:12px;margin-top:24px}
.tnav-spacer{flex:1}
.tunnel-err{margin-top:18px;background:#fdecec;border:1px solid #f3c2c2;color:#a12626;border-radius:12px;padding:12px 16px;font-size:14px;line-height:1.5}
.tunnel-err a{color:#a12626;font-weight:700;text-decoration:underline}
.tunnel-phone{text-align:center;margin:18px 0 0;font-size:13.5px;color:var(--gray)}
.tunnel-phone a{color:var(--green-deep);font-weight:600}
[data-pay].is-loading{opacity:.7;pointer-events:none}

/* Confirmation */
.tpanel-done{text-align:center;padding:20px 0}
.done-check{width:64px;height:64px;border-radius:50%;background:var(--green-deep);color:#fff;font-size:34px;line-height:64px;margin:0 auto 16px}
.done-lead{font-size:16px;color:var(--txt);line-height:1.7;max-width:460px;margin:0 auto 22px}
.done-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Page de suivi ---------- */
.suivi{max-width:640px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-hover);padding:26px;margin-top:26px}
.suivi-head{display:flex;flex-wrap:wrap;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.suivi-k{display:block;font:700 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray-l)}
.suivi-v{display:block;font:600 15px var(--font-title);color:var(--ink);margin-top:3px}
.suivi-timeline{list-style:none;margin:22px 0 6px;padding:0}
.sline{position:relative;display:flex;align-items:center;gap:14px;padding:0 0 22px 4px}
.sline::before{content:"";position:absolute;left:10px;top:20px;bottom:-2px;width:2px;background:var(--line2)}
.sline:last-child::before{display:none}
.sdot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);background:#fff;flex:none;z-index:1}
.slabel{font:600 15px var(--font-body);color:var(--gray-l)}
.sline.is-done .sdot{background:var(--green);border-color:var(--green)}
.sline.is-done .slabel{color:var(--ink)}
.sline.is-active .sdot{border-color:var(--green-deep);box-shadow:0 0 0 4px rgba(140,198,63,.25)}
.sline.is-active .slabel{color:var(--green-deep);font-weight:700}

@media(max-width:640px){
  .course-options{grid-template-columns:1fr}
  .tunnel{padding:20px 16px}
  .tstep{min-width:90px;font-size:11.5px}
}

/* Le raccourci « font: » remet font-variant-numeric à normal : on le repose
   partout où des chiffres doivent s'aligner en colonnes. */
body{font-variant-numeric:tabular-nums}
.kicker,.hero-stat-num,.booking-label,.tarif-price,.price,.rate-num,.step-num,.tel,.nav-tel{font-variant-numeric:tabular-nums}

/* ==========================================================================
   Le véhicule arrive — bande pleine largeur
   Le texte est au-dessus, la chaussée en dessous : le véhicule traverse
   depuis le bord gauche de l'écran sans jamais passer devant un mot. Il
   regarde vers la droite, il roule donc vers la droite. L'ombre portée est
   déjà dans le fichier ; on n'en ajoute pas par CSS.
   ========================================================================== */
/* Dégradé de gris, comme dans la maquette, plutôt qu'un aplat.
   L'aplat --bg est un blanc cassé à biais vert : sur une grande surface il
   se lit comme « vert très pâle », ce qui n'était pas l'intention. */
.fleet-band{background:linear-gradient(178deg,#F1F5F2 0%,#F7F9F8 55%,#FBFCFB 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(56px,7vw,92px) 0 0;overflow:hidden}
.fleet-band .kicker{display:block}
.fleet-band h2{margin-top:12px}
.fleet-sub{color:var(--txt);font-size:18px;line-height:1.65;font-weight:300;margin:16px 0 0;max-width:60ch}
.fleet-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.fleet-chip{padding:8px 16px;border-radius:999px;font-size:14.5px;font-weight:300;color:var(--gray);
  box-shadow:inset 0 0 0 1px var(--line)}
.road{position:relative;width:100%;height:clamp(140px,16vw,232px);margin-top:clamp(26px,4vw,46px);overflow:hidden}
.road::after{content:"";position:absolute;left:10%;right:0;bottom:6%;height:1px;background:var(--line)}
.van-wrap{position:absolute;left:33%;bottom:0;width:clamp(250px,36%,520px);
  transform:translateX(-285%);will-change:transform}
.van{display:block;width:100%;height:auto}
.road.is-in .van-wrap{animation:cp-drive 2.4s cubic-bezier(.19,.72,.24,1) .1s forwards}
@keyframes cp-drive{from{transform:translateX(-285%)}to{transform:translateX(0)}}
.road.is-in .van{animation:cp-settle .55s cubic-bezier(.3,1.5,.5,1) 2.45s both}
@keyframes cp-settle{0%{transform:translateY(0)}35%{transform:translateY(3px)}
                     70%{transform:translateY(-1.5px)}100%{transform:translateY(0)}}
.streaks{position:absolute;right:100%;bottom:30%;width:42%;height:26%;opacity:0;pointer-events:none}
.streaks i{position:absolute;right:0;height:2px;border-radius:2px;background:var(--line)}
.streaks i:nth-child(1){top:16%;width:100%}
.streaks i:nth-child(2){top:48%;width:56%}
.streaks i:nth-child(3){top:80%;width:82%}
.road.is-in .streaks{animation:cp-whoosh 2.4s ease-out .1s forwards}
@keyframes cp-whoosh{0%{opacity:0}16%{opacity:1}68%{opacity:1}100%{opacity:0}}
@media(max-width:620px){.van-wrap{left:30%;width:66%}}
@media(prefers-reduced-motion:reduce){
  .van-wrap{transform:none}.road.is-in .van-wrap,.road.is-in .van{animation:none}.streaks{display:none}}

/* Croquis de Paris en toile de fond de la bannière finale — strictement fixe.
   Le fichier est opaque sur fond blanc : mix-blend-mode:multiply fait
   disparaître le blanc sans avoir à encoder un canal alpha coûteux sur un
   trait aussi fin. Le dessin est visible en entier, avec un peu de vide
   au-dessus. */
.cta-banner{display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(440px,46vw,620px)}
.cta-banner-in{position:relative;z-index:1}
.paris{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:calc(100% - 26px);width:auto;max-width:none;
  opacity:.15;mix-blend-mode:multiply;pointer-events:none;z-index:0}

/* La carte mise en avant réserve la hauteur de sa pastille, pour que les prix
   restent alignés d'une colonne à l'autre. */
.price-card.is-featured{padding-top:52px}

/* Champ facultatif du tunnel : l'étiquette dit clairement que commander sans
   compte reste possible — un champ mot de passe non annoncé comme optionnel
   fait abandonner au moment le plus sensible du parcours. */
.form-field .opt{font-weight:400;color:var(--gray-l)}
.form-hint{margin:6px 0 0;font-size:13px;color:var(--gray)}

/* Logo agrandi de 30 % a la demande du client : 38 -> 49 px en navigation,
   44 -> 57 px en pied de page, 30 -> 39 px sur mobile. La barre de
   navigation garde sa hauteur, le logo etant deja centre verticalement. */

/* ---------- Bandeau de consentement (mesure d'audience tierce) ----------
   Affiché uniquement si un identifiant Google Analytics est configuré dans
   l'administration. Refuser doit coûter exactement le même geste qu'accepter :
   deux boutons de même taille, côte à côte, sans hiérarchie visuelle qui
   pousserait au consentement. */
.cp-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:9500;
  max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:20px 22px;box-shadow:0 24px 50px -26px rgba(14,21,18,.5)}
.cp-consent p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--txt)}
.cp-consent-actions{display:flex;gap:10px}
.cp-consent button{flex:1;border-radius:999px;padding:12px 18px;cursor:pointer;
  font:500 14px var(--font-body);border:1.5px solid var(--line2);background:#fff;color:var(--ink)}
.cp-consent-oui{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.cp-consent button:hover{filter:brightness(.96)}
@media(max-width:520px){.cp-consent{padding:17px 18px}}

/* Le récapitulatif de commande était masqué par un style en ligne
   (display:none) et révélé en JavaScript. L'attribut hidden fait le même
   travail, comprend le lecteur d'écran, et permet de retirer le style en ligne
   que la politique de sécurité de contenu vise à terme. */
[data-order-recap]{margin-top:0;font-size:15.5px}

/* ---------- Classes utilitaires d'espacement et de graisse ----------
   Elles remplacent des attributs style= répétés jusqu'à 125 fois dans les
   pages générées. Le gain n'est pas cosmétique : la politique de sécurité de
   contenu peut alors interdire le style en ligne (style-src 'self'), ce qui
   ferme une voie d'injection résiduelle — un attribut style= injecté peut
   masquer un élément, en superposer un faux, ou exfiltrer par une image de
   fond. Les noms restent explicites plutôt qu'abrégés : « mt-18 » se relit
   sans dictionnaire, contrairement à « u3 ».

   Ces classes ne sont PAS un système d'utilitaires général : elles couvrent
   exactement les 27 motifs qui existaient, rien de plus. Une classe utilitaire
   ajoutée « au cas où » finit par doubler le design system.

   POURQUOI !important ICI, ET SEULEMENT ICI
   Un attribut style= l'emporte sur toute règle de feuille de style. En le
   remplaçant par une classe, on perd cette priorité : « .footer-contact a » a
   une spécificité supérieure à « .u-regular » et reprenait la main, ce qui
   rendait le lien du pied de page gras alors qu'il devait être maigre. Le
   défaut était visible mais discret — le genre qui passe une relecture.
   !important restitue exactement la position que ces déclarations occupaient
   dans la cascade. C'est le seul endroit du projet où il est employé, et il
   l'est pour cette raison précise, pas pour forcer un conflit mal compris. */
.u-regular{font-weight:400!important}
.u-h-30{font-size:30px!important}
.u-invisible{visibility:hidden!important}
.u-large-820{max-width:820px!important}
.u-large-520-centre{max-width:520px!important;margin:16px auto 0!important}
.u-centre-30{justify-content:center!important;margin-top:30px!important}
.u-cadre-vert{border:2px solid var(--green)!important}
.u-lead-petit{font-size:16px!important;color:var(--txt)!important;line-height:1.7!important;margin-top:12px!important}

.u-mt-0{margin-top:0!important}
.u-mt-8{margin-top:8px!important}
.u-mt-18{margin-top:18px!important}
.u-mt-20{margin-top:20px!important}
.u-mt-24{margin-top:24px!important}
.u-mt-28{margin-top:28px!important}
.u-mt-34{margin-top:34px!important}
.u-mt-40{margin-top:40px!important}
.u-mt-56{margin-top:56px!important}
.u-mt-64{margin-top:64px!important}

.u-sect-serree{padding-top:8px!important;padding-bottom:72px!important}
.u-pt-0{padding-top:0!important}
.u-pt-48{padding-top:48px!important}
.u-pt-0-pb-84{padding-top:0!important;padding-bottom:84px!important}
.u-pt-56-pb-84{padding-top:56px!important;padding-bottom:84px!important}
.u-pb-40{padding-bottom:40px!important}
.u-pb-84{padding-bottom:84px!important}

/* ---------- Marqueurs de carte ----------
   Ces formes étaient décrites par des attributs style= dans le HTML passé à
   Leaflet. La politique de sécurité de contenu interdisant désormais le style
   en ligne, les marqueurs devenaient invisibles — la carte restait juste, les
   deux points d'itinéraire disparaissaient. Le défaut n'apparaissait qu'à
   l'écran, pas dans les mesures de position : c'est ce qui justifie de
   comparer des captures et pas seulement des valeurs calculées. */
.cp-pin{position:relative;width:18px;height:18px}
.cp-pin::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(76,168,69,.35);animation:ping 2s ease-out infinite}
.cp-pin::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--green);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}

/* Point d'arrivée : un carré, pour se distinguer du départ sans dépendre de
   la couleur seule. */
.cp-pin-fin{width:16px;height:16px;background:var(--ink);border:3px solid #fff;
  border-radius:4px;box-shadow:0 3px 8px rgba(0,0,0,.35)}

/* Marqueur simple du tunnel de commande : pas d'onde, la carte y est statique. */
.cp-pin-simple{width:16px;height:16px;background:var(--lime);border:3px solid #fff;
  border-radius:50%;box-shadow:0 3px 8px rgba(0,0,0,.35)}

/* Position du coursier pendant la démonstration : l'onde signale le mouvement. */
.cp-coursier{position:relative;width:20px;height:20px}
.cp-coursier::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  background:rgba(140,198,63,.3);animation:pulse 1.6s infinite}
.cp-coursier::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--lime);border:3px solid #fff;box-shadow:0 3px 9px rgba(0,0,0,.4)}

@media(prefers-reduced-motion:reduce){
  .cp-pin::before,.cp-coursier::before{animation:none}
}

/* ---------- Tunnel : choix du véhicule, puis du délai ----------
   Le véhicule était une conséquence du délai : « express » n'existait qu'en
   moto, « voiture » qu'en 2 h 30. Un client pressé avec un colis volumineux ne
   pouvait rien commander. Les deux axes sont désormais deux choix successifs.

   Les cartes véhicule sont plus grandes que les cartes délai : c'est le premier
   choix, et il conditionne le second. */
.vehicule-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
.vehicule-opt{position:relative;display:flex;flex-direction:column;gap:5px;
  border:1.5px solid var(--line2);border-radius:16px;padding:20px 22px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease}
.vehicule-opt input{position:absolute;opacity:0;pointer-events:none}
.vehicule-opt:hover{border-color:var(--green)}
.vehicule-opt:has(input:checked){border-color:var(--green-deep);background:rgba(140,198,63,.09)}
.vehicule-opt:has(input:focus-visible){outline:2px solid var(--green-deep);outline-offset:2px}
.ve-nom{font:700 18px var(--font-title);color:var(--ink)}
.ve-desc{font-size:13.5px;line-height:1.5;color:var(--gray)}

.tpanel-t2{margin-top:26px}
/* Combinaison sans tarif en ligne : montrée, désactivée, avec le lien vers le
   devis. La masquer laisserait croire qu'elle n'existe pas, alors qu'elle se
   réserve simplement autrement. */
.course-opt.is-disabled{opacity:.55;cursor:default}
.course-opt.is-disabled .co-price a{pointer-events:auto;text-decoration:underline}
.co-note{font-size:11.5px;color:var(--gray-l);margin-top:4px}

/* ---------- Erreurs posées sur le champ ----------
   Le message s'affichait dans une bannière en haut du tunnel. Sur un téléphone,
   la bannière et le champ fautif ne tiennent pas dans le même écran : on lit
   « Indiquez le nom du destinataire » sans savoir lequel des huit champs est
   concerné. */
.field-err{margin:0;font-size:13px;line-height:1.45;color:#A12626}
.form-field.has-err input,.form-field.has-err textarea,.form-field.has-err select{
  border-color:#D98080;background:#FEF7F7}
.form-field.has-err label{color:#A12626}
.vehicule-options.has-err{outline:1.5px solid #D98080;outline-offset:6px;border-radius:18px}
.form-hint{margin:0;font-size:12.5px;line-height:1.45;color:var(--gray-l)}

@media(max-width:640px){
  .vehicule-options{grid-template-columns:1fr}
}

/* ---------- Bouton WhatsApp flottant ----------
   Un coursier se commande dans l'urgence, souvent une main sur le téléphone.
   Le contact reste donc à portée du pouce sur toute page, plutôt qu'au pied
   de page qu'il faut aller chercher.

   Le vert est celui de WhatsApp, pas celui de la marque : c'est ce qui rend le
   bouton reconnaissable avant même d'avoir regardé le glyphe. Il est assez
   distinct du vert Coursiers Parisiens pour ne pas se confondre avec un bouton
   d'action du site. */
.cp-wa{
  position:fixed; right:20px; bottom:20px; z-index:9000;
  display:inline-flex; align-items:center; gap:0;
  height:56px; padding:0 16px; border-radius:999px;
  background:#25D366; color:#fff !important;
  box-shadow:0 4px 10px rgba(14,21,18,.14), 0 16px 32px -18px rgba(37,211,102,.9);
  transition:gap .22s ease, padding .22s ease, transform .22s ease;
  /* iPhone : la barre de gestes mange les vingt derniers pixels. */
  margin-bottom:env(safe-area-inset-bottom, 0px);
}
.cp-wa:hover{ color:#fff !important; transform:translateY(-2px) }
.cp-wa:focus-visible{ outline:3px solid #0E1512; outline-offset:3px }
.cp-wa__ico{ flex:none; width:28px; height:28px; display:block }

/* Le libellé se déplie au survol et à la prise de focus clavier. Fermé, il ne
   prend aucune place ; ouvert, il dit ce que fait le bouton — un glyphe seul
   se devine, il ne s'affirme pas. La largeur est animée plutôt que l'affichage :
   display ne s'anime pas, et un libellé qui apparaît d'un coup fait sursauter. */
.cp-wa__txt{
  max-width:0; overflow:hidden; white-space:nowrap;
  font:600 14.5px var(--font-body); letter-spacing:.01em;
  transition:max-width .22s ease;
}
.cp-wa:hover .cp-wa__txt,
.cp-wa:focus-visible .cp-wa__txt{ max-width:130px }
.cp-wa:hover, .cp-wa:focus-visible{ gap:10px; padding-right:20px }

/* Sur un écran tactile, il n'y a pas de survol : le libellé ne se déplierait
   jamais et le bouton resterait un rond muet. On le laisse donc rond, avec son
   intitulé accessible (aria-label) pour les lecteurs d'écran. */
@media (hover:none){
  .cp-wa{ width:56px; padding:0; justify-content:center }
  .cp-wa__txt{ display:none }
}

/* Le bandeau de consentement occupe le bas de l'écran et recouvrirait le
   bouton. On remonte celui-ci de la hauteur RÉELLE du bandeau, mesurée par
   app.js : le texte change de longueur selon la largeur de l'écran, et une
   valeur écrite en dur laissait les deux se chevaucher dès qu'une ligne
   s'ajoutait. La valeur de repli sert le temps que le script mesure. */
body.a-consentement .cp-wa{ bottom:calc(32px + var(--cp-consent-h, 180px)) }

@media (prefers-reduced-motion:reduce){
  .cp-wa, .cp-wa__txt{ transition:none }
  .cp-wa:hover{ transform:none }
}

/* Impression : un bouton de discussion n'a rien à faire sur une feuille. */
@media print{ .cp-wa{ display:none } }