/* ═══════════════════════════════════════════════════════════════════════════
   styles.css — Feuille de styles partagée du site AMSTP
   ═══════════════════════════════════════════════════════════════════════════

   §  1  Variables CSS & reset
   §  2  Mise en page               layout-full · page-layout · container · sidebar
   §  3  Composants partagés        (plusieurs pages)
            3a  Boutons CTA
            3b  Cartes               card-grid · tool-card · info-card · interactive-card
            3c  Box de texte         .box · --info · --warning · --danger · --success
                                     + .recovery-warning (sidebar) · .section-icon
            3d  Typographie          content-section h2/h3/p/ul
   §  4  Système de popups          sextorsions · temoignages · faux-profils
   §  5  En-tête de page            pages intérieures  (page-hero · decorative-line · page-subtitle · page-hero-body)
   §  6  Panneaux blancs            content-section · sidebar-card · video-section…
   §  7  Fil d'actualité            index.html
   §  8  Navigation & header        toutes les pages
   §  9  Section hero               index.html
   § 10  Missions                   index.html
   § 11  Services & contenu         index.html
   § 12  Forum sidebar              index.html
   § 13  Question de la semaine     index.html
   § 14  Section ressources         index.html
   § 15  Keyframes & animations
   § 16  Footer                     toutes les pages
   § 17  Responsive global          1200px → 320px  +  hover / motion / contrast
   § 18  Avertissement sécurité     index.html · sextorsions.html
   § 19  Classes footer             toutes les pages
   ─── Pages spécifiques ──────────────────────────────────────────────────
   § 20  contact.html
   § 21  don.html
   § 22  sextorsions.html
   § 23  manip_psy.html
   § 24  medias.html
   § 25  temoignages.html
   § 26  mentions-legales.html
   § 27  supports.html
   § 28  faux-profils.html
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
    § 1  Variables CSS
    ──────────────────────────────────────────────────────────────────────── */
    :root {
      color-scheme: light;

      /* ── Couleurs primaires ── */
      --color-primary: #e72775;
      --color-primary-dark: #d61a65;
      --color-primary-darker: #b81555;
      --color-primary-hover: #c21e5c;

      /* ── Couleurs de texte ── */
      --color-text: #374151;
      --color-text-dark: #333;
      --color-text-muted: #6b7280;

      /* ── Couleurs de titres ── */
      --color-heading: #1f2937;
      --color-heading-strong: #000;

      /* ── Couleurs d'avertissement (amber/orange) ── */
      --color-warning: #92400e;
      --color-warning-bg: rgba(217, 119, 6, 0.15);
      --color-warning-bg-light: rgba(217, 119, 6, 0.05);
      --color-warning-border: rgba(217, 119, 6, 0.2);

      /* ── Couleurs de succès/récupération (green) ── */
      --color-success: #047857;
      --color-success-bg: rgba(16, 185, 129, 0.08);
      --color-success-bg-light: rgba(16, 185, 129, 0.02);
      --color-success-border: rgba(16, 185, 129, 0.3);
      --color-success-light: #22c55e;
      --color-success-light-dark: #16a34a;
      --color-success-dark: #166534;

      /* ── Couleurs danger/erreur (red) ── */
      --color-danger: #dc2626;
      --color-danger-dark: #b91c1c;
      --color-danger-bg: rgba(220, 38, 38, 0.12);
      --color-danger-bg-light: rgba(220, 38, 38, 0.04);
      --color-danger-border: rgba(220, 38, 38, 0.3);
      --color-danger-light: #ef4444;

      /* ── Couleurs d'information (blue) ── */
      --color-info: #2563eb;
      --color-info-dark: #1d4ed8;
      --color-info-light: #3b82f6;

      /* ── Couleurs特殊 (yellow/orange) ── */
      --color-yellow: #ffc107;
      --color-yellow-dark: #ffb300;
      --color-yellow-darker: #ffa000;
      --color-orange-badge: #ff6b35;
      --color-orange-badge-light: #f7931e;

      /* ── Couleurs verts (supports page) ── */
      --color-green: #008e25;
      --color-green-dark: #006b1d;

      /* ── Couleurs deepfake detection ── */
      --color-purple: #a855f7;
      --color-purple-dark: #9333ea;
      --color-uncertain: #f59e0b;
      --color-uncertain-dark: #d97706;

      /* ── Divers ── */
      --color-border-light: #ddd;
      --color-bg-light: #f9fafb;
      --color-border: #e5e7eb;
      --color-scrollbar: #f1f5f9;
      --color-white: #ffffff;
      --color-secondary: #1f2937;
      --color-secondary-dark: #111827;
      --color-black: #000;
      --color-warning-dark: #fbbf24;
      --color-success-dark-light: #34d399;
      --color-bg-dark: #161b22;
      --color-highlight: #ffff00;

      /* ── Ombres et transitions ── */
      --shadow-card: 0 15px 40px rgba(0, 0, 0, 0.08);
      --shadow-card-hover: 0 15px 35px rgba(0, 0, 0, 0.12);
      --transition: all 0.3s ease;
      --border-card: 1px solid rgba(255, 255, 255, 0.3);

      /* ── Couleurs rgba comunes ── */
      --rgba-primary-02: rgba(231, 39, 117, 0.02);
      --rgba-primary-03: rgba(231, 39, 117, 0.03);
      --rgba-primary-05: rgba(231, 39, 117, 0.05);
      --rgba-primary-08: rgba(231, 39, 117, 0.08);
      --rgba-primary-1: rgba(231, 39, 117, 0.1);
      --rgba-primary-2: rgba(231, 39, 117, 0.2);
      --rgba-primary-3: rgba(231, 39, 117, 0.3);
      --rgba-primary-25: rgba(231, 39, 117, 0.25);
      --rgba-success-dark-06: rgba(0, 142, 37, 0.06);
      --rgba-warning-05: rgba(245, 158, 11, 0.05);
      --rgba-warning-3: rgba(245, 158, 11, 0.3);
      --rgba-white-04: rgba(255, 255, 255, 0.04);
      --rgba-white-05: rgba(255, 255, 255, 0.05);
      --rgba-white-08: rgba(255, 255, 255, 0.08);
      --rgba-white-15: rgba(255, 255, 255, 0.15);
      --rgba-white-2: rgba(255, 255, 255, 0.2);
      --rgba-white-3: rgba(255, 255, 255, 0.3);
      --rgba-white-8: rgba(255, 255, 255, 0.8);
      --rgba-white-95: rgba(255, 255, 255, 0.95);
      --rgba-white-98: rgba(255, 255, 255, 0.98);
      --rgba-black-05: rgba(0, 0, 0, 0.05);
      --rgba-black-08: rgba(0, 0, 0, 0.08);
      --rgba-black-1: rgba(0, 0, 0, 0.1);
      --rgba-black-12: rgba(0, 0, 0, 0.12);
      --rgba-black-15: rgba(0, 0, 0, 0.15);
      --rgba-black-2: rgba(0, 0, 0, 0.2);
      --rgba-black-5: rgba(0, 0, 0, 0.5);
      --rgba-black-65: rgba(0, 0, 0, 0.65);
      --rgba-black-7: rgba(0, 0, 0, 0.7);
      --rgba-gray-1: rgba(107, 114, 128, 0.1);
      --rgba-gray-2: rgba(107, 114, 128, 0.2);
      --rgba-gray-3: rgba(107, 114, 128, 0.3);
      --rgba-gray-4: rgba(107, 114, 128, 0.4);
      --rgba-gray-dark-3: rgba(75, 85, 99, 0.3);
      --rgba-gray-dark-4: rgba(75, 85, 99, 0.4);
      --rgba-success-05: rgba(16, 185, 129, 0.05);
      --rgba-success-06: rgba(16, 185, 129, 0.06);
      --rgba-success-1: rgba(16, 185, 129, 0.1);
      --rgba-success-light-05: rgba(34, 197, 94, 0.05);
      --rgba-success-light-1: rgba(34, 197, 94, 0.1);
      --rgba-danger-04: rgba(220, 38, 38, 0.04);
      --rgba-danger-05: rgba(220, 38, 38, 0.05);
      --rgba-danger-1: rgba(220, 38, 38, 0.1);
      --rgba-danger-12: rgba(220, 38, 38, 0.12);
      --rgba-danger-3: rgba(220, 38, 38, 0.3);
      --rgba-danger-light-05: rgba(239, 68, 68, 0.05);
      --rgba-danger-light-1: rgba(239, 68, 68, 0.1);
      --rgba-danger-light-3: rgba(239, 68, 68, 0.3);
      --rgba-warning-08-dim: rgba(146, 64, 14, 0.08);
      --rgba-warning-1: rgba(245, 158, 11, 0.1);
      --rgba-warning-2-dim: rgba(146, 64, 14, 0.2);
      --rgba-warning-border-3: rgba(146, 64, 14, 0.3);
      --rgba-warning-border-35: rgba(146, 64, 14, 0.35);
      --rgba-warning-bg-05: rgba(217, 119, 6, 0.05);
      --rgba-surface-5: rgba(248, 250, 252, 0.5);
      --rgba-surface-6: rgba(248, 250, 252, 0.6);
      --rgba-surface-8: rgba(248, 250, 252, 0.8);
      --rgba-green-03: rgba(0, 142, 37, 0.03);
      --rgba-green-05: rgba(0, 142, 37, 0.05);
      --rgba-green-15: rgba(0, 142, 37, 0.15);
      --rgba-green-3: rgba(0, 142, 37, 0.3);
      --rgba-green-dark-04: rgba(0, 50, 15, 0.4);
      /*--rgba-pastel-green-dark: rgba(30, 80, 50, 0.4);      */ /* original */
      /*--rgba-pastel-green-dark:  rgba(46, 213, 115, 0.15);  */ /* bof */
      --rgba-pastel-green-dark:  rgba(0, 255, 157, 0.1);      */ /* choix 1 */
      /*--rgba-pastel-green-dark:  rgba(88, 214, 141, 0.2);   */ /* choix 2, plus clair */
      --rgba-yellow-08: rgba(255, 193, 7, 0.08);
      --rgba-yellow-15: rgba(255, 193, 7, 0.15);
      --rgba-dark-surface-95: rgba(22, 27, 34, 0.95);
      --rgba-dark-surface-99: rgba(22, 27, 34, 0.99);
      --rgba-dark-bg-95: rgba(28, 33, 42, 0.95);
      --rgba-dark-nav-97: rgba(13, 17, 23, 0.97);
      --rgba-secondary-3: rgba(55, 65, 81, 0.3);
      --rgba-secondary-4: rgba(55, 65, 81, 0.4);
      --rgba-success-03: var(--rgba-success-03);
      --rgba-popup-shadow: var(--rgba-popup-shadow);
      --rgba-dropdown-hover: var(--rgba-dropdown-hover);
      --rgba-hero-12: var(--rgba-hero-12);
      --rgba-yellow-shadow: var(--rgba-yellow-shadow);
      --rgba-yellow-shadow-strong: var(--rgba-yellow-shadow-strong);
      --rgba-bg-alt: var(--rgba-bg-alt);
      --rgba-green-dark-outline: var(--rgba-green-dark-outline);
      --rgba-surface-shadow-06: var(--rgba-surface-shadow-06);
      --rgba-border-3: var(--rgba-border-3);
      --rgba-surface-7: var(--rgba-surface-7);
      --rgba-info-outline: var(--rgba-info-outline);
      --rgba-border-5: var(--rgba-border-5);
      --rgba-red-light-09: var(--rgba-red-light-09);
      --rgba-red-light-6: var(--rgba-red-light-6);
      --rgba-orange-badge-shadow: var(--rgba-orange-badge-shadow);
      --rgba-white-5: var(--rgba-white-5);
      --rgba-success-border-3: var(--rgba-success-border-3);
      --rgba-purple-1: var(--rgba-purple-1);
      --rgba-purple-05: var(--rgba-purple-05);
      --rgba-purple-border-3: var(--rgba-purple-border-3);
      --rgba-info-shadow: var(--rgba-info-shadow);
      --rgba-white-9: var(--rgba-white-9);

      /* ── Tokens de thème (light par défaut) ── */
      --bg-body: linear-gradient(to bottom, rgba(0, 142, 37, 0.2), #ffffff);
      --bg-surface: #ffffff;
      --bg-surface-alt: #f9fafb;
      --bg-nav: #ffffff;
      --bg-nav-panel: #ffffff;
      --bg-footer: #f3f4f6;
      --bg-dropdown: #ffffff;
      --bg-section-header: #f3f4f6;
      --border-section-header: 1px solid var(--color-border);
      --bg-popup-wide: #ffffff;
      --bg-popup-header: #ffffff;
      --bg-checklist-section: #ffffff;
      --bg-platform-section: #f9fafb;
      --bg-final-reminders: #ffffff;
      --bg-reminder-box: #f9fafb;
      --bg-popup-close: var(--rgba-black-08);
      --bg-testimonial-box: #f9fafb;
      --border-testimonial-box: 1px solid var(--color-border);
      --bg-alert-important: #ffffff;
      --bg-alert-example: #f9fafb;
      --bg-alert-fake: #f9fafb;
      --bg-media-card: #ffffff;
      --border-media-card: var(--border-card);
      --bg-support-card: #ffffff;
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 2  Reset & base body
   ──────────────────────────────────────────────────────────────────────── */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      overflow-x: hidden;
    }

    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      color: var(--color-text-dark);
      background: var(--bg-body);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* Classe utilitaire pour masquer les éléments visuellement
       tout en les rendant lisibles par les lecteurs d'écran. */
    .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;
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 2  Mise en page — toutes les pages
        Deux layouts disponibles :
        .layout-full      Layout de base — contenu centré pleine largeur
                          Utilisé par : temoignages · don · supports · mentions-legales · medias
        .page-layout      Layout avec sidebar droite (grille 1fr + 350px)
                          Utilisé par : index · brouteurs · sextorsions · manip_psy · faux-profils · contact
        .container        Utilitaire max-width 1200px centré (interne aux sections)
        .sidebar          Colonne latérale (dans .page-layout)
   ──────────────────────────────────────────────────────────────────────── */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .page-layout {
      display: grid;
      grid-template-columns: 1fr 350px;
      gap: 2rem;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .main-content-wrapper {
      min-width: 0;
    }

    .page-layout main {
      padding: 2rem 0;
      display: grid;
      gap: 2rem;
    }

    /* Layout de base — pages sans sidebar (temoignages, don, supports…) */
    .layout-full {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 20px 3rem;
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 3  Composants partagés
   ──────────────────────────────────────────────────────────────────────── */

    /* § 3a  Boutons & listes d'alertes — brouteurs · sextorsions · faux-profils */
    .action-buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
      margin-top: 2rem;
    }

    .sidebar {
      padding-top: 28px;
      height: fit-content;
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .alert-list {
      list-style: none;
      padding-left: 0;
      margin-bottom: 1.5rem;
      position: relative;
      z-index: 1;
    }

    .alert-list li {
      padding: 0.8rem 0;
      padding-left: 1.5rem;
      position: relative;
      color: var(--color-text);
      line-height: 1.6;
      border-radius: 8px;
      margin-bottom: 0.5rem;
    }

    .alert-list li::before {
      content: "⚠️";
      position: absolute;
      left: 0;
      top: 0.8rem;
      font-size: 1rem;
    }

    .alert-message {
      background: linear-gradient(135deg,
          var(--color-warning-bg),
          var(--color-warning-bg-light));
      padding: 1.5rem;
      border-radius: 12px;
      text-align: center;
      font-weight: 700;
      color: var(--color-warning);
      font-size: 1rem;
      line-height: 1.4;
      position: relative;
      z-index: 1;
      border: 2px solid var(--color-warning-border);
    }

    /* § 3b  Grilles & cartes — brouteurs · sextorsions · faux-profils · manip_psy */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
    }

    .tools-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin: 2rem 0;
    }

    .tool-card {
      background: var(--bg-surface);
      border-radius: 15px;
      padding: 1.5rem;
      box-shadow: 0 5px 15px var(--rgba-black-08);
      border: var(--border-card);
      position: relative;
      overflow: hidden;
    }

    .tool-card h4 {
      color: var(--color-heading);
      font-size: 1.1rem;
      margin-bottom: 0.8rem;
      font-weight: 600;
      position: relative;
      z-index: 1;
    }

    .tool-card p {
      color: var(--color-text-muted);
      font-size: 0.9rem;
      margin-bottom: 1rem;
      line-height: 1.6;
      position: relative;
      z-index: 1;
    }

    .tool-link {
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 20px;
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 500;
      white-space: nowrap;
      border: 2px solid transparent;
      position: relative;
      z-index: 1;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
    }

    .tool-link:hover,
    .tool-link:focus {
      background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
      text-decoration: none;
      color: white;
      outline: none;
      border-color: var(--rgba-white-3);
    }

    .info-card {
      background: var(--bg-surface);
      border-radius: 15px;
      padding: 1.5rem;
      box-shadow: 0 5px 15px var(--rgba-black-08);
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    .info-card:focus {
      outline: 2px solid var(--rgba-primary-3);
      outline-offset: 4px;
    }

    .info-card h3 {
      color: var(--color-primary);
      font-size: 1.1rem;
      margin-bottom: 0.8rem;
      position: relative;
      z-index: 1;
    }

    .info-card p {
      position: relative;
      z-index: 1;
      margin-bottom: 0;
    }

    .interactive-card {
      background: var(--bg-surface);
      border-radius: 15px;
      padding: 1.5rem;
      box-shadow: 0 5px 15px var(--rgba-black-08);
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: var(--transition);
    }

    .interactive-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px var(--rgba-black-15);
      border-color: var(--rgba-primary-2);
    }

    .interactive-card:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    .interactive-card h3 {
      color: var(--color-primary);
      font-size: 1.1rem;
      margin-bottom: 0.8rem;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .interactive-card p {
      position: relative;
      z-index: 1;
      margin-bottom: 1rem;
    }

    .click-indicator {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--color-text-muted);
      font-size: 0.85rem;
      font-weight: 500;
      white-space: nowrap;
      position: relative;
      z-index: 1;
      margin-top: 0.5rem;
    }

    .click-indicator svg {
      width: 1rem;
      height: 1rem;
    }

    .card-icon {
      width: 1.2rem;
      height: 1.2rem;
      color: var(--color-primary);
      opacity: 0.7;
    }

    /* § 3a (suite)  Boutons CTA — index · brouteurs · sextorsions · don */
    .action-button.secondary {
      background: linear-gradient(135deg, var(--color-text), var(--color-secondary));
      box-shadow: 0 6px 20px var(--rgba-secondary-3);
    }

    .action-button.secondary:hover,
    .action-button.secondary:focus {
      background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
      box-shadow: 0 10px 30px var(--rgba-secondary-4);
    }

    .action-button {
      padding: 1rem 2rem;
      box-shadow: 0 6px 20px var(--rgba-primary-3);
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .action-button:hover,
    .action-button:focus {
      outline: none;
      border-color: var(--rgba-white-3);
    }

    /* § 3c  Box de texte — base et variantes
           .box           classe de base (géométrie commune)
           .box--info     fond neutre gris   (≡ .highlight-box)
           .box--warning  fond orange alerte (≡ .warning-box)
           .box--danger   fond rouge urgence (≡ .emergency-box)
           .box--success  fond vert positif  (nouveau)
       § 3c  Modificateurs sidebar
           .recovery-warning  surcharge verte sur .sidebar-card
       § 3c  Icône de section
           .section-icon  pastille d'icône rose (h2 des content-section)
    */

    /* ── Modificateur sidebar vert (nécessite .sidebar-card comme base) ── */
    .recovery-warning {
      background: linear-gradient(135deg,
          var(--color-success-bg),
          var(--color-success-bg-light));
    }
    .recovery-warning::before {
      background: radial-gradient(circle at 20% 30%,
          var(--rgba-success-03) 0%,
          transparent 50%);
    }
    .recovery-warning h3 {
      color: var(--color-success);
      font-size: 1.1rem;
      line-height: 1.4;
      margin-bottom: 1rem;
    }
    .recovery-warning p {
      color: var(--color-text);
      margin-bottom: 1rem;
    }

    /* ── Icône de section ── */
    .section-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      background: linear-gradient(135deg,
          var(--rgba-primary-1),
          var(--rgba-primary-05));
      border-radius: 12px;
      flex-shrink: 0;
    }
    .section-icon svg {
      width: 1.5rem;
      height: 1.5rem;
      color: var(--color-primary);
    }

    /* ── Base commune à toutes les box de texte ── */
    .box,
    .highlight-box,
    .warning-box,
    .box--info,
    .box--warning,
    .box--danger,
    .box--success {
      border-radius: 15px;
      margin: 1.5rem 0;
      position: relative;
      overflow: hidden;
    }
    .box::before,
    .highlight-box::before,
    .warning-box::before,
    .box--info::before,
    .box--warning::before,
    .box--danger::before,
    .box--success::before {
      content: "";
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
    }

    /* ── .box--info : fond neutre (= .highlight-box) ── */
    .box--info,
    .highlight-box {
      background: linear-gradient(135deg,
          var(--rgba-surface-8),
          var(--rgba-surface-5));
      padding: 2rem;
    }
    .box--info::before,
    .highlight-box::before {
      background: radial-gradient(circle at 10% 20%,
          var(--rgba-primary-03) 0%,
          transparent 50%);
    }
    .box--info p,
    .highlight-box p {
      position: relative;
      z-index: 1;
      margin-bottom: 1rem;
    }

    /* ── .box--warning : alerte orange (= .warning-box) ── */
    .box--warning,
    .warning-box {
      background: linear-gradient(135deg,
          var(--color-warning-bg),
          var(--color-warning-bg-light));
      padding: 1.8rem;
      border: 2px solid var(--color-warning-border);
    }
    .box--warning::before,
    .warning-box::before {
      background: radial-gradient(circle at 10% 20%,
          var(--rgba-warning-bg-05) 0%,
          transparent 50%);
    }
    .box--warning::after,
    .warning-box::after {
      content: "⚠️";
      position: absolute;
      top: 1rem; left: 1rem;
      font-size: 1.2rem;
      z-index: 1;
    }
    .box--warning h4, .warning-box h4 {
      color: var(--color-warning);
      font-size: 1.1rem;
      margin-bottom: 0.8rem;
      margin-left: 2rem;
      position: relative;
      z-index: 1;
    }
    .box--warning p, .warning-box p {
      color: var(--color-text);
      margin-bottom: 0.5rem;
      margin-left: 2rem;
      position: relative;
      z-index: 1;
    }
    .box--warning a, .warning-box a { position: relative; z-index: 1; }
    .box--warning ul, .warning-box ul { margin-left: 4rem; position: relative; z-index: 1; }

    /* ── .box--danger : urgence rouge (= .emergency-box) ── */
    .box--danger,
    .emergency-box {
      background: linear-gradient(135deg, var(--rgba-danger-12), var(--rgba-danger-04));
      border: 2px solid var(--rgba-danger-3);
      padding: 2rem;
      margin-top: 2rem;
    }
    .box--danger h3, .emergency-box h3 {
      color: var(--color-danger);
      font-size: 1.2rem;
      margin-bottom: 1rem;
      font-weight: 700;
    }
    .box--danger p, .emergency-box p {
      color: var(--color-text);
      margin-bottom: 1rem;
      font-weight: 500;
    }
    .box--danger a, .emergency-box a {
      color: var(--color-green);
      text-decoration: none;
      font-weight: 600;
      word-break: break-word;
    }
    .box--danger a:hover, .box--danger a:focus,
    .emergency-box a:hover, .emergency-box a:focus {
      color: var(--color-green-dark);
      text-decoration: underline;
      outline: 2px solid var(--rgba-green-dark-outline);
      outline-offset: 2px;
    }

    /* ── .box--success : positif vert (hors sidebar) ── */
    .box--success {
      background: linear-gradient(135deg,
          var(--color-success-bg),
          var(--color-success-bg-light));
      border: 1px solid var(--color-success-border);
      padding: 1.8rem;
    }
    .box--success::before {
      background: radial-gradient(circle at 20% 30%,
          var(--rgba-success-03) 0%,
          transparent 50%);
    }
    .box--success h3 { color: var(--color-success); font-size: 1.1rem; line-height: 1.4; margin-bottom: 1rem; }
    .box--success p  { color: var(--color-text); margin-bottom: 1rem; }

    /* § 3d  Typographie de section — toutes les pages avec .content-section */
    .content-section h2 {
      color: var(--color-heading);
      font-size: 1.6rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .content-section h3 {
      color: var(--color-text);
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .content-section p,
    .content-section li {
      color: var(--color-text);
      line-height: 1.8;
      margin-bottom: 1rem;
    }

    .content-section ul {
      padding-left: 1.5rem;
    }

    .content-section ul li {
      margin-bottom: 0.5rem;
      line-height: 1.7;
    }

    .hidden { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   § 4  Système de popups — sextorsions · temoignages · faux-profils
        Structure : .popup-overlay        fond semi-transparent
                    .popup [.popup--wide]  fenêtre modale (largeur variable)
                      .popup__header      en-tête fixe collant
                        .popup__icon      icône à gauche
                        .popup__title-wrap
                          .popup__title   h3 du dialogue
                          .popup__subtitle
                        .popup__close     bouton × en haut à droite
                      .popup__body        corps scrollable
   ──────────────────────────────────────────────────────────────────────── */
    .popup-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--rgba-black-65);
      z-index: 1000;
      backdrop-filter: blur(4px);
    }

    .popup {
      display: none;
      /* affiché en flex par JS → le header ne scroll pas, seul .popup__body défile */
      flex-direction: column;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--bg-popup-wide);
      border-radius: 20px;
      --popup-max-width: 600px;
      max-width: var(--popup-max-width);
      width: 90%;
      max-height: 90vh;
      overflow: hidden;
      z-index: 1001;
      box-shadow: 0 20px 40px var(--rgba-popup-shadow);
      border: var(--border-card);
    }

    /* ≈ 3/4 de page pour les popups larges */
    .popup--wide { --popup-max-width: min(900px, 75vw); }

    /* En-tête non-scrollable */
    .popup__header {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      gap: 0.8rem;
      padding: 0.8rem 1rem 0.8rem 1.2rem;
      background: var(--bg-popup-header);
      border-bottom: 1px solid var(--color-border);
      box-shadow: 0 2px 10px var(--rgba-black-08);
    }

    .popup__icon {
      width: 52px;
      height: 52px;
      min-width: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      font-weight: bold;
      color: var(--color-white);
      box-shadow: 0 5px 15px var(--rgba-primary-3);
    }

    .popup__icon--danger {
      background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));
      box-shadow: 0 5px 15px var(--rgba-danger-3);
    }

    .popup__icon--audio {
      background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
      box-shadow: 0 5px 15px var(--rgba-green-3);
    }

    .popup__title-wrap { flex: 1; min-width: 0; }

    .popup__title {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--color-heading);
      line-height: 1.3;
      margin: 0 0 0.2rem;
    }

    .popup__subtitle {
      color: var(--color-text-muted);
      font-size: 0.9rem;
      margin: 0;
    }

    .popup__close {
      flex-shrink: 0;
      background: var(--color-primary);
      color: white;
      border: none;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-weight: bold;
      transition: background var(--transition), transform var(--transition);
      padding: 0;
      line-height: 1;
    }

    .popup__close::before {
      content: "×";
    }

    .popup__close:hover {
      background: var(--color-primary-dark);
      transform: scale(1.1);
    }

    .popup__close:focus {
      background: var(--color-primary);
      outline: none;
    }

    .popup__body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 1.5rem;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }

    .popup__body::-webkit-scrollbar { width: 6px; }
    .popup__body::-webkit-scrollbar-track { background: var(--color-scrollbar); border-radius: 3px; }
    .popup__body::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }
    .popup__body::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }

    .popup__body h3 { color: var(--color-heading); font-size: 1.2rem; font-weight: 700; margin: 0 0 1rem; border-bottom: 2px solid var(--color-primary); padding-bottom: 0.5rem; }
    .popup__body h4 { color: var(--color-text); font-size: 1rem; font-weight: 600; margin: 1.2rem 0 0.5rem; }
    .popup__body p { color: var(--color-text); line-height: 1.7; margin-bottom: 0.8rem; }
    .popup__body ul { margin-bottom: 1.2rem; padding-left: 1.5rem; }
    .popup__body li { color: var(--color-text); line-height: 1.6; margin-bottom: 0.4rem; }
    .popup__body a { color: var(--color-primary); text-decoration: none; font-weight: 600; word-break: break-word; }
    .popup__body a:hover,
    .popup__body a:focus { color: var(--color-primary-dark); text-decoration: underline; outline: 2px solid var(--rgba-primary-3); outline-offset: 2px; }

    /* Temoignages : popups larges (≈ 3/4 page) */
    .temoignages-page .popup { --popup-max-width: min(900px, 75vw); }

    /* Responsive popups */
    @media (max-width: 768px) {
      .popup {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
      }
      .popup__header { padding: 0.7rem 1rem; width: 100%; box-sizing: border-box; }
      .popup__title { font-size: 1.2rem; }
    }

    @media (max-width: 480px) {
      .popup__body { padding: 1rem; font-size: 0.9rem; }
      .popup__title { font-size: 1.1rem; }
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 5  En-tête de page — toutes les pages intérieures
        Structure standard : .page-hero > .container > h1.page-title
                                                     > div.decorative-line
                                                     > (optionnel) p.page-subtitle
                                                     > (optionnel) div.page-hero-body
        .page-hero        bandeau titre centré avec animation
        .page-title       h1 principal
        .decorative-line  barre rose de 4px (toujours présente, après le h1)
        .page-subtitle    sous-titre gris (après la barre rose)
        .page-hero-body   zone optionnelle pour image ou texte d'introduction
        Note : le hero de index.html est spécifique (.hero-section, §9)
   ──────────────────────────────────────────────────────────────────────── */
    /* En-tête générique des pages intérieures */
    .page-hero {
      background: transparent;
      padding: 4rem 0 3rem 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .page-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--color-heading-strong);
      margin-bottom: 1rem;
      position: relative;
      z-index: 2;
      animation: slideInDown 1s ease 0.2s both;
    }

    .page-subtitle {
      font-size: 1.1rem;
      color: var(--color-text);
      max-width: 600px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
      animation: slideInUp 1s ease 0.4s both;
    }

    .decorative-line {
      height: 4px;
      width: 80px;
      background: var(--color-primary);
      margin: 1rem auto 0;
      border-radius: 2px;
      animation: slideInUp 1s ease 0.4s both;
    }

    /* Espacement quand un sous-titre suit le trait rose */
    .decorative-line + .page-subtitle {
      margin-top: 1.5rem;
    }

    /* Zone optionnelle après le trait rose (image ou texte d'introduction) */
    .page-hero-body {
      margin-top: 1.5rem;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    .page-hero-body img {
      max-width: 220px;
      height: auto;
      margin: 0 auto;
      display: block;
    }

    .highlight {
      color: var(--color-primary);
      font-weight: 700;
    }

    /* Version mobile du forum - cachée par défaut */
    .forum-mobile {
      display: none;
    }

    /* Version mobile de l'avertissement de sécurité - cachée par défaut */
    .security-warning-mobile {
      display: none;
    }


/* ─────────────────────────────────────────────────────────────────────────
   § 6  Panneaux blancs — toutes les pages avec contenu structuré
        .content-section   panneau animé (fadeInUp) avec fond blanc/blur
        .sidebar-card      carte de sidebar compacte
        .video-section     bloc vidéo centré (index)
        Partagent le même fond dégradé blanc, border-radius 20-25px, shadow
   ──────────────────────────────────────────────────────────────────────── */
    /* Base commune aux panneaux à fond blanc */
    .video-section,
    .forum-sidebar,
    .weekly-question,
    .security-warning,
    .content-section,
    .sidebar-card {
      background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%);
      border-radius: 25px;
      box-shadow: var(--shadow-card);
      border: var(--border-card);
      position: relative;
      overflow: hidden;
    }

    .content-section,
    .sidebar-card {
      backdrop-filter: blur(15px);
      border-radius: 20px;
    }

    .sidebar-card {
      padding: 2rem;
    }

    .sidebar-card::before {
      background: radial-gradient(circle at 20% 30%,
          var(--rgba-primary-02) 0%,
          transparent 50%);
    }

    .content-section {
      padding: 2.5rem;
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 0.8s ease forwards;
    }

    .content-section:nth-child(1) { animation-delay: 0.1s; }
    .content-section:nth-child(2) { animation-delay: 0.2s; }
    .content-section:nth-child(3) { animation-delay: 0.3s; }
    .content-section:nth-child(4) { animation-delay: 0.4s; }

    .video-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
    }

    .video-item {
      position: relative;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 8px 25px var(--rgba-black-1);
      cursor: pointer;
      aspect-ratio: 9/16;
    }

    .video-item video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .sidebar-card h3 {
      color: var(--color-heading);
      font-size: 1.2rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      position: relative;
      z-index: 1;
    }

    .sidebar-card p {
      color: var(--color-text-muted);
      font-size: 0.9rem;
      line-height: 1.6;
      position: relative;
      z-index: 1;
    }

    .sidebar-icon {
      width: 1.2rem;
      height: 1.2rem;
      color: var(--color-primary);
    }

        /* Section vidéo */
    .video-section {
      margin: 3rem auto;
      max-width: 1000px;
      width: 90%;
      padding: 2.5rem 2rem;
      text-align: center;
    }

    /* Pseudo-éléments décoratifs communs */
    .video-section::before,
    .missions-modern::before,
    .forum-sidebar::before,
    .weekly-question::before,
    .security-warning::before,
    .sidebar-card::before,
    .highlight-box::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .video-section::before {
      background: radial-gradient(circle at 50% 30%,
          var(--rgba-primary-03) 0%,
          transparent 60%);
      z-index: 1;
    }

    .video-section-content {
      position: relative;
      z-index: 2;
    }

    .video-container {
      position: relative;
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 30px var(--rgba-black-15);
    }

    .local-video {
      width: 100%;
      height: auto;
      display: flex;
  justify-content: center;
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 7  Fil d'actualité — index.html uniquement
        Masqué sous 968px via media query
   ──────────────────────────────────────────────────────────────────────── */
    /* Fil déroulant question de la semaine - desktop uniquement */
    .weekly-question-ticker {
      background: var(--color-white);
      color: var(--color-heading-strong);
      padding: 1rem 0;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 10px var(--rgba-black-1);
      border-bottom: 1px solid var(--rgba-black-1);
    }

    .ticker-content {
      display: flex;
      align-items: center;
      white-space: nowrap;
      animation: scrollTicker 30s linear infinite;
      font-size: 1.1rem;
      font-weight: 500;
      white-space: nowrap;
    }

    .ticker-question {
      margin-right: 3rem;
      display: inline-flex;
      align-items: center;
      gap: 1rem;
    }

    .ticker-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: var(--rgba-primary-1);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .ticker-icon svg {
      width: 14px;
      height: 14px;
      color: var(--color-primary);
    }

    .ticker-text {
      font-weight: 600;
    }

    .ticker-answer {
      margin-left: 1rem;
      font-weight: 400;
    }

    .ticker-cta {
      margin-left: 2rem;
      background: var(--color-primary);
      color: var(--color-white);
      padding: 0.5rem 1.2rem;
      border-radius: 20px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.9rem;
      transition: var(--transition);
      border: 1px solid var(--color-primary);
      flex-shrink: 0;
    }

    .ticker-cta:hover {
      background: var(--color-primary-dark);
      color: var(--color-white);
      text-decoration: none;
      transform: translateY(-1px);
    }

    @keyframes scrollTicker {
      0% {
        transform: translateX(100%);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    /* Pause animation au survol */
    .weekly-question-ticker:hover .ticker-content {
      animation-play-state: paused;
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 8  Navigation & header — toutes les pages
        header        barre sticky glassmorphism
        .logo         logo cliquable
        .menu-toggle  burger mobile (affiché ≤768px)
        .nav-links    liens de navigation  →  menu latéral sur mobile
        .menu-overlay fond sombre quand menu ouvert
   ──────────────────────────────────────────────────────────────────────── */
    header {
      background: var(--bg-nav);
      backdrop-filter: blur(15px);
      box-shadow: 0 4px 25px var(--rgba-black-08);
      position: sticky;
      top: 0;
      z-index: 1000;
      border-bottom: 1px solid var(--rgba-primary-1);
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 0;
      position: relative;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: bold;
      color: var(--color-primary);
      text-decoration: none;
      z-index: 1001;
      transition: transform 0.3s ease;
    }

    .logo:hover {
      transform: scale(1.05);
    }

    .logo img {
      height: 60px;
      width: auto;
      object-fit: contain;
    }

    .menu-toggle {
      display: none;
      flex-direction: column;
      cursor: pointer;
      z-index: 1001;
      padding: 10px;
      background: var(--bg-surface);
      border-radius: 12px;
      transition: var(--transition);
      box-shadow: 0 4px 15px var(--rgba-black-1);
      border: 2px solid transparent;
      min-width: 44px;
      min-height: 44px;
    }

    .menu-toggle:hover {
      background: var(--rgba-gray-1);
      border-color: var(--rgba-gray-2);
      transform: translateY(-2px);
    }

    .menu-toggle:focus {
      outline: 2px solid var(--color-text-muted);
      outline-offset: 2px;
    }

    .menu-toggle span {
      width: 28px;
      height: 3px;
      background: var(--color-text);
      margin: 3px 0;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      transform-origin: center;
      border-radius: 2px;
    }

    .menu-toggle.active span:nth-child(1) {
      transform: rotate(45deg) translate(6.5px, 6.5px);
      background: var(--color-primary);
    }

    .menu-toggle.active span:nth-child(2) {
      opacity: 0;
      transform: scale(0);
    }

    .menu-toggle.active span:nth-child(3) {
      transform: rotate(-45deg) translate(6.5px, -6.5px);
      background: var(--color-primary);
    }

    .nav-links {
      display: flex;
      list-style: none;
      align-items: center;
      gap: 2rem;
      margin: 0;
    }

    .nav-links a {
      text-decoration: none;
      color: var(--color-text);
      font-weight: 500;
      white-space: nowrap;
      transition: var(--transition);
      position: relative;
      padding: 10px 16px;
      border-radius: 10px;
      font-size: 1rem;
    }

    .nav-links a:hover,
    .nav-links a:focus {
      color: var(--color-primary);
      outline: none;
    }

    .nav-links a[aria-current="page"] {
      color: var(--color-primary);
      font-weight: 600;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      bottom: 4px;
      left: 16px;
      width: 0;
      height: 2px;
      background: var(--color-text-muted);
      transition: width 0.3s ease;
    }

    .nav-links a:hover::after,
    .nav-links a:focus::after {
      width: calc(100% - 32px);
    }

    .menu-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--rgba-black-5);
      opacity: 0;
      visibility: hidden;
      transition: var(--transition);
      z-index: 998;
    }

    .menu-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* Dropdowns */
    .has-dropdown { position: relative; }

    .dropdown-toggle {
      display: flex;
      align-items: center;
      gap: 4px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--color-text);
      font-weight: 500;
      white-space: nowrap;
      font-size: 1rem;
      font-family: inherit;
      padding: 10px 16px;
      border-radius: 10px;
      transition: var(--transition);
      min-height: 44px;
      white-space: nowrap;
    }

    .dropdown-toggle:hover,
    .dropdown-toggle:focus {
      color: var(--color-primary);
      outline: none;
    }

    .chevron {
      width: 16px;
      height: 16px;
      min-width: 16px;
      min-height: 16px;
      transition: transform 0.25s ease;
      flex-shrink: 0;
      flex-grow: 0;
    }

    .has-dropdown.open > .dropdown-toggle .chevron {
      transform: rotate(180deg);
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: var(--bg-dropdown);
      backdrop-filter: blur(15px);
      border-radius: 14px;
      box-shadow: 0 8px 30px var(--rgba-black-12);
      border: 1px solid var(--rgba-primary-08);
      min-width: 220px; width: max-content;
      padding: 0.4rem;
      padding-top: 0.6rem;
      z-index: 1100;
      list-style: none;
      margin: 0;
    }

    .has-dropdown.open > .dropdown-menu { display: block; }

    .dropdown-menu a {
      padding: 0.6rem 1rem;
      color: var(--color-text);
      text-decoration: none;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 500;
      white-space: nowrap;
      transition: var(--transition);
    }

    .dropdown-menu a:hover,
    .dropdown-menu a:focus {
      color: var(--color-primary);
      background: var(--rgba-dropdown-hover);
      outline: none;
    }

    .dropdown-menu a[aria-current="page"] {
      color: var(--color-primary);
      font-weight: 600;
    }

    .has-dropdown.active > .dropdown-toggle {
      color: var(--color-primary);
      font-weight: 600;
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 9  Section hero — index.html uniquement
        .hero-section       bandeau principal avec grille 2 colonnes
        .hero-content       colonne texte (animée slideInLeft)
        .hero-visual        colonne logo (animée zoomInRotate)
   ──────────────────────────────────────────────────────────────────────── */
    .hero-section {
      background: transparent;
      color: white;
      padding: 5rem 0 7rem 0;
      margin: 2rem 0;
      position: relative;
      overflow: hidden;
    }

    .hero-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:
        radial-gradient(circle at 20% 20%,
          var(--rgba-white-15) 0%,
          transparent 60%),
        radial-gradient(circle at 80% 80%,
          var(--rgba-white-08) 0%,
          transparent 60%),
        radial-gradient(circle at 40% 60%,
          var(--rgba-hero-12) 0%,
          transparent 60%);
      pointer-events: none;
    }

    .hero-shapes {
      display: none;
    }

    .hero-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }

    .hero-content {
      animation: slideInLeft 1s ease 0.3s both;
    }

    .hero-subtitle {
      font-size: 1.1rem;
      color: var(--color-text-dark);
      margin-bottom: 1rem;
      font-weight: 500;
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 2px;
      opacity: 0;
      animation: slideInLeft 1s ease 0.2s forwards;
    }

    .hero-title {
      font-size: 2.8rem;
      font-weight: 600;
      margin-bottom: 1.5rem;
      line-height: 1.1;
      background: var(--color-text-dark);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 0;
      animation: slideInLeft 1s ease 0.4s forwards;
    }

    .hero-description {
      font-size: 1.2rem;
      line-height: 1.8;
      margin-bottom: 2.5rem;
      color: var(--color-text-dark);
      opacity: 0;
      animation: slideInLeft 1s ease 0.6s forwards;
    }

    .hero-description strong {
      color: var(--color-primary);
      font-weight: 700;
    }

    .hero-visual {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      animation: slideInRight 1s ease 0.8s both;
    }

    .hero-visual .logo-container {
      position: relative;
      opacity: 0;
      animation: zoomInRotate 1.2s ease 1s forwards;
    }

    .hero-visual .logo-main {
      width: 450px;
      height: auto;
      filter: drop-shadow(0 25px 50px var(--rgba-black-15));
      position: relative;
      z-index: 2;
      transition: transform 0.3s ease;
    }

    .hero-visual .logo-main:hover {
      transform: scale(1.03);
    }

    @keyframes simplePulse {

      0%,
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
      }

      50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.3;
      }
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 10  Missions — index.html uniquement
   ──────────────────────────────────────────────────────────────────────── */
    /* MISSIONS SECTION - SANS HOVER (pas cliquable) */
    .missions-modern {
      position: relative;
      margin: 1rem auto 4rem auto;
      background: var(--bg-surface);
      backdrop-filter: blur(15px);
      border-radius: 20px;
      padding: 2rem 2.5rem;
      box-shadow: 0 10px 30px var(--rgba-black-1);
      text-align: center;
      max-width: 1000px;
      width: 90%;
      border: var(--border-card);
      color: var(--color-text);
      animation: fadeInUp 1s ease 1.2s both;
    }

    .missions-modern::before {
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 10% 20%,
          var(--rgba-gray-03) 0%,
          transparent 50%);
      border-radius: 20px;
    }

    .missions-modern h3 {
      color: var(--color-heading-strong);
      font-size: 1.5rem;
      margin-bottom: 1rem;
      font-weight: 700;
      position: relative;
      z-index: 1;
    }

    .missions-modern p {
      color: var(--color-text);
      font-size: 1.3rem;
      line-height: 1.8;
      text-align: justify;
      position: relative;
      z-index: 1;
    }

    .missions-modern strong {
      color: var(--color-primary);
      font-weight: 700;
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 11  Services & contenu principal — index.html uniquement
         .services       grille de cartes cliquables
         .service-card   carte avec icône, titre, texte et hover lift
   ──────────────────────────────────────────────────────────────────────── */
    .main-content {
      padding: 3rem 0;
    }

    .services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 3rem 0;
    }

    .service-card {
      background: var(--bg-surface);
      padding: 2.5rem;
      border-radius: 20px;
      text-align: center;
      box-shadow: 0 8px 25px var(--rgba-black-08);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      min-height: 320px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--rgba-white-2);
    }

    .service-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          var(--rgba-gray-05),
          transparent);
      transition: left 0.6s ease;
    }

    .service-card:hover::before {
      left: 100%;
    }

    /* Hover commun des cartes cliquables */
    .service-card:hover,
    .service-card:focus,
    .forum-sidebar:hover,
    .forum-sidebar:focus {
      transform: translateY(-8px);
      text-decoration: none;
      outline: 2px solid var(--rgba-gray-3);
      outline-offset: 4px;
    }

    .service-card:hover,
    .service-card:focus {
      box-shadow: 0 15px 35px var(--rgba-black-12);
      color: inherit;
    }

    /* Base commune des icônes rondes */
    .service-icon,
    .forum-icon,
    .weekly-question-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
      transition: var(--transition);
    }

    .service-icon {
      padding: 1rem;
      background: linear-gradient(135deg,
          var(--rgba-gray-1),
          var(--rgba-gray-05));
      border-radius: 15px;
      position: relative;
      z-index: 1;
    }

    .service-card:hover .service-icon {
      background: linear-gradient(135deg,
          var(--rgba-gray-2),
          var(--rgba-gray-1));
      transform: scale(1.05);
    }

    .service-icon svg {
      width: 2.2rem;
      height: 2.2rem;
      color: var(--color-primary);
      transition: var(--transition);
    }

    .service-card:hover .service-icon svg {
      color: var(--color-primary);
    }

    .service-card h3 {
      color: var(--color-heading-strong);
      margin-bottom: 1rem;
      font-size: 1.2rem;
      font-weight: 600;
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }

    .service-card:hover h3 {
      color: var(--color-primary);
    }

    .service-card p {
      color: var(--color-text);
      font-size: 1rem;
      line-height: 1.7;
      flex-grow: 1;
      position: relative;
      z-index: 1;
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 12  Forum sidebar — index.html uniquement
         .forum-sidebar        lien carte vers le forum (desktop sidebar)
         .forum-mobile         version mobile affichée ≤968px
         .forum-sidebar-cta    bouton CTA rose
   ──────────────────────────────────────────────────────────────────────── */
    .forum-sidebar {
      padding: 2.5rem 2rem;
      color: var(--color-text-dark);
      text-decoration: none;
      transition: var(--transition);
      height: fit-content;
      display: flex;
  justify-content: center;
    }

    .forum-sidebar::before {
      background: radial-gradient(circle at 30% 30%,
          var(--rgba-gray-03) 0%,
          transparent 60%);
      z-index: 1;
    }

    .forum-sidebar:hover,
    .forum-sidebar:focus {
      box-shadow: 0 25px 50px var(--rgba-black-12);
      color: var(--color-text-dark);
    }

    .forum-sidebar-content {
      position: relative;
      z-index: 2;
      text-align: center;
    }

    .forum-icon {
      padding: 1.2rem;
      background: linear-gradient(135deg,
          var(--rgba-primary-1),
          var(--rgba-primary-05));
      border-radius: 18px;
    }

    .forum-sidebar:hover .forum-icon {
      background: linear-gradient(135deg,
          var(--rgba-primary-2),
          var(--rgba-primary-1));
      transform: scale(1.05);
    }

    .forum-icon svg {
      width: 2.8rem;
      height: 2.8rem;
      color: var(--color-primary);
      transition: var(--transition);
    }

    .forum-sidebar:hover .forum-icon svg {
      color: var(--color-primary-hover);
    }

    .forum-sidebar h2 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
      font-weight: 700;
      color: var(--color-heading-strong);
      line-height: 1.3;
      transition: color 0.3s ease;
    }

    .forum-sidebar:hover h2 {
      color: var(--color-primary);
    }

    .forum-sidebar p {
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 2rem;
      color: var(--color-text);
    }

    /* Base commune des boutons CTA rose */
    .forum-sidebar-cta,
    .resources-link,
    .action-button {
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
      color: white;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      transition: var(--transition);
      display: flex;
  justify-content: center;
      border: 2px solid transparent;
    }

    .forum-sidebar-cta:hover,
    .resources-link:hover,
    .resources-link:focus,
    .action-button:hover,
    .action-button:focus {
      background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
      color: white;
      text-decoration: none;
      transform: translateY(-3px);
    }

    .forum-sidebar-cta {
      padding: 1rem 2rem;
      font-size: 0.95rem;
      box-shadow: 0 4px 15px var(--rgba-gray-dark-3);
    }

    .forum-sidebar-cta:hover {
      box-shadow: 0 8px 25px var(--rgba-gray-dark-4);
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 13  Question de la semaine — index.html uniquement
         .weekly-question            carte sidebar Q&A
         .weekly-question-ticker     fil défilant desktop (§ 7 ci-dessus)
   ──────────────────────────────────────────────────────────────────────── */
    /* STYLES POUR LA QUESTION DE LA SEMAINE */
    .weekly-question {
      padding: 2.5rem 2rem;
      color: var(--color-text-dark);
      height: fit-content;
    }

    .weekly-question::before {
      background: radial-gradient(circle at 70% 30%,
          var(--rgba-primary-03) 0%,
          transparent 60%);
      z-index: 1;
    }

    .weekly-question-content {
      position: relative;
      z-index: 2;
    }

    .weekly-question-header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .weekly-question-icon {
      padding: 1.2rem;
      background: linear-gradient(135deg,
          var(--rgba-yellow-15),
          var(--rgba-yellow-08));
      border-radius: 18px;
    }

    .weekly-question-icon svg {
      width: 2.5rem;
      height: 2.5rem;
      color: var(--color-yellow);
    }

    .weekly-question h2 {
      font-size: 1.4rem;
      margin-bottom: 1.5rem;
      font-weight: 700;
      color: var(--color-heading-strong);
      line-height: 1.3;
    }

    .weekly-question-item {
      margin-bottom: 1.5rem;
    }

    .weekly-question h3 {
      font-size: 1.1rem;
      color: var(--color-primary);
      margin-bottom: 1rem;
      font-weight: 600;
      line-height: 1.4;
    }

    .weekly-question-answer {
      color: var(--color-text);
      font-size: 1rem;
      line-height: 1.6;
      text-align: justify;
    }

    .weekly-question-answer strong {
      color: var(--color-primary);
      font-weight: 700;
    }

    .weekly-question-cta {
      text-align: center;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid var(--rgba-gray-1);
    }

    .weekly-question-link {
      background: linear-gradient(135deg, var(--color-yellow), var(--color-yellow-dark));
      color: var(--color-heading-strong);
      padding: 0.8rem 1.8rem;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.9rem;
      transition: var(--transition);
      display: flex;
  justify-content: center;
      border: 2px solid transparent;
      box-shadow: 0 4px 15px var(--rgba-yellow-shadow);
    }

    .weekly-question-link:hover {
      background: linear-gradient(135deg, var(--color-yellow-dark), var(--color-yellow-darker));
      color: var(--color-heading-strong);
      text-decoration: none;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px var(--rgba-yellow-shadow-strong);
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 14  Section ressources — index.html uniquement
         .resources-section   bandeau gris de pied de page
         .content-card        carte centrée max-width 800px
         .resources-link      bouton CTA rose
   ──────────────────────────────────────────────────────────────────────── */
    .resources-section {
      background: var(--rgba-bg-alt);
      padding: 4rem 0;
      margin-top: 4rem;
      border-radius: 20px;
      position: relative;
      overflow: hidden;
    }

    .content-card {
      background: var(--bg-surface);
      padding: 3rem;
      border-radius: 20px;
      box-shadow: var(--shadow-card);
      backdrop-filter: blur(15px);
      border: var(--border-card);
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .content-card h2 {
      color: var(--color-primary);
      margin-bottom: 1.5rem;
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .content-card p {
      margin-bottom: 2rem;
      color: var(--color-text);
      font-size: 1.2rem;
      line-height: 1.7;
    }

    .resources-link {
      padding: 1.2rem 2.5rem;
      margin-top: 1rem;
      font-size: 1.1rem;
      box-shadow: 0 6px 20px var(--rgba-gray-dark-3);
    }

    .resources-link:hover,
    .resources-link:focus {
      box-shadow: 0 10px 30px var(--rgba-gray-dark-4);
      outline: none;
      border-color: var(--rgba-white-3);
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 15  Keyframes & animations — partagées
         slideInLeft / slideInRight   hero index
         fadeInUp                     content-section (toutes les pages)
         slideInDown / slideInUp      page-hero (pages intérieures)
         zoomInRotate                 logo hero index
   ──────────────────────────────────────────────────────────────────────── */
    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-60px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(60px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInDown {
      from {
        opacity: 0;
        transform: translateY(-60px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(60px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes zoomInRotate {
      from {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
      }

      to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 16  Footer — toutes les pages
         Voir aussi § 19 (.footer-inner · .footer-nav · .footer-link)
   ──────────────────────────────────────────────────────────────────────── */
    footer {
      background: var(--bg-footer);
      color: var(--color-text);
      padding: 2rem 0;
      margin-top: 3rem;
      text-align: center;
    }

    footer a:hover,
    footer a:focus {
      color: var(--color-primary);
      outline: 2px solid var(--rgba-gray-3);
      outline-offset: 2px;
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 17  Responsive global — règles partagées toutes les pages
         1200px  rétrécit page-layout
          968px  bascule sidebar en colonne unique, ajuste hero
          768px  active menu burger, empile tout
          480px  réduit paddings et tailles de texte
          320px  très petits écrans
         (hover: none)           désactive les effets hover sur tactile
         (prefers-reduced-motion) désactive animations
         (prefers-contrast: high) bordures et fonds ad-hoc
   ──────────────────────────────────────────────────────────────────────── */
    @media (max-width: 1200px) {
      .page-layout {
        grid-template-columns: 1fr 320px;
        gap: 1.5rem;
      }

      .page-title {
        font-size: 2.2rem;
      }

      .hero-title {
        font-size: 2.5rem;
      }

      .hero-visual .logo-main {
        width: 400px;
      }
    }

    @media (max-width: 968px) {
      .page-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .page-title {
        font-size: 2rem;
      }

      .content-section {
        padding: 2rem;
      }

      .card-grid {
        grid-template-columns: 1fr;
      }

      .tools-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      }

      .video-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      }

      /* Masquer le fil déroulant sur mobile/tablette */
      .weekly-question-ticker {
        display: none;
      }

      /* Masquer la sidebar sur les pages avec alternative mobile */
      .sidebar--desktop-only {
        display: none;
      }

      /* Afficher la version mobile du forum */
      .forum-mobile {
        display: flex;
  justify-content: center;
        margin: 2rem auto;
        max-width: 1000px;
        width: 90%;
      }

      /* Afficher la version mobile de l'avertissement de sécurité */
      .security-warning-mobile {
        display: flex;
  justify-content: center;
        margin: 2rem auto;
        max-width: 1000px;
        width: 90%;
      }


      /* Ajuster la vidéo en responsive */
      .video-section {
        width: 95%;
        padding: 2rem;
      }

      .video-container {
        max-width: 300px;
      }

      .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
        padding: 0 1rem;
      }

      .hero-title {
        font-size: 2.2rem;
      }

      .hero-description {
        font-size: 1.1rem;
      }

      .hero-visual .logo-main {
        width: 350px;
      }

      .missions-modern {
        width: 95%;
        padding: 2rem;
      }

      .missions-modern p {
        font-size: 1.1rem;
        text-align: center;
      }

      .services {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
      }

      .content-card {
        padding: 2.5rem;
      }
    }

    @media (max-width: 1200px) {
      .tools-grid {
        grid-template-columns: 1fr;
      }

      .action-buttons {
        flex-direction: column;
        align-items: center;
      }

      .action-button {
        min-width: 200px;
        text-align: center;
      }

      .page-hero {
        padding: 3rem 0 2rem 0;
      }

      .page-title {
        font-size: 1.8rem;
      }

      .page-subtitle {
        font-size: 1rem;
      }

      .content-section {
        padding: 1.5rem;
      }

      .menu-toggle {
        display: flex;
      }

      .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        width: 320px;
        height: 100vh;
        background: var(--bg-nav-panel);
        box-shadow: -5px 0 25px var(--rgba-black-15);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        padding: 6rem 0 2rem 0;
        font-size: 1.1rem;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0.4s;
        z-index: 999;
        overflow-y: auto;
      }

      .nav-links.active {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0s;
      }

      .nav-links a {
        padding: 1.2rem 2rem;
        font-size: 1.1rem;
        border-radius: 0;
        width: 100%;
        text-align: left;
        font-weight: 500;
      white-space: nowrap;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-bottom: 1px solid var(--rgba-black-05);
        transition: var(--transition);
      }

      .nav-links a::after {
        display: none;
      }

      .nav-links a:hover,
      .nav-links a:focus {
        color: var(--color-primary);
        padding-left: 2.5rem;
      }

      .nav-links a[aria-current="page"] {
        color: var(--color-primary);
        font-weight: 600;
        border-left: 4px solid var(--color-text-muted);
      }

      /* Dropdowns mobile — accordéon */
      .has-dropdown { position: static; }

      .dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 1.2rem 2rem;
        border-radius: 0;
        border-bottom: 1px solid var(--rgba-black-05);
        font: inherit;
        font-size: 1.1rem;
        font-weight: 500;
      white-space: nowrap;
        min-height: 56px;
      }

      .dropdown-toggle .chevron {
        width: 16px;
        height: 16px;
        min-width: 16px;
        flex-shrink: 0;
        flex-grow: 0;
      }

      .dropdown-menu {
        position: static;
        box-shadow: none;
        border-radius: 0;
        border: none;
        background: var(--rgba-primary-03);
        padding: 0;
        min-width: unset;
        backdrop-filter: none;
      }

      .dropdown-menu a {
        padding: 0.9rem 2rem 0.9rem 3rem;
        border-radius: 0;
        font-size: 1rem;
      }

      .dropdown-menu a:hover,
      .dropdown-menu a:focus {
        padding-left: 3.5rem;
      }

      .hero-section {
        padding: 3rem 0 5rem 0;
      }

      .hero-title {
        font-size: 2rem;
      }

      .hero-subtitle {
        font-size: 1rem;
      }

      .hero-description {
        font-size: 1rem;
      }

      .hero-visual .logo-main {
        width: 300px;
      }

      .missions-modern h3 {
        font-size: 1.3rem;
      }

      .missions-modern p {
        font-size: 1rem;
      }

      .forum-sidebar h2,
      .forum-mobile h2 {
        font-size: 1.3rem;
      }

      .forum-sidebar p,
      .forum-mobile p {
        font-size: 0.95rem;
      }

      .services {
        grid-template-columns: 1fr;
      }

      .service-card {
        padding: 2rem;
        min-height: 300px;
      }

      /* Vidéo responsive mobile */
      .video-section {
        width: 100%;
        padding: 1.5rem 1rem;
      }

      .video-container {
        max-width: 280px;
      }

      .security-warning {
        padding: 1.5rem;
        margin: 1.5rem 0;
      }

      .security-warning-header {
        gap: 1rem;
      }

      .security-warning-icon {
        width: 30px;
        height: 30px;
      }

      .security-warning-icon svg {
        width: 16px;
        height: 16px;
      }

      .security-warning-title {
        font-size: 1.05rem;
      }
    }

    @media (max-width: 480px) {
      .content-section {
        padding: 1rem;
      }

      .content-section h2 {
        font-size: 1.4rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
      }

      .section-icon {
        align-self: flex-start;
      }

      .highlight-box {
        padding: 1.5rem;
      }

      .sidebar-card {
        padding: 1.2rem;
        margin-bottom: 1rem;
      }

      .sidebar-card h3 {
        font-size: 1rem;
        margin-bottom: 0.8rem;
      }

      .sidebar-card p {
        font-size: 0.85rem;
        line-height: 1.5;
        margin-bottom: 0.8rem;
      }

      .popup {
        width: 98%;
        padding: 1.2rem;
        max-height: 90vh;
        border-radius: 12px;
        top: 5%;
        transform: translateX(-50%);
        left: 50%;
      }

      .popup h3 {
        font-size: 1.2rem;
        margin-bottom: 0.8rem;
      }

      .popup h4 {
        font-size: 1rem;
        margin-bottom: 0.6rem;
        margin-top: 1rem;
      }

      .popup p,
      .popup li {
        font-size: 0.85rem;
        line-height: 1.5;
        margin-bottom: 0.8rem;
      }

      .popup ul {
        padding-left: 1rem;
      }

      .close-btn {
        padding: 0.3rem 0.7rem;
        font-size: 0.8rem;
        border-radius: 15px;
      }

      .video-grid {
        grid-template-columns: 1fr;
      }

      .page-title {
        font-size: 1.6rem;
      }

      .container,
      .page-layout,
      .layout-full {
        padding: 0 15px;
      }

      .hero-title {
        font-size: 1.8rem;
        line-height: 1.2;
      }

      .hero-description {
        font-size: 0.95rem;
        margin-bottom: 2rem;
      }

      .missions-modern {
        width: 100%;
        padding: 1.5rem;
        margin: 1rem auto 2rem auto;
      }

      .hero-visual .logo-main {
        width: 250px;
      }

      .service-card {
        padding: 1.5rem;
        min-height: 280px;
      }

      .service-card h3 {
        font-size: 1.1rem;
      }

      .service-card p {
        font-size: 0.95rem;
      }

      .forum-sidebar,
      .forum-mobile {
        padding: 2rem 1.5rem;
      }

      .content-card {
        padding: 2rem;
      }

      .content-card h2 {
        font-size: 1.8rem;
      }

      .content-card p {
        font-size: 1.1rem;
      }

      .resources-link {
        padding: 1rem 2rem;
        font-size: 1rem;
      }

      .nav-links {
        width: 280px;
      }

      .nav-links a {
        padding: 1rem 1.5rem;
        font-size: 1rem;
      }

      /* Vidéo mobile très petit écran */
      .video-container {
        max-width: 250px;
      }
    }

    @media (max-width: 320px) {
      .interactive-card {
        padding: 1rem;
      }

      .popup {
        width: 100%;
        height: 100%;
        padding: 1rem;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
        max-height: 100vh;
      }

      .close-btn {
        position: sticky;
        top: 0;
        z-index: 10;
        margin-bottom: 1rem;
        width: 100%;
        text-align: center;
      }

      .action-button {
        min-width: 180px;
        padding: 0.8rem 1.5rem;
      }

      .content-section {
        padding: 0.8rem;
      }

      .page-title {
        font-size: 1.4rem;
      }

      .hero-title {
        font-size: 1.6rem;
      }

      .hero-visual .logo-main {
        width: 200px;
      }

      .missions-modern {
        padding: 1rem;
      }

      .service-card {
        padding: 1rem;
        min-height: 260px;
      }

      .nav-links {
        width: 260px;
      }

      .nav-links a {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
      }

      .video-container {
        max-width: 220px;
      }
    }

    @media (hover: none) and (pointer: coarse) {

      .nav-links a,
      .service-card,
      .forum-sidebar-cta,
      .resources-link,
      .action-button,
      .info-card,
      .interactive-card,
      .tool-link,
      .close-btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .interactive-card:active {
        transform: scale(0.98);
      }

      .service-card {
        min-height: 300px;
        padding: 2rem;
      }

      .menu-toggle {
        min-width: 44px;
        min-height: 44px;
      }

      .service-card:hover,
      .forum-sidebar:hover,
      .hero-visual .logo-main:hover {
        transform: none;
      }

      .hero-visual .logo-glow {
        animation: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .hero-shapes {
        display: none;
      }
    }

    @media (prefers-contrast: high) {
      .service-card,
      .content-section {
        border: 2px solid var(--color-black);
        background: var(--color-white);
      }

      .resources-link,
      .action-button,
      .tool-link {
        border: 2px solid var(--color-black);
      }

      .highlight {
        color: var(--color-heading-strong);
        background: var(--color-highlight);
        padding: 2px 4px;
      }
    }


/* ─────────────────────────────────────────────────────────────────────────
   § 18  Avertissement de sécurité — index.html · sextorsions.html
         .security-warning          panneau blanc avec icône et liste
         .security-warning-mobile   version affichée ≤968px sur index
   ──────────────────────────────────────────────────────────────────────── */
    /* Avertissement de sécurité */
    .security-warning {
      padding: 2rem;
      margin: 2rem 0;
    }

    .security-warning::before {
      background: radial-gradient(circle at 30% 30%,
          var(--rgba-primary-03) 0%,
          transparent 60%);
      z-index: 1;
    }

    .security-warning-content {
      position: relative;
      z-index: 2;
    }

    .security-warning-header {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      margin-bottom: 1.5rem;
      text-align: left;
    }

    .security-warning-icon {
      flex-shrink: 0;
      width: 35px;
      height: 35px;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px var(--rgba-primary-2);
    }

    .security-warning-icon svg {
      width: 18px;
      height: 18px;
      color: var(--color-white);
      stroke-width: 2;
    }

    .security-warning-title {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--color-heading-strong);
      margin: 0;
      line-height: 1.3;
    }

    .security-warning-section {
      margin-bottom: 1.2rem;
    }

    .security-warning-section:last-child {
      margin-bottom: 0;
    }

    .security-warning-subtitle {
      font-size: 1rem;
      font-weight: 700;
      color: var(--color-primary);
      margin-bottom: 0.6rem;
    }

    .security-warning-list {
      list-style: none;
      padding: 0;
      margin: 0.5rem 0;
    }

    .security-warning-list li {
      padding: 0.5rem 0 0.5rem 1.8rem;
      color: var(--color-text);
      font-size: 0.95rem;
      line-height: 1.6;
      position: relative;
    }

    .security-warning-list li::before {
      content: "✓";
      position: absolute;
      left: 0.5rem;
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--color-success-light);
    }

    .security-warning-text {
      color: var(--color-text);
      font-size: 0.95rem;
      line-height: 1.6;
      margin: 0.5rem 0;
    }

    .security-warning-link {
      color: var(--color-primary);
      font-weight: 600;
      text-decoration: none;
      transition: var(--transition);
    }

    .security-warning-link:hover {
      text-decoration: underline;
    }


    .security-warning-text--bold {
      font-weight: 600;
    }

    .security-warning-text strong {
      color: var(--color-primary);
    }

    .security-warning-list a {
      color: var(--color-green);
      text-decoration: none;
    }

/* ─────────────────────────────────────────────────────────────────────────
   § 19  Classes footer — toutes les pages
         .footer-inner      flex row space-between
         .footer-nav        liste de liens légaux
         .footer-link       lien gris avec hover rose
         .footer-copyright  texte © gris muted
   ──────────────────────────────────────────────────────────────────────── */
    .footer-inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }

    .footer-nav {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .footer-link {
      color: var(--color-text);
      text-decoration: none;
      transition: color 0.3s;
    }

    .footer-copyright {
      color: var(--color-text-muted);
      font-size: 0.9rem;
    }

    .footer-sitemap {
      display: flex;
      gap: 2.5rem;
      flex-wrap: wrap;
      padding-bottom: 1.5rem;
      margin-bottom: 1.5rem;
      border-bottom: 1px solid var(--rgba-black-08);
      text-align: left;
      font-size: 0.75rem;
    }

    .footer-col {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      min-width: 150px;
    }

    .footer-col-title {
      font-weight: 600;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--color-text-muted);
      margin-bottom: 0.2rem;
    }


    /* ── contact.html ────────────────────────────────────────────────────────── */

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 2rem;
    }

    .contact-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 4rem;
      height: 4rem;
      background: linear-gradient(135deg,
          var(--rgba-primary-1),
          var(--rgba-primary-05));
      border-radius: 20px;
      margin-bottom: 1.5rem;
    }

    .contact-icon svg {
      width: 2rem;
      height: 2rem;
      color: var(--color-primary);
    }

    .contact-card h2 {
      font-size: 1.3rem;
      margin-bottom: 1rem;
    }

    .contact-card p {
      margin-bottom: 1.5rem;
    }

    .contact-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--color-primary);
      text-decoration: none;
      font-weight: 500;
      white-space: nowrap;
      padding: 0.8rem 1.5rem;
      border-radius: 15px;
      min-height: 44px;
      justify-content: center;
      transition: var(--transition);
    }

    .contact-link:hover,
    .contact-link:focus {
      color: var(--color-primary-dark);
      text-decoration: underline;
      outline: 2px solid var(--rgba-primary-3);
      outline-offset: 2px;
    }

    .contact-link svg {
      width: 16px;
      height: 16px;
    }

    .contact-card-wide {
      grid-column: 1 / -1;
    }

    .logo-section {
      text-align: center;
      margin-top: 3rem;
      padding: 2rem;
    }

    .logo-section img {
      width: 120px;
      height: auto;
      filter: drop-shadow(0 4px 12px var(--rgba-black-1));
    }

    .alert-important {
      background: var(--bg-alert-important);
      border: 2px solid var(--color-danger);
    }

    .alert-header {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      margin-bottom: 1rem;
    }

    .alert-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      background: var(--color-danger);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .alert-icon svg {
      width: 1.5rem;
      height: 1.5rem;
      color: var(--color-white);
      stroke-width: 2.5;
    }

    .alert-title {
      color: var(--color-danger);
      font-size: 1.1rem;
      font-weight: 700;
      margin: 0;
      line-height: 1.3;
    }

    .alert-content {
      color: var(--color-text-dark);
      font-size: 0.95rem;
      line-height: 1.6;
      margin-bottom: 1rem;
    }

    .alert-content strong {
      color: var(--color-danger);
      font-weight: 700;
    }

    .alert-example {
      background: var(--bg-alert-example);
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      border: 1px solid var(--color-border);
    }

    .alert-example-title {
      color: var(--color-text-dark);
      font-weight: 700;
      margin-bottom: 0.6rem;
      font-size: 0.95rem;
    }

    .alert-example-content {
      color: var(--color-text-dark);
      font-size: 0.85rem;
      line-height: 1.6;
    }

    .alert-fake {
      background: var(--bg-alert-fake);
      padding: 1rem;
      border-radius: 8px;
      border: 1px solid var(--color-border);
    }

    .alert-fake-title {
      color: var(--color-danger);
      font-weight: 700;
      margin-bottom: 0.6rem;
      font-size: 0.95rem;
    }

    .alert-fake-content {
      color: var(--color-danger);
      font-size: 0.85rem;
      line-height: 1.6;
    }

    @media (max-width: 968px) {
      .contact-page .sidebar {
        order: -1;
      }

      .contact-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
    }

    @media (max-width: 1200px) {
      .alert-icon {
        width: 3rem;
        height: 3rem;
      }

      .alert-icon svg {
        width: 1.7rem;
        height: 1.7rem;
      }
    }

    @media (max-width: 480px) {
      .contact-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-contrast: high) {
      .contact-link {
        border: 2px solid var(--color-black);
      }
    }


    /* ── don.html ────────────────────────────────────────────────────────────── */

    .don-content {
      max-width: 800px;
      margin: 0 auto;
      padding: 3rem 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3rem;
    }

    .don-logo {
      max-width: 400px;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 20px 40px var(--rgba-black-2));
    }

    .don-contact-info {
      margin-top: 2rem;
      padding: 1.5rem;
      background: var(--bg-reminder-box);
      border-radius: 15px;
      border: var(--border-card);
    }

    .don-contact-info h3 {
      color: var(--color-primary);
      font-size: 1.3rem;
      margin-bottom: 1rem;
    }

    .don-contact-info a {
      color: var(--color-primary);
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
    }

    .don-contact-info a:hover,
    .don-contact-info a:focus {
      color: var(--color-primary-dark);
      text-decoration: underline;
      outline: 2px solid var(--rgba-primary-3);
      outline-offset: 2px;
    }

    @media (max-width: 968px) {
      .don-logo { max-width: 300px; }
    }

    @media (max-width: 480px) {
      .don-logo { max-width: 250px; }
    }

    @media (max-width: 320px) {
      .don-logo { max-width: 200px; }
    }

    @media (prefers-contrast: high) {
      .don-contact-info {
        border: 1px solid var(--color-black);
      }
    }

