/* =========================================
   1. IMPORTATION DES POLICES
   ========================================= */
@font-face {
    font-family: 'OTT_Herbus';
    src: url('../fonts/OTT_Herbus-BoldSerif.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: url('../fonts/FuturaStd-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* =========================================
   2. RÉINITIALISATION BASIQUE
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Futura', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ui-text {
    font-family: 'Futura', sans-serif;
}

/* =========================================
   3. TITRE FIXÉ & FULLSCREEN VIDÉO
   ========================================= */
.artist-name {
    font-family: 'OTT_Herbus', serif;
    font-size: clamp(4rem, 10vw, 8rem);
    text-align: center;
    text-transform: uppercase;
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 100%;
    pointer-events: none;
}

.project-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.fullscreen-video {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.fullscreen-video video, .fullscreen-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#sound-toggle {
    position: absolute;
    bottom: 4vh;
    right: 4vw;
    background: transparent;
    border: 1px solid white;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    z-index: 10;
}

#sound-toggle:hover {
    background: white;
    color: black;
}

/* =========================================
   4. CONTENU SOUS LA VIDÉO
   ========================================= */
.content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15vh 5vw 15vh 5vw;
    width: 100%;
    position: relative;
    z-index: 10;
}

.technical-sheet {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 15vh auto;
    line-height: 1.4;
    font-size: clamp(1.5rem, 3vw, 3rem); 
}

/* Description & Galerie */
.split-section {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 5vw;
    align-items: flex-start;
}

.editorial {
    flex: 1;
    min-width: 300px;
    line-height: 1.6;
    font-size: 1.1rem;
    text-align: justify;
}

.editorial p {
    margin-bottom: 1.5rem;
}

.editorial p:last-child {
    margin-bottom: 0;
}

/* Le Carrousel (Galerie) */
.gallery-wrapper {
    flex: 1;
    min-width: 300px;
    position: relative;
    display: flex;
    align-items: center;
}

.gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%;
    gap: 15px;
}

.gallery-track::-webkit-scrollbar {
    display: none;
}

.carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    scroll-snap-align: center;
    border-radius: 4px;
}

.carousel-btn {
    position: absolute;
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 1.2rem;
    transition: background 0.3s ease;
}

.carousel-btn:hover {
    background: rgba(0,0,0,0.8);
}

.carousel-btn.prev {
    left: -20px;
}

.carousel-btn.next {
    right: -20px;
}

/* =========================================
   5. NAVIGATION PRÉCÉDENT / SUIVANT
   ========================================= */
.project-navigation {
    position: fixed;
    bottom: 4vh;
    left: 5vw;
    right: 5vw;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.project-navigation.is-visible {
    opacity: 1;
}

.project-navigation a {
    color: white;
    text-decoration: none;
    font-family: 'OTT_Herbus', serif;
    text-transform: uppercase;
    font-size: 2rem;
    pointer-events: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s ease;
}

.project-navigation.is-visible a {
    pointer-events: auto;
}

.project-navigation a:hover {
    border-bottom: 2px solid white;
}

/* =========================================
   6. PAGE D'ACCUEIL (HOME)
   ========================================= */
.home-body {
    background-color: #F2F0EF;
    color: #000000;
    transition: background-color 0.5s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.home-body.hover-active {
    color: #ffffff;
}

.home-body.hover-active .main-header,
.home-body.hover-active .lineup-artist,
.home-body.hover-active .main-footer {
    color: #ffffff;
}

.home-body.hover-active .menu-toggle,
.home-body.hover-active .insta-link {
    color: #ffffff;
}

.home-body.hover-active .lang-switcher a {
    color: rgba(255, 255, 255, 0.5);
}
.home-body.hover-active .lang-switcher a.active {
    color: #ffffff;
}

.home-body.hover-active .crush-logo {
    filter: invert(1); 
}

/* --- EN-TÊTE (Header) --- */
.main-header {
    position: fixed;
    top: 4vh;
    left: 5vw;
    right: 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition: color 0.5s ease;
}

.top-logo .crush-logo {
    height: 30px;
    width: auto;
    transition: filter 0.5s ease;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 3vw;
}

/* NOUVEAU : LE LIEN INSTAGRAM */
.insta-link {
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
    text-transform: uppercase;
    transition: opacity 0.3s ease, color 0.5s ease;
}

.insta-link:hover {
    opacity: 0.5;
}

.lang-switcher a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.3);
    transition: color 0.3s ease;
}

