/*
  Outil « Émargement » : feuille propre à l'outil, chargée après tokens.css et style.css.
  Classes préfixées « .em- » (et leurs descendants) ; ne redéfinit ni jeton ni classe partagée.
  Aucune couleur hors jetons, aucune couleur politique.
*/

/* ---------------------------------------------------------------- coquille */
/* la coquille garde le rail latéral de D.A.T.A sur grand écran (style.css : .app padding-left à 720 px) */
.em-app #toast-root { left: var(--s4); right: var(--s4); }
.em-main { display: flex; flex-direction: column; gap: var(--s3); padding-bottom: 96px; }
.em-notes { display: flex; flex-direction: column; gap: var(--s2); }
.em-notes:empty { display: none; }
.em-screen { gap: var(--s3); }
.em-compteur { display: block; margin-top: 4px; }
.em-nav .nav-set { display: contents; }
.em-h3 { font-size: var(--fs-15); font-weight: 650; margin: var(--s2) 0 0; }
.em-liste { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-13); color: var(--ink-2); }
.em-liste li::marker { color: var(--muted); }
.em-controles li { list-style: none; margin-left: -22px; }
.em-form { display: flex; flex-direction: column; gap: var(--s4); }
.em-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.em-champs .field input, .em-champs .field select { min-height: 40px; }
.em-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--ink-2); }
.em-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.em-erreur { color: var(--danger); font-size: var(--fs-13); font-weight: 600; margin: 0; }
.em-ok { color: var(--ok); font-size: var(--fs-13); font-weight: 600; margin: 0; }
.em-muted { color: var(--muted); font-size: var(--fs-12); }
.em-menu { display: flex; flex-direction: column; gap: var(--s2); }
.em-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--fill); color: var(--ink-2); font-size: var(--fs-12); font-weight: 600; line-height: 1.6; white-space: nowrap; }
.em-badge.is-ok { background: var(--ok-soft); color: var(--ok); }
.em-badge.is-warn { background: var(--warn-soft); color: var(--warn); }
.em-badge.is-danger { background: var(--danger-soft); color: var(--danger); }
.em-badge.is-muted { color: var(--muted); }

/* ---------------------------------------------------------------- progression */
.em-progression { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.em-progression > div { height: 100%; background: var(--accent); transition: width .2s; }

/* ---------------------------------------------------------------- tableaux */
.em-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--s5)); padding: 0 var(--s5); }
.em-table { width: 100%; border-collapse: collapse; font-size: var(--fs-12); }
.em-table th, .em-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.em-table th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.em-table td.num { font-family: var(--font-num); font-weight: 600; }
.em-table tr.is-douteuse td { background: var(--warn-soft); }
.em-table tr.is-relue td { background: var(--ok-soft); }
/* Note avec bouton (conseil de la prise de vue) : sur un écran étroit, le bouton passe sous le texte. */
#ecran .note { flex-wrap: wrap; }
#ecran .note .note-text { flex: 1 1 220px; }
/* Tableau de la carte « Fiabilité de la lecture » : nombres alignés à droite, total en gras. */
.em-table-mesures { font-size: var(--fs-13); }
.em-table-mesures th.num, .em-table-mesures td.num { text-align: right; white-space: nowrap; }
.em-table-mesures tr.is-total td { font-weight: 650; border-bottom: 0; }
.em-vote.is-ok { color: var(--ok); font-weight: 700; }
.em-vote.is-warn { color: var(--warn); font-weight: 700; }
.em-vote.is-muted { color: var(--muted); }
.em-apercu { display: block; width: 100%; height: auto; border-radius: var(--r-8); border: 1px solid var(--line); }
.em-dernieres { display: flex; flex-direction: column; gap: var(--s3); }

