/* SACKO Gestion — design des maquettes validées (novembre 2026). Aucune étape de compilation. */
:root {
  --nuit: #0F2537; --nuit-2: #163147; --nuit-trait: #22394D; --nuit-texte: #D5DEE6;
  --vert: #0B6B50; --vert-fonce: #08573F; --vert-vif: #12A37A; --vert-actif: #0E7A5A; --vert-clair: #E4F3EC; --vert-texte: #1D6B3A;
  --fond: #F3F5F8; --carte: #FFFFFF; --bord: #E1E6EB; --bord-champ: #CDD5DC; --ligne: #EDF0F3; --entete: #F0F3F6;
  --encre: #101B26; --texte-2: #33414E; --discret: #4B5866;
  --ambre-fond: #FFF1D6; --ambre-bord: #F3C976; --ambre-texte: #7A4200;
  --rouge-fond: #FDECEA; --rouge-texte: #B42318; --bleu-fond: #E6EEFC; --bleu-texte: #1E4FA8;
  --orange: #F28C0F; --moov: #1E63D6; --telecel: #D92D3A;
  --ombre: 0 1px 2px rgba(16, 24, 40, 0.05);
  --rayon: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; font-size: 15px; }
a { color: var(--vert); }
a:hover { color: var(--vert-fonce); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #5AB89A; outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Structure */
.app { display: flex; flex-wrap: wrap; min-height: 100vh; }
.menu { flex: 1 1 240px; max-width: 100%; background: var(--nuit); padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.marque { display: flex; align-items: center; gap: 12px; padding: 0 10px 22px; color: #fff; font-size: 21px; font-weight: 700; text-decoration: none; }
.marque:hover { color: #fff; }
.marque-s { width: 36px; height: 36px; border-radius: 10px; background: var(--vert-vif); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; }
.menu-lien { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 10px; text-decoration: none; color: var(--nuit-texte); font-weight: 500; }
.menu-lien:hover { background: var(--nuit-2); color: #fff; }
.menu-lien[aria-current="page"] { background: var(--vert-actif); color: #fff; font-weight: 700; }
.menu-lien[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.menu-lien[aria-disabled="true"]:hover { background: none; color: var(--nuit-texte); }
.menu-lien svg { flex: none; }
.menu-pied { margin-top: auto; border-top: 1px solid var(--nuit-trait); padding: 16px 10px 0; display: flex; flex-direction: column; gap: 14px; color: #fff; }
.menu-pied small { display: block; color: #B9C6D1; font-size: 13px; }
.menu-pied form { margin: 0; }
.menu-pied button { background: none; border: 1px solid var(--nuit-trait); color: var(--nuit-texte); border-radius: 8px; padding: 8px 12px; cursor: pointer; width: 100%; text-align: left; }
.menu-pied button:hover { color: #fff; border-color: #3A5368; }

.principal { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; }
.barre { background: var(--carte); border-bottom: 1px solid var(--bord); padding: 12px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.recherche { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--bord-champ); border-radius: 10px; padding: 9px 14px; color: #5A6876; }
.recherche input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; font-size: 14px; }
.pastille-bureau { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bord-champ); border-radius: 10px; padding: 9px 12px; font-weight: 600; }
.synchro { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--vert-texte); background: var(--vert-clair); border-radius: 8px; padding: 8px 12px; }
.synchro.hors-ligne { color: var(--ambre-texte); background: var(--ambre-fond); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--vert-actif); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.utilisateur { display: flex; align-items: center; gap: 10px; font-weight: 600; }

.contenu { padding: 22px 28px 24px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.entete-page { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.01em; }
.sous-titre { font-size: 17px; color: var(--discret); margin-top: 4px; }
.etiquette { font-size: 14px; color: var(--texte-2); background: #E9EDF1; border-radius: 8px; padding: 6px 12px; }
.colonnes { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.col-large { flex: 999 1 520px; min-width: 0; }
.col-etroite { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 20px; box-shadow: var(--ombre); }
.carte h2 { margin: 0 0 12px; font-size: 22px; font-weight: 700; }
.pied-session { background: var(--carte); border-top: 1px solid var(--bord); padding: 12px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 15px; }
.pied-session .droite { margin-left: auto; color: var(--discret); }
.point { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.point.OM { background: var(--orange); } .point.MOOV { background: var(--moov); } .point.TELECEL { background: var(--telecel); }

/* Étapes */
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 16px; }
.etapes li { display: flex; align-items: center; gap: 10px; color: var(--discret); }
.etapes .num { width: 32px; height: 32px; border-radius: 50%; background: #E1E6EB; color: var(--texte-2); display: flex; align-items: center; justify-content: center; }
.etapes .trait { width: 80px; height: 2px; background: var(--bord-champ); }
.etapes .actuelle { color: var(--vert); font-weight: 700; }
.etapes .actuelle .num { background: var(--vert); color: #fff; }
.etapes .faite { color: var(--vert); }
.etapes .faite .num { background: #1E9E5A; color: #fff; }
.etapes .trait.fait { background: var(--vert); }

/* Formulaire */
form.guichet { display: flex; flex-direction: column; gap: 20px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .champ > span:first-child { font-size: 18px; font-weight: 700; padding: 0; margin-bottom: 10px; display: block; }
.choix-operateur { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.choix-operateur label { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bord-champ); border-radius: 10px; padding: 14px; font-weight: 700; font-size: 17px; cursor: pointer; }
.choix-operateur input { accent-color: var(--vert); width: 18px; height: 18px; }
.choix-operateur label:has(input:checked) { border: 2px solid var(--vert); background: var(--vert-clair); padding: 13px; }
.segment { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--bord-champ); border-radius: 10px; overflow: hidden; }
.segment label { display: flex; align-items: center; justify-content: center; padding: 12px 6px; font-size: 16px; cursor: pointer; border-left: 1px solid var(--bord-champ); text-align: center; }
.segment label:first-child { border-left: 0; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment label:has(input:checked) { background: var(--vert); color: #fff; font-weight: 700; }
.segment label:has(input:focus-visible) { outline: 3px solid #5AB89A; outline-offset: -3px; }
.segment label.indispo { color: #8A96A3; cursor: not-allowed; background: #F7F9FA; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.champ { display: flex; flex-direction: column; }
.champ input, .champ select { border: 1px solid var(--bord-champ); border-radius: 10px; padding: 12px 14px; font-size: 16px; background: #fff; width: 100%; }
.montant { display: flex; border: 1px solid var(--bord-champ); border-radius: 10px; overflow: hidden; }
.montant input { border: 0; border-radius: 0; font-size: 30px; font-weight: 700; padding: 6px 16px; min-width: 0; }
.montant span { display: flex; align-items: center; padding: 0 18px; background: var(--entete); border-left: 1px solid var(--bord-champ); font-size: 17px; font-weight: 600; }
.aide { font-size: 14px; color: var(--discret); margin-top: 6px; }
.info { display: flex; align-items: center; gap: 12px; background: #EEF1F4; border-radius: 10px; padding: 12px 16px; font-size: 16px; }
.coches { display: flex; flex-wrap: wrap; gap: 24px; font-size: 16px; }
.coches label { display: flex; align-items: center; gap: 10px; }
.coches input { width: 22px; height: 22px; accent-color: var(--vert); }
.coches .indispo { color: #8A96A3; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; padding: 14px 22px; font-size: 17px; font-weight: 700; cursor: pointer; text-decoration: none; border: 1px solid transparent; }
.bouton.principal-b { background: var(--vert); color: #fff; }
.bouton.principal-b:hover { background: var(--vert-fonce); color: #fff; }
.bouton.secondaire { background: #fff; color: var(--encre); border-color: #9AA6B2; }
.bouton.secondaire:hover { border-color: var(--encre); color: var(--encre); }
.bouton[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Messages */
.alerte { border-radius: 10px; padding: 12px 16px; font-size: 16px; font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.alerte.erreur { background: var(--rouge-fond); color: #8F1B12; }
.alerte.attention { background: var(--ambre-fond); color: var(--ambre-texte); border: 1px solid var(--ambre-bord); }
.alerte.succes { background: var(--vert-clair); color: var(--vert-texte); }
.erreur-champ { color: var(--rouge-texte); font-size: 14px; margin-top: 6px; font-weight: 600; }

/* Impact */
.impact-ligne { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 10px 14px; font-size: 18px; font-weight: 700; }
.impact-ligne .valeur { margin-left: auto; }
.impact-ligne.plus { background: var(--vert-clair); } .impact-ligne.plus .valeur { color: var(--vert-texte); }
.impact-ligne.moins { background: var(--rouge-fond); } .impact-ligne.moins .valeur { color: var(--rouge-texte); }
.paires { border-top: 1px solid var(--ligne); margin-top: 12px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.paires div { display: flex; justify-content: space-between; gap: 12px; }
.paires strong { white-space: nowrap; }
.paires .discret { color: var(--discret); }

/* Tableaux */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
.carte:has(> table) { overflow-x: auto; }
thead tr { background: var(--entete); text-align: left; }
th { padding: 8px; font-weight: 600; }
td { padding: 10px 8px; border-bottom: 1px solid var(--ligne); }
tbody tr:last-child td { border-bottom: 0; }
.droite { text-align: right; }
.statut { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.statut.ok { background: var(--vert-clair); color: var(--vert-texte); }
.statut.attente { background: var(--ambre-fond); color: var(--ambre-texte); }
.statut.annule { background: #ECEFF2; color: var(--texte-2); }

/* Récapitulatif et reçu */
.recap { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 10px 18px; font-size: 17px; margin: 0; }
.recap dt { color: var(--discret); }
.recap dd { margin: 0; font-weight: 700; }
.recu { max-width: 420px; }
.recu .provisoire { border: 2px dashed var(--ambre-bord); }

/* Connexion */
.connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--nuit); }
.connexion .carte { width: 100%; max-width: 420px; padding: 28px; }
.connexion .marque { color: var(--encre); padding: 0 0 18px; }
.connexion .marque:hover { color: var(--encre); }
.connexion form { display: flex; flex-direction: column; gap: 16px; }
.connexion .champ > span:first-child { font-size: 15px; margin-bottom: 6px; }

@media (max-width: 720px) {
  .menu { flex-direction: row; flex-wrap: nowrap; align-items: center; overflow-x: auto; padding: 10px 12px; gap: 6px; }
  .marque { padding: 0 6px 0 0; font-size: 17px; white-space: nowrap; }
  .marque-s { width: 30px; height: 30px; font-size: 18px; }
  .menu-lien { padding: 9px 12px; white-space: nowrap; }
  .menu-lien[aria-disabled="true"] { display: none; }
  .menu-pied { margin: 0 0 0 auto; border: 0; padding: 0; flex-direction: row; }
  .menu-pied > div { display: none; }
  .menu-pied button { white-space: nowrap; }
  .barre .utilisateur, .barre .pastille-bureau { display: none; }
  .barre, .contenu, .pied-session { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 26px; }
  .segment { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .segment label:nth-child(4) { border-left: 0; }
  .segment label:nth-child(n+4) { border-top: 1px solid var(--bord-champ); }
  .etapes .trait { width: 24px; }
}

@media print {
  .menu, .barre, .pied-session, .col-etroite, .actions, .etapes, .no-print { display: none !important; }
  body { background: #fff; }
  .carte { box-shadow: none; border: 0; padding: 0; }
  .recu { max-width: 72mm; font-size: 12px; }
  @page { size: 80mm auto; margin: 4mm; }
}

/* Tableau de bord */
.grille-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.grille-stocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.kpi { display: flex; gap: 16px; align-items: center; }
.kpi > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-icone { width: 56px; height: 56px; flex: none; border-radius: 12px; background: var(--vert-clair); color: var(--vert); display: flex; align-items: center; justify-content: center; }
.kpi-icone.ambre { background: var(--ambre-fond); color: #B25E00; }
.kpi-titre { font-size: 15px; color: var(--texte-2); display: flex; align-items: center; gap: 8px; }
.kpi-titre.fort { font-size: 18px; font-weight: 700; color: var(--encre); }
.kpi-valeur { font-size: 24px; font-weight: 800; white-space: nowrap; }
.kpi-valeur small { font-size: 15px; font-weight: 600; color: var(--discret); }
.kpi-valeur.grand { font-size: 28px; }
.kpi-note { font-size: 13px; color: #5A6876; }
.pastille-alerte { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #8A4B00; background: var(--ambre-fond); border-radius: 8px; padding: 4px 10px; }
.ambre-texte { color: #8A4B00; font-weight: 600; }
.vert-texte { color: var(--vert-texte); font-weight: 600; }
.discret { color: #5A6876; }
.titre-icone { display: flex; align-items: center; gap: 10px; font-size: 21px !important; }
.defile { overflow-x: auto; }
.tableau-paani { font-size: 15px; min-width: 640px; }
.tableau-paani th { padding: 10px 12px; white-space: nowrap; }
.tableau-paani td { padding: 10px 12px; white-space: nowrap; }
.tableau-paani td span + span { margin-left: 8px; }
.tableau-paani .faible { color: #8A4B00; font-weight: 700; }
.agent { display: flex; align-items: center; gap: 12px; }
.agent small { display: block; color: #5A6876; font-size: 14px; }
.agent-icone { width: 38px; height: 38px; border-radius: 10px; background: var(--vert-clair); color: var(--vert); display: flex; align-items: center; justify-content: center; flex: none; }
.credits-en-cours { margin-top: 14px; border-top: 1px solid var(--ligne); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.bascule { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--entete); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.bascule small { display: block; font-size: 13px; color: #5A6876; margin-top: 2px; }
.interrupteur { width: 52px; height: 30px; border-radius: 999px; border: 0; background: #9AA6B2; position: relative; cursor: pointer; flex: none; }
.interrupteur span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
.interrupteur.actif { background: var(--vert); }
.interrupteur.actif span { left: 25px; }
.demande { border: 1px solid var(--bord); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.demande-entete { display: flex; gap: 12px; align-items: flex-start; }
.demande-entete > div { flex: 1; display: flex; flex-direction: column; font-size: 15px; line-height: 1.4; }
.demande-icone { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--bleu-fond); color: var(--moov); display: flex; align-items: center; justify-content: center; }
.demande-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.demande-actions > form { flex: 1; }
.demande-actions > form .bouton { width: 100%; }
.refus { flex: 1; }
.refus summary { list-style: none; width: 100%; }
.refus summary::-webkit-details-marker { display: none; }
.refus[open] summary { display: none; }
.refus form { display: flex; flex-direction: column; gap: 8px; }
.refus input { border: 1px solid var(--bord-champ); border-radius: 8px; padding: 10px; width: 100%; }
.bouton.petit { padding: 11px 14px; font-size: 15px; }
.ligne-alerte { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bord); border-radius: 10px; padding: 11px 12px; font-size: 15px; }
.activite { display: flex; align-items: center; gap: 16px; padding: 10px 4px; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.activite:last-child { border-bottom: 0; }
.activite > .discret { width: 72px; flex: none; }
.activite-libelle { flex: 1; }
.activite .statut { font-size: 14px; padding: 3px 10px; }
.statut.bleu { background: var(--bleu-fond); color: var(--bleu-texte); }

/* Caisse : comptage, rapprochement, état */
.tableau-coupures { font-size: 16px; }
.tableau-coupures td { padding: 6px 10px; }
.tableau-coupures label { font-weight: 600; }
input.nombre { width: 110px; text-align: right; border: 1px solid var(--bord-champ); border-radius: 8px; padding: 8px 10px; font-size: 16px; background: #fff; }
input.nombre.large { width: 150px; }
.total-coupures { display: flex; justify-content: space-between; align-items: center; background: var(--vert-clair); border-radius: 10px; padding: 14px 16px; margin-top: 12px; font-size: 20px; font-weight: 800; }
.total-coupures strong { color: var(--vert); }
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tuile { border: 1px solid var(--bord); border-left: 4px solid var(--vert); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.tuile span { font-size: 16px; }
.tuile strong { font-size: 24px; font-weight: 800; white-space: nowrap; }
.tuile.bord-vif { border-left-color: var(--vert-vif); }
.tuile.bord-rouge { border-left-color: #C5222F; background: var(--rouge-fond); }
.tuile.bord-rouge span, .tuile.bord-rouge strong { color: var(--rouge-texte); }
.rouge-texte { color: var(--rouge-texte); }
.signatures { display: flex; flex-direction: column; gap: 26px; }
.signatures div { display: flex; flex-direction: column; gap: 30px; }
.ligne-signature { border-bottom: 1px solid var(--texte-2); }
.statut-session { font-size: 13px; font-weight: 600; border-radius: 8px; padding: 4px 10px; white-space: nowrap; }
.statut-session.ouverte { background: var(--vert-clair); color: var(--vert-texte); }
.statut-session.comptee { background: var(--bleu-fond); color: var(--bleu-texte); }
.statut-session.cloturee { background: #ECEFF2; color: var(--texte-2); }
.statut-session.cloturee_reserve { background: var(--ambre-fond); color: var(--ambre-texte); }
.statut-session.aucune { background: #F7F9FA; color: #5A6876; }
@media print {
  .recap { font-size: 13px; }
  .colonnes { display: block; }
  .col-etroite { display: block !important; margin-top: 12px; }
  .col-etroite .carte { border: 1px solid #ccc; padding: 10px; }
  @page { size: A4; margin: 14mm; }
}
a.statut-session { text-decoration: none; }
a.statut-session:hover { text-decoration: underline; }
.session-guichet { margin: 14px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15px; }
@media (max-width: 560px) {
  input.nombre { width: 80px; }
  input.nombre.large { width: 120px; }
  .tableau-coupures td { padding: 6px 4px; }
}
/* Écarts à expliquer */
.ecart { display: flex; flex-direction: column; gap: 14px; }
.ecart-entete { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ecart-entete > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.ecart-entete strong { font-size: 18px; }
.ecart-montant { text-align: right; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.ecart-montant strong { font-size: 22px; font-weight: 800; }
.ecart-montant span { font-size: 13px; font-weight: 600; }
.ecart-montant.manquant { color: var(--rouge-texte); }
.ecart-montant.excedent { color: var(--ambre-texte); }
.ecart-form { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--bord); padding-top: 14px; }
.choix { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.choix label { display: flex; gap: 10px; align-items: center; font-size: 16px; cursor: pointer; }
.choix input { width: 20px; height: 20px; accent-color: var(--vert); }
.lien-kpi { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--vert); }
/* Clients et historique */
.filtres { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 16px; }
.filtres .champ { flex: 1 1 150px; }
.filtres .champ.large { flex: 2 1 260px; }
.filtres .champ input, .filtres .champ select { padding: 10px 12px; }
.filtres .actions { margin: 0; }
.case { display: flex; gap: 8px; align-items: center; font-size: 15px; cursor: pointer; padding-bottom: 10px; }
.case input { width: 18px; height: 18px; accent-color: var(--vert); }
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vert-clair); color: var(--vert-texte); font-weight: 700; flex: none; }
.avatar.petit { width: 36px; height: 36px; font-size: 14px; }
.avatar.grand { width: 72px; height: 72px; font-size: 26px; }
.avatar-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.photo-client img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; }
.entete-client { display: flex; gap: 16px; align-items: center; }
.lien-client { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.lien-client strong { display: block; }
.lien-client small { color: var(--texte-2); }
.lien-client:hover strong { text-decoration: underline; }
.numero { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 2px 0; white-space: nowrap; }
.numero .point, .tableau-historique .point { width: 9px; height: 9px; margin-right: 6px; }
.ligne-numero { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 12px; margin-bottom: 10px; }
.champ textarea { border: 1px solid var(--bord-champ); border-radius: 10px; padding: 12px 14px; font-size: 16px; font-family: inherit; width: 100%; resize: vertical; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pagination [aria-disabled] { opacity: .45; pointer-events: none; }
.totaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.total { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.total span { font-size: 14px; color: var(--texte-2); }
.total strong { font-size: 22px; font-weight: 800; white-space: nowrap; }
.total small { color: var(--texte-2); }
.nowrap { white-space: nowrap; }
.reference { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
tr.barree td { color: var(--texte-2); }
tr.barree td strong { text-decoration: line-through; }
.recap.empile { display: block; font-size: 16px; }
.recap.empile dt { margin-top: 12px; font-size: 14px; }
.recap.empile dt:first-child { margin-top: 0; }
.recap.empile dd { font-weight: 600; margin-top: 2px; }
.recap.empile .numero { margin-bottom: 4px; }
/* Rapports, commissions, barèmes */
.tableau-rapport tfoot th { border-top: 2px solid var(--bord); background: #F7F9FA; }
.centre { text-align: center; }
.bloc-commission { border: 1px solid var(--bord); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.releve { border-bottom: 1px solid var(--ligne); padding: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.releve:last-child { border-bottom: 0; }
.releve .ecart-entete strong { font-size: 16px; }
.encaissement { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; align-items: center; }
.encaissement .champ select, .encaissement .champ input { padding: 9px 10px; font-size: 15px; }
.grille-baremes { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.bareme { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 560px) { .grille-baremes { grid-template-columns: 1fr; } .encaissement { grid-template-columns: 1fr; } }
.tableau-rapport tfoot th:first-child { text-align: left; }
.tableau-tranches { width: 100%; font-size: 15px; }
.tableau-tranches td, .tableau-tranches th { padding: 8px 6px; white-space: nowrap; }
.encaissement { grid-template-columns: 1fr auto; }
.encaissement .champ:first-of-type { grid-column: 1 / -1; }
/* SMS */
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.onglets a { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--bord); color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; }
.onglets a[aria-current] { background: var(--vert); color: #fff; border-color: var(--vert); }
.onglets a[aria-current] .discret { color: #D6EFE6; }
.message-sms { white-space: normal !important; min-width: 280px; max-width: 460px; font-size: 14px; }
/* Dépenses et trésorerie */
.favoris { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.favoris label { cursor: pointer; }
.favoris input { position: absolute; opacity: 0; pointer-events: none; }
.favoris span { display: inline-block; padding: 10px 14px; border: 1px solid var(--bord-champ); border-radius: 999px; font-size: 15px; font-weight: 600; background: #fff; }
.favoris input:checked + span { background: var(--vert); color: #fff; border-color: var(--vert); }
.favoris input:focus-visible + span { outline: 3px solid var(--vert-vif); outline-offset: 2px; }
.signatures-bon { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.signatures-bon div { display: flex; flex-direction: column; gap: 36px; font-size: 14px; }
.encaissement.ligne { grid-template-columns: minmax(160px, 1fr) auto; flex: 1 1 340px; }
.encaissement.ligne .champ:first-of-type { grid-column: auto; }
/* UV et stocks */
.seuil-ligne { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.seuil-ligne input.nombre { width: 100px; padding: 6px 8px; font-size: 14px; }
.seuil-ligne .bouton.petit { padding: 6px 10px; font-size: 13px; }
.reception { border-top: 1px solid var(--ligne); padding-top: 10px; align-items: end; }
td.faible strong { color: var(--ambre-texte); }
/* Agents PAANI */
.grille-paanis { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.fiche-paani { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.fiche-paani:hover { box-shadow: 0 4px 16px rgba(16, 37, 57, .12); }
.fiche-paani.inactif { opacity: .6; }
dl.mini { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
dl.mini div { display: flex; flex-direction: column; }
dl.mini dt { font-size: 13px; color: var(--texte-2); }
dl.mini dd { margin: 0; font-weight: 700; font-size: 16px; }
.ligne-alerte.petite { font-size: 14px; padding: 6px 10px; margin: 0; color: var(--ambre-texte); background: var(--ambre-fond); border-radius: 8px; }
.journee { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.journee div { border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.journee span { font-size: 13px; color: var(--texte-2); }
.journee strong { font-size: 18px; white-space: nowrap; }
.journee small { color: var(--texte-2); }
/* Paie */
.ligne-bulletin { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.ligne-bulletin .champ span { font-size: 12px; }
.ligne-bulletin .champ input.nombre { width: 100px; padding: 6px 8px; font-size: 14px; }
.ligne-bulletin .champ select, .ligne-bulletin .champ input[type=text]:not(.nombre) { padding: 7px 8px; font-size: 14px; }
.net-bulletin { display: flex; flex-direction: column; padding: 0 8px; }
.net-bulletin span { font-size: 12px; color: var(--texte-2); }
.net-bulletin strong { font-size: 17px; }
.tableau-paie tfoot th { border-top: 2px solid var(--bord); background: #F7F9FA; }
.bulletin { max-width: 760px; }
.tableau-paie { font-size: 14px; }
.tableau-paie th, .tableau-paie td { padding: 8px 8px; }
/* Paramètres */
.grille-liens { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.lien-parametre { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; padding: 16px; }
.lien-parametre span { color: var(--texte-2); font-size: 14px; }
.lien-parametre:hover strong { text-decoration: underline; }
.ligne-utilisateur { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr .8fr .9fr auto auto; gap: 8px; align-items: center; padding: 8px 10px 2px; }
.ligne-utilisateur .champ input, .ligne-utilisateur .champ select { padding: 7px 9px; font-size: 14px; }
.reinit { padding: 0 10px 8px; }
.lien-bouton { background: none; border: 0; padding: 0; color: var(--vert); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: underline; }
code.provisoire { font-size: 18px; font-weight: 800; letter-spacing: .05em; background: #fff; padding: 2px 8px; border-radius: 6px; }
a.utilisateur { text-decoration: none; color: inherit; }
@media (max-width: 900px) { .ligne-utilisateur { grid-template-columns: 1fr 1fr; } }
.grille-reprise { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.ligne-utilisateur.entete { background: #F1F4F6; border-radius: 8px; padding: 10px; font-weight: 700; font-size: 14px; }
.tableau-utilisateurs { width: 100%; border-collapse: collapse; }
.tableau-utilisateurs tr { border-bottom: 1px solid var(--ligne); }
@media (max-width: 900px) { .ligne-utilisateur.entete { display: none; } }

/* Instance de démonstration : impossible de la confondre avec le vrai bureau. */
.bandeau-demo { background: #7a4b00; color: #fff; text-align: center; font-weight: 600; font-size: 14px; padding: 6px 16px; letter-spacing: .02em; }