/* ═══════════════════════════════════════════════════════════
   CourtPick — app.css
   Mobile d'abord. Thème clair et sombre, décidés par le système.
   Une seule couleur d'accent : l'orange du ballon. Le vert et le
   rouge sont réservés au résultat d'un prono, nulle part ailleurs.
═══════════════════════════════════════════════════════════ */

:root {
  --titre: 'Bricolage Grotesque', system-ui, sans-serif;
  --texte: 'DM Sans', system-ui, -apple-system, sans-serif;
  --r:  14px;
  --r2: 10px;

  --bg:    #ffffff;
  --sf:    #f4f5f7;
  --sf2:   #eaecf0;
  --bd:    rgba(16,20,28,0.10);
  --bd2:   rgba(16,20,28,0.18);
  --fg:    #11141a;
  --fg2:   #4b5261;
  --fg3:   #7b8393;

  --ac:    #d9541f;
  --ac-d:  #b7431425;
  --ac-sf: rgba(217,84,31,0.10);
  --on-ac: #ffffff;

  --ok:    #17794a;
  --ok-sf: rgba(23,121,74,0.12);
  --ko:    #c02b32;
  --ko-sf: rgba(192,43,50,0.10);
  --at:    #9a6200;
  --at-sf: rgba(154,98,0,0.12);

  --ombre: 0 1px 2px rgba(16,20,28,0.05), 0 4px 16px rgba(16,20,28,0.06);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:    #0b0c0e;
    --sf:    #17191d;
    --sf2:   #202329;
    --bd:    rgba(255,255,255,0.10);
    --bd2:   rgba(255,255,255,0.18);
    --fg:    #f1f2f4;
    --fg2:   #b6bcc7;
    --fg3:   #848b98;

    --ac:    #ff7a44;
    --ac-d:  #ff8f60;
    --ac-sf: rgba(255,122,68,0.14);
    --on-ac: #21100a;

    --ok:    #3ecf8e;
    --ok-sf: rgba(62,207,142,0.14);
    --ko:    #ff6b72;
    --ko-sf: rgba(255,107,114,0.13);
    --at:    #f0ac3c;
    --at-sf: rgba(240,172,60,0.14);

    --ombre: 0 1px 2px rgba(0,0,0,0.4), 0 4px 18px rgba(0,0,0,0.35);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attribut hidden pilote la moitié de l'interface : écrans, panneaux,
   états vides, pastilles. Une règle de classe qui pose display: flex a
   plus de poids que la feuille par défaut du navigateur, et l'élément
   réapparaît. Le !important est ici la bonne réponse : hidden veut dire
   caché, sans exception. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  font-family: var(--texte);
  background: var(--bg);
  color: var(--fg);
  color-scheme: light dark;
  font-size: 16px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.2; }
strong { font-weight: 700; }
.dim { color: var(--fg3); }

/* ── Écrans ─────────────────────────────────────────────── */
.screen { display: none; height: 100dvh; }
.screen.on { display: flex; flex-direction: column; }

/* ── Boutons et champs ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border-radius: var(--r2); font-weight: 700; font-size: 15px;
  background: var(--sf2); color: var(--fg);
  transition: transform .06s, opacity .15s;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-primary { background: var(--ac); color: var(--on-ac); }
.btn-ghost   { background: transparent; border: 1.5px solid var(--bd2); }
.btn-danger  { background: var(--ko-sf); color: var(--ko); }
.btn-block   { display: flex; width: 100%; margin-top: 14px; }
.btn-sm      { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 9px; }
.btn-link {
  display: block; width: 100%; margin-top: 14px; padding: 10px;
  color: var(--fg3); font-size: 14px; font-weight: 600; text-align: center;
}
.btn-link:active { color: var(--fg); }

.f-label { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 700; color: var(--fg2); }
.f-input {
  width: 100%; min-height: 50px; padding: 0 14px;
  background: var(--sf); border: 1.5px solid var(--bd); border-radius: var(--r2);
  outline: none;
}
.f-input:focus { border-color: var(--ac); background: var(--bg); }
.f-code { font-size: 26px; letter-spacing: 10px; text-align: center; font-weight: 700; }

.msg { min-height: 20px; margin-top: 10px; font-size: 14px; color: var(--ko); }
.msg.ok { color: var(--ok); }

/* ── Connexion ──────────────────────────────────────────── */
.auth-wrap {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(28px + var(--safe-t)) 22px calc(28px + var(--safe-b));
  max-width: 460px; margin: 0 auto; width: 100%;
}
.auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.logo-mark { color: var(--ac); display: flex; }
.logo-name { font-family: var(--titre); font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.logo-tag  { font-size: 13px; color: var(--fg3); line-height: 1.35; max-width: 22ch; }
.auth-card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r); padding: 22px; }
.auth-title { font-size: 24px; margin-bottom: 6px; }
.auth-sub { font-size: 15px; color: var(--fg2); }
.auth-legal { margin-top: 22px; font-size: 12px; color: var(--fg3); text-align: center; }

