/* ==========================================================================
   Couvreurs du 49 — feuille de style unique
   --------------------------------------------------------------------------
   Sommaire
   1.  Variables (couleurs, typo, espacements, points de rupture)
   2.  Réinitialisation et base
   3.  Typographie
   4.  Mise en page (conteneurs, sections, grilles)
   5.  En-tête et navigation
   6.  Barre d'appel mobile (fixe en bas)
   7.  Boutons et appels à l'action
   8.  Accroche (hero)
   9.  Cartes de prestations
   10. Réassurance et étapes
   11. Zone d'intervention
   12. Réalisations (galerie)
   13. Questions fréquentes (accordéon)
   14. Bloc d'appel à l'action final
   15. Formulaires
   16. Fil d'Ariane
   17. Pied de page
   18. Bandeau de consentement
   19. Utilitaires
   20. Impression et préférences système
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ==========================================================================
   Points de rupture utilisés dans tout le fichier (approche mobile d'abord) :
     640 px  → grande tablette portrait / petit paysage
     900 px  → tablette paysage, début du bureau
     1200 px → grand écran
   Ils ne sont pas déclarés en variables : les media queries CSS n'acceptent
   pas encore les var() de manière fiable. Ils sont écrits en dur, toujours
   sous la forme `@media (min-width: 640px)` etc.
   ========================================================================== */

:root {

  /* --- Palette : ardoise (dominante) ------------------------------------ */
  /* L'ardoise est la couleur des toitures d'Anjou. C'est la couleur de base
     du site : en-tête, pied de page, titres, aplats. */
  --ardoise-900: #151B23;   /* le plus foncé — pied de page, accroche */
  --ardoise-800: #1E2732;   /* en-tête */
  --ardoise-700: #2A3543;   /* aplats secondaires */
  --ardoise-600: #3B4859;   /* bordures sur fond foncé */
  --ardoise-400: #64738A;   /* texte secondaire sur fond clair (AA) */
  --ardoise-200: #B4BECB;   /* texte secondaire sur fond foncé */
  --ardoise-100: #DCE2E9;

  /* --- Palette : neutres ------------------------------------------------ */
  --blanc:       #FFFFFF;
  --blanc-casse: #FAF9F7;   /* fond général — légèrement chaud, moins dur que le blanc pur */
  --gris-050:    #F1F2F4;   /* fond des sections alternées */
  --gris-100:    #E4E7EB;
  --gris-200:    #D3D8DF;   /* bordures */

  /* --- Palette : accent terre cuite ------------------------------------- */
  /* Réservé EXCLUSIVEMENT aux appels à l'action. Si cette couleur apparaît
     ailleurs que sur un bouton ou un numéro de téléphone, c'est une erreur :
     le bouton d'appel doit rester l'élément le plus contrasté de la page.
     Contraste blanc sur --terre : 5.04:1 (AA texte normal). */
  --terre:        #C2451C;
  --terre-fonce:  #9C3512;  /* survol / appui */
  --terre-clair:  #FBEDE6;  /* fond de pastille, jamais de texte dessus en terre clair */

  /* --- Couleurs d'état -------------------------------------------------- */
  --succes: #1B6E43;
  --erreur: #A82118;

  /* --- Rôles sémantiques ------------------------------------------------ */
  /* On passe toujours par ces variables dans les composants, jamais par les
     couleurs brutes ci-dessus : changer de teinte se fait ici en un endroit. */
  --fond:          var(--blanc-casse);
  --fond-alt:      var(--gris-050);
  --fond-fonce:    var(--ardoise-900);
  --texte:         #171E26;             /* contraste 15:1 sur --blanc-casse */
  --texte-doux:    #4C596A;             /* contraste 7.4:1 — AA confortable */
  --texte-inverse: var(--blanc);
  --bordure:       var(--gris-200);
  --bordure-forte: #B9C0C9;
  --lien:          #1B4A78;             /* bleu ardoise, contraste 8:1 */
  --lien-survol:   #10314F;

  /* --- Typographie ------------------------------------------------------ */
  /* Deux familles, deux graisses chacune au maximum (cf. brief §9).
     Les polices auto-hébergées sont déclarées plus bas (§2) ; tant que les
     fichiers WOFF2 ne sont pas fournis, la pile système prend le relais et
     le rendu reste correct. */
  --police-titre: "Barlow Semi Condensed", "Barlow", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique — fluide entre mobile et bureau via clamp().
     Base à 17 px : plus lisible que 16 px pour un public souvent 45+. */
  --t-xs:   0.8125rem;  /* 13 px — mentions, légendes */
  --t-sm:   0.9375rem;  /* 15 px — texte secondaire */
  --t-base: 1.0625rem;  /* 17 px — texte courant */
  --t-md:   1.125rem;   /* 18 px — chapô */
  --t-lg:   clamp(1.1875rem, 1.05rem + 0.7vw, 1.375rem);
  --t-xl:   clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);   /* h3 */
  --t-2xl:  clamp(1.625rem, 1.25rem + 1.9vw, 2.25rem);   /* h2 */
  --t-3xl:  clamp(2rem, 1.4rem + 3vw, 3.125rem);         /* h1 */

  --graisse-normale: 400;
  --graisse-moyenne: 600;
  --graisse-forte:   700;

  --interligne-titre: 1.15;
  --interligne-texte: 1.65;

  /* --- Échelle d'espacement --------------------------------------------- */
  /* Base 4 px. Une seule échelle pour tout le site : marges, gouttières,
     rembourrages. Ne jamais écrire de valeur en pixels hors de cette liste. */
  --e-1: 0.25rem;   /*  4 px */
  --e-2: 0.5rem;    /*  8 px */
  --e-3: 0.75rem;   /* 12 px */
  --e-4: 1rem;      /* 16 px */
  --e-5: 1.5rem;    /* 24 px */
  --e-6: 2rem;      /* 32 px */
  --e-7: 3rem;      /* 48 px */
  --e-8: 4rem;      /* 64 px */
  --e-9: 6rem;      /* 96 px */

  /* Rythme vertical des sections — fluide */
  --section-y: clamp(2.5rem, 1.5rem + 4vw, 5rem);

  /* --- Structure --------------------------------------------------------- */
  --largeur-max:   1180px;  /* conteneur principal */
  --largeur-texte: 68ch;    /* longueur de ligne confortable en lecture */
  --rayon:    3px;          /* volontairement discret : sobre, artisanal */
  --rayon-lg: 6px;
  --bordure-fine: 1px solid var(--bordure);

  /* Ombres très légères — pas d'effet de profondeur marqué. */
  --ombre-1: 0 1px 2px rgba(21, 27, 35, 0.06);
  --ombre-2: 0 2px 8px rgba(21, 27, 35, 0.08);
  --ombre-3: 0 4px 16px rgba(21, 27, 35, 0.10);

  /* --- Divers ------------------------------------------------------------ */
  --barre-appel-h: 60px;    /* hauteur de la barre d'appel fixe mobile */
  --transition: 120ms ease-out;
}


