:root {
  --couleur-fond: #f3f6f7;
  --couleur-carte: #ffffff;
  --couleur-texte: #16232a;
  --couleur-texte-attenue: #5c6b72;
  --couleur-bordure: #dde5e6;
  --couleur-primaire: #0e3d3b;
  --couleur-primaire-hover: #0a2c2a;
  --couleur-primaire-fond: #e4eeed;
  --couleur-accent: #1b8f83;
  --couleur-succes: #197a4b;
  --couleur-succes-fond: #e3f6ea;
  --couleur-info: #1d4ed8;
  --couleur-info-fond: #e6edfd;
  --couleur-alerte: #b45309;
  --couleur-alerte-fond: #fdf1de;
  --couleur-erreur: #b02222;
  --couleur-erreur-fond: #fbe7e7;
  --couleur-neutre: #5c6b72;
  --couleur-neutre-fond: #eceff1;
  --rayon: 8px;
  --rayon-grand: 12px;
  --ombre-carte: 0 1px 2px rgba(16, 36, 40, 0.05);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  min-height: 100vh;
}

a {
  color: var(--couleur-primaire);
}

/* -------------------- Navigation (sidebar) --------------------
   header.barre-nav n'existe que sur les 3 pages authentifiees
   (Import, Suivi, Administration) - Connexion/Inscription n'ont pas
   de <header> du tout, donc la regle body.avec-sidebar (portee par
   une classe posee explicitement sur ces 3 pages) ne les affecte
   jamais. Tout le contenu (liens, badge role, nom, deconnexion) reste
   genere par la meme fonction partagee frontend/js/nav.js ; seule la
   disposition CSS change ici. */

body.avec-sidebar {
  display: flex;
  align-items: flex-start;
}

header.barre-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  width: 240px;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  background: var(--couleur-carte);
  border-right: 1px solid var(--couleur-bordure);
  padding: 1.25rem 1rem;
  gap: 1.5rem;
}

.barre-nav .marque {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--couleur-primaire);
  white-space: nowrap;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--couleur-primaire);
  color: #fff;
  flex-shrink: 0;
}

.logo svg {
  width: 16px;
  height: 16px;
}

.barre-nav nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  /* Occupe l'espace vertical restant : pousse .utilisateur en bas de
     la colonne sans avoir besoin de marge calculee a la main. */
  flex: 1;
}

.barre-nav nav a {
  text-decoration: none;
  color: var(--couleur-texte-attenue);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 0.85rem;
  border-radius: var(--rayon);
}

.barre-nav nav a:hover {
  background: var(--couleur-neutre-fond);
  color: var(--couleur-texte);
}

.barre-nav nav a.actif {
  color: #fff;
  background: var(--couleur-primaire);
}

.barre-nav .utilisateur {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--couleur-texte-attenue);
  padding-top: 1rem;
  border-top: 1px solid var(--couleur-bordure);
}

.barre-nav .utilisateur .nom-utilisateur {
  color: var(--couleur-texte);
  font-weight: 600;
  white-space: normal;
  word-break: break-word;
}

.barre-nav .badge-role {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--couleur-primaire-fond);
  color: var(--couleur-primaire);
  vertical-align: middle;
}

.barre-nav button.deconnexion {
  width: 100%;
  background: none;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  color: var(--couleur-texte);
  font-size: 0.85rem;
}

.barre-nav button.deconnexion:hover {
  background: var(--couleur-neutre-fond);
}

/* -------------------- Mise en page -------------------- */

