/* ==========================================
   THÈME FLOW PURPLE — Oxania Design System
   Source des couleurs : design/Oxania Design System - Spec.html
   « Le violet parle produit, le lilas parle intelligence. »

   Deux modes :
   - body.flow-purple-mode        → variante claire (voix Pastel Lilas)
   - body.flow-purple-dark-mode   → variante sombre (co-classée flow-mode :
     hérite du styling sombre des composants, on ne recolore que les accents)

   Rampes utilisées :
   - Purple  50→900 : #EFEDFB #DDD8F6 #BDB4ED #9A8FE2 #7868D6 #5C4CCC #4A3BB0 #3A2D8E #2A1F6B #1B1149
   - Violet  50→700 : #F4F0FF #E8E0FF #D2C3FF #B7A1FF #9B7EFF #7C5CFF #6346DB #4A33A8
   - Hairline lilas : rgba(74, 51, 168, 0.12) · Ombres : rgba(74, 51, 168, 0.12/0.18)
   - Sémantiques    : success #16A34A · warning #F59E0B · danger #DC2626
   ========================================== */

/* ==========================================
   VARIANTE CLAIRE — flow-purple-mode
   ========================================== */

body.flow-purple-mode {
  /* Palette */
  --primary: #5C4CCC;              /* Brand purple (--ox-purple-500) */
  --primary-light: #7868D6;        /* --ox-purple-400 */
  --primary-dark: #4A3BB0;         /* --ox-purple-600 */
  --primary-soft: #9A8FE2;         /* --ox-purple-300 */
  --secondary: #7C5CFF;            /* Violet intelligence (--ox-violet-500) */
  --accent: #7C5CFF;
  --accent-purple: #7C5CFF;
  --accent-light: #B7A1FF;         /* --ox-violet-300 */

  /* Fonds */
  --bg-primary: #F4F0FF;           /* Lilas soft (--ox-violet-50) */
  --bg-secondary: #FAFAFA;         /* --ox-gray-25 */
  --bg-light: #FAFAFA;
  --bg-dark: #1B1149;              /* --ox-purple-900 */

  /* Textes */
  --text-primary: #1B1149;         /* Purple 900 : encre profonde */
  --text-secondary: #3A2D8E;       /* Purple 700 */
  --text-muted: #6B6B6B;           /* --ox-gray-500 */

  /* Sémantiques (tokens du design system) */
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger: #DC2626;

  /* Gradients « signature » : vrai parcours dans les rampes du DS
     (violet-700 → purple-500 → violet-500 → violet-400) plutôt que deux
     tons voisins qui rendaient un aplat sans relief */
  --gradient-primary: linear-gradient(135deg, #4A33A8 0%, #5C4CCC 40%, #7C5CFF 75%, #9B7EFF 100%);
  --gradient-hero: linear-gradient(135deg, #3A2D8E 0%, #5C4CCC 50%, #9B7EFF 100%);
  --gradient-orange: linear-gradient(135deg, #4A33A8 0%, #7C5CFF 100%);
  --gradient-light: linear-gradient(180deg, #FFFFFF 0%, #F4F0FF 100%);

  /* Glass : hairline et ombres lilas du design system */
  --glass-border: rgba(74, 51, 168, 0.12);
  --glass-shadow: 0 8px 24px rgba(74, 51, 168, 0.18);

  /* Ombres accent */
  --shadow-glow: 0 10px 25px rgba(92, 76, 204, 0.3);
  --shadow-glow-purple: 0 0 30px rgba(155, 126, 255, 0.35);
  --glow: 0 15px 35px rgba(92, 76, 204, 0.5);

  /* Blobs de fond en teintes violettes */
  --blob-1: radial-gradient(circle at 20% 30%, rgba(92, 76, 204, 0.08) 0%, transparent 50%);
  --blob-2: radial-gradient(circle at 80% 70%, rgba(124, 92, 255, 0.08) 0%, transparent 50%);
  --blob-3: radial-gradient(circle at 50% 50%, rgba(155, 126, 255, 0.06) 0%, transparent 50%);

  --border-color: rgba(74, 51, 168, 0.12);

  /* Pas d'animation de fond sur ce thème : le body porte la couleur pleine
     (le canvas flow ne peint plus rien ici) */
  background-color: #F4F0FF;
}

/* Le .glass-dark de variables.css garde une bordure orange hardcodée */
body.flow-purple-mode .glass-dark {
  border-color: rgba(74, 51, 168, 0.2);
}

/* ==========================================
   VARIANTE SOMBRE — flow-purple-dark-mode
   (le body porte aussi flow-mode : les surfaces sombres des composants
   viennent de là, ici on ne redéfinit que la couche accent/couleur)
   ========================================== */

body.flow-purple-dark-mode {
  /* Palette : rampe violet claire pour contraster sur l'indigo profond */
  --primary: #7C5CFF;              /* --ox-violet-500 */
  --primary-light: #9B7EFF;        /* --ox-violet-400 */
  --primary-dark: #6346DB;         /* --ox-violet-600 */
  --primary-soft: #B7A1FF;         /* --ox-violet-300 */
  --secondary: #9B7EFF;
  --accent: #9B7EFF;
  --accent-purple: #9B7EFF;
  --accent-light: #D2C3FF;         /* --ox-violet-200 */

  /* Fonds : violet-noir (purple-900 rabattu vers le noir), le purple-900
     devient la surface élevée */
  --bg-primary: #0C0821;
  --bg-secondary: #1B1149;         /* --ox-purple-900 */
  --bg-light: #1B1149;
  --bg-dark: #0C0821;

  /* Textes */
  --text-primary: #FFFFFF;
  --text-secondary: #DDD8F6;       /* --ox-purple-100 */
  --text-muted: #BDB4ED;           /* --ox-purple-200 */

  /* Sémantiques */
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger: #DC2626;

  /* Gradients « signature » sombre : arc lumineux violet-600 → violet-300.
     La fin à #B7A1FF reste franchement violette (contraste ~7.6:1 sur le
     fond #0C0821) — l'ancienne fin #D2C3FF tirait vers le blanc */
  --gradient-primary: linear-gradient(135deg, #6346DB 0%, #7C5CFF 35%, #9B7EFF 70%, #B7A1FF 100%);
  --gradient-hero: linear-gradient(135deg, #7C5CFF 0%, #9B7EFF 55%, #B7A1FF 100%);
  --gradient-orange: linear-gradient(135deg, #6346DB 0%, #9B7EFF 100%);

  /* Glass sombre teinté purple 900 plutôt que navy neutre */
  --glass-bg: rgba(27, 17, 73, 0.45);
  --glass-bg-light: rgba(27, 17, 73, 0.6);
  --glass-bg-dark: rgba(12, 8, 33, 0.55);
  --glass-border: rgba(155, 126, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(6, 4, 18, 0.55);

  /* Ombres accent */
  --shadow-glow: 0 10px 25px rgba(124, 92, 255, 0.35);
  --shadow-glow-purple: 0 0 30px rgba(155, 126, 255, 0.4);
  --glow: 0 15px 35px rgba(124, 92, 255, 0.5);

  --border-color: rgba(155, 126, 255, 0.15);

  /* Fond violet-noir en couleur pleine : pas d'animation, et cette règle
     (chargée après base.css) bat le background #0a0a12 hérité du co-classage
     body.flow-mode */
  background-color: #0C0821;
}

/* --- Contre-surcharges des règles body.flow-mode à orange hardcodé ---
   Même spécificité que base.css (body.classe .composant) : ce fichier est
   chargé après, l'ordre source nous donne la priorité. */

body.flow-purple-dark-mode .btn-primary {
  background: linear-gradient(135deg, #6346DB 0%, #7C5CFF 55%, #9B7EFF 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(124, 92, 255, 0.4);
}

body.flow-purple-dark-mode .btn-primary:hover {
  background: linear-gradient(135deg, #7C5CFF 0%, #9B7EFF 55%, #B7A1FF 100%);
  box-shadow: 0 6px 30px rgba(124, 92, 255, 0.5);
  transform: translateY(-2px);
}

/* Surfaces navbar/footer : violet-noir translucide plutôt que navy neutre */
body.flow-purple-dark-mode .navbar {
  background: rgba(12, 8, 33, 0.78);
  border-bottom-color: rgba(155, 126, 255, 0.12);
}

body.flow-purple-dark-mode .footer {
  background: rgba(12, 8, 33, 0.88);
  border-top-color: rgba(155, 126, 255, 0.12);
}

/* Wordmark « Oxania » : gradient dédié aligné sur la signature du thème,
   borné à des tons pleinement violets (jamais de fin quasi blanche) */
body.flow-purple-dark-mode .nav-logo-text {
  background: linear-gradient(135deg, #B7A1FF 0%, #9B7EFF 45%, #7C5CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.flow-purple-mode .nav-logo-text {
  background: linear-gradient(135deg, #4A33A8 0%, #5C4CCC 45%, #7C5CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================
   TRANSITION CLAIR ↔ SOMBRE (theme toggle navbar)
   Le toggle de main.js échange les classes body : on adoucit le changement
   sur les surfaces principales. La transition de .navbar reprend les
   propriétés déjà animées par navbar.css (transform, background — anim de
   scroll) et y ajoute bordure/ombre/couleur pour le changement de thème.
   ========================================== */

body.flow-purple-mode,
body.flow-purple-dark-mode {
  transition: background-color 0.45s ease, color 0.45s ease;
}

body.flow-purple-mode .navbar,
body.flow-purple-dark-mode .navbar {
  transition: transform var(--transition-base),
              background 0.45s ease,
              border-color 0.45s ease,
              box-shadow 0.45s ease;
}

body.flow-purple-mode .footer,
body.flow-purple-dark-mode .footer {
  transition: background 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}

/* (Plus de canvas d'animation sur ce thème : le fondu clair/sombre est porté
   par la transition background-color du body ci-dessus) */

/* --- Formulaire de contact : les inputs ont un fond navy sombre codé en
       dur (rgba(20,20,35,…), design dark-first) — inadapté au clair lavande
       et à harmoniser en violet-noir côté sombre. --- */
body.flow-purple-mode .form-input {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-primary);
  border-color: rgba(74, 51, 168, 0.16);
}

body.flow-purple-mode .form-input::placeholder {
  color: var(--text-muted);
}

body.flow-purple-mode .form-input:focus {
  background: #FFFFFF;
  border-color: var(--primary);
}

body.flow-mode.flow-purple-dark-mode .form-input {
  background: rgba(12, 8, 33, 0.6);
  border-color: rgba(155, 126, 255, 0.18);
}

body.flow-mode.flow-purple-dark-mode .form-input:focus {
  background: rgba(12, 8, 33, 0.85);
  border-color: var(--primary);
}

/* --- Liens de prose (sans classe) : accentués pour se détacher du texte.
       Scopé à main : navbar, footer et bannière cookie (hors <main>)
       gardent leurs liens sans soulignement. --- */
body.flow-purple-mode main a:not([class]) {
  color: var(--primary-dark);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--primary-dark) 40%, transparent);
}

body.flow-purple-mode main a:not([class]):hover {
  color: var(--primary);
  text-decoration-color: currentColor;
}

body.flow-mode.flow-purple-dark-mode main a:not([class]) {
  color: var(--primary-soft);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--primary-soft) 40%, transparent);
}

body.flow-mode.flow-purple-dark-mode main a:not([class]):hover {
  color: var(--accent-light);
  text-decoration-color: currentColor;
}

/* --- Liens génériques du sombre : base.css force TOUS les a:not(.btn) en
       orange (#FF6B4A, hover #FF8E75) via body.flow-mode. On reprend la main
       en violet. La pagination est exclue : elle gère ses propres états
       (fond violet + texte blanc au hover/actif, règles dédiées plus bas). --- */
body.flow-mode.flow-purple-dark-mode main a:not(.btn):not(.pagination-num):not(.pagination-btn) {
  color: var(--primary-light);
}

body.flow-mode.flow-purple-dark-mode main a:not(.btn):not(.pagination-num):not(.pagination-btn):hover {
  color: var(--primary-soft);
}

/* Ceinture : si la navbar porte encore navbar-light dans le sombre (fenêtre
   de chargement), ses liens ne doivent jamais hériter de l'orange flow-mode */
body.flow-mode.flow-purple-dark-mode .navbar a:not(.btn) {
  color: rgba(255, 255, 255, 0.85);
}

body.flow-mode.flow-purple-dark-mode .navbar a:not(.btn):hover,
body.flow-mode.flow-purple-dark-mode .navbar .nav-link.active {
  color: var(--primary-soft);
}

/* Liens du footer : eux aussi passés orange par la règle globale de base.css */
body.flow-mode.flow-purple-dark-mode .footer a:not(.btn) {
  color: rgba(221, 216, 246, 0.75);
}

body.flow-mode.flow-purple-dark-mode .footer a:not(.btn):hover {
  color: var(--primary-soft);
}

/* --- Pagination blog (sombre) : surfaces navy → violet-noir, et on
       ré-affirme le texte blanc sur fond violet au hover/actif (sinon la
       règle de lien générique gagnait → violet sur violet) --- */
body.flow-mode.flow-purple-dark-mode .pagination-btn,
body.flow-mode.flow-purple-dark-mode .pagination-num {
  background: rgba(27, 17, 73, 0.6);
  border-color: rgba(155, 126, 255, 0.18);
  color: #DDD8F6;
}

body.flow-mode.flow-purple-dark-mode .pagination-btn:hover,
body.flow-mode.flow-purple-dark-mode .pagination-num:hover,
body.flow-mode.flow-purple-dark-mode .pagination-num.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

/* --- Stats showcase (page à-propos) : les cartes .stat-big/.stat-item ont
       un fond navy sombre codé en dur (design dark-first) — illisible sur
       le clair lavande, et à teinter violet-noir en sombre --- */
body.flow-purple-mode .stats-showcase .stat-big,
body.flow-purple-mode .stats-showcase .stat-item {
  background: rgba(255, 255, 255, 0.75);
}

body.flow-mode.flow-purple-dark-mode .stats-showcase .stat-big,
body.flow-mode.flow-purple-dark-mode .stats-showcase .stat-item {
  background: rgba(27, 17, 73, 0.5);
}

/* ==========================================
   POLISH COMMUN AUX DEUX MODES
   ========================================== */

/* SVG inline avec orange codé en dur (fill/stroke/stop-color) : les
   attributs de présentation SVG ont la priorité la plus basse — une règle
   CSS suffit à les recolorer, pas besoin de toucher les composants.
   Valeurs recensées dans les templates : #FF6B4A et #FF8E75. */
body.flow-purple-mode [fill="#FF6B4A"] { fill: #5C4CCC; }
body.flow-purple-mode [stroke="#FF6B4A"] { stroke: #5C4CCC; }
body.flow-purple-mode [stop-color="#FF6B4A"] { stop-color: #5C4CCC; }
body.flow-purple-mode [stop-color="#FF8E75"] { stop-color: #7868D6; }

body.flow-purple-dark-mode [fill="#FF6B4A"] { fill: #9B7EFF; }
body.flow-purple-dark-mode [stroke="#FF6B4A"] { stroke: #9B7EFF; }
body.flow-purple-dark-mode [stop-color="#FF6B4A"] { stop-color: #9B7EFF; }
body.flow-purple-dark-mode [stop-color="#FF8E75"] { stop-color: #B7A1FF; }

body.flow-purple-mode [fill="#7B83DA"] { fill: #7C5CFF; }
body.flow-purple-mode [stroke="#7B83DA"] { stroke: #7C5CFF; }
body.flow-purple-mode [stop-color="#7B83DA"] { stop-color: #7C5CFF; }
body.flow-purple-mode [fill="#9FA8DA"] { fill: #9B7EFF; }
body.flow-purple-mode [stroke="#9FA8DA"] { stroke: #9B7EFF; }

body.flow-purple-dark-mode [fill="#7B83DA"] { fill: #9B7EFF; }
body.flow-purple-dark-mode [stroke="#7B83DA"] { stroke: #9B7EFF; }
body.flow-purple-dark-mode [stop-color="#7B83DA"] { stop-color: #9B7EFF; }
body.flow-purple-dark-mode [fill="#9FA8DA"] { fill: #B7A1FF; }
body.flow-purple-dark-mode [stroke="#9FA8DA"] { stroke: #B7A1FF; }

/* Logo image : le PNG est conçu clair (pour navbars sombres) — en thème
   clair on l'assombrit comme les autres modes light (particles/sobre/...),
   dans la navbar comme dans le footer */
body.flow-purple-mode .nav-logo-img,
body.flow-purple-mode .footer-logo img {
  filter: invert(1) hue-rotate(180deg) saturate(2);
}

/* Hover du logo : conserve l'inversion en clair + glow violet */
body.flow-purple-mode .nav-logo:hover .nav-logo-img {
  filter: invert(1) hue-rotate(180deg) saturate(2) drop-shadow(0 0 8px rgba(92, 76, 204, 0.5));
}

body.flow-purple-dark-mode .nav-logo:hover .nav-logo-img {
  filter: drop-shadow(0 0 8px rgba(155, 126, 255, 0.55));
}

body.flow-purple-dark-mode .navbar.navbar-dark .theme-toggle:hover {
  background: rgba(155, 126, 255, 0.15);
  border-color: #9B7EFF;
  color: #B7A1FF;
}

body.flow-purple-mode .navbar .theme-toggle:hover {
  background: rgba(92, 76, 204, 0.12);
  border-color: #5C4CCC;
  color: #5C4CCC;
}

/* Sélection de texte aux couleurs du thème */
body.flow-purple-mode ::selection {
  background: rgba(92, 76, 204, 0.25);
  color: #1B1149;
}

body.flow-purple-dark-mode ::selection {
  background: rgba(155, 126, 255, 0.35);
  color: #FFFFFF;
}

/* ==========================================
   COMPOSANTS AVEC ORANGE EN DUR DANS LEUR <style> EMBARQUÉ
   Les <style> des composants sont inline dans le body, donc APRÈS ce
   fichier : à spécificité égale ils gagneraient. Les overrides sombres
   utilisent body.flow-mode.flow-purple-dark-mode (les deux classes sont
   posées sur le body) pour une spécificité supérieure aux règles
   body.flow-mode des composants.
   ========================================== */

/* --- Dashboard showcase et bannière CTA : composants rendus génériques
       (couleurs via var(--primary)/color-mix à la source) — pilotés
       directement par les variables du thème, plus d'overrides ici. --- */

/* --- Badges de section : chaque mode a SA règle scopée dans base.css
       (body.X-mode .section-badge) — les modes flow-purple n'y figurent
       pas, on fournit les nôtres sur le pattern des autres modes. --- */
body.flow-purple-mode .section-badge,
body.flow-purple-mode .hero-badge {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary-dark);
}

body.flow-mode.flow-purple-dark-mode .section-badge,
body.flow-mode.flow-purple-dark-mode .hero-badge {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
}

/* --- Cookie consent : composant rendu générique (couleurs via
       color-mix(var(--primary))) — plus besoin d'overrides ici, les
       variables du thème le pilotent directement. --- */

/* --- .text-gradient : base.css:1675 (body.flow-mode) et footer.css:253
       (.footer-dark) hardcodent un gradient orange→cyan qui court-circuite
       var(--gradient-primary). On rebranche la signature du thème. --- */
body.flow-purple-mode .text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.flow-mode.flow-purple-dark-mode .text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Hovers de boutons génériques (orange en dur dans base.css) --- */
body.flow-purple-mode .btn-primary:hover {
  box-shadow: var(--shadow-glow);
}

body.flow-purple-mode .btn-outline:hover {
  background: rgba(92, 76, 204, 0.08);
  box-shadow: 0 8px 20px rgba(92, 76, 204, 0.15);
}

body.flow-mode.flow-purple-dark-mode .btn-primary:hover {
  background: linear-gradient(135deg, #7C5CFF 0%, #9B7EFF 55%, #B7A1FF 100%);
  box-shadow: 0 6px 30px rgba(124, 92, 255, 0.5);
}

body.flow-mode.flow-purple-dark-mode .btn-outline:hover {
  background: rgba(155, 126, 255, 0.1);
  border-color: #9B7EFF;
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.2);
}

/* Scrollbars accent (WebKit) */
body.flow-purple-mode::-webkit-scrollbar-thumb,
body.flow-purple-mode .lang-switcher__list::-webkit-scrollbar-thumb {
  background: rgba(92, 76, 204, 0.35);
}

body.flow-purple-mode::-webkit-scrollbar-thumb:hover,
body.flow-purple-mode .lang-switcher__list::-webkit-scrollbar-thumb:hover {
  background: rgba(92, 76, 204, 0.55);
}

body.flow-purple-dark-mode::-webkit-scrollbar-thumb,
body.flow-purple-dark-mode .lang-switcher__list::-webkit-scrollbar-thumb {
  background: rgba(155, 126, 255, 0.35);
}

body.flow-purple-dark-mode::-webkit-scrollbar-thumb:hover,
body.flow-purple-dark-mode .lang-switcher__list::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 126, 255, 0.55);
}