/* ==========================================================================
   2. RÉINITIALISATION ET BASE
   ========================================================================== */

/* --- Polices auto-hébergées ------------------------------------------------
   À DÉCOMMENTER une fois les fichiers WOFF2 déposés dans /assets/fonts/.
   Voir /assets/fonts/README.md pour la procédure exacte et les fichiers
   attendus. Tant que ce bloc est commenté, aucune requête inutile n'est
   émise et la pile de polices système s'applique (rendu rapide, zéro CLS).

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
--------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Décale les ancres pour ne pas passer sous l'en-tête collant */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  line-height: var(--interligne-texte);
  -webkit-font-smoothing: antialiased;
  /* Espace réservé pour la barre d'appel fixe en bas sur mobile */
  padding-bottom: var(--barre-appel-h);
}

/* 1100 px : seuil de bascule de l'en-tête (menu déroulant → navigation
   horizontale, et barre d'appel fixe → numéro dans l'en-tête). Ce seuil est
   propre à l'en-tête : six entrées de menu plus le numéro de téléphone ne
   tiennent pas sur une ligne en dessous. La grille de contenu, elle, suit
   bien les points de rupture 640 / 900 / 1200. */
@media (min-width: 1100px) {
  body { padding-bottom: 0; }
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Les images de chantier n'étant pas encore fournies, un fond neutre évite
   l'icône « image cassée » et matérialise l'emplacement réservé. */
img { background-color: var(--gris-100); }

a {
  color: var(--lien);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--lien-survol); }

/* Anneau de focus visible et homogène — obligatoire pour la navigation
   clavier (brief §9). Ne jamais supprimer sans remplacement équivalent. */
:focus-visible {
  outline: 3px solid var(--terre);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Sur fond ardoise foncé, l'anneau terre cuite manque de contraste */
.pied :focus-visible,
.entete :focus-visible,
.accroche :focus-visible,
.cta-final :focus-visible {
  outline-color: #FFB89E;
}

/* Lien d'évitement — premier élément focusable de chaque page */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--terre);
  color: var(--blanc);
  padding: var(--e-3) var(--e-4);
  font-weight: var(--graisse-moyenne);
}
.saut-contenu:focus {
  left: 0;
  color: var(--blanc);
}

