/* ==========================================================================
   Renaux Plomberie, feuille de style unique
   --------------------------------------------------------------------------
   Organisation :
     1. Variables (couleurs, typo, espacements)   -> tout se règle ici
     2. Base et réinitialisation
     3. Structure et titres
     4. Boutons
     5. En-tête et navigation
     6. Hero
     7. Bandeau de réassurance
     8. Services
     9. Encart entreprise
    10. Zone d'intervention
    11. Réalisations
    12. Avis clients
    13. FAQ
    14. Contact et formulaire
    15. Avant-pied et pied de page
    16. Bouton d'appel flottant (mobile)
    17. Emplacements à remplir et réseaux sociaux
    18. Pages annexes (404, merci, mentions, confidentialité)
    19. Points de rupture
   ========================================================================== */

/* ==========================================================================
   0. POLICES, hébergées sur le site
   --------------------------------------------------------------------------
   Archivo et Karla étaient chargées depuis Google Fonts. Elles sont
   désormais servies par le site lui-même, pour trois raisons :

     - l'adresse IP du visiteur n'est plus transmise à Google, ce qui
       simplifie la politique de confidentialité et évite un sujet que
       plusieurs tribunaux européens ont déjà sanctionné ;
     - une requête vers un domaine tiers en moins, donc une page qui
       s'affiche plus vite, surtout en 4G sur un chantier ;
     - le site ne dépend plus de la disponibilité d'un service extérieur.

   Ce sont des polices variables : un seul fichier couvre toutes les
   graisses, d'où la plage dans font-weight. 59 Ko pour les deux.
   Sous-ensemble latin, qui contient tous les accents français ainsi que
   le œ lié et les guillemets.

   Licence SIL Open Font License 1.1 pour les deux, usage commercial inclus.

   font-display: swap affiche immédiatement le texte dans une police de
   secours, puis bascule. Le visiteur lit tout de suite.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ 1. VARIABLES ============ */
:root {
  /* Couleurs. Modifier ces six lignes suffit à changer toute l'ambiance. */
  --creme:        #faf6f0;  /* fond principal, blanc cassé chaud */
  --sable:        #f3e9dd;  /* sections alternées, beige clair et chaud */
  --sable-trait:  #e0d3c0;  /* filets et bordures */
  --encre:        #17293d;  /* bleu profond, texte et sections sombres */
  --encre-clair:  #24405c;  /* variante pour surfaces sombres */
  --bleu:         #1d6aa8;  /* bleu de la marque, liens et logo */
  --terre:        #c0552e;  /* terracotta, boutons d'action */
  --terre-fonce:  #a3441f;  /* terracotta au survol */
  --gris:         #4f5c66;  /* texte secondaire, assez soutenu pour le beige */
  --blanc-chaud:  #fffdfa;  /* fond des cartes */

  /* Typographie */
  --titre: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --texte: "Karla", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Rayons : volontairement différenciés selon la fonction de l'élément */
  --r-image: 2px;
  --r-carte: 3px;
  --r-bouton: 4px;

  /* Rythme vertical */
  --section-y: clamp(3.5rem, 9vw, 7rem);
  --gouttiere: clamp(1.25rem, 4.5vw, 3.5rem);
  --largeur: 1340px;
}

/* ============ 2. BASE ============ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compense la hauteur de l'en-tête collant lors d'un saut vers une ancre */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Laisse la place au bouton d'appel flottant sur mobile */
  padding-bottom: env(safe-area-inset-bottom);
}

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

a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terre); }

