/* Billetterie HEVIOXO MMA : mise en page propre au site.
   Couleurs, polices, rayons et durées viennent du design system (ds/tokens). */

:root {
  /* Couleurs d'état pour le contrôle à l'entrée et les messages : hors charte, réservées aux retours système. */
  /* Vert un peu plus foncé que l'ancien #128A43 : le texte blanc reste lisible (planche 00). */
  --etat-ok: #0F7A3A;
  --etat-ok-pale: #E3F4EA;
  --etat-alerte: #F08A00;
  --etat-alerte-pale: #FDF0DC;
  --etat-erreur: var(--hx-rouge);
  --etat-panne: var(--hx-gris-800);
}

/* Changement de page : la page quittée reste affichée jusqu'à ce que la suivante soit prête, puis fondu court
   (Chrome, Edge, Safari 18.2 et plus ; ailleurs, changement direct). Ce qui ne change pas, comme le menu, ne bouge pas. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.muted { color: var(--text-secondary); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 720px) { .wrap { padding-left: 32px; padding-right: 32px; } }

h1, h2, h3 {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-style: italic; text-transform: uppercase; line-height: 1; margin: 0 0 .5em; text-wrap: balance;
}
h1 { font-size: clamp(44px, 9vw, var(--fs-display-xl)); line-height: var(--lh-display-xl); }
h2 { font-size: clamp(26px, 4vw, var(--fs-display-m)); line-height: var(--lh-display-m); }
h3 { font-size: var(--fs-title); }

.rule { width: 72px; height: 6px; background: var(--accent); }
.rule--s { width: 44px; height: 5px; }
.label {
  font-size: var(--fs-label); font-weight: var(--fw-heavy); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-secondary);
}

/* Bandeau mode test */
.banner {
  background: var(--hx-gris-800); color: var(--text-inverse); text-align: center;
  padding: 10px 16px; font-size: var(--fs-small); font-weight: var(--fw-bold);
  border-bottom: 3px solid var(--accent);
}

/* En-tête événement : bande noire (motif sur la page d'accueil et la page des billets) */
.hero { background: var(--surface-inverse); color: var(--text-inverse); padding: 24px 0 32px; }
.hero .wrap { display: flex; flex-direction: column; gap: 12px; }
.hero__logo { display: block; width: 180px; }
.hero .rule { margin-top: 22px; }
.hero .lbl { color: var(--hx-gris-400); }
.hero h1 { font-size: clamp(54px, 9vw, var(--fs-display-xl)); line-height: .95; margin: 0; }
.hero__subtitle { font-size: var(--fs-body-l); line-height: 1.5; color: var(--text-inverse-secondary); margin: 0; }
.hero__meta { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.hero__about { max-width: 640px; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.hero__about:empty { display: none; }
.hero__about p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-inverse-secondary); }
@media (min-width: 720px) {
  .hero { padding: 32px 0 48px; }
  .hero__logo { width: 220px; }
  .hero__meta { flex-direction: row; flex-wrap: wrap; }
}

.grid { display: grid; gap: 16px; padding-top: 28px; padding-bottom: 32px; }
@media (min-width: 880px) {
  .grid { grid-template-columns: 1.45fr 1fr; align-items: start; gap: 32px; padding-top: 40px; padding-bottom: 72px; }
  .grid aside { position: sticky; top: 24px; }
}

.panel {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  padding: 24px; min-width: 0;
}
@media (min-width: 720px) { .panel { padding: 32px; } }

/* Catégories de billets */
.cat {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--border-subtle);
}
.cat:last-child { border-bottom: 0; padding-bottom: 0; }
.cat .name {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-style: italic; text-transform: uppercase; font-size: 24px; line-height: 1.05;
}
.cat .price { font-weight: var(--fw-heavy); font-size: 17px; margin-top: 4px; }
.cat .left { color: var(--text-secondary); font-size: var(--fs-small); margin-top: 2px; }
.cat .left strong { color: var(--accent); }
.cat.soldout .name, .cat.soldout .price { color: var(--hx-gris-400); }

.qty { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qty button {
  width: 44px; height: 44px; border-radius: var(--radius-1); border: 2px solid var(--border-strong);
  background: var(--surface-card); color: var(--text-primary); font: var(--fw-heavy) 20px var(--font-text);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.qty button:hover:not(:disabled) { background: var(--hx-noir); color: var(--hx-blanc); }
.qty button:disabled { border-color: var(--border-subtle); color: var(--hx-gris-400); cursor: not-allowed; }
.qty output { min-width: 30px; text-align: center; font: var(--fw-heavy) 20px var(--font-text); }

/* Formulaire */
label { display: block; font-size: 13px; font-weight: var(--fw-bold); margin: 16px 0 6px; }
input, select {
  width: 100%; font: inherit; font-size: 15px; color: var(--text-primary); background: var(--surface-card);
  border: 2px solid var(--border-subtle); border-radius: var(--radius-1); padding: 12px 14px;
}
input:focus, select:focus { border-color: var(--border-strong); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder { color: var(--hx-gris-400); }

/* Boutons (reprend .hx-btn) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 20px; padding: 16px 24px; border: 2px solid transparent; border-radius: var(--radius-1);
  background: var(--accent); color: var(--hx-blanc-pur); font: var(--fw-heavy) 15px var(--font-text);
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--accent-hover); color: var(--hx-blanc-pur); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--accent); }
.btn.secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn.secondary:hover { background: var(--hx-noir); color: var(--hx-blanc); }
.btn.dark { background: var(--hx-noir); color: var(--hx-blanc); }
.btn.dark:hover { background: var(--hx-gris-800); }
.btn.inline { width: auto; margin-top: 0; padding: 11px 18px; font-size: 13px; }

/* Récapitulatif */
.summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--text-secondary); }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 10px;
  border-top: 2px solid var(--border-strong);
}
.summary-total span:first-child { font-size: var(--fs-label); font-weight: var(--fw-heavy); letter-spacing: var(--ls-label); text-transform: uppercase; }
.summary-total span:last-child {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-style: italic; font-size: 30px;
}
.secure { display: flex; gap: 8px; align-items: center; margin-top: 12px; }

.footer { background: var(--surface-inverse); color: var(--text-inverse-secondary); font-size: var(--fs-small); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding-top: 28px; padding-bottom: 36px; }
.footer img { width: 150px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Pièces communes de la charte appliquée (téléphone d'abord) */
.d {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-style: italic; text-transform: uppercase; line-height: 1; margin: 0; letter-spacing: 0;
}
.lbl {
  font-size: var(--fs-label); font-weight: var(--fw-heavy); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-secondary); line-height: 1.3;
}
.lbl.noir { color: var(--text-primary); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.tabnum { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }
.center { text-align: center; }
.ico {
  width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico.s18 { width: 18px; height: 18px; }
.motif { background: var(--hx-noir) url(/ds/motif/motif-eclairs-noir.svg) repeat; background-size: 240px 240px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 8px 12px;
  border: 1px solid #2A2A28; border-radius: var(--radius-1); font-size: 14px; font-weight: var(--fw-bold);
  line-height: 1.4; color: var(--text-inverse);
}
.chip::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex: none; }
.chip:empty { display: none; }

/* Bandeau noir des écrans d'étape : retour à gauche, icône à droite */
.appbar { background: var(--surface-inverse); color: var(--text-inverse); border-bottom: 3px solid var(--accent); }
.appbar__in {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px;
  max-width: 592px; margin: 0 auto; padding: 12px 16px;
}
.appbar__in.gauche { justify-content: flex-start; }
.appbar__icone { height: 34px; display: block; }
.appbar .lbl { color: var(--text-inverse-secondary); }
.appbar__retour {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--text-inverse); font: var(--fw-bold) 14px var(--font-text); text-decoration: none; cursor: pointer;
}
.appbar__retour:hover { color: var(--text-inverse); text-decoration: underline; text-underline-offset: 3px; }
.appbar__logo { display: inline-flex; align-items: center; min-height: 44px; }
.appbar__logo img { width: 160px; display: block; }

/* Notes : erreur, succès, alerte, information */
.note {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-2);
  font-size: 14px; line-height: 1.45; border: 1px solid var(--border-subtle); background: var(--surface-card);
}
.note > .ico { margin-top: 1px; }
.note.col { flex-direction: column; gap: 6px; }
.note.err { background: var(--accent-soft); border-color: var(--accent); }
.note.err > .ico { color: var(--accent-hover); }
.note.ok { background: var(--etat-ok-pale); border-color: var(--etat-ok); }
.note.warn { background: var(--etat-alerte-pale); border-color: var(--etat-alerte); }
.note.info { background: var(--hx-gris-100); border-color: var(--border-subtle); }
.note a { font-weight: var(--fw-bold); }

