/* ===========================================================================
   TCG Vault — VERSION PC (≥ 920 px)
   Navigation latérale, grande grille, fiches en fenêtres centrées, SANS scan
   (le scan carte reste une fonctionnalité mobile : caméra du téléphone).
   =========================================================================== */
@media (min-width: 920px) {

  /* ---- Shell : barre latérale + contenu ---- */
  .app {
    max-width: none;           /* toute la largeur de l'écran */
    box-shadow: none;
    display: grid;
    grid-template-columns: 232px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "nav header" "nav main";
  }
  .app-header { grid-area: header; padding-left: 48px; padding-right: 48px; }
  .app-main   { grid-area: main; padding: var(--sp-6) 48px var(--sp-8); } /* marges latérales confortables */

  /* ---- Nav basse -> barre LATÉRALE ---- */
  .app-nav {
    grid-area: nav;
    position: static; height: auto;
    flex-direction: column; justify-content: flex-start; gap: 6px;
    padding: var(--sp-5) var(--sp-3);
    border-top: none; border-right: 1.5px solid var(--c-line-2);
  }
  .navitem {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    width: 100%; min-height: 46px; padding: 0 var(--sp-3);
    border-radius: var(--r-md);
    font-size: var(--fs-13); letter-spacing: .02em;
  }
  .navitem:hover { background: var(--c-bg-2); color: var(--c-ink); }
  .navitem.is-active { background: var(--c-ink-active); color: var(--c-on-ink); }
  .navitem.is-active::before { display: none; }

  /* Le bouton + devient un vrai bouton « Ajouter » en tête de barre */
  .navitem--fab { order: -1; margin-bottom: var(--sp-4); background: var(--c-ink-active); }
  .navitem--fab:hover { background: var(--c-ink); }
  .navitem--fab .fab { width: 30px; height: 30px; transform: none; box-shadow: none; }
  .navitem--fab .fab::after { inset: 3px; }
  .navitem--fab .fab svg { width: 16px; height: 16px; }
  .navitem--fab > span:last-child { margin-top: 0; font-size: 0; text-transform: none; letter-spacing: .02em; }
  .navitem--fab > span:last-child::after { content: "Ajouter une carte"; font-size: var(--fs-13); }

  /* ---- Grilles plus denses ---- */
  .grid, .catalog { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
  .stats { max-width: 560px; }
  .ccards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .completion { grid-template-columns: repeat(10, 1fr); }

  /* ---- Bottom-sheets -> fenêtres centrées ---- */
  .sheet-scrim { align-items: center; padding: var(--sp-6); }
  .sheet { max-width: 560px; border-radius: var(--r-lg); max-height: 88vh; overflow-y: auto; }
  .sheet__grab { display: none; }

  /* ---- Écran « Ajouter » -> fenêtre centrée ---- */
  .addscreen {
    max-width: 720px; margin: 3vh auto; height: 94vh;
    border-radius: var(--r-lg); border: 1px solid var(--c-line);
    box-shadow: 0 40px 90px rgba(40, 30, 15, .35);
    overflow: hidden;
  }

  /* ---- SANS LE SCAN sur PC (caméra = mobile) ---- */
  [data-action="add-mode-scan"],
  .app-header [data-action="scan"] { display: none !important; }

  /* ---- Choix du jeu (Sets) : 3 panneaux côte à côte ---- */
  .gamechooser { flex-direction: row; }

  /* ---- Boutons réorganisés (PC) ---- */
  /* Rangée de contrôles : onglets de jeux + Filtres sur une ligne, stats dessous */
  .ctrlbar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "tabs filters" "stats stats";
    align-items: center; gap: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
  }
  .ctrlbar .tabs  { grid-area: tabs; margin: 0; }
  .ctrlbar .stats { grid-area: stats; margin: 0; }
  .ctrlbar .filters-btn {
    grid-area: filters;
    width: auto; height: 40px; margin: 0; padding: 0 var(--sp-5);
  }
  .filters-btn:hover { background: var(--c-ink); }

  /* « Trier » devient un vrai bouton */
  .section-head .sort {
    height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-pill);
    border: 1px solid var(--c-line-2); background: var(--c-surface);
    color: var(--c-ink-2); font-weight: 700;
  }
  .section-head .sort:hover { background: var(--c-bg-2); color: var(--c-ink); }

  /* Boutons des fiches / feuilles : largeur auto, alignés à droite */
  .sheet__actions { justify-content: flex-end; }
  .sheet__actions .btn { flex: 0 0 auto; min-width: 150px; }

  /* Bouton d'ajout du formulaire : aligné à droite */
  .add-submit { width: auto; min-width: 260px; margin-left: auto; display: block; }

  /* Boutons du profil : côte à côte */
  .profile .btn { width: auto; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; }

  /* ---- SETS : accueil, 3 panneaux côte à côte ---- */
  .gamebtn { min-height: 60vh; }

  /* ---- SETS : liste des extensions sur 2 colonnes ---- */
  .setlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-5); align-items: start; }
  .setlist .setrow { margin: 0; }
  .setlist > .label { grid-column: 1 / -1; }

  /* ---- SETS : détail d'une extension ---- */
  .setdetail__head, .setdetail__stat { max-width: 1100px; }
  .completion { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

  /* ---- VALEUR : graphique à gauche, répartition à droite ---- */
  .value-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 0 44px; align-items: start; }
  .value-main, .value-side { display: block; min-width: 0; }
  .vchart { width: 100%; height: auto; }

  /* ---- PROFIL ---- */
  .profile { max-width: 640px; margin: 0 auto; }
  .profile .profile__card { max-width: none; }

  /* ---- COMMUNAUTÉ / ÉCHANGES / COMPARAISON ---- */
  .community, .trades { max-width: 940px; margin-left: auto; margin-right: auto; }
  .compare { max-width: 1020px; margin-left: auto; margin-right: auto; }

  /* ---- FICHE DE CARTE : carte entière à gauche, infos à droite ---- */
  .sheet:has(.detail__card) {
    max-width: 940px;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 0 var(--sp-6);
    align-content: start;
  }
  .sheet:has(.detail__card) > * { grid-column: 2; min-width: 0; }
  .sheet:has(.detail__card) > .detail__card {
    grid-column: 1; grid-row: 1 / span 30;
    margin: 0; align-self: start;
  }
  .sheet .detail__art { aspect-ratio: 63 / 88; }        /* la carte ENTIÈRE, non recadrée */
  .sheet .detail__art .card__img { object-position: center; }
  .sheet:has(.detail__card) h2 { font-size: var(--fs-24, 24px); margin-top: 4px; }

  /* ---- Aperçu d'une carte de set : plus grand ---- */
  .preview-card { max-width: 300px; width: 72%; }

  /* ---- AJOUT DE CARTE : aperçu entier à gauche, formulaire à droite ---- */
  .addscreen:has(.add-form) { max-width: 1040px; }
  .addscreen__body:has(.add-form) {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 0 var(--sp-6);
    align-content: start;
  }
  .addscreen__body:has(.add-form) > * { grid-column: 2; min-width: 0; }
  .addscreen__body:has(.add-form) > .add-preview-wrap {
    grid-column: 1; grid-row: 1 / span 20;
    align-self: start; position: sticky; top: 0;
    margin-bottom: 0;
  }
  .add-preview { width: 100%; max-width: 320px; }
  .add-preview .card__art { aspect-ratio: 63 / 88; }   /* carte entière, non recadrée */
  .add-preview .card__art .card__img { object-position: center; }

  /* ---- Confort de lecture / survols ---- */
  .chip:hover { border-color: var(--c-ink-3); }
  .userrow:hover, .sort-opt:hover, .setrow:hover { background: var(--c-bg-2); }
}