/*
Theme Name: Maths Cours Theme
Theme URI: http://maths-cours-wp.test
Author: Antigravity
Description: Thème classique pour Maths Cours, remplaçant l'architecture Headless. Adaptation du design de référence.
Version: 1.2
*/

/*
============================================================================
GUIDE DU DÉVELOPPEUR - MATHS-COURS THEME STYLESHEET
============================================================================

Ce fichier CSS (~2400 lignes) contrôle tout le design du site Maths-Cours.
Organisation: Mobile-first, composants réutilisables, variables CSS cohérentes.

⚠️  POINTS D'ATTENTION:
- Fichier volumineux: Utiliser la table des matières pour naviguer
- Media queries: Mobile First (min-width, pas max-width)
- Z-index: Header=50, Mobile Menu  =1000, Modals=9999
- Variables CSS: Voir section 1.1 pour la palette complète

📝 RÈGLES DE MODIFICATION:
- ✅ Utiliser les variables CSS (:root) pour les couleurs/espacements
- ✅ Tester sur mobile ET desktop après chaque changement
- ✅ Respecter l'ordre de cascade (ne pas déplacer les règles)
- ❌ Ne pas utiliser !important sauf nécessité absolue
- ❌ Ne pas modifier les breakpoints sans synchroniser avec JS

============================================================================
TABLE DES MATIÈRES
============================================================================

1. CONFIGURATION & FONDATIONS
   1.1. Variables CSS (Couleurs, Typographie, Espacements) ......... Ligne 70
   1.2. Reset & Normalisation .................................... Ligne 120
   1.3. Typographie de base ...................................... Ligne 140

2. LAYOUT & STRUCTURE GLOBALE
   2.1. Container & Utilitaires .................................. Ligne 180
   2.2. Header & Navigation ...................................... Ligne 250
   2.3. Footer ................................................... Ligne 900
   2.4. Breadcrumb ............................................... Ligne 950

3. COMPOSANTS RÉUTILISABLES
   3.1. Boutons (.btn-*) ......................................... Ligne 200
   3.2. Cards & Chapter Cards .................................... Ligne 1000
   3.3. Blocs de Contenu Custom (Théorème, Exemple, etc.) ....... Ligne 1300
   3.4. Tables Mathématiques ..................................... Ligne 1600
   3.5. Listes Numérotées/Puces .................................. Ligne 1700

4. PAGES SPÉCIFIQUES
   4.1. Homepage (Hero, Stats, Visual) ........................... Ligne 600
   4.2. Pages de Cours/Méthode ................................... Ligne 1100
   4.3. Pages d'Outils ........................................... Ligne 1800
   4.4. Authentification ......................................... Ligne 1000

5. NAVIGATION & MENUS
   5.1. Desktop Navigation ....................................... Ligne 350
   5.2. Mobile Menu .............................................. Ligne 2000
   5.3. Dropdowns ................................................ Ligne 450
   5.4. Search Modal ............................................. Ligne 2100

6. RESPONSIVE & MEDIA QUERIES
   6.1. Mobile (<768px) .......................................... (Inline)
   6.2. Tablet (768-1199px) ...................................... (Inline)
   6.3. Desktop (≥1200px) ........................................ (Inline)

7. PRINT STYLES .................................................. Ligne 2300

8. UTILITAIRES & ANIMATIONS
   8.1. Classes Helper (spacing, colors, etc.) ................... Ligne 180
   8.2. Animations (fadeUp, slideIn, etc.) ....................... Ligne 520

============================================================================
*/

/* Imports Fonts */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

/* ========================================================================
   1. CONFIGURATION & FONDATIONS
   ======================================================================== */

/* ========================================================================
   1.1. VARIABLES CSS - Design Tokens
   ========================================================================
   
   Cette section définit TOUTES les variables CSS utilisées dans le thème.
   Modifier ces valeurs affecte l'ensemble du site.
   
   GROUPES:
   - Couleurs: Primaire (violet), Secondaire (teal), Accents (jaune, rose)
   - Typographie: Fonts families, weights
   - Espacements: Container width, radius, shadows
   
   ⚠️  ATTENTION: Ne pas modifier sans tester visuellement tout le site
   ======================================================================== */

