/* ===== Feuille de style commune du back-office ScanInv =====
   Reprise des maquettes validées (maquettes/assets/css/commun.css), sans les outils de maquette ni le cadre de téléphone.
   Charte du site de présentation (reference/site-presentation). */

/* ===== Polices hébergées localement (licence SIL Open Font License) ===== */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-500.d35327b1699c.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-700.48e4b00b03b4.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-800.5beb2f653e74.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-400.c178fc5e2d41.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-500.552cbb998bb6.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-600.36a59be54659.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-variable.de2f1fe81758.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

/* ===== Charte ScanInv ===== */
/* Contours des éléments cliquables en ardoise (6,9:1 sur blanc, WCAG 1.4.11) ; l'acier (1,4:1) reste aux cadres décoratifs. */
:root {
  --blanc: #FFFFFF;
  --vert-scan: #1FFF6F;   /* fonds, faisceau, boutons : jamais pour écrire sur du blanc */
  --vert-texte: #007A3D;  /* vert lisible pour un texte ou un lien sur blanc */
  --nuit: #0B1220;        /* textes, fonds forts */
  --ardoise: #4B5A78;     /* textes secondaires */
  --brume: #F1F4F8;       /* surfaces claires */
  --acier: #D3DAE5;       /* bordures */
  --manque: #B42318;      /* écart négatif, toujours avec le signe − (RG-223) */
  --surplus: #7A4A00;     /* écart positif, toujours avec le signe + (RG-223) */
  /* Familles des boutons secondaires (piste 3Y, validée le 13/10/2026) : fond, contour, texte */
  --voir-fond: #E8EEFF; --voir-trait: #2F4FB5; --voir-texte: #1E3A8A;       /* regarder, rien ne change */
  --ajout-fond: #E6F8EE; --ajout-trait: #007A3D; --ajout-texte: #005C2E;    /* ajouter quelque chose */
  --modif-fond: #F1ECFF; --modif-trait: #5B3FB0; --modif-texte: #3F2A85;    /* modifier, rétablir */
  --grave-fond: #FDECEA;                                                     /* supprimer, annuler */
  --titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texte: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--blanc); color: var(--nuit);
  font: 400 1rem/1.55 var(--texte);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--titre); margin: 0; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--nuit); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Logo ===== */
.logo { display: inline-flex; text-decoration: none; }
.logo svg { height: 34px; width: auto; }

/* ===== Boutons ===== */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  text-decoration: none; font: 600 1rem/1 var(--texte); cursor: pointer; border: 0;
  background: var(--vert-scan); color: var(--nuit);
  padding: .9rem 1.4rem; border-radius: 12px;
  box-shadow: 0 0 0 2px var(--nuit), 4px 4px 0 0 var(--nuit);
  transition: transform .12s, box-shadow .12s;
}
.bouton:hover { transform: translate(2px, 2px); box-shadow: 0 0 0 2px var(--nuit), 2px 2px 0 0 var(--nuit); }
.bouton:active { transform: translate(4px, 4px); box-shadow: 0 0 0 2px var(--nuit), 0 0 0 0 var(--nuit); }
.bouton.large { width: 100%; }
.bouton-secondaire {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font: 600 .95rem/1 var(--texte); color: var(--b-texte, var(--nuit)); text-decoration: none;
  background: var(--b-fond, var(--blanc)); border: 2px solid var(--b-trait, var(--nuit)); border-radius: 10px;
  padding: .6rem .95rem;
}
.bouton-secondaire:hover { background: color-mix(in srgb, var(--b-trait, var(--nuit)) 10%, var(--b-fond, var(--blanc))); }
.lien { color: var(--vert-texte); font-weight: 600; text-underline-offset: 3px; }

