/* =============================================================================
   ELAGAGE MORBIHAN - DESIGN SYSTEM
   Fichier CSS unique. Mobile-first. Zero framework, zero CDN.

   Sommaire
   0. Fontes auto-hebergees (@font-face)
   1. Tokens de design (variables)
   2. Reset et bases
   3. Typographie
   4. Layout (conteneurs, sections, grilles)
   5. Boutons et liens d'action
   6. En-tete + navigation (menu 3 entrees + Devis)
   7. Hero
   8. Cartes de services
   9. FAQ accordeon accessible (details/summary)
   10. Formulaire de devis
   11. Fil d'Ariane (breadcrumb)
   12. Pied de page + maillage zones
   13. Utilitaires et accessibilite
   ========================================================================== */

/* 0. FONTES AUTO-HEBERGEES ---------------------------------------------------
   Titres : Zilla Slab (slab-serif, caractere artisanal).
   Corps  : Source Sans 3 (sans humaniste, tres lisible, accents FR complets).
   Sous-ensemble latin uniquement. font-display: swap pour ne pas bloquer le LCP. */
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/zilla-slab-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/zilla-slab-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/zilla-slab-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2");
}

/* 1. TOKENS DE DESIGN --------------------------------------------------------
   Palette naturelle credible. Aucun degrade bleu/violet (marqueur IA).
   Contrastes verifies AA sur fond clair. */
:root {
  /* Couleurs de marque */
  --vert-profond: #1f4a34;   /* primaire : pin profond */
  --vert-fonce: #15311f;     /* survol / aplats sombres */
  --vert-gris: #5c7267;      /* secondaire discret */
  --orange: #b25518;         /* CTA : orange brule (blanc dessus = 4.6:1, AA) */
  --orange-fonce: #8f4212;   /* survol du CTA */

  /* Neutres chauds */
  --sable: #f5f0e6;          /* fond de page */
  --creme: #fbf9f4;          /* fond des cartes / zones claires */
  --blanc: #ffffff;
  --texte: #1a1d1a;          /* texte principal (quasi noir chaud) */
  --texte-doux: #4a5148;     /* texte secondaire (green-grey fonce) */
  --bordure: #e5e7e2;        /* traits fins sur fond clair */
  --bordure-forte: #c9cec6;

  /* Accent "feuillage" : vert-de-gris tres pale, remplace l'ancien fond creme.
     Plus proche du metier (feuillage) et moins "beige minimaliste" generique. */
  --brume: #eef2ec;          /* fond des bandes / encadres clairs */
  --brume-bord: #dde4da;     /* bordure sur fond brume */

  /* Typo */
  --f-titre: "Zilla Slab", Georgia, "Times New Roman", serif;
  --f-corps: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rythme et mesures */
  --max: 1120px;             /* largeur max de contenu */
  --max-texte: 68ch;         /* longueur de ligne lisible */
  --gouttiere: clamp(1.1rem, 4vw, 2rem);
  --rayon: 6px;
  --rayon-lg: 10px;

  /* Ombres discretes (flat design, jamais de grosse ombre) */
  --ombre: 0 1px 2px rgba(21, 49, 31, 0.06), 0 2px 8px rgba(21, 49, 31, 0.05);

  /* Echelle de z-index */
  --z-header: 30;
  --z-menu: 40;
  --z-skip: 50;
}

/* 2. RESET ET BASES ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--f-corps);
  font-size: 1.0625rem;      /* 17px, confort de lecture mobile */
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--vert-profond);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--vert-fonce);
}
ul,
ol {
  padding-left: 1.2em;
}

