/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --rouge:#E2001A;
  --rouge-fonce:#B00014;
  --rouge-pale:#FFF2F3;
  --noir:#0E1013;
  --anthracite:#1C2126;
  --encre-2:#39424C;
  --gris:#657080;
  --gris-clair:#F4F5F7;
  --creme:#FAF9F7;
  --bord:#E3E5E9;
  --bord-2:#CFD4DA;
  --vert:#128A46;

  /* échelle typographique — comble le trou h2 → h3 */
  --t-h1:clamp(38px,5vw,64px);
  --t-h2:clamp(28px,3.2vw,40px);
  --t-h3:clamp(21px,2.1vw,26px);
  --t-h4:19px;
  --t-lead:19px;
  --t-base:16px;
  --t-sm:14.5px;
  --t-xs:12.5px;

  --rayon:6px;
  --rayon-l:12px;
  --max:1180px;
  --e:cubic-bezier(.22,.61,.36,1);
  --ombre:0 1px 2px rgba(14,16,19,.04),0 12px 32px rgba(14,16,19,.06);
  --ombre-h:0 2px 8px rgba(14,16,19,.06),0 26px 58px rgba(14,16,19,.12);
  --h-header:88px;

  /* Polices auto-hébergées (next/font) */
  --police-titre:var(--police-titre-src),system-ui,-apple-system,sans-serif;
  --police-texte:var(--police-texte-src),system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--h-header) + 22px)}
