/* ============================================================ Couche d'animation des fiches jeux (séries 1 + 2 validées). Fidèle à la charte : aucun halo néon sur les box, aucun aplat dégradé dans les box. Mouvement, profondeur, esprit gaming. Chargée après site.css ; pilotée par i18n/engine.js. ============================================================ */ /* ---- hero : profondeur 3D + titre à impact ---- */ .cdn-hero, .gp-hero, .tla-hero{ perspective:1200px; } .cdn-hero-bg, .gp-hero-bg, .tla-hero-vid{ will-change:transform; transform:scale(1.06); transition:transform .25s ease-out; } .cdn-hero .sky, .gp-hero .sky, .tla-hero .sky{ will-change:transform; transition:transform .25s ease-out; } .cdn-hero-in, .gp-hero-in, .tla-hero-in{ will-change:transform; transition:transform .25s ease-out; } html.js .cdn-hero h1 .ltr, html.js .gp-hero h1 .ltr, html.js .tla-hero h1 .ltr{ display:inline-block; opacity:1; animation:ltrImpact .55s cubic-bezier(.18,1.3,.3,1) both; } @keyframes ltrImpact{ from{ transform:translateY(-12px) scale(1.05); } to{ transform:none; } } @media (prefers-reduced-motion:reduce){ html.js .cdn-hero h1 .ltr, html.js .gp-hero h1 .ltr, html.js .tla-hero h1 .ltr{ animation:none; } } /* ---- cartes texte : élévation douce au survol ---- */ @media (prefers-reduced-motion:no-preference){ html.js .cdn-flatcard, html.js .cdn-cred, html.js .cdn-award, html.js .cdn-event{ transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s; } html.js .cdn-flatcard:hover, html.js .cdn-cred:hover, html.js .cdn-award:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } } /* ---- cartes à visuel : inclinaison 3D (pilotée en JS) ---- */ .tilt3d{ transform-style:preserve-3d; will-change:transform; } /* ---- compteurs odométriques ---- */ .odo{ display:inline-flex; align-items:flex-end; line-height:1; height:1em; overflow:hidden; vertical-align:bottom; } .odo .ocol{ display:inline-block; height:1em; overflow:hidden; text-align:center; } .odo .ostrip{ display:flex; flex-direction:column; width:100%; } .odo .ostrip span{ height:1em; display:flex; align-items:center; justify-content:center; } .odo .osep, .odo .osuf{ display:inline-block; } /* ---- autres jeux : carrousel projecteur ---- */ .related-games{ margin-top:4px; } .related-h{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(24px,3.4vw,40px); line-height:1.02; margin:0 0 8px; } .related-sub{ color:var(--fg-muted); font-size:15px; margin:0 0 22px; max-width:560px; } .rg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media (max-width:760px){ .rg-grid{ grid-template-columns:1fr; } } .rg-card{ display:block; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-raised); text-decoration:none; color:inherit; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; } .rg-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .rg-cov{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink-700); } .rg-cov img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s cubic-bezier(.2,.7,.2,1); } .rg-card:hover .rg-cov img{ transform:scale(1.06); } .rg-cov::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(1,1,22,0) 42%,rgba(1,1,22,.74) 100%); } .rg-title{ position:absolute; left:16px; right:16px; bottom:13px; z-index:2; font-family:var(--font-display); text-transform:uppercase; font-size:clamp(20px,2.1vw,30px); line-height:.96; color:#fff; text-shadow:0 2px 14px rgba(1,1,22,.7); } .rg-body{ padding:14px 16px 16px; } .rg-tag{ color:var(--fg-muted); font-size:13px; margin:0; text-wrap:pretty; } .rg-allcta{ display:flex; justify-content:center; margin-top:26px; } /* Bandeaux de chiffres : 3 maximum (on masque au-delà du 3e) */ .cdn-figs > .cdn-fig:nth-child(n+4){ display:none; } /* Bloc « Continuez l'exploration » : texte centré */ .related-games{ text-align:center; } .related-sub{ margin-left:auto; margin-right:auto; } .rg-title{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 18px; } .rg-cov::after{ background:linear-gradient(180deg,rgba(1,1,22,.28) 0%,rgba(1,1,22,.44) 100%); } .rg-tag{ text-align:center; } /* Le curseur signature et le voile de transition sont désormais globaux (site/anim.js + site/site.css), partagés avec le site principal. */ /* ============================================================ MOBILE (≤680px) — héros + intros centrés Cohérence avec les pages principales (site.css) : sur petite largeur le héros est centré. On centre aussi les blocs d'intro (titre + chapô) situés SOUS le héros. Les textes de cartes et de colonnes restent alignés à gauche pour la lisibilité. S'applique aux 3 familles de fiches : .cdn- / .gp- / .la- ============================================================ */ @media (max-width:680px){ /* --- héros --- */ .cdn-hero-in, .gp-hero-in, .la-hero-copy{ text-align:center; } .cdn-hero-in h1, .gp-hero-in h1, .la-hero-copy h1{ margin-left:auto; margin-right:auto; } .cdn-kicker, .cdn-hero .cdn-sub, .gp-sub, .la-hero .la-sub{ margin-left:auto; margin-right:auto; } /* rangées de stats / méta : centrées */ .cdn-meta, .la-stats{ justify-content:center; } .cdn-meta .mi{ align-items:center; } .la-hero-top{ display:flex; justify-content:center; } /* --- intros sous le héros (titre + chapô) --- */ .cdn-intro, .la-intro, .gp-soon{ margin-left:auto; margin-right:auto; text-align:center; } .cdn-intro .lead, .la-intro .la-lead{ margin-left:auto; margin-right:auto; } /* --- LISIBILITÉ : renforcer le voile du héros sur mobile --- Sur petite largeur, le bloc texte (titre + chapô + stats) remonte dans la zone centrale où le scrim d'origine est trop clair (~.12–.2), et le texte passait par-dessus l'image/vidéo lumineuse. On assombrit la moitié basse du héros pour garantir le contraste, sans cacher totalement l'image en haut. !important car les scrims sont définis en