/* ============================================================
   SPEED AUTO — Dépannage · Remorquage · Transport de véhicules
   Feuille de style commune (FR / EN / ES)
   ============================================================ */

:root{
  --navy-900:#0b1730;
  --navy-800:#122150;
  --navy-700:#17307a;
  --blue-600:#1d3f9e;
  --blue-500:#2c53c9;
  --red-600:#d81e2c;
  --red-700:#a9121e;
  --white:#fdfdfb;
  --grey-100:#f2f4f8;
  --grey-300:#dfe4ee;
  --ink:#10131a;
  --ink-soft:#4a5164;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
body{
  font-family:'Barlow', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Oswald', 'Barlow', system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.08;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{
  width:100%;
  max-width:1140px;
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  font-family:'Oswald', 'Barlow', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--red-600);
}
.eyebrow.on-dark{color:#ff8f8f;}
.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;
}
.skip-link{
  position:absolute; left:12px; top:-48px;
  background:var(--red-600); color:#fff; padding:10px 16px;
  border-radius:0 0 8px 8px; font-family:'Oswald',sans-serif; font-weight:700;
  z-index:400; transition:top .15s ease;
}
.skip-link:focus{top:0;}

/* ===== ROAD DIVIDER (signature motif) ===== */
.road-divider{
  height:6px;
  width:100%;
  background:repeating-linear-gradient(90deg,#fff 0 26px,transparent 26px 46px);
  background-color:var(--navy-900);
  opacity:0.9;
}
.road-divider.dark-on-light{
  background:repeating-linear-gradient(90deg,var(--navy-900) 0 26px,transparent 26px 46px);
  background-color:var(--grey-300);
}

/* ===== HEADER ===== */
header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--grey-300);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 24px;
  max-width:1140px;
  margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:52px; width:auto;}
.nav-right{display:flex; align-items:center; gap:12px;}

.nav-links{
  display:none;
  gap:26px;
  font-weight:600;
  font-size:15px;
  color:var(--navy-900);
}
.nav-links a:hover{color:var(--blue-600);}

/* Language selector — segmented FR | EN | ES */
.lang-switch{
  display:inline-flex;
  align-items:stretch;
  border:1.5px solid var(--grey-300);
  border-radius:8px;
  overflow:hidden;
  font-family:'Oswald','Barlow',sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.06em;
}
.lang-switch a{
  padding:6px 9px;
  color:var(--navy-900);
  background:#fff;
  transition:background .15s ease, color .15s ease;
  border-left:1px solid var(--grey-300);
}
.lang-switch a:first-child{border-left:none;}
.lang-switch a:hover{background:var(--grey-100); color:var(--blue-600);}
.lang-switch a[aria-current="true"]{
  background:var(--navy-900);
  color:#fff;
  cursor:default;
}

.call-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--red-600);
  color:#fff;
  font-weight:700;
  font-family:'Oswald','Barlow',sans-serif;
  letter-spacing:0.03em;
  padding:11px 18px;
  border-radius:999px;
  font-size:15px;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(216,30,44,0.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.call-pill:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(216,30,44,0.45);}
.call-pill svg{width:16px; height:16px; flex-shrink:0;}
.call-pill .call-label{display:none;}

/* Mobile menu toggle */
.menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  border:1.5px solid var(--grey-300);
  border-radius:8px;
  background:#fff;
  color:var(--navy-900);
  cursor:pointer;
}
.menu-toggle svg{width:22px; height:22px;}

@media(min-width:960px){
  .nav-links{display:flex;}
  .menu-toggle{display:none;}
  .call-pill .call-label{display:inline;}
}

/* Mobile dropdown panel */
.mobile-nav{
  display:none;
  border-top:1px solid var(--grey-300);
  background:#fff;
  padding:8px 24px 16px;
}
.mobile-nav.open{display:block;}
.mobile-nav a{
  display:block;
  padding:12px 4px;
  font-weight:600;
  color:var(--navy-900);
  border-bottom:1px solid var(--grey-100);
}
.mobile-nav a:last-child{border-bottom:none;}
@media(min-width:960px){ .mobile-nav{display:none !important;} }

