/* Administration de Sizzle — feuille séparée d'`app.css`, à dessein.

   L'écran vit hors de l'application : une seule personne le charge, ses
   tableaux réclament de la largeur là où l'app est une colonne, et il n'a pas à
   faire grossir la feuille que tout le monde télécharge. Il en reprend la
   palette et rien d'autre.

   Habillage du 20/09 (CADRE_ADMIN.md), après le refus de la première version :
   les six maquettes partagent une coque, une grille, une palette et des
   composants, et c'est ce vocabulaire-là qui est repris ici — barre latérale de
   235 px à icônes, en-tête serif de 40 px, tuiles à pastille colorée, onglets
   de filtre soulignés, tableaux à badges pastel, panneau de détail à croix.
   **La forme vient des maquettes, le contenu vient du serveur.** */

:root {
  --cream: #F7ECDF; --sand: #DCC9AE; --terra: #C65A2E; --cinnamon: #8B4A2B;
  --sage: #7C8B63; --card: #FEFCF9; --espresso: #2E241D; --muted: #8C7F70;
  --line: #E7DCCA; --amber: #D9A441; --danger: #A6412F;
  /* ⚠️ **Le rouge qui s'écrit n'est pas le rouge qui se remplit.** `--danger`
     sert de fond à la pastille et de bordure aux lignes neuves ; l'éclaircir
     pour le sombre casserait le texte clair posé dessus. Ce second jeton ne
     sert qu'au texte, et c'est lui qui remonte en sombre : sur la carte
     sombre, #A6412F tombait à 2,6:1 — un message qui explique un refus
     d'écriture doit se lire. */
  --danger-texte: #A6412F;

  /* ── Le bouton plein a ses propres jetons — R05, 21/09 ─────────────────────
     Même partage qu'`app.css`, et pour la même raison : `--terra` est un fond
     d'accent qui **s'éclaircit** en sombre, donc il va dans le mauvais sens
     dès qu'il sert de fond à un libellé clair. Mesuré ici : « Revenir à
     l'application » rendait 4,04:1 en clair et 3,04:1 en sombre.
     `--bouton-second-texte` est l'encre des commandes sans fond — `--muted`
     y rendait 3,81:1, lisible pour une phrase d'appoint, pas pour un bouton. */
  --bouton-fond: #A94A2A;
  --bouton-texte: #FFF7F1;
  --bouton-second-texte: #6B5B45;
  /* ⚠️ **L'état inactif est un couple, pas une opacité — revue du 21/09.**
     `opacity: .5` sur `.btn-fantome:disabled` délavait le libellé *et* le filet ;
     à mi-transparence, « Relancer » en cours d'envoi tombait sous le seuil au
     moment précis où il dit ce qu'il fait. */
  --bouton-inactif-fond: #EFE9E0;
  --bouton-inactif-texte: #6B5B45;

  /* ── Les jetons relevés dans les six maquettes ─────────────────────────────
     Fond de page, fond de la colonne, pilule de navigation, titre serif, filets
     de tableau et ligne choisie. Chacun a son équivalent sombre plus bas, sous
     les **deux** formes déjà en place dans cette feuille. */
  --fond: #FCF6F0;
  --lateral-fond: #FDF9F3;
  --nav-actif: #FAEEE5;
  --nav-encre: #6E5B4E;
  --titre: #3F1A10;
  --terra-fonce: #B84A24;
  --filet: #F1E7DA;
  --bord-carte: #F0E5D7;
  --survol: #FAF3EA;
  --ligne-active: #FBEDE4;

  /* Les quatre tons des pastilles d'icône et des badges de statut : terre
     cuite, ambre, sauge, gris. Le ton colore l'icône et le badge, jamais le
     chiffre d'une tuile. */
  --ton-terra-fond: #FAE4DA; --ton-terra-encre: #BC4A22;
  --ton-ambre-fond: #FAEED8; --ton-ambre-encre: #8E6A24;
  --ton-sauge-fond: #E8EEE0; --ton-sauge-encre: #55673F;
  --ton-gris-fond: #EFE9E0;  --ton-gris-encre: #7C6F62;

  --radius: 16px; --shadow: 0 8px 26px rgba(48, 41, 35, .05);

  /* ── La même écriture que l'application — R12, 21/09 ────────────────────────
     La demande de Luca porte sur *toute* l'interface : l'administration n'est
     pas une exception de lisibilité. Même pile, même repli remis à l'échelle,
     même échelle de degrés qu'`app.css` — recopiés ici parce que cette feuille
     est séparée à dessein (§ en tête de fichier) et qu'elle ne charge pas
     l'autre. ⛔ Ne plus employer `--serif` ni `--sans` : ils ne survivent que
     comme filet pour une déclaration oubliée. */
  --ecriture: "Caveat Gourde", "Sizzle repli", system-ui, -apple-system,
              "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: var(--ecriture);   /* ⛔ hérité */
  --sans:  var(--ecriture);   /* ⛔ hérité */
  /* ⚠️ **La monospace reste une monospace.** Une adresse de courriel, un jeton
     ou un identifiant se lisent caractère par caractère : dans une manuscrite,
     `rn`/`m`, `l`/`1` et `O`/`0` se confondent, et c'est sur ces colonnes-là
     qu'on décide de suspendre un compte. Ce n'est pas un oubli de R12, c'est le
     même raisonnement que le logo resté une image. */
  --technique: ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-titre:      36.5px;  /* l'en-tête de page des maquettes, 40 px à l'origine */
  --t-titre-sec:  32.5px;
  --t-carte:      24px;
  --t-corps:      22.5px;
  --t-appoint:    19.5px;
  --t-micro:      16.5px;
  --lh-titre: 1.1;
  --lh-corps: 1.3;
  --g-corps: 500; --g-accent: 600; --g-titre: 700;

  --lateral-largeur: 235px;
  --lateral-pad: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #1F1813; --card: #2A211A; --espresso: #F3EADD; --muted: #B0A08D;
    --line: #3C3027; --sand: #6B5B45; --terra: #D9743F; --sage: #93A278;
    --danger-texte: #E0785F;
    --bouton-fond: #BC4C2B; --bouton-second-texte: #B0A08D;
    --bouton-inactif-fond: #3C322A; --bouton-inactif-texte: #B0A08D;
    --shadow: 0 10px 30px rgba(0, 0, 0, .32);
    --fond: #1B1510; --lateral-fond: #221A14; --nav-actif: #3A2A20;
    --nav-encre: #C3B3A2; --titre: #F3EADD; --terra-fonce: #E8834F;
    --filet: #382D24; --bord-carte: #3A2E25; --survol: #322720;
    --ligne-active: #422A1E;
    --ton-terra-fond: #522E20; --ton-terra-encre: #F0977A;
    --ton-ambre-fond: #46381B; --ton-ambre-encre: #E9BC62;
    --ton-sauge-fond: #2E3A26; --ton-sauge-encre: #A8BC86;
    --ton-gris-fond: #3C322A;  --ton-gris-encre: #BCAB98;
  }
}
:root[data-theme="dark"] {
  --cream: #1F1813; --card: #2A211A; --espresso: #F3EADD; --muted: #B0A08D;
  --line: #3C3027; --sand: #6B5B45; --terra: #D9743F; --sage: #93A278;
  --danger-texte: #E0785F;
  --bouton-fond: #BC4C2B; --bouton-second-texte: #B0A08D;
  --bouton-inactif-fond: #3C322A; --bouton-inactif-texte: #B0A08D;
  --shadow: 0 10px 30px rgba(0, 0, 0, .32);
  --fond: #1B1510; --lateral-fond: #221A14; --nav-actif: #3A2A20;
  --nav-encre: #C3B3A2; --titre: #F3EADD; --terra-fonce: #E8834F;
  --filet: #382D24; --bord-carte: #3A2E25; --survol: #322720;
  --ligne-active: #422A1E;
  --ton-terra-fond: #522E20; --ton-terra-encre: #F0977A;
  --ton-ambre-fond: #46381B; --ton-ambre-encre: #E9BC62;
  --ton-sauge-fond: #2E3A26; --ton-sauge-encre: #A8BC86;
  --ton-gris-fond: #3C322A;  --ton-gris-encre: #BCAB98;
}

