/* =========================================================
   VOLT — Dépannage pneu · Landing page
   ========================================================= */

/* ---------- Polices auto-hébergées (sous-ensemble latin) ---------- */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('assets/fonts/inter-400-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/poppins-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/poppins-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('assets/fonts/poppins-800.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Poppins'; font-style:italic; font-weight:500; font-display:swap;
  src:url('assets/fonts/poppins-500-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  --orange:#E8500F;
  --orange-600:#C63F07;
  --orange-400:#FF7433;
  --orange-050:#FFF1E9;
  --orange-025:#FFF8F4;

  --navy:#12294B;
  --navy-700:#1B355C;
  --ink:#22344F;
  --muted:#5A6B84;      /* 5,4:1 sur blanc — conforme WCAG AA */
  --line:#E7EBF1;
  --white:#fff;
  --bg:#fff;

  --radius:16px;
  --radius-lg:22px;
  --shadow-sm:0 2px 6px rgba(18,41,75,.06), 0 10px 24px rgba(18,41,75,.06);
  --shadow-md:0 8px 20px rgba(18,41,75,.08), 0 20px 40px rgba(18,41,75,.09);
  --shadow-lg:0 26px 60px rgba(18,41,75,.15);

  --head:"Poppins", "Segoe UI", system-ui, sans-serif;
  --body:"Inter", "Segoe UI", system-ui, sans-serif;

  --container:1120px;
  --hdr:72px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth; scroll-padding-top:var(--hdr);
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:15.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* `hidden` empêche de faire défiler mais laisse le débordement occuper la
   largeur de mise en page : au pincement pour dézoomer, une bande vide
   apparaît. `clip` supprime réellement la zone déplaçable. */
@supports (overflow:clip){
  html, body{overflow-x:clip}
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{font-family:var(--head); color:var(--navy); margin:0; line-height:1.14; letter-spacing:-.02em}
p{margin:0}
button{font:inherit}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
svg{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
svg[fill]:not([fill="none"]), .badge__ico{stroke:none}
.badge__ico path{stroke:none}
/* un attribut de présentation perd face à la règle `svg{fill:none}` ci-dessus :
   les icônes pleines ont besoin d'une règle CSS pour être visibles */
svg[fill="currentColor"]{fill:currentColor; stroke:none}

/* ---------- Navigation clavier ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:6px;
}
/* sur fond orange, un contour sombre reste lisible */
.hero :focus-visible, .pro :focus-visible, .header:not(.is-stuck) :focus-visible{
  outline-color:#0F1420;
}
.badge:focus-visible, .btn--dark:focus-visible{outline-color:#fff; outline-offset:4px}

.skip-link{
  position:absolute; left:16px; top:-100px; z-index:100;
  background:#fff; color:var(--navy); font-family:var(--head); font-weight:600; font-size:14px;
  padding:12px 20px; border-radius:0 0 12px 12px; box-shadow:var(--shadow-md);
  transition:top .2s;
}
.skip-link:focus{top:0}

.container{width:min(100% - 40px, var(--container)); margin-inline:auto}
.section{padding:clamp(54px,6.5vw,92px) 0}
.section--tint{background:linear-gradient(180deg,var(--orange-025),#fff 70%)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--head); font-weight:600; font-size:14px;
  padding:11px 20px; border-radius:999px; border:0; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s, color .25s;
  white-space:nowrap;
}
.btn .ico{width:16px; height:16px; flex:none}
.btn--dark{background:#10131A; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.2)}
.btn--dark:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.26)}
.btn--orange{background:linear-gradient(135deg,var(--orange),var(--orange-600)); color:#fff; box-shadow:0 8px 22px rgba(232,80,15,.3)}
.btn--orange:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(232,80,15,.38)}
.btn--white{background:#fff; color:var(--orange-600); box-shadow:0 10px 26px rgba(0,0,0,.16)}
.btn--white:hover{transform:translateY(-2px)}
.btn--full{width:100%; justify-content:center; padding:13px 20px; font-size:15px}

.round{
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; color:var(--navy); display:grid; place-items:center; cursor:pointer;
  transition:.25s; box-shadow:var(--shadow-sm);
}
.round svg{width:17px; height:17px}
.round:hover{background:var(--orange); border-color:var(--orange); color:#fff; transform:translateY(-2px)}

/* ---------- Marque ---------- */
.brand{display:inline-flex; align-items:center; gap:10px}
.brand__icon{width:36px; height:36px; border-radius:10px; box-shadow:var(--shadow-sm)}
.brand__text{display:flex; flex-direction:column; line-height:1}
.brand__name{
  font-family:var(--head); font-weight:800; font-size:23px; letter-spacing:.02em;
  color:#fff; display:inline-flex; align-items:center;
}
.brand__bolt{width:.42em; height:.85em; margin:0 -.06em 0 -.11em; fill:#fff; stroke:none; transform:translateY(-6%)}
.brand__sub{
  font-family:var(--head); font-weight:600; font-size:9px; letter-spacing:.22em;
  color:rgba(255,255,255,.82); margin-top:4px; text-transform:uppercase;
  white-space:nowrap;
}

/* ---------- Header ---------- */
.header{position:fixed; inset:0 0 auto; z-index:60; transition:background .35s, box-shadow .35s}
.header__inner{height:var(--hdr); display:flex; align-items:center; gap:24px; transition:height .35s}
.nav{margin-left:auto; display:flex; align-items:center; gap:28px}
.nav a{
  font-family:var(--head); font-weight:600; font-size:14.5px; color:#fff;
  position:relative; padding:5px 0; transition:opacity .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:currentColor; border-radius:2px; transition:right .3s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after, .nav a.is-active::after{right:0}
.header__cta{margin-left:4px}

/* header collapsé (après scroll) */
.header.is-stuck{background:rgba(255,255,255,.93); backdrop-filter:blur(14px); box-shadow:0 4px 24px rgba(18,41,75,.08)}
.header.is-stuck .header__inner{height:62px}
.header.is-stuck .brand__name{color:var(--orange)}
.header.is-stuck .brand__bolt{fill:var(--orange)}
.header.is-stuck .brand__sub{color:var(--navy)}
.header.is-stuck .nav a{color:var(--navy)}
.header.is-stuck .nav a:hover{color:var(--orange)}
.header.is-stuck .burger span{background:var(--navy)}

.burger{display:none; margin-left:auto; width:40px; height:40px; border:0; background:transparent; cursor:pointer; padding:9px}
.burger span{display:block; height:2.2px; border-radius:2px; background:#fff; margin:4px 0; transition:.3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.2px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; padding-top:calc(var(--hdr) + 26px); padding-bottom:92px; overflow:hidden}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 90% at 15% 0%, #F2691F 0%, #E8500F 42%, #C63F07 100%);
  clip-path:polygon(0 0, 100% 0, 100% 46%, 0 93%);
}
.hero__bg::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-radial-gradient(circle at 78% 26%, rgba(255,255,255,.075) 0 2px, transparent 2px 42px),
    radial-gradient(circle, rgba(255,255,255,.22) 1.2px, transparent 1.3px);
  background-size:auto, 18px 18px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(85% 80% at 70% 30%, #000 0%, transparent 78%);
          mask-image:radial-gradient(85% 80% at 70% 30%, #000 0%, transparent 78%);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(255,255,255,.10), transparent 45%);
}

.hero__grid{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center}

/* intégré au h1 : le mot-clé principal doit être dans le titre de niveau 1 */
.hero__eyebrow{
  display:block; letter-spacing:normal;
  font-family:var(--head); font-weight:500; font-style:italic; font-size:clamp(14px,1.25vw,16.5px);
  color:rgba(255,255,255,.95); line-height:1.45; margin-bottom:16px; text-wrap:balance;
}
.hero__title{margin:0 0 14px; color:#fff}
.hero__title .l1{
  display:block; font-weight:800; font-size:clamp(32px,4.2vw,54px); letter-spacing:-.03em;
  color:#0F1420;
}
.hero__title .l2{
  display:block; font-weight:500; font-style:italic; font-size:clamp(25px,3.3vw,43px);
  color:#fff; margin-top:.08em; letter-spacing:-.02em;
}
.hero__quote{
  font-family:var(--head); font-style:italic; font-weight:500;
  color:rgba(255,255,255,.9); font-size:clamp(13.5px,1.05vw,15.5px); margin-bottom:26px;
  text-wrap:balance; max-width:30ch;
}

/* Badges stores */
.badges{display:flex; flex-wrap:wrap; gap:12px}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  background:#0B0E14; color:#fff; padding:8px 16px 8px 13px; border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.badge:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.28)}
.badge__ico{width:21px; height:21px; flex:none}
.badge__txt{display:flex; flex-direction:column; line-height:1.15}
.badge__txt small{font-size:8px; letter-spacing:.1em; opacity:.82; font-weight:600}
.badge__txt strong{font-family:var(--head); font-size:15.5px; font-weight:600; letter-spacing:-.01em}
.badges--dark .badge{background:#10131A}

/* ---------- Téléphone 3D ---------- */
.phone{--w:280px; width:var(--w); position:relative}
.phone__frame{
  position:relative; border-radius:calc(var(--w) * .145);
  padding:calc(var(--w) * .028);
  background:linear-gradient(145deg,#f7f8fa 0%,#b9bec7 18%,#6f7681 38%,#e8ebef 55%,#8e949f 74%,#f2f4f7 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  transform-style:preserve-3d;
}
.phone__frame img{
  width:100%; height:auto; display:block;
  border-radius:calc(var(--w) * .118);
  box-shadow:0 0 0 calc(var(--w) * .009) #0A0C11;
  background:#fff;
}
.phone__island{
  position:absolute; z-index:3; top:calc(var(--w) * .062); left:50%;
  transform:translateX(-50%) translateZ(2px);
  width:calc(var(--w) * .3); height:calc(var(--w) * .078);
  background:#05070B; border-radius:999px;
}
/* reflet de l'écran — sans mix-blend-mode : un enfant en blending isole le
   parent et aplatit son contexte 3D, ce qui annulerait la tranche ci-dessous */
.phone__frame::after{
  content:""; position:absolute; z-index:2; inset:calc(var(--w) * .028);
  border-radius:calc(var(--w) * .118); pointer-events:none;
  transform:translateZ(1px);
  background:linear-gradient(118deg, rgba(255,255,255,.30) 0 16%, rgba(255,255,255,.10) 28%, rgba(255,255,255,0) 44%);
}

/* ---- Tranche du châssis (face latérale en 3D) ---- */
.phone--hero .phone__frame::before,
.phone--tilt-left .phone__frame::before,
.phone--tilt-right .phone__frame::before{
  content:""; position:absolute; z-index:1;
  top:7%; height:86%; left:0; width:calc(var(--w) * .155);
  transform-origin:left center; transform:rotateY(90deg);
  background-image:
    /* bouton silencieux + volumes */
    linear-gradient(180deg,
      transparent 0 19%, rgba(10,14,22,.55) 19% 24%,
      transparent 24% 29%, rgba(10,14,22,.5) 29% 39%,
      transparent 39% 42%, rgba(10,14,22,.5) 42% 52%,
      transparent 52%),
    /* bande métallique : sombre côté écran, spéculaire au centre */
    linear-gradient(90deg,#3f4550 0%,#6b727d 14%,#dfe4ea 42%,#aab1bb 62%,#4a505a 84%,#2b303a 100%);
  box-shadow:inset 3px 0 5px -1px rgba(0,0,0,.55);
}
/* variante vue depuis la droite : tranche à droite, bouton latéral unique */
.phone--hero .phone__frame::before,
.phone--tilt-right .phone__frame::before{
  left:auto; right:0; transform-origin:right center; transform:rotateY(-90deg);
  background-image:
    linear-gradient(180deg, transparent 0 29%, rgba(10,14,22,.5) 29% 41%, transparent 41%),
    linear-gradient(90deg,#2b303a 0%,#4a505a 16%,#aab1bb 38%,#dfe4ea 58%,#6b727d 86%,#3f4550 100%);
  box-shadow:inset -3px 0 5px -1px rgba(0,0,0,.55);
}

.phone--hero{--w:clamp(212px,20vw,286px); margin-inline:auto;
  filter:drop-shadow(12px 24px 28px rgba(60,18,0,.34)) drop-shadow(0 8px 14px rgba(0,0,0,.15));
  animation:floaty 7s ease-in-out infinite; will-change:transform;
}
.phone--hero .phone__frame{transform:perspective(950px) rotateY(-19deg) rotateX(2deg) rotate(3deg)}
.phone--tilt-left{--w:clamp(200px,19vw,262px);
  filter:drop-shadow(-12px 24px 30px rgba(18,41,75,.22));
}
.phone--tilt-left .phone__frame{transform:perspective(900px) rotateY(17deg) rotateX(2deg) rotate(-3deg)}
.phone--tilt-right{--w:clamp(190px,17vw,244px);
  filter:drop-shadow(11px 24px 30px rgba(40,12,0,.32));
}
.phone--tilt-right .phone__frame{transform:perspective(850px) rotateY(-17deg) rotateX(2deg) rotate(2deg)}

@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* ---------- Cartes flottantes ---------- */
.hero__visual{position:relative; padding:16px 0 32px}
.float{
  position:absolute; z-index:4; width:min(272px,82%);
  background:rgba(255,255,255,.93); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:13px; padding:14px 16px;
  box-shadow:0 14px 34px rgba(60,20,0,.2);
}
.float h3{font-size:15.5px; margin-bottom:5px; letter-spacing:-.01em}
.float p{font-size:13px; line-height:1.5; color:var(--muted)}
.float--a{top:4%; left:-14%}
.float--b{bottom:6%; right:-12%; background:rgba(255,236,226,.94)}
.float--b h3{color:var(--orange-600)}

/* =========================================================
   BANDEAU
   ========================================================= */
.strip{position:relative; z-index:5; margin-top:-44px}
.strip__inner{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:24px 18px;
}
/* chaque bloc porte son propre retrait : les séparateurs tombent
   à égale distance des deux contenus qu'ils séparent */
.strip__item{display:flex; align-items:center; gap:12px; padding-inline:16px}
.strip__item .ico{
  width:36px; height:36px; padding:8px; box-sizing:border-box; flex:none;
  color:var(--orange); background:var(--orange-050); border-radius:10px;
}
.strip__item strong{display:block; font-family:var(--head); font-size:13.5px; color:var(--navy); line-height:1.3}
/* tient sur une seule ligne dans les quatre colonnes, y compris la plus longue */
.strip__item span{font-size:12px; color:var(--muted); white-space:nowrap}
.strip__item + .strip__item{border-left:1px solid var(--line)}

/* =========================================================
   Titres de section
   ========================================================= */
.kicker{
  display:inline-block; font-family:var(--head); font-weight:700; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--orange);
  background:var(--orange-050); padding:6px 13px; border-radius:999px; margin-bottom:14px;
}
.kicker--light{background:rgba(255,255,255,.18); color:#fff}
.sec-head{max-width:640px; margin:0 auto clamp(34px,4vw,52px); text-align:center}
.sec-head--left{margin-inline:0; text-align:left; max-width:520px}
.sec-head h2, .pro h2, .dl h2{font-size:clamp(25px,2.9vw,38px); font-weight:800; text-wrap:balance}
.step h3, .float h3, .faq summary h3, .zones h3{text-wrap:balance}
.sec-head h2 em, .pro h2 em, .dl h2 em{font-style:italic; font-weight:500; color:var(--orange)}
.lead{margin-top:14px; color:var(--muted); font-size:clamp(14.5px,1.05vw,16px)}

/* =========================================================
   ÉTAPES
   ========================================================= */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.step{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 24px 26px; transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s;
  overflow:hidden;
}
.step::before{
  content:""; position:absolute; inset:auto -30% -60% auto; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle,var(--orange-050),transparent 70%); opacity:0; transition:opacity .4s;
}
.step:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent}
.step:hover::before{opacity:1}
.step__num{
  position:absolute; top:18px; right:22px; font-family:var(--head); font-weight:800;
  font-size:46px; line-height:1; color:var(--orange-050); letter-spacing:-.04em;
}
.step__ico{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(135deg,var(--orange),var(--orange-600)); color:#fff;
  box-shadow:0 8px 18px rgba(232,80,15,.28); position:relative; z-index:2;
}
.step__ico svg{width:22px; height:22px}
.step h3{font-size:18px; margin-bottom:8px; position:relative; z-index:2}
.step p{color:var(--muted); font-size:14.5px; position:relative; z-index:2}

/* =========================================================
   FONCTIONNALITÉS
   ========================================================= */
.feat{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:center}
.feat__visual{position:relative; display:grid; place-items:center; padding:16px}
/* Pas de rotation : le cadre d'un carré qui pivote grandit jusqu'à 1,41× sa
   largeur, ce qui débordait de la page entre 1000 et 1080 px. Une respiration
   en échelle garde le mouvement sans jamais sortir du conteneur
   (94 % × 1,05 = 98,7 %). */
.feat__blob{
  position:absolute; left:50%; top:50%;
  /* plafonnée : en une seule colonne le conteneur fait toute la largeur,
     et une forme en pourcentage débordait sur le texte au-dessus */
  width:min(94%, 400px); aspect-ratio:1;
  border-radius:46% 54% 58% 42%/48% 44% 56% 52%;
  background:linear-gradient(150deg,var(--orange-050),rgba(255,116,51,.18));
  animation:morph 16s ease-in-out infinite; will-change:transform;
}
@keyframes morph{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.05)}
}
.feat__visual .phone{position:relative; z-index:2}

.feat__list{display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; margin-top:30px}
.feat__list li{display:flex; gap:12px}
.feat__list svg{width:21px; height:21px; color:var(--orange); flex:none; margin-top:3px}
.feat__list strong{display:block; font-family:var(--head); font-size:15px; color:var(--navy); margin-bottom:3px}
.feat__list p{font-size:13.8px; color:var(--muted); line-height:1.55}

/* =========================================================
   GALERIE
   ========================================================= */
.gallery{overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:10px 0 24px}
.gallery::-webkit-scrollbar{display:none}
.gallery__track{
  display:flex; gap:26px; width:max-content;
  padding-inline:max(20px,calc((100vw - var(--container)) / 2));
}
.shot{margin:0; scroll-snap-align:center; text-align:center}
.shot .phone{--w:206px; transition:transform .4s cubic-bezier(.2,.7,.3,1); filter:drop-shadow(0 16px 26px rgba(18,41,75,.16))}
.shot:hover .phone{transform:translateY(-8px)}
.shot figcaption{
  margin-top:18px; font-family:var(--head); font-weight:600; font-size:14px; color:var(--navy);
}
.gallery__nav{display:flex; gap:10px; justify-content:center}

/* =========================================================
   DÉPANNEURS
   ========================================================= */
.pro{position:relative; padding:clamp(56px,6.5vw,92px) 0; overflow:hidden; color:#fff}
.pro__bg{
  position:absolute; inset:0;
  background:radial-gradient(120% 100% at 20% 10%, #F2691F, #E8500F 45%, #B93A06 100%);
}
.pro__bg::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-radial-gradient(circle at 82% 74%, rgba(255,255,255,.08) 0 2px, transparent 2px 40px),
    radial-gradient(circle, rgba(255,255,255,.18) 1.1px, transparent 1.2px);
  background-size:auto, 18px 18px; opacity:.5;
}
.pro__grid{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4.5vw,60px); align-items:center}
.pro h2{color:#fff}
.pro h2 em{color:#0F1420}
.pro .lead{color:rgba(255,255,255,.92)}
.checks{margin:24px 0 28px; display:grid; gap:11px}
.checks li{position:relative; padding-left:32px; font-size:14.8px; color:rgba(255,255,255,.95)}
.checks li::before{
  content:""; position:absolute; left:0; top:2px; width:21px; height:21px; border-radius:50%;
  background:rgba(255,255,255,.2);
}
.checks li::after{
  content:""; position:absolute; left:6.5px; top:8px; width:8px; height:4.5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}
.pro__visual{display:grid; place-items:center}

/* =========================================================
   ZONES COUVERTES
   ========================================================= */
.zones{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:14px}
.zones li{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; transition:border-color .3s, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.zones li:hover{transform:translateY(-3px); border-color:transparent; box-shadow:var(--shadow-sm)}
.zones h3{
  font-size:15px; margin-bottom:6px; display:flex; align-items:flex-start; gap:8px;
}
/* alignée sur la première ligne, pas centrée sur le bloc : les noms de régions
   passent sur deux lignes dès qu'on resserre les colonnes */
.zones h3::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none; margin-top:.42em;
  background:var(--orange); box-shadow:0 0 0 3px var(--orange-050);
}
.zones p{font-size:13.5px; color:var(--muted); line-height:1.55}

/* =========================================================
   FAQ
   ========================================================= */
.faq{max-width:820px; margin-inline:auto; display:grid; gap:10px}
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .3s, box-shadow .3s;
}
.faq details[open]{border-color:transparent; box-shadow:var(--shadow-sm)}
.faq summary{
  list-style:none; cursor:pointer; padding:17px 52px 17px 20px; position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:16.5px; font-weight:600; line-height:1.4; margin:0}
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--orange); border-bottom:2px solid var(--orange);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover h3{color:var(--orange-600)}
.faq details > p{
  padding:0 24px 19px 20px; color:var(--muted); font-size:14.8px; line-height:1.65;
}
.faq details > p strong{color:var(--navy); font-weight:600}

/* =========================================================
   TÉLÉCHARGEMENT
   ========================================================= */
.dl__inner{text-align:center; max-width:680px; margin-inline:auto}
.dl__icon{width:80px; height:80px; border-radius:20px; margin:0 auto 20px; box-shadow:0 14px 32px rgba(232,80,15,.28)}
.dl .badges{justify-content:center; margin-top:26px}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,64px); align-items:start}
.contact__list{display:grid; gap:15px; margin-top:28px}
.contact__list li{display:flex; gap:13px; align-items:center}
.contact__list svg{width:21px; height:21px; color:var(--orange); flex:none}
.contact__list strong{display:block; font-family:var(--head); font-size:13px; color:var(--navy)}
.contact__list a, .contact__list span{color:var(--muted); font-size:14.5px}
.contact__list a:hover{color:var(--orange)}

.form{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(22px,2.6vw,32px); box-shadow:var(--shadow-sm)}
.field{margin-bottom:15px}
.field label{display:block; font-family:var(--head); font-weight:600; font-size:12.5px; color:var(--navy); margin-bottom:6px}
.field input, .field select, .field textarea{
  width:100%; padding:11px 13px; border-radius:11px; border:1.5px solid var(--line);
  background:#FBFCFE; font:inherit; font-size:14.5px; color:var(--ink); transition:.22s; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--orange); background:#fff; box-shadow:0 0 0 3.5px rgba(232,80,15,.12);
}
.field input.err, .field textarea.err{border-color:#E0392B; background:#FFF6F5}
.form__note{margin-top:12px; font-size:13.5px; color:var(--muted); min-height:20px; text-align:center}
.form__note.ok{color:#128A4B}
.form__note.ko{color:#D63A2C}

/* =========================================================
   CARTES GUIDES (accueil)
   ========================================================= */
.guides{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.guide-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px 24px 22px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s;
}
.guide-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent}
.guide-card__ico{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--orange-050); color:var(--orange);
}
.guide-card__ico svg{width:21px; height:21px}
.guide-card h3{font-size:17px; margin-bottom:9px; text-wrap:balance}
.guide-card p{font-size:14.5px; color:var(--muted); flex:1}
.guide-card__more{
  margin-top:16px; font-family:var(--head); font-weight:600; font-size:14px; color:var(--orange-600);
}
.guide-card__more::after{content:" →"; transition:margin .25s}
.guide-card:hover .guide-card__more::after{margin-left:4px}

/* =========================================================
   PAGES LÉGALES
   ========================================================= */
.header--solid{position:sticky}
.legal__back{margin-left:auto}
.legal{padding:clamp(34px,5vw,60px) 0 clamp(50px,6vw,80px)}
.legal__inner{max-width:780px}
.legal h1{font-size:clamp(27px,3.2vw,40px); font-weight:800; margin-bottom:10px}
.legal__date{color:var(--muted); font-size:14px; margin-bottom:26px}
.legal__warn{
  background:var(--orange-050); border-left:4px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0; padding:16px 20px; margin-bottom:38px;
  font-size:14.5px; line-height:1.6; color:var(--ink);
}
.legal__warn strong{display:block; color:var(--orange-600); font-family:var(--head); margin-bottom:3px}
.legal h2{font-size:19px; margin:34px 0 12px; padding-top:20px; border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:0; padding-top:0; margin-top:0}
.legal p{color:var(--ink); font-size:15.5px; line-height:1.72; margin-bottom:12px}
/* seuls les liens dans le texte sont soulignés : boutons et cartes exclus */
.legal p a, .legal li a{color:var(--orange-600); text-decoration:underline; text-underline-offset:2px}
.legal p a:hover, .legal li a:hover{color:var(--orange)}
.legal__list{display:grid; gap:9px; margin:0 0 14px}
.legal__list li{
  position:relative; padding-left:20px; font-size:15px; line-height:1.65; color:var(--ink);
}
.legal__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--orange);
}
.legal__list strong{color:var(--navy)}
.legal__url{color:var(--orange-600)}
/* ---- bloc d'action (haut de guide) ---- */
.act{
  margin:0 0 34px; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--orange-025),#fff);
}
.act__q{font-family:var(--head); font-weight:700; font-size:17px; color:var(--navy); margin-bottom:14px}
.act__btns{display:flex; flex-wrap:wrap; gap:10px}
.act__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 18px; border-radius:999px; color:#fff; text-decoration:none;
  font-family:var(--head); font-weight:600; font-size:14.5px; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.act__btn:hover{transform:translateY(-2px); color:#fff}
.act__btn svg{width:18px; height:18px; flex:none}
.act__btn--call{background:linear-gradient(135deg,var(--orange),var(--orange-600)); box-shadow:0 8px 20px rgba(232,80,15,.3)}
.act__btn--wa{background:#25D366; box-shadow:0 8px 20px rgba(37,211,102,.3)}
.act__btn--app{background:#10131A; box-shadow:0 6px 18px rgba(0,0,0,.2)}
.act__note{margin-top:14px; font-size:13.2px; color:var(--muted); line-height:1.55}
.act__note strong{color:var(--navy)}

/* barre collante mobile, sur le guide d'urgence uniquement */
.act-bar{display:none}
@media (max-width:860px){
  .act-bar{
    display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:70;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
    box-shadow:0 -6px 24px rgba(18,41,75,.13);
  }
  .act-bar .act__btn{flex:1; padding:13px 8px}
  body.has-actbar{padding-bottom:82px}
  .act__btns{flex-direction:column}
  .act__btn{width:100%}
}

/* ---- guides ---- */
.crumb{font-size:13px; color:var(--muted); margin-bottom:14px}
.crumb a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.crumb a:hover{color:var(--orange)}
.crumb span[aria-hidden]{margin:0 5px; opacity:.6}
.guide__chapo{
  font-size:17px; line-height:1.6; color:var(--navy); font-weight:500;
  padding-bottom:22px; margin-bottom:8px; border-bottom:1px solid var(--line);
}
.guide__cta{
  position:relative; overflow:hidden; margin:44px 0 36px;
  border-radius:var(--radius-lg); padding:28px 30px; color:#fff;
  background:radial-gradient(120% 140% at 15% 0%, #F2691F, #E8500F 45%, #C63F07 100%);
}
.guide__cta h2{color:#fff; border-top:0; padding-top:0; margin:0 0 10px; font-size:21px}
.guide__cta p{color:rgba(255,255,255,.94); font-size:15px; margin-bottom:20px}
.guide__related{margin-top:8px}
.guide__related h2{font-size:17px}
.guide__related ul{display:grid; gap:10px}
.guide__related li a{
  display:block; padding:14px 18px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--head); font-weight:600; font-size:15px; color:var(--navy);
  text-decoration:none; transition:border-color .25s, transform .25s, box-shadow .25s;
}
.guide__related li a:hover{
  color:var(--orange-600); border-color:transparent;
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}

.legal__foot{margin-top:0; border-top:0; padding-top:0}
.legal__foot a{color:rgba(255,255,255,.72); text-decoration:none}
.legal__foot a:hover{color:var(--orange-400)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:#0F1B2E; color:rgba(255,255,255,.72); padding:56px 0 22px}
.footer__inner{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px}
.footer__brand p{margin-top:14px; font-size:14px; max-width:330px; line-height:1.62}
.footer .brand__name{color:#fff}
.footer .brand__bolt{fill:var(--orange-400)}
.footer .brand__sub{color:rgba(255,255,255,.6)}
.footer__col h4{color:#fff; font-size:14px; margin-bottom:13px; font-weight:600}
.footer__col{display:flex; flex-direction:column; gap:9px}
.footer__col a{font-size:14px; transition:.2s; width:fit-content}
.footer__col a:hover{color:var(--orange-400)}
.footer__bottom{
  margin-top:40px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:14px; font-size:12.5px; flex-wrap:wrap;
}

/* =========================================================
   Reveal
   ========================================================= */
.reveal{opacity:0; transform:translateY(22px)}
.reveal.in{opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr; text-align:center; gap:8px}
  .hero__copy{max-width:580px; margin-inline:auto}
  .hero__quote{margin-inline:auto}
  .badges{justify-content:center}
  /* La diagonale coupait en travers des deux cartes, laissant un coin orange
     en biais à côté d'un bloc blanc. On la ramène tout en bas du hero, sous le
     contenu : biseau franc de 44 px, indépendant de la hauteur de la section. */
  .hero__bg{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%)}
  .hero{padding-bottom:76px}
  .hero__visual{padding-top:32px}
  .float{position:static; width:100%; max-width:400px; margin:14px auto 0; text-align:left}
  .float--b{margin-top:12px}
  .strip__inner{grid-template-columns:1fr 1fr; gap:22px 0; padding:22px 14px}
  .strip__item + .strip__item{border-left:0}
  .strip__item:nth-child(even){border-left:1px solid var(--line)}
  .feat{grid-template-columns:1fr; gap:44px}
  .feat__visual{order:2}
  .sec-head--left{margin-inline:auto; text-align:center; max-width:600px}
  .contact{grid-template-columns:1fr}
  .pro__grid{grid-template-columns:1fr; text-align:center}
  .checks li{text-align:left}
  .checks{max-width:470px; margin-inline:auto}
  .pro .kicker, .pro .btn{margin-inline:auto}
  .pro__visual{margin-top:34px}
  .footer__inner{grid-template-columns:1fr 1fr}
}

/* Entre 1081 et 1250 px, le débord des cartes sortait du conteneur et se
   faisait rogner par le hero. On le réduit sur cette plage. */
@media (min-width:1081px) and (max-width:1250px){
  .float--a{left:-4%}
  .float--b{right:-2%}
}

@media (max-width:1080px){
  /* les cartes ne survolent plus le téléphone : le flou coûte sans rien apporter */
  .float{backdrop-filter:none; background:#fff}
  .float--b{background:#FFECE2}
}

/* Le header bascule en menu burger avant les autres blocs : sept liens plus le
   bouton ne tiennent pas sous ~1000 px (débordement mesuré à 900 px). */
@media (max-width:1000px){
  .nav{
    position:fixed; inset:0 0 auto; top:0; padding:calc(var(--hdr) + 16px) 24px 24px;
    background:rgba(255,255,255,.98); backdrop-filter:blur(16px); flex-direction:column;
    align-items:flex-start; gap:2px; box-shadow:0 18px 36px rgba(18,41,75,.13);
    transform:translateY(-110%); margin:0;
    max-height:100dvh; overflow-y:auto; overscroll-behavior:contain;
    /* fermé : hors de l'ordre de tabulation, pas seulement hors écran */
    visibility:hidden; pointer-events:none;
    transition:transform .4s cubic-bezier(.2,.7,.3,1), visibility 0s linear .4s;
  }
  .nav.is-open{transform:none; visibility:visible; pointer-events:auto; transition-delay:0s, 0s}
  .nav a{color:var(--navy) !important; font-size:16.5px; width:100%; padding:13px 0; border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .header__cta{display:none}
  .burger{display:block; width:44px; height:44px; padding:11px}
  /* pas de défilement de la page derrière le menu ouvert */
  body.nav-open{overflow:hidden}
}

@media (max-width:860px){
  .steps{grid-template-columns:1fr}
  .guides{grid-template-columns:1fr}
  .feat__list{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr 1fr; gap:28px}
  .footer__brand{grid-column:1 / -1}
}

@media (max-width:560px){
  :root{--hdr:64px}

  /* titres : à 350 px de large, 25 px produisait des lignes bancales
     avec un mot orphelin ; 22 px + équilibrage donne des blocs propres */
  .sec-head h2, .pro h2, .dl h2{font-size:22.5px; line-height:1.2}
  .sec-head{margin-bottom:30px}
  .lead{margin-top:12px}

  /* ---- hero plus compact : 1154 px, c'était 1,4 écran avant le moindre contenu ---- */
  .hero{padding-bottom:58px}
  .hero__eyebrow{margin-bottom:12px; font-size:14px}
  .hero__title .l1{font-size:clamp(28px,8.6vw,38px)}
  .hero__title .l2{font-size:clamp(22px,6.8vw,30px)}
  .hero__quote{margin-bottom:20px}
  .hero__visual{padding:24px 0 8px}
  .float{padding:13px 15px; max-width:none; margin-top:12px}
  .float h3{font-size:15px; margin-bottom:3px}
  .float p{font-size:13px; line-height:1.45}

  /* deux badges sur une seule ligne à 375 px */
  .badges{gap:10px; flex-wrap:nowrap}
  .badge{padding:8px 12px 8px 10px; gap:8px; flex:0 1 auto; min-width:0}
  .badge__ico{width:19px; height:19px}
  .badge__txt strong{font-size:14.5px}
  .badge__txt small{font-size:8.5px}

  .strip{margin-top:-26px}
  .strip__inner{grid-template-columns:1fr; gap:0; padding:8px 6px}
  .strip__item{gap:12px; padding:13px 14px}
  .strip__item:nth-child(even){border-left:0}
  .strip__item + .strip__item{border-top:1px solid var(--line)}

  /* le bouton du header des guides écrasait la marque à 390 px */
  .legal__back{padding:9px 14px; font-size:13px}

  /* 13 cartes pleine largeur empilées formaient un mur uniforme :
     deux colonnes serrées, et une seule en dessous de ~340 px */
  .zones{grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:8px}
  .zones li{padding:12px 13px}
  .zones h3{font-size:13.5px; margin-bottom:4px; gap:6px}
  .zones h3::before{width:6px; height:6px; box-shadow:0 0 0 2.5px var(--orange-050)}
  .zones p{font-size:12.2px; line-height:1.5}
  .faq summary{padding:15px 44px 15px 17px}
  .faq details > p{padding:0 20px 16px 17px}

  .gallery__track{gap:18px}
  .gallery{scroll-padding-inline:20px}
  .shot .phone{--w:180px}
  .shot figcaption{margin-top:14px}

  /* zone de tap : tout ce qui est cliquable atteint 44 px */
  .round{width:44px; height:44px}
  .contact__list li{min-height:44px}
  .contact__list a{display:inline-flex; align-items:center; min-height:44px}
  .brand{padding-block:4px}
  .footer__col{gap:2px}
  .footer__col a{padding:11px 0; width:100%}
  .footer__bottom{justify-content:center; text-align:center}
}

/* iOS Safari zoome automatiquement sur un champ dont la police fait moins de 16 px */
@media (max-width:860px){
  .field input, .field select, .field textarea{font-size:16px; padding:12px 14px}
}

/* mobile en paysage : le header ne doit pas manger l'écran */
@media (orientation:landscape) and (max-height:520px){
  :root{--hdr:56px}
  .hero{padding-top:calc(var(--hdr) + 18px); padding-bottom:44px}
  .hero__visual{padding-top:20px}
  .phone--hero{--w:190px}
  .section, .pro{padding-block:44px}
  .nav{padding-top:calc(var(--hdr) + 10px)}
  .nav a{padding:10px 0}
}

/* Encoche / coins arrondis : la marge de sécurité est retirée de la LARGEUR du
   conteneur, pas ajoutée en padding — plusieurs éléments cumulent .container et
   leur propre padding (.strip__inner, .header__inner), qu'un padding-inline ici
   écraserait silencieusement. */
@supports (width:calc(100% - env(safe-area-inset-left))){
  .container{
    width:min(
      100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right),
      var(--container)
    );
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}