/* 3. TYPOGRAPHIE ------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--f-titre);
  color: var(--vert-profond);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.9rem, 5.2vw, 3rem);
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.5rem, 3.6vw, 2.15rem);
  margin-top: 1.6em;
}
h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  font-weight: 600;
  color: var(--texte);
  margin-top: 1.4em;
}
p {
  margin: 0 0 1.2em;
  max-width: var(--max-texte);
}
.plomb {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--texte-doux);
}
strong {
  font-weight: 700;
}

/* 4. LAYOUT ------------------------------------------------------------------ */
.conteneur {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.section {
  padding-block: clamp(3rem, 7.5vw, 5rem);
}
.section--creme {
  background: var(--brume);
  border-block: 1px solid var(--brume-bord);
}
.section--vert {
  background: var(--vert-profond);
  color: var(--creme);
}
.section--vert h2,
.section--vert h3 {
  color: var(--creme);
}
.grille {
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
}
@media (min-width: 640px) {
  .grille--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grille--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 5. BOUTONS ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;               /* cible tactile confortable (> 44px) */
  padding: 0.7em 1.4em;
  font-family: var(--f-corps);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease;
}
.btn--cta {
  background: var(--orange);
  color: var(--blanc);
}
.btn--cta:hover {
  background: var(--orange-fonce);
  color: var(--blanc);
}
.btn--vert {
  background: var(--vert-profond);
  color: var(--creme);
}
.btn--vert:hover {
  background: var(--vert-fonce);
  color: var(--creme);
}
.btn--fantome {
  background: transparent;
  color: var(--vert-profond);
  border-color: var(--bordure-forte);
}
.btn--fantome:hover {
  border-color: var(--vert-profond);
  background: var(--creme);
  color: var(--vert-profond); /* garantit un texte lisible au survol */
}
/* Variante fantome pour FOND SOMBRE (hero, bande CTA verte). Le survol remplit
   en creme et bascule le texte en vert fonce, jamais de creme sur creme. */
.btn--fantome-clair {
  background: transparent;
  color: var(--blanc);
  border-color: rgba(255, 255, 255, 0.85); /* bordure blanche franche : ca lit comme un bouton */
}
.btn--fantome-clair:hover {
  background: var(--creme);
  color: var(--vert-fonce); /* texte fonce sur fond creme : jamais blanc sur blanc */
  border-color: var(--creme);
}
.btn--large {
  width: 100%;
}
@media (min-width: 480px) {
  .btn--large {
    width: auto;
  }
}

/* Lien telephone mis en avant */
.tel-fort {
  font-weight: 700;
  white-space: nowrap;
}

/* Bouton "Voir le numero" : revele un message de repli (pas de vrai numero tant
   que le tracking n'est pas pris). <details> natif => fonctionne sans JS. */
.tel-reveal {
  display: inline-block;
  align-self: flex-start; /* dans un flex (hero, bande CTA) : ancre en haut */
}
.tel-reveal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7em 1.4em;
  font-family: var(--f-corps);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--vert-profond);
  background: transparent;
  border: 2px solid var(--bordure-forte);
  border-radius: var(--rayon);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.tel-reveal__btn::-webkit-details-marker { display: none; }
.tel-reveal__btn::marker { content: ""; }
.tel-reveal__btn:hover {
  border-color: var(--vert-profond);
  background: var(--brume);
}
.tel-reveal[open] .tel-reveal__btn { margin-bottom: 0.7rem; }
.tel-reveal__msg {
  margin: 0;
  max-width: 34rem;
  font-size: 0.98rem;
  line-height: 1.5;
  background: var(--brume);
  border: 1px solid var(--brume-bord);
  border-radius: var(--rayon);
  padding: 0.8rem 1rem;
}
.tel-reveal__msg a { font-weight: 700; }
/* Variante fond sombre : hero, bande verte, carte d'appel, pied de page. */
.tel-reveal--clair .tel-reveal__btn {
  color: var(--blanc);
  border-color: rgba(255, 255, 255, 0.85);
}
.tel-reveal--clair .tel-reveal__btn:hover {
  background: var(--creme);
  color: var(--vert-fonce);
  border-color: var(--creme);
}
.tel-reveal--clair .tel-reveal__msg {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--creme);
}
.tel-reveal--clair .tel-reveal__msg a { color: #fff; }
/* Dans la carte d'appel verte : bouton pleine largeur, aligne sur le CTA. */
.carte-appel .tel-reveal { display: block; margin-top: 0.2rem; }
.carte-appel .tel-reveal__btn { width: 100%; }

/* Champ pot de miel (anti-spam) : cache a l'humain, visible pour les bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Bandeau d'erreur du formulaire (revele par main.js si ?erreur=1). */
.form-alerte {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--rayon);
  background: #fbe9e0;
  border: 1px solid #e6b79e;
  color: #8f4212;
  font-weight: 600;
}

