/* RIVAL — Armurerie.
   Structure de boutique claire (texte + visuel, produit phare, paiement, derniers achats)
   habillée façon « jeu télévisé » : bloc rouge coupé en biais, capitales condensées en italique,
   étiquettes « RIVAL | … », panneaux inclinés, fonds rouges dégradés. */
/* ---------- Polices Saira (hébergées en local) ---------- */
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/saira-condensed-300-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/saira-condensed-300-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; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/saira-condensed-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/saira-condensed-400-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; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/saira-condensed-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/saira-condensed-500-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; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/saira-condensed-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/saira-condensed-600-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; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/saira-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/saira-condensed-700-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; }
@font-face { font-family: 'Saira Extra Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/saira-extra-condensed-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira Extra Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/saira-extra-condensed-400-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; }
@font-face { font-family: 'Saira Extra Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/saira-extra-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira Extra Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/saira-extra-condensed-700-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; }
@font-face { font-family: 'Saira Extra Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/saira-extra-condensed-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira Extra Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/saira-extra-condensed-800-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; }
@font-face { font-family: 'Saira Extra Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/saira-extra-condensed-900-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira Extra Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/saira-extra-condensed-900-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; }

/* ---------- Icônes : Font Awesome 6 Free (sous-ensemble des icônes utilisées) ---------- */
@font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: block; src: url("../fa/fa-solid.woff") format("woff"); }
@font-face { font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url("../fa/fa-brands.woff") format("woff"); }
.fa-solid, .fa-brands { display: inline-block; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.fa-solid { font-family: "Font Awesome 6 Free"; font-weight: 900; }
.fa-brands { font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.fa-user::before { content: "\f007"; }
.fa-cart-shopping::before { content: "\f07a"; }
.fa-users::before { content: "\f0c0"; }
.fa-user-group::before { content: "\f500"; }
.fa-trophy::before { content: "\f091"; }
.fa-crosshairs::before { content: "\f05b"; }
.fa-skull::before { content: "\f54c"; }
.fa-flag::before { content: "\f024"; }
.fa-stopwatch::before { content: "\f2f2"; }
.fa-chevron-up::before { content: "\f077"; }
.fa-coins::before { content: "\f51e"; }
.fa-bolt::before { content: "\f0e7"; }
.fa-lock::before { content: "\f023"; }
.fa-headset::before { content: "\f590"; }
.fa-discord::before { content: "\f392"; }
.fa-tiktok::before { content: "\e07b"; }
.fa-twitch::before { content: "\f1e8"; }

:root {
  --head-h: 0rem;
  --bar: 4rem;
  --red: #D21E3D;
  --red-dark: #6C0F1F;
  /* Fonds rouges pleins : toujours ce dégradé (charte Rival) */
  --red-grad: linear-gradient(90deg, #D21E3D, #6C0F1F);
  --bg: #0c0b0d;
  /* Fond de toutes les sections hors hero : trames demi-teinte (haut droite, bas gauche), dégradé de la charte (voile noir retiré le 08/10 : même rouge que le bandeau Coins) */
  --page-bg:
    url("../img/halftone-tr.svg") right top / min(40rem, 45%) auto no-repeat,
    url("../img/halftone-bl.svg") left bottom / min(40rem, 45%) auto no-repeat,
    linear-gradient(90deg, #D21E3D, #6C0F1F);
  /* Trame grunge incrustée dans le rouge : produit à 10 % d'opacité (le noir marque), voir la fin du fichier */
  --grain: url("../img/trame-grunge.webp") center top / 1500px auto repeat;
  --bg-2: #1d1a20;
  --panel: #1d1a20;
  --line: #3a3a40;
  --text: #f5f5f6;
  --muted: #a3a3ad;
  --dim: #6a6a73;
  --live: #3ddc84;
  --display: "Saira Condensed", "Arial Narrow", Impact, sans-serif; /* même police que les boutons (avant : Saira Extra Condensed) */
  --body: "Saira Condensed", "Segoe UI", system-ui, sans-serif;
  --hud: "Saira Condensed", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { margin: 0; background: var(--page-bg); color: var(--text); font-family: var(--body); font-size: clamp(18px, 1.49vw, 21.5px); font-weight: 300; line-height: 1.3; letter-spacing: .01em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.hidden { display: none !important; }
.wrap { width: min(1400px, 100% - 3rem); margin-inline: auto; }

/* Titres : capitales condensées italiques */
h1, h2, h3 { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: .01em; }
h3 { font-weight: 800; }
.label { font-family: var(--body); font-style: italic; font-size: 1.65rem; font-weight: 300; line-height: 1.3; text-transform: uppercase; color: #fff; }
.label b { font-weight: 700; color: var(--text); }
.tag-hud { display: inline-block; font-family: var(--body); font-style: italic; font-size: 1.1rem; font-weight: 300; text-transform: uppercase; color: #fff; }

/* Boutons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; height: 3.1rem; padding: 0 1.45rem; border-radius: 0; font-family: var(--body); font-style: italic; font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; transition: opacity .15s, background .15s, color .15s; }
.btn:hover { opacity: .8; }
.btn svg { width: 1rem; height: 1rem; fill: currentColor; }
.btn-main { background: var(--red-grad); color: #fff; }
.btn-line { background: rgba(0, 0, 0, .25); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.btn-line:hover { background: #fff; color: #000; opacity: 1; }
/* Bouton chromé du hero : liseré tournant + reflet qui balaie */
.btn-chrome { overflow: hidden; isolation: isolate; height: 2.2em; padding: 0 1em; font-size: clamp(1.25rem, 1.67vw, 2rem); color: #fff; box-shadow: 0 6px 6px -2px #f3a843, 6px 0 6px -2px #e5e6e8; }
.btn-chrome::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -2; width: 40rem; height: 40rem; margin: -20rem 0 0 -20rem; background: conic-gradient(rgba(0, 0, 0, 0) 0%, rgba(238, 240, 246, .95) 12%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(238, 240, 246, .95) 62%, rgba(0, 0, 0, 0) 75%), #55555c; animation: chrome-spin 4s linear infinite; will-change: transform; }
.btn-chrome::after { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 0; background: linear-gradient(160deg, #4a4a52 0%, #1b1b1f 45%, #2c2c31 100%); }
.btn-chrome i { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(0, 0, 0, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .1) 55%, rgba(0, 0, 0, 0) 64%); transform: translateX(-100%); animation: chrome-sweep 3.2s ease-in-out infinite; pointer-events: none; }
.btn-chrome:hover { opacity: 1; filter: brightness(1.2); }
@keyframes chrome-spin { to { transform: rotate(360deg); } }
@keyframes chrome-sweep { 0%, 35% { transform: translateX(-100%); } 75%, 100% { transform: translateX(100%); } }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Barre d'état ---------- */
.status { background: #000; border-bottom: 1px solid #1c1c21; font-family: var(--hud); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.status-in { display: flex; align-items: center; gap: 1.5rem; height: 2.1rem; padding: 0 1.5rem; }
.live { display: inline-flex; align-items: center; gap: .5rem; color: var(--live); font-weight: 600; white-space: nowrap; }
.live i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--live); animation: ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); } 70%, 100% { box-shadow: 0 0 0 .45rem rgba(61, 220, 132, 0); } }
.hud { white-space: nowrap; }
.feed { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.feed-track { display: flex; gap: 2.5rem; width: max-content; animation: slide 45s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }
.feed-track span { color: var(--dim); white-space: nowrap; }
.feed-track b { color: var(--text); font-weight: 600; }
.feed-track em { font-style: normal; color: var(--red); }

/* ---------- En-tête ---------- */
.top { position: sticky; top: 0; z-index: 50; margin-bottom: calc(-1 * var(--bar)); background: rgba(8, 8, 8, .46); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* voile + flou relevés sur la barre de référence (noir 46 %, flou 20 px) */
.top-in { display: flex; align-items: center; max-width: 1915px; height: var(--bar); margin-inline: auto; padding: 0 3.6rem; }
.logo { display: flex; align-items: center; gap: .55rem; margin-right: 3.3rem; font-family: var(--display); font-style: italic; font-size: 2.2rem; font-weight: 900; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.logo img { height: 2.5rem; width: auto; }
/* Menu façon lobby du jeu : capitales droites en gras, onglet actif en bloc blanc, pastille rouge « Nouveau » */
.nav { display: flex; align-items: center; gap: .35rem; }
.nav a { position: relative; padding: .4rem .95rem; font-family: var(--body); font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; color: #fff; transition: background .15s, color .15s; }
.nav a:hover { background: rgba(255, 255, 255, .14); }
.nav a.on { background: #fff; color: #000; }
.nav a[data-new]::before { content: "Nouveau"; position: absolute; left: 50%; bottom: calc(100% - .35rem); transform: translateX(-50%); padding: .05rem .35rem; background: var(--red-grad); color: #fff; font-size: .58rem; font-style: italic; font-weight: 700; letter-spacing: .06em; line-height: 1.3; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.ico { position: relative; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: #fff; transition: opacity .15s; }
.ico:hover { opacity: .7; }
.ico i { font-size: 1.4rem; }
.login { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--body); font-size: 1.12rem; font-weight: 700; letter-spacing: .05em; line-height: 1; text-transform: uppercase; transition: opacity .15s; }
.login:hover { opacity: .7; }
.login.in { color: var(--live); }
.login i { font-size: 1.05rem; }
.cart-btn b { position: absolute; top: -.55rem; right: -.75rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; display: grid; place-items: center; border-radius: 1rem; background: var(--red-grad); color: #fff; font-family: var(--body); font-size: .75rem; font-weight: 700; line-height: 1; }
.burger { display: none; width: 2rem; height: 2rem; }
.burger span { display: block; width: 1.5rem; height: 1px; margin: 6px auto; background: #fff; }

.demo-note { padding: .6rem 1.5rem; background: #231a05; color: #e8c86a; font-size: .9rem; }
.demo-note code { color: #fff; }

/* ---------- Hero : fond sombre, texte à gauche, visuel à droite fondu dans le noir sous un halo rouge ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: 100svh; overflow: hidden; background: radial-gradient(ellipse 45% 60% at 0% 0%, rgba(210, 30, 61, .22), transparent 70%), #0c0b0d; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 30%; background: linear-gradient(transparent, #0c0b0d); pointer-events: none; }
.hero-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: calc(32rem + 14vw); padding: calc(var(--bar) + 3rem) 0 4rem 14vw; }
.hero-kicker, .hero-btns { white-space: nowrap; }
.hero-kicker { margin: 0; font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: .55em; text-transform: uppercase; color: var(--red); }
.hero-title { margin: .35rem 0 0; white-space: nowrap; font-size: clamp(3.4rem, 5vw, 5.8rem); font-style: normal; line-height: .92; letter-spacing: .01em; color: #fff; }
.hero-lead { margin: 1.2rem 0 0; font-size: 1.2rem; font-weight: 300; line-height: 1.65; letter-spacing: .02em; color: rgba(255, 255, 255, .68); }
.hero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.8rem; }
/* Boutons du hero au format des étiquettes blanches biseautées (comme .intro-tags) */
.hero-btn { height: auto; padding: .45rem 1.3rem; gap: .55rem; background: #fff; color: #121216; clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); white-space: nowrap; font-size: 1rem; font-style: italic; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.hero-btn i { color: var(--red); }
.hero-btn:hover { opacity: 1; background: var(--red-grad); color: #fff; }
.hero-btn:hover i { color: #fff; }
.hero-online { display: flex; align-items: center; gap: .6rem; margin: 1.6rem 0 0; font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.hero-online[hidden] { display: none; }
.hero-online b { font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: 0; color: #fff; }
.hero-online i { width: .5rem; height: .5rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.hero-art { position: absolute; inset: 0; z-index: 1; }
.hero-glow { position: absolute; right: 12%; top: 18%; width: 38vw; height: 38vw; border-radius: 50%; background: radial-gradient(circle, rgba(210, 30, 61, .55), rgba(210, 30, 61, 0) 65%); filter: blur(20px); }

/* Photo plein écran : couvre tout le hero, décalée à droite (bord gauche fondu sous le texte) */
.hero-img { position: absolute; top: 0; bottom: 0; left: 18%; right: 0; -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%); }
.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0% 0%; filter: brightness(1.05) contrast(1.06) saturate(1.1); }
/* 05/10 : visuel des deux persos un peu a droite et plus bas (bonnets degages de la barre du haut) */
.hero-img img { transform: translate(4%, 7%); }
.hero-stats { position: absolute; z-index: 2; right: max(1.5rem, calc((100vw - 1400px) / 2)); bottom: 2.5rem; display: flex; gap: 2rem; margin: 0; }
.hero-stats div { padding-left: .8rem; border-left: 3px solid var(--red); }
.hero-stats dt { font-family: var(--hud); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero-stats dd { margin: .1rem 0 0; font-family: var(--display); font-style: italic; font-size: 2rem; font-weight: 600; line-height: 1; }

/* ---------- Sections ---------- */
.sec { position: relative; padding: 5.5rem 0; text-align: center; }
.sec > h2, .sec > .wrap > h2 { margin-top: .4rem; font-size: clamp(2.3rem, 3.55vw, 3.2rem); }
.sec-lead { max-width: 38rem; margin: 1rem auto 0; color: rgba(255, 255, 255, .8); }
.sec-lead b { color: var(--text); }
/* Section Saison 1 : fond sombre, halo rouge et traînées lumineuses */
/* Première section après le hero : part du noir du hero et fond vers le rouge (pas de cassure) */
.top3-sec { background: linear-gradient(180deg, #0c0b0d 0%, rgba(12, 11, 13, 0) 22rem), var(--page-bg); }

.intro, .cats-sec, .season, .mapping, .modes, main:not(.shop) > .sec, .perks, .foot { content-visibility: auto; contain-intrinsic-size: auto 46rem; }

/* Présentation : capture du lobby en grand à gauche (bord droit en biais, liserés blanc + orange), texte à droite */
.intro { display: grid; grid-template-columns: 56vw 1fr; align-items: center; gap: 4.5vw; overflow: hidden; padding: 5rem 0; background: radial-gradient(ellipse at 85% 50%, rgba(210, 30, 61, .2), transparent 60%), var(--bg-2); }
.intro-media { --cut: polygon(0 0, 100% 0, 90% 100%, 0 100%); position: relative; aspect-ratio: 16 / 9; }
.intro-media img, .intro-media span { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: var(--cut); }
.intro-media img { object-fit: cover; }
.intro-media .s1 { background: linear-gradient(180deg, #ffb347, #f08a1c); transform: translateX(1.5rem); }
.intro-media .s2 { background: #f1f1f3; transform: translateX(.75rem); }
.intro-text { max-width: 36rem; padding-right: 2rem; }
.intro h2 { margin: .3rem 0 1.3rem; font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: .9; }
.intro h2 em { font-style: inherit; color: var(--red); }
.intro-text > p:not(.label) { margin-bottom: 1.3rem; }
.intro-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.3rem; padding: 0; }
.intro-tags li { display: flex; align-items: center; gap: .55rem; padding: .45rem 1.3rem; background: #fff; color: #121216; clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.intro-tags i { color: var(--red); }
.intro .btn { margin-top: .4rem; }

/* Catégories de la boutique : bande de panneaux inclinés (même biais que les modes de jeu), celui survolé s'élargit */
/* Chaque page de l'accueil a son fond, dans la palette Rival : rouge (Saison 1), anthracite (modes), noir (mapping), gris (paiement + règles) */
/* Modes : gris anthracite, léger éclairage par le haut */
.cats-sec { background:
  url("../img/halftone-bl.svg") left bottom / min(34rem, 40%) auto no-repeat,
  radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, .05), transparent 70%),
  linear-gradient(180deg, #1c1c1f, #232323); }
.cats { --cut: 3.5rem; display: flex; height: 23rem; margin: 2.5rem 0 0; text-align: left; }
.cat { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: rgba(0, 0, 0, .45); clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); transition: flex-grow .45s cubic-bezier(.2, .7, .2, 1); }
.cat + .cat { margin-left: calc(.6rem - var(--cut)); }
.cat:hover { flex-grow: 1.45; }
.cat .ci { position: absolute; inset: 0; }
.cat .ci img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.8); transition: transform .5s, filter .3s; }
.cat:hover .ci img { transform: scale(1.07); filter: none; }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .35) 0%, transparent 55%); transition: background .3s; }
.cat:hover::after { background: linear-gradient(0deg, rgba(210, 30, 61, .45) 0%, rgba(210, 30, 61, .12) 40%, transparent 65%); } /* survol adouci (était .92 / .3 / 70 %) */
.cat .ct { position: absolute; left: 2rem; right: calc(var(--cut) + 1rem); bottom: 1.5rem; z-index: 1; }
.cat .ct span { display: block; font-family: var(--display); font-style: italic; font-size: clamp(2rem, 3.2vw, 3.4rem); font-weight: 900; line-height: .95; text-transform: uppercase; }
.cat .ct small { display: inline-block; margin-top: .6rem; padding: .2rem .9rem; background: #fff; color: #121216; clip-path: polygon(.4rem 0, 100% 0, calc(100% - .4rem) 100%, 0 100%); font-size: .95rem; font-style: italic; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }

/* Saison 1 : liste des nouveautés à gauche, visuel 16:9 à droite (bord gauche en biais, liserés blanc + orange) */
.season { display: grid; grid-template-columns: 1fr 54vw; align-items: center; gap: 4.5vw; overflow: hidden; padding: 5.5rem 0; }
.season-list { justify-self: end; max-width: 37rem; padding-left: 2rem; }
.season-list h2 { margin: .3rem 0 1.6rem; font-size: clamp(2.3rem, 3.55vw, 3.2rem); }
.feat { display: grid; grid-template-columns: 3.4rem 1fr; align-items: start; gap: 1.1rem; padding: 1rem 1.2rem 1rem .6rem; cursor: pointer; opacity: .55; outline: none; transition: opacity .2s, background .2s; }
.feat.on { opacity: 1; background: rgba(0, 0, 0, .35); }
.feat > b { display: grid; place-items: center; height: 3.4rem; background: rgba(255, 255, 255, .12); clip-path: polygon(.6rem 0, 100% 0, calc(100% - .6rem) 100%, 0 100%); font-family: var(--display); font-style: italic; font-size: 1.9rem; font-weight: 900; line-height: 1; transition: background .2s, color .2s; }
.feat.on > b { background: #fff; color: var(--red); }
.feat h3 { font-size: clamp(1.5rem, 1.9vw, 1.9rem); line-height: 1.05; }
.feat p { margin-top: .4rem; }
.season-media { --cut: polygon(10% 0, 100% 0, 100% 100%, 0 100%); position: relative; aspect-ratio: 16 / 9; }
.season-media .slide, .season-media span { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: var(--cut); }
.season-media .slide { display: grid; place-items: center; object-fit: cover; background: radial-gradient(ellipse at 50% 50%, rgba(210, 30, 61, .25), transparent 62%), #151317; opacity: 0; transition: opacity .35s; }
.season-media .slide.on { opacity: 1; }
.season-media .slide.empty { background: rgba(0, 0, 0, .45); } /* cadre en attente de capture */
.season-media .qm { font-size: clamp(8rem, 14vw, 15rem); }

.price { font-family: var(--display); font-style: italic; font-size: 1.8rem; font-weight: 700; line-height: 1; }
.price s { display: block; font-size: .95rem; font-weight: 600; color: var(--dim); }

/* Mapping exclusif : texte centré, puis grand emplacement 16:9 (image ou vidéo) posé sur deux aplats blanc + orange */
/* Mapping : noir profond, trame discrète */
.mapping { position: relative; overflow: hidden; background:
  url("../img/halftone-tr.svg") right top / min(30rem, 35%) auto no-repeat,
  #000; } /* noir pur (avant : #0c0b0d + halo gris au centre) */
.mapping-bg { position: absolute; inset: 0; }
.mapping-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) saturate(.8); transform: scale(1.05); }
.mapping-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(10, 10, 12, .7) 100%); }
.mapping-in { position: relative; display: flex; flex-direction: column; align-items: center; padding: 5.5rem 0 7rem; text-align: center; }
.mapping-text h2 { margin-top: .4rem; font-size: clamp(2.3rem, 3.55vw, 3.2rem); }
.mapping-text > p:not(.label) { max-width: 46rem; margin: 1.1rem auto 0; }
.mapping-tags { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.5rem 0 0; padding: 0; }
.mapping-tags li { display: flex; align-items: center; gap: .55rem; padding: .4rem 1.2rem; background: #fff; color: #121216; clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); font-style: italic; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.mapping-tags i { color: var(--red); }
/* Galerie : grande capture 16:9 + vignettes des maps en dessous */
.mapping-gallery { width: min(100% - 3rem, 68rem); margin-top: 2.75rem; }
.mapping-video { position: relative; width: min(100% - 3rem, 68rem); aspect-ratio: 16 / 9; margin-top: 2.75rem; overflow: hidden; background: #151317; }
.mapping-video video, .mapping-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.mapping-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 50% 50%, rgba(210, 30, 61, .2), transparent 62%), #151317; box-shadow: -.75rem .75rem 0 #f1f1f3, -1.5rem 1.5rem 0 #f08a1c, 0 30px 70px rgba(0, 0, 0, .6); }
.mapping-img img, .mapping-img video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.mapping-img::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent); pointer-events: none; }
.map-name { position: absolute; left: 1.75rem; bottom: 1.25rem; z-index: 1; font-family: var(--display); font-style: italic; font-size: clamp(2rem, 3.4vw, 3.4rem); font-weight: 900; line-height: 1; text-transform: uppercase; }
.map-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: .9rem; margin-top: 2.6rem; }
.map-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #1d1a20; opacity: .5; transition: opacity .2s, transform .2s; }
.map-thumb:hover { opacity: .85; }
.map-thumb.on { opacity: 1; transform: translateY(-4px); box-shadow: 0 .35rem 0 #fff; }
.map-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mapping-img .qm { font-size: clamp(8rem, 16vw, 16rem); }
.map-thumb .qm { font-size: 4rem; }
.qm[hidden], .mapping-img img[hidden] { display: none; }
.map-thumb span { position: absolute; left: .7rem; bottom: .5rem; font-family: var(--display); font-style: italic; font-size: 1.3rem; font-weight: 800; line-height: 1; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }

/* Modes de jeu : bande de panneaux inclinés, le mode actif s'élargit */
.modes { position: relative; overflow: hidden; padding: 5.5rem 0 6.5rem; text-align: center; background:
  radial-gradient(ellipse at 50% 30%, rgba(90, 70, 140, .35), transparent 60%),
  radial-gradient(ellipse at 50% 100%, rgba(210, 30, 61, .25), transparent 55%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 90px),
  linear-gradient(180deg, #0c0b14 0%, #120f1f 50%, #0a0a0c 100%); }
.modes-head h2 { margin-top: .4rem; font-size: clamp(2.3rem, 3.55vw, 3.2rem); }
.modes-strip { display: flex; height: 28rem; max-width: 1560px; margin: 2.75rem auto 0; padding: 0 4rem; }
.mode { position: relative; flex: 0 0 8rem; overflow: hidden; transform: skewX(-10deg); transition: flex-grow .55s cubic-bezier(.2, .7, .2, 1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mode + .mode { margin-left: -1px; }
.mode.on { flex-grow: 1; }
.mode-bg { position: absolute; top: 0; left: -25%; width: 150%; height: 100%; object-fit: cover; transform: skewX(10deg); transition: filter .3s, transform .5s; }
.mode:not(.on) .mode-bg { filter: saturate(.7) brightness(.75); }
.mode:not(.on):hover .mode-bg { filter: none; }
.mode::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 12, .55), rgba(8, 8, 12, .15)); pointer-events: none; }
.mode.on::after { background: linear-gradient(90deg, rgba(8, 8, 12, .8) 0%, rgba(8, 8, 12, .55) 60%, rgba(8, 8, 12, .35) 100%); }
.mode-tab { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.mode-tab .mode-ico { transform: skewX(10deg); transition: transform .2s; }
.mode-tab:hover .mode-ico { transform: skewX(10deg) scale(1.08); }
.mode.on .mode-tab { display: none; }
.mode-ico { display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 50%; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.mode-ico i { font-size: 2.1rem; color: #121216; }
.mode-ico.big i { font-size: 2.5rem; }
.mode-ico.big { width: 5.5rem; height: 5.5rem; }
.mode-body { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: minmax(12rem, .8fr) 1.4fr; align-items: center; gap: 2.5rem; padding: 0 4.5rem 0 6rem; text-align: left; transform: skewX(10deg); opacity: 0; pointer-events: none; transition: opacity .25s; }
.mode.on .mode-body { opacity: 1; pointer-events: auto; transition-delay: .25s; }
.mode-name { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding-right: 2.5rem; border-right: 1px solid rgba(255, 255, 255, .5); text-align: center; }
.mode-name h3 { font-size: clamp(1.7rem, 2.5vw, 2.3rem); }
.mode-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.mode-rules li { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: 1.1rem; }
.mode-rules .thumb { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 8px; background: linear-gradient(160deg, #fff, #d9d9de); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.mode-rules .thumb i { font-size: 2.5rem; color: var(--red); }
.mode-rules h4 { margin: 0; font-family: var(--display); font-style: italic; font-size: 1.9rem; font-weight: 800; text-transform: uppercase; line-height: 1; }
.mode-rules p { margin-top: .3rem; font-size: 1rem; line-height: 1.4; color: #e6e6ea; }

/* Catégories : panneaux inclinés */
.tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: 2.5rem 0 2.25rem; }
.tabs button { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 11rem; height: 5.2rem; padding: 0 2rem; margin: 0 -.35rem; font-family: var(--display); font-style: italic; font-size: 1.6rem; font-weight: 700; text-transform: uppercase; line-height: 1; color: #fff; }
.tabs button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transform: skewX(-14deg); transition: background .15s; }
.tabs button:hover::before { background: rgba(0, 0, 0, .7); }
.tabs button.on::before { background: #fff; box-shadow: none; }
.tabs button.on { color: var(--red); }
.tabs button small { margin-top: .3rem; font-family: var(--hud); font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .12em; opacity: .7; }
.tabs button small::after { content: " produits"; }

/* ---------- Page boutique ---------- */
/* Bandeau rouge + arc (liseré blanc/orange) avec l'étoile, comme le hero de l'accueil */
.shop-head { position: relative; overflow: hidden; padding: calc(3.5rem + var(--bar)) 0 3.75rem; background: var(--red-grad); }
.shop-head .wrap { position: relative; z-index: 2; }
.shop-head h1 { display: flex; align-items: center; gap: .12em; margin-top: .25rem; font-size: clamp(3.4rem, 7.5vw, 8rem); line-height: .85; color: #f1f1f3; }
.shop-head h1 img { height: .8em; width: auto; margin-top: -.04em; }
.shop-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 1.5rem 0 0; padding: 0; font-style: italic; font-weight: 500; text-transform: uppercase; }
.shop-tags li { display: flex; align-items: center; gap: .55rem; }
.shop-tags i { font-size: .95em; }
.shop-art { position: absolute; inset: 0; z-index: 1; }
.shop-art span, .shop-art div { position: absolute; inset: 0; }
.shop-art .r1 { background: linear-gradient(180deg, #ffb347, #f08a1c); clip-path: circle(34vw at 90% 120%); }
.shop-art .r2 { background: #f1f1f3; clip-path: circle(33.1vw at 90% 120%); }
.shop-art div { background: #1a020c; clip-path: circle(32.2vw at 90% 120%); }
.shop-art img { position: absolute; top: 0; right: 0; width: 46%; height: 100%; object-fit: cover; object-position: center 14%; filter: brightness(1.15) contrast(1.06) saturate(1.15); }
.shop-tabs { background: #0c0b0d; }
.shop-tabs .tabs { margin: 0; padding: 1.1rem 0; }
.shop-tabs .tabs button::before { background: #1d1a20; }
.shop-tabs .tabs button:hover::before { background: #2a2a2c; }
.shop-tabs .tabs button.on::before { background: #fff; }
.shop-list { position: relative; padding: 0 0 5rem; }
/* Habillage : la photo d'équipe à peine visible derrière les cases, qui reste en place pendant le défilement */
.shop-list::before { content: ""; display: block; position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); margin-bottom: calc(var(--bar) - 100svh + 3rem); background: url("../img/hero-crew.webp") center 20% / cover no-repeat; opacity: .07; pointer-events: none; }
.shop-list > .wrap { position: relative; }
/* Garanties : pictos sur tuile blanche, comme les règles des modes de jeu */
.perks { padding: 4.5rem 0; background: var(--page-bg); }
.perks ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.perks li { display: grid; grid-template-columns: 5rem 1fr; align-items: center; gap: 1.2rem; }
.perks .thumb { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 8px; background: linear-gradient(160deg, #fff, #d9d9de); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.perks .thumb i { font-size: 2.2rem; color: var(--red); }
.perks h3 { font-size: 1.9rem; }
.perks p { margin-top: .25rem; }

/* Cartes produits : style boutique en jeu, en noir (visuel en haut, nom + prix en bas à gauche) */
/* Grille centrée : les cartes gardent leur taille, une ligne incomplète reste au milieu */
/* Grille façon Arena : 4 colonnes centrées dans un bloc étroit */
.grid { --cols: 4; --gap: 2.2rem 1.6rem; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); max-width: 64rem; margin: 0 auto; text-align: left; }
.grid > .grid-title, .grid > .empty { grid-column: 1 / -1; }
.grid-title { flex: 0 0 100%; margin-top: 2rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255, 255, 255, .18); font-family: var(--body); font-size: 1.65rem; font-weight: 300; line-height: 1.3; }
.grid-title:first-child { margin-top: 0; }
.grid-title b { font-weight: 700; }
.grid-title a:hover { opacity: .7; }
.empty { flex: 0 0 100%; color: rgba(255, 255, 255, .85); padding: 2rem 0; text-align: center; }
.cat .ci { display: grid; place-items: center; }
.cat .ci .qm { font-size: 10rem; margin-bottom: 4rem; }
.badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; padding: .15rem .9rem; background: var(--red-grad); clip-path: polygon(.3rem 0, 100% 0, calc(100% - .3rem) 100%, 0 100%); font-family: var(--body); font-style: italic; font-size: .9rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.card { position: relative; display: flex; flex-direction: column; gap: .55rem; transition: transform .2s; }
.card:hover { transform: translateY(-4px); }
.card .box { overflow: hidden; border: 4px solid #1d1a20; background: #1d1a20; }
/* Visuel : fond sombre uni avec un halo rouge derrière le produit */
.card .img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; cursor: pointer; background: radial-gradient(ellipse at 50% 48%, rgba(210, 30, 61, .2), transparent 62%), #151317; }
.card .img img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); transition: transform .35s; }
.card:hover .img img { transform: scale(1.06); }
.qm { font-family: var(--display); font-style: italic; font-size: 5rem; font-weight: 900; line-height: 1; color: #fff; transition: transform .35s; }
.card:hover .qm { transform: scale(1.1); }
.card h3 { padding: 1rem .6rem 1.1rem; font-size: 1.45rem; line-height: 1.05; text-align: center; cursor: pointer; }
/* Bouton large + case prix, côte à côte sous le cadre */
.card .buy { display: flex; gap: .45rem; }
.card .add { flex: 1; height: 2.4rem; padding: 0 .8rem; background: var(--red-grad); font-family: var(--body); font-style: italic; font-size: 1rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; transition: filter .15s; }
.card .add:hover { filter: brightness(1.15); }
.card .add[disabled] { opacity: .5; cursor: wait; }
.card .price { display: flex; align-items: center; gap: .35rem; padding: 0 .75rem; background: #1d1a20; font-family: var(--body); font-style: italic; font-size: 1rem; font-weight: 700; color: #fff; white-space: nowrap; }
.card .price s { color: var(--dim); font-weight: 500; }

/* Paiement */
/* Paiement : bandeau compact, texte à gauche, petits logos à droite */
.pay-sec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: 3rem 0 0; text-align: left; }
.pay-text h2 { margin: 0; font-size: 1.7rem; }
.pay-text p { margin: .3rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .8); }
.pay-text b { color: var(--text); font-weight: 600; }
.pay { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.pay li { display: grid; place-items: center; width: 5.2rem; height: 2.5rem; border-radius: 3px; background: #fff; color: var(--bg); font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1; }
.pay .visa { color: #1a1f71; font-style: italic; font-size: 1.25rem; }
.pay .mc { display: flex; justify-content: center; align-items: center; }
.pay .mc i { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #eb001b; }
.pay .mc i + i { margin-left: -.5rem; background: #f79e1b; mix-blend-mode: multiply; }
.pay .pp { color: #003087; font-style: italic; }
.pay .ap { font-family: var(--body); font-weight: 600; font-size: .85rem; }
.pay .psc { color: #0a2dbf; font-size: .85rem; }
.pay .more { width: 2.8rem; background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); font-style: italic; }

/* Kill feed des achats : rangée de cartes */
.kf { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem; text-align: left; }
.kf li { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .5rem; padding: 1rem 1.1rem; border-radius: 10px; background: var(--panel); border-left: 3px solid var(--red); animation: kf-in .5s both; }
@keyframes kf-in { from { opacity: 0; transform: translateY(10px); } }
.kf .col { min-width: 0; }
.kf .row1 { display: flex; align-items: center; gap: .4rem; }
.kf .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-style: italic; font-size: 1.35rem; font-weight: 700; text-transform: uppercase; }
.kf .arrow { flex: none; width: 1rem; height: 1rem; fill: var(--red); }
.kf .what { display: block; margin-top: .15rem; font-size: .92rem; color: var(--muted); }
.kf li > span:empty { display: none; }
.kf .t { font-family: var(--hud); font-size: .72rem; color: var(--dim); }

/* Règles */
/* Règles : 4 cartes sur une ligne (2 puis 1 colonne sur petit écran) */
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: 2.5rem 0 0; text-align: left; }
.rule { padding: 1.3rem 1.4rem 1.4rem; background: var(--panel); box-shadow: inset 0 3px 0 var(--red); }
.rule h3 { display: flex; align-items: baseline; gap: .7rem; margin: 0; font-size: 1.3rem; }
.rule h3 b { font-family: var(--hud); font-style: normal; font-size: .8rem; color: var(--red); }
.rule p { margin: .8rem 0 0; font-size: .9rem; line-height: 1.55; color: #c1c1c8; }
@media (max-width: 1100px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rules { grid-template-columns: 1fr; } }

/* Pied de page */
/* Page Politiques : colonne de lecture, sections séparées par un filet */
.pol-in { max-width: 46rem; padding: calc(var(--bar) + 4rem) 0 5rem; }
.pol-in .hero-kicker { color: #fff; }
.pol-in h1 { margin: .3rem 0 0; font-size: clamp(3rem, 5vw, 4.6rem); font-style: normal; }
.pol-lead { margin: .9rem 0 2.5rem; font-size: 1.05rem; color: rgba(255, 255, 255, .8); }
.pol-sec { padding: 2rem 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.pol-sec h2 { margin: 0 0 .9rem; font-size: 1.6rem; }
.pol-sec p { margin: .7rem 0 0; font-size: .95rem; line-height: 1.65; color: rgba(255, 255, 255, .85); }
.pol-sec a { color: #fff; font-weight: 700; text-decoration: underline; }
.pol-sec a:hover { text-decoration: underline; }
.rules-more { margin: 1.5rem 0 0; font-size: .95rem; }
.rules-more a { color: #fff; font-weight: 700; text-decoration: underline; }
.rules-more a:hover { text-decoration: underline; }
.foot { background: var(--page-bg); border-top: 1px solid rgba(0, 0, 0, .25); }
.foot-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 3rem 0 1.5rem; }
.foot-logo { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-style: italic; font-size: 2.2rem; font-weight: 900; line-height: 1; text-transform: uppercase; }
.foot-logo img { height: 2.5rem; width: auto; }
.foot-links { display: flex; gap: 1.75rem; }
.foot-links a { font-weight: 300; transition: opacity .15s; }
.foot-links a:hover { opacity: .7; }
.foot-socials { display: flex; justify-content: flex-end; gap: 1.6rem; }
.foot-socials a { color: #fff; transition: opacity .15s; }
.foot-socials a:hover { opacity: .7; }
.foot-socials i { font-size: 1.5rem; }
.foot-legal { padding: 1rem 0 3rem; font-size: .8rem; line-height: 1.4; color: #fff; text-align: center; }

.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--red-grad); color: #fff; box-shadow: 0 8px 20px rgba(210, 30, 61, .4); opacity: 0; pointer-events: none; transition: opacity .2s; }
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top i { font-size: 1.1rem; }

/* Fiche produit */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; }
.modal-bg, .drawer-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .75); }
.modal-box { position: relative; width: min(56rem, 100%); max-height: calc(100svh - 2rem); overflow: auto; display: grid; grid-template-columns: 1fr 1fr; border-radius: 10px; background: var(--panel); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.modal-img { background: var(--bg-2); min-height: 18rem; }
.modal-img img { width: 100%; height: 100%; object-fit: cover; }
.modal-body { display: flex; flex-direction: column; gap: .9rem; padding: 2.25rem 1.9rem 1.9rem; }
.modal-body h3 { font-size: 2.8rem; }
.modal-desc { color: #c1c1c8; }
.modal-desc ul { padding-left: 1.2rem; margin: .4rem 0; }
.modal-desc p { margin-bottom: .5rem; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.x { position: absolute; top: .6rem; right: .7rem; z-index: 2; width: 2.2rem; height: 2.2rem; border-radius: 8px; font-size: 1.6rem; line-height: 1; color: var(--muted); background: rgba(0, 0, 0, .5); }
.x:hover { color: #fff; }

/* Panier */
.drawer-bg { z-index: 85; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(26rem, 100%); display: flex; flex-direction: column; background: var(--panel); transform: translateX(105%); transition: transform .3s cubic-bezier(0, 0, .2, 1); }
.drawer.open { transform: none; }
.drawer-head { position: relative; padding: 1.5rem 1.4rem 1.1rem; border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin-top: .25rem; font-size: 2.2rem; }
.drawer-head .x { top: 1.2rem; }
.drawer-user { padding: .9rem 1.4rem 0; font-size: .92rem; color: var(--muted); }
.drawer-user b { color: var(--live); }
.drawer-items { flex: 1; overflow: auto; padding: 1rem 1.4rem; display: grid; align-content: start; gap: .5rem; }
.line { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; padding: .85rem 1rem; border-radius: 10px; background: #2a2a2c; }
.line .n { font-family: var(--display); font-style: italic; font-size: 1.45rem; font-weight: 700; text-transform: uppercase; line-height: 1; }
.line .p { font-family: var(--display); font-style: italic; font-size: 1.3rem; font-weight: 700; }
.line { align-items: center; row-gap: .7rem; transition: opacity .15s; }
.line.busy { opacity: .55; }
.line .q { font-size: .85rem; color: var(--muted); }
/* Quantité : - n + */
.line .qty { display: inline-flex; align-items: center; justify-self: start; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; overflow: hidden; }
.line .qty:has(.q) { border: 0; }
.line .qty button { width: 2rem; height: 2rem; border: 0; background: rgba(255, 255, 255, .06); color: #fff; font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background .15s; }
.line .qty button:hover:not([disabled]) { background: var(--red); }
.line .qty b { min-width: 2.2rem; text-align: center; font-weight: 700; }
/* Retirer : vrai bouton avec corbeille */
.line .rm { justify-self: end; display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .8rem; border: 1px solid rgba(210, 30, 61, .45); border-radius: 8px; background: rgba(210, 30, 61, .12); color: #ff5470; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.line .rm svg { width: 1rem; height: 1rem; fill: currentColor; }
.line .rm:hover:not([disabled]) { background: var(--red); color: #fff; }
.line button[disabled] { cursor: wait; }
.drawer-foot { display: grid; gap: .85rem; padding: 1.2rem 1.4rem 1.4rem; border-top: 1px solid var(--line); }
.total { display: flex; justify-content: space-between; align-items: baseline; }
.total span { font-family: var(--hud); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.total b { font-family: var(--display); font-style: italic; font-size: 1.8rem; font-weight: 700; }
.fine { font-size: .8rem; color: var(--dim); text-align: center; }

.toast { position: fixed; left: 50%; bottom: 1.25rem; z-index: 100; max-width: calc(100% - 2rem); transform: translate(-50%, 180%); padding: .85rem 1.2rem; border-radius: 8px; background: #fff; color: var(--bg); border-left: 4px solid var(--red); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-weight: 600; transition: transform .25s; }
.toast.show { transform: translate(-50%, 0); }
body.locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .feed-track, .live i, .kf li, .sticker.s2 i, .btn-chrome::before, .btn-chrome i { animation: none; }
  .feed { overflow-x: auto; }
}

/* ---------- Transition entre les pages (Accueil <-> Boutique) ---------- */
@view-transition { navigation: auto; }
.top { view-transition-name: site-header; }
::view-transition-old(root) { animation: page-out .35s ease both; }
::view-transition-new(root) { animation: page-in .35s ease both; }
::view-transition-group(site-header) { animation: none; }
/* Changement de page : simple fondu enchaîné, sans mouvement */
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }
/* Navigateurs sans transitions de page : simple fondu à l'arrivée */
@supports not (view-transition-name: none) { main { animation: page-in .3s cubic-bezier(.2, .7, .2, 1) both; } }
/* Changement de catégorie sans rechargement */
.grid.swap { animation: page-in .28s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), main, .grid.swap { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .grid { --cols: 3; } }
@media (max-width: 1300px) { .top-in { padding: 0 1.5rem; } .logo { margin-right: 1.4rem; } .nav { gap: .15rem; } .nav a { padding: .4rem .7rem; } .top-right { gap: 1.1rem; } }
@media (max-width: 900px) { .grid { --cols: 2; --gap: 1.6rem 1rem; } }
@media (max-width: 520px) { .grid { --cols: 1; } }
@media (max-width: 900px) { .cats { --cut: 0rem; flex-wrap: wrap; gap: .6rem; height: auto; } .cat, .cat:hover { flex: 1 1 40%; height: 11rem; margin: 0; border-radius: 10px; } .cat + .cat { margin-left: 0; } .cat .ct { left: 1rem; right: 1rem; bottom: 1rem; } }
@media (max-width: 900px) { .shop-art { display: none; } .shop-head { padding: calc(2.75rem + var(--bar)) 0 3rem; } .perks ul { grid-template-columns: 1fr; gap: 1.5rem; } }
/* Saison 1 et modes de jeu en plein écran (contenu centré sous la barre transparente) */
@media (min-width: 1101px) {
  .season { min-height: 100svh; padding: calc(var(--bar) + 3rem) 0 3rem; }
  .cats-sec { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: calc(var(--bar) + 3rem) 0 3rem; }
  .cats-sec .cats { height: clamp(23rem, 58svh, 42rem); }
  /* Mapping : le cadre vidéo se dimensionne sur la hauteur restante pour que texte + vidéo tiennent dans l'écran */
  .mapping-in { justify-content: center; min-height: 100svh; padding: calc(var(--bar) + 1.5rem) 0 3rem; }
  .mapping-video { width: min(100% - 3rem, 68rem, calc((100svh - 20.5rem) / .5625)); margin-top: 2.25rem; }
}
/* Dernière page de l'accueil : paiement + règles */
/* Paiement + règles : gris plus clair, en biais */
.fin-sec { padding: 3rem 0 4rem; background:
  url("../img/halftone-bl.svg") left bottom / min(36rem, 42%) auto no-repeat,
  linear-gradient(250deg, #2a2a2c, #1d1d20 70%); }
.rules-sec { padding: 3.5rem 0 0; text-align: center; }
.fin-sec .rule { background: #131315; }
.rules-sec > h2 { margin-top: .4rem; font-size: clamp(2.3rem, 3.55vw, 3.2rem); }
/* Accueil en pages plein écran : défilement aimanté section par section + entrée en rebond du contenu */
@media (min-width: 1101px) {
  html.home-snap { scroll-snap-type: y mandatory; scroll-padding-top: 0; }
  html.home-snap main > section { min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }
  html.home-snap .foot { scroll-snap-align: end; }
  /* Dernière page = paiement + règles + barre du bas, dans le même écran (la barre fait 3rem) */
  html.home-snap main > section.fin-sec { min-height: calc(100svh - 3rem); }
  /* Le bouton « remonter » passe au-dessus de la barre du bas au lieu de couvrir ses icônes */
  .to-top { bottom: 4.25rem; }
  html.home-snap main > section { content-visibility: visible; }
  .fin-sec { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--bar) + 2rem) 0 2.5rem; }
  html.home-snap .rebond { opacity: 0; transform: translateY(24px) scale(.99); }
  html.home-snap section.in .rebond { animation: rebond .65s cubic-bezier(.25, 1.12, .5, 1) var(--d, 0s) both; }
}
@keyframes rebond {
  0% { opacity: 0; transform: translateY(24px) scale(.99); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.home-snap .rebond { opacity: 1 !important; transform: none !important; animation: none !important; }
}
/* Menu centré dans la barre : logo à gauche, icônes à droite, colonnes latérales égales */
@media (min-width: 1101px) { .top-in { display: grid; grid-template-columns: 1fr auto 1fr; } .logo { justify-self: start; margin-right: 0; } .top-right { justify-self: end; margin-left: 0; } }
@media (max-width: 1100px) {
  .top-in { padding: 0 1.5rem; }
  .nav { display: none; position: absolute; top: var(--bar); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: .9rem; padding: 1.25rem 1.5rem 1.5rem; background: #000; }
  .nav.open { display: flex; }
  .burger { display: block; }
  .hero { flex-direction: column-reverse; align-items: stretch; min-height: 0; }
  .hero-text { padding: calc(var(--bar) + 2.5rem) 1.5rem 3rem; }
  .brand { font-size: clamp(4.4rem, 14vw, 8rem); }
  .btn-chrome { font-size: 1.8rem; }
  .hero-art { position: relative; inset: auto; height: 56vw; min-height: 15rem; }
  .hero-img { inset: 0; width: 100%; height: auto; aspect-ratio: auto; -webkit-mask: none; mask: none; }
  .hero-text { max-width: none; }
  .hero-img img { object-fit: cover; object-position: 50% 15%; transform: none; }   /* pas de decalage sur mobile */
  .hero-text { order: 1; }
  .modes-strip { flex-direction: column; height: auto; padding: 0 1.5rem; gap: .5rem; }
  .mode, .mode.on { flex: none; transform: none; }
  .mode + .mode { margin-left: 0; }
  .mode-bg { left: 0; width: 100%; transform: none; }
  .mode-tab { position: relative; height: 4.75rem; display: flex; justify-content: flex-start; gap: 1rem; padding: 0 1rem; }
  .mode-tab .mode-ico, .mode-tab:hover .mode-ico { transform: none; width: 3rem; height: 3rem; }
  .mode-tab::after { content: attr(aria-label); position: relative; font-family: var(--display); font-style: italic; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; }
  .mode-body { position: relative; display: none; grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1.25rem; transform: none; }
  .mode.on .mode-body { display: grid; }
  .mode-name { flex-direction: row; justify-content: flex-start; padding: 0 0 1.25rem; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .4); text-align: left; }
  .mode-ico.big { width: 4rem; height: 4rem; }
  .mapping-in { padding: 4rem 0 5rem; }
  .mapping-gallery { width: 100%; }
  .mapping-img { box-shadow: -.5rem .5rem 0 #f1f1f3, -1rem 1rem 0 #f08a1c; margin-left: 1rem; }
  .map-thumbs { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); margin-top: 2rem; }
  .season { grid-template-columns: 1fr; gap: 2.5rem; padding: 4rem 0 0; }
  .season-list { justify-self: stretch; max-width: none; padding: 0 1rem; }
  .season-media { --cut: none; }
  .season-media span { display: none; }
  .foot-in { grid-template-columns: 1fr; justify-items: start; }
  .foot-links { flex-wrap: wrap; gap: .6rem 1.5rem; }
  .foot-legal { text-align: left; }
  .intro { grid-template-columns: 1fr; gap: 2.5rem; padding: 0 0 4rem; }
  .intro-media { --cut: none; }
  .intro-media span { display: none; }
  .intro-text { max-width: none; padding: 0 1.5rem; }
  .foot-socials { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 2rem); }
  .top-in { padding: 0 1rem; }
  .logo { margin-right: 1rem; font-size: 1.9rem; }
  .top-right { gap: 1.1rem; }
  .status-in { padding: 0 1rem; }
  .status .hud { display: none; }
  .login span { display: none; }
  .top-right > .ico[data-link] { display: none; }
  .hero-text { padding: calc(var(--bar) + 2rem) 1rem 2.5rem; }
  .mode-ico i, .mode-ico.big i, .mode-rules .thumb i { font-size: 1.6rem; }
  .logo img { height: 2rem; }
  .brand-welcome { font-size: .75rem; letter-spacing: .25em; }
  .hero-btns .btn { width: 100%; }
  .hero-stats { left: 1rem; right: auto; gap: 1.25rem; }
  .hero-stats dd { font-size: 1.6rem; }
  .sec { padding: 4rem 0; }
  .tabs button { min-width: 0; flex: 1 1 40%; height: 4rem; padding: 0 1rem; font-size: 1.3rem; margin: .2rem 0; }
  .modal-box { grid-template-columns: 1fr; }
  .modal-img { min-height: 0; aspect-ratio: 16 / 10; }
  .modes-strip { padding: 0 1rem; }
  .mode-rules li { grid-template-columns: 4rem 1fr; }
  .mode-rules .thumb { width: 4rem; height: 4rem; }
  .mode-rules h4 { font-size: 1.3rem; }
}

/* Boutique sur ordinateur : bannière + 2 rangées de cartes + pied de page tiennent dans l'écran, sans défiler */
@media (min-width: 1101px) {
  .shop-head { padding: calc(1.4rem + var(--bar)) 0 1.4rem; }
  .shop-head h1 { font-size: clamp(3rem, 4.6vw, 5rem); }
  .shop-tags { margin-top: .9rem; }
  /* La page remplit l'écran : la barre du bas reste collée en bas */
  .shop { display: flex; flex-direction: column; min-height: calc(100svh - 3rem); }
  .shop-list { flex: 1; padding: 0 0 1.4rem; overflow: clip; }
  .shop-list::before { margin-bottom: calc(var(--bar) - 100svh + 1.4rem); }
  /* Sur un écran moins haut, la grille se resserre pour que les 2 rangées restent visibles (plancher : 40rem) */
  .grid { --gap: 1.2rem 1.6rem; max-width: clamp(40rem, 320svh - 1690px, 64rem); }
  .card { gap: .4rem; }
  .card .img { aspect-ratio: 16 / 10; }
  .qm { font-size: 4.2rem; }
  .card h3 { padding: .55rem .5rem .65rem; font-size: 1.3rem; }
  .card .add, .card .price { height: 2.2rem; }
  .foot { content-visibility: visible; }
  /* Pied de page en une seule barre fine, façon Tebex : logo | mention légale | liens | réseaux */
  .foot { display: flex; align-items: center; gap: 1.6rem; padding: .6rem 2rem; }
  .foot .foot-in, .foot .foot-legal { display: contents; }
  .foot .foot-logo { order: 1; gap: .4rem; font-size: 1.25rem; }
  .foot .foot-logo img { height: 1.5rem; }
  .foot .foot-legal p { order: 2; flex: 1; margin: 0; font-size: .78rem; line-height: 1.3; color: rgba(255, 255, 255, .8); text-align: left; }
  .foot .foot-links { order: 3; gap: 1.1rem; font-size: .88rem; white-space: nowrap; }
  .foot .foot-links a { text-decoration: underline; text-underline-offset: 3px; }
  .foot .foot-socials { order: 4; gap: 1rem; }
  .foot .foot-socials i { font-size: 1.05rem; }
}
/* Écran peu haut : bannière plus basse d'abord, pour garder des cartes lisibles */
@media (min-width: 1101px) and (max-height: 860px) {
  .shop-head { padding: calc(.9rem + var(--bar)) 0 1rem; }
  .shop-head h1 { font-size: clamp(2.6rem, 3.6vw, 3.6rem); }
  .shop-tags { margin-top: .6rem; }
  .grid { max-width: clamp(40rem, 320svh - 1560px, 64rem); }
}

/* Dernière page de l'accueil, remise en ordre : tout sur un même axe centré.
   Titre -> 4 règles -> bande paiement de la même largeur -> lien vers les conditions */
.fin-sec .rules-sec { padding: 0; }
.fin-sec .rules { margin-top: 2rem; }
.fin-sec .rule { display: flex; flex-direction: column; }
.fin-sec .pay-sec { flex-wrap: nowrap; justify-content: flex-start; gap: 1.1rem; margin-top: .9rem; padding: 1rem 1.4rem; background: #131315; box-shadow: inset 3px 0 0 var(--red); }
.fin-sec .pay-ico { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--red-grad); font-size: 1.05rem; color: #fff; }
.fin-sec .pay-text { flex: 1; }
.fin-sec .pay-text h2 { font-size: 1.4rem; }
.fin-sec .pay-text p { margin-top: .15rem; font-size: .88rem; }
.fin-sec .pay li { width: 4.6rem; height: 2.2rem; }
.fin-sec .pay .more { width: 2.6rem; }
.fin-sec .rules-more { margin: 1.3rem auto 0; text-align: left; } /* calé en bas à gauche, sur le bord des cartes */
.fin-sec .rules-more a { display: inline-flex; align-items: center; gap: .55rem; font-style: italic; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; transition: gap .15s, opacity .15s; }
.fin-sec .rules-more a svg { width: 1em; height: 1em; fill: var(--red); }
.fin-sec .rules-more a:hover { gap: .8rem; text-decoration: none; }
@media (max-width: 900px) {
  .fin-sec .pay-sec { flex-wrap: wrap; }
  .fin-sec .pay { flex-basis: 100%; }
}

/* Boutique : fond gris sous les cartes, le même que la dernière page de l'accueil */
.shop-list { background:
  url("../img/halftone-bl.svg") left bottom / min(36rem, 42%) auto no-repeat,
  linear-gradient(250deg, #2a2a2c, #1d1d20 70%); }

/* Lecteur vidéo du mapping : gros bouton central + barre de contrôle en bas.
   Sans vidéo (MAPPING_VIDEO.src vide), même habillage avec la mention « bientôt disponible ». */
.player { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, rgba(210, 30, 61, .14), transparent 60%), #0b0b0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.player video { cursor: pointer; }
.player svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.player-big { position: relative; z-index: 2; display: grid; place-items: center; width: 5.5rem; height: 5.5rem; padding: 1.55rem 1.4rem 1.55rem 1.7rem; border: 0; border-radius: 50%; background: var(--red-grad); color: #fff; box-shadow: 0 10px 30px rgba(210, 30, 61, .45); cursor: pointer; transition: transform .2s, opacity .2s; }
.player-big:hover:not(:disabled) { transform: scale(1.08); }
.player-big::after { content: ""; position: absolute; inset: -.55rem; border: 2px solid rgba(210, 30, 61, .45); border-radius: 50%; animation: player-ping 2s ease-out infinite; }
@keyframes player-ping { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.player.is-playing .player-big { opacity: 0; pointer-events: none; }
.is-soon .player-big { cursor: default; }
.player-soon { position: absolute; z-index: 2; left: 0; right: 0; top: calc(50% + 4rem); margin: 0; font-style: italic; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.player-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1rem; padding: 2.2rem 1.2rem .9rem; background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent); transition: opacity .25s; }
.player.is-playing:not(:hover) .player-bar { opacity: 0; }
.player-bar button { flex: none; width: 1.35rem; height: 1.35rem; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; opacity: .9; }
.player-bar button:hover:not(:disabled) { opacity: 1; color: var(--red); }
.player-bar button:disabled { cursor: default; opacity: .45; }
.player-track { position: relative; flex: 1; height: 4px; background: rgba(255, 255, 255, .22); cursor: pointer; }
.player-track span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); }
.is-soon .player-track { cursor: default; }
.player-time { flex: none; min-width: 5.5rem; font-family: var(--hud); font-size: .8rem; color: rgba(255, 255, 255, .8); text-align: right; }
@media (prefers-reduced-motion: reduce) { .player-big::after { animation: none; } }

/* Cartes produit : DA des cartes de mode de l'accueil (.cat).
   Cadre en biais noir transparent, nom en grosse italique en bas à gauche, prix en étiquette blanche en biais,
   dégradé rouge doux au survol ; bouton d'achat pleine largeur, en biais lui aussi. */
.card { --cut: 1.1rem; gap: .5rem; }
.card:hover { transform: none; }
.card .box { position: relative; overflow: hidden; border: 0; background: rgba(0, 0, 0, .45); clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); cursor: pointer; }
.card .box::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .35) 0%, transparent 55%); transition: background .3s; pointer-events: none; }
.card:hover .box::after { background: linear-gradient(0deg, rgba(210, 30, 61, .45) 0%, rgba(210, 30, 61, .12) 40%, transparent 65%); }
.card .img { aspect-ratio: 4 / 3; background: none; }
.card .ct { position: absolute; z-index: 1; left: calc(var(--cut) + .6rem); right: calc(var(--cut) + .4rem); bottom: .9rem; }
.card h3 { overflow: hidden; padding: 0 .2rem 0 0; font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 1.3vw, 1.5rem); font-weight: 900; line-height: 1; text-align: left; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.card .price { display: inline-flex; align-items: center; gap: .35rem; height: auto; margin-top: .45rem; padding: .15rem .8rem; background: #fff; color: #121216; clip-path: polygon(.35rem 0, 100% 0, calc(100% - .35rem) 100%, 0 100%); font-size: .85rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.card .price s { color: #8a8a93; }
.card .qm { margin-bottom: 2.6rem; }
.card .add { width: 100%; clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
@media (min-width: 1101px) { .card .img { aspect-ratio: 4 / 3; } .card .price { height: auto; } }
/* Cartes produit droites (sans biais) : cadre, étiquette prix et bouton */
.card { --cut: 0rem; }
.card .box, .card .add, .card .price { clip-path: none; }
.card .ct { left: .9rem; right: .9rem; }
/* Bouton panier en icône, coin bas droit de la carte (remplace le bouton rouge pleine largeur) */
/* Le titre garde toute la largeur ; l'icône (2 rem) est calée sous lui, au niveau de l'étiquette prix */
.card .ct { right: .9rem; }
.card .price { margin-top: .7rem; }
.card .add { position: absolute; z-index: 2; right: .9rem; bottom: .9rem; display: grid; place-items: center; width: 2rem; height: 2rem; padding: .2rem; background: none; box-shadow: none; color: #fff; transition: color .15s, transform .15s; } /* icône seule, sans cadre */
.card .add svg { width: 100%; height: 100%; fill: currentColor; }
.card .add:hover { background: none; color: var(--red); filter: none; transform: scale(1.12); }
.card .add[disabled] { opacity: .5; cursor: wait; }
/* « ? » centré dans l'espace libre au-dessus du nom et du prix (la marge basse = hauteur du bloc nom + prix) */
.card .qm { font-size: 3.8rem; margin-bottom: 4.4rem; }
/* Ordinateur : la grille est centrée verticalement entre la bannière et la barre du bas */
@media (min-width: 1101px) {
  .shop-list { display: flex; flex-direction: column; }
  .shop-list > .wrap { margin-top: auto; margin-bottom: auto; }
}
/* Bannière de la boutique : titre seul + phrase de présentation de la catégorie */
.shop-lead { max-width: 34rem; margin: .9rem 0 0; font-size: 1.12rem; line-height: 1.45; color: rgba(255, 255, 255, .92); }
/* Fiche d'un abonnement : mention fair-play / résiliation en petit, sous la liste des avantages */
.modal-desc .sub-note { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; color: rgba(255, 255, 255, .7); }

/* ============ Comparatif des abonnements (catégorie Abonnements) ============
   Une colonne par palier, séparées par un espace ; lignes alternées sombres ; libellés en gras à gauche.
   Le palier mis en avant (.hl) a un cadre rouge continu et un bandeau « Le plus choisi ». */
.abos { --cols: 3; --lab: minmax(15rem, 1.15fr); --gap: .55rem; max-width: 76rem; margin: 0 auto; animation: page-in .28s ease both; }
.abos-row { display: grid; grid-template-columns: var(--lab) repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); }
.abos-label, .abos-val { display: flex; align-items: center; min-height: 3.6rem; background: #121214; }
.abos-row.odd .abos-label, .abos-row.odd .abos-val { background: #1a1a1d; }
.abos-label { padding: .6rem 1.4rem; font-weight: 700; font-size: .98rem; color: #fff; }
.abos-val { justify-content: center; padding: .6rem .5rem; font-size: 1.05rem; text-align: center; color: rgba(255, 255, 255, .92); }
.abos-val b { font-weight: 500; }
.abos-val .ok { width: 1.35rem; height: 1.35rem; fill: var(--red); }
.abos-val .no { color: rgba(255, 255, 255, .28); }
/* Lignes de section : intitulé rouge dans la colonne des libellés, colonnes vides pour garder le cadre continu */
.abos-sec .abos-label, .abos-sec .abos-val { min-height: 2.6rem; background: #0b0b0c; }
.abos-sec .abos-label { padding-top: 1rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #ff5470; }
/* En-tête : une carte par palier */
.abos-head { align-items: end; margin-bottom: var(--gap); }
.abos-tier { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 15.5rem; padding: 1.4rem .9rem 1rem; background: #0d0d0f; }
.abos-logo { flex: 1; display: grid; place-items: center; font-family: var(--display); font-style: italic; font-size: clamp(2.6rem, 3.6vw, 3.6rem); font-weight: 900; line-height: .9; text-transform: uppercase; letter-spacing: -.01em;
  background: linear-gradient(180deg, #fff 30%, #a9a9b2); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
.abos-tier.t2 .abos-logo { background-image: linear-gradient(180deg, #ff5470 15%, #D21E3D 60%, #8c1428); }
.abos-tier.t3 .abos-logo { background-image: linear-gradient(180deg, #fff 0%, #ff5470 35%, #D21E3D 65%, #6C0F1F); }
.abos-tab { align-self: flex-start; margin: .8rem 0 .9rem -.9rem; padding: .45rem 1.6rem .45rem .9rem; background: #1d1d20; clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 100%, 0 100%); font-family: var(--body); font-weight: 700; font-size: 1rem; letter-spacing: .03em; }
.abos-buy { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.abos-price { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.15rem; white-space: nowrap; }
.abos-price small { font-family: var(--body); font-style: normal; font-weight: 500; font-size: .75rem; color: rgba(255, 255, 255, .6); }
.abos-sub { flex: none; height: 2.4rem; padding: 0 1.2rem; border: 0; background: var(--red); color: #fff; font-family: var(--body); font-weight: 700; font-size: .9rem; cursor: pointer; transition: filter .15s, transform .15s; }
.abos-sub:hover { filter: brightness(1.15); transform: translateY(-1px); }
.abos-sub[disabled] { opacity: .55; cursor: wait; }
/* Palier mis en avant : cadre rouge continu sur toute la colonne + bandeau */
.abos-tier.hl { padding-top: 3.4rem; border: 3px solid var(--red); border-bottom: 0; }
.abos-val.hl { border-left: 3px solid var(--red); border-right: 3px solid var(--red); }
.abos-end .abos-val { min-height: 0; height: 3px; padding: 0; background: none; border: 0; }
.abos-end .abos-val.hl { background: var(--red); }
.abos-ribbon { position: absolute; left: 0; right: 0; top: 0; padding: .55rem; background: var(--red-grad); font-family: var(--body); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.abos-note { margin: 1.4rem 0 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--red); background: rgba(0, 0, 0, .45); font-size: .85rem; line-height: 1.5; color: rgba(255, 255, 255, .65); }
.abos-note b { display: block; margin-bottom: .4rem; font-size: .95rem; color: #fff; }
/* La page des abonnements défile normalement (le tableau est plus haut que l'écran) */
.shop-abos .shop-list > .wrap { margin-top: 0; margin-bottom: 0; }
.shop-abos .shop-list { padding-top: 2.5rem; padding-bottom: 3rem; }
@media (max-width: 900px) {
  .abos { --lab: minmax(8rem, 1.2fr); --gap: .3rem; }
  .abos-tier { min-height: 11rem; padding: 1rem .4rem .7rem; }
  .abos-tier.hl { padding-top: 2.6rem; }
  .abos-logo { font-size: clamp(.85rem, 4.2vw, 1.6rem); letter-spacing: -.02em; }
  .abos-tab { display: none; }
  .abos-buy { flex-direction: column; align-items: stretch; gap: .4rem; margin-top: .6rem; text-align: center; }
  .abos-sub { padding: 0 .15rem; font-size: .68rem; letter-spacing: 0; }
  .abos-ribbon { font-size: .6rem; padding: .45rem .2rem; }
  .abos-label { padding: .5rem .6rem; font-size: .8rem; }
  .abos-val { padding: .5rem .2rem; font-size: .82rem; }
}

/* ============ Fiche produit : même DA que les cartes (bords droits, fond sombre, « ? », rouge de la charte) ============ */
.modal-bg { background: rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-box { width: min(54rem, 100%); grid-template-columns: 2fr 3fr; border-radius: 0; background: #121214; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .7); }
.modal-img { display: grid; place-items: center; min-height: 20rem; background: radial-gradient(ellipse at 50% 50%, rgba(210, 30, 61, .22), transparent 65%), #0b0b0d; }
.modal-img .qm { font-size: 9rem; }
.modal-box .x { position: absolute; top: .9rem; right: .9rem; z-index: 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: .5rem; border: 0; border-radius: 0; background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; transition: background .15s, color .15s; }
.modal-box .x svg { width: 100%; height: 100%; fill: currentColor; }
.modal-box .x:hover { background: var(--red); }
.modal-body { gap: .7rem; padding: 2.4rem 2.2rem 2rem; }
.modal-cat { font-family: var(--body); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ff5470; }
.modal-body h3 { margin: 0 2.5rem 0 0; font-family: var(--display); font-style: italic; font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 900; line-height: .95; text-transform: uppercase; }
.modal-desc { font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.modal-desc p { margin: 0 0 .5rem; }
.modal-desc ul { list-style: none; margin: .5rem 0; padding: 0; }
.modal-desc li { position: relative; padding: .35rem 0 .35rem 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #fff; }
.modal-desc li::before { content: ""; position: absolute; left: 0; top: .85rem; width: .55rem; height: .55rem; background: var(--red); }
.modal-foot { gap: 1.2rem; padding-top: 1.3rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.modal-foot .price { font-family: var(--display); font-style: italic; font-size: 2rem; font-weight: 900; line-height: 1; }
.modal-foot .price s { margin-right: .5rem; font-size: 1.1rem; color: var(--dim); }
.modal-add { height: 3rem; padding: 0 2rem; border: 0; background: var(--red-grad); color: #fff; font-family: var(--body); font-style: italic; font-size: 1.05rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: filter .15s, transform .15s; }
.modal-add:hover { filter: brightness(1.12); transform: translateY(-1px); }
.modal-add[disabled] { opacity: .55; cursor: wait; }
@media (max-width: 900px) {
  .modal-box { grid-template-columns: 1fr; }
  .modal-img { min-height: 0; aspect-ratio: 16 / 9; }
  .modal-img .qm { font-size: 5rem; }
  .modal-body { padding: 1.6rem 1.3rem 1.4rem; }
  .modal-add { flex: 1; }
}

/* 06/10 : image de la fiche produit affichee EN ENTIER (plus de rognage), centree avec une marge,
   pour toutes les photos (coins et autres produits) */
.modal-img img { width: 100%; height: 100%; max-height: 22rem; object-fit: contain; padding: 1.5rem; box-sizing: border-box; }

/* Trame grunge sur les fonds rouges : calque en produit (multiply) à 10 % d'opacité, c'est le NOIR de la trame qui marque (densité linéaire - n'existe pas en CSS).
   z-index -1 dans un contexte isolé = au-dessus du fond de la section, sous tout son contenu. */
body, .top3-sec, .perks, .foot, .shop-head { position: relative; isolation: isolate; }
body::after, .top3-sec::after, .perks::after, .foot::after, .shop-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); mix-blend-mode: multiply; opacity: .1; pointer-events: none; }
.shop-head::after { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ============ Ajout au panier : le chariot de la barre du haut s'anime (à la place d'un bandeau) ============ */
.cart-btn.bump i { animation: cart-roll .75s cubic-bezier(.3, 1.4, .5, 1) both; }
.cart-btn.bump b { animation: cart-badge .6s .15s cubic-bezier(.3, 1.6, .5, 1) both; }
.cart-btn.bump::after { content: ""; position: absolute; inset: -.35rem; border-radius: 50%; border: 2px solid var(--red); pointer-events: none; animation: cart-ring .7s ease-out both; }
@keyframes cart-roll {
  0% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-5px) rotate(-14deg); }
  45% { transform: translateX(4px) rotate(10deg) scale(1.18); color: #ff5470; }
  70% { transform: translateX(-2px) rotate(-4deg) scale(1.05); }
  100% { transform: none; }
}
@keyframes cart-badge { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes cart-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .cart-btn.bump i, .cart-btn.bump b, .cart-btn.bump::after { animation: none; } }

/* ============ Même rendu que le bouton « Rejoindre le serveur » partout : Saira Condensed en italique ============
   Titres en gras 700 (comme le bouton), textes courants en italique 400 pour rester lisibles. Les icônes restent droites. */
body { font-style: italic; font-weight: 400; }
h1, h2, h3, h4, .hero-title, .pol-in h1 { font-style: italic; font-weight: 700; }
.feed-track em, .tabs button small, .rule h3 b, .abos-price small { font-style: italic; }
.fa-solid, .fa-brands { font-style: normal; }
/* Sur-titre rouge du hero : moins espacé, un peu plus grand, calé sur le départ du titre en italique */
.hero-kicker { font-size: 1.45rem; letter-spacing: .2em; margin: 0 0 -.15rem .45rem; line-height: 1; }
/* Barre du haut sans logo : menu centré, icônes à droite (la 1re colonne de la grille reste vide) */
@media (min-width: 1101px) { .top-in > .nav { grid-column: 2; } .top-in > .top-right { grid-column: 3; } }