/* ── sextorsions.html ──*/

.section-header {
  background: var(--bg-section-header);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0 1rem 0;
  border: var(--border-section-header);
  box-shadow: 0 3px 10px var(--rgba-black-05);
}

.section-header h3 {
  color: var(--color-primary);
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.checklist-card {
  cursor: pointer;
  border: 2px solid var(--color-primary);
  transition: var(--transition);
}

.checklist-card:hover,
.checklist-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px var(--rgba-primary-25);
  outline: 2px solid var(--rgba-primary-3);
  outline-offset: 2px;
}

.checklist-card h3 {
  color: var(--color-heading);
  font-size: 1.3rem;
}

.checklist-card .checklist-cta {
  background: var(--rgba-primary-08);
  color: var(--color-primary);
  border-color: var(--rgba-primary-3);
  margin-top: 1rem;
}

.checklist-section {
  background: var(--bg-checklist-section);
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px var(--rgba-surface-shadow-06);
  border: var(--border-card);
}

.checklist-section:last-child { margin-bottom: 0; }

.checklist-section-title {
  color: var(--color-heading);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--color-border);
}

.checklist-section h4 {
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem 0;
}

.checklist-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--color-text);
  line-height: 1.8;
  padding: 0.6rem 0;
  font-size: 1rem;
  border-bottom: 1px solid var(--rgba-border-3);
}

