/* --- Variables globales pour les couleurs --- */
/* Updated: 2026-01-19 - Book size adjustment */
:root {
    --primary-color: #1a2332;
    --accent-color: #c9302c;
    --secondary-accent: #e74c3c;
    --text-dark: #2c3e50;
    --text-light: #666;
    --bg-light: #f8f9fa;
    --bg-lighter: #fafbfc;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.12);
    --navbar-bg: rgba(255, 255, 255, 0.92);
    --navbar-bg-scrolled: rgba(255, 255, 255, 0.97);
    --navbar-text: rgba(26, 35, 50, 0.75);
    --navbar-logo: #1a2332;
    --mobile-menu-bg: rgba(255, 255, 255, 0.97);
    --mobile-menu-text: #1a2332;
    --name-gradient: linear-gradient(120deg, #f27457 0%, #f4a45c 45%, #f6d46e 100%);
    --hero-name-gradient: linear-gradient(115deg, #f36f5e 0%, #f6a266 42%, #f5d47a 76%, #f9f0c2 100%);
    /* Nouvelles variables pour les améliorations graphiques */
    --transition-primary: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-secondary: all 0.2s ease;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;
    /* Nouvelles ombres améliorées */
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    --shadow-xxl: 0 35px 60px rgba(0, 0, 0, 0.2);
}

/* --- Mode sombre --- */
[data-theme="dark"] {
    --primary-color: #1a2332;
    --accent-color: #e74c3c;
    --secondary-accent: #c9302c;
    --text-dark: #ecf0f1;
    --text-light: #bdc3c7;
    --bg-light: #2c3e50;
    --bg-lighter: #1a2332;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.5);
    --navbar-bg: rgba(26, 35, 50, 0.96);
    --navbar-bg-scrolled: rgba(26, 35, 50, 0.98);
    --navbar-text: rgba(255, 255, 255, 0.88);
    --navbar-logo: #ffffff;
    --mobile-menu-bg: rgba(26, 35, 50, 0.98);
    --mobile-menu-text: #ffffff;
    --name-gradient: linear-gradient(120deg, #ffb79f 0%, #ffce92 45%, #ffe8a5 100%);
    --hero-name-gradient: linear-gradient(115deg, #ffb79f 0%, #ffc990 45%, #ffe9a4 78%, #fff7d9 100%);
}

[data-theme="dark"] body {
    background-color: var(--bg-lighter);
    color: var(--text-dark);
}

[data-theme="dark"] .about {
    background: linear-gradient(135deg, var(--bg-lighter) 0%, var(--bg-light) 100%);
}

[data-theme="dark"] .contact {
    background: var(--bg-light);
}

[data-theme="dark"] .media {
    background: var(--bg-lighter);
}

[data-theme="dark"] .category-card,
[data-theme="dark"] .media-card,
[data-theme="dark"] .resource-card,
[data-theme="dark"] .course-card,
[data-theme="dark"] .contact-form,
[data-theme="dark"] .timeline-content-modern {
    background: var(--bg-light) !important;
    color: var(--text-dark);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .resource-card a {
    color: var(--text-dark);
}

[data-theme="dark"] .category-card .category-title,
[data-theme="dark"] .media-card h3,
[data-theme="dark"] .resource-card h3,
[data-theme="dark"] .course-card-title,
[data-theme="dark"] .contact-form h3,
[data-theme="dark"] .timeline-content-modern h4 {
    color: var(--text-dark);
}

[data-theme="dark"] .about-article-wrapper p {
    color: var(--text-dark);
}

[data-theme="dark"] .publications-intro {
    color: var(--text-light);
}

[data-theme="dark"] .overlay-container {
    background: var(--bg-light);
}

[data-theme="dark"] .overlay-content {
    color: var(--text-dark);
}

[data-theme="dark"] .overlay-content h3 {
    color: var(--text-dark);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
    background: var(--bg-lighter);
    color: var(--text-dark);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .form-group label {
    color: var(--text-dark);
}

[data-theme="dark"] .contact-info h3,
[data-theme="dark"] .contact-info p {
    color: var(--text-dark);
}

[data-theme="dark"] .footer {
    background: #0f1419;
}

[data-theme="dark"] .footer-section h4,
[data-theme="dark"] .footer-section p,
[data-theme="dark"] .footer-section ul li a {
    color: white;
}

[data-theme="dark"] .footer-bottom p {
    color: var(--text-light);
}

[data-theme="dark"] .media-title {
    color: var(--text-dark);
}

[data-theme="dark"] .media-source {
    color: var(--text-light);
}

[data-theme="dark"] .course-card-details {
    color: var(--text-light);
}

[data-theme="dark"] .category-count {
    color: var(--accent-color);
}

/* Particules en mode sombre */
[data-theme="dark"] #teaching .container,
[data-theme="dark"] #arts-sciences .container,
[data-theme="dark"] #research .container {
    background: rgba(44, 62, 80, 0.9);
}

[data-theme="dark"] .section-title::after {
    background: var(--accent-color);
}

[data-theme="dark"] .media-link {
    color: var(--accent-color);
}

[data-theme="dark"] .contact-item {
    color: var(--text-dark);
}



[data-theme="dark"] .hero-bg::after {
    display: none;
    /* Supprime l'animation bizarre en mode sombre */
}

/* Styles pour les sous-titres de la section Enseignements - avec spécificité élevée pour surcharger les styles existants */
#teaching .teaching-subtitle {
    text-align: center !important;
    margin: 1.5em 0 !important;
    color: var(--primary-color) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.6rem !important;
    font-style: italic !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

#teaching .teaching-subtitle--past {
    text-align: center !important;
    margin: 1.5em 0 !important;
    color: var(--primary-color) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.6rem !important;
    font-style: italic !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* Sections spécifiques en mode sombre */
[data-theme="dark"] #arts-sciences {
    background: var(--bg-lighter);
}

[data-theme="dark"] #teaching {
    background: var(--bg-lighter);
}

[data-theme="dark"] #research {
    background: var(--bg-lighter);
}

[data-theme="dark"] #arts-sciences .media-card,
[data-theme="dark"] #teaching .course-card,
[data-theme="dark"] #research .timeline-content-modern {
    background: var(--bg-light) !important;
    color: var(--text-dark);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #arts-sciences .media-card h3,
[data-theme="dark"] #teaching .course-card-title,
[data-theme="dark"] #research .timeline-content-modern h4 {
    color: var(--text-dark);
}

[data-theme="dark"] #arts-sciences .media-title,
[data-theme="dark"] #teaching .course-card-details,
[data-theme="dark"] #research .timeline-content-modern p {
    color: var(--text-light);
}

[data-theme="dark"] #arts-sciences .media-source {
    color: var(--text-light);
}

/* Ensure all text blocks are readable in Arts & Sciences (dark) */
[data-theme="dark"] #arts-sciences .media-item,
[data-theme="dark"] #arts-sciences .media-description,
[data-theme="dark"] #arts-sciences .media-description p {
    color: var(--text-dark);
    background: transparent;
}

[data-theme="dark"] #arts-sciences .media-link {
    color: var(--accent-color);
}

/* États de survol en mode sombre */








/* --- Controls Top Bar --- */
.top-controls {
    position: fixed;
    top: 26px;
    right: 20px;
    z-index: 1001;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.theme-toggle,
.lang-toggle {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 25px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.theme-toggle,
.lang-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    font-size: 1.1rem;
    /* Ajuste si emoji trop grand */
    vertical-align: middle !important;
}

[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .lang-toggle {
    color: white !important;
    /* Assure visibilité */
}

/* Suppression de la règle en double pour éviter les conflits */

[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .lang-toggle {
    background: rgba(44, 62, 80, 0.9);
    color: white;
}

.theme-toggle:hover,
.lang-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

/* --- Search Bar --- */
.search-container {
    position: relative;
    max-width: 500px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.search-input {
    width: 100%;
    padding: 1rem 3rem 1rem 1.5rem;
    border: 2px solid var(--bg-light);
    border-radius: 25px;
    font-size: 1rem;
    background: white;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

[data-theme="dark"] .search-input {
    background: var(--bg-light);
    border-color: var(--primary-color);
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(201, 48, 44, 0.1);
}

.search-icon {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 1.2rem;
}

.search-results {
    background: white;
    border-radius: 18px;
    margin-top: 1rem;
    box-shadow: var(--shadow-md);
    max-height: 420px;
    overflow-y: auto;
    display: none;
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 0;
}

[data-theme="dark"] .search-results {
    background: var(--bg-light);
    border-color: rgba(255, 255, 255, 0.08);
}

.search-result-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    font-family: inherit;
}

[data-theme="dark"] .search-result-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.search-result-item:hover,
.search-result-item:focus {
    background: rgba(201, 48, 44, 0.08);
    transform: translateX(2px);
    outline: none;
}

[data-theme="dark"] .search-result-item:hover,
[data-theme="dark"] .search-result-item:focus {
    background: rgba(231, 148, 127, 0.16);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-main {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.search-result-year {
    font-weight: 700;
    color: var(--accent-color);
    font-size: 0.95rem;
}

.search-result-text {
    color: var(--text-dark);
    line-height: 1.55;
}

[data-theme="dark"] .search-result-text {
    color: var(--text-light);
}

.search-result-text mark {
    background: rgba(108, 117, 125, 0.15);
    color: inherit;
    padding: 0 0.15rem;
    border-radius: 3px;
}

[data-theme="dark"] .search-result-text mark {
    background: rgba(108, 117, 125, 0.25);
}

.search-result-meta {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-light);
}

[data-theme="dark"] .search-result-meta {
    color: rgba(236, 240, 241, 0.65);
}

.search-result-empty {
    font-style: italic;
    cursor: default;
    color: var(--text-light);
    pointer-events: none;
}

[data-theme="dark"] .search-result-empty {
    color: rgba(236, 240, 241, 0.75);
}

/* --- Back to Top Button --- */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.8rem;
    font-weight: bold;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    z-index: 1000;
    box-shadow: 0 5px 20px rgba(201, 48, 44, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--secondary-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(201, 48, 44, 0.4);
}

/* --- Hidden content for non-JS users --- */
.no-js .search-container {
    display: none;
}

/* --- Styles de base pour la structure --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-dark);
    line-height: 1.65;
    background-color: var(--bg-lighter);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(0.6rem, 3vw, 2rem);
}

.section>.container {
    position: relative;
    z-index: 2;
}

/* --- Animation d'entrée corrigée pour les sections --- */
.section {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Ajout d'un effet de mise en avant subtil */
    will-change: transform, opacity;
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Animations avancées pour les sections --- */
/* NOUVELLES ANIMATIONS POUR LES CARTES - Voir section à partir de la ligne 4976 */
/* Les anciennes animations ont été remplacées par des animations plus subtiles et performantes */

@keyframes slideInScale {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Effet de parallax avancé --- */
.parallax-element {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* --- Animations de particules flottantes --- */
.floating-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: var(--accent-color);
    border-radius: 50%;
    opacity: 0.1;
    animation: floatUp 15s infinite linear;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.1;
    }

    90% {
        opacity: 0.1;
    }

    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* --- Animations de texte avancées --- */
.glitch-text {
    position: relative;
    animation: glitch 3s infinite;
}

@keyframes glitch {

    0%,
    100% {
        text-shadow:
            0.05em 0 0 rgba(255, 0, 0, 0.75),
            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
            0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }

    14% {
        text-shadow:
            0.05em 0 0 rgba(255, 0, 0, 0.75),
            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
            0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }

    15% {
        text-shadow:
            -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }

    49% {
        text-shadow:
            -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }

    50% {
        text-shadow:
            0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
            0.05em 0 0 rgba(0, 255, 0, 0.75),
            0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }

    99% {
        text-shadow:
            0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
            0.05em 0 0 rgba(0, 255, 0, 0.75),
            0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
}

/* --- Animations de chargement --- */
.skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* --- Effet de vague --- */
.wave-effect {
    position: relative;
    overflow: hidden;
}

.wave-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.wave-effect:hover::before {
    width: 300px;
    height: 300px;
}

/* Exception pour la section hero qui doit être visible immédiatement */
.hero {
    opacity: 1;
    transform: translateY(0);
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3.5rem;
    position: relative;
    padding-bottom: 1rem;
    text-align: center;
}

/* Couleurs naturelles pour les icônes des titres de sections */
.section-title .fas.fa-address-card {
    color: #3498db;
}

/* Bleu pour biographie */
.section-title .fas.fa-magnifying-glass {
    color: #e67e22;
}

/* Orange pour recherche */
.section-title .fas.fa-book-open {
    color: #27ae60;
}

/* Vert pour publications */
.section-title .fas.fa-podcast {
    color: #9b59b6;
}

/* Violet pour podcasts */
.section-title .fas.fa-graduation-cap {
    color: #e74c3c;
}

/* Rouge pour enseignement */
.section-title .fas.fa-bullhorn {
    color: #f39c12;
}

/* Jaune/orange pour média */
.section-title .fas.fa-lightbulb {
    color: #1abc9c;
}

/* Turquoise pour arts et sciences */
.section-title .fas.fa-envelope {
    color: #34495e;
}

/* Gris pour contact */
.section-title .fas.fa-unlock {
    color: #27ae60;
}

/* Vert pour accès libre */

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
}

/* --- Navigation Moderne Améliorée --- */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--navbar-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1000;
    padding: 0.75rem 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(201, 48, 44, 0.1);
}

#navbar.scrolled {
    background: var(--navbar-bg-scrolled);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(201, 48, 44, 0.2);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(0.6rem, 3vw, 2rem);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.logo-icon {
    font-size: 2rem;
    background: var(--hero-name-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--navbar-logo);
    letter-spacing: -0.02em;
    position: relative;
    transition: all 0.3s ease;
}

.logo::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

.logo:hover .logo-text {
    color: var(--accent-color);
    transform: translateY(-1px);
}

.logo:hover::after {
    width: 100%;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--navbar-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-primary);
    position: relative;
    overflow: hidden;
    background: transparent;
    /* Ajout d'un effet de mise en avant subtil */
    transform: translateY(0);
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 48, 44, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover {
    color: var(--accent-color);
    background: rgba(201, 48, 44, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 48, 44, 0.15);
    /* Ajout d'un effet de brillance supplémentaire */
}



/* Sous-menus Dropdown */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: var(--navbar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(201, 48, 44, 0.15);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000;
    padding: 0.75rem 0;
    margin-top: 0.5rem;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 0.75rem 1.25rem;
    color: var(--navbar-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    position: relative;
    border-left: 3px solid transparent;
    border-radius: 8px;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

.dropdown-item:hover {
    background: rgba(201, 48, 44, 0.08);
    color: var(--accent-color);
    border-left-color: var(--accent-color);
    transform: translateX(4px);
}

.dropdown-item:hover::before {
    width: 3px;
}

.dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin: 0.5rem 0;
}

/* Icônes pour les éléments de menu */
.nav-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Menu Mobile Amélioré */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 420px;
    height: calc(100vh - 60px);
    background: var(--mobile-menu-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    overflow-y: auto;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu ul {
    list-style: none;
    padding: 1rem 0;
}

.mobile-menu .nav-item {
    margin-bottom: 0.25rem;
}

.mobile-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: var(--mobile-menu-text);
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    border-radius: 0;
}

.mobile-menu .nav-link:hover {
    background: rgba(201, 48, 44, 0.1);
    border-left-color: var(--accent-color);
    padding-left: 2rem;
    transform: translateX(8px);
}

/* Boutons de contrôle améliorés */
.nav-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.theme-toggle,
.lang-toggle {
    background: var(--navbar-bg);
    border: 2px solid rgba(201, 48, 44, 0.3);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-toggle:hover,
.lang-toggle:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(201, 48, 44, 0.3);
}

.theme-icon,
.lang-icon {
    transition: all 0.3s ease;
}

.theme-toggle:hover .theme-icon,
.lang-toggle:hover .lang-icon {
    transform: scale(1.2) rotate(10deg);
}

.mobile-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem;
    display: none;
}

.mobile-menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--navbar-logo);
    margin: 6px 0;
    transition: all 0.3s ease;
    border-radius: 3px;
}

/* Responsive Navigation */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .logo {
        font-size: 1.4rem;
    }

    .logo-text {
        display: none;
    }

    .nav-container {
        padding: 0 1rem;
    }
}

/* Animations et micro-interactions */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-item {
    animation: slideInFromTop 0.6s ease-out backwards;
}

.nav-item:nth-child(1) {
    animation-delay: 0.1s;
}

.nav-item:nth-child(2) {
    animation-delay: 0.15s;
}

.nav-item:nth-child(3) {
    animation-delay: 0.2s;
}

.nav-item:nth-child(4) {
    animation-delay: 0.25s;
}

.nav-item:nth-child(5) {
    animation-delay: 0.3s;
}

.nav-item:nth-child(6) {
    animation-delay: 0.35s;
}

.nav-item:nth-child(7) {
    animation-delay: 0.4s;
}

.nav-item:nth-child(8) {
    animation-delay: 0.45s;
}

#navbar.scrolled {
    background: var(--navbar-bg-scrolled);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(0.6rem, 3vw, 2rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--navbar-logo);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    letter-spacing: -0.015em;
    text-shadow: 0 10px 24px rgba(201, 48, 44, 0.18);
}

.logo:hover {
    color: var(--accent-color);
}

.logo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, rgba(201, 48, 44, 0.55), rgba(201, 48, 44, 0));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    border-radius: 999px;
    opacity: 0.85;
}

