/* css/nav.css — header sticky + barre latérale + rangées façon CrazyGames (ex lab/lab.css, porté en prod le 2026-09-20 après validation Vincent). Chargé APRÈS style.css sur toutes les pages. */
/* lab/lab.css — refonte navigation façon CrazyGames, chargé APRÈS style.css sur /lab/* uniquement.
   Charte : sombre LemonArcade (#121300 / #1e1f00 / #252601) + accent jaune #D7F205 à la place du violet CrazyGames. */

:root {
  --lab-bg: #121300;
  --lab-surface: #1e1f00;
  --lab-surface-2: #252601;
  --lab-border: #2e3000;
  --lab-text: #F1F1F1;
  --lab-muted: #a3a63a;
  --lab-accent: #D7F205;
  --lab-topbar-h: 56px;
  --lab-nav-w: 52px;
  --lab-nav-w-open: 224px;
}

/* ── Fond sombre + neutralisation de l'ancien header / drawer ─────────────── */
html, body { background: var(--lab-bg) !important; color: var(--lab-text); }
body { padding-top: var(--lab-topbar-h); padding-left: var(--lab-nav-w); transition: padding-left .18s ease; }
body.lab-nav-hidden { padding-left: 0; }
.site-header, .cat-drawer, .drawer-overlay { display: none !important; }

/* Textes qui supposaient le fond jaune */
.home-section-label, .section-title, .breadcrumb, .breadcrumb a, .breadcrumb .current,
.cat-intro-title, .cat-intro-desc, .filter-bar, .game-full-title, .ag-section h2 { color: var(--lab-text); }
.breadcrumb a:hover { color: var(--lab-accent); }

/* ── Barre du haut ────────────────────────────────────────────────────────── */
.lab-topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--lab-topbar-h); z-index: 400;
  display: flex; align-items: center; gap: 10px; padding: 0 14px 0 10px;
  background: var(--lab-surface-2); border-bottom: 1px solid var(--lab-border);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.lab-iconbtn {
  width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 12px; color: var(--lab-text); cursor: pointer;
  transition: background .15s ease, color .15s ease; text-decoration: none; position: relative;
}
.lab-iconbtn:hover, .lab-iconbtn.active { background: rgba(215,242,5,.12); color: var(--lab-accent); }
.lab-iconbtn svg { width: 22px; height: 22px; }

.lab-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--lab-text); margin-right: 6px; }
.lab-logo img { width: 34px; height: 34px; border-radius: 9px; display: block; }
.lab-logo b { font-size: 17px; font-weight: 800; letter-spacing: .2px; }
.lab-logo b span { color: var(--lab-accent); }

.lab-search { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.lab-search form { position: relative; width: 100%; max-width: 560px; }
.lab-search input {
  width: 100%; height: 40px; padding: 0 44px 0 16px; border-radius: 20px;
  background: rgba(255,255,255,.08); border: 1px solid transparent; color: var(--lab-text); font-size: 14px; outline: none;
  transition: background .15s ease, border-color .15s ease;
}
.lab-search input::placeholder { color: rgba(241,241,241,.55); }
.lab-search input:focus { background: rgba(255,255,255,.12); border-color: rgba(215,242,5,.45); }
.lab-search button { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: var(--lab-muted); cursor: pointer; }
.lab-search button:hover { color: var(--lab-accent); }

.lab-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.lab-badge { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--lab-accent); color: #1e1f00; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }
.lab-auth { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px; border-radius: 19px; border: 1px solid var(--lab-border); background: var(--lab-surface); color: var(--lab-text); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.lab-auth:hover { background: rgba(215,242,5,.12); }
.lab-auth svg { width: 16px; height: 16px; flex: 0 0 16px; }
.lab-auth img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }

/* Panneau favoris */
.lab-favpanel {
  position: fixed; top: calc(var(--lab-topbar-h) + 6px); right: 12px; width: 320px; max-height: 70vh; overflow: auto; z-index: 401;
  background: var(--lab-surface); border: 1px solid var(--lab-border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5); padding: 10px;
}
.lab-favpanel[hidden] { display: none; }
.lab-favpanel h4 { margin: 4px 6px 10px; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--lab-muted); }
.lab-favpanel a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; color: var(--lab-text); text-decoration: none; font-size: 14px; font-weight: 600; }
.lab-favpanel a:hover { background: rgba(215,242,5,.10); color: var(--lab-accent); }
.lab-favpanel img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #000; }
.lab-favpanel .empty { padding: 14px 6px 8px; color: var(--lab-muted); font-size: 13px; line-height: 1.5; }

