/* ==========================================================================
   Polices hébergées sur le site (Outfit, Open Sans)
   Bloc GÉNÉRÉ — ne pas modifier à la main.

   Auparavant chargées depuis fonts.googleapis.com : chaque visite envoyait
   alors l'adresse IP du visiteur à Google. Les fichiers vivent désormais
   dans /fonts, plus rien ne part vers un tiers.

   Seuls les sous-ensembles latin et latin-ext sont embarqués (le cyrillique,
   le grec, l'hébreu et le vietnamien ne servent pas ici) : 4 fichiers, 118 Ko.
   Ce sont des polices variables, un même fichier couvre toutes les graisses.
   `font-display: swap` est conservé : le texte s'affiche tout de suite dans
   une police de repli, sans écran blanc.

   Pour régénérer : récupérer le CSS de Google avec un agent récent, ne garder
   que les blocs latin / latin-ext, et réécrire les url() vers ../fonts/.
   ========================================================================== */
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/outfit-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;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/outfit-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;
}

/* ==========================================================================
   Légaut Construction — feuille de style
   Mobile-first. Variables de design system en tête de fichier.
   ========================================================================== */

:root {
  /* Palette — reprise du site en ligne actuel (legautconstruction.fr, thème
     Divi) : rouge et bleu de marque, fond ivoire, gris de texte. Voir
     site/IDENTITE.md pour le détail des valeurs mesurées et la méthode. */
  --rouge: #E73938;
  --rouge-dark: #C4302F;
  --bleu: #243E92;
  --bleu-dark: #1E347C;
  --charbon: #221F1F;
  --chaux: #F7F2EF;
  --chaux-deep: #EFE7DF;
  --gris-mineral: #E3DED8;
  --gris-pierre: #6B6659; /* assombri vs. le gris de corps du site en ligne (#666666) pour tenir le contraste AA (4.5:1) en texte courant */
  --blanc: #FFFFFF;

  /* Typo — reprise du site en ligne : Outfit (titres, gras) + Open Sans (texte) */
  --font-titre: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-texte: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Échelle d'espacement */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-card: 0 1px 2px rgba(34, 31, 31, 0.04), 0 8px 24px -12px rgba(34, 31, 31, 0.16);
  --shadow-lift: 0 12px 32px -14px rgba(34, 31, 31, 0.28);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container-max: 1200px;

  --mobile-bar-h: 60px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

html {
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-texte);
  background: var(--chaux);
  color: var(--charbon);
  font-weight: 500;
  line-height: 1.55;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--mobile-bar-h);
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
}

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 700;
  line-height: 1.12;
  color: var(--charbon);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

p { max-width: 62ch; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) {
  .container { padding-inline: var(--space-5); }
}

section { padding-block: var(--space-7); }
@media (min-width: 900px) { section { padding-block: var(--space-8); } }

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-6);
}
.section-head .eyebrow { margin-bottom: var(--space-2); }
/* Variante centrée (avant/après, avis clients) — était répétée en style
   inline sur trois pages, donc impossible à faire évoluer d'un seul endroit. */
.section-head-center {
  margin-inline: auto;
  text-align: center;
}
.section-head-center p { margin-inline: auto; }
.section-head p { color: var(--gris-pierre); font-size: 1.05rem; margin-top: var(--space-3); }

.perimetre-columns {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.perimetre-columns p { color: var(--gris-pierre); font-size: 1.05rem; }
@media (min-width: 800px) {
  .perimetre-columns { grid-template-columns: 1fr 1fr; }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bleu);
}

.bg-alt { background: var(--chaux-deep); }
.bg-charbon { background: var(--charbon); color: var(--chaux); }
.bg-charbon .eyebrow { color: #f0a3a4; }
.bg-charbon h2, .bg-charbon h3 { color: var(--chaux); }
.bg-charbon p { color: #cfc9bd; }

/* Focus visible partout, accessibilité */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--charbon);
  color: var(--blanc);
  padding: var(--space-2) var(--space-3);
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  /* rouge-dark en repos (5.6:1 sur blanc, AA) ; rouge de marque au survol (accent, pas de contrainte de contraste sur interaction) */
  background: var(--rouge-dark);
  color: var(--blanc);
  border-color: var(--rouge-dark);
}
.btn-primary:hover { background: var(--rouge); border-color: var(--rouge); }

.btn-outline {
  background: transparent;
  color: var(--charbon);
  border-color: var(--charbon);
}
.btn-outline:hover { background: var(--charbon); color: var(--chaux); }

.bg-charbon .btn-outline { color: var(--chaux); border-color: var(--chaux); }
.bg-charbon .btn-outline:hover { background: var(--chaux); color: var(--charbon); }

.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.88rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 236, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--gris-mineral);
  transition: box-shadow 0.28s var(--ease), background 0.28s var(--ease), transform 0.3s var(--ease);
}

.site-header.is-hidden { transform: translateY(-100%); }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  min-height: 72px;
  transition: min-height 0.28s var(--ease);
}

.site-header.is-compact .container { min-height: 56px; }
.site-header.is-compact { box-shadow: 0 2px 16px rgba(0,0,0,0.08); }

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.brand img { height: 42px; width: auto; }

.main-nav {
  display: none;
}

@media (min-width: 900px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    font-weight: 600;
    font-size: 0.95rem;
  }
  .main-nav a {
    position: relative;
    padding-block: 0.3rem;
  }
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--rouge);
    transition: width 0.25s var(--ease);
  }
  .main-nav a:hover::after,
  .main-nav a:focus-visible::after { width: 100%; }
}

.header-cta { display: none; }
@media (min-width: 900px) { .header-cta { display: inline-flex; } }

/* Bouton de menu mobile : trois barres qui se croisent en X à l'ouverture.
   Le libellé "Menu" reste dans le DOM (.visually-hidden) pour les lecteurs
   d'écran, l'état ouvert/fermé étant porté par aria-expanded. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--charbon);
}
.nav-toggle-bars {
  position: relative;
  display: block;
  width: 26px;
  height: 18px;
}
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 50%; margin-top: -1.25px; }
.nav-toggle-bars span:nth-child(3) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(7.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-7.75px) rotate(-45deg); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-nav {
  border-top: 1px solid var(--gris-mineral);
  background: var(--chaux);
}
/* Masqué par défaut seulement si le JS a pu s'exécuter (classe .js posée
   en <head>) : sans JS, le bouton ne peut de toute façon rien basculer,
   donc le menu doit rester visible et accessible tel quel. */
