/* ============================================================
   RESPONSIVE.CSS — Fixes globaux pour mobile / tablette
   Breakpoints : 1024px | 768px | 600px | 480px | 360px
   ============================================================ */

/* ── 1. BASE ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ── 2. HEADER PRINCIPAL ─────────────────────────────────── */
@media (max-width: 768px) {
    .main-header { padding: 0 10px; flex-wrap: wrap; }
    .logo-holder img { max-height: 52px !important; }
    .header-user-menu { font-size: 12px; }
}

/* ── 3. MODALS (connexion / inscription) ─────────────────── */
@media (max-width: 520px) {
    .modal-content {
        padding: 24px 16px !important;
        border-radius: 12px 12px 0 0 !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    .modal-overlay {
        align-items: flex-end !important;
    }
}

/* ── 4. PAGES AUTH (login / inscription / reset) ─────────── */
.auth-split {
    display: flex;
    min-height: 100vh;
}
.auth-panel-left {
    width: 420px;
    flex-shrink: 0;
}
.auth-panel-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

@media (max-width: 768px) {
    .auth-split { flex-direction: column !important; min-height: auto !important; }
    .auth-panel-left { display: none !important; }
    .auth-panel-right {
        min-height: 100vh !important;
        padding: 32px 20px !important;
        align-items: flex-start !important;
    }
    .auth-panel-right > div { max-width: 100% !important; width: 100% !important; }
}

/* ── 5. TABLEAUX — défilement horizontal sur mobile ─────── */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    /* Envelopper les <table> qui n'ont pas déjà la classe */
    .ds-content table,
    .content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* Petites fontes sur les cellules */
    .ds-content td,
    .ds-content th,
    .content td,
    .content th {
        font-size: 12px;
        padding: 6px 8px !important;
    }
}

