/* 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); }
/* Bouton « ? Aide » du bandeau : pastille ronde, toujours suivie du mot. */
.page-aide { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 24px; }
.page-aide-rond { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: var(--radius-pill); font-weight: 600; line-height: 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; } }
/* Bandeau du bac à sable (réglage BAC_A_SABLE), sur chaque écran. À l'impression, la fiche du
   contenant porte sa propre mention (.page-fiche-bac) : le bandeau décalerait la feuille A5. */
.page-bac { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-6); background: var(--status-warn); color: var(--surface-raised); }
@media print {
  .na-topbar, .page-bac, .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; }
/* Champ de recherche avec autocomplétion (composants/suggestions.html). */
.page-suggestions { position: relative; }
.page-suggestions .page-propositions { min-width: 100%; width: max-content; }
.page-suggestions [role=option] { cursor: pointer; }
.page-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 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); }
/* N° du ménage : la liste prend la largeur du nom et de l'emplacement, sans dépasser l'écran. */
.page-champ-saisie .page-propositions { min-width: 100%; width: max-content; max-width: calc(100vw - 2 * var(--space-4)); }
.page-propositions li { align-items: center; flex-wrap: wrap; }
.page-confirmation { padding: 0 var(--space-3); min-height: var(--space-4); }
/* Fiche du contenant : une feuille A5, bloc écrit de 138 × 200 mm centré (marge de 5 mm, dans la zone
   imprimable de toute imprimante). Dimensions physiques du support, en mm. */
.page-fiches { display: flex; flex-direction: column; gap: var(--space-4); }
.page-fiche { box-sizing: border-box; width: 148mm; height: 210mm; padding: 5mm; display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden; border: 1px dashed var(--line); background: var(--surface-raised); color: var(--ink); }
.page-fiche-titre { margin: 0; font-size: calc(var(--na-fs) * 2.5); line-height: 1.2; font-weight: 700; }
.page-fiche-liste { flex: 1; display: grid; grid-template-columns: repeat(var(--colonnes), 1fr); grid-auto-rows: min-content; column-gap: var(--space-3); row-gap: var(--space-1); }
.page-fiche-tiroir, .page-fiche-vide { grid-column: 1 / -1; margin: 0; }
.page-fiche-pied { display: flex; justify-content: space-between; margin: 0; }
.page-code-barres svg { display: block; max-width: 100%; height: auto; }
@media print {
  .page-fiches { gap: 0; }
  .page-fiche { border: 0; break-after: page; }
  .page-fiche:last-child { break-after: auto; }
}
/* 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; }

/* Menu : un libellé ne passe jamais sur deux lignes ; trop d'écrans, les onglets passent sur une
   seconde rangée (jamais un onglet caché derrière un défilement), et la barre grandit avec eux. */
.na-topbar { height: auto; padding-block: var(--space-2); }
.na-nav { min-width: 0; flex-wrap: wrap; row-gap: var(--space-1); }
.na-nav a { white-space: nowrap; }

/* 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%; flex-wrap: nowrap; overflow-x: auto; }
  .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; }
/* Fichiers du dossier dans la colonne de droite : le nom du fichier se coupe (page-chemin), le texte d'une
   anomalie passe à la ligne, plutôt que de pousser la colonne Corriger hors du cadre. */
