/* Feuille commune à toutes les pages du site Binet Multi-Services.
   Extraite de index.html : huit pages qui portent chacune leur copie du CSS,
   c'est huit copies qui divergent à la première retouche. Aucune dépendance
   externe pour autant — c'est un fichier local de plus, pas un CDN. */

/* ══════════════════════════════════════════════════════════════════════════
   BINET MULTI-SERVICES
   Fichier unique, aucune dépendance, aucun CDN. Photos dans ./photos/.

   Couleurs relevées AU PIXEL sur le logo fourni : noir #211f20, vert #30a248.
   Le logo vit sur du noir — le site aussi. Mais un noir chaud, pas un noir
   d'écran, et le vert reste un accent : il souligne, il ne remplit pas.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#211f20;
  --ink-2:#2b2829;
  --ink-3:#363233;
  --line:rgba(255,255,255,.11);
  --paper:#f5f3f0;
  --muted:#a49f9c;
  --green:#30a248;
  --green-lite:#4fc46a;

  --shell:min(1200px,100% - 2.5rem);
  --ease:cubic-bezier(.22,1,.36,1);

  --s--1:clamp(.82rem,.79rem + .14vw,.9rem);
  --s-0:clamp(1.02rem,.98rem + .2vw,1.14rem);
  --s-1:clamp(1.18rem,1.08rem + .45vw,1.48rem);
  --s-2:clamp(1.55rem,1.3rem + 1.1vw,2.25rem);
  --s-3:clamp(2.05rem,1.6rem + 2.1vw,3.3rem);
  --s-4:clamp(2.6rem,1.75rem + 4.4vw,5.4rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font:var(--s-0)/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.04}
p{margin:0}
.shell{width:var(--shell);margin-inline:auto}

/* Grain : enlève l'aplat numérique du noir. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.label{
  font-size:.75rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-lite);display:inline-flex;align-items:center;gap:.7rem;
}
.label::before{content:"";width:26px;height:2px;background:var(--green);flex:none}

.mark{position:relative;display:inline-block;white-space:nowrap}
.mark svg{position:absolute;left:-2%;bottom:-.2em;width:104%;height:.4em;overflow:visible;pointer-events:none}
.mark path{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520}
.mark.drawn path{transition:stroke-dashoffset 1.1s var(--ease) .3s;stroke-dashoffset:0}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.7rem;border:2px solid var(--green);border-radius:3px;cursor:pointer;
  background:var(--green);color:#06220f;text-decoration:none;
  font:inherit;font-weight:800;font-size:.98rem;letter-spacing:-.01em;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .2s;
  box-shadow:4px 4px 0 rgba(255,255,255,.16);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(255,255,255,.22);background:var(--green-lite)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(255,255,255,.16)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--green);color:var(--green-lite);box-shadow:none;transform:translateY(-2px)}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:100;background:rgba(33,31,32,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;
  transition:border-color .3s,padding .3s;
}
header.stuck{border-bottom-color:var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.7rem 0}
.brand{display:block;flex:none}
.brand img{height:54px;width:auto;transition:height .3s var(--ease)}
header.stuck .brand img{height:44px}
.nav-links{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0;font-size:.93rem;font-weight:700}
.nav-links a{text-decoration:none;color:#cfc9c6;padding-bottom:3px;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.nav-links a:hover{border-bottom-color:var(--green);color:#fff}
/* ── Menu hamburger, sous 960 px ─────────────────────────────────────────────
   Une rangée de liens qui défile horizontalement, ça marche mais ça ne se
   voit pas : rien n'indique qu'il y a autre chose à droite du bord. Un bouton
   hamburger dit « il y a un menu » sans rien demander à personne.

   Le panneau descend sous l'en-tête plutôt que de couvrir l'écran : le
   visiteur garde le contexte de la page derrière, et le geste pour refermer
   est le même que pour ouvrir. */
