/* ==========================================================
   MATERIEL V2
========================================================== */

.materiel-v2{
    padding:100px 20px;
    background-image:
linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)),
url("../img/fond-materiel.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    min-height: 1000px;
}

.materiel-container{

    display:grid;

    grid-template-columns:repeat(2,minmax(280px,1fr));

    gap:30px;

    max-width:900px;

    margin:50px auto;

}

.titre-colonne{

    text-align:center;

    color:#00d9ff;

    margin-bottom:25px;

    font-size:32px;

    text-shadow:0 0 18px #00d9ff;

}

.materiel-btn{

    background:rgba(18,18,25,.82);
backdrop-filter:blur(8px);  

    border:1px solid rgba(255,0,168,.20);

    border-radius:18px;

    padding:22px;

    margin-bottom:18px;

    cursor:pointer;

    color:#fff;

    font-size:24px;

    font-weight:600;

    transition:.30s;

}
.galerie-header{
    text-align:center;
    margin-bottom:15px;
    margin-top:-20px;
}
.materiel-btn:hover{

    transform:translateY(-3px);

    border-color:#00d9ff;

    box-shadow:0 0 20px rgba(0,217,255,.25);

}

.materiel-btn.active{

    background:linear-gradient(90deg,#00d9ff,#ff2ea8);

    color:white;

    box-shadow:0 0 25px rgba(255,46,168,.45);

}

/* ==========================================
   Zone d'affichage des photos
========================================== */

#materiel-display{

    max-width:1200px;

    margin:60px auto 0;

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .45s ease,
        transform .45s ease;

}

#materiel-display.show{

    opacity:1;

    transform:translateY(0);

}

.materiel-photos{
    display:grid;
    grid-template-columns:repeat(4,210px);
    justify-content:center;
    gap:18px;
}

.materiel-photos img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:16px;

    cursor:pointer;

    transition:.30s;

    border:2px solid rgba(255,255,255,.08);

    box-shadow:0 8px 20px rgba(0,0,0,.35);

}

.materiel-photos img:hover{

    transform:scale(1.05);

    border-color:#00d9ff;

    box-shadow:0 0 25px rgba(0,217,255,.35);

}

.materiel-description{

    margin-top:35px;

    text-align:center;

    color:#dddddd;

    font-size:19px;

    line-height:1.7;

}
.titre-section{

}
@media(max-width:768px){

    .materiel-container{

        grid-template-columns:1fr;

    }
    .materiel-photos{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .materiel-photos img{
        width:100%;
        aspect-ratio:1/1;
    }
}