/*
@charset "UTF-8";
	Theme Name: starter
	Theme URI: https://nature-digitale.fr
	Description: Starter Theme - Nature Digitale
	Author: Nature Digitale - Agence Web Eco Responsable
	Author URI: https://nature-digitale.fr
	Version: 1.0.0
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: nature-digitale
*/

/* =============================================================
   Design system Hamel — Pierre, Nature & Habitat
   Source : maquettes/hamel/index.html (archivee dans
   maquettes/archives-html/frontpage/). Toute modification de
   design se repercute ici, pas dans la maquette.
   ============================================================= */

/* Hallmark · tokens · Hamel — Pierre, Nature & Habitat
 * route: custom (tuned) · vibe: "olive, pierre seche, sobriete d'atelier"
 * axes: light / roman-serif / chromatic-other (olive ~133)
 *
 * Les noms --color-text / --color-bg / --color-bg-alt / --color-border /
 * --color-link / --font-body / --font-heading / --container-* / --radius-* /
 * --transition-* / --z-* sont ceux du theme WordPress (contrat d'integration).
 * Les autres sont propres au projet et seront ajoutes au :root du theme.
 */

:root {
  /* ── Typographie ──────────────────────────────────────────── */
  --font-heading: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  /* ── Couleurs · surfaces ──────────────────────────────────── */
  /* --color-bg est cale sur le fond du logo (#F8F5F0) pour qu'il s'y fonde. */
  --color-bg: oklch(96.5% 0.007 88);
  --color-bg-alt: oklch(93.5% 0.010 88);
  --color-bg-sunk: oklch(90.5% 0.012 88);   /* aussi utilise par le rendu de la carte */
  --color-bg-dark: oklch(26% 0.028 135);
  --color-bg-dark-2: oklch(31% 0.030 135);

  /* ── Couleurs · texte ─────────────────────────────────────── */
  --color-text: oklch(22% 0.012 120);
  --color-text-light: oklch(43% 0.012 120);
  --color-text-muted: oklch(55% 0.011 120);
  --color-text-inv: oklch(94% 0.008 95);
  --color-text-inv-muted: oklch(77% 0.012 100);

  /* ── Couleurs · filets ────────────────────────────────────── */
  --color-border: oklch(84% 0.011 95);
  --color-border-soft: oklch(89.5% 0.009 95);
  --color-border-inv: oklch(38% 0.022 135);

  /* ── Couleurs · accent (usage < 3 % du viewport) ──────────── */
  --color-accent: oklch(48% 0.12 133);
  --color-accent-deep: oklch(38% 0.10 133);
  --color-accent-inv: oklch(72% 0.13 133);
  --color-link: var(--color-accent);
  --color-link-hover: var(--color-accent-deep);
  --color-focus: oklch(50% 0.18 133);

  /* Voile bas du hero — degrade 2 arrets, sur l'ancre olive. */
  --scrim-hero: linear-gradient(
    to top,
    oklch(18% 0.020 130 / 0.82) 0%,
    oklch(18% 0.020 130 / 0) 62%
  );
  /* Voile du menu mobile et ombre portee du titre hero : la transparence est un
     modificateur, pas une couleur du nuancier — d'ou des tokens dedies. */
  --scrim-overlay: oklch(18% 0.020 130 / 0.45);
  /* En-tete des pages interieures : bande deux fois plus courte que le hero
     et photos souvent claires (pierre, enduit). Le voile couvre donc toute
     la hauteur, en restant assez leger en haut pour que la photo se lise. */
  --scrim-page-head: linear-gradient(
    to top,
    oklch(18% 0.020 130 / 0.76) 0%,
    oklch(18% 0.020 130 / 0.44) 55%,
    oklch(18% 0.020 130 / 0.16) 100%
  );
  --shadow-hero-text: 0 1px 24px oklch(18% 0.020 130 / 0.35);
  /* Voile du panneau CTA : centre, pas uniforme. Le texte est centre, donc le
     voile est dense au milieu (lisibilite) et leger aux angles (la photo se
     voit). Un voile uniforme obligeait a choisir : soit illisible, soit un
     aplat ou la photo disparaissait. Une seule teinte, deux arrets d'alpha. */
  --scrim-cta: radial-gradient(
    120% 112% at 50% 50%,
    oklch(17% 0.024 133 / 0.86) 30%,
    oklch(20% 0.026 133 / 0.38) 100%
  );

  /* ── Echelle typographique · ratio 1.25 ───────────────────── */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.1875rem;
  --text-lg: 1.5rem;
  --text-xl: 1.9375rem;
  --text-2xl: 2.4375rem;
  --text-display-s: clamp(2rem, 3.2vw + 1rem, 3.25rem);
  --text-display: clamp(2.25rem, 4.4vw + 0.75rem, 4.5rem);
  /* Titre de section — une seule taille pour toutes les sections. */
  --text-section: clamp(2rem, 2.2vw + 1.15rem, 3rem);

  /* ── Espacement · base 4 pt ───────────────────────────────── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ── Gabarit ──────────────────────────────────────────────── */
  --container-width: 1240px;
  --container-padding: 0 clamp(1rem, 4vw, 3rem);
  --measure: 34rem;
  --header-height: 76px;
  --section-padding: var(--space-3xl) 0;
  --rule-hair: 1px;

  /* ── Rayons ───────────────────────────────────────────────────
     Echelle fluide : un rayon de 32 px sur un panneau de 320 px de large
     mange le coin, donc les grands rayons se resserrent en mobile. */
  --radius-xs: 6px;                                 /* petits controles */
  --radius-sm: 10px;                                /* boutons, puces */
  --radius-md: clamp(0.625rem, 1.2vw, 1rem);        /* images, tuiles */
  --radius-lg: clamp(1rem, 1.8vw, 1.5rem);          /* figures, cartes */
  --radius-xl: clamp(1.25rem, 2.4vw, 2rem);         /* panneaux de section */
  --radius-pill: 999px;

  /* Retrait lateral des sections qui deviennent des panneaux detaches. */
  --page-gutter: clamp(0.75rem, 2.2vw, 1.75rem);
  /* Respiration interieure d'un panneau : le contenu ne colle pas au bord
     arrondi. Ne s'applique QUE dans un panneau, jamais sur le flux normal. */
  --panel-pad: clamp(1.25rem, 3.5vw, 3rem);

  /* ── Mouvement ────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --transition-fast: var(--dur-micro) var(--ease-out);
  --transition-base: var(--dur-short) var(--ease-out);

  /* ── Plans ────────────────────────────────────────────────── */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 200;
  --z-overlay: 300;
  --z-mobile-menu: 400;
}

