/* Les valeurs viennent de /design/jetons.css, chargé avant cette feuille. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: var(--interligne);
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
main {
  max-width: 32rem;
  margin: 0 auto;
  padding: var(--e6) var(--e4);
}
/* Écrans d'un site ou d'une équipe : une navigation (bandeau en haut, barre latérale dès 900 px) et une colonne bornée. */
.mise-en-page main {
  width: 100%;
  max-width: var(--l-page);
  padding: var(--e6) var(--e4);
}
.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e4);
  padding: var(--e3) var(--e4);
  color: var(--rail-encre);
  background: var(--rail);
  border-bottom: 1px solid var(--trait);
}
.navigation-contenu {
  display: contents;
}
.identite {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
}
.identite .logo {
  display: block;
  flex: none;
  height: var(--h-controle);
  width: auto;
  max-width: 50%;
  object-fit: contain;
}
.identite .nom {
  min-width: 0;
  font-size: var(--t-carte);
  font-weight: var(--gras-fort);
  letter-spacing: var(--serrage);
  overflow-wrap: anywhere;
}
.entrees {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.navigation form {
  margin: 0;
}
.navigation a,
.navigation .btn {
  display: flex;
  align-items: center;
  min-height: var(--h-controle);
  padding: 0 var(--e3);
  font-weight: var(--gras-moyen);
  color: var(--rail-encre);
  text-decoration: none;
  border-radius: var(--r-moyen);
}
.navigation a:hover,
.navigation .btn:hover {
  color: var(--encre);
  background: var(--doux);
}
.navigation a[aria-current="page"] {
  color: var(--accent-encre);
  background: var(--accent);
}
.navigation .btn {
  justify-content: flex-start;
  background: transparent;
  border: none;
}
@media (min-width: 900px) {
  .mise-en-page {
    display: grid;
    grid-template-columns: var(--l-rail) minmax(0, 1fr);
    min-height: 100vh;
  }
  .navigation-contenu {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e4);
    height: 100vh;
    padding: var(--e6) var(--e4);
    overflow-y: auto;
  }
  .navigation {
    display: block;
    padding: 0;
    border-right: 1px solid var(--trait);
    border-bottom: none;
  }
  .identite {
    flex: none;
    flex-direction: column;
    align-items: flex-start;
  }
  .identite .logo {
    max-width: 100%;
  }
  .entrees {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .navigation form {
    margin-top: auto;
  }
  .mise-en-page main {
    justify-self: center;
    padding: var(--e8);
  }
}
h1,
h2,
h3 {
  font-weight: var(--gras-fort);
  letter-spacing: var(--serrage);
}
h1 {
  margin: 0 0 var(--e6);
  font-size: var(--t-page);
  line-height: 1.15;
}
h2 {
  margin: 0 0 var(--e1);
  font-size: var(--t-carte);
}
a {
  color: var(--accent);
}
a:hover {
  color: var(--accent-survol);
}
/* Un bouton de formulaire est principal par défaut : un seul par écran. */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--h-controle);
  min-width: var(--h-controle);
  padding: 0 18px;
  font: inherit;
  font-weight: var(--gras-moyen);
  color: var(--accent-encre);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-grand);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
button:hover,
.btn:hover {
  color: var(--accent-encre);
  background: var(--accent-survol);
  border-color: var(--accent-survol);
}
button[disabled],
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Secondaire : un lien ou un bouton qui n'est pas l'action principale de l'écran. */
.btn.-secondaire {
  color: var(--encre);
  background: var(--carte);
  border-color: var(--trait);
}
.btn.-secondaire:hover {
  color: var(--encre);
  background: var(--doux);
  border-color: var(--trait);
}
.btn.-discret {
  color: var(--estompe);
  background: transparent;
  border-color: transparent;
}
.btn.-discret:hover {
  color: var(--encre);
  background: var(--doux);
  border-color: transparent;
}
/* Le focus clavier n'est jamais supprimé. */
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex="-1"]:focus {
  outline: var(--focus);
  outline-offset: var(--focus-ecart);
}
.bandeau {
  margin: 0 0 var(--e4);
  padding: var(--e4) var(--e5);
  border: 1px solid;
  border-radius: var(--r-carte);
}
.bandeau h2,
.bandeau h3 {
  margin: 0 0 var(--e1);
  font-size: var(--t-carte);
}
.bandeau p {
  margin: 0;
}
.bandeau.-erreur {
  background: color-mix(in oklch, var(--erreur) 8%, var(--fond));
  border-color: var(--erreur);
}
/* --erreur sur le fond teinté du bandeau tombe sous 4,5:1 (axe) : le texte reste à l'encre,
   le bandeau se signale par sa bordure en --erreur. */
.bandeau.-erreur h2,
.bandeau.-erreur h3,
.bandeau.-erreur a {
  color: var(--encre);
}
.bandeau.-erreur a:hover {
  color: var(--encre);
  text-decoration-thickness: 2px;
}
.bandeau.-erreur ul {
  margin: var(--e2) 0 0;
  padding-left: var(--e5);
}
.bandeau.-ok {
  background: color-mix(in oklch, var(--succes) 10%, var(--fond));
  border-color: var(--succes);
}
.bandeau.-ok h2,
.bandeau.-ok h3 {
  color: var(--succes-encre);
}
.evitement {
  position: absolute;
  left: -999px;
  top: 0;
  padding: var(--e2) var(--e4);
  background: var(--carte);
}
.evitement:focus {
  left: 0;
}

