/*
Theme Name: Le Club IPTV
Theme URI: https://leclubiptv.com
Author: Le Club IPTV
Author URI: https://leclubiptv.com
Description: Thème WordPress sur mesure, ultra-rapide, moderne et optimisé pour le référencement naturel (SEO/GEO) et l'expérience utilisateur, dédié au blog éducatif Le Club IPTV. Intègre un système de bascule thème clair/sombre sans CLS, une recherche AJAX en direct, des options d'administration intuitives sans programmation, et un balisage Schema.org complet.
Version: 2.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: leclubiptv
Domain Path: /languages
Tags: blog, news, technology, dark-mode, responsive-layout, custom-menu, featured-images, translation-ready, seo-friendly
*/

/* ==========================================================================
   VARIABLES CSS - THÈME CLAIR ET SOMBRE
   ========================================================================== */
:root {
    /* Palette de marque */
    --brand-primary: #D10F1A;
    --brand-primary-hover: #B50D16;
    --brand-primary-light: #FDE8E9;
    --brand-secondary: #1E1E22;
    --brand-accent: #E50914;

    /* Typographie */
    --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

    /* Tailles de police fluides (Mobile-First clamp()) */
    --text-xs: 0.75rem;                                      /* 12px */
    --text-sm: 0.875rem;                                     /* 14px */
    --text-base: 1rem;                                       /* 16px */
    --text-lg: clamp(1.0625rem, 0.5vw + 0.95rem, 1.15rem);   /* 17-18px */
    --text-xl: clamp(1.15rem, 0.8vw + 1rem, 1.35rem);        /* 18-21px */
    --text-2xl: clamp(1.35rem, 1.2vw + 1.1rem, 1.65rem);     /* 21-26px */
    --text-3xl: clamp(1.65rem, 1.8vw + 1.3rem, 2.15rem);     /* 26-34px */
    --text-4xl: clamp(2rem, 2.5vw + 1.5rem, 2.75rem);        /* 32-44px */
    --text-5xl: clamp(2.35rem, 3.5vw + 1.6rem, 3.5rem);      /* 37-56px */

    /* Échelle d'espacements stricte 8px */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */
    --spacing-3xl: 4rem;    /* 64px */

    /* Rayons de bordure arrondis modernes */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;

    /* Transitions fluides */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* Largeurs de conteneur */
    --container-max: 1240px;
    --container-narrow: 840px;

    /* Mode Clair (Par défaut) */
    --bg-page: #F8F9FA;
    --bg-surface: #FFFFFF;
    --bg-surface-elevated: #FFFFFF;
    --bg-subtle: #F1F3F5;
    --bg-tier2: #141416;
    --text-tier2: #E5E7EB;
    
    --text-main: #111827;
    --text-muted: #6B7280;
    --text-subtle: #9CA3AF;
    --text-inverse: #FFFFFF;
    
    --border-color: #E5E7EB;
    --border-subtle: #F3F4F6;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 14px 25px -4px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.06);

    --header-bg: #D10F1A;
    --header-text: #FFFFFF;
    --header-nav-hover: rgba(255, 255, 255, 0.15);

    --footer-bg: #1E1E22;
    --footer-text: #D1D5DB;
    --footer-heading: #FFFFFF;
    --footer-border: #2E2E34;
}

/* Mode Sombre activé par l'attribut data-theme="dark" sur <html> */
html[data-theme="dark"] {
    --bg-page: #0E0E10;
    --bg-surface: #18181B;
    --bg-surface-elevated: #232328;
    --bg-subtle: #27272A;
    --bg-tier2: #0A0A0C;
    --text-tier2: #D1D5DB;

    --text-main: #F3F4F6;
    --text-muted: #9CA3AF;
    --text-subtle: #6B7280;
    --text-inverse: #111827;

    --border-color: #27272A;
    --border-subtle: #1F1F23;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
    --shadow-hover: 0 14px 25px -4px rgba(0, 0, 0, 0.7);

    --footer-bg: #111113;
    --footer-text: #9CA3AF;
    --footer-heading: #F3F4F6;
    --footer-border: #1F1F23;
}

/* Visibilité des logos selon le mode Clair / Sombre (Zéro CLS) */
.logo-light-mode {
    display: inline-block;
}
.logo-dark-mode {
    display: none;
}

html[data-theme="dark"] .logo-light-mode {
    display: none !important;
}
html[data-theme="dark"] .logo-dark-mode {
    display: inline-block !important;
}

html[data-theme="light"] .logo-light-mode {
    display: inline-block !important;
}
html[data-theme="light"] .logo-dark-mode {
    display: none !important;
}

/* Forçage manuel si l'administrateur a choisi 'Toujours le logo sombre / blanc' */
.header-always-dark-logo .logo-light-mode {
    display: none !important;
}
.header-always-dark-logo .logo-dark-mode {
    display: inline-block !important;
}

/* Forçage manuel si l'administrateur a choisi 'Toujours le logo clair' */
.header-always-light-logo .logo-light-mode {
    display: inline-block !important;
}
.header-always-light-logo .logo-dark-mode {
    display: none !important;
}