/* ==========================================================================
   Ma semaine augmentée (08/11/2026) : la feuille du seul jeu, chargée après site.css et jeux-commun.css.
   Seulement les jetons de site.css (fond, surface, filet, encre, accent) : elle suit les quatre thèmes du pupitre,
   en clair comme en sombre. Cibles de 44 px, focus de 3 px (feuille commune), aucun dessin, rien au survol seul.
   Téléphone : une colonne, chaque tâche est un fieldset, ses trois états les uns sous les autres.
   ========================================================================== */
/* le jeu suit le chapô de près : les tâches doivent se voir dès l'arrivée (cette feuille n'est liée qu'à cette page) */
.cadre.bloc.jx {
  margin-top: clamp(1.25rem, 0.5rem + 2vw, 2.25rem);
}

.sa-tete .jx-aide {
  margin-left: auto;
}

.sa-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.sa-tete h2 {
  margin: 0;
}

.sa-question {
  max-width: var(--mesure);
  margin: 0.5rem 0 0;
  font-size: 1.0625rem;
}

.sa-avis p {
  margin: 0;
}

.sa-avis .jx-bouton {
  margin-top: 0.6rem;
}

.sa-evenement {
  margin: 0.75rem 0 0;
  font-weight: 600;
}

/* ---------- Les tâches ---------- */
.sa-taches {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

.sa-tache {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--filet);
  border-radius: var(--jx-rayon);
  background: var(--surface);
}

/* flottante, la légende devient une case de la grille comme une autre */
.sa-tache > legend {
  float: left;
  width: 100%;
  padding: 0;
  font-weight: 600;
  line-height: 1.35;
}

.sa-fiche {
  border-left: 4px solid var(--accent);
}

.sa-gauche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  min-width: 0;
  margin: 0;
}

.sa-temps {
  flex: 1 1 16rem;
  grid-template-columns: auto minmax(4rem, 1fr) auto;
}

.sa-temps .jx-jauge-nom {
  color: var(--encre-2);
  font-weight: 400;
}

.sa-temps .jx-jauge-mot {
  display: none;
}

.sa-heures {
  display: flex;
  gap: 0.5rem;
}

.jx .sa-pas {
  padding-inline: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.sa-hors {
  margin: 0;
}

/* les trois états : des boutons à bascule (aria-pressed), le choisi est plein et coché, jamais la couleur seule */
.sa-etats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sa-etats[hidden],
.sa-hors[hidden] {
  display: none;
}

.jx .sa-etat {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: var(--jx-cible);
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--accent);
  border-radius: var(--jx-rayon);
  background: var(--fond);
  color: var(--encre);
  font: inherit;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.jx .sa-etat:hover {
  border-color: var(--accent-fort);
}

.sa-etat-nom {
  font-weight: 600;
}

.sa-cout {
  color: var(--encre-2);
  font-size: 0.8125rem;
}

.sa-cout[hidden] {
  display: none;
}

.jx .sa-etat[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--fond);
}

.jx .sa-etat[aria-pressed="true"] .sa-cout {
  color: var(--fond);
}

.sa-etat[aria-pressed="true"] .sa-etat-nom::before {
  content: "✓ " / "";
}

.jx .sa-etat[aria-disabled="true"],
.jx .sa-etat[aria-disabled="true"]:hover {
  border: 2px dashed var(--encre-3);
  background: transparent;
  color: var(--encre-2);
  cursor: not-allowed;
}

/* ce qui reçoit le focus ne passe jamais sous la barre du bas, collée au bas de l'écran */
.sa-tache,
.sa-tache button,
.sa-tache summary {
  scroll-margin-bottom: 7.5rem;
}

/* ---------- La barre du bas : le temps pour s'organiser, et « Lancer la semaine », toujours à portée ---------- */
.sa-barre {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 1rem 0 0;
  padding: 0.6rem 1rem;
  border: 2px solid var(--filet);
  border-radius: var(--jx-rayon);
  background: var(--fond);
}

.sa-budget {
  margin: 0;
  font-size: 1.0625rem;
}

