/* Mobile d'abord (375 px), cibles tactiles de 44 px minimum (static/app.css de v0.1.7, servi
   à /static/app.css par les pages Next.js comme par les pages des routes d'authentification). */
:root {
  --fond: #f7f7f5;
  --texte: #1b1b1b;
  --discret: #5c5c5c;
  --accent: #0b5cad;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #141414;
    --texte: #ececec;
    --discret: #a0a0a0;
    --accent: #6aaeff;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font:
    16px/1.5 system-ui,
    sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  padding: 16px;
  max-width: 40rem;
  width: 100%;
  margin: 0 auto;
}

/* Hauteur tactile : boutons, champs et liens de navigation, pas les liens dans le texte. */
button,
input,
select,
nav a,
a.bouton {
  min-height: 44px;
}
a {
  color: var(--accent);
}

footer {
  padding: 16px;
  font-size: 0.875rem;
  color: var(--discret);
  text-align: center;
}

/* Authentification. */
h1 {
  font-size: 1.5rem;
  margin: 0 0 16px;
}
button {
  font: inherit;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--discret);
  background: transparent;
  color: var(--texte);
}
button.principal {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fond);
  width: 100%;
}
input {
  font: inherit;
  padding: 8px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--discret);
  background: transparent;
  color: var(--texte);
}
label {
  display: block;
  margin-bottom: 12px;
}
details {
  margin-top: 32px;
}
summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.pile {
  margin-top: 12px;
}
.discret {
  color: var(--discret);
}
.erreur {
  color: #b3261e;
  font-weight: 600;
}
.codes {
  font-size: 1.125rem;
  line-height: 2;
}
.codes code {
  user-select: all;
}

/* Suivi des paris : une colonne, lisible au soleil (contraste fort), cibles de 44 px. */
:root {
  --trait: #8a8a8a;
  --surface: #ffffff;
  --orange-texte: #6b3500;
  --orange-fond: #fff1db;
  --orange-bord: #c26a00;
  --rouge-texte: #8c140c;
  --rouge-fond: #fde9e7;
  --rouge-bord: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --trait: #7a7a7a;
    --surface: #1f1f1f;
    --orange-texte: #ffd6a0;
    --orange-fond: #3a2608;
    --orange-bord: #e08a20;
    --rouge-texte: #ffc4bd;
    --rouge-fond: #3d1310;
    --rouge-bord: #f2685c;
  }
}

h2 {
  font-size: 1.125rem;
  margin: 28px 0 12px;
}
label {
  font-weight: 600;
  margin-bottom: 4px;
}
select {
  font: inherit;
  padding: 8px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--trait);
  background: var(--surface);
  color: var(--texte);
}
input {
  border-color: var(--trait);
  background: var(--surface);
}
input[aria-invalid="true"],
select[aria-invalid="true"] {
  border: 2px solid var(--rouge-bord);
}
input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Boutons : pleine largeur, le principal en aplat. */
button,
a.bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: 600;
}
a.bouton {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
}
a.bouton.principal {
  background: var(--accent);
  color: var(--fond);
}
button.secondaire {
  border-color: var(--trait);
}
.actions {
  display: grid;
  gap: 8px;
  margin: 20px 0;
}

/* Navigation entre les jours et retour. */
nav.jours {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  font-weight: 600;
}
nav.retour {
  margin-bottom: 8px;
}

/* Bilan du jour : le chiffre misé face au budget, l'écart en dessous. */
.bilan {
  border: 2px solid var(--texte);
  border-radius: 12px;
  padding: 16px;
  background: var(--surface);
}
.bilan-tete {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bilan-libelle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--discret);
}
.bilan-chiffre {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.bilan .discret {
  margin: 4px 0 0;
  font-size: 0.875rem;
}
.ecart {
  margin: 12px 0 0;
  font-weight: 700;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
.ecart.depasse {
  color: var(--rouge-texte);
}
.bilan-detail {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 0.9375rem;
}
.bilan-detail div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--trait);
  padding-top: 4px;
}
.bilan-detail dt {
  color: var(--discret);
}
.bilan-detail dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Paris du plan. */
.pari {
  border-top: 1px solid var(--trait);
  padding: 12px 0;
  display: grid;
  gap: 8px;
}
.pari p {
  margin: 0;
}
.pari-titre {
  font-weight: 700;
}
.pari-montants {
  font-variant-numeric: tabular-nums;
}
.placer {
  display: grid;
  gap: 8px;
}
.deconnexion {
  margin-top: 40px;
}

