/* =========================================================================
   AMEN 33 — Aquitaine Ménage et Nettoyage
   Site B2B premium · titres en serif, corps en sans, cartes arrondies
   Bleu du logo #0A54A0 · quasi-noir #0F1415 · blanc cassé #FCFCFC
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
[hidden]{display:none!important}
:root{
  --ink:#0F1415;
  --ink-2:#3A4245;
  --ink-3:#697276;
  --ink-4:#9AA2A6;

  --paper:#FCFCFC;
  --soft:#F2F5F7;
  --soft-2:#E9EEF3;
  --white:#FFFFFF;

  --blue:#0A54A0;
  --blue-d:#073C74;
  --blue-l:#2C7BC8;
  --blue-w:#E7F0FA;
  --blue-w2:#F3F8FD;
  --mint:#BFE0F7;

  --line:#E4E8EB;
  --line-2:#D3D9DE;

  --sh-1:0 1px 2px rgba(15,20,21,.04), 0 6px 20px -10px rgba(15,20,21,.12);
  --sh-2:0 2px 6px rgba(15,20,21,.05), 0 24px 50px -24px rgba(15,20,21,.28);
  --sh-3:0 30px 70px -30px rgba(15,20,21,.45);

  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px; --r-f:999px;
  --pad:clamp(18px,4vw,44px);
  --maxw:1800px;          /* largeur maximale du contenu */
  --padx:clamp(20px,3.4vw,64px);   /* marge de bord pour les blocs pleine largeur */
  --sec:clamp(66px,8vw,124px);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px;overflow-x:clip}
body{font-family:var(--sans);font-size:16.5px;line-height:1.65;color:var(--ink-2);
  background:var(--paper);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--blue-w);color:var(--blue-d)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- 3. Typographie ---------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.1;letter-spacing:-.02em}
.t1{font-size:clamp(2.35rem,4.6vw,3.7rem);line-height:1.06}
.t2{font-size:clamp(1.95rem,3.6vw,3rem);line-height:1.08}
.t3{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.15}
.t4{font-size:1.16rem;line-height:1.25}
.lead{font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.66;color:var(--ink-2);max-width:58ch}
.small{font-size:.92rem}
.tiny{font-size:.8rem}
.muted{color:var(--ink-3)}
strong{color:var(--ink);font-weight:600}

.eyebrow{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:.79rem;font-weight:500;color:var(--ink-3);letter-spacing:.005em}
.eyebrow i{font-style:normal;width:3px;height:3px;border-radius:50%;background:var(--ink-4)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:var(--r-f);
  background:var(--blue-w);color:var(--blue-d);font-size:.79rem;font-weight:600;letter-spacing:.01em}
.tag--o{background:transparent;border:1px solid var(--line-2);color:var(--ink-2)}
.tag--d{background:rgba(255,255,255,.1);color:#fff}

.sec{padding-block:var(--sec)}
.s-trust + .sec,.s-trust + .sec--t{padding-top:clamp(26px,3vw,40px)}
.sec--t{padding-block:clamp(48px,6vw,84px)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--padx)}
.wrap--n{max-width:860px}
/* pleine largeur d'écran : en-tête et pied de page vont d'un bord à l'autre,
   le contenu reste dans une largeur de lecture confortable. */
