/* Heatly — portail public (P7) : Découvrir, Compétitions, Classements, Calendrier, page d'événement.
   S'ajoute à portal.css (jetons, boutons, champs). Dark premium : noir charbon, gris chauds, l'orange réservé à la
   marque et à ce qui est actif ou important. Le globe vit dans un calque de fond plein écran (.globeLayer). */
:root {
  --s-bg: #09090a; --s-surface: #111113; --s-surface2: #161619; --s-line: #222226; --s-line2: #2e2e34;
  --s-ink: #f4f4f6; --s-ink2: #c9c9cf; --s-dim: #8d8d96; --s-faint: #5f5f68;
  --s-radius: 14px; --s-radius-sm: 10px; --s-gap: clamp(20px, 2.2vw, 40px); --s-pad: clamp(24px, 4.2vh, 64px);
  --s-head: 60px; --s-focus: 0 0 0 3px #f26a1f55;
}
[hidden] { display: none !important; }
body.site { background: var(--s-bg); min-height: 100vh; display: flex; flex-direction: column; color: var(--s-ink); }
.siteMain { position: relative; z-index: 1; flex: 1; }
body.discover .siteMain { pointer-events: none; }   /* sur Découvrir, le fond (globe) reçoit les gestes ; les composants les reprennent ci-dessous */
:where(body.site) :focus-visible { outline: none; box-shadow: var(--s-focus); }

/* ------------------------------------------------------------ calque du globe (fond de page, ordinateur) */
.globeLayer { position: fixed; top: var(--s-head); left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; }
body:not(.discover) .globeLayer { display: none; }
.globe3d { position: absolute; inset: 0; }
.globeCanvas { display: block; outline: none; }
.globeOverlay { position: absolute; inset: 0; pointer-events: none; }
.globeCanvas:focus-visible { box-shadow: none; }

