/* ════════════════════════════════════════════════
   OLYCITY · Responsive
   ════════════════════════════════════════════════ */

.page-nav-btn[hidden] { display: none !important; }

@media (max-width: 1450px) and (min-width: 1025px) {
  .topbar-row { gap: 10px; padding: 12px 18px; }
  .page-nav { gap: 2px; }
  .page-nav-btn { padding: 8px 11px; font-size: 10px; letter-spacing: 1px; }
  .page-nav-icon { width: 14px; height: 14px; }
  .topbar-tools .search-wrap { display: none; }
}

@media (max-width: 900px) {
  .topbar-row{ padding:10px 16px; gap:10px; flex-wrap:wrap; }
  .nav-maps{ order:3; width:100%; justify-content:flex-start; }
  .map-hero-title{ font-size:42px; }
  .map-hero-content{ padding:24px; }
  .comp-card{ padding:18px 20px; }
  .main, .section, .roster-section, .footer{ padding-left:16px; padding-right:16px; }
  .search-input{ width:100px; }
  .agent-name{ font-size:10px; }
  .agent-role{ font-size:8px; }
  .role-corner{ font-size:8px; padding:1px 4px; }
  .agent-hero-content{ grid-template-columns:1fr; padding:30px 16px; gap:20px; }
  .agent-portrait-wrap{ order:-1; min-height:280px; }
  .agent-portrait-full{ max-height:380px; }
  .agent-body{ padding:30px 16px; }
  .ab-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .hero{ padding:40px 16px 28px; }
  .hero-title-frame::before, .hero-title-frame::after{ width:16px; height:16px; }
  .nav-map-btn{ padding:6px 10px; font-size:10px; }
  .map-hero{ height:220px; }
  .map-hero-title{ font-size:32px; }
  .map-stat-val{ font-size:22px; }
  .ab-grid{ grid-template-columns:1fr; }
  .agent-page-name{ font-size:48px; }
  .agents-grid{ gap:6px; }
}

/* ════════════════════════════════════════════════
   VAGUE 4 — RESPONSIVE AMÉLIORÉ
   ════════════════════════════════════════════════ */

