/* ============================================
   RESPONSIVE - Mobile First Complet
   Breakpoints: 480px, 768px, 992px, 1200px
   ============================================ */

/* BASE - Mobile par défaut (< 480px) */
/* Déjà géré dans les fichiers de base */

/* TRÈS PETIT MOBILE - < 380px */
@media (max-width: 379px) {
    .container {
        padding: 0 1rem;
    }
    
    h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .btn {
        font-size: 0.9rem;
        padding: 0.75rem 1.25rem;
    }
}

/* PETIT MOBILE - 380px à 479px */
@media (min-width: 380px) and (max-width: 479px) {
    .container {
        padding: 0 1.25rem;
    }
}

/* MOBILE STANDARD - 480px à 767px */
@media (min-width: 480px) and (max-width: 767px) {
    .container {
        padding: 0 1.5rem;
    }
    
    h1 {
        font-size: 2.25rem;
    }
    
    h2 {
        font-size: 1.875rem;
    }
}

/* TABLETTE - 768px à 991px */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px;
        padding: 0 2rem;
    }
    
    h1 {
        font-size: 2.75rem;
    }
    
    h2 {
        font-size: 2.25rem;
    }
    
    h3 {
        font-size: 1.75rem;
    }
    
    /* Grilles 2 colonnes sur tablette */
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Hero tablette */
    .hero {
        min-height: 65vh;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
}

/* DESKTOP PETIT - 992px à 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
        padding: 0 2rem;
    }
    
    /* Grilles complètes */
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* DESKTOP STANDARD - 1200px à 1399px */
@media (min-width: 1200px) and (max-width: 1399px) {
    .container {
        max-width: 1140px;
    }
}

/* LARGE DESKTOP - > 1400px */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ============================================
   RESPONSIVE PAR COMPOSANT
   ============================================ */

/* HERO SECTION */
@media (max-width: 767px) {
    .hero {
        min-height: 70vh;
        padding: 3rem 0;
    }
    
    .hero-content {
        padding: 0 1.5rem;
    }
    
    .hero h1 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }
    
    .hero-text {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 0.875rem;
    }
    
    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }
    
    /* Formes rotatives plus petites sur mobile */
    .hero-shape {
        width: 250px !important;
        height: 250px !important;
        filter: blur(45px);
    }
}

/* SECTIONS */
@media (max-width: 767px) {
    section {
        padding: 3rem 0;
    }
    
    .section-header {
        margin-bottom: 2rem;
    }
    
    .section-title {
        font-size: 1.875rem;
        margin-bottom: 0.75rem;
    }
    
    .section-subtitle {
        font-size: 0.95rem;
    }
}

/* GRILLES */
@media (max-width: 767px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* CARTES */
@media (max-width: 767px) {
    .card {
        padding: 1.5rem;
    }
    
    .card-service,
    .card-team,
    .card-location {
        margin-bottom: 1.25rem;
    }
}

/* FOOTER */
@media (max-width: 991px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 767px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-column {
        padding: 1.5rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .footer-column:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .footer-logo {
        margin: 0 auto 1rem;
    }
}

/* BOUTONS */
@media (max-width: 767px) {
    .btn-large {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
        width: 100%;
    }
    
    .btn {
        font-size: 0.9rem;