/* ═══════════════════════════════════════════════════════════════════════
   Stargate race - responsive system v4.0
   Règle absolue : aucune modification de la version pc (> 1100px)

   Breakpoints :
     tablet  : ≤ 1100px
     mobile  : ≤  768px
     small   : ≤  480px
     tiny    : ≤  360px
   ═══════════════════════════════════════════════════════════════════════ */

/* 0. Base universelle (s'applique partout, toutes tailles) */

/* Transition sidebar - toujours présente pour l'animation */
#sg-sidebar { transition: transform .32s cubic-bezier(.4,0,.2,1); }

/* Tap highlight désactivé */
* { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }


/* 1. Hamburger bouton (caché sur pc) */
#sg-hamburger {
    display: none;
    position: fixed;
    top: 10px; left: 10px;
    z-index: 320;
    width: 42px; height: 42px;
    background: var(--sg-panel);
    border: 1px solid var(--sg-teal);
    border-radius: 3px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 0 12px rgba(42,143,168,0.25);
    transition: box-shadow .2s, border-color .2s;
    -webkit-appearance: none; appearance: none;
}
#sg-hamburger:hover, #sg-hamburger:focus {
    box-shadow: 0 0 20px rgba(42,143,168,0.5);
    border-color: var(--sg-teal-light);
    outline: none;
}
#sg-hamburger span {
    display: block;
    width: 20px; height: 2px;
    background: var(--sg-teal-light);
    border-radius: 2px;
    transform-origin: center;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s;
}
#sg-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#sg-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#sg-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* 2. Overlay sidebar */
#sg-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s cubic-bezier(.4,0,.2,1);
}
#sg-sidebar-overlay.visible { display: block; opacity: 1; }