main {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

/* La sidebar fait partie d'un flex-row (body.avec-sidebar) : main
   doit pouvoir retrecir en dessous de sa largeur de contenu naturelle
   (min-width:0 est le correctif standard pour l'autrement fameux bug
   flexbox ou un descendant large, ici le tableau de suivi, empeche
   son conteneur de retrecir et provoque un scroll horizontal de toute
   la page plutot que d'etre contenu dans sa propre carte). */
body.avec-sidebar main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Page Suivi seulement (pas Import/Administration, dont le contenu
   plus etroit n'a pas besoin de cette largeur) : le tableau a jusqu'a
   7 colonnes en vue admin (~1140px de large). A 960px comme les
   autres pages, il devait scroller horizontalement meme sur des
   ecrans larges ou de la place etait disponible a droite. Elargi ici
   specifiquement ; le scroll horizontal contenu dans #conteneur-tableau
   reste actif en filet de securite sur les fenetres plus etroites que
   cette largeur. */
body.page-suivi main {
  max-width: 1400px;
}

.carte {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-carte);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.carte h1,
.carte h2 {
  margin-top: 0;
}

.carte h1 {
  font-size: 1.4rem;
}

.page-connexion main {
  max-width: 400px;
  margin-top: 4rem;
}

.page-connexion .carte {
  border-top: 4px solid var(--couleur-primaire);
}

.entete-connexion {
  text-align: center;
  margin-bottom: 1.5rem;
}

.entete-connexion .logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin: 0 auto 0.75rem;
}

.entete-connexion .logo svg {
  width: 24px;
  height: 24px;
}

.entete-connexion h1 {
  margin: 0;
}

.entete-connexion p {
  color: var(--couleur-texte-attenue);
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
}

/* -------------------- Formulaires -------------------- */

form .champ {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"] {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-size: 0.95rem;
  background: #fff;
  color: var(--couleur-texte);
}

input:focus {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 1px;
}

/* Bouton oeil (afficher/masquer le mot de passe, ecran Connexion). */
.champ-mot-de-passe {
  position: relative;
}

.champ-mot-de-passe input[type="password"],
.champ-mot-de-passe input[type="text"] {
  padding-right: 2.5rem;
}

.bouton-oeil {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.25rem;
  color: var(--couleur-texte-attenue);
  cursor: pointer;
}

.bouton-oeil:hover {
  color: var(--couleur-texte);
}

button.bouton-principal,
a.bouton-principal {
  display: inline-block;
  background: var(--couleur-primaire);
  color: #fff;
  border: none;
  border-radius: var(--rayon);
  padding: 0.65rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

button.bouton-principal:hover,
a.bouton-principal:hover {
  background: var(--couleur-primaire-hover);
}

button.bouton-principal:disabled {
  background: var(--couleur-neutre);
  cursor: not-allowed;
}

button.bouton-secondaire,
a.bouton-secondaire {
  display: inline-block;
  background: #fff;
  color: var(--couleur-primaire);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

button.bouton-secondaire:hover,
a.bouton-secondaire:hover {
  background: var(--couleur-primaire-fond);
  border-color: var(--couleur-primaire);
}

button.bouton-danger {
  display: inline-block;
  background: #fff;
  color: #c0392b;
  border: 1px solid #e0b4ae;
  border-radius: var(--rayon);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

button.bouton-danger:hover {
  background: #fdf1f0;
  border-color: #c0392b;
}

.lien-secondaire {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--couleur-texte-attenue);
}

/* -------------------- Messages -------------------- */

.message {
  padding: 0.65rem 0.9rem;
  border-radius: var(--rayon);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.message.erreur {
  background: var(--couleur-erreur-fond);
  color: var(--couleur-erreur);
}

.message.succes {
  background: var(--couleur-succes-fond);
  color: var(--couleur-succes);
}

.message.info {
  background: var(--couleur-info-fond);
  color: var(--couleur-info);
}

.masque {
  display: none !important;
}

#liens-telechargement {
  display: flex;
  gap: 0.5rem;
}

/* -------------------- Badges -------------------- */

.badge {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.badge.statut-detecte,
.badge.statut-traite,
.badge.statut-succes {
  background: var(--couleur-succes-fond);
  color: var(--couleur-succes);
}

.badge.statut-non_reconnu,
.badge.statut-avec_ecarts {
  background: var(--couleur-alerte-fond);
  color: var(--couleur-alerte);
}

.badge.statut-erreur,
.badge.statut-echec {
  background: var(--couleur-erreur-fond);
  color: var(--couleur-erreur);
}

.badge.statut-en_cours {
  background: var(--couleur-info-fond);
  color: var(--couleur-info);
}

.badge.statut-importe {
  background: var(--couleur-neutre-fond);
  color: var(--couleur-neutre);
}

/* Badge du type de fichier detecte (distinct du badge de statut : pas
   de puce de couleur, teinte neutre "information" plutot que
   succes/erreur). */
.badge-type {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--couleur-primaire-fond);
  color: var(--couleur-primaire);
}

/* -------------------- Tableau de suivi -------------------- */

/* Le tableau de suivi a beaucoup de colonnes (jusqu'a 7 en vue admin,
   avec la colonne Utilisateur) : sur un ecran etroit ou une fois la
   sidebar en place, il ne doit jamais faire deborder la page entiere.
   Le scroll horizontal reste contenu dans ce conteneur, pas sur
   <body> - cf. main { min-width: 0 } plus haut, sans quoi flexbox
   empecherait ce scroll de se declencher et pousserait toute la page
   en largeur a la place. */
#conteneur-tableau {
  overflow-x: auto;
  /* Complement a la scrollbar ci-dessous : sur Chromium/macOS avec
     scrollbars "overlay" (invisibles hors survol - le defaut sur la
     plupart des installations), aucune barre n'est visible sur une
     simple capture ou au premier coup d'oeil, ce qui donnait
     l'impression que les colonnes/boutons masques par le scroll
     (CSV/Excel en bout de tableau) avaient disparu. Ombre de defilement
     CSS pure (technique de Lea Verou, cf. background-attachment:local) :
     un degrade sombre apparait sur le bord droit UNIQUEMENT s'il reste
     du contenu a faire defiler dans cette direction, et disparait une
     fois arrive au bout - fiable quel que soit le style de scrollbar
     du systeme, sans JS.  */
  background:
    linear-gradient(to right, var(--couleur-carte) 30%, rgba(255, 255, 255, 0)) left,
    linear-gradient(to left, var(--couleur-carte) 30%, rgba(255, 255, 255, 0)) right,
    linear-gradient(to right, rgba(22, 35, 42, 0.18), rgba(255, 255, 255, 0)) left,
    linear-gradient(to left, rgba(22, 35, 42, 0.18), rgba(255, 255, 255, 0)) right;
  background-repeat: no-repeat;
  background-color: var(--couleur-carte);
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
  /* Barre de defilement visible en permanence sur les systemes qui la
     rendent redimensionnable (Firefox honore scrollbar-width ; certains
     Chromium/Windows aussi selon les reglages) - filet de securite
     additionnel a l'ombre ci-dessus. */
  scrollbar-width: thin;
  padding-bottom: 4px;
}

#conteneur-tableau::-webkit-scrollbar {
  height: 8px;
}

#conteneur-tableau::-webkit-scrollbar-thumb {
  background: var(--couleur-bordure);
  border-radius: 999px;
}

