/* =====================================================
    SECTION GRIDS / CARTES FLIP
   ===================================================== */
@media(orientation: landscape) {
  .grids {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 3vw, 1.5rem);
  }
}


/* =====================================================
   BUBBLES
===================================================== */
/* TABLETTE PORTRAIT */
@media (orientation: portrait) {
    .cta-bubbles {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .bubble-group {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .bubble {
        width: 100px;
        height: 100px;
        padding: 0;
        border-radius: 45% 55%;
        font-size: 0.85em;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        animation: bubbleColor 3s ease-in-out infinite;
    }
}


/* =====================================================
   BUBBLES
===================================================== */
/* TABLETTE LANDSCAPE*/
@media (orientation: landscape) {
    .cta-bubbles {
        flex-direction: row;
        align-items: center;
        gap: 25px;
    }

    .bubble-group {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .bubble {
        width: 105px;
        height: 105px;
        padding: 0;
        border-radius: 45% 55%;
        font-size: 0.8em;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        animation: bubbleColor 3s ease-in-out infinite;
    }
}


/* =====================================================
    FOOTER
===================================================== */
#footer {
    padding: 0.6rem 1rem;
    background-color: var(--color-background-2);
}

#footer .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

#footer .footer-right {
    display: flex;
    align-items: center;
    gap: 3rem;
}

#footer .footer-right a {
    transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}

#footer .footer-right i {
    animation: iconColors 20s ease-in-out infinite;
    font-size: 2.5rem;
}

@keyframes iconColors {
    0%   { color: var(--color-accent); }
    25%  { color: var(--color-secondary); }
    50%  { color: var(--color-primary); }
    75%  { color: var(--color-secondary); }
    100% { color: var(--color-accent); }
}

.icon-pop {
    transform: scale(1) rotate(0deg);
}

@media (max-width: 800px) {
    #footer .footer-right {
        gap: 1.2rem;
    }

    #footer .footer-right i {
        font-size: 2rem;
    }
}