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

@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;
    }
}

@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;
    }
}

@media (max-width: 380px) {
    #contact {
        padding-right: 0.9rem;
        padding-left: 0.9rem;
    }

    #contact .section-wrapper {
        width: 100%;
    }

    #contact .section-title {
        margin-bottom: 1.5rem;
    }

    #contact .intro {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

#social-section .social-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    gap: 1rem;
    flex-wrap: wrap;
}

#social-section .social-links {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

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

#social-section .social-links i {
    animation: iconColors 20s ease-in-out infinite;
    font-size: 2rem;
    color: white;
}

@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);
}

#footer .footer-legal p {
    font-size: 0.8em;
}

/* Copyright RZU Informatique */