/* ============== Global (Unified) Styles ============== */
:root{
  /* Color system */
  --bg: #0f172a;           /* slate-900 */
  --bg-soft: #111827;      /* gray-900 */
  --card: #111827;
  --text: #e5e7eb;         /* gray-200 */
  --muted: #9ca3af;        /* gray-400 */
  --accent: #7c3aed;       /* violet-600 */
  --accent-2: #22d3ee;     /* cyan-400 */
  --border: #1f2937;       /* gray-800 */

  /* Sizing */
  --maxw: 1200px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --transition: 220ms ease;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0; background:linear-gradient(180deg,var(--bg),#0b1220 60%, #0a0f1a);
  color:var(--text); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.container{max-width:var(--maxw); margin-inline:auto; padding:clamp(16px,3vw,32px)}
.section{padding:clamp(28px,5vw,56px) 0}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
}
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1.2rem;
  border-radius:999px; border:1px solid transparent; font-weight:600; letter-spacing:.2px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#081018;
  transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(34,211,238,.35)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--border)}

/* Header / Nav */
.header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(8px);
  background:rgba(7,12,20,.55); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:var(--maxw); margin-inline:auto; padding:.8rem 1rem}
.logo{font-weight:800; letter-spacing:.5px}
.nav a{padding:.5rem .9rem; border-radius:10px; color:var(--muted)}
.nav a.active, .nav a:hover{color:var(--text); background:rgba(124,58,237,.08)}

/* Footer */
.footer{border-top:1px solid var(--border); padding:24px 0; color:var(--muted)}
.footer .grid{display:grid; gap:16px; grid-template-columns:1fr;}
.footer small{opacity:.7}

/* Hero */
.hero{display:grid; align-items:center; gap:28px; min-height:62vh}
.hero h1{font-size:clamp(28px,6vw,52px); line-height:1.1; margin:0}
.hero p{color:var(--muted); max-width:60ch}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}

/* Utilities */
.grid{display:grid; gap:clamp(16px,2vw,24px)}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width: 900px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .grid-3,.grid-2{grid-template-columns:1fr} }

.badge{font-size:.78rem; color:var(--accent-2); border:1px solid var(--border);
  padding:.25rem .6rem; border-radius:999px; background:rgba(34,211,238,.08)}

/* Lightbox (shared) */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.7); display:none;
  align-items:center; justify-content:center; padding:24px; z-index:60}
.lightbox.open{display:flex}
.lightbox__content{background:#0b1422; border:1px solid var(--border); border-radius:12px; max-width:95vw; max-height:90vh; overflow:auto}
.lightbox__close{position:absolute; top:16px; right:16px; font-size:22px; cursor:pointer}

/* Forms */
.input, textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--border);
  background:rgba(255,255,255,.02); color:var(--text); outline:none; transition:border var(--transition)
}
.input:focus, textarea:focus{border-color:var(--accent)}
label{font-weight:600; font-size:.9rem}

/* Chips / filters */
.chips{display:flex; gap:.6rem; flex-wrap:wrap}
.chip{border:1px solid var(--border); padding:.45rem .8rem; border-radius:999px; cursor:pointer; color:var(--muted)}
.chip.active, .chip:hover{color:var(--text); background:rgba(124,58,237,.08); border-color:#2b2f3a}

/* Scroll-to-top */
#backToTop{position:fixed; right:16px; bottom:16px; opacity:0; pointer-events:none}
#backToTop.show{opacity:1; pointer-events:auto}

/* Le bouton ☰ */
/* Par défaut, le menu est visible en desktop */
#navMenu {
  display: flex;
  gap: 20px;
}

/* Sur mobile, on cache le menu */
@media (max-width: 768px) {
  #navMenu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px; /* sous le header */
    right: 20px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
  }

  /* Quand la classe .open est ajoutée, on affiche */
  #navMenu.open {
    display: flex;
  }

  /* Affiche le bouton hamburger uniquement en mobile */
  #navToggle {
    display: block;
  }
}

/* En desktop, on cache le bouton hamburger */
#navToggle {
  display: none;
}