/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
:root {
  --paper: #eef1f4;
  --surface: #ffffff;
  --ink: #16202b;
  --ink-soft: #4b5a67;
  --ink-faint: #8695a3;
  --line: #d3dae1;
  --line-forte: #b7c2cd;

  --brand: #1d3a5f;
  --brand-strong: #142943;
  --brand-soft: #e7ecf2;

  --ok: #1e7a4c;
  --ok-bg: #e4f3ea;
  --warn: #9a5f00;
  --warn-bg: #fbf0dd;
  --danger: #b23a2e;
  --danger-bg: #f7e4e1;

  --rayon: 6px;
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
}

/* ------------------------------------------------------------------ */
/* Reset minimal                                                       */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0 0 0.6em; }
p:last-child { margin-bottom: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
table { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ------------------------------------------------------------------ */
/* Structure generale                                                  */
/* ------------------------------------------------------------------ */
.app {
  display: flex;
  height: 100vh;
}

.nav {
  width: 232px;
  flex: none;
  background: var(--brand-strong);
  color: #fff;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100vh;
  overflow-y: auto;
}
.nav__marque {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px 4px;
}
.nav__logo-app {
  width: 100%;
  max-width: 110px;
  height: auto;
  border-radius: 6px;
}

/* ------------------------------------------------------------------ */
/* Accueil - choix du dossier                                          */
/* ------------------------------------------------------------------ */
.grille-dossiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.carte-dossier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  cursor: pointer;
  text-align: center;
}
.carte-dossier:hover { border-color: var(--brand); }
.carte-dossier--actif { border-color: var(--brand); background: var(--brand-soft); }
.carte-dossier__logo { max-height: 48px; max-width: 100%; object-fit: contain; }

/* Pastille de notification (nombre de bordereaux a traiter), en haut a
   droite d'une carte dossier ou d'un bouton de menu. Rouge, ronde,
   toujours lisible. */
.pastille-notif {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-variant-numeric: tabular-nums;
}
.carte-dossier__nom { font-weight: 600; font-size: 13.5px; }
.carte-dossier__exercice { font-size: 12px; color: var(--ink-soft); }
.nav nav { display: flex; flex-direction: column; gap: 2px; }
.nav__lien {
  display: block;
  padding: 9px 10px;
  border-radius: var(--rayon);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 13.5px;
}
.nav__lien:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav__lien--actif {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 600;
}
.nav__section {
  padding: 14px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}
.nav__section--a-venir { display: flex; align-items: center; gap: 6px; }
.nav__badge-a-venir {
  font-size: 9px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  padding: 1px 6px;
  border-radius: 999px;
}

.nav__utilisateur {
  /* Dans le premier volet du menu : qui je suis et ou je travaille vont
     ensemble. Plus en bas de barre, ou la deconnexion voisinait le dossier
     de revision sans rapport. */
  padding: 4px 10px 8px;
  font-size: 12px;
}
.nav__utilisateur-nom { color: #fff; font-weight: 600; }
.nav__utilisateur-role { color: rgba(255, 255, 255, 0.55); margin-top: 1px; }
.nav__deconnexion {
  margin-top: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--rayon);
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
}
.nav__deconnexion:hover { background: rgba(255, 255, 255, 0.1); }

.app__principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.entete {
  padding: 22px 32px 14px;
  flex: none;
}
.entete__dossier h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.1;
}
.entete__exercice {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.contenu {
  padding: 18px 32px 48px;
  flex: 1;
  overflow-y: auto;
}

/* Ecran de connexion : pas de barre laterale, formulaire centre */
body.non-authentifie .nav,
body.non-authentifie .entete { display: none; }
body.non-authentifie .contenu {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.ecran-connexion {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px;
}

.chargement, .texte-discret {
  color: var(--ink-soft);
  padding: 6px 2px;
}

.etat-vide {
  padding: 32px;
  text-align: center;
  color: var(--ink-soft);
}
.etat-vide--erreur { color: var(--danger); }
.etat-vide__detail { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }

/* ------------------------------------------------------------------ */
/* Panneaux / cartes                                                    */
/* ------------------------------------------------------------------ */
.panneau {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.panneau__titre { font-size: 15px; margin-bottom: 4px; }
.panneau__intro { color: var(--ink-soft); font-size: 13px; margin-bottom: 16px; max-width: 62ch; }
.panneau__entete-actions {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.grille-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.carte-kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-forte);
  border-radius: var(--rayon);
  padding: 14px 16px;
}
.carte-kpi--ok { border-left-color: var(--ok); }
.carte-kpi--warn { border-left-color: var(--warn); }
.carte-kpi--danger { border-left-color: var(--danger); }
.carte-kpi__label { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.carte-kpi__valeur { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.carte-kpi__detail { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* Avis / bandeaux                                                      */
/* ------------------------------------------------------------------ */
.avis {
  border-radius: var(--rayon);
  padding: 12px 14px;
  font-size: 13px;
  margin-top: 12px;
}
.avis--ok { background: var(--ok-bg); color: #145c38; }
.avis--danger { background: var(--danger-bg); color: #8a2c22; }
.avis + .avis { margin-top: 10px; }
.avis__titre { font-weight: 600; margin-bottom: 4px; }

/* ------------------------------------------------------------------ */
/* Badges                                                               */
/* ------------------------------------------------------------------ */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }

.etiquette {
  display: inline-block;
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--brand-soft);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--police-mono);
}

/* ------------------------------------------------------------------ */
/* Boutons                                                              */
/* ------------------------------------------------------------------ */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-forte);
  background: var(--surface);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--rayon);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.bouton:hover { background: var(--paper); }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.bouton--principal {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.bouton--principal:hover { background: var(--brand-strong); }
.bouton--discret {
  border-color: transparent;
  background: transparent;
  padding: 6px 10px;
}
.bouton--discret:hover { background: var(--brand-soft); }
.bouton--danger { color: var(--danger); }
.bouton--danger:hover { background: var(--danger-bg); }

/* Bouton de dictee vocale en cours d'ecoute : fond rouge pale et
   pulsation discrete pour signaler clairement l'enregistrement actif. */
.bouton--dictee-active {
  background: var(--danger-bg);
  color: var(--danger);
  animation: pulsation-dictee 1.4s ease-in-out infinite;
}
@keyframes pulsation-dictee {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .bouton--dictee-active { animation: none; }
}

/* ------------------------------------------------------------------ */
/* Formulaires                                                         */
/* ------------------------------------------------------------------ */
.champ {
  border: 1px solid var(--line-forte);
  border-radius: var(--rayon);
  padding: 8px 10px;
  background: var(--surface);
  font-size: 13px;
}
.barre-filtres {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.barre-filtres .champ { flex: 1; min-width: 180px; }
.champ--select { flex: none; min-width: 170px; }
.champ--inline {
  border: 1px solid transparent;
  background: transparent;
  padding: 3px 5px;
  font-size: 12.5px;
  width: 100%;
  border-radius: 4px;
}
.champ--inline:hover { border-color: var(--line); }
.champ--inline:focus { border-color: var(--brand); background: var(--surface); }
.champ--inline::placeholder { color: var(--ink-faint); }
.champ--etroit { max-width: 90px; }

.case-a-cocher {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}

/* Zone de depot : grande, dessinee, explicite. Le fichier se depose par
   glisser ou par clic - les deux gestes menent au meme endroit. */
.zone-depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  border: 2px dashed var(--line-forte);
  border-radius: 10px;
  padding: 26px 20px;
  cursor: pointer;
  margin-bottom: 12px;
  background: var(--paper);
  transition: border-color 0.12s, background 0.12s;
}
.zone-depot:hover { border-color: var(--brand); background: var(--brand-soft); }
.zone-depot__illustration {
  width: 64px;
  height: 48px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
  margin-bottom: 4px;
}
.zone-depot:hover .zone-depot__illustration { opacity: 1; }
.zone-depot__titre { font-size: 14px; font-weight: 600; color: var(--ink); }
.zone-depot__aide { font-size: 12.5px; color: var(--ink-soft); max-width: 46em; }
.zone-depot__texte { font-size: 12.5px; color: var(--brand); font-weight: 600; min-height: 1.2em; }
.zone-depot--large { padding: 34px 20px; }
.zone-depot--survol {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.zone-depot--survol .zone-depot__illustration { opacity: 1; }

.form-import { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

.form-pec { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.form-pec__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 14px;
  margin-bottom: 16px;
}
.form-pec__grille label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.form-pec__grille input, .form-pec__grille select, .form-pec__grille textarea {
  border: 1px solid var(--line-forte);
  border-radius: var(--rayon);
  padding: 7px 9px;
  color: var(--ink);
  font-size: 13px;
  background: var(--surface);
}
.form-pec__col-large { grid-column: span 2; }
.form-pec__actions { display: flex; gap: 10px; }

/* ------------------------------------------------------------------ */
/* Tableaux                                                             */
/* ------------------------------------------------------------------ */
.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tableau th, .tableau td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.tableau th {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 12px;
  text-transform: none;
}
.tableau tbody tr:hover { background: var(--paper); }
.tableau td.col-nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau td.col-actions { text-align: right; white-space: nowrap; }

/* Presentation inspiree du grand-livre Excel : quadrillage complet plutot
   que de simples filets horizontaux, en-tete et pied figes au defilement. */
.tableau-scroll {
  max-height: 68vh;
  overflow: auto;
  border: 1px solid var(--line-forte);
  border-radius: var(--rayon);
}
.tableau--grille th, .tableau--grille td { border: 1px solid var(--line); }
.tableau-scroll thead tr.ligne-entetes th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 3;
}
.tableau-scroll thead tr.ligne-totaux td {
  position: sticky;
  background: var(--brand-soft);
  font-weight: 700;
  font-size: 14px;
  z-index: 2;
}
.tableau-scroll thead tr.ligne-totaux--selection td {
  color: var(--danger);
  background: var(--danger-bg);
}

/* En-tetes de colonnes : fond bleu fonce, texte blanc gras majuscule */
.tableau--excel { table-layout: fixed; }
.tableau--excel thead tr.ligne-entetes th {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* Filtres directement dans les en-tetes (comme Excel) : le libelle de
   colonne garde le style ci-dessus, le controle de filtre en dessous
   reste lisible sur le fond bleu fonce et se distingue visuellement du
   texte du titre. */
.tableau--excel thead tr.ligne-entetes th > div {
  margin-bottom: 3px;
}
.champ-filtre-entete {
  width: 100%;
  box-sizing: border-box;
  font-size: 10.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  padding: 2px 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}
.champ-filtre-entete:focus { outline: 2px solid #fff; background: #fff; }

/* Lignes resserrees, une seule ligne de haut */
.tableau--compact td { padding: 0 5px; vertical-align: middle; line-height: 1.25; }
.cellule-tronquee {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0; /* force le respect de la largeur de colonne fixee par colgroup */
}

/* Mise en forme conditionnelle selon la nature d'operation - une seule de
   ces regles s'applique par ligne, la nature etant un champ unique. */
.ligne-routine td { background: #ededed; color: var(--ink); }
.ligne-odp td { font-weight: 700; font-style: italic; color: #6b3fa0; }
.ligne-orv td { font-weight: 700; font-style: italic; color: #6b3fa0; background: #f0e6fa; }
.ligne-cpta td { color: var(--ok); background: var(--ok-bg); }

/* Mise en forme conditionnelle selon le libelle - independante de la
   nature, donc placee apres pour l'emporter sur un fond eventuel ci-dessus
   (un signal comme "rejet" est plus urgent qu'une simple categorie). */
.ligne-paypal td { background: #e3f0fc; }
.ligne-rejet td { font-weight: 700; color: var(--danger); background: var(--danger-bg); }

/* Les champs de saisie en ligne (input) ne prennent pas la couleur de
   texte de leur cellule par heritage CSS : un input a sa propre couleur
   par defaut. Sur une ligne coloree par sa nature (REJET, ODP...), le
   fond de la cellule changeait donc mais pas le texte tape dans les
   champs (date, libelle, montants...), qui restait sombre - illisible,
   voire percu comme absent, sur un fond rouge pale. On force donc
   l'heritage explicite. */
.ligne-routine td input,
.ligne-odp td input,
.ligne-orv td input,
.ligne-cpta td input,
.ligne-paypal td input,
.ligne-rejet td input {
  color: inherit;
  font-weight: inherit;
  font-style: inherit;
}

/* Colonne d'action compacte (rapprochement) */
.col-actions-compact { text-align: center; }
.bouton-icone {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.bouton-icone:hover { background: var(--brand-soft); }
.puce-rapproche { color: var(--ok); font-size: 14px; }

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pagination__bandeau {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 10px 16px;
  background: var(--brand-soft);
  border: 1px solid var(--line-forte);
  border-radius: var(--rayon);
}
.pagination__info { color: var(--ink); }

/* ------------------------------------------------------------------ */
/* Graphique mensuel (SVG maison, sans librairie)                      */
/* ------------------------------------------------------------------ */
.graphique-mensuel { width: 100%; height: 160px; display: block; }
.graphique-axe { stroke: var(--line-forte); stroke-width: 0.3; }
.barre--debit { fill: var(--danger); opacity: 0.75; }
.barre--credit { fill: var(--brand); opacity: 0.85; }
.graphique-mois {
  display: flex;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.graphique-mois span { text-align: center; text-transform: capitalize; }
.graphique-legende { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.pastille { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.pastille--debit { background: var(--danger); opacity: 0.75; }
.pastille--credit { background: var(--brand); opacity: 0.85; }

/* Grands badges chiffres du tableau de bord */
.grille-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.badge-chiffre {
  border-radius: 10px;
  padding: 18px 22px;
  border: 1px solid var(--line-forte);
  background: var(--surface);
}
.badge-chiffre__label { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.badge-chiffre__nombre { font-size: 44px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.badge-chiffre--neutre .badge-chiffre__nombre { color: var(--brand); }
.badge-chiffre--vert { background: var(--ok-bg); border-color: var(--ok); }
.badge-chiffre--vert .badge-chiffre__nombre { color: var(--ok); }
.badge-chiffre--orange { background: #fdf0e0; border-color: #b5650a; }
.badge-chiffre--orange .badge-chiffre__nombre { color: #b5650a; }
.badge-chiffre--rouge-clair { background: #ffffff; border-color: var(--danger); }
.badge-chiffre--rouge-clair .badge-chiffre__nombre { color: var(--danger); }
.badge-chiffre--rouge-plein { background: var(--danger); border-color: var(--danger); }
.badge-chiffre--rouge-plein .badge-chiffre__nombre { color: #fff; }
.badge-chiffre--rouge-plein .badge-chiffre__label { color: rgba(255,255,255,0.85); }
.badge-chiffre__detail { font-size: 11.5px; color: var(--ink-soft); margin-top: 6px; }
.badge-chiffre--rouge-plein .badge-chiffre__detail { color: rgba(255,255,255,0.75); }
.badge-chiffre__message { font-size: 12.5px; font-weight: 700; margin-top: 6px; }
.badge-chiffre--orange .badge-chiffre__message { color: #b5650a; }
.badge-chiffre--rouge-plein .badge-chiffre__message { color: #fff; }

.courbe--attente { stroke: var(--danger); }
.courbe--pec { stroke: var(--brand); }

/* Histogramme mensuel en HTML/CSS (plutot qu'en SVG a l'echelle non
   uniforme, qui deformerait le texte des etiquettes de valeur). */
.histogramme {
  display: flex;
  align-items: flex-end;
  height: 170px;
  gap: 2px;
  border-bottom: 1px solid var(--line-forte);
  padding-bottom: 2px;
}
.histogramme__colonne {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}
.histogramme__etiquette {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.histogramme__etiquette--alerte { color: var(--danger); }
.histogramme__etiquette--vert { color: #1E7A4C; }
.histogramme__etiquette--orange { color: #A85D10; }
.histogramme__etiquette--rouge { color: #B23A2E; }
.histogramme__etiquette--defaut { color: #3548A8; }
.histogramme__etiquette--accent { color: #A85D10; }
.histogramme__barre {
  width: 60%;
  max-width: 26px;
  background: #8DA0E0; /* Bleu France en teinte pastel */
  border-radius: 4px 4px 0 0;
}
.histogramme__barre--vert { background: #8FDBB2; }
.histogramme__barre--orange { background: #F6C177; }
.histogramme__barre--rouge { background: #F0A0A0; }
.histogramme__barre--defaut { background: #8DA0E0; }
.histogramme__barre--accent { background: #F6C177; }
.histogramme__mois {
  font-size: 10.5px;
  color: var(--ink-soft);
  text-transform: capitalize;
  margin-top: 4px;
}

/* ------------------------------------------------------------------ */
/* Ecran de rapprochement                                               */
/* ------------------------------------------------------------------ */
.rapprochement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.rapprochement__colonne { margin-bottom: 0; }

.liste-selection {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  max-height: 480px;
  overflow-y: auto;
}
.ligne-selection {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
}
button.ligne-selection { font: inherit; }
.ligne-selection:hover { border-color: var(--brand); }
.ligne-selection--actif { border-color: var(--brand); background: var(--brand-soft); }
.ligne-selection__date { color: var(--ink-soft); font-variant-numeric: tabular-nums; flex: none; width: 66px; }
.ligne-selection__libelle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-selection__montant { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.ligne-selection--coche { cursor: default; }
.ligne-selection--coche input[type=checkbox] { flex: none; }

.mouvement-actif {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: var(--rayon);
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 13px;
  flex-wrap: wrap;
}
.mouvement-actif__montant { font-weight: 600; font-variant-numeric: tabular-nums; }

.barre-total {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.barre-total strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/* Toasts                                                               */
/* ------------------------------------------------------------------ */
.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}
.toast {
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--rayon);
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast--visible { opacity: 1; transform: translateY(0); }
.toast--succes { background: var(--ok); }
.toast--erreur { background: var(--danger); }

/* ------------------------------------------------------------------ */
/* Reactif                                                              */
/* ------------------------------------------------------------------ */
/* Tableau des mouvements : quand la fenetre se reduit, le libelle de
   l'operation est plus utile que le commentaire au quotidien - on efface
   la colonne commentaire (colonne flexible du colgroup) plutot que de
   laisser les autres s'ecraser. */
@media (max-width: 1300px) {
  /* Colonne Commentaire masquee sur ecran etroit. Reperee par sa CLASSE,
     jamais par sa position : une regle en nth-child(4) masquait la 4e
     cellule de l'en-tete et du corps, mais pas la bonne cellule des lignes
     de totaux (construites avec des colspan), qui se retrouvaient decalees
     d'une colonne vers la droite. Chaque ligne - totaux compris - porte
     desormais sa propre cellule .col-commentaire, masquee avec les autres.
     verif_masquage_colonnes.py interdit le retour d'un masquage par position. */
  .tableau--mouvements .col-commentaire {
    display: none;
  }
}

@media (max-width: 860px) {
  .rapprochement { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .app { flex-direction: column; height: auto; }
  .nav {
    width: auto;
    height: auto;
    overflow-y: visible;
    flex-direction: row;
    align-items: center;
    padding: 12px 14px;
    overflow-x: auto;
  }
  .nav nav { flex-direction: row; }
  .app__principal { height: auto; overflow: visible; }
  .contenu { overflow-y: visible; }
  .entete, .contenu { padding-left: 16px; padding-right: 16px; }
  .form-pec__col-large { grid-column: span 1; }
}

/* ------------------------------------------------------------------ */
/* Dossier de revision (operations annuelles)                          */
/* ------------------------------------------------------------------ */
.grille-balances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.carte-balance {
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.carte-balance__entete { display: flex; align-items: center; gap: 12px; }
.carte-balance__position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--rayon);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}
.carte-balance__titre { font-weight: 600; }
.carte-balance__etat { display: flex; flex-direction: column; gap: 8px; }
.carte-balance__etat .bouton { align-self: flex-start; }

.ligne-cliquable { cursor: pointer; }
.ligne-revisee td { background: var(--ok-bg); }
.ligne-rubrique td {
  background: var(--brand-soft);
  font-weight: 600;
  color: var(--brand);
}
.ecart-notable { color: var(--danger); font-weight: 600; }

.sous-titre {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.lien-retour { text-decoration: none; font-weight: 500; }
.lien-retour:hover { text-decoration: underline; }
.entete-outils { display: flex; align-items: center; gap: 10px; }

.grille-programmes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.carte-programme {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: "code libelle" "code jauge";
  gap: 4px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.carte-programme:hover { border-color: var(--brand); }
.carte-programme__code {
  grid-area: code;
  font-size: 20px;
  font-weight: 800;
  color: var(--brand);
  text-align: center;
}
.carte-programme__libelle { grid-area: libelle; font-weight: 600; }
.carte-programme .badge-avancement { grid-area: jauge; justify-self: start; }

.bloc-synthese { display: block; margin-bottom: 14px; }
.bloc-synthese__titre {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--brand);
}
.bloc-synthese textarea { width: 100%; resize: vertical; }

/* ------------------------------------------------------------------ */
/* Presentation des tableaux du dossier de revision                    */
/* ------------------------------------------------------------------ */

/* En-tetes : gras sur fond gris moyen. Sur une feuille maitresse de cent
   lignes, l'en-tete reste colle en haut au defilement - il doit donc se
   distinguer nettement du corps du tableau, sinon la premiere ligne de
   donnees se confond avec lui. */
.tableau--grille thead tr.ligne-entetes th,
.tableau-scroll thead tr.ligne-entetes th {
  background: #c8d0d8;
  color: var(--brand-strong);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Une seule ligne : un en-tete qui se renvoie a la ligne decale toutes
     les colonnes voisines et fait perdre le rapport entre un intitule et
     sa colonne. Un intitule trop long est tronque, jamais replie. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: var(--line-forte);
}

/* Libelle : une seule ligne, coupee par des points de suspension plutot
   que renvoyee a la ligne. Un tableau dont les lignes n'ont pas toutes la
   meme hauteur se parcourt beaucoup moins vite du regard. Le libelle
   complet reste accessible en infobulle. */
.tableau .col-libelle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* width + max-width : 0 est la recette qui force une colonne de tableau
     a absorber la largeur restante tout en autorisant la troncature. Sans
     le max-width, la colonne se contenterait de sa largeur naturelle et
     le texte deborderait au lieu d'etre coupe. */
  width: 100%;
  max-width: 0;
}

/* Colonnes de texte long (questions de controle interne, diligences) :
   elargies elles aussi, mais SANS troncature - ce sont des consignes a
   lire, pas des libelles a identifier d'un coup d'oeil. */
.tableau .col-texte {
  width: 100%;
  min-width: 260px;
}

/* Exercice revise : la colonne que l'on lit en premier. Fond teinte et
   filets lateraux marques pour la retrouver d'un coup d'oeil au milieu
   des colonnes de comparaison. */
.tableau .col-exercice-n {
  background: #eaf0f7;
  font-weight: 600;
  border-left: 2px solid var(--brand);
  border-right: 2px solid var(--brand);
}
.tableau--grille thead tr.ligne-entetes th.col-exercice-n {
  background: var(--brand);
  color: #ffffff;
}
.tableau tbody tr:hover .col-exercice-n { background: #dfe8f3; }
.ligne-revisee .col-exercice-n { background: #dcecdf; }

/* Badge d'avancement */
.badge-avancement {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.badge-avancement__pct { font-size: 13px; font-weight: 700; }
.badge-avancement__detail { font-size: 11px; opacity: 0.8; font-family: var(--police-mono); }
.badge-avancement--vide {
  background: var(--paper);
  border-color: var(--line-forte);
  color: var(--ink-soft);
}
.badge-avancement--encours {
  background: var(--warn-bg);
  border-color: var(--warn);
  color: var(--warn);
}
.badge-avancement--termine {
  background: var(--ok-bg);
  border-color: var(--ok);
  color: var(--ok);
}

/* Saisie de l'exercice au depot d'une balance */
.champ-annee {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.champ-annee .champ { width: 82px; }

/* ------------------------------------------------------------------ */
/* Lisibilite des colonnes chiffrees                                   */
/* ------------------------------------------------------------------ */

/* Chiffres a chasse fixe : sans cela, un « 1 » etroit et un « 8 » large
   decalent les colonnes d'une ligne a l'autre et les rangs (unites,
   dizaines, centaines) ne se superposent plus verticalement. C'est ce qui
   rend une colonne de montants penible a comparer du regard.
   Calibri possede bien un jeu de chiffres tabulaires ; la police mono en
   dernier recours garantit le meme resultat partout. */
.tableau td.col-nombre,
.tableau th.col-nombre {
  font-variant-numeric: tabular-nums lining;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.01em;
}

/* Numeros de compte : chasse fixe des chiffres, pour que les rangs se
   superposent d'une ligne a l'autre malgre les longueurs variables
   (531, 5151, 515100). */
code, .etiquette, .badge-avancement__detail {
  font-variant-numeric: tabular-nums lining;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* En-tetes de colonnes centres */
.tableau thead tr.ligne-entetes th { text-align: center; }
.tableau td.col-centre, .tableau th.col-centre { text-align: center; }

/* Lien-icone : dans une colonne etroite, une puce cliquable remplace un
   libelle repete a chaque ligne. Le libelle reste en infobulle et en
   aria-label pour la lecture d'ecran. */
.lien-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}
.lien-icone:hover { background: var(--brand); color: #ffffff; }

/* Montant cliquable menant au grand livre du compte */
.lien-montant {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--line-forte);
}
.lien-montant:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* Discordance entre la balance et le grand livre sur un compte */
.cellule-discordante { color: var(--danger); }
.marque-ecart {
  margin-left: 4px;
  font-weight: 700;
  color: var(--danger);
}

/* ------------------------------------------------------------------ */
/* Grand livre : lecture compte par compte                             */
/* ------------------------------------------------------------------ */

/* Un grand livre se lit par bloc de compte. Sans separation, la derniere
   ecriture d'un compte et la premiere du suivant se confondent - et un
   solde se lit sur le mauvais bloc. */
.tableau tbody tr.debut-de-compte td { border-top: 2px solid var(--brand); }
.tableau tbody tr.debut-de-compte:first-child td { border-top-width: 1px; }

/* Pieces justificatives attachees a une ecriture */
.cellule-pieces { white-space: nowrap; }
.piece {
  display: inline-block;
  padding: 0 4px;
  margin-right: 3px;
  border-radius: 3px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-decoration: none;
  vertical-align: middle;
}
.piece:hover { background: var(--brand); color: #ffffff; }
.bouton-piece {
  width: 17px;
  height: 17px;
  line-height: 15px;
  padding: 0;
  font-size: 13px;
  vertical-align: middle;
}

/* Numero de version, en pied de barre de navigation */
.nav__version {
  padding: 4px 14px 10px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}

/* Ligne selectionnee (case a cocher cochee) dans les tableaux avec
   selection multiple - placee en toute fin de feuille de style pour
   l'emporter sur les couleurs conditionnelles de nature (REJET, ODP...),
   la selection etant un etat transitoire plus pertinent a l'instant T.
   Gras + leger changement de couleur de police plutot qu'un fond ou une
   bordure, pour rester discret ; cible aussi les champs de saisie en
   ligne, qui ne recuperent pas toujours la couleur du texte par simple
   heritage CSS. */
tr.ligne-selectionnee td,
tr.ligne-selectionnee td input {
  font-weight: 700;
  color: var(--brand);
}

/* ----------------------------------------------------------------------
   Demandes de prise en charge
   Trois sorts possibles pour une ligne, trois signaux distincts : une ligne
   rejetee reprend le rouge gras sur fond rose des lignes REJET du suivi des
   prises en charge (meme idee, meme couleur) ; une ligne en suspens passe en
   orange, parce qu'elle n'est pas refusee, seulement remise a plus tard ;
   une ligne validee reste neutre, c'est le cas courant.
   ---------------------------------------------------------------------- */
.badge--neutre { background: var(--paper); color: var(--ink-soft); }

/* Orange clair : ligne en suspens (instruction d'un bordereau, suivi des
   prises en charge) ou deja transmise au PES. Un fond seul, sans graisse :
   la ligne reste a reprendre, elle n'est pas en faute. */
.tableau tbody tr.ligne-suspens td,
.tableau tbody tr.ligne-orange-clair td { background: #fdf0e1; }
.tableau tbody tr.ligne-suspens:hover td,
.tableau tbody tr.ligne-orange-clair:hover td { background: #fbe6cc; }
.ligne-orange-clair td input { color: inherit; }

/* Vert : ligne validee dont aucun controle n'a rien trouve a redire. */
.tableau tbody tr.ligne-controles-ok td { background: var(--ok-bg); }
.tableau tbody tr.ligne-controles-ok:hover td { background: #d5ecdd; }

/* Le controle de montant colore la cellule du montant TTC lui-meme. */
.tableau td.montant-ko { color: var(--danger); font-weight: 700; }
.tableau td.montant-alerte { color: var(--warn); font-weight: 700; }

.tableau td.col-centre { text-align: center; }

/* Tableaux « une ligne par enregistrement » : rien ne se replie, le texte
   trop long est coupe par des points de suspension et reste lisible au
   survol (attribut title). */
.tableau--une-ligne td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 24px;
  padding-top: 1px;
  padding-bottom: 1px;
}
.tableau-scroll--court { max-height: 42vh; }

.bouton-icone { color: var(--brand); display: inline-flex; align-items: center; vertical-align: middle; }
.bouton-icone--danger { color: var(--danger); }
.bouton-icone--danger:hover { background: var(--danger-bg); }

/* Decision sur une ligne : V valider, S suspendre, R rejeter. Le bouton de
   la decision en vigueur est plein, les autres au trait. */
.bouton-decision {
  width: 22px; height: 20px; margin: 0 1px; padding: 0;
  border: 1px solid var(--line-forte); border-radius: 3px;
  background: var(--surface); color: var(--ink-soft);
  font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1;
}
.bouton-decision:disabled { cursor: default; opacity: 0.55; }
.bouton-decision--validee.est-actif { background: var(--ok); border-color: var(--ok); color: #fff; }
.bouton-decision--suspens.est-actif { background: var(--warn); border-color: var(--warn); color: #fff; }
.bouton-decision--rejet.est-actif { background: var(--danger); border-color: var(--danger); color: #fff; }
.champ-commentaire-decision { width: 100%; box-sizing: border-box; }

/* Poignee de largeur de colonne, sur le bord droit de chaque en-tete. */
.tableau thead th { position: relative; }
.poignee-colonne {
  position: absolute; top: 0; right: 0; bottom: 0; width: 6px;
  cursor: col-resize; user-select: none; z-index: 4;
}
.poignee-colonne:hover { background: rgba(255, 255, 255, 0.35); border-right: 2px solid var(--brand-soft); }
body.redimension-en-cours, body.redimension-en-cours * { cursor: col-resize !important; user-select: none !important; }

/* L'IBAN n'est jamais lu de bout en bout : il sert a comparer, pas a lire.
   Un corps plus petit lui laisse sa colonne sans ecraser le reste. */
.tableau td.cellule-iban { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }

/* ----------------------------------------------------------------------
   En-tetes de colonnes : meme taille que les lignes du tableau, en gras
   et en majuscules. Place en fin de feuille, avec les memes selecteurs que
   les regles precedentes, pour l'emporter sur toutes : un en-tete plus gros
   que les donnees prenait de la hauteur et de la largeur pour rien, et
   tronquait les intitules des colonnes etroites.
   ---------------------------------------------------------------------- */
.tableau thead th,
.tableau--grille thead tr.ligne-entetes th,
.tableau-scroll thead tr.ligne-entetes th,
.tableau--excel thead tr.ligne-entetes th {
  font-size: inherit;
  font-weight: 700;
  text-transform: uppercase;
}

/* Tableau de bord : un graphique et, a sa droite, le badge qui le resume. */
.bloc-avec-badge { display: flex; gap: 18px; align-items: stretch; }
.bloc-avec-badge__principal { flex: 1; min-width: 0; }
.badge-taux-erreur { flex: 0 0 190px; align-self: center; text-align: center; }
.badge-taux-erreur .badge-chiffre__nombre { font-size: 34px; white-space: nowrap; }
.badge-taux-erreur__visage { font-size: 30px; vertical-align: middle; }
@media (max-width: 900px) {
  .bloc-avec-badge { flex-direction: column; }
  .badge-taux-erreur { align-self: stretch; }
}

/* ----------------------------------------------------------------------
   Barre de navigation : quatre volets separes, une icone par ecran et un
   libelle court (l'intitule complet reste en infobulle). Les icones sont
   dessinees au trait, dans la couleur du lien : elles servent de reperes
   visuels, pas de decoration.
   ---------------------------------------------------------------------- */
.nav { gap: 6px; padding: 16px 12px; }
.nav__groupe { padding-top: 8px; }
.nav__groupe + .nav__groupe { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 6px; }
.nav__groupe[hidden] { display: none; }
.nav__section { padding: 6px 10px 4px; }

.nav__lien {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-left: 3px solid transparent;
  line-height: 1.2;
}
/* Pastille dans un lien de menu : a droite du libelle, dans le flux (pas
   en coin absolu comme sur une carte dossier). */
.pastille-notif--menu {
  position: static;
  margin-left: auto;
  box-shadow: none;
}
.nav__lien svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}
.nav__lien:hover svg { opacity: 0.9; }
.nav__lien--actif { border-left-color: var(--accent, #7fb2e5); }
.nav__lien--actif svg { opacity: 1; }
.nav__version { margin-top: auto; }

/* ----------------------------------------------------------------------
   Depot d'un lot de bordereaux : une barre par fichier. Pendant l'envoi
   elle suit l'avancement reel ; une fois le fichier arrive, le serveur lit
   le bordereau et passe les controles - duree inconnue, d'ou une animation
   indeterminee qui balaie la barre plutot qu'une jauge figee a 100 %.
   ---------------------------------------------------------------------- */
.depot-progression {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 2fr) minmax(150px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  font-size: 12.5px;
}
.depot-progression__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot-progression__piste {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.depot-progression__jauge {
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width 0.15s linear;
}
.depot-progression__etat { color: var(--ink-soft); }
.depot-progression--analyse .depot-progression__jauge {
  width: 40% !important;
  animation: depot-balayage 1.1s ease-in-out infinite;
}
.depot-progression--ok .depot-progression__jauge { background: var(--ok); }
.depot-progression--ok .depot-progression__etat { color: var(--ok); }
.depot-progression--erreur .depot-progression__jauge { background: var(--danger); }
.depot-progression--erreur .depot-progression__etat { color: var(--danger); font-weight: 600; }
@keyframes depot-balayage {
  0% { margin-left: 0; }
  50% { margin-left: 60%; }
  100% { margin-left: 0; }
}

.sous-titre { font-size: 13.5px; font-weight: 700; color: var(--brand-strong); margin: 14px 0 6px; }
.lot-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.champ-libelle-lot { text-transform: uppercase; width: 100%; }

/* Suite d'un meme envoi dans « Mes demandes » : les lignes d'un lot se
   suivent sans repeter sa date ni son numero, et un filet plus discret les
   relie - on voit d'un coup d'oeil ou commence l'envoi suivant. */
.tableau tbody tr.ligne-suite-lot td { border-top-color: #eef2f6; }
.tableau tbody tr.ligne-suite-lot td:first-child,
.tableau tbody tr.ligne-suite-lot td:nth-child(2) { background: transparent; }

/* Barre d'export d'un tableau (XLSX / PDF), en tete de panneau, discrete. */
.barre-export {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12.5px;
}
.barre-export .bouton { padding: 4px 10px; }