/* Font Face */
@font-face {
    font-family: 'BP';
    src: url('fonts/BP_font.woff2') format('woff2'),
         url('fonts/BP_font.woff') format('woff'),
         url('fonts/BP_font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BAT';
    src: url('fonts/BAT_FONT_EDIT.woff2') format('woff2'),
         url('fonts/BAT_FONT_EDIT.woff') format('woff'),
         url('fonts/BAT_FONT_EDIT.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* CSS Variables */
:root {
    --color-primary: #000;
    --color-background: #fafafa;
    --color-border: #2a2a2a;
    --opacity-default: 0.85;
    --opacity-hover: 1;
    --opacity-rough-line: 0.9;
    --opacity-separator: 0.33;
    --opacity-border: 0.06;

    --font-family-primary: 'BAT', sans-serif;
    --font-family-display: 'BP', sans-serif;

    --font-size-base: 16px;
    --font-size-small: 1.125rem; /* 18px */
    --font-size-medium: 1.25rem; /* 20px */
    --font-size-large: 1.39rem; /* 22px */
    --font-size-xlarge: 1.4375rem; /* 23px */
    --font-size-xxlarge: 1.5rem; /* 24px */
    --font-size-title: 2.5rem; /* 40px */

    --border-radius-default: 5px;
    --border-radius-medium: 20px;
    --border-radius-round: 50%;

    --transition-default: all 0.3s ease;
    --transition-transform: transform 0.3s ease;
    --color-dos: #1a1a1afa;
    --color-light: #595b5e;
}

/* Reset and Base */
* {
    /*! margin: 0; */
    /*! padding: 5px; */
    /*! box-sizing: border-box; */
}

html, body {
    /*! margin: 20px; */
    /*! padding: 0; */
}

body {
    font-family: var(--font-family-primary);
    background: var(--color-background);
    color: var(--color-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    font-weight: 400;
    /*! letter-spacing: 0.01em; */
    /*! padding: 40px; */
    /*! padding-bottom: 90px; */
}

/* Skip link pour accessibilité */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-background);
    padding: 8px 16px;
    text-decoration: none;
    z-index: 1000;
    font-family: var(--font-family-primary);
}

.skip-link:focus {
    top: 0;
}

/* Focus visible amélioré pour accessibilité */
*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   PAGE FRAME - Container with all borders
   ============================================ */
.page-frame {
    position: relative;
    max-width: 1100px;
    margin: 80px auto;
    /*! padding: 0px 0px 30px 0px; */
    min-height: calc(100vh - 80px);
    /*! width: auto; */
}

/* Top border */
.page-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    /* background-image: url('SVG/border-top.svg'); */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 100;
}

/* Bottom border */
.page-frame::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    background-image: url('SVG/footer-rect.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 100;
}

/* ============================================
   LOGO COLUMN - Absolutely positioned at left
   ============================================ */
.logo-column {
    /*! position: absolute; */
    left: 0;
    top: 30px;
    width: 100px;
    display: flex;
    align-items: flex-start;
}

/* Right border */
.main-container::after {
    content: '';
    position: absolute;
    right: -100px;
    top: 0;
    bottom: 0;
    width: 50px;
    height: 100%;
    background-image: url('SVG/border-rightO.svg');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 100;
    opacity: var(--opacity-border);
}

/* ============================================
   MAIN CONTAINER - Centered on page
   ============================================ */
.main-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    /*! padding: 20px; */
    /*! display: flex; */
}

/* ============================================
   NAVIGATION BAR - Filters only
   ============================================ */
.nav-bar {
    display: flex;
    align-items: center;
    margin: 30px 0;
    padding: 20px 0;
    position: relative;
}

/* Rough lines above and below nav bar */
.nav-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    /*! background-size: contain; */
    opacity: var(--opacity-rough-line);
}

.nav-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    opacity: var(--opacity-rough-line);
}

.nav-logo {
    flex-shrink: 0;
    transition: opacity 0.1s ease-out;
    display: flex;
}

