/* Mise en page des écrans. Composants : bundle.css (classes na-*). Valeurs par tokens uniquement. */
.page-contenu { padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.page-titre { margin: 0; }
.page-espace { flex: 1; }
.page-langues { display: flex; gap: var(--space-1); }
.page-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.page-liste a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 24px; color: var(--ink); }
.page-entete { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.page-grille { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-4); align-items: start; }
.page-colonne { display: flex; flex-direction: column; gap: var(--space-4); }
.page-ligne { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.page-pied { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--line); }
.page-discret { color: var(--ink-muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Liste native : le menu déroulant de Chrome reprend le display flex et la hauteur de ligne 1 de .na-input.
   Chrome sous Windows plafonne la largeur du menu (environ 1 535 px) sans recaler le texte : au-delà, les
   options sont décalées vers la gauche et tronquées. La liste reste donc bien en dessous. */
select.na-input { display: block; line-height: normal; max-width: 40rem; }
select.na-input option { line-height: normal; }
@media (max-width: 800px) { .page-grille { grid-template-columns: 1fr; } }
@media print {
  .na-topbar, .page-imprimer { display: none; }
  .page-contenu { padding: 0; }
}
.page-droite { text-align: right; }
.page-sans-cadre { border: 0; margin: 0; padding: 0; min-width: 0; }
.page-legende { padding: 0; font-size: calc(var(--na-fs) - 1px); font-weight: 600; color: var(--ink-muted); margin-bottom: 6px; }
.page-choix { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; cursor: pointer; }
.page-sans-marge { padding: 0; display: flex; flex-direction: column; }
.page-saisie { padding: var(--space-3); display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.page-champ-saisie { max-width: 360px; position: relative; }
/* Numérisation sur poste de bureau : ménage et contenant à gauche (2/5), situation à droite (3/5).
   La situation reste à l'écran et défile dans sa carte ; au téléphone, une seule colonne. */
.page-numerisation { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-4); align-items: start; }
.page-numerisation-gauche { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.page-numerisation-droite { position: sticky; top: var(--space-4); min-width: 0; }
.page-numerisation-droite > .na-panel { max-height: calc(100vh - 2 * var(--space-4)); overflow: auto; }
@media (max-width: 800px) {
  .page-numerisation { grid-template-columns: 1fr; }
  .page-numerisation-droite { position: static; }
  .page-numerisation-droite > .na-panel { max-height: none; }
}
.page-propositions { position: absolute; top: 100%; left: 0; z-index: 2; box-shadow: 0 6px 18px rgba(20, 32, 42, .14); }
.page-confirmation { padding: 0 var(--space-3); min-height: var(--space-4); }
/* Planche d'étiquettes : dimensions en mm posées par la page, depuis settings.ETIQUETTES. */
.page-planche { display: grid; justify-content: start; background: var(--surface-raised); }
.page-etiquette { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); overflow: hidden; border: 1px dashed var(--line); background: var(--surface-raised); color: var(--ink); }
.page-code-barres svg { display: block; max-width: 100%; height: auto; }
@media print {
  .page-etiquette { border: 0; }
  .page-planche { background: none; }
}
/* Région annoncée aux lecteurs d'écran, invisible à l'écran. */
.page-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-acquitter { flex-wrap: nowrap; justify-content: flex-end; }
.page-acquitter .na-input { width: auto; }

/* Checklist QC : les segments Conforme / Échec / Sans objet sont des boutons radio. */
.page-seg label { padding: 4px 12px; font-weight: 600; font-size: calc(var(--na-fs) - 2px); color: var(--ink-muted); cursor: pointer; }
.page-seg label + label { border-left: 1.5px solid var(--ink-muted); }
.page-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.page-seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.page-seg label.is-pass:has(input:checked) { background: var(--status-ok); color: var(--surface); }
.page-seg label.is-fail:has(input:checked) { background: var(--status-fail); color: var(--surface); }
.page-seg label.is-not_applicable:has(input:checked) { background: var(--ink-muted); color: var(--surface); }

/* Visionneuse : l'image porte le filigrane, pas de clic droit ni de glisser utiles. */
.page-visionneuse { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--line); user-select: none; -webkit-user-drag: none; }

/* Filtres de recherche : grille qui passe sur une colonne au téléphone. */
.page-filtres { padding: var(--space-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); align-items: end; }

/* Checklist : le segment garde sa largeur, le commentaire prend la ligne. */
.page-seg { justify-self: start; width: max-content; }

/* Téléphone : barre du haut sur plusieurs lignes, menu défilant ; un tableau défile dans son panneau. */
@media (max-width: 800px) {
  .na-topbar { flex-wrap: wrap; height: auto; padding: var(--space-2) var(--space-4); gap: var(--space-2); }
  .na-nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .na-nav a { white-space: nowrap; }
  .page-entete { flex-wrap: wrap; }
}
.na-panel:has(> .na-table) { overflow-x: auto; }

/* Pilotage : indicateurs puis tableaux, en grilles qui passent sur une colonne au téléphone. */
.page-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.page-tableaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }
.page-tableaux h2 { margin: 0; padding: var(--space-3); }
/* Chemin du paquet sur le serveur : il se coupe plutôt que de déborder au téléphone. */
.page-chemin { white-space: normal; overflow-wrap: anywhere; }
/* Zone d'erreur htmx de base.html : masquée tant qu'aucune requête n'échoue. */
.page-erreur[hidden] { display: none; }