/* ============================================================
   RISAER — vitrine (charte maquette validée « réseau par les airs »)
   Fonts auto-hébergées · CSP-safe (self) · 5 panneaux + pages détail
   ============================================================ */

/* ---------- Fonts (auto-hébergées) ---------- */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/dmsans-300.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/dmsans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/dmsans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/dmmono-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/dmmono-500.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/playfair-latin.woff2') format('woff2'); }

:root {
  --ink: #0a0c0a;
  --paper: #f4f3ee;
  --green: #2d8a5f;
  --green-line: #6fcf97;
  --c-blue: #5bb8f5;
  --c-green: #6fcf97;
  --c-amber: #f0c060;
  --c-violet: #c09af0;
  --nav-h: 72px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============ NAV ============ */
/* `:not(.footer-nav)` IMPÉRATIF : le menu du pied de page est un <nav class="footer-nav">.
   Sans l'exclusion, il hériterait de `position: fixed; top: 0` et s'épinglerait en
   haut de page (bug « liens footer dans l'encart du haut »). */
nav:not(.footer-nav) {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h); z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: rgba(10, 12, 10, 0.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.logo {
  font-family: "Playfair Display", serif; font-weight: 700;
  font-size: 26px; letter-spacing: 0.5px;
  color: var(--paper); text-decoration: none;
}
.logo span { color: var(--green-line); }
.nav-right { display: flex; align-items: center; gap: 34px; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a {
  position: relative; color: rgba(244, 243, 238, 0.72);
  text-decoration: none; font-size: 15.5px; font-weight: 500;
  letter-spacing: 0.3px; padding: 4px 0; transition: color 0.25s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  height: 2px; width: 0; background: var(--green-line);
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
/* Menu à six liens (FAQ-01) : sur écran moyen, espacements resserrés ; sous
   860 px le bouton « Nous contacter » s'efface (le lien « Contact » reste). */
@media (min-width: 681px) and (max-width: 1000px) {
  .nav-right { gap: 18px; }
  .nav-links { gap: 16px; }
}
@media (min-width: 681px) and (max-width: 860px) {
  .nav-right .cta { display: none; }
}

.cta {
  display: inline-flex; align-items: center;
  background: var(--green); color: #fff;
  font-size: 14px; font-weight: 500; letter-spacing: 0.4px;
  padding: 11px 22px; border: none; border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.cta:hover { background: #34a06f; transform: translateY(-1px); }

/* ============ PAGES INTÉRIEURES : footer garanti EN BAS ============
   Layout colonne : la zone de contenu pousse le footer en bas de page.
   Évite tout cas où le footer remonterait en haut (robustesse). N'affecte
   PAS la home (body.is-home), qui garde son conteneur scroll-snap. */
body:not(.is-home) { display: flex; flex-direction: column; min-height: 100vh; }
body:not(.is-home) > main { flex: 1 0 auto; }
/* margin-top:auto pousse le footer tout en bas même quand le contenu est court
   (cas de la page contact qui n'a pas de <main> qui grandit). */
body:not(.is-home) > .site-footer { margin-top: auto; flex-shrink: 0; }

/* Animation d'entrée : le contenu de la page « arrive » (fade + léger slide-up)
   au chargement. CSS pur (CSP-safe). Respecte prefers-reduced-motion. */
@keyframes risaerPageIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body:not(.is-home) main.detail-page,
body:not(.is-home) .contact-hero,
body:not(.is-home) .contact-wrap,
body:not(.is-home) .contact-merci-wrap {
  animation: risaerPageIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.is-home) main.detail-page,
  body:not(.is-home) .contact-hero,
  body:not(.is-home) .contact-wrap,
  body:not(.is-home) .contact-merci-wrap { animation: none; }
}

/* ============ HOME : conteneur scroll-snap ============ */
body.is-home { height: 100vh; overflow: hidden; }
main.snap { scroll-snap-type: y mandatory; height: 100vh; overflow-y: scroll; }
main.snap::-webkit-scrollbar { width: 0; }

/* ============ PANNEAU ============ */
.panel {
  position: relative; height: 100vh; scroll-snap-align: start;
  display: flex; align-items: flex-end; overflow: hidden;
}
.photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.s1 .photo { background-image:
  linear-gradient(to top, rgba(7,12,24,0.80) 0%, rgba(16,38,72,0.32) 52%, rgba(22,54,96,0.22) 100%),
  url('../img/industrie.jpg'); }
.s2 .photo { background-image:
  linear-gradient(to top, rgba(6,16,11,0.80) 0%, rgba(16,52,34,0.34) 52%, rgba(22,70,46,0.24) 100%),
  url('../img/collectivites.jpg'); }
.s3 .photo { background-image:
  linear-gradient(to top, rgba(14,11,6,0.80) 0%, rgba(58,48,20,0.36) 52%, rgba(80,66,26,0.24) 100%),
  url('../img/industrie.jpg'); }
.s4 .photo { background-image:
  linear-gradient(to top, rgba(10,9,18,0.80) 0%, rgba(36,28,78,0.38) 52%, rgba(52,42,108,0.26) 100%),
  url('../img/methanisation.jpg'); }
.s5 .photo { background-image:
  linear-gradient(to top, rgba(6,16,11,0.82) 0%, rgba(16,52,34,0.36) 52%, rgba(22,70,46,0.24) 100%),
  url('../img/contact.jpg'); }

.scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Voile assombri réduit de 40 % (opacités × 0.60) pour laisser ressortir la photo. */
  background: linear-gradient(to top,
    rgba(6, 8, 10, 0.55) 0%, rgba(6, 8, 10, 0.43) 22%,
    rgba(6, 8, 10, 0.18) 52%, rgba(6, 8, 10, 0.06) 78%, rgba(6, 8, 10, 0.11) 100%);
}
.grain {
  position: absolute; inset: -50%; z-index: 2;
  background-image: var(--grain);
  opacity: 0.06; pointer-events: none; mix-blend-mode: overlay;
  animation: grainShift 0.6s steps(2) infinite;
}
@keyframes grainShift { 0% { transform: translate(0, 0); } 100% { transform: translate(-4px, 3px); } }

.ph-tag {
  position: absolute; top: calc(var(--nav-h) + 22px); left: 32px; z-index: 3;
  font-family: "DM Mono", monospace; font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.14); padding: 5px 9px;
}

.content { position: relative; z-index: 4; padding: 0 32px 64px; max-width: 880px; }
.label {
  font-family: "DM Mono", monospace; font-weight: 500; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase; margin-bottom: 22px; display: inline-block;
}
.s1 .label { color: var(--c-blue); }
.s2 .label { color: var(--c-green); }
.s3 .label { color: var(--c-amber); }
.s4 .label { color: var(--c-violet); }
.s5 .label { color: var(--c-green); }

.panel-title {
  font-family: "Playfair Display", serif; font-weight: 700;
  font-size: clamp(40px, 6vw, 82px); line-height: 1.02; letter-spacing: -0.5px;
  color: #fff; text-wrap: balance; margin-bottom: 20px;
}
/* Libellé inclus dans le H1 du panneau 1 (SEO-01, invariant 3) : rendu identique
   à l'ancien <span class="label"> placé avant le titre. Bloc sur sa propre ligne ;
   line-height normal (valeur héritée avant, hors H1) et décalage de 4px qui
   reproduit la position de la ligne d'origine (strut 16px aligné sur la ligne de base). */
.panel-title .label {
  display: block; line-height: normal; margin-top: 4px;
}

/* Texte masqué visuellement mais lisible par les robots et les lecteurs d'écran
   (textes d'ancre des liens vers les axes, SEO-01 invariant 4). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.panel-lead {
  font-size: clamp(16px, 1.7vw, 21px); font-weight: 300; line-height: 1.5;
  color: rgba(244, 243, 238, 0.92); max-width: 60ch; margin-bottom: 18px;
}
.panel-sub {
  font-size: clamp(13px, 1.2vw, 15px); font-weight: 400; letter-spacing: 0.4px;
  text-transform: uppercase; color: rgba(244, 243, 238, 0.62);
}
.panel-sub .dot { opacity: 0.4; margin: 0 8px; }
.panel-cta { margin-top: 26px; }

.go {
  position: absolute; z-index: 6; right: 32px; bottom: 64px;
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.go svg { width: 18px; height: 18px; transition: transform 0.3s ease; }
.s1 .go:hover { border-color: var(--c-blue); }
.s2 .go:hover { border-color: var(--c-green); }
.s3 .go:hover { border-color: var(--c-amber); }
.s4 .go:hover { border-color: var(--c-violet); }
.go:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); }
.go:hover svg { transform: translate(2px, -2px); }

/* ============ INDICATEUR DE SCROLL ============ */
.scroll-hint {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  transition: opacity 0.5s ease;
}
.scroll-hint.hide { opacity: 0; pointer-events: none; }
.scroll-hint .track { width: 1px; height: 46px; background: rgba(255, 255, 255, 0.18); position: relative; overflow: hidden; }
.scroll-hint .track::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 14px;
  background: var(--green-line); animation: trickle 1.9s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes trickle { 0% { transform: translateY(-16px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }
.scroll-hint .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green-line); animation: pulse 1.9s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
.scroll-hint .word { font-family: "DM Mono", monospace; font-size: 9.5px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }

.dots { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 14px; }
.dots button { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; padding: 0; cursor: pointer; transition: all 0.3s ease; }
.dots button.on { background: var(--green-line); border-color: var(--green-line); transform: scale(1.2); }

/* ============ PANNEAU — image éditable (Lot B) ============
   Quand panel.image est fourni (BDD), le template rend un <img class="photo-img">
   au lieu de la div .photo (background-image CSS).
   On copie exactement le positionnement absolu inset:0 de .photo.
   L'image remplit son slot sans distorsion grâce à object-fit: cover.
   Aucun style inline : 100 % CSP-safe (style-src 'self').
   ============================================================ */
.photo-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============ SECTIONS PHOTO — pages métier (Lot B) ============
   Deux colonnes côte à côte (flex), ratio image fixe + object-fit cover.
   Responsive : bascule en colonne unique sous 680 px.
   ============================================================== */
.section-text {
  margin-bottom: 32px;
}

.section-photo {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 40px;
}

/* Photo à droite : on inverse l'ordre des colonnes */
.section-photo--right {
  flex-direction: row-reverse;
}

.section-photo__img-col {
  flex: 0 0 320px;
  /* Slot à ratio fixe 4/3 — remplit de haut en bas avec object-fit */
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.section-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.section-photo__text-col {
  flex: 1;
  min-width: 0;
}

@media (max-width: 680px) {
  .section-photo,
  .section-photo--right {
    flex-direction: column;
    gap: 20px;
  }

  .section-photo__img-col {
    flex: none;
    width: 100%;
  }
}

/* ============ PAGES DÉTAIL ============ */
main.doc { min-height: 100vh; padding: calc(var(--nav-h) + 72px) 32px 96px; }

/* Lot D — largeur élargie : ~1120px pour le conteneur, ~80ch pour les textes
   (avant Lot D : 760px / 62ch / 60ch — retour client : texte sur 20-30 % écran grand).
   Les max-width plafonnent naturellement sous la largeur viewport → pas de scroll horizontal. */
.doc-inner { max-width: 1120px; margin: 0 auto; --accent: var(--green-line); }
.accent-collectivites .doc-inner { --accent: var(--c-green); }
.accent-isdnd .doc-inner { --accent: var(--c-amber); }
.accent-methanisation .doc-inner { --accent: var(--c-violet); }
.back { display: inline-block; margin-bottom: 28px; color: rgba(244,243,238,0.6); text-decoration: none; font-size: 13.5px; transition: color 0.2s ease; }
.back:hover { color: #fff; }
.doc-inner .label { color: var(--accent); }
.doc-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.5px; color: #fff; margin-bottom: 22px; text-wrap: balance; }
.doc-lead { font-size: clamp(17px, 1.7vw, 21px); color: rgba(244, 243, 238, 0.88); line-height: 1.55; margin-bottom: 28px; max-width: 80ch; }
.doc-text { font-size: 16px; line-height: 1.65; color: rgba(244, 243, 238, 0.78); max-width: 80ch; margin-bottom: 22px; }
.doc-text--muted { color: rgba(244, 243, 238, 0.50); }
.doc-text + .doc-h2 { margin-top: 30px; }
.doc-h2 { font-family: "DM Sans", sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin: 38px 0 14px; }
.doc-list { list-style: none; }
.doc-list li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 16px; color: rgba(244, 243, 238, 0.88); line-height: 1.5; }
.doc-list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.doc-list li strong { font-weight: 500; color: #fff; }
main.doc .cta { margin-top: 48px; }

/* Pages d'erreur (ERR-01) : bouton d'accueil et lien de contact côte à côte */
.error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
main.doc .error-actions .cta { margin-top: 0; }

/* Lien inline dans les pages doc (politique, plan du site…) */
.doc-link { color: var(--green-line); text-decoration: none; border-bottom: 1px solid rgba(111, 207, 151, 0.30); transition: border-color 0.2s ease, color 0.2s ease; }
.doc-link:hover { color: #fff; border-color: #fff; }

/* Placeholder légal — repérage visuel des zones [À COMPLÉTER : …]
   (fond discret sans gêner la lisibilité, retire l'apparence mark navigateur) */
mark.placeholder {
  background: rgba(240, 192, 96, 0.18);
  color: var(--c-amber);
  border-radius: 2px;
  padding: 0 3px;
  font-style: italic;
}

/* Sections photo — élargissement cohérent avec doc-inner (Lot D) */
.section-photo__text-col { flex: 1; min-width: 0; max-width: 80ch; }
.section-text { margin-bottom: 32px; max-width: 80ch; }

/* ============ RESPONSIVE ============ */
@media (max-width: 680px) {
  nav:not(.footer-nav) { padding: 0 18px; }
  .nav-links { display: none; }
  .content { padding: 0 18px 54px; }
  .go, .ph-tag { right: 18px; }
  .ph-tag { left: 18px; }
  .dots { display: none; }
  main.doc { padding: calc(var(--nav-h) + 48px) 18px 72px; }
}

/* ============ PAGE CONTACT ============ */
main.contact-page { min-height: 100vh; padding: calc(var(--nav-h) + 72px) 32px 96px; }
.contact-inner { max-width: 600px; margin: 0 auto; }
.contact-inner .label { color: var(--c-green); }
.contact-inner .doc-title { font-family: "Playfair Display", serif; font-weight: 700;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.5px;
  color: #fff; margin-bottom: 16px; text-wrap: balance; }
.contact-inner .doc-lead { font-size: clamp(16px, 1.5vw, 19px); color: rgba(244,243,238,0.82);
  line-height: 1.55; margin-bottom: 40px; }

/* Formulaire */
.contact-form .form-group { margin-bottom: 22px; }
.contact-form label { display: block; margin-bottom: 6px; font-size: 13px;
  font-weight: 500; letter-spacing: 0.4px; color: rgba(244,243,238,0.72); text-transform: uppercase; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14); color: var(--paper);
  font-family: "DM Sans", sans-serif; font-size: 15px; font-weight: 300;
  padding: 12px 14px; border-radius: 0; outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--green-line); background: rgba(255,255,255,0.08); }
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form .help { font-size: 12px; color: rgba(244,243,238,0.44); margin-top: 4px; }
.contact-form .errors { margin-top: 4px; }
.contact-form .errors li { font-size: 13px; color: #f88; list-style: none; }
.contact-form button[type="submit"] { margin-top: 12px; width: 100%; }

/* Page merci */
.merci-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.merci-inner .doc-title { margin-bottom: 18px; }
.merci-inner .doc-lead { margin-bottom: 36px; }

@media (max-width: 680px) {
  main.contact-page { padding: calc(var(--nav-h) + 48px) 18px 72px; }
}

/* Honeypot anti-spam : masqué par CSS EXTERNE (CSP-safe). Le style inline du Core
   (ContactFormType) serait bloqué par style-src 'self' en prod → champ visible →
   faux positifs anti-spam. Cf. retex.md B7. Sélecteurs robustes (indépendants du préfixe form). */
input[name$="[website]"],
label[for$="_website"] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============ PANNEAUX CLIQUABLES (Lot D) ============
   Overlay "stretched link" : couvre TOUT le panneau, y compris la zone de texte
   (retour terrain : on doit pouvoir rejoindre la page en cliquant n'importe où,
   pas seulement sur la flèche). L'overlay passe donc AU-DESSUS de .content (4) :
   z-index 5. Les éléments interactifs qui doivent rester cliquables séparément
   sont remontés au-dessus de l'overlay : .go (6) et .panel-legal (7).
   Le texte de .content reste lisible (overlay transparent) mais n'est plus
   sélectionnable — compromis assumé pour une home immersive.
   cursor:pointer sur .panel--clickable signale l'affordance.
   ======================================================= */
.panel--clickable { cursor: pointer; }

.panel-link {
  position: absolute;
  inset: 0;
  z-index: 5;         /* au-dessus de .content (4) → toute la section est cliquable */
  display: block;
  text-decoration: none;
}

/* .panel-legal (7) et .go (6) repassent au-dessus de l'overlay (5) pour rester
   cliquables/focusables séparément (le contact a aussi le CTA, même cible). */

/* ============ LIENS LÉGAUX — panneau s5 (Lot D) ============
   Affichés en bas du panneau Contact, discrets, au-dessus de l'overlay. */
.panel-legal {
  position: absolute;
  bottom: 20px;
  right: 32px;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(244, 243, 238, 0.40);
  font-family: "DM Mono", monospace;
  letter-spacing: 0.4px;
}
.panel-legal a {
  color: rgba(244, 243, 238, 0.45);
  text-decoration: none;
  transition: color 0.2s ease;
}
.panel-legal a:hover { color: rgba(244, 243, 238, 0.85); }
.panel-legal-sep { opacity: 0.35; }
/* Mention d'identité légale : ligne propre sous les liens, alignée à droite. */
.panel-legal-id {
  flex-basis: 100%;
  text-align: right;
  font-size: 10.5px;
  letter-spacing: 0.2px;
  color: rgba(244, 243, 238, 0.28);
}
.panel-legal-copy { color: rgba(244, 243, 238, 0.30); }

@media (max-width: 680px) {
  .panel-legal { right: 18px; left: auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; font-size: 11px; }
}

/* ============================================================
   CONTACT V2 — GABARIT TOPBAR + HERO + 2 COLONNES (Lot E4)
   Accent violet (#c09af0) · CSP-safe · Responsive 820px
   ============================================================ */

/* Accent violet pour la page contact (variable --detail-accent) */
.accent-contact { --detail-accent: var(--c-violet); }

/* ── Hero Contact 34vh ───────────────────────────────────────────────
   Photo : contact.jpg en background-image CSS (pas d'image BDD ici).
   Scrim via ::before · Grain via .contact-grain · zéro style inline. */
.contact-hero {
  position: relative;
  height: 34vh;
  min-height: 280px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* Slot : contient le fond photo + overlays */
.contact-hero__slot {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to top, rgba(10,9,18,0.80) 0%, rgba(36,28,78,0.36) 55%, rgba(52,42,108,0.24) 100%),
    url('../img/contact.jpg');
  background-size: cover;
  background-position: center;
}

/* Scrim de lisibilité — z-index 1 : au-dessus de l'image BDD (0), sous le contenu (4),
   comme .detail-hero__slot::before des pages métier */
.contact-hero__slot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(6, 8, 10, 0.95) 0%,
    rgba(6, 8, 10, 0.60) 35%,
    rgba(6, 8, 10, 0.15) 75%,
    rgba(6, 8, 10, 0.25) 100%
  );
}

/* Grain CSS (réutilise la variable --grain définie en :root) */
.contact-grain {
  position: absolute;
  inset: -50%;
  background-image: var(--grain);
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Image BDD hero Contact (Lot K) — <img> + object-fit remplace le fond CSS quand définie.
   z-index 0 : sous le scrim (::before, z-index 1) et sous .contact-hero__content (4).
   La règle background-image du slot reste active quand l'image est absente (repli CSS). */
.contact-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

/* Contenu du hero (label + h1) */
.contact-hero__content {
  position: relative;
  z-index: 4;
  padding: 0 32px 34px;
  max-width: 880px;
}

/* Label "04 — Contact" */
.contact-hero__label {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-violet);
  display: inline-block;
  margin-bottom: 16px;
}

/* H1 du hero */
.contact-hero h1 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.5px;
  color: #fff;
  text-wrap: balance;
}

/* ── Layout 2 colonnes ───────────────────────────────────────────────
   Gauche (0.85fr) : intro + coords + promesse
   Droite (1.15fr) : formulaire */
.contact-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 64px 32px 96px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}

/* ── Colonne gauche ──────────────────────────────────────────────────*/

/* Paragraphe introductif */
.contact-lede {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(244, 243, 238, 0.9);
  margin-bottom: 36px;
}

/* Groupe de coordonnées */
.contact-coords {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Une coordonnée (label + valeur) */
.contact-coord {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Clé — mono, majuscules, violet */
.contact-coord__k {
  font-family: "DM Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--c-violet);
}

/* Valeur */
.contact-coord__v {
  font-size: 16px;
  color: rgba(244, 243, 238, 0.82);
}

/* Encadré promesse "Diagnostic gratuit" */
.contact-promise {
  margin-top: 36px;
  border: 1px solid rgba(192, 154, 240, 0.3);
  border-left-width: 3px;
  padding: 16px 18px;
  background: rgba(192, 154, 240, 0.05);
}

/* Titre de la promesse */
.contact-promise strong {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-violet);
  margin-bottom: 5px;
}

/* Corps de la promesse */
.contact-promise p {
  margin: 0;
  font-size: 14px;
  color: rgba(244, 243, 238, 0.78);
}

/* ── Formulaire ──────────────────────────────────────────────────────*/

/* Conteneur form */
.contact-form-v2 {
  display: grid;
  gap: 20px;
}

/* Ligne 2 colonnes (nom + organisation) */
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Champ individuel */
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Label du champ */
.contact-field label {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(244, 243, 238, 0.6);
  display: block;
}

/* Inputs et textarea */
.contact-field input,
.contact-field textarea {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--paper);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 300;
  padding: 12px 14px;
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  width: 100%;
}

/* Focus : accent violet */
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--c-violet);
  background: rgba(192, 154, 240, 0.05);
}

/* Textarea */
.contact-field textarea {
  resize: vertical;
  min-height: 120px;
}

/* Erreurs de validation */
.contact-field ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-field ul li {
  font-size: 12.5px;
  color: #e98c8c;
}

/* Aide sous un champ (captcha, SOCLE-06) : petit, atténué, comme les erreurs
   en taille ; l'écart de 8 px au champ vient du gap du conteneur */
.contact-field .help-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(244, 243, 238, 0.5);
}

