/* ==========================================================================
   FEN_DEVIS_Menuiserie_Agencement_2025 et sa fenetre interne de debourse.

   Ce qui ne sert qu'a un ecran vit avec lui, hors du app.css commun : deux
   sessions qui travaillent sur des fenetres differentes ne se marchent plus
   dessus a chaque fusion.
   ========================================================================== */

/* FEN_DEVIS_Menuiserie_Agencement_2025 : la matrice de devis */
.ecran-devis { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 4px; }
.ecran-devis .rech-devis { width: 220px; }

/* Le bandeau d'identite : numero, version, etats, concepteur */
.devis-identite { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    padding: 5px 10px; border-bottom: 1px solid var(--bord); font-size: 12px; }
.devis-identite .etiq { color: var(--texte-doux); white-space: nowrap; }
.devis-identite .numero-devis { font-size: 15px; letter-spacing: .5px; }
.devis-identite .select-version { padding: 1px 4px; }
.cadre-etat { border: 1px solid var(--bord-fort); border-radius: 3px; padding: 2px 8px;
    background: var(--fond-gris); white-space: nowrap; }
.cadre-etat .etat-accepte { color: var(--vert); }
.cadre-etat .etat-refuse { color: var(--rouge); }

/* Le cadre du titre, et a sa droite le verrou puis les actions de ligne */
.devis-bandeau { display: flex; align-items: flex-start; gap: 10px; padding: 0 10px; }
.cadre-titre { flex: 1; min-width: 0; border: 1px solid var(--bord-fort); border-radius: 3px;
    padding: 5px 10px; text-align: center; font-weight: 600; font-size: 12.5px; line-height: 1.35; }
