/* ==========================================================================
   TC Maçonnerie Terrassement Couverture
   Direction artistique « Terre cuite », retenue le 17/08/2026.

   Le principe : la matière du maçon est minérale, on l'éclaire comme au cinéma.
   Le brun de tuile vient directement de son métier, les photos sont étalonnées
   chaud et contrasté pour faire série, et le laiton sert de filet.

   Contraste : chaque couleur de texte a été vérifiée contre son fond réel.
   Les longues plages de texte (pages métier, questions, mentions légales) sont
   posées sur crème et non sur le brun profond — lire trois écrans de texte sur
   fond sombre est fatigant.
   ========================================================================== */

@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo.woff2") format("woff2");
  font-weight:600 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"InterVar";
  src:url("fonts/inter.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}

/* ==========================================================================
   1. Jetons
   ========================================================================== */
:root{
  /* les bruns */
  --terre:#2A1F18;
  --terre-2:#211812;          /* le plus profond : chiffres, pied de page */
  --terre-3:#38271C;          /* le plus clair : survols, alternance */
  --terre-4:#453224;          /* filets et bordures sur fond sombre */

  /* les clairs */
  --creme:#F4EDE3;
  --creme-2:#CDBCA9;          /* texte secondaire SUR fond sombre — 8,7 de contraste */
  --creme-3:#EAE0D2;          /* fond de section claire, variante */

  /* textes sur fond clair */
  --encre:#241A13;            /* 14,3 sur crème */
  --encre-2:#6B5A4C;          /* 5,5 sur crème */

  /* accents */
  --orange:#F0913C;           /* texte orange SUR fond sombre — 6,5 */
  --orange-txt:#9A4A08;       /* texte orange SUR fond clair — 5,2 */
  --orange-fond:#A85411;      /* fond de bouton, blanc dessus — 5,3 */
  --orange-fond-2:#8A430C;    /* survol */
  --laiton:#C9A227;           /* filets et sur-titres SUR fond sombre — 6,5 */
  --laiton-txt:#7A5F0C;       /* sur-titres SUR fond clair — 5,0 */

  --or:#B87C0B;               /* étoiles sur fond clair */
  --or-clair:#E8B23C;         /* étoiles sur fond sombre */

  --titre:"Archivo","Segoe UI",system-ui,sans-serif;
  --texte:"InterVar","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;

  --pad:clamp(1.15rem,4.5vw,3rem);
  --large:1280px;
  --etroit:760px;

  /* Interrupteur des animations. Volontairement PAS piloté par prefers-reduced-motion :
     un poste réglé « sans animations » verrait la page entièrement figée. Le bouton du
     pied de page bascule cette variable, et le choix est retenu d'une visite à l'autre. */
  --anim:running;
}
html.anim-coupee{ --anim:paused; }

*,*::before,*::after{box-sizing:border-box}
/* scroll-padding-top : l'en-tête est collant. Sans cette ligne, tous les liens d'ancre
   arrivent avec leur titre caché dessous. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}

body{
  margin:0;background:var(--terre);color:var(--creme);
  font-family:var(--texte);font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* Le grain : une tuile de bruit à peine visible, qui casse l'aplat des grandes surfaces
   sombres et donne l'impression d'une matière plutôt que d'une couleur. */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  background-image:url("grain.png");background-size:140px;opacity:.42;mix-blend-mode:overlay;
}

img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--titre);font-weight:800;line-height:1;
  letter-spacing:-.038em;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.5rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.8vw,3.5rem);text-transform:uppercase}
h3{font-size:clamp(1.25rem,2.3vw,1.6rem);letter-spacing:-.025em}
p{margin:0}

/* ==========================================================================
   2. Mise en page
   ========================================================================== */
.wrap{max-width:var(--large);margin-inline:auto;padding-inline:var(--pad);position:relative}
.etroit{max-width:var(--etroit)}
section{padding-block:clamp(3.4rem,8vw,7rem)}
.pile>*+*{margin-top:1.15rem}

/* sur-titre : un filet laiton puis les mots en capitales très espacées */
.oeil{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--titre);font-size:.75rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--laiton);margin:0 0 1.3rem;
}
.oeil::before{content:"";width:2.6rem;height:1px;background:var(--laiton);flex:0 0 auto}
/* sur fond clair, le laiton doit foncer pour rester lisible */
.fond-blanc .oeil,.fond-papier .oeil,.artisan .oeil,.texte-long .oeil{color:var(--laiton-txt)}
.fond-blanc .oeil::before,.fond-papier .oeil::before,.artisan .oeil::before,.texte-long .oeil::before{background:var(--laiton-txt)}