.page-fichiers .page-liste .na-badge { white-space: normal; }
/* Arbre du contenant en cours (spec 2026-11-05) : un niveau par retrait, défilement dans la carte. */
.page-arbre { display: flex; flex-direction: column; gap: var(--space-2); max-height: 60vh; overflow: auto; }
.page-arbre ul { list-style: none; margin: 0; padding: 0; }
.page-arbre ul[role="group"] { padding-left: var(--space-4); }
.page-arbre [role="treeitem"]:focus-visible { outline: none; }
.page-arbre [role="treeitem"]:focus-visible > .page-arbre-ligne { outline: 2px solid var(--accent); outline-offset: -2px; }
.page-arbre-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); min-height: 28px; padding: 2px var(--space-1); border-radius: var(--radius-atelier); cursor: pointer; }
.page-arbre-ligne:hover { background: var(--surface-sunken); }
.page-arbre-ligne.is-active { background: var(--accent-soft); }
.page-arbre-ligne .na-badge { white-space: normal; }
.page-arbre-chevron { display: inline-grid; place-items: center; width: 24px; min-height: 24px; flex: none; color: var(--ink-muted); }
.page-arbre-chevron .na-ico { width: 16px; height: 16px; transition: transform 120ms; }
.page-arbre [aria-expanded="true"] > .page-arbre-ligne > .page-arbre-chevron .na-ico { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .page-arbre-chevron .na-ico { transition: none; } }
.page-detail { padding: var(--space-3); }
/* Écran du contrôle qualité (décision du 05/11/2026) : arbre à gauche, panneau du contenant ou du ménage
   à droite, pop-up de traitement d'un document. */
