/* La liste commune (liste.js) — barre, puces de filtre, tri, sélection, menu de ligne (BO-12/13). */

.liste .liste-barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px;
}
.liste .liste-recherche {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 0 10px; background: var(--fond-carte);
  transition: border-color .15s, box-shadow .15s;
}
.liste .liste-recherche:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.liste .liste-recherche .icone { color: var(--texte-doux); flex: none; }
.liste .liste-recherche input { border: 0; outline: 0; box-shadow: none; padding: 9px 0; flex: 1; min-width: 0; background: transparent; }
.liste .bouton-filtres.actif { border-color: var(--accent); color: var(--accent-texte); background: var(--accent-doux); }
.liste button .compte {
  font-size: 11px; background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; margin-left: 2px;
}

.liste-puces { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
.liste-puces:not(:empty) { padding-bottom: 12px; }
.liste-puces .puce-filtre {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  background: var(--accent-doux); color: var(--accent-texte); border-radius: 999px; padding: 3px 4px 3px 10px;
  animation: monte .25s var(--sortie) both;
}
.liste-puces .puce-filtre button { padding: 2px; border-radius: 50%; color: inherit; }
.liste-puces .lien-effacer { font-size: 12px; padding: 3px 8px; }

/* La barre de sélection colle en haut tant qu'une sélection existe : les actions restent à portée. */
.liste-selection {
  position: sticky; top: 64px; z-index: 5; margin: 0 0 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--fond-verre); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--bord)); border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-haute); animation: monte .25s var(--ressort) both;
}
.liste-selection[hidden] { display: none; }
.liste-selection-compte { font-weight: 650; margin-right: 6px; }
.liste-selection .lien-etendre { color: var(--accent-texte); font-weight: 600; }
.liste-selection .sous-compte { color: var(--texte-doux); font-weight: 400; }
.liste-zone:focus { outline: none; }

.liste-zone > .tete h2 { font-variant-numeric: tabular-nums; }
.table-liste th.a-droite, .table-liste th.a-droite .tri { text-align: right; justify-content: flex-end; }
.table-liste th .tri {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; width: 100%;
}
.table-liste th .tri:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.table-liste th .fleche-tri { opacity: 0; transition: opacity .15s, transform .2s var(--ressort); font-size: 11px; }
.table-liste th.triable:hover .fleche-tri { opacity: .5; }
.table-liste th.trie { color: var(--accent-texte); }
.table-liste th.trie .fleche-tri { opacity: 1; }
.table-liste .col-case { width: 34px; min-width: 34px; max-width: 34px; padding-right: 0; box-sizing: border-box; }
.table-liste .col-case input { margin: 0; cursor: pointer; }
.table-liste .col-actions { width: 44px; text-align: right; padding-left: 0; }
.table-liste tr.choisie { background: color-mix(in srgb, var(--accent-doux) 80%, transparent); }
.table-liste.calme tbody tr { animation: none; }
.table-liste .bouton-ligne { opacity: .55; transition: opacity .15s; }
.table-liste tr:hover .bouton-ligne, .table-liste .bouton-ligne[aria-expanded="true"], .table-liste .bouton-ligne:focus-visible { opacity: 1; }

/* ── LES COLONNES (BO-20) : ordre, largeur, menu d'en-tête, défilement horizontal ─────────── */
.table-liste th { white-space: nowrap; user-select: none; } /* déjà « sticky » : il porte la poignée absolue */
.table-liste th .tete-col { display: flex; align-items: center; gap: 2px; min-width: 0; }
.table-liste th.a-droite .tete-col { justify-content: flex-end; }
.table-liste th .tri { flex: 0 1 auto; min-width: 0; width: auto; }
.table-liste th .titre-col { overflow: hidden; text-overflow: ellipsis; }
.table-liste th.supplementaire .titre-col { font-style: italic; }
.table-liste th .menu-col { padding: 2px; opacity: 0; transition: opacity .15s; flex: none; }
.table-liste th:hover .menu-col, .table-liste th .menu-col:focus-visible, .table-liste th .menu-col[aria-expanded="true"] { opacity: 1; }
.table-liste th[draggable="true"] { cursor: grab; }
.table-liste th.en-glisse { opacity: .45; }
.table-liste th.cible-avant { box-shadow: inset 3px 0 0 var(--accent); }
.table-liste th.cible-apres { box-shadow: inset -3px 0 0 var(--accent); }
.table-liste .poignee-largeur {
  position: absolute; top: 0; right: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 2; touch-action: none;
}
/* Chaque en-tête « sticky » est son propre empilement : celui qu'on survole passe devant ses voisins,
   sinon la cellule suivante recouvrait la moitié de la poignée (contre-audit, M2). */
