/* =========================================
   1. DESIGN SYSTEM — VARIABLES
   ========================================= */
:root {
    --nav-height: 110px;

    /* — Palette — */
    --color-primary:     #1a1a1a;   /* Texte principal, accent fort       */
    --color-secondary:   #4a4a4a;   /* Texte secondaire (descriptions)    */
    --color-tertiary:    #7a7a7a;   /* Texte discret (méta, légendes)     */
    --color-muted:       #a0a0a0;   /* Éléments très discrets             */

    --color-bg:          #ffffff;
    --color-bg-soft:     #f7f7f7;   /* Fonds subtils (cartes, champs)     */
    --color-border:      #e8e8e8;   /* Bordures, séparateurs              */
    --color-border-light:#f0f0f0;

    /* — Glass effects — */
    --glass-light:       rgba(255, 255, 255, 0.55);
    --glass-medium:      rgba(255, 255, 255, 0.2);
    --glass-blur:        12px;
    --glass-blur-light:  5px;
    --glass-border:      rgba(255, 255, 255, 0.4);

    /* — Typography — */
    --font-body:    'Montserrat', sans-serif;
    --font-display: 'Syncopate', sans-serif;

    --text-xs:   0.8rem;
    --text-sm:   0.85rem;
    --text-base: 0.95rem;
    --text-md:   1.05rem;
    --text-lg:   1.2rem;
    --text-xl:   1.5rem;
    --text-2xl:  2.2rem;
    --text-hero: 4.5rem;

    /* — Spacing — */
    --space-xs:  8px;
    --space-sm:  12px;
    --space-md:  20px;
    --space-lg:  30px;
    --space-xl:  40px;
    --space-2xl: 60px;

    /* — Transitions — */
    --transition: 0.3s ease;
    --transition-slow: 0.4s ease;

    /* — Shadows — */
    --shadow-sm:  0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-md:  0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 20px 50px rgba(0, 0, 0, 0.15);
    --shadow-glass: 0 20px 50px rgba(0, 0, 0, 0.25);

    /* — Border radius — */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-pill: 20px;
}


/* =========================================
   2. RESET & BASE
   ========================================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 15px;
    overflow-x: hidden;
}

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

body {
    font-family: var(--font-body);
    color: var(--color-primary);
    background-color: var(--color-bg);
    line-height: 1.8;
    padding-top: var(--nav-height);
    font-size: var(--text-base);
    overflow-x: hidden;
}


/* =========================================
   3. TYPOGRAPHY HIERARCHY
   ========================================= */

/* Titres principaux & logo — Syncopate */
h1, .logo, .hero-content h1 {
    font-family: var(--font-display);
    font-weight: normal;
    letter-spacing: normal !important;
}

/* Body font — section headings */
h2, h3, h4 {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-primary);
}

h2 {
    font-size: var(--text-2xl);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-xl);
    text-align: center;
}

h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);
}


/* =========================================
   4. LAYOUT CONTAINERS
   ========================================= */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.content-section {
    padding: 120px var(--space-md) var(--space-2xl);
}

section:not(.hero-section):not(.bio-full-section) {
    border-top: 1px solid var(--color-border);
}


/* =========================================
   5. NAVIGATION
   ========================================= */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    padding: var(--space-md) 50px;
    z-index: 1000;
    border-bottom: 1px solid var(--color-border);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.95rem;
    color: var(--color-primary);
    line-height: 1;
    text-decoration: none;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: var(--space-lg);
}

.nav-links a {
    text-decoration: none;
    color: var(--color-secondary);
    text-transform: uppercase;
    font-size: var(--text-sm);
    letter-spacing: 1.5px;
    transition: color var(--transition);
}

.nav-links a:hover {
    color: var(--color-muted);
}

/* Burger menu */
.burger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.burger span {
    width: 25px;
    height: 2px;
    background-color: var(--color-primary);
    transition: all var(--transition);
}


/* =========================================
   6. HERO SECTION (Accueil)
   ========================================= */
