/* =========================================================
   VPN LÉGAL FRANCE — Feuille de style système
   Extraite des 3 pages inline (home v3, vpn-torrent, vpn-streaming)
   le 19/08/2026. Source de vérité unique pour le CSS du site.

   Structure du fichier :
   1. Tokens
   2. Reset & base
   3. Layout
   4. Header, nav, menu mobile
   5. Breadcrumb
   6. Hero (home) & page-hero (sous-pages)
   7. Boutons
   8. Bandeau légal
   9. Eyebrow & section-intro
   10. Prose & callout
   11. VPN card & grille top3
   12. Territory nav (accueil — 4 tuiles couleur pleine)
   13. Hub cards (pages hub — cartes blanches vers pages filles)
   14. Tableau de critères
   15. Tableau comparatif (avec/sans VPN)
   16. Tracker grid (torrent)
   17. Diagramme
   18. Précautions
   19. FAQ
   20. Footer
   21. Utilitaires
   ========================================================= */

/* ============ 0. POLICE (auto-hébergée — plus de dépendance Google) ============ */
/* Inter variable : un seul fichier couvre 100–900. Italique réelle en
   fichier séparé. font-display: swap => texte visible immédiatement en
   fallback, remplacé par Inter au chargement. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/InterVariable-Italic.woff2') format('woff2');
}

/* ============ 1. TOKENS ============ */
:root {
  /* Couleurs système */
  --color-bg: #FBFBF8;
  --color-bg-soft: #EEF1F5;
  --color-text: #1C1F26;
  --color-text-muted: #5A6068;
  --color-border: #E1E5EB;
  --color-accent: #2E4A6B;
  --color-accent-hover: #243B57;
  --color-cta: #B5471F;
  --color-cta-hover: #963B19;
  --color-footer-bg: #1C1F26;
  --color-footer-text: #FBFBF8;
  --color-footer-muted: #A8B2BF;

  /* Couleurs territoires */
  --color-top: #1E3A5F;
  --color-top-soft: #E8EEF5;
  --color-torrent: #2D5A3D;
  --color-torrent-soft: #E5EDE7;
  --color-streaming: #5B3A6B;
  --color-streaming-soft: #EDE5F0;
  --color-gaming: #7A2E2E;
  --color-gaming-soft: #F2E5E5;

  /* Territoire confidentialité/porno — tranché le 20/08/2026. Vin/magenta
     sourd (H 325°), positionné pour combler l'écart de 80° entre aubergine
     (280°) et bordeaux (0°/360°) sur la roue chromatique — les 4 teintes
     de territoire d'origine étaient déjà réparties à ~70-80° d'écart les
     unes des autres, cette 5e teinte prolonge cette répartition plutôt que
     de la casser. Choix aussi motivé par l'association culturelle usuelle
     de ce type de contenu avec les tons rouge/magenta, sans dupliquer le
     bordeaux déjà utilisé par le territoire jeux. */
  --color-porno: #662E4F;
  --color-porno-soft: #F4ECF0;

  /* Couleur affirmative générique (ex : "accessible sans VPN") —
     alias sur le vert torrent, réutilisable hors contexte torrent */
  --color-affirmative: var(--color-torrent);
  --color-affirmative-soft: var(--color-torrent-soft);

  /* Couleur de page courante — chaque page DOIT la redéfinir
     (voir includes/header.php et note en bas de fichier).
     Valeur par défaut : territoire top, pour ne jamais rendre
     une page sans couleur si l'override est oublié. */
  --color-page: var(--color-top);
  --color-page-soft: var(--color-top-soft);

  /* Typo */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --fs-h1: 2.25rem;
  --fs-h2: 1.625rem;
  --fs-h3: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-meta: 0.875rem;
  --fs-small: 0.8125rem;

  /* Espacement */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;

  /* Conteneurs */
  --container-text: 760px;
  --container-wide: 1100px;

  /* Divers */
  --radius: 4px;
  --transition: 150ms ease;
}

