/* ==========================================================================
   SL Rénov — feuille de style unique
   --------------------------------------------------------------------------
   Direction artistique : matériaux normands.
     · ardoise d'encre  → structure, en-tête, pied de page, titres
     · pierre de Caen   → surfaces alternées, chaleur minérale
     · vert-de-gris     → accent et appels à l'action (zinc oxydé)
   Aucune police externe, aucune bibliothèque : 0 requête réseau tierce.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Encre : structure et texte */
  --encre-950: #131c22;
  --encre-900: #1a262e;
  --encre-800: #223038;
  --encre-700: #2c4049;
  --encre-500: #55666f;
  --encre-400: #6f8089;

  /* Pierre de Caen : surfaces */
  --pierre-100: #efe9df;
  --pierre-50:  #f7f4ef;
  --pierre-200: #e2dacb;

  /* Vert-de-gris : accent */
  --vert-700: #17453d;
  --vert-600: #1f5c52;
  --vert-500: #2a7367;
  --vert-100: #e4efec;

  --blanc: #ffffff;
  --alerte: #8c3419;
  --succes: #1f5c52;

  --texte: var(--encre-950);
  --texte-doux: #55666f;
  --bordure: #ded7cb;
  --bordure-claire: #eae4da;

  /* Rythme vertical et gouttières */
  --gouttiere: clamp(1.25rem, 4.5vw, 2.5rem);
  --max: 1200px;
  --max-etroit: 780px;
  --max-texte: 68ch;
  --section-y: clamp(3.5rem, 8vw, 7rem);

  --radius: 4px;
  --radius-l: 8px;

  --ombre-fine: 0 1px 2px rgba(19, 28, 34, .06);
  --ombre-carte: 0 18px 40px -24px rgba(19, 28, 34, .35);
  --ombre-flottante: 0 24px 60px -28px rgba(19, 28, 34, .45);

  /* Deux familles, nettement distinctes */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter,
    "Bitstream Charter", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --transition: .2s cubic-bezier(.2, .6, .3, 1);
  --transition-lente: .45s cubic-bezier(.2, .6, .3, 1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

/* `display: contents` retire l'élément <picture> de l'arbre de rendu : l'<img>
   redevient enfant direct de son conteneur. Sans cela, toutes les règles de
   dimensionnement écrites pour l'image (height: 100%, object-fit: cover,
   aspect-ratio) se retrouvent à résoudre leurs pourcentages contre un
   <picture> de hauteur automatique — et l'image cesse de remplir son cadre.
   C'est le piège classique dès qu'on ajoute le WebP à des images déjà mises
   en page. */
picture { display: contents; }
figure { margin: 0; }

/* --- 3. Typographie ------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--encre-950);
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.2vw, 3.6rem); line-height: 1.06; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.25; }
h4 { font-size: 1.05rem; }

/* Les titres d'interface restent en sans : ils étiquettent, ils ne racontent pas. */
.service-rang-titre, .carte-pole h3, .atout h3, .realisation-corps h3,
.sim-choix-titre, .champ label, .pied-grille h2, .avis h3, legend {
  font-family: var(--sans);
  letter-spacing: 0;
}

p { margin: 0 0 1.15em; max-width: var(--max-texte); }
p:last-child { margin-bottom: 0; }

.chapo {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.5;
  color: var(--encre-700);
}

a {
  color: var(--vert-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
a:hover { color: var(--vert-700); }

:focus-visible {
  outline: 3px solid var(--vert-500);
  outline-offset: 2px;
  border-radius: 2px;
}

strong { font-weight: 650; }
small { font-size: .875rem; }

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

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--encre-950);
  color: var(--blanc);
  padding: .85rem 1.25rem;
  text-decoration: none;
}
.saut-contenu:focus { left: .5rem; top: .5rem; }

/* --- 4. Structure -------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
/* Les sections étroites gardent le même bord gauche que les sections larges :
   un texte recentré au milieu de la page casse la colonne de lecture et donne
   une impression de gabarit flottant. On contraint la mesure, pas la boîte. */
.conteneur--etroit > * { max-width: var(--max-etroit); }

.section { padding-block: var(--section-y); }
.section--pierre { background: var(--pierre-50); }
.section--zinc { background: var(--pierre-50); }        /* alias historique */
.section--ardoise { background: var(--encre-950); color: #d5dde2; }
.section--ardoise h2, .section--ardoise h3 { color: var(--blanc); }
.section--ardoise a { color: #9fd3c6; }

.entete-section {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.entete-section h2 { margin-bottom: .45em; }
.entete-section p {
  font-size: 1.075rem;
  color: var(--texte-doux);
  margin-bottom: 0;
}
.section--ardoise .entete-section p { color: #a9b8c0; }

.pile > * + * { margin-top: 1.15rem; }
.mesure { max-width: var(--max-texte); }

.grille { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
/* Six atouts : trois colonnes donnent deux lignes pleines, là où l'auto-fit
   produit une ligne de quatre suivie d'une ligne de deux, visuellement bancale. */
@media (min-width: 900px) { .grille--3 { grid-template-columns: repeat(3, 1fr); } }

/* Découpe asymétrique : le média prend plus de place que le texte. */
.duo {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
/* Le centrage vertical n'a de sens que si les deux colonnes ont des hauteurs
   proches. Dès qu'un formulaire ou un outil fait le double du texte, il crée
   un décalage qui donne l'impression d'un bloc mal posé. */
.duo--centre { align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--media-droite { grid-template-columns: 1fr 1.15fr; }
  .duo--media-droite .duo-media { order: 2; }
}
.duo-media img, .duo-media svg { border-radius: var(--radius-l); width: 100%; }
.legende-photo {
  font-size: .875rem;
  color: var(--texte-doux);
  margin-top: .7rem;
  font-style: italic;
}

/* --- 5. Boutons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  min-height: 52px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--devis {
  background: var(--vert-600);
  border-color: var(--vert-600);
  color: var(--blanc);
}
.btn--devis:hover { background: var(--vert-700); border-color: var(--vert-700); color: var(--blanc); }

.btn--tel {
  background: var(--encre-950);
  border-color: var(--encre-950);
  color: var(--blanc);
}
.btn--tel:hover { background: var(--encre-800); border-color: var(--encre-800); color: var(--blanc); }

.btn--fantome {
  background: transparent;
  border-color: var(--encre-700);
  color: var(--encre-950);
}
.btn--fantome:hover { background: var(--encre-950); border-color: var(--encre-950); color: var(--blanc); }

.btn--compact { padding: .6rem 1.05rem; min-height: 44px; font-size: .925rem; }
.btn--large { padding: 1.1rem 2rem; min-height: 58px; font-size: 1.05rem; }

/* Sur fond sombre, on inverse les valeurs plutôt que les couleurs. */
.btn--clair.btn--tel, .section--ardoise .btn--tel, .hero .btn--tel {
  background: var(--blanc);
  border-color: var(--blanc);
  color: var(--encre-950);
}
.btn--clair.btn--tel:hover, .section--ardoise .btn--tel:hover, .hero .btn--tel:hover {
  background: var(--pierre-100); border-color: var(--pierre-100); color: var(--encre-950);
}
.btn--clair.btn--fantome, .section--ardoise .btn--fantome, .hero .btn--fantome {
  border-color: rgba(255,255,255,.5); color: var(--blanc);
}
.btn--clair.btn--fantome:hover, .section--ardoise .btn--fantome:hover, .hero .btn--fantome:hover {
  background: var(--blanc); border-color: var(--blanc); color: var(--encre-950);
}

.groupe-btn { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- 6. En-tête ---------------------------------------------------------- */
/* Le conteneur de l'en-tête est plus large que celui du contenu : sept entrées
   de menu et deux boutons ne tiennent pas dans 1200 px sans se marcher dessus,
   et rétrécir le texte pour y arriver aurait été une fausse solution. */
.conteneur--entete { max-width: 1560px; }

.barre-infos {
  background: var(--encre-950);
  color: #b9c6cd;
  font-size: .86rem;
  padding-block: .6rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.barre-infos-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.barre-infos p { margin: 0; max-width: none; }
.barre-infos-zone, .barre-infos-tel { display: flex; align-items: center; gap: .5rem; }
.barre-infos svg { flex: 0 0 auto; opacity: .8; }
.barre-infos a { color: var(--blanc); text-decoration: none; font-weight: 600; }
.barre-infos a:hover { text-decoration: underline; }
@media (max-width: 860px) { .barre-infos { display: none; } }

.site-entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure-claire);
  transition: box-shadow var(--transition);
}
.site-entete[data-defile="oui"] { box-shadow: 0 10px 30px -22px rgba(19, 28, 34, .75); }

/* Trois zones explicites : logo, navigation, actions. La colonne centrale
   absorbe l'espace restant, donc rien ne pousse son voisin. */
.entete-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(1.25rem, 2vw, 2rem);
  min-height: 84px;
  max-width: 1560px;
}
.entete-logo { display: flex; align-items: center; }

.logo { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.logo-marque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: var(--encre-950);
  color: var(--blanc);
  border-radius: 6px;
  flex: 0 0 auto;
}
.logo-nom {
  display: block;
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--encre-950);
  line-height: 1.05;
  white-space: nowrap;
}
.logo-bl {
  display: block;
  font-family: var(--sans);
  font-size: .755rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--texte-doux);
  margin-top: .2rem;
  white-space: nowrap;
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: .7rem;
  justify-self: end;
}
.btn--tel-entete { white-space: nowrap; }

/* --- Navigation principale ----------------------------------------------- */
.nav-principale { justify-self: center; }
.nav-principale > ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-principale > ul > li > a,
.nav-principale > ul > li > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .65rem .7rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--encre-700);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-principale > ul > li > a:hover,
.nav-principale > ul > li > button:hover { color: var(--vert-600); }

/* Page courante : un filet sous l'entrée, comme un onglet actif. */
.nav-principale a[aria-current="page"] { color: var(--vert-600); font-weight: 600; }
.nav-principale a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .7rem; right: .7rem; bottom: .1rem;
  height: 2px;
  background: var(--vert-600);
  border-radius: 2px;
}
.nav-principale svg { transition: transform var(--transition); }
.sous-menu-parent > button[aria-expanded="true"] svg { transform: rotate(180deg); }

.sous-menu {
  list-style: none;
  margin: 0;
  padding: .65rem;
  background: var(--blanc);
  border: 1px solid var(--bordure-claire);
  border-radius: var(--radius-l);
  box-shadow: var(--ombre-flottante);
}
.sous-menu a {
  display: block;
  padding: .52rem .7rem;
  font-size: .94rem;
  color: var(--encre-700);
  text-decoration: none;
  border-radius: var(--radius);
}
.sous-menu a:hover { background: var(--pierre-50); color: var(--vert-700); }
.sous-menu-titre {
  padding: .8rem .7rem .3rem;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--encre-400);
}
.sous-menu-titre:first-child { padding-top: .3rem; }

@media (min-width: 1240px) {
  .sous-menu-parent { position: relative; }
  .sous-menu {
    position: absolute;
    top: calc(100% + .4rem);
    left: 50%;
    transform: translate(-50%, -6px);
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .sous-menu-parent:hover .sous-menu,
  .sous-menu-parent:focus-within .sous-menu,
  .sous-menu-parent > button[aria-expanded="true"] + .sous-menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
  }
  .sous-menu--large { min-width: 520px; columns: 2; column-gap: .75rem; }
}

/* --- Bouton menu et panneau mobile --------------------------------------- */
.burger {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .6rem .95rem;
  min-height: 46px;
  background: var(--encre-950);
  color: var(--blanc);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.burger-barres { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.burger-barres span {
  display: block; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] .burger-barres span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-barres span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-barres span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* En dessous de 1180 px, la navigation complète ne tient plus sans se serrer :
   on bascule sur un panneau latéral plutôt que de compresser les entrées. */
@media (max-width: 1239px) {
  .burger { display: inline-flex; }
  .entete-inner { grid-template-columns: auto 1fr; min-height: 74px; }

  .nav-principale {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(400px, 92vw);
    background: var(--blanc);
    padding: 1.25rem var(--gouttiere) 6rem;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition-lente), visibility var(--transition-lente);
    box-shadow: var(--ombre-flottante);
    z-index: 70;
    justify-self: stretch;
  }
  .nav-principale[data-ouvert="oui"] { transform: translateX(0); visibility: visible; }
  .nav-principale > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-principale > ul > li { border-bottom: 1px solid var(--bordure-claire); }
  .nav-principale > ul > li > a,
  .nav-principale > ul > li > button {
    width: 100%;
    justify-content: space-between;
    padding: 1.05rem .25rem;
    font-size: 1.05rem;
  }
  .nav-principale a[aria-current="page"]::after { display: none; }
  .sous-menu {
    border: 0; box-shadow: none; padding: 0 0 .75rem .25rem;
    max-height: 0; overflow: hidden;
    transition: max-height var(--transition-lente);
  }
  .sous-menu-parent > button[aria-expanded="true"] + .sous-menu { max-height: 1600px; }
  .nav-fermer { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
  .nav-cta { margin-top: 1.75rem; display: grid; gap: .65rem; }
  .voile-nav {
    position: fixed; inset: 0;
    background: rgba(19, 28, 34, .55);
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    z-index: 65;
  }
  .voile-nav[data-ouvert="oui"] { opacity: 1; visibility: visible; }
}
@media (min-width: 1240px) {
  .nav-fermer, .nav-cta, .voile-nav { display: none; }
}

/* --- Seuils de l'en-tête -------------------------------------------------
   Les valeurs ci-dessous ne sont pas choisies au jugé : elles viennent de la
   largeur réellement occupée par chaque zone, mesurée dans le navigateur.
     · les 7 entrées de menu occupent 749 px
     · le logo complet 260 px, réduit au nom seul 168 px
     · « Demander un devis » 184 px, « Appeler SL Rénov » 175 px de plus
     · deux gouttières de 32 px
   D'où trois paliers, du plus complet au plus sobre. Aucun texte n'est
   rétréci pour gagner de la place : c'est le nombre d'éléments qui s'ajuste.
   ------------------------------------------------------------------------- */

/* Palier 1 — sous 1600 px, le bouton d'appel quitte la barre blanche.
   Le numéro reste visible en permanence dans la barre sombre du dessus.
   Seuil relevé après mesure : à 1520 px, le conteneur plafonné laissait
   1380 px utiles pour 1431 px de contenu, et le menu recouvrait le logo. */
@media (max-width: 1599px) { .btn--tel-entete { display: none; } }

/* Palier 2 — sous 1340 px, le logo se réduit à son nom. La signature
   « Rénovation extérieure en Normandie » reste dans le hero et le pied de page. */
@media (max-width: 1339px) { .logo-bl { display: none; } }

/* Palier 3 — sous 1240 px, la navigation complète ne tient plus : panneau
   latéral. Voir le bloc « max-width: 1239px » plus haut. */

/* Sous 700 px, l'en-tête se réduit au logo et au menu : la barre fixe du bas
   porte déjà l'appel et la demande de devis. */
@media (max-width: 700px) {
  .logo-bl { display: none; }
  .entete-actions .btn--devis { display: none; }
  .entete-inner { min-height: 64px; }
  .logo-marque { width: 40px; height: 40px; }
  .logo-nom { font-size: 1.25rem; }
}

/* --- 7. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--encre-950);
  color: var(--blanc);
  isolation: isolate;
  overflow: hidden;
}

/* Le visuel occupe la moitié droite et se fond dans l'ardoise par un dégradé
   horizontal. Deux voiles superposés : l'un assombrit l'image, l'autre crée le
   raccord — c'est ce qui évite l'effet « photo collée dans un cadre ». */
.hero-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  z-index: 0;
}
.hero-media img, .hero-media svg {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Le voile fait deux choses : raccorder l'image au fond ardoise sur son bord
     gauche, et poser le pied de l'image sur le bandeau de réassurance. Il ne
     doit pas assombrir la zone claire à droite — c'est elle qui porte
     l'impression de qualité. */
  background:
    linear-gradient(90deg, var(--encre-950) 0%, rgba(19, 28, 34, .90) 16%,
                    rgba(19, 28, 34, .28) 46%, rgba(19, 28, 34, .04) 100%),
    linear-gradient(to top, rgba(19, 28, 34, .60) 0%, rgba(19, 28, 34, 0) 28%);
}
.hero-corps { position: relative; z-index: 1; }
.hero-texte {
  max-width: 40rem;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.hero h1 { color: var(--blanc); margin-bottom: .45em; }
.hero-eyebrow {
  display: inline-block;
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #7fc4b2;
  margin-bottom: 1.4rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid rgba(127, 196, 178, .4);
}
.hero-sous-titre {
  font-size: clamp(1.05rem, 1.55vw, 1.2rem);
  line-height: 1.62;
  color: #ccd7dd;
  max-width: 34rem;
  margin-bottom: 2.4rem;
}
.hero .groupe-btn { gap: .9rem; }

.hero--compact .hero-texte { padding-block: clamp(2.5rem, 5.5vw, 4rem); }
.hero--compact h1 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
.hero--compact .hero-media { width: 46%; }

/* --- Bandeau de réassurance ---------------------------------------------- */
.hero-reassurance {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: rgba(11, 17, 22, .35);
}
.reassurance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding-block: clamp(1.5rem, 2.8vw, 2.1rem);
  list-style: none;
}
/* Alignement par le haut : dès qu'un libellé passe sur deux lignes — ce qui
   arrive avec un marqueur « à renseigner » — un alignement centré décale
   verticalement les quatre colonnes les unes par rapport aux autres. */
.reassurance li { display: flex; align-items: flex-start; gap: .95rem; }
.reassurance-icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 34px; height: 34px;
  margin-top: .15rem;
  color: #9fd3c6;
}
.reassurance-texte { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.reassurance-titre { font-size: 1.02rem; font-weight: 650; color: var(--blanc); line-height: 1.25; }
.reassurance-detail { font-size: .92rem; color: #a9b8c0; line-height: 1.4; }
/* Le marqueur d'attente ne doit pas gonfler la ligne. */
.reassurance-detail .a-remplir { font-size: .84rem; padding: .05rem .35rem; }

/* Sous 980 px, le visuel passe sous le texte : superposer une image et un
   paragraphe sur une colonne étroite dégrade les deux. */
@media (max-width: 980px) {
  /* Le discours passe avant le visuel : une image en tête repousserait le
     titre et les boutons sous la ligne de flottaison, là où ils ne servent
     plus à rien. */
  .hero { display: flex; flex-direction: column; }
  .hero-corps { order: 1; }
  .hero-media { order: 2; }
  .hero-reassurance { order: 3; }

  .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .hero-media::after {
    background: linear-gradient(to bottom, rgba(19, 28, 34, .55) 0%, rgba(19, 28, 34, .1) 45%,
                                rgba(19, 28, 34, .2) 100%);
  }
  .hero-texte { max-width: none; padding-block: clamp(2.5rem, 7vw, 3.5rem); }
  .hero-sous-titre { max-width: 46rem; }
  .hero--compact .hero-media { width: 100%; aspect-ratio: 21 / 9; }
}
@media (max-width: 560px) {
  .hero .groupe-btn { display: grid; }
  .hero .groupe-btn .btn { width: 100%; }
  .reassurance li { gap: .85rem; }
  .reassurance-icone { width: 30px; height: 30px; }
}

/* --- 8. Cartes de pôle --------------------------------------------------- */
/* Quatre pôles : une grille 2×2 plutôt qu'un auto-fit qui laisserait une
   carte orpheline sur la seconde ligne, et des visuels plus grands. */
.poles-grille {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .poles-grille { grid-template-columns: repeat(2, 1fr); }
}
.carte-pole {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure-claire);
  border-radius: var(--radius-l);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.carte-pole:hover, .carte-pole:focus-visible {
  border-color: var(--encre-700);
  box-shadow: var(--ombre-carte);
  transform: translateY(-3px);
}
.carte-pole-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--pierre-100);
  overflow: hidden;
}
.carte-pole-media img, .carte-pole-media svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-lente);
}
.carte-pole:hover .carte-pole-media img,
.carte-pole:hover .carte-pole-media svg { transform: scale(1.035); }
.carte-pole-corps { padding: 1.5rem 1.5rem 1.65rem; display: flex; flex-direction: column; flex: 1; }
.carte-pole h3 {
  font-size: 1.22rem;
  font-weight: 650;
  margin: 0 0 .5rem;
  letter-spacing: -.005em;
}
.carte-pole > .carte-pole-corps > p {
  font-size: .95rem;
  color: var(--texte-doux);
  margin: 0 0 1.1rem;
}
.carte-pole ul {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: .95rem 0 0;
  border-top: 1px solid var(--bordure-claire);
}
.carte-pole ul li {
  font-size: .9rem;
  color: var(--encre-700);
  padding: .22rem 0 .22rem 1.05rem;
  position: relative;
}
.carte-pole ul li::before {
  content: "";
  position: absolute; left: 0; top: .72rem;
  width: 6px; height: 1.5px;
  background: var(--vert-600);
}
.carte-pole-lien {
  margin-top: auto;
  font-weight: 600;
  font-size: .95rem;
  color: var(--vert-600);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.carte-pole:hover .carte-pole-lien { color: var(--vert-700); }
.carte-pole-lien svg { transition: transform var(--transition); }
.carte-pole:hover .carte-pole-lien svg { transform: translateX(3px); }

/* Icône seule (pages pilier, listes secondaires) */
.carte-pole-icone, .carte-lien-icone, .pole-icone, .service-rang-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: 0 0 46px;
  border-radius: var(--radius);
  background: var(--vert-100);
  color: var(--vert-700);
}

