:root{
  --green-d:#0c3b2e;
  --green-l:#1d7a63;
  --gold:#d8b65a;
  --ink:#070808;
  --card:#121416;
  --muted:#a6adbb;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--ink);
  color:#e9edf1;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* HEADER */

header{
  position:sticky;
  top:0;
  background:rgba(7,8,8,.88);
  backdrop-filter:saturate(130%) blur(12px);
  z-index:50;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
}
.brand{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:800;
  letter-spacing:.5px;
}
.brand-logo{
  width:100px;
  height:100px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,var(--green-d),var(--green-l));
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;   /* logo entièrement visible */
}
.navlinks{
  display:flex;
  gap:18px;
  font-weight:600;
  font-size:14px;
}
.nav a:hover{color:var(--gold)}

/* BOUTON MENU MOBILE */

.nav-toggle{
  display:none;
  background:transparent;
  border:none;
  padding:6px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  margin:4px 0;
  background:#f1f5f9;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle.active span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2){
  opacity:0;
}
.nav-toggle.active span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

/* BOUTONS */

.btn{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  font-weight:700;
  cursor:pointer;
  font-size:14px;
}
.btn-primary{
  background:linear-gradient(135deg,var(--green-d),var(--green-l));
}
.btn-ghost{
  background:transparent;
}

/* HERO */

.hero{
  position:relative;
  min-height:80vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.8)),
    radial-gradient(1200px 600px at 70% 10%, rgba(29,122,99,.35), transparent 60%),
    url('/assets/Croco-Background.jpg') center/cover no-repeat;
  filter:saturate(105%);
}
.hero-inner{
  position:relative;
  z-index:1;
  padding:80px 20px 60px;
}

/* panneau principal semi-transparent */

.hero-panel{
  max-width:760px;
  margin:0 auto;
  padding:26px 24px 30px;
  border-radius:26px;
  background:rgba(7,10,9,.82);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 26px 80px rgba(0,0,0,.7);
  text-align:center;
}

.kicker{
  display:inline-block;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-size:11px;
  color:#e8f5ef;
  background:rgba(29,122,99,.2);
}
.badge-construction{
  display:inline-block;
  margin-top:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(216,182,90,.16);
  border:1px solid rgba(216,182,90,.55);
  color:var(--gold);
}
.title{
  margin:18px auto 6px;
  line-height:1.05;
  font-size:clamp(30px,5vw,52px);
  font-family:"Playfair Display",serif;
  font-weight:700;
}
.subtitle{
  max-width:640px;
  margin:0 auto;
  color:#d5dde6;
  font-size:clamp(15px,2.1vw,18px);
}

/* SLIDER HERO */

.hero-slider{
  margin-top:22px;
  display:flex;
  justify-content:center;
}
.hero-slider-inner{
  position:relative;
  width:100%;
  max-width:540px;
  min-height:90px;
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s ease,transform .45s ease;
  padding:14px 18px;
  border-radius:18px;
  background:rgba(10,16,14,.95);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.hero-slide-icon{
  font-size:20px;
  flex-shrink:0;
}
.hero-slide-content{
  text-align:left;
}
.hero-slide-title{
  font-weight:600;
  margin-bottom:4px;
}
.hero-slide-text{
  font-size:13px;
  color:var(--muted);
}
.hero-slide.active{
  opacity:1;
  transform:translateY(0);
}

/* CTAs hero */

.hero-cta{
  margin-top:24px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* SECTIONS GÉNÉRALES */

section{
  padding:64px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.section-title{
  font-family:"Playfair Display",serif;
  font-size:clamp(26px,4vw,36px);
  margin:0 0 18px;
}
.muted{color:var(--muted)}

.grid{display:grid;gap:20px}
@media(min-width:900px){
  .grid-2{grid-template-columns:1.2fr .8fr}
}
@media(min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

/* CARTES / BLOCS */

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
}
.card-body{padding:18px}
.tag{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius:999px;
  color:#e8f5ef;
  background:rgba(29,122,99,.12);
}

/* MAP + LISTES */

.map-embed{
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.list{
  display:grid;
  gap:10px;
  padding:0;
  margin:0;
  list-style:none;
}
.list .i{
  width:22px;
  display:inline-block;
  margin-right:6px;
  text-align:center;
  opacity:.9;
}
.gold{color:var(--gold)}

/* FOOTER */

footer{
  padding:48px 0;
  background:#050607;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-grid{
  display:grid;
  gap:20px;
}
@media(min-width:900px){
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
}

/* RESPONSIVE – TABLETTE & MOBILE */

@media(max-width:900px){
  .nav{
    align-items:flex-start;
  }
  .navlinks{
    font-size:15px;
  }
}

@media(max-width:700px){
  .hero-inner{
    padding:70px 16px 50px;
  }
  .hero-panel{
    padding:20px 18px 24px;
    border-radius:22px;
  }
  .hero-slider-inner{
    min-height:110px;
  }

  /* Menu burger actif en mobile */
  .nav{
    flex-wrap:wrap;
  }
  .nav-toggle{
    display:block;
  }
  .navlinks{
    display:none;
    flex-direction:column;
    width:100%;
    margin-top:8px;
    padding-top:6px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .navlinks a{
    padding:8px 2px;
    font-size:15px;
  }
  .navlinks.nav-open{
    display:flex;
  }

  .brand-logo{
    width:60px;
    height:60px;
  }
}