.nav-logo .logo {
    width: 60px;
    max-width: 60px;
    height: auto;
}

.filters-row {
    display: flex;
    /*! gap: 2px; */
    flex-wrap: wrap;
    align-items: center;
    /*! font-family: BAT; */
}

.filter-btn {
    background: none;
    border: none;
    padding: 5px 13px;
    font-family: BAT;
    font-size: var(--font-size-xlarge);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-default);
    border-radius: var(--border-radius-default);
    color: var(--color-dos);
    opacity: var(--opacity-default);
}

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

.filter-btn.active {
    background: #1a1a1a57;
    color: #fff;
    opacity: var(--opacity-hover);
}

.cv-link {
    padding: 5px 18px;
    text-decoration: none;
    color: var(--color-primary);
    font-size: var(--font-size-medium);
    border-radius: var(--border-radius-medium);
    transition: var(--transition-default);
    font-family: BAT;
    opacity: var(--opacity-default);
}

.cv-link:hover {
    background: var(--color-primary);
    color: var(--color-background);
    opacity: var(--opacity-hover);
}

/* ============================================
   YEARS BAR - Timeline navigation
   ============================================ */
.years-bar {
    margin-bottom: 80px;
    padding: 5px 0;
    position: relative;
}

/* Rough lines above and below years bar */
.years-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    opacity: var(--opacity-rough-line);
}

.years-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    opacity: var(--opacity-rough-line);
}

.years-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    /*! justify-content: center; */
}

.year-link {
    font-family: BAT;
    font-size: var(--font-size-xxlarge);
    color: var(--color-dos);
    text-decoration: none;
    padding: 5px 15px;
    border-radius: 4px;
    transition: var(--transition-default);
    cursor: pointer;
    opacity: var(--opacity-default);
}

.year-link:hover {
    background: #e0e0e0;
    opacity: var(--opacity-hover);
}

.year-link.active {
    background: #e2e2e2;
    color: var(--color-background);
    opacity: var(--opacity-hover);
}

/* ============================================
   YEAR SECTION - Simple year blocks
   ============================================ */
.year-section {
    margin-bottom: 80px;
    scroll-margin-top: 150px;
}

.year-label {
    font-size: var(--font-size-title);
    font-weight: normal;
    margin-bottom: 30px;
    color: var(--color-light);
    line-height: 1.2;
    font-family: BP;
}

/* ============================================
   PROJECT CARD
   ============================================ */
.project-card {
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.3s ease, margin-bottom 0.5s ease;
    will-change: transform;
}

.project-card.expanded {
    margin-bottom: 80px;
}

.project-card:hover {
    transform: translateY(-4px) translateZ(0);
}

.project-card.hidden {
    display: none;
}

/* Card Info Section */
.card-info {
    position: relative;
    padding: 1px 0;
    /*! margin-bottom: 8px; */
}

.card-info::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

.card-info::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

.project-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-large);
    color: var(--color-primary);
    font-weight: normal;
    margin: 5px 0;
    /* Optimisations pour BP en petite taille */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.02em;
}

/* Card Preview Grid */
.card-preview {
    display: flex;
    gap: 17px;
    height: 120px;
    overflow: hidden;
    width: 100%;
    position: relative;
    /*! padding: 10px 0; */
    margin: 10px 0;
}