/* --- 9. Liste de prestations --------------------------------------------- */
.services-liste { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.service-rang {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.25rem;
  background: var(--blanc);
  border: 1px solid var(--bordure-claire);
  border-radius: var(--radius-l);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), background var(--transition);
}
.service-rang:hover, .service-rang:focus-visible {
  border-color: var(--vert-600);
  background: var(--vert-100);
}
.service-rang-titre { font-weight: 650; font-size: 1.02rem; margin-bottom: .2rem; }
.service-rang p { font-size: .92rem; color: var(--texte-doux); margin: 0; }

.pole-groupe { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.pole-groupe:last-child { margin-bottom: 0; }
.pole-entete {
  display: flex; gap: 1rem; align-items: flex-start;
  padding-bottom: 1rem; margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--bordure);
}
.pole-entete h3 { margin: 0 0 .2rem; font-size: 1.3rem; font-family: var(--serif); }
.pole-entete h3 a { color: inherit; text-decoration: none; }
.pole-entete h3 a:hover { color: var(--vert-600); }
.pole-entete p { margin: 0; font-size: .93rem; color: var(--texte-doux); }

.cartes-liens { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.carte-lien {
  display: block; padding: 1.4rem;
  background: var(--blanc);
  border: 1px solid var(--bordure-claire);
  border-radius: var(--radius-l);
  text-decoration: none; color: inherit;
  transition: border-color var(--transition), transform var(--transition);
}
.carte-lien:hover, .carte-lien:focus-visible { border-color: var(--vert-600); transform: translateY(-2px); }
.carte-lien h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 650; margin: .85rem 0 .35rem; }
.carte-lien p { margin: 0; font-size: .91rem; color: var(--texte-doux); }