.wrap--full{width:100%;max-width:none;margin-inline:0;padding-inline:var(--padx)}
section{position:relative}
.soft{background:var(--soft)}
.dark{background:var(--ink);color:#C9CFD2}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .lead{color:#AEB6BA}

.shead{max-width:720px;margin-bottom:clamp(32px,4vw,56px)}
.shead .tag{margin-bottom:20px}
.shead .lead{margin-top:18px}
.shead--c{margin-inline:auto;text-align:center}
.shead--c .lead{margin-inline:auto}

/* ---------- 4. Boutons --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-f);background:var(--blue);color:#fff;
  font-size:.95rem;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
  box-shadow:0 6px 18px -8px rgba(10,84,160,.7)}
.btn:hover{background:var(--blue-d);transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(10,84,160,.6)}
.btn svg{width:17px;height:17px;flex:none}
.btn--o{background:var(--white);color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.btn--o:hover{background:var(--soft);border-color:var(--ink-4);color:var(--ink)}
.btn--w{background:#fff;color:var(--ink);box-shadow:none}
.btn--w:hover{background:#EDF1F4;color:var(--ink)}
.btn--gh{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.btn--gh:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.btn--lg{padding:17px 32px;font-size:1rem}
.btn--sm{padding:11px 19px;font-size:.87rem}
.btn--b{width:100%}

.al{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.94rem;color:var(--blue);
  transition:gap .25s var(--ease)}
.al svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.al:hover{gap:12px}

/* ---------- 5. En-tête --------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:800;background:rgba(252,252,252,.86);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.hdr.stuck{border-color:var(--line)}
/* barre du haut : logo collé au bord gauche, bouton de devis collé au bord droit */
.hdr .wrap--full{padding-inline:clamp(12px,1.1vw,22px)}
.hdr__in{display:flex;align-items:center;gap:26px;height:78px;transition:height .3s var(--ease)}
.hdr.stuck .hdr__in{height:68px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
/* logo d'origine AMEN 33, goutte replacée à gauche pour tenir sur une ligne */
.brand__l{height:46px;width:auto;display:block}
.ftr .brand__l{height:58px}
@media (max-width:640px){.brand__l{height:38px}}
.brand__d{height:38px;width:auto;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1}
.brand__t b{font-family:var(--sans);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;color:var(--ink)}
.brand__t span{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:4px;font-weight:600}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{padding:9px 14px;border-radius:var(--r-f);font-size:.92rem;font-weight:500;color:var(--ink-2);
  white-space:nowrap;transition:background .22s,color .22s}
.nav a:hover{background:var(--soft);color:var(--ink)}
.nav a.on{color:var(--blue);font-weight:600}
.hdr__cta{display:flex;align-items:center;gap:12px;flex:none}
.hdr__tel{font-size:.92rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hdr__tel svg{width:15px;height:15px;color:var(--blue)}
.hdr__tel:hover{color:var(--blue)}

.burger{display:none;flex-direction:column;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-f);border:1px solid var(--line-2);background:var(--white)}
.burger span{display:block;width:17px;height:1.8px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.burger span+span{margin-top:5px}
body.menu-open .burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:900;color:#fff;
  background:radial-gradient(125% 90% at 100% 0%,#164272 0%,#0C2A49 42%,#08182B 100%);
  padding:calc(74px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .34s var(--ease),visibility .34s}
body.menu-open{overflow:hidden}
body.menu-open .mmenu{opacity:1;visibility:visible}
body.menu-open .dock{opacity:0;pointer-events:none}   /* le menu occupe tout l'écran */

/* la barre du haut passe en blanc par-dessus le menu */
/* le corps est bloqué pendant l'ouverture du menu : la barre doit passer en
   position fixe, sinon elle reste à sa place dans la page et disparaît. */
body.menu-open .hdr{position:fixed;top:0;left:0;right:0;
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent;z-index:910}
body.menu-open .brand__l{opacity:0}
body.menu-open .brand__l--w{opacity:1}
.brand__l--w{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .3s}
.brand{position:relative}
body.menu-open .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
body.menu-open .burger span{background:#fff}

.mmenu__n{display:flex;flex-direction:column;width:100%;flex:1;justify-content:space-evenly}
.mmenu a.ml{display:flex;align-items:center;gap:16px;padding:clamp(13px,2.1vh,20px) 0;
  border-bottom:1px solid rgba(255,255,255,.13);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.55rem,min(6.6vw,3.4vh),2.4rem);line-height:1.05;
  letter-spacing:-.022em;color:#fff;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s}
.mmenu a.ml:first-child{border-top:1px solid rgba(255,255,255,.13)}
.mmenu a.ml i{font-family:var(--sans);font-style:normal;font-size:.58rem;font-weight:700;
  letter-spacing:.16em;color:#77AEE4;flex:none;align-self:flex-start;margin-top:.85em}
.mmenu a.ml span{flex:1}
.mmenu a.ml svg{flex:none;width:19px;height:19px;color:rgba(255,255,255,.4);transition:transform .25s,color .25s}
.mmenu a.ml:active{color:#9FCBF2}
body.menu-open .mmenu a.ml{opacity:1;transform:none}
body.menu-open .mmenu a.ml:nth-child(1){transition-delay:.06s}
body.menu-open .mmenu a.ml:nth-child(2){transition-delay:.10s}
body.menu-open .mmenu a.ml:nth-child(3){transition-delay:.14s}
body.menu-open .mmenu a.ml:nth-child(4){transition-delay:.18s}
body.menu-open .mmenu a.ml:nth-child(5){transition-delay:.22s}
body.menu-open .mmenu a.ml:nth-child(6){transition-delay:.26s}
body.menu-open .mmenu a.ml:nth-child(7){transition-delay:.30s}
body.menu-open .mmenu a.ml:nth-child(8){transition-delay:.34s}

/* ---------- 6. Héros ----------------------------------------------------- */
.hero{padding-top:clamp(28px,4vw,54px);padding-bottom:clamp(44px,5vw,78px)}
.hero__g{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(28px,3vw,52px);align-items:center}
/* la ligne 1 du titre doit tenir sans se couper : ~12,6 fois la taille de police */
/* Sur ordinateur, les deux phrases forment un seul bloc de même taille.
   Sur téléphone (voir le bloc mobile en fin de feuille), la première passe en
   plus petit et la seconde en très grand. */
.hero__k{font-family:var(--serif);font-weight:400;color:var(--ink);margin-top:20px;
  font-size:clamp(2.2rem,4vw,4.3rem);line-height:1.06;letter-spacing:-.03em}
.hero h1{margin-top:0;font-size:clamp(2.2rem,4vw,4.3rem)}
@media (min-width:761px){.hero h1 br{display:none}.m-only{display:none}}
.hero .lead{margin-top:24px;font-size:clamp(1.05rem,1.35vw,1.22rem)}

.kpis{display:flex;flex-wrap:nowrap;gap:0;margin-top:34px}
.kpi{padding-right:30px;margin-right:30px;border-right:1px solid var(--line);min-width:0}
.kpi:last-child{border:0;margin:0;padding:0}
.kpi b{display:block;font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2.15rem);color:var(--ink);line-height:1}
.kpi>span{display:block;margin-top:5px;font-size:.82rem;color:var(--ink-3)}

/* devis express */
.quick{margin-top:32px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  padding:14px;box-shadow:var(--sh-1);max-width:520px}
.quick__r{display:flex;gap:10px;flex-wrap:wrap}
.quick label{position:absolute;left:-9999px}
.quick select{flex:1;min-width:150px;padding:13px 34px 13px 15px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--white);font-size:.94rem;color:var(--ink);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='%23697276' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;cursor:pointer}
.quick select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-w)}
.quick .btn{margin-top:10px;width:100%}
.quick__n{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:11px;
  font-size:.79rem;color:var(--ink-3)}
.quick__n svg{width:14px;height:14px;color:var(--blue)}

/* visuel : la photo + la fiche décalée */
.shot{position:relative;padding-bottom:56px;padding-right:14px}
.shot__ph{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/4.3;
  background:linear-gradient(150deg,#E9EFF5,#DCE7F1);box-shadow:var(--sh-2)}
.shot__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;z-index:2}
.shot__svg{position:absolute;inset:0;width:100%;height:100%}
.shot__badge{position:absolute;top:16px;left:16px;z-index:3;background:rgba(255,255,255,.94);
  border-radius:var(--r-f);padding:8px 15px;font-size:.78rem;font-weight:600;color:var(--ink);
  box-shadow:var(--sh-1);display:inline-flex;align-items:center;gap:8px}
.shot__badge i{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.card-float{position:absolute;right:-6px;bottom:0;width:min(330px,86%);z-index:4;
  background:var(--white);border-radius:var(--r-l);padding:20px 22px;box-shadow:var(--sh-2);
  border:1px solid var(--line)}
.card-float::before{content:"";position:absolute;inset:0;border-radius:var(--r-l);
  background:var(--white);border:1px solid var(--line);z-index:-1;
  transform:rotate(-2.6deg) translate(-9px,7px);box-shadow:var(--sh-1)}
.card-float h4,.card-float__t{font-family:var(--sans);font-size:.95rem;font-weight:600;
  color:var(--ink);letter-spacing:0;margin:0}
/* intitulé d'encart latéral : même rendu qu'un titre, sans peser sur la hiérarchie */
.card .side__t,.side__t{font-family:var(--serif);font-size:1.14rem;font-weight:500;
  color:var(--ink);letter-spacing:-.01em;line-height:1.3;margin-top:16px}
.card>.side__t:first-child{margin-top:0}
.card-float p{margin-top:8px;font-size:.9rem;color:var(--ink-2);line-height:1.55}
.card-float__f{display:flex;align-items:center;gap:11px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.avatar{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--blue-w);color:var(--blue-d);font-weight:700;font-size:.8rem}
.card-float__f b{display:block;font-size:.85rem;color:var(--ink);font-weight:600}
.card-float__f span{font-size:.76rem;color:var(--ink-3)}

/* ---------- 7. Bandeau typologies --------------------------------------- */
/* ---------- Bandeau de références (marquee logos clients) ---------------- */
.refs{--ls:1;background:var(--white);border-block:1px solid var(--line);
  padding-block:clamp(22px,3vw,34px) clamp(24px,3.4vw,38px);position:relative;overflow:hidden}
.refs::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 50% -30%,var(--blue-w2) 0%,transparent 62%)}
.refs>*{position:relative}
.refs__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px 26px;
  flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,26px)}
.refs__l{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.refs__l i{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(10,84,160,.45);animation:refpulse 2.6s var(--ease) infinite}
@keyframes refpulse{
  0%{box-shadow:0 0 0 0 rgba(10,84,160,.40)}
  70%{box-shadow:0 0 0 9px rgba(10,84,160,0)}
  100%{box-shadow:0 0 0 0 rgba(10,84,160,0)}}
.refs__n{font-size:.86rem;color:var(--ink-3)}
.refs__n b{color:var(--ink);font-weight:650}

.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.marquee__t{display:flex;align-items:stretch;gap:14px;width:max-content;will-change:transform;
  animation:mq var(--mqd,52s) linear infinite}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee:hover .marquee__t,.marquee:focus-within .marquee__t{animation-play-state:paused}

.lchip{flex:0 0 auto;display:grid;place-items:center;height:clamp(70px,7.4vw,86px);
  min-width:clamp(150px,15vw,186px);padding:0 clamp(18px,2.2vw,28px);margin:0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
/* --ls : facteur d'échelle global du bandeau ; --lh / --lw : taille propre à chaque logo,
   calculée pour que tous occupent la même surface visuelle (voir REFS dans extra.py). */
.lchip img{display:block;object-fit:contain;opacity:.94;
  height:calc(var(--lh,40) * var(--ls) * 1px);
  width:calc(var(--lw,80) * var(--ls) * 1px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.lchip:hover{border-color:var(--mint);box-shadow:var(--sh-1);transform:translateY(-3px)}
.lchip:hover img{opacity:1;transform:scale(1.05)}

@media (max-width:1100px){ .refs{--ls:.9} }
@media (max-width:640px){
  .refs{--ls:.84}
  .refs__n{display:none}
  .marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
                   mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
}
@media (prefers-reduced-motion:reduce){
  .marquee__t{animation:none}
  .marquee{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
  .marquee::-webkit-scrollbar{display:none}
  .refs__l i{animation:none}
}

/* ---------- Avant / après : deux photos réelles côte à côte ---------------- */
.pairs{display:grid;gap:clamp(34px,4.4vw,60px)}
.pair{margin:0}
.pair__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,12px)}
.pair__i{position:relative;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;
  background:var(--soft);box-shadow:var(--sh-1)}
.pair__i img{width:100%;height:100%;object-fit:cover;display:block}
.pair__t{position:absolute;left:12px;top:12px;z-index:2;
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-f);color:#fff;background:rgba(15,20,21,.74);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pair__t--a{background:var(--blue)}
.pair figcaption{margin-top:15px;font-size:.93rem;color:var(--ink-3);line-height:1.55}
.pair figcaption b{display:block;font-family:var(--serif);font-size:1.18rem;font-weight:500;
  color:var(--ink);margin-bottom:3px;letter-spacing:-.01em}
@media (min-width:900px){ .pairs{grid-template-columns:repeat(2,1fr)} .pairs>*:only-child{grid-column:1/-1;max-width:620px} }

.strip{border-block:1px solid var(--line);background:var(--white)}
.strip__in{display:flex;align-items:center;gap:14px 30px;padding-block:20px;flex-wrap:wrap;justify-content:center}
.strip__l{font-size:.8rem;color:var(--ink-3);font-weight:500}
.strip__i{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600;color:var(--ink-2)}
.strip__i svg{width:17px;height:17px;color:var(--blue)}

/* ---------- 8. LE DECK — les fiches que l'on décale ---------------------- */
.deck{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,60px);align-items:center;
  grid-template-areas:"h stage" "ctrl stage"}
.deck__h{grid-area:h;min-width:0}   /* la colonne garde sa part : les fiches ne rétrécissent pas */
.deck__stage{grid-area:stage}
.deck__ctrl{grid-area:ctrl}
.deck__stage{position:relative;height:440px;perspective:1400px;touch-action:pan-y}
.sheet{position:absolute;inset:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:32px 32px 28px;box-shadow:var(--sh-2);
  display:flex;flex-direction:column;transform-origin:50% 100%;
  transition:transform .62s var(--ease),opacity .5s var(--ease),box-shadow .5s;
  will-change:transform;cursor:grab;user-select:none}
.sheet:active{cursor:grabbing}
.sheet__n{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet__n b{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.sheet__n span{font-size:.74rem;color:var(--ink-4);font-weight:600}
.sheet__ico{width:46px;height:46px;border-radius:var(--r-m);display:grid;place-items:center;
  background:var(--blue-w);color:var(--blue);margin-top:22px}
.sheet__ico svg{width:23px;height:23px}
.sheet h3{margin-top:18px;font-size:1.55rem}
.sheet p{margin-top:12px;font-size:.95rem;color:var(--ink-2);line-height:1.6}
.sheet ul{margin-top:16px;display:grid;gap:8px}
.sheet li{display:flex;gap:10px;font-size:.88rem;color:var(--ink-3);align-items:flex-start}
.sheet li svg{width:15px;height:15px;color:var(--blue);flex:none;margin-top:3px}
.sheet__f{margin-top:auto;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.deck__ctrl{display:flex;align-items:center;gap:12px;margin-top:26px}
.rnd{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:var(--white);
  display:grid;place-items:center;transition:.22s;color:var(--ink)}
.rnd:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.rnd svg{width:17px;height:17px}
.dots{display:flex;gap:6px;margin-left:6px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:.25s;cursor:pointer}
.dots i.on{background:var(--blue);width:20px;border-radius:4px}
.deck__hint{font-size:.8rem;color:var(--ink-3);margin-left:auto;display:flex;align-items:center;gap:7px}
.deck__hint svg{width:15px;height:15px;color:var(--blue)}

/* ---------- 9. Cartes d'engagement -------------------------------------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:28px 26px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card--h:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.card__ico{width:44px;height:44px;border-radius:var(--r-m);display:grid;place-items:center;
  background:var(--blue-w);color:var(--blue)}
.card__ico svg{width:22px;height:22px}
.card h3{margin-top:20px;font-size:1.24rem}
.card p{margin-top:10px;font-size:.93rem;color:var(--ink-3);line-height:1.6}
.card.dark{background:var(--ink);border-color:#232A2C}
.card.dark p{color:#9AA3A7}
.card.dark .card__ico{background:rgba(255,255,255,.1);color:var(--mint)}

/* ---------- 10. Deux colonnes illustrées -------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.5vw,52px);align-items:center}
.mock{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;
  box-shadow:var(--sh-1)}
.mock__h{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mock__h b{font-size:.86rem;font-weight:600;color:var(--ink)}
.mock__h span{font-size:.74rem;color:var(--ink-4)}
.mock__row{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line)}
.mock__row:last-child{border-bottom:0}
.mock__row i{width:20px;height:20px;border-radius:50%;background:var(--blue-w);color:var(--blue);
  display:grid;place-items:center;font-style:normal}
.mock__row i svg{width:12px;height:12px}
.mock__row b{font-size:.9rem;font-weight:500;color:var(--ink)}
.mock__row em{font-style:normal;font-size:.76rem;color:var(--ink-4)}
.mock__row.off i{background:var(--soft);color:var(--ink-4)}
.mock__row.off b{color:var(--ink-4)}

/* ---------- 11. Comparatif ----------------------------------------------- */
/* ---------- Formulaire de devis en étapes -------------------------------- */
.wiz__top{margin-bottom:26px}
.wiz__p{height:4px;border-radius:999px;background:var(--soft-2);overflow:hidden}
.wiz__p i{display:block;height:100%;background:var(--blue);border-radius:999px;
  transition:width .38s cubic-bezier(.4,0,.2,1)}
.wiz__s{margin-top:11px;font-size:.8rem;color:var(--ink-3)}
.wiz__s b{color:var(--blue);font-weight:600}
.wiz__s span{margin-left:8px}
.wstep{display:none;border:0;padding:0;margin:0;min-inline-size:0}
.wstep.is-on{display:block;animation:stepin .3s ease both}
@keyframes stepin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fld__q{font-family:var(--serif);font-size:1.32rem;line-height:1.2;color:var(--ink);
  margin:0 0 16px;padding:0;display:block}
.fld__q--2{margin-top:26px}
.chips--sm{gap:8px}
.chips--sm .chip{padding:9px 14px;font-size:.86rem}
.wstep .fld{margin-top:16px}
.wstep .fld>label{font-size:.88rem}
.opt{color:var(--ink-4);font-weight:400}
.txa--s{min-height:76px}
.chip--w{display:block;margin-top:18px}
.wiz__nav{display:flex;gap:12px;align-items:center;margin-top:28px;flex-wrap:wrap}
.wiz__nav .btn{min-width:150px;justify-content:center}
@media (max-width:520px){
  .fld__q{font-size:1.15rem}
  .wiz__nav .btn{flex:1;min-width:0}
}

/* ---------- Tableau comparatif ------------------------------------------ */
.cmp{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--white);
  overflow:hidden;box-shadow:var(--sh-1)}
.cmp__h,.cmp__r{display:grid;grid-template-columns:minmax(150px,.9fr) 1.1fr 1.1fr}
.cmp__h{align-items:center}
.cmp__h{background:var(--soft);border-bottom:1px solid var(--line)}
.cmp__h>span:nth-child(2),.cmp__h .cmp__us{padding-left:54px}
.cmp__h>span{padding:15px 22px;font-size:.78rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.cmp__h .cmp__us{color:var(--blue);background:var(--blue-w2)}
.cmp__r+.cmp__r{border-top:1px solid var(--line)}
.cmp__k{padding:20px 22px;font-weight:600;color:var(--ink);font-size:.97rem}
.cmp__a,.cmp__b{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;
  padding:20px 22px;font-size:.95rem;line-height:1.55}
.cmp__a{color:var(--ink-3)}
.cmp__b{color:var(--ink-2);background:var(--blue-w2)}
.cmp__a svg{width:16px;height:16px;margin-top:4px;color:var(--ink-4)}
.cmp__b svg{width:16px;height:16px;margin-top:4px;color:var(--blue)}
.cmp__a::before,.cmp__b::before{display:none}

@media (max-width:820px){
  .cmp{border:0;background:none;box-shadow:none;display:grid;gap:14px}
  .cmp__h{display:none}
  .cmp__r{display:block;background:var(--white);border:1px solid var(--line);
    border-radius:var(--r-l);padding:16px 16px 14px;box-shadow:var(--sh-1)}
  .cmp__r+.cmp__r{border-top:1px solid var(--line)}
  .cmp__k{display:block;padding:0 0 12px;font-size:1.02rem}
  .cmp__a,.cmp__b{padding:12px 14px;border-radius:var(--r-m);font-size:.92rem;
    grid-template-columns:18px 1fr;row-gap:2px}
  .cmp__a{background:var(--soft)}
  .cmp__b{background:var(--blue-w2);margin-top:8px}
  .cmp__a::before,.cmp__b::before{display:block;grid-column:1/-1;font-size:.7rem;font-weight:600;
    letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px;content:attr(data-l)}
  .cmp__a::before{color:var(--ink-4)}
  .cmp__b::before{color:var(--blue)}
}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vs__c{border-radius:var(--r-xl);padding:30px 28px}
.vs__c--a{background:var(--soft);border:1px solid var(--line)}
.vs__c--b{background:var(--ink);color:#C9CFD2}
.vs__c h3{font-size:1.35rem;margin-bottom:22px}
.vs__c--b h3{color:#fff}
.vs__l{display:grid;gap:0}
.vs__l li{display:grid;grid-template-columns:22px 1fr;gap:13px;padding:14px 0;border-top:1px solid var(--line);
  font-size:.94rem;align-items:start}
.vs__c--b .vs__l li{border-color:rgba(255,255,255,.12)}
.vs__l li:first-child{border-top:0}
.vs__l svg{width:17px;height:17px;margin-top:3px}
.vs__c--a svg{color:var(--ink-4)}
.vs__c--b svg{color:var(--mint)}
.vs__c--a li{color:var(--ink-3)}
.vs__c--b li{color:#D6DBDE}

/* ---------- 12. Étapes --------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:26px 24px}
.step b{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--blue);color:#fff;font-size:.84rem;font-weight:700}
.step h3{margin-top:18px;font-size:1.16rem}
.step p{margin-top:9px;font-size:.9rem;color:var(--ink-3)}
.step em{display:inline-block;margin-top:14px;font-style:normal;font-size:.74rem;font-weight:600;
  color:var(--blue);background:var(--blue-w);padding:4px 10px;border-radius:var(--r-f)}

/* ---------- 13. Chiffres pleine largeur --------------------------------- */
.bignums{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bignum{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:30px 26px}
.bignum b{display:block;font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.2rem);color:var(--blue);line-height:1}
.bignum h3{margin-top:14px;font-size:1.12rem}
.bignum p{margin-top:8px;font-size:.9rem;color:var(--ink-3)}

/* ---------- 14. FAQ ------------------------------------------------------ */
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:24px 2px;text-align:left;font-family:var(--serif);font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--ink)}
.faq__q:hover{color:var(--blue)}
.faq__s{position:relative;width:26px;height:26px;flex:none;margin-top:3px;border-radius:50%;
  background:var(--soft);transition:.3s}
.faq__s::before,.faq__s::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);
  transform:translate(-50%,-50%);transition:.3s var(--ease)}
.faq__s::before{width:11px;height:1.6px}
.faq__s::after{width:1.6px;height:11px}
.faq__i.on .faq__s{background:var(--blue)}
.faq__i.on .faq__s::before{background:#fff}
.faq__i.on .faq__s::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq__a{overflow:hidden;height:0;transition:height .4s var(--ease)}
.faq__a>div{padding:0 56px 26px 2px;font-size:.98rem;color:var(--ink-2);line-height:1.7}

/* ---------- 15. Formulaire ---------------------------------------------- */
.form{display:grid;gap:20px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font-size:.86rem;font-weight:600;color:var(--ink)}
.fld .rq{color:var(--blue)}
.inp,.txa,.sel{width:100%;padding:14px 16px;border-radius:var(--r-s);background:var(--white);
  border:1px solid var(--line-2);color:var(--ink);font-size:.98rem;transition:.22s}
.inp::placeholder,.txa::placeholder{color:var(--ink-4)}
.inp:focus,.txa:focus,.sel:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-w)}
.txa{min-height:120px;resize:vertical}
.sel{appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697276' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:var(--r-f);
  border:1px solid var(--line-2);background:var(--white);font-size:.9rem;color:var(--ink-2);cursor:pointer;transition:.22s}
.chip span::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-4);transition:.2s}
.chip input:checked+span{border-color:var(--blue);background:var(--blue-w);color:var(--blue-d);font-weight:600}
.chip input:checked+span::before{background:var(--blue);border-color:var(--blue)}
.chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.note{font-size:.82rem;color:var(--ink-3);line-height:1.55}
.stat{padding:15px 17px;border-radius:var(--r-s);font-size:.95rem;display:none}
.stat.ok{display:block;background:var(--blue-w);border:1px solid #BBD5EE;color:var(--blue-d)}
.stat.err{display:block;background:#FDECEA;border:1px solid #F3C6C0;color:#9B2C2C}

/* ---------- 16. Bloc d'appel final -------------------------------------- */
.cta{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--ink);color:#C9CFD2;
  padding:clamp(36px,5vw,66px) clamp(26px,4vw,58px)}
.cta::after{content:"";position:absolute;width:620px;height:620px;right:-180px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(10,84,160,.55),transparent 66%)}
.cta__in{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.cta h2{color:#fff}
.cta p{margin-top:16px;color:#AEB6BA;max-width:52ch}
.cta__a{display:grid;gap:11px}

/* ---------- 17. Pied de page -------------------------------------------- */
.ftr{background:var(--white);border-top:1px solid var(--line)}
.ftr>.wrap{max-width:1240px}
.ftr__t{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,5vw,70px);
  align-items:start;padding-block:clamp(34px,3.6vw,48px)}
.ftr__p{margin-top:16px;max-width:34ch;font-size:.9rem;color:var(--ink-3);line-height:1.6}
.ftr__id .tag{margin-top:18px}
.ftr__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ftr__h{font-family:var(--sans);font-size:.74rem;font-weight:700;color:var(--ink);
  letter-spacing:.06em;text-transform:uppercase;margin:0}
.ftr ul{margin-top:14px;display:grid;gap:9px}
.ftr ul a{font-size:.9rem;color:var(--ink-3)}
.ftr ul a:hover{color:var(--blue)}
.ftr__b{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding-block:18px;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-3)}
.ftr__b nav{display:flex;flex-wrap:wrap;gap:20px}
.ftr__b a:hover{color:var(--blue)}
.ftr .brand__l{height:42px}
/* texte réservé aux lecteurs d'écran et aux moteurs : lu, jamais affiché */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- 18. Barre flottante mobile ---------------------------------- */
.dock{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));z-index:850;
  width:max-content;max-width:calc(100vw - 24px);margin-inline:auto;display:none;align-items:center;gap:6px;
  padding:6px;border-radius:var(--r-f);background:rgba(255,255,255,.96);border:1px solid var(--line);
  backdrop-filter:blur(14px);box-shadow:0 14px 40px -12px rgba(15,20,21,.35);
  transform:translateY(150%);opacity:0;transition:transform .5s var(--ease),opacity .35s}
.dock.on{transform:translateY(0);opacity:1}
.dock a{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-f);
  font-size:.9rem;font-weight:600;white-space:nowrap}