.hero-section {
    height: calc(100vh - var(--nav-height));
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: center;
    padding-right: max(48px, 3.5vw, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
    padding-bottom: var(--space-2xl);
    overflow-x: hidden;
    background-image:
        linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%),
        url('../images/arash-hero.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.hero-content {
    max-width: min(100%, calc(100vw - 16px));
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
    color: white;
}

.hero-content h1 {
    font-size: clamp(1rem, 6.25vw, var(--text-hero));
    white-space: nowrap;
    text-shadow: 0 4px 15px rgba(0,0,0,0.6);
    margin-bottom: 10px;
    line-height: 1.1;
    color: white;
}

.hero-content h2 {
    font-size: var(--text-lg);
    border-top: 1px solid rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding: 15px var(--space-lg);
    display: inline-block;
    margin: 15px 0;
    letter-spacing: 8px;
    color: white;
}


/* =========================================
   7. BUTTONS — Unified System
   ========================================= */
.btn {
    display: inline-block;
    padding: 15px 40px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font-body);
    text-decoration: none;
    border: 1px solid var(--color-primary);
    transition: all var(--transition-slow);
    text-align: center;
    cursor: pointer;
    line-height: 1.4;
}

/* Primary: dark fill */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg);
}

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

/* Secondary: outlined */
.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-bg);
}

/* Legacy aliases — backward compatibility */
.btn-lire-suite   { composes: btn btn-primary; }
.btn-secondary     { composes: btn btn-primary; }

/* Fallback direct styles for legacy classes */
.btn-lire-suite,
.btn-secondary {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-bg);
    padding: 15px 40px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--color-primary);
    transition: all var(--transition-slow);
    text-align: center;
}

.btn-lire-suite:hover,
.btn-secondary:hover {
    background-color: transparent;
    color: var(--color-primary);
}

.btn-submit {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-bg);
    padding: 15px 40px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font-body);
    border: 1px solid var(--color-primary);
    cursor: pointer;
    transition: all var(--transition-slow);
    width: 100%;
}

.btn-submit:hover {
    background-color: transparent;
    color: var(--color-primary);
}


/* =========================================
   8. FULL-BACKGROUND PAGES (Bio, Agenda, etc.)
   ========================================= */
.full-bg-page {
    background-attachment: scroll;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-clip: border-box;
    min-height: 100vh;
}

.bio-full-section {
    padding: var(--space-2xl) var(--space-md);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--nav-height));
}


/* =========================================
   9. GLASS CONTAINERS — Shared Component
   ========================================= */
/* Outer wrapper — very light frosted background */
.glass-wrapper {
    background: var(--glass-medium);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--space-xl);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    width: 100%;
}

/* Inner content card — more opaque */
.glass-card {
    background: var(--glass-light);
    backdrop-filter: blur(var(--glass-blur-light));
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
    transition: box-shadow var(--transition), transform var(--transition);
}

.glass-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.07);
}

/* Bio-specific glass (thicker for readability over dark images) */
.bio-glass-container {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    padding: var(--space-2xl);
    border-radius: var(--radius-sm);
    max-width: 900px;
    margin: 0 auto;
    color: var(--color-primary);
    box-shadow: var(--shadow-glass);
}


/* =========================================
   10. BIO PAGE
   ========================================= */
.bio-text-content p {
    font-size: var(--text-base);
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: justify;
    color: var(--color-primary);
}

.bio-actions {
    margin-top: var(--space-xl);
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Home page bio section */
.bio-flex {
    display: block;
}

.bio-flex::after {
    content: "";
    display: table;
    clear: both;
}

.bio-image {
    float: left;
    width: 38%;
    margin-right: 50px;
    margin-bottom: var(--space-md);
}

.bio-image img {
    width: 100%;
    height: auto;
    box-shadow: 10px 10px 0px var(--color-border-light);
}

.bio-text { display: block; }
#Bio h2 { text-align: left; margin-bottom: 25px; }

.bio-content p {
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: justify;
    color: var(--color-secondary);
}

.bio-action {
    margin-top: 35px;
    text-align: left;
}


/* =========================================
   11. AGENDA / EVENTS
   ========================================= */
.agenda-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-xl);
    font-size: var(--text-md);
    color: var(--color-tertiary);
    font-style: italic;
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 800px;
    margin: 0 auto;
}

.event-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 25px;
}

.event-card-body {
    display: flex;
    gap: var(--space-lg);
}

.event-date {
    flex: 0 0 190px;
    border-right: 2px solid var(--color-primary);
    padding-right: var(--space-md);
}

