/* =============================================
   Athern — Design System & Custom Styles
   Stack: Tailwind CSS (CDN) + custom overrides
   ============================================= */

/* =============================================
   PALETTE DE COULEURS
   =============================================
   Organisation en DEUX couches :

   1. PALETTE BRUTE (--palette-*, --rgb-*)
      Valeurs de référence. Ne PAS utiliser
      directement dans les règles CSS.

   2. TOKENS SÉMANTIQUES (--quiz-*, --pm-card-*, …)
      Organisés PAR SECTION D'INTERFACE.
      Chaque section a ses propres variables :
      tu peux modifier la couleur du quiz sans
      toucher à celle des inputs, même si les
      deux partagent la même valeur par défaut.

   Pour re-thémer :
     - Changement global → modifier la palette brute
     - Changement local  → modifier uniquement le
       token de la section concernée
   ============================================= */
:root {

  /* ##########################################
     COUCHE 1 — PALETTE BRUTE (source de vérité)
     ########################################## */

  /* -- Rose (marque) -- */
  --palette-blue: #fd438e;
  /* Base Pink */
  --palette-blue-dark: #e12571;
  /* Dark Pink */
  --palette-blue-ink: #7a0031;
  /* Very dark pink/red */
  --palette-blue-pale: #ffe6f0;
  /* Light pink */
  --palette-blue-soft: #ffb3d1;
  /* Pastel pink (dark mode) */

  /* -- Vert (succès / validation) -- */
  --palette-green: #0cad5f;
  --palette-green-dark: #0a9652;

  /* -- Neutres rosés (light mode) -- */
  --palette-cream: #fef5f7;
  /* Blanc cassé vers le rose */
  --palette-cream-2: #fcf0f4;
  /* Beige clair (cards) */
  --palette-gray-line: #e8d8de;
  /* Lignes / dividers subtilement rosés */
  --palette-gray: #d1b8c2;
  /* Gris moyen avec teinte rose */
  --palette-gray-text: #7a636c;
  /* Gris texte secondaire chaud */
  --palette-ink: #000000;
  /* Noir pur pour l'écriture */

  /* -- Neutres rosés (dark mode — version claire) -- */
  --palette-dark-0: #2d2226;
  /* Fond body dark (rosé doux) */
  --palette-dark-1: #362a2f;
  /* Surface dark la + basse */
  --palette-dark-2: #3f3237;
  /* Cards / modals dark */
  --palette-dark-3: #4a3c41;
  /* Inner containers dark */
  --palette-dark-4: #56474c;
  /* Cards dark élevées */
  --palette-dark-5: #6e5c63;
  /* Scrollbar dark */
  --palette-silver-1: #f0e8ea;
  /* Texte clair dark */
  --palette-silver-2: #d4c5ca;
  /* Texte moyen dark */
  --palette-silver-3: #b0a0a6;
  /* Texte estompé dark */

  /* -- Absolus -- */
  --palette-white: #ffffff;

  /* -- Tuples RGB (pour les rgba avec alpha) -- */
  --rgb-blue: 253, 67, 142;
  /* = #fd438e */
  --rgb-blue-soft: 255, 179, 209;
  /* = #ffb3d1 */
  --rgb-green: 12, 173, 95;
  /* = #0cad5f */
  --rgb-cream: 254, 245, 247;
  /* = #fef5f7 */
  --rgb-dark-0: 45, 34, 38;
  /* = #2d2226 */
  --rgb-dark-4: 86, 71, 76;
  /* = #56474c */
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;
  --rgb-neutral: 128, 128, 128;
  /* gris neutre (thumb) */


  /* ##########################################
     COUCHE 3 — PONT TAILWIND
     ##########################################
     Ces variables pilotent la config Tailwind
     dans index.html (tailwind.config.theme.colors).

     Format OBLIGATOIRE : "R G B" avec ESPACES
     (pas de virgules), pour supporter la syntaxe
     Tailwind   bg-primary/50,  text-surface/30, …
     via   rgb(var(--tw-xxx) / <alpha-value>).

     Modifier ici = change la couleur PARTOUT
     où Tailwind est utilisé (hero, nav, parcours,
     guides, outils, footer, modals…).
     ########################################## */

  /* -- PRIMARY (Pink #FD438E) -- */
  --tw-primary: 253 67 142;
  /* #fd438e — bg-primary : boutons principaux, texte titres, icônes actives */
  --tw-primary-container: 225 37 113;
  /* #e12571 — bg-primary-container : variante au hover des CTA */
  --tw-on-primary: 255 255 255;
  /* #ffffff — text-on-primary : texte blanc sur fond primary */
  --tw-on-primary-container: 255 255 255;
  /* #ffffff — texte sur fond primary-container */
  --tw-primary-fixed: 255 230 240;
  /* #ffe6f0 — bg-primary-fixed : pastille du hero */
  --tw-primary-fixed-dim: 255 179 209;
  /* #ffb3d1 — pastel */
  --tw-on-primary-fixed: 122 0 49;
  /* #7a0031 — texte sur la pastille */
  --tw-on-primary-fixed-variant: 253 67 142;
  /* #fd438e */
  --tw-inverse-primary: 255 179 209;
  /* #ffb3d1 — version dark mode */

  /* -- SECONDARY (orange/pêche pour le gradient) -- */
  --tw-secondary: 0 0 0;
  --tw-gradient-stops: var(--tw-gradient-from), rgb(119 25 63) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-on-secondary: 255 255 255;
  /* #ffffff */
  --tw-secondary-container: 255 218 181;
  /* #ffdab5 */
  --tw-on-secondary-container: 143 80 0;
  /* #8f5000 */
  --tw-secondary-fixed: 255 218 181;
  --tw-secondary-fixed-dim: 255 190 128;
  --tw-on-secondary-fixed: 71 40 0;
  --tw-on-secondary-fixed-variant: 110 60 0;

  /* -- TERTIARY (violet) -- */
  --tw-tertiary: 79 0 208;
  --tw-on-tertiary: 255 255 255;
  --tw-tertiary-container: 104 51 234;
  --tw-on-tertiary-container: 222 210 255;
  --tw-tertiary-fixed: 232 222 255;
  --tw-tertiary-fixed-dim: 205 189 255;
  --tw-on-tertiary-fixed: 32 0 95;
  --tw-on-tertiary-fixed-variant: 79 0 208;

  /* -- ERROR (rouge d'alerte) -- */
  --tw-error: 186 26 26;
  --tw-on-error: 255 255 255;
  --tw-error-container: 255 218 214;
  --tw-on-error-container: 147 0 10;

  /* -- SURFACES (Blanc cassé subtilement rosé pour casser le côté flashy) -- */
  --tw-surface: 254 245 247;
  /* #fef5f7 */
  --tw-surface-bright: 255 255 255;
  /* #ffffff */
  --tw-surface-dim: 252 240 244;
  /* #fcf0f4 */
  --tw-surface-variant: 249 237 241;
  /* #f9edf1 */
  --tw-surface-tint: 253 67 142;
  /* #fd438e */
  --tw-surface-container: 252 240 244;
  /* #fcf0f4 */
  --tw-surface-container-low: 254 245 247;
  /* #fef5f7 */
  --tw-surface-container-lowest: 255 255 255;
  /* #ffffff */
  --tw-surface-container-high: 249 237 241;
  /* #f9edf1 */
  --tw-surface-container-highest: 244 227 232;
  /* #f4e3e8 */
  --tw-inverse-surface: 86 71 76;
  /* #56474c */
  --tw-inverse-on-surface: 240 232 234;
  /* #f0e8ea */

  /* -- TEXTES par-dessus les surfaces -- */
  --tw-on-surface: 0 0 0;
  /* #000000 — Écriture en noir pur */
  --tw-on-surface-variant: 92 75 82;
  /* #5c4b52 — Gris chaud/rosé */
  --tw-on-background: 0 0 0;
  /* #000000 — Noir pur */
  --tw-background: 254 245 247;
  /* #fef5f7 — Fond global très légèrement rosé */

  /* -- OUTLINES (contours) -- */
  --tw-outline: 122 99 108;
  /* #7a636c */
  --tw-outline-variant: 209 184 194;
  /* #d1b8c2 */

  /* -- NENUPHAR (vert) -- */
  --tw-nenuphar: 12 173 95;
  /* #0cad5f */
  --tw-nenuphar-light: 52 211 153;
  /* #34d399 */


  /* ##########################################
     COUCHE 2 — TOKENS SÉMANTIQUES PAR SECTION
     ##########################################
     Chaque élément UI a ses propres variables.
     Change-les pour modifier SEULEMENT cet élément.
     ########################################## */


  /* ==========================================
     SECTION — BODY / PAGE
     ==========================================
     Fond et texte par défaut de toute la page
     lorsque le dark mode est actif. En light
     mode, c'est Tailwind (bg-surface-container-
     lowest) qui gère le fond, donc pas de var ici.
     ========================================== */
  --body-bg-dark: var(--palette-dark-0);
  /* #0f0f12 — fond noir bleuté de la page en dark mode */
  --body-text-dark: var(--palette-silver-1);
  /* #e5e2e1 — couleur du texte courant en dark mode */


  /* ==========================================
     SECTION — HEADER / GLASS NAV
     ==========================================
     Barre de navigation fixe en haut de page.
     Fond "verre dépoli" (translucide + flou).
     ========================================== */
  --header-bg-rgb: var(--rgb-cream);
  /* #fcf9f8 à 80% — fond translucide beige de la nav en light */
  --header-bg-dark-rgb: var(--rgb-dark-0);
  /* #0f0f12 à 85% — fond translucide sombre de la nav en dark */
  --header-border-dark-rgb: var(--rgb-white);
  /* blanc à 6% — liseré fin sous la nav en dark mode */


  /* ==========================================
     SECTION — LIENS DE NAVIGATION (desktop + mobile)
     ==========================================
     Lien "actif" = celui correspondant à la
     section actuellement visible (Accueil,
     Guides, Outils…). Souligné en desktop,
     mis en pastille en mobile.
     ========================================== */
  --nav-link-active: var(--palette-blue);
  /* #00458f — couleur bleue du lien actif en desktop (light) */
  --nav-link-active-dark: var(--palette-blue-soft);
  /* #abc7ff — couleur bleu pastel du lien actif en desktop (dark) */
  --nav-link-mobile-bg-rgb: var(--rgb-blue);
  /* #00458f à 12% — pastille de fond du lien actif dans le menu mobile (light) */
  --nav-link-mobile-border-rgb: var(--rgb-blue);
  /* #00458f à 25% — bordure du lien actif mobile (light) */
  --nav-link-mobile-shadow-rgb: var(--rgb-blue);
  /* #00458f à 10% — ombre portée du lien actif mobile (light) */
  --nav-link-mobile-bg-dark-rgb: var(--rgb-blue-soft);
  /* #abc7ff à 10% — pastille de fond du lien actif mobile (dark) */
  --nav-link-mobile-border-dark-rgb: var(--rgb-blue-soft);
  /* #abc7ff à 20% — bordure lien actif mobile (dark) */
  --nav-link-mobile-shadow-dark-rgb: var(--rgb-blue-soft);
  /* #abc7ff à 6%  — ombre lien actif mobile (dark) */


  /* ==========================================
     SECTION — PANNEAU DU MOBILE MENU (dark mode)
     ==========================================
     Menu déroulant qui s'ouvre quand on clique
     sur le bouton hamburger en mobile. Chaque
     ligne du menu = "mobile-nav-item".
     ========================================== */
  --mobile-menu-bg-rgb: var(--rgb-dark-0);
  /* #0f0f12 à 97% — fond translucide du panneau déroulant */
  --mobile-item-bg-rgb: var(--rgb-dark-4);
  /* #2a2a32 à 80%/100% — fond de chaque ligne du menu (repos / hover) */
  --mobile-item-border-rgb: var(--rgb-white);
  /* blanc à 6% — bordure fine de chaque ligne */
  --mobile-item-text: var(--palette-silver-2);
  /* #c2c6d4 — texte (label) de chaque ligne du menu */
  --mobile-item-hover-border-rgb: var(--rgb-blue-soft);
  /* #abc7ff à 20% — bordure de la ligne survolée */
  --mobile-item-icon: var(--palette-blue-soft);
  /* #abc7ff — icône bleue à gauche de chaque ligne */
  --mobile-item-icon-muted-rgb: var(--rgb-white);
  /* blanc à 15% — icône chevron à droite, atténuée */


  /* ==========================================
     SECTION — SÉLECTION DE TEXTE (::selection)
     ==========================================
     Couleur qui apparaît quand on fait un
     clic-glissé sur du texte pour le surligner.
     ========================================== */
  --selection-bg: var(--palette-blue-pale);
  /* #d7e2ff — fond bleu clair du surlignage en light */
  --selection-text: var(--palette-blue-ink);
  /* #001b3f — couleur du texte surligné en light */
  --selection-bg-dark-rgb: var(--rgb-blue-soft);
  /* #abc7ff à 30% — fond du surlignage en dark */
  --selection-text-dark: var(--palette-white);
  /* #ffffff — texte surligné en dark */


  /* ==========================================
     SECTION — SCROLLBAR
     ==========================================
     Barre de défilement latérale (et modale).
     Seul le "pouce" (thumb) est coloré, la piste
     est transparente.
     ========================================== */
  --scrollbar-thumb: var(--palette-gray);
  /* #c2c6d4 — pouce gris clair de la scrollbar (light) */
  --scrollbar-thumb-dark: var(--palette-dark-5);
  /* #424752 — pouce gris foncé de la scrollbar (dark) */


  /* ==========================================
     SECTION — FOCUS RING (accessibilité)
     ==========================================
     Contour coloré qui apparaît autour d'un
     élément quand on le focus au clavier (Tab).
     ========================================== */
  --focus-ring: var(--palette-blue-soft);
  /* #abc7ff — contour bleu pastel du focus clavier */


  /* ==========================================
     SECTION — QUIZ OPTIONS (.quiz-option)
     ==========================================
     Boutons-réponses d'un quiz. Trois états :
     repos / survol / sélectionné.
     ========================================== */
  --quiz-bg: var(--palette-cream);
  /* #fcf9f8 — fond d'une option au repos (light) */
  --quiz-border: var(--palette-gray);
  /* #c2c6d4 — bordure grise au repos (light) */
  --quiz-text: var(--palette-ink);
  /* #1c1b1b — texte de l'option (light) */
  --quiz-hover-bg: var(--palette-cream-2);
  /* #f6f3f2 — fond légèrement assombri au survol (light) */
  --quiz-hover-border: var(--palette-blue);
  /* #00458f — bordure bleue au survol (light) */
  --quiz-selected-bg: var(--palette-blue-pale);
  /* #d7e2ff — fond bleu clair de l'option sélectionnée (light) */
  --quiz-selected-border: var(--palette-blue);
  /* #00458f — bordure bleue de l'option sélectionnée (light) */
  --quiz-selected-text: var(--palette-blue);
  /* #00458f — texte bleu gras de l'option sélectionnée (light) */
  /* dark */
  --quiz-bg-dark: var(--palette-dark-2);
  /* #1c1c22 — fond d'une option au repos (dark) */
  --quiz-border-dark-rgb: var(--rgb-white);
  /* blanc à 10% — bordure translucide (dark) */
  --quiz-text-dark: var(--palette-silver-1);
  /* #e5e2e1 — texte de l'option (dark) */
  --quiz-hover-bg-dark: var(--palette-dark-4);
  /* #2a2a32 — fond au survol (dark) */
  --quiz-hover-border-dark: var(--palette-blue-soft);
  /* #abc7ff — bordure bleue pastel au survol (dark) */
  --quiz-selected-bg-dark-rgb: var(--rgb-blue-soft);
  /* #abc7ff à 15% — fond de l'option sélectionnée (dark) */
  --quiz-selected-border-dark: var(--palette-blue-soft);
  /* #abc7ff — bordure de l'option sélectionnée (dark) */
  --quiz-selected-text-dark: var(--palette-blue-soft);
  /* #abc7ff — texte bleu pastel de l'option sélectionnée (dark) */


  /* ==========================================
     SECTION — TOOL PASSWORD INPUT
     ==========================================
     Champ de saisie du mot de passe dans l'outil
     "Testeur de mot de passe", + barre de force
     affichée en dessous.
     ========================================== */
  --input-bg: var(--palette-cream-2);
  /* #f6f3f2 — fond beige clair du champ de saisie (light) */
  --input-border: var(--palette-gray);
  /* #c2c6d4 — bordure grise au repos (light) */
  --input-text: var(--palette-ink);
  /* #1c1b1b — couleur du texte tapé (light) */
  --input-placeholder: var(--palette-gray-text);
  /* #727784 — texte d'indication "Entrez votre mot de passe…" (light) */
  --input-focus-border: var(--palette-blue);
  /* #00458f — bordure bleue quand le champ est focus (light) */
  --strength-bar-bg: var(--palette-gray-line);
  /* #e5e2e1 — fond gris de la jauge de force vide (light) */
  /* dark */
  --input-bg-dark: var(--palette-dark-2);
  /* #1c1c22 — fond du champ de saisie (dark) */
  --input-border-dark-rgb: var(--rgb-white);
  /* blanc à 10% — bordure translucide (dark) */
  --input-text-dark: var(--palette-silver-1);
  /* #e5e2e1 — couleur du texte tapé (dark) */
  --input-focus-border-dark: var(--palette-blue-soft);
  /* #abc7ff — bordure bleue pastel au focus (dark) */
  --strength-bar-bg-dark-rgb: var(--rgb-white);
  /* blanc à 6% — fond de la jauge vide (dark) */


  /* ==========================================
     SECTION — PLATFORM GUIDE CARDS (.pm-guide-card)
     ==========================================
     Cartes d'un guide de plateforme dans la
     modal "Plateformes" (Facebook, Insta, …).
     Trois états : repos / survol / terminé.
     ========================================== */
  --pm-card-bg: var(--palette-cream-2);
  /* #f6f3f2 — fond beige clair d'une carte au repos (light) */
  --pm-card-border: var(--palette-gray-line);
  /* #e5e2e1 — bordure grise fine au repos (light) */
  --pm-card-hover-border: var(--palette-blue);
  /* #00458f — bordure bleue au survol (light) */
  --pm-card-hover-shadow-rgb: var(--rgb-blue);
  /* #00458f à 8% — ombre portée bleutée au survol (light) */
  --pm-card-done-border: var(--palette-green);
  /* #0cad5f — bordure verte quand le guide est terminé */
  --pm-card-done-bg-rgb: var(--rgb-green);
  /* #0cad5f à 4% — teinte verte de fond quand terminé (light) */
  /* dark */
  --pm-card-bg-dark: var(--palette-dark-4);
  /* #2a2a32 — fond de la carte (dark) */
  --pm-card-border-dark-rgb: var(--rgb-white);
  /* blanc à 6% — bordure translucide au repos (dark) */
  --pm-card-hover-border-dark-rgb: var(--rgb-blue-soft);
  /* #abc7ff à 20% — bordure au survol (dark) */
  --pm-card-done-bg-dark-rgb: var(--rgb-green);
  /* #0cad5f à 8% — teinte verte de fond quand terminé (dark) */


  /* ==========================================
     SECTION — GUIDE TIMELINE
     ==========================================
     La "timeline" d'étapes d'un guide (modal
     Guides). Chaque étape a : un node (cercle
     numéroté à gauche), une card à droite avec
     label + description + tip + miniature.
     Trois états : idle / active / done.
     ========================================== */

  /* ---- Ligne verticale qui relie les étapes ---- */
  --tl-line: var(--palette-gray-line);
  /* #e5e2e1 — trait vertical gris reliant les nodes (light) */
  --tl-line-dark-rgb: var(--rgb-white);
  /* blanc à 8% — trait vertical (dark) */

  /* ---- Node au repos (cercle numéroté par défaut) ---- */
  --tl-node-bg: var(--palette-gray-line);
  /* #e5e2e1 — fond gris clair du cercle numéroté (light) */
  --tl-node-text: var(--palette-gray-text);
  /* #727784 — numéro gris à l'intérieur du cercle (light) */
  --tl-node-ring: var(--palette-cream);
  /* #fcf9f8 — bord blanc-crème autour du cercle (light) */
  --tl-node-bg-dark: var(--palette-dark-4);
  /* #2a2a32 — fond du cercle numéroté (dark) */
  --tl-node-text-dark: var(--palette-silver-2);
  /* #c2c6d4 — numéro à l'intérieur (dark) */
  --tl-node-ring-dark: var(--palette-dark-2);
  /* #1c1c22 — bord sombre autour du cercle (dark) */

  /* ---- Node actif (étape en cours) ---- */
  --tl-node-active-bg: var(--palette-blue);
  /* #00458f — fond bleu du node actif (light) */
  --tl-node-active-text: var(--palette-white);
  /* #ffffff — numéro blanc du node actif (light) */
  --tl-node-active-glow-rgb: var(--rgb-blue);
  /* #00458f à 15% — halo bleu autour du node actif (light) */
  --tl-node-active-bg-dark: var(--palette-blue-soft);
  /* #abc7ff — fond bleu pastel du node actif (dark) */
  --tl-node-active-text-dark: var(--palette-blue-ink);
  /* #001b3f — numéro bleu foncé du node actif (dark) */
  --tl-node-active-glow-dark-rgb: var(--rgb-blue-soft);
  /* #abc7ff à 15% — halo autour du node actif (dark) */

  /* ---- Node terminé (étape validée) ---- */
  --tl-node-done-bg: var(--palette-green);
  /* #0cad5f — fond vert du node terminé */
  --tl-node-done-text: var(--palette-white);
  /* #ffffff — numéro blanc du node terminé */

  /* ---- Card d'étape (contenu à droite du node) ---- */
  --tl-card-bg: var(--palette-cream-2);
  /* #f6f3f2 — fond beige clair de la card au repos (light) */
  --tl-card-bg-dark: var(--palette-dark-4);
  /* #2a2a32 — fond de la card au repos (dark) */
  --tl-card-hover-shadow-rgb: var(--rgb-black);
  /* noir à 6% — ombre portée discrète au survol */

  /* ---- Card active (étape en cours) ---- */
  --tl-card-active-border: var(--palette-blue);
  /* #00458f — bordure bleue de la card active (light) */
  --tl-card-active-bg-rgb: var(--rgb-blue);
  /* #00458f à 4% — teinte bleutée de fond (light) */
  --tl-card-active-shadow-rgb: var(--rgb-blue);
  /* #00458f à 6% — ombre bleutée portée (light) */
  --tl-card-active-border-dark: var(--palette-blue-soft);
  /* #abc7ff — bordure de la card active (dark) */
  --tl-card-active-bg-dark-rgb: var(--rgb-blue-soft);
  /* #abc7ff à 6% — teinte de fond (dark) */

  /* ---- Card done (étape validée) ---- */
  --tl-card-done-border: var(--palette-green);
  /* #0cad5f — bordure verte de la card validée */
  --tl-card-done-bg-rgb: var(--rgb-green);
  /* #0cad5f à 4% — teinte verte de fond (light) */
  --tl-card-done-bg-dark-rgb: var(--rgb-green);
  /* #0cad5f à 6% — teinte verte de fond (dark) */

  /* ---- Label (titre de l'étape) ---- */
  --tl-label: var(--palette-ink);
  /* #1c1b1b — texte principal du label (light) */
  --tl-label-dark: var(--palette-silver-1);
  /* #e5e2e1 — texte principal du label (dark) */
  --tl-label-done: var(--palette-green);
  /* #0cad5f — label vert quand l'étape est validée */

  /* ---- Description (sous-texte de l'étape) ---- */
  --tl-desc: var(--palette-gray-text);
  /* #727784 — sous-texte gris (light) */
  --tl-desc-dark: var(--palette-silver-3);
  /* #9ca3af — sous-texte estompé (dark) */
  --tl-desc-done: var(--palette-green);
  /* #0cad5f — sous-texte vert quand validé */

  /* ---- Tip box (petite astuce sous l'étape active) ---- */
  --tl-tip-bg-rgb: var(--rgb-blue);
  /* #00458f à 5%  — fond bleuté de l'astuce (light) */
  --tl-tip-border-rgb: var(--rgb-blue);
  /* #00458f à 8%  — bordure de l'astuce (light) */
  --tl-tip-text: var(--palette-blue);
  /* #00458f — texte bleu de l'astuce (light) */
  --tl-tip-bg-dark-rgb: var(--rgb-blue-soft);
  /* #abc7ff à 6% — fond de l'astuce (dark) */
  --tl-tip-border-dark-rgb: var(--rgb-blue-soft);
  /* #abc7ff à 10% — bordure de l'astuce (dark) */
  --tl-tip-text-dark: var(--palette-blue-soft);
  /* #abc7ff — texte de l'astuce (dark) */
  --tl-tip-done-bg-rgb: var(--rgb-green);
  /* #0cad5f à 5% — fond vert de l'astuce quand validée */
  --tl-tip-done-border-rgb: var(--rgb-green);
  /* #0cad5f à 10% — bordure verte quand validée */
  --tl-tip-done-text: var(--palette-green);
  /* #0cad5f — texte vert quand validée */

  /* ---- Thumbnail (miniature image de capture d'écran) ---- */
  --tl-thumb-border-rgb: var(--rgb-neutral);
  /* #808080 à 15% — bordure neutre de la miniature */
  --tl-thumb-shadow-rgb: var(--rgb-black);
  /* noir à 12% — ombre portée au survol de la miniature */


  /* ==========================================
     SECTION — FINISH BUTTON (guide terminé)
     ==========================================
     Bouton "Terminer" qui devient vert une fois
     que toutes les étapes d'un guide sont cochées.
     ========================================== */
  --finish-bg: var(--palette-green);
  /* #0cad5f — fond vert du bouton "Terminer" une fois tout validé */
  --finish-hover-bg: var(--palette-green-dark);
  /* #0a9652 — fond vert foncé au survol du bouton */


  /* ==========================================
     SECTION — MODALS (génériques + signaler)
     ==========================================
     Toutes les fenêtres modales du site
     (Plateformes, Guides, Quiz, Outil, Signaler,
     Bloquer, Ressources) et leurs ombres portées.
     ========================================== */
  --modal-shadow-rgb: var(--rgb-black);
  /* noir à 25% — ombre portée de la modal en light */
  --modal-shadow-dark-rgb: var(--rgb-black);
  /* noir à 50% — ombre portée de la modal en dark */
  --modal-bg-dark: var(--palette-dark-2);
  /* #1c1c22 — fond de toute modal en dark mode */
  --modal-border-dark-rgb: var(--rgb-white);
  /* blanc à 10% — bordure translucide des modals (dark) */
  --modal-divider-dark-rgb: var(--rgb-white);
  /* blanc à 6%  — trait séparateur entre header et body (dark) */
  --modal-inner-bg-dark: var(--palette-dark-3);
  /* #22222a — fond des cards intérieures dans les modals (dark) */
  --modal-subtle-bg-dark-rgb: var(--rgb-white);
  /* blanc à 4%  — fond des blocs colorés subtils (bg-primary/5 etc.) en dark */
  --signaler-header-bg-dark: var(--palette-blue-dark);
  /* #003370 — le header de la modal "Signaler" reste bleu foncé en dark */


  /* ==========================================
     SECTION — SURFACES TAILWIND (dark overrides)
     ==========================================
     Ces variables surchargent les classes
     utilitaires Tailwind .bg-white, .bg-surface,
     .bg-surface-container-*, .text-on-surface,
     .text-primary quand le dark mode est actif.
     ========================================== */
  --tw-surface-bg-dark: var(--palette-dark-0);
  /* #0f0f12 — fond de .bg-surface en dark */
  --tw-surface-container-bg-dark: var(--palette-dark-2);
  /* #1c1c22 — fond de .bg-surface-container en dark */
  --tw-surface-container-low-bg-dark: var(--palette-dark-1);
  /* #151518 — fond de .bg-surface-container-low en dark */
  --tw-surface-container-lowest-bg-dark: var(--palette-dark-2);
  /* #1c1c22 — fond de .bg-white et .bg-surface-container-lowest en dark */
  --tw-surface-container-highest-bg-dark: var(--palette-dark-4);
  /* #2a2a32 — fond de .bg-surface-container-highest en dark */
  --tw-text-on-surface-dark: var(--palette-silver-2);
  /* #c2c6d4 — couleur de .text-on-surface / .text-on-surface-variant en dark */
  --tw-text-primary-dark: var(--palette-blue-soft);
  /* #abc7ff — couleur de .text-primary en dark */


  /* ==========================================
     SECTION — PARCOURS (carte au trésor)
     ==========================================
     La "Treasure Map" interactive de la home,
     avec ses nodes (étapes) et son chemin
     pointillé. Seules les surcharges dark sont
     exposées (light = géré par Tailwind).
     ========================================== */
  --parcours-path-dark: var(--palette-blue-soft);
  /* #abc7ff — couleur du chemin pointillé (stroke SVG) en dark */
  --parcours-node-ring-dark-rgb: var(--rgb-white);
  /* blanc à 15% — anneau autour de chaque node en dark */
  --parcours-outline-dark-rgb: var(--rgb-white);
  /* blanc à 6%  — bordures .border-outline-variant en dark */


  /* ==========================================
     SECTION — HERO (score bar dynamique)
     ==========================================
     Barre de score "Cyber" du widget hero.
     La couleur du remplissage change selon la
     valeur du score (0-100%). hero.js applique
     ces variables en inline style sur la barre.
       - 0-35%   → rouge (danger)
       - 36-75%  → orange (moyen)
       - 76-100% → vert (bon)
     ========================================== */
  --score-bar-low: #ba1a1a;
  /* Rouge — fond barre de score 0-35% */
  --score-bar-mid: #ff9800;
  /* Orange — fond barre de score 36-75% */
  --score-bar-high: #0cad5f;
  /* Vert — fond barre de score 76-100% */
  --score-bar-low-shadow-rgb: 186 26 26;
  /* Halo rouge — utilisé via rgb(var() / 0.3) */
  --score-bar-mid-shadow-rgb: 255 152 0;
  /* Halo orange — utilisé via rgb(var() / 0.3) */
  --score-bar-high-shadow-rgb: 12 173 95;
  /* Halo vert — utilisé via rgb(var() / 0.3) */

}

