/* =========================================================
   GOM ARCHITECTURE — Design system
   Extrait et formalisé à partir du canvas de direction visuelle
   (design/Main.dc.html) validé par Margaux.
   ========================================================= */

/* Police Poppins hébergée localement (pas d'appel à Google Fonts :
   aucune donnée visiteur transmise à un tiers, donc pas de bandeau cookie requis). */
@font-face{
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-300-normal.woff2') format('woff2');
}
@font-face{
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-600-normal.woff2') format('woff2');
}

:root{
  /* Couleurs de marque */
  --green-dark:#0F4038;
  --green-light:#C6D7CB;
  --green-pale:#EEF2ED;
  --terracotta:#AF7664;
  --kaki:#BFB48C;

  /* Texte */
  --ink:#2b3733;
  --muted:#7c8781;
  --white:#ffffff;

  /* Typo */
  --font: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Échelle d'espacement (8px base) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 140px;

  /* Largeur de contenu */
  --content-width: 1280px;
  --content-padding: 80px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font);
  background: var(--white);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.7;
  position: relative;
}

/* Grand logo en filigrane, fixe en fond de page (ne défile pas avec le contenu). */
/* Filigrane du logo : placé en coin (plutôt qu'au centre) pour pouvoir rester
   bien visible sans passer derrière le texte des paragraphes. */
body::before{
  content:'';
  position: fixed;
  bottom: -6%;
  right: -6%;
  width: 720px;
  height: 720px;
  max-width: 85vw;
  max-height: 85vw;
  background: url('/assets/img/logo.png') center / contain no-repeat;
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}
main, footer{
  position: relative;
  z-index: 1;
}
.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;
}
header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(15,64,56,.08);
}

img{ max-width:100%; display:block; }

a{
  color: var(--ink);
  text-decoration: none;
  font-weight: 300;
  transition: color .15s ease;
}
a:hover{ color: var(--terracotta); }

h1,h2,h3{
  font-weight: 400;
  color: var(--green-dark);
  margin: 0 0 var(--sp-2);
}

p{ margin: 0 0 var(--sp-2); }

.container{
  max-width: var(--content-width);
  margin: 0 auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

@media (max-width: 900px){
  :root{ --content-padding: 24px; }
}

/* ---------- Nav ---------- */
.site-nav{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 30px var(--content-padding);
}
.site-nav .logo img{ height:56px; width:auto; }
.site-nav .links{
  display:flex;
  gap:38px;
  align-items:center;
  flex-wrap: wrap;
}
.site-nav .links > a{
  font-size:13px;
  letter-spacing:0.03em;
}

/* Page active : petit soulignement terracotta */
.site-nav .links > a[aria-current="page"],
.nav-dropdown-toggle.is-active{
  color: var(--green-dark);
  position: relative;
}
.site-nav .links > a[aria-current="page"]::after,
.nav-dropdown-toggle.is-active::after{
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:-8px;
  height:2px;
  background: var(--terracotta);
}

/* Menu déroulant "Services" */
.nav-dropdown{ position:relative; }
.nav-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:5px;
  font-family: var(--font);
  font-size:13px;
  letter-spacing:0.03em;
  font-weight:300;
  color: var(--ink);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  transition: color .15s ease;
}
.nav-dropdown-toggle:hover{ color: var(--terracotta); }
.nav-dropdown-toggle .caret{ font-size:9px; transition: transform .15s ease; }
.nav-dropdown.is-open .nav-dropdown-toggle .caret{ transform: rotate(180deg); }

.nav-dropdown-menu{
  position:absolute;
  top: calc(100% + 20px);
  left:50%;
  transform: translateX(-50%);
  background: var(--white);
  border:1px solid var(--green-light);
  box-shadow: 0 16px 32px rgba(15,64,56,.14);
  padding: 8px 0;
  min-width:250px;
  display:none;
  z-index:60;
}
.nav-dropdown.is-open .nav-dropdown-menu{ display:block; }
.nav-dropdown-menu a{
  display:block;
  padding: 11px 22px;
  font-size:13px;
}
.nav-dropdown-menu a:hover{ background: var(--green-pale); color: var(--ink); }