/* ============ 2. RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
a:hover { color: var(--color-accent-hover); }
h1, h2, h3 { margin: 0 0 var(--space-3); font-weight: 600; }
h1 { font-size: var(--fs-h1); line-height: 1.2; }
h2 { font-size: var(--fs-h2); line-height: 1.3; }
h3 { font-size: var(--fs-h3); line-height: 1.4; }
p { margin: 0 0 var(--space-3); }
ul { margin: 0 0 var(--space-3); padding-left: var(--space-3); }
li { margin-bottom: var(--space-1); }

/* ============ 3. LAYOUT ============ */
.container {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.container--text { max-width: var(--container-text); }

.section { padding: var(--space-8) 0; }
.section--soft { background-color: var(--color-bg-soft); }
/* Fond teinté territoire — remplace .section--torrent-soft et
   .section--streaming-soft du code source original : même règle
   CSS (background-color: var(--color-page-soft)), deux noms de
   classe différents selon la page. Consolidé sous un seul nom
   générique, utilisable par n'importe quel territoire. */
.section--page-soft { background-color: var(--color-page-soft); }

/* ============ 4. HEADER, NAV, MENU MOBILE ============ */
.site-header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 10;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.logo:hover { color: var(--color-text); }
.logo__mark { align-self: center; flex-shrink: 0; }
.logo__main { color: var(--color-text); }
.logo__france { color: var(--color-accent); }
.logo__legal {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.nav { display: flex; gap: var(--space-4); }
.nav a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}
.nav a::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.nav a[data-cat="top"]::before { background-color: var(--color-top); }
.nav a[data-cat="torrent"]::before { background-color: var(--color-torrent); }
.nav a[data-cat="streaming"]::before { background-color: var(--color-streaming); }
.nav a[data-cat="gaming"]::before { background-color: var(--color-gaming); }
.nav a[data-cat="porno"]::before { background-color: var(--color-porno); }
.nav a:hover { color: var(--color-accent); }
.nav a[aria-current="page"] { color: var(--color-page); font-weight: 600; }

/* Bouton hamburger — masqué en desktop */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 14px;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
  .nav a:last-child { border-bottom: none; }
}

/* ============ 5. BREADCRUMB ============ */
.breadcrumb {
  background-color: var(--color-bg);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-page); }
.breadcrumb__sep { margin: 0 8px; opacity: 0.5; }

/* ============ 6. HERO (home) & PAGE-HERO (sous-pages) ============ */
.hero {
  padding: var(--space-10) 0 var(--space-8);
  background: linear-gradient(180deg, var(--color-top-soft) 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.hero::before,
.page-hero--quad::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-top) 0%, var(--color-top) 20%,
    var(--color-torrent) 20%, var(--color-torrent) 40%,
    var(--color-streaming) 40%, var(--color-streaming) 60%,
    var(--color-gaming) 60%, var(--color-gaming) 80%,
    var(--color-porno) 80%, var(--color-porno) 100%
  );
}
.hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  max-width: 18ch;
}
.hero__subtitle {
  font-size: 1.1875rem;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

/* Hero de sous-page : fond teinté territoire, filet UNI (pas quadricolore) */
.page-hero {
  background: linear-gradient(180deg, var(--color-page-soft) 0%, var(--color-bg) 100%);
  padding: var(--space-8) 0 var(--space-6);
  position: relative;
  border-bottom: 1px solid var(--color-border);
}
.page-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background-color: var(--color-page);
}
.page-hero h1 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  letter-spacing: -0.02em; max-width: 22ch;
  margin-bottom: var(--space-3);
}
.page-hero__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  max-width: 60ch; line-height: 1.5;
  margin-bottom: var(--space-4);
}
.page-hero__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ============ 7. BOUTONS ============ */
.btn {
  display: inline-block;
  padding: 12px 22px;
  font-family: var(--font-family);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
}
.btn--primary { background-color: var(--color-cta); color: #FFFFFF; }
.btn--primary:hover { background-color: var(--color-cta-hover); color: #FFFFFF; }
.btn--secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--secondary:hover { border-color: var(--color-text); color: var(--color-text); }

/* ============ 8. BANDEAU LÉGAL ============ */
.legal-strip {
  background-color: var(--color-text);
  color: var(--color-footer-muted);
  padding: var(--space-2) 0;
}
.legal-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
}
.legal-strip__icon {
  width: 16px; height: 16px; flex-shrink: 0; color: var(--color-footer-text);
}

/* ============ 9. EYEBROW & SECTION-INTRO ============ */
.eyebrow {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--color-page);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}
/* variante explicite pour les sections toujours ancrées au territoire "top",
   utile sur la home où --color-page n'est pas forcément défini sur "top" */
.eyebrow--top { color: var(--color-top); }
.section-intro { max-width: 60ch; margin-bottom: var(--space-6); }
.section-intro h2 { margin-bottom: var(--space-2); }
.section-intro p { color: var(--color-text-muted); margin: 0; }

/* ============ 10. PROSE & CALLOUT ============ */
.prose { max-width: var(--container-text); margin: 0 auto; }
.prose p { font-size: var(--fs-body); }
.prose strong { font-weight: 600; }
.prose ul li::marker { color: var(--color-page); }

.section--why {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.section--why::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background-color: var(--color-cta);
  opacity: 0.5;
}

