/* ==========================================================================
   LOGE, page d'accueil (version 2)
   S'ajoute à site.css. Tous les visuels reprennent les composants réels de
   l'application (cartes de match, carte club, chat de loge, terrain LOGE XI,
   Loge Mercato, IA Foot, Arena, Premium), dessinés en HTML et en SVG.
   Polices : Outfit pour le texte et les titres, Bebas Neue pour les grands
   titres sportifs et les chiffres, exactement comme dans l'app.
   ========================================================================== */

.home {
  --night: #0c0d10; --night-2: #15161b; --night-3: #1d1f26;
  --night-ink: #f5f2ec; --night-mut: #a3a1ab; --night-line: rgba(255,255,255,.09); --night-line-2: rgba(255,255,255,.17);
  --coral: #e86848; --coral-2: #ff8a6c; --gold: #e8d060; --win: #7db55a; --draw: #d9ae2b; --loss: #e5533d;
  --xi: #88b870;
  --app-bg: #f5f2ec; --app-card: #ffffff; --app-sunk: #ece8df; --app-ink: #14181c; --app-mut: #7d7668; --app-line: rgba(20,24,28,.10);
  --edge: #14181c;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --f-ui: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-num: "Bebas Neue", Impact, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home { --edge: rgba(255,255,255,.28); } }
:root[data-theme="dark"] .home { --edge: rgba(255,255,255,.28); }
.home h1, .home h2, .home h3, .home h4 { font-family: var(--f-ui); letter-spacing: -.03em; }
.home [hidden] { display: none !important; }

/* --- En-tête ------------------------------------------------------------- */
.home .head { background: color-mix(in srgb, var(--night) 66%, transparent); color: var(--night-ink); border-bottom-color: transparent; }
.home .head.is-stuck { background: color-mix(in srgb, var(--night) 88%, transparent); border-bottom-color: var(--night-line); }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 44px; width: auto; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); transition: transform .4s var(--ease-spring); }
.brand:hover img { transform: rotate(-3deg) scale(1.04); }
.home .head__nav { gap: 20px; }
.home .head__nav a { color: var(--night-mut); position: relative; font-weight: 600; font-size: 14.5px; }
.home .head__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.home .head__nav a:hover, .home .head__nav a.is-here { color: var(--night-ink); }
.home .head__nav a:hover::after, .home .head__nav a.is-here::after { transform: scaleX(1); }
.home .lang { border-color: var(--night-line-2); }
.home .lang a { color: var(--night-mut); }
.home .lang a[aria-current="true"] { background: var(--night-ink); color: var(--night); }
@media (max-width: 1180px) { .home .head__nav { display: none; } .home .head__nav + .head__actions { margin-left: auto; } }
/* Huit liens et Résultats à gauche du logo : menu de l'accueil resserré pour tenir sur 1 080 px */
@media (min-width: 1181px) { .home .head__nav { gap: 10px; } .home .head__nav a { font-size: 14px; } }
@media (max-width: 420px) { .brand img { height: 30px; } .home .head .btn--sm { padding: 9px 14px; font-size: 14px; } }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--coral), var(--gold)); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* --- Boutons -------------------------------------------------------------- */
.home .btn { font-family: var(--f-ui); font-weight: 700; }
.btn--glow { --btn-bg: var(--coral); --btn-fg: #fff; position: relative; isolation: isolate; box-shadow: 0 12px 32px -10px rgba(232,104,72,.75); }
.btn--glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: linear-gradient(110deg, var(--coral) 20%, #ff9a7a 45%, var(--coral) 70%); background-size: 250% 100%; animation: sheen 5s linear infinite; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.btn .arr { transition: transform .3s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

/* ==========================================================================
   Haut de page
   ========================================================================== */
.hx { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--night-ink); margin-top: -68px; padding: calc(68px + clamp(36px, 6vw, 70px)) 0 clamp(70px, 9vw, 120px); }
.hx__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.glow--a { width: 760px; height: 760px; left: -260px; top: -280px; background: radial-gradient(circle, rgba(232,104,72,.55), transparent 65%); animation: drift 14s ease-in-out infinite alternate; }
.glow--b { width: 640px; height: 640px; right: -220px; top: -140px; background: radial-gradient(circle, rgba(120,160,255,.22), transparent 65%); animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.08); } }
.beam { position: absolute; top: -40%; width: 190px; height: 160%; background: linear-gradient(180deg, rgba(255,255,255,.11), transparent 70%); filter: blur(14px); transform-origin: top center; }
.beam--l { left: 16%; transform: rotate(24deg); animation: beam 9s ease-in-out infinite alternate; }
.beam--r { right: 12%; transform: rotate(-26deg); animation: beam 11s ease-in-out infinite alternate-reverse; }
@keyframes beam { from { opacity: .22; } to { opacity: .6; } }
.pitchbg { position: absolute; left: 50%; bottom: -12%; width: min(1500px, 150%); transform: translateX(-50%) perspective(900px) rotateX(64deg); transform-origin: bottom center; opacity: .5; -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 92%); mask-image: linear-gradient(0deg, #000 30%, transparent 92%); }
.pitchbg .ln { fill: none; stroke: rgba(255,255,255,.34); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease-out) forwards; }
.pitchbg .ln:nth-child(n+3) { animation-delay: .25s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.grain { position: absolute; inset: -50%; pointer-events: none; opacity: .07; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(4) infinite; }
@keyframes grain { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-4%,3%); } 50% { transform: translate(3%,-2%); } 75% { transform: translate(-2%,-4%); } }

.hx__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.pill-live { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 11px; margin-bottom: 22px; border: 1px solid var(--night-line-2); border-radius: 999px; background: rgba(255,255,255,.05); font-size: 14px; font-weight: 600; color: #e2ded7; }
.pill-live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.pill-live i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--coral); animation: ping 2s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.home .hx__title { font-family: var(--f-num); font-weight: 400; font-size: clamp(4.2rem, 8.6vw, 8rem); line-height: .86; letter-spacing: .005em; margin: 0 0 .22em; color: var(--night-ink); }
.hx__title .l { display: block; overflow: hidden; padding: .04em .1em .02em 0; margin-right: -.1em; }
.hx__title .l > span { display: inline-block; }
.hx__title em { font-style: normal; color: var(--coral); position: relative; }
.hx__title em::after { content: ""; position: absolute; left: .04em; right: .18em; bottom: .02em; height: .07em; border-radius: 99px; background: var(--coral); transform: scaleX(0); transform-origin: left; animation: under 1s var(--ease-out) 1.1s forwards; }
@keyframes under { to { transform: scaleX(1); } }
.js-anim .hx__title .l > span { transform: translateY(105%); animation: rise 1s var(--ease-out) forwards; }
.js-anim .hx__title .l:nth-child(2) > span { animation-delay: .12s; }
@keyframes rise { to { transform: none; } }
.hx__lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.6; color: #cfcbc4; max-width: 46ch; margin: 0; }
.hx__lead b { color: var(--night-ink); font-weight: 700; }
.js-anim .up { opacity: 0; transform: translateY(18px); animation: up .9s var(--ease-out) forwards; }
.js-anim .up.d1 { animation-delay: .35s; } .js-anim .up.d2 { animation-delay: .5s; } .js-anim .up.d3 { animation-delay: .65s; }
@keyframes up { to { opacity: 1; transform: none; } }
.signup--dark input[type="email"] { background: rgba(255,255,255,.07); border-color: var(--night-line-2); color: var(--night-ink); }
.signup--dark input[type="email"]::placeholder { color: rgba(255,255,255,.45); }
.signup--dark input[type="email"]:focus { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(232,104,72,.22); }
.signup--dark .signup__msg[data-state="ok"] { color: #8fe2b4; }
.signup--dark .signup__msg[data-state="err"] { color: #ffb3a4; }
.trustline { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14.5px; font-weight: 500; color: var(--night-mut); }
.trustline li { display: inline-flex; align-items: center; gap: 8px; }
.trustline li::before { content: ""; width: 17px; height: 17px; border-radius: 50%; background: rgba(125,181,90,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237db55a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat; }
.hx__art { position: relative; display: grid; place-items: center; }
.stage { position: relative; transition: transform .6s var(--ease-out); }
.stage__halo { position: absolute; inset: 6% -20% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(232,104,72,.45), transparent); filter: blur(34px); }
.float { position: absolute; z-index: 7; transform: translate3d(var(--mx, 0), var(--my, 0), 0); transition: transform .5s var(--ease-out); }
.float > * { animation: bob 6s ease-in-out infinite; }
.float--a { left: -24%; top: 13%; } .float--b { right: -21%; top: 46%; } .float--b > * { animation-delay: -2s; }
.float--c { left: -15%; bottom: 10%; } .float--c > * { animation-delay: -4s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hx__scroll { position: absolute; left: 50%; bottom: 24px; z-index: 2; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--night-mut); text-decoration: none; }
.hx__scroll i { width: 22px; height: 34px; border: 1.5px solid var(--night-line-2); border-radius: 12px; position: relative; }
.hx__scroll i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--night-ink); animation: wheel 1.8s var(--ease-out) infinite; }
@keyframes wheel { from { transform: translateY(0); opacity: 1; } to { transform: translateY(12px); opacity: 0; } }
@media (max-width: 960px) {
  .hx__grid { grid-template-columns: minmax(0, 1fr); }
  .hx__art { margin-top: 26px; }
  .hx__scroll { display: none; }
  .float--a { left: -5%; top: 7%; } .float--b { right: -5%; } .float--c { left: -3%; }
}
@media (max-width: 520px) { .float { --s: .84; } .float > * { zoom: .84; } }

/* ==========================================================================
   Téléphone et écrans de l'app (fidèles aux composants réels)
   ========================================================================== */
