/* desktop.css — Caribbein · app famille : le desktop qui accueille.
   UX-UPLIFT-PLAN.md §3 stream U4 (rapport UI/UX, dimension 7 — mobile & plateformes, 7 → 7,5).

   Un habillage, pas une réécriture : l'intérieur du shell (430px, --shell-w) ne bouge pas d'un
   pixel — mêmes classes, même géométrie interne, même comportement. Ce fichier pose le shell
   comme un objet posé, sur le ciel --sky-* qui couvre déjà tout l'écran (body, base.css) —
   rien à ajouter pour « le ciel plein écran », il y est déjà dès que le shell devient plus étroit
   que le viewport.

   TOUT le fichier vit sous UNE seule garde : un téléphone télécharge ces quelques octets mais
   n'applique jamais une seule de ces règles — aucun sélecteur n'existe hors de ce bloc.
   pointer:fine exclut aussi les tablettes tactiles larges, qui restent sur l'expérience mobile.

   .desktop-rail (« Caribbein se vit sur le téléphone » + le QR) est un noeud injecté par le petit
   hook JS posé dans index.html juste à côté du <link> de ce fichier — ce stream ne possède aucun
   fichier .js, donc le hook est resté minimal et inline (voir le commentaire dans index.html).
   Il ne crée CE noeud que si matchMedia confirme déjà ≥900px/pointer:fine : sous la barre, aucun
   noeud n'existe, donc même sans garde CSS ici il n'y a rien à afficher — le mobile ne change pas
   d'un pixel. Le hook réutilise F.qrSvg (print.js/S8) — jamais une seconde implémentation de QR.

   Couleurs : uniquement des var() déjà nées dans tokens.css (--line-2, --shadow-card, --ink,
   --ink-muted…) et la classe .card déjà partagée (base.css) pour le cadre du QR — aucun ton
   nouveau, donc aucune raison de repasser test-contrast.js (S2 n'assertionne que des paires déjà
   vetted, et --ink-muted sur le ciel est le même pariage que .sub utilise déjà). */

@media (min-width: 900px) and (pointer: fine) {

  /* ── la scène : le ciel (déjà plein écran) porte deux objets centrés, le cadre et la colonne ── */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    padding: 40px 24px;
  }

  /* ── le shell devient un objet posé : cadré, coins --r-xl, largeur mobile inchangée.
     .nav passe de fixed (plein viewport) à sticky (dans le cadre) : le shell devient donc son
     propre conteneur de scroll pour que .nav reste visuellement DANS le cadre arrondi plutôt que
     de flotter par-dessus. Sur desktop env(safe-area-inset-*) vaut 0, donc le calage de .nav-in
     (base.css) ne casse rien — juste un padding de 20px ordinaire, pas une encoche à éviter. ── */
  .shell {
    flex: none;
    width: var(--shell-w);
    margin: 0;
    min-height: 0;
    height: min(900px, calc(100vh - 80px));
    max-height: min(900px, calc(100vh - 80px));
    border-radius: var(--r-xl);
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow-card);
    overflow-x: hidden;
    overflow-y: auto;
  }
  /* main compensait une nav fixed hors-flux (base.css) ; en sticky, nav reste dans le flux. */
  main { padding-bottom: 0; }
  .nav { position: sticky; }

  /* ── la colonne discrète, à droite du cadre ── */
  .desktop-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 220px;
    flex: none;
    text-align: center;
  }
  .desktop-rail p {
    margin: 0;
    font: 600 13px/1.4 var(--font);
    color: var(--ink-muted);
  }
  /* .card (base.css) porte déjà le fond, la bordure, le rayon et l'ombre — seule la taille change. */
  .desktop-rail-qr {
    width: 156px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .desktop-rail-qr svg { width: 120px; height: 120px; }
}