/* ============================================================================
   ÉCRAN — BROUILLARD (SAI-02)

   Feuille d'ÉCRAN de la passation « Brouillard » (design_handoff_brouillard,
   razor/wwwroot/css/ecran-brouillard.css). Géométrie, densité et enchaînements
   sont les siens. À charger après modele-erp.css.

   CE QUI N'EST PAS ICI : .tbl-* et .btn — ils viennent du dépôt et ne se
   redéfinissent pas par écran. Ni le BANDEAU D'EN-TÊTE (.et-bandeau*) : la
   passation le livrait dans cette feuille, le dépôt le porte déjà dans
   easytech-theme.css, où un en-tête servi par 45 écrans a sa place. Le
   recopier ici ferait dériver la hauteur d'un écran sur quarante-cinq.

   TROIS FAMILLES DE VALEURS ONT ÉTÉ RENDUES À LEURS JETONS, la passation les
   écrivant en dur (docs/couleurs-en-dur.md) :
     — le blanc sur un aplat : --et-sur-aplat, --et-sur-ardoise-plein ;
     — ce qui se pose SUR l'ardoise de l'en-tête de fenêtre : --et-fond-ardoise,
       --et-filet-ardoise, --et-sur-ardoise, au lieu de six opacités recopiées ;
     — le voile et l'ombre d'un panneau flottant : --et-voile, --et-ombre-flottant.
   Et une COULEUR D'ÉTAT n'est jamais écrite en `color:` (révision du 2026-09-03) :
   l'encre posée sur un fond pâle est le rang -ink, faute de quoi un motif de
   blocage tombe sous le seuil AA dès que la rangée est survolée. Comme mark
   (liseré, filet) la couleur d'état reste — sauf l'ambre, qui prend
   --et-avertissement-mark.

   L'ÉCHELLE TYPO NE DESCEND PAS SOUS 12 px : les 11 px de la passation y
   remontent, sans autre changement de proportion.
   ========================================================================== */

/* ---- Bandeau d'alerte -------------------------------------------------- */

.br-bandeau {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 9px var(--et-bandeau-pad-h);
  font-size: 13px;
  font-weight: 600;
}

.br-bandeau > .bi { flex-shrink: 0; }
.br-bandeau.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.br-bandeau.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }

