.grid-genres{
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr)); 
    gap: 10px;                     
    width: 90vw;
    margin: auto;
    padding-top:30px;
    padding-bottom:30px;
}
.genre-card a{
    display: block;
    position: relative;
    overflow: hidden;              
    border-radius: 12px;           
    background: #f5f3ff;          
}
.genre-card img{
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;          
    object-fit: cover;             
    display: block;                
}
.genre_desc{
    position: absolute;
    inset: auto 0 0 0;             
    color: #fff;
    padding: 16px;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.genre-card{ margin: 0; }   



.genre-list {
    width: 90vw;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}
.genre-list h2{
    color: blueviolet;
    font-size: 3rem;
    padding-bottom: 20px;
}
.grid-films{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* auto responsive */
    gap: 2rem;
    flex-wrap: wrap; 
}

.film-card{
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    overflow:hidden;
}
.film-card a{
    text-decoration: none;
}
.film-card .thumb img{
    width:100%;
    aspect-ratio: 3 / 4;    /* ratio carte (3:4) */
    object-fit: cover;
    display:block;
}
.titre_film{
    color: black;
    text-align: center;
    text-decoration: none;
}




.film_fiche{
    width: 90vw;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

.col_media{
    display: flex;
    gap: 2rem;
}
.film_titre h2{
    color: blueviolet;
    font-size: 2rem;
    margin-bottom: 30px;
}
.film_titre p{
    font-size: 1.3rem;
}
.col_infos{
    display: flex;
    flex-direction: column;
}
.col_infos h2{
    color: blueviolet;
    font-size: 2rem;
}
.synopsis-body{
    color: #A165D9;
}
.tech{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: #A165D9;
}
@media only screen and (max-width: 1000px){
    .film_fiche{
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .col_media{
        flex-direction: column;
    }
    iframe{
        width: 100%;
    }
}
@media only screen and (max-width: 600px) {
    .grid-genres{
        grid-template-columns: repeat(1, minmax(220px, 1fr)); 
    }
    .film-card{
        width: 100%;
    }
    .grid-films{
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); /* auto responsive */
    }
}