.checklist-item:last-child { border-bottom: none; }

.checklist-item::before {
  content: "•";
  color: var(--color-text-muted);
  font-weight: bold;
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1.8;
  width: 1rem;
}

.platform-section {
  margin: 1.5rem 0;
  padding: 1.5rem;
  border: var(--border-card);
  border-radius: 12px;
  background: var(--bg-platform-section);
}

.platform-title {
  color: var(--color-heading);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--color-border);
}

.platform-section h5 {
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 1rem 0 0.4rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.platform-section .checklist-item::before { content: "→"; }

.platform-section a {
  color: var(--color-info);
  font-weight: 600;
  text-decoration: underline;
  word-break: break-word;
}

.platform-section a:hover,
.platform-section a:focus {
  color: var(--color-info-dark);
  outline: 2px solid var(--rgba-info-outline);
  outline-offset: 2px;
  border-radius: 3px;
}

.emergency-section {
  border: 2px solid var(--color-danger-border);
}

.emergency-section .checklist-section-title {
  color: var(--color-danger);
  border-bottom-color: var(--rgba-danger-3);
}

.final-reminders {
  background: var(--bg-final-reminders);
  border-radius: 15px;
  padding: 2rem;
  border: var(--border-card);
  box-shadow: 0 4px 12px var(--rgba-surface-shadow-06);
  margin: 1.5rem 0;
}

.final-reminders > h3 {
  color: var(--color-heading);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--color-border);
}