/* ===== HERO ===== */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(43,83,201,0.35), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color:#fff;
  padding:66px 0 62px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 34px);
  pointer-events:none;
}
.hero-inner{position:relative; max-width:780px;}
.hero h1{
  font-size:clamp(32px, 5.6vw, 56px);
  margin:14px 0 18px;
  color:#fff;
}
.hero h1 .accent{color:#6c8bff;}
.hero p.lead{
  font-size:18px;
  color:#c7cfe6;
  max-width:620px;
  margin-bottom:28px;
}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px;}

.beacon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--red-600);
  color:#fff;
  font-family:'Oswald','Barlow',sans-serif;
  font-weight:700;
  font-size:clamp(17px,4.5vw,20px);
  letter-spacing:0.02em;
  padding:18px 28px;
  border-radius:12px;
  isolation:isolate;
}
.beacon-btn::before,
.beacon-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  z-index:-1;
  animation:beacon 2.2s ease-in-out infinite;
}
.beacon-btn::before{background:var(--red-600); animation-delay:0s;}
.beacon-btn::after{background:var(--blue-500); animation-delay:1.1s;}
@keyframes beacon{
  0%{ box-shadow:0 0 0 0 rgba(216,30,44,0.55); opacity:1;}
  70%{ box-shadow:0 0 0 22px rgba(216,30,44,0); opacity:0;}
  100%{ box-shadow:0 0 0 0 rgba(216,30,44,0); opacity:0;}
}
.beacon-btn svg{width:22px; height:22px;}
.hero-note{font-size:14px; color:#9aa4c2; margin-top:18px;}
.hero-sub{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  margin-top:22px; font-size:14.5px; color:#c7cfe6; font-weight:600;
}
.hero-sub span{display:inline-flex; align-items:center; gap:8px;}
.hero-sub svg{width:16px; height:16px; color:#6c8bff;}

@media (prefers-reduced-motion: reduce){
  .beacon-btn::before, .beacon-btn::after{animation:none; display:none;}
}

/* ===== REASSURANCE STRIP ===== */
.reassure{
  background:#fff;
  border-bottom:1px solid var(--grey-300);
}
.reassure-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--grey-300);
}
@media(min-width:820px){ .reassure-grid{grid-template-columns:repeat(4,1fr);} }
.reassure-item{
  background:#fff;
  padding:20px 18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.reassure-item svg{width:24px; height:24px; color:var(--blue-600); flex-shrink:0;}
.reassure-item strong{
  display:block;
  font-family:'Oswald','Barlow',sans-serif;
  font-size:15px;
  color:var(--navy-900);
  letter-spacing:0.02em;
}
.reassure-item span{font-size:13.5px; color:var(--ink-soft);}

/* ===== SERVICES (cards) ===== */
.services{padding:72px 0; background:var(--grey-100);}
.section-head{max-width:680px; margin-bottom:40px;}
.section-head h2{font-size:clamp(26px, 4vw, 36px); margin-top:10px; color:var(--navy-900);}
.section-head p{color:var(--ink-soft); margin-top:12px;}
.cards{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:700px){ .cards{grid-template-columns:1fr 1fr;} }
.card{
  background:#fff;
  border:1px solid var(--grey-300);
  border-radius:var(--radius);
  padding:28px;
  position:relative;
  transition:border-color .15s ease, transform .15s ease;
}
.card:hover{border-color:var(--blue-500); transform:translateY(-3px);}
.card-num{
  font-family:'Oswald','Barlow',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.14em;
  color:var(--blue-600);
  margin-bottom:12px;
  display:block;
}
.card h3{font-size:20px; color:var(--navy-900); margin-bottom:10px;}
.card p{color:var(--ink-soft); font-size:15.5px;}
.card .card-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px; font-family:'Oswald','Barlow',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:0.06em; color:var(--blue-600);
}
.card .card-link svg{width:14px; height:14px;}
.badge-free{
  position:absolute; top:24px; right:24px;
  background:var(--red-600); color:#fff;
  font-family:'Oswald','Barlow',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:0.08em; padding:5px 11px; border-radius:999px;
}

