/* ---------- écran large (PC, 16/9) : navigation latérale, contenu large, fiches en deux colonnes */
@media (min-width:1024px) {
  body { --side:232px }
  .top { display:none !important }
  nav.tabs { top:0; bottom:0; right:auto; width:var(--side); display:flex; flex-direction:column; gap:4px;
    padding:22px 14px; border-top:0; border-right:1px solid var(--line) }
  .nav-logo { display:block; font-weight:800; font-size:22px; letter-spacing:-.02em; padding:0 10px 18px }
  .nav-logo b { color:var(--accent) }
  .nav-level { display:grid; gap:6px; margin:0 6px 16px; padding:10px 12px; border-radius:12px; background:var(--surface2);
    cursor:pointer; font-size:13px }
  .nav-level b { font-size:15px }
  .nav-credits { display:flex; align-items:center; gap:8px; margin:0 6px 18px; padding:10px 12px; border-radius:12px;
    background:var(--surface2); font-weight:800; font-size:17px; font-variant-numeric:tabular-nums }
  nav.tabs button { flex-direction:row; justify-content:flex-start; gap:12px; font-size:15px; padding:11px 12px;
    border-radius:10px }
  nav.tabs button:hover { background:var(--surface2) }
  nav.tabs button.on { background:color-mix(in srgb, var(--accent) 16%, transparent) }
  nav.tabs button svg { width:21px; height:21px }
  nav.tabs .dot { position:static; margin-left:auto }
  /* contenu de 1240 px maximum, centré dans l'espace à droite de la navigation */
  main { max-width:none; margin:0 0 0 var(--side);
    padding:32px max(44px, calc((100vw - var(--side) - 1240px) / 2)) 60px }
  h1 { font-size:30px }
  .grid { grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); gap:18px }
  .toolbar { grid-template-columns:minmax(0, 520px) 1fr; align-items:center }
  .toolbar .chips { justify-content:flex-end }
  .toast { bottom:28px; left:calc(50% + var(--side) / 2) }
  .coach { position:fixed; z-index:45; margin:0; right:24px; bottom:24px; width:360px }
  /* paquet : une scène centrée à l'écran, le paquet en grand avec un halo discret */
  .packpage { grid-template-columns:minmax(0, 1fr) 360px; gap:32px; align-items:start }
  .packpage.solo { grid-template-columns:minmax(0, 1fr) }
  .packpage:not(.solo) .pack-hero { min-height:0; justify-content:flex-start; padding-top:0 }
  /* les deux colonnes partent de la même ligne, et l'ensemble est centré dans la hauteur de l'écran */
  .packpage:not(.solo) { min-height:calc(100vh - 92px); align-content:center }
  .packpage:not(.solo) .pack-hero h1 { font-size:28px; line-height:1.2 }
  .packpage .pack-hero { min-height:calc(100vh - 92px) }
  .pside { position:sticky; top:32px; max-width:none }
  #packResult { min-height:calc(100vh - 92px) }
  .pack-hero, #packResult { min-height:calc(100vh - 92px); display:flex; flex-direction:column; align-items:center;
    justify-content:center; text-align:center; padding:0 }
  .pack-hero { gap:4px }
  .stage { margin:30px auto 30px }
  .fanc { width:160px; height:226px; top:40px }
  .fanc.l { left:-120px } .fanc.r { right:-120px }
  .pack-hero h1 { font-size:34px; margin:0 }
  .pack-hero p { margin:0 }
  .pack-hero .pack { width:250px; height:356px; transition:transform .25s, box-shadow .25s }
  .pack-hero .pack:hover { transform:translateY(-6px) rotate(-1.5deg);
    box-shadow:0 28px 60px rgba(70,50,200,.45) }
  .pack-hero .pack .w { width:120px; height:120px; font-size:60px }
  .pack-hero .btn { min-width:260px; min-height:52px; font-size:16px }
  #packResult { justify-content:flex-start; padding-top:max(24px, calc(50vh - 330px)) }
  #packResult h1 { margin-bottom:4px }
  #packResult #hint { margin:0 0 28px }
  .reveal { grid-template-columns:repeat(5, minmax(0, 220px)); gap:24px; justify-content:center; width:100% }
  #packResult .row { width:100%; margin-top:30px !important }
  .reveal .card .name { font-size:14px }
  #packResult .row { max-width:520px; margin-left:auto; margin-right:auto }
  /* fiches et fenêtres : boîte centrée, carte à gauche, actions à droite */
  .sheet-bg { align-items:center }
  .sheet { max-width:600px; border-radius:22px; padding:0 26px 26px }
  .sheet-top { margin:0 -26px 8px; height:48px }
  .sheet-x { top:10px; right:14px }
  .sheet.wide { max-width:900px }
  .grab { visibility:hidden }
  .detail { grid-template-columns:360px 1fr; gap:34px; align-items:start }
  .cardcol { max-width:360px }
  .infocol { padding-top:4px }
  .bigcard { max-width:360px }
  .bigcard .text { max-height:12em }
  /* listes du marché et des échanges sur deux colonnes */
  .list-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 14px }
  .stat-grid { grid-template-columns:repeat(5, 1fr) }
  .hscroll { grid-auto-flow:row; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); overflow:visible }
  .tiles { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) }
  .profile-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 32px; align-items:start }
}