.carte-liens h3 { font-size: 1rem; margin-bottom: .7rem; }

/* --- 10. Atouts ---------------------------------------------------------- */
.atout {
  padding: 1.5rem 0 0;
  border-top: 2px solid var(--vert-600);
}
.atout h3 { font-size: 1.05rem; font-weight: 650; margin: 0 0 .5rem; }
.atout p { font-size: .95rem; color: var(--texte-doux); margin: 0; }
.section--ardoise .atout { border-top-color: #9fd3c6; }
.section--ardoise .atout p { color: #a9b8c0; }

/* Chiffres-clés : structure prête, valeurs à renseigner. */
.chiffres {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--bordure);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.chiffre { background: var(--blanc); padding: 1.4rem 1.25rem; }
.chiffre-valeur {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--encre-950);
  margin-bottom: .35rem;
}
.chiffre-libelle { font-size: .88rem; color: var(--texte-doux); line-height: 1.35; display: block; }
/* Tant que la valeur n'est pas renseignée, le marqueur doit rester discret :
   composé dans le corps du chiffre, il écrasait toute la section. */
.chiffre-valeur .a-remplir {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  display: inline-block;
}

/* --- 11. Réalisations (portfolio) ---------------------------------------- */
.realisations {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.realisation {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure-claire);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.realisation:hover { box-shadow: var(--ombre-carte); transform: translateY(-3px); }
.realisation-galerie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bordure-claire);
}
.realisation-galerie figure { position: relative; }
.realisation-galerie img, .realisation-galerie svg {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.realisation-galerie figcaption {
  position: absolute; left: .55rem; top: .55rem;
  background: rgba(19,28,34,.86);
  color: var(--blanc);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .22rem .5rem;
  border-radius: 3px;
}
.realisation-galerie > :first-child { grid-column: 1 / -1; }
.realisation-galerie > :first-child img,
.realisation-galerie > :first-child svg { aspect-ratio: 16 / 9; }
.realisation-corps { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.realisation-etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.etiquette {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .28rem .6rem;
  border-radius: 3px;
  background: var(--pierre-100);
  color: var(--encre-700);
}
.etiquette--lieu { background: var(--vert-100); color: var(--vert-700); }
.realisation-corps h3 { font-family: var(--sans); font-size: 1.08rem; font-weight: 650; margin: 0 0 .5rem; }
.realisation-corps p { font-size: .93rem; color: var(--texte-doux); margin: 0 0 1.1rem; }
.realisation-meta { margin-top: auto; font-size: .85rem; color: var(--encre-400); }

/* --- 12. Comparateur avant / après --------------------------------------- */
.avant-apres {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--pierre-100);
  border: 1px solid var(--bordure);
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}
.aa-cadre { position: relative; display: block; }
/* Aucun ratio n'est imposé : c'est la photo « avant » qui fixe la hauteur du
   cadre, et la photo « après » — de dimensions identiques — vient s'y caler
   exactement. Forcer un 16/9 recadrerait les deux et ferait perdre le haut des
   toitures, qui est précisément le sujet du second comparateur. */
.aa-cadre img, .aa-cadre svg { width: 100%; height: auto; display: block; }
.aa-apres {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 var(--aa-position, 50%));
}
.aa-apres img, .aa-apres svg { width: 100%; height: 100%; object-fit: cover; }
/* Les deux images partageant les mêmes proportions, `cover` équivaut ici à un
   ajustement exact : il n'y a ni recadrage ni déformation. */