:root {
    /* Palette Principale */
    --color-primary: #4D13D1;
    --color-primary-light: #F9F7FF;
    /* Even lighter violet */
    --color-secondary: #2EC4B6;
    --color-secondary-light: #F2FCFB;
    /* Even lighter teal */

    --color-accent-sun: #FFD23F;
    /* Reverted to Yellow */
    --color-accent-sun-light: #FFFCF2;
    /* Very light yellow */

    --color-accent-amber: #D97706;
    /* New Amber */
    --color-accent-amber-light: #FFFEF6;
    /* Very light amber */

    --color-accent-pop: #FF3366;
    --color-accent-pop-light: #FFF5F7;
    /* Even lighter pink */

    --color-accent-orange: #F97316;
    /* Orange 500 */

    --color-background: #F0F2FF;

    --color-background: #F0F2FF;
    /* Fond Bleu-Gris Clair */
    --color-surface: #FFFFFF;
    /* Fond surface element */

    --color-text: #0F172A;
    /* Slate 900 */
    --color-text-muted: #64748B;
    /* Slate 500 */

    /* Extended Color Palette - Hover States & Grays */
    --color-primary-dark: #370da1;
    /* Primary hover state (darker violet) */
    --color-accent-sun-hover: #FFC400;
    /* Accent sun hover state (brighter yellow) */
    --color-text-on-yellow: #78350F;
    /* Text color for yellow backgrounds */

    /* Grays Scale */
    --color-gray-50: #f8fafc;
    /* Very light gray for subtle backgrounds */
    --color-gray-200: #e2e8f0;
    /* Light gray for borders */
    --color-gray-300: #CBD5E1;
    /* Medium-light gray for subtle text */
    --color-gray-400: #94A3B8;
    /* Medium gray for muted text */
    --color-gray-900: #1E293B;
    /* Very dark gray for headings */

    /* Accent Colors */
    --color-indigo-300: #A5B4FC;
    /* Light indigo for accents */

    /* Typography */
    --font-heading: 'Ubuntu', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'Roboto Mono', monospace;

    /* Spacing & Borders */
    --container-width: 1200px;
    --radius-md: 0.75rem;
    /* 12px */
    --radius-full: 9999px;
    /* Pill shape */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Reset & Base */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-text);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.2s;
}

a:hover {
    color: #370da1;
    /* Darker primary */
}

img {
    max-width: 100%;
    height: auto;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

/* ========================================================================
   Factorisation des Transitions - Base Commune
   ========================================================================
   Tous les éléments interactifs partagent une transition standard fluide.
   Les overrides spécifiques (durée, timing) sont définis où nécessaire.
   ======================================================================== */

/* Transition standard pour tous les éléments interactifs */
a,
.btn,
.card,
.chapter-card,
.center-nav a,
.center-nav button,
.dropdown-trigger,
.dropdown-content {
    transition: all 0.2s ease;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    /* Pill styling */
    font-weight: 600;
    font-family: var(--font-heading);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: white !important;
}

/* ========================================================================
   Factorisation des Boutons - Effets Hover Communs
   ========================================================================
   Tous les boutons partagent l'effet de lift au hover.
   Les propriétés spécifiques (couleurs, shadows) restent dans chaque variant.
   ======================================================================== */

/* Effet de lift commun à tous les boutons */
.btn:hover,
.btn-primary:hover,
.btn-accent:hover,
.btn-accent-yellow:hover,
.btn-secondary:hover,
.btn-outline-white:hover,
.mockup-btn:hover {
    transform: translateY(-2px);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
}

/* Bouton "Inscription" style (Jaune + Texte Violet) */
.btn-accent {
    background-color: var(--color-accent-sun);
    color: var(--color-primary) !important;
}

.btn-accent:hover {
    filter: brightness(105%);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: white;
    border: 2px solid transparent;
    color: var(--color-text) !important;
    box-shadow: var(--shadow-sm);
}

/* TikZ Container - Force zero margin */
.tikz-container {
    margin: 0 !important;
}

.btn-secondary:hover {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-200);
}

/* Header */
.site-header {
    background: var(--color-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(77, 19, 209, 0.2);
}

.site-header .container {
    display: flex;
    /* Fallback */
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-width);
    /* Restore fixed width */
    padding: 0 2rem;
    margin: 0 auto;
    /* Center container */
}

.branding .logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: white;
    /* Logo text white */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
    /* Prevent wrapping */
}

/* Responsive Header Layout */
@media (min-width: 1200px) {
    .site-header {
        padding: 0;
    }

    .site-header .container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 2rem;
    }

    .branding {
        justify-self: start;
    }

    .center-nav {
        justify-self: center;
    }

    .right-auth {
        justify-self: end;
    }
}

/* End Responsive Header Layout */

/* Responsive Visibility Logic (Mobile First) */
.hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: white;
}

.hidden-mobile {
    display: none !important;
}

/* Desktop Overrides */
@media (min-width: 1200px) {
    .hamburger-btn {
        display: none;
    }

    .hidden-mobile {
        display: flex !important;
    }
}

.center-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.center-nav a,
.center-nav button {
    display: flex;
    flex-direction: column;
    /* Icon Top, Text Bottom */
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    /* Small gap between icon and text */
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.75rem;
    /* Smaller text */
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    min-width: 60px;
    /* Ensure touch target and visual balance */
}

.center-nav a:hover,
.center-nav button:hover,
.dropdown-trigger:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    transform: translateY(-2px);
    /* Slight lift effect */
}

.right-auth {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    justify-self: end;
    /* Align to right edge */
}

