/* Feuille de style unique de l'application. Aucune ressource externe : la police est
   servie par l'application. Valeurs de la maquette « Clarté » validée le 05/10/2026 :
   palette, échelle typographique, espacements et mesures en sont repris tels quels. */

/* ---------------------------------------------------------------- police */

/* Source Serif 4, licence OFL (finances/static/fonts/OFL.txt). Une police variable : les
   seules graisses employées sont 400, 500 et 600, et aucune italique n'est déclarée. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-opsz-normal.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;
}

/* --------------------------------------------------------------- palette */

/* Mode clair : celui d'une page sans attribut quand le système est en clair, et celui de
   data-theme="clair" quel que soit le système. */
:root {
  color-scheme: light;
  --bg: #fbfbfa;
  --side: #f4f4f1;
  --surface: #ffffff;
  --hover: #f3f3f0;
  --line: #ebebe7;
  --line2: #d9d9d4;
  --line3: #9ea3aa;
  --btn-bd: #cfd2d6;
  --ink: #202326;
  --ink2: #5b6067;
  --zero: #8c9096;
  --strong: #17284a;
  --accent: #13788c;
  --tag-bg: #eeeeea;
  --tag-ink: #4f545b;
  --warn-bg: #f6ead6;
  --warn: #7a4a0c;
  --danger: #b3261e;
  --primary: #17284a;
  --primary-hover: #22365e;
  --primary-bd: #17284a;
  --primary-ink: #ffffff;
  --a1: #f9efda;
  --a2: #fbe4c8;
  --a3: #fdd7bc;
  --a4: #fdcbb5;
  --b0: #dfe3e8;
  --b1: #ecdcbd;
  --b2: #e7c8a3;
  --b3: #e1b391;
  --b4: #d99e84;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Mode nuit, choisi par le sélecteur : le serveur pose data-theme="nuit". */
:root[data-theme="nuit"] {
  color-scheme: dark;
  --bg: #161c25;
  --side: #121821;
  --surface: #1e2631;
  --hover: #1c2430;
  --line: #242d39;
  --line2: #323c4a;
  --line3: #56606e;
  --btn-bd: #3a4555;
  --ink: #d9dee6;
  --ink2: #9ea7b4;
  --zero: #646d7b;
  --strong: #e6ebf2;
  --accent: #6cc7d8;
  --tag-bg: #222a36;
  --tag-ink: #b4bcc8;
  --warn-bg: #33291d;
  --warn: #e2b77e;
  --danger: #f2958b;
  --primary: #2b3b58;
  --primary-hover: #334566;
  --primary-bd: #3d5178;
  --primary-ink: #eef2f7;
  --a1: #2e2a20;
  --a2: #372d21;
  --a3: #413023;
  --a4: #4c3227;
  --b0: #3a4452;
  --b1: #695c40;
  --b2: #846949;
  --b3: #9f7657;
  --b4: #bb836a;
}

/* Mode nuit, sans choix : aucun attribut n'est posé, et le système est en sombre. Les
   valeurs sont celles du bloc précédent ; un test les compare. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #161c25;
    --side: #121821;
    --surface: #1e2631;
    --hover: #1c2430;
    --line: #242d39;
    --line2: #323c4a;
    --line3: #56606e;
    --btn-bd: #3a4555;
    --ink: #d9dee6;
    --ink2: #9ea7b4;
    --zero: #646d7b;
    --strong: #e6ebf2;
    --accent: #6cc7d8;
    --tag-bg: #222a36;
    --tag-ink: #b4bcc8;
    --warn-bg: #33291d;
    --warn: #e2b77e;
    --danger: #f2958b;
    --primary: #2b3b58;
    --primary-hover: #334566;
    --primary-bd: #3d5178;
    --primary-ink: #eef2f7;
    --a1: #2e2a20;
    --a2: #372d21;
    --a3: #413023;
    --a4: #4c3227;
    --b0: #3a4452;
    --b1: #695c40;
    --b2: #846949;
    --b3: #9f7657;
    --b4: #bb836a;
  }
}

/* ------------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-optical-sizing: auto;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/20px var(--sans);
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
.marque,
.chiffres dd {
  font-family: var(--serif);
  font-synthesis: none;
  color: var(--strong);
}

h1 {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Le nom d'un client, en tête de sa page. */
h1.client {
  font-size: 34px;
  line-height: 40px;
}

h2 {
  margin: 52px 0 12px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

h3 {
  margin: 32px 0 4px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
}

p {
  margin: 12px 0;
}

a {
  color: var(--strong);
  text-underline-offset: 2px;
}

strong {
  font-weight: 600;
  color: var(--strong);
}

h1 strong,
h2 strong,
h3 strong {
  font-weight: inherit;
}

ol {
  padding-left: 20px;
}

ol li {
  margin: 6px 0;
  max-width: 880px;
}

/* Focus clavier : visible partout, de la même couleur. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Un lien qui quitte la page — la fiche d'une facture dans Boond, un message ouvert seul. */
a[rel~="noopener"]::after {
  content: "\00a0\2197\fe0e";
  display: inline-block;
  color: var(--ink2);
  font-weight: 400;
  text-decoration: none;
}

/* Lu par un lecteur d'écran, jamais affiché. */
.lecteurs {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.discret {
  color: var(--ink2);
  font-size: 13px;
  line-height: 18px;
}

p.discret {
  max-width: 880px;
  margin: 8px 0 0;
}

/* ------------------------------------------------- cadre et navigation */

.evitement {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line2);
}

.evitement:focus {
  top: 12px;
}

.cadre {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

/* Navigation latérale : 232 px, fixe. Sur un écran court, elle défile en elle-même. */
.cote {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100vh;
  padding: 28px 16px 24px;
  overflow-y: auto;
  background: var(--side);
  border-right: 1px solid var(--line);
}

.marque {
  display: block;
  padding: 0 12px;
  font-size: 19px;
  line-height: 24px;
  font-weight: 600;
}

.menu,
.navigation .fermer {
  display: none;
}

.navigation {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navigation a {
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--ink2);
  text-decoration: none;
}

.navigation a:hover {
  background: var(--hover);
  color: var(--strong);
}

.navigation a[aria-current="page"] {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line2);
  color: var(--strong);
  font-weight: 600;
}

.pied {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
}

.compte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 12px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 18px;
}

.compte .adresse {
  overflow-wrap: anywhere;
}

/* Un bouton qui a l'air d'un lien : la déconnexion est un formulaire, jamais un lien. */
button.lien {
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--strong);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Sélecteur d'affichage : Clair, Nuit, Automatique. */
.affichage {
  padding: 16px 8px 0;
  border-top: 1px solid var(--line2);
}

.affichage .libelle {
  display: block;
  margin: 0 4px 8px;
  color: var(--ink2);
  font-size: 12px;
  line-height: 16px;
}

.affichage .choix {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line2);
  border-radius: 7px;
}