/* 6. EN-TETE + NAVIGATION ---------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
}
.logo {
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--vert-profond);
  text-decoration: none;
  line-height: 1.05;
}
.logo span {
  display: block;
  font-family: var(--f-corps);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--texte-doux);
}

/* Bouton hamburger (mobile) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 0.6em;
  background: transparent;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  font-family: var(--f-corps);
  font-weight: 600;
  color: var(--vert-profond);
  cursor: pointer;
}
.nav-toggle svg {
  width: 22px;
  height: 22px;
}

/* Navigation principale */
.nav {
  display: none;
}
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav__link {
  display: block;
  padding: 0.75em 0.6em;
  font-weight: 600;
  color: var(--texte);
  text-decoration: none;
  border-radius: var(--rayon);
}
.nav__link:hover {
  color: var(--vert-profond);
  background: var(--sable);
}

/* Sous-menu Services (disclosure accessible) */
.nav__group {
  position: relative;
}
.nav__group-btn {
  display: flex;
  align-items: center;
  gap: 0.35em;
  width: 100%;
  padding: 0.75em 0.6em;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
  border-radius: var(--rayon);
}
.nav__group-btn:hover {
  color: var(--vert-profond);
  background: var(--sable);
}
.nav__group-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}
.nav__group-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.nav__submenu {
  list-style: none;
  margin: 0.15rem 0 0.4rem;
  padding: 0 0 0 0.7rem;
  border-left: 2px solid var(--bordure);
}
.nav__submenu[hidden] {
  display: none;
}
.nav__submenu a {
  display: block;
  padding: 0.6em 0.6em;
  color: var(--texte-doux);
  text-decoration: none;
  border-radius: var(--rayon);
}
.nav__submenu a:hover {
  color: var(--vert-profond);
  background: var(--sable);
}

/* CTA dans le header */
.nav__cta {
  margin-top: 0.4rem;
}

/* Menu ouvert en mobile */
.nav.est-ouvert {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--z-menu);
  background: var(--creme);
  border-bottom: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  padding: 0.75rem var(--gouttiere) 1.1rem;
}

/* Desktop : navigation en ligne, plus de hamburger */
@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }
  .nav {
    display: block;
  }
  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
  }
  .nav__cta {
    margin-top: 0;
    margin-left: 0.4rem;
  }
  .nav__group-btn {
    width: auto;
  }
  /* Sous-menu Services en survol/clic sur desktop */
  .nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: 0.4rem;
    background: var(--creme);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
  }
}

/* 7. HERO -------------------------------------------------------------------- */
.hero {
  position: relative;
  color: var(--creme);
  background: var(--vert-fonce);
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Voile sombre pour garantir la lisibilite du texte sur la photo (AA) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(15, 30, 20, 0.86) 0%,
    rgba(15, 30, 20, 0.68) 55%,
    rgba(15, 30, 20, 0.45) 100%
  );
  z-index: 1;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 12vw, 6rem);
  max-width: 640px;
}
.hero h1 {
  color: var(--creme);
}
.hero__accroche {
  font-size: 1.2rem;
  color: #eef0e8;
  margin-bottom: 1.6rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}
.hero__rappel {
  margin-top: 1.4rem;
  font-size: 0.95rem;
  color: #d7dccf;
}

/* 8. CARTES DE SERVICES ------------------------------------------------------ */
.carte {
  display: flex;
  flex-direction: column;
  background: var(--creme);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: clamp(1.2rem, 3vw, 1.6rem);
  box-shadow: var(--ombre);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
a.carte {
  text-decoration: none;
  color: inherit;
}
a.carte:hover {
  border-color: var(--vert-gris);
  transform: translateY(-2px);
}
.carte h3 {
  margin-top: 0;
  color: var(--vert-profond);
}
.carte p {
  color: var(--texte-doux);
  margin-bottom: 1rem;
}
.carte__lien {
  margin-top: auto;
  font-weight: 700;
  color: var(--orange-fonce);
}
a.carte:hover .carte__lien {
  color: var(--orange);
}

/* 9. FAQ ACCORDEON (details/summary natif, accessible clavier) --------------- */
.faq {
  max-width: 760px;
}
.faq__item {
  border: 1px solid var(--brume-bord);
  border-radius: var(--rayon);
  background: var(--brume);
  margin-bottom: 0.7rem;
  overflow: hidden;
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1em 1.1em;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--vert-profond);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "+";
  font-family: var(--f-corps);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--vert-gris);
  line-height: 1;
}
.faq__item[open] summary::after {
  content: "\2013"; /* tiret court, pas de cadratin */
}
.faq__reponse {
  padding: 0 1.1em 1.1em;
  color: var(--texte-doux);
}
.faq__reponse p {
  margin-bottom: 0.6em;
}