.js .mobile-nav {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), max-height 0.3s var(--ease), visibility 0s linear 0.3s;
}
.mobile-nav.is-open {
  max-height: 480px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), max-height 0.3s var(--ease);
}
.mobile-nav ul { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4); gap: var(--space-1); }
.js .mobile-nav li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mobile-nav.is-open li { opacity: 1; transform: translateY(0); }
.mobile-nav.is-open li:nth-child(1) { transition-delay: 0ms; }
.mobile-nav.is-open li:nth-child(2) { transition-delay: 40ms; }
.mobile-nav.is-open li:nth-child(3) { transition-delay: 80ms; }
.mobile-nav.is-open li:nth-child(4) { transition-delay: 120ms; }
.mobile-nav.is-open li:nth-child(5) { transition-delay: 160ms; }
.mobile-nav a {
  display: block;
  padding: var(--space-2) 0;
  font-weight: 600;
  border-bottom: 1px solid var(--gris-mineral);
}
.mobile-nav .container { padding-inline: var(--space-3); }
.mobile-nav .btn {
  margin-top: var(--space-3);
  width: 100%;
  justify-content: flex-start;
  padding: 1.05rem 1.6rem 1.05rem 0.5rem;
}
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

/* Barre de contact mobile persistante */
.mobile-contact-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--charbon);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mobile-contact-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 0.5rem;
  color: var(--chaux);
  font-weight: 700;
  font-size: 0.92rem;
}
.mobile-contact-bar a:first-child { border-right: 1px solid rgba(255,255,255,0.12); }
.mobile-contact-bar a.is-primary { background: var(--rouge-dark); }
.mobile-contact-bar svg { width: 18px; height: 18px; flex: none; }

.js .mobile-contact-bar {
  transform: translateY(100%);
  transition: transform 0.35s var(--ease);
}
.mobile-contact-bar.is-visible { transform: translateY(0); }

@media (min-width: 900px) {
  .mobile-contact-bar { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  overflow: hidden;
}
.hero .container {
  display: grid;
  gap: var(--space-6);
}
.hero-media {
  order: -1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.hero-media img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }

.hero-copy h1 { margin-block: var(--space-3) var(--space-4); }
.hero-copy p.lede { font-size: 1.15rem; color: #4a453f; margin-bottom: var(--space-5); }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.hero-ctas svg { width: 18px; height: 18px; flex: none; }

.proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gris-pierre);
}
.proof-strip span { display: inline-flex; align-items: center; gap: 0.4rem; }
.proof-strip span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rouge);
  flex: none;
}
.proof-strip span:only-child::before { display: none; }
.proof-stars { color: var(--rouge); letter-spacing: 0.08em; }

@media (min-width: 900px) {
  .hero .container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .hero-media { order: 2; aspect-ratio: 4/5; }
  .hero-media img { aspect-ratio: 4/5; }
}

/* ---- Hero plein cadre (accueil uniquement) — le texte est TOUJOURS en
   surimpression sur l'image, à toutes les largeurs (pas de repli en pile).
   Technique : hero-media et container occupent la même cellule de grille,
   toutes deux étirées (stretch) pour remplir exactement la hauteur de la
   section. La section fait au moins 100% de l'écran, collée au bandeau de
   menu au-dessus et à la bande défilante en dessous, sans espace vide :
   l'image est donc recadrée en plein cadre (object-fit: cover) plutôt que
   affichée à son ratio naturel — décision explicite (2026-08), remplace
   l'ancienne règle "jamais recadrée". Si le texte a besoin de plus de
   place que 100vh (fenêtre très étroite), la section s'agrandit et l'image
   suit (toujours pleine hauteur, jamais déformée). Les autres pages
   gardent le hero standard (image en carte) ci-dessus, inchangé. ---- */