.callout {
  background-color: var(--color-page-soft);
  border-left: 4px solid var(--color-page);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--space-4) 0;
}
.callout__title {
  font-size: var(--fs-meta); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-page); margin-bottom: var(--space-1);
}
.callout p:last-child { margin-bottom: 0; }
.callout__sources { font-size: var(--fs-meta); color: var(--color-text-muted); }
.callout__sources ul { padding-left: var(--space-3); margin: var(--space-1) 0 0; }
.callout__sources li { margin-bottom: 2px; }

/* ============ 11. VPN CARD & GRILLE TOP3 ============ */
.section--top3 { background-color: var(--color-page-soft); }
.top3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  align-items: start;
}
@media (min-width: 900px) {
  .top3 .vpn-card:nth-child(2) { margin-top: 24px; }
  .top3 .vpn-card:nth-child(3) { margin-top: 48px; }
}
.vpn-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-page);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  position: relative;
}
.vpn-card__rank {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-page);
  letter-spacing: -0.04em;
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.vpn-card__name {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-text);
}
.vpn-card__verdict {
  font-size: var(--fs-meta);
  color: var(--color-page);
  font-weight: 500;
  margin-bottom: var(--space-3);
  font-style: italic;
}
.vpn-card__divider {
  height: 1px;
  background-color: var(--color-border);
  margin-bottom: var(--space-3);
}
.vpn-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  flex-grow: 1;
}
.vpn-card__features li { padding: 6px 0 6px 18px; position: relative; }
.vpn-card__features li::before {
  content: '';
  position: absolute; left: 0; top: 14px;
  width: 6px; height: 1px;
  background-color: var(--color-page);
}
.vpn-card__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.vpn-card__actions .btn { padding: 8px 14px; font-size: var(--fs-meta); }
.vpn-card__link { font-size: var(--fs-meta); color: var(--color-accent); }

/* ============ 12. TERRITORY NAV (accueil uniquement) ============
   Ex-".usecase" de la home v3 — renommé pour lever la collision de
   nom avec le composant hub-card de la page streaming (section 13),
   qui partageait la même classe sans être le même composant visuel. */
