/* =========================
   GRID / LAYOUT
========================= */

#vignettes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 600px) {
    #vignettes {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================
   VIGNETTE
========================= */

.vignette {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    touch-action: manipulation;
}

.vignette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================
   OVERLAY BASE
========================= */

.vignette::after {
    content: "";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* =========================
   CROIX ROUGE (FULL)
========================= */

.vignette.cross::after {
    content: "";
    background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
<line x1="15" y1="15" x2="85" y2="85" stroke="red" stroke-width="12" stroke-linecap="round"/>\
<line x1="85" y1="15" x2="15" y2="85" stroke="red" stroke-width="12" stroke-linecap="round"/>\
</svg>') center / 80% no-repeat;
}

/* =========================
   CERCLE VERT (FULL)
========================= */

.vignette.circle::after {
    content: "";
    background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
<circle cx="50" cy="50" r="35" stroke="green" stroke-width="10" fill="none"/>\
</svg>') center / 80% no-repeat;
}

/* =========================
   OPTIONNEL : FEEDBACK VISUEL
========================= */

.vignette:active {
    transform: scale(0.97);
    transition: transform 0.1s;
}

/* =========================
   BOUTONS NIVEAUX
========================= */

#jv-level-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.jv-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    font-size: 16px;
    transition: transform 0.1s, opacity 0.2s;
}

/* Couleurs */
.jv-btn[data-level="niveau1"] {
    background: #45b248; /* jaune */
}

.jv-btn[data-level="niveau2"] {
    background: #55d0f5; /* bleu */
}

.jv-btn[data-level="niveau3"] {
    background: #e42c1a; /* vert */
}

/* actif */
.jv-btn.active {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.2) inset;
    transform: scale(0.97);
}

/* mobile touch */
.jv-btn:active {
    transform: scale(0.95);
}/* Petit */

#vignettes{padding:1em}
#vignettes.niveau1 {
    border:10px solid #45b248 ;
}

/* Moyen */
#vignettes.niveau2 {
    border:10px solid #55d0f5;
}

/* Adulte */
#vignettes.niveau3 {
    border:10px solid #e42c1a;
}