/* ================================
   MOBILE FIRST — breakpoints ascendants
   ================================ */

/* Grilles : empiler sur mobile */
.grid-2,
.grid-3,
.grid-4 {
    grid-template-columns: 1fr;
}

/* Admin sidebar : cachée sur mobile (slide depuis la gauche) */
.admin-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width);
}
.admin-sidebar.open {
    transform: translateX(0);
}

/* Admin content : pleine largeur sur mobile */
.admin-content {
    margin-left: 0;
    padding: var(--space-5) var(--space-4);
}

/* KPI Grid : 2 colonnes sur mobile */
.kpi-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Form row : 1 colonne sur mobile */
.form-row {
    grid-template-columns: 1fr;
}

/* Tableaux : scroll horizontal sur mobile */
.table-wrap,
.admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Section padding réduit sur mobile */
.section    { padding: var(--space-12) 0; }
.section-sm { padding: var(--space-8) 0; }
.section-lg { padding: var(--space-20) 0; }

/* Headings réduites sur mobile */
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

.nat-hero h1      { font-size: var(--text-3xl); }
.nat-section-title { font-size: var(--text-2xl); }
.nat-pricing-price { font-size: var(--text-4xl); }
.nat-stat-value    { font-size: var(--text-3xl); }

/* Container padding réduit */
.container { padding: 0 var(--space-4); }

/* Modal plein écran sur mobile */
.modal-overlay { padding: var(--space-4); }
.modal { padding: var(--space-6); }

/* Admin page header : empilé sur mobile */
.admin-page-header {
    flex-direction: column;
    align-items: flex-start;
}
.admin-page-header h1,
.admin-page-header h2 {
    font-size: var(--text-xl);
}

/* Nat header CTA réduit sur mobile */
.nat-cta .btn-secondary { display: none; }

/* Bouton groupe empilé sur mobile si étroit */
.btn-group--stack {
    flex-direction: column;
}
.btn-group--stack .btn {
    width: 100%;
}

/* Flash container pleine largeur sur mobile */
.flash-container {
    right: var(--space-4);
    left: var(--space-4);
    max-width: none;
}


/* ================================
   640px — Petite tablette / grand mobile
   ================================ */

@media (min-width: 640px) {
    /* Grilles 2 colonnes */
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* Form row 2 colonnes */
    .form-row { grid-template-columns: repeat(2, 1fr); }

    /* Headings légèrement augmentées */
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }

    .nat-hero h1 { font-size: var(--text-4xl); }

    /* Container padding normal */
    .container { padding: 0 var(--space-5); }

    /* Flash container fixe à droite */
    .flash-container {
        right: var(--space-5);
        left: auto;
        max-width: 380px;
    }

    /* KPI grid 2 colonnes (déjà défini par défaut) */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }

    /* Bouton groupe normal */
    .btn-group--stack {
        flex-direction: row;
    }
    .btn-group--stack .btn { width: auto; }

    /* Nat header : afficher le CTA secondaire */
    .nat-cta .btn-secondary { display: inline-flex; }
}


/* ================================
   768px — Tablette
   ================================ */

@media (min-width: 768px) {
    /* Grilles 2-3 colonnes */
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* Section padding normal */
    .section    { padding: var(--space-16) 0; }
    .section-sm { padding: var(--space-10) 0; }
    .section-lg { padding: var(--space-24) 0; }

    /* Headings tablette */
    h1 { font-size: var(--text-5xl); }
    h2 { font-size: var(--text-4xl); }
    h3 { font-size: var(--text-2xl); }

    .nat-hero h1       { font-size: var(--text-5xl); }
    .nat-section-title { font-size: var(--text-3xl); }
    .nat-stat-value    { font-size: var(--text-4xl); }

    /* Container padding large */
    .container { padding: 0 var(--space-6); }

    /* Admin page header en ligne */
    .admin-page-header {
        flex-direction: row;
        align-items: center;
    }
    .admin-page-header h1,
    .admin-page-header h2 {
        font-size: var(--text-2xl);
    }

    /* KPI grid : 2-3 colonnes */
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }

    /* Modal taille normale */
    .modal {
        padding: var(--space-8);
        max-width: 560px;
    }

    /* Flash container position normale */
    .flash-container {
        right: var(--space-6);
        top: calc(var(--header-height) + var(--space-4));
    }
}


/* ================================
   1024px — Desktop
   ================================ */

@media (min-width: 1024px) {
    /* Grilles 3-4 colonnes */
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }

    /* Sections padding maximum */
    .section    { padding: var(--space-20) 0; }
    .section-sm { padding: var(--space-12) 0; }
    .section-lg { padding: var(--space-32) 0; }

    /* Headings full desktop */
    h1 { font-size: var(--text-5xl); }
    h2 { font-size: var(--text-4xl); }

    .nat-hero h1       { font-size: var(--text-6xl); }
    .nat-section-title { font-size: var(--text-4xl); }
    .nat-stat-value    { font-size: var(--text-5xl); }
    .nat-pricing-price { font-size: var(--text-5xl); }

    /* Admin sidebar fixe sur desktop */
    .admin-sidebar {
        transform: translateX(0);
        position: fixed;
    }

    /* Admin content avec marge pour la sidebar */
    .admin-content {
        margin-left: var(--sidebar-width);
        padding: var(--space-8);
    }

    /* KPI grid 4 colonnes */
    .kpi-grid { grid-template-columns: repeat(4, 1fr); }

    /* Toggle sidebar masqué sur desktop */
    .admin-sidebar-toggle { display: none; }

    /* Overlay mobile masqué sur desktop */
    .admin-sidebar-overlay { display: none !important; }

    /* Container max width full */
    .container { padding: 0 var(--space-6); }
}


/* ================================
   1280px — Grand desktop
   ================================ */

@media (min-width: 1280px) {
    .container { padding: 0 var(--space-8); }

    .nat-hero h1 { font-size: var(--text-6xl); }

    /* Admin content légèrement plus aéré */
    .admin-content { padding: var(--space-10); }

    /* Grilles encore plus aérées */
    .grid   { gap: var(--space-8); }
    .grid-2 { gap: var(--space-8); }
    .grid-3 { gap: var(--space-8); }
    .grid-4 { gap: var(--space-6); }

    /* KPI cards plus larges */
    .kpi-grid { gap: var(--space-6); }
}


/* ================================
   ADMIN — Overlay mobile
   ================================ */

.admin-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17,17,16,0.45);
    z-index: 190;
    backdrop-filter: blur(1px);
}

@media (max-width: 1023px) {
    .admin-sidebar.open ~ .admin-sidebar-overlay,
    .admin-sidebar-overlay.visible {
        display: block;
    }
}


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

/* Masquer / afficher par breakpoint */
.hidden-mobile  { display: none; }
.show-mobile    { display: block; }

@media (min-width: 640px) {
    .hidden-sm  { display: none; }
    .show-sm    { display: block; }
}

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

@media (min-width: 1024px) {
    .hidden-desktop { display: none; }
    .show-desktop   { display: block; }
}

/* Text alignment responsive */
@media (max-width: 767px) {
    .text-center-mobile { text-align: center; }
    .text-left-mobile   { text-align: left; }
}

/* Flex responsive */
@media (max-width: 639px) {
    .flex-col-mobile {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ================================
   PRINT
   ================================ */

@media print {
    .admin-sidebar,
    .nat-header,
    .nat-footer,
    .btn,
    .flash-container,
    .pagination { display: none !important; }

    .admin-content { margin-left: 0; padding: 0; }
    .container     { max-width: 100%; padding: 0; }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .card,
    .admin-panel,
    .panel {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}