/**
 * RESPONSIVE GLOBAL STYLES - MOBILE FIRST
 * Optimisé pour tous les écrans : Mobile, Tablet, 15", 17", 21"+
 */

/* ============================================
   1. BASE MOBILE STYLES (< 768px)
   ============================================ */

/* Container responsive */
.container {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

/* Sections spacing mobile */
.section-gap {
    padding: 2rem 0;
}

.responsive-section {
    padding: 2rem 0;
}

/* Typography responsive */
.responsive-title {
    font-size: 1.75rem;
    line-height: 1.2;
}

.responsive-subtitle {
    font-size: 1.25rem;
    line-height: 1.3;
}

.responsive-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Header responsive */
.header-logo {
    max-height: 60px !important;
}

.header-title {
    font-size: 1.2rem !important;
    letter-spacing: 1px !important;
    white-space: normal !important;
    text-align: center;
}

/* Cards spacing mobile */
.card-mobile {
    margin-bottom: 1rem;
}

/* Images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   2. TABLET (768px - 1023px)
   ============================================ */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .section-gap {
        padding: 3rem 0;
    }

    .responsive-section {
        padding: 3rem 0;
    }

    .responsive-title {
        font-size: 2.25rem;
    }

    .responsive-subtitle {
        font-size: 1.5rem;
    }

    .responsive-text {
        font-size: 1rem;
    }

    .header-logo {
        max-height: 70px !important;
    }

    .header-title {
        font-size: 1.6rem !important;
        letter-spacing: 2px !important;
    }

    .card-mobile {
        margin-bottom: 0;
    }
}

/* ============================================
   3. DESKTOP 15" (1024px - 1366px)
   Résolutions typiques: 1366x768, 1440x900
   ============================================ */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }

    .section-gap {
        padding: 4rem 0;
    }

    .responsive-section {
        padding: 4rem 0;
    }

    .responsive-title {
        font-size: 2.5rem;
    }

    .responsive-subtitle {
        font-size: 1.75rem;
    }

    .header-logo {
        max-height: 80px !important;
    }

    .header-title {
        font-size: 2rem !important;
        letter-spacing: 2.5px !important;
        white-space: nowrap !important;
    }

    /* Grids optimisés pour 15" */
    .col-15-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* ============================================
   4. DESKTOP 17" (1367px - 1599px)
   Résolutions typiques: 1920x1080 (Full HD)
   ============================================ */
@media (min-width: 1367px) {
    .container {
        max-width: 1140px;
    }

    .section-gap {
        padding: 5rem 0;
    }

    .responsive-section {
        padding: 5rem 0;
    }

    .responsive-title {
        font-size: 2.75rem;
    }

    .responsive-subtitle {
        font-size: 2rem;
    }

    .header-title {
        font-size: 2.2rem !important;
        letter-spacing: 3px !important;
    }
}

/* ============================================
   5. LARGE DESKTOP 21"+ (1600px+)
   Résolutions typiques: 2560x1440 (2K), 3840x2160 (4K)
   ============================================ */
@media (min-width: 1600px) {
    .container {
        max-width: 1320px;
    }

    .section-gap {
        padding: 6rem 0;
    }

    .responsive-section {
        padding: 6rem 0;
    }

    .responsive-title {
        font-size: 3rem;
    }

    .responsive-subtitle {
        font-size: 2.25rem;
    }

    .header-title {
        font-size: 2.5rem !important;
    }
}

/* ============================================
   6. UTILITIES RESPONSIVE
   ============================================ */

/* Espacement responsive */
.mb-responsive {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .mb-responsive {
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .mb-responsive {
        margin-bottom: 2rem;
    }
}

/* Padding responsive */
.p-responsive {
    padding: 1rem;
}

@media (min-width: 768px) {
    .p-responsive {
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .p-responsive {
        padding: 2rem;
    }
}

/* Grid Gap responsive */
.grid-gap-responsive {
    gap: 1rem;
}

@media (min-width: 768px) {
    .grid-gap-responsive {
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .grid-gap-responsive {
        gap: 2rem;
    }
}

/* ============================================
   7. CAROUSEL RESPONSIVE
   ============================================ */
.carousel-item {
    min-height: 300px;
}

@media (min-width: 768px) {
    .carousel-item {
        min-height: 400px;
    }
}

@media (min-width: 1024px) {
    .carousel-item {
        min-height: 500px;
    }
}

@media (min-width: 1367px) {
    .carousel-item {
        min-height: 600px;
    }
}

/* ============================================
   8. NAVIGATION RESPONSIVE
   ============================================ */
.navbar-nav {
    gap: 0.5rem;
}

@media (min-width: 1024px) {
    .navbar-nav {
        gap: 1rem;
    }
}

@media (min-width: 1367px) {
    .navbar-nav {
        gap: 1.5rem;
    }
}

/* ============================================
   9. CARDS & COMPONENTS RESPONSIVE
   ============================================ */
.avantage-card {
    padding: 1.5rem 1rem;
}

@media (min-width: 768px) {
    .avantage-card {
        padding: 1.75rem 1.25rem;
    }
}

@media (min-width: 1024px) {
    .avantage-card {
        padding: 2rem;
    }
}

.avantage-icon {
    width: 60px;
    height: 60px;
    font-size: 1.75rem;
}

@media (min-width: 768px) {
    .avantage-icon {
        width: 65px;
        height: 65px;
        font-size: 1.875rem;
    }
}

@media (min-width: 1024px) {
    .avantage-icon {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }
}

/* ============================================
   10. TEXT UTILITIES RESPONSIVE
   ============================================ */

/* Hide on mobile */
.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block;
    }
}

/* Show only on mobile */
.show-mobile {
    display: block;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none;
    }
}

/* Font sizes responsive */
.fs-responsive-sm {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .fs-responsive-sm {
        font-size: 0.95rem;
    }
}

@media (min-width: 1024px) {
    .fs-responsive-sm {
        font-size: 1rem;
    }
}

.fs-responsive-md {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .fs-responsive-md {
        font-size: 1.125rem;
    }
}

@media (min-width: 1024px) {
    .fs-responsive-md {
        font-size: 1.25rem;
    }
}

.fs-responsive-lg {
    font-size: 1.25rem;
}

@media (min-width: 768px) {
    .fs-responsive-lg {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .fs-responsive-lg {
        font-size: 1.75rem;
    }
}