/* ── La fonte, servie par le dépôt ─────────────────────────────────────────────
   Les deux faces sont déclarées ici aussi : l'administration ne charge pas
   `app.css`, et une `@font-face` n'est pas héritée d'une autre feuille. Même
   fichier, même `?v=` — le navigateur ne le télécharge donc qu'une fois pour
   les deux surfaces. Aucune requête à Google Fonts ; `font-src 'self'`. */
@font-face {
  font-family: "Caveat Gourde";
  src: url("/static/fonts/caveat/caveat-latin.woff2?v=2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sizzle repli";
  src: local("Helvetica Neue"), local("Roboto"), local("Segoe UI"),
       local("Arial"), local("DejaVu Sans"), local("Liberation Sans");
  size-adjust: 67%;
}
@font-face {
  font-family: "Sizzle repli";
  src: local("Helvetica Neue Bold"), local("Roboto Bold"), local("Segoe UI Bold"),
       local("Arial Bold"), local("DejaVu Sans Bold"), local("Liberation Sans Bold");
  size-adjust: 67%;
  font-weight: 700;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--espresso);
  font-family: var(--ecriture); font-size: var(--t-corps);
  font-weight: var(--g-corps);
  /* 1,55 était l'interligne d'une linéale à 15 px ; à 22,5 px de manuscrite il
     aurait doublé la hauteur de chaque ligne de tableau. */
  line-height: var(--lh-corps);
  -webkit-font-smoothing: antialiased;
}
/* `textarea` a sa propre police par défaut (monospace sous Chromium) : sans lui
   ici, le motif de modération restait le seul champ hors de l'écriture commune. */
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2.5px solid var(--terra); outline-offset: 2px; border-radius: 8px; }

/* ── Le jeu d'icônes ───────────────────────────────────────────────────────
   Les tracés sont déposés par `admin.js` dans les hôtes `[data-icone]` et dans
   les gabarits qu'il rend : un seul jeu, monochrome, qui hérite de la couleur
   du texte. Aucune police d'icônes, aucun CDN — et aucun dessin écrit dans la
   page servie. */
.ico, [data-icone] {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  line-height: 0;
}
.ico svg, [data-icone] svg { width: 18px; height: 18px; display: block; }

/* ── Coque : barre latérale et contenu ─────────────────────────────────────
   Sur bureau, une colonne de navigation de 235 px et le contenu qui défile à
   droite ; sous 900 px, la même navigation devient une rangée de boutons qui
   défile horizontalement au-dessus du contenu — aucune des six vues ne
   disparaît, elle change seulement de sens. */

/* Le fond de la colonne est peint par la coque : la colonne elle-même est
   collante et haute comme la fenêtre, ce qui laisserait le fond de page
   apparaître sous elle sur un document plus long que l'écran. */
.coque {
  display: flex; min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(to right,
    var(--lateral-fond) 0 var(--lateral-largeur), transparent var(--lateral-largeur));
}
.lateral {
  flex: 0 0 var(--lateral-largeur); position: sticky; top: 0; align-self: flex-start;
  height: 100vh; height: 100dvh; overflow: hidden auto;
  display: flex; flex-direction: column; gap: 22px;
  padding: 26px var(--lateral-pad) 0; background: var(--lateral-fond);
}
.contenu { flex: 1 1 auto; min-width: 0; }

.marque {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 0 14px; text-decoration: none; color: inherit; border-radius: 10px;
}
.marque img { display: block; width: 150px; height: auto; }
.marque span { color: var(--muted); font-size: 17px; letter-spacing: .14em; text-transform: uppercase; }

/* ── Navigation des six vues ───────────────────────────────────────────────
   L'entrée courante est une pilule claire qui court jusqu'au bord gauche de
   l'écran, avec son liseré terre cuite de 3 px collé à ce bord : c'est le
   repère commun aux six maquettes. La rangée déborde donc de la marge
   intérieure de la colonne. */

