/* Portail client MOSOLF — charte alignée sur vatry-screen.fr
   Mêmes jetons de couleur, mêmes polices, mêmes arrondis, même bandeau
   tricolore et même logo à bandes, pour que les deux outils se ressemblent. */

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

:root {
  --brand-red:  #E53312;
  --brand-blue: #213A8F;
  --brand-cyan: #009ED4;
  --brand-ink:  #0b2c33;
  --ink:     #0b1220;
  --muted:   #4b5563;
  --muted2:  #6b7280;
  --surface: #ffffff;
  --page:    #f9feff;
  --outline: #e9eef0;

  --vert:   #16a34a;
  --jaune:  #eab308;
  --orange: #f97316;
  --rouge:  #dc2626;

  --radius: 18px;
  --radius-s: 12px;
  --shadow: 0 6px 24px rgba(0,0,0,0.06);
  --stripe-h: 6px;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter,
               "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

html, body { min-height: 100%; }
body {
  background: var(--page);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand-blue); }
summary { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .4rem; color: var(--brand-ink); }
h1 { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 800; }
h2 { font-size: 1.12rem; font-weight: 800; }
h3 { font-size: .98rem; font-weight: 800; }
code { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: .88em; }

/* ------------------------------------------------------------------ En-tête */

.topbar {
  background: #fff; box-shadow: 0 1px 0 var(--outline);
  position: sticky; top: 0; z-index: 100;
}
.topbar-stripe {
  height: calc(var(--stripe-h) * 3);
  background: linear-gradient(to bottom,
    var(--brand-red) 0 33.333%, var(--brand-blue) 33.333% 66.666%, var(--brand-cyan) 66.666% 100%);
}
.topbar-inner {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem; max-width: 1500px; min-height: 56px; margin: 0 auto; width: 100%;
}

.mosolf-logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.logo-stripes { display: flex; align-items: center; gap: 6px; height: 28px; }
.stripe { width: 20px; height: 20px; border-radius: 2px; transform: skewX(-20deg); }
.stripe-red  { background: var(--brand-red); }
.stripe-red2 { background: var(--brand-blue); }
.stripe-blue { background: var(--brand-cyan); }
.logo-bloc { line-height: 1.15; }
.logo-text { font-size: 1.05rem; font-weight: 800; letter-spacing: .12em; color: var(--brand-ink); display: block; }
.logo-sous { font-size: .74rem; color: var(--muted); font-weight: 600; display: block; }