/* --- Material Symbols config --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* --- Glass Navigation Bar --- */
.glass-nav {
  background: rgba(var(--header-bg-rgb), 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* --- Active nav link (desktop) --- */
.nav-link.active {
  color: var(--nav-link-active);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

html.dark .nav-link.active {
  color: var(--nav-link-active-dark);
}

/* --- Active nav link (mobile menu) --- */
#mobile-menu .nav-link.active {
  text-decoration: none;
  background: rgba(var(--nav-link-mobile-bg-rgb), 0.12);
  color: var(--nav-link-active);
  border-color: rgba(var(--nav-link-mobile-border-rgb), 0.25);
  box-shadow: 0 2px 8px rgba(var(--nav-link-mobile-shadow-rgb), 0.1);
}

#mobile-menu .nav-link.active .material-symbols-outlined:first-child {
  color: var(--nav-link-active);
}

html.dark #mobile-menu .nav-link.active {
  background: rgba(var(--nav-link-mobile-bg-dark-rgb), 0.1);
  color: var(--nav-link-active-dark);
  border-color: rgba(var(--nav-link-mobile-border-dark-rgb), 0.2);
  box-shadow: 0 2px 8px rgba(var(--nav-link-mobile-shadow-dark-rgb), 0.06);
}

html.dark #mobile-menu .nav-link.active .material-symbols-outlined:first-child {
  color: var(--nav-link-active-dark);
}