/* Le sprite SVG en ligne ne doit jamais s'afficher */
.sprite { display: none; }

/* L'attribut hidden doit l'emporter sur tout display déclaré par ailleurs.
   Sans cette règle, le filtre de la galerie de réalisations n'aurait aucun
   effet : .realisation est en display:flex, ce qui écrase le display:none
   que le navigateur applique à [hidden]. */
[hidden] { display: none !important; }


/* ==========================================================================
   3. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
  color: var(--texte);
  text-wrap: balance;      /* évite les orphelins sur les titres courts */
  letter-spacing: -0.01em;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); font-weight: var(--graisse-moyenne); }
h4 { font-size: var(--t-lg); font-weight: var(--graisse-moyenne); }

p { max-width: var(--largeur-texte); }
p + p { margin-top: var(--e-4); }

strong { font-weight: var(--graisse-moyenne); }

/* Chapô : le paragraphe de réponse directe placé en tête de page.
   C'est le passage que les moteurs de réponse extraient en priorité (§7). */
.chapo {
  font-size: var(--t-md);
  color: var(--texte-doux);
  max-width: 62ch;
}

/* Listes à puces du corps de texte */
.liste-puces {
  max-width: var(--largeur-texte);
  margin-top: var(--e-4);
}
.liste-puces li {
  position: relative;
  padding-left: var(--e-5);
  margin-bottom: var(--e-3);
}
.liste-puces li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 7px;
  background: var(--terre);
  border-radius: 50%;
}

/* Liste avec coche — réassurance, points inclus dans une prestation */
.liste-coches li {
  position: relative;
  padding-left: var(--e-6);
  margin-bottom: var(--e-3);
}
.liste-coches li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  background: var(--terre-clair);
  border-radius: 50%;
}
.liste-coches li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.62em;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--terre);
  border-bottom: 2px solid var(--terre);
  transform: rotate(-45deg);
}

/* Tableau de données — utilisé pour les informations comparables (§7 GEO) */
.tableau {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--e-5);
  font-size: var(--t-sm);
}
.tableau th,
.tableau td {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  border-bottom: var(--bordure-fine);
  vertical-align: top;
}
.tableau th {
  font-family: var(--police-titre);
  font-weight: var(--graisse-moyenne);
  background: var(--gris-050);
}
/* Un tableau à deux colonnes étalé sur toute la largeur devient illisible :
   les yeux perdent la ligne. On le ramène à la mesure du texte. */
.tableau--etroit { max-width: 52rem; }

/* Les tableaux défilent seuls sur petit écran, la page ne défile jamais
   horizontalement. */
.tableau-defilant {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   4. MISE EN PAGE
   ========================================================================== */

.contenu {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--e-4);
}
@media (min-width: 640px) { .contenu { padding-inline: var(--e-5); } }
@media (min-width: 900px) { .contenu { padding-inline: var(--e-6); } }

.section { padding-block: var(--section-y); }
.section--alt   { background: var(--fond-alt); }
.section--fonce { background: var(--fond-fonce); color: var(--ardoise-200); }
.section--fonce h2,
.section--fonce h3 { color: var(--texte-inverse); }
.section--serre { padding-block: calc(var(--section-y) * 0.6); }

/* En-tête de section : titre + intro courte */
.section-tete { margin-bottom: var(--e-6); }
.section-tete h2 + p { margin-top: var(--e-3); }

/* Surtitre discret au-dessus des h2 */
.surtitre {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-sm);
  font-weight: var(--graisse-moyenne);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: var(--e-2);
}
.section--fonce .surtitre { color: #F0A183; }

/* Grilles génériques — mobile : une colonne, puis 2, puis 3 ou 4 */
.grille { display: grid; gap: var(--e-4); }
@media (min-width: 640px) {
  .grille { gap: var(--e-5); }
  .grille--2, .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Deux colonnes texte / média */
.duo { display: grid; gap: var(--e-6); }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--e-8); }
  .duo--texte-large { grid-template-columns: 1.15fr 1fr; }
}


/* ==========================================================================
   5. EN-TÊTE ET NAVIGATION
   ========================================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ardoise-800);
  color: var(--texte-inverse);
  border-bottom: 1px solid var(--ardoise-700);
}

/* Bandeau supérieur : horaires + zone. Masqué sur mobile pour laisser
   toute la hauteur utile au numéro de téléphone. */