/* 3. Tablette ≤ 1100px */
@media (max-width: 1100px) {

    /* Anti débordement global */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    *, *::before, *::after { box-sizing: border-box !important; }

    /* Wrapper et main */
    #sg-layout-wrapper {
        padding-top: 58px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    #sg-main {
        margin-left: 0 !important;
        padding: 18px 14px 28px !important;
        min-height: calc(100dvh - 58px) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Topbar pleine largeur */
    #sg-topbar {
        left:   0 !important;
        top:    0 !important;
        right:  0 !important;
        border-radius: 0 !important;
        padding-left: 60px !important;
        padding-right: 54px !important; /* réserve la place de la cloche notif fixe */
        z-index: 200 !important;
        border-left:  none !important;
        border-right: none !important;
        border-top:   none !important;
    }

    /* Bandeau alerte incursion - pleine largeur, au-dessus de la topbar,
       texte raccourci (voir header.php) pour tenir sur une seule ligne. */
    #sg-incursion-banner {
        left:  0 !important;
        right: 0 !important;
        top:   0 !important;
        border-radius: 0 !important;
        padding: 7px 54px 7px 60px !important; /* mêmes réserves que la topbar */
        white-space: nowrap !important;
        z-index: 210 !important; /* au-dessus de la topbar (200) */
    }
    .sg-incursion-text-full  { display: none !important; }
    .sg-incursion-text-short { display: inline !important; }
    /* Hamburger et cloche flottent normalement au ras du haut de la topbar :
       avec le bandeau au-dessus, ils doivent descendre d'autant, sinon ils
       débordent par-dessus le bandeau au lieu de rester sur la topbar. */
    body.has-incursion #sg-topbar         { top: 38px !important; }
    body.has-incursion #sg-layout-wrapper { padding-top: 96px !important; }
    body.has-incursion #sg-hamburger      { top: 48px !important; }
    body.has-incursion #forum-notif-bell  { top: 48px !important; }

    /* Masquer la capacité (/10 000) dans le topbar pour gagner de la place */
    .sg-resource-value > span { display: none !important; }
    .sg-resource { padding: 6px 10px !important; }
    .sg-resource-value { font-size: 14px !important; }
    .sg-resource-label { font-size: 10px !important; gap: 4px !important; }
    .sg-resource-label img { width: 16px !important; height: 16px !important; }

    /* Cloche notifications forum — devient une icône flottante fixe (même
       traitement que le hamburger), sortie du flux de la topbar */
    #forum-notif-bell {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        width: 42px !important;
        height: 42px !important;
        border-left: none !important;
        border: 1px solid var(--sg-teal) !important;
        border-radius: 3px !important;
        background: var(--sg-panel) !important;
        box-shadow: 0 0 12px rgba(42,143,168,0.25) !important;
        z-index: 320 !important;
    }
    #forum-notif-bell-icon { width: 18px !important; height: 18px !important; }
    #forum-notif-dropdown {
        width: min(320px, calc(100vw - 20px)) !important;
        right: 0 !important;
        left: auto !important;
    }

    /* Hamburger */
    #sg-hamburger { display: flex !important; }

    /* Sidebar off-canvas */
    #sg-sidebar {
        transform: translateX(calc(-100% - 20px)) !important;
        z-index: 260 !important;
        top: 0 !important; left: 0 !important;
        height: 100dvh !important; height: 100vh !important;
        border-radius: 0 4px 4px 0 !important;
        will-change: transform;
    }
    #sg-sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 6px 0 40px rgba(0,0,0,0.75) !important;
    }

    /* Texte - éviter le débordement horizontal */
    #sg-main p,
    #sg-main span,
    #sg-main li,
    #sg-main h1, #sg-main h2, #sg-main h3, #sg-main h4 {
        overflow-wrap: break-word !important;
        word-break:    break-word !important;
        max-width:     100% !important;
    }

    /* Flex items - autoriser le rétrécissement */
    #sg-main [style*="display:flex"] > *,
    #sg-main [style*="display: flex"] > * { min-width: 0; }

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

    /* Inputs */
    input, select, textarea { max-width: 100%; box-sizing: border-box; }

    /* Scrollbar fine */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--sg-border); border-radius: 2px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--sg-teal); }
    #sg-sidebar::-webkit-scrollbar { width: 3px; }

    /* Nav */
    .sg-nav-link { white-space: normal !important; }
    .font-orbitron { overflow-wrap: break-word; word-break: break-word; }

    /* Subnav - scroll horizontal interne */
    .build-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
        scrollbar-width: thin !important;
    }
    .build-tab { flex-shrink: 0 !important; }

    /* Boutons */
    .sg-btn { clip-path: polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px)) !important; }

    /* Min-width cassants - neutraliser */
    [style*="min-width:360px"],
    [style*="min-width:400px"],
    [style*="min-width:500px"],
    [style*="min-width:600px"] { min-width: 0 !important; }

    /* Tech cards */
    .tech-card-body  { flex-direction: column !important; gap: 14px !important; }
    .tech-img-wrap   { width: 100% !important; height: 180px !important; border-radius: 6px !important; flex-shrink: 0 !important; }
    .tech-card-right { width: 100% !important; flex-shrink: unset !important; }
    .tech-level-bar-wrap { width: 130px !important; }
    .tech-card-header { flex-wrap: wrap !important; gap: 10px !important; }
    .tech-stats-grid  { grid-template-columns: 1fr 1fr !important; }
    .tech-costs       { flex-wrap: wrap !important; gap: 8px !important; }

    /* Grilles 2 colonnes : 1 */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* Grilles avec colonne droite fixe - 1 colonne */
    [style*="grid-template-columns:1fr 200px"],
    [style*="grid-template-columns:1fr 220px"],
    [style*="grid-template-columns:1fr 240px"],
    [style*="grid-template-columns:1fr 260px"],
    [style*="grid-template-columns:1fr 280px"],
    [style*="grid-template-columns:1fr 300px"],
    [style*="grid-template-columns:1fr 320px"],
    [style*="grid-template-columns:1fr 340px"],
    [style*="grid-template-columns:1fr 360px"],
    [style*="grid-template-columns:1fr 380px"] { grid-template-columns: 1fr !important; }

    /* Grilles avec colonne gauche fixe - 1 colonne */
    [style*="grid-template-columns:200px 1fr"],
    [style*="grid-template-columns:220px 1fr"],
    [style*="grid-template-columns:240px 1fr"],
    [style*="grid-template-columns:320px 1fr"] { grid-template-columns: 1fr !important; }

    /* Css-class grilles fixes */
    .workshop-layout { grid-template-columns: 1fr !important; }
    .atelier-grid    { grid-template-columns: 1fr !important; }
    .workshop-right  { position: static !important; }
    .tchat-wrap      { grid-template-columns: 1fr !important; height: auto !important; min-height: 0 !important; }

    /* Marché (.mkt-offer) */
    .mkt-offer  { grid-template-columns: 1fr 44px 1fr !important; }
    .mkt-action {
        grid-column: 1 / -1 !important;
        border-left: none !important;
        border-top: 1px solid var(--sg-border) !important;
        justify-content: center !important;
        padding: 10px !important;
    }

    /* Marché inline-style */
    [style*="grid-template-columns:1fr 44px 1fr 160px"] { grid-template-columns: 1fr 44px 1fr !important; gap: 4px !important; }
    [style*="grid-template-columns:1fr 48px 1fr"]       { grid-template-columns: 1fr 36px 1fr !important; }

    /* Messagerie inbox */
    [style*="grid-template-columns:36px 2fr 1fr 80px 120px"] { grid-template-columns: 36px 1fr 100px !important; }

    /* Alliance */
    .al-logo { height: 260px !important; }
    [style*="grid-template-columns:1fr 300px"][style*="max-width:860px"] { grid-template-columns: 1fr !important; }

    /* Options fonds - 2 colonnes */
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

    /* Défenses images */
    [style*="width:380px"][style*="height:160px"] { width: 100% !important; height: auto !important; }

    /* Modaux */
    #staff-modal-box, .sg-modal-box, #cmd-modal-box,
    [style*="max-width:380px"][style*="width:90%"],
    [style*="max-width:460px"][style*="width:90%"],
    [style*="max-width:520px"][style*="width:90%"],
    [style*="max-width:600px"][style*="width:90%"] { width: 94% !important; max-width: none !important; }

    /* Sidebar avatar */
    #sg-sidebar [style*="width:110px"][style*="height:110px"] { width: 84px !important; height: 84px !important; }
    #sg-clock { font-size: 9px !important; padding: 4px 8px !important; }
    .sg-planet-select { font-size: 12px !important; }

    /* Galaxy ticker */
    .galaxy-ticker-wrap { height: 288px !important; }
    .galaxy-event-text  { font-size: 11px !important; }
    .galaxy-event-coord { font-size: 8px !important; }

    /* Bbcode toolbar */
    .sg-bbcode-toolbar { flex-wrap: wrap !important; }

    /* Tableau scrollable */
    .table-responsive, .sg-battle-report-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }

    /* Tables */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    thead { display: block !important; }
    tbody { display: block !important; }
    tr    { display: table !important; width: 100% !important; table-layout: auto !important; }

} /* fin 1100px */


