/* ========== Variables ========== */
:root{
  --brand:#12c7c7;
  --text:#0e1a2a;
  --muted:#6b7280;
  --bg:#ffffff;
}

/* ========== Reset / base ========== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Helvetica,Arial,sans-serif; color:var(--text); background:var(--bg); }
img{ max-width:100%; height:auto; display:block; }
.container{ max-width:1120px; margin:0 auto; padding:0 16px; }

/* ========== Header ========== */
header{
  position:sticky; top:0; z-index:999;
  background:#fff;
  border-bottom:1px solid #eee;
}
.header-inner{
  height:72px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:700; }
.logo img{ height:64px; width:auto; }

/* Desktop nav */
header nav{ display:flex; }
header nav ul{ display:flex; gap:20px; list-style:none; margin:0; padding:0; }
header nav a{ color:var(--text); text-decoration:none; font-weight:600; }
header nav a:hover{ color:var(--brand); }

/* Boutons */
.btn{
  background:var(--brand); color:#fff; border:none;
  border-radius:999px; padding:10px 16px; text-decoration:none; font-weight:700;
}
.btn:hover{ filter:brightness(0.95); }

/* Hamburger */
.hamburger{
  display:none;
  background:none; border:none;
  font-size:28px; line-height:1; cursor:pointer;
}
.hamburger:focus{ outline:2px solid transparent; }

/* ========== Hero ========== */
.hero{
  position:relative;
  min-height:72vh;
  display:grid; place-items:center;
  color:#fff;
  background:
    linear-gradient(to bottom, rgba(14,26,42,.58), rgba(14,26,42,.58)),
    url('/assets/hero.jpg') center/cover no-repeat;
}
.hero .container{
  display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center;
}
.hero h1{ font-size:48px; line-height:1.1; margin:0 0 16px; }
.hero p{ font-size:18px; color:#e5e7eb; margin:0 0 24px; }

/* ========== Sections / cartes / footer génériques ========== */
.section{ padding:64px 0; }
h2{ font-size:32px; margin:0 0 12px; }
.lead{ color:var(--muted); max-width:760px; }
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.card{ border:1px solid #eee; border-radius:16px; padding:20px; }
.card h3{ margin:0 0 8px; }
.card p{ color:var(--muted); }

footer{ background:#0e1a2a; color:#cbd5e1; }
footer .cols{ display:grid; gap:24px; grid-template-columns:1fr 1fr; }
footer a{ color:#cbd5e1; text-decoration:none; }
.brand{ display:flex; align-items:center; gap:12px; }

/* ========== Responsive ========== */
@media (max-width:900px){
  .hero .container{ grid-template-columns:1fr; }
}

@media (max-width:768px){
  /* header */
  .header-inner{ height:64px; }
  .logo img{ height:52px; }

  /* afficher le burger, cacher la nav */
  .hamburger{ display:block; }

  header nav{
    display:none;
    position:absolute; top:64px; left:0; right:0;
    background:#fff; border-bottom:1px solid #eee;
    padding:12px 0;
  }
  header nav.open{ display:block; }
  header nav ul{ flex-direction:column; gap:0; }
  header nav li{ border-top:1px solid #f1f5f9; }
  header nav li:first-child{ border-top:none; }
  header nav a{ display:block; padding:12px 16px; }

  /* empêcher le scroll quand le menu est ouvert */
  body.menu-open{ overflow:hidden; }

  /* hero plus compact */
  .hero{ min-height:60vh; }
  .hero h1{ font-size:36px; }
}