.logo:hover::after {
    transform: scaleX(1);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: var(--navbar-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--accent-color);
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--navbar-logo);
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Burger to cross animation */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    background: var(--accent-color);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    background: var(--accent-color);
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    height: calc(100dvh - env(safe-area-inset-top, 0));
    background: var(--mobile-menu-bg);
    transition: right 0.3s ease;
    z-index: 999;
    padding: calc(5rem + env(safe-area-inset-top, 0)) 2rem calc(2rem + env(safe-area-inset-bottom, 24px)) 2rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    flex: 1;
    margin: 0 0 1.5rem 0;
}

.mobile-menu a {
    display: block;
    color: var(--mobile-menu-text);
    text-decoration: none;
    padding: 1rem 0;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

[data-theme="dark"] .mobile-menu a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}



/* --- Contrôles dans le menu mobile --- */
.mobile-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 2rem;
    margin-bottom: env(safe-area-inset-bottom, 0);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-controls .theme-toggle,
.mobile-controls .lang-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 25px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    color: white;
}

.mobile-controls .theme-toggle:hover,
.mobile-controls .lang-toggle:hover {
    background: var(--accent-color);
    transform: scale(1.1);
}

/* Cacher les contrôles mobiles sur desktop */
@media screen and (min-width: 769px) {
    .mobile-controls {
        display: none;
    }
}

/* --- Hero Section --- */
.hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    padding: 120px 2.5rem 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    box-sizing: border-box;
    text-align: center;
    /* Ajout d'un dégradé supplémentaire pour plus de profondeur */
    background: linear-gradient(135deg, rgba(26, 35, 50, 0.85) 0%, rgba(44, 62, 80, 0.9) 100%);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
    /* Ajout d'une ombre subtile pour plus de profondeur */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-content h1 {
    font-size: 4.5rem;
    font-weight: 900;
    margin-bottom: 1.2rem;
    letter-spacing: -0.03em;
    animation: heroFadeIn 1.2s ease-out, heroTextGlow 3s ease-in-out infinite alternate 2s;
    position: relative;
    display: inline-block;
    text-shadow: 0 18px 32px rgba(0, 0, 0, 0.25), 0 0 26px rgba(201, 48, 44, 0.28);
    /* Ajout d'un effet de brillance supplémentaire */
    background-image: var(--hero-name-gradient, var(--name-gradient));
    background-size: 200% 200%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: heroFadeIn 1.2s ease-out, heroNameGradient 18s ease-in-out 0.8s infinite alternate;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .logo {
        background-image: var(--name-gradient);
        background-size: 200% 200%;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        transition: background-position 0.4s ease, text-shadow 0.3s ease;
    }

    .hero-content h1 {
        background-image: var(--hero-name-gradient, var(--name-gradient));
        background-size: 200% 200%;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: heroFadeIn 1.2s ease-out, heroNameGradient 18s ease-in-out 0.8s infinite alternate;
    }

    .logo:hover {
        background-position: 100% 50%;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2.8rem;
    opacity: 0.95;
    animation: heroFadeIn 1.2s ease-out 0.3s;
    animation-fill-mode: both;
    /* Ajout d'un effet de mise en avant subtil */
    position: relative;
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: var(--border-radius-sm);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 1100px) {
    .hero-content {
        max-width: 1100px;
    }

    .hero-subtitle {
        white-space: nowrap;
    }
}

.hero-cta {
    display: inline-block;
    padding: 1.2rem 3rem;
    background: var(--accent-color);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition-primary);
    animation: heroFadeIn 1.2s ease-out 0.6s;
    animation-fill-mode: both;
    box-shadow: 0 10px 30px rgba(201, 48, 44, 0.3);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    /* Ajout d'un effet de brillance au survol */
}

.hero-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: var(--transition-secondary);
}

.hero-cta:hover {
    background: var(--secondary-accent);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(201, 48, 44, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-cta:hover::before {
    left: 100%;
}

/* Fix contrast hover news banner & hero */
.news-banner a:hover,
.hero-cta:hover,
.commander-btn:hover,
.book-link:hover,
a[href*="afebalk"]:hover,
.book-promo-banner a:hover {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Force removal of underline for podcast play button specifically */
.podcast-play-btn, 
.podcast-play-btn:hover, 
.podcast-play-btn:active, 
.podcast-play-btn:visited {
    text-decoration: none !important;
    border-bottom: none !important;
}

.podcast-play-btn::after {
    display: none !important;
    content: none !important;
}

/* --- Media Section Editorial Layout (Newspaper Style) --- */
.media-editorial {
    column-count: 2;
    column-gap: 4rem;
    width: 100%;
}

.media-category-group {
    break-inside: avoid;
    margin-bottom: 4rem;
    display: inline-block; /* Fix for column break issues in some browsers */
    width: 100%;
}

.media-category-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--primary-color);
    border-bottom: 3px solid rgba(201, 48, 44, 0.2);
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
    display: inline-block;
    position: relative;
}

.media-category-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--accent-color);
}

[data-theme="dark"] .media-category-title {
    color: var(--text-dark);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.media-entry {
    margin-bottom: 2rem;
    padding-left: 1.2rem;
    border-left: 1px solid rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
}

[data-theme="dark"] .media-entry {
    border-left-color: rgba(255,255,255,0.1);
}

.media-entry:hover {
    border-left-color: var(--accent-color);
    padding-left: 1.5rem;
}

.media-entry-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    line-height: 1.4;
    color: var(--primary-color);
    display: block;
}

[data-theme="dark"] .media-entry-title {
    color: var(--text-dark);
}

.media-entry-meta {
    font-size: 0.9rem;
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.media-entry-source {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--accent-color);
}

.media-entry-date {
    opacity: 0.8;
}

.media-entry-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
    opacity: 0.7;
}

[data-theme="dark"] .media-entry-link {
    color: var(--text-light);
}

.media-entry-link:hover {
    color: var(--accent-color);
    opacity: 1;
    text-decoration: none;
}

@media (max-width: 900px) {
    .media-editorial {
        column-count: 1;
        column-gap: 0;
    }
    
    .media-category-group {
        margin-bottom: 3rem;
    }
}

[data-theme="dark"] .hero-cta:hover,
[data-theme="dark"] .commander-btn:hover,
[data-theme="dark"] .book-link:hover,
[data-theme="dark"] a[href*="afebalk"]:hover,
[data-theme="dark"] .book-promo-banner a:hover {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

@media (max-width: 992px) {
    .hero {
        height: auto;
        min-height: 420px;
        padding: 100px 1.8rem 90px;
    }

    .news-banner+.hero {
        padding-top: 60px;
    }

    .hero-content h1 {
        font-size: 3.4rem;
    }

    .bibliography-panel {
        padding: 2.6rem 2rem;
        margin: 0 1rem;
        border-radius: 30px;
        width: 100%;
    }

    .books-highlight-link .books-button {
        padding: 1rem 2.2rem 1.25rem;
    }

    #about .container,
    #publications .container,
    #podcasts .container,
    #media .container,
    #contact .container {
        padding: 2.4rem;
        margin: 0 1rem;
        border-radius: 28px;
    }
}

@media (max-width: 600px) {
    .hero {
        padding: 95px 1.5rem 85px;
    }

    .news-banner+.hero {
        padding-top: 55px;
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .books-highlight-link {
        margin: 2.1rem auto 2.4rem auto;
    }

    .bibliography-panel {
        padding: 2.2rem 1.5rem;
        margin: 0 -0.5rem;
        border-radius: 26px;
    }

    .books-highlight-link .books-button {
        padding: 0.95rem 1.9rem 1.15rem;
    }

    .books-button-line {
        gap: 0.5rem;
    }

    .books-button-subtext {
        font-size: 0.68rem;
        letter-spacing: 0.18em;
    }

    .bibliography-resources {
        padding: 2.1rem 1.6rem 1.9rem;
    }

    #about .container,
    #publications .container,
    #podcasts .container,
    #media .container,
    #contact .container {
        padding: 2rem;
        margin: 0 1rem;
        border-radius: 24px;
    }
}

