/* =============================================
   RESPONSIVE GLOBAL - Tous les breakpoints
   Mobile-First Approach
   ============================================= */

/* =============================================
   BREAKPOINT 1: Mobile Très Petit
   < 480px (Smartphones en portrait)
   ========================================== */
@media (max-width: 479px) {
    /* Container général */
    .container {
        padding: 0 0.75rem !important;
        margin: 0.5rem auto !important;
    }
    
    /* Typographie */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.125rem !important; }
    h4 { font-size: 1rem !important; }
    h5 { font-size: 0.9375rem !important; }
    h6 { font-size: 0.875rem !important; }
    
    p, span, div {
        font-size: 0.875rem !important;
    }
    
    /* Boutons */
    .btn {
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
        width: 100% !important;
        margin-bottom: 0.5rem;
    }
    
    /* Tables - Scroll horizontal */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Cards */
    .card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Formulaires */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 0.875rem !important;
        padding: 0.625rem !important;
    }
    
    /* Grids - 1 colonne */
    .grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Espacements réduits */
    .mt-1, .my-1 { margin-top: 0.5rem !important; }
    .mt-2, .my-2 { margin-top: 0.75rem !important; }
    .mt-3, .my-3 { margin-top: 1rem !important; }
    .mb-1, .my-1 { margin-bottom: 0.5rem !important; }
    .mb-2, .my-2 { margin-bottom: 0.75rem !important; }
    .mb-3, .my-3 { margin-bottom: 1rem !important; }
    .p-1 { padding: 0.5rem !important; }
    .p-2 { padding: 0.75rem !important; }
    .p-3 { padding: 1rem !important; }
}

/* =============================================
   BREAKPOINT 2: Mobile
   480px - 767px (Smartphones en paysage, petits tablettes)
   ========================================== */
@media (min-width: 480px) and (max-width: 767px) {
    /* Container général */
    .container {
        padding: 0 1rem !important;
        margin: 1rem auto !important;
    }
    
    /* Typographie */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.125rem !important; }
    h5 { font-size: 1rem !important; }
    h6 { font-size: 0.9375rem !important; }
    
    /* Boutons */
    .btn {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }
    
    /* Grids - 2 colonnes max */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Cards */
    .card {
        padding: 1.25rem !important;
    }
}

/* =============================================
   BREAKPOINT 3: Tablette
   768px - 1023px (Tablettes, petits laptops)
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Container général */
    .container {
        padding: 0 1.5rem !important;
        margin: 1.5rem auto !important;
        max-width: 720px !important;
    }
    
    /* Typographie */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.25rem !important; }
    h5 { font-size: 1.125rem !important; }
    h6 { font-size: 1rem !important; }
    
    /* Boutons */
    .btn {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9375rem !important;
    }
    
    /* Grids - 2-3 colonnes */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Cards */
    .card {
        padding: 1.5rem !important;
    }
    
    /* Tables - Affichage complet */
    table {
        font-size: 0.9375rem !important;
    }
}

/* =============================================
   BREAKPOINT 4: Desktop Petit/Moyen
   1024px - 1439px (Laptops, écrans standards)
   ========================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
    /* Container général */
    .container {
        padding: 0 2rem !important;
        margin: 2rem auto !important;
        max-width: 1200px !important;
    }
    
    /* Typographie */
    h1 { font-size: 2.25rem !important; }
    h2 { font-size: 2rem !important; }
    h3 { font-size: 1.75rem !important; }
    h4 { font-size: 1.5rem !important; }
    h5 { font-size: 1.25rem !important; }
    h6 { font-size: 1.125rem !important; }
    
    /* Boutons */
    .btn {
        padding: 0.875rem 1.75rem !important;
        font-size: 1rem !important;
    }
    
    /* Grids - 3-4 colonnes */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .grid-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Cards */
    .card {
        padding: 2rem !important;
    }
}

/* =============================================
   BREAKPOINT 5: Desktop Large
   1440px+ (Grands écrans, moniteurs larges)
   ========================================== */
@media (min-width: 1440px) {
    /* Container général */
    .container {
        padding: 0 2.5rem !important;
        margin: 2.5rem auto !important;
        max-width: 1440px !important;
    }
    
    /* Typographie */
    h1 { font-size: 2.5rem !important; }
    h2 { font-size: 2.25rem !important; }
    h3 { font-size: 2rem !important; }
    h4 { font-size: 1.75rem !important; }
    h5 { font-size: 1.5rem !important; }
    h6 { font-size: 1.25rem !important; }
    
    /* Boutons */
    .btn {
        padding: 1rem 2rem !important;
        font-size: 1.125rem !important;
    }
    
    /* Grids - 4 colonnes */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* Cards */
    .card {
        padding: 2.5rem !important;
    }
}

/* =============================================
   UTILITAIRES RESPONSIVE
   ========================================== */

/* Masquer sur mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Masquer sur tablette et desktop */
@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Afficher uniquement sur mobile */
@media (max-width: 767px) {
    .show-mobile {
        display: block !important;
    }
}

/* Afficher uniquement sur desktop */
@media (min-width: 768px) {
    .show-desktop {
        display: block !important;
    }
}

/* Texte responsive */
.text-responsive {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .text-responsive {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .text-responsive {
        font-size: 1.125rem;
    }
}

/* Espacement responsive */
@media (max-width: 767px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

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

/* Tables responsive */
@media (max-width: 767px) {
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    thead {
        display: none;
    }
    
    tbody {
        display: block;
    }
    
    tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1rem;
    }
    
    td {
        display: block;
        text-align: right;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f3f4f6;
    }
    
    td:before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: #6b7280;
    }
    
    td:last-child {
        border-bottom: none;
    }
}