.aa-poignee {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--aa-position, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: var(--blanc);
  box-shadow: 0 0 0 1px rgba(19,28,34,.25);
  z-index: 3;
}
.aa-bouton {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blanc);
  color: var(--encre-950);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 18px -4px rgba(19,28,34,.55);
  cursor: ew-resize;
  padding: 0;
}
.aa-legende {
  position: absolute;
  bottom: .85rem;
  z-index: 2;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .04em;
  padding: .3rem .65rem;
  border-radius: 3px;
  background: rgba(19,28,34,.85);
  color: var(--blanc);
  pointer-events: none;
}
.aa-legende--avant { left: .85rem; }
.aa-legende--apres { right: .85rem; }
.aa-curseur {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  margin: 0;
  cursor: ew-resize;
  z-index: 4;
}
.aa-curseur:focus-visible + .aa-poignee { box-shadow: 0 0 0 3px var(--vert-500); }
.aa-aide { font-size: .88rem; color: var(--texte-doux); margin-top: .85rem; }

/* --- 13. Carte de Normandie ---------------------------------------------- */
.carte-normandie { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 900px) { .carte-normandie { grid-template-columns: 1.35fr 1fr; } }
.carte-svg-enveloppe {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-l);
  padding: clamp(1rem, 2.5vw, 1.75rem);
}
.carte-dept { fill: var(--pierre-100); stroke: var(--encre-400); stroke-width: 1.2; transition: fill var(--transition); }
.carte-dept:hover, a:focus-visible .carte-dept { fill: var(--vert-100); }
.carte-etiquette { font-family: var(--sans); font-size: 15px; font-weight: 650; fill: var(--encre-950); pointer-events: none; }
.carte-num { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--encre-500); pointer-events: none; }
.carte-ville circle { fill: var(--vert-600); transition: r var(--transition); }
.carte-ville:hover circle { r: 6; }
.carte-ville text { font-family: var(--sans); font-size: 12.5px; font-weight: 600; fill: var(--encre-950); }
.carte-mention { font-size: .82rem; color: var(--texte-doux); margin-top: .9rem; font-style: italic; }
.carte-depts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.carte-depts a {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .7rem .9rem;
  background: var(--blanc);
  border: 1px solid var(--bordure-claire);
  border-radius: var(--radius);
  text-decoration: none; color: var(--encre-950);
  font-weight: 600; font-size: .96rem;
  transition: border-color var(--transition), background var(--transition);
}
.carte-depts a:hover { border-color: var(--vert-600); background: var(--vert-100); }
.dept-num { font-size: .8rem; color: var(--encre-400); font-weight: 600; }
.carte-villes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.carte-villes a {
  display: inline-block;
  padding: .38rem .75rem;
  font-size: .89rem;
  background: var(--blanc);
  border: 1px solid var(--bordure-claire);
  border-radius: 100px;
  text-decoration: none;
  color: var(--encre-700);
  transition: border-color var(--transition), color var(--transition);
}
.carte-villes a:hover { border-color: var(--vert-600); color: var(--vert-700); }
.villes-liens { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }

.depts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.dept {
  padding: 1.25rem;
  background: var(--blanc);
  border: 1px solid var(--bordure-claire);
  border-radius: var(--radius-l);
}
.dept h3 { font-family: var(--sans); font-size: 1.05rem; margin: 0 0 .35rem; }
.dept p { font-size: .9rem; color: var(--texte-doux); margin: 0 0 .6rem; }
.communes { font-size: .87rem; color: var(--encre-500); }

/* --- 14. Avis ------------------------------------------------------------ */
.avis { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.avis-carte {
  display: flex; flex-direction: column;
  padding: 1.75rem;
  background: var(--blanc);
  border: 1px solid var(--bordure-claire);
  border-radius: var(--radius-l);
}
.avis-carte blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--encre-700);
}
.avis-pied { margin-top: auto; display: flex; align-items: center; gap: .75rem; }
.avis-initiale {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pierre-100);
  color: var(--encre-500);
  border-radius: 50%;
  font-weight: 650;
}
.avis-nom { font-weight: 650; font-size: .95rem; display: block; }
.avis-lieu { font-size: .85rem; color: var(--texte-doux); }
.avis-vide {
  padding: 1.25rem 1.4rem;
  background: #fdf6dd;
  border: 1px solid #e8d9a0;
  border-left: 3px solid #b8952f;
  border-radius: var(--radius);
  font-size: .95rem;
}
.avis-vide p:last-child { margin-bottom: 0; }