.table-liste thead th:hover, .table-liste thead th:focus-within { z-index: 4; }
.table-liste .poignee-largeur::after {
  content: ""; position: absolute; top: 25%; bottom: 25%; left: 7px; width: 1px; background: var(--bord-fort);
  transition: background .15s, top .15s, bottom .15s;
}
.table-liste th:hover .poignee-largeur::after, .table-liste .poignee-largeur:focus-visible::after { background: var(--accent); top: 10%; bottom: 10%; width: 2px; }
.table-liste .poignee-largeur:focus-visible { outline: none; }
body.redimensionne, body.redimensionne * { cursor: col-resize !important; user-select: none !important; }
.table-liste td.largeur-posee { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Un « autre champ » (une description, un champ SPE) ne doit pas étirer toutes les lignes : il
   s'ellipse à 320 px tant qu'on ne l'a pas élargi à la poignée. */
.table-liste td.supplementaire:not(.largeur-posee) { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La première colonne (et la case) reste en place quand on défile vers la droite. */
.table-liste tr > :first-child, .table-liste.avec-case tr > :nth-child(2) {
  position: sticky; left: 0; z-index: 1; background: var(--fond-carte);
}
.table-liste.avec-case tr > :nth-child(2) { left: 34px; }
.table-liste thead tr > :first-child, .table-liste.avec-case thead tr > :nth-child(2) { z-index: 3; background: var(--fond-creux); }
.table-liste tbody tr:hover > :first-child, .table-liste.avec-case tbody tr:hover > :nth-child(2) { background: color-mix(in srgb, var(--accent-doux) 55%, var(--fond-carte)); }
.table-liste tbody tr.choisie > :first-child, .table-liste.avec-case tbody tr.choisie > :nth-child(2) { background: color-mix(in srgb, var(--accent-doux) 80%, var(--fond-carte)); }
.enveloppe-table.deborde-gauche .table-liste tr > :first-child:not(.col-case),
.enveloppe-table.deborde-gauche .table-liste.avec-case tr > :nth-child(2) { box-shadow: 6px 0 8px -6px rgba(16, 24, 40, .25); }
.enveloppe-table { position: relative; }
.enveloppe-table.deborde-droite { box-shadow: inset -12px 0 10px -10px rgba(16, 24, 40, .22); }

/* LA CARTE NE ROGNE PLUS : « overflow: hidden » (app.css, .corps-carte.serre) empêche tout
   descendant de coller à la fenêtre — la barre restait au pied du tableau, 6 000 px plus bas. Le
   défilement horizontal est porté par l'enveloppe du tableau, qui garde les coins arrondis. */
.liste-zone > .corps-carte.serre { overflow: visible; }
.liste-zone > .corps-carte.serre > .enveloppe-table { border-radius: 0 0 var(--rayon-grand) var(--rayon-grand); }
.defile-collant {
  position: sticky; bottom: 0; z-index: 4; overflow-x: auto; overflow-y: hidden; height: 14px;
  background: var(--fond-verre); backdrop-filter: blur(6px); border-top: 1px solid var(--bord);
  scrollbar-width: auto;
}
.defile-collant[hidden] { display: none; }
.defile-collant .defile-interieur { height: 1px; }

/* Le panneau Colonnes : l'ordre du tableau, des poignées pour glisser, ↑ ↓ au clavier. */
.flottant.large-colonnes { width: 340px; padding: 10px; }
.corps-colonnes { max-height: min(60vh, 520px); overflow-y: auto; margin: 0 -4px 8px; padding: 0 4px; }
.rangee-colonne { display: flex; align-items: center; gap: 4px; border-radius: 6px; }
.rangee-colonne:hover { background: var(--fond-creux); }
.rangee-colonne.cachee .option-case { color: var(--texte-doux); }
.rangee-colonne .option-case { flex: 1; min-width: 0; }
.rangee-colonne .option-case:hover { background: transparent; }
.rangee-colonne .poignee-glisse { cursor: grab; color: var(--texte-doux); padding: 0 2px 0 4px; font-size: 14px; }
.rangee-colonne .fleche-haut, .rangee-colonne .fleche-bas { padding: 2px 6px; font-size: 12px; opacity: .55; }
.rangee-colonne:hover .fleche-haut, .rangee-colonne:hover .fleche-bas,
.rangee-colonne .fleche-haut:focus-visible, .rangee-colonne .fleche-bas:focus-visible { opacity: 1; }
.rangee-colonne.en-glisse { opacity: .4; }
.rangee-colonne.cible-avant { box-shadow: inset 0 2px 0 var(--accent); }
.rangee-colonne.cible-apres { box-shadow: inset 0 -2px 0 var(--accent); }
.rangee-colonne .nom-champ { font-size: 11px; color: var(--texte-doux); margin-left: auto; padding-left: 6px; }
.sous-titre-panneau { margin-top: 12px; }
.menu-ligne .separateur-menu { height: 1px; background: var(--bord); margin: 4px 6px; }
.champ-filtre.vise .nom { color: var(--accent-texte); }

/* La ligne qui vient de changer s'illumine puis s'éteint. */
.table-liste tr.eclaire { animation: eclaire 1.6s var(--sortie); }
@keyframes eclaire {
  0%, 25% { background: color-mix(in srgb, var(--succes) 22%, transparent); }
  100% { background: transparent; }
}

.liste-plus { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--bord); }

/* ── Le flottant : menu de ligne, colonnes, filtres ─────────────────────────────────────── */
.flottant {
  position: absolute; z-index: 70; min-width: 190px; max-width: calc(100vw - 16px);
  background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 12px;
  box-shadow: var(--ombre-fenetre); padding: 6px;
  animation: flottantDedans .16s var(--sortie) both; transform-origin: top right;
}
.flottant.large { width: 560px; padding: 14px; }
.flottant.large-moyen { width: 240px; padding: 10px; }
.flottant.sortie { animation: flottantDehors .14s ease both; }
@keyframes flottantDedans { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
@keyframes flottantDehors { to { opacity: 0; transform: translateY(-4px) scale(.97); } }

.menu-ligne { display: flex; flex-direction: column; }
.menu-ligne button {
  border: 0; background: transparent; box-shadow: none; justify-content: flex-start;
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left;
}
.menu-ligne button:hover, .menu-ligne button:focus-visible { background: var(--fond-creux); outline: 0; }
.menu-ligne button.danger { color: var(--erreur); }
.menu-ligne button.danger:hover, .menu-ligne button.danger:focus-visible { background: var(--erreur-doux); }

.titre-panneau { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); font-weight: 650; margin: 0 0 8px; }
.option-case { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.option-case:hover { background: var(--fond-creux); }
.option-case input { margin: 0; }

.panneau-filtres .champs-filtres {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px;
  max-height: min(60vh, 520px); overflow-y: auto; padding: 2px;
}
.champ-filtre { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.champ-filtre .nom { font-size: 12px; font-weight: 600; color: var(--texte-doux); }
.champ-filtre input:not([type=checkbox]), .champ-filtre select { width: 100%; min-width: 0; }
.champ-filtre .plage { display: flex; align-items: center; gap: 6px; }
.champ-filtre .plage span { color: var(--texte-doux); font-size: 12px; }
.champ-filtre .cases-choix { display: flex; flex-direction: column; max-height: 150px; overflow-y: auto; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 4px; }
.pied-panneau { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bord); }

.liste-echecs { margin: 8px 0 0; padding-left: 18px; }
.liste-echecs li { margin-bottom: 8px; }

/* ── La notification qui attend (annulation.js) ─────────────────────────────────────────── */
#toasts .toast.annulable { cursor: default; align-items: center; }
#toasts .toast .toast-reste { color: var(--texte-doux); font-variant-numeric: tabular-nums; font-weight: 400; }
#toasts .toast .toast-annuler {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px;
  font-weight: 650; color: var(--accent-texte); border-color: color-mix(in srgb, var(--accent) 45%, var(--bord));
}
#toasts .toast .toast-avance {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--degrade); transform-origin: left; transform: scaleX(0); transition: transform .25s var(--sortie);
}

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 860px) {
  .flottant.large { width: calc(100vw - 16px); }
  .panneau-filtres .champs-filtres { grid-template-columns: minmax(0, 1fr); }
  .liste-selection { top: 56px; }
}

