:root {
  --fond: #f6f7f5;
  --surface: #ffffff;
  --texte: #1f2a24;
  --discret: #5b6b62;
  --accent: #2f6b4f;
  --erreur: #a4262c;
  --trait: #d5dcd7;
  --gris: #d3d9d5;
  --trait-sur-gris: #8f9b94;
  --teinte: #e4f1e9;
  /* Les gravités des alertes, de la plus haute à la plus basse : chacune a aussi son signe. */
  --critique: #8b1a1a;
  --grave: #b3400b;
  --normale: #7a5200;
  --information: #3b5b8a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
}

.marque {
  font-weight: 600;
}

.contenu {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

h1 {
  margin-top: 0;
  font-size: 1.5rem;
}

.formulaire label {
  display: block;
  margin-bottom: 0.25rem;
}

.formulaire input:not([type="hidden"]) {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 0.375rem;
  font: inherit;
}

.errorlist {
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--erreur);
  background: var(--surface);
  color: var(--erreur);
  list-style: none;
}

button {
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 0.375rem;
  background: var(--accent);
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}

.bouton-discret {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--trait);
  background: transparent;
  color: var(--discret);
}

.entete-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 1rem;
}

.la-main {
  color: var(--discret);
}

h2 {
  margin-top: 2rem;
  font-size: 1.2rem;
}

.formulaire input[type="checkbox"] {
  width: auto;
  margin: 0 0.5rem 0 0;
}

.formulaire fieldset {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.a-lire,
.avis {
  margin-bottom: 1.5rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
}

.a-lire p {
  margin: 0.25rem 0;
}

.a-lire code {
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

.comptes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.compte {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--trait);
  border-radius: 0.375rem;
  background: var(--surface);
}

.compte strong {
  margin-right: 0.5rem;
}

.roles {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
  color: var(--discret);
}

.verrou {
  margin: 0.25rem 0;
  color: var(--erreur);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.personne {
  margin: 0.25rem 0;
}

.relier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.relier select {
  max-width: 100%;
  padding: 0.25rem;
  border: 1px solid var(--trait);
  border-radius: 0.375rem;
  font: inherit;
}

.formulaire select,
.formulaire textarea {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 0.375rem;
  background: var(--surface);
  color: inherit;
  font: inherit;
}

.formulaire input:not([type="hidden"]) {
  max-width: 100%;
  min-width: 0;
}

.formulaire legend {
  padding: 0;
}

.refus {
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--erreur);
  background: var(--surface);
  color: var(--erreur);
}

.refus p {
  margin: 0;
}

.avis {
  margin-bottom: 1rem;
}

.avis p {
  margin: 0;
}

.ligne {
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--trait);
  border-radius: 0.375rem;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.ligne summary {
  cursor: pointer;
}

.ligne form {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--trait);
}

.ligne-valeur,
.ligne-note,
.ligne-reglage {
  display: block;
}

.ligne-note {
  color: var(--accent);
}

.ligne-reglage {
  color: var(--discret);
  font-size: 0.9rem;
}

.identifiant {
  margin-right: 0.25rem;
}

.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-bottom: 1.5rem;
}

.onglets a[aria-current="page"] {
  color: var(--texte);
  font-weight: 600;
  text-decoration: none;
}

.famille h2 {
  margin-top: 1.5rem;
}

.retrait {
  margin-top: 0.75rem;
}

.retrait summary {
  color: var(--erreur);
  cursor: pointer;
}

.retrait p {
  margin: 0 0 0.75rem;
}

.etat {
  color: var(--discret);
}

.initiales-precedentes {
  margin-bottom: 1rem;
  color: var(--discret);
}

.initiales-precedentes p {
  margin: 0;
}

.formulaire .helptext {
  margin: -0.75rem 0 1rem;
  color: var(--discret);
  font-size: 0.9rem;
}

.lignes-refusees {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--erreur);
}

.recharger {
  margin: 0 0 1rem;
}

.phrases {
  padding-left: 1.25rem;
}

.filtres {
  margin-bottom: 1rem;
}

.filtres summary {
  cursor: pointer;
}

.filtres form {
  margin-top: 0.75rem;
}

.filtres .actions {
  align-items: center;
}

.journal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.evenement {
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--trait);
  border-radius: 0.375rem;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.evenement p {
  margin: 0;
}

.evenement-auteur,
.evenement-commentaire {
  color: var(--discret);
  font-size: 0.9rem;
}

.changements {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

.champ {
  color: var(--discret);
}

.pages {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.pages a[rel="next"] {
  margin-left: auto;
}

/* Page d'une période : les lignes de chaque personne, puis les semaines, empilées. */

.groupe-de-personne h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
}

.mention {
  margin: 0 0 0.5rem;
  color: var(--accent);
}

.groupe-de-personne .etat {
  margin: 0 0 0.5rem;
}

.semaines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.semaines li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--trait);
  overflow-wrap: anywhere;
}

.curseurs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.curseurs li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--trait);
  overflow-wrap: anywhere;
}

.reglage {
  margin-top: 0.75rem;
}

.reglage summary {
  cursor: pointer;
}

.reglage form {
  margin-top: 0.75rem;
}

.semaines .parite {
  color: var(--discret);
}

/* Page d'attente d'un lancement. */

.progression {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 1rem;
}

.progression dt {
  color: var(--discret);
}

.progression dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.conflits li,
.journal-du-lancement li,
.dernier-lancement {
  overflow-wrap: anywhere;
}