.entete-bandeau {
  display: none;
  background: var(--ardoise-900);
  font-size: var(--t-xs);
  color: var(--ardoise-200);
}
@media (min-width: 900px) {
  .entete-bandeau { display: block; }
  .entete-bandeau .contenu {
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    padding-block: var(--e-2);
  }
  .entete-bandeau ul { display: flex; gap: var(--e-5); }
  .entete-bandeau li { display: flex; align-items: center; gap: var(--e-2); }
  .entete-bandeau .icone { width: 15px; height: 15px; color: var(--ardoise-400); }
}

.entete-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
}

/* Logo textuel — remplaçable par un SVG fourni par le client */
.logo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  color: var(--texte-inverse);
  text-decoration: none;
  flex-shrink: 0;
}
.logo:hover { color: var(--texte-inverse); }
.logo-marque {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.logo-baseline {
  display: block;
  font-family: var(--police-texte);
  font-size: 0.6875rem;
  font-weight: var(--graisse-normale);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ardoise-200);
}
.logo .icone { width: 30px; height: 30px; color: var(--terre); flex-shrink: 0; }

/* --- Navigation principale --------------------------------------------- */

.nav-bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  background: transparent;
  border: 1px solid var(--ardoise-600);
  color: var(--texte-inverse);
  font-family: var(--police-titre);
  font-size: var(--t-sm);
  font-weight: var(--graisse-moyenne);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--rayon);
  cursor: pointer;
}
.nav-bouton .icone { width: 20px; height: 20px; }
.nav-bouton .icone-fermer { display: none; }
.nav-bouton[aria-expanded="true"] .icone-menu   { display: none; }
.nav-bouton[aria-expanded="true"] .icone-fermer { display: block; }

