/* ============================================================ Atlas Rising — PLAY (Football Gaming Hub) Feuille dédiée, séparée de style.css : Play est un monde à part visuellement (coquille de stade, HUD, réponse aux interactions), le site média n'en hérite jamais rien. Toujours construite sur les tokens de style.css (--red/--ink/--gold/--border/--font-*) — aucune nouvelle teinte. Chargée uniquement par base-play.html, jamais par base.html. ============================================================ */ /* ---------- Coquille stade (fond global — vrai décor illustré) ---------- 3 images générées (Higgsfield), en couches de profondeur, décalées légèrement au mousemove/scroll par play-atmosphere.js (aucune classe ici n'anime seule — le JS pose les transform). Jamais un simple dégradé CSS : le stade est une vraie illustration. */ .play-body{ --stadium-night: #0E0C0A; background: var(--stadium-night); min-height: 100vh; overflow-x: hidden; position: relative; } /* style.css pose un voile crème sur pour l'habillage Sahara du site média (body::before, non scopé à une classe) — sur Play ce voile masquait le décor stade en le lavant de blanc. On le neutralise ici, jamais dans style.css lui-même (le site média n'est pas touché). */ .play-body::before{ content:none; } .play-bg-layer{ position: fixed; inset:-4%; z-index:-3; pointer-events:none; background-repeat:no-repeat; background-position:center bottom; background-size:cover; will-change: transform; } .play-bg-far{ /* static/img/gamebackground.png — nom fixe, remplaçable à tout moment sans toucher au code (juste écraser le fichier). */ background-image: url('../img/gamebackground.png'); opacity:1; } #play-atmosphere-canvas{ position: fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; } /* ---------- HUD ---------- */ .play-hud{ position: sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px clamp(16px,4vw,40px); background: linear-gradient(180deg, rgba(14,12,10,.92), rgba(14,12,10,.75)); backdrop-filter: blur(10px); border-bottom:1px solid rgba(184,144,62,.22); } .play-hud-quit{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color: rgba(242,235,220,.72); font-family: var(--font-nav); font-size:12.5px; font-weight:700; transition: color .2s, transform .2s var(--ease); } .play-hud-quit:hover{ color:#fff; transform: translateX(-2px); } .play-hud-crest{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; position:absolute; left:50%; transform:translateX(-50%); } .play-hud-crest img{ border-radius:50%; box-shadow: 0 0 0 2px rgba(184,144,62,.5), 0 0 18px -4px rgba(184,144,62,.6); } .play-hud-wordmark{ font-family: var(--font-nav); font-weight:800; font-size:15px; letter-spacing:.14em; color:#F2EBDC; } .play-hud-side{ display:flex; align-items:center; gap:10px; margin-left:auto; } .play-hud .points-badge{ background: rgba(184,144,62,.16); color:#F2EBDC; border:1px solid rgba(184,144,62,.35); } .play-hud .icon-btn{ color:#F2EBDC; } .play-hud .icon-btn:hover{ color: var(--gold); } @media (max-width:640px){ .play-hud-wordmark{ display:none; } .play-hud-quit span{ display:none; } } /* ---------- Compte : avatar + niveau (le niveau est posé par play-hud.js depuis le vrai solde Atlas Points de l'utilisateur — jamais une valeur inventée ; masqué tant qu'il n'est pas connu). ---------- */ .play-hud-account{ display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px !important; border-radius:22px; background: rgba(255,255,255,.06); } .play-hud-account .account-avatar{ width:30px; height:30px; } .play-hud-account-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; } .play-hud-level{ font-family: var(--font-nav); font-size:10px; font-weight:700; color: var(--gold); text-transform:uppercase; letter-spacing:.04em; } /* ---------- Barre de navigation basse (mobile-app) ---------- */ .play-bottom-nav{ position: sticky; bottom:0; z-index:40; display:flex; justify-content:space-around; background: linear-gradient(0deg, rgba(10,8,6,.96), rgba(14,12,10,.85)); backdrop-filter: blur(10px); border-top:1px solid rgba(184,144,62,.22); padding: 8px clamp(6px,2vw,20px); } .play-bottom-nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; cursor:pointer; color: rgba(242,235,220,.55); font-family: var(--font-nav); font-size:10px; font-weight:700; padding:6px 8px; border-radius:10px; transition: color .2s, background .2s; } .play-bottom-nav-item:hover{ color: rgba(242,235,220,.85); } .play-bottom-nav-item.active{ color: var(--red); background: rgba(193,18,31,.12); } @media (min-width:860px){ .play-bottom-nav{ display:none; } } /* ---------- Contenu principal ---------- */ .play-main{ max-width:1180px; margin:0 auto; padding: 28px clamp(16px,4vw,40px) 100px; position:relative; } /* ---------- Tab bar : plus "manette de jeu" ---------- */ .play-tabs{ display:flex; justify-content:center; gap:4px; margin-bottom:28px; padding:5px; background: rgba(255,255,255,.04); border:1px solid rgba(184,144,62,.2); border-radius:14px; overflow-x:auto; } .play-tab{ background:none; border:none; cursor:pointer; white-space:nowrap; border-radius:10px; font-family: var(--font-nav); font-size:13.5px; font-weight:700; color: rgba(242,235,220,.6); padding:10px 18px; transition: color .2s, background .2s, transform .15s var(--ease); } .play-tab:hover{ color:#F2EBDC; } .play-tab.active{ color:#fff; background: linear-gradient(135deg, var(--red), var(--red-dark)); box-shadow: 0 8px 18px -8px rgba(193,18,31,.6); } @media (max-width:859px){ .play-tabs{ display:none; } } /* ---------- Transition d'entrée des panneaux (aucune modif de play-tabs.js — l'animation se déclenche automatiquement à chaque fois qu'un panneau redevient visible, via [hidden] qui bascule display:none) ---------- */ @keyframes play-panel-in{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } } .play-panel:not([hidden]){ animation: play-panel-in .36s cubic-bezier(.25,.46,.45,.94) both; } .play-panel[hidden]{ display:none; } /* Le contenu Play est sombre — on repasse les blocs texte en clair */ .play-main h1, .play-main h2, .play-main h3{ color:#F2EBDC; } .play-main{ color: rgba(242,235,220,.85); } /* Audit contraste (30/07/2026, complété 04/08/2026) : 1) .quizx-hero-subtitle a une couleur var(--ink) explicite dans style.css (#111 sur #111) — jamais couverte par la règle générale ci-dessus (h1/h2/h3 seulement, pas les

). 2) Plusieurs "cartes site-média" (fond blanc voulu, contraste avec le fond sombre de Play) contiennent du texte SANS couleur explicite dans style.css — il hérite alors du crème/or ambiant de .play-main, illisible sur blanc (retour utilisateur : "questions du quiz en jaune sur fond blanc"). Fix au niveau du conteneur plutôt que élément par élément : garantit que tout texte à l'intérieur de ces cartes reste sombre par défaut, y compris tout texte qui y serait ajouté plus tard sans y penser. Les enfants avec leur propre couleur explicite (ex. badge catégorie rouge) ne sont pas affectés. */ .play-body .quizx-hero-subtitle{ color:#F2EBDC; } .play-body .quiz-question-card, .play-body .quiz-result-card, .play-body .quiz-login-gate-card, .play-body .pack-opening-panel{ color: var(--ink); } /* La règle générale ".play-main h1,h2,h3{color:#F2EBDC}" cible ces titres directement (pas par héritage) — un rappel au niveau conteneur ci-dessus ne suffit pas à la battre, il faut re-cibler les mêmes éléments. */ .play-body .quiz-question-card h1, .play-body .quiz-question-card h2, .play-body .quiz-question-card h3, .play-body .quiz-result-card h1, .play-body .quiz-result-card h2, .play-body .quiz-result-card h3, .play-body .quiz-login-gate-card h1, .play-body .quiz-login-gate-card h2, .play-body .quiz-login-gate-card h3, .play-body .pack-opening-panel h1, .play-body .pack-opening-panel h2, .play-body .pack-opening-panel h3{ color: var(--ink); } /* ---------- Héros illustré (personnage) — Quiz uniquement. Mobile (≤859px) : l'avatar (même image/asset que sur desktop) remplace visuellement le H1 "Le grand quiz..." — le H1 reste dans le DOM (accessibilité/SEO) mais masqué visuellement (clip sr-only), l'avatar prend sa place dans la mise en page via ::before + ordre flex explicite avec les autres éléments du hero. Aucun markup ajouté. ---------- */ @media (max-width:859px){ .play-body .quizx-hero{ display:flex; flex-direction:column; align-items:center; } .play-body .quizx-hero .eyebrow{ order:1; } .play-body .quizx-hero::before{ content:''; order:2; height:200px; width:auto; aspect-ratio:832/1179; background-image:url('../img/play/hero-character.png'); background-size:contain; background-repeat:no-repeat; background-position:bottom center; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); margin: 6px 0 24px; } .play-body .quizx-hero h1{ order:3; position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .play-body .quizx-hero-subtitle{ order:4; } .play-body .quizx-hero-desc{ order:5; } .play-body .quizx-hero-ctas{ order:6; } .play-body .quiz-badges{ order:7; } } /* ---------- Héros illustré (personnage) — Quiz uniquement, écran large. Aucun markup ajouté : image posée en ::before sur .quizx-hero déjà rendu, le texte se décale simplement pour lui laisser la place. ---------- */ @media (min-width:860px){ .play-body .quizx-hero{ position:relative; max-width:none; text-align:left; padding-left:clamp(200px,30%,360px); min-height:380px; display:flex; flex-direction:column; justify-content:center; } .play-body .quizx-hero::before{ content:''; position:absolute; left:-12px; bottom:0; height:100%; max-height:340px; width:auto; aspect-ratio:832/1179; background-image:url('../img/play/hero-character.png'); background-size:contain; background-repeat:no-repeat; background-position:bottom left; filter: drop-shadow(0 22px 26px rgba(0,0,0,.5)); z-index:1; pointer-events:auto; transition: transform .4s cubic-bezier(.25,.46,.45,.94); } .play-body .quizx-hero::before:hover{ transform: translateY(-6px) rotate(-1.5deg) scale(1.02); } .play-body .quizx-hero-desc{ margin-left:0; margin-right:0; } .play-body .quizx-hero-ctas{ justify-content:flex-start; } .play-body .quiz-badges{ justify-content:flex-start; } } @media (min-width:860px) and (prefers-reduced-motion: reduce){ .play-body .quizx-hero::before{ transition:none; } .play-body .quizx-hero::before:hover{ transform:none; } } /* ---------- Hiérarchie organique (casse la grille uniforme) ---------- Toujours les mêmes 4 stat-cards / le même bloc "à la une" déjà rendus par le template — seule leur disposition change, tailles inégales et léger décalage plutôt qu'une grille parfaitement régulière. */ .play-body .quizx-stats{ grid-template-columns: repeat(6, 1fr); align-items: end; } .play-body .quizx-stat-card:nth-child(1){ grid-column: span 2; transform: translateY(-8px); } .play-body .quizx-stat-card:nth-child(2){ grid-column: span 1; } .play-body .quizx-stat-card:nth-child(3){ grid-column: span 2; transform: translateY(6px); } .play-body .quizx-stat-card:nth-child(4){ grid-column: span 1; } @media (max-width:760px){ .play-body .quizx-stats{ grid-template-columns: repeat(2,1fr); } .play-body .quizx-stat-card{ grid-column: span 1 !important; transform:none !important; } } .play-body .quizx-featured{ margin-top:-14px; margin-bottom:32px; transform: rotate(-.3deg); } .play-body .quizx-featured:hover{ transform: rotate(-.3deg) perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-2px); } /* ---------- Ouverture de pack — flash à l'ouverture (déclenché par la classe .is-open déjà posée par pack-opening.js, aucune modif de ce fichier) ---------- */ .play-body .pack-opening-modal.is-open .pack-opening-panel::before{ content:''; position:absolute; inset:0; border-radius:inherit; z-index:5; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 65%); animation: play-pack-flash .5s ease-out; pointer-events:none; } @keyframes play-pack-flash{ from{ opacity:1; } to{ opacity:0; } } /* ---------- Réponse globale : pression/rebond (classe posée par play-feel.js) ---------- */ .play-pressed{ transform: scale(.96) !important; transition: transform .1s ease-out; } /* ---------- Respiration douce des cartes (inventaire/collection) ---------- */ @keyframes play-card-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.015); } } .play-body .shop-card-media, .play-body .pack-reveal-card img{ animation: play-card-breathe 4.5s ease-in-out infinite; } /* ---------- Halo des raretés hautes, uniquement dans Play ---------- */ @keyframes play-halo-pulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.25); } } .play-body .rarity-legendary, .play-body .rarity-mythic{ animation: play-halo-pulse 2.4s ease-in-out infinite; } /* ---------- Compteur qui roule (classe posée par play-feel.js pendant l'animation) ---------- */ .play-counter-rolling{ display:inline-block; } /* ---------- Panneaux façon jeu vidéo (pas de nouveau markup — ciblage direct des cartes déjà rendues par shop.js/collection.js/quiz.js/ pack-opening.js/dream-team.js). Profondeur, verre subtil, bordure lumineuse pulsée, tilt 3D au survol (--tilt-x/--tilt-y posés par play-feel.js). Le sélecteur composé ".play-body X" est déjà plus spécifique que "X" seul dans style.css — pas besoin de !important. ---------- */ .play-body .shop-card, .play-body .quiz-rank-card, .play-body .quizx-stat-card, .play-body .quizx-featured, .play-body .dreamteam-picker-card, .play-body .quizx-sidebar-card, .play-body .pack-reveal-card{ background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(184,144,62,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 40px -22px rgba(0,0,0,.7), 0 0 22px -10px rgba(184,144,62,.35); transition: transform .32s cubic-bezier(.25,.46,.45,.94), box-shadow .32s ease, border-color .3s ease; animation: play-panel-border-glow 3.6s ease-in-out infinite; transform: perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(0); } @keyframes play-panel-border-glow{ 0%,100%{ border-color: rgba(184,144,62,.32); } 50%{ border-color: rgba(184,144,62,.68); } } .play-body .shop-card:hover, .play-body .quiz-rank-card:hover, .play-body .quizx-stat-card:hover, .play-body .quizx-featured:hover, .play-body .dreamteam-picker-card:hover, .play-body .quizx-sidebar-card:hover, .play-body .pack-reveal-card:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -22px rgba(0,0,0,.8), 0 0 34px -6px rgba(184,144,62,.55); } .play-body .quizx-featured:hover{ transform: perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-2px); } /* ---------- Boutique & Collection — texte gris/sombre illisible sur fond sombre (retour : "beaucoup de texte écrit en gris... pas visible"). .shop-card-body h3/p n'avaient aucune couleur adaptée au fond verre sombre de .shop-card (h3 héritait du var(--ink) de body, p était en var(--ink-soft)) ; .matches-search/.filter-tab/.matches-loading flottent directement sur le fond sombre sans carte, mêmes classes var(--ink)/var(--ink-soft) prévues pour matchs.html (page claire). .shop-card-rating/.shop-card-rarity/.shop-login-gate ont leur propre fond clair opaque et restent corrects tels quels, pas touchés ici. ---------- */ .play-body .shop-card-body h3{ color:#F2EBDC; } .play-body .shop-card-body p{ color: rgba(242,235,220,.65); } .play-body .shop-card-status{ color: rgba(242,235,220,.75); } .play-body .shop-buy-btn:disabled{ background: rgba(255,255,255,.06); border-color: rgba(184,144,62,.35); color: rgba(242,235,220,.6); } .play-body .shop-section-intro{ color: rgba(242,235,220,.72); } /* .shop-balance (badge "Atlas Points" du header Boutique) a son propre fond clair (var(--illus-bg)) mais héritait du texte crème par défaut de .play-main — texte quasi invisible sur fond clair. Même traitement que .quiz-timer/.shop-card-rating : texte sombre sur ce chip clair. */ .play-body .shop-balance{ color: var(--ink); } .play-body .matches-search{ color: rgba(242,235,220,.6); border-bottom-color: rgba(184,144,62,.35); } .play-body .matches-search:focus-within{ border-bottom-color: var(--gold); color: var(--gold); } .play-body .matches-search input{ color:#F2EBDC; } .play-body .matches-search input::placeholder{ color: rgba(242,235,220,.45); } .play-body .filter-tab{ color: rgba(242,235,220,.65); } .play-body .filter-tab:hover{ color: var(--gold); } .play-body .filter-tab.is-active{ background: rgba(184,144,62,.18); color: var(--gold); } /* ---------- Mobile : scroll horizontal sur la page Collection (retour utilisateur). Cause réelle : .matches-search et .filter-tabs (ce dernier passe en flex-wrap:nowrap + overflow-x:auto sous 640px, voir style.css) sont des enfants flex de .matches-search-row sans min-width:0 — par défaut un enfant flex ne rétrécit jamais sous la largeur de son contenu (ici tous les onglets de rareté sur une seule ligne), donc overflow-x:auto ne peut jamais s'activer : le contenu pousse toute la page plus large que l'écran au lieu de scroller uniquement à l'intérieur du bandeau d'onglets. min-width:0 permet à ces enfants de vraiment se contraindre à la largeur disponible. Scopé à .play-body : matchs.html (même classes, page claire séparée) n'est pas concerné. ---------- */ @media (max-width:640px){ .play-body .matches-search-row{ flex-direction:column; align-items:stretch; gap:12px; } .play-body .matches-search{ min-width:0; max-width:100%; } .play-body .filter-tabs{ min-width:0; max-width:100%; } } .play-body .matches-loading, .play-body .matches-empty{ color: rgba(242,235,220,.65); } .play-body .quizx-featured-tag{ color:#ff8f8f; } .play-body .quizx-featured-body h2{ color:#F2EBDC; } .play-body .quizx-featured-body p{ color: rgba(242,235,220,.68); } .play-body .quiz-rank-progress-label{ color: rgba(242,235,220,.7); } /* ---------- Cartes de rang Quiz — photo plein cadre, pas un panneau de verre (retour utilisateur : "on dirait des cartes PDF"). Même markup que rendu par le template (aucune modif de quiz.js) — juste une redistribution en superposition : photo en fond, dégradé de lisibilité, texte ancré en bas. Remplace (ne cumule pas) le fond verre générique ci-dessus pour spécifiquement .quiz-rank-card. ---------- */ .play-body .quiz-rank-card{ background:none; backdrop-filter:none; -webkit-backdrop-filter:none; display:flex; flex-direction:column; justify-content:flex-end; min-height:300px; padding:0; } .play-body .quizx-quiz-card-image{ position:absolute; inset:0; aspect-ratio:unset; margin:0; border:none; z-index:0; } .play-body .quiz-rank-card::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; background: linear-gradient(to top, rgba(8,6,4,.92) 0%, rgba(8,6,4,.55) 18%, rgba(8,6,4,.12) 38%, transparent 55%); } .play-body .quizx-quiz-card-body, .play-body .quiz-rank-status{ position:relative; z-index:2; } .play-body .quizx-quiz-card-body{ padding:16px 18px 0; } .play-body .quiz-rank-name{ color:#fff; } .play-body .quiz-rank-desc{ color: rgba(242,235,220,.78); } .play-body .quizx-quiz-card-meta span{ background: rgba(255,255,255,.14); color:#fff; } .play-body .quiz-rank-progress-track{ background: rgba(255,255,255,.2); } /* ---------- Mobile : badges superposés au titre/description (retour utilisateur). Cause réelle : .quiz-rank-status a margin-top:auto (style.css) qui absorbe tout l'espace libre du flex avant que justify-content:flex-end n'agisse — le bloc titre/desc/badges se retrouvait donc collé en HAUT de la carte, dans la zone du dégradé encore quasi transparente, posé directement sur la photo brute plutôt que sur le fond assombri prévu en bas. Fix : neutraliser cet auto-margin sur mobile pour que le bloc texte s'ancre réellement en bas (comme prévu), + dégradé renforcé pour garantir la lisibilité même avec un titre/description sur 2 lignes. Desktop non touché. ---------- */ @media (max-width:640px){ .play-body .quiz-rank-status{ margin-top:0; } .play-body .quiz-rank-card{ min-height:340px; } .play-body .quiz-rank-card::before{ background: linear-gradient(to top, rgba(8,6,4,.96) 0%, rgba(8,6,4,.9) 32%, rgba(8,6,4,.4) 58%, transparent 80%); } .play-body .quizx-quiz-card-meta{ gap:6px; } .play-body .quizx-quiz-card-meta span{ font-size:9.5px; padding:3px 7px; } } /* ---------- Rang verrouillé — la photo doit rester colorée (retour utilisateur : "ils sont toujours grisés" après un premier essai trop sombre). Le verrouillage se lit désormais via le badge cadenas et le bouton "Verrouillé" (rendus bien visibles ci-dessous), pas via un filtre qui écrase l'image. Seuls la bordure or pulsée et le tilt du système de panneau générique sont coupés (une carte bloquée ne doit pas paraître aussi "vivante" qu'une carte jouable). ---------- */ .play-body .quiz-rank-card.is-locked{ filter: saturate(.9) brightness(.8); opacity: 1; animation: none; border-color: rgba(242,235,220,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 26px -18px rgba(0,0,0,.7); cursor: not-allowed; } .play-body .quiz-rank-card.is-locked:hover{ transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 26px -18px rgba(0,0,0,.7); } .play-body .quiz-rank-badge-state{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; font-size:15px; background: rgba(8,6,4,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(242,235,220,.22); } .play-body .quiz-rank-badge-state:empty{ display:none; } .play-body .quiz-rank-play:disabled{ background: rgba(8,6,4,.55); color: rgba(242,235,220,.75); border: 1px solid rgba(242,235,220,.2); opacity:1; } /* ---------- Stats — badge circulaire coloré par nature de statistique (repère visuel rapide, comme les jeux de référence cités) — posé en ::before pur CSS, aucun markup ajouté dans le template. ---------- */ .play-body .quizx-stat-card{ position:relative; padding-top:46px; } .play-body .quizx-stat-card::before{ content:'🏆'; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; background: var(--red); box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); } .play-body .quizx-stat-card:nth-child(2)::before{ content:'⭐'; background:#9B6BD9; } .play-body .quizx-stat-card:nth-child(3)::before{ content:'📖'; background: var(--gold); } .play-body .quizx-stat-card:nth-child(4)::before{ content:'📈'; background:#4FAE6E; } .play-body .quizx-stat-value{ color:#F2EBDC; } .play-body .quizx-stat-label{ color: rgba(242,235,220,.6); } /* ---------- Barre latérale (Ma progression / Classement) — même panneau verre que le reste (retour utilisateur : "ne doivent plus rester blanches comme des cartes PDF"), icône de repère par carte, texte reculé vers les tons clairs pour rester lisible sur fond sombre. ---------- */ .play-body .quizx-sidebar-card{ padding:22px; } .play-body .quizx-sidebar-title{ color:#F2EBDC; display:flex; align-items:center; gap:8px; } .play-body .quizx-sidebar-title::before{ width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; background: var(--red); box-shadow: 0 4px 10px -4px rgba(0,0,0,.6); } #quizx-my-stats .quizx-sidebar-title::before{ content:'📈'; } #quiz-leaderboard-section .quizx-sidebar-title::before{ content:'🏆'; background: var(--gold); } .play-body .quizx-sidebar-subtitle, .play-body .quizx-sidebar-empty{ color: rgba(242,235,220,.72); } .play-body .quizx-my-rank-icon{ background: rgba(255,255,255,.08); border:1px solid rgba(184,144,62,.3); } .play-body .quizx-my-rank-name{ color:#F2EBDC; } .play-body .quizx-my-rank-sub{ color: rgba(242,235,220,.55); } .play-body .quizx-my-progress-track{ background: rgba(255,255,255,.14); } /* .quiz-leaderboard-* est repris à 3 endroits dans Play (classement sidebar Quiz Solo, classement duel en direct, classement Dream Team) — partout sur fond sombre, donc scopé large à .play-body plutôt que dupliqué par section. */ .play-body .quiz-leaderboard-row{ background: rgba(255,255,255,.05); border:1px solid rgba(184,144,62,.2); transition: background .2s ease, border-color .2s ease, transform .2s ease; } .play-body .quiz-leaderboard-row:hover{ background: rgba(255,255,255,.09); border-color: rgba(184,144,62,.4); transform: translateX(2px); } .play-body .quiz-leaderboard-rank{ background: rgba(255,255,255,.1); color: rgba(242,235,220,.75); } .play-body .quiz-leaderboard-row:nth-child(1) .quiz-leaderboard-rank{ background: var(--gold); color:#241a04; } .play-body .quiz-leaderboard-row:nth-child(2) .quiz-leaderboard-rank{ background:#C7CDD6; color:#20242b; } .play-body .quiz-leaderboard-row:nth-child(3) .quiz-leaderboard-rank{ background:#C88A4E; color:#2a1706; } .play-body .quiz-leaderboard-name{ color:#F2EBDC; } /* .quiz-leaderboard-points reste en var(--red) (#B61C1C) — trop sombre sur fond quasi noir, remonté en rouge clair comme .arena-live-badge. */ .play-body .quiz-leaderboard-points{ color:#ff8f8f; } .play-body .quiz-leaderboard-row.is-me{ border-color: var(--gold); background: rgba(184,144,62,.14); } .play-body .quiz-leaderboard-row.is-me .quiz-leaderboard-name::after{ content:'TOI'; margin-left:6px; font-family: var(--font-nav); font-size:8.5px; font-weight:800; color:#1a1207; background: var(--gold); padding:2px 6px; border-radius:10px; vertical-align:middle; } /* ---------- Duel : thèmes, historique, activité récente — même panneau que le reste (retour utilisateur : "tout ca ne doit plus rester blanc"), texte secondaire remonté en opacité (retour : "le petit texte en gris n'est pas assez visible"). ---------- */ .play-body .quiz-duel-intro, .play-body .quizx-section-intro{ color: rgba(242,235,220,.72); } .play-body .quiz-duel-mode-tab{ color: rgba(242,235,220,.6); } .play-body .quiz-duel-mode-tab.active{ color: var(--red); } .play-body .quiz-duel-picker-row select, .play-body .quiz-duel-link-row input{ background: rgba(255,255,255,.06); color:#F2EBDC; border: 1.5px solid rgba(184,144,62,.35); } .play-body .quiz-duel-picker-row select option{ background:#1a1613; color:#F2EBDC; } .play-body .quiz-duel-history-title{ color:#F2EBDC; } .play-body .quiz-duel-history-empty{ color: rgba(242,235,220,.72); } /* ---------- Écran de jeu Duel (retour : "adapter police et couleurs pour être clairement visibles sur fond sombre") — .quiz-duel-scoreboard, .quiz-duel-vs, #quiz-duel-opponent-score et .quiz-player-meta sont repris de l'écran Quiz Solo (texte var(--ink)/var(--ink-soft) prévu pour une page claire) mais flottent ici directement sur le fond sombre de l'arène, sans carte derrière — texte quasi invisible pendant une vraie partie. Scopé à .quiz-duel-player uniquement : .quiz-player-meta reste inchangé sur l'écran Quiz Solo (fond clair, texte sombre correct là-bas). */ .play-body .quiz-duel-scoreboard{ color:#F2EBDC; } .play-body .quiz-duel-vs{ color: rgba(242,235,220,.6); } .play-body #quiz-duel-opponent-score{ color: rgba(242,235,220,.6); } .play-body .quiz-duel-player .quiz-player-meta{ color:#F2EBDC; } .play-body .quizx-category-card{ background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(184,144,62,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 26px -16px rgba(0,0,0,.6); transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease; } .play-body .quizx-category-card:hover{ transform: translateY(-3px); border-color: rgba(184,144,62,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 20px 36px -16px rgba(0,0,0,.7), 0 0 24px -8px rgba(184,144,62,.5); } .play-body .quizx-category-name{ color: rgba(242,235,220,.85); } .play-body .quiz-duel-history-row, .play-body .quizx-recent-row{ background: rgba(255,255,255,.05); border:1px solid rgba(184,144,62,.2); transition: background .2s ease, border-color .2s ease, transform .2s ease; } .play-body .quiz-duel-history-row:hover, .play-body .quizx-recent-row:hover{ background: rgba(255,255,255,.09); border-color: rgba(184,144,62,.4); transform: translateX(2px); } .play-body .quizx-recent-players{ color:#F2EBDC; } .play-body .quizx-recent-vs, .play-body .quizx-recent-topic{ color: rgba(242,235,220,.65); } .play-body .quiz-duel-history-victoire{ background: rgba(79,174,110,.18); color:#7fd99b; } .play-body .quiz-duel-history-défaite{ background: rgba(193,18,31,.18); color:#ff8f8f; } .play-body .quiz-duel-history-égalité{ background: rgba(255,255,255,.1); color: rgba(242,235,220,.7); } /* ================================================================ DREAM TEAM — refonte "Ultimate Team AAA" (onglet Play uniquement) Tout ce bloc est scoppé à #dreamteam-page / .dreamteam-* : ne redéfinit jamais .shop-card / .quiz-leaderboard-row eux-mêmes (utilisés ailleurs dans Play), seulement des règles composées .dreamteam-page X, comme fait pour Quiz/Boutique plus haut. ================================================================ */ /* ---------- Bouton premium (Partager) ---------- */ .play-body #dreamteam-page .quiz-btn-primary{ border-radius:12px; padding:11px 22px; background: linear-gradient(135deg, var(--red), var(--red-dark)); box-shadow: 0 10px 22px -10px rgba(193,18,31,.7), 0 0 0 1px rgba(184,144,62,.3); transition: transform .2s var(--ease), box-shadow .2s ease; } .play-body #dreamteam-page .quiz-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(193,18,31,.75), 0 0 22px -4px rgba(184,144,62,.55); } .play-body .dreamteam-own-link{ color: var(--gold); font-weight:700; transition: color .2s ease; } .play-body .dreamteam-own-link:hover{ color:#F2EBDC; } .play-body .dreamteam-formation{ color: rgba(242,235,220,.6); } .play-body #dreamteam-page .grid-title{ color:#F2EBDC; } .play-body .dreamteam-empty-note{ color: rgba(242,235,220,.68); } /* ---------- Terrain : bandeau LED + lumière volumétrique ---------- */ .play-body .dreamteam-field-wrap{ position:relative; padding-top:8px; margin-bottom:26px; z-index:0; } .play-body .dreamteam-field-wrap::before{ content:''; position:absolute; left:-8%; right:-8%; top:-6%; height:65%; background: radial-gradient(45% 65% at 15% 0%, rgba(184,144,62,.22), transparent 72%), radial-gradient(45% 65% at 85% 0%, rgba(184,144,62,.22), transparent 72%); pointer-events:none; z-index:0; animation: dt-volumetric-pulse 6s ease-in-out infinite; } @keyframes dt-volumetric-pulse{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } } .play-body .dreamteam-led-strip{ position:relative; z-index:1; overflow:hidden; height:26px; border-radius:7px; margin-bottom:18px; max-width:560px; margin-inline:auto; background: linear-gradient(90deg, rgba(193,18,31,.28), rgba(184,144,62,.4), rgba(193,18,31,.28)); border:1px solid rgba(184,144,62,.4); box-shadow: 0 0 16px -4px rgba(184,144,62,.55), inset 0 0 10px rgba(0,0,0,.45); } .play-body .dreamteam-led-strip-track{ position:absolute; inset:0; display:flex; align-items:center; white-space:nowrap; animation: dt-led-scroll 16s linear infinite; font-family: var(--font-nav); font-size:11px; font-weight:800; letter-spacing:.16em; color:#F2EBDC; text-shadow: 0 0 8px rgba(184,144,62,.85); } .play-body .dreamteam-led-strip-track span{ padding:0 22px; } @keyframes dt-led-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ---------- Panneau de stats d'équipe ---------- */ .play-body .dreamteam-stats-panel{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(6,1fr); gap:10px; max-width:640px; margin:0 auto 22px; } .play-body .dreamteam-stat{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 6px; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(184,144,62,.3); border-radius:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 26px -18px rgba(0,0,0,.7); transition: border-color .3s ease, box-shadow .3s ease; } .play-body .dreamteam-stat-value{ font-family: var(--font-display); font-size:19px; font-weight:700; color:#F2EBDC; font-variant-numeric: tabular-nums; } .play-body .dreamteam-stat-label{ font-family: var(--font-nav); font-size:9px; text-transform:uppercase; letter-spacing:.05em; color: rgba(242,235,220,.6); text-align:center; } .play-body .dreamteam-stat-value.is-chem-low{ color:#ff8f8f; } .play-body .dreamteam-stat-value.is-chem-mid{ color:#f2b866; } .play-body .dreamteam-stat-value.is-chem-high{ color:#7fd99b; } @media (max-width:700px){ .play-body .dreamteam-stats-panel{ grid-template-columns:repeat(3,1fr); } } /* ---------- Terrain — vraies photos premium fournies (desktop 16:9 / mobile 9:16), pas un simple dégradé plat (retour utilisateur : "le terrain paraît plat"). background-size:contain + aspect-ratio calé exactement sur l'image affichée à chaque breakpoint => jamais de recadrage ni d'étirement, l'image reste toujours entière et centrée. */ .play-body .dreamteam-pitch{ position:relative; z-index:1; max-width:520px; margin-inline:auto; border-radius:22px; aspect-ratio: 941/1672; background: url('../img/play/dreamteam-pitch-mobile.png') center/contain no-repeat, #0c1a10; box-shadow: 0 34px 64px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(184,144,62,.35), 0 0 44px -12px rgba(184,144,62,.4); animation: dt-pitch-breathe 7s ease-in-out infinite; } @keyframes dt-pitch-breathe{ 0%,100%{ box-shadow: 0 34px 64px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(184,144,62,.35), 0 0 44px -12px rgba(184,144,62,.4); } 50%{ box-shadow: 0 34px 64px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(184,144,62,.5), 0 0 58px -10px rgba(184,144,62,.6); } } @media (min-width:860px){ .play-body .dreamteam-field-wrap{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; } .play-body .dreamteam-field-wrap::before{ left:0; right:0; } .play-body .dreamteam-pitch{ width:80vw; max-width:1280px; margin-inline:auto; aspect-ratio:1672/941; background-image: url('../img/play/dreamteam-pitch-desktop.png'); } .play-body .dreamteam-slot{ width:clamp(60px, 6vw, 92px); } } .play-body .dreamteam-pitch::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:1; border-radius:inherit; background: radial-gradient(120% 55% at 50% 0%, rgba(255,244,214,.18), transparent 55%), radial-gradient(140% 80% at 50% 122%, rgba(0,0,0,.5), transparent 62%), linear-gradient(180deg, rgba(0,0,0,.26) 0%, transparent 16%, transparent 84%, rgba(0,0,0,.26) 100%); animation: dt-vignette-pulse 8s ease-in-out infinite; } @keyframes dt-vignette-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.82; } } .play-body .dreamteam-pitch::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:20%; pointer-events:none; z-index:1; background: linear-gradient(0deg, rgba(230,240,220,.14), transparent); animation: dt-mist-drift 9s ease-in-out infinite; } @keyframes dt-mist-drift{ 0%,100%{ opacity:.65; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-4%); } } /* Léger balayage de lumière + scintillement d'herbe — très discret */ .play-body .dreamteam-pitch-sweep{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; border-radius:inherit; } .play-body .dreamteam-pitch-sweep::before{ content:''; position:absolute; top:-20%; bottom:-20%; left:-30%; width:22%; background: linear-gradient(100deg, transparent, rgba(255,244,214,.07) 45%, rgba(255,244,214,.12) 50%, rgba(255,244,214,.07) 55%, transparent); animation: dt-light-sweep 11s ease-in-out infinite; } @keyframes dt-light-sweep{ 0%{ transform: translateX(0); } 55%,100%{ transform: translateX(560%); } } .play-body #dreamteam-particles-canvas{ position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; } .play-body .dreamteam-chemistry-svg{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:visible; } .play-body .dreamteam-chemistry-link{ stroke-width:.6; fill:none; vector-effect:non-scaling-stroke; stroke-dasharray:2.2 1.6; opacity:.9; animation: dt-chem-flow 1.4s linear infinite; } .play-body .dreamteam-chemistry-link.is-chem-low{ stroke:url(#dt-chem-low); filter: drop-shadow(0 0 3px rgba(255,90,90,.7)); } .play-body .dreamteam-chemistry-link.is-chem-mid{ stroke:url(#dt-chem-mid); filter: drop-shadow(0 0 3px rgba(184,144,62,.7)); } .play-body .dreamteam-chemistry-link.is-chem-high{ stroke:url(#dt-chem-high); filter: drop-shadow(0 0 3px rgba(80,210,130,.7)); } @keyframes dt-chem-flow{ to{ stroke-dashoffset:-7.6; } } /* ---------- Emplacements joueurs — socle premium ---------- */ .play-body .dreamteam-slot{ z-index:4; width:60px; } .play-body .dreamteam-slot::before{ content:''; position:absolute; left:50%; top:18px; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; pointer-events:none; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.32), rgba(184,144,62,.12) 55%, transparent 72%); border:2px solid rgba(205,205,215,.5); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 4px 10px -2px rgba(0,0,0,.6), 0 0 18px -4px rgba(184,144,62,.5); animation: dt-socket-breathe 3.2s ease-in-out infinite; } @keyframes dt-socket-breathe{ 0%,100%{ box-shadow:0 0 0 1px rgba(0,0,0,.4),0 4px 10px -2px rgba(0,0,0,.6),0 0 18px -4px rgba(184,144,62,.45); } 50%{ box-shadow:0 0 0 1px rgba(0,0,0,.4),0 4px 10px -2px rgba(0,0,0,.6),0 0 26px -2px rgba(184,144,62,.8); } } .play-body .dreamteam-slot::after{ content:''; position:absolute; left:50%; top:18px; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; pointer-events:none; mix-blend-mode:screen; background: conic-gradient(from 0deg, transparent 0deg, rgba(255,224,150,.85) 14deg, transparent 42deg, transparent 360deg); animation: dt-socket-spin 4.2s linear infinite; } @keyframes dt-socket-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } } .play-body .dreamteam-slot.is-filled::before{ border-color: rgba(255,214,120,.85); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(184,144,62,.3) 55%, transparent 72%); } .play-body .dreamteam-slot-plus{ position:relative; z-index:1; width:44px; height:44px; border-radius:50%; border:2px dashed rgba(184,144,62,.55); background: rgba(8,6,4,.4); backdrop-filter: blur(2px); transition: border-color .3s ease, background .3s ease; } .play-body .dreamteam-slot-label{ color: rgba(242,235,220,.85); } .play-body .dreamteam-slot-name{ color:#F2EBDC; } /* Hologramme Atlas Rising quand le slot est vide */ .play-body .dreamteam-slot:not(.is-filled) .dreamteam-slot-plus{ color:transparent; font-size:0; border-color: rgba(120,220,255,.55); background: rgba(18,45,58,.42); animation: dt-holo-flicker 2.6s ease-in-out infinite; } .play-body .dreamteam-slot:not(.is-filled) .dreamteam-slot-plus::before{ content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; background: rgba(150,232,255,.9); box-shadow:0 0 7px rgba(150,232,255,.85); } .play-body .dreamteam-slot:not(.is-filled) .dreamteam-slot-plus::after{ content:''; position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:22px; height:12px; border-radius:12px 12px 0 0; background: rgba(150,232,255,.7); box-shadow:0 0 9px rgba(150,232,255,.65); } @keyframes dt-holo-flicker{ 0%,100%{ opacity:.9; } 45%{ opacity:.5; } 50%{ opacity:1; } 78%{ opacity:.6; } } .play-body .dreamteam-slot img{ position:relative; z-index:1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(184,144,62,.5)); transition: transform .25s var(--ease); } .play-body .dreamteam-slot.is-filled:hover img{ transform: scale(1.08) translateY(-2px); } .play-body .dreamteam-slot.is-editable{ cursor:pointer; } /* Terrain desktop en paysage (dream169.png) : les buts sont à gauche/ droite, pas en haut/bas comme sur le terrain portrait mobile — mêmes 11 postes, même formation, seulement re-projetés à 90° pour rester alignés avec les buts/surfaces du nouveau visuel (décision validée : ne modifie aucune donnée, uniquement cette présentation CSS desktop). Coordonnées mobiles (style.css) inchangées. */ @media (min-width:860px){ .play-body .dreamteam-slot[data-slot="GK"]{ left:8%; top:50%; } .play-body .dreamteam-slot[data-slot="LB"]{ left:25%; top:18%; } .play-body .dreamteam-slot[data-slot="CB1"]{ left:18%; top:38%; } .play-body .dreamteam-slot[data-slot="CB2"]{ left:18%; top:62%; } .play-body .dreamteam-slot[data-slot="RB"]{ left:25%; top:82%; } .play-body .dreamteam-slot[data-slot="CM1"]{ left:50%; top:25%; } .play-body .dreamteam-slot[data-slot="CM2"]{ left:50%; top:50%; } .play-body .dreamteam-slot[data-slot="CM3"]{ left:50%; top:75%; } .play-body .dreamteam-slot[data-slot="LW"]{ left:76%; top:18%; } .play-body .dreamteam-slot[data-slot="ST"]{ left:90%; top:50%; } .play-body .dreamteam-slot[data-slot="RW"]{ left:76%; top:82%; } } /* Retour visuel pendant un glisser-déposer carte -> slot */ .play-body .dreamteam-slot.is-accepting::before{ border-color: var(--gold); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 4px 10px -2px rgba(0,0,0,.6), 0 0 22px 0 rgba(184,144,62,.9); } .play-body .dreamteam-slot.is-rejecting{ opacity:.35; } .play-body .dreamteam-slot.is-drop-target::before{ transform: translate(-50%,-50%) scale(1.15); } .dreamteam-drag-ghost{ transition:none; } /* ---------- Carrousel de collection ---------- */ .play-body .dreamteam-collection-block{ margin-top:8px; } .play-body .dreamteam-carousel{ display:flex; gap:14px; overflow-x:auto; padding:10px 4px 20px; scroll-snap-type:x proximity; cursor:grab; -webkit-overflow-scrolling:touch; } .play-body .dreamteam-carousel.is-dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; } .play-body .dreamteam-carousel::-webkit-scrollbar{ height:6px; } .play-body .dreamteam-carousel::-webkit-scrollbar-track{ background:transparent; } .play-body .dreamteam-carousel::-webkit-scrollbar-thumb{ background: rgba(184,144,62,.4); border-radius:3px; } .play-body .dreamteam-collection-card{ flex:0 0 130px; scroll-snap-align:start; cursor:grab; position:relative; } .play-body .dreamteam-collection-card:active{ cursor:grabbing; } .play-body .dreamteam-collection-card:hover{ transform: perspective(700px) translateY(-8px); } .play-body .dreamteam-collection-card.is-dragging-card{ opacity:.45; } .play-body .dreamteam-collection-empty{ color: rgba(242,235,220,.65); font-family: var(--font-body); font-size:13.5px; } /* Aperçu au survol — nom / poste / rareté / note / sélection réels (cards.json n'a ni description ni sous-stats détaillées : on n'invente rien). */ .play-body .dreamteam-card-preview{ position:absolute; left:0; right:0; bottom:0; z-index:5; border-radius:0 0 12px 12px; padding:9px 10px 10px; background: linear-gradient(0deg, rgba(8,6,4,.97), rgba(8,6,4,.85) 65%, transparent); opacity:0; transform:translateY(6px); pointer-events:none; transition: opacity .2s ease, transform .2s ease; } .play-body .dreamteam-collection-card:hover .dreamteam-card-preview, .play-body .dreamteam-collection-card:focus-within .dreamteam-card-preview{ opacity:1; transform:translateY(0); } .play-body .dreamteam-card-preview-name{ font-family: var(--font-display); font-size:13px; color:#F2EBDC; display:block; margin-bottom:3px; } .play-body .dreamteam-card-preview-meta{ display:flex; flex-wrap:wrap; gap:5px; font-family: var(--font-nav); font-size:9px; text-transform:uppercase; letter-spacing:.03em; color: rgba(242,235,220,.72); } .play-body .dreamteam-card-preview-meta span{ background: rgba(255,255,255,.12); padding:2px 7px; border-radius:20px; } @media (max-width:700px){ .play-body .dreamteam-collection-card{ flex-basis:110px; } } /* Micro-animation au clic (bref rebond) + apparition d'une carte nouvellement assignée (fondu + léger déplacement vers le haut + burst doré géré en JS par dreamteam-feel.js) — classes ajoutées/ retirées ponctuellement par dream-team.js, jamais permanentes. */ .play-body .dreamteam-collection-card.is-clicked, .play-body .dreamteam-slot.is-clicked{ animation: dt-click-bounce .32s var(--ease); } @keyframes dt-click-bounce{ 0%{ transform:scale(1); } 40%{ transform:scale(.94); } 100%{ transform:scale(1); } } .play-body .dreamteam-slot.is-just-filled img{ animation: dt-card-enter .5s var(--ease); } @keyframes dt-card-enter{ 0%{ opacity:0; transform: translateY(10px) scale(.9); } 100%{ opacity:1; transform: translateY(0) scale(1); } } /* ---------- Carte Coach (langage visuel identique aux cartes joueur) ---------- */ .play-body .dreamteam-coach-block{ display:flex; justify-content:center; margin:26px 0 34px; } .play-body .dreamteam-coach-card{ width:180px; padding:0; border:none; cursor:pointer; font-family:inherit; text-align:left; border-radius:16px; overflow:hidden; position:relative; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(184,144,62,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 40px -22px rgba(0,0,0,.7), 0 0 22px -10px rgba(184,144,62,.35); transition: transform .3s var(--ease), box-shadow .3s ease; } .play-body .dreamteam-coach-card:hover{ transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -22px rgba(0,0,0,.8), 0 0 34px -6px rgba(184,144,62,.55); } .play-body .dreamteam-coach-card.is-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:180px; border:2px dashed rgba(184,144,62,.45); background: rgba(8,6,4,.35); } .play-body .dreamteam-coach-placeholder-icon{ font-size:32px; opacity:.85; } .play-body .dreamteam-coach-placeholder-text{ font-family: var(--font-nav); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: rgba(242,235,220,.75); } .play-body .dreamteam-coach-media{ position:relative; aspect-ratio:3/4; overflow:hidden; } .play-body .dreamteam-coach-media img{ width:100%; height:100%; object-fit:cover; display:block; } .play-body .dreamteam-coach-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(8,6,4,.92), transparent 55%); } .play-body .dreamteam-coach-rarity{ position:absolute; top:8px; right:8px; z-index:1; font-size:9px; text-transform:uppercase; font-weight:700; padding:3px 8px; border-radius:20px; letter-spacing:.03em; } .play-body .dreamteam-coach-body{ padding:10px 12px 14px; } .play-body .dreamteam-coach-name{ font-family: var(--font-display); font-size:14px; color:#F2EBDC; margin:0 0 4px; } .play-body .dreamteam-coach-meta{ font-family: var(--font-nav); font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; color: rgba(242,235,220,.65); display:flex; flex-wrap:wrap; gap:5px; } .play-body .dreamteam-coach-meta span{ background: rgba(255,255,255,.1); padding:2px 7px; border-radius:20px; } .play-body .dreamteam-coach-picker-meta{ font-family: var(--font-nav); font-size:10.5px; color: rgba(242,235,220,.65); margin:2px 0 0; } @media (prefers-reduced-motion: reduce){ .play-panel:not([hidden]){ animation:none; } .play-body .shop-card-media, .play-body .pack-reveal-card img{ animation:none; } .play-body .rarity-legendary, .play-body .rarity-mythic{ animation:none; } .play-pressed{ transition:none; } .play-body .shop-card, .play-body .quiz-rank-card, .play-body .quizx-stat-card, .play-body .quizx-featured, .play-body .dreamteam-picker-card, .play-body .quizx-sidebar-card, .play-body .quizx-category-card, .play-body .pack-reveal-card{ animation:none; transform:none !important; } .play-body .dreamteam-field-wrap::before, .play-body .dreamteam-pitch, .play-body .dreamteam-pitch::before, .play-body .dreamteam-pitch::after, .play-body .dreamteam-pitch-sweep::before, .play-body .dreamteam-slot::before, .play-body .dreamteam-slot::after, .play-body .dreamteam-slot-plus, .play-body .dreamteam-led-strip-track, .play-body .dreamteam-chemistry-link, .play-body .dreamteam-slot.is-clicked, .play-body .dreamteam-collection-card.is-clicked, .play-body .dreamteam-slot.is-just-filled img{ animation:none; } .play-body .dreamteam-slot::after, .play-body .dreamteam-pitch-sweep{ display:none; } .play-body .dreamteam-collection-card:hover, .play-body .dreamteam-coach-card:hover, .play-body .dreamteam-slot.is-filled:hover img{ transform:none !important; } } /* ================================================================ DÉFI EN LIGNE — "Online Arena" (onglet Play uniquement) Tout ce bloc est scoppé aux classes .arena-* (préfixe dédié pour ne jamais entrer en collision avec .quizx-* de l'onglet Quiz Solo, même si les deux vivent déjà dans des panels séparés). Aucune redéfinition brute de .quiz-btn-primary/.quizx-sidebar-card/etc. utilisés ailleurs — uniquement des règles composées additives, comme partout ailleurs dans ce fichier. ================================================================ */ /* ---------- Hero ---------- Pas de photo (03/08/2026) : fond dessiné (dégradé + halo lumière stade + lignes de vitesse en surimpression) plutôt qu'une image de tunnel — ambiance sport/esport jeune, texte et les deux CTA restent le seul sujet de la scène. */ .play-body .arena-hero{ position:relative; margin-bottom:22px; min-height:230px; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 18% 18%, rgba(184,144,62,.4), transparent 46%), radial-gradient(circle at 88% 82%, rgba(193,18,31,.45), transparent 52%), linear-gradient(135deg, #1d0f0e 0%, #100a08 55%, #050403 100%); } .play-body .arena-hero::before{ content:''; position:absolute; inset:0; pointer-events:none; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 34px); mix-blend-mode: overlay; } .play-body .arena-hero-overlay{ position:relative; z-index:1; width:100%; padding:30px clamp(16px,4vw,40px) 32px; display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; } .play-body .arena-hero-label{ font-family: var(--font-nav); font-size:11px; font-weight:800; letter-spacing:.16em; color: var(--gold); text-transform:uppercase; } .play-body .arena-hero-desc{ font-family: var(--font-body); font-size:14px; color: rgba(242,235,220,.85); max-width:560px; margin:0 auto; } .play-body .arena-hero-ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; justify-content:center; } .play-body .arena-btn-primary{ background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius:12px; padding:11px 22px; box-shadow: 0 10px 22px -10px rgba(193,18,31,.7), 0 0 0 1px rgba(184,144,62,.3); transition: transform .2s var(--ease), box-shadow .2s ease; } .play-body .arena-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(193,18,31,.75), 0 0 22px -4px rgba(184,144,62,.55); } .play-body .arena-btn-secondary{ background: rgba(255,255,255,.08); border:1px solid rgba(184,144,62,.4); border-radius:12px; padding:10px 20px; color:#F2EBDC; transition: background .2s ease, border-color .2s ease, transform .2s var(--ease); } .play-body .arena-btn-secondary:hover{ background: rgba(255,255,255,.14); border-color: var(--gold); transform: translateY(-2px); } @media (max-width:640px){ .play-body .arena-hero{ min-height:190px; } .play-body .arena-hero-overlay{ padding:22px 16px 24px; } .play-body .arena-hero-desc{ font-size:12.5px; } } /* ---------- Stats réelles ---------- */ .play-body .arena-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; } .play-body .arena-stat-card{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 8px; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(184,144,62,.3); border-radius:14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 26px -18px rgba(0,0,0,.7); transition: border-color .3s ease, transform .25s var(--ease); } .play-body .arena-stat-card:hover{ transform: translateY(-3px); border-color: rgba(184,144,62,.55); } .play-body .arena-stat-icon{ font-size:18px; } .play-body .arena-stat-value{ font-family: var(--font-display); font-size:21px; font-weight:700; color:#F2EBDC; font-variant-numeric: tabular-nums; } .play-body .arena-stat-label{ font-family: var(--font-nav); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color: rgba(242,235,220,.6); text-align:center; } @media (max-width:700px){ .play-body .arena-stats{ grid-template-columns:repeat(2,1fr); } } /* ---------- Types de match ---------- */ .play-body .arena-modes{ margin:32px 0 8px; } .play-body .arena-mode-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .play-body .arena-mode-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:18px 16px; border-radius:14px; text-align:left; font-family:inherit; cursor:pointer; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(184,144,62,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 26px -18px rgba(0,0,0,.7); transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease; } .play-body .arena-mode-card.is-active:hover{ transform: translateY(-4px); border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 36px -16px rgba(0,0,0,.8), 0 0 26px -8px rgba(184,144,62,.55); } .play-body .arena-mode-card.is-soon{ cursor:not-allowed; opacity:.6; } .play-body .arena-mode-icon{ font-size:24px; } .play-body .arena-mode-name{ font-family: var(--font-display); font-size:15px; color:#F2EBDC; } .play-body .arena-mode-desc{ font-family: var(--font-body); font-size:11.5px; color: rgba(242,235,220,.65); } .play-body .arena-mode-soon-badge{ margin-top:4px; font-family: var(--font-nav); font-size:9px; text-transform:uppercase; letter-spacing:.04em; color: var(--gold); background: rgba(184,144,62,.15); border:1px solid rgba(184,144,62,.4); padding:3px 8px; border-radius:20px; } @media (max-width:860px){ .play-body .arena-mode-grid{ grid-template-columns:repeat(2,1fr); } } .play-body .arena-picker-card .quiz-btn-primary{ margin-top:2px; } /* ---------- Adversaires récents / Matchs en direct — carrousels et grilles premium, même langage visuel que les autres cartes .arena-* ---------- */ .play-body .arena-recent-opponents-block, .play-body .arena-live-block{ margin-top:34px; } .play-body .arena-carousel{ display:flex; gap:14px; overflow-x:auto; padding:8px 4px 14px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .play-body .arena-carousel::-webkit-scrollbar{ height:6px; } .play-body .arena-carousel::-webkit-scrollbar-thumb{ background: rgba(184,144,62,.4); border-radius:3px; } .play-body .arena-opponent-card{ flex:0 0 148px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 12px; border-radius:14px; text-align:center; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(184,144,62,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 26px -18px rgba(0,0,0,.7); transition: transform .25s var(--ease), border-color .25s ease; } .play-body .arena-opponent-card:hover{ transform: translateY(-6px); border-color: rgba(184,144,62,.55); } .play-body .arena-opponent-avatar{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; background: rgba(184,144,62,.15); border:2px solid rgba(184,144,62,.4); } .play-body .arena-opponent-name{ font-family: var(--font-display); font-size:13px; color:#F2EBDC; } .play-body .arena-opponent-meta{ font-family: var(--font-nav); font-size:9.5px; color: rgba(242,235,220,.6); text-transform:uppercase; letter-spacing:.03em; } .play-body .arena-opponent-rematch-btn{ margin-top:2px; font-family: var(--font-nav); font-size:10.5px; font-weight:700; color: var(--gold); background: rgba(184,144,62,.14); border:1px solid rgba(184,144,62,.4); border-radius:20px; padding:5px 12px; cursor:pointer; transition: background .2s ease, color .2s ease; } .play-body .arena-opponent-rematch-btn:hover{ background: var(--gold); color:#1a1207; } .play-body .arena-live-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; } .play-body .arena-live-card{ position:relative; padding:16px; border-radius:14px; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(184,144,62,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 26px -18px rgba(0,0,0,.7); transition: transform .25s var(--ease), border-color .25s ease; } .play-body .arena-live-card:hover{ transform: translateY(-4px); border-color: rgba(184,144,62,.55); } .play-body .arena-live-badge{ position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:5px; font-family: var(--font-nav); font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#ff8f8f; background: rgba(193,18,31,.18); border:1px solid rgba(193,18,31,.5); padding:3px 8px 3px 6px; border-radius:20px; } .play-body .arena-live-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:#ff4d4d; animation: arena-live-pulse 1.4s ease-in-out infinite; } @keyframes arena-live-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.7); } } .play-body .arena-live-players{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 6px; } .play-body .arena-live-player{ font-family: var(--font-display); font-size:13px; color:#F2EBDC; text-align:center; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .play-body .arena-live-score{ font-family: var(--font-nav); font-weight:800; font-size:16px; color: var(--gold); flex-shrink:0; padding:0 6px; } .play-body .arena-live-topic{ font-family: var(--font-nav); font-size:10px; text-transform:uppercase; letter-spacing:.03em; color: rgba(242,235,220,.6); text-align:center; } /* ---------- Tournoi / Récompenses (honnêtes, "Bientôt disponible") ---------- */ .play-body .arena-tournament-card{ position:relative; overflow:hidden; } .play-body .arena-tournament-card::before{ content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(80% 60% at 100% 0%, rgba(184,144,62,.18), transparent 60%); } .play-body .arena-tournament-badge{ display:inline-block; font-family: var(--font-nav); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--gold); background: rgba(184,144,62,.15); border:1px solid rgba(184,144,62,.4); padding:3px 9px; border-radius:20px; margin-bottom:8px; } .play-body .arena-rewards-soon{ font-family: var(--font-nav); font-size:10.5px; color: rgba(242,235,220,.55); font-style:italic; margin:8px 0 0; } /* ---------- Modale de matchmaking — branchée sur le vrai flux "créer un duel -> salle d'attente -> un ami rejoint" déjà existant (aucun adversaire simulé). Repositionnement CSS pur d'un écran déjà géré par showScreens() en overlay plein écran premium — zéro changement de logique JS. ---------- */ .play-body .arena-matchmaking-overlay{ position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; padding:20px; background: rgba(6,5,4,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: arena-overlay-in .3s var(--ease); } @keyframes arena-overlay-in{ from{ opacity:0; } to{ opacity:1; } } .play-body .arena-matchmaking-card{ width:100%; max-width:560px; padding:32px clamp(18px,4vw,36px); border-radius:20px; text-align:center; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)), var(--stadium-night, #0E0C0A); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1px solid rgba(184,144,62,.4); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 50px -14px rgba(184,144,62,.4); animation: arena-card-in .35s var(--ease); } @keyframes arena-card-in{ from{ opacity:0; transform: scale(.92) translateY(14px); } to{ opacity:1; transform:scale(1) translateY(0); } } .play-body .arena-matchmaking-eyebrow{ font-family: var(--font-nav); font-size:10.5px; font-weight:800; letter-spacing:.18em; color: var(--gold); text-transform:uppercase; } .play-body .arena-vs-row{ display:flex; align-items:center; justify-content:center; gap:clamp(10px,3vw,26px); margin:16px 0 6px; } .play-body .arena-vs-side{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100px; } .play-body .arena-vs-avatar{ width:76px; height:76px; border-radius:50%; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); border:2px solid rgba(184,144,62,.4); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 10px 20px -10px rgba(0,0,0,.7); } .play-body .arena-vs-avatar-glyph{ font-size:34px; opacity:.85; } .play-body .arena-vs-avatar-opponent{ background-image:url('../img/play/online/unknown-opponent.png'); background-size:cover; background-position:top center; animation: arena-socket-breathe 2.6s ease-in-out infinite; } @keyframes arena-socket-breathe{ 0%,100%{ box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 10px 20px -10px rgba(0,0,0,.7), 0 0 0 rgba(184,144,62,0); } 50%{ box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 10px 20px -10px rgba(0,0,0,.7), 0 0 18px 2px rgba(184,144,62,.5); } } .play-body .arena-vs-avatar-opponent.is-revealed{ background-image:url('../img/play/online/online-opponent.png'); animation: arena-reveal-pop .6s var(--ease); border-color: var(--gold); } @keyframes arena-reveal-pop{ 0%{ transform:scale(.85); opacity:.3; filter:brightness(1.8) saturate(0); } 60%{ transform:scale(1.08); filter:brightness(1.3) saturate(1); } 100%{ transform:scale(1); opacity:1; filter:brightness(1) saturate(1); } } .play-body .arena-vs-name{ font-family: var(--font-display); font-size:13px; color:#F2EBDC; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .play-body .arena-vs-center{ flex-shrink:0; } .play-body .arena-vs-art{ width:clamp(70px,14vw,110px); height:auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)); animation: arena-vs-float 3.2s ease-in-out infinite; } @keyframes arena-vs-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } .play-body .arena-matchmaking-status{ font-family: var(--font-nav); font-size:12.5px; color: rgba(242,235,220,.75); margin:10px 0 16px; } /* .quiz-login-gate-card p / .admin-cancel-btn sont stylés pour le fond clair par défaut (var(--ink-soft)/var(--ink)) — invisibles sur cette carte de matchmaking volontairement sombre. */ .play-body .arena-matchmaking-card p{ color: rgba(242,235,220,.75); } .play-body .arena-matchmaking-card .admin-cancel-btn{ color:#F2EBDC; border-color: rgba(184,144,62,.4); background: rgba(255,255,255,.06); } .play-body .arena-matchmaking-card .admin-cancel-btn:hover{ background: rgba(255,255,255,.12); border-color: var(--gold); } /* ---------- Mobile : le bouton "Copier le lien" dépasse du modal (retour utilisateur). .quiz-duel-link-row met input (flex:1) et bouton côte à côte ; le bouton garde sa largeur naturelle (texte + padding) et ne rétrécit pas assez sous ~340px de large, il déborde du cadre de la carte. Colonne sur mobile : chaque élément prend toute la largeur disponible, plus aucun risque de dépassement quelle que soit la longueur du lien. Desktop non touché. ---------- */ @media (max-width:640px){ .play-body .quiz-duel-link-row{ flex-direction:column; gap:8px; } .play-body .quiz-duel-link-row input{ width:100%; box-sizing:border-box; } .play-body .quiz-duel-link-row .admin-cancel-btn{ width:100%; } } .play-body .arena-dots span{ animation: arena-dot-blink 1.4s infinite; opacity:0; } .play-body .arena-dots span:nth-child(2){ animation-delay:.2s; } .play-body .arena-dots span:nth-child(3){ animation-delay:.4s; } @keyframes arena-dot-blink{ 0%,80%,100%{ opacity:0; } 40%{ opacity:1; } } @media (prefers-reduced-motion: reduce){ .play-body .arena-stat-card:hover, .play-body .arena-mode-card:hover, .play-body .arena-opponent-card:hover, .play-body .arena-live-card:hover, .play-body .arena-btn-primary:hover, .play-body .arena-btn-secondary:hover{ transform:none !important; } .play-body .arena-overlay-in, .play-body .arena-matchmaking-overlay, .play-body .arena-matchmaking-card, .play-body .arena-live-badge::before, .play-body .arena-vs-avatar-opponent, .play-body .arena-vs-avatar-opponent.is-revealed, .play-body .arena-vs-art, .play-body .arena-dots span{ animation:none; } .play-body .arena-dots span{ opacity:1; } }