.hero-full {
  position: relative;
  display: grid;
  padding: 0;
  overflow: hidden;
  background: var(--charbon);
  /* --header-h = hauteur réelle du bandeau de menu, mesurée en JS (73px
     de repli si le JS n'a pas tourné) : le hero occupe tout le reste de
     l'écran, sans dépasser, pour que header + hero tiennent ensemble
     dans un seul écran — y compris quand le bandeau passe en mode
     compact au scroll (sinon le contenu suivant sautait de quelques
     pixels au moment précis du passage en compact). */
  min-height: calc(100vh - var(--header-h, 73px));
  min-height: calc(100dvh - var(--header-h, 73px));
}
.hero-full .hero-media {
  grid-area: 1 / 1;
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  order: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.hero-full .hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.hero-full .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(34,31,31,0.85) 0%, rgba(34,31,31,0.55) 42%, rgba(34,31,31,0.08) 72%);
}
@media (max-width: 899px) {
  /* Sous 900px, le texte occupe quasi toute la largeur du hero : le
     dégradé horizontal (pensé pour une colonne de texte étroite à
     gauche d'une image large) laisse le bord droit du texte sans
     assombrissement, illisible sur une photo claire. Un voile uniforme
     garantit le contraste quelle que soit la largeur de ligne. */
  .hero-full .hero-media::after {
    background: linear-gradient(180deg, rgba(34,31,31,0.72) 0%, rgba(34,31,31,0.58) 55%, rgba(34,31,31,0.72) 100%);
  }
  /* Le hero doit occuper exactement l'écran mobile, ni plus ni moins :
     height (pas min-height) fixe la hauteur au lieu de laisser le
     contenu l'agrandir. */
  .hero-full {
    height: calc(100vh - var(--header-h, 73px));
    height: calc(100dvh - var(--header-h, 73px));
    min-height: 0;
  }
  /* La maison se trouve dans la moitié droite de la photo d'origine :
     un cadrage centré (50%) sur un écran étroit ne montrait que sa
     partie gauche. On recentre le cadrage sur la maison et on
     agrandit légèrement pour la mettre plus en avant. */
  .hero-full .hero-media img {
    object-position: 62% center;
    transform: scale(1.15);
  }
}
.hero-full .container {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-block: var(--space-6);
}
@media (max-width: 899px) {
  /* Contenu ancré en bas du hero : le bouton et les étoiles restent
     proches du bord bas (avec la marge du padding-block existant),
     le sous-titre juste au-dessus, les deux titres (eyebrow + h1)
     encore au-dessus — au lieu d'un bloc centré verticalement. */
  .hero-full .container {
    align-items: flex-end;
  }
}
.hero-full .hero-copy { max-width: 640px; }
.hero-full .hero-copy .eyebrow { color: #f0a3a4; }
.hero-full .hero-copy h1 { color: var(--chaux); }
.hero-full .hero-copy p.lede { color: #e6e1d6; }
.hero-full .proof-strip { color: #cfc9bd; }
.hero-full .btn-outline { color: var(--chaux); border-color: var(--chaux); }
.hero-full .btn-outline:hover { background: var(--chaux); color: var(--charbon); }

/* ==========================================================================
   Bande de réassurance (accueil uniquement) — collée sous le hero, fond
   blanc, défilement horizontal continu qui ne s'arrête jamais.
   ========================================================================== */
.trust-band {
  background: var(--blanc);
  border-block: 1px solid var(--gris-mineral);
  padding-block: var(--space-3);
  overflow: hidden;
}
.trust-marquee {
  overflow: hidden;
  /* Fondu aux deux bords : les éléments entrent et sortent du champ sans
     coupure nette contre le bord de l'écran. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
/* Quatre groupes identiques dans la piste : le cycle ne décale que d'un
   groupe (25 %), donc la boucle est invisible, et il reste toujours trois
   groupes de contenu à droite — de quoi couvrir n'importe quelle largeur
   d'écran sans trou. L'animation est infinie et ne se met jamais en pause
   (ni au survol, ni au focus). */
.trust-marquee-track {
  display: flex;
  width: max-content;
  animation: trust-marquee 22s linear infinite;
  will-change: transform;
}
.trust-marquee-group {
  display: flex;
  align-items: center;
  flex: none;
}
@keyframes trust-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}
.trust-band-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  white-space: nowrap;
  color: var(--gris-pierre);
  font-weight: 500;
  font-size: 0.92rem;
}
.trust-band-item strong { color: var(--charbon); font-weight: 700; }
.trust-band-item svg { width: 20px; height: 20px; flex: none; color: var(--rouge); }
.trust-band-sep {
  flex: none;
  width: 1px;
  height: 1.1em;
  margin-inline: var(--space-5);
  background: var(--gris-mineral);
}
@media (min-width: 768px) {
  .trust-band-sep { margin-inline: var(--space-6); }
}

/* ==========================================================================
   Ce que je fais — deux pôles
   ========================================================================== */
.poles {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .poles { grid-template-columns: 1fr 1fr; }
}

.pole-card {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.pole-card img { display: block; aspect-ratio: 4/3; object-fit: cover; width: 100%; height: auto; }
.pole-card-body { padding: var(--space-4) var(--space-4) var(--space-5); flex: 1; display: flex; flex-direction: column; }
.pole-card h3 { margin-bottom: var(--space-2); }
.pole-card ul { margin-top: var(--space-3); margin-bottom: var(--space-4); display: grid; gap: 0.5rem; }
.pole-card li { padding-left: 1.2rem; position: relative; color: #4a453f; font-size: 0.96rem; }
.pole-card li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--bleu);
}
.pole-card.is-eco li::before { background: var(--rouge); }

/* ==========================================================================
   Réalisations
   ========================================================================== */
.realisation-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--blanc);
  box-shadow: var(--shadow-card);
}
.realisation-card:hover,
.realisation-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.realisation-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.realisation-trigger:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}
.realisation-card img { display: block; aspect-ratio: 4/3; object-fit: cover; width: 100%; height: auto; transition: transform 0.5s var(--ease); }
.realisation-card:hover img { transform: scale(1.04); }
.realisation-card figcaption {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0.75;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.realisation-card:hover figcaption,
.realisation-card:focus-within figcaption {
  opacity: 1;
  transform: translateY(-2px);
}

/* Case vide : garde la ligne de trois complète quand une réalisation reste
   à documenter, sans faire croire à une carte cliquable. */
.realisation-card-empty {
  background: transparent;
  border: 1px dashed var(--gris-mineral);
  box-shadow: none;
}
.realisation-card-empty:hover,
.realisation-card-empty:focus-within {
  transform: none;
  box-shadow: none;
}
.realisation-empty { aspect-ratio: 4/3; width: 100%; }
.realisation-card-empty figcaption {
  opacity: 0.5;
  font-weight: 600;
  font-style: italic;
}
.realisation-card-empty:hover figcaption { opacity: 0.5; transform: none; }

/* ==========================================================================
   Lightbox (galerie réalisations)
   ========================================================================== */
body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 100; }
.lightbox[hidden] { display: none; }
.lightbox:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(34, 31, 31, 0.92);
}
.lightbox-content {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 1100px);
  max-height: 88vh;
  display: flex;
}
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}
.lightbox-close,
.lightbox-nav {
  position: fixed;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--blanc);
  color: var(--charbon);
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.lightbox-close:hover,
.lightbox-nav:hover { background: var(--chaux); transform: scale(1.06); }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  border-radius: 50%;
  outline: none;
  box-shadow: 0 0 0 3px var(--bleu);
}
.lightbox-close svg,
.lightbox-nav svg { width: 20px; height: 20px; }
.lightbox-close { top: var(--space-4); right: var(--space-4); }
.lightbox-prev { top: 50%; left: var(--space-4); transform: translateY(-50%); }
.lightbox-next { top: 50%; right: var(--space-4); transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-nav[hidden] { display: none; }
.lightbox-counter {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  color: var(--chaux);
  font-weight: 600;
  font-size: 0.85rem;
  background: rgba(34, 31, 31, 0.6);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}
.lightbox-counter[hidden] { display: none; }
@media (max-width: 640px) {
  .lightbox-prev { left: var(--space-2); }
  .lightbox-next { right: var(--space-2); }
  .lightbox-close { top: var(--space-2); right: var(--space-2); }
}

/* ==========================================================================
   Avant / après
   ========================================================================== */
.compare {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 3;
  max-width: 720px;
  margin-inline: auto;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}
.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.compare-after { clip-path: inset(0 0 0 50%); }
.compare-label {
  position: absolute;
  top: var(--space-3);
  background: rgba(34,31,31,0.72);
  color: var(--chaux);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  transition: opacity 0.2s var(--ease);
}
.compare-label.avant { left: var(--space-3); }
.compare-label.apres { right: var(--space-3); }
.compare-label.is-hidden { opacity: 0; }
.compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--blanc);
  transform: translateX(-50%);
  pointer-events: none;
}
.compare-handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: var(--shadow-lift);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221F1F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' width='20' height='20'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare-note {
  text-align: center;
  color: var(--gris-pierre);
  font-size: 0.9rem;
  margin-top: var(--space-3);
  max-width: 720px;
  margin-inline: auto;
}

/* ==========================================================================
   Éco-construction (détaillée)
   ========================================================================== */
.eco-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .eco-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* La section est épinglée par ScrollTrigger le temps du défilement
   horizontal : elle doit tenir dans un écran, sinon les cartes se
   retrouvent sous la ligne de flottaison pendant tout le pin et le
   défilement passe inaperçu. Le padding vertical de `section` (6.5rem
   en haut ET en bas) faisait dépasser la section dès que la fenêtre
   descendait sous ~800px de haut — le cas de tous les portables.
   D'où un padding proportionnel à la hauteur de fenêtre ici. */