/* ═══════════════════════════════════════════════════════════════════════
   4. Mobile ≤ 768px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Topbar - grille 2x2 */
    #sg-topbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        padding: 0 46px 0 52px !important; /* padding-right réserve la cloche notif fixe */
        height: auto !important;
    }

    /* Bandeau alerte incursion - texte réduit pour tenir sur une ligne */
    #sg-incursion-banner {
        font-size: 9px !important;
        letter-spacing: .05em !important;
        padding: 6px 46px 6px 52px !important; /* mêmes réserves que la topbar en grille */
        gap: 6px !important;
    }
    body.has-incursion #sg-topbar         { top: 32px !important; }
    body.has-incursion #sg-layout-wrapper { padding-top: 116px !important; }
    body.has-incursion #sg-hamburger      { top: 40px !important; }
    body.has-incursion #forum-notif-bell  { top: 40px !important; }
    .sg-resource {
        padding: 5px 8px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--sg-border) !important;
    }
    .sg-resource:nth-child(odd)       { border-right: 1px solid var(--sg-border) !important; }
    .sg-resource:nth-last-child(-n+2) { border-bottom: none !important; }
    /* La cloche notif est un 5e enfant de #sg-topbar (hors grille via position:fixed) :
       ça décale le comptage nth-last-child ci-dessus. On réaffirme donc explicitement
       l'absence de bordure basse sur les 2 vraies dernières cases (3 et 4) de la grille. */
    .sg-resource:nth-child(3), .sg-resource:nth-child(4) { border-bottom: none !important; }
    .sg-resource-value { font-size: 12px !important; }
    .sg-resource-label { font-size: 9px !important; gap: 3px !important; }
    .sg-resource-label img { width: 13px !important; height: 13px !important; }

    /* Cloche notif — taille réduite + badge repositionné pour la topbar en grille */
    #forum-notif-bell   { top: 8px !important; width: 38px !important; height: 38px !important; }
    #forum-notif-bell-icon { width: 16px !important; height: 16px !important; }
    #forum-notif-badge  { top: 3px !important; right: 3px !important; }

    /* Layout */
    #sg-layout-wrapper { padding-top: 84px !important; }
    #sg-hamburger      { top: 8px !important; width: 38px !important; height: 38px !important; }
    #sg-main           { padding: 12px 10px 24px !important; }

    /* Titres */
    h1.font-orbitron,
    h1[style*="font-size:14px"] { font-size: 11px !important; letter-spacing: .1em !important; }
    .sg-section-title { font-size: 9px !important; padding: 8px 12px !important; letter-spacing: .1em !important; }
    .sg-nav-link      { padding: 7px 14px !important; font-size: 13px !important; }
    .sg-nav-section   { font-size: 8px !important; padding: 8px 14px 3px !important; }

    /* Boutons */
    .sg-btn    { font-size: 11px !important; padding: 6px 12px !important; }
    .sg-btn-sm { padding: 5px 10px !important; font-size: 10px !important; }

    /* Inputs - éviter zoom ios (min 16px) */
    .sg-input, input[type="text"], input[type="number"],
    input[type="email"], input[type="password"], select, textarea {
        font-size: 16px !important;
    }

    /* Flex wrapping */
    [style*="display:flex;gap:"],
    [style*="display:flex; gap:"] { flex-wrap: wrap; }

    /* Tech cards */
    .tech-img-wrap    { height: 140px !important; }
    .tech-card-name   { font-size: 11px !important; letter-spacing: .08em !important; }
    .tech-stats-grid  { grid-template-columns: 1fr !important; gap: 4px 0 !important; }
    .tech-stat-label  { min-width: 90px !important; font-size: 11px !important; }
    .tech-stat-val    { font-size: 10px !important; }
    .tech-level-bar-wrap { width: 90px !important; }
    .tech-level-label { font-size: 10px !important; min-width: 60px !important; }
    .tech-level-track { gap: 6px !important; }

    /* Flash */
    .sg-flash-success,
    .sg-flash-error { font-size: 12px !important; padding: 8px 12px !important; }

    /* Commandement / profil avatar */
    [style*="width:110px"][style*="height:110px"][style*="border-radius:50%"] { width: 76px !important; height: 76px !important; }
    [style*="min-width:130px"][style*="flex-shrink:0"] { min-width: 80px !important; }
    .galaxy-ticker-wrap { height: 275px !important; }

    /* Planètes commandement : 2 par ligne */
    [style*="min-width:240px"][style*="flex:1"][style*="max-width:320px"] {
        min-width: 0 !important; max-width: 100% !important;
        flex: 1 1 calc(50% - 4px) !important;
    }

    /* Messagerie inbox */
    [style*="grid-template-columns:36px 2fr 1fr 80px 120px"],
    [style*="grid-template-columns:36px 1fr 100px"] { grid-template-columns: 36px 1fr !important; }
    .msg-col-sender, .msg-col-date { display: none !important; }

    /* Messagerie conversation */
    #msg-thread { max-height: 60vh !important; }

    /* Bbcode toolbar */
    .sg-bbcode-toolbar { padding: 4px 6px !important; gap: 2px !important; }
    .sg-btn-bb {
        min-width: 30px !important; min-height: 28px !important;
        padding: 3px 6px !important; font-size: 11px !important;
    }

    /* Marché total mobile */
    .mkt-offer { grid-template-columns: 1fr !important; }
    .mkt-action > * { width: 100% !important; }
    .mkt-arrow { padding: 8px !important; min-height: 0 !important; }

    /* Marché inline */
    [style*="grid-template-columns:1fr 44px 1fr"],
    [style*="grid-template-columns:1fr 44px 1fr 160px"],
    [style*="grid-template-columns:1fr 48px 1fr"],
    [style*="grid-template-columns:1fr 36px 1fr"] { grid-template-columns: 1fr !important; gap: 8px !important; }
    [style*="width:44px"][style*="display:inline-flex"][style*="align-items:center"][style*="justify-content:center"] {
        width: 100% !important; height: 32px !important;
    }

    /* Alliance */
    .al-logo  { height: 190px !important; }
    .al-tabs  { overflow-x: auto !important; padding-bottom: 4px !important; }

    /* Options fonds */
    [style*="width:180px"][style*="height:100px"] { width: 100% !important; height: 70px !important; }

    /* Mines production recap : 4 - 2 colonnes */
    [style*="grid-template-columns:repeat(4,1fr)"],
    [style*="grid-template-columns: repeat(4,1fr)"],
    [style*="grid-template-columns:repeat(5,1fr)"],
    [style*="grid-template-columns: repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
    .res-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Modaux */
    #staff-modal-box, .sg-modal-box, #cmd-modal-box { width: 96% !important; }

    /* Tchat */
    #tchat-messages { height: 52vh !important; min-height: 280px !important; }
    .tchat-input-bar { flex-wrap: wrap !important; }
    .tchat-users-list { display: none !important; }

    /* Défenses images */
    [style*="width:380px"][style*="height:160px"][style*="border"] { width: 100% !important; height: 130px !important; }

    /* Prérequis */
    [style*="width:180px"][style*="flex-shrink:0"] { width: 100% !important; }

    /* Admin stats */
    [style*="grid-template-columns:repeat(auto-fill,minmax(160px,1fr))"] { grid-template-columns: repeat(2, 1fr) !important; }

    /* Modération */
    [style*="grid-template-columns:1fr 200px"][style*="height:calc(100vh"] { grid-template-columns: 1fr !important; height: auto !important; }

    /* Profil */
    [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"][style*="margin-bottom:20px"] { grid-template-columns: 1fr !important; }

    /* Flotte en orbite images */
    [style*="width:46px"][style*="height:46px"][style*="object-fit:cover"] { width: 38px !important; height: 38px !important; }

    /* Transport */
    .res-input      { font-size: 14px !important; padding: 8px 4px !important; }
    .res-input-wrap { min-width: 72px !important; }

    /* Timers */
    .col-timer, .missile-countdown, .radar-countdown { font-size: 12px !important; }

    /* Rapport bataille - images troupes */
    [style*="width:52px"][style*="height:52px"][style*="object-fit:cover"] { width: 36px !important; height: 36px !important; }
    [style*="display:flex;align-items:stretch;gap:0"] { flex-direction: column !important; }

    /* Textarea */
    textarea.sg-input { min-height: 70px !important; }

    /* Tables - masquer colonnes 5+ */
    table th:nth-child(n+5),
    table td:nth-child(n+5) { display: none !important; }

    /* Classement - garder ses colonnes (override ci-dessous) */
    .cls-tbl th, .cls-tbl td { display: table-cell !important; }
    .cls-tbl th:nth-child(n+5),
    .cls-tbl td:nth-child(n+5) { display: none !important; }
    .cls-tbl th, .cls-tbl td { font-size: 11px !important; padding: 6px 8px !important; }

} /* fin 768px */


/* ═══════════════════════════════════════════════════════════════════════
   5. Small mobile ≤ 480px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Topbar */
    #sg-topbar         { padding-left: 46px !important; padding-right: 42px !important; }
    #sg-layout-wrapper { padding-top: 86px !important; }
    #sg-main           { padding: 10px 8px 20px !important; }
    .sg-resource-value { font-size: 11px !important; }
    .sg-resource-label { font-size: 8px !important; }

    /* Cloche notif */
    #forum-notif-bell      { width: 34px !important; height: 34px !important; top: 8px !important; right: 8px !important; }
    #forum-notif-bell-icon { width: 15px !important; height: 15px !important; }
    #forum-notif-dropdown  { width: calc(100vw - 16px) !important; right: -6px !important; }

    /* Boutons */
    .sg-btn    { font-size: 10px !important; padding: 6px 10px !important; clip-path: none !important; }
    .sg-btn-sm { font-size: 10px !important; padding: 5px 8px !important; }

    /* Tech cards */
    .tech-img-wrap  { height: 110px !important; }
    .tech-stat-label { min-width: 80px !important; font-size: 10px !important; }

    /* Planètes commandement : 1 par ligne */
    [style*="min-width:240px"][style*="flex:1"] { flex: 1 1 100% !important; min-width: 0 !important; }

    /* Options : 2 colonnes */
    .res-grid,
    [style*="grid-template-columns:repeat(5,1fr)"],
    [style*="grid-template-columns:repeat(4,1fr)"],
    [style*="grid-template-columns:repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

    /* Tchat */
    .tchat-input-bar { flex-direction: column !important; gap: 6px !important; }
    .tchat-input-bar input  { width: 100% !important; }
    .tchat-input-bar button { width: 100% !important; justify-content: center !important; }

    /* Modaux */
    #staff-modal-box, .sg-modal-box, #cmd-modal-box { width: 98% !important; clip-path: none !important; }

    /* Badges */
    .sg-badge { min-width: 15px !important; height: 15px !important; font-size: 9px !important; }

    /* Tables */
    table th, table td { padding: 6px 8px !important; font-size: 11px !important; }
    table th:nth-child(n+4), table td:nth-child(n+4) { display: none !important; }

    /* Avatars */
    [style*="width:36px"][style*="height:36px"][style*="border-radius:50%"] { width: 30px !important; height: 30px !important; }
    [style*="width:52px"][style*="height:52px"][style*="border-radius:50%"] { width: 40px !important; height: 40px !important; }

    /* Bbcode toolbar compact */
    .sg-btn-bb { min-width: 26px !important; min-height: 26px !important; padding: 2px 5px !important; }

    /* Classement */
    .cls-tbl th, .cls-tbl td { display: table-cell !important; }
    .cls-tbl th:nth-child(n+4), .cls-tbl td:nth-child(n+4) { display: none !important; }
    .cls-tbl th, .cls-tbl td { font-size: 10px !important; padding: 5px 6px !important; }

    /* Formulaires */
    form [style*="display:flex"][style*="justify-content:flex-end"] { flex-wrap: wrap !important; gap: 8px !important; }
    form [style*="display:flex"][style*="justify-content:flex-end"] > * { flex: 1 1 auto !important; }

} /* fin 480px */


/* ═══════════════════════════════════════════════════════════════════════
   6. Tiny mobile ≤ 360px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

    /* Topbar - icônes seules */
    .sg-resource-label > span:not(img) { display: none !important; }
    .sg-resource-label > *:not(img)    { display: none !important; }
    .sg-resource-value { font-size: 10px !important; }
    .sg-resource       { padding: 4px 4px !important; }
    #sg-topbar         { padding-left: 42px !important; padding-right: 38px !important; }

    /* Hamburger */
    #sg-hamburger      { width: 34px !important; height: 34px !important; top: 5px !important; left: 5px !important; }
    #sg-hamburger span { width: 16px !important; }

    /* Cloche notif */
    #forum-notif-bell { width: 30px !important; height: 30px !important; top: 5px !important; right: 5px !important; }

    /* Layout */
    #sg-layout-wrapper { padding-top: 72px !important; }
    #sg-main           { padding: 8px 6px 16px !important; }

    /* Boutons */
    .sg-btn    { font-size: 9px !important; padding: 5px 8px !important; }
    .sg-btn-sm { font-size: 9px !important; padding: 4px 6px !important; }

    /* 1 colonne */
    [style*="grid-template-columns: repeat(2, 1fr)"],
    [style*="grid-template-columns:repeat(2,1fr)"],
    [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* Tables : 2 colonnes max */
    table th:nth-child(n+3), table td:nth-child(n+3) { display: none !important; }
    .cls-tbl th, .cls-tbl td { display: table-cell !important; }

} /* fin 360px */


/* ═══════════════════════════════════════════════════════════════════════
   7. Pages spécifiques
   ═══════════════════════════════════════════════════════════════════════ */

/* Auth */
@media (max-width: 768px) {
    .auth-form-wrap {
        width: 96% !important; max-width: none !important;
        margin: 20px auto !important; padding: 20px 16px !important;
    }
}

/* Messagerie - rapport de bataille */
@media (max-width: 768px) {
    [style*="font-family:'Exo 2',sans-serif;font-size:13px;color:var(--sg-text);width:100%"] { font-size: 11px !important; }
    [style*="width:52px;height:52px;object-fit:cover"] { width: 36px !important; height: 36px !important; }
    [style*="display:flex;align-items:stretch;gap:0;margin-bottom:10px"] { flex-direction: column !important; }
    [style*="padding:0 18px;display:flex;align-items:center;min-width:100px"] { padding: 8px 14px !important; min-width: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   8. Classes utilitaires responsives
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .rsp-scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    .rsp-hide-tablet { display: none !important; }
    .rsp-col-1      { grid-template-columns: 1fr !important; }
    .rsp-flex-col   { flex-direction: column !important; }
    .rsp-full-width { width: 100% !important; max-width: none !important; }
}
@media (max-width: 768px) {
    .rsp-hide-mobile { display: none !important; }
    .rsp-show-mobile { display: block !important; }
    .rsp-flex-col-m  { flex-direction: column !important; }
    .rsp-col-2-m     { grid-template-columns: 1fr 1fr !important; }
    .rsp-col-1-m     { grid-template-columns: 1fr !important; }
    .rsp-stack       { flex-direction: column !important; align-items: stretch !important; }
    .rsp-stack > *   { width: 100% !important; }
}
@media (max-width: 480px) {
    .rsp-hide-small  { display: none !important; }
    .rsp-col-1-s     { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Forum — responsive
   ═══════════════════════════════════════════════════════════════════════ */

/* Forum mobile-stats : masqué sur desktop, visible sur mobile */
.forum-mobile-stats { display: none; }

@media (max-width: 768px) {

    /* ── INDEX : lignes catégories ── */
    .forum-cat-row { flex-wrap: wrap !important; }

    .forum-cat-icon {
        width: 48px !important;
        padding: 12px 0 !important;
    }
    .forum-cat-icon img { width: 26px !important; height: 26px !important; }

    .forum-cat-stats {
        border-left: none !important;
        border-top: 1px solid var(--sg-border) !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
    .forum-cat-stats > div {
        flex: 1 1 auto !important;
        padding: 8px 14px !important;
        min-width: 0 !important;
        border-right: none !important;
    }
    .forum-cat-stats > div + div { border-left: 1px solid var(--sg-border) !important; }
    .forum-cat-stats .font-orbitron { font-size: 13px !important; }

    .forum-cat-admin {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        border-left: none !important;
        border-top: 1px solid var(--sg-border) !important;
        padding: 8px 10px !important;
        gap: 6px !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
    }
    .forum-cat-admin form { margin: 0 !important; }
    .forum-cat-admin .sg-btn,
    .forum-cat-admin button { flex: 1 1 auto !important; justify-content: center !important; font-size: 11px !important; }
    /* Les 2 flèches côte à côte restent groupées */
    .forum-cat-admin > div { display: flex !important; gap: 4px !important; }

    /* ── CATÉGORIE : liste des sujets ── */
    .forum-topic-hdr,
    .forum-topic-row {
        grid-template-columns: 36px 1fr auto !important;
    }

    .forum-col-replies,
    .forum-col-views { display: none !important; }

    .forum-col-last {
        min-width: 80px !important;
        max-width: 90px !important;
        font-size: 10px !important;
    }

    /* Stats inline visible sur mobile */
    .forum-mobile-stats { display: inline !important; }

    /* Icône topic plus petite */
    .forum-topic-row .forum-topic-icon img,
    .forum-topic-row > div:first-child img { width: 22px !important; height: 22px !important; }

    /* Titre du sujet */
    .forum-topic-row a[href*="forum_topic"] { font-size: 12px !important; }

    /* Badges ÉPINGLÉ / FERMÉ */
    .forum-topic-row span[style*="letter-spacing:.08em"] { font-size: 8px !important; padding: 1px 4px !important; }

    /* Boutons admin dans col-last : passer en ligne complète */
    .forum-col-last > div[style*="display:flex"] {
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 3px !important;
    }

    /* ── SUJET : post sidebar auteur plus compact ── */
    .forum-post-author { width: 100px !important; }
    [style*="flex-shrink:0;width:140px"][style*="border-right:1px solid var(--sg-border)"] {
        width: 90px !important;
        padding: 12px 8px !important;
    }
    [style*="flex-shrink:0;width:140px"] .forum-avatar-letter { font-size: 18px !important; }

    /* Toolbar forum - wrap compact */
    .sg-forum-toolbar { padding: 4px 6px !important; gap: 2px !important; }
    .sg-btn-bb { min-width: 28px !important; min-height: 26px !important; padding: 2px 5px !important; }

    /* Légende + connectés en colonne */
    .forum-cat-row ~ div[style*="display:flex;gap:16px"] { flex-direction: column !important; }
}

@media (max-width: 480px) {

    /* Catégorie index : header panel */
    [style*="padding:16px 24px"][style*="display:flex"][style*="justify-content:space-between"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Topic row : encore plus compact */
    .forum-topic-hdr,
    .forum-topic-row { grid-template-columns: 30px 1fr 70px !important; }

    .forum-col-last { max-width: 70px !important; font-size: 9px !important; }

    /* Sidebar auteur dans topic : empile l'avatar sur mobile très étroit */
    [style*="flex-shrink:0;width:140px"][style*="border-right:1px solid var(--sg-border)"] {
        width: 72px !important;
        padding: 10px 6px !important;
    }
    [style*="flex-shrink:0;width:140px"] [style*="width:64px;height:64px"] {
        width: 44px !important; height: 44px !important;
    }

    /* Masquer boutons admin de la liste sur très petit écran, garder seulement la croix */
    .forum-col-last [title="Épingler"],
    .forum-col-last [title="Désépingler"],
    .forum-col-last [title="Verrouiller"],
    .forum-col-last [title="Déverrouiller"] { display: none !important; }
}