.dock a svg{width:16px;height:16px}
.dock__c{color:var(--ink)}
.dock__q{background:var(--blue);color:#fff}
.dock__s{width:1px;height:22px;background:var(--line)}

/* ---------- 19. Apparition ---------------------------------------------- */
/* Les blocs ne s'animent plus à l'arrivée : le contenu est là tout de suite.
   Seuls les chiffres du héros continuent de défiler. Les attributs data-rv
   restent dans le HTML pour pouvoir rétablir l'effet en une ligne. */

/* ---------- 20. Pages internes ------------------------------------------ */
.ph{padding-block:clamp(30px,4vw,56px) clamp(30px,4vw,52px)}
.crumb{display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--ink-3);margin-bottom:20px}
.crumb a:hover{color:var(--blue)}
.crumb svg{width:12px;height:12px;opacity:.6}
.ph__g{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(24px,4vw,54px);align-items:end}
.ph__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-l);
  box-shadow:var(--sh-1)}
.prose{max-width:68ch}
.prose p{margin-top:18px;line-height:1.75}
.prose h2{margin-top:44px;font-size:clamp(1.4rem,2.2vw,1.85rem)}
.prose h3{margin-top:32px;font-size:1.2rem}
.prose>ul{margin-top:18px;display:grid;gap:11px}
.prose>ul>li{position:relative;padding-left:26px;line-height:1.65}
.prose>ul>li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;border-radius:2px;background:var(--blue)}
.split{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(26px,4vw,56px);align-items:start}
.split>aside{align-self:stretch}
.stick{position:sticky;top:104px}
/* une liste .chk gardait AUSSI le tiret des listes de .prose : deux marqueurs */
.prose>ul.chk>li{padding-left:0}
.prose>ul.chk>li::before{content:none}
.chk{display:grid;gap:13px}
.chk li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:.98rem;line-height:1.6;color:var(--ink-2)}
.chk svg{width:18px;height:18px;color:var(--blue);margin-top:3px}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.gal figure{margin:0}
.gal a,.gal .gal__i{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-l);
  overflow:hidden;background:var(--soft);box-shadow:var(--sh-1)}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{margin-top:13px;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.imgph{display:grid;place-items:center;width:100%;height:100%;padding:16px;text-align:center;
  background:var(--soft-2);color:var(--ink-3);font-size:.78rem}

/* comparateur avant / après */
/* photo unique déjà scindée avant / après */
.sba{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh-1);background:var(--soft)}
.sba img{display:block;width:100%;height:auto}
.sba::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
  transform:translateX(-1px);background:rgba(255,255,255,.85);pointer-events:none}