/* Bouton hamburger (mobile uniquement) */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
}
.menu-toggle span{
  display:block;
  width:100%;
  height:2px;
  background: var(--green-dark);
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .site-nav{ padding: 20px 24px; }
  .menu-toggle{ display:flex; }
  .site-nav .links{
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:absolute;
    top:100%;
    left:0; right:0;
    background: var(--white);
    border-top:1px solid var(--green-light);
    box-shadow: 0 20px 30px rgba(15,64,56,.12);
    padding: 4px 24px 20px;
  }
  .site-nav .links.is-open{ display:flex; }
  .site-nav .links > a,
  .nav-dropdown{
    width:100%;
    padding:14px 0;
    border-bottom:1px solid var(--green-pale);
  }
  .site-nav .links > a[aria-current="page"]::after,
  .nav-dropdown-toggle.is-active::after{ display:none; }
  .nav-dropdown-toggle{ width:100%; justify-content:space-between; padding:0; }
  .nav-dropdown-menu{
    position:static;
    transform:none;
    border:0;
    box-shadow:none;
    min-width:0;
    padding: 4px 0 0 14px;
  }
}

/* ---------- Hero (carrousel photo) ---------- */
.hero-photo{
  position:relative;
  width:100%;
  height:860px;
  background: var(--green-pale);
  overflow:hidden;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 1.4s ease;
}
.hero-slide.is-active{ opacity:1; z-index:1; }

.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background: rgba(15,64,56,0.45);
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .2s ease;
}
.hero-arrow:hover{ background: var(--terracotta); color:#fff; }
.hero-arrow.prev{ left: var(--sp-3); }
.hero-arrow.next{ right: var(--sp-3); }

.hero-dots{
  position:absolute;
  left:0;
  right:0;
  bottom: var(--sp-3);
  z-index:2;
  display:flex;
  justify-content:center;
  gap:10px;
}
.hero-dot{
  width:8px;
  height:8px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.25);
  cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.hero-dot.is-active{ background:#fff; transform:scale(1.25); }

.hero-caption{
  text-align:center;
  padding: 14px var(--content-padding) 0;
  font-size:11px;
  color: var(--muted);
  font-style: italic;
}

.home-h1{
  text-align:center;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--sp-5) var(--content-padding) 0;
  font-size:30px;
  font-weight:400;
}
@media (max-width: 560px){
  .home-h1{ font-size:22px; }
}

@media (max-width: 900px){
  .hero-photo{ height: 420px; }
  .hero-arrow{ width:34px; height:34px; font-size:16px; }
}

/* ---------- Bloc chiffre + texte ---------- */
.stat-block{
  display:flex;
  align-items:center;
  gap:90px;
  padding: var(--sp-8) var(--content-padding);
  max-width: var(--content-width);
  margin:0 auto;
}
.stat-badge{ flex-shrink:0; width:220px; }
.stat-badge img{ width:100%; height:auto; display:block; }
.stat-divider{ width:1px; align-self:stretch; background: var(--green-light); }
.stat-text{ max-width:520px; }
.stat-label{
  font-size:13px;
  letter-spacing:0.08em;
  color: var(--muted);
  margin-bottom:14px;
  text-transform:uppercase;
}
.stat-text p{ font-size:19px; line-height:1.7; color:var(--ink); font-weight:300; margin:0; }

@media (max-width: 900px){
  .stat-block{ flex-direction:column; gap: var(--sp-3); padding: var(--sp-6) 24px; text-align:center; }
  .stat-badge{ width:150px; }
  .stat-divider{ display:none; }
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;
  background: var(--terracotta);
  color: var(--white);
  font-size:13px;
  font-weight:400;
  letter-spacing:0.02em;
  padding:16px 34px;
  border: none;
  cursor:pointer;
}
.btn:hover{ background: var(--green-dark); color: var(--white); }
.btn-row{ display:flex; justify-content:center; padding: 0 var(--content-padding) var(--sp-7); }
.btn-row-double{ gap: var(--sp-2); flex-wrap:wrap; }
.btn-outline{ background:transparent; border:1.5px solid var(--green-dark); color:var(--green-dark); }
.btn-outline:hover{ background:var(--green-dark); color:var(--white); }

.opening-lede{
  max-width: 700px;
  margin: 0 auto var(--sp-4);
  padding: 0 var(--content-padding);
  text-align:center;
  font-size:17px;
  color: var(--muted);
  font-weight:300;
  line-height:1.6;
}

/* ---------- Reconnaissance de la situation ---------- */
.situation-band{
  background: var(--green-pale);
  padding: var(--sp-6) var(--content-padding);
  text-align:center;
}
.situation-band h2{ max-width:760px; margin:0 auto var(--sp-2); font-size:26px; }
.situation-band p{ max-width:700px; margin:0 auto; color:var(--muted); font-size:15.5px; line-height:1.6; }

/* ---------- Résultats apportés ---------- */
.results-band{ padding: var(--sp-6) var(--content-padding); max-width:900px; margin:0 auto; }
.results-band h2{ text-align:center; font-size:26px; margin-bottom: var(--sp-4); }
.results-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-2) var(--sp-4); list-style:none; padding:0; margin:0; }
.results-list li{ display:flex; gap:10px; font-size:15px; color:var(--ink); align-items:flex-start; }
.results-list li::before{ content:"✓"; color:var(--terracotta); font-weight:600; flex:none; }
@media (max-width:640px){ .results-list{ grid-template-columns:1fr; } }

