/* Mercuriale — feuille de style unique.

   Lisible sur un téléphone, à 5 h du matin, sur un marché. Donc : contraste
   élevé, pas de police téléchargée (aucune requête vers un tiers depuis une
   page qui montre des prix), et des tableaux qui restent lisibles à 360 px. */

/* Palette relevée au pixel sur le logo : vert #00653d, rouge #bf242c, crème
   #faf7f2 — le vert et le rouge du drapeau marocain. Le rouge de la marque ne
   sert QUE d'accent rare (le trait de marque, un chiffre en litige) : sur un
   tableau de bord, le rouge veut dire « regarde ici », et un rouge qui décore
   est un rouge qu'on cesse de voir. */
:root {
  /* Thème clair seulement (Mohamed, 2026-10-15, msg 204 : « mettre le site en
     blanc »). Le thème sombre suivait le réglage du téléphone ; il est retiré,
     et les contrôles natifs (sélecteur de date) sont dessinés en clair. */
  color-scheme: light;

  --marque-vert: #00653d;
  --marque-rouge: #bf242c;
  --marque-creme: #faf7f2;

  /* Fond blanc, gris très légers pour séparer sans encadrer. La couleur ne sert
     qu'à dire quelque chose : le vert de la marque pour l'action et le lien, le
     rouge pour l'alerte, l'ambre pour la prudence. */
  --encre: #17201b;
  --papier: #ffffff;
  --carte: #ffffff;
  --fond-doux: #f6f7f6;
  --trait: #e6e8e6;
  --sourdine: #5f6762;
  --accent: var(--marque-vert);
  --alerte: var(--marque-rouge);
  --attention: #8a5a00;
  --absent: #6f7672;
  --inconnu: #a9b0ac;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

.barre {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center;
  padding: .55rem 1rem; border-bottom: 1px solid var(--trait);
  background: var(--carte);
}
/* Le logo est une image sur fond crème. En thème clair le fond de page EST
   cette crème : lui poser une plaque de la même couleur dessine un rectangle
   qu'on remarque sans savoir pourquoi, et qui ressemble à une image mal
   détourée. La plaque n'apparaît donc qu'en thème sombre, où elle est ce qui
   rend le logo lisible sur un fond presque noir. */
.marque {
  display: inline-flex; align-items: center; text-decoration: none;
  border-radius: .4rem; padding: .3rem .1rem; line-height: 0;
}
.marque img { height: 26px; width: auto; display: block; }
.marque .nom { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
/* Le menu (Mohamed, 2026-10-15) : cinq liens, le reste sous « Plus ». Sur
   téléphone, un seul bouton « Menu » au lieu d'une barre sur quatre lignes. */
.barre nav { display: flex; flex-wrap: wrap; gap: 1rem; flex: 1; align-items: center; }
.barre nav a, .plus > summary { color: var(--sourdine); text-decoration: none; padding: .2rem 0; }
.barre nav a:hover, .plus > summary:hover { color: var(--encre); }
.barre nav a.actif, .plus > summary.actif { color: var(--encre); border-bottom: 2px solid var(--marque-rouge); }
.plus { position: relative; }
.plus > summary { cursor: pointer; list-style: none; }
.plus > summary::-webkit-details-marker { display: none; }
.plus > summary::after { content: " ▾"; font-size: .8em; }
.plus-liste { position: absolute; z-index: 10; top: calc(100% + .45rem); left: -.6rem; min-width: 12rem;
  display: flex; flex-direction: column; padding: .35rem 0; background: var(--carte);
  border: 1px solid var(--trait); border-radius: .5rem; box-shadow: 0 6px 24px rgb(0 0 0 / .12); }
.barre .plus-liste a { padding: .4rem .9rem; border: 0; }
.barre .plus-liste a:hover { background: color-mix(in srgb, var(--accent) 8%, var(--carte)); }
.barre .plus-liste a.actif { border: 0; box-shadow: inset 3px 0 0 var(--marque-rouge); }
.menu-mobile { display: none; }
.menu-mobile > summary { cursor: pointer; list-style: none; border: 1px solid var(--trait);
  border-radius: .4rem; padding: .25rem .7rem; font-size: .9rem; }
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile > summary::before { content: "☰ "; }
.menu-mobile[open] > summary::before { content: "✕ "; }
@media (max-width: 760px) {
  .menu-large { display: none !important; }
  .menu-mobile { display: block; margin-left: auto; order: 2; }
  .menu-mobile[open] { flex-basis: 100%; order: 3; }
  .menu-mobile[open] > summary { display: inline-block; }
  .menu-mobile nav { flex-direction: column; align-items: stretch; gap: 0; margin-top: .4rem; }
  .menu-mobile nav a { padding: .55rem .2rem; border-bottom: 1px solid var(--trait); }
  .menu-mobile nav a.actif { border-bottom: 1px solid var(--trait); box-shadow: inset 3px 0 0 var(--marque-rouge);
    padding-left: .6rem; }
  .barre .qui { display: none; }
  .qui-mobile { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .6rem .2rem 0; font-size: .82rem; color: var(--sourdine); }
  .qui-mobile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.qui-mobile { display: none; }
@media (max-width: 760px) { .menu-mobile[open] .qui-mobile { display: flex; } }
.qui { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--sourdine); }
.qui span:first-child { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role { border: 1px solid var(--trait); border-radius: 999px; padding: 0 .5rem; }

main { padding: 1rem; }

/* Les liens du contenu (« ← Jour précédent », les produits de la vue écarts).
   Laissés au navigateur, ils prenaient son bleu par défaut — presque noir sur
   le fond sombre du thème nuit, donc invisibles. */
main a, .avis a { color: var(--accent); text-underline-offset: .18em; }
main a:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- avis */

.avis { margin: 0; padding: .55rem 1rem .55rem 2.2rem; background: #fff8e6;
        border-bottom: 1px solid #f1e2b8; font-size: .88rem; color: #4a3b12; }

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

.cadre { overflow-x: auto; }               /* la grille défile, jamais la page */
/* La légende fait partie du tableau : elle en prend donc la largeur, et le
   navigateur la centrait sur 1 700 px. Alignée à gauche, elle commence là où
   commence la grille et se lit avant de défiler. */
caption { text-align: left; padding: 0 0 .45rem; color: var(--sourdine);
          font-size: .88em; line-height: 1.4; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: .35rem .42rem; border-bottom: 1px solid var(--trait); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0;
                                background: var(--papier); }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* Les en-têtes ont le droit de tenir sur deux lignes. « Marge nette prudente
   (9 DH/km) » sur une seule imposait sa largeur à toute une colonne de
   chiffres, et poussait la colonne « Statut » hors du cadre. */
thead th { position: sticky; top: 0; background: var(--fond-doux); font-weight: 600;
           border-bottom: 2px solid var(--trait); white-space: normal; }

/* Une colonne de prose dans un tableau de chiffres. Sans elle, la règle
   `white-space: nowrap` ci-dessus étalait la phrase explicative sur une seule
   ligne : le tableau des écarts faisait deux fois la largeur de l'écran et sa
   colonne « Statut » — « sous le seuil », « à confirmer » — tombait dehors. */
.phrase { white-space: normal; min-width: 13rem; max-width: 46rem;
          text-align: left; color: var(--sourdine); font-size: .9em;
          line-height: 1.4; }
/* L'en-tête d'une colonne de prose s'aligne sur sa prose. Aligné à droite par
   la règle générale, il flottait à l'autre bout d'une colonne de 1 000 px. */
th.phrase { text-align: left; color: var(--encre); font-size: 1em; }

/* Un fragment littéral — un chemin, une commande — se distingue du texte qui
   l'entoure : sans cela, « ops/backup-verify.sh » se lit comme une phrase. */
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
       font-size: .92em; background: color-mix(in srgb, var(--trait) 45%, transparent);
       border-radius: .25rem; padding: .05em .25em; }
.phrase.single { color: var(--attention); }

/* Drapeaux qualité : la couleur ne porte jamais seule l'information, chaque
   cellule garde un libellé lisible — un daltonien lit le même tableau. */
.ok        { color: var(--encre); }
.disputed  { color: var(--alerte); font-weight: 600; }
.single    { color: var(--attention); }
.absent    { color: var(--absent); font-style: italic; }
.inconnu   { color: var(--inconnu); }
.estime::after { content: " (est.)"; color: var(--sourdine); font-size: .85em; }

/* Trois informations tiennent dans une case, et elles n'ont pas le même poids :
   le prix se lit à un mètre, l'équivalent DH/tonne se cherche, la provenance ne
   s'affiche que lorsqu'elle sort de l'ordinaire (voir NOMINAL_COLLECTORS). */
td .tonne { color: var(--sourdine); font-size: .78em; }
td .prov  { color: var(--sourdine); font-size: .74em; white-space: normal;
            display: inline-block; max-width: 14ch; line-height: 1.35; }
/* La provenance d'une case en litige garde la couleur de son drapeau : c'est
   là qu'est écrit « écart > 20 % », et c'est ce qu'on doit voir de loin. */
td.disputed .prov { color: var(--alerte); }
td.single   .prov { color: var(--attention); }
/* Une seule source est le cas courant tant qu'une place n'a qu'un collecteur :
   le prix reste à l'encre, seule la petite ligne « 1 seule source » est ambrée.
   Une grille entièrement ambrée ne signalait plus rien (msg 204). */
td.single { color: var(--encre); }
thead th:first-child { background: var(--fond-doux); }

/* ---------------------------------------------------------------- connexion */

body.public { display: grid; place-items: center; min-height: 100vh; }
.carte {
  width: min(26rem, 92vw); border: 1px solid var(--trait); border-radius: .6rem;
  padding: 1.75rem 1.5rem; background: var(--carte);
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06);
}
/* `inline-flex` et non `flex` : en thème sombre la plaque crème doit épouser
   le logo, pas traverser la carte de bord à bord — un titre de niveau 1 est un
   bloc, et le bloc prenait toute la largeur avec sa plaque. */
.carte .marque { margin: 0 0 .6rem; padding: 0; display: inline-flex;
                 width: fit-content; }
.carte .marque img { height: 32px; }
.carte .sous-titre { margin: 0 0 1.4rem; color: var(--sourdine); font-size: .92rem; }
label { display: block; margin: .8rem 0 .25rem; font-size: .9rem; }

/* Le navigateur dessine par défaut un liseré noir épais. Sur cette page il
   tombait sur le seul champ de la carte et en faisait la chose la plus lourde
   de l'écran. Même épaisseur — l'accessibilité y tient — mais aux couleurs de
   la marque, et posé à distance du champ plutôt que sur son bord. */
:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .35rem;
}
input:focus-visible { border-color: var(--accent); }
input[type=email], input[type=text], input[type=date], select {
  width: 100%; padding: .55rem .6rem; font: inherit; letter-spacing: .04em;
  border: 1px solid var(--trait); border-radius: .35rem; background: var(--papier); color: var(--encre);
}
/* Un menu déroulant de six villes n'a pas besoin de 1440 px : étiré sur toute
   la largeur, il se lit comme une bannière et non comme un choix. */
select, input[type=date] { max-width: 24rem; }
main form input[type=text], main form input[type=email] { max-width: 24rem; }

button { font: inherit; padding: .5rem .9rem; border: 1px solid var(--trait);
         border-radius: .35rem; background: var(--accent); color: var(--papier); cursor: pointer; }
.qui button { background: none; color: var(--sourdine); padding: .2rem .5rem; }
.erreur { color: var(--alerte); font-size: .9rem; }

footer { padding: 1.5rem 1rem; color: var(--sourdine); font-size: .85rem; border-top: 1px solid var(--trait); }

/* ---------------------------------------------------------------- titres */

/* Le défaut du navigateur (2 em) donne un titre de 30 px qui, sur un
   téléphone, prend deux lignes pleines avant le premier chiffre. */
main h1 { font-size: 1.55rem; margin: .2rem 0 .9rem; line-height: 1.25; }
main h2 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }

/* ---------------------------------------------------------------- téléphone

   La page est ouverte à 5 h du matin, debout, sur un marché. Ce qui compte est
   le nombre de pixels entre le haut de l'écran et le premier prix : ici on
   resserre l'en-tête, les avis et le titre, sans rien retirer de leur contenu
   — un avis qui dit qu'il manque quatre prix ne se plie pas. */
/* La page d'état se lit en entier sur un téléphone, et c'est son cas d'usage
   principal : on l'ouvre debout, à 5 h du matin, pour savoir si quelque chose
   est cassé. Les grilles de prix, elles, gardent leur défilement horizontal —
   une mercuriale de six places n'a pas de forme utile à 390 px, et la faire
   défiler est le bon compromis. Ici non : la colonne coupée par le défilement
   serait précisément la phrase qui explique la panne.

   Chaque ligne devient donc un bloc : le nom du point, son verdict, puis la
   phrase en pleine largeur. */
@media (max-width: 560px) {
  .etat, .etat tbody, .etat tr, .etat th, .etat td { display: block; width: auto; }
  /* Sortie du contexte de tableau, une légende `display: table-caption` se
     réduit à sa largeur minimale : un mot par ligne, sur trente lignes. */
  .etat caption { display: block; width: auto; }
  .etat thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
                clip-path: inset(50%); }
  .etat tr { border-bottom: 1px solid var(--trait); padding: .55rem 0; }
  .etat th[scope="row"] { position: static; background: none; font-size: 1rem;
                          padding: 0 0 .15rem; border: 0; }
  .etat td { text-align: left; padding: 0 0 .15rem; border: 0; white-space: normal; }
  .etat td.phrase { min-width: 0; max-width: none; }
}

