/* TossKing : charte graphique commune à toutes les pages. Deux thèmes : sombre « arène » (par défaut) et clair « crème ». L'or sert à Pile et aux actions, l'argent bleuté à Face. Toutes les couleurs passent par les variables ci-dessous : le thème clair ne fait que les redéfinir (attribut data-theme sur , posé par /theme.js avant l'affichage). Polices hébergées sur le site (voir scripts/build.mjs). */ @font-face { font-family: "Unbounded"; src: url("/fonts/unbounded-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; } @font-face { font-family: "Inter"; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } :root { --bg: #07080c; --bg-2: #0b0d13; --surface: #11141c; --surface-2: #171b25; --surface-3: #1e2330; --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .12); --text: #f3f4f7; --muted: #9aa1b3; --dim: #7d869b; --gold: #f7c948; --gold-2: #e8ad2c; --gold-deep: #8f6212; --gold-soft: rgba(247, 201, 72, .12); --silver: #a9bbdc; --silver-soft: rgba(169, 187, 220, .14); --ok: #34d399; --ok-soft: rgba(52, 211, 153, .12); --err: #f87171; --err-soft: rgba(248, 113, 113, .12); --radius: 16px; --radius-sm: 10px; --shadow: 0 20px 60px -20px rgba(0, 0, 0, .7); /* Couleurs de détail (redéfinies par le thème clair) */ --gold-ink: #f7c948; /* or utilisé pour du texte */ --gold-border: rgba(247, 201, 72, .3); --silver-hi: #c9d6ee; --live: #ff5b5b; --live-soft: rgba(255, 91, 91, .16); --nav-bg: rgba(7, 8, 12, .72); --menu-bg: rgba(7, 8, 12, .97); --inset: rgba(0, 0, 0, .25); --hover-row: rgba(255, 255, 255, .02); --card-sheen: rgba(255, 255, 255, .025); --arena-1: #121620; --arena-2: #0c0f16; --ring-track: rgba(255, 255, 255, .06); --count-color: #fff; --count-shadow: 0 6px 40px rgba(0, 0, 0, .9); --coin-shadow: rgba(0, 0, 0, .75); --sticky-bg: rgba(10, 12, 18, .82); --glow-1: rgba(247, 201, 72, .09); --glow-2: rgba(111, 140, 255, .06); --noise-opacity: .035; --hero-em-1: #ffe07a; --hero-em-2: #e8ad2c; --deco-ring: rgba(247, 201, 72, .16); --deco-ring-2: rgba(255, 255, 255, .04); --display: "Unbounded", system-ui, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --max: 1120px; --nav-h: 64px; color-scheme: dark; } /* Thème clair, choisi par le joueur ou suivant le réglage de l'appareil. */ :root[data-theme="light"] { --bg: #f5f3ee; --bg-2: #efece4; --surface: #ffffff; --surface-2: #f3f1eb; --surface-3: #e8e4da; --line: rgba(20, 22, 28, .09); --line-2: rgba(20, 22, 28, .16); --text: #15171d; --muted: #535a69; --dim: #677083; --gold: #f2b92c; --gold-2: #dc9d16; --gold-soft: rgba(242, 185, 44, .16); --gold-ink: #946000; --gold-border: rgba(196, 140, 20, .38); --silver: #5c6d8f; --silver-hi: #a9bbdc; --silver-soft: rgba(124, 144, 182, .16); --ok: #087a54; --ok-soft: rgba(12, 148, 102, .1); --err: #d23f3f; --err-soft: rgba(210, 63, 63, .09); --live: #e23b3b; --live-soft: rgba(226, 59, 59, .12); --shadow: 0 18px 50px -24px rgba(40, 36, 60, .3); --nav-bg: rgba(245, 243, 238, .82); --menu-bg: rgba(245, 243, 238, .98); --inset: rgba(20, 22, 28, .035); --hover-row: rgba(20, 22, 28, .03); --card-sheen: rgba(255, 255, 255, 0); --arena-1: #ffffff; --arena-2: #f7f3e8; --ring-track: rgba(20, 22, 28, .08); --count-color: #15171d; --count-shadow: 0 4px 30px rgba(255, 255, 255, .95); --coin-shadow: rgba(60, 44, 10, .38); --sticky-bg: rgba(255, 255, 255, .9); --glow-1: rgba(242, 185, 44, .16); --glow-2: rgba(111, 140, 255, .08); --noise-opacity: .02; --hero-em-1: #e7a31d; --hero-em-2: #8f5b00; --deco-ring: rgba(196, 140, 20, .28); --deco-ring-2: rgba(20, 22, 28, .06); color-scheme: light; } @media (prefers-color-scheme: light) { :root[data-theme="system"] { --bg: #f5f3ee; --bg-2: #efece4; --surface: #ffffff; --surface-2: #f3f1eb; --surface-3: #e8e4da; --line: rgba(20, 22, 28, .09); --line-2: rgba(20, 22, 28, .16); --text: #15171d; --muted: #535a69; --dim: #677083; --gold: #f2b92c; --gold-2: #dc9d16; --gold-soft: rgba(242, 185, 44, .16); --gold-ink: #946000; --gold-border: rgba(196, 140, 20, .38); --silver: #5c6d8f; --silver-hi: #a9bbdc; --silver-soft: rgba(124, 144, 182, .16); --ok: #087a54; --ok-soft: rgba(12, 148, 102, .1); --err: #d23f3f; --err-soft: rgba(210, 63, 63, .09); --live: #e23b3b; --live-soft: rgba(226, 59, 59, .12); --shadow: 0 18px 50px -24px rgba(40, 36, 60, .3); --nav-bg: rgba(245, 243, 238, .82); --menu-bg: rgba(245, 243, 238, .98); --inset: rgba(20, 22, 28, .035); --hover-row: rgba(20, 22, 28, .03); --card-sheen: rgba(255, 255, 255, 0); --arena-1: #ffffff; --arena-2: #f7f3e8; --ring-track: rgba(20, 22, 28, .08); --count-color: #15171d; --count-shadow: 0 4px 30px rgba(255, 255, 255, .95); --coin-shadow: rgba(60, 44, 10, .38); --sticky-bg: rgba(255, 255, 255, .9); --glow-1: rgba(242, 185, 44, .16); --glow-2: rgba(111, 140, 255, .08); --noise-opacity: .02; --hero-em-1: #e7a31d; --hero-em-2: #8f5b00; --deco-ring: rgba(196, 140, 20, .28); --deco-ring-2: rgba(20, 22, 28, .06); color-scheme: light; } } /* Transition douce lors du changement de thème (seulement à ce moment-là). */ :root.theme-anim, :root.theme-anim * { transition: background-color .35s, color .35s, border-color .35s !important; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: clip; } /* les décors (cercles, halos) ne doivent jamais créer de défilement horizontal */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg); background-image: radial-gradient(900px 520px at 78% -8%, var(--glow-1), transparent 60%), radial-gradient(700px 480px at -10% 30%, var(--glow-2), transparent 60%); background-attachment: fixed; color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Grain léger, pour donner de la matière au fond. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body > * { position: relative; z-index: 1; } a { color: var(--gold-ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } ::selection { background: rgba(247, 201, 72, .3); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; } [hidden] { display: none !important; } h1, h2, h3, .display { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 0; } h1 { font-size: clamp(30px, 5vw, 48px); } h2 { font-size: clamp(20px, 2.6vw, 28px); } h3 { font-size: 17px; } p { margin: 0 0 12px; } .muted { color: var(--muted); } .dim { color: var(--dim); } .gold { color: var(--gold-ink); } .small { font-size: 14px; } .tiny { font-size: 12px; } .center { text-align: center; } .num, .tabular { font-variant-numeric: tabular-nums; } code, .mono { font-family: var(--mono); font-size: .92em; word-break: break-all; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 10px; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); } .eyebrow .dot.live { background: var(--live); box-shadow: 0 0 0 4px var(--live-soft); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 91, 91, 0); } } /* ------------------------------------------------------------------ mise en page */ .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; } .container.narrow { max-width: 760px; } .container.tight { max-width: 520px; } main { flex: 1; padding: 32px 0 72px; } .section { margin-top: 64px; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .section-head p { margin: 6px 0 0; } .stack > * + * { margin-top: 16px; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } main { padding-top: 20px; } .section { margin-top: 48px; } } /* ------------------------------------------------------------------ navigation */ .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: var(--nav-bg); border-bottom: 1px solid var(--line); } .nav .container { height: 100%; display: flex; align-items: center; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; } .brand:hover { text-decoration: none; } .brand-mark { width: 28px; height: 28px; flex: none; } .nav-links { display: flex; gap: 4px; flex: 1; } .nav-links a { color: var(--muted); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 999px; } .nav-links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .nav-links a.active { color: var(--text); background: var(--surface-2); } .nav-links a .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 1px; animation: pulse 1.6s infinite; } .nav-actions { display: flex; gap: 10px; align-items: center; } .nav-toggle { display: none; } @media (max-width: 820px) { .nav .container { gap: 12px; } .nav-links { position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; padding: 12px 16px 20px; background: var(--menu-bg); border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, transform .18s, visibility 0s .18s; } .nav-links a { font-size: 17px; padding: 12px 14px; } .nav.open .nav-links { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s, transform .18s; } .nav-actions { margin-left: auto; } .nav-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); cursor: pointer; padding: 0; } .nav-actions .btn-ghost { display: none; } } /* ------------------------------------------------------------------ pied de page */ .footer { border-top: 1px solid var(--line); padding: 36px 0 44px; color: var(--dim); font-size: 14px; } .footer .container { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; } .footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; } .footer a { color: var(--muted); } .footer p { margin: 6px 0 0; max-width: 420px; } /* ------------------------------------------------------------------ boutons */ .btn, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; min-height: 46px; border-radius: 999px; border: 1px solid transparent; font: 600 15px/1 var(--body); cursor: pointer; text-decoration: none; white-space: nowrap; color: #1c1400; background: linear-gradient(180deg, #ffd865, var(--gold) 40%, var(--gold-2)); box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 8px 24px -8px rgba(247, 201, 72, .5); transition: transform .12s, box-shadow .2s, background .2s, border-color .2s, opacity .2s; } .btn:hover, button:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 12px 28px -8px rgba(247, 201, 72, .6); } .btn:active, button:active { transform: translateY(0) scale(.98); } button:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; box-shadow: none; } .btn-lg { min-height: 54px; padding: 16px 28px; font-size: 16px; } .btn-sm { min-height: 36px; padding: 8px 14px; font-size: 14px; } .btn-ghost, button.secondary, .btn.secondary { color: var(--text); background: var(--surface-2); border-color: var(--line-2); box-shadow: none; } .btn-ghost:hover, button.secondary:hover, .btn.secondary:hover { background: var(--surface-3); box-shadow: none; } button.link { background: none; border: 0; box-shadow: none; color: var(--gold-ink); padding: 0; min-height: 0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } button.link:hover { transform: none; box-shadow: none; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* ------------------------------------------------------------------ cartes et panneaux */ .card, .panel { background: linear-gradient(180deg, var(--card-sheen), transparent 40%), var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .panel { margin: 16px 0; } .card-link { display: block; color: var(--text); transition: border-color .2s, transform .2s, background .2s; } .card-link:hover { text-decoration: none; border-color: var(--gold-border); transform: translateY(-2px); box-shadow: var(--shadow); } .card h3 { margin-bottom: 6px; } .card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-3); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; } .pill.live { color: var(--text); background: var(--live-soft); border-color: var(--live-soft); } .pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: pulse 1.6s infinite; } .pill.gold { color: var(--gold-ink); background: var(--gold-soft); border-color: var(--gold-border); } .pill.ok { color: var(--ok); background: var(--ok-soft); border-color: rgba(52, 211, 153, .3); } /* Chiffre clé */ .stat { padding: 20px; } .stat .label { font-size: 13px; color: var(--muted); font-weight: 500; } .stat .value { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 6px; } .stat .value small { font-size: .5em; color: var(--muted); font-weight: 600; margin-left: 4px; } /* ------------------------------------------------------------------ formulaires et messages */ label { display: block; font-size: 14px; font-weight: 500; color: var(--muted); margin: 16px 0 6px; } label.check { display: flex; gap: 12px; align-items: flex-start; color: var(--text); font-size: 15px; font-weight: 400; cursor: pointer; } label.check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--gold); } input[type="email"], input[type="text"], select { width: 100%; min-height: 48px; padding: 12px 14px; font: 16px var(--body); color: var(--text); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; } input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); } .status { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; border: 1px solid transparent; } .status.ok { background: var(--ok-soft); color: var(--ok); border-color: rgba(52, 211, 153, .25); } .status.error { background: var(--err-soft); color: var(--err); border-color: rgba(248, 113, 113, .25); } .status.info { background: var(--surface-2); color: var(--muted); border-color: var(--line); } .ok-text { color: var(--ok); } .err-text { color: var(--err); } /* ------------------------------------------------------------------ tableaux */ .table-wrap { overflow-x: auto; margin: 0 -4px; } table { width: 100%; border-collapse: collapse; font-size: 15px; } th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } th { color: var(--dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } tbody tr { transition: background .15s; } tbody tr:hover { background: var(--hover-row); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .rank { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--display); font-size: 13px; font-weight: 700; background: var(--surface-3); color: var(--muted); } .rank.r1 { background: linear-gradient(180deg, #ffe07a, #e0a92c); color: #3a2800; } .rank.r2 { background: linear-gradient(180deg, #e5ecf7, #9fb0cc); color: #1d2533; } .rank.r3 { background: linear-gradient(180deg, #f0b98a, #b8733c); color: #2e1a08; } .player { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; } .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #0b0d13; } /* ------------------------------------------------------------------ pièce 3D (voir src/web/coin.ts) */ .coin-scene { --size: 200px; --thick: calc(var(--size) * .07); position: relative; width: var(--size); height: var(--size); perspective: calc(var(--size) * 6); margin: 0 auto; } .coin-toss { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } .coin { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } .coin-face, .coin-edge { position: absolute; inset: 0; border-radius: 50%; } .coin-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; } .coin-face svg { width: 100%; height: 100%; display: block; } .coin-face.front { transform: translateZ(calc(var(--thick) / 2)); } .coin-face.back { transform: rotateX(180deg) translateZ(calc(var(--thick) / 2)); } /* Les disques de la tranche restent un peu en retrait des faces : sinon ils se superposent aux faces au même niveau. */ .coin-edge { inset: 1.5%; transform: translateZ(calc(var(--thick) * (var(--i) / var(--n) - .5) * .9)); background: repeating-conic-gradient(from 0deg, #a8761a 0 2deg, #6e4a0c 2deg 4deg); } /* Reflet qui glisse sur la pièce */ .coin-face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .2) 47%, transparent 58%); transform: translateX(-60%); animation: sheen 5s ease-in-out infinite; } @keyframes sheen { 0%, 55% { transform: translateX(-70%); } 80%, 100% { transform: translateX(70%); } } .coin-shadow { position: absolute; left: 12%; right: 12%; bottom: -14%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, var(--coin-shadow), transparent); filter: blur(4px); will-change: transform, opacity; } .coin-glow { position: absolute; inset: -18%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(closest-side, rgba(247, 201, 72, .35), transparent 70%); } .coin-scene.glow-gold .coin-glow { opacity: 1; } .coin-scene.glow-ok .coin-glow { opacity: 1; background: radial-gradient(closest-side, rgba(52, 211, 153, .45), transparent 70%); } .coin-scene.glow-out .coin-glow { opacity: 1; background: radial-gradient(closest-side, rgba(248, 113, 113, .4), transparent 70%); } .coin-scene.floating .coin-toss { animation: float 5s ease-in-out infinite; } .coin-scene.floating .coin-shadow { animation: float-shadow 5s ease-in-out infinite; } @keyframes float { 50% { transform: translateY(-5%); } } @keyframes float-shadow { 50% { transform: scale(.85); opacity: .7; } } .coin-scene.clickable { cursor: pointer; } @media (prefers-reduced-motion: reduce) { .coin-face::after, .coin-scene.floating .coin-toss, .coin-scene.floating .coin-shadow { animation: none; } } /* ------------------------------------------------------------------ accueil */ .hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: 28px 0 8px; } .hero h1 { font-size: clamp(36px, 6.2vw, 68px); letter-spacing: -.035em; } .hero h1 em { font-style: normal; background: linear-gradient(180deg, var(--hero-em-1), var(--hero-em-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 540px; margin: 20px 0 28px; } .hero-coin { position: relative; display: grid; justify-items: center; align-content: center; gap: 22px; min-height: 420px; } .halving { text-align: center; display: grid; justify-items: center; gap: 6px; } .halving-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; } .halving-num { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; } .halving-num span { font-size: clamp(40px, 6vw, 56px); letter-spacing: -.03em; line-height: 1; min-width: 4ch; text-align: right; transition: color .3s; } .halving-num small { font-size: 16px; font-weight: 700; color: var(--muted); min-width: 7ch; text-align: left; } .halving.done .halving-num span { color: var(--gold-ink); } .halving-steps { display: flex; gap: 5px; margin-top: 6px; } .halving-steps span { width: 14px; height: 6px; border-radius: 3px; background: var(--line-2); transition: background .3s; } .halving-steps span.on { background: var(--gold); } .halving-caption { margin: 2px 0 0; font-size: 14px; color: var(--muted); min-height: 1.5em; } .hero-coin .coin-scene { --size: min(200px, 44vw); } .hero-coin .coin-scene { z-index: 1; } .nav-links .mobile-only { display: none; } @media (max-width: 820px) { .nav-links .mobile-only { display: block; } } @keyframes rotate { to { transform: rotate(360deg); } } .trust { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); font-size: 14px; margin-top: 26px; } .trust span { display: inline-flex; align-items: center; gap: 8px; } .trust svg { color: var(--gold-ink); flex: none; } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 8px; text-align: center; } .hero .lead { margin-left: auto; margin-right: auto; } .hero .btn-row, .trust { justify-content: center; } .hero-coin { min-height: 0; padding: 8px 0 12px; order: -1; } } /* Tournoi mis en avant */ .feature { position: relative; overflow: hidden; padding: 28px; border-color: var(--gold-border); background: radial-gradient(600px 240px at 100% 0%, var(--gold-soft), transparent 70%), var(--surface); } .feature-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .feature h2 { margin: 4px 0 10px; } .feature .meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 15px; } .feature .meta strong { color: var(--text); font-weight: 600; } @media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr; } } /* Encart entraînement de l'accueil */ .teaser-stats { display: grid; gap: 10px; min-width: 240px; } .teaser-stats .mini-stat .value { font-size: 20px; } .teaser-stats .mini-stat .sub { font-size: 12px; color: var(--dim); } /* Compte à rebours en blocs */ .clock { display: flex; gap: 8px; } .clock .unit { min-width: 64px; padding: 10px 8px 8px; text-align: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; } .clock .unit b { display: block; font-family: var(--display); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .clock .unit span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); } @media (max-width: 420px) { .clock .unit { min-width: 0; flex: 1; } .clock .unit b { font-size: 22px; } } /* Étapes « comment ça marche » */ .step { position: relative; } .step .n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-family: var(--display); font-weight: 700; color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-border); margin-bottom: 14px; } .step p { color: var(--muted); margin: 6px 0 0; font-size: 15px; } /* Bloc équité avec le tirage drand en direct */ .beacon { font-size: 14px; } .beacon .row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .beacon .row:last-child { border-bottom: 0; } .beacon .row span:first-child { color: var(--muted); } .beacon .val { font-family: var(--mono); text-align: right; word-break: break-all; } .beacon .fresh { animation: fresh .8s ease-out; } @keyframes fresh { from { color: var(--gold-ink); } } /* Listes de gagnants */ .winner-list { list-style: none; margin: 0; padding: 0; } .winner-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .winner-list li:last-child { border-bottom: 0; } .winner-list .sub { font-size: 13px; color: var(--dim); } /* ------------------------------------------------------------------ page du tournoi */ .t-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .t-head h1 { font-size: clamp(26px, 4vw, 40px); } .t-head .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); margin-top: 8px; font-size: 15px; } .t-head .meta strong { color: var(--text); font-weight: 600; } .t-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; } @media (max-width: 960px) { .t-layout { grid-template-columns: 1fr; } } .arena { position: relative; overflow: clip; padding: 20px; border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(520px 320px at 50% 38%, var(--glow-1), transparent 70%), linear-gradient(180deg, var(--arena-1), var(--arena-2)); box-shadow: var(--shadow); } .arena.state-ok { border-color: rgba(52, 211, 153, .35); } .arena.state-out { border-color: rgba(248, 113, 113, .3); } .hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .hud > div { background: var(--inset); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; text-align: center; } .hud .label { display: block; font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; } .hud .value { display: block; font-family: var(--display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; } .hud .value.urgent { color: var(--err); } @media (max-width: 420px) { .hud .value { font-size: 20px; } } .stage { position: relative; height: 290px; display: grid; place-items: center; margin: 8px 0 0; } .stage .coin-scene { --size: 168px; } .timer-ring { position: absolute; width: 250px; height: 250px; top: 50%; left: 50%; transform: translate(-50%, -52%) rotate(-90deg); pointer-events: none; } .timer-ring circle { fill: none; stroke-width: 5; } .timer-ring .track { stroke: var(--ring-track); } .timer-ring .bar { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .2s linear, stroke .3s; filter: drop-shadow(0 0 6px rgba(247, 201, 72, .5)); } .timer-ring.urgent .bar { stroke: var(--err); filter: drop-shadow(0 0 6px rgba(248, 113, 113, .6)); } .countdown { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 120px; font-weight: 800; color: var(--count-color); text-shadow: var(--count-shadow); font-variant-numeric: tabular-nums; pointer-events: none; } .countdown.pop { animation: pop .9s cubic-bezier(.2, .8, .2, 1); } @keyframes pop { from { transform: scale(1.8); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1); opacity: .95; } } .stage.dim .coin-scene { opacity: .25; filter: blur(2px); transition: .3s; } .headline { text-align: center; font-family: var(--display); font-size: clamp(24px, 4vw, 32px); font-weight: 800; margin: 4px 0 6px; min-height: 1.2em; letter-spacing: -.02em; } .headline.ok { color: var(--ok); } .headline.out { color: var(--err); } .headline.big { font-size: clamp(34px, 6vw, 48px); } .subline { text-align: center; color: var(--muted); margin: 0 auto 16px; min-height: 1.55em; max-width: 520px; } .picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 6px; } button.pick { position: relative; min-height: 0; flex-direction: column; gap: 10px; padding: 16px 10px 14px; border-radius: 18px; background: var(--inset); color: var(--text); border: 2px solid var(--line-2); box-shadow: none; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: .02em; } button.pick:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold-border); box-shadow: 0 10px 30px -12px rgba(247, 201, 72, .45); } button.pick .pick-coin { width: 58px; height: 58px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } button.pick .pick-coin svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); } button.pick:hover:not(:disabled) .pick-coin { transform: rotateY(360deg); } button.pick .pick-sub { font-family: var(--body); font-size: 12px; font-weight: 600; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; } button.pick.selected { border-color: var(--gold); background: var(--gold-soft); } button.pick.confirmed { border-color: var(--ok); background: var(--ok-soft); } button.pick.confirmed .pick-sub { color: var(--ok); } button.pick:disabled { opacity: .55; } button.pick.confirmed:disabled, button.pick.selected:disabled { opacity: 1; } .pick-status { text-align: center; min-height: 1.55em; margin: 8px 0 4px; font-size: 15px; color: var(--muted); } .pick-status.ok { color: var(--ok); } .pick-status.error { color: var(--err); } .split { margin: 18px 0 4px; } .split-bar { display: flex; gap: 3px; height: 12px; } .split-bar span { display: block; height: 100%; min-width: 3px; transition: flex .6s cubic-bezier(.2, .8, .2, 1); } .split-bar span:first-child { background: linear-gradient(90deg, var(--gold-2), var(--gold)); border-radius: 6px 2px 2px 6px; } .split-bar span:last-child { background: linear-gradient(90deg, var(--silver), var(--silver-hi)); border-radius: 2px 6px 6px 2px; } .split-legend { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; } .split-legend b { color: var(--text); } .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; } .swatch.h { background: var(--gold); } .swatch.t { background: var(--silver); } .proof-line { font-size: 13px; text-align: center; color: var(--dim); margin: 14px 0 0; } .banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--gold-soft); border: 1px solid var(--gold-border); margin-top: 16px; font-size: 15px; } .banner.info { background: var(--surface-2); border-color: var(--line); color: var(--muted); } .side-card + .side-card { margin-top: 20px; } .big-number { font-family: var(--display); font-size: 44px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; } .big-number small { font-size: 16px; color: var(--muted); font-weight: 600; letter-spacing: 0; margin-left: 6px; } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .timeline li:last-child { border-bottom: 0; } .timeline .r { color: var(--dim); font-weight: 600; } .res { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .mini-coin { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 800; } .mini-coin.h { background: radial-gradient(circle at 35% 30%, #ffe89a, var(--gold) 50%, var(--gold-deep)); color: #5b3d05; } .mini-coin.t { background: radial-gradient(circle at 35% 30%, #f1f5fc, var(--silver) 50%, #5f7090); color: #243049; } .mini-coin.x { background: var(--surface-3); color: var(--dim); } /* Avant le tournoi */ .pre { text-align: center; padding: 36px 24px; } .pre .clock { justify-content: center; margin: 14px 0 22px; } .pre .coin-scene { --size: 110px; margin-bottom: 20px; } .info-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; text-align: left; } .info-list div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .info-list dt { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } .info-list dd { margin: 4px 0 0; font-weight: 600; } .turnstile { display: flex; justify-content: center; margin: 14px 0 0; } .turnstile:empty { display: none; } /* Fin du tournoi */ .podium { text-align: center; padding: 36px 24px; overflow: hidden; position: relative; } .podium .coin-scene { --size: 130px; margin-bottom: 18px; } .podium .winners { font-family: var(--display); font-size: clamp(26px, 5vw, 40px); font-weight: 800; color: var(--gold-ink); word-break: break-word; margin: 6px 0 10px; } .podium .facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; color: var(--muted); margin: 14px 0 22px; } .podium .facts strong { color: var(--text); } /* Courbe des survivants */ .chart { position: relative; margin-top: 10px; } .chart svg { display: block; width: 100%; height: auto; overflow: visible; } .chart .grid { stroke: var(--ring-track); stroke-width: 1; } .chart .axis-label { fill: var(--dim); font-size: 11px; font-family: var(--body); font-variant-numeric: tabular-nums; } .chart .line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart .area { fill: url(#survivor-fill); } .chart .dot { fill: var(--gold); stroke: var(--surface); stroke-width: 2; } .chart .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; } .chart .hit { fill: transparent; cursor: crosshair; } .tooltip { position: absolute; pointer-events: none; background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 10px; padding: 7px 11px; font-size: 13px; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); box-shadow: var(--shadow); } .tooltip strong { display: block; font-variant-numeric: tabular-nums; } .names { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; } .names li { background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px; } .names li.me { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-soft); } /* Confettis (canvas plein écran) */ .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; } /* ------------------------------------------------------------------ onglets */ .tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 20px; } .tabs button { min-height: 38px; padding: 8px 16px; background: none; color: var(--muted); box-shadow: none; font-weight: 600; } .tabs button:hover { transform: none; box-shadow: none; color: var(--text); } .tabs button[aria-selected="true"] { background: var(--surface-3); color: var(--text); } .tabs-sm { display: flex; width: 100%; } .tabs-sm button { flex: 1; min-height: 32px; padding: 6px 8px; font-size: 13px; } .me-row { background: var(--gold-soft); } .winner-list li.me-row { border-radius: 10px; padding-left: 8px; padding-right: 8px; } .mini-stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; } .mini-stat .label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } .mini-stat .value { font-family: var(--display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ vérification */ .steps { padding-left: 22px; margin: 0 0 16px; } .steps li { margin: 8px 0; color: var(--muted); } .steps li::marker { color: var(--gold-ink); font-weight: 700; } .checks { list-style: none; padding: 0; margin: 12px 0; font-size: 14px; } .checks li { margin: 6px 0; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; margin: 12px 0 16px; } .kv dt { color: var(--dim); } .kv dd { margin: 0; min-width: 0; } details { border-top: 1px solid var(--line); padding: 12px 0; } details:last-child { border-bottom: 1px solid var(--line); } summary { cursor: pointer; font-weight: 600; list-style-position: outside; } @media (max-width: 480px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: 6px; } } /* ------------------------------------------------------------------ pages de texte (règles, comment ça marche) */ .prose h2 { margin: 40px 0 14px; } .prose h3 { margin: 26px 0 8px; } .prose p, .prose li { color: var(--muted); } .prose li { margin: 6px 0; } .prose strong { color: var(--text); } .faq details { padding: 16px 0; } .faq summary { font-size: 16px; } .faq details p { color: var(--muted); margin: 10px 0 0; } /* ------------------------------------------------------------------ connexion */ .auth { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; min-height: calc(100vh - var(--nav-h) - 200px); } .auth .coin-scene { --size: 150px; margin: 0 0 22px; } .auth ul { list-style: none; padding: 0; margin: 20px 0 0; } .auth li { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; color: var(--muted); } .auth li svg { flex: none; color: var(--gold-ink); margin-top: 3px; } @media (max-width: 820px) { .auth { grid-template-columns: 1fr; gap: 12px; } .auth .aside { display: none; } } .skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; color: transparent !important; } @keyframes shimmer { to { background-position: -200% 0; } } /* ------------------------------------------------------------------ probabilités */ .odds { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); background: var(--gold-soft); border: 1px solid var(--gold-border); font-variant-numeric: tabular-nums; } .odds svg { color: var(--gold-ink); flex: none; } .odds b { color: var(--gold-ink); font-weight: 700; } .odds-fun { display: block; margin-top: 6px; font-size: 13px; color: var(--dim); font-style: italic; } .odds-wrap { text-align: center; min-height: 30px; margin: 0 0 10px; } .odds-wrap .odds { animation: odds-in .5s cubic-bezier(.2, .8, .2, 1); } @keyframes odds-in { from { opacity: 0; transform: translateY(6px) scale(.96); } } .odds-cell { display: block; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ entraînement */ .streak-hero { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 2px 0 6px; } .streak-hero .n { font-family: var(--display); font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; transition: color .3s; } .streak-hero .n.bump { animation: bump .5s cubic-bezier(.2, .8, .2, 1); color: var(--ok); } .streak-hero .n.broken { animation: shake .45s; color: var(--err); } .streak-hero .unit { color: var(--muted); font-weight: 600; } @keyframes bump { 40% { transform: scale(1.25); } } @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .history-strip { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; min-height: 26px; margin: 14px 0 4px; } .history-strip .mini-coin { width: 20px; height: 20px; font-size: 9px; box-shadow: 0 0 0 2px var(--surface); } .history-strip .mini-coin.win { box-shadow: 0 0 0 2px var(--ok); } .history-strip .mini-coin.lose { box-shadow: 0 0 0 2px var(--err); opacity: .75; } .kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 11px; font-family: var(--mono); color: var(--muted); } .milestone { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 3; padding: 8px 16px; border-radius: 999px; background: linear-gradient(180deg, #ffd865, var(--gold-2)); color: #1c1400; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 10px 30px -10px rgba(247, 201, 72, .7); animation: milestone 2.8s ease forwards; pointer-events: none; } @keyframes milestone { 0% { opacity: 0; transform: translate(-50%, -10px) scale(.9); } 12%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -6px); } } /* ------------------------------------------------------------------ éléments graphiques (refonte visuelle) */ /* Bouton soleil / lune du menu */ .theme-toggle { min-height: 0; width: 40px; height: 40px; padding: 0; border-radius: 12px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); box-shadow: none; flex: none; } .theme-toggle:hover { color: var(--gold-ink); background: var(--surface-3); box-shadow: none; transform: rotate(-12deg); } @media (max-width: 820px) { .theme-toggle { order: 2; } .nav-toggle { order: 3; } } .nav-links .nav-prefs { display: none; gap: 10px; padding: 10px 14px 0; } @media (max-width: 820px) { .nav-links .nav-prefs.mobile-only { display: none; } } @media (max-width: 480px) { .nav .theme-toggle { display: none; } .nav-links .nav-prefs.mobile-only { display: flex; } } /* Pastille d'icône */ .icon { display: block; flex: none; } .icon-chip { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-border); flex: none; } .icon-chip.silver { color: var(--silver); background: var(--silver-soft); border-color: var(--line-2); } .icon-chip.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; } .icon-chip.lg { width: 56px; height: 56px; border-radius: 18px; } [data-icon] { display: inline-grid; place-items: center; } /* En-tête de page décoré (halo doré et pastille d'icône) */ .page-head { position: relative; display: flex; gap: 18px; align-items: flex-start; padding: 8px 0 6px; } .page-head::before { content: ""; position: absolute; width: 360px; height: 360px; left: -120px; top: -180px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow-1), transparent 70%); filter: blur(10px); pointer-events: none; z-index: -1; } .page-head .icon-chip { margin-top: 4px; } @media (max-width: 640px) { .page-head { gap: 12px; } .page-head .icon-chip { width: 40px; height: 40px; } } /* Petites pièces qui flottent autour de la grande pièce de l'accueil */ .float-coin { position: absolute; width: var(--s, 44px); height: var(--s, 44px); filter: drop-shadow(0 8px 14px var(--coin-shadow)); animation: bob var(--d, 6s) ease-in-out infinite; animation-delay: var(--delay, 0s); pointer-events: none; } .float-coin svg { width: 100%; height: 100%; display: block; } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 12deg)); } } /* Bandeau défilant des derniers exploits */ .ticker { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); margin-top: 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker-track { display: flex; gap: 42px; width: max-content; padding: 14px 0; animation: ticker var(--ticker-s, 40s) linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 14px; color: var(--muted); } .ticker-item strong { color: var(--text); font-weight: 600; } .ticker-item .icon { color: var(--gold-ink); } @keyframes ticker { to { transform: translateX(-50%); } } /* Étapes reliées par un trait (« comment ça marche ») */ .flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; } .flow::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-border), var(--gold-border), transparent); z-index: 0; } .flow .card { position: relative; z-index: 1; text-align: center; padding-top: 26px; transition: transform .25s, box-shadow .25s, border-color .25s; } .flow .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-border); } .flow .icon-chip { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px; background: var(--surface); box-shadow: 0 0 0 6px var(--surface), 0 0 0 7px var(--gold-border); } .flow .step-n { position: absolute; top: 12px; right: 14px; font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--dim); } .flow p { color: var(--muted); font-size: 15px; margin: 6px 0 0; } @media (max-width: 900px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow::before { display: none; } } @media (max-width: 520px) { .flow { grid-template-columns: 1fr; } } /* Schéma du tirage équitable (4 temps, du scellement au résultat) */ .fair-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 22px; position: relative; } .fair-step { position: relative; text-align: center; padding: 0 8px; } .fair-step .dot { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--gold-border); color: var(--gold-ink); position: relative; z-index: 1; } .fair-step.final .dot { background: radial-gradient(circle at 35% 30%, #ffe89a, var(--gold) 50%, var(--gold-deep)); color: #5b3d05; border-color: transparent; } .fair-step:not(:last-child)::after { content: ""; position: absolute; top: 23px; left: calc(50% + 26px); right: calc(-50% + 26px); height: 2px; background: repeating-linear-gradient(90deg, var(--gold-border) 0 6px, transparent 6px 11px); } .fair-step .t { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--gold-ink); background: var(--gold-soft); padding: 2px 8px; border-radius: 999px; } .fair-step h4 { font-size: 14px; margin: 8px 0 4px; font-family: var(--display); font-weight: 700; } .fair-step p { font-size: 13px; color: var(--muted); margin: 0; } @media (max-width: 700px) { .fair-flow { grid-template-columns: 1fr; gap: 18px; } .fair-step { display: grid; grid-template-columns: 46px 1fr; gap: 4px 14px; text-align: left; align-items: start; } .fair-step .dot { grid-row: span 3; margin: 0; } .fair-step .t { margin: 0; justify-self: start; } .fair-step h4 { margin: 2px 0 0; } .fair-step:not(:last-child)::after { top: 50px; bottom: -18px; left: 22px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--gold-border) 0 6px, transparent 6px 11px); } } /* Chiffre clé avec icône */ .stat { position: relative; overflow: hidden; } .stat .stat-icon { position: absolute; right: 16px; top: 16px; color: var(--gold-ink); opacity: .9; } .stat::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, var(--gold-soft), transparent); pointer-events: none; } /* Podium des trois premiers */ .podium3 { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; margin: 8px 0 24px; } .podium3 .place { text-align: center; } .podium3 .who { display: grid; justify-items: center; gap: 6px; margin-bottom: 10px; } .podium3 .who .avatar { width: 54px; height: 54px; font-size: 20px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--c, var(--gold)); } .podium3 .place.p1 .who .avatar { width: 68px; height: 68px; font-size: 24px; } .podium3 .who strong { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .podium3 .who span { font-size: 13px; color: var(--muted); } .podium3 .block { border-radius: 14px 14px 6px 6px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 28px; color: rgba(0, 0, 0, .55); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); } .podium3 .p1 .block { height: 120px; background: linear-gradient(180deg, #ffe07a, #e0a92c); --c: #f2b92c; } .podium3 .p2 .block { height: 88px; background: linear-gradient(180deg, #eef2f9, #9fb0cc); } .podium3 .p3 .block { height: 64px; background: linear-gradient(180deg, #f3c296, #b8733c); } .podium3 .p2 { --c: #a9bbdc; } .podium3 .p3 { --c: #cf8a4f; } .podium3 .p1 .who::before { content: ""; width: 26px; height: 26px; background: currentColor; color: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18l-2-10-5 4-2-6-2 6-5-4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18l-2-10-5 4-2-6-2 6-5-4z'/%3E%3C/svg%3E") center/contain no-repeat; } /* Médailles de séries (entraînement) */ .medals { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; } .medal { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--dim); background: var(--inset); border: 2px dashed var(--line-2); transition: transform .3s; position: relative; } .medal.won { color: #4a3000; border: 0; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--gold) 48%, var(--gold-deep)); box-shadow: 0 6px 16px -6px rgba(247, 201, 72, .7); } .medal.won.silverish { color: #243049; background: radial-gradient(circle at 35% 30%, #fff, var(--silver-hi) 48%, #5f7090); } .medal.new { animation: medal-in .7s cubic-bezier(.2, .8, .2, 1); } @keyframes medal-in { 0% { transform: scale(.3) rotate(-30deg); } 60% { transform: scale(1.25) rotate(8deg); } } .progress { height: 8px; border-radius: 999px; background: var(--inset); border: 1px solid var(--line); overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width .5s cubic-bezier(.2, .8, .2, 1); } .progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin: 6px 0 0; } /* Arène : projecteur qui tourne derrière la pièce pendant le tirage, éclair de couleur au résultat */ .stage::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--glow-1) 0 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 72%); mask: radial-gradient(closest-side, #000 30%, transparent 72%); opacity: 0; transition: opacity .6s; pointer-events: none; } .arena.drawing .stage::before { opacity: 1; animation: rotate 12s linear infinite; } .arena::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; } .arena.flash-ok::after { background: radial-gradient(60% 50% at 50% 40%, rgba(52, 211, 153, .28), transparent 70%); animation: flash 1.6s ease-out; } .arena.flash-out::after { background: radial-gradient(60% 50% at 50% 40%, rgba(248, 113, 113, .24), transparent 70%); animation: flash 1.6s ease-out; } @keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } } .hud .label { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; } .hud .label .icon { width: 12px; height: 12px; } /* Choix du thème (paramètres du compte) */ .theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .theme-option { position: relative; display: block; cursor: pointer; border-radius: 16px; border: 2px solid var(--line-2); background: var(--surface-2); padding: 10px; transition: border-color .2s, transform .2s; margin: 0; color: var(--text); font-weight: 600; font-size: 14px; } .theme-option:hover { transform: translateY(-2px); } .theme-option input { position: absolute; opacity: 0; pointer-events: none; } .theme-option:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); } .theme-option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; } .theme-preview { height: 74px; border-radius: 10px; margin-bottom: 10px; position: relative; overflow: hidden; border: 1px solid var(--line); } .theme-preview.dark { background: linear-gradient(160deg, #11141c, #07080c); } .theme-preview.light { background: linear-gradient(160deg, #ffffff, #efece4); } .theme-preview.system { background: linear-gradient(115deg, #11141c 50%, #f5f3ee 50%); } .theme-preview::before { content: ""; position: absolute; left: 12px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe89a, #f7c948 50%, #8f6212); box-shadow: 0 4px 10px rgba(0, 0, 0, .3); } .theme-preview::after { content: ""; position: absolute; left: 46px; right: 14px; top: 18px; height: 6px; border-radius: 3px; background: currentColor; opacity: .25; box-shadow: 0 14px 0 currentColor; } .theme-preview.dark::after { color: #f3f4f7; } .theme-preview.light::after { color: #15171d; } .theme-preview.system::after { color: #9aa1b3; } .theme-option .check { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1c1400; opacity: 0; transform: scale(.6); transition: .2s; } .theme-option:has(input:checked) .check { opacity: 1; transform: none; } @media (max-width: 520px) { .theme-options { grid-template-columns: 1fr; } .theme-preview { height: 56px; } } /* Carte de profil (compte) */ .profile-head { display: flex; align-items: center; gap: 16px; } .profile-head .avatar { width: 64px; height: 64px; font-size: 24px; box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--gold-border); } /* Survol plus vivant des cartes cliquables */ .card-link { position: relative; overflow: hidden; } .card-link::after { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 120px at var(--mx, 50%) 0%, var(--gold-soft), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; } .card-link:hover::after { opacity: 1; } .prize-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--gold-ink); } .prize-chip .mini { width: 20px; height: 20px; } .prize-chip .mini svg { width: 100%; height: 100%; display: block; } /* Pied de page en colonnes */ .footer .container { align-items: flex-start; } .footer .cols { display: flex; flex-wrap: wrap; gap: 28px 56px; } .footer .cols h4 { font-family: var(--display); font-size: 13px; color: var(--text); margin: 0 0 10px; font-weight: 700; } .footer .cols nav { display: grid; gap: 8px; } .footer .legal { width: 100%; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 18px; font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; } /* Petits écrans : les boutons Pile / Face restent collés en bas de l'écran, toujours à portée de pouce. */ @media (max-width: 960px) { .picks.sticky { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 6; margin: 10px -10px 6px; padding: 8px; border-radius: 24px; background: var(--sticky-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow); } .picks.sticky button.pick { padding: 12px 8px 10px; gap: 6px; font-size: 17px; } .picks.sticky .pick-coin { width: 44px; height: 44px; } .streak-hero .n { font-size: 52px; } } @media (hover: none) { .pick-sub:has(.kbd) { display: none; } } /* Écrans tactiles : zones de tap d'au moins 44 px. */ @media (pointer: coarse) { .btn-sm, .tabs button, .tabs-sm button { min-height: 44px; } button.link { min-height: 44px; padding: 0 4px; } } /* « Réduire les animations » (réglage du système) : plus aucun mouvement décoratif. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .hero-coin .ring, .skeleton { animation: none !important; } } /* ------------------------------------------------------------------ mode fantôme, rediffusion, partage */ .picks.ghost button.pick { border-style: dashed; background: transparent; } .picks.ghost button.pick .pick-coin { opacity: .75; filter: saturate(.6); } .picks.ghost button.pick.confirmed { border-color: var(--silver); background: var(--silver-soft); border-style: solid; } .picks.ghost button.pick.confirmed .pick-sub { color: var(--silver); } .pick-status.ghost { color: var(--silver); } .replay { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: center; } .replay-stage { height: 190px; display: grid; place-items: center; } .replay-round { font-size: 24px; margin: 4px 0 2px; } .replay-result { margin: 0 0 10px; min-height: 1.5em; } .replay .big-number { font-size: 36px; } @media (max-width: 520px) { .replay { grid-template-columns: 1fr; text-align: center; } .replay .btn-row { justify-content: center; } } .share-dialog { width: min(640px, calc(100vw - 32px)); border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface); color: var(--text); padding: 20px; box-shadow: var(--shadow); } .share-dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); } .share-dialog img { display: block; width: 100%; border-radius: 12px; margin-top: 12px; border: 1px solid var(--line); } /* ------------------------------------------------------------------ profil public */ .player-link { color: inherit; text-decoration: none; } .player-link:hover { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; } .badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; } .badge { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--inset); border: 1px dashed var(--line-2); color: var(--dim); } .badge strong { color: var(--muted); font-size: 14px; } .badge .sub { font-size: 12px; color: var(--dim); } .badge-icon { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--dim); } .badge.earned { background: var(--surface); border: 1px solid var(--gold-border); color: var(--text); box-shadow: 0 10px 24px -18px rgba(247, 201, 72, .7); } .badge.earned strong { color: var(--text); } .badge.earned .sub { color: var(--muted); } .badge.earned .badge-icon { color: #4a3000; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--gold) 48%, var(--gold-deep)); } .profile-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; } .profile-grid td .sub { font-size: 12px; color: var(--dim); font-weight: 400; } .profile-grid .pill svg { width: 14px; height: 14px; } @media (max-width: 900px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } } .period-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .stat:has(.stat-icon) .label { padding-right: 30px; } @media (max-width: 480px) { .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .badge { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; } } /* « Commentary » : petite phrase statistique, sous le bandeau du haut de l'arène */ .commentary { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 10px 14px; min-height: 58px; border-radius: 14px; background: var(--gold-soft); border: 1px solid var(--gold-border); text-align: left; } .commentary.empty { visibility: hidden; } .commentary-tag { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); max-width: 72px; line-height: 1.25; } .commentary-tag .icon { width: 14px; height: 14px; flex: none; } .commentary p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); animation: odds-in .5s cubic-bezier(.2, .8, .2, 1); } @media (max-width: 420px) { .commentary { gap: 10px; padding: 9px 12px; } .commentary-tag { max-width: 56px; font-size: 9px; } .commentary p { font-size: 13px; } } /* Audit 27/09 : onglets de période qui passent à la ligne sur téléphone, bandeau défilant accessible */ .tabs-wrap { display: flex; flex-wrap: wrap; max-width: 100%; border-radius: 18px; } .ticker-copy { display: contents; } .ticker:focus-within .ticker-track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .ticker-track { animation: none !important; transform: none !important; } .ticker-copy { display: none; } }