.lang-switcher a.active {
    color: #000000;
}

.menu-toggle {
    background: none;
    border: none;
    font-size: 1rem;
    color: #1A1A1A; 
    -webkit-appearance: none; 
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.5s ease;
}

/* --- LINE-UP (Au centre) --- */
.home-lineup {
    flex-grow: 1;
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: center !important;
    align-items: center !important;
    padding: 12vh 5vw; 
    max-width: 1400px;
    margin: 0 auto;
}

/* On groupe les artistes et le "& MORE" */
.lineup-artist, a.lineup-more {
    font-family: 'OTT_Herbus', serif !important;
    font-size: clamp(2rem, 5.5vw, 4.5rem) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #000000 !important; 
    line-height: 1.1 !important;
    transition: color 0.5s ease, transform 0.3s ease;
    display: inline-block !important;
    text-align: center;
}

/* LA CORRECTION MAGIQUE POUR LE BLANC AU SURVOL */
body.home-body.hover-active .lineup-artist,
body.home-body.hover-active a.lineup-more {
    color: #ffffff !important; 
}

/* --- MODE ORDINATEUR (Festival + Gros points dynamiques) --- */
@media (min-width: 1025px) {
    .lineup-artist::after {
        content: " \2022 ";
        margin: 0 1.5vw;
        display: inline-block;
        pointer-events: none;
        color: inherit; 
    }
    
    .lineup-artist.no-dot::after {
        content: none !important;
    }
    
    .lineup-artist:last-of-type::after {
        content: none !important;
    }
    
    a.lineup-more {
        width: 100%; 
        margin-top: 3vh; 
    }
}

/* Effet au survol (Ordinateur uniquement) */
@media (hover: hover) and (pointer: fine) {
    .lineup-artist:hover, a.lineup-more:hover {
        transform: scale(1.05);
    }
}