/* ---------- Méthode ---------- */
.method-band{ background: var(--green-pale); padding: var(--sp-6) var(--content-padding); text-align:center; }
.method-band h2{ font-size:26px; margin-bottom: var(--sp-4); }
.method-steps{ list-style:none; counter-reset:step; padding:0; margin:0 auto var(--sp-3); max-width:560px; display:flex; flex-direction:column; gap: var(--sp-2); text-align:left; }
.method-steps li{ counter-increment:step; display:flex; gap: var(--sp-2); align-items:center; font-size:15.5px; color:var(--ink); }
.method-steps li::before{ content: counter(step); flex:none; width:28px; height:28px; border-radius:50%; background:var(--green-dark); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; }
.method-band .btn-row{ padding: 0; }

/* ---------- Pourquoi GOM Architecture ---------- */
.why-band{ padding: var(--sp-6) var(--content-padding); max-width:900px; margin:0 auto; text-align:center; }
.why-band h2{ font-size:26px; }
.why-band > p{ max-width:680px; margin:0 auto var(--sp-4); color:var(--muted); font-size:15.5px; }
.why-list{ list-style:none; padding:0; margin:0 auto var(--sp-3); max-width:680px; display:flex; flex-direction:column; gap: var(--sp-2); text-align:left; }
.why-list li{ display:flex; gap:10px; font-size:15px; color:var(--ink); line-height:1.5; }
.why-list li::before{ content:"✓"; color:var(--terracotta); font-weight:600; flex:none; }
.why-band .btn-row{ padding: 0; }

/* ---------- Zone d'intervention (accueil) ---------- */
.zone-band{ padding: var(--sp-6) var(--content-padding); text-align:center; max-width:700px; margin:0 auto; }
.zone-band h2{ font-size:24px; }
.zone-band p{ color:var(--muted); font-size:15.5px; line-height:1.6; }
.zone-band p a{ color: var(--green-dark); font-weight:400; }

