/* RC Rénovation — direction D « Ardoise et cuivre » (validée par Rod le 29/10 : « plus premium, plus chaleureux, moins blanc »).
   Aplats bleu ardoise (la couleur des toits du pays) et gris pierre au lieu du blanc, orange cuivré du logo pour les accents, grandes photos.
   Animations dosées : une fois à l'arrivée ou au survol (titre mot par mot, icônes qui se dessinent, carte qui s'allume depuis Languidic,
   galerie avant/après qui défile seule) ; seule exception continue : le téléphone qui sonne discrètement. Tout est coupé si le visiteur
   a demandé à réduire les animations. Funnel Display (titres) + Figtree (texte). */
@font-face{font-family:"Funnel Display";src:url(/assets/fonts/funnel-display-wght.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}

:root{
  --ardoise:#2c3a48;--ardoise2:#374757;--ardoise3:#4a5b6c;--nuit:#232f3b;
  --cuivre:#ef7d32;--cuivre2:#d8692a;--cuivre-txt:#b4531a;
  --pierre:#eeece9;--pierre2:#e3e0dc;--blanc:#fff;
  --encre:#232a33;--texte:#4a525d;--gris:#6b7380;--clair:#c9d1da;--ligne:#dcd9d4;
  --r:22px;--r2:14px;--wrap:1260px;
  --titre:"Funnel Display",system-ui,sans-serif;--police:Figtree,system-ui,sans-serif;
  --ombre:0 1px 2px rgba(35,42,51,.06),0 18px 40px -22px rgba(35,42,51,.4);
  --ombre2:0 40px 80px -40px rgba(20,28,38,.7);
  --ease:cubic-bezier(.2,.75,.2,1);
  --ecailles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='40' viewBox='0 0 56 40'%3E%3Cpath d='M0 20a14 14 0 0 0 28 0a14 14 0 0 0 28 0M-14 40a14 14 0 0 0 28 0a14 14 0 0 0 28 0a14 14 0 0 0 28 0M-14 0a14 14 0 0 0 28 0a14 14 0 0 0 28 0a14 14 0 0 0 28 0' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.2'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.08rem/1.68 var(--police);color:var(--texte);background:var(--pierre);overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
/* un numéro de téléphone ne se coupe jamais en fin de ligne (repéré par Rod dans la FAQ, sur mobile) */
a[href^="tel:"]{white-space:nowrap}
p a,.prose a,.legal a{color:var(--cuivre-txt);text-underline-offset:3px;text-decoration-thickness:1.5px}
h1,h2,h3{font-family:var(--titre);color:var(--encre);margin:0;line-height:1.06;letter-spacing:-.022em;font-weight:700}
h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,3.3rem)}
h3{font-size:1.25rem;letter-spacing:-.015em}
p{margin:0 0 1em}
strong{color:var(--encre)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--cuivre);color:#fff;padding:8px 14px;z-index:99;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--cuivre);outline-offset:3px;border-radius:6px}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-weight:700}
/* petite ligne d'introduction : un trait cuivre, pas de capitales espacées */
.sur,.eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:.95rem;color:var(--cuivre-txt);margin:0 0 16px}
.sur::before,.eyebrow i{content:"";display:block;width:28px;height:2px;background:var(--cuivre);flex:none}
.lead{font-size:1.18rem}
.src{font-size:.84rem;color:var(--gris);margin-top:14px}
.lien{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--encre);text-decoration:none;border-bottom:2px solid var(--cuivre);padding-bottom:2px}
.lien .i{transition:transform .25s}.lien:hover .i{transform:translateX(4px)}