/* ── Barre latérale catégories ────────────────────────────────────────────── */
.lab-sidenav {
  position: fixed; top: var(--lab-topbar-h); left: 0; bottom: 0; width: var(--lab-nav-w); z-index: 390;
  background: var(--lab-surface-2); border-right: 1px solid var(--lab-border);
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
  transition: width .18s ease, transform .18s ease; padding: 8px 0 24px;
}
.lab-sidenav::-webkit-scrollbar { display: none; }
.lab-sidenav:hover { width: var(--lab-nav-w-open); box-shadow: 8px 0 30px rgba(0,0,0,.45); }
body.lab-nav-hidden .lab-sidenav { transform: translateX(-100%); }

.lab-nav-item {
  display: flex; align-items: center; gap: 10px; height: 36px; margin: 2px 6px; padding: 0 5px; border-radius: 10px;
  color: var(--lab-text); text-decoration: none; white-space: nowrap; font-size: 13px; font-weight: 600;
  transition: background .12s ease, color .12s ease;
}
.lab-nav-item:hover { background: rgba(215,242,5,.10); color: var(--lab-accent); }
.lab-nav-item.active { color: var(--lab-accent); }
.lab-nav-item.active .lab-nav-ico { background: rgba(215,242,5,.18); }
.lab-nav-ico {
  width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(255,255,255,.06); font-size: 15px; line-height: 1;
}
.lab-nav-label { opacity: 0; transform: translateX(-6px); transition: opacity .15s ease, transform .15s ease; }
.lab-sidenav:hover .lab-nav-label { opacity: 1; transform: none; }
.lab-nav-sep { height: 3px; margin: 10px 12px; border-radius: 2px; background: rgba(255,255,255,0.16); }

/* ── Mobile : la barre latérale devient un tiroir ─────────────────────────── */
@media (max-width: 768px) {
  body, body.lab-nav-hidden { padding-left: 0; }
  .lab-sidenav { width: var(--lab-nav-w-open); transform: translateX(-100%); }
  .lab-sidenav .lab-nav-label { opacity: 1; transform: none; }
  body.lab-nav-open .lab-sidenav { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,.5); }
  /* .lab-logo b : nom affiché aussi sur mobile (Vincent 2026-09-20) */
  .lab-auth span { display: none; }
  .lab-auth { padding: 0 10px; }
}

/* ── Rangées home façon CrazyGames (lab/home-rows.js + lab.js) ───────────── */
.lab-rows { padding: 4px 10px 0; }
.lab-row { position: relative; margin: 0 0 18px; border-radius: 16px; padding: 10px 8px 12px; }
.lab-row-tag { background: var(--lab-row-grad, var(--lab-surface)); border: 1px solid var(--lab-border); }
.lab-row-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 6px 10px; }
.lab-row-ico { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; }
.lab-row-title { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 800; color: var(--lab-text); text-decoration: none; }
.lab-row-title:hover { color: var(--lab-accent); }
.lab-row-title svg { width: 18px; height: 18px; }
.lab-row-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(215,242,5,.12); color: var(--lab-accent); font-size: 12px; font-weight: 700; }
.lab-row-phrase { flex-basis: 100%; margin: -4px 0 0; padding-left: 52px; color: var(--lab-muted); font-size: 14px; }
.lab-row-tag .lab-row-phrase { color: rgba(241,241,241,.75); }
.lab-strip { display: grid; grid-template-rows: 1fr; grid-auto-flow: column; grid-auto-columns: 150px; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0 4px 4px; }
.lab-strip::-webkit-scrollbar { display: none; }
.lab-strip .game-card { scroll-snap-align: start; aspect-ratio: 1 / 1; border-radius: 12px; }
.lab-strip .game-card .game-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.lab-row-nav { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--lab-border); background: var(--lab-surface-2); color: var(--lab-text); cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 2; }
@media (hover: hover) { .lab-row:hover .lab-row-nav { display: inline-flex; } } /* tactile : jamais (sinon le 1er tap ne fait qu'afficher les flèches, Vincent 22/09) */
.lab-row-nav:hover { color: var(--lab-accent); }
.lab-row-nav.prev { left: -6px; } .lab-row-nav.next { right: -6px; }
@media (max-width: 768px) { .lab-strip { grid-auto-columns: 118px; } .lab-row-title { font-size: 18px; } .lab-row-phrase { padding-left: 0; } }

