/*
 * Jurible Design System pour Fluent Community
 * Réplique les variables du theme.json (WordPress + Jurible)
 * Note: Google Fonts Poppins est chargé via functions.php (plus fiable que @import)
 */

html {
    scroll-behavior: smooth !important;
}

:root {
    /* ============================================
       VARIABLES WORDPRESS (--wp--preset--)
       Utilisées par jurible-blocks-react
       ============================================ */

    /* Couleurs WordPress */
    --wp--preset--color--black: #000000;
    --wp--preset--color--white: #FFFFFF;
    --wp--preset--color--primary: #B0001D;
    --wp--preset--color--primary-hover: #DC2626;
    --wp--preset--color--secondary: #7C3AED;
    --wp--preset--color--secondary-hover: #6D28D9;
    --wp--preset--color--secondary-bg: #EDE9FE;
    --wp--preset--color--background: #F9FAFB;
    --wp--preset--color--muted: #F3F4F6;
    --wp--preset--color--border: #E5E7EB;
    --wp--preset--color--border-muted: #D1D5DB;
    --wp--preset--color--text-dark: #1A1A1A;
    --wp--preset--color--text-gray: #4A4A4A;
    --wp--preset--color--text-muted: #9CA3AF;
    --wp--preset--color--info: #3B82F6;
    --wp--preset--color--info-bg: #EFF6FF;
    --wp--preset--color--info-text: #1E40AF;
    --wp--preset--color--success: #10B981;
    --wp--preset--color--success-bg: #ECFDF5;
    --wp--preset--color--success-text: #065F46;
    --wp--preset--color--warning: #F59E0B;
    --wp--preset--color--warning-bg: #FFFBEB;
    --wp--preset--color--warning-text: #92400E;
    --wp--preset--color--error: #EF4444;
    --wp--preset--color--error-bg: #FEF2F2;
    --wp--preset--color--error-text: #991B1B;
    --wp--preset--color--accent: #7C3AED;
    --wp--preset--color--accent-bg: #F5F3FF;
    --wp--preset--color--accent-text: #5B21B6;

    /* Espacements WordPress */
    --wp--preset--spacing--xs: 0.5rem;
    --wp--preset--spacing--sm: 1rem;
    --wp--preset--spacing--md: 1.5rem;
    --wp--preset--spacing--lg: 2rem;
    --wp--preset--spacing--xl: 3rem;

    /* Typographie WordPress - Font Family */
    --wp--preset--font-family--poppins: 'Poppins', sans-serif;

    /* Typographie WordPress - Font Sizes */
    --wp--preset--font-size--caption: 0.75rem;
    --wp--preset--font-size--small: 0.875rem;
    --wp--preset--font-size--medium: 1rem;
    --wp--preset--font-size--body: 1rem;
    --wp--preset--font-size--body-large: 1.125rem;
    --wp--preset--font-size--heading-4: 1.25rem;
    --wp--preset--font-size--heading-3: clamp(1.25rem, 1rem + 1.25vw, 1.875rem);
    --wp--preset--font-size--heading-2: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
    --wp--preset--font-size--heading-1: clamp(2rem, 1.5rem + 2vw, 3rem);
    --wp--preset--font-size--key-numbers: clamp(2rem, 1.5rem + 2vw, 3rem);

    /* Ombres WordPress */
    --wp--preset--shadow--xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --wp--preset--shadow--sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --wp--preset--shadow--md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --wp--preset--shadow--lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --wp--preset--shadow--xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --wp--preset--shadow--cta: 0 4px 14px rgba(176, 0, 29, 0.25);
    --wp--preset--shadow--cta-hover: 0 6px 20px rgba(176, 0, 29, 0.35);
    --wp--preset--shadow--accent: 0 4px 14px rgba(124, 58, 237, 0.25);
    --wp--preset--shadow--accent-hover: 0 6px 20px rgba(124, 58, 237, 0.35);

    /* Gradients WordPress */
    --wp--preset--gradient--cta-gradient: linear-gradient(135deg, #B0001D 0%, #DC2626 50%, #7C3AED 100%);

    /* ============================================
       VARIABLES CUSTOM WORDPRESS (--wp--custom--)
       ============================================ */

    /* Line Heights */
    --wp--custom--line-height--heading: 1.2;
    --wp--custom--line-height--subheading: 1.4;
    --wp--custom--line-height--body: 1.6;

    /* Border Radius */
    --wp--custom--border-radius--xs: 4px;
    --wp--custom--border-radius--sm: 6px;
    --wp--custom--border-radius--md: 8px;
    --wp--custom--border-radius--lg: 12px;
    --wp--custom--border-radius--full: 9999px;

    /* Transitions */
    --wp--custom--transition--fast: 0.1s ease;
    --wp--custom--transition--default: 0.15s ease;
    --wp--custom--transition--slow: 0.3s ease;

    /* ============================================
       VARIABLES JURIBLE LEGACY (--jurible--)
       Pour compatibilité avec l'ancien code
       ============================================ */

    /* === COULEURS === */
    --jurible-primary: #B0001D;
    --jurible-primary-hover: #DC2626;
    --jurible-secondary: #7C3AED;
    --jurible-secondary-hover: #6D28D9;

    --jurible-background: #FFFFFF;
    --jurible-muted: #F3F4F6;
    --jurible-border: #E5E7EB;
    --jurible-border-muted: #D1D5DB;

    --jurible-text-dark: #1A1A1A;
    --jurible-text-gray: #4A4A4A;
    --jurible-text-muted: #9CA3AF;

    --jurible-success: #10B981;
    --jurible-warning: #F59E0B;
    --jurible-error: #EF4444;
    --jurible-info: #3B82F6;

    /* === TYPOGRAPHIE === */
    --jurible-font-family: 'Poppins', sans-serif;

    --jurible-font-size-small: 0.875rem;
    --jurible-font-size-medium: 1rem;
    --jurible-font-size-body: 1rem;
    --jurible-font-size-large: 1.25rem;
    --jurible-font-size-xlarge: 1.5rem;
    --jurible-font-size-xxlarge: 1.75rem;
    --jurible-font-size-h4: 1rem;
    --jurible-font-size-h3: 1.125rem;
    --jurible-font-size-h2: 1.375rem;
    --jurible-font-size-h1: 1.75rem;

    --jurible-line-height-tight: 1.2;
    --jurible-line-height-normal: 1.5;
    --jurible-line-height-relaxed: 1.6;
    --jurible-line-height-h2: 1.4;
    --jurible-line-height-p: 1.575;

    /* === ESPACEMENTS === */
    --jurible-spacing-xs: 0.5rem;
    --jurible-spacing-s: 1rem;
    --jurible-spacing-m: 1.5rem;
    --jurible-spacing-l: 2rem;
    --jurible-spacing-xl: 3rem;

    /* === BORDURES === */
    --jurible-radius-xs: 4px;
    --jurible-radius-s: 6px;
    --jurible-radius-m: 8px;
    --jurible-radius-l: 12px;
    --jurible-radius-xl: 16px;

    /* === OMBRES === */
    --jurible-shadow-cta: 0 2px 8px rgba(176,0,29,0.25);
    --jurible-shadow-cta-hover: 0 4px 12px rgba(176,0,29,0.35);
}

/* ============================================
   OVERRIDE FONT GLOBALE FLUENT COMMUNITY
   FC theme-default.css applique `body *`
   avec la stack système (-apple-system, etc.)
   On override avec une spécificité plus haute.
   ============================================ */

body.wp-child-theme-ecolejurible,
body.wp-child-theme-ecolejurible * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Préserver la font monospace pour le code */
body.wp-child-theme-ecolejurible code,
body.wp-child-theme-ecolejurible kbd,
body.wp-child-theme-ecolejurible pre {
    font-family: Consolas, Monaco, monospace;
}

/* ============================================
   PAGES WP DANS FLUENT COMMUNITY (FRONT)
   Style identique à jurible.com (theme.json)
   Classe: .fcom_wp_content
   ============================================ */

.fcom_wp_content {
    font-family: var(--wp--preset--font-family--poppins) !important;
    font-size: var(--wp--preset--font-size--body) !important;
    line-height: var(--wp--custom--line-height--body) !important;
    color: var(--wp--preset--color--text-dark) !important;
}

.fcom_wp_content h1 {
    font-family: var(--wp--preset--font-family--poppins) !important;
    font-size: var(--wp--preset--font-size--heading-1) !important;
    font-weight: 700 !important;
    line-height: var(--wp--custom--line-height--heading) !important;
    color: var(--wp--preset--color--text-dark) !important;
}

.fcom_wp_content h2 {
    font-family: var(--wp--preset--font-family--poppins) !important;
    font-size: var(--wp--preset--font-size--heading-2) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--wp--preset--color--text-dark) !important;
}