/* --- 15. FAQ (accordéon) ------------------------------------------------- */
.faq-liste { border-top: 1px solid var(--bordure); max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--bordure); }
.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem .25rem;
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 620;
  color: var(--encre-950);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--vert-600); }
.faq-signe {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin-top: .1rem;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bordure);
  border-radius: 50%;
  color: var(--vert-600);
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.faq-item[open] .faq-signe {
  transform: rotate(45deg);
  background: var(--vert-600);
  border-color: var(--vert-600);
  color: var(--blanc);
}
.faq-reponse { padding: 0 3rem 1.5rem .25rem; }
.faq-reponse p { font-size: .99rem; color: var(--encre-700); }
.faq-reponse p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-reponse { animation: faq-ouvre .22s ease both; }
}
@keyframes faq-ouvre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- 16. Formulaire ------------------------------------------------------ */
.bloc-formulaire {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: var(--ombre-carte);
}
.section--pierre .bloc-formulaire, .section--zinc .bloc-formulaire { box-shadow: none; }
.form-grille { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.champ { display: flex; flex-direction: column; gap: .4rem; }
.champ--plein { grid-column: 1 / -1; }
.champ label { font-size: .92rem; font-weight: 600; color: var(--encre-800); }
.indice { font-size: .84rem; color: var(--texte-doux); font-weight: 400; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: .82rem .95rem;
  min-height: 52px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--texte);
  background: var(--blanc);
  border: 1.5px solid var(--bordure);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--vert-600);
  box-shadow: 0 0 0 3px rgba(31,92,82,.14);
}
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--alerte); }
.champ-erreur { font-size: .87rem; color: var(--alerte); font-weight: 500; }
.champ-case { flex-direction: row; align-items: flex-start; gap: .6rem; }
.champ-case input { width: 20px; height: 20px; min-height: 0; flex: 0 0 20px; margin-top: .2rem; }
.champ-case label { font-weight: 400; font-size: .9rem; color: var(--texte-doux); }
.champ-fichier {
  border: 1.5px dashed var(--bordure);
  border-radius: var(--radius);
  padding: 1.1rem;
  background: var(--pierre-50);
}
.champ-fichier input { border: 0; background: none; padding: 0; min-height: 0; }
.form-note { font-size: .87rem; color: var(--texte-doux); }
.form-statut { margin-top: 1rem; }
.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
legend { font-size: .95rem; font-weight: 650; padding: 0; margin-bottom: .6rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }

/* --- 17. Simulateur ------------------------------------------------------ */
.simulateur {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.sim-tete { padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem) 0; }
.sim-progression { margin-bottom: 1.5rem; }
.sim-etape-libelle {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .6rem;
  font-size: .88rem; color: var(--texte-doux);
}
.sim-etape-libelle strong { color: var(--encre-950); font-weight: 650; font-size: .95rem; }
.sim-barre { height: 5px; background: var(--pierre-100); border-radius: 100px; overflow: hidden; }
.sim-barre > span {
  display: block; height: 100%;
  background: var(--vert-600);
  border-radius: 100px;
  transition: width var(--transition-lente);
}
.sim-jalons { display: flex; gap: .35rem; margin-top: .7rem; list-style: none; padding: 0; }
.sim-jalons li {
  flex: 1; height: 3px; background: var(--pierre-100); border-radius: 2px;
}
.sim-jalons li[data-fait="oui"] { background: var(--vert-500); }
.sim-corps { padding: 0 clamp(1.25rem, 3vw, 2.25rem) 1.75rem; }
.sim-etape[hidden] { display: none; }
.sim-etape h3 { font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 1.25rem; }
.sim-choix-liste { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); }
.sim-choix {
  position: relative;
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .95rem 1.1rem;
  min-height: 60px;
  background: var(--blanc);
  border: 1.5px solid var(--bordure);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.sim-choix:hover { border-color: var(--vert-500); }
.sim-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.sim-puce {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: .15rem;
  border: 1.5px solid var(--bordure);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition), background var(--transition);
}
.sim-puce::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blanc); transform: scale(0); transition: transform var(--transition); }
.sim-choix input:checked ~ .sim-puce { border-color: var(--vert-600); background: var(--vert-600); }
.sim-choix input:checked ~ .sim-puce::after { transform: scale(1); }
.sim-choix:has(input:checked) { border-color: var(--vert-600); background: var(--vert-100); }
.sim-choix input:focus-visible ~ .sim-puce { outline: 3px solid var(--vert-500); outline-offset: 2px; }
.sim-choix-titre { font-weight: 620; font-size: .98rem; line-height: 1.3; }
.sim-choix-aide { font-size: .86rem; color: var(--texte-doux); line-height: 1.4; display: block; margin-top: .15rem; }
.sim-actions {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.25rem);
  background: var(--pierre-50);
  border-top: 1px solid var(--bordure-claire);
}
.sim-actions .btn--fantome { margin-right: auto; }
.sim-erreur {
  margin-top: 1rem;
  padding: .8rem 1rem;
  background: #fdeee9;
  border-left: 3px solid var(--alerte);
  border-radius: var(--radius);
  color: #7a2d14;
  font-size: .93rem;
}
.sim-recap { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--bordure); }
.sim-recap li {
  display: grid; gap: .15rem .75rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--bordure-claire);
}
@media (min-width: 620px) { .sim-recap li { grid-template-columns: 210px 1fr; } }
.sim-recap dt, .sim-recap-cle { font-size: .87rem; color: var(--texte-doux); }
.sim-recap-val { font-weight: 600; color: var(--encre-950); }

/* --- 18. Encarts et CTA -------------------------------------------------- */
.encart-cta, .cta-final {
  background: var(--encre-950);
  color: #d5dde2;
  border-radius: var(--radius-l);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.cta-final { border-radius: 0; }
.encart-cta h2, .cta-final h2, .encart-cta h3, .cta-final h3 { color: var(--blanc); }
.encart-cta p, .cta-final p { color: #b6c3ca; max-width: 56ch; }

.encart-info, .encart-urgence, .note-integration, .a-remplir {
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius);
  margin-block: 1.5rem;
}
.encart-info {
  background: var(--vert-100);
  border-left: 3px solid var(--vert-600);
}
.encart-info h3 { font-family: var(--sans); font-size: 1rem; margin: 0 0 .5rem; color: var(--vert-700); }
.encart-urgence {
  background: var(--pierre-100);
  border-left: 3px solid var(--encre-700);
}
.encart-urgence h3 { font-family: var(--sans); font-size: 1.05rem; margin: 0 0 .5rem; }
.encart-urgence .groupe-btn { margin-top: 1rem; }
.note-integration, .a-remplir {
  background: #fdf6dd;
  border: 1px solid #e8d9a0;
  border-left: 3px solid #b8952f;
  font-size: .95rem;
}
.note-integration h3 { font-family: var(--sans); font-size: 1rem; margin: 0 0 .5rem; }

/* Marqueur de contenu à renseigner : visible sans être criard. */
.a-remplir {
  display: inline-block;
  margin: 0;
  padding: .1rem .4rem;
  font-size: .93em;
  font-weight: 600;
  color: #6b5410;
  border-radius: 3px;
}

/* --- 19. Listes éditoriales ---------------------------------------------- */
.coches, .signes { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .55rem; }
.coches li, .signes li { position: relative; padding-left: 1.75rem; font-size: .98rem; }
.coches li::before {
  content: "";
  position: absolute; left: .2rem; top: .55em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--vert-600);
  border-bottom: 2px solid var(--vert-600);
  transform: rotate(-45deg);
}
.signes li::before {
  content: "";
  position: absolute; left: .35rem; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--encre-400);
}
.section--ardoise .coches li::before { border-color: #9fd3c6; }

.etapes { list-style: none; counter-reset: etape; margin: 1.5rem 0; padding: 0; display: grid; gap: 1.25rem; }
.etape { counter-increment: etape; position: relative; padding-left: 3.25rem; }
.etape::before {
  content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--encre-950);
  color: var(--blanc);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 650;
}
.etape h3 { font-family: var(--sans); font-size: 1.05rem; margin: .3rem 0 .4rem; }
.etape p { font-size: .96rem; color: var(--texte-doux); margin: 0; }

.a-retenir {
  background: var(--pierre-50);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-l);
  padding: clamp(1.35rem, 3vw, 2rem);
  margin-block: 2rem;
}
.a-retenir h2 { font-size: 1.25rem; margin-bottom: 1rem; }

/* --- 20. Tableaux -------------------------------------------------------- */
.tableau-scroll { overflow-x: auto; margin-block: 1.5rem; -webkit-overflow-scrolling: touch; }
.tableau { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 460px; }
.tableau th, .tableau td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--bordure-claire); vertical-align: top; }
.tableau thead th {
  background: var(--encre-950);
  color: var(--blanc);
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 650;
  border-bottom: 0;
}
.tableau tbody tr:nth-child(even) { background: var(--pierre-50); }

/* --- 21. Articles -------------------------------------------------------- */
.articles-liste { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.article-carte {
  display: flex; flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure-claire);
  border-radius: var(--radius-l);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow var(--transition), transform var(--transition);
}
.article-carte:hover { box-shadow: var(--ombre-carte); transform: translateY(-3px); }
.article-carte img, .article-carte svg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-carte-corps { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.article-carte h3 { font-family: var(--sans); font-size: 1.08rem; font-weight: 650; margin: 0 0 .5rem; line-height: 1.3; }
.article-carte p { font-size: .93rem; color: var(--texte-doux); margin: 0 0 1rem; }
.article-carte-meta { margin-top: auto; display: flex; gap: .75rem; align-items: center; font-size: .84rem; color: var(--encre-400); }
.article-categorie {
  display: inline-block;
  font-size: .74rem; font-weight: 650; letter-spacing: .02em;
  color: var(--vert-700); background: var(--vert-100);
  padding: .25rem .55rem; border-radius: 3px;
  margin-bottom: .7rem; align-self: flex-start;
}
.article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; color: var(--texte-doux); margin-bottom: 1.5rem; }
.article-corps { max-width: 72ch; }
.article-corps h2 { margin-top: 2.5rem; }
.article-corps h3 { margin-top: 1.75rem; }