.reminder-box {
  margin: 1rem 0;
  padding: 1.5rem;
  border-radius: 10px;
  background: var(--bg-reminder-box);
  border: 1px solid var(--rgba-border-5);
}

.reminder-box.positive {
  border-left: 4px solid var(--color-success-light);
  background: var(--rgba-success-light-05);
}

.reminder-box.negative {
  border-left: 4px solid var(--color-danger-light);
  background: var(--rgba-danger-light-05);
}

.reminder-box h4 {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-heading);
  margin-bottom: 1rem;
}

.reminder-box ul {
  padding-left: 1.5rem;
  margin: 0;
}

.reminder-box li {
  margin-bottom: 0.6rem;
  line-height: 1.7;
  color: var(--color-text);
}

@media (max-width: 968px) {
  .sextorsion-page .sidebar { order: -1; }
}

@media (max-width: 1200px) {
  .checklist-section { padding: 1.3rem; }
  .checklist-section-title { font-size: 1.2rem; }
}

@media (max-width: 480px) {
  .checklist-section-title { font-size: 1.1rem; }
  .platform-title { font-size: 1rem; }
  .checklist-item { font-size: 0.9rem; }
}

/* ── manip_psy.html ──*/
.impact-section {
  background: linear-gradient(135deg, var(--rgba-red-light-09), var(--rgba-red-light-6));
  border-radius: 15px;
  padding: 2rem;
  margin: 1.5rem 0;
  border: 2px solid var(--rgba-danger-1);
  position: relative;
  overflow: hidden;
}