/* ---------- Appel à l'action final ---------- */
.final-cta-band{ background: var(--green-dark); padding: var(--sp-7) var(--content-padding); text-align:center; }
.final-cta-band h2{ color:#fff; font-size:26px; }
.final-cta-band p{ color: rgba(255,255,255,.85); max-width:600px; margin:0 auto var(--sp-3); font-size:15.5px; }
.final-cta-band .btn-row{ padding: 0; }
.final-cta-band .btn{ background:var(--terracotta); }
.final-cta-band .btn:hover{ background:#fff; color:var(--green-dark); }

/* ---------- "Vous ne vivez pas sur place ?" ---------- */
.distance-band{
  padding: 0 var(--content-padding) var(--sp-7);
  max-width: 1200px;
  margin: 0 auto;
}
.distance-band .section-intro{
  max-width: 700px;
  margin: 0 auto var(--sp-5);
  text-align:center;
}
.distance-band h2{ font-size:26px; }
.distance-band .section-intro p{ color:var(--muted); font-size:15.5px; }
.distance-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.distance-card{ display:block; }
.distance-card .photo{ width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:10px; background:var(--green-pale); }
.distance-card .photo img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.distance-card:hover .photo img{ transform: scale(1.04); }
.distance-card .tag{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--terracotta); margin: var(--sp-2) 0 4px; }
.distance-card h3{ font-size:16px; margin:0 0 4px; }
.distance-card p:last-child{ font-size:13.5px; color:var(--muted); margin:0; }

@media (max-width: 900px){
  .distance-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .distance-grid{ grid-template-columns: 1fr; }
}

/* ---------- Services (ligne texte) ---------- */
.services-line{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 0 10px;
  padding: 0 var(--content-padding) var(--sp-6);
  font-size:14px;
  color: var(--ink);
  font-weight:300;
  letter-spacing:0.01em;
  text-align:center;
}
.services-line a{ white-space:nowrap; }

/* ---------- Grille de cartes (piliers, sur pages piliers) ---------- */
.card-grid-band{
  background: var(--green-pale);
  padding: var(--sp-7) 0;
}
.card-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  padding: 0 var(--content-padding);
  max-width: 1400px;
  margin:0 auto;
}
.card{
  background: var(--white);
  border-top: none;
  border-radius: 12px;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  box-shadow: 0 2px 6px rgba(15,64,56,.06), 0 10px 24px rgba(15,64,56,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(15,64,56,.08), 0 16px 32px rgba(15,64,56,.08);
}
.card-icon{
  width: 60px;
  height: 60px;
  margin-bottom: var(--sp-3);
  color: var(--terracotta);
}
.card-icon svg{ width:100%; height:100%; display:block; }
.card h3{ font-size:21px; margin-bottom: var(--sp-1); }
.card h3 a{ color: inherit; }
.card p{ font-size:15.5px; color: var(--muted); }

@media (max-width: 900px){
  .card-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .card-grid{ grid-template-columns: 1fr; }
}

/* ---------- Section texte générique (pages intérieures) ---------- */
.page-header{
  padding: var(--sp-7) var(--content-padding) var(--sp-5);
  max-width: 900px;
  margin: 0 auto;
  text-align:center;
}
.page-header h1{ font-size:40px; font-weight:400; }
.page-header .lede{ font-size:18px; color:var(--muted); font-weight:300; }
.page-header .project-tag{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--terracotta);
  margin: 0 0 var(--sp-2);
}

.ba-caption{
  max-width: var(--content-width);
  margin: calc(-1 * var(--sp-4)) auto var(--sp-5);
  padding: 0 var(--content-padding);
  font-size:12.5px;
  color: var(--muted);
  text-align:center;
  font-style: italic;
}

.page-hero-photo{
  max-width: var(--content-width);
  margin: 0 auto var(--sp-6);
  padding: 0 var(--content-padding);
}
.page-hero-photo img{
  width:100%;
  aspect-ratio: 16/6;
  object-fit: cover;
  border-radius: 2px;
}
@media (max-width: 900px){
  .page-hero-photo img{ aspect-ratio: 4/3; }
}