/* Un champ : libellé, aide, erreur, saisie, dans cet ordre. */
.champ {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  margin: 0 0 var(--e5);
}
.champ label {
  margin: 0;
  font-size: var(--t-petit);
  font-weight: var(--gras-moyen);
}
.obligatoire {
  font-weight: 400;
  color: var(--estompe);
}
.aide {
  margin: 0;
  font-size: var(--t-menu);
  color: var(--estompe);
}
.erreur-champ {
  margin: 0;
  font-size: var(--t-menu);
  font-weight: var(--gras-moyen);
  color: var(--erreur);
}
/* Quatre états : repos, survol, focus (anneau commun plus haut), erreur.
   L'erreur ne tient pas à la couleur seule : message, aria-invalid et trait épaissi. */
input,
textarea,
select {
  width: 100%;
  min-height: var(--h-controle);
  padding: 10px var(--e3);
  font: inherit;
  /* 16 px au moins : en dessous, les téléphones agrandissent la page à la saisie.
     Aucun jeton de police ne vaut 16 px : --e4 (16 px) sert de plancher, en attendant un jeton dédié. */
  font-size: max(1rem, var(--e4));
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--trait-saisie);
  border-radius: var(--r-grand);
  transition: border-color var(--duree) var(--courbe);
}
input:hover,
textarea:hover,
select:hover {
  border-color: var(--estompe);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--encre);
}
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.champ.-erreur > input:not([type="file"]):not([type="checkbox"]),
.champ.-erreur > textarea,
.champ.-erreur > select {
  padding: 9px calc(var(--e3) - 1px);
  border: 2px solid var(--erreur);
}
textarea {
  min-height: 120px;
  resize: vertical;
}
/* Un groupe garde son fieldset et sa légende, sans la bordure native. */
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}
.groupe legend {
  padding: 0;
  margin-bottom: var(--e2);
  font-size: var(--t-carte);
  font-weight: var(--gras-fort);
}
/* Une ligne de liste : les saisies côte à côte quand la place le permet, alignées par le bas. */
.groupe .ligne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: end;
  column-gap: var(--e4);
  margin: 0 0 var(--e4);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
}
.groupe .ligne > .champ {
  margin-bottom: var(--e2);
}
.groupe .ligne legend {
  padding: 0 var(--e1);
  font-size: var(--t-corps);
  font-weight: var(--gras-moyen);
}
/* Réglages : une carte titrée par section ; le bouton principal en pied de formulaire. */
.carte {
  margin: 0 0 var(--e6);
  padding: var(--e5);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
}
.carte > h2 {
  margin: 0 0 var(--e4);
}
.carte > .champ:last-child {
  margin-bottom: 0;
}
/* Sous le titre de la carte, la légende d'un groupe se lit comme un libellé. */
.carte .groupe > legend {
  margin-bottom: var(--e1);
  font-size: var(--t-petit);
  font-weight: var(--gras-moyen);
}
.pied {
  margin: 0;
}
/* Horaires : une ligne par jour, le jour à gauche et la saisie à droite, alignés d'un jour à l'autre. */
.horaires {
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  gap: var(--e2) var(--e3);
  margin-top: var(--e1);
}
.jour {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: var(--e1);
  align-items: center;
}
.jour label {
  font-size: var(--t-petit);
  font-weight: var(--gras-moyen);
  overflow-wrap: anywhere;
}
.jour .erreur-champ,
.jour input {
  grid-column: 2;
}
/* Un jour, une ligne ou un groupe en erreur se repère d'un coup d'œil dans la carte,
   en plus du message et d'aria-invalid. */
