/* ============================================================================
* GameCalendar — Cinematic Theme (lot 8 : « Bibliothèque graphite », bleu acier)
* ----------------------------------------------------------------------------
* Variables, palette, color-grading, base layout primitives.
* Companion files:
* - cinematic-components.css : hero, cards, panels, buttons
* - cinematic-parallax.js : scroll + pointer parallax engine (vanilla)
* - dominant-color.js : runtime palette extraction from artworks
*
* Accessibility:
* - WCAG AA contrast respected (text >= 4.5:1, UI >= 3:1)
* - All animations off when prefers-reduced-motion: reduce
* - Focus-visible always rendered (cyan ring)
* ============================================================================ */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url('/fonts/manrope-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* === Semantic palette === */
--bg-deep: #0f1318; /* graphite profond (lot 8 : « Bibliothèque graphite ») */
--bg-night: #161c23; /* graphite */
--bg-dusk: #1f2831; /* graphite clair */
--bg-glass: rgba(22, 28, 36, 0.6);
/* === Accents à rôle unique (Docs/DESIGN-SYSTEM.md) ===
action : boutons, liens, focus, sélection — même teinte que l'ancien
cyan saturé historique, chroma réduit ; éditorial : suivis, eyebrow du hero ;
data : scores et données externes ; ok / warn / danger : leur sens. */
--accent-action: #6a9fd0;
--accent-action-hover: #7eaedb;
--accent-action-ink: #0f1318; /* texte posé sur l'accent d'action */
--accent-action-soft: rgba(106, 159, 208, 0.14);
--accent-editorial: #d46a9e;
--accent-editorial-soft: rgba(212, 106, 158, 0.16);
--accent-data: #e6b45a;
--accent-data-soft: rgba(230, 180, 90, 0.16);
/* Part Xbox des visuels de temps de jeu uniquement (6.25.0), à côté de
la part Steam en --accent-data. Plus clair que le vert Microsoft pour
rester lisible sur graphite comme sur obsidienne (7,5 : 1 et 7,9 : 1). */
--accent-xbox: #5fb85f;
/* Hype (lots H1, H2) : flèches « chaleur », or en haut, gris au milieu,
acier en bas. Jamais vert ni rouge, réservés au succès et à l'erreur. */
--hype-high: var(--accent-data);
--hype-mid: var(--text-mid);
--hype-low: #8fa3b8;
--ok: #57c26f;
--warn: #e6b45a;
--danger: #e5605b;
/* Surfaces sombres légèrement teintées et lignes */
--surface-1: #181f27; /* cartes, panneaux */
--surface-2: #212a34; /* champs, badges, lignes */
--surface-3: #2a3541; /* survol, menu ouvert */
--line: rgba(255, 255, 255, 0.10);
--line-strong: rgba(255, 255, 255, 0.18);
--shadow-card: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
--shadow-panel: 0 24px 70px -20px rgba(0, 0, 0, 0.65);
/* Alias historiques : pointent sur les jetons sémantiques, à retirer
quand plus aucune feuille ne les lit (tests/design-tokens.test.js). */
--accent-magenta: var(--accent-editorial);
--accent-cyan: var(--accent-action);
--accent-amber: var(--accent-data);
--accent-1: var(--accent-editorial);
--accent-1-soft: var(--accent-editorial-soft);
--accent-2: var(--accent-action);
--accent-2-soft: var(--accent-action-soft);
--accent-3: var(--accent-data);
--accent-3-soft: var(--accent-data-soft);
--text-primary: #f4f7fa;
--text-secondary: #b8c0cb;
--text-muted: #818b99;
--text-disabled: #5e6875;
--text-hi: #f5f7fa;
--text-mid: #b3bac5;
--text-lo: #8b95a3; /* 6,3 : 1 sur --bg-deep (AA) */
--text-mute: #7a8493; /* 4,9 : 1 sur le graphite --bg-deep : mentions non essentielles seulement */
--hairline: rgba(255, 255, 255, 0.10);
--hairline-hi: rgba(255, 255, 255, 0.18);
/* === Typography === */
--font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--font-weight-regular: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-display: 800;
--text-eyebrow: 0.75rem;
--text-label: 0.8125rem;
--text-body: 1rem;
--text-lead: 1.125rem;
--text-h3: clamp(1.35rem, 2vw, 1.75rem);
--text-h2: clamp(1.8rem, 3vw, 2.75rem);
--text-h1: clamp(2.6rem, 5vw, 4.75rem);
--text-display: clamp(3.2rem, 6vw, 5.5rem);
--fs-display: var(--text-display);
--fs-h1: var(--text-h1);
--fs-h2: var(--text-h2);
--fs-caption: 0.75rem;
--fs-small: 0.875rem;
--fs-body: 1rem;
--fs-lead: 1.125rem;
--fs-overline: 0.6875rem;
--tracking-display: -0.04em; /* tight, cinematic */
--tracking-overline: 0.22em; /* wide & airy */
--leading-tight: 1.05;
--leading-snug: 1.25;
--leading-normal: 1.55;
/* === Spatial system === */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4.5rem;
--space-9: 6.5rem;
--space-10: 9rem;
/* === Motion === */
--ease-cinema: cubic-bezier(0.16, 1, 0.3, 1); /* slow-out, organic */
--ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 180ms;
--dur-base: 320ms;
--dur-slow: 620ms;
--dur-cinema: 1100ms;
--dur-reveal: 250ms; /* apparition au défilement : fondu court, sans déplacement */
/* === Effects === */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-control: 12px;
--radius-card: 18px;
--radius-panel: 24px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 24px;
--radius-pill: 999px;
--radius-cover: 6px; /* jaquettes et cartes de jeux : rectangulaires (lot 8) */
--state-selected-bg: rgba(106, 159, 208, 0.12);
--state-selected-border: rgba(106, 159, 208, 0.72);
--state-selected-text: var(--text-primary);
--state-selected-accent: var(--accent-action);
--focus-ring: 0 0 0 3px rgba(106, 159, 208, 0.32);
--dur-control: 160ms;
--control-height-sm: 36px;
--control-height-md: 44px;
--control-height-lg: 48px;
--shadow-glow-1: 0 8px 40px -8px rgba(212, 106, 158, 0.30);
--shadow-glow-2: 0 8px 40px -8px rgba(106, 159, 208, 0.35);
--shadow-deep: 0 24px 80px -20px rgba(0, 0, 0, 0.65);
--grain-opacity: 0.02;
--vignette-strength: 0.55;
--grade-overlay-opacity: 0.28;
/* === Layout === */
--container-max: 1380px;
--gutter: clamp(1rem, 4vw, 3rem);
}
/* V6 — seconde palette. Les dimensions, médias et couleurs de statut sont conservés. */
:root[data-theme='obsidian'] {
color-scheme: dark;
--bg-deep: #0c0c0b;
--bg-night: #121210;
--bg-dusk: #1d1c19;
--bg-glass: rgba(18, 18, 16, 0.6);
--surface-1: #191815;
--surface-2: #24221e;
--surface-3: #302d27;
--accent-action: #c5a67d;
--accent-action-hover: #dbc09b;
--accent-action-ink: #0c0c0b;
--accent-action-soft: rgba(197, 166, 125, 0.14);
--accent-editorial: #cbb99c;
--accent-editorial-soft: rgba(203, 185, 156, 0.16);
/* Hype : le bas de l'échelle prend un gris chaud, assorti au sable. */
--hype-low: #8f8779;
--text-primary: #f4f0e8;
--text-secondary: #c8c0b4;
--text-muted: #aaa193;
--text-disabled: #777065;
--text-hi: #f4f0e8;
--text-mid: #c8c0b4;
--text-lo: #aaa193;
--text-mute: #a0988b;
--text-strong: var(--text-hi);
--line: rgba(197, 166, 125, 0.18);
--line-strong: rgba(197, 166, 125, 0.32);
--hairline: var(--line);
--hairline-hi: var(--line-strong);
--state-selected-bg: rgba(197, 166, 125, 0.12);
--state-selected-border: rgba(197, 166, 125, 0.72);
--focus-ring: 0 0 0 3px rgba(197, 166, 125, 0.65);
--shadow-glow-1: 0 8px 40px -8px rgba(203, 185, 156, 0.30);
--shadow-glow-2: 0 8px 40px -8px rgba(197, 166, 125, 0.35);
--nav-bg: var(--bg-deep);
--nav-panel: var(--surface-1);
--nav-text: var(--text-hi);
--nav-muted: var(--text-lo);
--palette-bg-rgb: 12, 12, 11;
--palette-panel-rgb: 25, 24, 21;
--palette-action-rgb: 197, 166, 125;
--palette-editorial-rgb: 203, 185, 156;
--palette-highlight-rgb: 244, 240, 232;
--palette-border-rgb: 197, 166, 125;
--palette-legacy-accent: var(--accent-action);
--palette-media-bg: var(--bg-deep);
--palette-library-bg: var(--bg-deep);
--palette-library-panel: var(--surface-1);
--palette-library-card: var(--bg-night);
--glass-accent-color: var(--accent-action);
}
/* ----------------------------------------------------------------------------
* Base reset
* --------------------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: 16px;
scroll-behavior: smooth;
/* Smooth scroll-snap optional, used per-section */
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-padding-top: calc(var(--header-height-desktop, 60px) + 24px);
/* Empêche le rubber-band / pull-to-refresh natif en haut de page :
sans ça, l'utilisateur peut "glisser au-dessus" du hero sticky
et voir un espace blanc au-dessus de l'image. */
overscroll-behavior-y: none;
}
body.cinematic {
margin: 0;
min-height: 100vh;
font-family: var(--font-body);
font-weight: var(--font-weight-regular);
font-size: var(--fs-body);
line-height: var(--leading-normal);
color: var(--text-hi);
background: var(--bg-deep);
overflow-x: hidden;
/* Persistent gradient base — wallpapers stack on top in their own layers */
background-image:
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(var(--palette-action-rgb, 106, 159, 208), 0.06), transparent 60%),
radial-gradient(ellipse 70% 50% at 90% 80%, var(--accent-2-soft), transparent 55%),
linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-night) 60%, var(--bg-deep) 100%);
background-attachment: fixed;
}
/* ----------------------------------------------------------------------------
* Global atmosphere — film grain ONLY (vignette moved into .stage to avoid
* darkening text content). Fixed, low z-index, never covers UI.
* --------------------------------------------------------------------------*/
body.cinematic::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1; /* behind .cinematic-nav (50) and content */
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: var(--grain-opacity);
mix-blend-mode: overlay;
}
/* ----------------------------------------------------------------------------
* Typography
* --------------------------------------------------------------------------*/
.cinematic h1, .cinematic h2, .cinematic h3,
.cinematic .display, .cinematic .overline {
font-family: var(--font-display);
color: var(--text-hi);
margin: 0;
}
.cinematic .display {
font-size: var(--fs-display);
font-weight: var(--font-weight-display);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
color: var(--text-hi);
/* Heavy text-shadow stack for legibility on photographic backgrounds */
text-shadow:
0 2px 6px rgba(0, 0, 0, 0.85),
0 6px 18px rgba(0, 0, 0, 0.7),
0 14px 60px rgba(0, 0, 0, 0.6);
}
.cinematic h1 { font-size: var(--fs-h1); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: -0.02em; }
.cinematic h2 { font-size: var(--fs-h2); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); letter-spacing: -0.015em; }
/* Optional: a single accent word inside .display gets the gradient.
* Usage: Foo Bar
*/
.cinematic .display .grad {
background: linear-gradient(115deg, var(--accent-1) 0%, var(--accent-3) 45%, var(--accent-2) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 4px 18px rgba(var(--palette-action-rgb, 106, 159, 208), 0.35));
}
.cinematic .overline {
font-size: var(--fs-overline);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-overline);
color: var(--accent-2);
}
.cinematic p { color: var(--text-mid); margin: 0 0 var(--space-4); }
.cinematic a { color: var(--accent-2); text-decoration: none; transition: color var(--dur-fast) var(--ease-snap); }
.cinematic a:hover { color: var(--text-hi); }
/* ----------------------------------------------------------------------------
* Layout helpers
* --------------------------------------------------------------------------*/
.cinematic .container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.cinematic .stack > * + * { margin-top: var(--space-5); }
.cinematic .row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
/* ----------------------------------------------------------------------------
* Accessibility — focus + skip-link
* --------------------------------------------------------------------------*/
.cinematic :focus-visible {
outline: none;
border-color: var(--state-selected-border);
box-shadow: var(--focus-ring);
}
.cinematic .skip-link {
position: absolute;
top: -100px;
left: 12px;
padding: 10px 14px;
background: var(--accent-1);
color: #000;
font-weight: 700;
border-radius: var(--radius-sm);
z-index: 10000;
transition: top var(--dur-fast) var(--ease-snap);
}
.cinematic .skip-link:focus { top: 12px; }
/* ----------------------------------------------------------------------------
* Reduced motion — strip ALL non-essential motion
* --------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
.cinematic *,
.cinematic *::before,
.cinematic *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
body.cinematic::after { opacity: 0; } /* drop grain on reduced-motion devices to save GPU */
}
/* Mobile: lighten the layer stack (atmosphere overlays remain) */
@media (max-width: 720px), (pointer: coarse) {
:root {
--vignette-strength: 0.45;
--grain-opacity: 0.035;
}
body.cinematic {
background-attachment: scroll;
}
body.cinematic::after {
display: none;
}
}
/* ============================================================================
* GameCalendar — Cinematic Components (GTA VI inspired)
* ----------------------------------------------------------------------------
* Hero (70vh), parallax wallpaper layers, cards, badges, filter chips,
* scroll-driven reveals.
* Depends on: cinematic-theme.css (palette + tokens)
*
* Feuille commune, liée par toutes les pages (BaseLayout). Depuis le lot 6.24.0,
* les règles d'une seule page vivent dans home-page.css, calendar-page.css,
* news-page.css et followed-page.css (règle : Docs/DESIGN-SYSTEM.md).
* ============================================================================ */
:root {
--hero-preview-art: url('/img/hero-lcp.webp');
--glass-bg: rgba(var(--palette-panel-rgb, 9, 14, 27), 0.68);
--glass-bg-strong: rgba(var(--palette-panel-rgb, 6, 10, 20), 0.74);
--glass-bg-soft: rgba(255, 255, 255, 0.075);
--glass-fluid-base: rgba(var(--palette-panel-rgb, 15, 26, 46), 0.7);
--glass-fluid-panel: rgba(var(--palette-panel-rgb, 13, 22, 40), 0.66);
--glass-fluid-chip: rgba(255, 255, 255, 0.1);
--glass-fluid-active: rgba(var(--palette-action-rgb, 126, 174, 219), 0.22);
--glass-fluid-highlight: rgba(var(--palette-highlight-rgb, 236, 252, 255), 0.22);
--glass-fluid-glow: rgba(var(--palette-action-rgb, 126, 174, 219), 0.24);
--glass-border: rgba(255, 255, 255, 0.3);
--glass-border-strong: rgba(255, 255, 255, 0.38);
--glass-highlight: rgba(255, 255, 255, 0.16);
--glass-shadow: 0 28px 86px rgba(0, 0, 0, 0.32);
--glass-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.18);
--glass-inner-glow:
inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -22px 48px rgba(var(--palette-action-rgb, 126, 174, 219), 0.06);
--glass-radius-pill: var(--radius-pill);
--glass-radius-panel: var(--radius-panel);
--glass-blur-button: 5px;
--glass-blur-chip: 6px;
--glass-blur-card: 6px;
--glass-blur-panel: 8px;
--glass-blur-radius: var(--glass-blur-card);
--glass-blur-strong: var(--glass-blur-panel);
--glass-accent-color: rgb(125, 248, 244);
--glass-accent-soft: rgba(var(--palette-action-rgb, 126, 174, 219), 0.18);
--glass-violet-soft: rgba(var(--palette-editorial-rgb, 157, 124, 255), 0.18);
/* ===== Navigation GameCalendar ===== */
--nav-bg: #09131f;
--nav-panel: #0b1724;
--nav-border: rgba(var(--palette-border-rgb, 145, 170, 195), 0.2);
--nav-text: #f4f7fa;
--nav-muted: #929daa;
--nav-accent: var(--accent-action);
--header-height-desktop: 60px;
--header-height-mobile: 58px;
--header-height: var(--header-height-desktop);
}
/* ============================================================================
* 1. HERO — pinned cinematic stage (zoom + blur + fade on scroll)
* ----------------------------------------------------------------------------
* The hero stays visually fixed for ~1.8x viewport-height of scroll while
* its image scales up, blurs, and fades. The next section then slides
* naturally over it. This produces the "Apple/GTA6" parallax feel.
*
* Markup:
* (tall scroll spacer, e.g. 200vh)
*
*
* ============================================================================ */
/* Hero content (text + badges) fades + lifts out independently so the title
stays readable longer than the image stays sharp. */
.cinematic-hero .hero-content {
position: relative;
z-index: 10;
max-width: var(--container-max);
width: 100%;
margin-inline: auto;
display: grid;
gap: var(--space-5);
padding-bottom: var(--space-6);
transform: translate3d(0, calc(var(--hero-progress, 0) * -160px), 0)
scale(calc(1 - var(--hero-progress, 0) * 0.08));
opacity: calc(1 - var(--hero-progress, 0) * 1.6);
will-change: transform, opacity;
}
/* Each layer translates independently via JS (--py / --px CSS vars) */
.cinematic-hero .layer {
position: absolute;
inset: -10%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
will-change: transform;
transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--sc, 1));
transition: opacity var(--dur-cinema) var(--ease-cinema);
}
/* Score & meta badge row on hero */
.score-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(var(--palette-bg-rgb, 15, 19, 24), 0.65);
border: 1px solid var(--hairline-hi);
border-radius: var(--radius-pill);
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
font-family: var(--font-display);
font-weight: var(--font-weight-semibold);
font-size: var(--fs-small);
color: var(--text-hi);
letter-spacing: 0.04em;
}
.score-badge[hidden] {
display: none;
}
.score-badge .score-value {
font-size: 1.05rem;
font-weight: var(--font-weight-bold);
}
.score-badge--meta .score-value {
color: #6dc77a;
} /* metacritic green */
.score-badge--critic .score-value {
color: #ff6b3d;
} /* opencritic orange */
.score-badge--release .score-value {
color: var(--palette-legacy-accent, #7ff7f2);
}
/* Scroll prompt */
@keyframes scrollPulse {
0% {
transform: scaleY(0);
transform-origin: top;
opacity: 0;
}
40% {
transform: scaleY(1);
opacity: 1;
}
100% {
transform: scaleY(1);
transform-origin: bottom;
opacity: 0;
}
}
@keyframes heroArtworkDrift {
0% {
background-position: center;
filter: saturate(1.16) contrast(1.04) brightness(0.84);
}
100% {
background-position: center;
filter: saturate(1.3) contrast(1.1) brightness(0.9);
}
}
@keyframes heroLightSweep {
0% {
opacity: 0.38;
transform: translate3d(-2.5%, 0, 0) scale(1);
}
100% {
opacity: 0.78;
transform: translate3d(2.5%, -1.5%, 0) scale(1.04);
}
}
/* ============================================================================
* 2. SITE HEADER — navigation éditoriale, panneau News et drawer mobile
* ========================================================================== */
.site-header {
position: sticky;
top: 12px;
left: 0;
right: 0;
z-index: 100;
width: min(calc(100% - 32px), 1440px);
margin-inline: auto;
color: var(--nav-text);
background: rgba(var(--palette-bg-rgb, 8, 16, 26), 0.96);
border: 1px solid var(--nav-border);
border-radius: var(--radius-card);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
transition:
background-color var(--dur-control) ease,
border-color var(--dur-control) ease,
box-shadow var(--dur-control) ease;
}
.site-header.site-header--hero-overlay {
position: fixed;
}
.site-header.is-condensed {
background: rgba(var(--palette-bg-rgb, 8, 16, 26), 0.985);
border-color: rgba(var(--palette-border-rgb, 145, 170, 195), 0.28);
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.36);
}
.site-header__bar {
display: grid;
grid-template-columns: minmax(180px, 1fr) auto minmax(96px, 1fr);
align-items: center;
gap: clamp(14px, 2vw, 28px);
height: var(--header-height-desktop);
padding-inline: clamp(16px, 2vw, 28px);
}
.site-brand {
display: inline-flex;
align-items: center;
justify-self: start;
gap: 10px;
color: var(--nav-text);
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.01em;
text-decoration: none;
white-space: nowrap;
}
.cinematic .site-brand { color: var(--nav-text); }
.site-brand__mark {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
flex: 0 0 34px;
color: var(--nav-accent);
background: transparent;
}
.site-brand__mark svg {
width: 100%;
height: 100%;
overflow: visible;
stroke: currentColor;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 3px 8px rgba(var(--palette-action-rgb, 106, 159, 208), 0.2));
}
.primary-nav {
display: inline-flex;
align-items: stretch;
align-self: stretch;
justify-self: center;
gap: clamp(0px, 0.35vw, 5px);
}
.primary-nav__link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 100%;
padding: 0 clamp(8px, 0.85vw, 14px);
border: 0;
border-radius: var(--radius-xs);
color: var(--nav-muted);
background: transparent;
font: inherit;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color var(--dur-fast) var(--ease-cinema), background var(--dur-fast) var(--ease-cinema);
}
.cinematic .primary-nav__link { color: var(--nav-muted); }
.primary-nav__link:hover,
.cinematic .primary-nav__link:hover {
color: var(--nav-text);
background: rgba(255, 255, 255, 0.025);
}
.primary-nav__link:focus-visible {
outline: 0;
box-shadow: inset 0 -3px 0 var(--nav-accent);
}
.primary-nav__link.is-active,
.primary-nav__link[aria-current='page'],
.cinematic .primary-nav__link.is-active,
.cinematic .primary-nav__link[aria-current='page'] {
color: var(--nav-text);
background: transparent;
}
.primary-nav__link.is-active::after,
.primary-nav__link[aria-current='page']::after {
content: '';
position: absolute;
left: 20%;
right: 20%;
bottom: 0;
height: 2px;
border-radius: 2px 2px 0 0;
background: var(--nav-accent);
}
.site-header__actions {
display: flex;
align-items: center;
justify-self: end;
gap: var(--space-2);
}
.followed-shortcut {
position: relative;
flex: 0 0 var(--control-height-md);
}
.theme-picker {
position: relative;
display: grid;
place-items: center;
flex: 0 0 var(--control-height-md);
width: var(--control-height-md);
min-height: var(--control-height-md);
padding: 0;
font: inherit;
cursor: pointer;
border: 0;
color: var(--text-lo);
background: transparent;
}
.theme-picker:hover { color: var(--text-hi); }
.theme-picker[aria-pressed='true'] { color: var(--accent-action); }
.theme-picker:focus-visible { outline: 2px solid var(--accent-action); outline-offset: -3px; }
.theme-picker:disabled { cursor: default; opacity: 0.5; }
.theme-picker::after {
content: attr(data-theme-hint);
display: none;
position: absolute;
z-index: 10;
top: calc(100% + 8px);
right: 0;
width: max-content;
max-width: 240px;
padding: 6px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
background: var(--surface-1);
color: var(--text-hi);
font-size: 12px;
pointer-events: none;
}
.theme-picker:focus-visible::after { display: block; }
@media (hover: hover) and (pointer: fine) {
.theme-picker:hover::after { display: block; }
}
.site-header:has([data-home-layout-hint]:not([hidden])) .theme-picker::after { display: none; }
.theme-picker--desktop { display: none; }
.theme-picker--mobile { margin-left: auto; }
@media (min-width: 769px) {
.theme-picker--desktop { display: grid; }
}
.followed-shortcut__count {
position: absolute;
top: -5px;
right: -5px;
display: inline-grid;
min-width: 18px;
height: 18px;
padding-inline: 4px;
place-items: center;
border: 2px solid var(--nav-bg);
border-radius: var(--radius-pill);
background: var(--accent-cyan);
color: var(--accent-action-ink);
font-size: 0.625rem;
font-weight: var(--font-weight-bold);
line-height: 1;
}
.followed-shortcut__count[hidden] {
display: none;
}
.site-search {
position: relative;
display: grid;
grid-template-columns: var(--control-height-md) 1fr;
align-items: center;
justify-self: end;
width: var(--control-height-md);
min-width: var(--control-height-md);
height: var(--control-height-md);
overflow: hidden;
border: 1px solid var(--nav-border);
border-radius: var(--radius-control);
background: rgba(255, 255, 255, 0.025);
transition: width 360ms var(--ease-cinema);
}
.site-search.is-open { width: clamp(220px, 26vw, 340px); overflow: visible; }
.site-search__toggle {
display: inline-grid;
place-items: center;
width: var(--control-height-md);
height: var(--control-height-md);
border: 0;
border-radius: var(--radius-control);
color: var(--nav-text);
background: transparent;
cursor: pointer;
}
.site-search__toggle:hover,
.site-search__toggle:focus-visible {
color: var(--nav-accent);
background: rgba(var(--palette-action-rgb, 106, 159, 208), 0.055);
outline: 0;
}
.site-search__toggle:focus-visible { box-shadow: var(--focus-ring); }
.site-search .nav-search-field {
width: 0;
min-width: 0;
height: var(--control-height-md);
padding: 0;
border: 0;
color: var(--nav-text);
background: transparent;
font: var(--font-weight-semibold) var(--fs-small) / 1 var(--font-display);
opacity: 0;
outline: 0;
pointer-events: none;
}
.site-search .nav-search-field::placeholder { color: var(--text-lo); }
.site-search:focus-within {
border-color: var(--state-selected-border);
box-shadow: var(--focus-ring);
}
.site-search .nav-search-field:focus-visible { box-shadow: none; }
.site-search:not(.is-open) .nav-search-field {
width: 0;
padding: 0;
opacity: 0;
pointer-events: none;
}
.site-search.is-open .nav-search-field {
width: auto;
padding: 0 14px 0 2px;
opacity: 1;
pointer-events: auto;
}
.site-menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 44px;
height: 44px;
padding: 0 10px;
border: 1px solid var(--nav-border);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.025);
cursor: pointer;
}
.site-menu-toggle:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }
.site-menu-toggle span {
display: block;
width: 100%;
height: 2px;
border-radius: 2px;
background: var(--nav-text);
}
.site-menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.site-menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-drawer {
position: fixed;
top: var(--header-height);
right: 0;
bottom: 0;
z-index: 110;
width: min(320px, 86vw);
height: calc(100vh - var(--header-height));
height: calc(100dvh - var(--header-height));
padding: 16px;
overflow-y: auto;
border-left: 1px solid var(--nav-border);
background: rgba(var(--palette-bg-rgb, 8, 16, 26), 0.985);
transform: translateX(100%);
transition: transform var(--dur-base) var(--ease-cinema);
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-nav__link {
display: block;
width: 100%;
padding: 12px 14px;
border: 0;
border-radius: var(--radius-sm);
color: var(--nav-text);
background: transparent;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.cinematic .mobile-nav__link { color: var(--nav-text); }
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
background: rgba(255, 255, 255, 0.04);
outline: 0;
}
body.mobile-nav-open { overflow: hidden; }
@media (max-width: 1180px) {
.site-header__bar {
grid-template-columns: minmax(160px, 1fr) auto minmax(44px, 1fr);
gap: 12px;
padding-inline: 16px;
}
.site-brand { gap: 8px; font-size: 0.98rem; }
.site-brand__mark { width: 30px; height: 30px; flex-basis: 30px; }
.primary-nav__link { padding-inline: 9px; font-size: 0.8rem; }
}
@media (max-width: 1024px) {
.site-header__bar {
grid-template-columns: minmax(154px, 1fr) auto minmax(44px, 1fr);
gap: 8px;
padding-inline: 14px;
}
.primary-nav { gap: 0; }
.primary-nav__link { padding-inline: 7px; font-size: 0.76rem; }
}
@media (max-width: 860px) {
.site-brand__name { font-size: 0.9rem; }
.primary-nav__link { padding-inline: 5px; font-size: 0.72rem; }
}
@media (max-width: 768px) {
.site-header {
top: 0;
width: 100%;
margin-inline: 0;
border-width: 0 0 1px;
border-radius: 0;
}
.site-header__bar {
display: flex;
gap: 12px;
height: var(--header-height-mobile);
padding-inline: 16px;
}
.primary-nav { display: none; }
.site-header__actions { margin-left: auto; }
.site-menu-toggle { display: flex; }
/* Recherche disponible au pouce : fermée, une icône ; ouverte, une barre
pleine largeur sous l'en-tête et un panneau de résultats qui respecte
la hauteur réelle du viewport (clavier virtuel compris). */
.site-search.is-open {
position: fixed;
left: 12px;
right: 12px;
top: calc(var(--header-height-mobile) + 8px);
z-index: 120;
width: calc(100vw - 24px);
background: var(--surface-1);
box-shadow: var(--shadow-panel);
}
.site-search.is-open .nav-search-field { font-size: 16px; }
.site-search.is-open .nav-search-results {
left: 0;
right: 0;
width: auto;
max-height: min(60dvh, calc(100dvh - var(--header-height-mobile) - 80px));
}
}
@media (max-width: 480px) {
.site-header__bar { padding-inline: 14px; }
.site-brand__name { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
.site-header,
.site-search,
.site-menu-toggle span,
.mobile-drawer { transition: none; }
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============================================================================
* 2b. NEWS — page éditoriale alimentée par PostgreSQL
* ============================================================================ */
.page-intro {
max-width: var(--container-max);
}
.page-intro__eyebrow {
margin: 0 0 var(--space-2);
color: var(--accent-cyan);
font-size: var(--text-eyebrow);
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
}
.page-intro__title,
.cinematic .page-intro__title {
max-width: 18ch;
margin: 0;
color: var(--text-primary);
font-size: var(--text-h1);
font-weight: var(--font-weight-display);
line-height: 1;
letter-spacing: -0.035em;
text-shadow: none;
}
.page-intro__lead {
max-width: 62ch;
margin: var(--space-3) 0 0;
color: var(--text-secondary);
font-size: var(--text-lead);
}
.news-page-filters a {
position: relative;
flex: 1 0 auto;
min-width: 104px;
padding: 10px 14px;
border-radius: 9px;
color: var(--nav-muted);
font-size: 0.84rem;
font-weight: 750;
text-align: center;
text-decoration: none;
}
.news-card-media--empty {
background-color: var(--palette-media-bg, #07111c);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.news-card-media--gaming { background-image: url('/assets/news-fallbacks/gaming.webp'); }
.news-card-media--ia { background-image: url('/assets/news-fallbacks/ia.webp'); }
.news-card-media--business { background-image: url('/assets/news-fallbacks/business.webp'); }
.news-card-media--cyber { background-image: url('/assets/news-fallbacks/cyber.webp'); }
.news-card-media--hardware { background-image: url('/assets/news-fallbacks/hardware.webp'); }
.news-editorial-card .news-card-link {
grid-template-columns: 116px 1fr;
min-height: 0;
height: 100%;
}
.news-editorial-card .news-card-body { padding: 15px; }
.news-editorial-card .news-card-summary { display: none; }
.news-editorial-card .news-card-title { font-size: 0.96rem; }
.news-editorial-card .news-card-meta { padding-top: 9px; }
.news-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.news-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
background: rgba(var(--palette-panel-rgb, 12, 20, 30), 0.92);
}
.news-card-link {
display: grid;
grid-template-columns: minmax(140px, 38%) 1fr;
min-height: 205px;
color: var(--text-hi);
text-decoration: none;
}
.news-card-media {
position: relative;
display: block;
min-height: 100%;
background-position: center;
background-size: cover;
transition: transform var(--dur-base) var(--ease-cinema);
}
.news-card-body {
display: flex;
min-width: 0;
padding: 18px;
flex-direction: column;
}
.news-card-title,
.news-card-summary,
.news-card-meta {
display: block;
}
.news-card-title {
color: var(--text-hi);
font: 780 clamp(1rem, 1.2vw, 1.16rem) / 1.18 var(--font-display);
}
.news-card-summary {
display: -webkit-box;
margin-top: 10px;
overflow: hidden;
color: var(--text-mid);
font-size: 0.82rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.news-card-meta {
margin-top: auto;
padding-top: 16px;
color: var(--text-mute);
font-size: 0.72rem;
}
.news-card-meta time:not([hidden]) { display: block; white-space: normal; }
.news-card-link:hover .news-card-media,
.news-card-link:focus-visible .news-card-media {
transform: scale(var(--motion-list-zoom)); /* niveau 3, motion.css */
}
.news-card-link:focus-visible {
outline: 2px solid var(--nav-accent);
outline-offset: -2px;
}
.news-load-more,
.news-back-top {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: var(--control-height-md);
padding: 0 20px;
border: 1px solid rgba(var(--palette-border-rgb, 145, 170, 195), 0.22);
border-radius: var(--radius-md);
color: var(--text-hi);
background: rgba(var(--palette-panel-rgb, 12, 20, 30), 0.7);
font: var(--font-weight-semibold) var(--fs-small) / 1 var(--font-display);
letter-spacing: 0.02em;
text-decoration: none;
cursor: pointer;
transition:
color var(--dur-fast) var(--ease-snap),
border-color var(--dur-fast) var(--ease-snap),
background var(--dur-fast) var(--ease-snap),
transform var(--dur-fast) var(--ease-snap);
}
/* État du flux + reprise explicite : le bouton n'apparaît qu'après une panne
(flux indisponible ou articles déjà récupérés affichés). */
.news-retry {
height: var(--control-height-md);
padding: 0 14px;
border: 1px solid var(--nav-border);
border-radius: var(--radius-control);
color: var(--text-hi);
background: rgba(255, 255, 255, 0.05);
font: var(--font-weight-semibold) var(--fs-small) / 1 var(--font-display);
cursor: pointer;
transition:
border-color var(--dur-fast) var(--ease-snap),
background var(--dur-fast) var(--ease-snap);
}
@media (max-width: 1100px) {
.news-editorial-card .news-card-link { grid-template-columns: 96px 1fr; }
}
@media (max-width: 768px) {
.news-card-grid {
grid-template-columns: 1fr;
}
.news-editorial-card .news-card-link {
grid-template-columns: 1fr;
min-height: 260px;
}
.news-editorial-card .news-card-media { min-height: 130px; }
.news-card-link {
grid-template-columns: 38% 1fr;
min-height: 200px;
}
}
@media (max-width: 480px) {
.news-card-link {
grid-template-columns: 1fr;
}
.news-editorial-card .news-card-link {
grid-template-columns: 38% 1fr;
min-height: 150px;
}
.news-editorial-card .news-card-media { min-height: 100%; }
.news-card-media {
min-height: 180px;
}
}
/* ============================================================================
* 3. SECTION SHELL + scroll-reveal
* ============================================================================ */
.cinematic-section {
position: relative;
--section-flow-space: var(--space-8);
padding: var(--section-flow-space) 0;
}
.cinematic-section::before,
.today-section::before {
content: '';
position: absolute;
top: 0;
left: var(--gutter);
right: var(--gutter);
height: 1px;
z-index: 2;
background: linear-gradient(
90deg,
transparent,
var(--accent-2),
rgba(255, 255, 255, 0.65),
transparent
);
opacity: 0;
transform: scaleX(0);
transform-origin: left center;
transition:
transform 400ms var(--ease-out, ease-out),
opacity 200ms ease 420ms;
pointer-events: none;
}
.today-section::before {
top: 0;
}
.cinematic-section.is-wiped::before,
.today-section.is-wiped::before {
opacity: 0;
transform: scaleX(1);
}
.cinematic-section:not(.is-wiped)::before,
.today-section:not(.is-wiped)::before {
transition: none;
}
.cinematic-section.is-wiped::before,
.today-section.is-wiped::before {
animation: cinematic-section-wipe 620ms ease-out both;
}
@keyframes cinematic-section-wipe {
0% {
opacity: 0;
transform: scaleX(0);
}
18% {
opacity: 1;
}
68% {
opacity: 1;
transform: scaleX(1);
}
100% {
opacity: 0;
transform: scaleX(1);
}
}
#featured {
padding-block: var(--section-flow-space);
padding-bottom: var(--space-8);
}
/* Reveal-on-scroll (set by JS via IntersectionObserver) */
/* Lot 6.27.4 : fondu court, sans déplacement ni décalage entre cartes. Le
contenu, déjà chargé, n'est plus retenu 1,1 s, et un élément qui ne bouge
pas ne peut plus perdre un clic entre l'appui et le relâchement. */
.reveal {
opacity: 0;
transition: opacity var(--dur-reveal) ease-out;
will-change: opacity;
}
.reveal.is-visible {
opacity: 1;
}
/* ============================================================================
* 4. GAME CARD — cinematic, masked, hover crescendo
* ============================================================================ */
.game-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-5);
padding-inline: var(--gutter);
max-width: var(--container-max);
margin-inline: auto;
}
.game-card {
position: relative;
aspect-ratio: 3 / 4;
border-radius: var(--radius-cover);
overflow: hidden;
isolation: isolate;
background: var(--bg-night);
border: 1px solid var(--hairline);
transform: translate3d(0, var(--scroll-py, 0px), 0);
transition:
transform 80ms linear,
border-color var(--dur-base) var(--ease-cinema),
box-shadow var(--dur-base) var(--ease-cinema);
cursor: pointer;
will-change: transform;
}
.game-card .card-art {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition:
transform var(--dur-cinema) var(--ease-cinema),
filter var(--dur-base) var(--ease-cinema);
will-change: transform;
}
.game-card .card-grade {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(var(--palette-bg-rgb, 15, 19, 24), 0) 30%,
rgba(var(--palette-bg-rgb, 15, 19, 24), 0.55) 65%,
rgba(var(--palette-bg-rgb, 15, 19, 24), 0.95) 100%
);
transition: opacity var(--dur-base) var(--ease-cinema);
}
.game-card .card-glow {
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(
120deg,
var(--card-accent, var(--accent-1)) 0%,
transparent 30%,
transparent 70%,
var(--card-accent-2, var(--accent-2)) 100%
);
opacity: 0;
transition: opacity var(--dur-base) var(--ease-cinema);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.game-card .card-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-5);
display: grid;
gap: var(--space-2);
z-index: 2;
}
[data-loading-card] {
cursor: default;
pointer-events: none;
}
[data-loading-card] .card-art {
background:
linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.07) 50%, transparent 65%) 0 0 / 220% 100%,
linear-gradient(155deg, rgba(var(--palette-panel-rgb, 36, 30, 54), 0.9), rgba(var(--palette-panel-rgb, 12, 9, 24), 0.95));
animation: loadingCardSweep 1.6s ease-in-out infinite;
}
@keyframes loadingCardSweep {
to { background-position: -220% 0, 0 0; }
}
.game-card .card-title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.125rem, 1.4vw + 0.4rem, 1.5rem);
line-height: var(--leading-tight);
letter-spacing: -0.015em;
color: var(--text-hi);
margin: 0;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}
.game-card .card-meta {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
font-size: var(--fs-small);
color: var(--text-mid);
}
.game-card .card-date {
color: var(--text-mid);
font-family: var(--font-mono);
font-size: var(--fs-small);
letter-spacing: 0.04em;
}
/* Hover crescendo */
.game-card:hover,
.game-card:focus-within {
transform: translateY(-6px);
border-color: var(--hairline-hi);
box-shadow:
var(--shadow-deep),
0 0 0 1px var(--card-accent, var(--accent-1));
}
.game-card:hover .card-art,
.game-card:focus-within .card-art {
transform: scale(1.08);
filter: saturate(1.15) brightness(1.05);
}
.game-card:hover .card-glow,
.game-card:focus-within .card-glow {
opacity: 0.85;
}
.game-card:hover .card-grade,
.game-card:focus-within .card-grade {
opacity: 0.9;
}
/* Featured (large) variant — neutralized: keep grid coherent (all cards equal) */
.game-card.is-featured {
aspect-ratio: inherit;
grid-column: auto;
}
.featured-masonry .game-card {
aspect-ratio: auto;
min-height: 154px;
}
.free-game-grid .game-card {
aspect-ratio: auto;
min-height: 0;
}
.free-game-card .card-art {
position: relative;
inset: auto;
width: 100%;
aspect-ratio: 16 / 9;
background-color: rgba(var(--palette-bg-rgb, 15, 19, 24), 0.72);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transform: none;
}
.free-game-card:hover .card-art,
.free-game-card:focus-within .card-art {
transform: scale(1.035);
}
.free-game-card .card-body {
position: relative;
bottom: auto;
left: auto;
right: auto;
align-content: start;
padding: var(--space-3);
gap: 7px;
}
.free-game-card .card-title {
display: -webkit-box;
min-height: 0;
max-height: calc(2 * 1.12em);
overflow: hidden;
font-size: clamp(0.86rem, 0.35vw + 0.76rem, 1rem);
line-height: 1.12;
letter-spacing: 0;
text-shadow: none;
text-overflow: ellipsis;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
/* ============================================================================
* 5. FILTER BAR — cinematic chips
* ============================================================================ */
.filter-chip {
appearance: none;
min-height: var(--control-height-sm);
padding: 0 14px;
border: 1px solid var(--hairline);
border-radius: var(--radius-pill);
background: var(--bg-glass);
color: var(--text-secondary);
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: var(--font-weight-semibold);
line-height: 1;
letter-spacing: 0.02em;
cursor: pointer;
transition:
color var(--dur-control) ease,
border-color var(--dur-control) ease,
background-color var(--dur-control) ease,
transform var(--dur-control) ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.filter-chip:hover {
color: var(--text-hi);
border-color: var(--accent-2);
}
.filter-chip:active {
transform: scale(0.97);
}
.filter-chip[aria-pressed='true'],
.filter-chip[aria-selected='true'],
.filter-chip.is-active {
color: var(--state-selected-text);
background: var(--state-selected-bg);
border-color: var(--state-selected-border);
}
/* ============================================================================
* 6. BUTTONS — shared construction and semantic variants
* ============================================================================ */
.button {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--control-height-md);
padding-inline: 18px;
border: 1px solid transparent;
border-radius: var(--radius-control);
color: var(--text-primary);
font-family: var(--font-display);
font-weight: var(--font-weight-semibold);
font-size: var(--fs-small);
line-height: 1;
letter-spacing: 0;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--dur-control) ease,
border-color var(--dur-control) ease,
color var(--dur-control) ease,
transform var(--dur-control) ease;
}
.button:hover {
transform: translateY(-1px);
}
.button:active {
transform: translateY(0);
}
.button--primary {
background: var(--accent-action);
border-color: var(--accent-action);
color: var(--accent-action-ink);
}
.cinematic .button--primary {
color: var(--accent-action-ink);
}
.button--primary:hover {
background: var(--accent-action-hover);
border-color: var(--accent-action-hover);
color: var(--accent-action-ink);
}
.cinematic .button--primary:hover {
color: var(--accent-action-ink);
}
.button--secondary {
background: transparent;
border-color: var(--line-strong);
color: var(--text-primary);
}
.button--secondary:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.28);
}
.button--ghost {
background: transparent;
border-color: transparent;
color: var(--text-secondary);
}
.button--ghost:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text-primary);
}
.button--icon {
width: var(--control-height-md);
min-width: var(--control-height-md);
padding: 0;
background: rgba(255, 255, 255, 0.025);
border-color: var(--nav-border);
color: var(--text-primary);
}
.button--icon:hover {
background: rgba(var(--palette-action-rgb, 106, 159, 208), 0.08);
border-color: var(--state-selected-border);
color: var(--accent-cyan);
}
.follow-toggle[aria-pressed='true'] {
color: var(--text-primary);
background: color-mix(in srgb, var(--accent-magenta) 12%, transparent);
border-color: color-mix(in srgb, var(--accent-magenta) 58%, transparent);
}
.button:disabled,
.filter-chip:disabled,
.news-load-more:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
transform: none;
}
/* ============================================================================
* 8. TODAY — "Sorties du jour" — progressive vertical reveal
* ----------------------------------------------------------------------------
* Cards are arranged in a 3-column grid. Each card uses .reveal so they fade
* + translateY in as the user scrolls. Stagger via --i variable.
* The section starts with negative margin to overlap the hero fade band.
* ============================================================================ */
/* ============================================================================
* 8. TODAY — "Sorties du jour" — overlaps the hero pin, scroll-driven cards
* ============================================================================ */
.today-section {
position: relative;
--section-flow-space: var(--space-8);
padding: var(--section-flow-space) 0;
z-index: 3;
/* Keep this section in normal flow so its dark transition band cannot
cover the last featured cards while scrolling. */
background: linear-gradient(
180deg,
transparent 0%,
rgba(var(--palette-bg-rgb, 15, 19, 24), 0.42) 34%,
rgba(var(--palette-bg-rgb, 15, 19, 24), 0.58) 62%,
transparent 100%
);
margin-top: 0;
padding-top: var(--section-flow-space);
padding-bottom: var(--section-flow-space);
overflow: visible;
}
/* No more abrupt ::after fade — the gradient already dies into transparency. */
.today-section::after {
content: none;
}
.today-card {
position: relative;
aspect-ratio: 3 / 4;
border-radius: var(--radius-cover);
overflow: hidden;
isolation: isolate;
background: var(--bg-night);
border: 1px solid var(--hairline);
cursor: pointer;
transition:
transform var(--dur-base) var(--ease-cinema),
box-shadow var(--dur-base) var(--ease-cinema),
border-color var(--dur-base) var(--ease-cinema);
}
.today-card .card-art {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform var(--dur-cinema) var(--ease-cinema);
will-change: transform;
}
.today-card .card-grade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 35%, rgba(var(--palette-bg-rgb, 15, 19, 24), 0.95) 100%);
}
.today-card .card-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-4);
display: grid;
gap: 6px;
}
.today-card .card-time {
color: var(--text-mid);
font-family: var(--font-mono);
font-size: var(--fs-small);
letter-spacing: 0.06em;
}
.today-card .card-title {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.125rem;
color: var(--text-hi);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
margin: 0;
}
.today-card .card-scores {
display: flex;
gap: 8px;
align-items: center;
font-size: var(--fs-overline);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--text-mid);
}
.today-card:hover,
.today-card:focus-within {
transform: translateY(-6px);
box-shadow: var(--shadow-deep);
border-color: var(--card-accent, var(--accent-1));
}
.today-card:hover .card-art,
.today-card:focus-within .card-art {
transform: scale(1.08);
}
/* Per-card parallax — each today-card is offset on the Y-axis by an amount
driven by JS via --scroll-py. Cards on the same row use --col index so they
don't all move identically; odd cards lag, even cards lead. */
.today-card {
transform: translate3d(0, var(--scroll-py, 0px), 0);
transition:
transform 80ms linear,
opacity var(--dur-reveal) ease-out;
will-change: transform;
}
/* ============================================================================
* 11. SHARED SEARCH RESULTS PANEL
* ----------------------------------------------------------------------------
* Résultats utilisés par cinematic-search.js dans le header partagé.
* ============================================================================ */
/* ============================================================================
* 11d. SEARCH RESULTS PANEL (cinematic-search.js renders into [data-search-results])
* ============================================================================ */
.nav-search-results {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: min(360px, calc(100vw - 32px));
max-height: min(430px, calc(100dvh - 120px));
overflow-y: auto;
display: none;
padding: 8px;
border: 1px solid var(--nav-border);
border-radius: var(--radius-card);
background:
linear-gradient(180deg, rgba(var(--palette-highlight-rgb, 236, 252, 255), 0.1), rgba(255, 255, 255, 0.03)),
var(--nav-bg);
box-shadow:
0 24px 70px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: blur(18px) saturate(1.3);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
z-index: 130;
transform: translateZ(0);
overscroll-behavior: contain;
touch-action: pan-y;
scrollbar-width: thin;
scrollbar-color: rgba(var(--palette-action-rgb, 106, 159, 208), 0.46) rgba(255, 255, 255, 0.08);
scrollbar-gutter: stable;
}
.nav-search-results::-webkit-scrollbar {
width: 10px;
}
.nav-search-results::-webkit-scrollbar-track {
margin: 8px 0;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.07);
}
.nav-search-results::-webkit-scrollbar-thumb {
border: 2px solid rgba(var(--palette-panel-rgb, 8, 13, 22), 0.74);
border-radius: var(--radius-pill);
background: rgba(var(--palette-action-rgb, 106, 159, 208), 0.58);
}
.nav-search.is-open .nav-search-results,
.site-search.is-open .nav-search-results {
display: grid;
gap: 6px;
}
.nav-search-status {
margin: 0;
padding: 10px 12px;
color: var(--text-mute);
font-size: var(--fs-small);
}
.nav-search-result {
width: 100%;
display: grid;
grid-template-columns: 42px 1fr;
gap: 10px;
align-items: center;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.045);
color: var(--text-hi);
padding: 7px;
text-align: left;
cursor: pointer;
}
.nav-search-result:hover,
.nav-search-result:focus-visible {
border-color: color-mix(in oklab, var(--accent-2) 42%, transparent);
background: rgba(var(--palette-action-rgb, 106, 159, 208), 0.1);
outline: 0;
}
.nav-search-thumb {
width: 42px;
aspect-ratio: 3 / 4;
border-radius: 7px;
background: rgba(255, 255, 255, 0.08);
background-size: cover;
background-position: center;
}
.nav-search-copy {
min-width: 0;
display: grid;
gap: 3px;
}
.nav-search-title {
overflow: hidden;
color: var(--text-hi);
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-search-copy small {
overflow: hidden;
color: var(--text-mute);
font-size: 0.72rem;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ============================================================================
* 11b. LIVE DATA SKELETONS
* ============================================================================ */
@keyframes skeletonSweep {
from {
background-position:
120% 0,
0 0;
}
to {
background-position:
-120% 0,
0 0;
}
}
/* ============================================================================
* 12. CALENDAR LIST (next 60 days, grouped by day)
* ============================================================================ */
.calendar-list {
display: flex;
flex-direction: column;
gap: var(--space-7);
padding-inline: var(--gutter);
max-width: var(--container-max);
margin-inline: auto;
}
.calendar-day-header {
font-family: var(--font-display);
font-size: clamp(1.125rem, 1.4vw, 1.375rem);
font-weight: 700;
color: var(--text-hi);
margin: 0 0 var(--space-4) 0;
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--hairline);
text-transform: capitalize;
letter-spacing: -0.01em;
}
.calendar-day-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-4);
}
/* Compact game-card variant — used by calendar list */
.game-card.is-compact {
aspect-ratio: 3 / 4;
}
.game-card.is-compact .card-body {
padding: var(--space-3);
gap: 4px;
}
.game-card.is-compact .card-title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.game-card.is-compact .card-date {
font-size: 0.7rem;
}
.game-card.is-compact .card-meta {
gap: 6px;
font-size: 0.7rem;
line-height: 1.2;
}
.game-card.is-compact .pill {
padding: 1px 6px;
font-size: 0.65rem;
border-radius: var(--radius-pill);
background: rgba(255, 184, 77, 0.15);
color: var(--accent-3);
}
/* ============================================================================
* 13. FOLLOWED GAMES
* ============================================================================ */
.followed-page {
width: min(calc(100% - 2 * var(--gutter)), var(--container-max));
min-height: calc(100vh - var(--header-height-desktop));
margin-inline: auto;
padding: clamp(48px, 7vw, 88px) 0 var(--space-8);
}
.followed-page__empty[hidden],
.followed-grid[hidden],
.followed-agenda[hidden] {
display: none;
}
.followed-agenda__pane[hidden] {
display: none;
}
/* `.cinematic a` colore tous les liens en accent d'action : un lien habillé en
bouton discret garderait donc la couleur d'un lien. Même correction que pour
`.cinematic .button--primary`. */
.followed-agenda a.button--ghost {
color: var(--text-secondary);
}
/* ============================================================================
* 14. DEDICATED CALENDAR PAGE
* ============================================================================ */
.calendar-day--tba .calendar-day-header {
text-transform: none;
color: var(--text-lo);
}
.is-hidden {
display: none !important;
}
@media (max-width: 768px), (pointer: coarse) {
.cinematic-hero .layer,
.cinematic-hero .hero-content,
.reveal,
.game-card .card-art,
.today-card .card-art {
will-change: auto;
}
.game-card,
.today-card {
transform: none;
will-change: auto;
}
/* Le halo etait deja retire sur mobile pour le cout de son flou. En ![]()
,
`display: none` combine a `loading="lazy"` a un effet supplementaire :
l'element ne coupe jamais le viewport, donc la ressource n'est pas
demandee du tout. */
.cinematic-hero .hero-content,
.game-card.reveal:not(.is-visible),
.today-card.reveal,
.today-card.reveal.is-visible,
.today-card.reveal:not(.is-visible) {
transform: none;
}
.game-card .card-art,
.today-card .card-art,
.game-card:hover .card-art,
.game-card:focus-within .card-art,
.today-card:hover .card-art,
.today-card:focus-within .card-art {
transform: none;
}
}
/* ============================================================================
* Lot 5 — charte commune (Docs/DESIGN-SYSTEM.md)
* ============================================================================ */
/* Boutons : états communs à toute la famille. */
.button--primary:hover { background: var(--accent-action-hover); border-color: var(--accent-action-hover); }
.button--secondary:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line-strong); }
.button--ghost:hover { color: var(--text-hi); background: rgba(255, 255, 255, 0.04); }
.button--sm { min-height: var(--control-height-sm); padding-inline: 14px; font-size: var(--fs-caption); }
.button:focus-visible { outline: 2px solid var(--accent-action); outline-offset: 2px; box-shadow: none; }
.button[aria-pressed='true'] { border-color: var(--accent-editorial); background: var(--accent-editorial-soft); color: var(--text-hi); }
@media (hover: none) {
.button:hover { background: revert; }
.button:active { filter: brightness(0.94); }
}
/* Badge canonique : information, jamais une action. Les classes historiques
(.pill, .cd-tag, .score-badge) partagent ces règles. */
.badge,
.pill,
.cd-tag {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 24px;
padding: 0 10px;
border-radius: var(--radius-pill);
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--text-mid);
font-size: var(--fs-caption);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04em;
line-height: 1.2;
white-space: nowrap;
}
.badge--platform .badge__dot,
.cd-tag--platform .badge__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--platform-color, #c9d1d9);
flex: 0 0 auto;
}
/* Couleurs officielles des plateformes (provenance : Docs/DESIGN-SYSTEM.md § 4).
La couleur n'est qu'un point : le nom est toujours écrit. */
[data-platform='playstation'] { --platform-color: #0070d1; }
[data-platform='xbox'] { --platform-color: #107c10; }
[data-platform='nintendo'] { --platform-color: #e60012; }
[data-platform='steam'] { --platform-color: #1a9fff; }
.badge--beta {
background: var(--accent-data-soft);
border-color: rgba(230, 180, 90, 0.35);
color: var(--accent-data);
text-transform: uppercase;
font-size: 0.6875rem;
letter-spacing: 0.08em;
}
/* État commun : une ligne, icône + texte + action optionnelle. */
.state {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: var(--radius-control);
background: var(--surface-1);
border: 1px solid var(--line);
color: var(--text-mid);
font-size: var(--fs-small);
}
.state[data-state='loading'] { color: var(--text-lo); }
.state[data-state='error'] { border-color: rgba(229, 96, 91, 0.35); }
.state[data-state='stale'] { border-color: rgba(230, 180, 90, 0.35); }
/* Continuité : la section suivante affleure sous le hero, sans indicateur. */
/* Continuite hero -> section suivante : voir `.home-block--hero + .home-block` (lot 8). */
/* Header : version applicative discrète, badge BÊTA, détail « Build ». */
.site-brand-group { display: flex; align-items: center; gap: 8px; min-width: 0; }
.site-brand__version {
margin-left: 4px;
color: var(--text-lo);
font-size: var(--fs-caption);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.02em;
}
.site-build {
position: relative;
margin-left: 6px;
}
.site-build > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
min-height: 24px;
border-radius: var(--radius-pill);
}
.site-build > summary::-webkit-details-marker { display: none; }
.site-build > summary:focus-visible { outline: 2px solid var(--accent-action); outline-offset: 2px; }
.site-build__panel {
position: absolute;
left: 0;
top: calc(100% + 8px);
z-index: 130;
min-width: 300px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
border-radius: var(--radius-control);
background: var(--surface-1);
border: 1px solid var(--line-strong);
box-shadow: var(--shadow-panel);
font-size: var(--fs-caption);
color: var(--text-hi);
white-space: nowrap;
}
.site-build__panel dt { color: var(--text-lo); margin: 0; }
.site-build__panel dd { margin: 0; font-family: var(--font-mono); }
@media (max-width: 768px) {
.site-brand__version, .site-build { display: none; }
}
/* Métadonnées du hero : mêmes surfaces et lignes que les badges (label + valeur). */
.score-badge {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
color: var(--text-mid);
}
.score-badge .score-value { color: var(--text-hi); }
/* Lot 6 — zones tactiles ≥ 44 px et navigation au pouce. */
.mobile-nav__link,
.news-page-filters a,
.news-load-more,
.news-retry,
.site-menu-toggle,
.site-search__toggle,
.followed-shortcut { min-height: var(--control-height-md); }
.mobile-nav__link { display: flex; align-items: center; }
/* ============================================================================
* Lot 8 — mode Personnaliser et hero adaptatif (§ 3.4)
* ============================================================================ */
/* Le header reste superposé au premier écran : quand le hero n'est plus en
tête, le contenu commence sous lui. */
body[data-hero-position='later'] main[data-home-layout] { padding-top: calc(var(--header-height-desktop) + 32px); }
@media (max-width: 768px) {
body[data-hero-position='later'] main[data-home-layout] { padding-top: calc(var(--header-height-mobile) + 12px); }
}
/* Outils de bloc : invisibles hors du mode. */
.block-tools { display: none; }
body[data-customizing] .block-tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
position: absolute;
top: 0;
right: 8px;
z-index: 6;
min-height: 40px;
padding: 0;
}
.block-tools__label {
display: none;
font-family: var(--font-display);
font-weight: var(--font-weight-bold);
font-size: var(--fs-lead);
color: var(--text-hi);
}
.block-tools__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.block-tools__handle { cursor: grab; touch-action: none; }
.block-tools__handle:active { cursor: grabbing; }
/* Les contenus restent dans leur grille pendant le déplacement. */
body[data-customizing] main[data-home-layout] {
padding-bottom: 120px;
}
body[data-customizing] .block-tools .button { min-width: 36px; min-height: 36px; padding: 4px; border-color: transparent; background: transparent; box-shadow: none; }
body[data-customizing] .block-tools [data-layout-handle] {
color: var(--accent-action);
border-color: color-mix(in srgb, var(--accent-action) 70%, transparent);
background: color-mix(in srgb, var(--accent-action) 14%, transparent);
}
body[data-customizing] .block-tools .button:hover { background: var(--surface-1); }
.home-customize .lock-open { display: none; }
.home-customize[aria-pressed='true'] .lock-open { display: block; }
.home-customize[aria-pressed='true'] .lock-closed { display: none; }
.home-customize[aria-pressed='true'] { color: var(--accent-action); }
/* Barre d'actions du mode : n'existe que pendant l'édition (ce n'est pas une
barre de navigation basse). */
@media (max-width: 600px) {
.block-tools { flex-wrap: wrap; }
}
.account-shortcut { flex-shrink: 0; }
.admin-shortcut { position: relative; }
[data-account-header-avatar] { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
[data-account-shortcut] [hidden] { display: none; }
.account-mobile-shortcut { display: flex; align-items: center; gap: 8px; }
@media (max-width: 768px) {
.site-header .account-shortcut { display: none; }
.site-header .account-shortcut[data-connected="true"] { display: inline-flex; }
}
/* Échec de synchronisation : visible seulement lorsqu’une action reste à reprendre. */
.account-sync-notice:not([hidden]) { position: fixed; z-index: 3000; inset: auto 16px 16px; max-width: 640px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); background: var(--surface-1); color: var(--text-hi); box-shadow: 0 8px 24px #0005; font-size: 13px; }
.account-sync-notice span { flex: 1 1 100%; }
.account-sync-notice a { color: var(--accent-action); }
/* Composition « Bibliothèque graphite » : structure commune, accueil, calendrier et News.
Les règles d'une seule page sont dans la feuille de cette page (lot 6.24.0,
voir cinematic-components.css). */
body.cinematic {
--library-width: 1440px;
--library-gutter: clamp(16px, 2.5vw, 38px);
--surface-card: var(--palette-library-card, #10161b);
--home-release-card-height: 88px;
--home-release-gap: 8px;
--home-release-preview-height: calc(6 * var(--home-release-card-height) + 5 * var(--home-release-gap));
--radius-cover: 2px;
--radius-control: 3px;
background: var(--palette-library-bg, #151c21);
}
body.cinematic::after { display: none; }
.cinematic :is(.news-card, .news-featured, .detail-news-card) { background: var(--surface-card); }
.cinematic .news-card:has(.news-card-link:is(:hover, :focus-visible)),
.cinematic .news-featured:has(.news-read-link:is(:hover, :focus-visible)),
.cinematic .detail-news-card:is(:hover, :focus-visible) { background: var(--surface-1); border-color: var(--line-strong); }
.cinematic .detail-news-card:focus-visible { outline: 2px solid var(--accent-action); outline-offset: 2px; }
.home-block[data-release-active] :is(.card-title, .week-title) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
[data-release-explorer] [data-block-items] > [hidden],
[data-release-pagination][hidden] { display: none !important; }
[data-home-customize]:disabled { opacity: .4; cursor: default; }
.site-header,
.site-header.site-header--hero-overlay,
.site-header.is-condensed {
position: sticky;
top: 0;
width: min(100%, var(--library-width));
background: var(--palette-library-bg, #151c21);
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
box-shadow: none;
}
.site-header__bar {
display: flex;
gap: 24px;
height: 64px;
padding-inline: var(--library-gutter);
}
.site-brand { font-size: clamp(18px, 1.8vw, 27px); font-weight: 700; gap: 0; }
.site-brand__mark { display: none; }
.site-brand__version { font-size: 10px; margin-left: 10px; }
.primary-nav { margin-inline: auto; gap: 26px; }
.primary-nav__link { font-size: 14px; padding-inline: 0; }
.site-header__actions { margin-left: auto; gap: 6px; }
.site-header .button--icon { background: transparent; border-color: transparent; box-shadow: none; }
.site-header [data-admin-header-shortcut][hidden] { display: none !important; }
.site-search,
.site-menu-toggle { border-radius: var(--radius-control); }
.cinematic .site-search:focus-within { box-shadow: none; border-color: var(--line-strong); }
.cinematic .site-search:has(.nav-search-field:focus-visible) { outline: 2px solid var(--text-lo); outline-offset: 2px; }
/* Recherche du header sans cadre (retour proprietaire du 20 sept. 2026) : c'etait
le seul controle encadre de la barre. Au repos, elle se fond dans le header
comme les icones voisines ; ouverte, un filet bas marque la saisie et tient
lieu d'indicateur de focus. Sous 769 px, le bouton garde son cadre : il y est
le jumeau du bouton de menu. */
@media (min-width: 769px) {
.cinematic .site-search { border-color: transparent; background: transparent; }
.cinematic .site-search:is(.is-open, :focus-within) { border-color: transparent; border-bottom-color: var(--line-strong); }
.cinematic .site-search:has(.nav-search-field:focus-visible) { outline: 0; border-bottom-color: var(--text-mid); }
}
.cinematic .nav-search-results {
left: -1px;
right: -1px;
width: auto;
border-radius: 2px;
background: var(--palette-library-panel, #171e24);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 12px 24px rgba(0, 0, 0, .24);
}
.cinematic .nav-search-filters select { border-radius: 2px; background: var(--surface-card); }
.cinematic .nav-search-filters :is(select, button):focus-visible { outline-color: var(--text-lo); }
.cinematic .nav-search-field { font-family: var(--font-body); font-weight: 500; }
.cinematic .nav-search-result { grid-template-columns: 48px minmax(0, 1fr); padding: 0; border: 1px solid var(--line); border-radius: 2px; background: var(--surface-card); }
.cinematic .nav-search-result:is(:hover, :focus-visible) { background: var(--surface-1); border-color: var(--line-strong); }
.cinematic .nav-search-result:focus-visible { outline: 2px solid var(--accent-action); outline-offset: -2px; }
.cinematic .nav-search-thumb { width: 48px; border-radius: 0; }
.cinematic .nav-search-copy { padding: 8px 8px 8px 0; }
.cinematic .nav-search-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; white-space: normal; line-height: 1.35; }
.cinematic .cd-overlay {
--radius-sm: 2px;
--radius-md: 2px;
--radius-lg: 2px;
--radius-card: 2px;
background: var(--palette-library-bg, #151c21);
}
.cinematic .cd-lightbox img { border-radius: 2px; }
.cinematic .cd-close:hover { color: var(--text-hi); }
.cinematic .cd-close:focus-visible { outline: 2px solid var(--text-mid); outline-offset: -4px; box-shadow: none; }
.cinematic .cd-similar-grid .game-mini { background: var(--surface-card); }
.cinematic .detail-news-card {
grid-template-columns: minmax(84px, 32%) minmax(0, 1fr);
min-width: 0;
padding: 0;
gap: 4px 12px;
border-color: var(--line);
transform: none;
}
.cinematic .detail-news-card[hidden] { display: none; }
.cinematic .detail-news-thumb { min-height: 128px; height: 100%; border-radius: 0; }
.cinematic .detail-news-card > :not(.detail-news-thumb) { margin-right: 12px; }
.cinematic .detail-news-source { padding-top: 10px; line-height: 1.4; }
.cinematic .detail-news-date { padding-bottom: 10px; }
.cinematic .detail-news-card strong { align-self: start; color: var(--text-hi); line-height: 1.35; -webkit-line-clamp: 3; }
.cinematic .cd-video-card { gap: 0; border: 1px solid var(--line); background: var(--surface-card); overflow: hidden; align-content: start; }
.cinematic .cd-video-card strong { padding: 10px 12px; line-height: 1.4; }
.cinematic .cd-video-card :is(.cd-video-facade, iframe) { border-radius: 0; }
.cd-videos-section, .cd-section[data-news-state] { container-type: inline-size; }
.cinematic :is(.cd-videos-grid, .detail-news-grid) { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 520px) {
.cinematic .cd-videos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cinematic .cd-videos-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cinematic .cd-video-card:only-child { grid-column: 1 / -1; }
.cinematic .detail-news-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cinematic .detail-news-card { grid-column: span 2; }
}
@container (520px <= width < 780px) {
.cinematic .detail-news-card:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: 1 / -1; }
}
@container (min-width: 780px) {
.cinematic .detail-news-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cinematic .detail-news-grid > .detail-news-card { grid-column: span 2; }
.cinematic .detail-news-grid:has(> :nth-child(3n + 2 of :not([hidden])):nth-last-child(1 of :not([hidden]))) > :nth-last-child(-n + 2 of :not([hidden])),
.cinematic .detail-news-grid:has(> :nth-child(3n + 1 of :not([hidden])):nth-last-child(1 of :not([hidden]))) > :nth-last-child(-n + 4 of :not([hidden])) { grid-column: span 3; }
.cinematic .detail-news-grid > .detail-news-card:only-child { grid-column: 1 / -1; }
}
.site-build > summary { border: 0; border-radius: 0; background: transparent; padding-inline: 0; }
.site-build__panel { width: min(400px, calc(100vw - 32px)); min-width: 0; margin: 0; grid-template-columns: max-content minmax(0, 1fr); white-space: normal; overflow-wrap: anywhere; }
.site-build__panel dt { white-space: nowrap; }
.site-build__panel dd { min-width: 0; }
.mobile-drawer { border-radius: 0; background: var(--palette-library-panel, #171e24); }
.mobile-nav__link { border-radius: 0; background: transparent; border-bottom: 1px solid var(--line); }
.site-header .badge--beta { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-lo); box-shadow: none; font-size: 9px; font-weight: 600; letter-spacing: .06em; }
.community-links { display: flex; align-items: center; }
.community-links a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; color: var(--text-mid); border-radius: var(--radius-control); text-decoration: none; }
.community-links a:hover { color: var(--text-hi); background: var(--surface-1); }
.community-links a:focus-visible { outline: 2px solid var(--accent-action); outline-offset: 2px; }
.community-footer { justify-content: center; flex-wrap: wrap; gap: 4px 22px; width: min(100%, var(--library-width)); margin: 0 auto; padding: 14px var(--library-gutter) 24px; border-top: 1px solid var(--line); font-size: 12px; }
.coffee-steam { animation: coffee-steam 3.6s ease-in-out infinite; }
@keyframes coffee-steam { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-1.5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .coffee-steam { animation: none; } }
[data-home-layout] {
max-width: var(--library-width);
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
padding-bottom: 32px;
}
[data-home-layout] > #top { position: absolute; }
[data-home-layout] > .home-block {
min-width: 0;
margin: 0;
padding: 0 var(--library-gutter);
}
[data-home-layout] > #featured { padding-block: 0; }
body[data-hero-position='later'] main[data-home-layout] { padding-top: 24px; }
.cinematic .button--primary { background: var(--surface-card); border-color: var(--line-strong); color: var(--text-hi); }
.cinematic .button--primary:hover { background: var(--surface-1); border-color: var(--text-lo); color: var(--text-hi); transform: none; }
:is(.home-block h2, .community-page__section h2, .cd-chapter-title) { font-size: 20px; line-height: 1.3; letter-spacing: .01em; font-weight: 650; }
.home-block .featured-masonry .game-card,
.home-block .featured-masonry .game-card.is-featured {
width: 100%;
aspect-ratio: 3 / 4;
grid-column: auto;
grid-row: auto;
min-height: 0;
border-radius: 2px;
box-shadow: none;
transform: none;
}
.home-block .featured-masonry .card-art { background-size: cover; transform: none; }
.home-block .featured-masonry .card-meta { font-size: 10px; gap: 4px; flex-wrap: wrap; }
.home-block .featured-masonry .card-date { font-size: 10px; letter-spacing: .02em; }
.home-block .today-card,
.week-card {
position: relative;
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
min-height: var(--home-release-card-height);
aspect-ratio: auto;
background: var(--surface-card);
border: 1px solid var(--line);
border-radius: 0;
transform: none;
box-shadow: none;
cursor: pointer;
overflow: hidden;
}
.home-block .today-card .card-art,
.week-art { position: relative; inset: auto; width: 100%; height: 100%; background-size: cover; background-position: center; transform: none; }
.home-block .today-card .card-body,
.week-body { position: relative; inset: auto; padding: 7px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.home-block .today-card .card-title,
.week-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.35; font-weight: 600; text-shadow: none; overflow-wrap: anywhere; }
.home-block .today-card .card-time,
.home-block .today-card .card-scores,
.week-date,
.week-meta { font: 11px / 1.4 var(--font-body); color: var(--text-lo); letter-spacing: 0; text-transform: none; }
.home-block .today-card .card-scores,
.week-meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Survol des lignes de sorties : niveau 3 « liste » de motion.css (classe motion-list). */
.week-card:focus-visible { outline: 2px solid var(--accent-action); outline-offset: 2px; }
/* Lisibilité mobile (audit U2, 2026-09-13) : plancher de 11 px pour les
métadonnées des cartes. */
@media (max-width: 899px) {
.home-block .featured-masonry .card-meta, .home-block .featured-masonry .card-date,
.home-block .news-card-meta, .news-page .news-card-meta, .site-brand__version, .site-header .badge--beta { font-size: 11px; }
}
body[data-customizing] .block-tools .block-tools__size { font-size: 11px; padding-inline: 8px; }
body[data-customizing] .block-tools .button { transform: none; }
.home-customize-anchor { display: flex; }
.home-layout-hint { position: fixed; z-index: 100; display: flex; gap: 8px; padding: 12px; background: var(--surface-card); border: 1px solid var(--line-strong); border-radius: 2px; box-shadow: 0 8px 24px #0004; }
.home-layout-hint[hidden] { display: none; }
.home-layout-hint::before { content: ''; position: absolute; top: -5px; left: var(--hint-anchor, 20px); width: 8px; height: 8px; transform: rotate(45deg); background: var(--surface-card); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.home-layout-hint p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-lo); }
.home-layout-hint strong { display: block; margin-bottom: 3px; font-weight: 600; color: var(--text-hi); }
.home-layout-hint button { align-self: start; flex: 0 0 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--text-mid); font-size: 20px; cursor: pointer; }
[data-home-layout-reset] { flex: 0 0 44px !important; width: 44px; min-height: 44px; padding: 10px; }
.library-footer { max-width: var(--library-width); margin-inline: auto; padding: 20px var(--library-gutter); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; color: var(--text-lo); font-size: 12px; }
.cinematic :is(.news-page-head, .calendar-page-hero, .sources-page-header, .followed-page .page-intro, .community-page__intro) h1 { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
.followed-page { padding-top: 32px; }
.followed-page .page-intro__lead { margin-top: 8px; font-size: 14px; line-height: 1.5; }
:is(.news-page .news-page-intro, .community-page__intro > p) { margin-top: 8px; font-size: 14px; line-height: 1.5; }
@media (min-width: 769px) {
[data-home-layout] { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; padding-inline: var(--library-gutter); }
[data-home-layout] > .home-block { grid-column: 1 / -1; padding: 0; }
[data-home-layout] > :is([data-block='today'], [data-block='week'], [data-block='news']) { grid-column: auto; }
[data-home-layout] > :is([data-block='today'], [data-block='week'], [data-block='news']) h2 { font-size: 18px; }
}
@media (min-width: 1100px) {
.site-header__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
.site-header__actions { width: 100%; min-width: 0; margin-left: 0; justify-content: flex-end; }
.site-search:not(.is-open) { width: 240px; }
.site-search:not(.is-open) .site-search__toggle { width: 240px; justify-items: start; padding-left: 14px; }
.site-search:not(.is-open)::after { content: 'Rechercher un jeu…'; position: absolute; left: 44px; right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-lo); font-size: 12px; pointer-events: none; }
}
@media (max-width: 1099px) and (min-width: 769px) {
[data-home-layout] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-home-layout] > [data-block='news'] { grid-column: 1 / -1; }
.site-header__bar { gap: 8px; padding-inline: 14px; }
.site-header__actions { gap: 0; }
.site-brand-group { gap: 4px; }
.primary-nav { gap: 8px; }
.primary-nav__link { font-size: 12px; }
.site-build { margin-left: 0; }
}
@media (max-width: 768px) {
.site-header__bar { height: 60px; gap: 8px; }
.site-brand__name { font-size: 18px; }
.site-search:not(.is-open) { width: 44px; flex: 0 0 44px; }
.site-brand__version { display: inline; font-size: 8px; margin-left: 6px; }
.site-header__actions { gap: 0; }
.site-header .followed-shortcut { display: none; }
.site-header .button--icon,
.site-menu-toggle { width: 44px; min-width: 44px; }
.site-brand-group { gap: 4px; }
:is(.home-block h2, .community-page__section h2, .cd-chapter-title) { font-size: 18px; }
}
@media (max-width: 360px) {
.site-brand__name { font-size: 16px; }
.site-brand__version { margin-left: 4px; }
.site-header__bar { gap: 4px; }
}
/* ============================================================================
* game-page.css — Fiche jeu indexable, bibliothèque graphite
* ----------------------------------------------------------------------------
* Suit le cahier des charges utilisateur :
* - Composition éditoriale (pas un dashboard IA), asymétrie maîtrisée
* - Surfaces graphite et séparateurs discrets
* - 2 colonnes desktop : 65% gauche (hero+synopsis+vidéos+galerie) /
* 35% droite (métriques+infos+prix). Stack vertical mobile.
* - Max 5 zones majeures, pas de grille de cartes identiques partout.
* ==========================================================================*/
/* ============================================================================
* CONTAINER PRINCIPAL
* ============================================================================ */
.game-page {
max-width: 1180px;
margin: 0 auto;
padding: 2rem clamp(16px, 3vw, 32px) 4rem;
}
/* ============================================================================
* 1. HERO — bandeau cinématique intégré
* ============================================================================ */
.gp-hero {
position: relative;
grid-area: hero;
border-radius: var(--radius-sm);
overflow: hidden;
min-height: 380px;
display: flex;
align-items: flex-end;
margin-bottom: 1.5rem;
border: 0;
}
.gp-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 28%;
z-index: 0;
}
.gp-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(0deg, rgba(var(--palette-bg-rgb, 15, 19, 24), 0.96) 4%, rgba(var(--palette-bg-rgb, 15, 19, 24), 0.5) 40%, rgba(var(--palette-bg-rgb, 15, 19, 24), 0.2) 100%),
linear-gradient(90deg, rgba(var(--palette-bg-rgb, 15, 19, 24), 0.7) 0%, transparent 55%);
}
.gp-hero-content {
position: relative;
z-index: 1;
padding: 2rem 2.2rem;
width: 100%;
}
.gp-hero-overline {
display: block;
color: var(--accent-2);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.gp-edition-badge {
display: inline-flex;
align-items: center;
width: fit-content;
margin-bottom: 0.65rem;
padding: 0.28rem 0;
border: 0;
background: transparent;
color: var(--accent-cyan);
font-size: var(--fs-caption);
font-weight: var(--font-weight-semibold);
}
.gp-hero-title {
font-family: var(--font-ui, 'Manrope', system-ui, sans-serif);
font-size: var(--text-h1);
font-weight: 800;
line-height: 1;
letter-spacing: var(--tracking-display);
margin: 0 0 0.8rem;
color: #fff;
overflow-wrap: anywhere;
}
.gp-hero-sub {
color: var(--text-mid);
font-size: 0.85rem;
margin-bottom: 1.2rem;
letter-spacing: 0.02em;
}
/* Boutons d'action — construction commune */
.gp-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.gp-btn {
white-space: normal;
}
/* ============================================================================
* 2. LAYOUT — vis-à-vis jaquette | contenu (lot 8d, voir la fin de la feuille)
* ============================================================================ */
.gp-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
}
.gp-main { min-width: 0; }
.gp-aside { min-width: 0; }
/* ============================================================================
* GROUPES ÉDITORIAUX — alignements et séparateurs
* ============================================================================ */
.gp-panel {
background: transparent;
border: 0;
border-top: 1px solid var(--hairline);
border-radius: 0;
padding: 1.25rem 0;
margin-bottom: 1.2rem;
position: relative;
}
.cinematic .gp-panel-label {
font-size: 0.9rem;
font-weight: 700;
text-transform: none;
letter-spacing: 0.02em;
color: var(--text-hi);
margin: 0 0 1rem;
}
/* ============================================================================
* COLONNE PRINCIPALE — synopsis + vidéos + galerie
* ============================================================================ */
/* Synopsis */
.gp-synopsis {
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-hi);
letter-spacing: -0.005em;
}
/* Vidéos — grille 2 colonnes pleine largeur comme la galerie */
.gp-videos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
@media (max-width: 520px) {
.gp-videos { grid-template-columns: 1fr; }
}
.gp-video {
position: relative;
display: block;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--hairline);
text-decoration: none;
transition: border-color 0.2s, transform 0.25s;
aspect-ratio: 16 / 9;
}
.gp-video:hover {
border-color: var(--state-selected-border);
transform: scale(var(--motion-list-zoom)); /* niveau 3, motion.css */
}
.gp-video img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gp-video-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 48px; height: 48px;
background: rgba(var(--palette-bg-rgb, 15, 19, 24), .75);
border: 1px solid var(--hairline-hi);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; color: var(--text-hi);
transition: transform 0.2s;
}
.gp-video:hover .gp-video-play {
transform: translate(-50%, -50%) scale(1.1);
}
.gp-video-name {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 1.5rem 0.7rem 0.5rem;
font-size: 0.78rem;
color: #fff;
background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
line-height: 1.3;
}
.gp-video-name {
font-size: 0.85rem;
color: var(--text-mid);
line-height: 1.4;
}
/* Galerie — grille 2×2 dans un panel glass */
.gp-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
@media (max-width: 480px) {
.gp-gallery { grid-template-columns: 1fr; }
}
.gp-shot {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: var(--radius-sm);
outline: 1px solid rgba(255, 255, 255, 0.04);
outline-offset: -1px;
cursor: pointer;
transition: transform 0.3s ease, outline-color 0.3s;
}
.gp-shot:hover {
transform: scale(var(--motion-list-zoom)); /* niveau 3, motion.css */
outline-color: rgba(var(--palette-action-rgb, 106, 159, 208), 0.4);
}
/* ============================================================================
* COLONNE ASIDE — métriques + infos + prix
* ============================================================================ */
/* Bloc métriques — un seul panneau avec lignes internes */
.gp-metric-row {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
align-items: center;
justify-content: space-between;
padding: 0.7rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.gp-metric-row:last-child {
border-bottom: none;
}
.gp-metric-label {
font-size: 0.85rem;
color: var(--text-mid);
}
.gp-metric-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
min-width: 52px;
padding: 0.3rem 0.8rem;
border-radius: 0;
font-weight: var(--font-weight-bold);
font-size: 0.95rem;
background: transparent;
}
.gp-metric-chip--high,
.gp-metric-chip--medium,
.gp-metric-chip--low { color: var(--accent-data); background: transparent; }
.gp-metric-reviews {
margin-left: 0.5rem;
font-size: 0.72rem;
color: var(--text-mute);
white-space: nowrap;
}
.gp-metric-chip--stale {
opacity: 0.75;
}
.gp-metric-link {
margin-left: 0.5rem;
font-size: 0.72rem;
color: var(--accent-2);
text-decoration: none;
white-space: nowrap;
}
.gp-metric-link:hover,
.gp-metric-link:focus-visible {
text-decoration: underline;
}
.gp-metric-chip--muted {
color: var(--text-mute);
font-size: 0.75rem;
font-weight: 500;
background: transparent;
}
/* HLTB mini-timeline */
.gp-hltb {
display: flex;
gap: 0.5rem;
margin-top: 0.3rem;
}
/* État sans durée : une ligne compacte, un lien externe (jamais trois colonnes vides). */
.gp-hltb-empty {
margin: 0;
padding: 0.5rem 0.3rem;
font-size: 0.85rem;
color: var(--text-mid);
}
a.gp-hltb-empty {
color: var(--accent-2);
font-weight: 600;
text-decoration: none;
}
a.gp-hltb-empty:hover,
a.gp-hltb-empty:focus-visible {
text-decoration: underline;
}
a.gp-hltb-empty:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.gp-hltb-col {
flex: 1;
text-align: center;
padding: 0.5rem 0.3rem;
background: transparent;
border-radius: var(--radius-sm);
}
.gp-hltb-col.is-primary .gp-hltb-num {
font-size: 1.45rem;
color: var(--accent-cyan);
}
.gp-hltb-col:not(.is-primary) {
opacity: 0.76;
}
.gp-hltb-num {
display: block;
font-size: 0.95rem;
font-weight: 700;
color: var(--accent-2);
}
.gp-hltb-sub {
display: block;
font-size: 0.65rem;
color: var(--text-mute);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 0.15rem;
}
/* Infos rapides */
.gp-info-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 0.85rem;
}
.gp-info-row:last-child { border-bottom: none; }
.gp-info-key {
color: var(--text-mute);
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.06em;
}
.gp-info-val {
min-width: 0;
color: var(--text-hi);
text-align: right;
overflow-wrap: anywhere;
}
/* Lignes de liste (tests et critiques) */
.gp-price-row {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
align-items: center;
justify-content: space-between;
padding: 0.6rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.gp-price-row:last-child { border-bottom: none; }
/* Liens externes */
.gp-links {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.gp-link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.35rem 0;
border: 0;
margin-right: 1rem;
color: var(--accent-2);
text-decoration: none;
font-size: 0.8rem;
transition: background 0.2s, border-color 0.2s;
}
.gp-link:hover {
background: rgba(var(--palette-action-rgb, 106, 159, 208), 0.08);
border-color: rgba(var(--palette-action-rgb, 106, 159, 208), 0.3);
}
/* ============================================================================
* JEUX SIMILAIRES — grille de pochettes verticales (cover + titre)
* ============================================================================ */
.gp-similar-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
gap: 0.75rem;
}
.gp-similar-card {
display: flex;
flex-direction: column;
gap: 0.4rem;
text-decoration: none;
transition: transform 0.25s;
}
.gp-similar-card:hover {
transform: translateY(var(--motion-object-lift)); /* niveau 2, motion.css */
}
.gp-similar-cover {
width: 100%;
aspect-ratio: 3 / 4;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--hairline);
background: var(--bg-night);
transition: border-color 0.25s, box-shadow 0.25s;
}
.gp-similar-card:hover .gp-similar-cover {
border-color: var(--state-selected-border);
}
.gp-similar-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gp-similar-cover-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--bg-dusk), var(--bg-deep));
color: var(--text-mute);
font-size: 1.5rem;
}
.gp-similar-name {
font-size: 0.78rem;
color: var(--text-hi);
font-weight: 600;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.gp-similar-date {
font-size: 0.68rem;
color: var(--text-mute);
}
.gp-data-sources {
margin: 1rem 0 0;
color: var(--text-mute);
font-size: var(--fs-caption);
line-height: 1.5;
}
/* ============================================================================
* Lot 8d — fiche en vis-à-vis
* Même principe que la modale : jaquette 2:3 à gauche (collante ≥ 900 px),
* contenu empilé dans une seule colonne à droite. Le bandeau du hero se fait
* plus bas, le titre plus petit : la jaquette porte désormais l'identité.
* ==========================================================================*/
.gp-hero {
min-height: 200px;
margin-bottom: 0;
}
.gp-hero-title {
font-size: clamp(28px, 4vw, 48px);
line-height: 1.05;
}
.gp-hero-content { padding: 1.5rem 1.8rem; }
.gp-page-actions { margin-bottom: 1.25rem; gap: 8px 20px; }
.gp-page-actions .gp-btn {
padding-inline: 0;
border: 0;
background: transparent;
box-shadow: none;
min-height: 44px;
}
.gp-page-actions .gp-btn:hover { color: var(--accent-action); text-decoration: underline; }
/* --- Colonne jaquette --- */
.gp-poster {
grid-area: poster;
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
align-content: start;
margin-bottom: 1.2rem;
}
.gp-poster-art {
position: relative;
aspect-ratio: 2 / 3;
overflow: hidden;
border-radius: var(--radius-sm);
border: 1px solid var(--hairline);
background: var(--surface-2);
}
.gp-poster-art img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Sans jaquette : initiales sur une surface pleine, jamais une image cassée. */
.gp-poster-initials {
display: grid;
place-items: center;
width: 100%;
height: 100%;
background: var(--surface-2);
color: var(--text-lo);
font-weight: var(--font-weight-bold);
font-size: clamp(32px, 8vw, 56px);
letter-spacing: 0.06em;
}
.gp-poster-facts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.6rem;
}
.gp-poster-date {
color: var(--text-lo);
font-size: var(--fs-small);
}
.gp-main { grid-area: main; }
.gp-aside { grid-area: aside; }
/* --- Smartphone (< 900 px) : petite jaquette et titre dans la même rangée --- */
@media (max-width: 899px) {
.gp-layout {
grid-template-columns: 96px minmax(0, 1fr);
grid-template-areas:
"poster hero"
"main main"
"aside aside";
gap: 20px 16px;
}
.gp-poster {
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
margin-bottom: 0;
}
.gp-poster-initials { font-size: 28px; }
.gp-hero { min-height: 0; align-items: flex-start; }
.gp-hero-bg { display: none; }
.gp-hero-content { padding: 0; }
.gp-hero-title { font-size: clamp(22px, 4vw, 32px); line-height: 1.15; }
.gp-hero-sub { font-size: 12px; line-height: 1.5; margin-bottom: 0; }
.gp-poster-date { font-size: 11px; }
}
/* --- Ordinateur (≥ 900 px) : le vis-à-vis --- */
@media (min-width: 900px) {
.gp-layout {
grid-template-columns: 300px minmax(0, 1fr);
grid-template-areas:
"poster hero"
"poster main"
"poster aside";
column-gap: 1.5rem;
}
.gp-poster {
position: sticky;
align-self: start;
top: calc(var(--header-height, 64px) + 24px);
}
}
/* Écran court : la jaquette collante mangerait toute la hauteur utile. */
@media (min-width: 900px) and (max-height: 699px) {
.gp-poster { position: static; }
}
@media (prefers-reduced-motion: reduce) {
.gp-video, .gp-video-play, .gp-shot, .gp-similar-card, .gp-similar-cover {
transition: none;
}
.gp-video:hover, .gp-shot:hover, .gp-similar-card:hover { transform: none; }
.gp-video:hover .gp-video-play { transform: translate(-50%, -50%); }
}