/* ===== DETAIL SECTIONS ===== */
.detail{padding:72px 0; background:#fff;}
.detail + .detail{border-top:1px solid var(--grey-300);}
.detail-grid{display:grid; grid-template-columns:1fr; gap:28px;}
@media(min-width:880px){ .detail-grid{grid-template-columns:1.1fr 1fr;} }
.detail h2{font-size:clamp(24px,3.6vw,32px); color:var(--navy-900); margin:10px 0 16px;}
.detail h3{font-size:16px; color:var(--navy-900); margin:18px 0 6px;}
.detail p{color:var(--ink-soft); margin-bottom:14px; max-width:560px;}
.detail ul{list-style:none; display:grid; gap:8px;}
.detail ul li{
  display:flex; gap:10px; align-items:flex-start;
  color:var(--navy-900); font-weight:500; font-size:15px;
}
.detail ul li::before{
  content:""; flex-shrink:0; margin-top:7px;
  width:8px; height:8px; border-radius:2px; background:var(--red-600);
}
.detail-aside{
  background:var(--grey-100);
  border:1px solid var(--grey-300);
  border-radius:var(--radius);
  padding:26px;
  align-self:start;
}
.detail-aside h3{margin-top:0; font-size:15px; letter-spacing:0.04em;}
.detail-aside .call-pill{margin-top:14px;}

/* ===== ZONE ===== */
.zone{padding:72px 0; background:var(--grey-100);}
.zone-grid{display:grid; grid-template-columns:1fr; gap:44px; align-items:center;}
@media(min-width:800px){ .zone-grid{grid-template-columns:1fr 1fr;} }
.zone-text h2{font-size:clamp(26px, 4vw, 34px); color:var(--navy-900); margin:10px 0 16px;}
.zone-text p{color:var(--ink-soft); margin-bottom:18px; max-width:480px;}
.zone-list{list-style:none;}
.zone-list li{
  display:flex; align-items:baseline; gap:10px;
  font-weight:600; color:var(--navy-900);
  padding:8px 0; border-top:1px solid var(--grey-300);
}
.zone-list li:first-child{border-top:none;}
.zone-list span.tag{
  font-family:'Oswald','Barlow',sans-serif; font-size:12px;
  letter-spacing:0.1em; color:var(--blue-600); min-width:64px;
}
.zone-towns{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--grey-300);
  font-size:14.5px; color:var(--ink-soft);
}
.zone-towns strong{color:var(--navy-900); font-family:'Oswald','Barlow',sans-serif; letter-spacing:0.03em;}

.radar{
  position:relative; aspect-ratio:1/1; max-width:360px; margin:0 auto;
  border-radius:50%;
  background:radial-gradient(circle at center, var(--navy-800) 0%, var(--navy-900) 70%);
  display:flex; align-items:center; justify-content:center;
}
.radar .ring{position:absolute; border:1px solid rgba(108,139,255,0.35); border-radius:50%;}
.radar .r1{width:32%; height:32%;}
.radar .r2{width:58%; height:58%;}
.radar .r3{width:84%; height:84%;}
.radar .center{
  position:relative; z-index:2;
  background:var(--red-600); color:#fff;
  font-family:'Oswald','Barlow',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:0.06em; padding:10px 16px; border-radius:999px;
  box-shadow:0 0 0 6px rgba(216,30,44,0.18);
}
.radar .ping{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(216,30,44,0.5);
  animation:ping 3s ease-out infinite;
}
@keyframes ping{
  0%{ transform:scale(0.3); opacity:0.7;}
  100%{ transform:scale(1); opacity:0;}
}
@media (prefers-reduced-motion: reduce){ .radar .ping{animation:none;} }

