@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

/* ============================================================
   LES3 — Système de design (site vitrine statique)
   Conception : DIGISTYLZE
   Aucune dépendance · CSS original · mobile-first
   ------------------------------------------------------------
   Sommaire :
   01. Tokens (:root)
   02. Reset & base
   03. Typographie
   04. Layout (wrap / section / head)
   05. Boutons
   06. Utilitaires (icônes, checks, reveal)
   07. En-tête + méga-menu + drawer
   08. Hero
   09. Bandeau chiffres (stats)
   10. Preuve sociale (proof / quote)
   11. Vitrine services
   12. Cartes (cards)
   13. Accordéon (acc)
   14. Étapes (steps)
   15. Avant/Après (ba)
   16. Zones / carte Suisse
   17. Engagement environnement (eco)
   18. Bannière CTA
   19. Formulaire + coordonnées (form / cinfo)
   20. Prose / contenu
   21. Pied de page
   22. WhatsApp flottant
   23. Media queries
   24. prefers-reduced-motion
   ============================================================ */

/* ===== 01. TOKENS ===== */
:root{
  --orange:#ec5b40; --orange-600:#ec5b40; --orange-700:#ec5b40;
  --orange-tint:#fdf0ec; --orange-tint-2:#fbe3db;
  /* vert écologique (RSE / traitement & valorisation des déchets) */
  --eco:#3f9d63; --eco-deep:#2f7a4c; --eco-tint:#eaf5ee;
  --gray:#505257; --ink:#1d1e20; --ink-soft:#34363a; --muted:#5c5e63;
  /* fonds clairs : gris froids neutres (tirant vers le blanc, plus de beige) */
  --paper:#ffffff; --paper-alt:#f5f6f7; --paper-warm:#eef0f2;
  --line:#e7e9ec; --line-2:#dce0e4; --hair:rgba(29,30,32,.07);
  /* ombres premium : doubles couches, douces et diffuses */
  --shadow-sm:0 1px 2px rgba(29,30,32,.04),0 6px 18px -12px rgba(29,30,32,.10);
  --shadow-md:0 2px 6px rgba(29,30,32,.035),0 22px 50px -26px rgba(29,30,32,.16);
  --shadow-lg:0 4px 14px rgba(29,30,32,.05),0 48px 96px -40px rgba(29,30,32,.22);
  /* balisage premium : fines rayures orange précises (45°), réutilisable */
  --balisage:repeating-linear-gradient(45deg,var(--orange) 0 5px,transparent 5px 14px);
  --balisage-soft:repeating-linear-gradient(45deg,rgba(236,91,64,.55) 0 4px,transparent 4px 13px);
  /* Site ANGULEUX : rayons à zéro (angles vifs) */
  --r:0px; --r-sm:0px; --r-lg:0px; --pill:0px;
  --wrap:1240px; --gut:clamp(20px,5vw,44px); --sp:clamp(76px,9vw,132px);

  --fs-hero:clamp(2.7rem,6.4vw,5.3rem);
  --fs-h2:clamp(2rem,4.3vw,3.4rem);
  --fs-h3:clamp(1.25rem,2vw,1.55rem);
  --fs-lead:clamp(1rem,1.2vw,1.15rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --header-h:84px;
}

/* ===== 02. RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15.5px; font-weight:300; line-height:1.7; color:var(--ink-soft);
  background:var(--paper);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,picture,video{display:block;max-width:100%;height:auto}
img{border-style:none}
a{color:var(--orange-600);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--ink-soft)}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea,button{font-family:inherit;font-size:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:0}
:where(.btn,.acc__head,.ba__handle,.ba__prev,.ba__next,.ba__dot,.burger,.drawer__link):focus-visible{outline-offset:4px}
hr{border:none;border-top:.5px solid var(--line);margin:0}
::selection{background:var(--orange-tint-2);color:var(--ink)}

/* ===== 03. TYPOGRAPHIE ===== */
h1,h2,h3,h4{
  font-family:"General Sans",system-ui,sans-serif;
  font-weight:600; color:var(--ink);
  line-height:1.1; letter-spacing:-.025em;
  margin:0; text-wrap:balance;
}
h1{font-size:var(--fs-hero);font-weight:600;letter-spacing:-.03em}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.015em}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}
.hl{color:var(--orange)}
.lead{font-size:var(--fs-lead);line-height:1.72;color:var(--gray);font-weight:300}