.event-date strong {
    display: block;
    font-size: var(--text-md);
    color: var(--color-primary);
    line-height: 1.3;
    margin-bottom: 5px;
}

.event-date span {
    font-size: var(--text-sm);
    color: var(--color-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.event-date .event-date-time {
    display: block;
}

.event-info {
    flex: 1;
}

.event-info h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-primary);
}

.event-location {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    margin-bottom: 10px;
    font-weight: 500;
}

.event-desc {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    margin-bottom: 15px;
    line-height: 1.6;
}

.event-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    border-top: 1px solid var(--color-border);
    padding-top: 15px;
}

.event-price {
    font-size: var(--text-sm);
    font-weight: 600;
    background: var(--color-bg-soft);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-primary);
}

.event-link {
    font-size: var(--text-sm);
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--color-primary);
    transition: color var(--transition), border-color var(--transition);
}

.event-link:hover {
    color: var(--color-muted);
    border-color: var(--color-muted);
}


/* =========================================
   11b. REPERTOIRE PAGE
   ========================================= */
.repertoire-page-section {
    align-items: flex-start;
}

.repertoire-wrapper h2 {
    margin-bottom: var(--space-md);
}

.repertoire-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-md);
    color: var(--color-secondary);
    line-height: 1.75;
    background: var(--glass-light);
    backdrop-filter: blur(var(--glass-blur-light));
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
}

.repertoire-tabs {
    max-width: 800px;
    margin: 0 auto;
}

.repertoire-tab-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.repertoire-tab-labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.repertoire-tab-label {
    cursor: pointer;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--color-tertiary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition), border-color var(--transition);
}

.repertoire-tab-label:hover {
    color: var(--color-secondary);
}

.repertoire-tabs:has(#rep-tab-works:checked) label[for="rep-tab-works"],
.repertoire-tabs:has(#rep-tab-programs:checked) label[for="rep-tab-programs"] {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom-color: var(--color-primary);
}

.repertoire-panel {
    display: none;
    margin-top: 0;
}

#rep-tab-works:checked ~ #rep-panel-works,
#rep-tab-programs:checked ~ #rep-panel-programs {
    display: block;
}

.repertoire-panel.repertoire-panel {
    transform: none;
}

.repertoire-panel.repertoire-panel:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.repertoire-panel-title {
    font-size: var(--text-md);
    font-weight: 600;
    margin-bottom: var(--space-md);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}

.repertoire-placeholder {
    font-size: var(--text-sm);
    color: var(--color-tertiary);
    font-style: italic;
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

.repertoire-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.repertoire-list li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: var(--text-base);
    color: var(--color-secondary);
    line-height: 1.5;
}

.repertoire-list li.repertoire-work-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: var(--space-md) 0;
    line-height: 1.45;
}

.repertoire-comp-line {
    display: block;
    font-weight: 600;
    font-size: var(--text-md);
    letter-spacing: 0.02em;
    color: var(--color-primary);
}

.repertoire-title-line {
    display: block;
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--color-secondary);
    line-height: 1.4;
}

.repertoire-details-line {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--color-tertiary);
    font-style: italic;
    line-height: 1.55;
}

.repertoire-list li:last-child {
    border-bottom: none;
}

.repertoire-comp {
    font-weight: 600;
    color: var(--color-primary);
    margin-right: 0.35em;
}

.repertoire-list--placeholder .repertoire-work {
    color: var(--color-muted);
}

.repertoire-details {
    font-size: var(--text-sm);
    color: var(--color-tertiary);
    font-style: italic;
}

.repertoire-program-body--paragraphs p {
    margin: 0 0 1em;
}

.repertoire-program-body--paragraphs p:last-child {
    margin-bottom: 0;
}

.repertoire-empty,
.repertoire-loading {
    list-style: none;
    color: var(--color-tertiary);
    font-style: italic;
    font-size: var(--text-sm);
    border: none;
    padding: var(--space-md) 0;
}

.repertoire-programs-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.repertoire-program-card {
    margin: 0;
    text-align: left;
}

.repertoire-program-card.glass-card:hover {
    transform: translateY(-2px);
}

.repertoire-program-title {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-primary);
}

.repertoire-program-subtitle {
    font-size: var(--text-sm);
    color: var(--color-tertiary);
    margin-bottom: var(--space-md);
}