#conteneur-tableau::-webkit-scrollbar-thumb:hover {
  background: var(--couleur-texte-attenue);
}

table.tableau-suivi {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

table.tableau-suivi th,
table.tableau-suivi td {
  text-align: left;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--couleur-bordure);
  font-size: 0.9rem;
}

table.tableau-suivi th {
  color: var(--couleur-texte-attenue);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--couleur-fond);
}

table.tableau-suivi tr:last-child td {
  border-bottom: none;
}

table.tableau-suivi .actions {
  display: flex;
  gap: 0.5rem;
  /* Jamais de retour a la ligne : avec flex-wrap, la hauteur de
     cellule variait selon qu'une ligne ait 1 bouton (Evenements
     seul) ou 3 (+ CSV/Excel), desalignant les lignes du tableau entre
     elles. Nowrap garde une hauteur de ligne constante ; la largeur
     supplementaire que ca demande est geree par le scroll horizontal
     de #conteneur-tableau plutot que par un retour a la ligne. */
  flex-wrap: nowrap;
  white-space: nowrap;
}

table.tableau-suivi .actions button,
table.tableau-suivi .actions a {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}

.vide {
  color: var(--couleur-texte-attenue);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem 0;
}

/* -------------------- Liste d'evenements -------------------- */

ul.liste-evenements {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.liste-evenements li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--couleur-bordure);
  font-size: 0.88rem;
}

