:root {
  --fond: #f5f6f8;
  --carte: #ffffff;
  --texte: #1c1f26;
  --doux: #6b7280;
  --bord: #e3e6ec;
  --accent: #8B1111;
  --accent-fonce: #6F0D0D;
  --ok: #15803d;
  --ok-fond: #ecfdf3;
  --erreur: #b91c1c;
  --erreur-fond: #fef2f2;
  --alerte: #b45309;
  --alerte-fond: #fffbeb;
}

* { box-sizing: border-box; }

/* Cases a cocher, boutons radio et surlignage d'un texte selectionne : couleur de la marque plutot que le bleu du navigateur. */
:root { accent-color: var(--accent); }
::selection { background: var(--accent); color: #fff; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main.conteneur { padding: 2rem 1rem 4rem; }
.conteneur { max-width: 900px; margin: 0 auto; }
.conteneur.large { max-width: 1180px; }
.conteneur.etroit { max-width: 420px; padding-top: 4rem; }

h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.sous-titre { color: var(--doux); margin: 0 0 1.5rem; }
.doux { color: var(--doux); font-size: .9rem; }

/* En-tete et menu */
.entete { background: var(--carte); border-bottom: 1px solid var(--bord); }
/* Ordinateur : deux lignes. En haut le titre et le compte ; dessous, a gauche sous le titre, le menu deroulant puis les acces rapides. */
.entete-ligne { display: flex; align-items: center; column-gap: 1.5rem; row-gap: 0; padding: .7rem 1rem 0; flex-wrap: wrap; }
.marque { order: 1; display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--texte); text-decoration: none; }
.marque { font-size: 1.2rem; }
.marque img { display: block; width: 44px; height: 44px; }
.logo-connexion { display: block; width: 320px; max-width: 100%; height: auto; margin: 0 0 1.5rem; }
/* « Mot de passe oublié ? » sous le champ du mot de passe, a droite. */
.oubli { margin: -.25rem 0 1.1rem; text-align: right; font-size: .9rem; }
.menu { order: 3; flex: 1 0 100%; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; margin-top: .6rem; padding: .5rem 0 .65rem; border-top: 1px solid var(--bord); }
.menu a { padding: .4rem .75rem; border-radius: 6px; color: var(--texte); text-decoration: none; }
.menu a:hover { background: var(--fond); }
.menu a.actif { background: var(--accent); color: #fff; }
/* Menu deroulant : le bouton est le premier du menu, a gauche sous le titre ; la liste s'ouvre juste dessous (assets/app.js). */
.menu-plus { position: relative; }
.menu .menu-plus-bouton { margin-right: .6rem; padding: .4rem .85rem; border: 1px solid var(--bord); border-radius: 6px; background: var(--carte); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer; }
.menu .menu-plus-bouton:hover, .menu .menu-plus.ouvert .menu-plus-bouton { background: var(--fond); }
.menu .menu-plus .menu-plus-bouton.actif, .menu .menu-plus.ouvert .menu-plus-bouton.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.menu-plus-liste { display: none; position: absolute; top: calc(100% + .35rem); left: 0; z-index: 40; min-width: 12rem; padding: .3rem; flex-direction: column; gap: .1rem;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.menu-plus.ouvert .menu-plus-liste { display: flex; }
.menu-plus-liste a { display: block; white-space: nowrap; }
/* Sans JavaScript : pas de bouton, les liens restent affiches a la suite des autres. */
html:not(.js) .menu-plus-bouton { display: none; }
html:not(.js) .menu-plus { display: contents; }
html:not(.js) .menu-plus-liste { display: contents; }
.deconnexion { order: 2; margin-left: auto; display: flex; align-items: center; gap: .75rem; margin-top: 0; margin-bottom: 0; margin-right: 0; }
.entete-corps { display: contents; }   /* ordinateur : les enfants se rangent directement dans la ligne d'en-tete */
.menu-bouton { display: none; }

.titre-page { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.titre-page .sous-titre { margin: 0; }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

/* Formulaires */
label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 .3rem; }
.aide { font-weight: 400; color: var(--doux); font-size: .82rem; }

input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
input[type=search], input[type=url], input[type=date], select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--bord);
  border-radius: 7px;
  font: inherit;
  background: #fff;
  color: inherit;
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input[readonly] { background: var(--fond); }

.champ { margin-bottom: 1rem; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grille-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1rem; }
.grille-cp { display: grid; grid-template-columns: 9rem 1fr 6rem; gap: 0 1rem; }
.case { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.case input { width: auto; margin: 0; }
.choix-type { display: flex; gap: 1.5rem; margin-bottom: 1rem; }
.avec-bouton { display: flex; gap: .5rem; }
.avec-bouton input { flex: 1; }

/* Champ mot de passe avec son œil « afficher / masquer » (assets/oeil.js entoure le champ d'une zone et ajoute le bouton ; sans JavaScript, rien de tout cela n'existe). */
.champ-mdp { position: relative; display: block; }
.avec-bouton > .champ-mdp { flex: 1; min-width: 0; }
.champ-mdp > input.mdp { padding-right: 2.9rem; }
.champ-mdp > .oeil-mdp {
  position: absolute; top: 50%; right: .3rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--doux);
}
.champ-mdp > .oeil-mdp:hover { background: var(--fond); color: var(--texte); }
.champ-mdp > .oeil-mdp[aria-pressed="true"] { color: var(--accent); }
.champ-mdp > .oeil-mdp:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.oeil-mdp svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* Edge ajoute son propre œil dans un champ mot de passe : on garde le nôtre, partout le même. */
input[type=password]::-ms-reveal, input[type=password]::-ms-clear { display: none; }
@media (pointer: coarse) { .champ-mdp > .oeil-mdp { width: 2.75rem; height: 2.75rem; right: .1rem; } .champ-mdp > input.mdp { padding-right: 3.1rem; } }
@media print { .oeil-mdp { display: none; } }

.actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

button, .bouton {
  display: inline-block;
  padding: .65rem 1.1rem;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
button:hover, .bouton:hover { background: var(--accent-fonce); }
button:disabled { opacity: .6; cursor: wait; }
.bouton.secondaire, button.secondaire { background: #fff; color: var(--texte); border: 1px solid var(--bord); }
.bouton.secondaire:hover, button.secondaire:hover { background: var(--fond); }
.bouton.danger, button.danger { background: #fff; color: var(--erreur); border: 1px solid var(--erreur); }
.bouton.danger:hover, button.danger:hover { background: var(--erreur-fond); }
.petit { font-size: .85rem; padding: .4rem .75rem; }

.message { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; font-size: .93rem; }
.message ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.message.ok { background: var(--ok-fond); color: var(--ok); }
.message.erreur { background: var(--erreur-fond); color: var(--erreur); }
.message.alerte { background: var(--alerte-fond); color: var(--alerte); }

/* Tableaux */
.tableau-conteneur { overflow-x: auto; }
table.liste { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.liste th, table.liste td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
table.liste th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--doux); font-weight: 600; }
table.liste tr:hover td { background: #fafbfc; }
table.liste td.nombre, table.liste th.nombre { text-align: right; white-space: nowrap; }
table.liste a { color: var(--texte); font-weight: 600; text-decoration: none; }
table.liste a:hover { color: var(--accent); }
table.liste a.bouton { color: #fff; }
table.liste a.bouton.secondaire { color: var(--texte); }
.vide { text-align: center; color: var(--doux); padding: 2rem; }
.nowrap { white-space: nowrap; }

.filtres { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtres input[type=search] { flex: 1; min-width: 14rem; }
.filtres select { width: auto; }

/* Pagination des longues listes (lib/pagination.php) : « ‹ Precedent · Page 3 / 61 · Suivant › » sous le tableau */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1rem 0 2rem; }
.pagination-etat { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.4; }
.pagination-etat .doux { font-size: .85rem; }
.pagination .inactif { opacity: .45; cursor: default; }
.pagination .inactif:hover { background: #fff; }

.etiquette { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; background: var(--fond); color: var(--doux); border: 1px solid var(--bord); }
.etiquette.pro { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* Tuiles de l'accueil */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 1.1rem 1.25rem; }
.tuile .valeur { font-size: 1.8rem; font-weight: 700; }
.tuile .libelle { color: var(--doux); font-size: .9rem; }

/* Resultats de la recherche d'entreprise */
.resultats-siren { border: 1px solid var(--bord); border-radius: 8px; margin: -.5rem 0 1rem; max-height: 18rem; overflow-y: auto; }
.resultats-siren button { display: block; width: 100%; text-align: left; background: #fff; color: var(--texte); border: 0; border-bottom: 1px solid var(--bord); border-radius: 0; padding: .6rem .8rem; font-weight: 400; white-space: normal; }
.resultats-siren button:hover { background: var(--fond); }
.resultats-siren button:last-child { border-bottom: 0; }
.resultats-siren strong { display: block; }
.resultats-siren .info { padding: .6rem .8rem; color: var(--doux); font-size: .9rem; }

/* Statuts des documents */
.etiquette.statut-brouillon { background: #f3f4f6; color: #4b5563; }
.etiquette.statut-finalise { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.etiquette.statut-envoye { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.etiquette.statut-accepte { background: var(--ok-fond); color: var(--ok); border-color: #bbf7d0; }
.etiquette.statut-refuse { background: var(--erreur-fond); color: var(--erreur); border-color: #fecaca; }
.etiquette.statut-expire { background: var(--alerte-fond); color: var(--alerte); border-color: #fde68a; }
.etiquette.statut-validee { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.etiquette.statut-envoyee { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.etiquette.statut-en_retard { background: var(--erreur-fond); color: var(--erreur); border-color: #fecaca; }
.etiquette.statut-annulee { background: #f3f4f6; color: #4b5563; text-decoration: line-through; }

/* Onglets factures / avoirs */
.onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--bord); margin-bottom: 1rem; }
.onglets a { padding: .5rem 1rem; color: var(--doux); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets a.actif { color: var(--texte); font-weight: 600; border-bottom-color: var(--accent); }

/* Tableau de bord : couleurs des graphiques (palette de reference, serie unique en bleu) */
.grille-graphiques {
  --serie-1: #2a78d6;
  --serie-1-fort: #1c5cab;
  --grille: #e1e0d9;
  --axe: #c3c2b7;
  --encre-douce: #898781;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem;
}
/* Presentation des trois formules (accueil de la societe de demonstration, public/index.php) */
/* Section repliee a l'ouverture de la page : le titre, plus gros et dans une couleur propre (ni le noir du texte ni la couleur de la societe), change
   lentement de couleur pour inciter a le deplier et a aller voir les offres. L'effet s'arrete quand on survole le titre, quand la section est
   depliee, et pour qui a demande moins d'animations. */
.formules summary { display: block; width: fit-content; margin: 0 0 .75rem; padding: .15rem 0; cursor: pointer; list-style: none; color: #0f766e; animation: formules-couleur 6s ease-in-out infinite; }
.formules summary::-webkit-details-marker { display: none; }
.formules summary h2 { display: inline; margin: 0; font-size: 1.5rem; color: inherit; }
.formules summary::after { content: " ▾"; font-size: 1.3rem; }
.formules:not([open]) summary::after { content: " ▸ Voir les offres"; font-size: 1rem; font-weight: 600; }
.formules[open] summary { animation: none; }
.formules summary:hover, .formules summary:focus-visible { animation-play-state: paused; text-decoration: underline; text-underline-offset: .2em; }
@keyframes formules-couleur { 0%, 100% { color: #0f766e; } 33% { color: #1d4ed8; } 66% { color: #7c3aed; } }
@media (prefers-reduced-motion: reduce) { .formules summary { animation: none; } }
/* Trois cartes cote a cote, une par formule, sur toute la largeur de la page comme le bandeau des compteurs ; le prix fait partie de
   l'en-tete de la carte. Sur telephone elles restent cote a cote (defilement horizontal) au lieu de s'empiler. Le badge est pose sur le bord
   pour ne pas decaler le titre (d'ou le haut de marge). */
.formules-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: .5rem 0 1.5rem; padding-top: 1.2rem; }
.formule { position: relative; display: flex; flex-direction: column; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); font-size: .9rem; }
/* Formule recommandee : cadre et en-tete a la couleur de la societe, carte legerement relevee. */
.formule-vedette { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 20px rgba(16, 24, 40, .18); transform: translateY(-.35rem); }
.formule-vedette .formule-tete { background: var(--accent); border-bottom-color: var(--accent); }
.formule-vedette .formule-tete h3, .formule-vedette .formule-marque, .formule-vedette .formule-prix, .formule-vedette .formule-prix-montant,
.formule-vedette .formule-prix-an, .formule-vedette .formule-prix-an strong { color: #fff; }
.formule-vedette .formule-badge { background: var(--texte); }.formule-tete { padding: .9rem 1.1rem .75rem; background: var(--fond); border-bottom: 1px solid var(--bord); border-radius: 10px 10px 0 0; }
.formule-badge { position: absolute; top: -.65rem; right: .9rem; padding: .05rem .6rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 600; }
.formule h3 { margin: 0; font-size: 1.15rem; }
.formule-marque { color: var(--doux); font-weight: 400; }
.formule-prix { margin: .25rem 0 0; color: var(--doux); font-size: .88rem; }
.formule-prix-montant { color: var(--texte); font-size: 1.9rem; line-height: 1.15; }
.formule-prix-an { margin: 0; color: var(--doux); font-size: .82rem; }
.formule-prix-an strong { color: var(--texte); }
/* Offre de lancement (lib/formules.php, formules_offre()) : un bandeau toujours visible au-dessus de la section repliee, puis dans la carte concernee l'ancien prix barre,
   le prix de l'offre et sa date de fin. */
.formules-offre { margin: 0 0 .75rem; padding: .55rem .85rem; background: var(--ok-fond); color: var(--texte); border: 1px solid var(--ok); border-left-width: 5px; border-radius: 8px; font-size: .92rem; line-height: 1.45; }
.formules-offre strong { color: var(--ok); }
.formule-prix-avant { font-size: .95rem; font-weight: 600; text-decoration: line-through; margin-right: .15rem; }
.formule-offre { margin: .2rem 0 0; color: var(--ok); font-size: .78rem; font-weight: 700; }
.formule-vedette .formule-prix-avant, .formule-vedette .formule-offre { color: #fff; }
/* Option « societe supplementaire » : une ligne sous les trois cartes. */
.formules-option { margin: .9rem 0 0; padding: .6rem .85rem; border: 1px dashed var(--accent); border-radius: 8px; font-size: .9rem; line-height: 1.45; color: var(--texte); }
.formules .sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.formule-corps { flex: 1; padding: .8rem 1.1rem .95rem; }
.formule-accroche { margin: 0 0 .5rem; font-weight: 600; }
.formule-reprend { margin: 0 0 .25rem; color: var(--doux); font-size: .82rem; }
.formule-liste { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.formule-liste li { position: relative; padding: .12rem 0 .12rem 1.15rem; }
.formule-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
@media (max-width: 640px) { .formules-grille { grid-template-columns: repeat(3, 13.5rem); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .5rem; } .formule { scroll-snap-align: start; } }

/* Carte « Marge HT » de l'accueil (assets/app.js : un panneau a la fois) */
.marge-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.marge-haut h2 { margin: 0 0 .25rem; }
.marge-haut p { max-width: 46rem; }
.marge-choix { display: none; gap: 0; }
.js .marge-choix { display: inline-flex; }
.marge-choix button { border-radius: 0; margin-left: -1px; min-width: 5.2rem; }
.marge-choix button:first-child { border-radius: 7px 0 0 7px; margin-left: 0; }
.marge-choix button:last-child { border-radius: 0 7px 7px 0; }
.marge-choix button.actif { background: var(--accent); border-color: var(--accent); color: #fff; position: relative; }
.marge-panneau { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem 2.5rem; flex-wrap: wrap; padding: .9rem 0 .2rem; border-top: 1px solid var(--bord); }
.marge-panneau[hidden] { display: none; }
.marge-nom { font-weight: 600; }
.marge-valeur { font-size: 2.1rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.marge-valeur small { font-size: .9rem; font-weight: 600; color: var(--doux); }
.marge-vert { color: var(--ok); }
.marge-orange { color: #f97316; }   /* orange vif, plus clair que l'orange d'alerte (--alerte) des messages */
.marge-rouge { color: var(--erreur); }
.marge-detail { display: flex; gap: 1.5rem 2.25rem; flex-wrap: wrap; margin: 0; }
.marge-detail div { min-width: 8rem; }
.marge-detail dt { font-size: .8rem; color: var(--doux); }
.marge-detail dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tuile.lien { text-decoration: none; color: inherit; }
.tuile.lien:hover { border-color: var(--accent); }
.hausse { color: #006300; font-weight: 600; }
.baisse { color: var(--erreur); font-weight: 600; }
svg.graphique { width: 100%; height: auto; display: block; overflow: visible; }
svg.graphique .grille { stroke: var(--grille); stroke-width: 1; }
svg.graphique .axe { stroke: var(--axe); stroke-width: 1; }
svg.graphique .graduation { fill: var(--encre-douce); font-size: 11px; font-variant-numeric: tabular-nums; }
svg.graphique .graduation.annee { font-weight: 600; }
svg.graphique .etiquette-valeur { fill: var(--texte); font-size: 11px; font-weight: 600; }
svg.graphique .colonne { fill: var(--serie-1); pointer-events: none; }
svg.graphique .survol { fill: transparent; cursor: default; outline: none; }
svg.graphique .survol.actif, svg.graphique .survol:focus { fill: rgba(11, 11, 11, .05); }
.infobulle { position: fixed; z-index: 10; transform: translateY(-100%); background: var(--texte); color: #fff; font-size: .82rem;
  padding: .35rem .6rem; border-radius: 6px; pointer-events: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
details.donnees { margin-top: .5rem; font-size: .88rem; }
details.donnees summary { cursor: pointer; color: var(--doux); }
.barres { display: flex; flex-direction: column; gap: .5rem; }
.barre-ligne { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 7rem; gap: .75rem; align-items: center; color: inherit; text-decoration: none; padding: .15rem 0; }
.barre-ligne:hover .barre-nom { color: var(--accent); }
.barre-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-piste { height: 16px; }
.barre { display: block; height: 16px; background: #2a78d6; border-radius: 0 4px 4px 0; }
.barre-valeur { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .grille-graphiques { grid-template-columns: 1fr; } }

/* Reglements d'une facture */
.colonne-principale { min-width: 0; }
.reglements h3 { font-size: 1rem; margin: 0 0 .75rem; }
.solde-resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.solde-resume > div { background: var(--fond); border-radius: 8px; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .15rem; }
.solde-resume .libelle { font-size: .82rem; color: var(--doux); }
.solde-resume .montant { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.solde-resume .reste { border: 2px solid var(--bord); background: var(--carte); }
.solde-resume .reste .montant { font-size: 1.4rem; font-weight: 700; }
.solde-resume .reste-du { border-color: var(--accent); }
.solde-resume .reste-retard { border-color: var(--erreur); background: var(--erreur-fond); }
.solde-resume .reste-retard .montant { color: var(--erreur); }
.solde-resume .reste-solde { border-color: #bbf7d0; background: var(--ok-fond); }
.solde-resume .reste-solde .montant { color: var(--ok); }
.solde-resume .reste-trop-percu { border-color: #fde68a; background: var(--alerte-fond); }
.solde-resume .reste-trop-percu .montant { color: var(--alerte); }
.jauge { height: 8px; background: var(--fond); border-radius: 99px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.etat-paiement { margin: .5rem 0 1.25rem; font-size: .93rem; }
.etat-paiement .ok { color: var(--ok); font-weight: 600; }
.etat-paiement .retard { color: var(--erreur); font-weight: 600; }
.table-reglements tfoot th { font-size: .93rem; text-transform: none; letter-spacing: 0; color: var(--texte); border-top: 2px solid var(--bord); border-bottom: 0; }
.form-reglement { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--bord); }
/* Le nombre de champs par ligne suit la largeur de la carte (et non celle de l'ecran) ; le bouton a sa propre ligne. */
.form-reglement-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0 .75rem; align-items: start; }
.form-reglement-champs .champ { margin-bottom: .5rem; min-width: 0; }
.form-reglement-champs .champ-bouton { grid-column: 1 / -1; margin: .25rem 0 0; }
.form-reglement-champs label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-reglement input.nombre { text-align: right; }
.form-reglement p.doux { margin: .25rem 0 0; font-size: .85rem; }

/* Assistant d'import */
ol.etapes-import { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; counter-reset: etape; flex-wrap: wrap; }
ol.etapes-import li { counter-increment: etape; padding: .35rem .8rem; border-radius: 99px; background: var(--carte); border: 1px solid var(--bord); color: var(--doux); font-size: .88rem; }
ol.etapes-import li::before { content: counter(etape) ". "; font-weight: 600; }
ol.etapes-import li.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
ol.etapes-import li.fait { color: var(--ok); border-color: #bbf7d0; background: var(--ok-fond); }
table.correspondance td { vertical-align: middle; }
table.correspondance select { min-width: 14rem; }
table.correspondance td.exemples { font-size: .85rem; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Double authentification */
ol.etapes { padding-left: 1.2rem; margin: 0 0 1rem; }
ol.etapes li { margin-bottom: .6rem; }
.cle-totp { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; letter-spacing: .08em; background: var(--fond);
  border: 1px solid var(--bord); border-radius: 6px; padding: .5rem .75rem; margin: .4rem 0; user-select: all; word-break: break-all; }
/* Recherche en ligne d'un EAN (assets/ean-recherche.js) */
.ean-recherche { margin-top: .35rem; font-size: .9rem; }
.ean-proposition { margin-top: .4rem; padding: .6rem .75rem; background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; }
.ean-proposition .ean-actions { margin-top: .5rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.qr-totp { margin: .5rem 0; }
.qr-totp svg { display: block; width: 12rem; max-width: 100%; height: auto; border: 1px solid var(--bord); border-radius: 6px; }
.ligne-deduction td { background: #fafbfc; }

/* Annulation d'une facture */
form.annulation { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bord); }
form.annulation textarea { min-height: 3.5rem; margin-bottom: .5rem; }
form.annulation button { width: 100%; }

/* Editeur de lignes */
table.editeur td { padding: .4rem .35rem; }
table.editeur input, table.editeur select, table.editeur textarea { padding: .4rem .5rem; font-size: .9rem; }
table.editeur .col-designation { min-width: 18rem; }
table.editeur .col-designation > * + * { margin-top: .3rem; }
table.editeur textarea { min-height: 2.2rem; }
table.editeur input.nombre { text-align: right; min-width: 4.5rem; }
table.editeur td:nth-child(3) input { min-width: 5rem; }
table.editeur .petit-select { width: auto; font-size: .8rem; padding: .2rem .4rem; }
table.editeur select[data-champ="taux_tva"] { min-width: 5rem; }
table.editeur .total-ligne { font-weight: 600; padding-top: .9rem; }
table.editeur .marge-info { font-size: .8rem; color: var(--doux); white-space: nowrap; }
table.totaux tr.marge-ligne th, table.totaux tr.marge-ligne td { font-size: .85rem; color: var(--doux); padding-top: .7rem; border-top: 1px dashed var(--bord); }
table.editeur .ligne-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem; }
table.editeur .achat-info { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; font-weight: 400; color: var(--doux); }
table.editeur .achat-info input { width: 6.5rem; min-width: 0; color: var(--doux); }
/* N° de serie d'une ligne (volet replie tant qu'il est vide) et mise en evidence d'une ligne dont la quantite vient d'etre augmentee (assets/editeur.js) */
table.editeur .series-ligne summary { cursor: pointer; font-size: .8rem; color: var(--doux); }
table.editeur .series-ligne[open] summary { margin-bottom: .3rem; }
table.editeur .series-compte.manque { color: var(--alerte); font-weight: 600; }
@keyframes ligne-signalee { from { background: #fef9c3; } to { background: transparent; } }
table.editeur tr.ligne-signalee td { animation: ligne-signalee 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { table.editeur tr.ligne-signalee td { animation: none; background: #fef9c3; } }
table.editeur .col-actions { white-space: nowrap; }
.ligne-texte td { background: #fafbfc; }
/* Sous-total d'un titre (apercu, assets/editeur.js) : une ligne sans champ, jamais envoyee */
table.editeur tr.sous-total td { background: #fafbfc; font-weight: 600; border-top: 1px dashed var(--bord); }
table.editeur tr.sous-total td:first-child { text-align: right; color: var(--doux); }
.texte-fort { font-weight: 600; }
button.icone { padding: .25rem .5rem; background: #fff; color: var(--doux); border: 1px solid var(--bord); font-weight: 400; }
button.icone:hover { background: var(--fond); color: var(--texte); }
button.icone.danger { color: var(--erreur); }

.totaux-zone { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem; }
.totaux-saisie { flex: 1; min-width: 16rem; }
table.totaux { border-collapse: collapse; min-width: 20rem; margin-left: auto; }
table.totaux th { text-align: left; font-weight: 400; color: var(--doux); padding: .3rem 1.5rem .3rem 0; }
table.totaux td { text-align: right; padding: .3rem 0; white-space: nowrap; }
table.totaux tr.fort th, table.totaux tr.fort td { font-weight: 700; color: var(--texte); border-top: 1px solid var(--bord); }
table.totaux tr.grand td { font-size: 1.2rem; }

/* Fiche d'un document */
.grille-fiche { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
dl.infos { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 1rem; font-size: .93rem; }
dl.infos dt { color: var(--doux); }
dl.infos dd { margin: 0; }
.actions-colonne { display: flex; flex-direction: column; gap: .5rem; }
.actions-colonne button { width: 100%; white-space: normal; line-height: 1.3; text-align: center; }   /* un libelle long passe a la ligne au lieu de depasser de la carte */
ul.historique { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
ul.historique li { padding: .35rem 0; border-bottom: 1px solid var(--bord); }
ul.historique li:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .grille-fiche { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .grille-2, .grille-3, .grille-cp { grid-template-columns: 1fr; }
  .entete-ligne { gap: .75rem; }
}

/* Liste deroulante avec recherche (assets/app.js) */
.recherche { position: relative; }
.recherche-liste { position: absolute; z-index: 20; left: 0; right: 0; max-height: 18rem; overflow-y: auto; margin: 2px 0 0; padding: .25rem 0;
  list-style: none; background: #fff; border: 1px solid var(--bord); border-radius: 7px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.recherche-liste[hidden] { display: none; }
.recherche-liste li { padding: .45rem .75rem; cursor: pointer; font-size: .92rem; }
.recherche-liste li.actif, .recherche-liste li:hover { background: var(--fond); }
.recherche-liste li.aucun { color: var(--doux); cursor: default; }
.recherche-liste .recherche-indice { color: var(--doux); font-size: .85em; }
.actions .recherche { min-width: 22rem; }

/* Stock (lot 8) */
.stock-info { display: block; margin-top: .3rem; font-size: .8rem; color: var(--doux); }
.stock-info[hidden] { display: none; }
.stock-info.manque { color: var(--alerte); font-weight: 600; }
.valider-avoir { display: inline-flex; align-items: center; gap: .75rem; }
.etiquette.stock-ok { background: var(--ok-fond); color: var(--ok); border-color: #bbf7d0; }
.etiquette.stock-alerte { background: var(--alerte-fond); color: var(--alerte); border-color: #fde68a; }
.etiquette.stock-rupture, .etiquette.stock-negatif { background: var(--erreur-fond); color: var(--erreur); border-color: #fecaca; }
td.qte-plus { color: var(--ok); font-weight: 600; }
td.qte-moins { color: var(--erreur); font-weight: 600; }
.pour-entree[hidden] { display: none; }
table.inventaire input.compte { width: 7rem; text-align: right; }
table.inventaire td.ecart { font-weight: 600; white-space: nowrap; }
table.inventaire td.ecart.plus { color: var(--ok); }
table.inventaire td.ecart.moins { color: var(--erreur); }
#form-mouvement .choix-type { flex-wrap: wrap; row-gap: .5rem; }
.etiquette.stock-ok, .etiquette.stock-alerte, .etiquette.stock-rupture, .etiquette.stock-negatif { white-space: nowrap; }

/* Propositions de ville sous le champ Ville (assets/codepostal.js) */
.suggestions-ville { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .85rem; }
.suggestions-ville button { background: #fff; color: var(--texte); border: 1px solid var(--bord); border-radius: 999px; padding: .15rem .7rem; font-weight: 400; font-size: .85rem; }
.suggestions-ville button:hover { background: var(--fond); border-color: var(--accent); }

/* En-tetes de liste triables (lib/tri.php) */
table.liste th a { color: inherit; text-decoration: none; white-space: nowrap; }
table.liste th a:hover { color: var(--texte); }
table.liste th a .tri-fleche { display: inline-block; margin-left: .15rem; font-size: .7rem; opacity: .35; }
table.liste th a:hover .tri-fleche { opacity: .8; }
table.liste th[aria-sort] a { color: var(--texte); }
table.liste th[aria-sort] .tri-fleche { opacity: 1; color: var(--accent); }

/* Panneau d'instruments de l'accueil : objectifs de CA en cadrans a aiguille (lib/tableau.php, tb_svg_compteur) */
.console { background: linear-gradient(180deg, #121a22, #0b1117); border: 1px solid #243140; border-radius: 12px; padding: .7rem 1rem 1rem; margin-bottom: 1.5rem; color: #cfd8e0; }
.console-haut { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.console-haut h2 { margin: 0; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #8fa1b3; font-weight: 600; }
.console-lien { color: #8fa1b3; font-size: .75rem; border: 1px solid #2d3b4a; border-radius: 6px; padding: .12rem .6rem; text-decoration: none; }
.console-lien:hover { color: #fff; border-color: #5b7389; }
.console-corps { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.75rem; }
.instruments { display: grid; grid-template-columns: repeat(4, 150px); gap: .65rem; }
.instrument { background: linear-gradient(180deg, #17212b, #101820); border: 1px solid #263544; border-radius: 10px; padding: .45rem .3rem .5rem; text-align: center; }
.instrument-nom { margin-top: .1rem; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #b4c2d0; font-weight: 600; }
.instrument-detail, .instrument-reste { font-size: .62rem; color: #7b8da0; line-height: 1.35; }
.instrument-etat { font-size: .68rem; font-weight: 600; line-height: 1.5; }
.instrument-vert .instrument-etat { color: #33ff66; }
.instrument-orange .instrument-etat { color: #ffb000; }
.instrument-rouge .instrument-etat { color: #ff5470; }
.console-legende { list-style: none; margin: 0; padding: 0; font-size: .72rem; color: #8fa1b3; line-height: 1.9; }
.console-note { margin-top: .3rem; color: #6a7c8e; }
.pastille { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; vertical-align: -.05rem; }
.pastille-vert { background: #33ff66; } .pastille-orange { background: #ffb000; } .pastille-rouge { background: #ff3355; }
.pastille-rythme { background: #2ee6ff; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
svg.compteur-svg { display: block; width: 118px; height: 118px; margin: 0 auto; }
svg.compteur-svg .zone { fill: none; stroke-width: 6; stroke-linecap: butt; }
svg.compteur-svg .zone-rouge { stroke: #ff3355; }
svg.compteur-svg .zone-orange { stroke: #ffb000; }
svg.compteur-svg .zone-vert { stroke: #33ff66; }
svg.compteur-svg .graduation { stroke: #7f93a6; stroke-width: .9; }
svg.compteur-svg .graduation-grande { stroke: #c9d5e0; stroke-width: 1.7; }
svg.compteur-svg .repere { fill: #a9b8c6; font: 600 9px ui-monospace, Consolas, "Courier New", monospace; }
svg.compteur-svg .legende { fill: #6f8294; font: 600 7px system-ui, sans-serif; letter-spacing: .18em; }
svg.compteur-svg .lecture { font: 700 13px ui-monospace, Consolas, "Courier New", monospace; }
svg.compteur-svg .lecture-vert { fill: #33ff66; }
svg.compteur-svg .lecture-orange { fill: #ffb000; }
svg.compteur-svg .lecture-rouge { fill: #ff5470; }
svg.compteur-svg .aiguille { transform-origin: 80px 80px; transform: rotate(var(--a)); animation: balayage .9s cubic-bezier(.2, .8, .2, 1) both; }
svg.compteur-svg .aiguille line { stroke: #f2f6fa; stroke-width: 2.2; stroke-linecap: round; }
svg.compteur-svg .moyeu { fill: #c7d2dc; }
svg.compteur-svg .moyeu-centre { fill: #0e151c; }
svg.compteur-svg .rythme { fill: #2ee6ff; }
@keyframes balayage { from { transform: rotate(-135deg); } }
@media (prefers-reduced-motion: reduce) { svg.compteur-svg .aiguille { animation: none; } }
@media (max-width: 700px) { .instruments { grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: center; } }

/* ===== Version mobile (telephone et petite tablette) =====
   Meme page, meme code : seule la mise en forme change. Le menu se replie derriere un bouton, les listes deviennent des
   fiches (une par ligne), l'editeur de lignes s'empile, les champs font 16 px (sinon iPhone zoome a la saisie). */
@media (max-width: 900px) {
  .entete { position: sticky; top: 0; z-index: 30; }
  .entete-ligne { justify-content: space-between; gap: .5rem; padding: .5rem 1rem; }
  .entete-corps { display: block; flex: 1 0 100%; }
  .js .menu-bouton { display: inline-block; }
  .js .entete-corps { display: none; }
  .js .entete.ouvert .entete-corps { display: block; }
  .menu { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .4rem 0 .75rem; padding: 0; border-top: 0; }
  .menu a { padding: .75rem .8rem; background: var(--fond); text-align: center; font-weight: 600; }
  .menu a.actif { background: var(--accent); }
  /* Telephone : le menu est deja replie derriere le bouton 'Menu', la liste du menu deroulant s'affiche a la suite des liens. */
  .menu .menu-plus, .menu .menu-plus-liste { display: contents !important; }
  .menu .menu-plus-bouton { display: none; }
  .menu-plus-liste a { white-space: normal; order: 2; }   /* les acces rapides d'abord, puis le contenu du menu deroulant */
  .menu > a { order: 1; }
  .entete .deconnexion { justify-content: space-between; padding-top: .75rem; border-top: 1px solid var(--bord); }
  .entete .deconnexion button { min-height: 40px; }
}

@media (max-width: 700px) {
  main.conteneur { padding: 1rem .75rem 3rem; }
  .conteneur.etroit { padding-top: 1.5rem; }
  h1 { font-size: 1.35rem; }
  .carte { padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
  .titre-page { margin-bottom: 1rem; }
  .titre-page > .bouton, .titre-page > button { width: 100%; text-align: center; }
  .titre-page > .actions { width: 100%; }

  /* Champs et boutons faciles a toucher ; 16 px evite le zoom automatique d'iOS sur un champ. */
  input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
  input[type=search], input[type=url], input[type=date], select, textarea { font-size: 16px; padding: .7rem .75rem; }
  button, .bouton { padding: .8rem 1.1rem; min-height: 44px; }
  .petit { min-height: 38px; padding: .5rem .85rem; }
  button.icone { min-height: 40px; min-width: 40px; }
  .actions { gap: .5rem; }
  .actions > button, .actions > .bouton, .actions > form { flex: 1 1 11rem; text-align: center; white-space: normal; }
  .actions > form > button { width: 100%; }
  .actions .recherche { min-width: 0; flex: 1 1 100%; }
  .filtres input[type=search] { flex: 1 1 100%; min-width: 0; }
  .filtres select { flex: 1 1 9rem; }
  .filtres button { flex: 1 1 6rem; }
  /* Pagination : l'etat (page, total) au-dessus, deux gros boutons cote a cote dessous */
  .pagination { flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
  .pagination-etat { order: -1; flex: 1 0 100%; }
  .pagination .bouton { flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .choix-type { flex-wrap: wrap; gap: .75rem 1.5rem; }
  .onglets { overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; }
  .onglets.compta-onglets { overflow: visible; white-space: normal; }   /* le menu "Plus" deborde de la barre : les onglets passent a la ligne */
  .compta-onglets a { padding: .45rem .55rem; font-size: .9rem; }
  .compta-onglets .menu-plus { margin-bottom: .2rem; }
  .compta-onglets .menu-plus-bouton { padding: .3rem .6rem; font-size: .9rem; }

  /* Accueil */
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .tuile { padding: .8rem; }
  .tuile .valeur { font-size: 1.3rem; }
  .barre-ligne { grid-template-columns: minmax(4.5rem, 8rem) 1fr 5.5rem; gap: .5rem; font-size: .85rem; }
  .console { padding: .6rem .6rem .8rem; }
  .console-corps { justify-content: center; }

  /* Totaux et fiche d'un document */
  .totaux-zone { gap: 1rem; }
  table.totaux { min-width: 0; width: 100%; margin-left: 0; }
  table.totaux th { padding-right: .75rem; }
  dl.infos { grid-template-columns: auto 1fr; gap: .3rem .75rem; }
  .solde-resume { grid-template-columns: 1fr 1fr; }
  .form-reglement .champ-bouton button { width: 100%; }
  table.correspondance select { min-width: 0; width: 100%; }
  ol.etapes-import li { font-size: .8rem; padding: .3rem .6rem; }

  /* Listes : une fiche par ligne (les libelles viennent des en-tetes, assets/app.js ajoute .en-fiches) */
  .tableau-conteneur { overflow-x: visible; }
  table.en-fiches, table.en-fiches tbody, table.en-fiches tfoot, table.en-fiches tr, table.en-fiches td { display: block; }
  table.en-fiches thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* masque, mais lu par les lecteurs d'ecran */
  table.en-fiches tbody tr { position: relative; padding: .65rem .9rem; border-bottom: 1px solid var(--bord); line-height: 1.4; }
  table.en-fiches tbody tr:last-child { border-bottom: 0; }
  table.en-fiches td { padding: .1rem 0; border: 0; text-align: right; overflow: hidden; font-size: .92rem; }
  table.en-fiches td::before { content: attr(data-label); float: left; margin-right: 1rem; color: var(--doux); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.9; }
  /* Valeurs courtes (montants, dates) : cote a cote sur une meme ligne, libelle devant */
  table.en-fiches td.nombre, table.en-fiches td.nowrap { display: inline-block; margin-right: 1.1rem; text-align: left; overflow: visible; }
  table.en-fiches td.nombre::before, table.en-fiches td.nowrap::before { float: none; display: inline; margin-right: .35rem; }
  table.en-fiches td:first-child, table.en-fiches td[colspan] { display: block; margin: 0; text-align: left; font-size: 1.02rem; }
  table.en-fiches td:first-child::before, table.en-fiches td[colspan]::before, table.en-fiches td[data-label=""]::before { content: none; }
  table.en-fiches td[data-label=""] { display: block; margin: 0; text-align: right; overflow: visible; }   /* colonne d'actions (ex. bouton supprimer) */
  /* Quand le vrai titre de la fiche n'est pas la premiere colonne (ex. designation d'un article), la premiere devient une petite reference */
  table.en-fiches td.fiche-titre { display: block; margin: 0; text-align: left; font-weight: 600; font-size: 1.02rem; overflow: visible; }
  table.en-fiches td.fiche-titre::before { content: none; }
  table.en-fiches tbody tr:has(td.fiche-titre) td:first-child { font-size: .78rem; color: var(--doux); }
  /* Pastille de statut (td.fiche-coin) : en haut a droite de la fiche */
  table.en-fiches td.fiche-coin { position: absolute; top: .6rem; right: .9rem; display: block; margin: 0; padding: 0; overflow: visible; }
  table.en-fiches td.fiche-coin::before { content: none; }
  table.en-fiches tbody tr:has(td.fiche-coin) td:first-child { padding-right: 6.5rem; }
  table.en-fiches td:empty { display: none; }
  table.en-fiches tbody tr:hover td { background: transparent; }
  table.en-fiches td.vide { text-align: center; }
  table.en-fiches tfoot tr { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-top: 2px solid var(--bord); }
  table.en-fiches tfoot th { border: 0; padding: 0; }
  table.en-fiches tfoot th:empty { display: none; }

  /* Editeur de lignes : chaque ligne devient un bloc (designation, 6 champs sur 2 colonnes, total, boutons) */
  table.editeur, table.editeur tbody { display: block; }
  table.editeur thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.editeur tr.ligne { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .7rem; padding: .9rem .25rem; border-bottom: 2px solid var(--bord); }
  table.editeur tr.ligne:last-child { border-bottom: 0; }
  table.editeur td { display: block; padding: 0; border: 0; min-width: 0; }
  table.editeur td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .15rem; color: var(--doux); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
  table.editeur td.col-designation, table.editeur td[colspan], table.editeur td.col-actions { grid-column: 1 / -1; }
  table.editeur td.col-designation { min-width: 0; }
  table.editeur tr.ligne input:not([type=hidden]), table.editeur tr.ligne select:not(.petit-select), table.editeur tr.ligne textarea { min-width: 0; width: 100%; font-size: 16px; padding: .6rem .65rem; }
  table.editeur tr.ligne select.petit-select { font-size: 16px; padding: .4rem .5rem; }
  table.editeur tr.ligne .achat-info input:not([type=hidden]) { width: 7rem; }
  table.editeur td.total-ligne { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding: .2rem 0 0; font-size: 1.1rem; }
  table.editeur td.total-ligne::before { margin: 0; }
  table.editeur td.col-actions { display: flex; justify-content: flex-end; gap: .5rem; white-space: normal; }
  table.editeur tr.ligne-deduction td.doux { padding: 0; }
  table.editeur tr.sous-total { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .25rem; background: #fafbfc; border-bottom: 2px solid var(--bord); }
  table.editeur tr.sous-total td { border-top: 0; }
  table.editeur tr.sous-total td:first-child { text-align: left; }
  table.editeur tr.sous-total td:last-child:empty { display: none; }
}

/* Comptabilite */
.onglets.secondaire { margin-top: -.5rem; }
.onglets.secondaire a { font-size: .9rem; padding: .35rem .8rem; }
/* Menu de la comptabilite : six onglets, le reste dans "Plus" a droite (meme mecanique que le menu de l'en-tete, assets/app.js) */
.compta-onglets { flex-wrap: wrap; align-items: flex-end; }
.compta-onglets .menu-plus { margin-left: auto; margin-bottom: .3rem; }
.compta-onglets .menu-plus-bouton { padding: .35rem .8rem; border: 1px solid var(--bord); border-radius: 6px; background: var(--carte); color: var(--texte); font: inherit; cursor: pointer; }
.compta-onglets .menu-plus-bouton:hover, .compta-onglets .menu-plus.ouvert .menu-plus-bouton { background: var(--fond); }
.compta-onglets .menu-plus-bouton.actif { border-color: var(--accent); font-weight: 600; }
.compta-onglets .menu-plus-liste { left: auto; right: 0; }
.compta-onglets .menu-plus-liste a { padding: .4rem .8rem; margin: 0; border: 0; border-radius: 4px; color: var(--texte); }
.compta-onglets .menu-plus-liste a:hover { background: var(--fond); }
.compta-onglets .menu-plus-liste a.actif { background: var(--accent); color: #fff; font-weight: 600; }
html:not(.js) .compta-onglets .menu-plus-liste { display: flex; position: static; flex-direction: row; flex-wrap: wrap; border: 0; box-shadow: none; padding: 0; }
table.compta td.nombre, table.compta th.nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.compta tr.total td { font-weight: 700; border-top: 2px solid var(--bord); }
table.compta tr.sous-total td { font-weight: 600; background: var(--fond); }
table.compta tr.titre-compte td { background: var(--fond); font-weight: 700; }
table.compta tr.extournee td { color: var(--doux); text-decoration: line-through; }
table.compta td.lettre { text-align: center; color: var(--doux); font-size: .85rem; }
.compta-alertes { display: grid; gap: .6rem; margin-bottom: 1rem; }
.compta-etat { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; background: var(--fond); border: 1px solid var(--bord); }
.compta-etat.ok { color: var(--ok); border-color: var(--ok); }
.compta-etat.erreur { color: var(--erreur); border-color: var(--erreur); }
.ligne-ecriture { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(8rem, 1fr) 8rem 8rem 2.2rem; gap: .5rem; margin-bottom: .4rem; align-items: center; }
.ligne-ecriture input, .ligne-ecriture select { margin: 0; }
.ligne-ecriture .nombre { text-align: right; }
@media (max-width: 700px) {
  .ligne-ecriture { grid-template-columns: 1fr 1fr; }
  .ligne-ecriture .compte-choix { grid-column: 1 / -1; }
}
/* Ligne de facture fournisseur : article, [compte], libelle, quantite, PU HT, HT, taux, TVA, retrait (le compte n'existe qu'avec la comptabilite : .avec-compte). */
.ligne-achat { display: grid; grid-template-columns: minmax(10rem, 2fr) minmax(8rem, 2fr) 5rem 6rem 6rem 6rem 5.5rem 2.2rem; gap: .5rem; margin-bottom: .4rem; align-items: center; }
.avec-compte .ligne-achat { grid-template-columns: minmax(10rem, 2fr) minmax(8rem, 1.5fr) minmax(8rem, 2fr) 5rem 6rem 6rem 6rem 5.5rem 2.2rem; }
.ligne-achat input, .ligne-achat select { margin: 0; min-width: 0; }
.ligne-achat .nombre { text-align: right; }
.ligne-achat input:disabled { background: var(--fond); }
.ligne-achat input[readonly] { background: var(--fond); }
.ligne-achat-entete { font-size: .8rem; color: var(--doux); margin-bottom: .2rem; }
@media (max-width: 900px) {
  .ligne-achat, .avec-compte .ligne-achat { grid-template-columns: 1fr 1fr; }
  .ligne-achat .cellule-article, .ligne-achat [data-champ="compte"], .ligne-achat [data-champ="libelle"] { grid-column: 1 / -1; }
  .ligne-achat-entete { display: none; }
}
.cellule-article { min-width: 0; }
.cellule-article select { width: 100%; }
.bl-badge { display: block; margin-top: .15rem; font-size: .72rem; color: var(--doux); }
.bl-bloc { border: 1px solid var(--bord); border-radius: 8px; background: var(--fond); padding: .75rem 1rem; margin: 1rem 0; }
.bl-bloc .case { display: block; margin: .2rem 0; }

/* Reception de marchandises (bon de livraison) : zone de scan, lignes scannees, camera */
.bouton-defaut { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.import-zone { border: 1px dashed var(--bord); border-radius: 8px; background: var(--fond); padding: .85rem 1rem; margin-bottom: 1rem; }
/* Photo du bon de livraison (telephone) : bouton « Photographier » (visible avec JavaScript seulement) ; le champ qui ouvre l'appareil photo reste cache. */
.champ-cache { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.photo-bl { margin: 0 0 .7rem; }
.bouton-photo { display: none; cursor: pointer; }
.js .bouton-photo { display: inline-block; }
@media (max-width: 700px) { .js .bouton-photo { display: block; box-sizing: border-box; width: 100%; white-space: normal; text-align: center; line-height: 1.3; font-size: 1.1rem; padding: .95rem 1rem; } }
.import-options { margin: .6rem 0; }
.import-options .case { display: block; margin: .15rem 0; }
.import-resultat table { margin-top: .5rem; }
.case-stock { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 400; cursor: pointer; white-space: nowrap; }
.case-stock input { margin: 0; }
.creer-fournisseur { margin-top: .4rem; }
.creer-fournisseur summary { cursor: pointer; font-size: .9rem; color: var(--accent); }
.creer-fournisseur-champs { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.creer-fournisseur-champs input { flex: 1 1 12rem; min-width: 0; }
.lignes-reception .centre, .lignes-reception th.centre { text-align: center; }
.scan-zone { margin-bottom: 1rem; }
.scan-ligne { display: flex; gap: .5rem; }
.scan-ligne input { flex: 1; font-size: 1.2rem; padding: .7rem .85rem; margin: 0; }
.scan-ligne button { white-space: nowrap; }
.scan-info { min-height: 1.4rem; margin: .4rem 0 0; font-weight: 600; color: var(--ok); }
.scan-info.scan-erreur { color: var(--erreur); }
.camera-zone { margin-top: .6rem; }
.camera-zone video { display: block; width: 100%; max-width: 28rem; border-radius: 8px; background: #000; margin-bottom: .4rem; }
.lignes-reception input { margin: 0; max-width: 8rem; }
.lignes-reception .nombre { text-align: right; }
/* N° de serie des pieces recues : un champ par piece (assets/reception.js, assets/reception-series.js), replies sous l'article. */
.series { margin-top: .35rem; font-size: .9rem; }
.series summary { cursor: pointer; color: var(--accent); }
.series-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .3rem; margin: .35rem 0 .6rem; }
.series-champs input, .lignes-reception .series-champs input { width: 100%; max-width: none; box-sizing: border-box; margin: 0; font-family: ui-monospace, Consolas, monospace; }
.series-champs input.serie-doublon { border-color: var(--erreur); box-shadow: 0 0 0 1px var(--erreur); }
.series-liste { margin-top: .25rem; font-size: .85rem; color: var(--doux); }
.serie { display: inline-block; margin: .1rem .15rem .1rem 0; padding: 0 .4rem; border: 1px solid var(--bord); border-radius: 4px; font-family: ui-monospace, Consolas, monospace; color: var(--texte); }
@keyframes ligne-flash { from { background: var(--ok-fond); } to { background: transparent; } }
.ligne-flash { animation: ligne-flash 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .ligne-flash { animation: none; } }

/* Creation rapide d'un client ou d'un article dans une facture ou un devis (assets/creation-rapide.js, lib/creation_rapide.php). Les boutons n'existent
   qu'avec JavaScript ; sans lui, un lien ouvre la fiche complete dans un autre onglet. */
[data-creer] { display: none; }
.js [data-creer] { display: inline-block; }
.js .sans-js { display: none; }
.creer-ligne { margin: .35rem 0 0; font-size: .88rem; }
.lien-bouton { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; font-size: inherit; text-decoration: underline; cursor: pointer; }
.lien-bouton:hover { background: none; color: var(--accent-fonce); }
.creer-etat { margin-left: .6rem; }
dialog.dialogue { box-sizing: border-box; width: min(44rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; margin: auto; padding: 1.25rem;
  background: var(--carte); color: var(--texte); border: 1px solid var(--bord); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); }
dialog.dialogue::backdrop { background: rgba(28, 31, 38, .5); }
dialog.dialogue .actions { margin-top: 1rem; }
dialog.dialogue details summary { cursor: pointer; color: var(--doux); }
@media (max-width: 700px) { dialog.dialogue { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); padding: 1rem; } dialog.dialogue .grille-2, dialog.dialogue .grille-3 { grid-template-columns: 1fr; } }

/* Commentaires predefinis d'un modele (assets/modele-commentaires.js, public/modele.php) : poignee de glissement, ligne en cours de deplacement, texte sur plusieurs lignes. */
.commentaires-entete { display: flex; gap: .5rem; align-items: center; }
.commentaires-entete [data-finaliser] { margin-left: auto; }
.commentaires-barre { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.commentaires-liste td { vertical-align: top; }
.commentaires-liste .commentaire-poignee { cursor: grab; color: var(--doux); user-select: none; width: 1.5rem; }
.commentaires-liste tr.glisse { opacity: .4; }
.commentaire-texte { white-space: pre-line; }
.commentaires-reprise { display: grid; gap: .4rem; margin-top: .75rem; }
.commentaires-reprise select { max-width: 100%; }
.commentaires-reprise-boutons { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Impression : bouton « Imprimer » des listes, fiches et etats (bouton_imprimer(), lib/layout.php), et bordereau de remise en banque. Le bouton n'existe qu'avec
   JavaScript ; l'en-tete d'impression (societe, page, date) est invisible a l'ecran. A l'impression : ni menu, ni filtres, ni boutons, ni bandeaux ; tableaux
   compacts dont l'en-tete se repete a chaque page et dont les lignes ne sont jamais coupees. */
.bouton-imprimer { display: none; }
.js .bouton-imprimer { display: inline-block; }
.print-entete { display: none; }
@media print {
  @page { margin: 12mm; }
  .entete, .no-print, .onglets, .menu-bouton, .message, .bandeau-demo, .filtres, .bouton-imprimer, .creer-ligne, .titre-page .actions, .titre-page > .bouton,
  main button, main .bouton, .formules, main details.carte:not([open]) { display: none !important; }
  /* Informations internes (prix d'achat, marge) : jamais sur une feuille imprimee, meme si on imprime la page d'une piece au lieu de son PDF */
  .interne, .marge-ligne, .achat-info { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main.conteneur, .conteneur { max-width: none; padding: 0; }
  .print-entete { display: block; margin: 0 0 .8rem; padding-bottom: .35rem; border-bottom: 1.5px solid #000; font-size: 10pt; }
  .titre-page { margin-bottom: .6rem; }
  h1 { font-size: 15pt; }
  .doux, .sous-titre { color: #444; }
  .carte { border: 0; box-shadow: none; background: none; padding: 0; margin-bottom: .8rem; }
  .tuile { box-shadow: none; padding: .4rem .6rem; border-color: #999; }
  .tableau-conteneur { overflow: visible; }
  table.liste { font-size: 9.5pt; }
  table.liste th, table.liste td { padding: .25rem .4rem; border-bottom: 1px solid #bbb; }
  table.liste th { color: #000; border-bottom: 1.5px solid #000; }
  table.liste tr:hover td { background: none; }
  table.liste th:not([aria-sort]) .tri-fleche { display: none; }
  table.liste th[aria-sort] .tri-fleche { color: #000; opacity: 1; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
  .pagination { margin: .5rem 0; justify-content: center; }
  .bordereau { border: 0; box-shadow: none; padding: 0; }
}

/* Remise en banque : cheques ajoutes a la main (facture ou « autre cheque », tireur, numero, montant) */
.ligne-cheque { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr); gap: .5rem; margin-bottom: .5rem; align-items: start; }
.ligne-cheque .recherche { margin: 0; }
html.js .ligne-libre-masquee { display: none; }
@media (max-width: 700px) {
  .ligne-cheque { grid-template-columns: 1fr 1fr; padding-bottom: .6rem; border-bottom: 1px solid var(--bord); }
  .ligne-cheque > select, .ligne-cheque > .recherche, .ligne-cheque > [data-tireur] { grid-column: 1 / -1; }
}

/* Selecteur de societe de l'en-tete : la couleur de la societe active borde le menu */
.societe-choix { order: 2; margin: 0; display: flex; align-items: center; }
.societe-choix select { width: auto; max-width: 15rem; padding: .3rem .6rem; font-weight: 600; border-left: 4px solid var(--accent); }
@media (max-width: 900px) { .societe-choix { order: 1; flex: 1 1 100%; } .societe-choix select { max-width: none; width: 100%; } }

/* Societe de demonstration : bandeau permanent sous l'en-tete (donnees fictives). */
.bandeau-demo { background: var(--alerte-fond); color: var(--alerte); border-bottom: 1px solid #fde68a; padding: .5rem 1rem; text-align: center; font-size: .9rem; }

/* Champ piege des formulaires publics (anti-robot) : hors ecran, invisible pour une personne. */
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* Signature electronique (page publique signer.php) */
.signature-page { padding-top: 1.5rem; padding-bottom: 3rem; }
.signature-lecture { width: 100%; height: 28rem; border: 1px solid var(--bord); border-radius: 8px; background: #fff; margin-bottom: 1rem; }
.signature-zone { display: block; width: 100%; max-width: 640px; aspect-ratio: 640 / 220; border: 2px dashed var(--bord); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; }
@media (max-width: 700px) { .signature-lecture { height: 18rem; } }