/* --- Mobile menu dark mode --- */
html.dark #mobile-menu {
  background: rgba(var(--mobile-menu-bg-rgb), 0.97);
}

html.dark #mobile-menu .mobile-nav-item {
  background: rgba(var(--mobile-item-bg-rgb), 0.8);
  border-color: rgba(var(--mobile-item-border-rgb), 0.06);
  color: var(--mobile-item-text);
}

html.dark #mobile-menu .mobile-nav-item:hover {
  border-color: rgba(var(--mobile-item-hover-border-rgb), 0.2);
  background: rgba(var(--mobile-item-bg-rgb), 1);
}

html.dark #mobile-menu .mobile-nav-item .material-symbols-outlined:first-child {
  color: var(--mobile-item-icon);
}

html.dark #mobile-menu .mobile-nav-item .material-symbols-outlined:last-child {
  color: rgba(var(--mobile-item-icon-muted-rgb), 0.15);
}

/* --- Mobile menu animations --- */
@keyframes menuDropIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

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

@keyframes menuDropOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes menuItemIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }

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

/* --- Hide scrollbar on filter row (mobile) --- */
#guide-filters::-webkit-scrollbar {
  display: none;
}

/* --- Treasure Map dashed path --- */
.treasure-path {
  stroke-dasharray: 8 8;
}