@media (max-width: 860px) {
  /* au doigt : le menu ⋯ reste visible — il trie, filtre, déplace, masque et rend la largeur
     automatique ; la largeur elle-même se règle à la poignée, qui accepte aussi le doigt */
  .table-liste th .menu-col { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .flottant, .flottant.sortie, .liste-puces .puce-filtre, .liste-selection, .table-liste tr.eclaire { animation: none; }
}

/* ── Sections réservées : chaque lot ajoute ses règles sous SON titre, pour ne pas se marcher dessus. */
/* — boutique (catalogue, stock, commandes, clients, promotions) — */
.vignette-liste { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
/* Un NOM qui mène quelque part (le client d'une commande, le libellé d'une référence) n'est pas un
   identifiant : il garde la police du texte, là où les codes des tables passent en chasse fixe. */
.table-liste td a.lien-interne.lien-nom { font-family: inherit; font-size: inherit; }

/* — réglages — */
/* La médiathèque reste une galerie : la case et le menu « ⋯ » se posent SUR la vignette. La case
   n'apparaît qu'au survol, au clavier ou dès qu'une sélection existe — toujours sur un écran tactile,
   où le survol n'existe pas. */
.galerie-medias { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); padding: 14px; }
.tuile-media { position: relative; overflow: hidden; margin: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.tuile-media:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--bord)); box-shadow: var(--ombre-haute); }
.tuile-media.choisie { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-doux); }
.tuile-media .tuile-image { height: 128px; background: var(--fond-creux); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tuile-media .tuile-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tuile-media .tuile-corps { display: block; padding: 9px 11px; text-decoration: none; color: inherit; }
.tuile-media .tuile-nom { font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile-media .tuile-meta { color: var(--texte-doux); font-size: 11.5px; margin-top: 2px; }
.tuile-media .tuile-meta.alerte { color: var(--erreur); }
.tuile-media .tuile-case {
  position: absolute; top: 8px; left: 8px; display: flex; padding: 5px; border-radius: 7px;
  background: var(--fond-verre); backdrop-filter: blur(6px); box-shadow: var(--ombre); cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.tuile-media .tuile-case input { margin: 0; cursor: pointer; }
.tuile-media .tuile-menu {
  position: absolute; top: 6px; right: 6px; background: var(--fond-verre); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .15s;
}
.tuile-media:hover .tuile-case, .tuile-media:focus-within .tuile-case, .galerie-medias.avec-selection .tuile-case,
.tuile-media.choisie .tuile-case, .tuile-media:hover .tuile-menu, .tuile-media:focus-within .tuile-menu,
.tuile-media .tuile-menu[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .tuile-media .tuile-case, .tuile-media .tuile-menu { opacity: 1; } }
.liste-zone > .tete .option-case { padding: 0; }
.liste .liste-barre select { width: auto; max-width: 100%; }
.taxon-indente { display: inline-block; }
@media (max-width: 860px) {
  .galerie-medias { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 10px; }
}

/* — paiements, webhooks, palette — */
.grille-paiements { margin-top: 18px; }
/* Les filtres du SOCLE (statut, workflow, fenêtre) au-dessus de la liste du journal : ils
   rechargent, là où ceux de la liste filtrent ce qui est déjà chargé. */
.barre-journal { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 10px; }
.barre-journal select { flex: 0 1 auto; }
.barre-journal .journal-workflow { flex: 1; min-width: 200px; }
.barre-journal .danger { margin-left: auto; }
@media (max-width: 860px) { .barre-journal select { flex: 1 1 140px; } .barre-journal .danger { margin-left: 0; } }
/* La palette : l'étape en cours (« CMD-000012 › »), l'accès aux actions d'un élément, et les
   actions impossibles — grisées, mais présentes, pour dire POURQUOI elles ne s'offrent pas. */
.palette-contexte {
  flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--accent-doux); color: var(--accent);
}
.palette-sous {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--texte-doux); padding: 2px 4px; border-radius: 6px;
}
.palette-sous:hover { color: var(--accent); }
.palette-sous + .palette-retour { margin-left: 6px; }
.palette-entree.desactivee { cursor: default; opacity: .55; }
.palette-entree.desactivee .palette-titre { font-weight: 450; }
.palette-entree.danger .palette-titre { color: var(--erreur); }
@media (max-width: 860px) {
  .palette-sous kbd { display: none; }
  .palette-contexte { max-width: 50%; }
}