@keyframes heroNameGradient {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroTextGlow {
    0% {
        filter: brightness(1) drop-shadow(0 0 20px rgba(201, 48, 44, 0.3));
    }

    50% {
        filter: brightness(1.1) drop-shadow(0 0 30px rgba(201, 48, 44, 0.5));
    }

    100% {
        filter: brightness(1) drop-shadow(0 0 20px rgba(201, 48, 44, 0.3));
    }
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.scroll-indicator::after {
    content: '';
    width: 4px;
    height: 10px;
    background: white;
    border-radius: 2px;
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* --- Podcast Section Redesign (List View) --- */
.podcast-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 900px;
    margin: 2rem auto 0;
}

.podcast-item {
    display: flex;
    align-items: center;
    background: white;
    border-radius: var(--border-radius-md);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-primary);
    border-left: 4px solid var(--accent-color);
    border: 1px solid rgba(0,0,0,0.05);
    text-decoration: none; /* In case the whole item is a link */
    opacity: 0;
    animation: slideInRight 0.5s ease-out forwards;
}

.podcast-item--featured {
    border-left-color: #c9302c;
    background: linear-gradient(90deg, #fff, #fff7f5);
}

.podcast-thumb {
    position: relative;
    width: 128px;
    min-width: 128px;
    aspect-ratio: 16 / 9;
    margin-right: 1.4rem;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(201, 48, 44, 0.16);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    background: rgba(26, 35, 50, 0.08);
}

.podcast-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.podcast-thumb-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(201, 48, 44, 0.92);
    color: #fff;
    font-size: 0.82rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.podcast-item:nth-child(1) { animation-delay: 0.1s; }
.podcast-item:nth-child(2) { animation-delay: 0.2s; }
.podcast-item:nth-child(3) { animation-delay: 0.3s; }
.podcast-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.podcast-item:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
    background: linear-gradient(to right, white, #fffcfc);
    border-left-width: 6px;
}

[data-theme="dark"] .podcast-item {
    background: var(--bg-light);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

[data-theme="dark"] .podcast-item--featured {
    background: linear-gradient(90deg, var(--bg-light), rgba(201, 48, 44, 0.08));
}

[data-theme="dark"] .podcast-item:hover {
    background: linear-gradient(to right, var(--bg-light), rgba(255,255,255,0.02));
}

.podcast-icon-wrapper {
    font-size: 1.8rem;
    margin-right: 1.8rem;
    color: var(--accent-color);
    background: linear-gradient(135deg, rgba(201, 48, 44, 0.05) 0%, rgba(201, 48, 44, 0.12) 100%);
    width: 64px;
    height: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.3s ease;
    border: 1px solid rgba(201, 48, 44, 0.1);
}

.podcast-item:hover .podcast-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: rgba(201, 48, 44, 0.15);
}

.podcast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.podcast-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    font-family: 'Playfair Display', serif;
    line-height: 1.3;
    margin: 0;
}

[data-theme="dark"] .podcast-title {
    color: var(--text-dark);
}

.podcast-source {
    font-size: 0.85rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.podcast-source i {
    font-size: 0.8rem;
    opacity: 0.7;
}

.podcast-action {
    margin-left: 1.5rem;
}

.podcast-play-btn {
    padding: 0.7rem 1.4rem;
    background: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    box-shadow: none; /* Reset potential shadows */
}

.podcast-play-btn:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(201, 48, 44, 0.35);
    text-decoration: none !important;
}

.podcast-play-btn i {
    font-size: 0.9em;
}

@media (max-width: 768px) {
    .podcast-item {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
        gap: 1.2rem;
    }
    
    .podcast-icon-wrapper {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .podcast-thumb {
        width: min(100%, 260px);
        margin-right: 0;
    }
    
    .podcast-source {
        justify-content: center;
    }
    
    .podcast-action {
        margin-left: 0;
        width: 100%;
        margin-top: 0.5rem;
    }
    
    .podcast-play-btn {
        width: 100%;
        justify-content: center;
    }
}

.about {
    background: linear-gradient(135deg, #ffffff 0%, var(--bg-light) 100%);
}

.about-article-wrapper {
    display: flow-root;
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

.about-image-floated {
    float: left;
    width: 40%;
    max-width: 350px;
    margin-right: 3rem;
    margin-bottom: 2rem;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform 0.3s ease;
}



.about-image-floated img {
    width: 100%;
    height: auto;
    display: block;
}

.about-article-wrapper p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.6rem;
    text-align: justify;
    color: var(--text-dark);
}

.about-article-wrapper p:first-of-type {
    font-size: 1.15rem;
    line-height: 1.8;
}

.about-article-wrapper .highlight {
    color: var(--text-dark);
    font-weight: 600;
    background: linear-gradient(120deg, rgba(52, 73, 94, 0.08) 0%, rgba(52, 73, 94, 0.04) 100%);
    padding: 0;
    border-radius: 4px;
}

/* --- Section Recherche --- */
.research-section {
    background: transparent;
}

.research-timeline-modern {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 2rem auto 0;
    padding: 2rem 0;
}

.timeline-connector {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--secondary-accent) 100%);
    transform: translateX(-50%);
}

.timeline-item-modern {
    display: flex;
    margin-bottom: 3rem;
    position: relative;
    align-items: center;
}

.timeline-item-modern:nth-child(odd) {
    flex-direction: row;
}

.timeline-item-modern:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-content-modern {
    background: white;
    border-radius: var(--border-radius-md);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    width: calc(50% - 2rem);
    position: relative;
    transition: var(--transition-primary);
    transform: translateY(0);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.timeline-item-modern:nth-child(odd) .timeline-content-modern {
    border-right: 3px solid var(--accent-color);
}

.timeline-item-modern:nth-child(even) .timeline-content-modern {
    border-left: 3px solid var(--accent-color);
}



.timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 0 0 4px var(--accent-color);
    z-index: 2;
}

.timeline-content-modern:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.timeline-item-modern:nth-child(odd) .timeline-content-modern {
    border-right: 3px solid var(--accent-color);
}

.timeline-item-modern:nth-child(even) .timeline-content-modern {
    border-left: 3px solid var(--accent-color);
}

.timeline-item-modern:nth-child(odd) .timeline-content-modern:hover {
    border-right-width: 5px;
}

.timeline-item-modern:nth-child(even) .timeline-content-modern:hover {
    border-left-width: 5px;
}

.timeline-content-modern h4 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    font-family: 'Playfair Display', serif;
}

.timeline-content-modern p {
    color: var(--text-light);
    line-height: 1.6;
}

/* --- Section Publications --- */
.publications-intro {
    text-align: center;
    font-size: 1.15rem;
    color: var(--text-light);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.7;
}

.bibliography-panel {
    position: relative;
    z-index: 0;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 32px;
    padding: 3rem 3rem 3.5rem;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin: 0;
    width: 100%;
    border: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.bibliography-panel>* {
    position: relative;
    z-index: 1;
}

.bibliography-panel::after {
    display: none;
}



[data-theme="dark"] .bibliography-panel {
    background: rgba(24, 32, 46, 0.9);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}

.bibliography-heading {
    text-align: center;
    margin-bottom: 2.75rem;
}

.bibliography-heading .section-title {
    margin-bottom: 1.3rem;
}

.bibliography-heading .publications-intro {
    margin-bottom: 0;
}

.books-highlight-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 2.5rem auto 3.3rem auto;
    position: relative;
    z-index: 1;
}

.books-highlight-link .books-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1.35rem 3.4rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    background: linear-gradient(135deg, #c9302c 0%, #f08a5d 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 20px 42px rgba(201, 48, 44, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}



.books-button-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.books-button-title {
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.books-button-arrow {
    font-size: 1.15rem;
    transition: transform 0.2s ease;
}

.books-button-subtext {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.88;
}

.books-highlight-link .books-button:hover .books-button-arrow {
    transform: translate(4px, -4px);
}

.bibliography-resources {
    margin-top: 2rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.publications-intro-container {
    text-align: center;
    font-size: 1.15rem;
    color: var(--text-light);
    max-width: 680px;
    margin: 0 auto 2.5rem auto;
    line-height: 1.7;
}

.bibliography-resources h3 {
    margin: 0 0 2rem 0;
    font-size: 1.4rem;
    color: var(--primary-color);
    text-align: center;
}

.bibliography-note {
    text-align: center;
    margin-top: 2.8rem;
    font-style: italic;
    color: var(--text-light);
}

.bibliography-note p {
    margin: 0 auto;
    max-width: 560px;
}

[data-theme="dark"] .books-button-subtext {
    opacity: 0.92;
}

[data-theme="dark"] .bibliography-resources {
    background: transparent;
    box-shadow: none;
}

[data-theme="dark"] .bibliography-resources h3 {
    color: var(--text-dark);
}

[data-theme="dark"] .bibliography-note {
    color: rgba(236, 240, 241, 0.7);
}

#about .container,
#publications .container,
#podcasts .container,
#media .container,
#contact .container {
    position: relative;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 32px;
    padding: 3rem 3rem 3.5rem;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

[data-theme="dark"] #about .container,
[data-theme="dark"] #publications .container,
[data-theme="dark"] #podcasts .container,
[data-theme="dark"] #media .container,
[data-theme="dark"] #contact .container {
    background: rgba(24, 32, 46, 0.9);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}


.publication-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.category-card {
    display: block;
    text-decoration: none;
    background: white;
    padding: 2.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border-left: 5px solid var(--accent-color);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--transition-primary);
    /* Ajout d'un effet de mise en avant subtil */
    transform: translateY(0);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(201, 48, 44, 0.03) 50%, transparent 100%);
    opacity: 0;
    transition: var(--transition-secondary);
}





.category-card .category-icon {
    font-size: 3rem;
    margin-bottom: 1.2rem;
    display: block;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Effets de survol des cartes de catégories retirés */
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-left-width: 8px;
}

.category-card:hover::before {
    opacity: 1;
}

.category-card:hover .category-icon {
    opacity: 1;
}

/* Couleurs naturelles pour les icônes de catégories */
.category-card:nth-child(1) .category-icon {
    color: #e67e22;
}

/* Orange pour livre */
.category-card:nth-child(2) .category-icon {
    color: #3498db;
}

/* Bleu pour dossier */
.category-card:nth-child(3) .category-icon {
    color: #27ae60;
}

/* Vert pour article */
.category-card:nth-child(4) .category-icon {
    color: #9b59b6;
}

/* Violet pour contributions */
.category-card:nth-child(5) .category-icon {
    color: #e74c3c;
}

/* Rouge pour média */
.category-card:nth-child(6) .category-icon {
    color: #34495e;
}

/* Gris foncé pour traductions */



.category-card .category-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.6rem;
    position: relative;
    z-index: 1;
}

.category-card .category-count {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}

/* --- Ressources en ligne --- */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.resource-card {
    background: white;
    padding: 2.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition-primary);
    border-top: 3px solid var(--accent-color);
    transform: translateY(0);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.resource-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(201, 48, 44, 0.03) 50%, transparent 100%);
    opacity: 0;
    transition: var(--transition-secondary);
}



.resource-card h3 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
}

.resource-card ul {
    list-style: none;
    padding: 0;
}

.resource-card li {
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    transition: all 0.2s ease;
}

.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-top-width: 5px;
}

.resource-card:hover::before {
    opacity: 1;
}

.resource-card a {
    color: var(--text-dark);
    text-decoration: none;
    transition: var(--transition-secondary);
    display: inline-flex;
    align-items: center;
}



.resource-card i {
    margin-right: 10px;
    transition: transform 0.3s ease;
    width: 20px;
    display: inline-block;
}

/* Couleurs naturelles pour les icônes de ressources */
.fas.fa-book {
    color: #e67e22;
}

/* Orange pour livres */
.fas.fa-file-alt {
    color: #3498db;
}

/* Bleu pour fichiers */
.fas.fa-graduation-cap {
    color: #9b59b6;
}

/* Violet pour académique */
.fas.fa-database {
    color: #27ae60;
}

/* Vert pour base de données */
.fas.fa-archive {
    color: #34495e;
}

/* Gris pour archives */

.resource-card a:hover i {
    transform: translateX(3px);
}

/* --- Section Podcasts/Media --- */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
}

/* Section "Pages institutionnelles" - prend toute la largeur */
.media-card--full-width {
    grid-column: 1 / -1;
}

.media-card {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition-primary);
    border-top: 3px solid var(--accent-color);
    transform: translateY(0);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.media-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(201, 48, 44, 0.03) 50%, transparent 100%);
    opacity: 0;
    transition: var(--transition-secondary);
}



.media-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Full-width media card helper (Arts & Sciences) */
#arts-sciences .media-card--full {
    grid-column: 1 / -1;
}

.media-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-top-width: 5px;
}

.media-card:hover::before {
    opacity: 1;
}

.media-item {
    padding: 1.2rem 0;
    border-bottom: 1px dashed #e0e0e0;
    transition: var(--transition-secondary);
}

.seminar-event-card {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--card-bg, rgba(255, 255, 255, 0.95));
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.seminar-event-header {
    margin-bottom: 1.5rem;
}

.seminar-event-title {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: -0.01em;
}

.seminar-event-date {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}

.seminar-event-location {
    margin-bottom: 1rem;
}

.seminar-event-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.seminar-event-media {
    flex: 0 0 300px;
    max-width: 340px;
}

.seminar-event-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.seminar-event-text {
    flex: 1;
    min-width: 300px;
    min-width: min(300px, 100%);
}

.seminar-event-heading {
    margin-bottom: 1rem;
    color: var(--accent-color);
}

.seminar-event-paragraph {
    margin-bottom: 1rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.seminar-event-note {
    margin-bottom: 1rem;
    font-style: italic;
}

@media (max-width: 600px) {
    .media-card {
        padding: 1.8rem;
    }

    .media-card h3 {
        font-size: 1.25rem;
        margin-bottom: 1.1rem;
    }

    .seminar-event-card {
        padding: 1.2rem;
    }

    .seminar-event-title {
        font-size: 1.1rem;
        line-height: 1.25;
    }

    .seminar-event-date {
        font-size: 1rem;
    }

    .seminar-event-content {
        flex-direction: column;
        gap: 1.2rem;
    }

    .seminar-event-media {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .seminar-event-text {
        min-width: 0;
        max-width: 100%;
    }

    .seminar-event-paragraph {
        text-align: left;
    }
}

.media-item--with-thumb {
    display: grid;
    grid-template-columns: minmax(84px, 130px) 1fr;
    gap: 1.1rem;
    align-items: flex-start;
}

.media-item-thumb {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.media-item-thumb img {
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    display: block;
}

.media-item:last-child {
    border-bottom: none;
}



@media (max-width: 640px) {
    .media-item--with-thumb {
        grid-template-columns: minmax(68px, 110px) 1fr;
        gap: 0.9rem;
    }

    .media-item-thumb {
        border-radius: 12px;
    }

    .media-item-thumb img {
        max-height: 100px;
    }
}

.media-title {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

.media-source {
    font-size: 0.95rem;
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 0.5rem;
}

.media-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.media-link:hover {
    transform: translateX(3px);
}



/* --- Système de particules corrigé --- */
#teaching,
#arts-sciences,
#research {
    position: relative;
    overflow: hidden;
    background: transparent !important;
}

.particles-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    background: radial-gradient(circle, rgba(201, 48, 44, 0.8), transparent);
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat 15s linear infinite;
}

.particle:nth-child(odd) {
    animation-duration: 12s;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.7), transparent);
}

