/* ===== RESPONSIVE STARTMAKERS ===== */
/* Loaded after each page's inline <style> block (and before theme.css),
   so these rules win the light-mode cascade on equal specificity, while
   theme.css's !important dark-mode colors still take final precedence.
   Acts as a global visual upgrade layer without touching page markup. */

:root {
    --gold: #B8960C;
    --gold-dark: #9a7d0a;
    --radius-full: 999px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --speed: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }

a, button, .btn-sm, .btn-dl, .pagination a, .cat-btn,
.hamburger, .mobile-menu a, .icon-link, .nav-card a {
    cursor: pointer;
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.pagination a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* Inline SVG icons used throughout nav/sidebar/header — constrains size
   regardless of each icon's own markup so nothing renders oversized. */
.icon svg, .icon-link svg {
    width: 18px;
    height: 18px;
    display: block;
}

.nav-card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
}

.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    color: #aaa;
    text-decoration: none;
    transition: color var(--speed) var(--ease);
}

.icon-link:hover { color: var(--gold); }

header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.hamburger {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
}

.mobile-menu-header button {
    background: none;
    border: none;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.mobile-menu-header button svg { width: 22px; height: 22px; }

/* Cards / interactive surfaces */
.card, .fichier-item, .pro-card, .mc-card, .categorie-card, .sujet-card {
    transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.pagination a, .pagination span {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.btn-sm, .btn-dl, .cat-btn {
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.btn-sm:active, .btn-dl:active, .cat-btn:active { transform: scale(0.96); }

input, select, textarea {
    transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.card:has(table) {
    overflow-x: auto;
}

/* Tablette */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: 200px 1fr !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
    }

    .profil-card { padding: 1rem !important; }
    .avatar { width: 48px !important; height: 48px !important; font-size: 1.1rem !important; }

    nav { gap: 1rem !important; }
    nav a { font-size: 0.8rem !important; }
}

/* Mobile */
@media (max-width: 768px) {
    /* Header */
    header {
        padding: 0.8rem 1rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }

    /* Cacher nav desktop */
    header nav { display: none !important; }
    
    /* Forcer layout mobile */
    .container {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    
    aside.sidebar { display: none !important; }

    /* Menu hamburger */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 4px;
    }

    .hamburger span {
        width: 22px;
        height: 2px;
        background: #333;
        border-radius: 2px;
        transition: all 0.3s;
    }

    /* Menu mobile overlay */
    .mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 999;
        flex-direction: column;
        padding: 1.5rem;
    }

    .mobile-menu.open { display: flex !important; }

    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }

    .mobile-menu a {
        display: block;
        padding: 1rem 0;
        border-bottom: 1px solid #f0ede6;
        font-size: 1rem;
        font-weight: 600;
        color: #333;
        text-decoration: none;
    }

    .mobile-menu a:hover { color: #B8960C; }
    .mobile-menu a.danger { color: #c00; }

    /* Layout — passer en colonne */
    .container {
        grid-template-columns: 1fr !important;
        margin: 1rem auto !important;
        padding: 0 1rem !important;
    }

    /* Cacher sidebar desktop */
    aside.sidebar { display: none !important; }

    /* Cards */
    .card { padding: 1rem !important; border-radius: 12px !important; }
    .page-header { padding: 1.2rem !important; border-radius: 12px !important; }
    .page-header h2 { font-size: 1.2rem !important; }

    /* Grilles */
    .modules-grid { grid-template-columns: 1fr !important; }
    .rapide-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .pro-grid { grid-template-columns: 1fr !important; }
    .fichiers-grid { grid-template-columns: 1fr !important; }
    .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .grid-2 { grid-template-columns: 1fr !important; }
    .form-grid { grid-template-columns: 1fr !important; }
    .row { grid-template-columns: 1fr !important; }

    /* Forum */
    .sujet-row { grid-template-columns: 1fr !important; }
    .mc-card { flex-direction: column !important; }
    .mc-thumb { width: 100% !important; height: 180px !important; }

    /* Bienvenue */
    .bienvenue { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; }
    .btn-guide { width: 100% !important; text-align: center !important; }

    /* Warning */
    .warning { flex-direction: column !important; }

    /* Pagination */
    .pagination { flex-wrap: wrap !important; }

    /* Table admin */
    table { font-size: 0.78rem !important; }
    th, td { padding: 0.5rem !important; }
}

/* Très petit mobile */
@media (max-width: 380px) {
    .rapide-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* === Dashboard mobile fixes === */
@media (max-width: 768px) {
    body { overflow-x: hidden; }

    .forum-cats-grid {
        grid-template-columns: 1fr !important;
    }

    .acces-rapide-grid {
        grid-template-columns: 1fr !important;
    }

    .forum-cat-item {
        width: 100% !important;
        min-width: 0 !important;
    }

    .forum-cat-item span {
        white-space: normal !important;
    }
}

/* === Fix overflow header mobile === */
@media (max-width: 768px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    header { width: 100%; box-sizing: border-box; }
    .main-content { overflow-x: hidden; }
}

/* === Fix débordement contenu grid === */
@media (max-width: 768px) {
    .main { min-width: 0; width: 100%; box-sizing: border-box; }
    .container > * { min-width: 0; }
    .card-dark { min-width: 0; box-sizing: border-box; }
    .bienvenue { min-width: 0; box-sizing: border-box; }
}

/* === Fix fichiers mobile === */
@media (max-width: 768px) {
    .fichier-item { min-width: 0; }
    .fichier-info { min-width: 0; flex: 1; overflow: hidden; }
    .fichier-info h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .btn-dl { flex-shrink: 0; }
}

/* === Fixes globaux toutes pages === */
@media (max-width: 768px) {
    /* Empêcher tout débordement horizontal */
    * { box-sizing: border-box; }
    img { max-width: 100%; height: auto; }

    /* Tous les items flex/grid */
    .card > * { min-width: 0; }
    .wrapper { min-width: 0; width: 100%; }

    /* Tableaux */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Textes longs */
    h1, h2, h3, h4 { word-break: break-word; }

    /* Formulaires */
    input, select, textarea, button { max-width: 100%; }

    /* Forum */
    .sujet-card, .reponse-item, .categorie-card { min-width: 0; }
    .message-content, .reponse-texte { word-break: break-word; overflow-wrap: break-word; }

    /* Fichiers */
    .fichiers-grid { grid-template-columns: 1fr !important; }

    /* Masterclass */
    .mc-grid { grid-template-columns: 1fr !important; }

    /* Profil */
    .profil-grid { grid-template-columns: 1fr !important; }
}