.fcom_wp_content h3 {
    font-family: var(--wp--preset--font-family--poppins) !important;
    font-size: var(--wp--preset--font-size--heading-3) !important;
    font-weight: 600 !important;
    line-height: var(--wp--custom--line-height--subheading) !important;
    color: var(--wp--preset--color--text-dark) !important;
}

.fcom_wp_content h4 {
    font-family: var(--wp--preset--font-family--poppins) !important;
    font-size: var(--wp--preset--font-size--heading-4) !important;
    font-weight: 600 !important;
    line-height: var(--wp--custom--line-height--subheading) !important;
    color: var(--wp--preset--color--text-dark) !important;
}

.fcom_wp_content p {
    font-family: var(--wp--preset--font-family--poppins) !important;
    font-size: var(--wp--preset--font-size--body) !important;
    line-height: var(--wp--custom--line-height--body) !important;
    color: var(--wp--preset--color--text-dark) !important;
}

.fcom_wp_content a {
    color: var(--wp--preset--color--primary) !important;
    text-decoration: underline !important;
}

.fcom_wp_content a:hover {
    color: var(--wp--preset--color--secondary) !important;
}

/* Exclure les boutons du underline */
.fcom_wp_content .wp-block-button__link,
.fcom_wp_content .wp-block-button__link:hover {
    text-decoration: none !important;
}