.impact-section h4 {
  color: var(--color-danger);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.impact-section p {
  color: var(--color-text);
  margin-bottom: 1rem;
}

@media (max-width: 968px) {
  .manip-psy-page .sidebar { order: -1; }
}

/* ── medias.html ──*/
.medias-page main {
  padding: 2rem 0;
  max-width: 1000px;
  margin: 0 auto;
}

.timeline-container {
  position: relative;
  padding: 2rem 0;
}

.timeline-container::before {
  content: "";
  position: absolute;
  left: 200px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--color-primary), var(--rgba-primary-3));
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: 3rem;
  padding-left: 240px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 188px;
  top: 2.5rem;
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--rgba-primary-2);
  z-index: 2;
}

.timeline-date {
  position: absolute;
  left: 0;
  top: 2rem;
  background: var(--color-primary);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 15px var(--rgba-primary-3);
  width: 180px;
  text-align: center;
}

.media-card {
  background: var(--bg-media-card);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 30px var(--rgba-black-1);
  border: var(--border-media-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.media-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--rgba-primary-05), transparent);
  transition: left 0.6s ease;
}

.media-card:hover::before {
  left: 100%;
}

.media-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px var(--rgba-black-15);
}

.media-card h2 {
  color: var(--color-heading);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.media-card .subtitle {
  color: var(--color-text);
  font-size: 1rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.media-source {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}

.media-source .source-name {
  font-weight: 600;
  color: var(--color-primary);
}

.media-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.media-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
      white-space: nowrap;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rgba-primary-3);
  border-radius: 15px;
  transition: var(--transition);
  background: var(--rgba-primary-05);
  min-height: 44px;
  justify-content: center;
}

