/* ═══ Vignettes de jeux (23/10/2026) ═══════════════════════════════════════════
   Tuile .bouton-jeu.vg = grande icône peinte · titre · une ligne de présentation ·
   niveaux · progression de l'élève (remplie par /js/vignettes.js).
   Portée : tout conteneur de classe « vignettes » (Aventure de l'accueil, body des pages
   de zone). Le HTML des tuiles est écrit par admin/_dev_vignettes/generer.py ; les
   grands jeux ouverts par le skill inscrire-jeu arrivent déjà sous cette forme. */
.vignettes .button-container{ grid-auto-rows:auto !important; }
.vignettes a.bouton-jeu.vg{ height:auto !important; min-height:122px; display:flex; flex-direction:row; align-items:center;
  justify-content:flex-start; gap:12px; padding:12px 14px 12px 12px; text-align:left; }
.vignettes a.bouton-jeu.vg > .vg-ico{ flex:none; width:68px; height:68px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; background:rgba(0,0,0,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); font-size:2.2rem; line-height:1; }
.vignettes a.bouton-jeu.vg > .vg-ico:empty{ display:none; }
/* Tuiles « ludiques » : deux rivets décoratifs à 7 px des bords (style_boutons.css) */
.vignettes a.bouton-jeu.vg.fun{ padding-left:22px !important; padding-right:22px !important; }
/* le <picture> est bridé à 42 px sur l'accueil, l'img à 28 px (classe ico-24) ou 2em (zones) */
.vignettes a.bouton-jeu.vg > .vg-ico picture{ width:auto !important; height:auto !important; max-width:none !important; max-height:none !important; display:flex; }
.vignettes a.bouton-jeu.vg > .vg-ico img{ width:60px !important; height:60px !important; max-width:none !important; max-height:none !important; object-fit:contain; margin:0 !important; }
.vignettes .vg-corps{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.vignettes .vg-titre{ font-weight:900; font-size:1.02rem; line-height:1.2; }
.vignettes .vg-pitch{ font-weight:600; font-size:.8rem; line-height:1.3; opacity:.88; }
.vignettes .vg-pied{ display:flex; flex-wrap:wrap; gap:6px; margin-top:3px; }
.vignettes .vg-puce{ font-size:.7rem; font-weight:800; padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); white-space:nowrap; }
.vignettes .vg-puce[hidden]{ display:none; }
.vignettes .vg-puce.joue{ background:rgba(232,196,106,.22); border-color:rgba(232,196,106,.6); }
.vignettes .vg-puce.fini{ background:rgba(46,204,113,.22); border-color:rgba(46,204,113,.65); }

/* Pages de zone (gabarit css/zone.css) : colonnes d'au moins 300 px, une seule sur téléphone */
/* style_boutons.css borne la grille à 600 px (2 tuiles de 240) : une seule vignette y tenait */
.vignettes .grid-panel .button-container{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) !important; max-width:none; width:100%; box-sizing:border-box; }
.vignettes .grid-panel a.bouton-jeu.vg{ hyphens:manual; -webkit-hyphens:manual; overflow-wrap:normal; }

@media (max-width:560px){
  .vignettes .grid-panel .button-container{ grid-template-columns:1fr !important; }
  .vignettes .grid-panel a.bouton-jeu.vg{ flex-direction:row; }
}
@media (max-width:500px){
  .vignettes a.bouton-jeu.vg{ min-height:0; padding:9px 10px; gap:10px; }
  .vignettes a.bouton-jeu.vg > .vg-ico{ width:52px; height:52px; border-radius:12px; font-size:1.8rem; }
  .vignettes a.bouton-jeu.vg > .vg-ico img{ width:46px !important; height:46px !important; }
  .vignettes .vg-titre{ font-size:.95rem; }
  .vignettes .vg-pitch{ font-size:.76rem; }
  .vignettes .vg-puce{ font-size:.66rem; padding:1px 7px; }
  .vignettes .vg-pied{ gap:5px; margin-top:2px; }
}