.particle:nth-child(3n) {
    animation-duration: 18s;
    background: radial-gradient(circle, rgba(155, 89, 182, 0.6), transparent);
}

.particle:nth-child(4n) {
    animation-duration: 20s;
    background: radial-gradient(circle, rgba(46, 204, 113, 0.5), transparent);
}

.particle:nth-child(5n) {
    animation-duration: 14s;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.6), transparent);
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) rotate(0deg) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
        transform: translateY(90vh) rotate(36deg) scale(1);
    }

    90% {
        opacity: 1;
        transform: translateY(10vh) rotate(324deg) scale(1);
    }

    100% {
        transform: translateY(-10vh) rotate(360deg) scale(0);
        opacity: 0;
    }
}

#teaching .container,
#arts-sciences .container,
#research .container {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 3rem;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}

#teaching .course-card,
#arts-sciences .media-card,
#research .timeline-content-modern {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
}

/* Better reading comfort for Encres de Chine text */
#arts-sciences .media-description p {
    line-height: 1.75;
    margin: 0 0 1rem 0;
}

#teaching .course-card:hover,


/* --- Section Enseignements --- */
.teaching-subtitle {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-color);
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.teaching-subtitle--past {
    margin-top: 4rem;
}

.current-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.past-courses-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.course-card {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 4px solid var(--accent-color);
    display: flex;
    align-items: flex-start;
    gap: 1.8rem;
    position: relative;
    overflow: hidden;
    transform: none;
}

.course-card::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(201, 48, 44, 0.1) 0%, transparent 50%);
    transition: top 0.5s ease;
}





.course-icon {
    font-size: 2.8rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 50px;
    text-align: center;
    transition: transform 0.3s ease;
}

/* Couleurs naturelles pour les icônes de cours */
.fa-scales-balanced {
    color: #34495e;
}

/* Gris foncé pour justice */
.fa-search {
    color: #3498db;
}

/* Bleu pour recherche */
.fa-pen-nib {
    color: #e67e22;
}

/* Orange pour écriture */
.fa-landmark-dome {
    color: #e67e22;
}

/* Orange pour histoire/patrimoine */
.fa-masks-theater {
    color: #e74c3c;
}

/* Rouge pour théâtre/culture */
.fa-flag {
    color: #3498db;
}

/* Bleu pour nations/politique */
.fa-clipboard-list {
    color: #27ae60;
}

/* Vert pour design/méthode */



.course-card-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.6rem;
    font-family: 'Playfair Display', serif;
}

.course-card-details {
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

/* --- Arts et Sciences Section Styles --- */
.arts-sciences-subsection {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--bg-light);
}

.arts-sciences-subsection h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
    text-align: center;
    font-family: 'Playfair Display', serif;
}

.cine-club-box {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

.cine-club-box h4 {
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.exhibition-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    border-left: 4px solid var(--accent-color);
}

.exhibition-card h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.exhibition-card .contribution-title {
    font-style: italic;
    color: var(--text-dark);
    margin: 1rem 0;
}

/* Arts & Sciences — Dark theme fixes */
[data-theme="dark"] #arts-sciences .arts-sciences-subsection h3,
[data-theme="dark"] #arts-sciences .exhibition-card h4 {
    color: var(--text-dark);
}

[data-theme="dark"] #arts-sciences .exhibition-card,
[data-theme="dark"] #arts-sciences .cine-club-box {
    background: var(--bg-light) !important;
    color: var(--text-dark);
}

[data-theme="dark"] #arts-sciences .exhibition-card .contribution-title {
    color: var(--text-light);
}



/* --- Contact Section Modern Split Layout --- */
.contact {
    background: linear-gradient(to bottom, var(--bg-light), var(--bg-lighter));
    position: relative;
    padding: 6rem 0;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 6rem;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto;
}

/* Left Side: Contact Info (Clean Text) */
.contact-info {
    position: relative;
    padding-top: 1rem;
}

.contact-info h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 600;
}

.contact-info h3::after {
    display: none;
}

.contact-info p {
    color: var(--text-light);
    margin-bottom: 3rem;
    line-height: 1.8;
    font-size: 1.1rem;
}

.contact-links-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 1rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.05);
}

.contact-item:hover {
    transform: translateX(10px);
    background: white;
    box-shadow: var(--shadow-sm);
    border-color: rgba(201, 48, 44, 0.1);
}

.contact-icon-wrapper {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    font-size: 1.2rem;
    color: var(--accent-color);
    transition: transform 0.3s ease;
}

.contact-item:hover .contact-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: var(--accent-color);
    color: white;
}

.contact-item span {
    font-weight: 500;
    font-size: 1.05rem;
}

/* Right Side: Modern Form */
.contact-form {
    background: white;
    padding: 3.5rem;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.03);
}

.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-accent));
}

.contact-form h3 {
    color: var(--primary-color);
    margin-top: 0.6rem;
    margin-bottom: 2.5rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    text-align: center;
}

.form-group {
    margin-bottom: 2rem;
    position: relative;
}

.hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.form-group--recaptcha {
    display: flex;
    justify-content: center;
}

.form-group label {
    display: block;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    background: #fafafa;
    color: var(--text-dark);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    background: white;
    box-shadow: 0 8px 20px rgba(201, 48, 44, 0.08);
}

.submit-btn {
    width: 100%;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 1.2rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 10px 25px rgba(26, 35, 50, 0.2);
    position: relative;
    overflow: hidden;
}

.submit-btn:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(201, 48, 44, 0.3);
}

/* Dark Mode Adjustments */
[data-theme="dark"] .contact {
    background: var(--bg-lighter);
}

[data-theme="dark"] .contact-info h3,
[data-theme="dark"] .contact-item {
    color: var(--text-dark);
}

[data-theme="dark"] .contact-item {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.05);
}

[data-theme="dark"] .contact-icon-wrapper {
    background: var(--bg-light);
}

[data-theme="dark"] .contact-form {
    background: var(--bg-light);
    border-color: rgba(255,255,255,0.05);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

[data-theme="dark"] .contact-form h3 {
    color: var(--text-dark);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.1);
    color: white;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus {
    background: rgba(0,0,0,0.3);
    border-color: var(--accent-color);
}



@media (max-width: 900px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .contact-info {
        text-align: center;
        padding-top: 0;
    }
    
    .contact-links-group {
        align-items: center;
    }
    
    .contact-item {
        width: 100%;
        max-width: 400px;
    }
    
    .contact-form {
        padding: 2rem;
    }
}




.form-status {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-left: 4px solid transparent;
}

.form-status p {
    margin: 0;
}

.form-status ul {
    margin: 0;
    padding-left: 1.25rem;
}

.form-status__icon {
    font-size: 1.4rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.form-status__content {
    flex: 1;
}

.form-status--success {
    background: #e8f6ef;
    border: 1px solid #27ae60;
    color: #1f6b46;
    border-left-color: #27ae60;
    box-shadow: 0 8px 20px rgba(39, 174, 96, 0.12);
}

.form-status--error {
    background: #fdecea;
    border: 1px solid #e74c3c;
    color: #8a1e13;
    border-left-color: #e74c3c;
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.12);
}

[data-theme="dark"] .form-status--success {
    background: rgba(39, 174, 96, 0.15);
    border-color: rgba(39, 174, 96, 0.6);
    color: #a9e2c5;
    border-left-color: rgba(39, 174, 96, 0.9);
    box-shadow: none;
}

[data-theme="dark"] .form-status--error {
    background: rgba(231, 76, 60, 0.12);
    border-color: rgba(231, 76, 60, 0.6);
    color: #f5b5ad;
    border-left-color: rgba(231, 76, 60, 0.9);
    box-shadow: none;
}

/* --- Footer --- */
.footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0f1419 100%);
    color: white;
    padding: 4rem 0 2rem;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5" x="10" y="10" width="80" height="80"/><rect fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5" x="20" y="20" width="60" height="60"/><rect fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5" x="30" y="30" width="40" height="40"/></svg>') repeat;
    background-size: 100px 100px;
    opacity: 0.1;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.footer-section h4 {
    margin-bottom: 1.5rem;
    color: white;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    position: relative;
    padding-bottom: 0.8rem;
}

.footer-section h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
}

.footer-section p {
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 0.8rem;
}

.footer-section ul li a {
    color: white;
    text-decoration: none;
    opacity: 0.9;
    transition: var(--transition-primary);
    font-size: 0.95rem;
    display: inline-block;
    padding: 0.2rem 0;
}

.footer-section ul li a:hover {
    opacity: 1;
    text-decoration: underline;
}



.footer-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.footer-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    border-radius: 50%;
    transition: var(--transition-primary);
    font-size: 1.3rem;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.footer-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: var(--transition-secondary);
}

.footer-links a:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(201, 48, 44, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.footer-links a:hover::before {
    left: 100%;
}



.footer-bottom {
    text-align: center;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.85;
    position: relative;
    z-index: 2;
}

.footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.footer-bottom p {
    margin: 0.4rem 0;
    font-size: 0.9rem;
    transition: var(--transition-secondary);
}

.footer-bottom p:hover {
    opacity: 1;
}

.footer-bottom p:first-child {
    font-weight: 600;
    font-size: 1rem;
}

/* --- Publication Overlay --- */
#publication-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 2rem;
}

#publication-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.overlay-container {
    background: white;
    border-radius: 20px;
    max-width: 900px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.overlay-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2c3e50 100%);
    padding: 2rem;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.overlay-header h2 {
    color: white;
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.close-overlay {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.3s ease;
    line-height: 1;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.overlay-content {
    padding: 3rem;
    overflow-y: auto;
    flex: 1;
    line-height: 1.7;
}

.overlay-content h3 {
    color: var(--primary-color);
    margin: 2rem 0 1.5rem 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
}

.overlay-content h3:first-child {
    margin-top: 0;
}

.overlay-content ol {
    list-style: decimal;
    padding-left: 2em;
    margin-bottom: 2rem;
}

.overlay-content ul {
    list-style: disc;
    padding-left: 2em;
    margin-bottom: 2rem;
}

.overlay-content li {
    padding-left: 0.5em;
    margin-bottom: 1.8rem;
    border-bottom: 1px dashed #e0e0e0;
    padding-bottom: 1.5rem;
    line-height: 1.8;
}

.overlay-highlight {
    background: rgba(201, 48, 44, 0.08);
    border-radius: 14px;
    box-shadow: 0 0 0 4px rgba(201, 48, 44, 0.12);
    border-bottom-color: rgba(201, 48, 44, 0.35);
}

[data-theme="dark"] .overlay-highlight {
    background: rgba(231, 148, 127, 0.16);
    box-shadow: 0 0 0 4px rgba(231, 148, 127, 0.26);
    border-bottom-color: rgba(231, 148, 127, 0.35);
}

.overlay-content li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.overlay-content strong {
    color: var(--accent-color);
    display: inline;
    margin-right: 0.3rem;
    font-weight: 600;
}

.overlay-content em {
    font-style: italic;
    font-weight: 500;
    color: var(--text-light);
}

.overlay-content a {
    color: #2196F3;
    text-decoration: none;
    transition: all 0.2s ease;
    word-break: break-word;
}



.overlay-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.overlay-content blockquote {
    border-left: 4px solid var(--accent-color);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--text-light);
}

body.overlay-active {
    overflow: hidden;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .nav-links {
        display: none;
    }

    /* Cacher les contrôles fixes sur mobile */
    .top-controls {
        display: none !important;
    }

    .back-to-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
        font-size: 1.6rem;
    }

    .search-container {
        padding: 0 2rem;
    }

    .search-input {
        padding: 0.8rem 2.5rem 0.8rem 1rem;
        font-size: 0.9rem;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .footer-links {
        justify-content: center;
    }

    .timeline-connector {
        left: 2rem;
    }

    .timeline-item-modern {
        flex-direction: column !important;
        align-items: flex-start;
        padding-left: 4rem;
    }

    .timeline-content-modern {
        width: 100%;
    }

    .timeline-dot {
        left: 2rem;
    }

    .about-image-floated {
        float: none;
        width: 90%;
        max-width: 400px;
        margin: 0 auto 2.5rem auto;
        display: block;
    }

    .about-article-wrapper p {
        text-align: left;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2rem;
    }

    /* Correction pour les grids mobiles */
    .current-courses-grid,
    .past-courses-grid,
    .resources-grid,
    .media-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Masquer les catégories de publications sur mobile */
    .publication-category-grid {
        display: none;
    }

    /* Ajustements spécifiques pour les cartes de publication sur mobile */
    .category-card {
        padding: 2.5rem;
        margin-bottom: 1.5rem;
        border-radius: 20px;
        box-shadow: var(--shadow-md);
        border-top: 4px solid var(--accent-color);
        display: flex;
        align-items: flex-start;
        gap: 1.8rem;
        position: relative;
        overflow: hidden;
    }

    /* Effets de survol et animations retirés pour les cartes de catégories */
    .category-card::before {
        display: none;
    }

    .category-card:hover {
        box-shadow: var(--shadow-md);
        opacity: 1;
    }

    .category-card .category-icon {
        font-size: 2.8rem;
        margin-top: 0.2rem;
        flex-shrink: 0;
        width: 50px;
        text-align: center;
    }

    .category-card:hover .category-icon {
        opacity: 1;
    }

    .category-card .category-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 0.6rem;
        font-family: 'Playfair Display', serif;
    }

    .category-card .category-count {
        color: var(--text-light);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
    }

    /* Couleurs naturelles pour les icônes de catégories sur mobile */
    .category-card:nth-child(1) .category-icon {
        color: #e67e22;
    }

    /* Orange pour livre */
    .category-card:nth-child(2) .category-icon {
        color: #3498db;
    }

    /* Bleu pour dossier */
    .category-card:nth-child(3) .category-icon {
        color: #27ae60;
    }

    /* Vert pour article */
    .category-card:nth-child(4) .category-icon {
        color: #9b59b6;
    }

    /* Violet pour contributions */
    .category-card:nth-child(5) .category-icon {
        color: #e74c3c;
    }

    /* Rouge pour média */
    .category-card:nth-child(6) .category-icon {
        color: #34495e;
    }

    /* Gris foncé pour traductions */

    /* Réduction du padding des sections sur mobile */
    .section {
        padding: 3rem 0;
    }

    /* Ajustement des containers avec particules sur mobile */
    #teaching .container,
    #arts-sciences .container,
    #research .container {
        padding: 1.8rem clamp(0.75rem, 5vw, 1.6rem);
        margin: 0 clamp(0.3rem, 3.5vw, 0.8rem);
    }

    /* Overlay responsive */
    #publication-overlay {
        padding: 1rem;
    }

    .overlay-container {
        max-height: 90vh;
    }

    .overlay-header {
        padding: 1.5rem;
    }

    .overlay-content {
        padding: 2rem;
    }
}