.prose{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--content-padding) var(--sp-7);
  font-size:16px;
}
.prose h2{ font-size:24px; margin-top: var(--sp-5); }
.prose ul{ padding-left: 1.2em; }
.prose li{ margin-bottom: var(--sp-1); }

/* ---------- Accordéon (blocs dépliables) ---------- */
.accordion{ max-width:760px; margin:0 auto; padding: 0 var(--content-padding) var(--sp-7); }
.accordion-item{ border-top:1px solid var(--green-light); }
.accordion-item:last-child{ border-bottom:1px solid var(--green-light); }
.accordion-item summary{
  cursor:pointer;
  padding: var(--sp-2) 0;
  font-size:16px;
  color: var(--green-dark);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.accordion-item summary::-webkit-details-marker{ display:none; }
.accordion-item summary::after{ content:"+"; font-size:20px; color:var(--terracotta); }
.accordion-item[open] summary::after{ content:"–"; }
.accordion-item .accordion-body{ padding: 0 0 var(--sp-3); font-size:15px; color:var(--muted); }

/* ---------- Bandeau "Ils m'ont fait confiance" ---------- */
.trust-block{
  background: var(--green-pale);
  padding: var(--sp-6) var(--content-padding);
  text-align:center;
}
.trust-block .stars,
.trust-stars{ color: var(--terracotta); font-size:18px; letter-spacing:2px; margin-bottom: var(--sp-1); }
.trust-lead{ font-size:15px; color: var(--muted); margin-bottom: var(--sp-3); }
.reviews-track{
  overflow:hidden;
  padding-bottom: var(--sp-2);
  max-width: var(--content-width);
  margin:0 auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.reviews-track-inner{
  display:flex;
  gap: var(--sp-3);
  width: max-content;
  animation: reviews-marquee 95s linear infinite;
}
.trust-block:hover .reviews-track-inner,
.reviews-track-inner.is-paused{
  animation-play-state: paused;
}
@keyframes reviews-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .reviews-track-inner{
    animation:none;
  }
  .reviews-track{
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .review-card{ scroll-snap-align:start; }
}
.review-card{
  flex: 0 0 320px;
  min-height: 250px;
  background:#fff;
  border:1px solid var(--green-light);
  padding: var(--sp-3);
  text-align:left;
  font-size:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.review-card p{
  color:var(--ink);
  margin-bottom: var(--sp-2);
  display:-webkit-box;
  -webkit-line-clamp:7;
  -webkit-box-orient:vertical;
  line-clamp:7;
  overflow:hidden;
}
.review-author{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Ordres, réseaux & partenaires ---------- */
.partners-band{
  padding: var(--sp-6) var(--content-padding);
  text-align:center;
}
.partners-band h2{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--muted);
  font-weight:400;
  margin-bottom: var(--sp-3);
}
.partners-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
  max-width: var(--content-width);
  margin-left:auto;
  margin-right:auto;
}
.partners-list li{
  border:1px solid var(--green-light);
  background:#fff;
  padding:10px 20px;
  border-radius:999px;
  font-size:13px;
  color: var(--green-dark);
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--green-dark);
  color: var(--green-light);
  padding: var(--sp-6) var(--content-padding) var(--sp-4);
  margin-top: var(--sp-7);
}
.site-footer a{ color: var(--green-light); }
.site-footer a:hover{ color: var(--kaki); }
.footer-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  max-width: var(--content-width);
  margin:0 auto;
  font-size:13px;
}
.footer-grid h4{
  color: var(--white);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:400;
  margin-bottom: var(--sp-2);
}
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom: var(--sp-1); }
.footer-bottom{
  max-width: var(--content-width);
  margin: var(--sp-5) auto 0;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size:11px;
  color: var(--green-light);
  opacity:0.8;
}

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
}