.nav {
  display: none;
  border-top: 1px solid var(--ardoise-700);
  padding-block: var(--e-3);
}
.nav.est-ouvert { display: block; }
.nav a {
  display: block;
  padding: var(--e-3) 0;
  color: var(--texte-inverse);
  text-decoration: none;
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: var(--graisse-moyenne);
  border-bottom: 1px solid var(--ardoise-700);
}
.nav li:last-child a { border-bottom: none; }
.nav a:hover,
.nav a[aria-current="page"] { color: #F0A183; }

@media (min-width: 1100px) {
  .nav-bouton { display: none; }
  .nav {
    display: block;
    border-top: none;
    padding-block: 0;
    margin-left: auto;
  }
  .nav ul { display: flex; align-items: center; gap: var(--e-4); }
  .nav a {
    padding: var(--e-2) 0;
    border-bottom: 2px solid transparent;
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* Les intitulés ne doivent jamais passer sur deux lignes : l'en-tête
       perdrait son alignement et le numéro de téléphone serait comprimé. */
    white-space: nowrap;
  }
  .nav a:hover,
  .nav a[aria-current="page"] {
    color: var(--texte-inverse);
    border-bottom-color: var(--terre);
  }

  /* Sur bureau, le lien « Devis gratuit » est retiré de la barre : l'en-tête
     porte déjà l'élément de conversion le plus fort (le numéro de téléphone),
     et chaque section se termine par un bouton devis. Il reste présent dans
     le menu déroulant mobile, où la place ne manque pas. */
  .nav .nav-devis { display: none; }
}

@media (min-width: 1280px) {
  .nav ul { gap: var(--e-5); }
}

/* Numéro de téléphone dans l'en-tête — masqué sur mobile (la barre fixe
   du bas assure déjà l'accès à l'appel, sans encombrer l'en-tête). */
.entete-tel { display: none; }
@media (min-width: 1100px) {
  .entete-tel {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    text-decoration: none;
    line-height: 1.2;
    flex-shrink: 0;
    margin-left: var(--e-5);
  }
  .entete-tel .mention {
    font-size: var(--t-xs);
    color: var(--ardoise-200);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .entete-tel .numero {
    font-family: var(--police-titre);
    font-size: 1.375rem;
    font-weight: var(--graisse-forte);
    color: var(--blanc);
    white-space: nowrap;
  }
  .entete-tel:hover .numero { color: #F0A183; }
}


/* ==========================================================================
   6. BARRE D'APPEL MOBILE
   --------------------------------------------------------------------------
   Barre fixe en bas de l'écran, uniquement sous 900 px. C'est l'élément de
   conversion principal du site : toujours visible, jamais masqué par un
   autre composant, et le bouton d'appel occupe la plus grande surface.
   ========================================================================== */

.barre-appel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  height: var(--barre-appel-h);
  background: var(--ardoise-900);
  border-top: 1px solid var(--ardoise-700);
  /* Respecte la zone sûre des iPhone à encoche */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.barre-appel a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  text-decoration: none;
  font-family: var(--police-titre);
  font-size: 1.0625rem;
  font-weight: var(--graisse-forte);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.barre-appel .icone { width: 21px; height: 21px; }
.barre-appel-tel {
  background: var(--terre);
  color: var(--blanc);
}
.barre-appel-tel:hover,
.barre-appel-tel:active { background: var(--terre-fonce); color: var(--blanc); }
.barre-appel-devis {
  background: transparent;
  color: var(--blanc);
  border-left: 1px solid var(--ardoise-700);
}
.barre-appel-devis:hover { color: #F0A183; }

@media (min-width: 1100px) {
  .barre-appel { display: none; }
}


/* ==========================================================================
   7. BOUTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  min-height: 50px;             /* cible tactile confortable */
  border: 2px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.btn .icone { width: 21px; height: 21px; flex-shrink: 0; }

/* Bouton principal : l'appel téléphonique. L'élément le plus contrasté
   de la page, comme exigé au brief §9. */
.btn--tel {
  background: var(--terre);
  border-color: var(--terre);
  color: var(--blanc);
}
.btn--tel:hover,
.btn--tel:focus-visible { background: var(--terre-fonce); border-color: var(--terre-fonce); color: var(--blanc); }

/* Bouton secondaire : le formulaire de devis */
.btn--devis {
  background: var(--blanc);
  border-color: var(--ardoise-700);
  color: var(--ardoise-900);
}
.btn--devis:hover { background: var(--ardoise-900); border-color: var(--ardoise-900); color: var(--blanc); }

/* Variante sur fond ardoise foncé */
.btn--fantome {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--blanc);
}
.btn--fantome:hover { background: var(--blanc); border-color: var(--blanc); color: var(--ardoise-900); }

.btn--large { width: 100%; }
@media (min-width: 640px) {
  .btn--large { width: auto; }
}

/* Groupe de boutons — empilés sur mobile, côte à côte ensuite */
.groupe-btn {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
@media (min-width: 640px) {
  .groupe-btn { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* Lien fléché — navigation interne discrète */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--police-titre);
  font-weight: var(--graisse-moyenne);
  font-size: var(--t-base);
  text-decoration: none;
  border-bottom: 2px solid var(--terre);
  padding-bottom: 1px;
}
.lien-fleche .icone { width: 16px; height: 16px; }
.lien-fleche:hover { border-bottom-color: var(--terre-fonce); }


/* ==========================================================================
   8. ACCROCHE (HERO)
   ========================================================================== */

.accroche {
  position: relative;
  background-color: var(--ardoise-900);  /* repli si la photo manque */
  color: var(--texte-inverse);
  overflow: hidden;
}

/* La photo de chantier est posée en fond, en <img> pour rester
   optimisable (lazy off, dimensions explicites, WebP + repli JPEG). */
.accroche-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--ardoise-900);
  /* Tant que la photo n'est pas fournie, le navigateur afficherait son texte
     alternatif par-dessus l'accroche. On le rend invisible : l'attribut alt
     reste présent dans le HTML pour l'accessibilité et l'indexation. */
  color: transparent;
  font-size: 0;
}
/* Voile ardoise : garantit le contraste AA du texte quelle que soit
   la photo fournie par le client. */
.accroche::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 27, 0.72);
}
.accroche > .contenu {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
}
.accroche h1 { color: var(--blanc); max-width: 20ch; }
/* Sur mobile, le chapô reste au corps de texte courant : chaque ligne gagnée
   rapproche le bouton d'appel du premier écran. Il grossit à partir de 640 px. */
.accroche .chapo {
  color: #DDE3EA;
  margin-top: var(--e-4);
  font-size: var(--t-base);
}
@media (min-width: 640px) {
  .accroche .chapo { font-size: var(--t-md); }
}
.accroche .groupe-btn { margin-top: var(--e-6); }

/* Pastilles de réassurance sous les boutons */
.reassurance-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.reassurance-ligne li {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: #DDE3EA;
}
.reassurance-ligne .icone { width: 18px; height: 18px; color: #F0A183; flex-shrink: 0; }

@media (min-width: 900px) {
  .accroche h1 { font-size: var(--t-3xl); }
  .accroche > .contenu { max-width: var(--largeur-max); }
  .accroche-texte { max-width: 40rem; }
}


/* ==========================================================================
   9. CARTES DE PRESTATIONS
   ========================================================================== */

.carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: var(--bordure-fine);
  border-radius: var(--rayon);
  padding: var(--e-5);
  height: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.carte:hover { border-color: var(--bordure-forte); box-shadow: var(--ombre-2); }

.carte-icone {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terre-clair);
  border-radius: var(--rayon);
  margin-bottom: var(--e-4);
  flex-shrink: 0;
}
.carte-icone .icone { width: 26px; height: 26px; color: var(--terre); }

