/* =====================================================================
   1) VARIABLES GLOBALES (thème clair par défaut)
   ===================================================================== */
:root{
  --page-bg:#fff;
  --text:#0f172a;
  --muted:#475569;

  /* Traits / bordures */
  --ring:#e2e8f0;
  --ring-w:1px;           /* structure fine */
  --ring-w-thick:2px;     /* cartes, tableaux, encarts */

  --radius:16px;

  /* Surfaces thématiques */
  --blue-hero:#E7F2FF;    /* header + hero */
  --blue-footer:#1E3A8A;  /* footer */
  --red-card:#E74C3C;     /* section cartes */
  --red-card-hover:#d74233;

  --link:#1d4ed8;
  --link-hover:#1e40af;

  /* Boutons NAV */
  --nav-bg:#3b82f6;         /* bleu clair */
  --nav-bg-hover:#2563eb;   /* hover */
  --nav-border:rgba(0,0,0,.08);
  --nav-text:#ffffff;

  /* Table */
  --table-font:0.95rem;
  --table-font-mobile:0.92rem;
  --table-row-sep:1px;
  --table-zebra:#f8fafc;

  /* TTS */
  --tts-fg:#0f172a;
  --tts-bg:#ffffff;
  --tts-border:#e2e8f0;
  --tts-shadow:0 6px 18px rgba(2, 6, 23, .08);
  --tts-shadow-hover:0 10px 28px rgba(2, 6, 23, .12);
}

/* =====================================================================
   2) MODE SOMBRE
   ===================================================================== */
html[data-theme="dark"]{
  --page-bg:#0d0f13;
  --text:#e5e7eb;
  --muted:#94a3b8;

  --ring:#243040;
  --ring-w:1px;
  --ring-w-thick:2px;

  --blue-hero:#0d0f13;
  --blue-footer:#0b1b48;

  --red-card:#b63a2f;
  --red-card-hover:#a2342a;

  --link:#93c5fd;
  --link-hover:#bfdbfe;

  --nav-bg:#2a4db0;
  --nav-bg-hover:#23439b;
  --nav-border:rgba(255,255,255,.12);
  --nav-text:#eaf2ff;

  --table-zebra:#11161f;

  /* TTS */
  --tts-fg:#eaeef9;
  --tts-bg:#0f1115;
  --tts-border:#262a33;
  --tts-shadow:0 6px 18px rgba(0,0,0,.28);
  --tts-shadow-hover:0 12px 30px rgba(0,0,0,.35);
}

/* =====================================================================
   3) VARIANTES (scopées au mode clair)
   ===================================================================== */
html[data-theme="light"] .theme-blue-red{
  --blue-hero:#E7F2FF; --blue-footer:#1E3A8A;
  --red-card:#E74C3C;  --red-card-hover:#d74233;
}
html[data-theme="light"] .theme-green-teal{
  --blue-hero:#E9FCEB; --blue-footer:#065F46;
  --red-card:#0F766E;  --red-card-hover:#0b635c;
}
html[data-theme="light"] .theme-violet-amber{
  --blue-hero:#F3E8FF; --blue-footer:#5B21B6;
  --red-card:#F59E0B;  --red-card-hover:#D97706;
}

/* =====================================================================
   4) RESET & GARDES-FOUS
   ===================================================================== */
*{ box-sizing:border-box; }
html,body{ width:100%; max-width:100%; overflow-x:hidden; }

body{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  transition:background-color .25s,color .25s;
  -webkit-text-size-adjust:100%;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:1100px; margin:0 auto; padding:24px; }

img,svg,video,canvas,iframe{ max-width:100%; height:auto; display:block; }