/* ---------- Tableau (dans .prose, ex. Méthode & tarifs) ---------- */
.prose table{ width:100%; border-collapse:collapse; margin: var(--sp-3) 0 var(--sp-4); font-size:14px; }
.prose th, .prose td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--green-light); vertical-align:top; }
.prose th{ color:var(--green-dark); font-weight:400; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; }
.acronym-expand{ display:block; font-size:11.5px; color:var(--muted); font-weight:300; margin-top:2px; }
@media (max-width: 600px){
  .prose table, .prose thead, .prose tbody, .prose th, .prose td, .prose tr{ display:block; }
  .prose thead{ display:none; }
  .prose tr{ border-bottom:1px solid var(--green-light); padding: var(--sp-2) 0; }
  .prose td{ border:none; padding: 2px 0; }
  .prose td::before{ content: attr(data-label); display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-top:8px; }
}

/* ---------- Réalisations : filtres ---------- */
.realisations-filters{
  display:flex;
  flex-wrap:wrap;
  gap: var(--sp-2);
  justify-content:center;
  max-width: var(--content-width);
  margin: 0 auto var(--sp-4);
  padding: 0 var(--content-padding);
}
.filter-btn{
  font: inherit;
  font-size:13.5px;
  cursor:pointer;
  background: var(--white);
  border: 1px solid var(--green-light);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 18px;
  display:inline-block;
  text-decoration:none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-btn:hover{ border-color: var(--terracotta); }
.filter-btn.is-active{
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}
.realisation-card.is-hidden,
.realisation-featured.is-hidden,
.category-heading.is-hidden,
.category-heading-link.is-hidden{
  display:none;
}
.category-heading-link{
  grid-column: 1 / -1;
  margin: -8px 0 var(--sp-3);
  text-align:center;
}
.category-heading-link a{
  font-size:14px;
  color: var(--terracotta);
}

/* ---------- Réalisations : grille photo ---------- */
.realisations-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: var(--sp-4);
  padding: var(--sp-2) var(--content-padding) var(--sp-6);
  max-width: var(--content-width);
  margin:0 auto;
}
.category-heading{
  grid-column: 1 / -1;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  border-bottom:1px solid var(--green-light);
  padding-bottom: var(--sp-1);
  margin: var(--sp-4) 0 0;
}
.realisations-grid .category-heading:first-child{ margin-top:0; }
.realisation-card{ display:flex; flex-direction:column; }
.realisation-card .photo{ width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--green-pale); }
.realisation-card .photo img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.realisation-card:hover .photo img{ transform: scale(1.04); }
.realisation-card .cat{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--terracotta); margin: var(--sp-2) 0 4px; }
.realisation-card h3{ font-size:16px; margin:0 0 6px; line-height:1.4; }
.realisation-card p{ font-size:13.5px; color:var(--muted); margin:0; }

.realisation-featured{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--sp-5);
  align-items:center;
  padding-bottom: var(--sp-4);
  border-bottom:1px solid var(--green-light);
  margin-bottom: var(--sp-2);
}
.realisation-featured .photo{ aspect-ratio:3/2; overflow:hidden; }
.realisation-featured .photo img{ width:100%; height:100%; object-fit:cover; }
.realisation-featured .tag{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--terracotta); margin-bottom: var(--sp-1); }
.realisation-featured h2{ font-size:26px; margin:0 0 var(--sp-1); }
.realisation-featured p{ font-size:15px; color:var(--muted); }

@media (max-width: 900px){
  .realisation-featured{ grid-template-columns:1fr; }
}