.onglets { display: flex; flex-direction: column; gap: 2px; margin: 0 calc(-1 * var(--lateral-pad)); }
.onglet {
  position: relative; border: none; background: transparent; color: var(--nav-encre);
  border-radius: 0 12px 12px 0; padding: 12px 16px 12px 30px; cursor: pointer;
  min-height: 46px; width: 100%; text-align: left; font-size: 22.5px;
  display: flex; align-items: center; gap: 12px;
}
.onglet-nom { min-width: 0; }
.onglet-icone { color: var(--nav-encre); opacity: .85; }
.onglet:hover { background: color-mix(in srgb, var(--nav-actif) 55%, transparent); }
.onglet.on { background: var(--nav-actif); color: var(--cinnamon); font-weight: 600; }
.onglet.on .onglet-icone { color: var(--terra); opacity: 1; }
.onglet.on::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--terra); border-radius: 0 3px 3px 0;
}
/* Le bord gauche de la colonne est le bord de l'écran : un anneau de focus
   décalé vers l'extérieur y serait rogné. */
.onglet:focus-visible { outline-offset: -3px; }
/* `--terra` sur la pilule sombre rendait 4,26:1 ; `--terra-fonce` y est plus
   clair et rend 5,09:1 (R05). */
:root[data-theme="dark"] .onglet.on { color: var(--terra-fonce); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .onglet.on { color: var(--terra-fonce); }
}
.pastille {
  background: var(--danger); color: #FFF7F1; border-radius: 999px;
  padding: 1px 8px; font-size: 19px; font-weight: 600; margin-left: auto;
}

/* L'illustration culinaire, ancrée en pied et volontairement débordante à
   gauche — elle est rognée par le bord de l'écran, comme dans les maquettes.
   Elle disparaît en sombre et sous 900 px plutôt que de rogner la zone utile. */
.lateral-decor {
  margin: auto calc(-1 * var(--lateral-pad)) 0; height: 190px; flex: none;
  background: url("/static/img/admin-decor.webp") left bottom / 128% auto no-repeat;
}
:root[data-theme="dark"] .lateral-decor { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lateral-decor { display: none; }
}

/* ── Bande de tête du contenu ──────────────────────────────────────────────
   Les commandes communes aux six vues : l'heure du dernier succès à gauche, le
   thème, le rafraîchissement, le retour à l'application et l'identité réelle à
   droite. ⛔ Aucune cloche : il n'existe aucune notification d'administration. */

.barre {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 18px 30px 0;
}
.barre-etat { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-width: 0; }
.barre-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.actualise { color: var(--muted); font-size: 19.5px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.actualise time { font-variant-numeric: tabular-nums; color: var(--espresso); }

.moi { display: inline-flex; align-items: center; gap: 10px; margin-left: 6px; min-width: 0; }
.moi-pastille {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 600; font-size: 22.5px;
  background: var(--ton-terra-fond); color: var(--ton-terra-encre);
}
.qui { color: var(--espresso); font-size: 21px; font-weight: 600; overflow-wrap: anywhere; }

.chargement { color: var(--muted); padding: 40px 30px; margin: 0; }

.btn-fantome {
  border: 1px solid var(--line); background: var(--card);
  color: var(--bouton-second-texte);
  border-radius: 999px; padding: 8px 16px; cursor: pointer; min-height: 40px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 21px;
}
/* ⚠️ **Le survol n'est pas dispensé du seuil — revue du 21/09.** `--terra` est
   un accent de fond : lu comme encre il rendait 4,28:1 en clair, et il n'est
   **pas** redéfini pour le sombre côté encre. `--terra-fonce` l'est dans les
   deux thèmes (#B84A24 / #E8834F) : 5,2:1 et 5,9:1 mesurés. La même correction
   vaut pour les quatre autres survols de cette feuille. */
.btn-fantome:hover { border-color: var(--terra-fonce); color: var(--terra-fonce); }
/* Le geste fort se voit au repos, pas seulement au survol — et il n'est jamais
   posé en premier dans une rangée de commandes. Rouge doux : c'est un
   avertissement, pas une alarme. */
.btn-fantome.danger {
  color: var(--danger-texte);
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
}
.btn-fantome.danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--card)); }
.btn-fantome:disabled {
  background: var(--bouton-inactif-fond); color: var(--bouton-inactif-texte);
  border-color: var(--line); cursor: progress;
}
.btn-icone svg { width: 16px; height: 16px; }
.btn-plein {
  border: none; border-radius: 14px;
  background: var(--bouton-fond); color: var(--bouton-texte);
  padding: 12px 22px; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-block; min-height: 46px;
}

main { max-width: 1320px; margin: 0 auto; padding: 14px 30px 70px; min-width: 0; }

/* ── En-tête de vue ────────────────────────────────────────────────────────
   Titre serif de 40 px et sous-titre à gauche, commandes de la vue à droite :
   la recherche en pilule avec sa loupe, les filtres et les périodes. */

.entete {
  display: flex; align-items: flex-end; gap: 14px 26px; flex-wrap: wrap;
  margin: 6px 0 24px;
}
.entete-titre { flex: 1 1 320px; min-width: 0; }
.entete h1 {
  font-family: var(--ecriture); font-weight: 400; font-size: 43px; line-height: 1.06;
  margin: 0; color: var(--titre); letter-spacing: -.005em;
}
.entete h1:focus { outline: none; }
.entete h1:focus-visible { outline: 2.5px solid var(--terra); outline-offset: 4px; }
.entete-titre p { margin: 7px 0 0; color: var(--muted); font-size: 22.5px; max-width: 64ch; }
.entete-commandes {
  margin-left: auto; flex: 1 1 340px; display: flex; align-items: center;
  justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-bottom: 4px;
}

/* 16 px sur le champ : en dessous, iOS agrandit la page à la mise au point et
   ne la rend jamais. L'échelle n'est pas verrouillée ici, mais ce zoom-là n'est
   pas demandé. */