/* Bouton d'envoi et lien "Retour à l'accueil" (page merci) */
.contact-submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  font-family: "DM Sans", sans-serif;
  letter-spacing: 0.3px;
  padding: 15px 28px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.contact-submit:hover {
  background: #34a06f;
  transform: translateY(-2px);
}
.contact-submit svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}
.contact-submit:hover svg {
  transform: translateX(4px);
}

/* ── Page merci : encadré succès ─────────────────────────────────────*/

/* Centrage de l'encadré sous le hero */
.contact-merci-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}

/* Encadré vert succès */
.contact-success {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--green-line);
  background: rgba(111, 207, 151, 0.06);
  padding: 36px;
  max-width: 600px;
}

/* Badge coche */
.contact-success__badge {
  width: 46px;
  height: 46px;
  border: 1px solid var(--green-line);
  color: var(--green-line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-success__badge svg {
  width: 22px;
  height: 22px;
}

/* Titre de confirmation */
.contact-success h2 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 24px;
  color: #fff;
}

/* Corps de confirmation */
.contact-success p {
  font-size: 15px;
  color: rgba(244, 243, 238, 0.78);
  margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────*/
@media (max-width: 820px) {
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 22px 72px;
  }
  .contact-row {
    grid-template-columns: 1fr;
  }
  .contact-hero__content {
    padding: 0 18px 28px;
  }
  .contact-merci-wrap {
    padding: 48px 22px 72px;
  }
}

/* ============================================================
   GABARIT RICHE — PAGES MÉTIER (Lot E3)
   topbar · hero 40vh · article · alert · grille · cta
   CSP-safe : zéro style inline — hero et grille en <img> + object-fit.
   ============================================================ */

/* ── Variables d'accent par page ─────────────────────────────────────
   Collectivités = bleu, ISDND = ambre, Méthanisation = vert.
   La variable --detail-accent est posée sur le <body> via la classe. */
.accent-collectivites  { --detail-accent: var(--c-blue); }
.accent-isdnd          { --detail-accent: var(--c-amber); }
.accent-methanisation  { --detail-accent: var(--c-green); }

/* ── Topbar ──────────────────────────────────────────────────────────
   Grille 3 colonnes : ← Retour | crumb centré | logo.
   sticky pour rester visible au défilement de la page. */
.detail-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 32px;
  background: rgba(10, 12, 10, 0.6);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Lien « ← Retour » */
.detail-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(244, 243, 238, 0.78);
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.25s ease;
}
.detail-back svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}
.detail-back:hover { color: #fff; }
.detail-back:hover svg { transform: translateX(-3px); }

/* Crumb centré — mono, lettre-espacement, couleur accent */
.detail-crumb {
  justify-self: center;
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--detail-accent, var(--c-green));
}