/* --- Smooth scroll --- */
html {
  scroll-behavior: smooth;
}

/* --- Selection color --- */
::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

/* --- Parcours check badge (show when .completed) --- */
.parcours-node.completed .parcours-check {
  display: flex !important;
}

/* --- Quiz option styling --- */
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  border-radius: 16px;
  border: 2px solid var(--quiz-border);
  background: var(--quiz-bg);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--quiz-text);
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.5;
}

.quiz-option:hover {
  border-color: var(--quiz-hover-border);
  background: var(--quiz-hover-bg);
}

.quiz-option.selected {
  border-color: var(--quiz-selected-border);
  background: var(--quiz-selected-bg);
  color: var(--quiz-selected-text);
  font-weight: 700;
}

/* --- Bouton info du modal guide : etat actif (popover ouverte) --- */
#guide-info[aria-expanded="true"] {
  background-color: rgb(var(--tw-primary)) !important;
  color: #fff !important;
}

#guide-info[aria-expanded="true"] .material-symbols-outlined {
  color: #fff !important;
}

/* --- Glossary tooltip trigger (rose clair coordonné avec le thème) --- */
.quiz-glossary {
  background: rgb(var(--tw-primary-fixed));
  color: rgb(var(--tw-primary-container));
  font-weight: 700;
  padding: 0.05em 0.35em;
  border-radius: 6px;
  cursor: help;
  position: relative;
  transition: background 0.2s ease;
  text-decoration: underline dotted rgb(var(--tw-primary) / 0.55);
  text-underline-offset: 3px;
}