/* ===== Champs de formulaire ===== */
.champ { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.champ label { font-weight: 600; }
.champ input, .champ select {
  font: 400 1rem/1.4 var(--texte); color: var(--nuit); background: var(--blanc);
  border: 2px solid var(--nuit); border-radius: 12px; padding: .8rem 1rem; width: 100%; min-width: 0;
}
.champ input::placeholder { color: var(--ardoise); }
.champ input:focus-visible, .champ select:focus-visible { outline: 3px solid var(--nuit); outline-offset: 2px; }
.aide { font-size: .9rem; color: var(--ardoise); }
/* Erreur sur un champ (serveur ou navigateur, voir scaninv.js) : même repère « ! » que les messages */
.erreur-champ { display: flex; gap: .5rem; align-items: flex-start; margin: .2rem 0 0; font-size: .9rem; font-weight: 600; color: var(--nuit); }
.erreur-champ::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: .05rem;
  border-radius: 50%; background: var(--nuit); color: var(--vert-scan); font: 800 .8rem/1 var(--titre);
}
.ajout-ligne .erreur-champ { order: 10; flex-basis: 100%; }
.ajout-ligne .case { white-space: nowrap; }
.ligne-champ { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

/* ===== Pages d'accès (connexion, création de compte) ===== */
.acces { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.acces-formulaire { display: flex; flex-direction: column; padding: 2.5rem clamp(1.5rem, 6vw, 5rem); }
.acces-contenu { width: min(26rem, 100%); margin: auto 0; padding: 3rem 0; }
.acces-contenu h1 { font-size: 2.2rem; line-height: 1.1; margin-bottom: .6rem; }
.acces-contenu .chapo { color: var(--ardoise); margin-bottom: 2rem; }
.acces-contenu form { display: grid; gap: 1.25rem; }
.acces-contenu .bascule { margin-top: 1.75rem; color: var(--ardoise); }
.acces-contenu .encadre-aide { margin: 0 0 1.25rem; }
.acces-contenu [tabindex="-1"]:focus { outline: none; }
.acces-visuel {
  background: var(--nuit); display: grid; place-items: center; padding: 3rem;
  position: relative; overflow: hidden;
}
/* Viseur décoratif : les quatre coins et le faisceau, comme sur le logo */
.viseur-deco { position: relative; width: min(22rem, 80%); aspect-ratio: 1; }
.viseur-deco .coin { position: absolute; width: 22%; height: 22%; border: 6px solid var(--blanc); }
.viseur-deco .coin.a { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.viseur-deco .coin.b { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.viseur-deco .coin.c { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.viseur-deco .coin.d { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.viseur-deco .code-barres {
  position: absolute; inset: 26% 18%; display: flex; justify-content: center; align-items: stretch; gap: 5px;
}
.viseur-deco .code-barres span { background: var(--blanc); opacity: .85; }
.viseur-deco .faisceau {
  position: absolute; left: 6%; right: 6%; height: 5px; top: 50%; border-radius: 3px;
  background: var(--vert-scan); box-shadow: 0 0 22px 6px rgba(31,255,111,.55);
  animation: balayage 2.8s ease-in-out infinite alternate;
}
@keyframes balayage { from { top: 18%; } to { top: 82%; } }

/* ===== Back-office : en-tête ===== */
.bo-entete { border-bottom: 1px solid var(--acier); background: var(--blanc); }
.bo-entete-interieur {
  width: min(1240px, 100% - 3rem); margin-inline: auto;
  display: flex; align-items: center; gap: 2rem; min-height: 4.5rem;
}
.bo-menu { display: flex; gap: .25rem; flex: 1; }
.bo-menu a {
  text-decoration: none; font-weight: 600; color: var(--ardoise);
  padding: 1.5rem .75rem 1.3rem; border-bottom: 4px solid transparent;
}
.bo-menu a:hover { color: var(--nuit); }
.bo-menu a[aria-current="page"] { color: var(--nuit); border-bottom-color: var(--vert-scan); }
.bo-outils { display: flex; align-items: center; gap: 1.25rem; }
.selecteur-magasin { display: flex; align-items: center; gap: .5rem; }
.selecteur-magasin label { font-size: .85rem; color: var(--ardoise); font-weight: 600; }
.selecteur-magasin select {
  font: 600 .95rem/1.2 var(--texte); color: var(--nuit); background: var(--brume);
  border: 1px solid var(--ardoise); border-radius: 10px; padding: .5rem .75rem;
}
.bo-utilisateur { font-size: .9rem; color: var(--ardoise); text-align: right; line-height: 1.3; }
.bo-utilisateur a { color: var(--nuit); font-weight: 600; }
.bo-aide { font-weight: 600; color: var(--nuit); text-underline-offset: 3px; }

/* ===== Back-office : pied de page ===== */
.bo-pied { border-top: 1px solid var(--acier); padding: 1.25rem 0 5rem; }
.bo-pied nav { width: min(1240px, 100% - 3rem); margin-inline: auto; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: .9rem; }
.bo-pied a { color: var(--ardoise); text-underline-offset: 3px; }
.bo-pied a:hover { color: var(--nuit); }
.acces-formulaire .bo-pied { padding-bottom: 0; }
.acces-formulaire .bo-pied nav { width: 100%; }

/* ===== Back-office : contenu ===== */
.bo-page { width: min(1240px, 100% - 3rem); margin-inline: auto; padding: 2.5rem 0 5rem; }
.bo-titre { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.bo-titre h1 { font-size: 2rem; line-height: 1.15; }
.bo-titre .chapo { color: var(--ardoise); margin-top: .4rem; max-width: 46rem; }
/* Titre d'un tableau dans une page (liste des inventaires : En cours, Archivés) */
.titre-section { font-size: 1.35rem; margin: 0 0 .9rem; }
.tableau-cadre + .titre-section, .meta + .titre-section { margin-top: 2.5rem; }

/* Tableau */
.tableau-cadre { position: relative; border: 1px solid var(--acier); border-radius: 16px; overflow-x: auto; }
/* Tableau long qui défile dans son cadre (articles du recomptage sur l'avancement), en-tête toujours visible */
.tableau-cadre.defile { max-height: 26rem; overflow-y: auto; }
.tableau-cadre.defile thead th { position: sticky; top: 0; z-index: 1; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 1rem 1.25rem; vertical-align: top; }
thead th {
  background: var(--brume); font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ardoise); white-space: nowrap;
}
tbody tr + tr td { border-top: 1px solid var(--acier); }
tbody tr:hover td { background: #FAFBFD; }
td .secondaire { display: block; font-size: .9rem; color: var(--ardoise); }
/* Ligne d'écart visée après une action (« Ajouter au recomptage », « Retirer »…) : un peu d'air au-dessus */
tr[id^="article-"] { scroll-margin-top: 6rem; }
/* Colonne Recomptage des écarts : case, mention et bouton sur une même ligne, alignés au centre */
.cellule-recomptage { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.cellule-recomptage .case input { margin: 0; }
.cellule-recomptage .secondaire { flex-basis: 100%; }
.cellule-recomptage .a-recompter { font-weight: 700; color: var(--vert-texte); flex-basis: 100%; }
/* Case de sélection pour « Retirer la sélection » : sa propre colonne, tout à droite, sous le bouton */
.colonne-selection { width: 3rem; text-align: center; }
.colonne-selection .case input { margin: 0; }
.colonne-action { text-align: right; white-space: nowrap; }
.colonne-action > * + * { margin-left: .9rem; }

/* Pastilles d'état (couleurs de la charte uniquement) */
.pastille {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-size: .85rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px;
  background: var(--brume); border: 1px solid var(--acier);
}
.pastille::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; }
.pastille.active::before { background: var(--vert-scan); box-shadow: 0 0 0 3px rgba(31,255,111,.3); }
.pastille.attente::before { border: 2px solid var(--ardoise); }
.etiquette {
  display: inline-block; font-size: .8rem; font-weight: 600;
  background: var(--nuit); color: var(--blanc); padding: .15rem .55rem; border-radius: 6px;
}
/* « Article inconnu » à côté du nom saisi sur le téléphone (BO-17, BO-32) */
.etiquette.legere { background: var(--brume); color: var(--ardoise); border: 1px solid var(--acier); white-space: nowrap; text-decoration: none; }

/* Encadré d'aide contextuelle (RG-105) */
.encadre-aide {
  display: flex; gap: .9rem; align-items: flex-start; margin-top: 1.5rem;
  background: var(--brume); border-radius: 14px; padding: 1rem 1.25rem; color: var(--ardoise);
}
.encadre-aide::before {
  content: "i"; flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: var(--nuit); color: var(--vert-scan); font: 700 .95rem/1 var(--titre);
}
.encadre-aide strong { color: var(--nuit); }

/* ===== Back-office : éléments communs aux écrans ===== */
.fil { display: inline-block; margin-bottom: 1rem; font-weight: 600; color: var(--ardoise); text-decoration: none; }
.fil:hover { color: var(--nuit); }
.bo-page h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.bo-page .section + .section { margin-top: 2.5rem; }
.carte { background: var(--blanc); border: 1px solid var(--acier); border-radius: 16px; padding: 1.5rem; }
.carte > h2:first-child, .carte > h3:first-child { margin-top: 0; }
.carte.brume { background: var(--brume); border-color: transparent; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pile { display: grid; gap: 1.25rem; }
/* Un bloc de grille ne s'élargit pas pour son contenu (tableau, champ de date) : c'est le tableau qui défile */
.pile > *, .grille-2 > *, .grille-3 > *, .feuille > *, .zone-depot > * { min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .9rem 1rem; align-items: center; }
.actions.fin { justify-content: flex-end; }
.actions-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--acier); }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 0 0 0 2px var(--nuit), 4px 4px 0 0 var(--nuit); }
.bouton-texte { background: none; border: 0; padding: 0; font: 600 .95rem/1.2 var(--texte); color: var(--vert-texte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bouton-secondaire.petit { padding: .4rem .7rem; font-size: .85rem; border-radius: 8px; }
.bouton-danger { /* confirmation d'une action grave : fond rouge (couleur des manques), texte blanc */
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; border: 0;
  font: 600 1rem/1 var(--texte); color: #FFFFFF; background: var(--manque);
  padding: .9rem 1.4rem; border-radius: 12px; text-decoration: none;
}
/* Couleur d'un bouton secondaire selon ce qu'il fait, reconnue à son icône (piste 3Y, 13/10/2026).
   Sans icône (Annuler d'une fenêtre, Garder, Ouvrir…), il reste en contour noir. */
.ic-search, .ic-ecarts, .ic-list, .ic-inconnus, .ic-visibility, .ic-filtre, .ic-arrow-back {
  --b-fond: var(--voir-fond); --b-trait: var(--voir-trait); --b-texte: var(--voir-texte);
}
.ic-add, .ic-upload { --b-fond: var(--ajout-fond); --b-trait: var(--ajout-trait); --b-texte: var(--ajout-texte); }
.ic-edit, .ic-undo, .ic-remove { --b-fond: var(--modif-fond); --b-trait: var(--modif-trait); --b-texte: var(--modif-texte); }
.ic-download, .ic-print { --b-fond: var(--brume); --b-trait: var(--ardoise); --b-texte: var(--nuit); }
/* Bouton qui mène à une action grave (supprimer, désactiver, annuler) : fond rosé, contour et texte rouges */
.grave { --b-fond: var(--grave-fond); --b-trait: var(--manque); --b-texte: var(--manque); }
.bouton-texte.grave { color: var(--manque); }
/* Sur ordinateur, les boutons texte restent de simples liens, sans icône ni couleur de famille */
.bouton-texte.ic::before { display: none; }
/* Icônes plates devant le libellé des boutons (Material Symbols arrondies, Google, licence Apache 2.0 ;
   décidé le 12/10/2026, les mêmes que dans l'appli). Le dessin sert de masque : il prend la couleur du texte. */
.ic::before {
  content: ""; flex: none; width: 1.2em; height: 1.2em; margin: -.1em 0;
  background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ic-add { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z'/%3E%3C/svg%3E"); }
.ic-arrow-back { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m313-440 196 196q12 12 11.5 28T508-188q-12 11-28 11.5T452-188L188-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l264-264q11-11 27.5-11t28.5 11q12 12 12 28.5T508-715L313-520h447q17 0 28.5 11.5T800-480q0 17-11.5 28.5T760-440H313Z'/%3E%3C/svg%3E"); }
.ic-cancel { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m480-424 116 116q11 11 28 11t28-11q11-11 11-28t-11-28L536-480l116-116q11-11 11-28t-11-28q-11-11-28-11t-28 11L480-536 364-652q-11-11-28-11t-28 11q-11 11-11 28t11 28l116 116-116 116q-11 11-11 28t11 28q11 11 28 11t28-11l116-116Zm0 344q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E"); }
.ic-check-circle { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m424-408-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-408Zm56 328q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E"); }
.ic-delete { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M280-120q-33 0-56.5-23.5T200-200v-520q-17 0-28.5-11.5T160-760q0-17 11.5-28.5T200-800h160q0-17 11.5-28.5T400-840h160q17 0 28.5 11.5T600-800h160q17 0 28.5 11.5T800-760q0 17-11.5 28.5T760-720v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM428.5-291.5Q440-303 440-320v-280q0-17-11.5-28.5T400-640q-17 0-28.5 11.5T360-600v280q0 17 11.5 28.5T400-280q17 0 28.5-11.5Zm160 0Q600-303 600-320v-280q0-17-11.5-28.5T560-640q-17 0-28.5 11.5T520-600v280q0 17 11.5 28.5T560-280q17 0 28.5-11.5ZM280-720v520-520Z'/%3E%3C/svg%3E"); }
.ic-download { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M465-339.5q-7-2.5-13-8.5L308-492q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T365-549l75 75v-286q0-17 11.5-28.5T480-800q17 0 28.5 11.5T520-760v286l75-75q12-12 28.5-11.5T652-548q11 12 11.5 28T652-492L508-348q-6 6-13 8.5t-15 2.5q-8 0-15-2.5ZM240-160q-33 0-56.5-23.5T160-240v-80q0-17 11.5-28.5T200-360q17 0 28.5 11.5T240-320v80h480v-80q0-17 11.5-28.5T760-360q17 0 28.5 11.5T800-320v80q0 33-23.5 56.5T720-160H240Z'/%3E%3C/svg%3E"); }
.ic-edit { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-200h57l391-391-57-57-391 391v57Zm-40 80q-17 0-28.5-11.5T120-160v-97q0-16 6-30.5t17-25.5l505-504q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L313-143q-11 11-25.5 17t-30.5 6h-97Zm600-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z'/%3E%3C/svg%3E"); }
.ic-filtre { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z'/%3E%3C/svg%3E"); }
.ic-flag { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M280-400v240q0 17-11.5 28.5T240-120q-17 0-28.5-11.5T200-160v-600q0-17 11.5-28.5T240-800h287q14 0 25 9t14 23l10 48h184q17 0 28.5 11.5T800-680v320q0 17-11.5 28.5T760-320H553q-14 0-25-9t-14-23l-10-48H280Zm306 0h134v-240H543q-14 0-25-9t-14-23l-10-48H280v240h257q14 0 25 9t14 23l10 48Zm-86-160Z'/%3E%3C/svg%3E"); }
.ic-avancement { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-240q100 0 170-70t70-170q0-87-55.5-153T524-716q-18-2-31 10t-13 30v196L342-342q-13 13-12 31t15 29q29 23 64 32.5t71 9.5Zm0 160q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E"); }
.ic-ecarts { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M367-320H120q-17 0-28.5-11.5T80-360q0-17 11.5-28.5T120-400h247l-75-75q-11-11-11-27.5t11-28.5q12-12 28.5-12t28.5 12l143 143q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L348-188q-12 12-28 11.5T292-189q-11-12-11.5-28t11.5-28l75-75Zm226-240 75 75q11 11 11 27.5T668-429q-12 12-28.5 12T611-429L468-572q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l144-144q12-12 28-11.5t28 12.5q11 12 11.5 28T668-715l-75 75h247q17 0 28.5 11.5T880-600q0 17-11.5 28.5T840-560H593Z'/%3E%3C/svg%3E"); }
.ic-inconnus { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m280-252 56 57q6 6 14 6t14-6q6-6 6-14.5t-6-14.5l-56-56 57-57q6-6 6-14t-6-14q-6-6-14-6t-14 6l-57 57-57-57q-6-6-14-6t-14 6q-6 6-6 14t6 14l57 57-57 57q-6 6-6 14t6 14q6 6 14 6t14-6l57-57ZM138.5-138.5Q80-197 80-280t58.5-141.5Q197-480 280-480t141.5 58.5Q480-363 480-280t-58.5 141.5Q363-80 280-80t-141.5-58.5ZM568-376q-12-13-25.5-26.5T516-428q38-24 61-64t23-88q0-75-52.5-127.5T420-760q-75 0-127.5 52.5T240-580q0 6 .5 11.5T242-557q-18 2-39.5 8T164-535q-2-11-3-22t-1-23q0-109 75.5-184.5T420-840q109 0 184.5 75.5T680-580q0 43-13.5 81.5T629-428l223 224q11 11 11.5 27.5T852-148q-11 11-28 11t-28-11L568-376Z'/%3E%3C/svg%3E"); }
.ic-list { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M348.5-291.5Q360-303 360-320t-11.5-28.5Q337-360 320-360t-28.5 11.5Q280-337 280-320t11.5 28.5Q303-280 320-280t28.5-11.5Zm0-160Q360-463 360-480t-11.5-28.5Q337-520 320-520t-28.5 11.5Q280-497 280-480t11.5 28.5Q303-440 320-440t28.5-11.5Zm0-160Q360-623 360-640t-11.5-28.5Q337-680 320-680t-28.5 11.5Q280-657 280-640t11.5 28.5Q303-600 320-600t28.5-11.5ZM480-280h160q17 0 28.5-11.5T680-320q0-17-11.5-28.5T640-360H480q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160h160q17 0 28.5-11.5T680-480q0-17-11.5-28.5T640-520H480q-17 0-28.5 11.5T440-480q0 17 11.5 28.5T480-440Zm0-160h160q17 0 28.5-11.5T680-640q0-17-11.5-28.5T640-680H480q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z'/%3E%3C/svg%3E"); }
.ic-login { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M520-120q-17 0-28.5-11.5T480-160q0-17 11.5-28.5T520-200h240v-560H520q-17 0-28.5-11.5T480-800q0-17 11.5-28.5T520-840h240q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H520Zm-73-320H160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520h287l-75-75q-11-11-11-27t11-28q11-12 28-12.5t29 11.5l143 143q12 12 12 28t-12 28L429-309q-12 12-28.5 11.5T372-310q-11-12-10.5-28.5T373-366l74-74Z'/%3E%3C/svg%3E"); }
.ic-play-arrow { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M320-273v-414q0-17 12-28.5t28-11.5q5 0 10.5 1.5T381-721l326 207q9 6 13.5 15t4.5 19q0 10-4.5 19T707-446L381-239q-5 3-10.5 4.5T360-233q-16 0-28-11.5T320-273Zm80-207Zm0 134 210-134-210-134v268Z'/%3E%3C/svg%3E"); }
.ic-print { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M320-120q-33 0-56.5-23.5T240-200v-80h-80q-33 0-56.5-23.5T80-360v-160q0-51 35-85.5t85-34.5h560q51 0 85.5 34.5T880-520v160q0 33-23.5 56.5T800-280h-80v80q0 33-23.5 56.5T640-120H320ZM160-360h80q0-33 23.5-56.5T320-440h320q33 0 56.5 23.5T720-360h80v-160q0-17-11.5-28.5T760-560H200q-17 0-28.5 11.5T160-520v160Zm480-280v-120H320v120h-80v-120q0-33 23.5-56.5T320-840h320q33 0 56.5 23.5T720-760v120h-80Zm80 180q17 0 28.5-11.5T760-500q0-17-11.5-28.5T720-540q-17 0-28.5 11.5T680-500q0 17 11.5 28.5T720-460Zm-80 260v-160H320v160h320ZM160-560h640-640Z'/%3E%3C/svg%3E"); }
.ic-qr-code { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M120-680q-17 0-28.5-11.5T80-720v-120q0-17 11.5-28.5T120-880h120q17 0 28.5 11.5T280-840q0 17-11.5 28.5T240-800h-80v80q0 17-11.5 28.5T120-680Zm0 600q-17 0-28.5-11.5T80-120v-120q0-17 11.5-28.5T120-280q17 0 28.5 11.5T160-240v80h80q17 0 28.5 11.5T280-120q0 17-11.5 28.5T240-80H120Zm600 0q-17 0-28.5-11.5T680-120q0-17 11.5-28.5T720-160h80v-80q0-17 11.5-28.5T840-280q17 0 28.5 11.5T880-240v120q0 17-11.5 28.5T840-80H720Zm91.5-611.5Q800-703 800-720v-80h-80q-17 0-28.5-11.5T680-840q0-17 11.5-28.5T720-880h120q17 0 28.5 11.5T880-840v120q0 17-11.5 28.5T840-680q-17 0-28.5-11.5ZM700-200v-60h60v60h-60Zm0-120v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60-60v-60h60v60h-60Zm120-120v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60-60v-60h60v60h-60Zm40-140q-17 0-28.5-11.5T520-560v-160q0-17 11.5-28.5T560-760h160q17 0 28.5 11.5T760-720v160q0 17-11.5 28.5T720-520H560ZM240-200q-17 0-28.5-11.5T200-240v-160q0-17 11.5-28.5T240-440h160q17 0 28.5 11.5T440-400v160q0 17-11.5 28.5T400-200H240Zm0-320q-17 0-28.5-11.5T200-560v-160q0-17 11.5-28.5T240-760h160q17 0 28.5 11.5T440-720v160q0 17-11.5 28.5T400-520H240Zm20 260h120v-120H260v120Zm0-320h120v-120H260v120Zm320 0h120v-120H580v120Z'/%3E%3C/svg%3E"); }
.ic-remove { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M240-440q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h480q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H240Z'/%3E%3C/svg%3E"); }
.ic-save { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h447q16 0 30.5 6t25.5 17l114 114q11 11 17 25.5t6 30.5v447q0 33-23.5 56.5T760-120H200Zm560-526L646-760H200v560h560v-446ZM565-275q35-35 35-85t-35-85q-35-35-85-35t-85 35q-35 35-35 85t35 85q35 35 85 35t85-35ZM280-560h280q17 0 28.5-11.5T600-600v-80q0-17-11.5-28.5T560-720H280q-17 0-28.5 11.5T240-680v80q0 17 11.5 28.5T280-560Zm-80-86v446-560 114Z'/%3E%3C/svg%3E"); }
.ic-search { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E"); }
.ic-undo { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M320-200q-17 0-28.5-11.5T280-240q0-17 11.5-28.5T320-280h244q63 0 109.5-40T720-420q0-60-46.5-100T564-560H312l76 76q11 11 11 28t-11 28q-11 11-28 11t-28-11L188-572q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l144-144q11-11 28-11t28 11q11 11 11 28t-11 28l-76 76h252q97 0 166.5 63T800-420q0 94-69.5 157T564-200H320Z'/%3E%3C/svg%3E"); }
.ic-upload { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M240-160q-33 0-56.5-23.5T160-240v-80q0-17 11.5-28.5T200-360q17 0 28.5 11.5T240-320v80h480v-80q0-17 11.5-28.5T760-360q17 0 28.5 11.5T800-320v80q0 33-23.5 56.5T720-160H240Zm200-486-75 75q-12 12-28.5 11.5T308-572q-11-12-11.5-28t11.5-28l144-144q6-6 13-8.5t15-2.5q8 0 15 2.5t13 8.5l144 144q12 12 11.5 28T652-572q-12 12-28.5 12.5T595-571l-75-75v286q0 17-11.5 28.5T480-320q-17 0-28.5-11.5T440-360v-286Z'/%3E%3C/svg%3E"); }
.ic-visibility { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M607.5-372.5Q660-425 660-500t-52.5-127.5Q555-680 480-680t-127.5 52.5Q300-575 300-500t52.5 127.5Q405-320 480-320t127.5-52.5Zm-204-51Q372-455 372-500t31.5-76.5Q435-608 480-608t76.5 31.5Q588-545 588-500t-31.5 76.5Q525-392 480-392t-76.5-31.5ZM235.5-272Q125-344 61-462q-5-9-7.5-18.5T51-500q0-10 2.5-19.5T61-538q64-118 174.5-190T480-800q134 0 244.5 72T899-538q5 9 7.5 18.5T909-500q0 10-2.5 19.5T899-462q-64 118-174.5 190T480-200q-134 0-244.5-72ZM480-500Zm207.5 160.5Q782-399 832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280q113 0 207.5-59.5Z'/%3E%3C/svg%3E"); }
.meta { color: var(--ardoise); font-size: .95rem; }
.meta b { color: var(--nuit); font-weight: 600; }
.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecart { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.manque { color: var(--manque); }   /* couleur jamais seule : le signe reste affiché (RG-223) */
.surplus { color: var(--surplus); }
tr.annulee td { color: var(--ardoise); }
tr.hors-total td { background: var(--brume); }
tr.annulee td.barre { text-decoration: line-through; }
/* BO-32 : largeurs fixes, la colonne Article prend le reste ; masquer les annulées ne fait plus bouger les colonnes */
@media (min-width: 601px) {
  .tableau-scans { table-layout: fixed; }
  .tableau-scans .col-date { width: 9rem; }
  .tableau-scans .col-emplacement { width: 10rem; }
  .tableau-scans .col-quantite { width: 7rem; }
  .tableau-scans .col-saisie { width: 10rem; }
  .tableau-scans .col-tour { width: 11rem; }
  .tableau-scans .col-actions { width: 11rem; }
  .tableau-scans td { overflow-wrap: anywhere; }
  /* Écran moyen (tablette, téléphone en mode ordinateur) : la colonne Article garde sa place, le tableau défile */
  .tableau-scans { min-width: 72rem; }
}
th a.tri { color: inherit; text-decoration: none; }
th a.tri:hover { text-decoration: underline; }
.mention { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--nuit); background: var(--brume); border: 1px solid var(--acier); border-radius: 6px; padding: .1rem .45rem; white-space: nowrap; }
.code { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--ardoise); }

/* Bloc d'en-tête d'un inventaire et sous-menu */
.inventaire-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.inventaire-entete h1 { font-size: 1.9rem; line-height: 1.15; }
.inventaire-entete .meta { margin-top: .35rem; }
/* overflow-y: hidden : sans lui, le navigateur ajoute un ascenseur vertical inutile à côté des onglets */
.sous-menu { display: flex; gap: .25rem; margin: 1.75rem 0 2rem; border-bottom: 1px solid var(--acier); overflow-x: auto; overflow-y: hidden; }
.sous-menu a { text-decoration: none; font-weight: 600; color: var(--ardoise); padding: .7rem .9rem; border-bottom: 4px solid transparent; white-space: nowrap; }
.sous-menu a:hover { color: var(--nuit); }
.sous-menu a[aria-current="page"] { color: var(--nuit); border-bottom-color: var(--vert-scan); }
/* Icône de chaque onglet de l'inventaire (décidé le 13/10/2026) */
.sous-menu a.ic { display: inline-flex; align-items: center; gap: .45rem; }
.pastille.statut::before { background: var(--nuit); }

/* Bandeau d'archivage automatique (RG-151) */
.bandeau {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  background: var(--nuit); color: var(--blanc); border-radius: 14px; padding: .9rem 1.25rem; margin-bottom: 2rem;
}
.bandeau::before { content: ""; flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: var(--vert-scan); box-shadow: 0 0 0 4px rgba(31,255,111,.3); }
.bandeau p { flex: 1; }
.bandeau a { color: var(--blanc); font-weight: 600; }

/* Message neutre dans le back-office (refus, avertissement) */
.message {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--blanc); border: 2px solid var(--nuit); border-radius: 14px; padding: 1rem 1.25rem;
}
.message::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: var(--nuit); color: var(--vert-scan); font: 800 .95rem/1 var(--titre);
}
.message.ok::before { content: "✓"; background: var(--vert-scan); color: var(--nuit); }
.message strong { display: block; margin-bottom: .2rem; }
.message p { color: var(--ardoise); }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 1rem; }
.chiffre { background: var(--brume); border-radius: 14px; padding: 1.1rem 1.25rem; }
.chiffre span { display: block; font-size: .9rem; color: var(--ardoise); }
.chiffre b { display: block; font: 800 1.8rem/1.2 var(--titre); letter-spacing: -.02em; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.chiffre small { color: var(--ardoise); }
.progression { height: .7rem; background: var(--blanc); border: 1px solid var(--acier); border-radius: 999px; overflow: hidden; margin-top: .6rem; }
.progression span { display: block; height: 100%; background: var(--vert-scan); border-right: 2px solid var(--nuit); }

/* Formulaires du back-office */
.formulaire { display: grid; gap: 1.4rem; max-width: 44rem; }
.formulaire fieldset { border: 1px solid var(--acier); border-radius: 16px; padding: 1.25rem 1.5rem 1.5rem; margin: 0; display: grid; gap: 1.1rem; }
.formulaire legend { font: 700 1.15rem/1.2 var(--titre); padding: 0 .4rem; }
.champ textarea {
  font: 400 1rem/1.5 var(--texte); color: var(--nuit); border: 2px solid var(--nuit); border-radius: 12px;
  padding: .8rem 1rem; width: 100%; min-height: 7rem; resize: vertical;
}
.champ input[readonly] { background: var(--brume); border-color: var(--acier); }
.champs-cote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.unite { display: flex; align-items: center; gap: .6rem; }
.unite input { max-width: 9rem; }
.case { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.case input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--nuit); flex: none; }
.case span small { display: block; color: var(--ardoise); font-size: .9rem; }
.choix { display: grid; gap: .6rem; }
.choix .case { border: 1px solid var(--ardoise); border-radius: 12px; padding: .8rem 1rem; }
.choix .case:has(input:checked) { border: 2px solid var(--nuit); padding: calc(.8rem - 1px) calc(1rem - 1px); }
/* Quelques choix courts côte à côte (thème de « Mon compte »), qui passent à la ligne si la place manque */
.choix-ligne { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.sous-options { margin-left: 1.85rem; display: grid; gap: .9rem; }
.recap-pret { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.recap-pret li { display: flex; gap: .6rem; align-items: baseline; }
.recap-pret span { flex: none; min-width: 5.5rem; font-size: .8rem; font-weight: 600; text-align: center; border-radius: 6px; padding: .1rem .4rem; }
.recap-pret .oui { background: var(--vert-scan); color: var(--nuit); }
.recap-pret .non { background: var(--blanc); color: var(--nuit); border: 1px solid var(--acier); }
.regles-base { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; color: var(--ardoise); }
/* Résultats de la recherche « Ajouter un article au recomptage » (BO-20) */
.resultats-recherche { list-style: none; margin: 0 0 1rem; padding: 0; max-height: 18rem; overflow-y: auto; }
.resultats-recherche .resultat { display: flex; gap: .75rem; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--acier); padding: .7rem .25rem; font: 400 1rem/1.3 var(--texte); color: var(--nuit); cursor: pointer; }
.resultats-recherche .resultat span:nth-child(2) { flex: 1; color: var(--ardoise); }
.resultats-recherche .resultat:hover, .resultats-recherche .resultat:focus-visible { background: var(--brume); }
/* Tous les scans (BO-32) : filtres sur une ligne, pagination */
.filtres-scans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1rem; align-items: end; margin-bottom: 1.5rem; }
.actions-filtres { display: flex; gap: 1rem; align-items: center; }
.filtres-scans .case-filtre { align-self: center; }
.pagination { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }
/* Listes déroulantes ScanInv (scaninv.js) : un bouton à l'allure du champ, la liste se déplie dessous */
.liste-scaninv { position: relative; min-width: 0; }
.liste-bouton, .liste-choix { text-transform: none; letter-spacing: normal; }
.liste-bouton {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%; min-width: 0; text-align: left; cursor: pointer;
  font: 400 1rem/1.4 var(--texte); color: var(--nuit); background: var(--blanc); border: 2px solid var(--nuit); border-radius: 12px; padding: .8rem 1rem;
}
.liste-bouton::after { content: ""; flex: none; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.liste-bouton[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.liste-bouton:focus-visible, .liste-bouton[aria-expanded="true"] { outline: 3px solid var(--nuit); outline-offset: 2px; }
.liste-bouton:disabled { opacity: .6; cursor: default; }
.liste-scaninv:has(select[aria-invalid="true"]) .liste-bouton { border-color: var(--manque); }
.liste-choix {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; min-width: 12rem; max-height: 18rem; overflow-y: auto;
  list-style: none; margin: .3rem 0 0; padding: .3rem; background: var(--blanc); border: 2px solid var(--nuit); border-radius: 12px; box-shadow: 0 8px 24px rgba(11, 18, 32, .18);
}
.liste-choix[hidden] { display: none; }
.liste-choix [role="option"] { display: flex; align-items: center; gap: .6rem; padding: .7rem .7rem .7rem 2.1rem; border-radius: 8px; font: 400 1rem/1.3 var(--texte); color: var(--nuit); cursor: pointer; position: relative; }
.liste-choix [role="option"]:hover, .liste-choix [role="option"]:focus { background: var(--brume); outline: none; }
.liste-choix [role="option"]:focus-visible { outline: 2px solid var(--nuit); outline-offset: -2px; }
.liste-choix [aria-selected="true"] { font-weight: 600; }
.liste-choix [aria-selected="true"]::before { content: ""; position: absolute; left: .8rem; top: 50%; width: .45rem; height: .9rem; border-right: 3px solid var(--vert-texte); border-bottom: 3px solid var(--vert-texte); transform: translateY(-65%) rotate(45deg); }
.liste-choix [aria-disabled="true"] { color: var(--ardoise); cursor: default; }
.liste-seul { margin: 0; padding: .5rem 0; font-weight: 600; color: var(--nuit); }
/* Variantes selon l'endroit : sélecteur de magasin du bandeau, aperçu d'import */
.selecteur-magasin .liste-bouton { font: 600 .95rem/1.2 var(--texte); background: var(--brume); border: 1px solid var(--ardoise); border-radius: 10px; padding: .5rem .75rem; }
.selecteur-magasin .liste-seul { padding: 0; }
.apercu .liste-bouton { font: 600 .85rem/1.2 var(--texte); border-radius: 8px; padding: .35rem .5rem; min-width: 9rem; }
.apercu .liste-choix [role="option"] { font-size: .9rem; padding-top: .5rem; padding-bottom: .5rem; }

/* Calendrier ScanInv (scaninv.js) : grandes cases faciles à toucher, période de l'inventaire surlignée */
.date-scaninv { position: relative; min-width: 0; }
.calendrier {
  z-index: 30; overflow-y: auto; padding: .75rem; background: var(--blanc); color: var(--nuit);
  border: 2px solid var(--nuit); border-radius: 14px; box-shadow: 0 8px 24px rgba(11, 18, 32, .18);
}
.calendrier[hidden] { display: none; }
.calendrier button { text-transform: none; letter-spacing: normal; cursor: pointer; }
.calendrier button:focus-visible { outline: 3px solid var(--nuit); outline-offset: 1px; }
.calendrier-raccourcis { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem; }
.calendrier-raccourci { font: 600 .85rem/1 var(--texte); color: var(--nuit); background: var(--brume); border: 1px solid var(--ardoise); border-radius: 999px; padding: .55rem .8rem; }
.calendrier-tete { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.calendrier-titre { margin: 0; font: 700 1.05rem/1 var(--titre); }
.calendrier-mois { width: 2.6rem; height: 2.6rem; flex: none; font: 700 1.3rem/1 var(--texte); color: var(--nuit); background: var(--blanc); border: 2px solid var(--nuit); border-radius: 10px; }
.calendrier-grille { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendrier-grille thead th { background: none; border: 0; font: 600 .75rem/1 var(--texte); color: var(--ardoise); text-transform: uppercase; padding: .4rem 0; text-align: center; }
.calendrier-grille tbody tr td, .calendrier-grille tbody tr:hover td { padding: 2px 0; text-align: center; background: none; border: 0; }
.calendrier-jour { width: 100%; height: 2.75rem; border: 0; border-radius: 10px; background: none; font: 500 1rem/1 var(--texte); color: var(--nuit); }
.calendrier-jour:hover { background: var(--brume); }
.calendrier-jour.passe { color: var(--ardoise); opacity: .6; }
.calendrier-jour.aujourdhui { box-shadow: inset 0 0 0 2px var(--nuit); font-weight: 700; opacity: 1; }
.calendrier-jour.periode { background: var(--brume); border-radius: 0; }
/* Début et fin choisis : fond vert électrique, toujours avec un texte noir bleuté */
.calendrier-jour.borne { background: var(--vert-scan); color: #0B1220; font-weight: 800; opacity: 1; }
.calendrier-pied { display: flex; justify-content: flex-end; }
.calendrier-pied:not(:empty) { margin-top: .4rem; }

/* Recherche d'article commune (scaninv.js) : la liste suit le champ ; « flottant » la pose par-dessus la page */
.recherche-article { position: relative; }
.resultats-recherche[hidden] { display: none; }
.resultats-recherche.flottant { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: .3rem; background: var(--blanc); border: 2px solid var(--nuit); border-radius: 12px; box-shadow: 0 8px 24px rgba(11, 18, 32, .18); }
.ajout-ligne .recherche-article { flex: 1 1 12rem; min-width: 0; display: flex; }
.ajout-ligne .recherche-article input { flex: 1 1 auto; }
.ajout-ligne { display: flex; flex-wrap: wrap; gap: .75rem; }
.ajout-ligne input { flex: 1 1 12rem; min-width: 0; font: 400 1rem/1.4 var(--texte); color: var(--nuit); background: var(--blanc); border: 2px solid var(--nuit); border-radius: 12px; padding: .7rem 1rem; }
.arbre { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.arbre ul { list-style: none; margin: .5rem 0 0 1.75rem; padding: 0; display: grid; gap: .5rem; }

/* Étapes de l'import */
.etapes-import { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; gap: 2rem; flex-wrap: wrap; counter-reset: etape; }
.etapes-import li { counter-increment: etape; display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--ardoise); }
.etapes-import li::before {
  content: counter(etape); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font: 800 .95rem/1 var(--titre); background: var(--brume); color: var(--ardoise); border: 1px solid var(--acier);
}
.etapes-import li[aria-current="step"] { color: var(--nuit); }
.etapes-import li[aria-current="step"]::before { background: var(--nuit); color: var(--vert-scan); border-color: var(--nuit); }
.etapes-import li.faite::before { content: "✓"; background: var(--vert-scan); color: var(--nuit); border-color: var(--nuit); }
.zone-depot {
  border: 2px dashed var(--ardoise); border-radius: 16px; padding: 2rem; text-align: center; color: var(--ardoise);
  display: grid; gap: .6rem; justify-items: center;
}
.fichier { display: flex; align-items: center; gap: 1rem; justify-content: space-between; background: var(--brume); border-radius: 12px; padding: .8rem 1rem; }
.fichier b { display: block; }
.fichier span { color: var(--ardoise); font-size: .9rem; }
.apercu select { font: 600 .85rem/1.2 var(--texte); border: 2px solid var(--nuit); border-radius: 8px; padding: .35rem .4rem; min-width: 9rem; }
.apercu th { vertical-align: bottom; }
.apercu .type-precision { display: grid; gap: .2rem; margin-top: .45rem; font-size: .75rem; color: var(--ardoise); text-transform: none; letter-spacing: 0; }
.apercu th .colonne-fichier { display: block; margin-bottom: .45rem; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--nuit); }
.apercu td { font-size: .9rem; white-space: nowrap; }
.apercu td.ignoree, .apercu th.ignoree .colonne-fichier { color: var(--ardoise); }

/* QR code, photos, listes ordonnées */
.qr-grand { width: min(20rem, 100%); padding: 1rem; background: var(--blanc); border: 1px solid var(--acier); border-radius: 16px; }
.qr-grand img { display: block; width: 100%; }
.photos { display: flex; gap: .6rem; flex-wrap: wrap; }
.photo {
  width: 5.5rem; aspect-ratio: 1; border-radius: 10px; background: var(--brume); border: 1px solid var(--acier);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
/* Miniature carrée recadrée sans déformer ; la photo en grand garde ses proportions (retour du test du 12/10/2026) */
.photo img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.photo.grande { width: 100%; max-width: 26rem; cursor: default; aspect-ratio: auto; height: auto; max-height: 70vh; object-fit: contain; }
.liste-ordonnee { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; min-height: 3rem; }
.liste-ordonnee li { display: flex; align-items: center; gap: .6rem; background: var(--brume); border-radius: 10px; padding: .5rem .6rem .5rem .9rem; }
.liste-ordonnee li span { flex: 1; font-weight: 500; }
.liste-ordonnee button { background: var(--blanc); border: 1px solid var(--ardoise); border-radius: 8px; padding: .3rem .55rem; font: 600 .85rem/1 var(--texte); cursor: pointer; color: var(--nuit); }
#colonnes-choisies [data-deplacer="ajouter"], #colonnes-disponibles [data-deplacer="monter"],
#colonnes-disponibles [data-deplacer="descendre"], #colonnes-disponibles [data-deplacer="retirer"] { display: none; }

/* Fenêtres de confirmation */
dialog {
  border: 0; border-radius: 18px; padding: 0; width: min(32rem, calc(100% - 2rem)); color: var(--nuit);
  box-shadow: 0 0 0 2px var(--nuit), 8px 8px 0 0 var(--nuit);
}
dialog::backdrop { background: rgba(11,18,32,.55); }
dialog .dialog-contenu { padding: 1.75rem; display: grid; gap: 1rem; }
dialog h2 { font-size: 1.35rem; }
dialog p { color: var(--ardoise); }
dialog .actions { justify-content: flex-end; margin-top: .5rem; }

/* Rapport PDF (aperçu d'une page A4) */
.feuille {
  width: min(52rem, 100%); margin-inline: auto; background: var(--blanc); border: 1px solid var(--acier);
  box-shadow: 0 10px 30px rgba(11,18,32,.12); padding: 3rem 3.25rem; display: grid; gap: 2rem;
}
.feuille h2 { font-size: 1.2rem; margin-bottom: .75rem; padding-bottom: .4rem; border-bottom: 3px solid var(--vert-scan); display: inline-block; }
.feuille table { font-size: .9rem; }
.feuille th, .feuille td { padding: .55rem .75rem; }

/* Étiquettes de QR codes à imprimer */
.planche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.etiquette-qr { border: 1px dashed var(--ardoise); border-radius: 12px; padding: 1.25rem; text-align: center; display: grid; gap: .5rem; justify-items: center; break-inside: avoid; }
.etiquette-qr img { width: 9rem; }
.etiquette-qr b { font: 700 1.1rem/1.2 var(--titre); }
.etiquette-qr span { font-size: .85rem; color: var(--ardoise); }
.etiquette-qr .logo-etiquette { width: 5.5rem; height: auto; margin-top: .25rem; }
.etiquette-qr.vide { border-style: dotted; border-color: var(--acier); }
/* Feuille A4 : 3 colonnes × 4 rangées = 12 étiquettes */
.feuille-a4 {
  width: min(42rem, 100%); aspect-ratio: 210 / 297; margin-inline: auto; padding: 1.5rem;
  grid-template-rows: repeat(4, 1fr); background: var(--blanc); border: 1px solid var(--acier);
  box-shadow: 8px 10px 0 -2px var(--acier);
}
.feuille-a4 .etiquette-qr { align-content: center; padding: .75rem; }
.feuille-a4 .etiquette-qr img { width: 7rem; }

@media print {
  .bo-entete, .bo-pied, .pas-imprime { display: none !important; }
  .bo-page { width: 100%; padding: 0; }
  .feuille-a4, .feuille { width: 100%; border: 0; box-shadow: none; padding: 0; }
}
@page { size: A4; margin: 10mm; }

/* ===== Adaptation aux petites largeurs ===== */
@media (max-width: 900px) {
  .acces { grid-template-columns: 1fr; }
  .acces-visuel { display: none; }
  .bo-entete-interieur { flex-wrap: wrap; gap: .5rem 1.5rem; padding: .75rem 0; }
  .bo-menu { order: 3; flex-basis: 100%; overflow-x: auto; }
  .bo-menu a { padding: .75rem .6rem; white-space: nowrap; }
  .bo-outils { flex-wrap: wrap; gap: .5rem 1rem; }
  .bo-utilisateur { text-align: left; }
}
/* Téléphone : une seule colonne, des marges plus petites */
@media (max-width: 600px) {
  /* Tableaux en fiches (titres de colonnes posés par scaninv.js) : une ligne = une fiche, boutons en bas */
  table.en-fiches, .en-fiches tbody, .en-fiches tr, .en-fiches td, .en-fiches tbody th { display: block; width: 100%; }
  .en-fiches thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .en-fiches tbody tr { padding: .9rem 1rem; }
  .en-fiches tbody tr + tr { border-top: 1px solid var(--acier); }
  .en-fiches tbody tr + tr td { border-top: 0; }
  .en-fiches td, .en-fiches tbody th { padding: .2rem 0; text-align: left; white-space: normal; }
  /* Deux colonnes égales, comme les boutons en bas de la fiche : libellés à gauche, valeurs alignées sur le 2e bouton */
  .en-fiches td[data-label] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .5rem; align-items: baseline; }
  .en-fiches td[data-label]::before { content: attr(data-label); font-size: .85rem; color: var(--ardoise); }
  .en-fiches td[data-label] { justify-items: start; }
  .en-fiches .pastille { white-space: normal; max-width: 100%; } /* « Sans nouvelles depuis 45 minutes » passe à la ligne */
  .en-fiches td[data-label]:empty { display: none; } /* rien à montrer (emplacement d'un utilisateur du back-office) */
  .en-fiches td[data-label] > * { grid-column: 2; }
  .en-fiches tr > :first-child[data-label] { display: block; font-weight: 600; padding-bottom: .4rem; }
  /* Le titre garde son libellé devant lui (« Ligne 12 »), sinon un numéro seul ne veut rien dire */
  .en-fiches tr > :first-child[data-label]::before { content: attr(data-label) " "; font-weight: 400; font-size: .85rem; color: var(--ardoise); }
  /* Boutons de la fiche alignés sur une grille : même largeur, même hauteur, texte centré */
  .en-fiches td.cellule-actions > * + * { margin-left: 0; }
  .en-fiches td.cellule-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding-top: .8rem; }
  .en-fiches td.cellule-actions .actions, .en-fiches td.cellule-actions > form { display: contents; }
  .en-fiches td.cellule-actions :is(a, button, summary) { width: 100%; margin: 0; justify-content: center; text-align: center; box-sizing: border-box; }
  .en-fiches td.cellule-actions details[open] { grid-column: 1 / -1; }
  /* Même taille pour tous : les boutons texte (« Supprimer ») prennent l'allure d'un bouton secondaire */
  .en-fiches td[data-label] > form { justify-self: stretch; }
  .en-fiches td[data-label] .bouton-secondaire { width: 100%; justify-content: center; }
  .en-fiches td[data-label] .bouton-texte { margin: .35rem 0; }
  .en-fiches td[data-label]:has(.bouton-texte) + td[data-label]:has(.bouton-texte) { border-top: 1px solid var(--acier); margin-top: .4rem; padding-top: .6rem; }
  .en-fiches td[data-label] .bouton-texte,
  .en-fiches td :is(.cellule-actions, [data-label]) :is(.bouton-secondaire, .bouton-texte),
  .en-fiches td.cellule-actions :is(.bouton-secondaire, .bouton-texte) {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: .45rem .6rem; border-radius: 10px;
    font: 600 .9rem/1.1 var(--texte); text-decoration: none; gap: .4rem;
    color: var(--b-texte, var(--nuit)); background: var(--b-fond, var(--blanc)); border: 2px solid var(--b-trait, var(--nuit));
  }
  .en-fiches .bouton-texte.ic::before { display: block; }
  .en-fiches td.cellule-actions details form :is(button) { width: auto; }
  .en-fiches td.cellule-actions:empty { display: none; }
  /* Case de sélection pour « Retirer la sélection » (BO-20) : dans le coin en haut à droite de la fiche, plus grande */
  .en-fiches tbody tr:has(.case-selection) { position: relative; }
  .en-fiches tbody tr:has(.case-selection) > :first-child { padding-right: 3rem; }
  .en-fiches .case-selection { position: absolute; top: .6rem; right: .6rem; padding: .4rem; }
  .en-fiches td.colonne-selection { display: contents; }
  .en-fiches .case-selection input { width: 1.6rem; height: 1.6rem; margin: 0; }
  .champs-cote, .choix-ligne, .grille-2, .grille-3 { grid-template-columns: 1fr; }
  .planche, .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulaire fieldset { padding: 1rem 1rem 1.25rem; }
  .carte { padding: 1.1rem; }
  .feuille { padding: 1.5rem 1.1rem; }
  .zone-depot { padding: 1.25rem 1rem; }
  .ajout-ligne input { flex-basis: 100%; }
  .ajout-ligne .erreur-champ { order: 0; margin-top: -.4rem; }
  .ajout-ligne .case { align-self: center; }
  .feuille header { flex-wrap: wrap; }
  .feuille table { display: block; overflow-x: auto; }  /* le tableau défile, pas la page */
}
@media (prefers-reduced-motion: reduce) {
  .viseur-deco .faisceau, .camera .faisceau { animation: none; }
  .bouton { transition: none; }
}


/* ===== Ajouts du back-office (hors maquettes) ===== */
/* QR codes générés en SVG par le serveur */
.etiquette-qr svg:not(.logo-etiquette), .qr-grand svg { display: block; width: 100%; height: auto; }
/* Petits formulaires dépliables (renommer, fusionner) */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] { flex-basis: 100%; }
.message.erreur::before { content: "!"; }

/* ===== Imports ===== */
/* Barre de l'import en cours (BO-30) : l'avancement exact n'est pas connu, elle va et vient */
.progression.en-cours span { width: 35%; animation: import-en-cours 1.6s ease-in-out infinite alternate; }
@keyframes import-en-cours { from { transform: translateX(0); } to { transform: translateX(186%); } }
@media (prefers-reduced-motion: reduce) { .progression.en-cours span { animation: none; width: 100%; } }
.zone-depot input[type="file"] { font: 400 .95rem/1.4 var(--texte); max-width: 100%; min-width: 0; }
.apercu .precision-colonne { display: block; }
.apercu .precision-colonne input { font: 400 .85rem/1.2 var(--texte); border: 2px solid var(--nuit); border-radius: 8px; padding: .35rem .4rem; min-width: 9rem; }

/* BO-19 : lignes d'un article inconnu */
.liste-lignes-inconnu { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.liste-lignes-inconnu li.annulee { color: var(--ardoise); }
.liste-lignes-inconnu .barre { text-decoration: line-through; }

/* BO-15 · Installation de l'appli à l'avance (RG-213) */
.installation-appli { margin: 0; }
.installation-appli h2 { font-size: 1.1rem; }
.installation-appli-contenu { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.qr-petit { flex: none; }
.qr-petit svg { display: block; width: 7rem; height: auto; }
.etapes-installation { margin: 1.25rem 0 0; padding-left: 1.25rem; display: grid; gap: .5rem; }

/* Texte centré (état vide d'une liste) */
.centre { text-align: center; }

/* Confirmation temporaire d'une action, en haut à droite (disparaît après quelques secondes) */
.toasts { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 50; display: grid; gap: .5rem; max-width: min(26rem, calc(100vw - 2.5rem)); }
.toast { box-shadow: 4px 4px 0 0 var(--nuit); transition: opacity .3s, transform .3s; }
.toast.masque { opacity: 0; transform: translateY(-.5rem); }
.messages-page:not(:empty) { margin-bottom: 2rem; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.inventaire-entete-droite { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Bandeau « Nouveaux comptages reçus · Actualiser » (scaninv.js) : en bas à droite (les confirmations sont en
   haut à droite), sur toute la largeur en bas sur téléphone ; la page ne bouge pas */
.bandeau-actualiser {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
  display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem .6rem 1.1rem;
  background: var(--nuit); color: var(--blanc); border-radius: 14px; box-shadow: 0 8px 24px rgba(11,18,32,.25);
  max-width: calc(100% - 2.5rem);
}
.bandeau-actualiser span { flex: 1; }
.bandeau-actualiser .bouton { white-space: nowrap; }
.bandeau-actualiser .fermer {
  flex: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent;
  color: var(--blanc); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.bandeau-actualiser .fermer:hover { background: rgba(255,255,255,.12); }
.bandeau-actualiser button:focus-visible { outline-color: var(--blanc); }
@media (max-width: 600px) { .bandeau-actualiser { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; } }
/* BO-20 : « Trier par » remplace les en-têtes cliquables quand le tableau devient des fiches (téléphone) */
.tri-telephone { display: none; }
@media (max-width: 600px) { .tri-telephone { display: block; margin-bottom: 1rem; } }