/* ============================================================
   Réseau 3R – Sponsors Block
   ============================================================ */

/* ── Wrapper principal ── */
.r3r-section {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: inherit;
}

/* ── Titre de section ── */
.r3r-section-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #222;
    margin: 0 0 28px;
    padding: 0;
}

/* ── Séparation entre les deux blocs ── */
.r3r-sponsors-section {
    margin-top: 32px;
}

/* ========================================================
   MEMBRE D'HONNEUR
   ======================================================== */
.r3r-honneur-section {
    margin-bottom: 12px;
}
.r3r-honneur-row {
    justify-content: center;
}

/* ========================================================
   TIERS (Or / Argent / Bronze)
   ======================================================== */
.r3r-tier {
    position: relative;
    padding: 20px 0 8px;
}

/* ── Ligne séparatrice + badge centré ── */
.r3r-tier-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
}

/* lignes horizontales de chaque côté */
.r3r-tier-badge::before,
.r3r-tier-badge::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
}

/* icône badge (img depuis médiathèque) */
.r3r-tier-badge__icon {
    display: block;
    width: auto;
    max-width: 80px;
    max-height: 96px;
    object-fit: contain;
    flex-shrink: 0;
}

/* label textuel masqué (accessibilité) */
.r3r-tier-badge__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* ── Séparateur bas de tier ── */
.r3r-tier-sep {
    border: none;
    border-top: 1px solid #ddd;
    margin: 16px 0 0;
}

/* ========================================================
   GRILLE DE LOGOS
   ──────────────────────────────────────────────────────
   --logos-per-row : injecté inline par le shortcode PHP
                     ex : style="--logos-per-row:4;"
   --logo-max-h    : hauteur max calculée côté PHP
   ======================================================== */
.r3r-logos-row {
    --col-gap: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px var(--col-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.r3r-logo-item {
    /* largeur = (100% - gaps entre items) / nb colonnes */
    flex: 0 0 calc(
        ( 100% - ( var(--logos-per-row, 5) - 1 ) * var(--col-gap) )
        / var(--logos-per-row, 5)
    );
    max-width: calc(
        ( 100% - ( var(--logos-per-row, 5) - 1 ) * var(--col-gap) )
        / var(--logos-per-row, 5)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.r3r-logo-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: opacity .2s ease;
}
.r3r-logo-item a:hover {
    opacity: .75;
}

.r3r-logo-item img {
    max-width: 100%;
    max-height: var(--logo-max-h, 60px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Tier Or : logos légèrement plus hauts */
.r3r-tier--or .r3r-logo-item img {
    max-height: calc( var(--logo-max-h, 60px) * 1.15 );
}

/* Tier Bronze : logos légèrement plus bas */
.r3r-tier--bronze .r3r-logo-item img {
    max-height: calc( var(--logo-max-h, 60px) * 0.85 );
}

/* ========================================================
   RESPONSIVE
   ======================================================== */
@media ( max-width: 768px ) {
    .r3r-logos-row {
        --col-gap: 20px;
        gap: 20px var(--col-gap);
    }
    /* Sur tablette : max 3 par ligne */
    .r3r-logo-item {
        flex: 0 0 calc( ( 100% - 2 * 20px ) / 3 );
        max-width: calc( ( 100% - 2 * 20px ) / 3 );
    }
    .r3r-logo-item img {
        max-height: 44px;
    }
}

@media ( max-width: 480px ) {
    .r3r-logos-row {
        --col-gap: 16px;
        gap: 16px var(--col-gap);
    }
    .r3r-section-title {
        font-size: 18px;
    }
    /* Sur mobile : max 2 par ligne */
    .r3r-logo-item {
        flex: 0 0 calc( ( 100% - 16px ) / 2 );
        max-width: calc( ( 100% - 16px ) / 2 );
    }
    .r3r-logo-item img {
        max-height: 36px;
    }
    .r3r-tier-badge::before,
    .r3r-tier-badge::after {
        min-width: 30px;
    }
}