/* GamingSecrets v31.57.20 — Hero Univers Xbox. Double porte 3D, brume verte, dashboard premium et mobile-safe. */ .gs-xbox-hub{ width:min(1280px,calc(100% - 28px)); margin:0 auto; padding:42px 0 78px; color:#d8e6e1; } .gs-xbox-hero{ position:relative; min-height:640px; overflow:hidden; isolation:isolate; perspective:1500px; border:1px solid rgba(170,255,215,.17); border-radius:28px; background: linear-gradient(180deg,rgba(255,255,255,.03),transparent 18%), radial-gradient(circle at 50% 53%,rgba(128,225,168,.085),transparent 34%), linear-gradient(180deg,rgba(8,13,16,.86),rgba(4,7,9,.94)); box-shadow: 0 34px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045), inset 0 0 110px rgba(0,0,0,.34); touch-action:pan-y; } .gs-xbox-hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(circle at 50% 5%,rgba(201,255,224,.08),transparent 28%), repeating-linear-gradient(90deg,transparent 0 96px,rgba(170,255,215,.022) 97px), repeating-linear-gradient(0deg,transparent 0 96px,rgba(170,255,215,.015) 97px); } .gs-xbox-hero::after{ content:""; position:absolute; inset:0; z-index:30; pointer-events:none; box-shadow:inset 0 0 145px rgba(0,0,0,.72); } .gs-xbox-hero-core{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:36px; opacity:.18; visibility:hidden; pointer-events:none; transform:translateZ(-90px) scale(.955); transition:opacity .6s ease .42s,transform .9s cubic-bezier(.2,.8,.2,1) .2s; } .gs-xbox-hero-dashboard{ width:min(940px,96%); padding:28px; position:relative; border-radius:24px; border:1px solid rgba(170,255,215,.17); background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014)), linear-gradient(145deg,rgba(13,22,25,.92),rgba(6,10,12,.96)); box-shadow:0 22px 76px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.045); backdrop-filter:blur(10px); } .gs-xbox-hero-dashboard::before, .gs-xbox-hero-dashboard::after{ content:""; position:absolute; width:34px; height:34px; pointer-events:none; border:2px solid rgba(128,225,168,.54); opacity:.75; } .gs-xbox-hero-dashboard::before{ top:14px;left:14px;border-right:0;border-bottom:0;border-radius:9px 0 0 0; } .gs-xbox-hero-dashboard::after{ right:14px;bottom:14px;border-left:0;border-top:0;border-radius:0 0 9px 0; } .gs-xbox-hero-status{ display:inline-flex; align-items:center; gap:9px; margin-bottom:13px; padding:8px 12px; border:1px solid rgba(128,225,168,.18); border-radius:999px; background:rgba(128,225,168,.08); color:#c9ffe0; font-size:10px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; } .gs-xbox-hero-status span{ width:8px;height:8px;border-radius:50%;background:#80e1a8;box-shadow:0 0 14px rgba(128,225,168,.78); } .gs-xbox-hero-eyebrow{ margin:0 0 8px; color:#80e1a8; font-size:10px; font-weight:900; letter-spacing:.24em; text-transform:uppercase; } .gs-xbox-hero-dashboard h2{ margin:0 0 10px; color:#f3f1ea; font-size:clamp(30px,4.4vw,52px); line-height:.98; letter-spacing:-.045em; } .gs-xbox-hero-lead{ max-width:760px; margin:0 0 20px; color:#9db9af; font-size:16px; line-height:1.65; } .gs-xbox-hero-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } .gs-xbox-hero-card{ position:relative; display:block; min-height:124px; padding:18px; overflow:hidden; border:1px solid rgba(170,255,215,.12); border-radius:18px; background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)), linear-gradient(145deg,rgba(20,32,36,.94),rgba(8,13,16,.96)); box-shadow:0 12px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03); color:inherit; text-decoration:none; text-align:left; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .gs-xbox-hero-card::before{ content:""; position:absolute; left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,rgba(128,225,168,.88),transparent); opacity:.78; } .gs-xbox-hero-card:not(.is-future):hover{ transform:translateY(-3px); border-color:rgba(128,225,168,.32); box-shadow:0 18px 42px rgba(0,0,0,.30),0 0 28px rgba(128,225,168,.08); } .gs-xbox-hero-card small{ display:block; margin-bottom:8px; color:#80e1a8; font-size:9px; font-weight:900; letter-spacing:.20em; text-transform:uppercase; } .gs-xbox-hero-card strong{ display:block; margin-bottom:6px; color:#f3f1ea; font-size:20px; line-height:1.15; } .gs-xbox-hero-card span{ display:block; color:#9db9af; font-size:13px; line-height:1.45; } .gs-xbox-hero-card em{ display:inline-block; margin-top:12px; color:#c9ffe0; font-size:9px; font-style:normal; font-weight:900; letter-spacing:.14em; text-transform:uppercase; } .gs-xbox-hero-card.is-future{ appearance:none; cursor:default; opacity:.78; } .gs-xbox-hero-special{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"code title" "code copy"; align-items:center; column-gap:16px; margin-top:13px; padding:15px 18px; border:1px solid rgba(128,225,168,.12); border-radius:16px; background:linear-gradient(90deg,rgba(128,225,168,.07),rgba(255,255,255,.018)); color:inherit; text-decoration:none; transition:border-color .2s ease,background .2s ease; } .gs-xbox-hero-special:hover{ border-color:rgba(128,225,168,.30); background:linear-gradient(90deg,rgba(128,225,168,.11),rgba(255,255,255,.024)); } .gs-xbox-hero-special-code{ grid-area:code; color:#80e1a8; font-size:9px; font-weight:900; letter-spacing:.17em; writing-mode:vertical-rl; transform:rotate(180deg); } .gs-xbox-hero-special strong{grid-area:title;color:#f3f1ea;font-size:18px;margin-bottom:3px} .gs-xbox-hero-special > span:last-child{grid-area:copy;color:#9db9af;font-size:13px} .gs-xbox-door-frame{ position:absolute; inset:28px; z-index:14; border:1px solid rgba(170,255,215,.18); border-radius:20px; box-shadow:inset 0 0 0 4px rgba(255,255,255,.018),inset 0 0 80px rgba(0,0,0,.44); pointer-events:none; } .gs-xbox-door{ position:absolute; top:28px; bottom:28px; z-index:12; width:calc(50% - 28px); transform-style:preserve-3d; transition:transform 1.08s cubic-bezier(.18,.76,.16,1),filter .7s ease; will-change:transform; background: linear-gradient(90deg,rgba(255,255,255,.04),transparent 14%), linear-gradient(180deg,rgba(255,255,255,.02),transparent 16%), repeating-linear-gradient(0deg,rgba(170,255,215,.022) 0 1px,transparent 1px 36px), linear-gradient(145deg,#172329 0%,#0d1519 52%,#16242a 100%); border:1px solid rgba(170,255,215,.14); box-shadow:inset 0 0 70px rgba(0,0,0,.48); } .gs-xbox-door::before{ content:""; position:absolute; inset:11%; border:1px solid rgba(170,255,215,.095); border-radius:16px; background: linear-gradient(135deg,transparent 0 45%,rgba(128,225,168,.045) 46% 54%,transparent 55%), radial-gradient(circle at 50% 18%,rgba(255,255,255,.035),transparent 32%); } .gs-xbox-door::after{ content:""; position:absolute; top:14%;bottom:14%;width:4px; background:linear-gradient(180deg,transparent,rgba(128,225,168,.84),transparent); filter:blur(.4px); opacity:.5; } .gs-xbox-door-left{left:28px;transform-origin:left center;border-radius:18px 4px 4px 18px} .gs-xbox-door-left::after{right:2px} .gs-xbox-door-right{right:28px;transform-origin:right center;border-radius:4px 18px 18px 4px} .gs-xbox-door-right::after{left:2px} /* V31.57.17 — Déclencheur natif robuste : checkbox + label. Le clic fonctionne sans JavaScript, tandis que le JS ne sert que de filet de sécurité/recentrage. */ .gs-xbox-lock{ position:absolute; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; left:50%;top:50%;z-index:18; width:min(520px,84%); padding:28px 24px; transform:translate(-50%,-50%); border:1px solid rgba(170,255,215,.17); border-radius:20px; background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)), linear-gradient(145deg,rgba(15,24,28,.96),rgba(5,9,11,.98)); box-shadow:0 22px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.045); text-align:center; transition:transform .56s cubic-bezier(.2,.8,.2,1),opacity .42s ease,filter .42s ease; } .gs-xbox-lock-code{ margin:0 0 8px; color:#80e1a8; font-size:10px; font-weight:900; letter-spacing:.24em; text-transform:uppercase; } .gs-xbox-lock h1{ margin:0 0 10px; color:#f3f1ea; font-family:"Bebas Neue","Outfit",sans-serif; font-size:clamp(42px,7vw,76px); font-weight:400; line-height:.92; letter-spacing:.015em; text-transform:uppercase; text-shadow:0 0 28px rgba(128,225,168,.12); } .gs-xbox-lock > p:not(.gs-xbox-lock-code){ max-width:420px; margin:0 auto 20px; color:#9db9af; font-size:15px; line-height:1.6; } .gs-xbox-unlock{ appearance:none; pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:13px 20px; border:1px solid rgba(128,225,168,.31); border-radius:13px; background: linear-gradient(180deg,rgba(201,255,224,.16),rgba(128,225,168,.08)), linear-gradient(145deg,rgba(17,27,31,.96),rgba(6,11,13,.98)); color:#c9ffe0; box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 0 22px rgba(128,225,168,.075); cursor:pointer; font-size:12px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; touch-action:manipulation; } .gs-xbox-unlock b{font-size:22px;line-height:1;font-weight:500;transition:transform .18s ease} .gs-xbox-unlock:hover{transform:translateY(-2px);border-color:rgba(128,225,168,.52);box-shadow:0 18px 42px rgba(0,0,0,.34),inset 0 0 26px rgba(128,225,168,.12)} .gs-xbox-unlock:hover b{transform:translateX(3px)} .gs-xbox-unlock:active{transform:translateY(1px) scale(.99)} .gs-xbox-lock-note{ display:block; margin-top:12px; color:rgba(157,185,175,.70); font-size:10px; letter-spacing:.04em; } .gs-xbox-energy{ position:absolute; left:50%;top:50%;z-index:15; width:12px;height:62%; transform:translate(-50%,-50%) scaleY(.08); opacity:0; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(201,255,224,.94),rgba(88,162,123,.55),transparent); filter:blur(6px); } .gs-xbox-fogs{position:absolute;inset:0;z-index:16;overflow:hidden;pointer-events:none} .gs-xbox-fogs span{ position:absolute; left:50%;top:50%; width:300px;height:155px; opacity:0; border-radius:50%; transform:translate(-50%,-50%) scale(.35); background:radial-gradient(ellipse at center,rgba(201,255,224,.42) 0%,rgba(128,225,168,.20) 34%,rgba(88,162,123,.08) 58%,transparent 74%); filter:blur(23px); } .gs-xbox-particles{position:absolute;inset:0;z-index:17;pointer-events:none} .gs-xbox-particles i{ position:absolute; left:50%;top:50%; width:4px;height:4px; border-radius:50%; background:#c9ffe0; box-shadow:0 0 14px rgba(201,255,224,.82); opacity:0; } .gs-xbox-independent-note{ max-width:860px; margin:16px auto 0; padding:0 12px; color:rgba(157,185,175,.70); font-size:11px; line-height:1.55; text-align:center; } @keyframes gsXboxEnergy{ 0%{opacity:0;transform:translate(-50%,-50%) scaleY(.08)} 22%{opacity:1} 58%{opacity:.72;transform:translate(-50%,-50%) scaleY(1)} 100%{opacity:0;transform:translate(-50%,-50%) scaleY(1.3)} } @keyframes gsXboxFogL{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.32)} 18%{opacity:.72} 100%{opacity:0;transform:translate(-152%,-52%) scale(1.95)} } @keyframes gsXboxFogR{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.32)} 18%{opacity:.70} 100%{opacity:0;transform:translate(52%,-47%) scale(1.9)} } @keyframes gsXboxFogU{ 0%{opacity:0;transform:translate(-50%,-44%) scale(.28)} 16%{opacity:.55} 100%{opacity:0;transform:translate(-50%,-158%) scale(1.65)} } @keyframes gsXboxFogD{ 0%{opacity:0;transform:translate(-50%,-42%) scale(.36)} 18%{opacity:.52} 100%{opacity:0;transform:translate(-50%,60%) scale(2)} } @keyframes gsXboxSpark{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.3)} 20%{opacity:1} 100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.1)} } @media (max-width:760px){ .gs-xbox-hub{ width:min(100% - 18px,1280px); padding:22px 0 54px; } .gs-xbox-hero{ min-height:690px; border-radius:20px; } .gs-xbox-door-frame{inset:14px;border-radius:15px} .gs-xbox-door{top:14px;bottom:14px;width:calc(50% - 14px)} .gs-xbox-door-left{left:14px} .gs-xbox-door-right{right:14px} .gs-xbox-hero-core{padding:17px 12px} .gs-xbox-hero-dashboard{width:100%;padding:19px;border-radius:19px} .gs-xbox-hero-grid{grid-template-columns:1fr;gap:10px} .gs-xbox-hero-card{min-height:auto;padding:15px} .gs-xbox-hero-special{grid-template-columns:auto 1fr;padding:13px 14px} .gs-xbox-lock{width:86%;padding:24px 18px} .gs-xbox-lock h1{font-size:clamp(44px,14vw,68px)} .gs-xbox-lock > p:not(.gs-xbox-lock-code){font-size:14px} .gs-xbox-unlock{width:100%} } @media (max-width:430px){ .gs-xbox-hero{min-height:720px} .gs-xbox-hero-dashboard h2{font-size:30px} .gs-xbox-hero-lead{font-size:14px} .gs-xbox-hero-card strong{font-size:18px} } @media (prefers-reduced-motion:reduce){ .gs-xbox-hero *, .gs-xbox-hero *::before, .gs-xbox-hero *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ============================================================ V31.57.21 — PORTAIL XBOX SERVEUR, SANS ÉTAT CLIENT FRAGILE - le CTA est un vrai lien HTTP ; aucun checkbox/details n'est nécessaire - en état verrouillé, le contenu du Hub n'existe pas dans le HTML - après clic, WordPress recharge la page avec ?gs_xbox_open=1 - l'état ouvert est rendu côté PHP et l'animation n'est qu'une couche visuelle ============================================================ */ .gs-xbox-gate{position:relative;display:block;margin:0;padding:0;border:0;background:transparent} .gs-xbox-door,.gs-xbox-door::before,.gs-xbox-door::after,.gs-xbox-energy,.gs-xbox-fogs,.gs-xbox-fogs span,.gs-xbox-particles,.gs-xbox-particles i,.gs-xbox-gate-opened{pointer-events:none} .gs-xbox-lock{cursor:default} .gs-xbox-unlock{ position:relative;z-index:80;pointer-events:auto;cursor:pointer;text-decoration:none; -webkit-tap-highlight-color:rgba(128,225,168,.18);touch-action:manipulation } .gs-xbox-unlock:focus-visible{outline:3px solid rgba(201,255,224,.92);outline-offset:4px} .gs-xbox-hub.is-locked .gs-xbox-gate-content{display:none!important} /* État rendu côté serveur : l'ouverture commence immédiatement après le rechargement. */ .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-door-left{animation:gsXboxDoorLeftV21 1.08s cubic-bezier(.18,.76,.16,1) both} .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-door-right{animation:gsXboxDoorRightV21 1.08s cubic-bezier(.18,.76,.16,1) both} .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-energy{animation:gsXboxEnergy .8s ease-out both} .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-fogs span:nth-child(1){animation:gsXboxFogL .98s ease-out .11s both} .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-fogs span:nth-child(2){animation:gsXboxFogR 1.06s ease-out .15s both} .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-fogs span:nth-child(3){animation:gsXboxFogU .9s ease-out .22s both} .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-fogs span:nth-child(4){animation:gsXboxFogD 1.12s ease-out .07s both} .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-fogs span:nth-child(5){animation:gsXboxFogL 1.24s ease-out .02s both} .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-fogs span:nth-child(6){animation:gsXboxFogR 1.18s ease-out .08s both} .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-particles i{animation:gsXboxSpark .72s ease-out var(--d) both} .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-gate-opened{animation:gsXboxOpenedSignalV21 .72s ease .48s both} .gs-xbox-hub.is-open .gs-xbox-hero{pointer-events:none;animation:gsXboxGateCollapseV21 1.40s cubic-bezier(.2,.8,.2,1) both} .gs-xbox-hub.is-open .gs-xbox-gate-content{ display:block!important;visibility:visible!important;position:relative;z-index:2;padding-top:18px; animation:gsXboxContentRevealV21 .48s cubic-bezier(.2,.8,.2,1) 1.05s both } .gs-xbox-gate-opened{position:absolute;left:50%;top:50%;z-index:19;display:flex;align-items:center;gap:10px;opacity:0;transform:translate(-50%,-50%) scale(.96);color:#c9ffe0;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase} .gs-xbox-gate-opened>span:first-child{width:8px;height:8px;border-radius:50%;background:#80e1a8;box-shadow:0 0 16px rgba(128,225,168,.82)} .gs-xbox-unlocked-dashboard{margin:0 0 22px;padding:0} .gs-xbox-unlocked-dashboard .gs-xbox-hero-dashboard{width:min(980px,100%);margin:0 auto} @keyframes gsXboxDoorLeftV21{to{transform:translateX(-93%) rotateY(-17deg);filter:brightness(.80)}} @keyframes gsXboxDoorRightV21{to{transform:translateX(93%) rotateY(17deg);filter:brightness(.80)}} @keyframes gsXboxContentRevealV21{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} @keyframes gsXboxOpenedSignalV21{0%{opacity:0;transform:translate(-50%,-50%) scale(.94)}35%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.02)}} @keyframes gsXboxGateCollapseV21{0%,72%{height:640px;min-height:640px;opacity:1;margin-bottom:0;border-width:1px}100%{height:0;min-height:0;opacity:0;margin-bottom:0;border-width:0;box-shadow:none;overflow:hidden}} @media(max-width:760px){ .gs-xbox-hub.is-open .gs-xbox-gate-content{padding-top:12px} .gs-xbox-unlocked-dashboard{margin-bottom:16px} .gs-xbox-unlocked-dashboard .gs-xbox-hero-dashboard{padding:18px;border-radius:18px} @keyframes gsXboxGateCollapseV21{0%,72%{height:720px;min-height:720px;opacity:1;margin-bottom:0;border-width:1px}100%{height:0;min-height:0;opacity:0;margin-bottom:0;border-width:0;box-shadow:none;overflow:hidden}} } @media(prefers-reduced-motion:reduce){ .gs-xbox-hub.is-open .gs-xbox-hero{animation:none;height:0;min-height:0;opacity:0;border-width:0;overflow:hidden} .gs-xbox-hub.is-open .gs-xbox-gate-content{animation:none} .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-energy, .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-fogs span, .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-particles i, .gs-xbox-hub.is-open .gs-xbox-hero .gs-xbox-gate-opened{animation:none} } /* V31.57.26 — navigation modules Xbox robuste côté serveur. Les cartes ne reposent plus sur des ancres internes : chaque CTA charge explicitement le module demandé avec ?gs_xbox_module=... */ .gs-xbox-hero-card.is-live, .gs-xbox-hero-library, .gs-xbox-hero-special{ position:relative; z-index:8; pointer-events:auto!important; cursor:pointer!important; touch-action:manipulation; -webkit-tap-highlight-color:rgba(128,225,168,.18); } .gs-xbox-hero-card.is-live::after, .gs-xbox-hero-library::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; } .gs-xbox-hero-card.is-live > *, .gs-xbox-hero-library > *{position:relative;z-index:3} .gs-xbox-module-focusbar{ width:min(1040px,100%); margin:0 auto 14px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid rgba(128,225,168,.20); border-radius:14px; background:linear-gradient(180deg,rgba(128,225,168,.08),rgba(5,12,10,.58)); box-shadow:0 12px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04); } .gs-xbox-module-focusbar a{ display:inline-flex; align-items:center; min-height:38px; padding:0 12px; border:1px solid rgba(128,225,168,.22); border-radius:10px; background:rgba(0,0,0,.22); color:#d8ffe7; text-decoration:none; font-size:12px; font-weight:900; } .gs-xbox-module-focusbar span{ color:#80e1a8; font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; text-align:right; } .gs-xbox-module-focus{width:min(1180px,100%);margin:0 auto} .gs-xbox-module-focus > section{margin-top:0!important} @media(max-width:760px){ .gs-xbox-module-focusbar{position:sticky;top:74px;z-index:30;margin-bottom:10px;padding:8px 9px;backdrop-filter:blur(10px)} .gs-xbox-module-focusbar a{min-height:36px;padding:0 10px;font-size:11px} .gs-xbox-module-focusbar span{max-width:46%;font-size:8px;letter-spacing:.12em} } /* ============================================================ V31.57.27 — MODULES XBOX EN ACCORDÉON VISUEL - un seul module ouvert à la fois - second clic sur le titre = repli - preview réelle en background de chaque module - page beaucoup plus courte quand tous les modules sont fermés ============================================================ */ .gs-xbox-module-stack{ display:grid; gap:12px; margin-top:18px; } .gs-xbox-module-accordion{ position:relative; overflow:hidden; border:1px solid rgba(170,255,215,.13); border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),rgba(7,13,16,.90); box-shadow:0 14px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03); } .gs-xbox-module-accordion.is-open{ border-color:rgba(128,225,168,.32); box-shadow:0 20px 50px rgba(0,0,0,.30),0 0 28px rgba(128,225,168,.07),inset 0 1px 0 rgba(255,255,255,.04); } .gs-xbox-module-summary{ position:relative; min-height:138px; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:18px 20px; overflow:hidden; cursor:pointer; list-style:none; user-select:none; touch-action:manipulation; -webkit-tap-highlight-color:rgba(128,225,168,.16); isolation:isolate; } .gs-xbox-module-summary::-webkit-details-marker{display:none} .gs-xbox-module-summary::before{ content:""; position:absolute; inset:0; z-index:-2; background-position:center; background-size:cover; background-repeat:no-repeat; transform:scale(1.03); transition:transform .35s ease,filter .35s ease; filter:saturate(.84) contrast(1.04); } .gs-xbox-module-summary::after{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg,rgba(4,9,11,.96) 0%,rgba(4,9,11,.82) 46%,rgba(4,9,11,.52) 76%,rgba(4,9,11,.62) 100%), linear-gradient(180deg,rgba(2,6,8,.08) 0%,rgba(2,6,8,.16) 44%,rgba(2,6,8,.76) 100%); box-shadow:inset 0 0 54px rgba(0,0,0,.28); pointer-events:none; } .gs-xbox-module-accordion.is-open .gs-xbox-module-summary::before{transform:scale(1.075);filter:saturate(1) contrast(1.06)} .gs-xbox-module-accordion[data-gs-xbox-module="retrocompatibilite"] .gs-xbox-module-summary::before{background-image:url('../img/xbox/modules/retrocompatibilite.webp')} .gs-xbox-module-accordion[data-gs-xbox-module="disc-to-digital"] .gs-xbox-module-summary::before{background-image:url('../img/xbox/modules/disc-to-digital.webp')} .gs-xbox-module-accordion[data-gs-xbox-module="editorial"] .gs-xbox-module-summary::before{background-image:url('../img/xbox/modules/editorial.webp')} .gs-xbox-module-accordion[data-gs-xbox-module="calendar"] .gs-xbox-module-summary::before{background-image:url('../img/xbox/modules/calendar.webp')} .gs-xbox-module-accordion[data-gs-xbox-module="jeux"] .gs-xbox-module-summary::before{background-image:url('../img/xbox/modules/jeux.webp')} .gs-xbox-module-summary-copy{display:block;min-width:0;max-width:78%} .gs-xbox-module-summary-copy small{display:block;margin:0 0 7px;color:#80e1a8;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.8)} .gs-xbox-module-summary-copy strong{display:block;margin:0 0 6px;color:#f3f1ea;font-size:clamp(22px,3vw,30px);line-height:1.05;letter-spacing:-.03em;text-shadow:0 3px 20px rgba(0,0,0,.82)} .gs-xbox-module-summary-copy>span{display:block;color:rgba(219,235,228,.82);font-size:13px;line-height:1.4;text-shadow:0 2px 14px rgba(0,0,0,.86)} .gs-xbox-module-summary-copy em{display:inline-block;margin-top:11px;color:#c9ffe0;font-size:9px;font-style:normal;font-weight:900;letter-spacing:.13em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.86)} .gs-xbox-module-toggle{ position:relative; flex:0 0 44px; width:44px;height:44px; border:1px solid rgba(128,225,168,.28); border-radius:14px; background:rgba(5,12,10,.60); box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter:blur(6px); } .gs-xbox-module-toggle::before,.gs-xbox-module-toggle::after{ content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:999px;background:#c9ffe0;transform:translate(-50%,-50%);transition:transform .22s ease,opacity .22s ease } .gs-xbox-module-toggle::after{transform:translate(-50%,-50%) rotate(90deg)} .gs-xbox-module-accordion.is-open .gs-xbox-module-toggle::after{opacity:0;transform:translate(-50%,-50%) rotate(0deg)} .gs-xbox-module-accordion.is-open .gs-xbox-module-summary-copy em{color:#80e1a8} .gs-xbox-module-panel{border-top:1px solid rgba(170,255,215,.10);background:rgba(3,8,10,.72)} .gs-xbox-module-panel-inner{padding:0 16px 16px;animation:gsXboxModuleReveal .28s ease both} .gs-xbox-module-panel-inner>section{margin-top:16px!important} @keyframes gsXboxModuleReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} .gs-xbox-module-summary:focus-visible{outline:3px solid rgba(201,255,224,.9);outline-offset:-3px;border-radius:18px} /* L'accordéon porte déjà le titre : on allège les doublons visuels dans le moteur ouvert. */ .gs-xbox-module-panel .gs-xbox-bc-kicker, .gs-xbox-module-panel .gs-xbox-d2d-kicker, .gs-xbox-module-panel .gs-xbox-editorial-kicker, .gs-xbox-module-panel .gs-xbox-calendar-kicker, .gs-xbox-module-panel .gs-xbox-games-kicker{display:none} .gs-xbox-module-panel .gs-xbox-bc-head h2, .gs-xbox-module-panel .gs-xbox-d2d-head h2, .gs-xbox-module-panel .gs-xbox-editorial-head h2, .gs-xbox-module-panel .gs-xbox-calendar-head h2, .gs-xbox-module-panel .gs-xbox-games-head h2{font-size:clamp(25px,3vw,34px)} @media(max-width:760px){ .gs-xbox-hero-dashboard{padding:15px!important} .gs-xbox-hero-lead{font-size:13px;line-height:1.48;margin-bottom:14px} .gs-xbox-module-stack{gap:9px;margin-top:13px} .gs-xbox-module-summary{min-height:112px;padding:14px 13px;gap:10px} .gs-xbox-module-summary::after{ background: linear-gradient(90deg,rgba(4,9,11,.96) 0%,rgba(4,9,11,.78) 68%,rgba(4,9,11,.58) 100%), linear-gradient(180deg,rgba(2,6,8,.08),rgba(2,6,8,.74)); } .gs-xbox-module-summary-copy{max-width:calc(100% - 50px)} .gs-xbox-module-summary-copy small{font-size:8px;margin-bottom:5px} .gs-xbox-module-summary-copy strong{font-size:22px;margin-bottom:4px} .gs-xbox-module-summary-copy>span{font-size:11.5px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .gs-xbox-module-summary-copy em{font-size:8px;margin-top:8px} .gs-xbox-module-toggle{flex-basis:38px;width:38px;height:38px;border-radius:12px} .gs-xbox-module-panel-inner{padding:0 8px 10px} .gs-xbox-module-panel-inner>section{margin-top:9px!important} .gs-xbox-module-panel .gs-xbox-bc-shell, .gs-xbox-module-panel .gs-xbox-d2d-shell, .gs-xbox-module-panel .gs-xbox-editorial-shell, .gs-xbox-module-panel .gs-xbox-games, .gs-xbox-module-panel .gs-xbox-calendar{border-radius:16px} } @media(prefers-reduced-motion:reduce){ .gs-xbox-module-summary::before,.gs-xbox-module-toggle::before,.gs-xbox-module-toggle::after,.gs-xbox-module-panel-inner{transition:none!important;animation:none!important} } /* Nuances de vert par famille : repère visuel sans casser l'identité Xbox/GS. */ .gs-xbox-module-accordion[data-gs-xbox-module="retrocompatibilite"]{--gs-module-accent:#80e1a8} .gs-xbox-module-accordion[data-gs-xbox-module="disc-to-digital"]{--gs-module-accent:#59bd8b} .gs-xbox-module-accordion[data-gs-xbox-module="editorial"]{--gs-module-accent:#73b99f} .gs-xbox-module-accordion[data-gs-xbox-module="calendar"]{--gs-module-accent:#8bd9bb} .gs-xbox-module-accordion[data-gs-xbox-module="jeux"]{--gs-module-accent:#4f9f77} .gs-xbox-module-accordion::before{ content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;z-index:4;border-radius:0 4px 4px 0;background:var(--gs-module-accent,#80e1a8);opacity:.7;box-shadow:0 0 18px color-mix(in srgb,var(--gs-module-accent,#80e1a8) 45%,transparent);pointer-events:none } .gs-xbox-module-accordion.is-open::before{opacity:1} .gs-xbox-module-accordion .gs-xbox-module-summary-copy small, .gs-xbox-module-accordion .gs-xbox-module-summary-copy em{color:var(--gs-module-accent,#80e1a8)} .gs-xbox-module-accordion .gs-xbox-module-toggle{border-color:color-mix(in srgb,var(--gs-module-accent,#80e1a8) 36%,transparent)} @media(max-width:760px){ /* Une fois un module ouvert, on évite de répéter de longs paragraphes d'introduction. */ .gs-xbox-module-panel .gs-xbox-bc-sub, .gs-xbox-module-panel .gs-xbox-d2d-sub, .gs-xbox-module-panel .gs-xbox-editorial-head>div:first-child>p:last-child, .gs-xbox-module-panel .gs-xbox-calendar-head>div:first-child>p:last-child, .gs-xbox-module-panel .gs-xbox-games-head>div:first-child>p:last-child{display:none} } /* V31.57.28 — correctif interaction modules : accordéon à liens réels + JS progressif. Le href ouvre aussi le module côté serveur si JS/cache navigateur pose problème. */ .gs-xbox-module-summary{ z-index:10; width:100%; color:inherit; text-decoration:none!important; pointer-events:auto!important; } .gs-xbox-module-summary > *{pointer-events:none} .gs-xbox-module-accordion::before, .gs-xbox-module-summary::before, .gs-xbox-module-summary::after{pointer-events:none!important} .gs-xbox-module-panel[hidden]{display:none!important} .gs-xbox-module-accordion[data-open="false"] .gs-xbox-module-panel{display:none} .gs-xbox-module-accordion[data-open="true"] .gs-xbox-module-panel{display:block} .gs-xbox-module-accordion[data-open="true"] .gs-xbox-module-toggle::after{opacity:0;transform:translate(-50%,-50%) rotate(0deg)} .gs-xbox-module-accordion[data-open="true"] .gs-xbox-module-summary::before{transform:scale(1.075);filter:saturate(1) contrast(1.06)} .gs-xbox-module-accordion[data-open="true"]{border-color:rgba(128,225,168,.32);box-shadow:0 20px 50px rgba(0,0,0,.30),0 0 28px rgba(128,225,168,.07),inset 0 1px 0 rgba(255,255,255,.04)} /* ============================================================ V31.57.30 — CORRECTIF DURCI DU CLIC MODULES XBOX - vrai