/* ============================================================
   TaliaRP — Responsive Mobile v1.0
   Complète style.css et admin.css pour une compatibilité
   complète sur tous les écrans (320px → 4K)
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   VIEWPORT HELPERS
   ══════════════════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Empêche le débordement horizontal global */
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════════════════════════
   FORMULAIRES — ANTI ZOOM AUTO iOS
   Safari iOS zoome automatiquement la page quand un champ de saisie
   a une taille de police inférieure à 16px. Le site utilise 0.93-0.95rem
   (~15px) partout : ça affecte TOUS les formulaires du site, boutique
   et panel admin compris. On repasse à 16px uniquement sur mobile pour
   ne pas changer l'apparence desktop.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .form-control, select.form-control, textarea.form-control,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="search"],
  input[type="tel"], input[type="url"], select, textarea {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   NAVBAR — AMÉLIORATIONS MOBILE
   ══════════════════════════════════════════════════════════════ */

/* Hamburger visible uniquement sur mobile (défini aussi dans style.css) */
@media (max-width: 768px) {
  .hamburger { display: flex !important; }

  /* Menu mobile overlay */
  .nav-links {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important; right: 0 !important;
    background: rgba(5,2,1,0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(190,96,0,0.3) !important;
    flex-direction: column !important;
    padding: 0.5rem 1rem 1.5rem !important;
    gap: 0.1rem !important;
    z-index: 999 !important;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  .nav-links a {
    padding: 0.75rem 1rem !important;
    font-size: 0.92rem !important;
    border-radius: 8px !important;
    width: 100%;
  }
  /* Menu "Plus" → s'intègre au flux vertical du menu mobile */
  .nav-more { width: 100%; }
  .nav-more-trigger {
    width: 100%; justify-content: space-between;
    padding: 0.75rem 1rem !important;
    font-size: 0.92rem !important;
    border-radius: 8px !important;
  }
  .nav-more-menu {
    position: static !important;
    width: 100%; min-width: 0;
    background: rgba(190,96,0,0.04) !important;
    border: none !important; box-shadow: none !important;
    margin-top: 0.1rem; padding: 0 0 0 0.5rem;
  }
  .nav-more-menu a { padding: 0.7rem 1rem !important; font-size: 0.88rem !important; }
  /* On garde le solde mais on le compacte */
  .nav-balance {
    font-size: 0.68rem !important;
    padding: 0.18rem 0.38rem !important;
  }
}

@media (max-width: 480px) {
  .nav-inner { padding: 0 0.75rem !important; gap: 0.2rem !important; }
  .nav-balance { display: none !important; }
  .nav-search-form { display: none !important; }
  .nav-username-text .nav-rank-badge { display: none; }
}

@media (max-width: 360px) {
  .nav-notif-btn { width: 28px !important; height: 28px !important; font-size: 0.8rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE WRAP — PADDINGS ADAPTATIFS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .page-wrap { padding: 1rem 0.85rem 2rem !important; }
}
@media (max-width: 480px) {
  .page-wrap { padding: 0.75rem 0.6rem 1.5rem !important; }
}
@media (max-width: 360px) {
  .page-wrap { padding: 0.5rem 0.5rem 1rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .page-header { margin-bottom: 1rem !important; padding-bottom: 0.75rem !important; }
  .page-header h1 { font-size: 1.15rem !important; letter-spacing: 0.04em !important; }
  .page-header p { font-size: 0.82rem !important; }
}
@media (max-width: 400px) {
  .page-header h1 { font-size: 1rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   ADMIN — BARRES DE RECHERCHE / FILTRE
   Input + bouton(s) en ligne fixe : sur mobile, l'input passe en
   pleine largeur sur sa propre ligne et les boutons juste en-dessous
   (au lieu de rester serrés sur une seule ligne, voire de déborder
   pour la variante avec input à largeur fixe 180px).
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .admin-search-form { flex-wrap: wrap !important; }
  .admin-search-form input[type="text"] { flex: 1 1 100% !important; width: 100% !important; }
  .admin-search-form .btn { flex: 1 1 auto !important; }
}

/* ══════════════════════════════════════════════════════════════
   GRIDS — RESPONSIVE COMPLET
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 600px) {
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 400px) {
  .grid-4 { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   PANELS — PADDING ADAPTATIF
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .panel { padding: 1.1rem !important; }
}
@media (max-width: 480px) {
  .panel { padding: 0.85rem !important; }
}
@media (max-width: 360px) {
  .panel { padding: 0.65rem !important; }
  .panel-title { font-size: 0.75rem !important; margin-bottom: 0.85rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   STAT CARDS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .stat-value { font-size: 1.3rem !important; }
  .stat-label { font-size: 0.68rem !important; }
  .stat-card { padding: 1rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS — TOUCH-FRIENDLY
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .btn { min-height: 42px !important; } /* Touch target min 42px */
  .btn-sm { min-height: 34px !important; }
  /* Boutons full-width dans les panels sur très petit écran */
}
@media (max-width: 480px) {
  .btn-lg { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   TABLES — RESPONSIVE CARDS ON MOBILE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .table-wrap { border-radius: var(--radius) !important; }
  .table-wrap table { min-width: unset !important; }

  /* Mode "card" pour les tableaux : chaque ligne devient une carte */
  .table-wrap thead { display: none; }
  .table-wrap tbody tr {
    display: block !important;
    border: 1px solid rgba(110,60,16,0.2) !important;
    border-radius: var(--radius) !important;
    margin-bottom: 0.55rem !important;
    padding: 0.65rem 0.8rem !important;
    background: var(--bg-card) !important;
  }
  .table-wrap tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.3rem 0 !important;
    border: none !important;
    font-size: 0.82rem !important;
    gap: 0.75rem !important;
    min-height: 0 !important;
    flex-wrap: wrap;
  }
  .table-wrap tbody td::before {
    content: attr(data-label);
    font-size: 0.65rem !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: var(--font-mono) !important;
    flex-shrink: 0 !important;
    font-weight: 700;
  }
  /* Cellules sans label (images, actions) */
  .table-wrap tbody td:empty { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   FORMS — MOBILE OPTIMISÉ
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .form-control { font-size: 16px !important; } /* Évite le zoom auto sur iOS */
  .form-group { margin-bottom: 0.9rem !important; }
}

/* Groupes de boutons côte à côte → empilés sur mobile */
@media (max-width: 480px) {
  .form-row-inline,
  .btn-group-inline {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .form-row-inline .btn,
  .btn-group-inline .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SHOP
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .shop-grid { grid-template-columns: repeat(2,1fr) !important; gap: 0.85rem !important; }
}
@media (max-width: 480px) {
  .shop-grid { grid-template-columns: repeat(2,1fr) !important; gap: 0.55rem !important; }
  .shop-card-img { height: 140px !important; }
  .shop-card-body { padding: 0.7rem 0.75rem 0.5rem !important; }
  .shop-card-name { font-size: 0.82rem !important; letter-spacing: 0.3px !important; }
  .shop-card-desc { font-size: 0.74rem !important; }
  .shop-card-footer { padding: 0.55rem 0.75rem !important; }
  .shop-price, .shop-price-final { font-size: 0.9rem !important; }
  .shop-card-footer .btn-sm { font-size: 0.65rem !important; padding: 0.3rem 0.5rem !important; }
}
@media (max-width: 360px) {
  .shop-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE — HERO & SECTIONS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .home-hero {
    padding: 3rem 1rem 2.5rem !important;
    border-radius: var(--radius-lg) !important;
  }
  .home-hero h1 { font-size: clamp(1.4rem, 6vw, 2.2rem) !important; letter-spacing: 3px !important; }
  .home-hero .subtitle { font-size: 0.78rem !important; letter-spacing: 1px !important; }
  .home-hero-logo { width: 72px !important; margin-bottom: 1rem !important; }
  .home-hero-cta { flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; }
  .home-hero-cta .btn { width: 100% !important; max-width: 280px !important; justify-content: center !important; }
  .home-hero-meta {
    flex-direction: column !important;
    gap: 0.5rem !important;
    font-size: 0.7rem !important;
    padding-top: 1rem !important;
  }
}
@media (max-width: 480px) {
  .home-hero { padding: 2.25rem 0.85rem 2rem !important; }
  .home-hero h1 { font-size: clamp(1.25rem, 7vw, 1.7rem) !important; letter-spacing: 2px !important; }
  .home-hero-eyebrow { font-size: 0.62rem !important; padding: 0.22rem 0.65rem !important; }
}

/* Server status responsive */
@media (max-width: 600px) {
  .home-server-status { padding: 0.85rem 1rem !important; gap: 0.75rem !important; }
  .home-server-count > div { font-size: 1.1rem !important; }
}

/* Referral banner */
@media (max-width: 600px) {
  .home-referral-banner { flex-wrap: wrap !important; gap: 0.65rem !important; }
  .ref-amount { font-size: 1.2rem !important; }
}

/* Steps */
@media (max-width: 768px) {
  .home-steps { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
  .home-step { padding: 1.5rem 1rem 1rem !important; }
}

/* Features */
@media (max-width: 768px) {
  .home-features { grid-template-columns: 1fr !important; gap: 0.65rem !important; }
  .home-feature { padding: 0.85rem !important; }
}

/* Donor strip */
@media (max-width: 600px) {
  .home-donor-strip { flex-direction: column !important; }
  .home-donor-card { min-width: unset !important; flex: none !important; }
}

/* Discord section */
@media (max-width: 720px) {
  .home-discord { grid-template-columns: 1fr !important; text-align: center !important; }
}

/* Stat cards homepage */
@media (max-width: 600px) {
  .home-stat-card { padding: 1rem !important; }
  .home-stat-card .value { font-size: 1.2rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   PROFIL — HERO & TABS & LAYOUT
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero profil empilé */
  .prof-hero {
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.5rem 1rem !important;
    gap: 0.75rem !important;
  }
  .prof-hero-avatar { width: 70px !important; height: 70px !important; }
  .prof-hero-info { min-width: unset !important; }
  .prof-hero-info h1 { font-size: clamp(1.1rem, 5vw, 1.4rem) !important; }
  .prof-hero-right {
    justify-content: center !important;
    width: 100% !important;
  }

  /* Tabs scrollables horizontalement */
  .prof-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 0.5rem !important;
    gap: 0.3rem !important;
    margin-bottom: 1rem !important;
  }
  .prof-tabs::-webkit-scrollbar { display: none; }
  .prof-tab { white-space: nowrap !important; flex-shrink: 0 !important; padding: 0.4rem 0.75rem !important; }
  .prof-tab span { font-size: 0.72rem !important; }

  /* Info rows empilées */
  .prof-info-row { flex-direction: column !important; align-items: flex-start !important; gap: 0.25rem !important; }
  .prof-info-row .lbl { min-width: unset !important; }

  /* Avatar uploader centré */
  .prof-avatar-upload img { width: 110px !important; height: 110px !important; }

  /* Grille stats profil */
  .prof-stat-tiles { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  .prof-tabs { gap: 0.2rem !important; }
  .prof-tab { padding: 0.32rem 0.55rem !important; }
  .prof-tab svg { display: none; }
  .prof-stat-tiles { grid-template-columns: 1fr !important; }
  .prof-avatar-upload img { width: 90px !important; height: 90px !important; }
}

/* Historique de connexion (IP) */
@media (max-width: 600px) {
  /* La colonne IP min-width:110px devient problématique */
  .prof-ip-col { min-width: unset !important; font-size: 0.72rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   BADGES GRID
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .badges-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   AUTHENTIFICATION (LOGIN / REGISTER)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Layout 2 colonnes → 1 colonne */
  .auth-split { flex-direction: column !important; }
  .auth-perks { display: none !important; } /* On cache les perks sur mobile */
  .auth-form-side { width: 100% !important; max-width: 480px !important; margin: 0 auto !important; }
}
@media (max-width: 480px) {
  .auth-form-side { padding: 1.25rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   LEADERBOARD
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .leaderboard-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.25rem; }
  .leaderboard-tabs::-webkit-scrollbar { display: none; }
  .leaderboard-tabs a { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 600px) {
  /* La colonne rank (90px fixe) */
  .lb-rank-col { width: 52px !important; min-width: 52px !important; font-size: 0.8rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   MEMBRES / JOUEURS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Filtre de recherche — 180px fixe */
  input.form-control[style*="width:180px"] {
    width: 100% !important;
  }
  .members-filter-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PLAYER PAGE (hero joueur)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .player-hero { padding: 1.5rem 1rem !important; }
  .player-hero-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }
  .player-hero-avatar { width: 80px !important; height: 80px !important; }
}

/* ══════════════════════════════════════════════════════════════
   CHANGELOG / RÈGLEMENT / MENTIONS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .legal-wrap { padding: 0 !important; }

  /* Changelog : badge date (min-width:110px) */
  .cl-version-col { min-width: unset !important; width: auto !important; font-size: 0.72rem !important; }
  .cl-entry { flex-direction: column !important; gap: 0.35rem !important; align-items: flex-start !important; }

  /* Règlement : hierarchy grade (min-width:170px) */
  .rp-hier-grade { min-width: unset !important; width: 100% !important; }
  .rp-hier-row { flex-direction: column !important; gap: 0.35rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   TOASTS — FULLWIDTH MOBILE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #toast-container {
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: 1rem !important;
  }
  .toast {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PAGINATION — COMPACTE MOBILE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .pagination { gap: 0.2rem !important; flex-wrap: wrap !important; justify-content: center !important; }
  .pagination a, .pagination span { padding: 0.3rem 0.55rem !important; font-size: 0.72rem !important; min-width: 30px !important; }
}

/* ══════════════════════════════════════════════════════════════
   ADMIN — SIDEBAR MOBILE (OVERLAY + HAMBURGER)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .admin-layout {
    flex-direction: column !important;
    position: relative !important;
  }

  /* Sidebar cachée par défaut — slide-in.
     z-index très élevé et volontairement au-dessus de TOUS les autres
     éléments d'interface (navbar 1000, menu "Plus" 1200, toasts 9998...)
     pour que le tiroir ne puisse plus jamais se retrouver "derrière"
     un autre composant, quel qu'il soit. */
  .admin-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 56px !important;
    height: calc(100vh - 56px) !important;
    z-index: 9500 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.28s !important;
    box-shadow: none !important;
    width: 260px !important;
    min-width: 260px !important;
    overflow-y: auto !important;
  }
  .admin-sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 32px rgba(0,0,0,0.6) !important;
  }

  /* Overlay sombre derrière la sidebar (mais devant tout le reste).
     Pas de backdrop-filter ici : sur certains navigateurs mobiles, un
     filtre sur un calque fixed peut être composé dans le mauvais ordre
     par le GPU et donner l'impression que l'overlay passe devant la
     sidebar au lieu de rester derrière — on utilise donc un fond uni. */
  .admin-sidebar-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    top: 56px !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 9490 !important;
  }
  .admin-sidebar-overlay.active { display: block !important; }

  /* Contenu occupe toute la largeur */
  .admin-content {
    width: 100% !important;
    min-width: 0 !important;
    padding: 1rem !important;
    margin-left: 0 !important;
  }

  /* Bouton hamburger admin dans la navbar */
  .admin-mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(120,70,20,0.28);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: 0.5rem;
    flex-shrink: 0;
  }
  .admin-mobile-toggle:hover { border-color: var(--blue-main); color: var(--blue-bright); }
  .admin-mobile-toggle svg { width: 18px; height: 18px; }

  /* Le mode "sidebar réduite" (icônes seules + info-bulle au survol) est une
     préférence de confort DESKTOP, mémorisée dans localStorage — donc
     partagée avec le mobile alors qu'elle n'a aucun sens ici. Sur un tiroir
     plein écran tactile, l'info-bulle affichée au premier tap (au lieu de la
     navigation) donnait l'impression que la sidebar était "floutée"/bloquée
     et qu'il fallait taper deux fois pour changer de page. On neutralise
     donc totalement ce mode sur mobile, quelle que soit la préférence
     enregistrée : la sidebar mobile reste toujours en version complète. */
  .admin-sidebar.collapsed { width: 260px !important; min-width: 260px !important; }
  .admin-sidebar.collapsed .sidebar-brand,
  .admin-sidebar.collapsed .sidebar-label,
  .admin-sidebar.collapsed .sidebar-link-label,
  .admin-sidebar.collapsed .sb-badge,
  .admin-sidebar.collapsed .sidebar-rt-info {
    opacity: 1 !important; width: auto !important; overflow: visible !important; pointer-events: auto !important;
  }
  .admin-sidebar.collapsed .sidebar-head { justify-content: space-between !important; }
  .admin-sidebar.collapsed .sidebar-link { justify-content: flex-start !important; padding: 0.55rem 0.9rem !important; gap: 0.65rem !important; }
  .admin-sidebar.collapsed .sidebar-link::after { content: none !important; display: none !important; }
  /* Le bouton "réduire" n'a pas de sens dans un tiroir plein écran : masqué. */
  .sidebar-toggle { display: none !important; }
}

@media (min-width: 901px) {
  .admin-mobile-toggle { display: none !important; }
  .admin-sidebar-overlay { display: none !important; }
  .admin-content { flex: 1; min-width: 0; }
}

/* Admin grids */
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(2,1fr) !important; gap: 0.65rem !important; }
  .admin-content { padding: 0.85rem !important; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   MODALS — FULL-SCREEN SUR MOBILE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .confirm-modal-box,
  [class*="-modal-box"] {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    max-height: 85vh !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Overlay des modales pousse vers le bas */
  .modal-overlay,
  [id*="modal-overlay"],
  [id*="smod-overlay"] {
    align-items: flex-end !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   UTILITAIRES RESPONSIVE SUPPLÉMENTAIRES
   ══════════════════════════════════════════════════════════════ */

/* Empêcher des textes trop larges de déborder */
p, h1, h2, h3, h4, h5, h6, li, td, th, span {
  word-break: break-word;
  overflow-wrap: break-word;
}
/* Les codes / IPs / SteamID ne wrappent pas mais scrollent */
code, .text-mono, [class*="font-mono"], .font-mono {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Flex containers qui débordent → wrap automatique */
@media (max-width: 768px) {
  .home-list-row { flex-wrap: wrap !important; }
  .home-server-status { flex-wrap: nowrap !important; }
  .ticket-card > div { flex-wrap: wrap !important; }

  /* Boutons inline dans les panneaux → s'empilent */
  .panel form[style*="display:inline"] {
    display: block !important;
    margin-bottom: 0.4rem !important;
  }
  .panel form[style*="display:inline"] button { width: 100% !important; justify-content: center !important; }
}

/* Section-head avec liens : on compacte */
@media (max-width: 480px) {
  .home-section-head { gap: 0.5rem !important; margin: 1.75rem 0 0.85rem !important; }
  .home-section-head h2 { font-size: 0.78rem !important; letter-spacing: 2px !important; }
  .home-section-head .line { display: none; }
}

/* Footer */
@media (max-width: 600px) {
  footer { padding: 1.25rem 1rem !important; font-size: 0.78rem !important; }
  footer .footer-links { flex-direction: column !important; gap: 0.3rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   MAINTENANCE & ERREUR
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .maintenance-banner { font-size: 0.68rem !important; padding: 0.38rem 0.75rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   TOUCH — UX IMPROVEMENTS
   ══════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Désactive les hover transforms qui restent bloqués sur iOS */
  .stat-card:hover,
  .shop-card:hover,
  .home-stat-card:hover,
  .home-step:hover {
    transform: none !important;
  }
  /* Tap highlight personnalisé */
  a, button, [role="button"] { -webkit-tap-highlight-color: rgba(190,96,0,0.15); }
  /* Taille minimale des cibles tactiles */
  a, button, input, select, textarea, [role="button"] { touch-action: manipulation; }
}

/* ══════════════════════════════════════════════════════════════
   IMPRESSION
   ══════════════════════════════════════════════════════════════ */
@media print {
  .admin-sidebar, .navbar, footer, .scanline,
  .hamburger, .admin-mobile-toggle, .admin-sidebar-overlay,
  .pagination, .prof-tabs, #toast-container { display: none !important; }
  .admin-layout { display: block !important; }
  .admin-content { padding: 0 !important; }
  .page-wrap { max-width: 100% !important; padding: 0 !important; }
  body { background: #fff !important; color: #000 !important; font-size: 11pt !important; }
  .panel { border: 1px solid #ccc !important; background: #fff !important; box-shadow: none !important; }
  a { color: #000 !important; text-decoration: underline !important; }
}