/* ════════════════════════════════════════════════════════════════════════
MALKIDOW — « nouvelle base » (octobre 2026)
Couche chargée APRÈS mk-ui.css, active seulement sous body.mk-rp (site public, espace joueur, panel du staff).
Maquettes validées par le propriétaire : noir légèrement rougi, rouge Malkidow, Inter et JetBrains Mono, beaucoup d'air.
Animations inspirées des sites RP (rideau d'intro, apparitions floues au défilement, volet des titres, cartes en
relief, bouton aimanté, compteurs, grain et lueurs) : mk-rp.js pose les classes, tout s'arrête avec
prefers-reduced-motion.
════════════════════════════════════════════════════════════════════════ */
body.mk-rp {
/* Fonds : noir rougi, surfaces un cran plus claires */
--mk-ink: #0e0c0d;
--mk-raised: #110e0f;
--mk-surface: #171314;
--mk-surface-2: #1e1819;
--mk-relief: #2a2223;
/* Texte : #978d8e reste à 4,8:1 au pire (sur #2a2223) */
--mk-text: #f6f3f3;
--mk-text-2: #b3a9aa;
--mk-text-3: #978d8e;
--mk-text-4: #8a8081;
/* Rouge : --mk-red en aplat sous du blanc (4,6:1), --mk-red-text en texte (4,6:1 au pire), --mk-red-vivid pour les grands titres */
--mk-red: #d63c41;
--mk-red-hover: #c93338;
--mk-red-dark: #7d1f23;
--mk-red-text: #ec5a5f;
--mk-red-light: #ff7b7f;
--mk-red-soft: #ff8a8d;
--mk-red-vivid: #e5484d;
--mk-gold: #fbbf24;
--mk-gold-light: #fcd34d;
--mk-gold-ink: #1d1400;
--mk-foil: #f2cf7a;
--mk-green: #4ade80;
--mk-green-light: #86efac;
--mk-valid: #15803d;
--mk-blue: #60a5fa;
--mk-blue-light: #93c5fd;
--mk-orange: #fb923c;
--mk-grad-action: linear-gradient(180deg, #dd4449, #c93338);
--mk-line: rgba(255, 255, 255, 0.07);
--mk-line-2: rgba(255, 255, 255, 0.13);
--mk-line-3: rgba(255, 255, 255, 0.22);
--mk-tint-red: rgba(229, 72, 77, 0.12);
--mk-tint-gold: rgba(251, 191, 36, 0.13);
--mk-tint-blue: rgba(96, 165, 250, 0.13);
--mk-tint-grey: rgba(255, 255, 255, 0.07);
/* Polices : Inter pour tout, JetBrains Mono pour les identifiants, heures et adresses */
--mk-font-head: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mk-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mk-font-num: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mk-font-label: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mk-font-accent: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mk-font-code: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
--mk-stretch-head: 100%;
--mk-stretch-title: 100%;
--mk-track-head: -0.035em;
/* Formes : boutons 10 px, cartes 14 à 16 px */
--mk-r-xs: 6px;
--mk-r-sm: 8px;
--mk-r-md: 10px;
--mk-r-lg: 14px;
--mk-r-xl: 16px;
--mk-r-2xl: 20px;
--mk-container: 1232px;
--mk-header-space: 80px;
/* Deux courbes : survols (--rp-ease), entrées et animations longues (--rp-out) */
--rp-ease: cubic-bezier(0.22, 1, 0.36, 1);
--rp-out: cubic-bezier(0.16, 1, 0.3, 1);
--mk-ease-out: var(--rp-ease);
--mk-ease-io: cubic-bezier(0.7, 0, 0.2, 1);
--mk-ease-pop: cubic-bezier(0.2, 1.3, 0.4, 1);
--font-head: var(--mk-font-head);
--font-main: var(--mk-font-body);
--font-body: var(--mk-font-body);
font-family: var(--mk-font-body);
background-color: var(--mk-ink);
color: var(--mk-text);
}
body.mk-rp.mk { font: 400 16px/1.6 var(--mk-font-body); }
/* Lueurs d'ambiance qui dérivent (fixées derrière la page) et grain du film par-dessus */
body.mk-rp.mk::before {
content: ""; position: fixed; inset: -20vh -20vw; height: auto; z-index: -1; pointer-events: none;
background:
radial-gradient(40vw 34vh at 18% 12%, rgba(229, 72, 77, 0.1), transparent 70%),
radial-gradient(36vw 30vh at 86% 28%, rgba(251, 146, 60, 0.05), transparent 70%),
radial-gradient(44vw 36vh at 50% 100%, rgba(229, 72, 77, 0.06), transparent 70%);
animation: rp-drift 28s ease-in-out infinite alternate;
}
body.mk-rp.mk::after {
content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.05;
background:
repeating-radial-gradient(circle at 17% 31%, rgba(255, 255, 255, 0.7) 0 0.6px, transparent 0.6px 2px),
repeating-radial-gradient(circle at 73% 64%, rgba(255, 255, 255, 0.55) 0 0.6px, transparent 0.6px 2.6px);
animation: rp-grain 0.8s steps(4) infinite;
}
@keyframes rp-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.08); } }
@keyframes rp-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); } }
body.mk-rp ::selection { background: var(--mk-red); color: #fff; }
body.mk-rp :focus-visible { outline: 2px solid var(--mk-red-vivid); outline-offset: 3px; }
/* ── Typographie ──────────────────────────────────────────────────────── */
body.mk-rp :where(h1, h2) { font-family: var(--mk-font-head); font-weight: 800; font-style: normal; text-transform: none; line-height: 1.05; letter-spacing: -0.035em; }
body.mk-rp :where(h3) { font-family: var(--mk-font-head); font-weight: 700; text-transform: none; line-height: 1.25; letter-spacing: -0.015em; }
body.mk-rp :where(h4) { font-weight: 700; }
body.mk-rp .mk-display { font-weight: 800; font-style: normal; font-size: clamp(56px, 8.4vw, 124px); line-height: 0.94; text-transform: none; letter-spacing: -0.05em; }
body.mk-rp .mk-h1 { font-weight: 800; font-style: normal; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.045em; }
body.mk-rp .mk-h2 { font-weight: 700; font-style: normal; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.035em; }
body.mk-rp .mk-h3 { font-size: 20px; }
/* Mot d'accent dans un titre : « Trois étapes avant ta première partie. » en rouge */
.mk-rp .mk-accent, .mk-rp :is(h1, h2, h3) em {
font-family: inherit; font-style: normal; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--mk-red-vivid);
}
.mk-rp .mk-accent--light { color: var(--mk-text); }
.mk-rp .mk-accent--gold { color: var(--mk-gold-light); }
/* Sur-titre : petites capitales espacées, en rouge clair */
body.mk-rp .mk-eyebrow {
gap: 8px; font: 600 12px/1.3 var(--mk-font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-red-light);
}
body.mk-rp .mk-eyebrow::before { content: none; }
body.mk-rp .mk-eyebrow--muted { color: var(--mk-text-2); }
body.mk-rp .mk-eyebrow--gold { color: var(--mk-gold-light); }
body.mk-rp .mk-eyebrow--blue { color: var(--mk-blue-light); }
.mk-rp .mk-label-mono, .mk-rp .rp-label {
font: 600 11px/1.4 var(--mk-font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-text-3);
}
body.mk-rp .mk-lead { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--mk-text-2); font-weight: 400; }
body.mk-rp .mk-muted { color: var(--mk-text-3); }
body.mk-rp .mk-id, body.mk-rp code, body.mk-rp .rp-mono { font-family: var(--mk-font-code); }
body.mk-rp .mk-link { color: var(--mk-red-text) !important; font-weight: 600; }
/* ── Boutons : blanc pour l'action principale d'une zone, rouge pour l'achat, verre pour le reste ── */
body.mk-rp :is(.mk-button, .mk-play) {
position: relative; border-radius: var(--mk-r-md); gap: 10px;
font: 600 15px/1 var(--mk-font-body); letter-spacing: 0; text-transform: none;
transition: transform 0.25s var(--rp-ease), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, color 0.2s ease;
}
body.mk-rp :is(.mk-button, .mk-play):hover { transform: translateY(-2px); }
body.mk-rp :is(.mk-button, .mk-play):active { transform: translateY(0); }
body.mk-rp .mk-play::before, body.mk-rp .mk-play::after { content: none; }
body.mk-rp .mk-button:focus-visible, body.mk-rp .mk-play:focus-visible { outline: 2px solid var(--mk-red-vivid); outline-offset: 3px; border-radius: var(--mk-r-md); }
body.mk-rp .mk-button--primary { background: var(--mk-red); border: 1px solid var(--mk-red); color: #fff; box-shadow: none; }
body.mk-rp .mk-button--primary:hover { background: var(--mk-red-hover); border-color: var(--mk-red-hover); color: #fff; box-shadow: 0 12px 34px -10px rgba(229, 72, 77, 0.75); }
body.mk-rp :is(.mk-play, .mk-button--light) { background: #fff; border: 1px solid #fff; color: var(--mk-ink); box-shadow: none; }
body.mk-rp :is(.mk-play, .mk-button--light):hover { background: #f1eaea; border-color: #f1eaea; color: var(--mk-ink); box-shadow: 0 12px 34px -12px rgba(255, 255, 255, 0.4); }
body.mk-rp .mk-button--gold { background: var(--mk-gold); border: 1px solid var(--mk-gold); color: var(--mk-gold-ink); box-shadow: none; }
body.mk-rp .mk-button--gold:hover { background: var(--mk-gold-light); color: var(--mk-gold-ink); }
body.mk-rp :is(.mk-button--secondary, .mk-button--ghost) {
background: rgba(14, 12, 13, 0.35); border: 1px solid var(--mk-line-2); color: var(--mk-text);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.mk-rp .mk-button--ghost { background: transparent; }
body.mk-rp :is(.mk-button--secondary, .mk-button--ghost):hover { background: rgba(229, 72, 77, 0.08); border-color: rgba(229, 72, 77, 0.6); color: var(--mk-text); }
body.mk-rp .mk-button--gold-soft { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); color: var(--mk-gold-light); }
body.mk-rp .mk-button--gold-soft:hover { background: rgba(251, 191, 36, 0.18); color: var(--mk-gold-light); }
body.mk-rp .mk-button--danger { background: var(--mk-red-dark); border: 1px solid #9b2a2f; color: #fff; }
body.mk-rp .mk-button--danger:hover { background: #8f2428; color: #fff; }
body.mk-rp .mk-button--success { background: var(--mk-valid); border: 1px solid #16a34a; color: #fff; }
body.mk-rp .mk-button--lg { min-height: 54px; padding: 0 26px; font-size: 16px; }
body.mk-rp .mk-button--sm { font-size: 14px; }
body.mk-rp .mk-button[disabled], body.mk-rp .mk-button[aria-disabled="true"] { transform: none; box-shadow: none; }
/* Flèche qui avance au survol (→) */
.mk-rp .mk-arrow { display: inline-block; transition: transform 0.3s var(--rp-ease); }
.mk-rp :hover > .mk-arrow { transform: translateX(5px); }
body.mk-rp .mk-icon-button { border-radius: var(--mk-r-md); background: rgba(255, 255, 255, 0.05); border-color: var(--mk-line-2); }
/* ── Surfaces ─────────────────────────────────────────────────────────── */
body.mk-rp .mk-card { border-radius: var(--mk-r-xl); background: var(--mk-surface); border-color: var(--mk-line); }
body.mk-rp .mk-card--inset { border-radius: var(--mk-r-lg); background: var(--mk-raised); }
body.mk-rp :is(.mk-lift, .mk-fx) { transition: transform 0.35s var(--rp-ease), border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.35s ease; }
body.mk-rp :is(.mk-lift, .mk-fx):hover { border-color: var(--mk-line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
body.mk-rp .mk-fx::after { background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgba(229, 72, 77, 0.1), transparent 50%); }
body.mk-rp .mk-tag {
border-radius: var(--mk-r-xs); padding: 4px 9px; font: 700 11px/1.2 var(--mk-font-label); letter-spacing: 0.06em; text-transform: uppercase;
}
body.mk-rp .mk-tag--red { background: rgba(229, 72, 77, 0.14); border-color: transparent; color: var(--mk-red-soft); }
body.mk-rp .mk-tag--gold { background: var(--mk-tint-gold); color: var(--mk-gold-light); }
body.mk-rp .mk-chip { border-radius: 999px; font-weight: 600; }
body.mk-rp .mk-ribbon { border-radius: var(--mk-r-xs); font: 700 11px/1.6 var(--mk-font-label); letter-spacing: 0.06em; text-transform: uppercase; }
body.mk-rp :is(.mk-input, select.mk-input, textarea.mk-input) { border-radius: var(--mk-r-md); background: var(--mk-raised); border-color: var(--mk-line-2); font-family: var(--mk-font-body); }
body.mk-rp .mk-input:focus { border-color: var(--mk-red-vivid); box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.22); }
/* Onglets segmentés : fond qui glisse, onglet choisi en clair */
body.mk-rp .mk-segmented { border-radius: var(--mk-r-lg); padding: 4px; gap: 2px; background: var(--mk-surface); border: 1px solid var(--mk-line); }
body.mk-rp .mk-segmented button { border-radius: var(--mk-r-md); border: 1px solid transparent; font: 600 14px/1 var(--mk-font-label); letter-spacing: 0; text-transform: none; color: var(--mk-text-2); }
body.mk-rp .mk-segmented button[aria-pressed="true"], body.mk-rp .mk-segmented button[aria-selected="true"] { background: var(--mk-relief); border-color: var(--mk-line-2); color: var(--mk-text); }
body.mk-rp .mk-progress { border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
body.mk-rp .mk-progress__bar { border-radius: 999px; background: linear-gradient(90deg, var(--mk-red-hover), var(--mk-red-light)); }
body.mk-rp .mk-empty { border-radius: var(--mk-r-lg); }
body.mk-rp .mk-toast { border-radius: var(--mk-r-lg); background: #1a1516; border: 1px solid var(--mk-line-2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
body.mk-rp .mk-skeleton { border-radius: var(--mk-r-sm); }
body.mk-rp .mk-stat__label { font: 600 12px/1.4 var(--mk-font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-text-3); }
body.mk-rp .mk-stat__value { font-weight: 800; font-style: normal; font-size: 40px; line-height: 1; letter-spacing: -0.04em; }
body.mk-rp .mk-table th { font: 600 11px/1.4 var(--mk-font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-text-3); }
body.mk-rp :where(input[type="checkbox"]:not([role="switch"])) { border-radius: 6px; }
body.mk-rp .mk-avatar { border-radius: 50%; }
/* ── Utilitaires de la nouvelle base ───────────────────────────────────── */
/* Point « en ligne » qui émet des ondes */
.rp-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-green, #4ade80); flex: none; animation: rp-live 2s ease-out infinite; }
.rp-live--off { background: var(--mk-text-4, #8a8081); animation: none; }
@keyframes rp-live { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
/* Jauge : */
.rp-bar { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rp-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--mk-red-hover, #c93338), var(--mk-red-light, #ff7b7f)); transition: width 1.4s var(--rp-out); }
.rp-bar--green > i { background: var(--mk-green, #4ade80); }
.rp-bar--blue > i { background: var(--mk-blue, #60a5fa); }
.rp-bar--gold > i { background: var(--mk-gold, #fbbf24); }
/* Panneau : carte sombre à bord fin */
.rp-panel { position: relative; border: 1px solid var(--mk-line, rgba(255,255,255,.07)); border-radius: var(--mk-r-xl, 16px); background: var(--mk-surface, #171314); }
.rp-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 16px 18px; border-bottom: 1px solid var(--mk-line, rgba(255,255,255,.07)); }
.rp-panel__title { margin: 0; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
/* Pastille de statut : Livrée */
.rp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.4 var(--mk-font-label); white-space: nowrap; background: rgba(255, 255, 255, 0.07); color: var(--mk-text-2); }
.rp-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rp-pill--green { background: rgba(74, 222, 128, 0.1); color: var(--mk-green, #4ade80); }
.rp-pill--amber { background: rgba(251, 191, 36, 0.12); color: var(--mk-gold, #fbbf24); }
.rp-pill--red { background: rgba(229, 72, 77, 0.13); color: var(--mk-red-soft, #ff8a8d); }
.rp-pill--blue { background: rgba(96, 165, 250, 0.12); color: var(--mk-blue-light, #93c5fd); }
.rp-pill--orange { background: rgba(251, 146, 60, 0.12); color: var(--mk-orange, #fb923c); }
/* Tuile lumineuse : icône au trait sur un halo de sa couleur (--c) */
.rp-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mk-line, rgba(255,255,255,.07)); border-radius: var(--mk-r-lg, 14px); background: var(--mk-surface, #171314); transition: border-color 0.3s ease, background-color 0.3s ease; }
.rp-tile__art { height: 150px; display: grid; place-items: center; border-bottom: 1px solid var(--mk-line, rgba(255,255,255,.07)); background: radial-gradient(55% 70% at 50% 50%, color-mix(in srgb, var(--c, #e5484d) 22%, transparent), transparent 72%), linear-gradient(180deg, #1a1516, #141011); }
.rp-tile__art svg { width: 62px; height: 62px; fill: none; stroke: var(--c, #e5484d); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c, #e5484d) 70%, transparent)); transition: transform 0.5s var(--rp-ease), filter 0.4s ease; }
.rp-tile:hover { border-color: var(--mk-line-2, rgba(255,255,255,.13)); background: var(--mk-surface-2, #1e1819); }
.rp-tile:hover .rp-tile__art svg { transform: scale(1.1) rotate(-5deg); filter: drop-shadow(0 0 20px var(--c, #e5484d)); }
/* Signature du pied de page : lettres pleines d'un rouge très léger, effacées vers le bas par un masque. Un contour (text-stroke)
dessinait les tracés internes de la police variable : des traits croisés dans le M, le A, le K et le W */
.rp-word {
margin: 0; font: 800 clamp(56px, 16.5vw, 260px)/0.8 var(--mk-font-head); letter-spacing: -0.05em; text-align: center; white-space: nowrap;
color: rgba(229, 72, 77, 0.14); user-select: none; pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 92%);
}
/* ── Animations ────────────────────────────────────────────────────────── */
/* Entrée au chargement, décalée par --d : */
.rp-up { animation: rp-up 1s var(--rp-out) both; animation-delay: var(--d, 0s); }
@keyframes rp-up { from { opacity: 0; filter: blur(6px); transform: translateY(26px); } to { opacity: 1; filter: blur(0); transform: none; } }
/* Apparition au défilement : mk-rp.js cache .rp-rv / .rp-wipe / .rp-line sous l'écran (.is-wait) puis les révèle */
:is(.rp-rv, .rp-wipe, .rp-line) { transition-delay: var(--d, 0s); }
.rp-rv { transition-property: opacity, filter, transform; transition-duration: 1s; transition-timing-function: var(--rp-out); }
.rp-rv.is-wait { opacity: 0; filter: blur(6px); transform: translateY(30px); }
.rp-wipe { transition-property: clip-path, transform, opacity; transition-duration: 1.1s; transition-timing-function: var(--rp-out); clip-path: inset(0 0 -25% 0); }
.rp-wipe.is-wait { opacity: 0; clip-path: inset(0 0 108% 0); transform: translateY(14px); }
.rp-line { display: block; height: 1px; transform-origin: center; background: linear-gradient(90deg, transparent, var(--mk-red-vivid, #e5484d), transparent); transition-property: transform, opacity; transition-duration: 1.4s; transition-timing-function: var(--rp-out); }
.rp-line.is-wait { opacity: 0; transform: scaleX(0); }
/* Carte en relief : [data-rp-tilt] reçoit --rx/--ry/--mx/--my de mk-rp.js, reflet qui suit le pointeur */
[data-rp-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--rp-out); }
[data-rp-tilt].is-tilting { transition-duration: 0.12s; }
.rp-sheen { position: relative; isolation: isolate; }
.rp-sheen::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.09), transparent 60%); }
.rp-sheen:hover::after { opacity: 1; }
/* Bouton aimanté : [data-rp-mag] suit un peu le pointeur et revient avec un ralenti */
[data-rp-mag] { translate: var(--tx, 0) var(--ty, 0); transition: translate 0.45s var(--rp-out), transform 0.25s var(--rp-ease), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, color 0.2s ease; }
[data-rp-mag].is-near { transition-duration: 0.15s, 0.25s, 0.2s, 0.2s, 0.25s, 0.2s; }
/* Panier qui sautille quand on ajoute un article */
.rp-bump { animation: rp-bump 0.5s var(--rp-ease); }
@keyframes rp-bump { 30% { transform: scale(1.25); } 60% { transform: scale(0.92); } }
/* Indication de défilement (souris) */
.rp-scroll { position: relative; display: block; width: 26px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 14px; }
.rp-scroll::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: rp-hint 1.8s var(--rp-out) infinite; }
@keyframes rp-hint { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.rp-float { animation: rp-float 7s ease-in-out infinite; }
@keyframes rp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* ── En-tête : barre de verre collante, liens sobres, trait rouge sous la page active ── */
body.mk-rp .mk-header { top: 0; padding: 0; }
body.mk-rp .mk-cap {
max-width: none; height: 80px; padding: 0 max(16px, calc((100vw - var(--mk-container)) / 2 + 24px)); border-radius: 0; gap: 12px;
background: linear-gradient(180deg, rgba(14, 12, 13, 0.85), rgba(14, 12, 13, 0.55)); border: 0; border-bottom: 1px solid var(--mk-line); box-shadow: none;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: rp-nav 0.9s var(--rp-out) both;
}
@keyframes rp-nav { from { opacity: 0; transform: translateY(-100%); } }
body.mk-rp .mk-header.is-scrolled .mk-cap { max-width: none; height: 68px; background: rgba(14, 12, 13, 0.92); border-color: var(--mk-line); }
body.mk-rp .mk-cap::after { content: none; }
body.mk-rp .mk-brand svg, body.mk-rp .mk-brand__logo { fill: var(--mk-red-vivid); transition: transform 0.5s var(--rp-ease); }
body.mk-rp .mk-brand:hover .mk-brand__logo { transform: rotate(-10deg) scale(1.08); }
body.mk-rp .mk-brand__logo path:nth-child(3) { fill: var(--mk-red-vivid); }
body.mk-rp .mk-brand__txt b { font-weight: 800; font-style: normal; font-size: 17px; letter-spacing: 0.02em; line-height: 1.1; }
body.mk-rp .mk-brand__txt small { font: 700 10px/1 var(--mk-font-label); letter-spacing: 0.22em; color: var(--mk-red-text); margin-top: 3px; }
body.mk-rp .mk-nav { height: auto; padding: 0; gap: 4px; margin: 0 auto; border-radius: 0; background: none; border: 0; }
/* Le surligneur devient un trait rouge sous le mot (largeur du texte, posée par mk-ui.js) : glisse d'un lien à
l'autre sans rebond, et se place sans animation au chargement de la page */
body.mk-rp .mk-nav__ind {
top: auto; bottom: 3px; height: 2px; border-radius: 2px; background: var(--mk-red-vivid); box-shadow: none;
transition: left 0.32s var(--rp-out), width 0.32s var(--rp-out), opacity 0.2s ease;
}
body.mk-rp :is(.mk-nav > a, .mk-nav__mega > a) {
height: 44px; padding: 0 14px; border-radius: 8px;
font-weight: 500; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--mk-text-2); transition: color 0.2s ease;
}
body.mk-rp :is(.mk-nav > a, .mk-nav__mega > a):is(:hover, [aria-current="page"]) { color: var(--mk-text); background: none; }
body.mk-rp .mk-nav__n { border-radius: 999px; background: var(--mk-red); }
body.mk-rp .mk-mega { border-radius: var(--mk-r-xl); background: #151112; border-color: var(--mk-line-2); top: calc(100% + 12px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
body.mk-rp .mk-mega__item { border-radius: var(--mk-r-lg); background: var(--mk-surface); border-color: var(--mk-line); transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.3s var(--rp-ease); }
body.mk-rp .mk-mega__item:hover { border-color: var(--mk-line-2); background: var(--mk-surface-2); transform: translateY(-2px); }
body.mk-rp .mk-mega__item b { font-weight: 700; font-size: 16px; text-transform: none; }
body.mk-rp .mk-mega__item--big { background: linear-gradient(160deg, rgba(229, 72, 77, 0.16), var(--mk-surface) 65%); border-color: rgba(229, 72, 77, 0.4); }
body.mk-rp .mk-mega__item em { font: 600 12px/1.4 var(--mk-font-label); letter-spacing: 0; text-transform: none; font-style: normal; color: var(--mk-red-light); }
body.mk-rp .mk-cap__actions { gap: 8px; margin-left: 0; }
body.mk-rp .mk-live { height: 40px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--mk-line); color: var(--mk-text-2); font: 600 13px var(--mk-font-label); letter-spacing: 0; text-transform: none; }
body.mk-rp .mk-live--offline { color: var(--mk-text-3); }
body.mk-rp .mk-play { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 9px; }
body.mk-rp .mk-play > i { display: none; }
/* Dans l'en-tête, Connexion est l'action blanche : Jouer passe en verre */
body.mk-rp .mk-cap .mk-play { background: rgba(255, 255, 255, 0.04); border-color: var(--mk-line-2); color: var(--mk-text); }
body.mk-rp .mk-cap .mk-play:hover { background: rgba(229, 72, 77, 0.08); border-color: rgba(229, 72, 77, 0.6); color: var(--mk-text); box-shadow: none; }
body.mk-rp .mk-play--lg { height: 54px; padding: 0 26px; font-size: 16px; border-radius: 10px; }
body.mk-rp :is(.mk-login, .mk-me, .mk-cartbtn, .mk-burger) { border-radius: 9px; background: rgba(255, 255, 255, 0.04); border-color: var(--mk-line-2); }
body.mk-rp .mk-login { font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; background: #fff; border-color: #fff; color: var(--mk-ink); }
body.mk-rp .mk-login:hover { background: #f1eaea; border-color: #f1eaea; color: var(--mk-ink); }
body.mk-rp :is(.mk-me, .mk-cartbtn, .mk-burger):hover { background: rgba(255, 255, 255, 0.08); border-color: var(--mk-line-3); }
body.mk-rp .mk-me__av, body.mk-rp .mk-dd__head .mk-me__av { border-radius: 50%; }
body.mk-rp .mk-me .mk-me__av::after { border-radius: 50%; background: conic-gradient(from var(--mk-a), var(--mk-red-vivid), transparent 40%, var(--mk-red-vivid)); }
body.mk-rp .mk-dd { border-radius: var(--mk-r-xl); background: #151112; border-color: var(--mk-line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
body.mk-rp .mk-dd > a, body.mk-rp .mk-dd__bal > span { border-radius: var(--mk-r-md); }
body.mk-rp .mk-dd > a:hover { background: rgba(229, 72, 77, 0.1); color: var(--mk-text); }
body.mk-rp .mk-cartbtn i { border-radius: 999px; background: var(--mk-red); box-shadow: 0 0 0 3px var(--mk-ink); }
body.mk-rp .mk-drawer { background: rgba(14, 12, 13, 0.97); }
body.mk-rp .mk-drawer__links a { font-weight: 800; font-style: normal; font-size: clamp(30px, 8vw, 44px); line-height: 1.15; letter-spacing: -0.035em; text-transform: none; border-radius: 10px; }
body.mk-rp .mk-drawer__links a[aria-current="page"] { color: var(--mk-text); background: rgba(229, 72, 77, 0.12); }
body.mk-rp .mk-drawer__status { border-radius: var(--mk-r-lg); }
@media (max-width: 640px) {
body.mk-rp { --mk-header-space: 72px; }
body.mk-rp .mk-cap, body.mk-rp .mk-header.is-scrolled .mk-cap { height: 64px; padding: 0 10px 0 16px; border-radius: 0; }
body.mk-rp .mk-dd { top: calc(70px + env(safe-area-inset-top, 0px)); }
}
/* ── Pied de page : appel à rejoindre, colonnes, grand nom en contour ──── */
body.mk-rp .mk-footer { margin-top: 0; background: var(--mk-ink); border-top-color: var(--mk-line); }
body.mk-rp .mk-footer::before { inset: 0 0 auto; height: 420px; background: radial-gradient(700px 300px at 20% 0%, rgba(229, 72, 77, 0.12), transparent 70%); }
body.mk-rp .mk-footer__cta {
position: relative; overflow: hidden; margin-top: 64px; padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 48px); border-radius: 20px;
border: 1px solid rgba(229, 72, 77, 0.3); background: linear-gradient(120deg, rgba(229, 72, 77, 0.18), rgba(23, 19, 20, 0.9) 55%), var(--mk-surface);
}
body.mk-rp .mk-footer__cta .mk-eyebrow { color: var(--mk-red-light); }
body.mk-rp .mk-footer__title { font-weight: 800; font-style: normal; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.035em; text-transform: none; }
body.mk-rp .mk-footer__title em { font-style: normal; color: var(--mk-red-vivid); }
body.mk-rp .mk-footer__col strong { font: 600 11px/1.4 var(--mk-font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-text-3); }
body.mk-rp .mk-footer__col { font-size: 15px; }
body.mk-rp .mk-footer__col a:not(.mk-brand) { color: var(--mk-text-2); font-weight: 400; }
body.mk-rp .mk-footer__col a:not(.mk-brand):hover { color: var(--mk-text); }
body.mk-rp .mk-footer__bottom { font-size: 13px; color: var(--mk-text-3); border-top-color: var(--mk-line); }
body.mk-rp .mk-footer .rp-word { margin-top: 12px; margin-bottom: -0.12em; }
/* ── Bandeau cookies ───────────────────────────────────────────────────── */
/* Cookies : petite carte posée en bas à gauche, qui n'enfonce plus la page (en bas de l'écran sur téléphone) */
body.mk-rp .mk-cookie {
position: fixed; left: 20px; bottom: 20px; z-index: 60; width: min(420px, calc(100vw - 40px));
border: 1px solid var(--mk-line-2); border-radius: 14px; background: rgba(23, 19, 20, 0.94);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
animation: rp-cookie-in 0.5s var(--rp-out) 0.8s both; transition: bottom 0.3s ease;
}
body.mk-rp .mk-cookie__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: auto; max-width: none; margin: 0; padding: 12px 12px 12px 16px; }
body.mk-rp .mk-cookie__icon { color: var(--mk-red-text); }
body.mk-rp .mk-cookie__text { margin: 0; font-size: 13px; line-height: 1.45; }
body.mk-rp .mk-cookie__text strong { display: block; font-size: 13.5px; }
body.mk-rp .mk-cookie .mk-button { width: auto; min-width: 64px; }
@keyframes rp-cookie-in { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 640px) {
body.mk-rp .mk-cookie { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; }
body.mk-rp .mk-cookie__inner { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
body.mk-rp .mk-cookie .mk-button { grid-column: 2; justify-self: stretch; }
/* Accueil : au-dessus de la barre d'action quand elle est affichée */
body.mk-rp:has(.home-mobilebar:not(.is-off)) .mk-cookie { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
body.mk-rp.mk::before, body.mk-rp.mk::after, .rp-live, .rp-float, .rp-scroll::after, body.mk-rp .mk-cap, body.mk-rp .mk-cookie { animation: none !important; }
.rp-up { animation: none !important; }
:is(.rp-rv, .rp-wipe, .rp-line).is-wait { opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important; }
[data-rp-tilt] { transform: none !important; }
[data-rp-mag] { translate: none !important; }
}
@media print { body.mk-rp.mk::before, body.mk-rp.mk::after { display: none !important; } }