/* =============================================================================
   FDU-SOFT — feuille de style unique.

   Écrite à la main, sans Tailwind ni outil de compilation : le fichier est
   servi tel quel. Aucune étape de construction, aucune dépendance npm,
   rien qui puisse casser dans deux ans.
   ============================================================================= */

:root {
  --vert:          #15704a;
  --vert-clair:    #1e8f5f;
  --vert-pale:     #e8f4ee;
  --vert-bord:     #bfe0cf;

  --or:            #a8760c;
  --or-pale:       #fdf4e3;

  --rouge:         #b02a2a;
  --rouge-pale:    #fbeaea;

  --bleu:          #1c5f8f;
  --bleu-pale:     #e9f2f9;

  --encre:         #17211d;
  --gris-fonce:    #4a5551;
  --gris:          #78837f;
  --gris-clair:    #d9dedc;
  --gris-pale:     #f1f4f3;
  --fond:          #f7f9f8;
  --blanc:         #ffffff;

  --rayon:         10px;
  --rayon-petit:   6px;
  --ombre:         0 1px 2px rgba(23, 33, 29, .06), 0 2px 8px rgba(23, 33, 29, .04);
  --ombre-forte:   0 4px 16px rgba(23, 33, 29, .12);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--encre);
  background: var(--fond);
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }

a { color: var(--vert); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   Structure générale
   -------------------------------------------------------------------------- */

.application {
  display: grid;
  /* minmax(0, 1fr) et NON 1fr.
     Une colonne "1fr" vaut en réalité "minmax(auto, 1fr)", et ce "auto"
     l'empêche de descendre sous la largeur minimale de son contenu. Un
     menu à six entrées ou un tableau large forcent alors toute la page
     à faire 600 px, même sur un écran de 360 px : la page déborde et on
     doit la faire défiler latéralement.
     minmax(0, 1fr) autorise la colonne à rétrécir vraiment. C'est le
     piège le plus courant de CSS Grid. */
  grid-template-columns: 246px minmax(0, 1fr);
  min-height: 100vh;
}

.menu {
  background: #10362a;
  color: #cfe3d9;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.menu-marque {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 6px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  margin-bottom: 14px;
}

.menu-logo {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--vert-clair);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
}

.menu-nom {
  color: #fff;
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.25;
}

.menu-sous { font-size: .74rem; color: #8fae9f; }

.menu nav { display: flex; flex-direction: column; gap: 2px; }

.menu nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--rayon-petit);
  color: #cfe3d9;
  font-size: .89rem;
  transition: background .12s, color .12s;
}

.menu nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }

.menu nav a.actif { background: var(--vert-clair); color: #fff; font-weight: 500; }

.menu nav .ico { width: 17px; text-align: center; opacity: .85; font-size: .95rem; }

.menu-pied { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.09); }

.menu-utilisateur { display: flex; align-items: center; gap: 10px; padding: 0 6px 12px; }

.pastille {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .74rem;
  font-weight: 600;
}