.carte h3 { margin-bottom: var(--e-2); }
.carte h3 a {
  color: var(--texte);
  text-decoration: none;
}
/* Toute la carte devient cliquable via le lien du titre */
.carte h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.carte { position: relative; }
.carte h3 a:hover { color: var(--terre); }

.carte p {
  color: var(--texte-doux);
  font-size: var(--t-sm);
  flex-grow: 1;
}
.carte .lien-carte {
  margin-top: var(--e-4);
  font-family: var(--police-titre);
  font-weight: var(--graisse-moyenne);
  font-size: var(--t-sm);
  color: var(--terre);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}
.carte .lien-carte .icone { width: 15px; height: 15px; }


/* ==========================================================================
   10. RÉASSURANCE ET ÉTAPES
   ========================================================================== */

/* Bloc de réassurance en 4 colonnes */
.atout {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
}
.atout .icone {
  width: 30px;
  height: 30px;
  color: var(--terre);
  flex-shrink: 0;
  margin-top: 2px;
}
.atout h3 { font-size: var(--t-lg); margin-bottom: var(--e-1); }
.atout p { font-size: var(--t-sm); color: var(--texte-doux); }
.section--fonce .atout p { color: var(--ardoise-200); }
.section--fonce .atout .icone { color: #F0A183; }

/* Déroulé en étapes numérotées */
.etapes { counter-reset: etape; }
.etape {
  position: relative;
  padding-left: var(--e-8);
  padding-bottom: var(--e-6);
}
.etape:last-child { padding-bottom: 0; }
.etape::before {
  counter-increment: etape;
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ardoise-900);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: var(--graisse-forte);
  border-radius: 50%;
}
/* Trait de liaison entre les étapes */
.etape:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: 6px;
  width: 2px;
  background: var(--gris-200);
}
/* Le titre d'étape est un h3 ou un h4 selon la profondeur de la page */
.etape h3,
.etape h4 { margin-bottom: var(--e-2); }
.etape p { color: var(--texte-doux); }

@media (min-width: 900px) {
  /* Sur large écran, les étapes passent en colonnes */
  .etapes--colonnes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--e-5);
  }
  .etapes--colonnes .etape { padding-left: 0; padding-bottom: 0; padding-top: var(--e-7); }
  .etapes--colonnes .etape::after { display: none; }
}


/* ==========================================================================
   11. ZONE D'INTERVENTION
   ========================================================================== */

.communes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-5);
}
.communes li { display: flex; }
.communes a,
.communes span {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border: var(--bordure-fine);
  border-radius: var(--rayon);
  background: var(--blanc);
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--texte);
}
.communes a:hover {
  border-color: var(--terre);
  color: var(--terre);
}
/* Communes sans page dédiée : simple mention, non cliquable */
.communes span { color: var(--texte-doux); background: transparent; }
.communes a .icone { width: 14px; height: 14px; color: var(--terre); }

/* Encadré d'information pratique (horaires, délais, base) */
.encadre {
  background: var(--blanc);
  border: var(--bordure-fine);
  border-left: 4px solid var(--terre);
  border-radius: var(--rayon);
  padding: var(--e-5);
}
.encadre h3 { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.encadre dl { margin: 0; }
.encadre div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding-block: var(--e-2);
  border-bottom: var(--bordure-fine);
  font-size: var(--t-sm);
}
.encadre div:last-child { border-bottom: none; }
.encadre dt { font-weight: var(--graisse-moyenne); min-width: 9rem; }
.encadre dd { margin: 0; color: var(--texte-doux); }


/* ==========================================================================
   12. RÉALISATIONS (GALERIE)
   ========================================================================== */

.realisation {
  background: var(--blanc);
  border: var(--bordure-fine);
  border-radius: var(--rayon);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.realisation figure { margin: 0; }
.realisation img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Duo avant / après */
.realisation-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--gris-200);
  position: relative;
}
.realisation-duo figure { position: relative; }
.realisation-duo figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(21, 27, 35, 0.85);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: var(--t-xs);
  font-weight: var(--graisse-moyenne);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--e-1) var(--e-3);
}
.realisation-corps { padding: var(--e-4); flex-grow: 1; }
.realisation-corps h3 { font-size: var(--t-lg); margin-bottom: var(--e-1); }
.realisation-lieu {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texte-doux);
  margin-bottom: var(--e-2);
}
.realisation-lieu .icone { width: 15px; height: 15px; color: var(--terre); }
.realisation-corps p { font-size: var(--t-sm); color: var(--texte-doux); }