body{
  font-family:var(--police-texte);font-size:var(--t-base);
  color:var(--encre-2);background:#fff;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--police-titre);font-weight:900;line-height:1.08;letter-spacing:-.022em;color:var(--noir)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);margin-bottom:16px}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4);font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
button{font-family:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--rouge);color:#fff}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:3px}
.saut{position:absolute;left:-9999px;top:0;z-index:200;background:var(--rouge);color:#fff;padding:12px 20px;font-weight:600}
.saut:focus{left:0}

.chevrons{height:14px;background:repeating-linear-gradient(115deg,var(--rouge) 0 26px,#F5F5F5 26px 52px)}
.chevrons--fin{height:7px}

.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--e),transform .7s var(--e)}
.rv.vu{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   2. BOUTONS — le rouge est réservé à l'action
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-family:var(--police-titre);font-weight:700;font-size:var(--t-sm);
  padding:15px 27px;border-radius:var(--rayon);border:2px solid transparent;
  transition:all .18s var(--e);cursor:pointer;white-space:nowrap;
}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.5;fill:none;flex:none;transition:transform .18s var(--e)}
.btn:hover svg{transform:translateX(3px)}
.btn-rouge{background:var(--rouge);color:#fff;box-shadow:0 6px 20px rgba(226,0,26,.24)}
.btn-rouge:hover{background:var(--rouge-fonce);transform:translateY(-2px);box-shadow:0 10px 28px rgba(226,0,26,.34)}
.btn-noir{background:var(--noir);color:#fff}
.btn-noir:hover{background:#000;transform:translateY(-2px)}
.btn-ligne{border-color:var(--bord-2);color:var(--noir);background:#fff}
.btn-ligne:hover{border-color:var(--noir);background:var(--noir);color:#fff}
.btn-ligne-blanc{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ligne-blanc:hover{background:#fff;color:var(--noir);border-color:#fff}
.btn-sm{padding:11px 18px;font-size:13.5px}

/* ============================================================
   3. BARRE UTILITAIRE
   ============================================================ */
.topbar{background:var(--noir);color:#C2C8CF;font-size:13.5px}
.topbar .wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;height:42px}
.topbar b{color:#fff;font-weight:600}
.topbar .g{display:flex;gap:26px;align-items:center}
.topbar svg{width:15px;height:15px;flex:none;stroke:var(--rouge);stroke-width:2;fill:none}
.topbar a,.topbar span{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.topbar a:hover{color:#fff}
.topbar .pastille{background:rgba(226,0,26,.2);border:1px solid rgba(226,0,26,.45);color:#fff;padding:3px 11px;border-radius:100px;font-size:12px;font-weight:600}
.topbar .socios{display:inline-flex;gap:6px;margin-left:4px}
.topbar .socios a{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;transition:.18s}
.topbar .socios a:hover{background:var(--rouge)}
.topbar .socios svg{width:14px;height:14px;fill:#C2C8CF;stroke:none}
.topbar .socios a:hover svg{fill:#fff}
@media(max-width:980px){.topbar .g--r{display:none}.topbar .wrap{justify-content:center;gap:18px}}
@media(max-width:520px){.topbar .g span:last-child{display:none}}

/* ============================================================
   4. HEADER — une seule ligne, toujours
   ============================================================ */
header{
  position:sticky;top:0;z-index:80;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bord);transition:box-shadow .3s var(--e),background .3s var(--e);
}
header.compact{background:rgba(255,255,255,.98);box-shadow:0 4px 22px rgba(14,16,19,.08)}
.nav{display:flex;align-items:center;height:var(--h-header);gap:24px;flex-wrap:nowrap}
.logo img{height:56px;width:auto;transition:height .3s var(--e)}
header.compact .logo img{height:48px}
nav.menu{display:flex;gap:24px;margin-left:auto;flex-wrap:nowrap}
nav.menu a{
  font-size:var(--t-sm);font-weight:600;color:var(--encre-2);padding:8px 0;white-space:nowrap;
  border-bottom:2px solid transparent;transition:.18s;
}
nav.menu a:hover,nav.menu a.actif{color:var(--noir);border-color:var(--rouge)}
.nav-tel{display:flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--police-titre);font-weight:700;font-size:16px;color:var(--noir)}
.nav-tel svg{width:16px;height:16px;stroke:var(--rouge);stroke-width:2.2;fill:none}
.burger{display:none;background:none;border:0;cursor:pointer;padding:9px;margin-left:auto;z-index:95}
.burger i{display:block;width:26px;height:2.5px;background:var(--noir);margin:5px 0;border-radius:2px;transition:.28s var(--e)}
.burger.ouvert i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.ouvert i:nth-child(2){opacity:0}
.burger.ouvert i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(max-width:1240px){.nav-tel{display:none}}
@media(max-width:1080px){nav.menu,.nav>.btn{display:none}.burger{display:block}}

.tiroir{
  position:fixed;inset:0;z-index:79;background:#fff;padding:120px 26px 40px;
  transform:translateY(-100%);transition:transform .38s var(--e),visibility .38s;overflow-y:auto;visibility:hidden;
}
.tiroir.ouvert{transform:none;visibility:visible}
.tiroir a.lien{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--police-titre);font-weight:900;font-size:26px;color:var(--noir);
  padding:16px 0;border-bottom:1px solid var(--bord);
}
.tiroir a.lien:hover{color:var(--rouge)}
.tiroir a.lien svg{width:20px;height:20px;stroke:var(--bord-2);stroke-width:2.5;fill:none}
.tiroir .btn{margin-top:26px;width:100%}
.tiroir .tel-mob{margin-top:14px;text-align:center;font-size:15px;color:var(--gris)}
.tiroir .reseaux svg{fill:var(--gris)}
.tiroir .reseaux a:hover svg{fill:#fff}

/* ============================================================
   5. HERO — un seul point focal : le message
   ============================================================ */
.hero{position:relative;background:var(--noir);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(880px 520px at 78% 18%,rgba(226,0,26,.28),transparent 62%),linear-gradient(180deg,#13171B 0%,#0E1013 100%)}
.hero-route{position:absolute;right:-8%;bottom:-14%;width:64%;opacity:.10;pointer-events:none}
.hero .wrap{position:relative;padding:80px 24px 84px;display:grid;grid-template-columns:1.18fr .82fr;gap:64px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;font-family:var(--police-titre);font-weight:700;
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  padding:9px 16px;border-radius:100px;margin-bottom:26px;
}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--rouge);display:block;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{color:#fff;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--rouge)}
.hero .lead{font-size:var(--t-lead);color:#B5BCC5;max-width:580px;margin-bottom:30px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin-bottom:34px}
.hero-cta .apres{font-size:13.5px;color:#8E96A0}
.hero-marks{display:flex;flex-wrap:wrap;padding-top:26px;border-top:1px solid rgba(255,255,255,.13)}
.mark{padding-right:28px;margin-right:28px;border-right:1px solid rgba(255,255,255,.13)}
.mark:last-child{border-right:0;margin-right:0;padding-right:0}
.mark strong{display:block;font-family:var(--police-titre);font-size:26px;font-weight:900;color:#fff;line-height:1.1;margin-bottom:2px}
.mark span{font-size:12.5px;color:#98A0AA}
@media(max-width:560px){.mark{border-right:0;padding-right:0;margin-right:0;min-width:46%;margin-bottom:16px}}

.hero-panneau{
  border:1px solid rgba(255,255,255,.16);border-radius:var(--rayon-l);
  background:rgba(255,255,255,.045);padding:30px 28px;position:relative;overflow:hidden;
}
.hero-panneau:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(115deg,var(--rouge) 0 16px,#F5F5F5 16px 32px)}
.hero-panneau h2{font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:6px 0 20px;font-weight:700}
.hero-panneau ul{list-style:none}
.hero-panneau li{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px;color:#C6CCD3}
.hero-panneau li:last-child{border-bottom:0;padding-bottom:0}
.hero-panneau li svg{width:19px;height:19px;stroke:var(--rouge);stroke-width:2.4;fill:none;flex:none;margin-top:2px}
.hero-panneau li b{color:#fff;font-weight:600}
@media(max-width:980px){.hero .wrap{grid-template-columns:1fr;gap:40px;padding:56px 24px 64px}.hero-route{display:none}}

/* ============================================================
   6. BANDEAU DE RÉASSURANCE
   ============================================================ */
.confiance{background:var(--gris-clair);border-bottom:1px solid var(--bord)}
.confiance ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none}
.confiance li{
  display:flex;align-items:center;gap:12px;font-size:var(--t-sm);font-weight:600;color:var(--anthracite);
  padding:24px 22px;border-right:1px solid var(--bord);
}
.confiance li:last-child{border-right:0}
.confiance li svg{width:22px;height:22px;stroke:var(--rouge);stroke-width:1.9;fill:none;flex:none}
@media(max-width:900px){.confiance ul{grid-template-columns:1fr 1fr}.confiance li{border-bottom:1px solid var(--bord)}}
@media(max-width:520px){.confiance ul{grid-template-columns:1fr}.confiance li{border-right:0}}

/* ============================================================
   7. SECTIONS
   ============================================================ */
section{padding:96px 0}
.fond-creme{background:var(--creme)}
.fond-clair{background:var(--gris-clair)}
.sec-head{max-width:740px;margin-bottom:52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{
  display:inline-block;font-family:var(--police-titre);font-weight:700;font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:16px;
  position:relative;padding-left:34px;
}
.kicker:before{content:"";position:absolute;left:0;top:50%;width:24px;height:3px;background:var(--rouge)}
.sec-head.center .kicker{padding-left:0}
.sec-head.center .kicker:before{display:none}
.kicker--sombre{color:#9AA2AC}
.sec-head p{font-size:17.5px;color:var(--gris)}

/* ============================================================
   8. TYPOLOGIES — bande secondaire, poids visuel réduit
   ============================================================ */
.typos-bande{background:var(--creme);border-bottom:1px solid var(--bord);padding:34px 0}
.typos-tt{font-family:var(--police-titre);font-weight:700;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:20px;text-align:center}
.typos{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.typo{display:flex;align-items:center;gap:11px;padding:12px 10px;border-radius:var(--rayon);transition:.2s var(--e)}
.typo:hover{background:#fff;box-shadow:var(--ombre)}
.typo svg{width:22px;height:22px;stroke:var(--rouge);stroke-width:1.7;fill:none;flex:none}
.typo b{font-family:var(--police-texte);font-size:13.5px;font-weight:600;color:var(--anthracite);line-height:1.3}
@media(max-width:1000px){.typos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.typos{grid-template-columns:1fr 1fr}}

/* ============================================================
   9. PRODUITS
   ============================================================ */
.grille-produits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.produit{
  border:1px solid var(--bord);border-radius:var(--rayon-l);background:#fff;
  transition:.22s var(--e);position:relative;overflow:hidden;display:flex;flex-direction:column;
}
.produit:before{content:"";position:absolute;top:0;left:0;width:0;height:4px;background:var(--rouge);transition:width .32s var(--e);z-index:4}
.produit:hover{border-color:var(--bord-2);transform:translateY(-5px);box-shadow:var(--ombre-h)}
.produit:hover:before{width:100%}
.produit .photo{
  height:194px;border-bottom:1px solid var(--bord);display:grid;place-items:center;
  overflow:hidden;position:relative;background:linear-gradient(150deg,#FBFCFD 0%,#E7EBEF 100%);
}
.produit .photo .filigrane{position:absolute;inset:0;opacity:.05;background:repeating-linear-gradient(115deg,var(--noir) 0 13px,transparent 13px 32px)}
.produit .photo .lisere{position:absolute;left:0;right:0;bottom:0;height:5px;opacity:0;transition:opacity .3s var(--e);background:repeating-linear-gradient(115deg,var(--rouge) 0 14px,#fff 14px 28px)}
.produit:hover .photo .lisere{opacity:1}
.produit .etiquette{
  position:absolute;top:14px;left:14px;z-index:3;background:rgba(255,255,255,.95);
  border:1px solid var(--bord);border-radius:100px;padding:5px 12px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);
}
.produit .disque{
  position:relative;z-index:2;width:148px;height:148px;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 12px 32px rgba(14,16,19,.15);
  transition:transform .32s var(--e),box-shadow .32s var(--e);
}
.produit:hover .disque{transform:scale(1.05) translateY(-3px);box-shadow:0 18px 44px rgba(14,16,19,.2)}
.ico-gamme{width:106px;height:106px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ico-gamme .sol{stroke:#C3C9D0;stroke-width:3}
.ico-gamme .filet{stroke:#C3C9D0;stroke-width:1.7}
.ico-gamme .trait{stroke:var(--noir);stroke-width:3.4}
.ico-gamme .trait-fin{stroke:var(--noir);stroke-width:2.6}
.ico-gamme .rouge{stroke:var(--rouge);stroke-width:4.6}
.ico-gamme .blanc{fill:#fff}
.ico-gamme .n-plein{fill:var(--noir)}
.ico-gamme .r-plein{fill:var(--rouge)}
.produit .corps{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.produit h3{font-size:20px;margin-bottom:9px}
.produit .corps>p{font-size:var(--t-sm);color:var(--gris);margin-bottom:16px}
.produit ul{list-style:none;font-size:14px;color:var(--anthracite);margin-bottom:20px}
.produit li{padding:7px 0 7px 20px;position:relative;border-top:1px solid var(--gris-clair)}
.produit li:before{content:"";position:absolute;left:0;top:15px;width:8px;height:2px;background:var(--rouge)}
.produit .btn{margin-top:auto;width:100%}
.produit--sur-mesure{background:var(--noir);border-color:var(--noir)}
.produit--sur-mesure h3{color:#fff}
.produit--sur-mesure p{color:#9AA2AC!important}
.produit--sur-mesure .corps{padding-top:32px}
.produit--sur-mesure .ico{width:54px;height:54px;border-radius:10px;background:var(--rouge);display:grid;place-items:center;margin-bottom:20px}
.produit--sur-mesure .ico svg{width:26px;height:26px;stroke:#fff;stroke-width:1.8;fill:none}
@media(max-width:980px){.grille-produits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.grille-produits{grid-template-columns:1fr}}

/* ============================================================
   10. RÉFÉRENCES
   ============================================================ */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ref{background:#fff;border:1px solid var(--bord);border-radius:var(--rayon-l);padding:28px 26px;transition:.22s var(--e)}
.ref:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.ref .lieu{font-family:var(--police-titre);font-weight:900;font-size:var(--t-h4);color:var(--noir);margin-bottom:6px;display:flex;align-items:center;gap:9px}
.ref .lieu svg{width:17px;height:17px;stroke:var(--rouge);stroke-width:2.2;fill:none;flex:none}
.ref .quoi{font-size:var(--t-sm);color:var(--encre-2);margin-bottom:14px}
.ref .meta{display:flex;gap:8px;flex-wrap:wrap}
.ref .meta i{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--gris);border:1px solid var(--bord);padding:4px 10px;border-radius:100px}
.a-remplir{border-style:dashed;border-color:var(--bord-2);background:#FCFCFD}
.a-remplir .lieu,.a-remplir .quoi{color:var(--gris)}
@media(max-width:900px){.refs{grid-template-columns:1fr}}

/* ============================================================
   11. INTERLOCUTEUR
   ============================================================ */
.interlocuteur{background:#fff;border:1px solid var(--bord);border-radius:var(--rayon-l);overflow:hidden;display:grid;grid-template-columns:auto 1fr;box-shadow:var(--ombre)}
.interlocuteur .portrait{width:280px;background:linear-gradient(160deg,#F2F4F6,#E2E6EA);position:relative;display:grid;place-items:center;border-right:1px solid var(--bord)}
.interlocuteur .portrait:after{content:"";position:absolute;left:0;bottom:0;right:0;height:7px;background:repeating-linear-gradient(115deg,var(--rouge) 0 16px,#fff 16px 32px)}
.interlocuteur .portrait img{width:100%;height:100%;object-fit:cover}
.initiales{width:118px;height:118px;border-radius:50%;background:var(--noir);color:#fff;display:grid;place-items:center;font-family:var(--police-titre);font-weight:900;font-size:38px;letter-spacing:-.02em}
.interlocuteur .texte{padding:38px 40px}
.interlocuteur blockquote{font-family:var(--police-titre);font-weight:700;font-size:var(--t-h3);line-height:1.3;color:var(--noir);margin-bottom:20px;letter-spacing:-.02em}
.interlocuteur .qui{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.interlocuteur .qui b{font-family:var(--police-titre);font-size:16px;color:var(--noir)}
.interlocuteur .qui span{font-size:var(--t-sm);color:var(--gris)}
.interlocuteur .actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:820px){
  .interlocuteur{grid-template-columns:1fr}
  .interlocuteur .portrait{width:100%;height:220px;border-right:0;border-bottom:1px solid var(--bord)}
  .interlocuteur .texte{padding:30px 26px}
}

/* ============================================================
   12. MÉTHODE
   ============================================================ */
.methode{background:var(--noir);color:#fff}
.methode h2,.methode h3{color:#fff}
.methode .sec-head p{color:#9AA2AC}
.etapes{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.14)}
.etape{padding:36px 28px 32px;border-right:1px solid rgba(255,255,255,.14);position:relative}
.etape:last-child{border-right:0}
.etape:before{content:"";position:absolute;top:-1px;left:0;width:0;height:3px;background:var(--rouge);transition:width .6s var(--e)}
.etape.vu:before{width:100%}
.etape .num{font-family:var(--police-titre);font-weight:900;font-size:13.5px;color:var(--rouge);letter-spacing:.14em;margin-bottom:14px}
.etape h3{font-size:19.5px;margin-bottom:10px}
.etape p{font-size:var(--t-sm);color:#9AA2AC}
@media(max-width:900px){.etapes{grid-template-columns:1fr 1fr}.etape{border-bottom:1px solid rgba(255,255,255,.14)}}
@media(max-width:560px){.etapes{grid-template-columns:1fr}.etape{border-right:0}}

/* ============================================================
   13. DUO / ZONE
   ============================================================ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:44px}}
.atouts{list-style:none;margin-top:28px}
.atouts li{display:flex;gap:17px;padding:20px 0;border-bottom:1px solid var(--bord)}
.atouts li:first-child{border-top:1px solid var(--bord)}
.atouts .chk{width:30px;height:30px;border-radius:50%;background:var(--rouge);display:grid;place-items:center;flex:none;margin-top:2px}
.atouts .chk svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none}
.atouts h4{margin-bottom:4px}
.atouts p{font-size:var(--t-sm);color:var(--gris)}
.visu-zone{background:#fff;border:1px solid var(--bord);border-radius:var(--rayon-l);overflow:hidden}
.visu-zone .bandeau{height:10px;background:repeating-linear-gradient(115deg,var(--rouge) 0 20px,#fff 20px 40px)}
.visu-zone .in{padding:32px 34px 34px}
.visu-zone h3{font-size:20px;margin-bottom:8px}
.visu-zone>.in>p{font-size:var(--t-sm);color:var(--gris);margin-bottom:22px}
.deps{display:grid;grid-template-columns:1fr 1fr;gap:9px;list-style:none}
.deps li{background:var(--gris-clair);border:1px solid var(--bord);border-radius:var(--rayon);padding:11px 13px;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center;color:var(--noir)}
.deps li b{font-family:var(--police-titre);color:var(--rouge);font-size:13px}

/* ============================================================
   14. MARCHÉS PUBLICS
   ============================================================ */
.marches{background:var(--anthracite);color:#C2C8CF;border-radius:var(--rayon-l);padding:52px 48px;position:relative;overflow:hidden}
.marches:before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:repeating-linear-gradient(115deg,var(--rouge) 0 18px,#F5F5F5 18px 36px)}
.marches h2,.marches h3{color:#fff}
.marches .duo{gap:52px;align-items:start}
.pieces{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pieces li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--rayon);padding:13px 15px;font-size:13.8px;font-weight:600;color:#fff;display:flex;gap:10px;align-items:flex-start;transition:.2s}
.pieces li:hover{background:rgba(226,0,26,.14);border-color:rgba(226,0,26,.45)}
.pieces svg{width:15px;height:15px;stroke:var(--rouge);stroke-width:2.8;fill:none;flex:none;margin-top:3px}
.paiement{margin-top:22px;padding:18px 20px;background:rgba(255,255,255,.05);border-left:3px solid var(--rouge);border-radius:0 var(--rayon) var(--rayon) 0;font-size:14.2px}
.paiement b{color:#fff}
@media(max-width:900px){.marches{padding:36px 26px}.pieces{grid-template-columns:1fr}}

/* ============================================================
   15. CATALOGUE
   ============================================================ */
.catalogue{background:var(--anthracite);color:#fff}
.catalogue h2{color:#fff}
.catalogue p{color:#A9B1BA;font-size:17px}
.cat-reelle{max-width:330px;margin:0 auto;border-radius:4px;box-shadow:0 34px 76px rgba(0,0,0,.5);transition:transform .5s var(--e)}
.cat-reelle:hover{transform:scale(1.03) rotate(-1deg)}

/* ============================================================
   16. FAQ
   ============================================================ */
.faq{max-width:840px;margin:0 auto}
.q{border-bottom:1px solid var(--bord)}
.q summary{list-style:none;cursor:pointer;padding:22px 4px;font-family:var(--police-titre);font-weight:700;font-size:18px;color:var(--noir);display:flex;justify-content:space-between;align-items:center;gap:22px}
.q summary::-webkit-details-marker{display:none}
.q .pm{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--bord-2);flex:none;display:grid;place-items:center;position:relative;transition:.24s var(--e)}
.q .pm:before,.q .pm:after{content:"";position:absolute;background:var(--noir);border-radius:2px;transition:.24s var(--e)}
.q .pm:before{width:11px;height:2px}
.q .pm:after{width:2px;height:11px}
.q[open] .pm{background:var(--rouge);border-color:var(--rouge)}
.q[open] .pm:before{background:#fff}
.q[open] .pm:after{transform:scaleY(0)}
.q .rep{padding:0 52px 22px 4px;font-size:15.8px;color:var(--encre-2)}

/* ============================================================
   17. URGENCE
   ============================================================ */
.urgence{background:var(--rouge);color:#fff;border-radius:var(--rayon-l);padding:36px 42px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.urgence:before{content:"";position:absolute;left:0;top:0;bottom:0;width:11px;background:repeating-linear-gradient(160deg,#fff 0 13px,rgba(255,255,255,.28) 13px 26px)}
.urgence h2{color:#fff;font-size:var(--t-h3);margin-bottom:7px}
.urgence p{color:rgba(255,255,255,.92);font-size:15.5px;max-width:640px}
.urgence .btn{background:#fff;color:var(--rouge);border-color:#fff;font-size:17px;padding:16px 28px}
.urgence .btn:hover{background:var(--noir);color:#fff;border-color:var(--noir)}
@media(max-width:820px){.urgence{grid-template-columns:1fr;padding:30px 26px 30px 32px}}

/* ============================================================
   18. CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:56px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px}}
.coord{list-style:none}
.coord li{display:flex;gap:17px;padding:20px 0;border-bottom:1px solid var(--bord)}
.coord li:first-child{border-top:1px solid var(--bord)}
.coord .ic{width:44px;height:44px;border-radius:10px;background:var(--gris-clair);display:grid;place-items:center;flex:none}
.coord .ic svg{width:20px;height:20px;stroke:var(--rouge);stroke-width:2;fill:none}
.coord h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--gris);margin-bottom:4px;font-family:var(--police-texte);font-weight:600}
.coord a,.coord p{font-size:16.5px;font-weight:700;font-family:var(--police-titre);color:var(--noir);line-height:1.35}
.coord a:hover{color:var(--rouge)}
.acces{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap}
.reseaux{display:flex;gap:10px}
.reseaux a{width:40px;height:40px;border-radius:9px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:.2s var(--e)}
.reseaux a:hover{background:var(--rouge);border-color:var(--rouge);transform:translateY(-2px)}
.reseaux svg{width:18px;height:18px;fill:#C2C8CF;transition:.2s}
.reseaux a:hover svg{fill:#fff}
.reseaux--clair{margin-top:6px}
.reseaux--clair a{border-color:var(--bord);width:38px;height:38px}
.reseaux--clair svg{fill:var(--gris)}
.reseaux--clair a:hover svg{fill:#fff}

.formulaire{background:var(--creme);border:1px solid var(--bord);border-radius:var(--rayon-l);padding:38px 36px;position:relative;overflow:hidden}
.formulaire:before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:repeating-linear-gradient(115deg,var(--rouge) 0 18px,#fff 18px 36px)}
.formulaire h3{font-size:23px;margin:8px 0 6px}
.formulaire>p{font-size:var(--t-sm);color:var(--gris);margin-bottom:24px}
.champ{margin-bottom:15px}
.champ label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);margin-bottom:7px}
.champ input,.champ select,.champ textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--bord);border-radius:var(--rayon);
  font-family:inherit;font-size:15px;background:#fff;color:var(--noir);transition:.16s var(--e);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(226,0,26,.12)}
.champ input::placeholder,.champ textarea::placeholder{color:#9BA3AC}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.fichier{border:1.5px dashed var(--bord-2);border-radius:var(--rayon);padding:16px;text-align:center;background:#fff;transition:.18s var(--e);cursor:pointer;display:block;position:relative}
.fichier:hover{border-color:var(--rouge);background:var(--rouge-pale)}
.fichier svg{width:22px;height:22px;stroke:var(--rouge);stroke-width:1.9;fill:none;margin:0 auto 8px}
.fichier b{display:block;font-size:14px;color:var(--noir);font-family:var(--police-titre)}
.fichier span{font-size:12.5px;color:var(--gris)}
.fichier input{position:absolute;width:1px;height:1px;opacity:0}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:12.8px;color:var(--gris);margin:16px 0 18px}
.consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--rouge)}
.consent a{text-decoration:underline}
.pot{position:absolute;left:-9999px}
.succes{display:none;background:#E9F7EF;border:1px solid #A9DCC0;border-radius:var(--rayon);padding:22px 24px;text-align:center}
.succes.on{display:block}
.succes svg{width:42px;height:42px;stroke:var(--vert);stroke-width:2.2;fill:none;margin:0 auto 12px}
.succes h3{font-size:19px;color:var(--vert);margin-bottom:6px}
.succes p{font-size:var(--t-sm);color:#2C6B47}

/* ============================================================
   19. FOOTER
   ============================================================ */
footer{background:var(--noir);color:#8C949E;font-size:var(--t-sm)}
.foot-top{padding:60px 0 42px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px}
.foot-top img.logo-f{height:82px;width:auto;margin-bottom:20px}
.foot-top p{max-width:310px}
.foot-top h2{font-family:var(--police-titre);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:17px}
.foot-top ul{list-style:none}
.foot-top li{margin-bottom:9px}
.foot-top a:hover{color:var(--rouge)}
.legal{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:12.8px;line-height:1.9}
.legal .l1{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px}
.legal .mentions{color:#6E767F;margin-top:8px}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}

/* ============================================================
   20. BARRE MOBILE / RETOUR HAUT
   ============================================================ */
.cta-mobile{position:fixed;left:0;right:0;bottom:0;z-index:85;display:none;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--bord);padding:10px 14px;gap:9px;box-shadow:0 -6px 24px rgba(0,0,0,.09)}
.cta-mobile .btn{flex:1;padding:13px 8px;font-size:13.5px}
@media(max-width:700px){.cta-mobile{display:flex}body{padding-bottom:76px}}
.haut{position:fixed;right:20px;bottom:20px;z-index:84;width:46px;height:46px;border-radius:50%;background:var(--noir);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transition:.28s var(--e);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.haut.on{opacity:1;pointer-events:auto}
.haut:hover{background:var(--rouge)}
.haut svg{width:19px;height:19px;stroke:#fff;stroke-width:2.6;fill:none}
@media(max-width:700px){.haut{bottom:88px;right:14px}}

/* ============================================================
   21. IMPRESSION — les collectivités impriment
   ============================================================ */
@media print{
  .topbar,header,.tiroir,.cta-mobile,.haut,.burger,.hero-route,.hero-bg,
  .formulaire form,.succes,.chevrons,.produit .photo,.reseaux,.typos-bande{display:none!important}
  *{background:#fff!important;color:#000!important;box-shadow:none!important}
  body{font-size:11pt;line-height:1.45;padding:0}
  section{padding:14pt 0;page-break-inside:avoid}
  .wrap{max-width:100%;padding:0}
  h1{font-size:22pt}h2{font-size:15pt}h3{font-size:12pt}
  .duo,.contact-grid,.grille-produits,.refs,.etapes,.pieces{display:block}
  .produit,.ref,.etape,.q,.interlocuteur{border:1px solid #999!important;margin-bottom:8pt;page-break-inside:avoid}
  a[href^="http"]::after,a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555!important}
  .rv{opacity:1!important;transform:none!important}
}

/* ============================================================
   22. RENFORCEMENT RESPONSIVE
   Le design d'origine est conservé ; ces règles resserrent les
   marges et les tailles sur petits écrans et suppriment tout
   risque de débordement horizontal.
   ============================================================ */
@media(max-width:1024px){
  section{padding:76px 0}
  .marches{padding:40px 34px}
}
@media(max-width:760px){
  :root{--h-header:76px}
  section{padding:60px 0}
  .wrap{padding:0 20px}
  .sec-head{margin-bottom:38px}
  .sec-head p{font-size:16.5px}
  .hero .wrap{padding:44px 20px 52px}
  .hero .lead{font-size:17px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 100%}
  .hero-cta .apres{width:100%;text-align:center}
  .hero-panneau{padding:24px 22px}
  .logo img{height:46px}
  header.compact .logo img{height:42px}
  .typos-bande{padding:26px 0}
  .produit .corps{padding:22px 22px 24px}
  .produit .photo{height:170px}
  .produit .disque{width:126px;height:126px}
  .ico-gamme{width:90px;height:90px}
  .visu-zone .in{padding:26px 22px 28px}
  .marches{padding:30px 22px}
  .interlocuteur blockquote{font-size:19px}
  .formulaire{padding:28px 22px}
  .q summary{font-size:16.5px;padding:19px 2px;gap:14px}
  .q .rep{padding:0 8px 20px 2px;font-size:15px}
  .urgence{padding:26px 22px 26px 28px}
  .urgence .btn{width:100%}
  .coord li{padding:17px 0}
  .foot-top{padding:44px 0 32px}
  .foot-top img.logo-f{height:64px}
  .cat-reelle{max-width:250px}
  .refs{gap:14px}
  .ref{padding:22px 20px}
}
@media(max-width:420px){
  .wrap{padding:0 16px}
  section{padding:52px 0}
  .deps{grid-template-columns:1fr}
  .hero-marks .mark{min-width:100%}
  .btn{padding:14px 20px;font-size:14px}
  .cta-mobile .btn{font-size:12.5px;padding:13px 6px}
  .interlocuteur .actions .btn{width:100%}
  .legal .l1{flex-direction:column;gap:10px}
}
/* Aucun élément ne peut élargir la page */
html,body{max-width:100%}
img,svg,video,table,pre{max-width:100%}

/* ============================================================
   23. BANDEAU D'ANNONCE / FERMETURE
   ============================================================ */
.annonce{background:#FFF6E8;border-bottom:1px solid #F0DCB8}
.annonce .wrap{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.annonce-pastille{
  flex:none;font-family:var(--police-titre);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#8A5A00;background:#F7E6C6;border:1px solid #E8CE9A;
  padding:5px 11px;border-radius:100px;
}
.annonce p{margin:0;font-size:14.5px;color:#6B4A10;font-weight:500}
@media(max-width:520px){.annonce p{font-size:13.5px}}

/* ============================================================
   24. LISTES DÉROULANTES
   Le rendu natif (macOS et Windows) impose sa propre bordure et
   son chevron, ce qui rompt l'alignement avec les champs texte.
   On neutralise l'apparence système et on redessine la flèche.
   ============================================================ */
.champ select,
select.champ-select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  width:100%;
  padding-right:46px;                 /* place pour la flèche */
  background-color:#fff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23657080' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:15px 15px;
  cursor:pointer;
  line-height:1.3;
  text-overflow:ellipsis;
}
.champ select::-ms-expand{display:none}

/* La flèche passe au rouge quand le champ a le focus */
.champ select:focus,
select.champ-select:focus{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.champ select:hover{border-color:var(--bord-2)}

/* La liste déroulée reste lisible sur les navigateurs qui l'autorisent */
.champ select option{background:#fff;color:var(--noir);padding:8px}

/* Safari applique une hauteur intrinsèque : on la fige comme les champs texte */
@supports (-webkit-touch-callout:none){
  .champ select{min-height:48px}
}

/* Polices (chargées via Google Fonts dans le <head>) */
:root{--police-titre-src:'Archivo';--police-texte-src:'Inter'}