.quiz-glossary:hover {
  background: rgb(var(--tw-primary-fixed-dim));
}

html.dark .quiz-glossary {
  background: rgb(var(--tw-primary) / 0.2);
  color: rgb(var(--tw-primary-fixed));
  text-decoration-color: rgb(var(--tw-primary-fixed-dim));
}

html.dark .quiz-glossary:hover {
  background: rgb(var(--tw-primary) / 0.3);
}

/* --- Tool modal inner components --- */
.tool-password-input {
  width: 100%;
  padding: 16px 48px 16px 20px;
  border-radius: 16px;
  border: 2px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.tool-password-input:focus {
  border-color: var(--input-focus-border);
}

.tool-password-input::placeholder {
  color: var(--input-placeholder);
}

.tool-strength-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--strength-bar-bg);
  overflow: hidden;
}

.tool-strength-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease, background 0.4s ease;
  width: 0%;
}

/* --- Dark Mode Transition --- */
html,
html body,
html .glass-nav,
html .bg-white,
html .bg-surface,
html .bg-surface-container,
html .bg-surface-container-low,
html .bg-surface-container-lowest,
html .bg-surface-container-highest,
html #parcours-path {
  transition: background 0.5s ease, background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, stroke 0.5s ease, opacity 0.5s ease;
}