/* --- 22. Fil d'Ariane ---------------------------------------------------- */
.ariane { background: var(--pierre-50); border-bottom: 1px solid var(--bordure-claire); font-size: .88rem; }
.ariane ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: .8rem 0; }
.ariane li { display: flex; align-items: center; gap: .4rem; color: var(--texte-doux); }
.ariane li + li::before { content: "/"; color: var(--encre-400); }
.ariane a { color: var(--encre-700); text-decoration: none; }
.ariane a:hover { color: var(--vert-600); text-decoration: underline; }

/* --- 23. Pied de page ---------------------------------------------------- */
.site-pied { background: var(--encre-950); color: #a9b8c0; padding-top: clamp(3rem, 6vw, 4.5rem); font-size: .94rem; }
.pied-grille {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding-bottom: 2.75rem;
}
.pied-marque { grid-column: span 1; }
@media (min-width: 900px) { .pied-marque { grid-column: span 2; max-width: 30rem; } }
.pied-marque .logo-nom { color: var(--blanc); }
.pied-marque .logo-bl { color: #8fa1aa; }
.pied-marque .logo-marque { background: var(--blanc); color: var(--encre-950); }
.pied-grille h2 {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--blanc);
  margin-bottom: 1rem;
}
.pied-grille ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied-grille a { color: #a9b8c0; text-decoration: none; }
.pied-grille a:hover { color: var(--blanc); text-decoration: underline; }
.pied-bas {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .87rem;
  color: #8fa1aa;
}
.pied-bas ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }

/* --- 24. Barre mobile ---------------------------------------------------- */
.barre-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: none;
  gap: .5rem;
  padding: .6rem var(--gouttiere) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--bordure);
  box-shadow: 0 -8px 24px -18px rgba(19,28,34,.6);
}
.barre-mobile .btn { flex: 1; min-height: 50px; }
@media (max-width: 860px) {
  .barre-mobile { display: flex; }
  body { padding-bottom: 76px; }
}

/* --- 25. Divers ---------------------------------------------------------- */
.realisation-vide, .bloc-vide {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--pierre-50);
  border: 1px dashed var(--bordure);
  border-radius: var(--radius-l);
}
.pente-haut { display: none; }

/* --- 26. Apparition au défilement ---------------------------------------- */
/* Le contenu n'est masqué que si le script a pu prendre la main : sans JS,
   si l'observateur échoue ou si le navigateur est ancien, tout reste visible.
   Une animation ne doit jamais pouvoir faire disparaître du contenu. */
@media (prefers-reduced-motion: no-preference) {
  [data-apparait="attente"] { opacity: 0; transform: translateY(14px); }
  [data-apparait="vu"] {
    opacity: 1; transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .6, .3, 1);
  }
}

/* Les marqueurs « à renseigner » se suivent souvent dans une même ligne de
   métadonnées : un peu d'air évite qu'ils ne se collent les uns aux autres. */
.realisation-meta .a-remplir { margin-right: .35rem; }
.realisation-meta + .realisation-meta { margin-top: .45rem; }

/* Mention du visuel d'attente : discrète, mais jamais rognée — elle est posée
   en HTML sur le cadre, pas dessinée dans l'image. */
.hero-media-note {
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  z-index: 2;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  background: rgba(11, 17, 22, .45);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 100px;
  padding: .25rem .7rem;
  pointer-events: none;
}
@media (max-width: 980px) { .hero-media-note { right: .75rem; bottom: .75rem; } }

/* --- Galerie « Nos prestations en images » -------------------------------- */
.vignettes {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.vignette {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure-claire);
  border-radius: var(--radius-l);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.vignette:hover, .vignette:focus-visible {
  border-color: var(--encre-700);
  box-shadow: var(--ombre-carte);
  transform: translateY(-3px);
}
.vignette-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--pierre-100);
}
.vignette-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-lente);
}
.vignette:hover .vignette-media img { transform: scale(1.035); }
.vignette-corps { display: block; padding: 1.15rem 1.3rem 1.35rem; }
.vignette-titre {
  display: block;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--encre-950);
  margin-bottom: .3rem;
}
.vignette:hover .vignette-titre { color: var(--vert-700); }
.vignette-texte { display: block; font-size: .93rem; color: var(--texte-doux); line-height: 1.45; }

/* Mention d'illustration : présente et lisible, sans crier. */
.mention-illustration {
  margin-top: 1.25rem;
  font-size: .88rem;
  font-style: italic;
  color: var(--texte-doux);
}

/* Statut d'envoi du formulaire : trois états distincts, pour qu'on ne
   confonde jamais « en cours », « envoyé » et « échec ». */
.form-statut[data-etat] {
  padding: .95rem 1.1rem;
  border-radius: var(--radius);
  font-size: .96rem;
  line-height: 1.5;
  border-left: 3px solid;
}
.form-statut[data-etat="info"] {
  background: var(--pierre-50);
  border-left-color: var(--encre-700);
  color: var(--encre-800);
}
.form-statut[data-etat="succes"] {
  background: var(--vert-100);
  border-left-color: var(--vert-600);
  color: var(--vert-700);
  font-weight: 500;
}
.form-statut[data-etat="erreur"] {
  background: #fdeee9;
  border-left-color: var(--alerte);
  color: #7a2d14;
}