/* Offset for sticky header when jumping to anchors */
section[id] {
    scroll-margin-top: 90px;
}

@media screen and (max-width: 768px) {
    section[id] {
        scroll-margin-top: 70px;
    }
}

/* --- Performance et accessibilité --- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible pour l'accessibilité */
.theme-toggle:focus-visible,
.lang-toggle:focus-visible,
.back-to-top:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

/* --- Styles pour le rendu inline des publications --- */
.publications-content ul {
    margin: 0 0 1.25rem 1.25rem;
}

.publications-content li+li {
    margin-top: .35rem;
}

.overlay-highlight {
    background: var(--accent-color, #ffd54f);
    transition: background .8s ease;
}

.section-subtitle {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
}

/* --- Styles pour le contenu des publications affiché inline --- */
.publications-content {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 1rem;
    box-shadow: var(--shadow-md);
    line-height: 1.7;
    border-left: 4px solid var(--accent-color);
}

[data-theme="dark"] .publications-content {
    background: rgba(44, 62, 80, 0.9);
    color: var(--text-dark);
}

.publications-content h3 {
    color: var(--primary-color);
    margin: 2rem 0 1.5rem 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
}

.publications-content h3:first-child {
    margin-top: 0;
}

.publications-content ol {
    list-style: decimal;
    padding-left: 2em;
    margin-bottom: 2rem;
}

.publications-content ul {
    list-style: disc;
    padding-left: 2em;
    margin-bottom: 2rem;
}

.publications-content li {
    padding-left: 0.5em;
    margin-bottom: 1.8rem;
    border-bottom: 1px dashed #e0e0e0;
    padding-bottom: 1.5rem;
    line-height: 1.8;
}

.publications-content li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.publications-content strong {
    color: var(--accent-color);
    display: inline;
    margin-right: 0.3rem;
    font-weight: 600;
}

.publications-content em {
    font-style: italic;
    font-weight: 500;
    color: var(--text-light);
}

.publications-content a {
    color: #2196F3;
    text-decoration: none;
    transition: all 0.2s ease;
    word-break: break-word;
}



.publications-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.publications-content blockquote {
    border-left: 4px solid var(--accent-color);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--text-light);
}

/* --- Responsive pour le contenu inline --- */
@media screen and (max-width: 768px) {
    .publications-content {
        padding: 1.5rem;
        margin-top: 0.8rem;
    }

    .publications-content h3 {
        font-size: 1.2rem;
    }

    .publications-content li {
        margin-bottom: 1.2rem;
        padding-bottom: 1rem;
    }
}

/* --- Bandeau d'actualités dynamique --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.news-banner {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    margin: 5rem 0 -1rem 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: none;
    background: var(--primary-color);
}

.news-carousel {
    display: block;
}

.news-carousel-label {
    position: absolute;
    top: clamp(1rem, 2.4vw, 1.6rem);
    left: clamp(1rem, 4vw, 2.4rem);
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(15, 20, 25, 0.58);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.news-carousel-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.9);
}

.news-carousel-slides {
    position: relative;
    width: 100%;
    min-height: inherit;
}

.news-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: inherit;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

.news-slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.news-kicker {
    margin: 0 0 0.45rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.news-carousel-controls {
    position: absolute;
    right: clamp(1rem, 4vw, 2rem);
    bottom: 1rem;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0.5rem;
    border-radius: 999px;
    background: rgba(15, 20, 25, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
}

.news-carousel-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.news-carousel-btn:hover,
.news-carousel-btn:focus-visible {
    background: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.news-carousel-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.news-carousel-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

.news-carousel-dot.is-active {
    width: 22px;
    border-radius: 999px;
    background: #fff;
}

.news-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.news-banner-content {
    position: relative;
    z-index: 2;
    /* base */
    color: white;
    padding: clamp(1.35rem, 2.4vw, 1.9rem) clamp(2rem, 5vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.2rem, 3.5vw, 2rem);
    background: linear-gradient(135deg, rgba(26, 35, 50, 0.92) 0%, rgba(44, 62, 80, 0.88) 100%);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    width: min(calc(100% - 2rem), 1280px);
    margin: 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.15);
    min-height: 145px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

/* tout le contenu interne (texte + bouton) passe au-dessus des couches décoratives */
.news-banner-content>* {
    position: relative;
    z-index: 3;
}

.news-banner-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(52, 152, 219, 0.1) 0%,
            rgba(155, 89, 182, 0.05) 50%,
            rgba(46, 204, 113, 0.03) 100%);
    border-radius: 18px;
    opacity: 0.6;
    z-index: 1;
}

.news-banner-content::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            rgba(52, 152, 219, 0.3) 0%,
            transparent 25%,
            transparent 75%,
            rgba(155, 89, 182, 0.3) 100%);
    border-radius: 22px;
    z-index: 1;
    opacity: 0.8;
    animation: shimmerBorder 8s linear infinite;
}

@keyframes shimmerBorder {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.news-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: center;
    padding-right: 1rem;
    position: relative;
    z-index: 3;
}

.news-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: .7rem;
    padding: 0;
    border-radius: 0;
    font-weight: 500;
    letter-spacing: 0.14em;
    border: none;
    background: transparent;
    box-shadow: none;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    position: relative;
    cursor: default;
    user-select: none;
    pointer-events: none;
}

/* Indicateur sobre: point lumineux + texte actuel, sans gélule */
.news-badge--info::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.9);
}

.news-badge--info::after {
    /* un seul libellé court, défini en HTML via data-* ou texte direct, pas de répétition "Actualité" ici */
    content: attr(data-label);
    font-size: .68rem;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.7);
}

.news-badge--info {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    border-left: 4px solid #2980b9;
}

/* (ancienne icône remplacée par la pastille "en ce moment") */

.news-badge-container {
    position: absolute;
    top: -0.5rem;
    left: 1.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    z-index: 6;
}

.news-book-mini-link {
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-book-mini {
    width: 240px;
    height: 156px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}

.news-book-mini::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(52, 152, 219, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

.news-book-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-summary {
    max-width: 54rem;
    margin: 0.7rem 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.96rem;
    line-height: 1.6;
}

.news-media-stack {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}

.news-podcast-mini-link {
    flex-shrink: 0;
    width: 100%;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-podcast-mini {
    position: relative;
    width: 260px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.42);
}

.news-podcast-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.news-podcast-play {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.92);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}

.news-podcast-mini-link:hover .news-podcast-mini {
    border-color: rgba(231, 76, 60, 0.58);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}

.news-podcast-mini-link:hover .news-podcast-mini img {
    transform: scale(1.04);
}

.news-media-stack .news-book-mini {
    width: 210px;
    height: 138px;
}

.news-cta--podcast {
    background: linear-gradient(135deg, #c9302c 0%, #8e2b88 100%);
    border-color: rgba(255, 255, 255, 0.22);
}



.news-book-mini-link:hover .news-book-mini {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    border-color: rgba(52, 152, 219, 0.4);
}

.news-book-mini-link:hover .news-book-mini::after {
    opacity: 1;
}

.news-book-mini-link:hover .news-book-mini img {
    transform: scale(1.05);
}

.news-text-section {
    flex: 1;
    min-width: 0;
}

.news-action-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 0;
    position: relative;
    z-index: 3;
}

.news-cta-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

/* Positionne l'indicateur plus haut, détaché du bouton "En savoir plus" */
.news-action-container .news-badge-container {
    position: absolute;
    top: -1.9rem;
    right: 0.2rem;
    left: auto;
    gap: 0.4rem;
}

.news-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.42rem, 2.25vw, 1.9rem);
    line-height: 1.3;
    margin: 0 0 .5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.news-title .desktop-only {
    display: inline;
}

.news-title-book {
    font-style: italic;
}

.news-title-subtitle {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: clamp(1.02rem, 1.55vw, 1.24rem);
    line-height: 1.35;
    font-weight: 600;
}

@media (max-width: 768px) {
    .news-title .desktop-only {
        display: none;
    }

    .news-title-subtitle {
        font-size: clamp(0.92rem, 3.6vw, 1.05rem);
    }
}

.news-meta {
    margin: 0;
    opacity: 0.95;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.news-meta .fas,
.news-meta .far {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin-right: 0.2rem;
}

.news-meta .news-sep {
    padding: 0 0.4rem;
    font-weight: 700;
}

.news-cta {
    display: inline-block;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border: 2px solid rgba(231, 76, 60, 0.35);
    padding: .5rem .9rem;
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    backdrop-filter: none;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.news-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
    animation: pulse 1.5s infinite;
}

.news-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@keyframes pulse {
    0% {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }

    50% {
        box-shadow: 0 8px 20px rgba(231, 76, 60, 0.6);
    }

    100% {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }
}


.news-banner+.hero {
    padding-top: 60px;
}

/* Mode sombre pour le bandeau d'actualité */
[data-theme="dark"] .news-banner {
    background: var(--primary-color);
}

[data-theme="dark"] .news-banner-content {
    background: rgba(26, 35, 50, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .news-badge {
    background: var(--accent-color);
    color: white;
}

[data-theme="dark"] .news-badge--info {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    border-left: 4px solid #2980b9;
}

[data-theme="dark"] .news-cta {
    background: var(--secondary-accent);
    border-color: rgba(255, 255, 255, .3);
    color: white;
}



/* Responsive pour le bandeau d'actualité */
@media (max-width: 768px) {
    .news-banner {
        min-height: 275px;
        padding: 0;
        border-radius: 0;
        margin: 5rem 0 -1rem 0;
        overflow: visible;
    }

    .news-section-wrapper,
    .news-section-container {
        overflow: visible;
    }

    .news-carousel-controls {
        position: relative;
        left: 50%;
        right: auto;
        bottom: auto;
        width: max-content;
        max-width: calc(100% - 2rem);
        margin: 0.8rem 0 1rem;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
    }

    .news-carousel-label {
        top: 0.85rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100% - 2rem);
        justify-content: center;
        white-space: nowrap;
        font-size: 0.66rem;
        letter-spacing: 0.1em;
    }

    .news-banner-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 2.4rem clamp(0.8rem, 7vw, 1.6rem) 1.35rem;
        background: rgba(26, 35, 50, 0.9);
        min-height: 170px;
        border-radius: 14px;
        width: calc(100% - 2rem);
        margin: 3rem 1rem 0 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: visible;
    }

    .news-info {
        min-width: auto;
        align-items: center;
        justify-content: center;
        padding-right: 0;
        text-align: center;
    }

    .news-text-section {
        margin-bottom: 0.5rem;
        text-align: center;
    }

    .news-title {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
        color: white;
        text-align: center;
    }

    .news-meta {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.85);
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    /* Badge "Actualité" tout en haut du container */
    .news-banner-content .news-badge {
        position: absolute;
        top: -0.9rem;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, var(--accent-color) 0%, #c0392b 100%);
        padding: 0.4rem 1rem;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        z-index: 10;
    }

    .news-banner-content .news-badge::before {
        display: none;
    }

    /* Image du livre : agrandie et centrée */
    .news-book-mini-link {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        width: 100%;
        order: 1;
        margin-bottom: 0.5rem;
    }

    .news-book-mini {
        width: 200px;
        height: 130px;
        border-radius: 10px;
        border: 2px solid rgba(255, 255, 255, 0.25);
    }

    .news-summary {
        margin: 0.5rem auto 0;
        font-size: 0.82rem;
        text-align: center;
    }

    .news-media-stack {
        width: 100%;
        flex: none;
        order: 1;
        gap: 0.65rem;
    }

    .news-podcast-mini-link {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .news-podcast-mini {
        width: min(100%, 260px);
    }

    .news-media-stack .news-book-mini {
        width: 180px;
        height: 118px;
    }

    /* Texte centré */
    .news-text-section {
        order: 2;
    }

    /* Boutons centrés */
    .news-action-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
        margin-top: 0.5rem;
        width: 100%;
        order: 3;
        position: static; /* Annule le position: relative du desktop */
    }

    /* Badge "Actualité" tout en haut du container (au-dessus de l'image) */
    .news-banner-content .news-badge {
        position: absolute;
        top: -0.6rem;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, var(--accent-color) 0%, #c0392b 100%);
        padding: 0.4rem 1rem;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        z-index: 10;
    }

    /* Boutons d'action */
    .news-cta-row {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .news-cta {
        font-size: 0.72rem;
        padding: .4rem .65rem;
        border-width: 1px;
        white-space: nowrap;
    }

    /* Bouton Commander centré */
    .commander-btn {
        font-size: 0.8rem;
        padding: 0.5rem 1.2rem;
        align-self: center;
    }

    [data-theme="dark"] .news-banner-content {
        background: rgba(26, 35, 50, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .news-badge-container {
        display: none;
    }
}

/* --------------------------------------------------
   Books page
   -------------------------------------------------- */
.books-wrapper {
    display: grid;
    gap: 3rem;
}

.books-intro {
    max-width: 820px;
    margin: 0 auto 2rem;
    text-align: center;
}

.books-intro p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-light);
}

.books-overview {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.overview-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(8px);
}

[data-theme="dark"] .overview-card {
    background: rgba(27, 38, 53, 0.9);
}

.overview-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.overview-card ol {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.5rem;
}

.overview-card a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}



.books-grid {
    display: grid;
    gap: 3rem;
}

.book-card {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(200px, 260px) 1fr;
    align-items: start;
    padding: 2.5rem;
    border-radius: 32px;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 249, 252, 0.92) 100%);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .book-card {
    background: linear-gradient(140deg, rgba(19, 27, 40, 0.94) 0%, rgba(32, 43, 58, 0.9) 100%);
    box-shadow: var(--shadow-md);
}

