/* Même palette que la recherche JJBFight, pour tous les services. */
:root {
  color-scheme: dark;
  --fond: #0e1013;
  --surface: #16191d;
  --encre: #eef0f2;
  --encre-douce: #98a1a8;
  --filet: #23272c;
  --bleu: #2a72c4;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ink: var(--encre);
  --muted: var(--encre-douce);
  --paper: var(--fond);
  --blue: var(--bleu);
  --line: var(--filet);
  --nav: var(--fond);
  --accent: var(--encre-douce);
}
.platform-nav, .platform-mobile {
  background: var(--fond);
  color: var(--encre-douce);
  border-color: var(--filet);
}
.platform-nav .platform-brand, .platform-mobile .platform-brand {
  color: var(--encre);
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: .04em;
}
.platform-brand span { color: var(--bleu); }
.platform-nav .service-link { border-radius: 3px; }
.platform-nav [aria-current=page] {
  color: var(--encre);
  background: var(--surface);
  box-shadow: inset 2px 0 var(--bleu);
}
.platform-nav .platform-account { border-color: var(--filet); }
.platform-nav .platform-local { display: none; }
.platform-mobile button { border-color: var(--filet); }
.favorites-feedback, #toast {
  background: var(--surface);
  color: var(--encre);
  border-color: var(--filet);
  box-shadow: none;
}
.favorites-feedback a { color: #71a8e6; }

/* Study : dossiers discrets, vidéo et notes au premier plan. */
.study-page .topbar { background: var(--fond); height: 72px; padding: 0 28px; }
.study-page .brand { font-size: 28px; letter-spacing: .04em; gap: 4px; }
.study-page #logout { margin-left: auto; font-size: 12px; }
.study-page .shell { grid-template-columns: 200px minmax(0,1fr); min-height: calc(100vh - 72px); }
.study-page .sidebar { padding: 28px 16px; border-right: 1px solid var(--filet); }
.study-page .sidebar-heading { color: var(--muted); }
.study-page button { background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 4px; }
.study-page button:hover { border-color: var(--muted); background: #1e2226; }
.study-page .primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.study-page .primary:hover { background: #1d5fa8; border-color: #1d5fa8; }
.study-page #new-folder { background: transparent; font-size: 12px; }
.study-page .folder { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; }
.study-page .folder.active { background: var(--surface); color: var(--ink); box-shadow: inset 2px 0 var(--blue); }
.study-page .folder:hover { color: var(--ink); background: var(--surface); }
.study-page .sidebar-footer, .study-page .local-label, .study-page .backup { color: var(--muted); }
.study-page main { padding: 28px 28px 48px; }
.study-page .heading h1 { font-size: 36px; font-weight: 600; letter-spacing: .02em; margin: 0 0 6px; }
.study-page .heading p { font-size: 12px; }
.study-page .heading p:empty { display: none; }
.study-page .welcome, .study-page .empty { background: transparent; border: 0; border-radius: 0; padding: 90px 20px; }
.study-page .welcome h2, .study-page .empty h2 { font: 600 30px var(--display); margin: 0 0 12px; }
.study-page .empty p:empty { display: none; }
.study-page .fight-tab { background: transparent; border-color: var(--line); min-width: 190px; padding: 12px 14px; }
.study-page .fight-tab.active { background: var(--surface); border-color: var(--line); box-shadow: inset 0 2px var(--blue); }
.study-page .analysis { grid-template-columns: minmax(0,1.5fr) minmax(260px,1fr); gap: 24px; }
.study-page .player { background: #000; border-radius: 4px; }
.study-page .video-heading { color: var(--muted); }
.study-page .video-heading a { color: var(--muted); }
.study-page .pill { background: #000; color: #71a8e6; font-family: ui-monospace, monospace; }
.study-page .match-detail h2 { font-weight: 600; }
.study-page .quiet { background: transparent; border: 0; }
.study-page .danger { color: #dd9696; }
.study-page .notebook { background: var(--surface); box-shadow: none; border-radius: 4px; }
.study-page .note-header { padding: 16px 20px; }
.study-page .note-header h2 { margin: 0; font: 600 25px var(--display); }
.study-page .notebook label.sr-only { margin: 0; }
.study-page .notebook textarea { padding: 20px; min-height: 370px; font-size: 13px; line-height: 1.8; }
.study-page .notebook textarea::placeholder { color: var(--muted); }
.study-page .note-footer { padding: 12px 20px; }
.study-page dialog { background: var(--surface); border-radius: 6px; box-shadow: 0 24px 100px #0008; }
.study-page dialog::backdrop { background: #000b; backdrop-filter: blur(3px); }
.study-page dialog input, .study-page .search-form select { background: var(--fond); color: var(--ink); border-color: var(--line); }
.study-page dialog input::placeholder { color: var(--muted); }
.study-page .dialog-heading h2 { font-weight: 600; }
.study-page #folder-form > .primary { margin-top: 20px; }

/* Un seul panneau de connexion, sans argumentaire. */
.account-page { background: var(--fond); color: var(--encre); }
.account-main { display: block; width: min(440px,100%); box-sizing: border-box; margin: 14vh auto 0; padding: 24px; }
.account-card { background: transparent; border: 0; border-radius: 0; padding: 0; }
.account-main h1 { font: 600 42px/1.1 var(--display); letter-spacing: .025em; margin: 0 0 14px; }
.account-card p, .account-card summary { color: var(--encre-douce); }
.account-card .account-identity { color: var(--encre); }
.account-card details { border-color: var(--filet); margin-top: 32px; }
.account-card input { background: var(--surface); color: var(--encre); border-color: var(--filet); }
.account-card button, .account-action { border-radius: 4px; background: var(--bleu); border-color: var(--bleu); }
.account-card #signout { background: transparent; color: var(--encre-douce); border-color: var(--filet); margin-left: 8px; }
.account-card .account-muted { color: var(--encre-douce); margin-top: 28px; }
.account-card .account-message { color: #dd9696; }
.account-card .account-message:empty { display: none; }
.account-page:not(:has(#profile-form:not([hidden]))) .account-main { width:min(448px,100%); }
.account-page:not(:has(#profile-form:not([hidden]))) h1 { text-align:center; margin-bottom:32px; }
.account-card #google-button { display:flex;justify-content:center;align-items:center;min-height:48px;margin-top:0;border:1px solid #383838;border-radius:10px;background:#202020;box-sizing:border-box; }
.account-card #google-button:focus-within { outline:2px solid #8cb7e8;outline-offset:4px; }
.account-card #google-button iframe,.login-google iframe { color-scheme:light; }
.account-card #profile-form { margin: 26px 0 12px; padding: 4px 0 24px; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.profile-row { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 16px; }
.profile-row.identity-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.account-card #photo-preview{width:72px;height:72px;object-fit:cover;display:block;margin:0}
.account-card #photo-preview[hidden]{display:none}
.photo-field{margin-top:24px}
.photo-label{display:block;font-size:12px;margin-bottom:10px}.photo-label span{color:var(--encre-douce)}
.photo-picker{display:flex;align-items:center;gap:18px;padding:16px;border:1px solid var(--filet);border-radius:4px;background:var(--surface)}
.photo-avatar{display:grid;place-items:center;width:72px;height:72px;flex:0 0 72px;overflow:hidden;border:1px solid var(--filet);border-radius:3px;background:var(--fond);color:var(--encre-douce)}
.photo-avatar [hidden]{display:none}.photo-options{min-width:0}.photo-buttons{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.account-card #choose-photo{margin:0;padding:10px 12px;min-height:44px;background:transparent;border:1px solid var(--encre-douce);color:var(--encre);font:600 17px/1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.account-card #choose-photo:hover{border-color:var(--bleu);color:#71a8e6}
.account-card #remove-photo{margin:0;padding:8px 0;min-height:44px;background:transparent;color:var(--encre-douce);border:0;font-size:12px}
.account-card .photo-buttons button:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
.photo-options small{display:block;margin-top:8px;font-size:11px}
#photo-filename{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--encre-douce);margin-top:4px}
.account-card #photo-status{font-size:12px;margin:8px 0 0;overflow-wrap:anywhere;color:var(--encre-douce)}
#photo-status:empty,#photo-filename:empty{display:none}
@media(max-width:380px){.photo-picker{padding:12px;gap:12px}.photo-avatar{width:56px;height:56px;flex-basis:56px}.account-card #photo-preview{width:56px;height:56px}.account-card #choose-photo{font-size:15px;padding:10px}}
.account-card .profile-consent{display:flex;gap:10px;align-items:flex-start;margin-top:24px;line-height:1.5}
.account-card .profile-consent input{width:auto;flex:0 0 auto;margin:4px 0 0}
.account-card small{color:var(--encre-douce);font-size:12px}
.account-card input{min-width:0;box-sizing:border-box;max-width:100%}
.account-page:has(#profile-form:not([hidden])) .account-main{margin-top:3vh;width:min(560px,100%)}
.account-card select { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--filet); border-radius: 5px; background: var(--surface); color: var(--encre); font: inherit; }
.account-card select:focus-visible { outline: 3px solid #eba93e; outline-offset: 3px; }
.profile-actions { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
#profile-status { color: var(--encre-douce); font-size: 12px; overflow-wrap: anywhere; }

@media(min-width:1400px) { .study-page .notebook textarea { min-height: 420px; } }
@media(max-width:1200px) {
  .study-page .analysis { grid-template-columns: 1fr; }
  .study-page .notebook textarea { min-height: 300px; }
}
@media(max-width:900px) {
  .study-page .shell { grid-template-columns: minmax(0,1fr); }
  .study-page .sidebar { padding: 18px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .study-page .sidebar-heading, .study-page .sidebar-footer { display: none; }
  .study-page #new-folder { width: auto; }
  .study-page #folders { display: flex; overflow: auto; margin-top: 12px; }
  .study-page .folder { width: auto; min-width: 140px; max-width: 240px; flex-shrink: 0; }
}
@media(max-width:760px) {
  .account-main { margin-top: 8vh; }
  .study-page .topbar { padding: 0 18px; height: 64px; }
  .study-page main { padding: 24px 18px; }
  .study-page .sidebar { padding: 16px 18px; }
  .study-page .heading h1 { font-size: 32px; }
  .study-page .actions { flex-wrap: wrap; }
  .study-page .welcome, .study-page .empty { padding: 50px 0; }
}