:root {
  --bleu: #14365f; --bleu-clair: #e6edf6; --fond: #f1f3f6; --carte: #ffffff; --texte: #1c2430; --gris: #5b6675;
  --trait: #d5dbe3; --vert: #167a42; --vert-clair: #e2f4e9; --rouge: #b42318; --rouge-clair: #fde7e4;
  --orange: #8a4f06; --orange-clair: #fdf0d9;
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.45; }
h1 { font-size: 1.35rem; margin: 0 0 .25rem; color: var(--bleu); }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; color: var(--bleu); }
p { margin: .4rem 0; }
.attente, .petit { color: var(--gris); }
.petit { font-size: .85rem; }

.barre { background: var(--bleu); color: #fff; padding: .7rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.barre .titre { font-weight: 700; font-size: 1.05rem; }
.barre .qui { font-size: .85rem; opacity: .9; }
.barre button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.onglets { display: flex; flex-wrap: wrap; gap: .25rem; background: #fff; border-bottom: 1px solid var(--trait); padding: .4rem .75rem 0; }
.onglets a { padding: .6rem .9rem; text-decoration: none; color: var(--gris); font-weight: 600; border-bottom: 3px solid transparent; }
.onglets a.actif { color: var(--bleu); border-bottom-color: var(--bleu); }
main { max-width: 1400px; margin: 0 auto; padding: 1rem 1rem 4rem; }   /* point 59, étape 5 : 1 300 à 1 400 px */
.centre { max-width: 460px; margin: 8vh auto; padding: 0 1rem; }

.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 1rem; margin-top: 1rem; }
.entete-page { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; justify-content: space-between; }

button, .bouton { font: inherit; font-weight: 700; border-radius: 10px; padding: .6rem 1rem; border: 2px solid var(--bleu); background: #fff; color: var(--bleu); cursor: pointer; }
a.bouton { display: inline-block; text-decoration: none; }
button.plein, .bouton.plein { background: var(--bleu); color: #fff; }
button.vert, .bouton.vert { background: var(--vert); border-color: var(--vert); color: #fff; }
button.orange, .bouton.orange { background: #c9650c; border-color: #c9650c; color: #fff; }
button.rouge, .bouton.rouge { background: var(--rouge); border-color: var(--rouge); color: #fff; }   /* 17/10/2026 (Vieux) : « Effacer » la signature en rouge plein */   /* un orange plus franc que la couleur des textes d'avertissement */   /* 17/10/2026 (Vieux) : les vannes en orange */   /* 17/10/2026 (Vieux) : « Une livraison arrive » en vert plein */
button.leger, a.bouton.leger { border-color: var(--trait); font-weight: 600; padding: .35rem .7rem; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #f0a020; outline-offset: 2px; }

label { display: block; font-weight: 600; margin-top: .8rem; }
label .aide { display: block; font-weight: 400; color: var(--gris); font-size: .85rem; }
input, select, textarea { font: inherit; width: 100%; padding: .55rem .65rem; margin-top: .25rem; border: 2px solid var(--trait); border-radius: 8px; background: #fff; color: var(--texte); }
textarea { min-height: 9rem; font-family: ui-monospace, Menlo, monospace; font-size: .9rem; }
.case { display: flex; gap: .5rem; align-items: center; font-weight: 600; margin-top: .8rem; }
.case input { width: 1.3rem; height: 1.3rem; margin: 0; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.defilement { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: .5rem .6rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
th { background: var(--bleu-clair); color: var(--bleu); font-size: .85rem; white-space: nowrap; }
td.nombre, th.nombre { text-align: right; white-space: nowrap; }
tr.entete-groupe td { background: #f7f9fc; font-weight: 700; color: var(--bleu); }

.pastille { display: inline-block; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pastille.vert { background: var(--vert-clair); color: var(--vert); }
.pastille.orange { background: var(--orange-clair); color: var(--orange); }
.pastille.rouge { background: var(--rouge-clair); color: var(--rouge); }
.pastille.gris { background: #eceff3; color: var(--gris); }

.message { border-radius: 10px; padding: .6rem .8rem; margin-top: .8rem; }
.message.erreur { background: var(--rouge-clair); color: var(--rouge); }
.message.bon { background: var(--vert-clair); color: var(--vert); }
.message.info { background: var(--bleu-clair); color: var(--bleu); }
.message.attention { background: var(--orange-clair); color: var(--orange); }

.ligne-a-traiter { border: 1px solid var(--trait); border-radius: 10px; padding: .7rem .8rem; margin-top: .6rem; background: #fff; }
.resultat-jauge { font-size: 1.3rem; font-weight: 700; color: var(--bleu); }
details summary { cursor: pointer; font-weight: 600; color: var(--bleu); margin-top: 1rem; }
.lignes-tableau { max-height: 22rem; overflow: auto; border: 1px solid var(--trait); border-radius: 8px; margin-top: .5rem; }

/* Morceau 2 */
[hidden] { display: none !important; }
.actions-barre { display: flex; flex-wrap: wrap; gap: .5rem; }
.sans-marge { margin: 0; }
.sous-carte { border: 1px solid var(--trait); border-radius: 10px; padding: .2rem .8rem .8rem; margin-top: .8rem; background: #fafbfd; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.tuile { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: .8rem 1rem; }
.gros-chiffre { font-size: 1.9rem; font-weight: 700; color: var(--bleu); font-variant-numeric: tabular-nums; }

/* Morceau 3 : la fin de tour, sur téléphone */
.etapes { display: flex; gap: .4rem; margin: .5rem 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.etapes li { flex: 1 1 0; min-width: 5.5rem; text-align: center; padding: .4rem .3rem; border-radius: 8px; background: #e9edf3; color: var(--gris); font-size: .85rem; font-weight: 600; }
.etapes li.actif { background: var(--bleu); color: #fff; }
.etapes li.fait { background: var(--vert-clair); color: var(--vert); }
.ligne-chiffre { display: flex; justify-content: space-between; gap: .75rem; padding: .25rem 0; font-variant-numeric: tabular-nums; }
.ligne-chiffre.total { border-top: 1px solid var(--trait); margin-top: .4rem; padding-top: .5rem; font-weight: 700; }
.pistolet { border-top: 1px solid var(--trait); padding: .6rem 0; }
.pistolet:first-of-type { border-top: 0; }
.pistolet label { margin-top: .2rem; }
.grand-bouton { display: block; width: 100%; text-align: center; padding: 1rem; font-size: 1.1rem; margin-top: .8rem; text-decoration: none; }
.chiffre-saisi { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.signature-zone { border: 2px dashed var(--trait); border-radius: 10px; background: #fff; display: block; width: 100%; max-width: 360px; height: 150px; touch-action: none; }
.signature-image { border: 1px solid var(--trait); border-radius: 10px; background: #fff; max-width: 100%; height: 110px; }
.resultat { border-radius: 10px; padding: .55rem .75rem; margin-top: .5rem; font-weight: 700; }
.resultat.vert { background: var(--vert-clair); color: var(--vert); }
.resultat.rouge { background: var(--rouge-clair); color: var(--rouge); }
.negatif { color: var(--rouge); }
.garde { margin: 1rem; padding: 1rem; border-radius: .75rem; background: var(--rouge-clair); color: var(--rouge); font-size: 1.05rem; }
.garde .garde-titre { font-weight: 700; margin: 0 0 .5rem; }
.garde button { margin-top: .75rem; font-size: 1.05rem; padding: .7rem 1rem; }
.pastille.mini { padding: 0 .45rem; font-size: .75rem; }   /* 21/10/2026 : les cases de la semaine */
table.semaine td { vertical-align: top; min-width: 7rem; }   /* point 91 : le stock de Kolongo en négatif (avance SOPRAF) */
.resultat.orange { background: var(--orange-clair); color: var(--orange); }
.prix-du-jour { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.prix-du-jour div { flex: 1 1 5rem; background: var(--bleu-clair); color: var(--bleu); border-radius: 10px; padding: .4rem .5rem; text-align: center; font-size: .8rem; }
.prix-du-jour b { display: block; font-size: 1.05rem; }
.element-liste { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; padding: .45rem 0; border-top: 1px solid var(--trait); }
.element-liste:first-child { border-top: 0; }

/* Sur un téléphone, la barre du haut prend moins de place. */
@media (max-width: 600px) {
  .barre { padding: .5rem .75rem; }
  .barre button { padding: .3rem .6rem; font-size: .8rem; font-weight: 600; border-width: 1px; }
  main { padding: .75rem .75rem 4rem; }
}

/* Photos (compteurs, reçus) */
.zone-photo { margin-top: .5rem; }
/* Point 95, morceau 3 : la photo du cahier à côté des chiffres tapés. */
.cahier-controle { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin: .4rem 0; }
.cahier-controle-photo { flex: 1 1 220px; max-width: 320px; }
.cahier-controle-photo .photo-prise { max-height: 260px; }
.cahier-controle-chiffres { flex: 2 1 260px; }
.cahier-controle-chiffres ul { margin: .2rem 0 0; padding-left: 1.2rem; }
.pastilles-controles .pastille { margin: 0 .25rem .25rem 0; white-space: normal; }   /* point 126 : vérifier les stations d'hier */
tr.ligne-ancienne td { background: var(--orange-clair); }
.photo-mini { max-height: 60px; display: inline-block; vertical-align: middle; margin: 0 0 0 .4rem; }
.photo-prise { display: block; max-width: 100%; max-height: 180px; border: 1px solid var(--trait); border-radius: 10px; margin-bottom: .4rem; }

/* Sur un petit écran, une longue pastille passe à la ligne au lieu de pousser le bouton hors de la carte. */
.element-liste > div { min-width: 0; }
.element-liste .pastille, .pistolet .pastille { white-space: normal; }

/* Base de répétition : un bandeau orange toujours visible, pour ne pas la confondre avec la vraie base. */
.bandeau-repetition { position: sticky; top: 0; z-index: 10; background: #c2410c; color: #fff; text-align: center; font-weight: 700; padding: .35rem .8rem; font-size: .9rem; }

/* L'appareil photo, en plein écran */
.camera { position: fixed; inset: 0; z-index: 50; background: #000; color: #fff; display: flex; flex-direction: column; }
.camera-titre { padding: .7rem 1rem; font-weight: 700; text-align: center; }
.camera-image { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.camera-boutons { display: flex; gap: .8rem; padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom)); }
.camera-boutons button { flex: 1; padding: .9rem; font-size: 1.05rem; }

/* Une ligne annulée (paiement d'un client…) : barrée, grisée, jamais effacée. */
tr.annule td { text-decoration: line-through; color: var(--gris, #777); }
tr.annule td:last-child, tr.annule td.petit { text-decoration: none; }

/* Le menu « Voir les réglages » : les écrans en lecture seule, repliés sous les onglets de travail. */
/* 21/10/2026 (relecture, point 1) : sur téléphone, le menu se replie derrière « Menu ▾ » ; sur ordinateur, tout est visible. */
.onglets .bouton-menu { display: none; }
@media (max-width: 700px) {
  .onglets.repliable .bouton-menu { display: inline-block; margin: .2rem 0 .4rem; }
  .onglets.repliable:not(.ouvert) > a:not(.actif), .onglets.repliable:not(.ouvert) > details.voir-reglages:not([open]) { display: none; }
}
.repli.pli-accueil > summary { font-size: 1.05rem; }
.aide-longue > summary { font-size: .85rem; color: var(--bleu); cursor: pointer; list-style: none; }
.aide-longue > summary::before { content: '? '; font-weight: 700; }
.onglets details.voir-reglages { display: contents; }
.onglets details.voir-reglages summary { padding: .6rem .9rem; color: var(--gris); font-weight: 600; cursor: pointer; list-style: none; border-bottom: 3px solid transparent; }
.onglets details.voir-reglages summary::-webkit-details-marker { display: none; }
.onglets details.voir-reglages summary::after { content: ' ▾'; font-size: .8em; }
.onglets details.voir-reglages[open] summary::after { content: ' ▴'; }
.onglets details.voir-reglages[open] summary { color: var(--bleu); }
.onglets .onglets-lecture { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .25rem; padding: .2rem 0 0 1.5rem; border-top: 1px dashed var(--trait); }
.onglets .onglets-lecture a { font-weight: 500; padding: .45rem .7rem; }
.lecture-seule { margin: .5rem .75rem 0; }

/* Étape 2, morceau 4 : la liste des ordres couverts par une facture */
label.case { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin: .2rem 0; }

/* Le relevé d'un client à crédit s'imprime sans la barre ni les boutons */
@media print { .barre, .onglets, .actions, .pas-imprime, .lecture-seule { display: none !important; } body { background: #fff; } .carte { box-shadow: none; border: 1px solid #ccc; } }

/* La facture d'une vente au bureau (C1) */
.facture table.totaux { width: auto; margin-left: auto; margin-top: .6rem; }
/* 23/10/2026 : le numéro d'un bon prépayé, bien lisible et d'une autre couleur (orange), à l'écran et à l'impression. */
.numero-bon { color: #b35c00; font-weight: 900; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
a.numero-bon { text-decoration: underline; }
.numero-bon.grand { display: inline-block; font-size: 2.4rem; border: 3px dashed #b35c00; border-radius: 8px; padding: .35rem .9rem; margin: .4rem 0 .9rem; background: #fff5e8; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media print { .numero-bon { color: #b35c00 !important; } .numero-bon.grand { font-size: 2.6rem; } }
/* Point 104 (24/10/2026) : le solde d'un compte courant, en grand : rouge si le client doit, vert s'il a de l'avance. */
.solde-compte { font-size: 1.9rem; font-weight: 700; margin: .2rem 0 .4rem; }
.solde-compte.rouge { color: var(--rouge); }
.solde-compte.vert { color: var(--vert); }
/* 24/10/2026 (relecture Codex, point 2) : les passages à remplir à la main au dos du bon prépayé imprimé. */
.passages-papier td { height: 1.7rem; border: 1px solid #999; }
.passages-papier th { border: 1px solid #999; }
@media print { .passages-papier { page-break-inside: avoid; } .passages-papier td { height: 2rem; } }
/* Point 104, étape 4 : le relevé de compte imprimable */
.releve-periode td:nth-child(2) { max-width: 28rem; }
@media print { .releve-periode { font-size: .85rem; } .releve-periode tr { page-break-inside: avoid; } }
/* Point 103 : la proforma et le « Payé par » de la facture */
.mention-proforma { font-weight: 700; color: #b35c00; border: 2px solid #b35c00; display: inline-block; padding: .2rem .6rem; margin: .4rem 0 .8rem; }
.paye-par { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--trait); }
@media print { .mention-proforma { color: #b35c00 !important; } }
/* Point 107, morceau C : la feuille du recouvrement groupé (une case de signature par collecteur) */
.feuille-rg td.signature-papier { min-width: 7rem; }
@media print { .feuille-rg { font-size: .9rem; } .feuille-rg tr { page-break-inside: avoid; } .feuille-rg td.signature-papier { height: 2.2rem; border-bottom: 1px solid #999; } }
.signatures-facture { display: flex; justify-content: space-between; margin-top: 2.5rem; padding-top: .4rem; }
.signatures-facture > div { width: 40%; border-top: 1px solid var(--trait); padding-top: .3rem; text-align: center; }

/* 13/10/2026 : le bouton de secours « avec l'appareil du téléphone » cache son champ de fichier (c'est l'étiquette qu'on touche). */
.entree-cachee { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
label.bouton { display: inline-block; cursor: pointer; margin-top: .4rem; }

/* Point 55 : le stock de toutes les stations */
.gris { color: var(--gris); }
.orange { color: var(--orange); font-weight: 600; }
tr.total td { border-top: 2px solid var(--trait); background: #f4f6f9; }
@media print { .entete-page h1 { font-size: 1.3rem; } }

/* Point 59 : les alertes rouges (argent) en tête du Contrôle */
.pastille.grave { font-weight: 700; box-shadow: 0 0 0 2px var(--rouge); }

/* Point 59, étape 6 : les cartes chiffrées de l'accueil */
.cartes-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; margin: .75rem 0; }
.carte-chiffre { display: block; text-decoration: none; color: inherit; border-left: 5px solid var(--bleu); }
.carte-chiffre .chiffre { font-size: 1.4rem; line-height: 1.2; font-weight: 700; color: var(--bleu); margin: .15rem 0; }
.carte-chiffre.vert { border-left-color: var(--vert); } .carte-chiffre.vert .chiffre { color: var(--vert); }
.carte-chiffre.orange { border-left-color: var(--orange); } .carte-chiffre.orange .chiffre { color: var(--orange); }
.carte-chiffre.rouge { border-left-color: var(--rouge); } .carte-chiffre.rouge .chiffre { color: var(--rouge); }
/* Point 125 : le tableau de bord du PDG : de grandes cartes, un gros chiffre chacune. */
.tableau-total { background: var(--bleu); color: #fff; }
.tableau-total .chiffre { font-size: 2.2rem; font-weight: 800; line-height: 1.15; margin: .2rem 0; }
.tableau-total .petit { color: #e8eef8; }
.tableau-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.tableau-carte { border-left: 6px solid var(--bleu); }
.tableau-carte .chiffre { font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: var(--bleu); margin: .15rem 0; }
.tableau-carte.tdb-vert { border-left-color: var(--vert); } .tableau-carte.tdb-vert .chiffre { color: var(--vert); }
.tableau-carte.tdb-orange { border-left-color: var(--orange); } .tableau-carte.tdb-orange .chiffre { color: var(--orange); }
.tableau-carte.tdb-rouge { border-left-color: var(--rouge); } .tableau-carte.tdb-rouge .chiffre { color: var(--rouge); }
.tableau-carte.tdb-violet { border-left-color: #5b3d9a; } .tableau-carte.tdb-violet .chiffre { color: #5b3d9a; }
.tableau-carte.tdb-gris { border-left-color: #b8bec9; } .tableau-carte.tdb-gris .chiffre { color: var(--gris); }
.tableau-produits { list-style: none; margin: .3rem 0; padding: 0; }
.tableau-produits li { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dashed #e3e6ec; padding: .1rem 0; }
.tableau-produits li > span:last-child { white-space: nowrap; text-align: right; }   /* point 125, morceau 3 : le montant sur une ligne */
.tableau-explication { margin: .3rem 0; padding-left: 1rem; }   /* 03/11/2026 : de quoi sont faits les litres de la carte DISPATCHING */
.tableau-produits li.negatif, .negatif { color: var(--rouge); font-weight: 700; }
.tableau-detail { margin-top: .5rem; }
.fleche-tdb { font-size: .85rem; font-weight: 700; margin: .1rem 0 .2rem; }   /* point 125, morceau 5 : les flèches */
.fleche-tdb.bon { color: var(--vert); } .fleche-tdb.mauvais { color: var(--rouge); } .fleche-tdb.egal { color: var(--gris); }
.tableau-total .fleche-tdb.bon { color: #b9f2c8; } .tableau-total .fleche-tdb.mauvais { color: #ffc9c2; } .tableau-total .fleche-tdb.egal { color: #e8eef8; }
.tableau-apres { display: flex; justify-content: space-between; gap: .5rem; border-top: 1px solid rgba(255, 255, 255, .35); margin-top: .5rem; padding-top: .4rem; font-size: 1.15rem; }   /* point 125, morceau 3 */

/* Point 59, étape 7 : les règles communes à tous les écrans */
.pastille-lecture { vertical-align: middle; margin-left: .4rem; }
.produit { display: inline-block; border-radius: 6px; padding: 0 .45rem; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.produit-super { background: #e3f0ff; color: #1d4e9a; }
.produit-gasoil { background: #fff1dc; color: #8a4f06; }
.produit-petrole { background: #ebe6f7; color: #5b3d9a; }
.menu-plus { position: relative; display: inline-block; }
.menu-plus > summary { list-style: none; cursor: pointer; font: inherit; font-weight: 700; border-radius: 10px; padding: .45rem .8rem; border: 2px solid var(--bleu); background: #fff; color: var(--bleu); line-height: 1.1; font-size: 1.1rem; }
.menu-plus > summary::-webkit-details-marker { display: none; }
.menu-plus-liste { position: absolute; right: 0; z-index: 20; min-width: 15rem; background: #fff; border: 1px solid var(--trait); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: .3rem; display: flex; flex-direction: column; gap: .15rem; margin-top: .25rem; }
.menu-plus-liste a, .menu-plus-liste button { display: block; width: 100%; text-align: left; border: 0; border-radius: 8px; padding: .5rem .7rem; font-weight: 600; background: transparent; color: var(--texte); text-decoration: none; }
.menu-plus-liste a:hover, .menu-plus-liste button:hover { background: var(--bleu-clair); color: var(--bleu); }
.menu-plus-liste .separateur { border-top: 1px solid var(--trait); margin: .2rem 0; }
td .menu-plus > summary { padding: .2rem .55rem; font-size: 1rem; border-width: 1px; border-color: var(--trait); }
.aide-ligne details.info { display: inline; }
.aide-ligne details.info > summary { display: inline; list-style: none; cursor: pointer; color: var(--bleu); font-weight: 700; }
.aide-ligne details.info > summary::-webkit-details-marker { display: none; }
.aide-ligne details.info[open] .aide-longue { display: block; margin-top: .3rem; padding: .5rem .7rem; background: var(--bleu-clair); border-radius: 8px; color: var(--texte); }
.barre-recherche { display: flex; gap: .6rem; align-items: center; margin: .5rem 0; }
.barre-recherche input { max-width: 24rem; margin: 0; }
tr.cliquable, .element-liste.cliquable { cursor: pointer; }
tr.cliquable:hover td, .element-liste.cliquable:hover { background: #f4f7fb; }
tr.cliquable:focus-visible, .element-liste.cliquable:focus-visible { outline: 3px solid #f0a020; outline-offset: -3px; }
tr.total td { font-weight: 700; }
.etapes-vente { display: flex; gap: .25rem; flex-wrap: wrap; }
.etapes-vente span { font-size: .75rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: #eceff3; color: var(--gris); white-space: nowrap; }
.etapes-vente span.fait { background: var(--vert-clair); color: var(--vert); }
.etapes-vente span.attente { background: var(--orange-clair); color: var(--orange); }
.etapes-vente span.refus { background: #eceff3; color: var(--gris); text-decoration: line-through; }
.groupe-alertes { margin-top: .9rem; padding-bottom: .3rem; border-bottom: 2px solid var(--trait); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.groupe-alertes:first-child { margin-top: 0; }
.groupe-alertes .compte { color: var(--gris); font-size: .85rem; }
tr.journal-groupe td { color: var(--gris); }
.multiplicateur { font-weight: 700; color: var(--bleu); }

/* P3-1 : l'argent en chaîne */
.chaine { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .5rem; align-items: stretch; margin: .75rem 0; }
.chaine .maillon { margin-top: 0; }
.chaine .fleche { align-self: center; font-size: 1.8rem; color: var(--gris); }
@media (max-width: 900px) { .chaine { grid-template-columns: 1fr; } .chaine .fleche { text-align: center; transform: rotate(90deg); } }

/* P3-3 : les documents imprimés (ou enregistrés en PDF) : en-tête de la société, numéro unique, signatures */
.document-entete { display: none; }
.document-logo { height: 60px; width: auto; }
.document-logo-texte { font-size: 1.5rem; font-weight: 900; letter-spacing: .05em; color: var(--bleu); border: 3px solid var(--bleu); padding: .2rem .6rem; border-radius: 8px; }
@media print {
  @page { margin: 12mm; }
  .document-entete { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; border-bottom: 2px solid #14365f; padding-bottom: .5rem; margin-bottom: .8rem; }
  .document-societe { display: flex; gap: .8rem; align-items: center; }
  .document-titre { text-align: right; }
  .document-nom { font-weight: 700; font-size: 1.1rem; color: #14365f; }
  .document-numero { font-weight: 900; font-size: 1.3rem; }
  main { max-width: none; padding: 0; }
  .carte { break-inside: avoid; margin-top: .6rem; padding: .6rem .8rem; }
  .carte-chiffre, .cartes-chiffres { break-inside: avoid; }
  h1 { font-size: 1.2rem; }
  button, .bouton, .menu-plus, .barre-recherche, .aide-ligne details, .bandeau-repetition, .pastille-lecture { display: none !important; }
  .signature-image { height: 80px; }
  .photo-prise { max-height: 110px; }
  a { color: inherit; text-decoration: none; }
  tr.cliquable:hover td { background: transparent; }
}

/* Point 61 : les commentaires */
.commentaires .fil { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0; }
.commentaire { background: #f4f7fb; border-radius: 10px; padding: .5rem .8rem; }
.commentaire.moi { background: var(--bleu-clair); }
.commentaire .texte { white-space: pre-wrap; margin-top: .15rem; }
.commentaires textarea { min-height: 4.5rem; font-family: inherit; font-size: 1rem; }
.badge-commentaires { color: #fff; text-decoration: none; font-size: 1.1rem; padding: .3rem .5rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); display: inline-flex; align-items: center; gap: .3rem; }
.badge-commentaires.actif { background: #f0a020; color: #1c2430; border-color: #f0a020; font-weight: 700; }
.badge-commentaires .compte { font-size: .9rem; }
@media print { .commentaires form { display: none; } }

/* Point 64 : une couleur par poste du personnel */
.pastille.poste-pompiste { background: #e3f0ff; color: #1d4e9a; }
.pastille.poste-hotesse { background: #ebe6f7; color: #5b3d9a; }
.pastille.poste-gardien { background: #eceff3; color: #5b6675; }
.pastille.poste-graisseur { background: #fff1dc; color: #8a4f06; }

/* Point 65 : les lignes en plus (proforma, facture) */
.ligne-en-plus { grid-template-columns: 2fr 1fr 1fr auto auto; align-items: end; gap: .4rem; margin-top: .4rem; }
.case-avance { white-space: nowrap; align-self: center; }
/* Points 70-71 : la page Loyer SOPRAF */
.releve-sopraf { display: flex; gap: .3rem; align-items: center; justify-content: flex-end; }
.releve-sopraf input { width: 9rem; margin: 0; }
.ligne-en-plus input, .ligne-en-plus select { margin-top: 0; }

/* Point 67 : le stock de Nickel Oil à Kolongo, en cadre avec 3 cartes (une couleur fixe par produit) */
.cadre-kolongo { margin-top: 1rem; padding: 1rem; border: 2px solid var(--bleu); border-radius: 14px; background: var(--bleu-clair); }
.cartes-kolongo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .6rem; }
.carte-kolongo { border-radius: 12px; padding: .8rem .9rem; border: 1px solid rgba(0, 0, 0, .08); font-variant-numeric: tabular-nums; }
.carte-kolongo.cliquable { cursor: pointer; }
.carte-kolongo.cliquable:hover, .carte-kolongo.cliquable:focus-visible { outline: 2px solid var(--bleu); outline-offset: 1px; }
.carte-kolongo.vide { background: #eceef1; color: var(--gris); }
.carte-kolongo-nom { font-weight: 800; letter-spacing: .05em; font-size: .85rem; }
.carte-kolongo-gros { font-size: 1.9rem; font-weight: 800; line-height: 1.25; }
.carte-kolongo-valeur { font-weight: 700; margin-top: .2rem; }
.carte-kolongo progress { display: block; width: 100%; height: 8px; margin: .4rem 0; accent-color: currentColor; }
.cadre-kolongo .ligne-chiffre.total { border-top-color: rgba(0, 0, 0, .15); }
@media (max-width: 600px) { .cartes-kolongo { grid-template-columns: 1fr; } }

/* Point 72 B : la station du reste est obligatoire tant qu'il reste des litres */
.obligatoire select, .obligatoire input { border-color: var(--rouge); box-shadow: 0 0 0 2px var(--rouge-clair); }

/* Point 73 : « Vérifiez avant d'envoyer » : l'index de fin en gros chiffres */
.verif-carte { border: 2px solid var(--bleu); }
/* Disposition du 16/10/2026 (dessin de Vieux dans Figma) : un groupe gris par produit, « début » / « Fin » en gros / « Litres » sur une ligne. */
.verif-groupe { background: var(--fond); border-radius: 12px; padding: 12px; margin-top: 8px; }
.verif-groupe-titre { font-weight: 700; color: var(--bleu); font-size: 14px; }
.verif-index { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.verif-index:last-child { border-bottom: none; }
.verif-nom { display: flex; align-items: center; gap: 6px; }
.verif-chiffres { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; font-variant-numeric: tabular-nums; }
.verif-debut { color: var(--gris); }
.verif-repere { display: flex; flex-direction: column; gap: 2px; }
.verif-etiquette { font-size: 14px; color: var(--gris); line-height: 1; }
.verif-fin { font-size: 27px; font-weight: 900; line-height: 1.25; }
.verif-carte .actions { flex-direction: column; }
.verif-carte .actions button { width: 100%; }
.verif-second { padding: .8rem 1rem; }
/* Sur un téléphone, les chiffres ne passent pas à la ligne : on serre un peu. */
.verif-chiffres > * { white-space: nowrap; }
@media (max-width: 480px) { .verif-groupe { padding: 10px 8px; } .verif-chiffres { gap: 6px; } .verif-debut { font-size: 14px; } .verif-fin { font-size: 24px; } .verif-repere > span:last-child { font-size: 15px; } }

/* 16/10/2026 (dessin de Vieux dans Figma) : les liens du haut de la fin de tour l'un sous l'autre, « Abandonner » en rouge avec un triangle ; icône sur « Se déconnecter ». */
.liens-haut { display: flex; flex-direction: column; gap: 10px; margin: 0 0 .6rem; }
.liens-haut a { font-weight: 600; }
.lien-danger, .lien-danger:visited { color: var(--rouge); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.icone { width: 18px; height: 18px; flex: none; }
.barre button.avec-icone { display: inline-flex; align-items: center; gap: 8px; }

/* 16/10/2026 : la page « Les tours des stations » (maquette Figma de Vieux) : la synthèse en tuiles, les filtres en puces */
.synthese { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; margin-top: .6rem; }
.tuile { background: #f4f6f9; border: 1px solid var(--trait); border-radius: 10px; padding: .7rem .9rem; }
.tuile .titre { font-size: .82rem; font-weight: 600; color: var(--gris); }
.tuile .chiffre { font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--bleu); margin: .1rem 0; }
.tuile.texte .chiffre { font-size: 1.05rem; }
.tuile.vert .chiffre { color: var(--vert); } .tuile.orange .chiffre { color: var(--orange); } .tuile.rouge .chiffre { color: var(--rouge); }
.tuile .detail { font-size: .82rem; color: var(--gris); }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .9rem 0 0; }
.filtres .recherche { flex: 1 1 240px; margin: 0; min-width: 0; }
.puce { border-radius: 999px; border: 1px solid var(--trait); background: #fff; color: var(--bleu); padding: .4rem .95rem; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.puce.active { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.puce.info { cursor: default; color: var(--gris); font-weight: 600; }
.entete-carte { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

/* 17/10/2026 : l'accueil du gérant (présentation) : « À faire aujourd'hui » en haut, le reste replié ; barre du haut plus courte sur téléphone */
.entete-station h1 { margin-bottom: 0; }
.taches .tache { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--trait); }
.taches .tache:first-of-type { border-top: 0; }
.taches .quoi { flex: 1 1 auto; min-width: 0; }
.taches .etat { margin-top: .15rem; }
.taches .etat .pastille { white-space: normal; }
.taches .faire { flex: 0 0 auto; }
.taches .faire .bouton, .taches .faire button { white-space: nowrap; }
.repli { margin-top: .8rem; }
.repli > summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--bleu); background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: .7rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::after { content: '▾'; font-size: .9em; color: var(--gris); }
.repli[open] > summary { border-radius: 12px 12px 0 0; border-bottom: 0; }
.repli[open] > summary::after { content: '▴'; }
.repli-contenu > div > .carte, .repli-contenu > .carte { margin-top: 0; border-radius: 0 0 12px 12px; }
.repli-contenu > div > .carte + .carte { border-top: 0; border-radius: 0 0 12px 12px; }
.repli-contenu > div > .carte:not(:last-child) { border-radius: 0; }
.texte-court { display: none; }
@media (max-width: 600px) {
  .barre .texte-bouton { display: none; }
  .barre .texte-court { display: inline; }
  .barre .actions-barre { gap: .4rem; }
  .taches .tache { flex-wrap: wrap; }
  .taches .faire { flex: 1 1 100%; }
  .taches .faire .bouton, .taches .faire button { display: block; width: 100%; text-align: center; }
}
.groupe-alertes .pastille { white-space: normal; }   /* 17/10/2026 : un titre d'alerte long passe à la ligne sur téléphone */

/* 17/10/2026 : la fin de tour (présentation) */
.liens-haut { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .9rem; margin-bottom: .4rem; }
.liens-haut a { font-weight: 600; }
.liens-haut .lien-danger { color: var(--rouge); display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; font-size: .85rem; }
.compteur-entete { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.compteur-entete .ouverture { font-weight: 400; color: var(--gris); font-size: .85rem; white-space: nowrap; }
.pistolet .calcul { color: var(--bleu); }
.pistolet .calcul strong { font-size: 1.05rem; }
.du-pompe { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; background: var(--bleu-clair); color: var(--bleu); border-radius: 10px; padding: .5rem .8rem; margin-top: .4rem; }
.du-pompe strong { font-size: 1.15rem; }
.ligne-chiffre > span:last-child { white-space: nowrap; }
.actions.pied { justify-content: flex-end; }
@media (max-width: 600px) {
  .actions.pied { flex-direction: column-reverse; }
  .actions.pied button, .actions.pied .bouton { width: 100%; text-align: center; padding: .85rem 1rem; }
  .zone-photo button { padding: .4rem .7rem; font-size: .9rem; }
}

/* 17/10/2026 : « Une livraison arrive » (présentation) */
.grille.deux { grid-template-columns: 1fr 1fr; gap: 0 .6rem; }
.grille.deux > div { min-width: 0; }
.grille.deux .zone-photo button { width: 100%; padding: .4rem .3rem; font-size: .85rem; white-space: normal; }
.consignes ol { margin: .3rem 0 .2rem; padding-left: 1.3rem; }
.consignes li { margin: .1rem 0; }
.compteur-entete .case { margin: 0; font-size: .9rem; font-weight: 600; }
@media (max-width: 600px) {
  .grille.deux label { margin-top: .5rem; font-size: .9rem; }
}

/* 17/10/2026 : l'accueil de la direction (présentation) : l'en-tête sur une ligne, les alertes repliées par type */
.entete-page { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.entete-page .actions { margin-top: 0; align-items: center; flex-wrap: wrap; }
.entete-page input[type="date"] { width: auto; margin: 0; }
.entete-carte h2 { margin: 1.5rem 0 .5rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.entete-carte .actions { margin-top: 1.2rem; }
.groupe-replie > summary .groupe-alertes { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: 0; border: 0; margin: 0; }
.groupe-replie > summary .compte { font-weight: 600; color: var(--gris); font-size: .9rem; }
.groupe-replie .pastille { white-space: normal; }
.groupe-replie[open] > summary { background: #fafbfd; }

/* 17/10/2026 : les ventes au bureau (présentation) : les étapes d'une vente sur une ligne, en petites pastilles */
.etapes-vente { display: flex; flex-wrap: wrap; gap: .2rem .3rem; align-items: center; max-width: 16rem; }
.etapes-vente span { font-size: .72rem; padding: .05rem .45rem; }
td .petit { line-height: 1.3; }
.table-ventes { min-width: 1050px; }   /* 17/10/2026 : assez large pour que les étapes tiennent sur une ligne ; défile de côté sur un petit écran */
.table-ventes td:nth-child(2) { min-width: 10rem; }   /* le nom du client sur une ou deux lignes, pas quatre */

/* 17/10/2026 : clients en compte (présentation) : une ligne de titre par groupe dans le tableau */
tr.groupe td { background: #e9edf3; color: var(--bleu); font-weight: 700; font-size: .85rem; padding: .4rem .6rem; }
.table-large { min-width: 1150px; }   /* 17/10/2026 : les grands tableaux de l'approvisionnement gardent leurs colonnes lisibles */

/* 17/10/2026 : dans un tableau, les boutons d'une ligne restent sur une ligne (petits), au lieu de s'empiler */
td > .actions { flex-wrap: nowrap; gap: .3rem; }
td > .actions button, td > .actions .bouton, td > .actions .menu-plus > summary { padding: .3rem .6rem; font-size: .85rem; white-space: nowrap; }
td:has(> .actions) { width: 1%; }   /* la colonne des boutons ne prend que sa place */
td.serre { white-space: nowrap; }   /* une case courte ne se coupe pas en plusieurs lignes */
@media (max-width: 700px) { td > .actions { flex-wrap: wrap; } td.serre { white-space: normal; } }
td.large { min-width: 13rem; }   /* la colonne qui porte le nom du tableau garde de la place */
td.moyen { min-width: 9rem; }
@media (max-width: 700px) { td.large, td.moyen { min-width: 0; } }
/* 17/10/2026 : le journal — la recherche repliée, une ligne de titre par jour */
.repli > .repli-contenu > form.carte { margin-top: .6rem; }
/* 17/10/2026 : le repli « Gasoil mis dans le groupe électrogène » (fin de tour) en rouge, pour qu'on le voie */
.repli.rouge > summary { color: var(--rouge); background: var(--rouge-clair); border-color: var(--rouge); }
.repli.rouge > summary::after { color: var(--rouge); }

/* 17/10/2026 : l'écran du convoyeur — sur un téléphone, le bouton d'une fiche passe sous le texte, en pleine largeur */
@media (max-width: 700px) {
  .element-liste.pile { flex-direction: column; align-items: stretch; }
  .element-liste.pile > .actions, .element-liste.pile > a.bouton, .element-liste.pile > button, .element-liste.pile > div:last-child:not(:first-child) { width: 100%; }
  .element-liste.pile > a.bouton, .element-liste.pile > button, .element-liste.pile > div:last-child:not(:first-child) > .bouton, .element-liste.pile > div:last-child:not(:first-child) > button { width: 100%; text-align: center; box-sizing: border-box; }
}
.compartiment-titre { margin: .2rem 0 0; font-size: 1.05rem; color: var(--bleu); }
ul.scelles { margin: .1rem 0 .3rem; padding-left: 1.2rem; }
/* 17/10/2026 (relecture téléphone) : sous un chiffre, la petite ligne « vaut … » peut se couper au lieu de déborder */
.ligne-chiffre > span:last-child .petit { white-space: normal; text-align: right; }

/* Point 81 (19/10/2026) : « Qui est prêt ? ». */
.resume-stations { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; margin-top: .6rem; }
.resume-station { border: 1px solid #dde3ea; border-radius: 8px; padding: .5rem .7rem; background: #fff; }
.resume-station.tout-pret { border-color: var(--vert); background: var(--vert-clair); }
.tableau-pret td { vertical-align: top; }
.tache-pret { white-space: normal; line-height: 1.35; }
.tache-pret .coche { font-weight: 700; display: inline-block; width: 1.1em; }
.tache-pret.faite .coche { color: var(--vert); }
.tache-pret.en-cours .coche { color: var(--orange); }
.tache-pret.jamais .coche { color: var(--rouge); }
.tableau-pret tr.statut-pas_commence td:first-child { border-left: 4px solid var(--rouge); }
.tableau-pret tr.statut-en_cours td:first-child { border-left: 4px solid var(--orange); }
.tableau-pret tr.statut-pret td:first-child { border-left: 4px solid var(--vert); }
textarea.resume-pret { width: 100%; font-family: inherit; font-size: .9rem; line-height: 1.35; }
@media print { .tableau-pret { font-size: .8rem; } .resume-stations { grid-template-columns: repeat(3, 1fr); } }

/* Point 82 (19/10/2026) : le relevé des compteurs de départ. */
.tableau-releve tr.ecart td { background: var(--orange-clair); }
.ecart-releve { margin: .2rem 0 .4rem; }
.liste-releves .element-liste { align-items: center; }
.photos-releve { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

/* Point 84 : le numéro d'un enlèvement se lit en entier. */
td.numero { white-space: nowrap; }

/* Point 85 : « Aujourd'hui, en direct ». */
.tableau-aujourdhui td { vertical-align: top; }

/* Point 86 : « À revoir ». */
.signalements .ligne-signaler label { display: block; margin-top: .4rem; }
.signalements .ligne-signaler input { width: 100%; }

/* 21/10/2026 : le tableau « station par station » de la chaîne de l'argent tient en largeur */
.table-chaine th { white-space: normal; font-size: .8rem; line-height: 1.15; vertical-align: bottom; max-width: 7.5rem; }
.table-chaine td { white-space: nowrap; font-size: .92rem; }
.table-chaine td.station { white-space: normal; min-width: 10rem; }

/* Point 97 (22/10/2026) : dans « Ce qu'on utilise », un réglage au texte long ne doit pas écraser son interrupteur oui / non. */
.ligne-chiffre select { min-width: 6em; flex: none; }

/* 26/10/2026 : le bon de livraison de la vente : des lignes à remplir à la main. */
.ligne-a-remplir { display: flex; align-items: flex-end; gap: .75rem; padding: .55rem 0; }
.ligne-a-remplir .trait { flex: 1; border-bottom: 1px solid #333; min-height: 1.4rem; }
.bon-deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 700px) { .bon-deux-colonnes { grid-template-columns: 1fr; } }
@media print {
  .bon-livraison-vente { font-size: 12.5px; break-inside: avoid; page-break-inside: avoid; }
  .bon-livraison-vente .bon-autorisation { margin: .3rem 0; }
  .bon-livraison-vente .bon-deux-colonnes { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .bon-livraison-vente .carte { padding: .35rem .6rem; margin: .3rem 0; break-inside: avoid; }
  .bon-livraison-vente .carte h2 { font-size: 1rem; margin: 0 0 .15rem; }
  .bon-livraison-vente .ligne-chiffre { padding: .08rem 0; }
  .bon-livraison-vente .ligne-a-remplir { padding: .4rem 0; }
  .bon-livraison-vente .signatures-facture { margin-top: 1rem; }
  .bon-livraison-vente .signatures-facture div { min-height: 4.2rem; }
  .bon-livraison-vente .document-entete { margin-bottom: .3rem; }
}

/* Point 111 (27/10/2026) : le bon de commande, de la place pour la signature et le cachet du PDG. */
.bon-commande .signatures-facture { margin-top: 6rem; }   /* on signe et on cachette au-dessus du trait */

/* Point 112 (27/10/2026) : une facture (et une proforma, un bon de commande) = une page, un seul en-tête. Avant, le cadre ne devait jamais être coupé :
   trop haut pour la fin de la page 1 après l'en-tête, il partait entier sur la page 2 (page 1 vide), avec l'en-tête de l'écran en double. */
@media print {
  .carte.facture { break-inside: auto; font-size: 13px; padding: .4rem .6rem; margin-top: .3rem; }
  .carte.facture table, .carte.facture .paye-par, .carte.facture .signatures-facture, .carte.facture .totaux { break-inside: avoid; }
  .carte.facture th, .carte.facture td { padding-top: .25rem; padding-bottom: .25rem; }
  .carte.facture .signatures-facture { margin-top: 1.6rem; }
  .carte.facture.bon-commande .signatures-facture { margin-top: 5rem; }
}
/* Point 112 (27/10/2026) : le bon prépayé et ses passages en station sur UNE feuille (le client la garde) : avant, le tableau partait seul sur la page 2. */
@media print {
  .bon-prepaye-imprime { font-size: 13px; padding: .4rem .7rem; }
  .bon-prepaye-imprime .ligne-chiffre { padding-top: .1rem; padding-bottom: .1rem; }
  .bon-prepaye-imprime .numero-bon.grand { font-size: 2.2rem; margin: .2rem 0 .4rem; }
  .bon-prepaye-imprime .signatures-facture { margin-top: 1.4rem; }
  .passages-papier { font-size: 12px; padding: .4rem .7rem; }
  .passages-papier td { height: 1.5rem; padding-top: 0; padding-bottom: 0; }
  .passages-papier h2 { font-size: 1rem; }
  .passages-papier p.petit { margin: .2rem 0; }
  .bon-prepaye-imprime p.petit { margin: .2rem 0; }
}

/* Point 114 (27/10/2026) : le compte de la station : deux cartes côte à côte sur un grand écran, l’une sous l’autre sur un téléphone. */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 1rem; }
.grille-cartes > .carte h3 { margin: .8rem 0 .2rem; font-size: 1rem; }
/* Point 114, morceau 3 : le tableau des stations et le relevé du compte, lisibles à l’impression. */
@media print { .table-releve { font-size: .82rem; } .table-releve tr { break-inside: avoid; } .releve-compte h2 { break-after: avoid; } .releve-lignes { break-before: page; } .carte.releve-compte.defilement { overflow: visible; } .table-comptes { font-size: .72rem; } .table-comptes td, .table-comptes th { padding: .25rem .3rem; } .table-comptes .pastille { font-size: .68rem; padding: 0 .3rem; } .table-releve thead { break-after: avoid; } .carte.releve-compte { break-inside: auto; } .releve-compte .signatures-facture { margin-top: 3.5rem; } }

/* Point 115 (27/10/2026) : l'écran très simple de Mamadou (caissier du bureau) : de très gros chiffres, de gros boutons, peu de mots. */
.cs-page { max-width: 560px; margin: 0 auto; padding: .75rem; }
.cs-ecran { display: flex; flex-direction: column; gap: .8rem; }
.cs-titre { text-align: center; font-size: 1.5rem; font-weight: 800; color: var(--bleu); }
.cs-sous-titre { text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--bleu); }
.cs-section { font-weight: 800; font-size: 1.05rem; color: var(--vert); padding: .2rem .3rem; }
.cs-carte { position: relative; background: #fff; border-radius: 18px; padding: 1rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.cs-montant { font-size: 2.7rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.2; }
.cs-montant small { font-size: 1.1rem; color: var(--gris); }
.cs-client { display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--gris); margin: .4rem 0 .8rem; font-size: 1rem; text-align: center; }
.cs-rond { width: 2.3rem; height: 2.3rem; border-radius: 50%; color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: none; }
.cs-c0 { background: #7a3e9d; } .cs-c1 { background: #c0392b; } .cs-c2 { background: #1f7a8c; } .cs-c3 { background: #b9770e; }
.cs-c4 { background: #2e7d32; } .cs-c5 { background: #5d4037; } .cs-c6 { background: #ad1457; } .cs-c7 { background: #283593; }
.cs-deux { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cs-bouton { touch-action: manipulation; border: 0; border-radius: 16px; color: #fff; font-size: 1.3rem; font-weight: 800; padding: 1rem .5rem; width: 100%; cursor: pointer; min-height: 3.6rem; }
.cs-vert { background: var(--vert); } .cs-rouge { background: var(--rouge); } .cs-bleu { background: var(--bleu); }
.cs-voix { position: absolute; top: .5rem; right: .5rem; border: 0; background: transparent; font-size: 1.6rem; cursor: pointer; padding: .2rem; }
.cs-caisse { background: var(--vert-clair); color: var(--vert); border-radius: 16px; padding: .7rem; text-align: center; font-weight: 700; }
.cs-reste { background: var(--orange-clair); color: var(--orange); border-radius: 16px; padding: .7rem; text-align: center; font-weight: 700; }
.cs-chiffre { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.cs-touche { touch-action: manipulation; background: #fff; border: 0; border-radius: 14px; font-size: 2rem; font-weight: 700; padding: .7rem 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); cursor: pointer; color: var(--texte); }
.cs-touche:active { background: var(--bleu-clair); }
.cs-efface { color: var(--rouge); }
.cs-points { display: flex; justify-content: center; gap: 1.1rem; margin: .3rem 0; }
.cs-points span { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 3px solid var(--bleu); }
.cs-points span.plein { background: var(--bleu); }
.cs-coche { width: 7rem; height: 7rem; border-radius: 50%; background: var(--vert); color: #fff; font-size: 4.5rem; display: flex; align-items: center; justify-content: center; margin: .5rem auto 0; }
.cs-note { text-align: center; color: var(--gris); font-size: .95rem; }
.cs-vide { text-align: center; color: var(--gris); font-size: 1.2rem; padding: 2rem 0; }
.cs-erreur { background: var(--rouge-clair); color: var(--rouge); border-radius: 14px; padding: .7rem; text-align: center; font-weight: 700; font-size: 1.05rem; }
.cs-attente { text-align: center; font-size: 1.5rem; color: var(--gris); }
.cs-lien { text-align: center; font-size: .85rem; margin-top: 1.5rem; }
.cs-nom { touch-action: manipulation; background: #fff; border: 3px solid var(--bleu); border-radius: 16px; font-size: 1.6rem; font-weight: 800; color: var(--bleu); padding: 1.1rem .5rem; width: 100%; cursor: pointer; }   /* point 115, morceau 2 */
.cs-orange { background: #c9650c; }   /* point 115, morceau 3 : l'argent à donner */
.cs-carte.cs-donner { border: 3px solid #c9650c; background: #fff7ee; }
.cs-section.cs-o { color: #c9650c; }
.cs-a-qui { text-align: center; font-size: 1.5rem; font-weight: 800; margin: .3rem 0; }
.cs-accord { color: var(--vert); font-weight: 700; }
.cs-nom.cs-nom-o { border-color: #c9650c; color: #8a4f06; font-size: 1.4rem; padding: .9rem .5rem; }   /* point 115, morceau 4 */
.cs-noms { display: grid; gap: .6rem; }   /* point 137 : la liste des noms, par groupe */
.cs-nom small { display: block; font-size: .95rem; font-weight: 600; opacity: .8; }   /* point 137 : le poste sous le nom */
.cs-saisie { width: 100%; font-size: 1.4rem; padding: .7rem; border: 2px solid var(--trait); border-radius: 12px; margin: .5rem 0; }
/* Précision de Vieux (27/10) sur le point 115 : les factures pas encore payées, les noms des clients en haut */
.cs-nom-client { display: flex; align-items: center; justify-content: center; gap: .6rem; font-size: 1.35rem; font-weight: 800; color: var(--bleu); margin: 0 1.8rem .2rem; text-align: center; }
.cs-clients { display: flex; flex-wrap: wrap; gap: .5rem; }
.cs-client-bouton { touch-action: manipulation; flex: 1 1 45%; background: #fff; border: 3px solid var(--bleu); border-radius: 14px; font-size: 1.15rem; font-weight: 800; color: var(--bleu); padding: .7rem .4rem; cursor: pointer; }
.cs-client-bouton.actif { background: var(--bleu); color: #fff; }
.cs-client-bouton.cs-tous { flex-basis: 100%; border-color: var(--gris); color: var(--gris); }

/* Point 118, B2 (29/10/2026) : la feuille d'une page (fiche de fin de tour à remplir à la main), à l'écran et à l'impression sur une page A4. */
.feuille-tour { background: #fff; color: #000; padding: 1rem; max-width: 52rem; margin: 0 auto; font-size: .9rem; }
.feuille-tour h3 { margin: .7rem 0 .25rem; font-size: .95rem; }
.feuille-tete { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid #000; padding-bottom: .4rem; margin-bottom: .4rem; }
.feuille-cases { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .3rem 0; }
.feuille-case { display: flex; align-items: flex-end; gap: .4rem; min-width: 14rem; }
.feuille-case.large { min-width: 24rem; flex: 1; }
.feuille-trait { flex: 1; border-bottom: 1px solid #000; height: 1.3rem; min-width: 6rem; }
.feuille-table { width: 100%; border-collapse: collapse; }
.feuille-table th, .feuille-table td { border: 1px solid #000; padding: .2rem .35rem; text-align: left; font-size: .85rem; }
.feuille-table td.feuille-vide { height: 1.6rem; }
.feuille-table td.feuille-vide.haute { height: 3rem; }
@media print { .feuille-tour { padding: 0; max-width: none; font-size: 11pt; } .feuille-tour h3 { page-break-after: avoid; } .feuille-table tr { page-break-inside: avoid; } @page { size: A4; margin: 10mm; } }

/* Point 123, étape 2 (01/11/2026) : la liste « Camions attendus à Kolongo ». */
.ligne-camion { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--bordure, #e3e3e3); }
.ligne-camion:last-child { border-bottom: 0; }
.rouge { color: #b00020; }
td.saisi-par { min-width: 10rem; }   /* point 128 : le relevé de la SOCASP a 10 colonnes, « Saisi par » ne doit pas se tasser */

/* Point 133 : « Votre bon de commande n° … du … », en haut de la facture, de la proforma et du bon de livraison */
.bon-commande-client { border: 2px solid currentColor; border-radius: 4px; padding: 6px 10px; margin: 10px 0; font-size: 1.05em; }
.petit.attention { color: var(--orange); }   /* point 125 */
.ligne-chiffre.rouge { color: var(--rouge); }   /* point 125 : un compte à découvert */
.case-signature { border: 1px solid var(--trait); border-radius: 8px; height: 6rem; background: #fff; }   /* point 130, morceau 5 : le bon de compensation */