/* ── Bienvenue ──────────────────────────────────────────── */
.ob-wrap {
  flex: 1; overflow-y: auto;
  padding: calc(30px + var(--safe-t)) 22px calc(30px + var(--safe-b));
  max-width: 520px; margin: 0 auto; width: 100%;
}
.ob-num   { font-size: 12px; font-weight: 700; color: var(--ac); letter-spacing: .8px; }
.ob-title { font-size: 26px; margin: 8px 0 8px; }
.ob-sub   { font-size: 15px; color: var(--fg2); margin-bottom: 18px; }

.seg { display: flex; gap: 6px; background: var(--sf); border-radius: var(--r2); padding: 4px; margin-bottom: 12px; }
.seg-btn { flex: 1; min-height: 38px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--fg2); }
.seg-btn.on { background: var(--bg); color: var(--fg); box-shadow: var(--ombre); }

.liste { margin-top: 12px; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.liste-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; margin-bottom: 8px; text-align: left;
  background: var(--sf); border: 1.5px solid transparent; border-radius: var(--r2);
}
.liste-item.on { border-color: var(--ac); background: var(--ac-sf); }
.liste-item-txt { flex: 1; min-width: 0; }
.liste-item-nom { font-weight: 600; font-size: 15px; }
.liste-item-sub { font-size: 13px; color: var(--fg3); }
.liste-item-add { color: var(--ac); font-size: 20px; font-weight: 700; }

/* Fil d'Ariane du sélecteur : on est entré dans un club, il faut
   pouvoir en ressortir sans fermer tout le panneau. */
.fil {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 4px; font-size: 13px; color: var(--fg3);
}
.fil button { color: var(--ac); font-weight: 700; font-size: 13px; flex: none; }
.fil span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            font-weight: 600; color: var(--fg); }

/* La liste des championnats d'un club fait facilement trente lignes.
   Le bouton de validation ne doit pas être au bout : il se colle en bas
   de l'écran, au-dessus du défilement. */
.ob-pied {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: 10px;
  padding: 12px 0 calc(6px + var(--safe-b));
  background: var(--bg);
  box-shadow: 0 -14px 18px -6px var(--bg);
}
.ob-pied .btn-block { margin-top: 0; }
.ob-pied .btn-link  { margin-top: 6px; padding: 6px; }

/* « seulement les matchs de X » : une porte de sortie, pas une offre.
   En orange sous chaque championnat, elle doublait la longueur de la
   liste et tirait l'œil autant que le choix principal. */
.lien-mini {
  display: block; width: 100%; text-align: left;
  margin: -6px 0 10px; padding: 0 14px 2px;
  font-size: 12px; color: var(--fg3);
}
.lien-mini:active { color: var(--fg2); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--ac-sf); color: var(--ac); font-size: 13px; font-weight: 600;
}
.chip button { color: inherit; opacity: .7; font-size: 15px; line-height: 1; }