/* ---------------------------------------------------------------- prise de vue */
.em-camera { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 70vh; border-radius: var(--r-12); overflow: hidden; background: #000; }
.em-camera video { width: 100%; height: 100%; object-fit: cover; }
.em-camera-cadre { position: absolute; inset: 6%; border: 2px dashed rgba(255, 255, 255, .8); border-radius: 8px; pointer-events: none; }
.em-camera-etat { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: rgba(0, 0, 0, .55); color: #fff; font-size: var(--fs-13); }
.em-camera-etat.is-net { color: #9ff0c4; }
.em-camera-etat.is-mauvais { color: #ffb4ad; }
/* Cadrage : contour de la feuille repérée et cadre de visée, rouges (mal cadré) puis verts (bon à prendre). */
.em-camera-calque { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.em-camera-page { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke 160ms var(--ease); }
.em-camera-cadre { transition: border-color 160ms var(--ease); }
.em-camera[data-cadrage="mauvais"] .em-camera-cadre { border: 3px solid #ff5a52; }
.em-camera[data-cadrage="mauvais"] .em-camera-page { stroke: #ff5a52; }
.em-camera[data-cadrage="bon"] .em-camera-cadre { border: 3px solid #34c759; }
.em-camera[data-cadrage="bon"] .em-camera-page { stroke: #34c759; }
@media (prefers-reduced-motion: reduce) { .em-camera-page, .em-camera-cadre { transition: none; } }
.em-camera-actions { flex-direction: column; align-items: stretch; }

/* ---------------------------------------------------------------- relecture */
.em-barre { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.em-barre .segmented { flex: 1; min-width: 220px; }
.em-relecture { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 900px) { .em-relecture { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } .em-image-page { position: sticky; top: calc(var(--cc-header-h, 92px) + 8px); } }
.em-image-page { background: var(--surface); border-radius: var(--r-12); box-shadow: var(--shadow-1); overflow: hidden; }
.em-image-page img { display: block; width: 100%; height: auto; }
.em-lignes { display: flex; flex-direction: column; }
.em-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-13); }
.em-ligne:last-child { border-bottom: 0; }
.em-ligne.is-active { background: var(--warn-soft); margin: 0 calc(-1 * var(--s3)); padding: var(--s3); border-radius: var(--r-8); }
.em-ligne.is-relue .em-ligne-texte { color: var(--ink-2); }
.em-ligne-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.em-ligne-votes { display: flex; flex-wrap: wrap; gap: 6px; }
.em-ligne-boutons { display: flex; flex-direction: column; gap: 6px; }
/* « Erreur » : une case par champ, la lecture de la machine, puis la bonne valeur à taper. */
.em-ligne.is-erreur { grid-template-columns: minmax(0, 1fr); }
.em-ligne.is-erreur .em-ligne-boutons { flex-direction: row-reverse; justify-content: flex-start; gap: var(--s2); }
.em-erreur { display: flex; flex-direction: column; gap: var(--s2); }
.em-erreur-champ { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s3); }
.em-erreur-champ .em-check { flex: 1 1 auto; max-width: 100%; min-height: 40px; cursor: pointer; }
.em-erreur-champ .em-check input { flex: none; }
.em-erreur-libelle { flex: none; }
.em-erreur-lu { min-width: 0; color: var(--ink); font-weight: 600; overflow-wrap: break-word; }
.em-erreur-saisie { flex: 2 1 220px; flex-direction: row; align-items: center; gap: var(--s2); }
.em-erreur-saisie input, .em-erreur-saisie select { flex: 1 1 auto; min-width: 0; min-height: 40px; }
.em-erreur-fleche { flex: none; color: var(--muted); }
.em-ligne-boutons .btn { padding: 8px 12px; font-size: var(--fs-13); min-width: 96px; }

/* ---------------------------------------------------------------- classeur */
.em-classeur { display: flex; flex-direction: column; gap: var(--s3); }

@media print {
  .app-header, .em-nav, .em-notes, .btn, #sheet-root, #toast-root { display: none !important; }
}

/* ---------------------------------------------------------------- outil en développement (porte d'accès) */
/* Le « o » de « développement » est un bouton sans aucune apparence de bouton. */