/* =========================================================
   GolfTrack — identité visuelle (dernière feuille chargée)
   Vert parcours #123F32 · blanc · noir encre #111713
   fond #F5F6F2 · filets #DCE2DC · texte secondaire #677169 · teinte #E9EFEB · sauge #A8B8AC
   Manrope : titres · Inter : texte · IBM Plex Mono : données et petits libellés
   Le blanc domine, le vert signale ce qui compte. Sans dégradé, sans ombre décorative,
   sans couleur de performance. Le rouge reste réservé aux erreurs et aux suppressions.
   ========================================================= */
@font-face { font-family: 'Manrope'; src: url(fonts/manrope.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fonts/inter.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/ibm-plex-mono-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/ibm-plex-mono-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --canvas: #F5F6F2; --card: #FFFFFF; --line: #DCE2DC; --chip: #E9EFEB;
  --slate: #123F32; --slate-2: #1D4D3F;
  --ink: #111713; --muted: #677169; --muted-2: #A8B8AC;
  --primary: #123F32; --primary-dark: #123F32;
  --green: #123F32; --green-ink: #123F32; --green-soft: #E9EFEB;
  --ok: #123F32; --amber: #A8B8AC; --amber-soft: #E9EFEB; --wedge-soft: #E9EFEB; --wedge-ink: #123F32;
  --red: #B91C1C; --red-ink: #B91C1C; --red-soft: #FEE2E2;
  --display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --saisie: #FFFFFF; --saisie-bord: #DCE2DC; --saisie-texte: #677169;
  --shadow: none;
}
/* Les doubles cercles et carrés de la carte de score sont dessinés avec box-shadow : ce sont des symboles, pas des ombres. */
*:not(.sc-s span) { box-shadow: none !important; }
body { background: var(--canvas); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.5; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; color: inherit; }
svg { stroke-width: 1.5; }

/* Données en mono */
:is(.pod .v, .t-value, .mj-v, .mj-global b, .cmp-vals b, .cmp-delta b, .club .avg, .sr-dist, .pp-score, .hc-badge small, .sn, .soft-pill, .hud-chip, .gps-pill, .sc-num, #stats-body .data-table td) { font-family: var(--mono); font-weight: 500; letter-spacing: -0.01em; }
/* Petits libellés en mono, sobres */
:is(.eyebrow, .pod .k, .mj-k, .sf-k, .t-label, .sp-label, .se-label, .hud-chip, .founder-tag) { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
:is(.hud, .login) :is(.eyebrow, .pod .k, .hud-chip) { color: #C9D5CD; }
.pod .v, .pod.main .v { color: #fff; }

/* Boutons et surfaces */
.btn-primary, .ra-btn.finish, .consent-ok, #btn-resume-hole { background: var(--primary); color: #fff; border: 1px solid var(--primary); font-family: var(--body); font-weight: 600; font-size: 14px; }
.btn-primary:disabled, .consent-ok:disabled { background: var(--line); border-color: var(--line); color: var(--muted); }
.btn-secondary { background: #fff; color: var(--primary); border: 1px solid var(--line) !important; font-weight: 500; }
.btn-danger { background: #fff; color: var(--red-ink); border: 1px solid var(--line); font-weight: 500; }
.hud .btn-primary, .login .btn-primary { background: #fff; color: var(--primary); border-color: #fff; }
:is(.card, .hole-card, .profile-card, .feat, .lobby-item, .viz-card, .pp-item, .stats-filters) { background: var(--card); border: 1px solid var(--line); }
.hole-card.live { border-color: var(--primary); }
.soft-pill, .link-pill, .back-link { background: transparent; color: var(--primary); border: 1px solid var(--line); }
.hud { background: var(--primary); border-color: var(--primary); color: #fff; }
.hud-chip { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; }
.pulse { background: #fff; }
.pod, .pod.main { border-left-color: rgba(255, 255, 255, 0.22); }
.mj-global > div { border-left-color: var(--line); }
.mj-stat.good, .mj-stat.work { background: var(--canvas); }
.dot.q1 { background: #DCE2DC; } .dot.q2 { background: #A8B8AC; } .dot.q3 { background: #123F32; }
input, select, textarea { font-family: var(--body); }

/* Barres */
.appbar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); }
.brand-name { font-family: var(--display); font-weight: 700; }
.brand-sub { font-family: var(--body); font-weight: 400; font-size: 12px; }
.tabbar { background: #fff; border-top: 1px solid var(--line); }
.tabbar button { color: var(--muted); font-family: var(--body); font-size: 11px; }
.tabbar button.on { color: var(--primary); font-weight: 600; }
.gps-pill { background: var(--chip); color: var(--primary); }
html[data-device="desktop"] .tabbar button[data-tab].on { background: var(--chip); color: var(--primary); }

/* Connexion : fond vert parcours, réserve blanche */
.login { background: var(--primary); }
.login-pitch { color: #E9EFEB; font-family: var(--body); }
.login-tag { color: #C9D5CD; font-family: var(--mono); font-weight: 400; }
.admin-link { border: 1px dashed rgba(255, 255, 255, 0.35); color: #E9EFEB; }
.login-legal { color: #E9EFEB; }
.ob-card, .consent-card { background: #fff; color: var(--ink); }

/* Saisie : blanc, filet, sélection en vert parcours */
:is(.new-hole, .easy-panel, .shot-panel, .shot-panel.ready, .club-zone, .par-line.compact, #setup .setup-block, #scores-sheet .sheet, #shot-sheet .sheet, #hole-sheet .sheet) { background: #fff; border-color: var(--line); color: var(--ink); }
:is(.new-hole, .easy-panel, .shot-panel, .club-zone, .par-line.compact, #setup .setup-block, #scores-sheet .sheet, #shot-sheet .sheet, #hole-sheet .sheet) :is(.par-tiles button, .par-mini button, .dir-row button, .contact-row button, .club, .se-clubs button, .sr-quick button, .segmented button, .mode-card, .ep-arrow, .sp-x, .close-btn, .step, .nh-stepper button, .pl-del, .soft-pill) { border: 1px solid var(--line); background: #fff; color: var(--ink); }
:is(.new-hole, .easy-panel, .shot-panel, .club-zone, .par-line.compact, #setup .setup-block, #scores-sheet .sheet, #shot-sheet .sheet, #hole-sheet .sheet) :is(.par-mini button.on, .dir-row button.on, .club.picked, .se-clubs button.on, .sr-quick button.on, .segmented button.on, .mode-card.on, .contact-row button.on) { background: var(--primary); border-color: var(--primary); color: #fff !important; }
:is(.dir-row button.on, .contact-row button.on, .mode-card.on) :is(small, svg, p, b, span) { color: #fff !important; }
.segmented { background: var(--canvas); }
:is(input, select, textarea):focus-visible, :is(button, a):focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.consent-check { background: var(--canvas); border: 1px solid var(--line); }
.consent-check input { accent-color: var(--primary); }
.sf-dates input { background: #fff; border-color: var(--line); color: var(--ink); }
.club.last { border: 1px dashed var(--primary); background: #fff; }
.club.last::after { background: var(--primary); }
.play-actions, #play-actions { background: var(--canvas); }

/* Écran de jeu sur téléphone : en-tête vert plein, puis la saisie */
html:not([data-device="desktop"]) body[data-screen="play"] .appbar { background: var(--primary); border-bottom-color: var(--primary); color: #fff; }
html:not([data-device="desktop"]) body[data-screen="play"] .appbar :is(.brand-sub) { color: #C9D5CD; }
html:not([data-device="desktop"]) body[data-screen="play"] .gps-pill { background: #E9EFEB; }
html:not([data-device="desktop"]) #play { display: flex; flex-direction: column; }
html:not([data-device="desktop"]) #play > .hud { order: -1; margin: -9px -12px 0; border-radius: 0; border: 0; padding: 4px 16px 14px; }

/* Carte de score : symboles sobres, encre seulement */
.golf-card .sc-num { background: var(--primary); }
.golf-card :is(.good, .bad, .birdie, .bogey, .eagle, .double) { color: var(--ink); }

/* Statistiques */
#stats-body .stats-h { font-family: var(--display); font-weight: 600; font-size: 16px; }
#stats-body .viz-card header h3 { font-family: var(--display); font-weight: 600; font-size: 15px; }
#stats-body .tiles.kpi .stat-tile { background: #fff; }
.stats-jump { background: var(--canvas); }
.stats-jump button { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); font-family: var(--body); font-weight: 500; }
.stats-jump button.on { background: transparent; color: var(--primary); border-bottom-color: var(--primary); }
.sf.on .sf-btn { background: var(--chip); border-color: var(--primary); }
.qrows.labeled .qseg span.q1, .qrows.labeled .qseg span.q2 { color: var(--ink); }
.qrows.labeled .qseg span.q3 { color: #fff; }
.range-box button.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.bag-tile.in { border-color: var(--primary); color: var(--primary); }
.bag-tile.in i { background: var(--chip); color: var(--primary); }
.bag-item.on { border-color: var(--primary); color: var(--primary); }

/* Récap : le vert pour le mieux, la sauge pour le moins bien, le mot dit le sens */
.cmp-verdict { background: var(--chip); }
.cmp-verdict :is(.up, .down) b, .cmp-verdict.up b, .cmp-verdict.down b { color: var(--primary); }
.cmp-row.up .cmp-delta b, .cmp-row.down .cmp-delta b { color: var(--ink); }
.cmp-bar { background: var(--canvas); }
.cmp-bar::after { background: var(--ink); }
.cmp-bar i, .cmp-row.up .cmp-bar i { background: var(--primary); }
.cmp-row.down .cmp-bar i { background: #A8B8AC; }

/* Mouvements calmes */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Le logo : la signature fournie, 140 px minimum à l'écran. Le monogramme seul sert d'icône. */
.brand-name { display: none; }
.brand-mark { width: 140px; height: auto; border-radius: 0; display: block; }
html:not([data-device="desktop"]) .brand-sub { display: none; }
html[data-device="desktop"] .brand-sub { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 20px; }
html:not([data-device="desktop"]) body[data-screen="play"] .brand-mark { filter: brightness(0) invert(1); }
html:not([data-device="desktop"]) body[data-screen="play"] .appbar .brand-sub { color: #fff; }
html[data-device="desktop"] .side-brand { flex-direction: column; align-items: flex-start; gap: 4px; }
html[data-device="desktop"] .side-brand img { width: 157px; height: auto; border-radius: 0; }
html[data-device="desktop"] .side-brand small { font-family: var(--mono); font-weight: 400; letter-spacing: 0.04em; color: var(--muted); }
.login-logo { width: 220px; height: auto; margin-bottom: 16px; }
html[data-device="desktop"] .login-logo { width: 260px; margin-left: 0; }
.topar.under { background: var(--primary); color: #fff; }
.topar.even, .topar.over { background: var(--chip); color: var(--ink); }

/* Mètres depuis le dernier coup : lisible d'un coup d'œil en marchant */
.gps-pill.walking { background: var(--primary); color: #fff; font-family: var(--mono); font-size: 15px; font-weight: 500; height: 32px; padding: 0 12px; }
.gps-pill.walking .pulse { display: none; }
html:not([data-device="desktop"]) body[data-screen="play"] .gps-pill.walking { background: #fff; color: var(--primary); }

/* Connexion par e-mail */
.email-btn { width: 100%; max-width: 320px; align-self: center; min-height: 44px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; color: #fff; font-weight: 500; }
.em-card { width: 100%; max-width: 420px; margin: auto; background: #fff; color: var(--ink); border-radius: 4px; padding: 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.em-card h2 { margin: 0; font-size: 22px; line-height: 28px; }
.em-card form { display: flex; flex-direction: column; gap: 12px; }
.em-card input { width: 100%; }
.em-card a { color: inherit; text-decoration: underline; }
.em-card .back-link { align-self: flex-start; }
.em-card .link-btn { align-self: flex-start; color: var(--primary); text-decoration: underline; }
#em-pass-row { display: flex; flex-direction: column; gap: 4px; }
.em-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--red-ink); }
.em-note:empty { display: none; }
.em-note.ok { color: var(--primary); }
#pf-security { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-form { display: flex; flex-direction: column; gap: 8px; }
.em-card .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); min-height: 46px; }

/* Bouton de langue */
.lang-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 36px; padding: 0 7px; background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--primary); font-family: var(--body); font-size: 12px; font-weight: 500; cursor: pointer; }
.lang-btn svg { width: 16px; height: 16px; }
html:not([data-device="desktop"]) body[data-screen="play"] .appbar .lang-btn { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
html[lang="en"] .club.last::after { content: 'last'; }

/* Dans le bloc vert, l'écart au par reste blanc : le signe dit le sens */
.hud :is(.under-txt, .over-txt, .even-txt) { color: #fff; }

/* Menu de langue */
.lang-wrap { position: relative; flex: none; }
.lang-caret { width: 12px !important; height: 12px !important; }
.lang-wrap.on-dark .lang-btn { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.lang-wrap.floating { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 5; }
.lang-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 300; min-width: 150px; padding: 4px; background: #fff; border: 1px solid #DCE2DC; border-radius: 4px; display: flex; flex-direction: column; }
.lang-menu[hidden] { display: none; }
.lang-menu button { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 0 10px; background: none; border: 0; border-radius: 4px; color: #111713; font: 400 14px 'Inter', ui-sans-serif, system-ui, sans-serif; cursor: pointer; text-align: left; }
.lang-menu button b { font-weight: 500; font-size: 12px; color: #677169; }
.lang-menu button:hover { background: #F5F6F2; }
.lang-menu button[aria-checked="true"] { background: #E9EFEB; color: #123F32; font-weight: 600; }
.lang-menu button[aria-checked="true"] b { color: #123F32; }

/* =========================================================
   Saisie : fond sauge, choix blancs, sélection vert parcours.
   Le texte sur le sauge est à l'encre (contraste 8,75:1) : le gris secondaire n'y serait pas assez lisible.
   ========================================================= */
:root { --saisie-texte: #111713; }
:is(.new-hole, .easy-panel, .shot-panel, .shot-panel.ready, .club-zone, .par-line.compact, #setup .setup-block, #scores-sheet .sheet, #shot-sheet .sheet, #hole-sheet .sheet) { background: #A8B8AC; border-color: #A8B8AC; }
:is(.new-hole, .easy-panel, .shot-panel, .shot-panel.ready, .club-zone, .par-line.compact, #setup .setup-block, #scores-sheet .sheet, #shot-sheet .sheet, #hole-sheet .sheet) :is(h2, h3, h4, .eyebrow, .eyebrow.green, .se-label, .sp-label, .sp-shot, .sp-club, .sp-club.none, .muted, .small-note, .nh-hint, .nh-hint small, .par-line > span, .manual-toggle, .manual-help, .link-btn, .link-btn.left) { color: #111713; }
:is(.new-hole, .easy-panel, .shot-panel, .shot-panel.ready, .club-zone, .par-line.compact, #setup .setup-block, #scores-sheet .sheet, #shot-sheet .sheet, #hole-sheet .sheet) :is(.eyebrow, .eyebrow.green, .se-label, .sp-label) { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; }
.par-line.compact > span { color: #111713; font-family: var(--display); font-weight: 600; }
:is(.new-hole, .easy-panel, .shot-panel, .shot-panel.ready, .club-zone, .par-line.compact, #setup .setup-block, #scores-sheet .sheet, #shot-sheet .sheet, #hole-sheet .sheet) :is(.club .name, .contact-row button, .sp-club) { font-family: var(--display); font-weight: 600; }
:is(.new-hole, .easy-panel, .shot-panel, .shot-panel.ready, .club-zone, .par-line.compact, #setup .setup-block, #scores-sheet .sheet, #shot-sheet .sheet, #hole-sheet .sheet) :is(.score-row, .pl-row, .manual-box) { background: #fff; }
:is(.new-hole, .easy-panel, .shot-panel, .shot-panel.ready, .club-zone, .par-line.compact, #setup .setup-block, #scores-sheet .sheet, #shot-sheet .sheet, #hole-sheet .sheet) .segmented { background: rgba(255, 255, 255, 0.5); }
:is(.new-hole, .easy-panel, .shot-panel, .shot-panel.ready, .club-zone, .par-line.compact, #setup .setup-block, #scores-sheet .sheet, #shot-sheet .sheet, #hole-sheet .sheet) .segmented button:not(.on) { background: #fff; }
:is(.new-hole, .easy-panel, .shot-panel, .shot-panel.ready, .club-zone, .par-line.compact, #setup .setup-block, #scores-sheet .sheet, #shot-sheet .sheet, #hole-sheet .sheet) input:not([type="checkbox"]):not([type="radio"]) { background: #fff; color: var(--ink); }
.club.picked { outline: none; }


/* =========================================================
   Coach
   ========================================================= */
.coach-body { display: flex; flex-direction: column; gap: 10px; }
.coach-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.coach-card h2 { margin: 0; font-size: 18px; line-height: 24px; font-family: var(--display); font-weight: 600; }
.coach-card h3 { margin: 6px 0 0; font-size: 14px; line-height: 19px; font-family: var(--display); font-weight: 600; color: var(--primary); }
.coach-card p { margin: 0; font-size: 14px; line-height: 20px; }
.coach-meter { height: 6px; background: var(--chip); border-radius: 3px; overflow: hidden; }
.coach-meter i { display: block; height: 100%; background: var(--primary); }
.cc-archetype { background: var(--primary); color: #fff; border-radius: 4px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.cc-archetype b { font-family: var(--display); font-size: 20px; line-height: 25px; font-weight: 600; }
.cc-archetype p { color: #E9EFEB; font-size: 13px; line-height: 19px; }
.cc-archetype strong { color: #fff; font-weight: 600; }
.cc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; }
.cc-tiles div { background: var(--canvas); border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.cc-tiles b { font: 500 18px/24px var(--mono, monospace); }
.cc-tiles span { color: var(--muted); font-size: 11px; line-height: 15px; }
.cc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cc-list li { padding: 8px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.cc-list li:first-child { border-top: 0; }
.cc-list b { font-weight: 600; font-size: 14px; }
.cc-list span { font-size: 13px; line-height: 18px; color: var(--muted); }
.cc-axis { border-top: 1px solid var(--line); }
.cc-axis:first-of-type { border-top: 0; }
.cc-axis summary { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; list-style: none; }
.cc-axis summary::-webkit-details-marker { display: none; }
.cc-axis summary b { display: block; font-size: 14px; font-weight: 600; }
.cc-axis summary small { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
.cc-rank { flex: none; width: 24px; height: 24px; display: grid; place-items: center; background: var(--primary); color: #fff; border-radius: 4px; font: 500 13px var(--mono, monospace); }
.cc-axis > p { margin-bottom: 8px; font-size: 13px; line-height: 18px; }
.cc-ex, .cc-session ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-ex li, .cc-session li { background: var(--canvas); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 18px; }
.cc-ex b, .cc-session li b { font-size: 14px; font-weight: 600; }
.cc-ex small, .cc-session li small { color: var(--muted); font-size: 12px; }
.cc-ex em, .cc-session li em { font-style: normal; font-weight: 500; color: var(--primary); }
.cc-ex em i, .cc-session li em i { font-style: normal; font-weight: 400; color: var(--muted); margin-right: 4px; }
.cc-week { border-top: 1px solid var(--line); }
.cc-week summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; cursor: pointer; }
.cc-week summary span { color: var(--muted); font-size: 13px; }
.cc-session h4 { margin: 4px 0 6px; font: 600 13px var(--display); }
.cc-session h4 small { color: var(--muted); font-weight: 400; }
.cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.cc-foot small { color: var(--muted); font-size: 12px; }
.coach-notice { padding: 10px 12px; background: var(--chip); border-left: 3px solid var(--primary); font-size: 13px; line-height: 18px; }
.coach-disclaimer { margin: 0; color: var(--muted); font-size: 12px; line-height: 17px; text-align: center; }

/* Cinq onglets sur une seule ligne */
html:not([data-device="desktop"]) .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
html:not([data-device="desktop"]) .tabbar button { min-width: 0; padding-left: 0; padding-right: 0; white-space: nowrap; font-size: 10px; }

/* L'adresse e-mail du profil se lit mais ne se saisit pas ici */
#pf-email { background: var(--canvas); color: var(--muted); cursor: default; }
#pf-email-row .small-note { margin: -4px 0 10px; }