.fcom_wp_content .wp-block-button__link {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
    border-radius: var(--wp--custom--border-radius--md) !important;
    font-family: var(--wp--preset--font-family--poppins) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--wp--preset--shadow--cta) !important;
}

.fcom_wp_content .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--primary-hover) !important;
}

.fcom_wp_content blockquote {
    border-left: 3px solid var(--wp--preset--color--primary) !important;
    padding-left: var(--wp--preset--spacing--sm) !important;
    color: var(--wp--preset--color--text-gray) !important;
    font-style: italic !important;
}

.fcom_wp_content ul,
.fcom_wp_content ol,
.fcom_wp_content li {
    font-family: var(--wp--preset--font-family--poppins) !important;
    font-size: var(--wp--preset--font-size--body) !important;
    line-height: var(--wp--custom--line-height--body) !important;
    color: var(--wp--preset--color--text-dark) !important;
}

.fcom_wp_content hr {
    background-color: var(--wp--preset--color--border) !important;
    border: none !important;
    height: 1px !important;
}

.fcom_wp_content img {
    border-radius: var(--wp--custom--border-radius--md) !important;
    border: 1px solid var(--wp--preset--color--border) !important;
}

/* ============================================
   LEÇONS FLUENT COMMUNITY (FRONT)
   Style spécifique leçons (plus compact)
   Classe: .fcom_lesson_details
   ============================================ */

.fcom_lesson_details {
    font-family: var(--jurible-font-family) !important;
    line-height: var(--jurible-line-height-relaxed);
    color: var(--jurible-text-gray);
}

.fcom_lesson_details h1 {
    font-family: var(--jurible-font-family) !important;
    font-size: var(--jurible-font-size-h1) !important;
    font-weight: 700 !important;
    line-height: var(--jurible-line-height-tight) !important;
    color: var(--jurible-text-dark) !important;
}

.fcom_lesson_details h2 {
    font-family: var(--jurible-font-family) !important;
    font-size: var(--jurible-font-size-h2) !important;
    font-weight: 600 !important;
    line-height: var(--jurible-line-height-h2) !important;
    color: var(--jurible-text-dark) !important;
    margin-top: clamp(18px, 4vw, 26px) !important;
    margin-bottom: clamp(18px, 4vw, 26px) !important;
}

.fcom_lesson_details h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #B0001D 0%, #7C3AED 100%);
    margin-top: 8px;
    border-radius: 2px;
}

.fcom_lesson_details h3 {
    font-family: var(--jurible-font-family) !important;
    font-size: var(--jurible-font-size-h3) !important;
    font-weight: 600 !important;
    line-height: var(--jurible-line-height-p) !important;
    color: var(--jurible-text-dark) !important;
    margin-top: clamp(22px, 5vw, 31px) !important;
    margin-bottom: 1rem !important;
}

