/* ========================================
   Page Single Jeux (SINGLE-JEUX.PHP) — CSS SCOPÉ
   ======================================== */

/* Conteneur article */
.jeu-video-container{
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: clamp(16px,2vw,32px);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* Sécurité si des styles globaux ciblent <article> */
article.jeu-video-container{
  max-width: var(--container-lg) !important;
  margin: 0 auto !important;
  padding: clamp(16px,2vw,32px) !important;
}

/* ===== HERO ===== */
.jeu-video-container .jeu-hero{
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "media info";
  gap: clamp(16px,2.2vw,28px);
  align-items: start;
}
.jeu-video-container .jeu-hero > *{ min-width:0; }

.jeu-video-container .jeu-hero__media{ grid-area: media; min-width:0; }
.jeu-video-container .jeu-hero__info{
  grid-area: info; min-width:0;
  /* neutralise d’éventuels resets globaux */
  float:none !important; clear:none !important; width:auto !important;
  display:grid; gap:.9rem;
}

@media (max-width:760px){
  .jeu-video-container .jeu-hero{
    grid-template-columns: 1fr;
    grid-template-areas: "media" "info";
  }
}

.jeu-video-container .jeu-hero img{ max-width:100%; height:auto; display:block; }
.jeu-video-container .jeu-hero__media > * + *{ margin-top:12px; }

/* Trailer */
.jeu-video-container .jeu-trailer .yt-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  max-height:min(58vh,520px);
  border-radius:12px; overflow:hidden; background:#0f0f10;
  box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.06));
}
.jeu-video-container .jeu-trailer .yt-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; display:block; border:0;
}

/* ===== GALERIE (carousel + lightbox) ===== */
.jeu-video-container .jeu-gallery .carousel{ position:relative; }
.jeu-video-container .jeu-gallery .carousel-track{
  display:flex; gap:12px;
  overflow-x:auto; overflow-y:hidden;
  padding:6px 2px 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.jeu-video-container .jeu-gallery .carousel-item{
  flex:0 0 auto; width: clamp(140px, 22vw, 240px); scroll-snap-align:start;
}
.jeu-video-container .jeu-gallery .carousel-item .lg-item,
.jeu-video-container .jeu-gallery .carousel-item img{
  display:block; width:100%;
  height: clamp(120px, 16vw, 180px);
  object-fit:cover; border-radius:12px;
  background:#0f0f10; box-shadow: var(--shadow, 0 6px 16px rgba(0,0,0,.12));
}
@media (min-width:900px){
  .jeu-video-container .jeu-gallery .carousel-item .lg-item,
  .jeu-video-container .jeu-gallery .carousel-item img{
    height: clamp(160px, 18vh, 220px);
  }
}
.jeu-video-container .jeu-gallery .carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:1px solid var(--border);
  background:#fff; box-shadow:var(--shadow-sm); color:#111; cursor:pointer;
}
.jeu-video-container .jeu-gallery .carousel-nav.prev{ left:6px; }
.jeu-video-container .jeu-gallery .carousel-nav.next{ right:6px; }
@media (max-width:640px){
  .jeu-video-container .jeu-gallery .carousel-nav{ display:none; }
}