.burger{
  display:none;width:46px;height:46px;flex:none;
  background:transparent;border:1px solid var(--line);border-radius:3px;
  cursor:pointer;padding:0;transition:border-color .2s;
  /* Flex et non grid : en grid, les trois barres deviennent trois rangées qui
     se partagent les 46 px du bouton et se retrouvent à 16 px d'écart, quoi
     qu'on demande. La croix ne se refermait jamais. En flex, l'écart est
     celui qu'on écrit. */
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger:hover{border-color:var(--green)}
.burger:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.burger span{
  display:block;width:20px;height:2px;background:var(--paper);border-radius:2px;
  transition:transform .28s var(--ease),opacity .18s;
}
/* L'écart est porté par `gap`, plus par une marge. */
/* Les deux barres extérieures se croisent, celle du milieu s'efface. */
header.menu-ouvert .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.menu-ouvert .burger span:nth-child(2){opacity:0}
header.menu-ouvert .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:960px){
  .burger{display:flex}
  nav{flex-wrap:wrap;row-gap:0}

  /* Le hamburger tout à droite, à la place qu'occupait le bouton Soumission.
     Le logo reprend le coin gauche, là où on le cherche pour revenir à
     l'accueil, et le pouce d'une main droite tombe sur le menu. */
  .brand{order:1;margin-right:auto}
  .burger{order:2}

  /* Le bouton « Soumission » quitte l'en-tête : à trois éléments sur une
     ligne de 390 px, le logo se retrouvait écrasé entre deux boutons. Il
     réapparaît dans le panneau, en vert, là où il ne bouscule plus rien. */
  nav > .btn{display:none}

  /* Repli instantané, le temps d'un clic sur une ancre : voir menu.js. */
  .nav-links.sans-transition{transition:none!important}
  .nav-links{
    order:3;width:100%;flex-direction:column;gap:0;
    /* Replié : hauteur nulle et invisible. On anime la hauteur maximale plutôt
       que `display`, qui ne s'anime pas — et `visibility` retire les liens du
       parcours au clavier tant que le menu est fermé, sinon on tabule dans un
       menu qu'on ne voit pas. */
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .34s var(--ease),visibility 0s linear .34s;
  }
  header.menu-ouvert .nav-links{
    max-height:70vh;overflow-y:auto;visibility:visible;
    transition:max-height .34s var(--ease),visibility 0s;
    /* Le panneau est plus court que sa hauteur maximale : sans `contain`, un
       glissement du doigt SUR le menu se propage à la page derrière, la page
       défile, et le menu se referme au moment précis où on essayait de le
       lire. On garde le geste dans le panneau. */
    overscroll-behavior:contain;
  }
  .nav-links li{width:100%}
  .nav-links a{
    display:flex;align-items:center;min-height:54px;width:100%;
    padding:0 .2rem;font-size:1.02rem;border-bottom:1px solid var(--line);
    color:var(--paper);
  }
  .nav-links li:last-child a{border-bottom:0}
  .nav-links a:hover,.nav-links a:focus-visible{color:var(--green-lite);border-bottom-color:var(--line)}
  /* Le numéro de téléphone en bas du panneau : sur un cellulaire, appeler
     reste le geste le plus court entre « j'hésite » et « c'est réglé ». */
  .nav-tel{
    display:flex;align-items:center;gap:.6rem;min-height:54px;
    font-weight:800;color:var(--green-lite);text-decoration:none;
    border-top:1px solid var(--line);margin-top:.2rem;
  }
  /* L'appel à l'action, en vert, dans le panneau. */
  .nav-links li.nav-cta{margin:.9rem 0 .3rem}
  .nav-links li.nav-cta a{
    justify-content:center;min-height:52px;border:2px solid var(--green);
    background:var(--green);color:#06220f;font-weight:800;border-radius:3px;
    box-shadow:3px 3px 0 rgba(255,255,255,.16);padding:0 1rem;
  }
  .nav-links li.nav-cta a:hover{background:var(--green-lite);color:#06220f}
}
@media(min-width:961px){.nav-links li.nav-cta{display:none}}
@media(min-width:961px){.nav-tel{display:none}}

/* Voile derrière le panneau : il assombrit la page et attrape le clic qui
   referme. Sans lui, la seule façon de fermer serait de retrouver le bouton. */
.voile{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.voile.on{opacity:1;pointer-events:auto}
@media(min-width:961px){.voile{display:none}}
@media(max-width:560px){
  .brand img{height:40px}
  header.stuck .brand img{height:36px}
  /* Le logo est aussi le lien « retour en haut » : il doit se viser. */
  .brand{display:flex;align-items:center;min-height:44px}
  nav .btn{padding:.72rem 1rem;font-size:.86rem;box-shadow:3px 3px 0 rgba(255,255,255,.16)}
  .cta-long{display:none}
}
.cta-short{display:none}
@media(max-width:560px){.cta-short{display:inline}}

/* ── Héros ───────────────────────────────────────────────────────────────────
   La photo passe DERRIÈRE le texte, plein cadre. Un terrain, ça se montre : la
   première seconde doit dire « ces gens-là travaillent dehors », pas « voici
   une page web ».

   Le voile sombre n'est pas décoratif. Une photo de chantier a des zones
   claires imprévisibles — du ciel, du béton, de la neige — et du texte blanc
   posé dessus devient illisible pile là où on ne l'a pas testé. Le dégradé est
   donc opaque du côté du texte et s'ouvre du côté vide. */
.hero{
  position:relative;overflow:hidden;display:grid;align-items:center;
  min-height:clamp(500px,84vh,760px);padding:4.5rem 0 5rem;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;
  /* Zoom très lent : l'image respire sans jamais attirer l'œil. */
  animation:kenburns 30s ease-in-out infinite alternate;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(33,31,32,.95) 0%,rgba(33,31,32,.9) 34%,rgba(33,31,32,.5) 72%,rgba(33,31,32,.35) 100%),
    linear-gradient(transparent 50%,rgba(33,31,32,.92) 100%);
}
/* Sur téléphone le texte occupe toute la largeur : le voile doit couvrir
   partout, pas seulement à gauche. */
@media(max-width:760px){
  .hero-bg::after{background:linear-gradient(rgba(33,31,32,.82),rgba(33,31,32,.93))}
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero .shell{position:relative;z-index:1}
/* Assez large pour que le titre tienne en deux lignes. Une colonne trop
   étroite hachait « On / s'occupe / de / votre / terrain. » en cinq lignes et
   repoussait le bouton sous la ligne de flottaison — le visiteur voyait une
   belle photo et aucun moyen d'agir. */
.hero-txt{max-width:min(100%,640px)}
.hero h1{
  font-size:clamp(2.3rem,1.45rem + 3.7vw,4.05rem);
  margin:1.3rem 0 0;text-wrap:balance;text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.hero-sub{margin-top:1.4rem;font-size:var(--s-1);color:#ded9d5;max-width:40ch;line-height:1.45}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}
/* Les trois choses qu'on veut avoir dites avant que le visiteur défile. */
.hero-facts{
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:2.4rem;
  font-size:.9rem;font-weight:700;color:#cdc7c3;
}
.hero-facts span{display:inline-flex;align-items:center;gap:.5rem}
.hero-facts span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}

/* ── Bande d'appel ───────────────────────────────────────────────────────── */
.strip{background:var(--green);color:#06220f;padding:1.5rem 0}
.strip .shell{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.strip b{font-size:var(--s-1);letter-spacing:-.02em}
/* Ce lien est un appel à l'action à part entière, pas une note de bas de
   page : il lui faut la même surface de doigt que les boutons. */
.strip a{font-weight:800;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:2px solid rgba(0,0,0,.35)}

section{padding:5.5rem 0;position:relative}
section[id]{scroll-margin-top:5.5rem}
.head{max-width:60ch;margin-bottom:3rem}
.head h2{font-size:var(--s-3);margin-top:1.1rem;text-wrap:balance}
.head p{margin-top:1rem;color:var(--muted);font-size:var(--s-1);line-height:1.5}

/* ══ LE CALENDRIER D'UN TERRAIN ═══════════════════════════════════════════
   La pièce centrale. Un contrat d'entretien se vend mal en liste de services
   et bien en calendrier : on montre l'année au complet, et le mois courant
   s'allume tout seul. Le visiteur voit immédiatement ce qui devrait se passer
   chez lui CE MOIS-CI — et ce que Binet ferait à sa place. */
.saisons{background:var(--ink-2);border-block:1px solid var(--line)}
.piste{position:relative;margin-top:3rem}
/* La ligne de fond et la ligne verte qui la remplit au défilement. */
.piste::before{
  content:"";position:absolute;left:0;right:0;top:26px;height:3px;
  background:var(--ink-3);border-radius:2px;
}
.piste-fill{
  position:absolute;left:0;top:26px;height:3px;width:0;
  background:linear-gradient(90deg,var(--green),var(--green-lite));
  border-radius:2px;transition:width .25s linear;
}
.mois{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative;
}
@media(max-width:900px){
  .mois{grid-template-columns:1fr;gap:1.6rem}
  .piste::before,.piste-fill{left:26px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .piste-fill{height:0;width:3px;transition:height .25s linear}
  .saison{padding-left:4rem}
}
.saison{position:relative;padding-top:4.2rem}
@media(max-width:900px){.saison{padding-top:0}}
.pastille{
  position:absolute;top:14px;left:0;width:28px;height:28px;border-radius:50%;
  background:var(--ink);border:3px solid var(--ink-3);display:grid;place-items:center;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease);
}
@media(max-width:900px){.pastille{top:0;left:12px}}
.pastille::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink-3);transition:background .4s}
.saison.on .pastille{border-color:var(--green);transform:scale(1.14)}
.saison.on .pastille::after{background:var(--green)}
.saison.now .pastille{border-color:var(--green-lite);box-shadow:0 0 0 6px rgba(48,162,72,.22)}
.saison h3{font-size:var(--s-1);transition:color .4s}
.saison.on h3{color:var(--green-lite)}
.saison .quand{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.saison p{color:var(--muted);font-size:.97rem;margin-top:.6rem}
.saison .badge-now{
  display:none;margin-top:.7rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#06220f;background:var(--green-lite);
  padding:.25rem .6rem;border-radius:2px;width:max-content;
}
.saison.now .badge-now{display:block}

/* ── Entretien, le service principal ─────────────────────────────────────── */
.entretien-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
@media(max-width:900px){.entretien-grid{grid-template-columns:1fr;gap:2rem}}
.inclus{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.1rem}
.inclus li{
  display:flex;gap:.9rem;align-items:baseline;padding:.75rem 0;
  border-bottom:1px solid var(--line);font-weight:600;
}
.inclus li:last-child{border-bottom:0}
.inclus .t{color:var(--green);font-weight:900;flex:none}
.inclus small{display:block;font-weight:500;color:var(--muted);font-size:.9rem;margin-top:.15rem}
.stack{display:grid;gap:1rem}
.stack img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:5px}

/* ── Autres services ─────────────────────────────────────────────────────── */
.autres{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.1rem}
.carte{
  position:relative;overflow:hidden;border-radius:5px;background:var(--ink-2);
  border:1px solid var(--line);transition:border-color .35s,transform .35s var(--ease);
}
.carte:hover{border-color:rgba(48,162,72,.55);transform:translateY(-5px)}
.carte img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .6s var(--ease)}
.carte:hover img{transform:scale(1.05)}
.carte .txt{padding:1.3rem 1.4rem 1.5rem}
.carte h3{font-size:1.16rem}
.carte p{color:var(--muted);font-size:.94rem;margin-top:.5rem}
/* 44 px de haut minimum : c'est la taille d'un pouce, et ce sont les six
   liens les plus cliqués de la page. Ils en faisaient dix-huit. */
.carte .plus{
  margin-top:.7rem;font-size:.9rem;font-weight:800;color:var(--green-lite);
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  min-height:44px;padding:.55rem .9rem;margin-left:-.9rem;border-radius:3px;
  transition:background .2s,color .2s;
}
.carte .plus:hover{background:rgba(48,162,72,.14);color:#7de097}

/* Le bloc « mot du propriétaire » vivait ici. Retiré avec sa section. */

/* ── Galerie ─────────────────────────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:880px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.gallery{grid-template-columns:1fr}}
figure.shot{margin:0;position:relative;overflow:hidden;border-radius:5px;background:var(--ink-2)}
figure.shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease)}
figure.shot:hover img{transform:scale(1.06)}
figure.shot figcaption{
  position:absolute;inset:auto 0 0 0;padding:2rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
  font-size:.85rem;font-weight:600;
}

/* ── Curseur avant / après ───────────────────────────────────────────────────
   Les quatre photos de comparaison ne sont PAS des paires d'images : ce sont
   des montages côte à côte, faits par le client, avec « Avant » et « Après »
   incrustés dedans. Un curseur classique — deux photos superposées — était
   donc impossible : il n'y a qu'un fichier.

   La parade : on affiche DEUX FOIS le même montage, l'un cadré sur sa moitié
   gauche, l'autre sur sa moitié droite, et on déplace la coupure entre les
   deux. La comparaison est parfaitement alignée par construction, puisque
   c'est la même image. Et ça marche même quand le photographe n'a pas repris
   exactement le même cadrage — ce qui est le cas partout ici.

   `--x` porte la position de la coupure, en pourcentage. */
.compare{
  position:relative;overflow:hidden;border-radius:5px;margin:0;
  background:var(--ink-3);touch-action:pan-y;user-select:none;cursor:ew-resize;
  --x:50%;
}
.compare .cadre{position:relative;width:100%;aspect-ratio:var(--ar,4/3)}
.compare .moitie{
  position:absolute;inset:0;background-repeat:no-repeat;
  /* 200 % de large : une moitié du montage remplit tout le cadre.
     `auto` en hauteur, jamais 100 % : l'image garde ses proportions, et le
     débord se recadre par le bas. */
  background-size:200% auto;
}
/* Ancrage en bas, et non au centre. Les montages d'origine portent « Avant »
   et « Après » incrustés en HAUT de chaque moitié : avec le curseur, les deux
   mots se rejoignaient à la coupure et on lisait « AVARÈS ». Le cadre est donc
   volontairement plus court que la moitié, et le bandeau du haut sort du
   champ. Nos propres étiquettes, elles, suivent la coupure sans jamais s'y
   heurter. */
.compare .avant{background-position:left bottom}
.compare .apres{background-position:right bottom;clip-path:inset(0 0 0 var(--x))}
/* Montage inversé (le propre est à gauche) : on échange les deux cadrages. */
.compare.inverse .avant{background-position:right bottom}
.compare.inverse .apres{background-position:left bottom}

.compare .trait{
  position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:var(--green);
  transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.compare .poignee{
  position:absolute;top:50%;left:var(--x);transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;pointer-events:none;
  box-shadow:0 4px 18px rgba(0,0,0,.5);color:#06220f;font-weight:900;font-size:1rem;
}
/* Le geste doit s'annoncer : sans ça, personne ne devine qu'on peut glisser. */
.compare .poignee::after{content:"‹ ›";letter-spacing:-.1em}
.compare .etiq{
  position:absolute;top:.7rem;padding:.28rem .6rem;border-radius:2px;
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(33,31,32,.82);backdrop-filter:blur(4px);pointer-events:none;
}
.compare .etiq.g{left:.7rem}
.compare .etiq.d{right:.7rem;background:var(--green);color:#06220f}

/* Le curseur natif accepte le clavier et les lecteurs d'écran ; on le rend
   invisible plutôt que d'inventer un faux composant qu'eux ne verraient pas. */
.compare input[type=range]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;
}
.compare input[type=range]:focus-visible ~ .trait{
  box-shadow:0 0 0 3px var(--paper);
}
.compare-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:2.6rem;align-items:start}
@media(max-width:900px){.compare-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.compare-grille{grid-template-columns:1fr}}
/* Le cadre garde le rapport EXACT de la moitié du montage : aucune
   déformation, aucun recadrage, et les étiquettes « Avant » / « Après »
   incrustées restent visibles. Mais un rapport 2/3 étalé sur une colonne de
   590 px donne 885 px de haut : on bride la largeur pour que la comparaison
   tienne d'un seul regard. */
.compare{max-width:360px;margin-inline:auto;width:100%}
.compare-lg{margin-top:.7rem;font-size:.9rem;color:var(--muted);font-weight:600}

/* ── Avis Google ─────────────────────────────────────────────────────────────
   Des avis réels, recopiés mot pour mot de la fiche Google. Rien de réécrit,
   rien d'embelli : deux d'entre eux sont même coupés par Google, et ils
   restent coupés ici. Un témoignage retouché se sent, et il coûte plus cher en
   crédibilité qu'il n'en rapporte.

   Le ruban défile tout seul. Il s'arrête au survol et au clavier — sinon on ne
   peut pas finir de lire une phrase qui s'échappe. */
.avis-piste{
  overflow:hidden;margin-top:2.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.avis-rail{display:flex;gap:1.1rem;width:max-content;animation:defile 72s linear infinite}
.avis-piste:hover .avis-rail,
.avis-piste:focus-within .avis-rail{animation-play-state:paused}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.avis{
  flex:0 0 clamp(258px,74vw,330px);display:flex;flex-direction:column;gap:.75rem;
  background:var(--ink);border:1px solid var(--line);border-radius:5px;
  padding:1.3rem 1.4rem;transition:border-color .3s;
}
.avis:hover{border-color:rgba(48,162,72,.5)}
.etoiles{color:#f5b731;font-size:.92rem;letter-spacing:.14em;line-height:1}
.avis p{font-size:.95rem;line-height:1.55;color:#e2ddd9}
.avis .qui{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.avis .qui b{display:block;color:var(--paper);font-size:.93rem;letter-spacing:-.01em}
.avis-pied{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:center}
.note-globale{display:flex;align-items:baseline;gap:.6rem}
.note-globale b{font-size:2.1rem;font-weight:900;letter-spacing:-.04em;line-height:1}
.note-globale span{color:var(--muted);font-size:.92rem}

/* ── Bande de photos défilante ───────────────────────────────────────────────
   Le contraire de la galerie : on ne demande pas au visiteur de regarder, on
   fait passer le travail devant lui. Défile en sens inverse des avis, pour
   qu'on sente deux mouvements et pas un tapis roulant. */
.bande{overflow:hidden;padding:0;border-block:1px solid var(--line);background:var(--ink-2)}
.bande-rail{display:flex;gap:.7rem;width:max-content;padding:.7rem 0;
  animation:defile-inv 58s linear infinite}
.bande:hover .bande-rail{animation-play-state:paused}
@keyframes defile-inv{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.bande img{
  height:clamp(140px,22vw,225px);width:auto;border-radius:4px;flex:none;
  filter:saturate(.92);transition:filter .35s,transform .35s var(--ease);
}
.bande img:hover{filter:saturate(1.1);transform:scale(1.03)}

/* ── Région ──────────────────────────────────────────────────────────────── */
.towns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.town{padding:.5rem 1rem;border:1px solid var(--line);border-radius:2px;background:var(--ink-2);font-size:.9rem;font-weight:700;transition:border-color .25s,color .25s}
.town:hover{border-color:var(--green);color:var(--green-lite)}
.region-note{margin-top:1.9rem;padding:1.2rem 1.4rem;background:var(--ink-2);border-left:4px solid var(--green);font-size:var(--s-0)}

/* ── Appel final ─────────────────────────────────────────────────────────── */
.final{background:var(--green);color:#06220f;text-align:center}
.final h2{font-size:var(--s-3);text-wrap:balance}
.final p{margin-top:1rem;font-size:var(--s-1);max-width:52ch;margin-inline:auto;color:rgba(6,34,15,.78)}
.final .btn{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:4px 4px 0 rgba(0,0,0,.28);margin-top:2rem}
.final .btn:hover{background:#000;box-shadow:6px 6px 0 rgba(0,0,0,.28)}

/* ── Barre collante mobile ───────────────────────────────────────────────── */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;gap:.6rem;
  /* La barre d'accueil des iPhone récents mange le bas de l'écran : sans cette
     marge, le doigt tape la barre du système au lieu du bouton. */
  padding:.65rem .65rem calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(33,31,32,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .btn{flex:1;padding:.85rem 1rem;font-size:.92rem;box-shadow:none}
@media(max-width:760px){.sticky-cta{display:flex}body{padding-bottom:calc(4.6rem + env(safe-area-inset-bottom))}}

/* ── Pied de page ────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:3.4rem 0 2.2rem;color:var(--muted);font-size:.9rem}
/* Neuf liens de 16 px séparés par 7 px : impossible à viser au pouce sans se
   tromper de service. On les espace, sans changer leur allure. */
footer .foot p{margin:0}
footer .foot p a{display:inline-block;padding:.5rem 0;min-height:44px;line-height:1.55}
.foot{display:flex;flex-wrap:wrap;gap:2.2rem;justify-content:space-between}
footer a{text-decoration:none}
footer a:hover{color:var(--paper)}
footer h4{margin:0 0 .8rem;font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:#7d7774}
.foot-end{margin-top:2.3rem;padding-top:1.3rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;font-size:.82rem}

/* ── Révélation ──────────────────────────────────────────────────────────── */
.rv{opacity:0;translate:0 26px;transition:opacity .75s var(--ease),translate .75s var(--ease)}
.rv.in{opacity:1;translate:0 0}
.rv-l{opacity:0;translate:-26px 0;transition:opacity .75s var(--ease),translate .75s var(--ease)}
.rv-l.in{opacity:1;translate:0 0}

/* ── Animations pilotées par le défilement ───────────────────────────────────
   `animation-timeline: view()` lie une animation à la position d'un élément
   dans la fenêtre, sans JavaScript, sans écouteur de scroll, et sans réveiller
   le fil principal à chaque pixel — le navigateur la joue sur le fil de
   composition. C'est ce qui permet d'en mettre partout sans ralentir la page.

   Tout est dans @supports : là où ce n'est pas encore reconnu (Firefox pour
   l'instant), rien ne se déclenche et l'IntersectionObserver garde la main.
   Aucune de ces animations ne porte du contenu — elles ne font qu'accompagner
   ce qui est déjà lisible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Les photos de la galerie montent et se dévoilent à leur propre rythme.
       Chacune a sa propre horloge : c'est ce décalage naturel qui donne
       l'impression d'un mouvement vivant plutôt que d'un rideau qui se lève. */
    .gallery .shot{
      animation:monte linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 26%;
    }
    @keyframes monte{
      from{opacity:0;transform:translateY(38px) scale(.97)}
      to{opacity:1;transform:none}
    }

    /* Le fond du héros se décale plus lentement que la page : la parallaxe,
       sans la saccade des versions en JavaScript. */
    .hero-bg img{
      animation:kenburns 30s ease-in-out infinite alternate, derive linear both;
      animation-timeline:auto, view();
      animation-range:normal, cover;
    }
    @keyframes derive{ from{translate:0 -4%} to{translate:0 6%} }

    /* Le trait vert sous le titre de chaque section se dessine quand on
       l'atteint. Un détail, mais c'est celui qu'on remarque. */
    .head .label::before{
      animation:trait linear both;
      animation-timeline:view();
      animation-range:entry 12% entry 92%;
    }
    @keyframes trait{ from{width:0} to{width:26px} }

    /* Les cartes de service arrivent en léger décalage les unes des autres. */
    .autres .carte{
      animation:monte-court linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 22%;
    }
    @keyframes monte-court{
      from{opacity:0;transform:translateY(26px)}
      to{opacity:1;transform:none}
    }

    /* Ces éléments-là sont désormais animés par le défilement : leur état de
       départ « invisible » ne doit plus dépendre de la classe posée en JS,
       sinon les deux mécanismes se contredisent. */
    .gallery .shot.rv,.autres .carte.rv{opacity:1;translate:none;transition:none}
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv,.rv-l{opacity:1;translate:none}
  .mark path{stroke-dashoffset:0}
  .piste-fill{width:100%!important}

  /* Couper l'animation d'un ruban qui défile, c'est le figer sur ses deux
     premières cartes et rendre tout le reste inatteignable — on aurait
     supprimé le contenu en croyant supprimer le mouvement. On le rend donc
     défilable au doigt, et on retire la deuxième copie qui ne servait qu'à
     boucler. */
  .avis-piste,.bande{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .avis-rail,.bande-rail{transform:none!important;width:max-content}
  .avis-piste{-webkit-mask-image:none;mask-image:none}
  [data-copie="2"]{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   CARTE DU TERRITOIRE
   Dessinée à la main en SVG, pas une capture de Google Maps. Trois raisons :
   une capture d'écran de Google en usage commercial est un problème de
   licence, elle pèse trois cents kilo-octets, et elle n'a pas les couleurs de
   l'entreprise. Ici les positions des villes sont les vraies coordonnées,
   projetées dans le cadre — la géographie est juste, seul le style est à nous.
   ══════════════════════════════════════════════════════════════════════════ */
.carte-zone{
  position:relative;background:var(--ink);border:1px solid var(--line);
  border-radius:6px;overflow:hidden;margin-top:1.6rem;
  /* Sans bride, le cadre 800×526 étalé sur toute la largeur donne 789 px de
     haut : on ne voit plus qu'une carte, et il faut défiler pour retrouver la
     liste des villes juste en dessous. */
  max-width:780px;
}
.carte-zone svg{display:block;width:100%;height:auto}
.eau{fill:#1e3a4a}
.rive{fill:none;stroke:#2c5266;stroke-width:1.5}
.terre{fill:#262324}
.rayon{fill:rgba(48,162,72,.09);stroke:var(--green);stroke-width:1.5;stroke-dasharray:5 4}
.ville{cursor:default}
.ville circle{fill:var(--ink);stroke:var(--green);stroke-width:2;transition:r .25s var(--ease),fill .25s}
.ville text{fill:#cfc9c6;font-size:10.5px;font-weight:700;paint-order:stroke;
  stroke:var(--ink);stroke-width:3.5px;stroke-linejoin:round}
.ville:hover circle{fill:var(--green);r:6}
.ville:hover text{fill:#fff}
.ville.siege circle{fill:var(--green);r:7;stroke:#fff}
.ville.siege text{fill:#fff;font-size:12.5px;font-weight:800}
.carte-legende{
  position:absolute;left:.9rem;bottom:.9rem;background:rgba(33,31,32,.86);
  backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:3px;
  padding:.5rem .75rem;font-size:.74rem;font-weight:700;color:var(--muted);
}
.carte-legende b{color:var(--green-lite)}

/* ══════════════════════════════════════════════════════════════════════════
   RUBANS : DÉFILEMENT AUTOMATIQUE **ET** À LA MAIN
   Un ruban qu'on ne peut que regarder passer est frustrant : on voit un avis
   intéressant s'échapper et on n'a aucun moyen de le rattraper. Les deux
   rubans deviennent donc de vrais conteneurs défilants — doigt, molette,
   trackpad, glisser-déposer à la souris — et l'animation s'arrête dès qu'on y
   touche, pour de bon.
   ══════════════════════════════════════════════════════════════════════════ */
.avis-piste,.bande{
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;cursor:grab;
}
.avis-piste::-webkit-scrollbar,.bande::-webkit-scrollbar{display:none}
.avis-piste.saisi,.bande.saisi{cursor:grabbing;scroll-snap-type:none}
/* Dès qu'on manipule, l'animation s'arrête définitivement : la reprendre sous
   le doigt renverrait le contenu qu'on vient d'aller chercher. */
.avis-rail.fige,.bande-rail.fige{animation:none!important;transform:none!important}
.avis{scroll-snap-align:start}
.ruban-outils{display:flex;gap:.5rem;margin-top:1rem;justify-content:flex-end}
.ruban-outils button{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--ink);color:var(--paper);cursor:pointer;font-size:1.1rem;
  display:grid;place-items:center;transition:border-color .2s,background .2s;
}
.ruban-outils button:hover{border-color:var(--green);background:var(--ink-3)}
.ruban-outils button:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ══════════════════════════════════════════════════════════════════════════
   PAGES DE SERVICE
   ══════════════════════════════════════════════════════════════════════════ */
.svc-hero{position:relative;overflow:hidden;min-height:clamp(340px,52vh,460px);
  display:grid;align-items:end;padding:5rem 0 2.6rem}
.svc-hero .fond{position:absolute;inset:0;z-index:0}
.svc-hero .fond img{width:100%;height:100%;object-fit:cover}
.svc-hero .fond::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 8%,rgba(33,31,32,.72) 48%,rgba(33,31,32,.97) 100%)}
.svc-hero .shell{position:relative;z-index:1}
.svc-hero h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);margin-top:1rem;text-wrap:balance;
  text-shadow:0 2px 22px rgba(0,0,0,.55)}
.svc-hero p{margin-top:1rem;font-size:var(--s-1);color:#ded9d5;max-width:52ch;line-height:1.45}

.fil{font-size:.85rem;color:var(--muted);padding:1.1rem 0}
.fil a{text-decoration:none;font-weight:700}
.fil a:hover{color:var(--green-lite)}

.svc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr;gap:2rem}}
.svc-txt h2{font-size:var(--s-2);margin-bottom:1rem}
.svc-txt h3{font-size:var(--s-1);margin:2rem 0 .7rem}
.svc-txt p{color:#ddd8d4;margin-top:.8rem;line-height:1.65}
.svc-photos{display:grid;gap:1rem;position:sticky;top:6.5rem}
@media(max-width:900px){.svc-photos{position:static}}
.svc-photos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:5px}

/* Le formulaire au bas de chaque page de service : le visiteur qui vient de
   lire trois écrans sur le déneigement de toiture ne devrait pas avoir à
   chercher où demander un prix, ni à redire quel service l'intéresse. */
.svc-form{background:var(--ink-2);border-block:1px solid var(--line)}
.svc-form-carte{max-width:640px;margin-inline:auto}
.svc-form form{display:grid;gap:1rem;margin-top:1.6rem}
.svc-form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.svc-form .row{grid-template-columns:1fr}}
.svc-form label{display:grid;gap:.4rem;font-size:.76rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.svc-form input,.svc-form select{
  font:inherit;font-size:1rem;color:var(--paper);width:100%;
  background:var(--ink);border:1px solid var(--line);border-radius:3px;padding:.85rem 1rem;
  transition:border-color .18s,box-shadow .18s}
.svc-form input::placeholder{color:#6f6a67}
.svc-form input:focus,.svc-form select:focus{
  outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(48,162,72,.28)}
.svc-form input[aria-invalid="true"]{border-color:#d2685a}
.svc-form select{appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%234fc46a' stroke-width='2.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.svc-form .note{font-size:.85rem;color:var(--muted)}
.svc-form .status{padding:.9rem 1.1rem;border-radius:3px;font-size:.94rem;
  font-weight:700;display:none;border:1px solid}
.svc-form .status.ok{display:block;background:rgba(48,162,72,.14);border-color:var(--green);color:var(--green-lite)}
.svc-form .status.err{display:block;background:rgba(210,104,90,.14);border-color:#d2685a;color:#e79c90}
.svc-form .merci{display:none;text-align:center;padding:2rem 1rem}
.svc-form .merci.on{display:block}
.svc-form .coche{width:60px;height:60px;margin:0 auto 1.1rem;border-radius:50%;
  background:var(--green);display:grid;place-items:center}

/* Les autres services, en bas de chaque page. */
.svc-autres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin-top:1.6rem}
.svc-lien{
  display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;min-height:56px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:4px;
  text-decoration:none;font-weight:700;font-size:.95rem;
  transition:border-color .25s,transform .25s var(--ease);
}
.svc-lien:hover{border-color:var(--green);transform:translateY(-3px);color:var(--green-lite)}
.svc-lien img{width:44px;height:44px;object-fit:cover;border-radius:3px;flex:none}

/* Toute la carte de service est cliquable, pas seulement le petit lien. */
.carte a.couvre{position:absolute;inset:0;z-index:1;text-indent:-9999px;overflow:hidden}
.carte{position:relative}
.carte .txt,.carte .plus{position:relative;z-index:2}
.carte .plus{pointer-events:none}

/* Boutons du héros qui remplacent la ligne de faits. */
.hero-actions{display:flex;flex-direction:column;gap:.7rem;margin-top:2.2rem;align-items:flex-start}
.lien-fleche{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  font-weight:800;font-size:.98rem;text-decoration:none;color:var(--paper);
  border-bottom:2px solid rgba(255,255,255,.22);padding-bottom:.15rem;
  transition:color .2s,border-color .2s;
}
.lien-fleche:hover{color:var(--green-lite);border-bottom-color:var(--green)}
.lien-fleche .etoiles-mini{color:#f5b731;letter-spacing:.08em}

/* ══════════════════════════════════════════════════════════════════════════
   CARTE INTERACTIVE
   ══════════════════════════════════════════════════════════════════════════ */
.carte-zone svg{touch-action:none;cursor:default}
.carte-zone.zoomee svg{cursor:grab}
.carte-zone.saisie svg{cursor:grabbing}
.carte-outils{
  position:absolute;top:.8rem;right:.8rem;display:flex;flex-direction:column;gap:.4rem;
}
.carte-outils button{
  width:42px;height:42px;border-radius:3px;border:1px solid var(--line);
  background:rgba(33,31,32,.88);backdrop-filter:blur(6px);color:var(--paper);
  cursor:pointer;font-size:1.2rem;font-weight:700;line-height:1;
  display:grid;place-items:center;transition:border-color .2s,background .2s,opacity .2s;
}
.carte-outils button:hover:not(:disabled){border-color:var(--green);background:var(--ink-3)}
.carte-outils button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.carte-outils button:disabled{opacity:.32;cursor:default}
.carte-outils .reinit{font-size:.62rem;font-weight:800;letter-spacing:.06em}
/* Le mode d'emploi ne s'affiche que tant qu'on n'a pas encore zoomé. */
.carte-aide{
  position:absolute;right:.8rem;bottom:.8rem;max-width:14rem;text-align:right;
  font-size:.72rem;color:var(--muted);pointer-events:none;transition:opacity .3s;
}
.carte-zone.zoomee .carte-aide{opacity:0}
@media(max-width:620px){.carte-aide{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   APERÇU AGRANDI D'UNE PHOTO
   ══════════════════════════════════════════════════════════════════════════ */
.apercu{
  position:fixed;inset:0;z-index:200;display:none;
  grid-template-rows:1fr auto;gap:1rem;padding:4.2rem 1rem 1.2rem;
  background:rgba(14,13,13,.94);backdrop-filter:blur(8px);
  animation:apparait .22s var(--ease);
}
.apercu.on{display:grid}
@keyframes apparait{from{opacity:0}to{opacity:1}}
.apercu-cadre{
  margin:0;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.8rem;
}
.apercu-cadre img{
  max-width:min(100%,1100px);max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:5px;box-shadow:0 24px 70px -24px rgba(0,0,0,.9);
}
.apercu-lg{
  font-size:.92rem;font-weight:600;color:#d9d4d0;text-align:center;
  max-width:60ch;text-wrap:balance;
}
.apercu-x{
  position:absolute;top:.9rem;right:.9rem;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:rgba(33,31,32,.9);color:var(--paper);
  cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background .2s;
}
.apercu-x:hover{border-color:var(--green);background:var(--ink-3);color:var(--green-lite)}
.apercu-x:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* L'appel à l'action arrive au moment où quelqu'un regarde de près le travail
   et se dit « mon entrée aussi aurait besoin de ça ». */
.apercu-pied{
  display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center;justify-content:center;
  text-align:center;padding-bottom:env(safe-area-inset-bottom);
}
.apercu-pied p{font-weight:700;font-size:1.02rem}
@media(max-width:560px){
  .apercu{padding:4rem .7rem 1rem}
  .apercu-pied{flex-direction:column;gap:.7rem}
  .apercu-pied .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.apercu{animation:none}}