:root{
  --primary:#3b82f6;
  --ink:#111827;
  --muted:#6b7280;
  --card:#ffffff;

  /* 🎨 Fond page : variables du dégradé (haut → bas) */
  --bg-top:#ffffff;     /* blanc, sous le titre et les pastilles */
  --bg-mid:#eaf3fb;     /* bleu très clair (transition douce) */
  --bg-bot:#cfe3f7;     /* bleu clair (zone basse) */

  --border:#e5e7eb;
  --shadow:0 6px 20px rgba(0,0,0,0.06);
  --pill-bg: rgba(59,130,246,0.10);
}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  /* ✅ Dégradé vertical du blanc vers le bleu */
  background: linear-gradient(
    to bottom,
    var(--bg-top) 0%,
    var(--bg-mid) 40%,
    var(--bg-bot) 100%
  );
  min-height: 100dvh;
  line-height:1.5;
  overflow-x:hidden; /* ✅ empêche le débordement horizontal et la bande noire */
}

.wrap{max-width:1000px;margin:0 auto;padding:24px 16px 40px}

/* Header simple */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  flex-wrap: wrap;
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:50%;
}
@media (min-width: 1024px){
  .brand img{ width:52px; height:52px; }
}

/* Nav fixe */
.nav{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  font-size:.98rem;
  color: var(--ink);
  flex: 1;
  flex-wrap: wrap;
  text-align: center;
}
.nav a{
  color: inherit;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
}
.nav a:hover{
  color: var(--primary);
  background: rgba(59,130,246,0.08);
  text-decoration: none;
}

@media (max-width: 700px){
  .nav{
    gap:10px;
    font-size:0.95rem;
    width:100%;
    justify-content:center;
  }
}

/* Footer (identique) */
footer{margin-top:28px;text-align:center;color:var(--muted);font-size:.95rem}
.links{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:6px 0}
.linkbtn{border:0;background:none;color:var(--muted);cursor:pointer;padding:0}
.linkbtn:hover{
  color:var(--primary);
  text-decoration:underline;
}

/* Accessibilité visible */
:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:2px;
}

/* === NAV mobile : icône + hamburger + tiroir === */

/* Icône générique (ex. Me connecter) */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  color: inherit; text-decoration:none;
}
.icon-btn:hover{ color: var(--primary); background: rgba(59,130,246,0.08); }

/* Bouton hamburger (caché en desktop) */
.menu-toggle{
  display:none; border:0; background:transparent; padding:6px;
  border-radius:8px; cursor:pointer;
}
.menu-toggle:hover{ background: rgba(59,130,246,0.08); }

/* Backdrop */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.35);
  z-index: 1001; opacity:0; transition:opacity .2s ease;
}
.backdrop.show{ opacity:1; }

/* Tiroir à droite */
.drawer{
  position: fixed; top:0; right:0; bottom:0; width:clamp(240px, 64vw, 300px);
  background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,0.15);
  transform: translateX(100%); transition: transform .25s ease;
  z-index: 1002; padding:14px;
  display:flex; flex-direction:column; gap:8px;
  border-left:1px solid var(--border);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.drawer.open{ transform: translateX(0%); }
.drawer-nav{ display:flex; flex-direction:column; gap:6px; }
.drawer-nav a{
  padding:9px 10px;
  font-size:0.95rem;
  border-radius:10px;
  text-decoration:none;
  color:var(--ink);
}
.drawer-nav a:hover{ background: rgba(59,130,246,0.08); color: var(--primary); }

/* Texte masqué pour lecteurs d’écran */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Responsive : à 700px, on bascule en mode tiroir */
@media (max-width:700px){
  .nav{ display:none; }          /* cache la nav horizontale (évite le "double") */
  .menu-toggle{ display:inline-flex; }
}

@media (min-width:701px){
  .backdrop{ display:none !important; }
  .drawer{ display:none !important; }
}

/* ✅ Réduction de la hauteur du header sur mobile */
@media (max-width:700px){
  .top{
    padding: 6px 10px; /* légèrement moins haut que 8px 12px */
  }
}