/* ── Coquille de l'app ──────────────────────────────────── */
.hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + var(--safe-t)) 16px 10px;
  background: var(--bg); border-bottom: 1px solid var(--bd);
  position: sticky; top: 0; z-index: 5;
}
.hd-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hd-mark  { color: var(--ac); display: flex; flex: none; }
.hd-word  { font-family: var(--titre); font-size: 19px; font-weight: 800; letter-spacing: -.3px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-btn {
  flex: none; width: 34px; height: 34px; border-radius: 999px;
  background: var(--sf); color: var(--fg2); font-weight: 700;
}

.body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 14px 16px calc(96px + var(--safe-b)); }
.vue  { display: block; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--bd);
  padding-bottom: var(--safe-b);
}
.nav-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px 8px; color: var(--fg3); font-size: 11px; font-weight: 600;
}
.nav-btn.on { color: var(--ac); }
.nav-ico { font-size: 19px; line-height: 1; filter: grayscale(1) opacity(.75); }
.nav-btn.on .nav-ico { filter: none; }
.nav-pastille {
  position: absolute; top: 6px; left: 50%; margin-left: 6px;
  min-width: 17px; height: 17px; padding: 0 5px;
  background: var(--ac); color: var(--on-ac);
  border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
}

/* ── États communs ──────────────────────────────────────── */
.loading { display: flex; justify-content: center; padding: 40px 0; }
.spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--bd2); border-top-color: var(--ac);
  animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

.vide { text-align: center; padding: 44px 20px; }
.vide-ico { font-size: 38px; margin-bottom: 10px; }
.vide h2 { font-size: 19px; margin-bottom: 6px; }
.vide p  { color: var(--fg2); font-size: 15px; max-width: 340px; margin: 0 auto 18px; }

.intro { font-size: 14px; color: var(--fg3); margin-bottom: 14px; }
.deux-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.jour { margin: 20px 0 10px; font-size: 13px; font-weight: 800; color: var(--fg3);
        text-transform: uppercase; letter-spacing: .7px; }
.jour:first-child { margin-top: 4px; }

.bandeau {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; margin-bottom: 16px;
  background: var(--ac-sf); border-radius: var(--r); color: var(--fg);
  font-size: 14px; font-weight: 600;
}
.bandeau b { color: var(--ac); }
.attente { margin-top: 20px; text-align: center; font-size: 14px; color: var(--fg3); }

/* ── Carte de match ─────────────────────────────────────── */
.match {
  background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r);
  margin-bottom: 10px; overflow: hidden;
}
.match-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; background: var(--sf2);
  font-size: 12px; color: var(--fg3); font-weight: 600;
}
.match-hd .comp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-hd .heure { flex: none; }
.match-corps { padding: 12px 14px 14px; }
.equipes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.eq {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px; border-radius: var(--r2);
  border: 1.5px solid transparent; background: var(--bg);
  font-size: 14px; font-weight: 600; text-align: center; min-height: 62px;
  justify-content: center;
}
.eq.pick { border-color: var(--ac); background: var(--ac-sf); color: var(--ac); }
.eq.gagne { border-color: var(--ok); background: var(--ok-sf); color: var(--ok); }
.eq-nom { line-height: 1.25; }
.vs { font-size: 12px; font-weight: 800; color: var(--fg3); }
.score { font-family: var(--titre); font-size: 22px; font-weight: 800; }

.ecart { margin-top: 12px; }
.ecart-lb { display: flex; justify-content: space-between; align-items: baseline;
            font-size: 13px; color: var(--fg2); margin-bottom: 6px; }
.ecart-val { font-family: var(--titre); font-size: 17px; font-weight: 800; color: var(--ac); }
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--sf2);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--ac); border: 3px solid var(--bg); box-shadow: var(--ombre);
}
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--sf2); }
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ac); border: 3px solid var(--bg);
}

