/* desktop.css — SynthBench Web : finitions grand écran (PC).
   Purement ADDITIF : ne s'active qu'à partir de 900px de large, donc l'affichage
   mobile/Capacitor n'est jamais modifié. À charger APRÈS le <style> de l'app. */

@media (min-width: 900px) {
  /* Colonne de contenu plus confortable, toujours centrée. */
  main { max-width: 880px; padding: 1.6rem 1.4rem 3rem; }

  /* Aligne le contenu du header et la barre d'onglets sur la même colonne
     que <main> (bande accent pleine largeur, contenu aligné au centre). */
  header {
    padding-left:  max(1.1rem, calc((100vw - 880px) / 2));
    padding-right: max(1.1rem, calc((100vw - 880px) / 2));
  }
  .nav-wrap {
    padding-left:  max(0px, calc((100vw - 880px) / 2));
    padding-right: max(0px, calc((100vw - 880px) / 2));
  }

  /* Onglets : sur grand écran, ils tiennent sans défilement horizontal. */
  .nav-wrap::after { display: none; }              /* retire le dégradé de fin */
  nav { flex-wrap: wrap; overflow: visible; }

  /* États souris (l'app d'origine ne gère que :active tactile). */
  button, .launch-card, [onclick] { cursor: pointer; }
  .launch-card { transition: border-color .15s, box-shadow .15s; }
  .launch-card:hover { border-color: var(--accent); box-shadow: 0 4px 18px rgba(0,0,0,.06); }
  .btn:hover { filter: brightness(1.04); }

  /* Un peu plus d'air vertical entre blocs sur desktop. */
  .out, .card { line-height: 1.55; }
}

@media (min-width: 1280px) {
  main { max-width: 960px; }
  header {
    padding-left:  max(1.1rem, calc((100vw - 960px) / 2));
    padding-right: max(1.1rem, calc((100vw - 960px) / 2));
  }
  .nav-wrap {
    padding-left:  max(0px, calc((100vw - 960px) / 2));
    padding-right: max(0px, calc((100vw - 960px) / 2));
  }
}