/* Logo à droite */
.detail-topbar-logo {
  justify-self: end;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--paper);
  text-decoration: none;
}
.detail-topbar-logo span { color: var(--green-line); }

/* ── Hero 40vh ───────────────────────────────────────────────────────
   Slot dimensionné en CSS ; la photo est un <img> (CSP-safe).
   Le scrim (dégradé de lisibilité) et le grain sont en ::before/::after
   et dans une div dédiée — zéro style inline. */
.detail-hero {
  position: relative;
  height: 40vh;
  min-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* Slot qui contient l'image et les overlays */
.detail-hero__slot {
  position: absolute;
  inset: 0;
}

/* Photo en <img> + object-fit:cover — conversion CSP vs background-image inline */
.detail-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Scrim (dégradé de lisibilité) — pseudo-élément, aucun style inline */
.detail-hero__slot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(6, 8, 10, 0.95) 0%,
    rgba(6, 8, 10, 0.60) 35%,
    rgba(6, 8, 10, 0.15) 75%,
    rgba(6, 8, 10, 0.25) 100%
  );
}

/* Grain — div CSS via la variable --grain */
.detail-grain {
  position: absolute;
  inset: -50%;
  z-index: 2;
  background-image: var(--grain);
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Étiquette « visuel à venir » — visible si pas d'image BDD */
.detail-ph-tag {
  position: absolute;
  top: 20px;
  left: 32px;
  z-index: 3;
  font-family: "DM Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 5px 9px;
}

/* Contenu positionné en bas à gauche du hero */
.detail-hero__content {
  position: relative;
  z-index: 4;
  padding: 0 32px 38px;
  max-width: 880px;
}

/* Label (ex: "01 — Collectivités") — mono, couleur accent */
.detail-hero__label {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--detail-accent, var(--c-green));
  display: inline-block;
  margin-bottom: 16px;
}