.recherche-boite {
  position: relative; display: inline-flex; align-items: center;
  flex: 1 1 320px; max-width: 520px; min-width: 0;
}
.recherche-icone { position: absolute; left: 15px; color: var(--muted); pointer-events: none; }
.recherche {
  width: 100%; min-width: 0; font-size: 24px; min-height: 46px;
  padding: 10px 16px 10px 43px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--espresso);
}
.recherche::placeholder { color: var(--muted); }
.recherche::-webkit-search-cancel-button { cursor: pointer; }

/* ── Tuiles de chiffres ────────────────────────────────────────────────────
   Rangée de quatre en tête de vue : pastille d'icône colorée à gauche, nombre
   en serif, libellé dessous. ⚠️ La pastille colore l'icône, jamais le chiffre,
   et aucune variation « vs mois dernier » n'existe dans les réponses. */

.tuiles {
  display: grid; gap: 16px; margin-bottom: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tuile {
  background: var(--card); border: 1px solid var(--bord-carte); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
  display: flex; align-items: flex-start; gap: 14px;
}
.tuile-pastille {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: var(--ton-gris-fond); color: var(--ton-gris-encre);
}
.tuile-pastille svg { width: 21px; height: 21px; }
.tuile-pastille.ton-terra { background: var(--ton-terra-fond); color: var(--ton-terra-encre); }
.tuile-pastille.ton-ambre { background: var(--ton-ambre-fond); color: var(--ton-ambre-encre); }
.tuile-pastille.ton-sauge { background: var(--ton-sauge-fond); color: var(--ton-sauge-encre); }
.tuile-corps { min-width: 0; }
.tuile-label { color: var(--muted); font-size: 20px; }
.tuile-valeur {
  font-family: var(--ecriture); font-weight: 400; font-size: 32.5px; line-height: 1.16;
  margin-top: 2px; overflow-wrap: anywhere;
}
.tuile-note { color: var(--muted); font-size: 19.5px; margin-top: 2px; }
.tuile.alerte { border-color: color-mix(in srgb, var(--danger) 40%, var(--bord-carte)); }
.tuile.alerte .tuile-valeur { color: var(--danger-texte); }

/* Une tuile qui ouvre une vue est un lien, et se lit comme tel : même surface,
   la mention « Ouvrir » en pied et un bord qui répond au survol. */
.tuile-acces { text-decoration: none; color: inherit; cursor: pointer; }
.tuile-acces:hover, .tuile-acces:focus-visible { border-color: var(--terra); }
.tuile-ouvrir { color: var(--terra); font-size: 19.5px; font-weight: 600; margin-top: 8px; }

/* La veille qui manque le dit — un encart, pas trois tirets qu'on prendrait
   pour des valeurs inconnues. */
.encart-indisponible {
  background: var(--card); border: 1px dashed var(--sand); border-radius: var(--radius);
  padding: 18px 20px; max-width: 660px;
}
.encart-indisponible h3 {
  font-family: var(--ecriture); font-weight: 400; font-size: 25px; letter-spacing: 0;
  color: var(--titre); margin: 0 0 6px;
}
.encart-indisponible p { margin: 0; font-size: 21px; color: var(--espresso); }
/* Dans une grille de tuiles, l'encart prend toute la rangée. */
.encart-indisponible.pleine-largeur { grid-column: 1 / -1; max-width: none; }

.titre-section {
  font-family: var(--ecriture); font-weight: 400; font-size: 27px;
  margin: 30px 0 14px; color: var(--titre);
}

.cartes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.carte {
  background: var(--card); border: 1px solid var(--bord-carte); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
/* Les maquettes écrivent les titres de carte en serif, comme les titres de
   section : c'est la même voix, à un niveau de plus. */
.carte h2 {
  font-family: var(--ecriture); font-weight: 400; font-size: 25px; letter-spacing: 0;
  color: var(--titre); margin: 0 0 12px;
}
.carte-note { color: var(--muted); font-size: 19px; margin: -6px 0 12px; }
.paire { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--filet); }
.paire:first-of-type { border-top: none; }
.paire b { font-weight: 600; white-space: nowrap; text-align: right; }
/* Une valeur écrite à la main — les précisions « Autrement » vont jusqu'à
   200 caractères — revient à la ligne, et coupe au besoin un mot qui n'en
   finit pas : `nowrap` la faisait déborder de la page entière. */
.carte-texte .paire { align-items: baseline; }
.carte-texte .paire b { white-space: normal; overflow-wrap: anywhere; }

.note { color: var(--muted); font-size: 20px; margin: 0 0 14px; }

/* ── Tableaux ──────────────────────────────────────────────────────────────
   En-têtes petits, gris, en majuscules espacées ; filets très clairs ; ligne
   choisie sur fond rosé pâle. Le cadre défile, pas la page : un tableau large
   ne doit jamais pousser le document entier sur son axe horizontal. */

.tableau-cadre {
  overflow-x: auto; background: var(--card); border: 1px solid var(--bord-carte);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
table { border-collapse: collapse; width: 100%; font-size: 21px; }
th, td { text-align: left; white-space: nowrap; }
th {
  color: var(--muted); font-size: 17px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 600; padding: 14px 16px;
  border-bottom: 1px solid var(--filet);
}
td { padding: 13px 16px; border-top: 1px solid var(--filet); }
tbody tr:first-child td { border-top: none; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--survol); }
.email { font-family: var(--technique); font-size: 15px; }

/* Les badges de statut : des pilules pastel, une par sens. */
.etiquette {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 4px 11px; font-size: 19px; font-weight: 600; white-space: nowrap;
}
.etiquette svg { width: 14px; height: 14px; }
.etiquette.admin { background: var(--ton-terra-fond); color: var(--ton-terra-encre); }
.etiquette.muet { background: var(--ton-gris-fond); color: var(--ton-gris-encre); }
.etiquette.nouveau { background: var(--ton-terra-fond); color: var(--ton-terra-encre); }
.etiquette.vu { background: var(--ton-ambre-fond); color: var(--ton-ambre-encre); }
.etiquette.traite { background: var(--ton-sauge-fond); color: var(--ton-sauge-encre); }
/* ⛔ Ces quatre-là ne traduisent rien : elles colorent un mot servi tel quel.
   Un état que le dépôt ne connaît pas reste gris, et reste lisible. */
.etiquette.ton-sauge { background: var(--ton-sauge-fond); color: var(--ton-sauge-encre); }
.etiquette.ton-ambre { background: var(--ton-ambre-fond); color: var(--ton-ambre-encre); }
.etiquette.ton-terra { background: var(--ton-terra-fond); color: var(--ton-terra-encre); }
.etiquette.ton-gris { background: var(--ton-gris-fond); color: var(--ton-gris-encre); }

/* ── Liste et détail — le motif commun de P42 et P45 ────────────────────────
   Sur bureau, le tableau à gauche et le détail à droite, chacun avec son propre
   défilement : lire un message de 2 000 caractères ne doit pas faire perdre sa
   place dans la liste. Sous 1100 px, le détail **remplace** la liste — deux
   colonnes dans 390 px ne donnent ni l'une ni l'autre. */

.barre-filtres {
  display: flex; align-items: flex-end; gap: 4px 20px; flex-wrap: wrap;
  margin-bottom: 16px; border-bottom: 1px solid var(--filet);
}
.onglets-filtre { display: flex; gap: 2px; flex-wrap: wrap; }
.onglet-filtre {
  /* R05, revue du 21/09 : au repos `--muted` rendait 3,64:1 sur le fond de page. */
  border: none; background: transparent; color: var(--bouton-second-texte);
  font: inherit; font-size: 22px; font-weight: 600;
  padding: 10px 12px; min-height: 44px; cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.onglet-filtre:hover { color: var(--terra-fonce); }
.onglet-filtre.on { color: var(--terra-fonce); border-bottom-color: var(--terra); }
/* `--muted` ne rendait que 3,64:1 sur la carte claire pour ce compteur ; même
   jeton que les libellés de commandes sans fond plein (R05). */
.onglet-filtre b { font-weight: 600; color: var(--bouton-second-texte); margin-left: 3px; font-variant-numeric: tabular-nums; }
.onglet-filtre.on b { color: inherit; }
.filtres-fin {
  margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 8px;
}

.puces { display: flex; gap: 6px; flex-wrap: wrap; }
.puce {
  border: 1px solid var(--line); background: var(--card); color: var(--bouton-second-texte);
  border-radius: 999px; padding: 7px 13px; min-height: 38px; cursor: pointer;
  font-size: 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
}
.puce:hover { border-color: var(--terra-fonce); color: var(--terra-fonce); }
.puce svg { width: 15px; height: 15px; }
.puce b { font-variant-numeric: tabular-nums; font-weight: 700; }
.puce.on {
  background: var(--ton-terra-fond); border-color: var(--ton-terra-encre);
  color: var(--ton-terra-encre);
}

/* La borne du corpus se lit à côté de la liste : une recherche locale qui ne
   dirait pas sur quoi elle porte se lirait comme une recherche dans tout
   l'historique. */
.borne { color: var(--muted); font-size: 19.5px; margin: 0 0 14px; }

.duo { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.duo-liste { min-width: 0; }
.duo-detail { min-width: 0; }

/* Une ligne de tableau s'ouvre au clic et à la touche Entrée : elle porte
   `tabindex` et `aria-current` dit laquelle est ouverte. */
.tableau-liste tbody tr { cursor: pointer; }
.tableau-liste tbody tr.on { background: var(--ligne-active); }
.tableau-liste tbody tr.on td:first-child { box-shadow: inset 3px 0 0 var(--terra); }
.tableau-liste tbody tr:focus-visible { outline: 2.5px solid var(--terra); outline-offset: -3px; }
/* ⚠️ Un extrait de message est écrit par quelqu'un : il revient à la ligne et
   coupe au besoin un mot sans fin. C'est le défaut corrigé en P41 — une valeur
   libre en `nowrap` poussait la page entière sur son axe horizontal. */
.cellule-libelle { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.cellule-libelle .ico { color: var(--muted); margin-top: 2px; }
.cellule-libelle > span:last-child { min-width: 0; }
.cellule-message { white-space: normal; overflow-wrap: anywhere; min-width: 250px; max-width: 520px; }
.cellule-titre { display: block; font-size: 21px; }
.cellule-sans { color: var(--muted); font-style: italic; }
.cellule-note { display: block; color: var(--muted); font-size: 19px; margin-top: 2px; overflow-wrap: anywhere; }
/* L'identifiant d'une cible, à côté de son type : c'est la seule façon de retrouver
   l'objet, la file ne servant ni titre ni extrait du contenu. */
.cellule-code { display: block; font-family: var(--technique);
  font-size: 14px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; margin-top: 2px; }
td.date { color: var(--muted); font-size: 19.5px; font-variant-numeric: tabular-nums; }
.tableau-liste tbody tr.est-nouveau td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.tableau-liste tbody tr.est-nouveau.on td:first-child { box-shadow: inset 3px 0 0 var(--terra); }

.invite {
  color: var(--muted); font-size: 21px; background: var(--card);
  border: 1px dashed var(--sand); border-radius: var(--radius); padding: 26px 22px; margin: 0;
}

/* ── Panneau de détail ─────────────────────────────────────────────────────
   Croix de fermeture en haut, titre serif en tête, lignes « icône · libellé
   gris · valeur », sections titrées, commandes en bas — le geste destructif en
   rouge doux et jamais en premier. */

.panneau {
  background: var(--card); border: 1px solid var(--bord-carte); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.panneau-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panneau-fermer {
  margin-left: auto; border: 1px solid transparent; background: transparent;
  color: var(--muted); border-radius: 999px; cursor: pointer;
  min-height: 40px; padding: 8px 14px; display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 21px;
}
.panneau-fermer:hover { color: var(--terra); background: var(--survol); }
.panneau-titre {
  font-family: var(--ecriture); font-weight: 400; font-size: 30px; line-height: 1.18; margin: 0;
  color: var(--titre);
}
.panneau-titre:focus { outline: none; }
.panneau-titre:focus-visible { outline: 2.5px solid var(--terra); outline-offset: 4px; }
.panneau-sous { color: var(--muted); font-size: 19.5px; margin: 6px 0 14px; overflow-wrap: anywhere; }
.panneau-section {
  font-size: 18px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 20px 0 8px; font-weight: 600;
}
/* Le message entier, sauts de ligne compris, et sans pousser la page. */
.panneau-message {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
  font-size: 22.5px; line-height: 1.62;
}
.panneau-message.est-vide { color: var(--muted); font-style: italic; }
.panneau-note { color: var(--muted); font-size: 19.5px; margin: 8px 0 0; overflow-wrap: anywhere; }
/* Le seul chiffre non borné de la file : il compte les signalements visant le
   compte, sur toute la table. Il se lit à part, pas dans la ligne de tête — là,
   il repoussait la croix de fermeture à la ligne suivante. */
.panneau-alerte {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 14px; padding: 10px 13px; border-radius: 12px; font-size: 20px;
  background: var(--ton-terra-fond); color: var(--ton-terra-encre);
}
.panneau-alerte .ico { margin-top: 1px; }

.panneau-erreur {
  margin: 14px 0 0; padding: 10px 14px; font-size: 20px;
  border: 1px solid var(--danger); border-left-width: 3px; border-radius: 12px;
  color: var(--danger-texte); background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.panneau-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--filet);
}
.panneau-actions .panneau-note { flex: 1 1 100%; margin: 0; }

/* ⛔ Le motif d'une décision n'est pas une boîte de dialogue du navigateur :
   il se tape à côté de ce qu'on décide, et son refus s'affiche au même endroit. */
.champ-motif { display: block; margin: 4px 0 12px; }
.champ-motif > span { display: block; color: var(--muted); font-size: 19px; margin-bottom: 6px; }
.champ-motif textarea {
  width: 100%; min-height: 62px; resize: vertical; font-size: 24px;
  padding: 10px 13px; border-radius: 12px; line-height: 1.45;
  border: 1px solid var(--line); background: var(--fond); color: var(--espresso);
}
.champ-motif textarea::placeholder { color: var(--muted); }
.effets { display: grid; gap: 7px; margin-bottom: 4px; }
.effet { color: var(--muted); font-size: 19px; }
.effet b { color: var(--espresso); font-weight: 600; }

/* ⛔ Pas de `nowrap` sur ces valeurs : écran, adresse de page et contexte sont
   écrits par l'application **et par la personne qui signale**. */
.champs { display: grid; gap: 0; }
.champ { display: flex; gap: 11px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--filet); }
.champ:first-child { border-top: none; }
.champ-icone { color: var(--muted); align-self: flex-start; margin-top: 2px; }
.champ-icone svg { width: 16px; height: 16px; }
.champ-nom { color: var(--muted); font-size: 20px; flex: 0 0 38%; max-width: 170px; }
.champ-valeur { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 21px; }

/* Les trois statuts en un seul groupe : depuis n'importe lequel, les deux
   autres sont à un geste, retour en arrière compris. */
.segment { display: flex; gap: 6px; flex-wrap: wrap; }
.segment-bouton {
  border: 1px solid var(--line); background: var(--card);
  color: var(--bouton-second-texte);
  border-radius: 999px; padding: 8px 15px; min-height: 38px; cursor: pointer;
  font: inherit; font-size: 20px; font-weight: 600;
}
.segment-bouton:hover { border-color: var(--terra-fonce); color: var(--terra-fonce); }
.segment-bouton.on {
  background: var(--bouton-fond); border-color: var(--bouton-fond);
  color: var(--bouton-texte);
}

/* Un seul bouton de retour, deux libellés : la croix quand les deux panneaux
   sont à l'écran, « Retour à la liste » quand le détail l'a remplacée. */
.sur-large { display: none; }
@media (min-width: 1100px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
  /* Chaque colonne défile pour elle-même. Les 4 px de marge intérieure ne sont
     pas décoratifs : un conteneur qui défile rogne l'encre qui dépasse, et
     l'anneau de focus des lignes y était coupé (le défaut relevé sous 900 px
     sur les pilules de la coque en P41). */
  .duo-liste, .duo-detail { max-height: calc(100dvh - 120px); overflow: auto; padding: 4px; }
  .duo-detail { position: sticky; top: 16px; }
  .sur-etroit { display: none; }
  .sur-large { display: inline-flex; }
  .panneau-fermer { padding: 8px; min-width: 40px; justify-content: center; }
}
@media (max-width: 1099px) {
  .duo[data-detail="ouvert"] .duo-liste { display: none; }
  .duo[data-detail="ferme"] .duo-detail { display: none; }
}

/* ── Modération ────────────────────────────────────────────────────────────── */

.bascule { display: flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; font-size: 21px; min-height: 36px; }
.bascule input { width: 18px; height: 18px; accent-color: var(--terra); }

.sig-captures { display: flex; gap: 10px; flex-wrap: wrap; }
.sig-captures button {
  width: 96px; height: 96px; padding: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--fond); cursor: pointer;
}
.sig-captures img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Un fichier effacé dont la ligne porte encore le nom : la vignette cassée
   n'apprend rien, le bouton le dit et cesse de proposer un agrandissement vide. */
.sig-captures button.capture-absente {
  color: var(--muted); font-size: 19px; cursor: not-allowed;
  border-style: dashed; padding: 6px; display: grid; place-items: center;
}

/* ── Lots d'import ─────────────────────────────────────────────────────────── */

.lot-compte { display: flex; gap: 8px; flex-wrap: wrap; }
.echecs { display: grid; gap: 10px; }
/* Une URL d'échec fait couramment 200 caractères et n'a aucune césure
   naturelle : elle coupe où il faut plutôt que d'élargir la page. Elle reste
   sélectionnable — et copiable d'un bouton. */
.echec {
  border: 1px solid var(--line); border-left: 3px solid var(--danger);
  border-radius: 12px; padding: 12px 14px;
  background: color-mix(in srgb, var(--danger) 5%, transparent);
}
.echec-url {
  margin: 0; font-family: var(--technique);
  font-size: 15px; overflow-wrap: anywhere; user-select: all;
}
.echec-message { margin: 6px 0 0; color: var(--danger-texte); font-size: 19.5px; overflow-wrap: anywhere; }
.echec-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.echec-actions .btn-fantome { padding: 5px 12px; min-height: 36px; font-size: 19.5px; }

/* ── Mur, loupe, bandeau ───────────────────────────────────────────────────── */

/* Au-dessus de la coque : un refus se lit sans la navigation derrière. */
.mur { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: var(--fond); }
.mur-carte {
  background: var(--card); border: 1px solid var(--bord-carte); border-radius: 22px;
  padding: 34px 30px; text-align: center; max-width: 430px; box-shadow: var(--shadow);
}
.mur-logo { width: 132px; height: auto; display: block; margin: 0 auto 18px; }
.mur-carte h1 { font-family: var(--ecriture); font-weight: 400; font-size: 30px; margin: 0 0 10px; color: var(--titre); }
.mur-carte p { color: var(--muted); margin: 0 0 22px; }

/* La fenêtre d'agrandissement porte un bouton de fermeture : une colonne, donc,
   et non plus un seul centre. Le clic n'importe où ferme toujours — c'est ce
   que le curseur annonce. */
.loupe {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(30, 24, 20, .82); padding: 28px; cursor: zoom-out;
}
.loupe img {
  max-width: 100%; max-height: 100%; min-height: 0; flex: 0 1 auto;
  object-fit: contain; border-radius: 12px;
}
.loupe-fermer {
  align-self: flex-end; border: 1px solid rgba(247, 236, 223, .5); background: transparent;
  color: #F7ECDF; border-radius: 999px; padding: 8px 16px; min-height: 40px;
  font: inherit; font-size: 21px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.loupe-fermer:hover { border-color: #F7ECDF; }
.loupe-echec { color: #F7ECDF; font-size: 21px; margin: 0; text-align: center; }

.bandeau {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: 24px; z-index: 70; width: min(440px, calc(100% - 28px));
  background: var(--espresso); color: var(--cream);
  border-radius: 14px; padding: 13px 17px; font-size: 21px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.bandeau.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.vide { color: var(--muted); padding: 30px; text-align: center; white-space: normal; }

/* ── Coûts API ─────────────────────────────────────────────────────────────── */

/* Les périodes, en pilules plutôt qu'en menu déroulant : quatre choix qu'on
   change souvent se prennent d'un geste, et l'état courant reste lisible sans
   ouvrir quoi que ce soit. Repris de l'écran d'administration de Spotrail. */
.periodes { display: flex; gap: 6px; flex-wrap: wrap; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.periode {
  border: none; background: transparent; color: var(--bouton-second-texte);
  border-radius: 999px; padding: 7px 15px; min-height: 38px;
  font: inherit; font-size: 20px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.periode:hover { color: var(--terra-fonce); }
.periode.on { background: var(--bouton-fond); color: var(--bouton-texte); }

.carte-large { grid-column: 1 / -1; }
.carte-large h2 { margin-bottom: 4px; }
.tableau-cadre.plat { border: none; box-shadow: none; background: transparent; border-radius: 0; }
.tableau-cadre.plat th, .tableau-cadre.plat td { padding-left: 0; }
.tableau-cadre.plat tbody tr:hover { background: none; }
.tableau-cadre.plat tfoot td {
  border-top: 1.5px solid var(--line); font-weight: 600; color: var(--muted);
}
td.discret, .discret { color: var(--muted); font-size: 19.5px; }

/* La pastille de poste, tenue entre le graphe, sa légende et les tableaux. */
.pastille-poste {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 8px; vertical-align: baseline;
}

/* Le graphe empilé. Trente rectangles ne valent pas une bibliothèque de
   graphiques téléchargée par tout le monde ; le SVG s'étire à la largeur
   disponible, `preserveAspectRatio="none"` faisant le reste. */
.graphe {
  display: block; width: 100%; height: 140px; margin: 8px 0 8px;
  color: var(--muted);
}
.graphe rect:hover { opacity: .78; }
.graphe-axe {
  display: flex; justify-content: space-between; gap: 10px;
  color: var(--muted); font-size: 19px;
}
.legende {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--filet);
  color: var(--muted); font-size: 19px;
}
.legende-item { display: inline-flex; align-items: center; }
.legende + .carte-note { margin: 12px 0 0; }

/* L'anneau de répartition : un arc par poste, tracé en `stroke-dasharray` sur
   un seul cercle. La rotation d'un quart de tour met le premier arc à midi. */
.anneau-bloc { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.anneau { width: 150px; height: 150px; flex: none; transform: rotate(-90deg); }
.anneau-arc:hover { opacity: .78; }
.anneau-legende { flex: 1 1 200px; min-width: 0; display: grid; gap: 6px; }
.anneau-ligne { display: flex; align-items: baseline; gap: 8px; font-size: 20px; }
.anneau-nom { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.anneau-ligne b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.anneau-total {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--filet);
  color: var(--muted); font-size: 19px;
}

/* Un classement — « le lot le plus cher », « le compte qui dépense ». La jauge
   compare à la première ligne et non au total : c'est l'écart entre le premier
   et le second qu'on cherche à voir. */
.rang { margin-bottom: 14px; }
.rang:last-child { margin-bottom: 0; }
.rang-tete { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.rang-nom { font-size: 21px; }
.rang-tete b { font-variant-numeric: tabular-nums; }
.rang-jauge {
  height: 6px; border-radius: 999px; margin-top: 6px;
  background: var(--ton-gris-fond); overflow: hidden;
}
.rang-jauge span { display: block; height: 100%; border-radius: 999px; background: var(--terra); }
.rang-note { color: var(--muted); font-size: 19px; margin-top: 4px; }

/* Une part se lit d'un coup d'oeil là où une colonne de pourcentages demande de
   comparer des nombres entre eux. Largeur fixe : sinon la barre du poste
   dominant écrase la colonne du coût, qui est la donnée. */
td.part { width: 110px; padding-right: 0; }
td.part span {
  display: block; height: 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--terra) 62%, transparent); min-width: 2px;
}

.alerte-carte {
  background: var(--card); border: 1px solid var(--danger); border-left-width: 3px;
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
.alerte-carte h2 {
  font-family: var(--ecriture); font-weight: 400; font-size: 25px; letter-spacing: 0;
  color: var(--danger-texte); margin: 0 0 8px;
}
.alerte-carte p { margin: 0; font-size: 21px; }
.alerte-carte code {
  font-family: var(--technique); font-size: 15px;
  background: var(--ton-gris-fond);
  padding: 1px 6px; border-radius: 6px;
}

#note-couts { color: var(--muted); font-size: 19.5px; margin-top: 14px; }

/* ⚠️ **Quatre colonnes ne tiennent pas dans la colonne de gauche du duo.** À
   1100 px, la liste ne dispose que de ~440 px : le statut et la date sortaient
   du cadre, et un tableau qui défile horizontalement n'invite personne à
   chercher. En dessous de 1340 px, chaque ligne redevient donc une carte —
   la forme d'avant l'habillage, qui tient dans une colonne étroite. Les
   en-têtes restent lisibles par un lecteur d'écran, pas à l'oeil. */
@media (max-width: 1339px) {
  .tableau-liste thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .tableau-liste, .tableau-liste tbody, .tableau-liste tr, .tableau-liste td { display: block; width: auto; }
  .tableau-liste tbody tr { padding: 12px 15px; border-top: 1px solid var(--filet); }
  .tableau-liste tbody tr:first-child { border-top: none; }
  .tableau-liste td { border: none; padding: 3px 0; white-space: normal; }
  .tableau-liste tbody tr.on td:first-child,
  .tableau-liste tbody tr.est-nouveau td:first-child { box-shadow: none; }
  .tableau-liste tbody tr.on { box-shadow: inset 3px 0 0 var(--terra); }
  .tableau-liste tbody tr.est-nouveau { box-shadow: inset 3px 0 0 var(--danger); }
  .tableau-liste tbody tr.est-nouveau.on { box-shadow: inset 3px 0 0 var(--terra); }
  .cellule-message { min-width: 0; max-width: none; }
  /* Les deux cellules de badge se rangent côte à côte plutôt que l'une sous
     l'autre : empilées, elles faisaient trois lignes pour deux mots. */
  .tableau-liste td.cellule-etat { display: inline-block; margin: 5px 6px 0 0; }
  .tableau-liste td.nombre { display: inline-block; margin: 5px 14px 0 0; text-align: left; }
  .tableau-liste td.nombre::before { content: attr(data-libelle) " "; color: var(--muted); font-size: 19px; }
  .tableau-liste td.date { margin-top: 4px; }
}

/* ── Tablette et téléphone ─────────────────────────────────────────────────── */

/* Sous 1240 px la rangée de quatre tuiles se replie d'elle-même. */
@media (max-width: 1240px) {
  .tuiles { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
}

/* Sous 900 px la colonne latérale coûterait un quart de l'écran : elle passe
   au-dessus du contenu, et les six entrées deviennent une rangée de pilules
   qui défile dans son cadre. C'est la rangée qui défile, jamais la page.
   L'illustration de pied disparaît plutôt que de rogner la zone utile. */
@media (max-width: 900px) {
  .coque { display: block; background: none; }
  .lateral {
    position: static; height: auto; overflow: visible; flex-direction: row;
    align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 14px 16px;
    border-bottom: 1px solid var(--filet);
  }
  .marque { padding: 0; }
  .marque img { width: 112px; }
  .marque span { display: none; }
  .lateral-decor { display: none; }
  /* Le défilement horizontal rogne l'encre qui dépasse : sans cette marge
     intérieure, l'anneau de focus (2,5 px + 2 px de décalage) était coupé en
     haut et sur les côtés de la première et de la dernière pilule. */
  .onglets {
    flex: 1 1 100%; flex-direction: row; gap: 6px; overflow-x: auto;
    padding: 6px; margin: 0 -6px; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .onglet {
    flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px;
    padding: 8px 15px; min-height: 42px; font-size: 21px; white-space: nowrap;
    width: auto; gap: 8px;
  }
  .onglet:focus-visible { outline-offset: 2px; }
  .onglet.on { border-color: var(--terra); }
  .onglet.on::before { display: none; }
  .pastille { margin-left: 0; }

  .entete h1 { font-size: 32.5px; }
  .barre { padding: 14px 20px 0; }
  main { padding: 10px 20px 60px; }
}

@media (max-width: 640px) {
  .barre { padding: 12px 16px 0; gap: 8px 10px; }
  .barre-actions { margin-left: 0; gap: 8px; }
  .barre .btn-fantome { padding: 6px 12px; min-height: 38px; font-size: 20px; }
  .qui { display: none; }
  main { padding: 8px 16px 60px; }
  .chargement { padding: 32px 16px; }
  .entete { margin-bottom: 18px; }
  .entete h1 { font-size: 30.5px; }
  .entete-commandes { margin-left: 0; width: 100%; }
  .recherche-boite { flex: 1 1 100%; max-width: none; }
  .tuiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .tuile { padding: 14px; gap: 11px; }
  .tuile-pastille { width: 38px; height: 38px; border-radius: 11px; }
  .tuile-pastille svg { width: 18px; height: 18px; }
  .tuile-valeur { font-size: 30px; }
  .carte { padding: 16px; }
  /* Le nom du champ au-dessus de sa valeur : à 360 px, deux colonnes laissent
     une adresse de page dans un couloir de 150 px. */
  .duo { gap: 12px; }
  .panneau { padding: 16px 15px; }
  .champ { flex-wrap: wrap; }
  .champ-nom { flex: 0 0 auto; max-width: none; }
  .champ-valeur { flex: 1 1 100%; }
  .panneau-titre { font-size: 27.5px; }
  .filtres-fin { margin-left: 0; width: 100%; }
}