/* =========================================================================
   Montserrat, hébergée par le site lui-même.
   Fichier variable : une seule ressource couvre les graisses 400 à 800.
   Aucun appel à un tiers, aucune adresse IP de visiteur envoyée ailleurs.
   ========================================================================= */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/montserrat-latin.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:'Montserrat';
  font-style:italic;
  font-weight:300 600;
  font-display:swap;
  src:url('../fonts/montserrat-italic-latin.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:'Montserrat';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =========================================================================
   PANDA GLASS — feuille de style unique
   Palette de marque : 4 couleurs, pas une de plus.
   ========================================================================= */

:root{
  /* Charte Panda Glass : les six couleurs fournies par le client, appliquees
     sur une base claire, comme la maquette d'origine.

     Deux regles absolues :
       le jaune ne porte JAMAIS de texte sur fond clair (1,19:1 sur blanc) ;
       il ne sert que sur les surfaces sombres et en aplat sous du #040c11.
       #17465e sur #112b44 ne vaut que pour les filets (1,43:1). */
  --c1:#040c11;            /* texte principal, bandes les plus sombres */
  --c2:#0b1c2e;            /* sections sombres */
  --c3:#112b44;            /* couleur d'action */
  --c4:#17465e;            /* texte secondaire sur fond clair */
  --jaune:#f8f149;         /* jaune officiel du kit de marque */
  --c1-rgb:4,12,17;        /* memes valeurs, pour les voiles translucides */
  --c2-rgb:11,28,46;
  --c3-rgb:17,43,68;
  --jaune-rgb:248,241,73;
  --blanc:#efefef;         /* sections de respiration */

  --paper:#FFFFFF;
  --tint:var(--blanc);
  --navy:var(--c2);
  --navy-2:var(--c2);
  --navy-950:var(--c1);
  --navy-900:var(--c1);
  --navy-600:var(--c3);
  --navy-300:var(--c4);

  --blue:var(--c3);        /* boutons : blanc dessus, 12,6:1 */
  --blue-dark:var(--c2);
  --blue-soft:var(--jaune);

  --ink:var(--c1);         /* 18,6:1 sur blanc */
  --muted:var(--c4);       /* 10,2:1 sur blanc */
  --line:#DDE2E8;          /* teinte claire derivee, pour les filets */
  --line-soft:#EDF1F5;
  --tint-2:#F5F8FC;
  --on-navy:#FFFFFF;
  --on-navy-soft:#ABAFB4;
  --glass:#DCE8FA;
  --gold:#C97A05;          /* etoiles : le jaune ne passe pas sur blanc */

  --r-card:14px;
  --r-ctl:999px;
  --r-field:10px;

  --sh-1:0 1px 2px rgba(4,12,17,.06), 0 8px 20px -10px rgba(4,12,17,.22);
  --sh-2:0 2px 6px rgba(4,12,17,.08), 0 24px 48px -20px rgba(4,12,17,.30);

  --wrap:1180px;
  --gut:clamp(1.15rem,4vw,2.5rem);

  --ease:cubic-bezier(.16,.84,.44,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

/* ---------- surfaces navigateur : rien ne reste au réglage d'usine ---------- */
::selection{background:var(--navy);color:#fff}
:root{scrollbar-color:var(--navy-300) var(--tint)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--tint)}
::-webkit-scrollbar-thumb{background:var(--navy-300);border:3px solid var(--tint);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--navy-600)}
input,textarea,select{caret-color:var(--teal-dark)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:3px}
.on-navy :focus-visible{outline-color:var(--glass)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:.08em}

/* ---------- typographie ---------- */
h1,h2,h3,h4{line-height:1.06;letter-spacing:-.03em;text-wrap:balance;font-weight:800}
.display{font-size:clamp(2.35rem,5vw,4.05rem);letter-spacing:-.038em;line-height:1.0}
h2{font-size:clamp(1.85rem,3.3vw,2.9rem)}
h3{font-size:1.22rem;letter-spacing:-.022em;font-weight:700;line-height:1.22}
h4{font-size:1.02rem;letter-spacing:-.015em;font-weight:700}
p{text-wrap:pretty}
.lead{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.55;font-weight:500}
.measure{max-width:66ch}
.measure-s{max-width:52ch}
.mute{color:var(--muted)}
.on-navy .mute,.mute-on-navy{color:var(--on-navy-soft)}
.teal-rule{display:block;width:52px;height:5px;background:var(--teal);border-radius:2px;margin-bottom:1.4rem}

/* ---------- structure ---------- */
.wrap{width:min(100% - (2 * var(--gut)),var(--wrap));margin-inline:auto}
.sec{padding:clamp(3.4rem,7vw,6.2rem) 0}
.sec-tight{padding:clamp(2.4rem,5vw,4rem) 0}
.on-navy{background:var(--navy);color:var(--on-navy)}
.on-navy h1,.on-navy h2,.on-navy h3{color:#fff}
.on-tint{background:var(--tint)}
.on-jaune{background:var(--jaune);color:var(--c1)}
.on-jaune h1,.on-jaune h2,.on-jaune h3,.on-jaune .lead,.on-jaune p{color:var(--c1)}
.on-jaune .kicker{color:var(--c1)}
.on-jaune .kicker::before{background:var(--c1)}
.on-jaune .btn-outline{border-color:rgba(var(--c1-rgb),.35);color:var(--c1);background:transparent}
.on-jaune .btn-outline:hover{border-color:var(--c1);background:rgba(var(--c1-rgb),.06)}
.on-jaune .btn-ghost{color:var(--c1)}
.on-jaune .row-art{background:var(--paper);border-color:rgba(var(--c1-rgb),.14)}
.sec-question{padding-block:3.2rem}
.question-bloc{display:grid;gap:1.6rem;align-items:center}
.question-bloc h2{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15}
.question-bloc p{margin-top:.7rem;color:rgba(var(--c1-rgb),.78)}
.question-bloc .btn-row{margin-top:0}
@media (min-width:900px){
  .question-bloc{grid-template-columns:1fr auto;gap:2.6rem}
  .question-bloc .btn-row{justify-content:flex-end}
}
.on-jaune .hint,.on-jaune [style*="var(--muted)"]{color:rgba(var(--c1-rgb),.72)}
.sec-head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head .lead{margin-top:1rem;color:var(--muted)}
.on-navy .sec-head .lead{color:var(--on-navy-soft)}
.split{display:grid;gap:clamp(1.6rem,4vw,4rem);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split-wide{grid-template-columns:1.15fr .85fr}}

/* ---------- lien d'évitement ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--teal);color:var(--ink);
  padding:.8rem 1.2rem;font-weight:700;border-radius:0 0 var(--r-ctl) 0}
.skip:focus{left:0}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.62rem;
  padding:.86rem 1.35rem;border-radius:var(--r-ctl);
  font-weight:700;font-size:.98rem;letter-spacing:-.012em;
  text-decoration:none;cursor:pointer;
  border:2px solid transparent;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn svg{flex:none;width:18px;height:18px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--blue-dark)}
.btn-outline{border-color:var(--line);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.on-navy .btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.on-navy .btn-outline:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-ghost{color:var(--blue);padding-inline:.4rem}
.btn-ghost:hover{color:var(--blue-dark)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ---------- en-tête ---------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.hdr-in{display:flex;align-items:center;gap:.9rem;min-height:76px;
  width:min(100% - (2 * var(--gut)),1340px)}
.hdr-logo{flex:none}
.nav{display:none;margin-left:auto;gap:.2rem}
@media (min-width:1240px){.nav{display:flex}}
.nav a{
  display:block;padding:.5rem .52rem;border-radius:6px;text-decoration:none;
  font-size:.87rem;font-weight:600;color:var(--navy);white-space:nowrap;
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.nav a:hover{background:var(--tint)}
.nav a[aria-current=page]{color:var(--teal-dark);box-shadow:inset 0 -3px 0 var(--teal)}
.hdr-cta{display:none;margin-left:auto;gap:.6rem;align-items:center}
@media (min-width:1240px){.hdr-cta{display:flex;margin-left:.8rem}}
.hdr-tel{font-weight:800;font-size:.92rem;color:var(--navy);text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.45rem}
.hdr-tel:hover{color:var(--teal-dark)}
.burger{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:2px solid var(--navy);border-radius:var(--r-ctl);color:var(--navy)}
@media (min-width:1240px){.burger{display:none}}
.burger svg{width:22px;height:22px}
.mnav{display:none;border-top:1px solid var(--line-soft);background:#fff;padding:.6rem 0 1.2rem}
.mnav[data-open=true]{display:block}
@media (min-width:1240px){.mnav{display:none!important}}
.mnav a{display:block;padding:.85rem .2rem;border-bottom:1px solid var(--line-soft);
  text-decoration:none;font-weight:600;color:var(--navy)}
.mnav .btn{margin-top:1.1rem;width:100%;justify-content:center}

/* ---------- héros ---------- */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero-in{display:grid;gap:clamp(2rem,4vw,3.5rem);
  padding:clamp(3rem,6.5vw,5.6rem) 0 clamp(2.6rem,5vw,4.4rem)}
@media (min-width:960px){.hero-in{grid-template-columns:1.05fr .95fr;align-items:center}}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero .lead{margin-top:1.35rem;color:var(--on-navy-soft);max-width:46ch}
.hero-art{position:relative}
.hero-art svg{width:100%;height:auto;filter:drop-shadow(0 26px 44px rgba(0,0,0,.34))}

/* bandeau de promesses sous le héros */
/* Le fond est volontairement absent : la regle plus bas rend le bandeau
   transparent pour que la photo du heros passe dessous, comme la maquette. */
.promise{border-top:1px solid rgba(255,255,255,.18)}
.promise ul{display:grid;gap:0}
@media (min-width:720px){.promise ul{grid-template-columns:repeat(3,1fr)}}
.promise li{display:flex;gap:.85rem;align-items:flex-start;padding:1.35rem 0}
@media (min-width:720px){
  .promise li{padding:1.5rem 1.6rem}
  .promise li + li{border-left:1px solid rgba(255,255,255,.16)}
  .promise li:first-child{padding-left:0}
}
@media (max-width:719px){.promise li + li{border-top:1px solid rgba(255,255,255,.16)}}
.promise svg{flex:none;width:26px;height:26px;color:var(--teal);margin-top:.1rem}
.promise b{display:block;color:#fff;font-size:1rem;letter-spacing:-.015em}
.promise span{display:block;color:var(--on-navy-soft);font-size:.9rem;line-height:1.5;margin-top:.2rem}

/* ---------- prestations : rangées larges, pas une grille de cartes ---------- */
.rows{border-top:2px solid var(--navy)}
.row-item{
  display:grid;gap:1.2rem 2.2rem;padding:clamp(1.8rem,3.4vw,2.7rem) 0;
  border-bottom:1px solid var(--line);align-items:start;
}
@media (min-width:860px){.row-item{grid-template-columns:210px 1fr 210px;align-items:center}}
.row-art{background:var(--tint);border-radius:var(--r-card);padding:1rem;border:1px solid var(--line-soft)}
.row-art svg{width:100%;height:auto}
.row-body h3{margin-bottom:.55rem}
.row-body p{color:var(--muted);max-width:56ch}
.row-item .btn{white-space:nowrap}
@media (min-width:860px){.row-item .btn{justify-self:end}}

/* ---------- listes de points ---------- */
.checks{display:grid;gap:.9rem}
.checks li{display:flex;gap:.75rem;align-items:flex-start;line-height:1.5}
.checks svg{flex:none;width:22px;height:22px;color:var(--teal-dark);margin-top:.16rem}
.on-navy .checks svg{color:var(--teal)}

/* ---------- déroulé numéroté (la séquence porte l'information) ---------- */
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line)}
.step{counter-increment:s;display:grid;gap:.5rem 1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line);
  grid-template-columns:auto 1fr;align-items:start}
@media (min-width:820px){.step{grid-template-columns:auto 15rem 1fr;align-items:baseline}}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-weight:800;font-size:.92rem;color:var(--teal-dark);
  border:2px solid var(--teal);border-radius:99px;
  width:2.55rem;height:2.55rem;display:grid;place-items:center;
  grid-row:span 2;
}
@media (min-width:820px){.step::before{grid-row:auto}}
.on-navy .step{border-color:rgba(255,255,255,.18)}
.on-navy .steps{border-color:rgba(255,255,255,.18)}
.on-navy .step::before{color:var(--teal);border-color:var(--teal)}
.step h3{margin:0}
.step p{color:var(--muted);max-width:58ch;grid-column:2/-1}
@media (min-width:820px){.step p{grid-column:3}}
.on-navy .step p{color:var(--on-navy-soft)}