#specialite-eco {
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: clamp(var(--space-4), 5vh, var(--space-8));
  display: flex;
  align-items: center;
}
#specialite-eco .container { width: 100%; }

/* Défilement horizontal natif par défaut : sans JS, sans GSAP ou en
   mouvement réduit, les cartes 02 à 05 doivent rester atteignables.
   `overflow: hidden` ne s'applique qu'une fois ScrollTrigger aux
   commandes, qui pose alors .is-pinned (voir js/main.js). */
.eco-points {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.eco-points.is-pinned {
  overflow: hidden;
  scroll-snap-type: none;
}
.eco-point { scroll-snap-align: start; }
.eco-points-track { display: flex; flex-wrap: nowrap; gap: var(--space-5); width: max-content; }
.eco-point {
  flex: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  /* Sous 1024px, une largeur de carte pilotée par le texte (comme en
     desktop, via le max-width: 62ch des paragraphes) donnerait des
     cartes trop larges pour un défilement horizontal lisible en une
     "vue" à la fois : largeur explicite, proche de l'écran. */
  width: min(85vw, 380px);
}
@media (min-width: 1024px) {
  /* Largeur explicite plutôt que dictée par le contenu. En largeur auto,
     c'est l'élément le plus large de la carte qui décide : le titre de la
     carte 05, beaucoup plus long que les autres, étirait la carte à
     ~1125px pendant que le paragraphe restait borné à 62ch — d'où la
     moitié droite vide. Ici la carte vaut exactement la largeur de
     lecture (62ch) plus ses marges internes : le texte la remplit, et le
     titre trop long passe sur deux lignes au lieu d'élargir la carte. */
  .eco-point { width: calc(62ch + 2 * var(--space-5)); }
}
.eco-point h3 { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: var(--space-2); }
.eco-point h3 .num {
  font-family: var(--font-texte);
  font-weight: 800;
  color: var(--rouge);
  /* taille "grand texte" (>=18.66px gras) pour rester au seuil de contraste AA 3:1 sur fond sombre */
  font-size: 1.25rem;
}
.eco-point p { color: #cfc9bd; }

.eco-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.eco-photo-grid figure { border-radius: var(--radius-md); overflow: hidden; }
.eco-photo-grid img { display: block; aspect-ratio: 4/3; object-fit: cover; width: 100%; height: auto; }
.eco-photo-grid figcaption {
  font-size: 0.78rem;
  color: #cfc9bd;
  padding-top: 0.4rem;
}

.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(232,56,58,0.14);
  color: #f5b3b4;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Partenariat
   ========================================================================== */
.partenariat-grid { display: grid; gap: var(--space-5); }

.partner-card {
  max-width: 760px;
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.partner-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.partner-photos figure {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.partner-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

.partner-card-id {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--gris-mineral);
}
.partner-card-id img {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--radius-sm);
}
.partner-name {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1.2rem;
}
.partner-role {
  color: var(--gris-pierre);
  font-size: 0.92rem;
  margin-top: 0.2rem;
}

.partner-facts {
  display: grid;
  gap: 0.85rem;
  margin-bottom: var(--space-5);
}
.partner-facts li {
  padding-left: 1.4rem;
  position: relative;
  color: #4a453f;
  font-size: 0.97rem;
  line-height: 1.5;
}
.partner-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bleu);
}

.partner-card .btn svg { width: 16px; height: 16px; }

/* Badge-lien vers #partenariat, dans la grille de preuves "Qui suis-je" */
.proof-badge-link {
  display: block;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.proof-badge-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* ==========================================================================
   Qui suis-je
   ========================================================================== */
/* Le sur-titre est un enfant direct de la grille : en mobile il se place
   naturellement au-dessus du portrait (colonne unique), en desktop une zone
   de grille le remet au-dessus du titre, à droite du portrait. */
.about-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.about-eyebrow { margin-bottom: var(--space-2); }
.about-portrait { margin-bottom: var(--space-6); }

@media (min-width: 900px) {
  .about-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "portrait eyebrow"
      "portrait body";
    align-items: start;
    column-gap: var(--space-6);
    row-gap: var(--space-2);
  }
  .about-eyebrow { grid-area: eyebrow; margin-bottom: 0; }
  .about-portrait { grid-area: portrait; margin-bottom: 0; }
  .about-body { grid-area: body; }
}
.about-portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.about-portrait img { display: block; aspect-ratio: 4/5; object-fit: cover; width: 100%; height: auto; }

/* Même respiration titre -> texte que dans un chapeau de section. */
.about-body h2 + p { margin-top: var(--space-3); }
.about-body p { max-width: 60ch; color: #4a453f; font-size: 1.05rem; }
.about-body p + p { margin-top: var(--space-3); }

.proof-badges {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .proof-badges { grid-template-columns: repeat(3, 1fr); }
  .proof-badges.proof-badges-2 { grid-template-columns: repeat(2, 1fr); max-width: 44rem; }
}
.proof-badge {
  background: var(--blanc);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.proof-badge .value { font-family: var(--font-titre); font-weight: 700; font-size: 1.6rem; color: var(--bleu); display: block; margin-bottom: 0.2rem; }
.proof-badge .label { font-size: 0.88rem; color: var(--gris-pierre); font-weight: 600; }
.proof-badge img { max-height: 40px; width: auto; margin-bottom: var(--space-2); }
.proof-badge .note { font-size: 0.8rem; color: var(--gris-pierre); font-style: italic; margin-top: 0.3rem; }

/* ==========================================================================
   Dans la presse / Avis client (blocs compacts, dans Qui suis-je)
   ========================================================================== */
.press-mini,
.avis-mini {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gris-mineral);
  max-width: 46rem;
}
/* Posé juste sous le chapeau de section, le bloc n'a aucun contenu à
   séparer : ni filet ni retrait supérieur (c'était un style inline sur la
   page maçonnerie). */
.section-head + .press-mini,
.section-head + .avis-mini {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* Rangée d'étoiles d'un avis : elle renvoie vers CET avis sur Google, pour
   que le visiteur puisse le vérifier lui-même. */
.avis-mini-stars-link {
  display: inline-block;
  margin-bottom: var(--space-2);
  text-decoration: none;
}
.avis-mini-stars {
  display: inline-block;
  color: var(--rouge);
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.25s var(--ease);
}
.avis-mini-stars-link:hover .avis-mini-stars,
.avis-mini-stars-link:focus-visible .avis-mini-stars {
  transform: translateY(-4px);
}

.press-mini h3,
.avis-mini h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}
/* Quand les étoiles suivent le titre, elles portent déjà l'écart. */
.avis-mini h3 + .avis-mini-stars-link { margin-top: 0; }
.press-mini > p {
  color: #4a453f;
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}
.press-mini blockquote,
.avis-mini blockquote {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--bleu);
}
.press-mini blockquote p,
.avis-mini blockquote p {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--charbon);
  line-height: 1.4;
}
.press-mini blockquote cite,
.avis-mini blockquote cite {
  display: block;
  font-style: normal;
  color: var(--gris-pierre);
  font-size: 0.85rem;
  margin-top: 0.4rem;
}
.avis-mini blockquote { margin-bottom: 0; }
.press-mini-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--bleu);
}
.press-mini-link svg { width: 16px; height: 16px; }
.press-mini-link:hover { color: var(--bleu-dark); }

