/* ===========================================================================
   La fiche societe — ce qui n'appartient qu'a elle.

   Feuille a part : app.css ne garde que ce qui sert a plusieurs ecrans, et la
   fiche societe est assez grosse pour avoir la sienne.
   =========================================================================== */

/* ------------------------------------------------------- onglet Compta

   Les trois blocs s'empilaient sur une colonne : sur un ecran large, on
   descendait pour rien. Le reglement tient a gauche -- c'est lui qui se
   discute -- la comptabilite et la facturation a droite. Sous 1100 px, tout
   revient en une colonne. */
.plan-compta.compta-deux-colonnes { max-width: 1240px; }

.compta-deux-colonnes > fieldset.grp-saisie {
    display: grid; grid-template-columns: minmax(390px, 540px) minmax(0, 1fr);
    gap: 10px; align-items: start;
}
.compta-deux-colonnes .colonne-compta {
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
}

@media (max-width: 1100px) {
    .compta-deux-colonnes > fieldset.grp-saisie { grid-template-columns: minmax(0, 1fr); }
}

/* Les conditions de reglement, methode du devis nouvelle generation : une
   suite d'echeances dont le total fait 100. */
.entete-bloc { display: flex; align-items: center; gap: 6px; }
.sans-echeance { padding: 8px 2px; line-height: 1.4; }