@media (max-width: 560px) {
  .barre { padding: .4rem .6rem; gap: .4rem .7rem; }
  .barre nav { gap: .7rem; font-size: .93rem; }
  .qui { font-size: .8rem; gap: .4rem; }
  .avis { padding: .45rem .8rem .45rem 1.9rem; font-size: .84rem; line-height: 1.35; }
  main { padding: .7rem; }
  main h1 { font-size: 1.25rem; margin: .1rem 0 .7rem; }
  main h2 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
}

/* ------------------------------------------------------- fiches et comptes */

/* L'état d'une fiche se lit en deux colonnes sur un écran large, en une sur un
   téléphone : le libellé au-dessus de sa valeur, jamais tronqué. */
.etat-fiche { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem;
              margin: 0 0 1rem; }
.etat-fiche dt { color: var(--sourdine); }
.etat-fiche dd { margin: 0; }
@media (max-width: 480px) {
  .etat-fiche { grid-template-columns: 1fr; }
  .etat-fiche dd { margin-bottom: .4rem; }
}
.bloc { background: var(--carte); border: 1px solid var(--trait); border-radius: .4rem;
        padding: .2rem 1rem .6rem; max-width: 46rem; }
.bloc a { overflow-wrap: anywhere; }
label.case { display: flex; gap: .5rem; align-items: flex-start; max-width: 46rem; }
label.case input { margin-top: .3rem; }
main form small { display: block; color: var(--sourdine); font-size: .85rem; margin: .2rem 0 0; }
main form + form { margin-top: 1rem; }
.en-ligne { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.en-ligne select, .en-ligne input[type=date] { width: auto; }
/* Les filtres tiennent sur une ligne, libellé à côté du champ (msg 193). */
.en-ligne label { margin: 0 .1rem 0 .4rem; }
.en-ligne label:first-child { margin-left: 0; }
main form.en-ligne { margin: 0 0 1rem; }
/* Un libellé pour le lecteur d'écran, invisible à l'œil : la ligne du tableau
   dit déjà de qui il s'agit. */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* ---------------------------------------------------------------- échanges
   Une messagerie (Mohamed, 2026-10-15) : la liste des conversations à gauche,
   le fil en bulles à droite, le dernier message en bas. Sur un téléphone, un
   seul volet à la fois. */

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sourdine { color: var(--sourdine); }

.messagerie {
  --bulle-entrante: var(--carte);
  --bulle-sortante: color-mix(in srgb, var(--accent) 14%, var(--carte));
  display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  height: calc(100dvh - 8.5rem); min-height: 28rem;
  border: 1px solid var(--trait); border-radius: .5rem; overflow: hidden;
  background: var(--carte);
}

/* La liste */
.conversations { display: flex; flex-direction: column; min-height: 0;
                 border-right: 1px solid var(--trait); }
.recherche { display: flex; gap: .4rem; padding: .6rem; border-bottom: 1px solid var(--trait); }
.recherche input[type=search] { flex: 1; min-width: 0; max-width: none; padding: .45rem .6rem;
  border: 1px solid var(--trait); border-radius: 999px; background: var(--papier); color: inherit; font: inherit; }
.recherche select { max-width: 7.5rem; }
.js .sans-js { display: none; }
.liste-conversations { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.liste-conversations li[hidden] { display: none; }
.liste-conversations a { display: flex; gap: .65rem; padding: .6rem .75rem; color: inherit;
  text-decoration: none; border-bottom: 1px solid var(--trait); }
.liste-conversations a:hover { background: color-mix(in srgb, var(--accent) 6%, var(--carte)); }
.liste-conversations a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.liste-conversations a.choisie { background: color-mix(in srgb, var(--accent) 13%, var(--carte));
  box-shadow: inset 3px 0 0 var(--accent); }
.avatar { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid;
  place-items: center; font-weight: 600; color: #fff; background: var(--accent); }
.corps { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ligne-haut { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.ligne-haut .nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quand { flex: none; font-size: .78rem; color: var(--sourdine); font-variant-numeric: tabular-nums; }
.apercu { font-size: .86rem; color: var(--sourdine); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.de-nous { color: var(--encre); }
.meta { font-size: .75rem; color: var(--sourdine); }
.etiquette { border: 1px solid var(--trait); border-radius: 999px; padding: 0 .4rem; }
.vide { padding: 1rem; color: var(--sourdine); }

/* La conversation */
.conversation { display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--papier); }
.invite { flex: 1; display: grid; place-items: center; color: var(--sourdine); }
.entete-fil { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center;
  justify-content: space-between; padding: .55rem .9rem; background: var(--carte);
  border-bottom: 1px solid var(--trait); }
.retour { display: none; }
.qui-fil { min-width: 0; }
.etat-fil { margin: .1rem 0 0; font-size: .85rem; }
.pastille { display: inline-block; border-radius: 999px; padding: 0 .55rem; margin-right: .35rem;
  background: color-mix(in srgb, var(--accent) 15%, var(--carte)); color: var(--encre); }
.choix-jour { display: flex; gap: .4rem; }
.jours { display: flex; gap: .35rem; overflow-x: auto; padding: .45rem .9rem;
  background: var(--carte); border-bottom: 1px solid var(--trait); }
.jours a { flex: none; font-size: .8rem; padding: .1rem .55rem; border: 1px solid var(--trait);
  border-radius: 999px; color: var(--sourdine); text-decoration: none; font-variant-numeric: tabular-nums; }
.jours a.choisi { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Le fil défile en partant du bas, sans script : un conteneur en colonne
   inversée commence au dernier message, comme une messagerie. */
.fil { flex: 1; overflow-y: auto; display: flex; flex-direction: column-reverse; min-height: 0; }
.fil:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fil-contenu { display: flex; flex-direction: column; gap: .5rem; padding: .9rem; }
.separateur-jour { text-align: center; margin: 0 0 .3rem; }
.separateur-jour span { font-size: .78rem; color: var(--sourdine); background: var(--carte);
  border: 1px solid var(--trait); border-radius: 999px; padding: .1rem .7rem; }
.bulle { max-width: min(36rem, 82%); padding: .45rem .7rem .35rem; border-radius: .8rem;
  border: 1px solid var(--trait); box-shadow: 0 1px 0 rgb(0 0 0 / .04); }
.bulle.entrante { align-self: flex-start; background: var(--bulle-entrante); border-top-left-radius: .2rem; }
.bulle.sortante { align-self: flex-end; background: var(--bulle-sortante); border-top-right-radius: .2rem; }
.bulle .auteur { margin: 0; font-size: .75rem; font-weight: 600; color: var(--accent); }
.bulle.sortante .auteur { color: var(--sourdine); }
.bulle .type { font-weight: 400; color: var(--sourdine); }
.bulle .texte { margin: .15rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bulle audio { display: block; width: 16rem; max-width: 100%; height: 2.2rem; margin: .25rem 0; }
.bulle .heure { display: block; text-align: right; font-size: .7rem; color: var(--sourdine);
  font-variant-numeric: tabular-nums; }
.prix-extraits { list-style: none; margin: .3rem 0 0; padding: .3rem 0 0; border-top: 1px dashed var(--trait);
  font-size: .82rem; display: grid; gap: .1rem; }
.prix-extraits strong { font-variant-numeric: tabular-nums; }
.prix-session { background: var(--carte); border-top: 1px solid var(--trait); max-height: 40%;
  overflow-y: auto; padding: .4rem .9rem; }
.prix-session summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.pied-fil { margin: 0; padding: .45rem .9rem; background: var(--carte); border-top: 1px solid var(--trait); font-size: .85rem; }

@media (max-width: 760px) {
  .messagerie { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 7rem); border-radius: 0;
    margin: 0 -.7rem; border-left: 0; border-right: 0; }
  .choix-jour button { padding-inline: .6rem; }
  .etat-fil .sourdine { display: block; }
  .messagerie.avec-fil .conversations { display: none; }
  .messagerie:not(.avec-fil) .conversation { display: none; }
  .conversations { border-right: 0; }
  .retour { display: inline-block; font-size: .9rem; }
  .entete-fil { padding: .45rem .7rem; }
  .bulle { max-width: 90%; }
}

/* ---------------------------------------------------------------- mercuriale */
.barre-jour { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 1rem; }
.barre-jour input[type=date] { width: auto; }
main .note-cachees { font-size: .85rem; color: var(--sourdine); margin: .4rem 0 0; }

/* ---------------------------------------------------------------- tickets */
.liste-tickets { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; max-width: 60rem; }
.ticket { background: var(--carte); border: 1px solid var(--trait); border-radius: .5rem; padding: .6rem .8rem; }
.ticket p { margin: 0; }
.ticket-tete { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.ticket-echeance { font-size: .8rem; border: 1px solid var(--trait); border-radius: 999px; padding: 0 .5rem;
  white-space: nowrap; color: var(--sourdine); }
.ticket-resume { margin: .2rem 0 !important; }
.ticket-meta { font-size: .82rem; color: var(--sourdine); }
.ticket-cloture { margin-top: .4rem; }
.ticket-cloture summary { cursor: pointer; font-size: .85rem; color: var(--accent); }
.ticket-cloture form { display: grid; gap: .35rem; margin-top: .4rem; max-width: 36rem; }
.ticket-cloture input[type=text] { max-width: none; width: 100%; }

/* ---------------------------------------------------------------- paie */
.carte.carte-large { width: auto; max-width: 60rem; padding: 1rem 1.25rem; }
.carte.carte-large p { margin: .3rem 0; }

/* Un tableau de mots (fiches) : le texte se lit aligné à gauche ; la règle
   générale, à droite, est faite pour les colonnes de chiffres. */
table.texte th, table.texte td { text-align: left; }

/* Recruteurs : le kit à imprimer (app/web/templates/ops_recruteur_kit.html).
   Charte du logo : le vert pour la structure, la crème pour les encadrés, le
   rouge en filet seulement. Le QR reste noir sur blanc, chaque marché tient
   sur sa page, et à l'écran le kit se lit comme une page normale. */
.kit-page { max-width: 46rem; margin-bottom: 3rem; }
.kit-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: .6rem; margin-bottom: 1.4rem;
  border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: var(--marque-vert);
}
.kit-entete { position: relative; }
.kit-entete::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 4rem; height: 3px;
  background-color: var(--marque-rouge);
}
.kit-logo { height: 1.9rem; width: auto; }
.kit-etiquette { color: var(--sourdine); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.kit-guide h1 { color: var(--marque-vert); font-size: 1.9rem; margin: 0 0 .4rem; }
.kit-guide h2 { color: var(--marque-vert); font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.kit-chapo { font-size: 1.05rem; max-width: 40rem; margin: 0 0 .6rem; }
.kit-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1.6rem; }
.kit-bloc ul, .kit-aide ul { padding-left: 1.1rem; margin: 0; }
.kit-bloc li, .kit-aide li { margin-bottom: .3rem; }
.kit-etapes { list-style: none; counter-reset: etape; padding: 0; margin: 0; }
.kit-etapes li {
  counter-increment: etape; position: relative;
  padding: .35rem 0 .35rem 2.6rem; min-height: 2rem;
}
.kit-etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: .2rem;
  width: 1.8rem; height: 1.8rem; line-height: 1.8rem; text-align: center;
  border-radius: 50%; background-color: var(--marque-vert); color: #fff; font-weight: 700;
}
.kit-aide {
  margin-top: 1.4rem; padding: .3rem 1.1rem .8rem;
  background-color: var(--marque-creme); border-radius: 4px;
  border-left-width: 4px; border-left-style: solid; border-left-color: var(--marque-rouge);
}
.kit-aide h2 { margin-top: .6rem; }
.kit-qr { text-align: center; }
.kit-surtitre { color: var(--sourdine); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin: 1.5rem 0 0; }
.kit-ville { color: var(--marque-vert); font-size: 2.6rem; margin: .1rem 0 0; line-height: 1.1; }
.kit-marche { color: var(--sourdine); margin: .2rem 0 1.4rem; }
.kit-cadre-qr {
  display: inline-block; padding: .8rem; background-color: #fff; border-radius: 14px;
  border-width: 3px; border-style: solid; border-color: var(--marque-vert);
}
.kit-qr .qr svg { width: 16rem; height: auto; max-width: 100%; display: block; }
.kit-ar { font-size: 1.35rem; margin: 1.4rem auto .3rem; max-width: 32rem; }
.kit-fr { margin: 0 auto; max-width: 32rem; }
.kit-lien { font-size: .7rem; color: var(--sourdine); word-break: break-all; margin-top: 1.2rem; }

@media print {
  @page { size: A4; margin: 1.6cm 1.8cm; }
  .barre, footer, .sans-impression { display: none; }
  main { padding: 0; }
  body { font-size: 11.5pt; }
  .kit-page { max-width: none; margin: 0; page-break-after: always; break-after: page; }
  .kit-page:last-child { page-break-after: auto; break-after: auto; }
  .kit-guide li { break-inside: avoid; }
  .kit-qr .qr svg { width: 10.5cm; }
  .kit-ville { font-size: 30pt; }
  .kit-ar { font-size: 16pt; }
  .kit-fr { font-size: 12pt; }
}

/* Le kit en arabe : même mise en page, sens de lecture inversé. */
.kit-rtl { text-align: right; }
.kit-rtl .kit-bloc ul, .kit-rtl .kit-aide ul { padding-left: 0; padding-right: 0; list-style-position: inside; }
/* L'espacement des lettres casse les liaisons de l'écriture arabe. */
.kit-rtl .kit-etiquette, [dir="rtl"].kit-surtitre { letter-spacing: 0; text-transform: none; }
.kit-rtl .kit-etapes li { padding-left: 0; padding-right: 2.6rem; }
.kit-rtl .kit-etapes li::before { left: auto; right: 0; }
.kit-rtl .kit-aide { border-left-width: 0; border-right-width: 4px; border-right-style: solid; border-right-color: var(--marque-rouge); }
.kit-rtl .kit-entete::after { left: auto; right: 0; }
.kit-rtl .kit-chapo, .kit-rtl li { font-size: 1.08em; }