.book-number {
    position: absolute;
    top: -20px;
    left: 24px;
    font-size: 4.5rem;
    font-weight: 900;
    color: rgba(201, 48, 44, 0.1);
    pointer-events: none;
}

[data-theme="dark"] .book-number {
    color: rgba(255, 255, 255, 0.06);
}

/* Effet 3D magnifique sur les couvertures de livres - Ouverture de livre ÉPAIS */
.book-cover {
    position: relative;
    perspective: 2500px;
    transform-style: preserve-3d;
    display: inline-block;
    z-index: 10;
    margin-bottom: 20px;
    margin-right: 30px;
    /* Espace pour l'épaisseur visible */
}

.book-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px 8px 8px 3px;
    box-shadow:
        8px 8px 20px rgba(0, 0, 0, 0.2),
        inset 4px 0 3px rgba(255, 255, 255, 0.3),
        inset -2px 0 3px rgba(0, 0, 0, 0.15);
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    transform-origin: left center;
    will-change: transform;
    backface-visibility: hidden;
    position: relative;
    z-index: 3;
}

/* Éclat de lumière */
.book-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(115deg,
            transparent 0%,
            transparent 35%,
            rgba(255, 255, 255, 0.9) 50%,
            transparent 65%,
            transparent 100%);
    background-size: 250% 100%;
    background-position: -150% 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, background-position 1s ease;
    z-index: 4;
    border-radius: 3px 8px 8px 3px;
}

/* ÉPAISSEUR DU LIVRE - TRANCHE DROITE (beaucoup plus épaisse) */
.book-cover::before {
    content: '';
    position: absolute;
    top: 0;
    right: -60px;
    /* Beaucoup plus épais */
    bottom: 0;
    width: 60px;
    background:
        repeating-linear-gradient(90deg,
            #f8f8f8 0px,
            #e8e8e8 0.5px,
            #f5f5f5 1px,
            #e0e0e0 1.5px,
            #f0f0f0 2px,
            #d8d8d8 2.5px,
            #f8f8f8 3px),
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0) 10%,
            rgba(0, 0, 0, 0) 90%,
            rgba(0, 0, 0, 0.05) 100%);
    transform: rotateY(90deg) translateX(30px) translateZ(-29px);
    transform-origin: left center;
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0;
    z-index: 1;
    box-shadow:
        inset -2px 0 8px rgba(0, 0, 0, 0.15),
        inset 2px 0 4px rgba(255, 255, 255, 0.3),
        -5px 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 0 3px 3px 0;
}

/* ÉPAISSEUR DU LIVRE - TRANCHE DU BAS (beaucoup plus épaisse) */
.book-cover::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 0;
    width: 100%;
    height: 60px;
    background:
        repeating-linear-gradient(0deg,
            #f8f8f8 0px,
            #e8e8e8 0.5px,
            #f5f5f5 1px,
            #e0e0e0 1.5px,
            #f0f0f0 2px,
            #d8d8d8 2.5px,
            #f8f8f8 3px),
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0) 5%,
            rgba(0, 0, 0, 0) 95%,
            rgba(0, 0, 0, 0.08) 100%);
    transform: rotateX(90deg) translateZ(-30px) translateY(30px);
    transform-origin: top center;
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0;
    z-index: 1;
    box-shadow:
        inset 0 -2px 8px rgba(0, 0, 0, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 -5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 0 0 3px 3px;
}

/* État de survol - Ouverture du livre ÉPAIS */
.book-cover:hover img {
    transform: rotateY(-40deg) translateX(-15px) scale(1.08);
    box-shadow:
        -30px 35px 60px rgba(0, 0, 0, 0.4),
        inset 4px 0 3px rgba(255, 255, 255, 0.4),
        -5px 0 20px rgba(0, 0, 0, 0.15);
}

.book-cover:hover .book-shine {
    opacity: 1;
    background-position: 150% 0;
}

.book-cover:hover::before {
    opacity: 1;
    transform: rotateY(90deg) translateX(30px) translateZ(-29px);
}

.book-cover:hover::after {
    opacity: 1;
    transform: rotateX(90deg) translateZ(-30px) translateY(30px);
}

/* Mode sombre */
[data-theme="dark"] .book-cover img {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .book-cover::before,
[data-theme="dark"] .book-cover::after {
    background:
        repeating-linear-gradient(90deg,
            #c8c8c8 0px,
            #b8b8b8 0.5px,
            #c0c0c0 1px,
            #b0b0b0 1.5px,
            #b8b8b8 2px,
            #a8a8a8 2.5px,
            #c8c8c8 3px),
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0) 10%,
            rgba(0, 0, 0, 0) 90%,
            rgba(0, 0, 0, 0.1) 100%);
}

[data-theme="dark"] .book-cover:hover img {
    box-shadow: -30px 35px 70px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .book-shine {
    background: linear-gradient(115deg,
            transparent 0%,
            transparent 35%,
            rgba(255, 255, 255, 0.5) 50%,
            transparent 65%,
            transparent 100%);
}

/* Responsive */
@media (max-width: 768px) {
    .book-cover {
        perspective: 1500px;
        margin-right: 20px;
    }

    .book-cover::before {
        width: 40px;
        right: -40px;
    }

    .book-cover::after {
        height: 40px;
        bottom: -40px;
    }

    .book-cover:hover img {
        transform: rotateY(-30deg) translateX(-10px) scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {

    .book-cover img,
    .book-cover::before,
    .book-cover::after,
    .book-shine {
        transition: none;
        transform: none;
    }

    .book-cover:hover img {
        transform: scale(1.02);
    }

    .book-shine {
        display: none;
    }
}

.book-content {
    z-index: 1;
    display: grid;
    gap: 1.5rem;
}

.book-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    line-height: 1.3;
    margin: 0;
    color: var(--text-dark);
}

.book-meta {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
}

[data-theme="dark"] .book-meta {
    color: #f4a261;
}

.book-presentation p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: var(--text-dark);
    text-align: justify;
}

.book-presentation ul {
    margin: 0 0 1rem 1.2rem;
    color: var(--text-dark);
    line-height: 1.7;
}

[data-theme="dark"] .book-presentation p,
[data-theme="dark"] .book-presentation ul {
    color: var(--text-light);
}

.book-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.book-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.65rem 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.book-link.primary {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 10px 25px rgba(201, 48, 44, 0.25);
}



.book-link.secondary {
    background: rgba(201, 48, 44, 0.1);
    color: var(--accent-color);
}



.book-link.ghost {
    background: rgba(255, 255, 255, 0.6);
    color: var(--accent-color);
    border: 1px solid rgba(201, 48, 44, 0.3);
}

[data-theme="dark"] .book-link.ghost {
    background: rgba(19, 27, 40, 0.6);
    color: #f4a261;
    border-color: rgba(244, 162, 97, 0.4);
}



.book-link i {
    font-size: 0.95rem;
}

@media (max-width: 1024px) {
    .book-card {
        grid-template-columns: 1fr;
        padding: 2rem;
    }

    .book-cover {
        max-width: 260px;
    }
}

@media (max-width: 768px) {
    .books-wrapper {
        gap: 2.5rem;
    }

    .book-card {
        padding: 1.75rem;
        gap: 1.5rem;
    }

    .book-title {
        font-size: 1.6rem;
    }

    .book-number {
        font-size: 3.6rem;
        left: 16px;
        top: -12px;
    }

    .book-links {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .books-overview {
        grid-template-columns: 1fr;
    }

    .book-card {
        padding: 1.5rem;
    }

    .book-number {
        font-size: 3rem;
    }
}

/* --- Barre de progression --- */
.progress-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1002;
    backdrop-filter: blur(10px);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-accent));
    width: 0%;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(201, 48, 44, 0.5);
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8));
    animation: progressShine 2s infinite;
}

@keyframes progressShine {
    0% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(20px);
    }
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff3b3f 0%, #ff6b6b 35%, #ff9a76 70%, #ff4757 100%);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.6),
        0 0 24px rgba(255, 87, 87, 0.4),
        0 0 36px rgba(255, 71, 87, 0.2);
    border-radius: 999px;
    will-change: width;
    transition: width 0.15s ease-out;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Mode sombre pour la barre de progression */
[data-theme="dark"] .progress-bar-container {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .progress-bar {
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.7),
        0 0 25px rgba(255, 107, 107, 0.5),
        0 0 35px rgba(255, 107, 107, 0.3);
}

/* --- Conteneur et séparation pour la section d'actualité --- */
.news-section-wrapper {
    position: relative;
    background: linear-gradient(135deg,
            rgba(52, 152, 219, 0.08) 0%,
            rgba(155, 89, 182, 0.05) 50%,
            rgba(46, 204, 113, 0.03) 100%);
    padding: 1.5rem 0;
    margin: 1.5rem 0 2.5rem 0;
    border-radius: 0;
    overflow: hidden;
}

.news-section-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
            rgba(52, 152, 219, 0.1) 0%,
            transparent 25%,
            transparent 75%,
            rgba(155, 89, 182, 0.1) 100%);
    opacity: 0.3;
    animation: shimmerBackground 12s linear infinite;
}

@keyframes shimmerBackground {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.news-section-container {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    border: none;
    overflow: visible;
}

.news-section-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            #3498db 0%,
            #9b59b6 25%,
            #2ecc71 50%,
            #e67e22 75%,
            #e74c3c 100%);
    background-size: 200% 100%;
    animation: rainbowBorder 8s linear infinite;
}

@keyframes rainbowBorder {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* Neutraliser la barre décorative au-dessus du conteneur (plus de bloc blanc autour) */
.news-section-container::before,
.news-section-wrapper::after {
    display: none;
}

/* Séparation minimale avec la section hero: léger offset technique sous le header */
.news-section-wrapper {
    margin-top: 0;
    border-top: none;
    box-shadow: none;
}

.news-section-wrapper::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(52, 152, 219, 0.6) 20%,
            rgba(155, 89, 182, 0.6) 50%,
            rgba(46, 204, 113, 0.6) 80%,
            transparent 100%);
    animation: separatorGlow 4s ease-in-out infinite alternate;
}

