/* ============================================================================
   ÉCRAN — DÉVERSEMENTS DES MODULES (SAI-05)

   Feuille d'ÉCRAN, portée de la passation « Déversements des modules »
   (design_handoff_deversements, razor/wwwroot/css/ecran-deversements.css).
   Chargée après modele-erp.css, et sa propre feuille plutôt que la queue de
   celle-ci : c'est la règle du dépôt depuis que deux branches ouvertes le même
   jour se sont télescopées sur sa dernière ligne et sa clé de cache.

   TROIS BLOCS DE LA PASSATION NE SONT PAS REPRIS, et chacun pour la même raison
   — ils redéfinissent au niveau de l'écran ce que le dépôt tient ailleurs :

     LE BANDEAU DE FENÊTRE (.et-bandeau*). Il vit dans easytech-theme.css et
     s'allume en un seul point pour les 45 écrans d'EasyAccounting (EcranCompta
     → EcranModule, EnTeteBandeau). Une feuille d'écran qui le redéfinit le
     redéfinit pour tout le monde : les sélecteurs ne sont pas portés par
     l'écran, ils sont globaux, et cette feuille arrive APRÈS le thème.

     LA BANDE D'INDICATEURS (.dv-synthese / .dv-mesure). Le module a son gabarit
     de vignette — easycompta-vignette.css, .dv-faits / .dv-fait, rôle posé par
     --vig — et il porte déjà .dv-*. Deux gabarits de vignette pour un seul
     écran est exactement ce que l'arbitrage du handoff EasyCompta a tranché.

     LA LIGNE DE JOURNAL s'appelle .dv-trace et non .dv-fait, qui est PRIS par
     cette vignette : au dépôt les deux se seraient superposées, et la vignette
     aurait gagné (elle est liée à .appgrid).

   Le pied de rapprochement (.dv-note-pied) passe au .tbl-methode du gabarit de
   liste, pour la même raison : deux façons d'écrire une note de méthode sous
   une table divergent au premier ajustement.

   AUCUNE COULEUR EN DUR : tout vient des jetons. Une couleur d'état ne s'écrit
   jamais en color: — elle prend son rang -ink (charte du 2026-09-03,
   docs/couleurs-en-dur.md) ; comme bordure ou marque elle reste elle-même,
   l'ambre exceptée, qui prend --et-avertissement-mark.
   ========================================================================== */

/* ---- Alertes ----------------------------------------------------------- */

.dv-alerte {
  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;
  line-height: 1.45;
}

.dv-alerte > .bi { flex-shrink: 0; }
.dv-alerte.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.dv-alerte.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.dv-alerte-l { flex: 1; min-width: 0; }
.dv-alerte-a { flex: none; font-size: 12px; font-weight: 600; color: inherit; }

/* ---- Contexte et onglets ----------------------------------------------- */

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

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

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

.dv-periode { display: flex; gap: 6px; }
.dv-onglets { display: flex; flex-wrap: wrap; margin-left: auto; }

.dv-onglets > button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  min-height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--et-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.dv-onglets > button:hover { background: var(--et-surface-3); color: var(--et-form-blue); }
.dv-onglets > button.est-actif { color: var(--et-form-blue); border-bottom-color: var(--et-form-blue); }
.dv-onglets > button:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.dv-compteur { font-size: 12px; color: var(--et-avertissement-ink); }

/* 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. */
.dv-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.dv-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;
}

.dv-champ:focus { border-color: var(--et-form-blue); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.dv-champ.mono { font-family: var(--et-font-mono); }
.dv-coche { display: flex; align-items: center; gap: 7px; 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. */
.dv-coche-forte { margin-top: 10px; font-weight: 600; }

/* ---- Corps ------------------------------------------------------------- */

/* LE CORPS EST BORNÉ À LA FENÊTRE sur un poste — même mécanique et mêmes raisons que les
   saisies et le brouillard (ecran-saisie-piece.css, .sr-corps) : la coquille ne borne pas
   .et-scroll, c'est le document qui défile. La table de l'onglet défile dans son cadre,
   tête figée, le volet à côté. Levé sous 1100 px, où le volet passe sous la liste. */
.dv-corps {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 380px;
  max-height: calc(100vh - var(--dv-au-dessus, 320px));
}
.dv-colonne { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--et-surface-2); }
.dv-scroller { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px; }

/* La tête se fige dans le cadre borné (lot 08) ; le cadre de liste du gabarit rend son
   défilement au scroller, sinon c'est lui, non borné, qui serait le scrollport de la tête.
   Le rembourrage haut du scroller passe en marge sur son premier enfant : un rembourrage
   sur le conteneur laisse une bande de 14 px au-dessus de la tête figée, où les rangées
   défilent à découvert. */
.dv-scroller { padding-top: 0; }
.dv-scroller > :first-child { margin-top: 14px; }
.dv-scroller .tbl-defile { overflow: visible; }
.dv-scroller .tbl > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: inset 0 -1px 0 var(--et-table-head-fonce);
}