/* ===== 04. LAYOUT ===== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sp)}
.section--alt{background:var(--paper-alt)}
.section--tint{background:var(--orange-tint)}

.head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.head--center{margin-inline:auto;text-align:center}
.head__title{font-size:var(--fs-h2);margin-bottom:.55em}
.head__intro{margin-top:0}

/* ===== 05. BOUTONS — système « BRÈCHE » (angles vifs) =====
   Un balayage à bord déchiqueté traverse le bouton + micro-secousse au survol.
   Angles vifs (border-radius 0) pour rester anguleux. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:"General Sans",sans-serif;font-weight:600;font-size:.95rem;line-height:1;
  padding:1.12rem 2.05rem;border-radius:0;
  position:relative;isolation:isolate;overflow:hidden;cursor:pointer;
  text-align:center;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:color .35s ease,border-color .35s ease,box-shadow .35s ease,background .35s ease;
  border:1.5px solid transparent;
}
.btn__t{position:relative;z-index:1}
.btn__arrow{display:inline-block;transition:transform .35s var(--ease);position:relative;z-index:1}
.btn:hover .btn__arrow{transform:translateX(4px)}
/* La brèche : voile à bord déchiqueté qui balaie depuis la gauche.
   Le voile est plus large que le bouton : à l'arrivée, le bord déchiqueté
   sort à droite (clippé) -> remplissage PLEIN et net, sans dents visibles. */
.btn::before{
  content:"";position:absolute;inset:0 -24% 0 0;z-index:-1;transform:translateX(-100%);
  clip-path:polygon(0 0,88% 0,100% 14%,90% 30%,100% 46%,90% 62%,100% 78%,90% 92%,100% 100%,0 100%);
  transition:transform .44s cubic-bezier(.7,0,.25,1);
}
.btn:hover,.btn:focus-visible{animation:breche-shudder .5s ease}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0)}
@keyframes breche-shudder{
  10%,90%{transform:translate(-1px,0)}20%,80%{transform:translate(2px,0)}
  30%,50%,70%{transform:translate(-3px,0)}40%,60%{transform:translate(3px,0)}100%{transform:none}
}