/* ===== DEVIS ===== */
.devis{
  background:linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:#fff; padding:66px 0; text-align:center;
}
.devis .container{max-width:640px;}
.devis h2{font-size:clamp(26px, 4vw, 34px); margin:12px 0 16px;}
.devis p{color:#c7cfe6; margin-bottom:28px; font-size:16.5px;}
.btn-outline{
  display:inline-flex; align-items:center; gap:10px;
  border:2px solid #fff; color:#fff;
  font-family:'Oswald','Barlow',sans-serif; font-weight:600; letter-spacing:0.03em;
  padding:14px 28px; border-radius:10px;
  transition:background .15s ease, color .15s ease;
}
.btn-outline:hover{background:#fff; color:var(--navy-900);}
.btn-outline svg{width:18px; height:18px;}

/* ===== FAQ ===== */
.faq{padding:72px 0; background:#fff;}
.faq .section-head{margin-bottom:28px;}
.faq-list{max-width:820px; display:grid; gap:12px;}
.faq-item{
  border:1px solid var(--grey-300);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none;
  padding:18px 22px;
  font-family:'Oswald','Barlow',sans-serif; font-weight:600;
  font-size:16px; color:var(--navy-900);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; font-size:22px; color:var(--red-600); flex-shrink:0; line-height:1;
}
.faq-item[open] summary::after{content:"–";}
.faq-item .faq-body{padding:0 22px 20px; color:var(--ink-soft); font-size:15.5px;}
.faq-item .faq-body a{color:var(--blue-600); font-weight:600; text-decoration:underline; text-underline-offset:2px;}

/* ===== FINAL CTA ===== */
.final-cta{background:var(--red-600); color:#fff; padding:52px 0; text-align:center;}
.final-cta h2{font-size:clamp(24px, 4vw, 32px); margin-bottom:12px;}
.final-cta p{color:#ffe1e3; margin-bottom:24px; font-size:16px;}
.final-cta .call-pill{
  background:#fff; color:var(--red-600);
  font-size:clamp(19px,5vw,22px); padding:16px 32px;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.final-cta .call-pill svg{width:20px; height:20px;}

/* ===== FOOTER ===== */
footer{background:var(--navy-900); color:#8b93b4; padding:38px 0 28px; font-size:14px;}
.footer-inner{display:flex; flex-direction:column; gap:16px; align-items:flex-start;}
@media(min-width:760px){ .footer-inner{flex-direction:row; justify-content:space-between; align-items:center;} }
.footer-brand{display:flex; align-items:center; gap:10px; color:#fff; font-family:'Oswald','Barlow',sans-serif; font-weight:600; letter-spacing:0.04em;}
.footer-brand img{height:34px; width:auto;}
.footer-contact a{color:#fff; font-weight:700; font-family:'Oswald','Barlow',sans-serif; letter-spacing:0.03em;}
.footer-nav{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-size:13.5px;}
.footer-nav a:hover{color:#fff;}
.footer-credit{
  margin-top:18px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:13px; color:#6b7396; text-align:center;
}
.footer-credit a{color:#9aa4c2; font-weight:600; text-decoration:underline; text-underline-offset:3px; transition:color .15s ease;}
.footer-credit a:hover{color:#fff;}

/* ===== FLOATING CALL BUTTON ===== */
.float-call{
  position:fixed; right:18px; bottom:18px; z-index:200;
  display:inline-flex; align-items:center; gap:10px;
  height:60px; padding:0 22px 0 18px;
  border-radius:999px;
  background:var(--red-600); color:#fff;
  font-family:'Oswald','Barlow',sans-serif; font-weight:700; font-size:16px;
  letter-spacing:0.02em; white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,0.35);
}
.float-call svg{width:24px; height:24px; flex-shrink:0;}
.float-call::before{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:var(--red-600); animation:beacon 2.2s ease-in-out infinite; z-index:-1;
}
@media (prefers-reduced-motion: reduce){ .float-call::before{animation:none;} }
@media(min-width:960px){ .float-call{display:none;} }

:focus-visible{ outline:3px solid #6c8bff; outline-offset:2px; }

/* ===== COVER BANNER ===== */
.cover{background:#fff; padding:24px 0; border-bottom:1px solid var(--grey-300);}
.cover-inner{max-width:900px; margin:0 auto; padding:0 24px;}
.cover-logo{width:100%; height:auto; display:block; border-radius:8px;}

/* ===== SCROLL REVEAL ANIMATIONS ===== */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.94); transition:opacity .7s ease, transform .7s ease;}
.reveal-scale.is-visible{opacity:1; transform:scale(1);}
.cards .card:nth-child(1){transition-delay:.05s;}
.cards .card:nth-child(2){transition-delay:.15s;}
.cards .card:nth-child(3){transition-delay:.25s;}
.cards .card:nth-child(4){transition-delay:.35s;}
.hero-inner .reveal:nth-child(1){transition-delay:0s;}
.hero-inner .reveal:nth-child(2){transition-delay:.12s;}
.hero-inner .reveal:nth-child(3){transition-delay:.24s;}
.hero-inner .reveal:nth-child(4){transition-delay:.36s;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale{opacity:1; transform:none; transition:none;}
}