/* ---- Tables ------------------------------------------------------------ */

.dv-table { width: 100%; border: 1px solid var(--et-hairline); background: var(--et-surface); }
.dv-lignes { width: 100%; }

/* ---- Colonnes des quatre tables et blocs de préparation --------------------
   La passation les posait en style inline — vingt-cinq largeurs en dur dans quatre
   composants, qu'aucun palier ne pouvait reprendre. */
.dv-table th, .dv-lignes th { text-align: left; }
.dv-col-periode { width: 96px; }
.dv-col-periode-cal { width: 110px; }
.dv-col-module { width: 130px; }
.dv-col-module-cal { width: 170px; }
.dv-col-module-hist { width: 140px; }
.dv-col-fait { width: 140px; }
.dv-col-piece { width: 110px; }
.dv-col-piece-hist { width: 100px; }
.dv-col-montant { width: 140px; text-align: right; }
.dv-col-montant-hist { width: 150px; text-align: right; }
.dv-col-lignes { width: 90px; text-align: right; }
.dv-col-depuis { width: 120px; }
.dv-col-etat { width: 170px; }
.dv-col-gestes { width: 120px; }
.dv-col-compte { width: 110px; }
.dv-bloc-periode { flex: 0 0 120px; }
.dv-bloc-journal { flex: 0 0 170px; }
.dv-ecart-signal { color: var(--et-avertissement-ink); }
.dv-ecart-grave { color: var(--et-danger-ink); }
.dv-ecart-ok { color: var(--et-succes-ink); }
.dv-col-module-src { width: 150px; }
.dv-col-etat-module { width: 180px; }
.dv-col-piece-module { width: 210px; }
.dv-col-gestes-module { width: 150px; }
.dv-col-module-rap { width: 120px; }

.dv-rang { border-bottom: 1px solid var(--et-hairline); }
.dv-rang:hover { background: var(--et-surface-3); }
.dv-rang.est-visee { background: var(--et-tint); }
/* Un module indisponible est grisé : ce n'est pas un retard, c'est une interface qui
   n'existe pas encore. */
.dv-rang.est-inerte { opacity: .58; }
/* Le liseré dit le retard sans repeindre la ligne. */
.dv-rang.est-retard { box-shadow: inset 3px 0 0 var(--et-avertissement-mark); }
.dv-rang.est-bloquante { box-shadow: inset 3px 0 0 var(--et-danger); }

.dv-nue::before { display: none !important; }
.dv-tronque { min-width: 0; overflow: hidden; }
.dv-module { display: inline-flex; align-items: center; gap: 8px; }
.dv-module > .bi { color: var(--et-form-blue); font-size: 13px; }
.dv-piece { font-size: 12px; font-weight: 600; color: var(--et-form-blue); }
.dv-muet { color: var(--et-muted); font-size: 12px; }
.dv-sous { margin-top: 3px; font-size: 12px; color: var(--et-muted); line-height: 1.4; }
.dv-alerte-sous { margin-top: 3px; font-size: 12px; color: var(--et-danger-ink); line-height: 1.4; }
.dv-ecart { margin-top: 3px; font-family: var(--et-font-body, inherit); font-size: 12px; color: var(--et-avertissement-ink); }

.dv-derive {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--et-danger-ink);
  line-height: 1.4;
}

.dv-derive > .bi { flex-shrink: 0; }

.dv-regle { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--et-muted); }
.dv-regle > .bi { flex-shrink: 0; }
.dv-regle a { color: var(--et-form-blue); text-decoration: none; }
.dv-regle a:hover { text-decoration: underline; }


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