.territory-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.territory-card {
  padding: var(--space-4);
  border-radius: var(--radius);
  text-decoration: none;
  display: block;
  transition: transform var(--transition);
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
}
.territory-card:hover { transform: translateY(-2px); color: #FFFFFF; }
.territory-card--top { background-color: var(--color-top); }
.territory-card--torrent { background-color: var(--color-torrent); }
.territory-card--streaming { background-color: var(--color-streaming); }
.territory-card--gaming { background-color: var(--color-gaming); }
.territory-card__icon { width: 32px; height: 32px; margin-bottom: var(--space-3); opacity: 0.85; }
.territory-card__title { font-size: 1.125rem; font-weight: 600; margin-bottom: 6px; }
.territory-card__desc { font-size: var(--fs-meta); margin: 0; line-height: 1.5; opacity: 0.85; }
.territory-card__arrow {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============ 13. HUB CARDS (pages hub → pages filles) ============
   Composant "usecase" original de /vpn-streaming/, conservé sous ce
   nom de classe. Carte blanche à filet gauche, distincte de
   territory-card (section 12) même si les deux servent de la
   navigation en carte. */
.usecases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.usecase {
  padding: var(--space-4);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-page);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
}
.usecase:hover {
  border-color: var(--color-page);
  border-left-color: var(--color-page);
  color: var(--color-text);
  transform: translateY(-2px);
}
.usecase__icon { width: 28px; height: 28px; color: var(--color-page); margin-bottom: var(--space-2); }
.usecase__title { font-size: 1.1875rem; font-weight: 600; margin-bottom: var(--space-1); color: var(--color-text); }
.usecase__angle { font-size: var(--fs-meta); color: var(--color-page); font-style: italic; margin-bottom: var(--space-2); }
.usecase__desc { font-size: var(--fs-meta); color: var(--color-text-muted); margin: 0; line-height: 1.5; }
.usecase__arrow { display: inline-block; margin-top: auto; padding-top: var(--space-2); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.04em; color: var(--color-page); }

/* ============ 14. TABLEAU DE CRITÈRES ============ */
.criteria-table {
  width: 100%; border-collapse: collapse;
  margin-bottom: var(--space-3);
  font-size: var(--fs-meta);
}
.criteria-table th, .criteria-table td {
  text-align: left; padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.criteria-table th {
  font-weight: 600; color: var(--color-page);
  background-color: var(--color-page-soft);
  text-transform: uppercase; font-size: var(--fs-small);
  letter-spacing: 0.04em;
}
.criteria-table td:first-child { font-weight: 500; width: 30%; }
.criteria-table tr:last-child td { border-bottom: none; }

/* ============ 15. TABLEAU COMPARATIF (avec / sans VPN) ============ */
.platforms-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 600px) { .platforms-table { grid-template-columns: 1fr; } }
.platforms-col { padding: var(--space-4); }
.platforms-col--with { background-color: var(--color-page-soft); }
.platforms-col--without { background-color: var(--color-affirmative-soft); }
.platforms-col h3 { font-size: 1rem; margin-bottom: var(--space-1); text-transform: uppercase; letter-spacing: 0.04em; }
.platforms-col--with h3 { color: var(--color-page); }
.platforms-col--without h3 { color: var(--color-affirmative); }
.platforms-col p:first-of-type { font-size: var(--fs-meta); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.platforms-col ul { list-style: none; padding: 0; margin: 0; }
.platforms-col li { padding: 8px 0; font-size: var(--fs-meta); }

/* ============ 16. TRACKER GRID (torrent) ============ */
.tracker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.tracker-item {
  padding: var(--space-3);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-text-muted);
  border-radius: var(--radius);
}
.tracker-item--closed { border-left-color: var(--color-streaming); }
.tracker-item--blocked { border-left-color: var(--color-gaming); }
.tracker-item--legal { border-left-color: var(--color-page); }
.tracker-item__name { font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
.tracker-item__status { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin-bottom: var(--space-1); }
.tracker-item--closed .tracker-item__status { color: var(--color-streaming); }
.tracker-item--blocked .tracker-item__status { color: var(--color-gaming); }
.tracker-item--legal .tracker-item__status { color: var(--color-page); }
.tracker-item__desc { font-size: var(--fs-meta); color: var(--color-text-muted); margin: 0; line-height: 1.5; }

/* ============ 17. DIAGRAMME ============ */
.diagram {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background-color: var(--color-bg-soft);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.diagram svg { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; }
.diagram figcaption { font-size: var(--fs-small); color: var(--color-text-muted); text-align: center; margin-top: var(--space-2); line-height: 1.5; }

/* ============ 18. PRÉCAUTIONS ============ */
.precautions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.precaution {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  position: relative;
}
.precaution__head { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.precaution__icon { width: 20px; height: 20px; color: var(--color-page); flex-shrink: 0; }
.precaution__num { font-size: 0.75rem; font-weight: 600; color: var(--color-page); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; font-variant-numeric: tabular-nums; }
.precaution__title { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-1); color: var(--color-text); line-height: 1.4; }
.precaution__desc { font-size: var(--fs-meta); color: var(--color-text-muted); margin: 0; line-height: 1.55; }
.precaution__desc code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.85em;
  background-color: var(--color-page-soft);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--color-page);
}

/* ============ 19. FAQ ============ */
/* Écart trouvé entre les 3 fichiers sources : home utilisait un fond
   teinté territoire (--color-top-soft), torrent et streaming un fond
   neutre (--color-bg-soft). Neutre retenu comme référence (majoritaire
   dans le code existant) — home alignée dans sa reconstruction. */
.section--faq { background-color: var(--color-bg-soft); }
.faq { max-width: var(--container-text); margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; }
.faq details:first-child { border-top: 1px solid var(--color-border); }
.faq summary {
  cursor: pointer; font-weight: 500; font-size: 1.0625rem;
  padding: var(--space-1) 0; list-style: none;
  position: relative; padding-right: 24px; color: var(--color-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-weight: 400; color: var(--color-page); font-size: 1.25rem;
}
.faq details[open] summary::after { content: '−'; }
.faq__answer { padding-top: var(--space-2); color: var(--color-text-muted); }
.faq__answer p { margin: 0 0 var(--space-2); }
.faq__answer p:last-child { margin-bottom: 0; }

/* ============ 20. FOOTER ============ */
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: var(--space-8) 0 var(--space-4);
  position: relative;
  margin-top: var(--space-10);
}
.site-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--color-top) 0%, var(--color-top) 20%,
    var(--color-torrent) 20%, var(--color-torrent) 40%,
    var(--color-streaming) 40%, var(--color-streaming) 60%,
    var(--color-gaming) 60%, var(--color-gaming) 80%,
    var(--color-porno) 80%, var(--color-porno) 100%);
}
.site-footer a { color: var(--color-footer-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-footer-text); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); }
@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-4); } }
.site-footer h4 { font-size: var(--fs-meta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-footer-muted); margin: 0 0 var(--space-2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; font-size: var(--fs-meta); display: flex; align-items: center; gap: 8px; }
.site-footer li .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.site-footer__about p { font-size: var(--fs-meta); color: var(--color-footer-muted); max-width: 420px; margin-bottom: var(--space-2); }
.site-footer__bottom {
  border-top: 1px solid #2C3038;
  padding-top: var(--space-3);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-small); color: var(--color-footer-muted);
}

/* ============ 21. UTILITAIRES ============ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}