/* Application GazetRED — papier de formulaire, traits de cases, encre de tampon.
   Les cinq étapes du travail sont numérotées comme les cases d'un formulaire DUM. */

:root {
  --papier: #eef2ef;
  --surface: #f8faf8;
  --encre: #1c2a2d;
  --encre-douce: #51625f;
  --trait: #c4cfcb;
  --trait-fort: #9fb0aa;
  --tampon: #4a3da3;
  --tampon-fond: #ebe8f8;
  --sur-tampon: #ffffff;
  --doute: #a86a00;
  --doute-fond: #fbf1dc;
  --echec: #a8322a;
  --echec-fond: #f8e3e0;
  --juste: #2c6e53;
  --juste-fond: #e0f0e8;
  --zone: rgb(74 61 163 / 0.14);
  --zone-bord: rgb(74 61 163 / 0.8);
  --police: "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --chasse: "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #141c1e;
    --surface: #1b2528;
    --encre: #e3eae7;
    --encre-douce: #9fb1ac;
    --trait: #2f3d40;
    --trait-fort: #465a5c;
    --tampon: #a79df2;
    --tampon-fond: #29264a;
    --sur-tampon: #16132e;
    --doute: #e2a93b;
    --doute-fond: #3a2e14;
    --echec: #ee8a80;
    --echec-fond: #45211d;
    --juste: #7ccaa5;
    --juste-fond: #1b3a2d;
    --zone: rgb(167 157 242 / 0.18);
    --zone-bord: rgb(167 157 242 / 0.9);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 15px/1.45 var(--police);
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: 100vh;
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

button, input, select, textarea { font: inherit; color: inherit; }

button {
  border: 1px solid var(--tampon);
  background: var(--tampon);
  color: var(--sur-tampon);
  border-radius: 3px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}
button.secondaire { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
button.danger { background: var(--echec); border-color: var(--echec); }
button.icone { background: transparent; color: var(--encre); border-color: transparent; padding: 0.2rem 0.55rem; font-size: 1.05rem; }
button:disabled { opacity: 0.4; cursor: default; }
button:hover:not(:disabled) { filter: brightness(1.08); }
:focus-visible { outline: 2px solid var(--tampon); outline-offset: 2px; }

input, select, textarea {
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-radius: 2px;
  padding: 0.3rem 0.45rem;
  min-width: 0;
}
textarea { width: 100%; resize: vertical; min-height: 3.2rem; }

.valeur, input.valeur, .mono {
  font-family: var(--chasse);
  font-variant-numeric: slashed-zero tabular-nums;
  font-size: 0.92em;
}

/* ——— Barre ——— */
.barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--trait-fort);
  background: var(--surface);
}
.marque { display: flex; align-items: baseline; gap: 0.6rem; color: var(--encre); text-decoration: none; }
.marque strong { font-size: 1.05rem; letter-spacing: 0.01em; }
.marque .logo { display: block; height: 44px; width: auto; }
/* Le lettrage du logo est noir : sur fond sombre, il garde une plaque claire. */
@media (prefers-color-scheme: dark) {
  .marque .logo, .liasse-marque img { background: #f8faf8; border-radius: 3px; padding: 3px 5px; }
}
.barre { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.client-choisi { color: var(--encre-douce); display: flex; gap: 0.5rem; align-items: baseline; }
.client-choisi strong { color: var(--encre); }
.client-choisi a { color: var(--tampon); font-size: 0.88rem; }
.barre .espace { flex: 1; }
.filtres { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.filtres button {
  background: transparent; color: var(--encre); border-color: var(--trait);
  padding: 0.2rem 0.6rem; font-size: 0.88rem;
}
.filtres button[aria-pressed="true"] { border-color: var(--tampon); color: var(--tampon); background: var(--tampon-fond); }
.recherche { flex: 1 1 14rem; }
.recherche input { width: 100%; }
.menu-compte { display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; }
.menu-compte a { color: var(--tampon); }
.menu-compte #compte-nom { color: var(--encre-douce); }
.menu-compte #compte-nom strong { color: var(--encre); }
.menu-compte button { padding: 0.2rem 0.6rem; font-size: 0.85rem; }

/* Formulaires de connexion, de compte et d'administration */
.formulaire { display: grid; gap: 0.8rem; max-width: 26rem; }
.formulaire label { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--encre-douce); }
.formulaire input, .formulaire select { color: var(--encre); padding: 0.45rem 0.55rem; }
.onglets-admin { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.onglets-admin a { grid-template-columns: 1fr; }
.champ-param { display: grid; grid-template-columns: minmax(14rem, 1.1fr) minmax(12rem, 1fr) auto; gap: 0.3rem 1rem; align-items: start; padding: 0.7rem 0; border-bottom: 1px solid var(--trait); }
.champ-param .libelle { font-weight: 600; font-size: 0.92rem; }
.champ-param .aide { font-size: 0.82rem; color: var(--encre-douce); margin: 0.15rem 0 0; max-width: 60ch; }
.champ-param .origine { font-size: 0.78rem; color: var(--encre-douce); white-space: nowrap; }
.champ-param .origine.surcharge { color: var(--tampon); font-weight: 600; }
.champ-param input, .champ-param select, .champ-param textarea { width: 100%; }
.champ-param.modifie { background: var(--doute-fond); box-shadow: inset 3px 0 0 var(--doute); }
.section-param { margin-top: 1.6rem; }
.section-param > p { margin: 0.2rem 0 0.4rem; color: var(--encre-douce); font-size: 0.88rem; max-width: 72ch; }
.table-edition { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.table-edition td, .table-edition th { padding: 0.2rem 0.3rem; text-align: left; }
.table-edition input { width: 100%; }
.barre-enregistrement { position: sticky; bottom: -3rem; background: var(--surface); border-top: 2px solid var(--doute); padding: 0.8rem 1rem 3.8rem; margin: 1.4rem -1rem -3rem; display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; box-shadow: 0 -6px 16px rgb(0 0 0 / 0.08); }
.puce-client { display: inline-block; font-size: 0.78rem; border: 1px solid var(--trait-fort); border-radius: 2px; padding: 0 0.3rem; margin: 0 0.2rem 0.2rem 0; }
.cases-clients { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.cases-clients label { display: flex; gap: 0.35rem; align-items: center; color: var(--encre); }
.mot-de-passe-temporaire { font-family: var(--chasse); font-size: 1.05rem; background: var(--tampon-fond); border: 1px dashed var(--tampon); padding: 0.3rem 0.6rem; display: inline-block; user-select: all; }

/* ——— Bandeau des étapes : cinq cases, dans l'ordre du travail ——— */
.etapes {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--trait-fort); background: var(--surface);
}
.etapes a {
  display: grid; grid-template-columns: auto 1fr; gap: 0 0.6rem; align-items: center;
  padding: 0.55rem 0.9rem 0.6rem; color: var(--encre); text-decoration: none;
  border-right: 1px solid var(--trait); border-top: 3px solid transparent;
}
.etapes a:last-child { border-right: 0; }
.etapes a:hover { background: var(--papier); }
.etapes a[aria-current="step"] { border-top-color: var(--tampon); background: var(--tampon-fond); }
.etapes .numero {
  grid-row: span 2; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border: 1.5px solid var(--trait-fort); border-radius: 2px; font-weight: 700; font-size: 0.95rem;
}
.etapes a[aria-current="step"] .numero { border-color: var(--tampon); color: var(--tampon); }
.etapes .titre { font-weight: 600; font-size: 0.92rem; }
.etapes .etat { font-size: 0.8rem; color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapes a.a-faire .etat { color: var(--doute); font-weight: 600; }
.etapes a.fait .numero { background: var(--juste-fond); border-color: var(--juste); color: var(--juste); }

/* ——— Vues ——— */
main { min-height: 0; overflow: hidden; display: grid; }
/* Chaque volet qui défile sert de repère à ses éléments en position absolue (libellés .sr) :
   sans cela, ils échappent au défilement du volet et allongent toute la page. */
.vue { min-height: 0; position: relative; }
.vue.page { overflow: auto; padding: 1.6rem clamp(1rem, 4vw, 3rem) 3rem; }
.page-contenu { max-width: 68rem; }
.page h1 { font-size: 1.35rem; margin: 0 0 0.3rem; line-height: 1.25; }
.page .intro { color: var(--encre-douce); max-width: 70ch; margin: 0 0 1.3rem; }
.page h2 { font-size: 1.02rem; margin: 1.8rem 0 0.6rem; }
.suite { margin-top: 1.4rem; display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.suite .consigne { margin: 0; }
button.grand, a.bouton.grand { padding: 0.55rem 1.1rem; font-size: 1rem; }
a.bouton, label.bouton {
  display: inline-block; text-decoration: none; cursor: pointer;
  border: 1px solid var(--tampon); background: var(--tampon); color: var(--sur-tampon);
  border-radius: 3px; padding: 0.35rem 0.8rem;
}
label.bouton.secondaire, a.bouton.secondaire { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
label.bouton:focus-within { outline: 2px solid var(--tampon); outline-offset: 2px; }

.depot {
  border: 2px dashed var(--trait-fort); border-radius: 4px; background: var(--surface);
  padding: 1.6rem 1.4rem; display: grid; gap: 0.8rem; justify-items: start;
}
.depot.survol { border-color: var(--tampon); background: var(--tampon-fond); }
.depot p { margin: 0; }
.depot .progression { color: var(--encre-douce); font-size: 0.9rem; min-height: 1.3em; }

table.tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--surface); }
.tableau th, .tableau td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau thead th { font-weight: 600; color: var(--encre-douce); font-size: 0.82rem; border-bottom: 1px solid var(--trait-fort); }
.tableau td.nombre, .tableau th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau .vide-tableau { color: var(--encre-douce); padding: 1.2rem 0.6rem; }
.tableau button { white-space: nowrap; }
.defilant { overflow-x: auto; }

.statut { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.08rem 0.4rem; border-radius: 2px; border: 1px solid currentColor; white-space: nowrap; }
.statut.OK, .statut.E03_CONCORDANT { color: var(--juste); background: var(--juste-fond); }
.statut.OK_RESERVES, .statut.A_LIRE, .statut.A_RELIRE { color: var(--doute); background: var(--doute-fond); }
.statut.A_VERIFIER, .statut.KO, .statut.E01_DOUANE_SEULE, .statut.E05_DEFICIT { color: var(--echec); background: var(--echec-fond); }
.statut.E02_STOCK_SEUL, .statut.E04_EXCEDENT { color: var(--doute); background: var(--doute-fond); }
.statut.REJETE, .statut.DOUBLON, .statut.NON_COMPARABLE, .statut.REJET_TECHNIQUE, .statut.DOUBLON_FICHIER { color: var(--encre-douce); background: var(--papier); }
.statut.LU { color: var(--juste); background: var(--juste-fond); }
.statut.neutre, .statut.E06_CODE_APPROCHANT, .statut.E07_LOT_DIVERGENT, .statut.E08_UNITE_INCOMPATIBLE, .statut.E09_VALORISATION, .statut.E10_ORIGINE_DIVERGENTE, .statut.E11_DOUBLON { color: var(--tampon); background: var(--tampon-fond); }

.compteurs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--trait-fort); background: var(--surface); width: max-content; max-width: 100%; }
.compteurs div { padding: 0.6rem 1.1rem; border-right: 1px solid var(--trait); }
.compteurs div:last-child { border-right: 0; }
.compteurs strong { display: block; font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.compteurs span { font-size: 0.82rem; color: var(--encre-douce); }

.alerte { border-left: 3px solid var(--doute); background: var(--doute-fond); padding: 0.7rem 0.9rem; max-width: 70ch; margin: 0 0 1rem; }
.alerte.echec { border-color: var(--echec); background: var(--echec-fond); }
.alerte p { margin: 0.2rem 0; }

.barre-progression { height: 0.6rem; background: var(--papier); border: 1px solid var(--trait-fort); width: min(34rem, 100%); }
.barre-progression span { display: block; height: 100%; background: var(--tampon); transition: width 300ms; }
@media (prefers-reduced-motion: reduce) { .barre-progression span { transition: none; } }

.colonnes-stock select { min-width: 14rem; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.clients { display: grid; gap: 0; max-width: 52rem; border-top: 1px solid var(--trait-fort); }
.clients a { display: grid; grid-template-columns: 10rem 1fr auto; gap: 1rem; align-items: baseline; padding: 0.8rem 0.4rem; border-bottom: 1px solid var(--trait); color: var(--encre); text-decoration: none; }
.clients a:hover { background: var(--surface); }
.clients .code { font-weight: 700; }
.clients .detail { color: var(--encre-douce); font-size: 0.9rem; }
.nouveau-client { display: flex; gap: 0.5rem; margin-top: 1.2rem; }

/* ——— Validation : plan en trois volets ——— */
.plan {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr) minmax(24rem, 34rem);
  min-height: 0;
}
.plan > section { min-height: 0; overflow: auto; position: relative; }
.outils-validation { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; padding: 0.5rem 1rem; border-bottom: 1px solid var(--trait); background: var(--surface); }
.filtre-fichier { font-size: 0.85rem; color: var(--tampon); border: 1px solid var(--tampon); border-radius: 2px; padding: 0.1rem 0.2rem 0.1rem 0.5rem; display: inline-flex; gap: 0.3rem; align-items: center; }
.filtre-fichier button { background: transparent; border: 0; color: var(--tampon); padding: 0 0.3rem; }

/* File : un registre, une ligne par élément, séparées par les traits du formulaire. */
.file { border-right: 1px solid var(--trait-fort); }
.compte { margin: 0; padding: 0.6rem 1rem; color: var(--encre-douce); font-size: 0.88rem; border-bottom: 1px solid var(--trait); }
.liste { list-style: none; margin: 0; padding: 0; outline: none; }
.liste li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.1rem 0.6rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--trait);
  cursor: pointer;
}
.liste li:hover { background: var(--surface); }
.liste li[aria-selected="true"] { background: var(--tampon-fond); box-shadow: inset 3px 0 0 var(--tampon); }
.case {
  grid-row: span 2; align-self: start;
  font-size: 0.72rem; line-height: 1;
  border: 1px solid var(--trait-fort); border-radius: 2px;
  padding: 0.25rem 0.3rem; color: var(--encre-douce); min-width: 3.4rem; text-align: center;
}
.liste .objet { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste .montant { font-family: var(--chasse); font-variant-numeric: slashed-zero tabular-nums; font-size: 0.85rem; color: var(--encre-douce); }
.liste .motif { grid-column: 2 / 4; color: var(--encre-douce); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste .ou { grid-column: 2 / 4; font-size: 0.78rem; color: var(--encre-douce); }
.file-vide { padding: 2rem 1rem; color: var(--encre-douce); max-width: 34ch; }

/* Document : la page telle que lue, zone surlignée. */
.document { display: grid; grid-template-rows: auto 1fr; background: var(--papier); }
.outils {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.7rem; border-bottom: 1px solid var(--trait); background: var(--surface);
  font-size: 0.88rem; color: var(--encre-douce);
}
.outils .espace { flex: 1; }
.feuille { overflow: auto; padding: 1.2rem; position: relative; }
.calque { position: relative; width: max-content; margin: 0 auto; box-shadow: 0 0 0 1px var(--trait-fort); background: #fff; }
.calque canvas { display: block; }
.zone { position: absolute; left: 0; right: 0; background: var(--zone); border-top: 1px solid var(--zone-bord); border-bottom: 1px solid var(--zone-bord); pointer-events: none; }
.zone .boite { position: absolute; top: -2px; bottom: -2px; border: 2px solid var(--zone-bord); border-radius: 2px; }
.vide-doc { color: var(--encre-douce); text-align: center; margin-top: 3rem; }

/* Décision : lecture, valeur retenue, action. */
.decision { border-left: 1px solid var(--trait-fort); background: var(--surface); padding: 1rem 1.1rem 2rem; }
.accueil { color: var(--encre-douce); max-width: 40ch; }
.accueil h2 { color: var(--encre); font-size: 1.05rem; }
.decision h2 { font-size: 1.12rem; margin: 0.2rem 0 0.5rem; line-height: 1.3; }
.decision h3 { font-size: 0.95rem; margin: 1.3rem 0 0.45rem; }
.contexte { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; margin: 0; font-size: 0.88rem; }
.contexte dt { color: var(--encre-douce); }
.contexte dd { margin: 0; overflow-wrap: anywhere; }

.motifs { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.motifs label { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: start; font-size: 0.9rem; padding: 0.35rem 0.5rem; border-left: 3px solid var(--doute); background: var(--doute-fond); }

.champs { display: grid; }
.champ { padding: 0.5rem 0.3rem 0.55rem; border-bottom: 1px solid var(--trait); }
.champ.principal { background: var(--tampon-fond); box-shadow: inset 3px 0 0 var(--tampon); }
.champ-tete { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.3rem; }
.champ-tete .libelle { font-weight: 600; font-size: 0.9rem; }
.champ-tete .score { margin-left: auto; }
.champ-corps { display: grid; grid-template-columns: minmax(5.5rem, 0.8fr) minmax(7rem, 1.5fr) auto auto; gap: 0.4rem; align-items: center; }
.champ-corps .lu { color: var(--encre-douce); overflow-wrap: anywhere; font-size: 0.9rem; }
.lu-marque { font-size: 0.75rem; }
.champ-corps input, .champ-corps select { width: 100%; }
.champ-corps button { padding: 0.25rem 0.55rem; font-size: 0.84rem; }
.champ small { display: block; color: var(--encre-douce); font-size: 0.8rem; margin-top: 0.25rem; }
.score { font-family: var(--chasse); font-size: 0.8rem; padding: 0.05rem 0.35rem; border-radius: 2px; color: var(--encre-douce); }
.score.bas { background: var(--doute-fond); color: var(--doute); font-weight: 700; }
.marque-corrige { font-size: 0.72rem; color: var(--tampon); border: 1px solid var(--tampon); border-radius: 2px; padding: 0 0.25rem; margin-left: 0.3rem; }

.bloc { margin-top: 0.9rem; display: grid; gap: 0.5rem; }
.rangee { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.saisie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.7rem; }
.saisie label, .petit label { display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--encre-douce); }
.saisie label.large { grid-column: 1 / -1; }
.consigne { font-size: 0.86rem; color: var(--encre-douce); margin: 0 0 0.6rem; }
.bloc .consigne { margin: 0; }

.historique { list-style: none; padding: 0; margin: 0; font-size: 0.84rem; display: grid; gap: 0.35rem; }
.historique li { display: flex; gap: 0.5rem; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--trait); padding-bottom: 0.3rem; }
.historique .annulee { text-decoration: line-through; color: var(--encre-douce); }

/* Le tampon : la trace visible d'une décision humaine. */
.tampon {
  display: inline-block;
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--tampon);
  border: 2px solid var(--tampon);
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  transform: rotate(-4deg);
  background: var(--tampon-fond);
}
.tampon.frappe { animation: frappe 320ms cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes frappe {
  from { transform: rotate(-12deg) scale(1.6); opacity: 0; }
  to { transform: rotate(-4deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .tampon.frappe { animation: none; } }

.annonces { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: 0.5rem; z-index: 10; max-width: min(28rem, calc(100vw - 2rem)); }
.annonce { display: flex; gap: 0.7rem; align-items: center; background: var(--surface); border: 1px solid var(--trait-fort); padding: 0.6rem 0.8rem; border-radius: 3px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.14); font-size: 0.9rem; }
.annonce.erreur { border-color: var(--echec); background: var(--echec-fond); }

dialog { border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre); border-radius: 4px; padding: 1rem 1.2rem; }
dialog::backdrop { background: rgb(20 28 30 / 0.4); }
dialog.volet { width: min(56rem, 94vw); max-height: 86vh; }
dialog.petit { width: min(30rem, 94vw); }
dialog.petit form { display: grid; gap: 0.7rem; }
dialog h2 { margin: 0; font-size: 1.1rem; }
.volet-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
table.journal { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.journal th, .journal td { text-align: left; padding: 0.3rem; border-bottom: 1px solid var(--trait); vertical-align: top; }

@media (max-width: 1180px) {
  .plan { grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); overflow: auto; }
  .decision { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--trait-fort); }
  .deux-colonnes { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .etapes { grid-template-columns: repeat(5, minmax(9rem, 1fr)); overflow-x: auto; }
}
@media (max-width: 760px) {
  .plan { grid-template-columns: 1fr; }
  .file { max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--trait-fort); }
  .document { min-height: 60vh; }
  .clients a { grid-template-columns: 1fr; gap: 0.1rem; }
  .champ-param { grid-template-columns: 1fr; }
  .menu-compte { flex-wrap: wrap; gap: 0.4rem 0.8rem; }
}
.journal tr.annulee td { text-decoration: line-through; color: var(--encre-douce); }

@media (max-width: 520px) {
  .champ-corps { grid-template-columns: 1fr 1fr; }
  .champ-corps .lu { grid-column: 1 / -1; }
}

/* Module H : taux d'apurement par DUM */
.bloc-apurement { margin-top: 2rem; }
.saisie-taux { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
/* Les boutons d'enregistrement et la zone d'import ne se touchent pas. */
#depot-taux { margin-top: 1.5rem; }

.option-lecture { display: flex; gap: .6rem; align-items: flex-start; max-width: 46rem; margin: 1rem 0 .25rem; }
.option-lecture input { margin-top: .3rem; }

/* Panneau des motifs et tri de la file (étape 4) */
.motifs-file { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; }
.motifs { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; flex: 1 1 40rem; }
.motifs button { font-size: 0.8rem; padding: 0.15rem 0.5rem; border: 1px solid var(--trait-fort); background: transparent; color: var(--encre); border-radius: 2px; max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.motifs select { font-size: 0.8rem; max-width: 22rem; }
.motifs button strong { font-variant-numeric: tabular-nums; margin-left: 0.2rem; }
.motifs button[aria-pressed="true"] { border-color: var(--tampon); color: var(--tampon); background: var(--tampon-fond); }
.libelle-motifs { font-size: 0.8rem; color: var(--encre-douce); }
.choix-file { font-size: 0.85rem; color: var(--encre-douce); display: inline-flex; gap: 0.35rem; align-items: center; }
.filtres-dossiers { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; margin: 0 0 0.75rem; }
.filtres-dossiers .motifs { flex-basis: 100%; }
.filtres-dossiers .compte { flex-basis: 100%; padding: 0; border: 0; }
/* Étape 3 en pleine largeur : le tableau des dossiers n'est plus coupé. */
.page-contenu.large { max-width: none; }
.tableau.dossiers td.valeur, .tableau.dossiers td:nth-child(3) { white-space: nowrap; }
/* Pagination de l'étape 3 */
.pagination { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin: 0.6rem 0; font-size: 0.88rem; }
.pagination .position { color: var(--encre-douce); margin-right: 0.6rem; }
.pagination button { padding: 0.15rem 0.55rem; min-width: 2.1rem; }
.pagination button[aria-current="page"] { border-color: var(--tampon); color: var(--tampon); background: var(--tampon-fond); font-weight: 600; }
.pagination .ellipse { color: var(--encre-douce); padding: 0 0.2rem; }
.pagination .par-page { margin-left: auto; color: var(--encre-douce); display: inline-flex; gap: 0.35rem; align-items: center; }
/* Pagination de la file (étape 4) */
.pagination-file:empty { display: none; }
.pagination-file { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; padding: 0.4rem 1rem; font-size: 0.82rem; border-bottom: 1px solid var(--trait); }
#pages-file-bas { border-bottom: 0; border-top: 1px solid var(--trait); }
.pagination-file .position { color: var(--encre-douce); margin-right: auto; }
.pagination-file button { padding: 0.05rem 0.5rem; }
.pagination-file .numero-page { font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: center; }
.pagination-file select { font-size: 0.8rem; }

/* ——— Connexion : une liasse, le premier feuillet d'une déclaration ———
   Le feuillet blanc porte la marque et le formulaire ; une copie teintée dépasse derrière,
   comme dans une liasse de dédouanement. Le visa du jour est le seul geste appuyé. */
body.ecran-connexion { grid-template-rows: 1fr; }
body.ecran-connexion .barre { display: none; }
#vue-connexion { display: grid; place-items: center; align-content: center; gap: 1.6rem; padding-block: clamp(1.5rem, 6vh, 4.5rem); }

.liasse {
  width: min(68rem, calc(100% - 12px));
  margin-right: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr);
  grid-template-areas: "marque formulaire" "texte formulaire" "etapes formulaire";
  grid-template-rows: auto 1fr auto;
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  /* La copie teintée, décalée sous le feuillet, avec son propre trait. */
  box-shadow: 10px 10px 0 -1px var(--tampon-fond), 10px 10px 0 0 var(--trait-fort);
}

.liasse-marque {
  grid-area: marque;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.9rem 2.2rem 0;
}
.liasse-marque img { display: block; height: 78px; width: auto; }

.liasse-texte { grid-area: texte; padding: 2rem 2.2rem 2.2rem; }
.liasse-titre {
  margin: 0 0 1rem; max-width: 18ch;
  font-size: clamp(1.75rem, 2.7vw, 2.5rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.012em;
  text-wrap: balance;
}
.liasse-sous-titre { margin: 0; max-width: 46ch; color: var(--encre-douce); font-size: 1rem; line-height: 1.5; }

/* Le visa : la date du jour frappée à l'encre du tampon. */
.visa {
  display: grid; justify-items: center; gap: 0.05rem;
  margin: 0.4rem 0.4rem 0 0;
  padding: 0.4rem 0.85rem 0.45rem;
  color: var(--tampon);
  border: 2.5px solid currentColor; border-radius: 4px;
  outline: 1px solid currentColor; outline-offset: 3px;
  font-family: "Avenir Next Condensed", "Arial Narrow", var(--police);
  line-height: 1.15;
  transform: rotate(-7deg);
  opacity: 0.88;
  animation: visa 420ms cubic-bezier(0.2, 1.5, 0.4, 1) 300ms both;
  user-select: none;
}
.visa span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; }
.visa strong { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.05em; }
@keyframes visa {
  from { transform: rotate(-15deg) scale(1.5); opacity: 0; }
  to { transform: rotate(-7deg) scale(1); opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) { .visa { animation: none; } }

/* Les cinq étapes, en cases, comme la barre que l'on retrouve une fois connecté. */
.liasse-etapes {
  grid-area: etapes;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--trait-fort);
}
.liasse-etapes li { display: grid; gap: 0.15rem; align-content: start; padding: 0.8rem 0.75rem 0.9rem; border-right: 1px solid var(--trait); }
.liasse-etapes li:last-child { border-right: 0; }
.liasse-etapes .numero {
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center; margin-bottom: 0.35rem;
  border: 1.5px solid var(--trait-fort); border-radius: 2px; font-weight: 700; font-size: 0.85rem;
}
.liasse-etapes .titre { font-weight: 600; font-size: 0.84rem; overflow-wrap: anywhere; }
.liasse-etapes .etat { font-size: 0.76rem; color: var(--encre-douce); line-height: 1.3; }

.liasse-formulaire {
  grid-area: formulaire;
  display: flex; flex-direction: column; justify-content: center;
  padding: 2.4rem 2.4rem 2.2rem;
  border-left: 1px solid var(--trait-fort);
}
.liasse-formulaire h1 { margin: 0 0 1.2rem; font-size: 1.55rem; }
.liasse-formulaire .alerte { margin: 0 0 1.1rem; }
.liasse-formulaire > .consigne { margin: 1.3rem 0 0; }
.liasse-formulaire > .consigne:not(:last-child) { margin: 0 0 1.2rem; }

/* La mention d'éditeur, sous la liasse, comme le colophon d'un imprimé. */
.editeur {
  width: min(68rem, calc(100% - 12px)); margin: 0 12px 0 0;
  text-align: right; font-size: 0.8rem; color: var(--encre-douce);
}
.editeur strong { color: var(--encre); font-weight: 600; }

.formulaire-connexion { display: grid; }
.formulaire-connexion button[type="submit"] { margin-top: 1.2rem; width: 100%; padding-block: 0.65rem; }

/* Un champ = une case du formulaire : l'intitulé en petit dans le coin, la saisie dessous.
   Les cases empilées partagent leur trait, comme sur la déclaration. */
.case-saisie {
  position: relative;
  display: grid; gap: 0.05rem;
  padding: 0.5rem 0.75rem 0.4rem;
  border: 1px solid var(--trait-fort);
  background: var(--surface);
  cursor: text;
}
.case-saisie + .case-saisie { margin-top: -1px; }
.case-saisie > span { font-size: 0.75rem; color: var(--encre-douce); }
.case-saisie input {
  border: 0; border-radius: 0; background: transparent;
  padding: 0.1rem 0 0.15rem; font-size: 1.05rem; width: 100%;
}
.case-saisie input:focus-visible { outline: none; }
.case-saisie:focus-within { z-index: 1; border-color: var(--tampon); box-shadow: inset 0 0 0 1px var(--tampon); }
.case-saisie:focus-within > span { color: var(--tampon); }
.case-saisie.mot-de-passe { grid-template-columns: 1fr auto; align-items: center; }
.case-saisie.mot-de-passe > span { grid-column: 1 / -1; }
.case-saisie .afficher {
  background: transparent; border: 0; color: var(--tampon);
  padding: 0.1rem 0 0.1rem 0.7rem; font-size: 0.82rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.majuscules { margin: 0.55rem 0 0; font-size: 0.82rem; font-weight: 600; color: var(--doute); }
.erreur-connexion {
  margin: 0.8rem 0 0; padding: 0.45rem 0.7rem;
  border-left: 3px solid var(--echec); background: var(--echec-fond); color: var(--echec);
  font-size: 0.88rem;
}

@media (max-width: 880px) {
  .liasse {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "marque" "formulaire" "texte" "etapes";
    grid-template-rows: none;
  }
  .liasse { box-shadow: 6px 6px 0 -1px var(--tampon-fond), 6px 6px 0 0 var(--trait-fort); }
  .liasse-marque { padding: 1.3rem 1.3rem 0; }
  .liasse-marque img { height: 60px; }
  .liasse-formulaire { border-left: 0; padding: 1.4rem 1.3rem 1.6rem; }
  .liasse-texte { border-top: 1px solid var(--trait-fort); padding: 1.4rem 1.3rem; }
  .liasse-titre { font-size: 1.45rem; }
  .liasse-etapes { grid-template-columns: minmax(0, 1fr); }
  .liasse-etapes li {
    grid-template-columns: auto auto 1fr; align-items: center; gap: 0 0.6rem;
    padding: 0.55rem 1.3rem; border-right: 0; border-bottom: 1px solid var(--trait);
  }
  .liasse-etapes li:last-child { border-bottom: 0; }
  .liasse-etapes .numero { margin: 0; }
  .visa strong { font-size: 1.05rem; }
  .editeur { text-align: center; }
}