/* --- Dark Mode --- */
html.dark body {
  background: var(--body-bg-dark);
  color: var(--body-text-dark);
}

html.dark {
  /* Adapter la fin du dégradé à la couleur du texte (silver #c7b6bb) en Dark Mode */
  --tw-secondary: 199 182 187;
  /* Retirer le milieu de dégradé sombre (ruby) en mode sombre pour une transition fluide Rose -> Gris */
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html.dark .glass-nav {
  background: rgba(var(--header-bg-dark-rgb), 0.85);
  border-bottom-color: rgba(var(--header-border-dark-rgb), 0.06);
}

html.dark .bg-white,
html.dark .bg-surface-container-lowest {
  background: var(--tw-surface-container-lowest-bg-dark) !important;
}

html.dark .bg-surface {
  background: var(--tw-surface-bg-dark) !important;
}

html.dark .bg-surface-container {
  background: var(--tw-surface-container-bg-dark) !important;
}

html.dark .bg-surface-container-low {
  background: var(--tw-surface-container-low-bg-dark) !important;
}

html.dark .bg-surface-container-highest {
  background: var(--tw-surface-container-highest-bg-dark) !important;
}

html.dark .text-on-surface,
html.dark .text-on-surface-variant {
  color: var(--tw-text-on-surface-dark) !important;
}

html.dark .text-primary {
  color: var(--tw-text-primary-dark) !important;
}

/* Parcours path visible in dark mode */
html.dark #parcours-path {
  stroke: var(--parcours-path-dark) !important;
  opacity: 0.25 !important;
}

/* Parcours node rings visible in dark */
html.dark .parcours-node .ring-4 {
  --tw-ring-color: rgba(var(--parcours-node-ring-dark-rgb), 0.15) !important;
}

/* -- Boutons moins flashy (Soft Premium Aesthetic) -- */
button.bg-primary {
  background-color: #170911 !important; /* Noir très profond avec nuance rose */
  color: #ffffff !important;
}
html.dark button.bg-primary {
  background-color: var(--palette-silver-1) !important; /* Silver #e6dddf */
  color: var(--palette-dark-0) !important; /* Dark Bg #140f11 */
}
button.bg-primary:hover {
  background-color: #27101d !important; /* Très légèrement plus clair au survol */
  opacity: 1 !important;
}
html.dark button.bg-primary:hover {
  background-color: var(--palette-silver-2) !important; /* Darker Silver hover */
}

/* Also tame the secondary pastel pink button if it exists */
button.bg-primary-fixed {
  background-color: #f7e1e8 !important; /* Rose très pâle mais distinct du fond */
  color: #170911 !important;
  border: 1px solid #eabac9;
}
html.dark button.bg-primary-fixed {
  background-color: var(--palette-dark-3) !important;
  color: var(--palette-silver-1) !important;
  border: 1px solid var(--palette-dark-4);
}

html.dark .parcours-node .ring-white {
  --tw-ring-color: rgba(var(--parcours-node-ring-dark-rgb), 0.15) !important;
}

html.dark .border-outline-variant\/10,
html.dark .border-outline-variant\/20,
html.dark .border-outline-variant\/5 {
  border-color: rgba(var(--parcours-outline-dark-rgb), 0.06) !important;
}

html.dark .quiz-option {
  background: var(--quiz-bg-dark);
  border-color: rgba(var(--quiz-border-dark-rgb), 0.1);
  color: var(--quiz-text-dark);
}

html.dark .quiz-option:hover {
  border-color: var(--quiz-hover-border-dark);
  background: var(--quiz-hover-bg-dark);
}

html.dark .quiz-option.selected {
  border-color: var(--quiz-selected-border-dark);
  background: rgba(var(--quiz-selected-bg-dark-rgb), 0.15);
  color: var(--quiz-selected-text-dark);
}

html.dark .tool-password-input {
  background: var(--input-bg-dark);
  border-color: rgba(var(--input-border-dark-rgb), 0.1);
  color: var(--input-text-dark);
}

html.dark .tool-password-input:focus {
  border-color: var(--input-focus-border-dark);
}

html.dark .tool-strength-bar {
  background: rgba(var(--strength-bar-bg-dark-rgb), 0.06);
}

/* --- Wrapper: clips border-radius, does NOT scroll --- */
.modal-clip {
  border-radius: 24px !important;
  overflow: hidden !important;
  max-height: 95vh;
  box-shadow: 0 25px 50px -12px rgba(var(--modal-shadow-rgb), 0.25);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

html.dark .modal-clip {
  box-shadow: 0 25px 50px -12px rgba(var(--modal-shadow-dark-rgb), 0.5);
}

@media (min-width: 768px) {
  .modal-clip {
    max-height: 90vh;
  }
}

/* --- Modal inner: scrolls inside the clipped wrapper + own border-radius --- */
#platform-modal,
#guide-modal,
#resources-modal,
#quiz-modal,
#tool-modal,
#signaler-modal,
#bloquer-modal {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 95vh;
  border-radius: 24px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@media (min-width: 768px) {

  #platform-modal,
  #guide-modal,
  #resources-modal,
  #quiz-modal,
  #tool-modal,
  #signaler-modal,
  #bloquer-modal {
    max-height: 90vh;
  }
}

html.dark #platform-modal,
html.dark #guide-modal,
html.dark #resources-modal,
html.dark #quiz-modal,
html.dark #tool-modal,
html.dark #signaler-modal,
html.dark #bloquer-modal {
  border-color: rgba(var(--modal-border-dark-rgb), 0.1) !important;
}