/* Hallmark · genre: editorial · macrostructure: Photographic · H6 knobs: image=full-bleed, caption=lower-left, text=overlaid
 * nav: N1b topbar (demande client) · footer: Ft1 Mast-headed · enrichment: none (photographie reelle)
 * theme: custom (tuned) · vibe: "olive, pierre seche, sobriete d'atelier"
 * paper: oklch(96.5% 0.007 88) · accent: oklch(48% 0.12 133)
 * display: Fraunces (romain) · body: IBM Plex Sans · axes: light / roman-serif / chromatic-other (olive ~133)
 * icones: Hugeicons free (MIT) — inlinees en sprite SVG, zero requete HTTP
 * studied: no · context: brief.md + moodboard + retours client (topbar, icones, titres, CTA)
 */

/* ══ Polices ══════════════════════════════════════════════════ */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibmplexsans-latin-var.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ══ Reset ════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-height); }
body { overflow-x: clip; }
html:focus-within { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: var(--color-link); text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 96;
  overflow-wrap: anywhere;
  min-width: 0;
}

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Pas de padding-inline systematique : il rognait le contenu de 2x48 px meme
   quand la fenetre etait bien plus large que le gabarit, donc pour rien. La
   gouttiere ne se declenche que lorsqu'elle sert vraiment, c'est-a-dire quand
   la fenetre approche la largeur du gabarit. */
.container {
  width: min(var(--container-width), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
}
/* Dans un panneau, le contenu s'ecarte du bord arrondi. */
.panel .container {
  width: min(var(--container-width), 100% - 2 * var(--panel-pad));
}

.site-main { flex: 1; }

/* ══ Panneaux ═════════════════════════════════════════════════
   Les sections a fond plein (hero, photos, galerie, secteur, CTA) ne vont
   plus bord a bord : elles se detachent du papier en blocs arrondis, avec
   le creme qui respire autour. Les sections de texte, elles, restent dans
   le flux — un panneau autour d'un paragraphe ne servirait a rien. */
.panel {
  margin-inline: var(--page-gutter);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
/* Panneau sombre : casse le fil du papier creme. Le texte s'inverse. */
.panel--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inv);
}
.panel--dark .section-title,
.gallery .section-title { color: var(--color-text-inv); }
/* Sans cette regle, le chapeau gardait --color-text-light (gris sombre) sur
   la bande verte : illisible. */
.panel--dark .section-lede,
.gallery .section-lede { color: var(--color-text-inv-muted); }

/* Variante bord a bord : le hero touche les cotes, seul le bas s'arrondit. */
.panel--bleed {
  margin-inline: 0;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ══ En-tete de section ═══════════════════════════════════════
   Medaillon + titre + chapeau, centres. Meme composition partout :
   c'est ce qui donne son unite a la page. */
/* Aligne a gauche par defaut. Le centrage est un accent, reserve au bloc
   d'ouverture, au mot de l'artisan, a la FAQ et au CTA — pas la regle. */
.sec-head {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  max-width: 48rem;
  margin-bottom: var(--space-2xl);
}
.sec-head--center {
  justify-items: center;
  text-align: center;
  margin-inline: auto;
}
.sec-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-bg-dark);
  color: var(--color-accent-inv);
}
/* Sur une section deja vert fonce, le medaillon disparaitrait dans le fond :
   il s'eclaircit d'un cran, prend un filet, et l'icone passe en creme — le
   vert pomme n'aurait pas assez de contraste sur du vert. */
.panel--dark .sec-icon,
.gallery .sec-icon {
  background: var(--color-bg-dark-2);
  border: var(--rule-hair) solid var(--color-border-inv);
  color: var(--color-text-inv);
}
.sec-icon .icon { font-size: 1.65rem; }

.section-title {
  font-size: var(--text-section);
  text-wrap: balance;
}
.section-lede {
  max-width: 76ch;
  font-size: var(--text-md);
  color: var(--color-text-light);
  text-wrap: pretty;
}
.sec-head > * { margin: 0; }

/* ══ Icones ═══════════════════════════════════════════════════
   Sprite SVG inline : les icones voyagent dans le HTML (mis en cache),
   zero requete, colorables via currentColor. Cf. PERFORMANCE.md §4. */
.icon {
  width: 1em; height: 1em;
  flex: none;
  fill: none;
  stroke-width: 1.5;
  vertical-align: -0.125em;
}

/* ══ Boutons et liens ═════════════════════════════════════════ */
/* C1 Outlined chip — knobs: shape=slab, density=spacious, adornment=none */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-bg);
  background: var(--color-text);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}
.btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn-primary:active { transform: translateY(1px); }
.btn-lg { padding: 1.0625rem 2.25rem; font-size: var(--text-base); letter-spacing: 0.05em; }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn-ghost:hover { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }

.btn-inv {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-bg);
}
.btn-inv:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }

/* C3 Typographic link — knobs: underline=solid, hover=thicken, arrow=→ */
.link-typo {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  padding-bottom: 3px;
  box-shadow: inset 0 -1px 0 0 currentColor;
  transition: box-shadow var(--transition-fast), color var(--transition-fast);
}
.link-typo:hover { box-shadow: inset 0 -2px 0 0 currentColor; }
.link-typo .icon { transition: transform var(--transition-fast); }
.link-typo:hover .icon { transform: translateX(3px); }