/* Accueil Paquets : panneau joueur en haut, scène et missions, puis séries ciblées. */
@media (min-width:1024px) {
  body:has(.packpage) main { padding-top:100px; padding-bottom:14px }
  body:has(.packpage) nav.tabs { background:color-mix(in srgb, var(--bg) 88%, var(--surface)); padding-top:30px }
  body:has(.packpage) nav.tabs .nav-logo { margin-bottom:22px; font-size:25px }
  body:has(.packpage) nav.tabs .nav-level { position:fixed; top:24px; right:32px; width:210px; margin:0;
    background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px 14px }
  body:has(.packpage) nav.tabs .nav-credits { position:fixed; top:24px; right:251px; min-height:59px; margin:0;
    background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px 17px }
  body:has(.packpage) nav.tabs button { min-height:48px; color:var(--muted) }
  body:has(.packpage) nav.tabs button.on { color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 42%, transparent) }
  .packpage:not(.solo) { grid-template-columns:minmax(0,1fr) minmax(340px, 400px); gap:20px 36px;
    min-height:0; align-content:start; align-items:center }
  .packpage:not(.solo) .pside, .packpage:not(.solo) .pack-extra { display:contents }
  .packpage:not(.solo) .pack-hero { grid-column:1; grid-row:1; min-height:500px; padding:0;
    justify-content:center; gap:5px }
  .packpage:not(.solo) #missions { grid-column:2; grid-row:1; align-self:center; padding:20px;
    border:1px solid var(--line); border-radius:16px; background:var(--pack-panel) }
  .packpage:not(.solo) #missions .mission { background:transparent; border:0; border-top:1px solid var(--line);
    border-radius:0; padding:16px 2px; margin:0 }
  .packpage:not(.solo) #missions .mbonus { border-top:1px solid var(--line); margin-top:0; padding:15px 2px 0 }
  .packpage:not(.solo) .pack-hero .stage { margin:20px auto 25px }
  .packpage:not(.solo) .pack-hero .pack { width:235px; height:334px }
  .packpage:not(.solo) .pack-hero .pack .w { width:112px; height:112px }
  .packpage:not(.solo) .pack-hero #open { width:320px }
  .packpage:not(.solo) .pack-hero .promolink { margin-top:3px }
  .packpage:not(.solo) .pack-hero .packhint { margin-top:3px }
  .packpage:not(.solo) #targets { grid-column:1/-1; grid-row:2; padding-top:20px; border-top:1px solid var(--line);
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 16px }
  .packpage:not(.solo) #targets .section-title, .packpage:not(.solo) #targets .target-info { grid-column:1/-1 }
  .packpage:not(.solo) #targets .target { margin:0 }
  .packpage:not(.solo) #weeklyBox { grid-column:1/-1; grid-row:3 }
  .packpage:not(.solo) .pack-prefs { grid-column:2; grid-row:1; align-self:end; width:100% }
}

/* Très grands écrans : la page Paquets utilise la largeur et la hauteur disponibles. */
@media (min-width:1700px) {
  body:has(.packpage) main { padding-inline:max(56px, calc((100vw - var(--side) - 1750px) / 2)) }
}
@media (min-width:1700px) and (min-height:1050px) {
  body:has(.packpage) main { padding-top:88px; padding-bottom:20px }
  .packpage:not(.solo) { grid-template-columns:minmax(0,1fr) minmax(440px, 500px); gap:24px 48px;
    min-height:calc(100dvh - 108px); align-content:center }
  .packpage:not(.solo) .pack-hero { min-height:700px; gap:9px }
  .packpage:not(.solo) .pack-hero .stage { margin:28px auto 34px }
  .packpage:not(.solo) .pack-hero .pack { width:305px; height:434px }
  .packpage:not(.solo) .pack-hero .pack .w { width:140px; height:140px; font-size:70px }
  .packpage:not(.solo) .fanc { width:205px; height:290px; top:54px }
  .packpage:not(.solo) .fanc.l { left:-146px }
  .packpage:not(.solo) .fanc.r { right:-146px }
  .packpage:not(.solo) .pack-hero #open { width:390px; min-height:64px; font-size:19px }
  .packpage:not(.solo) .pack-hero .packline, .packpage:not(.solo) .pack-hero .promolink { font-size:16px }
  .packpage:not(.solo) .pack-hero .packhint { font-size:13px }
  .packpage:not(.solo) #missions { padding:24px }
  .packpage:not(.solo) #missions .mission { padding:21px 4px }
  .packpage:not(.solo) #missions .mission .ml { font-size:15px }
  .packpage:not(.solo) #missions .mission .mr, .packpage:not(.solo) #missions .mission-count { font-size:12px }
  .packpage:not(.solo) #targets { gap:14px 20px }
  .packpage:not(.solo) #targets .target { min-height:78px }
  .packpage:not(.solo) #targets .target .tn { font-size:14px }
  .packpage:not(.solo) #targets .target .tc { font-size:12px }
  .packpage:not(.solo) .pack-prefs { padding:15px; font-size:14px }
}