/* 10. FORMULAIRE DE DEVIS ---------------------------------------------------- */
/* Section "devis" des pages commune : le formulaire (max 560px) etait enfant
   direct du conteneur pleine largeur, donc colle a gauche avec un grand vide a
   droite sur desktop. On resserre le conteneur a la largeur du formulaire et on
   le centre : le titre et le formulaire forment une colonne equilibree, comme le
   reste du site. (La page /devis a son propre gabarit 2 colonnes, non concernee :
   son formulaire y est imbrique dans une grille, pas enfant direct du conteneur.) */
.section:has(> .conteneur > .form-devis) > .conteneur {
  max-width: calc(560px + 2 * var(--gouttiere));
}
.form-devis {
  max-width: 560px;
  min-width: 0;   /* en grille (/devis), autorise le formulaire a retrecir sous mobile */
  background: var(--creme);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: clamp(1.3rem, 4vw, 2rem);
  box-shadow: var(--ombre);
  container-type: inline-size; /* les lignes a 2 champs s'adaptent a la largeur reelle */
}
/* Lignes a deux champs cote a cote. Container query : passe a 2 colonnes des que
   le formulaire est assez large (marche aussi dans la colonne etroite de /devis). */
.form-devis__duo {
  display: grid;
  gap: 0 1rem;
}
@container (min-width: 26rem) {
  .form-devis__duo { grid-template-columns: 1fr 1fr; }
  .form-devis__duo--cp { grid-template-columns: 8rem 1fr; } /* code postal etroit */
}
.champ__aide--seul {
  margin-top: -0.75rem;
  margin-bottom: 1.1rem;
}

/* Urgence : controle segmente (deux radios stylisees en boutons). */
.champ-urgence {
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem;
  min-width: 0;
}
.champ-urgence legend {
  font-weight: 600;
  margin-bottom: 0.35em;
  padding: 0;
  color: var(--texte);
}
.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.segment__opt { position: relative; }
/* Radio masque : selecteur d'attribut pour battre la regle globale ".champ input"
   (meme specificite sinon, et elle est declaree plus bas donc gagnerait). On
   neutralise aussi min-height/padding/border herites, sinon le radio devient un
   gros bloc qui deborde. */
.segment__opt input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
}
.segment__opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.5em 0.8em;
  text-align: center;
  font-weight: 600;
  color: var(--texte);
  background: var(--blanc);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.segment__opt span:hover { border-color: var(--vert-profond); }
.segment__opt input:checked + span {
  background: var(--vert-profond);
  border-color: var(--vert-profond);
  color: var(--creme);
}
.segment__opt--urgent input:checked + span {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--blanc);
}
.segment__opt input:focus-visible + span {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
.champ {
  margin-bottom: 1.1rem;
}
.champ label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35em;
  color: var(--texte);
}
.champ .oblig {
  color: var(--orange-fonce);
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.6em 0.75em;
  font: inherit;
  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 {
  outline: none;
  border-color: var(--vert-profond);
  box-shadow: 0 0 0 3px rgba(31, 74, 52, 0.18);
}
.champ__aide {
  display: block;
  margin-top: 0.3em;
  font-size: 0.9rem;
  color: var(--texte-doux);
}
.form-note {
  font-size: 0.9rem;
  color: var(--texte-doux);
}

/* 11. FIL D'ARIANE ----------------------------------------------------------- */
.fil {
  font-size: 0.92rem;
  color: var(--texte-doux);
  padding-block: 0.9rem;
}
.fil ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0;
  padding: 0;
}
.fil li::after {
  content: "\203A"; /* chevron simple */
  margin-left: 0.4em;
  color: var(--bordure-forte);
}
.fil li:last-child::after {
  content: "";
}
.fil a {
  color: var(--texte-doux);
}
.fil a:hover {
  color: var(--vert-profond);
}
.fil [aria-current="page"] {
  color: var(--texte);
  font-weight: 600;
}

