/* ===========================
   Charte graphique (réutilisable)
   Modifiez uniquement les variables :root pour adapter la palette.
   =========================== */
:root{
  --bg: #0b1020;
  --surface: #121a33;
  --surface-2: #0f1730;
  --text: #eaf0ff;
  --muted: rgba(234,240,255,.75);

  --primary: #6ea8fe;
  --primary-2: #4c8dff;
  --accent: #7ee3c0;
  --warning: #ffcc66;
  --danger: #ff6b6b;
  --ok: #65e6a6;

  --border: rgba(234,240,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --maxw: 1080px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(110,168,254,.22), transparent 60%),
              radial-gradient(900px 600px at 95% 0%, rgba(126,227,192,.14), transparent 55%),
              var(--bg);
  color: var(--text);
}

.container{ width:min(var(--maxw), calc(100% - 32px)); margin:0 auto; }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-decoration-color: rgba(234,240,255,.5); }

.topbar{
  position:sticky; top:0; z-index:10;
  background: rgba(11,16,32,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
  gap: 16px;
}

.brand{ display:flex; gap:12px; align-items:center; }
.brand__logo{
  width:40px; height:40px; border-radius: 12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(110,168,254,.25), rgba(126,227,192,.18));
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  font-weight:800;
}
.brand__title{ font-weight:800; letter-spacing:.2px; }
.brand__subtitle{ font-size:.9rem; color: var(--muted); margin-top:2px; }

.nav{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.nav__link{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--muted);
}
.nav__link:hover{
  border-color: var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration:none;
}

.card{
  background: linear-gradient(180deg, rgba(18,26,51,.92), rgba(15,23,48,.92));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card__header{ padding: 18px 18px 0 18px; }
.card__content{ padding: 18px; }
.card__title{ font-size:1.15rem; font-weight:800; margin:0; }
.card__subtitle{ color: var(--muted); margin:8px 0 0 0; }

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.col-12{ grid-column: span 12; }
.col-8{ grid-column: span 8; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }
@media (max-width: 900px){
  .col-8,.col-6,.col-4{ grid-column: span 12; }
}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.03);
  font-size:.9rem;
}
.badge--warn{ border-color: rgba(255,204,102,.35); color: rgba(255,204,102,.95); }
.badge--ok{ border-color: rgba(101,230,166,.35); color: rgba(101,230,166,.95); }

.btn{
  appearance:none; border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{ background: rgba(255,255,255,.07); }
.btn:active{ transform: translateY(1px); }
.btn--primary{
  border-color: rgba(110,168,254,.45);
  background: linear-gradient(135deg, rgba(110,168,254,.18), rgba(76,141,255,.10));
}
.btn--ghost{ background: transparent; }

.input, select{
  width:100%;
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  outline:none;
}
.input:focus, select:focus{
  border-color: rgba(110,168,254,.55);
  box-shadow: 0 0 0 4px rgba(110,168,254,.12);
}

.hr{ height:1px; background: var(--border); margin: 14px 0; }
.kbd{
  font-family: var(--mono);
  font-size:.9rem;
  padding:2px 6px;
  border-radius: 8px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}

.footer{
  margin-top: 40px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.12);
}
.footer__inner{
  padding: 16px 0;
  color: var(--muted);
  font-size: .95rem;
}


/* Améliore la lisibilité des listes déroulantes (options) sur certains navigateurs */
select{
  color-scheme: dark; /* hint pour menus natifs */
}
select option{
  background-color: var(--surface);
  color: var(--text);
}
select option:disabled{
  color: rgba(234,240,255,.55);
}