/* Point Propre — feuille de style unique (direction A : continuité modernisée).
   Mobile d'abord ; points de rupture 480 / 768 / 1024 px.
   Composants repris de uiverse.io (licence MIT) avec les verts Point Propre :
   - bouton « slippery-jellyfish-67 » de cssbuttons-io (https://uiverse.io/cssbuttons-io/slippery-jellyfish-67)
   - champ « horrible-rattlesnake-14 » d'ErzenXz (https://uiverse.io/ErzenXz/horrible-rattlesnake-14)
   - carte inclinable « witty-deer-12 » de kennyotsu (https://uiverse.io/kennyotsu/witty-deer-12) */

/* 0. Polices auto-hébergées (variables, sous-ensemble latin, Google Fonts / licence OFL) ------------ */
@font-face{font-family:Roboto;font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/roboto-variable.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:700 800;font-display:swap;src:url(/assets/fonts/nunito-variable.woff2) format("woff2")}

/* 1. Variables ------------------------------------------------------------ */
:root{
  --vert:#3aaa35;
  --vert-sombre:#2f7d2b;
  --vert-nuit:#143c12;
  --vert-clair:#8ef08a;
  --vert-pale:#bfe9bd;
  --vert-brume:#e6f4e5;
  --vert-menthe:#9bec98;
  --texte:#222222;
  --gris:#555555;
  --gris-clair:#777777;
  --bordure:#e3e8e3;
  --bordure-champ:#cfd8cf;
  --fond-gris:#f4f6f4;
  --blanc:#ffffff;
  --noir:#1b1f1b;
  --pied-texte:#cfd8cf;
  --pied-legal:#9fb09f;
  --pied-bordure:#2f3a2f;
  --erreur:#b3261e;
  --police:Roboto,Arial,Helvetica,sans-serif;
  --police-titre:Nunito,var(--police);
  --h1:clamp(2rem,1.3rem + 2.8vw,3.375rem);
  --h2:clamp(1.75rem,1.3rem + 1.6vw,2.375rem);
  --h3:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  --rayon-section:36px;
  --rayon-chevauche:56px;
  --rayon-carte:20px;
  --rayon-bouton:8px;
  --ombre-carte:0 2px 10px rgba(0,0,0,.06);
  --ombre-haute:0 18px 40px rgba(20,60,18,.18);
  --rebond:cubic-bezier(.34,1.56,.64,1);
  --hauteur-entete:72px;
  --conteneur:1200px;
  --gouttiere:24px;
}
@media (max-width:768px){:root{--rayon-section:28px;--rayon-chevauche:36px;--gouttiere:16px}}

/* 2. Reset léger ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;scroll-padding-top:96px;scroll-padding-bottom:96px;color-scheme:light}
body.menu-ouvert{overflow:hidden}
body{margin:0;font-family:var(--police);font-size:17px;line-height:1.6;color:var(--texte);background:var(--blanc);overflow-x:hidden;overflow-wrap:break-word}
h1,h2,h3{text-wrap:balance}
img,svg,video,picture{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--vert-sombre)}
a:hover{color:var(--vert)}
button{font:inherit;color:inherit;cursor:pointer}
.btn,button,summary{touch-action:manipulation}
address a,.pied a,.contact-lien{overflow-wrap:anywhere}
address{font-style:normal}
:focus-visible{outline:3px solid var(--vert);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}

/* 3. Typographie ---------------------------------------------------------- */
h1,.titre-hero{font-family:var(--police-titre);font-size:var(--h1);font-weight:800;line-height:1.1;letter-spacing:-.01em}
h2,.titre-section{font-size:var(--h2);font-weight:900;text-transform:uppercase;line-height:1.1}
h3{font-size:var(--h3);font-weight:700;line-height:1.3}
.surtitre{font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.2em;color:var(--gris)}
.intro{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.55;color:var(--gris)}
.prose>*+*{margin-top:1em}
.prose h2{margin-top:2em;font-size:var(--h3)}
.prose ul{list-style:disc;padding-left:1.4em}