.media-link:hover,
.media-link:focus {
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--rgba-primary-3);
  outline: 2px solid var(--rgba-primary-3);
  outline-offset: 2px;
}

.media-link svg {
  width: 16px;
  height: 16px;
}

.new-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, var(--color-orange-badge), var(--color-orange-badge-light));
  color: var(--color-white);
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 2px 8px var(--rgba-orange-badge-shadow);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@media (max-width: 968px) {
  .timeline-container::before { left: 20px; }

  .timeline-item {
    padding-left: 60px;
  }

  .timeline-item::before {
    left: 8px;
    width: 20px;
    height: 20px;
  }

  .timeline-date {
    position: static;
    display: flex;
  justify-content: center;
    margin-bottom: 1rem;
    width: auto;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
  }

  .media-card { padding: 1.5rem; }
}

@media (max-width: 1200px) {
  .timeline-item { padding-left: 50px; }
  .media-card h2 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .timeline-item { padding-left: 40px; }
  .media-card { padding: 1rem; }
  .media-links { flex-direction: column; }
}

@media (max-width: 320px) {
  .media-card { padding: 1rem; }
}

@media (hover: none) and (pointer: coarse) {
  .media-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .media-card:hover { transform: none; }
}

@media (prefers-contrast: high) {
  .media-card {
    border: 2px solid var(--color-black);
    background: var(--color-white);
  }
  .media-link { border: 2px solid var(--color-black); }
}