.tel-link { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ══ HEADER · topbar ══════════════════════════════════════════
   Logo a gauche, nav a droite, CTA en bout. Slim (72 px) et sticky :
   a cette hauteur, rester en haut est un service — l'ancien masthead de
   225 px, lui, volait un quart du viewport. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  border-bottom: var(--rule-hair) solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: var(--header-height);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-inline-end: auto;
  color: var(--color-text);
}
.header-logo img { width: 42px; height: auto; }
.header-wordmark { display: grid; line-height: 1; }
.header-wordmark b {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: 0.015em;
}
.header-wordmark span {
  margin-top: 4px;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.header-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
.header-nav a {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
  padding-block: 0.5rem;
  box-shadow: inset 0 -1px 0 0 transparent;
  transition: box-shadow var(--transition-fast), color var(--transition-fast);
}
.header-nav a:hover { color: var(--color-accent); box-shadow: inset 0 -1px 0 0 currentColor; }

.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.header-tel:hover { color: var(--color-accent); }
.header-tel .icon { font-size: 1.15em; }

.header-cta { padding: 0.6875rem 1.375rem; font-size: var(--text-xs); }

/* Hamburger — visible sous 60rem uniquement */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-inline-end: calc(-1 * var(--space-sm));
  z-index: calc(var(--z-mobile-menu) + 10);
}
.hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--color-text); border-radius: var(--radius-pill);
  transition: transform var(--transition-base), opacity var(--dur-micro) linear;
}
.hamburger.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-overlay {
  position: fixed; inset: 0;
  background: var(--scrim-overlay);
  z-index: var(--z-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base);
}
.mobile-overlay.is-active { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed; inset-block: 0; inset-inline-end: 0;
  width: min(20rem, 86vw);
  background: var(--color-bg);
  border-inline-start: var(--rule-hair) solid var(--color-border);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  z-index: var(--z-mobile-menu);
  display: flex; flex-direction: column;
  padding: calc(var(--header-height) + var(--space-lg) + env(safe-area-inset-top)) var(--space-lg) var(--space-lg);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
}
.mobile-menu.is-active { transform: translateX(0); }
.mobile-menu a {
  display: block;
  font-size: var(--text-md);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-border-soft);
}
.mobile-menu a:hover { color: var(--color-accent); }
.mobile-menu .mobile-tel {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-top: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  border: 0;
  color: var(--color-accent);
}

/* ══ HERO · H6 Photographic fold ══════════════════════════════ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(72svh, 620px);
  display: flex;
  align-items: flex-end;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-overlay { position: absolute; inset: 0; z-index: -1; background: var(--scrim-hero); }

.hero-content {
  padding-block: var(--space-3xl) var(--space-xl);
  color: var(--color-text-inv);
}
/* Le H1 porte le positionnement demande par le client (« multi-services »)
   + la ville. La tagline a ete retiree sur retour client du 29/08/2026. */
.hero-title {
  font-size: var(--text-display);
  font-weight: 600;
  color: var(--color-text-inv);
  max-width: 30ch;
  text-wrap: balance;
  text-shadow: var(--shadow-hero-text);
}
.hero-subtitle .sep { opacity: 0.5; margin-inline: 0.6em; }
.hero-subtitle {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-inv-muted);
}

/* ══ Le mot de l'artisan ══════════════════════════════════════ */
.intro { padding-block: var(--space-4xl) var(--space-3xl); }
.intro__inner { max-width: 54rem; margin-inline: auto; text-align: center; }
/* Le chiffre remplace le medaillon : il dit la meme chose qu'une icone
   generique, en apportant une information. */
.intro__years {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-accent);
}
.intro__years-label {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.intro__lede {
  margin-top: var(--space-lg);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.35;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.intro__text {
  margin-top: var(--space-md);
  margin-inline: auto;
  max-width: 54ch;
  font-size: var(--text-md);
  color: var(--color-text-light);
  text-wrap: pretty;
}

/* ══ Poles · image + listing, en colonnes alternees ═══════════
   Plus de depliants ni de fond de carte : la section annonce un domaine
   et enumere ce qu'il couvre, rien de plus. */
.pole {
  padding-block: var(--space-2xl);
  width: min(var(--container-width), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
}
.pole + .pole { padding-top: 0; }
.pole__figure { margin: 0; }
.pole__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.pole__body { display: grid; justify-items: start; gap: var(--space-md); }
/* Titre plus court que la taille de section commune : il vit dans une
   demi-colonne, et les intitules porteurs de mots-cles sont plus longs. */
.pole__body .section-title {
  margin: 0;
  font-size: clamp(1.65rem, 1.3vw + 0.95rem, 2.05rem);
}
.pole__text {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-light);
  max-width: 44ch;
  text-wrap: pretty;
}

.pole__list { margin-top: var(--space-xs); width: 100%; }
.pole__list li {
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-border);
  font-size: var(--text-md);
  color: var(--color-text-light);
}
.pole__list li:last-child { border-bottom: var(--rule-hair) solid var(--color-border); }
/* Mention credit d'impot (retour client 29/08/2026) : un filet accent, ton
   discret, meme largeur de lecture que le texte du pole. */
.pole__note {
  margin: 0;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-accent);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-accent-deep);
  max-width: 44ch;
  text-wrap: pretty;
}

/* ══ Realisations · bande sombre ══════════════════════════════ */
.gallery {
  background: var(--color-bg-dark);
  color: var(--color-text-inv);
  padding-block: var(--space-3xl) var(--space-2xl);
}
.gallery__head { margin-bottom: var(--space-xl); }
.gallery__title { color: var(--color-text-inv); }
.gallery__head .section-lede { color: var(--color-text-inv-muted); }
.gallery__grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(6rem, 9.5vw, 11.5rem);
  grid-template-areas:
    "a a b c"
    "a a b c"
    "d e e f"
    "d e e f"
    "g g h h"
    "g g h h";
}
.gallery__grid li {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-dark-2);
  border-radius: var(--radius-md);
}
.gallery__grid li:nth-child(1) { grid-area: a; }
.gallery__grid li:nth-child(2) { grid-area: b; }
.gallery__grid li:nth-child(3) { grid-area: c; }
.gallery__grid li:nth-child(4) { grid-area: d; }
.gallery__grid li:nth-child(5) { grid-area: e; }
.gallery__grid li:nth-child(6) { grid-area: f; }
.gallery__grid li:nth-child(7) { grid-area: g; }
.gallery__grid li:nth-child(8) { grid-area: h; }
.gallery__grid img { width: 100%; height: 100%; object-fit: cover; }
.gallery__foot { margin-top: var(--space-xl); }