.page-qc { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.page-qc-filtres { align-items: flex-end; flex-wrap: nowrap; }
.page-qc-filtres .na-field { width: auto; }
.page-qc-filtres select.na-input { min-width: 220px; }
.page-qc-arbre { display: flex; flex-direction: column; gap: var(--space-1); max-height: calc(100vh - 160px); overflow: auto; position: sticky; top: var(--space-4); }
.page-qc-lieu { margin: var(--space-2) 0 0; font-size: calc(var(--na-fs) - 1px); color: var(--ink-muted); }
.page-qc-noeuds { list-style: none; margin: 0; padding: 0; }
.page-qc-branche { padding-left: var(--space-4); }
.page-qc-branche[hidden] { display: none; }
.page-qc-noeud { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 30px; padding: 2px var(--space-2); border: 0; background: none; color: var(--ink); font: inherit; text-align: left; border-radius: var(--na-radius); cursor: pointer; text-decoration: none; }
.page-qc-noeud:hover { background: var(--surface-sunken); }
.page-qc-noeud.is-active { background: var(--accent-soft); font-weight: 600; }
.page-qc-noeud .na-ico { width: 16px; height: 16px; flex: none; color: var(--ink-muted); }
.page-qc-noeud[aria-expanded="true"] .page-arbre-chevron .na-ico { transform: rotate(90deg); }
.page-qc-lib { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-qc-compte { font: 600 calc(var(--na-fs) - 2px)/18px var(--font-mono); min-width: 22px; text-align: center; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--status-warn); flex: none; }
.page-qc-compte.is-zero { color: var(--status-ok); }
.page-qc-tire { font: 600 calc(var(--na-fs) - 3px)/16px var(--na-font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-pill); padding: 0 6px; flex: none; }
.page-qc-panneau { padding: 0; min-height: 60vh; display: flex; flex-direction: column; }
.page-qc-tete { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.page-qc-tete h2 { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.page-qc-menage { display: flex; flex-direction: column; flex: 1; }
.page-qc-corps { display: grid; grid-template-columns: minmax(0, 1fr) 380px; flex: 1; }
.page-qc-docs { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; }
.page-qc-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.page-qc-doc > .page-ligne, .page-qc-mini { grid-column: 1; }
.page-qc-doc-nom { display: flex; gap: var(--space-2); align-items: center; font-weight: 600; min-width: 0; }
.page-qc-doc-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: var(--space-2); }
.page-qc-mini { display: flex; gap: 4px; align-items: center; overflow: hidden; }
.page-qc-mini img { width: 40px; height: auto; border: 1px solid var(--line); border-radius: min(var(--na-radius), 4px); background: var(--surface-raised); }
.page-qc-mini img.is-signalee, .page-qc-page img.is-signalee { border: 2px solid var(--status-fail); }
.page-qc-controle { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.page-qc-tete-controle { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.page-qc-verdict { margin-top: var(--space-2); border-top: 1px solid var(--line); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.page-qc-decision { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.page-qc-decision .page-chemin { font-size: calc(var(--na-fs) - 1px); }
/* Pop-up : une seule ombre, celle de la fenêtre au-dessus de la page. */
.page-qc-pop { width: min(1280px, 96vw); height: min(880px, 94vh); padding: 0; border: 1px solid var(--line); border-radius: var(--na-radius); background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 28%, transparent); }
.page-qc-pop::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
/* Pop-up en colonne : zone d'erreur éventuelle, puis le contenu qui prend la hauteur restante. */
.page-qc-pop[open] { display: flex; flex-direction: column; }
#pop-contenu { flex: 1; min-height: 0; }
.page-qc-pop-corps { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; }
.page-qc-pop-tete, .page-qc-pop-pied { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); }
.page-qc-pop-tete { border-bottom: 1px solid var(--line); }
.page-qc-pop-tete > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-qc-pop-pied { border-top: 1px solid var(--line); }
.page-qc-pop-milieu { display: grid; grid-template-columns: 120px minmax(0, 1fr) 400px; min-height: 0; }
.page-qc-pages { overflow: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); border-right: 1px solid var(--line); background: var(--surface-sunken); }
.page-qc-page { display: flex; flex-direction: column; gap: 4px; padding: 2px; border: 0; background: none; cursor: pointer; border-radius: var(--na-radius); }
.page-qc-page img { width: 88px; height: auto; border: 1px solid var(--line); background: var(--surface-raised); }
.page-qc-page[aria-current="true"] img { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.page-qc-visu { position: relative; display: flex; flex-direction: column; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); overflow: auto; background: var(--surface-sunken); min-height: 0; }
.page-qc-visu-info { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); width: 100%; }
.page-qc-image { max-height: calc(100% - 48px); width: auto; }
.page-qc-traiter { overflow: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); border-left: 1px solid var(--line); background: var(--surface-raised); }
.page-qc-section { margin: 0 0 var(--space-2); font-size: calc(var(--na-fs) - 1px); font-weight: 500; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.page-qc-traiter section { display: flex; flex-direction: column; gap: var(--space-2); }
.page-qc-carte { border: 1px solid var(--line); border-radius: var(--na-radius); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface); }
.page-qc-carte.is-global { border-left: 3px solid var(--accent); }
.page-qc-carte.is-rescan { border-left: 3px solid var(--status-fail); }
.page-qc-carte.is-decision { border: 1.5px solid var(--ink-muted); }
.page-qc-carte .na-input { flex: 1; min-width: 160px; width: auto; }
.page-qc-lien { border: 0; background: none; padding: 2px; min-height: 24px; color: var(--accent); cursor: pointer; font-size: calc(var(--na-fs) - 1px); }
.page-qc-pop kbd { font: 500 calc(var(--na-fs) - 2px) var(--font-mono); border: 1px solid var(--ink-muted); border-radius: min(var(--na-radius), 4px); padding: 0 4px; color: var(--ink-muted); }
/* Chargement du panneau : squelettes à la place du panneau pendant la requête (indicateur htmx). */
.page-qc-zone { min-width: 0; }
.page-qc-chargement { display: none; min-height: 60vh; }
.page-qc-zone.htmx-request .page-qc-chargement { display: flex; flex-direction: column; gap: var(--space-3); }
.page-qc-zone.htmx-request #panneau { display: none; }
.page-qc .na-btn.htmx-request, .page-qc-pop .htmx-request .na-btn, .page-qc-pop .na-btn.htmx-request { opacity: .6; cursor: progress; }
.page-qc-pop .page-erreur { margin: var(--space-3) var(--space-4) 0; }
@media (max-width: 1100px) {
  .page-qc { grid-template-columns: 1fr; }
  .page-qc-arbre { position: static; max-height: 40vh; }
  .page-qc-corps { grid-template-columns: 1fr; }
  .page-qc-docs { border-right: 0; }
  .page-qc-pop-milieu { grid-template-columns: 1fr; overflow: auto; }
  .page-qc-pages { flex-direction: row; border-right: 0; }
}
.page-nav-compte { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: calc(var(--na-fs) - 2px); font-weight: 600; }
.page-nav-compte[hidden] { display: none; }

/* Écran « À traiter » de l'archiviste : cartes de compteurs, puis colonne d'ouverture et de journal. */
.page-cote { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
.page-taches { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.page-tache { display: flex; flex-direction: column; gap: var(--space-2); }
.page-tache-tete { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-size: calc(var(--na-fs) - 1px); }
.page-tache-tete .na-ico { width: 18px; height: 18px; }
.page-tache .na-kpi-value { color: var(--status-warn); }
.page-tache.is-zero .na-kpi-value { color: var(--status-ok); }
.page-tache .na-btn { align-self: flex-start; margin-top: auto; text-decoration: none; }
.page-ouvrir { display: flex; gap: var(--space-2); align-items: flex-end; }
.page-ouvrir .na-field { flex: 1; }
.page-trouve { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.page-trouve .na-btn { text-decoration: none; }
.page-journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.page-journal li { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--na-fs) - 1px); }
.page-journal li:last-child { border-bottom: 0; }
.page-journal li > :first-child { white-space: nowrap; }
@media (max-width: 800px) { .page-cote { grid-template-columns: 1fr; } }

/* Doublons comparés côte à côte (#pop-doublon) : deux faces, puis les décisions sur toute la largeur. */
.page-doublon-pop { width: min(1280px, 96vw); max-height: 94vh; padding: 0; border: 1px solid var(--line); border-radius: var(--na-radius); background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 28%, transparent); }
.page-doublon-pop::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.page-doublon-pop[open] { display: flex; flex-direction: column; }
.page-doublon-pop .page-erreur { margin: var(--space-3) var(--space-4) 0; }
.page-doublon-pop kbd { font: 500 calc(var(--na-fs) - 2px) var(--font-mono); border: 1px solid var(--ink-muted); border-radius: min(var(--na-radius), 4px); padding: 0 4px; color: var(--ink-muted); }
#pop-doublon-contenu { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-doublon-corps { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.page-doublon-corps > .na-state, .page-doublon-annonce { margin: var(--space-3) var(--space-4) 0; }
.page-doublon-annonce { align-self: flex-start; }
.page-doublon-tete, .page-doublon-pied { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); }
.page-doublon-tete { border-bottom: 1px solid var(--line); }
.page-doublon-tete > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-doublon-pied { border-top: 1px solid var(--line); flex-wrap: wrap; }
.page-doublon-milieu { display: grid; grid-template-columns: 1fr 1fr; overflow: auto; flex: 1; min-height: 0; }
.page-doublon-face { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.page-doublon-face + .page-doublon-face { border-left: 1px solid var(--line); }
.page-doublon-face h2 { margin: 0; font-size: calc(var(--na-fs) - 1px); font-weight: 500; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.page-doublon-code { display: flex; gap: var(--space-2); align-items: center; }
.page-doublon-dl { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-1) var(--space-3); margin: 0; font-size: calc(var(--na-fs) - 1px); }
.page-doublon-dl dt { color: var(--ink-muted); }
.page-doublon-dl dd { margin: 0; display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }
.page-doublon-attente { margin: 0; border: 1.5px dashed var(--line); border-radius: var(--na-radius); padding: var(--space-3); color: var(--ink-muted); font-size: calc(var(--na-fs) - 1px); }
.page-doublon-decisions { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-raised); }
.page-doublon-refus { flex-direction: row; align-items: center; gap: var(--space-3); }
.page-doublon-refus p { margin: 0; flex: 1; }
.page-doublon-choix { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.page-doublon-option { display: flex; gap: var(--space-3); align-items: flex-start; border: 1.5px solid var(--line); border-radius: var(--na-radius); padding: var(--space-3); background: var(--surface); cursor: pointer; }
.page-doublon-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.page-doublon-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-doublon-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.page-doublon-option input { margin-top: 3px; accent-color: var(--accent); }
.page-doublon-option b { display: block; margin-bottom: 2px; }
.page-doublon-option span span { display: block; font-size: calc(var(--na-fs) - 1px); color: var(--ink-muted); }
.page-doublon-option em { display: block; font-style: normal; margin-top: var(--space-2); font-size: calc(var(--na-fs) - 1px); color: var(--ink); }
.page-doublon-note { margin: 0; font-size: calc(var(--na-fs) - 2px); color: var(--ink-muted); }
.page-doublon-lien { text-decoration: none; }
.page-doublon-pop .na-btn.htmx-request, .page-doublon-pop .htmx-request .na-btn { opacity: .6; cursor: progress; }
@media (max-width: 900px) {
  .page-doublon-milieu, .page-doublon-choix { grid-template-columns: 1fr; }
  .page-doublon-face + .page-doublon-face { border-left: 0; border-top: 1px solid var(--line); }
}
.page-doublon-face .na-table th.page-droite { text-align: right; }
/* Hors liste en arbre (écran de l'archiviste) : arbre à gauche (classes page-qc-*), étapes
   numérotées du dossier à droite, visionneuse dans #pop-visu. */
[x-cloak] { display: none !important; }
.page-hors-corps { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.page-hors-corps > .na-state, .page-hors-annonce { margin: var(--space-3) var(--space-4) 0; }
.page-hors-annonce { align-self: flex-start; }
.page-hors-fil { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; font-size: calc(var(--na-fs) - 1px); color: var(--ink-muted); }
.page-hors-fil .na-ico { width: 16px; height: 16px; }
.page-hors-contenant { cursor: default; }
.page-hors-contenant:hover { background: none; }
.page-etape { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--line); }
.page-etape h3 { margin: 0 0 var(--space-2); font-size: var(--na-fs); }
.page-etape-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ink-muted); font: 600 calc(var(--na-fs) - 2px) var(--font-mono); color: var(--ink-muted); }
.page-etape.is-faite .page-etape-num { border-color: var(--status-ok); color: var(--status-ok); }
.page-etape.is-faite .page-etape-num::before { content: "✓"; }
.page-etape.is-faite .page-etape-num span { display: none; }
.page-etape.is-bloquee { opacity: .55; }
.page-etape-note { margin: 0; font-size: calc(var(--na-fs) - 2px); color: var(--ink-muted); }
.page-etape-ligne { margin-top: var(--space-2); }
.page-etape .page-ligne select.na-input { flex: 1; max-width: 360px; width: auto; }
.page-hors-vignettes { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.page-hors-vignette { display: flex; flex-direction: column; gap: 4px; align-items: center; max-width: 160px; padding: 2px; border: 0; background: none; color: var(--ink-muted); font-size: calc(var(--na-fs) - 2px); cursor: pointer; border-radius: var(--na-radius); }
span.page-hors-vignette { cursor: default; }
.page-hors-vignette img { width: 64px; height: auto; border: 1px solid var(--line); background: var(--surface-raised); }
.page-hors-vignette .na-code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.page-hors-ids { min-width: 0; }
.page-hors-ids .na-table { width: 100%; margin-top: var(--space-2); }
.page-hors-actions { justify-content: flex-end; flex-wrap: nowrap; }
.page-hors-pied { display: flex; justify-content: flex-end; padding: var(--space-3) var(--space-4); margin-top: auto; }
.page-visu-pop #pop-visu-contenu { flex: 1; min-height: 0; }
.page-visu-corps { grid-template-rows: auto 1fr auto; }
.page-visu-milieu { display: grid; grid-template-columns: 120px minmax(0, 1fr); min-height: 0; }
#panneau-hors .na-btn.htmx-request, #panneau-hors .htmx-request .na-btn, .page-visu-pop .na-btn.htmx-request { opacity: .6; cursor: progress; }
@media (max-width: 1100px) {
  .page-visu-milieu { grid-template-columns: 1fr; overflow: auto; }
}

/* Import : pastilles de nature (pointillé = déplace des fichiers) et confirmation. */
.page-puces { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.page-puce { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; }
.page-puce b { font: 600 calc(var(--na-fs) - 1px) var(--font-mono); color: var(--ink-muted); }
.page-puce[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.page-puce:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-puce.is-fichiers { border-style: dashed; }
dialog.page-conf { width: min(520px, 94vw); padding: 0; border: 1px solid var(--line); border-radius: var(--na-radius); background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 28%, transparent); }
dialog.page-conf::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.page-conf-corps { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.page-conf-corps h2 { margin: 0; font-size: calc(var(--na-fs) + 2px); }
.page-conf-corps ul { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: 4px; }
.page-conf-corps p { margin: 0; }
.page-conf-pied { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--surface-raised); }
/* Dépôt en cours : barre par fichier (na-kpi-bar), cercle dans le bouton. Sans rotation si moins de mouvement. */
.page-envoi { display: flex; align-items: center; gap: var(--space-2); }
.page-envoi .na-kpi-bar { flex: 1; min-width: 80px; margin-top: 0; }
.page-envoi-valeur { min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.page-envoi-verrou { opacity: .6; pointer-events: none; }
.na-btn[aria-busy=true] { cursor: progress; }
.page-tourne { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
  .page-tourne { animation: page-tourne .8s linear infinite; }
  @keyframes page-tourne { to { transform: rotate(360deg); } }
}

/* Pop-up « Imprimer la fiche » (#pop-fiche, js/fiche.js) : la feuille A5 entière en largeur, défilement
   vertical pour les pages suivantes. L'iframe s'imprime seule. */
.page-fiche-pop { width: min(calc(148mm + 4 * var(--space-4)), 96vw); max-height: 94vh; padding: 0; border: 1px solid var(--line); border-radius: var(--na-radius); background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 28%, transparent); }
.page-fiche-pop::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.page-fiche-pop[open] { display: flex; flex-direction: column; }
.page-fiche-pop [hidden] { display: none; }
.page-fiche-pop-tete, .page-fiche-pop-pied { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); }
.page-fiche-pop-tete { border-bottom: 1px solid var(--line); }
.page-fiche-pop-tete > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-fiche-pop-pied { border-top: 1px solid var(--line); }
.page-fiche-pop-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4); overflow: auto; }
.page-fiche-pop iframe { display: block; width: 100%; height: min(calc(210mm + 2 * var(--space-4)), 70vh); border: 0; background: var(--surface-sunken); }
/* Aperçu dans l'iframe : la feuille centrée sur fond enfoncé ; à l'impression, la feuille seule. */
.page-apercu { margin: 0; padding: var(--space-4); background: var(--surface-sunken); }
.page-apercu .page-fiches { align-items: center; }
@media print { .page-apercu { padding: 0; background: none; } }

/* Pop-up « Aide » (#pop-aide, js/aide.js) : reprend le cadre du pop-up de la fiche, à la largeur du
   manuel (190 mm et ses marges d'écran) ; le manuel défile dans l'iframe. */
.page-aide-pop { width: min(calc(190mm + 32px + 2 * var(--space-4)), 96vw); height: 94vh; }
.page-aide-pop .page-fiche-pop-corps { padding: 0; overflow: hidden; }
.page-aide-pop .na-state { margin: var(--space-3) var(--space-4); }
.page-aide-pop iframe { flex: 1; width: 100%; height: auto; min-height: 0; background: var(--surface-raised); }