/* Icons */
.nav-icon {
    width: 28px;
    /* Larger icon */
    height: 28px;
    opacity: 1;
    /* Full opacity for prominence */
    margin-bottom: 2px;
    color: white !important;
    /* Force white as per user request */
}

.chevron-icon {
    display: none;
    /* Hide chevron for cleaner "app icon" look */
}

/* Update Dropdown Positioning for Center Nav */
.dropdown-parent {
    position: relative;
    padding: 0;
    /* Clear padding from li */
}

/* Specific colors for icons based on snippet */
.text-genz-secondary {
    color: var(--color-secondary);
}

.text-genz-accentPop {
    color: var(--color-accent-pop);
}

.text-genz-accentSun {
    color: var(--color-accent-sun);
}

.text-indigo-300 {
    color: #A5B4FC;
}

/* Hide legacy styles if conflict */
.site-nav {
    display: none;
}

.dropdown-parent {
    position: relative;
    padding: 1rem 0;
    /* Increase trigger area */
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(0, 0, 0, 0.02);
    min-width: 260px;
    white-space: nowrap;
    border-radius: 16px;
    padding: 0.5rem;
    z-index: 100;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.dropdown-parent:hover .dropdown-content {
    display: block;
    animation: fadeUp 0.2s forwards;
}

.dropdown-parent:hover .dropdown-trigger svg {
    transform: rotate(180deg);
    transition: transform 0.2s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Fix Dropdown Text Contrast (Override .site-nav a white color) */
/* Fix Dropdown Text Contrast (Override .center-nav a white color) */
.center-nav .dropdown-content a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--color-text) !important;
    /* Force Dark Color */
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.15s;
    font-size: 0.95rem;
    align-items: flex-start;
    /* Reset align-items from parent */
    justify-content: flex-start;
    /* Reset justify-content */
    min-width: unset;
    /* Reset min-height/width */
    height: auto;
    /* Reset height */
    margin-bottom: 0;
}

.center-nav .dropdown-content a:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary) !important;
    transform: none;
    /* Reset lift effect */
}

/* Hero Section */
.hero {
    background-color: var(--color-primary);
    color: white;
    padding: 4rem 0 6rem;
    overflow: hidden;
    position: relative;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 992px) {
    .hero-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 4rem;
    }
}

/* Hero Left Content */
.hero-content {
    text-align: left;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #FCD34D;
    /* Yellowish for visibility */
    margin-bottom: 1.5rem;
}

.hero-title {
    font-size: 2.75rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: white;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3.75rem;
    }
}

.text-gradient {
    color: #FF7171;
    /* Fallback */
    background: linear-gradient(135deg, #FFD23F 0%, #FF3366 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 500px;
    margin-bottom: 2.5rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3.5rem;
}

.btn-accent-yellow {
    background-color: #FFD23F;
    color: var(--color-primary) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.85rem 1.75rem;
}

.btn-accent-yellow:hover {
    background-color: var(--color-accent-sun-hover);
    box-shadow: 0 4px 12px rgba(255, 210, 63, 0.3);
}

.btn-outline-white {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white !important;
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Stats */
.hero-stats {
    display: flex;
    gap: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #2EC4B6;
    /* Teal */
}

.stat-item:nth-child(2) .stat-value {
    color: #FF3366;
}

/* Pink */
.stat-item:nth-child(3) .stat-value {
    color: #FFD23F;
}

/* Yellow */

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Right Visual - Mockup Card */
.hero-visual {
    position: relative;
    padding: 1rem;
}

/* .mockup-card style défini dans la section Cards (ligne ~836) pour factorisation */

.floating-badge {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #FF3366;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(255, 51, 102, 0.3);
    transform: rotate(5deg);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.card-icon {
    width: 48px;
    height: 48px;
    background: #F3F0FF;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-primary);
}

.card-title-group h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--color-gray-900);
}

.card-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.progress-section {
    background: var(--color-gray-50);
    padding: 1.25rem;
    border-radius: 16px;
    margin-bottom: 2rem;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.progress-percent {
    color: var(--color-primary);
}

.progress-bar {
    height: 8px;
    background: #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 10px;
}

.card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    align-items: center;
}

.mockup-btn {
    border: none;
    padding: 0.75rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s;
}

/* .mockup-btn:hover transform déjà défini dans la factorisation commune (ligne ~240) */

.btn-soft-purple {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.btn-soft-yellow {
    background: var(--color-accent-sun);
    color: var(--color-text-on-yellow);
}

.btn-text {
    background: transparent;
    color: var(--color-text-muted);
}

.btn-text:hover {
    color: var(--color-primary);
}

/* ========================================================================
   Factorisation des Cards - Propriétés Communes
   ========================================================================
   Toutes les cards partagent un fond blanc, des coins arrondis, du padding,
   et des transitions. Les variations spécifiques (shadows, borders) sont
   définies dans chaque classe.
   ======================================================================== */

/* Base commune pour toutes les cards */
.card,
.chapter-card,
.mockup-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 2rem;
}

/* Cards & Content */
.chapter-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.card {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

/* Mockup card - styling spécifique pour Hero */
.mockup-card {
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: rotate(-2deg);
    transition: transform 0.3s;
    /* Override: transition plus lente pour effet dramatique */
    position: relative;
    color: var(--color-text);
}

.mockup-card:hover {
    transform: rotate(0deg) scale(1.02);
}

/* Footer */
.site-footer {
    background: var(--color-primary);
    /* Primary Purple */
    color: var(--color-gray-400);
    padding: 4rem 0 2rem;
    margin-top: 6rem;
}

.site-footer a {
    color: var(--color-gray-300);
}

.site-footer a:hover {
    color: white;
}

.site-footer h3 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Auth Container */
/* Auth Container */
.auth-container {
    background: white;
    padding: 3rem;
    border-radius: 24px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 4rem auto;
    border: none;
    width: 90%;
    /* Responsive width */
}

.auth-container h1 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-size: 2rem;
    font-weight: 700;
}

.auth-container p.text-muted {
    margin-bottom: 2rem;
    color: #64748B;
}

/* Auth Labels */
.auth-container label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #475569;
}