/* Primaire : orange, brèche sombre, texte blanc */
.btn--primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn--primary::before{background:var(--ink)}
.btn--primary:hover,.btn--primary:focus-visible{color:#fff;box-shadow:var(--shadow-md)}

/* Fantôme : contour encre, brèche orange, texte blanc au survol */
.btn--ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn--ghost::before{background:var(--orange)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:#fff;border-color:var(--orange)}

/* Clair (sur bannière orange) : fond blanc, brèche sombre, texte blanc au survol */
.btn--light{background:#fff;color:var(--orange-700);border-color:#fff}
.btn--light::before{background:var(--ink)}
.btn--light:hover,.btn--light:focus-visible{color:#fff;border-color:var(--ink);box-shadow:var(--shadow-md)}

/* Contour clair (sur photo hero / bannière) : contour blanc, brèche orange */
.btn--outline-light{border:.5px solid rgba(255,255,255,.65);color:#fff;background:transparent}
.btn--outline-light::before{background:var(--orange)}
.btn--outline-light:hover,.btn--outline-light:focus-visible{color:#fff;border-color:var(--orange)}

.btn--lg{padding:1.05rem 2rem;font-size:1rem}

/* ===== 06. UTILITAIRES ===== */
.ico{
  display:inline-block;width:1em;height:1em;flex:none;
  background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;
  mask:var(--i) center/contain no-repeat;
}
.checks{display:grid;gap:.6rem;margin:1.2rem 0 0}
.checks li{position:relative;padding-left:1.9rem;line-height:1.55}
.checks li::before{
  content:"";position:absolute;left:0;top:.18em;width:1.15rem;height:1.15rem;
  background:var(--orange-tint-2);border-radius:50%;
}
.checks li::after{
  content:"";position:absolute;left:.34rem;top:.42em;width:.42rem;height:.24rem;
  border-left:.5px solid var(--orange-700);border-bottom:.5px solid var(--orange-700);
  transform:rotate(-45deg);
}

/* Révélations au scroll */
[data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0s);
}
[data-reveal].in-view{opacity:1;transform:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== 07. EN-TÊTE ===== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:200;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  background:var(--paper);border-bottom:.5px solid var(--line);
}
.site-header__inner{
  display:flex;align-items:center;gap:1.2rem;
  min-height:var(--header-h);
}
.brand{display:inline-flex;align-items:center;margin-right:auto;line-height:0}
.brand__pic{display:block}
.brand__img{height:52px;width:auto;display:block;transition:filter .35s var(--ease)}
/* barre mobile (< 960px) : logo horizontal -> hauteur réduite pour qu'il ne touche pas les bords */
@media(max-width:959.98px){.brand__img{height:38px}}
@media(max-width:560px){.brand__img{height:32px}}

/* overlay : header transparent au-dessus d'un grand hero */
body[data-header="overlay"] .site-header{
  position:fixed;background:transparent;border-bottom-color:transparent;
}
body[data-header="overlay"] .site-header .brand__img{filter:brightness(0) invert(1)}
body[data-header="overlay"] .nav__link,
body[data-header="overlay"] .header__tel{color:rgba(255,255,255,.92)}
body[data-header="overlay"] .header__tel:hover,
body[data-header="overlay"] .nav__link:hover{color:#fff}
body[data-header="overlay"] .burger span{background:#fff}

.site-header.is-scrolled{
  background:var(--paper);border-bottom-color:var(--line);box-shadow:var(--shadow-sm);
}
body[data-header="overlay"] .site-header.is-scrolled .brand__img{filter:none}
body[data-header="overlay"] .site-header.is-scrolled .nav__link,
body[data-header="overlay"] .site-header.is-scrolled .header__tel{color:var(--ink-soft)}
body[data-header="overlay"] .site-header.is-scrolled .burger span{background:var(--ink)}

.nav{display:none}
.nav__list{display:flex;align-items:center;gap:.3rem}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:"General Sans",sans-serif;font-weight:600;font-size:.95rem;
  color:var(--ink-soft);padding:.6rem .85rem;border-radius:var(--r-sm);
}
.nav__link:hover{color:var(--orange)}
.nav__caret{width:.7em;height:.7em;transition:transform .3s var(--ease)}
.nav__item:hover .nav__caret{transform:rotate(180deg)}

/* Méga-menu services */
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  width:min(560px,86vw);background:var(--paper);
  border:.5px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:1rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.nav__item:hover .mega,.nav__item:focus-within .mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.mega__link{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem .8rem;border-radius:var(--r-sm);color:var(--ink-soft);
}
.mega__link .ico{color:var(--orange);font-size:1.15rem}
.mega__link span:last-child{font-family:"General Sans",sans-serif;font-weight:600;font-size:.92rem;color:var(--ink)}
.mega__link:hover{background:var(--orange-tint)}
.mega__link:hover span:last-child{color:var(--orange-700)}
.mega__foot{grid-column:1/-1;margin-top:.4rem;padding-top:.8rem;border-top:.5px solid var(--line)}
.mega__foot .mega__link{background:var(--paper-alt)}

.header__tel{
  display:none;align-items:center;gap:.45rem;
  font-family:"General Sans",sans-serif;font-weight:600;font-size:.92rem;color:var(--ink-soft);
}
.header__tel .ico{color:var(--orange);font-size:1.05rem}
.header__cta{display:none}

/* Burger */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;margin-left:auto;border-radius:var(--r-sm);
}
.burger span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease);margin-inline:auto}
body.drawer-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.drawer-open .burger span:nth-child(2){opacity:0}
body.drawer-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Drawer mobile */
.drawer{
  position:fixed;inset:0;z-index:300;
  background:var(--paper);
  padding:calc(var(--header-h) + 12px) var(--gut) 2rem;
  display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s var(--ease),visibility .42s;
  overflow-y:auto;
}
body.drawer-open .drawer{transform:none;visibility:visible}
.drawer__list{display:flex;flex-direction:column;gap:.2rem;margin-top:.5rem}
.drawer__link{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-family:"General Sans",sans-serif;font-weight:600;font-size:1.25rem;color:var(--ink);
  padding:.85rem 0;border-bottom:.5px solid var(--line);width:100%;text-align:left;
}
.drawer__link:hover{color:var(--orange)}
.drawer__toggle .nav__caret{width:1em;height:1em}
.drawer__toggle[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}
.drawer__sub{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease);
  display:flex;flex-direction:column;
}
.drawer__sub a{
  font-family:"Inter",sans-serif;font-weight:500;font-size:1.02rem;color:var(--ink-soft);
  padding:.6rem 0 .6rem 1.4rem;border-bottom:.5px solid var(--line);
}
.drawer__sub a:hover{color:var(--orange)}
.drawer__foot{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:1rem}
.drawer__foot .btn{justify-content:center}
.drawer__contact{display:flex;align-items:center;gap:.5rem;color:var(--ink-soft);font-weight:600;font-family:"General Sans",sans-serif}
.drawer__contact .ico{color:var(--orange)}

/* ===== 08. HERO ===== */
.hero{position:relative;display:flex;align-items:flex-end;isolation:isolate;color:#fff;overflow:hidden}
/* Hero = plein viewport sur toutes les pages */
.hero--home,.hero--page,.hero--compact{min-height:100vh;min-height:100svh}
/* Ligne défilante de transition hero -> contenu (façon BuildNest) */
.hero::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:1px;height:clamp(66px,11vh,120px);z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.15) 0%,var(--orange) 55%,transparent 100%);
  background-size:100% 220%;animation:heroScrollLine 2.3s var(--ease) infinite;
}
@keyframes heroScrollLine{0%{background-position:0 -110%}100%{background-position:0 110%}}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__overlay{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(29,30,32,.30) 0%,rgba(29,30,32,.10) 38%,rgba(29,30,32,.78) 100%),
    linear-gradient(90deg,rgba(29,30,32,.55) 0%,rgba(29,30,32,.05) 60%);
}
.hero__inner{padding-block:clamp(110px,16vh,180px) clamp(54px,9vh,96px)}
.hero--compact .hero__inner{padding-block:clamp(110px,16vh,160px) clamp(40px,6vh,64px)}
.hero__title{max-width:16ch;margin-bottom:.45em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero--page .hero__title{font-size:clamp(2.3rem,5vw,4rem)}
.hero--compact .hero__title{font-size:clamp(2rem,4.4vw,3.2rem)}
.hero__text{max-width:54ch;font-size:var(--fs-lead);color:rgba(255,255,255,.92);margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.9rem;margin-bottom:1.3rem;color:rgba(255,255,255,.78)}
.crumbs a{color:rgba(255,255,255,.78);font-weight:500}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.55}
.crumbs [aria-current]{color:#fff;font-weight:600}

.hero__scroll{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:1;
  display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:600;
}
.hero__scroll::after{
  content:"";width:1px;height:34px;background:rgba(255,255,255,.6);
  animation:scrollPulse 1.9s var(--ease) infinite;
}
@keyframes scrollPulse{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* ===== 09. STATS ===== */
.stats{
  display:grid;grid-template-columns:1fr;gap:1.6rem;
  text-align:center;
}
.stats__item{padding:.5rem .8rem}
.stats__num{
  font-family:"General Sans",sans-serif;font-weight:700;
  font-size:clamp(2.6rem,6vw,3.8rem);line-height:1;color:var(--ink);
  letter-spacing:-.02em;
}
.stats__num .stats__suffix{color:var(--orange)}
.stats__label{margin-top:.5rem;font-size:.98rem;color:var(--gray);font-weight:500}

/* ===== 10. PROOF / QUOTE ===== */
.proof__grid{display:grid;gap:clamp(36px,5vw,56px)}
/* Stats dans la preuve sociale : grille 2×2 propre, alignée à gauche */
.proof__grid .stats{grid-template-columns:repeat(2,1fr);gap:1.8rem 1.4rem;text-align:left}
.proof__grid .stats__item{border-right:none;padding:.1rem 0}
.quote{
  margin:0;background:var(--paper);border:.5px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-md);
  position:relative;
}
.quote::before{
  content:"\201C";position:absolute;top:.05em;right:.32em;
  font-family:"General Sans",sans-serif;font-size:7rem;line-height:1;color:var(--orange-tint-2);z-index:0;
}
.quote__stars{color:var(--orange);font-size:1.15rem;letter-spacing:.18em;position:relative;z-index:1}
.quote__text{
  font-family:"General Sans",sans-serif;font-weight:600;font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.45;color:var(--ink);margin:1rem 0 1.8rem;position:relative;z-index:1;
}
.quote__person{display:flex;align-items:center;gap:1rem}
.quote__avatar{
  width:54px;height:54px;flex:none;border-radius:0;display:grid;place-items:center;
  background:var(--orange);color:#fff;font-family:"General Sans",sans-serif;font-weight:700;font-size:1.05rem;
}
.quote__id{display:flex;flex-direction:column;line-height:1.4}
.quote__name{font-family:"General Sans",sans-serif;color:var(--ink)}
.quote__role{font-size:.92rem;color:var(--gray)}
.quote__meta{font-size:.82rem;color:var(--muted)}

/* ===== 11. VITRINE SERVICES ===== */
.services__grid{display:grid;grid-template-columns:1fr;gap:1.1rem}
.svc{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:.5px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,38px);color:var(--ink-soft);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.svc::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.svc:hover::before{transform:scaleX(1)}
.svc__num{
  font-family:"General Sans",sans-serif;font-weight:700;font-size:.85rem;color:var(--orange);
  letter-spacing:.05em;
}
.svc__icon{font-size:2.2rem;color:var(--orange);margin:1rem 0 1.2rem}
.svc__title{margin-bottom:.55rem;font-size:1.3rem}
.svc__desc{font-size:1rem;margin-bottom:1.4rem}
.svc__link{
  margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-family:"General Sans",sans-serif;font-weight:600;font-size:.92rem;color:var(--ink);
  transition:color .3s var(--ease);
}
.svc:hover .svc__link{color:var(--orange)}
.services__foot{margin-top:clamp(34px,4vw,48px);text-align:center}

/* ===== 12. CARDS ===== */
.cards{display:grid;grid-template-columns:1fr;gap:1.1rem}
.card{
  background:var(--paper);border:.5px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.card__num{
  display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:0;
  background:var(--orange);color:#fff;
  font-family:"General Sans",sans-serif;font-weight:700;font-size:1rem;margin-bottom:1rem;
}
.card__icon{font-size:2rem;color:var(--orange);margin-bottom:1rem}
.card__title{margin-bottom:.5rem;font-size:1.2rem}
.card__text{font-size:1rem}

/* ===== 13. ACCORDÉON ===== */
.acc{display:flex;flex-direction:column;gap:.9rem;max-width:920px}
.acc__item{
  background:var(--paper);border:.5px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.acc__item.is-open{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.acc__head{
  display:flex;align-items:center;gap:1rem;width:100%;text-align:left;
  padding:1.25rem clamp(18px,2.5vw,26px);
}
.acc__num{
  font-family:"General Sans",sans-serif;font-weight:700;font-size:.85rem;color:var(--orange);flex:none;
}
.acc__q{font-family:"General Sans",sans-serif;font-weight:600;font-size:1.1rem;color:var(--ink);margin-right:auto;line-height:1.35}
.acc__icon{
  position:relative;width:1.4rem;height:1.4rem;flex:none;
}
.acc__icon::before,.acc__icon::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--orange);border-radius:2px;
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.acc__icon::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.acc__icon::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.acc__item.is-open .acc__icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc__panel{max-height:0;overflow:hidden;opacity:0;transition:max-height .42s var(--ease),opacity .42s var(--ease)}
.acc__item.is-open .acc__panel{opacity:1}
.acc__inner{padding:0 clamp(18px,2.5vw,26px) 1.4rem;padding-left:calc(clamp(18px,2.5vw,26px))}
.acc__inner p{color:var(--gray)}

/* ===== 14. STEPS ===== */
.steps{display:flex;flex-direction:column;gap:0;position:relative;counter-reset:step}
.steps::before{
  content:"";position:absolute;left:21px;top:18px;bottom:18px;width:2px;
  background:linear-gradient(180deg,var(--orange) 0%,var(--line-2) 100%);
}
.step{position:relative;display:flex;gap:1.4rem;padding-bottom:2.4rem}
.step:last-child{padding-bottom:0}
.step__num{
  position:relative;z-index:1;flex:none;
  width:44px;height:44px;border-radius:0;display:grid;place-items:center;
  background:var(--orange);color:#fff;
  font-family:"General Sans",sans-serif;font-weight:700;font-size:1rem;
  box-shadow:0 0 0 6px var(--paper);
}
.section--alt .step__num{box-shadow:0 0 0 6px var(--paper-alt)}
.step__phase{font-family:"General Sans",sans-serif;font-weight:700;font-size:.8rem;color:var(--orange);letter-spacing:.05em;display:block;margin-bottom:.2rem}
.step__title{font-size:1.25rem;margin-bottom:.45rem}
.step__text{font-size:1rem;color:var(--gray)}
.step__media{margin-top:1rem;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.steps__foot{margin-top:clamp(32px,4vw,44px)}

/* ===== 15. AVANT / APRÈS — PORTFOLIO ===== */
.ba{max-width:1180px;margin-inline:auto}
.ba__viewport{overflow:hidden}
.ba__track{display:flex;transition:transform .55s var(--ease);will-change:transform}
.ba__slide{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;gap:clamp(18px,3vw,28px)}
.ba__stage{order:1;min-width:0}
.ba__info{order:2;min-width:0}

/* Barre-titre du chantier (au-dessus du comparateur) */
.ba__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1.1rem;background:var(--ink);color:#fff;border:.5px solid var(--ink)}
.ba__name{font-family:"General Sans",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.ba__name .hl{color:var(--orange)}
.ba__tagp{font-family:"General Sans",sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);border:.5px solid var(--orange);padding:.3rem .7rem;white-space:nowrap}

/* Comparateur glissant */
.ba__pair{position:relative;aspect-ratio:16/10;overflow:hidden;user-select:none;touch-action:pan-y;
  background:var(--paper-warm);border:.5px solid var(--ink);border-top:0}
.ba__pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__before{position:absolute;inset:0;width:var(--pos,50%);overflow:hidden;border-right:3px solid var(--orange)}
.ba__before img{width:var(--pairw,1000px);max-width:none;height:100%}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:46px;transform:translateX(-50%);
  z-index:3;display:grid;place-items:center;cursor:ew-resize;background:transparent}
.ba__handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:var(--orange)}
.ba__handle::after{content:"\2194";position:relative;z-index:1;width:42px;height:42px;display:grid;place-items:center;
  background:var(--orange);color:#fff;font-size:1.1rem;font-weight:700;box-shadow:var(--shadow-md)}
.ba__lbl{position:absolute;top:14px;z-index:2;padding:.32rem .8rem;
  font-family:"General Sans",sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.ba__lbl--before{left:14px;background:rgba(29,30,32,.72);color:#fff}
.ba__lbl--after{right:14px;background:var(--orange);color:#fff}

/* Caractéristiques du chantier */
.ba__specs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:.5px solid var(--line)}
.ba__specs li{background:var(--paper);padding:.95rem 1.05rem;min-width:0}
/* mobile/tablette : Prestation pleine largeur en haut, Lieu + Durée côte à côte en dessous (évite la coupe de « Durée ») */
.ba__specs li:first-child{grid-column:1 / -1}
.ba__spec-num{display:block;font-family:"General Sans",sans-serif;font-weight:700;font-size:1.1rem;color:var(--orange);line-height:1.15}
.ba__spec-lbl{display:block;margin-top:.3rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ba__desc{margin-top:1rem;color:var(--gray);font-size:.96rem}

/* Pied : compteur · points · flèches */
.ba__foot{display:flex;align-items:center;gap:1rem;margin-top:1.6rem;flex-wrap:wrap}
.ba__count{font-family:"General Sans",sans-serif;font-weight:700;color:var(--ink);font-size:.95rem}
.ba__count em{color:var(--muted);font-style:normal;font-weight:600}
.ba__dots{display:flex;gap:8px;margin-inline:auto}
.ba__dot{width:28px;height:3px;background:var(--line-2);transition:background .25s var(--ease),width .25s var(--ease)}
.ba__dot.is-active{background:var(--orange);width:46px}
.ba__nav{display:flex;gap:.6rem}
.ba__prev,.ba__next{width:46px;height:46px;border:.5px solid var(--ink);background:transparent;color:var(--ink);
  display:grid;place-items:center;font-size:1.4rem;line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.ba__prev:hover,.ba__next:hover{background:var(--orange);color:#fff;border-color:var(--orange)}

@media(min-width:880px){
  .ba__slide{display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:clamp(30px,4vw,56px)}
  .ba__info{order:1}       /* caractéristiques à GAUCHE */
  .ba__stage{order:2}      /* avant/après à DROITE (plus petit) */
  .ba__specs{grid-template-columns:1fr;gap:2px}
  .ba__spec-num{font-size:1.3rem}
}

/* ===== 16. ZONES / CARTE SUISSE ===== */
.zones__grid{display:grid;gap:clamp(32px,4vw,56px);align-items:center}
.zones__map{position:relative;width:100%}
.zones__svg{width:100%;height:auto;overflow:visible}
.zones__path{fill:var(--paper-warm);stroke:var(--orange);stroke-width:2;stroke-linejoin:round}
.zones__lake{fill:#cbdde6;stroke:#a9c8d6;stroke-width:.5}
.zones__pin-g{cursor:pointer}
.zones__pin-hit{fill:transparent}
.zones__pin{fill:var(--orange);transform-box:fill-box;transform-origin:center;transition:transform .3s var(--ease)}
.zones__pin-ring{fill:none;stroke:var(--orange);stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0}
.zones__pin-label{font-family:"General Sans",sans-serif;font-weight:700;font-size:15px;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.zones__pin-g:hover .zones__pin,.zones__pin-g:focus-visible .zones__pin{transform:scale(1.4)}
.zones__pin-g:hover .zones__pin-label,.zones__pin-g:focus-visible .zones__pin-label{opacity:1}
.zones__pin-g.is-active .zones__pin{transform:scale(1.85)}
.zones__pin-g.is-active .zones__pin-label{opacity:1}
.zones__pin-g.is-active .zones__pin-ring{opacity:1;animation:pinPulse 1.8s ease-out infinite}
@keyframes pinPulse{0%{transform:scale(.6);opacity:.85}80%,100%{transform:scale(3);opacity:0}}
.zones__cities{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.4rem 0 1rem}
.zones__city{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .95rem;border:.5px solid var(--line-2);background:var(--paper);cursor:pointer;
  font-family:"General Sans",sans-serif;font-weight:600;font-size:.88rem;color:var(--ink-soft);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.zones__city::before{content:"";width:.5rem;height:.5rem;background:var(--orange);transition:background .2s var(--ease);flex:none}
.zones__city:hover{border-color:var(--orange);color:var(--ink)}
.zones__city.is-active{background:var(--orange);border-color:var(--orange);color:#fff}
.zones__city.is-active::before{background:#fff}
.zones__note{font-size:.95rem;color:var(--muted)}

/* ===== 17. ECO ===== */
.eco--accent{background:var(--orange-tint)}
.eco__grid{display:grid;gap:clamp(34px,4vw,56px);align-items:center}
.eco__num{
  font-family:"General Sans",sans-serif;font-weight:700;
  font-size:clamp(4rem,12vw,7.5rem);line-height:.9;color:var(--orange);letter-spacing:-.03em;
}
.eco__num-cap{display:block;font-family:"Inter",sans-serif;font-weight:600;font-size:1rem;color:var(--ink-soft);letter-spacing:0;margin-top:.4rem;max-width:24ch}
.eco__points{display:grid;grid-template-columns:1fr;gap:1.1rem}
.eco__point{background:var(--paper);border:.5px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem}
.eco__point h3{font-size:1.05rem;margin-bottom:.35rem;display:flex;align-items:center;gap:.6rem}
.eco__point h3 .ico{color:var(--orange);font-size:1.15rem}
.eco__point p{font-size:.95rem;color:var(--gray)}
.eco__foot{margin-top:1.6rem}

/* ===== 18. BANNIÈRE CTA ===== */
.cta{background:var(--orange);color:#fff;text-align:center}
.cta .wrap{max-width:880px}
.cta__title{color:#fff;margin-bottom:.5em}
.cta__text{font-size:var(--fs-lead);color:rgba(255,255,255,.92);max-width:56ch;margin-inline:auto;margin-bottom:2rem}
.cta__actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}

/* ===== 19. FORMULAIRE + COORDONNÉES ===== */
.cinfo{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:clamp(34px,4vw,52px)}
.cinfo__item{display:flex;gap:1rem;align-items:flex-start;background:var(--paper);border:.5px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem}
/* Picto INLINE (.fico) : SVG direct, fiable partout (pas de masque externe à charger) */
.fico{display:inline-block;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* encadré + picto inline */
.cinfo__icon{flex:none;width:2.6rem;height:2.6rem;border:.5px solid var(--line-2);display:grid;place-items:center;background:var(--orange-tint);color:var(--orange-700)}
.cinfo__icon .fico{width:1.35rem;height:1.35rem;stroke-width:1.7}
.cinfo__label{font-family:"General Sans",sans-serif;font-weight:600;color:var(--ink);font-size:.95rem;display:block;margin-bottom:.15rem}
.cinfo__val{font-size:.96rem;color:var(--gray)}
.cinfo__val a{color:var(--ink-soft);font-weight:500}
.cinfo__val a:hover{color:var(--orange)}

.form{background:var(--paper);border:.5px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,4vw,44px);box-shadow:var(--shadow-sm)}
.form__grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1/-1}
.field label{font-family:"General Sans",sans-serif;font-weight:600;font-size:.9rem;color:var(--ink)}
.field .req{color:var(--orange)}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem 1rem;border:.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-tint-2);
}
.field textarea{min-height:140px;resize:vertical}
.field--file input{padding:.6rem;background:var(--paper-alt)}
.field--check{flex-direction:row;align-items:flex-start;gap:.7rem}
.field--check input{width:1.15rem;height:1.15rem;margin-top:.25rem;flex:none;accent-color:var(--orange)}
.field--check label{font-family:"Inter",sans-serif;font-weight:400;font-size:.92rem;color:var(--gray);line-height:1.5}
.form .btn{width:100%;justify-content:center;margin-top:.4rem}

/* ===== 20. PROSE / CONTENU ===== */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:1.8em 0 .6em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.25rem;margin:1.4em 0 .5em}
.prose p,.prose ul{margin:0 0 1.1em}
.prose ul{display:grid;gap:.5rem;padding-left:1.3rem;list-style:disc}
.prose ul li{padding-left:.3rem}
.prose a{font-weight:600}
.content{display:grid;gap:clamp(30px,4vw,56px);align-items:center}
.content__media img{border-radius:var(--r-lg);box-shadow:var(--shadow-md);width:100%}

/* ===== 21. PIED DE PAGE ===== */
.site-footer{background:var(--paper-warm);border-top:.5px solid var(--line);color:var(--ink-soft)}
.footer__top{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,48px);padding-block:clamp(56px,7vw,84px)}
.footer__brand .brand{display:inline-flex;margin-bottom:1.1rem}
.footer__brand .brand__img{height:42px}
.footer__tag{max-width:34ch;color:var(--gray);margin-bottom:1.3rem}
.footer__contact-line{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem;font-weight:500}
.footer__contact-line .fico{width:1.85rem;height:1.85rem;padding:.42rem;box-sizing:border-box;border:.5px solid var(--line-2);background:rgba(255,255,255,.55);color:var(--orange)}
.footer__contact-line a{color:var(--ink-soft)}
.footer__contact-line a:hover{color:var(--orange)}
.footer__col h4{font-family:"General Sans",sans-serif;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:1.1rem}
.footer__col ul{display:grid;gap:.6rem}
.footer__col a{color:var(--gray);font-size:.96rem}
.footer__col a:hover{color:var(--orange)}
.footer__addr{display:grid;gap:.7rem;font-size:.96rem;color:var(--gray);font-style:normal}
.footer__addr span{display:flex;gap:.55rem;align-items:flex-start}
.footer__addr .fico{width:1.85rem;height:1.85rem;padding:.42rem;box-sizing:border-box;border:.5px solid var(--line-2);background:rgba(255,255,255,.55);color:var(--orange);margin-top:.1em}
.footer__addr a{color:var(--gray)}
.footer__addr a:hover{color:var(--orange)}
.footer__bottom{
  border-top:.5px solid var(--line);padding-block:1.5rem;
  display:flex;flex-direction:column;gap:.6rem;align-items:center;text-align:center;
  font-size:.88rem;color:var(--muted);
}
.footer__legal{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.footer__legal a{color:var(--muted)}
.footer__legal a:hover{color:var(--orange)}

/* ===== 22. WHATSAPP FLOTTANT ===== */
.wa-fab{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:250;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;color:#fff;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa-fab:hover{transform:translateY(-3px) scale(1.04);color:#fff;box-shadow:0 18px 38px -8px rgba(37,211,102,.7)}
.wa-fab svg{width:30px;height:30px;fill:currentColor}

/* ===== 23. MEDIA QUERIES (mobile-first) ===== */
@media (min-width:560px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .stats__item{border-right:.5px solid var(--line)}
  .stats__item:last-child{border-right:none}
  .cinfo{grid-template-columns:1fr 1fr}
  .footer__bottom{flex-direction:row;justify-content:space-between;text-align:left}
}
@media (min-width:720px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .cards--2,.cards--3,.cards--4{grid-template-columns:repeat(2,1fr)}
  .eco__points{grid-template-columns:1fr 1fr}
  .form__grid{grid-template-columns:1fr 1fr}
  .field--full{grid-column:1/-1}
  .footer__top{grid-template-columns:1.6fr 1fr 1fr 1.3fr}
}
@media (min-width:960px){
  :root{--header-h:96px}
  .nav{display:block}
  .burger{display:none}
  .header__tel{display:inline-flex}
  .header__cta{display:inline-flex}
  .services__grid{grid-template-columns:repeat(3,1fr)}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .cards--4{grid-template-columns:repeat(4,1fr)}
  .proof__grid{grid-template-columns:1fr 1.05fr;align-items:center}
  .zones__grid{grid-template-columns:1.1fr .9fr}
  .eco__grid{grid-template-columns:.85fr 1.15fr}
  .content{grid-template-columns:1fr 1fr}
  .content--media-first .content__media{order:-1}
  .hero__inner{padding-block:clamp(140px,18vh,200px) clamp(60px,9vh,100px)}
}
@media (min-width:1100px){
  .eco__points{gap:1.2rem}
}

/* ===== 24. PREFERS-REDUCED-MOTION ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .hero__scroll::after{animation:none}
  .zones__pin-ring{animation:none;opacity:0}
  .ba__track{transition:none}
}