.journal-du-lancement {
  margin-top: 1rem;
}

.journal-du-lancement summary {
  cursor: pointer;
}

/* Grille vétérinaires : les semaines d'un bloc s'empilent sur neuf colonnes ; seul le tableau
   défile, les initiales restent fixes. */

.contenu-large {
  max-width: 100rem;
}

.retour {
  margin: 0 0 0.5rem;
}

.defilement {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--trait);
  background: var(--surface);
}

.grille {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  line-height: 1.25;
}

.grille th,
.grille td {
  min-width: 2.75rem;
  padding: 0.25rem;
  border-right: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  background: var(--surface);
  text-align: center;
  vertical-align: top;
}

.grille thead th {
  white-space: nowrap;
}

.grille .en-tete-de-semaine th {
  border-top: 2px solid var(--discret);
  white-space: nowrap;
}

.grille .parite,
.grille .fermeture {
  font-weight: 400;
}

.grille .parite {
  color: var(--discret);
}

.grille .initiales {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 3rem;
  text-align: left;
}

.grille .j {
  min-width: 2.5rem;
  background: var(--fond);
  font-weight: 600;
  white-space: nowrap;
}

.grille .parite,
.grille .fermeture,
.grille .code,
.grille .formation,
.grille .annotation {
  display: block;
}

.grille .code {
  white-space: nowrap;
}

.grille .formation,
.grille .annotation {
  color: var(--discret);
}

.grille .annotation {
  max-width: 5rem;
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grille .teintee {
  background: var(--teinte);
}

.grille .grise,
.grille .fermee,
.grille th.jour.hors-periode {
  border-right-color: var(--trait-sur-gris);
  border-bottom-color: var(--trait-sur-gris);
  background: var(--gris);
  color: var(--texte);
}

.grille .grise .formation,
.grille .grise .annotation,
.grille .fermee .formation,
.grille .fermee .annotation {
  color: var(--texte);
}

.masque {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Alertes (story 2.19) : la marque d'une case ou d'un en-tête, sa gravité dite par sa couleur et
   par son signe ; le compteur, qui reste visible en haut de l'écran, le bandeau des alertes hors
   de la grille, le panneau d'une marque, collé en bas de l'écran pour se lire sur téléphone, et la
   liste. */

.gravite-critique {
  --gravite: var(--critique);
}

.gravite-grave {
  --gravite: var(--grave);
}

.gravite-normale {
  --gravite: var(--normale);
}

.gravite-information {
  --gravite: var(--information);
}

/* Le cadre de la gravité : pas pour une case ou un en-tête qui n'a que de l'information, qui
   garde sa marque « i » sans diluer les autres. */
.grille :is(td, th):is(.gravite-critique, .gravite-grave, .gravite-normale) {
  box-shadow: inset 0 0 0 2px var(--gravite);
}

/* La case ou l'en-tête où mène une ligne de la liste. */
.grille :target {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.marque-d-alerte {
  display: block;
  min-width: 1.75rem;
  min-height: 1.5rem;
  margin: 0.15rem auto 0;
  padding: 0 0.3rem;
  border-radius: 0.25rem;
  background: var(--gravite);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5rem;
}

/* Une case vide dit pourquoi (story 2.19, FR21) : sa marque, ou sans marque un bouton transparent
   qui couvre la case ; le titre de la case grise reste au survol. */
.grille td.case {
  position: relative;
}

.pourquoi-vide {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.pourquoi-vide:hover,
.pourquoi-vide:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.signe {
  font-weight: 700;
}

.compteur-des-alertes {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 0 0.5rem;
  padding: 0.25rem 0;
  background: var(--fond);
  overflow-wrap: anywhere;
}

.nombre-d-alertes {
  color: var(--gravite);
  font-weight: 600;
  white-space: nowrap;
}

.lien-des-alertes {
  margin: 0 0 1rem;
}

.alertes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.alertes li {
  padding: 0.35rem 0 0.35rem 0.6rem;
  border-left: 3px solid var(--gravite);
  overflow-wrap: anywhere;
}

.alertes .signe,
.alertes .gravite,
.liste-des-alertes .signe,
.liste-des-alertes .gravite {
  color: var(--gravite);
}

.qui {
  color: var(--discret);
}

.bandeau-des-alertes {
  max-width: 48rem;
  margin-bottom: 1.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--trait);
  background: var(--surface);
}

.bandeau-des-alertes h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

/* Dans le flux, à la fin de la page, qu'il allonge : collé en bas de l'écran, il laisse les
   dernières rangées se lire en défilant jusqu'au bout. */
.panneau-des-alertes {
  position: sticky;
  bottom: 0;
  z-index: 10;
  max-height: 45vh;
  overflow-y: auto;
  padding: 0.6rem 1rem;
  border-top: 2px solid var(--discret);
  background: var(--surface);
}

.panneau-des-alertes:empty {
  display: none;
}

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

.panneau h2 {
  margin: 0;
  font-size: 1rem;
}

.panneau h3 {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

.panneau ul {
  margin: 0.5rem 0;
}

.panneau .raisons {
  padding-left: 1.25rem;
}

.panneau p {
  margin: 0.5rem 0 0;
}

.liste-des-alertes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.alerte-de-la-liste {
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--trait);
  border-left: 4px solid var(--gravite);
  border-radius: 0.375rem;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.alerte-de-la-liste p {
  margin: 0;
}

.alerte-jour {
  color: var(--discret);
}