/* ================================
   Design system: épuré, moderne
   ================================ */
:root{
  --bg:#f7f7f8; --surface:#ffffff; --text:#0f1222; --muted:#6b7280;
  --primary:#4757e6; --primary-weak:#e7e9ff; --ring:rgba(71,87,230,.35);
  --border:#e5e7eb; --shadow:0 10px 25px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --radius:16px; --radius-sm:12px; --gap:28px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c10; --surface:#111318; --text:#eceff4; --muted:#9aa3b2;
    --primary:#8ea0ff; --primary-weak:#1a213b; --ring:rgba(142,160,255,.35);
    --border:#232632; --shadow:0 10px 25px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  }
}

/* Base + reset */
html, body { height:100%; margin:0; padding:0; }
* { box-sizing:border-box; }
body{
  min-height:100vh; display:flex; flex-direction:column;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, var(--primary-weak), transparent 40%), var(--bg);
  line-height:1.6;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:16px; padding:12px 20px; height:75px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--border);
}
.logo-pair{ display:flex; align-items:center; gap:10px; }
.logo-pair img{ height:55px; width:auto; }
@media (max-width:600px){ .logo-pair img{ height:40px; } }
@media (max-width:500px){ .logo-pair img{ height:30px; } }
@media (max-width:430px){ .logo-pair img{ height:25px; } }
@media (max-width:380px){ .logo-pair img{ height:20px; } }
@media (max-width:340px){ .logo-pair img{ height:16px; } }

/* Boutons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; user-select:none;
  border-radius:12px; border:1px solid var(--border); padding:12px 18px; font-weight:600; text-decoration:none;
  background: linear-gradient(180deg, var(--surface), rgba(0,0,0,.01)); box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:focus{ outline:none; border-color:var(--ring); box-shadow: var(--shadow), 0 0 0 6px var(--ring); }
.btn.primary{ background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 86%, black 0%)); color:#fff; border-color:transparent; }
.btn.primary:hover{ filter: brightness(1.02); }
.btn.ghost{ background: var(--surface); }

/* Menu */
.header-menu{ display:flex; align-items:center; gap:18px; justify-self:center; }
.header-menu .divider{ opacity:.35; }
.header-menu a{ color:var(--text); font-size:18px; text-decoration:none; position:relative; padding:6px 2px; }
.header-menu a:hover{ color: color-mix(in srgb, var(--text) 82%, white 18%); }
.header-menu a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--primary); border-radius:2px; }

/* Menu mobile */
.mobile-menu{ display:none; position:relative; justify-self:start; }
#menu-toggle{ border-radius:999px; }
.dropdown-content{
  display:none; position:absolute; top:100%; left:50%; min-width:180px; transform: translateX(-50%);
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px;
}
.dropdown-content a{ display:block; padding:10px 12px; border-radius:10px; color:var(--text); text-decoration:none; }
.dropdown-content a:hover{ background: var(--primary-weak); }
.dropdown-content.show{ display:block; z-index:1000; }

.btn,
#menu-toggle {
  color: var(--text);
}


/* Footer */
.site-footer{
  margin-top:auto; background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-top:1px solid var(--border); text-align:center; padding:12px 16px; font-size:14px; color:var(--muted);
}
.site-footer a{ color:var(--primary); text-decoration:none; margin:0 6px; }
.site-footer a:hover{ text-decoration:underline; }

/* Empêcher la casse de ligne et réduire l'encombrement */
#carte-button,
.mobile-menu { white-space: nowrap; }

@media (max-width:900px){
  .header-menu{ display:none; }
  .mobile-menu{ display:inline-block; }
}

/* Centrer le menu mobile dans le bandeau */
@media (max-width:900px){
  .mobile-menu{
    display:flex;                /* active le flex interne */
    justify-self:center;         /* centre dans la grille */
    justify-content:center;      /* centre le bouton à l'intérieur */
    width:100%;                  /* occupe toute la colonne centrale */
  }
  #menu-toggle{
    margin:0 auto;               /* bouton parfaitement centré */
  }
}

/* 600px */
@media (max-width:600px){
  #carte-button,
  #menu-toggle{
    padding:10px 14px;
    font-size:15px;
  }
  .site-header{ gap:14px; } /* un peu moins d'espace entre les zones */
}

/* 500px */
@media (max-width:500px){
  #carte-button,
  #menu-toggle{
    padding:9px 12px;
    font-size:14px;
  }
  .site-header{ gap:12px; }
}

/* 430px */
@media (max-width:430px){
  #carte-button,
  #menu-toggle{
    padding:8px 10px;
    font-size:13px;
  }
  .site-header{ gap:10px; }
}

/* 380px */
@media (max-width:380px){
  #carte-button,
  #menu-toggle{
    padding:7px 10px;
    font-size:12px;
  }
  .site-header{ gap:8px; }
}

/* 340px */
@media (max-width:340px){
  #carte-button,
  #menu-toggle{
    padding:6px 8px;
    font-size:11px;
  }
  .site-header{ gap:6px; }
}