/* ---------------- barre de progression + en-tête (posé sur la photo ou l'ardoise, ardoise pleine dès qu'on défile) */
.progres{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.progres i{display:block;height:100%;width:100%;background:var(--cuivre);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.hd{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s,box-shadow .35s}
.hd.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
/* le flou est sur un calque à part : un backdrop-filter sur .hd enfermerait le menu mobile (position:fixed) dans l'en-tête */
.hd::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(44,58,72,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .35s}
.hd.scrolled::before,body.menu-ouvert .hd::before{opacity:1}
.hd-in{display:flex;align-items:center;gap:28px;height:100px;transition:height .3s var(--ease)}
.hd.scrolled .hd-in{height:82px}
.logo{display:block;width:clamp(170px,15vw,226px);flex:none;transition:width .3s var(--ease)}
.hd.scrolled .logo{width:clamp(150px,13vw,186px)}
.logo .lt,.ft-logo .lt{fill:#fff}.logo .lo,.ft-logo .lo{fill:var(--cuivre)}.logo .lg,.ft-logo .lg{fill:#c3cad3}
.nav{margin-left:auto}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav-l{position:relative;display:block;white-space:nowrap;padding:10px 12px;text-decoration:none;font-weight:600;font-size:.98rem;color:rgba(255,255,255,.86);transition:color .2s}
.nav-l::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--cuivre);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-l:hover,.nav-l[aria-current=page]{color:#fff}
.nav-l:hover::after,.nav-l[aria-current=page]::after{transform:scaleX(1)}
.nav-pied{display:none}
.hd-tel{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;background:var(--cuivre);color:#fff;text-decoration:none;font-weight:700;
  padding:14px 22px;border-radius:var(--r2);white-space:nowrap;box-shadow:0 14px 30px -14px rgba(239,125,50,.9);transition:background .2s,transform .2s}
.hd-tel:hover{background:var(--cuivre2);transform:translateY(-2px)}
.burger{display:none;width:48px;height:48px;border:0;background:rgba(255,255,255,.12);border-radius:var(--r2);position:relative;cursor:pointer}
.burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:#fff;transition:transform .3s,top .3s}
.burger span:first-child{top:19px}.burger span:last-child{top:27px}
.burger[aria-expanded=true] span:first-child{top:23px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:23px;transform:rotate(-45deg)}
@media (max-width:1180px){
  .burger{display:block}
  .hd-tel span{display:none}.hd-tel{padding:14px;margin-left:auto}
  .nav{position:fixed;inset:82px 0 0 0;background:var(--ardoise) var(--ecailles);padding:22px 24px 30px;display:flex;flex-direction:column;
    opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s,transform .3s,visibility .3s;overflow:auto}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav ul{flex-direction:column;gap:4px}
  .nav-l{font-family:var(--titre);font-size:1.7rem;font-weight:700;padding:12px 4px;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-l::after{display:none}
  .nav-l[aria-current=page]{color:var(--cuivre)}
  .nav-pied{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:26px;color:var(--clair)}
  .nav-pied a{display:flex;gap:10px;align-items:center;color:var(--cuivre);font-size:1.6rem;font-weight:800;text-decoration:none}
  body.menu-ouvert{overflow:hidden}
  body.menu-ouvert .hd{background:var(--ardoise)}
}

/* ---------------- boutons */
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 28px;border-radius:var(--r2);font:700 1.02rem/1 var(--police);
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s;overflow:hidden}
.btn:hover{transform:translateY(-2px)}
.btn-o{background:var(--cuivre);color:#fff;box-shadow:0 16px 32px -16px rgba(239,125,50,.95)}
.btn-o:hover{background:var(--cuivre2)}
.btn-verre{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.btn-verre:hover{background:rgba(255,255,255,.22)}
.btn-l{background:#fff;color:var(--encre);border-color:var(--ligne)}
.btn-l:hover{border-color:var(--encre)}
.btn-blanc{background:#fff;color:var(--encre)}
/* reflet au survol des boutons cuivre */
.brille{isolation:isolate}
.brille::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .7s}
.brille:hover::after{left:130%}
/* téléphone : petite sonnerie toutes les 8 s */
.sonne{animation:sonne 8s 3s infinite;transform-origin:50% 50%}
@keyframes sonne{0%,88%,100%{transform:none}90%{transform:rotate(-14deg)}92%{transform:rotate(12deg)}94%{transform:rotate(-10deg)}96%{transform:rotate(8deg)}}

/* ---------------- héros de l'accueil : photo plein écran + bande des engagements */
.hero-plein{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:150px;color:#fff;overflow:hidden;background:var(--ardoise)}
.hp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;animation:zoom 24s ease-out both}
@keyframes zoom{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.hero-plein::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(28,38,49,.9) 0%,rgba(28,38,49,.58) 44%,rgba(28,38,49,.06) 78%),linear-gradient(0deg,rgba(28,38,49,.72),transparent 42%)}
.hp-txt{position:relative;z-index:2;padding-bottom:44px}
.lieu{display:inline-flex;align-items:center;gap:12px;font:600 .98rem/1.4 var(--police);letter-spacing:0;color:#fff;opacity:.92;margin:0 0 22px}
.lieu i{width:28px;height:2px;background:var(--cuivre)}
.slogan{font-family:var(--titre);font-weight:700;line-height:1.05;letter-spacing:-.022em;color:#fff;font-size:clamp(2.7rem,1.4rem + 4.6vw,5.3rem);max-width:12.5em;margin:0}
.accent{color:var(--cuivre)}
.chapo{font-size:1.25rem;max-width:32em;margin:26px 0 0;color:#e6eaef}
.engagements{position:relative;z-index:2;background:var(--ardoise) var(--ecailles);border-top:1px solid rgba(255,255,255,.08)}
.engagements .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.engagements .wrap>div{display:flex;gap:16px;align-items:center;padding:26px 0 26px 28px;border-left:1px solid rgba(255,255,255,.1)}
.engagements .wrap>div:first-child{border-left:0;padding-left:0}
.engagements p{margin:0}
.engagements b{display:block;color:#fff;font-size:1.05rem}
.engagements small{color:var(--clair);font-size:.92rem}
.engagements .i{width:30px;height:30px;color:var(--cuivre)}
/* apparitions du héros, une seule fois */
.mot{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.mot>span{display:inline-block}
.js .mot>span{transform:translateY(105%);animation:monteMot .9s var(--ease) forwards;animation-delay:calc(.25s + var(--i) * .08s)}
@keyframes monteMot{to{transform:none}}
.js .lieu i{transform:scaleX(0);transform-origin:left;animation:trait .8s .1s var(--ease) forwards}
@keyframes trait{to{transform:none}}
.js .hero-plein .lieu,.js .hero-plein .chapo,.js .hero-plein .ctas,.js .engagements .wrap>div{opacity:0;animation:apparait .9s ease forwards}
.js .hero-plein .chapo{animation-delay:.8s}.js .hero-plein .ctas{animation-delay:1s}
.js .engagements .wrap>div:nth-child(1){animation-delay:1.25s}.js .engagements .wrap>div:nth-child(2){animation-delay:1.4s}.js .engagements .wrap>div:nth-child(3){animation-delay:1.55s}
@keyframes apparait{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .dessine *{stroke-dasharray:80;stroke-dashoffset:80;animation:dessine 1.4s 1.6s ease forwards}
@keyframes dessine{to{stroke-dashoffset:0}}

/* ---------------- héros des pages intérieures : bande ardoise */
.hero{position:relative;background:var(--ardoise) var(--ecailles);color:var(--clair);padding:170px 0 90px;overflow:hidden}
.hero-fond{display:none}
.hero h1{color:#fff;font-size:clamp(2.2rem,1.4rem + 3vw,3.9rem);margin-bottom:22px}
.hero .hero-p,.hero .hero-p p{font-size:1.15rem;color:#dfe5ec;max-width:38em}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.hero-vis{position:relative}
.hero-court{padding-bottom:72px}
.hero-court .hero-p{max-width:46em}
.js .hero h1,.js .hero .hero-p,.js .hero .ctas,.js .hero .eyebrow,.js .hero-vis{opacity:0;animation:apparait .9s ease forwards}
.js .hero .eyebrow{animation-delay:.05s}.js .hero h1{animation-delay:.15s}.js .hero .hero-p{animation-delay:.35s}.js .hero .ctas{animation-delay:.5s}.js .hero-vis{animation-delay:.3s}
.eyebrow{color:var(--cuivre)}
.ariane ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 26px;padding:0;font-size:.9rem;color:var(--clair)}
.ariane li+li::before{content:"/";margin-right:6px;opacity:.5}
.ariane a{color:#fff;text-decoration:none;opacity:.85}.ariane a:hover{opacity:1;text-decoration:underline}
.glisse{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);background:#fff;color:var(--encre);font-weight:700;font-size:.88rem;padding:9px 16px;border-radius:99px;box-shadow:var(--ombre);white-space:nowrap}
.ph-commune{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--ombre2);position:relative}
.ph-commune img{width:100%;height:100%;object-fit:cover}
.ph-commune figcaption{position:absolute;right:10px;bottom:8px;font-size:.72rem;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.ph-commune figcaption a{color:inherit}
.badge-cp{position:absolute;right:-14px;bottom:-22px;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:var(--r2);background:#fff;color:var(--encre);
  font:700 1.1rem var(--titre);box-shadow:var(--ombre)}
.badge-cp small{display:block;font:600 .8rem var(--police);color:var(--gris)}
.badge-cp .i{width:38px;height:38px;padding:8px;border-radius:10px;background:var(--cuivre);color:#fff}
.flotte{animation:flotte 6s ease-in-out infinite}
@keyframes flotte{50%{transform:translateY(-6px)}}
.meteo{position:absolute;left:-24px;top:24px;z-index:3;display:flex;align-items:center;gap:12px;max-width:330px;padding:12px 16px 12px 12px;border-radius:var(--r2);
  background:#fff;color:var(--encre);box-shadow:var(--ombre)}
.meteo[hidden]{display:none}
.meteo-ic{width:46px;height:46px;flex:none;border-radius:10px;background:var(--pierre);display:flex;align-items:center;justify-content:center}
.meteo-ic svg{width:32px;height:32px}
.meteo-t{display:flex;flex-direction:column;line-height:1.15}
.meteo-t b{font:700 1.35rem var(--titre)}
.meteo-t small{font-size:.75rem;color:var(--gris);font-weight:600}
.meteo-c{font-size:.84rem;line-height:1.3;padding-left:12px;border-left:1px solid var(--ligne)}
.meteo-c b{color:var(--cuivre-txt)}
/* diaporama (pages commune sans photo) */
.dia{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre2);background:var(--ardoise2)}
.dia-s{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s ease}
.dia-s.on{opacity:1}
.dia-s img{width:100%;height:100%;object-fit:cover}
.dia-s.on img{animation:kenburns 9s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.dia-s figcaption{position:absolute;left:16px;bottom:16px;padding:9px 13px;border-radius:10px;background:rgba(28,38,49,.75);color:#fff;font-size:.85rem}
.dia-s figcaption b{display:block;font-family:var(--titre)}
.dia-pts{position:absolute;right:18px;top:18px;display:flex;gap:6px}
.dia-pts button{width:9px;height:9px;padding:0;border:0;border-radius:9px;background:rgba(255,255,255,.6);cursor:pointer;transition:width .3s}
.dia-pts button[aria-current=true]{width:24px;background:#fff}

/* ---------------- sections */
.sec{padding:110px 0}
.tete{max-width:760px;margin-bottom:46px}
.tete p{margin-top:16px}
.tete-l{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.tete-l>p{max-width:28em;margin:0}
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.vu{opacity:1;transform:none}
.prose{max-width:46em}
.prose h2{margin-bottom:24px}

/* présentation de l'accueil */
.pres-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.pres-grid>*,.produits{min-width:0;max-width:100%}
.pres-photos{position:relative;height:560px}
.pres-photos img{position:absolute;border-radius:var(--r);object-fit:cover;box-shadow:var(--ombre2)}
.pres-photos .p1{top:0;right:0;width:78%;height:72%}
.pres-photos .p2{bottom:0;left:0;width:56%;height:52%;border:8px solid var(--pierre)}
.pres-photos .note{position:absolute;right:6%;bottom:9%;margin:0;background:#fff;border-radius:var(--r2);padding:16px 20px;box-shadow:var(--ombre);font-size:.92rem;max-width:240px}
.pres-photos .note b{display:block;font:700 1.2rem var(--titre);color:var(--encre)}
/* logos des fabricants : défilement continu en boucle (pause au survol), cases identiques quel que soit le format du logo */
.produits{margin-top:30px;padding-top:24px;border-top:1px solid var(--ligne)}
.produits>span{display:block;font-size:.9rem;color:var(--gris);margin-bottom:14px}
.logos-defile{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-piste,.logos-copie{display:flex;gap:16px;width:max-content}
.logos-piste{animation:logos 18s linear infinite}
.logos-copie{padding-left:0}
.logos-defile:hover .logos-piste{animation-play-state:paused}
@keyframes logos{to{transform:translateX(calc(-50% - 8px))}}
.produit{display:flex;align-items:center;justify-content:center;flex:none;width:250px;height:104px;padding:16px 22px;background:#fff;border-radius:14px;transition:box-shadow .2s}
.produit:hover{box-shadow:var(--ombre)}
.produit img{width:auto;height:auto;max-width:100%;max-height:64px;object-fit:contain}

/* galerie avant / après sur ardoise */
.sec-galerie{background:var(--ardoise) var(--ecailles);color:var(--clair)}
.sec-galerie h2{color:#fff}
.sec-galerie .sur{color:var(--cuivre)}
.galerie{max-width:1120px;margin:0 auto}
.galerie .ba-vue{height:min(64vh,600px);width:auto;max-width:100%;margin:0 auto;box-shadow:var(--ombre2)}
.gal-leg{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:18px 0 0}
.gal-leg b{color:#fff}
.gal-leg a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid var(--cuivre);padding-bottom:2px}
.gal-choix{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px}
.gal-choix button{all:unset;cursor:pointer;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;outline:2px solid transparent;outline-offset:3px;opacity:.6;transition:opacity .2s,outline-color .2s}
.gal-choix button:hover{opacity:.9}
.gal-choix button.on{opacity:1;outline-color:var(--cuivre)}
.gal-choix button:focus-visible{outline-color:#fff}
.gal-choix img{width:100%;height:100%;object-fit:cover}
.gal-choix span{position:absolute;left:8px;bottom:6px;color:#fff;font-size:.8rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.gal-choix button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--cuivre)}
.gal-choix.auto button.on::after{animation:barre 7s linear forwards}
@keyframes barre{to{width:100%}}

/* comparateur avant / après */
.ba{margin:0}
.ba-vue{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ardoise2);--pos:50%;user-select:none;touch-action:pan-y;box-shadow:var(--ombre)}
.ba-vue img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-ap{position:absolute;inset:0}
.ba-av{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);will-change:clip-path}
.ba-av img{position:absolute;inset:0}
.ba-tag{position:absolute;top:16px;font-weight:700;font-size:.82rem;padding:6px 12px;border-radius:9px;background:rgba(28,38,49,.72);color:#fff;backdrop-filter:blur(4px)}
.ba-tag-av{left:16px}.ba-tag-ap{right:16px;background:var(--cuivre)}
.ba-ligne{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.ba-poignee{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--cuivre);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(239,125,50,.25);transition:transform .2s}
.ba-poignee svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ba-r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;touch-action:pan-y}
.ba-vue:hover .ba-poignee,.ba-vue:focus-within .ba-poignee{transform:scale(1.1)}
.ba-vue:focus-within{outline:3px solid var(--cuivre);outline-offset:3px}
.ba-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:14px;font-size:.98rem;color:var(--encre)}
.ba-cap .mono{color:var(--cuivre-txt)}
.ba-hero .ba-vue{box-shadow:var(--ombre2)}
.ba-hero .ba-cap{display:none}

/* prestations : grandes photos */
.tuiles{display:grid;gap:20px}
.tuiles-4{grid-template-columns:1.25fr 1fr;grid-template-rows:330px 330px 270px}
.tuiles-4 .tuile:first-child{grid-row:1/3}
.tuiles-4 .tuile:last-child{grid-column:1/-1}
.tuiles-3{grid-template-columns:repeat(3,1fr);grid-auto-rows:380px}
.tuile{position:relative;border-radius:var(--r);overflow:hidden;color:#fff;display:flex;align-items:flex-end;text-decoration:none;background:var(--ardoise)}
.tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.js .tuile.reveal img{transform:scale(1.14)}
.js .tuile.reveal.vu img{transform:scale(1)}
.tuile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,38,49,.92) 0%,rgba(28,38,49,.3) 55%,rgba(28,38,49,0) 82%)}
.js .tuile.reveal.vu:hover img,.tuile:hover img{transform:scale(1.06);transition-duration:.8s}
.tuiles-4 .tuile:last-child img{object-position:center 32%}
.tuile-c{position:relative;z-index:2;padding:30px;width:100%}
.tuile h3{color:#fff;font-size:1.7rem;margin-bottom:8px}
.tuiles-4 .tuile:first-child h3{font-size:2.3rem}
.tuile p{margin:0;color:#dfe4ea;font-size:1rem;max-width:32em;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .4s}
.tuile:hover p,.tuile:focus-visible p,.tuiles-4 .tuile:first-child p{max-height:140px;opacity:1}
.tuile-fl{position:absolute;right:24px;top:24px;z-index:2;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);display:grid;place-items:center;transition:background .25s}
.tuile:hover .tuile-fl{background:var(--cuivre)}
.tuile-fl .i{width:20px;height:20px;transition:transform .25s}.tuile:hover .tuile-fl .i{transform:translateX(3px)}

/* zone : la carte en disque sur ardoise */
.sec-zone{background:var(--ardoise) var(--ecailles);color:var(--clair)}
.sec-zone h2{color:#fff}
.sec-zone .sur{color:var(--cuivre)}
.zone-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}
.carte-box{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#35485b 0%,#2f4152 60%,#2a3a49 100%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.06)}
.carte-load{position:absolute;inset:0;display:grid;place-items:center;font-size:.95rem}
.carte-box svg{width:100%;height:100%}
.plan .communes path{fill:#4c6075;stroke:#2f4152;stroke-width:.25;transition:fill .25s,opacity .6s ease;transition-delay:0s,var(--t,0s)}
.js .carte-box .plan .communes path{opacity:0}
.js .carte-box.allume .plan .communes path{opacity:1}
.plan .communes path.a-page{fill:#5d748b;cursor:pointer}
.plan .communes path.a-page.proche{fill:#6f879e}
.plan .communes path.hors{fill:#3a4c5e}
.plan .communes path.a-page.hov,.plan .communes path.focus{fill:var(--cuivre)!important}
.plan .cercles circle{fill:none;stroke:rgba(255,255,255,.28);stroke-width:.22;stroke-dasharray:.9 .9}
.plan .cercles .rayon{stroke:var(--cuivre);stroke-width:.55;stroke-dasharray:252;stroke-dashoffset:0;transition:stroke-dashoffset 2.2s cubic-bezier(.6,0,.2,1) .5s}
.js .carte-box .plan .cercles .rayon{stroke-dashoffset:252}
.js .carte-box.allume .plan .cercles .rayon{stroke-dashoffset:0}
.plan .cercles text{font:700 3.3px var(--police);fill:var(--cuivre);transition:opacity .6s 2.4s}
.js .carte-box .plan .cercles text,.js .carte-box .plan .villes,.js .carte-box .plan .pays{opacity:0}
.js .carte-box.allume .plan .cercles text,.js .carte-box.allume .plan .villes{opacity:1}
.plan .villes{transition:opacity .8s 1.6s}
.plan .villes circle{fill:#fff;r:.38;opacity:.55}
.plan .villes text{font:700 3.2px var(--police);fill:#fff;paint-order:stroke;stroke:#2c3a48;stroke-width:.7px;pointer-events:none}
.plan .pays{display:none}
.plan .siege .pt{fill:var(--cuivre);stroke:#fff;stroke-width:.5}
.plan .siege .onde{fill:none;stroke:var(--cuivre);stroke-width:.4;transform-box:fill-box;transform-origin:center;animation:onde 2.6s ease-out infinite}
@keyframes onde{from{transform:scale(1);opacity:1}to{transform:scale(3.4);opacity:0}}
.plan .siege text{font:800 4.4px var(--titre);fill:#fff;paint-order:stroke;stroke:#2c3a48;stroke-width:.8px}
.plan.zoom .communes path{stroke-width:.06}
.plan.zoom .villes circle{r:.2}
.plan.zoom .villes text{font-size:.82px;stroke-width:.22px}
.plan.zoom .siege .pt{r:.55;stroke-width:.15}.plan.zoom .siege .onde{r:.7;stroke-width:.12}
.plan.zoom .siege text{font-size:1px;stroke-width:.24px}
.plan.zoom .cercles text{display:none}
.plan.zoom .cercles circle{stroke-width:.07;stroke-dasharray:.3 .3}
.plan.zoom .cercles .rayon{stroke-width:.14;stroke-dasharray:none}
.cherche{position:relative;margin:28px 0 16px}
.cherche-champ{position:relative}
.cherche-champ .i{position:absolute;left:18px;top:50%;width:21px;height:21px;margin-top:-10.5px;color:#aeb9c5}
.cherche input{width:100%;font:inherit;font-size:1.1rem;padding:17px 20px 17px 52px;border-radius:var(--r2);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;outline:none;transition:border-color .2s,background .2s}
.cherche input::placeholder{color:#aeb9c5}
.cherche input:focus{border-color:var(--cuivre);background:rgba(255,255,255,.12)}
.q-sug{position:absolute;left:0;right:0;top:62px;z-index:5;list-style:none;margin:0;padding:0;background:#fff;border-radius:var(--r2);overflow:hidden;box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.q-sug:empty{display:none}
.q-sug li{display:flex;justify-content:space-between;gap:12px;padding:13px 18px;color:var(--encre);font-weight:600;cursor:pointer;border-top:1px solid var(--pierre)}
.q-sug li:hover,.q-sug li[aria-selected=true]{background:var(--pierre)}
.q-sug small{color:var(--gris);font-weight:500}
.q-res{margin:12px 0 0;font-size:.95rem;color:#fff}
.q-res:empty{display:none}
.carte-info{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--ardoise2);border-radius:var(--r2);padding:18px 22px;min-height:78px;margin:0}
.carte-info b{font:700 1.5rem var(--titre);color:#fff}
.carte-info span{font-size:.95rem;text-align:right}
.carte-info a{color:#fff;font-weight:700;border-bottom:2px solid var(--cuivre);text-decoration:none}
.carte-info.change{animation:pop .35s ease}
@keyframes pop{50%{transform:scale(1.02)}}
.anneaux{display:flex;gap:22px;flex-wrap:wrap;margin:16px 0 0;font-size:.88rem}
.anneaux i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:8px;vertical-align:-1px}
.anneaux .a20{background:#6f879e}.anneaux .a40{background:#5d748b}.anneaux .hz{background:#3a4c5e;outline:1px solid rgba(255,255,255,.18)}
.villes{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:26px 0 18px;padding:0}
.villes a{display:block;padding:9px 15px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;transition:background .2s,transform .2s}
.villes a:hover{background:var(--cuivre);transform:translateY(-2px)}
.sec-zone .lien{color:#fff}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;font:700 1.15rem/1.3 var(--titre);color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;position:relative;transition:background .2s,transform .3s}
.faq summary span::before,.faq summary span::after{content:"";position:absolute;left:9px;right:9px;top:14px;height:2px;background:var(--encre);transition:transform .3s}
.faq summary span::after{transform:rotate(90deg)}
.faq details[open] summary span{background:var(--cuivre);transform:rotate(180deg)}
.faq details[open] summary span::before,.faq details[open] summary span::after{background:#fff}
.faq details[open] summary span::after{transform:rotate(0)}
.faq summary:hover{color:var(--cuivre-txt)}
.faq details p{margin:0 0 22px;max-width:46em}
.faq details small{color:var(--gris);font-family:var(--police);font-weight:500;font-size:.85rem;margin-left:8px}

/* appel final en cuivre */
.sec-cta{background:var(--cuivre);color:#fff;padding:100px 0}
.cta-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.sec-cta h2{color:#fff;font-size:clamp(2.2rem,1.4rem + 2.8vw,3.8rem);margin-bottom:16px}
.sec-cta p{color:#fff3ea;margin:0;max-width:34em}
.cta-cartes{display:grid;gap:14px}
.cta-cartes a{display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:18px;background:rgba(44,58,72,.94);color:#fff;text-decoration:none;transition:background .25s,transform .25s}
.cta-cartes a:hover{background:var(--ardoise);transform:translateX(4px)}
.cta-cartes small{display:block;color:var(--clair);font-size:.88rem}
.cta-cartes b{font:700 1.5rem var(--titre)}
.cta-cartes .i{width:26px;height:26px;transition:transform .3s}
.cta-cartes a:hover .i{transform:scale(1.15)}

/* ---------------- pages prestation */
.liste-presta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.liste-presta li{padding:26px 0;border-top:1px solid var(--ligne)}
.liste-presta .num{display:none}
.liste-presta h3{margin-bottom:8px}
.liste-presta h3::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--cuivre);margin-right:12px;vertical-align:2px}
.liste-presta p{margin:0}
.sec-creme{background:var(--pierre2)}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.point{background:#fff;border-radius:var(--r);padding:32px;box-shadow:var(--ombre)}
.point h3{margin-bottom:12px}
.point p{margin:0}
.sec-local{padding:80px 0}
.local h2{font-size:clamp(1.5rem,1.2rem + 1vw,2.2rem);margin-bottom:16px}
/* dessin de toiture (page Réparations), sur ardoise */
.dessin-box .coupe-box{margin:0;background:var(--ardoise2);border-radius:var(--r);padding:16px;box-shadow:var(--ombre2)}
.coupe{width:100%;height:auto}
.coupe path{fill:none;stroke:#e9edf2;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.coupe .cp-toit{stroke-width:3.2}
.coupe .cp-l,.coupe .cp-t,.coupe .cp-sol{stroke:#6d8093;stroke-width:1.4}
.coupe .cp-faitiere,.coupe .cp-solin,.coupe .cp-gout,.coupe .cp-rive{stroke:var(--cuivre);stroke-width:3}
.coupe .cp-velux{fill:#4f6377}
.js .coupe path{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2.4s var(--ease)}
.js .coupe.trace path{stroke-dashoffset:0}
.cp-rep circle{fill:#6d8093;transition:fill .2s}
.cp-rep text{font:800 13px var(--titre);fill:#fff;text-anchor:middle}
.cp-rep.on circle{fill:var(--cuivre)}
.js .cp-rep{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .4s,transform .5s var(--ease)}
.js .coupe.trace .cp-rep{opacity:1;transform:none}
.coupe-leg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 14px;list-style:none;margin:14px 0 0;padding:0;font-size:.88rem;font-weight:600;color:var(--clair)}
.coupe-leg li{display:flex;align-items:center;gap:8px}
.coupe-leg b{width:22px;height:22px;border-radius:50%;background:#6d8093;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;flex:none}
.coupe-leg li.on b{background:var(--cuivre)}

/* climat, en chiffres (sobre : le chiffre dans une phrase) */
.sec-climat{background:var(--pierre2)}
.mesures{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px}
.mesures li{padding-top:26px;border-top:2px solid var(--encre)}
.mesures b{display:block;font:700 3.2rem/1 var(--titre);color:var(--cuivre-txt);letter-spacing:-.03em}
.mesures li>span:not([class^=anim]){display:block;font-weight:700;color:var(--encre);margin:10px 0 8px}
.mesures small{display:block;font-size:.95rem}
.mesures [class^=anim]{display:none}

/* étapes : quatre colonnes reliées par un trait cuivre qui se remplit */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 36px;position:relative}
.etapes::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ligne)}
.etapes::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--cuivre);transform:scaleX(0);transform-origin:left;transition:transform 2s var(--ease) .3s}
.etapes.vu::after{transform:none}
.etapes li{padding-top:28px}
.et-n{display:block;font:700 .95rem var(--titre);color:var(--cuivre-txt);margin-bottom:12px}
.et-n::after{content:" ·"}
.etapes h3{margin-bottom:10px}
.etapes p{margin:0}

/* pages commune */
.scs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.sc{display:flex;flex-direction:column;gap:6px;padding:24px 56px 24px 0;border-top:1px solid var(--ligne);text-decoration:none;position:relative;transition:padding .3s}
.sc .i{position:absolute;right:6px;top:28px;width:34px;height:34px;padding:7px;border-radius:50%;background:#fff;color:var(--encre);transition:background .25s,color .25s}
.sc b{font:700 1.3rem var(--titre);color:var(--encre);transition:color .25s}
.sc span{font-size:.98rem}
.sc:hover b{color:var(--cuivre-txt)}
.sc:hover .i{background:var(--cuivre);color:#fff}
.bati-grid,.risques-grid,.vois-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.risques-grid{align-items:start}
.barres{display:grid;gap:16px}
.barre{display:grid;grid-template-columns:110px 1fr 52px;align-items:center;gap:14px;font-weight:600;color:var(--encre)}
.barre i{height:14px;border-radius:7px;background:#fff;position:relative;overflow:hidden}
.barre i::after{content:"";position:absolute;inset:0;width:calc(var(--v) * 1%);background:var(--ardoise);border-radius:7px;transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.barres.vu .barre i::after,.barres:not(.reveal) .barre i::after{transform:none}
.barre:nth-child(2) i::after{transition-delay:.12s}.barre:nth-child(3) i::after{transition-delay:.24s}.barre:nth-child(4) i::after{transition-delay:.36s;background:var(--cuivre)}
.barre b{text-align:right}
.vois{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:24px 0 0;padding:0}
.vois a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;background:#fff;color:var(--encre);font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.vois a:hover{background:var(--ardoise);color:#fff}
.carte-mini{max-width:460px;width:100%;margin-left:auto}

/* réalisations */
.fiches{display:grid;gap:80px}
.fiche{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.fiche:nth-child(even) .ba{order:2}
.fiche .ba-vue{height:min(70vh,520px);width:auto;max-width:100%;margin:0 auto}
.sec-risques,.sec-etapes{background:var(--pierre2)}
.fiche-txt h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);margin-bottom:18px}
.fiche-txt dl{display:grid;gap:8px;margin:0 0 18px}
.fiche-txt dl div{display:grid;grid-template-columns:90px 1fr;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--ligne)}
.fiche-txt dt{color:var(--gris);font-size:.9rem}
.fiche-txt dd{margin:0;font-weight:600;color:var(--encre)}

/* zone : listes */
.table-box{overflow-x:auto;background:#fff;border-radius:var(--r);box-shadow:var(--ombre)}
.tab{width:100%;border-collapse:collapse;font-size:.95rem}
.tab th,.tab td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--pierre)}
.tab th{font-weight:700;color:var(--encre);background:var(--pierre2);position:sticky;top:0}
.tab tbody tr:hover{background:var(--pierre)}
.tab a{color:var(--encre);font-weight:600;text-decoration-color:var(--cuivre);text-underline-offset:3px}
.deps{display:grid;gap:36px}
.dep h3{font-size:1.6rem;margin-bottom:8px}
.dep h3 small{font:500 .95rem var(--police);color:var(--gris);margin-left:8px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start}
.contact-grid>*,.f2>*{min-width:0}
.form{display:grid;gap:18px;background:#fff;border-radius:var(--r);padding:40px;box-shadow:var(--ombre)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:grid;gap:7px;font-weight:600;color:var(--encre);font-size:.95rem}
.form input,.form select,.form textarea{font:inherit;font-weight:400;padding:14px 16px;border:1px solid var(--ligne);border-radius:12px;background:var(--pierre);color:var(--encre);transition:border-color .2s,background .2s;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--cuivre);background:#fff}
.form .err{border-color:#c62f2f;background:#fff5f5}
.form .ok{display:flex;gap:12px;align-items:flex-start;font-weight:400}
.form .ok input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--cuivre)}
.form .hp{position:absolute;left:-9999px}
.form .btn{justify-self:start}
.form-msg{margin:0;font-weight:600}
.form-msg.ok{color:#1d7a46}.form-msg.ko{color:#c62f2f}
.form-rgpd{font-size:.85rem;color:var(--gris);margin:0}
.coord{display:grid;gap:16px;background:var(--ardoise) var(--ecailles);color:var(--clair);border-radius:var(--r);padding:34px}
.coord p{display:flex;gap:12px;margin:0;align-items:flex-start}
.coord p .i{color:var(--cuivre);margin-top:3px}
.coord a{color:#fff}
.coord-tel{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:var(--r2);background:var(--cuivre);color:#fff;text-decoration:none;margin-bottom:6px;transition:background .2s}
.coord-tel:hover{background:var(--cuivre2)}
.coord-tel .i{width:28px;height:28px}
.coord-tel span{display:flex;flex-direction:column;font:700 1.6rem/1.1 var(--titre)}
.coord-tel small{font:600 .85rem var(--police);opacity:.9;margin-bottom:4px}

/* textes légaux */
.legal{max-width:52em}
.legal h2{font-size:1.5rem;margin:36px 0 12px}
.legal h2:first-child{margin-top:0}

/* ---------------- pied de page */
.ft{background:var(--nuit);color:#9eaab7;padding:80px 0 0;font-size:.97rem}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:56px}
.ft-logo{display:block;width:220px;margin-bottom:20px}
.ft-nap{display:grid;gap:10px;margin-top:20px}
.ft-nap span,.ft-nap a{display:flex;gap:10px;align-items:center;color:#d6dde5;text-decoration:none}
.ft-nap .i{color:var(--cuivre)}
.ft-h{font:700 1.15rem var(--titre);color:#fff;margin-bottom:16px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft ul a{color:#b9c3cd;text-decoration:none;transition:color .2s}
.ft ul a:hover{color:#fff}
.ft-zone{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid var(--cuivre)}
.ft-bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:64px;padding-top:26px;padding-bottom:30px;border-top:1px solid rgba(255,255,255,.08);font-size:.88rem}
.ft-bas a{color:#b9c3cd}
.ft-credit{display:inline-flex;align-items:center;gap:10px;text-decoration:none;opacity:.85;transition:opacity .2s}
.ft-credit:hover{opacity:1}
.ft-credit img{height:30px;width:auto}
.ft-bas{align-items:center}
.fab{position:fixed;right:16px;bottom:16px;z-index:40;display:none;align-items:center;gap:10px;padding:15px 20px;border-radius:99px;background:var(--cuivre);color:#fff;font-weight:700;text-decoration:none;
  box-shadow:0 16px 34px -12px rgba(239,125,50,.9);transform:translateY(120px);transition:transform .4s var(--ease)}
.fab.on{transform:none}

/* ---------------- tablette / téléphone */
@media (max-width:1060px){
  .hero-grid,.pres-grid,.zone-grid,.faq-grid,.cta-grid,.bati-grid,.risques-grid,.vois-grid,.contact-grid,.fiche{grid-template-columns:1fr;gap:44px}
  .fiche:nth-child(even) .ba{order:0}
  .tete-l{flex-direction:column;align-items:flex-start;gap:16px}
  .pres-photos{height:440px}
  .carte-box{max-width:560px;width:100%;margin:0 auto}
  .carte-mini{margin:0 auto}
  .tuiles-4,.tuiles-3{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:320px}
  .tuiles-4 .tuile:first-child{grid-row:auto;grid-column:1/-1}
  .tuile p{max-height:140px;opacity:1}
  .points,.mesures{grid-template-columns:1fr;gap:28px}
  .etapes{grid-template-columns:1fr 1fr;gap:28px 36px}
  .gal-choix{grid-template-columns:repeat(3,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr}.ft-id{grid-column:1/-1}
  .meteo{left:12px;top:12px}
  .badge-cp{right:12px}
}
@media (max-width:720px){
  .wrap{padding:0 18px}
  .sec{padding:76px 0}
  .hd-in{height:84px}.hd.scrolled .hd-in{height:74px}
  .logo{width:168px}.hd.scrolled .logo{width:150px}
  .nav{inset:74px 0 0 0}
  .hero-plein{padding-top:120px}
  .chapo{font-size:1.1rem}
  .engagements .wrap{grid-template-columns:1fr}
  .engagements .wrap>div{border-left:0;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
  .engagements .wrap>div:first-child{border-top:0}
  .hero{padding:130px 0 70px}
  .pres-photos{height:340px}.pres-photos .note{display:none}
  .tuiles-4,.tuiles-3{grid-template-columns:1fr;grid-auto-rows:300px}
  .liste-presta,.scs,.etapes{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .form{padding:26px 20px}
  .ft-grid{grid-template-columns:1fr}
  .fab{display:inline-flex}
  .meteo{max-width:calc(100% - 24px)}
  .meteo-c{display:none}
  .carte-info{flex-direction:column;align-items:flex-start}.carte-info span{text-align:left}
  .ctas .btn{flex:1 1 auto}
  .produit{width:210px;height:92px;padding:14px 18px}.produit img{max-height:58px}
  .galerie .ba-vue,.fiche .ba-vue{height:auto;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.js .mot>span,.js .hero-plein .lieu,.js .hero-plein .chapo,.js .hero-plein .ctas,.js .engagements .wrap>div,.js .hero h1,.js .hero .hero-p,.js .hero .ctas,.js .hero .eyebrow,.js .hero-vis{opacity:1;transform:none}
  .js .dessine *{stroke-dashoffset:0}
  .logos-copie{display:none}.logos-piste{flex-wrap:wrap;width:auto}.logos-defile{-webkit-mask-image:none;mask-image:none}
  .js .carte-box .plan .communes path,.js .carte-box .plan .villes,.js .carte-box .plan .cercles text{opacity:1}
  .js .carte-box .plan .cercles .rayon{stroke-dashoffset:0}
}