@media (min-width: 768px) {

  #platform-modal,
  #guide-modal,
  #resources-modal,
  #quiz-modal,
  #tool-modal,
  #signaler-modal,
  #bloquer-modal {
    max-height: 90vh !important;
  }
}

html.dark #platform-modal,
html.dark #guide-modal,
html.dark #resources-modal,
html.dark #quiz-modal,
html.dark #tool-modal,
html.dark #signaler-modal,
html.dark #bloquer-modal {
  background: var(--modal-bg-dark);
  border-color: rgba(var(--modal-border-dark-rgb), 0.1);
}

html.dark #platform-modal .border-b,
html.dark #guide-modal .border-b,
html.dark #resources-modal .border-b,
html.dark #quiz-modal .border-b,
html.dark #tool-modal .border-b,
html.dark #signaler-modal .border-b,
html.dark #bloquer-modal .border-b {
  border-color: rgba(var(--modal-divider-dark-rgb), 0.06);
}

/* Dark mode: modal sticky headers (not colored ones like bg-primary) */
html.dark #platform-modal .sticky,
html.dark #guide-modal .sticky,
html.dark #quiz-modal .sticky,
html.dark #tool-modal .sticky,
html.dark #bloquer-modal .sticky,
html.dark #resources-modal .sticky {
  background: var(--modal-bg-dark) !important;
}

/* Signaler modal keeps its blue header in dark mode */
html.dark #signaler-modal .sticky {
  background: var(--signaler-header-bg-dark) !important;
}

/* Dark mode: modal inner content cards */
html.dark .bg-surface-container-low {
  background: var(--modal-inner-bg-dark) !important;
}

html.dark [class*="bg-primary/5"],
html.dark [class*="bg-red-500/5"],
html.dark [class*="bg-red-500/15"],
html.dark [class*="bg-orange-500/5"],
html.dark [class*="bg-green-500/10"],
html.dark [class*="bg-orange-500/10"],
html.dark [class*="bg-primary/10"],
html.dark [class*="bg-nenuphar/5"] {
  background: rgba(var(--modal-subtle-bg-dark-rgb), 0.04) !important;
}

html.dark .pm-guide-card {
  background: var(--pm-card-bg-dark) !important;
  border-color: rgba(var(--pm-card-border-dark-rgb), 0.06) !important;
}

html.dark .pm-guide-card:hover {
  border-color: rgba(var(--pm-card-hover-border-dark-rgb), 0.2) !important;
}

/* --- Platform Guide Card --- */
.pm-guide-card {
  background: var(--pm-card-bg);
  border: 1px solid var(--pm-card-border);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

@media (max-width: 639px) {
  .pm-guide-card {
    padding: 10px;
    border-radius: 12px;
  }
}

.pm-guide-card:hover {
  border-color: var(--pm-card-hover-border);
  box-shadow: 0 4px 16px rgba(var(--pm-card-hover-shadow-rgb), 0.08);
  transform: translateY(-2px);
}

.pm-guide-card.completed {
  border-color: var(--pm-card-done-border);
  background: rgba(var(--pm-card-done-bg-rgb), 0.04);
}

html.dark .pm-guide-card.completed {
  border-color: var(--pm-card-done-border) !important;
  background: rgba(var(--pm-card-done-bg-dark-rgb), 0.08) !important;
}

html.dark ::selection {
  background: rgba(var(--selection-bg-dark-rgb), 0.3);
  color: var(--selection-text-dark);
}

/* --- Guide Timeline --- */
.guide-timeline {
  position: relative;
  padding-left: 38px;
}

@media (min-width: 768px) {
  .guide-timeline {
    padding-left: 48px;
  }
}

/* Vertical connecting line */
.guide-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--tl-line);
  border-radius: 2px;
}

@media (min-width: 768px) {
  .guide-timeline::before {
    left: 19px;
  }
}

html.dark .guide-timeline::before {
  background: rgba(var(--tl-line-dark-rgb), 0.08);
}

/* Each step */
.guide-tl-step {
  position: relative;
  padding: 14px 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.guide-tl-step:last-child {
  padding-bottom: 0;
}

.guide-tl-step:first-child {
  padding-top: 0;
}

/* Node (numbered circle) */
.guide-tl-node {
  position: absolute;
  left: -38px;
  top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--tl-node-bg);
  color: var(--tl-node-text);
  border: 3px solid var(--tl-node-ring);
  transition: all 0.3s ease;
  z-index: 2;
}

@media (min-width: 768px) {
  .guide-tl-node {
    left: -48px;
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
}

.guide-tl-step:first-child .guide-tl-node {
  top: 0;
}

html.dark .guide-tl-node {
  background: var(--tl-node-bg-dark);
  color: var(--tl-node-text-dark);
  border-color: var(--tl-node-ring-dark);
}

/* Active step node */
.guide-tl-step.active .guide-tl-node {
  background: var(--tl-node-active-bg);
  color: var(--tl-node-active-text);
  box-shadow: 0 0 0 4px rgba(var(--tl-node-active-glow-rgb), 0.15);
}

html.dark .guide-tl-step.active .guide-tl-node {
  background: var(--tl-node-active-bg-dark);
  color: var(--tl-node-active-text-dark);
  box-shadow: 0 0 0 4px rgba(var(--tl-node-active-glow-dark-rgb), 0.15);
}

/* Completed step node */
.guide-tl-step.done .guide-tl-node {
  background: var(--tl-node-done-bg);
  color: var(--tl-node-done-text);
  box-shadow: none;
}

/* Step content card */
.guide-tl-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid transparent;
  background: var(--tl-card-bg);
  transition: all 0.25s ease;
}

@media (min-width: 640px) {
  .guide-tl-card {
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
  }
}

@media (max-width: 639px) {
  .guide-tl-card {
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
  }
}

html.dark .guide-tl-card {
  background: var(--tl-card-bg-dark);
}

.guide-tl-step.active .guide-tl-card {
  border-color: var(--tl-card-active-border);
  background: rgba(var(--tl-card-active-bg-rgb), 0.04);
  box-shadow: 0 2px 12px rgba(var(--tl-card-active-shadow-rgb), 0.06);
}

html.dark .guide-tl-step.active .guide-tl-card {
  border-color: var(--tl-card-active-border-dark);
  background: rgba(var(--tl-card-active-bg-dark-rgb), 0.06);
}

.guide-tl-step.done .guide-tl-card {
  border-color: var(--tl-card-done-border);
  background: rgba(var(--tl-card-done-bg-rgb), 0.04);
}

html.dark .guide-tl-step.done .guide-tl-card {
  border-color: var(--tl-card-done-border);
  background: rgba(var(--tl-card-done-bg-dark-rgb), 0.06);
}

.guide-tl-step:hover .guide-tl-card {
  box-shadow: 0 4px 16px rgba(var(--tl-card-hover-shadow-rgb), 0.06);
}

/* Step text */
.guide-tl-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tl-label);
  flex: 1;
}