/* Formulaire de saisie. */
.saisie {
  display: grid;
  gap: 16px;
}
.saisie > label,
.saisie label + input {
  margin-bottom: 0;
}
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.duo > div {
  min-width: 0;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
fieldset.selection {
  border-left: 4px solid var(--accent);
  padding-left: 12px;
  display: grid;
  gap: 4px;
}
fieldset.selection .duo {
  margin: 8px 0;
}
fieldset.selection label {
  margin-top: 8px;
}
/* « Retirer » : inutile quand il ne reste qu'une sélection. */
#selections > fieldset.selection:only-child .retirer {
  display: none;
}
fieldset.selection .retirer {
  margin: 4px 0;
}
legend {
  font-weight: 700;
  padding: 0;
  margin-bottom: 4px;
}
.choix {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choix legend {
  width: 100%;
}
label.case {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 500;
  margin: 0;
}
label.case input {
  width: 24px;
  min-height: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--accent);
}
.choix label.case {
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 0 12px;
}
.choix label.case:has(input:checked) {
  border: 2px solid var(--accent);
}
.boost-champs {
  display: none;
  margin-top: 8px;
}
.boost:has(input[name="boost"]:checked) .boost-champs {
  display: grid;
}
details.facultatif {
  margin-top: 0;
}
details.facultatif[open] {
  display: grid;
  gap: 8px;
}
.champ-erreur {
  color: var(--rouge-texte);
  font-weight: 600;
  margin: 4px 0 0;
}
label.confirmer {
  border: 2px solid var(--rouge-bord);
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
}

/* Alertes du profil : jamais de blocage, l'orange informe, le rouge demande confirmation. */
.alertes {
  display: grid;
  gap: 8px;
}
.alertes:empty {
  display: none;
}
.conseil {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.alerte {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 6px solid;
  font-weight: 600;
}
.alerte.orange {
  color: var(--orange-texte);
  background: var(--orange-fond);
  border-color: var(--orange-bord);
}
.alerte.rouge {
  color: var(--rouge-texte);
  background: var(--rouge-fond);
  border-color: var(--rouge-bord);
}
.alerte.aide {
  font-weight: 500;
}
.alerte a {
  color: inherit;
}
.erreur {
  color: var(--rouge-texte);
}

/* Navigation principale : quatre rubriques sur une ligne à 375 px. */
nav.principale {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--trait);
  background: var(--surface);
}
nav.principale a {
  justify-content: center;
  text-decoration: none;
  color: var(--texte);
  font-weight: 600;
  border-bottom: 3px solid transparent;
}
nav.principale a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Onglets de la liste des paris. */
nav.onglets {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--trait);
}
nav.onglets a {
  flex: 1;
  justify-content: center;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
nav.onglets a[aria-current="page"] {
  border-bottom-color: var(--accent);
}
.etiquette {
  font-weight: 700;
  color: var(--orange-texte);
}
.ecart-garde {
  font-weight: 700;
  color: var(--orange-texte);
  font-variant-numeric: tabular-nums;
}

/* Règlement : trois résultats côte à côte, l'état choisi plein (pas seulement en couleur). */
.selections-reglement {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.selections-reglement li {
  border-left: 4px solid var(--accent);
  padding-left: 12px;
  display: grid;
  gap: 4px;
}
.selections-reglement p {
  margin: 0;
}
.resultats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.resultats button {
  padding: 8px 4px;
}
.resultats button[aria-pressed="true"] {
  border-width: 3px;
}
.resultats button.gagnee[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fond);
}
.resultats button.perdue[aria-pressed="true"] {
  background: var(--rouge-fond);
  border-color: var(--rouge-bord);
  color: var(--rouge-texte);
}
.resultats button.annulee[aria-pressed="true"] {
  background: var(--orange-fond);
  border-color: var(--orange-bord);
  color: var(--orange-texte);
}
.reglement {
  display: grid;
  gap: 12px;
}
.reglement h2 {
  margin: 12px 0 0;
}
.attendu p {
  margin: 0;
}
.alerte p {
  margin: 0;
}
.alerte p + p {
  margin-top: 4px;
}
.rapprochement p {
  margin: 0;
}

/* Réglages. */
.choix-pile {
  flex-direction: column;
}
.choix-pile label.case {
  padding: 8px 12px;
}
.liste {
  padding-left: 20px;
}
.liste li {
  margin-bottom: 8px;
}