/* Vitrine · grille et points de rupture v1 — sur le modèle de univers.css
   Mobile d'abord : les valeurs de base sont celles du téléphone.
   Aucune classe : les composants posent data-layout et des variables de portée. */

:root{
  --bp-tablette:768px;       /* rappel, les media queries ne lisent pas les variables */
  --bp-ordinateur:1280px;
  --bp-grand:1920px;
  --max:1440px;              /* largeur maximale du contenu ; le fond de l'univers reste pleine largeur */
  --cols:2; --gutter:10px; --marge:14px; --rang:auto; --nav-h:64px;
}
@media (min-width:768px){  :root{--cols:8;  --gutter:12px; --marge:24px; --rang:220px; --nav-h:72px} }
@media (min-width:1280px){ :root{--cols:12; --gutter:16px; --marge:40px; --rang:272px; --nav-h:72px} }

/* Page : fond pleine largeur, contenu centré */
[data-layout="page"]{ max-width:var(--max); margin-inline:auto; padding-inline:var(--marge) }

/* Bento : chaque tuile déclare sa portée par variables
   --s (mobile, 1|2) · --s-t (tablette, sur 8) · --s-d (ordinateur, sur 12) · --r-d (rangs ordinateur) */
[data-layout="bento"]{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:var(--gutter) }
[data-layout="bento"] > *{ grid-column:span var(--s,2) }
@media (min-width:768px){  [data-layout="bento"]{grid-auto-rows:var(--rang)} [data-layout="bento"] > *{ grid-column:span var(--s-t,4); grid-row:span var(--r-t,1) } }
@media (min-width:1280px){ [data-layout="bento"] > *{ grid-column:span var(--s-d,4); grid-row:span var(--r-d,1) } }
/* Récit de tête : --s:2 · --s-t:8 · --s-d:8 · --r-d:2 */

/* Grille de chasse : régulière, jamais en bento */
[data-layout="grille"]{ display:grid; gap:14px var(--gutter); grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:768px){  [data-layout="grille"]{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1280px){ [data-layout="grille"]{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1600px){ [data-layout="grille"]{grid-template-columns:repeat(5,minmax(0,1fr))} }

/* Recherche : facettes en tiroir sur mobile, colonne fixe dès 1280 */
[data-layout="chasse"]{ display:block }
@media (min-width:1280px){ [data-layout="chasse"]{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:32px; align-items:start }
  [data-layout="chasse"] > [data-zone="facettes"]{ position:sticky; top:calc(var(--nav-h) + 24px) } }

/* Fiche produit : une colonne sur mobile ; médias à gauche, achat fixe à droite dès 768 ; histoire pleine largeur dessous */
[data-layout="fiche"]{ display:grid; gap:var(--gutter); grid-template-columns:minmax(0,1fr) }
@media (min-width:768px){  [data-layout="fiche"]{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start } }
@media (min-width:1280px){ [data-layout="fiche"]{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px } }
@media (min-width:768px){  [data-layout="fiche"] > [data-zone="achat"]{ position:sticky; top:calc(var(--nav-h) + 24px) }
  [data-layout="fiche"] > [data-zone="histoire"]{ grid-column:1 / -1 } }
/* Mobile : [data-zone="achat"] se replie en barre fixe en bas (bouton + prix) */

/* Récit ouvert : plein écran sur mobile ; objet en scène à gauche, chapitres à droite dès 1280 */
[data-layout="recit"]{ display:block }
@media (min-width:1280px){ [data-layout="recit"]{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  [data-layout="recit"] > [data-zone="scene"]{ position:sticky; top:0; height:100vh } }

/* Tiroirs : panier (bas sur mobile, droite dès 768) */
[data-layout="tiroir"]{ position:fixed; inset:auto 0 0 0; max-height:85vh; border-radius:32px 32px 0 0 }
@media (min-width:768px){ [data-layout="tiroir"]{ inset:0 0 0 auto; width:440px; max-height:none; border-radius:0 } }

/* Focus visible, dans les trois univers */
[data-univers] :focus-visible{ outline:2px solid var(--u-a1); outline-offset:3px; border-radius:inherit }