/* 🎯 MENU PAGES PROJET - Version simple */
.project-page #main-nav {
    transition: transform 0.4s ease-out, opacity 0.4s ease-out !important;
}

.project-page #main-nav.menu-hidden {
    transform: translateY(-100px) !important;
    opacity: 0 !important;
}

.project-page #main-nav.menu-visible {
    transform: translateY(0px) !important;
    opacity: 1 !important;
}

/* ✨ ANIMATIONS HERO PAGES PROJET */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Titre principal - apparaît en premier */
#hero-projet h1 {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

/* Div avec les 3 colonnes - apparaît en deuxième */
#hero-projet .hero-columns {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

/* Alternative si la classe hero-columns n'est pas présente */
#hero-projet .grid {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

/* ✨ IMAGE HERO - apparaît en troisième avec la même animation */
#hero-projet .mt-14.relative,
.hero-image-container,
.hero-image {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

/* Taille du texte courant dans les pages projet (bloc de droite uniquement) */
.project-page #corps-projet .flex-grow p,
.project-page #corps-projet .flex-grow span.text-base,
.project-page #corps-projet .flex-grow li {
    font-size: 1.25rem;
    line-height: 1.6;
}

/* Exception : paragraphes de section1 conservent 28px */
.project-page #corps-projet #section1 p:first-of-type,
.project-page #corps-projet #section1 p:nth-of-type(2) {
    font-size: 1.75rem;
    line-height: 1.4;
}

/* Colonne gauche : reste collée (sticky) au scroll sur desktop.
   align-self:flex-start empêche l'étirement flex (sinon pas de marge pour coller),
   et height:auto annule h-screen qui figeait la hauteur. */
@media (min-width: 640px) {
    #corps-projet > div:first-of-type {
        align-self: flex-start !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        height: auto !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
    }
}

/* Configuration de base pour tous les éléments */
#hero-projet {
    overflow: visible !important;
    position: relative !important;
    padding-bottom: 80px !important;
}

/* Image styling */
.hero-image-container img {
    display: block !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
}

/* Modification pour mobile - en dessous de 640px */
@media (max-width: 640px) {
    .hero-image-container {
        height: 350px; /* Ajustez cette valeur selon vos besoins */
        overflow: hidden;
        border-radius: 16px; /* Assure que le container garde ses coins arrondis */
    }
    
    .hero-image-container img {
        width: 100% !important;
        height: 100% !important; /* Force la hauteur à remplir le container */
        object-fit: cover !important; /* Maintient les proportions et crop si nécessaire */
        object-position: center !important; /* Centre l'image lors du crop */
        border-radius: 16px !important;
    }
}


/* === FORCER EN COLONNE SEULEMENT SI VRAIMENT TROP PETIT === */

/* Par défaut : toujours 3 colonnes côte à côte */
.hero-columns {
    display: grid !important;
    grid-template-columns: max-content max-content max-content !important;
    gap: 0.5rem 1rem !important; /* Gaps très réduits pour mobile */
    align-items: center !important;
    justify-content: center !important;
}

/* Seulement sur TRÈS petit mobile : passer en colonne */
@media (max-width: 400px) {
    .hero-columns {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 1.5rem !important;
    }
}

/* Tablette et plus : gaps normaux */
@media (min-width: 768px) {
    .hero-columns {
        gap: 2rem 4rem !important;
    }
}

/* Desktop : gaps larges */
@media (min-width: 1024px) {
    .hero-columns {
        gap: 2rem 8rem !important;
    }
}