/* Cœur dans la barre sous l'iframe (favoris locaux, sans compte) */
.iframe-btn.lab-fav-toggle.active { color: #f43f5e; }
.iframe-btn.lab-fav-toggle.active svg { fill: #f43f5e; stroke: #f43f5e; }

/* ── Panneaux de la home (Recently played, Best picks, All games) : même esprit que les bandeaux
   tag — surface sombre avec un dégradé lime discret à gauche, titre clair, accent lime. ── */
#recsSection, #recentSection, .all-games-panel {
  background: linear-gradient(90deg, #D7F205 0%, #7c8c03 22%, #1e1f00 58%) !important;
  border: 1px solid rgba(215,242,5,.28) !important;
  box-shadow: inset 0 1px 0 rgba(215,242,5,.18) !important;
  border-radius: 16px !important;
}
#recsSection .home-section-label, #recentSection .home-section-label, .all-games-panel .home-section-label {
  color: var(--lab-text) !important; text-shadow: none; text-transform: none; letter-spacing: 0; font-size: 22px;
}
#recsSection .home-section-label::before, #recentSection .home-section-label::before, .all-games-panel .home-section-label::before { background: #10120a !important; box-shadow: none; }
#recsSection .recs-arrow { background: var(--lab-surface-2); color: var(--lab-text); border: 1px solid var(--lab-border); }
#recsSection .recs-arrow:hover { color: var(--lab-accent); }

/* Recently played / Best picks : même habillage que la rangée « Sélection LemonArcade » (Vincent 20/09) */
#recentSection, #recsSection {
  background: linear-gradient(90deg, #3f4a00, #1e1f00 60%) !important;
  border: 1px solid var(--lab-border) !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  margin: 0 10px 18px !important; padding: 10px 8px 12px !important;
}
#recentSection .home-section-label, #recsSection .home-section-label {
  color: var(--lab-text) !important; font-size: 22px; font-weight: 800; text-transform: none; letter-spacing: 0;
  padding: 2px 6px 10px 6px !important; display: flex; align-items: center; gap: 12px;
}
#recentSection .home-section-label::before, #recsSection .home-section-label::before {
  position: static !important; width: 40px; height: 40px; border-radius: 0; background: none !important; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1;
}
#recentSection .home-section-label::before { content: "🕘"; }
#recsSection .home-section-label::before { content: "✨"; }

/* Essai Vincent 20/09 : panneaux SANS dégradé, surface sombre unie */
#recentSection, #recsSection, .all-games-panel { background: var(--lab-surface) !important; border: 1px solid var(--lab-border) !important; }
.all-games-panel .home-section-label { color: var(--lab-text) !important; }
.all-games-panel .home-section-label::before { background: var(--lab-accent) !important; }

