/* =============================================================================
   13. BLOC GMB (Google My Business) - Refactored
   ============================================================================= */

/* ===============================================
   13.1 - Note avis (.note-avis, .nbr-note)
   =============================================== */

.note-avis {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block-end: 2rem; 
}

.nbr-note {
    font-size: var(--taille-font-3xl); 
    color: var(--typo-titre);
    font-family: var(--family-titre);
    margin-inline-end: 4rem; 
    line-height: 1;
}

.bloc-GMB .badge-optionnel {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: block;
    
    --badge-size: 139px;
    width: var(--badge-size);
    height: var(--badge-size);
    
    background: url(../images/badge-optionnel.png) no-repeat top right;
    pointer-events: none;
}

/* ===============================================
   13.2 - Responsive Adjustment
   =============================================== */
@media (max-width: 767px) {
    .note-avis {
        flex-direction: column;
        gap: 1rem;
    }

    .nbr-note {
        margin-inline-end: 0;
        font-size: var(--taille-font-2xl);
    }

    .bloc-GMB .badge-optionnel {
        --badge-size: 80px;
        background-size: contain;
    }
}