/* ── TABLET (1024px) ─────────────── */
@media (max-width: 1024px) {
  .topbar-row { flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
  .page-nav { order: 3; width: 100%; justify-content: center; }
  .topbar-tools { margin-left: auto; }

  .map-hero-content { flex-direction: column; gap: 16px; padding: 28px 20px; }
  .map-hero-stats { flex-wrap: wrap; gap: 16px; }
  .map-stat { min-width: 80px; }

}

/* ── MOBILE (768px) ──────────────── */
@media (max-width: 768px) {
  /* Navigation tactile : identité en haut, destinations principales toujours accessibles en bas. */
  body { padding-bottom: 68px; }
  body.mobile-nav-menu-open { overflow: hidden; }
  .topbar {
    background: rgba(8,10,14,.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .topbar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
  }
  .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .brand-mark-wheel { flex: 0 0 auto; }
  .topbar-tools { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; }
  .game-switch-btn, .profile-indicator { min-height: 44px; touch-action: manipulation; }
  .profile-indicator { min-width: 44px; justify-content: center; padding: 4px 8px; }
  .page-nav {
    position: fixed;
    z-index: 700;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: 64px;
    padding: 5px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    box-sizing: border-box;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    overflow: visible;
    border-top: 1px solid var(--border2);
    background: rgba(8,10,14,.96);
    box-shadow: 0 -10px 35px rgba(0,0,0,.32);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  .page-nav > .page-nav-btn[data-page="roster"],
  .page-nav > .page-nav-btn[data-page="courbes"],
  .page-nav > .page-nav-btn[data-page="games"],
  .page-nav > .page-nav-btn[data-page="betting"] { display: none !important; }
  .nav-maps-dropdown { flex: 1 1 0; min-width: 0; }
  .nav-maps-dropdown > .page-nav-btn { width: 100%; }
  .nav-maps-menu { display: none !important; }
  .page-nav-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 54px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px;
    border-radius: 4px;
    clip-path: none;
    touch-action: manipulation;
    font-size: 9px;
    letter-spacing: .25px;
  }
  .page-nav-btn.active { background: var(--red-low); border-color: transparent; color: var(--red); box-shadow: none; }
  .page-nav-btn .page-nav-icon { width:19px; height:19px; }
  .mobile-nav-more-trigger { display:flex; }

  .mobile-nav-more-backdrop {
    position: fixed; z-index: 690; inset: 0 0 64px; display:flex; align-items:flex-end;
    padding: 16px; background: rgba(3,5,8,.72); backdrop-filter: blur(6px);
  }
  .mobile-nav-more-sheet {
    width: 100%; padding: 10px; border: 1px solid var(--border2);
    background: linear-gradient(145deg, var(--surf2), var(--bg-deep));
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
  }
  .mobile-nav-more-head { display:flex; align-items:center; justify-content:space-between; padding: 7px 6px 12px; }
  .mobile-nav-more-head > div { display:grid; gap:3px; }
  .mobile-nav-more-head span { color:var(--red); font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
  .mobile-nav-more-head strong { color:var(--text); font-size:18px; }
  .mobile-nav-more-head > button { width:42px; height:42px; border:1px solid var(--border2); background:transparent; color:var(--muted); font-size:24px; }
  .mobile-nav-more-sheet > button {
    width:100%; min-height:64px; display:grid; grid-template-columns:34px minmax(0,1fr) auto;
    align-items:center; gap:10px; padding:10px 12px; border:0; border-top:1px solid var(--border);
    background:transparent; color:var(--text); text-align:left; touch-action:manipulation;
  }
  .mobile-nav-more-sheet > button > .mobile-nav-section-icon { width:22px; height:22px; color:var(--red); justify-self:center; }
  .mobile-nav-more-sheet > button > div { display:grid; gap:2px; }
  .mobile-nav-more-sheet > button strong { font-size:14px; }
  .mobile-nav-more-sheet > button small { color:var(--muted); font-size:11px; }
  .mobile-nav-more-sheet > button i { color:var(--dim); font-size:22px; font-style:normal; }

  .section { padding: 38px 16px; }
  .section-header { gap: 8px 10px; margin-bottom: 20px; }
  .section-tag { width: 100%; font-size: 9px; letter-spacing: 2px; }
  .section-title { font-size: 24px; line-height: 1.15; }
  .section-line { display: none; }

  .mobile-map-picker {
    position:relative; z-index:3; display:flex; gap:8px; overflow-x:auto;
    padding:10px 14px 11px; border-bottom:1px solid var(--border);
    background:color-mix(in srgb,var(--bg) 94%,transparent);
    scrollbar-width:none; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
  .mobile-map-picker::-webkit-scrollbar { display:none; }
  .mobile-map-picker .nav-map-btn {
    flex:0 0 auto; min-width:112px; min-height:48px; display:grid;
    grid-template-columns:42px auto; align-items:center; gap:8px; padding:6px 10px;
    border:1px solid var(--border2); border-radius:5px; background:var(--surf);
    color:var(--muted); scroll-snap-align:center; touch-action:manipulation;
  }
  .mobile-map-picker .nav-map-btn.active {
    border-color:var(--red-mid); background:var(--red-low); color:var(--text);
    box-shadow:inset 0 -2px 0 var(--red);
  }
  .mobile-map-picker .nav-map-icon { width:42px; height:28px; }
  .mobile-map-picker .nav-map-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .comp-tabs,
  .history-filters > .history-filter-group:first-child > div {
    box-shadow: inset -18px 0 18px -20px var(--red);
  }

  .live-header {
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
    gap:10px; min-height:148px; padding:15px;
  }
  .live-header.is-gauntlet{ min-height:112px; padding:13px 15px; }
  .live-header.is-gauntlet .live-map-name{ font-size:22px; letter-spacing:2px; white-space:normal; }
  .live-match-art{ width:100%; }
  .live-match-art-shade{ background:linear-gradient(0deg,rgba(8,11,17,.98) 3%,rgba(8,11,17,.75) 55%,rgba(8,11,17,.22)); }
  .live-match-context{ display:grid; gap:6px; }
  .live-match-kicker{ font-size:8px; letter-spacing:2px; }
  .live-map-name {
    min-width:0; overflow:hidden; font-size:25px; letter-spacing:3px; text-overflow:ellipsis; white-space:nowrap;
  }
  /* Score + mode + serveur ne tiennent pas sur une ligne à 390 px : on passe à
     la ligne plutôt que d'écraser le libellé du mode sur trois lignes. */
  .live-match-meta{ gap:6px; flex-wrap:wrap; }
  .live-phase{ min-height:34px; padding:5px 7px; font-size:8px; }
  .live-score{ min-height:34px; gap:7px; padding:3px 8px; }
  .live-score-side strong{ font-size:17px; }
  .live-score-side small{ font-size:7px; letter-spacing:1px; }
  .live-server {
    width:auto; min-width:125px; max-width:170px; height:34px; padding-right:40px;
  }
  .live-server-copy small{ font-size:7px; }
  .live-server-copy strong{ font-size:9px; }
  .live-server-credit{ font-size:6px; }
  .live-match-actions{ min-width:0; align-self:stretch; justify-content:space-between; }
  .live-avg-rank{ min-height:38px; padding:5px 7px; }
  .live-avg-rank img{ width:25px; height:25px; }
  .live-avg-rank-copy small{ font-size:6px; }
  .live-avg-rank-copy strong{ max-width:105px; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
  .curse-controls{
    width:auto; max-width:150px; margin-left:0; flex-wrap:wrap; justify-content:flex-end;
  }
  .curse-toggle{ min-height:34px; padding:6px 8px; font-size:8px; }
  .live-body { grid-template-columns: minmax(0, 1fr); gap:8px; }
  .live-players { grid-template-columns: 1fr; min-width: 0; }
  .live-team-tabs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .live-team-tab{
    min-height:42px; border:1px solid var(--border); background:var(--surf); color:var(--muted);
    font:700 9px/1 'Tomorrow',sans-serif; letter-spacing:1.2px; text-transform:uppercase;
  }
  .live-team-tab[aria-selected="true"]{ border-color:var(--red-mid); background:var(--red-low); color:var(--text); }
  .live-players[data-mobile-team="allies"] .live-team-enemies,
  .live-players[data-mobile-team="enemies"] .live-team-allies{ display:none; }
  .live-team{ padding:7px; }
  .live-team-title{ min-height:25px; }
  .live-player-summary{ min-height:57px; padding:8px; }
  .live-player-portrait,.live-player-agent{ width:42px; height:42px; }
  .live-player-portrait{ flex-basis:42px; }
  .live-player-name{ font-size:11px; }
  .live-player-agent-name{ font-size:9px; }
  .live-rank-current,.live-rank-peak{ font-size:8.5px; }
  .live-player-details{ flex-wrap:wrap; margin:0 8px; padding:8px 0 9px 52px; }
  .live-players.is-gauntlet .live-player-summary{ min-height:48px; padding:8px 10px; }
  .live-players.is-gauntlet .live-player-details{ padding-left:10px; }
  .live-player-tracker{ min-height:24px; display:inline-flex; align-items:center; }
  .live-players.is-syncing { min-height:118px; }
  .live-roster-sync { gap:5px; padding:18px 14px; }
  .live-roster-sync strong { font-size:10px; letter-spacing:1.4px; }
  .live-roster-sync small { font-size:10px; }
  .live-diagnostic {
    grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-bottom:8px; padding:9px;
    border-left:2px solid rgba(255,255,255,.16);
  }
  .live-diagnostic[data-state="online"], .live-diagnostic[data-state="idle"] { border-left-color:#3fcf6b; }
  .live-diagnostic[data-state="agent-select"] { border-left-color:#f5c842; }
  .live-diagnostic[data-state="in-game"] { border-left-color:var(--red); }
  .live-diagnostic-summary{ min-width:0; }
  .live-diagnostic-copy strong { font-size: 11px; }
  .live-diagnostic-copy span { font-size: 10px; line-height: 1.35; white-space: normal; }
  .live-diagnostic-version, .live-client-chip-version { display: none; }
  .live-client-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-column:1 / -1; gap:8px; margin:0; padding:0; }
  .live-client-group{ grid-column:1 / -1; display:grid; padding:8px; }
  .live-client-group-heading{ display:grid; min-width:0; }
  .live-client-group-heading small{ max-width:none; white-space:normal; }
  .live-client-group-members{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .live-download-link { display:none; }
  .live-session-picker{
    grid-template-columns:1fr; gap:7px; margin-bottom:8px; padding:9px;
  }
  .live-session-picker-heading{ display:flex; align-items:baseline; justify-content:space-between; min-width:0; }
  .live-session-picker-heading span{ font-size:9px; }
  .live-session-picker-heading small{ font-size:9px; }
  .live-session-picker-list{ margin:0 -9px -9px; padding:0 9px 9px; }
  .live-session-card{ min-width:205px; min-height:50px; padding:6px 8px; }
  .live-session-state{ display:none; }
  .live-client-chip { gap:9px; min-height:72px; max-width:none; box-sizing:border-box; padding:10px; }
  .live-client-avatar { flex-basis: 30px; width: 30px; height: 30px; }
  .live-client-info strong { font-size: 12px; }
  .live-client-info small { font-size: 11px; white-space: normal; }
  .live-client-group-heading strong { font-size: 8px; }
  .live-client-group-heading small { font-size: 8.5px; }
  .live-pregame-header { flex-direction: column; min-height: 0; padding: 16px; }
  .live-side-card { min-width: 0; width: 100%; box-sizing: border-box; }
  .live-pregame-heading strong { letter-spacing: 3px; }
  .live-pregame-comps{ display:flex; margin:0 -16px; padding:0 16px; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .live-pregame-comps::-webkit-scrollbar{ display:none; }
  .live-pregame-comp{ flex:0 0 min(78vw,290px); padding:11px 12px; scroll-snap-align:start; }
  .live-pro-preset-btn{ min-width:44px; }
  .live-comp-agent-names{ font-size:8px; }
  .history-game-detail { padding:0; }
  .history-detail-layout { grid-template-columns:1fr; gap:10px; }
  .history-map-visual { min-height:152px; padding:12px; border-width:0 0 1px; }
  .history-match-result {
    position:relative; top:auto; left:auto; align-self:flex-start;
    margin-bottom:auto; padding:7px 9px;
  }
  .history-match-result > strong { font-size:18px; }
  .history-map-visual > strong { font-size:21px; }
  .history-match-facts { gap:5px; margin-top:8px; }
  .history-match-facts > span { min-width:58px; padding:5px 7px; }
  .history-tracker-link { min-height:44px; }
  .history-detail-content { gap:9px; padding:0 10px 10px; }
  .history-match-overview { grid-template-columns: 1fr; }
  .history-performance-card.self { grid-template-columns: 1fr; }
  .history-performance-metrics { grid-template-columns: repeat(2,1fr); }
  .history-performance-card.mvp { min-height: 62px; }
  .history-roster-disclosure { border:1px solid var(--border); background:var(--bg); }
  .history-roster-disclosure > summary {
    display:grid; grid-template-columns:minmax(0,1fr) auto 18px; align-items:center; gap:8px;
    min-height:48px; box-sizing:border-box; padding:9px 11px; list-style:none; cursor:pointer;
  }
  .history-roster-disclosure > summary::-webkit-details-marker { display:none; }
  .history-roster-disclosure > summary > span { color:var(--text); font-size:12px; font-weight:650; }
  .history-roster-disclosure > summary > strong { color:var(--muted); font-size:10px; font-weight:600; }
  .history-roster-disclosure > summary > i { color:var(--dim); font-size:16px; font-style:normal; transition:transform .2s; }
  .history-roster-disclosure[open] > summary { border-bottom:1px solid var(--border); }
  .history-roster-disclosure[open] > summary > i { transform:rotate(180deg); }
  .history-roster-content { padding:9px; }
  .history-teams { grid-template-columns: 1fr; }
  .history-deathmatch-list { grid-template-columns: 1fr; }
  .history-day-summary { align-items: flex-start; flex-wrap: wrap; gap: 5px 12px; padding: 11px 12px 11px 15px; }
  .history-day-summary > strong { width: calc(100% - 30px); min-width: 0; }
  .history-day-summary > i { position: absolute; top: 12px; right: 12px; }
  .history-day-detail { padding: 0 12px 12px 15px; }
  .history-day-performance > summary { grid-template-columns: 1fr auto; }
  .history-day-performance > summary > strong { grid-column: 1; grid-row: 2; text-align: left; }
  .history-day-performance > summary > i { grid-column: 2; grid-row: 1 / span 2; }
  .history-day-player > header { align-items: flex-start; flex-direction: column; gap: 2px; }
  .history-day-player-metrics { grid-template-columns: repeat(2,1fr); }
  .history-view-tabs .history-filter-button { flex: 1; min-width: 0; }
  .history-filters { align-items: stretch; flex-direction: column; gap: 14px; padding: 12px; }
  .history-filter-group > div { width: 100%; }
  .history-filter-button { flex: 1; min-width: max-content; }
  .history-filters > .history-filter-group:first-child > div {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .history-filters > .history-filter-group:first-child > div::-webkit-scrollbar { display: none; }
  .history-filters > .history-filter-group:first-child .history-filter-button { flex: 0 0 auto; }
  .history-load-more-wrap button {
    width: 100%; max-width: 290px; min-height: 46px; border: 1px solid var(--red);
    background: var(--red-low); color: var(--text); font: 650 12px 'DM Sans', sans-serif;
    cursor: pointer;
  }
  .data-state-card { grid-template-columns: auto minmax(0,1fr); min-height: 92px; padding: 16px; }
  .data-state-lines { display: none; }
  .history-cache-note { grid-template-columns:8px 1fr; min-height:44px; }
  .history-cache-note > small { grid-column:2; justify-self:start; }
  .history-analysis > summary { grid-template-columns: 1fr auto; }
  .history-analysis > summary small { display: none; }
  .history-duration { display: none; }
  .history-game-summary { gap: 8px; padding: 9px; }
  .history-self-agent { width: 32px; height: 32px; }
  .history-player { grid-template-columns: 30px minmax(70px,1fr) auto 48px; gap: 6px; }
  .history-team-heading { grid-template-columns: 30px minmax(70px,1fr) auto 48px; gap: 6px; }

  /* Pages de données : marges constantes et titres lisibles. */
  #page-history > .container, #page-betting > .container {
    width: 100%; box-sizing: border-box; padding: 24px 16px 0 !important;
  }
  .history-page-title { font-size: 25px; }
  .history-page-subtitle { margin-bottom: 22px; font-size: 13px; }

  /* Roster : actions tactiles et en-tête moins encombrant. */
  .roster-title { font-size: 36px; line-height: 1.05; }
  .sync-all-btn, .henrik-key-btn, .player-sync-btn, .tracker-btn { min-height: 44px; box-sizing: border-box; }

  /* Hero compact */
  .hero { padding: 40px 20px 32px; }
  .hero-title { font-size: clamp(40px, 12vw, 80px); }
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-cta-primary, .hero-cta-secondary { width: 200px; text-align: center; justify-content: center; }

  /* Map section */
  .map-hero { height: 210px; min-height: 0; margin-bottom: 16px; }
  .map-hero-content { padding: 18px; gap: 0; flex-wrap: nowrap; }
  .map-hero-left { width: 100%; min-width: 0; }
  .map-hero-sub {
    margin-bottom: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: 9px; letter-spacing: 2px;
  }
  .map-hero-title { font-size: 36px; }
  .map-hero-tags { margin-top: 10px; flex-wrap: nowrap; overflow: hidden; }
  .map-tag { padding: 4px 8px; font-size: 8px; letter-spacing: 1px; white-space: nowrap; }
  .map-tag:nth-child(n+4) { display: none; }
  .map-hero-stats { display: none; }

  .map-section-tabs {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .map-section-tabs::-webkit-scrollbar { display: none; }
  .map-section-tab {
    flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; font-size: 10px;
    scroll-snap-align: start;
  }
  .map-section-tab span { display: none; }
  .map-section-tab, .comp-tab, .lineup-agent-tab, .map-notes-card summary,
  .history-filter-button, .history-view-tabs button,
  .lol-history-periods button, .coop-status-tabs button { min-height: 44px; touch-action: manipulation; }

  /* Comps */
  .map-section-panel { padding-top: 16px; }
  .comp-tabs {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;
    margin:0 0 14px; overflow:visible; box-shadow:none;
  }
  .comp-tabs::-webkit-scrollbar { display: none; }
  .comp-tabs::after { display:none; }
  .comp-tab {
    width:100%; min-width:0; max-width:none; padding:8px 6px; overflow:hidden;
    white-space:nowrap; clip-path:none; font-size:9px; letter-spacing:.7px;
  }
  .comp-tab-label{ display:none; }
  .comp-tab-short{ display:inline; overflow:hidden; text-overflow:ellipsis; }
  .comp-tab-icon{ flex:0 0 auto; }
  .comp-card { margin-bottom: 16px; padding: 16px; }
  .comp-header { margin-bottom: 14px; gap: 8px; }
  .comp-label-row { min-width: 0; gap: 8px; }
  .comp-tier { padding: 4px 8px; font-size: 9px; letter-spacing: 1.5px; }
  .comp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; white-space: nowrap; }
  .comp-updated, .comp-outdated, .comp-card-actions { display: none; }

  .pro-team-picker{ margin:0 -16px 12px; padding:0 16px; gap:7px; scroll-snap-type:x proximity; }
  .pro-team-btn{ min-width:92px; min-height:44px; padding:6px 8px; gap:7px; scroll-snap-align:start; }
  .pro-team-btn img{ width:25px; height:25px; }
  .pro-team-btn small{ display:none; }
  .pro-match-meta{ margin:0 0 12px; padding:7px 9px; }
  .pro-match-meta > img{ width:28px; height:28px; }
  .pro-match-meta strong{ font-size:10px; }
  .pro-match-meta span{ font-size:9px; }

  .agents-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px 7px; }
  .agents-grid > .agent-card { grid-column: span 2; min-width: 0; }
  .agents-grid > .agent-card:nth-child(4) { grid-column: 2 / span 2; }
  .agents-grid > .agent-card:nth-child(5) { grid-column: 4 / span 2; }
  .portrait-frame { aspect-ratio: 4 / 5; }
  .agent-footer { padding: 7px 2px; }
  .agent-name { overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }
  .agent-role { overflow: hidden; text-overflow: ellipsis; font-size: 8px; letter-spacing: .7px; white-space: nowrap; }
  .agent-hover-tooltip { display: none !important; }

  .comp-mobile-details {
    display: block; margin-top: 14px; border: 1px solid var(--border2);
    background: var(--surf2);
  }
  .comp-mobile-details summary {
    min-height: 44px; padding: 0 12px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; cursor: pointer; list-style: none;
    color: var(--muted); font-family: 'Tomorrow', sans-serif; font-size: 10px;
    font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  }
  .comp-mobile-details summary::-webkit-details-marker { display: none; }
  .comp-mobile-details summary strong { color: var(--red); font-size: 9px; letter-spacing: 1.5px; }
  .comp-mobile-details[open] summary strong { font-size: 0; }
  .comp-mobile-details[open] summary strong::after { content: 'Masquer'; font-size: 9px; }
  .comp-bottom { display: none; margin-top: 10px; gap: 10px; }
  .comp-mobile-details[open] + .comp-bottom { display: grid; }
  .tip-box { margin-top: 0; padding: 12px; gap: 10px; }
  .tip-icon { padding: 2px 6px; font-size: 8px; letter-spacing: 1px; }
  .tip-text { font-size: 12px; line-height: 1.5; }
  .comp-card-footer { margin-top: 12px; align-items:flex-start; flex-wrap:wrap; }
  .comp-source { display: block; margin-top: 0; font-size: 10px; line-height: 1.4; }

  .comp-agents { gap: 4px; }
  .comp-agents .portrait-frame { width: 52px; }

  /* Nav maps */
  .nav-maps { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .nav-map-btn { white-space: nowrap; font-size: 10px; }

  /* Roster */
  .roster-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Lineups */
  .lineup-cards-grid { grid-template-columns: 1fr; }

  .map-notes-card { margin: 12px 16px 18px; }
  .map-notes-card summary { padding: 13px 14px; font-size: 10px; }
  .map-notes-card summary strong { display: none; }
  .map-notes-card .notes-list { padding: 12px 14px 14px; }

  /* Agent page */
  .agent-hero-content { grid-template-columns: 1fr; }
  .agent-portrait-wrap { display: none; }
  .agent-hero { min-height: 420px; }
  .agent-info { padding: 20px; }
}

/* ── SMALL MOBILE (480px) ─────────── */
@media (max-width: 480px) {
  .profile-indicator-name { display: none; }
  .page-nav-btn { min-width: 0; overflow:hidden; letter-spacing: 0; white-space:nowrap; }
  .topbar-tools .search-wrap { display: none; }

  .section-inner { padding: 0; }
  .roster-page-inner { padding: 32px 16px; }

}