.auth-container input {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 1rem;
    transition: all 0.2s;
    width: 100%;
}

.auth-container input:focus {
    background: white;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-light);
    outline: none;
}

/* =========================================
   MOBILE MENU
   ========================================= */


.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--color-primary);
    /* Violet background */
    color: white;
}

.mobile-menu-header .logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    /* Match desktop size */
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
}

.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    /* White close icon */
}

.mobile-menu-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 1.5rem;
}

.mobile-nav-link {
    display: flex;
    justify-content: flex-start;
    /* Left align content */
    align-items: center;
    gap: 0.75rem;
    /* Gap between icon and text */
    width: 100%;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    border: none;
    /* Reset button borders */
    border-bottom: 1px solid #f0f0f0;
    background: none;
    text-decoration: none;
    cursor: pointer;
}

.mobile-nav-trigger {
    display: flex;
    justify-content: space-between;
    /* Push chevron to right */
    align-items: center;
    width: 100%;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 1px solid #f0f0f0;
    background: none;
    border: none;
    text-align: left;
}

.mobile-nav-trigger svg {
    transition: transform 0.2s;
}

.submenu-item {
    display: block;
    padding: 0.8rem 1rem 0.8rem 2rem;
    /* Indented */
    color: var(--color-text-muted);
    font-size: 1rem;
    border-left: 2px solid #eee;
    margin-left: 1rem;
    /* Visual hierarchy */
}

.submenu-item.main-link {
    font-weight: 600;
    color: var(--color-primary);
}

@media (max-width: 900px) {

    /* Increased breakpoint for Tablets */
    .site-nav {
        display: none;
    }

    .hamburger-btn {
        display: block;
    }
}

/* =========================================
   LEGACY IMPORT: SEO SECTION
   ========================================= */
.seo-section {
    background-color: #f4f7f9;
}

.seo-column {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 35px 30px;
    text-align: center;
    transition: all 0.3s ease;
    background: white;
}

.seo-column:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(30, 136, 229, 0.15);
}

.seo-icon-svg {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-primary);
}

/* =========================================
   LEGACY IMPORT: PEDAGOGICAL BLOCKS (Studygram)
   ========================================= */
.entry-content {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text);
    max-width: 800px;
    margin: 0 auto;
}