/* ══ Depliants ════════════════════════════════════════════════
   Bouton + region plutot que <details> : les deux recettes declaratives sur
   ::details-content restaient bloquees a block-size 0 malgre un support
   annonce. Ici la hauteur est pilotee en pixels, donc mesurable. */
.acc + .acc { border-top: var(--rule-hair) solid var(--color-border); }
.acc__title { margin: 0; font: inherit; }
.acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  text-align: start;
  padding-block: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  transition: color var(--transition-fast);
}
.acc__head:hover { color: var(--color-accent); }
.acc__head::after {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--color-text-muted), var(--color-text-muted)) center/13px 1.5px no-repeat,
    linear-gradient(var(--color-text-muted), var(--color-text-muted)) center/1.5px 13px no-repeat;
  transition: transform var(--transition-base);
}
.acc.is-open .acc__head::after { transform: rotate(135deg); }

.acc__wrap { overflow: hidden; height: 0; }
.acc.is-open .acc__wrap { height: auto; }
.js-acc .acc__wrap { transition: height var(--dur-long) var(--ease-in-out); }

.acc__body {
  padding-bottom: var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-light);
}

/* ══ Avis ═════════════════════════════════════════════════════ */
.avis { padding-block: var(--space-3xl); }
.avis__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}
.avis__card {
  margin: 0;
  padding: var(--space-xl);
  background: var(--color-bg-alt);
  border: var(--rule-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  align-content: start;
  gap: var(--space-md);
}
.avis__stars { display: flex; gap: 3px; color: var(--color-accent); }
.avis__stars .icon { font-size: 1rem; fill: currentColor; }
.avis__quote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--color-text);
  text-wrap: pretty;
}
.avis__quote::before { content: "« "; }
.avis__quote::after { content: " »"; }
.avis__who { display: grid; gap: 2px; }
.avis__who b { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.avis__who span { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ══ FAQ ══════════════════════════════════════════════════════ */
.faq { padding-block: var(--space-3xl); }
.faq__list {
  max-width: 48rem;
  margin-inline: auto;
  background: var(--color-bg-alt);
  border: var(--rule-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding-inline: clamp(var(--space-md), 3vw, var(--space-xl));
}

/* ══ CTA ══════════════════════════════════════════════════════ */
.cta { padding-block: var(--space-3xl); }
.cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  text-align: center;
  padding: clamp(var(--space-2xl), 8vw, var(--space-4xl)) clamp(var(--space-lg), 6vw, var(--space-3xl));
}
.cta__bg { position: absolute; inset: 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.cta__overlay { position: absolute; inset: 0; z-index: -1; background: var(--scrim-cta); }

.cta__content { max-width: 44rem; margin-inline: auto; color: var(--color-text-inv); }
.cta__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-inv);
}
.cta__title {
  margin-top: var(--space-sm);
  font-size: var(--text-section);
  color: var(--color-text-inv);
  text-wrap: balance;
}
.cta__text {
  margin-top: var(--space-md);
  margin-inline: auto;
  max-width: 44ch;
  font-size: var(--text-md);
  color: var(--color-text-inv-muted);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-xl);
}
.cta__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-text-inv);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition-fast);
}
.cta__tel:hover { color: var(--color-accent-inv); }

/* ══ FOOTER · Ft1 Mast-headed ═════════════════════════════════ */
/* Le footer garde le bord a bord — c'est le sol de la page — mais ses angles
   hauts s'arrondissent pour rester dans la meme langue que les panneaux. */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-inv);
  padding-block: var(--space-2xl) var(--space-xl);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: var(--space-xl);
}
.footer-inner {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
/* Le logo est une illustration couleur sur fond creme : le poser tel quel sur
   la bande sombre ferait une vignette, l'inverser detruirait le dessin. Le
   footer porte donc le nom en typo — c'est le geste Ft1 (wordmark + tagline). */
.footer-wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text-inv);
}
.footer-sub {
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-inv);
}
.footer-tagline {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-inv-muted);
  max-width: 26rem;
}
/* Les deux colonnes de liens du pied de page. */
.footer-menus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-xl);
}
.footer-menu h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-inv-muted);
  margin-bottom: var(--space-xs);
}
.footer-menu li + li { margin-top: 2px; }
.footer-menu a {
  display: inline-block;
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-text-inv);
}
.footer-menu a:hover { color: var(--color-accent-inv); }

.footer-contact { font-size: var(--text-sm); line-height: 1.9; }
.footer-contact a { color: var(--color-text-inv); }
.footer-contact a:hover { color: var(--color-accent-inv); }
.footer-contact .label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-inv-muted);
  margin-bottom: var(--space-2xs);
}
.footer-socials { display: flex; gap: var(--space-md); margin-top: var(--space-sm); }
.footer-socials a {
  font-size: var(--text-sm);
  white-space: nowrap;
  color: var(--color-text-inv);
  box-shadow: inset 0 -1px 0 0 var(--color-border-inv);
}
.footer-socials a:hover { color: var(--color-accent-inv); box-shadow: inset 0 -1px 0 0 currentColor; }

.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-border-inv);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-inv-muted);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
/* Signature de l'agence et eco-badge forment un seul groupe, cale a droite :
   ce sont deux mentions de meme nature, elles se lisent ensemble. */
.footer-signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}
.footer-links a { color: var(--color-text-inv-muted); white-space: nowrap; }
.footer-links a:hover { color: var(--color-text-inv); }

/* Le SIRET quitte le pied de page : sa place legale est dans les mentions
   legales. A cet endroit, la signature de l'agence est plus utile. */
.footer-credit { display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; }
.footer-credit .icon { font-size: 1.1em; color: var(--color-accent-inv); }
.footer-credit a { color: var(--color-text-inv); box-shadow: inset 0 -1px 0 0 var(--color-border-inv); }
.footer-credit a:hover { color: var(--color-accent-inv); box-shadow: inset 0 -1px 0 0 currentColor; }