.affichage button {
  flex: 1 1 auto;
  padding: 5px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink2);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  cursor: pointer;
}

.affichage button:hover {
  color: var(--strong);
}

.affichage button[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line2);
  color: var(--strong);
  font-weight: 600;
}

/* Marges de côté : 56 px à la largeur de la maquette, resserrées en dessous de 1 220 px
   jusqu'à 24 px à 900 px, pour laisser leur place aux tableaux. */
main {
  min-width: 0;
  padding: 44px 56px 64px;
  padding-right: clamp(24px, calc(24px + (100vw - 900px) / 10), 56px);
  padding-left: clamp(24px, calc(24px + (100vw - 900px) / 10), 56px);
}

/* --------------------------------------------------- en-têtes de page */

.tete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.tete > div {
  min-width: 0;
}

.entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin: 52px 0 12px;
}

.entete h2 {
  margin: 0;
}

.retour {
  display: block;
  width: fit-content;
  margin-top: -6px;
}

.retour + h1 {
  margin-top: 20px;
}

/* ---------------------------------------------------- chiffres en tête */

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
  margin: 36px 0 0;
}

/* Un chiffre : son libellé, puis sa valeur et, parfois, un lien sur la même ligne. */
.chiffres > div {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  align-items: baseline;
  min-width: 0;
}

.chiffres dt {
  grid-column: 1 / span 2;
  color: var(--ink2);
  font-size: 13px;
  line-height: 18px;
}

.chiffres dd {
  margin: 4px 0 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
}