/* ── Recherche instantanée (façon CrazyGames) ─────────────────────────────── */
.lab-search form { position: relative; }
.lab-suggest {
  position: absolute; top: 46px; left: 0; right: 0; z-index: 402; max-height: min(70vh, 640px); overflow: auto;
  background: var(--lab-surface); border: 1px solid var(--lab-border); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.55); padding: 8px;
}
.lab-suggest[hidden] { display: none; }
.lab-suggest .sg-tag, .lab-suggest .sg-game, .lab-suggest .sg-all {
  display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; color: var(--lab-text); text-decoration: none; font-size: 15px; font-weight: 700; cursor: pointer;
}
.lab-suggest .sg-tag:hover, .lab-suggest .sg-game:hover, .lab-suggest .sg-all:hover, .lab-suggest .active { background: rgba(215,242,5,.10); color: var(--lab-accent); }
.lab-suggest .sg-tag .ico { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.lab-suggest .sg-tag .cnt { color: var(--lab-accent); font-weight: 800; margin-left: 4px; }
.lab-suggest .sg-game img { width: 68px; height: 44px; border-radius: 8px; object-fit: cover; background: #000; flex: 0 0 68px; }
.lab-suggest .sg-game .ph { width: 68px; height: 44px; border-radius: 8px; background: #2e3000; flex: 0 0 68px; }
.lab-suggest .sg-game mark { background: none; color: var(--lab-accent); }
.lab-suggest .sg-sim { font-size: 12px; font-weight: 600; color: var(--lab-muted); padding: 8px 8px 2px; text-transform: uppercase; letter-spacing: .4px; }
.lab-suggest .sg-all { padding: 10px 8px 6px; font-size: 14px; }
@media (max-width: 768px) { .lab-suggest { position: fixed; top: var(--lab-topbar-h); left: 8px; right: 8px; } }

/* ── Game Series (2026-09-20) : chips séries façon Kizi, ordre = parties du pays du visiteur ── */
.lab-row-series .lab-strip { grid-auto-columns: 210px; gap: 10px; }
.lab-series-chip { scroll-snap-align: start; display: flex; align-items: center; gap: 10px; height: 68px; padding: 0 0 0 10px; border-radius: 14px; background: var(--lab-surface-2); border: 1px solid var(--lab-border); color: #F1F1F1; text-decoration: none; overflow: hidden; position: relative; transition: border-color .15s, transform .15s; }
@media (hover: hover) { .lab-series-chip:hover { border-color: var(--lab-accent); transform: translateY(-2px); } }
.lab-series-chip img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 2px solid var(--lab-accent); background: #000; }
.lab-series-chip .lab-series-name { flex: 1; font-weight: 800; font-size: 14px; line-height: 1.15; }
.lab-series-chip .lab-series-arrow { width: 40px; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--lab-accent); color: #1a1a00; flex-shrink: 0; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.lab-series-chip .lab-series-arrow svg { width: 20px; height: 20px; margin-left: 6px; }
@media (max-width: 600px) { .lab-row-series .lab-strip { grid-auto-columns: 180px; } .lab-series-chip { height: 60px; } .lab-series-chip img { width: 42px; height: 42px; } }

/* ── Notifications (cloche du header) ── */
.lab-notifpanel { width: 340px; max-height: 70vh; overflow-y: auto; }
.lab-notif { padding: 10px 8px; border-radius: 10px; border-bottom: 1px solid var(--lab-border); }
.lab-notif:last-child { border-bottom: 0; }
.lab-notif.fresh { background: rgba(215,242,5,.07); border-left: 3px solid var(--lab-accent); }
.lab-notif-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.lab-notif-head strong { font-size: 14px; color: var(--lab-text); }
.lab-notif-head time { font-size: 11px; color: var(--lab-muted); white-space: nowrap; }
.lab-notif p { margin: 4px 0 6px; font-size: 13px; line-height: 1.45; color: rgba(241,241,241,.8); }
.lab-notif a { display: inline-flex; padding: 2px 0; font-size: 13px; color: var(--lab-accent); }
.lab-notif a:hover { background: none; text-decoration: underline; }

/* Grille compacte « Popular now » + bouton All games */
/* Panneau « Most played games » : libellé + bouton sur une ligne flex (le float faisait rétrécir la grille sur mobile, 2026-09-20) */
.all-games-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.all-games-panel .home-section-label { flex: 1 1 auto; margin-right: auto; }
.all-games-panel > .home-grid, .all-games-panel > main { flex: 1 1 100%; width: 100%; min-width: 0; }
.lab-allgames-btn { float: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 14px; margin: 0 8px 0 0; border-radius: 999px; background: var(--lab-accent); color: #1a1a00; font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap; }
.lab-allgames-btn:hover { filter: brightness(1.08); }
.lab-allgames-btn svg { width: 16px; height: 16px; }

/* Portage prod : l ancien header fixe est masqué (.site-header), le padding mobile prévu pour lui ne sert plus */
@media (max-width: 600px) { body.page-home, body.page-category { padding-top: var(--lab-topbar-h) !important; } }
/* petit logo flottant de l ancien header (pages catégorie/top) masqué, le nouveau header a le sien */
.hdr-logo-left { display: none !important; }

/* Portage prod : titres et intros conçus pour le fond jaune (texte sombre) → clair sur le fond sombre */
.article-back { color: var(--lab-muted) !important; }
.article-back:hover { color: var(--lab-accent) !important; }
.article-header h1, .article-header h2, .article-title, .page-title { color: #F1F1F1 !important; }
.article-lead, .article-date, .article-meta, .article-header p { color: rgba(241,241,241,.75) !important; }
h1[style*="rgba(0,0,0"], h2[style*="rgba(0,0,0"], p[style*="rgba(0,0,0"] { color: #F1F1F1 !important; }
.back-link { color: var(--lab-muted) !important; }
.back-link:hover { color: var(--lab-accent) !important; }
h1:not(.cat-intro-title):not(.lab-row-title) { color: #F1F1F1 !important; }
.subtitle, .page-subtitle { color: rgba(241,241,241,.7) !important; }
.blog-filter:not(.active) { color: #F1F1F1 !important; background: rgba(255,255,255,.08) !important; }
.blog-filter:not(.active) .count { color: rgba(241,241,241,.6) !important; }

/* ── Barre du bas mobile (façon CrazyGames) : Accueil · Recherche · Favoris · Connexion — 2026-09-20 ── */
.lab-bottombar { display: none; }
@media (max-width: 768px) {
  .lab-topbar .lab-search, .lab-topbar #labFavBtn, .lab-topbar #labNotifBtn { display: none; }
  .lab-topbar .lab-right { margin-left: auto; }
  .lab-topbar .lab-logo b { display: inline; }
  body.lab-search-open .lab-topbar .lab-search { display: flex; position: fixed; top: var(--lab-topbar-h); left: 0; right: 0; padding: 8px 10px; background: var(--lab-surface); border-bottom: 1px solid var(--lab-border); z-index: 399; }
  body.lab-search-open .lab-topbar .lab-search form { width: 100%; }
  body.lab-search-open .lab-suggest { top: calc(var(--lab-topbar-h) + 60px); }
  body { padding-bottom: calc(62px + var(--lab-anchor-h, 0px) + env(safe-area-inset-bottom, 0px)); }
  .lab-bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: var(--lab-anchor-h, 0px); transform: translateY(calc(-1 * var(--lab-vv-off, 0px))); will-change: transform; --lab-bb-h: calc(62px + env(safe-area-inset-bottom, 0px)); height: var(--lab-bb-h); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 400; background: var(--lab-surface); border-top: 1px solid var(--lab-border); box-shadow: 0 -6px 20px rgba(0,0,0,.35); }
  /* Filet de sécurité : Chrome iOS ne met pas `dvh` à jour quand il replie sa barre du bas, ce qui
     laisse un vide sous la barre. Le fond de la barre est prolongé vers le bas : le vide éventuel
     prend la couleur de la barre au lieu de laisser voir le contenu de la page. */
  .lab-bottombar::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 220px; background: var(--lab-surface); pointer-events: none; }
  .lab-bb-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; background: none; border: 0; padding: 0; color: var(--lab-muted); font: inherit; font-size: 11px; font-weight: 700; text-decoration: none; position: relative; cursor: pointer; }
  .lab-bb-item span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lab-bb-item svg, .lab-bb-item img { width: 24px; height: 24px; border-radius: 50%; }
  .lab-bb-item.active { color: var(--lab-accent); }
  .lab-bb-item .lab-badge { top: 6px; right: auto; left: calc(50% + 4px); }
  /* Barre du navigateur qui se replie au scroll : `dvh` suit le viewport dynamique, le navigateur
     fait le calcul lui-même. Le repli JS (--lab-vv-off) ne sert plus que si dvh manque. */
  @supports (height: 100dvh) {
    .lab-bottombar { bottom: auto; top: calc(100dvh - var(--lab-bb-h) - var(--lab-anchor-h, 0px)); }
  }
  .lab-favpanel { position: fixed !important; top: auto !important; bottom: calc(66px + var(--lab-anchor-h, 0px) + var(--lab-vv-off, 0px)) !important; left: 8px !important; right: 8px !important; width: auto !important; max-height: 60vh; overflow-y: auto; }
}

/* Bande « more games » des pages jeu : mêmes coins arrondis que les vignettes de la home (Vincent 2026-09-20) */
.more-games-scroll .game-card { border-radius: 12px; overflow: hidden; }
.more-games-scroll .game-card .game-thumb, .more-games-scroll .game-card .game-thumb img, .more-games-scroll .game-card .game-thumb-bg, .more-games-scroll .game-card .game-thumb-img, .more-games-scroll .game-card video { border-radius: 12px; }

/* Badges TOP / HOT / NEW « qui sortent légèrement de l'image » (Vincent 2026-09-20, façon Playgama) :
   plus petits, ancrés sur le coin ; les bandes défilantes reçoivent une marge intérieure pour que le
   débordement ne soit pas rogné par leur overflow. */
.card-dyn-badge { top: -7px; left: -8px; width: 38%; max-width: 66px; min-width: 42px; }
.card-large .card-dyn-badge, .card-medium .card-dyn-badge { width: 24%; max-width: 84px; }
.lab-strip { padding: 10px 4px 6px 12px; margin: -10px 0 -6px -8px; } /* contenu à 4px comme avant, 12px de marge pour le badge */
.recent-strip { padding: 10px 12px 8px 12px; margin-top: -10px; }
.recs-scroll { padding: 10px 0 2px 10px; margin: -10px 0 0 -10px; }
.more-games-scroll { padding: 10px 0 0 10px; margin: -10px 0 0 -10px; }
.more-games-scroll .game-card { overflow: visible; }
.more-games-scroll .game-card .game-thumb { overflow: hidden; }
/* scroll-snap : sans scroll-padding, la première carte s'aligne sur le bord et masque la marge réservée au badge */
.lab-strip { scroll-padding-left: 12px; }
.recs-scroll { scroll-padding-left: 10px; }
.recent-strip { scroll-padding-left: 12px; }

/* ── Visuel de lancement du jeu (iframe différée) ── */
.game-embed-wrap { position: relative; }
.game-cover { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: #000 center / cover no-repeat; cursor: pointer; transition: opacity .35s ease; }
.game-cover::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.game-cover.is-hiding { opacity: 0; pointer-events: none; }
.game-play-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 30px 0 22px; border: 0; border-radius: 999px; background: var(--lab-accent); color: #1a1a00; font: inherit; font-size: 20px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 6px rgba(215,242,5,.18); transition: transform .15s; }
.game-play-btn:hover { transform: scale(1.04); }
.game-play-btn svg { width: 30px; height: 30px; }
@media (hover: hover) { .game-cover { cursor: default; } }

/* ── Page jeu, bureau : une rangée de jeux sous l'iframe + le reste dans le rail droit ────────────
   Aucune page n'est modifiée. L'ordre de la colonne est géré en flex (la pub passe SOUS la rangée,
   sans déplacer la balise <ins>, qu'on ne touche jamais après son initialisation), et js/nav.js
   déplace les vignettes excédentaires dans le rail. Retour arrière = supprimer ce bloc et la
   fonction moreGamesRail(). */
@media (min-width: 1100px) {
  .game-layout > div:first-of-type { display: flex; flex-direction: column; }
  .game-layout > div:first-of-type > .breadcrumb { order: 1; }
  .game-layout > div:first-of-type > .game-embed-wrap { order: 2; }
  .game-layout > div:first-of-type > div:has(> .more-games-scroll) { order: 3; margin-top: 12px !important; }
  .game-layout > div:first-of-type > div[style*="margin-top:14px"] { order: 4; }
  .game-layout > div:first-of-type > *:not(.breadcrumb):not(.game-embed-wrap):not(:has(> .more-games-scroll)):not([style*="margin-top:14px"]) { order: 5; }

  /* rail : la grille de jeux se glisse juste sous la première pub */
  .more-games-rail .mg-rail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .more-games-rail .game-card { width: auto !important; min-width: 0 !important; flex: none !important; aspect-ratio: 1 / 1; position: relative; border-radius: 12px; transition: transform .18s ease; }
  .more-games-rail .game-card:hover { transform: translateY(-3px); }
  .more-games-rail .game-card .game-thumb { height: 100% !important; border-radius: 12px; overflow: hidden; }
  .more-games-rail .game-card .game-thumb img,
  .more-games-rail .game-card video { border-radius: 12px; }
  .more-games-rail .sidebar-section-title { margin-bottom: 10px; }
}

/* Repères visuels : la bande de jeux porte un titre encadré comme le rail, la publicité porte
   son étiquette. Sans ça le bloc AdSense, souvent une grille d'icônes de jeux, se confondait
   avec nos vignettes (retour de Vincent, 21/09). */
.more-games-block { padding: 14px !important; }
.more-games-block .mg-strip-title { margin-bottom: 10px; }
.la-ad-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(241,241,241,.38); margin: 0 0 4px 2px; }

/* Badge CLASSIC : pastille allongée (432×151 contre 320×151 pour TOP), il lui faut plus de largeur
   pour garder la même hauteur perçue que les autres badges. */
.card-dyn-badge.badge-classic { width: 50%; max-width: 89px; }

/* ── Rappel du cœur après 60 s de jeu (nav.js) : quelques rebonds, puis repos. 2026-09-22 ── */
@keyframes labFavBounce {
  0%, 40%, 100% { transform: translateY(0) scale(1); }
  8%  { transform: translateY(-7px) scale(1.15); }
  16% { transform: translateY(0) scale(1); }
  24% { transform: translateY(-4px) scale(1.08); }
  32% { transform: translateY(0) scale(1); }
}
.lab-fav-nudge { animation: labFavBounce 2.4s ease-in-out 4; }
.iframe-btn.lab-fav-nudge { color: #f43f5e; border-color: rgba(244,63,94,.6); }
.lab-bb-item.lab-fav-nudge { color: #f43f5e; }
@media (prefers-reduced-motion: reduce) { .lab-fav-nudge { animation: none; } }

/* ── Bandeau d'installation PWA (nav.js) ── */
.lab-install { position: fixed; z-index: 450; left: 12px; right: 12px; bottom: calc(70px + var(--lab-anchor-h, 0px) + var(--lab-vv-off, 0px) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--lab-surface); border: 1px solid var(--lab-border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); color: var(--lab-text); transform: translateY(20px); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.lab-install.is-in { transform: none; opacity: 1; }
.lab-install img { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; }
.lab-install > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lab-install strong { font-size: 14px; }
.lab-install span { font-size: 12px; color: var(--lab-muted); line-height: 1.3; }
.lab-install-go { flex: 0 0 auto; background: var(--lab-accent); color: #121300; border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.lab-install-x { flex: 0 0 auto; background: none; border: 0; color: var(--lab-muted); font-size: 16px; cursor: pointer; padding: 4px 6px; }
@media (min-width: 769px) { .lab-install { left: auto; right: 20px; bottom: 20px; max-width: 420px; } }

/* ── Rangées « ouvertes » à droite (Vincent 22/09) : le cadre et la bande filent jusqu'au bord de
   l'écran, la dernière carte visible est coupée par le bord lui-même — on comprend qu'il y en a
   d'autres et qu'il faut faire défiler. Avant, le cadre se refermait (bordure + coin arrondi) 18 px
   avant le bord et la rangée avait l'air complète. ── */
.lab-row { margin-right: -10px; padding-right: 0; }
.lab-row-tag { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lab-row-head { padding-right: 14px; }
.lab-strip { padding-right: 18px; } /* la dernière carte peut tout de même arriver entière à l'écran */
.lab-row-nav.next { right: 10px; }

/* Recently played / Best picks : ouverts à droite comme les rangées (Vincent 22/09) */
#recentSection, #recsSection { margin-right: 0 !important; padding-right: 0 !important; border-right: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
#recentSection .home-section-label, #recsSection .home-section-label { padding-right: 14px !important; }
.recent-strip { padding-right: 18px; }
.recs-carousel { padding-right: 0; }
.recs-scroll { padding-right: 18px; }
.recs-arrow-right { right: 10px; }
/* Tactile : pas de flèches sur Best picks non plus (elles recouvraient la carte coupée à droite et pouvaient intercepter le tap) */
@media (hover: none) { .recs-arrow { display: none !important; } }