/* Pas de scroll-reveal : le fade-up sur chaque section est un anti-pattern, et
   il ferait dependre l'affichage du contenu du JS — interdit par
   PERFORMANCE.md §2. Le mouvement tient en deux gestes : soulignement de
   lien, appui de bouton. */

/* Les styles en attribut de la maquette passent en classes : le pied de page
   traverse les deux colonnes, et la zone d'intervention suit les liens. */
.footer-bottom { grid-column: 1 / -1; }
.footer-zone {
  margin-top: var(--space-md);
  color: var(--color-text-inv-muted);
}

/* Eco-badge — note d'audit + empreinte carbone.
   Il vit dans la barre basse du pied de page, a cote de la signature : c'est
   une mention de meme rang, pas un element flottant. Les quatre couleurs sont
   pilotables depuis ND Options via des variables ; les valeurs par defaut
   reprennent l'accent du theme pour rester lisibles sur le fond sombre. */
.pill {
  --pill-border: var(--color-border-inv);
  --pill-bg: var(--color-accent);
  --pill-note-text: var(--color-text-inv);
  --pill-text: var(--color-text-inv-muted);

  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 3px 0.75em 3px 3px;
  border: var(--rule-hair) solid var(--pill-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--pill-text);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.pill:hover { border-color: var(--color-accent-inv); color: var(--color-text-inv); }
.pill__note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25em;
  padding: 0.4em 0.6em;
  border-radius: var(--radius-pill);
  background: var(--pill-bg);
  color: var(--pill-note-text);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pill__carbon sub { font-size: 0.75em; vertical-align: baseline; }


/* ══ Pages interieures ════════════════════════════════════════
   Contact et pages legales n'ont pas de photo d'ouverture : le hero
   photographique est le geste de l'accueil, le repeter le banaliserait.
   L'entree se fait ici en typographie seule, sur le papier creme. */
.page-head {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-border);
}
.page-head__inner {
  display: grid;
  gap: var(--space-md);
  max-width: 48rem;
}
.page-head__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}
.page-head__title {
  font-size: var(--text-display-s);
  line-height: 1.04;
  text-wrap: balance;
}
.page-head__lede {
  font-size: var(--text-md);
  color: var(--color-text-light);
  text-wrap: pretty;
  max-width: 46rem;
}

/* Variante avec visuel : meme grammaire que le hero de l'accueil (photo
   pleine largeur, voile bas, texte inverse), mais deux fois moins haute.
   Une page interieure annonce, elle n'ouvre pas. */
.page-head--image {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(46svh, 420px);
  padding-block: 0;
  border-bottom: 0;
  color: var(--color-text-inv);
}
.page-head--image .page-head__bg { position: absolute; inset: 0; z-index: -2; }
.page-head--image .page-head__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrage haut : sur une bande courte, le bas des photos de chantier est
     l'avant-plan encombre (echafaudage, seaux), et il tombe sous le texte. */
  object-position: 50% 36%;
}
.page-head--image .page-head__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-page-head);
}
.page-head--image > .container { padding-block: var(--space-3xl) var(--space-xl); }
/* Sur photo, l'olive clair du sur-titre passe sous le seuil de contraste
   des que la pierre est claire : il repasse en creme, comme le sous-titre
   du hero. L'accent reste la couleur du sur-titre sur fond papier. */
.page-head--image .page-head__eyebrow {
  color: var(--color-text-inv);
  text-shadow: var(--shadow-hero-text);
}
.page-head--image .page-head__title {
  color: var(--color-text-inv);
  text-shadow: var(--shadow-hero-text);
}
.page-head--image .page-head__lede {
  color: var(--color-text-inv);
  text-shadow: var(--shadow-hero-text);
}

/* ══ Prose · pages legales ════════════════════════════════════
   Une seule colonne a la mesure de lecture. Les titres reprennent le
   serif d'affichage, le corps garde la sans du site. */
.prose {
  max-width: var(--measure);
  color: var(--color-text-light);
}
.prose > * + * { margin-top: var(--space-md); }
.prose h2 {
  margin-top: var(--space-xl);
  font-size: var(--text-xl);
  color: var(--color-text);
  text-wrap: balance;
}
.prose h3 {
  margin-top: var(--space-lg);
  font-size: var(--text-md);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.prose h2 + *, .prose h3 + * { margin-top: var(--space-sm); }
.prose ul, .prose ol { padding-left: 1.25em; list-style: revert; }
.prose li + li { margin-top: var(--space-2xs); }
.prose a { color: var(--color-link); box-shadow: inset 0 -1px 0 0 currentColor; }
.prose a:hover { color: var(--color-link-hover); box-shadow: inset 0 -2px 0 0 currentColor; }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose code {
  padding: 0.15em 0.4em;
  background: var(--color-bg-alt);
  border-radius: var(--radius-xs);
  font-size: 0.875em;
  color: var(--color-text);
}
.prose hr {
  margin-block: var(--space-xl);
  border: 0;
  border-top: var(--rule-hair) solid var(--color-border);
}
/* Table de definitions legales (editeur, hebergeur, SIRET...). */
.prose dl { display: grid; gap: var(--space-xs); }
.prose dt {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.prose dd { margin: 0 0 var(--space-sm); color: var(--color-text); }
/* Mention a completer avant mise en ligne : visible, pas alarmante. */
.prose .todo {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: var(--text-sm);
}

/* ══ Page contact ═════════════════════════════════════════════
   Le formulaire prend la colonne large : c'est l'action attendue.
   La colonne courte porte les coordonnees directes — appeler reste
   souvent plus rapide qu'ecrire, sur ce metier. */
.contact { padding-block: var(--space-3xl) var(--space-2xl); }
.contact__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

.contact__aside { display: grid; gap: var(--space-xl); }
.contact__card {
  padding: var(--panel-pad);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}
.contact__card h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);
}
/* Appeler reste souvent plus rapide qu'ecrire : la carte des coordonnees
   passe sur l'ancre olive pour se detacher du formulaire et de la colonne
   des etapes, qui restent sur le papier. */