/* ── temoignages.html ──*/
.temoignages-page main {
  padding: 2rem 0;
}

/* Sections de contenu temoignages */
.temoignages-page .content-section {
  margin-bottom: 2.5rem;
}

.temoignages-page .content-section h2 {
  display: flex;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--color-heading-strong);
  border-bottom: 2px solid var(--rgba-black-2);
  padding-bottom: 1rem;
}

.contact-info,
.audio-info {
  background: var(--bg-testimonial-box);
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px var(--rgba-black-05);
  margin-bottom: 1.5rem;
  border: var(--border-testimonial-box);
}

.contact-info h3,
.audio-info h3 {
  color: var(--color-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}

/* Grille et cartes témoignages */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
}

.testimonial-card {
  background: var(--bg-testimonial-box);
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px var(--rgba-black-05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border: var(--border-testimonial-box);
}

.testimonial-card:hover,
.testimonial-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px var(--rgba-black-1);
  outline: 2px solid var(--rgba-primary-3);
  outline-offset: 2px;
}

.testimonial-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.testimonial-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  color: var(--color-white);
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.testimonial-number.audio {
  background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
  color: var(--color-white);
}

.testimonial-info h3 {
  color: var(--color-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.testimonial-meta {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.testimonial-text {
  color: var(--color-text);
  line-height: 1.7;
}

.testimonial-text strong {
  color: var(--color-heading);
  font-weight: 600;
}

.read-more {
  color: var(--color-primary);
  font-weight: 600;
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
}

.popup-video-wrap {
  text-align: center;
  margin: 2rem 0;
}

.popup-video {
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  box-shadow: 0 5px 15px var(--rgba-black-1);
}

@media (max-width: 968px) {
  .temoignages-page .content-section { padding: 2rem; }
  .testimonials-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .temoignages-page .content-section { padding: 1.5rem; }
  .testimonial-card { padding: 1rem; }
  .testimonials-grid { gap: 1rem; }
}

@media (max-width: 480px) {
  .temoignages-page .content-section { padding: 1rem; }
  .temoignages-page .content-section h2 { font-size: 1.5rem; }
}

@media (hover: none) and (pointer: coarse) {
  .testimonial-card { min-height: auto; padding: 1.5rem; }
  .temoignages-page .content-section:hover,
  .testimonial-card:hover { transform: none; }
}

@media (prefers-contrast: high) {
  .temoignages-page .content-section,
  .testimonial-card { border: 2px solid var(--color-black); background: var(--color-white); }
  .temoignages-page .popup { border: 2px solid var(--color-black); }
}

/* ── mentions-legales.html ──*/
.mentions-page main { max-width: 800px; margin: 0 auto; padding: 3rem 0; }

.legal-content h1 {
  font-size: 2rem;
  border-bottom: 3px solid var(--color-primary);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.legal-section { margin-bottom: 2rem; }
.legal-section:last-child { margin-bottom: 0; }

.legal-content p.font-bold { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.75rem; }

.legal-content ul { list-style: none; padding: 0; }
.legal-content ul li {
  padding: 0.5rem 0 0.5rem 2rem;
  position: relative;
}
.legal-content ul li::before {
  content: "•";
  color: var(--color-primary);
  position: absolute;
  left: 0.5rem;
  font-weight: bold;
}

.info-box {
  background: var(--rgba-surface-6);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--rgba-primary-1);
}
.info-box p { margin-bottom: 0.5rem; }
.info-box p:last-child { margin-bottom: 0; }
.info-box a { color: var(--color-primary); text-decoration: none; transition: var(--transition); }
.info-box a:hover,
.info-box a:focus { text-decoration: underline; }

@media (max-width: 968px) {
  .mentions-page main { padding: 2rem 0; }
}

@media (max-width: 1200px) {
  .legal-content h1 { font-size: 1.6rem; }
  .info-box { padding: 1rem; }
}

@media (max-width: 480px) {
  .legal-content h1 { font-size: 1.4rem; }
}

@media (prefers-contrast: high) {
  .info-box { border: 2px solid var(--color-black); background: var(--color-white); }
}

/* ── supports.html ──*/
.supports-page main { padding: 2rem 0; }

.supports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.support-card {
  background: var(--bg-support-card);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 30px var(--rgba-black-1);
  border: var(--border-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.support-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--rgba-primary-02), transparent);
  transition: left 0.6s ease;
}

.support-card:hover::before { left: 100%; }

.support-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px var(--rgba-black-15);
}

.support-card h2 {
  color: var(--color-heading);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 2rem;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.support-link {
  display: flex;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition);
}

.support-link:hover,
.support-link:focus {
  outline: 2px solid var(--rgba-primary-3);
  outline-offset: 4px;
  border-radius: 15px;
}

.image-container {
  display: flex;
  justify-content: center;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 25px var(--rgba-black-1);
  transition: var(--transition);
}

.support-link:hover .image-container {
  box-shadow: 0 15px 40px var(--rgba-black-2);
  transform: scale(1.02);
}

.support-image {
  width: 75%;
  max-width: 250px;
  height: auto;
  display: flex;
  justify-content: center;
}

.guide-section {
  background: linear-gradient(135deg, var(--rgba-green-15), var(--rgba-green-05));
  border: 2px dashed var(--rgba-green-3);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.guide-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--rgba-green-05), transparent);
  transition: left 0.6s ease;
}

.guide-section:hover::before { left: 100%; }