@media (max-width: 639px) {
  .guide-tl-label {
    font-size: 12px;
  }
}

html.dark .guide-tl-label {
  color: var(--tl-label-dark);
}

.guide-tl-step.done .guide-tl-label {
  color: var(--tl-label-done);
  opacity: 0.85;
}

/* Show hint only on active step */
.guide-tl-step.active .guide-tl-hint {
  display: flex !important;
}

/* Step description */
.guide-tl-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--tl-desc);
  margin-top: 4px;
}

html.dark .guide-tl-desc {
  color: var(--tl-desc-dark);
}

/* Step tip box */
.guide-tl-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(var(--tl-tip-bg-rgb), 0.05);
  border: 1px solid rgba(var(--tl-tip-border-rgb), 0.08);
  font-size: 11px;
  font-weight: 600;
  color: var(--tl-tip-text);
}

html.dark .guide-tl-tip {
  background: rgba(var(--tl-tip-bg-dark-rgb), 0.06);
  border-color: rgba(var(--tl-tip-border-dark-rgb), 0.1);
  color: var(--tl-tip-text-dark);
}

.guide-tl-step.done .guide-tl-desc {
  color: var(--tl-desc-done);
  opacity: 0.6;
}

.guide-tl-step.done .guide-tl-tip {
  background: rgba(var(--tl-tip-done-bg-rgb), 0.05);
  border-color: rgba(var(--tl-tip-done-border-rgb), 0.1);
  color: var(--tl-tip-done-text);
  opacity: 0.7;
}

/* Thumbnail image */
.guide-tl-thumb {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  cursor: zoom-in;
  transition: all 0.2s ease;
  background: transparent;
  border: 1px solid rgba(var(--tl-thumb-border-rgb), 0.15);
}

@media (min-width: 640px) {
  .guide-tl-thumb {
    width: 220px;
    height: auto;
    border-radius: 14px;
    flex-shrink: 0;
  }
}

@media (min-width: 768px) {
  .guide-tl-thumb {
    width: 260px;
  }
}

.guide-tl-thumb:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(var(--tl-thumb-shadow-rgb), 0.12);
}

/* Zoom overlay */
#guide-zoom-overlay {
  transition: opacity 0.2s ease;
}

#guide-zoom-overlay img {
  animation: zoomIn 0.25s ease forwards;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Step check animation */
@keyframes nodeCheck {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.guide-tl-step.just-checked .guide-tl-node {
  animation: nodeCheck 0.35s ease;
}

/* Finish button states */
#guide-finish.all-done {
  background: var(--finish-bg) !important;
}

#guide-finish.all-done:hover {
  background: var(--finish-hover-bg) !important;
}



/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

html.dark ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-dark);
}

/* --- Focus styles (accessibility) --- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

/* =============================================
   RESPONSIVE
   ============================================= */

/* --- Mobile: < 640px --- */
@media (max-width: 639px) {

  /* Navbar */
  nav#top-nav .font-headline.tracking-tighter {
    font-size: 1rem;
  }

  /* Hero */
  #hero {
    padding: 2rem 1rem;
    min-height: auto;
  }

  #hero h1 {
    font-size: 2.5rem !important;
  }

  #hero .text-xl {
    font-size: 1rem;
  }

  #hero .flex-col.sm\:flex-row {
    width: 100%;
  }

  #hero .flex-col.sm\:flex-row button {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
  }

  /* Score widget */
  #hero .max-w-sm {
    max-width: 100%;
  }

  /* Parcours mobile grid */
  /* Urgence */
  #urgence {
    padding: 3rem 1rem;
  }

  #urgence h2 {
    font-size: 1.75rem !important;
  }

  #urgence .grid {
    grid-template-columns: 1fr !important;
  }

  #urgence .h-\[380px\] {
    height: auto !important;
    min-height: 240px;
  }

  /* Guides */
  #guides {
    padding: 3rem 1rem;
  }

  #guides h2 {
    font-size: 2rem !important;
  }

  #guides .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  #guide-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  #guide-filters::-webkit-scrollbar {
    display: none;
  }

  #guide-filters .guide-filter {
    min-width: 90px;
    flex-shrink: 0;
  }

  /* Outils */
  #outils {
    padding: 3rem 1rem;
  }

  #outils h2 {
    font-size: 1.75rem !important;
  }

  #outils .grid {
    grid-template-columns: 1fr !important;
  }

  #outils .h-\[340px\] {
    height: auto !important;
    min-height: 220px;
    padding: 2rem 1.5rem !important;
  }

  /* Footer */
  footer .rounded-\[2\.5rem\] {
    border-radius: 1.5rem;
    padding: 1.5rem !important;
    flex-direction: column;
    text-align: center;
  }

  footer .font-black.text-3xl {
    font-size: 1.5rem;
  }

  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Modals: full screen on mobile */
  #platform-overlay>div,
  #quiz-overlay>div,
  #tool-overlay>div {
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0;
  }

  #guide-overlay>div {
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0;
  }

  #platform-overlay,
  #quiz-overlay,
  #tool-overlay,
  #guide-overlay {
    padding: 0 !important;
  }

  /* Platform modal: 2 columns on mobile */
  #pm-body [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Guide timeline thumbs: show full image on mobile */
  .guide-tl-thumb {
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* --- Tablet: 640px - 1023px --- */
@media (min-width: 640px) and (max-width: 1023px) {
  #hero h1 {
    font-size: 3.5rem !important;
  }

  /* Urgence 2 columns */
  #urgence .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #urgence .grid> :last-child {
    grid-column: 1 / -1;
  }

  /* Outils 2 columns (2x2 grid — les 4 outils en carré) */
  #outils .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- Small mobile: < 380px --- */
@media (max-width: 379px) {
  #hero h1 {
    font-size: 2rem !important;
  }

  #pm-body [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Popover "Dernière mise à jour" du modal guide : version desktop élargie --- */
/* Mobile conservé tel quel (classes Tailwind dans le HTML). Sur desktop, on force
   un popover centré, plus large, avec tout le contenu sur une seule ligne. */

/* Fond rose pastel clair (visible mais contraste suffisant pour la lecture),
   mobile + desktop. La bordure plus vive rappelle la couleur du thème. */
#guide-info-popover {
  background-color: #fff5f9 !important;
  border-color: rgb(var(--tw-primary) / 0.55) !important;
}

/* Renforce les contrastes du texte à l'intérieur du popover (mobile + desktop)
   pour garantir la lisibilité, notamment pour les utilisateurs daltoniens. */
#guide-info-popover .text-primary {
  color: rgb(var(--tw-primary-container)) !important;
}

#guide-info-popover span,
#guide-info-popover p {
  color: rgb(var(--tw-on-surface)) !important;
}

#guide-info-popover > div > p {
  font-weight: 500 !important;
}

@media (min-width: 768px) {
  #guide-info-popover {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: min(95vw, 860px) !important;
  }

  #guide-info-popover > div {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  #guide-info-popover > div > p {
    white-space: nowrap !important;
  }
}