/*
Theme Name: Xbox World
Theme URI: https://xbox-world.fr
Author: Xbox World
Description: Thème sur mesure pour xbox-world.fr. Dark mode, vert Xbox, notes mises en avant, menu déroulant depuis le logo.
Version: 1.0.0
Requires at least: 5.0
Requires PHP: 7.0
Text Domain: xbox-world
*/

html { scroll-behavior: smooth; }
body { background: #121516; color: #e4e4e7; }
:focus-visible { outline: 2px solid #4CFF6B; outline-offset: 2px; }

/* ---------- Notes ---------- */
.score-badge { box-shadow: 0 0 10px rgba(76,255,107,.55), 0 0 26px rgba(76,255,107,.25), inset 0 0 8px rgba(76,255,107,.15); }
.score-badge .score-num { text-shadow: 0 0 10px rgba(76,255,107,.8); }
.score-badge[data-tier="mid"] { border-color: rgba(76,255,107,.4); box-shadow: 0 0 8px rgba(76,255,107,.25); }
.score-badge[data-tier="mid"] .score-num { text-shadow: none; }
@keyframes xw-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(76,255,107,.55), 0 0 26px rgba(76,255,107,.25), inset 0 0 8px rgba(76,255,107,.15); }
  50%      { box-shadow: 0 0 16px rgba(76,255,107,.8),  0 0 38px rgba(76,255,107,.4),  inset 0 0 10px rgba(76,255,107,.25); }
}
.score-badge[data-tier="top"] { animation: xw-glow 3.2s ease-in-out infinite; }

.art-grid {
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---------- Menu déroulant (ouvert par le logo) ---------- */
.xw-menu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.8,.2,1); }
.xw-menu.is-open { grid-template-rows: 1fr; }
.xw-menu-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .5s; }
.xw-menu.is-open .xw-menu-inner { visibility: visible; transition-delay: 0s; }
.xw-menu-list li { opacity: 0; transform: translateY(-18px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.xw-menu.is-open .xw-menu-list li { opacity: 1; transform: none; }
.xw-menu.is-open .xw-menu-list li:nth-child(1) { transition-delay: .10s; }
.xw-menu.is-open .xw-menu-list li:nth-child(2) { transition-delay: .16s; }
.xw-menu.is-open .xw-menu-list li:nth-child(3) { transition-delay: .22s; }
.xw-menu.is-open .xw-menu-list li:nth-child(4) { transition-delay: .28s; }
.xw-menu.is-open .xw-menu-list li:nth-child(5) { transition-delay: .34s; }
.xw-menu.is-open .xw-menu-list li:nth-child(6) { transition-delay: .40s; }
.xw-menu.is-open .xw-menu-list li:nth-child(7) { transition-delay: .46s; }
.xw-menu.is-open .xw-menu-list li:nth-child(8) { transition-delay: .52s; }
.xw-menu-list a {
  display: block; padding: .5rem 0; color: #fff; font-family: "Big Shoulders Display", Impact, sans-serif;
  font-size: 2.25rem; font-weight: 800; line-height: 1; transition: color .2s, padding-left .25s;
}
.xw-menu-list a:hover, .xw-menu-list a:focus-visible { color: #4CFF6B; padding-left: .5rem; }
#xw-menu-btn[aria-expanded="true"] .xw-chev { transform: rotate(180deg); }
.xw-chev { transition: transform .4s cubic-bezier(.2,.8,.2,1); }

/* ---------- Carrousel d'accueil ---------- */
.xw-slide { opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s; }
.xw-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
@keyframes xw-kb { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes xw-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.xw-slide.is-active .xw-kb { animation: xw-kb 9s ease-out forwards; }
.xw-slide.is-active .xw-slide-copy > * { animation: xw-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.xw-slide.is-active .xw-slide-copy > *:nth-child(2) { animation-delay: .1s; }
.xw-slide.is-active .xw-slide-copy > *:nth-child(3) { animation-delay: .2s; }
.xw-slide.is-active .xw-slide-copy > *:nth-child(4) { animation-delay: .3s; }
[data-dot] { height: .625rem; width: .625rem; border-radius: 9999px; background: rgba(255,255,255,.3); transition: width .3s, background .3s; }
[data-dot][aria-current="true"] { width: 1.75rem; background: #4CFF6B; }

/* ---------- Divers ---------- */
.xw-scroll { scrollbar-width: thin; scrollbar-color: #107C10 transparent; }
.page-numbers { display: inline-block; margin: 0 .2rem; padding: .5rem .9rem; border: 1px solid rgba(16,124,16,.5); border-radius: .5rem; color: #6ee7b7; font-weight: 600; }
a.page-numbers:hover { border-color: #4CFF6B; color: #4CFF6B; }
.page-numbers.current { background: rgba(16,124,16,.35); color: #4CFF6B; border-color: #4CFF6B; }

/* ---------- Contenu des articles ---------- */
.xw-content { font-size: 1.0625rem; line-height: 1.75; color: #d4d4d8; }
.xw-content > * + * { margin-top: 1.25rem; }
.xw-content h2 { font-family: "Big Shoulders Display", Impact, sans-serif; font-size: 2.25rem; font-weight: 800; line-height: 1.05; color: #fff; margin-top: 2.5rem; }
.xw-content h3 { font-family: "Big Shoulders Display", Impact, sans-serif; font-size: 1.6rem; font-weight: 800; color: #fff; margin-top: 2rem; }
.xw-content a { color: #4CFF6B; text-decoration: underline; text-underline-offset: 3px; }
.xw-content img, .xw-content video { max-width: 100%; height: auto; border-radius: .75rem; }
.xw-content iframe { max-width: 100%; border: 0; border-radius: .75rem; }
.xw-content ul, .xw-content ol { padding-left: 1.5rem; }
.xw-content ul { list-style: disc; }
.xw-content ol { list-style: decimal; }
.xw-content blockquote { border-left: 3px solid #107C10; padding-left: 1rem; color: #a1a1aa; font-style: italic; }
.xw-content figcaption { font-size: .85rem; color: #71717a; margin-top: .4rem; }

/* ---------- Barres de notes par critère ---------- */
.xw-bar > span { width: var(--w, 0%); }
.xw-bar-anim > span { width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.xw-bar-anim.is-in > span { width: var(--w, 0%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .score-badge[data-tier="top"] { animation: none; }
  .xw-menu, .xw-menu-list li, .xw-slide, .xw-chev { transition: none; }
  .xw-slide.is-active .xw-kb, .xw-slide.is-active .xw-slide-copy > * { animation: none; }
}