/* Base */
:root{
  --green:#0E7C66;
  --green-700:#0B5E4D;
  --green-50:#E6F3F0;
  --gray-900:#1F2937;
  --gray-700:#374151;
  --gray-100:#F3F4F6;
  --white:#FFFFFF;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--gray-900);
  background:var(--white);
}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #e5e7eb;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--green)}
.brand-text{font-size:18px;color:var(--gray-900);font-weight:600}
.brand img{display:block;height:64px;width:auto}
.main-nav a{color:var(--gray-700);text-decoration:none;margin-left:16px;font-weight:600}
.main-nav a:hover,.main-nav a:focus{color:var(--green)}

/* Triptych */
.triptych{display:flex;height:calc(100vh - 80px)}
.panel{flex:1;position:relative;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--white);outline:none}
.panel:focus .overlay{box-shadow:0 0 0 3px rgba(14,124,102,.5) inset}
.panel .overlay{position:relative;z-index:1;text-align:center;padding:24px 16px;border-radius:8px;transition:transform .3s ease}
.panel .overlay .badge{display:inline-block;height:144px;width:auto;margin-bottom:10px}
.panel .cta{display:inline-block;margin-top:12px;padding:10px 16px;background:var(--green);border-radius:6px;font-weight:700}
.panel:hover .overlay{transform:translateY(-4px)}
.panel::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25);transition:background .3s ease}
.panel:hover::before{background:rgba(0,0,0,.35)}

/* Background images */
.panel-2{background:url('https://images.unsplash.com/photo-1501183638710-841dd1904471?w=1200&q=80&auto=format&fit=crop') center/cover no-repeat}
.panel-1{background:url('https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=1400&q=80&auto=format&fit=crop') center/cover no-repeat}
.panel-3{background:url('https://images.unsplash.com/photo-1554774853-b415df9eeb92?w=1400&q=80&auto=format&fit=crop') center/cover no-repeat}

.panel h1,.panel h2{margin:0 0 8px 0}
.panel p{margin:0;opacity:.95}

/* Footer */
.site-footer{background:var(--gray-100);border-top:1px solid #e5e7eb}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px}
.footer-nav a{color:var(--gray-700);text-decoration:none;margin:0 8px}
.footer-nav a:hover{color:var(--green)}
.subs a{color:var(--green-700);text-decoration:none;margin:0 8px}
.subs a:hover{text-decoration:underline}

/* Sub-site pages background */
.page-bg-immobilier::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1600&q=80&auto=format&fit=crop') center/cover no-repeat;
  opacity:0.15;
}
.page-bg-regroupement::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:url('https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?w=1600&q=80&auto=format&fit=crop') center/cover no-repeat;
  opacity:0.15;
}
.page-bg-professionnel::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1600&q=80&auto=format&fit=crop') center/cover no-repeat;
  opacity:0.15;
}

/* Menu hamburger (masqué par défaut) */
.mobile-menu-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:60;
}
.mobile-menu-toggle span{
  display:block;
  width:28px;
  height:3px;
  background:var(--gray-900);
  margin:5px 0;
  transition:all 0.3s ease;
  border-radius:2px;
}
.mobile-menu-toggle.active span:nth-child(1){
  transform:rotate(45deg) translate(8px, 8px);
}
.mobile-menu-toggle.active span:nth-child(2){
  opacity:0;
}
.mobile-menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg) translate(7px, -7px);
}

/* Responsive */
@media (max-width: 900px){
  .triptych{flex-direction:column;height:auto;min-height:calc(100vh - 80px)}
  .panel{min-height:33vh}
}

@media (max-width: 768px){
  /* Afficher le bouton hamburger sur mobile */
  .mobile-menu-toggle{display:block}
  
  /* Masquer le menu desktop */
  .main-nav{
    position:fixed;
    top:80px;
    left:0;
    right:0;
    background:rgba(255,255,255,0.98);
    backdrop-filter:saturate(180%) blur(10px);
    flex-direction:column;
    padding:16px;
    border-bottom:1px solid #e5e7eb;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transform:translateY(-100%);
    opacity:0;
    transition:transform 0.3s ease, opacity 0.3s ease;
    pointer-events:none;
  }
  
  /* Menu ouvert */
  .main-nav.active{
    transform:translateY(0);
    opacity:1;
    pointer-events:all;
  }
  
  /* Liens du menu mobile */
  .main-nav a{
    display:block;
    margin:0;
    padding:12px 16px;
    border-radius:6px;
    transition:background 0.2s ease;
  }
  .main-nav a:hover{
    background:var(--green-50);
  }
  
  /* Ajuster le header */
  .header-inner{height:70px}
  .brand-text{font-size:16px}
  .brand img{height:50px}
  
  /* Ajuster le triptych */
  .triptych{height:auto;min-height:calc(100vh - 70px)}
}