<?php header("Content-type: text/css; charset: UTF-8"); ?>

/* ============================================================
   PROJET PADEL — DESIGN SYSTEM (DARK MODE MASTER)
   Version: 2026 (Inverted & Adapted)
   Primary: Dark | Secondary: #C0C943 (Lime) | Accent: #6D3EF4 (Violet)
============================================================ */

/* ------------------------------------------------------------
   0. CASCADE LAYERS (Même priorité pour l'écrasement)
------------------------------------------------------------ */
@layer tokens, reset, base, layout, components, utilities, responsive, overrides;


/* ============================================================
   1. TOKENS (Variables Inversées)
============================================================ */
@layer tokens {
  body.dark-theme {
    /* Palette Inchangée (Brand) */
    --lime: #C0C943;
    --lime-hover: #a8b035;
    --lime-soft: rgba(192, 201, 67, 0.15); /* Légèrement plus visible sur fond noir */

    --violet: #6D3EF4;
    --violet-hover: #7c52f5;
    --violet-soft: rgba(109, 62, 244, 0.20); /* Plus intense pour le contraste */

    /* Palette Inversée (Monochrome) */
    --dark: #f8fafc;        /* Le "Sombre" devient Clair (Texte principal) */
    --gray: #94a3b8;        /* Le Gris devient plus clair */
    --gray-light: #1e1e1e;  /* Le Gris clair devient Gris foncé (Bordures/Fonds sec.) */
    --light-bg: #111111;    /* Le fond léger devient Noir Profond */
    --white: #0a0a0a;       /* Le Blanc devient Noir "Surface" */

    /* Semantic Colors (Dark Mode Mapping) */
    --surface: #141416;           /* Fond des cartes (Gris très foncé) */
    --surface-2: #0a0a0a;         /* Fond alternatif */
    --border: rgba(255, 255, 255, 0.12); /* Bordures blanches translucides */
    --text: #f4f6fb;              /* Texte principal (Blanc cassé) */
    --text-2: rgba(244, 246, 251, 0.7); /* Texte secondaire (Grisé) */

    /* Dimensions & Effects (Adaptés) */
    --radius: 24px;
    --container: 1240px;

    /* Ombres (Plus subtiles ou nulles sur fond noir) */
    --shadow: none; 
    --shadow-hover: 0 10px 40px -10px rgba(0, 0, 0, 0.8);
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.5);
    --shadow-strong: 0 30px 70px -20px rgba(0,0,0,0.9);

    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --ring: 0 0 0 4px rgba(192, 201, 67, 0.3); /* Ring Lime en dark */
  }
}


/* ============================================================
   2. RESET & GLOBAL ADAPTATION
============================================================ */
@layer reset {
  body.dark-theme {
    background: #050505; /* Fond de page ultra dark */
    color: var(--text);
    -webkit-font-smoothing: antialiased;
  }

  body.dark-theme ::selection {
    background: var(--lime);
    color: #000;
  }
}


/* ============================================================
   3. TYPOGRAPHY & ELEMENTS
============================================================ */
@layer base {
  /* Les titres restent blancs (via var(--text)) */
  
  /* Badges Adaptés */
  body.dark-theme .badge { 
    background: rgba(192, 201, 67, 0.1); 
    color: var(--lime); 
    border: 1px solid rgba(192, 201, 67, 0.2);
  }
  
  body.dark-theme .badge-violet { 
    background: rgba(109, 62, 244, 0.15); 
    color: #a78bfa; /* Violet éclairci pour lisibilité sur noir */
    border: 1px solid rgba(109, 62, 244, 0.3);
  }
}


/* ============================================================
   4. LAYOUT (Structure inchangée, couleurs adaptées)
============================================================ */
@layer layout {
  /* Les grilles restent les mêmes */
}