.table-echeances { width: 100%; border-collapse: collapse; margin-top: 6px; }
.table-echeances th {
    text-align: left; font-weight: 600; font-size: 12px; color: var(--texte-doux);
    padding: 2px 4px; border-bottom: 1px solid var(--bord);
}
.table-echeances td { padding: 2px 4px; vertical-align: middle; }
.table-echeances select, .table-echeances input {
    width: 100%; height: 26px; padding: 0 5px; font: inherit; min-width: 0;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.table-echeances .col-nombre { width: 78px; }
.table-echeances .col-nombre input { text-align: right; }
.table-echeances .col-icone { width: 54px; white-space: nowrap; }
.table-echeances .col-icone .bouton-plat { padding: 0 5px; }

/* Le couple acompte / solde que lit encore l'ancienne generation. */
.ancien-couple { margin-top: 10px; border-top: 1px solid var(--bord); padding-top: 6px; }
.ancien-couple > summary {
    cursor: pointer; color: var(--texte-doux); font-size: 12px; user-select: none;
}
.ancien-couple .grille-p11 { padding-top: 6px; }
.ancien-couple .champ-pct { width: 70px; text-align: right; }
.ancien-couple .ligne-boutons { display: flex; align-items: center; gap: 6px; }
.ancien-couple .ligne-boutons select { flex: 1 1 auto; min-width: 0; }
.ancien-couple input, .ancien-couple select {
    height: 26px; padding: 0 5px; font: inherit;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}

/* Ce que l'enregistrement dira, dit tout de suite : les sept controles
   d'Appliquer_Cpta refusaient sans qu'on voie jamais ce qui clochait. */
.verdict-reglement {
    display: flex; align-items: baseline; gap: 8px; line-height: 1.35;
    margin-top: 8px; padding: 5px 9px; border-radius: var(--r);
    border: 1px solid var(--bord); background: var(--fond-barre);
}
.verdict-reglement .total-reglement { font-weight: 600; font-size: 15px; white-space: nowrap; }
.verdict-reglement.faux {
    border-color: var(--rouge); background: var(--fond-carte); color: var(--rouge);
}
.verdict-reglement.faux .doux { color: inherit; }

.bloc-reglement textarea {
    width: 100%; margin-top: 6px; padding: 4px 6px; font: inherit; resize: vertical;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}

.ligne-cases { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 6px; }

/* L'adresse de facturation, une fois choisie, se lit : la recherche ne revient
   que si on en change. */
.carte-adr-fac {
    padding: 6px 9px; border-radius: var(--r);
    border: 1px solid var(--bord); background: var(--fond-barre);
}
.titre-adr-fac { display: flex; align-items: center; gap: 6px; }
.titre-adr-fac .nom-adr-fac { font-weight: 600; }

.rech-adr-fac { display: flex; align-items: center; gap: 8px; }
.rech-adr-fac input[type=search] {
    flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 6px; font: inherit;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.liste-adr-fac {
    width: 100%; margin-top: 6px; height: 28px; padding: 0 6px; font: inherit;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}

/* ------------------------------------------------------- onglet Ordres

   UNE table, trois niveaux de lignes : le projet, ses ordres, leurs
   echeances. Une seule grille de colonnes, donc les montants s'alignent d'un
   bout a l'autre et l'en-tete ne se repete pas -- c'etait le defaut des blocs
   imbriques : autant d'en-tetes que d'ordres ouverts, et trois colonnes de
   chiffres qui ne tombaient jamais l'une sous l'autre. */
.plan-ordres { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cadre-ordres { flex: 1; min-height: 0; overflow: auto; }

.somme-ordres { font-weight: 600; font-variant-numeric: tabular-nums; }
.somme-ordres.reste, .table-ordres .reste { color: var(--orange); }

.table-ordres { width: 100%; border-collapse: collapse; }
.table-ordres thead th {
    position: sticky; top: 0; z-index: 2; text-align: left;
    font-size: 11px; font-weight: 600; color: var(--texte-doux);
    padding: 4px 8px; background: var(--fond-barre);
    border-bottom: 1px solid var(--bord-fort);
}
.table-ordres td { padding: 2px 8px; border-bottom: 1px solid var(--fond-gris); }
.table-ordres .col-nombre {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.table-ordres .col-ppale, .table-ordres .col-facture {
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.table-ordres .col-libelle { width: 52%; }

/* La part calculee se lit comme un repere, pas comme une valeur saisie. */
.table-ordres .part { color: var(--texte-doux); }
.table-ordres .col-facture .petit { margin-left: 5px; }

/* Les trois niveaux : le retrait dit la profondeur, la teinte la nature. */
.table-ordres .lig-projet > td { background: rgba(120, 160, 210, .16); }
.table-ordres .lig-projet .nom-projet { font-weight: 600; }
.table-ordres .lig-ordre > td { background: rgba(240, 220, 120, .22); }
.table-ordres .lig-ordre .col-libelle { padding-left: 26px; }
.table-ordres .lig-ordre .no-ordre { font-weight: 600; font-variant-numeric: tabular-nums; }
.table-ordres .lig-echeance .col-libelle { padding-left: 52px; }
.table-ordres .lig-echeance .type-echeance { font-weight: 600; }
.table-ordres .lig-echeance.a-facturer > td { background: var(--accent-clair); }
.table-ordres .lig-echeance.negative > td { background: rgba(214, 51, 132, .14); }

.table-ordres .col-libelle > span { margin-right: 8px; }
.chevron-plat { width: 16px; padding: 0; color: var(--texte-faible); }

/* C ou I : le client ou l'intermediaire. */
.jeton-dest {
    display: inline-block; width: 17px; text-align: center; border-radius: 3px;
    font-size: 11px; border: 1px solid var(--bord);
    background: var(--fond-carte); color: var(--texte-doux);
}

/* L'etat d'un ordre ou d'une echeance, d'un coup d'oeil. */
.jeton-etat-ordre {
    padding: 0 6px; border-radius: 9px; font-size: 11px; white-space: nowrap;
    border: 1px solid var(--bord); background: var(--fond-carte); color: var(--texte-doux);
}
.jeton-etat-ordre.attente { border-color: var(--orange); color: var(--orange); }
.jeton-etat-ordre.fait { border-color: var(--vert); color: var(--vert); }

/* ------------------------------------------------------ onglet Factures

   La legende de la fenetre -- non terminee, non envoyee, interfacee, avoir --
   teintait le fond de deux colonnes. Une couleur seule ne se lit pas, et pas
   du tout pour qui distingue mal le jaune du vert : elle devient une pastille
   qui porte son mot, la couleur en appui. */
.plan-factures { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cadre-factures { flex: 1; min-height: 0; overflow: auto; }

.table-factures { width: 100%; border-collapse: collapse; }
.table-factures thead th {
    position: sticky; top: 0; z-index: 2; text-align: left;
    font-size: 11px; font-weight: 600; color: var(--texte-doux);
    padding: 4px 8px; background: var(--fond-barre);
    border-bottom: 1px solid var(--bord-fort);
}
.table-factures td { padding: 3px 8px; border-bottom: 1px solid var(--fond-gris); }
.table-factures .col-nombre {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.table-factures .col-jour { white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-factures .col-nofac { white-space: nowrap; }
.table-factures .no-facture { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Le pied des factures est dans « LA LIGNE DES SOMMES » d'app.css, avec les quatre
   autres. Sa regle etait ici, avec un fond --fond-barre -- BLANC en clair : le trait
   portait tout, et la ligne paraissait plus CLAIRE que la table. */

.table-factures tr.lig-avoir .no-facture { color: var(--rouge); }
.table-factures tr:hover > td { background: var(--fond-ligne); }

.marque-facture {
    margin-left: 6px; padding: 0 6px; border-radius: 9px; font-size: 11px;
    border: 1px solid var(--bord); white-space: nowrap;
}
.marque-facture.proforma { border-color: #8b1f5e; color: #8b1f5e; font-weight: 600; }
.marque-facture.terminee { border-color: var(--bord-fort); color: var(--texte-doux); }
.marque-facture.envoyee { border-color: #0e7490; color: #0e7490; }
.marque-facture.non-terminee { border-color: #b8860b; color: #8a6508; }
.marque-facture.non-envoyee { border-color: #0e7490; color: #0e7490; }
.marque-facture.interfacee { border-color: var(--vert); color: var(--vert); }
.marque-facture.avoir { border-color: #d63384; color: #b4246a; }
/* Mode sombre : le bleu et le rose tombaient sous 4,5 de contraste (recette du 2026-10-22). */
html[data-theme="sombre"] .marque-facture.envoyee,
html[data-theme="sombre"] .marque-facture.non-envoyee { border-color: #4fb3cf; color: #7fcde3; }
html[data-theme="sombre"] .marque-facture.avoir { border-color: #f06aa8; color: #f59ac3; }
html[data-theme="sombre"] .marque-facture.proforma { border-color: #e07bb4; color: #f0a6cf; }
html[data-theme="sombre"] .marque-facture.non-terminee { color: #e0b44a; }

/* Les lignes d'une facture, depliees sous elle. */
.lig-detail-facture > td { background: var(--fond-gris); padding: 4px 8px 8px 34px; }
.table-lignes-facture { width: 100%; border-collapse: collapse; }
.table-lignes-facture th {
    text-align: left; font-size: 11px; font-weight: 600; color: var(--texte-doux);
    padding: 2px 6px; border-bottom: 1px solid var(--bord);
}
.table-lignes-facture td {
    padding: 2px 6px; border-bottom: 1px solid var(--bord);
    vertical-align: top;
}
.table-lignes-facture .col-nombre {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ====================================================================
   La fiche d'une facture — portage de FEN_Com_FacCli_optimise.
   ==================================================================== */

/* Le n° est le chemin vers la fiche : il se voit, et la ligne se choisit. */
.table-factures .lien-facture {
    padding: 0; border: none; background: none; font: inherit; font-weight: 600;
    color: var(--accent-texte); cursor: pointer; text-decoration: underline;
    text-underline-offset: 2px; font-variant-numeric: tabular-nums;
}
.table-factures .lien-facture:hover { color: var(--accent-fonce); }

.table-factures tbody tr { cursor: default; }
.table-factures tbody tr.choisie td { background: var(--accent-clair); }
.table-factures tbody tr.choisie td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

.boite.fiche-facture {
    width: 1040px; max-width: 96vw;
    /* Une hauteur FIXE : la boîte ne change plus de taille ni de position d'un onglet à l'autre. */
    display: flex; flex-direction: column; height: min(780px, 90vh); max-height: 90vh;
}

.tete-facture { display: flex; align-items: center; gap: 10px; }
.titre-facture { font-size: 15px; }
.montant-tete { font-variant-numeric: tabular-nums; font-weight: 600; }

/* L'état ne se dit pas par la seule couleur : le mot est écrit dessus. */
.jeton-etat-fac {
    padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.5);
}
.jeton-etat-fac.provisoire { background: rgba(0,0,0,.15); }

.onglets-facture {
    display: flex; gap: 2px; padding: 6px 10px 0 10px;
    border-bottom: 1px solid var(--bord); background: var(--fond-carte);
}
.onglet-fac {
    padding: 5px 14px; font: inherit; cursor: pointer;
    background: transparent; color: var(--texte-doux);
    border: 1px solid transparent; border-bottom: none;
    border-radius: var(--r) var(--r) 0 0;
}
.onglet-fac:hover { color: var(--texte); background: var(--accent-survol); }
.onglet-fac.actif {
    background: var(--fond-carte); color: var(--texte); font-weight: 600;
    border-color: var(--bord); margin-bottom: -1px;
}

.corps-facture { flex: 1; overflow: auto; }

.grille-facture {
    display: grid; grid-template-columns: 180px 1fr 180px 1fr;
    gap: 8px 12px; align-items: center;
}
.grille-facture > label { color: var(--texte-doux); font-size: 12px; }
.grille-facture .sur-deux { grid-column: span 3; }
.grille-facture input, .grille-facture select, .grille-facture textarea {
    width: 100%; padding: 4px 8px; font: inherit;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.grille-facture input:disabled, .grille-facture select:disabled,
.grille-facture textarea:disabled { background: var(--fond); color: var(--texte-doux); }
.grille-facture .lecture { padding: 4px 0; }
.grille-facture input[type=checkbox] { width: auto; }

.bandeau-message {
    margin-bottom: 10px; padding: 6px 10px; border-radius: var(--r);
    border: 1px solid var(--bord-fort); font-size: 13px;
}
.bandeau-message.ok { border-color: var(--vert, var(--texte-succes)); }
.bandeau-message.alerte { border-color: var(--rouge); }

.note-detail { margin-top: 8px; font-size: 12px; }
.bloc-reglements { margin: 14px 0 6px 0; }

.totaux-facture {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bord);
}

.pied-facture { align-items: center; }

/* La jauge de chargement que porte chaque action. */
.jauge-action {
    width: 60px; height: 4px; margin-right: auto; border-radius: 2px;
    background: linear-gradient(90deg, var(--accent-clair), var(--accent), var(--accent-clair));
    background-size: 200% 100%;
    animation: jauge-action-defile .9s linear infinite;
}
@keyframes jauge-action-defile {
    from { background-position: 200% 0; }
    to { background-position: 0 0; }
}

/* ====================================================================
   La saisie des lignes d'une facture — onglet 3 de
   FEN_Com_FacCli_optimise : la table en haut, la fiche de la ligne en
   dessous, et le clic droit pour ajouter, modifier ou supprimer.
   ==================================================================== */

.barre-lignes {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px; font-size: 12px;
}

/* D'où vient la facture : le devis se nomme, et il s'ouvre. */
.jeton-lien-devis {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
    border: 1px solid var(--bord-fort); color: var(--texte-doux);
}

.table-lignes-facture tbody tr.choisie td { background: var(--accent-clair); }
.table-lignes-facture tbody tr.choisie td:first-child {
    box-shadow: inset 2px 0 0 var(--accent);
}

.fiche-ligne-facture {
    margin-top: 12px; padding: 10px;
    border: 1px solid var(--bord-fort); border-radius: var(--r);
    background: var(--fond);
}
.titre-fiche-ligne {
    font-weight: 600; font-size: 12px; color: var(--texte-doux);
    margin-bottom: 8px;
}
.boutons-fiche-ligne {
    display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px;
}
.montants-ligne { display: flex; align-items: baseline; gap: 8px; }

/* L'adresse de facturation : lue, puis choisie dans la liste des sociétés. */
.ligne-adresse { display: flex; align-items: center; gap: 10px; }
.ligne-adresse .lecture { flex: 1; }
.btn-mince { padding: 2px 8px; font-size: 12px; }

.boite.boite-adresses { width: 560px; max-width: 94vw; }
.recherche-adresse {
    width: 100%; margin-bottom: 8px; padding: 5px 9px; font: inherit;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.lien-adresse {
    padding: 0; border: none; background: none; font: inherit;
    color: var(--accent); cursor: pointer; text-align: left;
}
.lien-adresse:hover { color: var(--accent-fonce); text-decoration: underline; }

/* La nature d'une société, posée à la création : professionnel, particulier
   ou association. C'est elle qui dira si la facture peut partir. */
.bloc-nature {
    margin: 10px 0; padding: 8px 12px 10px 12px;
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.bloc-nature > legend { padding: 0 6px; font-size: 12px; color: var(--texte-doux); }
.nature-client { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.case-nature { display: flex; align-items: flex-start; gap: 7px; cursor: pointer; }
.case-nature > span { display: flex; flex-direction: column; line-height: 1.25; }

/* L'adresse postale sous le nom : c'est elle qui dit ou part la facture. */
.sous-nom { font-size: 11.5px; line-height: 1.35; margin-top: 2px; }

/* Creer une adresse de facturation sans quitter la fiche. */
.cadre-nouvelle-adresse {
    margin-top: 10px; padding: 10px 12px;
    border: 1px dashed var(--bord-fort); border-radius: var(--r);
    background: var(--fond-gris);
}
.cadre-nouvelle-adresse .lib-souligne { display: block; margin-bottom: 8px; font-size: 12px; }

/* La liste des adresses : le nom, son numero, puis l'adresse postale -- c'est
   elle qu'on lit pour choisir, pas le numero. */
.liste-adresses { list-style: none; margin: 8px 0 0; padding: 0; }
.liste-adresses li { margin-bottom: 4px; }
.liste-adresses .lien-adresse {
    display: block; width: 100%; text-align: left;
    padding: 7px 10px; border: 1px solid var(--bord); border-radius: var(--r);
    background: var(--fond-carte); cursor: pointer; font: inherit;
}
.liste-adresses .lien-adresse:hover {
    border-color: var(--accent, #1d4ed8); background: var(--fond-info);
}
.nom-adresse { font-weight: 600; margin-right: 8px; }
.detail-adresse { display: block; margin-top: 2px; font-size: 11.5px; color: var(--texte-doux); }

/* Le formulaire : des champs a la taille de ce qu'on y met. Une ville dans une
   case de trois centimetres ne se lit pas. */
.grille-adresse { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; align-items: center; }
.grille-adresse > label { font-size: 12px; color: var(--texte-doux); }
.grille-adresse > input { width: 100%; }
.grille-adresse > input.cp { width: 110px; }
.note-adresse { margin-top: 8px; font-size: 11.5px; }

/* La somme sous le detail de la facture. */
.table-lignes-facture tfoot .ligne-somme td {
    border-top: 1px solid var(--bord-fort); font-weight: 600; padding-top: 6px;
}
.table-lignes-facture tfoot .ligne-somme.ttc td {
    border-top: none; padding-top: 2px; font-size: 13px;
}