.chapo{font-size:clamp(1.03rem,1.7vw,1.2rem);color:var(--creme-2);max-width:46rem;line-height:1.68}
.fond-blanc .chapo,.fond-papier .chapo,.artisan .chapo{color:var(--encre-2)}

/* Sections claires : les longues plages de texte y sont posées, pas sur le brun profond. */
.fond-blanc{background:var(--creme);color:var(--encre);border-block:1px solid rgba(36,26,19,.10)}
.fond-papier{background:var(--creme-3);color:var(--encre)}
.fond-blanc h1,.fond-blanc h2,.fond-blanc h3,
.fond-papier h1,.fond-papier h2,.fond-papier h3{color:var(--encre)}

/* Filigrane d'appareillage : de fines lignes de joints, comme un mur monté.
   Le SVG porte ses dimensions, sinon iOS refuse de le dessiner en fond. */
.brique{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1.4' opacity='.09'%3E%3Cpath d='M0 30h120M0 60h120M0 0h120'/%3E%3Cpath d='M30 0v30M90 0v30M0 30v30M60 30v30M120 30v30'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   3. Boutons — une seule couleur d'action sur tout le site
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  font-family:var(--titre);font-weight:700;font-size:1rem;letter-spacing:.01em;
  padding:1.1rem 1.9rem;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:background-color .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.btn-action{background:var(--orange-fond);color:#fff;box-shadow:0 12px 28px -12px rgba(0,0,0,.6)}
.btn-action:hover{background:var(--orange-fond-2);transform:translateY(-2px)}
.btn-sobre{background:transparent;color:var(--creme);border-color:rgba(244,237,227,.42)}
.btn-sobre:hover{border-color:var(--laiton);color:var(--laiton)}
/* sur fond clair, le bouton sobre s'inverse */
.fond-blanc .btn-sobre,.fond-papier .btn-sobre,.artisan .btn-sobre{color:var(--encre);border-color:var(--encre)}
.fond-blanc .btn-sobre:hover,.fond-papier .btn-sobre:hover,.artisan .btn-sobre:hover{background:var(--encre);color:var(--creme);border-color:var(--encre)}
.btn-large{width:100%}

:where(a,button,summary,input,textarea):focus-visible{
  outline:3px solid var(--laiton);outline-offset:3px;
}

/* lien d'évitement : hors écran, il revient dès qu'on l'atteint au clavier */
.saut{
  position:absolute;left:-9999px;top:.5rem;z-index:9500;
  background:var(--orange-fond);color:#fff;text-decoration:none;font-weight:600;
  padding:.85rem 1.3rem;
}
.saut:focus{left:.5rem}
html:not(.js) .hero-points{display:none}

/* ==========================================================================
   4. En-tête
   ========================================================================== */
.entete{
  position:sticky;top:0;z-index:8000;
  background:rgba(33,24,18,.90);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--terre-4);
}
.entete-bar{display:flex;align-items:center;gap:1rem;justify-content:space-between;min-height:82px}
.marque{display:flex;align-items:center;gap:.85rem;text-decoration:none;min-width:0;flex:0 0 auto}
.marque .logo{height:44px;width:auto;flex:0 0 auto}
/* le nom en colonne : sinon il se casse en deux lignes et déborde sur le reste */
.marque .nom{display:flex;flex-direction:column;line-height:1.18;min-width:0}
.marque .n1{font-family:var(--titre);font-weight:800;font-size:1.1rem;letter-spacing:-.025em;white-space:nowrap}
.marque .n2{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--creme-2);white-space:nowrap}