.colonne-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bandeau-verrou { background: #fff3cd; color: #965000; border: 1px solid #f0d48a;
    border-radius: 3px; padding: 3px 12px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.actions-ligne { display: flex; gap: 4px; }

/* La grille a gauche, l'entete et les totaux a droite */
.corps-devis { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 0 10px 4px; }
.ecran-devis .table-p11 { flex: 1; min-width: 0; min-height: 0; max-height: none; }
.table-devis .col-typelig { width: 56px; }
.table-devis .col-sel { width: 62px; text-align: center; }
.table-devis .col-qte { width: 86px; text-align: right; }
.table-devis .col-coef { width: 74px; text-align: right; }
.table-devis .col-unite { width: 96px; }
.table-devis td.lib { white-space: normal; }
/* La désignation a la largeur PRIORITAIRE : les autres colonnes gardent leur largeur fixe, elle prend le reste, jamais moins. */
.table-devis td.designation, .table-devis th[data-col="designation"] { min-width: 340px; }
.table-devis td.designation div + div { margin-top: 1px; }
.table-devis tr.ligne-titre td { background: var(--fond-gris); font-weight: 600; }
.table-devis tr.ligne-soustitre td, .table-devis tr.ligne-detailtitre td { font-weight: 600; }
/* Le pied du devis est dans « LA LIGNE DES SOMMES » d'app.css, avec les quatre autres.
   Sa regle etait ici : 1px sur --fond-gris, un blanc a peine casse. */

/* Le volet de droite : l'entete du devis, puis les totaux */
.volet-devis { width: 318px; flex: 0 0 318px; overflow: auto; padding-right: 2px;
    display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.bloc-devis { border: 1px solid var(--bord); border-radius: 3px; padding: 6px 8px; }
.titre-bloc { font-weight: 600; text-decoration: underline; margin-bottom: 6px; }
.champ-devis { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 4px; }
.champ-devis.haut { align-items: flex-start; }
.champ-devis .etiq { color: var(--texte-doux); white-space: nowrap; }
.champ-devis .valeur-droite { text-align: right; line-height: 1.3; min-width: 0; }
.champ-devis .valeur-figee.court { width: 74px; text-align: right; }
.deux-dates { display: flex; gap: 8px; margin-bottom: 6px; }
.deux-dates > div { flex: 1; min-width: 0; }
.deux-dates .etiq { display: block; color: var(--texte-doux); }
.deux-dates .valeur-figee { text-align: center; }
.deux-dates .valeur-figee.validite { color: var(--rouge); font-weight: 600; }
.total-devis { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 2px 0; font-size: 13px; }
    padding: 1px 0; }
.total-devis > span { color: var(--texte-doux); }
.total-devis > b { font-size: 14px; }
.total-devis.fort b { font-size: 17px; color: var(--devis-accent-texte); }
.espace-total { height: 7px; }
/* Le titre du devis : trois lignes, hauteur fixe, pas de barre de defilement.
   Ce qui deborde se lit dans le redacteur, que le bouton ouvre. */
.cadre-titre-devis { flex: 1; min-width: 0; height: calc(3 * 1.3em + 8px); resize: vertical;
    text-align: right; line-height: 1.3; font: inherit; color: inherit;
    border: 1px solid var(--bord); border-radius: 3px; padding: 3px 6px;
    background: var(--fond-carte); }
.cadre-titre-devis:focus { border-color: var(--accent); outline: none; }
.cadre-titre-devis:disabled { color: var(--texte-faible); }
.champ-devis.haut .btn-agrandir { align-self: flex-start; margin-top: 1px; }

/* designation_fab est du RTF : ce que le chiffreur a mis en forme se voit */
.table-devis td.designation u { text-underline-offset: 2px; }
.table-devis td.designation br + br { line-height: .6; }

/* La saisie dans la grille se fait discrète, comme dans la fenêtre de détail :
   la case ne se dessine qu'au survol et à la frappe. Vingt boîtes blanches
   alignées font un formulaire, pas un devis. */
.table-devis .saisie-qte { width: 100%; box-sizing: border-box; text-align: right;
    padding: 1px 3px; font: inherit; color: inherit;
    background: transparent; border: 1px solid transparent; border-radius: 2px; }
.table-devis .saisie-qte:hover { border-color: var(--bord); background: var(--fond-carte); }
.table-devis .saisie-qte:focus { border-color: var(--accent); background: var(--fond-carte);
    outline: none; }
.table-devis .saisie-qte::-webkit-outer-spin-button,
.table-devis .saisie-qte::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.table-devis input[type=number].saisie-qte { -moz-appearance: textfield; }
/* Le libelle d'un titre se tape dans la grille ; la case reste discrete tant
   qu'on ne la survole pas, pour ne pas faire un formulaire de la table. */
/* TABLEH_Devis est une table HIERARCHIQUE : un titre porte ses sous-titres,
   qui portent leurs lignes. Le noeud tient le chevron, puis le libelle ; le
   retrait dit la profondeur, et un noeud replie cache tout ce qu'il porte. */
.table-devis .noeud-devis { display: flex; align-items: center; min-width: 0; }
.table-devis .texte-noeud { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.table-devis .chevron.vide { visibility: hidden; }
.table-devis .chevron { font-size: 13px; color: var(--texte); }

/* FI_Devis_parametrage_par_defaut : la liste des articles a cocher. */
.fi-parametrage { width: 860px; max-width: 94vw; height: 76vh; display: flex;
    flex-direction: column; }
.fi-parametrage .boite-corps { flex: 1; min-height: 0; display: flex;
    flex-direction: column; gap: 6px; }
/* L'en-tete tient sur une ligne : trois champs a la suite, pas trois pleines
   largeurs l'une sous l'autre. */
.entete-parametrage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.entete-parametrage .etiq { flex: none; }
.entete-parametrage .saisie-tpl { flex: 1 1 160px; min-width: 0; }
.entete-parametrage .saisie-tpl.courte { flex: 0 0 72px; }
.entete-parametrage .case-ligne { flex: none; white-space: nowrap; }
.table-parametrage tbody tr { cursor: pointer; }
/* ⚠️ LE max-height: none EST LE POINT, et il manquait.
   .table-p11 est plafonne a 300px dans app.css : c'est bien pour les petites listes
   qu'il sert ailleurs, et c'est faux dans une fenetre interne de 76vh. Sans lui, la
   table posait sa propre barre de defilement a 300px et laissait la moitie basse du
   volet VIDE -- vu par l'utilisateur le 2026-10-08. Le flex et le min-height etaient
   deja la ; il ne manquait que de lever le plafond.

   Selecteur a DEUX classes, comme les trois autres ecrans qui neutralisent ce plafond
   (.liste-ppales, .ecran-cdes, .ecran-relances-t dans app.css) : a specificite egale
   c'est l'ordre de chargement qui trancherait, et devis.css passe apres app.css dans
   les deux hotes -- donc une seule classe suffirait AUJOURD'HUI. Deux classes ne
   dependent pas de cet ordre. */
.table-parametrage { flex: 1; min-height: 0; }
.fi-parametrage .table-p11 { max-height: none; }
.table-parametrage .col-famille { width: 160px; }
.table-parametrage .col-sel { width: 78px; text-align: center; }
.table-parametrage tbody tr.choisie td { background: var(--accent-clair); }
/* COL_Unite_Mesure : la liste des unites, dans la case. */
.table-devis .saisie-unite { width: 100%; min-width: 0; font: inherit; color: inherit;
    padding: 1px 2px; background: transparent; border: 1px solid transparent;
    border-radius: 2px; }
.table-devis .saisie-unite:hover { border-color: var(--bord); background: var(--fond-carte); }
.table-devis .saisie-unite:focus { border-color: var(--accent); background: var(--fond-carte);
    outline: none; }

.table-devis .saisie-libelle { width: 100%; box-sizing: border-box; font: inherit;
    color: inherit; padding: 1px 4px; background: transparent;
    border: 1px solid transparent; border-radius: 2px; }
.table-devis .saisie-libelle:hover { border-color: var(--bord); }
.table-devis .saisie-libelle:focus { border-color: var(--accent); background: var(--fond-carte);
    outline: none; }
/* La quantite d'un titre passe par une boite : la case le montre en etant
   cliquable, sans ressembler a une saisie directe. */
.table-devis .qte-etirer { width: 100%; text-align: right; font: inherit; color: inherit;
    padding: 1px 4px; background: transparent; cursor: pointer;
    border: 1px dashed var(--bord); border-radius: 2px; }
.table-devis .qte-etirer:hover { border-style: solid; border-color: var(--accent);
    background: var(--fond-carte); }
/* La ligne choisie se teinte, et ne porte qu'un repere a gauche : un liseré
   sur chaque cellule faisait une colonne de barres sur les lignes hautes. */
.table-devis tbody tr.choisie td { background: var(--accent-clair); }
.table-devis tbody tr.choisie td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.table-devis tbody tr { cursor: default; }

/* FEN_devis_detail_ligne : le debourse d'une ligne, pose en fenetre interne */
.boite.fenetre-fi.fi-detail { width: 1760px; max-width: 98vw; height: 90vh; }
.boite-titre.titre-detail { background: #f0a800; color: #3a2a00; }

.detail-fab { flex: 1; min-height: 0; display: flex; flex-direction: column;
    gap: 8px; padding: 8px 10px 0; font-size: 12px; }

/* Le haut : la designation a gauche, le mode et le verrou a droite */
.detail-haut { display: flex; gap: 12px; align-items: stretch; }
.cadre-designation { flex: 1; min-width: 0; display: flex; gap: 10px;
    border: 1px solid var(--bord-fort); border-radius: 3px; padding: 5px 8px; }
.cadre-designation > .etiq { color: var(--texte-doux); white-space: nowrap; }
/* SAI_Designation_Detail_Ligne : une saisie, pas un affichage. */
.texte-designation { flex: 1; min-width: 0; height: 44px; resize: vertical;
    line-height: 1.35; font: inherit; color: inherit; padding: 2px 5px;
    background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 3px; }
.texte-designation:focus { border-color: var(--accent); outline: none; }
.texte-designation:disabled { color: var(--texte-faible); }

/* TABLE_AjoutLigneSuplémentaire : la liste d'articles du bouton Ajout ligne. */
.boite-articles { width: 520px; max-width: 92vw; }
.liste-articles-ajout { margin-top: 8px; max-height: 50vh; overflow: auto;
    border: 1px solid var(--bord); border-radius: var(--r); }
.ligne-article { display: flex; width: 100%; gap: 10px; align-items: baseline;
    padding: 5px 9px; background: none; border: none; border-bottom: 1px solid var(--bord);
    font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ligne-article:last-child { border-bottom: none; }
.ligne-article:hover { background: var(--accent-survol); }
.ligne-article .nom { flex: 1; min-width: 0; }
.detail-reglages { flex: 0 0 420px; display: flex; flex-direction: column; gap: 6px; }
.ligne-reglage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ligne-reglage .etiq { color: var(--texte-doux); white-space: nowrap; }
.valeur-figee.grise { flex: 1; min-width: 0; color: var(--texte-faible); }
.base-devis { text-align: right; color: var(--texte-doux); line-height: 1.2; }
.mode-actif { font-weight: 600; }
.bascule { width: 34px; height: 17px; border-radius: 9px; background: var(--bord-fort);
    position: relative; flex: none; }
.bascule::after { content: ''; position: absolute; top: 2px; left: 2px;
    width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.bascule.a-droite { background: var(--accent); }
.bascule.a-droite::after { left: auto; right: 2px; }

/* Les trois tables, cote a cote et de meme largeur */
.detail-tables { flex: 1; min-height: 0; display: flex; gap: 8px; }
.bloc-postes { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.titre-cadre { border: 1px solid var(--bord-fort); border-radius: 3px;
    background: var(--fond-gris); text-align: center; font-weight: 600;
    padding: 2px 8px; margin-bottom: 4px; }
.table-postes-cadre { flex: 1; min-height: 0; max-height: none; overflow-x: hidden; }
.base-devis { margin-left: auto; white-space: nowrap; color: var(--texte-faible); }
.table-postes { width: 100%; }
.table-postes .col-qte { width: 66px; text-align: right; }
.table-postes .col-unite { width: 42px; }
.table-postes .col-coef { width: 68px; text-align: right; }
.table-postes .col-famille { width: 84px; }
.table-postes .col-montant { width: 92px; white-space: nowrap; }
.table-postes td.lib { white-space: normal; }
/* Les trois tables tiennent la meme largeur, comme dans la fenetre : chacune
   son tiers, et la colonne du nom prend ce qui reste. */
.detail-tables .bloc-postes { flex: 1 1 0; min-width: 0; }
/* Fond gris sur ce qui se calcule : la fenetre distingue ainsi le saisi du deduit. */
.table-postes .calcule { background: var(--fond-gris); }

/* Le bas : observation, recap, totaux, taxes.
   Il est serre : chaque pixel qu'il prend est pris aux trois tableaux, qui
   sont le vrai sujet de la fenetre. */
.detail-bas { display: flex; gap: 6px; align-items: stretch; flex: none; font-size: 12px; }
.cadre-bas { border: 1px solid var(--bord-fort); border-radius: 3px; padding: 4px 6px; }
.cadre-observation { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* La combo des unites tenait toute la largeur pour trois caracteres. */
.cadre-observation .ligne-reglage select { flex: 0 0 120px; }
/* Chacun prend ce qu'il lui faut, personne ne s'etale : le cadre des totaux
   tenait toute la largeur restante pour trois chiffres. */
.cadre-recap { flex: 0 0 auto; }
.cadre-totaux { flex: 0 0 auto; }
.cadre-taxes { flex: 0 0 auto; }
/* L'observation prend la gauche et s'etire ; les trois cadres de chiffres
   se calent a droite, serres les uns contre les autres. */
.detail-bas > .cadre-recap { margin-left: auto; }
.zone-observation { flex: 1; min-height: 96px; resize: vertical; font: inherit;
    color: inherit; line-height: 1.3; padding: 2px 5px; background: var(--fond-carte);
    border: 1px solid var(--bord); border-radius: 3px; }
.zone-observation:focus { border-color: var(--accent); outline: none; }
.zone-observation:disabled { color: var(--texte-faible); }
.cadre-recap { flex: 0 0 auto; }
.grille-recap { display: grid; grid-template-columns: auto 84px 84px minmax(66px, auto); gap: 2px;
    align-items: center; }
.grille-totaux { display: grid; grid-template-columns: 104px 104px; gap: 2px; }
.detail-bas .titre-cadre { margin: 0 0 3px 0; padding: 1px 0; }
.detail-bas .ligne-reglage { gap: 5px; }
.tete-recap { text-align: center; font-weight: 600; padding: 2px 6px; white-space: nowrap;
    border: 1px solid var(--bord); border-radius: 3px; background: var(--fond-gris); }
.nom-recap { text-align: center; font-weight: 600; padding: 2px 10px;
    border: 1px solid var(--bord); border-radius: 3px; background: var(--fond-gris); }
.case-pr, .case-pv, .case-coef { text-align: right; padding: 2px 8px;
    border: 1px solid var(--bord); border-radius: 3px;
    font-variant-numeric: tabular-nums; }
.case-pr { background: var(--devis-case-pr); }
.case-pv { background: var(--devis-case-pv); }
.case-coef { background: var(--fond-gris); }
.case-pr.grand, .case-pv.grand, .case-coef.grand { font-size: 14px; font-weight: 600; }
.case-coef.seul { text-align: center; }
.ligne-commission { margin-top: 5px; text-align: center; font-size: 11px;
    color: var(--texte-doux); }
.ligne-commission b { color: var(--texte); font-size: 12px; }
.cadre-taxes { flex: 0 0 auto; }
.grille-taxes { display: grid; grid-template-columns: auto 78px 78px 110px; gap: 3px;
    align-items: center; }
.etiq-taxe { font-size: 11px; color: var(--texte-doux); line-height: 1.15; }
.ligne-poids { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.ligne-poids .etiq { font-weight: 600; }
.ligne-poids .valeur-figee.court { width: 92px; text-align: right; }
/* Poids et PV + TAXE se saisissent l'un ou l'autre : le champ garde
   l'apparence de la case qu'il remplace. */
.saisie-taxe { font: inherit; box-sizing: border-box; text-align: right;
    padding: 2px 6px; border: 1px solid var(--accent); border-radius: 3px; }
.grille-taxes .saisie-taxe { width: 100%; }
.note-taxe { margin-top: 4px; font-size: 11px; text-align: right; }
/* Case « Ligne non soumise à la taxe » du cadre TAXES (FEN_devis_detail_ligne). */
.ligne-non-soumise { margin-top: 6px; max-width: 340px; }   /* reste dans ce que la fenêtre montre à 1024 px */
.ligne-non-soumise .note-taxe { text-align: left; }
.ligne-non-soumise label { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.ligne-non-soumise input:disabled + span { color: var(--texte-doux); }
.ligne-non-soumise label:has(input:disabled) { cursor: not-allowed; }

/* Ouvrir un champ RTF en grand : le bouton, puis le redacteur lui-meme. */
.btn-agrandir { flex: none; width: 22px; height: 22px; padding: 0; line-height: 1;
    border: 1px solid var(--bord); border-radius: 3px; background: var(--fond-barre);
    color: var(--texte-doux); cursor: pointer; font-size: 13px; }
.btn-agrandir:hover { border-color: var(--accent); color: var(--accent); }
.cadre-designation { position: relative; }
.cadre-designation .btn-agrandir { align-self: flex-start; }

/* Le redacteur passe devant la fenetre interne qui l'ouvre. Son voile est
   plus clair : superpose a celui de la FI, le fond deviendrait tres sombre. */
.voile.voile-haut { z-index: 70; background: rgba(0,0,0,.12); }
.boite.boite-redacteur { width: 900px; max-width: 94vw; height: 72vh;
    display: flex; flex-direction: column; }
.boite-redacteur > .boite-titre { flex: none; }
.barre-redacteur { display: flex; align-items: center; gap: 6px; flex: none;
    padding: 6px 12px; border-bottom: 1px solid var(--bord); font-size: 12px; }
.barre-redacteur .bouton-plat { width: 26px; padding: 2px 0; text-align: center; }
.barre-redacteur .gras { font-weight: 700; }
.barre-redacteur .italique { font-style: italic; }
.barre-redacteur .souligne { text-decoration: underline; }
.zone-redacteur { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px;
    background: var(--fond-carte); line-height: 1.45; font-size: 13px; }
.zone-redacteur:focus { outline: none; }
.zone-redacteur.figee { background: var(--fond-gris); color: var(--texte-doux); }
/* Ce que le recap de la fenetre laisse dehors : on le dit plutot que de
   laisser croire a un total juste. */
.note-ecarte { margin-top: 5px; font-size: 11px; color: var(--texte-attention);
    background: var(--fond-attention); border: 1px solid #f0d48a; border-radius: 3px;
    padding: 4px 8px; max-width: 420px; }

/* Le pied porte beaucoup de boutons : il passe a la ligne plutot que de deborder */
.pied-devis { flex-wrap: wrap; row-gap: 3px; }


/* Le catalogue : familles, sous-familles, articles, cote a cote. */
.ecran-catalogue { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 4px; }
.corps-catalogue { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 4px 10px; }
.volet-cat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.volet-cat.large { flex: 1.9; }
.volet-cat .table-p11 { flex: 1; min-height: 0; max-height: none; }
.volet-cat table { width: 100%; }
.volet-cat tbody tr { cursor: pointer; }
.volet-cat tbody tr.choisie td { background: var(--accent-clair); }
.volet-cat tbody tr.choisie td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.volet-cat td.lib { white-space: normal; }
.volet-cat .col-nb { width: 88px; text-align: right; }
.volet-cat .col-coef { width: 54px; text-align: right; }
.volet-cat .col-unite { width: 60px; }
.volet-cat .col-montant { width: 84px; text-align: right; }
.actions-cat { display: flex; gap: 4px; padding-top: 4px; }

/* Un onglet par catalogue d'articles (stand, fabrication, sous-traitance). */
.onglets-catalogue {
    display: flex; gap: 2px; padding: 4px 10px 0 10px;
    border-bottom: 1px solid var(--bord);
}
.onglet-cat {
    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-cat:hover { color: var(--texte); background: var(--accent-survol); }
.onglet-cat.actif {
    background: var(--fond-carte); color: var(--texte); font-weight: 600;
    border-color: var(--bord); margin-bottom: -1px;
}

/* Le catalogue pose en fenetre interne prend la hauteur de la boite. */
.boite.fenetre-fi > .ecran-catalogue { flex: 1; min-height: 0; }

/* La fiche d'un article : plus large qu'une boite ordinaire, elle porte
   trois combos et un cadre de tarifs. */
.boite.boite-article { width: 760px; max-width: 94vw; }
.fiche-article { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.champ-centre { text-align: center; }
.champ-centre label { display: block; margin-bottom: 3px; }
.saisie-designation-article { width: 420px; max-width: 100%; text-align: center; }
.avant-modif { font-size: 12px; }
.alerte-nom { display: inline-block; margin-left: 10px; color: var(--rouge); font-size: 12px; }
.creation-version { display: block; margin: 0; }
.grille-article { display: grid; grid-template-columns: 200px 1fr; gap: 6px 10px;
    align-items: center; max-width: 620px; margin: 4px auto 0; }
.cadre-details { border: 1px solid var(--bord-fort); border-radius: 3px; padding: 8px 12px 12px; }
.cadre-details legend { padding: 0 6px; font-weight: 600; text-decoration: underline; }
.ligne-version { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ligne-version input[type=text], .ligne-version select { width: 150px; }
/* Les cases a cocher heritaient de la largeur d'un champ du corps de boite. */
.ligne-version .case { display: inline-flex; align-items: center; gap: 6px; }
.ligne-version .case input[type=checkbox] { width: auto; flex: none; margin: 0; }
.grille-tarif { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.grille-tarif label { display: block; margin-bottom: 3px; font-weight: 600; }
.grille-tarif input { width: 100%; box-sizing: border-box; text-align: right; }
.boite-titre.titre-crea { background: #f0a800; color: #3a2a00; }

.boite.fenetre-fi > .ecran-debourse { flex: 1; min-height: 0; }

/* ==========================================================================
   FEN_Debourse — le debourse d'un devis, pose en fenetre interne.

   Ce bloc a vecu quelques heures dans un Debourse.razor.css : le CSS isole
   de Blazor ne marche pas depuis l'hote bureau (cf. 11quinquies), et la page
   s'affichait sans style, sans erreur. Il revient donc ici.
   ========================================================================== */
/* FEN_Debourse : ce que le devis coute, face a ce qui a ete commande. */
.ecran-debourse { display: flex; flex-direction: column; min-height: 0; gap: 6px;
    padding: 8px 10px 0; font-size: 12px; }
.titre-debourse { text-align: center; font-weight: 600; border: 1px solid var(--bord-fort);
    border-radius: 3px; padding: 4px 10px; }

.table-debourse { flex: 1; min-height: 0; max-height: none; }
.table-debourse table { width: 100%; }
.table-debourse td.lib { white-space: normal; }
.table-debourse .chevron { display: inline-block; width: 12px; color: var(--texte-doux); }
.table-debourse .col-coef { width: 74px; text-align: right; }
.table-debourse .col-qte { width: 82px; text-align: right; }
.table-debourse .col-montant { width: 96px; text-align: right; }
.table-debourse tbody tr { cursor: default; }
.table-debourse tr.famille-mo td { background: #dbe7f6; font-weight: 600; cursor: pointer; }
.table-debourse tr.famille-machine td { background: #e8dff5; font-weight: 600; cursor: pointer; }
.table-debourse tr.famille-matiere td { background: #fdf3d8; font-weight: 600; cursor: pointer; }
.table-debourse tr.famille-autre td { background: var(--fond-gris); font-weight: 600; cursor: pointer; }
.table-debourse tr.famille-horsdevis td { background: #ffe8c8; font-weight: 600; }
.table-debourse tr.poste-debourse td { font-weight: 600; cursor: pointer; }
.table-debourse tr.ligne-debourse td.lib,
.table-debourse tr.ligne-horsdevis td.lib { font-style: italic; font-size: 11px; }
.au-rouge { color: var(--rouge); }
/* 🔴 LE JETON, PAS LA VALEUR EN DUR. Cette regle portait #b06a00, qui ne suit donc
   pas le theme : en sombre elle rendait 3,62 de contraste sur le fond de carte, sous
   le seuil de 4,5 que demande un corps de 11,5 px -- un chiffre lisible en clair et
   limite en sombre, sans que rien ne le signale. Le jeton --orange existe depuis
   toujours dans app.css (#b7601a clair, #ff8c00 sombre) et donne 4,47 et 6,64.
   Mesure du 2026-10-09. */
.a-l-orange { color: var(--orange); }
.au-vert { color: var(--vert); }

/* Le depliage d'une ligne sur ses commandes. Decision de l'utilisateur du 2026-10-09 :
   le « Mtt commande » d'une ligne n'en montrait que la somme.

   ⚠️ UNE TEINTE PLUS PALE ET UNE PUCE, pas une indentation seule : ces lignes ne sont pas
   des postes du devis mais des ACHATS, et les confondre ferait croire a un niveau de plus
   dans l'arbre. Le fond les range visuellement sous leur ligne sans les y agreger. */
.table-debourse tr.ligne-commande-deb td { background: var(--fond-gris); font-size: 11px; }
.table-debourse tr.ligne-commande-deb { cursor: pointer; }
.table-debourse tr.ligne-commande-deb:hover td { background: var(--fond-barre); }
.table-debourse tr.ligne-commande-deb .doux { margin-left: 6px; }

/* La puce prend la place du chevron des lignes au-dessus, pour que les libelles
   s'alignent au lieu de se decaler d'un cran. */
.puce-commande { display: inline-block; width: 4px; height: 4px; border-radius: 50%;
    background: var(--texte-faible); margin: 0 8px 2px 3px; }

.repartition-debourse { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 4px 0 6px; font-size: 11px; }
.repartition-debourse .trait-pied { height: 12px; }

/* Le bandeau : quatre tuiles qui racontent chacune une chose, au lieu de dix
   cases alignees. Les memes nombres, mais chacun a cote de celui qui l'eclaire. */
.bandeau-debourse { display: flex; align-items: stretch; gap: 8px; }
.tuile-deb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
    border: 1px solid var(--bord); border-radius: 4px; padding: 6px 10px 7px;
    background: var(--fond-carte); }
.tete-tuile { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--texte-doux); font-weight: 600; }
.chiffre-vedette { font-size: 21px; font-weight: 600; line-height: 1.1;
    font-variant-numeric: tabular-nums; }

/* Deux chiffres de MEME RANG dans une tuile -- le coefficient prevu et le reel.
   Demande de l'utilisateur du 2026-10-09 : le reel etait en pied de tuile, donc lu
   comme une annotation du prevu.

   ⚠️ ILS SE REPLIENT L'UN SOUS L'AUTRE QUAND LA TUILE EST TROP ETROITE, et c'est
   explicitement permis -- « cote a cote (ou l'une sous l'autre, au meme gabarit) ».
   La legende « reel sur ce qui est commandé » fait a elle seule ~160 px a 11 px,
   contre ~275 px de tuile utile a 1366 : le repli est le cas NORMAL a cette largeur,
   pas une degradation. Le `gap` vertical est donc celui d'une pile lisible.

   La tuile garde la hauteur des trois autres sans rien faire : `.bandeau-debourse`
   est en `align-items: stretch` et `.pied-tuile` porte `margin-top: auto`, donc
   l'ecart reste colle au bas quelle que soit la hauteur imposee par la plus haute. */
.duo-vedette { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.volet-vedette { min-width: 0; }
.unite-vedette { font-size: 13px; font-weight: 400; color: var(--texte-doux); }
.sous-chiffre { font-size: 11px; color: var(--texte-doux); }

/* Une barre vaut mieux qu'un pourcentage a lire : la proportion se voit. */
.barre-marge { display: flex; height: 7px; border-radius: 4px; overflow: hidden;
    background: var(--fond-gris); margin: 4px 0 2px; }
.barre-marge > span { display: block; height: 100%; }
.part-revient { background: #c8c6c4; }
.part-marge { background: var(--vert); }
.part-marge.a-l-orange { background: #e08a00; }
.part-marge.au-rouge { background: var(--rouge); }
.part-engagee { background: var(--accent); }
.part-humain { background: #4a7fc1; }
.part-machine { background: #9b7fc1; }
.pastille-humain, .pastille-machine { width: 8px; height: 8px; border-radius: 2px;
    display: inline-block; flex: none; }
.pastille-humain { background: #4a7fc1; }
.pastille-machine { background: #9b7fc1; }

.pied-tuile { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px;
    margin-top: auto; }
.pied-tuile.colonne { flex-direction: column; gap: 2px; align-items: stretch; }
.ligne-tuile { display: flex; align-items: center; gap: 6px; }
.ligne-tuile b { font-variant-numeric: tabular-nums; }

.bascule-consolide { flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    text-align: center; font-size: 11px; line-height: 1.25; padding: 0 4px; }
.bascule-consolide .bascule { border: none; padding: 0; cursor: pointer; }

/* Le second plan du debourse : les memes montants, mais en barres. Une
   proportion se voit mieux qu'elle ne se lit. */
.plans-debourse { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); }
.onglet-plan { border: 1px solid transparent; border-bottom: none; background: none;
    padding: 4px 14px; font: inherit; cursor: pointer; color: var(--texte-doux);
    border-radius: 3px 3px 0 0; margin-bottom: -1px; }
.onglet-plan:hover { color: var(--texte); }
.onglet-plan.actif { background: var(--fond-carte); border-color: var(--bord);
    color: var(--texte); font-weight: 600; }

.plan-repartition { flex: 1; min-height: 0; overflow: auto; padding: 8px 2px 4px;
    display: flex; flex-direction: column; gap: 14px; }
.bloc-repart { display: flex; flex-direction: column; gap: 5px; }

.barre-empilee { display: flex; height: 12px; border-radius: 3px; overflow: hidden;
    background: var(--fond-gris); }
.barre-empilee.grande { height: 26px; border-radius: 4px; }
.barre-empilee .segment { display: flex; align-items: center; justify-content: center;
    height: 100%; min-width: 0; }
.etiquette-segment { color: #fff; font-size: 11px; font-weight: 600; }
.nature-mo { background: #4a7fc1; }
.nature-machine { background: #9b7fc1; }
.nature-matiere { background: #d9a441; }
.pastille { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: none; }

.legende-repart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font-size: 11.5px; }
.entree-legende { display: inline-flex; align-items: baseline; gap: 5px; }
.entree-legende .pastille { align-self: center; }

/* Un poste par ligne : son nom, sa barre, sa part, son montant. */
.ligne-repart { display: grid; grid-template-columns: 210px 1fr 54px 92px;
    gap: 8px; align-items: center; font-size: 11.5px; }
.nom-poste { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-poste, .montant-poste { text-align: right; font-variant-numeric: tabular-nums; }
/* ======================================================================
   FEN_Editeur_Template_Devis — les modeles de mise en page du PDF.
   Trois volets : les modeles, les reglages en onglets, l'apercu.
   ====================================================================== */
.boite.fenetre-fi > .ecran-editeur-tpl { flex: 1; min-height: 0; }
.ecran-editeur-tpl { display: flex; flex-direction: column; min-height: 0; }
.corps-tpl { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 8px; }

/* --- le volet des modeles --- */
.volet-modeles { flex: 0 0 210px; display: flex; flex-direction: column; min-height: 0;
    border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); }
.liste-modeles { flex: 1; min-height: 0; overflow: auto; padding: 4px; }
.ligne-modele { display: flex; align-items: baseline; gap: 8px; width: 100%;
    padding: 4px 8px; border: none; background: none; font: inherit; text-align: left;
    color: var(--texte); cursor: pointer; border-radius: 2px; }
.ligne-modele:hover { background: var(--accent-survol); }
.ligne-modele.choisi { background: var(--accent-clair); color: var(--accent-fonce); }
.ligne-modele .rang { color: var(--texte-faible); font-size: 11px; flex: none; width: 12px; }
.ligne-modele .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-style: italic; }
.ligne-modele.defaut .nom { font-style: normal; font-weight: 600; }
.ligne-modele.inactif .nom { color: var(--texte-faible); text-decoration: line-through; }
.vide-modeles { padding: 12px; color: var(--texte-doux); font-size: 12px; line-height: 1.5; }
.pied-modeles { flex: none; display: flex; gap: 6px; padding: 8px;
    border-top: 1px solid var(--bord); }
.pied-modeles .btn-carre { flex: 1; justify-content: center; }

/* --- le volet des reglages --- */
.volet-reglages { flex: 0 0 380px; display: flex; flex-direction: column; min-height: 0;
    border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); }
.onglets-tpl { flex: none; display: flex; border-bottom: 1px solid var(--bord);
    background: var(--fond-gris); overflow-x: auto; }
.onglets-tpl .onglet-plan { padding: 6px 10px 4px 10px; font-size: 12px; }
.corps-onglet { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px 16px 14px; }

.titre-section-tpl { margin: 14px 0 8px 0; padding-bottom: 3px;
    border-bottom: 1px solid var(--bord); color: var(--accent-fonce);
    font-size: 11px; font-weight: 600; letter-spacing: .6px; }
.corps-onglet > .titre-section-tpl:first-child { margin-top: 2px; }
.etiq-tpl { display: block; margin-bottom: 3px; color: var(--texte-doux); font-size: 12px; }
.saisie-tpl { width: 100%; padding: 4px 6px; margin-bottom: 10px;
    border: 1px solid var(--bord-fort); border-radius: 2px; background: var(--fond-gris);
    font: inherit; color: var(--texte); }
.saisie-tpl:disabled { color: var(--texte-faible); }
.saisie-tpl.courte { width: 100%; }
.saisie-tpl.zone-texte { resize: vertical; line-height: 1.45; }
.saisie-tpl.code-tpl { resize: vertical; font-family: Consolas, "Courier New", monospace;
    font-size: 11.5px; line-height: 1.4; white-space: pre; }
.note-tpl { margin: 0 0 10px 0; color: var(--texte-doux); font-size: 11.5px; line-height: 1.5; }
.note-tpl code { font-family: Consolas, "Courier New", monospace; }
.boutons-gabarit { display: flex; justify-content: flex-end; }

.ligne-option { display: flex; align-items: center; gap: 10px; padding: 7px 0;
    border-bottom: 1px solid var(--fond-gris); }
.ligne-option > span:first-child { flex: 1; min-width: 0; }
.ligne-option .bascule { border: none; padding: 0; cursor: pointer; }
.ligne-option .bascule:disabled { cursor: default; opacity: .5; }

.ligne-couleur { display: flex; align-items: center; gap: 8px; }
.ligne-couleur .saisie-tpl { flex: 1; min-width: 0; }
.pastille-couleur { flex: none; width: 34px; height: 24px; margin-bottom: 10px;
    padding: 0; border: 1px solid var(--bord-fort); border-radius: 2px;
    background: none; cursor: pointer; }
.pastille-couleur:disabled { cursor: default; }

.bloc-logo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.apercu-logo { max-height: 48px; max-width: 150px; border: 1px solid var(--bord); padding: 2px; }
.choix-logo { cursor: pointer; }
.choix-logo input[type=file] { display: none; }

/* --- les cases de l'onglet Colonnes --- */
.grille-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.carte-colonne { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    border: 1px solid var(--bord-fort); border-radius: 3px; cursor: pointer; }
.carte-colonne.cochee { border-color: var(--accent); background: var(--accent-survol); }
.carte-colonne .texte-carte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.carte-colonne small { color: var(--texte-faible); font-size: 10.5px; font-style: italic; }
.carte-colonne input[type=checkbox] { flex: none; accent-color: var(--accent);
    width: 15px; height: 15px; }
.carte-vide { border: none; }

/* --- l'apercu --- */
.volet-apercu { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0;
    border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); }
.volet-apercu .titre-cadre { flex: none; text-align: left; padding-left: 8px; }
.cadre-apercu { flex: 1; min-height: 0; width: 100%; border: none; background: #fff; }

/* --- le pied : l'info a gauche, la bascule et les boutons a droite --- */
.pied-tpl { flex: none; display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-top: 1px solid var(--bord); background: var(--fond-gris); }
.pied-tpl .pousse { flex: 1; }
.info-tpl { color: var(--texte-doux); font-size: 11.5px; }
.bascule-mode { display: flex; align-items: center; gap: 8px; margin-right: 8px; }
.bascule-mode .bascule { border: none; padding: 0; cursor: pointer; }
/* L'apercu du devis avant impression (FEN_Apercu_Devis) : le document tient
   toute la boite, l'iframe l'isole du CSS de l'application. */
.boite.fenetre-fi.fi-apercu { width: 1100px; max-width: 96vw; height: 92vh; }
.cadre-apercu-devis { flex: 1; min-height: 0; width: 100%; border: none; background: #fff; }
/* FI_Mode_Rglt_Multiples_Affichage : les echeances du devis. */
.boite.fenetre-fi.fi-conditions { width: 880px; max-width: 94vw; height: auto; max-height: 86vh; }
.ecran-conditions { display: flex; flex-direction: column; min-height: 0; padding: 10px 12px 0 12px; }
.ecran-conditions .titre-cadre { flex: none; text-align: left; padding: 4px 8px; }
.corps-conditions { flex: 1; min-height: 0; overflow: auto; padding-top: 8px; }
.corps-conditions .table-p11 { max-height: none; }
.corps-conditions .col-nb { width: 70px; text-align: right; }
.vide-conditions { padding: 14px 4px; color: var(--texte-doux); line-height: 1.6; }
.vide-conditions p { margin: 6px 0 0 0; }

/* La saisie des echeances, a la maniere de l'onglet Compta de la fiche
   societe. Les memes regles y portent d'autres noms, dans societes.css :
   elles monteront dans app.css le jour ou les deux ecrans seront poses. */
.entete-echeances { display: flex; align-items: center; gap: 6px; padding: 8px 2px 2px 2px; }
.entete-echeances .pousse { flex: 1; }
.entete-echeances .doux { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.entete-echeances .jeton.origine {
    flex: none; background: var(--fond-attention); border-color: var(--bord-attention); color: var(--orange);
}
.table-echeances-devis { width: 100%; border-collapse: collapse; margin-top: 4px; }
.table-echeances-devis 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-devis td { padding: 2px 4px; vertical-align: middle; }
.table-echeances-devis select, .table-echeances-devis 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-devis .col-nb { width: 88px; }
.table-echeances-devis .col-nb input { text-align: right; }
.table-echeances-devis .col-outils { width: 58px; white-space: nowrap; }
.table-echeances-devis .col-outils .bouton-plat { padding: 0 5px; }

.verdict-echeances {
    display: flex; align-items: baseline; gap: 8px; line-height: 1.35;
    margin-top: 10px; padding: 5px 9px; border-radius: var(--r);
    border: 1px solid var(--bord); background: var(--fond-barre);
}
.verdict-echeances .total-echeances { font-weight: 600; font-size: 15px; white-space: nowrap; }
.verdict-echeances.faux { border-color: var(--rouge); background: var(--fond-carte); color: var(--rouge); }
.verdict-echeances.faux .doux { color: inherit; }
/* La grille en cours de composition : chaque ligne dit ou elle en est.
   Tout tient sur une seule rangee, qui ne se replie qu'a l'etroit : empilee,
   elle poussait la table et decalait le volet de droite. */
.actions-ligne { flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.actions-ligne .bouton-plat.retirer:hover:not(:disabled) {
    border-color: var(--rouge); color: var(--rouge);
}
.trait-actions { width: 1px; align-self: stretch; margin: 2px 3px; background: var(--bord); }
.etat-grille {
    padding: 3px 8px; border-radius: var(--r); white-space: nowrap;
    border: 1px solid var(--accent-clair); background: var(--accent-survol);
    font-size: 12px; line-height: 1.35;
}
.etat-grille.attente { border-color: var(--bord-attention); background: var(--fond-attention); color: var(--orange); }
.etat-grille.attente .doux { color: inherit; }

.table-devis tr.ligne-neuve td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
.table-devis tr.ligne-retouchee td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.table-devis tr.ligne-a-supprimer td { color: var(--texte-faible); text-decoration: line-through; }
.table-devis tr.ligne-a-supprimer td:first-child {
    box-shadow: inset 3px 0 0 var(--rouge); text-decoration: none;
}
/* Une ligne qui attend son deboursé ne partira pas en base : on le montre. */
.table-devis tr.ligne-en-attente td { background: #fdf7ee; }
.table-devis tr.ligne-en-attente td:first-child::after {
    content: 'attend son déboursé'; margin-left: 6px; padding: 0 5px;
    border-radius: 9px; background: #f7e3c6; color: #8a5a12;
    font-size: 10px; line-height: 15px; white-space: nowrap;
}
.etat-grille.doublons { border-color: #e9b8bb; background: var(--fond-danger); color: var(--rouge); }
.etat-grille.doublons .doux { color: inherit; }
/* La saisie des postes dans le debourse. */
.table-postes .saisie-poste { width: 100%; min-width: 0; height: 21px; padding: 0 4px;
    font: inherit; text-align: right; color: var(--texte);
    background: transparent; border: 1px solid transparent; border-radius: 2px; }
.table-postes .saisie-poste:hover { border-color: var(--bord); background: var(--fond-carte); }
.table-postes .saisie-poste:focus { border-color: var(--accent); background: var(--fond-carte);
    outline: none; }
.table-postes .saisie-poste::-webkit-outer-spin-button,
.table-postes .saisie-poste::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.table-postes input[type=number].saisie-poste { -moz-appearance: textfield; }
.table-postes .col-retirer { width: 26px; text-align: center; }
.table-postes .col-retirer .bouton-plat { padding: 0 4px; }
.bloc-postes .titre-cadre { display: flex; align-items: center; justify-content: center; gap: 6px; }
.bloc-postes .ajout-poste { padding: 0 7px; line-height: 17px; }
/* ======================================================================
   FEN_Facturation_Devis : facturer un devis par situations.
   ====================================================================== */
.boite.fenetre-fi.fi-facturation { width: 1560px; max-width: 98vw; height: 94vh; }
.boite.fenetre-fi > .ecran-facturation { flex: 1; min-height: 0; }
.ecran-facturation { display: flex; flex-direction: column; min-height: 0; padding: 8px 10px 0 10px; gap: 8px; }

.entete-fac { flex: none; display: flex; align-items: flex-start; gap: 14px; }
.titres-fac { flex: 1; min-width: 0; }
.titre-fac { font-size: 17px; font-weight: 600; color: var(--accent-fonce); }
.bloc-description { flex: 0 0 380px; }
.etiq-fac { font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--texte-doux); }
.bloc-description .saisie-tpl { margin-bottom: 0; text-align: center; font-weight: 600; }
.jeton-fac { flex: none; align-self: center; padding: 6px 14px; border: 1px solid var(--bord-fort);
    border-radius: var(--r); background: var(--fond-carte); font-weight: 600; }

.cadre-avancement { flex: none; border: 1px solid var(--bord); border-radius: var(--r);
    background: var(--fond-barre); padding: 6px 10px 10px 10px; }
.ligne-avancement { display: flex; align-items: baseline; }
.ligne-avancement .pousse { flex: 1; }
.lib-avancement { font-size: 15px; font-weight: 600; color: var(--devis-accent-texte); }
.pct-avancement { font-size: 22px; font-weight: 700; color: var(--accent-fonce); }
.jauge-fac { height: 10px; border-radius: 5px; background: var(--bord); overflow: hidden; margin: 4px 0 8px 0; }
.jauge-fac span { display: block; height: 100%; background: var(--accent); }
.tuiles-fac { display: flex; gap: 8px; }
.tuile-fac { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--bord);
    border-radius: var(--r); background: var(--fond-carte); text-align: center; }
.tuile-fac.vedette { background: var(--devis-fac-vedette); border-color: var(--devis-fac-vedette-bord); }
.chiffre-fac { font-size: 17px; font-weight: 700; }
.chiffre-fac.vert { color: var(--vert); }
.chiffre-fac.rouge { color: var(--rouge); }
.chiffre-fac.orange { color: var(--orange); }

.corps-fac { flex: 1; min-height: 0; display: flex; gap: 8px; }
.volet-fac { flex: 0 0 265px; display: flex; flex-direction: column; min-height: 0;
    overflow: auto; border: 1px solid var(--bord); border-radius: var(--r);
    background: var(--fond-carte); padding: 0 10px 10px 10px; }
.volet-fac .titre-cadre { margin-top: 10px; text-align: left; padding-left: 6px; }
.choix-fac { display: flex; gap: 14px; padding: 5px 2px; }
.choix-fac label { display: flex; align-items: center; gap: 5px; }
.ligne-globale { display: flex; align-items: center; gap: 6px; }
.ligne-globale .saisie-tpl { flex: 1; min-width: 0; margin-bottom: 0; }
.suffixe-global { flex: none; font-weight: 600; color: var(--texte-doux); }
.note-tpl.plafond { color: var(--orange); }
.liste-historique { margin-top: 6px; font-size: 12px; }
.ligne-historique { display: flex; align-items: baseline; gap: 6px; padding: 3px 2px;
    border-bottom: 1px solid var(--fond-gris); }
.hist-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-montant { flex: none; font-weight: 600; }

.volet-lignes { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.volet-lignes .titre-cadre { flex: none; text-align: left; padding-left: 8px; }
.table-lignes-fac { flex: 1; min-height: 0; max-height: none; }
/* La désignation est la colonne qui porte le sens : elle prend ce qui reste.
   En largeur automatique, les en-têtes (« Cumul après situation ») tiraient
   les colonnes de chiffres et l'écrasaient. */
.table-lignes-fac table { table-layout: fixed; width: 100%; }
.table-lignes-fac th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
.table-lignes-fac td.lib { white-space: normal; }
.table-lignes-fac .col-nb { width: 68px; text-align: right; }
.table-lignes-fac .col-montant { width: 92px; text-align: right; }
.table-lignes-fac .saisie-poste { width: 100%; }
.table-lignes-fac tr.ligne-titre td { background: var(--devis-fac-titre); font-weight: 700; }
.table-lignes-fac tr.ligne-soustitre td { background: var(--devis-fac-soustitre); font-weight: 600; }
.table-lignes-fac tr.ligne-detail-fac td.lib { font-style: italic; }
.table-lignes-fac .col-tva-lig { width: 104px; text-align: center; }
.table-lignes-fac .saisie-tva-lig { width: 100%; min-width: 0; height: 22px; padding: 0 2px;
    font: inherit; background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: 2px; }

.cadres-taxes { flex: none; display: flex; gap: 8px; }
.cadre-taxe { flex: 1; min-width: 0; border: 1px solid var(--bord); border-radius: var(--r);
    background: var(--fond-carte); padding: 0 10px 8px 10px; }
.cadre-taxe .titre-cadre { text-align: left; padding-left: 6px; margin-top: 8px; }
.ligne-taxe { display: flex; align-items: baseline; padding: 2px 4px; font-size: 12px; }
.ligne-taxe span { flex: 1; min-width: 0; color: var(--texte-doux); }
.ligne-taxe.reste { border-top: 1px solid var(--bord); margin-top: 3px; padding-top: 4px; }

.totaux-fac { flex: none; display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--bord); }
.total-fac { flex: 1; min-width: 0; text-align: center; }

/* Les menus du deboursé s'ouvrent par-dessus une FI, dont le voile est a 60 :
   sans cela ils s'affichaient derriere, et le bouton Parametre paraissait mort.
   Les deux etages se tiennent, ne les changez que par paire. */
.menu-sur-fi { z-index: 71; }
.voile-sur-fi { position: fixed; inset: 0; z-index: 70; }

/* INT_ModeArticle : un interrupteur sobre, pas un gros bouton. */
.bascule-mode { display: inline-flex; align-items: center; padding: 1px;
    background: var(--fond-gris); border: 1px solid var(--bord); border-radius: 10px; }
.bascule-mode button { padding: 1px 9px; font: inherit; font-size: 11px; line-height: 16px;
    background: none; border: none; border-radius: 9px; color: var(--texte-doux);
    cursor: pointer; white-space: nowrap; }
.bascule-mode button.actif { background: var(--fond-carte); color: var(--texte);
    font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }


/* Un montant qui depasse se coupe, il ne va pas chevaucher la case d'a cote :
   une saisie de 1 111 heures a 45 EUR produit des nombres a quinze chiffres. */
.grille-recap span, .grille-totaux span, .grille-taxes span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.table-postes td { overflow: hidden; text-overflow: ellipsis; }

/* Un numero de version deja pris : on le dit avant d'enregistrer. */
.saisie-tpl.faux { border-color: var(--rouge); }
.alerte-courte { flex: none; color: var(--rouge); font-size: 11px; white-space: nowrap; }

/* FEN_Importer_Devis : la liste des devis dont on peut reprendre les lignes. */
.boite-import { width: 980px; max-width: 95vw; height: 74vh; display: flex;
    flex-direction: column; }
.boite-import .boite-corps { flex: 1; min-height: 0; display: flex;
    flex-direction: column; gap: 6px; }
/* .table-p11 plafonne à 300 px ; dans une boîte haute de 74vh, la table
   s'arrêtait au milieu et laissait un grand blanc dessous. */
.table-import { flex: 1; min-height: 0; max-height: none; }
.table-import .col-nb { width: 64px; text-align: right; }
.table-import .col-montant { width: 100px; text-align: right; }
.table-import .col-famille { width: 120px; }
.table-import tbody tr:hover td { background: var(--accent-survol); }

/* ===================================================================
   Le plan de choix de FEN_Prod_Devis_V2021_10_TX : la recherche de devis.

   Les criteres tiennent dans un volet a gauche, le tableau prend toute la
   hauteur a droite -- comme la recherche de commandes. Sur un ecran de
   recherche, les criteres se relisent du coin de l'oeil ; ce sont les
   resultats qu'on regarde.
   ========================================================================== */
.ecran-devis .grille-rech { flex: 1; min-height: 0; display: grid; gap: 8px;
    grid-template-columns: 420px minmax(0, 1fr); }
@media (max-width: 1250px) {
    .ecran-devis .grille-rech { grid-template-columns: 330px minmax(0, 1fr); }
}
.ecran-devis .grille-rech > section { display: flex; flex-direction: column; min-height: 0; }
.ecran-devis .criteres-rech { overflow: auto; }
.ecran-devis .criteres-rech .grille-criteres { grid-template-columns: 118px minmax(0, 1fr); }
.ecran-devis .criteres-rech .grille-criteres > label { font-size: 12px; }
.ecran-devis .jetons-etats { margin-top: 10px; flex-wrap: wrap; }
.ecran-devis .liste-rech { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ecran-devis .table-rech { flex: 1; min-height: 0; max-height: none; }

.table-rech .col-version { width: 34px; text-align: center; }
.table-rech .col-ville { width: 110px; }
.table-rech .col-etat-dv { width: 108px; }
.table-rech td.col-numero { font-variant-numeric: tabular-nums; }
.table-rech td.lib { white-space: normal; }
.table-rech tbody tr:hover td { background: var(--accent-survol); }

/* Un devis de l'ancienne generation ne s'ouvre pas ici : la ligne le dit en
   restant terne, et son bouton d'ouverture est desactive. */
.table-rech tr.devis-ancien td { color: var(--texte-faible); }
.jeton.t-ancien { background: var(--fond-gris); color: var(--texte-doux);
    border: 1px solid var(--bord); }
.jeton.t-type { background: var(--accent-clair); color: var(--accent-fonce);
    border: 1px solid var(--accent); }
.jeton.t-figee { background: #fff3cd; color: #965000; border: 1px solid #f0d48a; }

.somme-rech { display: flex; align-items: center; gap: 8px; padding: 5px 10px;
    border-top: 1px solid var(--bord-fort); background: var(--fond-gris); font-size: 12px; }


/* Valider reste cliquable quand il est grisé : le clic dit ce qui manque,
   un bouton muet ne dit rien à celui qui ne sait pas pourquoi. */
.btn-carre.grise { opacity: .55; }
.btn-carre.grise:hover { opacity: .85; }

.liste-manques { margin: 0; padding-left: 20px; }
.liste-manques li { margin-bottom: 7px; }

/* ==========================================================================
   DevisAncien.razor : un devis de l'ANCIENNE generation, en lecture.
   Le modele est plat -- pas de hierarchie, donc pas de retraits : une table
   de lignes a gauche, l'en-tete et les recaps a droite.
   ========================================================================== */
.ecran-devis-anc .table-anc { flex: 1; min-width: 0; min-height: 0; max-height: none; }
.table-anc .col-categ { width: 150px; }
.table-anc .col-qte { width: 56px; text-align: right; }
.table-anc .col-coef { width: 70px; text-align: right; }
.table-anc .col-eur { width: 94px; text-align: right; }
.table-anc td.col-numero { font-variant-numeric: tabular-nums; }
.table-anc td.lib { white-space: normal; }
.table-anc td.designation p { margin: 0; }
.table-anc td.sans-vente { color: var(--texte-faible); }
.table-anc tbody tr:hover td { background: var(--accent-survol); }

.jeton.t-lecture { background: var(--fond-gris); color: var(--texte-doux);
    border: 1px solid var(--bord-fort); }

.table-recap-anc { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.table-recap-anc th { text-align: left; color: var(--texte-doux); font-weight: 500;
    border-bottom: 1px solid var(--bord); padding: 2px 3px; }
.table-recap-anc td { padding: 2px 3px; }
.table-recap-anc .a-droite { text-align: right; font-variant-numeric: tabular-nums; }
.table-recap-anc tfoot td { border-top: 1px solid var(--bord-fort); font-weight: 600; }

.bloc-prix .prix-devis { border-top: 1px solid var(--bord-fort); margin-top: 4px;
    padding-top: 4px; font-size: 14px; }
.bloc-devis .total-bloc { border-top: 1px solid var(--bord); margin-top: 3px; padding-top: 3px; }
.ecart-anc { margin-top: 6px; line-height: 1.4; }

/* ------------------------------------------------------------------
   FEN_Choix_Type_Avenant -- la boite « Nouvel avenant / TS ».

   Les deux choix sont des LIGNES-BOUTONS : toute la ligne est cliquable, le
   libelle a gauche, le numero de la serie a droite. Meme motif que la boite de
   pose du planning, pour que deux ecrans ne presentent pas un choix de deux
   facons differentes.
   ------------------------------------------------------------------ */
.boite-avenant { width: min(460px, calc(100vw - 32px)); }

.choix-avenant { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }

.choix-avenant > button {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    width: 100%; padding: 7px 10px; text-align: left; cursor: pointer;
    background: var(--fond-gris); color: var(--texte);
    border: 1px solid var(--bord); border-left: 3px solid var(--bord-fort);
    border-radius: 3px; font-size: 12.5px;
}

.choix-avenant > button:hover:not(:disabled) {
    background: var(--accent-survol); border-left-color: var(--accent);
}

.choix-avenant > button:disabled { opacity: .55; cursor: default; }

.choix-avenant .quoi { font-weight: 600; }

.choix-avenant .numero {
    color: var(--texte-doux); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* En-tête du devis : les cinq champs se saisissent tant que le devis est composable. */
.champ-devis input.court { width: 74px; text-align: right; }
.champ-devis select.taux-tva { min-width: 0; max-width: 180px; }
.deux-dates input[type=date] { width: 100%; min-width: 0; }

/* Panneau « Présentation » de l'aperçu d'export (réglage d'entité, replié par défaut). */
.panneau-presentation { border-bottom: 1px solid var(--bord); padding: 4px 10px; font-size: 12px; max-height: 40%; overflow: auto; }
.panneau-presentation summary { cursor: pointer; font-weight: 600; }
.presentation-reglages { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; align-items: center; margin: 6px 0; }
.presentation-reglages input, .presentation-reglages select { width: 120px; }
.presentation-lignes { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.presentation-actions { display: flex; gap: 8px; margin: 6px 0; }

/* Assistant « Logistique » : une boîte, l'aide au calcul en grille, puis la liste des articles. */
.boite.fenetre-fi.fi-logistique { width: min(1000px, 96vw); height: auto; max-height: 90vh; }
.fi-logistique > .boite-corps { flex: 1 1 auto; min-height: 0; overflow: auto; }
.fi-logistique > .boite-boutons { flex: none; align-items: center; }
/* Le guide : le tunnel de l'application, posé en boîte par-dessus le devis. */
.fi-logistique-guide { width: min(900px, 96vw); height: min(680px, 92vh); }
.fi-logistique-guide .tunnel-pied { align-items: center; }
.logistique-section { margin-bottom: 14px; }
.logistique-section h4 { margin: 0 0 6px; font-size: 13px; color: var(--devis-accent-texte); border-bottom: 1px solid var(--bord); padding-bottom: 3px; }
.logistique-equipe { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin-bottom: 8px; }
.champ-equipe { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--texte-doux); }
.champ-equipe input { width: 90px; text-align: right; }
.champ-equipe.large { margin: 0 0 8px; }
.champ-equipe.large input { width: 260px; text-align: left; }
.logistique-equipe .bouton-plat { margin-left: auto; }
.logistique-total { font-size: 13px; }
.ligne-type { display: flex; gap: 6px; align-items: center; }
.ligne-type select { min-width: 220px; height: 26px; }
.ligne-type .bouton-plat { margin-left: 0; }
.logistique-total.a-gauche { margin-right: auto; }
.table-logistique { width: 100%; border-collapse: collapse; }
.table-logistique th, .table-logistique td { border-bottom: 1px solid var(--bord); padding: 3px 6px; text-align: left; white-space: nowrap; }
.table-logistique .nb { text-align: right; }
.table-logistique .libelle { width: 100%; overflow: hidden; text-overflow: ellipsis; }
.table-logistique tfoot th { border-bottom: 0; font-weight: 600; }
.table-logistique .saisie-nb { width: 80px; text-align: right; }

/* ==== FEN_DEVIS_Menuiserie_Agencement_2025 : le bloc « Entête » du volet de droite ====
   Le motif des fiches et des tunnels : titre de section, libelle AU-DESSUS du champ, champs pleine largeur,
   meme hauteur, bordure fine, coins arrondis, focus visible. Reprend .champ / .titre-section d'app.css. */
.entete-devis .champ { margin-bottom: 10px; }
.entete-devis .champ label { display: block; margin-bottom: 3px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.entete-devis .champ input, .entete-devis .champ select {
    width: 100%; height: 30px; padding: 5px 8px; font: inherit; min-width: 0; text-overflow: ellipsis;
    background: var(--fond-carte); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: var(--r); }
.entete-devis .champ input:focus, .entete-devis .champ select:focus,
.entete-devis .cadre-titre-devis:focus { outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent); }
.entete-devis .champ input:disabled, .entete-devis .champ select:disabled { color: var(--texte-faible); }
.entete-devis .saisie-agrandie { display: flex; gap: 6px; align-items: flex-start; }
.entete-devis .cadre-titre-devis { text-align: left; font-size: 13px; }
.entete-devis .cadre-titre-devis::placeholder { color: var(--texte-faible); font-style: italic; text-align: left; }
.entete-devis .entete-cree { margin-bottom: 8px; color: var(--texte-doux); }
.entete-devis .valeur-figee { padding: 6px 0; }
.entete-devis .valeur-figee.validite { color: var(--rouge); font-weight: 600; }
.entete-devis .entete-pct { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.entete-devis .avec-suffixe { position: relative; display: block; }
.entete-devis .avec-suffixe > input { padding-right: 22px; text-align: right; }
.entete-devis .avec-suffixe > span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    color: var(--texte-faible); pointer-events: none; }

/* La question « fabriqué en interne / sous-traité » : la boîte d'avenant, une phrase sous chaque choix. */
.choix-avenant.empile > button { flex-direction: column; align-items: flex-start; gap: 2px; }
.choix-avenant .phrase { color: var(--texte-doux); font-size: 12px; font-weight: 400; }
.entete-devis .entete-pct .champ label { white-space: normal; line-height: 1.2; min-height: 2.4em; }

/* BTN_Ajout_ligne : le choix d'un article en cascade, catalogue > famille > sous-famille > article. */
.boite.fenetre-fi.fi-cascade { width: min(1000px, 96vw); height: min(620px, 90vh); }
.cascade-filtre { flex: none; padding: 8px 14px 0; }
.cascade-filtre input { width: 100%; }
.cascade-corps { flex: 1 1 auto; min-height: 0; display: flex; padding: 8px 14px; }
.cascade { flex: 1; min-height: 0; display: flex; gap: 8px; outline: none; }
.cascade-colonne { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    border: 1px solid var(--bord); border-radius: var(--r); }
.cascade-colonne.active { border-color: var(--accent); }
.cascade-titre { flex: none; padding: 4px 8px; font-size: 12px; font-weight: 600; background: var(--fond-gris);
    border-bottom: 1px solid var(--bord); }
.cascade-liste { flex: 1; min-height: 0; overflow: auto; }
.cascade-item { display: flex; width: 100%; gap: 8px; align-items: baseline; text-align: left; padding: 4px 8px;
    background: none; border: 0; border-bottom: 1px solid var(--bord); cursor: pointer; }
.cascade-item .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cascade-item:hover { background: var(--accent-survol); }
.cascade-item.choisi { background: var(--accent-clair); font-weight: 600; }
.cascade-vide { padding: 8px; }
.cascade-case { flex: none; margin: 0; align-self: center; }
/* `.boite-corps input` (app.css) met tout input de la boite a 100 % x 30 px : une case y faisait 218 px et
   repoussait le nom de l'article hors champ. */
.boite-corps input.cascade-case { width: 16px; height: 16px; padding: 0; }
.cascade-resultats { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--bord); border-radius: var(--r); }
.cascade-resultats .ligne-article.choisie { background: var(--accent-clair); }
.cascade-quantite { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.cascade-quantite input { width: 80px; text-align: right; }
.boite-boutons .cascade-quantite { margin-right: 8px; }

/* Les trois vues de l'ancien devis stand : un sélecteur au-dessus de la grille. */
.vues-grille { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }

/* « Partir d'un modèle » : une recherche, des groupes repliables, une ligne par modèle (lisible à 50 et plus). */
.boite.boite-modeles { width: min(680px, 94vw); }
.boite-modeles .recherche-compacte.pleine { width: 100%; margin: 4px 0 8px; }
.liste-modeles { max-height: 46vh; overflow: auto; border: 1px solid var(--bord); border-radius: var(--r); }
.groupe-modeles { display: block; width: 100%; text-align: left; padding: 4px 8px; font-weight: 600; font-size: 12px;
    background: var(--fond-gris); border: 0; border-bottom: 1px solid var(--bord); cursor: pointer; }
.ligne-modele { display: grid; grid-template-columns: minmax(0, 1fr) 60px 140px 82px; gap: 8px; align-items: baseline;
    padding: 4px 8px; border-bottom: 1px solid var(--bord); cursor: pointer; }
.ligne-modele:hover { background: var(--accent-survol); }
.ligne-modele.choisie { background: var(--accent-clair); font-weight: 600; }
.ligne-modele .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-modele.vide { display: flex; gap: 12px; margin-top: 8px; border: 1px solid var(--bord); border-radius: var(--r); }

/* Les boîtes de modèles (Enregistrer comme modèle, Poser une structure, fiche) : la grille maison « champs-fiche »,
   avec une colonne de libellés resserrée pour que les champs prennent la largeur de la boîte. */
.boite-corps .champs-fiche { grid-template-columns: 96px minmax(0, 1fr); }
.boite-corps .champs-fiche input:not([type=checkbox]), .boite-corps .champs-fiche select { height: 32px; }
.boite-corps .champs-fiche .case-ligne { padding: 4px 0; }

/* Recette TS du 15/10 (G8) : les teintes claires en dur des ecrans Devis ne suivaient pas le theme sombre (texte clair
   sur fond pale, 1,0 a 1,5 de contraste), et --accent vaut #3b3a39 en sombre, illisible comme couleur de texte. */
:root {
    --devis-accent-texte: var(--accent);
    --devis-case-pr: #dbe7f6;
    --devis-case-pv: #fdf6d8;
    --devis-fac-vedette: #f5e6c8;
    --devis-fac-vedette-bord: #e0c48a;
    --devis-fac-titre: #e8edf3;
    --devis-fac-soustitre: #f7f8fa;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --devis-accent-texte: var(--texte);
        --devis-case-pr: #1f3a5c;
        --devis-case-pv: #4a4220;
        --devis-fac-vedette: #4a3d1f;
        --devis-fac-vedette-bord: #7a6430;
        --devis-fac-titre: #2b3a4d;
        --devis-fac-soustitre: #272b31;
    }
    html[data-theme="auto"] .tunnel-fenetre button.lien,
    html[data-theme="auto"] .tunnel-pied button.lien,
    html[data-theme="auto"] .logistique-section button.lien,
    html[data-theme="auto"] .boite-corps button.lien { color: var(--texte); text-decoration: underline; }
}
html[data-theme="sombre"] {
    --devis-accent-texte: var(--texte);
    --devis-case-pr: #1f3a5c;
    --devis-case-pv: #4a4220;
    --devis-fac-vedette: #4a3d1f;
    --devis-fac-vedette-bord: #7a6430;
    --devis-fac-titre: #2b3a4d;
    --devis-fac-soustitre: #272b31;
}
html[data-theme="sombre"] .tunnel-fenetre button.lien,
html[data-theme="sombre"] .tunnel-pied button.lien,
html[data-theme="sombre"] .logistique-section button.lien,
html[data-theme="sombre"] .boite-corps button.lien { color: var(--texte); text-decoration: underline; }
/* Le pied du devis : un séparateur fin entre les groupes de boutons (la ligne, l'état, les versions, les documents). */
.pied-devis .separateur-groupe { align-self: stretch; width: 1px; margin: 3px 4px; background: var(--bord-fort); }

/* ==========================================================================
   FEN_DEVIS_Menuiserie_Agencement_2025 : les lignes et blocs EN OPTION (2026-10-23).
   Une ligne en option garde ses prix mais ne compte dans aucun total : on la voit
   d'un coup d'oeil (pastille « Option », trait en pointilles, texte en italique).
   ========================================================================== */
.table-devis tr.ligne-en-option td { font-style: italic; }
.table-devis tr.ligne-en-option td:first-child { box-shadow: inset 3px 0 0 var(--texte-info); }
.pastille-option {
    display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 9px;
    background: var(--fond-info); color: var(--texte-info); border: 1px dashed var(--texte-info);
    font-size: 11px; font-style: normal; font-weight: 600; line-height: 16px; white-space: nowrap;
}
.volet-devis .total-options { color: var(--texte-info); font-style: italic; }

/* ==========================================================================
   FEN_DEVIS_Menuiserie_Agencement_2025 : retenir les options à l'acceptation, et lever une option dans un avenant (2026-10-23).
   Une case par option, toutes décochées ; l'option cochée se voit d'un coup d'oeil.
   ========================================================================== */
.options-a-choisir { max-height: 56vh; overflow: auto; font-size: 13px; line-height: 1.45; }
.options-a-choisir p { margin: 0 0 10px 0; }
.options-a-choisir .options-du-devis { margin: 10px 0 4px; font-weight: 600; }
.table-options-a-choisir { width: 100%; border-collapse: collapse; }
.table-options-a-choisir th { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--bord-fort); font-weight: 600; color: var(--texte-faible); }
.table-options-a-choisir td { padding: 5px 8px; border-bottom: 1px solid var(--bord); }
.table-options-a-choisir .col-case { width: 34px; text-align: center; }
.table-options-a-choisir .col-nb, .table-options-a-choisir .col-montant { text-align: right; white-space: nowrap; }
.options-a-choisir input[type="checkbox"] { width: 16px; height: 16px; padding: 0; cursor: pointer; }
.table-options-a-choisir tr.retenue-option td { background: var(--accent-clair); }
.options-a-choisir .total-options-retenues { margin: 10px 0 0; font-weight: 600; }

/* ============================================================================
   Le champ RTF qui s'écrit en place (EditeurRiche) : la désignation d'une ligne
   de devis (FEN_devis_detail_ligne) et le rédacteur en grand (ses boutons ⤢).
   La barre de mise en forme est au-dessus de la zone, sans rien à ouvrir.

   La zone est une « feuille » : fond blanc, texte sombre, dans les deux thèmes.
   Les couleurs que l'utilisateur pose sont des couleurs d'impression, choisies
   pour 4,5 sur du blanc ; sur le fond du thème sombre, elles ne se liraient pas.
   ============================================================================ */
.champ-rtf { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; position: relative; }
.barre-rtf { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.bouton-rtf { min-width: 26px; height: 24px; padding: 0 6px; font: inherit; font-size: 12px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--texte); background: var(--fond-barre); border: 1px solid var(--bord); border-radius: 3px; }
.bouton-rtf:hover { border-color: var(--accent); background: var(--accent-survol); }
.bouton-rtf[aria-pressed="true"], .bouton-rtf[aria-expanded="true"] { background: var(--accent-clair); border-color: var(--accent); }
.bouton-rtf.large { padding: 0 8px; }
.separe-rtf { width: 1px; height: 18px; margin: 0 4px; background: var(--bord-fort); }
.groupe-rtf { position: relative; display: inline-flex; }
.lettre-couleur { font-weight: 700; line-height: 1; padding: 0 1px; border-bottom: 3px solid currentColor; }
.lettre-fond { padding: 1px 3px; color: #252423; border-radius: 2px; font-weight: 600; }

.fond-palette { position: fixed; inset: 0; z-index: 70; }
.palette-rtf { position: absolute; top: calc(100% + 2px); left: 0; z-index: 80; display: grid;
    grid-template-columns: repeat(5, 24px); gap: 4px; padding: 6px;
    background: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: var(--r); box-shadow: var(--ombre-flottant); }
.pastille-rtf { width: 24px; height: 24px; padding: 0; cursor: pointer; border: 1px solid var(--bord-fort); border-radius: 3px; }
.pastille-rtf:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.pastille-rtf.auto { grid-column: 1 / -1; width: auto; font: inherit; font-size: 12px; color: var(--texte); background: var(--fond-barre); }
.palette-rtf.liste { display: flex; flex-direction: column; gap: 0; padding: 3px 0; min-width: 130px; }
.element-rtf { text-align: left; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer;
    color: var(--texte); background: none; border: none; }
.element-rtf:hover { background: var(--accent-survol); }

.zone-rtf { min-height: 44px; max-height: 40vh; overflow: auto; resize: vertical; padding: 3px 6px;
    line-height: 1.35; overflow-wrap: anywhere; color: #252423; background: #ffffff;
    border: 1px solid var(--bord-fort); border-radius: 3px; }
.zone-rtf:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.zone-rtf:empty::before { content: attr(data-placeholder); color: #6a6866; pointer-events: none; }
.zone-rtf ul { margin: 0; padding-left: 22px; }
.zone-rtf.figee { color: #3b3a39; background: #f3f2f1; cursor: default; }

/* Le rédacteur en grand : la même zone, qui prend toute la boîte. */
.champ-rtf.grand { flex: 1; min-height: 0; gap: 0; }
.champ-rtf.grand .barre-rtf { padding: 6px 12px; border-bottom: 1px solid var(--bord); font-size: 12px; }
.champ-rtf.grand .zone-rtf { flex: 1; min-height: 0; max-height: none; resize: none; padding: 10px 14px; zoom: 1.15;
    border-width: 0; border-radius: 0; }
.champ-rtf.grand .zone-rtf:focus { box-shadow: none; }