p,a,code,li,blockquote,summary{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ===== Accessibilité focus ===== */
:focus-visible{
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ===== Réduction des animations si demandé ===== */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* =====================================================================
   5) HEADER / NAV
   ===================================================================== */

/* Force white text on nav buttons */
.site-header .nav a,
.site-header .nav a:link,
.site-header .nav a:visited {
  color: #fff !important;
}

.site-header .nav a {
  background: #1E40AF;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 8px rgba(0,0,0,.15);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.site-header .nav a:hover {
  background: #2563EB;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}
.site-header .nav a:active {
  transform: none;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
}
.site-header .nav a * { color: inherit !important; }

#themeToggle{
  margin-left:8px;
  border:var(--ring-w) solid var(--ring);
  background:transparent; color:var(--text);
  border-radius:12px; padding:6px 10px; cursor:pointer;
}

/* =====================================================================
   6) HERO
   ===================================================================== */
.hero{
  background:var(--blue-hero);
  border-bottom:var(--ring-w) solid var(--ring);
  padding:clamp(24px,4vw,48px) 0;
}
.hero-inner{
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:clamp(16px,2.8vw,24px); align-items:center;
  padding:12px 14px;
}
.hero-inner>:nth-child(2):empty{ display:none; }

.hero h1{
  font-size:clamp(1.35rem,2.2vw + 1rem,1.9rem);
  margin:0 0 8px; line-height:1.22;
}
.hero p{
  font-size:clamp(.97rem,.4vw + .9rem,1.05rem);
  margin:0 0 12px; color:var(--text); opacity:.9;
}
.cta{
  display:inline-block; background:#0b63f6; color:#fff;
  border-radius:12px; padding:10px 14px; font-weight:600;
  box-shadow:0 6px 16px rgb(11 99 246 / 18%);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.cta:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgb(11 99 246 / 22%); }
.cta:active{ transform:none; }

.hero h1,.theme-blue-red h1,.theme-blue-red h2,.theme-blue-red h3{
  background-image:none !important;
  -webkit-background-clip:initial !important;
  -webkit-text-fill-color:currentColor !important;
  mix-blend-mode:normal !important;
  color:var(--text) !important;
}

/* =====================================================================
   7) SECTION CARTES
   ===================================================================== */
.section-cards{ background:var(--red-card); padding:24px 0; }
.section-cards h2{ color:#fff; margin:0 0 12px; }

.grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
}
.card{
  background:#ffffff10; color:#fff;
  border:var(--ring-w-thick) solid rgba(255,255,255,.40);
  border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:6px;
  transition:transform .15s, background .15s, box-shadow .15s, border-color .2s;
  min-width:0;
}
.card:hover{
  background:var(--red-card-hover);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.card .icon{ font-size:1.4rem; }
.card h3{ margin:0; }
.card p{ margin:0; opacity:.9; }

.card--outline{
  background:var(--page-bg); color:var(--text);
  border:var(--ring-w-thick) solid var(--ring);
}
.card--outline:hover{ background:rgba(0,0,0,.03); }

/* =====================================================================
   8) À PROPOS
   ===================================================================== */
.about{ background:var(--page-bg); }
.about .box{
  border:var(--ring-w-thick) solid var(--ring);
  border-radius:14px; padding:18px;
  background:var(--page-bg); color:var(--text);
}

/* =====================================================================
   9) PIED DE PAGE
   ===================================================================== */
.site-footer{ background:var(--blue-footer); color:#dde7ff; margin-top:0; }
.site-footer a{ color:#fff; }

/* =====================================================================
   10) TOC, TABLES, BLOCS TECHNIQUES
   ===================================================================== */
.toc{
  border:var(--ring-w-thick) solid var(--ring);
  border-radius:12px; padding:12px; margin:12px 0;
  background:var(--page-bg);
}

/* ===== TABLEAUX “SMART RESPONSIVE” ===== */

/* Tables markdown dans la prose */
.prose table{
  width:100%;
  border-collapse:separate; border-spacing:0 6px; /* espace entre rangées */
  margin:16px 0; background:var(--page-bg); color:var(--text);
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:var(--ring-w-thick) solid var(--ring); border-radius:12px;
}

/* Wrapper .table (option) */
.table{
  width:100%;
  border-collapse:separate; border-spacing:0 6px;
  margin:16px 0; background:var(--page-bg); color:var(--text);
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:var(--ring-w-thick) solid var(--ring); border-radius:12px;
}

/* En-têtes */
.prose thead th, .table thead th{
  font-weight:700; text-align:left; background:var(--blue-hero);
  border-bottom:calc(var(--table-row-sep) + 1px) solid var(--ring);
  padding:10px 12px; font-size:var(--table-font);
}

/* Cellules (interligne 1.5 + séparation) */
.prose th, .prose td,
.table th, .table td{
  font-size:var(--table-font); line-height:1.5; padding:10px 12px;
  vertical-align:top; word-break:normal; overflow-wrap:normal;
  hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto;
  background:var(--page-bg);
  border-top:var(--table-row-sep) solid var(--ring);
  border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.04);
}

/* Zébrage discret */
.prose tbody tr:nth-child(odd) td,
.table tbody tr:nth-child(odd) td{ background:var(--table-zebra); }

/* Coins doux */
.prose tr:first-child th:first-child,
.table tr:first-child th:first-child{ border-top-left-radius:12px; }
.prose tr:first-child th:last-child,
.table tr:first-child th:last-child{ border-top-right-radius:12px; }
.prose tr:last-child td:first-child,
.table tr:last-child td:first-child{ border-bottom-left-radius:12px; }
.prose tr:last-child td:last-child,
.table tr:last-child td:last-child{ border-bottom-right-radius:12px; }

/* Blocs code */
pre{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }

/* =====================================================================
   11) BOUTON TTS (gros, accessible, réactif)
   ===================================================================== */
.tts-toolbar{
  display:flex; align-items:center; gap:.6rem;
  margin:.25rem 0 1rem;
}

.tts-btn, .btn-tts{
  /* tailles visibles */
  font-size: 2.25rem;               /* ← icône plus grande */
  line-height: 1;
  width: 3.25rem; height: 3.25rem;  /* cercle */
  display: inline-flex; align-items:center; justify-content:center;

  /* style */
  color: var(--tts-fg);
  background: var(--tts-bg);
  border: 1px solid var(--tts-border);
  border-radius: 999px;

  /* feedback */
  box-shadow: var(--tts-shadow);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  user-select: none; -webkit-user-select:none;
  touch-action: manipulation;
}

.tts-btn:hover, .btn-tts:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: var(--tts-shadow-hover);
}

.tts-btn:active, .btn-tts:active{
  transform: translateY(0) scale(0.98);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.18);
}

/* Label d’aide à droite (facultatif) */
.tts-hint, .hint{
  font-size:.92rem;
  color:var(--muted);
}

/* Mobile : un peu plus petit pour éviter le chevauchement */
@media (max-width: 480px){
  .tts-btn, .btn-tts{
    font-size: 2rem;
    width: 3rem; height: 3rem;
  }
}

/* =====================================================================
   12) RESPONSIVE (≤ 820px) — HEADER AÉRÉ + NAV CENTRÉE
   ===================================================================== */
@media (max-width:820px){
  .container{ padding:18px; }

  /* Empile le header : 1) brand  2) nav  3) switch */
  .header-inner{ flex-direction:column; align-items:stretch; gap:14px; }
  .brand{ order:0; text-align:center; font-size:1.05rem; }
  .nav{
    order:1; margin-left:0; justify-content:center;
    gap:10px; row-gap:10px;
  }
  .nav a{ padding:9px 14px; font-size:.95rem; }
  #themeToggle{ order:2; align-self:center; }

  .hero-inner{ grid-template-columns:1fr; gap:12px; padding:10px 12px; }
  .hero h1{ font-size:clamp(1.25rem,3.4vw + 1rem,1.45rem); }
  .hero p{ font-size:.96rem; margin-bottom:10px; }
  .cta{ width:100%; text-align:center; }

  /* tableaux : un poil plus petit */
  .prose th, .prose td, .table th, .table td{
    font-size:var(--table-font-mobile);
    padding:9px 10px; line-height:1.5;
  }
}

/* =====================================================================
   13) (Option) Détecteur de débordement — activer ponctuellement
   ===================================================================== */
/* *{ outline:1px solid rgba(255,0,0,.06); } */