/* Root & theming */
:root {
  --bg: #ffffff;
  --text: #0a0a0a;
  --muted: #6b7280;
  --card: #f7f7f7;
  --border: #e5e7eb;
  --primary: #111827;
  --primary-contrast: #ffffff;
  --secondary: #111827;
  --pill-on: #16a34a;
  --link: #111827;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --text: #f5f5f5;
    --muted: #a3a3a3;
    --card: #111217;
    --border: #26272b;
    --primary: #e5e7eb;
    --primary-contrast: #0b0b0b;
    --secondary: #1f2937;
    --pill-on: #22c55e;
    --link: #e5e7eb;
  }
}

/* Force theme via [data-theme] */
html[data-theme="light"] {
  --bg:#ffffff; --text:#0a0a0a; --muted:#6b7280; --card:#f7f7f7; --border:#e5e7eb;
  --primary:#111827; --primary-contrast:#ffffff; --secondary:#111827; --pill-on:#16a34a; --link:#111827;
}
html[data-theme="dark"] {
  --bg:#0a0a0a; --text:#f5f5f5; --muted:#a3a3a3; --card:#111217; --border:#26272b;
  --primary:#e5e7eb; --primary-contrast:#0b0b0b; --secondary:#1f2937; --pill-on:#22c55e; --link:#e5e7eb;
}

/* Layout */
* { box-sizing: border-box }
html, body { height: 100% }
body { margin:0; background: var(--bg); color: var(--text); font: 15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; }

.wrap { max-width: 1120px; padding: 0 16px; margin: 0 auto; }

.site-header {
  position: sticky; top:0; z-index:10;
  background: color-mix(in srgb, var(--bg), transparent 30%);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 20%);
}
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }

.brand { display:flex; align-items:center; gap:10px; }
.brand-logo { width:28px; height:28px; border-radius:9px; object-fit:cover; }
.brand-asn { font-weight:600; letter-spacing:.2px; }
.badge { font-size:12px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted); }

.nav { display:flex; gap:20px; }
.nav a { color:var(--text); text-decoration:none; opacity:.85 }
.nav a:hover { text-decoration:underline }

.actions { display:flex; align-items:center; gap:8px; }

.site-footer { border-top:1px solid color-mix(in srgb, var(--border), transparent 20%); padding:24px 0; margin-top:40px; }
.footer-flex { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.foot-links { display:flex; gap:18px; }
.foot-links a { color:var(--link) }

/* Hero */
.hero { text-align:center; padding:64px 0 80px; }
.hero--compact { padding:40px 0 24px; }
.hero-title { font-size: clamp(32px, 6vw, 56px); font-weight:800; letter-spacing:.2px; margin:0 }
.hero-sub { margin:.5rem 0 0; color:var(--muted) }
.hero-cta { margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Sections, cards, grid */
.section { padding: 32px 0; }
.section-title { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.section-title h2 { font-size:22px; font-weight:700; margin:0; letter-spacing:.2px }

.grid { display:grid; gap:16px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .grid { grid-template-columns: 1fr 1fr; } }
.lg-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 980px) { .lg-grid { grid-template-columns: repeat(3, 1fr); } }

.card { background: var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; }
.card-title { margin:0 0 10px; font-size:16px; font-weight:700; }
.link-card { display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--text); min-height:84px; }

/* Tables & lists */
.table-wrap { overflow:auto }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:8px 12px; border-top: 1px solid color-mix(in srgb, var(--border), transparent 25%); }
.table thead th { border-top:none; color:var(--muted); font-weight:600; }
.list { margin:0; padding-left:18px; }
.list.two-col { columns: 2; column-gap: 20px; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); }
.pill-on { background: color-mix(in srgb, var(--pill-on), transparent 80%); color: var(--pill-on); border-color: color-mix(in srgb, var(--pill-on), transparent 60%); }

/* Buttons */
.btn { --btn-bg:transparent; --btn-bd: var(--border); --btn-fg: var(--text);
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--btn-bd);
  color:var(--btn-fg); background:var(--btn-bg); text-decoration:none; font-weight:600;
}
.btn:hover { filter:none; transform: translateY(-0.5px); }
.btn-primary { --btn-bg: var(--primary); --btn-bd: var(--primary); --btn-fg: var(--primary-contrast); }
.btn-secondary { --btn-bg: var(--secondary); --btn-bd: var(--secondary); --btn-fg: #fff; }
.btn-outline { --btn-bg: transparent; --btn-bd: var(--border); --btn-fg: var(--text); }
.btn-icon { width: 42px; height: 42px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--border); background:transparent; }
.btn-icon:hover { background: color-mix(in srgb, var(--border), transparent 70%); }

/* icônes propres dans les boutons */
.btn svg { width:18px; height:18px; display:block; }
.btn svg *, .btn svg { fill: currentColor !important; stroke: none !important; background: transparent !important; }

/* outline plus visible selon thème */
html[data-theme="dark"] .btn-outline { --btn-bd: color-mix(in srgb, var(--text), transparent 75%); --btn-fg: var(--text); }

/* Focus */
.btn:focus-visible, .btn-icon:focus-visible { outline: 2px solid color-mix(in srgb, var(--link), transparent 40%); outline-offset: 2px; }

/* Utilities */
a { color: var(--link); }

/* --- FIX ICONES DANS LES BOUTONS --- */
/* Toutes les icônes héritent de la couleur du texte du bouton */
.btn svg { width: 18px; height: 18px; display: block; }
.btn svg *,
.btn svg { fill: currentColor !important; stroke: none !important; background: transparent !important; }

/* Outline lisible en thème clair */
.btn-outline { --btn-bg: transparent; --btn-bd: color-mix(in srgb, var(--text), transparent 85%); --btn-fg: var(--text); }

/* Hover/focus pour mieux ressortir en clair et sombre */
.btn:hover { filter:none; transform: translateY(-0.5px); }
.btn:focus-visible,
.btn-icon:focus-visible { outline: 2px solid color-mix(in srgb, var(--link), transparent 40%); outline-offset: 2px; }

/* Bouton icône (toggle) – améliore le contraste et l’aire cliquable */
.btn-icon { width: 42px; height: 42px; border-radius: 12px; }
.btn-icon:hover { background: color-mix(in srgb, var(--border), transparent 70%); }

/* Pour éviter l’effet “désactivé” en sombre sur le Status outline */
html[data-theme="dark"] .btn-outline { --btn-bd: color-mix(in srgb, var(--text), transparent 75%); --btn-fg: var(--text); }