/* ============================================================
   5. COMPONENTS UI (L'essentiel du travail d'inversion)
============================================================ */
@layer components {

  /* --- Header & Nav --- */
  body.dark-theme .main-header { 
    background: rgba(10, 10, 10, 0.85) !important; /* Fond noir translucide */
    backdrop-filter: blur(12px); 
    border-bottom: 1px solid var(--border) !important; 
  }
  
  body.dark-theme .logo { color: #fff !important; }
  body.dark-theme .nav-menu a { color: var(--text-2) !important; }
  body.dark-theme .nav-menu a:hover,
  body.dark-theme .nav-menu a.active { color: var(--lime) !important; }


  /* --- Buttons (Inversion critique pour contraste) --- */
  
  /* Bouton Lime : Texte Noir IMPÉRATIF */
  body.dark-theme .btn-main { 
    background: var(--lime); 
    color: #000000 !important; 
    box-shadow: 0 0 20px rgba(192,201,67,0.1);
  }
  body.dark-theme .btn-main:hover { 
    background: #d9e354; 
    box-shadow: 0 0 30px rgba(192,201,67,0.4); 
  }

  /* Bouton "Dark" (Light mode) devient "Blanc/Gris" en Dark mode */
  body.dark-theme .btn-card, 
  body.dark-theme .btn-main-sm { 
    background: #ffffff; 
    color: #000000 !important; 
  }
  body.dark-theme .btn-card:hover, 
  body.dark-theme .btn-main-sm:hover { 
    background: #e2e8f0; 
    transform: translateY(-2px);
  }

  /* Bouton Outline */
  body.dark-theme .btn-outline { 
    color: #ffffff; 
    border-bottom-color: var(--lime); 
  }
  body.dark-theme .btn-outline:hover { 
    color: var(--lime); 
  }


  /* --- Hero Section --- */
  body.dark-theme .bg-architect { 
    background: #050505; 
  }
  /* On inverse l'opacité du pattern SVG pour qu'il soit subtil sur le noir */
  body.dark-theme .bg-architect::before { 
    opacity: 0.15; 
    filter: invert(1); /* Astuce : inverse le SVG noir en blanc */
  }


  /* --- Cards (Fonds sombres) --- */
  body.dark-theme .card,
  body.dark-theme .doc-card { 
    background: var(--surface); 
    border-color: var(--border);
    box-shadow: none; /* Pas d'ombre portée sur fond noir, on mise sur la bordure */
  }
  
  body.dark-theme .card:hover,
  body.dark-theme .doc-card:hover { 
    border-color: var(--lime); 
    background: #1a1a1c; /* Légèrement plus clair au survol */
  }

  /* Feature List Icons */
  body.dark-theme .feature-list-modern li { color: var(--text); }
  body.dark-theme .feature-list-modern li::before { 
    background-color: rgba(192, 201, 67, 0.2); 
  }

  /* Doc Card Specifics */
  body.dark-theme .doc-card.is-bonus { 
    background: linear-gradient(135deg, rgba(109,62,244,0.1), rgba(10,10,10,1)); 
    border-color: var(--violet); 
  }


  /* --- Video Player --- */
  /* Déjà noir par défaut, on ajoute juste une bordure lumineuse subtile */
  body.dark-theme .video-container-fix { 
    border: 1px solid var(--border); 
  }


  /* --- Marquee (Stats) --- */
  body.dark-theme .marquee-container { 
    background: #000; 
    border-color: var(--border); 
  }
  
  /* Correctif Dégradés latéraux (Doivent aller vers le noir, pas le blanc) */
  body.dark-theme .marquee-container::before { 
    background: linear-gradient(90deg, #000, transparent); 
  }
  body.dark-theme .marquee-container::after { 
    background: linear-gradient(270deg, #000, transparent); 
  }

  body.dark-theme .stat-card-marquee { 
    background: var(--surface); 
    border-color: var(--border); 
  }
  body.dark-theme .stat-value { color: #fff; }


  /* --- Steps Slider (La Frise) - CORRECTIF DEMANDÉ --- */
  body.dark-theme .steps-slider { 
    background: var(--surface); 
    border-color: var(--border); 
  }
  
  /* Conteneur Navigation */
  body.dark-theme .step-nav {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
  }

  /* Bouton Inactif */
  body.dark-theme .step-pill {
    color: rgba(255,255,255,0.5);
    border-color: rgba(255,255,255,0.1);
  }

  /* Bouton Inactif : HOVER (Gris foncé + Lime) */
  body.dark-theme .step-pill:not(.step-pill-active):hover {
    background: #222 !important;
    color: var(--lime) !important;
    border-color: var(--lime) !important;
  }

  /* Bouton Actif */
  body.dark-theme .step-pill-active {
    background: var(--lime);
    color: #000;
  }
  body.dark-theme .step-pill-active span.step-index {
    background: #000;
    color: var(--lime);
  }


  /* --- Galleries & Images --- */
  body.dark-theme .gallery-item { background: #000; }


  /* --- Article Premium (Longform) & Sidebar --- */
  body.dark-theme .longform__content h2 { 
    color: #fff; 
    border-left-color: var(--lime); /* On change le violet en lime pour le contraste ? Ou on garde violet. Gardons violet pour la cohérence. */
    border-left-color: var(--violet);
  }
  
  body.dark-theme .longform__toc { 
    background: var(--surface); 
    border-color: var(--border); 
  }
  body.dark-theme .toc-title { color: #fff; }
  
  body.dark-theme .toc-link { 
    color: var(--text-2); 
    border-left-color: var(--border); 
  }
  body.dark-theme .toc-link:hover { 
    color: var(--lime); 
    border-left-color: var(--lime); 
    background: linear-gradient(90deg, rgba(255,255,255,0.05), transparent);
  }

  /* CTA Box Article */
  body.dark-theme .article-cta-box {
    background: #000 !important;
    border: 1px solid var(--border);
  }
  
  /* CTA Clean (Dégradé) */
  body.dark-theme .cta-clean {
    background: linear-gradient(135deg, rgba(192,201,67,0.15) 0%, rgba(109,62,244,0.15) 100%);
    border-color: var(--border);
  }


  /* --- Testimonials & FAQ --- */
  body.dark-theme .testimonial-card { 
    background: var(--surface); 
    border-color: var(--border); 
  }
  
  /* Correctif AVATARS : Tout en Violet */
  body.dark-theme .testimonial-avatar { 
    background: var(--violet) !important;
    color: #fff !important;
    border: 2px solid #5a2ed8 !important;
  }

  body.dark-theme .faq-pro details { 
    background: var(--surface); 
    border-color: var(--border); 
  }
  body.dark-theme .faq-pro summary .chev { 
    background: rgba(255,255,255,0.1); 
    color: #fff; 
  }


  /* --- Footer & Popups --- */
  body.dark-theme .main-footer { 
    background: #000 !important; /* Noir total pour le footer */
    border-top: 1px solid var(--border); 
  }
  body.dark-theme .footer-links a { color: #666; }
  body.dark-theme .footer-links a:hover { color: var(--lime) !important; }

  /* Webinar Popup */
  body.dark-theme .webinar-popup {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
  }
  body.dark-theme .webinar-popup-close { color: #fff; }
}


/* ============================================================
   6. UTILITIES (Overrides)
============================================================ */
@layer utilities {
  body.dark-theme .bg-light { background: #111; }
  body.dark-theme .bg-white { background: #000; }
}


/* ============================================================
   7. SPECIFIC FIXES (Cartes Spéciales / Inline Styles)
============================================================ */
@layer overrides {
  
  /* Force le fond sombre sur les cartes qui ont un style="" inline avec gradient */
  body.dark-theme div[style*="linear-gradient"],
  body.dark-theme div[style*="background:linear-gradient"] {
    background: var(--surface) !important;
    border: 1px solid var(--violet) !important;
  }

  /* Rétablit la couleur des textes dans ces cartes forcées */
  body.dark-theme div[style*="linear-gradient"] h3,
  body.dark-theme div[style*="linear-gradient"] strong {
    color: #fff !important;
  }
  body.dark-theme div[style*="linear-gradient"] p {
    color: rgba(255,255,255,0.7) !important;
  }
}