.menu-utilisateur-nom { color: #fff; font-size: .84rem; font-weight: 500; }

.menu-liens { display: flex; gap: 14px; padding: 0 6px; align-items: center; }
.menu-liens a, .menu-liens .lien { font-size: .78rem; color: #8fae9f; }
.menu-liens a:hover, .menu-liens .lien:hover { color: #fff; }
.menu-liens form { margin: 0; }

.lien {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: #8fae9f; text-decoration: none;
}
.lien:hover { text-decoration: underline; }

.menu-version { padding: 12px 6px 0; font-size: .7rem; color: #5e7a6c; }

/* min-width: 0 sur chaque enfant de grille ou de flex, pour la même raison :
   sans lui, un enfant refuse de passer sous sa largeur minimale de contenu
   et fait déborder tout son parent. */
.menu { min-width: 0; }
.principal { display: flex; flex-direction: column; min-width: 0; }
.contenu { min-width: 0; }
.entete { min-width: 0; }
.entete h1 { min-width: 0; overflow-wrap: anywhere; }

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-clair);
  padding: 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.entete-date { font-size: .84rem; color: var(--gris); }

.contenu { padding: 22px 26px 60px; max-width: 1500px; width: 100%; }

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

.alerte {
  padding: 11px 14px;
  border-radius: var(--rayon-petit);
  margin-bottom: 18px;
  font-size: .89rem;
  border: 1px solid transparent;
}
.alerte-info    { background: var(--bleu-pale);  border-color: #c5dcee; color: #14496d; }
.alerte-succes  { background: var(--vert-pale);  border-color: var(--vert-bord); color: #10553a; }
.alerte-erreur  { background: var(--rouge-pale); border-color: #eec4c4; color: #8c2020; }


/* -----------------------------------------------------------------------------
   Etat hors ligne et invitation a installer l'application
   -------------------------------------------------------------------------- */

.bandeau-hors-ligne {
  background: var(--or-pale);
  border: 1px solid #ecd9ac;
  border-left: 3px solid var(--or);
  border-radius: var(--rayon-petit);
  padding: 11px 14px;
  margin-bottom: 18px;
  font-size: .86rem;
  color: #6d4c07;
}

/* Hors ligne, les boutons de saisie sont visiblement inertes : mieux vaut
   qu'ils paraissent indisponibles que de laisser croire a un enregistrement
   qui n'aura pas lieu. */
body.est-hors-ligne .bouton:not(.secondaire) {
  opacity: .55;
}

.invite-installation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--vert-pale);
  border: 1px solid var(--vert-bord);
  border-radius: var(--rayon);
  padding: 13px 16px;
  margin-bottom: 18px;
  font-size: .88rem;
}

.invite-installation .actions { margin: 0; padding: 0; border: none; }

@media (max-width: 720px) {
  .invite-installation { flex-direction: column; align-items: stretch; }
  .invite-installation .actions { flex-direction: row; }
  .invite-installation .actions .bouton { flex: 1; }
}

/* -----------------------------------------------------------------------------
   Cartes et grilles de statistiques
   -------------------------------------------------------------------------- */

.carte {
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin-bottom: 20px;
  overflow: hidden;
}

.carte-entete {
  padding: 13px 18px;
  border-bottom: 1px solid var(--gris-clair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.carte-corps { padding: 18px; }
.carte-corps.sans-marge { padding: 0; }

.grille-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat {
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  padding: 15px 17px;
  box-shadow: var(--ombre);
  border-left: 3px solid var(--gris-clair);
}

.stat-libelle {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gris);
  font-weight: 600;
  margin-bottom: 7px;
}

.stat-valeur {
  font-size: 1.42rem;
  font-weight: 650;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.stat-detail { font-size: .78rem; color: var(--gris); margin-top: 5px; }

.stat.capital  { border-left-color: var(--vert); }
.stat.capital  .stat-valeur { color: var(--vert); }
.stat.dette    { border-left-color: var(--or); }
.stat.dette    .stat-valeur { color: var(--or); }
.stat.attente  { border-left-color: var(--bleu); }
.stat.attente  .stat-valeur { color: var(--bleu); }
.stat.neutre   { border-left-color: var(--gris); }

/* Encadré pédagogique : rappelle la distinction capital / dette. */
.avertissement {
  background: var(--or-pale);
  border: 1px solid #ecd9ac;
  border-left: 3px solid var(--or);
  border-radius: var(--rayon-petit);
  padding: 12px 15px;
  font-size: .85rem;
  color: #6d4c07;
  margin-bottom: 20px;
}
.avertissement strong { color: #573c05; }


/* -----------------------------------------------------------------------------
   Progression du capital social : objectif -> souscrit -> libere -> a appeler
   -------------------------------------------------------------------------- */

.etapes-capital {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 18px;
}

.etape {
  position: relative;
  padding-left: 16px;
  border-left: 3px solid var(--gris-clair);
}

.etape-libelle {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gris);
  font-weight: 650;
  margin-bottom: 5px;
}

.etape-valeur {
  font-size: 1.22rem;
  font-weight: 650;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.etape-detail { font-size: .77rem; color: var(--gris); margin-top: 4px; }

/* La fleche entre deux etapes, sur grand ecran uniquement. */
@media (min-width: 860px) {
  .etape + .etape::before {
    content: "›";
    position: absolute;
    left: -14px;
    top: 8px;
    color: var(--gris-clair);
    font-size: 1.3rem;
    line-height: 1;
  }
}

/* -----------------------------------------------------------------------------
   Tableaux
   -------------------------------------------------------------------------- */

.table-enveloppe { overflow-x: auto; }

table.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

table.tableau th {
  text-align: left;
  padding: 10px 14px;
  background: var(--gris-pale);
  border-bottom: 1px solid var(--gris-clair);
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--gris-fonce);
  font-weight: 650;
  white-space: nowrap;
}

table.tableau td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gris-pale);
  vertical-align: middle;
}

table.tableau tbody tr:hover { background: #fafcfb; }
table.tableau tbody tr:last-child td { border-bottom: none; }

table.tableau tfoot td {
  padding: 11px 14px;
  background: var(--gris-pale);
  border-top: 2px solid var(--gris-clair);
  font-weight: 650;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ligne-annulee { color: var(--gris); }
.ligne-annulee td:not(.motif) { text-decoration: line-through; }

.vide {
  padding: 40px 20px;
  text-align: center;
  color: var(--gris);
  font-size: .9rem;
}

/* Cellule "membre" avec pastille et numéro */
.cellule-membre { display: flex; align-items: center; gap: 10px; }
.cellule-membre .pastille { background: var(--vert-pale); color: var(--vert); }
.cellule-membre-nom { font-weight: 500; }
.cellule-membre-num { font-size: .75rem; color: var(--gris); font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   Étiquettes
   -------------------------------------------------------------------------- */

.etiquette {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 550;
  white-space: nowrap;
  border: 1px solid transparent;
}

.aff-part       { background: var(--vert-pale);  color: #10553a; border-color: var(--vert-bord); }
.aff-cotis-per  { background: var(--bleu-pale);  color: #14496d; border-color: #c5dcee; }
.aff-cotis-jour { background: #f0edf9;           color: #4a3480; border-color: #d8d0ee; }
.aff-epargne    { background: var(--or-pale);    color: #6d4c07; border-color: #ecd9ac; }

.etat-actif   { background: var(--vert-pale); color: #10553a; border-color: var(--vert-bord); }
.etat-inactif { background: var(--gris-pale); color: var(--gris-fonce); border-color: var(--gris-clair); }
.etat-radie   { background: var(--rouge-pale); color: #8c2020; border-color: #eec4c4; }


/* -----------------------------------------------------------------------------
   Depot / retrait
   -------------------------------------------------------------------------- */

/* Bascule entre les deux modes de saisie. On ne cache pas le retrait dans un
   menu deroulant : c'est une operation differente, elle merite d'etre
   visible et choisie explicitement. */
.bascule-sens {
  display: inline-flex;
  background: var(--gris-pale);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon-petit);
  padding: 3px;
  gap: 3px;
  margin-bottom: 18px;
}

.bascule-sens a {
  padding: 7px 16px;
  border-radius: 4px;
  font-size: .875rem;
  font-weight: 550;
  color: var(--gris-fonce);
  white-space: nowrap;
}

.bascule-sens a:hover { background: rgba(0, 0, 0, .04); text-decoration: none; }

.bascule-sens a.actif {
  background: var(--vert);
  color: #fff;
  box-shadow: var(--ombre);
}

/* Le retrait est signale en rouge : sortir de l'argent du compte d'un membre
   n'est pas anodin, l'ecran doit le dire sans qu'on ait a lire. */
.bascule-sens a.actif.retrait { background: var(--rouge); }

/* Un montant qui sort, ou un solde a decouvert. */
.montant-sortie,
.stat-valeur.negatif {
  color: var(--rouge);
  font-weight: 650;
}

.stat.dette .stat-valeur.negatif { color: var(--rouge); }

/* -----------------------------------------------------------------------------
   Barres de progression
   -------------------------------------------------------------------------- */

.barre {
  height: 7px;
  background: var(--gris-clair);
  border-radius: 4px;
  overflow: hidden;
  min-width: 70px;
}

.barre-remplie { height: 100%; background: var(--vert-clair); border-radius: 4px; }
.barre-remplie.complete { background: var(--vert); }

.barre-ligne { display: flex; align-items: center; gap: 9px; }
.barre-pourcent {
  font-size: .75rem;
  color: var(--gris);
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

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

.champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 15px;
}

.champ { display: flex; flex-direction: column; gap: 5px; }
.champ.large { grid-column: 1 / -1; }

/* Champ mot de passe avec bouton afficher/masquer intégré. */
.champ-mdp { position: relative; display: flex; }
.champ-mdp input[type=password], .champ-mdp input[type=text] {
  flex: 1;
  padding-right: 42px;
}
.bouton-oeil {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 6px 9px;
  color: var(--gris);
}
.bouton-oeil:hover { color: var(--gris-fonce); }

label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gris-fonce);
}

.aide { font-size: .76rem; color: var(--gris); font-weight: 400; }

input[type=text], input[type=password], input[type=date], input[type=number],
input[type=search], select, textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon-petit);
  font: inherit;
  font-size: .9rem;
  background: var(--blanc);
  color: var(--encre);
  transition: border-color .12s, box-shadow .12s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vert-clair);
  box-shadow: 0 0 0 3px rgba(30, 143, 95, .13);
}

input.montant {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}

textarea { resize: vertical; min-height: 62px; }

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-pale);
}

.actions.sans-bordure { margin-top: 0; padding-top: 0; border-top: none; }

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

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--rayon-petit);
  border: 1px solid transparent;
  font: inherit;
  font-size: .875rem;
  font-weight: 550;
  cursor: pointer;
  background: var(--vert);
  color: #fff;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}

.bouton:hover { background: #115c3c; text-decoration: none; color: #fff; }

.bouton.secondaire {
  background: var(--blanc);
  color: var(--gris-fonce);
  border-color: var(--gris-clair);
}
.bouton.secondaire:hover { background: var(--gris-pale); color: var(--encre); }

.bouton.danger { background: var(--blanc); color: var(--rouge); border-color: #eec4c4; }
.bouton.danger:hover { background: var(--rouge-pale); color: var(--rouge); }

.bouton.petit { padding: 5px 10px; font-size: .8rem; }

.bouton:disabled { opacity: .5; cursor: not-allowed; }

/* -----------------------------------------------------------------------------
   Barre d'outils (recherche + actions au-dessus des tableaux)
   -------------------------------------------------------------------------- */

.outils {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.outils form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.outils .recherche { min-width: 230px; }
.espace { flex: 1; }

.case-a-cocher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  color: var(--gris-fonce);
  white-space: nowrap;
  cursor: pointer;
}
.case-a-cocher input { width: auto; }

/* -----------------------------------------------------------------------------
   Page de connexion
   -------------------------------------------------------------------------- */

.page-connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, #10362a 0%, #17513a 55%, #1e6b4a 100%);
  padding: 20px;
}

.boite-connexion {
  background: var(--blanc);
  border-radius: 14px;
  box-shadow: var(--ombre-forte);
  padding: 34px;
  width: 100%;
  max-width: 390px;
}

.boite-connexion .marque { text-align: center; margin-bottom: 26px; }

.boite-connexion .logo {
  width: 56px; height: 56px;
  margin: 0 auto 13px;
  border-radius: 13px;
  background: var(--vert);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: .04em;
}

.boite-connexion h1 { font-size: 1.12rem; margin-bottom: 3px; }
.boite-connexion .sous { font-size: .84rem; color: var(--gris); }
.boite-connexion .champ { margin-bottom: 15px; }
.boite-connexion .bouton { width: 100%; justify-content: center; padding: 10px; }

/* -----------------------------------------------------------------------------
   Fiche membre
   -------------------------------------------------------------------------- */

.fiche-entete {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.fiche-avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--vert-pale);
  color: var(--vert);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 650;
  flex-shrink: 0;
}

.fiche-avatar-img {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.fiche-titre { font-size: 1.2rem; font-weight: 650; }
.fiche-meta { font-size: .84rem; color: var(--gris); margin-top: 3px; }
.fiche-meta span + span::before { content: " · "; }

.deux-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1050px) {
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
}

.liste-definitions { display: grid; gap: 11px; }
.liste-definitions > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: .875rem;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--gris-pale);
}
.liste-definitions > div:last-child { border-bottom: none; padding-bottom: 0; }
.liste-definitions dt { color: var(--gris); }
.liste-definitions dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* -----------------------------------------------------------------------------
   Saisie groupée
   -------------------------------------------------------------------------- */

.bandeau-saisie {
  background: var(--vert-pale);
  border: 1px solid var(--vert-bord);
  border-radius: var(--rayon);
  padding: 15px 18px;
  margin-bottom: 18px;
}

.table-saisie input.montant { max-width: 135px; padding: 6px 9px; }
.table-saisie select { max-width: 175px; padding: 6px 9px; font-size: .84rem; }
.table-saisie td { padding: 7px 14px; }

.barre-validation {
  position: sticky;
  bottom: 0;
  background: var(--blanc);
  border-top: 1px solid var(--gris-clair);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 -2px 10px rgba(23, 33, 29, .06);
}

.total-direct { font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   Détail repliable (annulation)
   -------------------------------------------------------------------------- */

details.annulation { display: inline-block; }
details.annulation summary {
  cursor: pointer;
  font-size: .78rem;
  color: var(--rouge);
  list-style: none;
}
details.annulation summary::-webkit-details-marker { display: none; }
details.annulation summary:hover { text-decoration: underline; }

.boite-annulation {
  position: absolute;
  right: 18px;
  z-index: 10;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre-forte);
  padding: 13px;
  width: 290px;
  margin-top: 6px;
  text-align: left;
}
.boite-annulation input { margin-bottom: 9px; }

/* -----------------------------------------------------------------------------
   Relevé imprimable
   -------------------------------------------------------------------------- */

.releve {
  max-width: 860px;
  margin: 26px auto;
  background: var(--blanc);
  padding: 40px;
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
}

.releve-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  border-bottom: 2px solid var(--vert);
  padding-bottom: 18px;
  margin-bottom: 24px;
}

.releve-coop { font-size: 1.18rem; font-weight: 700; color: var(--vert); }
.releve-type { font-size: .82rem; color: var(--gris); margin-top: 3px; }
.releve-date { font-size: .82rem; color: var(--gris); text-align: right; }

.releve-signature {
  margin-top: 46px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  font-size: .84rem;
}
.releve-signature > div { flex: 1; }
.releve-trait { border-top: 1px solid var(--encre); margin-top: 48px; padding-top: 5px; }

.barre-impression {
  max-width: 860px;
  margin: 20px auto 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

@media print {
  .barre-impression, .menu, .entete { display: none !important; }
  body { background: #fff; }
  .releve { border: none; margin: 0; padding: 0; max-width: none; }
  table.tableau th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; }
}

/* =============================================================================
   TÉLÉPHONES ET TABLETTES

   Le bureau de la coopérative travaille depuis Yaoundé, chacun de son côté,
   souvent depuis un téléphone. Ces règles ne sont donc pas un supplément :
   c'est le mode d'usage principal.
   ============================================================================= */

/* ---------- Tablettes et petits portables ---------- */

@media (max-width: 1000px) {
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Le menu passe en barre horizontale ---------- */

@media (max-width: 860px) {
  .application { grid-template-columns: minmax(0, 1fr); }

  .menu {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    padding: 10px 12px;
  }

  .menu-marque {
    padding: 0 2px 10px;
    margin-bottom: 10px;
  }
  .menu-logo { width: 34px; height: 34px; font-size: .72rem; }
  .menu-nom { font-size: .82rem; }

  /* Les entrées de menu défilent horizontalement plutôt que de s'empiler
     sur trois lignes et de repousser le contenu hors de l'écran. */
  .menu nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .menu nav::-webkit-scrollbar { display: none; }
  .menu nav a {
    flex-shrink: 0;
    font-size: .82rem;
    padding: 8px 12px;
    white-space: nowrap;
  }
  .menu nav .ico { display: none; }

  /* Le pied de menu (utilisateur, déconnexion) tient sur une seule ligne. */
  .menu-pied {
    margin-top: 10px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .menu-utilisateur { padding: 0; }
  .menu-liens { padding: 0; }
  .menu-version { display: none; }

  .entete { padding: 12px 14px; }
  .entete h1 { font-size: 1.1rem; }
  .contenu { padding: 16px 14px 60px; }

  .grille-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .stat { padding: 12px 13px; }
  .stat-valeur { font-size: 1.15rem; }
}

/* ---------- Téléphones : les tableaux deviennent des fiches ---------- */

@media (max-width: 720px) {

  .grille-stats { grid-template-columns: minmax(0, 1fr); }

  /* Un tableau de 9 colonnes est illisible sur un téléphone, même en
     défilement horizontal. On retourne donc chaque ligne : elle devient
     une petite fiche où chaque valeur porte son intitulé.

     L'intitulé vient de l'attribut data-label posé sur chaque <td> dans
     les gabarits — c'est pour cela qu'ils en ont un. */

  table.tableau.fiches thead { display: none; }

  table.tableau.fiches,
  table.tableau.fiches tbody,
  table.tableau.fiches tr,
  table.tableau.fiches td { display: block; width: 100%; }

  table.tableau.fiches tbody tr {
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-petit);
    padding: 12px 14px;
    margin: 12px;
    background: var(--blanc);
    box-shadow: var(--ombre);
  }
  table.tableau.fiches tbody tr:hover { background: var(--blanc); }

  table.tableau.fiches td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    border: none;
    text-align: right;
    font-size: .88rem;
  }

  table.tableau.fiches td::before {
    content: attr(data-label);
    flex-shrink: 0;
    text-align: left;
    font-size: .75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris);
  }

  /* La cellule principale (le nom du membre) occupe toute la largeur,
     sans intitulé, et sert de titre à la fiche. */
  table.tableau.fiches td.principale {
    display: block;
    text-align: left;
    padding: 0 0 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--gris-pale);
  }
  table.tableau.fiches td.principale::before { content: none; }

  /* Une cellule vide (colonne de boutons sans bouton) disparaît. */
  table.tableau.fiches td.actions-cellule:empty { display: none; }
  table.tableau.fiches td.actions-cellule {
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--gris-pale);
  }
  table.tableau.fiches td.actions-cellule::before { content: none; }

  table.tableau.fiches .num { text-align: right; }
  table.tableau.fiches .barre { min-width: 110px; }

  table.tableau.fiches tfoot { display: block; }
  table.tableau.fiches tfoot tr { display: block; padding: 12px 14px; }
  table.tableau.fiches tfoot td {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
  }
  table.tableau.fiches tfoot td:empty { display: none; }


  /* Sur le tableau de bord, on ne garde que les 6 derniers mouvements.
     Douze fiches empilées font neuf écrans de défilement pour une page
     censée donner un aperçu ; le bouton "Tout le journal" est juste
     au-dessus pour voir le reste. */
  table.tableau.liste-compacte tbody tr:nth-child(n+7) { display: none; }

  /* Fiches un peu plus denses : on gagne un écran entier sans rien perdre. */
  table.tableau.fiches td { padding: 5px 0; }
  table.tableau.fiches tbody tr { padding: 11px 13px; margin: 10px; }

  /* Les fiches annulées restent reconnaissables sans le barré illisible. */
  table.tableau.fiches tr.ligne-annulee {
    border-left: 3px solid var(--rouge);
    background: var(--rouge-pale);
  }
  table.tableau.fiches tr.ligne-annulee td:not(.motif) { text-decoration: none; }
  table.tableau.fiches tr.ligne-annulee td.principale { opacity: .65; }

  /* Formulaires : une colonne, et 16px minimum sur les champs.
     En dessous de 16px, iOS zoome automatiquement à chaque clic dans un
     champ, ce qui déforme la page et exaspère l'utilisateur. */
  .champs { grid-template-columns: minmax(0, 1fr); }

  input[type=text], input[type=password], input[type=date],
  input[type=number], input[type=search], select, textarea {
    font-size: 16px;
    padding: 10px 12px;
  }

  /* Cibles tactiles confortables : un doigt n'est pas un curseur. */
  .bouton { padding: 11px 16px; min-height: 44px; }
  .bouton.petit { padding: 8px 12px; min-height: 38px; }
  .menu nav a { min-height: 40px; }


  /* Cibles tactiles : agrandir la zone cliquable SANS déplacer quoi que ce
     soit à l'écran. Le padding agrandit la zone, la marge négative de même
     valeur annule l'effet sur la mise en page. Un lien de 18 px de haut
     devient confortable au pouce tout en gardant exactement son apparence. */
  table.tableau.fiches td.principale a,
  table.tableau.fiches td a {
    display: inline-block;
    padding: 8px 3px;
    margin: -8px -3px;
  }

  details.annulation summary {
    display: inline-block;
    padding: 10px 6px;
    margin: -10px -6px;
  }

  .menu-liens a, .menu-liens .lien {
    display: inline-block;
    padding: 9px 2px;
  }

  .outils { gap: 8px; }
  .outils form { width: 100%; flex-wrap: wrap; }
  /* Le champ de recherche prend une ligne entiere : coince entre une case a
     cocher et un bouton, il se reduisait a "Nom, r" et devenait inutilisable. */
  .outils .recherche { min-width: 0; flex: 1 1 100%; }
  .outils .case-a-cocher { flex: 1 1 auto; }
  .outils .bouton { flex: 1 1 auto; justify-content: center; }

  .actions { flex-direction: column; align-items: stretch; }
  .actions .bouton { width: 100%; justify-content: center; }

  .fiche-entete { flex-direction: column; }
  .fiche-entete .actions { width: 100%; }

  /* La boîte d'annulation devient pleine largeur au lieu de déborder. */
  .boite-annulation {
    position: static;
    width: 100%;
    margin-top: 10px;
  }

  .carte-entete { flex-direction: column; align-items: flex-start; gap: 6px; }
  .releve { padding: 20px; margin: 12px; }
  .releve-entete { flex-direction: column; gap: 12px; }
  .releve-date { text-align: left; }
  .releve-signature { flex-direction: column; gap: 26px; }
  .barre-impression { margin: 12px; }
}