/* ------------------------------------------------------------ en-tête */
.ptop { gap: 36px; background: #09090acc; border-bottom-color: var(--s-line); z-index: 20; }
.pnav { display: flex; gap: 4px; height: 100%; }
.pnav a { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--s-dim); font-weight: 600; font-size: 14.5px; border-bottom: 2px solid transparent; text-decoration: none !important; transition: color .15s; }
.pnav a:hover { color: var(--s-ink); }
.pnav a.on { color: var(--s-ink); border-bottom-color: var(--accent); }
.pnav a.on .ic { color: var(--accent2); }
.pnav a .ic { width: 17px; height: 17px; }
.pright { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pright .auth { display: flex; gap: 10px; align-items: center; }
.pright .btn.ghost { border-color: var(--s-line2); color: var(--s-ink); }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #2a1d15; color: var(--accent2); font-weight: 800; }
.langSw { display: inline-flex; border: 1px solid var(--s-line2); border-radius: 8px; overflow: hidden; }
.langSw button { border: 0; background: transparent; color: var(--s-dim); font-size: 12px; font-weight: 700; padding: 5px 8px; }
.langSw button.on { background: var(--s-surface2); color: var(--s-ink); }
.burger { display: none; }

/* ------------------------------------------------------------ Découvrir : trois zones sur toute la hauteur */
.disc { position: relative; display: grid; grid-template-columns: minmax(440px, 640px) minmax(380px, 1fr) minmax(340px, 420px);
  gap: var(--s-gap); padding: var(--s-pad) clamp(24px, 3vw, 64px); max-width: 1960px; margin: 0 auto; min-height: calc(100vh - var(--s-head)); align-items: start;
  pointer-events: none; }                                    /* les clics traversent jusqu'au globe… */
.disc > .dLeft, .dPanel, .gCtl, .gRegion, .gMsg { pointer-events: auto; }   /* …sauf sur les composants */
.dGlobe { position: sticky; top: calc(var(--s-head) + var(--s-pad)); height: calc(100vh - var(--s-head) - 2 * var(--s-pad)); min-height: 460px; container-type: size; }
.gBox { position: absolute; inset: 0; }
.disc.noGlobe { grid-template-columns: minmax(420px, 1fr) minmax(320px, 410px); pointer-events: auto; }
.disc.noGlobe .dGlobe { display: none; }
.disc.flat .dGlobe, .disc.flat { pointer-events: auto; }
.hero { font-size: clamp(38px, 2.6vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; }
.hero .dot { color: var(--accent); }
.hero.small { font-size: clamp(30px, 2.8vw, 44px); }
.lead { color: var(--s-ink2); font-size: clamp(15.5px, 1vw, 17.5px); line-height: 1.55; margin: 18px 0 30px; max-width: 540px; }

.sbar { display: flex; gap: 10px; align-items: stretch; }
.sfield { position: relative; flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 18px; border: 1px solid var(--s-line2); border-radius: 12px;
  background: #121214e6; backdrop-filter: blur(8px); transition: border-color .15s, box-shadow .15s; }
.sfield:hover { border-color: #3d3d44; }
.sfield:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px #f26a1f1f; }
.sfield .ic { color: var(--s-dim); width: 20px; height: 20px; }
.sfield input { border: 0; background: transparent; padding: 16px 0; font-size: 15.5px; box-shadow: none !important; color: var(--s-ink); }
.sfield input:focus { outline: none; }
.fbtn { border-color: var(--s-line2) !important; color: var(--s-ink) !important; gap: 6px; background: #121214e6 !important; border-radius: 12px !important; padding: 0 16px !important; }
.fbtn:hover { border-color: #3d3d44 !important; }
.ic.sm { width: 14px; height: 14px; }
.sugg { position: absolute; z-index: 30; left: -1px; right: -1px; top: calc(100% + 8px); list-style: none; background: var(--s-surface); border: 1px solid var(--s-line2); border-radius: 12px; padding: 6px; box-shadow: 0 24px 60px #000c; max-height: 380px; overflow: auto; }
.sugg li { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.sugg li.on, .sugg li:hover { background: var(--s-surface2); }
.sugg li span { display: grid; }
.sugg li small { color: var(--s-dim); font-size: 12.5px; }
.sugg li .ic { color: var(--s-dim); }
.sugg li.on .ic { color: var(--accent2); }
.sugg .sgHead { cursor: default; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-faint); padding: 8px 10px 4px; background: none !important; }
.sugg .sgNone { cursor: default; color: var(--s-dim); background: none !important; }
.fpanel { margin-top: 10px; padding: 18px; border: 1px solid var(--s-line2); border-radius: 12px; background: var(--s-surface); display: grid; gap: 14px; }
.fpanel fieldset { border: 0; display: grid; gap: 6px; }
.fpanel legend, .fpanel label { font-size: 13px; color: var(--s-dim); font-weight: 600; }
.fpanel .btnRow { justify-content: flex-end; }
.chipsRow { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 clamp(28px, 4.5vh, 48px); }
.fchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--s-line2); background: #121214cc; color: var(--s-ink2); border-radius: 99px; padding: 6px 13px; font-size: 13px; font-weight: 600; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.fchip:hover { border-color: #46464e; color: var(--s-ink); }
.fchip.on { border-color: #f26a1fb3; color: var(--s-ink); background: #f26a1f14; }
.fchip.on .ic { color: var(--accent2); }
.fchip .ic { width: 15px; height: 15px; }
.fchip.zone { border-color: var(--accent); }
.fchip .x { margin-left: 2px; font-size: 16px; line-height: 1; color: var(--accent2); }

.lhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.lhead h2 { font-size: 20px; letter-spacing: -.01em; }
.lhead .sub { font-size: 13.5px; margin-top: 2px; }
.sortSel { color: var(--s-dim); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sortSel select { width: auto; border: 0; background: transparent; color: var(--s-ink); font-weight: 700; padding: 4px; }

/* ------------------------------------------------------------ cartes de compétition */
.clist { list-style: none; display: grid; gap: 10px; }
.clist.grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.ccard { width: 100%; display: grid; grid-template-columns: 132px 1fr auto; gap: 16px; align-items: center; padding: 10px 14px 10px 10px; text-align: left;
  border: 1px solid var(--s-line); border-radius: var(--s-radius); background: #111113e6; backdrop-filter: blur(6px); color: var(--s-ink); text-decoration: none !important;
  transition: border-color .15s, background .15s, transform .15s; }
.ccard:hover { border-color: #3a3a42; background: #151517; }
.ccard.sel { border-color: #f26a1fcc; background: #16110e; box-shadow: 0 0 0 1px #f26a1f66; }
.ccover { width: 132px; height: 76px; border-radius: 9px; overflow: hidden; background: #19161a; display: block; }
.ccover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 75% 25%, #f26a1f26, transparent 60%), repeating-linear-gradient(135deg, #18151a 0 10px, #141215 10px 20px); }
.gen b { font-size: 24px; font-weight: 800; color: #f26a1fb3; letter-spacing: .04em; }
.cbody { display: grid; gap: 5px; min-width: 0; }
.ctop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cname { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmeta, .cstats { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--s-ink2); font-size: 13px; }
.cstats { color: var(--s-dim); font-size: 12.5px; }
.cmeta span, .cstats span { display: inline-flex; align-items: center; gap: 5px; }
.cmeta .ic, .cstats .ic { width: 14px; height: 14px; }
.chev { color: var(--s-faint); }
.pbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; flex: none; }
.pbadge .ic { width: 12px; height: 12px; }
.pbadge.live { color: var(--green); background: #3dd68c14; border: 1px solid #3dd68c33; }
.pbadge.live .ic { fill: currentColor; stroke: none; }
.pbadge.upcoming { color: #9cc3ff; background: #6aa8ff12; border: 1px solid #6aa8ff30; }
.pbadge.past { color: var(--s-dim); background: #ffffff08; border: 1px solid var(--s-line2); }
.ccard.skel .ccover, .ccard.skel i { background: linear-gradient(90deg, #17171a, #202024, #17171a); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.ccard.skel i { display: block; height: 12px; border-radius: 6px; width: 70%; }
.ccard.skel i:first-child { width: 50%; height: 16px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.lempty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: clamp(32px, 5vh, 52px) 28px; border: 1px solid var(--s-line); border-radius: var(--s-radius);
  background: linear-gradient(180deg, #131315e6, #0f0f11e6); color: var(--s-dim); backdrop-filter: blur(6px); }
.lIcon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #1a1614; border: 1px solid #2e2620; margin-bottom: 4px; }
.lIcon .ic { width: 24px; height: 24px; color: var(--accent2); }
.lempty b { color: var(--s-ink); font-size: 16.5px; }
.lempty > span:not(.lIcon):not(.btnRow) { max-width: 380px; line-height: 1.5; }
.lempty .btnRow { justify-content: center; margin-top: 8px; }
.widened { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 11px 14px; border: 1px solid var(--s-line); border-radius: var(--s-radius-sm); background: #121214e6; color: var(--s-ink2); font-size: 13.5px; }
.widened .ic { width: 16px; height: 16px; color: var(--accent2); }
.widened span { flex: 1; min-width: 200px; }
.linkBtn { border: 0; background: none; color: var(--accent2); font-weight: 600; padding: 0; }
.linkBtn:hover { text-decoration: underline; }
.lerr { padding: 24px; color: var(--red); }
.lmore { display: flex; justify-content: center; margin-top: 14px; }
.calHead { grid-column: 1 / -1; font-weight: 800; color: var(--s-ink); margin: 18px 0 2px; font-size: 15px; }
.calHead:first-child { margin-top: 0; }

/* ------------------------------------------------------------ contrôles et étiquette du globe */
.gCtl { position: absolute; top: 0; right: 0; display: grid; gap: 10px; z-index: 2; }
.gCtl .iconbtn, .gZoom { background: #111113d9; border: 1px solid var(--s-line2); color: var(--s-ink2); width: 42px; height: 42px; border-radius: 50%; backdrop-filter: blur(8px); }
.gCtl .iconbtn:hover { color: var(--s-ink); border-color: #46464e; }
.gZoom { display: grid; height: auto; border-radius: 22px; overflow: hidden; }
.gZoom .iconbtn { border: 0; border-radius: 0; background: transparent; }
.gRegion { position: absolute; left: 50%; bottom: 0; top: min(calc(50% + 45cqmin * 1.06), calc(100% - 64px)); bottom: auto; transform: translateX(-50%); z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; padding: 10px 16px;
  border: 1px solid var(--s-line2); border-radius: 12px; background: #111113d9; backdrop-filter: blur(8px); min-width: 200px; }
.gRegion .ic { color: var(--accent2); grid-row: span 2; align-self: center; }
.gRegion b { font-size: 14px; }
.gUseMe { grid-column: 1 / -1; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
  border: 1px solid #ff7a2a59; background: #ff7a2a14; color: #ffb27d; font: 600 12.5px/1.2 inherit; cursor: pointer; white-space: nowrap; }
.gUseMe:hover { background: #ff7a2a26; color: #fff; }
.gUseMe .ic { width: 14px; height: 14px; grid-row: auto; color: inherit; }
.gRegion span { color: var(--s-dim); font-size: 12.5px; }
.gMsg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--s-dim); font-size: 14px; text-align: center; }

/* ------------------------------------------------------------ panneau (aperçu) */
.dPanel { position: sticky; top: calc(var(--s-head) + var(--s-pad)); max-height: calc(100vh - var(--s-head) - 2 * var(--s-pad)); overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--s-line); border-radius: 18px; background: #0f0f11d9; backdrop-filter: blur(14px); padding: 20px; display: grid; gap: 14px; align-content: start;
  box-shadow: 0 30px 80px #0009; scrollbar-width: thin; scrollbar-color: #2e2e34 transparent; }
.pIntro { display: grid; gap: 14px; padding: 6px 2px 2px; }
.pGlobeArt { width: 92px; height: 92px; fill: none; stroke: #f26a1f; stroke-width: 1; opacity: .75; }
.pGlobeArt .dot { fill: #f26a1f; stroke: none; }
.pIntro h2 { font-size: 22px; letter-spacing: -.015em; }
.pIntro > p { color: var(--s-ink2); font-size: 14.5px; line-height: 1.55; }
.pSteps { list-style: none; display: grid; gap: 12px; margin: 4px 0; }
.pSteps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; color: var(--s-ink2); font-size: 14px; }
.pSteps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--s-line2); color: var(--s-ink); font-size: 13px; }
.pOrg { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--s-line); font-size: 13.5px; color: var(--s-dim); }
.pOrg a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.pOrg .ic { width: 16px; height: 16px; }
.pClose { display: none; }
.pBanner { height: 150px; border-radius: 12px; overflow: hidden; background: #19161a; }
.pBanner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dPanel h2 { font-size: 23px; letter-spacing: -.015em; line-height: 1.2; }
.dPanel .pbadge { justify-self: start; }
.pMeta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--s-ink2); font-size: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--s-line); }
.pMeta span, .pStats span { display: inline-flex; align-items: center; gap: 6px; }
.pStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pStats span { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; }
.pStats .ic { grid-row: span 2; width: 22px; height: 22px; color: var(--s-dim); }
.pStats small { color: var(--s-dim); font-size: 12px; }
.btn.outline { border: 1px solid #f26a1fb3; color: var(--accent2); background: transparent; }
.btn.outline:hover { background: #f26a1f14; text-decoration: none; }
.pBoard { border-top: 1px solid var(--s-line); padding-top: 14px; display: grid; gap: 10px; }
.pbHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pbHead h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.pbHead select { width: auto; padding: 6px 10px; font-size: 13px; }
.liveDot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 #f26a1f99; animation: livePulse 1.6s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 8px #f26a1f00; } 100% { box-shadow: 0 0 0 0 #f26a1f00; } }
.pTable { width: 100%; border-collapse: collapse; font-size: 14px; }
.pTable th { text-align: left; font-size: 12px; color: var(--s-dim); font-weight: 600; padding: 7px 8px; background: #17171a; }
.pTable td { padding: 8px; border-bottom: 1px solid #1b1b1f; }
.pTable .num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rkb { display: inline-grid; place-items: center; min-width: 24px; height: 22px; border-radius: 6px; font-size: 12px; font-weight: 800; color: var(--s-ink2); }
.rkb.r1 { background: #c8932f; color: #1b1203; } .rkb.r2 { background: #8e939c; color: #111; } .rkb.r3 { background: #a4572c; color: #fff; }
.pFull { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; }

/* ------------------------------------------------------------ autres pages */
.pagePub { padding-top: 40px; padding-bottom: 50px; position: relative; z-index: 1; }
.pagePub .sbar { max-width: 760px; }
.sfoot { position: relative; z-index: 2; border-top: 1px solid var(--s-line); color: var(--s-dim); font-size: 13.5px; background: var(--s-bg); }
.sfootIn { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 22px; }

/* ------------------------------------------------------------ page d'événement */
.evBanner { height: 240px; border-radius: 16px; overflow: hidden; margin-bottom: 22px; background: #19161a; border: 1px solid var(--s-line); }
.evBanner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evAbout { display: grid; gap: 14px; max-width: 760px; }
.evAbout p { color: var(--s-ink2); white-space: pre-line; }
.evFacts { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--s-ink2); }
.evFacts span { display: inline-flex; gap: 6px; align-items: center; }
.evTags { display: flex; gap: 6px; flex-wrap: wrap; }
.evTags span { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: #f26a1f17; color: var(--accent2); }
.evDivs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.evDivs li { border: 1px solid var(--s-line); border-radius: 10px; padding: 10px 14px; display: flex; justify-content: space-between; background: var(--s-surface); }

@media (max-width: 1180px) and (min-width: 901px) {
  .ptop { gap: 18px; padding: 0 20px; }
  .pnav a { padding: 0 9px; font-size: 14px; }
  .pnav a .ic { display: none; }
  .pright { gap: 8px; }
  .pright .auth .btn { padding: 8px 12px; font-size: 14px; }
}
/* ------------------------------------------------------------ écrans moyens : le panneau devient une fiche */
@media (max-width: 1320px) {
  .disc { grid-template-columns: minmax(380px, 520px) minmax(320px, 1fr); }
  .dPanel { position: fixed; z-index: 30; right: 20px; top: calc(var(--s-head) + 16px); width: min(400px, calc(100vw - 40px)); max-height: calc(100vh - var(--s-head) - 32px); display: none; }
  .disc.hasSel .dPanel { display: grid; }
  .pClose { display: inline-grid; justify-self: end; margin: -6px -6px -6px 0; transform: rotate(90deg); }
  .disc.noGlobe { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------ téléphone : une colonne, le globe dans son cadre */
@media (max-width: 900px) {
  .globeLayer { display: none; }
  .ptop { gap: 12px; padding: 0 14px; }
  .burger { display: inline-grid; margin-left: auto; order: 3; }
  .pright { margin-left: 0; }
  .pright .auth .btn.ghost, .pright .auth .btn.primary { padding: 7px 11px; font-size: 13px; }
  .pnav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; height: auto; background: #0b0b0cf8; border-bottom: 1px solid var(--s-line); padding: 8px 0; }
  .ptop.navOpen .pnav { display: flex; }
  .pnav a { padding: 12px 20px; border-bottom: 0; }
  .disc { display: flex; flex-direction: column; align-items: stretch; padding: 22px 16px 30px; gap: 18px; min-height: 0; pointer-events: auto; }
  body.discover .siteMain { pointer-events: auto; }
  .dLeft { display: contents; }
  .disc > *, .dLeft > * { min-width: 0; max-width: 100%; }
  .hero { order: 1; } .lead { order: 2; margin: 0; } .sbar { order: 3; } .fpanel { order: 4; }
  .chipsRow { order: 5; margin: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; min-width: 0; max-width: 100%; scrollbar-width: none; }
  .chipsRow::-webkit-scrollbar { display: none; }
  .dGlobe { order: 6; position: relative; top: 0; height: min(54vh, 400px); min-height: 300px; }
  .gBox .globeCanvas { touch-action: none; }
  .lhead { order: 7; flex-wrap: wrap; } .clist { order: 8; } .lmore { order: 9; }
  .dPanel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 82vh; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); background: #0f0f11f5; }
  .ccard { grid-template-columns: 92px 1fr auto; gap: 12px; }
  .ccover { width: 92px; height: 68px; }
  .clist.grid { grid-template-columns: 1fr; }
  .fbtn { padding: 0 12px !important; }
  .evBanner { height: 160px; }
}
@media (max-width: 420px) {
  .pright .auth .btn.ghost { display: none; }
  .ctop { flex-wrap: wrap; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .liveDot, .ccard.skel .ccover, .ccard.skel i { animation: none; }
}