@keyframes separatorGlow {
    0% {
        opacity: 0.6;
        transform: scaleX(0.8);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Mode sombre pour le conteneur de section */
[data-theme="dark"] .news-section-wrapper {
    background: linear-gradient(135deg,
            rgba(52, 152, 219, 0.12) 0%,
            rgba(155, 89, 182, 0.08) 50%,
            rgba(46, 204, 113, 0.05) 100%);
    border-top-color: rgba(52, 152, 219, 0.3);
    box-shadow: 0 -10px 40px rgba(52, 152, 219, 0.15);
}

[data-theme="dark"] .news-section-container {
    background: rgba(26, 35, 50, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .news-section-wrapper::after {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(52, 152, 219, 0.8) 20%,
            rgba(155, 89, 182, 0.8) 50%,
            rgba(46, 204, 113, 0.8) 80%,
            transparent 100%);
}

/* Responsive pour le conteneur de section */
@media (max-width: 768px) {
    .news-section-wrapper {
        padding: 0;
        margin: 0;
    }

    .news-section-container {
        border-radius: 0;
        padding: 0;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .news-section-wrapper {
        padding: 0.8rem 0;
        margin: 0.8rem 0 1.5rem 0;
    }

    .news-section-container {
        border-radius: 14px;
        margin: 0 0.3rem;
        padding: 0 clamp(0.2rem, 2vw, 0.6rem);
        max-width: 98%;
    }
}

/* =========================================================
   NOUVELLE APPROACHE PARALLAXE - CSS PUR avec background-attachment: fixed
   ========================================================= */

.parallax-architecture-section {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    /* Par défaut, sera modifié par JS */
    height: var(--parallax-height, 60vh);
    margin: 3rem 0;
    /* Amélioration du rendu */
    will-change: transform, background-position;
    transform: translateZ(0);
    /* Force le rendu GPU */
    backface-visibility: hidden;
    perspective: 1000px;
}

.parallax-mobile-image {
    display: none;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Support natif pour navigateurs compatibles (fallback) */
.parallax-architecture-section:not(.parallax-js-enabled) {
    background-attachment: fixed;
}

/* Variante par défaut */
.parallax-architecture-variant-default {}

/* Overlay optionnel */
.parallax-architecture-has-overlay {
    position: relative;
}

.parallax-architecture-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* Support prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .parallax-architecture-section {
        background-attachment: scroll;
        transform: none;
        will-change: auto;
    }
}

/* Mobile: désactiver le fixed pour éviter les bugs iOS */
@media (max-width: 768px) {
    .parallax-architecture-section {
        height: auto;
        margin: 1.2rem 0;
        background-image: none !important;
        background-attachment: scroll;
        will-change: auto;
        transform: none;
    }

    .parallax-architecture-section.parallax-mobile-reduced {
        height: auto;
        margin: 1rem 0;
    }

    .parallax-mobile-image {
        display: block;
    }

    .parallax-architecture-overlay {
        display: none;
    }
}

@media (max-width: 480px) {
    .parallax-architecture-section {
        height: auto;
        margin: 1rem 0;
    }

    .parallax-architecture-section.parallax-mobile-reduced {
        height: auto;
        margin: 0.9rem 0;
    }
}

/* Amélioration pour les écrans haute densité */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .parallax-architecture-section {
        background-size: cover;
        background-position: center;
    }
}

/* --- Galerie d'architectures - Encres de Chine --- */
.architecture-gallery {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.gallery-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-md);
    background: var(--bg-light);
}



.gallery-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover .gallery-thumbnail {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            transparent 0%,
            transparent 60%,
            rgba(0, 0, 0, 0.7) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-number {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Mode sombre pour la galerie */
[data-theme="dark"] .gallery-item {
    background: var(--bg-light);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}



/* Responsive pour la galerie */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1.2rem;
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
}

/* Animation d'entrée pour les images de la galerie */

/* Animation d'entrée pour les images de la galerie */
@keyframes galleryFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gallery-item {
    animation: galleryFadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.gallery-item:nth-child(1) {
    animation-delay: 0.1s;
}

.gallery-item:nth-child(2) {
    animation-delay: 0.2s;
}

.gallery-item:nth-child(3) {
    animation-delay: 0.3s;
}

.gallery-item:nth-child(4) {
    animation-delay: 0.4s;
}

.gallery-item:nth-child(5) {
    animation-delay: 0.5s;
}

.gallery-item:nth-child(6) {
    animation-delay: 0.6s;
}

.gallery-item:nth-child(7) {
    animation-delay: 0.7s;
}

.gallery-item:nth-child(8) {
    animation-delay: 0.8s;
}

.gallery-item:nth-child(9) {
    animation-delay: 0.9s;
}

.gallery-item:nth-child(10) {
    animation-delay: 1.0s;
}

.gallery-item:nth-child(11) {
    animation-delay: 1.1s;
}

.gallery-item:nth-child(12) {
    animation-delay: 1.2s;
}

.gallery-item:nth-child(13) {
    animation-delay: 1.3s;
}

/* --- Navigation Moderne Améliorée --- */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.logo-icon {
    font-size: 2rem;
    background: var(--hero-name-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--navbar-logo);
    letter-spacing: -0.02em;
    transition: all 0.3s ease;
}

.logo::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

.logo:hover::after {
    width: 100%;
}

.logo:hover .logo-text {
    color: var(--accent-color);
    transform: translateY(-1px);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--navbar-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: transparent;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 48, 44, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover {
    color: var(--accent-color);
    background: rgba(201, 48, 44, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 48, 44, 0.15);
}



/* Sous-menus Dropdown */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000;
    padding: 0.25rem 0;
    margin-top: 0.25rem;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    color: var(--navbar-text);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    position: relative;
    border-left: 2px solid transparent;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

.dropdown-item:hover {
    background: rgba(201, 48, 44, 0.03);
    color: var(--accent-color);
    border-left-color: var(--accent-color);
    transform: translateX(2px);
}

.dropdown-item:hover::before {
    width: 2px;
}

.dropdown-item .nav-icon {
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
    margin: 0.25rem 0;
}

/* Icônes pour les éléments de menu */
.nav-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Menu Mobile Amélioré */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 420px;
    height: calc(100vh - 60px);
    background: var(--mobile-menu-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    overflow-y: auto;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu ul {
    list-style: none;
    padding: 1rem 0;
}

.mobile-menu .nav-item {
    margin-bottom: 0.5rem;
}

.mobile-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: var(--mobile-menu-text);
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.mobile-menu .nav-link:hover {
    background: rgba(201, 48, 44, 0.1);
    border-left-color: var(--accent-color);
    padding-left: 2rem;
}

/* Boutons de contrôle améliorés */
.nav-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.theme-toggle,
.lang-toggle {
    background: var(--navbar-bg);
    border: 2px solid rgba(201, 48, 44, 0.2);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    vertical-align: middle !important;
}

.theme-toggle:hover,
.lang-toggle:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: rotate(15deg) scale(1.1);
}

.theme-icon,
.lang-icon {
    transition: all 0.3s ease;
}

.theme-toggle:hover .theme-icon,
.lang-toggle:hover .lang-icon {
    transform: scale(1.2) rotate(10deg);
}

.mobile-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem;
    display: none;
}

.mobile-menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--navbar-logo);
    margin: 6px 0;
    transition: all 0.3s ease;
    border-radius: 3px;
}

/* Responsive Navigation */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .logo {
        font-size: 1.5rem;
    }

    .logo-text {
        display: none;
    }

    .nav-container {
        padding: 0 1rem;
    }

    .nav-controls {
        gap: 0.5rem;
    }
}

/* Animations et micro-interactions */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-item {
    animation: slideInFromTop 0.6s ease-out backwards;
}

.nav-item:nth-child(1) {
    animation-delay: 0.1s;
}

.nav-item:nth-child(2) {
    animation-delay: 0.2s;
}

.nav-item:nth-child(3) {
    animation-delay: 0.3s;
}

.nav-item:nth-child(4) {
    animation-delay: 0.4s;
}

.nav-item:nth-child(5) {
    animation-delay: 0.5s;
}

.nav-item:nth-child(6) {
    animation-delay: 0.6s;
}

.nav-item:nth-child(7) {
    animation-delay: 0.7s;
}

.nav-item:nth-child(8) {
    animation-delay: 0.8s;
}

/* Styles spécifiques pour les icônes */
.nav-icon.fa-address-card {
    color: #3498db;
}

.nav-icon.fa-magnifying-glass {
    color: #e67e22;
}

.nav-icon.fa-book-open {
    color: #27ae60;
}

.nav-icon.fa-podcast {
    color: #9b59b6;
}

.nav-icon.fa-graduation-cap {
    color: #e74c3c;
}

.nav-icon.fa-bullhorn {
    color: #f39c12;
}

.nav-icon.fa-lightbulb {
    color: #1abc9c;
}

.nav-icon.fa-envelope {
    color: #34495e;
}

.nav-icon.fa-unlock {
    color: #27ae60;
}

/* --- Navigation Moderne Améliorée --- */

/* Menu Principal */
.menu-modern {
    background: var(--navbar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 70px;
    padding-top: 0.5rem;
    /* Ajout pour aligner verticalement */
    padding-bottom: 0.5rem;
    /* Ajout pour aligner verticalement */
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.logo-icon {
    font-size: 2rem;
    background: var(--hero-name-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--navbar-logo);
    letter-spacing: -0.02em;
    transition: all 0.3s ease;
}

.logo:hover .logo-text {
    color: var(--accent-color);
    transform: translateY(-1px);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    align-items: center;
    margin: 0;
    padding: 0;
}

.menu-item {
    position: relative;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--navbar-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: transparent;
}

.menu-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 48, 44, 0.1), transparent);
    transition: left 0.5s ease;
}

.menu-link:hover::before {
    left: 100%;
}



.icon {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.nav-item:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* Sous-menus Dropdown */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: var(--navbar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(201, 48, 44, 0.15);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
}

.menu-item:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--navbar-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    position: relative;
    border-left: 3px solid transparent;
}

.submenu-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--accent-color);
    transition: width 0.3s ease;
}



.submenu-link:hover::before {
    width: 3px;
}

.submenu-icon {
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submenu-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin: 0.5rem 0;
}

/* Menu Mobile Amélioré */
.mobile-menu {
    position: fixed;
    top: 70px;
    left: -100%;
    width: 85%;
    max-width: 420px;
    height: calc(100vh - 70px);
    background: var(--mobile-menu-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    overflow-y: auto;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu ul {
    list-style: none;
    padding: 1rem 0;
    margin: 0;
}

.mobile-menu li {
    margin-bottom: 0;
}

.mobile-menu a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: var(--mobile-menu-text);
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.mobile-menu a:hover {
    background: rgba(201, 48, 44, 0.1);
    border-left-color: var(--accent-color);
    padding-left: 2rem;
}

.mobile-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem;
    display: none;
}

.mobile-menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--navbar-logo);
    margin: 6px 0;
    transition: all 0.3s ease;
    border-radius: 3px;
}

/* Responsive Navigation */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .logo-text {
        display: none;
    }

    .nav-container {
        padding: 0 1rem;
    }
}

/* Animations et micro-interactions */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-item {
    animation: slideInFromTop 0.6s ease-out backwards;
}

.menu-item:nth-child(1) {
    animation-delay: 0.1s;
}

.menu-item:nth-child(2) {
    animation-delay: 0.2s;
}

.menu-item:nth-child(3) {
    animation-delay: 0.3s;
}

.menu-item:nth-child(4) {
    animation-delay: 0.4s;
}

.menu-item:nth-child(5) {
    animation-delay: 0.5s;
}

.menu-item:nth-child(6) {
    animation-delay: 0.6s;
}

.menu-item:nth-child(7) {
    animation-delay: 0.7s;
}

.menu-item:nth-child(8) {
    animation-delay: 0.8s;
}

/* =========================================================
   ANIMATIONS SUBTILES POUR LES CARTES
   ========================================================= */