.menu{display:none;gap:1rem;align-items:center;font-size:.93rem}
.menu a{
  text-decoration:none;font-weight:500;color:var(--creme);
  padding-block:.35rem;border-bottom:1px solid transparent;
}
.menu a:hover,.menu a[aria-current="page"]{border-color:var(--laiton);color:var(--laiton)}
.entete-tel{
  display:none;align-items:center;gap:.55rem;color:var(--creme);
  border:1px solid rgba(244,237,227,.4);text-decoration:none;
  font-family:var(--titre);font-weight:700;font-size:.96rem;
  padding:.72rem 1.2rem;white-space:nowrap;transition:border-color .18s ease,color .18s ease;
}
.entete-tel:hover{border-color:var(--laiton);color:var(--laiton)}
/* Seuils calés pour qu'aucune largeur ne se retrouve sans navigation ni sans téléphone. */
@media(min-width:840px){ .menu{display:flex;gap:1rem} }
@media(min-width:1100px){ .menu{gap:1.8rem} }
@media(min-width:1080px){ .entete-tel{display:inline-flex} }
@media(max-width:430px){
  .marque .logo{height:36px}
  .marque .n1{font-size:.98rem}
  .marque .n2{font-size:.6rem;letter-spacing:.14em}
}
@media(max-width:340px){ .marque .n2{display:none} }

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero{position:relative;isolation:isolate;background:var(--terre-2);overflow:hidden}
.hero-fonds{position:absolute;inset:0;z-index:-2}
.hero-fond{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease}
.hero-fond:first-child{opacity:1}      /* sans script, la première image reste visible */
.hero-fond.actif{opacity:1}
.hero-fond img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
/* Mouvement lent de la photo. Le raccourci « animation » remet play-state à running :
   la ligne animation-play-state doit donc rester APRÈS lui. */
.hero-fond.actif img{
  animation:derive 18s ease-out forwards;
  animation-play-state:var(--anim);
}
@keyframes derive{ from{transform:scale(1)} to{transform:scale(1.09)} }

/* Quatre couches : une lueur chaude en haut à droite, un voile en biais qui garde le texte
   lisible, un pied sombre qui enchaîne sur les chiffres, une amorce sous l'en-tête. */
