/* ==========================================================================
   Carnet de scores — application et pages de compte
   S'appuie sur les jetons de site.css (terra, majorelle, sable…) ; mobile d'abord ;
   propriétés logiques (compatible RTL).
   ========================================================================== */

:root {
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --ok-ink: #0f5a3e;
  --warn-ink: #6d4700;
  --app-top: 64px;
  --tabbar: 68px;
  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--majorelle);
  --z-top: 60;
  --z-tabs: 70;
  --z-menu: 80;
  --z-tip: 300;
}

.small { font-size: .88rem; }
.opt { font-weight: 400; color: var(--muted); font-size: .85em; }
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
:where(.is-app, .is-account) :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }

/* ---------- Formulaires (comptes et application) ---------- */
:where(.auth-form, .app-form, .filter-bar, .entry, .onboarding) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:where(.auth-form, .app-form, .filter-bar, .entry, .onboarding) select,
:where(.auth-form, .app-form, .filter-bar, .entry, .onboarding) textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .72rem .85rem; border-radius: 12px;
  border: 1.5px solid var(--line-2); background: var(--paper); color: var(--text); min-height: 46px;
}
:where(.auth-form, .app-form, .filter-bar, .entry, .onboarding) :is(input, select, textarea):focus { outline: none; border-color: var(--majorelle); box-shadow: 0 0 0 4px var(--majorelle-soft); }
.field { min-width: 0; }
.field label, .field .label { display: block; font: 600 .9rem/1.3 var(--font-head); margin-bottom: .38rem; color: var(--ink); }
.app-form .field label input, .app-form .field label select { margin-top: .38rem; font-weight: 400; }
.field small { display: block; color: var(--muted); font-size: .84rem; margin-top: .3rem; line-height: 1.4; }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.field-err { color: var(--danger) !important; font-weight: 600; }
.check.has-error span { color: var(--danger); }
.btn-block { width: 100%; justify-content: center; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost.btn-danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.2rem; }
.app-form .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1rem 1.1rem; }
.app-form h2 { font-size: 1.1rem; margin: 1.6rem 0 .9rem; }
.app-form h2:first-of-type { margin-top: .2rem; }
.inline-form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.inline-form select { width: auto; min-width: 12rem; }
fieldset.checks { border: 0; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
fieldset.checks legend { font: 600 .9rem var(--font-head); color: var(--ink); margin-bottom: .5rem; width: 100%; }
details.more, details.ctx-more, details.game-opts { margin-top: 1rem; }
details > summary { cursor: pointer; font: 600 .95rem var(--font-head); color: var(--majorelle); list-style: none; display: inline-flex; align-items: center; gap: .4rem; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--majorelle-soft); font-size: .95rem; }
details[open] > summary::before { content: "−"; }
details[open] > summary { margin-bottom: .9rem; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-inline-end: 5.6rem !important; }
.pw-toggle { position: absolute; inset-inline-end: .45rem; inset-block-start: 50%; transform: translateY(-50%); border: 0; background: var(--sand); color: var(--ink); font: 600 .82rem var(--font-head); padding: .4rem .7rem; border-radius: 8px; cursor: pointer; }
.pw-meter { height: 5px; border-radius: 99px; background: var(--sand-2); margin-top: .45rem; overflow: hidden; }
.pw-meter span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .2s, background .2s; }
.pw-meter[data-level="1"] span { width: 33%; background: var(--danger); }
.pw-meter[data-level="2"] span { width: 66%; background: var(--saffron); }
.pw-meter[data-level="3"] span { width: 100%; background: var(--mint); }
.code-input { font: 700 1.9rem/1 var(--font-head) !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }

.app-alert { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--radius); margin: 0 0 1.1rem; font-size: .95rem; }
.app-alert p { margin: 0; }
.app-alert .i { flex: none; margin-top: .15rem; }
.app-alert.is-ok { background: var(--mint-soft); color: var(--ok-ink); }
.app-alert.is-warn { background: var(--saffron-soft); color: var(--warn-ink); }
.app-alert.is-err { background: var(--danger-soft); color: #8c1d18; }

/* ---------- Pages de compte ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2rem; padding-block: clamp(1.5rem, 5vw, 3.5rem); align-items: start; }
.auth.is-narrow { grid-template-columns: minmax(0, 480px); justify-content: center; }
.auth-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.3rem, 4vw, 2.4rem); }
.auth-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font: 700 1rem var(--font-head); margin-bottom: 1.2rem; }
.auth-brand .logo-mark { width: 34px; height: 34px; }
.auth h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 .5rem; }
.auth-lead { color: var(--muted); margin: 0 0 1.3rem; }
.auth-form { display: grid; gap: 1rem; margin-top: 1rem; }
.auth-form .form-row { gap: 1rem; }
.auth-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; align-items: center; font-size: .93rem; }
.auth-alt { margin: 1.4rem 0 0; text-align: center; font-size: .95rem; color: var(--muted); }
.auth-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--majorelle-soft); color: var(--majorelle); margin-bottom: .8rem; }
.auth-resend { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line-2); }
.auth-resend p { margin: 0 0 .6rem; font-size: .9rem; }
.auth .seg-block { margin-top: .3rem; }
.auth-side { background: var(--ink); color: #dfe5f0; border-radius: var(--radius-lg); padding: clamp(1.3rem, 4vw, 2.4rem); position: relative; overflow: hidden; }
.auth-side::before { content: ""; position: absolute; inset: 0; background: var(--zellige); opacity: .06; }
.auth-side > * { position: relative; }
.auth-side h2 { color: #fff; font-size: 1.3rem; margin: 0 0 1.2rem; }
.auth-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.auth-benefits li { display: flex; gap: .8rem; align-items: flex-start; }
.ab-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--saffron); }
.auth-privacy { display: flex; gap: .5rem; align-items: flex-start; margin: 1.5rem 0 0; font-size: .9rem; color: #b9c3d6; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } }

/* ---------- Coquille de l'application ---------- */
.is-app { background: #f6f2ea; }
.app-top { position: sticky; inset-block-start: 0; z-index: var(--z-top); background: var(--paper); border-block-end: 1px solid var(--line); }
.app-top-inner { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); height: var(--app-top); display: flex; align-items: center; gap: 1rem; }
.app-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); flex: none; }
.app-brand .logo-mark { width: 34px; height: 34px; }
.app-brand strong { display: block; font: 800 1.05rem/1.1 var(--font-head); }
.app-brand small { display: block; font-size: .72rem; color: var(--muted); }
.app-nav { flex: 1; min-width: 0; }
.app-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.app-nav a { display: block; padding: .5rem .7rem; border-radius: 10px; text-decoration: none; color: var(--ink-3); font: 600 .92rem var(--font-head); white-space: nowrap; }
.app-nav a:hover { background: var(--sand); color: var(--ink); }
.app-nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.app-add { flex: none; }
.app-lang { display: flex; gap: .15rem; list-style: none; margin: 0; padding: .2rem; border-radius: 10px; background: var(--sand); flex: none; }
.app-lang a, .app-lang span { display: block; padding: .35rem .55rem; border-radius: 8px; font: 700 .8rem/1 var(--font-head); text-decoration: none; color: var(--muted); }
.app-lang span { background: var(--ink); color: #fff; }
.app-lang a:hover { background: var(--paper); color: var(--terra); }
.app-user { position: relative; flex: none; }
.app-user summary { list-style: none; cursor: pointer; }
.app-user summary::-webkit-details-marker { display: none; }
.app-user summary::before { display: none !important; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--terra); color: #fff; font: 700 .95rem var(--font-head); }
.app-user-menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + .5rem); width: min(290px, 90vw); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .6rem; z-index: var(--z-menu); }
.app-user-menu .who { margin: 0; padding: .5rem .6rem .7rem; border-block-end: 1px solid var(--line); }
.app-user-menu .who strong, .app-user-menu .who small { display: block; }
.app-user-menu .who small { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.app-user-menu ul { list-style: none; margin: .4rem 0; padding: 0; }
.app-user-menu a, .app-user-menu .linklike { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .6rem; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: .95rem; }
.app-user-menu a:hover, .app-user-menu .linklike:hover { background: var(--sand); }
.app-user-menu form { border-block-start: 1px solid var(--line); padding-top: .4rem; }
.app-user-menu .linklike { color: var(--danger); }
.only-mobile { display: none; }
.app-main { min-height: calc(100vh - var(--app-top) - 60px); }
.app-foot { text-align: center; color: var(--muted); font-size: .85rem; padding: 1.5rem var(--gutter) 2rem; }
.app-foot a { color: var(--muted); }
.app-tabs { display: none; }

@media (max-width: 1100px) { .app-nav a { padding: .5rem .5rem; font-size: .86rem; } }
@media (max-width: 960px) {
  .app-nav, .app-add { display: none; }
  .app-top-inner { justify-content: space-between; }
  .app-brand { flex: 1; min-width: 0; }
  .app-brand small { display: none; }
  .only-mobile { display: block; }
  .app-main { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
  .app-foot { padding-bottom: calc(var(--tabbar) + 1.5rem + env(safe-area-inset-bottom)); }
  .app-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-tabs);
    background: var(--paper); border-block-start: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); height: calc(var(--tabbar) + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px -18px rgba(15, 27, 45, .5);
  }
  .app-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; text-decoration: none; color: var(--muted); font: 600 .72rem var(--font-head); }
  .app-tabs a[aria-current="page"] { color: var(--terra); }
  .app-tabs .tab-add { color: var(--ink); }
  .tab-plus { width: 48px; height: 48px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center; background: var(--terra); color: #fff; font: 700 1.8rem/1 var(--font-head); box-shadow: 0 8px 18px -6px rgba(192, 81, 43, .7); border: 3px solid var(--paper); }
}