/* H1 du hero */
.detail-hero h1 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(34px, 5.5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.5px;
  color: #fff;
  text-wrap: balance;
}

/* ── Conteneur principal de la page détail ───────────────────────── */
.detail-page { min-height: 100vh; }

/* ── Article — corps de page ─────────────────────────────────────────
   max-width 720px centré, padding vertical généreux. */
.detail-article {
  /* TYPO-01 (2026-10-25) : colonne +15 % (720 → 828 px) et interligne unique du
     texte courant (chapeau, paragraphes, encadré, « Pour aller plus loin »).
     TYPO-02 : texte courant +1 px (au lieu de +2 pt, jugé trop grand). */
  --detail-leading: 1.7;
  max-width: 828px;
  margin: 0 auto;
  padding: 72px 32px 40px;
}

/* Lede — chapeau introductif, taille supérieure */
.detail-lede {
  font-size: calc(20px + 1px);
  font-weight: 300;
  line-height: var(--detail-leading);
  color: rgba(244, 243, 238, 0.9);
  margin-bottom: 40px;
}

/* H2 des blocs de contenu */
.detail-article h2 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  color: #fff;
  margin: 48px 0 18px;
  letter-spacing: -0.3px;
}

/* Paragraphes du corps */
.detail-article p {
  font-size: calc(16.5px + 1px);
  font-weight: 300;
  line-height: var(--detail-leading);
  color: rgba(244, 243, 238, 0.76);
  margin-bottom: 18px;
}
.detail-article p strong { font-weight: 500; color: var(--paper); }