.chiffres dd.suite {
  margin-left: 16px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.chiffres .principal {
  flex: 0 0 100%;
}

.chiffres .principal dt {
  font-size: 14px;
  line-height: 20px;
}

.chiffres .principal dd {
  font-size: 52px;
  line-height: 60px;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* Page d'un client : les trois chiffres sur une ligne, alignés par le bas. */
.chiffres.en-ligne {
  align-items: flex-end;
  margin-top: 28px;
}

.chiffres.en-ligne .principal {
  flex: none;
}

.chiffres.en-ligne .principal dd {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.01em;
}

.chiffres.en-ligne > div:not(.principal) {
  padding-bottom: 4px;
}

/* ------------------------------------------------ barre de répartition */

.partage {
  margin-top: 36px;
}

/* Les largeurs sont des attributs du SVG ; seules les couleurs viennent d'ici. */
.repartition {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.repartition .separation {
  stroke: var(--bg);
  stroke-width: 2px;
}

.b0 {
  fill: var(--b0);
  background: var(--b0);
}

.b1 {
  fill: var(--b1);
  background: var(--b1);
}

.b2 {
  fill: var(--b2);
  background: var(--b2);
}

.b3 {
  fill: var(--b3);
  background: var(--b3);
}

.b4 {
  fill: var(--b4);
  background: var(--b4);
}

/* « Sans échéance » : hors de l'échelle d'ancienneté, donc sans chaleur. */
.b5 {
  fill: var(--line3);
  background: var(--line3);
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink2);
  font-size: 12.5px;
  line-height: 16px;
}

.legende li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.legende .pastille {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- tableaux */

.tableau {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.tableau th,
.tableau td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

/* Les bords d'un tableau s'alignent sur ceux de la page. Sous 900 px, une ligne est une
   carte : ces règles n'y valent pas, et les cellules d'une carte gardent leur retrait. */
@media (min-width: 900px) {
  .tableau th:first-child,
  .tableau td:first-child {
    padding-left: 0;
  }

  .tableau th:last-child,
  .tableau td:last-child {
    padding-right: 0;
  }
}

/* En-tête collant : 36 px. */
.tableau thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom-color: var(--line2);
  background: var(--bg);
  color: var(--ink2);
  font-size: 12.5px;
  line-height: 16px;
}

.tableau .nombre {
  text-align: right;
  white-space: nowrap;
}

/* Un intitulé de colonne passe sur deux lignes avant que la page ne déborde ; un
   montant, jamais. Ses deux lignes s'équilibrent : « Plus de » puis « 90 j ». */
.tableau thead th.nombre {
  white-space: normal;
}

.tableau thead th {
  text-wrap: balance;
}

.tableau tbody tr:hover {
  background: var(--hover);
}

.tableau thead th.total,
.tableau td.total {
  color: var(--strong);
  font-weight: 600;
}

/* La cellule qui nomme la ligne. */
.tableau td.titre {
  color: var(--strong);
  font-weight: 500;
}

.tableau td.titre a {
  color: var(--strong);
  text-decoration: none;
}

.tableau td.titre a:hover {
  text-decoration: underline;
}

.tableau td.reference,
.insecable {
  white-space: nowrap;
}

h1 + .tableau {
  margin-top: 24px;
}

p + .tableau,
p + form > .tableau {
  margin-top: 12px;
}

/* Un tableau de factures : dix colonnes et plus, donc un peu plus serré. */
.tableau.factures {
  font-size: 13.5px;
  line-height: 18px;
}

.tableau.factures th,
.tableau.factures td {
  padding-right: 8px;
  padding-left: 8px;
}

@media (min-width: 900px) {
  .tableau.factures th:first-child,
  .tableau.factures td:first-child {
    padding-left: 0;
  }

  .tableau.factures th:last-child,
  .tableau.factures td:last-child {
    width: 24%;
    padding-right: 0;
  }
}

/* Les tableaux d'une même liste gardent les mêmes colonnes de l'un à l'autre. */
.tableau.groupe {
  table-layout: fixed;
}

.tableau.groupe th:nth-child(1) {
  width: 18%;
}

.tableau.groupe th:nth-child(2) {
  width: 12%;
}

.tableau.groupe th:nth-child(3) {
  width: 14%;
}

.tableau.groupe th:nth-child(4),
.tableau.groupe th:nth-child(5) {
  width: 18%;
}

/* Une cellule de saisie : son champ tient dans la hauteur d'une ligne. */
.tableau td.saisie {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Fond de cellule par tranche d'ancienneté. */
.tableau .a1 {
  background: var(--a1);
}

.tableau .a2 {
  background: var(--a2);
}

.tableau .a3 {
  background: var(--a3);
}

.tableau .a4 {
  background: var(--a4);
}

/* Ligne de total : filet plus marqué, et le filet de la dernière ligne s'efface. */
.tableau tfoot th,
.tableau tfoot td {
  border-top: 1px solid var(--line3);
  border-bottom: 0;
  color: var(--strong);
  font-weight: 600;
}

.tableau.avec-total tbody tr:last-child > * {
  border-bottom: 0;
}

/* Montant nul : un tiret estompé ; « 0,00 » reste lu par un lecteur d'écran. */
.zero {
  color: var(--zero);
}

.tableau tfoot .zero {
  font-weight: 400;
}

/* ---------------------------------------------------------------- pastilles */

.mention {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--tag-bg);
  color: var(--tag-ink);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

/* Ce qui demande un regard. */
.mention.alerte {
  background: var(--warn-bg);
  color: var(--warn);
}

.tableau td.savoir {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* --------------------------------------------------------------- messages */

.message {
  max-width: 880px;
  margin: 16px 0;
  padding: 10px 14px;
  border: 1px solid var(--line2);
  border-left: 3px solid var(--line3);
  border-radius: 6px;
  background: var(--surface);
}

main > .message:first-child {
  margin-top: 0;
}

.tete + .message {
  margin-top: 24px;
}

.message.erreur {
  border-left-color: var(--danger);
}

.message.attente {
  border-left-color: var(--warn);
}

.message.succes {
  border-left-color: var(--accent);
}

td .message {
  margin: 8px 0 0;
}

/* Un rappel, sans bandeau : un anneau et une ligne. */
.note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 880px;
  margin: 12px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 18px;
}

.note::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--accent);
  transform: translateY(-1px);
}

/* ------------------------------------------------------- listes de détails */

ul.totaux {
  display: grid;
  gap: 6px;
  max-width: 880px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

ul.totaux li {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------- boutons et formulaires */

button,
.menu {
  padding: 9px 16px;
  border: 1px solid var(--btn-bd);
  border-radius: 6px;
  background: var(--surface);
  color: var(--strong);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

button:hover,
.menu:hover {
  border-color: var(--strong);
}

/* Bouton principal : le seul aplat foncé, sur la page de connexion. */
button.principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 22px;
  border-color: var(--primary-bd);
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 15px;
  line-height: 20px;
}

button.principal:hover {
  border-color: var(--primary-bd);
  background: var(--primary-hover);
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="month"],
select {
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--btn-bd);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

input[type="number"] {
  width: 96px;
}

label {
  color: var(--ink2);
  font-size: 13px;
  line-height: 18px;
}

label input {
  display: block;
  margin-top: 4px;
}

/* Un formulaire sur une ligne : ses champs, puis son bouton. */
form.en-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 12px 0 0;
}

form.en-ligne .patience {
  flex-basis: 100%;
  margin: 0;
}

.tableau td form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tableau td form input[type="text"] {
  flex: 0 1 240px;
  width: 240px;
  min-width: 0;
}

/* Une demande qui lit Boond dure : la page le dit dès que son bouton est pris. */
.patience {
  display: none;
  margin: 8px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  white-space: normal;
}

form:focus-within > .patience {
  display: block;
}

.patience .pendant,
form button:focus:not(:focus-visible) ~ .patience .avant {
  display: none;
}

/* Bouton pris par un clic, donc demande partie : la lecture est en cours. */
form button:focus:not(:focus-visible) ~ .patience .pendant {
  display: inline;
}

form button:focus:not(:focus-visible) ~ .patience::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: 8px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat;
  background-size: 40% 100%;
  animation: lecture 1.6s linear infinite;
}

@keyframes lecture {
  from {
    background-position: -70% 0;
  }

  to {
    background-position: 170% 0;
  }
}

.actualiser {
  position: relative;
  flex: none;
}

.actualiser .patience {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 2;
  width: 272px;
  text-align: right;
}

/* ------------------------------------------------- aperçu d'un message */

iframe.apercu {
  display: block;
  width: 100%;
  max-width: 60rem;
  height: 44rem;
  border: 1px solid var(--line2);
  border-radius: 6px;
  /* Un mail porte ses propres couleurs, sur fond blanc dans les deux modes. */
  background: #ffffff;
}

pre.texte {
  max-width: 60rem;
  margin: 12px 0 0;
  padding: 16px;
  border: 1px solid var(--line2);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  line-height: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ------------------------------------ pages sans session, et erreurs */

.seule {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.seule main {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  text-align: center;
}

.seule .message {
  text-align: left;
}

.connexion,
.page-d-erreur {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 440px;
  margin-top: -40px;
}

.connexion h1,
.seule .page-d-erreur h1 {
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -0.01em;
}

.sous-titre {
  margin: 8px 0 0;
  color: var(--ink2);
  font-size: 16px;
  line-height: 24px;
}

/* Le filet court de la connexion. */
.filet {
  width: 48px;
  height: 1px;
  margin: 40px 0;
  border: 0;
  background: var(--line3);
}

.connexion .discret {
  margin: 20px 0 0;
}

/* Les quatre carrés du logo de Microsoft : les mêmes dans les deux modes. */
.microsoft {
  flex: none;
  width: 19px;
  height: 19px;
}

.microsoft .rouge {
  fill: #f25022;
}

.microsoft .vert {
  fill: #7fba00;
}

.microsoft .bleu {
  fill: #00a4ef;
}

.microsoft .jaune {
  fill: #ffb900;
}

/* Le sélecteur, en bas de la page de connexion : posé par-dessus, il ne déplace pas le
   bloc centré. Sur un écran très court, il reprend sa place dans le flux. */
.seule > .affichage {
  position: absolute;
  bottom: 24px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  padding: 0 20px;
  border-top: 0;
  transform: translateX(-50%);
}

@media (max-height: 519.98px) {
  .seule > .affichage {
    position: static;
    align-self: center;
    margin: 0 0 24px;
    transform: none;
  }
}

.seule > .affichage .libelle {
  margin: 0;
}

.seule > .affichage .choix {
  flex: 1;
}

/* Une erreur, dans le cadre : rien que son statut, son titre et sa phrase. */
.statut {
  margin: 0 0 8px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 18px;
}

.cadre .page-d-erreur {
  align-items: flex-start;
  max-width: 880px;
  margin-top: 0;
}

.seule .page-d-erreur p {
  color: var(--ink2);
}

/* -------------------------- de 900 à 1 280 px : les cellules se resserrent */

/* Dix colonnes tiennent ainsi dans la largeur qui reste, sans que la page défile. */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .tableau th,
  .tableau td {
    padding-right: 6px;
    padding-left: 6px;
  }
}

/* ------------------------------ sous 1 200 px : barre et menu, sans colonne */

/* La maquette dessine 1440 px et 390 px. Entre les deux, la colonne de navigation ne
   laisse pas sa place à un tableau de dix colonnes : sous 1 200 px, c'est la barre du
   téléphone qui porte la navigation. Les tableaux restent des tableaux jusqu'à 900 px. */
@media (max-width: 1199.98px) {
  .cadre {
    display: flex;
    flex-direction: column;
  }

  /* La navigation latérale se défait : sa barre monte, son pied descend. */
  .cote {
    display: contents;
  }

  .barre {
    display: flex;
    order: 0;
    align-items: center;
    justify-content: space-between;
    height: 57px;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    background: var(--side);
  }

  .marque {
    padding: 0;
    font-size: 17px;
  }

  .menu {
    display: inline-block;
    padding: 7px 12px;
    font-size: 13.5px;
    line-height: 18px;
    font-weight: 400;
    text-decoration: none;
  }

  /* Le menu s'ouvre sans script : « Menu » est un lien vers la navigation. */
  .navigation {
    display: none;
    order: 1;
    padding: 12px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--side);
    scroll-margin-top: 57px;
  }

  .navigation:target {
    display: flex;
  }

  .navigation .fermer {
    display: block;
    margin-top: 8px;
    color: var(--strong);
    text-decoration: underline;
  }

  .cadre main {
    flex: 1;
    order: 2;
  }

  .pied {
    order: 3;
    gap: 14px;
    margin-top: 0;
    padding: 20px;
    border-top: 1px solid var(--line);
    background: var(--side);
  }

  .compte {
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
  }

  .affichage {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border-top: 0;
  }

  .affichage .libelle {
    margin: 0;
  }

  .affichage .choix {
    flex: 1;
    max-width: 320px;
  }

  .affichage button {
    padding: 7px 6px;
    font-size: 12.5px;
  }
}

/* ----------------------------------------- sous 900 px : téléphone, cartes */

@media (max-width: 899.98px) {
  main {
    padding: 24px 20px 28px;
  }

  h1 {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: 0;
  }

  h1.client {
    font-size: 28px;
    line-height: 34px;
  }

  .retour + h1 {
    margin-top: 16px;
  }

  h2 {
    margin: 36px 0 4px;
    font-size: 19px;
    line-height: 24px;
  }

  .discret {
    font-size: 12.5px;
  }

  p.discret {
    margin-top: 6px;
  }

  .tete {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .tete button {
    width: 100%;
    padding: 11px 16px;
  }

  /* Un libellé long passe à la ligne plutôt que de sortir de l'écran. */
  main button {
    max-width: 100%;
    white-space: normal;
  }

  .actualiser .patience {
    position: static;
    width: auto;
    text-align: left;
  }

  .entete {
    flex-direction: column;
    gap: 4px;
    margin: 36px 0 0;
  }

  .entete a {
    padding-top: 1px;
    font-size: 13.5px;
  }

  .retour {
    margin-top: -2px;
  }

  /* Le grand chiffre, puis les autres : libellé à gauche, valeur à droite. */
  .chiffres {
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }

  .chiffres dd {
    margin-top: 0;
    font-size: 20px;
    line-height: 26px;
  }

  .chiffres .principal {
    display: block;
    flex: none;
    margin-bottom: 4px;
  }

  .chiffres .principal dt {
    font-size: 13px;
    line-height: 18px;
  }

  .chiffres .principal dd {
    margin-top: 2px;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.01em;
  }

  /* Libellé à gauche, valeur à droite, sur la même ligne de base ; le lien dessous. */
  .chiffres > div:not(.principal) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
  }

  .chiffres > div:not(.principal) dt {
    grid-column: auto;
  }

  /* Le libellé du chiffre que suit un lien va à la ligne, comme dans la maquette. */
  .chiffres > .avec-suite dt {
    max-width: 110px;
  }

  .chiffres > div:not(.principal) dd {
    text-align: right;
  }

  .chiffres dd.suite {
    grid-column: 1 / -1;
    justify-self: end;
    margin-left: 0;
    line-height: 19px;
  }

  .chiffres dd.suite a::before {
    content: "Voir les ";
  }

  .chiffres.en-ligne {
    flex-direction: row;
    gap: 12px 32px;
    margin-top: 20px;
  }

  .chiffres.en-ligne .principal {
    flex: 0 0 100%;
    margin-bottom: 0;
  }

  .chiffres.en-ligne .principal dd {
    font-size: 34px;
    line-height: 42px;
  }

  .chiffres.en-ligne > div:not(.principal) {
    display: block;
    padding-bottom: 0;
  }

  .chiffres.en-ligne > div:not(.principal) dd {
    text-align: left;
  }

  /* Le titre qui suit les chiffres d'un client : 32 px, là où la balance en met 36. */
  .chiffres.en-ligne + h2 {
    margin-top: 32px;
  }

  .partage {
    margin-top: 24px;
  }

  .repartition {
    height: 8px;
    border-radius: 4px;
  }

  .legende {
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 12px;
  }

  .legende li {
    gap: 6px;
  }

  .legende .pastille {
    width: 9px;
    height: 9px;
  }

  /* Chaque ligne d'un tableau devient une carte : son titre et son montant en tête,
     puis une ligne par cellule, précédée de l'intitulé de sa colonne. */
  .tableau,
  .tableau tbody,
  .tableau tfoot {
    display: block;
  }

  .tableau thead {
    display: none;
  }

  .tableau {
    margin-top: 12px;
    border-top: 1px solid var(--line2);
    font-size: 13.5px;
    line-height: 18px;
  }

  .tableau tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }

  .tableau tbody tr:hover {
    background: none;
  }

  /* L'intitulé flotte à gauche, la valeur s'aligne à droite, quoi qu'elle contienne. */
  .tableau td,
  .tableau.factures td,
  .tableau tfoot th {
    display: flow-root;
    grid-column: 1 / -1;
    width: auto;
    padding: 5px 10px;
    border: 0;
    border-radius: 4px;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tableau td::before {
    content: attr(data-libelle);
    float: left;
    max-width: 55%;
    margin-right: 12px;
    color: var(--ink2);
    text-align: left;
  }

  .tableau td.titre,
  .tableau tfoot th {
    grid-row: 1;
    grid-column: 1;
    padding: 0 0 8px;
    color: var(--strong);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    text-align: left;
  }

  .tableau td.total {
    grid-row: 1;
    grid-column: 2;
    padding: 0 0 8px;
    font-size: 15px;
    line-height: 20px;
  }

  .tableau td.titre::before,
  .tableau td.total::before,
  .tableau td.savoir::before,
  .tableau td.aucune::before {
    content: none;
  }

  .tableau td.titre .discret {
    display: block;
    margin-top: 4px;
    font-weight: 400;
  }

  /* Une carte n'affiche que les montants non nuls, et que les cellules qui disent
     quelque chose. */
  .tableau td.nul,
  .tableau td.vide {
    display: none;
  }

  .tableau td.savoir,
  .tableau td.aucune {
    padding: 8px 0 0;
    text-align: left;
  }

  .tableau td .message {
    clear: both;
    text-align: left;
  }

  /* Une cellule de saisie : son intitulé, puis son champ et son bouton sur une ligne. */
  .tableau td.saisie {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;
  }

  .tableau td.saisie::before {
    display: block;
    float: none;
    max-width: none;
    margin: 0 0 4px;
  }

  .tableau td form {
    flex-wrap: nowrap;
  }

  .tableau td form input[type="text"],
  .tableau td form input[type="number"],
  .tableau td form input[type="date"],
  .tableau td form select,
  .tableau td.saisie > select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .tableau tfoot tr {
    margin-top: -1px;
    border-top: 1px solid var(--line3);
    border-bottom: 0;
  }

  .tableau tfoot th,
  .tableau tfoot td {
    border-top: 0;
  }

  .tableau tfoot th {
    font-weight: 600;
  }

  /* Le total d'une balance, en carte : son montant seul. */
  .tableau.balance tfoot td:not(.total) {
    display: none;
  }

  /* Les tranches d'un client, sans titre : une ligne par tranche, puis le total. */
  .tableau.tranches td.total {
    grid-row: auto;
    grid-column: 1 / -1;
    padding: 5px 10px;
    font-size: inherit;
    line-height: inherit;
  }

  .tableau.tranches td.total::before {
    content: attr(data-libelle);
  }

  form.en-ligne button {
    width: 100%;
  }

  form.en-ligne label,
  form.en-ligne input {
    width: 100%;
  }

  iframe.apercu {
    height: 32rem;
  }

  .connexion {
    width: 100%;
  }

  .connexion h1,
  .seule .page-d-erreur h1 {
    font-size: 34px;
    line-height: 40px;
  }

  .sous-titre {
    font-size: 15px;
    line-height: 22px;
  }

  .filet {
    width: 40px;
    margin: 32px 0;
  }

  .connexion form,
  .connexion button.principal {
    width: 100%;
  }

  .connexion button.principal {
    padding: 14px 20px;
  }

  .connexion .discret {
    margin-top: 18px;
    font-size: 13px;
  }
}

/* ------------------------------------------------- mouvement, impression */

@media (prefers-reduced-motion: reduce) {
  form button:focus:not(:focus-visible) ~ .patience::before {
    animation: none;
    background-size: 100% 100%;
  }
}

@media print {
  .cote,
  .evitement,
  .actualiser {
    display: none;
  }

  .cadre {
    display: block;
  }

  main {
    padding: 0;
  }

  .tableau thead th {
    position: static;
  }
}