/* ==========================================================================
   Wollmath Group — direction artistique
   Principes retenus après benchmark des sites de construction les mieux notés
   (Turner, DPR, Webcor, Suffolk) :
     · la photographie réelle est le sujet, pas la décoration
     · la retenue lit comme de la confiance — pas de cartes, pas d'ombres,
       pas d'icônes décoratives, angles francs
     · contraste typographique fort : serif éditoriale / grotesque
     · le site a un point de vue, écrit à la première personne
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  --encre:#111111;
  --encre-70:#4A4A4A;
  --encre-40:#8A8A8A;
  --papier:#FBFAF8;
  --papier-2:#F2F0EC;
  --filet:#DDD9D2;
  --or:#B8963F;
  --urgence:#D2401A;
  --appel:#7FCDEE;
  --appel-fonce:#5FB8E0;
  --whatsapp:#25D366;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Archivo',-apple-system,'Segoe UI',sans-serif;
  --gouttiere:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--papier);
  color:var(--encre);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gouttiere)}

/* Étiquettes discrètes, alignées à gauche — jamais centrées */
.eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--encre-40);
  display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--filet)}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.02;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,7vw,5.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.15}
p{margin-bottom:1em}
.mesure{max-width:58ch}

/* ---------- Liens d'action ---------- */
.act{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:17px 30px;border:1px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.act-appel{background:var(--appel);color:var(--encre)}
.act-appel:hover{background:var(--appel-fonce)}
/* Bouton secondaire (WhatsApp, avis Google).
   Il était en blanc sur fond transparent : lisible sur la photo sombre de
   l'accueil, MAIS invisible partout ailleurs — page 404 et bloc avis se
   trouvent sur fond clair. Le style par défaut est donc désormais foncé,
   et la variante blanche ne s'applique que dans les sections sombres. */
.act-wa{background:transparent;color:var(--encre);border-color:var(--encre)}
.act-wa:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.ouverture .act-wa,.position .act-wa,.artisan .act-wa,.materiel .act-wa,
.rappel .act-wa,.carte-marge.sombre .act-wa{
  color:#fff;border-color:rgba(255,255,255,.45);
}
.ouverture .act-wa:hover,.position .act-wa:hover,.artisan .act-wa:hover,
.materiel .act-wa:hover,.rappel .act-wa:hover,.carte-marge.sombre .act-wa:hover{
  background:#fff;color:var(--encre);border-color:#fff;
}
.act-sombre{background:var(--encre);color:#fff}
.act-sombre:hover{background:#000}
.act-fil{border-color:var(--encre);color:var(--encre)}
.act-fil:hover{background:var(--encre);color:#fff}

/* ---------- Barre supérieure + navigation ---------- */
.bandeau{
  background:var(--encre);color:#CFCBC4;
  font-size:.78rem;letter-spacing:.06em;padding:10px 0;
}
.bandeau .wrap{display:flex;gap:26px;flex-wrap:wrap;justify-content:space-between}
.bandeau b{color:var(--or);font-weight:600}

.tete{
  position:sticky;top:0;z-index:50;background:var(--papier);
  border-bottom:1px solid var(--filet);
}
.tete .wrap{display:flex;align-items:center;gap:26px;height:92px}
.marque{display:flex;align-items:center;gap:12px;flex-shrink:0}
.marque img{height:56px;width:auto}
.marque-nom{display:flex;flex-direction:column;line-height:1}
.marque-nom b{
  font-family:var(--serif);font-size:1.42rem;font-weight:600;
  letter-spacing:-.02em;color:var(--encre);
}
.marque-nom i{
  font-style:normal;font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--or);font-weight:600;margin-top:3px;
}
.menu{margin-left:auto;display:flex;align-items:center;gap:22px}
.menu a{
  font-size:.8rem;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;padding-bottom:3px;white-space:nowrap;
  border-bottom:1px solid transparent;
}
.menu a:hover{border-color:var(--encre)}
.langue{display:flex;gap:2px;font-size:.76rem;letter-spacing:.08em;font-weight:600}
.langue a,.langue .actif{border:1px solid var(--filet);padding:5px 9px;text-transform:uppercase}
.langue .actif{background:var(--encre);color:#fff;border-color:var(--encre)}
.langue a:hover{border-color:var(--encre)}
.tel-tete{background:var(--encre);color:#fff;padding:13px 20px;font-weight:600;font-size:.88rem;white-space:nowrap;flex-shrink:0}
.tel-tete:hover{background:var(--appel);color:var(--encre)}
.hamburger{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;cursor:pointer}

/* ---------- Ouverture : la photographie est le sujet ---------- */
/* Le fond sombre est indispensable, pas décoratif. Le texte de l'ouverture
   est en blanc et ne tenait sa lisibilité que de la photo placée derrière.
   Sur une connexion mobile lente, la photo (1920x1200) arrive après le
   texte : pendant ce temps, du blanc sur du blanc — le premier écran du
   site apparaît entièrement vide. C'est ce qu'a photographié le client.
   Avec une couleur de fond, l'ouverture est lisible dès la première image
   rendue, que la photo arrive ou non. */
.ouverture{position:relative;min-height:min(84vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--encre)}
.ouverture .fond{position:absolute;inset:0}
.ouverture .fond img{width:100%;height:100%;object-fit:cover}
.ouverture .voile{
  position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.78) 42%,rgba(10,10,10,.28) 100%);
}
.ouverture .wrap{position:relative;padding-top:96px;padding-bottom:64px;width:100%}
/* Le surtitre par défaut est encre sur papier : illisible ici, où le fond
   est sombre. Chaque section foncée redéfinit sa couleur ; l'ouverture
   faisait exception parce qu'elle n'avait pas de surtitre jusqu'ici. */
.ouverture .eyebrow{color:var(--or)}
.ouverture .eyebrow::after{background:rgba(255,255,255,.22)}
.ouverture h1{color:#fff;max-width:16ch}
.ouverture h1 em{font-style:normal;color:var(--or)}
.ouverture .sous{
  color:#D8D4CD;font-size:clamp(1.02rem,1.5vw,1.2rem);
  max-width:52ch;margin:26px 0 34px;
}
/* La première ligne du sous-titre porte les métiers et les communes :
   c'est le texte que lit Google juste après le titre, et le premier que
   lit un visiteur pressé. On le détache du reste du paragraphe. */
.ouverture .sous b{color:#fff;font-weight:600}
.ouverture .actions{display:flex;flex-wrap:wrap;gap:14px}
.ouverture .meta{
  display:flex;flex-wrap:wrap;gap:8px 34px;margin-top:44px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.2);
  color:#B8B4AD;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
}
.ouverture .meta b{color:#fff;font-weight:600}

/* ---------- Prise de position ---------- */
.position{background:var(--encre);color:#fff;padding:clamp(64px,9vw,120px) 0}
.position .texte{
  font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.9rem);
  line-height:1.18;max-width:22ch;letter-spacing:-.02em;
}
.position .texte span{color:var(--or)}
.position .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,6vw,90px);align-items:end}
.position .appui{color:#B8B4AD;font-size:1.02rem;max-width:44ch}
.position .eyebrow{color:#7E7A73}
.position .eyebrow::after{background:#333}

/* ---------- Services : liste éditoriale, pas de cartes ---------- */
.metiers{padding:clamp(64px,9vw,120px) 0}
.metier{
  display:grid;grid-template-columns:70px minmax(0,1.05fr) minmax(0,1.15fr) 130px;
  gap:clamp(16px,3vw,44px);align-items:start;
  padding:34px 0;border-top:1px solid var(--filet);
  transition:background .18s ease;
}
.metier:last-of-type{border-bottom:1px solid var(--filet)}
.metier:hover{background:var(--papier-2)}
.metier .rang{font-family:var(--serif);font-size:1.1rem;color:var(--or)}
.metier h3{margin-bottom:6px}
.metier .quoi{color:var(--encre-70);font-size:.97rem;margin:0}
.metier .details{
  color:var(--encre-70);font-size:.93rem;margin:0;
  columns:2;column-gap:26px;
}
.metier .details span{display:block;padding:2px 0}
.metier .aller{
  justify-self:end;align-self:center;font-size:.82rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  border-bottom:1px solid var(--encre);padding-bottom:3px;
}
.metier .aller:hover{color:var(--urgence);border-color:var(--urgence)}

/* ---------- Chantiers : défilement horizontal plein bord ---------- */
.chantiers{padding:clamp(64px,9vw,110px) 0 clamp(50px,7vw,90px);background:var(--papier-2)}
.piste{
  display:flex;gap:20px;overflow-x:auto;padding:0 var(--gouttiere) 20px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.piste figure{flex:0 0 min(78vw,470px);scroll-snap-align:start}
.piste img{width:100%;aspect-ratio:4/3;object-fit:cover}
.piste figcaption{
  margin-top:12px;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-40);
}

/* ---------- Territoire ---------- */
.territoire{padding:clamp(64px,9vw,120px) 0}
.territoire .haut{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:56px}
.secteurs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.secteur h4{
  font-family:var(--sans);font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--or);font-weight:600;
  padding-bottom:12px;border-bottom:1px solid var(--filet);margin-bottom:14px;
}
.secteur a{
  display:block;padding:7px 0;font-size:1.02rem;
  border-bottom:1px solid transparent;
}
.secteur a:hover{color:var(--urgence)}
.secteur a::after{content:" →";opacity:0;transition:opacity .15s}
.secteur a:hover::after{opacity:1}

/* ---------- Artisan ---------- */
.artisan{background:var(--encre);color:#fff;padding:clamp(64px,9vw,120px) 0}
.artisan .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px)}
.artisan .eyebrow{color:#7E7A73}
.artisan .eyebrow::after{background:#333}
.artisan h2{color:#fff}
.artisan p{color:#C4C0B9}
.artisan strong{color:#fff;font-weight:600}
.artisan .signature{
  font-family:var(--serif);font-size:1.5rem;color:var(--or);
  margin-top:10px;
}
.engagements{margin-top:34px;border-top:1px solid #2E2E2E}
.engagement{padding:20px 0;border-bottom:1px solid #2E2E2E;display:grid;grid-template-columns:1fr 1.5fr;gap:20px}
.engagement b{font-family:var(--serif);font-weight:600;font-size:1.16rem;color:#fff}
.engagement span{color:#A9A59E;font-size:.96rem}

/* ---------- Contact ---------- */
.contact{padding:clamp(64px,9vw,120px) 0}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.champ{margin-bottom:22px}
.champ label{
  display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--encre-40);margin-bottom:8px;
}
.champ input,.champ textarea{
  width:100%;border:0;border-bottom:1px solid var(--encre);
  background:transparent;padding:11px 0;font:inherit;font-size:1.05rem;color:var(--encre);
}
.champ input:focus,.champ textarea:focus{outline:0;border-color:var(--urgence)}
.contact .note{font-size:.85rem;color:var(--encre-40);margin-top:16px}
.direct{border-top:1px solid var(--filet);margin-top:36px;padding-top:26px}
.direct a{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--filet);font-size:1.05rem}
.direct a b{font-weight:600}
.direct a span{color:var(--encre-40);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;align-self:center}
.direct a:hover b{color:var(--urgence)}

/* ---------- Pied ---------- */
.pied{background:var(--encre);color:#8E8A83;padding:70px 0 30px;font-size:.92rem}
.pied .colonnes{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.pied img{height:46px;width:auto;background:#fff;padding:5px;flex-shrink:0}
/* Le logo du pied portait width="200" height="66" alors que le fichier fait
   520x403 : le navigateur l'étirait donc à un rapport 3:1. On déclare la vraie
   proportion et on laisse la largeur se calculer. */
/* Marque du pied de page.
   Le logo est empilé au-dessus du nom et prend EXACTEMENT sa largeur.
   Astuce : « width:0 ; min-width:100% » fait que l'image ne pèse rien dans
   le calcul de largeur du bloc — c'est le mot « Wollmath » qui la fixe —
   puis l'image s'étire jusqu'à cette largeur. « height:auto » conserve la
   proportion du fichier : le dessin grandit, il ne se déforme pas. */
.marque-pied{
  display:grid;width:max-content;gap:12px;justify-items:stretch;
  margin-bottom:20px;text-decoration:none;
}
.marque-pied img{
  width:0;min-width:100%;height:auto;
  background:#fff;padding:8px;
  /* Filet de sécurité : si une règle venue d'ailleurs impose une hauteur,
     le dessin reste à ses proportions au lieu de s'étirer. */
  object-fit:contain;
}
.marque-pied .marque-nom{display:block}
.marque-pied .marque-nom b{color:#fff;font-size:1.42rem;letter-spacing:-.02em}
.marque-pied .marque-nom i{color:var(--or)}
.pied h5{
  font-family:var(--sans);color:#fff;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:14px;font-weight:600;
}
.pied a{display:block;padding:4px 0}
.pied a:hover{color:#fff}
.pied .bas{
  border-top:1px solid #2E2E2E;margin-top:44px;padding-top:20px;
  display:flex;flex-wrap:wrap;gap:10px 30px;font-size:.8rem;letter-spacing:.04em;
}

/* ---------- Contenu en attente ---------- */
.attente{
  border-left:2px solid var(--or);padding:14px 0 14px 18px;
  font-size:.9rem;color:#A9A59E;margin-top:26px;
}
.attente b{display:block;color:var(--or);font-weight:600;margin-bottom:3px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}

/* ---------- Actions permanentes ---------- */
.wa-flottant{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:54px;height:54px;background:var(--whatsapp);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.wa-flottant svg{width:29px;height:29px;fill:#fff}
.barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none}
.barre-mobile a{
  padding:17px;text-align:center;color:#fff;font-weight:600;font-size:.98rem;
  letter-spacing:.04em;
}
.barre-mobile .a{background:var(--appel);color:var(--encre)}
.barre-mobile .w{background:var(--whatsapp)}

/* ---------- Adaptations ---------- */
@media (max-width:1080px){
  .metier{grid-template-columns:44px 1fr;row-gap:12px}
  .metier .details{grid-column:2;columns:2}
  .metier .aller{grid-column:2;justify-self:start;align-self:start}
  .secteurs{grid-template-columns:1fr 1fr}
  .pied .colonnes{grid-template-columns:1fr 1fr}
}
@media (max-width:1180px){
  .menu{display:none}
  .hamburger{display:block}
}
@media (max-width:860px){
  .hamburger{display:block}
  .position .wrap,.artisan .wrap,.contact .wrap,.territoire .haut{grid-template-columns:1fr}
  .position .texte{max-width:none}
  .barre-mobile{display:grid;grid-template-columns:1fr 1fr}
  .wa-flottant{display:none}
  body{padding-bottom:58px}
  .ouverture{min-height:auto}
  .ouverture .wrap{padding-top:80px;padding-bottom:52px}
  .engagement{grid-template-columns:1fr;gap:4px}
  .metier .details{columns:1}
  .secteurs{grid-template-columns:1fr}
}

/* ==========================================================================
   PAGES INTÉRIEURES
   ========================================================================== */

/* Fil d'Ariane */
.fil{border-bottom:1px solid var(--filet);font-size:.8rem;letter-spacing:.06em}
.fil .wrap{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px;padding-bottom:14px;color:var(--encre-40)}
.fil a:hover{color:var(--encre);text-decoration:underline}
.fil a::after,.fil span::after{content:"";margin-left:8px}
.fil a::after{content:"/";color:var(--filet);margin-left:8px}
.fil span{color:var(--encre)}

/* En-tête de page intérieure */
.tete-page{padding:clamp(46px,6vw,80px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--filet)}
.tete-page .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.tete-page.etroite .wrap{grid-template-columns:1fr;max-width:900px}
.tete-page h1{margin-bottom:20px;font-size:clamp(2.1rem,5vw,4rem)}
.tete-page .chapo{font-size:clamp(1.04rem,1.5vw,1.2rem);color:var(--encre-70);max-width:54ch;margin-bottom:28px}
.tete-page .actions{display:flex;flex-wrap:wrap;gap:12px}
.tete-image img{width:100%;aspect-ratio:4/3;object-fit:cover}
.note-langue{margin-top:22px;font-size:.9rem;color:var(--encre-40)}
.note-langue a{border-bottom:1px solid var(--filet)}
.note-langue a:hover{color:var(--urgence);border-color:var(--urgence)}

/* Corps : texte + colonne latérale */
.corps-page{padding:clamp(50px,7vw,90px) 0}
.corps-page .wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr);gap:clamp(30px,5vw,72px);align-items:start}
.corps-page.pleine .wrap{grid-template-columns:1fr}
.colonne-texte{max-width:70ch}
.colonne-texte h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:38px 0 14px}
.colonne-texte h2:first-child{margin-top:0}
.colonne-texte p{color:var(--encre-70);font-size:1.04rem}
.colonne-texte .bloc{padding:22px 0;border-top:1px solid var(--filet)}
.colonne-texte .bloc h3{margin-bottom:8px}
.colonne-texte .bloc p{margin:0}
.etapes{counter-reset:e;list-style:none;margin:0}
.etapes li{counter-increment:e;padding:20px 0 20px 52px;border-top:1px solid var(--filet);position:relative;color:var(--encre-70)}
.etapes li::before{content:counter(e,decimal-leading-zero);position:absolute;left:0;top:20px;font-family:var(--serif);color:var(--or);font-size:1.05rem}

.encadre{border-left:3px solid var(--or);padding:18px 0 18px 22px;margin:34px 0;background:var(--papier-2)}
.encadre b{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:6px}
.encadre p{margin:0;color:var(--encre-70)}
.attente-clair{border-left:2px dashed var(--or);padding:14px 0 14px 18px;margin-top:30px;color:var(--encre-40);font-size:.92rem}
.attente-clair b{display:block;color:var(--or);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}
.attente-clair p{margin:0}

/* Colonne latérale */
.marge{position:sticky;top:108px;display:grid;gap:18px}
.carte-marge{border:1px solid var(--filet);padding:24px}
.carte-marge h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-40);font-weight:600;margin-bottom:14px}
.carte-marge.sombre{background:var(--encre);color:#fff;border-color:var(--encre)}
.carte-marge.sombre h4{color:var(--or)}
.carte-marge.sombre p{color:#B4B0A9;font-size:.95rem;margin-bottom:16px}
.liste-mots{list-style:none}
.liste-mots li{padding:7px 0;border-bottom:1px solid var(--filet);font-size:.95rem;color:var(--encre-70)}
.liste-mots li:last-child{border:0}
.fiche{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.93rem}
.fiche dt{color:var(--encre-40)}
.fiche dd{font-weight:500}
.carte-marge.sombre .fiche dt{color:#87837C}
.carte-marge.sombre .fiche dd{color:#fff}

/* Bande image pleine largeur */
.bande-image img{width:100%;max-height:min(58vh,540px);object-fit:cover}

/* Grilles de liens */
.liens-communes{padding:clamp(48px,6vw,80px) 0;background:var(--papier-2)}
.grille-communes{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.grille-communes a{border:1px solid var(--filet);background:#fff;padding:10px 18px;font-size:.95rem}
.grille-communes a:hover{background:var(--encre);color:#fff;border-color:var(--encre)}

.autres-services{padding:clamp(48px,6vw,80px) 0}
.grille-autres{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;margin-top:22px;border-top:1px solid var(--filet)}
.grille-autres a{padding:24px 24px 24px 0;border-bottom:1px solid var(--filet);border-right:1px solid var(--filet)}
.grille-autres a:last-child{border-right:0}
.grille-autres a:hover b{color:var(--urgence)}
.grille-autres b{display:block;font-family:var(--serif);font-size:1.22rem;font-weight:600;margin-bottom:6px}
.grille-autres span{color:var(--encre-70);font-size:.93rem}

/* Page zones */
.corps-zones{padding:clamp(48px,6vw,84px) 0}
.bloc-secteur{margin-bottom:52px}
.bloc-secteur h2{font-size:clamp(1.4rem,2.4vw,1.9rem);padding-bottom:14px;border-bottom:1px solid var(--encre);margin-bottom:0}
.liste-communes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.liste-communes a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:16px 20px 16px 0;border-bottom:1px solid var(--filet)}
.liste-communes a b{font-size:1.08rem;font-weight:500}
.liste-communes a span{font-size:.8rem;color:var(--encre-40);letter-spacing:.04em;white-space:nowrap}
.liste-communes a:hover b{color:var(--urgence)}

/* FAQ */
.corps-faq{padding:clamp(40px,5vw,70px) 0;max-width:920px;margin:0 auto}
.qr{border-top:1px solid var(--filet)}
.qr:last-child{border-bottom:1px solid var(--filet)}
.qr summary{cursor:pointer;padding:22px 40px 22px 0;font-family:var(--serif);font-size:clamp(1.08rem,1.9vw,1.35rem);font-weight:600;position:relative;list-style:none}
.qr summary::-webkit-details-marker{display:none}
.qr summary::after{content:"+";position:absolute;right:6px;top:20px;color:var(--or);font-size:1.5rem;font-family:var(--sans);font-weight:400}
.qr[open] summary::after{content:"–"}
.qr .rep{padding:0 40px 24px 0}
.qr .rep p{color:var(--encre-70);margin:0}

/* Conseils */
.grille-conseils{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border-top:1px solid var(--filet)}
.carte-conseil{padding:30px 30px 30px 0;border-bottom:1px solid var(--filet);border-right:1px solid var(--filet)}
.carte-conseil:last-child{border-right:0}
.carte-conseil h3{margin-bottom:10px}
.carte-conseil p{color:var(--encre-70);font-size:.96rem}
.carte-conseil:hover h3{color:var(--urgence)}

.lien-suite{font-size:.84rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--encre);padding-bottom:3px}
.lien-suite::after{content:" →"}
.lien-suite:hover{color:var(--urgence);border-color:var(--urgence)}

/* Bloc de rappel */
.rappel{background:var(--encre);color:#fff;padding:clamp(46px,6vw,74px) 0}
.rappel .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
.rappel h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2.2rem);margin-bottom:10px}
.rappel p{color:#B4B0A9;margin:0;max-width:50ch}
.rappel-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.act-fil-clair{border-color:rgba(255,255,255,.45);color:#fff}
.act-fil-clair:hover{background:#fff;color:var(--encre)}

/* Formulaire */
.formulaire .champ{margin-bottom:22px}
.contact-page{padding-top:clamp(40px,5vw,64px)}
.contact-page h1{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:18px}

/* Menu déployé.
   Le bouton apparaît dès 1180 px (c'est là que la barre de navigation ne
   tient plus sur une ligne). Ces règles étaient limitées à 860 px : entre
   861 et 1180 px, le bouton basculait bien la classe mais « .menu{display:none} »
   l'emportait toujours — le menu semblait ne pas répondre au clic. */
@media (max-width:1180px){
  .menu.ouvert{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;background:var(--papier);
    border-bottom:1px solid var(--filet);padding:8px var(--gouttiere) 20px;
    box-shadow:0 12px 24px rgba(17,17,17,.10);z-index:60;
  }
  .menu.ouvert a{padding:14px 0;border-bottom:1px solid var(--filet)}
  .menu.ouvert .langue{margin-top:14px}
  .menu.ouvert .tel-tete{margin-top:14px;text-align:center}
  .tete .wrap{position:relative}
  .hamburger{
    display:block;padding:10px 12px;line-height:1;
    min-width:44px;min-height:44px;   /* cible tactile confortable */
  }
  .hamburger[aria-expanded="true"]{color:var(--or)}
}

@media (max-width:860px){
  .tete-page .wrap,.corps-page .wrap,.rappel .wrap{grid-template-columns:1fr}
  .tete-image{order:-1}
  .marge{position:static}
  .rappel-actions{justify-content:flex-start}
  .grille-autres a,.carte-conseil{border-right:0;padding-right:0}
}

/* Page active dans le menu */
.menu a.ici{border-bottom-color:var(--or);color:var(--or)}

/* Citation d'ouverture dans la section artisan */
.citation{
  font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.8rem);
  line-height:1.28;color:#fff;letter-spacing:-.01em;margin-bottom:22px;
}

/* En-tête de page commune : image un peu plus contenue */
.tete-commune .tete-image img{aspect-ratio:3/2}

/* Marque : repli sur petits écrans */
@media (max-width:520px){
  /* « .tete » est indispensable ici. Le lien du pied porte les deux classes
     (« marque marque-pied »). Sans cette restriction, « .marque img » a la
     même spécificité que « .marque-pied img » mais arrive plus loin dans la
     feuille : il écrasait donc « height:auto » et imposait 46 px de haut au
     logo du pied, dont la largeur reste calée sur celle du mot « Wollmath ».
     Résultat sous 520 px : un logo écrasé à plat, 4:1 au lieu de 1,29:1.
     Invisible sur ordinateur, systématique sur téléphone. */
  .tete .marque img{height:46px}
  .marque-nom b{font-size:1.18rem}
  .marque-nom i{font-size:.58rem;letter-spacing:.24em}
  .tete .wrap{height:78px;gap:14px}
}

/* ---------- Vidéo de réalisation ---------- */
.video-section{padding:clamp(48px,6vw,86px) 0;background:var(--papier-2)}
.video-cadre{
  position:relative;cursor:pointer;overflow:hidden;
  max-width:900px;aspect-ratio:16/9;background:var(--encre);
}
.video-cadre img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.video-cadre:hover img{transform:scale(1.03)}
.video-cadre iframe{width:100%;height:100%;border:0;display:block}
.video-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:2rem;color:#fff;background:rgba(17,17,17,.34);
  transition:background .2s ease;
}
.video-cadre:hover .video-play{background:rgba(17,17,17,.14)}
.video-cadre:focus-visible{outline:3px solid var(--urgence);outline-offset:3px}
.video-legende{margin-top:14px;color:var(--encre-70);font-size:.95rem;max-width:60ch}
.video-attente{
  border:2px dashed var(--or);background:#FDF9F0;padding:26px;max-width:760px;
  color:#6B5A2E;font-size:.95rem;
}
.video-attente b{
  display:block;color:var(--or);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:8px;
}
.video-attente p{margin:0}

/* ---------- Avis clients ---------- */
.avis-section{padding:clamp(48px,6vw,86px) 0}
.grille-avis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;border-top:1px solid var(--filet);margin-top:22px;
}
.avis{padding:28px 30px 28px 0;border-bottom:1px solid var(--filet);border-right:1px solid var(--filet)}
.avis:last-child{border-right:0}
.avis blockquote{
  font-family:var(--serif);font-size:1.12rem;line-height:1.35;
  margin-bottom:16px;letter-spacing:-.01em;
}
.avis figcaption b{display:block;font-weight:600;font-size:.96rem}
.avis figcaption span{font-size:.85rem;color:var(--encre-40)}
@media (max-width:860px){
  .avis{border-right:0;padding-right:0}
}

/* ---------- Note Google dans le bandeau ---------- */
/* La note réelle doit être visible dès la première seconde, sur toutes
   les pages : c'est l'argument le plus fort de l'entreprise. */
.note-google{
  display:inline-flex;align-items:center;gap:8px;color:#CFCBC4;
  text-decoration:none;white-space:nowrap;
}
.note-google:hover{color:#fff}
.note-google b{color:#fff;font-size:.92rem;font-weight:700;letter-spacing:0}
.note-google .etoiles{color:var(--or);letter-spacing:-.06em;font-size:.86rem}

/* ---------- Prestations à coches ---------- */
.prestations{margin:38px 0 0}
.prestations h3{
  font-family:var(--serif);font-size:1.24rem;font-weight:600;
  letter-spacing:-.01em;margin-bottom:16px;
}
.coches{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px 26px}
.coches li{
  position:relative;padding:9px 0 9px 30px;font-size:.98rem;
  border-bottom:1px solid var(--filet);
}
.coches li::before{
  content:"";position:absolute;left:2px;top:15px;width:13px;height:8px;
  border-left:2.5px solid var(--or);border-bottom:2.5px solid var(--or);
  transform:rotate(-45deg);
}

/* ---------- Déroulé d'intervention ---------- */
.etapes{margin:46px 0 0}
.etapes h3{
  font-family:var(--serif);font-size:1.24rem;font-weight:600;
  letter-spacing:-.01em;margin-bottom:22px;
}
.liste-etapes{list-style:none}
.liste-etapes li{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--filet)}
.liste-etapes li:last-child{border-bottom:1px solid var(--filet)}
.liste-etapes .num{
  flex:0 0 40px;height:40px;border-radius:50%;background:var(--encre);
  color:var(--papier);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.94rem;font-variant-numeric:tabular-nums;
}
.liste-etapes h4{font-size:1.02rem;font-weight:600;margin-bottom:5px}
.liste-etapes p{color:var(--encre-70);font-size:.96rem;margin:0}

/* ---------- Couverture par code postal ---------- */
/* Un visiteur cherche d'abord son code postal, pas un nom de commune. */
.couverture{padding:clamp(52px,6vw,92px) 0;background:var(--papier-2)}
.couverture .sous-titre{color:var(--encre-70);margin:14px 0 40px}
.groupe-zone{margin-bottom:36px}
.groupe-zone h3{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--encre);padding-bottom:10px;
  border-bottom:2px solid var(--encre);margin-bottom:2px;
}
.groupe-moyen h3{border-bottom-color:var(--or);color:var(--or)}
.groupe-large h3{border-bottom-color:var(--filet);color:var(--encre-40)}
.grille-cp{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0}
.grille-cp a{
  display:flex;align-items:baseline;gap:10px;padding:11px 14px 11px 0;
  border-bottom:1px solid var(--filet);text-decoration:none;color:var(--encre);
  font-size:.97rem;transition:padding-left .16s ease,color .16s ease;
}
.grille-cp a:hover{padding-left:8px;color:var(--or)}
.grille-cp a.ici{color:var(--or);font-weight:600}
.grille-cp b{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:.86rem;
  color:var(--encre-40);letter-spacing:.02em;
}
.grille-cp a:hover b{color:var(--or)}

/* ---------- Bloc note Google ---------- */
.note-section{padding:clamp(44px,5vw,72px) 0}
.note-bloc{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,64px);
  align-items:center;border-top:2px solid var(--encre);
  border-bottom:1px solid var(--filet);padding:36px 0;
}
.note-chiffre{text-align:center}
.note-chiffre b{
  display:block;font-family:var(--serif);font-size:4.2rem;line-height:.9;
  font-weight:600;letter-spacing:-.03em;
}
.note-chiffre .etoiles{
  display:block;color:var(--or);font-size:1.3rem;letter-spacing:.06em;margin:8px 0 6px;
}
.note-chiffre .note-sous{
  display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-40);
}
.note-texte p{max-width:56ch;color:var(--encre-70);margin-bottom:20px}

/* ---------- Avis clients réels ---------- */
.avis-section .sous-titre{color:var(--encre-70);margin:12px 0 34px}
.mots-avis{
  margin-top:26px;font-size:.9rem;color:var(--encre-40);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
}
.mots-avis span{
  display:inline-flex;align-items:baseline;gap:6px;
  border:1px solid var(--filet);padding:5px 12px;color:var(--encre-70);
}
.mots-avis span b{color:var(--or);font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .note-bloc{grid-template-columns:1fr;text-align:left;gap:24px}
  .note-chiffre{text-align:left}
  .note-google span:last-child{display:none}
}

/* ---------- Métier mis en avant (débouchage) ---------- */
.metier.phare{background:var(--papier-2);border-left:3px solid var(--appel);padding-left:22px}
.metier.phare h3{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.badge-phare{
  background:var(--appel);color:var(--encre);font-size:.66rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:2px;
}

/* ---------- Le matériel embarqué (photo demandée par l'artisan) ---------- */
.materiel{padding:clamp(52px,6vw,92px) 0;background:var(--encre);color:var(--papier)}
.materiel .wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.materiel-image img{width:100%;height:auto;display:block}
.materiel .eyebrow{color:var(--or)}
.materiel h2{
  font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.06;margin:10px 0 20px;
}
.materiel p{color:#CFCBC4;max-width:58ch;margin-bottom:16px}
.materiel-liens .lien-suite{color:var(--or);border-color:rgba(184,150,63,.45)}
.materiel-liens .lien-suite:hover{color:#fff;border-color:#fff}
@media (max-width:760px){
  .materiel .wrap{grid-template-columns:1fr}
  .materiel-image{max-width:280px}
}

/* ---------- Séquence avant / pendant / après ---------- */
.chantier-suite{padding:clamp(52px,6vw,92px) 0;border-top:1px solid var(--filet)}
.chantier-suite .sous-titre{color:var(--encre-70);margin:14px 0 40px}
.grille-chantier{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(18px,3vw,34px)}
.etape-chantier img{width:100%;height:auto;display:block}
.etape-chantier figcaption{padding-top:16px}
.etape-chantier figcaption b{
  display:inline-block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;background:var(--encre);color:var(--papier);padding:4px 12px;margin-bottom:12px;
}
.etape-chantier:last-child figcaption b{background:var(--or);color:var(--encre)}
.etape-chantier figcaption span{display:block;color:var(--encre-70);font-size:.95rem;line-height:1.55}

/* ---------- Titre d'accueil long ---------- */
/* La phrase choisie par l'artisan fait une centaine de caractères. À la
   taille normale d'un h1 elle occuperait tout l'écran et repousserait les
   boutons d'appel hors de vue. On réduit le corps et on élargit la mesure. */
.ouverture h1.h1-long{
  font-size:clamp(1.85rem,3.9vw,3.15rem);
  line-height:1.1;max-width:24ch;
}
@media (max-width:520px){
  .ouverture h1.h1-long{font-size:1.62rem;line-height:1.16;max-width:100%}
}