:root {
  --bleu: #0f3057; --bleu-2: #0a2240; --orange: #f28c28; --orange-2: #d9700f;
  --fond: #f3f6fa; --carte: #fff; --texte: #18222f; --gris: #5f6b7a; --bord: #dfe5ed;
  --vert: #1f8a4c; --rouge: #c0392b; --jaune: #b7791f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 "Segoe UI", system-ui, sans-serif; color: var(--texte); background: var(--fond); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }

/* connexion */
.connexion { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 20% 20%, #1d5592, var(--bleu-2) 60%); padding: 16px; }
.carte-connexion { background: #fff; padding: 32px; border-radius: 16px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: grid; gap: 12px; }
.carte-connexion h1 { margin: 0; text-align: center; color: var(--bleu); letter-spacing: 1px; }
.sous-titre { text-align: center; color: var(--gris); margin: 0 0 8px; }
.logo-image { width: 260px; max-width: 100%; height: auto; margin: 0 auto; display: block; border-radius: 12px; }
.logo-menu { width: 72px; height: auto; flex: none; border-radius: 6px; }
.titre-rouge { color: #e10600 !important; }
.erreur { color: var(--rouge); min-height: 1em; margin: 0; }

/* structure */
#app { display: flex; min-height: 100vh; }
.menu { width: 260px; flex: none; background: linear-gradient(180deg, var(--bleu), var(--bleu-2)); color: #e6edf6; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marque { display: flex; align-items: center; gap: 10px; padding: 16px; font-weight: 800; letter-spacing: 1px; line-height: 1.1; }
.marque small { color: var(--orange); font-size: 11px; letter-spacing: 2px; }
.periode { display: grid; grid-template-columns: .95fr 1.25fr 1.05fr; gap: 6px; padding: 0 12px 12px; }
.periode select:disabled { opacity: .45; }
.raccourcis-periode { grid-column: 1 / -1; display: flex; gap: 4px; }
.raccourcis-periode button { flex: 1; background: rgba(255,255,255,.08); color: #d4deeb; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 3px 0; font-size: 11px; cursor: pointer; }
.raccourcis-periode button:hover { background: var(--orange); color: var(--bleu-2); border-color: var(--orange); }
.periode label { color: #a9b8cc; font-size: 11px; gap: 2px; }
.periode select { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 4px 6px; }
.periode option { color: #000; }
#nav { flex: 1; padding: 4px 8px; }
#nav .groupe { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #8ea3bd; padding: 12px 10px 4px; }
#nav a { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; color: #e6edf6; text-decoration: none; }
#nav a:hover { background: rgba(255,255,255,.08); }
#nav a.actif { background: var(--orange); color: var(--bleu-2); font-weight: 600; }
#nav .num { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 11px; display: grid; place-items: center; flex: none; }
#nav a.actif .num { background: rgba(0,0,0,.12); }
.pied-menu { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
main { flex: 1; min-width: 0; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 24px; background: #fff; border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 5; }
.entete h2 { margin: 0; font-size: 20px; color: var(--bleu); }
#actions-page { display: flex; gap: 8px; flex-wrap: wrap; }
#contenu { padding: 20px 24px 40px; }

/* boutons et champs */
.btn { border: 1px solid var(--bord); background: #fff; color: var(--texte); padding: 7px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--bleu); }
.btn.primaire { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.btn.primaire:hover { background: var(--bleu-2); }
.btn.orange { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; }
.btn.orange:hover { background: var(--orange-2); }
.btn.danger { color: var(--rouge); }
.btn.danger:hover { border-color: var(--rouge); }
.btn.large { width: 100%; padding: 10px; }
.btn.petit { padding: 3px 9px; font-size: 12px; }
.lien { background: none; border: none; color: var(--orange); cursor: pointer; padding: 0; text-decoration: underline; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--gris); }
input, select, textarea { border: 1px solid var(--bord); border-radius: 8px; padding: 7px 9px; color: var(--texte); background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(242,140,40,.45); border-color: var(--orange); }
input[readonly] { background: #f1f4f8; }
textarea { min-height: 70px; resize: vertical; }
.aide { font-size: 11px; color: #8a96a5; }

/* cartes */
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 16px; margin-bottom: 16px; min-width: 0; overflow-x: auto; }
.formulaire > *, .grille2 > * { min-width: 0; }
.carte h3 { margin: 0 0 12px; font-size: 15px; color: var(--bleu); }
.description { color: var(--gris); margin: 0 0 14px; }
.titre-section { color: var(--bleu); margin: 22px 0 10px; font-size: 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpis.mini { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpis.mini .val { font-size: 16px; }
.kpi { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 14px 16px; border-left: 4px solid var(--bleu); }
.kpi .lib { font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: .5px; }
.kpi .val { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi.vert { border-left-color: var(--vert); } .kpi.rouge { border-left-color: var(--rouge); } .kpi.orange { border-left-color: var(--orange); }
.grille2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.vert { color: var(--vert); } .rouge { color: var(--rouge); }

/* menu principal : tuiles */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.tuiles.petites { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tuile { background: #fff; border: 1px solid var(--bord); border-radius: 14px; padding: 16px; display: grid; gap: 12px; border-top: 4px solid var(--orange); }
.tuile h3 { margin: 0; color: var(--bleu); font-size: 15px; }
.tuile-tete { display: flex; gap: 12px; align-items: center; }
.tuile-icone { font-size: 28px; width: 46px; height: 46px; border-radius: 12px; background: #fdf1e4; display: grid; place-items: center; flex: none; }
.tuile-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tuile-chiffres div { background: var(--fond); border-radius: 8px; padding: 6px 10px; display: grid; }
.tuile-chiffres span { font-size: 11px; color: var(--gris); }
.tuile-chiffres b { font-variant-numeric: tabular-nums; }
.tuile-boutons { display: flex; gap: 6px; flex-wrap: wrap; }
.lien-tuile { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; border-top-color: var(--bleu); }
.lien-tuile:hover { border-color: var(--orange); box-shadow: 0 4px 14px rgba(15,48,87,.08); }
.lien-tuile.pdg { border-top-color: var(--orange); background: #fffaf3; }

/* graphique mensuel */
.legende { font-size: 12px; color: var(--gris); display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.pastille { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pastille.ca, .bv.ca { background: var(--bleu); }
.pastille.ch, .bv.ch { background: var(--orange); }
.mois-graph { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 170px; margin-bottom: 14px; align-items: end; }
.mois-col { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; font-size: 11px; color: var(--gris); }
.barres-v { display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 100%; border-bottom: 1px solid var(--bord); }
.bv { width: 40%; max-width: 18px; border-radius: 3px 3px 0 0; min-height: 1px; }

/* onglets et filtres */
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.onglet { border: 1px solid var(--bord); background: #fff; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.onglet.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.onglet .compte { font-size: 11px; opacity: .75; margin-left: 4px; }
.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.filtres input[type=search] { max-width: 280px; }
.filtres select { width: auto; }

/* tableaux */
.tableau-conteneur { overflow-x: auto; background: #fff; border: 1px solid var(--bord); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; }
th { background: #f6f8fb; font-size: 12px; color: var(--gris); font-weight: 600; min-width: 60px; position: sticky; top: 0; }
#table td:first-child { white-space: nowrap; }
td.long { min-width: 180px; max-width: 320px; }
tbody tr[data-id], tbody tr[data-lien], tbody tr[data-r] { cursor: pointer; }
tbody tr:hover { background: #fff7ee; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 700; background: #eef2f7; }
td.actions { white-space: nowrap; text-align: right; }
th.coche, td.coche { width: 34px; min-width: 34px; text-align: center; }
th.coche input, td.coche input { width: 16px; height: 16px; cursor: pointer; }
.lecture-seule { background: #fff6ea; border: 1px solid #f5d3a8; border-radius: 8px; padding: 8px 12px; color: #8a5a14; font-size: 12.5px; }
.vide { text-align: center; color: var(--gris); padding: 30px; }
.statut { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.statut.paye { background: #e3f4ea; color: var(--vert); }
.statut.partiel { background: #fff3dc; color: var(--jaune); }
.statut.nonpaye { background: #fbe5e2; color: var(--rouge); }
/* compte : rouge = dépense, bleu = encaissement */
:root { --bleu-compte: #1565c0; }
table.compte td.debit { color: var(--rouge); font-weight: 700; }
table.compte td.credit { color: var(--bleu-compte); font-weight: 700; }
table.compte tr.ligne-depense td { color: #b3261e; }
table.compte tr.ligne-entree td { color: var(--bleu-compte); }
table.compte tr.ligne-depense { background: #fdf1f0; }
table.compte tr.ligne-entree { background: #eef5fd; }
table.compte tr.ligne-impayee td { opacity: .55; }
table.compte tr.ligne-depense:hover { background: #fbe2df; }
table.compte tr.ligne-entree:hover { background: #dcebfb; }
table.compte .nature { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.solde-positif { color: var(--bleu-compte) !important; }
.solde-negatif { color: var(--rouge) !important; }
.montant-entree { color: var(--bleu-compte); }
.montant-depense { color: var(--rouge); }
.kpi.bleu { border-left-color: var(--bleu-compte); }
/* calcul du solde : Entrées − Dépenses − Charges fixes − Charges variables = Solde */
.calcul-solde { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: stretch; }
.calc-bloc { flex: 1 1 150px; background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 10px 14px; }
.calc-bloc.montant-entree { border-left: 4px solid var(--bleu-compte); }
.calc-bloc.montant-depense { border-left: 4px solid var(--rouge); }
.calc-lib { font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: .4px; }
.calc-signe { display: inline-block; font-size: 18px; font-weight: 800; margin-right: 6px; color: var(--texte); }
.calc-val { font-size: 19px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.calc-bloc.calc-total { border: 2px solid currentColor; background: #f6f9fe; }
.calc-bloc.calc-total.solde-negatif { background: #fdf1f0; }
.calc-bloc.calc-total .calc-lib { color: inherit; font-weight: 700; }
.legende-compte { font-size: 12.5px; color: var(--gris); margin: -4px 0 10px; }
.pastille-entree, .pastille-depense { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.pastille-entree { background: var(--bleu-compte); }
.pastille-depense { background: var(--rouge); }
.doc table.compte tr.ligne-depense td, .doc table.compte tr.ligne-entree td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
tr.report td { background: #f6f8fb; font-style: italic; }

/* formulaire */
.formulaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.formulaire .large { grid-column: 1 / -1; }
.calcule input { background: #fff6ea; font-weight: 600; }
.lignes table { font-size: 13px; }
.lignes td { padding: 4px; border: none; vertical-align: middle; }
.lignes th { position: static; }
.lignes input { padding: 5px 7px; }
.montant-ligne { min-width: 90px; font-weight: 600; }
.calc-tarif { font-size: 12px; color: var(--gris); margin-top: 3px; }
.calc-tarif.ok { color: var(--vert); font-weight: 600; }
.calc-tarif.erreur { color: var(--rouge); font-weight: 700; }
.lignes input[readonly] { background: #eef1f5; color: #555; }
.tarifs-table td { padding: 4px; border: none; }
.tarifs-table input, .tarifs-table select { padding: 5px 7px; }
.bandeau-paiement { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #fff4e5; border: 1px solid #f5b971; color: #7a4100; }
.liste-paiements { margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: #e8f1fc; color: #0d3c78; font-size: .92em; }
.pied-form { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* modale, toast */
.modale { position: fixed; inset: 0; background: rgba(10,25,45,.55); display: grid; place-items: start center; padding: 30px 16px; overflow-y: auto; z-index: 50; }
.boite { background: #fff; border-radius: 14px; width: 100%; max-width: 900px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.boite-entete { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--bord); }
.boite-entete h3 { margin: 0; color: var(--bleu); }
.fermer { background: none; border: none; font-size: 26px; cursor: pointer; color: var(--gris); line-height: 1; }
#modale-corps { padding: 20px; }
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--bleu-2); color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 420px; }
.toast.erreur { background: var(--rouge); }

/* impression */
#impression { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body.imprime > *:not(#impression) { display: none !important; }
  body.imprime #impression { display: block; }
  body { background: #fff; }
}
.doc { font-size: 12.5px; color: #111; }
.doc .en-tete { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--bleu); padding-bottom: 10px; margin-bottom: 14px; gap: 16px; }
.doc .en-tete img { max-height: 70px; max-width: 140px; }
.doc .org h1 { margin: 0; color: var(--bleu); font-size: 22px; letter-spacing: 1px; }
.doc .org div { color: #444; }
.doc .titre-doc { text-align: right; }
.doc .titre-doc h2 { margin: 0; color: var(--orange-2); font-size: 22px; letter-spacing: 2px; }
.doc table { margin: 10px 0; }
.doc th { background: var(--bleu); color: #fff; position: static; }
.doc td, .doc th { border: 1px solid #ccc; padding: 6px 8px; }
.doc .totaux-facture { width: 50%; margin-left: auto; }
.doc .bloc { border: 1px solid #ccc; border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.doc .lettres { font-style: italic; margin: 10px 0; }
.doc .signature { display: flex; justify-content: flex-end; margin-top: 30px; }
.doc .signature div { text-align: center; min-width: 220px; min-height: 80px; }
.doc .pied { text-align: center; color: #666; font-size: 11px; margin-top: 24px; border-top: 1px solid #ddd; padding-top: 6px; }
.doc .grand { font-size: 18px; font-weight: 700; }
.doc .fiche td:first-child { width: 35%; font-weight: 600; background: #f6f8fb; }
.doc.liste { font-size: 10px; }
.doc.liste td, .doc.liste th { padding: 3px 5px; }
.doc .tableau-conteneur { border: none; }
.doc .kpis { grid-template-columns: repeat(3, 1fr); }
.doc .mois-graph, .doc .legende { display: none; }

/* ---------------- facture (modèle SNI COMORES / KACHOU express) */
.boite.large { max-width: min(960px, calc(100vw - 32px)); }
.boite { min-width: 0; }
.apercu-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
/* aperçu : la page garde sa largeur A4 et est réduite pour tenir dans l'écran (téléphone) */
.apercu-page > .facture, .apercu-page > .bulletin { width: 794px; max-width: none; box-sizing: border-box; }
.apercu-page > .doc { background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.15); margin: 0 auto; max-width: 1000px; padding: 28px 32px; }
.apercu-page { background: #e9edf2; padding: 18px; border-radius: 10px; overflow-x: auto; }
.apercu-page .facture { background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.15); margin: 0 auto; max-width: 794px; padding: 34px 40px; }
.facture { --f-rouge: #e30613; --f-bleu: #1f3864; --f-ciel: #dce6f1; --f-trait: #8eb4e3;
  position: relative; font: 13px/1.4 Arial, "Segoe UI", sans-serif; color: #111; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.facture > * { position: relative; }
.facture tbody tr:hover { background: none; }
.facture .f-filigrane { position: absolute; left: 50%; top: 52%; width: 72%; transform: translate(-50%, -50%); opacity: .09; pointer-events: none; z-index: 0; }
.facture .f-etabli { position: absolute; right: var(--f-marge-x, 0); top: var(--f-marge-y, 0); text-align: right; font-size: 12px; }
.apercu-page .facture { --f-marge-x: 40px; --f-marge-y: 34px; }
.facture .f-logo { text-align: center; }
.facture .f-logo img { height: 105px; max-width: 260px; object-fit: contain; }
.facture .f-bandeau { border: 2px solid var(--f-rouge); min-height: 26px; margin: 12px 0 8px; text-align: center; font-weight: 700; color: var(--f-rouge); padding: 3px; }
.facture .f-coord { text-align: center; font-size: 12px; }
.facture .f-rcs { font-family: Georgia, "Times New Roman", serif; font-weight: 700; color: var(--f-bleu); margin-top: 2px; }
.facture .f-trait { width: 160px; border-top: 1px solid #555; margin: 6px auto 0; }
.facture .f-titre { text-align: center; font-size: 26px; margin: 12px 0; }
.facture .f-titre small { font-size: 18px; }
.facture table { border-collapse: collapse; width: 100%; margin: 0; }
.facture th, .facture td { position: static; min-width: 0; background: none; color: inherit; font-size: 13px; }
.facture .f-client td, .facture .f-client th { border: 1.5px solid #222; padding: 4px 10px; text-align: left; font-weight: normal; }
.facture .f-client th { background: var(--f-rouge); color: #fff; font-weight: 700; }
.facture .f-client .f-date, .facture .f-client td:nth-child(2) { width: 28%; }
.facture .f-lignes { margin-top: 22px; }
.facture .f-lignes th { background: var(--f-ciel); color: var(--f-bleu); font-weight: 700; font-size: 14px; border: 1.5px solid var(--f-trait); padding: 8px 10px; text-align: left; }
.facture .f-lignes td { border-left: 1.5px solid var(--f-trait); border-right: 1.5px solid var(--f-trait); border-bottom: 1.5px solid var(--f-trait); padding: 8px 10px; vertical-align: top; height: 40px; }
.facture .f-lignes .q { width: 60px; text-align: center; }
.facture .f-lignes .n { text-align: right; white-space: nowrap; }
.facture .f-lignes small { color: #444; font-size: 11px; }
.facture .f-bas { display: grid; grid-template-columns: 1fr 380px; gap: 18px; margin-top: 18px; align-items: start; }
.facture .f-qr { position: relative; min-height: 120px; }
.facture .f-qr svg { display: block; }
.facture .f-tampon { position: absolute; left: 140px; top: 38px; transform: rotate(-14deg); font: italic 700 34px "Segoe Script", "Brush Script MT", cursive; color: var(--f-rouge); white-space: nowrap; }
.facture .f-tampon.partiel { font-size: 22px; line-height: 1.15; color: #c25a00; top: 26px; text-align: center; }
.facture .f-totaux td { background: var(--f-ciel); border-bottom: 1.5px solid #fff; padding: 5px 10px; font-weight: 700; }
.facture .f-totaux td:last-child { text-align: right; white-space: nowrap; }
.facture .f-totaux .f-net td { font-size: 14.5px; border-bottom: 2.5px solid var(--f-bleu); }
.facture .f-euro { text-align: right; font-size: 10.5px; color: #555; margin-top: 3px; }
.facture .f-lettres { font-size: 14px; margin: 22px 0 14px; }
.facture .f-signature { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.facture .f-mode { width: auto; }
.facture .f-mode td { border: 1.5px solid var(--f-rouge); padding: 5px 14px; }
.facture .f-signature > div { font-size: 14px; margin-right: 14px; min-height: 110px; }
.facture .f-obs { font-size: 12px; color: #333; }
.facture .f-pied { text-align: center; font-size: 12px; margin-top: 70px; }
.facture .f-pied b { color: var(--f-rouge); }
.facture .f-merci { color: #555; font-style: italic; margin-top: 4px; }
/* ---------------- bulletin de paie (modèle SNI COMORES) */
.titre-form { margin: 8px 0 0; color: var(--bleu); border-bottom: 2px solid var(--orange); padding-bottom: 4px; font-size: 14px; }
.apercu-page .bulletin { background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.15); margin: 0 auto; max-width: 794px; padding: 30px 36px; }
.bulletin { --b-orange: #f79646; --b-rouge: #c0504d; --b-rose: #f2dcdb; --b-rose-2: #f9eaea; --b-bleu: #0070c0;
  font: 13px/1.4 Arial, "Segoe UI", sans-serif; color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bulletin table { border-collapse: collapse; width: 100%; margin: 0; }
.bulletin th, .bulletin td { position: static; min-width: 0; font-size: 13px; }
.bulletin tbody tr:hover { background: none; }
.bulletin .b-tete { display: grid; grid-template-columns: 170px 1fr 170px; align-items: center; margin-bottom: 14px; }
.bulletin .b-tete img { width: 165px; height: 82px; object-fit: contain; object-position: left; }
.bulletin .b-tete h1 { text-align: center; font: 700 25px "Bahnschrift", "Arial Narrow", Arial, sans-serif; letter-spacing: .5px; margin: 0; }
.bulletin .b-ref { text-align: right; font-size: 14px; }
.bulletin .b-ref span { font-size: 11px; color: #555; }
.bulletin .b-parties { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #bbb; margin-bottom: 14px; }
.bulletin .b-parties > div + div { border-left: 2px solid #999; }
.bulletin .b-parties h3 { background: var(--b-orange); margin: 0; padding: 8px 10px; font-size: 15px; }
.bulletin .b-parties p { margin: 0; padding: 8px 10px; line-height: 1.6; }
.bulletin .b-infos th { background: var(--b-rose); border: 1.5px solid var(--b-rouge); padding: 6px; text-align: center; font-weight: 600; color: #222; }
.bulletin .b-infos td { border: 1.5px solid var(--b-rouge); padding: 9px 6px; text-align: center; font-weight: 700; font-size: 14px; }
.bulletin .b-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 18px; align-items: start; }
.bulletin .b-gains th { background: var(--b-rouge); color: #fff; padding: 6px 8px; text-align: left; font-size: 14px; }
.bulletin .b-gains td { padding: 6px 8px; border-bottom: 1px solid var(--b-rose); }
.bulletin .b-gains .b { text-align: right; width: 60px; }
.bulletin .b-gains .m { text-align: right; width: 110px; }
.bulletin .b-gains td.m { background: var(--b-rose-2); }
.bulletin .b-gains .b-total td { background: var(--b-rose); font-weight: 700; border-top: 2px solid var(--b-rouge); }
.bulletin .b-net { display: flex; justify-content: space-between; align-items: center; border: 2px solid #222; padding: 12px 18px; font-size: 18px; font-weight: 700; }
.bulletin .b-net > div { text-align: right; }
.bulletin .b-net small { display: block; font-size: 11px; font-weight: normal; }
.bulletin .b-lettres { font-size: 14px; margin: 10px 0; }
.bulletin .b-cadre { border: 1px solid #999; padding: 8px 12px; min-height: 60px; }
.bulletin .b-cadre h4 { margin: 0 0 4px; color: var(--b-bleu); font-size: 14px; }
.bulletin .b-cadre h4.rouge { color: var(--b-rouge); }
.bulletin .b-cadre p { margin: 0; }
.bulletin .b-charges { font-size: 11.5px; color: #444; margin: 8px 0 14px; }
.bulletin .b-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bulletin .b-signatures .b-cadre { min-height: 110px; }
.bulletin .b-bas { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.bulletin .b-qr { display: flex; gap: 12px; align-items: flex-start; font-size: 11.5px; color: #444; max-width: 400px; }
.bulletin .b-qr svg { flex: none; }
.bulletin .b-tampon { border: 4px solid #b8234a; color: #b8234a; border-radius: 8px; padding: 6px 16px; font: 900 30px "Bahnschrift", Impact, Arial, sans-serif; letter-spacing: 1px; transform: rotate(-8deg); margin-right: 10px; }
.bulletin .b-tampon.paye { border-color: #1f8a4c; color: #1f8a4c; }
.bulletin .b-imprime { text-align: right; font-size: 11.5px; color: #333; margin: 8px 0 0; }
.bulletin .f-pied { text-align: center; font-size: 12px; margin-top: 14px; }
.bulletin .f-pied b { color: #e30613; }
.bulletin .f-rcs { font-family: Georgia, "Times New Roman", serif; font-weight: 700; color: #1f3864; }
/* impression du bulletin : tout tient sur une page A4 */
@media print {
  .bulletin { padding: 0; font-size: 12px; }
  .bulletin th, .bulletin td { font-size: 12px; }
  .bulletin .b-tete { margin-bottom: 8px; }
  .bulletin .b-tete img { height: 64px; }
  .bulletin .b-parties { margin-bottom: 8px; }
  .bulletin .b-parties h3 { padding: 5px 10px; font-size: 14px; }
  .bulletin .b-parties p { padding: 5px 10px; line-height: 1.45; }
  .bulletin .b-infos th { padding: 4px; }
  .bulletin .b-infos td { padding: 5px 4px; font-size: 13px; }
  .bulletin .b-colonnes { margin: 8px 0 10px; }
  .bulletin .b-gains th { padding: 4px 8px; font-size: 13px; }
  .bulletin .b-gains td { padding: 3px 8px; }
  .bulletin .b-net { padding: 7px 16px; font-size: 16px; }
  .bulletin .b-lettres { margin: 6px 0; }
  .bulletin .b-cadre { min-height: 44px; padding: 5px 10px; }
  .bulletin .b-charges { margin: 4px 0 8px; }
  .bulletin .b-signatures .b-cadre { min-height: 80px; }
  .bulletin .b-bas { margin-top: 8px; }
  .bulletin .b-qr svg { width: 90px; height: 90px; }
  .bulletin .b-imprime { margin-top: 4px; }
  .bulletin .f-pied { margin-top: 8px; }
}
@media print { .facture { padding: 0; } .facture .f-pied { margin-top: 24px; } .facture .f-signature > div { min-height: 80px; } .facture .f-lettres { margin: 14px 0 10px; } }

/* ---------------- photo d'accueil et de fond */
.accueil { position: fixed; inset: 0; z-index: 100; background: #050d1a; display: grid; place-items: center; cursor: pointer; overflow: hidden; transition: opacity .6s; }
.accueil.sortie { opacity: 0; }
.accueil-flou { position: absolute; inset: -40px; background: var(--fond) center/cover; filter: blur(28px) brightness(.45); }
.accueil > img { position: relative; max-width: 100%; max-height: 100vh; object-fit: contain; box-shadow: 0 0 80px rgba(0,0,0,.6); animation: zoom-accueil 3.2s ease-out both; }
@keyframes zoom-accueil { from { transform: scale(1.04); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1); } }
.accueil-bas { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; background: rgba(5,13,26,.78); color: #fff; padding: 10px 18px; border-radius: 14px; backdrop-filter: blur(6px); }
.accueil-bas img { width: 84px; height: auto; border-radius: 6px; }
.accueil-bas b { letter-spacing: 2px; }
.accueil-bas small { color: #a9b8cc; font-size: 11px; }
.chargement { width: 200px; height: 4px; background: rgba(255,255,255,.18); border-radius: 4px; margin: 6px 0 3px; overflow: hidden; }
.chargement span { display: block; height: 100%; background: var(--orange); animation: charge 3.2s linear both; }
@keyframes charge { from { width: 0; } to { width: 100%; } }
body.avec-fond .connexion { background: linear-gradient(rgba(5,20,45,.15), rgba(5,20,45,.45)), var(--fond) center/cover no-repeat; }
body.avec-fond main { background: linear-gradient(rgba(243,246,250,.8), rgba(243,246,250,.86)), var(--fond) center/cover no-repeat fixed; min-height: 100vh; }
body.avec-fond .menu { background: linear-gradient(180deg, rgba(15,48,87,.93), rgba(10,34,64,.97)), var(--fond) center/cover; }
td.enregistre-le { white-space: nowrap; font-size: 12px; color: var(--gris); }
/* boîte de connexion : bleu transparent, dans le style de la photo de fond */
.carte-connexion { background: linear-gradient(160deg, rgba(10,40,110,.72), rgba(3,15,50,.82)); border: 1px solid rgba(80,170,255,.55); box-shadow: 0 0 28px rgba(40,140,255,.45), 0 20px 60px rgba(0,0,0,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; }
.carte-connexion .sous-titre { color: #c9dcff; }
.carte-connexion label { color: #dbe8ff; }
.carte-connexion input { background: rgba(255,255,255,.1); border: 1px solid rgba(120,185,255,.55); color: #fff; }
.carte-connexion input::placeholder { color: rgba(220,232,255,.6); }
.carte-connexion input:focus { outline: 2px solid rgba(255,200,40,.6); border-color: #ffc828; background: rgba(255,255,255,.16); }
.carte-connexion input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #0b2a6e inset; caret-color: #fff; }
.carte-connexion .btn.primaire { background: linear-gradient(90deg, #ffc828, #f5a400); color: #0a1f4d; border: none; font-weight: 700; }
.carte-connexion .btn.primaire:hover { filter: brightness(1.08); }
.carte-connexion .titre-rouge { -webkit-text-stroke: 4px #fff; paint-order: stroke fill; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.carte-connexion .erreur { color: #ffb4a8; }
body.avec-fond .connexion { background: linear-gradient(rgba(5,20,45,.05), rgba(5,20,45,.25)), var(--fond) center/cover no-repeat; }
.fond-param { display: grid; gap: 6px; font-size: 13px; color: var(--gris); }
.fond-ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fond-ligne img { height: 90px; border-radius: 8px; border: 1px solid var(--bord); }
.fond-ligne label.btn { display: inline-block; color: var(--texte); }
@media print { .accueil { display: none !important; } body.avec-fond main { background: none; } }

.ref-imprimee { font-weight: normal; font-size: 11px; color: #333; white-space: nowrap; }
/* sauvegarde en ligne */
.en-ligne { border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: 13px; line-height: 1.6; }
.en-ligne.ok { background: #e3f4ea; border: 1px solid #b7e0c6; }
.en-ligne.attente { background: #fff6ea; border: 1px solid #f5d3a8; }
.en-ligne ol { margin: 4px 0 0; padding-left: 20px; }
/* autres appareils */
.acces { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.acces-carte { border: 1px solid var(--bord); border-radius: 10px; padding: 10px; display: grid; justify-items: center; gap: 6px; background: #fff; font-size: 13px; }
.aide-acces { margin: 0; padding-left: 18px; color: var(--gris); font-size: 13px; line-height: 1.7; }
.btn-menu, .voile-menu { display: none; }

@media screen and (max-width: 800px) {
  .btn-menu { display: inline-block; background: var(--bleu); color: #fff; border: none; border-radius: 8px; font-size: 20px; padding: 2px 11px; cursor: pointer; }
  .entete { flex-wrap: nowrap; }
  .entete h2 { flex: 1; font-size: 16px; }
  #actions-page { width: 100%; }
  .entete { flex-wrap: wrap; }
  .menu { position: fixed !important; top: 0; left: 0; bottom: 0; width: 84% !important; max-width: 310px; height: 100vh !important; z-index: 45; transform: translateX(-105%); transition: transform .25s; }
  body.menu-ouvert .menu { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.menu-ouvert .voile-menu { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 44; }
  .kpi .val { font-size: 17px; }
  .tuiles, .tuiles.petites { grid-template-columns: 1fr; }
  .boite { border-radius: 10px; }
  #modale-corps { padding: 12px; }
  .apercu-page { padding: 6px; }
}
@media print { .menu { transform: none !important; } }

@media screen and (max-width: 800px) {
  #app { flex-direction: column; }
  .menu { width: 100%; height: auto; position: static; }
  #contenu { padding: 16px; }
  .entete { padding: 14px 16px; position: static; }
  .grille2 { grid-template-columns: 1fr; }
}