.fcom_lesson_details h4 {
    font-family: var(--jurible-font-family) !important;
    font-size: var(--jurible-font-size-h4) !important;
    font-weight: 600 !important;
    line-height: var(--jurible-line-height-normal) !important;
    color: var(--jurible-text-dark) !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

.fcom_lesson_details p {
    font-family: var(--jurible-font-family) !important;
    font-size: var(--jurible-font-size-body) !important;
    line-height: var(--jurible-line-height-p) !important;
    font-weight: 400 !important;
    margin-bottom: var(--jurible-spacing-m) !important;
    color: var(--jurible-text-gray) !important;
}

/* Tailles de texte Fluent Community - Leçons */
.fcom_lesson_details .has-small-font-size {
    font-size: var(--jurible-font-size-small) !important;
}

.fcom_lesson_details .has-medium-font-size {
    font-size: var(--jurible-font-size-medium) !important;
}

.fcom_lesson_details .has-large-font-size,
.fcom_lesson_details .has-larger-font-size {
    font-size: var(--jurible-font-size-large) !important;
}

.fcom_lesson_details .has-xlarge-font-size,
.fcom_lesson_details .has-x-large-font-size {
    font-size: var(--jurible-font-size-xlarge) !important;
}

.fcom_lesson_details .has-xxlarge-font-size {
    font-size: var(--jurible-font-size-xxlarge) !important;
}

.fcom_lesson_details a {
    color: var(--jurible-primary) !important;
}

.fcom_lesson_details a:hover {
    color: var(--jurible-primary-hover) !important;
}

.fcom_lesson_details .wp-block-button__link {
    background-color: var(--jurible-primary) !important;
    color: #FFFFFF !important;
    border-radius: var(--jurible-radius-m) !important;
    font-family: var(--jurible-font-family) !important;
    font-weight: 500 !important;
    box-shadow: var(--jurible-shadow-cta) !important;
}

.fcom_lesson_details .wp-block-button__link:hover {
    background-color: var(--jurible-primary-hover) !important;
    box-shadow: var(--jurible-shadow-cta-hover) !important;
}

.fcom_lesson_details blockquote {
    border-left: 3px solid var(--jurible-primary) !important;
    padding-left: var(--jurible-spacing-s) !important;
    color: var(--jurible-text-gray) !important;
    font-style: italic !important;
}

.fcom_lesson_details hr {
    background-color: var(--jurible-border) !important;
    border: none !important;
    height: 1px !important;
}

/* Force les couleurs du sommaire - Leçons */
.fcom_lesson_details .jurible-sommaire-list a {
    color: #4A4A4A !important;
}

.fcom_lesson_details .jurible-sommaire-list a:hover {
    color: #B0001D !important;
}

.fcom_lesson_details img {
    border-radius: 12px;
}

/* ============================================
   ÉDITEUR FLUENT COMMUNITY (BACK)
   Classe principale: .fcom_lesson_content
   ============================================ */

.fcom_lesson_content {
    font-family: var(--jurible-font-family) !important;
    line-height: var(--jurible-line-height-relaxed);
    color: var(--jurible-text-gray);
}

.fcom_lesson_content h1 {
    font-family: var(--jurible-font-family) !important;
    font-size: var(--jurible-font-size-h1) !important;
    font-weight: 700 !important;
    line-height: var(--jurible-line-height-tight) !important;
    color: var(--jurible-text-dark) !important;
}

.fcom_lesson_content h2 {
    font-family: var(--jurible-font-family) !important;
    font-size: var(--jurible-font-size-h2) !important;
    font-weight: 600 !important;
    line-height: var(--jurible-line-height-h2) !important;
    color: var(--jurible-text-dark) !important;
    margin-top: clamp(18px, 4vw, 26px) !important;
    margin-bottom: clamp(18px, 4vw, 26px) !important;
}

.fcom_lesson_content h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #B0001D 0%, #7C3AED 100%);
    margin-top: 8px;
    border-radius: 2px;
}

.fcom_lesson_content h3 {
    font-family: var(--jurible-font-family) !important;
    font-size: var(--jurible-font-size-h3) !important;
    font-weight: 600 !important;
    line-height: var(--jurible-line-height-p) !important;
    color: var(--jurible-text-dark) !important;
    margin-top: clamp(22px, 5vw, 31px) !important;
    margin-bottom: 1rem !important;
}

.fcom_lesson_content h4 {
    font-family: var(--jurible-font-family) !important;
    font-size: var(--jurible-font-size-h4) !important;
    font-weight: 600 !important;
    line-height: var(--jurible-line-height-normal) !important;
    color: var(--jurible-text-dark) !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

.fcom_lesson_content p {
    font-family: var(--jurible-font-family) !important;
    font-size: var(--jurible-font-size-body) !important;
    line-height: var(--jurible-line-height-p) !important;
    font-weight: 400 !important;
    margin-bottom: var(--jurible-spacing-m) !important;
    color: var(--jurible-text-gray) !important;
}

/* Tailles de texte dans l'éditeur Fluent */
.fcom_lesson_content .has-small-font-size {
    font-size: var(--jurible-font-size-small) !important;
}

.fcom_lesson_content .has-medium-font-size {
    font-size: var(--jurible-font-size-medium) !important;
}

.fcom_lesson_content .has-large-font-size,
.fcom_lesson_content .has-larger-font-size {
    font-size: var(--jurible-font-size-large) !important;
}

.fcom_lesson_content .has-xlarge-font-size,
.fcom_lesson_content .has-x-large-font-size {
    font-size: var(--jurible-font-size-xlarge) !important;
}

.fcom_lesson_content .has-xxlarge-font-size {
    font-size: var(--jurible-font-size-xxlarge) !important;
}

.fcom_lesson_content a {
    color: var(--jurible-primary) !important;
}

.fcom_lesson_content a:hover {
    color: var(--jurible-primary-hover) !important;
}

.fcom_lesson_content blockquote {
    border-left: 3px solid var(--jurible-primary) !important;
    padding-left: var(--jurible-spacing-s) !important;
    color: var(--jurible-text-gray) !important;
    font-style: italic !important;
}

.fcom_lesson_content hr {
    background-color: var(--jurible-border) !important;
    border: none !important;
    height: 1px !important;
}

.fcom_lesson_content img {
    border-radius: 12px;
}

.fcom_lesson_content .wp-block-image {
    margin-top: clamp(1rem, 4vw, 3rem) !important;
    margin-bottom: clamp(1rem, 4vw, 3rem) !important;
}

.fcom_lesson_content .wp-block-image img {
    border: 1px solid var(--jurible-border) !important;
    border-radius: 12px !important;
}

.fcom_lesson_content .wp-block-image figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--jurible-text-muted) !important;
    font-size: var(--jurible-font-size-small) !important;
    font-style: italic;
    margin-top: var(--jurible-spacing-xs);
    text-align: center;
}