/* ── 6. GRILLES ADMIN — 2 / 3 colonnes → 1 colonne ─────── */
@media (max-width: 768px) {
    /* Grilles inline avec display:grid → 1 colonne forcée */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:repeat(2"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── 7. FLEX ROWS → colonnes sur mobile ─────────────────── */
@media (max-width: 768px) {
    /* Sidebars fixes à droite ou gauche */
    [style*="width:240px"][style*="flex-shrink:0"],
    [style*="width:260px"][style*="flex-shrink:0"],
    [style*="width:220px"][style*="flex-shrink:0"],
    [style*="width:230px"][style*="flex-shrink:0"],
    [style*="width:280px"][style*="flex-shrink:0"],
    [style*="width:300px"][style*="flex-shrink:0"],
    [style*="width:320px"][style*="flex-shrink:0"] {
        width: 100% !important;
        flex-shrink: 1 !important;
    }
    /* Annuler le sticky des sidebars filtres sur mobile */
    [style*="width:240px"][style*="flex-shrink:0"] [style*="position:sticky"],
    [style*="width:260px"][style*="flex-shrink:0"] [style*="position:sticky"] {
        position: relative !important;
        top: auto !important;
    }

    /* Conteneurs flex → colonne */
    [style*="display:flex"][style*="gap"] {
        flex-wrap: wrap !important;
    }
}

/* ── 8. PANNEAU GAUCHE ILLUSTRÉ (420px) ─────────────────── */
@media (max-width: 768px) {
    [style*="width:420px"][style*="flex-shrink:0"],
    [style*="width:400px"][style*="flex-shrink:0"] {
        display: none !important;
    }
}

/* ── 9. HERO SECTIONS ────────────────────────────────────── */
@media (max-width: 768px) {
    [style*="padding:60px 0"],
    [style*="padding:80px 0"],
    [style*="padding:70px 0"] {
        padding-top: 32px !important;
        padding-bottom: 24px !important;
    }
    [style*="font-size:36px"],
    [style*="font-size:38px"],
    [style*="font-size:40px"],
    [style*="font-size:42px"],
    [style*="font-size:48px"] {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    [style*="font-size:28px"],
    [style*="font-size:30px"],
    [style*="font-size:32px"] {
        font-size: 20px !important;
    }
}

/* ── 10. SEARCH FORMS ────────────────────────────────────── */
@media (max-width: 600px) {
    [style*="display:flex"][style*="flex-wrap:wrap"] > input,
    [style*="display:flex"][style*="flex-wrap:wrap"] > button,
    [style*="display:flex"][style*="flex-wrap:wrap"] > div,
    [style*="display:flex"][style*="flex-wrap:wrap"] > a {
        width: 100% !important;
        min-width: unset !important;
    }
}

/* ── 11. CARDS & STATS BARS ─────────────────────────────── */
@media (max-width: 600px) {
    [style*="display:flex"][style*="gap:28px"],
    [style*="display:flex"][style*="gap:24px"],
    [style*="display:flex"][style*="gap:20px"] {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
}

/* ── 12. DASHBOARD SIDEBAR ───────────────────────────────── */
@media (max-width: 768px) {
    .ds-main    { margin-left: 0 !important; }
    .ds-sidebar { transform: translateX(-100%); }
    .ds-sidebar.open { transform: translateX(0); }
    .ds-sidebar-toggle { display: block !important; }
    .ds-content { padding: 16px !important; }
    .ds-topbar  { padding: 0 14px !important; }
}

/* ── 13. SALON VIRTUEL ───────────────────────────────────── */
@media (max-width: 600px) {
    #salon-sidebar {
        width: 100% !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
}

/* ── 14. COOKIE BANNER ───────────────────────────────────── */
@media (max-width: 600px) {
    #cookie-banner .cb-inner { flex-direction: column; gap: 12px; }
    #cookie-banner .cb-actions { width: 100%; justify-content: stretch; }
    #cookie-banner .cb-actions .cb-btn { flex: 1; text-align: center; }
    #cookie-modal .cm-foot { flex-direction: column; }
    #cookie-modal .cm-foot .cb-btn { width: 100%; }
}

/* ── 15. NAVIGATION MOBILE ───────────────────────────────── */
@media (max-width: 768px) {
    .main-menu nav ul li { display: block !important; }
    .header-search_container { top: 56px !important; }
}

/* ── 16. FICHE ÉTABLISSEMENT (single) ───────────────────── */
.etab-single-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .etab-single-grid { grid-template-columns: 1fr; }
}

/* ── 17. PAGE MÉTIERS (single) ───────────────────────────── */
.metier-single-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 900px) {
    .metier-single-grid { grid-template-columns: 1fr !important; }
}

/* ── 18. FORMULAIRES ─────────────────────────────────────── */
@media (max-width: 600px) {
    input, select, textarea {
        font-size: 16px !important; /* Évite le zoom iOS sur focus */
    }
    .custom-form-inp input,
    .custom-form-inp select,
    .auth-input {
        font-size: 16px !important;
    }
}

/* ── 19. BOUTONS D'ACTION ────────────────────────────────── */
@media (max-width: 480px) {
    [style*="display:flex"][style*="gap:10px"] .btn,
    [style*="display:flex"][style*="gap:8px"]  .btn,
    [style*="display:flex"][style*="gap:6px"]  .btn {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }
}

/* ── 20. IMAGES COVER ────────────────────────────────────── */
@media (max-width: 768px) {
    [style*="height:260px"],
    [style*="height:280px"],
    [style*="height:300px"],
    [style*="height:320px"] {
        height: 180px !important;
    }
    [style*="height:200px"]:not(img) {
        height: 150px !important;
    }
}

/* ── 21. FILTRES / TABS ──────────────────────────────────── */
@media (max-width: 600px) {
    /* Onglets de filtres → scroll horizontal */
    [style*="display:flex"][style*="border-bottom:2px"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 2px;
    }
    [style*="display:flex"][style*="border-bottom:2px"] a,
    [style*="display:flex"][style*="border-bottom:2px"] button {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ── 22. PAGINATION ──────────────────────────────────────── */
@media (max-width: 480px) {
    .pagination { flex-wrap: wrap !important; gap: 4px !important; }
    .pagination li a,
    .pagination li span { padding: 6px 10px !important; font-size: 12px !important; }
}

/* ── 23. PROFIL / DÉTAILS ÉTABLISSEMENT ─────────────────── */
@media (max-width: 768px) {
    [style*="width:88px;height:88px"],
    [style*="width:80px;height:80px"] {
        width: 64px !important;
        height: 64px !important;
    }
    [style*="width:120px;height:120px"],
    [style*="width:100px;height:100px"] {
        width: 72px !important;
        height: 72px !important;
    }
}

/* ── 24. ADMIN TABLES — actions compactes ────────────────── */
@media (max-width: 900px) {
    /* Masquer colonnes secondaires dans les tableaux admin */
    .admin-table-hide-md { display: none !important; }
}
@media (max-width: 600px) {
    .admin-table-hide-sm { display: none !important; }
    /* Boutons d'action dans table */
    .table-actions { flex-wrap: wrap; gap: 4px !important; }
    .table-actions a,
    .table-actions button,
    .table-actions form button {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
}

/* ── 25. CORRECTION OVERFLOW GLOBAL ─────────────────────── */
@media (max-width: 768px) {
    body, #main, #wrapper, .content {
        overflow-x: hidden;
        max-width: 100vw;
    }
    /* Forcer les conteneurs trop larges */
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}