.jour.-erreur label {
  color: var(--erreur);
}
.groupe .ligne:has(.champ.-erreur) {
  border-color: var(--erreur);
}
.groupe.-erreur {
  padding-left: var(--e3);
  border-left: 2px solid var(--erreur);
}
/* Les lignes vides d'une liste, repliées ensemble ; l'état résumé sur la ligne du résumé. */
.repli {
  border-top: 1px solid var(--trait);
}
.repli summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: var(--h-controle);
  font-weight: var(--gras-moyen);
  list-style: none;
  cursor: pointer;
}
.repli summary::-webkit-details-marker {
  display: none;
}
.repli summary .etat {
  font-size: var(--t-menu);
  font-weight: 400;
  color: var(--estompe);
}
.repli[open] summary {
  margin-bottom: var(--e3);
  border-bottom: 1px dashed var(--trait);
}
.conseil,
.rappel {
  margin: var(--e1) 0;
  padding: var(--e2) var(--e3);
  font-size: var(--t-petit);
  color: var(--encre);
  background: color-mix(in oklch, var(--alerte) 20%, var(--fond));
  border-left: var(--e1) solid var(--alerte-encre);
  border-radius: var(--r-petit);
}
.conseil p {
  margin: 0;
}
/* Le champ du logo : l'<input> couvre toute la zone à opacité nulle (atteignable à Tab), le bouton affiché est le nôtre. */
.fichier {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  min-height: var(--h-controle);
  padding: var(--e2) var(--e3);
  background: var(--fond);
  border: 1px solid var(--trait-saisie);
  border-radius: var(--r-grand);
}
.fichier:hover {
  border-color: var(--estompe);
}
.fichier:hover .bouton-fichier {
  background: var(--doux);
}
.fichier:focus-within {
  outline: var(--focus);
  outline-offset: var(--focus-ecart);
  border-color: var(--encre);
}
.champ.-erreur .fichier,
.groupe.-erreur .fichier {
  border: 2px solid var(--erreur);
}
.fichier .rappel {
  flex: 1 1 100%;
  margin: 0;
}
.fichier .vignette {
  display: block;
  max-width: 6rem;
  max-height: 3rem;
  height: auto;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
}
.etat-fichier {
  min-width: 0;
  font-size: var(--t-petit);
  color: var(--estompe);
  overflow-wrap: anywhere;
}
.fichier input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}
.case {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--h-controle);
  margin-top: var(--e2);
}
.case input {
  /* 44 px : la case elle-même est une cible tactile, pas seulement son étiquette. */
  width: var(--h-controle);
  height: var(--h-controle);
  min-height: 0;
  margin: 0;
  flex: none;
}
.case input:hover:not(:focus-visible) {
  outline: 1px solid var(--estompe);
}
.case label {
  margin: 0;
  font-weight: 400;
}
/* Les quatre entrées de l'espace : des cartes-liens, sans teinte d'accent (un seul accent par écran). */
.cartes-espace {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--e4);
  margin: var(--e6) 0 0;
  padding: 0;
  list-style: none;
}
.cartes-espace a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e1);
  height: 100%;
  min-height: var(--h-controle);
  padding: var(--e5);
  font-size: var(--t-carte);
  font-weight: var(--gras-fort);
  letter-spacing: var(--serrage);
  overflow-wrap: anywhere;
  color: var(--encre);
  text-decoration: none;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.cartes-espace a:hover {
  color: var(--encre);
  background: var(--doux);
}
.cartes-espace .note {
  font-size: var(--t-petit);
  font-weight: var(--gras-moyen);
  letter-spacing: normal;
  color: var(--estompe);
}
.resume li a,
main > p > a,
.carte > p > a {
  /* Cible de 44 px de haut, même quand le texte du lien passe sur deux lignes. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* États (design/reference.html) : une pastille dit l'état en toutes lettres, la couleur ne fait que l'appuyer. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 var(--e3);
  font-size: var(--t-menu);
  font-weight: var(--gras-moyen);
  border-radius: var(--r-pilule);
}
.pastille::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: var(--r-pilule);
}
.pastille.-ok {
  color: var(--succes-encre);
  background: color-mix(in oklch, var(--succes) 15%, var(--fond));
}
.pastille.-attente {
  color: var(--alerte-encre);
  background: color-mix(in oklch, var(--alerte) 20%, var(--fond));
}
header .pastille {
  margin-top: calc(-1 * var(--e4));
  margin-bottom: var(--e4);
}

/* La carte de produit : photo carrée, nom en lien, quelques valeurs, puis le geste « Retirer du site ».
   Une grille de cartes, jamais un tableau : elle se lit en une colonne sur un téléphone. */
.produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--e4);
  margin: var(--e6) 0 0;
  padding: 0;
  list-style: none;
}
/* Au téléphone, la vignette à gauche du nom : la liste reste courte à parcourir du pouce. */
.produit {
  display: grid;
  grid-template-columns: min(5rem, 30%) minmax(0, 1fr);
  align-content: start;
  gap: var(--e2) var(--e3);
  min-width: 0;
  margin: 0;
  padding: var(--e4);
}
.produit > * {
  grid-column: 2;
}
.produit > .produit-photo {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.produit > form {
  grid-column: 1 / -1;
}
@media (min-width: 600px) {
  .produit {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
  }
}
.produit-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--doux);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
}
.produit h2 {
  margin: 0;
  overflow-wrap: anywhere;
}
.produit h2 a {
  /* Cible de 44 px de haut ; le nom garde l'encre, l'accent reste à l'action principale de l'écran. */
  display: inline-flex;
  align-items: center;
  min-height: var(--h-controle);
  color: var(--encre);
}
.produit h2 a:hover {
  color: var(--accent-survol);
}
.produit p {
  margin: 0;
}
.produit dl {
  display: grid;
  grid-template-columns: fit-content(50%) minmax(0, 1fr);
  gap: var(--e1) var(--e3);
  margin: 0;
  font-size: var(--t-petit);
  overflow-wrap: anywhere;
}
.produit dl > div {
  display: contents;
}
.produit dt {
  color: var(--estompe);
}
.produit dd {
  margin: 0;
}
.produit form {
  margin-top: auto;
}
.produit form .btn {
  width: 100%;
}

/* Les photos d'un produit : une rangée par photo, la vignette à gauche, les gestes à droite. */
.photos {
  display: grid;
  gap: var(--e3);
  margin: var(--e2) 0 var(--e4);
}
.photo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
}
.photo .vignette {
  display: block;
  flex: none;
  width: 6rem;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--doux);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
}
.reglage-photo {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  gap: var(--e2);
  min-width: 0;
}
.reglage-photo .case {
  margin-top: 0;
}
.annonce {
  margin: 0;
  font-size: var(--t-petit);
  font-weight: var(--gras-moyen);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}
