/* =========================================================
   Version ordinateur (laptop / desktop)
   Activée par app.js : <html data-device="desktop"> sur grand écran ou avec souris.
   ========================================================= */

/* Éléments propres à la barre latérale : masqués sur mobile */
.side-brand, .side-profile, .tabbar .side-brand, .tabbar .side-profile { display: none; }

html[data-device="desktop"] {
  --side-w: 248px;
  --tabbar-h: 56px;
}

/* ---------- Barre latérale (remplace la barre d'onglets du bas) ---------- */
html[data-device="desktop"] .tabbar {
  top: 0; bottom: 0; left: 0; right: auto;
  width: var(--side-w); height: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 11px 12px;
  border-top: 0; border-right: 1px solid var(--line);
  background: var(--card);
}
html[data-device="desktop"] .side-brand { display: flex; align-items: center; gap: 9px; padding: 0 6px 17px; }
html[data-device="desktop"] .side-brand img { width: 40px; height: 40px; border-radius: 4px; }
html[data-device="desktop"] .side-brand b { display: block; font-family: var(--display); font-size: 16px; line-height: 21px; }
html[data-device="desktop"] .side-brand small { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; color: var(--primary); text-transform: uppercase; }
html[data-device="desktop"] .tabbar button[data-tab] {
  flex-direction: row; justify-content: flex-start; gap: 11px;
  min-height: 40px; padding: 0 11px; border-radius: 4px;
  font-size: 14px; letter-spacing: 0;
}
html[data-device="desktop"] .tabbar button[data-tab]:hover { background: var(--chip); color: var(--ink); }
html[data-device="desktop"] .tabbar button[data-tab].on { background: #F5F6F2; color: var(--primary-dark); }
html[data-device="desktop"] .tabbar button:active { transform: none; }
html[data-device="desktop"] .tabbar .side-profile {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px;
  margin-top: auto; padding: 8px; border-radius: 4px;
  border: 1.5px solid var(--line); text-align: left;
}
html[data-device="desktop"] .side-profile:hover { background: var(--chip); }
html[data-device="desktop"] .side-profile .avatar { width: 34px; height: 34px; font-size: 13px; }
html[data-device="desktop"] .sp-id { display: flex; flex-direction: column; min-width: 0; }
html[data-device="desktop"] .sp-id b { font-family: var(--display); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-device="desktop"] .sp-id small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Structure : en-tête + contenu à droite de la barre latérale ---------- */
html[data-device="desktop"] .appbar { margin-left: var(--side-w); padding: 11px 25px; }
html[data-device="desktop"] .appbar .brand-mark { display: none; }
html[data-device="desktop"] .brand-name { display: none; }
html[data-device="desktop"] .brand-sub { font-size: 17px; line-height: 24px; color: var(--ink); letter-spacing: -0.01em; }
html[data-device="desktop"] main {
  max-width: none;
  margin: 0 0 0 var(--side-w);
  padding: 19px 25px 37px;
}
html[data-device="desktop"] body.playing main { padding-bottom: calc(var(--actions-h) + 31px); }
html[data-device="desktop"] .screen { max-width: 1240px; margin: 0 auto; }

/* ---------- Accueil : profil en bandeau, puis grille de raccourcis ---------- */
html[data-device="desktop"] #home {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; align-items: stretch;
}
html[data-device="desktop"] #home > .home-hero {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(306px, 374px);
  align-items: center; gap: 25px; padding: 20px 22px;
}
html[data-device="desktop"] .hh-id .avatar { width: 57px; height: 57px; font-size: 20px; }
html[data-device="desktop"] .hh-names .hud-title { font-size: 26px; line-height: 40px; }
html[data-device="desktop"] .hh-names small { font-size: 13px; }
html[data-device="desktop"] .home-hero .hud-text { font-size: 14px; }
html[data-device="desktop"] #home > #profile-card { grid-column: 1 / -1; grid-row: 2; }
html[data-device="desktop"] #home > .feat-grid { grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
html[data-device="desktop"] .feat-grid > .feat { grid-column: span 2; }
html[data-device="desktop"] .feat-grid > .feat:nth-child(4):nth-last-child(2),
html[data-device="desktop"] .feat-grid > .feat:nth-child(5):last-child { grid-column: span 3; }
html[data-device="desktop"] .feat { padding: 14px 16px; }
html[data-device="desktop"] .fp-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-device="desktop"] .fp-kv div { flex-direction: column; gap: 2px; }
html[data-device="desktop"] .fp-kv dd { text-align: left; }
@media (hover: hover) {
  html[data-device="desktop"] .feat:not(.feat-play):hover { border-color: var(--green); box-shadow: 0 10px 24px -12px rgba(127, 127, 127, 0.45); transform: translateY(-2px); }
  html[data-device="desktop"] .fp-rounds button:hover, html[data-device="desktop"] .feat .record:hover { background: var(--green-soft); }
}