/* ==========================================================================
   Comment ça se passe
   ========================================================================== */
.steps {
  display: grid;
  gap: var(--space-5);
  counter-reset: step;
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}
.step {
  counter-increment: step;
  padding-top: var(--space-5);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 2rem;
  color: var(--rouge);
  display: block;
  margin-bottom: var(--space-2);
}
.step h3 { margin-bottom: var(--space-2); font-size: 1.1rem; }
.step p { color: var(--gris-pierre); font-size: 0.94rem; }

/* ==========================================================================
   CTA (bloc inline en fin de section + bande pleine largeur)
   ========================================================================== */
.cta-inline {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gris-mineral);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.bg-charbon .cta-inline { border-top-color: rgba(255,255,255,0.12); }
.cta-inline p {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  max-width: 34rem;
}

.cta-band { padding-block: var(--space-6); }
.cta-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.cta-band-inner h2 { margin: 0; max-width: 32rem; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  gap: var(--space-6);
  /* Les enfants d'une grille refusent par défaut de rétrécir sous la
     largeur de leur contenu (min-width: auto) — un <select> avec une
     option longue peut alors forcer toute la page à déborder en
     largeur sur mobile. min-width: 0 autorise le rétrécissement normal. */
  min-width: 0;
}
.contact-grid > * { min-width: 0; }
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 1.3fr 0.9fr; }
}

.contact-form {
  background: var(--blanc);
  border: 1px solid var(--gris-mineral);
  border-radius: 2px;
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}
.contact-form .btn { border-radius: 2px; }
@media (min-width: 640px) {
  .contact-form { padding: var(--space-6); }
}
.form-row { display: grid; gap: 0.5rem; min-width: 0; }
.form-row label {
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}
.form-row .required,
.form-consent .required {
  color: var(--rouge-dark);
  font-size: 0.85em;
  font-weight: 700;
  vertical-align: text-top;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  min-width: 0;
  border: 1.5px solid var(--gris-mineral);
  border-radius: 2px;
  padding: 0.95rem 1.1rem;
  background: var(--chaux);
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.form-row input:hover,
.form-row select:hover,
.form-row textarea:hover {
  border-color: #c9c2b4;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--bleu);
  background: var(--blanc);
  box-shadow: 0 0 0 4px rgba(36, 62, 146, 0.14);
}
.form-row textarea { min-height: 140px; resize: vertical; }

/* Menu déroulant stylé comme les autres champs, flèche personnalisée */
.form-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221F1F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 15px;
}
/* Sur certains navigateurs mobiles, appearance:none sur le <select>
   empêche la liste déroulante native d'hériter de la taille de police
   de la page — la liste s'affiche alors dans une police système bien
   plus petite. On la fixe explicitement sur chaque option. */
.form-row select option {
  font-family: var(--font-texte);
  font-size: 1.05rem;
  font-weight: 500;
}

.contact-form .btn[type="submit"],
.contact-form button[type="submit"] {
  width: 100%;
}
@media (min-width: 640px) {
  .contact-form .btn[type="submit"],
  .contact-form button[type="submit"] {
    width: auto;
  }
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.form-reassurance {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--gris-pierre);
}
.form-reassurance a {
  color: var(--bleu);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-reassurance a:hover { color: var(--bleu-dark); }

/* Consentement RGPD : case + libellé alignés sur la première ligne de
   texte, pas au centre du bloc — le libellé fait souvent deux lignes. */
.form-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}
.form-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin: 0;
  /* Centre la case sur la première ligne du libellé (0.92rem × 1.55). */
  margin-top: 0.1rem;
  border: 1.5px solid var(--gris-mineral);
  border-radius: 2px;
  background: var(--chaux);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.form-consent input[type="checkbox"]:hover { border-color: #c9c2b4; }
.form-consent input[type="checkbox"]:focus-visible {
  border-color: var(--bleu);
  box-shadow: 0 0 0 4px rgba(36, 62, 146, 0.14);
  outline: none;
}
.form-consent input[type="checkbox"]:checked {
  background-color: var(--bleu);
  border-color: var(--bleu);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}
.form-consent label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gris-pierre);
  cursor: pointer;
  max-width: 52ch;
}

/* Message de remerciement affiché après un envoi abouti. Masqué par
   l'attribut `hidden` tant que rien n'a été envoyé. */
.form-merci {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: 1.5px solid rgba(36, 62, 146, 0.25);
  border-left: 4px solid var(--bleu);
  border-radius: 2px;
  background: rgba(36, 62, 146, 0.06);
}
.form-merci-icon { width: 26px; height: 26px; color: var(--bleu); margin-top: 0.15rem; }
.form-merci h3 { font-size: 1.1rem; color: var(--bleu-dark); }
.form-merci p {
  margin-top: var(--space-2);
  font-size: 0.95rem;
  color: var(--charbon);
}
.form-merci a { color: var(--bleu); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* `display: grid` ci-dessus écrase le `display: none` que le navigateur
   applique via l'attribut `hidden` : sans cette règle, le bloc de
   remerciement s'affiche dès le chargement de la page, avant tout envoi.
   Même piège sur .contact-form, qui est aussi une grille : sans la règle
   jumelle, le formulaire resterait visible sous le remerciement au lieu
   d'être remplacé par lui. */
.form-merci[hidden] { display: none; }
.contact-form[hidden] { display: none; }
/* Le bloc de remerciement occupe la cellule du formulaire : on lui donne la
   même présence, sinon il flotte comme une simple notification. */
.form-merci { padding: var(--space-5); }
.form-merci:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }
/* Le focus est amené ici par le script, pas par l'utilisateur : pas de
   contour au clic, il n'apporterait rien et surprendrait. */
.form-merci:focus:not(:focus-visible) { outline: none; }
/* Le bouton doit respirer : il ne touche ni le paragraphe au-dessus, ni le
   bas de l'encart. L'alignement à gauche est conservé — il est calé sur le
   texte, l'indenter le décrocherait du bloc. */