/* ── Encadré d'alerte réglementaire ─────────────────────────────────
   Bordure gauche épaisse accent vert, fond légèrement teinté. */
.detail-alert {
  border: 1px solid var(--green-line);
  border-left-width: 3px;
  background: rgba(111, 207, 151, 0.06);
  padding: 20px 22px;
  margin: 34px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* Icône ⚠ */
.detail-alert__ic {
  flex: none;
  color: var(--green-line);
  font-size: 18px;
  line-height: 1.3;
}

/* Titre de l'alerte — mono, majuscules, accent vert */
.detail-alert__txt strong {
  display: block;
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green-line);
  margin-bottom: 6px;
}

/* Corps de l'alerte */
.detail-alert__txt p {
  margin: 0;
  font-size: calc(15px + 1px);
  line-height: var(--detail-leading);
  color: rgba(244, 243, 238, 0.82);
}

/* ── Grille 2 photos 4:3 ─────────────────────────────────────────────
   Images en <img> + object-fit:cover — conversion CSP vs background-image inline.
   Superposition d'un scrim via ::after sur chaque cellule. */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 36px 0;
}

/* Cellule : slot dimensionné par aspect-ratio */
.detail-grid__cell {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Scrim léger sur les cellules (allégé — retour terrain : photos trop sombres) */
.detail-grid__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 12, 20, 0.18), rgba(6, 12, 20, 0.02));
  z-index: 1;
}