/* ---------- Pages ---------- */
.app-page { max-width: 1240px; margin-inline: auto; padding: clamp(1rem, 3vw, 2rem) var(--gutter) 1rem; }
.app-page.is-narrow { max-width: 860px; }
.app-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 1.5rem; margin-bottom: 1.4rem; }
.app-head h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: .2rem 0 .3rem; }
.app-head.is-compact { margin-bottom: .9rem; align-items: center; }
.app-head.is-compact h1 { font-size: clamp(1.3rem, 3.5vw, 1.7rem); margin: 0; }
.app-head .lead { margin: 0; font-size: 1rem; color: var(--muted); }
.app-head .eyebrow a { color: inherit; text-decoration: none; }
.app-head-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.h1-score { color: var(--terra); margin-inline-start: .4rem; }
.app-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1rem, 2.6vw, 1.6rem); margin-bottom: 1.2rem; }
.app-card > h2, .card-head h2 { font-size: 1.2rem; margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.card-head h2 { margin-bottom: .8rem; }
.card-head h2 a { color: inherit; text-decoration: none; }
.app-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.app-grid-2 > .app-card { margin-bottom: 0; }
.app-grid-2 + * { margin-top: 1.2rem; }
@media (max-width: 900px) { .app-grid-2 { grid-template-columns: 1fr; } }
.empty { text-align: center; padding-block: 2.2rem; }
.empty p { color: var(--muted); max-width: 52ch; margin: 0 auto 1.2rem; }
.muted.small, p.small { margin: .6rem 0 0; }
.danger-zone { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin: 1rem 0; }
.danger-card { border-color: #f1c8c3; }
.danger-card h2 { color: var(--danger); }
.dl-inline { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.dl-inline dt { font-weight: 600; color: var(--ink); }
.dl-inline dd { margin: 0; }

/* Chiffres clés */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.kpis.is-small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin: .6rem 0 .4rem; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.app-card .kpi { background: var(--sand); border-color: transparent; }
.kpi-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: .3rem; }
.kpi-value { font: 800 1.85rem/1.15 var(--font-head); color: var(--ink); }
.kpis.is-small .kpi-value { font-size: 1.35rem; }
.kpi small { color: var(--muted); font-size: .84rem; }
.kpi-main { background: var(--ink) !important; border-color: var(--ink); }
.kpi-main .kpi-label, .kpi-main small { color: #b9c3d6; }
.kpi-main .kpi-value { color: #fff; font-size: 2.3rem; }
.kpi-delta { display: inline-flex; align-items: center; gap: .15rem; font: 700 .82rem var(--font-head); width: max-content; padding: .1rem .45rem; border-radius: 99px; }
.kpi-delta.is-up { background: var(--mint-soft); color: var(--ok-ink); }
.kpi-delta.is-down { background: var(--danger-soft); color: #8c1d18; }
.info-btn { border: 0; background: none; padding: 0; color: var(--muted); cursor: help; display: inline-flex; }
.kpi-main .info-btn { color: #b9c3d6; }
.goal-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.meter { height: 12px; border-radius: 99px; background: var(--terra-soft); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--terra); border-radius: inherit; }

/* Graphiques */
.chart-box { width: 100%; overflow: hidden; }
.chart-box svg { display: block; width: 100%; height: auto; }
.pins-box { max-width: 320px; margin-inline: auto; }
.chart text { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.chart .hit rect, .chart .hit-bar { cursor: crosshair; }
.chart [data-tip]:hover { opacity: .88; }
.chart-legend { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .85rem; color: var(--muted); }
.chart-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.key { display: inline-block; flex: none; }
.key-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.key-line { width: 18px; height: 2px; border-radius: 2px; background: var(--c); }
.key-rect { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.heat-legend { margin-top: .8rem; justify-content: center; }
.chart-data { margin-top: .8rem; font-size: .9rem; }
.chart-data summary { font-size: .88rem; }
.chart-data .table-wrap { max-height: 320px; overflow: auto; margin-top: .6rem; }
.chart-tip { position: absolute; z-index: var(--z-tip); display: none; pointer-events: none; background: var(--ink); color: #fff; border-radius: 10px; padding: .5rem .7rem; font-size: .82rem; line-height: 1.35; box-shadow: var(--shadow-lg); max-width: 240px; }
.chart-tip span { display: block; }
.chart-tip .tt-title { color: #b9c3d6; font-size: .76rem; margin-bottom: .15rem; }
.chart-tip strong { font: 700 1rem var(--font-head); font-variant-numeric: tabular-nums; margin-inline-end: .3rem; }

/* Constats */
.insights { display: grid; gap: .8rem; }
.insight { display: flex; gap: .8rem; padding: .95rem 1rem; border-radius: var(--radius); background: var(--terra-soft); }
.insight.is-strong { background: var(--mint-soft); }
.insight.is-info { background: var(--majorelle-soft); }
.insight-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--terra); }
.insight.is-strong .insight-icon { color: var(--mint); }
.insight.is-info .insight-icon { color: var(--majorelle); }
.insight h3 { font-size: 1rem; margin: 0 0 .2rem; }
.insight p { margin: 0; font-size: .93rem; }
.insight-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin-top: .45rem !important; }
.chip { font: 600 .76rem var(--font-head); padding: .2rem .55rem; border-radius: 99px; background: rgba(255, 255, 255, .7); color: var(--ink-3); }
.chip-terra { background: var(--terra); color: #fff; }
.ins-head { font-size: 1rem; margin: 0 0 .7rem; }
.ins-head.is-weak { color: var(--terra-2); }
.ins-head.is-strong { color: var(--mint); }

/* Historique */
.session-list { display: grid; }
.session-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .8rem .2rem; border-block-end: 1px solid var(--line); text-decoration: none; color: var(--text); }
.session-row:last-child { border-block-end: 0; }
.session-row:hover { background: #fcfaf6; }
.sr-date { text-align: center; line-height: 1.05; }
.sr-date strong { display: block; font: 800 1.35rem var(--font-head); color: var(--ink); }
.sr-date small { font-size: .74rem; color: var(--muted); text-transform: uppercase; }
.sr-main { min-width: 0; display: grid; gap: .15rem; }
.sr-title { font: 600 .98rem var(--font-head); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-sub { font-size: .84rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-games { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.g-chip { font: 700 .82rem var(--font-head); padding: .12rem .5rem; border-radius: 8px; background: var(--sand); color: var(--ink); font-variant-numeric: tabular-nums; }
.g-chip.is-draft { background: var(--saffron-soft); color: var(--warn-ink); }
.g-chip.is-agg { background: var(--majorelle-soft); color: var(--majorelle); }
.sr-total { text-align: end; }
.sr-total strong { display: block; font: 800 1.35rem var(--font-head); color: var(--terra); }
.sr-total small { font-size: .74rem; color: var(--muted); }
.badge-kind { font: 700 .7rem var(--font-head); text-transform: uppercase; letter-spacing: .04em; padding: .12rem .45rem; border-radius: 6px; vertical-align: .1em; background: var(--sand-2); color: var(--ink-3); }
.kind-league { background: var(--majorelle-soft); color: var(--majorelle); }
.kind-tournament { background: var(--terra-soft); color: var(--terra-2); }
.kind-practice { background: var(--mint-soft); color: var(--ok-ink); }
.badge-split { background: var(--danger-soft); color: #8c1d18; font: 700 .72rem var(--font-head); padding: .1rem .45rem; border-radius: 6px; }
.month-head { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1rem 0 .2rem; }
.month-head:first-child { margin-top: 0; }
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 1rem 0; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin-bottom: 1rem; }
.filter-bar .field { flex: 1 1 160px; max-width: 240px; }
.filter-bar .field label { font-size: .8rem; color: var(--muted); }
.filter-bar select, .filter-bar input { min-height: 42px !important; padding: .5rem .7rem !important; font-size: .95rem !important; }
.custom-dates { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.filter-bar .compare { align-self: center; font-size: .92rem; }
.stat-tabs { display: flex; gap: .3rem; overflow-x: auto; margin-bottom: 1.2rem; padding: .3rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; scrollbar-width: none; }
.stat-tabs a { flex: none; padding: .6rem 1rem; border-radius: 10px; text-decoration: none; font: 600 .95rem var(--font-head); color: var(--ink-3); white-space: nowrap; }
.stat-tabs a[aria-current="page"] { background: var(--ink); color: #fff; }
.stats-body.is-loading { opacity: .5; transition: opacity .15s; }

/* Parties et séances */
.game-card .card-head { align-items: center; }
.game-score { font: 800 1.8rem var(--font-head); color: var(--terra); }
.game-score small { font-size: .85rem; color: var(--muted); }
.game-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .8rem 0 0; font-size: .88rem; color: var(--muted); }
.game-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.res-ok { color: var(--ok-ink); font-weight: 600; display: inline-flex; gap: .2rem; align-items: center; }
.res-ko { color: #8c1d18; font-weight: 600; }
.scoreboard.sheet { margin: 0; }
.scoreboard.is-compact .rolls span { height: 24px; font-size: .85rem; }
.scoreboard.is-compact .ftotal { font-size: 1rem; padding: .35rem 0 .45rem; min-height: 1.9rem; }
.scoreboard .m-x { color: var(--terra); }
.scoreboard .m-s { color: var(--majorelle); }
.scoreboard .m-f { color: var(--danger); }
.scoreboard .m-split { position: relative; }
.scoreboard .m-split::after { content: ""; position: absolute; inset: 3px; border: 1.5px solid var(--danger); border-radius: 50%; }

/* Liste (compétitions, boules) */
.list-row { display: flex; align-items: center; gap: .9rem; padding: .85rem .2rem; border-block-end: 1px solid var(--line); text-decoration: none; color: var(--text); }
.list-row:last-child { border-block-end: 0; }
.list-row:hover { background: #fcfaf6; }
.list-row.is-archived, .ball-card.is-archived { opacity: .6; }
.lr-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--majorelle-soft); color: var(--majorelle); flex: none; }
.lr-main { flex: 1; min-width: 0; }
.lr-main strong { display: block; color: var(--ink); }
.lr-main small { color: var(--muted); }
.lr-side { font-size: .85rem; color: var(--muted); text-align: end; }
.ball-card h2 small { font-size: .85rem; color: var(--muted); font-weight: 500; }
.device-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.device-list li { padding: .6rem .8rem; background: var(--sand); border-radius: 12px; }
.device-list small { display: block; color: var(--muted); }

/* Records et badges */
.timeline-records { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem; }
.timeline-records a { flex: none; min-width: 7.5rem; padding: .7rem .9rem; border-radius: var(--radius); background: var(--sand); text-decoration: none; color: var(--ink); }
.timeline-records a:first-child { background: var(--terra); color: #fff; }
.timeline-records strong { display: block; font: 800 1.5rem var(--font-head); }
.timeline-records span { font-size: .8rem; opacity: .8; }
.badge-group { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1.2rem 0 .6rem; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .7rem; }
.badge-tile { display: grid; gap: .2rem; padding: .9rem; border-radius: var(--radius); border: 1.5px dashed var(--line-2); color: var(--muted); }
.badge-tile strong { color: var(--ink-3); font-family: var(--font-head); }
.badge-tile small { font-size: .8rem; }
.bt-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--line-2); margin-bottom: .2rem; }
.badge-tile.is-on { border: 1px solid var(--saffron); background: var(--saffron-soft); color: var(--warn-ink); }
.badge-tile.is-on strong { color: var(--ink); }
.badge-tile.is-on .bt-icon { background: var(--saffron); color: #fff; }

/* Accueil du nouveau joueur, cartes de mode */
.onboarding fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; }
.onboarding legend { font: 700 1.1rem var(--font-head); color: var(--ink); margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.step { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--terra); color: #fff; font: 700 .95rem var(--font-head); }
.onboarding .seg { margin: 0 .6rem .6rem 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .7rem; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: grid; gap: .2rem; padding: .9rem 1rem; border-radius: var(--radius); border: 1.5px solid var(--line-2); background: var(--paper); height: 100%; }
.choice small { color: var(--muted); }
.choice input:checked + span { border-color: var(--terra); background: var(--terra-soft); box-shadow: 0 0 0 3px var(--terra-soft); }
.choice input:focus-visible + span { box-shadow: var(--focus); }
.mode-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0; }
@media (max-width: 800px) { .mode-cards { grid-template-columns: 1fr; } }
.mode-card { display: grid; gap: .35rem; padding: 1.2rem; border-radius: var(--radius-lg); border: 1.5px solid var(--line); text-decoration: none; color: var(--text); background: var(--paper); transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.mode-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--terra); color: var(--text); }
.mc-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--terra-soft); color: var(--terra); margin-bottom: .3rem; }
.mode-card strong { font: 700 1.1rem var(--font-head); color: var(--ink); }
.mode-card em { font-style: normal; font-size: .84rem; color: var(--majorelle); font-weight: 600; }
.empty-more { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; color: var(--muted); margin: 0; }

/* ---------- Saisie ---------- */
.entry-page { max-width: 880px; }
.sync-pill { display: inline-flex; align-items: center; gap: .4rem; font: 600 .82rem var(--font-head); padding: .3rem .7rem; border-radius: 99px; background: var(--sand); color: var(--muted); }
.sync-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sync-pill.is-ok { background: var(--mint-soft); color: var(--ok-ink); }
.sync-pill.is-busy { color: var(--majorelle); background: var(--majorelle-soft); }
.sync-pill.is-busy::before { animation: pulse 1s infinite; }
.sync-pill.is-wait, .sync-pill.is-off { background: var(--saffron-soft); color: var(--warn-ink); }
.sync-pill.is-err { background: var(--danger-soft); color: #8c1d18; }
@keyframes pulse { 50% { opacity: .3; } }
.entry { display: grid; gap: 1rem; }
.entry .app-alert { margin: 0; }
.ctx { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.ctx-summary { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border: 0; background: none; cursor: pointer; text-align: start; font: inherit; color: var(--ink); }
.ctx-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--majorelle-soft); color: var(--majorelle); flex: none; }
.ctx-text { flex: 1; min-width: 0; font: 600 .98rem var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-edit { font: 600 .85rem var(--font-head); color: var(--majorelle); }
.ctx-panel { padding: .3rem 1rem 1.1rem; display: grid; gap: 1rem; border-top: 1px solid var(--line); }
.ctx-panel .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
.seg-wrap { flex-wrap: wrap; }
.seg-sm button { padding: .45rem .75rem; font-size: .86rem; }
.seg button[aria-checked="true"] { background: var(--ink); color: #fff; }
.new-inline { padding: .9rem; border-radius: var(--radius); background: var(--sand); }
.new-inline .tool-actions { margin-top: .8rem; }
.strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; }
.strip-games { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem; max-width: 100%; scrollbar-width: thin; }
.g-tab { flex: none; min-width: 58px; display: grid; justify-items: center; gap: 0; padding: .35rem .6rem; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--paper); cursor: pointer; font: inherit; color: var(--ink); }
.g-tab small { font-size: .7rem; color: var(--muted); font-weight: 600; }
.g-tab strong { font: 800 1.15rem var(--font-head); font-variant-numeric: tabular-nums; }
.g-tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.g-tab[aria-selected="true"] small { color: #b9c3d6; }
.g-tab.is-pending { box-shadow: inset 0 -3px 0 var(--saffron); }
.g-tab.is-error { border-color: var(--danger); }
.g-add { align-content: center; font: 700 1.3rem var(--font-head); color: var(--terra); border-style: dashed; }
.strip-total { display: flex; gap: 1.2rem; }
.strip-total span { display: grid; text-align: end; }
.strip-total small { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.strip-total strong { font: 800 1.3rem var(--font-head); color: var(--terra); }
.strip-total em { font-style: normal; font-size: .8rem; color: var(--muted); font-weight: 600; }
.strip-agg { width: 100%; margin: 0; font-size: .88rem; color: var(--majorelle); }
.entry-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(.9rem, 3vw, 1.5rem); }
.entry-card-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.entry-card-head h2 { font-size: 1.25rem; margin: 0; }

.total-entry { display: grid; justify-items: center; gap: 1rem; }
.total-display { display: block; min-width: 9rem; text-align: center; font: 800 clamp(3.4rem, 14vw, 4.6rem)/1 var(--font-head); color: var(--ink); padding: .3rem 1rem; border-radius: var(--radius); background: var(--sand); font-variant-numeric: tabular-nums; }
.total-display.is-set { color: var(--terra); }
.total-display .ph { color: var(--line-2); }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(72px, 96px)); gap: .55rem; }
.keypad button { min-height: 58px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--paper); font: 700 1.5rem var(--font-head); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.keypad button:active { transform: scale(.97); background: var(--sand); }
.keypad .kp-ok { background: var(--terra); border-color: var(--terra); color: #fff; font-size: 1.2rem; }
.total-entry p { text-align: center; margin: 0; }

.entry-sheet { margin-bottom: .2rem; }
.entry-sheet .frame { font: inherit; padding: 0; border: 0; border-inline-end: 1px solid var(--line-2); background: var(--paper); cursor: pointer; color: inherit; display: flex; flex-direction: column; }
.entry-sheet .frame:last-child { border-inline-end: 0; }
.entry-sheet .frame .frame-no, .entry-sheet .frame .rolls, .entry-sheet .frame .ftotal { display: flex; }
.entry-sheet .frame .frame-no { display: block; }
.entry-sheet .frame .ftotal { display: block; }
.entry-sheet .frame.current { background: var(--saffron-soft); }
.entry-sheet .frame.editing { background: var(--majorelle-soft); }
.entry-sheet .frame:hover .frame-no { background: var(--ink-3); }
.sheet-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0 .4rem; flex-wrap: wrap; }
.sheet-meta { display: grid; text-align: end; font-size: .88rem; color: var(--muted); }
.sheet-meta.is-done { font: 700 1rem var(--font-head); color: var(--ok-ink); }
.entry-pad { margin-top: .8rem; }
.entry-pad button { min-height: 56px; touch-action: manipulation; }
.pad-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; align-items: center; }
.pad-tools .deck-ok { margin-inline-start: auto; min-width: 9rem; justify-content: center; }
.deck-wrap { display: grid; justify-items: center; margin-top: .6rem; }
.deck-hint { margin: 0 0 .5rem; font-size: .9rem; color: var(--muted); text-align: center; }
.deck { direction: ltr; display: grid; grid-template-columns: repeat(7, minmax(0, 3.3rem)); grid-template-rows: repeat(4, 3.3rem); gap: .3rem 0; justify-content: center; padding: 1rem .6rem; border-radius: var(--radius); background: linear-gradient(180deg, #e9c89a, #d8ad73); width: 100%; max-width: 420px; }
.deck-pin { justify-self: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px dashed rgba(15, 27, 45, .3); background: rgba(255, 255, 255, .22); color: rgba(15, 27, 45, .5); font: 700 1.05rem/1 var(--font-head); cursor: pointer; touch-action: manipulation; transition: transform .1s; }
.deck-pin[aria-pressed="true"] { border: 2px solid var(--ink); background: #fff; color: var(--ink); box-shadow: inset 0 -.35rem 0 var(--terra), 0 3px 6px rgba(15, 27, 45, .25); }
.deck-pin:disabled { visibility: hidden; }
.deck-pin:active { transform: scale(.94); }
.deck-leave { min-height: 1.6rem; margin: .5rem 0 0; font-size: .95rem; }
@media (max-width: 420px) { .deck { grid-template-columns: repeat(7, minmax(0, 2.75rem)); grid-template-rows: repeat(4, 2.9rem); } .deck-pin { width: 2.6rem; height: 2.6rem; } }
.game-opts .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .9rem; }
.game-opts .field + .field { margin: 0; }
.game-opts > .field { margin-top: .9rem; }
.game-foot { display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line-2); }
.game-foot .spacer { flex: 1; }
.entry-finish { display: grid; justify-items: center; gap: .3rem; margin: .5rem 0 1rem; text-align: center; }

/* Célébration, dialogues */
dialog.celebrate, dialog.app-dialog { border: 0; border-radius: var(--radius-lg); padding: 1.8rem 1.6rem 1.4rem; max-width: min(420px, 92vw); text-align: center; box-shadow: var(--shadow-lg); overflow: hidden; }
dialog::backdrop { background: rgba(15, 27, 45, .45); backdrop-filter: blur(2px); }
dialog.celebrate h2 { font-size: 1.6rem; margin: .4rem 0 .8rem; color: var(--terra); position: relative; }
dialog.celebrate ul { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .6rem; position: relative; }
dialog.celebrate li { background: var(--saffron-soft); border-radius: 12px; padding: .6rem .8rem; }
dialog.celebrate li strong, dialog.celebrate li span { display: block; }
dialog.celebrate li span { font-size: .9rem; color: var(--warn-ink); }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; inset-block-start: -10px; inset-inline-start: calc(var(--i) * 4.2%); width: 8px; height: 14px; border-radius: 2px; background: var(--terra); opacity: .9; animation: fall 1.8s ease-in forwards; animation-delay: calc(var(--i) * 45ms); }
.confetti i:nth-child(3n) { background: var(--saffron); }
.confetti i:nth-child(3n+1) { background: var(--majorelle); }
.confetti i:nth-child(4n) { background: var(--mint); }
@keyframes fall { to { transform: translateY(420px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .mode-card, .keypad button, .deck-pin { transition: none; } }
.app-dialog { text-align: start !important; }
.shortcuts { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0 0 1.2rem; font-size: .92rem; }
.shortcuts dt { margin: 0; }
.shortcuts dd { margin: 0; }
kbd { font: 600 .82rem ui-monospace, monospace; padding: .12rem .45rem; border-radius: 6px; background: var(--sand); border: 1px solid var(--line-2); }

/* ---------- Présentation publique (landing) ---------- */
.lp-hero { background: var(--ink); color: #dfe5f0; position: relative; overflow: hidden; }
.lp-hero::before { content: ""; position: absolute; inset: 0; background: var(--zellige); opacity: .05; }
.lp-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding-block: clamp(2.5rem, 7vw, 5rem); }
.lp-hero h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); margin: .4rem 0 1rem; }
.lp-hero .lead { color: #c9d2e3; font-size: 1.12rem; }
.lp-hero .eyebrow { color: var(--saffron); }
.lp-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 1rem; }
.lp-actions .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.lp-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; color: #b9c3d6; }
.lp-trust li { display: inline-flex; gap: .4rem; align-items: center; }
.lp-trust .i { color: var(--saffron); }
.lp-mock { background: #f6f2ea; border-radius: 22px; padding: 1rem; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); color: var(--text); transform: rotate(1deg); }
.lp-mock .kpis { grid-template-columns: repeat(3, 1fr); margin-bottom: .7rem; }
.lp-mock .kpi { padding: .7rem; }
.lp-mock .kpi-value { font-size: 1.4rem; }
.lp-mock .kpi-main .kpi-value { font-size: 1.7rem; }
.lp-mock .app-card { margin: 0; padding: .8rem; }
@media (max-width: 900px) { .lp-hero-inner { grid-template-columns: 1fr; } .lp-mock { transform: none; } }
.lp-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.1rem; }
.lp-feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem; }
.lp-feature .mc-icon { margin-bottom: .8rem; }
.lp-feature h3 { margin: 0 0 .4rem; font-size: 1.12rem; }
.lp-feature p { margin: 0; color: var(--muted); font-size: .96rem; }
.lp-steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1.1rem; list-style: none; padding: 0; margin: 0; }
.lp-steps li { counter-increment: s; background: var(--paper); border-radius: var(--radius-lg); padding: 1.3rem; border: 1px solid var(--line); }
.lp-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--terra); color: #fff; font: 700 1rem var(--font-head); margin-bottom: .6rem; }
.lp-steps strong { display: block; font-family: var(--font-head); color: var(--ink); margin-bottom: .2rem; }
.lp-steps span { color: var(--muted); font-size: .95rem; }
.lp-for { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 800px) { .lp-for { grid-template-columns: 1fr; } }
.lp-for > div { border-radius: var(--radius-lg); padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); }
.lp-for ul { margin: .6rem 0 0; padding-inline-start: 1.1rem; }
.lp-for li { margin: .3rem 0; }

@media print {
  .app-top, .app-tabs, .app-foot, .filter-bar, .stat-tabs, .app-head-actions, .danger-zone, .chart-data summary { display: none !important; }
  .app-card { box-shadow: none; break-inside: avoid; }
  .is-app { background: #fff; }
}