/* ---------- Partie : commandes à gauche, carte du parcours à droite ---------- */
.round-side, .round-main { display: contents; }
html[data-device="desktop"] #round {
  display: grid; grid-template-columns: minmax(289px, 357px) minmax(0, 1fr);
  gap: 16px 22px; align-items: start;
}
html[data-device="desktop"] .round-side {
  display: flex; flex-direction: column; gap: 12px;
  grid-column: 1; grid-row: 1;
}
html[data-device="desktop"] .round-main {
  display: flex; flex-direction: column; gap: 9px;
  grid-column: 2; grid-row: 1;
}
html[data-device="desktop"] .round-main .section-head { margin-top: 0; }

/* ---------- Trou en cours : cartouche à gauche, clubs à droite ---------- */
  display: grid; grid-template-columns: minmax(272px, 340px) minmax(0, 1fr);
  grid-template-rows: auto 1fr; gap: 12px 22px; align-items: start;
}
html[data-device="desktop"] .club { min-height: 87px; }
html[data-device="desktop"] .play-actions {
  left: var(--side-w); bottom: 0;
  padding: 11px 25px 14px;
  grid-template-columns: 187px 272px; justify-content: end;
  border-top: 1px solid var(--line); background: rgba(250, 250, 250, 0.95);
  backdrop-filter: blur(8px);
}

/* ---------- Nouvelle partie : 2 colonnes ---------- */
html[data-device="desktop"] #setup {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 16px; align-items: start;
}
html[data-device="desktop"] #setup > .section-head { grid-column: 1 / -1; }
html[data-device="desktop"] #setup > .setup-block:nth-of-type(5) { grid-column: 2; grid-row: 3 / span 3; }
html[data-device="desktop"] #setup > .setup-block:not(:nth-of-type(5)) { grid-column: 1; }
html[data-device="desktop"] #setup > #setup-start { grid-column: 1 / -1; max-width: 420px; justify-self: end; width: 100%; }

/* ---------- Statistiques : grille de cartes ---------- */
html[data-device="desktop"] .stats-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 16px; align-items: start;
}
html[data-device="desktop"] .stats-body > * { grid-column: 1 / -1; }
html[data-device="desktop"] .stats-body > .viz-card { grid-column: auto; }
html[data-device="desktop"] .stats-body > .viz-card.focus,
html[data-device="desktop"] .stats-body > .viz-card:has(.data-table) { grid-column: 1 / -1; }
html[data-device="desktop"] .stats-body .tiles { grid-template-columns: repeat(4, 1fr); }
html[data-device="desktop"] .stats-body > .back-link,
html[data-device="desktop"] .stats-body > .btn-danger { justify-self: start; width: auto; padding: 0 19px; }
html[data-device="desktop"] .round-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
html[data-device="desktop"] .viz-card .chart { max-width: 560px; margin: 0 auto; }

/* ---------- Profil : identité à gauche, sac à droite ---------- */
html[data-device="desktop"] #profile { display: grid; grid-template-columns: minmax(289px, 340px) minmax(0, 1fr); gap: 19px; align-items: start; }
html[data-device="desktop"] .prof-side { position: sticky; top: 84px; }
html[data-device="desktop"] .prof-main .segmented { max-width: 560px; }
html[data-device="desktop"] #bag-summary { grid-template-columns: repeat(4, 1fr); }
html[data-device="desktop"] #bag-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-items: stretch; }
html[data-device="desktop"] .bag-list { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); }