/* Photo en <img> + object-fit:cover (léger gain de luminosité pour éclaircir) */
.detail-grid__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(1.08);
}

/* ── CTA « Demander un diagnostic gratuit » ──────────────────────────
   Bouton vert, pleine largeur de clic, flèche animée au hover. */
.detail-cta-wrap {
  max-width: 720px;
  margin: 8px auto 96px;
  padding: 0 32px;
}

.detail-diag-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 15px 26px;
  text-decoration: none;
  border: none;
  border-radius: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}
.detail-diag-cta:hover { background: #34a06f; transform: translateY(-2px); }
.detail-diag-cta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}
.detail-diag-cta:hover svg { transform: translateX(4px); }

/* ── Pour aller plus loin — liens contextuels des pages d'axe (SEO-01) ──
   Trait de séparation discret, liens soulignés à l'accent vert de la charte. */
.detail-further {
  margin-top: 48px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.detail-further__list { list-style: none; margin: 0; padding: 0; }
.detail-further__list li { margin-bottom: 12px; }
.detail-further__list a {
  color: var(--c-green);
  font-size: calc(16.5px + 1px);
  line-height: var(--detail-leading);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.detail-further__list a:hover { color: #fff; }

/* ── Responsive — gabarit riche ──────────────────────────────────── */
@media (max-width: 680px) {
  .detail-topbar {
    padding: 0 18px;
    grid-template-columns: auto 1fr;
  }
  .detail-topbar-logo { display: none; }
  .detail-crumb { justify-self: end; }
  .detail-ph-tag { left: 18px; }
  .detail-hero__content { padding: 0 18px 30px; }
  .detail-article { padding: 48px 22px 32px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-cta-wrap { padding: 0 22px; }
}

/* ============ PIED DE PAGE — pages intérieures (Lot D) ============
   Footer sobre, charte sombre (--ink), séparé du corps par un trait discret.
   N'apparaît PAS sur la home (bloc footer overridé à vide dans home.html.twig). */
.site-footer {
  background: rgba(10, 12, 10, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 40px 32px 36px;
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px 48px;
}

/* Colonne gauche : baseline + copyright */
.footer-brand { display: flex; flex-direction: column; gap: 10px; }

.footer-baseline {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 14px;
  color: rgba(244, 243, 238, 0.45);
  letter-spacing: 0.3px;
}

.footer-copy {
  font-size: 12px;
  color: rgba(244, 243, 238, 0.32);
  font-family: "DM Mono", monospace;
  letter-spacing: 0.3px;
}

/* Mention légale discrète (identité société, sous le copyright) */
.footer-legal-id {
  margin: 2px 0 0;
  font-size: 11px;
  color: rgba(244, 243, 238, 0.26);
  font-family: "DM Mono", monospace;
  letter-spacing: 0.2px;
}

/* Colonne droite : menu aligné à droite (margin-left:auto le pousse à droite
   même si le conteneur passe en wrap). */
.footer-nav { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; margin-left: auto; }

.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 28px;
}

.footer-links a {
  font-size: 15px;
  color: rgba(244, 243, 238, 0.62);
  text-decoration: none;
  transition: color 0.2s ease;
  letter-spacing: 0.2px;
}
.footer-links a:hover { color: rgba(244, 243, 238, 0.92); }

/* Séparation visuelle entre les deux groupes de liens */
.footer-links--legal { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 12px; }
.footer-links--legal a { font-size: 13px; color: rgba(244, 243, 238, 0.42); }
.footer-links--legal a:hover { color: rgba(244, 243, 238, 0.75); }

@media (max-width: 680px) {
  .site-footer { padding: 32px 18px 28px; }
  /* Empilé et aligné à gauche sur mobile */
  .footer-inner { flex-direction: column; }
  .footer-nav { align-items: flex-start; }
  .footer-links { justify-content: flex-start; gap: 8px 18px; }
}