/* --- MODE MOBILE (Disco dynamique, compact, corrections menu) --- */
@media (max-width: 1024px) {
    body.home-body {
        overflow-x: hidden !important; 
        overflow-y: auto !important; 
        height: auto !important;
        transition: background-color 0.6s ease !important; 
    }

    /* CORRECTION 1 : LE BLANC S'APPLIQUE *UNIQUEMENT* SUR LA HOME PAGE */
    .home-body .lineup-artist, 
    .home-body a.lineup-more, 
    .home-body .menu-toggle, 
    .home-body .lang-switcher a, 
    .home-body .tagline,
    .home-body .insta-link { 
        color: #ffffff !important;
    }
    .home-body .crush-logo {
        filter: brightness(0) invert(1) !important;
    }
    .home-body .lang-switcher a:not(.active) {
        color: rgba(255, 255, 255, 0.4) !important; 
    }

    .home-body .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 12vh !important; 
        background-color: var(--mobile-bg, #6170a1) !important; 
        z-index: 1000 !important; 
        display: flex !important;
        align-items: center !important;
        padding: 0 5vw !important; 
        pointer-events: auto !important;
        transition: background-color 0.6s ease !important; 
    }

    .home-lineup {
        flex-direction: column !important; 
        flex-wrap: nowrap !important;
        padding: 15vh 5vw 5vh 5vw !important; 
        gap: 0 !important; 
        height: auto !important;
        justify-content: flex-start !important; 
    }
    
    .lineup-artist, a.lineup-more {
        font-size: clamp(1.5rem, 7.5vw, 3.5rem) !important; 
        line-height: 1.1 !important; 
        margin: 0 !important; 
        width: 100%;
    }
    
    .lineup-artist::after {
        content: none !important; 
    }
    
    a.lineup-more {
        margin-top: 3vh !important; 
    }

    .home-body .main-footer {
        position: relative !important;
        left: 0 !important; 
        right: 0 !important; 
        width: 100% !important; 
        padding: 5vh 5vw 8vh 5vw !important;
        background-color: transparent !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    /* --- CORRECTIONS DU MENU OVERLAY (MOBILE) --- */
    
    /* CORRECTION 2 : Fond noir absolu pour cacher l'effet disco */
    .overlay-menu {
        background-color: #1A1A1A !important;
    }
    
    /* On force les textes du menu en blanc */
    .overlay-menu a, 
    .overlay-menu .close-menu {
        color: #ffffff !important;
    }

    /* CORRECTION 3 : Rapproche "Mentions Légales" du bouton CONTACT */
    .overlay-menu .menu-legal {
        margin-top: 4vh !important; 
        position: relative !important;
        bottom: auto !important;
    }

    /* --- CORRECTIONS 4 & 5 : GESTION PARFAITE DU HEADER ET DU BOUTON FERMER --- */
    body:has(.overlay-menu.is-open) .main-header {
        background-color: transparent !important;
        pointer-events: none !important; 
    }

    body:has(.overlay-menu.is-open) .logo-container,
    body:has(.overlay-menu.is-open) .lang-switcher {
        pointer-events: auto !important;
    }

    body:has(.overlay-menu.is-open) .menu-toggle {
        opacity: 0 !important;
    }

    .overlay-menu .close-menu {
        position: absolute !important;
        top: 0 !important;
        right: 5vw !important; 
        height: 12vh !important; 
        z-index: 1005 !important; 
        background: transparent !important;
        border: none !important;
        color: #ffffff !important; 
        font-size: 1rem !important; 
        font-family: inherit !important;
        text-transform: uppercase !important;
        display: flex !important;
        align-items: center !important;
        cursor: pointer !important;
    }

    /* CORRECTION 6 : On cache totalement le lien INSTA sur mobile */
    .insta-link {
        display: none !important;
    }
}

/* --- PIED DE PAGE (Footer) --- */
.main-footer {
    position: fixed;
    bottom: 4vh;
    left: 5vw;
    right: 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 100;
    pointer-events: none;
    transition: color 0.5s ease;
}

.bottom-logo .crush-logo {
    height: 45px;
    width: auto;
    transition: filter 0.5s ease;
}

.tagline {
    font-size: 0.8rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* =========================================
   7. MENU OVERLAY (Plein écran)
   ========================================= */
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #1A1A1A;
    color: #F2F0EF;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.overlay-menu.is-open {
    opacity: 1;
    pointer-events: auto;
}

.close-menu {
    position: absolute;
    top: 4vh;
    right: 5vw;
    background: none;
    border: none;
    color: #F2F0EF;
    font-family: 'Futura', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.close-menu:hover {
    color: rgba(242, 240, 239, 0.5);
}

.menu-nav {
    display: flex;
    flex-direction: column;
    gap: 3vh;
    text-align: center;
    margin-bottom: 8vh;
}

.menu-nav a {
    font-family: 'OTT_Herbus', serif;
    font-size: clamp(3rem, 6vw, 5rem);
    color: #F2F0EF;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.3s ease;
}

.menu-nav a:hover {
    color: rgba(242, 240, 239, 0.5);
    transform: scale(1.05);
}

/* --- Mentions Légales --- */
.menu-legal {
    position: absolute;
    bottom: 4vh;
}

.menu-legal a {
    font-family: 'Futura', sans-serif;
    font-size: 0.8rem;
    color: rgba(242, 240, 239, 0.4);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.menu-legal a:hover {
    color: #F2F0EF;
}


/* =========================================
   8. AJUSTEMENTS POUR LA PAGE PROJET
   ========================================= */
.project-body .crush-logo {
    filter: brightness(0) invert(1);
}

.project-body .lang-switcher a {
    color: rgba(255, 255, 255, 0.4);
}

.project-body .lang-switcher a.active {
    color: #ffffff;
}

.project-body .main-header {
    pointer-events: none;
}

.project-body .logo-container,
.project-body .header-right {
    pointer-events: auto;
}


/* =========================================
   9. PAGE RÉALISATIONS (WORK) & GRILLE
   ========================================= */
html, body {
    overflow-x: hidden;
    width: 100%;
}

.work-body {
    background-color: #F2F0EF;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
}

.work-logo {
    filter: none; 
}

/* La Grille */
.work-gallery {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 3vw;
    padding: 30vh 5vw 10vh 5vw;
    max-width: 1600px;
    margin: 0 auto;
    
    position: relative;
    z-index: 50; 
}

/* Une case projet */
.work-item {
    position: relative;
    flex: 0 1 calc(33.33% - 2vw); 
    min-width: 300px;
    max-width: 450px; 
    aspect-ratio: 3 / 4; 
    overflow: hidden; 
    border-radius: 4px;
    background-color: #E0E0E0; 
    cursor: pointer;
    text-decoration: none;
    
    pointer-events: auto !important;
}

.work-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Le fond coloré qui apparaît par-dessus */
.work-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--project-color);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; 
    transition: opacity 0.5s ease, background-color 0.5s ease;
    pointer-events: none; 
}

.work-title {
    font-family: 'OTT_Herbus', serif;
    font-size: clamp(2rem, 5vw, 4rem);
    color: #ffffff; 
    text-transform: uppercase;
    text-align: center;
    transform: translateY(20px); 
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    padding: 20px;
    z-index: 10;
}

@media (hover: hover) and (pointer: fine) {
    .work-item:hover .work-media {
        opacity: 0; 
        transform: scale(1.05); 
    }
    .work-item:hover .work-overlay {
        opacity: 1; 
    }
    .work-item:hover .work-title {
        opacity: 1;
        transform: translateY(0); 
    }
}

/* =========================================
   VERSION MOBILE ET TABLETTE (Sans survol)
   ========================================= */
@media (max-width: 1024px), (hover: none) {
    .work-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .work-overlay {
        opacity: 1 !important;
        background-color: rgba(0, 0, 0, 0.3) !important; 
    }
    .work-title {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}


/* =========================================
   10. CORRECTIONS : HEADER FIXE & SCROLL
   ========================================= */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
}

.overlay-menu, .fullscreen-video {
    width: 100% !important; 
}

.work-body .main-header {
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 4vh 5vw !important;
    background-color: #F2F0EF !important; 
    z-index: 900 !important;
    box-sizing: border-box;
}

.work-gallery {
    box-sizing: border-box;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto 200px auto !important;
    padding-top: 150px !important; 
}

.work-body .main-footer {
    position: relative !important; 
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    flex-shrink: 0;
    padding: 150px 5vw 40px 5vw !important; 
    background-color: #F2F0EF !important;
    z-index: 100 !important; 
    box-sizing: border-box;
    pointer-events: auto !important;
}

/* =========================================
   11. PAGE CONTACT & FORMULAIRE
   ========================================= */
.contact-container {
    flex: 1 0 auto;
    padding-top: 20vh;
    padding-bottom: 150px !important;
    display: flex;
    justify-content: center;
}

.contact-form-wrapper {
    width: 90%;
    max-width: 600px;
}

.crush-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.form-field {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 10px;
}

.form-field label {
    font-family: 'Futura', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    color: rgba(26, 26, 26, 0.6);
}

.form-field input, 
.form-field textarea {
    background: none;
    border: none;
    font-family: 'OTT_herbus', serif;
    font-size: 1.5rem;
    color: #1a1a1a;
    outline: none;
    padding: 0;
}

.form-field textarea {
    font-size: 1.2rem;
    resize: none;
}

.submit-btn {
    align-self: flex-start;
    background: #1a1a1a;
    color: #F2F0EF;
    border: none;
    padding: 15px 40px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: opacity 0.3s ease;
    margin-top: 40px;
    margin-bottom: 60px;
}

.submit-btn:hover {
    opacity: 0.8;
}

.form-success {
    font-size: 2rem;
    text-align: center;
    color: #1a1a1a;
}

.contact-body .main-footer {
    position: relative !important; 
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    flex-shrink: 0;
    padding: 80px 5vw 40px 5vw !important; 
    background-color: #F2F0EF !important; 
    z-index: 100 !important; 
    box-sizing: border-box;
    pointer-events: auto !important;
}

/* =========================================
   12. CORRECTION MOBILE : TITRE PAGE PROJET & NAVIGATION
   ========================================= */
@media (max-width: 1024px) {
    .project-body .artist-name {
        margin-top: 6vh !important; 
        top: 8vh !important; 
    }

    /* --- CORRECTION 7 : NAVIGATION PROJET (PRÉCÉDENT/SUIVANT) SUR MOBILE --- */
    .project-navigation {
        position: relative !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        padding: 5vh 5vw 10vh 5vw !important; 
        opacity: 1 !important; 
        pointer-events: auto !important; 
        z-index: 10 !important;
    }

    .project-navigation a {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }
}

/* =========================================
   13. PAGE À PROPOS (MODE INTERACTIF ONE-SCREEN)
   ========================================= */
.about-body.interactive-mode {
    height: 100vh;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    transition: background-color 0.6s ease, color 0.6s ease;
}

.about-body.interactive-mode .main-header {
    position: absolute !important; 
}

.about-interactive-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15vh 5vw 15vh 5vw;
    box-sizing: border-box;
}