/* 4. Utilitaires ---------------------------------------------------------- */
.conteneur{width:100%;max-width:var(--conteneur);margin:0 auto;padding-left:var(--gouttiere);padding-right:var(--gouttiere)}
.conteneur--etroit{max-width:900px}
.visuellement-cache{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evitement{position:absolute;top:-100px;left:16px;z-index:200;padding:12px 18px;background:var(--vert-nuit);color:var(--blanc);border-radius:var(--rayon-bouton);text-decoration:none;font-weight:700}
.evitement:focus{top:16px;color:var(--blanc)}
.centre{text-align:center}

/* 5. Boutons (uiverse « slippery-jellyfish-67 », MIT) --------------------- */
.btn{--c:var(--vert);--th:var(--blanc);position:relative;z-index:1;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border:2px solid var(--vert);border-radius:var(--rayon-bouton);background:var(--blanc);color:var(--vert-sombre);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;text-align:center;line-height:1.2;transition:color .5s,box-shadow .3s,transform .12s ease-out}
.btn::before{content:"";position:absolute;z-index:-1;top:100%;left:100%;width:320px;height:240px;border-radius:50%;background:var(--c);transition:top .7s,left .7s}
.btn:focus-visible{color:var(--th)}
@media (hover:hover) and (pointer:fine){.btn:hover{color:var(--th)}}
.btn:focus-visible::before{top:-70px;left:-70px}
@media (hover:hover) and (pointer:fine){.btn:hover::before{top:-70px;left:-70px}}
.btn:active{transform:scale(.97)}
.btn,button,.badge-points{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.btn:active::before{background:var(--vert-sombre);transition:background 0s}
.btn svg{flex:none;width:18px;height:18px}
.btn--contour{background:var(--blanc)}
.btn--plein{--c:var(--vert-sombre);background:var(--vert);color:var(--blanc)}
.btn--blanc{--c:var(--blanc);--th:var(--vert-nuit);background:transparent;border-color:var(--blanc);color:var(--blanc)}
.btn--blanc:active::before{background:#e8f5e7}
.btn--sombre{--c:var(--vert-nuit);--th:var(--blanc);background:transparent;border-color:var(--vert-nuit);color:var(--vert-nuit)}
.btn--petit{min-height:44px;padding:9px 20px;font-size:13px;letter-spacing:.08em}
.btn--pilule{border-radius:999px}
.actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.actions--gauche{justify-content:flex-start}

/* 6. En-tête, menu, badge ------------------------------------------------- */
.entete{position:sticky;top:0;z-index:40;background:var(--blanc);box-shadow:0 1px 0 var(--bordure);transition:transform .35s ease,opacity .35s ease}
.entete.replie{transform:translateY(-100%);opacity:0;pointer-events:none}
.entete__barre{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--hauteur-entete);padding-top:10px;padding-bottom:10px}
.logo{display:inline-flex;align-items:center}
.logo img{height:44px;width:auto}
.menu__bouton{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:2px solid var(--bordure);border-radius:var(--rayon-bouton);background:var(--blanc);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.menu__bouton::before{content:"";width:20px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.menu__bouton[aria-expanded="true"]::before{box-shadow:none;transform:rotate(45deg)}
.menu__bouton{position:relative}
.menu__bouton[aria-expanded="true"]::after{content:"";position:absolute;left:14px;top:calc(50% - 1px);width:20px;height:2px;background:currentColor;transform:rotate(-45deg)}
.menu{display:none;position:fixed;inset:var(--hauteur-entete) 0 0;z-index:45;overflow:auto;overscroll-behavior:contain;padding:24px var(--gouttiere) 40px;background:var(--blanc)}
.menu.menu--ouvert{display:block}
.menu__liste{display:flex;flex-direction:column;gap:4px;font-weight:500;font-size:18px}
.menu__liste a{display:block;padding:12px 4px;color:var(--texte);text-decoration:none;border-bottom:1px solid var(--bordure)}
.menu__liste a:hover,.menu__liste a[aria-current="page"]{color:var(--vert-sombre)}
.menu__deroulant{position:relative}
.menu__deroulant-bouton{display:none}
.menu__sous-liste{padding-left:16px;font-size:16px}
.menu .btn-devis{margin-top:24px;width:100%}
.badge-points{display:none;position:fixed;top:16px;left:20px;z-index:70;width:58px;height:58px;padding:0;border:0;border-radius:50%;background:var(--blanc);box-shadow:0 8px 24px rgba(0,0,0,.16);align-items:center;justify-content:center;animation:poser .5s var(--rebond) backwards}
.badge-points.visible{display:flex}
.badge-points img{width:22px;height:auto;position:relative;transition:transform .3s var(--rebond)}
.badge-points__noir{left:6px;z-index:1}
.badge-points__vert{left:-6px;top:4px}
@media (hover:hover) and (pointer:fine){.badge-points:hover .badge-points__noir{transform:translateX(-3px)}.badge-points:hover .badge-points__vert{transform:translateX(3px)}}
@media (min-width:769px){
  .menu__bouton{display:none}
  .menu{display:flex;position:static;inset:auto;overflow:visible;padding:0;align-items:center;gap:28px}
  .menu__liste{flex-direction:row;align-items:center;gap:24px;font-size:16px}
  .menu__liste a{padding:4px 0;border-bottom:2px solid transparent}
  .menu__liste a[aria-current="page"]{border-bottom-color:var(--vert)}
  .menu__deroulant{display:flex;align-items:center;gap:4px}
  .menu__deroulant-bouton{display:inline-flex;width:24px;height:24px;padding:0;border:0;background:none;color:var(--texte);align-items:center;justify-content:center}
  .menu__deroulant-bouton::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
  .menu__deroulant-bouton[aria-expanded="true"]::before{transform:translateY(2px) rotate(225deg)}
  .menu__sous-liste{display:none;position:absolute;top:calc(100% + 14px);left:-16px;min-width:300px;padding:10px;background:var(--blanc);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.14);font-size:15px}
  .menu__sous-liste::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
  .menu__sous-liste a{padding:10px 14px;border:0;border-radius:10px}
  .menu__sous-liste a:hover,.menu__sous-liste a:focus-visible{background:var(--fond-gris)}
  .menu__sous-liste:focus-within,.menu__deroulant.ouvert .menu__sous-liste{display:block}
  .menu .btn-devis{margin:0;width:auto}
}
@media (hover:hover) and (pointer:fine) and (min-width:769px){.menu__deroulant:hover .menu__sous-liste{display:block}}

/* 7. Chargeur aux points du logo ----------------------------------------- */
.chargeur{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--blanc);animation:disparaitre .4s 4s both}
.js-pret .chargeur{animation:none;transition:opacity .4s,visibility .4s}
.js-pret .chargeur.chargeur--fin{opacity:0;visibility:hidden}
.chargeur__orbite{position:relative;width:68px;height:68px;animation:orbiter 1.3s linear infinite}
.chargeur__point{position:absolute;top:50%;left:50%;width:24px;height:auto;margin:-13.5px 0 0 -12px}
.chargeur__point--noir{transform:translateX(-22px)}
.chargeur__point--vert{transform:translateX(22px)}
@keyframes orbiter{to{transform:rotate(360deg)}}
@keyframes disparaitre{to{opacity:0;visibility:hidden}}

/* 8. Hero et accroche animée --------------------------------------------- */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(560px,82vh,760px);min-height:clamp(560px,82svh,760px);padding:72px 0 120px;background:var(--vert-nuit);color:var(--blanc);overflow:hidden;isolation:isolate}
.hero--compact{min-height:0;padding:72px 0}
.hero__fond,.hero__video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero__video{opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero__video--active{opacity:1}
.hero__voile{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,60,18,.58) 0%,rgba(58,170,53,.55) 100%)}
.hero--compact .hero__voile{background:linear-gradient(180deg,rgba(20,60,18,.55) 0%,rgba(20,60,18,.75) 100%)}
.hero__contenu{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;max-width:960px;margin:0 auto;text-align:center}
.hero__contenu h1{color:var(--blanc)}
.hero__texte{max-width:680px;font-size:clamp(1.0625rem,1rem + .5vw,1.25rem);line-height:1.5;color:#e8f5e7}
.accroche{min-height:2.24em}
.accroche__mot{color:var(--vert-clair);white-space:pre-wrap}
.accroche__mot:empty::before{content:"\00a0"}

/* 9. Sections et blocs ----------------------------------------------------- */
.section{padding:72px 0}
.section--serree{padding:48px 0}
.section--grise{background:var(--fond-gris)}
.section--chevauche{position:relative;z-index:1;margin-top:-72px;padding-top:0;padding-bottom:56px;background:var(--blanc);border-radius:var(--rayon-chevauche) var(--rayon-chevauche) 0 0}
.section__entete{display:flex;flex-direction:column;gap:14px;max-width:720px;margin-bottom:40px}
.section__pied{margin-top:32px;text-align:center}
.zone__adresse{line-height:1.7}
.section__entete--centre{margin-left:auto;margin-right:auto;text-align:center;align-items:center}
.bloc{position:relative;overflow:hidden;border-radius:var(--rayon-section);padding:40px 24px}
.bloc--gris{background:var(--fond-gris)}
.bloc--photo{background:var(--vert-nuit);color:var(--blanc);text-align:center;isolation:isolate}
.bloc--photo .bloc__fond{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.bloc--photo .bloc__voile{position:absolute;inset:0;z-index:-1;background:rgba(20,60,18,.72)}
.bloc--photo .bloc__contenu{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:860px;margin:0 auto}
.bloc--photo .intro{color:#e8f5e7}
.bloc__grille{display:grid;gap:32px;align-items:center}
.bloc__image{width:100%;height:260px;object-fit:cover;border-radius:24px}
.bloc__contenu{display:flex;flex-direction:column;gap:20px}
.section--photo{position:relative;color:var(--blanc);background:var(--vert-nuit);isolation:isolate}
.cta-final{display:flex;flex-direction:column;align-items:center;gap:18px;padding:56px 24px;border-radius:var(--rayon-section);background:linear-gradient(30deg,var(--vert) 0%,var(--vert-menthe) 100%);color:var(--vert-nuit);text-align:center}
.cta-final--bande{border-radius:0;flex-direction:column;text-align:center}
.cta-final .intro{color:var(--vert-nuit)}
@media (min-width:769px){
  .bloc{padding:56px 48px}
  .bloc--photo{padding:88px 32px}
  .bloc__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
  .bloc__image{height:400px}
  .cta-final{padding:72px 32px}
  .cta-final--bande{flex-direction:row;justify-content:space-between;text-align:left;padding:64px var(--gouttiere)}
}

/* 10. Pastilles d'arguments ----------------------------------------------- */
.pastilles{display:grid;gap:36px;text-align:center}
.pastille{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:-52px}
.pastille__icone{display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border-radius:50%;background:var(--blanc);color:var(--vert);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.pastille__icone svg{width:44px;height:44px}
.pastille__titre{font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.pastille__texte{color:var(--gris);font-size:16px}
@media (min-width:769px){.pastilles{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}

/* 11. Cartes (services, témoignages, atouts) ------------------------------ */
.cartes{display:grid;gap:24px}
.carte{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--rayon-carte);background:var(--blanc);box-shadow:var(--ombre-carte);color:var(--texte);text-decoration:none;transition:transform .45s var(--rebond),box-shadow .45s ease}
a.carte:focus-visible{transform:translateY(-10px) scale(1.03);box-shadow:var(--ombre-haute);color:var(--texte)}
@media (hover:hover) and (pointer:fine){a.carte:hover{transform:translateY(-10px) scale(1.03);box-shadow:var(--ombre-haute);color:var(--texte)}}
a.carte:active{transform:scale(.98);transition-duration:.12s}
.carte__icone{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--vert-brume);color:var(--vert-sombre)}
.carte__icone svg{width:24px;height:24px}
.carte__titre{font-size:20px;font-weight:700}
.carte__texte{font-size:15px;line-height:1.55;color:var(--gris)}
.carte__lien{margin-top:auto;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vert-sombre)}
.carte--bordure{box-shadow:none;border:1px solid var(--bordure);border-radius:10px;padding:26px}
.carte--grise{box-shadow:none;background:var(--fond-gris);border-radius:10px;padding:24px}
.carte--grise .chiffre{font-size:28px;font-weight:700;color:var(--vert-sombre);line-height:1.1}
.carte--grise img{height:40px;width:auto;max-width:140px;align-self:flex-start;object-fit:contain}
@media (min-width:600px){.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.cartes{grid-template-columns:repeat(3,minmax(0,1fr))}.cartes--quatre{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 12. Bandeau d'engagements (défilement continu) --------------------------- */
.defilement{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.defilement__piste{display:flex;gap:20px;width:max-content;animation:defiler 40s linear infinite}
.defilement:hover .defilement__piste,.defilement:focus-within .defilement__piste{animation-play-state:paused}
@keyframes defiler{to{transform:translateX(calc(-50% - 10px))}}
.engagement{display:flex;flex:0 0 280px;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--bordure);border-radius:var(--rayon-carte);background:var(--blanc)}
.engagement__icone{display:inline-flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--vert-brume);color:var(--vert-sombre)}
.engagement__icone svg{width:22px;height:22px}
.engagement img{width:44px;height:44px;object-fit:contain}
.engagement strong{display:block;font-size:18px}
.engagement span{font-size:14px;color:var(--gris)}
.preuves{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:15px;font-weight:500;color:var(--vert-sombre)}
.preuve{display:inline-flex;align-items:center;gap:8px}
.preuve svg{width:18px;height:18px}

/* 13. Labels, logos clients ------------------------------------------------- */
.labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.label{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px;border-radius:16px;background:var(--blanc);text-align:center}
.label img{height:36px;width:auto;object-fit:contain}
.label strong{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 40px}
.logos img{height:40px;width:auto;object-fit:contain}
@media (min-width:769px){.labels{gap:16px}.label{padding:18px}.label strong{font-size:13px}.logos img{height:48px}}

/* 14. Témoignages inclinables (uiverse « witty-deer-12 », MIT) ------------- */
.avis{position:relative;perspective:800px}
.avis::before{content:"";position:absolute;inset:10px;z-index:0;border-radius:24px;background:var(--vert);filter:blur(26px);opacity:0;transition:opacity .35s}
@media (hover:hover) and (pointer:fine){.avis:hover::before{opacity:.32}}
.avis__pistes{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr)}
.avis__carte{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;height:100%;padding:28px;border-radius:var(--rayon-carte);background:var(--blanc);box-shadow:var(--ombre-carte);transform-style:preserve-3d;transition:transform .6s ease,filter .3s}
@media (hover:hover) and (pointer:fine){.avis:hover .avis__carte{transition:transform .125s ease-in-out;filter:brightness(1.02)}}
.avis__carte blockquote{font-size:16px;line-height:1.6;color:#333333}
.avis__carte figcaption{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vert-sombre)}
.avis:has(.p1:hover) .avis__carte{transform:rotateX(8deg) rotateY(-6deg)}
.avis:has(.p2:hover) .avis__carte{transform:rotateX(8deg) rotateY(-3deg)}
.avis:has(.p3:hover) .avis__carte{transform:rotateX(8deg) rotateY(0)}
.avis:has(.p4:hover) .avis__carte{transform:rotateX(8deg) rotateY(3deg)}
.avis:has(.p5:hover) .avis__carte{transform:rotateX(8deg) rotateY(6deg)}
.avis:has(.p6:hover) .avis__carte{transform:rotateX(4deg) rotateY(-6deg)}
.avis:has(.p7:hover) .avis__carte{transform:rotateX(4deg) rotateY(-3deg)}
.avis:has(.p8:hover) .avis__carte{transform:rotateX(4deg) rotateY(0)}
.avis:has(.p9:hover) .avis__carte{transform:rotateX(4deg) rotateY(3deg)}
.avis:has(.p10:hover) .avis__carte{transform:rotateX(4deg) rotateY(6deg)}
.avis:has(.p11:hover) .avis__carte{transform:rotateX(0) rotateY(-6deg)}
.avis:has(.p12:hover) .avis__carte{transform:rotateX(0) rotateY(-3deg)}
.avis:has(.p13:hover) .avis__carte{transform:rotateX(0) rotateY(0)}
.avis:has(.p14:hover) .avis__carte{transform:rotateX(0) rotateY(3deg)}
.avis:has(.p15:hover) .avis__carte{transform:rotateX(0) rotateY(6deg)}
.avis:has(.p16:hover) .avis__carte{transform:rotateX(-4deg) rotateY(-6deg)}
.avis:has(.p17:hover) .avis__carte{transform:rotateX(-4deg) rotateY(-3deg)}
.avis:has(.p18:hover) .avis__carte{transform:rotateX(-4deg) rotateY(0)}
.avis:has(.p19:hover) .avis__carte{transform:rotateX(-4deg) rotateY(3deg)}
.avis:has(.p20:hover) .avis__carte{transform:rotateX(-4deg) rotateY(6deg)}
.avis:has(.p21:hover) .avis__carte{transform:rotateX(-8deg) rotateY(-6deg)}
.avis:has(.p22:hover) .avis__carte{transform:rotateX(-8deg) rotateY(-3deg)}
.avis:has(.p23:hover) .avis__carte{transform:rotateX(-8deg) rotateY(0)}
.avis:has(.p24:hover) .avis__carte{transform:rotateX(-8deg) rotateY(3deg)}
.avis:has(.p25:hover) .avis__carte{transform:rotateX(-8deg) rotateY(6deg)}
@media (hover:none){.avis__pistes{display:none}.avis:hover::before{opacity:0}}
.temoignage{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--rayon-carte);background:var(--vert-brume)}
.temoignage figcaption{font-weight:700;color:var(--vert-sombre)}

/* 15. Zone, carte Google en façade ----------------------------------------- */
.zone{display:grid;gap:32px;align-items:center}
.zone__texte{display:flex;flex-direction:column;gap:18px}
.carte-google{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:280px;overflow:hidden;border-radius:var(--rayon-section);background:var(--vert-brume);color:var(--vert-sombre);text-align:center;padding:24px}
.carte-google svg{width:48px;height:48px}
.carte-google small{font-size:13px}
.carte-google iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.carte-google--petite{min-height:220px;border-radius:12px}
@media (min-width:769px){.zone{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}.carte-google{min-height:360px}}

/* 16. Apparition au défilement (rebond) ------------------------------------ */
@keyframes poser{0%{opacity:0;transform:translateY(40px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:no-preference){
  .js-pret .reveal:not(.visible){opacity:0;transform:translateY(40px)}
  .js-pret .reveal.visible{animation:poser .9s var(--rebond) backwards}
  .js-pret .cartes>.reveal.visible:nth-child(2),.js-pret .pastilles>.reveal.visible:nth-child(2){animation-delay:.09s}
  .js-pret .cartes>.reveal.visible:nth-child(3),.js-pret .pastilles>.reveal.visible:nth-child(3){animation-delay:.18s}
  .js-pret .cartes>.reveal.visible:nth-child(4){animation-delay:.27s}
  .js-pret .cartes>.reveal.visible:nth-child(5){animation-delay:.36s}
  .js-pret .cartes>.reveal.visible:nth-child(6){animation-delay:.45s}
}

/* 17. Formulaires (uiverse « horrible-rattlesnake-14 », MIT) --------------- */
.formulaire{display:flex;flex-direction:column;gap:18px;padding:24px;border-radius:12px;background:var(--blanc);box-shadow:var(--ombre-carte)}
.formulaire__grille{display:grid;gap:16px}
.formulaire__groupe{display:flex;flex-direction:column;gap:6px}
.formulaire__groupe label{font-size:15px;font-weight:500}
.formulaire__obligatoire{color:var(--vert-sombre)}
.formulaire__consentement{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--gris)}
.formulaire__consentement input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--vert)}
.formulaire__piege{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formulaire__message:empty{display:none}
.page-retour{padding:96px 0}
.page-retour .conteneur{display:flex;flex-direction:column;align-items:center;gap:20px}
.contact-carte address{line-height:1.7}
.formulaire h2{font-size:28px}
.formulaire__message{padding:14px 16px;border-radius:12px;font-size:15px;line-height:1.5}
.formulaire__message--succes{background:var(--vert-brume);color:var(--vert-nuit)}
.formulaire__message--erreur{background:#fbe9e7;color:var(--erreur)}
.champ{width:100%;min-height:45px;padding:12px 14px;border:1.5px solid var(--bordure-champ);border-radius:12px;background:var(--blanc);font:inherit;color:var(--texte);outline:none;box-shadow:0 0 20px -18px #000;transition:border-color .3s cubic-bezier(.19,1,.22,1),border-width .3s cubic-bezier(.19,1,.22,1),box-shadow .3s cubic-bezier(.19,1,.22,1),transform .3s cubic-bezier(.19,1,.22,1)}
@media (hover:hover) and (pointer:fine){.champ:hover{border:2px solid var(--vert-pale);box-shadow:0 0 20px -17px #000}}
.champ:active{transform:scale(.97)}
.champ:focus,.champ:focus-visible{border:2px solid var(--vert);box-shadow:0 0 0 4px rgba(58,170,53,.15);outline:none}
textarea.champ{min-height:120px;resize:vertical}
.champ[aria-invalid="true"]{border-color:var(--erreur)}
.formulaire__erreur{font-size:13px;color:var(--erreur)}
@media (min-width:600px){.formulaire{padding:36px}.formulaire__grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contact-grille{display:grid;gap:32px;align-items:start}
.contact-cartes{display:flex;flex-direction:column;gap:24px}
.contact-carte{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:12px;background:var(--blanc);box-shadow:var(--ombre-carte)}
.contact-carte h2{font-size:22px}
.contact-lien{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:500;color:var(--texte);text-decoration:none}
.contact-lien:hover{color:var(--vert-sombre)}
.contact-lien__icone{display:inline-flex;flex:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--vert-brume);color:var(--vert-sombre)}
.contact-lien__icone svg{width:20px;height:20px}
@media (min-width:1025px){.contact-grille{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px}}

/* 17 bis. Confirmation d'envoi : coche qui se dessine, puis texte ------------------ */
.formulaire--envoye>:not(.envoi-reussi){display:none !important}
.envoi-reussi{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 8px;text-align:center;outline:none;animation:poser .5s var(--rebond) both}
.envoi-reussi__coche{width:84px;height:84px;margin-bottom:4px}
.envoi-reussi__fond{fill:var(--vert-brume);transform-origin:center;transform:scale(0);animation:grossir .45s var(--rebond) .1s forwards}
.envoi-reussi__cercle{fill:none;stroke:var(--vert);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;transform:rotate(-90deg);transform-origin:center;animation:tracer .6s ease-out .15s forwards}
.envoi-reussi__trait{fill:none;stroke:var(--vert-sombre);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:tracer .35s ease-out .7s forwards}
.envoi-reussi__titre{font-family:var(--police-titre);font-size:clamp(1.4rem,1.2rem + 1vw,1.75rem);font-weight:800;line-height:1.2;color:var(--vert-nuit)}
.envoi-reussi__texte{max-width:460px;color:var(--gris)}
.envoi-reussi__aide{font-size:14px;color:var(--gris-clair)}
.envoi-reussi .btn{margin-top:8px}
.devis-rapide__panneau .envoi-reussi{padding:12px 0;gap:10px}
.devis-rapide__panneau .envoi-reussi__coche{width:64px;height:64px}
.devis-rapide__panneau .envoi-reussi__texte{font-size:14px}
@keyframes tracer{to{stroke-dashoffset:0}}
@keyframes grossir{to{transform:scale(1)}}
.btn--envoi{opacity:.9;cursor:progress}
.btn--envoi::after{content:"";flex:none;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:orbiter .7s linear infinite}

/* 18. Devis rapide (bouton flottant + panneau) ----------------------------- */
.devis-rapide__bouton{position:fixed;right:16px;bottom:16px;z-index:60;min-height:60px;min-width:60px;padding:0;border-radius:999px;box-shadow:0 10px 30px rgba(20,60,18,.4)}
.devis-rapide__bouton svg{width:22px;height:22px}
.devis-rapide__bouton span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.devis-rapide__panneau{position:fixed;right:16px;bottom:88px;z-index:60;display:flex;flex-direction:column;gap:12px;width:340px;max-width:calc(100vw - 32px);max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow:auto;overscroll-behavior:contain;padding:22px;border-radius:20px;background:var(--blanc);box-shadow:0 20px 50px rgba(0,0,0,.25);animation:poser .4s var(--rebond) backwards}
.devis-rapide__entete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.devis-rapide__entete strong{font-size:17px}
.devis-rapide__fermer{width:36px;height:36px;border:0;border-radius:50%;background:var(--fond-gris);font-size:18px;color:var(--gris)}
.devis-rapide__form{display:flex;flex-direction:column;gap:12px}
.devis-rapide__texte{font-size:14px;line-height:1.5;color:var(--gris)}
.devis-rapide__panneau label{font-size:13px;font-weight:500}
.devis-rapide__panneau .champ{min-height:44px;padding:10px 12px}
.devis-rapide__panneau textarea.champ{min-height:80px}
.devis-rapide__aide{font-size:12px;color:var(--gris-clair)}
.devis-rapide__aide a{white-space:nowrap}
@media (min-width:481px){
  .devis-rapide__bouton{right:24px;bottom:32px;min-height:52px;padding:12px 20px 12px 16px;font-size:14px;letter-spacing:.06em}
  .devis-rapide__bouton span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .devis-rapide__panneau{right:24px;bottom:104px}
}

/* 18 bis. Bandeau de consentement (Refuser et Accepter au même niveau) ------------- */
.consentement{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;gap:14px;max-width:760px;margin:0 auto;padding:20px 22px;border-radius:20px;background:var(--blanc);box-shadow:0 20px 50px rgba(0,0,0,.22);animation:poser .5s var(--rebond) both}
.consentement__titre{font-weight:700}
.consentement__texte{font-size:14px;line-height:1.55;color:var(--gris)}
.consentement__actions{display:flex;flex-wrap:wrap;gap:12px}
.consentement__actions .btn{flex:1 1 140px}
html.consentement-ouvert .devis-rapide__bouton,html.consentement-ouvert .devis-rapide__panneau{visibility:hidden}
.lien-cookies{padding:0;border:0;background:none;color:var(--pied-texte);font:inherit;text-decoration:underline;cursor:pointer}
.lien-cookies:hover{color:var(--blanc)}
@media (min-width:769px){.consentement{flex-direction:row;align-items:center;gap:24px}.consentement__actions{flex:none;flex-wrap:nowrap}.consentement__actions .btn{flex:none}}

/* 19. Pages de service, FAQ, fil d'Ariane, voisins -------------------------- */
.fil-ariane{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--gris)}
.fil-ariane a{color:var(--gris);text-decoration:none}
.fil-ariane a:hover{color:var(--vert-sombre)}
.fil-ariane [aria-current="page"]{color:var(--texte)}
.intro-service{display:grid;gap:32px;align-items:center}
.intro-service__texte{display:flex;flex-direction:column;gap:20px}
.intro-service__image{width:100%;height:260px;object-fit:cover;border-radius:24px;box-shadow:0 16px 40px rgba(20,60,18,.15)}
.intro-service__visuel{display:flex;align-items:center;justify-content:center;min-height:240px;border-radius:24px;background:var(--vert-brume);color:var(--vert-sombre)}
.intro-service__visuel svg{width:96px;height:96px}
.temoignage{margin-top:32px}
.temoignage blockquote{font-size:17px;line-height:1.6}
.faq__titre{margin-bottom:24px}
h2.carte__titre{font-size:20px;font-weight:700;text-transform:none;line-height:1.3}
.carte--grise strong{font-size:16px}
.carte--grise .carte__texte{font-size:14px}
.cta-final--bande .intro{max-width:640px}
.etapes__titre{margin-top:8px;font-size:15px}
.etapes{counter-reset:etape;display:flex;flex-direction:column;gap:14px;margin-top:8px}
.etapes li{counter-increment:etape;position:relative;padding-left:48px;font-size:15px;line-height:1.55;color:var(--gris)}
.etapes li::before{content:counter(etape);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--vert);color:var(--blanc);font-weight:900;display:flex;align-items:center;justify-content:center}
.etapes strong{color:var(--texte)}
.liste-coche{display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.5}
.liste-coche li{display:flex;gap:12px;padding:14px 16px;border-radius:8px;background:var(--blanc)}
.liste-coche li::before{content:"✓";flex:none;font-weight:900;color:var(--vert)}
.deux-colonnes{display:grid;gap:32px;align-items:start}
.faq{display:flex;flex-direction:column;gap:16px}
.faq__item{padding:22px 26px;border-radius:10px;background:var(--blanc);box-shadow:var(--ombre-carte)}
.faq__item summary{cursor:pointer;font-size:17px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--vert-brume);color:var(--vert-sombre);display:inline-flex;align-items:center;justify-content:center;font-weight:900}
.faq__item[open] summary::after{content:"–"}
.faq__item p{margin-top:10px;color:var(--gris)}
.voisins{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;font-size:16px}
.voisins span{color:var(--gris)}
.voisins a{font-weight:700}
@media (min-width:769px){
  .intro-service__visuel{min-height:420px}
  .intro-service{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px}
  .intro-service__image{height:420px}
  .deux-colonnes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
}

/* 20. Pied de page ---------------------------------------------------------- */
.pied{margin-top:auto;border-radius:var(--rayon-chevauche) var(--rayon-chevauche) 0 0;background:var(--noir);color:var(--pied-texte);font-size:14px;line-height:1.7}
.pied a{color:var(--pied-texte);text-decoration:none}
.pied a:hover{color:var(--blanc);text-decoration:underline}
.pied__colonnes{display:grid;gap:32px;padding-top:56px;padding-bottom:24px}
.pied__colonne{display:flex;flex-direction:column;gap:10px}
.pied__titre{font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--blanc)}
.pied__liste{display:flex;flex-direction:column;gap:6px}
.pied__adresse a,.pied__reseaux a{color:var(--vert-clair)}
.pied__reseaux{display:flex;flex-wrap:wrap;gap:14px}
.pied__zone{color:var(--pied-legal)}
.pied__legal{display:flex;flex-direction:column;gap:6px;padding-top:18px;padding-bottom:40px;border-top:1px solid var(--pied-bordure);font-size:13px;color:var(--pied-legal)}
.pied__legal a{color:var(--pied-texte)}
@media (min-width:769px){.pied__colonnes{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-top:64px}}

/* 21. Page 404, divers ------------------------------------------------------ */
.prose .fil-ariane{margin-bottom:16px}
.prose h1{margin-bottom:8px}
.prose ul li{margin-top:6px}
.page-404{display:flex;flex-direction:column;align-items:center;gap:20px;padding:96px 0;text-align:center}
.page-404 .chiffre{font-family:var(--police-titre);font-size:clamp(5rem,12vw,9rem);font-weight:800;line-height:1;color:var(--vert)}

/* 22. Mouvement réduit ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .chargeur{display:none}
  .badge-points,.entete{transition:none;animation:none}
  a.carte:hover,a.carte:focus-visible{transform:none}
  .defilement{mask-image:none;-webkit-mask-image:none}
  .defilement__piste{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .defilement__piste [aria-hidden="true"]{display:none}
  .avis__pistes{display:none}
  .avis:hover::before{opacity:0}
  .accroche__mot{white-space:normal}
}