.dv-jeton > .bi { font-size: 12px; }
/* Les trois états du calendrier : des classes, pas des couleurs écrites dans la page
   (docs/couleurs-en-dur.md) — fond d'état, encre du rang -ink. */
.dv-jeton.est-fait { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.dv-jeton.est-ecoule { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.dv-jeton.est-avenir { background: var(--et-neutre-bg); color: var(--et-neutre); }

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

.dv-actions-ligne { display: inline-flex; align-items: center; gap: 5px; }

/* ---- Panneau de préparation ------------------------------------------- */

.dv-prep { margin-top: 14px; background: var(--et-surface); border: 1px solid var(--et-filet-fort); }

.dv-prep-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--et-hairline);
}

.dv-prep-tete > .bi { color: var(--et-form-blue); }
.dv-prep-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--et-ink); }

.dv-prep-champs { display: flex; align-items: flex-start; flex-wrap: wrap; border-bottom: 1px solid var(--et-hairline); }
.dv-prep-champs > .dv-champ-bloc { flex: 1 1 260px; min-width: 0; border-bottom: 1px solid var(--et-hairline); }

.dv-segments { display: flex; }

.dv-segments > button {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  color: var(--et-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.dv-segments > button + button { border-left: 0; }
.dv-segments > button.est-actif { background: var(--et-form-blue); border-color: var(--et-form-blue); color: var(--et-sur-aplat); }
.dv-segments > button:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }

.dv-note { margin: 6px 0 0; font-size: 12px; color: var(--et-muted); line-height: 1.5; }

/* L'écart : accepté explicitement, avec son détail sous les yeux. */
.dv-ecart-bloc { margin: 12px 14px; padding: 11px 12px; background: var(--et-avertissement-bg); border: 1px solid var(--et-avertissement-mark); }
.dv-ecart-tete { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--et-ink); line-height: 1.5; }
.dv-ecart-tete > .bi { flex-shrink: 0; color: var(--et-avertissement-ink); }

.dv-prep-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--et-hairline); }

/* Le motif du refus, à côté du bouton éteint : un bouton gris sans raison fait chercher
   pendant cinq minutes. */
.dv-blocage {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--et-danger-ink);
  line-height: 1.4;
}

.dv-blocage > .bi { flex-shrink: 0; }

/* ---- Aside ------------------------------------------------------------- */

.dv-aside {
  flex: 0 0 320px;
  min-height: 0;
  overflow: auto;
  background: var(--et-surface);
  border-left: 1px solid var(--et-filet-fort);
}

.dv-carte { padding: 14px 16px; border-bottom: 1px solid var(--et-hairline); }
.dv-carte:last-child { border-bottom: 0; }