.preview-video {
    width: auto;
    height: 140px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Card Preview Disc - For album projects with larger previews */
.card-preview-disc {
    display: flex;
    gap: 17px;
    height: 200px;
    overflow: hidden;
    width: 100%;
    position: relative;
    margin: 10px 0;
}

.preview-video-disc {
    width: auto;
    height: 200px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Card Preview Lluvia - For Lluvia project */
.card-preview-lluvia {
    display: flex;
    gap: 17px;
    height: 140px;
    overflow: hidden;
    width: 100%;
    position: relative;
    margin: 10px 0;
}

.preview-video-lluvia {
    width: auto;
    height: 140px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Media Container (Accordion) */
.media-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    will-change: max-height;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Top rough line */
.media-container::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

/* Bottom rough line */
.media-container::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
    padding-bottom: 101px;
}

.project-card.expanded .media-container {
    max-height: 600px;
    padding: 20px 0 67px;
}

/* Default Text Row - full width */
.default-text-row {
    width: 100%;
    font-size: 18px;
    line-height: 1.4;
    color: #1a1a1a;
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

/* Rough line under text row */
.default-text-row::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

.default-text-row p {
    margin: 20px auto;
    padding-right: 70px;
    color: var(--color-light);
    font-weight: lighter;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.001em;
    line-height: 1.2;
    font-size: 1.2rem;
}

.default-text-row strong {
    font-weight: normal;
    opacity: 0.8;
}

/* Default Content Row: Gallery | Separator | Video */
.default-content-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Media Left Column - Gallery */
.media-left {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 350px;
}

.media-gallery {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gallery-item {
    width: 100%;
    height: auto;
    border: 1px solid #1a1a1a;
}

/* Media Separator */
.media-separator {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    /* padding: 0 15px; */
    width: 8px;
}

.media-separator img {
    width: 6px;
    height: 420px;
    object-fit: fill;
    opacity: var(--opacity-separator);
}

/* Media Right Column - Video */
.media-right {
    flex: 1;
    display: flex;
}

.media-video {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 1px solid #1a1a1a;
    object-fit: cover;
}

/* ============================================
   CUSTOM LAYOUT - La lluvia cae
   ============================================ */
.media-container-lluvia {
    max-height: 0;
    overflow: hidden;
    transition: max-height cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Top rough line */
.media-container-lluvia::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

/* Bottom rough line */
.media-container-lluvia::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

.lluvia-custom.expanded .media-container-lluvia {
    max-height: 600px;
    padding: 0px 0 20px;
}

/* Text row - full width */
.lluvia-text-row {
    width: 100%;
    /*! font-size: 15px; */
    /*! line-height: 1.4; */
    color: #1a1a1a;
    position: relative;
    /*! padding-bottom: 5px; */
    padding-left: 5px;
    /*! margin-right: 40px; */
}

/* Rough line under text row */
.lluvia-text-row::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

.lluvia-text-row p {
    margin: 20px auto;
    padding-right: 70px;
    /*! font-family: BAT; */
    /*! font-family: var(--font-family-display); */
    /*! font-size: var(--font-size-medium); */
    color: var(--color-light);
    font-weight: lighter;
    /*! margin: 5px 0; */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.041em;
    line-height: 1.4;
    font-size: 1.25rem;
}

.lluvia-text-row strong {
    font-weight: normal;
    opacity: 0.8;
}

/* Content row - all elements on one line */
.lluvia-content-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* Video Column */
.lluvia-video {
    width: 559px;
    height: 420px;
    flex-shrink: 0;
}

.lluvia-iframe {
    width: 100%;
    height: 100%;
}

/* Separator height for lluvia layout */
.lluvia-separator-vertical {
    height: 360px;
}

/* Credits viewer (remplace l'ancien display) */
.lluvia-credits {
    width: 270px;
    height: 410px;
    flex-shrink: 0;
    overflow-y: auto;
    /*! padding: 5px 0; */
    background: var(--color-background);
    /*! border: 1px solid var(--color-border); */
    line-height: 1.1;
}

.lluvia-credits h3 {
    font-size: 1rem;
    margin: 0 0 10px 0;
    color: var(--color-primary);
    /*! border-bottom: 1px solid #ddd; */
    /*! padding-bottom: 5px; */
    font-weight: normal;
}

.lluvia-credits ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.lluvia-credits li {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 5px 0;
    color: #333;
}

.lluvia-credits strong {
    color: var(--color-primary);
    font-weight: normal;
    opacity: 0.9;
}

/* Scrollbar styling pour credits */
.lluvia-credits::-webkit-scrollbar {
    width: 6px;
}

.lluvia-credits::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.lluvia-credits::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Gallery thumbnails */
.lluvia-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 220px;
    height: 420px;
    flex-shrink: 0;
    overflow-y: auto;
    padding-right: 5px;
}

.lluvia-thumb {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity 0.3s ease;
    border: 2px solid transparent;
}

.lluvia-thumb:hover {
    opacity: 0.7;
}

.lluvia-thumb.active {
    border-color: #1a1a1a;
    opacity: 1;
}

/* ============================================
   CUSTOM LAYOUT - ESAD Workshop
   ============================================ */
.media-container-ESAD {
    max-height: 0;
    overflow: hidden;
    transition: max-height cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Top rough line */
.media-container-ESAD::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

/* Bottom rough line */
.media-container-ESAD::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

.esad-custom.expanded .media-container-ESAD {
    max-height: 1200px;
    padding: 10px 0 20px;
}

/* Text row - full width */
.esad-text-row {
    width: 100%;
    font-size: 18px;
    line-height: 1.4;
    color: #1a1a1a;
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

/* Rough line under text row */
.esad-text-row::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

.esad-text-row p {
    margin: 20px auto;
    padding-right: 70px;
    color: var(--color-light);
    font-weight: lighter;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.001em;
    line-height: 1.2;
    font-size: 1.2rem;
}

.esad-text-row strong {
    font-weight: normal;
    opacity: 0.8;
}

/* Content row: Thumbnails + Separator + Display */
.esad-content-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* Thumbnails grid - 2 columns with scroll */
.esad-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 180px;
    max-height: 350px;
    overflow-y: auto;
    flex-shrink: 0;
    padding-left: 10px;
}

.esad-thumb {
    width: 100%;
    height: 54px;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s ease;
    border: 2px solid transparent;
}

.esad-thumb:hover {
    opacity: 0.7;
}

.esad-thumb.active {
    border-color: #1a1a1a;
    opacity: 1;
}

/* Separator vertical */
.esad-separator-vertical {
    height: 360px;
}

/* Display zone */
.esad-display {
    width: 280px;
    height: 350px;
    display: flex;
    overflow: hidden;
    flex-shrink: 0;
}

.esad-display-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video thumbnails grid - now in same row */
.esad-video-thumbnails {
    display: grid;
    /* grid-template-columns: repeat(2, 1fr); */
    gap: 8px;
    width: 160px;
    max-height: 350px;
    overflow-y: auto;
    flex-shrink: 0;
}

.esad-video-thumb {
    width: 100%;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s ease;
    border: 2px solid transparent;
}

.esad-video-thumb:hover {
    opacity: 0.7;
}

.esad-video-thumb.active {
    border-color: #1a1a1a;
    opacity: 1;
}

/* Video player zone - now in same row */
.esad-video-player-zone {
    width: 470px;
    height: 350px;
    flex-shrink: 0;
}

.esad-main-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   CUSTOM LAYOUT - ESAD 2025 (Option D avec InfoPanel)
   ============================================ */
.media-container-esad2025 {
    max-height: 0;
    overflow: hidden;
    transition: max-height cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

.esad2025-custom.expanded .media-container-esad2025 {
    max-height: 1000px;
}

/* Text row - description */
.esad2025-text-row {
    width: 100%;
    font-size: var(--font-size-small);
    /*! line-height: 1.6; */
    color: var(--color-primary);
    padding: 15px 0;
    position: relative;
    padding-left: 5px;
    margin-bottom: 20px;
}

/* Rough line above text row */
.esad2025-text-row::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

/* Rough line below text row */
.esad2025-text-row::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

.esad2025-text-row p {
    text-rendering: optimizeLegibility;
    /*! -webkit-font-smoothing: antialiased; */
    /*! -moz-osx-font-smoothing: grayscale; */
    /*! line-height: 1.2; */
    margin: 20px auto;
    padding-right: 90px;
    font-family: BAT;
    /*! font-family: var(--font-family-display); */
    font-size: var(--font-size-medium);
    color: var(--color-light);
    font-weight: lighter;
    margin: 5px 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.001em;
    line-height: 1.35;
    /*! font-size: 1.35rem; */
}

/* Content row - Photos | Video | InfoPanel */
.esad2025-content-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Photo thumbnails column */
.esad2025-photo-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 200px;
    height: 450px;
    flex-shrink: 0;
    overflow-y: auto;
    padding-right: 5px;
}

.esad2025-photo-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition-default);
}

.esad2025-photo-thumb:hover {
    opacity: 0.8;
    border-color: var(--color-primary);
}

/* Scrollbar pour les photos */
.esad2025-photo-thumbnails::-webkit-scrollbar {
    width: 6px;
}

.esad2025-photo-thumbnails::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.esad2025-photo-thumbnails::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Main video player */
.esad2025-video-player-zone {
    width: 450px;
    height: 450px;
    flex-shrink: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.esad2025-main-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Workshop Info Panel */
.esad2025-info-panel {
    width: 400px;
    height: 450px;
    flex-shrink: 0;
    overflow-y: auto;
    /*! padding: 15px; */
    background: var(--color-background);
    /*! overflow: hidden; */
    font-size: var(--font-size-medium);
}

.esad2025-info-panel h3 {
    font-size: 1rem;
    margin: 0 0 10px 0;
    color: var(--color-primary);
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    font-weight: normal;
}

.esad2025-info-panel ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.esad2025-info-panel li {
    font-size: 1.2rem;
    line-height: 1.5;
    /*! margin: 5px 0; */
    color: #464646;
}

.esad2025-info-panel strong {
    color: #464646;
    font-weight: normal;
    opacity: 0.9;
}

/* Scrollbar pour info panel */
.esad2025-info-panel::-webkit-scrollbar {
    width: 6px;
}

.esad2025-info-panel::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.esad2025-info-panel::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   CUSTOM LAYOUT - Nénuphares
   ============================================ */
.media-container-nenuphare {
    max-height: 0;
    overflow: hidden;
    transition: max-height cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Top rough line */
.media-container-nenuphare::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

/* Bottom rough line */
.media-container-nenuphare::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

.nenuphare-custom.expanded .media-container-nenuphare {
    max-height: 2000px;
    /*! padding: 20px 0 20px; */
}

/* Text row - full width */
.nenuphare-text-row {
    width: 100%;
    font-size: 18px;
    line-height: 1.4;
    color: #1a1a1a;
    position: relative;
    /*! padding-bottom: 5px; */
    /*! padding-left: 5px; */
}

/* Rough line under text row */
.nenuphare-text-row::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

.nenuphare-text-row p {
    margin: 20px auto;
    padding-right: 70px;
    color: var(--color-light);
    font-weight: lighter;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.001em;
    line-height: 1.2;
    font-size: 1.2rem;
}

.nenuphare-text-row strong {
    font-weight: normal;
    opacity: 0.8;
}

/* Content row: Video + Separator + Thumbnails */
.nenuphare-content-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* YouTube video */
.nenuphare-video {
    width: 843px;
    height: 470px;
    flex-shrink: 0;
}

.nenuphare-iframe {
    width: 100%;
    height: 100%;
}

/* Separator vertical */
.nenuphare-separator-vertical {
    height: 470px;
}

/* Thumbnails column with vertical scroll */
.nenuphare-thumbnails {
    display: grid;
    gap: 10px;
    width: 230px;
    max-height: 470px;
    overflow-y: auto;
    flex-shrink: 0;
    padding-right: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.nenuphare-thumb {
    width: 100%;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    transition: opacity 0.3s ease;
    border: 2px solid transparent;
}

.nenuphare-thumb:hover {
    opacity: 0.7;
}

.nenuphare-thumb.active {
    border-color: #1a1a1a;
    opacity: 1;
}

/* ============================================
   CUSTOM LAYOUT - Les années lumière
   ============================================ */
.media-container-anneeslumiere {
    max-height: 0;
    overflow: hidden;
    transition: max-height cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Top rough line */
.media-container-anneeslumiere::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

/* Bottom rough line */
.media-container-anneeslumiere::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

.anneeslumiere-custom.expanded .media-container-anneeslumiere {
    max-height: 800px;
}

/* Text row - full width */
.anneeslumiere-text-row {
    width: 100%;
    font-size: 16px;
    line-height: 1.4;
    color: #1a1a1a;
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

/* Rough line under text row */
.anneeslumiere-text-row::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

.anneeslumiere-text-row p {
    margin: 20px auto;
    padding-right: 70px;
    color: var(--color-light);
    font-weight: lighter;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.001em;
    line-height: 1.2;
    font-size: 1.2rem;
}

.anneeslumiere-text-row strong {
    font-weight: normal;
    opacity: 0.8;
}

/* Content row: Video + Separator + Thumbnails */
.anneeslumiere-content-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* YouTube video */
.anneeslumiere-video {
    width: 843px;
    height: 470px;
    flex-shrink: 0;
}

.anneeslumiere-iframe {
    width: 100%;
    height: 100%;
}

/* Separator vertical */
.anneeslumiere-separator-vertical {
    height: 400px;
}

/* Thumbnails column with vertical scroll */
.anneeslumiere-thumbnails {
    display: grid;
    gap: 10px;
    width: 230px;
    max-height: 470px;
    overflow-y: auto;
    flex-shrink: 0;
    padding-right: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.anneeslumiere-thumb {
    width: 100%;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    transition: opacity 0.3s ease;
    border: 2px solid transparent;
}

.anneeslumiere-thumb:hover {
    opacity: 0.7;
}

.anneeslumiere-thumb.active {
    border-color: #1a1a1a;
    opacity: 1;
}

/* ============================================
   CUSTOM LAYOUT - LAL Album
   ============================================ */
.media-container-lalalbum {
    max-height: 0;
    overflow: hidden;
    transition: max-height cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Top rough line */
.media-container-lalalbum::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

/* Bottom rough line */
.media-container-lalalbum::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

.lalalbum-custom.expanded .media-container-lalalbum {
    max-height: 1200px;
    padding: 0px 0 20px;
}

/* Text row - full width */
.lalalbum-text-row {
    width: 100%;
    font-size: 18px;
    line-height: 1.4;
    color: #1a1a1a;
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

/* Rough line under text row */
.lalalbum-text-row::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

.lalalbum-text-row p {
    margin: 20px auto;
    padding-right: 70px;
    color: var(--color-light);
    font-weight: lighter;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.001em;
    line-height: 1.2;
    font-size: 1.2rem;
}

.lalalbum-text-row strong {
    font-weight: normal;
    opacity: 0.8;
}

/* Content row: Thumbnails + Separator + Display */
.lalalbum-content-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Thumbnails grid - 2 columns with vertical scroll */
.lalalbum-thumbnails {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 230px;
    max-height: 600px;
    overflow-y: auto;
    flex-shrink: 0;
    padding-right: 20px;
}

.lalalbum-thumb {
    width: 100%;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    transition: opacity 0.3s ease;
    border: 2px solid transparent;
}

.lalalbum-thumb:hover {
    opacity: 0.7;
}

.lalalbum-thumb.active {
    border-color: #1a1a1a;
    opacity: 1;
}

/* Separator vertical */
.lalalbum-separator-vertical {
    height: 600px;
}

/* Display viewer */
.lalalbum-display {
    width: 843px;
    height: 600px;
    display: flex;
    overflow: hidden;
    flex-shrink: 0;
}

.lalalbum-display-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================
   CUSTOM LAYOUT - LAL Clip
   ============================================ */
.media-container-lalclip {
    max-height: 0;
    overflow: hidden;
    transition: max-height cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Top rough line */
.media-container-lalclip::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

/* Bottom rough line */
.media-container-lalclip::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

.lalclip-custom.expanded .media-container-lalclip {
    max-height: 800px;
    padding: 20px 0 20px;
}

/* Text row - full width */
.lalclip-text-row {
    width: 100%;
    font-size: 18px;
    line-height: 1.4;
    color: #1a1a1a;
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

/* Rough line under text row */
.lalclip-text-row::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

.lalclip-text-row p {
    margin: 20px auto;
    padding-right: 70px;
    color: var(--color-light);
    font-weight: lighter;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.001em;
    line-height: 1.2;
    font-size: 1.2rem;
}

.lalclip-text-row strong {
    font-weight: normal;
    opacity: 0.8;
}

/* Content row: Just YouTube video */
.lalclip-content-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* YouTube video */
.lalclip-video {
    width: 100%;
    max-width: 1160px;
    height: 630px;
    flex-shrink: 0;
}

.lalclip-iframe {
    width: 100%;
    height: 100%;
}

/* ============================================
   CUSTOM LAYOUT - Idiophone
   ============================================ */
.media-container-idiophone {
    max-height: 0;
    overflow: hidden;
    transition: max-height cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Top rough line */
.media-container-idiophone::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

/* Bottom rough line */
.media-container-idiophone::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
    z-index: 10;
}

.idiophone-custom.expanded .media-container-idiophone {
    max-height: 1200px;
    padding: 20px 0 20px;
}

/* Text row - full width */
.idiophone-text-row {
    width: 100%;
    font-size: 18px;
    line-height: 1.4;
    color: #1a1a1a;
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

/* Rough line under text row */
.idiophone-text-row::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background: url('SVG/rough_line.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: var(--opacity-rough-line);
}

.idiophone-text-row p {
    margin: 20px auto;
    padding-right: 70px;
    color: var(--color-light);
    font-weight: lighter;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.001em;
    line-height: 1.2;
    font-size: 1.2rem;
}

.idiophone-text-row strong {
    font-weight: normal;
    opacity: 0.8;
}

/* Content row: Video Thumbnails + Separator + Video Player */
.idiophone-content-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Video thumbnails grid - 3 columns with vertical scroll */
.idiophone-video-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 230px;
    max-height: 600px;
    overflow-y: auto;
    flex-shrink: 0;
    padding-right: 10px;
}

.idiophone-video-thumb {
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s ease;
    border: 2px solid transparent;
}

.idiophone-video-thumb:hover {
    opacity: 0.7;
}

.idiophone-video-thumb.active {
    border-color: #1a1a1a;
    opacity: 1;
}

/* Separator vertical */
.idiophone-separator-vertical {
    height: 600px;
}

/* Video player zone */
.idiophone-video-player-zone {
    width: 843px;
    height: 600px;
    flex-shrink: 0;
}

.idiophone-main-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* ============================================
   MODAL
   ============================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.05);
    z-index: 2000;
    overflow-y: auto;
    padding: 60px 20px 40px;
}

.modal.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    max-width: 800px;
    margin: 0 auto;
    background: #fafafa;
    border: 1px solid #1a1a1a;
    padding: 60px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #1a1a1a;
    border: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.modal-close:hover {
    transform: rotate(90deg);
}

.close-icon {
    width: 24px;
    height: 24px;
    filter: invert(1);
}

/* ============================================
   FOOTER - Positioned in bottom border
   ============================================ */
.page-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.page-footer span {
    font-family: 'BP', sans-serif;
    font-size: 18px;
    color: #1a1a1a;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    body {
        padding: 30px;
    }

    .page-frame {
        padding: 50px 40px;
    }

    .main-container {
        padding: 10px;
    }

    .nav-logo .logo {
        width: 50px;
        max-width: 50px;
    }
}

@media (max-width: 768px) {
    body {
        padding: 20px;
    }

    /* Hide all borders on mobile */
    .page-frame::before,
    .page-frame::after,
    .main-container::after {
        display: none;
    }

    .page-frame {
        padding: 20px;
        min-height: auto;
        margin: 20px auto;
    }

    /* Logo column full width on mobile */
    .logo-column {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin-bottom: 20px;
        justify-content: center;
    }

    .main-container {
        padding: 10px;
    }

    .page-footer span {
        font-size: 14px;
    }

    .nav-bar {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .nav-logo .logo {
        width: 50px;
        max-width: 50px;
    }

    .filter-btn,
    .cv-link {
        font-size: 18px;
        padding: 4px 12px;
    }

    .year-link {
        font-size: 20px;
    }

    .year-label {
        font-size: 32px;
    }

    .card-preview {
        flex-wrap: wrap;
        height: auto;
    }

    .preview-video {
        width: calc(50% - 4px);
        height: 100px;
    }

    .card-preview-disc {
        flex-wrap: wrap;
        height: auto;
    }

    .preview-video-disc {
        width: calc(50% - 4px);
        height: 150px;
    }

    .card-preview-lluvia {
        flex-wrap: wrap;
        height: auto;
    }

    .preview-video-lluvia {
        width: calc(50% - 4px);
        height: 120px;
    }

    .media-container {
        flex-direction: column;
    }

    .media-left {
        flex: 1;
        max-width: 100%;
    }

    .media-separator {
        display: none;
    }

    /* Custom lluvia layout - mobile adjustments */
    .lluvia-text-row {
        font-size: 14px;
    }

    .lluvia-content-row {
        flex-direction: column;
    }

    .lluvia-video {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .lluvia-separator-vertical {
        display: none;
    }

    .lluvia-credits {
        width: 100%;
        height: auto;
        max-height: 400px;
    }

    .lluvia-gallery {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
    }

    .lluvia-thumb {
        width: 120px;
        flex-shrink: 0;
    }

    /* Custom ESAD layout - mobile adjustments */
    .esad-text-row {
        font-size: 14px;
    }

    .esad-content-row {
        flex-direction: column;
    }

    .esad-thumbnails {
        width: 100%;
        max-height: 200px;
    }

    .esad-separator-vertical {
        display: none;
    }

    .esad-display {
        width: 100%;
        height: 300px;
    }

    .esad-video-thumbnails {
        width: 100%;
        max-height: 200px;
    }

    .esad-video-thumb {
        height: 100px;
    }

    .esad-video-player-zone {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Custom ESAD 2025 layout - mobile adjustments */
    .esad2025-text-row {
        font-size: 14px;
        padding: 10px 0;
    }

    .esad2025-content-row {
        flex-direction: column;
    }

    .esad2025-photo-thumbnails {
        width: 100%;
        height: auto;
        max-height: 250px;
        grid-template-columns: repeat(4, 1fr);
    }

    .esad2025-separator-vertical {
        display: none;
    }

    .esad2025-video-player-zone {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .esad2025-info-panel {
        width: 100%;
        height: auto;
        max-height: 400px;
    }

    /* Custom Nénuphares layout - mobile adjustments */
    .nenuphare-text-row {
        font-size: 14px;
    }

    .nenuphare-content-row {
        flex-direction: column;
    }

    .nenuphare-video {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .nenuphare-separator-vertical {
        display: none;
    }

    .nenuphare-thumbnails {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
    }

    .nenuphare-thumb {
        width: 120px;
        flex-shrink: 0;
    }

    /* Custom Les années lumière layout - mobile adjustments */
    .anneeslumiere-text-row {
        font-size: 14px;
    }

    .anneeslumiere-content-row {
        flex-direction: column;
    }

    .anneeslumiere-video {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .anneeslumiere-separator-vertical {
        display: none;
    }

    .anneeslumiere-thumbnails {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
    }

    .anneeslumiere-thumb {
        width: 120px;
        flex-shrink: 0;
    }
}