/* ===== DOMAIN HERO ===== */
.domain-hero{background:var(--stone-dark);padding:80px 0 56px;border-bottom:1px solid var(--line-strong);}
.domain-hero .tag{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--clay);
  letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;display:block;
}
.domain-hero h1{font-size:clamp(34px,5vw,58px);margin-bottom:16px;max-width:720px;}
.domain-hero p{max-width:620px;font-size:16px;color:#57574F;margin-bottom:28px;}
.domain-hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}

/* ===== DOMAIN LAYOUT (contenu pleine largeur, sidebar en tiroir) ===== */
.domain-body{padding:64px 0 96px;}
.domain-layout{display:block;}

/* --- Tiroir latéral (fermé par défaut) --- */
/* Le bouton vit dans la navbar (navbar.html, cf. base.css) et n'est affiché que sur les pages métier */
.page-plomberie .sidebar-toggle,
.page-travaux-publics .sidebar-toggle,
.page-paysage .sidebar-toggle{
  display:flex;
}

.sidebar-overlay{
  position:fixed;inset:0;background:rgba(20,20,20,0.5);
  opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:80;
}
.sidebar-overlay.open{opacity:1;pointer-events:auto;}

.domain-sidebar{
  position:fixed;top:0;left:0;height:100vh;width:min(80vw,260px);
  display:flex;flex-direction:column;gap:4px;
  background:var(--stone);border-right:1px solid var(--line-strong);
  padding:100px 20px 20px;
  transform:translateX(-100%);transition:transform .3s ease;
  z-index:85;overflow-y:auto;
}
.domain-sidebar.open{transform:translateX(0);}
.domain-sidebar-title{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--concrete);
  text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;
}
.domain-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;font-size:14px;font-weight:500;color:var(--ink);
  border-left:3px solid transparent;border-radius:2px;
}
.domain-link svg{width:18px;height:18px;flex-shrink:0;color:var(--concrete);}
.domain-link:hover{background:var(--stone-dark);}
.domain-sidebar-cta{margin-top:14px;text-align:center;font-size:12px;padding:12px;}

.page-plomberie .domain-link-plomberie,
.page-travaux-publics .domain-link-travaux,
.page-paysage .domain-link-paysage{
  background:var(--stone-dark);border-left-color:var(--clay);font-weight:700;
}
.page-plomberie .domain-link-plomberie svg,
.page-travaux-publics .domain-link-travaux svg,
.page-paysage .domain-link-paysage svg{color:var(--clay);}

.domain-content{min-width:0;}
.domain-block{margin-bottom:56px;}
.domain-block:last-child{margin-bottom:0;}
.domain-block h2{font-size:clamp(24px,3vw,32px);margin-bottom:20px;}
.domain-cta-text{max-width:520px;margin-bottom:20px;color:#57574F;font-size:15px;}
.domain-content .gallery{grid-template-columns:repeat(2,1fr);}
.domain-content .gallery.gallery-single{grid-template-columns:1fr;}
.domain-content .gallery.gallery-3up{display:flex;flex-wrap:wrap;justify-content:center;}
.domain-content .gallery.gallery-3up .project{flex:0 1 calc((100% - 44px)/3);max-width:calc((100% - 44px)/3);}
.project-photo.project-photo-auto{aspect-ratio:auto;}
.project-photo.project-photo-auto img{height:auto;object-fit:contain;}
.domain-content .testi-grid{grid-template-columns:1fr;max-width:480px;}

/* ===== DOMAIN SERVICES (détail) ===== */
.domain-services{display:flex;flex-direction:column;gap:0;}
.domain-service{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid var(--line);}
.domain-service:last-child{border-bottom:none;}
.domain-service-icon{width:30px;height:30px;color:var(--forest);flex-shrink:0;margin-top:4px;}
.domain-service h3{font-size:18px;margin-bottom:6px;letter-spacing:0;}
.domain-service p{font-size:14px;color:#57574F;}

/* ===== AVANT / APRES (paysage) ===== */
.transform{background:var(--ink);color:var(--chalk);padding:64px 0;}
.transform .section-head{border-color:rgba(247,244,234,0.2);}
.transform .section-head p{color:#B0B0AC;}
.transform .tag{color:var(--forest);}
.compare{
  position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:767/836;
  border-radius:2px;overflow:hidden;border:1px solid rgba(247,244,234,0.25);
  cursor:ew-resize;user-select:none;
}
.compare-before,.compare-after{
  position:absolute;inset:0;
}
.compare-before{
  background:url('../assets/paysage-apres-nivellement.jpg') center/contain no-repeat;
}
.compare-after{
  background:url('../assets/paysage-avant-nivellement.jpg') center/contain no-repeat;
  clip-path: inset(0 50% 0 0);
}
.compare-label{
  position:absolute;top:20px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:0.1em;text-transform:uppercase;
  background:rgba(20,20,20,0.55);padding:6px 12px;
}
.label-before{left:20px;}
.label-after{right:20px;}
.compare-handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--chalk);
  transform:translateX(-1px);
}
.compare-handle::after{
  content:'–';
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;background:var(--chalk);color:var(--ink);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.transform-caption{
  max-width:640px;margin:20px auto 0;font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:#B0B0AC;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .domain-hero{padding:56px 0 40px;}
  /* Le tiroir "Nos métiers" est redondant avec le menu mobile du header, qui liste déjà les 3 métiers */
  .page-plomberie .sidebar-toggle,
  .page-travaux-publics .sidebar-toggle,
  .page-paysage .sidebar-toggle{display:none;}
  .domain-content .gallery.gallery-3up .project{flex-basis:calc((100% - 22px)/2);max-width:calc((100% - 22px)/2);}
}
@media (max-width:600px){
  .domain-content .gallery{grid-template-columns:1fr;}
  .domain-content .gallery.gallery-3up .project{flex-basis:100%;max-width:100%;}
  .domain-body{padding:44px 0 64px;}
}