.form-merci-retour {
  margin-top: var(--space-5);
  margin-bottom: var(--space-1);
}

.form-status {
  padding: 0 var(--space-4);
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.92rem;
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), max-height 0.35s var(--ease), padding 0.35s var(--ease);
}
.form-status.is-visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 8rem;
  padding-block: var(--space-3);
}
.form-status.is-success { background: rgba(36, 62, 146, 0.12); color: var(--bleu-dark); }
.form-status.is-error { background: rgba(231, 57, 56, 0.12); color: var(--rouge-dark); }

.contact-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-card {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
}

/* Petit badge de crédibilité — réaffiche l'unique avis réel du site
   (Laurent S., 5/5 sur Google) de façon compacte. Jamais de nouvel avis
   fabriqué : uniquement les faits déjà établis ailleurs sur le site. */
.google-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.google-mini-stars {
  color: var(--rouge);
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  line-height: 1;
}
.google-mini-text {
  font-size: 0.88rem;
  font-weight: 700;
}
.google-mini-text small {
  display: block;
  font-weight: 500;
  color: var(--gris-pierre);
  font-size: 0.8rem;
}
.contact-card h3 { margin-bottom: var(--space-2); font-size: 1.15rem; }
.contact-card .phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--rouge);
  margin-bottom: var(--space-2);
}
.contact-card p.reframe { color: var(--gris-pierre); font-size: 0.92rem; }
.contact-card ul { display: grid; gap: 0.6rem; font-size: 0.95rem; }
.contact-card ul a { font-weight: 600; }

/* ==========================================================================
   Avis clients (page contact) — un seul témoignage réel, mis en valeur
   ========================================================================== */
.testimonial {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  background: var(--blanc);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-5);
}
@media (min-width: 640px) {
  .testimonial { padding: var(--space-7) var(--space-6); }
}
.testimonial-rating {
  color: var(--rouge);
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  margin-bottom: var(--space-4);
}
.testimonial blockquote { margin: 0 0 var(--space-5); }
.testimonial blockquote p {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--charbon);
  max-width: none;
}
.testimonial figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.testimonial-author { font-weight: 700; font-size: 0.98rem; color: var(--charbon); }
.testimonial-score { font-size: 0.88rem; font-weight: 600; color: var(--gris-pierre); }

/* --------------------------------------------------------------------------
   Renvois vers la fiche Google (avis)
   Les blocs d'étoiles sont devenus des liens. Au repos ils gardent très
   exactement l'apparence qu'ils avaient en tant que texte ; au survol, les
   étoiles se soulèvent et grossissent, et le libellé se souligne.

   Le grossissement passe par transform (et non par letter-spacing ou
   font-size) : c'est la seule propriété qui ne provoque aucun recalcul de
   mise en page, donc le texte voisin ne bouge pas d'un pixel. L'origine est
   posée à gauche pour que les étoiles s'ouvrent vers la droite sans dériver.

   Chaque effet est dupliqué sur :focus-visible : au clavier, on doit voir
   la même chose qu'à la souris. Le bloc prefers-reduced-motion en fin de
   feuille neutralise déjà toutes ces transitions.
   -------------------------------------------------------------------------- */
.proof-strip-link,
.google-mini-link,
.testimonial-rating-link,
a.testimonial-score {
  color: inherit;
  text-decoration: none;
}

/* Le mouvement commun à toutes les rangées d'étoiles.

   Uniquement VERTICAL, et c'est délibéré : un grossissement horizontal
   finit toujours par mordre sur le voisin. Sur le bandeau du hero, le
   texte « 5/5 sur Google » démarre exactement où les étoiles finissent —
   0 px d'écart, mesuré — donc le moindre élargissement se superposait au
   texte. Un translateY ne consomme aucune largeur : il ne peut chevaucher
   personne, quels que soient la police, la taille d'écran ou la langue. */
.proof-strip-link .proof-stars,
.google-mini-link .google-mini-stars,
a.testimonial-score {
  display: inline-block;
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.proof-strip-link:hover .proof-stars,
.proof-strip-link:focus-visible .proof-stars,
.google-mini-link:hover .google-mini-stars,
.google-mini-link:focus-visible .google-mini-stars {
  transform: translateY(-4px);
}

/* Dans l'encart, c'est la carte entière qui se soulève (.proof-badge-link,
   plus haut) : les étoiles ne bougent pas en plus, deux mouvements
   simultanés brouilleraient l'effet. */

/* Le libellé se souligne, l'étoile ne se souligne pas : le trait est posé
   sur le texte seul, jamais sur le bloc entier. */
.proof-strip-link:hover,
.proof-strip-link:focus-visible,
.google-mini-link:hover .google-mini-text,
.google-mini-link:focus-visible .google-mini-text,
a.testimonial-score:hover,
a.testimonial-score:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.proof-strip-link:hover .proof-stars,
.proof-strip-link:focus-visible .proof-stars {
  text-decoration: none;
}
a.testimonial-score:hover,
a.testimonial-score:focus-visible {
  color: var(--charbon);
  transform: translateY(-1px);
}

/* Grande rangée d'étoiles du témoignage : même mouvement vertical. Elle est
   seule sur sa ligne, mais on garde la règle commune pour que le survol
   parle le même langage partout. */
.testimonial-rating-link {
  display: block;
  margin-bottom: var(--space-4);
}
.testimonial-rating-link .testimonial-rating {
  margin-bottom: 0;
  transition: transform 0.25s var(--ease);
}
.testimonial-rating-link:hover .testimonial-rating,
.testimonial-rating-link:focus-visible .testimonial-rating {
  transform: translateY(-4px);
}

/* Cible tactile confortable sur la pastille du bandeau de contact. */
.google-mini-link { border-radius: var(--radius-sm); }

/* ==========================================================================
   Footer
   Trois colonnes (marque / navigation / coordonnées), puis une barre basse
   séparée par un filet : copyright à gauche, liens légaux à droite.
   ========================================================================== */
.site-footer {
  /* Tint clair du rouge de marque : #E73938 ne tient que 3.93:1 sur le
     charbon, sous le seuil AA pour un intitulé petit et gras. */
  --rouge-footer: #EE5B57;
  background: var(--charbon);
  color: #cfc9bd;
  padding-block: var(--space-6) var(--space-4);
}
.footer-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1.1fr; gap: var(--space-6); }
}
.footer-brand img { height: 80px; width: auto; margin-bottom: var(--space-3); filter: brightness(0) invert(1); opacity: 0.92; }
.footer-brand p { color: #a49e90; font-size: 0.92rem; max-width: 32ch; }

.site-footer h4 {
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rouge-footer);
  margin-bottom: var(--space-3);
}
.site-footer ul { display: grid; gap: 0.7rem; font-size: 0.92rem; }
.site-footer li a { color: var(--chaux); transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--rouge-footer); }