.envoi-photos {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}
form.reglages + .carte {
  margin-top: var(--e6);
}
/* Les gestes de la page d'un produit (retirer du site, supprimer), sous le formulaire. */
.carte > form {
  margin: 0 0 var(--e2);
}
/* Arbitrage d'une récolte : chaque proposition, sa source et sa valeur sous le bouton radio. */
.candidat {
  margin: 0 0 var(--e4);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
}
.candidat .case {
  margin-top: 0;
}
.candidat .case label {
  font-weight: var(--gras-moyen);
  overflow-wrap: anywhere;
}
.valeur-candidate {
  padding-left: calc(var(--h-controle) + var(--e2));
  overflow-wrap: anywhere;
}
.valeur-candidate ul {
  margin: var(--e1) 0;
  padding-left: var(--e4);
}
.texte-candidat {
  margin: var(--e1) 0;
  white-space: pre-line;
}
/* Récolte d'un dossier : les adresses lues (inventaire, réseaux, avis, origine d'un échec) n'ont pas
   de point de coupure et débordent un téléphone sans coupure forcée. */
.adresse-lue {
  overflow-wrap: anywhere;
}
/* Planche-contact d'une récolte : une carte par photo, une seule colonne sur un téléphone. */
.planche {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--e4);
  margin: 0 0 var(--e6);
  padding: 0;
  list-style: none;
}
.photo-planche {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  min-width: 0;
  padding: var(--e3);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
}
/* L'erreur ne tient pas à la couleur seule : le message est écrit sous la photo. */
.photo-planche.-erreur {
  padding: calc(var(--e3) - 1px);
  border: 2px solid var(--erreur);
}
.photo-planche .case {
  margin-top: 0;
}
.photo-planche .champ {
  margin: 0;
}
.photo-planche .provenance {
  overflow-wrap: anywhere;
}
/* Damier derrière la vignette : la transparence d'un logo se voit, un fond blanc incrusté aussi. */
.damier {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--fond);
  background-image: conic-gradient(var(--doux) 25%, transparent 0 50%, var(--doux) 0 75%, transparent 0);
  background-size: var(--e4) var(--e4);
  border-radius: var(--r-moyen);
}
.damier img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Dossiers de prospect (issue #56) : listes de dossiers, d'étapes et d'informations, sans tableau
   sauf pour la différence entre deux versions. Les valeurs saisies ou produites peuvent être longues :
   elles se coupent plutôt que de faire déborder la page à 390 px. */
.dossiers,
.etapes,
.informations,
.versions {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dossiers > li,
.etapes > li,
.informations > li {
  padding: var(--e3) 0;
  border-top: 1px solid var(--trait);
  overflow-wrap: anywhere;
}
.dossiers > li:first-child,
.etapes > li:first-child,
.informations > li:first-child {
  border-top: none;
  padding-top: 0;
}
.dossiers p,
.etapes p,
.informations p {
  margin: 0 0 var(--e1);
}
.dossier-nom a,
.etapes h3 a {
  /* Cible de 44 px de haut, comme les liens des cartes. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.etapes h3,
.informations h3 {
  margin: 0;
  font-size: var(--t-corps);
}
.versions > li {
  padding: var(--e1) 0;
  overflow-wrap: anywhere;
}
.valeurs {
  margin: 0 0 var(--e2);
}
.valeurs dt {
  font-size: var(--t-menu);
  color: var(--estompe);
}
.valeurs dd {
  margin: 0 0 var(--e1);
  white-space: pre-line;
}
.valeur {
  white-space: pre-line;
}
.correction {
  margin-top: var(--e2);
}
.correction .champ {
  margin-bottom: var(--e2);
}
/* Une correction tient souvent sur une ligne : la zone de texte part plus basse que celle d'une proposition. */
.correction textarea {
  min-height: var(--h-controle);
}
.informations form + form {
  margin-top: var(--e1);
}
.comparer {
  margin-top: var(--e4);
}
/* Alerte : un signalement à lire, pas une erreur ; le texte reste à l'encre, la bordure le signale. */
.bandeau.-alerte {
  margin: var(--e2) 0;
  background: color-mix(in oklch, var(--alerte) 12%, var(--fond));
  border-color: var(--alerte-encre);
}
.bandeau.-alerte p + p {
  margin-top: var(--e1);
}
.tableau {
  width: 100%;
  table-layout: fixed;
  /* Cellules jointives sans border-collapse (valeur hors jetons) : un trait en bas de chaque cellule. */
  border-spacing: 0;
  background: var(--carte);
}
.tableau caption {
  margin-bottom: var(--e2);
  text-align: left;
  font-weight: var(--gras-moyen);
}
.tableau th,
.tableau td {
  padding: var(--e2);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--trait);
}
.tableau thead th {
  font-size: var(--t-menu);
}

/* Tournée (issue #61) : un dossier par ligne. Au téléphone, le texte puis les gestes, en colonne ; dès 600 px,
   les gestes à droite du texte. Aucune largeur fixe : noms et messages se coupent plutôt que de déborder. */
.etat-file p + p,
.etat-file form {
  margin-top: var(--e2);
}
.etat-file.-ok {
  border-color: var(--trait);
}
.tournee {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tournee > li {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-top: 1px solid var(--trait);
  overflow-wrap: anywhere;
}
.tournee > li:first-child {
  border-top: none;
  padding-top: 0;
}
.tournee p {
  margin: 0 0 var(--e1);
}
.tournee h3,
.tournee h4 {
  margin: 0;
  font-size: var(--t-corps);
}
.tournee h3 a,
.tournee h4 a {
  /* Cible de 44 px de haut, comme les liens des dossiers. */
  display: inline-flex;
  align-items: center;
  min-height: var(--h-controle);
}
.tournee .actions {
  flex-direction: column;
  align-items: stretch;
}
.tournee .actions .btn {
  width: 100%;
}
.tournee .refaire {
  border-top: none;
}
.tournee .refaire summary {
  justify-content: flex-start;
}
.tournee .refaire[open] summary {
  margin-bottom: var(--e2);
}
.fenetre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  column-gap: var(--e4);
}
@media (min-width: 600px) {
  .tournee > li {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .ligne-tournee-texte {
    flex: 1 1 auto;
    min-width: 0;
  }
  .tournee .actions {
    flex: 0 1 14rem;
  }
}
/* Échecs de même cause (#64) : la ligne de regroupement, ses dossiers repliés dessous, toujours en colonne. */
.tournee > li.echec-groupe {
  flex-direction: column;
  align-items: stretch;
}
.echec-groupe > .repli > summary {
  justify-content: flex-start;
}
.echec-groupe > .repli > .tournee {
  padding-left: var(--e3);
  border-left: 2px solid var(--trait);
}
/* Le repli n'a pas de marqueur natif (.repli) : une flèche dit qu'il s'ouvre. */
.tournee .refaire summary::before,
.echec-groupe > .repli > summary::before {
  content: "▸";
}
.tournee .refaire[open] summary::before,
.echec-groupe > .repli[open] > summary::before {
  content: "▾";
}

/* Écran du brief (lot 4) : le rouge d'abord, puis le résumé vert. Écrit pour le téléphone d'abord ; les textes
   longs se coupent plutôt que de faire déborder la page à 390 px. */
.lecteur-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pastille.-rapide {
  color: var(--alerte-encre);
  background: color-mix(in oklch, var(--alerte) 20%, var(--fond));
}
.enchainement {
  margin: 0 0 var(--e4);
}
.a-verifier {
  border: 2px solid var(--erreur);
  overflow-wrap: anywhere;
}
.a-verifier ul {
  margin: 0;
  padding-left: var(--e5);
}
.controles-verts {
  overflow-wrap: anywhere;
}
.changements ins,
.changements del {
  padding: 0 2px;
  text-decoration-thickness: 2px;
}
.changements ins {
  background: color-mix(in oklch, var(--succes) 15%, var(--fond));
}
.changements del {
  background: color-mix(in oklch, var(--erreur) 10%, var(--fond));
}
.corriger-brief summary {
  display: flex;
  align-items: center;
  min-height: var(--h-controle);
  cursor: pointer;
}
/* Valider et rouvrir : toute la largeur au pouce ; dès 600 px, la largeur du libellé. */
.decision button {
  width: 100%;
}
@media (min-width: 600px) {
  .decision button {
    width: auto;
  }
}
/* Le classement à l'aveugle du banc (#77) : une capture par carte, à la largeur de la colonne, sans défilement. */
.captures-classement {
  display: grid;
  gap: var(--e4);
  padding: 0;
  list-style: none;
}
.captures-classement img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--e3);
  border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
}
/* Le logo proposé à la porte 3 (lot 5d) : sur le damier, à une taille de vignette. */
.logo-propose {
  max-width: 16rem;
  margin-block: var(--e3);
}

/* Mot de passe généré (écran des comptes) : lisible, sélectionnable d'un clic, coupé plutôt que débordant à 390 px. */
.mot-de-passe {
  font-family: var(--police-mono);
  font-size: var(--t-carte);
  overflow-wrap: anywhere;
  user-select: all;
}

/* Écran du dossier à 390 px (lot 4) : le nom et les liens longs se coupent, le bouton principal prend la largeur de sa carte. */
main > header h1,
[aria-labelledby="titre-en-cours"],
.repli {
  overflow-wrap: anywhere;
}
@media (max-width: 599px) {
  [aria-labelledby="titre-en-cours"] .btn {
    display: flex;
    width: 100%;
  }
}

/* La vue en direct d'un dossier : texte d'agent et captures dans la largeur de l'écran, sans couleur propre. */
.flux {
  margin: 0;
  padding-left: var(--e5);
}
.flux li {
  overflow-wrap: anywhere;
}
.captures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.captures img {
  display: block;
  width: 8rem;
  height: 12rem;
  max-width: 100%;
  object-fit: cover;
  object-position: top;
}

/* ---- Console d'équipe (issue 104, lot 6 A) : le style de la maquette v4, hébergé ici ----
   Le menu d'équipe est stylé par son seul nav ; le style de page est sous `.console` (posé par la vue qui le demande, via le bloc classe_ecran de base.njk) ou porte une classe `.tuile`, `.btn-noir`, `.marque` :
   le dashboard client, qui partage cette feuille, n'en change pas d'aspect. Les variables sont préfixées --console-
   pour ne pas heurter celles de /design/jetons.css. Les polices (latin seulement) viennent de /polices/, jamais d'un tiers. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/polices/inter-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/polices/inter-tight-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --console-fond: #F2F2F2;
  --console-encre: #222;
  --console-gris: #6B6B6B;
  --console-noir: #1E1E1E;
  --console-tuile-tous: #1E1E1E;
  --console-tuile-attend: #F0521E;
  --console-tuile-bloques: #E8392E;
  --console-tuile-en-cours: #5B3FD9;
  --console-tuile-prets: #2DB5A0;
  --console-tuile-livres: #B5AC88;
  --console-bande-tous: #E9E4D2;
  --console-bande-attend: #8E1F7E;
  --console-bande-bloques: #FFD2C2;
  --console-bande-en-cours: #C8F08F;
  --console-bande-prets: #C8F08F;
  --console-bande-livres: #F2EEDF;
  /* Blanc et noir purs, ombre et survol : le texte sur teinte sombre, le fond des cartes, le texte sombre sur teinte claire. */
  --console-blanc: #fff;
  --console-noir-pur: #000;
  --console-ombre: rgba(0, 0, 0, 0.18);
  --console-survol: rgb(0 0 0 / 0.07);
  /* Tailles de texte : titres de page (large, puis étroit sous 900 px), du volet, d'un groupe ; menu, texte courant petit,
     sous-titre d'une ligne, pastille et étiquette, surtitre en capitales. */
  --console-titre: 72px;
  --console-titre-etroit: 48px;
  --console-titre-volet: 28px;
  --console-titre-groupe: 22px;
  --console-texte-menu: 15px;
  --console-texte-petit: 13px;
  --console-texte-detail: 12.5px;
  --console-texte-pastille: 12px;
  --console-surtitre: 11px;
  /* Rayons : boutons et champs, entrées du menu, cartes (tuiles, liste, volet), pastilles. */
  --console-rayon: 6px;
  --console-rayon-menu: 8px;
  --console-rayon-carte: 12px;
  --console-rayon-pastille: 999px;
  /* Traits et ombre : la tuile choisie, la ligne ouverte dans le volet, le volet posé sur la page. */
  --console-trait-actif: inset 0 0 0 3px var(--console-noir);
  --console-trait-ligne: inset 4px 0 0 var(--console-noir);
  --console-ombre-volet: 0 8px 32px var(--console-ombre);
  --console-police-titre: "Inter", "Inter Tight", Helvetica, sans-serif;
  --console-police: "Inter Tight", "Inter", Helvetica, sans-serif;
}
.console {
  min-height: 100vh;
  color: var(--console-encre);
  background: var(--console-fond);
  font-family: var(--console-police);
  font-weight: 500;
}
.console main {
  max-width: none;
}
.console h1,
.console h2,
.console h3 {
  font-family: var(--console-police-titre);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--console-noir);
}
.console h1 {
  font-size: var(--console-titre);
  line-height: 1;
}
/* Menu d'équipe : borné à ce seul nav, il s'applique à tous les écrans d'équipe sans toucher à leur page. */
nav.navigation[aria-label="Équipe"] {
  color: var(--console-encre);
  background: transparent;
  border: none;
  font-family: var(--console-police);
}
nav.navigation[aria-label="Équipe"] a,
nav.navigation[aria-label="Équipe"] .btn {
  font-size: var(--console-texte-menu);
  font-weight: 500;
  color: var(--console-encre);
  border-radius: var(--console-rayon-menu);
}
nav.navigation[aria-label="Équipe"] a:hover,
nav.navigation[aria-label="Équipe"] .btn:hover {
  color: var(--console-encre);
  background: var(--console-survol);
}
nav.navigation[aria-label="Équipe"] a[aria-current="page"] {
  color: var(--console-blanc);
  background: var(--console-noir);
}
.marque {
  flex: 1 1 100%;
  margin: 0;
  font: 600 21px var(--console-police-titre);
  letter-spacing: -0.03em;
  color: var(--console-noir);
}
.marque::before {
  content: "／";
  margin-right: 2px;
  font-weight: 400;
}
@media (min-width: 900px) {
  .mise-en-page:has(> nav[aria-label="Équipe"]) {
    grid-template-columns: 232px minmax(0, 1fr);
  }
  nav.navigation[aria-label="Équipe"] .navigation-contenu {
    padding: 30px 18px;
    gap: 2px;
  }
  nav.navigation[aria-label="Équipe"] .marque {
    flex: none;
    padding: 0 10px 30px;
  }
  .console main {
    justify-self: stretch;
    padding: 34px 40px 64px;
  }
}
/* Bouton noir : le geste principal d'un écran de la console, une flèche à la fin. */
.btn-noir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font: 600 14.5px var(--console-police);
  color: var(--console-blanc);
  text-decoration: none;
  background: var(--console-noir);
  border: 1px solid var(--console-noir);
  border-radius: var(--console-rayon);
  cursor: pointer;
}
.btn-noir::after {
  content: "↗";
  font-weight: 400;
}
.btn-noir:hover {
  background: var(--console-noir-pur);
  border-color: var(--console-noir-pur);
}
/* Tuile : un carré de couleur barré d'une seule diagonale, du bas gauche au haut droit ; le texte tient dans le triangle
   libre (le nombre en haut à gauche, l'intitulé en bas à droite). Teinte et bande se règlent par --tuile et --bande. */