/* Anneau de focus visible partout : accessibilité clavier */
:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Lien d'évitement pour les lecteurs d'écran et la navigation clavier */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--creme);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.saut-contenu:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ 3. STRUCTURE ET TITRES ============ */
.wrap {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section-y); }
.section--sable { background: var(--sable); }
.section--encre { background: var(--encre); color: var(--creme); }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 7vw, 3.75rem); }
h2 { font-size: clamp(1.65rem, 4.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Sur-titre de section : petite capitale suivie d'un filet terracotta */
.surtitre {
  font-family: var(--titre);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terre-fonce);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.surtitre::after {
  content: "";
  flex: 0 0 42px;
  height: 2px;
  background: var(--terre-fonce);
}
.section--encre .surtitre { color: #e9a184; }
.section--encre .surtitre::after { background: #e9a184; }

.intro {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--gris);
  max-width: 62ch;
}
.section--encre .intro { color: #c3d1de; }

.entete-section { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }

/* ============ 4. BOUTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.95rem 1.5rem;
  border-radius: var(--r-bouton);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--principal { background: var(--terre); color: #fff; }
.btn--principal:hover, .btn--principal:focus-visible { background: var(--terre-fonce); color: #fff; }

.btn--contour { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn--contour:hover, .btn--contour:focus-visible { background: var(--encre); color: var(--creme); }

.section--encre .btn--contour { color: var(--creme); border-color: rgba(250, 246, 240, 0.55); }
.section--encre .btn--contour:hover { background: var(--creme); color: var(--encre); }

.btn--large { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.65; cursor: progress; }

.groupe-btn { display: flex; flex-direction: column; gap: 0.75rem; }

.btn svg { flex: 0 0 auto; }

/* ============ 5. EN-TÊTE ============ */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--creme);
  border-bottom: 1px solid var(--sable-trait);
  transition: box-shadow 0.2s ease;
}
/* Ombre uniquement quand l'en-tête flotte au-dessus du contenu défilé */
.entete.est-defile { box-shadow: 0 2px 14px rgba(23, 41, 61, 0.09); }

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2.25rem);
  min-height: 78px;
  padding-block: 0.6rem;
}

/* flex-shrink: 0 partout, sinon la navigation écrase le logo sur les écrans étroits */
.logo { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo img { flex: 0 0 auto; width: auto; height: 38px; max-width: none; }

.nav { display: none; }

.nav__liste {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.7vw, 2rem);
  margin: 0;
  padding: 0;
}
.nav__liste a {
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav__liste a:hover, .nav__liste a:focus-visible {
  color: var(--terre);
  border-bottom-color: var(--terre);
}

.entete__actions { display: flex; align-items: center; gap: 1.05rem; flex: 0 0 auto; }

.tel-entete {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}
.tel-entete:hover { color: var(--terre); }
.tel-entete svg { color: var(--bleu); }

.entete .btn { display: none; padding: 0.7rem 1.15rem; font-size: 0.95rem; }

/* Bouton hamburger : visible seulement sous 900px */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--sable-trait);
  border-radius: var(--r-bouton);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--encre);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panneau de navigation mobile */
.nav-mobile {
  display: none;
  border-top: 1px solid var(--sable-trait);
  background: var(--creme);
}
.nav-mobile.est-ouvert { display: block; }
.nav-mobile ul { list-style: none; margin: 0; padding: 0.5rem 0 1.25rem; }
.nav-mobile li + li { border-top: 1px solid var(--sable-trait); }
.nav-mobile a {
  display: block;
  padding: 0.9rem 0;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--encre);
  text-decoration: none;
}
.nav-mobile .btn { margin-top: 1rem; }

/* ============ 6. HERO ============ */
.hero { padding-block: clamp(2.25rem, 6vw, 4.5rem) 0; }

.hero__grille { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }

/* Badge de localisation. Une pastille beige pleine se lisait comme une tache ;
   un chip bordé sur le fond de page tient mieux et laisse respirer le titre. */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--titre);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre);
  background: var(--blanc-chaud);
  border: 1px solid var(--sable-trait);
  border-radius: var(--r-bouton);
  padding: 0.5rem 0.85rem;
  margin-bottom: 1.4rem;
}
.hero__eyebrow svg { flex: 0 0 auto; color: var(--terre); }

.hero h1 { margin-bottom: 0.65rem; }

.hero__sous-titre {
  font-size: clamp(1.05rem, 2.3vw, 1.3rem);
  color: var(--gris);
  max-width: 40ch;
  margin-bottom: 1.75rem;
}

.hero__note {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  color: var(--gris);
}

.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-image);
}