.sa-budget strong {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.jx .sa-lancer {
  padding: 0.6rem 1.6rem;
  font-size: 1.125rem;
}

/* ---------- Le journal de la semaine ---------- */
.sa-journal {
  display: grid;
  gap: 0.5rem;
  max-width: 48rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.sa-ligne {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0.85rem;
  border-left: 4px solid var(--filet);
  border-radius: 0 var(--jx-rayon) var(--jx-rayon) 0;
  background: var(--surface);
}

.sa-ligne--incident,
.sa-ligne--correction {
  border-left: 4px dashed var(--accent);
}

.sa-ligne--relu,
.sa-ligne--fiche,
.sa-ligne--seule {
  border-left-color: var(--accent);
}

.sa-jour {
  font-weight: 600;
}

.sa-perte {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.sa-totaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin: 0 0 1rem;
  font-size: 1.0625rem;
}

/* le libellé et sa valeur sur une ligne */
.sa-totaux > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35rem;
}

.sa-totaux dd {
  margin: 0;
}

.sa-totaux strong {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.sa-retenir {
  font-size: 1.0625rem;
}

.sa-retenir-titre {
  display: block;
  margin-bottom: 0.15rem;
}

/* le journal apparaît ligne par ligne, en 1,5 s au plus ; tout d'un coup si le mouvement est réduit */
@media (prefers-reduced-motion: no-preference) {
  .jx-apparait.sa-d1 { animation-delay: 120ms; }
  .jx-apparait.sa-d2 { animation-delay: 240ms; }
  .jx-apparait.sa-d3 { animation-delay: 360ms; }
  .jx-apparait.sa-d4 { animation-delay: 480ms; }
  .jx-apparait.sa-d5 { animation-delay: 600ms; }
  .jx-apparait.sa-d6 { animation-delay: 720ms; }
  .jx-apparait.sa-d7 { animation-delay: 840ms; }
  .jx-apparait.sa-d8 { animation-delay: 960ms; }
  .jx-apparait.sa-d9 { animation-delay: 1080ms; }
  .jx-apparait.sa-d10 { animation-delay: 1200ms; }
  .jx-apparait.sa-dfin { animation-delay: 1300ms; }
}

/* ---------- Le plan pour lundi ---------- */
.sa-feuille {
  max-width: var(--mesure);
}

/* le titre est déjà celui de l'écran ; il ne sert qu'à la feuille imprimée */
.sa-feuille-titre {
  display: none;
}

.sa-estimation {
  font-size: 1.0625rem;
}

.sa-regles li {
  margin-bottom: 0.35rem;
}

.sa-signature {
  max-width: var(--mesure);
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet);
}

.sa-signature p {
  margin: 0 0 0.5rem;
}

.sa-partage[hidden] {
  display: none;
}

@media print {
  .jx-feuille .sa-feuille-titre {
    display: block;
    margin: 0 0 0.75rem;
    font-size: 16pt;
    font-weight: 700;
  }

  .jx-feuille .jx-bilan-choix > li {
    border: 1px solid CanvasText;
    break-inside: avoid;
  }
}

/* ---------- Ordinateur : une ligne par tâche, le temps à gauche, les trois états à droite ---------- */
@media (min-width: 60em) {
  .sa-tache {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nom etats" "temps etats" "hors etats";
    align-items: center;
    column-gap: 1.5rem;
  }

  .sa-tache > legend {
    grid-area: nom;
  }

  .sa-gauche {
    grid-area: temps;
  }

  .sa-etats {
    grid-area: etats;
    flex-wrap: nowrap;
  }

  .sa-hors {
    grid-area: hors;
  }
}

/* ---------- Téléphone : les états les uns sous les autres, en pleine largeur ---------- */
@media (max-width: 48em) {
  .sa-etats {
    flex-direction: column;
  }

  .jx .sa-etat {
    width: 100%;
  }

  .sa-heures {
    flex: 1 1 100%;
  }

  .sa-heures .jx-bouton {
    flex: 1 1 0;
  }

  .sa-ligne {
    display: block;
  }

  .sa-jour {
    display: block;
  }

  .sa-perte {
    display: block;
    margin-top: 0.2rem;
  }

  .sa-barre {
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
  }

  .sa-budget {
    font-size: 0.9375rem;
  }

  .jx .sa-lancer {
    padding-block: 0.45rem;
    font-size: 1.0625rem;
  }

  .sa-tete .jx-aide {
    margin-left: 0;
  }

  .jx .sa-lancer {
    flex: 1 1 100%;
  }
}