/* ==========================================================================
   MEETennis — assets/shop-desktop.css
   Élargit UNIQUEMENT les pages boutique sur grand écran.
   Chargée par partials/shop_head.php, après shop.css.
   --------------------------------------------------------------------------
   POURQUOI CE FICHIER A ÉTÉ REPRIS

   L'ancienne version remontait la barre d'onglets en haut de l'écran à
   partir de 1000 px :

       body:has(.shop-bar) .tabbar { bottom:auto; top:18px;
                                     width:min(520px, calc(100% - 36px)); }

   Sauf que depuis 900 px, desktop.css en faisait déjà une barre latérale
   de pleine hauteur (left:0; top:0; bottom:0; height:100vh; colonne).
   Les deux jeux de règles se mélangeaient : la barre gardait sa hauteur
   d'écran et sa disposition verticale, mais recevait « top:18px » et une
   largeur de 520 px. Résultat sur toutes les pages boutique : un grand
   rectangle blanc posé par-dessus le contenu. C'était LA superposition
   du menu.

   CE FICHIER NE TOUCHE PLUS À LA NAVIGATION. Il ne fait qu'une chose :
   dire que la coquille est plus large sur les pages boutique. Le menu,
   le bandeau, le bouton « + » et les panneaux se réajustent tout seuls,
   puisqu'ils lisent tous --shell-w (voir assets/layout-shell.css).

   Le ciblage passe par html:has(.shop-bar) — la barre boutique n'existe
   que sur ces pages. Aucun fichier PHP à modifier, et le reste de l'app
   garde sa colonne de lecture, qui lui va très bien.

   Pourquoi --shell-w en pixels et non en % sur ordinateur : la variable
   sert à la fois dans un max-width (le % s'y compte sur le conteneur) et
   dans les calculs de position des éléments fixes (le % s'y compte sur
   l'écran). Une valeur en % donnerait deux résultats différents, donc un
   décalage. En pixels, les deux tombent au même endroit.
   ========================================================================== */


/* ---- Tablette : la coquille prend toute la largeur disponible ------------ */
@media (min-width:700px) and (max-width:1099px){
  html:has(.shop-bar){--shell-w:min(100%,1000px)}

  .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .shop-hero h1{font-size:30px}
  .shop-hero p{font-size:15px;max-width:600px}
}


/* ---- Ordinateur : catalogue à 3 colonnes -------------------------------- */
@media (min-width:1100px){
  html:has(.shop-bar){--shell-w:820px}

  .shop-bar{padding:6px 0 18px}
  .shop-hero{margin-bottom:26px}
  .shop-hero h1{font-size:34px}
  .shop-hero p{font-size:15.5px;max-width:620px}

  .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .p-body h3{font-size:14.5px}
  .p-exc{font-size:12.5px}

  /* ---- Fiche produit : couverture à gauche, texte à droite --------------
     La couverture est collante : sur une fiche longue, on garde l'objet
     sous les yeux pendant qu'on lit la description. 100 px de décalage,
     c'est la hauteur du bandeau collant de l'app. */
  .pd{
    display:grid;
    grid-template-columns:minmax(0,320px) minmax(0,1fr);
    grid-template-areas:
      "cover  head"
      "cover  desc"
      "cover  buy";
    align-content:start;
    column-gap:32px;
    padding:26px 28px;
  }
  .pd-cover{grid-area:cover;margin:0;position:sticky;top:110px}
  .pd > .p-cat,.pd-title{grid-area:head;align-self:end}
  .pd-title{margin-top:4px;font-size:27px}
  .pd-exc,.pd-desc,.pd-files{grid-area:desc}
  .pd-buy{grid-area:buy}

  /* Sans couverture, rien à mettre à gauche : on revient sur une colonne. */
  .pd:not(:has(.pd-cover)){display:block}

  /* ---- Panier ----------------------------------------------------------- */
  .card-panel{padding:26px 30px}
  .cart-line{padding:16px 0;gap:18px}
  .cart-line img{width:64px;height:64px}
  .cart-total{font-size:19px}
  .cart-total b{font-size:24px}

  /* ---- Confirmation de commande ----------------------------------------- */
  .thanks{max-width:620px;margin:0 auto;padding:48px 32px}
}


/* ---- Grand écran : 4 colonnes, et on n'ira pas plus loin -----------------
   Au-delà, une grille qui s'étire indéfiniment donne des lignes de texte
   illisibles et des vignettes démesurées. On laisse la marge. */
@media (min-width:1400px){
  html:has(.shop-bar){--shell-w:1040px}

  .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
  .pd{grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:38px;padding:30px 34px}
  .pd-title{font-size:30px}
}


/* ---- Repli pour les navigateurs sans :has() ------------------------------
   Safari < 15.4, Firefox < 121. Ils gardent la coquille standard de l'app :
   la boutique reste parfaitement utilisable, simplement plus étroite. Le
   menu, lui, est correct dans tous les cas — c'est ce qui compte. */
@supports not selector(:has(*)){
  /* rien à faire : l'affichage standard fait office de repli */
}