/* ---------- Fenêtres : centrées au lieu de remonter du bas ---------- */
html[data-device="desktop"] .backdrop { align-items: center; justify-content: center; padding: 25px; }
html[data-device="desktop"] .sheet {
  width: 100%; max-width: 540px;
  border-radius: 4px;
  padding: 19px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
html[data-device="desktop"] .sheet.tall { max-height: calc(100vh - 64px); }
html[data-device="desktop"] .eval {
  top: 28px; bottom: 28px; left: 50%; right: auto;
  width: 580px; max-width: calc(100vw - 48px); margin-left: -226px;
  border-radius: 4px; padding: 14px 17px 19px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55), 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}

/* ---------- Message de confirmation : centré sur le contenu ---------- */
html[data-device="desktop"] .toast { left: calc(50% + var(--side-w) / 2); bottom: 28px; }
html[data-device="desktop"] body.playing .toast { bottom: calc(var(--actions-h) + 24px); }

/* ---------- Connexion : mise en page large ---------- */
html[data-device="desktop"] .login-inner { max-width: 1040px; justify-content: center; }
html[data-device="desktop"] #login-welcome {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  align-items: center; gap: 19px 50px; flex: none; margin: auto 0;
}
html[data-device="desktop"] #login-welcome .login-hero { grid-column: 1; grid-row: 1 / span 2; text-align: left; align-items: flex-start; padding-top: 0; }
html[data-device="desktop"] .login-hero h1 { font-size: 32px; line-height: 52px; }
html[data-device="desktop"] .login-pitch { font-size: 15px; line-height: 24px; max-width: 460px; }
html[data-device="desktop"] .login-logo { width: 230px; margin-left: 0; }
html[data-device="desktop"] #login-welcome .login-actions {
  grid-column: 2; grid-row: 1; align-self: end;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px; padding: 25px 19px;
}
html[data-device="desktop"] #login-welcome .admin-link { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; }
html[data-device="desktop"] #login-onboard { max-width: 640px; width: 100%; margin: auto; flex: none; gap: 14px; }
html[data-device="desktop"] .ob-card { padding: 25px; min-height: 420px; }
html[data-device="desktop"] .ob-q { font-size: 21px; line-height: 31px; }
html[data-device="desktop"] .ob-actions { margin-top: 0; justify-content: flex-end; }
html[data-device="desktop"] .ob-actions .btn-primary { flex: none; min-width: 280px; }
html[data-device="desktop"] #ob-bag { grid-template-columns: repeat(5, 1fr); }

/* ---------- Survol à la souris ---------- */
@media (hover: hover) {
  html[data-device="desktop"] .club:hover { border-color: var(--green); }
  html[data-device="desktop"] .club.last:hover { filter: brightness(1.15); }
  html[data-device="desktop"] .quality:hover { filter: brightness(0.97); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12); }
  html[data-device="desktop"] .shot-row:hover,
  html[data-device="desktop"] .hc-toggle:hover,
  html[data-device="desktop"] .round-item:hover,
  html[data-device="desktop"] .record:hover,
  html[data-device="desktop"] .golf-results li button:hover { background: var(--chip); }
  html[data-device="desktop"] .btn-primary:hover { background: var(--primary-dark); }
  html[data-device="desktop"] .btn-secondary:hover { background: var(--chip); }
  html[data-device="desktop"] .mode-card:not(.on):hover,
  html[data-device="desktop"] .chips button:not(.on):hover,
  html[data-device="desktop"] .segmented button:not(.on):hover { background: var(--card); color: var(--ink); }
  html[data-device="desktop"] button:active { transform: none; }
}
html[data-device="desktop"] .ob-actions .btn-primary { width: auto; padding: 0 31px; }