/* ============ 7. BANDEAU DE RÉASSURANCE ============ */
.reassurance { margin-top: clamp(2.5rem, 6vw, 4.5rem); background: var(--sable); }
.reassurance__grille {
  display: grid;
  grid-template-columns: 1fr;
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
}
.reassurance__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-block: 1rem;
}
.reassurance__item + .reassurance__item { border-top: 1px solid var(--sable-trait); }
.reassurance__item svg {
  flex: 0 0 auto;
  box-sizing: content-box;
  padding: 9px;
  background: var(--blanc-chaud);
  border: 1px solid var(--sable-trait);
  border-radius: 50%;
  color: var(--bleu);
}
.reassurance__item h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.15rem;
  letter-spacing: -0.005em;
}
.reassurance__item p { font-size: 0.9375rem; color: var(--gris); margin: 0; }

/* ============ 8. SERVICES ============ */
.services__grille { display: grid; gap: clamp(1.5rem, 3.5vw, 2.25rem); }

.service {
  background: var(--blanc-chaud);
  border: 1px solid var(--sable-trait);
  border-radius: var(--r-carte);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

.service__corps { padding: clamp(1.25rem, 3vw, 1.75rem); flex: 1; }

.service__titre-ligne { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.9rem; }
.service h3 { margin: 0; }

.service__num {
  font-family: var(--titre);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--terre);
  letter-spacing: 0.08em;
}

.service p { font-size: 0.9688rem; color: var(--gris); margin-bottom: 1rem; }

.service__liste { list-style: none; margin: 0; padding: 0; }
.service__liste li {
  font-size: 0.9375rem;
  padding: 0.5rem 0 0.5rem 1.15rem;
  position: relative;
  border-top: 1px solid var(--sable-trait);
}
/* Puce sobre : un tiret court, pas une coche verte */
.service__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 8px;
  height: 2px;
  background: var(--terre);
}

/* La carte climatisation est traitée différemment pour la distinguer */
.service--phare { background: var(--encre); border-color: var(--encre); color: var(--creme); }
.service--phare h3 { color: #fff; }
.service--phare p { color: #c3d1de; }
.service--phare .service__num { color: #e9a184; }
.service--phare .service__liste li { border-top-color: rgba(250, 246, 240, 0.18); }
.service--phare .service__liste li::before { background: #e9a184; }

/* ============ 9. ENCART ENTREPRISE ============ */
.entreprise__grille { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.entreprise__texte p { font-size: clamp(1.0625rem, 2.1vw, 1.1875rem); max-width: 58ch; }
.entreprise__signature {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(250, 246, 240, 0.22);
  font-family: var(--titre);
  font-weight: 600;
  color: #c3d1de;
  font-size: 0.9375rem;
}

.entreprise__media img {
  width: 100%;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  border-radius: var(--r-image);
}

/* ============ 10. ZONE D'INTERVENTION ============ */
.zone__grille { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }

.communes { list-style: none; margin: 0; padding: 0; column-gap: 2rem; }
.communes li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--sable-trait);
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.0625rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  break-inside: avoid;
}
.communes li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bleu);
  flex: 0 0 auto;
}
.zone__note { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--gris); }

/* ============ 11. RÉALISATIONS ============ */
/* Chaque chantier montre deux photos côte à côte plutôt qu'un montage aplati :
   chacune garde sa définition et son texte alternatif, et peut être remplacée
   seule sans refaire d'image. */
.galerie { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.galerie figure { margin: 0; }

.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.vue { position: relative; }
.vue img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-image);
  border: 1px solid var(--sable-trait);
}

/* Sans étiquette, impossible de savoir laquelle des deux est laquelle */
.vue__etiquette {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-family: var(--titre);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(23, 41, 61, 0.88);
  padding: 0.28rem 0.55rem;
  border-radius: 2px;
}
/* --terre-fonce plutôt que --terre : sur 11px gras, le terracotta clair
   donnait 4,59:1 pour un minimum exigé de 4,5. Trop juste pour une étiquette
   posée sur une photo. Le ton foncé monte à 6,17:1. */
.vue__etiquette--apres { background: var(--terre-fonce); }

.galerie figcaption { margin-top: 0.85rem; font-size: 0.9375rem; color: var(--gris); }
.galerie figcaption strong {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  color: var(--encre);
  font-size: 1.0625rem;
  margin-bottom: 0.15rem;
}

/* ============ 12. AVIS CLIENTS ============ */
.avis__grille { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }

.avis {
  background: var(--blanc-chaud);
  border: 1px solid var(--sable-trait);
  border-radius: var(--r-carte);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  display: flex;
  flex-direction: column;
}