.other-realisations{ max-width:900px; margin:0 auto; padding: 0 var(--content-padding) var(--sp-7); }
.other-realisations h2{ font-size:22px; text-align:center; margin:0; }
.other-realisations-details summary{
  cursor:pointer;
  list-style:none;
  text-align:center;
  margin-bottom: var(--sp-4);
}
.other-realisations-details summary::-webkit-details-marker{ display:none; }
.other-realisations-details summary h2::after{
  content:"Afficher +";
  display:block;
  font-size:12px;
  font-weight:300;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--terracotta);
  margin-top:6px;
}
.other-realisations-details[open] summary h2::after{ content:"Masquer –"; }
.other-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: var(--sp-3) var(--sp-4); }
.other-list li{ border-top:1px solid var(--green-light); padding-top: var(--sp-1); font-size:13.5px; }
.other-list li strong{ display:block; color:var(--green-dark); font-weight:400; margin-bottom:2px; font-size:14.5px; }
.other-list li span{ color:var(--muted); }

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  max-width: var(--content-width);
  margin:0 auto;
  padding: 0 var(--content-padding) var(--sp-7);
}
.contact-info dl{ margin:0; }
.contact-info dt{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top: var(--sp-3); }
.contact-info dt:first-child{ margin-top:0; }
.contact-info dd{ margin:2px 0 0; font-size:17px; color:var(--ink); }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-form{ display:flex; flex-direction:column; gap: var(--sp-3); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-3); }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.form-field input,
.form-field select,
.form-field textarea{
  font-family: var(--font);
  font-size:15px;
  font-weight:300;
  color: var(--ink);
  border:none;
  border-bottom:1px solid var(--green-light);
  background:transparent;
  padding:8px 0;
  outline:none;
  width:100%;
}
.form-field select{ background: transparent; }
.form-field textarea{ resize:vertical; min-height:90px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ border-bottom-color: var(--terracotta); }
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-privacy-note{ font-size:12px; color:var(--muted); }
.form-privacy-note a{ color: var(--green-dark); text-decoration:underline; }
.contact-form .btn{ align-self:flex-start; border:none; }
.form-message{
  padding: var(--sp-2) var(--sp-3);
  font-size:14px;
  margin-bottom: var(--sp-3);
}
.form-message.success{ background: var(--green-pale); color: var(--green-dark); border:1px solid var(--green-light); }
.form-message.error{ background: rgba(175,118,100,0.1); color: var(--terracotta); border:1px solid rgba(175,118,100,0.35); }

@media (max-width: 600px){
  .form-row{ grid-template-columns:1fr; }
}

/* ---------- Illustration de page (plan, élévation…) ---------- */
.page-illustration{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--content-padding) var(--sp-5);
}
.page-illustration img{
  width:100%;
  display:block;
  border: 1px solid var(--green-light);
  background:#fff;
}
.page-illustration figcaption{
  font-size:12px;
  color: var(--muted);
  text-align:center;
  margin-top: var(--sp-1);
  font-style: italic;
}

/* ---------- Exemples de réalisations (bandeau défilant, pages piliers) ---------- */
.photo-scroll-section{
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--content-padding) var(--sp-6);
}
.photo-scroll-section h2{
  font-size:20px;
  margin-bottom: var(--sp-3);
}
.photo-scroll{
  display:flex;
  gap: var(--sp-3);
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
}
.photo-scroll-item{
  scroll-snap-align:start;
  flex: 0 0 260px;
  display:block;
  text-decoration:none;
  color:inherit;
}
.photo-scroll-item .photo{
  width:100%;
  aspect-ratio: 4/3;
  overflow:hidden;
  background: var(--green-pale);
  border-radius: 2px;
}
.photo-scroll-item .photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .3s ease;
}
.photo-scroll-item:hover .photo img{ transform: scale(1.04); }
.photo-scroll-item span{
  display:block;
  font-size:13px;
  color: var(--muted);
  margin-top:6px;
}
.photo-scroll-more{
  text-align:center;
  margin-top: var(--sp-3);
}