ul.liste-evenements li:last-child {
  border-bottom: none;
}

ul.liste-evenements .horodatage {
  color: var(--couleur-texte-attenue);
  margin-right: 0.5rem;
}

/* -------------------- Zone de depot (import) -------------------- */

.zone-depot {
  border: 2px dashed var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--couleur-fond);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.zone-depot:hover,
.zone-depot.survol {
  border-color: var(--couleur-accent);
  background: var(--couleur-primaire-fond);
}

.zone-depot .icone-depot {
  width: 46px;
  height: 46px;
  margin: 0 auto 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--couleur-primaire-fond);
  color: var(--couleur-primaire);
}

.zone-depot .icone-depot svg {
  width: 22px;
  height: 22px;
}

.zone-depot p.titre-depot {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.3rem;
}

.zone-depot p.sous-titre-depot {
  color: var(--couleur-texte-attenue);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.zone-depot input[type="file"] {
  display: none;
}

/* Carte recapitulative du fichier importe (nom, taille, badges). */
.carte-fichier {
  border: 1px solid var(--couleur-bordure);
  border-top: 3px solid var(--couleur-primaire);
  border-radius: var(--rayon-grand);
  padding: 1.25rem;
}

.carte-fichier .entete-fichier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.carte-fichier .nom-fichier {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1rem;
  word-break: break-all;
}

.carte-fichier .nom-fichier svg {
  flex-shrink: 0;
  color: var(--couleur-primaire);
}

/* Fichiers annexes du referentiel (espace admin) : une carte par type
   (situation caisse, plan tiers salaries), meme habillage que
   .carte-fichier. */
.grille-annexes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.grille-annexes .carte-fichier .statut-annexe {
  margin-bottom: 0.75rem;
  color: var(--couleur-texte-attenue);
}

.grille-annexes .carte-fichier .actions-annexe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

/* Statistiques cle=valeur reelles (lignes generees, debit/credit,
   ecart de controle) affichees en mini-grille. */
.grille-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.grille-stats .stat {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 0.75rem 0.9rem;
}

.grille-stats .stat .libelle-stat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--couleur-texte-attenue);
  margin-bottom: 0.25rem;
}

.grille-stats .stat .valeur-stat {
  font-size: 1.25rem;
  font-weight: 700;
}

/* Symbole "Equilibre" (vrai/faux) : les 2 etats doivent rester aussi
   visibles l'un que l'autre - "non equilibre" est le signal d'une
   vraie anomalie de controle d'exhaustivite, pas un etat neutre. */
.valeur-stat.equilibre-oui {
  color: var(--couleur-succes);
}

.valeur-stat.equilibre-non {
  color: var(--couleur-erreur);
}

/* -------------------- Espace admin -------------------- */

.onglets-admin {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--couleur-bordure);
  margin: -0.5rem 0 1.5rem;
}

.onglets-admin button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--couleur-texte-attenue);
  cursor: pointer;
}

.onglets-admin button:hover {
  color: var(--couleur-texte);
}

.onglets-admin button.actif {
  color: var(--couleur-primaire);
  border-bottom-color: var(--couleur-primaire);
}

.onglets-admin button .compteur-onglet {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--couleur-neutre-fond);
  color: var(--couleur-texte-attenue);
  font-size: 0.72rem;
  font-weight: 700;
}

.onglets-admin button.actif .compteur-onglet {
  background: var(--couleur-primaire-fond);
  color: var(--couleur-primaire);
}

.panneau-onglet.masque {
  display: none !important;
}

select#selecteur-type-admin {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-size: 0.95rem;
  background: #fff;
  color: var(--couleur-texte);
  min-width: 260px;
}

table.tableau-admin {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

table.tableau-admin th,
table.tableau-admin td {
  text-align: left;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--couleur-bordure);
  font-size: 0.85rem;
}