/* 12. PIED DE PAGE ----------------------------------------------------------- */
.site-footer {
  background: var(--vert-fonce);
  color: #d7dccf;
  padding-block: clamp(2.2rem, 6vw, 3.2rem);
  margin-top: 3rem;
}
.site-footer a {
  color: #eef0e8;
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--blanc);
  text-decoration: underline;
}
.footer-grille {
  display: grid;
  gap: 1.8rem;
}
@media (min-width: 720px) {
  .footer-grille {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}
.footer-grille h2 {
  font-size: 1.05rem;
  color: var(--creme);
  margin: 0 0 0.7rem;
}
.footer-liens {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-liens li {
  margin-bottom: 0.5rem;
}
.footer-contact strong {
  color: var(--creme);
}
.footer-bas {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.88rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  align-items: center;
}

/* 13. UTILITAIRES ET ACCESSIBILITE ------------------------------------------ */
/* Lien d'evitement clavier */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: var(--z-skip);
  padding: 0.6em 1em;
  background: var(--vert-profond);
  color: var(--creme);
  border-radius: var(--rayon);
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0.5rem;
  color: var(--creme);
}

/* Anneau de focus visible et homogene */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reserve pour lecteurs d'ecran */
.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;
}

.centre {
  text-align: center;
}
.mesure {
  max-width: var(--max-texte);
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* 12. PAGES DE CONTENU (hubs) -----------------------------------------------
   Texte a gauche + carte d'appel laterale COLLANTE a droite.
   Cle du "reste visible pendant qu'on scrolle" : l'aside occupe toute la
   hauteur de la ligne (surtout PAS align-items:start, qui le reduirait a la
   hauteur de la carte et supprimerait la course du sticky). La carte, elle, est
   position:sticky a l'interieur : elle a donc de la place pour rester a l'ecran
   du haut jusqu'en bas du texte. */
.hub-layout {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 940px) {
  .hub-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
}
.hub-layout__corps { min-width: 0; }
.hub-layout__corps > :first-child { margin-top: 0; }
/* La colonne fait deja une mesure lisible : on annule le plafond global 68ch
   et on aere le rythme (paragraphes et titres de section bien detaches). */
.hub-layout__corps p { max-width: none; margin-bottom: 1.3em; }
.hub-layout__corps h2 { margin-top: 2em; }
.hub-layout__aside { min-width: 0; }

.carte-appel {
  background: var(--vert-profond);
  color: var(--creme);
  border-radius: var(--rayon-lg);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--ombre);
}
@media (min-width: 940px) {
  .carte-appel { position: sticky; top: calc(64px + 1.25rem); }
}
.carte-appel h2 { color: var(--creme); margin-top: 0; font-size: 1.4rem; }
.carte-appel p {
  color: rgba(255, 255, 255, 0.88);
  max-width: none;
  font-size: 1rem;
}
.carte-appel .btn { width: 100%; margin-bottom: 0.6rem; }
.carte-appel__tel {
  display: block;
  text-align: center;
  color: var(--creme);
  font-weight: 700;
  padding-top: 0.4rem;
}

/* Liste des communes couvertes (bas de hub) : grille de liens aeree, pas une
   colonne de puces collee a gauche. */
.liste-communes {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.6rem 1.5rem;
}
@media (min-width: 560px) {
  .liste-communes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .liste-communes { grid-template-columns: repeat(3, 1fr); }
}
.liste-communes li {
  margin: 0;
  border-top: 2px solid var(--brume-bord);
  padding-top: 0.5rem;
}
.liste-communes a {
  font-weight: 600;
  text-decoration: none;
}
.liste-communes a:hover { text-decoration: underline; }

/* En-tete de la section "Communes couvertes" (bas des hubs) : titre + accroche
   centres au-dessus de la grille de communes, pour la meme lecture que les
   en-tetes .tete de l'accueil (au lieu d'un titre cale a gauche avec du vide). */
.section:has(> .conteneur > .liste-communes) > .conteneur > h2,
.section:has(> .conteneur > .liste-communes) > .conteneur > .mesure {
  text-align: center;
  margin-inline: auto;
}

/* FAQ : alignee sur la colonne de lecture et collee au bloc precedent.
   Le "gros espace" venait du cumul (padding haut de la section FAQ + marge
   haute du titre h2). On supprime les deux : l'ecart devient le simple
   padding bas du bloc qui precede. */