.repertoire-program-body {
    font-size: var(--text-base);
    color: var(--color-secondary);
    line-height: 1.75;
    white-space: pre-line;
}

@media (max-width: 768px) {
    .repertoire-tab-labels {
        flex-direction: column;
        align-items: stretch;
        border-bottom: none;
        gap: 0;
    }

    .repertoire-tab-label {
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        margin-bottom: 0;
    }

    .repertoire-tabs:has(#rep-tab-works:checked) label[for="rep-tab-works"],
    .repertoire-tabs:has(#rep-tab-programs:checked) label[for="rep-tab-programs"] {
        border-bottom-color: var(--color-primary);
        background: rgba(255, 255, 255, 0.35);
    }
}


/* =========================================
   12. MEDIAS PAGE
   ========================================= */
.video-featured {
    max-width: 900px;
    margin: 0 auto var(--space-xl);
}

.video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-meta {
    margin-top: var(--space-md);
    text-align: center;
}

.video-meta p {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 5px;
}

.video-meta span {
    font-size: var(--text-sm);
    color: var(--color-tertiary);
    font-style: italic;
}

.youtube-cta {
    padding: 50px var(--space-lg);
    text-align: center;
    border-radius: var(--radius-sm);
    margin-top: var(--space-2xl);
}

.youtube-cta p {
    font-size: var(--text-base);
    color: var(--color-secondary);
    margin-bottom: 25px;
}


/* =========================================
   13. CONTACT PAGE
   ========================================= */
.contact-wrapper {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-intro {
    font-size: var(--text-md);
    color: var(--color-secondary);
    line-height: 1.6;
    margin-bottom: 25px;
}

.contact-email-direct {
    margin-bottom: var(--space-xl);
}

.contact-email-direct a {
    font-size: 1.4rem;
    font-family: var(--font-body);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all var(--transition);
}

.contact-email-direct a:hover {
    border-color: var(--color-primary);
    color: var(--color-secondary);
}

.contact-separator {
    position: relative;
    margin: var(--space-xl) 0;
}

.contact-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.contact-separator span {
    position: relative;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-pill);
    padding: 5px var(--space-md);
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.contact-form {
    padding: var(--space-xl);
    text-align: left;
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-family: var(--font-body);
    font-size: var(--text-base);
    background-color: rgba(255, 255, 255, 0.7);
    transition: all var(--transition);
    border-radius: 0;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-bg);
}

/* Contact page layout and background framing */
.contact-bg-page {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)),
        url('../images/contact.webp');
    background-attachment: fixed;
    background-size: cover;
    background-position: 68% top;
}

.contact-page-section {
    align-items: flex-start;
}

.contact-page-container {
    width: 100%;
    display: flex;
    justify-content: center;
}


/* =========================================
   14. FOOTER
   ========================================= */
.site-footer {
    padding: var(--space-md);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-tertiary);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.full-bg-page .site-footer {
    background: rgba(255, 255, 255, 0.9);
}


/* =========================================
   15. RESPONSIVE — MOBILE
   ========================================= */
@media (max-width: 768px) {
    header {
        padding: 15px var(--space-md);
    }

    .burger {
        display: flex;
    }

    .nav-links {
        position: fixed;
        right: -100%;
        top: var(--nav-height);
        flex-direction: column;
        background: rgba(255, 255, 255, 0.98);
        width: 100%;
        text-align: center;
        padding: var(--space-xl) 0;
        box-shadow: var(--shadow-sm);
        transition: 0.3s ease-in-out;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: var(--text-md);
        padding: 15px;
        display: block;
    }

    /* Hero — bloc nom + titre centré horizontalement */
    .hero-section {
        align-items: flex-end;
        justify-content: center;
        padding-left: max(16px, 4vw);
        padding-right: max(16px, 4vw);
        padding-bottom: var(--space-xl);
    }

    .hero-content {
        padding: 25px 12px;
        margin: 0 auto;
        max-width: min(100%, calc(100vw - 24px));
        text-align: center;
    }

    .hero-content h2 {
        font-size: clamp(0.7rem, 2.75vw, var(--text-md));
        letter-spacing: 0.28em;
        padding: 12px var(--space-md);
    }

    /* Bio home */
    .bio-flex { display: block; }
    .bio-image {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--space-lg);
    }
    .bio-text { text-align: left; }
    #Bio h2 { text-align: center; }
    .bio-action { text-align: center; }

    /* Bio full page */
    .bio-glass-container {
        padding: var(--space-lg) var(--space-md);
    }

    .bio-text-content p {
        text-align: left;
    }

    /* Agenda */
    .event-card {
        padding: var(--space-md);
    }

    .event-card-body {
        flex-direction: column;
        gap: 15px;
    }

    .event-date {
        flex: none;
        border-right: none;
        border-bottom: 2px solid var(--color-primary);
        padding-right: 0;
        padding-bottom: 10px;
    }

    /* Glass wrapper */
    .glass-wrapper {
        padding: var(--space-md);
    }

    /* Media */
    .youtube-cta {
        padding: var(--space-lg) 15px;
    }

    /* Buttons responsive */
    .bio-actions {
        flex-direction: column;
        align-items: center;
    }

    .bio-actions .btn-lire-suite,
    .bio-actions .btn-secondary {
        width: 100%;
        max-width: 320px;
    }

    /* Media grid mobile */
    .media-grid {
        grid-template-columns: 1fr !important;
    }

    /* Contact mobile */
    .contact-page-wrapper {
        padding: var(--space-lg) var(--space-md) !important;
    }
}