.hero-voile{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(1000px 620px at 88% 6%, rgba(240,145,60,.26), transparent 62%),
    linear-gradient(to top, rgba(33,24,18,.98) 0%, rgba(33,24,18,.90) 30%, rgba(42,31,24,.62) 58%, rgba(42,31,24,.52) 100%),
    linear-gradient(to bottom, rgba(25,18,13,.80) 0%, rgba(25,18,13,.28) 15%, transparent 26%);
}
.hero-contenu{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(88svh,720px);padding-block:clamp(3.4rem,7vw,5.4rem) clamp(1.6rem,2.6vw,2.2rem);
}
@supports not (height:1svh){ .hero-contenu{min-height:min(88vh,720px)} }
.hero h1{
  font-size:clamp(2.5rem,7.2vw,5.8rem);max-width:15ch;
  text-transform:uppercase;letter-spacing:-.042em;
}
.hero h1 .accent{color:var(--orange);display:block}
.hero .chapo{
  color:var(--creme-2);margin-top:1.9rem;max-width:36rem;
  padding-left:1.3rem;border-left:2px solid var(--laiton);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero-rassure{
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.4rem;
  font-size:.93rem;color:var(--creme-2);
}
.hero-rassure span{display:flex;align-items:center;gap:.45rem}
.hero-rassure svg{flex:0 0 auto;color:var(--laiton)}

.hero-points{display:flex;gap:.55rem;margin-top:2rem}
.hero-points button{
  width:38px;height:3px;border:0;padding:0;cursor:pointer;
  background:rgba(244,237,227,.28);transition:background-color .3s ease;
}
.hero-points button[aria-current="true"]{background:var(--laiton)}

/* ==========================================================================
   6. Les chiffres, traités comme une affiche
   ========================================================================== */
.preuve{background:var(--terre-2);border-top:1px solid rgba(201,162,39,.30)}
.preuve .wrap{padding-inline:0;max-width:none}
.preuve-carte{
  display:grid;grid-template-columns:1fr;
  max-width:var(--large);margin-inline:auto;
}
@media(min-width:880px){ .preuve-carte{grid-template-columns:repeat(4,1fr)} }
.preuve-item{
  display:flex;flex-direction:column;
  padding:clamp(1.8rem,3.6vw,3rem) var(--pad);
  border-top:1px solid rgba(201,162,39,.16);
}
.preuve-item:first-child{border-top:0}
@media(min-width:880px){
  .preuve-item{border-top:0;border-left:1px solid rgba(201,162,39,.16);padding-inline:clamp(1.2rem,2.2vw,2rem)}
  .preuve-item:first-child{border-left:0;padding-left:var(--pad)}
  .preuve-item:last-child{padding-right:var(--pad)}
}
.preuve-item b{
  font-family:var(--titre);font-weight:800;letter-spacing:-.05em;line-height:.86;
  font-size:clamp(3rem,5.8vw,4.8rem);color:var(--creme);
}
.preuve-item b span{font-size:.32em;color:var(--laiton);letter-spacing:0;font-weight:700}
.preuve-item .etoiles{color:var(--or-clair);letter-spacing:.12em;font-size:1.05rem;margin-top:.7rem}
.preuve-item span{font-size:.93rem;color:var(--creme-2);line-height:1.5}
.preuve-item .lib{
  font-family:var(--titre);font-weight:700;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--laiton);margin-top:.9rem;
}
.preuve-lien{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;
  font-size:.88rem;font-weight:600;color:var(--orange);text-decoration:none;
}
.preuve-lien:hover{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   7. Section sombre
   ========================================================================== */
.sur-sombre{background:var(--terre);color:var(--creme)}
.sur-sombre h2{color:var(--creme)}
.contraste{display:grid;gap:2.6rem;align-items:start}
@media(min-width:900px){ .contraste{grid-template-columns:1.02fr .98fr;gap:4.5rem} }
.avant-apres{display:grid;gap:1.1rem}
.ligne-pb,.ligne-ok{display:flex;gap:.95rem;align-items:flex-start;padding:1.1rem 1.2rem}
.ligne-pb{background:rgba(244,237,227,.045);border-left:2px solid var(--terre-4)}
.ligne-ok{background:rgba(240,145,60,.13);border-left:2px solid var(--orange)}
.ligne-pb .ic,.ligne-ok .ic{flex:0 0 auto;margin-top:.2rem}
.ligne-pb .ic{color:#A98878}
.ligne-ok .ic{color:var(--orange)}
.ligne-pb p,.ligne-ok p{font-size:.99rem;line-height:1.6}
.ligne-pb p{color:var(--creme-2)}

/* ==========================================================================
   8. Les trois métiers — un seul filet laiton les sépare
   ========================================================================== */
.metiers{display:grid;gap:1px;background:rgba(201,162,39,.22);margin-top:3.2rem}
@media(min-width:820px){ .metiers{grid-template-columns:repeat(3,1fr)} }
.metier{
  display:flex;flex-direction:column;background:var(--terre);
  text-decoration:none;transition:background-color .22s ease;
}
.metier:hover{background:var(--terre-3)}
.metier-ph{aspect-ratio:4/3;overflow:hidden}
.metier-ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.metier:hover .metier-ph img{transform:scale(1.06)}
.metier-txt{padding:clamp(1.5rem,2.6vw,2.1rem);display:flex;flex-direction:column;flex:1}
.metier h3{text-transform:uppercase;font-size:1.55rem;margin-bottom:1rem;color:var(--creme)}
.metier ul{margin:0 0 1.6rem;padding:0;list-style:none;color:var(--creme-2);font-size:.96rem}
.metier li{padding-left:1.15rem;position:relative;line-height:1.55;margin-bottom:.32rem}
.metier li::before{content:"";position:absolute;left:0;top:.66em;width:6px;height:1px;background:var(--laiton)}
.metier .lire{
  margin-top:auto;font-family:var(--titre);font-weight:700;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
  display:flex;align-items:center;gap:.5rem;
}
.metier:hover .lire svg{transform:translateX(4px)}
.metier .lire svg{transition:transform .22s ease}

/* ==========================================================================
   9. Réalisations
   ========================================================================== */
.galerie{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr);margin-top:3rem}
.vue{position:relative;margin:0;overflow:hidden;background:var(--terre-3);aspect-ratio:4/3}
.vue img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.vue:hover img{transform:scale(1.055)}
.vue figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem .95rem .9rem;
  color:var(--creme);font-size:.88rem;line-height:1.35;
  background:linear-gradient(to top,rgba(25,18,13,.92),transparent);
  opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;
}
.vue:hover figcaption,.vue:focus-within figcaption{opacity:1;transform:none}
/* Sur grand écran, la hauteur vient des RANGÉES de la grille et non d'un rapport propre à
   chaque image : sinon deux images d'une même ligne n'ont pas la même hauteur. */
@media(min-width:820px){
  .galerie{grid-template-columns:repeat(6,1fr);grid-auto-rows:162px;gap:1rem}
  .vue{aspect-ratio:auto;grid-column:span 2;grid-row:span 2}
  .vue.grande{grid-column:span 4;grid-row:span 3}
  .vue.haute{grid-column:span 2;grid-row:span 3}
  .vue.moyenne{grid-column:span 3;grid-row:span 2}
}
@media(hover:none){ .vue figcaption{opacity:1;transform:none} }