/* ===== Titre & chips (scopé) ===== */
.jeu-video-container .jeu-title{
  margin:0 0 .35rem;
  line-height:1.12; letter-spacing:-0.015em;
}
.jeu-video-container .jeu-meta-chips{ display:flex; flex-wrap:wrap; gap:10px 12px; }
/* on scope .chip pour éviter les collisions globales */
.jeu-video-container .jeu-meta-chips .chip{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#f4f6f8; color:#111; border:1px solid #e3e7ec;
  border-radius:999px; padding:.4rem .85rem; font-size:.95rem;
}
.jeu-video-container .jeu-meta-chips span.chip{ font-size:.75rem; }
.jeu-video-container .jeu-meta-chips .chip-rating{ background:#fff3c4; border-color:#ffe28a; }
.jeu-video-container .jeu-meta-chips .chip-agg{    background:#e8f4ff; border-color:#cfe8ff; }
.jeu-video-container .jeu-meta-chips .chip-date{   background:#ecfdf5; border-color:#bbf7d0; }
.jeu-video-container .jeu-meta-chips .chip-stat{   background:#eef2ff; border-color:#dbe1ff; }

/* ===== Taxonomies (Genres / Plateformes) ===== */
.jeu-video-container .jeu-taxos{
  display:grid; gap:.6rem 1rem; margin-top:.5rem;
}
.jeu-video-container .jeu-taxos .taxo{
  display:flex; align-items:flex-start; gap:.5rem; line-height:1.55;
}
.jeu-video-container .jeu-taxos .taxo > strong{
  min-width:150px; font-weight:700; color: var(--text, #1f2937);
}
.jeu-video-container .taxo-links{
  font-size:.95rem; color: var(--text-soft, #475569);
}
.jeu-video-container .taxo-links:has(a){
  display:flex; flex-wrap:wrap; gap:6px; font-size:0; /* masque les virgules WP */
}
.jeu-video-container .taxo-links a{
  font-size:.85rem;
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px; font-weight:700;
  color: var(--text, #1f2937);
  background: var(--bg-soft, #f7f8fb);
  border:1px solid var(--border, #e5e7eb);
  border-radius:999px; text-decoration:none;
  box-shadow: var(--shadow-xs, 0 2px 6px rgba(0,0,0,.05));
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.jeu-video-container .taxo-links a:hover{
  transform: translateY(-1px);
  background:#fff;
  border-color: color-mix(in srgb, var(--primary, #2563eb) 35%, var(--border, #e5e7eb) 65%);
  box-shadow: var(--shadow-sm, 0 6px 16px rgba(0,0,0,.08));
}
.jeu-video-container .taxo-links a:focus-visible{
  outline:3px solid var(--ring, #93c5fd); outline-offset:2px;
}
@media (max-width:520px){
  .jeu-video-container .jeu-taxos .taxo > strong{ min-width:120px; }
}

/* ===== Liens externes (grille légère) ===== */
.jeu-video-container .jeu-sites{
  --item-min:180px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--item-min),1fr));
  gap: clamp(8px,1.5vw,12px);
  padding:0; margin:.5rem 0 2rem; list-style:none;
}
.jeu-video-container .jeu-sites li{ margin:0; }
.jeu-video-container .jeu-sites li a{
  font-size:.75rem;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:.6rem .8rem; background:var(--bg,#fff); color:var(--text,#1f2937); text-decoration:none;
  border:1px solid var(--border,#e5e7eb); border-radius:var(--radius-sm,10px);
  box-shadow: var(--shadow-xs,0 2px 6px rgba(0,0,0,.05));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.jeu-video-container .jeu-sites li a:hover{
  transform:translateY(-1px);
  box-shadow: var(--shadow-sm,0 6px 16px rgba(0,0,0,.08));
  border-color: color-mix(in srgb, var(--primary,#2563eb) 35%, var(--border,#e5e7eb) 65%);
}
.jeu-video-container .jeu-sites li a:focus-visible{
  outline:3px solid var(--ring,#93c5fd); outline-offset:2px;
}
.jeu-video-container .jeu-sites li a .label{ font-weight:600; letter-spacing:.01em; }
.jeu-video-container .jeu-sites li a .host{
  margin-left:auto; font-size:.75rem; color:var(--text-soft,#475569);
  background:var(--bg-soft,#f7f8fb); border:1px solid var(--border,#e5e7eb);
  padding:.15rem .45rem; border-radius:999px;
}
.jeu-video-container .jeu-sites li a::after{
  content:"↗"; font-size:.75rem; line-height:1; opacity:.65; margin-left:.25rem;
}
@media (max-width:420px){
  .jeu-video-container .jeu-sites{ --item-min:140px; gap:8px; }
  .jeu-video-container .jeu-sites li a{ padding:.5rem .65rem; }
}

/* ===== Contenu & résumé ===== */
.jeu-video-container .jeu-summary{
  background:#f6f7f9; padding:1.1rem 1.25rem;
  border-left:4px solid #111; font-style:italic; border-radius:8px; margin-top:.75rem;
}
.jeu-video-container .jeu-content{
  margin-top:clamp(18px,2.2vw,28px);
  margin-bottom:clamp(18px,2.2vw,28px);
  font-size:1.05rem; line-height:1.75;
}

/* ===== Sections liées ===== */
.jeu-video-container .jeu-section{ margin-top:clamp(24px,3vw,40px); }
.jeu-video-container .jeu-section h2{
  margin:0 0 .75rem; font-size:clamp(1.3rem,2.2vw,1.8rem);
}

/* ===== Lightbox au-dessus de tout (safe) ===== */
.lg-outer{ z-index:99999 !important; }
.lg-outer .lg-image{ border:0!important; box-shadow:none!important; border-radius:0!important; }

/* ===== Fins responsives ===== */
@media (max-width:420px){
  .jeu-video-container{ padding:12px; }
  .jeu-video-container .jeu-hero{ gap:12px; }
  .jeu-video-container .jeu-title{ font-size:1rem; line-height:1.15; margin-bottom:.25rem; }
}

/* ===== Caches & petits overrides locaux ===== */
.jeu-video-container .entry-content .igdb-gallery{ display:none; }

/* ===== Tables IGDB : lisibilité (scopé) ===== */
.jeu-video-container .ig-table td,
.jeu-video-container .ig-table th{ vertical-align:middle; }
.jeu-video-container .ig-table td:first-child{ white-space:nowrap; }
.jeu-video-container .ig-table td:first-child::before{ content:""; }
/* évite que l’ancre onglet passe sous la barre d’actions */
.jeu-video-container .ig-tabs{ scroll-margin-top:72px; }

/* ===========================
   Notes IGDB (100) + Pixi (5)
   =========================== */
.jeu-video-container .ratings-stack{
  display:grid; gap:6px; margin:10px 0;
}
.jeu-video-container .rating-row{
  display:flex; align-items:center; gap:10px;
  font-size:.95rem; color: var(--text-soft, #475569);
}
.jeu-video-container .rating-row .score{ font-weight:700; color: var(--text, #1f2937); }
.jeu-video-container .rating-row .votes{ font-size:.9em; color:#6b7280; }

/* Étoiles (scopé) */
.jeu-video-container .stars{
  --star-size:16px;
  display:inline-flex; gap:2px; line-height:1;
}
.jeu-video-container .stars .star{
  position:relative; width:var(--star-size); height:var(--star-size); display:inline-block;
}
.jeu-video-container .stars .star svg{
  width:100%; height:100%; display:block; fill:#cbd5e1; /* base grise */
}
.jeu-video-container .stars .star.full svg{ fill: currentColor; }
.jeu-video-container .stars .star.half::after{
  content:""; position:absolute; inset:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.86L18.18 22 12 18.56 5.82 22 7 14.13l-5-4.86 6.91-1.01L12 2z'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.86L18.18 22 12 18.56 5.82 22 7 14.13l-5-4.86 6.91-1.01L12 2z'/></svg>") no-repeat center/contain;
  clip-path: inset(0 50% 0 0);
}
/* couleurs par source */
.jeu-video-container .rating-igdb .stars{ color:#f59e0b; }
.jeu-video-container .rating-pixi .stars{ color: var(--primary, #2563eb); }
/* variante taille */
.jeu-video-container .ratings-stack .stars.stars-lg{ --star-size:20px; }

@media (max-width:420px){
  .jeu-video-container .rating-row{ gap:8px; font-size:.9rem; }
  .jeu-video-container .ratings-stack .stars{ --star-size:15px; }
}