.tuile {
  --tuile: var(--console-tuile-tous);
  --bande: var(--console-bande-tous);
  /* Texte blanc sur toutes les teintes, comme la maquette (décision du 30/10 sur #104) : le contraste n'est pas cherché ici. */
  --tuile-texte: var(--console-blanc);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  aspect-ratio: 1 / 1;
  padding: 18px 18px 16px;
  overflow: hidden;
  color: var(--tuile-texte);
  text-decoration: none;
  background: var(--tuile);
}
.tuile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--bande);
  -webkit-mask: linear-gradient(to bottom right, transparent calc(50% - 6px), var(--console-noir-pur) calc(50% - 6px) calc(50% + 6px), transparent calc(50% + 6px));
  mask: linear-gradient(to bottom right, transparent calc(50% - 6px), var(--console-noir-pur) calc(50% - 6px) calc(50% + 6px), transparent calc(50% + 6px));
}
.tuile > * {
  position: relative;
  z-index: 1;
}
.tuile .nombre {
  font: 600 44px/1 var(--console-police-titre);
  letter-spacing: -0.04em;
}
.tuile .intitule {
  align-self: flex-end;
  max-width: 55%;
  margin-top: auto;
  font-size: var(--console-texte-petit);
  font-weight: 600;
  text-align: right;
}
.tuile[aria-current="true"] {
  box-shadow: var(--console-trait-actif);
}
.tuile.-tous { --tuile: var(--console-tuile-tous); --bande: var(--console-bande-tous); }
.tuile.-attend { --tuile: var(--console-tuile-attend); --bande: var(--console-bande-attend); }
.tuile.-bloques { --tuile: var(--console-tuile-bloques); --bande: var(--console-bande-bloques); }
.tuile.-en-cours { --tuile: var(--console-tuile-en-cours); --bande: var(--console-bande-en-cours); }
.tuile.-prets { --tuile: var(--console-tuile-prets); --bande: var(--console-bande-prets); }
.tuile.-livres { --tuile: var(--console-tuile-livres); --bande: var(--console-bande-livres); }

