/* ===== Variables / Themes ===== */
:root{
  --bg:#f7f8fb; --bg-soft:#ffffff; --txt:#0f1222; --muted:#596072;
  --brand:#3b82f6; /* 🔵 Couleur principale */
  --ring:#3b82f6; --border:#e6e8ef;
  --chip:#f1f3f9; --chip-txt:#1f2433; --ok:#16a34a;
  --shadow:0 10px 30px rgba(16,24,40,.06);
  --radius:16px; --container:1200px;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"]{
    --bg:#0c0f16; --bg-soft:#121624; --txt:#e7e9f4; --muted:#aab1c7;
    --brand:#3b82f6;
    --ring:#60a5fa; --border:#1d2335; --chip:#171c2d;
    --chip-txt:#dce1f4; --ok:#22c55e; --shadow:0 16px 40px rgba(0,0,0,.5);
  }
}
html[data-theme="dark"]{
  --bg:#0c0f16; --bg-soft:#121624; --txt:#e7e9f4; --muted:#aab1c7;
  --brand:#3b82f6;
  --ring:#60a5fa; --border:#1d2335; --chip:#171c2d;
  --chip-txt:#dce1f4; --ok:#22c55e; --shadow:0 16px 40px rgba(0,0,0,.5);
}

/* ===== Base ===== */
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Cantarell,Noto Sans,sans-serif}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:100;background:var(--bg-soft);border-bottom:1px solid var(--border)}
.wrap{max-width:var(--container);margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px}
.logo-img{width:42px;height:42px;border-radius:10px;box-shadow:0 0 0 2px rgba(0,0,0,.05);background:conic-gradient(from 140deg,var(--brand),#f59e0b,#10b981,#8b5cf6)}
.brand-text{display:flex;flex-direction:column}
.brand-title{font-size:clamp(18px,2.2vw,22px);font-weight:800;line-height:1}
.muted{color:var(--muted);font-size:.9rem}

.topnav{display:flex;align-items:center;gap:12px}
.hamburger{display:none;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:transparent;cursor:pointer}
.toggle{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:transparent;cursor:pointer}
.nav-menu{display:flex;align-items:center;gap:10px}
.nav-menu a{padding:8px 12px;border-radius:10px;border:1px solid var(--border)}
.nav-menu a:hover{border-color:#c8cde0}

/* Mobile nav */
@media (max-width: 820px){
  .hamburger{display:inline-flex}
  .nav-menu{position:absolute;right:16px;top:60px;background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:10px;display:none;flex-direction:column;min-width:180px}
  .nav-menu.open{display:flex}
}

/* ===== Hero ===== */
.hero{max-width:var(--container);margin:22px auto 0;padding:0 16px 8px}
.headline{margin:0 0 4px;font-size:clamp(26px,4vw,40px);font-weight:800}
.sub{margin:6px 0 0;color:var(--muted)}
.panel{margin:16px 0 0;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.panel-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.search{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--txt);outline:none}
.search:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--chip);color:var(--chip-txt);border:1px solid var(--border);padding:8px 12px;border-radius:999px;cursor:pointer}
.chip[data-active="true"]{background:linear-gradient(145deg,#3b82f6,#8b5cf6);color:#fff;border-color:transparent;font-weight:700}

/* ===== Grid ===== */
.container{max-width:var(--container);margin:18px auto;padding:0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{display:flex;flex-direction:column;background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .16s ease,box-shadow .16s ease}
.card:hover{transform:translateY(-4px)}
.thumb{position:relative;aspect-ratio:16/9;background:#0b1020}
.thumb img{width:100%;height:100%;object-fit:cover}
.pill{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.6);color:#fff;padding:4px 10px;border-radius:999px;font-size:.78rem}
.flag{position:absolute;bottom:10px;left:10px;background:var(--ok);color:#04210f;border-radius:6px;padding:4px 8px;font-size:.72rem;font-weight:800}
.body{padding:12px 14px}
.title{margin:0 0 8px;font-size:1.06rem;font-weight:800}
.meta{display:flex;gap:6px;flex-wrap:wrap}
.tag{background:#eef2ff;border:1px solid #c7d2fe;color:#1e3a8a;border-radius:999px;padding:2px 8px;font-size:.78rem}
html[data-theme="dark"] .tag, html[data-theme="auto"][data-dark="1"] .tag{background:#1c243f;border-color:#33406b;color:#cbd5ff}
.desc{margin:10px 0 0;color:var(--muted);font-size:.92rem}

/* ===== Footer ===== */
footer{margin-top:28px;background:var(--bg-soft);border-top:1px solid var(--border)}
.foot{max-width:var(--container);margin:0 auto;padding:18px 16px;text-align:center}
.foot nav a{color:#000000;margin:0 8px;font-weight:700;text-decoration:none}
.foot nav a:hover{text-decoration:underline}
.copy{color:var(--muted);font-size:.88rem;margin-top:6px}

/* ===== Tables ===== */
.table-wrap{
  max-width:960px;
  margin:16px auto;
  overflow-x:auto;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
table{width:100%;border-collapse:collapse;min-width:640px}
thead th{
  position:sticky;top:0;
  background:var(--brand);color:#fff;
  text-align:left;font-weight:800;letter-spacing:.2px;
}
th,td{padding:12px 14px;border-bottom:1px solid var(--border)}
tbody tr:nth-child(odd){background:#fff}
tbody tr:nth-child(even){background:#f9fafc}
html[data-theme="dark"] tbody tr:nth-child(odd){background:#0c1020}
html[data-theme="dark"] tbody tr:nth-child(even){background:#0f1426}
td code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;white-space:nowrap}
.table-meta{color:var(--muted);font-size:.9rem;margin:10px auto 0;max-width:960px;padding:0 8px;text-align:center}
@media (max-width:680px){ th:nth-child(4),td:nth-child(4){display:none} }

/* ===== Mobile-friendly table cards ===== */
@media (max-width:560px){
  thead{ display:none; }
  tbody, tr, td{ display:block; width:100%; }
  tr{
    margin-bottom:12px;
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:10px;
    padding:8px;
    box-shadow:var(--shadow);
  }
  td{
    padding:6px 8px;
    border:none;
  }
  td::before{
    content:attr(data-label);
    display:block;
    font-weight:700;
    color:var(--brand);
    margin-bottom:2px;
  }
  td code{
    display:inline-block;
    background:rgba(0,0,0,.06);
    padding:2px 6px;
    border-radius:6px;
    color:var(--muted);
    font-weight:700;
    word-break:break-word;
    white-space:normal;
  }
}
/* Tabs (compatibles thème) */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.tab-btn{padding:10px 14px;border:1px solid var(--border);background:var(--chip);color:var(--chip-txt);border-radius:999px;cursor:pointer}
.tab-btn.active{background:linear-gradient(145deg,var(--brand),#8b5cf6);color:#fff;border-color:transparent;font-weight:700}
.tab-content{display:none}
.tab-content.active{display:block}
/* ===== Forms ===== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-form label {
  font-weight: 600;
  font-size: .95rem;
  color: var(--txt);
}

.contact-form input,
.contact-form textarea {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--txt);
  font-size: 1rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form button {
  align-self: flex-start;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--brand), #8b5cf6);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}