/* ---------- Espace admin + encart de la barre latérale ---------- */
html[data-device="desktop"] #admin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
html[data-device="desktop"] #admin > .admin-hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(272px, 357px); column-gap: 25px; padding: 20px 22px; }
html[data-device="desktop"] #admin > .admin-hero > :not(.pods) { grid-column: 1; }
html[data-device="desktop"] #admin > .admin-hero > .pods { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
html[data-device="desktop"] #admin > .admin-card:nth-of-type(1) { grid-column: 1; grid-row: 2 / span 2; }
html[data-device="desktop"] #admin > .admin-card { grid-column: 2; }
html[data-device="desktop"] #admin .admin-chip { justify-self: start; }
html[data-device="desktop"] .tabbar .side-profile.is-admin { border-color: #DCE2DC; background: #E9EFEB; }
html[data-device="desktop"] .tabbar .side-profile.is-admin #sp-sub { color: var(--wedge-ink); }
html[data-device="desktop"] .tabbar .side-profile.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.15); }
html[data-device="desktop"] .tabbar .side-profile.is-admin.on { border-color: var(--wedge-ink); box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.15); }
html[data-device="desktop"] .login-preview { position: fixed; top: 0; left: 0; right: 0; margin: 0; padding: 8px 19px; justify-content: center; gap: 16px; font-size: 13px; }