.entry-content p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Images */
.content-image {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    max-height: 500px;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.content-image+em,
.entry-content figcaption {
    display: block;
    text-align: center;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

/* Lists */
.entry-content ul {
    list-style-type: disc !important;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.entry-content ul li {
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.list-item-ordered {
    margin: 1rem 0;
}

.entry-content ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.entry-content ol li {
    margin-bottom: 1rem;
}

.entry-content ol li::marker {
    font-weight: 700;
}

.entry-content ol ol {
    list-style-type: lower-alpha;
    margin-top: 0.5rem;
}

/* User Specific H2 Styles */
#rich-text-content h2 {
    color: var(--color-primary);
    font-family: Ubuntu, sans-serif;
    font-size: 2.25rem !important;
    font-weight: 700;
    margin-top: 2rem;
    /* Increased top margin */
    margin-bottom: 2.5rem;
    /* Increased bottom margin */
    letter-spacing: -.01em;
    border-bottom: 4px solid var(--color-primary-light);
    padding-bottom: .8rem;
    /* Slightly more padding */
}

/* Blocks Definition/Théorème/Exemple - Modern/Target Style */
/* Blocks Definition/Théorème/Exemple - Common Styles */
.bloc-definition,
.cadre-bleu,
.bloc-theoreme,
.cadre-rouge,
.bloc-methode,
.bloc-exemple,
.cadre-vert,
.bloc-vert,
.bloc-remarque,
.cadre-jaune,
.bloc-propriete,
.cadre-propriete,
.cadre-orange {
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2.5rem 0;
    box-shadow: var(--shadow-sm);
    border-left-style: solid;
}

/* TikZ Container - Force zero margin */
.tikz-container {
    margin: 0 !important;
}

/* Specific Colors */
.bloc-definition,
.cadre-bleu {
    background-color: var(--color-primary-light);
    border-left-color: var(--color-primary);
}

.bloc-theoreme,
.cadre-rouge {
    background-color: var(--color-accent-pop-light);
    border-left-color: var(--color-accent-pop);
}

.bloc-methode {
    background-color: var(--color-secondary-light);
    border-left-color: var(--color-secondary);
}

.bloc-exemple,
.cadre-vert,
.bloc-vert {
    background-color: var(--color-secondary-light);
    border-left-color: var(--color-secondary);
}

.bloc-remarque,
.cadre-jaune {
    background-color: var(--color-accent-sun-light);
    border-left-color: var(--color-accent-sun);
    font-size: 0.95em;
}

.bloc-propriete,
.cadre-propriete,
.cadre-orange {
    background-color: var(--color-accent-amber-light);
    border-left-color: var(--color-accent-amber);
}

/* Block Title Colors - Mapped to Palette */
.bloc-definition h3,
.cadre-bleu h3 {
    margin-top: 0;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.bloc-theoreme h3,
.cadre-rouge h3 {
    margin-top: 0;
    font-weight: 700;
    color: var(--color-accent-pop);
    margin-bottom: 0.5rem;
}

.bloc-methode h3 {
    margin-top: 0;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
}

.bloc-exemple h3,
.cadre-vert h3,
.bloc-vert h3 {
    margin-top: 0;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
}

.bloc-remarque h3,
.cadre-jaune h3 {
    margin-top: 0;
    font-weight: 700;
    color: var(--color-accent-sun);
    margin-bottom: 0.5rem;
}

.bloc-propriete h3,
.cadre-propriete h3,
.cadre-orange h3 {
    margin-top: 0;
    font-weight: 700;
    color: var(--color-accent-amber);
    margin-bottom: 0.5rem;
}


/* New Nomenclature: par- (Paragraphs/Blocks - No Frame) */
/* Standard Paragraph Blocks (Exemple, Remarque, Attention) */
.par-exemple,
.par-remarque,
.par-attention {
    margin: 2rem 0;
}

/* Titres spécifiques */
.par-exemple h3 {
    margin-top: 0;
    font-weight: 700;
    color: var(--color-accent-orange);
    margin-bottom: 0.5rem;
}

.par-remarque h3 {
    margin-top: 0;
    font-weight: 700;
    color: #06B6D4;
    /* Cyan 500 */
    margin-bottom: 0.5rem;
}

.par-attention h3 {
    margin-top: 0;
    font-weight: 700;
    color: var(--color-accent-pop);
    margin-bottom: 0.5rem;
}

/* Corrigés Masqués (Volets) */
.volet>div:not(:first-child) {
    /* Cache le contenu du corrigé par défaut */
    /* On utilise :not(:first-child) pour cibler la div qui suit le h2, si elle n'est pas first-child ?
       Structure: <div class="volet"><h2>...</h2><div>CONTENT</div></div>
       Ici, le div content est le 2nd enfant (après h2). 
       Si h2 est premier enfant, alors div content est last-child ou nth-child(2).
       Plus simple: cibler directement la div après le h2 si CSS le permet, ou juste .volet > div
       MAIS attention si le h2 est wrapped.
       Le script JS cible $(this).next('div').
       On va cibler `.volet > div` mais il faut être sûr de ne pas cacher le titre s'il est dans une div ? 
       Structure observée: <div class="volet"><h2><a>Corrigé</a></h2><div>...</div></div>
       Donc div enfant direct ne contient que le contenu. Le titre est H2 direct.
    */
    display: none;
}

.volet>div.open,
.volet.open>div:not(:first-child) {
    display: block;
}

/* Style du titre cliquable */
.volet h2 {
    cursor: pointer;
    user-select: none;
    display: inline-block;
    color: var(--color-primary);
    border-bottom: 1px dashed var(--color-primary);
    /* Indice visuel */
}

.volet h2 a {
    text-decoration: none;
    color: inherit;
    pointer-events: none;
    /* Laisse le JS du parent (h2) gérer le clic */
}

/* Indiquer état ouvert */
.volet.open h2:before {
    content: "▼ ";
    font-size: 0.8em;
}

.volet:not(.open) h2:before {
    content: "► ";
    font-size: 0.8em;
}

.bloc-cyan h3 {
    color: var(--color-accent-amber);
}

.bloc-orange h3 {
    color: var(--color-secondary);
}

/* User Utility Classes */
.center {
    text-align: center;
}

/* Tables */
table.compact {
    border-collapse: collapse;
    margin: 1rem auto;
    font-size: 1rem;
    width: auto;
    max-width: 100%;
    border: 1px solid var(--color-text-muted);
}

table.compact td,
table.compact th {
    border: 1px solid var(--color-text-muted);
    padding: 0.5rem 1rem;
    text-align: center;
}

table.compact th {
    font-weight: 600;
}

table.singleborder {
    border: 1px solid var(--color-text-muted);
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
    background-color: white;
}

table.singleborder td,
table.singleborder th {
    border: none;
    padding: 0.5rem 1rem;
    text-align: left;
    vertical-align: top;
}

/* Fiche Specific Styles - Modern/Card Look (Image 1) */
.fiche-content {
    background: white;
    padding: 2.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid #E2E8F0;
    font-family: var(--font-body);
    /* Ensure Sans-serif */
}

/* New Header Layout */
.fiche-header-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.header-icon {
    background: white;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.header-text {
    flex: 1;
}

.entry-header {
    text-align: center;
    margin-bottom: 2rem;
}

.fiche-title {
    color: var(--color-primary);
    margin: 0;
    margin-bottom: 0.5rem;
    font-size: 2.5rem;
    /* Bigger font */
    font-weight: 700;
    line-height: 1.1;
}

.fiche-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align */
    gap: 0.25rem;
}

.meta-type {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748B;
    /* Slate 500 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #F1F5F9;
    /* Slate 100 Pill */
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    display: inline-block;
}

.pink-underline {
    width: 60px;
    height: 4px;
    background-color: var(--color-accent-pop);
    border-radius: 2px;
    margin-top: 0.25rem;
}

/* =========================================
   SEARCH MODAL
   ========================================= */

.search-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    padding-top: 5vh;
}

.search-modal-container.hidden {
    display: none;
}

.search-modal-container.flex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.6);
    /* Slate 900 / 60% */
    backdrop-filter: blur(4px);
    z-index: 1;
}

.search-modal-content {
    position: relative;
    z-index: 2;
    background: white;
    width: 100%;
    max-width: 600px;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

.search-modal-header {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #F1F5F9;
    gap: 0.75rem;
}

.search-icon {
    color: var(--color-primary);
    width: 24px;
    height: 24px;
}

#search-input {
    flex: 1;
    font-size: 1.1rem;
    color: var(--color-text);
    border: none;
    outline: none;
    background: transparent;
    padding: 0.5rem;
}

#search-input::placeholder {
    color: #94A3B8;
}