.avis__note { display: flex; gap: 3px; margin-bottom: 0.9rem; color: var(--terre); }

.avis blockquote {
  margin: 0 0 1.1rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  flex: 1;
}

.avis figcaption {
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--encre);
  padding-top: 0.9rem;
  border-top: 1px solid var(--sable-trait);
}
.avis figcaption span { display: block; font-weight: 400; color: var(--gris); }

/* ============ 13. FAQ ============ */
.faq { max-width: 52rem; }

.faq details {
  border-top: 1px solid var(--sable-trait);
  padding-block: 0.35rem;
}
.faq details:last-of-type { border-bottom: 1px solid var(--sable-trait); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  cursor: pointer;
  list-style: none;
  padding-block: 1.05rem;
  font-family: var(--titre);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  background: var(--terre);
  /* Croix qui pivote en trait horizontal une fois ouvert */
  clip-path: polygon(43% 0, 57% 0, 57% 43%, 100% 43%, 100% 57%, 57% 57%, 57% 100%, 43% 100%, 43% 57%, 0 57%, 0 43%, 43% 43%);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }

.faq details > *:not(summary) {
  margin: 0 0 1.1rem;
  max-width: 60ch;
  color: var(--gris);
}

/* ============ 14. CONTACT ET FORMULAIRE ============ */
.contact__grille { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

.form { display: grid; gap: 1.1rem; }

.champ { display: flex; flex-direction: column; gap: 0.4rem; }

.champ label {
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
}
.champ label .requis { color: var(--terre); }

.champ input,
.champ select,
.champ textarea {
  font-family: var(--texte);
  font-size: 1rem;
  color: var(--encre);
  background: var(--blanc-chaud);
  border: 1px solid var(--sable-trait);
  border-radius: var(--r-bouton);
  padding: 0.8rem 0.9rem;
  width: 100%;
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ select { appearance: none; background-image: none; }

.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--bleu);
  outline: 2px solid var(--bleu);
  outline-offset: 0;
}

/* État d'erreur : bordure rouge brique + message sous le champ */
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: #b3271b; }

.champ__erreur {
  font-size: 0.875rem;
  color: #b3271b;
  min-height: 0;
}
.champ__erreur:empty { display: none; }

/* Champ piège anti-robot : invisible pour les humains, rempli par les bots */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__statut {
  font-size: 0.9375rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-bouton);
  border: 1px solid;
}
.form__statut:empty { display: none; }
.form__statut[data-type="erreur"] { color: #7d1a11; background: #fdece9; border-color: #f0bfb8; }
.form__statut[data-type="info"]   { color: var(--encre); background: var(--sable); border-color: var(--sable-trait); }

.form__mention { font-size: 0.8125rem; color: var(--gris); }

/* Coordonnées */
.coordonnees { display: grid; gap: 1.5rem; }

.coord-bloc h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.coord-bloc p { margin: 0; color: var(--gris); font-size: 0.9688rem; }
.coord-bloc a { font-weight: 500; }

.coord-tel {
  font-family: var(--titre);
  font-size: clamp(1.4rem, 3.5vw, 1.75rem);
  font-weight: 700;
  color: var(--encre);
  text-decoration: none;
  display: inline-block;
}
.coord-tel:hover { color: var(--terre); }

.horaires { list-style: none; margin: 0; padding: 0; font-size: 0.9688rem; }
.horaires li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--sable-trait);
  color: var(--gris);
}
.horaires li span:first-child { color: var(--encre); font-weight: 500; }

/* ============ 15a. AVANT-PIED : RAPPEL D'APPEL À L'ACTION ============ */
/* Dernière occasion de convertir avant le pied de page. Présent sur toutes les pages. */
.rappel {
  background: var(--sable);
  border-top: 1px solid var(--sable-trait);
}
.rappel__inner {
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}
.rappel h2 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  margin: 0;
  max-width: 20ch;
}
.rappel__actions { display: flex; flex-direction: column; gap: 1rem; }

.rappel__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--titre);
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
  line-height: 1.1;
}
.rappel__tel svg { color: var(--terre); flex: 0 0 auto; }
.rappel__tel:hover { color: var(--terre); }
.rappel__note { font-size: 0.9375rem; color: var(--gris); margin: 0; }

