/*
============================================================
style_ctf.css - Spécifique à ctf.html
style_cyber.css - Contient la base commune : polices, variables de thème, barre de navigation,
bouton clair/sombre et animations).
============================================================
*/

#ctf_title {
    font-size: 3.5em;
    text-align: center;
}

.navbar a,
#theme-toggle {
    font-size: 1.0em;
}

/* Grille des vignettes */
/*
3 par ligne en grand écran, elles passent à la ligne automatiquement en petit.
Chaque vignette garde son ratio 16:9.
*/
.ctf_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    max-width: 80%;
    margin: 0 auto;
}

/* Vignette cliquable : image 16:9 servant de lien vers un WU */
.ctf_card {
    flex: 1 1 22rem;
    min-width: 0;
    max-width: 30rem;
}

.ctf_card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
    transition: opacity 0.5s ease-in-out;
}

.ctf_card:hover img {
    opacity: 0.8;
}

.ctf_coming img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
    opacity: 0.7;
}