.contact__card--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inv);
}
.contact__card--dark h2 { color: var(--color-text-inv); }
.contact__card--dark .contact__line { color: var(--color-text-inv); }
.contact__card--dark .contact__line .icon { color: var(--color-accent-inv); }
.contact__card--dark .contact__line b { color: var(--color-text-inv-muted); }
.contact__card--dark .contact__line a { color: var(--color-text-inv); }
.contact__card--dark .contact__line a:hover { color: var(--color-accent-inv); }
.contact__direct { display: grid; gap: var(--space-md); }
.contact__line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text);
}
.contact__line .icon { font-size: 1.35rem; color: var(--color-accent); flex: none; }
.contact__line b {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}
.contact__line a { color: var(--color-text); font-size: var(--text-md); }
.contact__line a:hover { color: var(--color-accent); }
.contact__line .tel-link { font-family: var(--font-heading); font-weight: 600; }

/* Ce qui se passe apres l'envoi : lever l'incertitude vaut mieux qu'un
   « nous vous repondrons dans les meilleurs delais ». */
.contact__steps { counter-reset: etape; display: grid; gap: var(--space-md); padding: 0; list-style: none; }
.contact__step {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--space-sm);
  align-items: start;
}
.contact__step::before {
  counter-increment: etape;
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-bg-dark);
  color: var(--color-accent-inv);
  font-size: var(--text-xs);
  font-weight: 600;
}
.contact__step > div b { display: block; color: var(--color-text); }
.contact__step > div span { font-size: var(--text-sm); color: var(--color-text-light); }

/* ══ Formulaires ══════════════════════════════════════════════
   Le markup vient de Nature Digitale Manager (nonce, honeypot, validation
   serveur, notifications). Le theme n'en reprend que l'habillage : les
   regles sont portees par .form-shell pour passer devant la feuille de
   style par defaut de l'extension. */
.form-shell .ndm-form { display: grid; gap: var(--space-lg); }
.form-shell .ndm-form-body {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-shell .ndm-form .field { display: grid; gap: var(--space-2xs); }
.form-shell .ndm-form .field--full { grid-column: 1 / -1; }
.form-shell .ndm-form .field > label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.form-shell .ndm-form .field > label .opt {
  font-weight: 400;
  color: var(--color-text-muted);
}
.form-shell .ndm-form .field input,
.form-shell .ndm-form .field select,
.form-shell .ndm-form .field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: var(--rule-hair) solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-shell .ndm-form .field textarea { resize: vertical; min-height: 8.5rem; }
.form-shell .ndm-form .field input:hover,
.form-shell .ndm-form .field select:hover,
.form-shell .ndm-form .field textarea:hover { border-color: var(--color-text-muted); }
.form-shell .ndm-form .field input:focus-visible,
.form-shell .ndm-form .field select:focus-visible,
.form-shell .ndm-form .field textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px oklch(48% 0.12 133 / 0.18);
}
.form-shell .ndm-form .field input::placeholder,
.form-shell .ndm-form .field textarea::placeholder { color: var(--color-text-muted); }
/* Le chevron du select est inline en data-URI : zero requete (PERFORMANCE.md §4). */
.form-shell .ndm-form .field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.5' 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.9rem center;
  background-size: 1.15rem;
}

/* Consentement : la case et son texte sur une seule ligne de lecture. */
.form-shell .ndm-form .field--consent {
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-sm);
}
.form-shell .ndm-form .field--consent input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  padding: 0;
  accent-color: var(--color-accent);
}
.form-shell .ndm-form .field--consent label {
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}
.form-shell .ndm-form .field--consent a { color: var(--color-link); box-shadow: inset 0 -1px 0 0 currentColor; }

.form-shell .form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}
.form-shell .form-actions .note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
/* L'extension habille son bouton d'envoi : on le ramene au bouton du site. */
.form-shell .ndm-form button[type="submit"] {
  cursor: pointer;
  color: var(--color-bg);
  background: var(--color-text);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
}
.form-shell .ndm-form button[type="submit"]:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.form-shell .ndm-form.is-submitting { opacity: 0.6; pointer-events: none; }

/* Messages d'erreur de champ et retour global, dans la palette du site. */
.form-shell .ndm-form-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-sm);
  color: oklch(48% 0.16 25);
}
/* Le champ fautif se signale aussi de lui-meme : le message seul se rate
   quand le formulaire est long. */
.form-shell .ndm-form [aria-invalid="true"] { border-color: oklch(55% 0.16 25); }
.form-shell .ndm-form [aria-invalid="true"]:focus-visible {
  border-color: oklch(48% 0.16 25);
  box-shadow: 0 0 0 3px oklch(55% 0.16 25 / 0.18);
}
.form-shell .ndm-form-feedback {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
}
.form-shell .ndm-form-feedback.is-success {
  background: var(--color-bg-dark);
  color: var(--color-text-inv);
}
.form-shell .ndm-form-feedback.is-error {
  background: oklch(94% 0.04 25);
  color: oklch(40% 0.16 25);
}
.form-shell .ndm-form-feedback.is-pending {
  background: var(--color-bg-alt);
  color: var(--color-text-light);
}


/* ══ Responsive ═══════════════════════════════════════════════ */
@media (max-width: 59.999rem) {
  .hamburger { display: flex; }
  .header-nav, .header-cta { display: none; }
  .header-tel .header-tel__number { display: none; }
  .header-tel { padding: 0.5rem; }
  .header-tel .icon { font-size: 1.4rem; }
}

/* En colonne unique, l'icone et le titre colles a gauche sous une photo
   pleine largeur manquaient d'assise : on les centre et on aere. */
@media (max-width: 59.999rem) {
  .pole { display: grid; gap: var(--space-xl); }
  .pole__body { justify-items: center; }
  .pole__body .section-title,
  .pole__text { text-align: center; }
  .pole__text { margin-inline: auto; }
}

@media (max-width: 47.999rem) {
  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(6rem, 21vw, 9rem);
    grid-template-areas:
      "a a" "a a"
      "b c" "b c"
      "e e" "e e"
      "d f" "d f"
      "g g" "g g"
      "h h" "h h";
  }
  .header-wordmark span { display: none; }
}

