/* ==================================================
   BLOC — LOGOS / RÉFÉRENCES
================================================== */

/* Figma : titre de section à 30 px, tuiles de 202 × 96 arrondies à 12,
   20 px de gouttière — l'échelon g-3 de Bootstrap vaut 16 px, on ajuste. */
.logos__titre {
    font-size: 1.875rem;
    margin-bottom: 20px;
}

.logos__grille {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
    align-items: center;
    list-style: none;
    padding-left: 0;
}

/* La tuile est à l'intérieur de la colonne, pas sur la colonne :
   Bootstrap met la gouttière en marge interne de `.col`, un liseré posé
   dessus ferait se toucher les tuiles. */
.logos__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 12px;
    background: var(--v-blanc);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
}

/* Les logos arrivent avec des fonds et des contrastes très divers :
   la désaturation les fait tenir ensemble, la couleur revient au survol. */
.logos__image {
    max-width: 100%;
    height: auto;
    max-height: 56px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.logos__item:hover .logos__image {
    filter: grayscale(0);
    opacity: 1;
}

/* Figma pose la mention dans un cartouche à fond papier, 11 px. */
.logos__legende {
    margin: 20px 0 0;
    padding: 12px 16px;
    background: var(--v-papier);
    border-radius: var(--v-radius-sm);
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    color: var(--v-texte-meta);
}

@media (max-width: 575px) {
    /* 30 px de titre au-dessus d'une rangée de logos de 106 px : le
       titre pesait plus lourd que ce qu'il annonce. */
    .logos__titre {
        font-size: 1.375rem;
    }
}