/* ---------- Saisie groupée sur téléphone ---------- */

@media (max-width: 720px) {

  /* Chaque membre devient une fiche : nom en haut, champ montant large
     en dessous. On descend la liste au pouce, on ne saisit que les
     membres présents. */
  .table-saisie thead { display: none; }
  .table-saisie, .table-saisie tbody,
  .table-saisie tr, .table-saisie td { display: block; width: 100%; }

  .table-saisie tbody tr {
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-petit);
    padding: 12px 14px;
    margin: 12px;
    background: var(--blanc);
  }

  .table-saisie td { padding: 5px 0; border: none; }

  .table-saisie td[data-label="Reste dû sur parts"] {
    display: flex;
    justify-content: space-between;
    font-size: .82rem;
    color: var(--gris);
  }
  .table-saisie td[data-label="Reste dû sur parts"]::before {
    content: attr(data-label);
    font-size: .75rem;
  }

  /* Chaque champ porte son intitulé : sans ça, les deux listes déroulantes
     affichent toutes les deux « — par défaut — » et on ne sait plus
     laquelle est l'affectation et laquelle le mode de paiement. */
  .table-saisie td.cellule-saisie::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: .72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris);
  }
  .table-saisie td.cellule-saisie { padding: 8px 0 2px; }

  .table-saisie input.montant {
    max-width: none; width: 100%; font-size: 18px;
    text-align: left; padding: 11px 12px;
  }
  .table-saisie select { max-width: none; width: 100%; font-size: 16px; }

  /* La barre de validation reste collée en bas de l'écran, toujours
     visible : on voit le total grossir pendant qu'on saisit. */
  .barre-validation {
    padding: 12px 14px;
    gap: 10px;
  }
  .barre-validation .espace { display: none; }
  .barre-validation .bouton { flex: 1; justify-content: center; }
  .bandeau-saisie { padding: 13px 14px; }
}

/* ---------- Très petits écrans ---------- */

@media (max-width: 380px) {
  .contenu { padding: 12px 8px 60px; }
  table.tableau.fiches tbody tr,
  .table-saisie tbody tr { margin: 10px 4px; padding: 11px; }
  .stat-valeur { font-size: 1.28rem; }
}