.ba{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line);
  background:var(--soft);aspect-ratio:16/10;user-select:none;touch-action:pan-y;cursor:ew-resize;box-shadow:var(--sh-1)}
.ba__l{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ba__l--a{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.ba__ph{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:20px}
.ba__ph--b{background:linear-gradient(150deg,#E4E2DC,#D3D0C8)}
.ba__ph--a{background:linear-gradient(150deg,#E6EFF8,#D3E3F3)}
.ba__ph--b>div{transform:translateX(-24%)}
.ba__ph--a>div{transform:translateX(24%)}
.ba__ph b{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--ink-2)}
.ba__ph span{font-size:.78rem;color:var(--ink-3)}
.ba__h{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;
  transform:translateX(-1px);pointer-events:none;box-shadow:0 0 10px rgba(15,20,21,.35)}
.ba__k{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;
  border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:var(--sh-1)}
.ba__k svg{width:20px;height:20px;color:var(--blue)}
.ba__t{position:absolute;top:14px;padding:6px 13px;border-radius:var(--r-f);font-size:.72rem;
  font-weight:600;pointer-events:none}
.ba__t--l{left:14px;background:rgba(255,255,255,.92);color:var(--ink)}
.ba__t--r{right:14px;background:var(--blue);color:#fff}

/* ---------- 21. Responsive ---------------------------------------------- */
@media (min-width:1081px) and (max-height:900px){
  .hero{padding-top:26px;padding-bottom:46px}
  .hero h1{margin-top:14px}
  .hero .lead{margin-top:14px}
  .kpis{margin-top:24px}
  .quick{margin-top:24px}
}
@media (min-width:1081px) and (max-width:1320px){
  .kpi{padding-right:22px;margin-right:22px}
}
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .hdr__cta{margin-left:auto}
  .hdr__cta .btn{display:none}
  .hero__g{grid-template-columns:1fr;gap:38px}
  .shot{max-width:520px;margin-inline:auto;width:100%}
  .deck{grid-template-columns:1fr;gap:30px;grid-template-areas:"h" "stage" "ctrl"}
  .grid4{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr}
  .cta__in{grid-template-columns:1fr;gap:26px}
  .ftr__t{grid-template-columns:1fr;gap:28px}
  .split{grid-template-columns:1fr}
  .stick{position:static}
  .ph__g{grid-template-columns:1fr}
}


@media (max-width:760px){
  html{scroll-padding-top:88px}
  .hdr__in{height:66px;gap:12px}
  .hdr__tel{display:none}
  .dock{display:flex}
  .grid4,.grid3,.grid2,.steps,.vs,.bignums,.g2{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .kpis{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}
  .kpi{padding:0;margin:0;border:0}
  .deck__stage{height:472px}
  .sheet{padding:26px 24px 24px}
  .strip__in{gap:16px 22px}
  .ftr__b{padding-bottom:86px;flex-direction:column;align-items:flex-start;gap:10px}
  .faq__a>div{padding-right:8px}
  .ba{aspect-ratio:4/3.4}
  .card-float{position:static;width:100%;margin-top:18px}
  .card-float::before{display:none}
  .shot{padding-bottom:0;padding-right:0}
}
@media (max-width:420px){
  .kpi b{font-size:1.5rem}
  .deck__stage{height:520px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{.hdr,.dock,.mmenu{display:none!important}}

/* =========================================================================
   22. Compléments — secteurs, confiance, piliers, guides, villes
   ========================================================================= */

/* Bandeau de confiance */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.trust__i{display:flex;gap:14px;padding:24px 22px;border-right:1px solid var(--line)}
.trust__i:last-child{border-right:0}
.trust__i>svg{width:22px;height:22px;color:var(--blue);flex:none;margin-top:2px}
.trust__i b{display:block;font-size:.94rem;font-weight:600;color:var(--ink);line-height:1.3}
.trust__i span{display:block;font-size:.82rem;color:var(--ink-3);margin-top:4px;line-height:1.45}

/* Bandeau de confiance : une bande bleu très clair, collée aux sections voisines */
.sec:has(+ .s-trust),.sec--t:has(+ .s-trust){padding-bottom:clamp(24px,2.6vw,34px)}
.s-trust{background:var(--blue-w2);border-block:1px solid #E2EDF8;
  padding-block:clamp(16px,2vw,24px)}
.s-trust .trust{background:none;border:0;border-radius:0}
.s-trust .trust__i{padding:6px 26px;border-right:1px solid #D9E7F5}
.s-trust .trust__i:first-child{padding-left:0}
.s-trust .trust__i:last-child{padding-right:0}

/* Grille secteurs */
.sect{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sect__c{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-l);padding:26px 24px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.sect__c:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.sect__c::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.sect__c:hover::after{transform:scaleX(1)}
.sect__c{padding:0;overflow:hidden}
.sect__ph{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--soft)}
.sect__ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.sect__c:hover .sect__ph img{transform:scale(1.05)}
.sect__ic{position:absolute;left:14px;bottom:14px;width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--blue);
  box-shadow:var(--sh-1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sect__b{display:flex;flex-direction:column;flex:1;padding:22px clamp(18px,2vw,24px) clamp(20px,2.2vw,26px)}
.sect__c h3{font-size:1.2rem}
.sect__c p{margin-top:10px;font-size:.92rem;color:var(--ink-3);line-height:1.6;flex:1}
.sect__c .al{margin-top:20px}

/* Piliers d'engagement */
.pil{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pil__c{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px 28px}
.pil__c .card__ico{width:48px;height:48px}
.pil__c h3{margin-top:20px;font-size:1.4rem}
.pil__c>p{margin-top:12px;font-size:.95rem;color:var(--ink-2);line-height:1.6}
.pil__c ul{margin-top:20px;display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.pil__c li{display:grid;grid-template-columns:18px 1fr;gap:11px;font-size:.9rem;color:var(--ink-3);line-height:1.5}
.pil__c li svg{width:16px;height:16px;color:var(--blue);margin-top:3px}

/* Bloc « référence sur demande » */
.ref{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  background:var(--blue-w2);border:1px solid #D7E6F5;border-radius:var(--r-xl);padding:30px 32px}
.ref h3{font-size:1.5rem}
.ref p{margin-top:12px;color:var(--ink-2);max-width:62ch}

/* Témoignages (prêts à remplir) */
.tmo{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tmo__c{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:26px 24px;
  display:flex;flex-direction:column;gap:16px}
.tmo__s{display:flex;gap:3px;color:var(--blue)}
.tmo__s svg{width:15px;height:15px}
.tmo__c blockquote{font-size:.98rem;color:var(--ink-2);line-height:1.65;flex:1}
.tmo__f{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.tmo__f b{display:block;font-size:.9rem;color:var(--ink);font-weight:600}
.tmo__f span{font-size:.78rem;color:var(--ink-3)}

/* Guides / ressources */
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.res__c{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-l);padding:26px 24px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.res__c:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.res__c .tag{align-self:flex-start}
.res__c h3{margin-top:18px;font-size:1.2rem}
.res__c p{margin-top:10px;font-size:.92rem;color:var(--ink-3);flex:1}
.res__c .al{margin-top:20px}

/* Sommaire d'article */
.toc{background:var(--soft);border-radius:var(--r-l);padding:22px 24px}
.toc b{font-size:.82rem;font-weight:600;color:var(--ink-3)}
.toc ol{margin-top:14px;display:grid;gap:9px;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:11px;font-size:.93rem;color:var(--ink-2)}
.toc a::before{content:counter(t,decimal-leading-zero);color:var(--blue);font-weight:600;font-size:.8rem;padding-top:2px}
.toc a:hover{color:var(--blue)}

/* Villes */
.vil{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vil a{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;font-weight:600;color:var(--ink);
  transition:.25s}
.vil a:hover{border-color:var(--blue);color:var(--blue);transform:translateX(3px)}
.vil a svg{width:15px;height:15px;color:var(--ink-4)}
.vil a:hover svg{color:var(--blue)}
.vil a em{font-style:normal;font-weight:400;font-size:.82rem;color:var(--ink-3)}

@media (max-width:1080px){
  .trust{grid-template-columns:1fr 1fr}
  .trust__i:nth-child(2){border-right:0}
  .trust__i:nth-child(1),.trust__i:nth-child(2){border-bottom:1px solid var(--line)}
  .sect,.pil,.tmo,.res{grid-template-columns:1fr 1fr}
  .vil{grid-template-columns:1fr 1fr}
  .ref{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  .trust{grid-template-columns:1fr}
  .trust__i{border-right:0;border-bottom:1px solid var(--line)}
  .trust__i:last-child{border-bottom:0}
  .sect,.pil,.tmo,.res,.vil{grid-template-columns:1fr}
}

/* ---------- Épuration mobile (doit rester en fin de feuille) ------------- */
@media (max-width:760px){
  :root{--sec:clamp(50px,7vw,64px)}
  .eyebrow__3,.eyebrow i:last-of-type{display:none}
  .kpis{grid-template-columns:repeat(3,1fr);gap:14px}
  .kpi b{font-size:1.35rem}
  .kpi>span{font-size:.72rem;line-height:1.3}
  .hero{padding-bottom:34px}
  .lead{font-size:1rem;line-height:1.6}
  .shead .lead,.sec .lead{max-width:none}
  .card,.pil__c,.res__c,.step{padding:22px 20px}
  .cmp__r{padding:14px 14px 12px}
  .cmp__k{font-size:.98rem;padding-bottom:10px}
  .bignum p{display:none}                    /* le chiffre et son titre suffisent */
  .deck__stage{height:430px}
  .ftr__t{padding-block:28px;gap:24px}
  .ftr__nav{grid-template-columns:1fr 1fr;gap:20px 18px}
  .ftr ul{gap:7px}
  .ftr ul a{font-size:.88rem}
  .mock{display:none}                        /* le cahier de passage passe mal en 390 px */


  /* le bandeau de confiance s'empile proprement */
  .s-trust .trust__i{border-right:0;border-bottom:1px solid #D9E7F5;padding:12px 0}
  .s-trust .trust__i:last-child{border-bottom:0}



  /* Ordre des sections propre au téléphone */
  main{display:flex;flex-direction:column}
  main>section{order:6}
  main>section:first-of-type{order:1}        /* héros */
  main>section:nth-of-type(2){order:2}       /* bandeau de logos */
  .s-secteurs{order:3}
  .s-engage{order:4}
  .s-deck{order:5}
  .s-guides{display:none}                    /* les trois guides sortent de l'accueil */

  /* Les engagements ne défilent pas : liste compacte, icône à gauche */
  .grid4{display:grid;grid-auto-flow:row;grid-template-columns:1fr;grid-auto-columns:auto;
    gap:10px;overflow:visible;padding-bottom:0}
  .grid4>.card--h{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
    padding:16px 16px 15px}
  .grid4>.card--h .card__ico{margin:0;grid-row:1/3;align-self:start}
  .grid4>.card--h h3{grid-column:2;margin:0;font-size:1.06rem}
  .grid4>.card--h p{grid-column:2;margin-top:5px;font-size:.86rem;line-height:1.5}

  /* Défilement horizontal natif : le navigateur verrouille lui-même l'axe */
  .sect,.steps,.res,.grid3,.pil{scroll-snap-type:x proximity;scroll-padding-inline:2px}
  .sect>*,.steps>*,.res>*,.grid3>*,.pil>*{scroll-snap-align:start}

  /* Titre du suivi, plus court et équilibré */
  .duo h2.t2,.shead h2.t2{text-wrap:balance}
  .shead h2.t2 br,.duo h2.t2 br{display:none}

  /* Section « Nos prestations » : titre court, pas de texte, commandes sous les fiches */
  .deck__lead,.deck__all,.deck__hint{display:none}
  .deck__ctrl{justify-content:center;margin-top:18px;gap:14px}
  .deck__stage{height:452px}
  .sheet{padding:22px 20px 20px}
  .sheet h3{font-size:1.3rem;margin-top:14px}
  .sheet p{font-size:.9rem;margin-top:10px}
  .sheet li{font-size:.84rem}
  .sheet__n{flex-wrap:wrap;row-gap:4px}
  .sheet__n b,.sheet__n span{min-width:0}
  .sheet__f{padding-top:16px;gap:10px}
  .sheet__f .al{display:none}                /* le nom était répété et débordait */
  .sheet__f .btn{width:100%;justify-content:center}

  /* Héros : titre plus grand et plus serré, fiche posée sur la photo */
  .hero{padding-top:22px}
  .hero .wrap{padding-inline:15px}

  /* ESSAI — la photo et sa fiche deviennent le héros ; texte porté par la fiche.
     Pour revenir en arrière : supprimer ce bloc jusqu'au commentaire FIN ESSAI. */
  .hero__g{display:flex;flex-direction:column;gap:24px}
  .shot{order:1}
  .hero__g>div:first-child{order:2}
  .hero .eyebrow,.hero__k,.hero .lead{display:none}
  .hero h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .quick{margin-top:0}
  .shot__ph{aspect-ratio:4/3.9}
  .card-float{margin:-66px 14px 0;padding:20px 20px 17px;
    box-shadow:0 22px 50px -22px rgba(6,16,28,.6)}
  .card-float p.card-float__t{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;
    font-size:clamp(1.62rem,7.2vw,2.2rem);line-height:1.04;color:var(--ink)}
  .card-float p{font-size:.88rem;line-height:1.48;margin-top:11px}
  .card-float__f{margin-top:13px;padding-top:11px}
  /* FIN ESSAI */
  .hero__k{display:none}                     /* remplacée par le titre court */
  .hero .eyebrow{margin-bottom:20px;font-size:.82rem}
  .hero .kpis{display:none}
  .hero__k{font-size:6.3vw;line-height:1.12;color:var(--ink-2);letter-spacing:-.025em}
  .hero h1{margin-top:0;font-size:17vw;line-height:.92;letter-spacing:-.05em;text-wrap:balance}
  .hero h1 br,.d-only{display:none}       /* sur téléphone : « Nous rendons vos locaux irréprochables » */
  .hero .lead{margin-top:32px}
  .quick{margin-top:26px}                    /* le devis express reste dans l'écran d'arrivée */
  .hero .lead{margin-top:18px;font-size:1.03rem;line-height:1.55;max-width:36ch}
  .quick{margin-top:22px}
  .shot{padding-bottom:0;padding-right:0;max-width:none}
  .shot__ph{aspect-ratio:4/4.2}
  .shot__ph img{object-position:center 38%}
  .shot__ph::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;z-index:3;
    background:linear-gradient(to top,rgba(6,16,28,.55) 0%,rgba(6,16,28,.18) 55%,transparent 100%)}
  /* la fiche déborde d'un tiers sur la photo, le reste dessous, légèrement inclinée */
  .card-float{position:relative;left:auto;right:auto;bottom:auto;z-index:4;
    width:auto;margin:-58px 16px 0;
    background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
    padding:16px 18px 15px;box-shadow:0 18px 44px -20px rgba(6,16,28,.55)}
  .card-float::before{display:block;transform:rotate(-2.2deg) translate(-7px,6px)}

  /* Les grilles longues deviennent des bandes qui défilent du doigt : la page
     reste courte et on garde tout le contenu. */
  .sect,.steps,.res,.grid3,.pil{
    display:grid;grid-auto-flow:column;grid-auto-columns:81%;grid-template-columns:none;
    gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none}
  .sect::-webkit-scrollbar,.steps::-webkit-scrollbar,
  .res::-webkit-scrollbar,.grid3::-webkit-scrollbar,.pil::-webkit-scrollbar{display:none}
  .sect>*,.steps>*,.res>*,.grid3>*,.pil>*{height:100%}
}
@media (max-width:420px){
  .kpi>span{font-size:.68rem}
}

/* ---------- 22 quinquies. Encadré « avant de signer » : plus resserré ---- */
@media (min-width:761px){
  .s-ref{padding-block:clamp(34px,3.6vw,50px)}
  .s-ref + .sec,.s-ref + .sec--t{padding-top:clamp(38px,4vw,56px)}
}

/* ---------- 22 quater. Section comparaison : moins d'air au-dessus ------- */
@media (min-width:761px){
  .s-compare{padding-top:clamp(38px,4vw,56px)}
}

/* ---------- 22 ter. Respiration autour du bandeau bleu (ordinateur) ------ */
@media (min-width:761px){
  .sec:has(+ .s-trust),.sec--t:has(+ .s-trust){padding-bottom:clamp(46px,4.8vw,68px)}
  .s-trust{padding-block:clamp(22px,2.4vw,30px)}
  .s-trust + .sec,.s-trust + .sec--t{padding-top:clamp(50px,5.2vw,74px)}
}

/* ---------- 22 bis. Titres tenus sur une seule ligne (ordinateur) --------
   Certains intitulés de section cassaient sur deux ou trois lignes selon la
   largeur d'écran et la police réellement chargée. On élargit le bloc d'en-tête
   et le script réduit très légèrement la taille si la place manque. */
@media (min-width:761px){
  .shead--w{max-width:none}
  .shead--w .lead{max-width:720px}
  .shead--c.shead--w .lead{margin-inline:auto}
}

/* ---------- 23. Variations de rythme (ordinateur) ------------------------ */
/* Quatre sections se ressemblaient trop : même titre à gauche, même rangée de
   cartes blanches sur fond pâle. On alterne fond, alignement et forme. */
@media (min-width:761px){

  /* a. Les engagements passent sur fond sombre, sans cartes */
  .s-engage{background:linear-gradient(165deg,#12365E 0%,#0B2440 55%,#08182B 100%);color:#fff}
  .s-engage .tag{background:rgba(255,255,255,.11);color:#BCD8F2}
  .s-engage h2{color:#fff}
  .s-engage .lead{color:#A9C2D8}
  .s-engage .grid4{grid-template-columns:1fr 1fr;gap:0;max-width:1080px;margin-inline:auto}
  .s-engage .card--h{background:none;border:0;box-shadow:none;border-radius:0;
    padding:30px 34px;transform:none;
    border-top:1px solid rgba(255,255,255,.15)}
  .s-engage .card--h:nth-child(odd){border-right:1px solid rgba(255,255,255,.15)}
  .s-engage .card--h:hover{transform:none;box-shadow:none}
  .s-engage .card__ico{background:rgba(255,255,255,.1);color:#8FC6F5}
  .s-engage .card--h h3{color:#fff}
  .s-engage .card--h p{color:#A9C0D4}

  /* c. Les trois piliers deviennent trois colonnes séparées par des filets */
  .s-piliers .pil{gap:0}
  .s-piliers .pil__c{background:none;border:0;border-radius:0;padding:0 36px;
    border-left:1px solid var(--line)}
  .s-piliers .pil__c:first-child{border-left:0;padding-left:0}
  .s-piliers .pil__c ul{border-top-color:var(--line-2)}

  /* d. La mise en place devient une frise reliée */
  .s-etapes .steps{gap:0;position:relative}
  .s-etapes .steps::before{content:"";position:absolute;left:8%;right:8%;top:20px;height:1px;
    background:linear-gradient(90deg,transparent,var(--line-2) 8%,var(--line-2) 92%,transparent)}
  .s-etapes .step{background:none;border:0;border-radius:0;padding:0 26px;text-align:center;
    position:relative}
  .s-etapes .step b{width:40px;height:40px;font-size:.95rem;box-shadow:0 0 0 10px var(--soft)}
  .s-etapes .step h3{margin-top:22px}
  .s-etapes .step p{margin-inline:auto;max-width:26ch}
}

/* ---------- 24. Parcours de devis compact -------------------------------- */
/* Pas de héros : on entre directement dans le formulaire, et chaque étape
   tient dans un écran, sur ordinateur comme sur téléphone. */
#devis-page .ph{display:none}
#devis-page .sec--t{padding-block:clamp(18px,2.4vw,34px)}
#devis .fld__q{font-size:clamp(1.1rem,1.5vw,1.42rem);margin-bottom:14px}
#devis .wiz__top{margin-bottom:18px}

/* les pastilles deviennent des lignes à cocher */
#devis .chips{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
#devis .chip{padding:0;margin:0;display:block}
#devis .chip span{display:flex;width:100%;align-items:center;gap:12px;
  padding:10px 4px;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:none;font-size:.94rem;color:var(--ink-2)}
#devis .chip span::before{width:16px;height:16px;border:1.5px solid var(--line-2);flex:none}
#devis .chip input:checked+span{background:none;color:var(--blue-d);font-weight:600}
#devis .chip input:checked+span::before{background:var(--blue);border-color:var(--blue);
  box-shadow:inset 0 0 0 3px #fff}
#devis .chip--w{margin-top:16px}
#devis .chip--w span{border-bottom:0;align-items:flex-start;font-size:.86rem}
#devis .chip--w span::before{border-radius:4px;margin-top:2px}

/* champs alignés : même hauteur, même largeur d'étiquette */
#devis .g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
#devis .fld{margin-top:14px;display:flex;flex-direction:column}
#devis .fld>label{font-size:.84rem;font-weight:600;color:var(--ink-2);margin-bottom:6px;
  min-height:1.2em;display:flex;align-items:center;gap:5px}
#devis .inp,#devis .sel{width:100%;height:46px;padding:0 14px;font-size:.95rem}
#devis .txa{min-height:76px;padding:12px 14px;font-size:.95rem}
#devis .wiz__nav{margin-top:24px}

@media (min-width:761px){
  /* deux colonnes de lignes : les longues listes tiennent dans l'écran */
  #devis .chips{grid-template-columns:1fr 1fr;column-gap:34px}
  #devis-page .split{align-items:start;gap:clamp(22px,2.4vw,38px)}
  #devis-page .card{padding:clamp(22px,2.2vw,32px)}
}

@media (max-width:760px){
  /* Devis : ajustements téléphone */
  #devis-page .card{padding:16px 14px !important}
  #devis .chips{grid-template-columns:1fr}
  #devis .chip span{padding:8px 2px;font-size:.9rem}
  #devis .fld{margin-top:10px}
  #devis .fld>label{font-size:.8rem;margin-bottom:4px}
  #devis .inp,#devis .sel{height:42px;font-size:.92rem}
  #devis .g2{grid-template-columns:1fr 1fr;gap:9px}
  #devis .fld--opt{display:none}
  #devis .wiz__nav{margin-top:16px}
  #devis .wiz__nav .btn{padding:13px 20px}
  #devis .note{font-size:.72rem;margin-top:10px}
  #devis-page aside{margin-top:22px}
}

/* ---------- 25. Très petits écrans (320 à 400 px) ------------------------
   Sur un iPhone SE ou un vieil Android, la colonne utile tombe à ~230 px.
   Les boutons longs et le bloc d'appel final débordaient de leur cadre :
   on les laisse revenir à la ligne plutôt que d'être coupés. */
@media (max-width:400px){
  :root{--padx:16px}
  .cta{padding-inline:20px}
  .cta__in,.cta__in>*,.cta__a{min-width:0}
  .cta h2{font-size:clamp(1.55rem,8.2vw,2rem)}
  .cta p{font-size:.96rem}
  .btn{white-space:normal;text-align:center}
  .btn--lg{padding:14px 16px;font-size:.93rem;line-height:1.3}
  .btn--sm{padding:10px 13px;font-size:.83rem}
  .hdr__cta .btn{max-width:none}
  .card-float{margin-inline:12px}
  .kpi>span{font-size:.66rem}
  .cmp__r{padding:12px 12px 10px}
  .ftr__nav{grid-template-columns:1fr 1fr;gap:16px 12px}
  .ftr ul a{font-size:.85rem}
}

/* ---------- 26. Tablettes (761 à 1080 px) --------------------------------
   Deux mises en page d'ordinateur supposent trois ou quatre colonnes : les
   piliers séparés par des filets, et la frise reliée de la mise en place.
   Entre 761 et 1080 px la grille tombe à deux colonnes et ces traitements
   se cassent. On revient aux cartes, qui s'empilent proprement. */
@media (min-width:761px) and (max-width:1080px){
  .s-piliers .pil{gap:18px}
  .s-piliers .pil__c{background:var(--white);border:1px solid var(--line);
    border-radius:var(--r-xl);padding:28px 26px}
  .s-piliers .pil__c:first-child{padding-left:26px}
  .s-piliers .pil__c ul{border-top-color:var(--line)}

  .s-etapes .steps{gap:18px}
  .s-etapes .steps::before{display:none}
  .s-etapes .step{background:var(--white);border:1px solid var(--line);
    border-radius:var(--r-l);padding:26px 24px;text-align:left}
  .s-etapes .step b{width:30px;height:30px;font-size:.84rem;box-shadow:none}
  .s-etapes .step h3{margin-top:18px}
  .s-etapes .step p{margin-inline:0;max-width:none}
}