/* Liste des dossiers de la console : barre de recherche, tuiles en rangée, groupes en lignes à six colonnes. */
.console .entete-console {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.console .actualiser a {
  font-size: var(--console-texte-petit);
  color: var(--console-gris);
}
.console .actualiser .direct-etat {
  margin-right: 12px;
  font-size: var(--console-texte-petit);
  color: var(--console-gris);
}
.console .actualiser .direct-etat[hidden] { display: none; }
.console .actualiser .direct-etat[data-etat="perdue"] {
  font-weight: 600;
  color: var(--console-encre);
}
.console .etiquette {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.console .barre-recherche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}
.console .barre-recherche input[type="search"],
.console .barre-recherche select {
  flex: 1 1 200px;
  padding: 14px 16px;
  font: 500 15px var(--console-police);
  color: var(--console-encre);
  background: var(--console-blanc);
  border: 1px solid transparent;
  border-radius: var(--console-rayon);
}
.console .tuiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  border-radius: var(--console-rayon-carte);
  overflow: hidden;
}
.console .liste-dossiers,
.console .vide {
  background: var(--console-blanc);
  border-radius: var(--console-rayon-carte);
}
.console .vide {
  padding: 24px;
  color: var(--console-gris);
}
.console .entete-liste,
.console .ligne {
  display: grid;
  grid-template-columns: 130px minmax(0, 2fr) minmax(0, 1.4fr) 80px 150px 100px;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
}
.console .entete-liste {
  margin: 0;
  font-size: var(--console-surtitre);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--console-gris);
}
.console .liste-dossiers section h2 {
  margin: 0;
  padding: 22px 22px 10px;
  font-size: var(--console-titre-groupe);
}
.console .liste-dossiers ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.console .ligne {
  color: var(--console-encre);
  text-decoration: none;
  border-top: 1px solid var(--console-fond);
}
.console .ligne:hover,
.console .ligne:focus-visible {
  background: var(--console-fond);
}
.console .ligne .cellule.-dossier {
  min-width: 0;
}
.console .ligne .sous-titre {
  overflow-wrap: anywhere;
}
/* Le nom tient sur une ligne, coupé par « … » ; le nom complet est dans le title. */
.console .ligne .nom {
  display: block;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.console .ligne .sous-titre {
  display: block;
  font-size: var(--console-texte-detail);
  color: var(--console-gris);
}
.console .pastille {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--console-texte-pastille);
  border-radius: var(--console-rayon-pastille);
  color: var(--console-noir);
  background: var(--console-fond);
}
.console .pastille.-attend { background: color-mix(in srgb, var(--console-tuile-attend) 18%, var(--console-blanc)); }
.console .pastille.-bloque { color: var(--console-noir-pur); background: var(--console-tuile-bloques); }
.console .pastille.-en_cours { background: color-mix(in srgb, var(--console-tuile-en-cours) 16%, var(--console-blanc)); }
.console .pastille.-pret { background: color-mix(in srgb, var(--console-tuile-prets) 25%, var(--console-blanc)); }
.console .pastille.-livre { background: color-mix(in srgb, var(--console-tuile-livres) 35%, var(--console-blanc)); }
@media (max-width: 899px) {
  .console h1 { font-size: var(--console-titre-etroit); }
  .console .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .console .entete-liste { display: none; }
  .console .ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .console .ligne .cellule.-dossier { grid-column: 1 / -1; order: -1; }
  .console .ligne .etiquette { position: static; width: auto; height: auto; clip-path: none; color: var(--console-gris); font-size: var(--console-texte-pastille); }
}