/* ==========================================================================
   9 bis. Avant / après — la preuve la plus parlante chez un artisan
   ========================================================================== */
.avant-apres-bloc{display:grid;gap:1.4rem;margin-top:3rem}
@media(min-width:760px){ .avant-apres-bloc{grid-template-columns:1fr 1fr;gap:2.4rem} }
.etape-photo{margin:0;position:relative}
.etape-photo .cadre{position:relative;overflow:hidden;background:var(--terre-3);aspect-ratio:4/3}
.etape-photo img{width:100%;height:100%;object-fit:cover}
.etape-photo .marque-etat{
  position:absolute;top:0;left:0;z-index:2;
  font-family:var(--titre);font-weight:800;font-size:.78rem;letter-spacing:.24em;
  text-transform:uppercase;padding:.7rem 1.3rem;
}
.etape-photo .avant{background:var(--terre-2);color:var(--creme)}
.etape-photo .apres{background:var(--orange-fond);color:#fff}
.etape-photo figcaption{margin-top:1rem;font-size:.96rem;color:var(--creme-2);line-height:1.55}
.fond-blanc .etape-photo figcaption,.fond-papier .etape-photo figcaption{color:var(--encre-2)}

/* ==========================================================================
   10. Déroulé du chantier
   ========================================================================== */
.etapes{position:relative;margin-top:3.2rem;display:grid;gap:2.2rem}
@media(min-width:900px){
  .etapes{grid-template-columns:repeat(4,1fr);gap:2rem}
  /* chaque étape tire elle-même le trait vers la suivante : une ligne unique posée en
     pourcentages tomberait à côté des pastilles, calées à gauche */
  .etape::after{
    content:"";position:absolute;top:19px;left:56px;right:-2rem;height:1px;
    background:repeating-linear-gradient(to right,var(--laiton) 0 6px,transparent 6px 13px);
    opacity:.5;
  }
  .etape:last-child::after{display:none}
}
.etape{position:relative}
.etape .rond{
  width:40px;height:40px;background:var(--orange-fond);color:#fff;
  display:grid;place-items:center;font-family:var(--titre);font-weight:800;font-size:1.02rem;
  margin-bottom:1.2rem;position:relative;z-index:1;
}
.etape h3{font-size:1.16rem;margin-bottom:.55rem;text-transform:uppercase;letter-spacing:-.01em}
.etape p{color:var(--creme-2);font-size:.97rem;line-height:1.62}
.fond-blanc .etape p,.fond-papier .etape p{color:var(--encre-2)}

/* ==========================================================================
   11. Questions — posées sur fond clair, on y lit beaucoup
   ========================================================================== */
.questions{margin-top:2.8rem;border-top:1px solid rgba(36,26,19,.14)}
.question{border-bottom:1px solid rgba(36,26,19,.14)}
.question summary{
  cursor:pointer;list-style:none;padding:1.4rem 2.8rem 1.4rem 0;position:relative;
  font-family:var(--titre);font-weight:700;font-size:clamp(1.03rem,1.9vw,1.2rem);
  letter-spacing:-.018em;color:var(--encre);transition:color .18s ease;
}
.question summary::-webkit-details-marker{display:none}
.question summary:hover{color:var(--orange-txt)}
.question summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:13px;height:13px;
  border-right:2.5px solid var(--orange-txt);border-bottom:2.5px solid var(--orange-txt);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.question[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.question .rep{padding:0 0 1.7rem;color:var(--encre-2);max-width:60rem}
.question .rep p+p{margin-top:.85rem}

/* ==========================================================================
   12. L'artisan
   ========================================================================== */
.artisan{background:var(--creme-3);color:var(--encre)}
.artisan-grille{display:grid;gap:2.6rem;align-items:center}
@media(min-width:860px){ .artisan-grille{grid-template-columns:minmax(240px,340px) 1fr;gap:4rem} }
/* L'original ne fait que 384 px de large : sans ce plafond, la mise en une colonne
   l'étirait sur toute la largeur et le rendait flou. */
.artisan-photo{position:relative;overflow:hidden;background:var(--creme-2);max-width:384px}
.artisan-photo img{width:100%;height:auto}
.artisan-photo::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--orange-fond)}
.signature{font-family:var(--titre);font-weight:800;font-size:1.3rem;letter-spacing:-.028em;margin-top:1.7rem}
.signature small{
  display:block;font-family:var(--texte);font-weight:500;font-size:.9rem;
  color:var(--encre-2);letter-spacing:0;margin-top:.2rem;
}
.decennale{
  display:flex;align-items:center;gap:1.1rem;margin-top:1.9rem;
  padding-top:1.6rem;border-top:1px solid rgba(36,26,19,.16);
}
.decennale img{width:84px;height:auto;flex:0 0 auto;opacity:.85}
.decennale p{font-size:.94rem;color:var(--encre-2);line-height:1.55}