/* ---------- Jouer : carte à gauche, historique à droite ---------- */
html[data-device="desktop"] #lobby { display: grid; grid-template-columns: minmax(289px, 357px) minmax(0, 1fr); gap: 22px; align-items: start; }
html[data-device="desktop"] .lobby-side { position: sticky; top: 84px; }
html[data-device="desktop"] .lobby-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-device="desktop"] #setup > #setup-back { grid-column: 1 / -1; justify-self: start; }
/* ---------- Profil : sac ---------- */
html[data-device="desktop"] .bag-tiles { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
@media (hover: hover) {
  html[data-device="desktop"] .lobby-item:hover { border-color: var(--green); }
  html[data-device="desktop"] .bag-tile.out:hover { border-color: var(--green); }
  html[data-device="desktop"] .bag-tile.in:hover { border-color: #F87171; }
}

/* ---------- Stats : filtres sur une ligne, collés en haut ---------- */
html[data-device="desktop"] .stats-filters {
  position: sticky; top: 58px; z-index: 6;
  grid-template-columns: repeat(4, minmax(0, 204px)) auto; align-items: center; padding: 8px;
}
html[data-device="desktop"] .sf { position: relative; }
html[data-device="desktop"] .sf-btn { padding: 6px 9px; }
html[data-device="desktop"] .sf-val { font-size: 13px; }
html[data-device="desktop"] .sf-panel { left: 0; right: auto; width: 360px; }
html[data-device="desktop"] .sf-reset { grid-column: auto; justify-self: start; }
html[data-device="desktop"] .stats-body > .viz-card.wide { grid-column: 1 / -1; }
@media (hover: hover) {
  html[data-device="desktop"] .sf:not(.open) .sf-btn:hover { border-color: var(--line); }
  html[data-device="desktop"] .sfp-item:hover { background: var(--canvas); }
  html[data-device="desktop"] .sfp-actions button:hover { background: var(--green-soft); }
  html[data-device="desktop"] .row-link:hover th, html[data-device="desktop"] .row-link:hover td { background: var(--green-soft); }
}

/* ---------- Condensé : ordinateur ---------- */
html[data-device="desktop"] .pp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
html[data-device="desktop"] #stats-body .tiles { grid-template-columns: repeat(4, 1fr); }
@media (hover: hover) {
  html[data-device="desktop"] .hc-ic:hover { background: var(--chip); color: var(--ink); }
  html[data-device="desktop"] .hc-ic.go:hover { background: var(--primary-dark); color: #fff; }
  html[data-device="desktop"] .hole-card.row .hc-info:hover .hp-name { text-decoration: underline; }
  html[data-device="desktop"] .pp-item:hover { background: var(--green-soft); }
}

/* ---------- Saisie du coup : panneau sous le cartouche, à gauche des clubs ---------- */
html[data-device="desktop"] .round-actions { margin-top: 0; }
@media (hover: hover) {
  html[data-device="desktop"] .dir-row button:not(.on):hover, html[data-device="desktop"] .contact-row button:not(.on):hover { border-color: var(--green); background: var(--card); }
  html[data-device="desktop"] .ra-btn:not(.finish):hover { background: var(--chip); }
}

/* ---------- Trou en cours : infos à gauche ; clubs puis saisie du coup à droite, alignés en haut ---------- */
  grid-column: 2; grid-row: 3;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 11px 12px;
}
html[data-device="desktop"] .club { min-height: 69px; padding: 8px 5px 6px; gap: 4px; }
html[data-device="desktop"] .club .badge { width: 29px; height: 29px; }

/* ---------- Trou en cours : lecture de haut en bas (résumé → clubs → direction → contact → enregistrer) ---------- */
html[data-device="desktop"] #play { max-width: 960px; gap: 11px; }
html[data-device="desktop"] #play > .hud { padding: 12px 16px; gap: 9px; }
html[data-device="desktop"] #play > .club-zone > .section-head { margin-top: 2px; }
html[data-device="desktop"] #play > .club-zone > .club-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 8px; }
html[data-device="desktop"] #play .shot-panel { padding: 12px 14px; gap: 8px; }
html[data-device="desktop"] #play .dir-row button, html[data-device="desktop"] #play .contact-row button { min-height: 45px; }
html[data-device="desktop"] #play .sp-save { min-height: 44px; }
/* résumé du trou sur une seule bande : titre à gauche, chiffres à droite */
html[data-device="desktop"] #play > .hud { display: grid; grid-template-columns: minmax(221px, auto) minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 8px; padding: 11px 14px; }
html[data-device="desktop"] #play > .hud > .hud-top { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 6px; }
html[data-device="desktop"] #play > .hud > .pods { grid-column: 2; grid-row: 1; }
html[data-device="desktop"] #play > .hud > .shot-strip, html[data-device="desktop"] #play > .hud > .strip-hint { grid-column: 1 / -1; }
html[data-device="desktop"] #play .pod { padding: 5px 4px; }
html[data-device="desktop"] #play .pod .v { font-size: 17px; line-height: 22px; }
html[data-device="desktop"] #play .pod.main .v { font-size: 21px; line-height: 29px; }
html[data-device="desktop"] #play .pod.main .v.wait { font-size: 14px; line-height: 29px; }
html[data-device="desktop"] #play > .club-zone > .club-grid .club { min-height: 57px; }
/* saisie : direction, puis contact en dessous, puis « distance » + Enregistrer sur la même ligne */
html[data-device="desktop"] #play .shot-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
html[data-device="desktop"] #play .shot-panel > * { grid-column: 1 / -1; }
html[data-device="desktop"] #play .shot-panel > .manual-toggle { grid-column: 1; order: 10; }
html[data-device="desktop"] #play .shot-panel > .sp-save { grid-column: 2; order: 10; min-width: 300px; padding: 0 22px; }
html[data-device="desktop"] #play .shot-panel > .manual-box { order: 9; }
html[data-device="desktop"] #play .shot-panel > .manual-box:not([hidden]) ~ .sp-save { grid-column: 1 / -1; }
html[data-device="desktop"] #play .dir-row button, html[data-device="desktop"] #play .contact-row button { min-height: 41px; }
html[data-device="desktop"] #play .dir-row button { flex-direction: row; gap: 6px; }
html[data-device="desktop"] #play .dir-row button small { font-size: 13px; }
html[data-device="desktop"] #play .contact-row button { font-size: 14px; }

/* ---------- Stats : grille de 12 colonnes, cartes de même hauteur par ligne ---------- */
html[data-device="desktop"] .stats-body { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; gap: 12px; }
html[data-device="desktop"] .stats-body > .viz-card { grid-column: span 6; }
html[data-device="desktop"] .viz-card[style*="span 12"] .putt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
/* accueil allégé : Mon jeu (2/3) + Jouer (1/3), puis Mes records en pleine largeur */
html[data-device="desktop"] #home > .feat-grid { grid-template-columns: minmax(0, 1fr); }
html[data-device="desktop"] .feat-grid > .feat { grid-column: 1 / -1; }
html[data-device="desktop"] #home-features .records { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-device="desktop"] #profile-card { justify-content: space-between; }

/* Pas de caméra à proposer sur ordinateur : on choisit un fichier. */
html[data-device="desktop"] #ob-photo-selfie { display: none; }