/* Boutons de la charte appliquée */
.btn.inv { background: transparent; color: var(--hx-blanc); border-color: var(--hx-blanc); }
.btn.inv:hover { background: var(--hx-blanc); color: var(--hx-noir); }
.btn.link {
  background: transparent; color: var(--text-primary); border-color: transparent; text-decoration: underline;
  text-underline-offset: 3px; text-transform: none; letter-spacing: 0; font-weight: var(--fw-bold);
}
.btn.link:hover { background: transparent; color: var(--accent-hover); }
.btn.sm { width: auto; min-height: 44px; margin-top: 0; padding: 0 16px; font-size: 13px; }
.btn.secondary:disabled:hover { background: transparent; color: var(--text-primary); }
.acheteur .btn { margin-top: 0; min-height: 52px; padding: 0 20px; gap: 10px; line-height: 1.2; text-align: center; }
.acheteur .btn.sm { min-height: 44px; padding: 0 16px; }
.acheteur .btn.secondary { background: var(--surface-card); }
.acheteur .btn.secondary:hover { background: var(--hx-noir); color: var(--hx-blanc); }
.acheteur .btn.secondary:disabled:hover { background: var(--surface-card); color: var(--text-primary); }
.acheteur .btn.dark { border-color: var(--hx-noir); }
/* Lien d'action dans un panneau : zone tactile de 44 px sans décaler la ligne */
.lien {
  display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none;
  color: var(--text-primary); font: var(--fw-bold) 13px var(--font-text); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.lien:hover { color: var(--accent-hover); }

/* Champs */
.errmsg {
  display: flex; gap: 8px; align-items: flex-start; color: var(--accent-hover);
  font-size: 13px; font-weight: var(--fw-bold); line-height: 1.4;
}
.errmsg .ico { width: 16px; height: 16px; margin-top: 1px; }
input[aria-invalid="true"] { border-color: var(--accent); }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld label { margin: 0; font-size: 13px; font-weight: var(--fw-bold); line-height: 1.3; }
.fld .aide { margin-top: -2px; }
.fld input { min-height: 50px; padding: 0 14px; font-size: 16px; }

/* Bouton de quantité : 48 px */
.step {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex: none; padding: 0;
  border: 2px solid var(--border-strong); border-radius: var(--radius-1); background: var(--surface-card);
  color: var(--text-primary); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.step:hover:not(:disabled) { background: var(--hx-noir); color: var(--hx-blanc); }
.step:disabled { border-color: var(--border-subtle); background: var(--hx-gris-100); color: var(--hx-gris-400); cursor: not-allowed; }

/* Panneaux et lignes de commande */
.panneau {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.panneau.fort { border: 2px solid var(--border-strong); }
.panneau.p16 { padding: 16px; gap: 10px; }
.panneau__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ligne > :last-child { white-space: nowrap; }
.ligne.muted { color: var(--text-secondary); }
.ligne.changee { align-items: flex-start; margin: 0 -16px; padding: 8px 16px; background: var(--accent-soft); }
.rouge { color: var(--accent-hover); font-weight: var(--fw-bold); }
.total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 2px solid var(--border-strong); padding-top: 8px; margin-top: 4px;
}
.total .lbl { color: var(--text-primary); }
.total .d { font-size: 24px; white-space: nowrap; }

/* Accueil (A1) */
.choix { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.choix__tete { display: flex; flex-direction: column; gap: 10px; }
.choix__tete h2 { font-size: 28px; line-height: 1; margin: 0; }
.choix__tete p { margin: 0; }
.compteur {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--radius-2);
  background: var(--surface-inverse); color: var(--text-inverse);
}
.compteur__haut { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.compteur__haut strong { font-size: 15px; }
.compteur__n { font-size: 22px; white-space: nowrap; }
.compteur__barre { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.compteur__barre i { display: block; height: 6px; background: var(--hx-gris-600); }
.compteur__barre i.on { background: var(--accent); }
.compteur p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-inverse-secondary); }
.cats { display: flex; flex-direction: column; gap: 16px; }
.cat-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.cat-card__haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cat-card__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cat-card__nom { font-size: 24px; overflow-wrap: anywhere; }
.cat-card__prix { font-weight: var(--fw-heavy); font-size: 17px; }
.cat-card__info .pill { align-self: flex-start; margin-top: 4px; }
.cat-card__qte { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.cat-card__btns { display: flex; align-items: center; gap: 6px; }
.cat-card output { min-width: 28px; text-align: center; font-weight: var(--fw-heavy); font-size: 20px; }
.cat-card__note { font-size: 12px; font-weight: var(--fw-bold); color: var(--text-secondary); }
.cat-card__sous { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--hx-gris-100); padding-top: 10px; }
.cat-card.complet { background: var(--hx-gris-100); }
.cat-card.complet .cat-card__nom, .cat-card.complet .cat-card__prix { color: var(--text-secondary); }
.cat-card.complet .cat-card__qte { align-items: flex-end; }
.cat-card.complet .pill { font-size: 13px; padding: 8px 12px; }
.recap {
  background: var(--surface-card); border: 2px solid var(--border-strong); border-radius: var(--radius-2);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; margin-top: 8px;
}
.recap .total { padding-top: 10px; margin-top: 0; }
.recap .total .d { font-size: 26px; }
.recap p { margin: 0; }
@media (min-width: 880px) { .recap { margin-top: 0; } }
.footer strong { color: var(--text-inverse); }
@media (max-width: 719px) {
  .footer .wrap { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 24px; padding-bottom: 32px; line-height: 1.45; }
}

/* Écrans d'étape : une colonne de 560 px au plus */
.etroit {
  width: 100%; max-width: 592px; margin: 0 auto; padding: 24px 16px 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.etroit p { margin: 0; }
.titre { display: flex; flex-direction: column; gap: 8px; }
.titre h1, .etat h1 { font-size: 30px; line-height: 1; margin: 0; }
.etat h1.t32 { font-size: 32px; }
.etat h1.t28 { font-size: 28px; }
.formulaire { display: flex; flex-direction: column; gap: 18px; }
.resume-erreurs a { display: inline-block; padding: 3px 0; font-size: 13px; }
.rassure { display: flex; flex-direction: column; gap: 10px; }
.rassure > div { display: flex; gap: 10px; align-items: flex-start; }
.pile { display: flex; flex-direction: column; gap: 10px; }
.pile.g8 { gap: 8px; }
.pile.g4 { gap: 4px; }

/* Paiement : attente, échec */
.etat { display: flex; flex-direction: column; gap: 12px; }
.etat > p:first-of-type { font-size: 16px; }
.rond { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.rond .ico { width: 28px; height: 28px; }
.rond.err { background: var(--accent-soft); color: var(--accent-hover); }
.rond.err .ico { width: 30px; height: 30px; stroke-width: 2.5; }
.rond.warn { width: 48px; height: 48px; background: var(--etat-alerte-pale); border: 2px solid var(--etat-alerte); }
.rond.warn .ico { width: 26px; height: 26px; }
.rond.gris { background: var(--hx-gris-100); }
.roue { width: 48px; height: 48px; flex: none; animation: roue 1.4s linear infinite; }
.roue.p { width: 22px; height: 22px; }
@keyframes roue { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation: none; } }
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.etapes li { display: flex; gap: 12px; padding-bottom: 16px; }
.etapes li:last-child { padding-bottom: 0; }
.etapes__pt { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.etapes__pt.fait { background: var(--etat-ok); color: var(--hx-blanc-pur); }
.etapes__pt.cours { background: var(--surface-card); border: 3px solid var(--accent); }
.etapes__pt.cours i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: block; }
.etapes__pt.attente { background: var(--hx-gris-100); border: 2px solid var(--border-subtle); }
.ref-box {
  background: var(--surface-card); border: 2px solid var(--border-strong); border-radius: var(--radius-2);
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.ref-box .mono { font-size: 26px; white-space: normal; overflow-wrap: anywhere; }
.ref-box.s24 { padding: 14px 16px; gap: 4px; }
.ref-box.s24 .mono { font-size: 24px; }
.consignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.45; }
.consignes li, .ligne-ico { display: flex; gap: 10px; align-items: flex-start; }
.ligne-ico { font-size: 14px; line-height: 1.45; }
.ico.rouge { color: var(--accent-hover); }
.verif {
  display: flex; align-items: center; gap: 10px; padding: 12px; font-size: 14px; font-weight: var(--fw-bold);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
}
.verif .small { font-weight: var(--fw-medium); }
.bar.b8 { height: 8px; min-width: 0; }

/* Pages d'une commande (A5 à A7) : hauteur d'écran, bouton du bas collé en bas */
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page > main { flex: 1; display: flex; flex-direction: column; }
.etroit.plein { flex: 1; padding-top: 32px; }
.etroit.plein h1 { font-size: 34px; }
.etroit > .bas { margin-top: auto; }
.intro { font-size: 16px; }
.gras { font-weight: var(--fw-bold); }
.ligne-ico.small { font-size: var(--fs-small); }
.ligne-ico.centre { align-items: center; }
.rond.warn.grand { width: 56px; height: 56px; }
.rond.warn.grand .ico { width: 28px; height: 28px; }

/* Vos billets (A5) */
.hero--billets { padding: 20px 0 28px; }
.hero--billets .wrap { gap: 10px; max-width: 832px; padding-left: 16px; padding-right: 16px; }
.hero--billets .hero__logo { width: 160px; }
.hero--billets .rule { margin-top: 18px; }
.hero--billets h1 { font-size: 46px; line-height: 1; }
.hero--billets p { margin: 0; font-size: 16px; color: var(--text-inverse-secondary); }
.billets-page { max-width: 832px; margin: 0 auto; padding: 20px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.billets-page > p { margin: 0; }
.billets-tete { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.billets-tete p { margin: 0; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acheteur .deux .btn { font-size: 13px; padding: 0 10px; }
.billets { display: grid; gap: 16px; }
@media (min-width: 720px) { .billets { grid-template-columns: 1fr 1fr; } }
.billet {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-1);
  break-inside: avoid; page-break-inside: avoid;
}
.billet__haut {
  background: var(--surface-inverse); color: var(--text-inverse); padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.billet__marque { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.billet__marque img { width: 110px; display: block; }
.billet__ev { font-size: 22px; overflow-wrap: anywhere; }
.billet__haut .pill { align-self: flex-end; }
.billet__corps { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.billet__qr { width: 230px; height: 230px; max-width: 100%; display: block; image-rendering: pixelated; }
.billet__qr.terne { opacity: .18; }
.billet__code { font-size: 19px; }
.billet__use { position: relative; width: 190px; height: 190px; }
.billet__use .billet__qr { width: 190px; height: 190px; opacity: .18; }
.billet__tampon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.billet__tampon > span {
  background: var(--hx-noir); color: var(--hx-blanc); padding: 10px 14px; border-radius: var(--radius-1);
  text-align: center; transform: rotate(-6deg);
}
.billet__tampon .d { font-size: 22px; display: block; }
.billet__tampon small { font-size: 12px; font-weight: var(--fw-bold); color: var(--text-inverse-secondary); }
.billet__use + .billet__code { font-size: 18px; color: var(--text-secondary); }
.billet__pointille { border-top: 2px dashed var(--border-subtle); margin: 0 16px; }
.billet__pied { padding: 12px 16px 16px; text-align: center; }

@media print {
  body { background: #fff; }
  .no-print, .banner, .footer, .appbar { display: none !important; }
  .acheteur .page { min-height: 0; display: block; }
  .billets-page { max-width: none; padding: 0; }
  .billets { grid-template-columns: 1fr 1fr; gap: 6mm; }
  .billet { box-shadow: none; }
}

/* Tableaux */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
th { font-size: var(--fs-label); font-weight: var(--fw-heavy); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 2px solid var(--border-strong); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bar { height: 6px; background: var(--hx-gris-100); border-radius: 1px; overflow: hidden; min-width: 90px; }
.bar > i { display: block; height: 100%; background: var(--accent); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--radius-1);
  font-size: 11px; font-weight: var(--fw-heavy); letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
  white-space: nowrap; background: var(--hx-gris-100); border: 1px solid var(--border-subtle); color: var(--text-primary);
}
.pill.dark { background: var(--hx-noir); border-color: var(--hx-noir); color: var(--hx-blanc); }
.pill.pend { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-hover); }
.pill.bad { background: var(--etat-erreur); border-color: var(--etat-erreur); color: var(--hx-blanc-pur); }
.pill.warn { background: var(--etat-alerte); border-color: var(--etat-alerte); color: var(--hx-noir); }
.pill.ok { background: var(--etat-ok); border-color: var(--etat-ok); color: var(--hx-blanc-pur); }

/* Écrans de terrain : contrôle entrée (B1 à B7) et activation (C0 à C6), téléphone d'abord.
   Sur ordinateur, une colonne de 560 px au plus. */
body.terrain-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
/* Chaque verdict ramène en haut : un glissement vers le bas ne doit pas recharger la page (caméra arrêtée). */
body.terrain-page, html:has(> body.terrain-page) { overscroll-behavior-y: none; }
/* Texte lu seulement par les lecteurs d'écran */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.terrain-page > #app { flex: 1; display: flex; flex-direction: column; }
.terrain { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }
.terrain :where(p) { margin: 0; }

/* Barre de terrain : vendeur et contrôleur */
.fieldbar { background: var(--surface-inverse); color: var(--text-inverse); border-bottom: 3px solid var(--accent); }
.fieldbar__in { display: flex; align-items: center; gap: 10px; min-height: 60px; max-width: 560px; margin: 0 auto; padding: 8px 6px 8px 16px; }
.fieldbar__icone { height: 30px; display: block; flex: none; }
.fieldbar__titre { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.fieldbar .lbl { color: var(--text-inverse); }
.fieldbar__qui { font-size: 12px; color: var(--text-inverse-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fieldbar__actions { display: flex; }
.ib {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex: none; padding: 0;
  background: transparent; border: 0; border-radius: var(--radius-1); color: var(--text-inverse); cursor: pointer;
}
.ib:hover { background: var(--hx-gris-800); }

/* Barre d'état */
.statut {
  background: var(--hx-gris-800); color: var(--text-inverse); padding: 10px 16px; font-size: 13px; line-height: 1.4;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
}
.statut:empty { display: none; }
.statut__pret { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-bold); }
.statut__pret i { width: 10px; height: 10px; border-radius: 50%; background: var(--hx-blanc); flex: none; }
.statut__pret.off i { background: transparent; border: 2px solid var(--hx-blanc); }

/* Zone prête, puis verdict. Contrôle : le verdict recouvre la zone prête, la caméra continue de lire dessous.
   Activation : le verdict s'affiche en haut, la caméra est en pause. */
.scanner { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.scanner.recouvre { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.recouvre > .statut { grid-area: 1 / 1; }
.recouvre > .pret { grid-area: 2 / 1; }
.recouvre > .verdict { grid-area: 1 / 1 / -1 / -1; z-index: 2; }
.pause > .verdict { order: 1; }
.pause > .pret { order: 2; }
.pret { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px; min-width: 0; }
.pret__son { display: flex; justify-content: flex-end; }
.pret__son .btn { min-height: 40px; }
.verdict { display: flex; flex-direction: column; min-width: 0; }
.pause.en-verdict .pret { padding-top: 12px; gap: 12px; }
.pause.en-verdict .cam, .pause.en-verdict .cam__btn, .pause.en-verdict #cam-err, .pause.en-verdict .pret__son { display: none; }
.sans-saisie .saisie { display: none; }
.plein > .statut, .plein > .pret { display: none; }
.plein > .verdict { flex: 1; }
#cam-err:empty { display: none; }

/* Caméra */
.cam {
  position: relative; flex: none; background: var(--hx-gris-800); border-radius: var(--radius-2); overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
#reader { position: absolute; inset: 0; border: 0 !important; }
#reader video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
#qr-shaded-region { display: none !important; }
.cam__cadre { position: absolute; z-index: 1; left: 50%; top: calc(50% - 126px); width: 220px; height: 220px; margin-left: -110px; pointer-events: none; }
.cam__cadre i { position: absolute; width: 44px; height: 44px; border: 0 solid var(--hx-blanc); }
.cam__cadre .hg { left: 0; top: 0; border-width: 4px 0 0 4px; }
.cam__cadre .hd { right: 0; top: 0; border-width: 4px 4px 0 0; }
.cam__cadre .bg { left: 0; bottom: 0; border-width: 0 0 4px 4px; }
.cam__cadre .bd { right: 0; bottom: 0; border-width: 0 4px 4px 0; }
.cam__cadre b { position: absolute; left: 12px; right: 12px; top: 108px; height: 3px; background: var(--accent); }
.cam__puce {
  position: relative; z-index: 1; margin: 0 12px 14px; padding: 6px 10px; border-radius: var(--radius-1);
  background: var(--hx-noir); color: var(--hx-blanc); font-size: 13px; font-weight: var(--fw-bold); text-align: center;
}
/* Caméra éteinte : ni cadre de visée ni consigne, pour ne pas la confondre avec une caméra en marche. */
.cam__arret {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  color: var(--hx-blanc); font-size: 16px; font-weight: var(--fw-heavy); letter-spacing: .04em; text-transform: uppercase; text-align: center;
}
.scanner.cam-on .cam__arret, .scanner:not(.cam-on) .cam__cadre, .scanner:not(.cam-on) .cam__puce { display: none; }

/* Boutons et saisie */
.terrain .btn { margin-top: 0; min-height: 52px; padding: 0 20px; gap: 10px; line-height: 1.2; text-align: center; }
.terrain .btn.sm { min-height: 44px; padding: 0 16px; }
.terrain .btn.secondary { background: var(--surface-card); }
.terrain .btn.secondary:hover:not(:disabled) { background: var(--hx-noir); color: var(--hx-blanc); }
.terrain .btn.secondary:disabled:hover { background: var(--surface-card); color: var(--text-primary); }
.terrain .btn.dark { border-color: var(--hx-noir); }
.terrain .btn.inv:disabled:hover { background: transparent; color: var(--hx-blanc); }
/* Nouvel essai en cours : le bouton reste focalisable, il est seulement grisé. */
.terrain .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.terrain .btn.inv[aria-disabled="true"]:hover { background: transparent; color: var(--hx-blanc); }
.terrain .cam__btn, .terrain [data-suivant], .encart-annul .btn, .terrain a.btn.secondary { min-height: 48px; }
.encart-annul .btn, .terrain a.btn.secondary { font-size: 14px; }
.saisie__ligne { display: flex; gap: 8px; }
.saisie__ligne input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; }
.saisie__ligne .btn { min-height: 50px; }
.libre { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.libre:empty { display: none; }
.libre > .bas { margin-top: auto; }
.rappel strong { color: var(--text-primary); }

/* Rappel des trois couleurs (B1) */
.legende {
  margin-top: auto; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.4;
}
.legende > div { display: flex; gap: 10px; align-items: flex-start; }
.legende__c { width: 24px; height: 24px; border-radius: var(--radius-1); display: flex; align-items: center; justify-content: center; flex: none; }
.legende__c .ico { width: 16px; height: 16px; stroke-width: 3; }
.legende__c.ok { background: var(--etat-ok); color: var(--hx-blanc-pur); }
.legende__c.warn { background: var(--etat-alerte); color: var(--hx-noir); }
.legende__c.warn .ico { stroke-width: 2.5; }
.legende__c.bad { background: var(--etat-erreur); color: var(--hx-blanc-pur); }

/* Verdicts */
.vd { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 20px; min-width: 0; }
.recouvre .vd, .plein .vd { flex: 1; }
.recouvre .vd { padding-top: 14px; }
.recouvre .vd.ok { padding-bottom: 24px; }
.vd.centre { align-items: center; text-align: center; }
.vd.ok { background: var(--etat-ok); color: var(--hx-blanc-pur); }
.vd.warn { background: var(--etat-alerte); color: var(--hx-noir); }
.vd.bad { background: var(--etat-erreur); color: var(--hx-blanc-pur); }
.vd.bad:not(.centre) { padding-bottom: 22px; }
.vd.net { background: var(--hx-gris-800); color: var(--hx-blanc); }
.pause .vd.ok { padding: 14px 16px 18px; }
.plein .vd.net { padding: 18px 16px 22px; gap: 14px; }
.vd.annulee { background: var(--surface-card); color: var(--text-primary); border-bottom: 4px solid var(--hx-noir); padding: 18px 16px 20px; }
.recouvre .verdict { cursor: pointer; }
.recouvre .verdict button { cursor: pointer; }
.vd h1 { margin: 0; text-wrap: balance; }
.vd .fs22 { font-size: 22px; line-height: 1.1; }
.vd .fs24 { font-size: 24px; }
.vd .fs26 { font-size: 26px; line-height: 1.05; }
.vd .fs28 { font-size: 28px; }
.vd .fs30 { font-size: 30px; }
.vd .fs32 { font-size: 32px; }
.vd .fs36 { font-size: 36px; }
.vd .fs40 { font-size: 40px; }
.vd .fs44 { font-size: 44px; }
.vd .fs48 { font-size: 48px; }
.vd .fs60 { font-size: 60px; }
.vd .centre { text-align: center; }
.vd .mt6 { margin-top: 6px; }
.vd__haut { margin-top: auto; }
.vd__bas { margin-bottom: auto; }
/* Nouveau verdict : liseré intérieur et « NOUVEAU » pendant une seconde */
.verdict.nouveau .vd { box-shadow: inset 0 0 0 6px var(--hx-blanc-pur); }
.verdict.nouveau .vd.annulee { box-shadow: inset 0 0 0 6px var(--hx-noir); }

.vd__tete { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vd__num { display: flex; align-items: center; gap: 6px; }
.vd__scan {
  border: 2px solid currentColor; border-radius: var(--radius-1); padding: 4px 10px;
  font-size: 13px; font-weight: var(--fw-heavy); letter-spacing: .1em; white-space: nowrap;
}
.vd__neuf {
  visibility: hidden; background: var(--hx-blanc-pur); border-radius: var(--radius-1); padding: 6px 8px;
  font-size: 11px; font-weight: var(--fw-heavy); letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
}
.verdict.nouveau .vd__neuf { visibility: visible; }
.vd.ok .vd__neuf { color: var(--etat-ok); }
.vd.warn .vd__neuf { background: var(--hx-noir); color: var(--etat-alerte); }
.vd.bad .vd__neuf { color: var(--accent-hover); }
.vd.net .vd__neuf { color: var(--hx-gris-800); }
.vd__heure { font-size: 22px; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd__heure.p { font-size: 16px; }
.vd__rang { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vd__rang.g10 { gap: 10px; }
.vd__rang.g12 { gap: 12px; }

.vd__rond { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.vd__rond.r92 { width: 92px; height: 92px; }
.vd__rond.r84 { width: 84px; height: 84px; }
.vd__rond.r48 { width: 48px; height: 48px; }
.vd__rond.r44 { width: 44px; height: 44px; }
.vd__rond.r40 { width: 40px; height: 40px; }
.vd.ok .vd__rond { background: var(--hx-blanc-pur); color: var(--etat-ok); }
.vd.warn .vd__rond { background: var(--hx-noir); color: var(--etat-alerte); }
.vd.net .vd__rond { border: 3px solid var(--hx-blanc); }
.vd.annulee .vd__rond { background: var(--hx-noir); color: var(--hx-blanc); }
.vd .ico.i58 { width: 58px; height: 58px; }
.vd .ico.i48 { width: 48px; height: 48px; stroke-width: 2.4; }
.vd .ico.i46 { width: 46px; height: 46px; }
.vd .ico.i26 { width: 26px; height: 26px; }
.vd .ico.i24 { width: 24px; height: 24px; }
.vd .ico.i22 { width: 22px; height: 22px; }
.ico.sw3 { stroke-width: 3; }
.ico.sw25 { stroke-width: 2.5; }
.ico.vert { color: var(--etat-ok); }
.octo { display: block; flex: none; }
.octo__fond { fill: var(--hx-blanc-pur); }
.octo__x { fill: none; stroke: var(--accent-hover); stroke-width: 2.6; stroke-linecap: round; }
.octo.o96 { width: 96px; height: 96px; }
.octo.o56 { width: 56px; height: 56px; }
.octo.o44 { width: 44px; height: 44px; }

.vd__bloc { align-self: stretch; padding: 12px 14px; border-radius: var(--radius-1); }
.vd__bloc.blanc { background: var(--hx-blanc-pur); }
.vd.ok .vd__bloc.blanc { color: var(--etat-ok); padding: 12px 18px; }
.vd.bad .vd__bloc.blanc { color: var(--accent-hover); }
.vd.bad:not(.centre) .vd__bloc.blanc.fs26 { padding: 10px 14px; }
.vd__bloc.noir { background: var(--hx-noir); color: var(--hx-blanc); }
.vd__bloc.clair { background: var(--hx-blanc); color: var(--hx-noir); text-align: center; }
.plein .vd__bloc.clair { padding: 14px; }
.vd__sous { font-size: 14px; font-weight: var(--fw-bold); margin-top: 4px; }
.vd__sous.f16 { font-size: 16px; font-weight: var(--fw-heavy); margin-top: 6px; }
.vd__info { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.vd__info.f16 { font-size: 16px; }
.vd__fort { font-weight: var(--fw-heavy); }
.vd.warn.centre .vd__fort { font-size: 16px; }
.vd__encart {
  align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-1);
  background: var(--hx-blanc-pur); color: var(--hx-noir); font-size: 14px; line-height: 1.45; text-align: left;
}
.vd__encart.serre { padding: 10px 12px; gap: 6px; line-height: 1.4; }
.vd__encart .ligne-ico { gap: 8px; line-height: 1.4; }
.vd__encart .errmsg:empty { display: none; }
.encart-annul { gap: 10px; }
.etape { display: flex; gap: 8px; }
.etape .d { font-size: 16px; color: var(--accent-hover); }
.vd__encaisser { background: var(--hx-blanc-pur); color: var(--hx-noir); border-radius: var(--radius-1); padding: 14px; text-align: center; }
.vd__encaisser .lbl { color: var(--etat-ok); }
.vd__encaisser .d { font-size: 44px; margin-top: 6px; white-space: nowrap; }
.vd__texte { font-size: 15px; line-height: 1.45; color: var(--hx-gris-100); }
.vd__texte .mono { color: var(--hx-blanc); }
.vd__essai { align-self: stretch; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: var(--fw-bold); text-align: left; }
.si-envoi { display: none; }
.occupe .si-envoi { display: inline; }
.occupe .si-attente { display: none; }
.vd .btn.inv { align-self: stretch; }
.vd__pied { font-size: 13px; line-height: 1.45; color: var(--text-inverse-secondary); }
.vd__apres {
  background: var(--hx-noir); border: 1px solid var(--hx-gris-600); border-radius: var(--radius-1); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.4;
}
.vd__apres > div { display: flex; gap: 8px; align-items: flex-start; }
.vd__apres .pill { flex: none; }
.vd__gris { color: var(--text-inverse-secondary); }
.vd.annulee .note { font-size: 14px; }
.vd-suite { padding: 14px 16px 0; display: flex; flex-direction: column; }
.pill.net { background: var(--hx-gris-800); border-color: var(--hx-gris-800); color: var(--hx-blanc); }

/* Derniers scans (B2 à B7) */
.hist-sec { background: var(--surface-card); padding: 12px 16px 14px; display: flex; flex-direction: column; }
.hist-sec__tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 8px; }
.hist-sec__cam { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--fw-bold); }
.hist {
  display: grid; grid-template-columns: 34px 64px 104px minmax(0, 1fr); gap: 8px; align-items: center;
  font-size: 13px; padding: 7px 0; border-top: 1px solid var(--hx-gris-100); font-variant-numeric: tabular-nums;
}
.hist-sec > .hist:first-child { border-top: 0; }
.hist .pill { justify-self: start; }
.hist .mono { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.verdict.nouveau .hist.dernier.ok { background: var(--etat-ok-pale); }
.verdict.nouveau .hist.dernier.warn { background: var(--etat-alerte-pale); }
.verdict.nouveau .hist.dernier.bad { background: var(--accent-soft); }
.verdict.nouveau .hist.dernier.net { background: var(--hx-gris-100); }

/* Activations récentes (C1, C5) */
.recentes {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  padding: 12px 14px 4px; display: flex; flex-direction: column; min-width: 0;
}
.recentes__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; }
.recentes__tete .small { white-space: nowrap; }
.act {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--hx-gris-100);
}
.act .mono { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.act.close .mono { color: var(--text-secondary); }
.act.recent { background: var(--etat-ok-pale); margin: 0 -14px; padding: 10px 14px; }
.act.annulee { background: var(--hx-gris-100); margin: 0 -14px; padding: 10px 14px; }
.act.annulee .mono { color: var(--text-secondary); text-decoration: line-through; }
.act .fermee { text-align: right; }
.act__msg { grid-column: 1 / -1; }
.act__msg:empty { display: none; }
.undo {
  min-height: 44px; min-width: 44px; padding: 0 12px; border: 2px solid var(--hx-noir); border-radius: var(--radius-1);
  background: var(--hx-blanc-pur); color: var(--hx-noir); font: var(--fw-heavy) 13px var(--font-text); line-height: 1.15;
  display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.undo small { font-size: 11px; font-weight: var(--fw-bold); color: var(--text-secondary); }
.undo:hover:not(:disabled) { background: var(--hx-noir); color: var(--hx-blanc); }
.undo:hover:not(:disabled) small { color: var(--text-inverse-secondary); }
.undo:disabled { opacity: .4; cursor: not-allowed; }
/* Premier toucher sur « Annuler » : à confirmer pendant 5 s */
.undo.arme { background: var(--hx-noir); color: var(--hx-blanc); padding: 0 10px; }
.undo.arme small { color: var(--text-inverse-secondary); font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }

/* Billet papier de la planche (D11) : 8 par page A4 */
.paper {
  background: var(--surface-card); border: 1px dashed var(--hx-gris-400); border-radius: var(--radius-1);
  display: flex; flex-direction: column; break-inside: avoid; page-break-inside: avoid; overflow: hidden;
}
.paper__top { background: var(--surface-inverse); padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.paper__top img { width: 110px; }
.paper__top .tag { padding: 3px 8px; border-radius: var(--radius-1); background: var(--accent); color: var(--hx-blanc-pur); font-size: 10px; font-weight: var(--fw-heavy); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.paper__body { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 12px; align-items: center; }
.paper__qr { width: 110px; image-rendering: pixelated; }
.paper__ev { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-style: italic; text-transform: uppercase; font-size: 16px; line-height: 1.05; }
.paper__info { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.paper__code { font: 700 14px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; margin-top: 6px; }
.paper__serial { font-size: 10px; color: var(--text-secondary); }
.paper__foot { border-top: 1px solid var(--border-subtle); padding: 5px 12px; font-size: 9.5px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; }

@media print {
  @page { size: A4; margin: 10mm; }
  main.wrap { padding-bottom: 0 !important; }
  .wrap { max-width: none; padding: 0; }
  .paper { height: 64mm; }
  .paper__top, .tag, .billet__haut, .billet .pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==== ORGA COMMUNS (agent coquille) : début ==== */
/* Pièces communes des écrans organisateur (série D), à réutiliser par les pages.
   Points de rupture : moins de 720 px téléphone (D3b, D0c) ; moins de 900 px menu en tiroir (D7) ;
   D12 et D13 en deux colonnes quand la page fait au moins 1000 px à droite du menu (classe cote posée par
   scanner.js : 1076 px de large menu replié, 1248 px déplié). Couleurs : jetons de la charte seulement.
   Déjà présents et à réutiliser tels quels : .btn, .btn.sm, .btn.secondary, .btn.dark, .btn.link, .pill, .note,
   .bar, .step, .lbl, .d, .mono, .tabnum, .nw, .sr, .ico, .motif, .rule. */

/* Contenu d'une page dans la coquille : <main class="o-page"> */
.o-page { display: flex; flex-direction: column; gap: 20px; padding: 28px 32px 48px; min-width: 0; }
.o-page :where(p) { margin: 0; }
.o-page .btn { margin-top: 0; }
@media (max-width: 719.98px) { .o-page { gap: 14px; padding: 20px 16px 32px; } }

/* En-tête de page (Admin.tete) : filet, titre, sous-titre ; actions à droite */
.o-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.o-tete__txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.o-tete h1 { font-size: 36px; line-height: 1; margin: 0; }
.o-tete__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.o-tete .btn { margin-top: 0; }
@media (max-width: 719.98px) { .o-tete h1 { font-size: 30px; } .o-tete__txt { gap: 6px; } }

/* Fil d'Ariane (Admin.fil) : liens de 44 px de haut pour le doigt, sans décaler la ligne */
.o-fil a { display: inline-flex; align-items: center; min-height: 44px; margin: -13px 0; font-weight: var(--fw-bold); }

/* Panneau blanc ; .fort : bordure noire de 2 px ; titre <h2 class="o-h2"> */
.o-panel {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.o-panel.fort { border: 2px solid var(--border-strong); }
.o-h2 { font-size: 22px; line-height: 1.05; margin: 0; }
@media (max-width: 719.98px) { .o-panel { padding: 16px; } .o-h2 { font-size: 20px; } }

/* Chiffres clés : 4 colonnes (.c3 : 3), 2 sur téléphone ; .rouge, .orange : couleur en haut et fond pâle.
   Les montants passent à la ligne avant « FCFA » si la carte est étroite (chiffres soudés par l'espace fine). */
.o-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.o-kpis.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.o-kpi {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-top: 4px solid var(--hx-noir);
  border-radius: var(--radius-2); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
/* Texte normal dans la carte rouge : sans cela, la règle globale .rouge le passerait en rouge gras */
.o-kpi.rouge { border-top-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); font-weight: var(--fw-regular); }
.o-kpi.orange { border-top-color: var(--etat-alerte); background: var(--etat-alerte-pale); }
.o-kpi__v {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-style: italic; text-transform: uppercase; font-size: 28px; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.o-kpi__v small { font-size: 18px; color: var(--text-secondary); }
@media (max-width: 719.98px) {
  .o-kpis, .o-kpis.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .o-kpi { padding: 12px; gap: 6px; }
  .o-kpi__v { font-size: 22px; }
  .o-kpi__v small { font-size: 15px; }
}

/* Boutons segmentés (Admin.seg) : le bouton choisi porte aria-pressed="true" ; .plein : pleine largeur */
.seg { display: inline-flex; max-width: 100%; border: 2px solid var(--border-strong); border-radius: var(--radius-1); overflow: hidden; }
.seg button {
  min-height: 44px; padding: 0 16px; border: 0; background: var(--surface-card); color: var(--text-primary);
  font: var(--fw-heavy) 13px var(--font-text); cursor: pointer; white-space: nowrap;
}
.seg button:hover { background: var(--hx-gris-100); }
.seg button[aria-pressed="true"] { background: var(--hx-noir); color: var(--text-inverse); }
/* Anneau de focus à l'intérieur du bouton : .seg (overflow: hidden) coupe ce qui dépasse */
.seg button:focus-visible { outline-offset: -5px; }
.seg.plein { display: flex; width: 100%; }
.seg.plein button { flex: 1; padding: 0 8px; }

/* Pastille rouge (nombre d'alertes graves) ; .dot : ronde, en coin d'une icône */
.badge {
  display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--hx-blanc-pur);
  border-radius: var(--radius-1); font-size: 12px; font-weight: var(--fw-heavy); padding: 2px 7px; line-height: 1.3; letter-spacing: 0;
}
.badge.dot {
  position: absolute; top: 3px; right: 1px; min-width: 20px; height: 20px; padding: 0 4px; margin: 0;
  border-radius: 10px; font-size: 11px; border: 2px solid var(--hx-noir);
}

/* Liste déroulante sans flèche du navigateur : <div class="o-select"><select>…</select>${icon('chevron-bas')}</div> */
.o-select { position: relative; display: block; min-width: 0; }
.o-select select { appearance: none; -webkit-appearance: none; background-image: none; padding: 0 40px 0 14px; min-height: 50px; font-size: 16px; }
.o-select > .ico { position: absolute; right: 12px; top: 50%; margin-top: -9px; width: 18px; height: 18px; pointer-events: none; }

/* Formulaire en grille ; champs .fld, erreurs .errmsg et input[aria-invalid] existants ; .o-aide sous un champ (vide : masquée) */
.o-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: start; }
.o-form .btn { margin-top: 0; min-height: 50px; padding: 0 20px; }
.o-form .fld select { min-height: 50px; font-size: 16px; }
.o-aide { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.o-aide:empty { display: none; }
select[aria-invalid="true"] { border-color: var(--accent); }
@media (max-width: 719.98px) { .o-form { grid-template-columns: minmax(0, 1fr); } }

/* Tableau (styles globaux de table) ; .serre : colonnes resserrées ; lignes surlignées .o-verte, .o-rose
   (.o-rose l'emporte : ligne d'une boîte ouverte, même pour un nouveau compte d'Équipe) */
table.o-t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.o-t th { padding: 10px 8px; letter-spacing: .14em; }
table.o-t td { padding: 12px 8px; vertical-align: middle; }
table.o-t.serre th { padding: 10px 6px; letter-spacing: .08em; }
table.o-t.serre td { padding: 12px 6px; }
table.o-t tr.o-verte > td { background: var(--etat-ok-pale); }
table.o-t tr.o-rose > td { background: var(--accent-soft); }

/* Boîte de confirmation sous une ligne (Équipe) ; --o-pop-fleche : position de la flèche depuis la droite */
.o-pop {
  position: relative; background: var(--surface-card); border: 2px solid var(--border-strong); border-radius: var(--radius-2);
  box-shadow: var(--shadow-2); padding: 20px; display: flex; flex-direction: column; gap: 12px; text-align: left;
  white-space: normal; max-width: 440px;
}
.o-pop::before {
  content: ""; position: absolute; top: -9px; right: var(--o-pop-fleche, 52px); width: 16px; height: 16px;
  background: var(--surface-card); border-left: 2px solid var(--border-strong); border-top: 2px solid var(--border-strong);
  transform: rotate(45deg);
}
.o-pop__titre {
  margin: 0; font-family: var(--font-text); font-style: normal; text-transform: none; font-size: 18px;
  font-weight: var(--fw-heavy); line-height: 1.3;
}
.o-pop__points { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.o-pop__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.o-pop .btn { margin-top: 0; }

/* Identifiant ou mot de passe à noter : libellé | valeur | Copier (Admin.copier) */
.o-secret {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px 14px; align-items: center;
  background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-1); padding: 14px 16px;
}
.o-secret__v { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 22px; letter-spacing: .04em; overflow-wrap: anywhere; }
.o-secret .btn { margin-top: 0; min-height: 40px; }
.o-copie { margin: 6px 0 0; }
@media (max-width: 719.98px) { .o-secret { grid-template-columns: minmax(0, 1fr) auto; } .o-secret .lbl { grid-column: 1 / -1; } }

/* Encart de réussite : <section class="o-succes" role="status"> ; tête : rond vert et coche */
.o-succes {
  background: var(--surface-card); border: 1px solid var(--etat-ok); border-top: 6px solid var(--etat-ok);
  border-radius: var(--radius-2); padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.o-succes__tete { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: var(--fw-heavy); }
.o-succes__rond {
  width: 32px; height: 32px; border-radius: 50%; background: var(--etat-ok); color: var(--hx-blanc-pur);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.o-succes__rond .ico { width: 18px; height: 18px; stroke-width: 3; }
@media (max-width: 719.98px) { .o-succes { padding: 16px; } }

/* Page vide ou d'erreur (D11b) : rond gris, filet, titre, texte, actions */
.o-vide {
  max-width: 640px; margin-top: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
}
.o-vide__rond { width: 56px; height: 56px; border-radius: 50%; background: var(--hx-gris-100); display: flex; align-items: center; justify-content: center; }
.o-vide__rond .ico { width: 28px; height: 28px; }
.o-vide h1 { font-size: 34px; line-height: 1; margin: 0; }
.o-vide p { margin: 0; }
.o-vide__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 719.98px) { .o-vide { margin-top: 8px; padding: 20px 16px; } .o-vide h1 { font-size: 30px; } }

/* Affichage seulement sur téléphone (moins de 720 px) */
@media (min-width: 720px) { .seul-tel { display: none !important; } }
/* ==== ORGA COMMUNS : fin ==== */

/* ==== ORGA COQUILLE (agent coquille) : début ==== */
/* Menu latéral de l'organisateur : déplié 248 px ou rail de 76 px à partir de 900 px ; tiroir en dessous (D7).
   Bordures du menu sombre : #2A2A28, comme .chip. */
body.orga { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.orga > #app { flex: 1 1 auto; min-width: 0; }
.orga-haut { display: none; }
.orga-side { background: var(--hx-noir); color: var(--text-inverse); display: flex; flex-direction: column; gap: 22px; padding: 18px 14px 20px; border-right: 3px solid var(--accent); }
.orga-side .ib, .orga-haut .ib { border: 1px solid #2A2A28; color: var(--text-inverse); }
.orga-side__haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 4px; }
.orga-side__logo { display: flex; align-items: center; min-height: 44px; }
.orga-side__logo:hover { color: inherit; }
.orga-logo-long { width: 150px; display: block; }
.orga-logo-icone { height: 34px; display: none; }
.orga-nav { display: flex; flex-direction: column; gap: 2px; }
.orga-nav a {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
  border-radius: var(--radius-1); color: var(--text-inverse); text-decoration: none; font-size: 14px; font-weight: var(--fw-bold);
}
.orga-nav a:hover { background: var(--hx-gris-800); color: var(--text-inverse); }
.orga-nav a.on { background: var(--accent); color: var(--hx-blanc-pur); }
.orga-nav .badge:not(.dot) { margin-left: auto; }
/* Page Alertes ouverte : pastille blanche, chiffre rouge, pour qu'elle se détache du lien rouge (D10) */
.orga-nav a.on .badge:not(.dot) { background: var(--hx-blanc-pur); color: var(--accent-hover); }
.orga-side__pied { margin-top: auto; border-top: 1px solid #2A2A28; padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.orga-qui { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.orga-qui__rond {
  width: 36px; height: 36px; border-radius: 50%; background: var(--surface-page); color: var(--hx-noir); flex: none;
  display: flex; align-items: center; justify-content: center; font-weight: var(--fw-heavy);
}
.orga-qui__txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.orga-qui__txt .small { color: var(--text-inverse-secondary); }

@media (min-width: 900px) {
  body.orga, body.orga.terrain-page { flex-direction: row; }
  .orga-side { position: sticky; top: 0; align-self: flex-start; flex: 0 0 248px; width: 248px; height: 100vh; height: 100dvh; overflow-y: auto; }
  #menu-fermer { display: none; }
  .orga-voile { display: none !important; }
  /* Replié : rail de pictogrammes, libellés lus seulement par les lecteurs d'écran, nom au survol (title) */
  body.menu-replie .orga-side { flex-basis: 76px; width: 76px; padding: 18px 0 20px; align-items: center; gap: 16px; }
  .menu-replie .orga-side__haut { flex-direction: column; padding: 0; gap: 16px; }
  .menu-replie .orga-logo-long { display: none; }
  .menu-replie .orga-logo-icone { display: block; }
  .menu-replie .orga-nav { gap: 4px; }
  .menu-replie .orga-nav[aria-label="Pages"] { margin-top: 4px; }
  .menu-replie .orga-nav a { width: 48px; height: 48px; min-height: 48px; padding: 0; justify-content: center; }
  .menu-replie .orga-lib, .menu-replie .orga-qui__txt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .menu-replie .orga-side__pied { align-items: center; width: 48px; gap: 8px; }
  .menu-replie .orga-qui { padding: 0; }
}

/* Tiroir (moins de 900 px) : bouton « Menu » dans la barre du haut, menu fixe de 316 px à gauche */
@media (max-width: 899.98px) {
  .orga-haut {
    display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px;
    background: var(--hx-noir); color: var(--text-inverse); border-bottom: 3px solid var(--accent);
  }
  .orga-haut__menu {
    width: auto; padding: 0 12px; gap: 8px; font: var(--fw-heavy) 13px var(--font-text);
    letter-spacing: .08em; text-transform: uppercase;
  }
  .orga-haut__menu .badge { margin-left: 2px; letter-spacing: 0; }
  .orga-haut__icone { height: 30px; display: block; margin-left: auto; }
  .orga-side {
    position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; width: 316px; max-width: calc(100vw - 40px);
    overflow-y: auto; padding: 14px 14px 20px; gap: 20px; box-shadow: var(--shadow-2);
    visibility: hidden; transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  .menu-ouvert .orga-side { visibility: visible; transform: none; transition: transform var(--dur-base) var(--ease-out), visibility 0s; }
  .orga-logo-long { width: 160px; }
  #menu-plier { display: none; }
  .orga-nav a { min-height: 48px; font-size: 15px; }
  .orga-voile { position: fixed; z-index: 39; inset: 0; background: var(--hx-gris-800); opacity: .72; }
  body.menu-ouvert { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .orga-side { transition: none !important; } }

/* Impression : seule la page sort, tableaux en entier (sans défilement ni coupure de ligne interdite),
   sans boutons ni formulaires ; fonds des pastilles, barres et cartes gardés */
@media print {
  .orga-side, .orga-haut, .orga-voile { display: none !important; }
  body.orga { display: block; }
  .orga .tb-defile, .orga .ca-defile, .orga .eq-defile { overflow: visible !important; }
  .orga table.o-t th, .orga table.o-t td { white-space: normal; padding: 6px 4px; }
  .orga :is(.ca-remise, .ca-jour__btn, .tb-filtres, .eq-ajout, .eq-actions, .o-tete__actions .btn) { display: none !important; }
  .orga :is(.seg button[aria-pressed="true"], .pill, .bar > i, .tb-pile > i, .o-kpi) {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}
/* ==== ORGA COQUILLE : fin ==== */

/* ==== ORGA CONNEXION (agent coquille) : début ==== */
/* Connexion (D0, D0b, D1, D2) : bande noire, carte de 980 px en deux parties (motif, formulaire).
   Téléphone (D0c) : une colonne, identifiant d'abord, Google en bas. Un seul bouton Google, déplacé dans le DOM
   par admin.js (en haut ; en bas sur téléphone et pendant un blocage) : l'ordre affiché est l'ordre du DOM. */
.orga-cx { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.orga-cx :where(p) { margin: 0; }
.orga-cx .btn { margin-top: 0; min-height: 52px; padding: 0 20px; gap: 10px; line-height: 1.2; text-align: center; }
.orga-cx .btn.dark { border-color: var(--hx-noir); }
.orga-cx__bande { background: var(--hx-noir); padding: 14px 16px; border-bottom: 3px solid var(--accent); }
.orga-cx__bande img { width: 160px; display: block; }
.orga-cx__main { flex: 1; display: flex; flex-direction: column; }
.orga-cx__carte { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.orga-cx__motif { display: none; }
.orga-cx__form { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 24px 16px; min-width: 0; }
.orga-cx__tel { display: flex; flex-direction: column; gap: 14px; }
.orga-cx__tel h1 { font-size: 30px; }
.orga-cx__tete { display: flex; align-items: center; gap: 12px; }
.orga-cx__tete h2 { font-size: 28px; margin: 0; }
.orga-cx__cadenas {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-hover);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.orga-cx__google { display: flex; flex-direction: column; gap: 10px; }
.orga-cx__reste { display: none; }
.orga-cx__ou { display: flex; align-items: center; gap: 12px; }
.orga-cx__ou span { flex: 1; height: 1px; background: var(--border-subtle); }
.orga-cx__note-haut:empty, .orga-cx__note:empty { display: none; }
.orga-cx__formulaire { display: flex; flex-direction: column; gap: 14px; }
.orga-cx .note.err > div { min-width: 0; overflow-wrap: anywhere; }

/* Mot de passe : bouton « Afficher » dans le champ */
.orga-cx__mdp { position: relative; }
.orga-cx__mdp input { padding-right: 110px; }
.orga-cx__voir {
  position: absolute; right: 4px; top: 4px; height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 6px;
  background: transparent; border: 0; border-radius: var(--radius-1); color: var(--text-primary);
  font: var(--fw-heavy) 13px var(--font-text); cursor: pointer;
}
.orga-cx__voir:hover { background: var(--hx-gris-100); }

/* Blocage (D2) : formulaire grisé, heure de fin et minutes restantes, Google en bas sous un filet */
.orga-cx__bloc { flex-direction: column; align-items: stretch; gap: 10px; }
.orga-cx__fin { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.orga-cx__min { font-size: 26px; color: var(--accent-hover); white-space: nowrap; }
.orga-cx__barre { height: 8px; min-width: 0; background: var(--surface-card); }
.bloque .orga-cx__tete { display: flex; }
.bloque .orga-cx__ou, .bloque .orga-cx__qui, .bloque .orga-cx__oubli, .bloque .orga-cx__voir { display: none; }
.bloque .orga-cx__google { border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.bloque .orga-cx__reste { display: block; }
.bloque .fld label { color: var(--text-secondary); }
.bloque input:disabled { background: var(--hx-gris-100); color: var(--hx-gris-400); }
.bloque .orga-cx__mdp input { padding-right: 14px; }
.orga-cx #lsubmit:disabled, .orga-cx #lsubmit:disabled:hover {
  background: var(--hx-gris-100); color: var(--text-secondary); border-color: var(--border-subtle); opacity: 1;
}

/* Téléphone : où chacun arrive après la connexion */
.orga-cx__arrivee {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  padding: 14px; display: flex; flex-direction: column; gap: 12px; margin-top: 4px;
}
.orga-cx__arr { display: flex; gap: 12px; align-items: center; }
.orga-cx__pst2 {
  width: 40px; height: 40px; flex: none; background: var(--hx-noir); color: var(--text-inverse);
  border-radius: 4px 14px 4px 14px; display: flex; align-items: center; justify-content: center;
}

@media (max-width: 719.98px) {
  .orga-cx__prenom { display: none; }
  .orga-cx__tete { display: none; }
  .orga-cx__ou { display: none; }
  .orga-cx__google { margin-top: auto; border-top: 1px solid var(--border-subtle); padding-top: 14px; gap: 8px; }
  .orga-cx__google .btn { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-strong); min-height: 48px; font-size: 13px; }
  .orga-cx__google .btn:hover { background: var(--hx-noir); color: var(--text-inverse); }
  .orga-cx__oubli { text-align: center; margin-top: -6px; }
  .orga-cx__form:not(.avec-google) .orga-cx__oubli { margin-top: auto; border-top: 1px solid var(--border-subtle); padding-top: 14px; }
}

@media (min-width: 720px) {
  .orga-cx__bande { padding: 14px 32px; }
  .orga-cx__bande img { width: 170px; }
  .orga-cx__main { align-items: center; justify-content: center; padding: 40px 24px; }
  .orga-cx__carte {
    flex: none; flex-direction: row; flex-wrap: wrap; width: 100%; max-width: 980px; overflow: hidden;
    background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  }
  .orga-cx__motif { flex: 1 1 380px; display: flex; flex-direction: column; gap: 16px; padding: 40px; color: var(--text-inverse); }
  .orga-cx__motif .lbl { color: var(--hx-gris-400); }
  .orga-cx__motif h1 { font-size: 44px; }
  .orga-cx__motif > p { color: var(--text-inverse-secondary); font-size: 15px; }
  .orga-cx__roles { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .orga-cx__roles li { display: flex; gap: 14px; align-items: center; }
  .orga-cx__roles li > span:last-child { display: flex; flex-direction: column; }
  .orga-cx__roles .small { color: var(--text-inverse-secondary); }
  .orga-cx__pst {
    width: 44px; height: 44px; flex: none; background: var(--surface-page); color: var(--hx-noir);
    border-radius: 4px 16px 4px 16px; display: flex; align-items: center; justify-content: center;
  }
  .orga-cx__form { flex: 1 1 420px; gap: 16px; padding: 40px; }
}
/* ==== ORGA CONNEXION : fin ==== */

/* ==== ORGA TERRAIN GRAND ÉCRAN (agent coquille) : début ==== */
/* Contrôle entrée (D12) et activation (D13) vus par l'organisateur : en-tête de page avec le bouton Son.
   Grand écran (classe cote posée par scanner.js : au moins 1000 px à droite du menu) : saisie à gauche ; verdict,
   puis derniers scans ou activations récentes en tableau, à droite. Sinon : écran de terrain habituel sous l'en-tête. */
.orga-terrain > .o-tete { padding: 18px 16px 14px; flex-wrap: nowrap; align-items: flex-end; }
.orga-terrain > .o-tete .o-tete__txt { flex: 1; }
.orga-terrain > .o-tete h1 { font-size: 30px; }
.orga-droite:empty { display: none; }
/* Le tableau défile dans son panneau plutôt que la page, si la place manque */
.orga-liste {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  padding: 14px 16px 6px; display: flex; flex-direction: column; min-width: 0; overflow-x: auto;
}
/* Titre et remarque côte à côte, chacun passe à la ligne si la place manque (D12) */
.orga-liste__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding-bottom: 6px; }
.orga-liste__vide { padding: 4px 0 10px; }
.orga-liste table.o-t tbody tr:last-child > td { border-bottom: 0; }
.orga-liste .mono { font-size: 13px; }
/* Nom de l'acheteur : passe à la ligne (jusqu'à 80 caractères) */
.orga-liste td.orga-acheteur { white-space: normal; overflow-wrap: anywhere; min-width: 100px; }
.orga-liste tr.orga-dernier.ok > td { background: var(--etat-ok-pale); }
.orga-liste tr.orga-dernier.warn > td { background: var(--etat-alerte-pale); }
.orga-liste tr.orga-dernier.bad > td { background: var(--accent-soft); }
.orga-liste tr.orga-dernier.net > td { background: var(--hx-gris-100); }
/* Activations récentes en tableau : lignes tr.act (les styles de liste .act ne s'appliquent pas) */
.orga-liste tr.act { display: table-row; margin: 0; padding: 0; border: 0; background: none; }
.orga-liste tr.act.recent > td { background: var(--etat-ok-pale); }
.orga-liste tr.act.annulee > td { background: var(--hx-gris-100); }
.orga-liste tr.act.close .mono, .orga-liste tr.act.close .num { color: var(--text-secondary); }
.orga-liste tr.act.annulee .mono { color: var(--text-secondary); text-decoration: line-through; }
/* « Annuler · 9:58 » en bouton secondaire de la charte (capitales) ; armé : « Confirmer : » puis le code dessous */
.orga-liste .undo.ligne {
  display: inline-flex; flex-direction: row; gap: 4px; min-height: 40px; padding: 0 16px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
}
.orga-liste .undo.ligne .tabnum { font-size: 13px; }
.orga-liste .undo.ligne.arme { flex-direction: column; gap: 0; padding: 4px 12px; white-space: normal; }
.orga-liste .undo.ligne.arme small { letter-spacing: 0; }
.orga-liste .act__msg { justify-content: flex-end; margin-top: 4px; white-space: normal; }

.terrain.orga-terrain.cote {
  max-width: none; margin: 0; padding: 28px 32px 40px; display: grid; align-content: start; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto auto 1fr; column-gap: 18px;
}
.orga-terrain.cote > .o-tete { grid-column: 1 / -1; grid-row: 1; padding: 0; margin-bottom: 14px; align-items: flex-end; }
.orga-terrain.cote > .o-tete h1 { font-size: 36px; }
/* Bouton Son de 40 px, comme la maquette ; 44 px sur téléphone (.btn.sm) */
.orga-terrain.cote > .o-tete .btn.sm { min-height: 40px; }
.orga-terrain.cote .scanner { display: contents; }
/* Compteur : texte discret, aligné à droite, sans fond noir */
main.orga-terrain.cote .scanner > .statut {
  grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; gap: 4px 18px; padding: 0; margin-bottom: 14px;
  background: none; color: var(--text-secondary); font-size: 13px;
}
.orga-terrain.cote .statut strong { color: var(--text-primary); }
.orga-terrain.cote .statut__pret { color: var(--text-primary); }
.orga-terrain.cote .statut__pret i { background: var(--hx-noir); }
.orga-terrain.cote .statut__pret.off i { background: transparent; border-color: var(--hx-noir); }
main.orga-terrain.cote .scanner > .pret { grid-column: 1; grid-row: 3 / -1; padding: 0; gap: 12px; }
main.orga-terrain.cote .scanner > .verdict { grid-column: 2; grid-row: 3; z-index: auto; margin-bottom: 18px; }
main.orga-terrain.cote .scanner.plein > .verdict { grid-column: 1 / -1; }
.orga-terrain.cote > .orga-droite { grid-column: 2; grid-row: 4; min-width: 0; }
.orga-terrain.cote .cam { height: 300px !important; }
.orga-terrain.cote .vd { border-radius: var(--radius-2); }
.orga-terrain.cote .vd-suite { padding: 12px 0 0; }
/* D12 : entrée validée, rond et titre sur une ligne */
.orga-terrain.cote .vd.ok.centre {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 16px;
  text-align: left; padding: 16px 20px 20px;
}
.orga-terrain.cote .vd.ok.centre > * { grid-column: 1 / -1; margin: 0; }
.orga-terrain.cote .vd.ok.centre > .vd__rond { grid-column: 1; width: 72px; height: 72px; }
.orga-terrain.cote .vd.ok.centre > .vd__rond .ico { width: 44px; height: 44px; }
.orga-terrain.cote .vd.ok.centre > h1 { grid-column: 2; }
.orga-terrain.cote .vd.ok.centre > .vd__bloc { text-align: center; }
/* D13 : billet activé, montant à 48 px */
.orga-terrain.cote .vd.ok .vd__rond.r40 { width: 44px; height: 44px; }
.orga-terrain.cote .vd.ok h1.fs30 { font-size: 34px; }
.orga-terrain.cote .vd__heure.p { font-size: 20px; }
.orga-terrain.cote .vd__encaisser .d { font-size: 48px; }
/* ==== ORGA TERRAIN GRAND ÉCRAN : fin ==== */

/* ==== ORGA TABLEAU (agent tableau, D3, D3b) : début ==== */
/* Tableau de bord : <main class="o-page tb">. D3 sur ordinateur, D3b sur téléphone (moins de 720 px) ;
   cartes de D3b aussi quand la page, sans ses marges, fait moins de 820 px (index.html, LARGEUR_TABLEAUX). */
.tb > :empty { display: none; }
/* relative : les textes .sr des cellules restent dans la zone qui défile (sinon la page déborde) */
.tb-defile { position: relative; overflow-x: auto; min-width: 0; }

/* Alertes en tête : section.note.err (ordinateur) ou a.note.err (téléphone, l'encart entier est un lien) */
.tb-alerte { align-items: stretch; color: var(--text-primary); }
.tb-alerte > .ico { margin-top: 2px; }
.tb-alerte__txt { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.tb-alerte.info { align-items: center; }
.tb-heure { font-weight: var(--fw-bold); }
.tb-voir { align-self: center; font-weight: var(--fw-heavy); white-space: nowrap; }
a.tb-alerte { flex-direction: column; gap: 6px; text-decoration: none; }
a.tb-alerte:hover { color: var(--text-primary); }
.tb-alerte__titre { display: flex; align-items: center; gap: 8px; }
.note.err .tb-alerte__titre .ico { color: var(--accent-hover); }
a.tb-alerte .tb-voir { align-self: flex-start; text-decoration: underline; text-underline-offset: 3px; }
a.tb-alerte:hover .tb-voir { color: var(--accent-hover); }

/* Chiffres clés : Recettes avec la bordure rouge ; 2 colonnes tant que 4 ne tiennent pas */
.tb-recettes { border-top-color: var(--accent); }
.tb .o-kpi .bar { min-width: 0; }
.bar.tb-noir > i { background: var(--hx-noir); }
@media (min-width: 720px) and (max-width: 1199.98px) { .tb .o-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ventes par canal : titre, barre empilée et légende sur une ligne */
.tb-canal { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding: 18px 20px; }
.tb-pile { flex: 1 1 300px; display: flex; height: 24px; border-radius: var(--radius-1); overflow: hidden; background: var(--hx-gris-100); }
.tb-pile > i { display: block; height: 100%; }
.tb-c-ligne { background: var(--hx-noir); }
.tb-c-guichet { background: var(--accent); }
.tb-c-papier { background: var(--hx-gris-400); }
.tb-legende { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.tb-leg { display: flex; align-items: center; gap: 8px; }
.tb-leg > i { width: 12px; height: 12px; flex: none; }

/* Tableaux */
.tb-remp .bar { min-width: 70px; }
.tb-billets { font-weight: var(--fw-bold); }
/* Textes qui passent à la ligne si la place manque (catégorie, stock papier, canal, acheteur, billets d'une commande),
   pas le téléphone */
.tb-t .tb-mot { white-space: normal; overflow-wrap: anywhere; min-width: 96px; }
.tb-t .tb-mot .small { white-space: nowrap; }

/* Commandes : recherche avec loupe, filtre par statut */
.tb-filtres { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tb-cherche { position: relative; flex: 1 1 320px; min-width: 0; }
.tb-cherche > .ico { position: absolute; left: 14px; top: 50%; margin-top: -9px; color: var(--text-secondary); pointer-events: none; }
.tb-cherche input { min-height: 50px; padding: 0 14px 0 42px; font-size: 16px; }
.tb .tb-plus, .tb .tb-export { min-height: 48px; padding: 0 20px; }

/* Téléphone (D3b) : cartes au lieu des tableaux, commandes et export en bas sans panneau.
   Place étroite sur ordinateur ou tablette : mêmes cartes, sur deux colonnes s'il y a la place. */
.tb-cats, .tb-ords { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.tb-cats > .o-h2 { grid-column: 1 / -1; }
.tb-carte, .tb-ord {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  display: flex; flex-direction: column; min-width: 0;
}
.tb-carte { padding: 14px; gap: 8px; }
.tb-carte__haut, .tb-carte__ligne, .tb-ord__haut, .tb-ord__ligne { display: flex; justify-content: space-between; gap: 12px; }
.tb-carte__haut { align-items: baseline; }
.tb-carte__haut strong { font-size: 16px; overflow-wrap: anywhere; }
.tb-carte__haut .small { white-space: nowrap; }
.tb-carte__ligne { font-size: 14px; }
.tb-carte .bar { min-width: 0; }
.tb-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.tb-mini span {
  display: block; color: var(--text-secondary); font-size: 10px; font-weight: var(--fw-heavy);
  letter-spacing: .08em; text-transform: uppercase;
}
.tb-ord { padding: 12px; gap: 4px; }
.tb-ord:focus-visible { outline-offset: 2px; }
.tb-ord__haut { align-items: center; }
.tb-ord__haut .mono { font-size: 13px; overflow-wrap: anywhere; white-space: normal; }
.tb-ord__ligne strong:first-child { overflow-wrap: anywhere; min-width: 0; }
.tb-ord .tb-billets { align-self: flex-start; font-weight: var(--fw-heavy); }
@media (max-width: 719.98px) {
  .tb-canal { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; padding: 14px; }
  .tb-pile { flex: none; height: 18px; }
  .tb-legende { flex-direction: column; flex-wrap: nowrap; gap: 4px; font-size: 14px; }
  .tb-leg > i { width: 10px; height: 10px; }
  .tb-leg__lib { flex: 1; }
  .tb .o-kpi.tb-recettes, .tb .o-kpi.tb-large { grid-column: 1 / -1; }
  .tb .tb-recettes .o-kpi__v { font-size: 30px; }
  /* Texte sous le chiffre sans écart, comme D3b */
  .tb .o-kpi__v + .small { margin-top: -6px; }
  .tb-cats .o-h2, .tb-cmd .o-h2 { margin-top: 4px; }
  .tb-cmd { background: none; border: 0; border-radius: 0; padding: 0; }
  .tb-filtres { flex-direction: column; align-items: stretch; gap: 14px; }
  .tb-cherche { flex: none; }
  .tb-cherche > .ico { display: none; }
  .tb-cherche input { padding-left: 14px; }
}
/* ==== ORGA TABLEAU : fin ==== */

/* ==== ORGA ÉQUIPE (agent équipe, D4, D4b, D5) : début ==== */
/* Équipe : <main class="o-page eq">. Formulaire en 4 colonnes alignées, tableau des comptes, boîte de confirmation
   sous la ligne (D4, D5), encarts du mot de passe affiché une seule fois (D4b, D5). */
.eq-intro { max-width: 760px; }
.eq :where(#eq-form-note, #eq-liste-note, .eq-pop__note):empty { display: none; }

/* Encarts en haut de page, le plus récent d'abord */
.eq-encarts { display: flex; flex-direction: column; gap: 20px; container-type: inline-size; }
.eq-encarts:empty { display: none; }
.eq-succes { scroll-margin-top: 16px; }
.eq-succes .o-succes__tete {
  margin: 0; font-family: var(--font-text); font-style: normal; font-stretch: normal; text-transform: none;
  letter-spacing: 0; line-height: 1.3;
}
.eq-succes .o-secret .btn.secondary { background: var(--surface-card); }
.eq-succes .o-secret .btn.secondary:hover { background: var(--hx-noir); color: var(--hx-blanc); }
.eq-succes .o-secret .ico { width: 16px; height: 16px; }
/* D4b : deux colonnes (compte, comment le remettre) */
.eq-cree { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 28px; }
.eq-cree__g, .eq-cree__d { display: flex; flex-direction: column; min-width: 0; }
.eq-cree__g { gap: 14px; }
.eq-cree__d { gap: 10px; }
.eq-cree .o-secret__v { font-size: 19px; }
@media (min-width: 720px) { .eq-cree .o-secret { grid-template-columns: minmax(110px, max-content) minmax(0, 1fr) auto; } }
.eq-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.eq-etapes li { display: flex; gap: 10px; }
.eq-etapes .d { font-size: 18px; color: var(--accent-hover); flex: none; }
.eq-hote { overflow-wrap: anywhere; }
.eq-cree__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
@container (max-width: 819.98px) { .eq-cree { grid-template-columns: minmax(0, 1fr); } .eq-cree__actions { margin-top: 4px; } }
/* D5 : une colonne */
.eq-mdp { max-width: 640px; }
@media (min-width: 720px) { .eq-mdp .o-secret { grid-template-columns: 130px minmax(0, 1fr) auto; } }
/* Téléphone : le mot de passe tient sur une ligne à côté de Copier */
@media (max-width: 719.98px) { .eq-succes .o-secret__v, .eq-cree .o-secret__v { font-size: 17px; } }

/* Ajouter une personne : 4 colonnes alignées (2 sur tablette, 1 sur téléphone) ; erreurs sous les champs.
   Le champ Point de retrait est caché pour un contrôleur, sa place gardée sur grand écran. */
.eq-ajout { container-type: inline-size; }
.eq-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.eq-form .fld input { min-height: 50px; font-size: 16px; }
.eq-form .o-select select { font-size: 14px; padding-right: 36px; }
.eq-form .btn { margin-top: 0; min-height: 50px; padding: 0 20px; }
.eq-vide, .eq-cache { display: none; }
@container (min-width: 480px) {
  .eq-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .eq-form > .fld { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
  .eq-form > .fld > label { margin-bottom: 6px; }
  .eq-form .errmsg { margin-top: 6px; }
  .eq-vide { display: block; }
  .eq-form > .eq-cache { display: grid; visibility: hidden; }
}
@container (min-width: 480px) and (max-width: 759.98px) { .eq-form > .fld:nth-child(n+3) { margin-top: 14px; } }
@container (min-width: 760px) { .eq-form { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .eq-form .o-select select { font-size: 16px; padding-right: 40px; } }

/* Liste : boutons côte à côte s'il y a la place (menu replié, D4), l'un sous l'autre sinon (D4b).
   Moins de 900 px de liste (menu déplié sur un petit écran, tablette) : colonnes Identifiant et Point de retrait
   masquées, reprises sous le nom et le rôle (.eq-sous), pour que les boutons restent visibles. */
.eq-liste { gap: 10px; container-type: inline-size; }
.eq-zone { position: relative; }
/* position : les textes .sr des boutons restent dans le défilement (sinon la page entière défile) */
.eq-defile { overflow-x: auto; position: relative; }
.eq-t .eq-login { font-weight: 500; }
/* Nom : « Nouveau » sur la ligne du nom (D4b, colonnes resserrées : .serre) ; dessous s'il manque de la place.
   Nom (40 caractères) et point de retrait longs : sur plusieurs lignes. Identifiant long : coupé après
   ses points (<wbr>), n'importe où en dernier recours */
.eq-t :is(td.eq-nom, td.eq-role, td.eq-point, .eq-login) { white-space: normal; }
.eq-t :is(td.eq-nom strong, td.eq-point, .eq-sous) { overflow-wrap: break-word; }
.eq-t .eq-login { overflow-wrap: anywhere; }
.eq-sous { display: none; margin-top: 2px; }
@container (max-width: 899.98px) {
  .eq-t :is(th, td):is(:nth-child(2), :nth-child(4)) { display: none; }
  .eq-sous { display: block; }
}
.eq-t th.eq-col-actions { text-align: right; }
.eq-nouveau { margin-left: 6px; }
/* Texte des boutons sur deux lignes plutôt qu'un tableau qui déborde (police plus large, point de retrait long) */
.eq-t td.eq-col-actions { white-space: normal; }
.eq-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.eq-actions .btn { line-height: 1.2; text-align: center; }
@container (min-width: 1060px) { .eq-actions { flex-flow: row wrap; justify-content: flex-end; gap: 6px 8px; } }
.eq-t .btn.secondary { background: var(--surface-card); }
.eq-t .btn.secondary:hover { background: var(--hx-noir); color: var(--hx-blanc); }
.eq-t .btn.secondary:disabled:hover { background: var(--surface-card); color: var(--text-primary); }
.eq-t .btn.dark { border-color: var(--hx-noir); }

/* Liste de moins de 600 px (téléphone, menu déplié sur un écran de 900 px) : une carte par compte.
   Nom et État ; identifiant ; rôle et point ; les deux boutons côte à côte. */
@container (max-width: 599.98px) {
  .eq-t, .eq-t tbody { display: block; }
  .eq-t thead { display: none; }
  .eq-t tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: start;
    padding: 14px 10px; border-bottom: 1px solid var(--border-subtle);
  }
  .eq-t tr:first-child { border-top: 1px solid var(--border-subtle); }
  .eq-t td { display: block; }
  table.o-t.eq-t td { padding: 0; border: 0; white-space: normal; }
  .eq-t td.eq-nom :is(strong, .eq-sous) { white-space: normal; overflow-wrap: anywhere; }
  .eq-t td.eq-etat { grid-area: 1 / 2; }
  .eq-t td.eq-role, .eq-t td.eq-col-actions { grid-column: 1 / -1; }
  .eq-t td.eq-role { font-size: var(--fs-small); }
  .eq-t td.eq-role .eq-sous { display: inline; }
  .eq-t td.eq-role .eq-sous::before { content: " · "; }
  .eq-t td.eq-col-actions { margin-top: 4px; }
  .eq-actions { flex-direction: row; }
  .eq-actions .btn { flex: 1 1 0; min-width: 0; padding: 6px 10px; }
  /* Fond de la carte entière (l'écart entre les cellules compris) */
  .eq-t tr.o-verte { background: var(--etat-ok-pale); }
  .eq-t tr.o-rose { background: var(--accent-soft); }
}

/* Boîte de confirmation : sous la ligne, à droite, 440 px ; pleine largeur sur téléphone */
.eq-pop { position: absolute; z-index: 5; right: 0; width: 440px; max-width: 100%; }
@media (max-width: 719.98px) { .eq-pop { left: 0; width: auto; } }
/* ==== ORGA ÉQUIPE : fin ==== */

/* ==== ORGA PAPIER (agent papier, D6, D11, D11b, avec son propre @media print) : début ==== */
/* Billets papier (D6) : formulaire en 4 colonnes, un lot par rangée (réf. | chiffres | actions).
   Planche (D11) : pages A4 empilées sur fond gris, panneaux à droite ; à l'impression, seules les planches sortent.
   Lot introuvable (D11b) : encart .o-vide des communs.
   Ruptures : panneau de moins de 900 px (place à droite du menu), formulaire et rangées sur deux colonnes ;
   écran de moins de 720 px, une colonne et pages fluides. */
.pp-lot__actions .btn .ico { width: 16px; height: 16px; }
.pp-page > .o-panel { container-type: inline-size; }
.pp-page #msg:empty, .pp-page #charge:empty { display: none; }
.pp-charge { align-items: center; }
.pp-charge > span, .pp-msg > span { flex: 1; }

/* D6 : imprimer un lot */
.pp-intro { max-width: 820px; }
.pp-intro strong { color: var(--text-primary); }
.pp-form { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); }
.pp-form .o-select select { font-size: 15px; }
.pp-form__vide { font-size: 13px; line-height: 1.3; visibility: hidden; }
.pp-form .btn { padding: 0 12px; }

/* D6 : lots imprimés */
.pp-lots { gap: 0; padding-bottom: 4px; }
.pp-lots > .o-h2 { padding-bottom: 12px; }
.pp-lot {
  display: grid; grid-template-columns: 230px minmax(0, 1fr) 210px; gap: 16px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--border-subtle);
}
.pp-lot__id { min-width: 0; }
h3.pp-lot__ref {
  margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-style: normal; font-stretch: normal;
  font-weight: 700; font-size: 16px; line-height: 1.4; letter-spacing: .06em; text-transform: none;
}
.pp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, .8fr)) minmax(0, 1.4fr); gap: 8px; margin: 0; }
.pp-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-stats dt {
  font-size: 11px; font-weight: var(--fw-heavy); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary); line-height: 1.3;
}
.pp-stats dd { margin: 0; font-size: 17px; font-weight: var(--fw-bold); line-height: 1.4; }
.pp-lot__actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-lot__actions > .btn { width: 100%; }
.pp-lot__rien { text-align: center; }
.pp-lot__note { grid-column: 1 / -1; align-items: center; flex-wrap: wrap; }
.pp-lot__note:focus { outline: none; }
.pp-lot__note > span { flex: 1 1 220px; min-width: 0; }
.pp-lot__note .btn { flex: none; }
/* Confirmation en deux temps : fond rose, bordure rouge, « Garder » et « Confirmer » */
.pp-confirme {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-1);
}
.pp-confirme__q { font-weight: var(--fw-bold); }
.pp-confirme__btns { display: flex; gap: 6px; }
.pp-confirme__btns .btn { flex: 1; padding: 0 8px; }
.pp-confirme .btn.secondary, .pp-confirme .btn.secondary:disabled:hover { background: var(--surface-card); }
.pp-confirme .btn.secondary:hover:not(:disabled) { background: var(--hx-noir); color: var(--hx-blanc); }
.pp-vide { padding: 16px 0 12px; border-top: 1px solid var(--border-subtle); }

/* D11 : planche */
.pp-planche { gap: 18px; padding-top: 24px; }
.pp-planche .o-tete h1 { font-size: 34px; }
.pp-planche .o-tete__sous { font-size: var(--fs-body); line-height: var(--lh-body); }
.pp-apercu {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; padding: 24px;
  background: var(--hx-gris-100); border-radius: var(--radius-2);
}
.pp-pages { flex: 0 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pp-feuille { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pp-a4 {
  width: 620px; max-width: 100%; aspect-ratio: 620 / 877; padding: 28px; background: var(--surface-card); box-shadow: var(--shadow-2);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.pp-legende { font-weight: var(--fw-bold); }
.pp-cote { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.panel.pp-encart { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
/* Corps du billet étiré : le pied reste en bas */
.pp-a4 .paper__body { flex: 1; }
h2.pp-lbl { margin: 0; font-family: var(--font-text); font-style: normal; font-stretch: normal; text-wrap: wrap; }
/* Billets de l'aperçu à l'échelle de la page A4 (à l'impression : tailles de .paper, inchangées) */
@media screen {
  .pp-a4 .paper { border-radius: 0; }
  .pp-a4 .paper__top { padding: 6px 9px; gap: 6px; }
  .pp-a4 .paper__top img { width: 84px; display: block; }
  .pp-a4 .paper__top .tag { font-size: 8px; letter-spacing: .08em; padding: 2px 6px; border-radius: 2px; }
  .pp-a4 .paper__body { grid-template-columns: 92px minmax(0, 1fr); gap: 9px; padding: 8px 9px; }
  .pp-a4 .paper__qr { width: 92px; height: 92px; display: block; }
  .pp-a4 .paper__ev { font-size: 14px; line-height: 1; }
  .pp-a4 .paper__info { font-size: 8.5px; line-height: 1.35; margin-top: 3px; }
  .pp-a4 .paper__code { font-size: 11.5px; letter-spacing: .05em; margin-top: 5px; white-space: nowrap; }
  .pp-a4 .paper__serial { font-size: 8.5px; }
  .pp-a4 .paper__foot { padding: 4px 9px; font-size: 7.5px; font-weight: var(--fw-heavy); letter-spacing: .05em; line-height: 1.3; }
}

/* D11b : texte de l'encart à 16 px */
.pp-vide__txt { font-size: 16px; }

/* 900 px : 928 px à 1280 px menu déplié, de quoi garder trois colonnes avec une barre de défilement classique */
@container (max-width: 899.98px) {
  .pp-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-lot { grid-template-columns: minmax(0, 1fr) 210px; }
  .pp-stats { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 719.98px) {
  .pp-form { grid-template-columns: minmax(0, 1fr); }
  .pp-form__vide { display: none; }
  .pp-lot { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pp-stats { grid-row: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-stats > div:last-child { grid-column: 1 / -1; }
  .pp-planche { padding-top: 20px; }
  .pp-planche .o-tete h1 { font-size: 30px; }
  .pp-apercu { padding: 12px; gap: 16px; }
  .pp-pages { flex-basis: 100%; gap: 16px; }
  .pp-a4 { width: 100%; aspect-ratio: auto; padding: 12px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .pp-cote { flex-basis: 100%; padding-top: 0; }
}

/* Impression de la planche : ni fil, ni en-tête, ni boutons, ni panneau, ni légendes ; une page A4 par feuille.
   Format A4, hauteur des billets (64 mm) et couleurs exactes : impression globale (.paper) */
@media print {
  .pp-planche { padding: 0; gap: 0; }
  .pp-planche > .o-fil, .pp-planche > .o-tete, .pp-planche > .note, .pp-cote, .pp-legende { display: none !important; }
  .pp-apercu, .pp-pages, .pp-feuille { display: block; padding: 0; background: none; border-radius: 0; }
  .pp-feuille { break-after: page; page-break-after: always; }
  .pp-feuille:last-child { break-after: auto; page-break-after: auto; }
  .pp-a4 {
    width: auto; max-width: none; aspect-ratio: auto; padding: 0; box-shadow: none;
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 4mm;
  }
}
/* ==== ORGA PAPIER : fin ==== */

/* ==== ORGA GUICHET (agent guichet, D8, D8b) : début ==== */
/* Vente au guichet : billets à gauche, récapitulatif à droite (1.3fr | 1fr) ; une colonne quand le contenu
   fait moins de 720 px. Bandeau de la vente enregistrée en haut (D8b). */
/* Zone lue (role status) toujours présente : vide, elle ne prend pas d'espace (écart de .o-page retiré). */
.gu-statut:empty { margin-bottom: -20px; }
.gu-corps { container-type: inline-size; }
.gu-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@container (max-width: 719.98px) { .gu-grille { grid-template-columns: minmax(0, 1fr); } }

/* Billets : une rangée .gu-cat par catégorie ; .complet grisée ; .err places insuffisantes (rose, filets rouges) */
.gu-billets { --gu-pad: 20px; padding: 20px var(--gu-pad) 4px; gap: 0; }
.gu-billets__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-bottom: 12px; }
.gu-billets__tete strong { color: var(--text-primary); }
.gu-cat { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--border-subtle); }
.gu-cat__info { display: flex; flex-direction: column; min-width: 0; }
.gu-cat__nom { font-size: 22px; overflow-wrap: anywhere; }
.gu-cat__prix { font-weight: var(--fw-heavy); }
.gu-cat__info .pill { align-self: flex-start; margin-top: 4px; }
.gu-cat.complet { color: var(--text-secondary); }
.gu-cat.err {
  margin: 0 calc(-1 * var(--gu-pad)); padding: 18px var(--gu-pad); background: var(--accent-soft);
  border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
}
.gu-cat.err + .gu-cat { border-top: 0; }
.gu-cat__alerte { color: var(--accent-hover); font-weight: var(--fw-heavy); }
.gu-cat__qte { display: flex; align-items: center; gap: 8px; flex: none; }
.gu-cat output { min-width: 28px; text-align: center; font-weight: var(--fw-heavy); font-size: 20px; }

/* Récapitulatif : bordure noire de 2 px dès qu'un billet est choisi (.fort) ; vide, filet sous le total */
.gu-recap .note { margin: 0; }
#gu-err:empty, .gu-lignes:empty { display: none; }
.gu-lignes { display: flex; flex-direction: column; gap: 4px; }
.gu-ligne { display: flex; justify-content: space-between; gap: 12px; }
.gu-total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px;
  border-top: 2px solid var(--border-strong); padding-top: 10px;
}
.gu-total.vide { border-top: 0; padding-top: 0; border-bottom: 2px solid var(--border-strong); padding-bottom: 10px; }
.gu-total__v { font-size: 34px; white-space: nowrap; }
.gu-total.vide .gu-total__v { color: var(--text-secondary); }
.gu-recap .btn { min-height: 52px; padding: 0 20px; line-height: 1.2; }
.gu-recap .btn:disabled, .gu-recap .btn:disabled:hover {
  opacity: 1; background: var(--hx-gris-100); color: var(--text-secondary); border-color: var(--border-subtle);
}

/* Vente enregistrée (D8b) : bordure verte, rond vert et coche, lien vers les billets */
.gu-ok {
  background: var(--surface-card); border: 2px solid var(--etat-ok); border-radius: var(--radius-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 18px 20px;
}
.gu-ok__rond {
  width: 48px; height: 48px; border-radius: 50%; background: var(--etat-ok); color: var(--hx-blanc-pur);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.gu-ok__rond .ico { width: 28px; height: 28px; stroke-width: 3; }
.gu-ok__txt { flex: 1 1 360px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gu-ok__txt strong { font-size: 17px; line-height: 1.35; }
.gu-ok__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 719.98px) {
  .gu-statut:empty { margin-bottom: -14px; }
  .gu-billets { --gu-pad: 16px; padding-top: 16px; }
  .gu-total__v { font-size: 28px; }
  .gu-ok { gap: 12px 16px; padding: 16px; }
  .gu-ok__txt { flex-basis: 200px; }
  .gu-ok__actions, .gu-ok .btn { width: 100%; }
}
/* ==== ORGA GUICHET : fin ==== */

/* ==== ORGA CAISSE ET ALERTES (agent caisse et alertes, D9, D10) : début ==== */
/* Caisse (D9) : journée avec jour précédent et suivant, cartes, écarts signés, formulaire de remise */
/* Blocs de messages vides : pas d'écart en plus dans la colonne */
.o-caisse #charge:empty, .o-caisse #msg:empty, .o-alertes #etat:empty { display: none; }
.ca-charge { align-items: center; }
.ca-charge > span { flex: 1; }
.ca-jour__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ca-jour__ligne input { width: 220px; }
.ca-jour__btn {
  width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0;
  border: 2px solid var(--border-strong); border-radius: var(--radius-1); background: var(--surface-card);
  color: var(--text-primary); cursor: pointer;
}
.ca-jour__btn:hover:not(:disabled) { background: var(--hx-noir); color: var(--hx-blanc); }
.ca-jour__btn:disabled { opacity: .4; cursor: not-allowed; }
.ca-intro { max-width: 820px; margin-top: -8px; }
.o-caisse .o-kpi__v { font-size: 30px; }
/* Haut de carte seul (OK en vert, À surveiller en orange), sans fond pâle */
.o-kpi.ca-haut-vert { border-top-color: var(--etat-ok); }
.o-kpi.ca-haut-orange { border-top-color: var(--etat-alerte); }
.ca-ecart { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ca-rouge { color: var(--accent-hover); }
/* Écart d'une ligne : pastille et montant signé, alignés à droite */
.ca-ec { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
table.o-t tr.ca-total > td { background: var(--surface-page); }
.ca-defile { overflow-x: auto; min-width: 0; }
/* Par personne : la colonne Écart reste visible quand le tableau défile (panneau étroit, menu déplié) */
#rows th:last-child, #rows td:last-child:not([colspan]) {
  position: sticky; right: 0; background: var(--surface-card); box-shadow: -8px 0 8px -8px rgba(11, 11, 11, .25);
}
#rows tr.ca-total > td:last-child { background: var(--surface-page); }
td.ca-remarque { white-space: normal; }
.ca-remise { display: grid; grid-template-columns: 1.2fr .9fr 1.3fr .8fr; gap: 14px; align-items: start; }
.ca-remise .btn { min-height: 50px; padding: 0 20px; }
.ca-remise__vide { font-size: 13px; line-height: 1.3; visibility: hidden; }
/* Case « Correction » sous le montant (remise retirée) : toute la ligne se touche */
.fld .ca-correction { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: var(--fw-regular); cursor: pointer; }
.fld .ca-correction input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); }
.o-aide.ca-du { color: var(--accent-hover); font-weight: var(--fw-bold); }
.ca-h3 { margin: 6px 0 0; font: var(--fw-heavy) 15px/1.3 var(--font-text); text-transform: none; }
@media (max-width: 719.98px) {
  .o-caisse .o-kpi__v { font-size: 22px; }
  .ca-intro { margin-top: 0; }
  .ca-jour { width: 100%; }
  .ca-jour__ligne input { width: auto; flex: 1 1 140px; min-width: 0; }
  .ca-remise { grid-template-columns: minmax(0, 1fr); }
  .ca-remise__vide { display: none; }
}
/* Moins de 1100 px : deux cartes, puis l'écart sur toute la largeur. Un tiers de page ne tient pas
   un montant de 8 chiffres (12 500 000 FCFA) avec une police de secours large. */
@media (min-width: 720px) and (max-width: 1099.98px) { .o-caisse .o-kpis.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1099.98px) { .o-caisse #ecart { grid-column: 1 / -1; } }

/* Alertes (D10) : nombres et notifications en cartes, graves surlignées, mots de passe incorrects regroupés */
.ca-lib { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.3; }
.o-al-cartes { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 12px; }
.o-al-cartes.deux { grid-template-columns: 1fr 1fr; }
.o-al-cartes .o-kpi { gap: 6px; }
.o-al-n { display: flex; align-items: baseline; gap: 10px; }
.o-al-n__v {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-style: italic; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums;
}
.al-push__tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.al-push .btn { align-self: flex-start; }
.o-al-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
table.o-al td { white-space: normal; vertical-align: top; }
table.o-al td.nw, table.o-al td.o-al-code { white-space: nowrap; }
table.o-al .o-al-code { font-size: 13px; }
table.o-al tr.grave > td { background: var(--accent-soft); font-weight: var(--fw-bold); }
table.o-al tr.grave > td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
table.o-al tr.grave .o-al-adr { font-weight: var(--fw-medium); }
.o-al-msg { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.o-al-voir.btn.sm { min-height: 36px; padding: 0; }
.o-al-essais td { background: var(--surface-page); padding-top: 8px; padding-bottom: 8px; }
.o-al-essais td:first-child { padding-left: 20px; }
/* Panneau de moins de 700 px (téléphone, tablette, menu déplié jusqu'à 1023 px) : une fiche par alerte,
   Quand et Niveau sur la première ligne, le reste dessous ; Billet et Personne gardent leur libellé (.sr) */
.o-alertes .o-panel { container-type: inline-size; }
@container (max-width: 699.98px) {
  table.o-al thead { display: none; }
  table.o-al, table.o-al tbody { display: block; }
  table.o-al tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center;
    padding: 12px; border-bottom: 1px solid var(--border-subtle);
  }
  table.o-al td, table.o-al .o-al-essais td { display: block; padding: 0; border: 0; white-space: normal; }
  table.o-al td:nth-child(n+3), table.o-al td[colspan] { grid-column: 1 / -1; }
  table.o-al td:empty { display: none; }
  table.o-al tr.grave { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
  table.o-al tr.grave > td:first-child { box-shadow: none; }
  table.o-al .o-al-essais tr { background: var(--surface-page); padding: 8px 12px 8px 24px; }
}
@media (max-width: 1099.98px) {
  .o-al-cartes { grid-template-columns: 1fr 1fr; }
  .al-push { grid-column: 1 / -1; }
}
@media (max-width: 719.98px) {
  .o-al-cartes { gap: 10px; }
  .o-al-n__v { font-size: 32px; }
  .o-alertes .o-tete__actions, .o-alertes .o-tete__actions .fld { width: 100%; }
  .o-alertes .seg { display: flex; width: 100%; }
  .o-alertes .seg button { flex: 1; padding: 0 8px; white-space: normal; line-height: 1.2; }
}
/* ==== ORGA CAISSE ET ALERTES : fin ==== */

/* ==== PARTICIPANTS ET BADGES : début ==== */
/* Événement contrôlé, au-dessus de la caméra (contrôle à l'entrée) */
.porte { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.orga-terrain .porte { padding: 0 0 12px; }
.porte[hidden] { display: none; }
.porte .seg button { white-space: normal; line-height: 1.15; padding: 4px 8px; }
.porte .seg button[aria-pressed="true"] { background: var(--accent); }
.porte__nom { font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
.porte__ev { margin-top: 4px; font-size: 20px; line-height: 1.1; }
.porte .note { margin: 0; }
.porte .btn { margin-top: 0; }

/* Logo rond du parti dans le menu et sur l'écran de connexion */
.orga-logo-long.orga-logo-up, .orga-cx__bande img.orga-logo-up { width: 56px; height: 56px; }

/* Page Participants */
.par #msg:empty, .par #imp-res:empty, .par #fiche:empty { display: none; }
.par-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.par-ev { border: 1px solid var(--border-subtle); border-top: 4px solid var(--hx-noir); border-radius: var(--radius-2); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.par-ev__nom { margin: 0; font: var(--fw-heavy) 18px/1.2 var(--font-text); text-transform: none; }
.par-ev__chiffres { font-size: 15px; }
.par-ev__chiffres strong { font-size: 22px; }
.par-ev progress { width: 100%; height: 8px; accent-color: var(--etat-ok); }
.par-ev__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.par-ev__actions .btn { margin-top: 0; }
.par-vide { font-size: 13px; line-height: 1.3; visibility: hidden; }
.par-imp { display: flex; flex-direction: column; gap: 12px; }
.par-imp textarea { width: 100%; min-height: 110px; padding: 10px 14px; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; }
.par-imp__bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.par-imp__bas .btn { margin-top: 0; }
.par-imp input[type="file"] { min-height: 0; padding: 8px 0; border: 0; background: none; font-size: 14px; }
.par-apercu, .par-fiche { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--hx-gris-100); border-radius: var(--radius-2); }
.par-ap__titre { margin: 0; font: var(--fw-heavy) 17px/1.3 var(--font-text); text-transform: none; }
.par-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.par-ignorees { margin: 6px 0 0; padding-left: 18px; }
.par-cas-liste { display: flex; flex-direction: column; gap: 10px; }
.par-cas, .par-coches { margin: 0; padding: 12px 14px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-1); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.par-cas legend, .par-coches legend { padding: 0 4px; font-size: 14px; }
.par-coches legend { font-weight: var(--fw-bold); }
.par-choix { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; font-weight: var(--fw-regular); cursor: pointer; }
.par-choix input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; accent-color: var(--hx-noir); }
.par-ap__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.par-ap__bas .btn { margin-top: 0; }
.par-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.par-entete .btn { margin-top: 0; }
.par-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.par-outils .fld { flex: 1 1 260px; }
.par-outils #filtres { min-width: 0; max-width: 100%; overflow-x: auto; }
/* position : le texte masqué de l'en-tête reste dans la zone qui défile */
.par-defile { position: relative; overflow-x: auto; }
.par-t td { vertical-align: top; }
.par-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.par-t__actions { white-space: nowrap; text-align: right; }
.par-t__actions .btn { margin: 0 0 0 6px; padding: 0 2px; min-height: 28px; }
.par-effacer summary { cursor: pointer; }
.par-effacer[open] { gap: 12px; }
@media (max-width: 719.98px) {
  .par-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .par-t__actions { white-space: normal; text-align: left; }
}

/* Page Badges : choix de l'impression */
.par-filtres { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
.par-filtres .fld { flex: 1 1 200px; }
.par-filtres__coche { align-self: center; }

/* Badge : texte à gauche, QR code à droite, événements en bas. Tailles d'impression ; aperçu à l'échelle plus bas. */
.bd__top { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 2px solid var(--hx-noir); }
.bd__top img { width: 34px; height: 34px; display: block; flex: none; }
.bd__parti { font-size: 10px; font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; }
.bd__corps { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 8px; padding: 7px 10px; align-items: center; overflow: hidden; }
.bd__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bd__nom {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-style: italic;
  text-transform: uppercase; font-size: 21px; line-height: 1.02; overflow-wrap: anywhere;
}
.bd__prenoms { font-size: 15px; font-weight: var(--fw-bold); line-height: 1.15; overflow-wrap: anywhere; }
.bd__qualite { font-size: 11px; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.bd__lieu { font-size: 10px; line-height: 1.2; color: var(--text-secondary); overflow-wrap: anywhere; }
.bd__qrbloc { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bd__qr { width: 118px; height: 118px; display: block; image-rendering: pixelated; }
.bd__code { font: 700 10px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; white-space: nowrap; }
.bd__ev { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 10px; border-top: 1px solid var(--border-subtle); }
.bd__ev span {
  padding: 2px 7px; border-radius: 2px; background: var(--hx-noir); color: var(--hx-blanc-pur); font-size: 10px; font-weight: var(--fw-heavy);
  text-transform: uppercase; letter-spacing: .04em; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@media screen {
  .pp-a4 .bd__top { padding: 4px 8px; gap: 6px; }
  .pp-a4 .bd__top img { width: 26px; height: 26px; }
  .pp-a4 .bd__parti { font-size: 8px; }
  .pp-a4 .bd__corps { grid-template-columns: minmax(0, 1fr) 84px; gap: 6px; padding: 5px 8px; }
  .pp-a4 .bd__nom { font-size: 15px; }
  .pp-a4 .bd__prenoms { font-size: 11px; }
  .pp-a4 .bd__qualite { font-size: 8.5px; }
  .pp-a4 .bd__lieu { font-size: 8px; }
  .pp-a4 .bd__qr { width: 84px; height: 84px; }
  .pp-a4 .bd__code { font-size: 7.5px; }
  .pp-a4 .bd__ev { padding: 3px 8px; }
  .pp-a4 .bd__ev span { font-size: 7.5px; padding: 1px 5px; }
}

/* Liste d'émargement */
.par-em-zone { display: flex; flex-direction: column; gap: 6px; background: var(--surface-card); padding: 16px; border-radius: var(--radius-2); overflow-x: auto; }
.par-em__titre { margin: 0; font: var(--fw-heavy) 18px/1.3 var(--font-text); text-transform: none; }
.par-em__titre span { font-weight: var(--fw-regular); }
.par-em__signe { min-width: 120px; }

@media print {
  .par-filtres, .par-badges > #msg { display: none !important; }
  .par-em-zone { padding: 0; overflow: visible; }
  table.par-em { font-size: 9pt; }
  table.par-em th, table.par-em td { padding: 4px 5px; border: 1px solid #999; }
  table.par-em td { height: 7mm; }
  table.par-em .mono { font-size: 8pt; letter-spacing: 0; white-space: nowrap; }
  .par-em__signe { min-width: 0; width: 20%; }
  table.par-em thead { display: table-header-group; }
  table.par-em tr { break-inside: avoid; page-break-inside: avoid; }
}
/* ==== PARTICIPANTS ET BADGES : fin ==== */