.match-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px;
}
.match-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tag {
  padding: 3px 8px; border-radius: 999px; background: var(--sf2);
  font-size: 11px; font-weight: 700; color: var(--fg3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.tag.ac { background: var(--ac-sf); color: var(--ac); }
.tag.ok { background: var(--ok-sf); color: var(--ok); }
.tag.ko { background: var(--ko-sf); color: var(--ko); }
.tag.at { background: var(--at-sf); color: var(--at); }

.enregistre { font-size: 13px; font-weight: 700; color: var(--ok); }

/* ── Cartes génériques ──────────────────────────────────── */
.carte {
  display: block; width: 100%; text-align: left;
  background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r);
  padding: 14px; margin-bottom: 10px;
}
.carte-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.carte-nom { font-family: var(--titre); font-size: 17px; font-weight: 700; }
.carte-sub { font-size: 13px; color: var(--fg3); margin-top: 2px; }
.carte-stat { display: flex; gap: 18px; margin-top: 12px; }
.stat-val { font-family: var(--titre); font-size: 20px; font-weight: 800; }
.stat-lb  { font-size: 11px; color: var(--fg3); text-transform: uppercase; letter-spacing: .5px; }

.section-titre {
  margin: 22px 0 10px; font-size: 13px; font-weight: 800; color: var(--fg3);
  text-transform: uppercase; letter-spacing: .7px;
}

/* ── Classement ─────────────────────────────────────────── */
.cl-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--bd);
}
.cl-ligne:last-child { border-bottom: 0; }
.cl-ligne.moi { background: var(--ac-sf); border-radius: var(--r2); border-bottom-color: transparent; }
.cl-rang {
  flex: none; width: 30px; text-align: center;
  font-family: var(--titre); font-size: 16px; font-weight: 800; color: var(--fg3);
}
.cl-ligne.moi .cl-rang { color: var(--ac); }
.cl-rang.or { color: #c9971f; }
.cl-nom { flex: 1; min-width: 0; font-weight: 600; font-size: 15px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-detail { font-size: 12px; color: var(--fg3); font-weight: 400; }
.cl-pts { flex: none; font-family: var(--titre); font-size: 17px; font-weight: 800; }
.cl-evo { flex: none; width: 22px; text-align: center; font-size: 12px; font-weight: 700; }
.cl-evo.up { color: var(--ok); } .cl-evo.dn { color: var(--ko); }
.cl-boite { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r);
            padding: 4px 0; margin-bottom: 10px; }

/* ── Panneau ────────────────────────────────────────────── */
.sheet-fond {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(8,10,14,0.45); backdrop-filter: blur(2px);
  animation: parait .18s ease;
}
@keyframes parait { from { opacity: 0; } }
.sheet {
  position: fixed; z-index: 21; left: 0; right: 0; bottom: 0;
  max-height: 92dvh; display: flex; flex-direction: column;
  background: var(--bg); border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.28);
  animation: monte .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes monte { from { transform: translateY(100%); } }
.sheet-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 10px; border-bottom: 1px solid var(--bd);
}
.sheet-close { width: 34px; height: 34px; border-radius: 999px; background: var(--sf); color: var(--fg2); }
.sheet-titre { flex: 1; text-align: center; font-family: var(--titre); font-weight: 700; font-size: 16px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-spacer { width: 34px; flex: none; }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
              padding: 16px 16px calc(24px + var(--safe-b)); }
@media (min-width: 700px) {
  .sheet { left: 50%; transform: translateX(-50%); width: 560px; border-radius: 18px;
           bottom: 24px; max-height: 84dvh; }
  @keyframes monte { from { transform: translateX(-50%) translateY(30px); opacity: 0; } }
}

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + var(--safe-b));
  max-width: 88vw; padding: 11px 18px; border-radius: 999px;
  background: var(--fg); color: var(--bg);
  font-size: 14px; font-weight: 600; text-align: center;
  box-shadow: var(--ombre); animation: parait .15s ease;
}
.toast.ko { background: var(--ko); color: #fff; }

/* ── Divers ─────────────────────────────────────────────── */
.ligne-reglage {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px; background: var(--sf); border: 1px solid var(--bd);
  border-radius: var(--r); margin-bottom: 8px;
}
.ligne-reglage-txt { min-width: 0; }
.ligne-reglage-nom { font-weight: 600; font-size: 15px; }
.ligne-reglage-sub { font-size: 13px; color: var(--fg3); }
.code-box {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; background: var(--sf); border: 1.5px dashed var(--bd2);
  border-radius: var(--r); margin: 10px 0;
  font-family: var(--titre); font-size: 26px; font-weight: 800; letter-spacing: 4px;
}
.aide-p { font-size: 15px; color: var(--fg2); margin-bottom: 14px; }
.aide-p b { color: var(--fg); }