.fcom_lesson_content .wp-block-image figcaption::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239CA3AF'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5-7l-3 3.72L9 13l-3 4h12l-4-5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ============================================
   MODE SOMBRE (Fluent Community)
   ============================================ */

html.dark {
    /* Variables WordPress pour le mode sombre */
    --wp--preset--color--background: var(--el-bg-color, #141414);
    --wp--preset--color--muted: var(--el-bg-color-overlay, #1d1e1f);
    --wp--preset--color--border: #2d2d2f;
    --wp--preset--color--border-muted: #3d3d3f;
    --wp--preset--color--text-dark: #F3F4F6;
    --wp--preset--color--text-gray: #E5E7EB;

    /* Variables Jurible legacy pour le mode sombre */
    --jurible-background: var(--el-bg-color, #141414);
    --jurible-muted: var(--el-bg-color-overlay, #1d1e1f);
    --jurible-border: #2d2d2f;
    --jurible-border-muted: #3d3d3f;

    --jurible-text-dark: #F3F4F6;
    --jurible-text-gray: #E5E7EB;
    --jurible-text-muted: #9CA3AF;
}

/* Mode sombre - Pages WP */
html.dark .fcom_wp_content {
    color: var(--wp--preset--color--text-dark) !important;
}

html.dark .fcom_wp_content h1,
html.dark .fcom_wp_content h2,
html.dark .fcom_wp_content h3,
html.dark .fcom_wp_content h4,
html.dark .fcom_wp_content p {
    color: var(--wp--preset--color--text-dark) !important;
}

html.dark .fcom_wp_content a {
    color: var(--wp--preset--color--primary) !important;
}

html.dark .fcom_wp_content a:hover {
    color: var(--wp--preset--color--secondary) !important;
}

/* Mode sombre - Leçons */
html.dark .fcom_lesson_details h1,
html.dark .fcom_lesson_details h2,
html.dark .fcom_lesson_details h3,
html.dark .fcom_lesson_details h4 {
    color: var(--jurible-text-dark) !important;
}

html.dark .fcom_lesson_details p {
    color: var(--jurible-text-gray) !important;
}

html.dark .fcom_lesson_details a {
    color: var(--jurible-primary) !important;
}

html.dark .fcom_lesson_details a:hover {
    color: var(--jurible-primary-hover) !important;
}

html.dark .fcom_lesson_details blockquote {
    color: var(--jurible-text-gray) !important;
    border-left-color: var(--jurible-primary) !important;
}

html.dark .fcom_lesson_details hr {
    background-color: var(--jurible-border) !important;
}

html.dark .fcom_lesson_details .jurible-sommaire-list a {
    color: var(--jurible-text-gray) !important;
}

html.dark .fcom_lesson_details .jurible-sommaire-list a:hover {
    color: var(--jurible-primary) !important;
}

/* ============================================
   IMAGES - Leçons (style spécifique avec icône)
   ============================================ */

.fcom_lesson_details .wp-block-image {
    margin-top: clamp(1rem, 4vw, 3rem) !important;
    margin-bottom: clamp(1rem, 4vw, 3rem) !important;
}

.fcom_lesson_details .wp-block-image img {
    border: 1px solid var(--jurible-border) !important;
    border-radius: 12px !important;
}

.fcom_lesson_details .wp-block-image figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--jurible-text-muted) !important;
    font-size: var(--jurible-font-size-small) !important;
    font-style: italic;
    margin-top: var(--jurible-spacing-xs);
    text-align: center;
}

.fcom_lesson_details .wp-block-image figcaption::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239CA3AF'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5-7l-3 3.72L9 13l-3 4h12l-4-5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

h3.jurible-current-title {
    margin: 6px !important;
    margin-block-start: 1px !important;
    margin-block-end: 1px !important;
}

/* Mode sombre - Bordure image leçons */
html.dark .fcom_lesson_details .wp-block-image img {
    border-color: var(--jurible-border) !important;
}

/* Mode sombre - Bordure image pages WP */
html.dark .fcom_wp_content img {
    border-color: var(--wp--preset--color--border) !important;
}

/* ============================================
   DARK MODE - Classes WordPress Gutenberg
   Pour compatibilité des patterns/compositions
   ============================================ */

/* Backgrounds */
html.dark .has-white-background-color {
    background-color: var(--el-bg-color-overlay, #1d1e1f) !important;
}

html.dark .has-background-background-color {
    background-color: var(--el-bg-color, #141414) !important;
}

html.dark .has-muted-background-color {
    background-color: var(--el-bg-color-overlay, #1d1e1f) !important;
}

/* Text colors */
html.dark .has-text-dark-color {
    color: #F3F4F6 !important;
}

html.dark .has-text-gray-color {
    color: #E5E7EB !important;
}

html.dark .has-text-muted-color {
    color: #9CA3AF !important;
}

html.dark .has-black-color {
    color: #F3F4F6 !important;
}

/* Borders - Group blocks with borders */
html.dark .wp-block-group[style*="border-color"] {
    border-color: var(--el-border-color, #414243) !important;
}

html.dark .has-border-color {
    border-color: var(--el-border-color, #414243) !important;
}

/* Cards and containers with white background */
html.dark .wp-block-group.has-background {
    border-color: var(--el-border-color, #414243) !important;
}

/* Shadows in dark mode - reduce intensity */
html.dark .has-shadow,
html.dark [style*="box-shadow"] {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Specific pattern elements */
html.dark .wp-block-columns.has-background,
html.dark .wp-block-column.has-background {
    border-color: var(--el-border-color, #414243) !important;
}

/* Cover block text should stay visible */
html.dark .wp-block-cover .has-text-dark-color {
    color: #F3F4F6 !important;
}

/* Buttons - keep gradients but ensure visibility */
html.dark .wp-block-button.is-style-outline .wp-block-button__link {
    border-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--primary) !important;
    background: transparent !important;
}

html.dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: rgba(176, 0, 29, 0.1) !important;
}

/* Separators */
html.dark .wp-block-separator {
    border-color: var(--el-border-color, #414243) !important;
    background-color: var(--el-border-color, #414243) !important;
}

html.dark hr.wp-block-separator {
    border-color: var(--el-border-color, #414243) !important;
}

/* Quote blocks */
html.dark .wp-block-quote {
    border-left-color: var(--wp--preset--color--primary) !important;
    color: #E5E7EB !important;
}

html.dark .wp-block-quote cite {
    color: #9CA3AF !important;
}

/* Table blocks */
html.dark .wp-block-table table {
    border-color: var(--el-border-color, #414243) !important;
}

html.dark .wp-block-table td,
html.dark .wp-block-table th {
    border-color: var(--el-border-color, #414243) !important;
}

html.dark .wp-block-table thead {
    background-color: var(--el-bg-color-overlay, #1d1e1f) !important;
}

html.dark .wp-block-table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* List blocks */
html.dark .wp-block-list li {
    color: #E5E7EB !important;
}

html.dark .wp-block-list li::marker {
    color: var(--wp--preset--color--primary) !important;
}

/* Headings in patterns */
html.dark .wp-block-heading {
    color: #F3F4F6 !important;
}

/* Paragraphs with explicit color classes */
html.dark p.has-text-dark-color,
html.dark p.has-black-color {
    color: #F3F4F6 !important;
}

html.dark p.has-text-gray-color {
    color: #E5E7EB !important;
}

/* Info/Success/Warning/Error backgrounds in dark mode */
html.dark .has-info-bg-background-color {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

html.dark .has-success-bg-background-color {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

html.dark .has-warning-bg-background-color {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

html.dark .has-error-bg-background-color {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

html.dark .has-secondary-bg-background-color,
html.dark .has-accent-bg-background-color {
    background-color: rgba(124, 58, 237, 0.15) !important;
}

/* Info/Success/Warning/Error text colors */
html.dark .has-info-text-color {
    color: #60A5FA !important;
}

html.dark .has-success-text-color {
    color: #34D399 !important;
}

html.dark .has-warning-text-color {
    color: #FBBF24 !important;
}

html.dark .has-error-text-color {
    color: #F87171 !important;
}

/* Inline images in patterns */
html.dark .wp-block-image img {
    border-color: var(--el-border-color, #414243) !important;
}

/* Spacer blocks - no change needed but ensure visibility if styled */
html.dark .wp-block-spacer {
    background: transparent !important;
}

/* ============================================
   DARK MODE - Tags (Block Styles)
   ============================================ */

/* Tag Primary - fond rouge clair, texte rouge */
html.dark p.is-style-tag-primary {
    background: rgba(176, 0, 29, 0.2) !important;
    color: #F87171 !important;
}

/* Tag Secondary - fond violet clair, texte violet */
html.dark p.is-style-tag-secondary {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #A78BFA !important;
}

/* Tag Gray - fond sombre, texte clair */
html.dark p.is-style-tag-gray {
    background: var(--el-bg-color-overlay, #1d1e1f) !important;
    color: #E5E7EB !important;
}

/* Tag Success */
html.dark p.is-style-tag-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34D399 !important;
}

/* Tag Warning */
html.dark p.is-style-tag-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #FBBF24 !important;
}

/* Tag Error */
html.dark p.is-style-tag-error {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #F87171 !important;
}

/* Tag Info */
html.dark p.is-style-tag-info {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60A5FA !important;
}

/* Tag Dark - inverse en dark mode */
html.dark p.is-style-tag-dark {
    background: #F3F4F6 !important;
    color: #1A1A1A !important;
}

/* Tag Category (post terms) */
html.dark .is-style-tag-category a {
    background: var(--el-bg-color-overlay, #1d1e1f) !important;
    color: #E5E7EB !important;
}

/* ============================================
   DARK MODE - Buttons (Block Styles)
   ============================================ */

/* Primary button - gradient reste visible, texte blanc */
html.dark .wp-block-button.is-style-primary .wp-block-button__link {
    color: #FFFFFF !important;
}

/* Secondary button - fond clair, texte sombre */
html.dark .wp-block-button.is-style-secondary .wp-block-button__link {
    background: #F3F4F6 !important;
    color: #1A1A1A !important;
}

html.dark .wp-block-button.is-style-secondary .wp-block-button__link:hover {
    background: #FFFFFF !important;
}

/* Outline button */
html.dark .wp-block-button.is-style-outline .wp-block-button__link {
    border-color: var(--wp--preset--color--primary) !important;
    color: #F87171 !important;
    background: transparent !important;
}

html.dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary) !important;
    color: #FFFFFF !important;
}

/* Outline Dark - pour fond gris/muted */
html.dark .wp-block-button.is-style-outline-dark .wp-block-button__link {
    border-color: #E5E7EB !important;
    color: #E5E7EB !important;
    background: transparent !important;
}

html.dark .wp-block-button.is-style-outline-dark .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

/* Ghost button */
html.dark .wp-block-button.is-style-ghost .wp-block-button__link {
    color: #E5E7EB !important;
}

html.dark .wp-block-button.is-style-ghost .wp-block-button__link:hover {
    background: var(--el-bg-color-overlay, #1d1e1f) !important;
}

/* Link button */
html.dark .wp-block-button.is-style-link .wp-block-button__link {
    color: #F87171 !important;
}

html.dark .wp-block-button.is-style-link .wp-block-button__link:hover {
    color: #FCA5A5 !important;
}

/* Gray button */
html.dark .wp-block-button.is-style-gray .wp-block-button__link {
    background: var(--el-bg-color-overlay, #1d1e1f) !important;
    color: #E5E7EB !important;
    border-color: var(--el-border-color, #414243) !important;
}

html.dark .wp-block-button.is-style-gray .wp-block-button__link:hover {
    background: var(--el-border-color, #414243) !important;
}

/* Accent button - violet reste visible */
html.dark .wp-block-button.is-style-accent .wp-block-button__link {
    color: #FFFFFF !important;
}

/* Destructive button */
html.dark .wp-block-button.is-style-destructive .wp-block-button__link {
    color: #FFFFFF !important;
}

/* CTA White - sur fond sombre, devient sombre */
html.dark .wp-block-button.is-style-cta-white .wp-block-button__link,
html.dark .wp-block-button.is-style-primary-white .wp-block-button__link {
    background: var(--el-bg-color-overlay, #1d1e1f) !important;
    color: #F87171 !important;
    border: 1px solid var(--el-border-color, #414243) !important;
}

html.dark .wp-block-button.is-style-cta-white .wp-block-button__link:hover,
html.dark .wp-block-button.is-style-primary-white .wp-block-button__link:hover {
    background: var(--el-border-color, #414243) !important;
}

/* ============================================
   DARK MODE - Badges (Hero patterns)
   ============================================ */

html.dark .hero-simple__badge,
html.dark .hero-produit__badge {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #A78BFA !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
}

/* ============================================
   DARK MODE - Hero Patterns
   ============================================ */

/* Hero Simple - fond gradient devient sombre */
html.dark .hero-simple {
    background: linear-gradient(180deg, var(--el-bg-color, #141414) 0%, #1a1a2e 50%, #16213e 100%) !important;
}

html.dark .hero-simple__title {
    color: #F3F4F6 !important;
}

html.dark .hero-simple__subtitle {
    color: #E5E7EB !important;
}

/* Hero Produit - fond gradient devient sombre */
html.dark .hero-produit {
    background: linear-gradient(180deg, var(--el-bg-color, #141414) 0%, #1a1a2e 50%, #1e1b4b 100%) !important;
}

html.dark .hero-produit__title {
    color: #F3F4F6 !important;
}

html.dark .hero-produit__meta,
html.dark .hero-produit__subtitle {
    color: #E5E7EB !important;
}

/* Hero tags group */
html.dark .hero-produit__tags p {
    background: var(--el-bg-color-overlay, #1d1e1f) !important;
    color: #E5E7EB !important;
}

/* ============================================
   DARK MODE - Cards with white background
   ============================================ */

html.dark .card-article,
html.dark .equipe-grille__card {
    background: var(--el-bg-color-overlay, #1d1e1f) !important;
    border-color: var(--el-border-color, #414243) !important;
}

html.dark .card-article h3,
html.dark .equipe-grille__card h3 {
    color: #F3F4F6 !important;
}

html.dark .card-article p,
html.dark .equipe-grille__card p {
    color: #E5E7EB !important;
}

/* Credentials list in team cards */
html.dark .enseignant-credentials {
    color: #E5E7EB !important;
}

/* ============================================
   DARK MODE - Section backgrounds
   ============================================ */

/* Sections with muted background */
html.dark .section-articles-grid,
html.dark .section-articles-lies {
    background-color: var(--el-bg-color, #141414) !important;
}

/* Sections with white background */
html.dark .equipe-section,
html.dark .equipe-grille-section,
html.dark .equipe-teaser-section,
html.dark .comments-section,
html.dark .section-bio-auteur {
    background-color: var(--el-bg-color-overlay, #1d1e1f) !important;
}

/* Bio auteur inner card */
html.dark .section-bio-auteur .has-muted-background-color {
    background-color: var(--el-bg-color, #141414) !important;
}

/* ===========================================
   PRICING CARDS - Fixes Fluent Community
   =========================================== */

/* Badges Populaire / Meilleure valeur - forcer texte blanc */
.minos-card__badge--popular,
.minos-card__ribbon {
    color: #FFFFFF !important;
}

/* Cards pricing - fond et bordures */
.fcom_wp_content .minos-card {
    background: var(--wp--preset--color--white, #FFFFFF) !important;
    border-color: var(--wp--preset--color--border, #E5E7EB) !important;
}

/* Titres et textes dans les cards */
.fcom_wp_content .minos-card__title {
    color: var(--wp--preset--color--text-dark, #1A1A1A) !important;
}

.fcom_wp_content .minos-card__description,
.fcom_wp_content .minos-card__include-item {
    color: var(--wp--preset--color--text-gray, #4A4A4A) !important;
}

.fcom_wp_content .minos-card__price {
    color: var(--wp--preset--color--text-dark, #1A1A1A) !important;
}

/* CTA buttons */
.fcom_wp_content .minos-card__cta--gradient {
    color: #FFFFFF !important;
}

.fcom_wp_content .minos-card__cta--gradient:hover {
    color: #FFFFFF !important;
}

.fcom_wp_content .minos-card__cta--outline {
    background: #FFFFFF !important;
    color: var(--wp--preset--color--text-dark, #1A1A1A) !important;
}

.fcom_wp_content .minos-card__cta--outline:hover {
    color: var(--wp--preset--color--warning-text, #92400E) !important;
}

/* Credits badges */
.fcom_wp_content .minos-card__credits--pro {
    color: #FFFFFF !important;
}

/* Dark mode pricing cards */
html.dark .minos-card {
    background: var(--el-bg-color-overlay, #1d1e1f) !important;
    border-color: var(--el-border-color, #414243) !important;
}

html.dark .minos-card--featured {
    background:
        linear-gradient(var(--el-bg-color-overlay, #1d1e1f), var(--el-bg-color-overlay, #1d1e1f)) padding-box,
        linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--secondary) 100%) border-box !important;
}

html.dark .minos-card__title {
    color: #F3F4F6 !important;
}

html.dark .minos-card__description,
html.dark .minos-card__include-item {
    color: #E5E7EB !important;
}

html.dark .minos-card__price {
    color: #F3F4F6 !important;
}

html.dark .minos-card__cta--outline {
    background: var(--el-bg-color-overlay, #1d1e1f) !important;
    color: #E5E7EB !important;
    border-color: var(--el-border-color, #414243) !important;
}

html.dark .minos-card__cta--outline:hover {
    background: var(--wp--preset--color--warning-bg) !important;
}

/* ===========================================
   ACADEMIC GENERATOR - Fixes Fluent Community
   =========================================== */

.aga-submit-btn svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    stroke: #FFFFFF !important;
    fill: none !important;
}

.aga-submit-btn svg path {
    stroke: #FFFFFF !important;
    stroke-width: 2.5 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===========================================
   QUIZ FLUENT COMMUNITY
   =========================================== */

p.correct_text {
    margin-bottom: 0 !important;
}

.fcom_question_header {
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

.fcom_question_label p {
    margin-bottom: 0 !important;
}

.fcom_is_correct,
.fcom_is_correct.incorrect {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
}

.dark .fcom_is_correct .correct_text,
.dark .fcom_is_correct.incorrect .correct_text {
    color: #1a1a1a !important;
}

/* ===========================================
   WORDPRESS COLOR CLASSES - Force white text
   Dans Fluent Community, les classes WordPress
   comme has-white-color sont écrasées
   =========================================== */

/* Badge "Populaire" et autres badges avec fond primary */
.fcom_wp_content .has-white-color,
.fcom_wp_content .has-white-color.has-text-color,
.fcom_wp_content .has-primary-background-color .has-white-color,
.fcom_wp_content .has-primary-background-color.has-white-color,
.fcom_wp_content .has-secondary-background-color .has-white-color,
.fcom_wp_content .has-secondary-background-color.has-white-color,
.fcom_wp_content [class*="minos-card"] .has-white-color,
.fcom_wp_content [class*="minos-card"] p.has-white-color {
    color: #FFFFFF !important;
}

/* Ribbon "Meilleure valeur" */
.fcom_wp_content [class*="ribbon"] p,
.fcom_wp_content [class*="ribbon"] .has-white-color {
    color: #FFFFFF !important;
}

