/* ==========================================================================
   XULLIBET DTN — complément de xullibet.css (design system commun de la suite).
   Les écrans DTN gardent leur balisage (card-header, kpi-card, badge-*, form-control…) :
   ce fichier les habille avec les jetons de la charte (vert doux, cartes 28 px, Inter).
   ========================================================================== */

/* Alias des anciennes variables vers les jetons de la charte */
:root {
  --c-green: var(--brand);
  --c-green-dark: var(--brand-700);
  --c-green-light: var(--panel);
  --c-green-mid: color-mix(in srgb, var(--brand) 22%, var(--surface));
  --c-text: var(--text);
  --c-muted: var(--muted);
  --c-border: var(--line);
  --c-bg: var(--bg);
  --c-bg-light: var(--surface-2);
  --c-white: var(--surface);
  --c-amber: var(--warn-ink);
  --c-amber-light: var(--warn-bg);
  --c-red: var(--ko-ink);
  --c-red-light: var(--ko-bg);
  --c-blue: #1E4D6B;
  --c-blue-light: #E4EEF5;
  --radius: var(--r-md);
  --radius-lg: var(--r-xl);
  --c-sidebar: var(--login-panel);
  --c-link: #fff;
  --c-link-sub: rgb(255 255 255 / .8);
}

/* ---- Barre du haut ------------------------------------------------------ */
.topbar-titre { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; margin: 0; }
.notif { margin: 0; }
.notif-btn { position: relative; width: 40px; padding: 0; }
.notif-count {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--ko); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg);
}
@media (max-width: 900px) { .topbar-date { display: none; } }

/* ---- Cartes -------------------------------------------------------------- */
.card { overflow: hidden; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px 28px 0; }
.card-header h2, .card-head h2 { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.card-header + .card-body { padding-top: 16px; }
.card-header + .table-wrap { margin-top: 16px; }
.card-footer { border-top: 1px solid var(--line); padding: 16px 28px; background: var(--surface-2); }
.card-footer:has(.pager) { padding: 0; background: none; }
.card-footer .pager { border-top: 0; }
.card .card-body[style*="padding:0"] > div:last-child { border-bottom: 0 !important; }

/* ---- Indicateurs (grands chiffres) ---------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.kpi-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card);
  padding: 22px 24px; min-height: 132px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
}
.kpi-card .kpi-value { order: 1; font-size: 40px; font-weight: 750; letter-spacing: -.04em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-card .kpi-label { order: 0; margin-bottom: auto; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.kpi-card:first-child { background: var(--panel); border-color: color-mix(in srgb, var(--brand) 16%, var(--line)); }
.kpi-card.amber .kpi-value { color: var(--warn-ink); }
.kpi-card.red .kpi-value { color: var(--ko-ink); }
.kpi-card.blue .kpi-value { color: var(--brand-ink); }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Tableaux ------------------------------------------------------------- */
.table th { background: var(--panel-head); text-align: left; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-700); padding: 16px 20px; }
.table th:first-child, .table td:first-child { padding-left: 28px; }
.table td { padding: 16px 20px; }

/* ---- Pastilles de statut -------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 650; white-space: nowrap; background: var(--none-bg); color: var(--none-ink);
}
.badge-green { background: var(--ok-bg); color: var(--ok-ink); }
.badge-amber { background: var(--warn-bg); color: var(--warn-ink); }
.badge-red   { background: var(--ko-bg); color: var(--ko-ink); }
.badge-blue  { background: var(--panel); color: var(--brand-ink); }
.badge-gray  { background: var(--none-bg); color: var(--none-ink); }

/* ---- Boutons --------------------------------------------------------------- */
.btn-icon { width: 40px; min-height: 40px; padding: 0; }

/* ---- Formulaires ----------------------------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-label { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.form-control {
  width: 100%; min-height: 48px; padding: 10px 16px; font: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
textarea.form-control { min-height: 110px; resize: vertical; line-height: 1.5; }
select.form-control { -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236A746E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--focus); }
.form-control.error { border-color: var(--ko); }
form[method="GET"] .form-control, form[method="get"] .form-control { min-height: 42px; width: auto; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.form-error { font-size: 13px; color: var(--ko-ink); }
@media (max-width: 700px) { .form-grid-2, .form-grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---- Messages -------------------------------------------------------------- */
.alert { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; }
.alert-success { background: var(--ok-bg); color: var(--ok-ink); }
.alert-error   { background: var(--ko-bg); color: var(--ko-ink); }
.alert-warning { background: var(--warn-bg); color: var(--warn-ink); }
.alert-info    { background: var(--panel); color: var(--brand-700); }
.alert svg { flex: none; margin-top: 3px; }