.close-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #94A3B8;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-search-btn:hover {
    background-color: #F1F5F9;
    color: var(--color-text);
}

.search-results-list {
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: var(--color-background);
}

.result-icon {
    padding: 0.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-content {
    flex: 1;
}

.result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.result-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.search-result-item:hover .result-title {
    color: var(--color-primary);
}

.result-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    background-color: #F1F5F9;
    color: #94A3B8;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
}

.result-excerpt {
    font-size: 0.85rem;
    color: #64748B;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result-arrow {
    color: #94A3B8;
    opacity: 0;
    transition: opacity 0.2s;
    align-self: center;
}

.search-result-item:hover .result-arrow {
    opacity: 1;
    color: var(--color-primary);
}

.search-modal-footer {
    padding: 0.5rem 1rem;
    border-top: 1px solid #F1F5F9;
    background-color: #F8FAFC;
    text-align: right;
    font-size: 0.75rem;
    color: #94A3B8;
}

.search-modal-footer kbd {
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-family: var(--font-mono);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* Colors for Types */
.bg-indigo-100 {
    background-color: #E0E7FF;
}

.text-indigo-600 {
    color: #4F46E5;
}

.bg-emerald-100 {
    background-color: #D1FAE5;
}

.text-emerald-600 {
    color: #059669;
}

.bg-amber-100 {
    background-color: #FEF3C7;
}

.text-amber-600 {
    color: #D97706;
}

.bg-slate-100 {
    background-color: #F1F5F9;
}


.text-slate-600 {
    color: #475569;
}

/* =========================================
   PROFILE PAGE REDESIGN
   ========================================= */

.profile-card {
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

/* Header */
.profile-header {
    background: var(--color-primary);
    padding: 2.5rem 3rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.profile-header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: white;
}

.profile-header p {
    opacity: 0.9;
    font-size: 1rem;
}

.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.btn-logout:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Content Grid */
.profile-content {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    padding: 3rem;
}

@media (max-width: 768px) {
    .profile-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
        text-align: center;
    }

    .profile-header {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
        align-items: center;
    }
}

/* Avatar Section */
.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar-wrapper {
    position: relative;
    width: 160px;
    height: 160px;
    margin-bottom: 1.5rem;
}

.avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #eef2ff;
    border: 4px solid #4ade80;
    /* Light Green ring from mockup */
    padding: 5px;
}