/* ============ 15b. PIED DE PAGE ============ */
.pied {
  position: relative;
  overflow: hidden;
  background: var(--encre);
  color: #b9c9d8;
  font-size: 0.9375rem;
}

/* Marque de la charte reprise en très basse opacité : ancre visuelle du bloc,
   découpée par le bord droit. Purement décoratif, retiré des lecteurs d'écran. */
.pied__filigrane {
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: clamp(240px, 34vw, 420px);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}

.pied__haut { position: relative; padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.pied__grille { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }

.pied__marque img { height: 46px; width: auto; max-width: none; margin-bottom: 1.15rem; }
.pied__baseline { max-width: 34ch; margin: 0; color: #9fb2c4; }

.pied__titre {
  font-family: var(--titre);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(233, 161, 132, 0.4);
}

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover, .pied a:focus-visible { color: #e9a184; text-decoration: underline; }

.pied__liens li a { display: inline-block; padding: 0.32rem 0; }

/* Coordonnées : icône alignée sur la première ligne de texte */
.pied__contact { margin-top: 1.75rem; display: grid; gap: 0.85rem; }
.pied__contact-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.pied__contact-item svg { flex: 0 0 auto; margin-top: 3px; color: #e9a184; }
.pied__contact-item span { display: block; }

.pied__tel {
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pied__horaires li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid rgba(250, 246, 240, 0.12);
}
.pied__horaires li:last-child { border-bottom: 0; }
.pied__horaires span:first-child { color: #fff; }

/* Bande d'identité légale, entre les colonnes et la barre de copyright */
.pied__mentions { position: relative; padding-bottom: clamp(1.5rem, 3vw, 2rem); }

.pied__bas {
  position: relative;
  border-top: 1px solid rgba(250, 246, 240, 0.16);
  padding-block: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-size: 0.875rem;
  color: #9fb2c4;
}
.pied__bas p { margin: 0; }
.pied__bas nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.pied__bas a { color: #cfdae5; }

/* ============ 15b. ZONES TACTILES ============
   Sur un téléphone, un lien de 25 pixels de haut se rate une fois sur
   trois, et le visiteur type d'un site de plombier appelle souvent dans
   l'urgence, parfois les mains mouillées. Les liens qui servent à joindre
   l'entreprise passent donc à 44 pixels de hauteur, la taille recommandée
   par Apple et par le niveau AAA des règles d'accessibilité.
   Le minimum légal, 24 pixels, était déjà respecté : ceci est du confort.

   Seule la hauteur augmente, par du remplissage interne. Aucun décalage
   visuel, puisque ces liens sont déjà dans des blocs qui ont de la marge. */

@media (max-width: 999px) {

  .coord-tel,
  .rappel__tel,
  .pied__tel,
  .coord-bloc a[href^="mailto:"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Liens de navigation et coordonnées du pied de page */
  .pied__liens li a { padding-block: 0.6rem; }

  .pied__contact-item a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .pied__bas nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* ============ 16. BOUTON D'APPEL FLOTTANT ============ */
.appel-flottant {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(0.85rem + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--terre);
  color: #fff;
  font-family: var(--titre);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  padding: 1rem 1.25rem;
  /* Seul élément entièrement arrondi : c'est un bouton d'action isolé */
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(23, 41, 61, 0.28);
}
.appel-flottant:hover, .appel-flottant:focus-visible { background: var(--terre-fonce); color: #fff; }

/* Décale le bas de page pour que le bouton ne masque rien */
body.a-appel-flottant .pied { padding-bottom: 6rem; }

/* ============ 17. EMPLACEMENTS À REMPLIR ============ */
/* Encart d'attente. Deux exigences contradictoires à tenir : assez visible pour
   qu'on ne publie pas la page par inadvertance, assez soigné pour ne pas casser
   la mise en page pendant qu'on travaille dessus.
   Une fois le contenu réel en place, retirer la classe "a-remplir" sur le bloc
   et le paragraphe <p class="a-remplir__note">. */
.a-remplir {
  background: #fdf2ec;
  border: 1px dashed rgba(192, 85, 46, 0.38);
  /* Le liseré épais est à gauche seulement : la lecture reste calme */
  border-left: 3px solid var(--terre);
  border-radius: var(--r-carte);
  padding: clamp(1.05rem, 2.5vw, 1.4rem) clamp(1.15rem, 3vw, 1.55rem);
  color: var(--encre);
}

.a-remplir .a-remplir__note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--titre);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--terre);
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  margin: 0 0 0.9rem;
}
/* Pastille de repère, dessinée en CSS plutôt qu'avec une icône */
.a-remplir .a-remplir__note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}

.a-remplir .a-remplir__texte {
  margin: 0;
  color: inherit;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Rappel d'identité légale en bas de page. Volontairement sobre :
   l'information doit être lisible et facile à trouver, sans capter
   l'attention. Le filet reprend celui de .pied__bas, ce qui donne
   deux séparations fines plutôt qu'un encart.
   #9fb2c4 sur --encre : 6,78:1, nettement au-delà du minimum AA. */
.pied__legal {
  max-width: 96ch;
  margin: 0;
  border-top: 1px solid rgba(250, 246, 240, 0.16);
  padding-top: clamp(1.35rem, 3vw, 1.8rem);
  font-size: 0.875rem;
  line-height: 1.7;
  color: #9fb2c4;
}

/* ============ 17b. RÉSEAUX SOCIAUX ============ */
.reseaux {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reseaux a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--sable-trait);
  border-radius: var(--r-bouton);
  background: var(--blanc-chaud);
  color: var(--encre);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.reseaux a:hover, .reseaux a:focus-visible {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--creme);
}

/* Colonne contact de l'accueil */
.coord-bloc .reseaux { margin-top: 0.85rem; }

/* Variante pied de page */
.pied .reseaux { margin-top: 1.6rem; }
.pied .reseaux a {
  background: transparent;
  border-color: rgba(250, 246, 240, 0.26);
  color: #fff;
}
.pied .reseaux a:hover, .pied .reseaux a:focus-visible {
  background: #e9a184;
  border-color: #e9a184;
  color: var(--encre);
}

/* ============ 18. PAGES ANNEXES ============ */

/* Bandeau de titre, commun aux quatre pages secondaires */
.page-entete {
  background: var(--sable);
  border-bottom: 1px solid var(--sable-trait);
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.25rem, 5vw, 3.5rem);
}
.page-entete h1 {
  font-size: clamp(1.85rem, 5.5vw, 3rem);
  margin-bottom: 0.75rem;
  max-width: 20ch;
}
.page-entete .intro { max-width: 56ch; }

/* Fil d'Ariane : permet de remonter à l'accueil depuis n'importe quelle page */
.fil {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 0.875rem;
  color: var(--gris);
}
.fil a { color: var(--gris); text-decoration: none; border-bottom: 1px solid var(--sable-trait); }
.fil a:hover { color: var(--terre); border-bottom-color: var(--terre); }
.fil li + li::before { content: "/"; margin-right: 0.5rem; color: #bfae95; }
.fil [aria-current="page"] { color: var(--encre); font-weight: 500; }

/* Corps des pages secondaires */
.contenu-page { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.contenu-page__grille { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

/* Sommaire latéral des pages légales */
.sommaire {
  background: var(--blanc-chaud);
  border: 1px solid var(--sable-trait);
  border-radius: var(--r-carte);
  padding: 1.35rem 1.5rem;
}
.sommaire h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: 0.9rem;
}
.sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: som; }
.sommaire li { counter-increment: som; border-top: 1px solid var(--sable-trait); }
.sommaire li:first-child { border-top: 0; }
.sommaire a {
  display: flex;
  gap: 0.7rem;
  padding: 0.55rem 0;
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
}
.sommaire a::before { content: counter(som, decimal-leading-zero); color: var(--terre); font-size: 0.8125rem; }
.sommaire a:hover { color: var(--terre); }

/* Texte long : largeur de lecture contenue, hiérarchie nette */
.prose { max-width: 62ch; }
.prose > section + section { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.prose h2 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  margin-bottom: 0.9rem;
  scroll-margin-top: 100px;
}
.prose h3 { font-size: 1.0625rem; margin: 1.75rem 0 0.5rem; }
.prose p { color: var(--gris); }
.prose a { font-weight: 500; }

/* Liste de champs administratifs : libellé à gauche, valeur à droite */
.fiche { margin: 0; }
.fiche > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--sable-trait);
}
.fiche > div:last-child { border-bottom: 1px solid var(--sable-trait); }
.fiche dt { font-family: var(--titre); font-weight: 600; font-size: 0.9375rem; color: var(--encre); }
.fiche dd { margin: 0; color: var(--gris); }

/* Valeur encore à renseigner : repérable d'un coup d'œil dans la page */
.vide {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.875em;
  color: var(--terre-fonce);
  background: rgba(192, 85, 46, 0.08);
  border-bottom: 1px dashed var(--terre-fonce);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

/* ---- Page 404 ---- */
.erreur { padding-block: clamp(3rem, 8vw, 5.5rem); }
.erreur__grille { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.erreur__code {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(6rem, 26vw, 14rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--sable-trait);
  margin: 0;
  /* Contour discret pour que le chiffre tienne sur le fond crème */
  -webkit-text-stroke: 1px #d6c5ae;
}
.erreur h1 { margin-bottom: 0.75rem; }

.raccourcis { list-style: none; margin: 2rem 0 0; padding: 0; }
.raccourcis li { border-top: 1px solid var(--sable-trait); }
.raccourcis li:last-child { border-bottom: 1px solid var(--sable-trait); }
.raccourcis a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  font-family: var(--titre);
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
}
.raccourcis a::after {
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 8px;
  background: var(--terre);
  /* Flèche dessinée en CSS, elle ne bouge pas et ne clignote pas */
  clip-path: polygon(0 38%, 66% 38%, 66% 0, 100% 50%, 66% 100%, 66% 62%, 0 62%);
}
.raccourcis a:hover { color: var(--terre); }

/* ---- Page de confirmation ---- */
.confirmation { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.confirmation__grille { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

.icone-succes {
  width: 58px; height: 58px;
  color: var(--terre);
  margin-bottom: 1.35rem;
}

/* Ce qui va se passer ensuite, en trois temps numérotés */
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; }
.etapes li {
  counter-increment: etape;
  display: flex;
  gap: 1.1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--sable-trait);
}
.etapes li:last-child { border-bottom: 1px solid var(--sable-trait); }
.etapes li::before {
  content: counter(etape);
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--encre);
  color: var(--creme);
  font-family: var(--titre);
  font-size: 0.875rem;
  font-weight: 700;
}
.etapes h3 { font-size: 1.0625rem; margin: 0 0 0.2rem; }
.etapes p { margin: 0; color: var(--gris); font-size: 0.9688rem; }

/* Encadré latéral d'appui (coordonnées, rappel d'urgence) */
.encadre {
  background: var(--encre);
  color: var(--creme);
  border-radius: var(--r-carte);
  padding: clamp(1.5rem, 4vw, 2rem);
}
.encadre h2 { font-size: 1.15rem; color: #fff; margin-bottom: 0.6rem; }
.encadre p { color: #b9c9d8; font-size: 0.9688rem; }
.encadre__tel {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--titre);
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.encadre__tel:hover { color: #e9a184; }

/* ============ 19. POINTS DE RUPTURE ============ */

/* Petits téléphones à partir de 480px : réassurance sur deux colonnes */
@media (min-width: 480px) {
  .reassurance__grille { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
  .reassurance__item:nth-child(-n+2) { border-top: 0; }
  .reassurance__item:nth-child(2) { border-top: 0; }
  .groupe-btn { flex-direction: row; flex-wrap: wrap; }
  .groupe-btn .btn { flex: 1 1 auto; min-width: 13rem; }
}

/* Tablettes */
@media (min-width: 700px) {
  .services__grille { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .avis__grille { grid-template-columns: repeat(2, 1fr); }
  .communes { column-count: 2; }

  .pied__grille { grid-template-columns: repeat(2, 1fr); }
  .pied__bas { flex-direction: row; align-items: center; justify-content: space-between; }

  .rappel__inner { grid-template-columns: 1fr auto; }
  .rappel__actions { align-items: flex-start; }

  /* Libellé et valeur côte à côte sur les pages légales */
  .fiche > div { grid-template-columns: 16rem 1fr; gap: 1.5rem; align-items: baseline; }

  .erreur__grille { grid-template-columns: auto 1fr; }
  .confirmation__grille { grid-template-columns: 1.35fr 1fr; }
}

/* Petits ordinateurs portables : passage aux grilles larges.
   L'en-tête reste en menu déroulant, il n'y a pas encore la place pour six entrées. */
@media (min-width: 900px) {
  .hero__grille { grid-template-columns: 1.05fr 1fr; }
  .hero__media img { aspect-ratio: 4 / 5; }

  .entreprise__grille { grid-template-columns: 1fr 1fr; }
  .zone__grille { grid-template-columns: 1.15fr 1fr; }

  .avis__grille { grid-template-columns: repeat(3, 1fr); }
  .contact__grille { grid-template-columns: 1.2fr 1fr; }
  .pied__grille { grid-template-columns: 1.6fr 1fr 1fr 1.15fr; }

  .form__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

  /* Sommaire collant le long du texte légal */
  .contenu-page__grille { grid-template-columns: 16rem 1fr; }
  .sommaire { position: sticky; top: 104px; }
}

/* Ordinateurs : la navigation complète remplace le menu déroulant.
   Le bouton d'appel flottant ne disparaît qu'ici, une fois le numéro visible
   dans l'en-tête : il y a toujours un moyen d'appeler à l'écran. */
@media (min-width: 1000px) {
  /* Filet de separation : la barre se lit en deux groupes, navigation puis actions */
  .entete__actions::before {
    content: "";
    flex: 0 0 auto;
    width: 1px;
    height: 26px;
    background: var(--sable-trait);
  }

  .burger { display: none; }
  .nav-mobile { display: none !important; }
  .nav { display: block; }
  .tel-entete { display: inline-flex; }

  .appel-flottant { display: none; }
  body.a-appel-flottant .pied { padding-bottom: 2rem; }

  .galerie { grid-template-columns: repeat(3, 1fr); }

  .reassurance__grille { grid-template-columns: repeat(4, 1fr); }
  .reassurance__item { padding-block: 0.5rem; }
  /* Même spécificité que la règle de base, placée après : le filet passe
     d'horizontal à vertical sans recourir à !important. */
  .reassurance__item + .reassurance__item {
    border-top: 0;
    border-left: 1px solid var(--sable-trait);
    padding-left: 1.75rem;
  }
}

/* Le bouton de devis de l'en-tête n'apparaît qu'à partir de 1240px.
   En dessous, logo + six entrées + numéro + bouton dépassent la largeur utile
   une fois la barre de défilement déduite, et la page se met à défiler
   horizontalement. Seuil vérifié à 1240, 1280 et 1440. */
@media (min-width: 1240px) {
  .entete .btn { display: inline-flex; }
}


/* ---- Grands écrans ----
   Au-delà de 1500px, le site cessait d'évoluer et laissait 370px de marge de chaque
   côté sur un 1920. Le conteneur s'élargit, la respiration verticale suit, et la
   hiérarchie typographique monte d'un cran pour rester proportionnée. */
@media (min-width: 1500px) {
  :root {
    --largeur: 1440px;
    --gouttiere: 4rem;
    --section-y: 8rem;
  }

  h1 { font-size: 4.1rem; }
  h2 { font-size: 2.9rem; }

  body { font-size: 1.09375rem; }

  .hero { padding-top: 5rem; }
  .hero__sous-titre { max-width: 44ch; }

  /* Les cartes de service respirent au lieu de s'étirer */
  .service__corps { padding: 2.1rem; }

  .reassurance__item + .reassurance__item { padding-left: 2.25rem; }

  .galerie { gap: 2.25rem; }
  .services__grille { gap: 2.5rem; }

  /* Pages légales : sommaire plus large et mesure de lecture un peu plus
     généreuse, pour ne pas laisser une colonne vide à droite. */
  .contenu-page__grille { grid-template-columns: 19rem minmax(0, 1fr); gap: 5rem; }
  .prose { max-width: 68ch; }
  .sommaire { top: 116px; }
}

/* Très grands écrans : on cesse d'élargir, on continue d'aérer */
@media (min-width: 1800px) {
  :root { --largeur: 1520px; }
}

/* ============ IMPRESSION ============ */
@media print {
  .entete, .appel-flottant, .nav-mobile, .form { display: none; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}