/* LE MENU DES CATÉGORIES (En ligne, en haut) */
.about-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2vh;
    margin-bottom: 5vh;
    
    position: relative !important;
    z-index: 9999 !important; 
    pointer-events: auto !important;
}

.tab-btn {
    background: none;
    border: none;
    font-family: 'OTT_Herbus', serif;
    font-size: clamp(1rem, 2vw, 1.8rem);
    color: #1A1A1A;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.3s ease, color 0.3s ease;
    padding: 0;
    
    position: relative !important;
    pointer-events: auto !important; 
}

.tab-btn:hover {
    opacity: 0.7;
}

.tab-btn.active {
    opacity: 1;
}

.about-panels {
    position: relative;
    flex: 1;
}

.about-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5vw;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.about-panel.active {
    opacity: 1;
    visibility: visible;
}

.panel-text {
    flex: 1;
    max-width: 50%;
    font-size: clamp(1.1rem, 1.3vw, 1.3rem);
    line-height: 1.6;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}

.panel-text::-webkit-scrollbar {
    display: none; 
}

.panel-text p {
    text-align: justify;
    margin-bottom: 1.2em;
}

.panel-text p:last-child {
    margin-bottom: 0;
}

.panel-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 65vh; 
}

.panel-image img {
    width: 450px;
    height: 100%;
    object-fit: cover; 
    object-position: center; 
    border-radius: 4px; 
}

.about-body.interactive-mode .main-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 2vh 5vw 4vh 5vw !important;
    background-color: transparent !important;
    z-index: 100;
}

/* =========================================
   MOBILE (Adaptation pour petits écrans)
   ========================================= */
@media (max-width: 1024px) {
    .about-body.interactive-mode {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }
    
    .about-interactive-container {
        padding-top: 15vh;
        padding-bottom: 25vh;
    }

    .about-tabs {
        display: flex;
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 15px 25px; 
        padding-bottom: 15px;
        
        overflow-x: visible;
        white-space: normal; 
    }

    .about-panel {
        position: relative;
        flex-direction: column-reverse;
        height: auto;
        display: none; 
        gap: 30px;
    }

    .about-panel.active {
        display: flex;
    }

    .panel-text { max-width: 100%; font-size: 1.2rem; }
    
    .panel-image { 
        justify-content: center; 
        height: 50vh; 
        width: 100%;
    }
    
    .panel-image img {
        width: 100%;
    }
    
    .about-body.interactive-mode .main-footer {
        position: relative !important;
    }
}