/* Adresse et notes : même graisse que les liens, teinte plus sourde —
   ce sont des informations, pas des cibles cliquables. */
.footer-address {
  font-style: normal;
  margin-top: var(--space-3);
  font-size: 0.92rem;
  line-height: 1.9;
  color: #a49e90;
}
.footer-note {
  margin-top: var(--space-2);
  font-size: 0.92rem;
  color: #a49e90;
}

.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #8f897b;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.footer-legal a { color: #a49e90; transition: color 0.2s var(--ease); }
.footer-legal a:hover { color: var(--chaux); }

/* ==========================================================================
   Reveal au scroll — invisible seulement si le JS a pu s'exécuter
   (classe .js posée par un script inline synchrone dans <head>).
   Sans JS ou si le CDN GSAP échoue, le contenu reste visible par défaut.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js .reveal-strong { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal-soft   { opacity: 0; transform: none; transition: opacity 0.5s var(--ease); }
.reveal-strong.is-visible, .reveal-soft.is-visible { opacity: 1; transform: none; }

.js .reveal-mask { clip-path: inset(100% 0 0 0); transition: clip-path 0.9s var(--ease); }
.reveal-mask.is-visible { clip-path: inset(0 0 0 0); }

/* .realisation-card porte aussi la classe .reveal : sans ce doublon de
   classe, la transition du hover (transform + box-shadow) perdrait la
   cascade face à ".js .reveal" (même spécificité, régle plus bas dans
   le fichier) et le survol n'animerait plus rien. */
.realisation-card.reveal {
  transition: opacity 0.7s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* Séquence d'entrée du hero — animée en JS au chargement (pas au scroll).
   Ne touche jamais .hero-media : l'image est l'élément LCP des 3 pages. */
.js .hero-copy > * { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .reveal-mask { clip-path: none; }
  .hero-copy > * { opacity: 1 !important; }
  .form-status { transition: none; }
  .js .mobile-nav, .mobile-nav.is-open, .js .mobile-nav li { transition: none; }
  .mobile-nav.is-open li { transition-delay: 0ms !important; }
  .js .mobile-contact-bar { transform: none; transition: none; }
  .site-header.is-hidden { transform: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Multi-pages — nav active, fil d'ariane, section contact réutilisable,
   grille de prestations (maçonnerie), chantiers participatifs, zone
   ========================================================================== */

/* Page courante dans la nav */
.main-nav a[aria-current="page"] { color: var(--rouge-dark); }
.main-nav a[aria-current="page"]::after { width: 100%; transition: none; background: var(--rouge-dark); }
.mobile-nav a[aria-current="page"] { color: var(--rouge-dark); }

/* Fil d'ariane (sous-pages) */
.breadcrumb { padding-block: var(--space-3); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--gris-pierre); }
.breadcrumb a { font-weight: 600; color: var(--bleu); }
.breadcrumb a:hover { color: var(--bleu-dark); }
.breadcrumb li { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--gris-mineral); }
.breadcrumb li[aria-current="page"] { color: var(--charbon); font-weight: 600; }

/* ==========================================================================
   Pages légales (mentions légales, politique de confidentialité)
   Une seule colonne de texte : ce sont des documents à lire de haut en bas,
   pas des pages de vente — ni grille, ni illustration.
   ========================================================================== */
.legal { max-width: 46rem; }
.legal h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gris-mineral);
}
.legal h3 { font-size: 1.05rem; margin-top: var(--space-4); }
.legal p, .legal li { color: var(--gris-pierre); }
.legal h2 + p, .legal h3 + p, .legal p + p,
.legal ul, .legal .legal-dl { margin-top: var(--space-3); }
.legal ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: 0.45rem; }
.legal a {
  color: var(--bleu);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:hover { color: var(--bleu-dark); }

/* Identifiants légaux (SIRET, RCS, TVA…) : libellé / valeur, sur deux
   colonnes dès qu'il y a la place, empilés sur mobile. */
.legal-dl { display: grid; gap: 0.5rem var(--space-4); }
@media (min-width: 640px) {
  .legal-dl { grid-template-columns: minmax(11rem, max-content) 1fr; }
}
.legal-dl dt { font-weight: 700; color: var(--charbon); }
.legal-dl dd { margin: 0; color: var(--gris-pierre); }

/* Marqueur des informations que le client doit encore fournir. À supprimer
   au fur et à mesure — un `grep "a-remplir"` liste ce qui reste en attente. */
.a-remplir {
  background: #FDECEC;
  color: var(--rouge-dark);
  font-weight: 700;
  padding: 0.05em 0.4em;
  border-radius: var(--radius-sm);
}
.legal-maj {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gris-mineral);
  font-size: 0.88rem;
}

/* Section contact réutilisable (dernière section : accueil, maçonnerie, éco) */
.contact-cta-inner {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}
.contact-cta-inner p { margin-inline: auto; margin-top: var(--space-3); }
.contact-cta-inner .google-mini {
  justify-content: center;
  margin-top: var(--space-3);
}
.contact-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.contact-cta-actions svg { width: 18px; height: 18px; }

/* Grille de prestations (maçonnerie) */
.services-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}
.service-cluster {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.service-cluster h3 { margin-bottom: var(--space-2); }
/* Chapeau des blocs de prestations — était en style inline (donc
   impossible à réduire en responsive), remonté ici. */
.service-cluster-intro {
  color: var(--gris-pierre);
  font-size: 0.92rem;
  margin-bottom: var(--space-3);
}
.service-cluster ul { display: grid; gap: 0.5rem; }
.service-cluster li { padding-left: 1.2rem; position: relative; color: #4a453f; font-size: 0.96rem; }
.service-cluster li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--rouge);
}

/* Bouton "découvrir" en bas des cartes-pôles (accueil) */
.pole-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bleu);
}
.pole-card-link:hover { color: var(--bleu-dark); }

/* Note de section (paragraphe court, hors bloc CTA) */
.section-note {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gris-mineral);
  max-width: 46rem;
  font-weight: 600;
  color: #4a453f;
}
.section-note a { color: var(--bleu); font-weight: 700; }
.section-note a:hover { color: var(--bleu-dark); }
.bg-charbon .section-note { border-top-color: rgba(255,255,255,0.12); }

/* Chantiers participatifs */
.participatif {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  max-width: 46rem;
}

/* Visually hidden util (labels accessibles sans affichage) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Réalisations — carrousel : les cartes tiennent sur une seule ligne et
   défilent horizontalement, avec une flèche de chaque côté.
   Sur grand écran, les trois cartes d'un groupe occupent toute la ligne :
   il n'y a rien à faire défiler, le JS pose alors .is-static et les flèches
   disparaissent (rendu identique à la grille d'origine).
   ========================================================================== */