.phone { position: relative; width: min(340px, 84vw); aspect-ratio: 340 / 700; border-radius: 54px; padding: 11px; background: linear-gradient(145deg, #2d2e34, #0b0c0f); box-shadow: 0 50px 110px -30px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.4); }
.phone::after { content: ""; position: absolute; right: -2.5px; top: 22%; width: 3px; height: 13%; border-radius: 2px; background: #1a1b20; }
.screen { position: relative; height: 100%; border-radius: 44px; overflow: hidden; background: var(--app-bg); color: var(--app-ink); font-family: var(--f-ui); display: flex; flex-direction: column; }
.island { position: absolute; top: 10px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #000; z-index: 6; }
.sbar { height: 46px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0 30px; font-size: 13.5px; font-weight: 700; position: relative; z-index: 5; }
.sbar i { width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid currentColor; position: relative; }
.sbar i::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 1px; background: currentColor; }
.sbar--light { color: #fff; }

/* Accueil de l'app */
.ah { display: flex; align-items: center; gap: 8px; padding: 2px 13px 9px; border-bottom: 1px solid var(--app-line); flex: none; }
.ah img { height: 22px; width: auto; }
.ah__hi { line-height: 1.12; min-width: 0; }
.ah__hi b { display: block; font-size: 12.5px; white-space: nowrap; }
.ah__hi small { font-size: 10px; color: var(--app-mut); }
.coinpill { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 5px; border-radius: 99px; background: #f6e9d9; border: 1px solid #ecd4b6; font-weight: 800; font-size: 11.5px; flex: none; }
.coinpill svg { width: 15px; height: 15px; }
.avatar-a { width: 26px; height: 26px; border-radius: 50%; border: 1.8px solid var(--coral); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.asec { display: flex; align-items: center; gap: 7px; padding: 10px 14px 6px; flex: none; }
.asec::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--coral); }
.asec b { font-size: 16px; letter-spacing: -.02em; }
.asec span { color: var(--coral); font-weight: 800; font-size: 12px; }
.asec em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--app-line); }
.carousel { position: relative; height: 334px; flex: none; }
.ccard { position: absolute; left: 50%; top: 2px; width: 248px; margin-left: -124px; border-radius: 26px; border: 2.25px solid var(--edge); overflow: hidden; background: linear-gradient(170deg, var(--t1, #fde7ea), var(--t2, #f3e3ec)); transition: transform .8s var(--ease-out), opacity .8s var(--ease-out); padding: 0 10px 10px; }
.ccard::before { content: ""; display: block; height: 6px; margin: 0 -10px 10px; background: linear-gradient(90deg, var(--k1) 0 50%, var(--k2) 50% 100%); }
.ccard.is-l { transform: translateX(-76%) scale(.86); opacity: .5; z-index: 1; }
.ccard.is-r { transform: translateX(76%) scale(.86); opacity: .5; z-index: 1; }
.ccard.is-c { z-index: 2; }
.ccard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ccard__ring { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 3px var(--k1); flex: none; }
.ccard__ring svg { width: 32px; height: auto; }
.ccard__name { font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.ccard__lg { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--app-mut); margin-top: 4px; }
.tiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 7px; }
.tiles3 div { border-radius: 11px; background: rgba(20,24,28,.05); text-align: center; padding: 5px 0 4px; }
.tiles3 b { display: block; font: 400 20px/1 var(--f-num); }
.tiles3 small { font-size: 8px; font-weight: 700; letter-spacing: .08em; color: var(--app-mut); text-transform: uppercase; }
.tiles3 .pos b { color: #3f8f3a; }
.wdl { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; margin-bottom: 4px; }
.wdl span:first-child { color: #3f8f3a; } .wdl em { font-style: normal; color: #3f8f3a; }
.wdlbar { display: flex; gap: 2px; height: 5px; margin-bottom: 7px; }
.wdlbar i { border-radius: 9px; background: var(--win); } .wdlbar i.n { background: var(--draw); } .wdlbar i.d { background: var(--loss); }
.forme { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--app-mut); }
.forme > span { margin-right: 4px; }
.fp { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 800; background: var(--win); }
.fp.n { background: var(--draw); } .fp.d { background: var(--loss); }
.nm { border-radius: 13px; border: 2px solid var(--k1); padding: 6px 9px; margin-bottom: 6px; background: rgba(255,255,255,.35); }
.nm--last { border-color: var(--win); }
.nm small { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: var(--app-mut); text-transform: uppercase; }
.nm div { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; margin-top: 3px; }
.nm div svg.bdg { width: 18px; height: auto; }
.nm .t { margin-left: auto; font-size: 10.5px; font-weight: 700; }
.nm .s { font: 400 15px/1 var(--f-num); }
.vtag { font-size: 9px; font-weight: 800; color: #fff; background: var(--win); border-radius: 5px; padding: 1px 5px; }
.dots { display: flex; justify-content: center; gap: 4px; }
.dots i { width: 8px; height: 3px; border-radius: 3px; background: rgba(20,24,28,.15); }
.dots i.on { width: 22px; background: var(--k1, var(--coral)); }
.seg { display: flex; margin: 6px 12px 8px; padding: 3px; border-radius: 99px; background: var(--app-sunk); flex: none; }
.seg span { flex: 1; text-align: center; font-size: 11.5px; font-weight: 700; padding: 7px 0; border-radius: 99px; color: var(--app-mut); display: inline-flex; justify-content: center; align-items: center; gap: 5px; }
.seg span.on { background: var(--app-ink); color: #fff; }
.seg span i { font-style: normal; font-size: 9.5px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--coral); color: #fff; }
.seg span:not(.on) i { background: rgba(20,24,28,.12); color: var(--app-mut); }
.mcards { display: flex; gap: 8px; padding: 0 12px; flex: none; }
/* Carte de match (Mes matchs) */
.mc { flex: none; width: 200px; border-radius: 18px; border: 2.25px solid var(--edge); padding: 9px 11px; background: linear-gradient(135deg, var(--g1, #ecd6e4), var(--g2, #c9d9ec)); display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 4px; align-items: center; }
.mc__lg { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--app-mut); font-weight: 500; }
.mc__t { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.mc__t svg.bdg { width: 20px; height: auto; flex: none; }
.mc__time { grid-row: 2 / span 2; grid-column: 2; text-align: right; border-left: 1px solid rgba(20,24,28,.12); padding-left: 9px; }
.mc__time small { display: block; font-size: 9.5px; color: var(--app-mut); font-weight: 600; }
.mc__time b { font: 400 20px/1 var(--f-num); }
.mc__time.live b, .mc__time.live small { color: var(--coral); }
/* Barre de navigation de l'app */
.anav { position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 7px; }
.anav__pill { flex: 1; display: flex; justify-content: space-around; align-items: center; height: 50px; border-radius: 99px; background: rgba(252,250,246,.92); border: 1px solid rgba(20,24,28,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 24px -10px rgba(0,0,0,.3); }
.anav__pill span { width: 40px; height: 34px; border-radius: 99px; display: grid; place-items: center; color: var(--app-ink); }
.anav__pill span.on { background: #f8d3c8; color: var(--coral); }
.anav__pill svg { width: 19px; height: 19px; }
.anav__me { width: 50px; height: 50px; border-radius: 50%; background: rgba(252,250,246,.92); border: 1px solid rgba(20,24,28,.10); display: grid; place-items: center; font: 400 22px/1 var(--f-num); color: var(--coral); }

/* Notifications flottantes */
.notif { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; min-width: 214px; padding: 10px 14px 10px 10px; border-radius: 20px; background: rgba(28,29,35,.8); border: 1px solid var(--night-line-2); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 20px 44px -14px rgba(0,0,0,.65); color: var(--night-ink); font-size: 13px; line-height: 1.3; }
.notif__ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #fff; }
.notif__ico svg.bdg { width: 24px; height: auto; }
.notif b { display: block; font-size: 13.5px; }
.notif small { color: var(--night-mut); font-size: 11.5px; }
.notif__k { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-2); display: flex; align-items: center; gap: 6px; }
.notif__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.notif__pts { font: 400 30px/1 var(--f-num); color: var(--gold); padding-left: 6px; }
.notif--pts { grid-template-columns: 1fr auto; padding-left: 14px; }
.notif--chat .av { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 200deg, #48b4c8, #8b5cf6, #d8559a, #48b4c8); box-shadow: 0 0 0 2px rgba(255,255,255,.14); }

/* ==========================================================================
   Bandeau des compétitions
   ========================================================================== */
.tk { position: relative; overflow: hidden; background: var(--night); color: var(--night-ink); padding: 6px 0 34px; border-bottom: 1px solid var(--night-line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tk__row { display: flex; width: max-content; animation: slide 48s linear infinite; }
.tk__row--rev { animation-direction: reverse; animation-duration: 58s; margin-top: 2px; }
.tk:hover .tk__row { animation-play-state: paused; }
.tk__row span { display: inline-flex; align-items: center; gap: 30px; padding-right: 30px; font: 400 clamp(2rem, 4.4vw, 3.4rem)/1.1 var(--f-num); letter-spacing: .02em; white-space: nowrap; }
.tk__row span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.tk__row--rev span { color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.38); }
.tk__row--rev span::after { background: transparent; border: 1.5px solid rgba(255,255,255,.38); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   Manifeste
   ========================================================================== */
.mf { padding: clamp(80px, 12vw, 160px) 0; }
.mf__text { font: 800 clamp(1.75rem, 4.2vw, 3.4rem)/1.14 var(--f-ui); letter-spacing: -.035em; margin: 0; max-width: 23ch; }
.mf__text .w { color: color-mix(in srgb, var(--ink) 16%, transparent); transition: color .35s ease; }
.mf__text .w.on { color: var(--ink); } .mf__text .w.hot.on { color: var(--accent); }
.no-anim .mf__text .w { color: var(--ink); } .no-anim .mf__text .w.hot { color: var(--accent); }
.mf__sign { display: flex; align-items: center; gap: 14px; margin-top: 40px; color: var(--muted); font-size: 16px; font-weight: 500; }
.mf__sign::before { content: ""; width: 44px; height: 2px; border-radius: 2px; background: var(--accent); }

/* ==========================================================================
   Titres de section
   ========================================================================== */
.home .kicker { font-family: var(--f-ui); font-weight: 800; letter-spacing: .16em; }
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(30px, 4vw, 52px); flex-wrap: wrap; }
.sh h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 800; line-height: 1.04; margin: 0; max-width: 18ch; }
.sh p { max-width: 44ch; color: var(--ink-2); margin: 0; font-size: 17px; }
.sh--c { flex-direction: column; align-items: center; text-align: center; }
.sh--c h2 { max-width: 22ch; }

/* ==========================================================================
   Grille « tout le match »
   ========================================================================== */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tile { grid-column: span 2; position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow-sm); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile--4 { grid-column: span 4; } .tile--3 { grid-column: span 3; }
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(232,104,72,.08), transparent 60%); }
.tile:hover::after { opacity: 1; }
.tile__demo { position: relative; flex: 1; min-height: 240px; display: grid; place-items: center; padding: 26px 22px 10px; }
.tile__txt { padding: 6px 28px 28px; }
.tile__k { display: block; font: 800 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.tile h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 800; margin: 0 0 .35em; }
.tile p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile, .tile--3 { grid-column: span 1; } .tile--4 { grid-column: span 2; } }
@media (max-width: 640px) { .grid { grid-template-columns: minmax(0, 1fr); } .tile, .tile--3, .tile--4 { grid-column: span 1; } .tile__txt { padding: 4px 22px 24px; } .tile__demo { padding: 22px 14px 6px; min-height: 0; } }

/* Composants de l'app (toujours dans les couleurs claires de l'app) */
.appui { font-family: var(--f-ui); color: var(--app-ink); }
.live { width: 100%; max-width: 560px; display: grid; gap: 12px; }
.live__mc { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; border-radius: 22px; border: 2.5px solid var(--edge); padding: 14px 16px; background: linear-gradient(135deg, #f6dfe2, #d8e2f2); }
.live__team { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; min-width: 0; }
.live__team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live__team svg.bdg { width: 34px; height: auto; flex: none; }
.live__team--r { flex-direction: row-reverse; text-align: right; }
.live__sc { display: grid; justify-items: center; gap: 4px; }
.live__sc > b { font: 400 44px/1 var(--f-num); display: flex; gap: 8px; align-items: center; }
.live__sc > b i { font-style: normal; color: var(--app-mut); font-size: 28px; }
.live__sc > b span { display: inline-block; min-width: .55em; text-align: center; }
.live__sc > b span.pop { animation: pop .7s var(--ease-spring); color: var(--coral); }
@keyframes pop { 40% { transform: scale(1.5); } }
.minute { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--coral); padding: 4px 9px; border-radius: 99px; }
.minute::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tl li { display: grid; grid-template-columns: 38px 24px 1fr; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; background: var(--app-card); border: 1px solid var(--app-line); font-size: 14px; color: #3a3f45; }
.tl li > b { font: 400 18px/1 var(--f-num); color: var(--app-ink); }
.tl li svg { width: 20px; height: 20px; }
.tl li strong { color: var(--app-ink); font-weight: 700; }
.js-anim .tl li { opacity: 0; transform: translateX(-12px); }
.tl li.in { animation: slideIn .55s var(--ease-out) forwards; }
@keyframes slideIn { to { opacity: 1; transform: none; } }
/* Statistiques */
.stats { width: 100%; max-width: 330px; display: grid; gap: 11px; }
.stats__h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--app-mut); text-transform: uppercase; }
.stats__h span { display: flex; align-items: center; gap: 6px; }
.stats__h svg.bdg { width: 18px; height: auto; }
.srow { display: grid; gap: 4px; }
.srow__t { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.srow__t b { font: 400 18px/1 var(--f-num); }
.srow__t span { color: var(--app-mut); }
.srow__bar { display: flex; gap: 4px; height: 8px; }
.srow__bar i { display: block; height: 100%; border-radius: 99px; width: 50%; background: #c8102e; transition: width 1.4s var(--ease-out); }
.srow__bar i + i { background: #0b3d91; }
.is-play .srow__bar i { width: var(--w); }
/* Pronos */
.pr0 { width: 100%; max-width: 310px; display: grid; gap: 12px; }
.pr0__pick { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 14px; border-radius: 22px; background: var(--app-card); border: 2.5px solid var(--edge); }
.pr0__side { display: grid; justify-items: center; gap: 8px; }
.pr0__side svg.bdg { width: 32px; height: auto; }
.stp { display: flex; align-items: center; gap: 8px; }
.stp i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--app-sunk); color: var(--app-mut); font-size: 14px; }
.stp b { font: 400 40px/1 var(--f-num); min-width: 22px; text-align: center; }
.pr0__dash { font: 400 26px/1 var(--f-num); color: var(--app-mut); }
.scorers { display: flex; gap: 6px; flex-wrap: wrap; }
.scorer { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 5px; border-radius: 99px; background: var(--app-card); border: 1.5px solid var(--app-line); font-size: 12.5px; font-weight: 700; }
.scorer svg.jsy { width: 22px; height: auto; }
.scorer.on { border-color: var(--coral); background: #fde9e3; }
.comm { display: grid; gap: 7px; }
.comm p { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--app-mut); }
.comm__r { display: grid; grid-template-columns: 76px 1fr 36px; gap: 9px; align-items: center; font-size: 13px; font-weight: 600; }
.comm__r b { font: 400 17px/1 var(--f-num); text-align: right; }
.comm__r i { display: block; height: 8px; border-radius: 99px; background: var(--app-sunk); overflow: hidden; }
.comm__r i::after { content: ""; display: block; height: 100%; width: 0; border-radius: inherit; background: #c8102e; transition: width 1.4s var(--ease-out); }
.comm__r:nth-child(3) i::after { background: var(--draw); transition-delay: .15s; }
.comm__r:nth-child(4) i::after { background: #0b3d91; transition-delay: .3s; }
.is-play .comm__r i::after { width: var(--w); }
.bareme { display: flex; gap: 6px; flex-wrap: wrap; }
.bareme span { font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 9px; background: var(--app-sunk); }
.bareme span b { color: #3f8f3a; font-weight: 800; }
/* Classement */
.tbl { width: 100%; max-width: 340px; display: grid; gap: 5px; }
.tbl__h, .tbl__r { display: grid; grid-template-columns: 18px 22px minmax(0, 1fr) 26px 54px; gap: 8px; align-items: center; }
.tbl__h { padding: 0 11px 2px; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--app-mut); text-transform: uppercase; }
.tbl__h span:nth-child(n+4) { text-align: right; }
.tbl__r { padding: 8px 11px; border-radius: 13px; background: var(--app-card); border: 1px solid var(--app-line); font-size: 13.5px; font-weight: 700; }
.tbl__r > b { font: 400 17px/1 var(--f-num); color: var(--app-mut); }
.tbl__r svg.bdg { width: 22px; height: auto; }
.tbl__r strong { font: 400 18px/1 var(--f-num); text-align: right; }
.tbl__r .fpm { display: flex; gap: 2px; justify-content: flex-end; }
.tbl__r .fpm i { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 8px; font-weight: 800; color: #fff; background: var(--win); }
.tbl__r .fpm i.n { background: var(--draw); } .tbl__r .fpm i.d { background: var(--loss); }
.tbl__r.me { border: 2px solid var(--coral); background: #fff6f3; }
.tbl__r .nm2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Votes (couleur Arena) */
.vt { width: 100%; max-width: 320px; border-radius: 24px; padding: 16px; color: #fff; background: linear-gradient(150deg, #3aa6b9, #1f6f80); box-shadow: 0 20px 40px -20px rgba(31,111,128,.7); }
.vt__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.vt__h b { font: 400 24px/1 var(--f-num); letter-spacing: .02em; }
.vt__h small { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: rgba(255,255,255,.18); }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; }
.podium > div { display: grid; justify-items: center; gap: 4px; }
.podium svg.jsy { width: 52px; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.podium .p1 svg.jsy { width: 66px; }
.podium b { font-size: 12.5px; font-weight: 800; }
.podium em { font-style: normal; font: 400 20px/1 var(--f-num); }
.podium i { display: block; width: 100%; border-radius: 10px 10px 4px 4px; background: rgba(255,255,255,.2); transform-origin: bottom; transform: scaleY(.2); transition: transform 1.2s var(--ease-spring); }
.is-play .podium i { transform: none; }
.podium .p1 i { height: 54px; background: rgba(232,208,96,.9); } .podium .p2 i { height: 38px; } .podium .p3 i { height: 26px; }
/* Carte club dans la grille */
.clubtile { width: 100%; display: grid; place-items: center; }
.clubtile .ccard { position: relative; left: auto; top: auto; margin: 0; width: min(290px, 100%); }

/* ==========================================================================
   Chapitres
   ========================================================================== */
.ch { position: relative; padding: clamp(76px, 10vw, 140px) 0; overflow: hidden; }
.ch--tint { background: var(--bg-deep); }
.ch__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.ch--rev .ch__art { order: -1; }
.ch__num { display: block; font: 400 clamp(4.4rem, 8vw, 6.6rem)/.8 var(--f-num); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 70%, transparent); margin-bottom: 14px; }
.ch h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.05; margin-bottom: .4em; max-width: 19ch; }
.ch h2 em { font-style: normal; color: var(--accent); }
.ch__lead { font-size: clamp(1.05rem, 1.45vw, 1.2rem); color: var(--ink-2); max-width: 46ch; }
.feats { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.feats li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--line); }
.feats li svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.feats b { display: block; font-weight: 800; font-size: 16.5px; margin-bottom: 2px; }
.feats span { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.ch__art { position: relative; display: grid; justify-items: center; }
@media (max-width: 920px) { .ch__grid { grid-template-columns: minmax(0, 1fr); } .ch--rev .ch__art { order: 2; } }

/* Loges : cartes du hub */
.lc { position: absolute; z-index: 3; width: 214px; border-radius: 24px; overflow: hidden; color: #fff; box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); }
.lc__bg { position: absolute; inset: 0; }
.lc__in { position: relative; padding: 14px; min-height: 152px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, transparent 25%, rgba(0,0,0,.6)); }
.lc__ring { position: absolute; left: 12px; top: 12px; width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(255,255,255,.35); }
.lc__ring svg.bdg { width: 30px; height: auto; }
.lc__pills { display: flex; gap: 5px; margin-bottom: 6px; }
.lc__pills span { font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: rgba(12,13,16,.72); }
.lc__name { font: 400 30px/1 var(--f-num); letter-spacing: .01em; }
.lc__last { font-size: 11.5px; opacity: .88; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc--a { right: max(-40px, calc(50% - 350px)); top: 3%; transform: rotate(5deg); }
.lc--b { left: max(-40px, calc(50% - 350px)); bottom: 7%; transform: rotate(-6deg); }
.pat-stripes { background: repeating-linear-gradient(135deg, #2a7fbf 0 22px, #8fc6ea 22px 34px); }
.pat-check { background: conic-gradient(#c8102e 25%, #fff 0 50%, #c8102e 0 75%, #fff 0) 0 0 / 36px 36px; }
.pat-bars { background: repeating-linear-gradient(90deg, #12355b 0 16px, #d4473a 16px 22px); }
@media (max-width: 1100px) { .lc--b { display: none; } }
@media (max-width: 600px) { .lc--a { position: relative; right: auto; top: auto; width: min(300px, 86vw); transform: rotate(-2deg); margin: 0 auto -26px; z-index: 8; } .lc__in { min-height: 118px; } }

/* Loges : écran de chat */
.lgh { position: relative; height: 176px; flex: none; color: #fff; overflow: hidden; }
.lgh .pat-stripes { position: absolute; inset: 0; }
.lgh__fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.45)); }
.lgh__btns { position: absolute; top: 48px; left: 12px; right: 12px; display: flex; justify-content: space-between; }
.lgh__btns i { width: 30px; height: 30px; border-radius: 50%; background: rgba(12,13,16,.45); display: grid; place-items: center; }
.lgh__btns svg { width: 15px; height: 15px; }
.lgh__id { position: absolute; left: 14px; bottom: 12px; display: flex; align-items: center; gap: 11px; }
.lgh__ring { width: 54px; height: 54px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(255,255,255,.35); }
.lgh__ring svg.bdg { width: 34px; height: auto; }
.lgh__id b { display: block; font: 400 28px/1 var(--f-num); letter-spacing: .01em; }
.lgh__id small { font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.lgh__id small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--win); }
.ltabs { display: flex; gap: 14px; padding: 10px 14px 0; border-bottom: 1px solid var(--app-line); font-size: 12.5px; font-weight: 700; color: var(--app-mut); white-space: nowrap; overflow: hidden; flex: none; }
.ltabs span { padding-bottom: 8px; }
.ltabs span.on { color: var(--app-ink); box-shadow: inset 0 -3px 0 #2a8fd0; }
.lfeed { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 8px 12px 6px; overflow: hidden; }
.datepill { align-self: center; font: 400 12px/1 var(--f-num); letter-spacing: .14em; color: #fff; background: var(--app-ink); padding: 6px 12px 5px; border-radius: 99px; }
.sysmsg { align-self: center; font-size: 10.5px; color: var(--app-mut); text-align: center; }
.bub { max-width: 80%; display: grid; gap: 2px; }
.bub small { font-size: 10px; font-weight: 700; color: var(--app-mut); padding-left: 6px; }
.bub p { margin: 0; padding: 8px 12px; border-radius: 18px 18px 18px 6px; background: var(--app-card); border: 1px solid var(--app-line); font-size: 12.5px; line-height: 1.35; }
.bub--me { align-self: flex-end; }
.bub--me small { text-align: right; padding-right: 6px; }
.bub--me p { background: #2fa6e0; color: #fff; border-color: transparent; border-radius: 18px 18px 6px 18px; }
.bub .reac { display: flex; gap: 4px; margin-top: 2px; }
.bub .reac span { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: var(--app-card); border: 1px solid var(--app-line); }
.sharecard { max-width: 88%; border-radius: 16px; border: 2.5px solid var(--edge); background: linear-gradient(135deg, #f6dfe2, #d8e2f2); padding: 8px 10px; display: grid; gap: 4px; }
.sharecard small { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--app-mut); text-transform: uppercase; }
.sharecard div { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 800; font-size: 12.5px; }
.sharecard div span { display: flex; align-items: center; gap: 5px; }
.sharecard svg.bdg { width: 18px; height: auto; }
.sharecard b { font: 400 18px/1 var(--f-num); }
.voice p { display: flex; align-items: center; gap: 7px; }
.voice p svg { width: 13px; height: 13px; }
.voice .wave { display: flex; align-items: center; gap: 2px; height: 16px; }
.voice .wave i { width: 3px; height: 40%; border-radius: 3px; background: currentColor; opacity: .8; }
.voice .wave i:nth-child(2n) { height: 85%; } .voice .wave i:nth-child(3n) { height: 60%; }
.is-play .voice .wave i { animation: wave 1s ease-in-out infinite; }
.voice .wave i:nth-child(2n) { animation-delay: -.3s; } .voice .wave i:nth-child(3n) { animation-delay: -.6s; }
@keyframes wave { 50% { transform: scaleY(.4); } }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 9px 12px; border-radius: 16px; background: var(--app-card); border: 1px solid var(--app-line); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--app-mut); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.js-anim .lfeed > .seq { opacity: 0; transform: translateY(14px) scale(.98); }
.lfeed > .seq.in { animation: msgIn .55s var(--ease-out) forwards; }
@keyframes msgIn { to { opacity: 1; transform: none; } }
.quick { display: flex; gap: 6px; padding: 6px 12px; overflow: hidden; flex: none; }
.quick span { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 6px 11px; border-radius: 99px; background: var(--app-sunk); border: 1px solid var(--app-line); }
.quick span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--win)); }
.lin { display: flex; align-items: center; gap: 7px; padding: 4px 12px 20px; flex: none; }
.lin i { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--app-sunk); font-style: normal; font-weight: 800; }
.lin span { flex: 1; padding: 9px 12px; border-radius: 99px; background: var(--app-sunk); font-size: 12px; color: var(--app-mut); }
.lin i.cam { background: transparent; border: 1.8px solid var(--coral); color: var(--coral); }
.lin svg { width: 15px; height: 15px; }

/* LOGE XI */
.xiw { width: min(440px, 100%); display: grid; gap: 12px; }
.xih { position: relative; overflow: hidden; border-radius: 26px; padding: 16px 18px 18px; color: #fff; background: linear-gradient(120deg, #7aa866, #3b5a48 70%, #2a3a36); box-shadow: 0 24px 50px -24px rgba(30,60,40,.6); }
.xih__wm { position: absolute; right: -6px; top: -16px; font: 400 150px/1 var(--f-num); color: rgba(20,30,25,.28); }
.xih__chip { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; padding: 6px 12px 6px 6px; border-radius: 99px; background: rgba(12,20,16,.35); }
.xih__chip i { width: 20px; height: 20px; border-radius: 50%; background: #3b62d6; display: grid; place-items: center; }
.xih__chip svg { width: 13px; height: 13px; color: #fff; }
.home .xih h4 { position: relative; font: 400 46px/1 var(--f-num); letter-spacing: .01em; margin: 10px 0 4px; color: #fff; }
.xih p { position: relative; margin: 0; font-size: 13px; font-weight: 600; opacity: .9; }
.xip { position: relative; aspect-ratio: 440 / 470; border-radius: 26px; overflow: hidden; background: repeating-linear-gradient(180deg, #2f8a3e 0 40px, #2a7d37 40px 80px); box-shadow: 0 30px 60px -30px rgba(10,40,20,.7); }
.xip svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.xip svg.lines * { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 2; }
.pl { position: absolute; left: var(--x); top: var(--y); width: 92px; margin-left: -46px; display: grid; justify-items: center; gap: 2px; }
.pl svg.jsy { width: 58px; height: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.pl > b { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #fff; padding: 3px 8px; border-radius: 8px; background: #1b2420; border: 1px solid rgba(255,255,255,.12); white-space: nowrap; text-transform: uppercase; }
.pl em { position: absolute; top: -4px; right: 10px; font-style: normal; font: 400 14px/1 var(--f-num); color: #12301c; background: #c9f0b0; padding: 3px 6px; border-radius: 7px; box-shadow: 0 4px 8px rgba(0,0,0,.2); }
.js-anim .pl em { opacity: 0; transform: scale(.4); }
.pl--cap::before { content: "C"; position: absolute; z-index: 2; left: 14px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #3b2c00; font: 800 11px/20px var(--f-ui); text-align: center; box-shadow: 0 0 0 2px #2a7d37; }
.js-anim .pl { opacity: 0; transform: translateY(16px) scale(.6); }
.is-play .pl { animation: plIn .6s var(--ease-spring) forwards; animation-delay: calc(var(--i) * 90ms); }
.is-play .pl em { animation: ptsIn .5s var(--ease-spring) forwards; animation-delay: calc(1.4s + var(--i) * 110ms); }
@keyframes plIn { to { opacity: 1; transform: none; } }
@keyframes ptsIn { to { opacity: 1; transform: none; } }
.xib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xib div { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; padding: 10px 6px; }
.xib svg { width: 20px; height: 20px; color: var(--xi); margin: 0 auto 4px; display: block; }
.xib b { display: block; font-size: 13px; font-weight: 800; }
.xib small { font-size: 11px; color: var(--muted); }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role { border-radius: 18px; padding: 10px 12px; display: grid; grid-template-columns: 40px 1fr; gap: 4px 10px; align-items: center; }
.role svg.jsy { width: 40px; height: auto; grid-row: 1 / span 2; }
.role small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.role b { font-size: 14.5px; font-weight: 800; color: var(--app-ink); }
.role--cap { background: #faf3dc; border: 1.5px solid #e9d793; } .role--cap small { color: #8a6a00; }
.role--sub { background: #f5e4ef; border: 1.5px solid #e3a6c7; } .role--sub small { color: #c0457f; }
.budget { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; }
.budget div { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 800; margin-bottom: 7px; }
.budget div span:last-child { color: var(--coral); font-family: var(--f-num); font-weight: 400; font-size: 20px; }
.budget i { display: block; position: relative; height: 9px; border-radius: 99px; background: var(--app-sunk); }
.budget i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #f08a2c, #f3c443); transition: width 1.8s var(--ease-out) .3s; }
.is-play .budget i::after { width: 99%; }
@media (max-width: 520px) { .pl { width: 76px; margin-left: -38px; } .pl svg.jsy { width: 44px; } .pl > b { font-size: 8.5px; padding: 2px 5px; } .pl em { right: 4px; font-size: 12px; } .xib { grid-template-columns: repeat(2, 1fr); } .roles { grid-template-columns: 1fr; } }

/* Loge Mercato */
.mkw { width: min(430px, 100%); display: grid; gap: 12px; }
.mkh { position: relative; overflow: hidden; border-radius: 26px; padding: 16px 18px; color: #fff; background: linear-gradient(135deg, #2a8a66, #1a6a4f); }
.mkh::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.07); }
.mkh small { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .14em; opacity: .9; }
.mkh small i { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-style: normal; font-size: 12px; }
.home .mkh h4 { font: 400 38px/1 var(--f-num); letter-spacing: .01em; margin: 8px 0 10px; color: #fff; }
.mkh__chips { display: flex; gap: 6px; flex-wrap: wrap; position: relative; z-index: 1; }
.mkh__chips span { font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: rgba(8,30,22,.35); }
.mks { border-radius: 26px; padding: 16px 18px; color: #e9f5ef; background: linear-gradient(160deg, #173f32, #0e2b22); }
.mks__top { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; opacity: .8; }
.mks__bar { position: relative; height: 10px; border-radius: 99px; background: rgba(255,255,255,.1); margin: 10px 0 6px; }
.mks__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: #3cc58e; transition: width 1.6s var(--ease-out); }
.mks__bar i::after { content: ""; position: absolute; right: -9px; top: -5px; width: 20px; height: 20px; border-radius: 50%; background: #3cc58e; box-shadow: 0 0 0 3px #0e2b22; }
.is-play .mks__bar i { width: 22%; }
.mks__rank { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin: 14px 0; }
.medal { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #2c2205; font: 400 30px/1 var(--f-num); box-shadow: 0 0 0 3px rgba(245,242,236,.9); }
.mks__rank b { display: block; font-size: 18px; font-weight: 800; }
.mks__rank small { font-size: 12px; opacity: .75; }
.mks__pts { text-align: right; }
.mks__pts strong { display: block; font: 400 40px/1 var(--f-num); color: #3cc58e; }
.mks__pts span { font-size: 10px; font-weight: 800; letter-spacing: .12em; opacity: .7; }
.mks__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mks__tiles div { border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); text-align: center; padding: 9px 0 7px; }
.mks__tiles b { display: block; font: 400 24px/1 var(--f-num); }
.mks__tiles div:first-child b { color: #3cc58e; }
.mks__tiles small { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; opacity: .7; }
.auc { position: relative; border-radius: 24px; padding: 14px 16px; background: var(--surface); border: 2.5px solid var(--edge); box-shadow: var(--shadow-lg); }
.auc__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.auc__tag { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1f7a5a; display: inline-flex; gap: 7px; align-items: center; }
.auc__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.2s infinite; }
.ring { position: relative; width: 46px; height: 46px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .bg { stroke: var(--line); } .ring .fg { stroke: #1f7a5a; stroke-linecap: round; stroke-dasharray: 126; }
.is-play .ring .fg { animation: ringdown 2s linear infinite; }
@keyframes ringdown { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 126; } }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 15px/1 var(--f-num); }
.auc__pl { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; }
.auc__pl svg.jsy { width: 54px; height: auto; }
.auc__pl b { display: block; font-size: 16px; font-weight: 800; }
.auc__pl small { font-size: 12.5px; color: var(--muted); }
.auc__amt { text-align: right; }
.auc__amt small { display: block; font-size: 11px; color: var(--muted); }
.auc__amt strong { font: 400 40px/1 var(--f-num); display: inline-flex; align-items: baseline; gap: 3px; }
.auc__amt strong i { font-style: normal; font-size: 20px; color: #1f7a5a; }
.auc__amt strong.bump { animation: pop .6s var(--ease-spring); }
.bids { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line-strong); display: grid; gap: 6px; }
.bids li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; animation: msgIn .45s var(--ease-out) both; }
.bids li .av { width: 22px; height: 22px; border-radius: 50%; }
.bids li b { font: 400 17px/1 var(--f-num); }

/* ==========================================================================
   IA Foot
   ========================================================================== */
.ia { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--night-ink); padding: clamp(80px, 11vw, 150px) 0; }
.ia__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ia__bg::before, .ia__bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); }
.ia__bg::before { width: 640px; height: 640px; left: -160px; bottom: -280px; background: radial-gradient(circle, rgba(139,92,246,.5), transparent 65%); animation: drift 16s ease-in-out infinite alternate; }
.ia__bg::after { width: 560px; height: 560px; right: -180px; top: -200px; background: radial-gradient(circle, rgba(216,85,154,.42), transparent 65%); animation: drift 13s ease-in-out infinite alternate-reverse; }
.ia__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.ia h2 { color: var(--night-ink); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.05; }
.ia h2 em { font-style: normal; background: linear-gradient(100deg, #b49cff, #ff7ab8 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ia .ch__lead { color: #cfcbc4; }
.prem-tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px; padding: 6px 13px; border-radius: 99px; background: var(--gold); color: #2c2205; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.ia__list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ia__list li { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: 14.5px; font-weight: 600; color: #e7e3f6; }
.ia__list li svg { width: 18px; height: 18px; color: #c4a8ff; flex: none; }
.iaapp { background: #f6f1fb; }
.iah { flex: none; padding: 48px 14px 14px; border-radius: 0 0 26px 26px; color: #fff; background: linear-gradient(110deg, #8b5cf6, #d8559a); display: flex; align-items: center; gap: 10px; margin-top: -46px; }
.iah i { width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.22); display: grid; place-items: center; flex: none; }
.iah i svg { width: 18px; height: 18px; }
.iah b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.iah small { font-size: 11px; opacity: .9; }
.iafeed { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 14px 12px; overflow: hidden; }
.iaq { align-self: flex-end; max-width: 84%; padding: 9px 13px; border-radius: 16px 16px 5px 16px; color: #fff; font-size: 12.5px; font-weight: 700; background: linear-gradient(110deg, #8b5cf6, #d8559a); }
.iaa { align-self: flex-start; max-width: 92%; padding: 10px 12px; border-radius: 16px 16px 16px 5px; background: #fff; border: 1px solid #ead8f0; font-size: 12.5px; line-height: 1.45; color: #2a2433; }
.iaa p { margin: 0; }
.iaa .caret { display: inline-block; width: 2px; height: 1em; background: #8b5cf6; vertical-align: -2px; margin-left: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.iaa__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.iaa__facts div { border-radius: 10px; background: #f3ecfa; text-align: center; padding: 6px 2px; }
.iaa__facts b { display: block; font: 400 20px/1 var(--f-num); color: #6d3fd8; }
.iaa__facts small { font-size: 9.5px; color: #7a6f8a; }
.js-anim .iafeed .iaq, .js-anim .iafeed .iaa { opacity: 0; transform: translateY(10px); }
.iafeed .in { animation: msgIn .5s var(--ease-out) forwards; }
.iasug p { margin: 4px 0 6px; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #d8559a; }
.iasug div { display: flex; flex-wrap: wrap; gap: 5px; }
.iasug span { font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 99px; background: #fff; border: 1.5px solid #efc6dd; color: #1d1626; }
.iain { flex: none; display: flex; gap: 8px; align-items: center; padding: 8px 12px 22px; }
.iain span { flex: 1; padding: 10px 13px; border-radius: 99px; background: #fff; border: 1.5px solid #ddc9f2; font-size: 12px; color: #8f86a0; }
.iain i { width: 36px; height: 36px; border-radius: 50%; background: #e6dcf6; display: grid; place-items: center; color: #8b5cf6; }
.iain svg { width: 16px; height: 16px; }
@media (max-width: 920px) { .ia__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .ia__list { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Tout le reste (comme la section « Loge Arena » de l'accueil de l'app)
   ========================================================================== */
.arena { border-radius: 36px; padding: clamp(20px, 3vw, 34px); background: #1b1f26; color: #fff; position: relative; overflow: hidden; }
.arena::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 22px); pointer-events: none; }
.arena__h { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.arena__h small { font-size: 12px; font-weight: 800; letter-spacing: .26em; opacity: .7; }
.home .arena__h h2 { font: 400 clamp(2.6rem, 5vw, 4rem)/.9 var(--f-num); letter-spacing: .01em; color: #fff; margin: 6px 0 0; }
.arena__h p { margin: 0; max-width: 44ch; color: #c6c3cc; font-size: 15.5px; }
.agrid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.at { position: relative; overflow: hidden; border-radius: 22px; padding: 14px 14px 16px; min-height: 152px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(150deg, var(--a1), var(--a2)); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.at:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); }
.at .at__ico { position: absolute; left: 14px; top: 14px; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.at__ico svg { width: 20px; height: 20px; color: #fff; }
.at__deco { position: absolute; right: -16px; bottom: -16px; width: 92px; height: 92px; opacity: .16; color: #fff; }
.at b { position: relative; font: 400 24px/1 var(--f-num); letter-spacing: .02em; }
.at > span:not(.at__ico) { position: relative; font-size: 12.5px; opacity: .9; margin-top: 3px; line-height: 1.35; }
.at--wide { grid-column: span 2; }
.at.coral { --a1: #e3613f; --a2: #b2402c; } .at.green { --a1: #3c9a5c; --a2: #24653f; } .at.teal { --a1: #3aa6b9; --a2: #1f6f80; } .at.pink { --a1: #d0538f; --a2: #8f2b5e; }
.at.violet { --a1: #8b5cf6; --a2: #c35aa8; } .at.navy { --a1: #2f56b8; --a2: #182f6e; } .at.gold { --a1: #d9a82b; --a2: #9c6f12; } .at.slate { --a1: #4a5463; --a2: #2a313b; }
.chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 8px 13px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #e6e3ea; }
.chips span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
@media (max-width: 980px) { .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .at { min-height: 132px; } }

/* ==========================================================================
   Premium (comme la carte Premium de la boutique)
   ========================================================================== */
.prm { position: relative; isolation: isolate; overflow: hidden; background: #0f0d09; color: #f6efd9; padding: clamp(80px, 11vw, 150px) 0; }
.prm__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 60% at 80% 0%, rgba(232,208,96,.22), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(232,140,60,.16), transparent 60%); }
.prm__wm { position: absolute; right: -2%; bottom: -6%; font: 400 clamp(8rem, 22vw, 20rem)/1 var(--f-num); color: rgba(232,208,96,.05); letter-spacing: .02em; pointer-events: none; z-index: -1; }
.prm__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 70px); align-items: center; }
.prm h2 { color: #fff; font-size: clamp(2.1rem, 3.8vw, 3.2rem); font-weight: 800; line-height: 1.04; }
.prm h2 em { font-style: normal; background: linear-gradient(100deg, #fff1b8, #e8d060 40%, #c9952b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prm .ch__lead { color: #d6ceb8; }
.prm .kicker { color: var(--gold); }
.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.perk { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(232,208,96,.24); }
.perk i { width: 36px; height: 36px; border-radius: 11px; background: rgba(232,208,96,.16); display: grid; place-items: center; margin-bottom: 8px; color: var(--gold); }
.perk i svg { width: 19px; height: 19px; }
.perk b { display: block; font-size: 15.5px; font-weight: 800; color: #fff; }
.perk span { font-size: 13.5px; color: #cbbf9f; line-height: 1.45; }
.pcard { position: relative; overflow: hidden; border-radius: 30px; padding: 22px; background: linear-gradient(135deg, #1a1408, #3a2a0e 55%, #14181c); border: 1px solid rgba(232,208,96,.5); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); }
.pcard::before { content: ""; position: absolute; top: -80px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(232,208,96,.14); pointer-events: none; }

.pcard__crown { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; box-shadow: 0 0 30px rgba(232,208,96,.55); margin-bottom: 12px; color: #14181c; }
.pcard__crown svg { width: 26px; height: 26px; }
.pcard small.k { position: relative; display: block; font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--gold); }
.pcard h3 { position: relative; color: #fff; font-size: 26px; font-weight: 800; margin: 4px 0; }
.pcard > p { position: relative; color: #d2c7a8; font-size: 14px; margin: 0 0 16px; }
.plans { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan { position: relative; text-align: left; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.12); color: #fff; cursor: pointer; font: inherit; transition: border-color .25s, background .25s, transform .25s var(--ease-out); }
.plan:hover { transform: translateY(-2px); }
.plan.on { border-color: var(--gold); background: rgba(232,208,96,.1); box-shadow: 0 0 0 4px rgba(232,208,96,.12); }
.plan small { display: block; font-size: 12px; font-weight: 700; color: #cbbf9f; }
.plan strong { display: block; font: 400 34px/1 var(--f-num); margin: 4px 0 2px; color: #fff; }
.plan.on strong { color: var(--gold); }
.plan span { font-size: 12px; color: #b9ae90; }
.plan em { position: absolute; top: -9px; right: 10px; font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: var(--gold); color: #2c2205; }
.pcta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 15px; border-radius: 99px; border: 0; font: 800 15px/1 var(--f-ui); color: #2c2205; background: linear-gradient(100deg, #f6e08a, #e8d060 45%, #c9952b); box-shadow: 0 14px 30px -12px rgba(232,208,96,.7); text-decoration: none; }
.pnote { position: relative; z-index: 1; text-align: center; font-size: 12.5px; color: #b9ae90; margin: 10px 0 0; }
.cmp { position: relative; z-index: 1; margin-top: 14px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.cmp div { display: grid; grid-template-columns: 1fr 70px 80px; gap: 8px; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.07); color: #e9e2cc; }
.cmp div:last-child { border-bottom: 0; }
.cmp div span:nth-child(2) { color: #9d9479; text-align: center; }
.cmp div span:nth-child(3) { color: var(--gold); font-weight: 800; text-align: center; }
.cmp div.h { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: #9d9479; background: rgba(255,255,255,.03); }
.halo { position: relative; width: 70px; height: 70px; border-radius: 50%; flex: none; }
.halo::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, #fff1b8, #e8d060, #c9952b, #fff1b8); animation: spin 4s linear infinite; }
.halo::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(232,208,96,.4), transparent 70%); animation: breathe 3s ease-in-out infinite; }
.halo span { position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: linear-gradient(135deg, #e86848, #8b5cf6); border: 3px solid #1a1408; display: grid; place-items: center; font: 400 30px/1 var(--f-num); color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .6; } }
.pshow { position: relative; display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(232,208,96,.18); }
.pshow b { display: flex; align-items: center; gap: 7px; font-size: 16px; color: #fff; }
.pshow b i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .1em; padding: 3px 7px; border-radius: 6px; background: var(--gold); color: #2c2205; }
.pshow small { display: block; color: #b9ae90; font-size: 13px; margin-top: 2px; }
.pshow strong { margin-left: auto; font: 400 26px/1 var(--f-num); color: var(--gold); }
@media (max-width: 920px) { .prm__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { .perks { grid-template-columns: minmax(0, 1fr); } .cmp div { grid-template-columns: 1fr 56px 70px; } .pshow strong { display: none; } }

/* ==========================================================================
   Engagements, étapes, appel final, questions
   ========================================================================== */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trust__item { padding: 32px 28px 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.trust__item b { display: block; font: 400 clamp(4.6rem, 9vw, 7rem)/.82 var(--f-num); color: var(--accent); margin-bottom: 14px; }
.trust__item h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: .35em; }
.trust__item p { margin: 0; color: var(--ink-2); font-size: 16px; }
.family { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 24px 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.family__ico { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--win-soft); color: var(--win); }
.family__ico svg { width: 30px; height: 30px; }
.family h3 { margin: 0 0 .3em; font-size: 1.2rem; font-weight: 800; }
.family p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 900px) { .trust { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .family { grid-template-columns: minmax(0, 1fr); } }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: s; }
.steps3 article { padding: 30px 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.steps3 article::before { counter-increment: s; content: "0" counter(s); display: block; font: 400 54px/1 var(--f-num); color: var(--accent); margin-bottom: 12px; }
.steps3 h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: .35em; }
.steps3 p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) { .steps3 { grid-template-columns: minmax(0, 1fr); } }
.fin { position: relative; isolation: isolate; overflow: hidden; text-align: center; background: var(--night); color: var(--night-ink); padding: clamp(90px, 12vw, 170px) 0; }
.fin__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fin__bg::before { content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: radial-gradient(circle, rgba(232,104,72,.36), transparent 62%); filter: blur(30px); animation: breathe 7s ease-in-out infinite; }
.fin__ring { position: absolute; left: 50%; top: 50%; border: 1.5px solid rgba(255,255,255,.08); border-radius: 50%; transform: translate(-50%, -50%); }
.fin__ring--1 { width: 440px; height: 440px; } .fin__ring--2 { width: 760px; height: 760px; } .fin__ring--3 { width: 1080px; height: 1080px; }
.fin__logo { width: min(380px, 76vw); height: auto; margin: 0 auto 30px; display: block; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); animation: bob 6s ease-in-out infinite; }
.home .fin h2 { color: var(--night-ink); font: 400 clamp(3rem, 7vw, 6rem)/.9 var(--f-num); letter-spacing: .01em; max-width: 16ch; margin: 0 auto .3em; }
.fin h2 em { font-style: normal; color: var(--coral); }
.fin p { color: #cfcbc4; font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 50ch; margin: 0 auto; }
.fin .signup { margin: 32px auto 0; justify-content: center; }
.home .faq summary { font-family: var(--f-ui); font-weight: 700; font-size: 17px; }
.home .faq details[open] { box-shadow: var(--shadow); }
.foot__brand img { height: 50px; width: auto; display: block; }
.foot__company { margin-top: 10px; font-size: 13.5px; color: var(--muted); }

/* ==========================================================================
   Apparitions (le contenu reste visible si le script échoue)
   ========================================================================== */
.js-anim .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js-anim .rv.in { opacity: 1; transform: none; }
.js-anim .rv.d1 { transition-delay: .08s; } .js-anim .rv.d2 { transition-delay: .16s; } .js-anim .rv.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .rv, .js-anim .tl li, .js-anim .lfeed > .seq, .js-anim .pl, .js-anim .iafeed .iaq, .js-anim .iafeed .iaa, .js-anim .pl em { opacity: 1 !important; transform: none !important; }
  .pitchbg .ln { stroke-dashoffset: 0; } .hx__title em::after { transform: none; }
  .grain, .glow, .beam, .float > *, .fin__logo { animation: none !important; }
}

/* ==========================================================================
   v3 : logotype de l'app, logo dans le haut de page, chiffres, journée type,
   bouton d'inscription fixe sur téléphone, mention sous les formulaires
   ========================================================================== */
/* Logotype « LOGE » de l'app (LogeLogo : Syne 800, étiré en hauteur, GE en corail) */
.wordmark { display: inline-flex; align-items: baseline; font-family: "Syne", var(--f-ui); font-weight: 800; letter-spacing: -.02em; line-height: 1; transform: scaleY(1.22); transform-origin: center; color: inherit; text-decoration: none; }
.wordmark b { color: var(--coral); font-weight: 800; }
.brand .wordmark { font-size: 27px; color: var(--night-ink); }
.brand:hover .wordmark { transform: scaleY(1.22) translateY(-1px); }

/* En-tête de l'app dans le téléphone (HomeHeader) */
.ah { position: relative; border-bottom: 0; padding: 2px 12px 10px; gap: 7px; }
.ah::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #E86848, #E8D060, rgba(232,208,96,0)); opacity: .9; }
.ah .wordmark { font-size: 19px; color: var(--app-ink); margin-right: 2px; }
.ah__hi b { font-size: 11.5px; } .ah__hi small { font-size: 9.5px; }
.ah .coinpill { margin-left: auto; padding: 3px 7px 3px 4px; font-size: 11px; }
.ah__ico { width: 20px; height: 20px; display: grid; place-items: center; color: var(--app-ink); position: relative; flex: none; }
.ah__ico svg { width: 17px; height: 17px; }
.ah__ico i { position: absolute; top: -4px; right: -4px; min-width: 13px; height: 13px; border-radius: 99px; background: var(--coral); color: #fff; font: 800 8.5px/13px var(--f-ui); text-align: center; font-style: normal; box-shadow: 0 0 0 1.5px var(--app-bg); }
.ah .avatar-a { width: 27px; height: 27px; border-width: 2px; font-size: 11.5px; }

/* Le logo dans le haut de page */
.hx__logo { display: block; width: auto; height: clamp(70px, 8vw, 104px); margin: 0 0 22px -6px; transform: rotate(-3deg); filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.js-anim .hx__logo { opacity: 0; transform: rotate(-12deg) scale(.7); animation: logoIn .9s var(--ease-spring) .15s forwards; }
@keyframes logoIn { to { opacity: 1; transform: rotate(-3deg); } }

/* Chiffres */
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(50px, 7vw, 90px); }
.nums > div:not(.num) { padding: 22px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.nums > div:not(.num) b { display: block; font: 400 clamp(3rem, 6vw, 4.6rem)/.9 var(--f-num); color: var(--ink); letter-spacing: .01em; }
.nums > div:not(.num) b em { font-style: normal; color: var(--accent); }
.nums > div:not(.num) span { font-size: 15px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 760px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Un samedi avec LOGE : défilement horizontal piloté par le défilement de la page */
.day { position: relative; background: var(--night); color: var(--night-ink); }
.day__sticky { position: sticky; top: 68px; height: calc(100vh - 68px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.day__head { display: flex; justify-content: space-between; align-items: end; gap: 20px 40px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 36px); }
.day__head h2 { color: var(--night-ink); font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 800; margin: 0; }
.day__head p { margin: 0; max-width: 40ch; color: #cfcbc4; }
.day__track { display: flex; gap: 18px; padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); will-change: transform; }
.dcard { flex: none; width: 330px; border-radius: 28px; padding: 20px; background: linear-gradient(160deg, #1b1d24, #121318); border: 1px solid var(--night-line-2); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.dcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c, var(--coral)); }
.dcard time { font: 400 54px/.9 var(--f-num); color: var(--c, var(--coral)); }
.dcard h3 { margin: 0; color: #fff; font-size: 20px; font-weight: 800; }
.dcard p { margin: 0; color: #c6c3cc; font-size: 14.5px; line-height: 1.5; }
.dcard .appui { margin-top: auto; }
.mini { border-radius: 18px; padding: 10px 12px; background: var(--app-bg); color: var(--app-ink); font-family: var(--f-ui); font-size: 12.5px; }
.mini--quiz { background: #1d2127; color: #fff; border: 2px solid var(--coral); text-align: center; }
.mini--quiz b { display: block; font-size: 12.5px; margin-bottom: 8px; }
.mini--quiz div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini--quiz span { border: 1.5px solid var(--coral); border-radius: 10px; padding: 6px 0; font-weight: 700; font-size: 11.5px; }
.mini--quiz span.ok { background: #3f8f3a; border-color: #3f8f3a; }
.mini--row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.mini--row .jsy { width: 30px; height: auto; }
.mini--row em { margin-left: auto; font-style: normal; font: 400 18px/1 var(--f-num); color: #3f8f3a; }
.mini--notif { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; background: rgba(245,242,236,.96); }
.mini--notif .ic { width: 30px; height: 30px; border-radius: 9px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--app-line); }
.mini--notif .ic svg.bdg { width: 20px; height: auto; }
.mini--notif small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--app-mut); text-transform: uppercase; }
.mini--rank { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-weight: 700; border: 2px solid var(--coral); background: #fff6f3; }
.mini--rank b { font: 400 18px/1 var(--f-num); }
.mini--rank em { font-style: normal; color: #3f8f3a; font-weight: 800; }
.mini--score { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.mini--score b { font: 400 22px/1 var(--f-num); }
.mini--score span { display: flex; align-items: center; gap: 6px; }
.mini--score svg.bdg { width: 20px; height: auto; }
.day__bar { position: relative; height: 3px; margin: clamp(22px, 3vw, 34px) auto 0; width: min(var(--wrap), 100% - 2 * var(--gutter)); border-radius: 3px; background: var(--night-line); }
.day__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--gold)); transform-origin: left; transform: scaleX(var(--dp, 0)); }
.day.is-static { height: auto !important; }
.day.is-static .day__sticky { position: relative; top: 0; height: auto; padding: clamp(70px, 9vw, 110px) 0; }
.day.is-static .day__track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; transform: none !important; scrollbar-width: none; }
.day.is-static .day__track::-webkit-scrollbar { display: none; }
.day.is-static .dcard { scroll-snap-align: center; }
.day.is-static .day__bar { display: none; }
@media (max-width: 520px) { .dcard { width: 82vw; } }

/* Mention sous les formulaires d'inscription */
.consent { flex: 1 0 100%; margin: 4px 2px 0; font-size: 12.5px; color: var(--night-mut); }
.consent a { color: inherit; text-underline-offset: 3px; }
.fin .consent { text-align: center; }

/* Bouton d'inscription qui suit sur téléphone */
.mcta { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; display: none; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 99px; background: rgba(16,17,21,.9); border: 1px solid var(--night-line-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 40px -12px rgba(0,0,0,.6); color: #fff; transform: translateY(140%); transition: transform .5s var(--ease-out); }
.mcta .wordmark { font-size: 17px; color: #fff; }
.mcta span { font-size: 13px; color: var(--night-mut); flex: 1; }
.mcta .btn { padding: 11px 16px; font-size: 14px; }
.mcta.on { transform: none; }
@media (max-width: 760px) { .mcta { display: flex; } }
@media (prefers-reduced-motion: reduce) { .js-anim .hx__logo { opacity: 1; animation: none; transform: rotate(-3deg); } }
.ah { gap: 6px; }
.ah .wordmark { font-size: 17px; }
.ah__hi b, .ah__hi small { white-space: nowrap; display: block; }
.ah__hi small { font-size: 9px; }
.mcta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Chiffres v2 : tuiles aux couleurs de l'Arena de l'app */
.nums { gap: 14px; }
.num { position: relative; overflow: hidden; padding: 20px 20px 22px; border-radius: 26px; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: linear-gradient(150deg, var(--a1), var(--a2)); box-shadow: 0 24px 50px -28px var(--a2); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); border: 0; }
.num:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 34px 60px -26px var(--a2); }
.num.coral { --a1: #ee6e4c; --a2: #b2402c; } .num.green { --a1: #47a868; --a2: #24653f; } .num.teal { --a1: #43b2c4; --a2: #1f6f80; } .num.gold { --a1: #e3b43a; --a2: #9c6f12; }
.num__ico { position: absolute; left: 18px; top: 18px; width: 40px; height: 40px; border-radius: 13px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.num__ico svg { width: 21px; height: 21px; color: #fff; }
.num__deco { position: absolute; right: -22px; bottom: -22px; width: 120px; height: 120px; color: #fff; opacity: .14; }
.num b { position: relative; font: 400 clamp(3.4rem, 6vw, 4.8rem)/.88 var(--f-num) !important; color: #fff !important; letter-spacing: .01em; }
.num b em { font-style: normal; color: rgba(255,255,255,.75) !important; }
.num .num__t { position: relative; margin-top: 6px; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.92); }

/* ==========================================================================
   Une journée type v2 : liste de moments cliquables + téléphone qui change
   ========================================================================== */
.day2 { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--night-ink); padding: clamp(80px, 10vw, 140px) 0; }
.day2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 85% 40%, color-mix(in srgb, var(--mc, #e86848) 26%, transparent), transparent 70%); transition: background 1s ease; }
.day2__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 90px); align-items: center; }
.day2 h2 { color: var(--night-ink); font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 800; margin: 0 0 .3em; }
.day2__lead { color: #cfcbc4; max-width: 46ch; margin: 0 0 26px; }
.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; position: relative; }
.moments::before { content: ""; position: absolute; left: 33px; top: 18px; bottom: 18px; width: 2px; background: var(--night-line); border-radius: 2px; }
.moments button { position: relative; width: 100%; display: grid; grid-template-columns: 68px 1fr; gap: 14px; align-items: center; text-align: left; padding: 12px 16px 12px 0; border-radius: 18px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; cursor: pointer; overflow: hidden; transition: background .35s ease, border-color .35s ease, transform .35s var(--ease-out); }
.moments button:hover { background: rgba(255,255,255,.04); }
.moments time { position: relative; z-index: 1; justify-self: center; font: 400 17px/1 var(--f-num); letter-spacing: .04em; color: var(--night-mut); background: var(--night); padding: 6px 0; width: 56px; text-align: center; border-radius: 10px; border: 1.5px solid var(--night-line-2); transition: color .35s, border-color .35s, background .35s; }
.moments b { display: block; font-size: 16.5px; font-weight: 800; color: #e9e6ee; transition: color .35s; }
.moments small { display: block; font-size: 14px; color: var(--night-mut); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease-out), opacity .35s ease, margin .35s; }
.moments .mbar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--c); transform-origin: left; transform: scaleX(0); }
.moments [aria-selected="true"] { background: rgba(255,255,255,.06); border-color: var(--night-line-2); }
.moments [aria-selected="true"] time { color: #0c0d10; background: var(--c); border-color: var(--c); }
.moments [aria-selected="true"] b { color: #fff; }
.moments [aria-selected="true"] small { max-height: 60px; opacity: 1; margin-top: 3px; }
.moments [aria-selected="true"] .mbar { animation: mfill var(--dur, 5s) linear forwards; }
.moments.paused [aria-selected="true"] .mbar { animation: none; transform: scaleX(1); opacity: .5; }
@keyframes mfill { to { transform: scaleX(1); } }
.day2__art { display: grid; justify-items: center; gap: 16px; }
.day2__ctrl { display: flex; align-items: center; gap: 14px; font: 400 18px/1 var(--f-num); letter-spacing: .06em; color: var(--night-mut); }
.day2__ctrl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--night-line-2); background: rgba(255,255,255,.04); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .25s, transform .25s var(--ease-out); }
.day2__ctrl button:hover { background: rgba(255,255,255,.1); transform: scale(1.06); }
.day2__ctrl svg { width: 18px; height: 18px; }
/* Les écrans */
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); pointer-events: none; }
.scene.on { opacity: 1; transform: none; }
.sc__pad { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 6px 14px 18px; }
.sc__title b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.sc__title small { font-size: 12px; color: var(--app-mut); }
.quizcard { border-radius: 22px; padding: 16px 14px; background: #1d2127; color: #fff; border: 2.5px solid var(--coral); text-align: center; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 14px); }
.quizcard small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: var(--coral); margin-bottom: 8px; }
.quizcard > b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.quizcard div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.quizcard span { border: 2px solid var(--coral); border-radius: 12px; padding: 8px 0; font-weight: 800; font-size: 12.5px; }
.quizcard span.ok { background: #3f8f3a; border-color: #3f8f3a; }
.quizcard em { display: block; margin-top: 10px; font-style: normal; font-size: 12px; font-weight: 700; color: #9fd18a; }
.streak { display: grid; grid-template-columns: 40px 1fr; gap: 2px 10px; align-items: center; padding: 12px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--app-line); }
.streak svg { grid-row: 1 / span 2; width: 34px; height: 34px; color: var(--coral); }
.streak b { font: 400 24px/1 var(--f-num); }
.streak span { font-size: 12px; color: var(--app-mut); }
.sc__xih { padding: 14px 16px 16px; } .sc__xih h4 { font-size: 38px !important; }
.sc__budget i::after { width: 99% !important; }
.sc__btn { margin-top: auto; text-align: center; padding: 14px; border-radius: 99px; background: var(--xi); color: #fff; font-weight: 800; font-size: 14px; }
.scene:nth-child(4) .sc__btn { background: var(--coral); }
.sc__lock { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--app-sunk); font-size: 12.5px; font-weight: 700; color: #4a4f55; }
.sc__lock svg { width: 16px; height: 16px; }
.sc__gain { align-self: flex-start; padding: 7px 12px; border-radius: 99px; background: #e9f4e2; color: #2f6f2a; font-weight: 800; font-size: 13px; }
.sc__gain b { font: 400 18px/1 var(--f-num); margin-left: 4px; }
.sc__tbl { max-width: none; }
.sc__tbl .tbl__r { grid-template-columns: 18px 26px minmax(0, 1fr) 40px 38px; }
.sc__tbl .av { width: 26px; height: 26px; border-radius: 50%; }
.sc__tbl .av--me { background: conic-gradient(from 0deg, #fff1b8, #e8d060, #c9952b, #fff1b8); box-shadow: inset 0 0 0 3px #fff; }
.sc__tbl .up { color: #3f8f3a; font-size: 11px; font-weight: 800; text-align: right; } .sc__tbl .dn { color: var(--loss); font-size: 11px; font-weight: 800; text-align: right; } .sc__tbl .eq { color: var(--app-mut); font-size: 12px; text-align: right; }
.sc__vt { max-width: none; }
/* Écran verrouillé */
.scene--lock { background: radial-gradient(90% 60% at 30% 10%, rgba(232,104,72,.55), transparent 60%), radial-gradient(80% 60% at 90% 90%, rgba(72,180,200,.45), transparent 60%), linear-gradient(180deg, #1b1430, #0d0e14); color: #fff; }
.lock__clock { text-align: center; margin-top: 14px; }
.lock__clock small { display: block; font-size: 15px; font-weight: 600; opacity: .9; }
.lock__clock b { display: block; font: 600 86px/1 var(--f-ui); letter-spacing: -.03em; margin-top: 2px; }
.lock__notifs { margin-top: auto; padding: 0 10px 34px; display: grid; gap: 8px; }
.lnotif { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; padding: 11px 12px; border-radius: 20px; background: rgba(255,255,255,.18); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); font-size: 12.5px; line-height: 1.35; }
.scene.on .lnotif { animation: notifIn .6s var(--ease-spring) both; }
.scene.on .lnotif:nth-child(2) { animation-delay: .25s; } .scene.on .lnotif:nth-child(3) { animation-delay: .5s; }
@keyframes notifIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.lnotif__app { width: 38px; height: 38px; border-radius: 10px; background: #f5f2ec; display: grid; place-items: center; overflow: hidden; }
.lnotif__app .wordmark { font-size: 10.5px; color: #14181c; }
.lnotif small { display: block; font-size: 11px; opacity: .75; }
.lnotif b { display: block; font-size: 13px; }
.lnotif p { margin: 1px 0 0; }
.lnotif--more { display: block; text-align: center; padding: 9px; font-weight: 700; font-size: 12px; }
@media (max-width: 920px) {
  .day2__grid { grid-template-columns: minmax(0, 1fr); }
  .moments { grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .moments::-webkit-scrollbar { display: none; }
  .moments::before { display: none; }
  .moments li { scroll-snap-align: start; }
  .moments button { grid-template-columns: 1fr; gap: 8px; padding: 12px; border-color: var(--night-line); height: 100%; align-content: start; }
  .moments time { justify-self: start; }
  .moments small { display: none; }
}

/* Titres qui se dévoilent mot à mot */
.js-anim .wsplit .wd { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.js-anim .wsplit .wd > span { display: inline-block; transform: translateY(108%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms + .1s); }
.js-anim .rv.in .wsplit .wd > span, .js-anim .wsplit.in .wd > span, .js-anim .rv.in.wsplit .wd > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .js-anim .wsplit .wd > span { transform: none; transition: none; } }

/* ==========================================================================
   Écrans complets de la journée type
   ========================================================================== */
.sc__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 76px; min-height: 0; }
.scene .ah { flex: none; }
.streakpill { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 99px; background: #fff; border: 1px solid var(--app-line); font-size: 11.5px; }
.streakpill svg { width: 16px; height: 16px; color: var(--coral); }
.streakpill b { font-weight: 800; }
.streakpill span { color: var(--app-mut); }
.qz span { position: relative; }
.scene.on .qz__ok { animation: qzOk .5s ease 1.2s forwards; }
@keyframes qzOk { to { background: #3f8f3a; border-color: #3f8f3a; } }
.qz__msg { opacity: 0; transform: translateY(4px); }
.scene.on .qz__msg { animation: up .5s var(--ease-out) 1.5s forwards; }
.asec--in { padding: 4px 2px 0; }
.newsc { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 18px; background: #fff; border: 1px solid var(--app-line); }
.newsc__img { position: relative; height: 64px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #c8102e, #5a0614); }
.newsc__img svg.bdg { width: 30px; height: auto; }
.newsc__img i { position: absolute; left: 4px; top: 4px; font-style: normal; font-size: 7px; font-weight: 800; letter-spacing: .08em; padding: 2px 5px; border-radius: 99px; background: var(--coral); color: #fff; }
.newsc small { font-size: 10px; color: var(--app-mut); display: flex; align-items: center; gap: 5px; }
.newsc small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3f8f3a; }
.newsc b { font-size: 13px; line-height: 1.3; }
/* Point de toucher animé */
.tap { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px rgba(20,24,28,.25); pointer-events: none; opacity: 0; }
.scene.on .tap { animation: tap 1.1s ease .5s both; }
@keyframes tap { 0% { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.5); } }
/* LOGE XI miniature */
.sc__xih { padding: 12px 14px 14px; border-radius: 22px; }
.home .sc__xih h4 { font-size: 34px; margin: 8px 0 2px; }
.sc__xih p { font-size: 11px; }
.sc__xih .xih__wm { font-size: 110px; }
.xip--mini { aspect-ratio: auto; height: 190px; border-radius: 20px; flex: none; }
.mp { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%); }
.mp svg.jsy { width: 30px; height: auto; filter: drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
.mp--cap::before { content: "C"; position: absolute; z-index: 2; left: -7px; top: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--gold); color: #3b2c00; font: 800 8.5px/15px var(--f-ui); text-align: center; box-shadow: 0 0 0 1.5px #2a7d37; transform: scale(0); }
.scene.on .mp--cap::before { animation: pop2 .5s var(--ease-spring) 1.1s forwards; }
@keyframes pop2 { to { transform: scale(1); } }
.scene .roles { grid-template-columns: 1fr 1fr; }
.scene .role { padding: 8px 10px; grid-template-columns: 34px 1fr; }
.scene .role svg.jsy { width: 34px; }
.scene .role b { font-size: 12.5px; }
.sc__budget { padding: 10px 12px; }
.scene.on .sc__budget i::after { width: 99%; }
.sc__btn { position: relative; margin-top: auto; text-align: center; padding: 13px; border-radius: 99px; background: var(--coral); color: #fff; font-weight: 800; font-size: 13.5px; flex: none; }
.sc__btn--xi { background: var(--xi); }
.sc__btn--teal { background: #2f8fa1; }
/* En-tête de loge compact, onglets */
.lgh--sm { height: 128px; }
.lgh--sm .lgh__id { bottom: 10px; }
.lgh--sm .lgh__ring { width: 44px; height: 44px; }
.lgh--sm .lgh__ring svg.bdg { width: 28px; }
.lgh--sm .lgh__id b { font-size: 23px; }
.scene .ltabs { font-size: 12px; gap: 13px; }
.sc__sub { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--app-mut); }
.prow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 8px; padding: 9px 11px; border-radius: 16px; background: #fff; border: 2px solid var(--edge); }
.prow__t { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.prow__t--r { justify-content: flex-end; }
.prow__t svg.bdg { width: 22px; height: auto; }
.prow__s { display: flex; align-items: center; gap: 5px; }
.prow__s i { width: 28px; height: 32px; border-radius: 8px; display: grid; place-items: center; font: 400 22px/1 var(--f-num); font-style: normal; background: var(--app-ink); color: #fff; }
.prow__s span { color: var(--app-mut); font-weight: 800; }
.prow small { grid-column: 1 / -1; text-align: center; font-size: 10.5px; color: var(--app-mut); }
.scene.on .prow { animation: msgIn .5s var(--ease-out) both; }
.scene.on .prow:nth-of-type(3) { animation-delay: .12s; } .scene.on .prow:nth-of-type(4) { animation-delay: .24s; }
/* Écran verrouillé de l'iPhone */
.lock__top { display: grid; place-items: center; margin-top: 4px; }
.lock__top svg { width: 14px; height: 14px; color: #fff; opacity: .9; }
.lock__clock { margin-top: 4px; }
.lock__clock b { font-weight: 600; font-size: 82px; letter-spacing: -.04em; text-shadow: 0 2px 20px rgba(0,0,0,.2); }
.lock__notifs { padding: 0 10px 18px; }
.lnotif small { display: flex; justify-content: space-between; gap: 8px; }
.lnotif small span:last-child { opacity: .8; }
.lnotif--goal { background: rgba(255,255,255,.26); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; }
.lnotif--old { opacity: .85; transform: scale(.98); }
.lnotif--stack { display: block; text-align: center; padding: 9px; font-size: 12px; background: rgba(255,255,255,.12); }
.lnotif--stack b { display: inline; font-size: 12px; }
.lock__bottom { display: flex; justify-content: space-between; padding: 0 36px 26px; }
.lock__bottom span { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; }
.lock__bottom svg { width: 18px; height: 18px; color: #fff; }
.homebar { position: absolute; left: 50%; bottom: 8px; width: 120px; height: 4.5px; margin-left: -60px; border-radius: 9px; background: rgba(255,255,255,.85); }
/* Classement de loge */
.toast { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: var(--app-ink); color: #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
.toast svg { width: 30px; height: 30px; color: var(--gold); }
.toast b { display: block; font-size: 13.5px; }
.toast span { font-size: 11px; opacity: .75; }
.toast em { font: 400 26px/1 var(--f-num); font-style: normal; color: var(--gold); }
.scene.on .toast { animation: toastIn .7s var(--ease-spring) .3s both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.95); } to { opacity: 1; transform: none; } }
.seg--sm { margin: 0; flex: none; }
.seg--sm span { font-size: 11px; padding: 6px 0; }
.rk { display: grid; grid-template-columns: 24px 28px 1fr auto 26px; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 15px; background: #fff; border: 1px solid var(--app-line); }
.rk > b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 400 14px/1 var(--f-num); background: var(--app-sunk); }
.rk > b.m1 { background: var(--gold); } .rk > b.m2 { background: #c0c7d1; } .rk > b.m3 { background: #cd7f32; color: #fff; }
.rk .av { width: 28px; height: 28px; border-radius: 50%; }
.rk .av--me { background: conic-gradient(from 0deg, #fff1b8, #e8d060, #c9952b, #fff1b8); box-shadow: inset 0 0 0 3px #fff; }
.rk strong { display: block; font-size: 13px; }
.rk small { font-size: 10px; color: var(--app-mut); }
.rk em { font: 400 20px/1 var(--f-num); font-style: normal; }
.rk i { font-style: normal; font-size: 10px; font-weight: 800; text-align: right; }
.rk .up { color: #3f8f3a; } .rk .dn { color: var(--loss); } .rk .eq { color: var(--app-mut); }
.rk.me { border: 2px solid #2fa6e0; }
.scene.on .rk.me { animation: rise2 .8s var(--ease-spring) .9s both; }
@keyframes rise2 { from { transform: translateY(46px); } to { transform: none; } }
/* Page du match */
.mh { flex: none; position: relative; padding: 0 14px 14px; color: #fff; background: linear-gradient(120deg, #a50f27 0 50%, #0b3d91 50% 100%); }
.mh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); pointer-events: none; }
.mh > * { position: relative; z-index: 1; }
.mh__lg { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 700; opacity: .92; margin-bottom: 8px; }
.mh__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 6px; }
.mh__row > div { display: grid; justify-items: center; gap: 4px; }
.mh__row b { font-size: 12.5px; }
.mh__ring { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.mh__ring svg.bdg { width: 30px; height: auto; }
.mh__sc strong { display: block; font: 400 40px/1 var(--f-num); }
.mh__sc span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.35); }
.vrow { position: relative; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 16px; background: #fff; border: 1.5px solid var(--app-line); }
.vrow svg.jsy { width: 38px; height: auto; }
.vrow b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.vrow span { display: block; height: 7px; border-radius: 99px; background: var(--app-sunk); overflow: hidden; }
.vrow span i { display: block; height: 100%; width: 0; border-radius: inherit; background: #3aa6b9; transition: width 1.2s var(--ease-out) .4s; }
.scene.on .vrow span i { width: var(--w); }
.vrow em { font: 400 19px/1 var(--f-num); font-style: normal; }
.vrow.on { border-color: #3aa6b9; background: #eef8fa; }
.vrow .tap { left: 70%; }
.sc__note { font-size: 11px; color: var(--app-mut); text-align: center; }
.newsc__img--b { background: linear-gradient(135deg, #0b3d91, #06183a); }

/* ==========================================================================
   Écrans interactifs
   ========================================================================== */
.try { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 7px 13px 7px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); position: relative; z-index: 5; }
.try i { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); }
.try i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: ping 1.8s var(--ease-out) infinite; }
.try--dark, .hx .try { color: #e9e6ee; background: rgba(255,255,255,.06); border-color: var(--night-line-2); box-shadow: none; }
.try--hero { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); white-space: nowrap; margin: 0; }
@media (max-width: 960px) { .try--hero { position: relative; left: auto; bottom: auto; transform: none; margin: 14px auto 0; display: flex; width: max-content; max-width: 100%; white-space: normal; } .hx__art { display: grid; } }
[data-seg] span, .pr0 .stp i, .scorer, .podium > div, .quick span, .iasug span, .xip .pl, .ccard.is-l, .ccard.is-r { cursor: pointer; }
.pr0 .stp i { user-select: none; transition: background .2s, color .2s, transform .15s; }
.pr0 .stp i:hover { background: var(--app-ink); color: #fff; }
.pr0 .stp i:active { transform: scale(.9); }
.scorer { transition: border-color .2s, background .2s; }
.podium > div { transition: transform .25s var(--ease-out); }
.podium > div:hover { transform: translateY(-3px); }
.podium > div.voted b::after { content: " ✓"; }
.vt__h small.thanks { background: var(--gold); color: #2c2205; }
.quick span { transition: transform .15s, background .2s; }
.quick span:hover { background: #fff; } .quick span:active { transform: scale(.93); }
.iasug span { transition: background .2s, border-color .2s; }
.iasug span:hover { background: #fdf0f7; border-color: #d8559a; }
.xip .pl { transition: filter .2s; }
.xip .pl:hover svg.jsy { filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)) brightness(1.08); }
.pl.is-cap em { background: var(--gold); color: #2c2205; }
.pl--cap::before { transition: transform .35s var(--ease-spring); }
.mcards--pl { flex-direction: column; gap: 6px; }
.pc { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 16px; background: #fff; border: 2.25px solid var(--edge); }
.pc svg.jsy { width: 40px; height: auto; }
.pc b { display: block; font-size: 13px; }
.pc small { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--app-mut); }
.pc small svg.bdg { width: 12px; height: auto; }
.pc em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: #3f8f3a; margin-top: 2px; }
.carousel { touch-action: pan-y; }
.ccard { user-select: none; }

/* Anneau qui suit la souris (ordinateur uniquement) */
.cring { position: fixed; left: 0; top: 0; z-index: 90; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid rgba(232,104,72,.7); pointer-events: none; opacity: 0; transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s, border-color .3s, opacity .3s; mix-blend-mode: normal; }
.cring.on { opacity: 1; }
.cring.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(232,104,72,.10); border-color: rgba(232,104,72,.9); }
.cring span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 9px/1 var(--f-ui); letter-spacing: .12em; color: var(--coral); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cring.big span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cring { display: none; } }

/* ==========================================================================
   Journée type v3 : ciel qui change, écrans fidèles à l'app
   ========================================================================== */
.day2::before { display: none; }
.sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; transition: background 1.2s ease; background: var(--skybg, linear-gradient(180deg, #2b3a63, #0c0d10 70%)); }
.day2[data-sky="matin"] { --skybg: linear-gradient(180deg, #f2a65e 0%, #8a6fa0 30%, #2a2f52 62%, #0c0d10 100%); --orb: #ffd27a; }
.day2[data-sky="midi"]  { --skybg: linear-gradient(180deg, #5aa7e6 0%, #3d6fae 34%, #1b2a4a 66%, #0c0d10 100%); --orb: #fff3c4; }
.day2[data-sky="aprem"] { --skybg: linear-gradient(180deg, #f0b04f 0%, #c06a58 32%, #3b2a4a 64%, #0c0d10 100%); --orb: #ffe08a; }
.day2[data-sky="soir"]  { --skybg: linear-gradient(180deg, #c4527a 0%, #5a3a7a 32%, #1a1a3a 64%, #0c0d10 100%); --orb: #ffb59a; }
.day2[data-sky="nuit"]  { --skybg: linear-gradient(180deg, #13204a 0%, #0e1530 40%, #0a0c16 100%); --orb: #f5f2ec; }
.day2[data-sky="nuit2"] { --skybg: linear-gradient(180deg, #0f1838 0%, #0b1024 45%, #08090f 100%); --orb: #f5f2ec; }
.day2[data-sky="minuit"]{ --skybg: linear-gradient(180deg, #0a0f26 0%, #07091a 50%, #050608 100%); --orb: #e9e6ff; }
.sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(12,13,16,.55)); }
.sky__arc { position: absolute; left: 0; right: 0; top: 30px; width: 100%; height: 220px; }
.sky__arc path { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1.5; stroke-dasharray: 4 7; }
.sky__orb { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--orb); box-shadow: 0 0 40px 10px color-mix(in srgb, var(--orb) 55%, transparent); transition: left 1.2s var(--ease-out), top 1.2s var(--ease-out), background 1.2s, box-shadow 1.2s; }
.day2[data-sky^="nuit"] .sky__orb, .day2[data-sky="minuit"] .sky__orb { box-shadow: inset -10px -4px 0 0 rgba(20,24,40,.85), 0 0 30px 4px rgba(233,230,255,.25); }
.sky__stars { position: absolute; inset: 0 0 40% 0; opacity: 0; transition: opacity 1.2s; background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 60%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 35% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 48% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 63% 42%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 77% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 55%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 95% 8%, #fff 50%, transparent 51%); }
.day2[data-sky^="nuit"] .sky__stars, .day2[data-sky="minuit"] .sky__stars { opacity: .7; }
.sky__beams { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.09) 38%, transparent 46%), linear-gradient(65deg, transparent 54%, rgba(255,255,255,.08) 62%, transparent 70%); }
.day2[data-sky="soir"] .sky__beams, .day2[data-sky="nuit"] .sky__beams { opacity: 1; }
.mtags { display: none; gap: 5px; flex-wrap: wrap; margin-top: 8px; font-style: normal; }
.mtags i { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #e9e6ee; }
.moments [aria-selected="true"] .mtags { display: flex; }
.moments [aria-selected="true"] small { max-height: 90px; }
.day2__grid { align-items: start; }
.day2__copy { padding-top: 10px; }

/* 09:00 · bas de l'accueil */
.sc__body--home { justify-content: flex-end; padding-bottom: 78px; }
.asec__link { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--coral); background: none !important; border: 0 !important; padding: 0 !important; }
.news2 { display: flex; gap: 8px; overflow: hidden; }
.news2__c { flex: none; width: 200px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--app-line); padding-bottom: 10px; }
.news2__img { position: relative; display: grid; place-items: center; height: 92px; background: radial-gradient(70% 90% at 30% 20%, #e23b4f, #7a0a1c); }
.news2__img--b { background: radial-gradient(70% 90% at 30% 20%, #2a63c4, #0a2050); }
.news2__img svg.bdg { width: 40px; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.news2__img i { position: absolute; left: 8px; top: 8px; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .12em; padding: 3px 7px; border-radius: 99px; background: var(--coral); color: #fff; }
.news2__c small { display: flex; align-items: center; gap: 5px; padding: 8px 10px 2px; font-size: 10px; color: var(--app-mut); font-weight: 600; }
.news2__c small b { width: 6px; height: 6px; border-radius: 50%; background: #3f8f3a; }
.news2__c strong { display: block; padding: 0 10px; font-size: 12.5px; line-height: 1.3; }
.qod { border-radius: 20px; padding: 14px 12px 12px; background: #1d2127; color: #fff; text-align: center; border: 2.5px solid var(--coral); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 13px); }
.qod > small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; color: var(--coral); margin-bottom: 7px; }
.qod > b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; }
.qod > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.qod span { position: relative; border: 2px solid var(--coral); border-radius: 12px; padding: 8px 0; font-weight: 800; font-size: 12px; }
.scene.on .qod__ok { animation: qzOk .45s ease 1.2s forwards; }
.qod__res { display: block; margin-top: 9px; font-style: normal; font-size: 11px; color: rgba(255,255,255,.6); }
.scene.on .qod__res { color: #a8dc92; transition: color .4s 1.5s; }

/* 12:30 · LOGE XI à l'échelle de l'app */
.sc__body--xi { padding-bottom: 0; gap: 8px; overflow: hidden; }
.xih2 { position: relative; overflow: hidden; border-radius: 22px; padding: 10px 12px 12px; color: #fff; background: linear-gradient(120deg, #7aa866, #3b5a48 70%, #2a3a36); flex: none; }
.xih2__wm { position: absolute; right: -4px; top: -10px; font: 400 104px/1 var(--f-num); color: rgba(20,30,25,.3); }
.xih2__top { position: relative; display: flex; align-items: center; gap: 7px; }
.xih2__back { width: 28px; height: 28px; border-radius: 50%; background: rgba(12,20,16,.3); display: grid; place-items: center; }
.xih2__back svg { width: 14px; height: 14px; }
.xih2 .xih__chip { font-size: 11px; padding: 4px 9px 4px 4px; }
.xih2 .xih__chip i { width: 17px; height: 17px; } .xih2 .xih__chip svg { width: 11px; height: 11px; }
.home .xih2 h4 { position: relative; font: 400 34px/1 var(--f-num); letter-spacing: .01em; margin: 8px 0 2px; color: #fff; }
.xih2 p { position: relative; margin: 0; font-size: 11px; font-weight: 600; opacity: .92; }
.xtabs { display: flex; gap: 6px; flex: none; }
.xtabs span { padding: 6px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: var(--app-mut); background: #fff; border: 1px solid var(--app-line); }
.xtabs span.on { color: #5a8a48; border: 1.5px solid #88b870; background: #eef6e8; }
.xpitch { position: relative; flex: 1; min-height: 250px; margin: 0 -12px; border-radius: 20px 20px 0 0; overflow: hidden; background: repeating-linear-gradient(180deg, #2f8a3e 0 34px, #2a7d37 34px 68px); }
.xpitch svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.xpitch svg.lines * { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.6; }
.xk { position: absolute; left: var(--x); top: var(--y); width: 86px; margin-left: -43px; display: grid; justify-items: center; }
.xk__halo { position: absolute; top: -4px; left: 50%; width: 70px; height: 70px; margin-left: -35px; border-radius: 50%; background: radial-gradient(circle, rgba(232,208,96,.32), rgba(232,208,96,.08) 60%, transparent 70%); }
.xk svg.jsy { position: relative; width: 58px; height: auto; filter: drop-shadow(0 8px 8px rgba(0,0,0,.35)); }
.xk b { position: relative; margin-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: .05em; color: #fff; padding: 3px 9px; border-radius: 9px; background: #1b2420; border: 1px solid rgba(255,255,255,.1); }
.xk--cap .xk__halo { box-shadow: 0 0 0 2px var(--gold); }
.scene.on .xk--cap .xk__halo { animation: capRing 1.2s ease 1s both; }
@keyframes capRing { from { box-shadow: 0 0 0 0 var(--gold); } to { box-shadow: 0 0 0 2.5px var(--gold), 0 0 18px 2px rgba(232,208,96,.55); } }
.xcap { position: absolute; left: 12px; right: 12px; bottom: 74px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 16px; background: #faf3dc; border: 1.5px solid #e9d793; opacity: 0; transform: translateY(10px); }
.scene.on .xcap { animation: up .5s var(--ease-out) 1.4s forwards; }
.xcap span { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #8a6a00; }
.xcap b { font-size: 13px; }

/* 15:30 · pronos de la loge */
.scale3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: none; }
.scale3 div { border-radius: 13px; padding: 6px 4px; text-align: center; border: 1px solid; }
.scale3 b { display: block; font: 400 20px/1 var(--f-num); }
.scale3 span { font-size: 9.5px; font-weight: 700; color: #4a4f55; }
.scale3 .g { background: #88b8701c; border-color: #88b87066; } .scale3 .g b { color: #5a9a3e; }
.scale3 .y { background: #e8d0601c; border-color: #e8d06066; } .scale3 .y b { color: #b8961c; }
.scale3 .c { background: #e868481c; border-color: #e8684866; } .scale3 .c b { color: var(--coral); }
.umc { border-radius: 18px; border: 1px solid var(--app-line); background: #fff; overflow: hidden; flex: none; }
.umc--mine { border-color: #2a8fd088; }
.umc__h { display: flex; align-items: center; gap: 6px; padding: 9px 12px 0; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--app-mut); }
.umc__h span:nth-child(2) { flex: 1; }
.umc__t { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 8px 12px 10px; }
.umc__t > div { display: grid; justify-items: center; gap: 5px; }
.umc__t svg.bdg { width: 34px; height: auto; }
.umc__t b { font-size: 12px; white-space: nowrap; }
.umc__time { font: 400 20px/1 var(--f-num); padding: 6px 10px; border-radius: 10px; background: var(--app-sunk); }
.umc__f { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--app-line); }
.umc__f > div { flex: 1; min-width: 0; }
.umc__f span:first-child, .umc__f > div > span { display: block; font-size: 11px; color: #4a4f55; }
.umc__f small { font-size: 10px; color: var(--app-mut); }
.umc__mine { display: grid; justify-items: center; padding: 3px 10px; border-radius: 12px; border: 1.5px solid #2a8fd0; background: #2a8fd018; }
.umc__mine small { font-size: 8.5px; font-weight: 800; letter-spacing: .1em; color: var(--app-mut); }
.umc__mine b { font: 400 17px/1.1 var(--f-num); }
.umc__btn { position: relative; padding: 8px 13px; border-radius: 12px; background: #2a8fd0; color: #fff; font-size: 12px; font-weight: 700; }

/* Écrans verrouillés : ciel du soir puis nuit de stade */
.scene--dusk { background: radial-gradient(90% 60% at 30% 10%, rgba(232,104,72,.6), transparent 60%), radial-gradient(80% 60% at 90% 90%, rgba(139,92,246,.5), transparent 60%), linear-gradient(180deg, #3a1d3e, #120e1e); }
.scene--night { background: radial-gradient(60% 40% at 20% 0%, rgba(255,255,255,.25), transparent 60%), radial-gradient(60% 40% at 80% 0%, rgba(255,255,255,.2), transparent 60%), linear-gradient(180deg, #102a1c 0%, #0b1a12 55%, #06100b 100%); }
.lnotif__app { width: 38px; height: 38px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; padding: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.lnotif__app img { width: 100%; height: auto; display: block; }
.lnotif small span:first-child { font-weight: 800; letter-spacing: .02em; opacity: .95; }

/* 22:50 · classement de loge (onglet Classement) */
.sc__title b { display: block; font-size: 19px; font-weight: 800; }
.sc__title small { display: block; font-size: 11px; color: var(--app-mut); margin-top: 2px; }
.seg4 { display: flex; padding: 3px; border-radius: 14px; background: var(--app-sunk); flex: none; }
.seg4 span { flex: 1; text-align: center; padding: 7px 0; border-radius: 11px; font-size: 11px; font-weight: 700; color: var(--app-mut); }
.seg4 span.on { background: #fff; color: var(--app-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.lr { position: relative; display: grid; grid-template-columns: 24px 30px 1fr auto; gap: 9px; align-items: center; padding: 9px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--app-line); flex: none; }
.lr > b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 400 15px/1 var(--f-num); background: var(--app-sunk); }
.lr > b.r1 { background: var(--gold); } .lr > b.r2 { background: #48b4c8; }
.lr .av { width: 30px; height: 30px; border-radius: 50%; }
.lr .av--me { background: conic-gradient(from 0deg, #fff1b8, #e8d060, #c9952b, #fff1b8); box-shadow: inset 0 0 0 3px #fff; }
.lr strong { display: block; font-size: 13.5px; }
.lr small { font-size: 10px; color: var(--app-mut); }
.lr em { font: 400 24px/1 var(--f-num); font-style: normal; }
.lr.me { border: 2px solid #2fa6e0; }
.lr .pop { position: absolute; right: 12px; top: -9px; font-style: normal; font: 400 13px/1 var(--f-num); padding: 3px 7px; border-radius: 8px; background: var(--gold); color: #2c2205; opacity: 0; transform: translateY(6px) scale(.6); }
.scene.on .lr .pop { animation: popIn .5s var(--ease-spring) 1s forwards; }
@keyframes popIn { to { opacity: 1; transform: none; } }

/* 23:10 · page du match terminé */
.mh2 { position: relative; flex: none; padding: 0 12px 12px; color: #fff; background: linear-gradient(135deg, #c8102ec8 0%, #c8102e55 45%, #0b3d9155 55%, #0b3d91c8 100%), linear-gradient(180deg, #1d1f26, #0e0f13); }
.mh2::before, .mh2::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; opacity: .85; }
.mh2::before { left: 0; background: #c8102e; } .mh2::after { right: 0; background: #0b3d91; }
.mh2__top { display: flex; align-items: center; gap: 8px; }
.mh2__top > i { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.mh2__top svg { width: 14px; height: 14px; color: #fff; }
.mh2__comp { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 9px; font-weight: 800; letter-spacing: .14em; color: var(--gold); padding: 6px 10px; border-radius: 99px; background: rgba(0,0,0,.28); }
.mh2__rib { display: block; width: max-content; margin: 9px auto 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; padding: 4px 11px; border-radius: 99px; background: #1F8A5B; border: 1px solid rgba(245,242,236,.35); }
.mh2__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; text-align: center; }
.mh2__row > div { display: grid; justify-items: center; gap: 5px; }
.mh2__ring { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.mh2__ring svg.bdg { width: 30px; height: auto; }
.mh2__row b { font-size: 12px; font-weight: 800; }
.mh2__board { padding: 6px 14px 7px; border-radius: 16px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); }
.mh2__board strong { display: flex; align-items: baseline; gap: 4px; font: 400 40px/1 var(--f-num); }
.mh2__board strong i { font-style: normal; font-size: 22px; opacity: .45; }
.mh2__board small { display: block; font-size: 9.5px; opacity: .55; }
.dock4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 8px 10px 0; flex: none; }
.dock4 span { display: grid; justify-items: center; gap: 3px; padding: 7px 0; border-radius: 12px; font-size: 10px; font-weight: 800; color: #fff; }
.dock4 svg { width: 15px; height: 15px; }
.dock4 .g { background: linear-gradient(160deg, #1F8A5B, #0F3D2E); } .dock4 .c { background: linear-gradient(160deg, #e86848, #b2402c); } .dock4 .b { background: linear-gradient(160deg, #48b4c8, #2a6a7a); } .dock4 .y { background: linear-gradient(160deg, #c9a32b, #9a7a18); }
.dock4 span:not(.on) { opacity: .55; }
.vcard { position: relative; overflow: hidden; border-radius: 18px; padding: 12px 12px 12px 16px; background: #FFFEFB; border: 1px solid rgba(26,20,8,.08); }
.vcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #7B5CD8; }
.vcard > small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .14em; color: #7B5CD8; }
.vcard > b { display: block; font-size: 15px; font-weight: 800; margin-top: 2px; }
.vcard__sub { display: block; font-size: 11px; color: var(--app-mut); margin-top: 2px; }
.vcard__rk { display: grid; grid-template-columns: 18px 56px 1fr 34px; gap: 6px; align-items: center; margin-top: 7px; font-size: 11.5px; }
.vcard__rk .t svg { width: 13px; height: 13px; color: var(--gold); }
.vcard__rk span { font: 400 13px/1 var(--f-num); color: var(--app-mut); }
.vcard__rk em { font-style: normal; font-weight: 700; }
.vcard__rk i { height: 7px; border-radius: 9px; background: rgba(26,20,8,.07); overflow: hidden; }
.vcard__rk u { display: block; height: 100%; width: 0; background: #7B5CD8; transition: width 1.2s var(--ease-out) .4s; }
.scene.on .vcard__rk u { width: var(--w); }
.vcard__rk b { font: 400 14px/1 var(--f-num); text-align: right; }
.nom > small { display: block; margin: 12px 0 10px; font-size: 9px; font-weight: 800; letter-spacing: .12em; color: var(--app-mut); }
.nom > div { display: flex; gap: 6px; align-items: flex-end; }
.nom__c { position: relative; flex: 1; display: grid; justify-items: center; gap: 2px; padding: 10px 2px 8px; border-radius: 14px; border: 1.5px solid rgba(26,20,8,.1); background: rgba(26,20,8,.03); }
.nom__c svg.jsy { width: 52px; height: auto; }
.nom__c b { font-size: 11px; }
.nom__c em { font-style: normal; font: 400 13px/1 var(--f-num); color: var(--app-mut); }
.nom__c.on { border-color: #c8102e; background: #c8102e14; transform: translateY(-6px); }
.nom__c.on b { color: #c8102e; }
.crown { position: absolute; top: -10px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; z-index: 2; }
.crown svg { width: 12px; height: 12px; color: #14181c; }
/* « Mes joueurs » de l'accueil, comme dans l'app */
.mcards--pl { flex-direction: row !important; gap: 7px; }
.mj { position: relative; overflow: hidden; flex: 1; min-width: 0; display: grid; justify-items: center; padding: 8px 4px 9px; border-radius: 16px; border: 2.25px solid var(--edge); background: linear-gradient(165deg, var(--g1), var(--g2)); }
.mj svg.jsy { position: relative; z-index: 1; width: 62px; height: auto; }
.mj b { position: relative; z-index: 1; font-size: 12.5px; margin-top: 2px; }
.mj small { position: relative; z-index: 1; font-size: 10.5px; color: var(--app-mut); }
.mj__wm { position: absolute; right: -14px; bottom: -14px; opacity: .22; }
.mj__wm svg.bdg { width: 52px; height: auto; }
/* Notifications du haut de page : elles s'effacent dès qu'on touche l'écran */
.float { transition: transform .5s var(--ease-out), opacity .45s ease; }
.float.is-gone { opacity: 0 !important; pointer-events: none; }
@media (max-width: 960px) { .hx .float { display: none; } }
/* Loges : les cartes « Mes loges » à côté du téléphone, jamais par-dessus */
#loges .ch__art { display: flex; align-items: center; justify-content: center; gap: 18px; }
.lgstack { display: grid; gap: 12px; width: 196px; flex: none; }
.lgstack > small { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--muted); }
.lgstack .lc { position: relative; inset: auto; width: 100%; transform: none; }
.lgstack .lc:nth-of-type(1) { transform: rotate(-2deg); } .lgstack .lc:nth-of-type(2) { transform: rotate(2deg); }
.lgstack .lc__in { min-height: 132px; }
.lgstack__new { display: grid; place-items: center; height: 56px; border-radius: 20px; border: 2px dashed var(--line-strong); font-size: 13px; font-weight: 700; color: var(--muted); }
@media (max-width: 1180px) { #loges .ch__art { flex-direction: column; } .lgstack { width: 100%; max-width: 520px; grid-template-columns: 1fr 1fr; } .lgstack > small, .lgstack__new { display: none; } .lgstack .lc { transform: none !important; } }
@media (max-width: 1180px) { .lgstack .lc--b { display: block; } }
@media (max-width: 520px) { .lgstack { gap: 8px; } .lgstack .lc__in { min-height: 112px; padding: 10px; } .lgstack .lc__name { font-size: 20px; } .lgstack .lc__last { display: none; } .lgstack .lc__ring { width: 38px; height: 38px; } .lgstack .lc__ring svg.bdg { width: 24px; } }
/* Terrain LOGE XI : halo derrière chaque joueur, capitaine en anneau doré (comme dans l'app) */
.pl__halo { position: absolute; top: -6px; left: 50%; width: 76px; height: 76px; margin-left: -38px; border-radius: 50%; background: radial-gradient(circle, rgba(232,208,96,.30), rgba(232,208,96,.08) 60%, transparent 70%); }
.pl svg.jsy { position: relative; }
.pl > b { position: relative; }
.xip .pl--cap::before { display: none; }
.xip .pl--cap .pl__halo { box-shadow: 0 0 0 2.5px var(--gold), 0 0 18px 2px rgba(232,208,96,.5); }
@media (max-width: 520px) { .pl__halo { width: 58px; height: 58px; margin-left: -29px; } }
.arena-cut { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 8px 10px; margin: -10px -12px 0; border-radius: 0 0 24px 24px; background: #1b1f26; flex: none; }
.arena-cut .at { min-height: 92px; border-radius: 16px; padding: 9px 9px 10px; }
.arena-cut .at .at__ico { left: 9px; top: 9px; width: 26px; height: 26px; border-radius: 9px; }
.arena-cut .at .at__ico svg { width: 14px; height: 14px; }
.arena-cut .at b { font-size: 17px; }
.arena-cut .at > span:not(.at__ico) { font-size: 9.5px; }
.sc__body--home { justify-content: flex-start; }
.day2__copy { text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.day2[data-sky="matin"] { --skybg: linear-gradient(180deg, #b9784a 0%, #6a5486 30%, #232848 62%, #0c0d10 100%); }
.day2[data-sky="midi"]  { --skybg: linear-gradient(180deg, #3f7fb8 0%, #2f5a92 34%, #182540 66%, #0c0d10 100%); }
.day2[data-sky="aprem"] { --skybg: linear-gradient(180deg, #b98042 0%, #96534a 32%, #33253f 64%, #0c0d10 100%); }
.day2[data-sky="soir"]  { --skybg: linear-gradient(180deg, #9a4064 0%, #4a3168 32%, #18183a 64%, #0c0d10 100%); }
.day2 .kicker { color: #ffb59a; }
.news2 { flex: none; }
.news2__c strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.xtabs span { white-space: nowrap; }
.lgh--sm { height: 146px; }
.lgh--sm .lgh__btns { top: 44px; }
.lgh--sm .lgh__btns i { width: 28px; height: 28px; }
/* icône d'app dans les notifications : carré sombre, mot LOGE lisible en entier */
.lnotif__app { width: 40px; height: 40px; border-radius: 10px; padding: 0; background: radial-gradient(120% 90% at 30% 15%, #2a3138, #0e1114 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35); position: relative; }
.lnotif__app::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #E8735A, #E9B949); }
.lnotif__app .wordmark { font-size: 11px; letter-spacing: -.03em; color: #fff; line-height: 1; margin-top: -3px; }
.lnotif__app .wordmark b { color: #E8735A; }
.lnotif .lnotif__app .wordmark b { display: inline; font-size: inherit; color: #E8735A; }
.lnotif__app { display: grid; place-content: center; gap: 0; }
.lnotif__app::after { display: none; }
.lnotif__app i { display: block; font: 800 14px/0.86 "Syne", var(--f-ui); font-style: normal; letter-spacing: -.02em; color: #fff; text-align: center; transform: scaleY(1.12); }
.lnotif__app i + i { color: #E8735A; }
/* accueil du héros : « Mes joueurs » fait défiler l'écran sous l'en-tête fixe */
.hx .screen > .sbar, .hx .screen > .ah { position: relative; z-index: 4; background: var(--app-bg, #f5f2ec); }
.hx .screen > .asec, .hx .screen > .carousel, .hx .screen > .seg, .hx .screen > .mcards { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.hx .screen.is-scrolled > .asec, .hx .screen.is-scrolled > .carousel, .hx .screen.is-scrolled > .seg, .hx .screen.is-scrolled > .mcards { transform: translateY(-112px); }
/* loges : l'indication au-dessus du téléphone, la pile « Mes loges » à côté, rien ne recouvre l'écran */
#loges .ch__art { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; column-gap: 22px; }
#loges .ch__art > .try { grid-column: 1; grid-row: 1; justify-self: center; }
#loges .ch__art > .phone { grid-column: 1; grid-row: 2; }
#loges .ch__art > .lgstack { grid-column: 2; grid-row: 2; }
@media (max-width: 1180px) { #loges .ch__art { grid-template-columns: minmax(0, 1fr); row-gap: 18px; } #loges .ch__art > .lgstack { grid-column: 1; grid-row: 3; justify-self: center; } }
.lgstack .lc { border: 3px solid #0c0d10; border-radius: 22px; }
.lgstack .lc__in { min-height: 150px; padding: 12px; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(8,9,12,.82) 78%); }
.lgstack .lc__pills { position: absolute; top: 12px; right: 10px; margin: 0; }
.lgstack .lc__name { font-size: 26px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.lgstack .lc__ring { width: 44px; height: 44px; }
/* terrain de la scène LOGE XI : à l'échelle fixe (le terrain continue sous la barre, comme quand on fait défiler l'app) */
.xpitch svg.lines { height: auto; bottom: auto; aspect-ratio: 300 / 520; }
.xpitch { background: repeating-linear-gradient(180deg, #2f8a3e 0 40px, #2a7d37 40px 80px); }
@media (max-width: 520px) { .lgstack .lc__in { min-height: 112px; } .lgstack .lc__pills { display: none; } .lgstack .lc__name { font-size: 21px; } }
.lgstack .lc--a, .lgstack .lc--b { margin: 0; width: 100%; z-index: 1; }
/* icône d'app des notifications : LOGE en une fois, aux couleurs de l'en-tête de l'app (LO noir, GE corail, fond clair) */
.lnotif__app { display: grid; place-items: center; background: #f5f2ec; box-shadow: inset 0 0 0 1px rgba(20,24,28,.08), 0 2px 6px rgba(0,0,0,.3); }
.lnotif .lnotif__app .wordmark { font-size: 8.2px; letter-spacing: -.035em; color: #14181c; margin: 0; }
.lnotif .lnotif__app .wordmark b { display: inline; font-size: inherit; color: #E8735A; }
.lnotif__app { width: 42px; height: 42px; }
.lnotif .lnotif__app .wordmark { font-size: 8px; }

/* ===== Loges : changer de décor en touchant une loge ===== */
.lgh__bg { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
.lgh__bg.on { opacity: 1; }
.lgh__ring { position: relative; }
.lgh__b { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.55) rotate(-20deg); transition: opacity .35s, transform .5s var(--ease-out); }
.lgh__b.on { opacity: 1; transform: none; }
.lgh__id > div { transition: opacity .18s, transform .18s; }
.lgh.is-swap .lgh__id > div { opacity: 0; transform: translateY(6px); }
#loges .screen { --lg-acc: #2a8fd0; }
#loges .ltabs span.on { box-shadow: inset 0 -3px 0 var(--lg-acc); transition: box-shadow .4s; }
#loges .bub--me p { background: var(--lg-acc); transition: background .4s; }
#loges .sharecard { transition: border-color .4s; }
.lgstack .lc { appearance: none; -webkit-appearance: none; display: block; padding: 0; margin: 0; font: inherit; text-align: left; color: #fff; cursor: pointer; }
.lgstack .lc.lc { transform: none; transition: transform .25s var(--ease-out), box-shadow .25s; }
.lgstack .lc.lc:hover { transform: translateY(-3px); }
.lgstack .lc__name, .lgstack .lc__last { display: block; }
.lgstack .lc__in { min-height: 124px; }
.lgstack .lc.is-on { box-shadow: 0 0 0 3px var(--surface, #fff), 0 0 0 6px var(--acc), 0 24px 44px -22px rgba(0,0,0,.6); }
.lgstack .lc.is-on::after { content: ""; position: absolute; top: 10px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--acc); }
.lgstack .lc:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.lgstack__hint { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.lgstack__hint i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.lgstack__hint i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: ping 1.8s var(--ease-out) infinite; }
@media (max-width: 1180px) {
  .lgstack { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
  .lgstack > small { display: none; }
  .lgstack__hint { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 520px) {
  .lgstack .lc__in { min-height: 96px; padding: 8px; }
  .lgstack .lc__name { font-size: 15px; }
  .lgstack .lc__ring { width: 30px; height: 30px; left: 8px; top: 8px; }
  .lgstack .lc__ring svg.bdg { width: 19px; }
  .lgstack .lc.is-on::after { top: 8px; }
}

/* ===== Chat du match : avant, pendant, après ===== */
.mchat { width: 100%; max-width: 560px; display: grid; gap: 10px; }
.mchat__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 18px; color: #fff; background: linear-gradient(115deg, #b3263a, #3a2a52 52%, #0B3D91); font-weight: 800; font-size: 13px; }
.mchat__top span { display: flex; align-items: center; gap: 7px; }
.mchat__top svg.bdg { width: 22px; height: auto; }
.mchat__top b { font: 400 24px/1 var(--f-num); letter-spacing: .04em; padding: 3px 10px; border-radius: 10px; background: rgba(255,255,255,.14); }
.mchat__ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mchat__ph button { appearance: none; border: 1.5px solid var(--app-line); background: var(--app-card); border-radius: 14px; padding: 8px 6px; font: 800 12.5px/1.15 var(--f-ui); color: var(--app-mut); cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .15s; }
.mchat__ph button small { display: block; font: 400 15px/1 var(--f-num); letter-spacing: .04em; margin-bottom: 3px; }
.mchat__ph button.on { background: #14181c; border-color: #14181c; color: #fff; }
.mchat__ph button.on small { color: var(--coral); }
.mchat__ph button:active { transform: scale(.97); }
.mchat__line { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; height: 22px; align-items: end; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--app-mut); text-align: center; }
.mchat__line::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #e8a24a 0 33.3%, #e86848 33.3% 66.6%, #8b5cf6 66.6%); opacity: .25; }
.mchat__line i { position: absolute; top: 4px; left: 0; height: 4px; border-radius: 4px; width: var(--p, 16%); background: linear-gradient(90deg, #e8a24a, #e86848 50%, #8b5cf6); transition: width .8s var(--ease-out); }
.mchat__line i::after { content: ""; position: absolute; right: -5px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #e86848, 0 2px 6px rgba(0,0,0,.25); }
.mchat__box { position: relative; border-radius: 22px; background: var(--app-bg); border: 1px solid var(--app-line); padding: 12px 12px 0; overflow: hidden; }
.mchat__pane { display: none; }
.mchat__pane.on { display: block; }
.mchat__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mchat__h small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--coral); }
.mchat__h b { display: block; font-size: 15px; font-weight: 800; }
.mchat__h em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: #1F8A5B; padding: 5px 9px; border-radius: 99px; background: rgba(31,138,91,.1); }
.mchat__h em i { width: 7px; height: 7px; border-radius: 50%; background: #1F8A5B; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.mchat__meta { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 8px; font-size: 11px; font-weight: 700; color: var(--app-mut); }
.mchat__msgs { display: grid; gap: 7px; min-height: 150px; align-content: end; }
.mm { margin: 0; display: flex; align-items: flex-end; gap: 7px; }
.mm__av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; }
.mm__b { max-width: 82%; padding: 7px 11px; border-radius: 16px 16px 16px 6px; background: var(--app-card); border: 1px solid var(--app-line); font-size: 12.5px; line-height: 1.35; }
.mm__b small { display: block; font-size: 10px; font-weight: 800; color: var(--app-mut); margin-bottom: 1px; }
.mchat__pane.on .mm { animation: msgIn .5s var(--ease-out) both; animation-delay: calc(var(--i) * .35s + .1s); }
.mchat__in { margin: 10px -12px 0; border-top: 1px solid var(--app-line); background: var(--app-card); padding-top: 8px; }
.mchat__in .quick { padding: 0 12px 6px; display: flex; gap: 6px; overflow: hidden; }
.mchat__in .lin { padding: 2px 12px 12px; }
@media (max-width: 640px) { .mchat__meta span:last-child { text-align: right; } .mchat__msgs { min-height: 170px; } }

/* ===== Actus ===== */
.nws { width: 100%; max-width: 340px; border-radius: 22px; background: var(--app-bg); border: 1px solid var(--app-line); padding: 12px; display: grid; gap: 8px; }
.nws__h b { display: block; font-size: 18px; font-weight: 800; }
.nws__h small { font-size: 11px; color: var(--app-mut); font-weight: 600; }
.nws__tabs { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.nws__tabs::-webkit-scrollbar { display: none; }
.nws__tabs span { flex: none; padding: 6px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; color: var(--app-mut); background: var(--app-sunk); cursor: pointer; transition: background .2s, color .2s; }
.nws__tabs span.on { background: #14181c; color: #fff; }
.nws__list { display: none; gap: 7px; }
.nws__list.on { display: grid; }
.nws__list.on .nws__it { animation: msgIn .45s var(--ease-out) both; }
.nws__list.on .nws__it:nth-child(2) { animation-delay: .07s; } .nws__list.on .nws__it:nth-child(3) { animation-delay: .14s; }
.nws__it { display: flex; gap: 9px; align-items: center; padding: 7px; border-radius: 14px; background: var(--app-card); border: 1px solid var(--app-line); }
.nws__th { width: 46px; height: 46px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #f2dbe1, #d4e0f1); }
.nws__th--1 { background: linear-gradient(135deg, #e5f1ea, #f1eef6); } .nws__th--2 { background: linear-gradient(135deg, #fbefd9, #f2e2e6); }
.nws__th svg.bdg { width: 28px; height: auto; }
.nws__it b { display: block; font-size: 12.5px; line-height: 1.3; font-weight: 800; }
.nws__it small { display: block; font-size: 10.5px; color: var(--app-mut); margin-top: 2px; font-weight: 600; }
.nws__it em { font-style: normal; display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .1em; color: #8a6a00; background: #faf3dc; border-radius: 6px; padding: 2px 6px; margin-bottom: 3px; }

/* ===== Vidéos (bientôt) ===== */
.tile--6 { grid-column: span 6; }
.tile--vid { flex-direction: row; align-items: stretch; background: #0e1014; border-color: #0e1014; color: #f3f1ee; }
.tile--vid .tile__demo { flex: 1.5; min-height: 300px; padding: 26px; }
.tile--vid .tile__txt { flex: 1; align-self: center; padding: 28px 34px 28px 6px; }
.tile--vid p { color: rgba(243,241,238,.72); }
.tile--vid .tile__k { color: #E8735A; }
.vids { width: 100%; display: grid; gap: 14px; }
.vids__tag { justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #E9B949; padding: 6px 11px; border-radius: 99px; border: 1px solid rgba(233,185,73,.35); }
.vids__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vid { position: relative; aspect-ratio: 9 / 16; max-height: 300px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 70% at 30% 20%, var(--v1), var(--v2) 75%); box-shadow: 0 20px 40px -24px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .4s var(--ease-out); }
.vid::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px), linear-gradient(180deg, transparent 45%, rgba(0,0,0,.75)); }
.vid:nth-child(even) { transform: translateY(14px); }
.tile--vid:hover .vid { transform: translateY(-4px); } .tile--vid:hover .vid:nth-child(even) { transform: translateY(8px); }
.vid__soon { position: absolute; top: 9px; right: 9px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #14181c; background: #E9B949; border-radius: 6px; padding: 3px 6px; }
.vid__play { position: absolute; left: 50%; top: 42%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.vid__play svg { width: 18px; height: 18px; color: #fff; margin-left: 2px; }
.vid__meta { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 3px; }
.vid__by { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; opacity: .9; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid__by i { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #14181c; font-style: normal; font-size: 9px; font-weight: 800; }
.vid__meta b { font-size: 12px; line-height: 1.25; font-weight: 800; }
.vid__meta small { font: 400 13px/1 var(--f-num); letter-spacing: .05em; opacity: .75; }
@media (max-width: 980px) {
  .tile--6 { grid-column: span 2; }
  .tile--vid { flex-direction: column; }
  .tile--vid .tile__txt { padding: 6px 28px 28px; align-self: stretch; }
}
@media (max-width: 640px) {
  .tile--6 { grid-column: span 1; }
  .vids__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 16px; }
  .vids__row::-webkit-scrollbar { display: none; }
  .vid { scroll-snap-align: start; }
  .tile--vid .tile__demo { padding: 22px 16px 6px; min-height: 0; }
  .tile--vid .tile__txt { padding: 4px 22px 24px; }
}
@keyframes mmIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.mchat__pane.on .mm { animation-name: mmIn; }
.nws__list.on .nws__it { animation-name: mmIn; }
@media (prefers-reduced-motion: reduce) { .mchat__pane.on .mm, .nws__list.on .nws__it { animation: none; } }
.mchat__line { height: 30px; }

/* --- Lien « Se connecter » / « Mon compte » sur l'en-tête sombre de l'accueil --- */
.home .acct { color: var(--night-ink); border-color: var(--night-line-2); }
.home .acct:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.32); }
.home .acct__ico { background: var(--night-ink); color: var(--night); }
.home .acct.is-in .acct__ico { background: var(--coral); color: #fff; }

/* Lien Résultats de l'en-tête (à gauche du logo) sur fond nuit */
.home .head__res { background: rgba(255,255,255,.06); border-color: var(--night-line-2); color: var(--night-ink); }
.home .head__res:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32); }
.home .head__sep { background: var(--night-line-2); }