/* Volet d'un dossier (issue 104, lot 6 A, E5) : un panneau à droite, non modal ; plein écran sous 600 px. */
.console .ligne[aria-current="true"] {
  background: var(--console-fond);
  box-shadow: var(--console-trait-ligne);
}
.console #volet {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  width: min(380px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 24px;
  overflow-y: auto;
  color: var(--console-encre);
  background: var(--console-blanc);
  border-radius: var(--console-rayon-carte);
  box-shadow: var(--console-ombre-volet);
}
.console #volet[hidden] {
  display: none;
}
.console .volet-entete {
  position: relative;
  padding-right: 48px;
}
.console .volet-ville {
  margin: 0 0 4px;
  font-size: var(--console-surtitre);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--console-gris);
}
.console .volet-entete h2 {
  margin: 0;
  font-size: var(--console-titre-volet);
  overflow-wrap: anywhere;
}
.console .volet-fermer {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 44px;
  height: 44px;
  font: 400 26px/1 var(--console-police);
  color: var(--console-noir);
  background: none;
  border: 0;
  cursor: pointer;
}
.console .parcours {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
  font-size: var(--console-surtitre);
  color: var(--console-gris);
}
.console .parcours .barre {
  display: block;
  height: 6px;
  margin-bottom: 6px;
  background: var(--console-fond);
}
.console .parcours .-fait .barre { background: var(--console-noir); }
.console .parcours .-en_cours .barre { background: var(--console-tuile-en-cours); }
.console .parcours .-attend .barre { background: var(--console-tuile-attend); }
.console .parcours .-bloquee .barre { background: var(--console-tuile-bloques); }
.console .volet-faits {
  margin: 0;
}
.console .volet-faits div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--console-fond);
}
.console .volet-faits dt,
.console .volet-faits dd {
  margin: 0;
}
.console .volet-faits dd {
  text-align: right;
}
.console .volet-sous-titre {
  margin: 20px 0 8px;
  font: 500 11px var(--console-police);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--console-gris);
}
.console .passages {
  margin: 0;
  padding: 0;
  list-style: none;
}
.console .passages li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 6px 0;
}
.console .passages .duree {
  margin-left: auto;
  color: var(--console-gris);
}
.console .vide-volet,
.console .volet-message {
  color: var(--console-gris);
}
.console .volet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}
.console .volet-actions a {
  min-height: 44px;
  box-sizing: border-box;
}
.console .btn-clair {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font: 600 14.5px var(--console-police);
  color: var(--console-noir);
  text-decoration: none;
  background: var(--console-blanc);
  border: 1px solid var(--console-fond);
  border-radius: var(--console-rayon);
}
.console .btn-clair::after {
  content: "↗";
  font-weight: 400;
}
/* « Nouveau dossier » : replié tant qu'on ne l'a pas demandé (lien #nouveau-dossier) ou qu'une création invalide revient. */
.console .nouveau-dossier:not(:target):not(.-ouvert) {
  display: none;
}
/* Recherche, ville, « Chercher » et « Nouveau dossier » tiennent sur une seule ligne dès que la place le permet. */
@media (min-width: 900px) {
  .console .barre-recherche {
    flex-wrap: nowrap;
  }
  .console .barre-recherche input[type="search"],
  .console .barre-recherche select {
    flex: 1 1 120px;
    min-width: 0;
  }
  .console .barre-recherche .btn-noir {
    flex: none;
    white-space: nowrap;
  }
}
.console .ligne .cellule.-etape {
  white-space: nowrap;
}
/* Au-dessus de 1100 px, le volet se range à droite de la liste, qui se resserre : les compteurs restent visibles. */
@media (min-width: 1100px) {
  html[data-volet-ouvert] .console main {
    padding-right: calc(40px + min(380px, 100vw - 32px) + 16px);
  }
  /* Volet ouvert, la colonne Mode s'efface : le nom du dossier prend la place, 180 px au moins. */
  html[data-volet-ouvert] .console .entete-liste,
  html[data-volet-ouvert] .console .ligne {
    grid-template-columns: 112px minmax(180px, 1fr) 126px 112px 84px;
    gap: 8px;
    padding-inline: 16px;
  }
  html[data-volet-ouvert] .console .entete-liste > :nth-child(4),
  html[data-volet-ouvert] .console .ligne .cellule.-mode {
    display: none;
  }
}
@media (max-width: 599px) {
  .console #volet {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  html[data-volet-ouvert] body {
    overflow: hidden;
  }
  /* Le titre garde sa ligne : « À jour » et « Actualiser » passent dessous. */
  .console .entete-console {
    flex-wrap: wrap;
  }
}