/* ==========================================================================
   13. Zone d'intervention
   ========================================================================== */
.communes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.1rem;padding:0;list-style:none}
.communes li{
  border:1px solid var(--terre-4);padding:.42rem 1.05rem;
  font-size:.91rem;color:var(--creme-2);
}
.communes li.plus{border-style:dashed;color:var(--laiton)}

/* ==========================================================================
   14. Contact
   ========================================================================== */
.contact{background:var(--terre-2);color:var(--creme)}
.contact-grille{display:grid;gap:2.8rem;margin-top:3rem;align-items:start}
@media(min-width:900px){ .contact-grille{grid-template-columns:1.12fr .88fr;gap:4rem} }

.form{background:var(--creme);color:var(--encre);padding:clamp(1.5rem,3.4vw,2.4rem)}
.form h3{margin-bottom:.4rem;text-transform:uppercase}
.form .aide{font-size:.93rem;color:var(--encre-2);margin-bottom:1.7rem}
.champ{margin-bottom:1.15rem}
.champ label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.42rem;letter-spacing:.06em;text-transform:uppercase}
.champ .obl{color:var(--orange-txt)}
.champ input,.champ textarea,.champ select{
  width:100%;font:inherit;font-size:1rem;padding:.82rem .95rem;
  border:1px solid rgba(36,26,19,.28);background:#FFFDFA;color:var(--encre);
  transition:border-color .18s ease;
}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--orange-fond);border-width:2px;padding:calc(.82rem - 1px) calc(.95rem - 1px)}
.champ textarea{resize:vertical;min-height:110px}
.champ.erreur input,.champ.erreur textarea{border-color:#A5341F;background:#FDF4F2}
.msg-erreur{display:none;color:#8E2C1A;font-size:.85rem;margin-top:.35rem}
.champ.erreur .msg-erreur{display:block}
.form-choix{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.form-choix label{
  display:flex;align-items:center;gap:.55rem;padding:.65rem .8rem;
  border:1px solid rgba(36,26,19,.28);cursor:pointer;font-size:.94rem;font-weight:500;
  margin:0;text-transform:none;letter-spacing:0;transition:border-color .16s ease,background-color .16s ease;
}
.form-choix label:hover{border-color:var(--orange-fond)}
.form-choix input{width:auto;accent-color:var(--orange-fond);margin:0;padding:0}
.form-choix input:checked+span{font-weight:600}
.form-choix label:has(input:checked){border-color:var(--orange-fond);background:#F6E7D6}
/* une seule colonne par défaut : au-delà de 800 px le bouton SMS est masqué, et une grille
   à deux colonnes laissait le bouton d'envoi occuper la moitié de la carte */
.form-envois{display:grid;gap:.7rem;margin-top:1.6rem}
@media(min-width:520px) and (max-width:800px){ .form-envois{grid-template-columns:1fr 1fr} }
.sms-seul{display:none}
.form-note{font-size:.85rem;color:var(--encre-2);margin-top:1rem;line-height:1.5}
.form-ok{
  display:none;background:#EAF2E6;border-left:3px solid #4A7A38;padding:1.1rem 1.25rem;
  margin-top:1.4rem;font-size:.95rem;line-height:1.6;
}
.form-ok.visible{display:block}

.coord{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
.coord li{display:flex;gap:1.05rem;align-items:flex-start}
.coord .ic{
  flex:0 0 auto;width:42px;height:42px;background:rgba(201,162,39,.16);
  color:var(--laiton);display:grid;place-items:center;
}
.coord b{
  display:block;font-family:var(--titre);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--laiton);font-weight:700;margin-bottom:.2rem;
}
.coord a,.coord .v{
  font-family:var(--titre);font-weight:700;font-size:1.14rem;color:var(--creme);
  text-decoration:none;letter-spacing:-.02em;overflow-wrap:anywhere;
}
.coord a:hover{color:var(--orange)}
.coord .v small{
  display:block;font-family:var(--texte);font-weight:400;font-size:.92rem;
  color:var(--creme-2);letter-spacing:0;margin-top:.3rem;
}

/* la preuve remise sous les yeux au moment où le visiteur décide d'appeler */
.avis-rappel{margin-top:1.8rem;padding:1.4rem 1.5rem;border:1px solid var(--terre-4)}
.avis-rappel .etoiles{color:var(--or-clair);letter-spacing:.12em;font-size:1.05rem;display:block;margin-bottom:.5rem}
.avis-rappel p{font-size:.94rem;color:var(--creme-2);line-height:1.55}
.avis-rappel strong{color:var(--creme);font-family:var(--titre);font-weight:800;font-size:1.02rem}
.avis-rappel a{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;
  color:var(--orange);font-weight:600;font-size:.9rem;text-decoration:none;
}
.avis-rappel a:hover{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   15. Pied de page
   ========================================================================== */
.pied{background:#1A120C;color:var(--creme-2);padding-block:3rem 2rem;font-size:.93rem}
.pied-haut{display:grid;gap:2.2rem;padding-bottom:2.2rem;border-bottom:1px solid var(--terre-4)}
@media(min-width:760px){ .pied-haut{grid-template-columns:1.4fr 1fr 1fr} }
.pied .logo{height:46px;width:auto;margin-bottom:1.05rem}
.pied .pied-titre{
  font-family:var(--titre);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--laiton);margin-bottom:1rem;font-weight:700;
}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pied a{color:var(--creme-2);text-decoration:none;transition:color .16s ease}
.pied a:hover{color:var(--orange)}
.pied-bas{
  display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;justify-content:space-between;
  align-items:center;padding-top:1.6rem;font-size:.86rem;
}
.bouton-anim{
  background:none;border:1px solid var(--terre-4);color:var(--creme-2);cursor:pointer;
  padding:.45rem .95rem;font-size:.82rem;transition:border-color .16s ease,color .16s ease;
}
.bouton-anim:hover{border-color:var(--laiton);color:var(--laiton)}

/* ==========================================================================
   16. Barre d'action mobile
   ========================================================================== */
.barre-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:8500;display:none;gap:1px;
  background:var(--terre-4);box-shadow:0 -6px 22px rgba(0,0,0,.4);
}
.barre-mobile a{
  flex:1;text-align:center;padding:1.05rem .5rem;text-decoration:none;
  font-family:var(--titre);font-weight:700;font-size:1rem;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
}
.barre-mobile .b1{background:var(--orange-fond);color:#fff}
.barre-mobile .b2{background:var(--terre-2);color:var(--creme)}
/* jusqu'à 1079 px, c'est cette barre qui porte le téléphone */
@media(max-width:1079px){ .barre-mobile{display:flex} body{padding-bottom:62px} }
@media(max-width:800px){ .sms-seul{display:flex} }

/* ==========================================================================
   17. Apparition au défilement
   L'opacité de départ n'est posée QUE si le script tourne (classe « js » sur <html>).
   Sans script, tout reste visible : jamais de page blanche.
   ========================================================================== */
html.js .revele{opacity:0;transform:translateY(24px)}
html.js .revele.vu{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
html.anim-coupee .revele,html.anim-coupee .revele.vu{opacity:1;transform:none;transition:none}
html.js .revele.d1{transition-delay:.09s}
html.js .revele.d2{transition-delay:.18s}
html.js .revele.d3{transition-delay:.27s}

/* ==========================================================================
   18. Sous-pages
   ========================================================================== */
/* padding-block à zéro : c'est le .wrap intérieur qui gère l'espacement, sinon le padding
   générique de « section » s'ajoute au sien. */
.entete-page{background:var(--terre-2);color:var(--creme);position:relative;overflow:hidden;padding-block:0}
.entete-page::after{
  content:"";position:absolute;inset:0;opacity:.30;z-index:0;
  background-image:var(--fond,none);background-size:cover;background-position:center 60%;
}
.entete-page::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(800px 460px at 88% 8%, rgba(240,145,60,.20), transparent 64%),
    linear-gradient(105deg, rgba(33,24,18,.94) 0%, rgba(33,24,18,.78) 46%, rgba(33,24,18,.52) 100%);
}
.entete-page .wrap{position:relative;z-index:2;padding-block:clamp(3.2rem,7vw,5.2rem)}
/* 26ch : en dessous, « le terrassement de A à Z. » se coupait et laissait un « Z. » seul */
.entete-page h1{font-size:clamp(2.1rem,5.4vw,3.8rem);max-width:26ch;text-transform:uppercase}
.entete-page .chapo{color:var(--creme-2);margin-top:1.4rem}
.fil{
  display:flex;gap:.5rem;align-items:center;font-size:.84rem;color:var(--creme-2);
  margin-bottom:1.5rem;flex-wrap:wrap;
}
.fil a{color:var(--creme-2);text-decoration:none}
.fil a:hover{color:var(--laiton)}

.texte-long{max-width:44rem}
.texte-long h2{margin-top:2.8rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.texte-long h2:first-child{margin-top:0}
.texte-long h3{margin-top:2.1rem;font-size:1.18rem;text-transform:uppercase;letter-spacing:-.01em}
.texte-long p,.texte-long li{color:var(--encre-2)}
.texte-long p+p{margin-top:1rem}
.texte-long ul{margin:1rem 0 0;padding-left:1.2rem}
.texte-long li{margin-bottom:.45rem}
.texte-long li::marker{color:var(--orange-txt)}
.texte-long a{color:var(--orange-txt);text-decoration:underline;text-underline-offset:3px}
.texte-long strong{color:var(--encre)}

.encart{background:#FFFDFA;border-left:3px solid var(--orange-fond);padding:1.5rem 1.6rem;margin-top:2.4rem}
.encart p{color:var(--encre)}

/* Fond volontairement plus foncé que l'orange du logo : sur l'orange vif, le blanc
   ne dépasse pas 3,2 de contraste. */
.rappel{background:var(--orange-fond);color:#fff}
.rappel .wrap{display:grid;gap:1.6rem;align-items:center;padding-block:clamp(2.6rem,6vw,3.8rem)}
@media(min-width:820px){ .rappel .wrap{grid-template-columns:1fr auto} }
.rappel h2{font-size:clamp(1.7rem,3.4vw,2.4rem);color:#fff}
.rappel p{color:#fff;margin-top:.6rem}
.rappel .btn-sobre{border-color:rgba(255,255,255,.65);color:#fff}
.rappel .btn-sobre:hover{background:#fff;color:var(--orange-fond-2);border-color:#fff}

/* ==========================================================================
   19. Passerelle entre les pages métier
   Sur mobile il n'y a pas de menu horizontal : ces deux liens évitent de devoir
   redescendre jusqu'au pied de page pour passer d'un métier à l'autre.
   ========================================================================== */
.autres{background:var(--terre);color:var(--creme);border-top:1px solid var(--terre-4)}
.autres h2{color:var(--creme)}
.autres-grille{display:grid;gap:1rem;margin-top:1.9rem}
@media(min-width:700px){ .autres-grille{grid-template-columns:1fr 1fr;gap:1.3rem} }
.autre{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--terre-3);border:1px solid var(--terre-4);
  padding:1.5rem 1.6rem;text-decoration:none;
  transition:border-color .2s ease,transform .2s ease;
}
.autre:hover{border-color:var(--laiton);transform:translateY(-3px)}
.autre .t{display:block;font-family:var(--titre);font-weight:800;font-size:1.2rem;letter-spacing:-.025em;text-transform:uppercase}
.autre .s{display:block;font-size:.93rem;color:var(--creme-2);margin-top:.3rem}
.autre svg{flex:0 0 auto;color:var(--orange);transition:transform .2s ease}
.autre:hover svg{transform:translateX(4px)}

/* ==========================================================================
   20. Bande photo pleine largeur — une respiration entre deux sections
   ========================================================================== */
.bande{position:relative;height:clamp(280px,40vw,520px);overflow:hidden}
.bande img{width:100%;height:100%;object-fit:cover}
.bande figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(1.4rem,4vw,2.8rem);
  background:linear-gradient(to top,rgba(25,18,13,.92),transparent);
  font-family:var(--titre);font-weight:700;color:var(--creme);
  font-size:clamp(1.05rem,2.1vw,1.6rem);letter-spacing:-.02em;text-transform:uppercase;
}

/* ==========================================================================
   21. Impression — un devis se lit souvent sur papier
   ========================================================================== */
@media print{
  .entete,.barre-mobile,.hero-points,.form,.bouton-anim{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  body::after{display:none}
  .contact,.preuve,.sur-sombre,.pied,.autres,.entete-page{background:#fff!important;color:#000!important}
  .sur-sombre h2,.coord a,.coord .v,.entete-page h1,.preuve-item b{color:#000!important}
  .chapo,.coord .v small,.preuve-item span{color:#333!important}
}