/* ==========================================================================
   STYLE DE LA PAGE PORTFOLIO
   ========================================================================== */

/* On autorise le défilement sur cette page */
body:not(.home) {
    overflow: auto;
}

/* Le conteneur principal de la page */
.portfolio-page {
    padding: 60px 20px;
}

/* ... Les animations restent les mêmes ... */
.portfolio-page .page-title,
.portfolio-grid,
.about-section {
    opacity: 0;
}
.portfolio-page .page-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: #fff;
    animation: fadeInUp 0.8s ease-out forwards;
}
.portfolio-grid {
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}
.about-section {
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

/* ==========================================================================
   GRILLE PHOTO MINIMALISTE (STYLE "MUR D'IMAGES")
   ========================================================================== */

/* Le conteneur de la grille */
.portfolio-grid {
    column-count: 3;
    column-gap: 4px; /* MODIFIÉ : On réduit l'espace entre les colonnes */
    max-width: 1200px;
    margin: 0 auto;
}

/* Chaque élément de la grille */
.portfolio-item {
    display: block;
    text-decoration: none;
    
    /* MODIFIÉ : On retire tout ce qui crée l'effet "carte" */
    /* background-color: #222; */ /* RETIRÉ */
    /* border-radius: 8px; */ /* RETIRÉ */
    /* overflow: hidden; */ /* RETIRÉ */
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.2); */ /* RETIRÉ */
    
    margin-bottom: 4px; /* MODIFIÉ : On utilise cette marge comme espace vertical */
    break-inside: avoid;
    transition: opacity 0.3s ease; /* MODIFIÉ : On change l'animation de survol */
}

/* Au survol de la souris, on baisse juste un peu l'opacité */
.portfolio-item:hover {
    opacity: 0.8;
}

/* L'image elle-même */
.portfolio-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Le titre sous l'image */
.portfolio-item .item-title {
    display: none; /* MODIFIÉ : On cache complètement le titre de la grille */
}


/* ==========================================================================
   ANIMATIONS D'APPARITION EN FONDU (ORDRE AJUSTÉ)
   ========================================================================== */
   
.portfolio-page .page-title,
.about-section,
.portfolio-grid {
    opacity: 0; /* Les éléments sont invisibles au départ */
}

/* 1. Le titre apparaît en premier */
.portfolio-page .page-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: #fff;
    animation: fadeInUp 0.8s ease-out forwards; /* Délai de 0s */
}

/* 2. La section "À Propos" apparaît ensuite (avec un petit délai) */
.about-section {
    animation: fadeInUp 0.8s ease-out 0.2s forwards; /* Délai de 0.2s */
}

/* 3. La grille apparaît en dernier (avec un délai plus long) */
.portfolio-grid {
    animation: fadeInUp 0.8s ease-out 0.4s forwards; /* Délai de 0.4s */
}


/* ==========================================================================
   STYLE DE LA SECTION "À PROPOS"
   ========================================================================== */

.about-section {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1200px; /* MODIFIÉ : On réduit la largeur maximale */
    margin: 100px auto;
    padding: 0 20px;
}
.about-text {
    flex: 0 1 55%;
}
.about-text h2 {
    font-size: 2rem;
    margin-top: 0;
}
.about-image {
    flex: 0 1 45%;
    position: relative;
}
.about-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
.social-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px;
    border-radius: 5px;
    display: flex;
    gap: 15px;
}
.social-overlay a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
}

/* L'animation utilisée par tous les éléments */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   PERSONNALISATION DE LIGHTBOX V2 (Correction flèches + contour)
   ========================================================================== */

/* On force le conteneur principal (celui avec le fond blanc) à être transparent.
   On utilise !important pour être sûr que notre règle gagne. */
.lb-outerContainer {
    background-color: transparent !important;
    border-radius: 0 !important; /* On en profite pour retirer les coins arrondis */
}

/* On supprime la bordure blanche que Lightbox ajoute directement SUR l'image. */
.lightbox .lb-image {
    border: none !important;
    border-radius: 0 !important;
}

/* On rend aussi le conteneur de la légende transparent */
.lb-dataContainer {
    background-color: transparent !important;
}

/* ==========================================================================
   PERSONNALISATION DE LIGHTBOX (Suppression du Texte)
   ========================================================================== */

/* Masque le titre de l'image (légende) */
.lb-caption {
    display: none !important;
}

/* Masque le compteur d'images (ex: "Image 1 de 5") */
.lb-number {
    display: none !important;
}

/* On masque le conteneur de données si tout le texte est masqué, pour qu'il n'occupe plus d'espace */
.lb-dataContainer {
    display: none !important; 
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* ==========================================================================
   ADAPTATION MOBILE (Styles de la grille mis à jour)
   ========================================================================== */

@media (max-width: 1024px) {
    .portfolio-grid {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .about-section {
        flex-direction: column;
        margin-top: 60px;
        text-align: center;
    }
}

@media (max-width: 580px) {
    .portfolio-grid {
        column-count: 1;
    }
}