.br-bandeau-a {
  margin-left: auto;
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ---- Filtres ----------------------------------------------------------- */

.br-filtres {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  background: var(--et-surface);
  border-bottom: 1px solid var(--et-hairline);
}

.br-champ-bloc { padding: 10px 12px; border-right: 1px solid var(--et-hairline); }
.br-champ-bloc:last-child { border-right: 0; }

.br-champ-bloc > label {
  display: block;
  margin-bottom: 4px;
  color: var(--et-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.br-bascules { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.br-coche { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--et-ink); cursor: pointer; }
/* Taille retiree le 2026-09-10 : la case prend les 17 px du gabarit (app.css),
   et 24 px sous 1024 px (lot02). Voir docs/cibles-tactiles.md. */

/* Les contrôles natifs sont dessinés par le navigateur, qui leur arrondit les coins quel
   que soit border-radius : on lui retire le rendu et on redessine le chevron. */
.br-champ {
  box-sizing: border-box;
  height: 30px;
  padding: 0 7px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}

select.br-champ {
  padding-right: 26px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--et-muted) 50%),
    linear-gradient(135deg, var(--et-muted) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.br-champ:focus { border-color: var(--et-form-blue); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.br-champ.mono { font-family: var(--et-font-mono); }
.br-num { font-family: var(--et-font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.br-plein { width: 100%; }
.br-champ-doux { height: 28px; border-color: var(--et-hairline); }
.br-champ-nu { height: 26px; margin-top: 3px; border-color: transparent; font-size: 12px; }

/* ---- Synthèse ---------------------------------------------------------- */

.br-synthese {
  display: flex;
  flex-shrink: 0;
  background: var(--et-surface);
  border-bottom: 2px solid var(--et-filet-fort);
}

.br-mesure {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border-right: 1px solid var(--et-hairline);
}

.br-mesure:last-child { border-right: 0; }

/* Mêmes proportions que les vignettes du module : clé 11 px mono en capitales, valeur
   16 px mono. */
.br-mesure > .n {
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--et-muted);
}

.br-mesure > .v { font-family: var(--et-font-mono); font-size: 16px; font-weight: 600; }

/* ---- Corps et liste ---------------------------------------------------- */

/* LE CORPS EST BORNÉ À LA FENÊTRE sur un poste — même mécanique et mêmes raisons que les
   deux saisies (ecran-saisie-piece.css, .sr-corps) : la coquille ne borne pas .et-scroll,
   c'est le document qui défile, et un brouillard de cent pièces emportait la barre de
   sélection et son bouton de comptabilisation sous le bord. La liste défile dans son cadre,
   la tête reste figée, la barre reste dessous. max-height et non height ; le minimum de
   380 px protège une fenêtre trop basse. Levé sous 1024 px et à l'impression. */
.br-corps {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 380px;
  max-height: calc(100vh - var(--br-au-dessus, 360px));
}
.br-liste { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--et-surface-2); }
.br-scroller { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* La tête se fige dans le cadre borné — z 3, filet inférieur en ombre intérieure qui
   voyage avec la cellule (lot 08). Cette table n'a pas de colonne d'ancrage : elle tient
   en largeur, et sous 720 px elle s'empile au lieu de défiler. */
.br-scroller .br-table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: inset 0 -1px 0 var(--et-table-head-fonce);
}
/* Le cadre de liste du gabarit porte overflow-x:auto, ce qui en fait le conteneur de
   défilement le plus proche de la tête — et il n'est pas borné, donc la tête ne s'y fige
   jamais. La table tient en largeur : le cadre rend son défilement au scroller, comme les
   deux saisies le font pour laisser sortir leur menu. Sous 1024 px le scroller reprend le
   défilement horizontal, et sous 720 px la table s'empile. */
.br-scroller .tbl-defile { overflow: visible; }

/* ---- Colonnes et blocs de filtre --------------------------------------
   La passation les posait en style inline sur chaque <th> et chaque bloc. Une largeur en
   dur dans une page échappe aux paliers et se recopie à la première colonne ajoutée. */

.br-table { width: 100%; }
.br-table .br-col-case { width: 32px; }
.br-table .br-col-journal { width: 56px; text-align: left; }
.br-table .br-col-piece { text-align: left; }
.br-table .br-col-date { width: 96px; text-align: left; }
.br-table .br-col-origine { width: 120px; text-align: left; }
.br-table .br-col-montant { width: 130px; }
.br-table .br-col-controle { width: 170px; text-align: left; }
.br-table .br-col-actions { width: 84px; } /* deux gestes de 28 px, leur écart et le rembourrage de cellule : 76 les faisait passer à la ligne */

.br-lignes { width: 100%; }
.br-lignes .br-col-compte { text-align: left; }
.br-lignes .br-col-montant-ligne { width: 110px; }
.br-lignes .br-col-retrait { width: 30px; }

.br-bloc-mois { flex: 0 0 132px; }
.br-bloc-journal { flex: 0 0 120px; }
.br-bloc-origine { flex: 0 0 150px; }
.br-bloc-groupement { flex: 0 0 160px; }
.br-bloc-recherche { flex: 1 1 auto; min-width: 0; }

/* ---- Table ------------------------------------------------------------- */

.br-rang { cursor: pointer; }
.br-rang:hover { background: var(--et-surface-3); }
.br-rang.est-visee { background: var(--et-tint); }
/* Le liseré dit qu'une pièce ne passera pas, sans repeindre la ligne : un fond rouge sur
   dix rangs rend la table illisible. */
.br-rang.est-bloquante { box-shadow: inset 3px 0 0 var(--et-danger); }

.br-groupe { background: var(--et-surface-2); border-top: 1px solid var(--et-filet-fort); }
.br-groupe:hover { background: var(--et-rang); }
.br-nue::before { display: none !important; }

.br-tronque { min-width: 0; overflow: hidden; }
.br-ref { font-size: 12px; font-weight: 600; color: var(--et-form-blue); }
.br-prevu { margin-left: 7px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }
.br-lib { margin-top: 2px; font-size: 13px; color: var(--et-ink); }
.br-muet { color: var(--et-muted); font-size: 12px; }
.br-fort { font-weight: 600; }
.br-motif { margin-top: 3px; font-size: 12px; color: var(--et-danger-ink); line-height: 1.4; }
.br-motif.est-avertit { color: var(--et-avertissement-ink); }
.br-alerte { font-size: 12px; font-weight: 600; color: var(--et-danger-ink); }
.br-origine { font-size: 12px; color: var(--et-form-blue); text-decoration: none; }
.br-origine:hover { text-decoration: underline; }

.br-jeton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.br-jeton > .bi { font-size: 12px; }
.br-jeton.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.br-jeton.est-bloque { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.br-jeton.est-avertit { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
/* Informatif : un fait, pas un état — ni vert, ni ambre. La pièce passera. */
.br-jeton.est-info { background: var(--et-surface-2); color: var(--et-muted); }

.br-vide { padding: 30px 16px !important; text-align: center !important; font-family: inherit !important; }
.br-vide > .bi { font-size: 24px; color: var(--et-inerte); }
.br-vide-t { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--et-ink); }
.br-vide-d { margin: 4px auto 0; max-width: 430px; font-size: 13px; color: var(--et-muted); line-height: 1.5; }

/* ---- Barre de sélection ------------------------------------------------ */

.br-barre {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 10px 16px;
  background: var(--et-surface);
  border-top: 2px solid var(--et-filet-fort);
}

.br-barre-l { display: flex; align-items: baseline; gap: 7px; }

.br-barre-l > .n {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--et-muted);
}

.br-barre-l > .v { font-family: var(--et-font-mono); font-size: 15px; font-weight: 700; color: var(--et-ink); }
.br-barre-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---- Boutons ----------------------------------------------------------- */

.br-btn,
.br-btn-fort {
  display: inline-flex;
  border-radius: 0;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.br-btn-fort { background: var(--et-action); border-color: var(--et-action); color: var(--et-sur-aplat); }
.br-btn:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.br-btn:disabled,
.br-btn-fort:disabled { background: var(--et-action-off); border-color: var(--et-action-off); color: var(--et-sur-aplat); cursor: not-allowed; }  /* délavé, non gris : modele-erp.css, .mx-btn-cta */
.br-btn:disabled { background: var(--et-surface); color: var(--et-inerte); border-color: var(--et-hairline); }
.br-btn:focus-visible,
.br-btn-fort:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }

.br-ico {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  color: var(--et-ink);
  font-size: 12px;
  cursor: pointer;
}

.br-ico + .br-ico { margin-left: 4px; }
.br-ico:hover { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue); }
.br-ico:disabled { color: var(--et-inerte); border-color: var(--et-hairline); cursor: not-allowed; }
.br-ico-danger:hover { background: var(--et-danger-badge-bg); border-color: var(--et-danger); color: var(--et-danger-ink); }
.br-ico-nu { width: 24px; height: 24px; background: transparent; border: 0; color: var(--et-inerte); font-size: 12px; cursor: pointer; }
.br-ico-nu:hover { color: var(--et-danger-ink); }
.br-lien { background: none; border: 0; padding: 0; color: var(--et-form-blue); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }

.br-kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 0;
  /* Le pavé est posé sur l'APLAT ORANGE du bouton d'engagement, pas sur l'ardoise :
     c'est la famille --et-sur-aplat qui le nomme, filet compris. */
  background: transparent;
  border: 1px solid var(--et-sur-aplat-doux);
  border-bottom-width: 2px;
  color: var(--et-sur-aplat);
  font-family: var(--et-font-mono);
  font-size: 12px;
  text-align: center;
}

/* ---- Volet de pièce ---------------------------------------------------- */

/* LE CADRE — voile, fenêtre, en-tête ardoise avec les flèches, corps, méta, pied — est
   monté en feuille de module (easycompta-fenetre.css, .cpta-fenetre-*) : le journal
   général ouvre la même pièce dans la même fenêtre. Ici ne reste que ce que le
   brouillard met DEDANS. */
.br-fenetre-entete { padding: 14px 16px; border-bottom: 1px solid var(--et-hairline); }
.br-fenetre-refs { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.br-fenetre-refs > .br-prevu { margin-left: 0; }
.br-fenetre-entete > .br-champ { margin-top: 6px; }
.br-fenetre-date { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.br-fenetre-date > .br-champ { flex: 0 0 140px; }

.br-anomalie {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--et-danger-badge-bg);
  color: var(--et-danger-ink);
  font-size: 12px;
  line-height: 1.45;
}

.br-anomalie > .bi { flex-shrink: 0; }
.br-anomalie.est-avertit { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }

.br-ecart { padding: 8px 10px !important; background: var(--et-danger-badge-bg); color: var(--et-danger-ink); font-size: 12px; font-weight: 600; text-align: left !important; }


.cpta-fenetre-pied > .br-muet { flex: 1; min-width: 0; }
.cpta-fenetre-pied > .br-btn-fort { margin-left: auto; }
.cpta-fenetre-pied > .br-muet ~ .br-btn-fort { margin-left: 0; }

/* ---- Rapport ----------------------------------------------------------- */

.br-rapport-bilan { padding: 12px 14px 8px; font-size: 13px; color: var(--et-ink); }

.br-rapport-l {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 14px 5px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
}

.br-rapport-l > .bi { flex-shrink: 0; }
.br-rapport-l.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.br-rapport-l.est-ko { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

/* ---- Retour immédiat --------------------------------------------------- */

.br-toast {
  position: fixed;
  z-index: 1090;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 400px;
  padding: 12px 14px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  border-left: 3px solid;
  box-shadow: var(--et-ombre-flottant);
  font-size: 13px;
  color: var(--et-ink);
  line-height: 1.45;
}

/* ==============================================================================================
   PALIERS — sur l'échelle retenue (docs/conventions-responsive.md) : 1024, 720, 560.
   ============================================================================================== */

/* ---- 1024 px : la page défile d'un bloc, et tout se touche au doigt ---------------------- */

@media (max-width: 1024px) {
  /* Sous 1024 px la page défile d'un bloc : rien n'est borné, sinon la liste et le volet
     se disputent une colonne trop courte et l'un des deux tombe à zéro. Sans cadre borné,
     la tête n'a rien contre quoi se figer : elle redevient une rangée. */
  .br-corps { flex-direction: column; align-items: stretch; min-height: 0; max-height: none; }
  .br-liste { flex: 0 0 auto; }
  .br-scroller { flex: 0 0 auto; min-height: 0; overflow-x: auto; }
  .br-scroller .br-table > thead > tr > th { position: static; }
  .br-scroller .tbl-defile { overflow-x: auto; }
  .br-filtres { flex-wrap: wrap; }
  .br-bloc-mois,
  .br-bloc-journal,
  .br-bloc-origine,
  .br-bloc-groupement { flex: 1 1 160px; }
  .br-synthese { flex-wrap: wrap; }
  .br-mesure { flex: 1 1 33%; }

  /* CIBLES TACTILES (docs/cibles-tactiles.md) : sous 1024 px, rien sous 44 × 44 px, TOUTES
     les cibles — les champs, les boutons, les gestes de ligne, la navigation de la fenêtre,
     les cases à cocher (agrandies à 22 px dans une cellule de 44), le lien d'action du
     bandeau et celui de la barre. */
  .br-champ { height: 44px; }
  .br-btn { min-width: 44px; }
  .br-btn,
  .br-btn-fort,
  .br-bandeau-a,
  .br-lien,
  .br-coche { min-height: 44px; }
  .tbl .br-ico,
  .br-ico-nu { width: 44px; height: 44px; }
  .br-ico + .br-ico { margin-left: 0; }
  /* Marche tactile retiree le 2026-09-10 : lot02 la pose une fois pour toutes les
     cases natives du back-office, a 24 px. Voir docs/cibles-tactiles.md.
     Le selecteur « .br-coche > input, » qui ouvrait cette liste est parti avec elle —
     laisse en place, il se rattachait a la regle suivante et donnait a la case un
     min-height de 44 px, soit une case de 24 sur 44. Vu au banc de mesure. */
  .br-table td.br-nue:first-child { min-height: 44px; }
}

/* ---- 720 px : la table s'empile, le volet est plein écran ------------------------------- */

@media (max-width: 720px) {
  /* La table passe en rangées empilées : chaque cellule porte son libellé. Neuf colonnes ne
     tiennent pas, et un défilement horizontal sur une liste qu'on parcourt à la verticale
     se perd.

     720 ET NON 768 : la passation posait son palier à 768 px, qui est une largeur de
     RECETTE (390 / 768 / 1280 / 1600) et non un palier de l'échelle retenue
     (560 / 640 / 720 / 1024 / 1100, docs/conventions-responsive.md). Le comportement est le
     sien ; seule la valeur rejoint l'échelle, faute de quoi le dépôt compterait un palier
     hors échelle de plus — et une tablette à 768 px verrait la table empilée sur un écran
     qui tient encore ses colonnes. */
  .br-table thead { display: none; }
  /* height:auto, ET C'EST LE CORRECTIF DU 2026-09-06 : le gabarit de liste pose
     « .tbl tbody tr { height: 1px } » pour qu'une rangée-table se réduise à son contenu —
     une rangée-table traite la hauteur comme un minimum. Passée en BLOC, elle la prend au
     pied de la lettre : 1 px plus le rembourrage, et les trente pièces se chevauchaient
     sur un écran de téléphone depuis le portage. Mesuré : 20 px par rangée avant, 287 après. */
  .br-table tbody tr { display: block; height: auto; padding: 9px 12px; border-bottom: 2px solid var(--et-filet-fort); }
  .br-table tbody td { display: flex; align-items: baseline; gap: 10px; padding: 3px 0 !important; text-align: left !important; }
  .br-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 88px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--et-muted);
  }
  .br-table tbody td:empty { display: none; }
  .br-mesure { flex: 1 1 50%; }
}

/* ---- 560 px : le téléphone — filtres champ par champ, barre et pied empilés ------------- */

@media (max-width: 560px) {
  .br-champ-bloc { flex: 1 1 100% !important; border-right: 0; border-bottom: 1px solid var(--et-hairline); }
  .br-bandeau,
  .br-barre { padding-left: 12px; padding-right: 12px; }
  .br-barre { flex-wrap: wrap; gap: 10px 16px; }
  .br-barre-actions { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; }
  .br-barre-actions > .br-btn-fort { justify-content: center; }
  .br-fenetre-pied { flex-wrap: wrap; gap: 8px; }
  .br-fenetre-pied > .br-btn,
  .br-fenetre-pied > .br-btn-fort { flex: 1 1 100%; justify-content: center; margin-left: 0 !important; }
}

/* ---- Impression --------------------------------------------------------
   « Imprimer » rend l'écran courant tel que le navigateur l'imprime (IEditionService). Le
   cadre borné et la tête figée n'ont pas cours sur du papier : sans ces lignes, la liste
   serait coupée au bas de la première page — c'est précisément ce qu'on imprime. Ce qui ne
   se clique pas tombe ; la liste filtrée, sa synthèse et les motifs de blocage restent. */

@media print {
  .et-bandeau-actions,
  .br-barre,
  .br-col-case,
  .br-col-actions,
  .br-table td.br-nue,
  .br-voile,
  .br-toast { display: none !important; }
  .br-corps { display: block; min-height: 0; max-height: none; }
  .br-liste { display: block; background: transparent; }
  .br-scroller { overflow: visible !important; min-height: 0; }
  .br-scroller .br-table > thead > tr > th { position: static; box-shadow: none; }
  .br-table thead { display: table-header-group; }
  .br-rang { page-break-inside: avoid; }
}

/* ---- Cadre de page et attente ------------------------------------------
   AJOUTS DU DÉPÔT, absents de la passation : son écran se monte seul, celui-ci vit dans la
   coquille EcranCompta et lit l'API.

   Le cadre porte l'écoute clavier (F9, Échap, ← →). Il est focusable sans entrer dans la
   tabulation — `tabindex="-1"` — pour que les touches répondent dès l'ouverture, sans
   qu'il faille d'abord cliquer dans un champ. Le contour de focus est retiré sur LUI seul :
   c'est un conteneur, pas une cible ; ceux des boutons et des champs restent. */

.br-page { display: flex; flex-direction: column; min-height: 0; }
.br-page:focus { outline: none; }

.br-attente {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 16px;
  color: var(--et-muted);
  font-size: var(--et-fs-cell);
}