@media (min-width: 48rem) {
  .footer-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

@media (max-width: 47.999rem) {
  /* Une colonne : sur un telephone, deux champs cote a cote deviennent
     illisibles bien avant d'etre a l'etroit. */
  .form-shell .ndm-form-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 47.999rem) {
  /* Une colonne : sur un telephone, deux champs cote a cote deviennent
     illisibles bien avant d'etre a l'etroit. */
  .form-shell .ndm-form-body { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 60rem) {
  .avis__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-3xl); }
  .contact__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-3xl); }
  .hero { min-height: min(80svh, 720px); }

  /* Image et listing cote a cote, inverses d'un pole a l'autre. */
  .pole {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
    align-items: center;
  }
  .pole--flip .pole__figure { order: 2; }
}

@media (pointer: coarse) {
  .header-nav a, .footer-links a, .acc > summary { min-height: 44px; display: flex; align-items: center; }
  .header-nav a { display: flex; }
}

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

/* ══ Contenus WordPress (blog, pages legales) ═════════════════
   Le starter n'a pas de maquette pour ces gabarits : on garde une
   mise en page lisible, calee sur les memes tokens. */
.entry-content, .content-body, .page-content {
  max-width: var(--measure);
  margin-inline: auto;
}
.entry-content > * + *, .content-body > * + *, .page-content > * + * { margin-top: var(--space-md); }
.entry-content h2, .content-body h2, .page-content h2 { margin-top: var(--space-xl); font-size: var(--text-xl); }
.entry-content h3, .content-body h3, .page-content h3 { margin-top: var(--space-lg); font-size: var(--text-lg); }
.entry-content img, .content-body img, .page-content img { border-radius: var(--radius-md); }
.entry-content ul, .entry-content ol,
.content-body ul, .content-body ol,
.page-content ul, .page-content ol { padding-left: 1.25em; list-style: revert; }
.alignleft { float: left; margin: 0 var(--space-lg) var(--space-md) 0; }
.alignright { float: right; margin: 0 0 var(--space-md) var(--space-lg); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--text-sm); color: var(--color-text-muted); }
.section { padding: var(--section-padding); }
/* Les pages de texte n'ont pas besoin du rythme d'une landing : l'en-tete
   pose deja la respiration, un 3xl de plus creuse un trou. */
.section--tight { padding-block: var(--space-2xl); }

/* ══ Realisations · bandes defilantes ═════════════════════════
   Les photos de chantier n'ont pas toutes le meme format. Plutot que de les
   recadrer dans une grille, on fixe la hauteur de la bande et on laisse la
   largeur de chaque vignette suivre le ratio de sa photo. */

/* Sommaire des trois metiers, juste sous l'en-tete. */
.reel-jump {
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-border-soft);
}
.reel-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.reel-jump a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.5rem 1rem;
  border: var(--rule-hair) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-light);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.reel-jump a:hover {
  color: var(--color-accent-deep);
  border-color: var(--color-accent);
}
.reel-jump .icon { font-size: 1.05rem; }

.reels { padding-block: var(--space-3xl); }
.reels.panel { padding-block: var(--space-3xl); }

/* La hauteur de bande est le seul reglage : tout le reste en decoule. */
.reel { --reel-h: clamp(14rem, 26vw, 23rem); }

/* Avant l'init de Swiper, la bande est deja une rangee horizontale : pas de
   saut de mise en page, et la page reste utilisable sans JS (defilement
   natif). Swiper prend la main ensuite et passe en overflow cache.
   La specificite (0,2,0) l'emporte sur le .swiper (0,1,0) de la lib, quel
   que soit l'ordre des feuilles. */
.reel .reel__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.reel.is-ready .reel__viewport {
  overflow: hidden;
  scrollbar-width: auto;
}

/* Fondu sur les deux bords : la bande ne s'arrete plus net, elle se perd dans
   le papier. Le masque s'applique au cadre, donc aux photos comme au fond,
   quelle que soit la couleur de la section.

   Une rampe lineaire (transparent -> opaque en deux arrets) laissait une ligne
   verticale bien visible a l'endroit ou elle atteignait l'opacite pleine : la
   pente s'y arrete d'un coup, et l'oeil lit cette cassure comme un bord. Les
   arrets ci-dessous suivent une courbe en S (3t2 - 2t3), dont la pente est
   nulle aux deux extremites : plus de cassure, ni au debut ni a la fin. */
.reel__viewport {
  --reel-fade: clamp(1.5rem, 7vw, 6.5rem);
  --reel-mask: linear-gradient(
    to right,
    rgb(0 0 0 / 0)     0,
    rgb(0 0 0 / 0.043) calc(var(--reel-fade) * 0.125),
    rgb(0 0 0 / 0.156) calc(var(--reel-fade) * 0.25),
    rgb(0 0 0 / 0.316) calc(var(--reel-fade) * 0.375),
    rgb(0 0 0 / 0.5)   calc(var(--reel-fade) * 0.5),
    rgb(0 0 0 / 0.684) calc(var(--reel-fade) * 0.625),
    rgb(0 0 0 / 0.844) calc(var(--reel-fade) * 0.75),
    rgb(0 0 0 / 0.957) calc(var(--reel-fade) * 0.875),
    rgb(0 0 0 / 1)     var(--reel-fade),
    rgb(0 0 0 / 1)     calc(100% - var(--reel-fade)),
    rgb(0 0 0 / 0.957) calc(100% - var(--reel-fade) * 0.875),
    rgb(0 0 0 / 0.844) calc(100% - var(--reel-fade) * 0.75),
    rgb(0 0 0 / 0.684) calc(100% - var(--reel-fade) * 0.625),
    rgb(0 0 0 / 0.5)   calc(100% - var(--reel-fade) * 0.5),
    rgb(0 0 0 / 0.316) calc(100% - var(--reel-fade) * 0.375),
    rgb(0 0 0 / 0.156) calc(100% - var(--reel-fade) * 0.25),
    rgb(0 0 0 / 0.043) calc(100% - var(--reel-fade) * 0.125),
    rgb(0 0 0 / 0)     100%
  );
  -webkit-mask-image: var(--reel-mask);
  mask-image: var(--reel-mask);
}
.reel:not(.is-ready) .swiper-wrapper { gap: var(--space-md); }