/* ---- Avatars --------------------------------------------------------------- */
img.avatar { object-fit: cover; }
.avatar-sm { --s: 32px; width: 32px; height: 32px; }
.avatar-md { --s: 40px; width: 40px; height: 40px; }
.avatar-lg { --s: 64px; width: 64px; height: 64px; }

/* ---- Éléments propres à la DTN ---------------------------------------------- */
.player-number {
  width: 32px; height: 32px; border-radius: 10px; background: var(--panel); color: var(--brand-ink);
  font-size: 13px; font-weight: 750; display: grid; place-items: center; flex-shrink: 0;
}
.progress { height: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.progress-bar { height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width .3s var(--ease-out); }
.vignette { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); }

/* Utilitaires utilisés par les écrans DTN */
.flex-center { display: flex; align-items: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 20px; } .mb-6 { margin-bottom: 28px; }
.text-sm { font-size: 14px; } .text-xs { font-size: 12.5px; }
.text-muted { color: var(--muted); }
.font-medium { font-weight: 600; color: var(--ink); }

/* ---- Paramètres ------------------------------------------------------------- */
.couleur-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.couleur-ligne input[type=color] { width: 48px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 3px; background: var(--surface); cursor: pointer; }
.couleur-ligne code { font-size: 13px; color: var(--muted); min-width: 76px; }
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.modules label { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); font-weight: 550; cursor: pointer; background: var(--surface-2); }
.modules label:has(input:checked) { border-color: var(--brand); background: var(--panel); }
.modules input { width: 18px; height: 18px; accent-color: var(--brand); }
.apercu-marque .brand-mark, .apercu-marque .brand-logo { width: 64px; height: 64px; border-radius: 18px; font-size: 20px; }
.brand-logo { width: 38px; height: 38px; border-radius: 12px; object-fit: contain; background: var(--surface); }

/* ---- Page de connexion « Orbite » : la DTN mise en avant ----------------------- */
.orbite-bras.est-autre .orbite-pastille { filter: grayscale(1); opacity: .45; }
.orbite-bras.est-autre .orbite-nom { opacity: .55; }
.orbite-bras.est-courante .orbite-pastille { box-shadow: 0 0 0 4px rgb(255 255 255 / .55), 0 12px 32px -8px rgb(0 0 0 / .5); }
.auth-form.carte-large { max-width: 620px !important; }
.auth-form a { color: var(--brand-ink); font-weight: 600; }

/* ---- Pages publiques -------------------------------------------------------- */
.auth.public { background: var(--bg); align-items: start; padding-top: 40px; }
.public-card { max-width: 720px; }
.public-card .card-pad { padding: 32px 36px; }
@media (max-width: 700px) { .public-card .card-pad { padding: 24px 20px; } .form-grid { grid-template-columns: minmax(0, 1fr); } .form-grid .span-2 { grid-column: auto; } }

/* ---- Écrans DTN hérités : grilles en ligne -> pile sur téléphone ------------------ */
@media (max-width: 900px) {
  .main [style*="grid-template-columns:1fr 320px"],
  .main [style*="grid-template-columns:1fr 1fr"],
  .main [style*="grid-template-columns: 1fr 1fr"],
  .main [style*="grid-template-columns:2fr 1fr"],
  .main [style*="grid-template-columns:1fr 340px"],
  .main [style*="grid-template-columns:repeat(4,1fr)"],
  .main [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---- Photo des joueurs ---------------------------------------------------- */
.photo-joueur { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.photo-joueur img { width: 120px; height: 150px; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); }
.photo-fiche { display: block; width: 150px; height: 190px; object-fit: cover; margin: 0 auto 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); box-shadow: var(--shadow-card); }

/* Photo de profil (Mon profil, fiche utilisateur) */
.photo-profil { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.photo-profil-img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); flex: none; }
.photo-profil-vide { display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 30px; font-weight: 700; border: 0; }
.photo-profil-img[hidden] { display: none; }
img.avatar { object-fit: cover; border-radius: 50%; }