/* 
 * STYLES POUR LA SECTION PROJETS
 * Grille de cartes de projets avec images et descriptions
 * Auteur: Manley.B
 */

/* ==================== SECTION PROJETS ==================== */
/* Configuration principale de la section projets */

#projets {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8vw;
    gap: 0;
    text-align: center;
}

#projets h2 {
    user-select: none;
    font-size: 1.5em;
    color: #000000;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

#projets p {
    font-size: 1.2em;
    color: #333533a6;
    margin-top: 0;
    margin-bottom: 1.5em;
}

/* ==================== GRILLE DE PROJETS ==================== */
/* 
 * Layout en grille CSS pour afficher les cartes de projets
 * Auto-responsive avec repeat(auto-fit, minmax())
 */

.projets-flexbox {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5em;
    justify-content: center;
    align-items: stretch;
    margin: 2em 0;
}

/* ==================== CARTES DE PROJETS ==================== */
/* Styles pour chaque carte de projet avec hover effects */

.projet-card {
    background: #E8EDDF;
    color: #000000;
    border-radius: 18px;
    box-shadow: 0 4px 18px #0006;
    padding: 2em 1.5em;
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 1;
    cursor: pointer;
}

.projet-card:hover {
    transform: translateY(-12px) scale(1.08);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

/* ==================== IMAGES DES PROJETS ==================== */
/* Configuration des images avec object-fit pour un aspect uniforme */

.projet-img {
    width: 100%;
    max-width: 220px;
    border-radius: 12px;
    margin-bottom: 1em;
    object-fit: cover;
    box-shadow: 0 2px 12px #0004;
}

/* ==================== BOUTON VOIR PLUS ==================== */
/* Style pour le bouton menant vers GitHub */

.btn-voir-plus {
    user-select: none;
    display: block;
    margin: 2em auto 0 auto;
    padding: 1em 2em;
    font-size: 1.1em;
    background: rgba(40, 40, 40, 0.9);
    color: #F5CB5C;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}

.btn-voir-plus:hover {
    background: #F5CB5C;
    color: #1a1a1a;
    border-color: #F5CB5C;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(245, 203, 92, 0.4);
}

/* ==================== STYLES RESPONSIVES ==================== */
/* Adaptations de la grille pour tablettes et mobile */

.projets-encadre {
    width: 100%;
    max-width: 1400px;
    margin: 3em auto;
    padding: 3em 1em 2em 0em;
    background: #CFDBD5;
    border-radius: 32px;
    box-shadow: 0 8px 32px #0006;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(2px);
}

@media (max-width: 57vh) {
    #projets h2 {
        font-size: 4em;
    }
    
    #projets p {
        font-size: 2.8em;
    }
    
    .projets-flexbox {
        flex-direction: column;
        gap: 2em;
        align-items: center;
    }
    .projet-card {
        width: 95vw;
        max-width: 650px;
        min-width: 550px;
        padding: 4em 3em;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .projet-card h3 {
        font-size: 3em;
        margin-bottom: 0.8em;
    }
    
    .projet-card p {
        font-size: 3em;
        line-height: 1.5;
        margin-bottom: 1em;
    }
    
    .projet-img {
        max-width: 300px;
        height: 250px;
        margin-bottom: 1.5em;
    }
    
    .projet-card:hover {
        transform: translateY(-15px) scale(1.06);
        box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    }
    .projet-card:nth-child(n+4) {
        display: none;
    }
    .projets-encadre {
        margin-top: 15em;
        padding: 1em 1em 1em 1em;
        border-radius: 18px;
    }
    .btn-voir-plus {
        font-size: 2.25em;
        padding: 1.2em 2.5em;
    }
}