/* Swiper impose width:100%;height:100% a ses slides, et sa feuille est chargee
   apres celle du theme : a specificite egale, c'est elle qui gagnait et toutes
   les vignettes prenaient la largeur du gabarit. D'ou le .reel devant. */
.reel .reel__slide {
  width: auto;      /* la largeur vient du ratio de la photo */
  height: auto;
  margin: 0;
}
.reel .reel__img {
  display: block;
  height: var(--reel-h);
  width: auto;
  max-width: none;  /* sinon la regle globale img{max-width:100%} ecrase le ratio */
  border-radius: var(--radius-md);
  background: var(--color-bg-sunk);
}

/* La vignette est un bouton : elle ouvre la visionneuse. Reset du bouton, la
   photo fait tout le travail visuel. */
.reel__open {
  display: block;
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-md);
}
.reel__open:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
/* Pastille loupe, en retrait : elle ne se montre qu'a l'approche. */
.reel__zoom {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: oklch(18% 0.020 130 / 0.62);
  color: var(--color-text-inv);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.reel__zoom .icon { font-size: 1.2rem; }
.reel__open:hover .reel__zoom,
.reel__open:focus-visible .reel__zoom { opacity: 1; transform: none; }

/* Fleches : discretes, sous la bande, alignees a gauche comme l'en-tete. */
.reel__nav {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}
.reel__btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: var(--rule-hair) solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.reel__btn .icon { font-size: 1.25rem; }
.reel__btn[data-reel-prev] .icon { transform: rotate(180deg); }
.reel__btn:hover {
  background: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
  color: var(--color-text-inv);
}
.reel__btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.panel--dark .reel__btn {
  border-color: var(--color-border-inv);
  color: var(--color-text-inv);
}
.panel--dark .reel__btn:hover {
  background: var(--color-text-inv);
  border-color: var(--color-text-inv);
  color: var(--color-bg-dark);
}

/* Sur un ecran tactile, on glisse : les fleches ne servent qu'a la souris
   et au clavier, et elles prennent de la place sur un petit ecran. */
@media (pointer: coarse) and (max-width: 47.999rem) {
  .reel__nav { display: none; }
}

/* ══ Visionneuse ══════════════════════════════════════════════
   <dialog> natif : piege de focus, Echap et fond modal sont gratuits.
   On ne garde du navigateur que le comportement, pas l'habillage. */
.lb {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-inv);
  overflow: hidden;
}
/* Fond plein, sans transparence : a 4 % la page creme se devinait encore
   derriere la photo, et ce fantome salissait la lecture. Le flou d'arriere-plan
   ne servait plus a rien une fois le fond opaque. */
.lb::backdrop { background: oklch(13% 0.018 130); }

.lb__inner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(0.875rem, 2.5vw, 2.25rem);
}

/* La figure occupe toute la boite : une rangee souple pour la photo, une
   rangee au plus juste pour la legende. La photo prend donc tout ce qui
   reste, au lieu de flotter au milieu d'un grand vide. */
.lb__fig {
  display: grid;
  /* Deux rangees au plus juste, groupees et centrees : la legende reste
     collee sous la photo au lieu de deriver en bas de l'ecran. La hauteur de
     la photo est bornee plus bas, en unites de fenetre. */
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: var(--space-md);
  width: 100%;
  height: 100%;
  margin: 0;
}
.lb__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Un pourcentage ne se resout pas contre une rangee de grille souple : la
     photo debordait alors sur sa legende. La borne est donc exprimee en unites
     de fenetre, moins la place des marges, de la legende et de l'ecart. */
  max-height: calc(100svh - 9.5rem);
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--color-bg-dark-2);
  /* Une ombre douce detache la photo du fond, sinon elle flotte. */
  box-shadow: 0 24px 60px oklch(8% 0.01 130 / 0.55);
}
.lb__cap {
  display: grid;
  justify-items: center;
  gap: var(--space-3xs);
  text-align: center;
  max-width: 46rem;
}
.lb__cap b {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
}
.lb__cap span { font-size: var(--text-sm); color: var(--color-text-inv-muted); }
.lb__rang { letter-spacing: 0.08em; }

.lb__btn {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: var(--rule-hair) solid var(--color-border-inv);
  border-radius: 50%;
  background: oklch(20% 0.020 130 / 0.72);
  color: var(--color-text-inv);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.lb__btn .icon { font-size: 1.35rem; }
.lb__btn:hover {
  background: var(--color-text-inv);
  border-color: var(--color-text-inv);
  color: var(--color-bg-dark);
}
.lb__btn--prev .icon { transform: rotate(180deg); }

/* Les commandes flottent au-dessus de la photo, aux bords de l'ecran : la
   photo garde ainsi toute la largeur pour elle. */
.lb__btn--close,
.lb__btn--prev,
.lb__btn--next { position: absolute; z-index: 2; }
.lb__btn--close {
  top: clamp(0.875rem, 2.5vw, 2.25rem);
  right: clamp(0.875rem, 2.5vw, 2.25rem);
}
.lb__btn--prev,
.lb__btn--next { top: 50%; translate: 0 -50%; }
.lb__btn--prev { left: clamp(0.5rem, 1.6vw, 1.5rem); }
.lb__btn--next { right: clamp(0.5rem, 1.6vw, 1.5rem); }

/* Sur petit ecran, des fleches posees sur la photo en mangeraient un bon
   dixieme : elles passent sous la legende, ou la place ne manque pas. */
@media (max-width: 47.999rem) {
  .lb__img { max-height: calc(100svh - 13rem); }
  .lb__btn { width: 2.75rem; height: 2.75rem; }
  .lb__btn .icon { font-size: 1.15rem; }
  .lb__cap b { font-size: var(--text-md); }
  .lb__fig { padding-bottom: 4.5rem; }
  .lb__btn--prev,
  .lb__btn--next {
    top: auto;
    bottom: clamp(1rem, 4vw, 2rem);
    translate: 0 0;
  }
  .lb__btn--prev { left: 50%; margin-left: -3.75rem; }
  .lb__btn--next { right: 50%; margin-right: -3.75rem; }
}
}