.realisations-carousel { position: relative; }
.realisations-carousel + .realisations-carousel { margin-top: var(--space-5); }

.realisations-track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Laisse respirer l'ombre portée / le léger soulèvement des cartes, que
     le conteneur défilant rognerait sinon en haut et en bas. */
  padding-block: 6px;
}
.realisations-track::-webkit-scrollbar { display: none; }

.realisations-track > .realisation-card {
  flex: 0 0 auto;
  width: min(82%, 320px);
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .realisations-track > .realisation-card { width: calc((100% - var(--space-5)) / 2); }
}
@media (min-width: 1024px) {
  .realisations-track > .realisation-card { width: calc((100% - var(--space-5) * 2) / 3); }
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  padding: 0;
  border: 1px solid var(--gris-mineral);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--charbon);
  box-shadow: var(--shadow-card);
  transition: opacity 0.25s var(--ease), transform 0.18s var(--ease), background-color 0.18s var(--ease);
}
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow:hover { background: var(--blanc); transform: scale(1.06); }
.carousel-prev { left: -8px; }
.carousel-next { right: -8px; }
/* En butée, la flèche disparaît au lieu de rester grisée : pas de flèche
   gauche sur la première carte, pas de flèche droite sur la dernière. */
.carousel-arrow[disabled] { display: none; }
.realisations-carousel.is-static .carousel-arrow { display: none; }

/* ==========================================================================
   Ajustements mobile
   ========================================================================== */

/* Sous-titres et textes courants — échelle réduite sur mobile.
   Tous les h3 partagent la même taille (ils divergeaient d'une section à
   l'autre) ; tous les paragraphes, listes et citations descendent d'un
   cran par rapport au desktop. Les champs de formulaire sont volontairement
   laissés à 1rem : sous 16px, iOS zoome automatiquement à la saisie. */
@media (max-width: 899px) {
  /* --- Sous-titres (h3) : une seule taille partout --- */
  h3,
  .pole-card h3,
  .step h3,
  .press-mini h3,
  .avis-mini h3,
  .contact-card h3,
  .service-cluster h3,
  .eco-point h3,
  .participatif h3 {
    font-size: 0.9rem;
  }
  .site-footer h4 { font-size: 0.74rem; }

  /* --- Texte courant --- */
  p { font-size: 0.9rem; }
  .hero-copy p.lede { font-size: 1rem; }
  .hero-copy p.proof-strip { font-size: 0.8rem; }
  .section-head p,
  .perimetre-columns p,
  .about-body p,
  .cta-inline p,
  .section-note,
  .participatif p,
  .contact-cta-inner p { font-size: 0.9rem; }
  .eco-point p { font-size: 0.88rem; }
  .step p { font-size: 0.84rem; }
  .service-cluster p,
  .service-cluster-intro { font-size: 0.84rem; }
  .press-mini > p { font-size: 0.85rem; }
  .compare-note { font-size: 0.82rem; }
  .partner-name { font-size: 1.05rem; }
  .partner-role { font-size: 0.84rem; }
  .contact-card p.reframe { font-size: 0.84rem; }
  .form-row label { font-size: 0.84rem; }
  .form-reassurance { font-size: 0.78rem; }
  .form-consent label { font-size: 0.82rem; }
  .form-merci h3 { font-size: 0.98rem; }
  .form-merci p { font-size: 0.84rem; }
  .form-status { font-size: 0.84rem; }

  /* --- Listes de contenu --- */
  .pole-card li,
  .service-cluster li,
  .partner-facts li { font-size: 0.86rem; }
  .contact-card ul { font-size: 0.86rem; }
  .breadcrumb ol { font-size: 0.78rem; }

  /* --- Citations et témoignages --- */
  .press-mini blockquote p,
  .avis-mini blockquote p { font-size: 0.9rem; }
  .press-mini blockquote cite,
  .avis-mini blockquote cite { font-size: 0.78rem; }
  .testimonial blockquote p { font-size: 1rem; }
  .testimonial-author { font-size: 0.88rem; }
  .testimonial-score { font-size: 0.8rem; }

  /* --- Mentions, encarts et pied de page --- */
  .proof-badge .label { font-size: 0.8rem; }
  .proof-badge .note { font-size: 0.76rem; }
  .google-mini-text { font-size: 0.82rem; }
  .footer-brand p { font-size: 0.84rem; }
  .site-footer ul { font-size: 0.84rem; }
  /* La règle générique `p` ci-dessus l'emporterait sur l'héritage :
     adresse et notes du pied de page doivent suivre les liens. */
  .footer-address,
  .footer-note,
  .footer-note p { font-size: 0.84rem; }
  .realisation-card figcaption { font-size: 0.86rem; }
  .eco-photo-grid figcaption { font-size: 0.74rem; }
}

/* Comment ça se passe — au scroll, chaque bande vient recouvrir exactement
   la précédente : même position collée, même hauteur, fond opaque. La
   grille 4 colonnes reprend la main dès 768px. */
@media (max-width: 767px) {
  .steps {
    /* En grille, un élément collant est prisonnier de sa cellule et ne peut
       pas se superposer à celle d'à côté : on repasse en flux bloc. */
    display: block;
  }
  .step {
    position: sticky;
    top: calc(var(--header-h, 73px) + var(--space-3));
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Hauteur identique pour les quatre bandes : c'est la condition pour
       que la suivante recouvre la précédente au pixel près. */
    min-height: 15rem;
    padding: var(--space-4);
    background: var(--blanc);
    border: 1px solid var(--gris-mineral);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
  .step + .step { margin-top: var(--space-5); }
  .bg-alt .step { border-color: rgba(34, 31, 31, 0.06); }
  .step::before { margin-bottom: var(--space-1); }
}

/* Éco-construction — « Ma spécialité » sur mobile : la section reprend une
   hauteur normale (le 100vh + centrage vertical, pensé pour le desktop,
   dépassait de l'écran et provoquait un à-coup à l'arrivée depuis les
   réalisations). C'est le bloc de cartes seul qui est épinglé, une fois
   centré à l'écran — voir js/main.js. */
/* Hors panneau plein écran (voir js/main.js, mêmes conditions) : la section
   redevient une section ordinaire, c'est le bloc de cartes seul qui est
   épinglé. Le seuil de hauteur compte autant que celui de largeur — une
   fenêtre basse ne peut pas contenir la section d'un écran. */
@media (max-width: 1023px), (max-height: 719px) {
  #specialite-eco {
    display: block;
    min-height: 0;
  }
}