/* Filtres de la galerie (page réalisations) */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-6);
}
.filtre {
  padding: var(--e-2) var(--e-4);
  background: var(--blanc);
  border: var(--bordure-fine);
  border-radius: var(--rayon);
  font-family: var(--police-titre);
  font-size: var(--t-sm);
  font-weight: var(--graisse-moyenne);
  cursor: pointer;
  color: var(--texte);
}
.filtre:hover { border-color: var(--bordure-forte); }
.filtre[aria-pressed="true"] {
  background: var(--ardoise-900);
  border-color: var(--ardoise-900);
  color: var(--blanc);
}


/* ==========================================================================
   13. QUESTIONS FRÉQUENTES (ACCORDÉON)
   --------------------------------------------------------------------------
   Construit sur <details>/<summary> : fonctionne sans JavaScript, reste
   accessible au clavier nativement, et le contenu des réponses est présent
   dans le HTML — indispensable pour l'indexation et pour les moteurs de
   réponse (brief §7).
   ========================================================================== */

.faq { max-width: 46rem; }
.faq-item {
  border-bottom: var(--bordure-fine);
}
.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) 0;
  cursor: pointer;
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: var(--graisse-moyenne);
  list-style: none;
  color: var(--texte);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 0.45em;
  border-right: 2px solid var(--terre);
  border-bottom: 2px solid var(--terre);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item summary:hover { color: var(--terre); }
.faq-reponse { padding-bottom: var(--e-5); }
.faq-reponse p { color: var(--texte-doux); }


/* ==========================================================================
   14. BLOC D'APPEL À L'ACTION FINAL
   ========================================================================== */

.cta-final {
  background: var(--ardoise-900);
  color: var(--texte-inverse);
}
.cta-final .contenu {
  padding-block: var(--section-y);
  text-align: center;
}
.cta-final h2 { color: var(--blanc); }
.cta-final p {
  color: var(--ardoise-200);
  margin: var(--e-4) auto 0;
  max-width: 52ch;
}
.cta-final .groupe-btn {
  margin-top: var(--e-6);
  justify-content: center;
}
.cta-final .mention-cta {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: var(--ardoise-400);
}


/* ==========================================================================
   15. FORMULAIRES
   ========================================================================== */

.formulaire {
  background: var(--blanc);
  border: var(--bordure-fine);
  border-radius: var(--rayon);
  padding: var(--e-5);
}
@media (min-width: 640px) { .formulaire { padding: var(--e-6); } }

.champ { margin-bottom: var(--e-5); }
.champ label {
  display: block;
  font-family: var(--police-titre);
  font-weight: var(--graisse-moyenne);
  font-size: var(--t-base);
  margin-bottom: var(--e-2);
}
.champ .obligatoire { color: var(--terre); }
.champ .aide {
  display: block;
  font-size: var(--t-xs);
  color: var(--texte-doux);
  margin-top: var(--e-1);
  font-weight: var(--graisse-normale);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: var(--e-3) var(--e-4);
  min-height: 50px;
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--texte);
  background: var(--blanc);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--ardoise-700); }
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: var(--erreur); border-width: 2px; }

.champ-erreur {
  display: none;
  color: var(--erreur);
  font-size: var(--t-sm);
  font-weight: var(--graisse-moyenne);
  margin-top: var(--e-2);
}
.champ-erreur.est-visible { display: block; }

/* Case de consentement RGPD */
.champ-case {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}
.champ-case input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--terre);
}
.champ-case label {
  font-family: var(--police-texte);
  font-weight: var(--graisse-normale);
  font-size: var(--t-sm);
  color: var(--texte-doux);
  margin-bottom: 0;
}

/* Champ anti-robot — masqué visuellement et aux lecteurs d'écran */
.pot-de-miel {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* Message de retour après envoi */
.form-message {
  display: none;
  padding: var(--e-4);
  border-radius: var(--rayon);
  font-size: var(--t-sm);
  margin-bottom: var(--e-5);
}
.form-message.est-visible { display: block; }
.form-message--succes {
  background: #E8F4EE;
  border: 1px solid var(--succes);
  color: #14512F;
}
.form-message--erreur {
  background: #FCECEA;
  border: 1px solid var(--erreur);
  color: #7C170F;
}
.form-message strong { display: block; margin-bottom: var(--e-1); font-size: var(--t-base); }

/* État d'envoi du bouton */
.btn[aria-busy="true"] { opacity: 0.65; pointer-events: none; }


/* ==========================================================================
   16. FIL D'ARIANE
   ========================================================================== */

.fil-ariane {
  background: var(--fond-alt);
  border-bottom: var(--bordure-fine);
  font-size: var(--t-sm);
}
.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding-block: var(--e-3);
}
.fil-ariane li { display: flex; align-items: center; gap: var(--e-2); }
.fil-ariane li:not(:last-child)::after {
  content: "›";
  color: var(--ardoise-400);
}
.fil-ariane a { color: var(--texte-doux); }
.fil-ariane [aria-current="page"] { color: var(--texte); font-weight: var(--graisse-moyenne); }