.btn-refresh {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: #F43F5E;
    /* Pink */
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.btn-refresh:hover {
    transform: rotate(180deg);
}

.avatar-hint {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.4;
    text-align: center;
}

/* Details Section */
.status-row {
    background: #F8FAFC;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.status-label {
    font-weight: 700;
    color: #64748B;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.badge-member {
    background: #e0e7ff;
    color: var(--color-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.badge-admin {
    background: #FECACA;
    /* Red-200 */
    color: #991B1B;
    /* Red-800 */
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.badge-premium {
    background: #FDE68A;
    /* Amber-200 */
    color: #92400E;
    /* Amber-800 */
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Form Styles */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #1e293b;
    font-weight: 600;
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    font-size: 1rem;
    color: #334155;
    transition: border-color 0.2s;
}

.form-group input.input-disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.form-group textarea {
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Save Button */
.btn-save {
    background: #FCD34D;
    /* Yellow */
    color: #78350F;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.2s, background 0.2s;
    margin-left: auto;
}

.btn-save:hover {
    background: #FBBF24;
    transform: translateY(-2px);
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 2rem;
    border-top: 1px solid #f1f5f9;
    padding-top: 2rem;
}

/* Level Page - Chapter List */
.max-w-4xl {
    max-width: 896px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.chapter-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card Style (rounded-3xl shadow-sm border...) */
.chapter-card {
    background: white;
    border-radius: 1.5rem;
    /* rounded-3xl */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* shadow-sm */
    border: 1px solid #F1F5F9;
    /* border-slate-100 */
    overflow: hidden;
    transition: all 0.3s;
}

.chapter-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* hover:shadow-md */
}

/* Header (px-8 py-6 border-b...) */
.chapter-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #F8FAFC;
    /* border-slate-50 */
    background: linear-gradient(to right, #F8FAFC, #FFFFFF);
    /* bg-gradient-to-r */
}

.chapter-title {
    margin: 0;
    font-size: 1.5rem;
    /* text-2xl */
    font-family: var(--font-heading);
    /* font-display */
    font-weight: 700;
    color: #1E293B;
    /* text-slate-800 */
}

.chapter-title a {
    color: inherit;
    text-decoration: none;
}

/* Body (p-4 space-y-6) */
.chapter-body {
    padding: 1rem;
}

.chapter-groups {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* space-y-6 */
}

/* Group (space-y-3) */
.fiche-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* space-y-3 */
}

.group-title {
    margin: 0;
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 600;
    color: #94A3B8;
    /* text-slate-400 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* tracking-wider */
    padding: 0 0.25rem;
    /* px-1 */
}

/* Grid (grid-cols-1 md:grid-cols-2) */
.fiche-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* Prevent blowout */
    gap: 0.75rem;
    /* gap-3 */
}

@media (min-width: 768px) {
    .fiche-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Fiche Item (flex items-center px-5 py-4...) */
.fiche-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    /* px-5 py-4 */
    border-radius: 1rem;
    /* rounded-2xl */
    background-color: rgba(248, 250, 252, 0.3);
    /* bg-slate-50/30 */
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
    text-decoration: none;
    color: #334155;
    /* slate-700 */
    min-width: 0;
    /* Critical for truncation in grid/flex */
}

.fiche-item:hover {
    background-color: #F8FAFC;
    /* hover:bg-genz-background (fallback to slate-50) */
    border-color: #F1F5F9;
    /* hover:border-slate-100 */
}

/* Icon Box (p-2.5 rounded-xl...) */
.fiche-icon-box {
    flex-shrink: 0;
    margin-right: 1rem;
    padding: 0.625rem;
    border-radius: 0.75rem;
    /* rounded-xl */
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scale on hover group */
.fiche-item:hover .fiche-icon-box {
    transform: scale(1.1);
}

/* Colors by type */
.box-cours {
    background-color: #EEF2FF;
    /* bg-indigo-50 */
    color: var(--color-primary);
}

.box-methode {
    background-color: #F0FDFA;
    /* Teal-50 */
    color: var(--color-secondary);
}

.box-exercice {
    background-color: #FEF2F2;
    /* bg-red-50 */
    color: var(--color-accent-pop);
}

.box-quiz {
    background-color: #FFFBEB;
    /* bg-amber-50 */
    color: #D97706;
    /* Amber-600 */
}

.text-quiz {
    color: #D97706;
}

/* Meta */
.fiche-meta {
    flex-grow: 1;
    min-width: 0;
    /* truncate fix */
}

.fiche-title {
    display: block;
    font-weight: 500;
    /* Reduced from 600 */
    font-size: 1rem;
    line-height: 1.2;
    /* Tighten spacing */
    margin-bottom: 0;
    /* Fixed size */
    color: #334155;
    /* text-slate-700 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
    max-width: 100%;
}

.fiche-item:hover .fiche-title {
    color: var(--color-primary);
    /* group-hover:text-genz-primary */
}

.fiche-label {
    display: inline-flex;
    align-items: center;
    margin-top: 0;
    line-height: 1.2;
    /* Tighten label */
    /* Reduced from 0.25rem */
    font-size: 0.75rem;
    /* text-xs */
    font-weight: 600;
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-accentPop {
    color: var(--color-accent-pop);
}

/* Arrow */
.fiche-arrow {
    width: 20px;
    height: 20px;
    color: #CBD5E1;
    /* text-slate-300 */
    opacity: 0;
    margin-left: 0.5rem;
    transition: all 0.2s;
}

.fiche-item:hover .fiche-arrow {
    opacity: 1;
    color: var(--color-primary);
}

/* Breadcrumbs */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: #64748B;
    /* slate-500 */
}

.breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-link:hover {
    color: var(--color-primary);
}



.breadcrumb-separator {
    display: flex;
    align-items: center;
    color: #CBD5E1;
    /* slate-300 */
}

.breadcrumb-current {
    font-weight: 500;
    color: var(--color-primary);
}

/* Level Title with Pink Dash */
.level-title {
    font-size: 2.5rem;
    /* Reduced from 3.5rem */
    font-weight: 800;
    /* Extra bold */
    color: #4F46E5;
    /* Indigo-600 */
    line-height: 1.1;
    position: relative;
    display: inline-block;
    margin: 0;
    margin-bottom: 1.5rem;
    /* Increased space below dash (was 0.5rem) */
    font-family: 'Outfit', sans-serif;
}

.level-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 6px;
    background-color: #F43F5E;
    /* Rose-500 */
    border-radius: 99px;
    margin-top: 1rem;
    /* More space between text and dash */
}

/* =========================================
   MOBILE TWEAKS (FULL WIDTH CARDS)
   ========================================= */
@media (max-width: 768px) {

    /* Full width for Chapter Cards (Class Summaries) */
    .chapter-card {
        margin-left: -20px;
        /* Counteract container padding */
        margin-right: -20px;
        width: calc(100% + 40px);
        border-radius: 0 !important;
        border-left: none;
        border-right: none;
        box-shadow: none;
        border-top: 1px solid #E2E8F0;
        border-bottom: 1px solid #E2E8F0;
    }

    /* Full width for Fiche Content (Single Fiche) */
    .fiche-content {
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
        border-radius: 0 !important;
        border-left: none;
        border-right: none;
        border-top: 1px solid #E2E8F0;
        border-bottom: 1px solid #E2E8F0;
        padding: 1.5rem 1rem;
        /* Adjust padding for mobile */
        box-shadow: none;
    }
}

/* =========================================
   FAQ Section Styles (SEO Optimized)
   ========================================= */
.faq-section {
    background-color: #F8FAFC;
    /* Slate 50 */
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-top: 4rem;
    position: relative;
    border-top: 4px solid var(--color-primary);
}

/* Icon / Header decoration */
/* Floating Badge Title (The H3 itself) - NO pseudo element */
.faq-section h3 {
    background: var(--color-primary);
    color: white;
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    margin: 0;
    position: absolute;
    top: -1.4rem;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: var(--shadow-md);
    /* Override defaults */
    border-bottom: none;
    margin-bottom: 0;
    white-space: nowrap;
    z-index: 10;
    /* Responsive: allow wrap on small screens if title is long */
    max-width: 90%;
    white-space: normal;
    text-align: center;
}

.faq-section .content {
    margin-top: 1.5rem;
}

.faq-section h4 {
    color: var(--color-text);
    background: white;
    padding: 1.25rem;
    border-radius: 12px;
    margin-top: 3rem;
    /* Increased spacing */
    margin-bottom: 0.5rem;
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--color-secondary);
    /* Teal accent */
    font-size: 1.1rem;
    cursor: default;
    transition: transform 0.2s;
}

.faq-section h4:hover {
    transform: translateX(5px);
    border-left-color: var(--color-primary);
}

.faq-section p {
    color: var(--color-text-muted);
    padding: 0.5rem 1.25rem;
    border-left: 2px solid #E2E8F0;
    margin-left: 1rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.5);
    /* Slight highlight */
    border-radius: 0 8px 8px 0;
}

.faq-section p:empty {
    display: none;
}

.faq-section ul {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

/* Custom Block Styles */

/* Print Styles */
@media print {

    body,
    html,
    .site-content,
    .entry-content,
    .container,
    .fiche-content {
        background-color: white !important;
        background: white !important;
        -webkit-print-color-adjust: exact;
    }

    :root {
        --color-background: #ffffff !important;
    }

    .site-header,
    .site-footer,
    .breadcrumb,
    #mobile-menu,
    #search-modal,
    .fiche-meta,
    /* Masquer les métadonnées type "Cours" si elles sont gênantes ou colorées */
    .btn-secondary,
    .pdf-download-link

    /* Masquer les boutons de navigation s'ils apparaissent */
        {
        display: none !important;
    }
}