.nav-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.ntab {
  background: #fff; border: 1px solid transparent; padding: .5rem .75rem;
  font-size: .92rem; font-family: inherit; font-weight: 700; color: var(--brand-blue);
  cursor: pointer; border-radius: var(--radius-s); text-decoration: none;
  transition: all .12s ease; white-space: nowrap;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ntab:hover {
  background: color-mix(in oklab, var(--brand-cyan) 9%, #fff);
  border-color: color-mix(in oklab, var(--brand-blue) 22%, var(--outline));
}
.ntab-on {
  background: color-mix(in oklab, var(--brand-cyan) 14%, #fff);
  border-color: color-mix(in oklab, var(--brand-blue) 22%, var(--outline));
  font-weight: 800;
}
.ntab-retour { color: var(--muted); font-weight: 600; }

.topbar-droite { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.qui { font-size: .84rem; text-align: right; line-height: 1.25; }
.qui-etiquette { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); font-weight: 700; }
.qui strong { display: block; font-weight: 800; color: var(--brand-ink); }
.qui-portee { display: block; color: var(--muted); font-size: .8rem; }
.separateur-bandeau { width: 1px; align-self: stretch; background: var(--outline); margin: .25rem 0; }

/* Choix de la langue : bouton « 🌐 FR ▾ » assorti aux autres boutons de
   l'en-tête, qui déroule la liste des langues. */
.langues { position: relative; }
.langues > summary { list-style: none; gap: .35rem; }
.langues > summary::-webkit-details-marker { display: none; }
.langues[open] > summary {
  background: color-mix(in oklab, var(--brand-cyan) 9%, #fff);
  border-color: color-mix(in oklab, var(--brand-blue) 30%, var(--outline));
}
.langues svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.langues-globe { width: 16px; height: 16px; }
.langues-chevron { width: 13px; height: 13px; transition: transform .15s; }
.langues[open] .langues-chevron { transform: rotate(180deg); }
.langues-liste {
  position: absolute; top: calc(100% + .35rem); right: 0; z-index: 120;
  min-width: 150px; padding: .3rem; background: #fff;
  border: 1px solid var(--outline); border-radius: var(--radius-s); box-shadow: var(--shadow);
}
.langues-liste a {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .5rem .65rem; border-radius: 8px; min-height: 38px;
  font-size: .9rem; font-weight: 600; color: var(--brand-ink); text-decoration: none;
}
.langues-liste a:hover { background: color-mix(in oklab, var(--brand-cyan) 7%, #fff); }
.langues-liste a.langue-on {
  background: color-mix(in oklab, var(--brand-cyan) 14%, #fff);
  color: var(--brand-blue); font-weight: 800;
}
.langues-coche { color: var(--brand-cyan); font-weight: 900; }
.langues-hors-session { display: flex; justify-content: flex-end; }

/* --------------------------------------------------------------- Conteneur */

.page { max-width: 1500px; margin: 0 auto; padding: 1rem clamp(.75rem, 1.2vw, 1.25rem) 3rem; }

.carte {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.carte > h2:first-child, .carte > h1:first-child { margin-top: 0; }

/* ------------------------------------------------------- Fraîcheur des données */

.fraicheur {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: color-mix(in oklab, var(--brand-cyan) 8%, #fff);
  border: 1px solid color-mix(in oklab, var(--brand-blue) 18%, var(--outline));
  border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: 1rem;
  font-size: .9rem; color: var(--brand-ink); box-shadow: var(--shadow);
}
.fraicheur .pastille { font-size: 1.05rem; line-height: 1; }
.fraicheur strong { white-space: nowrap; font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; }
.fraicheur .sep { color: var(--outline); }
.fraicheur.vide {
  background: color-mix(in oklab, #92400e 7%, #fff);
  border-color: color-mix(in oklab, #92400e 22%, var(--outline));
  color: #92400e;
}

/* ----------------------------------------------------------------- Boutons */

.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1rem; border-radius: var(--radius-s);
  border: 1px solid var(--outline); background: #fff; color: var(--brand-blue);
  font-size: .93rem; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none; transition: all .15s;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: color-mix(in oklab, var(--brand-blue) 30%, var(--outline)); }
.btn-primaire {
  background: var(--brand-cyan); color: #fff; font-weight: 800;
  border-color: color-mix(in oklab, var(--brand-blue) 30%, var(--brand-cyan));
}
.btn-primaire:hover { filter: brightness(1.06); transform: translateY(-1px); border-color: var(--brand-blue); }
.btn-bleu { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); font-weight: 800; }
.btn-bleu:hover { filter: brightness(1.1); }
.btn-danger {
  color: var(--brand-red);
  background: color-mix(in oklab, var(--brand-red) 6%, #fff);
  border-color: color-mix(in oklab, var(--brand-red) 20%, var(--outline));
}
.btn-petit { padding: .42rem .7rem; font-size: .86rem; border-radius: 10px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------- Formulaires */

.recherche { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; }
.recherche input[type=search], .recherche input[type=text] { flex: 1 1 260px; }

input[type=text], input[type=search], input[type=password], input[type=date],
input[type=number], input[type=datetime-local], input[type=file], select, textarea {
  background: #fff; border: 1px solid var(--outline); color: var(--ink);
  padding: .65rem .85rem; border-radius: var(--radius-s);
  font-family: inherit; font-size: .95rem; outline: none; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: color-mix(in oklab, var(--brand-blue) 55%, var(--outline));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-cyan) 18%, transparent);
}
label { display: block; font-size: .88rem; font-weight: 700; color: var(--brand-ink); margin-bottom: .3rem; }
textarea {
  min-height: 92px; resize: vertical;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: .88rem;
}
.aide { font-size: .84rem; color: var(--muted); margin: .3rem 0 0; font-weight: 400; }

/* ----------------------------------------------------------------- Filtres */

details.filtres { margin-top: .8rem; border-top: 1px solid var(--outline); padding-top: .8rem; }
details.filtres > summary {
  cursor: pointer; font-weight: 800; font-size: .92rem; color: var(--brand-blue);
  list-style: none; display: flex; align-items: center; gap: .4rem;
  /* Sans cela, un appui imprécis au doigt surligne le texte au lieu d'ouvrir. */
  -webkit-user-select: none; user-select: none;
  min-height: 44px; -webkit-tap-highlight-color: transparent;
}
details.filtres > summary::-webkit-details-marker { display: none; }
details.filtres > summary::before { content: "▸"; transition: transform .15s; }
details.filtres[open] > summary::before { transform: rotate(90deg); }

.grille-filtres {
  display: grid; gap: .85rem; margin-top: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grille-filtres .large { grid-column: 1 / -1; }

.liste-cases {
  max-height: 180px; overflow-y: auto; background: #fff;
  border: 1px solid var(--outline); border-radius: var(--radius-s); padding: .45rem .6rem;
}
.liste-cases label {
  display: flex; align-items: center; gap: .6rem; margin: 0;
  font-weight: 400; font-size: .9rem; color: var(--ink); cursor: pointer;
  padding: .3rem .3rem; border-radius: 8px; min-height: 34px;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.liste-cases label:hover { background: color-mix(in oklab, var(--brand-cyan) 7%, #fff); }
.liste-cases input[type=checkbox] {
  width: 20px; height: 20px; flex: 0 0 auto; margin: 0;
  accent-color: var(--brand-cyan); cursor: pointer;
}

.pastilles { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.pastille-filtre {
  display: inline-flex; align-items: center; gap: .35rem;
  background: color-mix(in oklab, var(--brand-cyan) 10%, #fff);
  border: 1px solid color-mix(in oklab, var(--brand-blue) 22%, var(--outline));
  color: var(--brand-blue); border-radius: 999px;
  padding: .22rem .5rem .22rem .7rem; font-size: .82rem; font-weight: 700;
}
.pastille-filtre a { color: var(--brand-blue); text-decoration: none; font-weight: 800; padding: 0 .2rem; }
.pastille-filtre a:hover { color: var(--brand-red); }

/* ----------------------------------------------------------------- Tableaux */

.barre-resultats {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .3rem 0 .8rem;
}
.compteur { font-size: .95rem; color: var(--muted); }
.compteur strong {
  font-size: 1.4rem; font-weight: 900; color: var(--brand-ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.barre-resultats .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.tableau-cadre {
  overflow-x: auto; background: #fff;
  border: 1px solid var(--outline); border-radius: var(--radius); box-shadow: var(--shadow);
}
table.donnees { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.donnees th, table.donnees td { padding: .62rem .8rem; text-align: left; vertical-align: middle; }
table.donnees thead th {
  background: #fff; border-bottom: 2px solid var(--outline);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 800; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
table.donnees thead th a { color: inherit; text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; }
table.donnees thead th a:hover { color: var(--brand-blue); }
table.donnees thead th .fleche { opacity: .35; }
table.donnees thead th.trie {
  color: var(--brand-blue); font-weight: 900;
  background: color-mix(in oklab, var(--brand-cyan) 10%, #fff);
  border-bottom-color: var(--brand-cyan);
}
table.donnees thead th.trie .fleche { opacity: 1; color: var(--brand-cyan); }
table.donnees tbody tr { border-bottom: 1px solid var(--outline); }
table.donnees tbody tr:hover { background: color-mix(in oklab, var(--brand-cyan) 5%, #fff); }
table.donnees tbody tr:last-child { border-bottom: none; }
table.donnees td a { color: var(--brand-blue); font-weight: 700; }

.vin {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: .88rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
}
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.discret { color: var(--muted); }
.rien { color: var(--muted2); font-style: italic; font-size: .9em; }

/* Le tri par en-tête de colonne disparaît quand le tableau devient des fiches :
   cette liste déroulante prend le relais, et elle seulement à ce moment-là. */
.tri-fiches { display: none; align-items: center; gap: .4rem; font-size: .86rem; }
.tri-fiches label { font-size: .84rem; color: var(--muted); font-weight: 700; }
.tri-fiches select { width: auto; min-width: 190px; padding: .45rem .6rem; font-size: .88rem; }
@media (max-width: 980px) { .tri-fiches { display: inline-flex; } }

.par-page { display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; }
.par-page a, .par-page .courant {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; min-width: 40px; padding: .35rem .7rem;
  border-radius: 999px; border: 1px solid var(--outline);
  text-decoration: none; color: var(--brand-blue); background: #fff; font-weight: 700;
}
.par-page .courant {
  background: color-mix(in oklab, var(--brand-cyan) 14%, #fff);
  border-color: color-mix(in oklab, var(--brand-blue) 25%, var(--outline)); font-weight: 800;
}

/* ---------------------------------------------------------------- Étiquettes */

.etq {
  display: inline-block; padding: .25rem .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 800; white-space: nowrap;
  background: #fff; color: var(--muted); border: 1px solid var(--outline);
}
.etq-vert   { background: color-mix(in oklab, var(--vert) 10%, #fff);  color: #166534; border-color: color-mix(in oklab, var(--vert) 30%, var(--outline)); }
.etq-ambre  { background: color-mix(in oklab, #92400e 8%, #fff);       color: #92400e; border-color: color-mix(in oklab, #92400e 25%, var(--outline)); }
.etq-rouge  { background: color-mix(in oklab, var(--brand-red) 8%, #fff); color: var(--brand-red); border-color: color-mix(in oklab, var(--brand-red) 28%, var(--outline)); }
.etq-bleu   { background: color-mix(in oklab, var(--brand-cyan) 10%, #fff); color: var(--brand-blue); border-color: color-mix(in oklab, var(--brand-blue) 24%, var(--outline)); }
.etq-orange { background: color-mix(in oklab, var(--orange) 12%, #fff); color: #9a3412; border-color: color-mix(in oklab, var(--orange) 32%, var(--outline)); }

.sens { font-weight: 800; white-space: nowrap; }
.sens-arrivee { color: var(--brand-red); }
.sens-depart  { color: var(--brand-blue); }

/* ------------------------------------------------------------------ Tuiles */

.tuiles { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tuile {
  background: #fff; border: 1px solid var(--outline); border-top: 4px solid var(--muted2);
  border-radius: 16px; padding: 1rem; box-shadow: var(--shadow);
  text-decoration: none; color: inherit; display: block; transition: all .12s ease;
}
a.tuile:hover {
  border-color: color-mix(in oklab, var(--brand-blue) 30%, var(--outline));
  box-shadow: 0 10px 28px rgba(0,0,0,.08); transform: translateY(-2px);
}
.tuile .valeur {
  font-size: 2.2rem; font-weight: 900; line-height: 1;
  color: var(--brand-ink); font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.tuile .titre { font-size: .88rem; color: var(--muted); margin-top: .3rem; line-height: 1.35; }
.tuile .detail { font-size: .8rem; color: var(--muted2); margin-top: .3rem; }
.tuile-stock  { border-top-color: var(--brand-blue); } .tuile-stock  .valeur { color: var(--brand-blue); }
.tuile-arrivee{ border-top-color: var(--brand-red); }  .tuile-arrivee .valeur { color: var(--brand-red); }
.tuile-depart { border-top-color: var(--brand-cyan); } .tuile-depart .valeur { color: var(--brand-cyan); }
.tuile-alerte { border-top-color: #92400e; }           .tuile-alerte .valeur { color: #92400e; }

.barres { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.barre-ligne { display: grid; grid-template-columns: 160px 1fr 70px; gap: .7rem; align-items: center; font-size: .9rem; }
.barre-piste { background: color-mix(in oklab, var(--brand-cyan) 8%, #fff); border-radius: 999px; height: 22px; overflow: hidden; border: 1px solid var(--outline); }
.barre-jauge { background: var(--brand-blue); height: 100%; border-radius: 999px; min-width: 3px; }
.barre-ligne.chaud .barre-jauge { background: var(--orange); }
.barre-ligne .num { font-weight: 800; }
.barre-ligne a { color: var(--brand-blue); text-decoration: none; font-weight: 700; }
.barre-ligne a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- Pagination */

.pagination { display: flex; gap: .35rem; align-items: center; justify-content: center; margin-top: 1.1rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: .5rem .8rem; border-radius: var(--radius-s); border: 1px solid var(--outline);
  text-decoration: none; color: var(--brand-blue); font-size: .9rem; font-weight: 700; background: #fff;
}
.pagination a:hover { border-color: color-mix(in oklab, var(--brand-blue) 30%, var(--outline)); }
.pagination .courant {
  background: color-mix(in oklab, var(--brand-cyan) 14%, #fff);
  border-color: color-mix(in oklab, var(--brand-blue) 25%, var(--outline)); font-weight: 900;
}
.pagination .inactif { opacity: .35; pointer-events: none; }

/* ----------------------------------------------------------------- Alertes */

.alerte { border-radius: var(--radius-s); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .93rem; border: 1px solid; }
.alerte-rouge { background: color-mix(in oklab, var(--brand-red) 7%, #fff);  border-color: color-mix(in oklab, var(--brand-red) 30%, var(--outline)); color: #8c1f0b; }
.alerte-ambre { background: color-mix(in oklab, #92400e 7%, #fff);           border-color: color-mix(in oklab, #92400e 25%, var(--outline)); color: #7c3d06; }
.alerte-vert  { background: color-mix(in oklab, var(--vert) 8%, #fff);       border-color: color-mix(in oklab, var(--vert) 28%, var(--outline)); color: #14532d; }
.alerte-bleu  { background: color-mix(in oklab, var(--brand-cyan) 8%, #fff); border-color: color-mix(in oklab, var(--brand-blue) 22%, var(--outline)); color: var(--brand-ink); }

.vide-etat { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.vide-etat .icone { font-size: 2.4rem; }
.vide-etat h3 { margin: .6rem 0 .35rem; color: var(--brand-ink); }

.pied { text-align: center; color: var(--muted2); font-size: .82rem; padding: 1.5rem 1rem 2.5rem; }

.deux-colonnes { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.paire { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--outline); font-size: .93rem; }
.paire:last-child { border-bottom: none; }
.paire dt { color: var(--muted); }
.paire dd { margin: 0; font-weight: 800; text-align: right; color: var(--brand-ink); }
.paire dt a { color: var(--brand-blue); text-decoration: none; font-weight: 600; }
.paire dt a:hover { text-decoration: underline; }

/* --------------------------------------------------------- Périmètre agent */

.selecteur-client { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.selecteur-client select { width: auto; min-width: 230px; }
.bandeau-perimetre { padding: .8rem .95rem; border-left: 5px solid var(--muted2); }
.bandeau-perimetre.perimetre-client { border-left-color: var(--vert); }
.bandeau-perimetre.perimetre-interne { border-left-color: var(--brand-red); }
.explication-perimetre { margin: .6rem 0 0; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.perimetre-client .explication-perimetre strong { color: #166534; }
.perimetre-interne .explication-perimetre strong { color: var(--brand-red); }

/* --------------------------------------------------- Publication d'un import */

.cadre-publication { border: 1px solid var(--outline); border-top: 5px solid var(--brand-cyan); }
.nom-client-publication {
  font-size: 2rem; font-weight: 900; color: var(--brand-blue); margin: .1rem 0; line-height: 1.1;
  font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .02em;
}
table.avant-apres { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.avant-apres th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 800; border-bottom: 2px solid var(--outline); padding: .45rem .6rem;
}
table.avant-apres th.num, table.avant-apres td.num { text-align: right; }
table.avant-apres td { padding: .55rem .6rem; border-bottom: 1px solid var(--outline); }
table.avant-apres td.fleche-avant-apres { text-align: center; color: var(--muted2); width: 2.2rem; padding: 0; }
table.avant-apres tbody tr:last-child td { border-bottom: none; }

.confirmation-active {
  display: flex; align-items: flex-start; gap: .65rem; margin: 0; cursor: pointer;
  background: color-mix(in oklab, #92400e 7%, #fff);
  border: 1px solid color-mix(in oklab, #92400e 25%, var(--outline));
  border-radius: var(--radius-s); padding: .8rem .9rem;
  font-size: .96rem; font-weight: 600; color: var(--ink);
}
.confirmation-active input[type=checkbox] { width: auto; margin-top: .18rem; transform: scale(1.3); }
.confirmation-renforcee {
  background: color-mix(in oklab, var(--brand-red) 7%, #fff);
  border-color: color-mix(in oklab, var(--brand-red) 35%, var(--outline));
  border-width: 2px;
}
.confirmation-renforcee input[type=text] {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 700; letter-spacing: .08em;
}
.btn-publier { font-size: 1rem; padding: .75rem 1.4rem; }

.mdp-boite {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 1.2rem; font-weight: 700; background: #fff;
  border: 2px dashed var(--vert); border-radius: var(--radius-s);
  padding: .55rem .9rem; display: inline-block; letter-spacing: .05em;
}

/* ------------------------------------------------------------------ Mobile */

.libelle-mobile { display: none; }

@media (max-width: 900px) {
  .deux-colonnes { grid-template-columns: 1fr; }
  .barre-ligne { grid-template-columns: 125px 1fr 56px; font-size: .84rem; }
}

/* En dessous de 980 px — tablette portrait comprise — le tableau large
   devient une liste de fiches, pour ne jamais imposer de défilement latéral. */
@media (max-width: 980px) {
  /* Le tableau devient une liste de fiches : jamais de défilement latéral. */
  .tableau-cadre { border: none; background: transparent; overflow: visible; box-shadow: none; }
  table.donnees, table.donnees tbody, table.donnees tr, table.donnees td { display: block; width: 100%; }
  table.donnees thead { display: none; }
  table.donnees tbody tr {
    background: #fff; border: 1px solid var(--outline); border-radius: 16px;
    margin-bottom: .65rem; padding: .7rem .85rem; box-shadow: var(--shadow);
  }
  table.donnees td { padding: .3rem 0; border: none; display: flex; gap: .8rem; align-items: baseline; }
  table.donnees td .libelle-mobile {
    display: block; flex: 0 0 40%; font-size: .74rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted2); font-weight: 800;
  }
  table.donnees td .valeur-mobile { flex: 1 1 auto; text-align: left; min-width: 0; }
  table.donnees td.num { text-align: left; }
  table.donnees td.principale {
    border-bottom: 1px solid var(--outline); margin-bottom: .35rem; padding-bottom: .5rem;
  }
  table.donnees td.principale .libelle-mobile { display: none; }
  table.donnees td.principale .valeur-mobile { font-size: 1.05rem; font-weight: 800; }
}

@media (max-width: 720px) {
  /* En-tête compact : la marque, le compte et la navigation tiennent en deux
     lignes courtes, pour laisser l'écran aux données. */
  :root { --stripe-h: 3px; }
  .page { padding: .8rem .75rem 2.5rem; }
  .carte { padding: .9rem .85rem; border-radius: 16px; }
  .topbar-inner { padding: .4rem .7rem; gap: .5rem; min-height: 0; }
  .logo-stripes { height: 20px; gap: 4px; }
  .stripe { width: 14px; height: 14px; }
  .logo-text { font-size: .92rem; }
  .logo-sous { display: none; }
  .qui-etiquette, .qui-portee { display: none; }
  .qui strong { font-size: .84rem; }
  .separateur-bandeau { display: none; }
  .topbar-droite { gap: .35rem; }
  .topbar-droite .btn { padding: .4rem .6rem; font-size: .8rem; }
  /* Le bandeau passe à la ligne : le menu se retrouve à gauche, sa liste doit
     donc s'ouvrir vers la droite pour rester dans l'écran. */
  .topbar-droite .langues-liste { right: auto; left: 0; }

  .nav-tabs {
    order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: .15rem; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .nav-tabs::-webkit-scrollbar { height: 3px; }
  .nav-tabs::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 3px; }
  /* Sans cela, le dernier onglet est comprimé et son libellé tronqué. */
  .ntab { padding: .45rem .65rem; font-size: .87rem; flex: 0 0 auto; }
  .nav-tabs::after { content: ""; flex: 0 0 .5rem; }

  .barre-resultats .actions { margin-left: 0; width: 100%; }
  .barre-resultats .actions .btn { flex: 1 1 auto; justify-content: center; }
  .par-page { width: 100%; justify-content: center; }
  .tuiles { grid-template-columns: 1fr 1fr; }
  .tuile { padding: .8rem; }
  .tuile .valeur { font-size: 1.7rem; }
  .selecteur-client { width: 100%; }
  .selecteur-client select { flex: 1; min-width: 0; }
  .nom-client-publication { font-size: 1.6rem; }
  .btn { padding: .65rem 1rem; }
  .btn-petit { padding: .5rem .8rem; }
  .liste-cases label { min-height: 44px; font-size: .95rem; }
  .liste-cases input[type=checkbox] { width: 22px; height: 22px; }
  .liste-cases { max-height: 220px; }
  .pagination a, .pagination span { padding: .6rem .85rem; }
  /* Toutes les cibles tactiles au même gabarit : 42 px minimum. */
  .par-page a, .par-page .courant { min-height: 42px; min-width: 46px; font-size: .9rem; }
}

@media (max-width: 430px) {
  .tuiles { grid-template-columns: 1fr; }
  .barre-ligne { grid-template-columns: 100px 1fr 48px; }
}

@media print {
  .topbar, .filtres, .barre-resultats .actions, .pagination, .pied, .pastilles { display: none; }
  .carte, .tableau-cadre { box-shadow: none; border: none; }
}

/* Écran « À rattacher » : action directe depuis la ligne. */
.rattacher { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.rattacher select { width: auto; min-width: 180px; padding: .4rem .6rem; font-size: .88rem; }
@media (max-width: 980px) {
  .rattacher { width: 100%; }
  .rattacher select { flex: 1; min-width: 0; }
}

/* Écran « À traiter » : les trois issues possibles d'une divergence. */
.trancher form { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.trancher .btn { white-space: nowrap; }
@media (max-width: 980px) { .trancher form { width: 100%; } .trancher .btn { flex: 1 1 auto; justify-content: center; } }