.guide-section h2 {
  color: var(--color-heading);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.guide-link {
  display: flex;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  z-index: 1;
}

.guide-link:hover,
.guide-link:focus {
  transform: translateY(-3px);
  outline: 2px solid var(--rgba-green-3);
  outline-offset: 4px;
  border-radius: 15px;
}

.guide-image-container {
  display: flex;
  justify-content: center;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 25px var(--rgba-black-1);
  transition: var(--transition);
}

.guide-link:hover .guide-image-container {
  box-shadow: 0 15px 40px var(--rgba-black-2);
  transform: scale(1.02);
}

.guide-image {
  width: 75%;
  max-width: 250px;
  height: auto;
  display: flex;
  justify-content: center;
}

@media (max-width: 968px) {
  .supports-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .support-card { padding: 1.5rem; }
  .guide-section { padding: 2rem; }
}

@media (max-width: 1200px) {
  .support-card { padding: 1rem; }
  .support-card h2 { font-size: 1.1rem; }
  .supports-grid { gap: 1rem; }
}

@media (max-width: 480px) {
  .guide-section { padding: 1.5rem; }
}

@media (max-width: 320px) {
  .guide-section { padding: 1rem; }
}

@media (hover: none) and (pointer: coarse) {
  .support-link, .guide-link { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .support-card:hover, .guide-section:hover { transform: none; }
}

@media (prefers-contrast: high) {
  .support-card, .guide-section { border: 2px solid var(--color-black); background: var(--color-white); }
}

/* ── faux-profils.html ──*/
/* Détecteur IA & Deepfake — widget interactif spécifique à cette page */

.upload-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

.loading-indicator {
  text-align: center;
  margin-top: 1.5rem;
}

.loading-indicator p {
  margin-top: 1rem;
  font-size: 0.9rem;
}

.detection-mode {
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
  z-index: 1;
}

.detection-mode h4 {
  color: var(--color-heading);
  font-size: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.mode-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.mode-btn {
  padding: 8px 12px;
  border: 2px solid var(--color-border-light);
  border-radius: 20px;
  background: var(--color-white);
  color: var(--color-text-dark);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
      white-space: nowrap;
  font-size: 0.8rem;
  min-width: 70px;
  text-align: center;
}

.mode-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

.mode-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  box-shadow: 0 2px 8px var(--rgba-primary-3);
}

.upload-zone {
  border: 2px dashed var(--color-primary);
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
  background: var(--rgba-white-5);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.upload-zone:hover {
  border-color: var(--color-primary-dark);
  background: var(--rgba-white-8);
}

.upload-zone.dragover {
  border-color: var(--color-primary);
  background: var(--rgba-primary-1);
  transform: scale(1.02);
}

.upload-icon {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.uploaded-image {
  max-width: 100%;
  max-height: 200px;
  border-radius: 10px;
  margin: 1rem 0;
  box-shadow: 0 4px 15px var(--rgba-black-1);
}

.result-container {
  margin-top: 1.5rem;
  padding: 1.2rem;
  border-radius: 12px;
  background: var(--rgba-white-8);
  border: 1px solid var(--rgba-primary-2);
  position: relative;
  z-index: 1;
}

.result-authentic {
  background: linear-gradient(135deg, var(--rgba-success-light-1), var(--rgba-success-light-05));
  border-color: var(--rgba-success-border-3);
}

.result-ai-generated {
  background: linear-gradient(135deg, var(--rgba-danger-light-1), var(--rgba-danger-light-05));
  border-color: var(--rgba-danger-light-3);
}

.result-deepfake {
  background: linear-gradient(135deg, var(--rgba-purple-1), var(--rgba-purple-05));
  border-color: var(--rgba-purple-border-3);
}

.result-uncertain {
  background: linear-gradient(135deg, var(--rgba-warning-1), var(--rgba-warning-05));
  border-color: var(--rgba-warning-3);
}

.confidence-bar {
  width: 100%;
  height: 15px;
  background: var(--color-bg-light);
  border-radius: 8px;
  overflow: hidden;
  margin: 0.8rem 0;
}

.confidence-fill {
  height: 100%;
  transition: width 0.8s ease;
  border-radius: 8px;
}

.confidence-authentic { background: linear-gradient(135deg, var(--color-success-light), var(--color-success-light-dark)); }
.confidence-ai        { background: linear-gradient(135deg, var(--color-danger-light), var(--color-danger)); }
.confidence-deepfake  { background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark)); }
.confidence-uncertain { background: linear-gradient(135deg, var(--color-uncertain), var(--color-uncertain-dark)); }

.analyze-btn {
  background: linear-gradient(135deg, var(--color-info-light), var(--color-info));
  color: var(--color-white);
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 1rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

.analyze-btn:hover {
  background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--rgba-info-shadow);
}

.analyze-btn:disabled {
  background: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.loading-spinner {
  border: 3px solid var(--color-bg-light);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-message {
  background: linear-gradient(135deg, var(--rgba-danger-light-1), var(--rgba-danger-light-05));
  border: 2px solid var(--rgba-danger-light-3);
  color: var(--color-danger);
  padding: 1rem;
  border-radius: 10px;
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}

.results-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.result-card {
  background: var(--rgba-white-9);
  border-radius: 10px;
  padding: 1rem;
  border-left: 4px solid var(--color-primary);
}

.result-card.safe    { border-left-color: var(--color-success-light); }
.result-card.danger  { border-left-color: var(--color-danger-light); }
.result-card.warning { border-left-color: var(--color-uncertain); }

.result-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-heading);
}

.score-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.score-percentage {
  font-weight: 600;
  font-size: 0.8rem;
  min-width: 40px;
}

.verdict {
  font-size: 0.8rem;
  font-weight: 500;
      white-space: nowrap;
  padding: 0.5rem;
  border-radius: 8px;
  text-align: center;
  margin-top: 0.5rem;
}

.verdict.safe    { background: var(--rgba-success-light-1);  color: var(--color-success-dark); }
.verdict.danger  { background: var(--rgba-danger-light-1);  color: var(--color-danger); }
.verdict.warning { background: var(--rgba-warning-1); color: var(--color-warning); }

@media (max-width: 968px) {
  .mode-buttons { gap: 6px; }
  .mode-btn { font-size: 0.75rem; padding: 6px 10px; min-width: 60px; }
}

@media (max-width: 1200px) {
  .upload-zone { padding: 1.2rem; }
}

@media (max-width: 480px) {
  .mode-buttons { flex-direction: column; gap: 8px; }
  .mode-btn { width: 100%; font-size: 0.8rem; padding: 8px 12px; }
  .upload-zone { padding: 1rem; }
  .upload-icon { font-size: 2rem; }
  .analyze-btn { padding: 0.8rem; font-size: 0.85rem; }
  .uploaded-image { max-height: 120px; }
  .loading-spinner { width: 20px; height: 20px; }
}

@media (max-width: 320px) {
  .mode-btn { font-size: 0.75rem; padding: 6px 10px; }
}

@media (hover: none) and (pointer: coarse) {
  .analyze-btn,
  .upload-zone,
  .mode-btn { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .upload-zone:active { transform: scale(0.98); background: var(--rgba-primary-1); }
  .analyze-btn:active { transform: scale(0.98); }
  .mode-btn:active { transform: scale(0.95); }
}

@media (prefers-contrast: high) {
  .analyze-btn { border: 2px solid var(--color-black); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 29  Dark mode — toutes les pages
         html[data-theme="dark"]                  mode sombre forcé (JS)
         @media (prefers-color-scheme: dark)       mode auto (préférence système)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables dark ─────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-text:            #c9d1d9;
  --color-text-dark:       #f0f6fc;
  --color-text-muted:      #8b949e;
  --shadow-card:           0 15px 40px rgba(0, 0, 0, 0.45);
  --border-card:           1px solid var(--rgba-white-08);
  --bg-body:               linear-gradient(to bottom, var(--rgba-pastel-green-dark), #0d1117);
  --bg-surface:            var(--rgba-dark-surface-95);
  --bg-surface-alt:        var(--rgba-dark-bg-95);
  --bg-nav:                var(--rgba-dark-nav-97);
  --bg-nav-panel:          #161b22;
  --bg-footer:             #1c2128;
  --bg-dropdown:           var(--rgba-dark-surface-99);
  --bg-section-header:     linear-gradient(135deg, #2d333b, #1c2128);
  --border-section-header: 1px solid var(--rgba-white-08);
  --bg-popup-wide:         #161b22;
  --bg-popup-header:       var(--rgba-dark-surface-95);
  --bg-checklist-section:  var(--rgba-dark-bg-95);
  --bg-platform-section:   var(--rgba-dark-surface-99);
  --bg-final-reminders:    var(--rgba-dark-bg-95);
  --bg-reminder-box:       var(--rgba-dark-surface-99);
  --bg-popup-close:        var(--rgba-white-08);
  --bg-testimonial-box:    linear-gradient(135deg, #2d333b, #1c2128);
  --border-testimonial-box: 1px solid var(--rgba-white-08);
  --bg-alert-important:     linear-gradient(135deg, var(--rgba-danger-12), var(--rgba-danger-04));
  --bg-alert-example:       var(--rgba-dark-bg-95);
  --bg-alert-fake:          var(--rgba-dark-surface-95);
  --bg-media-card:         var(--rgba-dark-bg-95);
  --border-media-card:     var(--border-card);
  --bg-support-card:       var(--rgba-dark-bg-95);
  --color-border:          var(--rgba-white-08);
  --color-border-light:    var(--rgba-white-15);
  --color-heading:         #e6edf3;
  --color-heading-strong:  #f0f6fc;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --color-text:            #c9d1d9;
    --color-text-dark:       #f0f6fc;
    --color-text-muted:      #8b949e;
    --shadow-card:           0 15px 40px rgba(0, 0, 0, 0.45);
    --border-card:           1px solid var(--rgba-white-08);
    --bg-body:               linear-gradient(to bottom, var(--rgba-pastel-green-dark), #0d1117);
    --bg-surface:            var(--rgba-dark-surface-95);
    --bg-surface-alt:        var(--rgba-dark-bg-95);
    --bg-nav:                var(--rgba-dark-nav-97);
    --bg-nav-panel:          #161b22;
    --bg-footer:             #1c2128;
    --bg-dropdown:           var(--rgba-dark-surface-99);
    --bg-section-header:     linear-gradient(135deg, #2d333b, #1c2128);
    --border-section-header: 1px solid var(--rgba-white-08);
    --bg-popup-wide:         #161b22;
    --bg-popup-header:       var(--rgba-dark-surface-95);
    --bg-checklist-section:  var(--rgba-dark-bg-95);
    --bg-platform-section:   var(--rgba-dark-surface-99);
    --bg-final-reminders:    var(--rgba-dark-bg-95);
    --bg-reminder-box:       var(--rgba-dark-surface-99);
    --bg-popup-close:        var(--rgba-white-08);
    --bg-testimonial-box:    linear-gradient(135deg, #2d333b, #1c2128);
    --border-testimonial-box: 1px solid var(--rgba-white-08);
    --bg-alert-important:     linear-gradient(135deg, var(--rgba-danger-12), var(--rgba-danger-04));
    --bg-alert-example:       var(--rgba-dark-bg-95);
    --bg-alert-fake:          var(--rgba-dark-surface-95);
    --bg-media-card:         var(--rgba-dark-bg-95);
    --border-media-card:     var(--border-card);
    --bg-support-card:       var(--rgba-dark-bg-95);
    --color-border:          var(--rgba-white-08);
    --color-border-light:    var(--rgba-white-15);
    --color-heading:         #e6edf3;
    --color-heading-strong:  #f0f6fc;
  }
}

/* ── Overrides globaux ──────────────────────────────────────────────────── */
html[data-theme="dark"] body,
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body }
/* CSS ne permet pas @media dans un sélecteur — on utilise deux blocs : */

html[data-theme="dark"] body {
  color: var(--color-text-dark);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body { color: var(--color-text-dark); }
}



/* Barres du menu hamburger */
html[data-theme="dark"] .menu-toggle span {
  background: var(--color-text-dark);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .menu-toggle span { background: var(--color-text-dark); }
}

/* Fil d'actualité ticker */
html[data-theme="dark"] .weekly-question-ticker {
  background: var(--color-bg-dark);
  border-bottom-color: var(--rgba-white-08);
}
html[data-theme="dark"] .ticker-content { color: var(--color-text-dark); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .weekly-question-ticker {
    background: var(--color-bg-dark);
    border-bottom-color: var(--rgba-white-08);
  }
  html:not([data-theme="light"]) .ticker-content { color: var(--color-text-dark); }
}

/* Boîtes warning/highlight/info */
html[data-theme="dark"] .warning-box {
  background: linear-gradient(135deg, var(--rgba-warning-2-dim), var(--rgba-warning-08-dim));
  border-color: var(--rgba-warning-border-35);
}
html[data-theme="dark"] .warning-box h4 { color: var(--color-warning-dark); }
html[data-theme="dark"] .warning-box p  { color: var(--color-text); }
html[data-theme="dark"] .highlight-box  { background: var(--rgba-white-04); }
html[data-theme="dark"] .info-box       { background: var(--rgba-white-04); }
html[data-theme="dark"] .recovery-warning {
  background: var(--rgba-success-06);
}
html[data-theme="dark"] .recovery-warning h3 { color: var(--color-success-dark-light); }
html[data-theme="dark"] .alert-message {
  background: linear-gradient(135deg, var(--rgba-warning-2-dim), var(--rgba-warning-08-dim));
  color: var(--color-warning-dark);
  border-color: var(--rgba-warning-border-3);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .warning-box {
    background: linear-gradient(135deg, var(--rgba-warning-2-dim), var(--rgba-warning-08-dim));
    border-color: var(--rgba-warning-border-35);
  }
  html:not([data-theme="light"]) .warning-box h4 { color: var(--color-warning-dark); }
  html:not([data-theme="light"]) .warning-box p  { color: var(--color-text); }
  html:not([data-theme="light"]) .highlight-box  { background: var(--rgba-white-04); }
  html:not([data-theme="light"]) .info-box        { background: var(--rgba-white-04); }
  html:not([data-theme="light"]) .recovery-warning { background: var(--rgba-success-06); }
  html:not([data-theme="light"]) .recovery-warning h3 { color: var(--color-success-dark-light); }
  html:not([data-theme="light"]) .alert-message {
    background: linear-gradient(135deg, var(--rgba-warning-2-dim), var(--rgba-warning-08-dim));
    color: var(--color-warning-dark);
    border-color: var(--rgba-warning-border-3);
  }
}

/* Popups */
html[data-theme="dark"] .popup {
  background: var(--color-bg-dark);
  color: var(--color-text-dark);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .popup {
    background: var(--color-bg-dark);
    color: var(--color-text-dark);
  }
}

/* Footer séparateurs */
html[data-theme="dark"] .footer-sitemap {
  border-bottom-color: var(--rgba-white-08);
}
html[data-theme="dark"] .footer-inner {
  border-top-color: var(--rgba-white-08);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .footer-sitemap { border-bottom-color: var(--rgba-white-08); }
}

/* Sidebar mobile nav */
html[data-theme="dark"] .nav-links a {
  border-bottom-color: var(--rgba-white-05);
}
html[data-theme="dark"] .dropdown-toggle {
  border-bottom-color: var(--rgba-white-05);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .nav-links a { border-bottom-color: var(--rgba-white-05); }
  html:not([data-theme="light"]) .dropdown-toggle { border-bottom-color: var(--rgba-white-05); }
}

/* Accents verts dans les sections page-spécifiques */
html[data-theme="dark"] [style*="var(--rgba-success-dark-06"] {
  /* Géré par le CSS ci-dessous pour les classes connues */
}

/* ── Bouton theme-toggle ────────────────────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  padding: 8px;
  border-radius: 10px;
  transition: var(--transition);
  min-width: 36px;
  min-height: 36px;
  z-index: 1001;
  flex-shrink: 0;
}

.theme-toggle:hover,
.theme-toggle:focus {
  color: var(--color-primary);
  background: var(--rgba-gray-1);
  outline: none;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
  flex-shrink: 0;
}

.theme-icon[hidden] { display: none !important; }

/* ── Wrapper nav-right ──────────────────────────────────────────────────── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}