.dv-carte-t {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 3px solid var(--et-form-blue);
  color: var(--et-table-head-encre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.dv-audit { display: flex; flex-direction: column; }
.dv-trace { display: flex; align-items: baseline; gap: 9px; padding: 8px 0; border-top: 1px solid var(--et-hairline); font-size: 12px; line-height: 1.45; }
.dv-trace:first-child { border-top: 0; }
.dv-trace > .bi { flex-shrink: 0; }
.dv-trace-l { flex: 1; min-width: 0; color: var(--et-ink); }

.dv-liens { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dv-lien { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--et-form-blue); text-decoration: none; }
.dv-lien:hover { text-decoration: underline; }

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

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

.dv-btn-fort { background: var(--et-action); border-color: var(--et-action); color: var(--et-sur-aplat); }
.dv-btn:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.dv-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 */
.dv-btn:focus-visible,
.dv-btn-fort:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }

.dv-btn-mini {
  height: 26px;
  padding: 0 10px;
  background: var(--et-surface);
  border: 1px solid var(--et-form-blue);
  border-radius: 0;
  color: var(--et-form-blue);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.dv-btn-mini:hover { background: var(--et-tint); }

.dv-ico {
  width: 26px;
  height: 26px;
  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;
}

.dv-ico:hover { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue); }
.dv-ico:disabled { color: var(--et-inerte); border-color: var(--et-hairline); cursor: not-allowed; }
.dv-ico-danger:hover { background: var(--et-danger-badge-bg); border-color: var(--et-danger); color: var(--et-danger-ink); }

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

.dv-toast {
  position: fixed;
  z-index: 1090;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 440px;
  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;
}

/* ---- Ce que l'interface fixe, et que l'écran ne propose donc pas ---------
   Un champ qu'on peut modifier sans que rien ne change ment plus qu'un champ
   absent : le journal et la date de pièce sont DITS, dans la même colonne et à
   la même hauteur qu'un champ, pour qu'on les lise comme une valeur et non
   comme une saisie éteinte. */
.dv-fixe {
  box-sizing: border-box;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 7px;
  background: var(--et-surface-3);
  border: 1px solid var(--et-hairline);
  color: var(--et-ink);
  font-size: 13px;
}

.dv-fixe.mono { font-family: var(--et-font-mono); }

/* Le motif de l'écart, tel que le module l'a signalé. Un écart sans motif ne se
   solde pas : on ne sait pas ce qu'on solde. */
.dv-ecart-motif {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  font-size: 12px;
  color: var(--et-ink);
  line-height: 1.5;
}

/* Le rang des écarts mène à la saisie : c'est un lien, dessiné comme le bouton
   voisin — le geste est le même, l'affordance doit l'être aussi. */
a.dv-btn-mini {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .dv-fixe { height: 44px; }
}

/* ==============================================================================================
   PALIERS — sur l'échelle retenue (docs/conventions-responsive.md) : 1100, 1024, 720, 560.
   Les 1180 et 768 px de la passation n'en font pas partie : le volet passe sous la liste à
   1100 (le palier de la fiche en une colonne), la table s'empile à 720.
   ============================================================================================== */

@media (max-width: 1100px) {
  /* Sous 1100 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. */
  .dv-corps { flex-direction: column; align-items: stretch; min-height: 0; max-height: none; }
  .dv-colonne { flex: 0 0 auto; }
  .dv-scroller { flex: 0 0 auto; min-height: 0; overflow-x: auto; }
  .dv-scroller .tbl-defile { overflow-x: auto; }
  .dv-scroller .tbl > thead > tr > th { position: static; }
  .dv-aside { flex: 0 0 auto; width: 100%; border-left: 0; border-top: 2px solid var(--et-filet-fort); overflow: visible; }
  .dv-onglets { margin-left: 0; width: 100%; border-top: 1px solid var(--et-hairline); }
}

@media (max-width: 1024px) {
  /* CIBLES TACTILES (docs/cibles-tactiles.md) : sous 1024 px, rien sous 44 × 44 px, TOUTES
     les cibles — les mini-boutons compris : 36 px n'est pas une exception écrite. */
  .dv-champ { height: 44px; }
  .dv-onglets > button { min-height: 44px; }
  .dv-segments > button { height: 44px; }
  .dv-btn { min-width: 44px; }
  .dv-btn,
  .dv-btn-fort,
  .dv-btn-mini { min-height: 44px; }
  .dv-ico { width: 44px; height: 44px; }
  .dv-prep-champs > .dv-champ-bloc { flex: 1 1 100%; }
}

@media (max-width: 720px) {
  /* Les tables passent en rangées empilées : chaque cellule porte son libellé. Six à huit
     colonnes ne tiennent pas, et un défilement horizontal sur une liste qu'on parcourt à la
     verticale se perd. 720 et non 768 : 768 est une largeur de recette, pas un palier. */
  .dv-table thead { display: none; }
  /* height:auto, ET C'EST UN CORRECTIF (2026-09-06) : le gabarit pose « .tbl tbody tr
     { height: 1px } », qu'une rangée passée en bloc prend au pied de la lettre — les
     échéances se chevauchaient sur un téléphone (même défaut qu'au brouillard). */
  .dv-table tbody tr { display: block; height: auto; padding: 9px 12px; border-bottom: 2px solid var(--et-filet-fort); }
  .dv-table tbody td { display: flex; align-items: baseline; gap: 10px; padding: 3px 0 !important; text-align: left !important; }
  .dv-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 96px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--et-muted);
  }
  .dv-table tbody td:empty { display: none; }
  .dv-table tfoot { display: none; }
}

@media (max-width: 560px) {
  .dv-scroller { padding: 10px 8px; }
  .dv-champ-bloc { flex: 1 1 100% !important; border-right: 0; }
  .dv-carte { padding-left: 12px; padding-right: 12px; }
}