:root{
  --bg:#0f172a; --fg:#e2e8f0; --muted:#94a3b8; --card:#111827; --accent:#38bdf8;
  --max: 1500px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#0b1220;
  color:var(--fg);
}

a{
  color:var(--accent);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

/* Layout principal */

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 1rem;
}

/* Header sticky */

.site-header{
  display:flex;
  align-items:center;
  gap:1rem;
  position:sticky;
  top:0;
  background:rgba(11,18,32,.8);
  backdrop-filter:blur(6px);
  padding:.75rem 0;
  border-bottom:1px solid #1f2937;
  z-index:10;
}

.brand a{
  font-weight:800;
  color:var(--fg);
  font-size:1.05rem;
}

/* Navigation = blocs centrés */

.site-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  flex:1;                    /* occupe l’espace entre brand et langue */
  justify-content:center;    /* centre la rangée de blocs */
}

/* chaque lien = un “bloc” */
.site-nav a{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .75rem;
  border-radius:.7rem;
  background:#0e1628;
  border:1px solid #1f2937;
  color:var(--fg);
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
}

/* lien “actif” si tu mets aria-current="page" plus tard */
.site-nav a[aria-current="page"]{
  background:#111827;
  border-color:#1f2937;
}

/* icône du bloc */
.nav-icon{
  font-size:1.1rem;
}

/* texte du bloc */
.nav-label{
  font-size:.95rem;
}

/* Language switch */

.lang-switch{
  display:flex;
  gap:.5rem;
  align-items:center;
  margin-left:1rem;
  white-space:nowrap;
}

.lang-switch .active{
  font-weight:600;
}

.lang-switch .muted{
  color:var(--muted);
}

/* Ancien sélecteur de langue par drapeaux (si utilisé ailleurs) */

.lang{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.lang img{
  width:28px;
  height:20px;
  border-radius:3px;
  box-shadow:0 0 4px rgba(0,0,0,.3);
}

/* Burger menu pour mobile */

.burger{
  display:none;
  cursor:pointer;
  padding:.2rem .5rem;
  border-radius:.4rem;
}

#nav-toggle{
  display:none;
}

/* Mobile */

@media (max-width: 760px){
  .site-nav{
    position:absolute;
    inset:3.3rem 0 auto 0;
    display:none;
    flex-direction:column;
    background:#0b1220;
    border-top:1px solid #1f2937;
    padding:.5rem 1rem;
  }

  .burger{
    display:block;
    margin-left:auto;
    color:var(--fg);
    font-size:1.4rem;
  }

  /* IMPORTANT : on passe par le placeholder qui contient le header */
  #nav-toggle:checked ~ .site-header .site-nav{
    display:flex;
  }

  .site-nav a{
    width:100%;
    justify-content:flex-start;
    white-space:normal; /* le texte peut aller à la ligne */
  }
}

/* Contenu principal */

.content{
  padding:1.2rem 0 3rem;
}

/* Sections type "hero" */

.hero{
  padding:2rem 1rem;
  background:linear-gradient(180deg,#0b1220,#0b1220 60%,#0c1426);
  border:1px solid #1f2937;
  border-radius:1rem;
}

.hero h1{
  margin-top:0;
  margin-bottom:.5rem;
  font-size:clamp(1.6rem,4vw,2.2rem);
}

.hero .cta{
  display:inline-block;
  margin-top:.75rem;
  background:var(--accent);
  color:#00233a;
  padding:.6rem 1rem;
  border-radius:.7rem;
  font-weight:700;
}

/* Cartes & grilles */

.quick-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.5rem;
  margin:1rem 0 0;
  padding:0;
  list-style:none;
}

.card{
  display:block;
  background:#0e1628;
  border:1px solid #1f2937;
  border-radius:1rem;
  padding:1rem;
  color:var(--fg);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:1rem;
  margin:1rem 0;
}
/* Mobile fix — évite que les cartes débordent */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* Texte */

.note{
  color:var(--muted);
  font-size:.95rem;
}

.inventory{
  line-height:1.9;
}

.bullets{
  line-height:1.8;
}

/* Footer générique + variante site-footer */

footer{
  border-top:1px solid #1f2937;
  text-align:center;
  padding:1rem;
  color:#94a3b8;
  font-size:0.9rem;
  margin-top:2rem;
}

.site-footer{
  margin-top:2rem;
  padding:1.2rem 0;
  border-top:1px solid #1f2937;
  color:var(--muted);
  font-size:.95rem;
}

/* Boutons / liens de retour */

.back a{
  display:inline-block;
  margin-top:1rem;
}

/* Styles généraux issus d'index-en.html */

/* On enlève le max-width de 800px pour laisser respirer les pages larges */
main{
  margin:2rem 0;
  padding:0;
}

h2{
  color:var(--accent);
  font-size:1.5rem;
  margin-top:1.5rem;
}

ul{
  list-style:none;
  padding:0;
}

li::before{
  content:"• ";
  color:var(--accent);
}

.cta{
  display:inline-block;
  margin-top:1rem;
  padding:0.6rem 1rem;
  background:var(--accent);
  color:#0b1220;
  border-radius:.5rem;
  font-weight:600;
  text-decoration:none;
}