/* --- Keyframes d'apparition --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRotate {
    from {
        opacity: 0;
        transform: rotate(-5deg) scale(0.95);
    }

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

/* --- Animations d'apparition pour les cartes --- */
/* Cartes de catégories (Publications) */
.category-card {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.category-card:nth-child(1) {
    animation-delay: 0.1s;
}

.category-card:nth-child(2) {
    animation-delay: 0.2s;
}

.category-card:nth-child(3) {
    animation-delay: 0.3s;
}

.category-card:nth-child(4) {
    animation-delay: 0.4s;
}

.category-card:nth-child(5) {
    animation-delay: 0.5s;
}

.category-card:nth-child(6) {
    animation-delay: 0.6s;
}

/* Cartes de ressources */
.resource-card {
    opacity: 0;
    animation: fadeInRight 0.6s ease-out forwards;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.resource-card:nth-child(1) {
    animation-delay: 0.1s;
}

.resource-card:nth-child(2) {
    animation-delay: 0.2s;
}

.resource-card:nth-child(3) {
    animation-delay: 0.3s;
}

.resource-card:nth-child(4) {
    animation-delay: 0.4s;
}

/* Cartes média */
.media-card {
    opacity: 0;
    animation: fadeInLeft 0.6s ease-out forwards;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.media-card:nth-child(1) {
    animation-delay: 0.1s;
}

.media-card:nth-child(2) {
    animation-delay: 0.2s;
}

.media-card:nth-child(3) {
    animation-delay: 0.3s;
}

/* Cartes de cours (Enseignements) */
.course-card {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.course-card:nth-child(1) {
    animation-delay: 0.1s;
}

.course-card:nth-child(2) {
    animation-delay: 0.2s;
}

.course-card:nth-child(3) {
    animation-delay: 0.3s;
}

.course-card:nth-child(4) {
    animation-delay: 0.4s;
}

/* Cartes de timeline (Recherche) */
.timeline-content-modern {
    opacity: 0;
    animation: fadeInRotate 0.6s ease-out forwards;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.timeline-item-modern:nth-child(1) .timeline-content-modern {
    animation-delay: 0.1s;
}

.timeline-item-modern:nth-child(2) .timeline-content-modern {
    animation-delay: 0.2s;
}

.timeline-item-modern:nth-child(3) .timeline-content-modern {
    animation-delay: 0.3s;
}

.timeline-item-modern:nth-child(4) .timeline-content-modern {
    animation-delay: 0.4s;
}

/* Cartes de livres */
.book-card {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.book-card:nth-child(1) {
    animation-delay: 0.1s;
}

.book-card:nth-child(2) {
    animation-delay: 0.2s;
}

.book-card:nth-child(3) {
    animation-delay: 0.3s;
}

.book-card:nth-child(4) {
    animation-delay: 0.4s;
}

/* Cartes de galerie */
.gallery-item {
    opacity: 0;
    animation: fadeInRotate 0.6s ease-out forwards;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* --- Animations de survol --- */
/* Effet d'élévation avec translateY */
.category-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-lg);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.resource-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: var(--shadow-lg);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media-card:hover {
    transform: translateY(-8px) translateX(4px) !important;
    box-shadow: var(--shadow-lg);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.course-card:hover {
    transform: translateY(-10px) rotate(1deg) !important;
    box-shadow: var(--shadow-lg);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-content-modern:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-lg);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.book-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: var(--shadow-lg);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Support du mode sombre --- */
[data-theme="dark"] .category-card:hover,
[data-theme="dark"] .resource-card:hover,
[data-theme="dark"] .media-card:hover,
[data-theme="dark"] .course-card:hover,
[data-theme="dark"] .timeline-content-modern:hover,
[data-theme="dark"] .book-card:hover,
[data-theme="dark"] .gallery-item:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* --- Media query pour prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {

    .category-card,
    .resource-card,
    .media-card,
    .course-card,
    .timeline-content-modern,
    .book-card,
    .gallery-item {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .category-card:hover,
    .resource-card:hover,
    .media-card:hover,
    .course-card:hover,
    .timeline-content-modern:hover,
    .book-card:hover,
    .gallery-item:hover {
        transform: none !important;
        transition: none !important;
    }
}

/* --- Optimisations performance --- */
/* Utilisation de will-change et backface-visibility déjà ajoutée */
/* Ajout de contain pour de meilleures performances */
.category-card,
.resource-card,
.media-card,
.course-card,
.timeline-content-modern,
.book-card,
.gallery-item {
    contain: layout style paint;
}

/* --- Animations pour les éléments de recherche --- */
.search-result-item {
    opacity: 0;
    animation: fadeInUp 0.4s ease-out forwards;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.search-result-item:nth-child(1) {
    animation-delay: 0.05s;
}

.search-result-item:nth-child(2) {
    animation-delay: 0.1s;
}

.search-result-item:nth-child(3) {
    animation-delay: 0.15s;
}

.search-result-item:nth-child(4) {
    animation-delay: 0.2s;
}

.search-result-item:nth-child(5) {
    animation-delay: 0.25s;
}

/* --- Animations pour le bandeau d'actualité --- */
.news-banner-content {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.3s;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* --- Animations pour les boutons et éléments interactifs --- */
.theme-toggle,
.lang-toggle,
.back-to-top,
.submit-btn,
.book-link {
    will-change: transform;
    backface-visibility: hidden;
}

/* --- Classe utilitaire pour désactiver les animations --- */
.no-animation {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* --- Version du fichier --- */
/* Version: 1.3.3 - Correction de la visibilité des liens dans les cartes de ressources en mode sombre */
/* ==== Nouveaux effets de style pour les liens ==== */
a {
    color: var(--navbar-text);
    text-decoration: none;
    position: relative;
    transition: color var(--transition-primary), background var(--transition-primary);
}

/* Soulignement animé au survol */
a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

/* Hover effect */
a:hover {
    color: var(--accent-color);
}

a:hover::after {
    width: 100%;
}

/* =========================================================
   PROMO LIVRE SOUS BANNIÈRE ACTUALITÉ - Jolie centrée
   ========================================================= */

/* Container pour stacker les boutons verticalement */
.news-action-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

/* Bouton Commander bleu clair */
.commander-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.6rem;
    background: #3498db !important;
    /* Bleu professionnel */
    color: white !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    transition: all 0.3s ease;
    border: 1px solid rgba(52, 152, 219, 0.4);
    position: relative;
}

.commander-btn::after {
    display: none !important;
}

.commander-btn:hover {
    background: #2980b9 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.book-promo-banner {
    background: linear-gradient(135deg, rgba(26, 35, 50, 0.08) 0%, rgba(201, 48, 44, 0.04) 100%);
    padding: 1.8rem 0;
    margin: 0;
    border-top: 1px solid rgba(201, 48, 44, 0.12);
    border-bottom: 1px solid rgba(201, 48, 44, 0.08);
    position: relative;
    overflow: hidden;
}

.book-promo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(201, 48, 44, 0.06) 0%, transparent 70%);
    opacity: 0.5;
}

.promo-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
    position: relative;
    z-index: 2;
}

.promo-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.5rem 2.5rem;
    border-radius: 25px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.promo-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    border-color: rgba(201, 48, 44, 0.3);
}

.promo-price-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.price {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 900;
    color: var(--accent-color);
    font-family: 'Playfair Display', serif;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 8px rgba(201, 48, 44, 0.3);
    margin-bottom: 0.2rem;
}

.promo-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.promo-cta-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.2rem 2.5rem;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%);
    color: white !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(201, 48, 44, 0.35);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.promo-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.promo-cta-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(201, 48, 44, 0.45);
    border-color: rgba(255, 255, 255, 0.3);
}

.promo-cta-btn:hover::before {
    left: 100%;
}

.promo-cta-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.promo-cta-btn:hover i {
    transform: translateX(4px);
}

/* Mode sombre */
[data-theme="dark"] .promo-content {
    background: rgba(44, 62, 80, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .promo-label {
    color: rgba(236, 240, 241, 0.8);
}

/* Responsive */
@media (max-width: 768px) {
    .promo-content {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem 2rem;
    }

    .promo-inner {
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .price {
        font-size: 1.8rem;
    }

    .promo-cta-btn {
        padding: 1rem 2rem;
        font-size: 0.95rem;
    }
}

/* Application aux liens spécifiques */
.nav-links a,
.footer-links a,
.resource-card a,
.mobile-menu a {
    color: inherit;
    transition: color var(--transition-primary), background var(--transition-primary);
}

/* ======================================================================
     FOOTER ENHANCÉ - EFFETS MODERNES
     ====================================================================== */

/* ======================================================================
   FOOTER ÉLÉGANT ET CONTEMPORAIN - DESIGN MODERNE & TRADITIONNEL
   ====================================================================== */

/* ======================================================================
   FOOTER COMPACT & MODERNE (v2.1.23)
   ====================================================================== */

@keyframes auroraGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.footer-elegant {
    position: relative;
    overflow: hidden;
    /* Dégradé profond et sophistiqué type "Aurore Boréale" sombre */
    background: linear-gradient(120deg,
            #0f1419 0%,
            #1a2332 25%,
            #2c3e50 50%,
            #1a2332 75%,
            #0f1419 100%);
    background-size: 300% 300%;
    animation: auroraGradient 20s ease infinite;
    color: rgba(255, 255, 255, 0.9);
    padding: 3rem 0 1.5rem;
    /* Padding réduit pour être moins gros */
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Effet de bruit subtil pour la texture */
.footer-elegant::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.footer-content-elegant {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* Ratio ajusté : Signature à gauche, Navigation large à droite */
    gap: 3rem;
    align-items: start;
}

/* --- Bloc Signature (Gauche) --- */
.footer-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.signature-block {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.signature-block:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.signature-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

.signature-icon {
    font-size: 1.8rem;
}

.signature-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
}

.signature-title {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.signature-institution {
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-mini {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.85rem;
}

.contact-link-mini {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.contact-link-mini:hover {
    color: #fff;
}

/* --- Bloc Navigation (Droite) --- */
.footer-nav-elegant {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 colonnes alignées */
    gap: 1.5rem;
}

.nav-category {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.category-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nav-list-compact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.nav-link-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-left: -0.6rem;
    /* Alignement visuel */
}

.nav-link-compact:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(3px);
}

.nav-link-compact .nav-emoji {
    font-size: 1rem;
    opacity: 0.8;
}

/* Footer Bottom */
.footer-bottom-elegant {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 2;
}

.footer-info-left,
.footer-info-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.copyright-year {
    color: rgba(255, 255, 255, 0.6);
}

.version-pill {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
}

.footer-mini-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 0.8rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
    cursor: pointer;
}

.footer-mini-link:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
}

.footer-mini-link--button {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-family: inherit;
}

/* Context: pages légales (fond clair) */
.legal-page .footer-mini-link {
    color: rgba(26, 35, 50, 0.92);
    background: rgba(26, 35, 50, 0.06);
    border-color: rgba(26, 35, 50, 0.14);
}

.legal-page .footer-mini-link:hover {
    color: rgba(26, 35, 50, 1);
    background: rgba(26, 35, 50, 0.10);
    border-color: rgba(26, 35, 50, 0.18);
}

.legal-page .footer-mini-link--button {
    background: rgba(26, 35, 50, 0.06);
}

.legal-page .section {
    padding: 3.5rem 0;
}

.legal-page .container {
    max-width: 980px;
}

.legal-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(26, 35, 50, 0.10);
    border-radius: 22px;
    box-shadow: var(--shadow-md);
    padding: clamp(1.25rem, 3vw, 2.2rem);
}

[data-theme="dark"] .legal-card {
    background: rgba(27, 38, 53, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
}

.legal-page .section-title {
    margin-bottom: 1.2rem;
}

.legal-page p {
    margin: 0 0 1rem 0;
    line-height: 1.75;
    color: var(--text-dark);
}

[data-theme="dark"] .legal-page p {
    color: var(--text-dark);
}

.legal-page .section-subtitle {
    margin-top: 1.8rem;
    margin-bottom: 0.75rem;
}

.legal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.legal-footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(26, 35, 50, 0.10);
}

[data-theme="dark"] .legal-footer-links {
    border-top-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 600px) {
    .legal-card {
        border-radius: 18px;
    }
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .footer-content-elegant {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-nav-elegant {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 sur tablette */
    }
}

@media (max-width: 500px) {
    .footer-nav-elegant {
        position: relative;
        grid-template-columns: 1fr;
        /* 1 colonne sur mobile */
        gap: 1rem;
        max-width: 420px;
        margin: 0 auto;
        padding-left: 1.4rem;
        justify-items: stretch;
        text-align: left;
    }

    .footer-nav-elegant::before {
        content: "";
        position: absolute;
        left: 0.45rem;
        top: 0.4rem;
        bottom: 0.4rem;
        width: 2px;
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.05) 0%,
                rgba(255, 255, 255, 0.18) 35%,
                rgba(255, 255, 255, 0.10) 70%,
                rgba(255, 255, 255, 0.04) 100%);
        border-radius: 2px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
        pointer-events: none;
    }

    .nav-category {
        position: relative;
        align-items: flex-start;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 1rem;
    }

    .nav-category::before {
        content: "";
        position: absolute;
        left: -1.25rem;
        top: 1.2rem;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: radial-gradient(circle at 30% 30%,
                rgba(255, 255, 255, 0.9) 0%,
                rgba(201, 48, 44, 0.85) 45%,
                rgba(201, 48, 44, 0.25) 100%);
        box-shadow:
            0 0 0 2px rgba(15, 20, 25, 0.9),
            0 6px 14px rgba(0, 0, 0, 0.35);
        pointer-events: none;
    }

    .category-title {
        justify-content: flex-start;
        margin-bottom: 0.25rem;
    }

    .nav-list-compact {
        align-items: flex-start;
    }

    .nav-link-compact {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        padding: 0.55rem 0.7rem;
    }

    .nav-link-compact:hover {
        transform: none;
        background: rgba(255, 255, 255, 0.10);
    }

    .footer-bottom-elegant {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ======================================================================
   OPTIMISATIONS MOBILE GLOBALES
   ====================================================================== */
@media (max-width: 768px) {
    /* Textes plus étendus sur l'écran - réduction des marges latérales */
    .container {
        padding: 0 0.8rem;
    }

    .section {
        padding: 2.5rem 0;
    }

    /* Titres de section plus compacts */
    .section-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    /* Biographie - texte plus large */
    .about-article-wrapper {
        padding: 0 0.3rem;
    }

    .about-article-wrapper p {
        font-size: 0.95rem;
        line-height: 1.65;
        margin-bottom: 1rem;
    }

    /* Contact - correction du débordement */
    #contact .container {
        /* Garde un peu d'air en haut : évite que le titre "Contact" colle au bord du container */
        padding: 1rem 0.8rem 0.8rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100%;
    }

    .contact-info {
        padding: 0 0.5rem;
        text-align: center;
    }

    .contact-info h3 {
        font-size: 1.3rem;
    }

    .contact-info p {
        font-size: 0.9rem;
    }

    .contact-links-group {
        align-items: center;
        gap: 0.8rem;
    }

    .contact-item {
        width: 100%;
        max-width: 100%;
        padding: 0.8rem 1rem;
        box-sizing: border-box;
    }

    .contact-form {
        padding: 1.2rem;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 12px;
    }

    .contact-form h3 {
        font-size: 1.2rem;
        margin-top: 0.4rem;
        margin-bottom: 1rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-group label {
        font-size: 0.85rem;
        margin-bottom: 0.4rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 0.8rem;
        font-size: 0.95rem;
        width: 100%;
        box-sizing: border-box;
    }

    .form-group textarea {
        min-height: 100px;
    }

    .submit-btn {
        width: 100%;
        padding: 0.9rem;
        font-size: 0.95rem;
    }

    /* Publications - cards plus compactes */
    .publication-category-grid {
        gap: 0.8rem;
    }

    .category-card {
        padding: 1rem;
    }

    /* Podcasts */
    .podcast-item {
        padding: 1rem;
        flex-direction: column;
        gap: 0.8rem;
        align-items: flex-start;
    }

    .podcast-content {
        width: 100%;
    }

    .podcast-action {
        width: 100%;
    }

    .podcast-play-btn {
        width: 100%;
        justify-content: center;
    }

    /* Timeline recherche */
    .timeline-item-modern {
        padding-left: 2.5rem;
    }

    .timeline-connector {
        left: 0.8rem;
    }

    .timeline-dot {
        left: 0.8rem;
    }

    /* Footer */
    .footer-elegant {
        padding: 2rem 0.8rem 1rem;
    }

    .footer-grid-elegant {
        gap: 1.5rem;
    }

    .footer-brand-elegant {
        text-align: center;
    }

    /* Recherche */
    .search-container {
        padding: 0 0.5rem;
    }

    .search-input {
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }

    /* Hero */
    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        padding: 0 1rem;
    }

    .hero-cta {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}