/* ---------- carte de France ---------- */
.map-wrap{display:grid;gap:clamp(1.5rem,3vw,3rem)}
@media (min-width:900px){.map-wrap{grid-template-columns:.9fr 1.1fr;align-items:center}}
.map svg{width:100%;height:auto;max-height:520px}
.fr-land{fill:var(--navy-900);stroke:var(--teal);stroke-width:1.6;stroke-linejoin:round}
.on-tint .fr-land,.sec:not(.on-navy) .fr-land{fill:#fff;stroke:var(--navy);stroke-width:1.6}
.on-navy .fr-land{fill:var(--navy-900);stroke:var(--teal)}
.fr-dot{fill:var(--teal)}
.on-tint .fr-dot{fill:var(--teal-dark)}

/* ---------- formulaires ---------- */
.form{display:grid;gap:1.15rem}
.field{display:grid;gap:.4rem}
.field label{font-weight:700;font-size:.9rem;letter-spacing:-.01em}
.field .hint{font-size:.83rem;color:var(--muted);line-height:1.45}
.on-navy .field .hint{color:var(--on-navy-soft)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .95rem;
  background:#fff;color:var(--ink);
  border:2px solid var(--line);border-radius:var(--r-field);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.field textarea{min-height:8.5rem;resize:vertical}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23112b44' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:20px;padding-right:2.6rem}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--navy-300)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(var(--c3-rgb),.30)}
.field input[aria-invalid=true],.field select[aria-invalid=true]{border-color:#B4341F}
.field .err{font-size:.85rem;font-weight:600;color:#B4341F;display:none}
.field[data-invalid=true] .err{display:block}
.grid-2{display:grid;gap:1.15rem}
@media (min-width:640px){.grid-2{grid-template-columns:1fr 1fr}}

/* plaque d'immatriculation française */
.plate{display:flex;align-items:stretch;border:2px solid var(--ink);border-radius:7px;overflow:hidden;background:#fff}
.plate:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(var(--c3-rgb),.30)}
.plate-eu{flex:none;width:34px;background:#0B3AA8;color:#FFCE00;display:grid;place-items:center;
  gap:2px;padding:.35rem 0;font-size:.62rem;font-weight:800;letter-spacing:.02em}
.plate-eu svg{width:15px;height:15px}
.plate input{border:0;border-radius:0;font-weight:800;font-size:1.28rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.7rem .8rem}
.plate input:focus{outline:none;box-shadow:none}

/* bascules physiques */
.toggles{display:grid;gap:.8rem}
@media (min-width:520px){.toggles{grid-template-columns:1fr 1fr}}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle span{
  display:grid;gap:.5rem;justify-items:start;
  padding:1rem 1.1rem;border:2px solid var(--line);border-radius:var(--r-card);
  background:#fff;cursor:pointer;font-weight:700;line-height:1.3;
  transition:border-color .16s var(--ease),background-color .16s var(--ease),
             transform .12s var(--ease),box-shadow .16s var(--ease);
  box-shadow:0 3px 0 var(--line);
}
.toggle span small{display:block;font-weight:500;font-size:.85rem;color:var(--muted);line-height:1.45}
.toggle span svg{width:30px;height:30px;color:var(--navy)}
.toggle input:hover + span{border-color:var(--navy-300)}
.toggle input:focus-visible + span{outline:3px solid var(--teal);outline-offset:2px}
.toggle input:checked + span{
  border-color:var(--navy);background:var(--tint);
  transform:translateY(3px);box-shadow:0 0 0 var(--navy);
}
.toggle input:checked + span svg{color:var(--teal-dark)}

/* ---------- accordéon FAQ ---------- */
.acc{border-top:2px solid var(--navy)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%;display:flex;gap:1.2rem;align-items:center;justify-content:space-between;
  padding:1.35rem 0;text-align:left;font-weight:700;font-size:1.06rem;
  letter-spacing:-.018em;color:var(--navy);line-height:1.3;
}
.acc-btn:hover{color:var(--teal-dark)}
.acc-btn svg{flex:none;width:24px;height:24px;transition:transform .24s var(--ease)}
.acc-btn[aria-expanded=true] svg{transform:rotate(45deg)}
.acc-panel{display:none;padding:0 0 1.5rem;max-width:70ch;color:var(--muted)}
.acc-panel[data-open=true]{display:block}
.acc-panel p + p{margin-top:.8rem}

/* ---------- encadré ---------- */
.note{
  border:2px solid var(--navy);border-radius:var(--r-card);
  padding:clamp(1.25rem,2.6vw,1.9rem);background:var(--tint);
}
.on-navy .note{background:var(--navy-900);border-color:var(--teal);color:var(--on-navy-soft)}
.note h3{margin-bottom:.6rem}

/* Pourquoi la fiche centre ne porte pas d'adresse de rue. Un filet jaune
   plutot qu'un encadre : c'est une precision, pas un avertissement. */
.note-adresse{
  margin-top:1.6rem;padding-left:1.1rem;border-left:4px solid var(--jaune);
  color:var(--muted);font-size:.97rem;line-height:1.62;
}
.on-navy .note-adresse{color:var(--on-navy-soft)}

/* ---------- à remplir ---------- */
.todo{
  font-weight:700;color:var(--teal-dark);
  border-bottom:2px dotted var(--teal);
  overflow-wrap:break-word;
}
.on-navy .todo{color:var(--teal)}

/* ---------- appel final ---------- */
.cta-final{background:var(--navy-950);color:#fff;text-align:center}
.cta-final .wrap{padding-block:clamp(3rem,6vw,5rem)}
.cta-final h2{color:#fff;margin-inline:auto;max-width:20ch}
.cta-final p{color:var(--on-navy-soft);margin:1.1rem auto 0;max-width:52ch}
.cta-final .btn-row{justify-content:center}

/* ---------- pied de page ---------- */
.ftr{background:var(--navy);color:var(--on-navy-soft);padding:clamp(2.8rem,5vw,4rem) 0 1.6rem}
.ftr-top{display:grid;gap:2.2rem;padding-bottom:2.4rem;border-bottom:1px solid rgba(255,255,255,.16)}
@media (min-width:860px){.ftr-top{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.ftr h4{color:#fff;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1rem;font-weight:800}
.ftr a{color:var(--on-navy-soft);text-decoration:none;font-size:.94rem}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr li + li{margin-top:.62rem}
.ftr-bot{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;padding-top:1.6rem;font-size:.85rem}
.ftr-bot p{margin-right:auto}

/* ---------- l'unique moment animé : la fracture qui se trace ---------- */
@media (prefers-reduced-motion:no-preference){
  .crack{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
    animation:draw 1.5s var(--ease) forwards}
  .crack-2{animation-delay:.18s}
  .crack-3{animation-delay:.34s}
  .ring{opacity:0;animation:fade .9s var(--ease) .62s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* ---------- divers ---------- */
.hr{height:1px;background:var(--line);border:0;margin:0}
.tag{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:700;
  letter-spacing:.02em;padding:.35rem .7rem;border-radius:99px;
  background:var(--tint);color:var(--navy);border:1px solid var(--line)}
.on-navy .tag{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.24)}

/* ---------- légende de groupe et consentement ---------- */
.field-legend{font-weight:700;font-size:.9rem;letter-spacing:-.01em;margin-bottom:.5rem;padding:0}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;line-height:1.5;color:var(--muted)}
.on-navy .consent{color:var(--on-navy-soft)}
.consent input{flex:none;width:22px;height:22px;margin-top:.12rem;accent-color:var(--teal-dark)}
.consent a{color:var(--navy);font-weight:600}
.on-navy .consent a{color:#fff}
.form code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--tint);padding:.1em .35em;border-radius:4px;color:var(--navy)}
.on-navy .form .field input,.on-navy .form .field select,.on-navy .form .field textarea{border-color:transparent}
.form-card{background:#fff;border:2px solid var(--navy);border-radius:var(--r-card);
  padding:clamp(1.25rem,3vw,2.1rem);box-shadow:var(--sh-2);color:var(--ink)}
.form-card h3{margin-bottom:.4rem}
.form-card > p{color:var(--muted);margin-bottom:1.5rem}
.form-card .consent{color:var(--muted)}
.form-card .consent a{color:var(--navy)}
fieldset.field{display:block}

/* ---------- corrections d'inspection ---------- */
/* le bouton d'en-tête ne se casse jamais sur deux lignes */
.hdr .btn,.hdr-cta .btn{white-space:nowrap}

/* en colonne étroite, le schéma de vitrage reste une vignette, pas une affiche */
@media (max-width:859px){
  .row-item .row-art{max-width:210px}
}

/* cibles tactiles : le pied de page et le consentement se prennent au doigt */
.ftr a{display:inline-block;padding-block:.32rem}
.ftr-bot a{padding-block:.4rem}
.consent input{width:24px;height:24px}

/* ---------- barre collée mobile : appeler et prendre rendez-vous restent atteignables ---------- */
.hdr-mini{display:flex;align-items:center;gap:.5rem;margin-left:auto}
@media (min-width:1240px){.hdr-mini{display:none}}
.mini-tel{
  display:inline-grid;place-items:center;width:46px;height:46px;flex:none;
  border:2px solid var(--navy);border-radius:var(--r-ctl);color:var(--navy);
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.mini-tel:hover{background:var(--navy);color:#fff}
.mini-tel svg{width:21px;height:21px}
.btn-sm{padding:.66rem .82rem;font-size:.9rem;gap:.4rem;min-height:46px}
.btn-sm svg{width:16px;height:16px}
@media (max-width:479px){
  .btn-sm span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .btn-sm{padding-inline:.85rem}
}
@media (max-width:1239px){.hdr-in{gap:.5rem}}

/* ---------- verrouillage du logo : pastille plus nom composé ---------- */
.lockup{display:inline-flex;align-items:center;gap:.65rem}
.lockup img{height:54px;width:auto;flex:none}
.lockup-txt{display:grid;gap:.2rem;line-height:1}
.lockup-txt b{font-size:1.16rem;font-weight:800;letter-spacing:-.025em;color:var(--navy)}
.lockup-txt small{font-size:.575rem;font-weight:700;letter-spacing:.185em;
  text-transform:uppercase;color:var(--teal-dark)}
.on-navy .lockup-txt b,.ftr .lockup-txt b{color:#fff}
.on-navy .lockup-txt small,.ftr .lockup-txt small{color:var(--on-navy-soft)}
.ftr .lockup{margin-bottom:1.1rem}
.ftr .lockup img{height:64px}
.ftr .lockup-txt b{font-size:1.32rem}
.ftr .lockup-txt small{font-size:.62rem}
@media (max-width:640px){
  .lockup{gap:.5rem}
  .lockup img{height:46px}
  .lockup-txt b{font-size:1.02rem}
}
@media (max-width:479px){
  .lockup-txt small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* ---------- texte réservé aux lecteurs d'écran ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- surfaces photographiques ---------- */
.hero,.cta-final{position:relative;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(var(--c2-rgb),.93) 0%,
    rgba(var(--c2-rgb),.78) 46%,
    rgba(var(--c1-rgb),.48) 100%);
}
@media (max-width:900px){
  .hero-media::after{background:linear-gradient(180deg,rgba(var(--c2-rgb),.82) 0%,rgba(var(--c2-rgb),.74) 55%,rgba(var(--c1-rgb),.62) 100%)}
  .hero-media img{object-position:center 58%}
}
.hero-txt{max-width:38rem}
@media (min-width:960px){.hero-in{grid-template-columns:minmax(0,1fr)}}

/* la fracture est dans le pare-brise que l'on regarde */
.hero-crack{
  position:absolute;top:6%;right:5%;width:min(34%,300px);height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
@media (max-width:900px){.hero-crack{top:auto;bottom:4%;right:4%;width:44%;opacity:.85}}

/* appel final : voile plus dense, le texte est centré dessus */
.cta-final .hero-media::after{
  background:linear-gradient(180deg,
    rgba(var(--c1-rgb),.84) 0%,
    rgba(var(--c2-rgb),.86) 100%);
}

/* ---------- vignettes de prestations ---------- */
.sec-head-row{max-width:none;display:grid;gap:1.2rem;align-items:end}
@media (min-width:900px){.sec-head-row{grid-template-columns:1fr auto}}
.sec-head-row > div{max-width:60ch}
.tiles{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{
  position:relative;display:block;border-radius:var(--r-card);overflow:hidden;
  text-decoration:none;background:var(--navy-950);box-shadow:var(--sh-1);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.tile img{
  width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform .5s var(--ease),opacity .22s var(--ease);opacity:.88;
}
@media (min-width:900px){.tile img{aspect-ratio:4/5}}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(var(--c1-rgb),.88) 100%);
}
.tile-lab{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.9rem 1rem;color:#fff;
}
.tile-lab b{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.tile-lab svg{
  flex:none;width:34px;height:34px;padding:7px;border-radius:99px;
  background:var(--teal);color:var(--ink);
  transition:transform .22s var(--ease);
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.tile:hover img{transform:scale(1.06);opacity:1}
.tile:hover .tile-lab svg{transform:translateX(3px)}
.tile:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* ---------- recherche par code postal ---------- */
.cp-search{
  position:relative;display:flex;gap:.55rem;align-items:center;
  margin-top:1.8rem;background:#fff;border-radius:var(--r-ctl);
  padding:.4rem .4rem .4rem .95rem;box-shadow:var(--sh-2);
}
.cp-search > svg{flex:none;width:21px;height:21px;color:var(--navy)}
.cp-search input{
  flex:1;min-width:0;border:0;background:none;padding:.7rem 0;
  font-size:1rem;color:var(--ink);
}
.cp-search input:focus{outline:none}
.cp-search:focus-within{box-shadow:0 0 0 4px rgba(var(--c3-rgb),.35),var(--sh-2)}
.cp-search .btn{white-space:nowrap}
@media (max-width:479px){
  .cp-search{flex-wrap:wrap;padding:.7rem}
  .cp-search .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .tile,.tile img,.tile-lab svg{transition:none}
  .tile:hover{transform:none}
  .tile:hover img{transform:none}
}

/* =========================================================================
   Diagnostic « réparable ou à remplacer »
   La seule section qui rompt le rythme : pas de filet turquoise, pas de
   chapô centré, le titre vit dans le panneau et le pare-brise domine.
   ========================================================================= */
.diag{background:var(--navy-950);padding-block:clamp(3rem,7vw,6rem)}
.diag-in{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center}
@media (min-width:1000px){.diag-in{grid-template-columns:1.12fr .88fr}}
.diag-verre{min-width:0}
.pb{width:100%;height:auto;display:block}

/* Le diagnostic vit sur la bande la plus sombre : son dessin prend le jaune
   en trait et le palier 2 en remplissage, sans quoi le pare-brise se confond
   avec le fond. */
.pb-verre{fill:var(--c2);stroke:var(--jaune);stroke-width:3.5;stroke-linejoin:round}
.pb-teinte{fill:var(--jaune);opacity:.10}
.pb-filet{fill:none;stroke:var(--jaune);stroke-width:1.6;stroke-dasharray:9 8;opacity:.5}
.pb-repere{fill:none;stroke:var(--jaune);stroke-width:1.6;stroke-dasharray:7 7;opacity:.55}
.pb-essuie{fill:none;stroke:var(--c4);stroke-width:6;stroke-linecap:round}
.pb-retro{fill:var(--c4);stroke:var(--jaune);stroke-width:2.5}
.pb-piece{fill:none;stroke:var(--blanc);stroke-width:2;stroke-dasharray:6 6;opacity:.65}
.pb-lab{fill:var(--blanc);font-size:15px;font-weight:700;letter-spacing:.14em;opacity:.75}
.pb-lab-c{text-anchor:middle}
.pb-deco{pointer-events:none}

.pb-zone{
  fill:transparent;stroke:transparent;stroke-width:2;cursor:crosshair;
  transition:fill .18s var(--ease),stroke .18s var(--ease);
}
.pb-zone:hover{fill:rgba(var(--jaune-rgb),.16)}
.pb-zone:focus-visible{outline:none;fill:rgba(var(--jaune-rgb),.16);
  stroke:var(--blanc);stroke-dasharray:7 5}
.pb-zone[data-actif="true"]{fill:rgba(var(--jaune-rgb),.28);
  stroke:var(--jaune);stroke-width:3.5;stroke-dasharray:none}
/* L'attribut hidden ne masque pas un element SVG : sans cette regle, le
   marqueur de fracture s'affichait au coin superieur gauche avant tout clic. */
.pb-mark{pointer-events:none}
.pb-mark[hidden]{display:none}

/* ---------- panneau ---------- */
.diag-panneau{min-width:0}
.diag-panneau h2{margin-bottom:.9rem}
.diag-panneau .lead{color:var(--on-navy-soft);margin-bottom:1.8rem}
.diag-champ{border:0;padding:0;margin-bottom:1.5rem}
.diag-champ legend{
  padding:0;margin-bottom:.7rem;font-size:.78rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-navy-soft);
}
.diag-champ legend label{cursor:pointer}
.diag-choix{display:flex;flex-wrap:wrap;gap:.5rem}
.diag-choix label{flex:1 1 auto;min-width:8rem}
.diag-choix-3 label{min-width:9.5rem}
.diag-choix input{position:absolute;opacity:0;width:1px;height:1px}
.diag-choix span{
  display:block;text-align:center;padding:.72rem .8rem;
  border:2px solid rgba(255,255,255,.28);border-radius:var(--r-ctl);
  font-weight:700;font-size:.92rem;line-height:1.25;color:#fff;cursor:pointer;
  transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.diag-choix label:hover span{border-color:var(--teal)}
.diag-choix input:focus-visible + span{outline:3px solid var(--glass);outline-offset:2px}
.diag-choix input:checked + span{background:var(--teal);border-color:var(--teal);color:var(--ink)}

.diag-regle{display:flex;align-items:center;gap:1rem}
.diag-mm{
  flex:none;min-width:5.2rem;text-align:right;font-weight:800;font-size:1.28rem;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;
}
.diag-taille{flex:1;min-width:0;-webkit-appearance:none;appearance:none;background:none}
.diag-taille::-webkit-slider-runnable-track{
  height:8px;border-radius:99px;background:rgba(255,255,255,.24)}
.diag-taille::-moz-range-track{height:8px;border-radius:99px;background:rgba(255,255,255,.24)}
.diag-taille::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-9px;
  border-radius:99px;background:var(--teal);border:3px solid var(--navy-950);cursor:grab}
.diag-taille::-moz-range-thumb{
  width:26px;height:26px;border-radius:99px;background:var(--teal);
  border:3px solid var(--navy-950);cursor:grab}
.diag-taille:focus-visible{outline:none}
.diag-taille:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--glass)}
.diag-taille:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--glass)}

/* ---------- verdict ---------- */
.diag-verdict{
  border:2px solid rgba(255,255,255,.28);border-radius:var(--r-card);
  padding:1.15rem 1.25rem;margin-bottom:1.4rem;
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.diag-etat{font-weight:800;font-size:1.12rem;letter-spacing:-.02em;line-height:1.3;color:#fff}
.diag-raisons{margin-top:.7rem;display:grid;gap:.4rem}
.diag-raisons:empty{display:none}
.diag-raisons li{
  position:relative;padding-left:1.1rem;font-size:.93rem;line-height:1.5;
  color:var(--on-navy-soft);
}
.diag-raisons li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:99px;background:var(--teal);
}
.diag-verdict[data-verdict="reparable"]{
  background:rgba(var(--jaune-rgb),.16);border-color:var(--jaune)}
.diag-verdict[data-verdict="remplacement"]{
  background:var(--navy-600);border-color:var(--glass)}
.diag-verdict[data-verdict] .diag-raisons li::before{background:#fff}
.diag-cta{width:100%;justify-content:center}
.diag-reserve{margin-top:.9rem;color:var(--on-navy-soft)}
[data-si]{transition:opacity .2s var(--ease)}
[data-si][hidden]{display:none}

/* =========================================================================
   Blocs du cahier des charges
   ========================================================================= */
.hero-court .hero-in{padding-block:clamp(2.4rem,5vw,4rem)}
.hero-court .display{font-size:clamp(2rem,4.2vw,3.4rem)}
.hero-court .tag{margin-bottom:1rem}

/* ---------- sélecteur de vitrage ---------- */
.vitrages{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.vitrages{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1060px){.vitrages{grid-template-columns:repeat(5,1fr)}}
.vitrage{
  position:relative;display:block;border-radius:var(--r-card);overflow:hidden;
  text-decoration:none;background:var(--navy-950);box-shadow:var(--sh-1);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.vitrage img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;opacity:.86;
  transition:transform .5s var(--ease),opacity .22s var(--ease)}
.vitrage::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 36%,rgba(var(--c1-rgb),.9) 100%)}
.vitrage-lab{position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.8rem .85rem;color:#fff}
.vitrage-lab b{font-size:.98rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.vitrage-lab svg{flex:none;width:30px;height:30px;padding:6px;border-radius:99px;
  background:var(--teal);color:var(--ink);transition:transform .22s var(--ease)}
.vitrage:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.vitrage:hover img{transform:scale(1.06);opacity:1}
.vitrage:hover .vitrage-lab svg{transform:translateX(3px)}
.vitrage:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.vitrage[aria-current="page"]{box-shadow:0 0 0 3px var(--teal),var(--sh-2)}
.vitrage[aria-current="page"] img{opacity:1}

/* ---------- situations : une bande réglée, pas une grille de cartes ---------- */
.situs{display:grid;gap:0;border-top:2px solid var(--navy)}
@media (min-width:860px){.situs{grid-template-columns:repeat(4,1fr);border-top-width:2px}}
.situ{padding:1.5rem 0;border-bottom:1px solid var(--line)}
@media (min-width:860px){
  .situ{padding:1.6rem 1.4rem;border-bottom:0}
  .situ + .situ{border-left:1px solid var(--line)}
  .situ:first-child{padding-left:0}
  .situ:last-child{padding-right:0}
}
.situ-ico{display:block;width:34px;color:var(--teal-dark);margin-bottom:.85rem}
.situ h3{margin-bottom:.45rem;font-size:1.06rem}
.situ p{color:var(--muted);font-size:.94rem;line-height:1.5}

/* ---------- déroulement : photo plus étapes numérotées ---------- */
.deroule{display:grid;gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
@media (min-width:900px){.deroule{grid-template-columns:.9fr 1.1fr}}
.deroule-photo{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1)}
.deroule-photo img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.etapes{counter-reset:e;display:grid;gap:0;border-top:1px solid var(--line)}
.etape{counter-increment:e;display:grid;grid-template-columns:auto 1fr;
  gap:.4rem 1.1rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.etape-ico{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;
  border-radius:99px;background:var(--tint);color:var(--navy)}
.etape-ico svg{width:23px;height:23px}
.etape h3{align-self:center;font-size:1.06rem}
.etape h3::before{content:counter(e,decimal-leading-zero) " ";color:var(--teal-dark);
  font-variant-numeric:tabular-nums;margin-right:.35rem}
.etape p{color:var(--muted);font-size:.94rem;line-height:1.55}
.on-navy .etapes,.on-navy .etape{border-color:rgba(255,255,255,.18)}
.on-navy .etape-ico{background:rgba(255,255,255,.1);color:#fff}
.on-navy .etape p{color:var(--on-navy-soft)}

/* ---------- avantages : pictogrammes compacts ---------- */
.avantages{display:grid;gap:1.6rem 1.4rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){.avantages{grid-template-columns:repeat(3,1fr)}}
.avantage{display:grid;gap:.5rem}
.av-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-ctl);
  background:var(--navy);color:#fff}
.av-ico svg{width:23px;height:23px}
.avantage h3{font-size:1.04rem}
.avantage p{color:var(--muted);font-size:.93rem;line-height:1.5}

/* ---------- engagements ---------- */
.engagements{display:grid;gap:1.2rem}
@media (min-width:900px){.engagements{grid-template-columns:1.25fr 1fr 1fr;align-items:stretch}}
.engagement{border:2px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.3rem,2.6vw,1.9rem);display:grid;gap:.7rem;align-content:start}
.engagement p{color:var(--muted);font-size:.96rem;line-height:1.55}
.engagement .mute{font-size:.88rem}
.eng-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-ctl);
  background:var(--navy);color:#fff}
.eng-ico svg{width:24px;height:24px}
.engagement-fort{background:var(--navy);border-color:var(--navy);color:#fff}
.engagement-fort h3{color:#fff}
.engagement-fort p{color:var(--on-navy-soft)}
.engagement-fort .eng-ico{background:var(--teal);color:var(--ink)}
.eng-zero{font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.45;color:#fff!important;
  font-weight:600}
.eng-zero b{font-size:1.5em;font-weight:800;color:var(--teal);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}

/* ---------- avis clients, en attente de données réelles ---------- */
.avis-vide{border:2px dashed var(--line);border-radius:var(--r-card);
  padding:clamp(1.5rem,3.5vw,2.6rem);max-width:60ch;display:grid;gap:.8rem}
.avis-titre{font-weight:800;font-size:1.14rem;letter-spacing:-.02em;color:var(--navy)}
.avis-vide p{color:var(--muted);line-height:1.6}

/* ---------- carte des centres ---------- */
.ct-wrap{display:grid;gap:clamp(1.6rem,3.5vw,3rem);align-items:center}
@media (min-width:920px){.ct-wrap{grid-template-columns:1fr 1fr}}
.ct-map{width:100%;height:auto;max-height:520px}
.ct-pt{cursor:pointer}
.ct-halo{fill:var(--teal);opacity:0;transition:opacity .2s var(--ease)}
.ct-dot{fill:var(--teal);stroke:var(--paper);stroke-width:3;
  transition:r .2s var(--ease)}
.on-navy .ct-dot{stroke:var(--navy)}
.ct-ville{fill:currentColor;font-size:16px;font-weight:800;text-anchor:middle;
  letter-spacing:-.02em;paint-order:stroke;stroke:var(--navy);stroke-width:5;
  stroke-linejoin:round}
.on-tint .ct-ville{stroke:var(--tint)}
.ct-pt:hover .ct-halo,.ct-pt[data-actif="true"] .ct-halo{opacity:.32}
.ct-pt:hover .ct-dot,.ct-pt[data-actif="true"] .ct-dot{r:9.5}
.ct-pt:focus-visible{outline:none}
.ct-pt:focus-visible .ct-halo{opacity:.45}
.ct-pt:focus-visible .ct-dot{stroke:var(--glass);stroke-width:4}
.ct-panneau{min-width:0;display:grid;gap:1.2rem;align-content:start}
.ct-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.ct-chip{padding:.55rem .95rem;border:2px solid var(--line);border-radius:99px;
  font-weight:700;font-size:.9rem;color:var(--navy);background:var(--paper);
  transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.on-navy .ct-chip{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.ct-chip:hover{border-color:var(--teal)}
.ct-chip[data-actif="true"]{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.ct-fiche{display:none;border:2px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.1rem,2.4vw,1.6rem);background:var(--paper)}
.on-navy .ct-fiche{background:var(--navy-900);border-color:rgba(255,255,255,.24)}
.ct-fiche[data-actif="true"]{display:block}
.ct-fiche h3{margin-bottom:1rem}
.ct-fiche .checks{gap:.7rem}
.ct-fiche .btn{margin-top:1.2rem}
@media (prefers-reduced-motion:reduce){
  .vitrage,.vitrage img,.vitrage-lab svg{transition:none}
  .vitrage:hover{transform:none}
  .vitrage:hover img{transform:none}
}

/* l'en-tête ne déborde jamais : on dégraisse avant de casser */

@media (max-width:1319px){
  .hdr-cta .hdr-tel{display:none}
}

/* =========================================================================
   Alignement sur la maquette client
   ========================================================================= */

/* ---------- surtitre à pastille, demandé par la maquette ---------- */
.kicker{
  display:block;margin-bottom:.85rem;
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);
}
/* La pastille est en ligne, pas un element flex : sur un surtitre qui passe
   sur plusieurs lignes, un flex centre la placait au milieu de la phrase. */
.kicker::before{
  content:"";display:inline-block;vertical-align:middle;position:relative;top:-1px;
  width:9px;height:9px;border-radius:2px;margin-right:.55rem;background:var(--blue);
}
.on-navy .kicker,.hero .kicker{color:var(--blue-soft)}
.on-navy .kicker::before,.hero .kicker::before{background:var(--blue-soft)}
.teal-rule{display:none}

/* ---------- titre en deux registres ---------- */
.hero h1 em,.display em{font-style:normal;color:var(--blue-soft)}

/* ---------- accent manuscrit du héros ---------- */
.script{
  font-style:italic;font-weight:400;font-size:clamp(1.1rem,1.8vw,1.5rem);
  line-height:1.25;color:#fff;text-align:right;
}
.script::after{content:"";display:block;width:64px;height:2px;background:rgba(255,255,255,.55);
  margin:.6rem 0 0 auto}
.hero-signature{position:absolute;right:var(--gut);bottom:calc(100% + 1.4rem);z-index:2}
@media (max-width:959px){.hero-signature{display:none}}

/* ---------- bandeau de promesses ---------- */
.promise{background:transparent;border-top:1px solid rgba(255,255,255,.16);backdrop-filter:none}
.promise li{align-items:center}
.promise svg{color:var(--blue-soft);width:24px;height:24px}
.promise b{font-size:.94rem;font-weight:700}
.promise span{font-size:.85rem}
@media (min-width:720px){.promise ul{grid-template-columns:repeat(4,1fr)}
  .promise li+li{border-left:0}
  .promise li{padding:1.4rem 1.2rem 1.4rem 0}}

/* ---------- en-tête : recherche et pilule ---------- */
.hdr-search{
  display:none;flex:none;width:42px;height:42px;place-items:center;border-radius:99px;
  color:var(--ink);transition:background-color .16s var(--ease)}
@media (min-width:1240px){.hdr-search{display:grid}}
.hdr-search:hover{background:var(--tint)}
.hdr-search svg{width:20px;height:20px}
.hdr-cta .btn-primary svg:first-child{margin-right:-.15rem}

/* ---------- chips de villes ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}
.chips-lab{font-size:.84rem;color:var(--on-navy-soft);margin-top:1rem}
.chip{
  padding:.5rem .95rem;border:1px solid rgba(255,255,255,.3);border-radius:99px;
  font-size:.87rem;font-weight:600;color:#fff;background:transparent;text-decoration:none;
  transition:background-color .16s var(--ease),border-color .16s var(--ease)}
.chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}

/* ---------- champ de recherche en pilule ---------- */
.cp-search{border-radius:99px;padding:.35rem .35rem .35rem 1.15rem;box-shadow:var(--sh-1)}
.cp-search > svg{color:var(--blue)}
.cp-search .btn{border-radius:99px;width:46px;height:46px;padding:0;justify-content:center}
.cp-search .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- vignettes de vitrage ---------- */
.vitrage-lab svg,.tile-lab svg{background:var(--blue);color:#fff;width:34px;height:34px;padding:8px}
.vitrage img{aspect-ratio:4/3}
@media (min-width:900px){.vitrage img{aspect-ratio:4/3}}
.vitrage::after{background:linear-gradient(180deg,transparent 42%,rgba(7,20,49,.82) 100%)}
.vitrage[aria-current="page"]{box-shadow:0 0 0 3px var(--blue),var(--sh-2)}

/* ---------- avantages : cartes blanches bordées, comme la maquette ---------- */
/* La grille prend autant de colonnes que de cartes. Réglée en dur sur six pour
   l'accueil, elle laissait deux colonnes vides à droite partout où il n'y en a
   que quatre ou cinq, et compressait le texte en ruban. À quatre cartes, deux
   colonnes en largeur moyenne plutôt que trois : pas de carte seule sur sa ligne. */
.avantages{gap:1rem}
@media (min-width:640px){
  .avantages{grid-template-columns:repeat(3,1fr)}
  .avantages.n4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .avantages.n4{grid-template-columns:repeat(4,1fr)}
  .avantages.n5{grid-template-columns:repeat(5,1fr)}
  .avantages.n6{grid-template-columns:repeat(6,1fr)}
}
.avantage{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.35rem 1.1rem;gap:.7rem;text-align:left;align-content:start;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.avantage:hover{border-color:var(--blue);box-shadow:var(--sh-1)}
.av-ico{background:var(--c1);color:var(--jaune);width:44px;height:44px;
  border-radius:var(--r-ctl);place-items:center}
.av-ico svg{width:22px;height:22px}
.avantage h3{font-size:.98rem;letter-spacing:-.015em}
.avantage p{font-size:.86rem;color:var(--muted)}
.situ-ico{color:var(--blue)}
.etape-ico{background:var(--tint);color:var(--blue)}
.eng-ico{background:var(--blue)}
.engagement-fort .eng-ico{background:#fff;color:var(--blue)}
.eng-zero b{color:var(--blue-soft)}

/* ---------- avis clients ---------- */
.avis-tete{display:grid;gap:1.2rem;align-items:end;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
@media (min-width:900px){.avis-tete{grid-template-columns:1fr auto auto;gap:1.6rem}}
.avis-note{display:grid;gap:.15rem;justify-items:end;text-align:right}
.avis-etoiles{color:var(--gold);letter-spacing:.1em;font-size:1.05rem;line-height:1}
.avis-chiffre{font-size:1.32rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.avis-base{font-size:.78rem;color:var(--muted)}
.avis-piste{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:760px){.avis-piste{grid-template-columns:repeat(3,1fr)}}
.avis-carte{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.3rem;display:grid;gap:.7rem;align-content:start}
.avis-haut{display:flex;align-items:center;gap:.75rem}
.avis-ava{flex:none;width:44px;height:44px;border-radius:99px;background:var(--tint);
  display:grid;place-items:center;color:var(--navy-300);border:1px solid var(--line)}
.avis-ava svg{width:22px;height:22px}
.avis-nom{font-weight:700;font-size:.96rem;letter-spacing:-.01em}
.avis-texte{color:var(--muted);font-size:.93rem;line-height:1.6;font-style:italic}
.avis-pied{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.82rem;color:var(--muted)}
.avis-g{flex:none;width:20px;height:20px}
.avis-vide{border:1px dashed var(--line);background:var(--paper)}
.avis-attente{border-style:dashed}
.avis-attente .avis-texte{font-style:normal}
.avis-nav{display:flex;gap:.5rem;justify-content:center;margin-top:1.4rem}
.avis-nav button{width:40px;height:40px;border:1px solid var(--line);border-radius:99px;
  display:grid;place-items:center;color:var(--ink);background:var(--paper)}
.avis-nav button:hover{border-color:var(--blue);color:var(--blue)}
.avis-nav svg{width:18px;height:18px}
.avis-nav .rev{transform:rotate(180deg)}

/* ---------- carte des centres, façon maquette ---------- */
.ct-map .fr-land,.map .fr-land{fill:#C8DAF5;stroke:#8FB4E8;stroke-width:1.4}
.on-navy .ct-map .fr-land,.on-navy .map .fr-land{fill:#20407F;stroke:#4C79C8}
.ct-dot{fill:#fff;stroke:var(--blue);stroke-width:3.5}
.on-navy .ct-dot{fill:#fff;stroke:var(--blue-soft)}
.ct-halo{fill:var(--blue-soft)}
.ct-ville{stroke:var(--navy-2)}
.on-tint .ct-ville,.sec:not(.on-navy) .ct-ville{fill:var(--ink);stroke:#fff}
.fr-dot{fill:#fff;stroke:var(--blue);stroke-width:2}

/* ---------- pied de page clair ---------- */
.ftr{background:var(--paper);color:var(--muted);border-top:1px solid var(--line)}
.ftr-top{border-bottom:1px solid var(--line)}
.ftr h4{color:var(--ink)}
.ftr a{color:var(--muted)}
.ftr a:hover{color:var(--blue)}
.ftr .lockup-txt b{color:var(--ink)}
.ftr .lockup-txt small{color:var(--blue)}
.ftr .mute-on-navy{color:var(--muted)}
.ftr-bot{color:var(--muted)}
.ftr-social{display:flex;gap:.5rem;margin-top:1.2rem}
.ftr-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:99px;
  border:1px solid var(--line);color:var(--ink)}
.ftr-social a:hover{border-color:var(--blue);color:var(--blue)}
.ftr-social svg{width:18px;height:18px}
.ftr-signature{font-style:italic;color:var(--muted)}
.btn-row-c{justify-content:center}
.avis-source{font-weight:700;color:var(--ink)}
.avis-tete .btn{align-self:end}
.sec-head-row .btn-ghost{white-space:nowrap}
[style*="text-align:center"] .kicker{text-align:center}

/* ---------- corrections de contraste après bascule de palette ---------- */
.skip{background:var(--blue);color:#fff}
.btn-primary,.btn-primary:hover,.mnav .btn-primary,.diag-cta{color:#fff}
.diag-choix input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff}
.toggle input:checked + span{border-color:var(--blue);background:var(--tint)}
.ct-chip[data-actif="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.tile-lab svg,.vitrage-lab svg{color:#fff}

/* les chips de villes suivent la surface qui les porte */
.chip{color:var(--ink);border-color:var(--line);background:var(--paper)}
.chip:hover{background:var(--tint);border-color:var(--blue);color:var(--blue)}
.chips-lab{color:var(--muted)}
.on-navy .chip{color:#fff;border-color:rgba(255,255,255,.3);background:transparent}
.on-navy .chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);color:#fff}
.on-navy .chips-lab{color:var(--on-navy-soft)}

/* le marqueur « à renseigner » reste lisible sur les deux fonds */
.todo{color:var(--blue);border-bottom-color:var(--blue)}
.on-navy .todo,.ct-fiche .todo,.note .todo{color:var(--blue-soft);border-bottom-color:var(--blue-soft)}
.on-tint .todo,.form-card .todo,.avis-carte .todo{color:var(--blue);border-bottom-color:var(--blue)}

/* Étoiles : le jaune de la charte ne porte jamais de texte sur fond clair
   (1,19:1 sur blanc). Cet ambre garde la teinte à 36 deg et passe 4,5:1, le
   seuil AA du texte courant. Les étoiles sont déjà en aria-hidden et la note
   chiffrée les double juste à côté, mais un ratio qui passe sans discuter
   coûte six points de clarté et évite la discussion. */
.avis-etoiles{color:#A96604}


/* ---------- carte : départements, façon maquette ---------- */
.fr-map,.ct-map{width:100%;height:auto;max-height:560px;display:block}
.fr-dep{fill:#C8DAF5;stroke:var(--c2);stroke-width:.6;stroke-linejoin:round;
  transition:fill .2s var(--ease)}
.on-navy .fr-dep{fill:#C8DAF5;stroke:var(--c2)}
.ct-pin{fill:#fff;stroke:var(--c2);stroke-width:2;
  transition:transform .18s var(--ease),fill .18s var(--ease)}
.ct-pin-dot{fill:var(--c2);transition:fill .18s var(--ease)}
.ct-pt{cursor:pointer;transform-box:fill-box;transform-origin:center bottom}
.ct-pt:hover .ct-pin{stroke:var(--c3)}
.ct-pt[data-actif="true"] .ct-pin{fill:var(--jaune);stroke:var(--c1)}
.ct-pt[data-actif="true"] .ct-pin-dot{fill:var(--c1)}
.ct-pt[data-actif="true"]{filter:drop-shadow(0 4px 10px rgba(var(--c1-rgb),.5))}
.ct-pt:focus-visible{outline:none}
.ct-pt:focus-visible .ct-pin{stroke:var(--ink);stroke-width:3.5}
.ct-ville,.ct-halo,.ct-dot,.fr-land,.fr-dot{display:none}

/* ---------- carte à droite, panneau à gauche, comme la maquette ---------- */
@media (min-width:920px){
  .ct-wrap{grid-template-columns:.85fr 1.15fr;align-items:center}
}
.ct-carte{position:relative}
.ct-panneau{align-content:center}
@media (min-width:1080px){
  /* La fiche est posée en haut à droite de la carte. Son bord bas doit rester
     au-dessus de l'épingle la plus haute de la moitié droite, sinon elle
     intercepte le clic : c'était le cas de Marseille. */
  .ct-fiches{position:absolute;right:0;top:2%;width:min(288px,42%);z-index:2}
  .ct-fiche{box-shadow:var(--sh-2)}
  /* La carte se retire assez à gauche pour qu'aucune épingle ne passe sous la
     fiche, quelle que soit la hauteur de son contenu. */
  .ct-map{padding-right:27%}
}
.chip[data-actif="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.on-navy .chip[data-actif="true"]{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- fiches d'information : libellé puis valeur ---------- */
.infos{display:grid;gap:.95rem}
.infos li{display:grid;grid-template-columns:auto 1fr;gap:.2rem .75rem;align-items:start}
.infos li > svg{width:20px;height:20px;color:var(--blue);grid-row:span 2;margin-top:.15rem}
.infos li > span{display:grid;gap:.12rem;min-width:0}
.infos b{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.infos span > *:not(b){font-size:.98rem;line-height:1.45}
.on-navy .infos b{color:var(--on-navy-soft)}
.on-navy .infos li > svg{color:var(--blue-soft)}
.infos-l li > span{gap:.15rem}
.infos-l span > *:not(b){font-size:1.02rem}

/* valeur pas encore fournie : lisible, jamais confondue avec un lien */
.a-venir{
  display:inline-block;justify-self:start;width:fit-content;
  font-size:.92rem;font-style:italic;color:var(--muted);
  border-bottom:1px dashed var(--line);padding-bottom:.05rem;
}
.on-navy .a-venir{color:var(--on-navy-soft);border-bottom-color:rgba(255,255,255,.28)}


/* ---------- logo fourni le 2026-09-08 : le nom est dans l'image ---------- */
.lockup{display:block}
.lockup img{height:62px;width:auto;display:block}
.lockup-txt{display:none}
.hdr-in{min-height:80px}
.ftr .lockup img{height:88px}
.ftr .lockup{margin-bottom:1rem}
@media (max-width:640px){.lockup img{height:50px}.hdr-in{min-height:70px}}

/* =========================================================================
   Notes de jaune, reprises du logo.
   Règle unique : #F8F149 ne fait que 1,19:1 sur blanc, il ne porte donc
   jamais de texte sur fond clair. Il n'apparaît qu'en aplat sous du marine,
   ou en trait et en texte sur les surfaces sombres, où il monte à 14,5:1.
   ========================================================================= */

/* 1. surtitres des sections sombres */
.on-navy .kicker,.hero .kicker,.diag .kicker{color:var(--jaune)}
.on-navy .kicker::before,.hero .kicker::before,.diag .kicker::before{background:var(--jaune)}

/* 2. pictogrammes du bandeau de promesses */
.promise svg{color:var(--jaune)}

/* 3. flèche ronde des vignettes de vitrage : aplat jaune, glyphe marine */
.vitrage-lab svg,.tile-lab svg{background:var(--jaune);color:var(--navy)}

/* 4. les deux zéros de l'engagement, sur carte marine */
.eng-zero b{color:var(--jaune)}

/* 5. épingle active de la carte */
.ct-pt[data-actif="true"] .ct-pin-dot{fill:var(--jaune)}
.ct-pt[data-actif="true"] .ct-pin{stroke:var(--navy)}

/* 6. anneau de focus sur fond sombre : le jaune est le plus visible */
.on-navy :focus-visible,.hero :focus-visible,.diag :focus-visible{outline-color:var(--jaune)}
.ct-pt:focus-visible .ct-pin{stroke:var(--jaune);stroke-width:4}

/* 7. filet de la zone de vision du diagnostic */
.diag-verdict[data-verdict="reparable"] .diag-raisons li::before{background:var(--jaune)}

/* ============================================================
   Direction artistique, passe du 2026-09-08
   Un seul systeme de pastille, une seule langue de carte,
   et une rupture de grille assumee sur la rangee de vitrages.
   ============================================================ */

/* 1. Pastilles d'icone : un seul traitement sur toute la page.
      Aplat #040c11, glyphe jaune. Inverse sur les surfaces sombres. */
.av-ico,.eng-ico,.etape-ico{
  display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--r-ctl);
  background:var(--c1);color:var(--jaune);
}
.av-ico svg,.eng-ico svg,.etape-ico svg{width:22px;height:22px}
.engagement-fort .eng-ico,.on-navy .etape-ico,.on-navy .eng-ico,.on-navy .av-ico{
  background:var(--jaune);color:var(--c1);
}
.situ-ico{color:var(--c3)}

/* 2. Cartes : engagements et avantages parlent la meme langue.
      Filet de 1 px, meme rayon, meme reaction au survol. */
.engagement{
  border-width:1px;
  background:var(--paper);
  align-content:start;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.engagement:hover{border-color:var(--c3);box-shadow:var(--sh-1)}
.engagement-fort,.engagement-fort:hover{
  background:var(--c2);border-color:var(--c2);box-shadow:none;
}
@media (min-width:900px){
  .engagements{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .engagement{height:100%}
}

/* 3. Rupture de grille : la rangee de vitrages traverse l'ecran.
      C'est le seul endroit de la page qui sort du gabarit centre. */
.bande-vitrages{margin-top:clamp(1.6rem,3vw,2.4rem)}
.bande-vitrages .vitrages{gap:0}
.bande-vitrages .vitrage{border-radius:0}
.bande-vitrages .vitrage img{aspect-ratio:1/1}
@media (min-width:1060px){
  .bande-vitrages .vitrage img{aspect-ratio:4/5}
}

/* 4. La carte a maintenant sa propre plaque claire : sur le blanc de la
      section, les epingles blanches n'avaient plus d'assise. */
.sec:not(.on-navy):not(.on-tint) .ct-map{
  background:var(--tint);
  border-radius:var(--r-card);
  padding:clamp(.9rem,2vw,1.8rem);
}

/* 5. Cinq vignettes dans une grille a deux colonnes laissent une orpheline
      sur la derniere ligne : elle prend toute la largeur. */
@media (max-width:759px){
  .bande-vitrages .vitrage:last-child{grid-column:1/-1}
  .bande-vitrages .vitrage:last-child img{aspect-ratio:16/9}
}

/* ============================================================
   Ruptures de composition. La page etait une pile de bandes
   centrees ; ces trois gestes lui donnent du relief sans
   toucher a la palette.
   ============================================================ */

/* Rupture 2 : le panneau sombre des engagements fuit vers le bord gauche.
   Peint par un pseudo-element, donc aucun risque de debordement lateral. */
@media (min-width:1100px){
  .engagements{grid-template-columns:1.3fr 1fr 1fr}
  .engagement-fort{
    position:relative;
    border-radius:0 var(--r-card) var(--r-card) 0;
  }
  .engagement-fort::before{
    content:"";position:absolute;top:0;bottom:0;right:100%;width:50vw;
    background:var(--c2);
  }
}

/* Rupture 3 : changement d'echelle. Le schema ADAS passe du timbre-poste
   au plein format et occupe toute la hauteur de la bande jaune. */
@media (min-width:1060px){
  .sec-adas .wrap{align-items:stretch;grid-template-columns:.92fr 1.08fr}
  .sec-adas .row-art{
    align-self:stretch;display:grid;place-items:stretch;
    padding:clamp(1.6rem,4vw,3.2rem);
    box-shadow:0 26px 50px rgba(var(--c1-rgb),.14);
  }
  .sec-adas .row-art svg{width:100%;height:100%;max-width:none}
}

/* ============================================================
   Le jaune devient la couleur d'action, et rien d'autre.
   Un seul bouton plein sur la page, toujours jaune, toujours
   avec du #040c11 dessus : 17:1, le meilleur contraste du site.
   Sur les bandes jaunes il s'inverse pour rester visible.
   ============================================================ */
.btn-primary,.btn-primary:hover,.mnav .btn-primary,.diag-cta{
  background:var(--jaune);color:var(--c1);
  box-shadow:0 6px 18px rgba(var(--jaune-rgb),.28);
}
.btn-primary:hover,.diag-cta:hover{
  background:#fdf85e;
  box-shadow:0 8px 22px rgba(var(--jaune-rgb),.42);
}
.btn-primary svg,.diag-cta svg{color:var(--c1)}

/* sur un aplat jaune, le bouton plein s'inverse */
.on-jaune .btn-primary,.on-jaune .btn-primary:hover{
  background:var(--c1);color:var(--jaune);box-shadow:none;
}
.on-jaune .btn-primary svg{color:var(--jaune)}

/* Message de secours quand l'envoi en ligne n'est pas encore branche :
   il doit rattraper le contact, pas s'excuser en petit gris. */
.form-secours{
  margin-top:.9rem;padding:.85rem 1rem;
  background:var(--jaune);color:var(--c1);
  border-radius:var(--r-card);font-size:.95rem;line-height:1.45;
}
.form-secours a{color:var(--c1);text-underline-offset:3px}
.on-navy .form-secours,.on-jaune .form-secours{background:var(--c1);color:var(--jaune)}
.on-navy .form-secours a,.on-jaune .form-secours a{color:var(--jaune)}

/* ============================================================
   Barre d'appel fixe sur mobile. Un pare-brise casse est une
   urgence traitee au telephone, depuis un telephone : l'appel
   ne doit jamais etre a plus d'un pouce.
   ============================================================ */
.barre-mobile{display:none}
@media (max-width:899px){
  .barre-mobile{
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    display:grid;grid-template-columns:1fr 1fr;gap:.55rem;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.96);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(var(--c1-rgb),.10);
  }
  .barre-mobile[hidden]{display:none}
  .barre-mobile .btn{width:100%;padding:.82rem .9rem;font-size:.95rem}
  .barre-mobile .btn svg{width:19px;height:19px}
  body{padding-bottom:5.4rem}
}

/* Titre de niveau 2 ou 4 qui doit garder l'apparence d'un h3 : la hierarchie
   des titres suit la structure du document, pas la taille du texte. */
.t3{font-size:1.22rem;letter-spacing:-.022em;font-weight:700;line-height:1.22}

/* Piege a robots : invisible et hors du parcours clavier, mais pas
   display:none, que certains robots savent detecter et ignorer. */
.piege{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;opacity:0!important;pointer-events:none}

/* Confirmation qui remplace le formulaire apres un envoi reussi. */
.form-succes{
  padding:clamp(1.4rem,3vw,2rem);border-radius:var(--r-card);
  background:var(--jaune);color:var(--c1);outline:none;
}
.form-succes h3{margin-bottom:.4rem}
.form-succes p{color:rgba(var(--c1-rgb),.8)}