/* ---------- Présentation : photo + badges ---------- */
.presentation-intro{
  display:flex;
  gap: var(--sp-6);
  align-items:flex-start;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--content-padding) var(--sp-6);
}
.presentation-photo{
  flex-shrink:0;
  width: 300px;
}
.presentation-photo img{
  width:100%;
  aspect-ratio: 3/4;
  object-fit:cover;
  border-radius: 2px;
}
.presentation-intro-text{ flex:1; max-width:600px; padding-top: var(--sp-2); }
.presentation-badges{
  display:flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
}
.presentation-badge-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.presentation-badge-item .stat-label{ margin:0; }
.presentation-intro-text p{ font-size:16px; }

@media (max-width: 780px){
  .presentation-intro{ flex-direction:column; align-items:center; text-align:center; }
  .presentation-photo{ width:220px; }
  .presentation-badges{ justify-content:center; }
  .presentation-badge-item{ align-items:center; }
}

/* ---------- Zone d'intervention (carte schématique) ---------- */
.zone-section{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--content-padding) var(--sp-6);
  text-align:center;
}
.zone-section-lede{ color: var(--muted); font-size:16px; max-width:680px; margin:0 auto var(--sp-4); }
.zone-map-wrap{ max-width:560px; margin: 0 auto; }
.zone-map{ width:100%; height:auto; }
.zone-map-caption{
  font-size:12px;
  color: var(--muted);
  font-style: italic;
  margin-top: var(--sp-2);
}
.zone-section-more{ margin-top: var(--sp-3); font-size:14px; }
.zone-section-more a{ color: var(--green-dark); }

/* ---------- Avant / Après ---------- */
.avant-apres-list{
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--sp-2) var(--content-padding) var(--sp-6);
  display:flex;
  flex-direction:column;
  gap: var(--sp-6);
}
.avant-apres-item .tag{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--terracotta); margin-bottom:4px; }
.avant-apres-item h3{ font-size:19px; margin:0 0 6px; }
.avant-apres-item p{ font-size:14px; color:var(--muted); margin:0 0 var(--sp-2); max-width:640px; }

/* Curseur de comparaison avant/après (glisser pour révéler), façon saac.fr.
   Un <input type="range"> transparent, superposé sur toute la surface, pilote
   un clip-path CSS — ça reste utilisable au clavier et tactile sans JS complexe. */
.ba-slider{
  --pos: 50%;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--green-pale);
  border-radius: 2px;
  touch-action: pan-y;
}
.ba-slide{ position:absolute; inset:0; }
.ba-slide img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.ba-before{ clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-label{
  position:absolute;
  top:14px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#fff;
  padding:5px 14px;
  pointer-events:none;
}
.ba-label-before{ left:14px; background: rgba(15,64,56,.85); }
.ba-label-after{ right:14px; background: var(--terracotta); }
.ba-handle{
  position:absolute;
  top:0; bottom:0;
  left: var(--pos);
  width:0;
  border-left:2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  transform: translateX(-1px);
  pointer-events:none;
  z-index:1;
}
.ba-handle-grip{
  position:absolute;
  top:50%; left:0;
  transform:translate(-50%,-50%);
  width:42px; height:42px;
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  color:var(--green-dark);
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.ba-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  cursor: ew-resize;
  background:transparent;
  z-index:2;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.ba-range:focus-visible{ outline: 3px solid var(--terracotta); outline-offset: -3px; }

/* ---------- Bouton remonter en haut ---------- */
.back-to-top{
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--green-dark);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(15,64,56,.3);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
  z-index: 40;
}
.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover{ background: var(--terracotta); }
@media (max-width: 700px){
  .back-to-top{ right:16px; bottom:16px; width:44px; height:44px; }
}

/* ---------- Voir aussi (maillage interne bas de page) ---------- */
.see-also{ max-width:760px; margin:0 auto; padding:0 var(--content-padding) var(--sp-6); font-size:13px; color:var(--muted); text-align:center; }
.see-also .label{ text-transform:uppercase; letter-spacing:.08em; font-size:11px; margin-right:8px; }
.see-also a{ color:var(--green-dark); margin: 0 6px; }