/* =========================================
   16. AGENDA — DYNAMIC SECTIONS
   ========================================= */
.agenda-page-section .bio-full-section {
    align-items: flex-start;
}

.agenda-section {
    margin-bottom: var(--space-xl);
}

.agenda-separator {
    position: relative;
    margin: var(--space-2xl) 0 var(--space-xl);
    text-align: center;
}

.agenda-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
}

.agenda-separator span {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.75);
    padding: 6px 24px;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-tertiary);
}

/* Past events: dimmed */
.event-card--past {
    opacity: 0.55;
}

.event-card--past:hover {
    opacity: 0.8;
}

/* Prochain événement (mise en avant) */
.agenda-next-wrap {
    max-width: 800px;
    margin: 0 auto var(--space-md);
}

.agenda-next-wrap:empty {
    display: none;
}

.agenda-subheading {
    max-width: 800px;
    margin: var(--space-xl) auto var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-tertiary);
}

.event-card--next {
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.event-badge-next {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-bg);
    background: var(--color-primary);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-md);
}

/* Loading & empty states */
.agenda-loading {
    text-align: center;
    padding: var(--space-xl);
    font-size: var(--text-md);
    color: var(--color-tertiary);
    font-style: italic;
}

.agenda-empty {
    text-align: center;
    padding: var(--space-xl);
    font-size: var(--text-md);
    color: var(--color-secondary);
    font-style: italic;
}


/* =========================================
   17. MEDIAS — GRID LAYOUT
   ========================================= */
.media-wrapper h2 {
    margin-bottom: var(--space-xl);
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.media-card {
    padding: var(--space-md) !important;
    display: flex;
    flex-direction: column;
}

.media-card .video-container {
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-md);
}

.media-card-info {
    text-align: center;
}

.media-card-info h3 {
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
    color: var(--color-primary);
}

.media-card-title {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    font-style: italic;
    margin-bottom: 8px;
}

.media-card-date {
    font-size: var(--text-xs);
    color: var(--color-tertiary);
}

.media-cta {
    text-align: center;
    padding: var(--space-xl) var(--space-lg) !important;
    margin-top: var(--space-md);
}

.media-cta p {
    font-size: var(--text-base);
    color: var(--color-secondary);
    margin-bottom: var(--space-md);
}


/* =========================================
   18. CONTACT — PAGE WRAPPER
   ========================================= */
.contact-page-wrapper {
    max-width: 700px;
    width: min(700px, 58vw);
    margin: 0 auto;
    padding: 50px 40px;
    transform: none;
}

@media (max-width: 1100px) {
    .contact-bg-page {
        background-position: 72% top;
    }

    .contact-page-wrapper {
        width: min(680px, 64vw);
    }
}

@media (max-width: 900px) {
    .contact-bg-page {
        background-attachment: scroll;
        background-position: 70% top;
    }

    .contact-page-container {
        justify-content: center;
    }

    .contact-page-wrapper {
        width: 100%;
        margin: 0 auto;
        transform: none;
    }
}

@media (max-width: 600px) {
    .contact-bg-page {
        background-position: 62% top;
    }
}