table.tableau-admin th {
  color: var(--couleur-texte-attenue);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--couleur-fond);
}

table.tableau-admin tr.inactif td {
  color: var(--couleur-texte-attenue);
  opacity: 0.65;
}

table.tableau-admin tr.echec td {
  background: var(--couleur-erreur-fond);
  color: var(--couleur-erreur);
}

.case-a-cocher {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--couleur-texte-attenue);
  cursor: pointer;
  margin: 0.5rem 0 1rem;
}

table.tableau-admin input[type="text"] {
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  width: 100%;
  min-width: 90px;
}

table.tableau-admin .actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  white-space: nowrap;
}

table.tableau-admin .actions button {
  font-size: 0.78rem;
  padding: 0.3rem 0.55rem;
}

/* Interrupteur actif/inactif (remplace le bouton texte
   Activer/Desactiver par un composant visuel a bascule). */
.interrupteur {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.interrupteur input {
  opacity: 0;
  width: 0;
  height: 0;
}

.interrupteur .glissiere {
  position: absolute;
  inset: 0;
  background: var(--couleur-neutre-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}

.interrupteur .glissiere::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.interrupteur input:checked + .glissiere {
  background: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
}

.interrupteur input:checked + .glissiere::before {
  transform: translateX(16px);
}

form.formulaire-ajout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--couleur-bordure);
}

form.formulaire-ajout .champ {
  margin-bottom: 0;
}

form.formulaire-ajout label {
  font-size: 0.78rem;
}

form.formulaire-ajout input[type="text"],
form.formulaire-ajout select {
  padding: 0.45rem 0.55rem;
  font-size: 0.85rem;
  min-width: 130px;
}

/* -------------------- Page d'accueil -------------------- */

/* Diagramme des 4 etapes (Import -> Detection -> Transformation ->
   Export) : rangee horizontale avec connecteurs sur desktop, empilee
   verticalement sur mobile (aucune largeur fixe disponible pour 4
   colonnes + fleches en dessous de 768px, seuil habituel
   desktop/mobile). */
.flux-etapes {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  margin: 1.75rem 0;
}

.etape {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 0 0.25rem;
}

.etape .icone-etape {
  width: 46px;
  height: 46px;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--couleur-primaire-fond);
  color: var(--couleur-primaire);
}

.etape .icone-etape svg {
  width: 22px;
  height: 22px;
}

.etape h2 {
  font-size: 0.95rem;
  margin: 0 0 0.3rem;
}

.etape p {
  color: var(--couleur-texte-attenue);
  font-size: 0.82rem;
  margin: 0;
}

/* Fleche entre deux etapes - alignee sur le centre des icones
   (46px de haut, d'ou le margin-top de 23px). */
.connecteur-etape {
  flex: 0 0 auto;
  width: 24px;
  margin-top: 23px;
  color: var(--couleur-texte-attenue);
}

.connecteur-etape svg {
  width: 20px;
  height: 20px;
  display: block;
}

.cta-accueil {
  text-align: center;
  margin-top: 1.5rem;
}

.cta-accueil .bouton-principal {
  padding: 0.75rem 2.5rem;
}

@media (max-width: 768px) {
  .flux-etapes {
    flex-direction: column;
    align-items: stretch;
  }

  .connecteur-etape {
    align-self: center;
    margin: 0.15rem 0;
    transform: rotate(90deg);
  }
}

/* -------------------- Theme sombre -------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --couleur-fond: #101817;
    --couleur-carte: #16211f;
    --couleur-texte: #e7ebf1;
    --couleur-texte-attenue: #93a3a7;
    --couleur-bordure: #263533;
    --couleur-primaire-fond: #1b2f2c;
    --couleur-neutre-fond: #1c2725;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="file"] {
    background: #1b2624;
    color: var(--couleur-texte);
  }

  button.bouton-secondaire,
  a.bouton-secondaire {
    background: transparent;
  }

  .zone-depot {
    background: #131e1c;
  }

  select#selecteur-type-admin,
  form.formulaire-ajout select {
    background: #1b2624;
    color: var(--couleur-texte);
  }
}