/* ==========================================================================
   17. PIED DE PAGE
   ========================================================================== */

.pied {
  background: var(--ardoise-900);
  color: var(--ardoise-200);
  font-size: var(--t-sm);
  padding-block: var(--e-7) var(--e-5);
}
.pied a { color: var(--ardoise-200); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }

.pied-grille { display: grid; gap: var(--e-6); }
@media (min-width: 640px) { .pied-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pied-grille { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--e-6); } }

.pied h3 {
  color: var(--blanc);
  font-size: var(--t-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--e-4);
}
.pied ul li { margin-bottom: var(--e-2); }

/* Bloc NAP : nom, adresse, téléphone — strictement identique sur toutes
   les pages (brief §7). Ne jamais reformuler d'une page à l'autre. */
.pied-nap { font-style: normal; }
.pied-nap p { margin-bottom: var(--e-3); max-width: none; }
.pied-nap .nom {
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: var(--graisse-forte);
  color: var(--blanc);
  text-transform: uppercase;
}
.pied-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--police-titre);
  font-size: 1.375rem;
  font-weight: var(--graisse-forte);
  color: var(--blanc) !important;
  text-decoration: none !important;
  margin-top: var(--e-2);
}
.pied-tel .icone { width: 20px; height: 20px; color: var(--terre); }

.pied-bas {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--ardoise-700);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  font-size: var(--t-xs);
  color: var(--ardoise-400);
}
.pied-bas ul { display: flex; flex-wrap: wrap; gap: var(--e-4); }
@media (min-width: 640px) {
  .pied-bas { flex-direction: row; justify-content: space-between; align-items: center; }
}


/* ==========================================================================
   18. BANDEAU DE CONSENTEMENT
   --------------------------------------------------------------------------
   Codé à la main, sans service tiers. Aucun script de mesure n'est chargé
   tant que le visiteur n'a pas accepté explicitement (brief §8).
   ========================================================================== */

.consentement {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--barre-appel-h);
  z-index: 160;
  background: var(--blanc);
  border-top: 3px solid var(--terre);
  box-shadow: 0 -4px 20px rgba(21, 27, 35, 0.18);
  padding: var(--e-4);
  display: none;
}
.consentement.est-visible { display: block; }
/* Se cale au-dessus de la barre d'appel tant que celle-ci est affichée */
@media (min-width: 1100px) {
  .consentement { bottom: 0; padding: var(--e-5); }
}
.consentement .contenu {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding-inline: 0;
}
@media (min-width: 900px) {
  .consentement .contenu {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-6);
  }
}
.consentement p {
  font-size: var(--t-sm);
  color: var(--texte-doux);
  margin: 0;
}
.consentement-actions {
  display: flex;
  gap: var(--e-3);
  flex-shrink: 0;
}
.consentement .btn {
  font-size: var(--t-base);
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  flex: 1;
}
@media (min-width: 900px) { .consentement .btn { flex: 0 0 auto; } }
.btn--refus {
  background: transparent;
  border-color: var(--bordure-forte);
  color: var(--texte-doux);
}
.btn--refus:hover { border-color: var(--ardoise-700); color: var(--texte); }


/* ==========================================================================
   19. UTILITAIRES
   ========================================================================== */

/* Visible uniquement des lecteurs d'écran */
.lecteur-ecran-seul {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.centre        { text-align: center; }
.marge-haut-4  { margin-top: var(--e-4); }
.marge-haut-5  { margin-top: var(--e-5); }
.marge-haut-6  { margin-top: var(--e-6); }
.texte-doux    { color: var(--texte-doux); }
.mesure        { max-width: var(--largeur-texte); }
.sans-marge-max p { max-width: none; }


/* ==========================================================================
   20. IMPRESSION ET PRÉFÉRENCES SYSTÈME
   ========================================================================== */

/* Respect de la préférence « animations réduites » */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .entete, .barre-appel, .consentement, .nav-bouton, .cta-final .groupe-btn { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; }
  .accroche::after, .accroche-image { display: none; }
  .accroche { background: #fff; color: #000; }
  .accroche h1, .accroche .chapo { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}