:root{
      --bg:#06422e;
      --card:#0f2a21;
      --muted:#99a6b8;
      --text:#e6edf7;
      --brand:#00ec99;
      --brand-2:#0bc0ae;
      --line:#1f443a;
      --radius:16px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }:root{
      --bg:#06422e;
      --card:#0f2a21;
      --muted:#99a6b8;
      --text:#e6edf7;
      --brand:#00ec99;
      --brand-2:#0bc0ae;
      --line:#1f443a;
      --radius:16px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif;
      color:var(--text); background:linear-gradient(180deg,#081d19,#123927 35%,#114d46);
    }

    /* Header */
    .site-header{
      position:sticky; top:0; z-index:999;
      backdrop-filter:saturate(1.2) blur(8px);
      background:rgba(11,18,32,.6); border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav{
      max-width:1100px; margin:0 auto; padding:12px 20px;
      display:flex; align-items:center; gap:16px;
    }
    .brand{
      display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px;
    }
   .brand a img {
    /* ajuste selon la taille voulue */
  width: 100px;
  display: block;
}
    .brand span{font-size:1.05rem}
    .nav ul{
      list-style:none; margin:0 0 0 auto; padding:0; display:flex; gap:14px; flex-wrap:wrap;
    }
    .nav a{
      color:var(--text); text-decoration:none; font-weight:700; font-size:.95rem;
      padding:8px 12px; border-radius:10px; opacity:.9; transition:.2s ease;
    }
    .nav a:hover{opacity:1; background:rgba(255,255,255,.06)}
    .nav a.active{background:linear-gradient(180deg,var(--brand),var(--brand-2)); color:#053a3a; box-shadow:0 8px 22px rgba(0,255,230,.25)}

    /* Sections */
    section{
      max-width:1100px; margin:0 auto; padding:80px 20px;
    }
    .section-title{
      font-size:1.8rem; font-weight:900; margin:0 0 10px;
    }
    .section-sub{color:var(--muted); margin:0 0 24px}

    /* Hero / Accueil */
    .hero{
      min-height:72vh; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden;
    }
    .hero::before{
      content:""; position:absolute; inset:0;
      background:url('../img/hero.png') center/cover no-repeat;
      opacity:.25; filter:grayscale(10%) contrast(105%);
    }
    .hero > .inner{position:relative; z-index:1; max-width:900px}
    .hero h1{font-size:clamp(1.9rem,3.8vw,3rem); margin:0 0 10px}
    .hero p{color:var(--muted); font-size:clamp(1rem,1.3vw,1.1rem); margin:0 auto 22px; max-width:780px}
    .btn{
      appearance:none; border:0; cursor:pointer; font-weight:800; letter-spacing:.3px;
      padding:12px 18px; border-radius:12px; color:#053a3a;
      background:linear-gradient(180deg,var(--brand),var(--brand-2)); box-shadow:0 10px 28px rgba(0,255,230,.35);
    }
    .btn:focus-visible{outline:2px solid #fff; outline-offset:2px}

    /* À propos */
    .about p{font-size:1.1rem; line-height:1.75; color:#d6dfeb}
    .about .card{
      background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
    }

    /* Offres */
    .grid3{
      display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
    }
    @media (max-width:900px){ .grid3{grid-template-columns:1fr 1fr} }
    @media (max-width:640px){ .grid3{grid-template-columns:1fr} }
    .offer{
      background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
      padding:20px; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease;
    }
    .offer:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.45) }
    .offer .icon{
      width:48px;height:48px;border-radius:12px; display:grid; place-items:center;
      background:rgba(17,225,198,.12); color:var(--brand);
      margin-bottom:10px;
    }
    .offer h3{margin:6px 0 6px}
    .offer p{color:var(--muted); margin:0}

    /* FAQ */
    .faq .acc{
      background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:10px;
    }
    .acc button{
      width:100%; text-align:left; background:transparent; color:var(--text); border:0; padding:16px 18px;
      font-weight:800; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    }
    .acc button:hover{background:rgba(255,255,255,.03)}
    .acc .chev{transition:transform .2s ease; opacity:.8}
    .acc[open] .chev{transform:rotate(180deg)}
    .acc .panel{padding:0 18px 16px; color:var(--muted)}

    /* Contact */
    .contact .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
    .cta-row{display:flex; gap:12px; flex-wrap:wrap}
    .btn-ghost{
      background:transparent; color:var(--text); border:1px solid var(--line);
      padding:12px 16px; border-radius:12px; font-weight:800;
    }
    .btn-ghost:hover{background:rgba(255,255,255,.06)}
    .cta-row a{text-decoration:none}
    .muted{color:var(--muted)}

    /* Footer */
    footer{padding:40px 20px; text-align:center; color:#9fb0c6}
    /* layout de base */
.site-header{
  position: sticky; top:0; z-index: 1000;
  backdrop-filter: blur(8px) saturate(1.1);
  background: rgba(11,18,32,.6);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{
  max-width: 1100px; margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 16px;
}
.nav .brand{ display:flex; align-items:center }
.nav ul{
  list-style: none; margin-left: auto; padding: 0;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.nav a{ color:#e6edf7; text-decoration:none; font-weight:700; font-size:.95rem;
  padding:8px 12px; border-radius:10px; opacity:.9; transition:.2s ease; }
.nav a:hover{ opacity:1; background: rgba(255,255,255,.06); }

/* --- styles burger (le bouton sera injecté par JS) --- */
.nav-toggle{
  display:none; margin-left:auto; width:42px; height:42px; border:0; background:transparent; cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; background:#e6edf7; margin:7px 8px; border-radius:2px; transition:.25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg) }

/* --- responsive --- */
@media (max-width: 720px){
  .nav{ padding:10px 14px }
  .nav-toggle{ display:block }

  .nav ul{
    position: fixed; inset: auto 0 0 0; top: 58px;
    background: rgba(11,18,32,.95); backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,.06);
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;   /* ✅ empêche l’alignement horizontal */
    gap: 0;
    padding: 8px 12px;
  }

  .nav ul.show{ display: flex; }
  .nav ul li{ border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav ul li:last-child{ border-bottom: 0; }
  .nav ul a{ display:block; padding:14px }
}