section[aria-labelledby="faq-titre"] { padding-top: 0; }
section[aria-labelledby="faq-titre"] > .conteneur {
  max-width: calc(44rem + 2 * var(--gouttiere));
}
#faq-titre { margin-top: 0; text-align: center; }

/* En-tete de section (accueil) : titre + accroche centres, au-dessus d'une
   grille pleine largeur. Evite le titre pleine largeur avec un texte etroit
   coince a gauche (le "texte qui ne remplit pas la section"). */
.tete {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}
.tete > :first-child { margin-top: 0; }
.tete > :last-child { margin-bottom: 0; }
.tete p {
  max-width: 42rem;
  margin-inline: auto;
  color: var(--texte-doux);
}

/* Bloc de prose centre, texte aligne a gauche (lecture confortable) : la colonne
   remplit sa largeur au lieu d'etre calee a gauche avec du vide a droite. */
.bloc-texte {
  max-width: 46rem;
  margin-inline: auto;
}
.bloc-texte p { max-width: none; margin-bottom: 1.3em; }
.bloc-texte > :last-child { margin-bottom: 0; }

/* Article de contenu : colonne de lecture centree et AEREE, pour les pages a
   paragraphes (devis, mentions, plan du site...). Remplace l'ancien
   ".conteneur.mesure" cale a gauche (texte coince avec un grand vide a droite).
   Rythme vertical genereux : les paragraphes, titres et listes respirent et la
   colonne occupe visuellement la section au lieu de flotter dans un coin. */
.article {
  max-width: 46rem;
  margin-inline: auto;
}
.article > :first-child { margin-top: 0; }
.article > :last-child { margin-bottom: 0; }
.article p,
.article ul,
.article ol { max-width: none; }
.article p { margin-bottom: 1.3em; }
.article h2 { margin-top: 2.2em; }
.article h2:first-of-type { margin-top: 1.2em; }
.article h3 { margin-top: 1.7em; }
.article ul,
.article ol { margin: 0 0 1.3em; }
.article li { margin-bottom: 0.45em; }
.article li:last-child { margin-bottom: 0; }
/* Intro de page : accroche un peu plus grande, detachee du corps. */
.article__intro {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--texte-doux);
  margin-bottom: 1.8em;
}

/* Liste "plan du site" : arborescence lisible, pas une puce collee a l'autre. */
.arbo-site {
  list-style: none;
  padding-left: 0;
}
.arbo-site > li {
  margin-bottom: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--bordure);
}
.arbo-site > li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.arbo-site > li > a {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1.15rem;
}
.arbo-site ul {
  list-style: none;
  padding-left: 0;
  margin: 0.7rem 0 0;
  display: grid;
  gap: 0.4rem 1.5rem;
}
@media (min-width: 560px) {
  .arbo-site ul { grid-template-columns: repeat(2, 1fr); }
}
.arbo-site ul li { margin: 0; }

/* Encadre : sort un bloc du fil du texte (prix, point cle) */
.encadre {
  background: var(--brume);
  border: 1px solid var(--brume-bord);
  border-left: 5px solid var(--vert-profond);
  border-radius: var(--rayon);
  padding: 1.2rem 1.35rem;
  margin: 1.9rem 0;
}
.encadre > :first-child { margin-top: 0; }
.encadre > :last-child { margin-bottom: 0; }
.encadre h2, .encadre h3 { margin-top: 0; }
.encadre p { max-width: none; }
.encadre--alerte { border-left-color: var(--orange); }

/* Bande de chiffres cles (repere factuel, pas une liste editoriale) */
.chiffres {
  list-style: none;
  padding-left: 0;
  margin: 1.6rem 0 1.9rem;
  display: grid;
  gap: 0.9rem 1.4rem;
}
@media (min-width: 560px) {
  .chiffres { grid-template-columns: repeat(3, 1fr); }
  .chiffres--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 880px) {
  .chiffres--4 { grid-template-columns: repeat(4, 1fr); }
}
.chiffres li {
  border-top: 3px solid var(--vert-gris);
  padding-top: 0.55rem;
}
.chiffre__val {
  display: block;
  font-family: var(--f-titre);
  font-weight: 700;
  color: var(--vert-profond);
  font-size: 1.45rem;
  line-height: 1.1;
}
.chiffre__lab {
  color: var(--texte-doux);
  font-size: 0.95rem;
}

/* Respect de la preference de mouvement reduit */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}