body {
    background: black;
    color: white;
    margin: 0;
    width: 100%;
    overflow-x: hidden;
    /* supprime le scroll horizontal */
}

body.no-scroll {
    overflow: hidden;
    /* bloque le scroll vertical */
    overflow-y: scroll;
    /* garde la barre de scroll visible */
    height: 100vh;
}

body.light {
    background: white;
    color: black;
}

/* Quand l'overlay est ouvert, forcer la top-nav / bottom-nav visibles */
body.overlay-open .top-nav {
    transform: translateY(0) !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

body.overlay-open .bottom-nav {
    transform: translateY(0) !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* Empêcher la top-nav d'être cachée par la transition d'origine */
body.overlay-open .top-nav.hidden {
    transform: translateY(0) !important;
}

/* idem pour bottom-nav */
body.overlay-open .bottom-nav.hidden {
    transform: translateY(0) !important;
}

/* Masquer les filtres quand l’overlay À propos est ouvert */
body.overlay-open .category-filters {
    opacity: 0;
    transform: translateY(-10px);
    /* petit effet de glissement vers le haut */
    pointer-events: none;
    /* empêche les clics pendant qu’ils sont cachés */
}







/* ---------------------------
   PORTFOLIO_BALADE
   --------------------------- */
/* A3 plein écran */
.a3-fullscreen {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: black;
}

.a3-fullscreen img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* 📱 VERSION MOBILE — A3 collées, pas d’espace entre elles */
@media (max-width: 900px) {
    .a3-fullscreen {
        height: auto;          /* ← Laisse l’image prendre sa hauteur naturelle */
        padding: 0;            /* ← aucune marge intérieure */
        margin: 0;             /* ← aucune marge extérieure */
    }

    .a3-fullscreen img {
        width: 100%;           /* ← s’adapte parfaitement au tel */
        height: auto;
        max-height: none;      /* ← important pour éviter un “vide” en bas */
        object-fit: contain;   /* ← l’image reste entière */
    }
}


/* About intro */

#introOverlay {
    overflow: hidden;
    will-change: transform;
}

.intro-overlay {
    pointer-events: auto !important;
}

.intro-overlay img {
    pointer-events: none !important; /* le clic passe à travers */
        width: 100%;
    height: 100%;
    object-fit: cover;
}


.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.hidden {
    opacity: 100;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.intro-overlay.hide-up {
    transform: translateY(-100%);
    transition: transform 0.6s ease;
}




/* ---------------------------
   Footer spécifique pour index
   --------------------------- */
/* Liens réseaux sociaux en Montserrat */
.site-footer .footer-center .footer-social a {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    /* un peu plus grand pour la lisibilité */
    font-weight: 400;
}

/* Copyright en Montserrat */
.site-footer .footer-left .footer-copyright {
    padding-top: 5px;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    /* enlève marge par défaut */
    font-size: 0.7rem;
    /* option : un peu plus petit que le reste */
    font-weight: 400;
    /* option : normal, tu peux mettre 500 si tu veux plus marqué */
}

/* override propre : spécifique à l'élément qui a les deux classes */
.site-footer.footer-double {
    padding: 5rem 1rem 1.5rem 1rem;
    /* top | left/right | bottom */
    font-size: 0.9rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: #000;
    /* fond noir */
    color: #fff;
    /* texte blanc */
    font-family: 'Cormorant', serif;
    box-sizing: border-box;
}

/* Colonnes */
.site-footer .footer-col {
    flex: 1;
    min-width: 0;
}

.site-footer .footer-social a {
    margin: 0 0.4rem 0 0;
    /* un peu d'espace horizontal mais pas de "blocage" en bas */
}

/* Alignements */
.site-footer .footer-left {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.site-footer .footer-center {
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Liens */
.site-footer a {
    color: #fff;
    text-decoration: none;
    transition: color .18s ease, transform .12s ease;
}

.site-footer a:hover,
.site-footer a:focus {
    color: #ccff3e;
    /* effet jaune déjà utilisé sur le site */
    transform: translateY(-2px);
}

/* Réseaux sociaux - espace et séparateurs légers */
.footer-social a {
    margin: 0 0.6rem;
    display: inline-block;
    font-weight: 400;
}

/* Mode light (cohérence avec ton .light existant) */
body.light .site-footer {
    background: white;
    /* garde le pied de page noir même en mode clair si tu veux */
    color: black;
}




/* Galerie de trois images */
.gallery-three {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
}

.gallery-three .gallery-fixed {
    flex: 1;
    max-width: 800px;
    aspect-ratio: 5 / 4;
    /* forme rectangle vertical */
}

.gallery-fixed .image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-fixed .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === Garder la galerie 3 projets inchangée en mode light === */
/* Placer ceci en fin de styles.css (ou après les règles body.light) */

.gallery-white-bg {
    /* couleur de fond du conteneur (garde ton jaune) */
    background-color: #ccff3e !important;
    color: black !important;
}

/* Empêche body.light .gallery de blanchir le fond ici */
body.light .gallery-white-bg .gallery {
    background: transparent !important;
}

/* FORCE l'overlay à utiliser les variables CSS par-item,
   même si body.light a un rule qui passe après */
.gallery-white-bg .gallery-item .overlay,
body.light .gallery-white-bg .gallery-item .overlay {
    background-color: var(--hover-color, rgba(0, 0, 0, 0.7)) !important;
    color: var(--text-color, white) !important;
}

/* --- Galerie 3 projets : texte noir --- */
.gallery-white-bg .caption h3,
.gallery-white-bg .caption p,
.gallery-white-bg .overlay h3,
.gallery-white-bg .overlay p {
  color: black !important;
}

/* Pour être sûr que le texte de hover reste noir même en mode clair */
body.light .gallery-white-bg .overlay {
  color: black !important;
}

body.light .gallery-white-bg .caption h3,
body.light .gallery-white-bg .caption p {
  color: black !important;
}


/* Footer */
.footer-double {
    padding: 6rem 2rem;
    background: black;
    color: white;
    font-family: 'Cormorant', serif;
    gap: 1rem;
}

.footer-double .footer-col {
    flex: 1;
}

.footer-double .left {
    text-align: center;
}

.footer-double .right {
    text-align: center;
}

.footer-double a {
    color: white;
    text-decoration: none;
}

.footer-double a:hover {
    text-decoration: underline;
}

body.light .footer-double {
    background: white;
    color: black;
}

body.light .footer-double a {
    color: black;
}

/* images contain */

.split-images.split-contain-new {
    display: flex;
    width: 100%;
}

.split-images.split-contain-new .split-half {
    flex: 1;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    overflow-x: hidden;
}

.split-images.split-contain-new .split-half img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* images / texte */
.split-screen {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.split-left,
.split-right {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1rem;
}

.split-left img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.split-right {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.split-text {
    text-align: left;
    max-width: 400px;
    font-family: 'Cormorant', serif;
    line-height: 1.4;
}


/* Second ecran full image COVER */
.full-image-cover {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
}

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


/* Second ecran full image */
.full-image-section {
    width: 100%;
    height: 100%;
    /* prend toute la hauteur de l'écran */
    overflow: hidden;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
}

.full-image-section video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Laisse toute la vidéo visible */
}

.full-image-section img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* remplit sans déformation */
    display: block;
}

/* Double ecran deux images */
.split-images {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100vh;
    gap: 1rem;
    padding: 0.5rem 1rem;
}

.split-half {
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.split-half img {
    width: 100%;
    height: 100%;
    display: block;
}

.split-half video {
    width: 100%;
    height: 100%;
    display: block;
}

.split-contain img {
    object-fit: contain;
}

.split-cover img {
    object-fit: cover;
}

.split-cover video {
    object-fit: cover;
}

/* Texte droite et image a gauche */
.split-cover-text {
    display: flex;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    gap: 1rem;
    overflow: hidden;
}

.cover-left {
    width: 50%;
    height: 100%;
}

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

.text-right {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    /* centre horizontalement */
    align-items: center;
    /* centre verticalement */
    padding: 6rem 8rem;
    box-sizing: border-box;
}

.text-wrapper {
    max-width: 500px;
    text-align: left;
    /* ← important : texte aligné à gauche */
    font-family: 'Cormorant', serif;
    line-height: 1.6;
}


/* Categories */
/* Animation d'entrée pour les boutons de filtre */
.filter-button-enter {
    opacity: 0;
    transform: translateY(20px);
    animation: filterFadeIn 0.6s ease forwards;
}

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

.category-filters {
    text-align: right;
    /* ✅ aligner à droite */
    margin: 1rem;
    /* petit espace à droite et à gauche */
    display: flex;
    justify-content: flex-end;
    /* ✅ pousse les boutons à droite */
    flex-wrap: wrap;
    /* permet le retour à la ligne si trop long */
    gap: 0.3rem;
    /* espace entre boutons */
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.category-filters button {
    font-family: 'Montserrat', sans-serif;
    transition: opacity 0.35s ease, transform 0.35s ease;
    opacity: 1;
    transform: translateY(0);
}

.category-filters button.hidden-by-overlay {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    pointer-events: none !important;
}

.category-filters button {
    background: transparent;
    border: none;
    color: white;
    padding: 8px 16px;
    font-size: 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-filters button.active,
.category-filters button:hover {
    background: #ccff3e;
    border: none;
    color: black;
}

body.light .category-filters button {
    border-color: #ccff3e;
    color: black;
}

body.light .category-filters button.active,
body.light .category-filters button:hover {
    background: #ccff3e;
    color: black;
}

.gallery-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.gallery-item.show {
    opacity: 1;
    transform: translateY(0);
}

/* Effet image */
/* Apparition animée de l'image flottante */
.floating-image-enter {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
    animation: floatingFadeIn 1s ease-out forwards;
}

@keyframes floatingFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


.top-nav {
      position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    z-index: 4000;
    transition: transform 0.4s ease, background 0.3s ease, box-shadow 0.6s 
}

/* Quand overlay "À propos" est ouvert → top-nav transparente */
body.overlay-open .top-nav {
    background: transparent !important;
    box-shadow: none !important;
    color: white !important;
}

/* En mode clair → transparent aussi, texte noir */
body.overlay-open.light .top-nav {
    background: transparent !important;
    color: black !important;
}

/* Liens */
body.overlay-open .top-nav .nav-right a {
    color: white !important;
    transition: color 0.3s ease;
}

body.overlay-open.light .top-nav .nav-right a {
    color: black !important;
}


.top-nav.hidden {
    transform: translateY(-100%);
}

.top-nav .logo {
    height: 40px;
    width: auto;
}

.top-nav .nav-center {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.top-nav .nav-right a {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 0.9rem;
    color: white;
    text-decoration: none;
    /* ✅ pas souligné en normal */
    font-family: 'Montserrat', sans-serif;
    transition: color 0.5s ease, text-decoration 0.5s ease;
    cursor: pointer;
}

.top-nav .nav-right a:hover {
    text-decoration: underline;
    /* ✅ souligné seulement au hover */
}

/* Version light */
body.light .top-nav .nav-right a {
    color: black;
    text-decoration: none;
}

body.light .top-nav .nav-right a:hover {
    text-decoration: underline;
}

body.light .top-nav {
    background: white;
    color: black;
}


/* espace en haut pour le contenu */
body {
    padding-top: 70px;
}

/* bottom-nav juste avec darkmode à droite */
.bottom-nav {
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1rem 2rem;
    z-index: 3000;
    box-sizing: border-box;
    transform: translateY(0);
    /* ✅ état par défaut */
    transition: transform 0.3s ease;
    /* ✅ anime dans les deux sens */
}

.bottom-nav.hidden {
    transform: translateY(100%);
    transition: transform 0.5s ease;
}

.bottom-nav .right-toggle button {
    background-color: black;
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    font-size: 0.7rem;
    color: white;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
}

/* === MODE CLAIR : Overlay À propos === */
body.light .info-container.split-layout {
    background: white !important;       /* fond blanc */
    color: black !important;            /* texte noir */
}

body.light .about-text {
    color: black !important;            /* texte principal noir */
}

body.light .about-text .social-buttons a {
    color: black !important;            /* liens noirs */
}

body.light .about-text .social-buttons a:hover {
    color: #ccff3e !important;          /* hover jaune fluo comme ailleurs */
}

body.light .about-image {
    background: white;                  /* fond image blanc */
}

body.light .about-image img {
    filter: brightness(1) contrast(1);  /* garde la photo naturelle */
}





/* A PROPOS */
.about-text .about-logo {
    display: block;
    height: 60px;
    /* ajuste la taille à ton goût */
    width: auto;
    margin: 0 auto 1.5rem auto;
    /* centré, avec espace en bas */
}


.info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 2000;
    display: block;
    transition: opacity 0.6s ease;
    opacity: 1;
}

.info-overlay.hidden {
    display: none;
    opacity: 0;
}

/* Nouvelle mise en page overlay "À propos" */
.info-container.split-layout {
    display: flex;
    flex-direction: row;
    background: black;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
}

.about-text {
    flex: 0.98;
    color: white;
    padding: 4rem 12rem 4rem 6rem; /* ← marges générales plus équilibrées */
    padding-top: 50px; /* démarre juste sous la top-nav */
    font-family: 'Cormorant', serif;
    font-size: 1rem;
    line-height: 1.4;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.about-text h2 {
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
}

.about-image {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.about-image img {
    max-width: 100%;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* L’image principale de gauche dans l’overlay */
.about-image > img:first-child {
    max-width: 100%;
    display: block;
    position: relative;
    z-index: 1;
}

/* Les images supplémentaires injectées par le script */
.about-image .overlay-image {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80px;
    /* taille fixe ou % */
    height: auto;
    opacity: 0.9;
    cursor: grab;
    z-index: 2;
}

.horizontal-texts {
    display: flex;
    flex-direction: column;
    /* ← les paragraphes passent en vertical */
    align-items: flex-start;
    /* aligné à gauche */
    flex-wrap: wrap;
    /* utile si écran plus petit */
}

.MONTSERRATLIGHT {
    font-family: 'Montserrat', sans-serif;
    /* ou une autre de ton choix */
    font-weight: 400;
    font-size: 14px;
    /* adapte selon besoin */

}

/* Réseaux sociaux dans l'overlay À propos */
.about-text .social-buttons {

    display: flex;
    gap: 0.5rem;
    /* espace entre les liens */
    margin-top: 2rem;
    justify-content: flex-start;
}

.about-text .social-buttons a {
    background: none;
    /* plus de fond noir */
    color: white;
    /* couleur par défaut */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-decoration: none;
    padding: 0;
    /* supprime le padding de bouton */
    transition: color 0.3s ease;
}

.about-text .social-buttons a:hover {
    color: #ccff3e;
    /* jaune déjà utilisé */
}




/* GALLERIE */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 1rem;
    gap: 1rem;
    box-sizing: border-box;
    align-items: start;
}

.gallery-item {
    display: block;
    margin: 0;
    /* pas de marge additionnelle, on garde le gap */
    width: auto;
}

.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.image-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}


.image-wrapper img,
.image-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.caption {
    display: none;
}

.caption h3 {
    text-transform: uppercase;
    font-weight: 600;
    /* Graisse plus marquée */
    font-family: 'montserrat';
    color: white;
}

.caption p {
    font-weight: 500;
    /* Graisse plus marquée */
    font-family: 'Cormorant';
    color: white;
}

/* Mode clair : galerie */
body.light .gallery {
    background: white;
}

body.light .gallery-item .caption h3,
body.light .gallery-item .caption p {
    color: black;
}

body.light .gallery-item .overlay {
    color: black;
}



/* Gallerie overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hover-color, rgba(0, 0, 0, 0.7));
    color: var(--text-color, white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* verticalement */
    align-items: center;
    /* horizontalement */
    opacity: 0;
    text-align: center;
    padding-top: 1rem;
    box-sizing: border-box;
}

.overlay h3 {
    margin: 0;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 700;
    /* Graisse plus marquée */
    font-family: 'Montserrat';
}

.overlay p {
    margin-top: 0.1rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
}


/* Au survol */
.gallery-item:hover .overlay {
    opacity: 1;
}

.gallery-item:hover img,
.gallery-item:hover video {
    opacity: 0.2;
}






@media (min-width: 769px) {
    #introOverlay img {
        object-fit: cover !important;
    }
}



/* Version mobile → la vidéo s’adapte en "contain" */
@media (max-width: 768px) {
    #introOverlay img {
        object-fit: contain !important;
        background: black; /* pour cacher les bandes si besoin */
         height: 100%; /* IMPORTANT pour garder la hauteur du parent */
    }
    
        .intro-overlay.hide-up {
        transform: translateY(-100%) !important;
    }
}






@media (max-width: 1000px) {
   
   /* ==== FIX INTRO BOTTOM TEXT (placer à la fin de styles.css) ==== */
/* stoppe le blend qui rend le texte parfois invisible */
#introOverlay .intro-bottom-text,
.intro-overlay .intro-bottom-text {
mix-blend-mode: difference !important;
  color: white;           /* couleur par défaut (dark mode) */
  z-index: 10;
}

/* laisse les spans .hover-anim hériter proprement */
#introOverlay .intro-bottom-text .hover-anim,
.intro-overlay .intro-bottom-text .hover-anim {
    
  color: inherit;
mix-blend-mode: difference !important;
}

/* MODE CLAIR : forcer texte noir ici (place après les autres règles .light) */
body.light #introOverlay .intro-bottom-text,
body.light .intro-overlay .intro-bottom-text {
  color: white;
  mix-blend-mode: normal;
}

body.light #introOverlay .intro-bottom-text .hover-anim,
body.light .intro-overlay .intro-bottom-text .hover-anim {
  color: inherit;
}


    /* FOOTER */
    .site-footer {
        flex-direction: column;
        gap: 4rem;
        text-align: center;
        padding: 1rem 1rem;
    }

    .site-footer .footer-left,
    .site-footer .footer-center,
    .site-footer .footer-right {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .site-footer .footer-right {
        order: 3;
    }

    .site-footer .footer-center {
        order: 2;
    }

    .site-footer .footer-left {
        order: 1;
    }




    /* BUG BAS DE PAGE */
    .split-images,
    .split-half,
    .split-cover-text,
    .full-image-section,
    .full-image-cover {
        height: auto !important;
        min-height: auto !important;
    }


    /* ESPACES BAS ET HAUT */
    .mobile-top-space {
        padding-bottom: 8rem;
    }


    .mobile-bottom-space {
        padding-bottom: 8rem;
        background-color: #ccff3e;
    }

    .mobile-bottom-space2 {
        padding-bottom: 8rem;
    }

    body.light .mobile-bottom-space2 {
        background-color: white;
    }




    /* footer */
    .footer-double {
        grid-template-columns: repeat(1, 1fr);
        text-align: left;
    }

    .footer-double .left {
        text-align: center;
    }

    .footer-double .right {
        text-align: center;
    }

    /* full screen */
    .full-image-section {
        height: auto;
        /* ✅ l'image prend la hauteur naturelle */
    }

    .full-image-section img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    /* full screen */
    .full-image-cover {
        height: auto;
        /* ✅ l'image prend la hauteur naturelle */
    }

    .full-image-cover img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }



    /* images / texte le deuxieme */
    .split-cover-text {
        flex-direction: column;
        height: auto;
    }

    .cover-left,
    .text-right {
        width: 100%;
        height: auto;
    }

    .cover-left img {
        width: 100%;
        height: 70vh;
        object-fit: cover;
        display: block;
    }

    .text-right {
        padding: 8rem 3rem;
        text-align: center;
    }

    .text-wrapper {
        max-width: 100%;
        text-align: center;
    }

    /* images / texte */
    .split-screen {
        flex-direction: column;
        height: auto;
    }

    .split-right {
        padding: 8rem 3rem;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .split-right h1,
    .split-right p {
        text-align: center;
    }

    .split-left,
    .split-right {
        width: 100%;
        height: auto;
    }

    .split-left img {
        height: auto;
    }

    /* double ecran deux images */
    .split-images {
        flex-direction: column;
        height: auto;
    }

    .split-half {
        width: 100%;
        height: 70vh;
        /* ↗️ hauteur plus grande */
    }


    /* images / contain */
    .split-images.split-contain-new {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh;
        /* ← ajoute cette ligne */
    }

    .split-images.split-contain-new .split-half {

        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        padding: 1rem !important;
        box-sizing: border-box;
    }

    .split-images.split-contain-new .split-half img {

        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* image flottante */
    /* IMAGE INTRO - taille naturelle, bloc centré */
    .intro-image img.draggable-image {
        display: block;
        width: auto;
        /* important : ne pas forcer 100% */
        max-width: 100px;
        /* ajuste si tu veux plus grand */
        height: auto;
        margin: 0;
        /* on gère la position via JS */
        cursor: grab;
        user-select: none;
        touch-action: none;
    }


    /* overlay */
    .info-container.split-layout {
        flex-direction: column;
        height: 100vh;
        overflow-y: auto;
    }

    .about-text {
        padding: 7rem 1rem;
        gap: 2rem;
        font-size: 0.95rem;
        flex: none;
        order: 1;
    }

    .about-image {
        width: 100%;
        height: auto;
        flex: none;
        order: 2;
    }

    .about-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .horizontal-texts {
        flex-direction: column;
        gap: 1.5rem;
    }

    body.light .gallery-item .caption h3,
    body.light .gallery-item .caption p {
        color: black;
        /* ou #222 si tu veux un gris foncé */
    }

    /* galerie */
    .category-filters {
        display: none !important;
    }



    .gallery {
        display: grid;
        padding: 1rem;
        box-sizing: border-box;
        align-items: start;
        grid-template-columns: 1fr;
    }

    .gallery-item {
        transition: none !important;
        margin-bottom: 0;
        break-inside: avoid;
    }

    .gallery-item:hover .overlay {
        opacity: 0 !important;
    }

    .gallery-item:hover img,
    .gallery-item:hover video {
        opacity: 1 !important;
    }

    .overlay {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .caption {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .gallery-item .caption {
        margin-top: 0;
        /* annule le margin */
        padding-top: 0.5rem;
        /* même espace, mais pris en compte par le script */
        padding-bottom: 5rem;
        /* espace sous le texte, visible et compté */
    }

    .gallery-item .caption h3,
    .gallery-item .caption p {
        margin: 0.2rem 0;
        padding: 0;
        /* Supprime marges internes éventuelles */
    }

    /* Top bar */
    .top-bar {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1rem 0;
    }

    .center-logo {
        position: static;
        transform: none;
        order: -1;
    }


    /* bottom nav mobile : bouton darkmode en bas à droite */
    .bottom-nav {
        position: fixed;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        /* ✅ centre horizontalement */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem;
        z-index: 3000;
        box-sizing: border-box;
    }

    .bottom-nav.hidden {
        transform: translate(-50%, 120%);
        /* ✅ descend vers le bas depuis le centre */
    }

    /* on cache les éléments de la top-bar non utiles en mobile */
    .left-links {
        display: none;
    }

    /* on garde visible le toggle (darkmode) */
    .right-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* style du bouton (mobile) — ajuste la taille si besoin */
    .bottom-nav .right-toggle button {
        background-color: black;
        border: none;
        border-radius: 999px;
        padding: 0.5rem 0.9rem;
        font-size: 0.85rem;
        color: white;
        cursor: pointer;
    }

    /* hover / light mode */
    .bottom-nav .right-toggle button:hover {
        background: #ccff3e;
        color: black;
    }

    body.light .bottom-nav .right-toggle button {
        background: white;
        color: black;
    }


    .bottom-nav a,
    .bottom-nav button {
        background-color: black;
        border: none;
        border-radius: 999px;
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        color: white;
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .bottom-nav a:hover,
    .bottom-nav button:hover {
        background: #ccff3e;
        color: black;
    }

    body.light .bottom-nav a,
    body.light .bottom-nav button {
        color: black;
        background-color: white;
    }

    body.light .bottom-nav a:hover,
    body.light .bottom-nav button:hover {
        background: #ccff3e;
        color: black;
    }


}