/* ============================================================   LaBase — charte inspirée d'Office 365 (Microsoft 365)
   • bandeau d'application coloré en haut (titre, infos, pastille utilisateur)
   • barre de menus traitée comme les onglets d'un ruban (onglet actif souligné)
   • plan de travail gris clair, documents sur fond blanc
   • Segoe UI, aplats, coins peu arrondis, bordures discrètes
   Les emplacements WinDev sont conservés : menus en haut, fenêtres en onglets,
   barre d'état en bas, boutons carrés « icône au-dessus du libellé ».
   ========================================================================== */
:root {
    --accent: #185abd;           /* bleu Office */
    --accent-fonce: #103f86;
    --accent-clair: #e1ecfa;
    --accent-survol: #f0f6fd;

    --fond: #f5f5f5;             /* plan de travail */
    --fond-carte: #ffffff;
    --fond-barre: #ffffff;
    --fond-gris: #faf9f8;

    --bord: #e1dfdd;
    --bord-fort: #c8c6c4;

    --texte: #252423;
    --texte-doux: #605e5c;
    --texte-faible: #6a6866;   /* 4,5 au moins sur blanc, fond gris et lavis (D34, 2026-10-23) ; #8a8886 faisait 3,5 */

    --vert: #107c10;
    --orange: #a65515;           /* 4,8 sur le fond d'attention (#b7601a faisait 4,06) */
    --rouge: #a4262c;
    --vert-pastel: #ccffcc;
    --jaune-pastel: #fff8c4;
    --rouge-pastel: #ffd6d6;
    --cyan-pastel: #d4f1f9;


    /* Les états : ce qui distingue réglé, en attente, en retard, retenu.
       Chaque jeton a sa valeur sombre plus bas — sans quoi un fond pâle
       devient un pavé blanc, et l'état ne se lit plus. */
    --fond-succes: #e8f5e8;
    --bord-succes: #cfe7cf;
    --texte-succes: #1e7a3c;

    --fond-attention: #fff4ce;
    --bord-attention: #f2dcae;
    --texte-attention: #6b5200;

    --fond-danger: #fdf3f4;
    --bord-danger: #f3d6d8;
    --texte-danger: #6e1216;

    --fond-info: #e7f0fb;
    --fond-info-fort: #d7e5f8;
    --texte-info: #10556f;

    --r: 4px;
    --ombre: 0 1.6px 3.6px rgba(0, 0, 0, .10), 0 .3px .9px rgba(0, 0, 0, .07);
    --ombre-flottant: 0 6.4px 14.4px rgba(0, 0, 0, .13), 0 1.2px 3.6px rgba(0, 0, 0, .10);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--fond);
    color: var(--texte);
    font-family: "Segoe UI", "Segoe UI Web", Tahoma, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Boutons carrés (emplacement WinDev, aplat Office) ---------- */
.btn-carre {
    width: 76px; height: 64px; flex: none;
    font-size: 12px; line-height: 1.15; text-align: center; overflow: hidden;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: var(--r);
    cursor: pointer; transition: background .1s ease, border-color .1s ease;
}
.btn-carre:hover { background: var(--accent-survol); border-color: var(--accent); }
.btn-carre:active { background: var(--accent-clair); }
.btn-carre:disabled { opacity: .5; cursor: default; }
.btn-carre .icone { color: var(--accent-texte); }
.icone { display: block; flex: none; }
.btn-carre.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-carre.primaire .icone { color: #fff; }
.btn-carre.primaire:hover { background: var(--accent-fonce); }

/* ============================================================   Connexion — carte centrée, bandeau d'accueil coloré (style Office)
   ========================================================================== */
.login-ecran { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--fond); }
.login-fen {
    width: 900px; max-width: 100%; min-height: 540px; display: flex;
    background: var(--fond-carte); border: 1px solid var(--bord);
    border-radius: var(--r); box-shadow: var(--ombre-flottant); overflow: hidden;
}
.login-titre { background: var(--accent); color: #fff; padding: 8px 14px; font-weight: 600; }
.login-bandeau {
    height: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--accent-fonce); color: #fff;
    background-image: linear-gradient(115deg, var(--accent-fonce) 0%, var(--accent) 60%, #2b7cd3 100%);
}
.login-bandeau .marque { font-size: 24px; font-weight: 600; letter-spacing: .5px; }
/* Logo de l'ERP : la pastille sombre du logo se fond dans le bandeau */
.logo-erp { display: block; height: 76px; width: auto; border-radius: 50%; margin-bottom: 6px; }
.login-bandeau .sous { font-size: 13px; opacity: .92; margin-top: 2px; }
.login-soustitre { text-align: center; padding: 10px; color: var(--texte-doux); background: var(--fond-gris); border-bottom: 1px solid var(--bord); }
.login-corps { padding: 20px 24px 6px 24px; display: grid; grid-template-columns: 92px 1fr; row-gap: 12px; column-gap: 10px; align-items: center; }
.login-corps label { text-align: right; color: var(--texte-doux); }
.login-corps select, .login-corps input[type=password] {
    height: 32px; padding: 0 8px; font: inherit; background-color: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.login-corps select:hover, .login-corps input:hover { border-color: var(--texte-doux); }
.login-corps select:focus, .login-corps input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 -2px 0 0 var(--accent); }
.login-memo { grid-column: 2; display: flex; align-items: center; gap: 8px; color: var(--texte-doux); }
.login-memo input { accent-color: var(--accent); width: 15px; height: 15px; }
.login-message {
    margin: 12px 24px 0 24px; padding: 9px 12px; white-space: pre-line;
    background: var(--fond-danger); border: 1px solid var(--bord-danger); border-left: 4px solid var(--rouge); color: var(--texte-danger);
}
.login-actions { display: flex; justify-content: space-between; align-items: flex-end; padding: 16px 24px 20px 24px; }
.login-info { color: var(--texte-faible); font-size: 12px; }

/* ============================================================   Cadre de l'application
   ========================================================================== */
.app { height: 100vh; display: flex; flex-direction: column; background: var(--fond); }

/* Bandeau d'application coloré, comme la barre de titre d'Office */
.app-titre {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--accent); color: #fff; padding: 7px 14px;
}
.app-marque { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.app-marque .logo {
    width: 24px; height: 24px; border-radius: var(--r); background: rgba(255, 255, 255, .22);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: .5px;
}
.app-titre-infos { color: rgba(255, 255, 255, .88); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Barre de menus = onglets de ruban ---------- */
.barre-menu {
    display: flex; align-items: stretch; flex-wrap: wrap; gap: 0;
    background: var(--fond-barre); border-bottom: 1px solid var(--bord);
    padding: 0 8px; position: relative; z-index: 20; user-select: none;
}
.barre-menu-fin { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-racine { position: relative; }
.menu-racine.ouvert { z-index: 30; }
.menu-racine > .entete {
    padding: 9px 12px 7px 12px; background: none; border: none;
    border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; color: var(--texte-doux);
    transition: background .1s ease, color .1s ease;
}
.menu-racine > .entete:hover { background: var(--accent-survol); color: var(--texte); }
.menu-racine.ouvert > .entete { color: var(--accent-texte); border-bottom-color: var(--accent); font-weight: 600; }
.entete.chargement { color: var(--texte-faible); cursor: default; }

/* ---------- Menus déroulants (flyout Office) ---------- */
.deroulant {
    position: absolute; top: 100%; left: 0; min-width: 256px; padding: 4px 0; z-index: 31;
    background: var(--fond-carte); border: 1px solid var(--bord);
    border-radius: var(--r); box-shadow: var(--ombre-flottant);
}
.deroulant .deroulant { top: -5px; left: 100%; display: none; }
.item {
    position: relative; display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 12px; background: none; border: none; border-left: 3px solid transparent;
    text-align: left; white-space: nowrap; cursor: pointer;
}
.item:hover { background: var(--accent-survol); border-left-color: var(--accent); }
.item:hover > .deroulant { display: block; }
.item-lib { flex: 1; }
.item.sous::after { content: "›"; color: var(--texte-faible); font-size: 15px; }
.item.sans-cible { color: var(--texte-faible); }
.separateur { height: 1px; background: var(--bord); margin: 4px 0; }

.pastille { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.pastille.Générique { background: var(--vert); }
.pastille.Avancé { background: var(--orange); }
.pastille.Spécial { background: var(--rouge); }

.selecteur-entite { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; }
.selecteur-entite .libelle { color: var(--texte-faible); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
.selecteur-entite button {
    min-width: 34px; padding: 3px 9px; cursor: pointer; font-weight: 600; font-size: 12px;
    background: var(--fond-carte); color: var(--texte-doux);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.selecteur-entite button:hover { background: var(--accent-survol); border-color: var(--accent); color: var(--accent-texte); }
.selecteur-entite button.actif { background: var(--accent); border-color: var(--accent); color: #fff; }

.badge-utilisateur {
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px;
    background: var(--accent-clair); color: var(--accent-texte); border: 1px solid var(--accent);
    border-radius: 12px; font-size: 12px; font-weight: 600;
}

/* ---------- Onglets des fenêtres ouvertes ---------- */
.zone-travail { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.onglets {
    display: flex; gap: 0; overflow-x: auto; padding: 0 8px;
    background: var(--fond-gris); border-bottom: 1px solid var(--bord); scrollbar-width: thin;
}
.onglet {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px 5px 12px;
    background: transparent; border: none; border-bottom: 2px solid transparent;
    white-space: nowrap; cursor: pointer; color: var(--texte-doux);
}
/* Un libelle long ne doit pas repousser les autres onglets hors de l'ecran :
   il se coupe, l'onglet actif ayant droit a un peu plus de place. Le titre
   complet reste lisible en survol. */
.onglet-lib {
    display: inline-block; max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.onglet.actif .onglet-lib { max-width: 300px; }
.onglet:hover { background: var(--accent-survol); }
.onglet.actif { background: var(--fond-carte); border-bottom-color: var(--accent); color: var(--accent-texte); font-weight: 600; }
.onglet .action-onglet {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer; color: var(--texte-faible);
    width: 20px; height: 20px; border-radius: var(--r); padding: 0;
}
.onglet .action-onglet:hover { background: rgba(0, 0, 0, .07); color: var(--accent-texte); }
.onglet .action-onglet:last-child:hover { color: var(--rouge); }

/* Plan de travail gris ; le contenu d'une fenêtre est posé dessus comme un document */
.contenu { flex: 1; overflow: auto; padding: 16px; background: var(--fond); }
.contenu > .fiche { background: var(--fond-carte); border: 1px solid var(--bord); box-shadow: var(--ombre); padding: 20px 24px; }
.accueil {
    height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center; color: var(--texte-doux);
}
.accueil .grand { font-size: 26px; font-weight: 600; color: var(--accent-texte); }
.accueil .doux { color: var(--texte-faible); }

/* ---------- Fiche d'une fenêtre ---------- */
.fiche { max-width: 820px; }
.fiche h2 { margin: 0 0 2px 0; font-size: 18px; font-weight: 600; }
.fiche .cible { color: var(--texte-doux); margin-bottom: 16px; }
.fiche table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
.fiche th, .fiche td { text-align: left; padding: 7px 10px; border: 1px solid var(--bord); }
.fiche th { background: var(--fond-gris); width: 230px; font-weight: 600; color: var(--texte-doux); }
.badge { display: inline-block; padding: 1px 9px; border-radius: 10px; color: #fff; font-weight: 600; font-size: 12px; }
.badge.Générique { background: var(--vert); }
.badge.Avancé { background: var(--orange); }
.badge.Spécial { background: var(--rouge); }
.encart { background: var(--fond-attention); border: 1px solid var(--bord-attention); border-left: 4px solid var(--orange); padding: 9px 12px; }
code { background: var(--fond-gris); border: 1px solid var(--bord); padding: 0 4px; font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; }

/* ---------- Barre d'état ---------- */
.barre-etat {
    display: flex; align-items: center; gap: 20px; padding: 5px 14px;
    background: var(--accent); color: rgba(255, 255, 255, .92);
    font-size: 12px; flex-wrap: wrap; row-gap: 2px; overflow: hidden;
}
.barre-etat > span { white-space: nowrap; }
.barre-etat b { color: #fff; font-weight: 600; }
.barre-etat .legende { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ---------- Erreurs Blazor ---------- */
.blazor-error-boundary { background: var(--rouge); padding: 14px; color: #fff; }
.blazor-error-boundary::after { content: "Une erreur est survenue."; }
#blazor-error-ui {
    background: var(--fond-attention); border-top: 1px solid var(--bord-attention); bottom: 0; left: 0; width: 100%;
    box-shadow: var(--ombre); display: none; padding: 10px 16px; position: fixed; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }


/* ============================================================   Écran Halls (portage de Fen_Com_Hall)
   ========================================================================== */
.pastille.migre { background: var(--accent); box-shadow: 0 0 0 2px rgba(15, 108, 189, .2); }

.ecran-hall { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.ecran-entete { display: flex; align-items: flex-start; justify-content: space-between; }
.ecran-entete h2 { margin: 0; font-size: 18px; font-weight: 600; }
.doux { color: var(--texte-doux); }
.etiquette-lecture {
    padding: 3px 10px; background: var(--fond-attention); border: 1px solid var(--bord-attention); color: var(--texte-attention); font-weight: 600;
}
.message { padding: 8px 12px; border-left: 4px solid; }
.message.ok { background: var(--fond-succes); border-color: var(--vert); color: var(--texte-succes); }
.message.erreur { background: var(--fond-danger); border-color: var(--rouge); color: var(--texte-danger); }

.deux-volets { display: grid; grid-template-columns: minmax(300px, 26%) 1fr; gap: 12px; flex: 1; min-height: 0; }
.volet-liste, .volet-fiche { border: 1px solid var(--bord); background: var(--fond-carte); overflow: auto; }
.volet-liste { display: flex; flex-direction: column; }
.filtres { display: grid; grid-template-columns: 40px 1fr; gap: 6px; align-items: center; padding: 8px; background: var(--fond-gris); border-bottom: 1px solid var(--bord); }
.filtres select, .filtres input { height: 28px; padding: 0 6px; border: 1px solid var(--bord-fort); font: inherit; }
.filtres input { grid-column: 1 / -1; }

.table-liste { width: 100%; border-collapse: collapse; }
.table-liste th {
    position: sticky; top: 0; text-align: left; padding: 6px 8px; font-weight: 600;
    background: var(--fond-gris); border-bottom: 1px solid var(--bord); color: var(--texte-doux);
}
.table-liste td { padding: 5px 8px; border-bottom: 1px solid var(--bord); }
.table-liste tbody tr { cursor: pointer; }
.table-liste tbody tr:nth-child(even) { background: #fbfbfb; }
.table-liste tbody tr:hover { background: var(--accent-survol); }
.table-liste tbody tr.selectionne { background: var(--accent-clair); font-weight: 600; }
.compte { padding: 6px 8px; border-top: 1px solid var(--bord); }

.volet-fiche { padding: 16px 20px; }
.volet-fiche .vide { padding: 40px; text-align: center; }
.grille-fiche { display: grid; grid-template-columns: 160px minmax(0, 1fr) 160px minmax(0, 1fr); gap: 8px 14px; align-items: start; }
.grille-fiche .pleine-largeur { grid-column: 2 / -1; }
.grille-fiche .titre-section {
    grid-column: 1 / -1; margin: 10px 0 2px 0; padding-bottom: 4px; font-weight: 600;
    color: var(--accent-texte); border-bottom: 1px solid var(--bord);
}
@media (max-width: 1200px) {
    .grille-fiche { grid-template-columns: 160px minmax(0, 1fr); }
    .grille-fiche .pleine-largeur { grid-column: 2 / -1; }
}
.grille-fiche label { text-align: right; color: var(--texte-doux); padding-top: 5px; }
.grille-fiche input, .grille-fiche select, .grille-fiche textarea {
    width: 100%; padding: 5px 8px; font: inherit; background-color: var(--fond-carte);
    border: 1px solid var(--bord-fort); border-radius: var(--r); resize: vertical;
}
.grille-fiche input:disabled, .grille-fiche select:disabled, .grille-fiche textarea:disabled {
    background-color: var(--fond-gris); color: var(--texte-doux);
}
.obligatoire { color: var(--rouge); font-weight: 700; }
.legende-obligatoire { margin-top: 10px; color: var(--texte-faible); font-size: 12px; }

.barre-boutons { display: flex; gap: 6px; justify-content: flex-end; padding-top: 4px; }

/* Barre d'onglets vide : elle reste visible tant qu'un écran est dehors */
.onglet-accueil {
    display: flex; align-items: center; gap: 6px; margin: 4px 6px; padding: 4px 12px;
    color: var(--texte-faible); font-size: 12px;
    border: 1px dashed var(--bord-fort); border-radius: var(--r);
}
.onglets.visee .onglet-accueil { color: var(--accent-texte); border-color: var(--accent); }

/* Barre d'onglets visée par une fenêtre que l'on ramène */
.onglets.visee { background: var(--accent-clair); box-shadow: inset 0 -3px 0 0 var(--accent); }

/* Barre de titre d'une fenêtre détachée : elle se saisit comme une poignée */
.app-titre.poignee { cursor: grab; user-select: none; }
.app-titre.poignee:active { cursor: grabbing; }
.app-titre .grip { opacity: .65; margin-right: 2px; }
.onglet { cursor: grab; }

/* Fenêtre détachée : même habillage, sans menu ni onglets, boutons physiques en bas */
.fenetre-detachee { height: 100vh; display: flex; flex-direction: column; background: var(--fond); }
.fenetre-detachee .zone-travail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fenetre-detachee .contenu { flex: 1; overflow: auto; padding: 16px; }

/* ============================================================   Administration des droits du menu (FEN_Admin_Droits_Menu)
   Même disposition que la fenêtre : arborescence à gauche, gestion des accès
   en haut à droite, les deux tableaux du bas, puis la jauge et les boutons.
   ========================================================================== */
.ecran-droits { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 8px; }

.bandeau-etapes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bandeau-etapes .etape { font-weight: 600; color: var(--accent-fonce); margin-right: 4px; }
.bandeau-etapes .etape:not(:first-child) { margin-left: 14px; }
.bandeau-etapes label { color: var(--texte-doux); }
.bandeau-etapes select {
    height: 30px; min-width: 175px; padding: 0 6px; font: inherit;
    background-color: var(--fond-carte); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.bandeau-etapes .pousse { flex: 1; }

.plan-droits { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px; }
.colonne-droite { min-height: 0; display: grid; grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; }
.deux-cadres { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.cadre {
    min-height: 0; display: flex; flex-direction: column;
    background: var(--fond-carte); border: 1px solid var(--bord); border-radius: var(--r); overflow: hidden;
}
.cadre .corps-volet { flex: 1; min-height: 0; overflow: auto; }

/* L'arborescence : vert quand l'accès est ouvert, rouge sinon */
.noeud { display: flex; align-items: center; gap: 6px; padding: 2px 8px; cursor: default; font-size: 13px; }
.noeud:hover { background: var(--accent-survol); }
.noeud.choisi { background: var(--accent-clair); }
.noeud .puce { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.noeud.ouvert .puce { background: var(--vert); }
.noeud.ferme .puce { background: var(--rouge); }
.noeud.ouvert .lib { color: var(--vert); }
.noeud.ferme .lib { color: var(--rouge); }
.noeud.niveau-1 { padding-left: 24px; }
.noeud.niveau-2 { padding-left: 42px; }
.noeud.niveau-3 { padding-left: 60px; }

.entete-volet {
    display: flex; align-items: center; gap: 10px; padding: 6px 10px; flex: none;
    background: var(--fond-gris); border-bottom: 1px solid var(--bord); font-weight: 600; font-size: 13px;
}
.entete-volet .doux { font-weight: 400; }
.entete-volet .actions-volet { margin-left: auto; display: flex; gap: 10px; }
button.lien { background: none; border: none; padding: 0; font: inherit; color: var(--accent-texte); cursor: pointer; }
button.lien:hover { text-decoration: underline; }

.table-droits { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-droits th {
    position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600;
    background: var(--fond-gris); border-bottom: 1px solid var(--bord); padding: 5px 8px;
}
.table-droits td { padding: 2px 8px; border-bottom: 1px solid var(--fond-gris); }
.table-droits tr:hover td { background: var(--accent-survol); }
.table-droits tr.modifie td { background: var(--fond-attention); }
/* ⚠️ LA LIGNE CHOISIE S'ECRIT « choisi », AU MASCULIN, dans un table-droits.
   C'est la seule orthographe que cette regle peint, et c'est un piege : « choisie »
   est la forme naturelle en francais, et SEIZE fichiers l'emploient ailleurs --
   devis.css, societes.css et planning-atelier.css peignent bien « .X tr.choisie ».

   Une classe qui existe AILLEURS ne leve rien : classes_sans_definition la trouve
   definie et se tait. C'est une famille MUETTE, et elle a mordu cinq ecrans --
   BlocPostes, AssocierSalon, CategoriesProjet, DetailStockage, TarifsStockage --
   ou la ligne cliquee ne se voyait tout simplement pas. Releve par l'utilisateur le
   2026-10-08 sur Categories de projet : « je ne vois pas la selection ».

   ⚠️ ET ON N'AJOUTE PAS « , tr.choisie » ICI, meme si ca semblerait prudent :
   .table-suivi porte table-droits ET ecrit « choisie », avec son propre traitement
   (un contour, parce que ses cellules ont deja leurs fonds). Accepter les deux
   orthographes lui poserait un fond qu'elle ne veut pas. Les deux graphies font donc
   un vrai travail aujourd'hui, qu'on l'ait voulu ou non. */
.table-droits tr.choisi td { background: var(--accent-clair); }
.table-droits .col-acces { width: 52px; text-align: center; }
.table-droits .col-code { width: 62px; color: var(--texte-doux); }   /* le faible tombait à 3,5 de contraste (recette du 2026-10-22) */
.table-droits .col-bouton { width: 28px; text-align: right; }
.table-droits .col-nom { width: 320px; color: var(--texte-faible); font-size: 12px; }
.table-droits input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.table-droits .niveau-1 { padding-left: 24px; }
.table-droits .niveau-2 { padding-left: 42px; color: var(--texte-doux); }
.table-droits .niveau-3 { padding-left: 60px; color: var(--texte-doux); }

.jeton { display: inline-block; padding: 0 5px; border-radius: 9px; font-size: 10px; line-height: 16px;
    background: var(--fond-gris); border: 1px solid var(--bord); color: var(--texte-faible); }
.jeton.t-M { background: var(--accent-clair); border-color: var(--accent-clair); color: var(--accent-texte); }
.jeton.capacite { margin-left: 6px; background: var(--fond-attention); border-color: var(--bord-attention); color: var(--orange); }
.etiquette-modif { padding: 3px 10px; border-radius: 10px;
    background: var(--fond-attention); border: 1px solid var(--bord-attention); color: var(--texte-attention); font-size: 12px; }
button.retirer { background: none; border: none; padding: 2px; color: var(--texte-faible); cursor: pointer; }
button.retirer:hover { color: var(--rouge); }
.ecran-droits .vide { padding: 10px; color: var(--texte-doux); font-size: 12px; }

/* Jauge de chargement et boutons de la fenêtre */
.pied-ecran { flex: none; display: flex; align-items: center; gap: 16px; }
/* Regle de projet : la jauge de chargement. Toute action qui parle a la base
   l'allume et dit ce qu'elle fait — sans cela l'ecran parait fige le temps
   d'un aller-retour sur le cloud. Une seule par ecran, dans le pied. */
.jauge { display: flex; align-items: center; gap: 10px; padding: 3px 10px; min-height: 20px; }
.jauge .piste {
    flex: 1; height: 6px; background: var(--fond-gris);
    border: 1px solid var(--bord); border-radius: 3px; overflow: hidden;
}
.jauge .barre { height: 100%; width: 0; background: var(--accent); }
.jauge .barre.active { width: 40%; animation: glisse 1.1s ease-in-out infinite; }

/* Ce qu'on relit pendant ce temps-la se met en retrait : on voit que ca tourne. */
.corps-volet.occupe { opacity: .55; pointer-events: none; }

.pied-ecran .jauge { flex: 1; min-width: 120px; }
.pied-ecran .piste { height: 6px; background: var(--fond-gris); border: 1px solid var(--bord); border-radius: 3px; overflow: hidden; }
.pied-ecran .barre { height: 100%; width: 0; background: var(--accent); }
.pied-ecran .barre.active { width: 40%; animation: glisse 1.1s ease-in-out infinite; }
@keyframes glisse { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
/* Regle de projet : la barre de boutons d'un ecran se tient toujours en bas
   a droite, quel que soit l'ecran. Le pied peut porter une jauge a gauche ;
   les boutons, eux, sont pousses au bout. */
.pied-ecran .barre-boutons { padding-top: 0; margin-left: auto; justify-content: flex-end; }

/* Menu contextuel (MENU_Arbre, MENU_Gestion_Utilisateur_Groupe) */
.menu-contextuel {
    position: fixed; z-index: 50; min-width: 210px; padding: 4px;
    background: var(--fond-carte); border: 1px solid var(--bord-fort);
    border-radius: var(--r); box-shadow: var(--ombre-flottant);
}
.menu-contextuel .titre { padding: 4px 10px 6px 10px; color: var(--texte-faible); font-size: 12px; }
.menu-contextuel button {
    display: block; width: 100%; text-align: left; padding: 5px 10px;
    background: none; border: none; font: inherit; color: var(--texte); cursor: pointer; border-radius: 3px;
}
.menu-contextuel button:hover { background: var(--accent-survol); }
.menu-contextuel button.danger { color: var(--rouge); }
.menu-contextuel .trait { height: 1px; margin: 4px 6px; background: var(--bord); }

/* Boîtes de dialogue (lfct_SaisieUtilisateur, FEN_Selection_Liste, aide) */
.voile { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.25); }
.boite { width: 520px; max-width: 92vw; background: var(--fond-carte);
    border: 1px solid var(--bord-fort); border-radius: var(--r); box-shadow: var(--ombre-flottant); overflow: hidden; }
.boite.large { width: 640px; }
.boite-titre { padding: 8px 14px; background: var(--accent); color: #fff; font-weight: 600; }
.boite-corps { padding: 14px; }
.boite-corps.en-grille { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; }
.boite-corps input, .boite-corps select {
    width: 100%; height: 30px; padding: 0 8px; font: inherit;
    background-color: var(--fond-carte); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.boite-corps select.liste-choix { height: auto; padding: 4px; }
.boite-corps.aide { font-size: 13px; line-height: 1.5; max-height: 60vh; overflow: auto; }
.boite-corps.aide p { margin: 0 0 10px 0; }
.boite-boutons { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 14px;
    background: var(--fond-gris); border-top: 1px solid var(--bord); }

/* ============================================================   Plan 7 — onglet Proposition

   L'arbre des projets a gauche, les propositions a droite. La fenêtre les
   sépare par un splitter ; ici deux colonnes, l'arbre étant plus étroit.
   ========================================================================== */
.plan-ppales {
    height: 100%; min-height: 0;
    display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px;
}
.arbre-projets, .liste-ppales { display: flex; flex-direction: column; min-height: 0; }
.liste-ppales .table-p11 { flex: 1; min-height: 0; max-height: none; }

.corps-arbre { flex: 1; min-height: 0; overflow: auto; padding-top: 4px; }
.noeud {
    display: block; width: 100%; text-align: left; padding: 3px 6px; margin-bottom: 1px;
    background: none; border: none; border-radius: 3px; font: inherit; color: var(--texte);
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.noeud:hover { background: var(--accent-survol); }
.noeud.choisi { background: var(--accent-clair); color: var(--accent-texte); font-weight: 600; }
.noeud.tous { font-weight: 600; }
.noeud.mois { color: var(--texte-doux); }
.noeud.projet { padding-left: 20px; }
.noeud.devis { padding-left: 42px; color: var(--texte-doux); font-size: 12px; }
.noeud.monde-s { box-shadow: inset 3px 0 0 0 #56c5dd; }
.noeud.monde-h { box-shadow: inset 3px 0 0 0 #e0b84a; }
.noeud .compte {
    margin-left: 6px; padding: 0 5px; border-radius: 999px; font-size: 11px;
    background: var(--fond-gris); color: var(--texte-doux);
}
.noeud .jeton { margin-right: 5px; font-size: 10px; padding: 1px 5px; }
.noeud .petit { margin-left: 6px; }

.total-ppale { padding: 2px 8px; border-radius: 999px; background: var(--fond-gris); font-size: 12px; }
.total-ppale.acceptees { background: var(--fond-succes); color: var(--texte-succes); font-weight: 600; }

.table-ppales .col-avancement { width: 120px; }
.table-ppales .col-ppale { width: 88px; text-align: right; }

/* Les couleurs de lfct_RemplirTablePpalesCales : vert quand c'est accepté,
   gris quand une autre version l'a été et fige celle-ci. */
tr.ppale-acceptee td { background: var(--fond-succes); }
tr.ppale-avenant-accepte td { background: var(--fond-succes); }
tr.ppale-figee td { background: var(--fond-gris); color: var(--texte-doux); }

/* ============================================================   FEN_Prod_Relance_Cde — les commandes fournisseurs attendues

   Deux lignes de filtres, des compteurs, puis la table. Le retard se voit sur
   la ligne et se compte en haut : c'est ce que la fenêtre d'origine ne disait
   pas, alors que c'est sa raison d'être.
   ========================================================================== */
.ecran-cdes { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 6px; }
.ecran-cdes .table-p11 { flex: 1; min-height: 0; max-height: none; }

.filtres-cdes {
    display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap;
}
.filtres-cdes input[type=date], .filtres-cdes select, .filtres-cdes input[type=text], .filtres-cdes input:not([type]) {
    height: 26px; padding: 0 7px; font: inherit;
    background-color: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.filtres-cdes .case { display: inline-flex; align-items: center; gap: 5px; color: var(--texte-doux); }
.filtres-cdes .case input { width: auto; height: auto; }
.raccourcis { display: inline-flex; gap: 3px; }
.choix-lieu { max-width: 320px; }

/* Le fournisseur se cherche à la frappe : les propositions tombent dessous */
.rech-fournisseur { position: relative; display: inline-block; }
.rech-fournisseur input { width: 220px; }
.rech-fournisseur .propositions {
    position: absolute; z-index: 30; top: 100%; left: 0; min-width: 280px; max-height: 260px;
    overflow: auto; margin-top: 2px; padding: 3px;
    background: var(--fond-carte); border: 1px solid var(--bord-fort);
    border-radius: var(--r); box-shadow: var(--ombre-flottant);
}
.rech-fournisseur .propositions button {
    display: block; width: 100%; text-align: left; padding: 4px 8px;
    background: none; border: none; font: inherit; color: var(--texte);
    cursor: pointer; border-radius: 3px; white-space: nowrap;
}
.rech-fournisseur .propositions button:hover { background: var(--accent-survol); }
.jeton-retirer {
    padding: 2px 8px; font: inherit; font-size: 12px; cursor: pointer;
    background: var(--accent-clair); color: var(--accent-texte);
    border: 1px solid var(--accent); border-radius: 999px;
}

.compteurs-cdes { display: flex; align-items: center; gap: 8px; flex: none; }

/* FEN_Com_RelanceTechnique_NN : la même liste, en plus simple */
.ecran-relances-t { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 6px; }
.ecran-relances-t .table-p11 { flex: 1; min-height: 0; max-height: none; }
.table-relances-t .col-coche { width: 30px; text-align: center; }
.table-relances-t .col-coche input { width: auto; }
.table-relances-t .col-urgence { width: 112px; font-weight: 600; }

/* Le salon commence bientôt : la ligne le dit. Il a commencé : elle s'efface. */
tr.relance-imminente td.col-urgence { color: var(--rouge); }
tr.relance-passee td { color: var(--texte-faible); }
tr.relance-passee td.col-urgence { font-weight: 400; font-style: italic; }
.liste-recus { max-height: 220px; overflow: auto; margin-top: 8px; padding: 6px 8px;
    background: var(--fond-gris); border-radius: var(--r); }

/* La table et, à côté, de quoi relancer : le fournisseur de la ligne choisie */
.corps-cdes {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 8px;
}
.corps-cdes .table-p11 { max-height: none; }
.volet-fournisseur { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.corps-volet-fourn { display: flex; flex-direction: column; gap: 5px; padding-top: 6px; }
.ligne-fourn { display: flex; gap: 8px; align-items: baseline; }
.ligne-fourn .etiq { width: 92px; flex: none; color: var(--texte-doux); white-space: nowrap; }
.ligne-fourn > :not(.etiq) { min-width: 0; overflow-wrap: anywhere; }
.ligne-fourn a { color: var(--accent-texte); text-decoration: none; }
.ligne-fourn a:hover { text-decoration: underline; }
.retard-fourn { color: var(--rouge); font-weight: 600; }
.obs-fourn { margin-top: 4px; padding: 6px 8px; background: var(--fond-gris); border-radius: var(--r); }
.volet-fournisseur .trait { height: 1px; margin: 8px 0; background: var(--bord); }


/* Le détail de la commande, dans le volet */
.table-lignes-cde { font-size: 12px; margin-top: 4px; }
.table-lignes-cde th { position: static; }
.table-lignes-cde td.lib { white-space: normal; }
.table-lignes-cde .petit { margin-left: 5px; color: #e67e22; }
.totaux-cde { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bord); }
.totaux-cde .total { margin-top: 3px; }
.ecart-total { color: var(--rouge); margin-top: 3px; }

/* Le volet respire : il défile seul quand la commande est longue */
.volet-fournisseur { overflow: hidden; }
.volet-fournisseur .corps-volet-fourn { overflow-y: auto; overflow-x: hidden; }
.table-lignes-cde { width: 100%; table-layout: fixed; }

@media (max-width: 1500px) {
    .corps-cdes { grid-template-columns: minmax(0, 1fr) 320px; }
}
.total-ppale.retard { background: var(--fond-danger); color: var(--rouge); font-weight: 600; }

.table-cdes .col-coche { width: 30px; text-align: center; }
.table-cdes .col-coche input { width: auto; }
.table-cdes .col-etat-livraison { width: 88px; }
.table-cdes .col-categorie { width: 140px; }
.jeton.retard { background: var(--fond-danger); color: var(--rouge); font-weight: 600; }
.jeton.partielle { background: var(--fond-attention); color: var(--texte-attention); font-weight: 600; }
.jeton.non-terminee { background: var(--fond-attention); color: var(--texte-attention); margin-left: 6px; font-size: 10px; }
.table-cdes .reliquat { color: #e67e22; }

/* Les couleurs de lfct_MiseEnForme_Table_Cde : jaune quand la conception n'est
   pas terminee, gris quand la commande appartient a une autre entite. */
tr.cde-non-terminee td.lib { background: var(--fond-attention); }
tr.cde-autre-entite td.col-code { background: var(--fond-gris); }
tr.cde-retard td.col-livraison { color: var(--rouge); font-weight: 600; }

/* ============================================================   FEN_Creation_Entreprise

   Deux colonnes de champs, comme la fenêtre : libellé à gauche, saisie à
   droite. Le bloc vert reprend celui de l'écran d'origine, avec sa légende
   « Non obligatoire au remplissage ».
   ========================================================================== */
.boite.creation { width: 920px; }
.boite.creation .boite-corps { max-height: 72vh; overflow: auto; }

.grille-creation {
    display: grid; grid-template-columns: 148px minmax(0, 1fr) 120px minmax(0, 1fr);
    gap: 6px 10px; align-items: center;
}
.grille-creation.une-colonne { grid-template-columns: 148px minmax(0, 1fr); }
.grille-creation > label { color: var(--texte-doux); }
.grille-creation .sur-trois { grid-column: 2 / -1; }
.grille-creation input::placeholder { color: var(--texte-faible); font-style: italic; }

.bloc-facultatif {
    margin: 12px 0; padding: 10px 12px 12px 12px;
    background: var(--fond-succes); border: 1px solid var(--bord-succes); border-radius: var(--r);
}
.bloc-facultatif legend { padding: 0 5px; color: var(--texte-succes); font-size: 11px; }
.bloc-facultatif input, .bloc-facultatif select { background-color: var(--fond-carte); }

.bloc-doublons-titre { display: block; margin: 12px 0 5px 0; }
.bloc-doublons { max-height: 220px; }
.aide-boite { padding: 0 14px 12px 14px; }
.boite-boutons .a-gauche { margin-right: auto; }

/* ============================================================   Logos des entités (FEN_Admin_Logos_Entites)
   ========================================================================== */
.ecran-logos { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.plan-logos { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 8px; }
.ecran-logos .col-chemin { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--texte-doux); font-size: 12px; }

.jeton.ok { background: var(--fond-succes); border-color: var(--bord-succes); color: var(--vert); }
.jeton.absent { background: var(--fond-gris); border-color: var(--bord); color: var(--texte-faible); }

.apercus { padding: 10px; display: flex; flex-direction: column; gap: 12px; }
.bloc-apercu { border: 1px solid var(--bord); border-radius: var(--r); padding: 10px; background: var(--fond-gris); }
.titre-apercu { font-weight: 600; font-size: 12px; color: var(--texte-doux); margin-bottom: 8px; }
.bloc-apercu img { display: block; max-width: 100%; max-height: 120px; margin-bottom: 8px;
    background: #fff; border: 1px solid var(--bord); padding: 4px; }
.bloc-apercu .vide { padding: 6px 0 10px 0; }
.bloc-apercu .btn-carre { width: 100%; }

/* Le sélecteur de fichier prend l'allure d'un bouton (fSélecteur côté WinDev) */
.btn-carre.fichier { position: relative; overflow: hidden; cursor: pointer; }
.btn-carre.fichier input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.message { white-space: pre-line; }

.btn-carre.large { width: 100%; height: auto; min-height: 44px; padding: 6px; }

/* TBL_Logos : deux colonnes d'aperçu, comme dans la fenêtre */
.table-logos .col-apercu { width: 110px; }
.table-logos .col-apercu img { max-height: 34px; max-width: 100px; display: block;
    background: #fff; border: 1px solid var(--bord); }
.table-logos .col-statut { width: 90px; color: var(--texte-doux); }
.table-logos .col-taille { width: 80px; text-align: right; color: var(--texte-doux); }
.table-logos tr { cursor: default; }
.message-confirmation { margin-bottom: 10px; }

/* Une boite de confirmation se lit en deux temps : la question, puis ce qu'il
   faut savoir pour y repondre. La question porte la decision, elle est courte
   et lisible ; le detail s'efface derriere elle. */
.question-confirmation { font-size: 15px; line-height: 1.45; }
.detail-confirmation {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bord);
    font-size: 12px; line-height: 1.55; color: var(--texte-faible);
}
.apercu-choisi { display: block; max-width: 100%; max-height: 180px; margin: 0 auto;
    background: #fff; border: 1px solid var(--bord); padding: 4px; }

/* ============================================================   Fiche Hall (Fen_Com_Hall)
   ========================================================================== */
.ecran-hall { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.bandeau-fiche { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bandeau-fiche .etape { font-weight: 600; color: var(--accent-fonce); }
.bandeau-fiche select {
    height: 30px; min-width: 200px; padding: 0 6px; font: inherit;
    background-color: var(--fond-carte); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.bandeau-fiche .pousse { flex: 1; }

.fiche-hall { flex: 1; min-height: 0; }
.fiche-hall .corps-volet { padding: 12px 14px; }

.ligne-identite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ligne-identite label { color: var(--texte-doux); }
.ligne-identite select, .ligne-identite input {
    height: 30px; padding: 0 8px; font: inherit; min-width: 240px;
    background-color: var(--fond-carte); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: var(--r);
}

.grp-saisie { border: none; margin: 0; padding: 0; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.grp-saisie:disabled { opacity: .55; }
.section-fiche { border: 1px solid var(--bord); border-radius: var(--r); padding: 10px 12px; background: var(--fond-gris); }
.titre-section { font-weight: 600; font-size: 12px; color: var(--texte-doux); margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: .3px; }
.champ { margin-bottom: 8px; }
.champ label { display: block; font-size: 12px; color: var(--texte-doux); margin-bottom: 2px; }
.champ input, .champ textarea {
    width: 100%; padding: 5px 8px; font: inherit; resize: vertical;
    background: var(--fond-carte); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.champ input { height: 30px; }
.champ select {
    width: 100%; height: 30px; padding: 4px 8px; font: inherit;
    background-color: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}

/* Les champs d'une section, deux par ligne tant que la place le permet.
   Un champ « grand » prend la ligne entiere. */
.champs-section {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 12px; align-items: start;
}
.champs-section .grand { grid-column: 1 / -1; }
.champ.case { display: flex; align-items: flex-end; }
.case-ligne { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texte-doux); }
/* ⚠️ LES DEUX, PAS SEULEMENT LA CASE. `.boite-corps input` met TOUT input du corps
   d'une boite en champ pleine largeur de 30 px -- un bouton radio y devient une
   pastille geante qui pousse son libelle a la ligne. Le garde-fou existait pour les
   cases ; il manquait pour les radios, donc une liste a cases s'affichait bien et une
   liste a radios, juste a cote, etait difforme. */
.case-ligne input[type=checkbox],
.case-ligne input[type=radio] { width: auto; height: auto; margin: 0; }

/* Fiches site et salon : de quoi voir les listes du bas sans faire defiler
   toute la fiche. Une section garde sa hauteur au lieu de s'etirer sur la
   plus haute de sa ligne, et les champs se resserrent. */
.ecran-site .grp-saisie { gap: 10px; align-items: start; }
.ecran-site .section-fiche { padding: 8px 10px; }
.ecran-site .titre-section { margin-bottom: 6px; }
.ecran-site .champ { margin-bottom: 6px; }
.ecran-site .champ label { font-size: 11px; margin-bottom: 1px; }
.ecran-site .champ input, .ecran-site .champ select { height: 27px; padding: 3px 7px; }
.ecran-site .champ textarea { padding: 4px 7px; }
.ecran-site .champs-section { gap: 0 10px; }
.ecran-site .fiche-site .corps-volet { padding: 10px 12px; }

/* Hors modification, la fiche se lit au lieu de palir : le voile
   d'opacite rendait le contenu illisible. Un champ non modifiable perd son
   cadre et son fond, il ne reste que la valeur, en pleine encre. */
.ecran-site .grp-saisie:disabled { opacity: 1; }
.ecran-site .champ input:disabled,
.ecran-site .champ select:disabled,
.ecran-site .champ textarea:disabled {
    opacity: 1; color: var(--texte);
    /* Chromium grise le texte d'un champ desactive quoi qu'on demande */
    -webkit-text-fill-color: var(--texte);
    background-color: transparent; border-color: transparent;
    border-bottom: 1px solid var(--bord); border-radius: 0;
    padding-left: 0;
}
.ecran-site .champ input:disabled::placeholder { color: transparent; }
.ecran-site .case-ligne input:disabled { opacity: .75; }

/* ============================================================   Relances commerciales (FEN_Com_Relances_V2024)
   ========================================================================== */
.ecran-relances { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.filtres-relances {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 14px;
    padding: 8px 10px; background: var(--fond-gris);
    border: 1px solid var(--bord); border-radius: var(--r);
}
.filtres-relances.cases { align-items: center; }
.champ-filtre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.champ-filtre.large { min-width: 240px; }
.champ-filtre label { font-size: 11px; color: var(--texte-doux); }
.champ-filtre input, .champ-filtre select {
    height: 28px; padding: 3px 7px; font: inherit;
    background-color: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.separateur-filtre { width: 1px; align-self: stretch; background: var(--bord); }

/* Une entite du perimetre : cochee ou non */
.jeton-entite {
    height: 26px; padding: 0 10px; cursor: pointer; font: inherit; font-size: 12px;
    background: var(--fond-carte); color: var(--texte-doux);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.jeton-entite.actif { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.jeton-entite:disabled { opacity: .6; cursor: default; }

.liste-relances { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.liste-relances .corps-volet { flex: 1; min-height: 0; overflow: auto; }
.table-relances .col-case { width: 30px; }
.table-relances tr.choisie { background: var(--accent-clair); }
.table-relances .parti { color: var(--rouge); font-weight: 600; }

/* Le clic droit de la table. Le voile ferme le menu au clic a cote :
   il doit rester SOUS lui, sinon il avale les clics sur les options.
   Les deux etages se tiennent, ne les changez que par paire. */
.menu-contextuel {
    position: fixed; z-index: 50; min-width: 292px; padding: 4px;
    display: flex; flex-direction: column;
    background: var(--fond-carte); border: 1px solid var(--bord-fort);
    border-radius: var(--r); box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.menu-titre { padding: 6px 10px; font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--bord); }
.menu-contextuel button, .menu-contextuel .lien-menu {
    display: flex; align-items: center; gap: 8px; padding: 7px 10px; text-align: left;
    background: none; border: none; cursor: pointer; font: inherit; color: var(--texte);
    text-decoration: none; border-radius: var(--r);
}
.menu-contextuel button:hover, .menu-contextuel .lien-menu:hover { background: var(--accent-clair); }
.menu-contextuel .lien-menu.inactif { opacity: .5; pointer-events: none; }
.menu-note { padding: 6px 10px; font-size: 11px; border-top: 1px solid var(--bord); }
.menu-contextuel .menu-trait { height: 1px; margin: 4px 6px; background: var(--bord); }
.menu-contextuel { max-height: none; overflow: visible; }
.menu-contextuel button:disabled { opacity: .45; cursor: default; background: none; }

/* Les images collees dans un champ RTF */
.documents-rtf { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.documents-rtf img {
    max-width: 100%; height: auto; display: block;
    border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte);
}

/* La fiche site a des sections larges : trois par ligne au plus */
.ecran-site .grp-saisie { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); }

.liste-choix-table { max-height: 46vh; overflow: auto; border: 1px solid var(--bord); border-radius: var(--r); }

/* La liste de Choix_Com_Hall, ramenée en volet à gauche de la fiche */
.plan-hall { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px; }

/* Fiche site (Fen_Com_Lieu) : meme decoupe que les halls */
.ecran-site { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.plan-site { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px; }
.plan-site .fiche-site { display: flex; flex-direction: column; min-height: 0; }
.plan-site .fiche-site .corps-volet { padding: 12px 14px; overflow-y: auto; }
.plan-site tr.choisie { background: var(--accent-clair); }
.plan-site tbody tr { cursor: pointer; }
.filtres-liste { display: flex; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--bord); flex: none; }
.filtres-liste select, .filtres-liste input {
    flex: 1; min-width: 0; height: 28px; padding: 0 6px; font: inherit;
    background-color: var(--fond-carte); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.plan-hall .fiche-hall .corps-volet { padding: 12px 14px; }

/* ============================================================   Fiche utilisateur (FEN_FB_Utilisateur1) et gestion des licences
   ========================================================================== */
.ecran-utilisateur { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.plan-utilisateur { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 8px; }
.fiche-utilisateur .corps-volet { padding: 12px 14px; }

.onglets-fiche { display: flex; align-items: center; gap: 4px; padding: 0 8px; flex: none;
    background: var(--fond-gris); border-bottom: 1px solid var(--bord); }
.onglets-fiche button {
    padding: 8px 14px; background: none; border: none; border-bottom: 2px solid transparent;
    font: inherit; color: var(--texte-doux); cursor: pointer;
}
.onglets-fiche button:hover { color: var(--texte); }
.onglets-fiche button.actif { color: var(--accent-texte); border-bottom-color: var(--accent); font-weight: 600; }
.onglets-fiche .pousse { flex: 1; }
.onglets-fiche .doux { padding-right: 8px; }

.grp-saisie-uti { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.grp-saisie-uti:disabled { opacity: .55; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.grille-champs .champ.grand { grid-column: 1 / -1; }
.grille-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; }
.grille-cases.serree { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 8px; }
.grille-cases label, .ligne-case { display: flex; align-items: center; gap: 7px; }
.ligne-case { padding: 6px 8px; color: var(--texte-doux); }
.grille-cases input[type=checkbox], .ligne-case input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.grp-saisie-uti select, .grp-saisie-uti input, .grp-saisie-uti textarea {
    width: 100%; padding: 5px 8px; font: inherit; resize: vertical;
    background-color: var(--fond-carte); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.grp-saisie-uti input, .grp-saisie-uti select { height: 30px; }
.grp-saisie-uti .grille-cases input[type=checkbox] { width: 15px; height: 15px; padding: 0; }

.table-droits tr.parti td { color: var(--texte-faible); font-style: italic; }
.jeton.expire { background: var(--fond-danger); border-color: #f5c6c2; color: var(--rouge); }
.jeton.bientot { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--orange); }

/* Le selecteur d entite porte par chaque fenetre */
.selecteur-entite-ecran { display: inline-flex; align-items: center; gap: 3px; }
.selecteur-entite-ecran .libelle { color: var(--texte-doux); margin-right: 5px; }
.selecteur-entite-ecran button {
    min-width: 34px; height: 26px; padding: 0 8px; font: inherit; font-size: 12px; cursor: pointer;
    background: var(--fond-carte); color: var(--texte-doux);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.selecteur-entite-ecran button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-texte); }
.selecteur-entite-ecran button.actif { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.selecteur-entite-ecran button:disabled { opacity: .6; cursor: default; }

/* La fiche utilisateur en deux colonnes : la saisie d'un côté, les cases de l'autre */
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 12px; align-items: start; }
.deux-colonnes .colonne { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.deux-colonnes .grille-champs { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.deux-colonnes .grille-cases { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.deux-colonnes .grille-cases.serree { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }

/* ============================================================   Tableau de bord de l'accueil (rappels de FEN_A_NE_PAS_OUBLIER)
   Un bloc parmi d'autres : il prend la place de son contenu, le tableau de
   bord commercial viendra dessous.
   ========================================================================== */
.accueil-bord { display: flex; flex-direction: column; gap: 16px; }
.tableau-bord { display: flex; flex-direction: column; gap: 12px; }

.entete-bord { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entete-bord h2 { margin: 0 0 1px 0; font-size: 19px; font-weight: 600; }
.entete-bord .pousse { flex: 1; }

/* Un bouton d'action discret, à la taille des sélecteurs */
.bouton-icone {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--fond-carte); color: var(--texte-doux); cursor: pointer;
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.bouton-icone:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-texte); }
.bouton-icone:disabled { opacity: .5; cursor: default; }

/* Une carte par famille de rappel */
.cartes-bord {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
    gap: 12px; align-items: start; margin-bottom: 18px;
}
.carte { display: flex; flex-direction: column; min-width: 0;
    background: var(--fond-carte); border: 1px solid var(--bord); border-left-width: 3px;
    border-radius: var(--r); overflow: hidden; }

/* Le tableau de bord commercial reprend la disposition de la fenetre :
   les projets en cours tiennent la colonne de gauche, les trois autres
   listes s'empilent a droite. */
.grille-commercial {
    grid-template-columns: 7fr 5fr;
    grid-template-areas:
        "projets relances"
        "projets ao"
        "projets salons";
}
.zone-projets { grid-area: projets; }
.zone-relances { grid-area: relances; }
.zone-ao { grid-area: ao; }
.zone-salons { grid-area: salons; }

@media (max-width: 1180px) {
    .grille-commercial {
        grid-template-columns: 1fr;
        grid-template-areas: "projets" "relances" "ao" "salons";
    }
}
.carte.calme { border-left-color: var(--bord); }
.carte.attention { border-left-color: var(--accent); }
.carte.alerte { border-left-color: var(--rouge); }

.carte-entete { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: var(--fond-gris); border-bottom: 1px solid var(--bord); }
.carte-titre { font-weight: 600; font-size: 13px; }
.carte-urgents { font-size: 11px; color: var(--rouge); }
.carte-nombre { margin-left: auto; min-width: 26px; height: 22px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: 11px;
    font-size: 12px; font-weight: 600; }
.carte.alerte .carte-nombre { background: var(--fond-danger); border-color: #f5c6c2; color: var(--rouge); }
.carte.attention .carte-nombre { background: var(--accent-clair); border-color: var(--accent-clair); color: var(--accent-texte); }

.carte-corps { flex: 1; overflow: hidden; }
.carte .table-droits { table-layout: fixed; }
.carte .table-droits td { padding: 4px 10px; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte .col-entite { width: 40px; padding-right: 0; }
.carte .col-ref { width: 74px; }
.carte .col-jour { width: 66px; }
.carte .col-etat { width: 118px; }
/* ============================================================   Tableau de bord commercial (FEN_TDB_Commercial_Optimise)
   La disposition de la fenetre : a gauche les projets puis leur analyse, a
   droite les trois listes de relances et de salons, et la bande des taux en
   bas sur toute la largeur. Chaque panneau defile chez lui.
   ========================================================================== */
.ecran-tdb { height: 100%; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.grille-tdb {
    flex: 1; min-height: 0; display: grid; gap: 10px;
    grid-template-columns: 7fr 5fr;
    grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
        "projets  relances"
        "analyse  ao"
        "analyse  salons"
        "bas      bas";
}
.zone-projets { grid-area: projets; }
.zone-relances { grid-area: relances; }
.zone-analyse { grid-area: analyse; }
.zone-ao { grid-area: ao; }
.zone-salons { grid-area: salons; }
.zone-bas { grid-area: bas; }

@media (max-width: 1180px) {
    .grille-tdb {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: "projets" "relances" "analyse" "ao" "salons" "bas";
        /* Six panneaux empilés dans la hauteur d'un écran de 768 : chacun tombait à 40 px. La grille défile, le pied reste. */
        overflow-y: auto;
        grid-auto-rows: minmax(230px, auto);
    }
}

.ecran-tdb .carte { min-height: 0; }
.ecran-tdb .carte-corps { overflow-x: hidden; overflow-y: auto; }

/* L'analyse occupe toute la hauteur de son panneau : les barres s'etirent */
.ecran-tdb .tdb-analyse .carte-corps { display: flex; flex-direction: column; }

/* Les couleurs de bandeau de la fenetre, panneau par panneau */
.tdb-projets { border-left-color: #41B8D5; }
.tdb-projets .table-tdb thead th { background: #41B8D5; color: #0a2a33; }
.tdb-relances { border-left-color: #C3DDB8; }
.tdb-relances .table-tdb thead th { background: #C3DDB8; color: #2f4a26; }
.tdb-ao { border-left-color: var(--bord-fort); }
.tdb-ao .table-tdb thead th { background: var(--fond-gris); color: var(--texte-doux); }
.tdb-salons { border-left-color: #ADAEF4; }
.tdb-salons .table-tdb thead th { background: #ADAEF4; color: #262663; }
.tdb-analyse { border-left-color: #7E80E7; }
.tdb-bas { border-left-color: #9B57CC; }

/* Les barres mensuelles de l'analyse des projets en cours */
.legende-series, .legende-camembert {
    display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 12px 4px 12px; font-size: 12px;
}
.entree-legende { display: inline-flex; align-items: center; gap: 5px; color: var(--texte-doux); }
.pastille-serie { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

.barres-mois {
    flex: 1; min-height: 0; padding: 2px 14px 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.ligne-mois {
    flex: 1; min-height: 20px; display: grid; grid-template-columns: 112px minmax(0, 1fr);
    align-items: center; gap: 10px;
}
.etiquette-mois { font-size: 12px; color: var(--texte-doux); text-align: right; white-space: nowrap; }
.piste-mois {
    display: flex; height: 100%; max-height: 30px; min-height: 16px; background: var(--fond-gris);
    border: 1px solid var(--bord); border-radius: 3px; overflow: hidden;
}
.segment { height: 100%; }

/* La bande des taux de transformation et des indicateurs */
.bande-stats { display: grid; grid-template-columns: repeat(3, 1fr) minmax(220px, 1fr); gap: 10px; padding: 10px 12px; }
.bloc-stat { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.titre-stat { font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--bord); padding-bottom: 3px; }
.camembert { position: relative; display: flex; flex-direction: column; align-items: center; }
.camembert svg { width: 100%; max-width: 190px; height: auto; }
.part-dominante {
    position: absolute; left: 0; right: 0; bottom: 4px; text-align: center;
    font-size: 13px; font-weight: 600; pointer-events: none;
}
.liste-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; margin: 4px 0 0 0; }
.liste-kpi dt { font-size: 12px; color: var(--texte-doux); }
.liste-kpi dd { margin: 0; font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; }

/* Les deux plans de justification, sous la bande des taux */
.pied-stats { display: flex; align-items: center; padding: 0 12px 10px 12px; }
.bande-justif { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; min-height: 0; }
.entete-justif { display: flex; align-items: center; gap: 10px; }
.tables-justif { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.bloc-justif { min-width: 0; max-height: 300px; overflow-y: auto; overflow-x: hidden;
    border: 1px solid var(--bord); border-radius: var(--r); }
.bloc-justif.bloc-large { grid-column: span 2; }
.titre-justif {
    padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--texte-doux);
    background: var(--fond-gris); border-bottom: 1px solid var(--bord);
}
.table-tdb .col-euro { width: 116px; text-align: right; white-space: nowrap; }
.table-tdb .col-part { width: 74px; text-align: right; white-space: nowrap; }
.table-tdb tfoot td {
    padding: 5px 10px; font-weight: 600; background: var(--fond-gris);
    border-top: 1px solid var(--bord);
}

@media (max-width: 1180px) {
    .bloc-justif.bloc-large { grid-column: auto; }
}

.saisie-date {
    height: 30px; padding: 0 6px; background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}

/* Les listes du tableau de bord commercial : entetes de colonnes et
   colonnes calees comme dans la fenetre WinDev. */
.table-tdb { table-layout: fixed; width: 100%; }
.table-tdb thead th {
    padding: 6px 10px; text-align: left; font-size: 12px; font-weight: 600;
    color: var(--texte-doux); background: var(--fond-gris);
    border-bottom: 1px solid var(--bord);
}
.carte.alerte .table-tdb thead th { background: var(--fond-danger); color: var(--texte-danger); }
.carte.attention .table-tdb thead th { background: var(--accent-clair); color: var(--accent-texte); }
.table-tdb .col-date { width: 104px; white-space: nowrap; text-align: right; }
/* Un intitule de colonne se met sur deux lignes plutot que d'etre coupe */
.table-tdb thead th, .table-tdb thead th.col-date { white-space: normal; }
.table-tdb thead .col-jour, .table-tdb thead .col-etat { text-align: left; }
/* Un intitule de colonne se met sur deux lignes plutot que de se faire couper */
.table-tdb thead th { white-space: normal; }
.table-tdb thead .col-jour { text-align: right; }
.table-tdb thead .col-date { text-align: right; }
.table-tdb .col-gt { width: 44px; }
.table-tdb .brief-depasse { font-weight: 600; color: #7b3fbf; }
html[data-theme="sombre"] .table-tdb .brief-depasse { color: #c9a8f5; }   /* le violet de la date de brief dépassée fait 2,4 sur le fond sombre */
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .table-tdb .brief-depasse { color: #c9a8f5; } }
.table-tdb .vide { color: var(--texte-faible); font-size: 12px; }

/* Un bouton d'action en clair dans l'entete d'une carte */
.bouton-plat {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 8px; height: 22px; padding: 0 10px;
    background: var(--fond-carte); color: var(--texte-doux); cursor: pointer;
    border: 1px solid var(--bord-fort); border-radius: var(--r); font-size: 12px;
}
.bouton-plat:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-texte); }
.bouton-plat:disabled { opacity: .5; cursor: default; }

/* Le choix du commercial, a la taille des selecteurs du bandeau */
.choix-commercial {
    height: 30px; max-width: 230px; padding: 0 8px;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.choix-commercial:disabled { opacity: .5; }

.carte .lib { white-space: normal; }
.carte .lib-nom, .carte .lib-affaire { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte .lib-affaire { font-size: 11px; color: var(--texte-faible); }
.carte .col-etat .jeton { white-space: nowrap; }
.carte .table-droits td:last-child { text-align: right; }
.carte .vide, .carte .reste { padding: 8px 12px; font-size: 12px; color: var(--texte-faible); }
.carte .reste { border-top: 1px solid var(--fond-gris); }

/* ============================================================   Fiche société (Fen_Com_Entreprise_V_11_2023)
   ========================================================================== */
.ecran-ets { height: 100%; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.plan-ets { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px; }
.fiche-ets { display: flex; flex-direction: column; min-height: 0; }
.plan-ets .fiche-ets .corps-volet { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

/* SEL_Choix_Plan : la barre d'onglets DANS la fiche, distincte de celle de
   l'application (qui, elle, se saisit pour détacher un écran). */
.onglets-plan {
    display: flex; align-items: center; gap: 2px; flex: none;
    padding: 0 8px; background: var(--fond-gris); border-bottom: 1px solid var(--bord);
    overflow-x: auto; scrollbar-width: thin;
}
.onglet-plan {
    padding: 7px 14px 5px 14px; white-space: nowrap; cursor: pointer;
    background: transparent; border: none; border-bottom: 2px solid transparent;
    color: var(--texte-doux); font: inherit;
}
.onglet-plan:hover:not(:disabled) { background: var(--accent-survol); }
.onglet-plan.actif {
    background: var(--fond-carte); border-bottom-color: var(--accent);
    color: var(--accent-texte); font-weight: 600;
}
.onglet-plan:disabled { color: var(--texte-faible); cursor: default; opacity: .55; }

/* LIB_Type : le métier sur lequel la fenêtre est ouverte */
.jeton.type-ets { background: var(--accent-clair); color: var(--accent-texte); font-weight: 600; }
.titre-fenetre { font-weight: 600; }

.avertissement-liste {
    padding: 5px 8px; font-size: 12px; background: var(--fond-attention);
    border-bottom: 1px solid var(--bord); flex: none;
}

.ecran-ets .petit { font-size: 11px; }
.ecran-ets .case { display: flex; align-items: center; gap: 8px; }
.ecran-ets .case input[type=checkbox] { width: auto; }
.ecran-ets .section-fiche h4 {
    margin: 0 0 8px 0; font-size: 12px; font-weight: 600; color: var(--texte-doux);
    text-transform: uppercase; letter-spacing: .3px;
}
.ecran-ets .grille-fiche .large { grid-column: 2 / -1; }
.ecran-ets fieldset.grp-saisie { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

/* ============================================================   Plan 11 — page d'accueil société (Fen_Com_Entreprise_V_11_2023)
   ========================================================================== */
.bandeau-ets {
    display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap;
    padding: 6px 8px; background: var(--fond-gris); border-bottom: 1px solid var(--bord);
}
.bandeau-ets .etiq { color: var(--texte-doux); white-space: nowrap; }
.bandeau-ets .saisie-societe { min-width: 260px; }
.bandeau-ets .combo-annee { width: 84px; }
.bandeau-ets input, .bandeau-ets select {
    height: 28px; padding: 0 6px; font: inherit;
    background-color: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}

/* IMG_Type : la lettre du type de société, comme la vignette de la fenêtre */
.pastille-type {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 1px solid var(--bord-fort); border-radius: var(--r);
    background: var(--fond-carte); color: var(--accent-texte); font-weight: 700; font-size: 17px;
}

.onglets-plan .etiq { color: var(--texte-doux); margin-left: 8px; }
.onglets-plan .code-client {
    width: 86px; height: 24px; margin: 0 8px; padding: 0 6px; font: inherit;
    background: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: var(--r);
}

.corps-plan { flex: 1; min-height: 0; overflow: auto; padding: 10px; background: var(--fond); }

/* Les libellés de la fenêtre sont en gras souligné : on garde ce repère */
.lib-souligne { font-weight: 600; text-decoration: underline; }

.cadre-bloc {
    border: 1px solid var(--bord); border-radius: var(--r);
    background: var(--fond-carte); padding: 8px 10px; min-width: 0;
}

/* La grille du plan 11 : deux colonnes de champs, comme dans WinDev */
.plan11 {
    display: grid; gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "nom     cml"
        "qualif  relance"
        "info    contact"
        "comm    comm"
        "aff     histo";
}
.p11-nom { grid-area: nom; } .p11-cml { grid-area: cml; }
.p11-qualif { grid-area: qualif; } .p11-relance { grid-area: relance; }
.p11-info { grid-area: info; } .p11-contact { grid-area: contact; }
.p11-commentaire { grid-area: comm; }
.p11-affaires { grid-area: aff; } .p11-historique { grid-area: histo; }

.plan11 > div[class^="p11-"]:not(.cadre-bloc) { display: flex; align-items: center; gap: 8px; }
.plan11 > div[class^="p11-"]:not(.cadre-bloc) > input,
.plan11 > div[class^="p11-"]:not(.cadre-bloc) > select { flex: 1; min-width: 0; }

.grille-p11 {
    display: grid; grid-template-columns: 150px minmax(0, 1fr) 130px minmax(0, 1fr);
    gap: 6px 10px; align-items: center; border: none; padding: 6px 0 0 0; margin: 0;
}
.grille-p11 > label { color: var(--texte-doux); }
.grille-p11 .sur-deux { grid-column: 2 / -1; }
.grille-p11 input, .grille-p11 select, .grille-p11 textarea,
.plan11 input, .plan11 select, .plan11 textarea {
    width: 100%; padding: 4px 7px; font: inherit; resize: vertical;
    background-color: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.grille-p11 input:disabled, .grille-p11 select:disabled, .grille-p11 textarea:disabled,
.plan11 input:disabled, .plan11 select:disabled, .plan11 textarea:disabled {
    background-color: var(--fond-gris); color: var(--texte-doux);
}
.avec-bouton { display: flex; gap: 6px; align-items: center; }
.avec-bouton > input { flex: 1; min-width: 0; }

.p11-commentaire textarea { margin-top: 6px; }

/* Les deux tables du bas : en-têtes colorés, comme dans la fenêtre */
.table-p11 { max-height: 300px; overflow: auto; border: 1px solid var(--bord); margin-top: 6px; }
.table-p11 table { width: 100%; }
.table-p11 thead th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 5px 8px; }
.table-affaires thead th { background: #56c5dd; color: #05323c; }
.table-histo thead th { background: #c9e6c2; color: #1d3d18; }
.table-p11 tbody tr { cursor: pointer; }
.table-p11 .col-etroite { width: 54px; text-align: center; }
/* ⚠️ PORTEES PAR « .table-p11 », comme .col-etat-projet juste au-dessous : le nom
   « col-avancement » existait deja, mais sous « .table-ppales » -- le reprendre ici
   aurait donne une classe SANS AUCUNE REGLE dans cette table, ce que
   classes_sans_definition.py appelle desormais « sans style ». */
.table-p11 .col-etat-fact { width: 104px; }
.table-p11 .col-pct-fact { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.jeton-fact.fact-solde { background: var(--fond-succes); border-color: var(--bord-succes); color: var(--vert); }
.jeton-fact.fact-encours { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--texte-attention); }

.table-p11 .col-etat-projet { width: 130px; }
.table-p11 .col-action { width: 150px; }

.boutons-table { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }

.entete-histo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entete-histo select { width: 190px; }
.radio-histo { display: inline-flex; align-items: center; gap: 4px; color: var(--texte-doux); }
.radio-histo input { width: auto; }

.plan-compta { display: flex; flex-direction: column; gap: 8px; max-width: 980px; }
.plan-compta fieldset.grp-saisie { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.adr-fac { margin-top: 6px; padding: 6px 8px; background: var(--fond-gris); border-radius: var(--r); }

/* Le pied de la fenêtre : les boutons sur une ligne, comme WinDev */
.pied-ets {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none;
    padding: 6px 8px; border-top: 1px solid var(--bord); background: var(--fond-gris);
}
.btn-carre.vert { background: #2e9e4f; border-color: #26843f; color: #fff; }
.btn-carre.vert:hover:not(:disabled) { background: #268442; }

@media (max-width: 1250px) {
    .plan11 {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "nom" "cml" "qualif" "relance" "info" "contact" "comm" "aff" "histo";
    }
    .grille-p11 { grid-template-columns: 150px minmax(0, 1fr); }
    .grille-p11 .sur-deux { grid-column: 2 / -1; }
}

/* --------------------------------------------------------------------------
   Plan 11 : la page tient dans l'écran. Seules les deux tables défilent,
   comme les tables de WinDev ; la fenêtre elle-même n'a pas d'ascenseur.
   -------------------------------------------------------------------------- */
.corps-plan { overflow: hidden; padding: 8px; }

.plan11 {
    height: 100%; min-height: 0; gap: 6px;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
}
.plan11 .cadre-bloc { padding: 6px 9px; }
.plan11 .lib-souligne { font-size: 12px; }

/* Les deux blocs du bas prennent ce qui reste, et ne débordent pas */
.p11-affaires, .p11-historique { display: flex; flex-direction: column; min-height: 0; }
.p11-affaires .table-p11, .p11-historique .table-p11 { flex: 1; min-height: 0; max-height: none; }

/* Les champs se resserrent : tout doit entrer sans ascenseur */
.plan11 .grille-p11 { gap: 4px 10px; padding-top: 4px; }
.plan11 input, .plan11 select, .plan11 textarea { padding: 3px 7px; }
.plan11 .table-p11 thead th { padding: 4px 8px; }
.plan11 .table-p11 td { padding: 3px 8px; }
.plan11 .boutons-table { margin-top: 3px; }

/* Le pied : Aides à gauche, toutes les actions à droite — comme WinDev */
.pied-ets { justify-content: flex-end; }
.pied-ets .a-gauche { margin-right: auto; }

/* Le pied ne fait qu'une barre : un trait sépare les actions de l'onglet
   affiché de celles qui valent pour la fiche entière. */
.trait-pied { width: 1px; align-self: stretch; margin: 0 4px; background: var(--bord-fort); }

/* L'onglet Compta défile seul s'il le faut, pas la fenêtre */
.plan-compta { height: 100%; min-height: 0; overflow: auto; }

@media (max-height: 820px) {
    .plan11 .lib-souligne { font-size: 11px; }
    .plan11 .grille-p11 { gap: 3px 8px; }
}

/* La colonne Action tient le plus long libellé de la table action,
   « Acceptation Proposition commerciale » : plus de retour à la ligne. */
.plan11 .table-p11 .col-action { width: 250px; white-space: nowrap; }
@media (max-width: 1400px) {
    .plan11 .table-p11 .col-action { width: 210px; }
}

/* ============================================================   ToastAffiche : les messages passagers.
   Comme l'ERP (cvMilieu, chCentre) : la pile est au MILIEU de l'ecran (decision du 2026-10-21).
   Le conteneur ne capte jamais la souris : seul le toast se clique, la saisie dessous reste libre.
   ========================================================================== */
.pile-toasts {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 60; display: flex; flex-direction: column; gap: 6px;
    align-items: center; pointer-events: none; max-width: min(720px, 90vw);
}
.toast {
    display: flex; align-items: center; gap: 9px; pointer-events: auto; cursor: pointer;
    padding: 9px 16px; border-radius: var(--r); border: 1px solid;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16); font-weight: 500;
    animation: toast-entre .18s ease-out;
}
.toast .icone { flex: none; }
.toast.succes { background: var(--fond-succes); border-color: #9ed49e; color: var(--texte-succes); }
html[data-theme="sombre"] .toast.succes { border-color: var(--bord-succes); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .toast.succes { border-color: var(--bord-succes); } }
.toast.info { background: #e6f1fb; border-color: #a6c9e8; color: #10405f; }
.toast.avertissement { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--texte-attention); }

@keyframes toast-entre {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Erreur() : la boite qu'il faut acquitter */
.boite-titre.alerte { display: flex; align-items: center; gap: 8px; color: var(--rouge); }

@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
}

/* ============================================================   Couleurs d'entité — data_grp.ent_couleur_Fond_Ets

   L'ERP pose cette couleur sur MaFenêtre..CouleurFond. Inonder l'écran est
   trop lourd ici : elle ne sert que dans le sélecteur d'entité — pleine sur
   le bouton actif, en liseré sous les autres — et, discrètement, sur la
   barre d'onglets de la fenêtre. Une entité en blanc (CV, OD) n'en pose
   aucune, et l'écran garde son apparence habituelle.
   ========================================================================== */
/* L'onglet de l'application porte la couleur : la fenêtre reste neutre.
   L'onglet courant la prend en plein ; les autres n'en gardent qu'un liseré,
   assez pour savoir sur quelle entité ils travaillent. */
.onglet[style*='--teinte-onglet'].actif {
    background: var(--teinte-onglet);
    border-bottom-color: var(--teinte-onglet);
    color: var(--texte-onglet);
}
.onglet[style*='--teinte-onglet']:not(.actif) {
    box-shadow: inset 0 -3px 0 0 var(--teinte-onglet);
}

/* Le sélecteur : pastille sur chaque entité, couleur pleine sur l'active */
.selecteur-entite-ecran button { position: relative; }
.selecteur-entite-ecran button.actif {
    background: var(--couleur-entite, var(--accent));
    border-color: var(--couleur-entite, var(--accent));
    color: var(--texte-entite, #fff);
}
.selecteur-entite-ecran button:not(.actif)::after {
    content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 2px;
    background: var(--couleur-entite, transparent); border-radius: 1px;
}

/* ============================================================   Plan 5 — onglet Contacts

   La fenêtre WinDev empile une grande table et une fiche en dessous, avec les
   onze colonnes visibles d'un coup. Ici, la liste et la fiche sont côte à
   côte : la liste ne montre que ce qui sert à reconnaître un contact, et la
   fiche porte tous les champs — aucun n'est perdu.
   ========================================================================== */
.plan-contacts {
    height: 100%; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 8px;
}
.liste-contacts, .fiche-contact { display: flex; flex-direction: column; min-height: 0; }
.liste-contacts .table-p11 { flex: 1; min-height: 0; max-height: none; }

.entete-contacts { display: flex; align-items: center; gap: 10px; flex: none; padding-bottom: 4px; }
.filtre-contacts {
    width: 190px; height: 26px; padding: 0 7px; font: inherit;
    background: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: var(--r);
}

.table-contacts thead th { background: var(--fond-gris); }
.table-contacts .col-roles { width: 104px; }
.table-contacts .col-tel { width: 132px; }
.table-contacts .jeton { margin-right: 3px; font-size: 10px; padding: 1px 5px; }
.table-contacts .jeton.ppal { background: var(--accent-clair); color: var(--accent-texte); font-weight: 600; }

/* La fiche : deux colonnes serrées, libellé à gauche */
.grille-contact {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 5px 10px;
    align-items: center; border: none; padding: 6px 0 0 0; margin: 0;
}
.grille-contact > label { color: var(--texte-doux); }
.grille-contact input, .grille-contact textarea {
    width: 100%; padding: 4px 7px; font: inherit; resize: vertical;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.grille-contact input:disabled, .grille-contact textarea:disabled {
    background: var(--fond-gris); color: var(--texte-doux);
}
.grille-contact textarea { grid-column: 1 / -1; }

.roles-contact {
    border: none; padding: 8px 0 0 0; margin: 8px 0 0 0;
    border-top: 1px solid var(--bord); display: flex; flex-direction: column; gap: 5px;
}
.roles-contact .case input { width: auto; }

/* Les actions de la fiche restent dans son volet, en bas à droite : leur
   place dit sur quoi elles portent — le contact ou l'action sélectionnée. */
.boutons-contact {
    display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end;
    margin-top: auto; padding-top: 8px;
}
.boutons-contact .btn-carre {
    flex: 1 1 0; min-width: 0; padding: 6px 4px; font-size: 12px; gap: 3px;
}
.boutons-contact .btn-carre .icone { width: 15px; height: 15px; }
.fiche-contact .boutons-contact + .boutons-contact { margin-top: 0; padding-top: 4px; }


@media (max-width: 1250px) {
    .plan-contacts { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
}


/* Onglet Historique : mêmes blocs que Contacts, deux colonnes de plus */
.table-contacts .col-indice { width: 58px; text-align: right; }
.grille-contact select {
    width: 100%; padding: 4px 7px; font: inherit;
    background-color: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.grille-contact select:disabled { background-color: var(--fond-gris); color: var(--texte-doux); }
.legende-obligatoire { margin-top: 6px; }

/* Des onglets aux angles arrondis, comme Windows 11 */
.onglet {
    border-radius: 8px 8px 0 0;
    margin-right: 2px;
}
.onglets-plan .onglet-plan { border-radius: 7px 7px 0 0; }

/* La colonne Action tient son plus long libellé dans l'onglet Historique aussi */
.table-contacts .col-action { width: 250px; white-space: nowrap; }
@media (max-width: 1400px) {
    .table-contacts .col-action { width: 210px; }
}

/* ============================================================   Plan 6 — onglet Affaires

   Deux mondes dans la même table : le salon et le reste. L'ERP les mêlait
   sans autre repère qu'une colonne « Type » à une lettre ; ici chaque ligne
   porte sa marque, et trois boutons filtrent l'un, l'autre ou les deux.
   Sur une entité sans salon, le monde du stand disparaît entièrement.
   ========================================================================== */
.plan-affaires { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.entete-affaires { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; }
.table-affaires-plan6 { flex: 1; min-height: 0; max-height: none; }

.mondes { display: inline-flex; gap: 3px; }
.monde {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; font: inherit; cursor: pointer;
    background: var(--fond-carte); color: var(--texte-doux);
    border: 1px solid var(--bord-fort); border-radius: 999px;
}
.monde:hover { background: var(--accent-survol); }
.monde .compte {
    min-width: 20px; padding: 0 5px; border-radius: 999px; font-size: 11px;
    background: var(--fond-gris); color: var(--texte-doux);
}
.monde.actif { border-color: var(--accent-texte); color: var(--accent-texte); font-weight: 600; }
.monde.salon.actif { border-color: #1b7fa8; color: var(--texte-info); }
.monde.hors.actif { border-color: var(--texte-attention); color: var(--texte-attention); }
.monde.actif .compte { background: var(--accent-clair); color: inherit; }

/* Chaque ligne dit son monde : un liseré à gauche et un jeton */
tr.monde-s td:first-child { box-shadow: inset 3px 0 0 0 #56c5dd; }
tr.monde-h td:first-child { box-shadow: inset 3px 0 0 0 #e0b84a; }
.col-monde { width: 96px; }
.jeton.salon { background: var(--fond-info); color: var(--texte-info); font-weight: 600; }
.jeton.hors { background: var(--fond-attention); color: var(--texte-attention); font-weight: 600; }
.jeton.interm { background: var(--accent-clair); color: var(--accent-texte); margin-left: 5px; font-size: 10px; }

.col-periode { width: 74px; }
.col-montant { width: 108px; text-align: right; }
.col-surface { width: 64px; text-align: right; }
.col-ville { width: 130px; }


/* Un menu ouvert depuis le pied se déroule vers le haut */
.menu-contextuel.vers-haut { transform: translateY(-100%); }

/* Le voile qui ferme un menu contextuel au clic à côté */
.voile-menu { position: fixed; inset: 0; z-index: 49; }
.menu-contextuel button:disabled { color: var(--texte-faible); cursor: default; }
.menu-contextuel button:disabled:hover { background: none; }

/* Les lignes filles : les devis d'une affaire, puis leurs avenants.
   La table WinDev était hiérarchique (TABLEH) ; le chevron remplace le +. */
.chevron {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-right: 5px; padding: 0; vertical-align: -2px;
    background: none; border: none; color: var(--texte-doux); cursor: pointer;
    font-size: 11px; line-height: 1; border-radius: 3px;
}
.chevron:hover { background: var(--accent-survol); color: var(--accent-texte); }
.chevron.vide { cursor: default; }
.bouton-icone .chevron { margin: 0; }

.ligne-devis td { background: var(--fond-gris); }
.ligne-devis td.lib { color: var(--texte-doux); }
.ligne-devis .niveau-1 { padding-left: 26px; }
.ligne-devis .niveau-2 { padding-left: 52px; }
.jeton.accepte { background: var(--fond-succes); color: var(--texte-succes); font-weight: 600; margin-left: 7px; font-size: 10px; }

/* La version que le projet a retenue : la fenêtre la passe en cyan */
.ligne-devis.retenu td.lib { background: var(--fond-info); color: var(--texte-info); font-style: italic; }
/* Avenants et travaux supplémentaires gardent les couleurs de la fenêtre */
.ligne-devis.avenant td.lib { background: var(--fond-attention); color: #e67e22; }
.ligne-devis.ts td.lib { background: #e8f5e9; color: #27ae60; }

/* Un projet en litige se voit dans la liste des affaires */
tr.en-litige td.lib { color: var(--rouge); }
tr.en-litige td.lib::after {
    content: "litige"; margin-left: 7px; padding: 1px 6px; border-radius: 999px;
    background: var(--fond-danger); color: var(--rouge); font-size: 10px; font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Relances commerciales : la barre de periode, les compteurs, l'anciennete.
   Le retard est l'information qui compte, il se voit sans avoir a lire.
   --------------------------------------------------------------------------- */
.barre-periode {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 10px; border-bottom: 1px solid var(--bord);
}
.jeton-periode {
    padding: 4px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px;
    border: 1px solid var(--bord-fort); background: var(--fond-carte); color: var(--texte);
}
.jeton-periode:hover:not(:disabled) { background: var(--accent-clair); }
.jeton-periode.actif { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.jeton-periode.actif:hover:not(:disabled) { background: var(--accent); color: #fff; }
.jeton-periode:disabled { opacity: .5; cursor: default; }

/* Dans une barre horizontale, le bouton se couche : le carre de 76x64 est la
   convention du pied d'ecran, il ecrase une ligne de filtres. */
.btn-carre.ligne {
    width: auto; height: 30px; padding: 0 12px; gap: 6px;
    flex-direction: row; font-size: 12px;
}


.jeton.retard { background: var(--fond-danger); color: var(--rouge); font-weight: 600; }
.jeton.retard-fort { background: var(--rouge); color: #fff; font-weight: 600; }
html[data-theme="sombre"] .jeton.retard-fort { color: #1b1a19; }   /* blanc sur le rouge clair du mode sombre : 2,9 */
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .jeton.retard-fort { color: #1b1a19; } }
.jeton.alerte { background: var(--fond-attention); color: var(--texte-attention); font-weight: 600; }

.retard-lib { font-size: 11px; color: var(--rouge); }
.retard-lib.fort { font-weight: 700; }
.retard-lib.doux { color: var(--texte-doux); font-weight: 400; }
.retard-lib.alerte { color: var(--texte-attention); font-weight: 600; }

/* Le tri se prend en cliquant l'en-tete. */
/* Le defilement virtuel rend les lignes a partir d'une hauteur fixe : une
   ligne qui deborde decalerait tout ce qui suit. Largeurs figees, contenu
   coupe proprement, hauteur constante. L'infobulle donne le texte entier. */
.table-relances { table-layout: fixed; width: 100%; }
.table-relances td { height: 41px; }
.table-relances td, .table-relances th { overflow: hidden; }
.table-relances .lib-nom, .table-relances .lib-affaire,
.table-relances .retard-lib, .table-relances td.lib {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.table-relances .col-entite { width: 62px; }
.table-relances .col-type { width: 48px; }
.table-relances .col-date { width: 116px; }
.table-relances .col-visiter { width: 104px; }
.table-relances .col-qualif { width: 150px; }
.table-relances .col-comm { width: 66px; }

.table-relances th.triable { cursor: pointer; user-select: none; white-space: nowrap; }
.table-relances th.triable:hover { background: var(--accent-clair); }
.table-relances th.trie { color: var(--accent-texte); }
.table-relances th .fleche { margin-left: 4px; font-size: 10px; }

/* Consigner une action. */
.boite-consigner { min-width: 520px; max-width: 640px; }
.champs-consigner { display: grid; grid-template-columns: 140px 1fr; gap: 8px 10px; align-items: start; }
.champs-consigner > label { padding-top: 6px; color: var(--texte-faible); font-size: 12px; }
.champs-consigner textarea { resize: vertical; font: inherit; }
.ligne-boutons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.note-consigner { margin-top: 10px; font-size: 11px; line-height: 1.45; }

.menu-contextuel .menu-ligne { display: flex; align-items: center; gap: 4px; padding: 4px 10px; }
.menu-contextuel .menu-ligne .bouton-plat {
    margin-left: 0; height: 24px; padding: 0 6px; flex: 1;
    justify-content: center; white-space: nowrap;
}
.menu-contextuel .menu-ligne .saisie-date { height: 24px; font-size: 12px; }
.menu-contextuel .menu-intitule {
    padding: 6px 10px 2px 10px; font-size: 11px; color: var(--texte-faible); text-transform: uppercase;
    letter-spacing: .03em;
}

.menu-contextuel .pastille {
    width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--bord-fort);
    display: inline-block; flex: none;
}

/* ---------------------------------------------------------------------------
   Creation de projet : deux ecrans, un salon et un hors salon, meme habillage.
   --------------------------------------------------------------------------- */
.ecran-projet { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ecran-projet .corps-volet { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
.ecran-projet .champs-section { margin-bottom: 12px; }

/* Une valeur que l'ecran a etablie : elle se lit, elle ne se saisit pas. */
.valeur-figee {
    display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px;
    background: var(--fond-gris); border: 1px solid var(--bord); border-radius: var(--r);
    font-size: 12px;
}

.bloc-intervenants { display: flex; flex-direction: column; gap: 6px; }
.jeton-intervenant {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    padding: 3px 4px 3px 10px; border: 1px solid var(--bord-fort); border-radius: 999px;
    background: var(--fond-carte); font-size: 12px;
}
.jeton-intervenant .role { color: var(--texte-faible); }
.jeton-intervenant .init { font-weight: 600; }
.jeton-intervenant .bouton-plat { margin-left: 0; height: 20px; padding: 0 8px; }

/* La consigne affichee tant que le projet n'existe pas encore en base. */
.note-projet { padding: 10px 12px; font-size: 12px; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Previsions commerciales. La grille tient la place, les totaux se tiennent a
   droite comme dans la fenetre, et l'etat de la ligne se lit a sa couleur.
   --------------------------------------------------------------------------- */
.ecran-previsions { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.ecran-previsions .mois-courant {
    min-width: 168px; text-align: center; font-weight: 600; text-transform: capitalize;
}

.grille-previsions {
    flex: 1; min-height: 0; display: grid; gap: 10px;
    grid-template-columns: minmax(0, 1fr) 232px; padding: 0 10px 8px 10px;
}
.grille-previsions .liste-previsions,
.grille-previsions .totaux-previsions { min-height: 0; display: flex; flex-direction: column; }

/* Le bandeau des totaux. */
.totaux-previsions .corps-volet { padding: 8px 10px; overflow: auto; }
.totaux-previsions .total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 3px 0; font-size: 12px;
}
.totaux-previsions .total b { font-variant-numeric: tabular-nums; }
.totaux-previsions .trait-total { height: 1px; margin: 7px 0; background: var(--bord); }

/* La grille elle-meme : montants alignes, lignes de hauteur constante. */
.table-previsions { table-layout: fixed; width: 100%; }
.table-previsions td { height: 36px; }
.table-previsions td, .table-previsions th { overflow: hidden; }
.table-previsions .col-mtt { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.table-previsions .col-type { width: 44px; }
.table-previsions .col-entite { width: 54px; }
.table-previsions .col-m2 { width: 48px; text-align: right; }
.table-previsions .col-stand { width: 104px; }
.table-previsions .col-presse { width: 56px; text-align: right; }
.table-previsions .col-date { width: 90px; }
.table-previsions .col-pct { width: 44px; text-align: right; }
.table-previsions .col-init { width: 54px; }
.table-previsions .col-lieu { width: 128px; }
.table-previsions th { white-space: nowrap; }
.table-previsions .lib-affaire { font-size: 10px; line-height: 1.25; }
.table-previsions .lib-nom, .table-previsions .lib-affaire, .table-previsions td.lib {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.table-previsions .fort { font-weight: 600; }
.table-previsions .parti { color: var(--rouge); font-weight: 600; }
.table-previsions td.alerte { color: var(--texte-attention); font-weight: 600; }

/* Les teintes de prev_param, converties depuis les entiers WinDev (bleu-vert-
   rouge) : type 1 stockage 39372, type 2 perdu 3355647, type 3 abandonne
   13354290, type 4 supprime 13421772. Elles ne portent que sur les cinq
   colonnes d'identite, comme dans la fenetre — les montants restent lisibles. */
.table-previsions .teinte-perdu { --fond-ligne: rgb(255,51,51); background: var(--fond-ligne); color: #000; }
.table-previsions .teinte-abandon { --fond-ligne: rgb(50,197,203); background: var(--fond-ligne); color: #000; }
.table-previsions .teinte-supprime { --fond-ligne: rgb(204,204,204); background: var(--fond-ligne); color: #000; }
.table-previsions .teinte-stockage { --fond-ligne: rgb(204,153,0); background: var(--fond-ligne); color: #000; }
.table-previsions .teinte-perdu .lib-affaire,
.table-previsions .teinte-abandon .lib-affaire,
.table-previsions .teinte-supprime .lib-affaire,
.table-previsions .teinte-stockage .lib-affaire { color: #000; opacity: .75; }

.jeton.teinte-perdu { background: rgb(255,51,51); color: #000; }
.jeton.teinte-abandon { background: rgb(50,197,203); color: #000; }
.jeton.teinte-supprime { background: rgb(204,204,204); color: #000; }
.jeton.teinte-stockage { background: rgb(204,153,0); color: #000; }

/* Les trois teintes que la fenetre pose a la main : la date limite depassee
   sans brief en rouge, le brief passe apres la date limite en cyan, et
   l'utilisateur parti en orange. */
.table-previsions td.brief-retard { background: rgb(255,51,51); color: #000; }
.table-previsions td.brief-tardif { background: rgb(50,197,203); color: #000; }
.table-previsions .parti { background: rgb(255,153,51); color: #000; font-weight: 600; }
.jeton.statut-parti { background: rgb(255,153,51); color: #000; font-weight: 600; }

.legende-previsions {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 10px; border-top: 1px solid var(--bord); font-size: 11px;
}
.jeton.statut-perdu { background: var(--fond-danger); color: var(--rouge); }
.jeton.statut-abandon { background: var(--fond-attention); color: var(--texte-attention); }
.jeton.statut-supprime { background: var(--fond-gris); color: var(--texte-faible); }
.jeton.statut-stockage { background: #eef4fb; color: var(--accent-texte); }
.jeton.statut-parti { background: var(--fond-danger); color: var(--rouge); font-weight: 600; }

/* Les plans de la fenetre WinDev, en onglets. */
.barre-onglets {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 10px; border-bottom: 1px solid var(--bord);
}

/* Le recap par commercial : deux niveaux, l'entete se clique pour deplier. */
.recap-previsions { flex: 1; min-height: 0; margin: 0 10px 8px 10px; }
.table-recap td, .table-recap th { height: 30px; }
.table-recap .col-mtt { width: 118px; text-align: right; font-variant-numeric: tabular-nums; }
.table-recap .col-part { width: 64px; text-align: right; }
.table-recap tr.ligne-entete { cursor: pointer; background: var(--fond-gris); }
.table-recap tr.ligne-entete:hover { background: var(--accent-clair); }
.table-recap tr.ligne-detail td:first-child { padding-left: 26px; }
/* Le pied du recapitulatif est dans « LA LIGNE DES SOMMES », plus bas, avec les quatre
   autres. C'est de LUI que viennent le trait de 2px et le gras. */
.table-recap .chevron { display: inline-block; width: 14px; color: var(--texte-faible); }
.table-recap .negatif { color: var(--rouge); }
.table-recap .positif { color: var(--vert); }   /* #1a7f37 en dur : 3,2 de contraste en mode sombre */
.table-recap .fort { font-weight: 600; }

/* Le pourcentage annonce l'affaire gagnee mais le projet n'a pas suivi. */
.pastille-alerte {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; margin-left: 6px; border-radius: 50%;
    background: var(--fond-attention); color: var(--texte-attention); font-size: 10px; font-weight: 700;
    border: 1px solid #f0c98a; vertical-align: middle;
}

/* La boite de regularisation : la liste des lignes a passer en commande. */
.jeton.cliquable { cursor: pointer; border: none; font: inherit; }
.jeton.cliquable:hover { filter: brightness(.95); }

.boite-regularisation { min-width: 620px; max-width: 760px; }
.liste-regularisation {
    margin-top: 10px; max-height: 320px; overflow: auto;
    border: 1px solid var(--bord); border-radius: var(--r);
}
.liste-regularisation .case-ligne {
    display: grid; grid-template-columns: 20px minmax(0,1.3fr) minmax(0,1fr) 56px 100px minmax(0,110px);
    align-items: center; gap: 8px; padding: 5px 10px; font-size: 12px;
    border-bottom: 1px solid var(--bord);
}
.liste-regularisation .case-ligne:last-child { border-bottom: none; }
.liste-regularisation .case-ligne.tout {
    grid-template-columns: 20px 1fr; background: var(--fond-gris); font-weight: 600;
}
.liste-regularisation .nom, .liste-regularisation .doux {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.liste-regularisation .pct, .liste-regularisation .mtt {
    text-align: right; font-variant-numeric: tabular-nums;
}

/* Une seule barre de reglages : mois, commercial, assistante, cases, recherche. */
.barre-reglages {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 5px 10px; border-bottom: 1px solid var(--bord);
}
.barre-reglages .pave-mois {
    display: flex; align-items: center; gap: 2px;
    border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte);
}
.barre-reglages .fleche {
    width: 24px; height: 26px; border: none; background: none; cursor: pointer;
    font-size: 15px; color: var(--texte); border-radius: var(--r);
}
.barre-reglages .fleche:hover:not(:disabled) { background: var(--accent-clair); }
.barre-reglages .mois-courant {
    min-width: 136px; height: 26px; text-align: center; font-weight: 600; font-size: 12px;
    text-transform: capitalize; border: none; background: none; cursor: pointer;
    color: var(--texte); border-radius: var(--r);
}
.barre-reglages .mois-courant:hover:not(:disabled) { background: var(--accent-clair); }
.menu-contextuel.menu-periode { min-width: 190px; }
.barre-reglages .select-compact { height: 26px; font-size: 12px; max-width: 190px; }
.barre-reglages .recherche-compacte { height: 26px; font-size: 12px; min-width: 220px; }
.barre-reglages label.doux { font-size: 12px; }

/* Les categories de projet : une liste, et la fiche de l'une d'elles. */
.ecran-categories { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ecran-categories .cadre { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ecran-categories .corps-volet { flex: 1; min-height: 0; overflow: auto; }
.ecran-categories tbody tr { cursor: pointer; }

/* Un sous-menu s'ouvre sur le cote au survol, sans clic de plus : c'est ce
   que fait OuvreMenuContextuel avec ses sous-menus. */
.menu-contextuel .option-volet { position: relative; }
.menu-contextuel .option-volet > .intitule {
    display: flex; align-items: center; gap: 8px; padding: 7px 10px;
    cursor: default; border-radius: var(--r);
}
.menu-contextuel .option-volet:not(.inactif):hover > .intitule { background: var(--accent-clair); }
.menu-contextuel .option-volet.inactif > .intitule { opacity: .45; }
.menu-contextuel .option-volet .chevron-volet { color: var(--texte-faible); font-size: 13px; }

.menu-contextuel .option-volet > .volet {
    display: none; position: absolute; left: calc(100% - 4px); top: -4px; z-index: 1;
    min-width: 160px; max-height: 60vh; overflow: auto; padding: 4px;
    flex-direction: column;
    background: var(--fond-carte); border: 1px solid var(--bord-fort);
    border-radius: var(--r); box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
/* Le sous-menu se deplie par .option-volet[data-ouvert], posé par clavier.js : vrai survol, clic ou fleche droite, jamais le seul fait que le menu s'ouvre sous le pointeur. */
.menu-contextuel .option-volet:not(.inactif)[data-ouvert] > .volet { display: flex; }
.menu-contextuel .option-volet > .volet button { white-space: nowrap; }

/* Rattacher une societe a un salon : la liste tient la hauteur, le bloc
   intermediaire reste visible dessous. */
.ecran-assoc { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ecran-assoc .cadre { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ecran-assoc .corps-volet { flex: 1; min-height: 0; overflow: auto; }
.ecran-assoc tbody tr { cursor: pointer; }
.ecran-assoc .champs-section { flex: none; margin: 8px 0; }

/* Le recap compare quatre annees : l'annee regardee en pleine encre, les
   trois precedentes en retrait pour qu'on ne les confonde pas. */
.table-recap .entete-annees th { text-align: center; }
.table-recap .groupe-annee {
    border-left: 1px solid var(--bord-fort); font-weight: 600;
}
.table-recap .groupe-annee.pale { color: var(--texte-faible); font-weight: 500; }
.table-recap td.pale, .table-recap th.pale { color: var(--texte-faible); }
.table-recap td.pale.negatif { color: #c4696e; }
.table-recap td.pale.positif { color: #5a9a6a; }

/* =============================================================   Tunnel de creation : une question a la fois, au centre, dans une colonne
   qui ne depasse pas la longueur de lecture confortable. Les choix sont des
   cartes assez grandes pour se cliquer sans viser.
   =========================================================================== */
.tunnel {
    display: flex; align-items: center; justify-content: center;
    height: 100%; min-height: 0; padding: 20px; background: var(--fond-gris);
}

/* Une fenetre mobile, pas un onglet etale : tout se lit au meme endroit, du
   titre aux boutons. Bornee en largeur pour rester une colonne de lecture. */
.tunnel-fenetre {
    display: flex; flex-direction: column;
    width: 760px; max-width: 100%; max-height: 100%;
    background: var(--fond-carte); border: 1px solid var(--bord-fort);
    border-radius: var(--r); box-shadow: var(--ombre-flottant); overflow: hidden;
}

.tunnel-entete { flex: none; padding: 14px 20px 10px; border-bottom: 1px solid var(--bord); }
.tunnel-titre { font-size: 17px; font-weight: 600; margin-bottom: 12px; }

/* Le rail des etapes : on voit d'ou l'on vient et ce qu'il reste. */
.tunnel-etapes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tunnel-etapes li { display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 5px;
    border-radius: 999px; color: var(--texte-faible); font-size: 12px; }
.tunnel-etapes .pastille {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 600;
    background: var(--fond-gris); color: var(--texte-faible); border: 1px solid var(--bord);
}
.tunnel-etapes li.faite { color: var(--texte); }
.tunnel-etapes li.faite .pastille { background: var(--accent-clair); color: var(--accent-texte);
    border-color: var(--accent); }
.tunnel-etapes li.ici { background: var(--accent); color: #fff; font-weight: 600; }
.tunnel-etapes li.ici .pastille { background: #fff; color: var(--accent); border-color: #fff; }

.tunnel-corps { flex: 1; min-height: 0; overflow: auto; padding: 22px 20px; }
.tunnel-carte { width: 100%; }

/* Le pied appartient a la fenetre : les boutons restent sous la question,
   pas a l'autre bout de l'ecran. La regle de projet tient — en bas a droite,
   mais de SA fenetre. */
.tunnel-pied {
    flex: none; display: flex; align-items: center; gap: 16px;
    padding: 10px 14px; border-top: 1px solid var(--bord); background: var(--fond);
}
.tunnel-pied .jauge { flex: 1; min-width: 120px; }
.tunnel-pied .barre-boutons {
    margin-left: auto; justify-content: flex-end; display: flex; gap: 5px; padding-top: 0;
}

/* L'etape « regulier ou occasionnel ? ». Deux cartes plutot que deux boutons radio :
   le choix porte une consequence -- le compte comptable -- et chaque carte la dit.
   Un radio aurait demande une legende a cote, que personne ne lit. */
.choix-tunnel { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.choix-carte { flex: 1 1 220px; min-width: 0; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 3px;
    border: 1px solid var(--bord); border-radius: 4px; padding: 10px 12px;
    background: var(--fond-carte); color: var(--texte); font: inherit; }
.choix-carte:hover { border-color: var(--bord-fort); }
.choix-carte.choisi { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choix-carte b { font-size: 13px; }

/* ⚠️ UN AVERTISSEMENT, PAS UNE ERREUR : le compte partage est permis. La teinte est
   celle de l'ambre de la maison, pas le rouge -- il ne faut pas que l'utilisateur
   cherche ce qu'il a casse. */
.avertissement-tunnel { color: var(--orange); font-size: 11.5px; margin: 6px 0 0;
    padding-left: 2px; }

.tunnel-question { margin: 0 0 16px; font-size: 20px; font-weight: 600; line-height: 1.35; }
.tunnel-question.secondaire { margin-top: 26px; font-size: 15px; }

/* Un choix, assez grand pour ne pas se rater. */
.tunnel-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.tunnel-liste { display: flex; flex-direction: column; gap: 8px; }
.tunnel-liste.serree { flex-direction: row; flex-wrap: wrap; }

.choix {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
    padding: 14px 16px; cursor: pointer; font: inherit; color: var(--texte);
    background: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: var(--r);
    transition: border-color .1s ease, background .1s ease;
}
.choix:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-survol); }
.choix.actif { border-color: var(--accent); background: var(--accent-clair);
    box-shadow: inset 0 0 0 1px var(--accent); }
.choix:disabled { opacity: .55; cursor: default; }
.choix-titre { font-weight: 600; }
.choix-aide { font-size: 12px; color: var(--texte-faible); line-height: 1.45; }
.choix.petit { padding: 8px 14px; }
.choix.petit .choix-titre { font-weight: 500; }

.tunnel-saisie {
    width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
    border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte);
}
.tunnel-saisie:focus { outline: none; border-color: var(--accent); }

.tunnel-champs { display: grid; grid-template-columns: 150px minmax(0, 260px);
    gap: 10px 14px; align-items: center; }
.tunnel-champs > label { color: var(--texte-doux); }
.tunnel-champs input,
.tunnel-champs select { padding: 8px 10px; font: inherit; }

.tunnel-raccourcis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.tunnel-raccourcis .bouton-plat { margin-left: 0; height: 26px; }

/* Ce qui arrete, ce qui alerte : deux tons, jamais la meme chose. */
.tunnel-impasse, .tunnel-avertit {
    margin-top: 16px; padding: 12px 14px; border-radius: var(--r);
    font-size: 13px; line-height: 1.55;
}
.tunnel-impasse { background: var(--fond-danger); color: var(--rouge); border: 1px solid var(--bord-danger); }
.tunnel-avertit { background: var(--fond-attention); color: var(--texte-attention); border: 1px solid var(--bord-attention); }
.tunnel-reussi { margin-top: 16px; padding: 12px 14px; border-radius: var(--r); font-size: 13px; line-height: 1.55; background: var(--fond-succes); color: var(--texte-succes); border: 1px solid var(--bord-succes); }

.tunnel-recap { display: grid; grid-template-columns: 170px minmax(0, 1fr);
    gap: 8px 16px; margin: 0; }
.tunnel-recap dt { color: var(--texte-faible); font-size: 13px; }
.tunnel-recap dd { margin: 0; font-weight: 500; }
.tunnel-suite { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--bord);
    font-size: 12px; color: var(--texte-faible); line-height: 1.6; }
/* Choix_Dossier_Technique_DtMobilier_NON_Termine : ce qui manque, en colonne */
.table-dtmob .col-type { width: 74px; }
.table-dtmob .col-periode { width: 128px; white-space: nowrap; }
.table-dtmob .col-surface { width: 52px; text-align: right; }
.table-dtmob .col-etatprj { width: 116px; }
.table-dtmob .col-manque { width: 168px; }
.table-dtmob .col-manque .jeton { margin: 0 3px 2px 0; }
.table-lignes-cde tr.ligne-aboutie td { color: var(--texte-faible); }

/* Dans le volet, une designation ou un etat de commande se lit en entier :
   la colonne se replie sur plusieurs lignes au lieu de couper le mot. */
.table-lignes-cde td.lib,
.table-lignes-cde td.lib * { white-space: normal; overflow: visible; text-overflow: clip; }
.table-lignes-cde td.lib .petit { display: block; margin-left: 0; color: var(--texte-doux); }
/* Sans largeur, table-layout:fixed partage a parts egales : la designation
   se retrouvait aussi etroite que la quantite. */
.table-lignes-cde .col-etroite { width: 44px; text-align: center; }
.table-lignes-cde .col-montant { width: 86px; }
.table-dtmob .col-lieu { width: 190px; }
.table-dtmob .col-lieu, .table-dtmob td.lib { white-space: normal; }

/* Les roles du tunnel : un libelle, un choix, alignes en colonne. */
.tunnel-roles { display: flex; flex-direction: column; gap: 14px; }
.tunnel-roles .role { display: flex; flex-direction: column; gap: 6px; }
.tunnel-roles .role-nom { font-size: 13px; color: var(--texte-doux); }
.tunnel-roles .role-nom .oblig { color: var(--rouge); margin-left: 2px; }
.tunnel-roles select { max-width: 420px; padding: 8px 10px; font: inherit; }

/* La fiche projet : une seule colonne, bornee, des cartes empilees. Etalee sur
   toute la largeur, elle separait les libelles de leurs champs de plusieurs
   centaines de pixels — et une mise en flex sans direction rangeait carrement
   les sections cote a cote. */
.fiche-projet { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* L'entete : le numero et l'etat sur une ligne, l'identite du projet sur la
   suivante. On doit savoir de quoi il s'agit sans rien parcourir. */
.entete-projet {
    flex: none; padding: 8px 14px 9px;
    background: var(--fond-barre); border-bottom: 1px solid var(--bord);
}
.entete-projet .ligne-titre { display: flex; align-items: center; gap: 8px; }
.entete-projet .titre-fiche { font-weight: 600; font-size: 15px; }
.entete-projet .ligne-identite {
    margin-top: 3px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px;
    font-size: 13px; color: var(--texte-doux);
}
.entete-projet .ligne-identite .client { font-weight: 600; color: var(--texte); }
.entete-projet .ligne-identite .objet { color: var(--texte); }
.entete-projet .ligne-identite .sep { color: var(--texte-faible); }
.corps-fiche { flex: 1; min-height: 0; overflow: auto; padding: 12px 10px; }
.corps-fiche.occupe { opacity: .55; pointer-events: none; }
/* Les cartes se rangent en colonnes plutot qu'en une pile a derouler : sur un
   ecran large tout tient d'un coup, et chaque cadre reste entier — c'est le
   role de break-inside, sans quoi une carte se couperait en deux. */
.colonne-fiche {
    max-width: 1400px; margin: 0 auto;
    columns: 2; column-gap: 14px;
}
.colonne-fiche > * { break-inside: avoid; margin: 0 0 12px; }
/* Deux colonnes et pas trois : au-dela, les libelles se detachent de leurs
   champs et l'oeil doit traverser l'ecran. Une seule quand la place manque. */
@media (max-width: 1180px) { .colonne-fiche { columns: 1; max-width: 860px; } }

/* ⚠️ columns est un FLUX : le navigateur equilibre les deux colonnes, donc une
   carte qui grandit en redistribue d'autres. Sur la fiche projet, cocher « Le
   lieu est precise » faisait sauter le chiffrage d'une colonne a l'autre sous
   les yeux. Avec .piles, chaque carte appartient a une pile et n'en bouge plus :
   grandir ne pousse que ce qui la suit DANS SA pile. */
.colonne-fiche.piles {
    columns: auto; display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 14px; align-items: start;
}
.colonne-fiche.piles > * { margin: 0; }
.colonne-fiche.piles > .pleine-largeur { grid-column: 1 / -1; margin-bottom: 12px; }
.pile-fiche { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1180px) {
    .colonne-fiche.piles { grid-template-columns: 1fr; max-width: 860px; gap: 12px; }
}
.carte-fiche {
    padding: 14px 18px; border: 1px solid var(--bord); border-radius: var(--r);
    background: var(--fond-carte);
}
.carte-fiche > h3 {
    margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--texte-doux);
    text-transform: uppercase; letter-spacing: .04em;
}

/* Le recapitulatif : libelle a gauche, valeur a droite, rien a remplir. */
.recap-fiche { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.recap-fiche dt { color: var(--texte-doux); font-size: 13px; }
.recap-fiche dd { margin: 0; }
.recap-fiche .note-salon { display: block; margin-top: 2px; font-size: 12px; }

.chiffres-fiche { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* Les chiffres passent en tete, sur toute la largeur : c'est ce que l'oeil
   cherche en premier, pas en bas d'une carte. */
.chiffres-fiche.en-bandeau {
    margin: 0 auto 14px; max-width: 1400px; gap: 12px;
}
.chiffres-fiche.en-bandeau .chiffre { padding: 10px 14px; background: var(--fond-carte); }
.chiffres-fiche.en-bandeau .valeur { font-size: 20px; }
.chiffres-fiche.en-bandeau .chiffre.fort {
    border-color: var(--accent-clair); background: var(--accent-clair);
}
.chiffres-fiche.en-bandeau .chiffre.fort .valeur { color: var(--accent-fonce); }
.chiffres-fiche .chiffre {
    flex: 1 1 110px; min-width: 110px; padding: 8px 10px;
    border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-gris);
    display: flex; flex-direction: column; gap: 2px;
}
.chiffres-fiche .valeur { font-size: 17px; font-weight: 600; }
.chiffres-fiche .libelle { font-size: 12px; color: var(--texte-doux); }

/* Ce qui se modifie : deux colonnes, le champ jamais loin de son libelle. */
.champs-fiche { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 9px 12px; align-items: center; }
.champs-fiche > label { color: var(--texte-doux); font-size: 13px; }
.champs-fiche input,
.champs-fiche select,
.champs-fiche textarea { width: 100%; padding: 7px 9px; font: inherit; }
.champs-fiche .case-ligne input,
.champs-fiche .ligne-boutons input[type="radio"] { width: auto; }
.champs-fiche .ligne-boutons { flex-wrap: nowrap; align-items: center; }
/* Une liste suivie de son bouton loupe : la liste prend la place, le bouton
   reste colle a sa droite. Sans cela la largeur de 100 % le renvoyait a la
   ligne, sous le champ. */
.champs-fiche .ligne-boutons > select,
.champs-fiche .ligne-boutons > input { flex: 1 1 auto; width: auto; min-width: 0; }
.champs-fiche .ligne-boutons > button { flex: 0 0 auto; }
.champs-fiche .ligne-boutons > .case-ligne,
.champs-fiche .ligne-boutons > span { flex: 0 0 auto; }

/* Une FI de WinDev : un ecran complet pose par-dessus celui qui l'appelle. */
.boite.fenetre-fi {
    width: 1040px; max-width: 94vw; height: 80vh;
    display: flex; flex-direction: column;
}
.boite.fenetre-fi > .boite-titre { flex: none; }
.boite.fenetre-fi > .ecran-categories {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    padding: 8px 12px 10px;
}
/* Le suivi de creation pose en FI : il porte deja son entete et son pied,
   il n'a besoin que de prendre la hauteur de la boite. */
.boite.fenetre-fi > .fiche-projet { flex: 1; min-height: 0; }

/* Les trois Choix_Suivi_Dossier_* : une liste de reference, ses couleurs, et
   la fiche qui la modifie. La boite est plus courte qu'une vraie FI -- il n'y
   a jamais qu'une vingtaine d'entrees. */
.boite.boite-liste-ref {
    width: 460px; max-width: 92vw; height: 62vh;
    display: flex; flex-direction: column;
}
.boite.boite-liste-ref > .boite-titre { flex: none; }
.boite.boite-liste-ref > .ecran-liste-ref { flex: 1; min-height: 0; }

.ecran-liste-ref { display: flex; flex-direction: column; }
.corps-liste-ref { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
.corps-liste-ref.occupe { opacity: .55; pointer-events: none; }
.corps-liste-ref .vide { padding: 24px 6px; text-align: center; color: var(--texte-faible); }

.liste-ref { display: flex; flex-direction: column; gap: 2px; }
.entree-ref {
    text-align: left; padding: 4px 8px; border: 1px solid transparent;
    border-radius: 3px; background: transparent; color: var(--texte);
    font: inherit; cursor: pointer;
}
.entree-ref:hover { border-color: var(--bord); }
.entree-ref.choisie { outline: 2px solid var(--accent); outline-offset: -2px; }

.fiche-ref .champs-fiche { display: grid; grid-template-columns: 120px 1fr; gap: 8px;
    align-items: center; }
.fiche-ref input[type=color] { width: 46px; height: 26px; padding: 0; cursor: pointer; }
.apercu-ref {
    padding: 4px 8px; border: 1px solid var(--bord); border-radius: 3px;
    min-height: 20px;
}
.note-ref { margin-top: 10px; font-size: 12px; line-height: 1.4; }

/* Un champ dont la valeur vient d'une fenetre : il se lit, il ne se tape pas,
   et il porte la couleur de l'entree choisie. */
.champ-liste { flex: 1; min-width: 0; background: var(--fond-carte); cursor: default; }
.btn-loupe {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--bord); border-radius: 3px;
    background: var(--fond-barre); color: var(--texte-doux); cursor: pointer;
}
.btn-loupe:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-texte); }
.btn-loupe:disabled { opacity: .45; cursor: default; }

/* BtnRech_Lst_Crea : plusieurs personnes sur un dossier. Le resume dit qui,
   la liste dessous sert a cocher. */
.choix-creatifs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.resume-creatifs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: 3px 6px; border: 1px solid var(--bord); border-radius: 3px;
    background: var(--fond-carte); min-height: 24px;
}

/* Un creatif retenu, dans l'ordre : c'est BTN_Tri_Crea, sans la fenetre. */
.jeton-choisi {
    display: inline-flex; align-items: center; gap: 1px;
    border: 1px solid var(--bord); border-radius: 3px;
    background: var(--fond-barre); padding: 0 2px;
}
.jeton-choisi.premier { border-color: var(--accent); background: var(--accent-clair); }
.jeton-choisi .marque-crea { font-weight: 600; padding: 0 4px; }
.fleche-rang {
    border: none; background: transparent; color: var(--texte-doux);
    cursor: pointer; font-size: 10px; line-height: 1; padding: 2px 1px;
}
.fleche-rang:hover:not(:disabled) { color: var(--accent-texte); }
.fleche-rang:disabled { opacity: .25; cursor: default; }
.liste-creatifs {
    max-height: 132px; overflow: auto;
    border: 1px solid var(--bord); border-radius: 3px; padding: 4px 6px;
}
.liste-creatifs .case-ligne { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.titre-groupe-crea {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--texte-faible); margin: 4px 0 2px 0;
}
.titre-groupe-crea:first-child { margin-top: 0; }
.init-crea { font-weight: 600; min-width: 34px; }
.liste-creatifs .case-ligne.parti { color: var(--texte-faible); font-style: italic; }

/* FEN_Suivi_Dossiers_Param_Couleur_Crea : une ligne par personne, sa couleur
   telle que la grille la montre, et les deux selecteurs. */
.boite.boite-couleurs-crea {
    width: 620px; max-width: 94vw; height: 68vh;
    display: flex; flex-direction: column;
}
.boite.boite-couleurs-crea > .boite-titre { flex: none; }
.boite.boite-couleurs-crea > .ecran-couleurs-crea { flex: 1; min-height: 0; }

.ecran-couleurs-crea { display: flex; flex-direction: column; }
.corps-couleurs-crea { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
.corps-couleurs-crea.occupe { opacity: .55; pointer-events: none; }
.corps-couleurs-crea .vide { padding: 24px 6px; text-align: center; color: var(--texte-faible); }

.ligne-couleur-crea {
    display: flex; align-items: center; gap: 6px; padding: 3px 0;
    border-bottom: 1px solid var(--bord);
}
.ligne-couleur-crea:last-child { border-bottom: none; }
.ligne-couleur-crea .jeton-crea {
    flex: 0 0 auto; min-width: 42px; text-align: center; font-weight: 600;
    padding: 2px 6px; border: 1px solid var(--bord); border-radius: 3px;
}
.ligne-couleur-crea .nom-crea {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ligne-couleur-crea input[type=color] {
    flex: 0 0 auto; width: 42px; height: 24px; padding: 0; cursor: pointer;
}
.ligne-couleur-crea .bouton-plat { flex: 0 0 auto; padding: 1px 6px; }
.note-couleurs { font-size: 12px; align-self: center; }

/* FEN_Crea_Estimation_Tps : les heures par tache, en deux volets. */
.boite.boite-temps-estimes {
    width: 780px; max-width: 94vw; height: 78vh;
    display: flex; flex-direction: column;
}
.boite.boite-temps-estimes > .boite-titre { flex: none; }
.boite.boite-temps-estimes > .ecran-temps-estimes { flex: 1; min-height: 0; }

.ecran-temps-estimes { display: flex; flex-direction: column; }
.corps-temps { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
.corps-temps.occupe { opacity: .55; pointer-events: none; }
.corps-temps .vide { padding: 18px 6px; text-align: center; color: var(--texte-faible); }

.barre-personne { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.barre-personne .total-temps { font-weight: 600; }

.volet-taches { margin-top: 10px; }
.volet-taches h4 {
    display: flex; align-items: center; margin: 0 0 6px 0; font-size: 12px;
    text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux);
    border-bottom: 1px solid var(--bord); padding-bottom: 3px;
}
.grille-taches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px; }
.ligne-tache { display: flex; align-items: center; gap: 8px; }
.ligne-tache .lib-tache {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saisie-heures { flex: 0 0 auto; width: 72px; text-align: right; }

/* =====================================================   Le stockage : les contrats, les mouvements, la facturation du mois.
   =================================================================== */

.ecran-stockages, .ecran-mouvements, .ecran-fac-stockage {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
}

/* L'etat d'un contrat : il se lit, au lieu de se deduire de six cases. */
.jeton-etat {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 9px; font-size: 11px;
    border: 1px solid var(--bord); background: var(--fond-gris);
    color: var(--texte-faible); cursor: default;
}
button.jeton-etat { cursor: pointer; }
button.jeton-etat.actif { box-shadow: inset 0 0 0 1px currentColor; font-weight: 600; }
.jeton-etat .compte { opacity: .65; font-variant-numeric: tabular-nums; }

.jeton-etat.e-actif { background: var(--fond-succes); border-color: var(--bord-succes); color: var(--vert); }
.jeton-etat.e-enretard { background: var(--fond-danger); border-color: var(--bord-danger); color: var(--rouge); }
.jeton-etat.e-enattente { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--texte-attention); }
.jeton-etat.e-offert { background: var(--accent-clair); border-color: var(--accent-clair);
    color: var(--accent-texte); }
.jeton-etat.e-aveclestand { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--orange); }
.jeton-etat.e-termine { background: var(--fond-gris); border-color: var(--bord);
    color: var(--texte-faible); }

.liste-stockages, .liste-fac-stockage { flex: 1; min-height: 0; display: flex;
    flex-direction: column; }
.table-stockages td.fort, .table-fac-stockage td.fort { font-weight: 600; }
.table-stockages td.en-retard { color: var(--rouge); font-weight: 600; }
.col-nombre.negatif { color: var(--rouge); }
.col-nombre.ecart-fort { color: var(--rouge); font-weight: 600; }

/* La fiche d'un contrat, posee en FI. */
.boite.boite-contrat { width: 1080px; }
.fiche-stockage { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.corps-fiche-stockage { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
.corps-fiche-stockage.occupe { opacity: .55; pointer-events: none; }
.colonnes-stockage { columns: 2; column-gap: 14px; }
.colonnes-stockage .carte-fiche { break-inside: avoid; margin-bottom: 12px; }
.valeur-figee { padding: 3px 0; }
.frise-stockage { margin-top: 4px; }
.frise-stockage h3 { display: flex; align-items: center; }
.lig-facture td { background: rgba(0, 0, 0, .02); }

/* Les mouvements : la liste des stockages a gauche, la saisie a droite. */
.grille-mouvements {
    flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; gap: 10px;
}
.grille-mouvements > .cadre { display: flex; flex-direction: column; min-height: 0; }
.liste-contrats-mvt .corps-volet { display: flex; flex-direction: column; gap: 4px; padding: 6px; }

.carte-stock {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    padding: 6px 8px; border: 1px solid var(--bord); border-radius: var(--r);
    background: var(--fond-carte); text-align: left; font: inherit; cursor: pointer;
}
.carte-stock:hover { border-color: var(--accent); }
.carte-stock.choisie { border-color: var(--accent); background: var(--accent-clair); }
.carte-stock .ligne-haut { display: flex; align-items: center; gap: 6px; }
.carte-stock .nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.carte-stock .ligne-bas { display: flex; align-items: center; gap: 5px; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.saisie-mvt { border: 1px solid var(--bord); border-radius: var(--r);
    padding: 8px 10px; margin-bottom: 10px; background: var(--fond-barre); }
.champs-mvt { display: grid; grid-template-columns: 150px 1fr; gap: 6px 10px;
    align-items: center; }
.boutons-mvt { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.apres-mvt { font-size: 12px; }
.bouton-plat.actif { background: var(--accent-clair); border-color: var(--accent);
    color: var(--accent-texte); font-weight: 600; }

/* La facturation du mois. */
.total-lot { font-size: 13px; }
.table-fac-stockage tr.bloquee td { opacity: .6; }
.ligne-blocage td { padding-top: 0; font-size: 12px; }
.note-lot { font-size: 12px; align-self: center; }
.alerte-ecart { display: block; margin: 6px 0; color: var(--rouge); }
.boite.boite-detail-calcul { width: 880px; max-width: 94vw; }
.boite-detail-calcul .boite-corps { max-height: 60vh; overflow: auto; }

/* Le maitre-detail : la liste a gauche, le contrat a droite. C'est la
   disposition de la fenetre WinDev, qui est bonne -- on ne la change pas, on
   lui retire son etat modal et on range son detail en onglets. */
.grille-stockages {
    flex: 1; min-height: 0; display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr; gap: 10px;
}
.grille-stockages > .cadre { display: flex; flex-direction: column; min-height: 0; }
.barre-recherche-liste { padding: 4px 6px; border-bottom: 1px solid var(--bord); }
.barre-recherche-liste .recherche-compacte { width: 100%; }
.colonne-liste .corps-volet { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.colonne-detail { overflow: hidden; }
.colonne-detail > .vide { padding: 40px; text-align: center; color: var(--texte-faible); }

/* Le detail : un entete qui ne bouge pas, des onglets, un corps qui defile. */
.detail-stockage { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.entete-contrat {
    flex: none; padding: 8px 12px; background: var(--fond-barre);
    border-bottom: 1px solid var(--bord);
}
.entete-contrat .ligne-identite { display: flex; align-items: center; gap: 8px; }
.entete-contrat .nom-societe { font-weight: 600; font-size: 15px; }
.entete-contrat .ligne-chiffres {
    display: flex; align-items: center; gap: 18px; margin-top: 6px; flex-wrap: wrap;
}
.entete-contrat .chiffre { display: flex; flex-direction: column; line-height: 1.25; }
.entete-contrat .chiffre .doux { font-size: 11px; }
.entete-contrat .chiffre b { font-variant-numeric: tabular-nums; }
.entete-contrat .chiffre b.fort { color: var(--accent-fonce); }
.entete-contrat .chiffre b.en-retard { color: var(--rouge); }
.message-court { font-size: 12px; }
.message-court.ok { color: var(--vert); }
.message-court.erreur { color: var(--rouge); }

.onglets-detail {
    flex: none; display: flex; gap: 2px; padding: 0 10px;
    border-bottom: 1px solid var(--bord); background: var(--fond-barre);
}
.onglet-detail {
    border: none; background: transparent; padding: 6px 12px; font: inherit;
    color: var(--texte-doux); cursor: pointer; border-bottom: 2px solid transparent;
}
.onglet-detail:hover:not(:disabled) { color: var(--texte); }
.onglet-detail.actif {
    color: var(--accent-fonce); border-bottom-color: var(--accent); font-weight: 600;
}
.onglet-detail:disabled { opacity: .4; cursor: default; }

.corps-detail { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
.corps-detail.occupe { opacity: .55; pointer-events: none; }
.corps-detail .vide { padding: 24px 6px; text-align: center; color: var(--texte-faible); }
.bloc-detail { margin-bottom: 14px; }
.bloc-detail h3 {
    margin: 0 0 6px 0; font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--texte-doux);
    border-bottom: 1px solid var(--bord); padding-bottom: 3px;
}
.note-tarif { margin-top: 8px; font-size: 12px; }
.tarif-courant td { background: var(--accent-clair); font-weight: 600; }

.pied-detail {
    flex: none; display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-top: 1px solid var(--bord);
}
.pied-detail .barre-boutons { margin-left: auto; }

/* Pl_Plan_Facturation : l'ordre puis la facture, en deux temps. */
.boite.boite-emission { width: 720px; max-width: 94vw; }
.plan-emission { display: flex; flex-direction: column; }
.plan-emission > .boite-corps { max-height: 66vh; overflow: auto; }
.champs-emission { grid-template-columns: 180px 1fr; }

.etapes-emission { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.etapes-emission .etape {
    display: flex; align-items: center; gap: 6px; padding: 4px 10px;
    border: 1px solid var(--bord); border-radius: 14px; color: var(--texte-faible);
}
.etapes-emission .etape .puce {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; font-size: 11px;
    background: var(--fond-gris); border: 1px solid var(--bord);
}
.etapes-emission .etape.courante { border-color: var(--accent); color: var(--accent-fonce); }
.etapes-emission .etape.courante .puce {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.etapes-emission .etape.faite { border-color: var(--bord-succes); background: var(--fond-succes); color: var(--vert); }
.etapes-emission .etape.faite .puce { background: var(--vert); border-color: var(--vert); color: #fff; }
.trait-etape { flex: 1; height: 1px; background: var(--bord); }

.table-budgets { margin: 10px 0; }
/* Pied dans « LA LIGNE DES SOMMES ». Il avait --bord, un cran plus clair que --bord-fort. */
.table-budgets .saisie-heures { width: 110px; }

/* Le recapitulatif : douze mois en colonnes, les deux premieres figees pour
   qu'on sache toujours de quel contrat on lit la ligne. */
.ecran-recap-stk, .ecran-tarifs-stk, .ecran-simu-stk {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
}
.liste-recap, .liste-tarifs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.table-recap-stk { font-variant-numeric: tabular-nums; }
.table-recap-stk th, .table-recap-stk td { white-space: nowrap; }
.table-recap-stk .col-fige { position: sticky; background: var(--fond-carte); z-index: 1; }
.table-recap-stk thead .col-fige { background: var(--fond-barre); z-index: 3; }
.table-recap-stk .col-fige:first-child { left: 0; min-width: 220px; }
.table-recap-stk .col-fige:nth-child(2) { left: 220px; min-width: 180px; }
.table-recap-stk .mois-courant-col { background: var(--accent-clair); }
/* Pied dans « LA LIGNE DES SOMMES ». Il avait --bord, un cran plus clair que --bord-fort. */
.table-recap-stk tr.lig-offert td { color: var(--texte-faible); font-style: italic; }

/* La simulation : la saisie a gauche, le detail a droite. */
.grille-simu {
    flex: 1; min-height: 0; display: grid;
    grid-template-columns: minmax(320px, 400px) 1fr; gap: 10px;
}
.grille-simu > .cadre { display: flex; flex-direction: column; min-height: 0; }
.resume-simu {
    display: flex; gap: 20px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px;
    border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-barre);
}
.resume-simu .chiffre { display: flex; flex-direction: column; line-height: 1.25; }
.resume-simu .chiffre .doux { font-size: 11px; }

/* La saisie de la simulation : des blocs courts, des champs a la taille du
   chiffre qu'on y met, et l'explication SOUS le champ -- a cote, elle
   ecrasait l'input jusqu'a le faire disparaitre. */
.panneau-simu .corps-volet { padding: 10px 12px; overflow-x: hidden; }

.bloc-saisie { margin-bottom: 14px; }
.bloc-saisie h4 {
    margin: 0 0 6px 0; font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--texte-doux);
    border-bottom: 1px solid var(--bord); padding-bottom: 3px;
}

.ligne-saisie {
    display: flex; align-items: center; gap: 8px; padding: 3px 0; min-width: 0;
}
.ligne-saisie > label { flex: 0 0 104px; color: var(--texte-doux); }
.ligne-saisie > select,
.ligne-saisie > input[type=date] { flex: 1 1 auto; min-width: 0; max-width: 190px; }
.ligne-saisie .champ-chiffre { flex: 0 0 92px; text-align: right; }
.ligne-saisie .unite { flex: 0 0 auto; color: var(--texte-faible); font-size: 12px; }

/* La surface facturable est celle qu'on vend : elle se detache. */
.ligne-saisie.appuyee .champ-chiffre { font-weight: 600; border-color: var(--accent); }
.ligne-saisie.appuyee > label { color: var(--texte); font-weight: 600; }

.aide-champ {
    margin: 2px 0 0 112px; font-size: 11px; color: var(--texte-faible); line-height: 1.35;
}
.ligne-cases { display: flex; gap: 16px; padding: 2px 0; }

/* Ce qu'on s'apprete a calculer, en une phrase. */
.resume-saisie {
    padding: 7px 10px; border-radius: var(--r); line-height: 1.4;
    border: 1px solid var(--accent-clair); background: var(--accent-clair);
    color: var(--accent-texte);
}
.resume-saisie.incomplet {
    border-color: var(--bord); background: var(--fond-gris); color: var(--texte-faible);
}
.boite.boite-large { width: 620px; max-width: 92vw; }

/* FEN_Com_Suivi_Dossiers_Visu_Obs : l'observation d'un dossier, en entier. */
.obs-lisible {
    border: none; background: transparent; padding: 0; font: inherit;
    color: inherit; text-align: left; cursor: pointer;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obs-lisible:hover { color: var(--accent-texte); text-decoration: underline; }
.boite.boite-observation { width: 680px; max-width: 92vw; }
.texte-observation {
    max-height: 55vh; overflow: auto; white-space: pre-wrap; line-height: 1.45;
}
.champ-recherche { display: flex; flex-direction: column; gap: 6px; }
.liste-trouves { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow: auto; }

/* L'etat du projet, dans le bandeau : les six valeurs de
   gfct_Rech_Lib_Etat_Projet. Il se lit, il ne se saisit pas. */
.jeton.etat-projet { margin-left: 6px; padding: 0 8px; font-size: 11px; }
.jeton.etat-projet.e1 { background: var(--fond-gris); border-color: var(--bord); color: var(--texte-doux); }
.jeton.etat-projet.e2 { background: var(--accent-clair); border-color: var(--accent-clair); color: var(--accent-texte); }
.jeton.etat-projet.e3 { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--orange); }
.jeton.etat-projet.e4 { background: var(--fond-danger); border-color: var(--bord-danger); color: var(--rouge); }
.jeton.etat-projet.e5 { background: var(--fond-succes); border-color: var(--bord-succes); color: var(--vert); }
.jeton.etat-projet.e6 { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--texte-attention); }

/* La duree, entre les deux dates du tunnel. */
.ligne-duree { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ligne-duree .bouton-plat.actif {
    background: var(--accent-clair); border-color: var(--accent); color: var(--accent-texte);
}
.ligne-duree .duree-lue { margin-left: 4px; font-size: 13px; color: var(--texte-doux); }

/* La fenetre de preparation d'un message. */
.corps-mail { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; display: flex;
    flex-direction: column; gap: 10px; }
.corps-mail.occupe { opacity: .55; pointer-events: none; }
.avertit-mail { padding: 8px 10px; border: 1px solid var(--bord-attention); border-radius: var(--r);
    background: var(--fond-attention); color: var(--orange); font-size: 13px; }
.corps-message { width: 100%; padding: 8px 10px; font: inherit; resize: vertical;
    border: 1px solid var(--bord-fort); border-radius: var(--r); min-height: 180px; }
.pieces-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }

/* Un champ de destinataires : ses adresses en jetons, et de quoi en ajouter. */
.groupe-dest { border: 1px solid var(--bord); border-radius: var(--r); padding: 8px 10px;
    background: var(--fond-gris); }
.groupe-dest .entete-groupe { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.groupe-dest .entete-groupe .libelle { font-weight: 600; font-size: 13px; }
.jetons-dest { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; align-items: center; }
.jeton-adresse { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px;
    border: 1px solid var(--bord-fort); border-radius: 11px; background: var(--fond-carte);
    font-size: 12px; }
.jeton-adresse .qui { white-space: nowrap; }
.jeton-adresse .bouton-plat { padding: 0 5px; line-height: 16px; border: none;
    background: transparent; color: var(--texte-faible); }
.jeton-adresse .bouton-plat:hover:not(:disabled) { color: var(--rouge); }
.ajout-dest { margin-top: 7px; flex-wrap: wrap; }
.ajout-dest input { min-width: 220px; padding: 5px 7px; font: inherit; }

/* Le selecteur d'adresses : une liste a cocher, groupee par provenance. */
.filtre-carnet { margin-bottom: 8px; }
.filtre-carnet input[type=search] { min-width: 240px; padding: 5px 8px; font: inherit; }
.liste-carnet { max-height: 46vh; overflow: auto; border: 1px solid var(--bord);
    border-radius: var(--r); background: var(--fond-carte); }
.source-carnet { position: sticky; top: 0; padding: 4px 10px; font-size: 12px; font-weight: 600;
    color: var(--texte-doux); background: var(--fond-gris); border-bottom: 1px solid var(--bord); }
.ligne-carnet { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center; gap: 6px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.ligne-carnet:hover { background: var(--accent-survol); }
.ligne-carnet .nom { font-weight: 500; }

.jetons-fiche { display: flex; flex-wrap: wrap; gap: 6px; }
.ajout-equipe { margin-top: 10px; flex-wrap: wrap; }
.ajout-equipe select { min-width: 240px; padding: 7px 9px; font: inherit; }

.ecran-projet .ligne-boutons { flex-wrap: wrap; }

/* Une liste et un nombre saisis, au meme gabarit que .saisie-date. */
.saisie-liste, .saisie-nb {
    height: 30px; padding: 0 6px; background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r); font: inherit;
}
.saisie-nb { text-align: right; }
.saisie-texte {
    padding: 5px 6px; background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r); font: inherit;
}

/* Le volet de mise a jour d'une prevision : deux colonnes, l'intitule a
   gauche et la saisie a droite, comme la fenetre WinDev d'origine. */
.boite-maj-prev { width: 560px; max-width: 94vw; }
.boite-maj-prev .grille-saisie {
    display: grid; grid-template-columns: 190px 1fr; gap: 8px 12px; align-items: center;
}
.boite-maj-prev .grille-saisie > label { color: var(--texte-doux); }
.boite-maj-prev .grille-saisie > label.haut { align-self: start; padding-top: 6px; }
.boite-maj-prev .saisie-texte { width: 100%; resize: vertical; }
.boite-maj-prev .note-seuil {
    margin-top: 12px; padding: 8px 10px; border-left: 3px solid var(--accent);
    background: var(--fond-gris); border-radius: var(--r);
}

/* Les colonnes d'identifiants de la grille des previsions : etroites, a droite. */
.table-previsions .col-code { width: 62px; text-align: right; white-space: nowrap; }

/* Aucune colonne n'est bloquee : elles defilent toutes, et leur largeur est
   une largeur de depart, que l'utilisateur regle a la poignee.

   table-layout: fixed, et non auto : sinon une colonne s'etire sur son plus
   long contenu -- une designation de stockage fait trois lignes -- et laisse
   des vides enormes partout ailleurs des qu'on affiche une annee entiere. Le
   contenu trop long est coupe, le titre au survol le donne en entier. */
.table-previsions { table-layout: fixed; }
.table-previsions .col-type { width: 34px; }
.table-previsions .col-entite { width: 44px; }
.table-previsions .col-societe { width: 190px; }
.table-previsions .col-affaire { width: 230px; }
.table-previsions .col-texte { width: 150px; }
.table-previsions .col-m2 { width: 56px; }
.table-previsions .col-stand { width: 74px; }
.table-previsions .col-presse { width: 56px; }
.table-previsions .col-date { width: 94px; }
.table-previsions .col-lieu { width: 130px; }
.table-previsions .col-mtt { width: 92px; }
.table-previsions .col-pct { width: 48px; }
.table-previsions .col-init { width: 54px; }
.table-previsions .col-code { width: 62px; }

/* Le contenu ne deborde pas de sa colonne. Les cellules a deux lignes gardent
   leurs deux lignes, chacune coupee proprement. */
.table-previsions td, .table-previsions th { overflow: hidden; }
.table-previsions td { white-space: nowrap; text-overflow: ellipsis; }
.table-previsions .lib-nom, .table-previsions .lib-affaire {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* Les entetes restent en haut quand on fait defiler les lignes. */
.table-previsions thead th {
    position: sticky; top: 0; z-index: 3; background: var(--fond-gris);
}

/* Reglage des colonnes (colonnes.js). Regle projet : toute table de
   l'application doit laisser l'utilisateur en changer la largeur. */
/* Pas de position: relative ici : elle ecraserait le sticky des entetes, et
   un element sticky ancre deja les poignees, qui sont en absolute. */
.poignee-colonne {
    position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
    cursor: col-resize; touch-action: none; z-index: 5;
}
/* ⚠️ SUR LA DERNIERE COLONNE, LA POIGNEE RESTE DEDANS. Ses 3 px de debord a droite
   depassaient le bord d'une table a width: 100 %, et dans un cadre overflow: auto ils
   suffisaient a faire naitre une barre de defilement horizontale alors que la place
   etait libre (releve de l'utilisateur, factures d'une societe, 2026-10-08). */
.reglable th:last-child .poignee-colonne { right: 0; }
/* La poignée se place par rapport à SON en-tête : un th « static » la renvoyait au bord de la page (toutes empilées à
   droite, barre de défilement, colonnes impossibles à élargir — onglet Exposants, 2026-10-15). Priorité nulle : un
   en-tête « sticky » d'une autre règle reste sticky. */
:where(.reglable th) { position: relative; }
/* ⚠️ UNE TABLE VIRTUALISEE A DES LIGNES DE HAUTEUR FIXE. Virtualize calcule ses
   espaceurs sur la hauteur annoncee (HauteurDeLigne) : une cellule qui passe a la ligne
   fait une ligne plus haute, la liste saute et laisse une bande vide en tete (recette du
   2026-10-08 sur les fournisseurs : 23, 41 et 60 px pour 27 annonces). Chaque cellule
   tient donc sur une ligne -- chaque bloc qu'elle contient aussi --, coupee par « … »,
   et la ligne prend la hauteur annoncee. Le composant le controle au rendu. */
.reglable.virtualisee tbody tr { height: var(--hauteur-ligne); }
.reglable.virtualisee tbody td {
    height: var(--hauteur-ligne); box-sizing: border-box; max-width: 32em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reglable.virtualisee tbody td > div {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.poignee-colonne::after {
    content: ""; position: absolute; top: 4px; bottom: 4px; left: 3px; width: 1px;
    background: transparent;
}
.reglable th:hover .poignee-colonne::after { background: var(--bord-fort); }
.colonnes-en-cours { cursor: col-resize; user-select: none; }
.colonnes-en-cours .poignee-colonne::after { background: var(--accent); }
.reglable th.colonne-prise { opacity: .5; }
.reglable th.colonne-cible { box-shadow: inset 2px 0 0 var(--accent); }

/* La ligne de total, en pied de la grille des previsions : elle colle au bas
   du cadre pendant le defilement vertical. */
/* ⚠️ LA LIGNE DES SOMMES SE DISTINGUE DES AUTRES. Elle ne s'en distinguait presque
   pas : --fond-gris vaut #faf9f8, soit un blanc a peine casse, et un filet de 1px. Releve
   par l'utilisateur -- « materialise la ligne des sommes un peu plus clairement ».

   Le trait de 2px et le gras viennent de .table-recap, le pied de total deja employe
   ailleurs ; on ne cree pas une apparence de plus. Le fond passe a --fond (#f5f5f5), le
   seul neutre plus soutenu de la palette : --fond-barre est BLANC en clair, il aurait
   donc EClairci la ligne au lieu de la marquer. Verifie dans les jetons, pas suppose.

   Et pas --accent-clair, qui serait franc mais qui est la couleur de la LIGNE CHOISIE
   (.table-droits tr.choisi) : le total se confondrait avec une selection.

   Le sticky reste : la ligne doit tenir en bas quand la table defile. */
/* ⚠️ LA LIGNE DES SOMMES, POUR TOUT L'ERP MIGRE. UNE declaration, pas une par
   ecran : il y en avait QUATRE formes -- 2px ou 1px, gras 600, 700 ou pas de gras du
   tout, trois fonds differents -- et aucune raison a cela. L'utilisateur a demande
   « materialise la ligne des sommes un peu plus clairement » (2026-10-08), puis
   l'harmonisation des autres : « oui, aligne-les tous ».

   Le trait de 2px et le gras viennent de .table-recap, le pied deja en place le plus
   marque. Le fond est --fond (#f5f5f5), le seul neutre plus soutenu de la palette.

   ⚠️ PAS --fond-barre, qui vaut BLANC en clair : le pied des Factures s'en servait,
   et il ECLAIRCISSAIT la ligne au lieu de la marquer. Pas --accent-clair non plus, franc
   mais deja la couleur de la ligne CHOISIE -- le total se confondrait avec une selection.
   Les deux ont ete lus dans la palette avant d'etre ecartes.

   Le sticky garde la ligne en bas quand la table defile ; les tables qui ne defilent pas
   le portent sans effet.

   ⚠️ LES SELECTEURS DE devis.css ET societes.css SONT ICI, ET C'EST VOULU. Les
   laisser dans leur feuille voulait dire redeclarer les memes cinq proprietes, donc
   quatre copies a tenir d'accord -- ce qu'on vient de defaire. app.css est la charte
   (§11quinquies), et une apparence partagee par cinq ecrans y appartient. Leurs regles
   d'origine sont retirees : il n'y a qu'une declaration, et elle est ici.

   AJOUTER UN PIED DE TOTAL AILLEURS : poser « ligne-sommes » sur le <tr>, rien d'autre.
   Ne pas redeclarer ces proprietes dans la feuille d'un ecran.

   ⚠️ LES SELECTEURS SONT ECRITS A L'IDENTIQUE DE CE QU'ILS ETAIENT -- « tfoot td » et
   non « tfoot > td ». Le premier jet avait mis des combinateurs d'enfant, qui
   n'apportaient rien ici (un td ne s'imbrique pas dans un td) et que selecteurs_perdus
   a signales comme QUATRE selecteurs perdus : il compare les chaines. Un controle qui
   crie a chaque fusion finit par ne plus etre lu, et c'est le fichier ou on a deja
   perdu des blocs deux fois. */
.ligne-sommes td,
.ligne-sommes th,
.table-previsions tfoot td,
.table-factures tfoot td,
.table-devis tr.ligne-somme td,
.table-lignes-fiche-cde tfoot .ligne-somme td,
.table-recap tr.ligne-total td,
.table-budgets tfoot td,
.table-recap-stk tfoot td {
    position: sticky; bottom: 0; z-index: 3;
    padding: 6px 10px; background: var(--fond);
    border-top: 2px solid var(--bord-fort); font-weight: 700;
}

/* Ce que chaque ecran garde EN PROPRE, et rien de plus : les dix colonnes des lignes de
   commande sont serrees, leur pied suit la taille de police de la table. */
.table-lignes-fiche-cde tfoot .ligne-somme td { font-size: 12px; }
.table-previsions tfoot td.doux { font-weight: 400; color: var(--texte-doux); }

.liste-regularisation .fleche { color: var(--texte-faible); }

/* La liste des ecarts compare deux montants : sept colonnes, pas cinq. Sans
   grille a elle, les cellules en trop repassaient a la ligne et se
   chevauchaient. */
.liste-ecarts .case-ligne {
    grid-template-columns: 20px minmax(0,1.2fr) minmax(0,1fr) 92px 14px 92px minmax(0,1.1fr);
}
.liste-ecarts .case-ligne.tout { grid-template-columns: 20px 1fr; }
.liste-ecarts .fleche { text-align: center; color: var(--texte-doux); }
.liste-ecarts .version { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-ecarts .mtt.fort { font-weight: 600; color: var(--texte); }

/* Le bandeau raconte la periode : pris, en jeu, sorti. Les trois chiffres qui
   repondent a << combien ce mois-ci >> ressortent, le detail reste discret. */
.totaux-previsions .total.fort { font-size: 13px; padding: 5px 0; }
.totaux-previsions .total.fort b { font-size: 15px; color: var(--accent-texte); }
.totaux-previsions .total.doux { padding: 1px 0; color: var(--texte-doux); }
.totaux-previsions .total.doux b { font-weight: 500; }

/* Les ratios du bandeau d'origine, replies : demandes a l'epoque, mais ils se
   rapportent au potentiel total, pas au chiffre de la periode. */
.annexe-totaux > summary {
    cursor: pointer; font-size: 12px; color: var(--texte-doux); padding: 2px 0;
    list-style: none;
}
.annexe-totaux > summary::-webkit-details-marker { display: none; }
.annexe-totaux > summary::before { content: "B8 "; color: var(--texte-faible); }
.annexe-totaux[open] > summary::before { content: "BE "; }
.annexe-totaux > summary:hover { color: var(--accent-texte); }

/* Le choix des colonnes : lesquelles s'affichent. L'ordre, lui, se change en
   glissant un en-tete sur un autre, et la largeur a la poignee. */
.boite-colonnes { width: 420px; max-width: 92vw; }
.liste-colonnes {
    margin-top: 10px; max-height: 46vh; overflow: auto;
    border: 1px solid var(--bord); border-radius: var(--r);
    display: grid; grid-template-columns: 1fr 1fr;
}
.liste-colonnes .case-ligne {
    display: flex; align-items: center; gap: 8px; padding: 5px 10px;
    font-size: 12px; border-bottom: 1px solid var(--bord);
}
.liste-colonnes .case-ligne span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Le choix des colonnes depuis le clic droit : une liste de cases, assez haute
   pour qu'on n'ait pas a la parcourir a l'aveugle. */
.menu-contextuel .option-volet > .volet-colonnes {
    min-width: 210px; max-height: 60vh; overflow: auto;
}
.volet-colonnes .case-ligne {
    display: flex; align-items: center; gap: 8px; padding: 4px 10px;
    font-size: 12px; cursor: pointer; border-radius: var(--r);
}
.volet-colonnes .case-ligne:hover { background: var(--accent-clair); }
.volet-colonnes .case-ligne input { margin: 0; }
.volet-colonnes .case-ligne span { white-space: nowrap; }

/* L'objectif de l'annee, au-dessus de la synthese : ce que la direction pose,
   face a ce que les objectifs par commercial totalisent. */
.barre-objectif {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 6px 10px; background: var(--fond-gris);
    border-bottom: 1px solid var(--bord); font-size: 12px;
}
.barre-objectif .saisie-nb { width: 130px; }

/* Les projets lies : une ligne cliquable par projet, qui ouvre sa fiche. */
.liste-lies .case-ligne {
    grid-template-columns: 24px minmax(0,1.3fr) minmax(0,1.6fr) 96px;
    width: 100%; text-align: left; background: none; border: none;
    border-bottom: 1px solid var(--bord); cursor: pointer; font: inherit;
}
.liste-lies .case-ligne:hover { background: var(--accent-clair); }
.liste-lies .col-type { text-align: center; }

/* ============================================================   Suivi des dossiers (FEN_Com_Suivi_Projet_optimise)
   ========================================================================== */
.ecran-suivi { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.grille-suivi { flex: 1; min-height: 0; display: flex; padding: 0 10px 8px 10px; }
.grille-suivi .liste-suivi { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Largeurs de depart : l'utilisateur les regle a la poignee. Pas de
   min/max-width, qui l'en empecherait. */
.table-suivi { table-layout: fixed; width: 100%; }
.table-suivi td { height: 38px; }
.table-suivi td, .table-suivi th { overflow: hidden; }
.table-suivi td { white-space: nowrap; text-overflow: ellipsis; }
.table-suivi .lib-nom, .table-suivi .lib-affaire {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.table-suivi thead th { position: sticky; top: 0; z-index: 3; background: var(--fond-gris); }

.table-suivi .col-entite { width: 46px; }
.table-suivi .col-type { width: 40px; }
.table-suivi .col-icone { width: 44px; text-align: center; }
.table-suivi .col-init { width: 62px; }
.table-suivi .col-societe { width: 190px; }
.table-suivi .col-affaire { width: 200px; }
.table-suivi .col-texte { width: 150px; }
.table-suivi .col-date { width: 94px; }
.table-suivi .col-mtt { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.table-suivi .col-m2 { width: 56px; text-align: right; }

.table-suivi tbody tr { cursor: default; }
/* ⚠️ UN CONTOUR, ET PAS UN FOND -- ne pas « aligner » sur le reste de la charte.

   SuiviProjet pose des « background: » EN STYLE INLINE sur cinq colonnes, par la
   teinte de chaque etat (SuiviProjet.razor, Teinte(CouleurFond...)). Un style inline
   l'emporte sur toute feuille : un « tr.choisie td { background } » ne peindrait donc
   que les AUTRES cellules, et rendrait une ligne a moitie coloree. Le contour est le
   seul marqueur qui se voie sans effacer l'information portee par les couleurs.

   La regle date du 2026-09-23 (bd616e87) et n'etait pas commentee ; rien ne disait si
   l'ecart etait voulu. Mesure le 2026-10-08, apres la correction du « choisi » /
   « choisie » sur cinq ecrans : il l'est, par consequence sinon par intention.

   ⚠️ C'est aussi pourquoi la charte ne peint QUE « tr.choisi » : lui ajouter
   « , tr.choisie » poserait un fond ici, .table-suivi portant table-droits. */
.table-suivi tbody tr.choisie { outline: 1px solid var(--accent); }

/* Une cellule modifiee depuis le dernier traitement : Csp_Lst_Zones_MAJ. */
.table-suivi td.modifie { font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }

.pastille-ok { color: var(--texte-succes); font-weight: 700; }
.pastille-gagne { color: #b8860b; }

/* FEN_Com_Suivi_Ddes_Rglt_Technique : le salon, son lieu, ses deux dates */
.table-rgltech .col-coche { width: 30px; text-align: center; }
.table-rgltech .col-coche input { width: auto; }
.table-rgltech td.lib .petit { margin-left: 6px; }
.table-rgltech .col-lieu { width: 230px; white-space: normal; }

/* Une zone de saisie longue prend la largeur de la boite : sans cela le
   libelle et le champ se partagent la ligne, et le champ finit minuscule. */
.boite-corps:not(.en-grille) label { display: block; margin-bottom: 4px; }
.boite-corps:not(.en-grille) textarea {
    display: block; width: 100%; box-sizing: border-box; font: inherit; resize: vertical;
}

/* FEN_Com_Salon_Dupli_NN : une colonne par case a cocher, etroite et centree */
.table-dupli .col-coche { width: 42px; text-align: center; }
.table-dupli .col-coche input { width: auto; }
.table-dupli .col-perio { width: 104px; }
.table-dupli td.lib { white-space: normal; }
.table-dupli tr.ligne-alerte td { background: var(--fond-attention); }
.alerte-dupli { color: var(--rouge); font-size: 11px; }

/* BtnRechAdrFac : la recherche et la societe retenue tiennent sur une ligne */
.grille-p11 .ligne-boutons { min-width: 0; }
.grille-p11 .ligne-boutons > input { flex: 1 1 150px; min-width: 0; }
.grille-p11 .ligne-boutons > .valeur-figee { flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* Les devis sous leur affaire : le libelle prend les quatre premieres colonnes */
.ligne-devis td.devis-lib { white-space: normal; font-size: 12px; }
.ligne-devis td.devis-lib .chevron { margin-right: 4px; }
.jeton.retenu-devis { background: var(--fond-info); color: var(--texte-info); margin-left: 7px; font-size: 10px; }

/* « Chiffre » sur une ligne de devis : ni le vert d'« Accepte » (c'est un etat
   anterieur, pas un aboutissement), ni le bleu de « retenue » (qui dit autre
   chose), ni l'orange d'attention (rien ne va mal). L'accent clair dit « etape
   atteinte », et se distingue des deux autres d'un coup d'oeil. */
.jeton.chiffre { background: var(--accent-clair); color: var(--accent-texte);
    margin-left: 7px; font-size: 10px; font-weight: 600; }

/* La pastille d'enregistrement du devis, dans le bandeau, a cote des deux etats.
   Discrete quand tout est enregistre -- c'est le cas normal, et un badge qui
   crie en permanence ne se lit plus -- et franche des qu'une saisie attend.
   Elle ne descend PAS dans la barre du bas : le §11quater reserve celle-ci aux
   ACTIONS, et un etat n'en est pas une. */
.etat-saisie { display: inline-flex; align-items: center; gap: 5px; margin-left: 14px;
    padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600;
    border: 1px solid transparent; }
/* --texte-doux et PAS --texte-faible : mesure au banc, le faible tombe a 3,24 de
   contraste sur le fond, sous le 4,5 exige pour du 11 px -- gras ou non, ce n'est
   pas du grand texte au sens WCAG. Le doux donne 5,92 en restant discret, ce qui
   est le but : l'etat normal ne doit pas crier. */
.etat-saisie.propre { color: var(--texte-doux); border-color: var(--bord); }
/* ⚠️ ROUGE, ET PAS AMBRE : la fenetre l'ecrit, « LIB_Modifications_Non_Sauvegardees
   .Couleur = Rouge ». La ligne est en commentaire dans le WLangage -- le champ n'a jamais
   ete cree -- donc c'est une INTENTION et pas un comportement mesure ; elle est suivie
   parce que l'utilisateur a demande la meme chose.

   Contraste verifie comme pour .propre juste au-dessus, le 11 px exigeant 4,5 :
   #a4262c sur #fdf3f4 donne 6,67 en clair, #f1707b sur #3a1d1f donne 5,34 en sombre.

   Reserve, et elle se leve en une ligne : un bandeau rouge reste affiche TANT QU'ON
   SAISIT, et le rouge sert ailleurs a ce qui bloque. Si la recette le trouve criard,
   --fond-attention / --texte-attention reprennent leur place ici. */
.etat-saisie.modifie { background: var(--fond-danger); color: var(--rouge);
    border-color: #e9b8bb; }
.ligne-devis { cursor: default; }

/* Le code postal, a cote du nom, dans le tunnel de creation : il resserre une
   recherche trop large sans prendre la place du nom. */
.tunnel-saisie.cp-annuaire { width: 92px; flex: none; }

/* La ligne de recherche de l'annuaire, dans les DEUX tunnels de creation : UNE
   ligne [identifiant ou nom][CP][chercher], le bouton a la hauteur des champs.

   ⚠️ CE QUI N'ALLAIT PAS : .tunnel-saisie est en width:100%, et .ligne-boutons
   enveloppe. Le champ principal prenait donc TOUTE la largeur et renvoyait le CP
   et le bouton a la ligne suivante -- d'ou un gros bouton carre sous les champs,
   qui faisait une seconde barre d'actions dans le corps de la boite, contre le
   §11quater. Vu par l'utilisateur le 2026-10-08.

   Le bouton reprend .bouton-icone, le motif du bandeau d'Entreprises.razor, et
   s'ETIRE a la hauteur de la ligne (align-self: stretch) : aucune hauteur en dur
   a garder d'accord avec le padding des champs, qui changerait sous lui. */
.ligne-annuaire { flex-wrap: nowrap; }

/* :not(.cp-annuaire) -- SANS LUI, LE CODE POSTAL S'ETIRE AUSSI. Sa regle
   (.tunnel-saisie.cp-annuaire, width:92px) a la MEME specificite que celle-ci,
   et la derniere ecrite gagne : le CP passait de 92 a 208 px, soit la moitie de
   la ligne pour cinq chiffres. Mesure au banc, pas a l'oeil. */
.ligne-annuaire > .tunnel-saisie:not(.cp-annuaire) { flex: 1 1 auto; width: auto; min-width: 0; }

/* height:auto AVANT align-self:stretch -- .bouton-icone pose height:30px, et une
   hauteur explicite ne s'etire pas : le bouton restait a 30 px contre 44 aux
   champs, exactement le defaut qu'on corrige. Mesure au banc. */
.ligne-annuaire > .bouton-chercher {
    flex: 0 0 auto; width: auto; height: auto; align-self: stretch;
    gap: 6px; padding: 0 13px;
}

/* ---- Le « Menu Commande » : criteres en haut, liste en dessous ---- */
.ecran-cdes .corps-plan { display: flex; flex-direction: column; gap: 10px; }
.ecran-cdes .liste-cdes { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ecran-cdes .table-cdes { flex: 1; min-height: 0; max-height: none; }

.grille-criteres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 6px 14px;
    align-items: center;
}
.grille-criteres > label { color: var(--texte-doux); text-align: right; padding-right: 6px; }
.grille-criteres { grid-template-columns: 150px minmax(0,1fr) 150px minmax(0,1fr); }
@media (max-width: 1150px) { .grille-criteres { grid-template-columns: 150px minmax(0,1fr); } }
.grille-criteres input, .grille-criteres select {
    width: 100%; padding: 4px 7px; font: inherit;
    border: 1px solid var(--bord-fort); border-radius: var(--r); background-color: var(--fond-carte);
}
.grille-criteres .deux-champs { display: flex; gap: 6px; }
/* Les deux champs (du / au) se partagent la ligne : un champ date garde sinon sa largeur propre et le second sort du cadre en fenêtre étroite. */
.grille-criteres .deux-champs > * { flex: 1 1 0; min-width: 0; }
.pied-criteres { margin-top: 10px; flex-wrap: wrap; }

/* Les trois etats de la fenetre, et l'ecart qu'elle marquait « *** ».
   Ils ne se distinguent PAS par la nuance -- deux roses pales voisins, on ne
   sait plus qui est quoi -- mais par l'endroit et par la force :

     en TTC        la LIGNE entiere se teinte, en rose franc
     annulee       le NUMERO passe en rouge plein, le texte de la ligne palit
     non terminee  le NUMERO passe en jaune

   Une commande annulee ET en TTC garde donc ses deux marques, a deux endroits
   differents, sans que l'une efface l'autre. */
.table-cdes tr.cde-ttc td { background: #fce7f1; }
.table-cdes tr.cde-annulee td { color: var(--texte-faible); }

.table-cdes td.col-numero { font-variant-numeric: tabular-nums; }
.table-cdes td.num-annulee {
    background: var(--rouge); color: #fff; font-weight: 700; text-align: center;
}
.table-cdes td.num-nonterminee { background: #ffe9a8; color: #3a2f00; font-weight: 700; text-align: center; }

/* Les jetons de la legende montrent exactement ce qu'ils annoncent. */
.jeton.t-ttc { background: #fce7f1; color: #a3306f; }
.jeton.t-annulee { background: var(--rouge-pastel); color: var(--rouge); font-weight: 700; }
.jeton.t-nonterminee { background: #ffe9a8; color: #6b5310; font-weight: 700; }
.jeton.t-ecart { background: var(--fond-attention); color: var(--texte-attention); font-weight: 600; margin-left: 6px; }
.legende { display: flex; gap: 5px; align-items: center; }

.somme-cdes {
    display: flex; gap: 8px; align-items: baseline; justify-content: flex-end;
    padding: 7px 10px 2px; border-top: 1px solid var(--bord); margin-top: 6px;
}

/* ---- L'import d'un catalogue FAB-DIS ---- */
.ecran-import .corps-plan { display: flex; flex-direction: column; gap: 10px; }
.ecran-import .cadre-bloc { min-height: 0; }
.ecran-import .table-import { max-height: none; flex: 1; }
.ecran-import .jauge { min-width: 260px; }

/* Une hausse et une baisse ne se lisent pas pareil : le signe ne suffit pas
   quand on parcourt trois mille lignes. */
.table-import td.hausse { color: var(--rouge); font-weight: 600; }
.table-import td.baisse { color: var(--vert); font-weight: 600; }
.table-import tr.ligne-retiree td { color: var(--texte-faible); font-style: italic; }
.table-import input[type=checkbox] { width: auto; }

/* Le pays d'origine, en tete de l'etape : trois choix cote a cote. */
.choix-pays { flex-wrap: wrap; margin-bottom: 10px; }

/* Le verdict d'un controle : vert quand il passe, rouge quand il refuse, neutre
   quand le service n'a pas pu repondre -- ce dernier cas n'accuse personne. */
.verdict { margin-top: 10px; padding: 8px 12px; border-radius: var(--r);
    border: 1px solid; font-size: 13px; }
.verdict.ok { background: var(--fond-succes); border-color: var(--bord-succes); color: var(--vert); }
.verdict.refus { background: var(--fond-danger); border-color: var(--bord-danger); color: var(--rouge); }
.verdict.attente { background: var(--fond-gris); border-color: var(--bord);
    color: var(--texte-doux); }
.verdict .doux { color: inherit; opacity: .8; }

/* Ce que la comptabilite renseignera : montre, pas reclame. */
.bloc-compta { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--bord-fort);
    border-radius: var(--r); background: var(--fond-gris); }
.bloc-compta .lib-souligne { display: block; margin-bottom: 8px; font-size: 12px;
    color: var(--texte-doux); }

/* Le champ et son bouton sur la meme ligne, sans que l'un chevauche l'autre. */
.grille-creation .avec-bouton { display: flex; gap: 6px; align-items: center; }
.grille-creation .avec-bouton input { flex: 1; min-width: 0; }
/* Le bouton se met a la hauteur du champ, pas l'inverse : empile, il depassait
   la ligne et cassait l'alignement de la grille. */
.grille-creation .avec-bouton .btn-carre {
    flex: none; flex-direction: row; gap: 6px; height: 32px; min-width: 0;
    padding: 0 12px; font-size: 13px;
}
.choix-pays .choix.petit { padding: 6px 12px; }

/* ==============================================================   La fiche fournisseur — FEN_Prod_Fournisseur_NN_CrePdts.
   ============================================================================ */
/* Le groupe de saisie de l'onglet General. On n'utilise PAS .grp-saisie : sa
   regle :disabled pose opacity .55 sur tout le contenu, et une fiche qu'on
   consulte — c'est-a-dire la plupart du temps — devient illisible. */
.groupe-fourn { border: none; margin: 0; padding: 0; }

/* Une fiche qu'on consulte doit se LIRE. Le fond gris dit qu'elle ne se saisit
   pas ; le texte, lui, reste noir. Chromium grise le texte d'un champ desactive
   par -webkit-text-fill-color, que `color` seul ne rattrape pas.

   Une specificite de plus que la regle .grille-fiche input:disabled qu'elle
   remplace : a specificite egale, c'est la position dans le fichier qui
   tranche, et personne ne devrait avoir a y penser en deplacant un bloc. */
.colonnes-fourn .grille-fiche input:disabled,
.colonnes-fourn .grille-fiche select:disabled,
.colonnes-fourn .grille-fiche textarea:disabled,
.colonnes-fourn textarea.zone-obs-fourn:disabled {
    background-color: var(--fond-gris);
    color: var(--texte);
    -webkit-text-fill-color: var(--texte);
    opacity: 1;
    cursor: default;
}
.colonnes-fourn .grille-fiche input[type=checkbox]:disabled { opacity: .8; }

/* Des colonnes qui se REMPLISSENT, pas une grille a lignes alignees : sans
   cela la hauteur d'une ligne est celle du plus grand des deux cadres, et le
   dernier passe sous le pli.

   `columns: 560px 3` se lit : une colonne fait 560px si elle peut, jamais plus
   de trois. L'ecran decide donc tout seul — trois colonnes sur un 1900, deux
   sur un 1500, une sur un portable — et les champs gardent partout la meme
   largeur utile. Une largeur fixe donnait des champs de 700px ou un SIRET se
   perd a l'autre bout de son libelle. */
.colonnes-fourn { columns: 560px 3; column-gap: 12px; }
.colonnes-fourn > section { break-inside: avoid; margin: 0 0 12px; display: block; }

/* Les libelles sont plus courts ici que sur une fiche pleine largeur : ce
   qu'on leur reprend va aux champs. */
.colonnes-fourn .grille-fiche {
    grid-template-columns: 124px minmax(0, 1fr) 124px minmax(0, 1fr);
    gap: 6px 10px;
}
.colonnes-fourn .corps-volet { padding: 8px 10px 10px; }
.colonnes-fourn .zone-obs-fourn { width: 100%; resize: vertical; }

/* La case a cocher et son libelle : le libelle suit la case, pas l'inverse. */
.colonnes-fourn .grille-fiche .case { display: flex; align-items: center; gap: 8px; }
.colonnes-fourn .grille-fiche .case input[type=checkbox] { width: auto; flex: none; }
.colonnes-fourn .grille-fiche .case .case-libelle {
    text-align: left; padding-top: 0; color: var(--texte); cursor: pointer;
}

/* Fou_Code_Blocage : une fiche bloquee en comptabilite se voit dans la liste. */
.pastille-bloque {
    margin-left: 7px; padding: 0 6px; border-radius: 9px; font-size: 11px;
    background: var(--fond-danger); color: var(--rouge); border: 1px solid currentColor;
}
tr.bloquee td { color: var(--texte-doux); }
/* Le prix d'achat se saisit dans la liste, aligne a droite comme un montant. */
.px-achat { width: 108px; text-align: right; padding: 3px 6px; font: inherit;
    border: 1px solid var(--bord-fort); border-radius: var(--r); }
td.a-droite, th.a-droite { text-align: right; }

/* ========================================================   Le module commandes : la liste (Choix_Prod_Commande) et la fiche
   (Fi_Commande). La disposition suit les deux fenetres WinDev -- projets
   et lignes cote a cote, meme vocabulaire de colonnes -- avec l'entete
   regroupee sous trois titres au lieu des cinq bandes anonymes d'origine.

   Les noms sont suffixes « -fiche-cde » ou prefixes « cde- » quand le nom
   court est deja pris ailleurs sans portee : .champ et .totaux-cde
   appartiennent a d'autres ecrans, .table-lignes-cde aux relances.
   ====================================================================== */

/* ---------------------------------------------------- la liste ----
   La recherche dans un volet a gauche, le tableau a droite sur toute la
   hauteur. En bandeau horizontal elle prenait le tiers de l'ecran pour dix
   filtres qu'on ne relit pas, et laissait huit lignes de resultats -- alors
   que les resultats sont le sujet. Meme forme que la fenetre des stockages. */
.ecran-cdes .grille-cdes {
    flex: 1; min-height: 0; display: grid;
    grid-template-columns: minmax(290px, 330px) minmax(0, 1fr); gap: 10px;
}
.ecran-cdes .grille-cdes > section { display: flex; flex-direction: column; min-height: 0; }
.ecran-cdes .criteres-cdes { overflow: auto; }

/* Dans le volet, une etiquette au-dessus de son champ : c'est ce qui tient le
   mieux sur 300 px, et l'oeil descend la colonne d'un trait. */
.ecran-cdes .criteres-cdes .grille-criteres {
    grid-template-columns: minmax(0, 1fr); gap: 0;
}
.ecran-cdes .criteres-cdes .grille-criteres > label {
    text-align: left; padding-right: 0; margin: 7px 0 2px; font-size: 12px;
}
.ecran-cdes .criteres-cdes .grille-criteres > label:first-child { margin-top: 0; }
.ecran-cdes .criteres-cdes .grille-criteres select[multiple] { height: 92px; }
.ecran-cdes .criteres-cdes .pied-criteres { margin-top: 12px; }

/* Sous 1100 px le volet passerait sous la moitie de la largeur : la recherche
   repasse en bandeau, sur deux paires par ligne. */
@media (max-width: 1100px) {
    .ecran-cdes .grille-cdes { grid-template-columns: minmax(0, 1fr); }
    .ecran-cdes .criteres-cdes { overflow: visible; }
    .ecran-cdes .criteres-cdes .grille-criteres {
        grid-template-columns: repeat(2, 128px minmax(0, 300px)); gap: 5px 14px;
    }
    .ecran-cdes .criteres-cdes .grille-criteres > label {
        text-align: right; padding-right: 6px; margin: 0; line-height: 28px;
    }
}

/* La recherche rapide du bandeau : on tape un numero, on tombe sur la fiche. */
.saisie-cde-rapide {
    width: 190px; padding: 4px 8px; font: inherit;
    border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte);
}

/* Une ligne de commande tient sur une ligne : un nom trop long se coupe et se
   relit au survol. Sans cela, « NESPRESSO FRANCE » et « Achat Materiel
   Informatique » font des rangees deux fois plus hautes que les autres. */
.table-cdes td.col-tel, .table-cdes td.doux, .table-cdes td.lib {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.table-cdes td.lib { max-width: 340px; }
.table-cdes td.col-projet { max-width: 420px; }
/* La colonne « Visu » de la fenetre : un oeil par ligne. */
.table-cdes .col-visu { width: 30px; text-align: center; padding: 0; }
.table-cdes .col-visu .bouton-icone { padding: 2px 4px; }

/* La legende de la fenetre, a sa place : en bas a gauche, avant les boutons. */
.legende-pied { display: flex; gap: 5px; align-items: center; margin-right: auto; }

/* ---------------------------------------------------- la fiche ---- */
/* ⚠️ LE DEFILEMENT SE FAIT DANS LES PANNEAUX, PAS SUR LA FICHE.
   « Le tableau de details doit etre fixe a la fenetre, la barre de defilement doit se
   faire dans le detail de commande et non sur la fenetre en general », dit l'utilisateur
   (2026-10-08). Ce qui se passait : ce corps defile, et comme il contient AUSSI l'entete
   Conditions / Livraison, l'entete remontait et sortait de la vue.

   La correction n'est pas de lui retirer son « overflow » -- un entete plus haut que la
   place disponible serait alors ROGNE, ce qui est pire. Elle est de donner aux deux
   panneaux la hauteur qui RESTE (flex + min-height: 0) et de laisser leurs tables defiler
   chez elles. Le corps garde « auto » comme filet : si meme les hauteurs minimales ne
   tiennent pas, la fiche defile plutot que de couper.

   ⚠️ NON MESURE A L'ECRAN : je n'ai pas pu rendre la page -- le port du serveur de
   dev est pris par la session de recette. A verifier a 800 et a 1 080 px de haut, et en
   onglet detache. A 800 px avec un entete haut, la fiche peut encore defiler : c'est le
   filet ci-dessus qui joue, et c'est assume faute de mieux qu'un rognage. */
.ecran-cde-fiche .corps-plan {
    display: flex; flex-direction: column; gap: 10px; overflow: auto; min-height: 0;
}
/* L'entete garde sa hauteur propre ; il ne s'etire ni ne se comprime.
   Les deux SEULS enfants directs de .corps-plan sont .entete-cde et .deux-tables
   (CommandeFiche.razor l. 88 et 524) : on les nomme, plutot que d'ecarter les autres
   par des :not() qui vieilliraient mal. */
.ecran-cde-fiche .corps-plan > .entete-cde { flex: none; }
/* Les deux panneaux prennent tout le reste. La valeur mini vaut deux entetes de table
   plus quelques lignes : en dessous, on ne lit plus rien et autant laisser la fiche
   defiler. */
.ecran-cde-fiche .deux-tables {
    flex: 1 1 auto; min-height: 200px;
}
.ecran-cde-fiche .fort { font-weight: 600; }

/* L'entete : trois groupes titres, cote a cote sur un ecran large. Empiles,
   ils prenaient la moitie de la hauteur pour de la lecture seule, alors que la
   zone de travail est en dessous -- les deux tableaux. Les trois colonnes
   ramenent l'entete a un tiers de sa hauteur. En dessous de 1400 px ils
   s'empilent, separes par un trait. */
.ecran-cde-fiche .entete-cde {
    padding-top: 4px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px;
    align-items: start;
}
.ecran-cde-fiche .groupe-entete { padding: 2px 0 7px; min-width: 0; }
.ecran-cde-fiche .groupe-entete + .groupe-entete {
    border-left: 1px solid var(--bord); padding-left: 18px;
}
@media (max-width: 1400px) {
    .ecran-cde-fiche .entete-cde { grid-template-columns: minmax(0, 1fr); }
    .ecran-cde-fiche .groupe-entete + .groupe-entete {
        border-left: none; padding-left: 0;
        border-top: 1px solid var(--bord); padding-top: 7px;
    }
}
.ecran-cde-fiche .titre-groupe {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--texte-doux); margin-bottom: 5px;
}
.ecran-cde-fiche .bande {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-bottom: 4px;
}
.ecran-cde-fiche .bande:last-child { margin-bottom: 0; }

/* Une etiquette et sa valeur, cote a cote : c'est la forme de la fenetre. */
.ecran-cde-fiche .cde-duo { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ecran-cde-fiche .cde-duo > label {
    color: var(--texte-doux); white-space: nowrap; font-size: 12px;
}
/* Celles qui prennent la largeur qui reste : la designation, le lieu, les
   observations. */
.ecran-cde-fiche .cde-duo-large { flex: 1 1 340px; }
.ecran-cde-fiche .cde-duo-large > .plein { flex: 1; min-width: 0; }
/* Un texte saisi garde ses retours a la ligne : une observation de livraison
   en tient souvent trois. */
.texte-brut { white-space: pre-wrap; }

.ecran-cde-fiche .valeur-figee { min-width: 0; }
.ecran-cde-fiche .v-xs { min-width: 54px; }
.ecran-cde-fiche .v-s  { min-width: 86px; }
.ecran-cde-fiche .v-m  { min-width: 150px; }
.ecran-cde-fiche .v-l  { min-width: 220px; }

/* L'interrupteur « En cours / Terminee » et le « Fixe / Variable » de la
   fenetre : ils se lisent, ils ne se cliquent pas encore. */
/* ⚠️ PASTILLES DE TEXTE, PAS DES INTERRUPTEURS. Elles s'appelaient « bascule »,
   nom deja pris par l'interrupteur global de devis.css:199 -- 34 x 17 px, avec un rond
   blanc en ::after. Elles en heritaient la largeur (aucune n'etant declaree ici) et le
   rond, qui recouvrait leur premiere lettre : « ixe », « ariable ».
   Voir le commentaire du balisage, dans CommandeFiche.razor. */
.ecran-cde-fiche .pastille-choix {
    font-size: 11px; padding: 2px 9px; border-radius: 999px;
    border: 1px solid var(--bord); color: var(--texte-faible); background: var(--fond-gris);
    /* Sans cela « En cours » se coupe en « .n cours » : la bande les serre et le
       texte deborde des deux cotes. */
    white-space: nowrap; flex: none;
}
.ecran-cde-fiche .pastille-choix.actif {
    background: var(--fond-succes); border-color: var(--bord-succes); color: var(--vert); font-weight: 600;
}

/* Les deux tables cote a cote : une ligne de commande s'affecte a un projet,
   on lit les deux d'un coup. En dessous de 1200 px elles s'empilent. */
/* LES DEUX BLOCS FONT LA MEME HAUTEUR, quel que soit leur nombre de lignes :
   un projet a gauche et douze lignes a droite laissaient deux cadres decales,
   et les barres de boutons ne tombaient pas au meme niveau. « stretch » egalise
   les deux colonnes, et chaque bloc etire sa table pour occuper ce qu'il
   recoit. */
.ecran-cde-fiche .deux-tables {
    display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: 10px; align-items: stretch;
}
.ecran-cde-fiche .deux-tables > .cadre-bloc {
    display: flex; flex-direction: column; min-height: 0;
}
/* La table prend la hauteur qui reste ; la barre de boutons et les totaux
   restent colles en bas, au meme niveau des deux cotes.

   ⚠️⚠️ ET ELLE NE DESCEND PAS SOUS TROIS LIGNES. Elle y descendait : a
   1 366 x 900 -- un portable courant -- le panneau des lignes de commande ne montrait
   QUE son entete et sa ligne « Somme », sur une commande qui a une ligne. Releve a la
   recette le 2026-10-08.

   ⚠️ ET LA CAUSE EST UNE SPECIFICITE, chez moi. L'element porte les DEUX classes
   -- « table-p11 table-lignes-fiche-cde » -- et j'avais ecrit le minimum sur la seconde
   (« .table-lignes-fiche-cde { min-height: 150px } », 0,1,0) tandis que ce selecteur-ci
   (0,4,0) y posait « min-height: 0 ». Le minimum n'a donc JAMAIS pris. Mon message de
   commit affirmait pourtant « le minimum reste : un panneau de trois lignes ne doit pas
   s'ecraser a rien » : la phrase etait juste, le CSS ne la tenait pas.

   128 px = un thead (28) plus trois rangees (3 x 26) plus les filets. Au-dessous, on ne
   lit plus rien et autant laisser la page defiler -- ce qu'elle fait, .corps-plan gardant
   son « overflow: auto » exprès pour ce repli.

   Le « min-height » non nul n'empeche pas le defilement INTERNE : la table se reduit
   jusqu'a 128 px et defile dedans, comme avant. */
.ecran-cde-fiche .deux-tables > .cadre-bloc > .table-p11 {
    flex: 1 1 auto; min-height: 128px;
}
/* ⚠️ EMPILEES, LES DEUX PANNEAUX NE PEUVENT PLUS SE PARTAGER LA HAUTEUR : l'un
   sous l'autre, chacun aurait la moitie de ce qui reste, soit quelques lignes. On rend
   donc la main au corps, qui defile -- c'est le seul cas ou c'est le bon comportement. */
@media (max-width: 1200px) {
    .ecran-cde-fiche .deux-tables { grid-template-columns: minmax(0, 1fr); flex: none; }
    .table-projets-fiche-cde, .table-lignes-fiche-cde { max-height: 40vh; }
}
.ecran-cde-fiche .entete-bloc {
    display: flex; gap: 8px; align-items: baseline; padding-bottom: 5px;
}

/* Les colonnes de chiffres se reduisent a leur contenu, la designation prend
   tout le reste. Deux recettes ont ete essayees avant celle-ci :

   - width:100% sur la designation ramene toutes les autres colonnes a leur
     minimum, et « Mobilier Location EXTERNE » se coupe en deux ;
   - table-layout:fixed avec une largeur par colonne s'ecroule des qu'une
     commande est en TTC : dix colonnes fixes ne laissent plus rien a la
     designation, qui tombe a zero et empile son texte lettre par lettre.

   width:1% + nowrap en mise en page automatique tient dans les deux cas. */
.table-lignes-fiche-cde table,
.table-projets-fiche-cde table { table-layout: auto; width: 100%; }
.table-lignes-fiche-cde .col-mini, .table-lignes-fiche-cde .col-indice,
.table-lignes-fiche-cde .col-tel, .table-lignes-fiche-cde .col-categorie,
.table-projets-fiche-cde .col-mini, .table-projets-fiche-cde .col-indice,
.table-projets-fiche-cde .col-tel, .table-projets-fiche-cde .col-etat-chantier {
    width: 1%; white-space: nowrap;
}
.table-lignes-fiche-cde .col-categorie { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
/* Et la designation ne descend jamais sous une largeur lisible : en TTC les dix
   colonnes depassent le panneau, et c'est alors le tableau qui defile
   horizontalement, pas le texte qui s'empile lettre par lettre. */
.table-lignes-fiche-cde .col-desig, .table-lignes-fiche-cde td.lib { min-width: 230px; }
td.a-centre, th.a-centre { text-align: center; }

/* ⚠️ PLUS DE « max-height: 40vh » ICI. C'etait la seconde moitie du defaut : deux
   panneaux plafonnes a 40vh chacun font 80 % de la hauteur A EUX DEUX, auxquels s'ajoute
   l'entete -- donc plus que l'ecran, donc la fiche defile. Et quand une table est COURTE,
   40vh la laissait flotter au milieu d'un cadre trop grand.

   Elles prennent desormais la hauteur de leur panneau (« flex: 1 » plus haut sur
   .deux-tables > .cadre-bloc > .table-p11) et defilent dedans : .table-p11 porte deja
   « overflow: auto » et un thead collant. La ligne « Somme », les totaux et les boutons
   de ligne sont HORS de .table-p11, donc ils restent visibles en bas du panneau.

   Le minimum reste : un panneau de trois lignes ne doit pas s'ecraser a rien. */
/* ⚠️ PAS DE « min-height » ICI : il ne gagnerait pas. Ces deux classes cohabitent
   avec « table-p11 » sur le MEME element, et le selecteur de .deux-tables est plus
   specifique -- c'est lui qui porte le minimum de trois lignes. En laisser un ici
   donnerait l'illusion d'une garantie. */
.table-projets-fiche-cde, .table-lignes-fiche-cde { max-height: none; }

/* Neuf colonnes dans la moitie de l'ecran : chaque cellule tient sur une ligne
   et se coupe, sinon « MONDIAL COIFFURE BEAUTE / 2026 / 10 » s'empile sur cinq
   lignes et la rangee devient illisible. Le texte entier revient au survol. */
.table-projets-fiche-cde td, .table-projets-fiche-cde th {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Une designation de ligne peut tenir sur trois lignes : elle ne se coupe pas. */
.table-lignes-fiche-cde td.lib { white-space: pre-wrap; word-break: break-word; }

/* La ligne « Somme » de la fenetre, sous les colonnes qu'elle totalise : elle
   reste visible quand on fait defiler les lignes. */
/* Le pied des lignes de commande n'a plus de declaration a lui : il est dans la liste
   de « LA LIGNE DES SOMMES », plus haut, et n'y garde que sa taille de police. Il
   n'avait meme pas le gras, et un filet de 1px sur un fond presque blanc. */

/* En saisie, la valeur figee laisse la place a un champ de meme taille : la
   fiche ne doit pas sauter quand on passe en modification. */
.ecran-cde-fiche .saisie-cde {
    padding: 3px 7px; font: inherit; min-height: 26px;
    border: 1px solid var(--bord-fort); border-radius: var(--r);
    background: var(--fond-carte); color: var(--texte);
}
.ecran-cde-fiche .saisie-cde.plein { flex: 1; min-width: 0; width: 100%; }
.ecran-cde-fiche textarea.saisie-cde { resize: vertical; }
.ecran-cde-fiche .cde-duo > input[type=checkbox] { width: auto; }

/* Fixe / Variable se cliquent en saisie, et se lisent le reste du temps. */
.ecran-cde-fiche .pastille-choix.cliquable { cursor: pointer; }
.ecran-cde-fiche .pastille-choix.cliquable:hover { border-color: var(--bord-fort); }

/* Les boutons propres a un tableau : en bas a droite de SON bloc, jamais dans
   la barre du pied. Leur place dit sur quoi ils portent -- la ligne choisie --
   et c'est l'exception que la regle des ecrans reserve au volet d'une fiche. */
.ecran-cde-fiche .outils-table {
    display: flex; justify-content: flex-end; gap: 3px; padding-top: 5px;
}
.ecran-cde-fiche .outils-table .bouton-icone { padding: 3px 6px; }

/* La ligne retenue dans l'un des deux tableaux. */
/* ⚠️ DEUX JETONS EMPLOYES ET JAMAIS DEFINIS, et un var() sans definition ne leve
   RIEN : le repli en dur gagne en silence. --fond-choisi (5 emplois) et --fond-doux (3)
   n'etaient declares dans aucune des six feuilles de wwwroot. Cinq de ces huit emplois
   portaient un repli CLAIR en dur, donc en theme sombre le texte suivait le theme et le
   fond non -- le codeur a mesure 1,01 de contraste sur le planning, le meme defaut.

   Remplaces par les jetons EXISTANTS plutot que definis : l'intention etait prouvee, pas
   devinee. Le repli en dur de --fond-choisi etait #e7f0fb, c'est-a-dire la valeur claire
   de --fond-info AU CARACTERE PRES, et trois de ses cinq emplois repliaient deja sur
   var(--fond-info). --fond-doux repliait sur des gris tres clairs : c'est --fond-gris.
   Les deux sont thematises (clair ligne 19 et 48, sombre 4013/4020 et 4053/4060).

   Et SANS repli en dur, par mesure : app.css compte 1 069 appels de jeton NUS contre 33
   a repli en dur, dont 27 sur des jetons definis -- des replis morts. Le style maison est
   donc l'appel nu, et c'est aussi la seule forme qui ne peut pas re-armer ce piege si un
   jeton est renomme un jour : un appel sans valeur laisse le fond transparent, ce qui se VOIT,
   la ou un repli clair se fond dans un theme clair et ne se voit qu'en sombre.
   Le garde durable est le controle jetons_css_sans_definition.py du codeur. */
.ecran-cde-fiche tr.choisi > td { background: var(--fond-info); }

/* Le prix avant remise, sous le prix retenu : barre, pour qu'on ne le lise pas
   comme le prix applique. */
.ecran-cde-fiche .barre-prix { text-decoration: line-through; font-size: 11px; }

.totaux-fiche-cde {
    display: flex; gap: 8px; align-items: center; justify-content: flex-end;
    padding: 8px 4px 0; border-top: 1px solid var(--bord); margin-top: 6px;
}
.totaux-fiche-cde > label { color: var(--texte-doux); font-size: 12px; }

/* Bloquee, annulee, modifiee : le bandeau LIB_Blocage_Cde de la fenetre. */
.jeton.t-blocage { background: var(--fond-danger); color: var(--rouge); font-weight: 600; }
.jeton.t-ok { background: var(--fond-succes); color: var(--vert); }

.aide-texte p { margin: 0 0 9px; max-width: 62ch; line-height: 1.45; }
.aide-texte p:last-child { margin-bottom: 0; }

/* ---- La fiche d'une ligne de commande, et le choix d'un projet ----
   Deux volets de la fiche commande. Ils tiennent dans la meme boite que les
   confirmations, avec leur propre largeur. */
/* ⚠️ UNE SEULE REGLE POUR LES DEUX BOITES DE COMMANDE : le tunnel de creation et
   l'ajout de ligne. Elles montrent la MEME chose -- les categories analytiques, les
   lignes de devis, le detail de la ligne -- donc elles doivent avoir la meme place.
   Deux declarations a tenir d'accord auraient diverge au premier reglage.

   Ce qu'on corrige, releve par l'utilisateur le 2026-10-08 sur TS : « la fenetre est
   trop petite, on voit mal les lignes devisees. Le detail des lignes n'est pas
   visible. » Les deux faisaient environ 1 100-1 180 px FIXES, avec un defilement
   horizontal sur la table de droite, les montants coupes entre le nombre et « € », et
   « Le detail de la ligne » sous le pli.

   La largeur est pilotee par la fenetre, avec un plafond : a 1 366 px on prend presque
   tout, a 1 920 px on s'arrete a 1 680 -- au-dela, les colonnes s'etalent sans qu'on
   lise mieux. La hauteur suit la meme logique, et c'est elle qui ramene « Le detail de
   la ligne » au-dessus du pli.

   ⚠️ max-width EST REDECLARE, et il le faut : la regle de base de .boite porte
   « max-width: 92vw », qui PLAFONNE le min() ci-dessous et aurait rendu le 96vw
   inoperant. Meme specificite, donc c'est la derniere qui gagne -- mais compter sur
   l'ordre serait fragile, alors on l'ecrit.

   ⚠️ NON MESURE A L'ECRAN : le port du serveur de dev est pris par la session de
   recette. Les largeurs a 1 366 et a 1 920 px restent a relever. */
.tunnel-commande .tunnel-fenetre,
.boite.boite-ligne {
    width: min(96vw, 1680px);
    max-width: min(96vw, 1680px);
    height: min(92vh, 1000px);
}
/* Le pied reste en bas et le corps defile seul (§11quater) : sans cette colonne
   flexible, une hauteur imposee etire le corps sans lui donner d'ordre de defiler. */
.boite.boite-ligne {
    display: flex; flex-direction: column;
}
.boite.boite-ligne > .boite-corps {
    flex: 1 1 auto; min-height: 0; overflow: auto;
}
.boite.boite-ligne > .boite-titre,
.boite.boite-ligne > .boite-boutons {
    flex: none;
}
.boite.boite-projets { width: min(900px, 94vw); }

/* ⚠️ LES COLONNES DE LA TABLE DES LIGNES DE DEVIS, dans le tunnel et dans la
   boite d'ajout de ligne -- les deux montrent la meme table.

   Les montants ne se coupent pas et s'alignent a droite. L'espace insecable d'Euros()
   suffit deja a tenir le symbole contre son nombre ; le nowrap tient la cellule, pour
   un montant long ou une colonne tres etroite.

   Projet et etat tenaient sur trois et quatre lignes sur la capture : ils se tronquent
   avec des points de suspension et gardent leur texte entier au survol, comme la
   designation le fait deja. Une rangee de quatre lignes de haut rend la table illisible.

   ⚠️ CE SONT LES VRAIS NOMS DES COLONNES, verifies dans le balisage. Mon premier
   jet visait « .montant », « .col-montant », « .col-projet » et
   « .table-lignes-devis » : AUCUN n'existe. C'etait du CSS mort qui se lit comme vif,
   et aucun controle ne l'aurait signale -- un selecteur sans cible ne leve rien. */
.table-devis-tunnel td.a-droite, .table-devis-tunnel th.a-droite,
.table-devis-ligne td.a-droite, .table-devis-ligne th.a-droite,
.table-lignes-tunnel td.a-droite, .table-lignes-tunnel th.a-droite {
    white-space: nowrap; text-align: right;
}
/* ⚠️ ET LEURS LARGEURS SONT DIFFERENTES, parce que leurs contenus le sont. Les
   trois colonnes courtes -- Projet, Etat devis, Categorie -- etaient plafonnees a 260 px
   comme la designation : 780 px A ELLES TROIS, pour des libelles qui tiennent en un mot
   ou deux. C'est leur SOMME qui faisait deborder la table, pas une colonne en
   particulier ; chacune, prise seule, avait l'air raisonnable.

   Elles gardent la troncature et l'infobulle : ce qui ne tient pas se lit au survol.

   ⚠️ NON MESURE A L'ECRAN : je ne peux pas rendre la page (le port du serveur de dev
   est pris par la session de recette). Les largeurs a 1 366 et a 1 920 px restent a
   relever -- et c'est le genre de reglage qu'on a deja livre une fois sans effet, donc a
   mesurer plutot qu'a croire. */
.table-devis-tunnel td.col-desig,
.table-devis-ligne td.col-desig {
    max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.table-devis-tunnel td.col-tel,
.table-devis-ligne td.col-tel {
    max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.grille-ligne {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 7px 12px;
    align-items: center;
}
.grille-ligne > label { color: var(--texte-doux); text-align: right; font-size: 12px; }
.grille-ligne input, .grille-ligne select, .grille-ligne textarea {
    width: 100%; padding: 4px 7px; font: inherit; resize: vertical;
    border: 1px solid var(--bord-fort); border-radius: var(--r); background-color: var(--fond-carte);
}

/* Le montant se recalcule sous les champs : on voit ce qu'on ecrit avant de
   valider, plutot que de le decouvrir dans le tableau. */
.recap-ligne {
    display: flex; gap: 10px; align-items: baseline; justify-content: flex-end;
    margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bord);
}
.note-ligne { margin: 10px 0 0; font-size: 11px; line-height: 1.45; max-width: 62ch; }

.table-choix-projet { max-height: 46vh; margin-top: 8px; }
.table-choix-projet td.lib { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Le rattachement d'une ligne de commande aux lignes de devis ----
   C'est le coeur du module : sans lui, une commande ne se compare a rien.
   Le tableau montre, pour chaque ligne de devis, ce qu'elle porte, ce que les
   commandes lui ont deja pris, et ce qu'il reste -- puis ce qu'on lui affecte. */
.bloc-devis { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--bord); }
.table-devis-ligne { max-height: 34vh; margin-top: 6px; }
.table-devis-ligne td.lib { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 320px; }
.table-devis-ligne .col-visu { width: 30px; text-align: center; }
.table-devis-ligne .col-visu input { width: auto; }
.montant-affecte { width: 96px; text-align: right; }

/* Une ligne de devis deja depassee AVANT qu'on y touche. */
.table-devis-ligne tr.cde-depasse td { background: var(--fond-attention); }
.en-rouge { color: var(--rouge); font-weight: 600; }

/* Le depassement ne bloque pas : la fenetre demande un commentaire, elle ne
   refuse pas. On le dit, et on laisse passer. */
.alerte-depassement {
    margin-top: 8px; padding: 7px 11px; border-radius: var(--r);
    background: var(--fond-attention); border: 1px solid #f0d8b8; color: var(--texte-attention); font-size: 12px;
}

/* ---- Le tunnel de creation d'une commande ----
   Meme forme que les autres tunnels ; sa grille est un peu plus large parce
   que ses champs sont courts et nombreux. */
.grille-tunnel-cde {
    display: grid; grid-template-columns: 190px minmax(0, 1fr);
    gap: 8px 14px; align-items: center; margin-top: 4px;
}
.grille-tunnel-cde > label { color: var(--texte-doux); text-align: right; font-size: 13px; }
/* ⚠️ « .court » ETAIT SCOPEE A LA GRILLE, et le champ « A partir du » de l'etape
   des projets vit dans une « ligne-boutons ». Il n'etait donc pas court du tout :
   .tunnel-saisie est en width:100%, et il prenait TOUTE la largeur de la barre, poussant
   la recherche et son bouton. Releve par l'utilisateur le 2026-10-08.

   Meme famille que la saisie du code postal de l'annuaire, quelques regles plus haut :
   une classe de largeur qui ne porte pas dans le conteneur ou on l'emploie.

   La recherche, elle, prend ce qui reste -- sinon les deux champs se partageraient la
   barre a egalite et aucun ne serait a sa taille. */
.grille-tunnel-cde .tunnel-saisie.court { width: 150px; }
.tunnel-commande .ligne-boutons .tunnel-saisie.court { width: 150px; flex: none; }
.tunnel-commande .ligne-boutons .tunnel-saisie:not(.court) { flex: 1 1 auto; min-width: 0; }
.grille-tunnel-cde .ligne-boutons { flex-wrap: wrap; }
.grille-tunnel-cde textarea.tunnel-saisie { resize: vertical; }

/* Un verdict qui avertit sans refuser : la livraison deja passee, ou a plus de
   trois mois. La fenetre pose la question, elle ne bloque pas. */
.verdict.avertissement { background: var(--fond-attention); border-color: #f0d8b8; color: var(--texte-attention); }
.verdict.refus > div + div { margin-top: 3px; }

/* Le catalogue du fournisseur, en tete de la fiche d'une ligne : une reference
   vaut mieux qu'une designation retapee et un prix de memoire. */
.bandeau-catalogue { padding-bottom: 8px; margin-bottom: 10px;
    border-bottom: 1px solid var(--bord); }
.table-articles { max-height: 26vh; margin-bottom: 10px; }
.table-articles td.lib { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 380px; }

/* ---- La liste de controle du tunnel de commande ----
   Le recapitulatif n'attend pas la derniere etape : il tient a droite pendant
   toute la saisie et se coche au fur et a mesure. Sous 1050 px il passe sous
   la saisie -- la colonne serait trop etroite pour se lire. */
/* ⚠️ LA COLONNE « LA COMMANDE » RETRECIT, de 300 a 248 px, et son interligne se
   serre. « Reduis un peu le recap, augmente la taille de la FI pour que toutes les
   informations soient visibles en une fois », demande l'utilisateur. Ce qu'elle rend va
   aux trois zones de l'etape Lignes, qui en ont besoin ; elle, elle ne porte que des
   couples libelle / valeur courts. */
.tunnel-corps.avec-controle {
    display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 14px;
    align-items: start;
}
.tunnel-commande .colonne-controle { font-size: 12px; line-height: 1.45; }
.tunnel-commande .colonne-controle .tunnel-recap { gap: 5px 10px; grid-template-columns: 110px minmax(0, 1fr); }
@media (max-width: 1050px) {
    .tunnel-corps.avec-controle { grid-template-columns: minmax(0, 1fr); }
}
.colonne-saisie { min-width: 0; }

.colonne-controle {
    border-left: 1px solid var(--bord); padding-left: 16px; min-width: 0;
}
@media (max-width: 1050px) {
    .colonne-controle { border-left: none; padding-left: 0;
        border-top: 1px solid var(--bord); padding-top: 12px; }
}
.titre-controle {
    display: flex; justify-content: space-between; align-items: baseline;
    font-weight: 600; font-size: 13px; margin-bottom: 8px;
}
.titre-controle .doux { font-weight: 400; font-size: 11px; }

.liste-controle { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.liste-controle li {
    display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 6px;
    padding: 4px 6px; border-radius: var(--r); cursor: pointer;
}
.liste-controle li:hover { background: var(--fond-gris); }
.liste-controle .marque { color: var(--texte-faible); text-align: center; }
.liste-controle .quoi { color: var(--texte-doux); }
.liste-controle .valeur {
    grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Rempli, attendu, ou sur l'etape ou l'on est. */
.liste-controle li.fait .marque { color: var(--vert); font-weight: 700; }
.liste-controle li.fait .valeur { color: var(--texte); }
.liste-controle li.manque { background: var(--fond-danger); }
.liste-controle li.manque .marque { color: var(--rouge); }
.liste-controle li.ici .quoi { color: var(--texte); font-weight: 600; }

.echeance-controle {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--bord);
    font-size: 12px;
}

/* ---- Le tunnel, apres la creation : ses projets et ses lignes ---- */
.liste-rattaches { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.liste-rattaches li {
    display: flex; gap: 8px; align-items: center;
    padding: 5px 8px; border: 1px solid var(--bord); border-radius: var(--r);
    margin-bottom: 4px; background: var(--fond-gris);
}
.table-lignes-tunnel { max-height: 28vh; margin-bottom: 8px; }
.table-lignes-tunnel td.lib { white-space: normal; }

/* Un projet deja rattache reste visible dans la recherche, mais eteint : le
   faire disparaitre donnerait l'impression qu'on l'a perdu. */
.table-choix-projet tr.deja-rattache td { color: var(--texte-faible); background: var(--fond-gris); }

/* L'etat d'une commande, dans le bandeau a cote de son numero. Il etait perdu
   au milieu des dix-huit champs de l'entete, entre deux bascules grises que
   personne ne lisait. Ici il est le premier chose qu'on voit apres le numero. */
.ecran-cde-fiche .etat-cde {
    font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 999px;
    border: 1px solid transparent; white-space: nowrap;
}
.ecran-cde-fiche .etat-cde.terminee { background: var(--fond-succes); border-color: #bcdcbc; color: var(--vert); }
.ecran-cde-fiche .etat-cde.en-cours { background: var(--fond-info); border-color: #c3d8f2; color: #1d5fa8; }

/* Le tunnel d'une commande porte deux colonnes et un tableau : 760 px, la
   largeur d'un tunnel d'une seule colonne, l'etranglait -- le nom du salon se
   coupait et la barre de recherche passait a la ligne. */
/* La largeur et la hauteur du tunnel sont dans la regle PARTAGEE avec la boite
   d'ajout de ligne (chercher « UNE SEULE REGLE POUR LES DEUX BOITES »). Elle etait
   ici, fixe a 1 180 px. */
.tunnel-commande .table-choix-projet .col-visu { width: 30px; text-align: center; }
.tunnel-commande .table-choix-projet .col-visu input { width: auto; }
.tunnel-commande .table-choix-projet td.lib {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}

/* ---- Le rattachement au devis dans le tunnel ----
   La disposition de FEN_Selection_Ligne_Devis_Commande : les categories
   analytiques a gauche, les lignes du devis a droite. */
.devis-deux-volets {
    display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 10px;
    align-items: start; margin-top: 6px;
}
@media (max-width: 900px) {
    .devis-deux-volets { grid-template-columns: minmax(0, 1fr); }
}
.volet-categories {
    border: 1px solid var(--bord); border-radius: var(--r); max-height: 42vh; overflow: auto;
}
.liste-categories { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.liste-categories li {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 9px; cursor: pointer; border-bottom: 1px solid var(--bord);
}
.liste-categories li input[type=checkbox] { width: auto; margin: 0; pointer-events: none; }
/* Le nom prend la place, le compteur reste cale a droite. */
.liste-categories .nom-cat {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.liste-categories li .doux { flex: none; font-size: 11px; }
.liste-categories li:last-child { border-bottom: none; }
.liste-categories li:hover { background: var(--fond-gris); }
.liste-categories li.choisi { background: var(--fond-info); font-weight: 600; }

.table-devis-tunnel { max-height: 26vh; margin: 0; }
.table-devis-tunnel .col-visu { width: 34px; text-align: center; }
.table-devis-tunnel .col-visu input { width: auto; }
.table-devis-tunnel td.lib { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 260px; }
.table-devis-tunnel tr.cde-depasse td { background: var(--fond-attention); }

/* Le catalogue : une reference ne se coupe pas en trois lignes. */
.table-articles td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-articles td.lib { max-width: 340px; }

/* « Etat Devis » : la fenetre l'ecrit en VertFonce quand le devis est celui que
   le projet a retenu, en RougeFonce sinon. Rattacher une commande a un
   chiffrage qui n'est pas celui du client ne doit pas se faire sans le voir. */
.devis-valide { color: var(--vert); }
.devis-non-valide { color: var(--rouge); font-weight: 600; }

/* ---- L'affectation d'une ligne sur les lignes de devis ----
   Elle est laborieuse quand on la subit : on coche, et il faut remplir des
   zeros. Ici elle se repartit toute seule, et ce qui reste se lit d'un coup. */
.barre-repartition {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bord);
}
.compteur-affecte {
    font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 999px;
    white-space: nowrap;
}
.compteur-affecte.juste { background: var(--fond-succes); color: var(--vert); }
.compteur-affecte.faux { background: var(--fond-attention); color: var(--texte-attention); }

/* Le montant affecte, et de quoi y verser tout le reste d'un clic. */
.cellule-affecte { display: inline-flex; gap: 3px; align-items: center; }
.cellule-affecte .bouton-icone { padding: 2px 4px; }

/* ========================================================   L'entete d'une commande, refaite.

   Le defaut d'avant : TOUT avait le meme poids. Le fournisseur, une date,
   un pourcentage -- meme boite grise, meme taille, meme couleur. Rien
   n'accrochait l'oeil, donc rien ne se lisait.

   Maintenant : une carte d'identite en haut -- a qui, pour quoi, dans quel
   etat -- puis les trois colonnes de detail, en texte simple. Les boites
   grises sont reservees a ce qui se saisit ; ce qui se lit se lit.
   ====================================================================== */
.ecran-cde-fiche .carte-identite {
    grid-column: 1 / -1;
    display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--bord);
}
.ecran-cde-fiche .identite-principal { flex: 1; min-width: 260px; }

.ecran-cde-fiche .identite-fournisseur {
    font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--texte);
}
.ecran-cde-fiche .identite-designation {
    font-size: 14px; color: var(--texte); margin-top: 2px;
}
.ecran-cde-fiche .identite-champ {
    display: block; width: 100%; max-width: 520px; margin-bottom: 4px;
}

/* Le libelle des deux champs qui identifient la commande. Sans eux, on voit
   deux boites et on devine. */
.ecran-cde-fiche .identite-etiq {
    display: block; margin: 0 0 2px; font-size: 11px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--texte-doux);
}
.ecran-cde-fiche .identite-etiq + * { margin-bottom: 10px; }

/* L'ENCART DES GENERALITES : ce qui identifie la commande sans rien dire de ce
   qu'elle contient. En ligne de texte sous la designation, cela se lisait comme
   une legende qu'on saute ; en colonne et encadre, chaque valeur porte son nom. */
.ecran-cde-fiche .encart-generalites {
    flex: none; min-width: 230px; margin: 0;
    display: grid; grid-template-columns: auto auto; gap: 4px 14px; align-items: baseline;
    padding: 10px 14px; border: 1px solid var(--bord, #d8dbe0); border-radius: var(--r);
    background: var(--fond-gris);
}
.ecran-cde-fiche .encart-generalites dt {
    font-size: 11px; color: var(--texte-doux); white-space: nowrap;
}
.ecran-cde-fiche .encart-generalites dd {
    margin: 0; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums;
}
.ecran-cde-fiche .encart-generalites dd.numero-cde { font-weight: 700; font-size: 15px; }

@media (max-width: 900px) {
    .ecran-cde-fiche .encart-generalites { width: 100%; }
}

/* En cours / Terminee : les deux se voient, pour qu'on sache que c'en est une
   parmi deux. Un seul jeton ne dit pas qu'il y a un autre etat possible. */
.ecran-cde-fiche .identite-etat { text-align: right; }
.ecran-cde-fiche .paire-etat {
    display: inline-flex; border: 1px solid var(--bord-fort); border-radius: 999px;
    overflow: hidden; background: var(--fond-carte);
}
.ecran-cde-fiche .paire-etat .pan {
    padding: 4px 14px; font-size: 12px; color: var(--texte-faible); white-space: nowrap;
}
.ecran-cde-fiche .paire-etat .pan.actif {
    background: #1d5fa8; color: #fff; font-weight: 700;
}
.ecran-cde-fiche .identite-jetons {
    display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px;
}

/* Les valeurs qui se LISENT ne sont plus des boites grises : une etiquette
   discrete, une valeur nette. Ce qui se SAISIT garde son cadre, parce qu'un
   champ modifiable doit avoir l'air modifiable. */
.ecran-cde-fiche .cde-duo > .valeur-figee {
    background: none; border-color: transparent; padding: 0; min-height: 20px;
    font-size: 13px; color: var(--texte);
}
.ecran-cde-fiche .cde-duo > label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}

/* « Ligne non devisee » ouvre la liste des projets au lieu des lignes d'un
   devis : c'est une entree a part, elle se distingue. */
.liste-categories li.hors-devis {
    display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
    font-style: italic; border-bottom: 2px solid var(--bord-fort);
}
.liste-categories li.hors-devis .doux { font-style: normal; font-size: 11px; }

/* La fiche prend les deux volets du tunnel. */
.ecran-cde-fiche .devis-deux-volets .table-devis-ligne { max-height: 42vh; margin: 0; }

/* « Autre ligne devisee » : les neuf postes d'entete du devis. Premiere entree
   de la liste, comme dans la fenetre. */
.liste-categories li.autres-lignes { font-style: italic; }

/* ------------------------------------------------------------------
   Commandes — ce qui est retenu hors de la categorie affichee
   (Fi_Commande / FEN_Commande_Nouvelle)

   La table de rattachement de FEN_Ajout_Ligne_Commande ACCUMULE : une
   ligne de commande peut tirer sur plusieurs categories analytiques, et
   sur des postes d'entete, et sur des projets hors devis. Changer de
   categorie a gauche ne doit donc rien decocher — mais alors le reste a
   affecter devient incomprehensible si on ne voit plus ce qui est pris
   ailleurs. Ce bandeau le rappelle.
   ------------------------------------------------------------------ */
.retenues-ailleurs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 6px 0 0; padding: 6px 8px;
    background: var(--fond-gris);
    border: 1px solid var(--bord, #d8dbe0); border-radius: 4px;
}

.jeton-retenue {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 4px 2px 7px; font-size: 11px;
    background: #fff; border: 1px solid var(--bord, #d8dbe0); border-radius: 3px;
    max-width: 260px; white-space: nowrap;
}

.jeton-retenue b { font-variant-numeric: tabular-nums; }

.croix-retenue {
    border: none; background: none; cursor: pointer;
    padding: 0 3px; font-size: 13px; line-height: 1;
    color: var(--texte-doux, #6b7280);
}

.croix-retenue:hover { color: var(--rouge, var(--texte-danger)); }

/* ------------------------------------------------------------------
   Commandes — dire quoi remplir (Fi_Commande / FEN_Commande_Nouvelle)

   Le volet de saisie d'une ligne s'ouvrait sur des cadres vides : rien
   ne disait quels champs sont obligatoires, ni par ou commencer dans le
   rattachement au devis. Ces deux reperes le disent.
   ------------------------------------------------------------------ */
.mode-emploi {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    margin: 8px 0 0; padding: 7px 10px; font-size: 11.5px;
    background: var(--fond-gris);
    border: 1px solid var(--bord, #d8dbe0); border-radius: 4px;
}

.mode-emploi b { color: var(--accent, #1d4ed8); }

.note-volet { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; max-width: 78ch; }

/* Un champ que la validation refuse vide se signale avant, pas apres. */
.grille-ligne > label.requis::after {
    content: " *"; color: var(--rouge, var(--texte-danger)); font-weight: 700;
}

/* ------------------------------------------------------------------
   Commandes — les deux etapes de la saisie d'une ligne

   WinDev en fait deux fenetres, dans cet ordre : on choisit les lignes
   de devis (FEN_Selection_Ligne_Devis_Commande), PUIS on saisit le
   detail (FEN_Ajout_Ligne_Commande). Le titre du volet dit laquelle est
   a l'ecran.
   ------------------------------------------------------------------ */
.boite-ligne .boite-titre .etape-titre {
    float: right; font-weight: 400; font-size: 12px; opacity: .85;
}

.titre-etape-cde {
    margin: 14px 0 6px; padding-top: 10px;
    border-top: 1px solid var(--bord, #d8dbe0);
    font-weight: 600; font-size: 12.5px;
}

.grille-tunnel-cde > label.requis::after {
    content: " *"; color: var(--rouge, var(--texte-danger)); font-weight: 700;
}

/* A l etape 2, la liste des categories disparait : il ne reste que les
   lignes retenues, comme dans FEN_Ajout_Ligne_Commande. */
.devis-deux-volets.un-seul-volet { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------------
   Commandes — la disposition de FEN_Ajout_Ligne_Commande

   La fenetre fait 1300 x 559 et place ses champs ainsi :
     TABLE_Devis_Ligne_Commande  y=6    pleine largeur (1286)
     SPLIT_SansNom1              y=267  le trait
     SAI_Designation             y=277  pleine largeur, h=88
     puis UNE rangee, y=371 :
       IMG_Danger 6 (l=78) · LIB_Total_Engage 90 (l=315)
       · SAI_Quantite 411 (l=63) · SAI_Montant 481 (l=101)
       · SAI_Montant_TTC 587 (l=108) · SAI_Remise 701 (l=85)
       · COMBO_Tx_TVA 792 (l=103) · SAI_Total_HT 901 (l=117)
       · SAI_Total 1024 (l=267)

   Les proportions ci-dessous sont celles-la, ramenees en fractions.
   ------------------------------------------------------------------ */
.trait-ligne-cde {
    height: 1px; background: var(--bord, #d8dbe0); margin: 14px 0 12px;
}

/* ⚠️⚠️ LA DESIGNATION PREND TOUTE LA LARGEUR, et les deux reglages qui l'en
   empechaient sont LEVES PAR L'UTILISATEUR : « vu que nous avons de la place, agrandis la
   zone de designation » (2026-10-09, capture TS 308888 HABILLAGES MURAUX).

   Ce qu'il voyait, et c'est la somme de mes deux reglages d'hier : la grille faisait
   150 + 900 = 1 050 px dans une boite de 1 680, et « justify-content: end » la poussait
   contre le bord droit. Donc le libelle commencait a mi-largeur, la moitie GAUCHE de la
   boite etait vide, et la designation de neuf lignes defilait dans un cadre de huit.

   ⚠️ LES DEUX RAISONS QUE J'AVAIS ECRITES ETAIENT BONNES ET SONT POURTANT ECARTEES,
   parce qu'elles ne pesaient pas le meme poids :

     - la borne de 900 px disait « au-dela on ne lit plus une ligne de texte, on la
       balaie ». Vrai pour un texte au kilometre ; faux ici, ou la designation fait
       quelques mots par ligne et ou la borne coutait un cadre deux fois trop court ;
     - l'ancrage a droite venait de « fais en sorte que la designation et les montants
       soient ancres sur la droite » (2026-10-08). Mais cette demande visait l'ALIGNEMENT
       des montants sous la derniere colonne du tableau, et la designation n'y avait ete
       jointe que par symetrie. L'utilisateur, en la voyant, l'a desavouee.

   La rangee des montants, elle, RESTE calee a droite : c'est ce qu'il demande
   explicitement, et sa regle est intacte plus bas. Les deux blocs ne s'alignent donc plus,
   et c'est voulu. */
.champ-designation-cde {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 7px 12px;
}
.champ-designation-cde > label { color: var(--texte-doux); text-align: right; font-size: 12px; }
.champ-designation-cde > label.requis::after {
    content: " *"; color: var(--rouge, var(--texte-danger)); font-weight: 700;
}
/* ⚠️⚠️ LA HAUTEUR SUIT LE CONTENU, et les valeurs sont EN PIXELS, pas en em.
   « une hauteur qui montre la designation entiere sans ascenseur, avec une hauteur max
   raisonnable (~16 lignes) puis defilement » (utilisateur, 2026-10-09).

   Le calcul, pose ici parce que personne ne le refera : le corps est a 13 px / 1.4, donc
   18,2 px la ligne, et « font: inherit » le transmet au cadre. On fixe line-height a
   18 px pour ne pas dependre de cet arrondi, puis :
     16 lignes = 16 x 18 = 288, + 8 de padding + 2 de bordure = 298 px
      3 lignes =  3 x 18 =  54, + 8            + 2            =  64 px

   ⚠️ EN PIXELS PARCE QUE LES EM M'ONT DEJA MENTI SUR UN CHAMP DE SAISIE : un
   « line-height: 1.35 » avait rendu 28 px la ou le navigateur en comptait 30 sur ses
   propres champs (releve du 2026-10-08). Un max-height en em se serait donc arrete a
   quinze lignes et demie, et la quinzieme aurait ete coupee en deux.

   ⚠️ « field-sizing: content » EST LE MECANISME, ET IL PEUT MANQUER. Il fait
   grandir le cadre avec son contenu sans une ligne de JavaScript, mais il n'existe qu'a
   partir de Chromium 123. Les deux hotes sont Chromium (WebView2 sur le bureau, un
   navigateur sur le web) et se mettent a jour seuls, donc il est la en pratique -- mais
   « en pratique » n'est pas « toujours », et s'il manque le cadre retombe sur son
   attribut « rows ». C'est pourquoi le balisage CALCULE ce rows depuis le texte
   (LignesDesignation) au lieu de le laisser a 2 : sans cette precaution, un hote un peu
   ancien afficherait deux lignes et la demande serait perdue sans que rien ne le dise.

   Le defilement au-dela de 298 px ne peut pas chasser les boutons du pied : la boite est
   une colonne flex de hauteur min(92vh, 1000px) dont le CORPS defile
   (.boite.boite-ligne > .boite-corps) et dont le pied est « flex: none ». A 1 366 x 900,
   la boite fait 828 px et le pied reste a sa place quelle que soit la hauteur du cadre. */
.champ-designation-cde textarea {
    width: 100%; padding: 4px 7px; font: inherit; resize: vertical;
    border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte);
    line-height: 18px; field-sizing: content;
    min-height: 64px; max-height: 298px; overflow-y: auto;
}

/* La rangee chiffree : les montants, dans l'ordre de la fenetre.

   ⚠️ ELLE N'A PLUS DE COLONNE POUR LE DEPASSEMENT. L'alerte est montee contre le
   total affecte (voir le commentaire du balisage) ; sa premiere colonne tenait sa place
   et la regle de la media query la rangeait sur toute la largeur. Les deux sont retirees
   -- une colonne vide decalerait tous les montants, et un selecteur sans cible est du CSS
   mort qui se lit comme vif. La premiere piste reste large : c'est la designation. */
/* ⚠️⚠️ LES SAISIES GARDENT UNE LARGEUR NATURELLE, GROUPEES A GAUCHE.

   Elles etaient dans une grille en « fr », qui repartit TOUTE la largeur disponible entre
   les colonnes. Tant que la boite faisait 1 100 px, personne ne le voyait ; depuis
   qu'elle fait min(96vw, 1680px) -- mon acd3710a -- la rangee s'etire sur 1 650 px et
   l'utilisateur le dit : « pourquoi les saisies Quantite, Montant etc. sont devenues
   enormes et justifiees sur toute la fenetre ? » (2026-10-08).

   ⚠️ LA BOITE GRANDIT POUR LA TABLE DES LIGNES DE DEVIS, PAS POUR LES SAISIES. C'est
   la phrase a retenir : elargir un conteneur n'autorise pas ce qu'il contient a s'etirer.
   Une grille en « fr » le fait automatiquement, et c'est la le piege -- elle n'a pas de
   largeur a elle, elle prend celle qu'on lui donne.

   Les largeurs viennent de la DONNEE : une quantite et une remise tiennent en trois ou
   quatre chiffres, un montant en sept, un libelle de TVA en un mot et un taux. Les
   valeurs ci-dessous sont celles que la recette a relevees comme lisibles.

   « flex-wrap » plutot qu'une media query : la rangee passe a la ligne quand la place
   manque, sans qu'on ait a deviner a quelle largeur. */
/* ⚠️ CALEE A DROITE, pas etiree : « fais en sorte que la designation et les
   montants soient ancres sur la droite » (utilisateur, 2026-10-08). Les largeurs du lot
   174bc204 ne changent pas -- rien ne s'etire -- c'est le BLOC qui va contre le bord
   droit de la boite, si bien que le Total TTC tombe a l'aplomb de la derniere colonne du
   tableau au-dessus. L'ordre des champs est inchange.

   « flex-end » et pas « margin-left: auto » sur le dernier : avec flex-wrap, une rangee
   qui passe a la ligne garde ainsi ses deux morceaux cales du meme cote. */
.rangee-chiffres-cde {
    display: flex; align-items: flex-end; flex-wrap: wrap;
    gap: 8px; margin-top: 12px; justify-content: flex-end;
}
.rangee-chiffres-cde > .chiffre-cde { flex: none; width: 130px; }
.rangee-chiffres-cde > .chiffre-cde.etroit { width: 90px; }
.rangee-chiffres-cde > .chiffre-cde.total { width: 130px; }
/* Le libelle de TVA porte un mot et un taux : « 20 % FRANCE depuis 2014 ».

   ⚠️⚠️ CETTE REGLE PERD CONTRE « .chiffre-cde.etroit » CI-DESSUS, et c'est arrive :
   :has() prend la specificite de son ARGUMENT, et « select » est un type, donc
   « .rangee-chiffres-cde > .chiffre-cde:has(select) » vaut (0,2,1) quand la variante
   .etroit vaut (0,3,0). La cellule TVA portait « etroit » : elle est restee a 90 px et
   coupait son libelle (recette du 2026-10-08, TS 308888).

   La cellule a perdu la classe au lieu que cette regle surencherisse : une cellule de
   260 px ne s'appelle pas « etroit ». Si une autre cellule a liste deroulante recevait
   .etroit un jour, elle retomberait a 90 px SANS QUE RIEN NE LE SIGNALE. */
.rangee-chiffres-cde > .chiffre-cde:has(select) { width: 260px; }

.chiffre-cde > label {
    display: block; color: var(--texte-doux); font-size: 11px; margin-bottom: 3px;
}
.chiffre-cde > label.requis::after {
    content: " *"; color: var(--rouge, var(--texte-danger)); font-weight: 700;
}
.chiffre-cde input, .chiffre-cde select {
    width: 100%; padding: 4px 6px; font: inherit; text-align: right;
    border: 1px solid var(--bord-fort); border-radius: var(--r); background-color: var(--fond-carte);
}
.chiffre-cde select { text-align: left; }

/* ⚠️⚠️ LA HAUTEUR D'UNE CASE NE DEPEND PAS DE SON CONTENU, et c'est tout le
   defaut : « pourquoi l'affichage de Montant TTC / Total HT / Total TTC est foire ? »
   (utilisateur, 2026-10-08). Som() rend la chaine VIDE a zero -- voulu, un champ de
   saisie ne doit pas afficher « 0 » qu'il faut effacer -- et la div retombait alors a la
   hauteur de ses seuls padding et bordure, environ 10 px : trois traits fins a cote de
   saisies de 26 px. Remplie, elle reprenait sa hauteur, DONC LA RECETTE NE L'AVAIT PAS VU
   le matin ou les montants etaient saisis.

   La hauteur est donc posee a l'identique sur les trois formes de case -- saisie, liste
   et valeur calculee -- par UNE seule regle, pour qu'elles ne puissent plus deriver :
   une ligne de texte, plus les 8 px de padding et les 2 px de bordure. « box-sizing »
   est explicite parce que la bordure est comptee dedans.

   Le contenu est centre verticalement et cale a droite, comme le texte d'un input dont
   la hauteur depasse la ligne.

   ⚠️⚠️ EN PIXELS, ET PAS EN « em » : premiere tentative a
   « line-height: 1.35; min-height: calc(1.35em + 10px) », et la recette a mesure 28 px
   pour les cases calculees contre 30 pour les input et les select. La raison est que le
   navigateur impose « line-height: normal » aux champs de formulaire -- environ 20 px
   pour cette police -- la ou mon 1.35 en donnait 17,55. Les trois boites avaient donc
   bien la MEME regle et trois hauteurs differentes.

   Une valeur en pixels, identique aux trois, rend l'egalite VRAIE PAR CONSTRUCTION : si
   la police change un jour, les trois bougent ensemble ou aucune ne bouge. Un calcul en
   « em » depend d'un line-height que le navigateur peut refuser. */
.chiffre-cde input, .chiffre-cde select, .chiffre-cde .valeur-calculee {
    box-sizing: border-box; line-height: 20px; min-height: 30px;
}

/* Ce que la fenetre calcule, elle ne le laisse pas saisir. */
.chiffre-cde .valeur-calculee {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 4px 6px; text-align: right; font-variant-numeric: tabular-nums;
    background: var(--fond-gris, #f1f2f4); border: 1px solid var(--bord, #d8dbe0);
    border-radius: var(--r);
}
.chiffre-cde .valeur-calculee.fort { font-weight: 700; }

/* IMG_Danger + LIB_Total_Engage */
.zone-depassement { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.pastille-danger {
    flex: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--rouge, var(--texte-danger)); color: #fff;
    font-weight: 700; font-size: 13px; line-height: 20px; text-align: center;
}
.texte-depassement { color: var(--rouge, var(--texte-danger)); font-size: 11.5px; line-height: 1.35; }

/* INT_Afficher_Ligne_Masquer : present dans la fenetre, sans aucun code.
   On le montre desactive plutot que de le masquer. */
.bascule-inerte {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--texte-doux); opacity: .65; cursor: not-allowed;
}
.bascule-inerte input { width: auto; margin: 0; }

/* Les pastilles « Fixe / Variable » vivent dans leur propre conteneur, qui ne se
   comprime pas sous la largeur de son texte. Pose le 01/10 ; c'etait necessaire mais
   pas suffisant, le vrai coupable etant le nom de classe -- voir .pastille-choix. */
.ecran-cde-fiche .cde-duo-fixe { flex: none; }
.ecran-cde-fiche .paire-pastilles {
    display: inline-flex; gap: 5px; flex: none; white-space: nowrap;
}
.ecran-cde-fiche .paire-pastilles > .pastille-choix { min-width: max-content; }

/* La porte de FI_Commande : ni projet ni ligne tant que la date et le lieu de
   livraison ne sont pas poses. La fenetre encadre la table des projets en rouge
   pour le dire ; ici on l'ecrit. */
.ecran-cde-fiche .porte-fermee {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px; padding: 8px 12px; font-size: 12px;
    background: var(--fond-attention); border: 1px solid #f0cfa0; border-radius: var(--r);
    color: var(--texte-attention);
}

/* L'adresse du lieu de livraison dans le tunnel : elle se lit, elle ne se
   saisit pas -- c'est celle du lieu choisi dans la liste. */
.tunnel-commande .valeur-tunnel {
    padding: 4px 7px; font-size: 13px; color: var(--texte-doux);
    background: var(--fond-gris, #f1f2f4); border: 1px solid var(--bord, #d8dbe0);
    border-radius: var(--r); white-space: pre-wrap;
}

/* Le bouton Enregistrer quand il a du travail. La fenetre WinDev enregistre
   toute seule des qu'on choisit le lieu de livraison ; on ne reprend pas cela,
   alors on dit a sa place qu'il reste quelque chose a ecrire. */
.ecran-cde-fiche .btn-carre.primaire.a-faire {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent, #1d4ed8);
}

/* ------------------------------------------------------------------
   FEN_Recap_Commande — ou part l'argent d'une commande

   TABLEH_Recap_Commande empile trois niveaux dans une seule table, et
   les distingue par la couleur : la ligne de commande, le projet
   dessous, la ligne de devis tout en bas. On garde cette lecture, avec
   un retrait par niveau.
   ------------------------------------------------------------------ */
.boite-recap { width: min(1100px, 94vw); }
.table-recap-cde { max-height: 58vh; }
.table-recap-cde td { white-space: nowrap; }
.table-recap-cde td.lib { white-space: normal; }

.table-recap-cde tr.rang-0 td { background: var(--fond-info); font-weight: 600; }
.table-recap-cde tr.rang-0.choisi td { background: var(--fond-info-fort); }
.table-recap-cde tr.rang-1 td { background: #f6f7f9; font-style: italic; }
.table-recap-cde tr.rang-1 td.lib { padding-left: 22px; }
.table-recap-cde tr.rang-2 td.lib { padding-left: 42px; }

/* ------------------------------------------------------------------
   MENU_Impression et l'apercu de la commande (Fi_Commande)

   La fenetre ouvre son menu contextuel a trois options pour
   RESPONSABLETECHNIQUE et RESPONSABLEATELIER, et imprime directement
   pour les autres. Les trois ne different que par la liste des
   chantiers, alors on le dit sous chaque option.

   « liste-choix » etait deja pris par un select ailleurs : celle-ci
   porte son propre nom.
   ------------------------------------------------------------------ */
/* ⚠️ Un MENU CONTEXTUEL, pas une boite : la fenetre fait
   OuvreMenuContextuel(MENU_Impression). En boite, le « Fermer » du bas se
   trouvait la ou l'oeil cherche l'action, et c'est lui qu'on cliquait. Trois
   lignes, on en choisit une ; un clic a cote referme. */
.voile-menu { align-items: center; justify-content: center; }
.menu-impression {
    min-width: 260px; padding: 4px;
    background: var(--fond-carte, #fff);
    border: 1px solid var(--bord-fort, #b9bec7); border-radius: var(--r);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.menu-impression button {
    display: block; width: 100%; text-align: left;
    padding: 8px 14px; border: none; background: none;
    font: inherit; font-size: 13px; color: var(--texte); cursor: pointer;
    border-radius: 3px; white-space: nowrap;
}
.menu-impression button:hover { background: var(--fond-info); }


/* Les deux observations partent sur le bon, le commentaire interne non. La note
   qui le dit se distingue de la valeur : un trait, et elle est en retrait. */
.ecran-cde-fiche .note-role {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--bord, #d8dbe0);
}

/* ------------------------------------------------------------------
   La reprise des logos (FEN_Admin_Logos_Entites)

   « Charger tous » ne reprend QUE le logo d'entete, depuis
   ent_logo_entete. Les bas de page, eux, portent encore leur chemin
   DANS leur propre colonne chez CE, JB, MP et WD : personne ne les a
   jamais convertis. Cet ecran les montre avant de rien ecrire.
   ------------------------------------------------------------------ */
.boite-reprise { width: min(960px, 95vw); }
.boite-reprise .table-p11 { max-height: 46vh; margin-top: 8px; }
.boite-reprise td.lib {
    font-family: Consolas, "Courier New", monospace; font-size: 11px;
    word-break: break-all; white-space: normal;
}
.boite-reprise .note-reprise {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px dashed var(--bord, #d8dbe0); font-size: 11.5px;
}

/* FEN_Commentaire_Commande : les deux commentaires, dans la meme boite. */
.boite-commentaires { width: min(720px, 94vw); }
.boite-commentaires .grille-ligne > label { align-self: start; padding-top: 4px; }

/* Un champ qu'on ne peut pas remplir sur place doit DIRE par ou passer : en
   modification, les deux commentaires portent le chemin vers leur bouton, et il
   y mene. */
.ecran-cde-fiche .lien-commentaire {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 3px; padding: 0; border: none; background: none;
    font: inherit; font-size: 11px; color: var(--accent-texte, #1d4ed8);
    cursor: pointer; text-decoration: underline;
}
.ecran-cde-fiche .lien-commentaire:hover { text-decoration: none; }
.ecran-cde-fiche .lien-commentaire:disabled { color: var(--texte-faible); cursor: default; }

/* FEN_Blocage_Cde_V2018_01 : qui bloque, quand, et pourquoi. */
.boite-blocage { width: min(640px, 94vw); }
.boite-blocage .grille-ligne > label { align-self: center; }

/* BTN_DocsAssocies : le dossier des documents d'une commande. */
.boite-documents { width: min(720px, 94vw); }
.boite-documents .chemin-docs {
    font-family: Consolas, "Courier New", monospace; font-size: 12px;
    padding: 6px 8px; word-break: break-all; white-space: normal;
    background: var(--fond-gris, #f1f2f4); border: 1px solid var(--bord, #d8dbe0);
    border-radius: var(--r);
}
.choix-projet-docs { list-style: none; margin: 8px 0 0; padding: 0; }
.choix-projet-docs li {
    display: flex; align-items: baseline; gap: 10px;
    padding: 8px 12px; cursor: pointer; margin-bottom: 5px;
    border: 1px solid var(--bord, #d8dbe0); border-radius: var(--r);
    background: var(--fond-carte, #fff);
}
.choix-projet-docs li:hover {
    border-color: var(--accent, #1d4ed8); background: var(--fond-info);
}

/* ------------------------------------------------------------------
   MENU_Impression et l'apercu de la commande (Fi_Commande)

   La fenetre ouvre son menu contextuel a trois options pour
   RESPONSABLETECHNIQUE et RESPONSABLEATELIER, et imprime directement
   pour les autres. Les trois ne different que par la liste des
   chantiers, alors on le dit sous chaque option.

   « liste-choix » etait deja pris par un select ailleurs : celle-ci
   porte son propre nom.
   ------------------------------------------------------------------ */
.boite-menu-impression { width: min(620px, 94vw); }

.choix-impression { list-style: none; margin: 8px 0 0; padding: 0; }
.choix-impression li {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; cursor: pointer;
    border: 1px solid var(--bord, #d8dbe0); border-radius: var(--r);
    margin-bottom: 6px; background: var(--fond-carte, #fff);
}
.choix-impression li:hover {
    border-color: var(--accent, #1d4ed8); background: var(--fond-info);
}
.choix-impression li .doux { font-size: 11.5px; }

.boite-apercu-cde { width: min(900px, 96vw); }
.cadre-apercu-cde {
    width: 100%; height: 62vh; border: 1px solid var(--bord, #d8dbe0);
    background: #fff;
}


/* ============================================================   Le thème sombre — FEN_Modification_Fond_Ecran, écran « Thème ».

   Seules les neutres changent ici : l'accent est posé sur <html> par
   theme.js, qui en calcule les trois nuances. Le mode « auto » suit le
   réglage du système.
   ========================================================================== */

html[data-theme="sombre"] {
    --fond-succes: #17301c;
    --bord-succes: #2d5c34;
    --texte-succes: #7bc96f;

    --fond-attention: #3a2f12;
    --bord-attention: #6b5720;
    --texte-attention: #ffd470;

    --fond-danger: #3a1d1f;
    --bord-danger: #6e3237;
    --texte-danger: #ff9ba3;

    --fond-info: #16263a;
    --fond-info-fort: #1d3a57;
    --texte-info: #8cc8ff;

    --fond: #1b1a19;
    --fond-carte: #252423;
    --fond-barre: #2b2a29;
    --fond-gris: #201f1e;

    --bord: #3b3a39;
    --bord-fort: #504e4c;

    --texte: #f3f2f1;
    --texte-doux: #c8c6c4;
    --texte-faible: #b0aeac;   /* 5 au moins sur les fonds sombres (D34) ; #a19f9d faisait 4,3 sur les bordures */

    --vert: #6bb700;
    --orange: #ff8c00;
    --rouge: #f1707b;
    --vert-pastel: #1f3d24;
    --jaune-pastel: #4a4320;
    --rouge-pastel: #4d2427;
    --cyan-pastel: #1d3b46;

    --ombre: 0 1.6px 3.6px rgba(0, 0, 0, .40), 0 .3px .9px rgba(0, 0, 0, .30);
    --ombre-flottant: 0 6.4px 14.4px rgba(0, 0, 0, .50), 0 1.2px 3.6px rgba(0, 0, 0, .35);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --fond-succes: #17301c;
        --bord-succes: #2d5c34;
        --texte-succes: #7bc96f;

        --fond-attention: #3a2f12;
        --bord-attention: #6b5720;
        --texte-attention: #ffd470;

        --fond-danger: #3a1d1f;
        --bord-danger: #6e3237;
        --texte-danger: #ff9ba3;

        --fond-info: #16263a;
        --fond-info-fort: #1d3a57;
        --texte-info: #8cc8ff;

        --fond: #1b1a19;
        --fond-carte: #252423;
        --fond-barre: #2b2a29;
        --fond-gris: #201f1e;

        --bord: #3b3a39;
        --bord-fort: #504e4c;

        --texte: #f3f2f1;
        --texte-doux: #c8c6c4;
        --texte-faible: #b0aeac;   /* 5 au moins sur les fonds sombres (D34) ; #a19f9d faisait 4,3 sur les bordures */

        --vert: #6bb700;
        --orange: #ff8c00;
        --rouge: #f1707b;
        --vert-pastel: #1f3d24;
        --jaune-pastel: #4a4320;
        --rouge-pastel: #4d2427;
        --cyan-pastel: #1d3b46;

        --ombre: 0 1.6px 3.6px rgba(0, 0, 0, .40), 0 .3px .9px rgba(0, 0, 0, .30);
        --ombre-flottant: 0 6.4px 14.4px rgba(0, 0, 0, .50), 0 1.2px 3.6px rgba(0, 0, 0, .35);

        color-scheme: dark;
    }
}
/* ==============================================================   La recherche des factures client — Choix_Com_FacCli.

   La fenêtre teintait la ligne de trois pastels voisins (magenta, cyan, vert)
   et il fallait lire sa légende pour s'y retrouver. Les trois états se marquent
   ici à trois endroits, comme sur l'écran des commandes :

     proforma         le NUMERO passe en magenta plein
     non envoyée      la LIGNE se teinte, à peine
     en comptabilité  un jeton vert en fin de ligne

   Une proforma non envoyée garde donc ses deux marques, sans que l'une efface
   l'autre. Les trois teintes ont leur valeur sombre, sinon l'état se perd.
   ============================================================================ */
html {
    --fond-proforma: #f7d9ea;
    --texte-proforma: #8b1f5e;
    --fond-nonenvoyee: #e6f4f7;
}
html[data-theme="sombre"] {
    --fond-proforma: #52244a;
    --texte-proforma: #ffc4e4;
    --fond-nonenvoyee: #15323a;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --fond-proforma: #52244a;
        --texte-proforma: #ffc4e4;
        --fond-nonenvoyee: #15323a;
    }
}

.table-faccli tr.fac-nonenvoyee td { background: var(--fond-nonenvoyee); }
.table-faccli td.num-proforma {
    background: var(--fond-proforma); color: var(--texte-proforma);
    font-weight: 700; text-align: center;
}
.table-faccli td.col-projet {
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.jeton.t-proforma { background: var(--fond-proforma); color: var(--texte-proforma); font-weight: 700; }
.jeton.t-nonenvoyee { background: var(--fond-nonenvoyee); color: var(--texte-info); }
.jeton.t-interfacee {
    background: var(--fond-succes); border-color: var(--bord-succes);
    color: var(--texte-succes); font-weight: 600;
}

/* ============================================================   Suggestion.razor : un champ qui propose ce qui existe pendant la frappe.
   Composant partage -- sa feuille vit donc ici, pas dans celle d'un ecran.
   ========================================================================== */
.champ-suggest { position: relative; min-width: 0; }
.champ-suggest > input { width: 100%; box-sizing: border-box; }
.liste-suggest {
    position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
    margin: 2px 0 0; padding: 0; list-style: none;
    max-height: 232px; overflow: auto;
    background: var(--fond); border: 1px solid var(--bord-fort); border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14); font-size: 12px;
}
.liste-suggest li { padding: 4px 8px; cursor: pointer; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.liste-suggest li:hover, .liste-suggest li.survol { background: var(--accent-clair); }

/* Le potentiel venu des previsions, sous le budget de la fiche : il dit autre
   chose, dans une autre colonne, et doit se lire comme tel -- plus petit, et
   nomme. Voir ProjetService.BudgetPrevisionnel. */
.chiffre .ecart-prev { font-size: 11px; font-style: italic; margin-top: 1px; }
.ligne-potentiel { align-items: center; gap: 8px; }
.ligne-potentiel .valeur-figee { font-weight: 600; }

/* Une version de plus de deux jours se signale : c'est la premiere chose a
   regarder quand un defaut deja corrige reapparait. Voir Estampille.cs. */
.version-ancienne { color: var(--orange); font-weight: 600; }
/* ============================================================   Fen_Com_Salon_V_08_2022 — onglet « Suivi des actions »
   Les deux journaux du salon (actions sur les cales, demandes de reglement
   technique). Meme forme pour les deux : un selecteur de journal, une saisie
   en haut, l'historique en dessous.
   ========================================================================== */
.bloc-suivi { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

.entete-suivi {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.choix-journal { display: flex; gap: 4px; }
.entete-suivi .etendue {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; white-space: nowrap;
}

.saisie-suivi { display: flex; flex-direction: column; gap: 8px; }
.saisie-suivi .ligne-champs { display: flex; gap: 10px; flex-wrap: wrap; }
.saisie-suivi .champ { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.saisie-suivi .champ.etroit { flex: 0 0 90px; }
.saisie-suivi .champ.large { flex: 1 1 100%; }
.saisie-suivi .champ > input,
.saisie-suivi .champ > textarea { width: 100%; box-sizing: border-box; }
.saisie-suivi .actions-suivi { display: flex; gap: 6px; }

/* Une ligne du journal se reprend d'un clic, pour corriger son compte rendu. */
.bloc-suivi .grille tbody tr { cursor: pointer; }

/* =======================================================   FEN_Com_FacCli_optimise — onglet Récapitulatif, le bloc des taxes
   =======================================================   Les deux taxes mobilier vont SOUS le tableau du récap, pas dedans : celui-ci
   groupe les lignes par taux de TVA, et ces taxes sont des totaux de facture.
   D'où une liste à deux colonnes plutôt qu'une cinquième colonne vide.

   « recap-fiche » ne convenait pas : ses libellés tiennent dans 130 px, et
   « Dont taxe ameublement (CODIFAB) » n'y tient pas. Le nom a été vérifié libre
   avant d'être posé (cf. CLAUDE.md §11quinquies). */
.recap-taxes { display: grid; grid-template-columns: max-content max-content;
               gap: 4px 24px; margin: 6px 0 0; }
.recap-taxes dt { color: var(--texte-doux); font-size: 13px; }
.recap-taxes dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ========================================================   Frontière d'erreur du cadre (FrontiereDOnglet, §11sexies) : le détail
   technique sous le message, en retrait, pour que l'utilisateur le lise
   sans qu'il prenne la place du message.
   ====================================================================== */
.detail-erreur { margin: 8px 0 0 0; padding: 8px 10px; font-size: 12px; line-height: 1.4;
                 background: var(--fond-gris); border-left: 3px solid var(--accent);
                 white-space: pre-wrap; word-break: break-word; }

/* ========================================================   La gestion des taxes — FEN_Gestion_Taxe_Eco_Ameublement.

   Une petite fenêtre : la liste des barèmes datés, et le bloc de saisie
   d'un nouveau. Elle ne porte qu'une règle à elle — la ligne choisie se
   voit, puisque c'est elle que Supprimer emporte. Tout le reste vient de
   la charte (cadre-bloc, grille-p11, table-droits, pied-ecran).
   ====================================================================== */
.ecran-taxes-eco { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ecran-taxes-eco tbody tr { cursor: pointer; }
/* ⚠️ `--fond-info` DIRECTEMENT, et pas `--fond-choisi` : ce dernier n'est defini nulle
   part (releve le 2026-10-08 par jetons_css_sans_definition). Le reprendre aurait ajoute
   un emploi de plus a un jeton fantome, juste apres l'avoir signale. */
.ecran-taxes-eco tbody tr.choisi > td { background: var(--fond-info); }

/* ==============================================================   LE MODÈLE DES RÉFÉRENTIELS — CLAUDE.md §11nonies, décision de l'utilisateur du
   2026-10-08 : vaut pour TOUS les écrans de paramétrage.

   Compta > Fichiers de base (taux de TVA, banques, modes de règlement, pays…) et
   tous les référentiels qui suivront : LA LISTE À GAUCHE, LA FICHE À DROITE, dans
   la même fenêtre, comme la facturation stockage (Stockages.razor). Pas de
   navigation liste → fiche, pas de flèche retour : la liste reste visible, la ligne
   choisie est surlignée, la fiche se met à jour au clic. Sans sélection, la fiche
   dit « Choisissez … dans la liste ».

   ⚠️ §11quater, l'exception du volet : les boutons qui modifient la ligne choisie
   (Modifier, Supprimer, Annuler, Appliquer) restent EN BAS DU VOLET DE DROITE —
   leur place dit sur quoi ils portent. Le pied de l'écran ne garde que l'aide,
   « Nouveau » et « Fermer ».

   La grille et la recherche reprennent celles de Stockages (.colonne-liste,
   .colonne-detail, .barre-recherche-liste) ; les cartes, les volets et les boutons
   du volet sont propres à ce bloc. Avant un modèle de « liste puis fiche » (la
   première version de ce jour), corrigé par l'utilisateur lui-même.
   ============================================================================ */
.ecran-referentiel { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 8px; }
/* Liste posée sans .cadre : elle défile seule, le pied reste en bas (§11quater) — comme .cadre .corps-volet. */
.ecran-referentiel > .corps-volet { flex: 1; min-height: 0; overflow: auto; }
.grille-referentiel {
    flex: 1; min-height: 0; display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr; gap: 10px;
}
.grille-referentiel > .cadre { display: flex; flex-direction: column; min-height: 0; }
.grille-referentiel .colonne-detail .corps-volet { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px; }

/* Une carte par ligne de la liste, comme les contrats de stockage. */
.carte-referentiel {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    padding: 6px 8px; border: 1px solid var(--bord); border-radius: var(--r);
    background: var(--fond-carte); text-align: left; font: inherit; cursor: pointer;
}
.carte-referentiel:hover:not(:disabled) { border-color: var(--accent); }
.carte-referentiel:disabled { cursor: default; opacity: .7; }
.carte-referentiel.choisie { border-color: var(--accent); background: var(--accent-clair); }
.carte-referentiel .ligne-haut { display: flex; align-items: center; gap: 6px; }
.carte-referentiel .nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-referentiel .ligne-bas { display: flex; align-items: center; gap: 5px; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* FEN_FB_TauxTVA : le taux par défaut de la fiche société, VertPastel dans la fenêtre. */
.carte-referentiel.defaut { border-left: 4px solid var(--vert); background: var(--fond-succes); }
.carte-referentiel.defaut.choisie { background: var(--accent-clair); }

/* Les boutons de la ligne choisie, en bas du volet de droite (§11quater, exception). */
.boutons-referentiel {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: none;
    padding: 8px 10px; border-top: 1px solid var(--bord); background: var(--fond-gris);
}
.groupe-referentiel { border: none; margin: 0; padding: 0; min-width: 0; }

/* Une fiche qu'on consulte se lit : le fond gris dit qu'elle ne se saisit pas. */
.colonnes-referentiel .grille-fiche input:disabled,
.colonnes-referentiel .grille-fiche select:disabled,
.colonnes-referentiel .grille-fiche textarea:disabled {
    background-color: var(--fond-gris);
    color: var(--texte);
    -webkit-text-fill-color: var(--texte);
    opacity: 1;
    cursor: default;
}
.colonnes-referentiel .grille-fiche input[type=checkbox]:disabled { opacity: .8; }

/* Des colonnes qui se remplissent : 560px si l'écran le permet, jamais plus de trois. */
.colonnes-referentiel { columns: 520px 2; column-gap: 12px; }
.colonnes-referentiel > section { break-inside: avoid; margin: 0 0 12px; display: block; }
.colonnes-referentiel .grille-fiche {
    grid-template-columns: 124px minmax(0, 1fr) 124px minmax(0, 1fr);
    gap: 6px 10px;
}
.colonnes-referentiel .corps-volet { padding: 8px 10px 10px; }
.colonnes-referentiel textarea { width: 100%; resize: vertical; }
.colonnes-referentiel .grille-fiche .case { display: flex; align-items: center; gap: 8px; }
.colonnes-referentiel .grille-fiche .case input[type=checkbox] { width: auto; flex: none; }
.colonnes-referentiel .grille-fiche .case .case-libelle {
    text-align: left; padding-top: 0; color: var(--texte); cursor: pointer;
}

/* ============================================================   Fournisseurs -- la recherche integree (Choix_Prod_Fournisseur_NN)
   Les categories a gauche, la liste a droite, toute la hauteur du plan :
   « meme principe que les commandes ». La liste a cases est celle des
   categories de la commande (.volet-categories), sans sa hauteur bornee.
   ========================================================================== */
.recherche-fournisseurs {
    height: 100%; min-height: 0;
    display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 8px;
}
@media (max-width: 900px) {
    .recherche-fournisseurs { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
}
.recherche-fournisseurs .volet-categories { max-height: none; border: none; border-radius: 0; }
.recherche-fournisseurs-tout { padding: 6px 8px; border-top: 1px solid var(--bord); }

/* ============================================================   Liste des reglements -- Choix_Fac_Cli_Reglt_MDI (« Gestion reglement clients »)
   Les filtres en tete (une .barre-reglages, pour le choix de periode partage),
   la table sur toute la hauteur, le pied en bas.
   ========================================================================== */
.ecran-reglements { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.corps-reglements { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px; }
.corps-reglements > .cadre { flex: 1; min-height: 0; }
.table-reglements td.en-retard { color: var(--rouge); font-weight: 600; }


/* =====================================================   FEN_Ajout_Ligne_Commande — la liste des taux de TVA d'une ligne
   =================================================================== */

/* ⚠️ LES TAUX FRANCE SE DISTINGUENT, parce que la fenetre les distingue :
   « COMBO_Tx_TVA[...]..CouleurFond = VertClair » sur toute ligne dont le libelle
   contient FRANCE. La liste en porte d'autres — TVA GBP entre autres — et la
   couleur dit lequel on prend d'habitude, sans interdire les autres.

   Le critere est en Domain (TauxOffertsALaCommande.ADistinguer) ; ici il n'y a
   que la couleur.

   ⚠️ LE COUPLE --fond-succes / --vert EST LE MOTIF DE LA MAISON, employe par une
   vingtaine de regles de ce fichier. J'avais d'abord ecrit « var(--vert-pale, #e8f5e9) » :
   le jeton n'existe pas, donc le repli clair s'affichait, y compris EN SOMBRE — un fond
   vert tres pale sous un texte clair. C'est le defaut que jetons_css_sans_definition.py
   epingle, et je venais de l'ecrire. */
option.taux-france {
    background-color: var(--fond-succes);
    color: var(--vert);
}

/* ============================================================   Dossiers techniques -- Choix_Dossier_Technique_Optimise (Technique >
   SM_Visu_Dossier_Technique). Deux barres de reglages (periode, puis etat et
   tri), la table sur toute la hauteur, le pied en bas.
   ========================================================================== */
.ecran-dossiers-techniques { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.corps-dossiers-techniques { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px; }
.corps-dossiers-techniques > .cadre { flex: 1; min-height: 0; }
.choix-etat-dt { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
/* ============================================================   Dossier technique -- FEN_Dossier_Technique_LITE_2025_Optimise. Le bandeau du
   projet, les volets en onglets (onglets-plan), les champs en grille-fiche.
   ========================================================================== */
.ecran-dossier-technique { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* L'en-tête : la barre de titre et les tuiles du déboursé (titre-debourse, bandeau-debourse,
   tuile-deb… dans devis.css, lié par les deux hôtes). Ici, l'espace autour et les deux
   saisies du stand (N° Stand, Dim. Stand) logées dans la tuile Budget. */
.bandeau-dt { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 6px; font-size: 12px; }
.bandeau-dt .chiffre-vedette { font-size: 17px; overflow-wrap: anywhere; }
.saisie-bandeau-dt { width: 150px; padding: 2px 6px; font: inherit; border: 1px solid var(--bord-fort); border-radius: var(--r); }
.saisie-bandeau-dt:disabled { background: var(--fond-gris); color: var(--texte); }
/* ⚠️ LE CORPS DÉFILE, LE PIED RESTE (§11quater). La règle globale « .corps-plan
   { overflow: hidden } » du plan 11 coupait la dernière section d'Info Générales sous
   le pied, sans ascenseur (recette du 2026-10-09 : « une catégorie Mobilier Déco que je
   ne peux pas voir »). Les volets en table (Commandes, Journal) prennent la hauteur et
   défilent dans leur table. */
.ecran-dossier-technique .corps-plan { overflow: auto; display: flex; flex-direction: column; }
.ecran-dossier-technique .corps-plan > .grille-fiche,
.ecran-dossier-technique .corps-plan > p { flex: none; }
.ecran-dossier-technique .corps-plan > .cadre { flex: 1; min-height: 0; }
/* ⚠️ DES SAISIES À LEUR LARGEUR, PAS À CELLE DE LA FENÊTRE (cf. 174bc204). La grille de
   fiche est en « fr » : à 1 885 px, une liste de brief ou d'intervenant s'étirait sur une
   demi-page. Ici, des colonnes bornées, groupées à gauche. */
.ecran-dossier-technique .grille-fiche {
    grid-template-columns: 190px minmax(0, 420px) 190px minmax(0, 420px); justify-content: start;
}
@media (max-width: 1200px) {
    .ecran-dossier-technique .grille-fiche { grid-template-columns: 190px minmax(0, 420px); }
}
/* Un intervenant : sa combo, et son téléphone pro en lecture à côté (Tel_Cal, Tel_Techn…). */
.intervenant-dt { display: flex; gap: 6px; }
.intervenant-dt select { flex: 1; min-width: 0; }
.intervenant-dt input { width: 150px; }
/* Table_Devis : le devis retenu, en cyan dans la LITE. */
.table-droits tr.devis-retenu td { background: var(--fond-info-fort); }
/* La légende de Table_Commandes : la teinte d'une commande associée au dossier. */
.legende-dt { padding: 1px 8px; background: var(--fond-attention); border-radius: var(--r); font-weight: 400; }
/* Table_PlanPub (Récap. PUB) : une pub en commande (cyan dans la LITE), une pub existante (gris,
   elle l'emporte). La légende de la LITE en annonce deux autres, que plus rien ne pose. */
.table-droits tr.pub-commande td { background: var(--fond-info-fort); }
.table-droits tr.pub-existant td { background: var(--fond-gris); }
.legende-dt.legende-pub-commande { background: var(--fond-info-fort); }
/* Table_DTMobilier (Mobilier / Déco.) : les teintes de lfct_MiseEnForme_Tbl_DTMobilier_Tout /
   _Resume, sur les jetons de la charte (aucun jeton neuf). Une ligne supprimée en négatif. */
.table-droits tr.mob-vert td { background: var(--fond-succes); }
.table-droits tr.mob-jaune td, .table-droits tr.mob-stock td { background: var(--fond-attention); }
.table-droits tr.mob-gris td { background: var(--bord-fort); }
.table-droits tr.mob-noir td { background: var(--texte); color: var(--fond-carte); }
.table-droits tr.mob-commande td, .table-droits td.mob-cellule-cde { background: var(--fond-info-fort); }
.table-droits tr.mob-modif td { background: var(--fond-danger); color: var(--texte-danger); }
.table-droits tr.mob-barree td { text-decoration: line-through; }
.table-droits td.mob-resa { background: var(--accent-clair); }
.table-droits td.mob-v2 { background: var(--bord-fort); }
.table-droits td.mob-v3 { background: var(--fond-attention); }
.table-droits td.mob-v4 { background: var(--fond-info-fort); }
.table-droits td.mob-v5 { background: var(--fond-succes); }
.table-droits td.mob-v6 { background: var(--fond-danger); }
.entete-mobilier { flex-wrap: wrap; gap: 6px 14px; }
.choix-vue-mobilier { display: inline-flex; gap: 8px; align-items: center; }
.legende-mobilier { display: flex; gap: 6px; padding: 6px 0; }
.legende-dt.mob-legende-cde { background: var(--fond-info-fort); }
.legende-dt.mob-legende-stock { background: var(--fond-attention); }
.legende-dt.mob-legende-resa { background: var(--accent-clair); }
.legende-dt.mob-legende-modif { background: var(--fond-danger); color: var(--texte-danger); }
.totaux-mobilier { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.avertissement-dt { color: var(--texte-attention); background: var(--fond-attention); padding: 4px 8px; border-radius: var(--r); }
.totaux-mobilier > div { min-width: 340px; }
.totaux-mobilier > .commandes-mobilier { flex: 1 1 520px; }
.liste-copie { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; margin-top: 6px; }
.liste-copie .ligne-copie { text-align: left; padding: 4px 8px; background: var(--fond-carte); border: 1px solid var(--bord); border-radius: var(--r); }
.liste-copie .ligne-copie:hover { background: var(--accent-survol); }
/* Table_Commandes_Mobilier : associée (jaune), en cours (cyan), achat dont l'ordre est envoyé
   (magenta dans la LITE), location confirmée ou livrée (vert). */
.table-droits tr.cmob-associee td { background: var(--fond-attention); }
.table-droits tr.cmob-en-cours td { background: var(--fond-info-fort); }
.table-droits tr.cmob-achat td { background: var(--fond-danger); }
.table-droits tr.cmob-livree td { background: var(--fond-succes); }
/* La ligne choisie d'un plan pub teinté : la sélection doit se voir (les deux teintes viennent après « tr.choisi »). */
.table-droits tr.pub-commande.choisi td, .table-droits tr.pub-existant.choisi td { background: var(--accent-clair); }
.legende-dt.legende-pub-existant { background: var(--fond-gris); }
.table-droits tr.apres-brief td { background: var(--fond-danger); color: var(--texte-danger); }
.table-droits tr.cde-associee td { background: var(--fond-attention); }
/* Choisie ET associée : la sélection doit se voir, la règle ci-dessus venant après « tr.choisi ». */
.table-droits tr.cde-associee.choisi td { background: var(--accent-clair); }
.table-droits td.part-a-revoir { color: var(--texte-danger); font-weight: 600; }

/* ------------------------------------------------------------------
   Statistiques INSEE (ecran sans fenetre WinDev) : le corps defile, le pied reste.
   ------------------------------------------------------------------ */
.ecran-stats-insee { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.corps-stats-insee { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.couverture-insee, .note-insee {
    display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
    border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-barre);
}
.repartition-insee { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 8px 10px; }
/* ============================================================   Tunnel « Nouveau fournisseur » : etape des pieces (FEN_Prod_Fournisseur_Nouveau)
   ========================================================================== */
.piece-ligne { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--bord); }
/* Tunnel fournisseur : « Suivant » reste cliquable quand une condition manque -- il dit laquelle. */
.tunnel-pied .btn-carre.primaire.bloque { opacity: .55; }
/* Tunnel fournisseur : VIES muet -- un bandeau ambre qu'on ne peut pas rater, avec « Réessayer ». */
.bandeau-vies { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px;
    background: var(--fond-attention); border: 1px solid var(--bord-attention); border-left: 4px solid var(--orange);
    color: var(--texte-attention); border-radius: var(--r); }
.bandeau-vies > .icone { flex: none; width: 22px; height: 22px; color: var(--orange); }
.bandeau-vies .texte-vies { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jeton.tva-non-verifiee { margin-left: 6px; background: var(--fond-attention); border-color: var(--bord-attention);
    color: var(--texte-attention); font-weight: 600; }

/* ============================================================   « Suivant » d'un tunnel quand il manque quelque chose : attenue, mais cliquable --
   le clic ouvre la boite qui dit quoi (CreationEntreprise, NouveauFournisseur).
   ========================================================================== */
.btn-carre.bloque { opacity: .55; }
/* ============================================================   Activite NAF d'une societe (composant ChoixDActiviteNaf) : tunnel de creation et onglet Compta
   ========================================================================== */
.choix-naf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.choix-naf .naf-choisi { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.choix-naf .naf-saisie { display: flex; gap: 6px; align-items: center; }
/* Changer / Effacer / Annuler : le petit bouton de ligne (bouton-plat), aligne avec le champ — pas le gros bouton du pied. */
.choix-naf .naf-choisi .bouton-plat, .choix-naf .naf-saisie .bouton-plat { margin-left: 0; flex: none; }
.choix-naf .naf-recherche { flex: 1; min-width: 0; width: 100%; }
.choix-naf .naf-resultats { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bord);
    border-radius: var(--r); background: var(--fond-carte); max-height: 220px; overflow-y: auto; }
.choix-naf .naf-resultats button { width: 100%; text-align: left; padding: 5px 9px; border: 0; background: none;
    cursor: pointer; font: inherit; color: inherit; }
.choix-naf .naf-resultats button:hover { background: var(--accent-clair); }

/* ==== FEN_Prod_Fournisseur_NN_CrePdts : onglet « Pièces » (fournisseur_document) ==== */
.piece-perimee td { background: var(--fond-danger); }
.apercu-piece { width: min(960px, 92vw); }
.cadre-apercu { width: 100%; height: 70vh; border: 1px solid var(--bord); background: #fff; }
/* Boîte « Ajouter une pièce » : Type et Fichier sur toute la largeur, les deux dates côte à côte quelle que soit la fenêtre. */
.boite.boite-ajout-piece { width: 700px; }
.grille-fiche.grille-ajout-piece { grid-template-columns: 130px minmax(0, 1fr) 130px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
.grille-fiche.grille-ajout-piece > label { display: block; margin: 0; padding-top: 6px; white-space: nowrap; }
.grille-ajout-piece input[type=file] { height: auto; padding: 4px 8px; }
.grille-ajout-piece .aide-ajout-piece { margin: -2px 0 0; font-size: 12px; line-height: 1.4; }

/* ==== Tunnel NouveauFournisseur : étape Catégories, activité NAF ==== */
.naf-fournisseur { margin: 8px 0 12px; }
.naf-a-rattacher { margin: 8px 0 12px; border: 1px solid var(--bord-attention); background: var(--fond-attention, transparent); }
.avec-bouton > select { flex: 1; min-width: 0; }

/* ==== Tunnel NouveauFournisseur / ChoixDActiviteNaf : boutons de ligne en bouton-plat, jamais en btn-carre (§11quater) ==== */
.liens-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.liens-boutons .bouton-plat { margin-left: 0; white-space: nowrap; }
.liens-boutons .bouton-plat.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.liens-boutons .bouton-plat.primaire:hover:not(:disabled) { background: var(--accent-fonce); color: #fff; }
.choix-naf .naf-texte { flex: 1 1 14rem; min-width: 0; }
.choix-naf .naf-boutons { display: inline-flex; gap: 6px; flex: none; white-space: nowrap; }

/* ============================================================   Boîtes déplaçables (boites.js) : la barre de titre se saisit, la boîte suit le pointeur.
   ========================================================================== */
.boite > .boite-titre { cursor: move; user-select: none; touch-action: none; }
.boite > .boite-titre button, .boite > .boite-titre input, .boite > .boite-titre select { cursor: auto; }

/* ==== Recherche d'une société : une LISTE, une ligne par société (composant ListeDeSocietes) ==== */
.liste-societes { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto;
    border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte); }
.liste-societes > li { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; cursor: pointer;
    border-bottom: 1px solid var(--bord); }
.liste-societes > li:last-child { border-bottom: 0; }
.liste-societes > li:hover, .liste-societes > li.courante { background: var(--accent-survol); }
.liste-societes > li.choisie { background: var(--accent-clair); box-shadow: inset 3px 0 0 var(--accent); }
.liste-societes .societe-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-societes .societe-detail { flex: none; color: var(--texte-doux); font-size: 12px; }
.societe-retenue { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; padding: 9px 12px;
    border: 1px solid var(--bord-fort); border-left: 3px solid var(--accent); border-radius: var(--r);
    background: var(--accent-clair); }
.societe-retenue .bouton-plat { margin-left: auto; align-self: center; }
.pct-non-saisi { font-size: 10px; line-height: 1.2; color: var(--texte-attention); cursor: help; white-space: nowrap; }

/* ============================================================   La PAC (FEN_Com_PAC_V2019_04_optimise) : bandeau commercial / annee, et l'ecran en colonne.
   ========================================================================== */
.ecran-pac { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; padding: 8px; }
.ecran-pac > .cadre { min-height: 0; overflow: auto; }
.champ-pac { display: inline-flex; align-items: center; gap: 6px; }
.champ-pac select, .champ-pac input { min-width: 0; }
.champ-pac .court { width: 80px; }

/* ============================================================   Colonne de gauche des écrans de paramétrage (§11nonies) : la recherche et le filtre.
   Motif commun `.barre-recherche-liste` (Stockages, Taux de TVA, Banques, Pays, Modes de règlement,
   Moyens de paiement, Modèles de devis…) : le style de saisie maison de l'entête du devis — bordure douce, coins
   arrondis, même hauteur et même police, chevron discret à la place de la flèche du système, focus à la couleur
   d'accent — et un peu d'air entre les champs et au-dessus de la liste.
   ========================================================================== */
.barre-recherche-liste { display: flex; flex-direction: column; gap: 7px; padding: 6px 6px 9px; }
.barre-recherche-liste input,
.barre-recherche-liste select {
    width: 100%; min-width: 0; height: 30px; padding: 5px 8px; font: inherit;
    background-color: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.barre-recherche-liste select {
    appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 6px;
}
.barre-recherche-liste input:focus,
.barre-recherche-liste select:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .barre-recherche-liste select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa3b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
html[data-theme="sombre"] .barre-recherche-liste select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa3b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---- Fiche salon, onglet « Exposants » : veille des exposants (CHANTIER-veille-exposants V1, fonction nouvelle) ---- */
.jeton.exp-client   { background: color-mix(in srgb, #2e9d4f 20%, transparent); border-color: #2e9d4f; }
.jeton.exp-ancien   { background: color-mix(in srgb, #d99a1c 20%, transparent); border-color: #d99a1c; }
.jeton.exp-prospect { background: color-mix(in srgb, #3b82c4 20%, transparent); border-color: #3b82c4; }
.jeton.exp-verifier { background: color-mix(in srgb, #d6452f 20%, transparent); border-color: #d6452f; }
.jeton.exp-inconnu  { background: transparent; border-color: var(--bord-fort); color: var(--texte-faible); }
.jeton.exp-nouveau  { margin-left: 4px; background: var(--accent-clair); border-color: var(--accent-clair); color: var(--accent-texte); }
td.col-statut { white-space: nowrap; }
.exp-nouveaux { padding: 6px 10px; margin: 6px 0; border: 1px dashed var(--bord-fort); border-radius: var(--r, 4px);
    color: var(--texte-faible); font-size: 12px; }
.exp-nouveaux.avec { background: var(--accent-clair); border-style: solid; color: var(--accent-texte); }
.exp-nouveaux button.lien { margin-left: 8px; background: none; border: 0; padding: 0; color: inherit;
    text-decoration: underline; cursor: pointer; font: inherit; }
.exp-ok { color: var(--vert, #2e9d4f); }
.exp-ko { color: var(--rouge, #d6452f); }
.grille tr.exp-ligne-erreur td { background: color-mix(in srgb, #d6452f 10%, transparent); }

/* ===== PAC — préparation du plan (FEN_Com_PAC_V2019_04_optimise) : quadrants et bandeau ===== */
:root {
    --pac-ec: #f6e7a8; --pac-ar: #cfe0f5; --pac-cr: #cfe9d2; --pac-ac: #f7d9b5;
    --pac-jauge: #4a7bb7; --pac-jauge-fond: #e4e7ec; --pac-attention: #b45309;
    --pac-lien: #185abd;
}
/* Les thèmes de l'application sont clair / sombre / auto (theme.js) : « light / dark » ne matchaient jamais,
   et un Windows en sombre posait les teintes sombres sur une page claire. */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --pac-ec: #5a4f1c; --pac-ar: #23405f; --pac-cr: #25492c; --pac-ac: #5c3e1c;
        --pac-jauge: #7fa7d8; --pac-jauge-fond: #3a3f47; --pac-attention: #f0b46a;
        --pac-lien: #8ab4f8;
    }
}
html[data-theme="sombre"] {
    --pac-ec: #5a4f1c; --pac-ar: #23405f; --pac-cr: #25492c; --pac-ac: #5c3e1c;
    --pac-jauge: #7fa7d8; --pac-jauge-fond: #3a3f47; --pac-attention: #f0b46a;
    --pac-lien: #8ab4f8;
}
.chargement-pac { flex: 1 1 0; display: flex; align-items: center; justify-content: center; }
.chargement-pac .jauge { width: min(480px, 90%); flex-direction: column; align-items: stretch; }
.chargement-pac .jauge .piste { flex: none; }
.quadrant-ec { --pac-teinte: var(--pac-ec); }
.quadrant-ar { --pac-teinte: var(--pac-ar); }
.quadrant-cr { --pac-teinte: var(--pac-cr); }
.quadrant-ac { --pac-teinte: var(--pac-ac); }
.bandeau-plan { display: grid; gap: 10px; padding-bottom: 10px; }

/* ============================================================   PAC — préparation par tri, BÊTA (FEN_Com_PAC_V2019_04_optimise, onglet « Préparer par tri »).
   ========================================================================== */
.tri-pac { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0; min-height: 0; }
.tri-pac-beta { padding: 8px 12px; border: 1px dashed var(--bord-fort); border-radius: var(--r); background: var(--fond-gris); font-size: 13px; }
.tri-pac-bandeau { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; padding: 8px 12px; flex: none; }
@media (max-width: 1100px) { .tri-pac-bandeau { grid-template-columns: minmax(0, 1fr); } }
.tri-pac-jauge-bloc { display: flex; flex-direction: column; gap: 5px; }
.tri-pac-ligne-titre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.tri-pac-manque { font-weight: 600; color: var(--texte-danger); }
.tri-pac-couvert { font-weight: 600; color: var(--texte-succes); }
.tri-pac-jauge { position: relative; height: 14px; border-radius: 7px; background: var(--pac-jauge-fond); overflow: hidden; }
.tri-pac-jauge-retenu { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pac-jauge); }
.tri-pac-jauge-propose { position: absolute; top: 0; bottom: 0; background: var(--pac-jauge); opacity: .35; }
.tri-pac-familles { display: flex; flex-wrap: wrap; gap: 6px; }
.tri-pac-famille { display: flex; align-items: baseline; gap: 6px; padding: 3px 8px; min-height: 0;
    border: 2px solid transparent; border-radius: var(--r); background: var(--pac-teinte); color: var(--texte); text-align: left; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.tri-pac-famille.actif { border-color: var(--texte); }
.tri-pac-suggestions { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--bord); padding-left: 12px; font-size: 12px; }
.tri-pac-suggestion { display: flex; align-items: center; gap: 8px; padding: 2px 6px; border: 1px solid var(--bord); border-radius: var(--r); }
.tri-pac-suggestion-texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tri-pac-liste { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.tri-pac-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-bottom: 1px solid var(--bord); flex: none; }
.tri-pac-filtre { padding: 6px 12px; min-height: 36px; border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte); color: var(--texte); font: inherit; cursor: pointer; }
.tri-pac-filtre.actif { border-color: var(--accent); background: var(--accent-clair); font-weight: 700; }
.tri-pac-bouton-groupe { padding: 6px 12px; min-height: 36px; border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--pac-cr); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer; }
.tri-pac-bouton-groupe:disabled { opacity: .5; cursor: default; }
.tri-pac-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tri-pac-table th { position: sticky; top: 0; z-index: 1; background: var(--fond-carte); text-align: left; padding: 8px; color: var(--texte-doux); font-weight: 600; border-bottom: 1px solid var(--bord); }
.tri-pac-table td { padding: 6px 8px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tri-pac-table tr.tri-pac-ecartee td { color: var(--texte-doux); }
.tri-pac-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tri-pac-badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 12px; font-weight: 700; background: var(--pac-teinte); color: var(--texte); }
.tri-pac-signal { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--fond-gris); }
.tri-pac-signal.ton-bon { background: var(--pac-cr); }
.tri-pac-signal.ton-alerte { background: #f7d4cf; color: #6d140b; }
.tri-pac-signal.ton-piste { background: var(--pac-ac); }
.tri-pac-signe { font-weight: 700; }
.tri-pac-saisie { width: 100px; padding: 4px 6px; border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte); color: var(--texte); font: inherit; text-align: right; }
select.tri-pac-saisie { width: auto; text-align: left; }
.tri-pac-bouton { padding: 5px 10px; min-height: 32px; border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte); color: var(--texte); font: inherit; cursor: pointer; }
.tri-pac-bouton.plein { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.tri-pac-etat { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--fond-gris); font-weight: 600; }
.tri-pac-etat.retenue { background: var(--pac-cr); }
.tri-pac-lien { border: 0; background: transparent; color: var(--pac-lien, var(--accent)); font: inherit; cursor: pointer; padding: 4px 6px; }

/* ===== Sociétés du salon (onglet de Fen_Com_Salon, veille des exposants) : les cas de la liste unique ===== */
.jeton.exp-rattachee { background: color-mix(in srgb, #2e9d4f 20%, transparent); border-color: #2e9d4f; }
.jeton.exp-hors      { background: color-mix(in srgb, #3b82c4 18%, transparent); border-color: #3b82c4; }
.jeton.exp-reconnue  { background: color-mix(in srgb, #d99a1c 20%, transparent); border-color: #d99a1c; }
.jeton.exp-valider   { background: color-mix(in srgb, #d6452f 20%, transparent); border-color: #d6452f; }

/* PAC par tri : un client à plusieurs salons replié sur une ligne de total (FEN_PAC, bêta) */
.tri-pac-table tr.tri-pac-groupe td { background: var(--fond-gris); border-top: 1px solid var(--bord); }
.tri-pac-chevron { border: 0; background: transparent; color: var(--texte); font: inherit; cursor: pointer; padding: 0 6px 0 0; }
.tri-pac-table tr.tri-pac-enfant td:first-child { padding-left: 22px; }

/* ===== Dossier technique : « Réserver un produit », la liste des résultats (FEN_Bibli_Resa_MAJ) ===== */
.ligne-produit-resa { display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px 64px; gap: 4px 12px; align-items: baseline;
    padding: 5px 8px; cursor: pointer; border-bottom: 1px solid var(--bord); }
.ligne-produit-resa:hover { background: var(--accent-survol); }
.ligne-produit-resa > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-produit-resa .stock { text-align: right; }

/* FEN_Com_Salon_V_08_2022 : commerciaux associés au salon (étiquettes, saisie semi-automatique, historique) */
.assoc-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.assoc-etiquette { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--bord-fort);
    border-radius: 999px; background: var(--accent-clair); color: var(--texte); font-size: 12px; }
.assoc-etiquette .assoc-nom { color: var(--texte-doux); }
.assoc-etiquette.parti { background: var(--fond-gris); color: var(--texte-faible); border-style: dashed; }
.assoc-etiquette.parti .assoc-nom { color: var(--texte-faible); }
.assoc-etiquette .assoc-parti { font-size: 11px; font-style: normal; border: 1px solid var(--bord-fort); border-radius: 8px; padding: 0 5px; }
.assoc-retirer { width: 20px; height: 20px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit;
    font-size: 15px; line-height: 1; cursor: pointer; }
.assoc-retirer:hover:not(:disabled) { background: var(--bord-fort); }
.assoc-saisie { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; flex-wrap: wrap; }
.assoc-champ { position: relative; flex: 0 1 280px; min-width: 200px; }
.assoc-champ input { width: 100%; height: 28px; padding: 0 8px; font: inherit; background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r); }
.assoc-propositions { position: absolute; z-index: 20; left: 0; right: 0; top: 30px; display: flex; flex-direction: column; max-height: 240px; overflow-y: auto;
    background: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: var(--r); box-shadow: var(--ombre-flottant); }
.assoc-propositions button { display: flex; gap: 8px; align-items: baseline; text-align: left; padding: 5px 8px; border: 0;
    background: transparent; color: var(--texte); font: inherit; cursor: pointer; }
.assoc-propositions button:hover, .assoc-propositions button.actif { background: var(--accent-clair); }
.assoc-note { margin-top: 6px; font-size: 12px; color: var(--texte-faible); }
.assoc-historique-bloc { margin-top: 6px; font-size: 12px; }
.assoc-historique { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; color: var(--texte-faible); }
.toast-action { margin-left: 10px; padding: 2px 10px; border: 1px solid currentColor; border-radius: var(--r); background: transparent;
    color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.toast-action:hover { background: rgba(0, 0, 0, .08); }
.assoc-historique-bloc button.lien { color: var(--texte-doux); text-decoration: underline; }

/* ===== Thème sombre : les icônes des boutons du pied restaient dans le bleu du thème clair, presque invisibles ===== */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .btn-carre:not(.primaire) .icone { color: var(--texte); }
}
html[data-theme="sombre"] .btn-carre:not(.primaire) .icone { color: var(--texte); }

/* ===== Dossier technique (recette TS 2026-10-15) ===== */
.menu-contextuel .option-volet > .volet.a-gauche { left: auto; right: calc(100% - 4px); }
.table-droits td.col-nombre { white-space: nowrap; }
/* La ligne supprimée est NOIRE dans les deux thèmes (en sombre, « texte sur fond carte » la rendait la plus claire). */
.table-droits tr.mob-noir td { background: #000; color: #cfcfcf; }

/* ===== Recette TS 2026-10-15 (2e passe) ===== */
/* La boîte d'association des utilisateurs : la liste ne déborde plus, la case garde sa taille. */
.boite.boite-utilisateurs { width: min(760px, 94vw); }
.assoc-liste { max-height: 52vh; overflow: auto; }
.assoc-filtres { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.assoc-filtres label { display: flex; align-items: center; gap: 6px; }
.assoc-filtres input[type=checkbox] { width: 15px; height: 15px; flex: none; padding: 0; margin: 0; }
.table-droits td.col-code { white-space: nowrap; }
/* L'aperçu avant impression d'un document du dossier technique (iAperçu de WinDev) */
.boite.boite-apercu { width: min(1100px, 96vw); }
.apercu-cadre { width: 100%; height: 68vh; border: 1px solid var(--bord-fort); background: #fff; }

/* La boîte des utilisateurs du salon : 367 lignes avec « plus en fonction », aucune barre horizontale. */
.boite.boite-utilisateurs { width: min(920px, 96vw); }
.assoc-liste { overflow-x: hidden; overflow-y: auto; }
.assoc-liste table { width: 100%; table-layout: auto; }
.assoc-liste td, .assoc-liste th { white-space: normal; overflow-wrap: anywhere; }
.assoc-liste td.col-part { white-space: nowrap; }

/* ===== PAC, bêta « Préparer par tri » : le secteur de chasse (demande de l'utilisateur, 2026-10-16) ===== */
.tri-secteur { padding: 10px 12px; margin: 8px 0; }
.tri-secteur-stands { margin: 6px 0 8px; padding: 6px 10px; border-radius: var(--r); background: var(--fond-info); color: var(--texte-info); }
.tri-secteur-choisi td { background: var(--accent-clair); }
.tri-secteur-chaleur { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--bord-fort); }
.tri-secteur-chaleur.chaleur-3 { background: color-mix(in srgb, #d6452f 22%, transparent); border-color: #d6452f; }
.tri-secteur-chaleur.chaleur-2 { background: color-mix(in srgb, #d99a1c 22%, transparent); border-color: #d99a1c; }
.tri-secteur-chaleur.chaleur-1 { background: color-mix(in srgb, #3b82c4 20%, transparent); border-color: #3b82c4; }

/* PAC — choix d'un client / d'un salon / d'un projet dans la boîte « Ligne de la PAC » */
.choix-pac { display: grid; gap: 4px; min-width: 0; }
.liste-choix-pac { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; border: 1px solid var(--pac-jauge-fond); }
.liste-choix-pac button { width: 100%; text-align: left; padding: 4px 8px; background: transparent; border: 0; cursor: pointer; color: inherit; }
.liste-choix-pac button:hover { background: var(--pac-jauge-fond); }
.badge-choix { display: inline-block; padding: 0 6px; margin-right: 6px; border-radius: 8px; font-size: 11px; background: var(--pac-jauge-fond); }
.badge-choix.prospect { background: var(--pac-ac); }
.badge-choix.client { background: var(--pac-cr); }
.avertissement-choix { color: var(--pac-attention); }

/* ==============================================   Dossier technique (FEN_Dossier_Technique_LITE_2025_Optimise), recette du 2026-10-16 : « réduis la taille des encarts de
   tête pour laisser plus de place aux informations ; si les détails peuvent tenir sur trois colonnes pour éviter les
   barres de défilement, il faut le faire ».
   - l'en-tête : cinq tuiles en une bande compacte (libellé en petit, valeur en clair), sur une ou deux lignes ;
   - Info Générales, Logistique, Infos Technique : des BLOCS de champs répartis sur trois colonnes (≥ 1400 px), deux
     en dessous, une sur mobile. Les colonnes se remplissent à la suite et s'équilibrent seules : un bloc ne se coupe pas.
   Les tables (Mobilier, Commandes, Stock MP) gardent toute la largeur et prennent la hauteur gagnée.
   ========================================================================== */
.ecran-dossier-technique .bandeau-dt { gap: 3px; padding: 4px 10px 2px; }
.ecran-dossier-technique .bandeau-dt .titre-debourse { padding: 1px 8px; font-size: 13px; }
.ecran-dossier-technique .bandeau-dt .bandeau-debourse { flex-wrap: wrap; gap: 4px; }
.ecran-dossier-technique .bandeau-dt .tuile-deb {
    flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 2px 8px;
}
.ecran-dossier-technique .bandeau-dt .tete-tuile { flex: none; font-size: 9.5px; }
.ecran-dossier-technique .bandeau-dt .chiffre-vedette { font-size: 13px; line-height: 1.25; }
.ecran-dossier-technique .bandeau-dt .sous-chiffre { font-size: 11px; }
.ecran-dossier-technique .bandeau-dt .pied-tuile { margin-top: 0; font-size: 11px; }
.ecran-dossier-technique .bandeau-dt .pied-tuile.colonne { flex-direction: row; gap: 10px; align-items: baseline; }
.ecran-dossier-technique .bandeau-dt .saisie-bandeau-dt { width: 110px; padding: 1px 5px; }

.ecran-dossier-technique .corps-plan > .blocs-dt { flex: none; column-count: 3; column-gap: 12px; }
@media (min-width: 1600px) { .ecran-dossier-technique .corps-plan > .blocs-dt { column-count: 4; } }
@media (max-width: 1399px) { .ecran-dossier-technique .corps-plan > .blocs-dt { column-count: 2; } }
@media (max-width: 800px) { .ecran-dossier-technique .corps-plan > .blocs-dt { column-count: 1; } }
.ecran-dossier-technique .blocs-dt .bloc-dt.grille-fiche {
    display: grid; grid-template-columns: 118px minmax(0, 1fr); justify-content: stretch; gap: 3px 8px; align-items: start;
    break-inside: avoid; margin: 0 0 6px 0; padding: 4px 10px 6px;
    border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte);
}
.ecran-dossier-technique .blocs-dt .bloc-dt .titre-section { margin: 0 0 2px 0; padding-bottom: 3px; }
.ecran-dossier-technique .blocs-dt .bloc-dt label { font-size: 12px; padding-top: 4px; line-height: 1.2; }
.ecran-dossier-technique .blocs-dt .bloc-dt input,
.ecran-dossier-technique .blocs-dt .bloc-dt select,
.ecran-dossier-technique .blocs-dt .bloc-dt textarea { padding: 2px 6px; }
.ecran-dossier-technique .blocs-dt .bloc-dt .intervenant-dt input { width: 120px; flex: none; }
/* ===== PAC v2 — onglet Récap (Layout/PacRecap.razor) ===== */
:root { --recap-signe: #3f8f5a; --recap-facture: #1f5f3f; --recap-objectif: #9aa3b0; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --recap-signe: #6fc08a; --recap-facture: #9ad8b0; --recap-objectif: #6b7380; } }
html[data-theme="sombre"] { --recap-signe: #6fc08a; --recap-facture: #9ad8b0; --recap-objectif: #6b7380; }
.recap-pac { display: grid; gap: 12px; }
.recap-pac-jauge { padding-bottom: 10px; }
.recap-pac-barre { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 8rem; align-items: center; gap: 10px; padding: 3px 10px; }
.recap-pac-libelle { white-space: nowrap; }
.recap-pac-piste { height: 14px; border-radius: 7px; background: var(--pac-jauge-fond); overflow: hidden; }
.recap-pac-rempli { height: 100%; }
.recap-pac-rempli.objectif { background: var(--recap-objectif); }
.recap-pac-rempli.plan { background: var(--pac-jauge); }
.recap-pac-rempli.signe { background: var(--recap-signe); }
.recap-pac-rempli.facture { background: var(--recap-facture); }
.recap-pac-montant { text-align: right; }
.recap-pac-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .recap-pac-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.recap-pac-tuile { display: grid; gap: 2px; padding: 10px; background: var(--pac-teinte); }
.recap-pac-histo { display: flex; gap: 6px; height: 110px; padding: 8px 10px 4px; align-items: stretch; }
.recap-pac-col { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 11px; min-width: 0; }
.recap-pac-barres { flex: 1; width: 100%; display: flex; align-items: flex-end; gap: 2px; }
.recap-pac-b { flex: 1; min-height: 1px; }
.recap-pac-b.ref, .recap-pac-legende.ref { background: var(--pac-jauge); }
.recap-pac-b.reel, .recap-pac-legende.reel { background: var(--recap-signe); }
.recap-pac-legende { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 10px; }
.recap-pac-alertes ul { list-style: none; margin: 0; padding: 4px 10px 8px; display: grid; gap: 4px; }
.recap-pac-alerte { display: flex; gap: 8px; align-items: baseline; }
.recap-pac-alerte.alerte b { color: var(--pac-attention); }
.recap-pac-rien { padding: 8px 10px; }
/* ===== PAC v2 : onglet « Secteur de chasse » (PacSecteur.razor) ===== */
.secteur-pac { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; overflow: hidden; }
.secteur-resume { padding: 10px 12px; flex: none; }
.secteur-chiffres { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-top: 4px; }
.secteur-corps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; flex: 1 1 auto; min-height: 0; }
.secteur-liste, .secteur-detail { padding: 0 10px 8px; min-width: 0; min-height: 0; overflow: auto; }
.secteur-detail { display: flex; flex-direction: column; }
.secteur-titre { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; padding-top: 8px; flex: none; }
.secteur-note { margin: 4px 0 8px; padding: 6px 10px; border-radius: var(--r); background: var(--fond-attention); color: var(--texte-attention); }
.secteur-fiches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; flex: none; }
.secteur-fiche { min-width: 0; overflow: hidden; }
.secteur-societes { flex: 1 1 220px; min-height: 160px; overflow: auto; }
.secteur-dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 6px 0 0; }
.secteur-dl dt { color: var(--texte-doux); }
.secteur-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.secteur-mini { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.secteur-mini th, .secteur-mini td { padding: 2px 4px; border-bottom: 1px solid var(--bord); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secteur-mini th.tri-pac-num, .secteur-mini td.tri-pac-num { text-align: right; }
.secteur-potentiel { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.secteur-realiste { font-size: 1.15em; }
@media (max-width: 1400px) { .secteur-fiches { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .secteur-corps { grid-template-columns: 1fr; } }
.secteur-corps.sans-detail { grid-template-columns: 1fr; }
.secteur-pac .reglable thead th { position: sticky; top: 0; z-index: 5; background: var(--fond-gris); padding-right: 22px; }
.secteur-pac .reglable td { position: static; white-space: nowrap; }
.secteur-pac .reglable td.lib { white-space: normal; }
.secteur-pac .reglable tr.ajoutee td { background: var(--fond-succes); }
.secteur-ajoutees { background: var(--fond-succes); color: var(--vert); }
.secteur-detail { isolation: isolate; }


/* ============================================================   L'aide interactive (Layout/AideInteractive.razor, wwwroot/aide.js) : le bouton « ? » de la barre d'onglets, le volet
   latéral, les pastilles « i » et la visite guidée. Le contenu vit dans LaBaseUI/aide/<ecran>.json.
   ========================================================================== */
.aide-bouton {
    flex: none; width: 26px; height: 26px; min-height: 0; padding: 0; margin-left: 8px; border: 1px solid var(--bord-fort);
    border-radius: 50%; background: var(--fond-carte); color: var(--texte); font: inherit; font-weight: 700; cursor: pointer;
}
.aide-bouton:hover, .aide-bouton.actif { background: var(--accent-clair); border-color: var(--aide-teinte); }
.aide-volet {
    position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); display: flex; flex-direction: column;
    background: var(--fond-carte); color: var(--texte); border-left: 1px solid var(--bord-fort); box-shadow: var(--ombre-flottant);
}
.aide-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px;
    border-bottom: 1px solid var(--bord); background: var(--fond-gris); }
.aide-fermer { width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: var(--r); background: transparent;
    color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.aide-fermer:hover { background: var(--bord-fort); }
.aide-corps { flex: 1; min-height: 0; overflow: auto; padding: 8px 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.aide-rubrique { border-bottom: 1px solid var(--bord); padding-bottom: 6px; }
.aide-rubrique-titre { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 0; padding: 8px 0; border: 0;
    background: transparent; color: var(--texte); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.aide-chevron { flex: none; width: 12px; color: var(--texte-doux); }
.aide-sert { margin: 0 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.aide-notions { display: flex; flex-direction: column; gap: 4px; }
.aide-notion { padding: 4px 8px; border: 1px solid var(--bord); border-radius: var(--r); }
.aide-notion.active { border-color: var(--aide-teinte); background: var(--accent-clair); }
.aide-notion-nom { display: flex; gap: 6px; align-items: center; width: 100%; min-height: 0; padding: 2px 0; border: 0; background: transparent;
    color: var(--texte); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.aide-notion-court { color: var(--texte-doux); font-size: 12px; padding-left: 18px; }
.aide-notion-detail { margin: 6px 0 2px 18px; display: grid; grid-template-columns: 1fr; gap: 2px; font-size: 12px; }
.aide-notion-detail dt { font-weight: 600; margin-top: 4px; }
.aide-notion-detail dd { margin: 0; }

/* Une pastille « i » est un élément EN LIGNE, à la suite du libellé : jamais positionnée en absolu, jamais sur un autre texte. */
.aide-pastille {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: none;
    box-sizing: border-box; width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0 6px 0 5px;
    border: 1px solid var(--aide-teinte); border-radius: 50%; background: var(--fond-carte); color: var(--aide-teinte);
    font: italic 700 11px/1 Georgia, serif; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.aide-pastille:hover { background: var(--aide-teinte); color: var(--fond-carte); }

.aide-visite { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.aide-halo { position: fixed; border: 2px solid var(--aide-teinte); border-radius: var(--r); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); transition: all .15s ease; }
.aide-bulle {
    position: fixed; width: min(340px, calc(100vw - 16px)); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
    background: var(--fond-carte); color: var(--texte); border: 1px solid var(--aide-teinte); border-radius: var(--r);
    box-shadow: var(--ombre-flottant); pointer-events: auto;
}
.aide-bulle-titre { display: flex; justify-content: space-between; gap: 8px; }
.aide-bulle-absente { color: var(--texte-attention); background: var(--fond-attention); padding: 4px 8px; border-radius: var(--r); font-size: 12px; }
.aide-bulle-boutons { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 700px) { .aide-volet { width: 100vw; } }
@media (prefers-reduced-motion: reduce) { .aide-halo { transition: none; } }
/* --accent vaut #3b3a39 en sombre : illisible comme trait ou comme texte. La teinte de l'aide suit le thème. */
:root { --aide-teinte: var(--accent); --accent-texte: var(--accent); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --aide-teinte: var(--texte); --accent-texte: var(--texte); } }
html[data-theme="sombre"] { --aide-teinte: var(--texte); --accent-texte: var(--texte); }

/* ===== PAC v2 — accueil par tuiles (aucun commercial choisi) ===== */
.pac-accueil { display: grid; gap: 14px; justify-items: center; padding: 28px 16px; }
.pac-accueil h2 { margin: 0; }
.pac-accueil-moi { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pac-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 12px; width: min(100%, 70rem); }
.pac-tuile { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; text-align: left; padding: 12px;
             background: var(--fond-carte); color: var(--texte); border: 1px solid var(--bord); border-left: 5px solid var(--bord-fort);
             border-radius: 6px; cursor: pointer; }
.pac-tuile:hover:not(:disabled) { background: var(--accent-survol); border-color: var(--accent); }
.pac-tuile.moi { border-left-color: var(--accent); }
.pac-tuile.figee { border-left-color: var(--vert); }
.pac-tuile.preparation { border-left-color: var(--orange); }
.pac-pastille { grid-row: span 3; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
                background: var(--accent-clair); color: var(--accent-texte); font-weight: 600; }
.pac-tuile-nom { font-weight: 600; }
.pac-tuile-badge { margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 11px; background: var(--accent-clair); color: var(--accent-texte); }
.pac-tuile-etat { font-size: 12px; color: var(--texte-doux); }

/* PAC — un onglet déjà ouvert reste monté, caché */
/* La chaîne flex de l'écran ne se rompt pas : .ecran-pac → .pac-onglet (actif) → .tri-pac / .secteur-pac → liste. */
.pac-onglet { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: auto; }
.pac-onglet > .tri-pac, .pac-onglet > .secteur-pac { flex: 1 1 0; min-height: 0; }
.pac-onglet.pac-onglet-cache { display: none !important; }
.pac-accueil { flex: 1 1 0; min-height: 0; overflow: auto; align-content: start; }

.ecran-transfert { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 8px; }
.ecran-transfert .corps-transfert { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.ecran-transfert .pied-ets { margin-top: auto; }
.veille-lot { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--fond-info); border-bottom: 1px solid var(--bord); }
.veille-lot progress { width: 100%; height: 10px; }
.apercu-puces { margin: 4px 0 6px 18px; padding: 0; }
.apercu-puces li { margin: 2px 0; }
.tri-secteur-chaleur.chaleur-4 { background: color-mix(in srgb, #2e9e4f 24%, transparent); border-color: #2e9e4f; }
.tri-secteur-chaleur.chaleur-5 { background: color-mix(in srgb, #8a4fd1 26%, transparent); border-color: #8a4fd1; }
/* Transfert de portefeuille en tunnel : l'écran entier, pas la fenêtre de 760 px des tunnels de création */
.tunnel-transfert { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--fond-carte);
    border: 1px solid var(--bord-fort); border-radius: var(--r); overflow: hidden; }
.tunnel-transfert .tunnel-corps { flex: 1 1 auto; min-height: 0; overflow: auto; }
.quoi-carte { padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); }
.quoi-carte.inactive { opacity: .6; background: var(--fond-gris); }
.quoi-carte .champs-fiche { margin-top: 6px; }
.quoi-sous { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0 24px; }


/* ===== PAC v2 — plan retenu découpé : salon / stockage / hors salon (Tri et Récap) ===== */
:root { --nat-salon: #3b6fb6; --nat-stockage: #8a6bbf; --nat-hors: #d28a2d; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --nat-salon: #7fa7d8; --nat-stockage: #b79ee0; --nat-hors: #f0b46a; } }
html[data-theme="sombre"] { --nat-salon: #7fa7d8; --nat-stockage: #b79ee0; --nat-hors: #f0b46a; }
.nat-salon { --nat: var(--nat-salon); }
.nat-stockage { --nat: var(--nat-stockage); }
.nat-hors { --nat: var(--nat-hors); }
.tri-pac-jauge.empilee { display: flex; }
.tri-pac-jauge.empilee .seg, .recap-pac-empile .seg { background: var(--nat); height: 100%; flex: none; cursor: pointer; }
.tri-pac-jauge.empilee .seg.propose { opacity: .35; }
.tri-pac-jauge.empilee .seg.actif { outline: 2px solid var(--texte); outline-offset: -2px; }
.recap-pac-empile { display: flex; height: 100%; }
.recap-pac-empile .seg { cursor: default; }
.legende-nature { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 2px 10px; font-size: 12px; }
.legende-nature-bouton { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 2px 4px; color: var(--texte); font: inherit; border-radius: 4px; }
button.legende-nature-bouton { cursor: pointer; }
button.legende-nature-bouton:hover, .legende-nature-bouton.actif { background: var(--accent-survol); }
.legende-nature-bouton.actif { font-weight: 700; outline: 1px solid var(--accent); }
.pastille-nature { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--nat); }

/* PAC — Tri : dernier contact, attente d'enregistrement, barre d'onglets sans défilement vertical */
.tri-pac-contact.recent { color: var(--vert); }
.tri-pac-badge-contact { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 11px; background: var(--fond-attention); color: var(--texte); }
.tri-pac-attente { padding: 1px 8px; border-radius: 8px; font-size: 12px; background: var(--fond-attention); color: var(--texte); }
.onglets-plan { overflow-y: hidden; }

.hors-salon-blocs { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow: auto; }
.hors-salon-blocs .corps-volet { max-height: 38vh; overflow: auto; }
.fenetre-chasse { margin: 6px 0; }
.fenetre-chasse-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; max-height: 40vh; }
.fenetre-chasse-grille > div { min-width: 0; overflow: auto; }
@media (max-width: 1100px) { .fenetre-chasse-grille { grid-template-columns: 1fr; } }


/* ==============================================================   Veille des salons, refonte (FEN_Veille_Exposants, 2026-10-16) : accueil en tuiles, trois files, fiche en langage métier.
   ============================================================================ */
.ecran-veille { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.veille-portee { display: inline-flex; gap: 4px; }
.veille-tuiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.veille-tuile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left; font: inherit; color: var(--texte);
    background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 8px; }
.veille-tuile .veille-chiffre { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.veille-tuile > span:last-child { font-size: 12px; color: var(--texte-doux); }
.veille-tuile.bon .veille-chiffre { color: var(--vert); }
.veille-tuile.cliquable { cursor: pointer; }
.veille-tuile.cliquable:hover { background: var(--accent-survol); }
.veille-tuile.choisie { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
@media (max-width: 1100px) { .veille-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.veille-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.veille-corps.occupe { opacity: .6; pointer-events: none; }
.veille-deux-colonnes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); gap: 10px; }
.veille-liste, .veille-fiche { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.veille-liste > .corps-volet, .veille-fiche > .corps-volet { flex: 1; min-height: 0; overflow: auto; }
.veille-carte { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-bottom: 1px solid var(--bord); cursor: pointer; }
.veille-carte:hover { background: var(--accent-survol); }
.veille-carte.choisie { background: var(--accent-clair); box-shadow: 3px 0 0 var(--accent) inset; }
.veille-carte .ligne-haut { display: flex; align-items: center; gap: 6px; }
.veille-carte .nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veille-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.veille-phrase { margin: 0 0 12px; font-size: 15px; }
.veille-avance { margin-top: 14px; border-top: 1px solid var(--bord); padding-top: 8px; }
.veille-avance > summary { cursor: pointer; color: var(--texte-doux); font-size: 12px; margin-bottom: 8px; }
.veille-bloc { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.veille-bloc .ligne-haut { display: flex; align-items: center; gap: 10px; }
.veille-depot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 84px; margin-bottom: 8px; padding: 12px;
    border: 2px dashed var(--bord-fort, var(--bord)); border-radius: 8px; text-align: center; color: var(--texte-doux); background: var(--fond-gris); }
.veille-depot:hover, .veille-depot:focus-within { border-color: var(--accent); color: var(--texte); }
.veille-depot.occupe { opacity: .6; }
.veille-depot input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
html[data-theme="sombre"] .veille-tuile.bon .veille-chiffre { color: var(--texte); }
.veille-suite { padding: 8px 10px; text-align: center; }
/* Le secteur à 1600 x 900 : « Pourquoi » passe à la ligne et le dernier contact se coupe, l'action reste à l'écran. */
.secteur-pac .reglable td.secteur-pourquoi { white-space: normal; min-width: 160px; max-width: 280px; }
.secteur-pac .reglable td.secteur-contact { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Les deux gestes d'une société s'empilent dans la cellule : « → relances » ne sort plus du volet. */
.secteur-pac .reglable td.secteur-pourquoi { max-width: 220px; min-width: 140px; }
.secteur-pac .reglable td.secteur-action { white-space: normal; }
.secteur-pac .reglable td.secteur-action button { display: block; margin: 1px 0; }

/* PAC — les boutons radio d'une grille de saisie gardent leur taille, à côté de leur libellé */
.grille-creation label.case { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; }
.grille-creation label.case input[type="radio"], .grille-creation label.case input[type="checkbox"] { width: auto; flex: none; }
/* L'Aide est calée à gauche de la barre d'actions, dans une barre de boutons comme dans le pied (§11quater). */
.barre-boutons .a-gauche { margin-right: auto; }
/* Un bouton dont le libellé tient sur deux lignes sans être coupé. */
.btn-carre.btn-carre-long { width: 112px; }
.filtres-liste select { min-width: 0; text-overflow: ellipsis; }
/* Recherche des factures à 1600 px : les textes longs se coupent (le titre dit le reste), les montants restent à l'écran. */
.table-faccli td.lib, .table-faccli td.doux[title], .table-faccli td.col-projet { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-faccli td.a-droite, .table-faccli td.col-etroite, .table-faccli td.col-indice { max-width: none; overflow: visible; white-space: nowrap; }

/* Recette tiers / projets : .corps-plan { overflow:hidden } (plan 11) ne vaut que pour la fiche client, et la fiche garde une hauteur
   minimale : sous elle la page défile au lieu d'écraser les tables (1280x800 : 0 px) ou de couper les boutons du volet Contacts. */
.corps-plan:has(.plan11) { overflow: auto; }
.plan11 { min-height: 36rem; }
/* StatistiquesInsee : le corps défile, ses blocs gardent leur hauteur au lieu de s'écraser à 80-100 px. */
.corps-stats-insee > * { flex: none; }

/* Listes de référence du suivi de dossier : la boîte de 460 px coupait le bouton Fermer ; le pied passe à la ligne au lieu de déborder. */
.boite.boite-liste-ref { width: 560px; }
.boite-liste-ref .pied-ecran { flex-wrap: wrap; justify-content: flex-end; }

/* ---- Relances commerciales (FEN_Com_Relances_V2024) : « Ma PAC — à relancer », la pastille de fenêtre de vente (R5) ---- */
.relances-pac { margin: 6px 0; }
.relances-pac .saisie-annee { width: 64px; }
.pastille-fenetre { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 10px; line-height: 16px; border: 1px solid var(--bord-fort); background: transparent; white-space: nowrap; }
.pastille-fenetre.ouverte { background: var(--fond-succes, #e3f4e5); color: var(--vert); border-color: var(--vert); font-weight: 600; }
.pastille-fenetre.bientot { background: var(--fond-attention); color: var(--orange); border-color: var(--bord-attention); }
.pastille-fenetre.passee, .pastille-fenetre.plus-tard, .pastille-fenetre.insuffisant { color: var(--texte-doux, #6b6b6b); }
.relances-dormantes .entete-volet > .tri-pac-lien { font-weight: 600; }

/* ---- PAC, onglet Hors salon / Affaires : les tuiles par secteur (H4b) ---- */
.secteurs-tuiles .secteur-alerte { margin-bottom: 8px; }

/* PAC · Hors salon : le bandeau de chiffres sur une ligne, puis QUATRE sous-onglets pleine hauteur. Une seule zone de défilement par
   panneau (le panneau) : plus de volet qui défile dans un volet (corps-volet : 51 px visibles pour 335 de contenu). */
.hs-bandeau { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; height: 30px; padding: 2px 12px; overflow: hidden; white-space: nowrap; }
.hs-bandeau .secteur-chiffres { margin-top: 0; flex-wrap: nowrap; gap: 14px; margin-left: auto; }
.hs-onglets { flex: none; }
.hs-panneau { flex: 1 1 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.hs-panneau.hs-cache { display: none; }
.hs-panneau > * { flex: none; }
.hs-panneau .corps-volet, .hs-panneau.hors-salon-blocs .corps-volet { max-height: none; overflow: visible; }
/* Aujourd'hui : la liste des cibles à gauche, la fiche de la cible choisie à droite (§11nonies) */
.hs-liste-fiche { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); gap: 8px; align-items: start; }
@media (max-width: 1100px) { .hs-liste-fiche { grid-template-columns: 1fr; } }
.hs-liste, .hs-fiche { min-width: 0; }
.hs-fiche { position: sticky; top: 0; }
.hs-pourquoi { margin: 0 0 6px; }
.hs-retour { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
/* PAC · Hors salon · cibles du jour : un nom de société long se coupe (MUTUALITE FRANCAISE…), le nom complet est en info-bulle. */
.cibles-du-jour .reglable td.nom-cible { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Veille · Santé */
.veille-sante { display: flex; flex-direction: column; gap: 10px; }
.veille-tuile.alerte .veille-chiffre { color: var(--rouge); }
html[data-theme="sombre"] .veille-tuile.alerte .veille-chiffre { color: var(--texte-danger); }

/* ===== Veille des exposants : la lecture est en retard (bandeau sous le titre, CHANTIER-veille-exposants §15) ===== */
.bandeau-veille { display: flex; align-items: center; gap: 12px; padding: 6px 14px; background: #b3261e; color: #fff; font-size: 0.9rem; }
.bandeau-veille .tri-pac-lien { color: #fff; text-decoration: underline; }

/* ===== La saisie retire les caractères que la base ne garde pas (theme.js) : la note passagère ===== */
.note-saisie {
    position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 61; max-width: min(640px, 90vw);
    padding: 7px 14px; border-radius: var(--r); border: 1px solid var(--bord-attention);
    background: var(--fond-attention); color: var(--texte-attention); font-size: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
.note-saisie[hidden] { display: none; }

/* ===== Une boîte d'erreur qui liste plusieurs refus : un par ligne ===== */
.message-erreur { white-space: pre-line; }

/* ===== PAC : la part « Récurrent » à côté de « Stockage » (contrats récurrents T6b) ===== */
.pastille-nature.nat-recurrent { background: #7b5ea7; }
.recap-pac-recurrent { align-items: center; }

/* ===== Relances : une section dépliée prend sa place, une seule zone de défilement (recette du 2026-10-17) =====
   L'écran défile en entier ; aucune section ne rétrécit pour faire de la place à une autre (la liste « Toutes les relances » mesurait 0 px,
   écrasée par les sections de la PAC). La liste virtualisée garde une hauteur propre, bornée. */
.ecran-relances { overflow-y: auto; }
.ecran-relances > * { flex-shrink: 0; }
.ecran-relances .relances-pac .corps-volet, .ecran-relances .liste-relances .corps-volet { overflow: visible; }
.ecran-relances .liste-relances { flex: 0 0 auto; height: auto; }
/* Le pied d'actions reste collé au bas de l'écran pendant que la page défile (§11quater) ; la liste virtualisée défile avec la page : elle n'a pas d'ascenseur propre. */
.ecran-relances > .pied-ecran { position: sticky; bottom: 0; z-index: 5; background: var(--fond-carte, var(--fond)); padding: 6px 0; border-top: 1px solid var(--bord); }

/* ===== Choix d'un fournisseur au fil de la frappe (Nouvelle commande, abonnements) ===== */
.choix-fournisseur .liste-suggest { max-height: 320px; overflow-y: auto; }
.choix-fournisseur .liste-suggest li.entete-suggest { cursor: default; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.choix-fournisseur .liste-suggest li.bloque { color: var(--texte-doux); text-decoration: line-through; cursor: not-allowed; }

/* ===== Contrats récurrents : le pied d'actions reste en bas de l'écran (§11quater), quelle que soit la hauteur du contenu ===== */
.ecran-stockages.a-facturer > .pied-ecran, .ecran-stockages.abonnements > .pied-ecran, .ecran-stockages.indicateurs-recurrents > .pied-ecran { margin-top: auto; }
.ecran-stockages.enrichissement > .pied-ecran, .ecran-veille > .pied-ets { margin-top: auto; }
/* Ces trois écrans défilent en entier : le pied y reste collé en bas, comme .ecran-relances et .ecran-ao-hub. */
.ecran-stockages.a-facturer > .pied-ecran, .ecran-stockages.abonnements > .pied-ecran, .ecran-stockages.indicateurs-recurrents > .pied-ecran { position: sticky; bottom: 0; z-index: 5; background: var(--fond-carte, var(--fond)); padding: 6px 0; border-top: 1px solid var(--bord); }
.ecran-stockages.a-facturer, .ecran-stockages.abonnements, .ecran-stockages.indicateurs-recurrents { overflow-y: auto; }
.ecran-stockages.a-facturer > *, .ecran-stockages.indicateurs-recurrents > * { flex-shrink: 0; }

/* ===== Veille des exposants : la santé de la lecture (CHANTIER-veille-exposants §15, point 4) ===== */
.sante-veille { margin: 6px 0; }
.sante-veille.saine .entete-volet { border-left: 3px solid var(--vert); }
.sante-veille .alerte-texte { color: var(--rouge); font-weight: 600; }
.ecran-relances .relances-pac .corps-volet { overflow: visible; }
.ecran-relances .liste-relances { flex: 0 0 auto; height: clamp(320px, 62vh, 960px); }
/* Cadre : la barre d'état passe à la ligne au lieu d'être coupée sous 1 348 px. */
.barre-etat { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 2px; }
.barre-etat > span { white-space: nowrap; }

/* Onglets vivants : chacun garde son composant et son défilement ; l'onglet qu'on quitte est masqué, pas détruit. */
.contenu.avec-onglets { overflow: hidden; }
.onglet-vivant { height: 100%; overflow: auto; }
.onglet-vivant.onglet-masque { display: none; }

/* Devis : le PU saisi garde la place de ses chiffres (tronqué à 1280 px). */
td.col-montant input.saisie-qte { min-width: 6.5rem; width: 100%; box-sizing: border-box; }

/* Le menu de période s'ouvre sous son bouton, pas dans le coin de la fenêtre. */
.pave-mois { position: relative; }
.pave-mois .menu-contextuel.menu-periode { position: absolute; top: 100%; left: 0; }

/* Fiche client, onglet Général : les deux tables du bas gardent une hauteur lisible à 1280x800 (elles tombaient à 0-8 px). */
.p11-affaires .table-p11, .p11-historique .table-p11 { min-height: 7rem; }
.p11-affaires, .p11-historique { min-height: 9rem; }

/* ===== Mission récurrente : la prestation au volume et sa grille tarifaire (tunnel Nouveau projet, fiche de l'affaire) ===== */
.mission-recurrente .grille-tarifaire { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.mission-recurrente .grille-tarifaire .palier { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mission-recurrente .grille-tarifaire .palier input { width: 90px; }

/* ===== Partage vertical (PartageVertical.razor) : zone haute, barre glissable, zone basse à défilement propre ===== */
.corps-volet.corps-partage { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.partage-vertical { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.partage-haut { flex: none; overflow: auto; padding: 8px 12px 0; }
.partage-haut.replie { height: auto !important; overflow: visible; }
.partage-barre { flex: none; height: 10px; display: flex; align-items: center; justify-content: center; cursor: row-resize;
    background: var(--fond-gris); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); touch-action: none; }
.partage-barre:hover, .partage-barre.tient, .partage-barre:focus-visible { background: var(--accent-clair); outline: none; }
.partage-barre .partage-grip { transform: rotate(90deg); color: var(--texte-faible); }
.partage-bas { flex: 1; min-height: 0; overflow: auto; padding: 0 12px; }
.partage-bas .reglable thead th, .partage-bas .table-droits thead th { position: sticky; top: 0; z-index: 2; }
.catalogue-resume { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.catalogue-replier { margin-left: 12px; font-weight: 400; font-size: 12px; }

/* ===== Commerciaux associés sur une ligne (CommerciauxAssocies.razor) ===== */
.commerciaux-associes.compact { padding: 4px 0; }
.commerciaux-associes .assoc-ligne { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.commerciaux-associes .assoc-ligne.deplie { flex-wrap: wrap; overflow: visible; }
.commerciaux-associes .assoc-libelle { font-weight: 600; margin-right: 4px; flex: none; }
.commerciaux-associes .assoc-etiquette.court { padding: 1px 2px 1px 8px; gap: 3px; flex: none; }
.commerciaux-associes .assoc-plus { flex: none; min-height: 0; height: 24px; padding: 0 8px; border: 1px solid var(--bord-fort); border-radius: 12px;
    background: var(--fond-carte); color: var(--texte); cursor: pointer; font: inherit; }
.commerciaux-associes .assoc-plus:hover:not(:disabled) { background: var(--accent-clair); }

/* ===== Prospects (PacProspects.razor, H7) : filtres, note ===== */
.note-prospect { display: inline-block; min-width: 34px; text-align: center; padding: 1px 6px; border-radius: 10px; background: var(--accent-clair); cursor: help; }

/* ===== PAC en deux modes (H9) : le sélecteur Construire / Agir ===== */
.modes-pac { display: inline-flex; gap: 4px; align-items: center; margin-left: 8px; }
.hs-panneau.hs-relances { padding: 0; }
/* L'écran Relances dans le mode Agir : toute la hauteur disponible, la liste défile dedans (H9). */
.hs-panneau.hs-relances { display: flex; flex-direction: column; overflow: hidden; }
.hs-panneau.hs-relances > .ecran-relances { flex: 1 1 0; min-height: 0; height: auto; }
/* Un panneau caché reste caché : la règle display:flex ci-dessus est plus loin dans le fichier que .hs-cache et l'emportait (Relances visibles sous Prospects). */
.hs-panneau.hs-relances.hs-cache { display: none; }

/* ===== Veille des exposants : la section repliée des salons sans enjeu (V5, piste 1) ===== */
.veille-sans-enjeu { margin-top: 10px; border-top: 1px solid var(--bord); padding-top: 6px; }
.veille-sans-enjeu > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }

/* ===== Santé de la lecture : une ligne au-dessus des onglets, le détail dans son onglet (V5) ===== */
.sante-resume { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 8px; border: 1px solid var(--bord); border-left: 3px solid var(--accent); border-radius: 4px; background: var(--fond-carte); flex: none; }
.sante-resume.saine { border-left-color: var(--vert); }
.sante-resume .sante-jeton { cursor: pointer; border: 0; font: inherit; }
.veille-sante-onglet { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.veille-sante-onglet .sante-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.veille-sante-onglet .sante-detail .corps-volet { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.veille-sante-onglet .sante-table { flex: 1; min-height: 0; overflow: auto; }

/* ===== La chasse au registre (H11) : barre de filtres compacte repliable, liste pleine hauteur à gauche, fiche à droite (§11nonies) ===== */
.prospects-ecran { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.hs-panneau > .prospects-ecran { flex: 1 1 0; }
.prospects-barre { flex: none; padding: 6px 10px; }
.prospects-filtres-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.prospects-champ-groupe { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prospects-etiquette { font-size: 11px; opacity: .7; }
.prospects-segments { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.prospects-champ-court { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.prospects-champ-court input[type=number] { width: 64px; }
.prospects-champ-court .case-ligne { margin-left: 6px; font-size: 12px; }
.prospects-chercher { margin-left: auto; flex: none; }
.prospects-menu { position: relative; }
.prospects-menu > summary { cursor: pointer; list-style: none; padding: 3px 10px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); white-space: nowrap; }
.prospects-menu[open] > summary { border-color: var(--accent); }
.prospects-menu-corps { position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; min-width: 260px; max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 3px;
    padding: 8px 10px; background: var(--fond-carte); border: 1px solid var(--bord); border-radius: var(--r); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.prospects-avance { margin-top: 6px; border-top: 1px solid var(--bord); padding-top: 6px; }
.prospects-avance > summary { cursor: pointer; font-size: 12px; opacity: .8; }
.prospects-pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.prospects-pastille { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 8px; border-radius: 10px; background: var(--accent-clair); }
.prospects-pastille button { border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; color: inherit; }
.prospects-saisie-departement { width: 170px; }
.prospects-resume { display: flex; align-items: center; gap: 12px; }
.prospects-resume-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prospects-etat { flex: none; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.prospects-corps { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 4fr); gap: 8px; }
.prospects-liste-cadre { min-height: 0; display: flex; flex-direction: column; }
.prospects-liste { flex: 1 1 0; min-height: 0; overflow: auto; }
.prospects-liste thead th { position: sticky; top: 0; z-index: 1; background: var(--fond-carte); }
.prospects-fiche { min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.prospects-fiche .corps-volet { flex: none; max-height: none; overflow: visible; }
/* Les champs du plan suivent la fiche sans la recouvrir ; c'est la fiche entiere qui defile. */
.prospects-fiche > .prospects-plan { flex: none; margin: 0; padding: 8px 10px; border-top: 1px solid var(--bord); grid-template-columns: 150px minmax(0, 1fr); }
.prospects-plan dd { display: flex; align-items: center; gap: 6px; margin: 0; }
.champs-fiche.prospects-plan input, .champs-fiche.prospects-plan select { width: 150px; }
.prospects-fiche-note { display: flex; align-items: baseline; gap: 6px; font-size: 18px; margin-bottom: 6px; }
.prospects-part { display: grid; grid-template-columns: 150px minmax(60px, 1fr) 54px; gap: 2px 8px; align-items: center; margin-bottom: 4px; }
.prospects-part-jauge { height: 8px; border-radius: 4px; background: var(--pac-jauge-fond, #ddd); overflow: hidden; }
.prospects-part-jauge > span { display: block; height: 100%; background: var(--pac-jauge, #7fa7d8); }
.prospects-part-explication { grid-column: 1 / -1; }
.prospects-identite { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 3px 10px; margin: 10px 0; }
.prospects-identite dt { opacity: .7; }
.prospects-identite dd { margin: 0; min-width: 0; }
.prospects-signaux { margin: 4px 0 0; padding-left: 18px; }
.prospects-fiche-actions { flex: none; display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 8px 10px; border-top: 1px solid var(--bord); position: sticky; bottom: 0; background: var(--fond-carte); }
@media (max-width: 1100px) { .prospects-corps { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(140px, 3fr) minmax(0, 2fr); } }

/* ===== Mes secteurs en liste compacte (une ligne par secteur, barre proportionnelle au chiffre) ===== */
.secteurs-liste { display: flex; flex-direction: column; }
.secteur-ligne { display: grid; grid-template-columns: minmax(150px, 1.5fr) minmax(80px, 2fr) 96px 52px 62px 96px 62px 92px auto; align-items: center; gap: 8px; min-height: 30px;
    padding: 2px 8px; border: 0; border-bottom: 1px solid var(--bord); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.secteur-ligne:hover { background: var(--accent-clair); }
.secteur-ligne.choisie { background: var(--accent-clair); box-shadow: inset 3px 0 0 var(--accent); }
.secteur-ligne.a-part { opacity: .6; }
.secteur-ligne .libelle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secteur-ligne .num { text-align: right; white-space: nowrap; }
.secteur-barre { height: 10px; border-radius: 5px; background: var(--pac-jauge-fond, #e3e3e3); overflow: hidden; }
.secteur-barre > span { display: block; height: 100%; background: var(--pac-jauge, #7fa7d8); }
.secteur-autres { grid-template-columns: minmax(150px, 1.5fr) minmax(80px, 2fr) 96px; font-style: italic; }

/* ===== La fiche de chasse de l'entité (HS-02) ===== */
.fiche-chasse-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 14px; margin: 8px 0 12px; }
.fiche-chasse-grille label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.fiche-chasse-secteurs { max-width: 900px; margin-top: 4px; }
.fiche-chasse-secteurs input[type=number] { width: 80px; }
.fiche-chasse-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* ===== Mes secteurs et Développement en deux colonnes : la liste à gauche, la place pour le travail à droite (comme la veille des salons) ===== */
.hs-panneau.hs-deux-colonnes { display: grid; grid-template-columns: minmax(280px, 3fr) minmax(0, 7fr); gap: 8px; overflow: hidden; align-items: stretch; }
.hs-panneau.hs-deux-colonnes.hs-cache { display: none; }
.hs-deux-colonnes > .cadre { min-height: 0; margin: 0; display: flex; flex-direction: column; overflow: auto; }
.hs-deux-colonnes .corps-colonne { flex: 1 1 0; min-height: 0; overflow: auto; }
.hs-deux-colonnes .hs-colonne-droite > .corps-volet { flex: 1 1 auto; max-height: none; overflow: auto; min-height: 0; }
.hs-deux-colonnes .hs-colonne-droite thead th { position: sticky; top: 0; z-index: 1; background: var(--fond-carte); }
.hs-deux-colonnes .secteur-ligne { grid-template-columns: minmax(90px, 1.4fr) minmax(40px, 1fr) 84px 64px; }
.hs-deux-colonnes .secteur-piste { grid-template-columns: minmax(90px, 1.4fr) minmax(40px, 1fr) 64px 56px; }
.hs-deux-colonnes .secteur-autres { grid-template-columns: minmax(90px, 1.4fr) minmax(40px, 1fr) 84px; }
.secteur-alerte { margin-bottom: 6px; padding: 3px 8px; border-radius: 4px; background: var(--fond-attention); color: var(--texte-attention); }
.secteur-tous { font-weight: 600; }
@media (max-width: 1100px) { .hs-panneau.hs-deux-colonnes { grid-template-columns: minmax(0, 1fr); overflow: auto; } .hs-deux-colonnes > .cadre { overflow: visible; } }

/* ===== Clients à travailler (Mes secteurs) : un en-tête sur une ligne, le secteur toujours visible, lignes régulières de 30 px ===== */
.pastille-secteur { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--secteur, var(--accent)); flex: none; vertical-align: baseline; }
.hs-entete-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
.hs-entete-ligne .pousse { flex: 1; }
.hs-secteur-courant { display: inline-flex; align-items: center; color: var(--texte); opacity: .85; }
.hs-segmente { display: inline-flex; border: 1px solid var(--bord-fort); border-radius: var(--r); overflow: hidden; }
.hs-segmente > button { border: 0; border-right: 1px solid var(--bord); background: transparent; color: inherit; font: inherit; padding: 2px 10px; cursor: pointer; }
.hs-segmente > button:last-child { border-right: 0; }
.hs-segmente > button.actif { background: var(--accent-clair); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.hs-info { cursor: help; opacity: .7; }
table.hs-clients tbody tr { height: 30px; }
table.hs-clients tbody tr:nth-child(even):not(.hs-groupe) { background: color-mix(in srgb, var(--accent-clair) 35%, transparent); }
table.hs-clients td.hs-choix, table.hs-clients td.hs-action { width: 34px; text-align: center; }
table.hs-clients td.hs-secteur { white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
table.hs-clients .hs-saisie { width: 84px; text-align: right; }
.hs-segment { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--bord-fort); cursor: help; }
.hs-segment.segment-cr { background: color-mix(in srgb, #2e9e4f 18%, transparent); border-color: #2e9e4f; }
.hs-segment.segment-ar { background: color-mix(in srgb, #d99a1c 20%, transparent); border-color: #d99a1c; }
.hs-segment.segment-nouveau { background: color-mix(in srgb, #2e9e8f 18%, transparent); border-color: #2e9e8f; }
.hs-icone { cursor: help; color: var(--texte-attention); margin-left: 4px; }
.hs-plus { width: 24px; height: 24px; border: 1px solid var(--accent); border-radius: 50%; background: transparent; color: var(--accent); font-size: 16px; line-height: 1; cursor: pointer; }
.hs-plus:hover { background: var(--accent-clair); }
.hs-fait { color: var(--vert); font-weight: 700; }

/* Mes secteurs : de la hauteur pour les clients (l'utilisateur en veut 15 lignes sans défiler à 1906x935) */
.hs-entete-ligne { height: 32px; padding-top: 2px; padding-bottom: 2px; }
.hs-evolution-tous { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }
.hs-evolution-tous input[type=number] { width: 64px; }
table.hs-clients thead th { height: 30px; padding-top: 2px; padding-bottom: 2px; line-height: 1.2; white-space: nowrap; }

/* === PAC · Développement : les en-têtes de la liste des pistes (Secteur, Potentiel, Écart, Entreprises) === */
.hs-deux-colonnes .secteur-piste, .hs-deux-colonnes .secteur-entete { grid-template-columns: minmax(90px, 1.4fr) minmax(40px, 1fr) 84px 84px; }
.secteur-entete { min-height: 24px; font-weight: 600; cursor: default; }
.secteur-entete:hover { background: transparent; }
.secteur-entete > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === PAC · Clients à travailler : ceux qui sont déjà au plan (grisés, sans ajout) === */
.hs-clients tr.hs-deja-au-plan td { opacity: .6; }
.hs-clients tr.hs-deja-au-plan td.hs-action { opacity: 1; }

/* ===== PAC · Agir · Relances : une liste à gauche, la fiche d'appel à droite (H9, refonte du 2026-10-19) ===== */
.relances-ecran { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.relances-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.relances-liste-fiche { grid-template-columns: minmax(0, 1fr) clamp(400px, 34vw, 640px); align-items: stretch; }
@media (max-width: 1100px) { .relances-liste-fiche { grid-template-columns: 1fr; } }
.relances-table tbody tr { height: 30px; }
.relances-table td { padding-top: 0; padding-bottom: 0; }
.relances-table tbody tr:nth-child(even):not(.choisi) { background: var(--fond-gris); }
.relances-table td.nom-cible { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relances-table td.pourquoi-court { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relances-table td.col-type-ligne { width: 1%; white-space: nowrap; }
.relances-table td.retard { color: var(--texte-danger); font-weight: 600; }
.type-ligne { display: inline-block; padding: 0 8px; line-height: 18px; border-radius: 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.type-relance { background: var(--fond-attention); color: var(--texte-attention); }
.type-cible { background: var(--fond-info); color: var(--texte-info); }
.type-devis { background: var(--fond-succes); color: var(--texte-succes); }
.fiche-appel { display: flex; flex-direction: column; min-height: 420px; max-height: calc(100vh - 250px); }
.fiche-appel-entete { padding: 8px 12px; border-bottom: 1px solid var(--bord); }
.fiche-appel-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fiche-appel-titre > b { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-note { padding: 0 8px; border-radius: 10px; background: var(--accent-clair); color: var(--accent-fonce); font-weight: 700; }
.fiche-appel-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 12px 10px; }
.fiche-appel-rubrique { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--texte-doux); }
.contact-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 3px 0; }
.contact-tel, .contact-mail { color: var(--accent-texte, var(--accent)); }
.signal-carte { margin: 4px 0; padding: 6px 10px; border: 1px solid var(--bord); border-left: 3px solid var(--accent); border-radius: var(--r); background: var(--fond-gris); }
.avec-ce-client dd { margin-bottom: 4px; }
.fiche-appel-retours { padding: 10px 12px; border-top: 1px solid var(--bord); background: var(--fond-carte); }
.retours-boutons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1500px) { .retours-boutons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.retours-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.btn-retour { min-height: 44px; padding: 4px 8px; border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer; }
.btn-retour:hover:not(:disabled) { background: var(--accent-survol); border-color: var(--accent); }
.btn-retour:disabled { opacity: .55; cursor: default; }
.btn-retour.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-retour.refus { border-color: var(--bord-danger); background: var(--fond-danger); color: var(--texte-danger); }
.retours-detail .btn-retour { min-height: 34px; }
.signaux-cartes { display: flex; flex-direction: column; }
.argumentaire p { margin: 0 0 4px; }
.argumentaire ul { margin: 4px 0 0; padding-left: 18px; }

/* === PAC · Fiche de chasse et barre de recherche : formulaire, filtres déroulants, pastilles, sélecteur de secteurs, zone === */
.formulaire-chasse { max-width: 1000px; display: flex; flex-direction: column; gap: 14px; }
.fc-carte { border: 1px solid var(--bord-fort); border-radius: 8px; padding: 12px 16px 14px; background: var(--fond-carte, transparent); }
.fc-carte > .fc-titre { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 8px; }
.fc-ligne { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; padding: 8px 0; border-top: 1px solid var(--bord, rgba(128,128,128,.25)); align-items: start; }
.fc-ligne:first-of-type { border-top: 0; }
.fc-ligne > .fc-libelle { font-weight: 600; padding-top: 6px; }
.fc-ligne > .fc-controle { min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.fc-ligne > .fc-aide { grid-column: 2; color: var(--texte-doux); font-size: 12px; }
.fc-ligne input[type=number] { width: 90px; }
.fc-bandeau { padding: 8px 12px; border-radius: 6px; background: var(--accent-clair); }
.fc-avance { margin-top: 6px; }
.fc-avance > summary { cursor: pointer; color: var(--texte-doux); padding: 4px 0; }
.fc-barre-poids { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
@media (max-width: 720px) { .fc-ligne { grid-template-columns: 1fr; } .fc-ligne > .fc-aide { grid-column: 1; } }

.pastille-choix { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--bord-fort); border-radius: 14px; background: var(--accent-clair); white-space: nowrap; }
.pastille-choix > button { border: 0; background: transparent; cursor: pointer; color: var(--texte-doux); padding: 0 6px; font-size: 14px; line-height: 1; }
.pastille-choix > button:hover { color: var(--texte); }
.pastille-nouveau { font-style: normal; font-size: 11px; border: 1px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 0 5px; }
.pastilles-secteurs, .zone-pastilles { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zone-chasse { display: flex; flex-direction: column; gap: 6px; }
.zone-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; }
.zone-ajout { min-width: 210px; }

.selecteur-secteurs { display: flex; flex-direction: column; gap: 8px; min-width: 420px; }
.selecteur-liste { max-height: 340px; overflow: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 4px; }
.selecteur-liste .case-ligne { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.selecteur-libelle { flex: 1; min-width: 0; }
.selecteur-ligne { display: flex; align-items: center; gap: 2px; }
.selecteur-ouvrir { border: 0; background: transparent; cursor: pointer; width: 22px; color: var(--texte-doux); }
.selecteur-noeud.niveau2 { margin-left: 18px; }
.case-ligne.niveau3 { margin-left: 44px; }
.selecteur-recherche { width: 100%; }

.filtre-deroulant { position: relative; display: inline-block; }
.filtre-bouton { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--bord-fort); border-radius: 6px; background: transparent; cursor: pointer; max-width: 320px; }
.filtre-bouton:hover, .filtre-bouton.ouvert { background: var(--accent-clair); }
.filtre-bouton.actif { border-color: var(--accent); }
.filtre-etiquette { font-weight: 600; }
.filtre-resume { color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.filtre-bouton.actif .filtre-etiquette { color: var(--accent); }
.filtre-fleche { color: var(--texte-doux); }
.filtre-fond { position: fixed; inset: 0; z-index: 30; background: transparent; }
.filtre-panneau { position: absolute; top: calc(100% + 4px); left: 0; z-index: 31; min-width: 360px; max-width: min(640px, 90vw); padding: 12px; border: 1px solid var(--bord-fort); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); background: var(--fond-carte); }

/* La Fiche de chasse : deux cartes l'une sous l'autre, 1000 px au plus. */
.hs-fiche-chasse { display: flex; flex-direction: column; gap: 14px; }
.hs-fiche-chasse .formulaire-chasse { max-width: none; }
/* Fiche de chasse de la PAC : sur toute la largeur de l'onglet (demande de l'utilisateur, 2026-10-23). */
.hs-fiche-chasse .fiche-chasse-secteurs { max-width: none; }

/* === PAC · Développement : la fiche d'un secteur === */
.fiche-secteur-corps { display: flex; flex-direction: column; gap: 10px; }
.fiche-secteur-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tuile-chiffre { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--bord-fort); border-radius: 8px; background: var(--fond-carte); }
.tuile-chiffre > b { font-size: 20px; line-height: 1.2; }
.fiche-secteur-barres { display: flex; flex-direction: column; gap: 4px; }
.fiche-secteur-barres > div { display: grid; grid-template-columns: 70px minmax(60px, 1fr) 64px; gap: 8px; align-items: center; }
.fiche-secteur-repartitions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.fiche-secteur-repartition { display: flex; flex-direction: column; gap: 3px; }
.repartition-ligne { display: grid; grid-template-columns: minmax(80px, 1.3fr) minmax(40px, 1fr) 46px; gap: 6px; align-items: center; }
.repartition-libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repartition-ligne .petit { text-align: right; }
.fiche-secteur-mini { display: inline-flex; align-items: flex-end; gap: 6px; height: 40px; margin-right: 10px; vertical-align: middle; }
.mini-barre { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 34px; }
.mini-barre > i { display: block; width: 18px; background: var(--pac-jauge, #7fa7d8); border-radius: 2px 2px 0 0; }
.argumentaire-phrase { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--accent-clair); }

/* === PAC · La barre de recherche des prospects : une ligne de filtres déroulants === */
.barre-filtres { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px; }
.barre-filtres .prospects-chercher { height: 32px; }
/* La barre est aussi un .cadre (colonne, contenu rogne) : elle reste en ligne et laisse deborder ses panneaux. */
.cadre.barre-filtres { flex-direction: row; flex: none; overflow: visible; }
.prospects-filtre-panneau { display: flex; flex-direction: column; gap: 10px; min-width: 380px; }
.prospects-filtre-panneau label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prospects-filtre-panneau input[type=number] { width: 90px; }
@media (max-width: 900px) { .barre-filtres { flex-wrap: wrap; } }

/* Enrichissement par le registre (H12 / P5) : la case de filtre du bandeau, et la ligne qui écraserait une valeur existante. */
.case-filtre { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.enrichissement tr.conflit td { background: var(--fond-attention); }

/* ===== Agir : les colonnes de texte libre se coupent (texte complet en info-bulle), les colonnes courtes gardent leur contenu, la table défile au besoin (revue graphique du 2026-10-19) ===== */
.relances-ecran .hs-liste .corps-volet { overflow-x: auto; }
.relances-table th { white-space: nowrap; }
.relances-table td.col-code, .relances-table td.tri-pac-num { white-space: nowrap; }
.relances-table td.hs-secteur { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-relances td.lib { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-relances td.lib > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-relances td.col-date, .ecran-relances td.col-part, .ecran-relances td.col-qualif, .ecran-relances td.col-case { width: 1%; white-space: nowrap; }
.ecran-relances .liste-relances .corps-volet { overflow-x: auto; }

/* PAC · À conquérir : le secteur de l'entreprise, pastille et nom sur une ligne. */
td.prospect-secteur { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* Revue graphique de la PAC (2026-10-19) : la colonne des secteurs garde des libelles lisibles, la liste du tri garde de la hauteur. */
@media (min-width: 1101px) {
    .hs-panneau.hs-deux-colonnes { grid-template-columns: minmax(380px, 4fr) minmax(0, 6fr); }
    .hs-deux-colonnes .secteur-ligne { grid-template-columns: minmax(150px, 1.6fr) minmax(40px, 1fr) 84px 64px; }
    .hs-deux-colonnes .secteur-piste { grid-template-columns: minmax(150px, 1.6fr) minmax(40px, 1fr) 64px 56px; }
    .hs-deux-colonnes .secteur-autres { grid-template-columns: minmax(150px, 1.6fr) minmax(40px, 1fr) 84px; }
}
.hs-deux-colonnes .secteur-ligne .libelle { white-space: normal; line-height: 1.2; }
.tri-pac { overflow-y: auto; }
.tri-pac-liste { flex: 1 0 320px; }
.tri-pac-suggestions { max-height: 120px; overflow-y: auto; }

/* Entreprises semblables (P3) : le bandeau de la recherche et le lien de la ligne client. */
.prospects-semblables { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--accent-clair); }
.hs-semblables { display: block; font-size: 12px; }

/* Le plan mois par mois (P4) : le repere mensuel et les mois creux du Recap. */
.recap-pac-barres { position: relative; }
.recap-pac-repere { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--texte-doux); pointer-events: none; }
.recap-pac-col.creux > span { color: var(--texte-danger); font-weight: 700; }
.recap-pac-creux { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 6px 12px; }

/* Recette tour 2 (N1, N2) : une barre de filtres et un bandeau restent sur une ligne sous .cadre (colonne). */
.cadre.barre-filtres { flex-direction: row; flex: none; overflow: visible; }
.cadre.hs-bandeau { flex-direction: row; flex: none; }

/* Liste des prospects : une ligne de la liste = une ligne de texte (le detail est dans la fiche a droite et en info-bulle). */
.prospects-liste td { white-space: nowrap; }
.prospects-liste td.prospect-signaux { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.prospects-liste td.lib { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }

/* Fiche d'appel : un mot très long (adresse, courriel, note collée) se coupe au lieu de déborder du volet (recette 2026-10-19, N21). */
.fiche-appel-corps, .signal-carte, .argumentaire { overflow-wrap: anywhere; }
.fiche-appel-corps { overflow-x: hidden; }

/* PAC · Clients à travailler : les files ne se laissent jamais écraser ; faute de place, l'en-tête passe sur deux lignes. */
.hs-segmente { flex: none; }
.entete-volet.hs-entete-ligne { flex-wrap: wrap; height: auto; min-height: 32px; row-gap: 4px; }

/* Recap (N17) : le libelle d'une barre passe sur deux lignes plutot que d'etre coupe. */
.recap-pac-barre { grid-template-columns: 18rem minmax(0, 1fr) 8rem; }
.recap-pac-libelle { white-space: normal; line-height: 1.2; }
/* ===== Appels d'offres (FEN_AO_Veille_BOAMP, FEN_AO_Fiche) : la veille dans la PAC, la fiche en démarche ===== */
.ao-statut { display: inline-block; padding: 1px 8px; border: 1px solid var(--bord); border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--fond-gris); color: var(--texte-doux); }
.ao-statut-bleu { background: var(--fond-info); border-color: var(--fond-info-fort); color: var(--texte-info); }
.ao-statut-ambre { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--texte-attention); }
.ao-statut-vert { background: var(--fond-succes); border-color: var(--bord-succes); color: var(--texte-succes); }
.ao-statut-rouge { background: var(--fond-danger); border-color: var(--bord-danger); color: var(--texte-danger); }
.ao-statut-violet { background: color-mix(in srgb, #7b4fbf 14%, var(--fond-carte)); border-color: color-mix(in srgb, #7b4fbf 35%, var(--bord)); color: color-mix(in srgb, #7b4fbf 65%, var(--texte)); }

.ao-filtres { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; align-items: end; padding: 8px 12px 10px; border-bottom: 1px solid var(--bord); }
.ao-filtres-boutons { display: flex; gap: 8px; align-items: end; }
.ao-champ { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; color: var(--texte-doux); }
.ao-champ > span { font-weight: 600; }
.ao-champ input[type="text"], .ao-champ input[type="date"], .ao-champ input[type="time"], .ao-champ input[type="number"], .ao-champ select, .ao-champ textarea { min-width: 0; width: 100%; }
.ao-champ textarea { resize: vertical; }
.ao-large { grid-column: span 2; }
.ao-case { flex-direction: row; align-items: center; gap: 6px; }
.ao-case > span { font-weight: 400; }
td.ao-actions { white-space: nowrap; text-align: right; }
td.ao-actions > * + * { margin-left: 8px; }
td.alerte { color: var(--orange); font-weight: 600; }

.ecran-ao-fiche { display: flex; flex-direction: column; gap: 10px; }
.ao-bandeau { padding: 8px 12px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); }
.ao-bandeau-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ao-reference { font-size: 15px; }
.ao-limite.retard { color: var(--rouge); font-weight: 700; }
.ao-objet { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte-doux); }
.ao-demarche { padding: 10px 12px; }
.ao-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ao-etape { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-gris); min-width: 0; }
.ao-etape-rond { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--bord); color: var(--texte-doux); }
.ao-etape-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.ao-etape-etat { color: var(--texte-faible); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.ao-etape-phrase { color: var(--texte-doux); overflow-wrap: anywhere; }
.ao-etape-fait { border-color: var(--bord-succes); }
.ao-etape-fait .ao-etape-rond { background: var(--vert); color: #fff; }
.ao-etape-afaire { border-color: var(--accent); background: var(--accent-survol); }
.ao-etape-afaire .ao-etape-rond { background: var(--accent); color: #fff; }
.ao-etape-bloque { border-color: var(--bord-danger); background: var(--fond-danger); }
.ao-etape-bloque .ao-etape-rond { background: var(--rouge); color: #fff; }
html[data-theme="sombre"] .ao-etape-bloque .ao-etape-rond { color: #1b1a19; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .ao-etape-bloque .ao-etape-rond, html[data-theme="auto"] .aof-etape-bloque .ao-etape-rond { color: #1b1a19; } }
.ao-etape-abientot, .ao-etape-enattente { opacity: .75; }
.ao-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ao-motif { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-width: 640px; }
.ao-motif textarea { width: 100%; resize: vertical; }
.ao-general { display: flex; flex-direction: column; gap: 10px; }
.ao-groupe { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; margin: 0; padding: 8px 12px 12px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); }
.ao-groupe > legend { padding: 0 6px; font-weight: 700; color: var(--texte-doux); }
.ao-groupe .ao-large { grid-column: 1 / -1; }
.ao-jalon { font-size: 12px; font-weight: 600; }
.ao-jalon-fait { color: var(--texte-succes); }
.ao-jalon-encours { color: var(--orange); }
.ao-jalon-annule { color: var(--rouge); }
@media (max-width: 1100px) { .ao-etapes { grid-template-columns: 1fr; } }
/* PAC : regles communes aux tableaux et aux boutons (revue graphique du 2026-10-19, sections « Incohérences transversales » 5, 6, 9 et thème clair).
   Posees une fois pour tous les onglets ; les ecrans en refonte (Aujourd'hui, Relances) n'ont qu'a s'y ranger. */
.ecran-pac { --pac-ligne: 26px; --pac-bouton: 32px; }
/* L'en-tete d'une colonne de chiffres s'aligne comme ses cellules (classe de colonne tri-pac-num), quel que soit le tableau. */
.ecran-pac th.tri-pac-num { text-align: right; }
.ecran-pac th.tri-pac-num .poignee-colonne { right: 0; }
/* Une hauteur de ligne et un zebrage communs ; un texte long grandit la ligne mais ne definit pas la norme. */
.ecran-pac .reglable tbody tr, .ecran-pac .tri-pac-table tbody tr { height: var(--pac-ligne); }
.ecran-pac .reglable td { padding-block: 3px; vertical-align: middle; }
:where(.ecran-pac .reglable tbody tr:nth-child(even)) > td { background: var(--fond-gris); }
/* Une hauteur de bouton pour les filtres et les actions de ligne. */
.ecran-pac .tri-pac-filtre, .ecran-pac .tri-pac-bouton, .ecran-pac .tri-pac-bouton-groupe {
    box-sizing: border-box; min-height: var(--pac-bouton); height: var(--pac-bouton); padding-block: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
/* Thème clair : colonnes « code » et pastille « non figée » sous 4,5:1 avec --texte-faible (#8a8886 sur blanc : 3,4:1). */
.ecran-pac .col-code, .ecran-pac td.col-code { color: var(--texte-doux); }
.ecran-pac .jeton.absent { color: var(--texte-doux); }

/* Fiche du secteur (N11) : la conclusion en une ligne, le detail du calcul discret sous les tuiles. */
.fiche-secteur-corps .hs-pourquoi { margin: 0 0 .5rem; font-weight: 600; }
.fiche-secteur-calcul { margin: .35rem 0 .5rem; }

/* Recette tour 2 (Q4) : la colonne Societe ne passe plus sur plusieurs lignes (la regle generale de .secteur-pac la repliait) ; a 1024 la fiche garde une hauteur lisible. */
.secteur-pac .prospects-liste .reglable td, .secteur-pac .prospects-liste .reglable td.lib { white-space: nowrap; }
@media (max-width: 1100px) { .prospects-corps { grid-template-rows: minmax(150px, 1fr) minmax(240px, 1fr); overflow: auto; } }

/* PAC : defiger (GESTIONBASE) - le motif sous le texte de la boite. */
.defigeage-motif { display: block; margin-top: .75rem; }
.defigeage-motif input { display: block; width: 100%; margin-top: .25rem; }

/* PAC : chacun ses secteurs - qui d'autre suit un secteur ; 'personne' en evidence dans la fiche de chasse. */
.secteur-suivi { white-space: nowrap; }
.fiche-secteur-suivi { margin: 0 0 .5rem; }
.suivi-personne { font-weight: 600; color: var(--texte-attention); }

/* PAC Développement : choix libre d un secteur (N27) */
.secteur-ajout { padding: 6px 8px; }
.secteur-ajout select { width: 100%; }
/* ===== FEN_AO_Entreprise : le dossier de l'entreprise (appels d'offres) ===== */
.ecran-ao-dossier .ao-liste { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ecran-ao-dossier .ao-titre-liste { margin: 8px 0 0; font-size: 13px; color: var(--texte-doux); }
.ecran-ao-dossier .ao-edition { margin-top: 6px; }
.ao-echeance { font-size: 12px; font-weight: 600; }
.ao-echeance-valide { color: var(--texte-succes); }
.ao-echeance-proche { color: var(--orange); }
.ao-echeance-expire { color: var(--rouge); }
.ao-echeance-sans { color: var(--texte-doux); }
.ao-synchro { margin: 6px 0 0; padding-left: 18px; max-height: 40vh; overflow-y: auto; }

/* ===== FEN_AO_Hub : le tableau de bord des appels d'offres ===== */
.ecran-ao-hub { display: flex; flex-direction: column; gap: 10px; }
.ecran-ao-hub .ao-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ecran-ao-hub .ao-carte { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); min-width: 0; }
.ecran-ao-hub .ao-carte-titre { font-size: 12px; font-weight: 600; color: var(--texte-doux); }
.ecran-ao-hub .ao-carte-valeur { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ecran-ao-hub .ao-pipeline-titre { font-size: 12px; font-weight: 600; color: var(--texte-doux); margin-bottom: 6px; }
.ecran-ao-hub .ao-pipeline-barre { display: flex; min-height: 26px; border-radius: var(--r); overflow: hidden; }
.ecran-ao-hub .ao-troncon { min-width: 6px; padding: 4px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--fond-gris); color: var(--texte); }
.ecran-ao-hub .ao-troncon-ambre { color: var(--orange); }
.ecran-ao-hub .ao-troncon-violet { color: var(--accent-texte); }
.ecran-ao-hub .ao-troncon-vert { color: var(--texte-succes); }
.ecran-ao-hub .ao-troncon-rouge { color: var(--rouge); }
.ecran-ao-hub .ao-alertes { display: flex; flex-direction: column; gap: 6px; }
.ecran-ao-hub .ao-alerte { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.ecran-ao-hub .ao-lanceurs { display: flex; flex-wrap: wrap; gap: 8px; }
.ecran-ao-hub .ao-liste-hub .entete-volet { flex-wrap: wrap; gap: 8px; align-items: end; }
.ao-limite-urgent { color: var(--rouge); font-weight: 700; }
.ao-limite-proche { color: var(--orange); }

/* PAC Agir : rappel d un secteur a prospecter qui n avance pas (tranche 3) */
.rappel-secteur { padding: 4px 10px; color: var(--texte-attention); }
.recap-pac-secteurs-prospectes ul { margin: 0; padding-left: 18px; }

/* ---- FEN_AO_Fiche : Préparer la candidature (DC1, DC2, DC4) ---- */
.candidature .ao-sous-traitant { margin-top: 8px; border: 1px solid var(--bord); padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.candidature .ao-propositions { list-style: none; margin: 0; padding: 0; width: 100%; max-height: 140px; overflow-y: auto; }
.candidature .ao-resultats { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.candidature .ao-manques ul { margin: 4px 0 0; padding-left: 18px; }
/* Les règles des champs de boîte posaient la case seule sur toute la largeur, son libellé dessous (recette du 2026-10-22). */
.candidature label.ao-case { display: flex; margin: 4px 0; }
.candidature label.ao-case input[type="checkbox"] { width: auto; height: auto; flex: none; }

/* ---- PAC Agir : onglet des appels d'offres, fiche d'appel en une colonne, en-tete des relances visible (N32) ---- */
.hs-panneau.hs-appels { padding: 0; }
.avec-ce-client { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; margin: 0; }
.avec-ce-client dt { color: var(--texte-doux); font-size: 13px; }
.avec-ce-client dd { margin: 0 0 2px; }
.fiche-appel-compte-rendu { margin-top: 4px; }
.fiche-appel-compte-rendu textarea.compte-rendu { display: block; width: 100%; box-sizing: border-box; min-height: 96px; padding: 7px 9px; font: inherit; resize: vertical; }
.fiche-appel-compte-rendu .ligne-boutons { justify-content: flex-end; margin-top: 6px; }
.relances-ecran .hs-liste .corps-volet { overflow: auto; max-height: calc(100vh - 290px); }
.relances-table thead th { position: sticky; top: 0; z-index: 2; background: var(--fond-gris); height: auto; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
/* ---- FEN_AO_Fiche : la fiche d'un appel d'offres pour LIRE et DECIDER (en-tete, frise, cartes) ---- */
.ecran-ao-fiche .ao-champ textarea, .ecran-ao-fiche .ao-motif textarea { font-family: inherit; font-size: inherit; }
.aof-entete { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); }
.aof-entete-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.aof-entete-corps { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px; }
.aof-identite { flex: 1 1 420px; min-width: 0; }
.aof-titre { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.aof-sous-titre { margin-top: 2px; color: var(--texte-doux); overflow-wrap: anywhere; }
.aof-chiffres { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.aof-chiffres dt { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--texte-faible); }
.aof-chiffres dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aof-pastille { margin-left: 6px; font-size: 12px; vertical-align: middle; }
.aof-frise { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.aof-etape { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-gris); min-width: 0; }
.aof-etape-texte { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.aof-etape-texte b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aof-etape-fait { border-color: var(--bord-succes); }
.aof-etape-fait .ao-etape-rond { background: var(--vert); color: #fff; }
.aof-etape-afaire { border-color: var(--accent); background: var(--accent-survol); box-shadow: 0 0 0 1px var(--accent) inset; }
.aof-etape-afaire .ao-etape-rond { background: var(--accent); color: #fff; }
.aof-etape-bloque { border-color: var(--bord-danger); background: var(--fond-danger); }
.aof-etape-bloque .ao-etape-rond { background: var(--rouge); color: #fff; }
html[data-theme="sombre"] .aof-etape-bloque .ao-etape-rond { color: #1b1a19; }   /* blanc sur le rouge clair du mode sombre : 2,9 */
.aof-etape-abientot, .aof-etape-enattente { opacity: .7; }
.aof-phrase { margin: 0; color: var(--texte-doux); }
.aof-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; align-items: start; }
.aof-carte { padding: 10px 14px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); min-width: 0; }
.aof-carte h2 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--texte-doux); }
.aof-liste { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.aof-liste > div { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 8px; }
.aof-liste dt { color: var(--texte-faible); }
.aof-liste dd { margin: 0; overflow-wrap: anywhere; }
.aof-lien { display: inline-block; margin-top: 10px; font-weight: 600; }
.aof-criteres { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.aof-critere-ligne { display: flex; justify-content: space-between; gap: 12px; }
.aof-barre { height: 6px; margin-top: 3px; border-radius: 3px; background: var(--fond-gris); border: 1px solid var(--bord); overflow: hidden; }
.aof-barre > span { display: block; height: 100%; background: var(--accent); }
.aof-calendrier { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 0 0 4px; list-style: none; border-left: 2px solid var(--bord); }
.aof-calendrier li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; position: relative; padding-left: 12px; }
.aof-calendrier .aof-point { position: absolute; left: -9px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.aof-calendrier .passe .aof-point { background: var(--texte-faible); }
.aof-calendrier .passe { opacity: .7; }
.aof-detail summary, .aof-synthese .aof-carte-titre { cursor: pointer; font-weight: 600; }
.aof-detail p { margin: 8px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.aof-annonce { padding: 4px 14px; font-size: 12px; }
.aof-annonce h2 { margin: 0 0 6px; font-size: 12px; font-weight: 700; }
.aof-synthese { padding: 6px 14px; }
.aof-carte-titre { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; }
.aof-carte-corps { padding: 4px 0 6px 20px; }
.aof-arefaire { border-color: var(--bord-attention); }
@media (max-width: 1100px) { .aof-frise { grid-template-columns: 1fr; } .aof-liste > div { grid-template-columns: 1fr; gap: 0; } }

/* ---- Charte : listes deroulantes et champs de saisie, style de base de toute l'application (2026-10-19) ----
   Priorite nulle (:where) : toute regle d'un ecran passe devant. La fleche est une image de fond : une regle d'ecran
   ne pose donc que background-color sur un select, jamais le raccourci background (il effacerait la fleche). ---- */
:where(select) { font: inherit; color: var(--texte); background-color: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: var(--r); min-height: 28px; padding: 3px 26px 3px 8px; cursor: pointer; }
:where(select:not([multiple]):not([size])) { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8886' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px; }
:where(select:hover) { border-color: var(--texte-doux); }
:where(select:focus, input:focus, textarea:focus) { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
:where(select:disabled) { cursor: default; opacity: .7; }
:where(input:not([type]), input[type=text], input[type=search], input[type=date], input[type=number], input[type=email], input[type=tel], input[type=time], textarea) { font: inherit; color: var(--texte); background-color: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: var(--r); padding: 3px 8px; }
:where(input:not([type]), input[type=text], input[type=search], input[type=date], input[type=number], input[type=email], input[type=tel], input[type=time]) { min-height: 28px; box-sizing: border-box; }
/* ---- Relances : fiche d appel, joindre et courriel ---- */
.courriel-appel { margin-top: 8px; }
.copier-coordonnee { margin-left: 4px; font-size: 11px; }
/* ---- FEN_AO_Fiche : synthese du dossier de consultation (H16) ---- */
.synthese-ao { margin: 8px 0; }
.synthese-ao > summary { cursor: pointer; list-style: none; }
.synthese-points { margin: 2px 0 6px; padding-left: 18px; }
.synthese-points li { margin: 2px 0; overflow-wrap: anywhere; }
.synthese-points li.manquant { color: var(--texte-danger); }
.synthese-etat { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: 700; background: var(--accent-clair); color: var(--accent-fonce); }
.synthese-etat.manquant { background: var(--fond-danger); color: var(--texte-danger); }
.dossier-consultation .table-droits { margin-top: 6px; }

/* ---- FEN_AO_Hub : pipeline en barre segmentee et legende (N35) ---- */
.ecran-ao-hub .ao-pipeline-barre { min-height: 16px; background: var(--fond-gris); }
.ecran-ao-hub .ao-troncon { padding: 0; }
.ecran-ao-hub .ao-fond-neutre { background: var(--bord-fort); }
.ecran-ao-hub .ao-fond-gris { background: var(--texte-faible); }
.ecran-ao-hub .ao-fond-ambre { background: var(--orange); }
.ecran-ao-hub .ao-fond-violet { background: var(--accent); }
.ecran-ao-hub .ao-fond-vert { background: var(--texte-succes); }
.ecran-ao-hub .ao-fond-rouge { background: var(--rouge); }
.ecran-ao-hub .ao-pipeline-legende { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.ecran-ao-hub .ao-pipeline-legende li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ecran-ao-hub .ao-pipeline-legende li.vide { color: var(--texte-faible); }
.ecran-ao-hub .ao-pastille { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ecran-ao-hub .ao-carte-titre .aide-pastille { margin-left: 6px; vertical-align: baseline; }

/* ---- Dossier de l'entreprise : check-list des pieces de candidature ---- */
.ao-checklist { margin-bottom: 8px; }
.ao-checklist-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ao-piece { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 4px 0; border-bottom: 1px solid var(--bord); }
.ao-piece-corps { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ao-piece-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 220px; }
.ao-piece-etat { font-size: 12px; font-weight: 700; }
.ao-piece-prete .ao-piece-etat { color: var(--texte-succes); }
.ao-piece-expirebientot .ao-piece-etat, .ao-piece-adater .ao-piece-etat { color: var(--orange); }
.ao-piece-expiree .ao-piece-etat, .ao-piece-manquante .ao-piece-etat { color: var(--texte-danger); }
.ao-pieces-pretes { margin: 4px 0; }
.ecran-ao-hub .ao-carte-pieces .tri-pac-lien { align-self: flex-start; }

/* ---- Previsions : repere « devis different de la prevision » dans la colonne Potentiel (N37) ---- */
.repere-ecart-devis { margin-right: 6px; padding: 0 5px; border: 1px solid var(--bord-fort); border-radius: 8px; background: var(--fond-attention); color: var(--texte-attention); font: inherit; font-weight: 700; line-height: 1.3; cursor: pointer; }
.repere-ecart-devis:hover { border-color: var(--orange); }

/* ---- Fiche client, onglet Historique : le fil mele les actions saisies et les evenements reconstruits (H17) ---- */
.filtre-type-fil { max-width: 220px; }
tr.evenement-fil td { background: var(--fond-gris); }
.pastille-evenement { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: 700; background: var(--accent-clair); color: var(--accent-fonce); }
html[data-theme="sombre"] .pastille-evenement:not(.pastille-facture):not(.pastille-acceptation):not(.pastille-nom):not(.pastille-transfert) { color: var(--accent-texte); }   /* accent foncé sur accent clair : 2,8 en sombre */
.pastille-evenement.pastille-facture { background: var(--fond-succes, var(--accent-clair)); color: var(--texte-succes); }
.pastille-evenement.pastille-acceptation { background: var(--fond-succes, var(--accent-clair)); color: var(--texte-succes); }
.pastille-evenement.pastille-nom, .pastille-evenement.pastille-transfert { background: var(--fond-attention); color: var(--texte-attention); }
.evenement-detail { margin: 6px 0; }
/* PAC, légende des natures du plan (N40) : les secteurs à prospecter, deuxième ton de l'orange des affaires. */
:root { --nat-secteur: #ecc07a; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --nat-secteur: #a8742c; } }
html[data-theme="sombre"] { --nat-secteur: #a8742c; }
.nat-secteur { --nat: var(--nat-secteur); }

/* Fiche fournisseur, onglet Équipes de montage (N38) : les habilitations expirées ou proches se voient. */
.equipe-alerte { color: var(--texte-danger); font-size: .85rem; }
.equipe-specialites { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.equipe-habilitations { display: flex; flex-direction: column; gap: 4px; }
.equipe-habilitation { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.equipe-hab-expiree { color: var(--texte-danger); }
.equipe-hab-proche { color: var(--orange); }
.equipe-hab-valide { color: var(--texte-succes); }


/* ===== Planning de pose (H18 / H19, élément créé de toutes pièces : pas de fenêtre d'origine) =====
   La grille du planning de production, à l'horizontale : une rangée par équipe (ou par client), les jours et les demi-journées en colonnes. Un chantier est une barre continue à la couleur de son client ; à droite, les cartes
   « À planifier ». Les gestes, le menu, la sélection (.pla-*) sont ceux du planning de production. */
.ecran-pose .pose-nav { display: inline-flex; gap: .25rem; }
.ecran-pose .bandeau-fiche select { max-width: 11rem; }
.ecran-pose .pose-bascule { display: inline-flex; align-items: center; gap: .2rem; }
.ecran-pose .pose-bascule button { border: 1px solid var(--bord); background: var(--fond-gris); padding: .15rem .55rem; border-radius: 4px; cursor: pointer; font: inherit; }
.ecran-pose .pose-bascule button.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.ecran-pose .pose-alertes { display: grid; gap: .25rem; margin-bottom: .5rem; }
.ecran-pose .pose-alerte { display: flex; gap: .4rem; align-items: baseline; }
.ecran-pose .pose-alerte-surcharge, .ecran-pose .pose-alerte-habilitationexpiree { color: var(--rouge); }
.ecran-pose .pose-alerte-sansequipe, .ecran-pose .pose-alerte-datesincoherentes { color: var(--orange); }
.ecran-pose .pose-alerte-conflitdecommercial { color: var(--rouge); }

.ecran-pose .pose-corps { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: .75rem; min-height: 0; flex: 1; }
.ecran-pose .pla-cadre { min-width: 0; min-height: 0; }
.ecran-pose .pose-grille { width: max-content; min-width: 100%; --pose-h1: 1.6rem; }
.ecran-pose .pose-grille th, .ecran-pose .pose-grille td { text-align: center; }
.ecran-pose .pose-grille td { min-width: var(--pose-l, 24px); width: var(--pose-l, 24px); padding: 0; height: 2.1rem; vertical-align: top; position: relative; }
.ecran-pose .pose-grille thead th { height: var(--pose-h1); box-sizing: border-box; padding: 0 2px; overflow: hidden; white-space: nowrap; }
.ecran-pose .pose-grille thead tr:nth-child(2) th { top: var(--pose-h1); }
.ecran-pose .pose-grille thead tr:nth-child(3) th { top: calc(var(--pose-h1) * 2); }
.ecran-pose .pose-grille th.pose-equipe { position: sticky; left: 0; z-index: 2; min-width: 10rem; width: 10rem; text-align: left; padding: .25rem .4rem; background: var(--fond-entete, #eef1f4); border-right: 1px solid var(--trait, #d7dbe0); }
.ecran-pose .pose-grille thead th.pose-equipe { z-index: 5; }
.ecran-pose .pose-grille tbody th.pose-equipe { cursor: pointer; vertical-align: top; }
.ecran-pose .pose-grille th.pose-equipe > * { display: block; }
.ecran-pose .pose-mois { text-align: left; font-weight: 600; text-transform: capitalize; padding-left: .4rem; }
.ecran-pose .pose-demi { font-weight: normal; font-size: .75rem; }
.ecran-pose .pose-zoom-1m thead th, .ecran-pose .pose-zoom-3m thead th { font-size: .7rem; }
.ecran-pose .pose-weekend { background: var(--fond-gris); }
.ecran-pose .pose-aujourdhui { box-shadow: inset 0 -2px 0 var(--accent); }

/* Une barre : les demi-journées consécutives d'une équipe sur un chantier ; le nom court sur toute sa longueur, les poignées aux deux bords l'étirent. */
.ecran-pose .pose-bandeau { display: block; position: relative; box-sizing: border-box; height: 1.5rem; margin: 1px 0; background: #c9d8ee; color: #1b1b1b; border: 1px solid rgba(0, 0, 0, .28); border-left-width: 0; border-right-width: 0; cursor: grab; user-select: none; }
.ecran-pose .pose-bandeau.pose-seul { border-width: 1px; border-radius: 4px; }
.ecran-pose .pose-bandeau.pose-tete { border-left-width: 1px; border-radius: 4px 0 0 4px; margin-right: -1px; width: calc(100% + 1px); }
.ecran-pose .pose-bandeau.pose-milieu { margin-left: -1px; margin-right: -1px; width: calc(100% + 2px); }
.ecran-pose .pose-bandeau.pose-queue { border-right-width: 1px; border-radius: 0 4px 4px 0; margin-left: -1px; width: calc(100% + 1px); }
.ecran-pose .pose-barre-nom { position: absolute; left: 4px; top: 0; z-index: 1; width: calc(var(--n, 1) * var(--pose-l, 24px) - 8px); line-height: calc(1.5rem - 2px); font-size: .72rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.ecran-pose .pose-poignee { position: absolute; top: 0; bottom: 0; width: 6px; z-index: 1; cursor: ew-resize; }
.ecran-pose .pose-poignee-debut { left: 0; }
.ecran-pose .pose-poignee-fin { right: 0; }
.ecran-pose .pose-bandeau:hover .pose-poignee { background: rgba(0, 0, 0, .3); }
.ecran-pose .pose-bandeau.pose-surcharge { background: #f2b8b5; color: #1b1b1b; box-shadow: inset 0 0 0 2px var(--rouge); }
.ecran-pose .pose-bandeau.pla-selection { outline: 2px solid var(--accent); outline-offset: -1px; }
.ecran-pose .pose-bandeau.pla-deplace { opacity: .45; }
.ecran-pose .pose-estompe { opacity: .3; }
.ecran-pose .pose-signal { display: block; color: var(--rouge); }

/* Les événements de chantier (prise de cotes, visite, livraison, réception, réserves) : une pastille sous la barre, avec le chantier ou le commercial. */
.ecran-pose .pose-evenement { display: block; width: 0; min-width: 100%; box-sizing: border-box; font-size: .65rem; border-left: 3px solid var(--accent); padding-left: 3px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: grab; }
.ecran-pose .pose-evenement.pose-surcharge { background: rgba(179, 38, 30, .15); }
.ecran-pose .pose-evenement.pla-selection { outline: 2px solid var(--accent); outline-offset: -1px; }
.ecran-pose .pose-evenement.pla-deplace { opacity: .45; }

/* À droite : les chantiers à planifier en cartes, puis la demi-journée choisie. */
.ecran-pose .pose-droite { display: flex; flex-direction: column; gap: .5rem; min-height: 0; min-width: 0; }
.ecran-pose .pose-aplanifier { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 55%; min-height: 10rem; }
.ecran-pose .pose-aplanifier h3 { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: 1rem; }
.ecran-pose .pose-compteur { background: var(--fond-gris); border-radius: 999px; padding: 0 .55rem; font-size: .8rem; font-weight: normal; }
.ecran-pose .pose-recherche { width: 100%; box-sizing: border-box; }
.ecran-pose .pose-cartes { display: grid; gap: .35rem; align-content: start; overflow: auto; min-height: 0; flex: 1; }
.ecran-pose .pose-carte { display: grid; gap: .1rem; padding: .3rem .5rem; border: 1px solid var(--bord); border-radius: 4px; cursor: grab; user-select: none; }
.ecran-pose .pose-carte b, .ecran-pose .pose-carte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-pose .pose-volet { flex: 0 1 auto; max-height: 50%; overflow: auto; display: grid; gap: .5rem; align-content: start; }
.ecran-pose .pose-volet-contenu { display: grid; gap: .5rem; }
.ecran-pose .pose-fiche { display: grid; gap: .3rem; padding: .4rem; border: 1px solid var(--bord); border-radius: 4px; }
.ecran-pose .pose-actions { display: flex; gap: .3rem; flex-wrap: wrap; }
.ecran-pose .pose-confirmation { padding: .5rem; border: 2px solid var(--accent); border-radius: 4px; display: grid; gap: .3rem; }
/* Les champs du volet : libellé à gauche, champ à droite. */
.ecran-pose .champ-ligne { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.ecran-pose .champ-ligne > input, .ecran-pose .champ-ligne > select, .ecran-pose .champ-ligne > textarea { flex: 1 1 9rem; min-width: 0; }
.ecran-pose .champ-ligne > textarea { align-self: flex-start; }
@media (max-width: 900px) { .ecran-pose .pose-corps { grid-template-columns: minmax(0, 1fr); } }
/* Équipes de montage (fiche fournisseur) : la fiche défile, les boutons restent ancrés en bas du volet */
.equipes-montage .fiche-contact { overflow: hidden; }
.equipes-montage .fiche-defilante { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.equipes-montage .fiche-defilante > * { flex: none; }
.equipes-montage .grille-contact textarea { min-height: 76px; }
.equipes-montage .boutons-contact { flex: none; margin-top: 0; border-top: 1px solid var(--bord); background: var(--fond-carte); }

/* Appels d'offres, filtres de la veille : deux lignes alignees, libelles au-dessus des champs ; la zone est le meme composant que la chasse (segments sur une ligne, pastilles dessous) */
.ao-filtres-veille { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.ao-filtres-veille .ao-ligne { display: grid; gap: 8px 12px; min-width: 0; }
.ao-filtres-veille .ao-ligne-1 { grid-template-columns: minmax(0, 40fr) minmax(0, 35fr) minmax(130px, 12fr) minmax(130px, 12fr); align-items: start; }
.ao-filtres-veille .ao-ligne-2 { grid-template-columns: repeat(4, minmax(130px, 1fr)) auto auto; align-items: end; }
.ao-filtres-veille .ao-champ { min-width: 0; }
.ao-filtres-veille .ao-zone .zone-chasse { width: 100%; min-width: 0; }
.ao-filtres-veille .ao-zone .zone-pastilles { display: flex; width: 100%; }
.ao-filtres-veille .ao-zone .zone-ajout { flex: 1 1 140px; min-width: 120px; }
.ao-filtres-veille .ao-cases { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.ao-filtres-veille .ao-case span { white-space: nowrap; }
.ao-filtres-veille .ao-filtres-boutons { display: flex; gap: 8px; align-items: end; }
.ao-filtres-veille .ao-bouton { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font: inherit; white-space: nowrap; cursor: pointer;
    background: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: var(--r); color: var(--texte); }
.ao-filtres-veille .ao-bouton:hover:not(:disabled) { background: var(--accent-clair); }
.ao-filtres-veille .ao-bouton.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.ao-filtres-veille .ao-bouton.primaire .icone { color: #fff; }
.ao-filtres-veille .ao-bouton.primaire:hover:not(:disabled) { background: var(--accent-fonce); }
.ao-filtres-veille .ao-bouton:disabled { opacity: .5; cursor: default; }
@media (max-width: 1200px) {
    .ao-filtres-veille .ao-ligne-1, .ao-filtres-veille .ao-ligne-2 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .ao-filtres-veille .ao-mots, .ao-filtres-veille .ao-zone { grid-column: 1 / -1; }
    .ao-filtres-veille .ao-filtres-boutons { grid-column: 1 / -1; }
}

/* Appels d'offres, carte « Synthèse » : le parcours en trois étapes qui mène à la synthèse (télécharger le dossier, le déposer, le résumer). */
.aof-etapes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.aof-etape { display: grid; grid-template-columns: 1.6rem minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); gap: 8px; align-items: center; }
.aof-etape-numero { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--fond-gris); font-size: .8rem; font-weight: 600; }
.aof-etape.fait .aof-etape-numero { background: var(--accent); color: #fff; }
.aof-etape-etat { color: var(--texte-doux); font-size: .85rem; }
.aof-etape.fait .aof-etape-etat { color: var(--texte-succes); }
.aof-etape-action { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* ============================================================================
   Fenetre de message (PreparationMail), facon Outlook : en-tete en lignes De / A / Cc / Cci / Objet, corps sur toute la largeur et la hauteur restante, pieces jointes en pastilles.
   Les boutons restent dans le pied unique (§11quater).
   ========================================================================== */
.fenetre-mail { width: min(1000px, 96vw); height: min(780px, 94vh); max-width: none; display: flex; flex-direction: column; }
.fenetre-mail .corps-mail { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.fenetre-mail .mail-approche { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--bord); }
.fenetre-mail .mail-entete { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--bord); padding-bottom: 6px; flex: none; }
.fenetre-mail .mail-ligne { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.fenetre-mail .mail-ligne > label { flex: none; width: 52px; color: var(--texte-doux); }
.fenetre-mail .mail-champ { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border-bottom: 1px solid var(--bord); padding: 2px 0; }
.fenetre-mail .mail-saisie { flex: 1 1 140px; min-width: 120px; border: none; background: transparent; font: inherit; color: var(--texte); padding: 3px 4px; }
.fenetre-mail .mail-saisie:focus { outline: none; }
.fenetre-mail .mail-objet { flex: 1 1 auto; font-weight: 600; padding: 4px 6px; border: none; border-bottom: 1px solid var(--bord); background: transparent; color: var(--texte); font-family: inherit; }
.fenetre-mail .mail-de { color: var(--texte); }
.fenetre-mail .corps-message { flex: 1 1 auto; min-height: 200px; width: 100%; resize: none; padding: 10px 12px; font: inherit; line-height: 1.45; color: var(--texte); background: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: var(--r); }
.fenetre-mail .pieces-mail { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* Appels d'offres, bureau : un dossier vient d'arriver dans Téléchargements (H20). */
.zip-arrive { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; border-left: 4px solid var(--accent); }
.zip-actions { display: inline-flex; gap: 6px; }

/* Appels d'offres : la démarche en cinq étapes porte son action dans la case de l'étape en cours ; la phrase de l'étape tient sur une ligne. */
.aof-etape { flex-wrap: wrap; }
.aof-etape-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.aof-etape-actions .btn-carre { width: auto; height: auto; flex-direction: row; white-space: nowrap; padding: 3px 10px; min-height: 0; font-size: 12px; }
.aof-phrase { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* L'alerte des pièces manquantes du dossier de l'entreprise : ambre, rouge à moins de sept jours de la date limite. La carte « Pièces de candidature » du tableau passe en ambre tant qu'il en manque. */
.ao-alerte-pieces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--bord-attention); border-left: 4px solid var(--orange); border-radius: var(--r); background: var(--fond-attention); color: var(--texte-attention); font-weight: 600; }
.ao-alerte-pieces > span { flex: 1; min-width: 12rem; }
.ao-alerte-pieces-rouge { border-color: var(--bord-danger); border-left-color: var(--rouge); background: var(--fond-danger); color: var(--rouge); }
.ecran-ao-hub .ao-carte.ao-carte-ambre { border-color: var(--bord-attention); background: var(--fond-attention); }
.ecran-ao-hub .ao-carte.ao-carte-ambre .ao-carte-valeur { color: var(--texte-attention); }

/* Appels d'offres (tableau, fiche, dossier de l'entreprise) : le pied d'actions reste en bas de l'écran (§11quater), la page défile au-dessus — le motif des relances. */
.ecran-ao-hub, .ecran-ao-fiche { overflow-y: auto; }
.ecran-ao-hub > *, .ecran-ao-fiche > * { flex-shrink: 0; }
.ecran-ao-hub > .pied-ecran, .ecran-ao-fiche > .pied-ecran { position: sticky; bottom: 0; z-index: 5; margin-top: auto; background: var(--fond-carte, var(--fond)); padding: 6px 0; border-top: 1px solid var(--bord); }

/* Dossier de l'entreprise, onglet Documents (FEN_AO_Entreprise) : la liste des pièces à gauche, la fiche de la pièce choisie à droite (§11nonies). */
.doc-grille { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 10px; align-items: start; }
.doc-liste .corps-volet { display: flex; flex-direction: column; gap: 2px; padding: 4px; overflow: visible; }
.doc-ligne { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--r); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.doc-ligne:hover { border-color: var(--accent); }
.doc-ligne.choisie { border-color: var(--accent); background: var(--accent-clair); }
.doc-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-pastille { display: inline-block; padding: 0 6px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; }
.doc-pastille-valide { color: var(--texte-succes); }
.doc-pastille-bientot { color: var(--orange); }
.doc-pastille-manquante { color: var(--texte-danger); }
.doc-titre-liste { margin: 8px 8px 2px; font-size: 12px; color: var(--texte-doux); }
.doc-fiche .doc-corps { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; overflow: visible; }
.doc-fiche > .vide { padding: 40px; text-align: center; color: var(--texte-faible); }
.doc-pourquoi > summary { cursor: pointer; font-weight: 600; }
.doc-pourquoi p { margin: 4px 0; }
.doc-ou { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.doc-fichier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; border: 1px solid var(--bord); border-radius: var(--r); }
.doc-depot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 12px; border: 2px dashed var(--bord); border-radius: var(--r); text-align: center; cursor: pointer; }
.doc-depot:hover, .doc-depot:focus-within, .doc-depot.plein { border-color: var(--accent); background: var(--accent-clair); }
.doc-depot input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.doc-depot-texte { display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.doc-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.doc-champs .ao-large { grid-column: 1 / -1; }
.doc-versions { display: flex; flex-direction: column; gap: 2px; }
.doc-version { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 3px 8px; border: 1px solid transparent; border-radius: var(--r); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.doc-version:hover { border-color: var(--accent); }
@media (max-width: 800px) { .doc-grille { grid-template-columns: minmax(0, 1fr); } }
/* Transfert de portefeuille : l'urgence d'un commercial parti (rouge, ambre, gris) et l'alerte de la direction dans l'en-tete de la PAC */
.urgence-rouge { background: var(--fond-danger, #fde8e8); border-color: var(--texte-danger); color: var(--texte-danger); }
.urgence-ambre { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--texte-attention); }
.urgence-gris { background: var(--fond-gris); color: var(--texte-doux); }
.alerte-direction { color: var(--texte-danger); font-weight: 600; }

/* Liste des règlements (Choix_Fac_Cli_Reglt_MDI) : chiffres clés, règlement regroupé et pastille de retard. */
.raccourcis-periode { display: inline-flex; gap: 8px; align-items: center; }
.chiffres-reglements { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; padding: 0 8px; }
.chiffre-cle { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); min-width: 0; }
.chiffre-cle b { font-size: 18px; }
.chiffre-cle .retard-texte { color: var(--texte-danger); }
.table-reglements tr.reglement-groupe td { font-weight: 600; background: var(--fond-gris); }
.table-reglements tr.sous-ligne td { color: var(--texte-doux); }
.table-reglements tr.choisi td { background: var(--accent-clair); }
.table-reglements .deplier { border: none; background: none; padding: 0 4px 0 0; font: inherit; cursor: pointer; color: var(--accent-texte); }
.pastille-retard { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.retard-avance { background: color-mix(in srgb, var(--texte-succes) 16%, transparent); color: var(--texte-succes); }
.retard-leger { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.retard-moyen { background: color-mix(in srgb, var(--orange) 30%, transparent); color: var(--texte); border: 1px solid var(--orange); }
.retard-fort { background: color-mix(in srgb, var(--rouge) 18%, transparent); color: var(--texte-danger); }
.signe-interface { color: var(--texte-succes); font-weight: 700; }

/* Liste des codes comptables (FEN_Code_Ets_CodeCpta) : un code porté par plusieurs tiers est en rouge. */
.code-en-double { background: color-mix(in srgb, var(--rouge) 14%, transparent); color: var(--texte-danger); font-weight: 600; }

/* Règlements clients (FEN_Com_FacCli_Reglt_Optimise) : les factures à surveiller, la saisie d'un règlement. */
.table-droits tr.a-surveiller td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.grille-saisie-reglement { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; }
.champ-montant { width: 110px; text-align: right; }

/* FEN_Fac_Fourn_Reglt_Suivi_V_2024_07_optimise : une échéance dépassée et une facture bloquée se lisent dans les tables de droits */
.table-droits td.en-retard, .table-droits span.en-retard { color: var(--rouge); font-weight: 600; }

/* FEN_Interfaces_Rglts_Fourn : un règlement dont le fournisseur n_a pas de code comptable se lit en rouge, la liste des fichiers prêts a la remise */
.table-droits tr.compte-manquant td { background: color-mix(in srgb, var(--rouge) 14%, transparent); }
.table-droits tr.ligne-total td { font-weight: 600; }
.liste-fichiers { margin: 0; padding-left: 18px; }

/* FEN_Com_FacCli_Reglt_Optimise : l'échéancier par facture (tranches vertes, observation d'échéance jaune, avoir bleu) et la fiche en lecture de la boîte d'échéance */
.table-droits td.tranche-pleine { background: var(--vert-pastel); }
.table-droits td.jaune-obs { background: var(--jaune-pastel); }
.table-droits td.rouge-pastel { background: var(--rouge-pastel); }
.table-droits td.cyan-pastel { background: var(--cyan-pastel); }
.table-droits td.bleu-avoir { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.fiche-lecture { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0 0 8px; }
.fiche-lecture dt { color: var(--texte-faible); }
.fiche-lecture dd { margin: 0; }

/* FEN_Ana_FacturesFournisseurs_Engt_Optimise : pastille de statut d'une pièce, choix du fournisseur, frais annexes et ligne de ventilation */
.pastille-statut { font-size: 11px; padding: 1px 8px; border-radius: 9px; background: var(--fond-info); color: var(--texte-info); white-space: nowrap; }
.pastille-statut.statut-1 { background: var(--fond-succes); color: var(--texte-succes); }
.pastille-statut.statut-9 { background: var(--bord); color: var(--texte-doux); }
.pastille-statut.statut-retraiter { background: color-mix(in srgb, var(--orange) 22%, transparent); color: var(--texte); }
.pastille-statut.statut-bloquee { background: color-mix(in srgb, var(--rouge) 18%, transparent); color: var(--rouge); }
.grille-facture-fournisseur { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
.grille-facture-fournisseur .champ.large { grid-column: 1 / -1; }
.grille-facture-fournisseur .champ { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ligne-champ { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.liste-propositions { display: flex; flex-direction: column; align-items: flex-start; max-height: 180px; overflow-y: auto; }
.frais-annexes { margin: 8px 0; }
.ajout-ligne { margin-top: 8px; align-items: end; }

/* FEN_Tresorerie : le tableau de trésorerie (lignes par source, soldes, prévisions repliables) */
.ecran-tresorerie { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; overflow: hidden; }
/* Le tableau est le SEUL à défiler, dans les deux sens : le corps ne défile pas, la barre de réglages et le pied restent fixes. */
.corps-tresorerie { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.defile-tresorerie { overflow: auto; flex: 1 1 auto; min-height: 0; }
.corps-tresorerie > .cadre { flex: none; max-height: 60vh; }
.table-tresorerie { border-collapse: collapse; width: 100%; font-size: 13px; }
.table-tresorerie th, .table-tresorerie td { padding: 3px 8px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.table-tresorerie thead th { position: sticky; top: 0; background: var(--fond-info); font-weight: 600; }
.table-tresorerie .libelle-ligne { text-align: left; }
.table-tresorerie .col-echu { background: color-mix(in srgb, var(--orange) 18%, transparent); }
.table-tresorerie .titre-section td { font-weight: 700; background: var(--fond-info); }
.table-tresorerie .replie-bascule { cursor: pointer; }
.table-tresorerie .total-ligne td { font-weight: 600; border-top: 1px solid var(--texte-faible); }
.table-tresorerie .solde-ligne td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.table-tresorerie .solde-ligne.cumule td { font-weight: 700; }
.table-tresorerie td.cliquable { cursor: pointer; }
.table-tresorerie td.cliquable:hover, .table-tresorerie td.choisi { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.table-tresorerie .en-retard { color: var(--rouge); }
.solde-saisi { display: inline-flex; gap: 6px; align-items: center; }

/* FEN_Ana_FacturesFournisseurs_Engt_Optimise : le total HT sous la liste des pièces */
.pied-liste { padding: 4px 10px; border-top: 1px solid var(--bord); }

/* FEN_Ana_FacturesFournisseurs_Engt_Optimise : la colonne des commandes entre la liste des pièces et la fiche */
.grille-referentiel.a-trois-colonnes { --volet-1: 280px; --volet-2: 340px; grid-template-columns: minmax(180px, var(--volet-1)) 8px minmax(220px, var(--volet-2)) 8px minmax(420px, 1fr); gap: 0; position: relative; }
.grille-referentiel.a-trois-colonnes > .cadre { min-width: 0; }
.separateur-volet { cursor: col-resize; touch-action: none; position: relative; }
.separateur-volet::after { content: ""; position: absolute; inset: 0 3px; background: var(--bord); border-radius: 2px; }
.separateur-volet:hover::after, .separateur-volet.en-glissement::after { background: var(--accent); }
body.volets-en-glissement { user-select: none; cursor: col-resize; }
.colonne-commandes .corps-volet { flex: 1; min-height: 0; overflow: auto; }
.pied-commandes { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--bord); }
.carte-referentiel.bloquee { border-color: var(--rouge); }

/* FEN_Ana_FacturesFournisseurs_Engt_Optimise : l'en-tête de la fiche en deux colonnes (la pièce à gauche, le fournisseur et les montants dans une carte à droite), la ligne de saisie de la ventilation dans le tableau */
.entete-facture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 12px; margin-bottom: 10px; }
.piece-facture { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ligne-champs { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ligne-champs.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ligne-champs .champ { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sous-champ { margin-top: 2px; }
.carte-fournisseur { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-info); min-width: 0; }
.bloc-fournisseur { display: flex; flex-direction: column; gap: 4px; }
.bloc-fournisseur .etiquette { color: var(--texte-faible); font-size: 12px; }
.montants-facture { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--bord); padding-top: 8px; }
.montants-facture label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.montants-facture input { text-align: right; width: 130px; }
.montants-facture .ttc { font-weight: 700; }
.montants-facture .ttc input { font-weight: 700; }
.pastilles-controle { display: flex; flex-wrap: wrap; gap: 6px; }
.pastille-controle { font-size: 12px; padding: 2px 9px; border-radius: 10px; white-space: nowrap; }
.pastille-controle.juste { background: var(--fond-succes); color: var(--texte-succes); }
.pastille-controle.ecart { background: color-mix(in srgb, var(--orange) 24%, transparent); color: var(--texte); }
.table-droits tr.ligne-saisie td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.table-droits tr.ligne-saisie select, .table-droits tr.ligne-saisie input { max-width: 100%; }
/* .ligne-saisie est aussi une rangee flex d'un autre ecran : une ligne de table la garde en table-row. */
.table-droits tr.ligne-saisie { display: table-row; padding: 0; gap: 0; }
/* Frais annexes replies : leur grille (display: grid) s'affichait hors du repli, par-dessus la ventilation. */
details.frais-annexes:not([open]) > :not(summary) { display: none; }
.observations-facture { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 10px 0; }
.observations-facture .champ { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 900px) {
    .entete-facture { grid-template-columns: 1fr; }
    .observations-facture { grid-template-columns: 1fr; }
}

/* ======================================================================
   Récapitulatif de TVA (nouvel écran, sans fenêtre WinDev d'origine)
   ====================================================================== */
.ecran-recap-tva { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.corps-recap-tva { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px; }
.colonnes-recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 10px; }
.solde-tva { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; padding: 8px 12px; border: 1px solid var(--bord); background: var(--fond-gris); }
.solde-tva .resultat { margin-left: auto; font-size: 1.1em; }
.solde-tva.a-payer .resultat { color: var(--rouge); }
.solde-tva.credit .resultat { color: var(--vert); }

/* FEN_Ana_FacturesFournisseurs_Engt_Optimise : la fiche en trois blocs encadrés (facture, ventilation, rattachement), sans défilement horizontal */
.colonne-detail .corps-volet { overflow-x: hidden; overflow-y: auto; }
.colonne-detail .groupe-referentiel { display: flex; flex-direction: column; gap: 12px; }
.bloc-facture { border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte); min-width: 0; }
.bandeau-bloc { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--accent-clair); border-bottom: 1px solid var(--bord-fort); font-weight: 600; min-width: 0; }
.bandeau-bloc .doux { font-weight: 400; }
.numero-bloc { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; flex: none; }
.corps-bloc { padding: 10px; min-width: 0; }
.table-ventilation, .table-imputation { table-layout: fixed; width: 100%; }
.table-ventilation .col-type { width: auto; }
.table-ventilation .col-regime { width: 140px; }
.table-ventilation td.coupe select { width: 100%; min-width: 0; }
.table-ventilation .col-taux { width: 112px; }
.table-ventilation .col-mini { width: 86px; }
.table-ventilation .col-action { width: 84px; }
.table-imputation .col-entite { width: 44px; }
.table-imputation .col-type-imp { width: 84px; }
.table-imputation .col-resp { width: 52px; }
.table-imputation .col-mini { width: 88px; }
.table-imputation .col-action { width: 64px; }
.table-ventilation th, .table-ventilation td, .table-imputation th, .table-imputation td { overflow: hidden; white-space: nowrap; }
.table-ventilation .coupe, .table-imputation .coupe { text-overflow: ellipsis; }
.table-ventilation select, .table-ventilation input { width: 100%; min-width: 0; box-sizing: border-box; text-overflow: ellipsis; }
.btn-ligne { width: auto; height: auto; min-height: 0; padding: 3px 10px; font-size: 12px; white-space: nowrap; }
.sous-titre-bloc { font-weight: 600; margin-bottom: 4px; }
.imputer-reste { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bord); }
.ligne-reste { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ligne-reste select { flex: 0 1 240px; min-width: 0; }
.ligne-reste input { flex: 1 1 auto; min-width: 0; }


/* Tables de pointage (reglements clients et fournisseurs) : selection par cases a la maniere de l explorateur, texte non selectionnable,
   case, N facture et client figes a gauche pendant le defilement horizontal */
.table-pointage { user-select: none; }
.case-glissable { cursor: default; }
.legende-signes { font-size: 12px; margin-left: 12px; }
.table-pointage td.col-case, .table-pointage th.col-case { position: sticky; left: 0; z-index: 2; width: 34px; min-width: 34px; max-width: 34px; background: var(--fond-carte); }
/* Largeurs des colonnes figées : défaut ici, réglage de l'utilisateur posé sur la table par colonnes.js. */
.table-pointage { --largeur-fige-g1: 120px; --largeur-fige-g2: 220px; }
.table-pointage td.fige-g1, .table-pointage th.fige-g1 { position: sticky; left: 34px; z-index: 2; width: var(--largeur-fige-g1, 120px); min-width: var(--largeur-fige-g1, 120px); max-width: var(--largeur-fige-g1, 120px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--fond-carte); }
.table-pointage td.fige-g2, .table-pointage th.fige-g2 { position: sticky; left: calc(34px + var(--largeur-fige-g1, 120px)); z-index: 2; width: var(--largeur-fige-g2, 220px); min-width: var(--largeur-fige-g2, 220px); max-width: var(--largeur-fige-g2, 220px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--fond-carte); border-right: 1px solid var(--bord-fort); }
.table-pointage th.col-case, .table-pointage th.fige-g1, .table-pointage th.fige-g2 { z-index: 4; background: var(--fond-gris); }
.table-pointage tr:hover td.col-case, .table-pointage tr:hover td.fige-g1, .table-pointage tr:hover td.fige-g2 { background: var(--accent-survol); }
.table-pointage tr.choisi td.col-case, .table-pointage tr.choisi td.fige-g1, .table-pointage tr.choisi td.fige-g2 { background: var(--accent-clair); }

/* Legende des couleurs des tables de reglements clients : meme teintes que les cellules */
.legende-signes .pastille-legende { display: inline-block; width: 11px; height: 11px; margin: 0 3px 0 10px; vertical-align: -1px; border: 1px solid var(--bord-fort); }
.pastille-legende.vert { background: var(--vert-pastel); }
.pastille-legende.jaune { background: var(--jaune-pastel); }
.pastille-legende.rouge { background: var(--rouge-pastel); }
.table-pointage td.fige-g1.rouge-pastel, .table-pointage td.fige-g2.rouge-pastel { background: var(--rouge-pastel); }

/* Une ligne de pointage = une ligne a l ecran : cellules sur une seule ligne, texte coupe par des points de suspension (le libelle complet est en info-bulle) */
.table-pointage td, .table-pointage th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-pointage td.lib { max-width: 240px; }
.table-pointage td.col-case { overflow: visible; }

/* Fiche facture fournisseur dense, a la maniere de la fenetre d origine : fournisseur en premiere ligne, etiquettes courtes a gauche des champs, trois colonnes de champs compacts,
   sections separees par un simple titre fin (plus de cadre ni de carte) */
.fiche-dense, .colonne-detail .groupe-referentiel { gap: 6px; }
.colonne-detail .corps-volet { padding: 6px 10px; }
.ligne-fournisseur { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.etiquette-g { color: var(--texte-doux); min-width: 7.5em; }
.recherche-fournisseur { flex: 1 1 260px; min-width: 0; max-width: 420px; }
.fournisseur-choisi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ligne-type-piece { display: flex; gap: 18px; padding-left: calc(7.5em + 10px); }
.grille-dense { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; min-width: 0; }
.colonne-dense { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.champ-g { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); align-items: center; gap: 0 8px; min-width: 0; }
.champ-g > span { color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ-g input, .champ-g select { min-width: 0; width: 100%; box-sizing: border-box; }
.champ-g input.champ-montant { text-align: right; }
.champ-g.fort > span, .champ-g.fort input { font-weight: 700; }
.case-ligne.decale { padding-left: calc(7.5em + 8px); }
.colonne-detail .bloc-facture { border: none; border-radius: 0; background: none; }
.colonne-detail .bandeau-bloc { padding: 2px 0; background: none; border: none; border-bottom: 1px solid var(--bord-fort); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); }
.colonne-detail .corps-bloc { padding: 4px 0 0; }

/* La fiche decide de ses colonnes selon SA largeur (celle du volet que l utilisateur fait glisser), jamais selon la fenetre */
.colonne-detail .corps-volet { container-type: inline-size; container-name: fiche; }
@container fiche (min-width: 560px) { .grille-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container fiche (min-width: 900px) { .grille-dense { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container fiche (max-width: 719px) {
    .cache-etroit { display: none; }
    .table-ventilation .col-regime { width: 110px; }
    .table-ventilation .col-taux { width: 96px; }
    .table-ventilation .col-mini, .table-imputation .col-mini { width: 76px; }
    .table-ventilation .col-action { width: 70px; }
}
@container fiche (max-width: 519px) {
    .cache-tresetroit { display: none; }
    .table-ventilation .col-taux { width: 88px; }
    .table-ventilation .col-mini, .table-imputation .col-mini { width: 70px; }
    .table-ventilation .col-action, .table-imputation .col-action { width: 60px; }
    .champ-g { grid-template-columns: 6.5em minmax(0, 1fr); }
    .ligne-type-piece { padding-left: 0; flex-wrap: wrap; gap: 4px 14px; }
    .case-ligne.decale { padding-left: 0; }
}
/* hauteur : rangees de champs de 28 px, sections fines */
.colonne-detail .corps-volet { padding: 4px 8px; }
.colonne-dense { gap: 3px; }
.champ-g { min-height: 28px; }
.champ-g input, .champ-g select { height: 26px; padding-top: 0; padding-bottom: 0; }
.ligne-fournisseur { min-height: 28px; }
.colonne-detail .groupe-referentiel { gap: 4px; }
.colonne-detail .corps-bloc { padding: 2px 0 0; }
.table-ventilation td, .table-imputation td { padding-top: 1px; padding-bottom: 1px; }
.imputer-reste { margin-top: 4px; padding-top: 4px; }
.frais-annexes { margin: 2px 0; }

/* Trois volets : la fiche passe avant. L hote porte le container (sa largeur est celle de la grille) ; les bandes et le voile ne se voient qu une fois un volet replie. */
.hote-volets { flex: 1; min-height: 0; display: flex; container-type: inline-size; container-name: volets; }
.hote-volets > .grille-de-volets { flex: 1; min-width: 0; }
.bande-volet, .voile-volet { display: none; }
.bande-volet { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 2px; border: 1px solid var(--bord); background: var(--fond-gris); color: var(--texte-doux); cursor: pointer; font-size: 12px; white-space: nowrap; }
.bande-volet:hover { background: var(--accent-clair); color: var(--texte); }
.bande-1 { grid-column: 1; grid-row: 1; }
.bande-2 { grid-column: 3; grid-row: 1; }
.voile-volet { grid-column: 5; grid-row: 1; z-index: 25; }
.grille-de-volets > section:nth-child(1) { grid-column: 1; grid-row: 1; }
.grille-de-volets > section:nth-child(3) { grid-column: 3; grid-row: 1; }
.grille-de-volets > section:nth-child(5) { grid-column: 5; grid-row: 1; }
.grille-de-volets > .separateur-volet { grid-row: 1; }
.grille-de-volets > .separateur-volet:nth-child(2) { grid-column: 2; }
.grille-de-volets > .separateur-volet:nth-child(4) { grid-column: 4; }
@container volets (max-width: 1099px) {
    .grille-referentiel.a-trois-colonnes { grid-template-columns: 180px 0 28px 0 minmax(420px, 1fr); }
    .grille-de-volets > .separateur-volet { display: none; }
    .grille-de-volets > section:nth-child(3) { display: none; }
    .bande-2 { display: block; }
    .grille-de-volets.ouvert-2 > section:nth-child(3) { display: flex; position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; width: min(380px, 85%); box-shadow: var(--ombre); background: var(--fond-carte); }
    .grille-de-volets.ouvert-2 > .voile-volet { display: block; }
}
@container volets (max-width: 799px) {
    .grille-referentiel.a-trois-colonnes { grid-template-columns: 28px 0 28px 0 minmax(420px, 1fr); }
    .grille-de-volets > section:nth-child(1) { display: none; }
    .bande-1 { display: block; }
    .grille-de-volets.ouvert-1 > section:nth-child(1) { display: flex; position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; width: min(380px, 85%); box-shadow: var(--ombre); background: var(--fond-carte); }
    .grille-de-volets.ouvert-1 > .voile-volet { display: block; }
}

/* Règlements clients : détail du règlement choisi, écart juste d'une saisie */
.detail-reglement { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--bord); }
.chiffre-juste { color: var(--vert); }
.table-imputation .col-projet { width: 120px; }
/* ==========================================================================
   Pointage des commandes non facturées (FEN_Compta_Commande_Non_Facturees) : la ligne dont le total
   des lignes diffère du total de la commande est en rouge clair. La classe était posée, aucune règle ne la visait.
   ========================================================================== */
.table-droits tr.alerte-ligne td { background: var(--fond-danger); }

/* Récapitulatif stockage en euros : FEN_Facturation_STOCKAGE, code couleur des cases (rc- = récap cellule). */
.rc-rouge-fort { background: rgba(214, 69, 65, .55); color: #fff; }
.rc-rouge { background: rgba(214, 69, 65, .25); }
.rc-jaune { background: rgba(240, 200, 60, .35); }
.rc-vert { background: rgba(80, 175, 95, .30); }
.rc-bleu { background: rgba(70, 130, 220, .28); }
.rc-orange { background: rgba(240, 150, 50, .40); }
.rc-retard { color: var(--rouge); font-weight: 700; }

/* Contrôle des factures non envoyées (FEN_Compta_Ctrl_Fac_Cli) : le n° en magenta (proforma), en cyan (terminée à envoyer). */
.controle-faccli td.num-proforma { background: var(--fond-proforma); color: var(--texte-proforma); font-weight: 700; }
.controle-faccli td.num-aenvoyer { background: var(--fond-nonenvoyee); }

/* ==== FEN_Ana_FacturesFournisseurs_Engt_Optimise : cartes des pièces et des commandes (2026-10-22) ==== */
.carte-referentiel .montant-carte { color: var(--texte); font-weight: 600; }
.carte-referentiel .commentaire-carte { margin-top: 3px; font-size: 12px; font-style: italic; color: var(--orange); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-referentiel.carte-non-validee { border-left: 4px solid var(--rouge); }
.pastille-non-validee { font-size: 11px; padding: 1px 8px; border-radius: 9px; background: var(--rouge-pastel); color: var(--rouge); font-weight: 600; white-space: nowrap; }
.pied-commandes .actions-commande { display: flex; gap: 6px; flex-wrap: wrap; }

/* ==== Règlements fournisseurs (FEN_Fac_Fourn_Reglt_Suivi_V_2024_07_optimise) : la boîte « IBAN du fournisseur » ==== */
.grille-iban-rapide { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 10px; width: min(460px, 80vw); }
.grille-iban-rapide .champ > span { display: block; font-size: 12px; color: var(--texte-doux); margin-bottom: 2px; }
.grille-iban-rapide .champ input { width: 100%; }
/* ==== FEN_Tresorerie : la période de départ (calendrier sous le libellé), les « ⓘ » des libellés, l'encart « Comment lire ce tableau » (2026-10-22) ==== */
.treso-depart { position: relative; display: inline-flex; }
.treso-depart .mois-courant { display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.treso-depart:hover .mois-courant { background: var(--accent-clair); }
.treso-calendrier { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; opacity: 0; cursor: pointer; }
.treso-calendrier::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; cursor: pointer; }
.treso-calendrier:disabled { cursor: default; }
.treso-depart:has(.treso-calendrier:focus-visible) .mois-courant { outline: 2px solid var(--accent); outline-offset: -2px; }
.table-tresorerie .libelle-ligne .treso-info { margin-left: 6px; cursor: help; opacity: .6; font-weight: 400; }
.table-tresorerie .libelle-ligne .treso-info:hover, .table-tresorerie .libelle-ligne .treso-info:focus-visible { opacity: 1; color: var(--accent-texte); }

/* ===== FEN_Fournisseurs : la boîte « Ce nom existe déjà » (Table_Doublons) ===== */
.table-droits .col-doublon-numero { width: 70px; }

/* ==== Thème sombre : les libellés d'étape (gestion des menus, fiches) suivent le texte ; --accent-fonce reste un bleu foncé illisible sur fond sombre (contraste 2,6 mesuré le 2026-10-22). ==== */
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .bandeau-etapes .etape, html[data-theme="auto"] .bandeau-fiche .etape { color: var(--texte); } }
html[data-theme="sombre"] .bandeau-etapes .etape, html[data-theme="sombre"] .bandeau-fiche .etape { color: var(--texte); }

/* ==== FEN_Tresorerie : solde de départ, courbe du solde (seuil, point bas), boîtes « Soldes des banques » et « Lignes récurrentes » (2026-10-22) ==== */
.ecran-tresorerie .message.avertit { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--texte-attention); }
.treso-solde-depart { font-size: 13px; }
.treso-rythme { white-space: nowrap; color: var(--texte); }
.treso-trace { fill: none; stroke: var(--accent); stroke-width: 2; }
.treso-seuil { stroke: var(--rouge); stroke-width: 1; stroke-dasharray: 6 4; }
/* Le nom du compte se lit en entier : sa colonne prend la largeur du plus long, et un nom trop long passe à la ligne plutôt que d'être coupé. */
.treso-soldes { display: grid; grid-template-columns: minmax(180px, max-content) 130px 150px minmax(140px, 1fr); gap: 6px 10px; align-items: center; font-size: 13px; }
.treso-soldes .treso-solde-nom { font-weight: 600; overflow-wrap: anywhere; }
/* La boîte tient dans la fenêtre ; ses volets prennent la hauteur de leur contenu (un .cadre rétréci par le flex coupait ses boutons). */
.boite.treso-boite { width: min(980px, 96vw); max-height: 94vh; display: flex; flex-direction: column; }
.treso-boite .boite-corps { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; }
.treso-boite .boite-corps > * { flex: none; margin: 0; }
.treso-boite .boite-corps p { margin: 0 0 4px; font-size: 12.5px; }
.treso-recurrentes { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 10px; align-items: start; }
.treso-recurrentes .colonne-liste .corps-volet { max-height: 360px; overflow: auto; }
.treso-recurrentes .colonne-detail .corps-volet { overflow: visible; padding: 8px 10px; }
.carte-referentiel.treso-inactive { opacity: .6; }
.grille-fiche.treso-fiche { grid-template-columns: 120px minmax(0, 1fr) 110px minmax(0, 1fr); }
.grille-fiche.treso-fiche input.treso-case { width: auto; height: auto; justify-self: start; align-self: center; margin: 0; }
.treso-boutons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.treso-reglages .corps-volet.treso-reglages-ligne { overflow: visible; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; }
.treso-reglages-ligne label { color: var(--texte-doux); }
.treso-reglages-ligne .pousse { flex: 1; }
.treso-boite .treso-reglages-ligne input.treso-jour { width: 64px; }
.treso-boite .treso-reglages-ligne input.champ-montant { width: 130px; }
@media (max-width: 760px) {
    .treso-recurrentes, .treso-soldes { grid-template-columns: minmax(0, 1fr); }
    .grille-fiche.treso-fiche { grid-template-columns: minmax(0, 1fr); }
    .grille-fiche.treso-fiche label { text-align: left; }
}
/* ==== FEN_Fac_Fourn_Reglt_Suivi_V_2024_07_optimise : les couleurs de cellule de lfct_Mise_En_Forme_TBL_Fac_NR / _FF_Reglees (RougePastel, RougeClair, GrisClair, VertPastel, OrangePastel) ;
   elles restent sous le survol et la sélection, texte au thème (contraste >= 6 sur chaque fond, clair et sombre). ==== */
:root { --fond-ff-bloquee: #ff8080; --fond-ff-comptabilisee: #d0d0d0; --fond-ff-a-retraiter: #ffd9b3; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --fond-ff-bloquee: #8a2a30; --fond-ff-comptabilisee: #4a4a4a; --fond-ff-a-retraiter: #4d3418; } }
html[data-theme="sombre"] { --fond-ff-bloquee: #8a2a30; --fond-ff-comptabilisee: #4a4a4a; --fond-ff-a-retraiter: #4d3418; }
.table-droits tr td.ff-echue, .table-droits tr td.ff-partiel { background: var(--rouge-pastel); color: var(--texte); }
.table-droits tr td.ff-bloquee { background: var(--fond-ff-bloquee); color: var(--texte); font-weight: 600; }
.table-droits tr td.ff-statut-compta { background: var(--fond-ff-comptabilisee); color: var(--texte); }
.table-droits tr td.ff-statut-pret { background: var(--vert-pastel); color: var(--texte); }
.table-droits tr td.ff-statut-retraiter { background: var(--fond-ff-a-retraiter); color: var(--texte); }
.pastille-legende.ff-rouge-vif { background: var(--fond-ff-bloquee); }
.pastille-legende.ff-gris { background: var(--fond-ff-comptabilisee); }
.pastille-legende.ff-orange { background: var(--fond-ff-a-retraiter); }
/* ==== FEN_Com_Fac_Cli_InterfaceVte_Taxes : couleurs de la liste (compte incorrect en rouge, compte de transfert en rose, devise autre que l'euro en vert), légende, « Concerne » repliable ==== */
.table-droits tr.ivt-compte-incorrect td, .ivt-cle.ivt-compte-incorrect { background: color-mix(in srgb, var(--rouge) 32%, var(--fond-carte)); }
.table-droits tr.ivt-transfert-incorrect td, .ivt-cle.ivt-transfert-incorrect { background: var(--rouge-pastel); }
.table-droits td.ivt-devise-autre, .ivt-cle.ivt-devise-autre { background: var(--vert-pastel); }
.ivt-legende { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border-top: 1px solid var(--bord); font-size: 12px; }
.ivt-cle { padding: 1px 8px; border-radius: var(--r); color: var(--texte); }
.table-droits td.ivt-col-concerne { min-width: 140px; max-width: 280px; }
.ivt-concerne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivt-concerne-deplie .ivt-concerne { white-space: pre-line; overflow: visible; }
.ivt-deplier { margin-left: 4px; padding: 0 5px; min-width: 18px; line-height: 16px; border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte); color: var(--texte); cursor: pointer; font-weight: 700; }
.ivt-deplier:hover { background: var(--accent-clair); }
/* Sur une ligne coloree, le texte reprend la couleur du theme : le gris des codes et le rouge du retard y tombaient sous 4,5 de contraste en sombre. */
.table-droits tr.ivt-compte-incorrect td.col-code, .table-droits tr.ivt-transfert-incorrect td.col-code,
.table-droits tr.ivt-compte-incorrect td .retard-fourn, .table-droits tr.ivt-transfert-incorrect td .retard-fourn,
.table-droits tr.ivt-compte-incorrect td.retard-fourn, .table-droits tr.ivt-transfert-incorrect td.retard-fourn { color: var(--texte); }

/* ==== FEN_Com_Fac_Cli_Interface_Reglts : ligne rouge (compte comptable non codifié ou incorrect), verte (devise autre que l'euro) ; jetons pastel redéfinis en sombre. Une ligne cochée garde sa teinte et prend le trait d'accent. ==== */
.table-droits tr.irc-compte-incorrect td { background: var(--rouge-pastel); }
.table-droits tr.irc-devise td { background: var(--vert-pastel); }
.table-droits tr.choisi.irc-compte-incorrect td:first-child, .table-droits tr.choisi.irc-devise td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* ==== FEN_Com_Fac_Fourn_InterfaceAchat_optimise : RougeClair (compte non codifié, sur la ligne), JauneClair (type d'achat, sur le fournisseur), VertClair (devise) ;
   jetons pastel redéfinis en thème sombre, texte au thème. ==== */
.pastille-legende.iac-compte { background: color-mix(in srgb, var(--rouge) 14%, transparent); }
.table-droits tr td.iac-type-achat { background: var(--jaune-pastel); color: var(--texte); }
.table-droits tr td.iac-devise { background: var(--vert-pastel); color: var(--texte); }
/* ==== FEN_Interfaces_Rglts_Fourn : l'arbre banque > remise > reglement (Tbl_H_Fac_Fourn_rglt) et les couleurs de lfct_MiseEnForme_Tbl_H_Fac_Fourn_Rglt,
   RougeClair = compte comptable non codifie, VertClair = devise (legende LIB_CptePasOK / LIB_DeviseDiffEuro). Teintes pastel du theme, texte au theme. ==== */
.irf-arbre .deplier { border: none; background: none; padding: 0 4px 0 0; font: inherit; cursor: pointer; color: var(--accent-texte); }
.irf-arbre td.irf-niveau-1 { padding-left: 22px; }
.irf-arbre td.irf-niveau-2 { padding-left: 44px; }
.irf-arbre tr.irf-banque td { font-weight: 700; }
.irf-arbre tr.irf-remise td { font-weight: 600; }
.table-droits.irf-arbre tr.irf-compte:not(.choisi) td { background: var(--rouge-pastel); color: var(--texte); }
.table-droits.irf-arbre tr.irf-devise:not(.choisi) td { background: var(--vert-pastel); color: var(--texte); }

/* ==========================================================================
   Fen_FB_Parametres / FEN_AO_Entreprise : la fiche de l'entité. Chaque onglet est un composant qui
   pose son pied ; seul le corps de l'onglet défile.
   ========================================================================== */
.fiche-entite { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 8px; }
.fiche-entite-onglet { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.fiche-entite-onglet > .corps-volet { flex: 1; min-height: 0; overflow: auto; }
.fiche-entite-defile { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
/* ==== Résumé d'une facture fournisseur (Layout/ResumeFactureFournisseur, ouvert depuis la trésorerie, les interfaces et le suivi des règlements) :
   la pièce en lecture seule, étiquettes à gauche, grille serrée, comme la fiche de FEN_Ana_FacturesFournisseurs_Engt_Optimise. ==== */
.boite.rff-boite { width: 1000px; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; }
.rff-titre-boite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rff-titre-boite > span:first-child { margin-right: auto; }
.rff-corps { overflow: auto; min-height: 0; padding: 10px 14px; font-size: 13px; }
.rff-fournisseur { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--bord); margin-bottom: 6px; }
.rff-fournisseur .pousse { flex: 1; }
.rff-fournisseur .en-retard { color: var(--rouge); font-weight: 600; }
.rff-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.rff-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rff-col.rff-large { grid-column: span 2; }
.rff-ligne { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 0 8px; align-items: baseline; min-height: 22px; min-width: 0; }
.rff-etiq { color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rff-fournisseur .rff-etiq { min-width: 9em; }
.rff-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rff-val.rff-montant { text-align: right; font-variant-numeric: tabular-nums; }
.rff-ligne.fort .rff-etiq, .rff-ligne.fort .rff-val { font-weight: 700; color: var(--texte); }
.rff-frais .rff-ligne, .rff-soldes .rff-ligne { padding-right: 12px; }
.rff-soldes { margin-top: 4px; }
.rff-section { margin: 10px 0 4px; padding: 2px 6px; background: var(--fond-gris); border-left: 3px solid var(--accent); font-weight: 600; }
.rff-section .doux { font-weight: 400; }
.rff-corps .doux.petit { font-size: 12px; }
.table-droits.rff-table { font-size: 12.5px; }
.table-droits.rff-table td.col-nombre, .table-droits.rff-table th.col-nombre { text-align: right; white-space: nowrap; }
.table-droits.rff-table td.coupe { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-droits.rff-table td.vide { color: var(--texte-faible); font-size: 12px; text-align: center; }
.table-droits.rff-table tr.ligne-total td.fort { font-weight: 700; }
@media (max-width: 760px) { .rff-grille { grid-template-columns: minmax(0, 1fr); } .rff-col.rff-large { grid-column: auto; } }
/* ==== FEN_Tresorerie : trois onglets (tableau, indicateurs, contrôles), une seule barre de défilement, libellés réductibles, tableau de bord (2026-10-22) ==== */
.treso-pastille { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--fond-attention); border: 1px solid var(--bord-attention); color: var(--texte-attention); font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; }
.treso-barre { flex: none; row-gap: 4px; }
.treso-periode { display: flex; align-items: center; gap: 8px; flex: none; }
.treso-periode .onglets-plan { padding: 0; border-bottom: none; background: none; }
/* La case du rythme et le solde de départ descendent ensemble quand la ligne est trop courte. */
.treso-reglages-suite { display: flex; align-items: center; gap: 8px; flex: 1 1 380px; min-width: 0; }
.treso-reglages-suite > * { flex: none; }
.treso-reglages-suite .treso-phrase { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treso-avertissements { flex: none; margin: 0; font-size: 12.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.treso-notes { flex: none; }

/* La colonne des libellés : figée à gauche, réglable à la poignée (colonnes.js pose --largeur-fige-g1), coupée par « … » avec le texte entier en info-bulle. */
.table-tresorerie { --largeur-fige-g1: 300px; }
.table-tresorerie thead th { z-index: 3; }
.table-tresorerie th.fige-g1, .table-tresorerie td.fige-g1 {
    position: sticky; left: 0; z-index: 2; width: var(--largeur-fige-g1, 300px); min-width: var(--largeur-fige-g1, 300px); max-width: var(--largeur-fige-g1, 300px);
    background: var(--fond-carte); border-right: 1px solid var(--bord-fort);
}
.table-tresorerie thead th.fige-g1 { z-index: 4; background: var(--fond-info); }
.table-tresorerie .titre-section td.fige-g1 { background: var(--fond-info); }
.table-tresorerie .solde-ligne td.fige-g1 { background: color-mix(in srgb, var(--accent) 7%, var(--fond-carte)); }
.treso-libelle { display: flex; align-items: center; min-width: 0; }
.treso-libelle-texte { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treso-libelle .treso-info { flex: none; }
/* Une case qui cache des pièces se voit : la main, et le montant souligné au survol. */
.table-tresorerie td.cliquable:hover { text-decoration: underline; }

/* Les réglages de l'entité : le bouton tient sur une ligne. */
.treso-reglages-ligne .btn-carre { width: auto; height: auto; min-height: 30px; flex-direction: row; gap: 6px; padding: 4px 10px; white-space: nowrap; }
.treso-boite .treso-reglages-ligne select { width: auto; }
.boite.treso-boite-soldes { width: min(980px, 96vw); }

/* L'onglet « Indicateurs » : les cartes, le graphique, les clients dans l'échu. */
.corps-tresorerie.treso-bord { overflow: auto; gap: 10px; }
.treso-kpis { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.treso-kpi {
    display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 4px 10px; cursor: help;
    border: 1px solid var(--bord); border-left: 3px solid var(--aide-teinte); border-radius: var(--r); background: var(--fond-carte);
}
.treso-kpi.alerte { border-left-color: var(--rouge); }
.treso-kpi-titre, .treso-kpi-sous { color: var(--texte-doux); overflow-wrap: anywhere; }
.treso-kpi-titre { font-size: 12px; }
.treso-kpi-sous { font-size: 11.5px; }
.treso-kpi-valeur { font-size: 18px; color: var(--texte); white-space: nowrap; }
.treso-kpi.alerte .treso-kpi-valeur, .treso-point-bas-phrase.alerte { color: var(--treso-rouge-texte); }
.treso-bord-bas { flex: 1 0 auto; min-height: 300px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 10px; }
.treso-bord-bas > .cadre { min-height: 0; display: flex; flex-direction: column; }
.treso-graphique .corps-volet.treso-graphique-corps { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; overflow: hidden; }
.treso-graphique-corps > p { flex: none; margin: 0; }
.treso-point-bas-phrase { font-weight: 600; }
.treso-clients-echu .corps-volet { flex: 1 1 auto; min-height: 0; overflow: auto; }
.treso-legende { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; font-weight: 400; color: var(--texte-doux); }
.treso-cle { display: inline-block; width: 12px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.treso-cle.enc { background: var(--vert); }
.treso-cle.dec { background: var(--rouge); }
.treso-cle.solde { height: 3px; vertical-align: 3px; background: var(--aide-teinte); }
.treso-cle.seuil { height: 0; vertical-align: 3px; border-top: 2px dashed var(--rouge); }
/* Le SVG s'étire à la place donnée ; axes, points et bulles sont en HTML, à leur taille réelle. */
.treso-graphe { position: relative; flex: 1 1 auto; min-height: 170px; }
.treso-graphe-axe { position: absolute; left: 0; top: 10px; bottom: 26px; width: 62px; }
.treso-graphe-axe span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--texte-doux); white-space: nowrap; }
.treso-graphe-zone { position: absolute; left: 64px; right: 8px; top: 10px; bottom: 26px; }
.treso-graphe-zone svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.treso-grille { stroke: var(--bord); stroke-width: 1; }
.treso-zero { stroke: var(--texte-doux); stroke-width: 1.5; }
.treso-barre-enc { fill: var(--vert); opacity: .85; }
.treso-barre-dec { fill: var(--rouge); opacity: .85; }
.treso-graphe .treso-trace { stroke: var(--aide-teinte); stroke-width: 2.5; }
.treso-graphe-point { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--fond-carte); border: 2px solid var(--aide-teinte); pointer-events: none; }
.treso-graphe-point.sous { background: var(--rouge); border-color: var(--rouge); }
.treso-graphe-point.bas { width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 3px solid var(--rouge); }
.treso-graphe-seuil { position: absolute; right: 0; transform: translateY(-115%); font-size: 11px; color: var(--treso-rouge-texte); pointer-events: none; }
.treso-creneau { position: absolute; top: 0; bottom: 0; }
.treso-creneau:hover, .treso-creneau:focus-visible { background: color-mix(in srgb, var(--aide-teinte) 8%, transparent); outline: none; }
.treso-bulle {
    display: none; position: absolute; top: 4px; left: 50%; z-index: 6; min-width: 210px; padding: 6px 10px; flex-direction: column; gap: 2px;
    background: var(--fond-carte); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: var(--r); box-shadow: var(--ombre-flottant);
    font-size: 12px; white-space: nowrap; pointer-events: none;
}
.treso-bulle span { display: flex; justify-content: space-between; gap: 14px; }
.treso-creneau.a-droite .treso-bulle { left: auto; right: 50%; }
.treso-creneau:hover .treso-bulle, .treso-creneau:focus-visible .treso-bulle { display: flex; }
.treso-graphe-x { position: absolute; left: 64px; right: 8px; bottom: 0; height: 22px; }
.treso-graphe-x span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 11px; color: var(--texte-doux); white-space: nowrap; }

/* L'onglet « Contrôles » : une ligne par contrôle, et le pointage qui le détaille. */
.corps-tresorerie.treso-controles { overflow: auto; gap: 10px; }
.treso-controles-intro { flex: none; margin: 0; }
.treso-controle { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; align-items: center; gap: 14px; padding: 10px 14px; }
.treso-controle-texte { display: flex; flex-direction: column; gap: 4px; }
.treso-controle-texte span { font-size: 13px; color: var(--texte-doux); }
.treso-controle-chiffres { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
@media (max-width: 900px) {
    .treso-controle, .treso-bord-bas { grid-template-columns: minmax(0, 1fr); }
}
/* Le rouge de la charte (#a4262c) passe à 2,4 sur le fond sombre : un rouge clair pour le texte. */
:root { --treso-rouge-texte: var(--rouge); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --treso-rouge-texte: #ff8a8f; } }
html[data-theme="sombre"] { --treso-rouge-texte: #ff8a8f; }

/* ── FEN_Tresorerie : finitions du 2026-10-22 ─────────────────────────────────────────── */
/* Les notes sous le tableau restent à gauche quand il défile en largeur. */
.defile-tresorerie > .treso-notes { position: sticky; left: 0; z-index: 5; padding: 6px 2px 0; }
.treso-entete { gap: 16px; }
.treso-entete .onglets-plan { padding: 0; border-bottom: none; background: none; }
/* La bande des avertissements : une ligne repliée, « détail » pour la liste. */
.treso-avertissements { display: flex; align-items: flex-start; gap: 10px; padding-top: 4px; padding-bottom: 4px; -webkit-line-clamp: unset; }
.treso-avert-texte { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treso-avert-liste { flex: 1 1 auto; min-width: 0; margin: 0; padding-left: 18px; }
.treso-avert-bascule { flex: none; color: inherit; text-decoration: underline; }

/* ── Veille des exposants : le budget de l'IA et l'annonce du lot empilés, le pied tient sur une rangée à 1024 px ── */
.veille-pied-infos { display: flex; flex-direction: column; gap: 2px; max-width: 230px; line-height: 1.25; }

/* ── Planning de pose : en fenêtre basse, les cartes à planifier défilent dans leur cadre au lieu de passer sous le pied ── */
@media (max-height: 700px) { .ecran-pose .pose-aplanifier { min-height: 0; overflow: hidden; } }

/* ── Fiche de l'entité, onglet Identité : « Représentant — prénom / qualité » sur une ligne à 1024 px ── */
.colonnes-referentiel .grille-fiche.grille-ao-identite { grid-template-columns: 160px minmax(0, 1fr) 160px minmax(0, 1fr); }
.grille-fiche.grille-ao-identite > label { white-space: nowrap; }

/* ── Layout/ResumeFactureFournisseur : un mode de règlement ou une observation longs reviennent à la ligne ── */
.rff-val:not(.rff-montant) { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }

/* ── FEN_Tresorerie : détail d'une case dans un volet à droite, et simulation des soldes de banque (2026-10-22) ── */
.ecran-tresorerie:focus, .treso-volet-case:focus { outline: none; }
.treso-chargement { flex: 1; display: flex; align-items: center; justify-content: center; }
.treso-chargement .jauge { width: min(420px, 80%); }
/* Le tableau et son volet côte à côte : le tableau défile dans son cadre, la page jamais en largeur. */
.treso-tableau-volet { flex: 1 1 auto; min-height: 0; display: flex; gap: 8px; }
.treso-tableau-volet > .defile-tresorerie { flex: 1 1 0; min-width: 0; }
.treso-volet-case { flex: 0 0 clamp(300px, 32%, 420px); min-width: 0; }
.treso-volet-titre { align-items: flex-start; }
.treso-volet-intitule { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.treso-volet-intitule b { overflow-wrap: anywhere; }
.treso-volet-croix { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--r); cursor: pointer; color: var(--texte); }
.treso-volet-croix:hover { background: var(--accent-survol); border-color: var(--accent); }
.treso-volet-croix .icone { width: 14px; height: 14px; }
.treso-volet-total { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--bord); font-size: 15px; }
.treso-volet-total .doux { font-size: 12.5px; }
.treso-pieces { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: 0; list-style: none; }
.treso-pieces > li { border-bottom: 1px solid var(--bord); }
.treso-piece { display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; padding: 6px 10px; text-align: left; font-size: 13px; background: none; border: none; color: var(--texte); }
button.treso-piece { cursor: pointer; }
button.treso-piece:hover { background: var(--accent-survol); }
.treso-piece-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.treso-piece-nom, .treso-piece-detail { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.treso-piece-nom { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.treso-piece-montant { flex: none; white-space: nowrap; }
.treso-piece-bas { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.treso-piece-tiers { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treso-piece-echeance { flex: none; white-space: nowrap; }
.treso-piece-detail { font-size: 12px; }
/* L'onglet Indicateurs : la simulation au-dessus des clients dans l'échu, dans la même colonne. */
.treso-bord-bas { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
.treso-colonne-droite { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.treso-colonne-droite > .cadre { min-height: 0; display: flex; flex-direction: column; }
.treso-colonne-droite > .treso-simulation { flex: 0 0 auto; }
.treso-colonne-droite > .treso-clients-echu { flex: 1 1 auto; min-height: 120px; }
.treso-simulation.active { border-color: var(--bord-attention); }
.treso-simulation-corps { padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.treso-simulation-corps p { margin: 0; }
.treso-sim-liste { max-height: 230px; overflow: auto; display: flex; flex-direction: column; }
.treso-sim-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, auto) 112px; gap: 8px; align-items: center; padding: 2px 0; font-size: 13px; }
.treso-sim-entete { font-size: 12px; position: sticky; top: 0; background: var(--fond-carte); }
.treso-sim-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.treso-sim-enregistre { white-space: nowrap; color: var(--texte-doux); }
.treso-sim-ligne.modifie .treso-sim-enregistre { text-decoration: line-through; }
.treso-sim-ligne .champ-montant { width: 100%; box-sizing: border-box; padding: 3px 6px; }
.treso-sim-ligne.modifie .champ-montant { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--texte-attention); }
.treso-sim-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 4px; border-top: 1px solid var(--bord); font-size: 13px; }
.treso-marque-simulation { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--fond-attention); border: 1px solid var(--bord-attention); color: var(--texte-attention); }
/* Deux boutons du pied portent un libellé long : ils s'élargissent, le libellé passe sur deux lignes. */
.pied-ets .btn-carre.treso-large { width: 118px; }
@media (max-width: 900px) {
    .treso-tableau-volet { flex-direction: column; }
    .treso-volet-case { flex: 0 0 auto; max-height: 45%; }
}

/* ── FEN_Ana_FacturesFournisseurs_Engt_Optimise : ancrage de la fiche — champs étirés, liste du fournisseur en surimpression, tables à défilement horizontal interne ── */
.choix-fournisseur-facture { flex: 1 1 280px; min-width: 200px; }
.choix-fournisseur-facture .liste-suggest { z-index: 60; min-width: 100%; width: max-content; max-width: min(520px, 90vw); }
.choix-fournisseur-facture .liste-suggest li { white-space: normal; }
.champ-g input.champ-montant { width: 100%; }
.defile-h { overflow-x: auto; max-width: 100%; }
.defile-h > .table-ventilation, .defile-h > .table-imputation { table-layout: auto; width: 100%; }
.table-ventilation th, .table-imputation th { position: relative; }  /* la poignée de largeur se place sur son en-tête, dans le cadre qui défile */
.table-ventilation .col-type { min-width: 150px; }
.table-ventilation td select[aria-label^="Régime de TVA"] { width: auto; min-width: 100%; }
.table-ventilation .col-taux, .table-ventilation .col-mini, .table-imputation .col-mini { min-width: 86px; }
.table-ventilation .col-taux { min-width: 112px; }
.table-imputation td.coupe { max-width: 260px; }
.ligne-reste { flex-wrap: wrap; }
/* Fenêtre détachée : le contenu n'a pas de hauteur propre, la fiche ferait défiler toute la fenêtre et emporterait le pied. */
.fenetre-detachee .contenu:has(> .ecran-factures-fournisseurs) { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.fenetre-detachee .contenu > .ecran-factures-fournisseurs { flex: 1 1 auto; height: auto; min-height: 0; }
.ecran-factures-fournisseurs .barre-reglages .case-ligne { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.ecran-factures-fournisseurs .barre-reglages .case-ligne input[type=date] { min-width: 0; flex: 1 1 110px; }
.ecran-factures-fournisseurs .barre-reglages .case-ligne select { min-width: 0; max-width: 100%; flex: 1 1 90px; }

/* ── Layout/TexteRiche : un texte riche (RTF en base) rendu en texte, deux lignes au plus, le tout en info-bulle ── */
.texte-riche-2l { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }

/* ── Layout/PointageDesAchats : un clic sur un en-tête trie la liste (croissant, puis décroissant) ── */
.grille th.tri-entete { cursor: pointer; user-select: none; white-space: nowrap; }
.grille th.tri-entete:hover { background: var(--accent-clair); }
.grille th.tri-entete.tri-actif { color: var(--accent-texte); }
.grille th .fleche-tri { margin-left: 4px; font-size: 10px; }

/* ---------- Titre de section d'un menu déroulant (Comptabilité : Clients / Fournisseurs / Pilotage et contrôles) ----------
   Regroupement fait côté application (Services/MenuComptabilite.cs) ; pas d'équivalent dans la fenêtre WinDev. */
.menu-titre-de-section {
    padding: 6px 12px 2px 15px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--texte-doux); cursor: default; user-select: none;
}

/* ---------- Jeton « attention » (Suivi des dossiers, Facturation stockage, Détail stockage…) : le balisage le posait, aucune règle ne le teintait ; le gris du jeton neutre tombait à 3,4 de contraste. */
.jeton.attention { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--texte-attention); }

/* ── Recette de nuit 2026-10-22 : prospection (Veille des exposants, Enrichissement, Transfert de portefeuille) et catalogue d'articles ──
   Libellés longs du pied : trois lignes ne tiennent pas dans 64 px, le bouton s'élargit. Lots de l'enrichissement : ils gardent une hauteur
   lisible quand l'aperçu est plein. Contrastes du thème clair (--texte-faible : 3,5 pour 1 sur fond blanc). */
.pied-ets .btn-carre.pied-large, .pied-ecran .btn-carre.pied-large { width: 124px; }
.ecran-stockages.enrichissement > section.cadre:nth-of-type(1) { flex: 1 1 auto; min-height: 220px; }
.ecran-stockages.enrichissement > section.cadre:nth-of-type(2) { flex: 0 0 auto; max-height: 190px; }
.ecran-transfert .tunnel-etapes li:not(.ici):not(.faite) { color: var(--texte-doux); }
.ecran-transfert .tunnel-etapes li:not(.ici):not(.faite) .pastille { color: var(--texte-doux); }
.ecran-transfert .choix-aide { color: var(--texte-doux); }
.ecran-transfert .jeton.exp-verifier { color: var(--texte-danger); }
.ecran-catalogue .jeton { color: var(--texte-doux); }

/* ============================================================================
   Liaison avec le serveur coupée (hôte web, App.razor) — recette de robustesse du 2026-10-22.
   Blazor pose components-reconnect-show / -failed / -rejected / -hide sur #components-reconnect-modal.
   ============================================================================ */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: block; }
#components-reconnect-modal .liaison-voile { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); }
#components-reconnect-modal .liaison-coupee,
#components-reconnect-modal .liaison-echec,
#components-reconnect-modal .liaison-perdue { display: none; margin: 0 0 10px 0; }
#components-reconnect-modal.components-reconnect-show .liaison-coupee,
#components-reconnect-modal.components-reconnect-failed .liaison-echec,
#components-reconnect-modal.components-reconnect-rejected .liaison-perdue { display: block; }
#components-reconnect-modal .boite-boutons.liaison-echec,
#components-reconnect-modal .boite-boutons.liaison-perdue { display: none; }
#components-reconnect-modal.components-reconnect-failed .boite-boutons.liaison-echec,
#components-reconnect-modal.components-reconnect-rejected .boite-boutons.liaison-perdue { display: flex; }
.liaison-rappel { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1900; max-width: min(640px, 92vw);
    padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--orange); background: var(--fond-carte); color: var(--texte);
    box-shadow: var(--ombre-flottant); cursor: pointer; font-size: 13px; }

/* ============================================================================
   Clavier (clavier.js, boites.js) — recette de robustesse du 2026-10-22.
   Le sous-menu de la barre s'ouvre au focus comme au survol ; une ligne ou une case « cliquable » montre où est le focus.
   ============================================================================ */
.item.sous:focus-within > .deroulant { display: block; }
.item.sous:focus-visible { background: var(--accent-survol); border-left-color: var(--accent); }
tr.cliquable:focus-visible, td.cliquable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.menu-contextuel .option-volet:focus-visible { outline: none; }
.menu-contextuel .option-volet:focus-visible > .intitule { background: var(--accent-clair); outline: 2px solid var(--accent); outline-offset: -2px; }

/* ============================================================================
   Contrôle prévisions / devis / factures (FEN_Uti_Ctrl_Prev_Ordre_FacCli) — une ligne par prévision : les colonnes de texte gardent une largeur lisible.
   ============================================================================ */
.controle-prevision .col-motif { min-width: 340px; }
.controle-prevision .col-remarque { min-width: 200px; }
.controle-prevision .col-nodevis { min-width: 110px; }

/* ==== FEN_Commandes (liste) : le numéro d'une commande annulée reste lisible (gris sur rouge à 2,1 en clair, 1,1 en sombre) et le texte atténué de sa ligne tient 4,5 (recette du 2026-10-23) ==== */
.table-cdes tr.cde-annulee td { color: var(--texte-doux); }
.table-cdes tr.cde-annulee td.num-annulee { color: #fff; }
html[data-theme="sombre"] .table-cdes tr.cde-annulee td.num-annulee { color: #1b1a19; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .table-cdes tr.cde-annulee td.num-annulee { color: #1b1a19; } }

/* ==== Planning de pose : la feuille du planning d'atelier donnait 136 px à chaque demi-journée de l'en-tête (24, 48 ou 12 px voulus) ; un mois demandait 9 600 px de défilement (recette du 2026-10-23) ==== */
.ecran-pose .pose-grille thead th:not(.pla-jour):not(.pla-semaine):not(.pose-equipe) { min-width: 0; }

/* ==== Fiche d'un écran pas encore porté : le badge de catégorie (Générique, Avancé, Spécial) en texte sombre sur le fond clair du mode sombre (blanc : 2,5 à 2,9) ==== */
html[data-theme="sombre"] .badge.Générique, html[data-theme="sombre"] .badge.Avancé, html[data-theme="sombre"] .badge.Spécial { color: #1b1a19; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .badge.Générique, html[data-theme="auto"] .badge.Avancé, html[data-theme="auto"] .badge.Spécial { color: #1b1a19; } }

/* ============================================================================
   Contrastes relevés à l'écran le 2026-10-23 (recette de nuit, cadre commun) : Commandes fournisseurs (numéro d'une commande annulée),
   Planning de production (n° de semaine en thème sombre, nom du poste), Recherche de devis (jeton de type en thème sombre).
   ============================================================================ */
.table-cdes td.num-annulee,
.table-cdes tr.cde-annulee td.num-annulee { color: var(--fond-carte); }   /* le gris d'une ligne annulée l'emportait sur le blanc du numéro : 2,1 clair, 1,1 sombre */
html { --pla-doux-lisible: #4b5563; --pla-semaine-rouge: #d32f2f; }
html[data-theme="sombre"] { --pla-doux-lisible: #c8c6c4; --pla-semaine-rouge: #ff8a80; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --pla-doux-lisible: #c8c6c4; --pla-semaine-rouge: #ff8a80; } }
html .pla-grille th .pla-groupe,
html .pla-ferie,
html .pla-semaine-visible { color: var(--pla-doux-lisible); }   /* le gris du poste sur son lavis : 3,2 à 3,8 */
html .pla-grille td.pla-semaine { color: var(--pla-semaine-rouge); }   /* le rouge de l'Excel sur le fond sombre : 3,3 */
html[data-theme="sombre"] .jeton.t-type { color: var(--texte); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .jeton.t-type { color: var(--texte); } }

/* ==== Recette de non-regression 2026-10-23 : --accent-fonce (#5e5d5d avec l'accent gris ardoise) ne sert pas de texte en sombre (2,2 a 2,8 de contraste : titre et avancement de la boite de facturation du devis, chiffre pondere de la fiche projet, onglet actif des fiches...). ==== */
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .chiffres-fiche.en-bandeau .chiffre.fort .valeur, html[data-theme="auto"] .entete-contrat .chiffre b.fort, html[data-theme="auto"] .onglet-detail.actif, html[data-theme="auto"] .etapes-emission .etape.courante, html[data-theme="auto"] .fiche-note, html[data-theme="auto"] .synthese-etat, html[data-theme="auto"] .pastille-evenement, html[data-theme="auto"] .ligne-modele.choisi, html[data-theme="auto"] .titre-section-tpl, html[data-theme="auto"] .titre-fac, html[data-theme="auto"] .pct-avancement, html[data-theme="auto"] .table-planning thead .jour-aujourdhui, html[data-theme="auto"] .lien-integrer, html[data-theme="auto"] .bandeau-echeance, html[data-theme="auto"] .table-factures .lien-facture:hover, html[data-theme="auto"] .lien-adresse:hover { color: var(--texte); } }
html[data-theme="sombre"] .chiffres-fiche.en-bandeau .chiffre.fort .valeur, html[data-theme="sombre"] .entete-contrat .chiffre b.fort, html[data-theme="sombre"] .onglet-detail.actif, html[data-theme="sombre"] .etapes-emission .etape.courante, html[data-theme="sombre"] .fiche-note, html[data-theme="sombre"] .synthese-etat, html[data-theme="sombre"] .pastille-evenement, html[data-theme="sombre"] .ligne-modele.choisi, html[data-theme="sombre"] .titre-section-tpl, html[data-theme="sombre"] .titre-fac, html[data-theme="sombre"] .pct-avancement, html[data-theme="sombre"] .table-planning thead .jour-aujourdhui, html[data-theme="sombre"] .lien-integrer, html[data-theme="sombre"] .bandeau-echeance, html[data-theme="sombre"] .table-factures .lien-facture:hover, html[data-theme="sombre"] .lien-adresse:hover { color: var(--texte); }

/* ==== Recette de non-regression 2026-10-23 : le titre des boites « Erreur » (Messages, FrontiereDOnglet) etait rouge sur la barre d'accent gris ardoise : 1,6 de contraste en clair, 4,0 en sombre. Le titre passe en blanc sur la barre d'accent. ==== */
.boite-titre.alerte { color: #fff; background: var(--accent); }

/* ============================================================================
   Mineurs des recettes de nuit des 22 et 23/10/2026, soldés sans décision métier. Un bandeau par écran.
   ============================================================================ */

/* Fiche société, tunnel de création, récapitulatif : une adresse de 300 caractères sans espace faisait défiler le récapitulatif en largeur à 1024 px. */
.recap-fiche dd { min-width: 0; overflow-wrap: anywhere; }

/* Tunnels de création (commande, projet) : la raison qui grise « Suivant » se lit à côté des boutons, elle n'est plus seulement une info-bulle. */
.raison-du-tunnel { margin-top: 10px; }

/* P.A.C. : le pied ajoutait ses 8 px de marge à ceux de l'écran (24 px du bord, 51 du bas, au lieu de 16 et 43). */
.ecran-pac > .pied-ets { margin: 0 -8px -8px; }

/* Veille des exposants : le texte de la fiche d'un salon touchait le bord de son cadre. */
.veille-fiche > .corps-volet { padding: 10px 14px; }

/* Enrichissement par le registre : même défaut sur le message de la liste vide. */
.ecran-stockages.enrichissement .cadre .vide { padding: 10px 14px; }

/* Boutons carrés : un libellé sur trois lignes ou un mot de 76 px était rogné de 2 px ; on laisse déborder dans la bordure au lieu de couper. */
.btn-carre:not(.fichier) { overflow: visible; }

/* Prévisions commerciales : les en-têtes « Entité » et « Affectation » (gras) ne tenaient pas dans leur colonne. */
.table-previsions .col-entite { width: 54px; }
.table-previsions .col-stand { width: 84px; }

/* Gestion utilisateurs : le filtre « Toutes les fonctions » était rogné par sa flèche, au profit de la zone de recherche. */
.ecran-utilisateur .filtres-liste select { flex: 1.8; }

/* Enregistrement des factures fournisseurs : le commentaire orange de la carte choisie (fond bleu clair) tombait à 4,43. */
.carte-referentiel.choisie .commentaire-carte { color: #86430f; }
html[data-theme="sombre"] .carte-referentiel.choisie .commentaire-carte { color: var(--orange); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .carte-referentiel.choisie .commentaire-carte { color: var(--orange); } }

/* Relances commerciales (liste de toutes les relances, virtualisée à 41 px) : la cellule de date sur deux lignes (36 px + marges + trait) faisait 43 px, et la liste sautait. */
.table-relances td { padding-top: 2px; padding-bottom: 2px; line-height: 17px; }

/* Fiche de l'affaire (et toute fiche à bandeau de chiffres) : le chiffre en gras (le pondéré) prenait l'accent foncé, gris sur noir en mode sombre : 2,8. */
html[data-theme="sombre"] .chiffres-fiche.en-bandeau .chiffre.fort .valeur { color: var(--accent-texte); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .chiffres-fiche.en-bandeau .chiffre.fort .valeur { color: var(--accent-texte); } }

/* ===== La longueur d'un champ de saisie (limites_de_saisie.js ; décision du 2026-10-23, D46) : le compteur « 45 / 50 » près de la limite, les zones de texte libre confortables ===== */
.compteur-saisie {
    position: fixed; z-index: 61; pointer-events: none; padding: 0 6px; border-radius: var(--r);
    font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums;
    background: var(--fond-carte); border: 1px solid var(--bord-fort); color: var(--texte-doux); box-shadow: var(--ombre);
}
.compteur-saisie[hidden] { display: none; }
.compteur-saisie.plein { background: var(--fond-attention); border-color: var(--bord-attention); color: var(--texte-attention); font-weight: 600; }
.compteur-saisie.bute { animation: compteur-bute .28s ease-out; }
@keyframes compteur-bute { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .compteur-saisie.bute { animation: none; } }
/* Une zone de texte libre se redimensionne en hauteur (les règles de chaque écran, plus précises, gardent la main). */
:where(textarea) { resize: vertical; }
textarea.texte-libre { min-height: 6.5em; }

/* ============================================================================
   Dossier technique, « Accès Compte Client Commande Technique » : les mots de passe client sont masqués,
   un œil les montre le temps de les lire. Fenêtre d'origine : FEN_Dossier_Technique.
   ============================================================================ */
.champ-secret { display: flex; gap: 6px; align-items: center; }
.champ-secret input { flex: 1; min-width: 0; }
.champ-secret input[readonly] { background-color: var(--fond-gris); color: var(--texte-doux); }
.champ-secret .btn-oeil { flex: none; }

/* ============================================================================
   PAC, « Affaires de l'année » : un montant qui est la moyenne de plusieurs devis le dit à côté du chiffre.
   Fenêtre d'origine : FEN_PAC (Table_Affaires).
   ============================================================================ */
.moyenne-devis { margin-left: 6px; white-space: nowrap; }

/* ==========================================================================
   Alertes des commissions et affectation des alertes (écrans neufs, 2026-10-23, FEN_Alertes_Commissions / FEN_Affectation_Alertes).
   Liste à gauche, fiche à droite (§11nonies) : .ecran-referentiel, .cadre, .colonne-liste, .colonne-detail et .boutons-referentiel sont ceux des
   référentiels ; seule la grille change, parce que la liste des alertes est une table à colonnes réglables et non des cartes.
   ========================================================================== */
.grille-alertes-commissions {
    flex: 1; min-height: 0; display: grid;
    grid-template-columns: minmax(420px, 1.4fr) minmax(300px, 1fr); gap: 10px;
}
.grille-alertes-commissions > .cadre { display: flex; flex-direction: column; min-height: 0; }
.grille-alertes-commissions .colonne-detail .corps-volet { padding: 8px 10px; }
.message-alerte { white-space: pre-wrap; overflow-wrap: anywhere; }
.affectation-cibles { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.affectation-ajout { margin-top: 8px; }

/* ===== Dossier technique non stand : volets Société, Détail du lieu, Archivage, Synthèses (FEN_Dossier_Technique_LITE_2025_Optimise, Onglet1[2], [3], [7], [22]) ===== */
.ecran-dossier-technique .volet-societe-dt { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.ecran-dossier-technique .volet-societe-dt > .blocs-dt { flex: none; column-count: 3; column-gap: 12px; }
@media (min-width: 1600px) { .ecran-dossier-technique .volet-societe-dt > .blocs-dt { column-count: 4; } }
@media (max-width: 1399px) { .ecran-dossier-technique .volet-societe-dt > .blocs-dt { column-count: 2; } }
@media (max-width: 800px) { .ecran-dossier-technique .volet-societe-dt > .blocs-dt { column-count: 1; } }
.ecran-dossier-technique .contacts-projet-dt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; flex: 1; min-height: 190px; }
.ecran-dossier-technique .contacts-projet-dt > .cadre { min-height: 0; }
@media (max-width: 1100px) { .ecran-dossier-technique .contacts-projet-dt { grid-template-columns: minmax(0, 1fr); } }
.ecran-dossier-technique .champ-lien-dt { display: flex; align-items: center; gap: 8px; }
.ecran-dossier-technique .champ-lien-dt input { flex: 1; min-width: 0; }
.ecran-dossier-technique .lien-dt { flex: none; color: var(--accent-texte); text-decoration: underline; }
.ecran-dossier-technique .pleine-largeur-dt { column-span: all; margin: 4px 2px 0; }
.ecran-dossier-technique .syntheses-dt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1; min-height: 0; }
@media (max-width: 800px) { .ecran-dossier-technique .syntheses-dt { grid-template-columns: minmax(0, 1fr); } }
.ecran-dossier-technique .synthese-dt { display: flex; flex-direction: column; gap: 4px; min-height: 240px; padding: 4px 10px 8px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); }
.ecran-dossier-technique .synthese-dt textarea { flex: 1; min-height: 200px; resize: vertical; padding: 4px 6px; font: inherit; }

/* ============================================================================
   Page introuvable (D36, 2026-10-23) : toute adresse inconnue, dans l'hôte web et dans le bureau.
   ============================================================================ */
.page-introuvable { display: flex; justify-content: center; padding: 14vh 16px 0; }
.page-introuvable .boite-corps p { margin: 0 0 8px; }
.page-introuvable a.btn-carre { width: auto; min-width: 76px; padding: 0 10px; text-decoration: none; color: inherit; }
.page-introuvable a.btn-carre.primaire { color: #fff; }

/* ============================================================================
   Validation des commandes (FEN_VALIDATION_COMMANDES_V_2023_05) : la case de sélection et la ligne cochée.
   ============================================================================ */
.validation-cde .col-case { width: 34px; min-width: 34px; max-width: 34px; text-align: center; }
.validation-cde tr.coche td { background: var(--accent-clair); }
/* Les ruptures de Table_Commandes (un groupe par contrôle du devis) et les couleurs de lfct_Mise_En_Forme_Table_Commande :
   MP en gris, statut annulé en rouge, total HT à zéro en bleu. */
.validation-cde tr.ligne-rupture td { background: var(--fond-gris); border-top: 1px solid var(--bord); cursor: pointer; font-size: 12px; }
.validation-cde tr.ligne-rupture td .chevron { display: inline-block; width: 14px; color: var(--texte-faible); }
.validation-cde td.cde-mp { background: var(--fond-gris); }
.validation-cde td.cde-annulee { background: var(--rouge-pastel); }
.validation-cde td.cde-zero { background: var(--fond-info); }

/* ============================================================================
   Planning de pose (menu Technique) : le volet de la case choisie reste dans sa colonne.
   Sans cela, les listes du formulaire (chantier, personne) imposaient leur largeur propre : 443 px dans un volet de 243, champs coupes et ascenseur horizontal.
   ============================================================================ */
.ecran-pose .pose-volet, .ecran-pose .pose-volet-contenu, .ecran-pose .pose-fiche { grid-template-columns: minmax(0, 1fr); }
.ecran-pose .pose-volet { min-width: 0; }
.ecran-pose .pose-volet select, .ecran-pose .pose-volet textarea, .ecran-pose .pose-volet input { max-width: 100%; }

/* ============================================================================
   Enregistrement des factures fournisseurs : les deux observations de la pièce, côte à côte sur toute la largeur.
   Fenêtre d'origine : FEN_Ana_FacturesFournisseurs_Engt_Optimise.
   ============================================================================ */
.observations-piece-ff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 18px; margin: 6px 0 4px; }
.observations-piece-ff > label { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 0 8px; align-items: start; min-width: 0; }
.observations-piece-ff > label > span { color: var(--texte-doux); padding-top: 4px; }
.observations-piece-ff textarea { width: 100%; min-height: 4.5em; resize: vertical; box-sizing: border-box; font: inherit; }
@media (max-width: 1100px) { .observations-piece-ff { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   Tableau de trésorerie (FEN_Tresorerie) : le seuil des prévisions en cours, le second solde en pointillés, le détail des affaires dans la bulle d'une période, et l'onglet Comparaison
   (la photo et ce qui s'est passé depuis).
   ============================================================================ */
.treso-seuil-previsions { white-space: nowrap; color: var(--texte); }
.treso-seuil-previsions select { width: auto; margin-left: 4px; }
.treso-cle.prev { height: 0; width: 16px; vertical-align: 3px; border-top: 2px dashed var(--aide-teinte); }
.treso-cle.contour { height: 8px; border: 1.5px solid var(--texte-doux); background: none; }
.treso-graphe .treso-trace-previsions { fill: none; stroke: var(--aide-teinte); stroke-width: 2.2; stroke-dasharray: 7 5; }
.treso-bulle .treso-bulle-titre { margin-top: 4px; padding-top: 3px; border-top: 1px solid var(--bord); font-weight: 600; }
.treso-bulle .treso-bulle-prevision { margin-top: 4px; padding-top: 3px; border-top: 1px solid var(--bord); }
.treso-bulle .treso-bulle-affaire { padding-left: 10px; font-size: 11.5px; color: var(--texte-doux); }
.treso-bulle .treso-bulle-affaire i { min-width: 0; max-width: 250px; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.treso-barre-enc.prevue, .treso-barre-dec.prevue { fill: none; stroke-width: 1.5; opacity: 1; }
.treso-barre-enc.prevue { stroke: var(--vert); }
.treso-barre-dec.prevue { stroke: var(--rouge); }
.corps-tresorerie.treso-comparaison { overflow: auto; gap: 10px; }
.treso-comp-entete { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.treso-comp-entete select { width: auto; max-width: 100%; margin-left: 6px; }
.treso-comp-phrase { flex: 1 1 280px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treso-comparaison > .treso-comp-graphique { flex: 0 0 330px; min-height: 0; max-height: none; display: flex; flex-direction: column; }
.treso-comparaison > .treso-comp-table { flex: none; }
.treso-comp-table .corps-volet { overflow: auto; }
.table-comparaison td.libelle-ligne { white-space: nowrap; }
.treso-graphe-point.prevu { border-style: dashed; }
.treso-graphe-point.reel { background: var(--aide-teinte); }

/* ============================================================================
   Commercial de la société (FEN_Com_Ets_Cal, le crayon de « Cml » de la page d'accueil société) et sa boîte de choix.
   ============================================================================ */
.boite.boite-cml { width: 700px; }
.boite-cml .liste-cml { max-height: 220px; min-height: 60px; overflow: auto; border: 1px solid var(--bord); border-radius: var(--r); margin-bottom: 12px; }
.boite-cml .liste-cml tbody tr { cursor: pointer; }
.boite-cml .liste-cml p { margin: 8px; }
.boite-cml .saisie-cml { display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; align-items: center; }
.boite-cml .qui-cml { display: flex; gap: 6px; }
.boite-cml .qui-cml input { flex: 1; }
.boite.boite-choix-cml { width: 560px; }
.boite-choix-cml .ligne-choix-cml { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.boite-choix-cml .ligne-choix-cml input[type=search] { flex: 1; }
.boite-choix-cml .liste-choix-cml { max-height: 320px; min-height: 80px; overflow: auto; border: 1px solid var(--bord); border-radius: var(--r); }
.boite-choix-cml .liste-choix-cml tbody tr { cursor: pointer; }
.boite-choix-cml .liste-choix-cml p { margin: 8px; }
.boite-choix-cml .jeton { margin-left: 6px; }

/* ============================================================================
   Règlements fournisseurs (FEN_Fac_Fourn_Reglt_Suivi_V_2024_07_optimise, FEN_Interfaces_Rglts_Fourn) : une facture dont la saisie n'est pas validée ne se règle pas.
   Elle reste visible, grisée, avec sa pastille de statut ; la case de sélection est désactivée.
   ============================================================================ */
:root { --fond-ff-importee: #cfe2f7; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --fond-ff-importee: #1f3a57; } }
html[data-theme="sombre"] { --fond-ff-importee: #1f3a57; }
.table-droits tr td.ff-statut-importe { background: var(--fond-ff-importee); color: var(--texte); }
.pastille-legende.ff-bleu { background: var(--fond-ff-importee); }
.table-droits tr.non-payable td:not([class*="ff-statut"]) { color: var(--texte-doux); font-style: italic; }
.table-droits td.case-grisee, .table-droits td.case-grisee input { cursor: not-allowed; }
.mention-non-validees { text-align: right; color: var(--texte-doux); }

/* ==== FEN_Tresorerie, lignes récurrentes datées (2026-10-23) : le bouton « Historique » sous chaque ligne, l'arrêt de la ligne, la boîte d'historique. ==== */
.treso-ligne-carte { display: flex; flex-direction: column; }
.treso-ligne-carte .treso-historique-bouton { align-self: flex-end; margin: -1px 8px 0; padding: 1px 10px; font: inherit; font-size: 12px; color: var(--texte); background: var(--fond-carte); border: 1px solid var(--bord); border-top: none; border-radius: 0 0 var(--r) var(--r); cursor: pointer; text-decoration: underline; }
.treso-ligne-carte .treso-historique-bouton:hover { border-color: var(--accent); }
.treso-arret { margin: 6px 0 0; padding: 4px 8px; border-left: 4px solid var(--orange); background: var(--fond-carte); color: var(--texte); font-size: 12.5px; }
.boite.treso-historique { width: min(860px, 96vw); max-height: 90vh; display: flex; flex-direction: column; }
.treso-historique .boite-corps { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; }
.treso-historique .boite-corps p { margin: 0; font-size: 12.5px; }
.treso-ligne-carte .carte-referentiel .ligne-bas { flex-wrap: wrap; white-space: normal; overflow: visible; }

/* ===== Menu contextuel : decale du pointeur (clic droit qui ouvrait le sous-menu des colonnes) =====
   Le menu s'ouvrait pile sous le pointeur : la premiere entree recevait le survol et se depliait. clavier.js garde l'essentiel ; ce decalage evite en plus que le pointeur soit sur une entree. */
.menu-contextuel { margin: 4px 0 0 6px; }

/* =====================================================================
   Prévisions (FEN_Previsions) : dans « À régulariser », une prévision sans devis reste listée mais ne se coche pas.
   ============================================================================ */
.liste-regularisation .case-ligne.inactif { opacity: .55; cursor: not-allowed; }

/* ==== Enregistrement des factures fournisseurs (FEN_Ana_FacturesFournisseurs_Engt_Optimise) : à 1024 px, la pastille de statut écrasait le nom du fournisseur de la carte à 3 px. ====
   La pastille passe à la ligne quand la colonne est trop étroite ; le nom garde sa place. */
.liste-pieces .carte-referentiel .ligne-haut { flex-wrap: wrap; row-gap: 2px; }
.liste-pieces .carte-referentiel .ligne-haut .nom { flex: 0 1 auto; min-width: 0; max-width: 100%; }

/* ============================================================================
   Pied commun des écrans, sur un téléphone : sous 600 px, les boutons passent à la ligne au lieu de sortir de l'écran
   (recette à 375 px du 2026-10-23 : « Actualiser » et « Fermer » de la validation des commandes étaient hors d'atteinte).
   Les boîtes larges se bornent à la largeur de l'écran.
   ============================================================================ */
@media (max-width: 600px) {
    .pied-ecran, .pied-ecran .barre-boutons { flex-wrap: wrap; row-gap: 6px; }
    .boite-regularisation, .boite-consigner { min-width: 0; max-width: calc(100vw - 32px); }

    /* Les pieds propres de quelques écrans (tunnels de création et assistant de logistique du devis, détail d'un contrat de stockage, éditeur de modèles, modèles de devis) :
       mêmes règles, ils portaient un flex sans retour à la ligne. */
    .tunnel-pied, .pied-detail, .pied-tpl, .pied-modeles { flex-wrap: wrap; row-gap: 6px; }
    .tunnel-pied .barre-boutons, .pied-detail .barre-boutons { flex-wrap: wrap; row-gap: 6px; margin-left: 0; justify-content: flex-end; }
    .tunnel-pied .jauge { flex: 1 1 100%; min-width: 0; }
    .pied-modeles .btn-carre { flex: 1 1 40%; }
}

/* ---- Recette tour 6 : le pied d'ecran a 375 px (tous les ecrans a pied-ecran) ----
   Sans retour a la ligne, Enregistrer / Annuler / Fermer sortaient a droite de la fenetre et n'etaient atteints qu'en defilant. */
@media (max-width: 640px) {
    .pied-ecran { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    .pied-ecran .barre-boutons { flex-wrap: wrap; }
}

/* ==== Pied commun à 375 px (recette tour 6, commandes livrables / dossier technique à traiter) : les boutons carrés de 64 px sur deux lignes
   sortaient de 25 px sous la fenêtre (Reçu en totalité, Fermer coupés). Sous 640 px ils passent à 48 px : deux lignes tiennent. ==== */
@media (max-width: 640px) {
    .pied-ets .btn-carre, .pied-ecran .btn-carre { height: 48px; padding: 2px 4px; font-size: 11px; line-height: 1.1; gap: 2px; }
    .pied-ets .btn-carre .icone, .pied-ecran .btn-carre .icone { width: 16px; height: 16px; }
}

/* ======================================================================
   FEN_Prod_Commande_Lignes_LocMultiProjets : les lignes de localisation et de transport
   d'une commande (fenêtre ouverte de la fiche de commande).
   ====================================================================== */
.boite-localisation { width: min(1000px, 96vw); max-height: 94vh; display: flex; flex-direction: column; }
.boite-localisation .boite-corps { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.boite-localisation .table-projets-loc,
.boite-localisation .table-etapes-loc { max-height: 150px; overflow: auto; }
.etiquette-loc { font-weight: 600; margin-top: 4px; }
.zone-localisation { width: 100%; box-sizing: border-box; font: inherit; resize: vertical; padding: 6px 8px; }
.choix-mode-loc { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.confirmation-loc { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--bord-fort); border-radius: 4px; }

/* ======================================================================
   BTN_Salon_Mois (prévisions) : Choix_Com_Salon en origine PREVSALONMOIS, les salons qui démarrent sur la période.
   ====================================================================== */
.boite-salons-mois { width: min(1100px, 96vw); max-height: 94vh; display: flex; flex-direction: column; }
.boite-salons-mois .boite-corps { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.boite-salons-mois .table-salons-mois { max-height: 55vh; overflow: auto; }

/* ---- Trésorerie par banque (le choix du compte au-dessus du tableau) ---- */
.treso-comptes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 4px 0 8px; }
.treso-comptes select { min-width: 200px; }

/* ======================================================================
   FI_Choix_Import_PAC : l'import d'une PAC. Couleur de la qualification de chaque ligne proposée.
   ====================================================================== */
/* Jetons par thème (contraste d'au moins 4,5 sur le fond de la table, mesuré dans les deux thèmes). */
:root { --imp-ec: #7a6400; --imp-cr: #2e7d46; --imp-ar: #2f6db5; --imp-ac: #9a5516; }
html[data-theme="sombre"] { --imp-ec: #e0c24a; --imp-cr: #6fc08a; --imp-ar: #8ab4f8; --imp-ac: #f0a868; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --imp-ec: #e0c24a; --imp-cr: #6fc08a; --imp-ar: #8ab4f8; --imp-ac: #f0a868; } }
.imp-qual-ec { color: var(--imp-ec); }
.imp-qual-cr { color: var(--imp-cr); }
.imp-qual-ar { color: var(--imp-ar); }
.imp-qual-ac { color: var(--imp-ac); }

/* ---- Ligne courante des tables de règlements (FEN_Rglts_Clients / FEN_Rglts_Fournisseurs) : le simple clic ne coche pas, il marque la ligne ; Ctrl+clic coche. ---- */
.table-droits tr.courante td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }

/* ---- Règlements clients : la boîte de saisie d'un règlement (FEN_Com_FacCli_Reglt_Optimise, Btn_Reglt_Tbl) ----
   Large (sans dépasser la fenêtre), la saisie en haut, un tableau sans défilement horizontal, montants alignés à droite, le reste en vert ou en rouge. */
.boite.saisie-reglement { width: min(1180px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.saisie-reglement .boite-corps { max-height: calc(100vh - 190px); overflow: auto; }
.saisie-reglement .grille-saisie-reglement { margin: 0 0 10px 0; }
.saisie-reglement .table-droits th { white-space: nowrap; }
.saisie-reglement .table-droits td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18em; }
.saisie-reglement .table-droits td.col-nombre, .saisie-reglement .table-droits th.col-nombre { text-align: right; font-variant-numeric: tabular-nums; }
.saisie-reglement .champ-montant { width: 9em; min-width: 7em; text-align: right; }
.recap-saisie-reglement { display: flex; justify-content: flex-end; gap: 24px; margin-top: 10px; font-size: 15px; }
.recap-saisie-reglement b { font-size: 17px; font-variant-numeric: tabular-nums; }
.recap-saisie-reglement b.en-retard { color: var(--rouge); }
.recap-saisie-reglement b.chiffre-juste { color: var(--vert); }
@media (max-width: 600px) { .recap-saisie-reglement { flex-direction: column; gap: 4px; align-items: flex-end; } }

/* ---- Colonnes réductibles sous leur contenu (toutes les tables réglables) : dès qu'une largeur est posée, la table passe en disposition fixe,
   le texte coupé se termine par « … » et son contenu entier est en info-bulle (colonnes.js). Les cellules à contrôles restent utilisables. ---- */
.reglable[data-largeurs] { table-layout: fixed; width: auto; }
.reglable[data-largeurs] :is(th, td) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reglable[data-largeurs] td > :is(div, a) { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.reglable[data-largeurs] td > :is(input:not([type=checkbox]), select, textarea) { max-width: 100%; min-width: 0; box-sizing: border-box; }


/* ======================================================================
   BTN_Verif_FichierInterface (les quatre interfaces comptables) : la relecture détaillée d'un fichier d'écritures.
   ====================================================================== */
.boite.boite-verification { width: 980px; max-width: 94vw; }
.boite-verification .boite-corps { max-height: 72vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.verif-fichier { margin: 0; }
.verif-titre { font-weight: 600; }
.verif-defile { max-height: 50vh; overflow: auto; }
.verif-illisibles { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.verif-illisibles code { overflow-wrap: anywhere; }
.reglable tr.piece-desequilibree td { color: var(--rouge); font-weight: 600; }

/* ======================================================================
   FEN_Production_Kanban (OPT_Suivie_Bureau_Méthode) : le planning usinage, une carte par chantier. Le fond d'une carte est calculé (pastel du chantier) :
   le texte y est posé en ligne, lisible dans les deux thèmes. Les jetons ne servent qu'aux pastilles et aux traits, lisibles sur ce fond clair.
   ====================================================================== */
:root {
    --kb-etat-rien: #d2d6d4; --kb-etat-programmation: #2e74c8; --kb-etat-usinage: #6c5ce0; --kb-etat-fini: #2e9e6b;
    --kb-or: #d4af37; --kb-argent: #bec2c9; --kb-bronze: #c68d52; --kb-rang-n: #78828f;
    --kb-or-texte: #463400; --kb-argent-texte: #3a3f46; --kb-bronze-texte: #422a12; --kb-rang-n-texte: #ffffff;
}
.ecran-kanban { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.kb-titre { font-weight: 600; }
.kb-tableau { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 10px; padding: 10px; overflow: auto; }
.kb-colonne { display: flex; flex-direction: column; min-height: 0; background: var(--fond-gris); border: 1px solid var(--bord); border-radius: var(--r); }
.kb-colonne.kb-depot { outline: 2px dashed var(--accent); outline-offset: -4px; }
.kb-entete { padding: 8px 10px; font-weight: 600; border-bottom: 1px solid var(--bord); display: flex; justify-content: space-between; align-items: center; }
.kb-nombre { font-weight: 400; color: var(--texte-doux); }
.kb-cartes { flex: 1; min-height: 60px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.kb-carte { position: relative; padding: 8px 10px 8px 16px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 6px; display: flex; flex-direction: column; gap: 4px; cursor: grab; }
.kb-carte.kb-en-main { opacity: .45; }
.kb-trait { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; border-radius: 6px 0 0 6px; background: var(--kb-etat-rien); }
.kb-etat-programmation .kb-trait { background: var(--kb-etat-programmation); }
.kb-etat-usinage .kb-trait { background: var(--kb-etat-usinage); }
.kb-etat-fini .kb-trait { background: var(--kb-etat-fini); }
.kb-rang { position: absolute; right: 8px; top: 8px; min-width: 24px; height: 24px; padding: 0 4px; box-sizing: border-box; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--kb-rang-n); color: var(--kb-rang-n-texte); }
.kb-rang-1 { background: var(--kb-or); color: var(--kb-or-texte); }
.kb-rang-2 { background: var(--kb-argent); color: var(--kb-argent-texte); }
.kb-rang-3 { background: var(--kb-bronze); color: var(--kb-bronze-texte); }
.kb-client { font-weight: 700; padding-right: 30px; overflow-wrap: anywhere; }
.kb-desig { font-size: 12px; opacity: .8; overflow-wrap: anywhere; }
.kb-remarque { width: 100%; box-sizing: border-box; }
.kb-coches { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.kb-coches label { display: inline-flex; align-items: center; gap: 4px; }


/* ---- Ligne courante des tables de règlements (FEN_Rglts_Clients / FEN_Rglts_Fournisseurs) : le simple clic ne coche pas, il marque la ligne ; Ctrl+clic coche. ---- */
.table-droits tr.courante td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }

/* ---- Règlements clients : la boîte de saisie d'un règlement (FEN_Com_FacCli_Reglt_Optimise, Btn_Reglt_Tbl) ----
   Large (sans dépasser la fenêtre), la saisie en haut, un tableau sans défilement horizontal, montants alignés à droite, le reste en vert ou en rouge. */
.boite.saisie-reglement { width: min(1180px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.saisie-reglement .boite-corps { max-height: calc(100vh - 190px); overflow: auto; }
.saisie-reglement .grille-saisie-reglement { margin: 0 0 10px 0; }
.saisie-reglement .table-droits th { white-space: nowrap; }
.saisie-reglement .table-droits td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18em; }
.saisie-reglement .table-droits td.col-nombre, .saisie-reglement .table-droits th.col-nombre { text-align: right; font-variant-numeric: tabular-nums; }
.saisie-reglement .champ-montant { width: 9em; min-width: 7em; text-align: right; }
.recap-saisie-reglement { display: flex; justify-content: flex-end; gap: 24px; margin-top: 10px; font-size: 15px; }
.recap-saisie-reglement b { font-size: 17px; font-variant-numeric: tabular-nums; }
.recap-saisie-reglement b.en-retard { color: var(--rouge); }
.recap-saisie-reglement b.chiffre-juste { color: var(--vert); }
@media (max-width: 600px) { .recap-saisie-reglement { flex-direction: column; gap: 4px; align-items: flex-end; } }

/* ---- Colonnes réductibles sous leur contenu (toutes les tables réglables) : dès qu'une largeur est posée, la table passe en disposition fixe,
   le texte coupé se termine par « … » et son contenu entier est en info-bulle (colonnes.js). Les cellules à contrôles restent utilisables. ---- */
.reglable[data-largeurs] { table-layout: fixed; width: auto; }
.reglable[data-largeurs] :is(th, td) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reglable[data-largeurs] td > :is(div, a) { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.reglable[data-largeurs] td > :is(input:not([type=checkbox]), select, textarea) { max-width: 100%; min-width: 0; box-sizing: border-box; }

/* ======================================================================
   FEN_Ana_FacturesFournisseurs_Engt_Optimise : l'enregistrement des factures fournisseurs. Pastilles de statut propres à l'écran,
   n° de pièce en grand, numéro d'étape dans les titres (1, 2, 3), encart d'imputation d'une commande, fiche dense sans défilement.
   ====================================================================== */
/* Jetons par thème : fond et texte de chaque pastille, contraste d'au moins 4,5 mesuré dans les deux thèmes (banc : FacturesFournisseursEcranTests). */
:root {
    --ffp-0-f: #dbeafe; --ffp-0-t: #1e3a8a;
    --ffp-retraiter-f: #fde6c8; --ffp-retraiter-t: #7a3b00;
    --ffp-1-f: #d3f0dc; --ffp-1-t: #14532d;
    --ffp-9-f: #e7ddf8; --ffp-9-t: #4c1d95;
    --ffp-bloquee-f: #fbd7d7; --ffp-bloquee-t: #7f1d1d;
    --ffp-regule-f: #dfe6ee; --ffp-regule-t: #1f3347;
}
html[data-theme="sombre"] {
    --ffp-0-f: #1e3a5f; --ffp-0-t: #bfdbfe;
    --ffp-retraiter-f: #5c3a0e; --ffp-retraiter-t: #fcd9a0;
    --ffp-1-f: #14452a; --ffp-1-t: #bbf7d0;
    --ffp-9-f: #3b2a6b; --ffp-9-t: #ddd0fb;
    --ffp-bloquee-f: #5c1d1d; --ffp-bloquee-t: #fecaca;
    --ffp-regule-f: #2f3b4a; --ffp-regule-t: #d4dde8;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --ffp-0-f: #1e3a5f; --ffp-0-t: #bfdbfe;
        --ffp-retraiter-f: #5c3a0e; --ffp-retraiter-t: #fcd9a0;
        --ffp-1-f: #14452a; --ffp-1-t: #bbf7d0;
        --ffp-9-f: #3b2a6b; --ffp-9-t: #ddd0fb;
        --ffp-bloquee-f: #5c1d1d; --ffp-bloquee-t: #fecaca;
        --ffp-regule-f: #2f3b4a; --ffp-regule-t: #d4dde8;
    }
}
.pastille-statut.ffp-0 { background: var(--ffp-0-f); color: var(--ffp-0-t); border: 1px solid color-mix(in srgb, var(--ffp-0-t) 35%, transparent); font-weight: 600; }
.pastille-statut.ffp-retraiter { background: var(--ffp-retraiter-f); color: var(--ffp-retraiter-t); border: 1px solid color-mix(in srgb, var(--ffp-retraiter-t) 35%, transparent); font-weight: 600; }
.pastille-statut.ffp-1 { background: var(--ffp-1-f); color: var(--ffp-1-t); border: 1px solid color-mix(in srgb, var(--ffp-1-t) 35%, transparent); font-weight: 600; }
.pastille-statut.ffp-9 { background: var(--ffp-9-f); color: var(--ffp-9-t); border: 1px solid color-mix(in srgb, var(--ffp-9-t) 35%, transparent); font-weight: 600; }
.pastille-statut.ffp-bloquee { background: var(--ffp-bloquee-f); color: var(--ffp-bloquee-t); border: 1px solid color-mix(in srgb, var(--ffp-bloquee-t) 35%, transparent); font-weight: 600; }
.pastille-regule { font-size: 11px; padding: 1px 8px; border-radius: 9px; background: var(--ffp-regule-f); color: var(--ffp-regule-t); border: 1px solid color-mix(in srgb, var(--ffp-regule-t) 35%, transparent); font-weight: 600; white-space: nowrap; }

/* Le n° de pièce, ce que l'on cherche des yeux dans la liste comme dans la fiche. */
.ecran-factures-fournisseurs .no-piece-carte { flex: 0 0 auto; font-size: 16px; font-weight: 700; color: var(--texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecran-factures-fournisseurs .titre-piece { font-size: 15px; }
.ecran-factures-fournisseurs .no-piece-titre { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Le numéro d'étape : devant le fournisseur (1) et dans le titre des sections (2, 3). */
.ecran-factures-fournisseurs .etape-no { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--accent); background: var(--accent-clair); color: var(--texte); font-weight: 700; font-size: 11px; }
.ecran-factures-fournisseurs .bandeau-bloc .etape-no { margin-right: 2px; }

/* La fiche tient sans défilement : titres en casse normale, observations sur deux lignes, tableaux serrés. */
.ecran-factures-fournisseurs .colonne-detail .bandeau-bloc { text-transform: none; letter-spacing: 0; font-size: 13px; }
.ecran-factures-fournisseurs .observations-piece-ff { margin: 2px 0; }
.ecran-factures-fournisseurs .observations-piece-ff textarea { min-height: 0; padding-top: 2px; padding-bottom: 2px; }
.ecran-factures-fournisseurs details.proposition-commande > summary { cursor: pointer; }
.ecran-factures-fournisseurs .defile-h > .table-imputation { table-layout: fixed; width: 100%; }
.ecran-factures-fournisseurs .table-imputation .col-mini { min-width: 0; width: 76px; }
.ecran-factures-fournisseurs .table-imputation td.coupe, .ecran-factures-fournisseurs .table-imputation td.lib { max-width: none; }
.ecran-factures-fournisseurs .imputer-reste { margin-top: 2px; padding-top: 2px; }
.ecran-factures-fournisseurs .ligne-reste { flex-wrap: nowrap; gap: 6px; }
.ecran-factures-fournisseurs .ligne-reste .sous-titre-bloc { margin: 0; white-space: nowrap; }
.ecran-factures-fournisseurs .ligne-reste select { flex: 0 1 220px; }
.ecran-factures-fournisseurs .ligne-reste input[type=text] { flex: 1 1 120px; }

@container fiche (min-width: 700px) { .ecran-factures-fournisseurs .grille-dense { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ecran-factures-fournisseurs .colonne-detail .corps-volet { padding: 4px 8px; }
.ecran-factures-fournisseurs .colonne-detail .groupe-referentiel { gap: 3px; }
.ecran-factures-fournisseurs .colonne-detail input:not([type=checkbox]):not([type=radio]), .ecran-factures-fournisseurs .colonne-detail select { height: 23px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.ecran-factures-fournisseurs .champ-g { min-height: 24px; }
.ecran-factures-fournisseurs .ligne-fournisseur { min-height: 24px; }
.ecran-factures-fournisseurs .ligne-type-piece { padding-left: 0; gap: 4px 12px; flex-wrap: wrap; }

.ecran-factures-fournisseurs .colonne-commandes .carte-referentiel { padding: 3px 8px; }
.ecran-factures-fournisseurs .defile-h > .table-ventilation .col-type { min-width: 100px; }
.ecran-factures-fournisseurs .table-ventilation .col-taux { min-width: 96px; width: 96px; }
.ecran-factures-fournisseurs .table-ventilation .col-mini { min-width: 0; width: 76px; }
.ecran-factures-fournisseurs .table-ventilation .col-action { width: 60px; }
.ecran-factures-fournisseurs .colonne-dense .frais-annexes { margin: 0; }
.ecran-factures-fournisseurs .table-ventilation td select[aria-label^="Régime de TVA"] { width: 100%; min-width: 0; max-width: 200px; }
.ecran-factures-fournisseurs .defile-h > .table-ventilation td select { max-width: 200px; }

/* L'encart d'imputation d'une commande : une grille serrée de deux lignes, puis une seule ligne de saisie. */
.ecran-factures-fournisseurs .encart-imputation { gap: 3px; padding: 4px 8px; flex: 0 0 auto; }
.ecran-factures-fournisseurs .encart-titre { display: flex; align-items: center; gap: 6px; font-weight: 600; min-height: 20px; }
.ecran-factures-fournisseurs .encart-titre .bouton-icone { padding: 0 2px; }
.ecran-factures-fournisseurs .encart-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; margin: 0; }
.ecran-factures-fournisseurs .encart-chiffres > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; border-bottom: 1px dotted var(--bord-fort); min-width: 0; }
.ecran-factures-fournisseurs .encart-chiffres dt { color: var(--texte-doux); font-size: 12px; white-space: nowrap; }
.ecran-factures-fournisseurs .encart-chiffres dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecran-factures-fournisseurs .encart-chiffres dd.negatif { color: var(--rouge); }
.ecran-factures-fournisseurs .saisie-encart { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ecran-factures-fournisseurs .champ-ligne { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--texte-doux); }
.ecran-factures-fournisseurs .champ-ligne input { min-width: 0; }
.ecran-factures-fournisseurs .champ-ligne input.champ-montant { width: 84px; text-align: right; }
.ecran-factures-fournisseurs .champ-ligne.grand { flex: 1 1 60px; }
.ecran-factures-fournisseurs .champ-ligne.grand input { width: 100%; }

/* Les projets d'une commande en détail (BTN_Detail_Tbl_Cde) : un par ligne. */
.ecran-factures-fournisseurs .projets-carte { margin-top: 3px; padding-left: 6px; border-left: 2px solid var(--bord-fort); font-size: 12px; color: var(--texte-doux); text-align: left; white-space: normal; }
.ecran-factures-fournisseurs .detail-projets > div { white-space: normal; }
.boite.boite-ff-cde { width: min(900px, 96vw); }
.boite-ff-cde .ff-cde-resume { margin-bottom: 8px; }
.boite-ff-cde .negatif { color: var(--rouge); }
.table-ff-cde td.coupe { max-width: 260px; }

/* ======================================================================
   FEN_Liste_Projet_Placard (Technique > Placard société) : la liste des projets à cocher pour l'impression des placards.
   ====================================================================== */
.placards-liste { flex: 1; min-height: 0; overflow: auto; }

/* ======================================================================
   FEN_Uti_Placard (Technique > Placard société) : le placard composé, bloc par bloc, aux tailles que WinDev fixait (nom 48 points, adresse 36, contact 14),
   et la loupe « Associer les adresses » (Choix_Societe, origine PLACARD).
   ====================================================================== */
.placard-zone { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; background: var(--fond-carte); }
.placard-ligne { display: flex; align-items: flex-start; gap: 8px; }
.placard-bloc { flex: 1; min-width: 0; box-sizing: border-box; text-align: center; font-family: "Times New Roman", Times, serif; resize: none; border: 1px dashed var(--bord); background: transparent; color: inherit; }
.placard-nom { font-size: 48pt; font-weight: 700; line-height: 1.1; }
.placard-adresse { font-size: 36pt; font-weight: 700; line-height: 1.15; }
.placard-contact { font-size: 14pt; line-height: 1.3; }
.placard-retrait { flex: none; }
.choix-types { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; border: 1px solid var(--bord); border-radius: var(--r); padding: 6px 10px; }
.choix-types-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.choix-recherche { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }

/* ======================================================================
   FEN_VALIDATION_COMMANDES_V_2023_05 : le dépassement d'une commande (montant, justificatif, détail par ligne de devis).
   ====================================================================== */
.depassement-montant { color: var(--rouge); font-weight: 600; font-variant-numeric: tabular-nums; }
.aucun-justificatif { color: var(--rouge); font-weight: 600; }
div.aucun-justificatif { padding: 6px 10px; border: 1px solid var(--bord-danger); border-radius: var(--r); background: var(--fond-danger); color: var(--texte-danger); }
.validation-cde .justificatif-cellule { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boite.boite-depassement { width: min(980px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.boite-depassement .boite-corps { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.boite-depassement .depassement-resume { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.boite-depassement .depassement-resume b { font-size: 18px; }
.boite-depassement .depassement-titre { font-weight: 600; font-size: 13px; color: var(--texte-doux); margin-top: 6px; }
.boite-depassement .depassement-part { color: var(--texte-doux); font-weight: 400; }
.boite-depassement .justificatif-texte { white-space: pre-wrap; padding: 6px 10px; border-left: 4px solid var(--bord-fort); background: var(--fond-gris); }
.table-depassement td.coupe { max-width: 320px; }

/* ---- La densité d'affichage (réglage de la personne, par défaut celui de son entité). Le STANDARD est le rendu d'avant le réglage : texte 13 px et
   aucune hauteur imposée (les lignes gardent celle que leur contenu leur donne). La compacte est un cran plus serré (12,5 px, ~22 px), le confort un cran
   plus large (14 px, ~32 px). Les tables VIRTUALISÉES gardent la hauteur de ligne qu'elles annoncent (leurs règles, plus précises, l'emportent). ---- */
:root { --dens-police: 13px; --dens-ligne: auto; --dens-marge: 2px; }
html[data-densite="compacte"] { --dens-police: 12.5px; --dens-ligne: 22px; --dens-marge: 1px; }
html[data-densite="confort"] { --dens-police: 14px; --dens-ligne: 32px; --dens-marge: 2px; }
.table-droits { font-size: var(--dens-police); }   /* pas .reglable seul : la grille du planning garde sa taille */
.table-droits td { height: var(--dens-ligne); padding-top: var(--dens-marge); padding-bottom: var(--dens-marge); }
.reglages-affichage { width: min(560px, calc(100vw - 32px)); }
.reglages-affichage .choix-affichage { border: 1px solid var(--bord); border-radius: 6px; padding: 8px 12px; margin: 0 0 12px 0; }
.reglages-affichage .choix-affichage legend { font-weight: 600; padding: 0 6px; }
.reglages-affichage .choix-affichage .case-ligne { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; }
.reglages-affichage .exemple-densite { border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; }

/* ---- La navigation au choix : menu classique (une ligne + grand menu) ou barre latérale (décision du 2026-10-26) ---- */
.corps-app { display: contents; }
.corps-app.avec-laterale { display: flex; flex: 1; min-height: 0; }
.corps-app.avec-laterale > .zone-travail { flex: 1; min-width: 0; }

.barre-classique { align-items: center; min-height: 40px; flex-wrap: nowrap; }
.barre-classique .menu-racine > .entete { display: inline-flex; align-items: center; }
.barre-classique .barre-menu-fin { gap: 4px; }
.ancre-popup { position: relative; display: inline-flex; }
.nav-bouton, .nav-compte {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; cursor: pointer;
    background: transparent; color: var(--texte-doux); border: 1px solid transparent; border-radius: 6px;
}
.nav-bouton:hover, .nav-compte:hover { background: var(--accent-survol); color: var(--texte); }
.nav-compteur { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 9px; background: var(--accent-clair); color: var(--texte); }
.nav-compte { border-color: var(--bord); border-radius: 15px; font-weight: 600; font-size: 12px; color: var(--texte); }
.puce-entite { padding: 2px 7px; border-radius: 10px; background: var(--accent-clair); color: var(--accent-texte); font-size: 11px; }

.mega {
    position: absolute; top: 100%; left: 8px; right: 8px; z-index: 55; max-height: 70vh; overflow: auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 24px; padding: 16px 20px;
    background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 0 0 8px 8px; box-shadow: var(--ombre-flottant);
}
.mega-colonne { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mega-titre, .nav-lat-groupe, .nav-lat-rubrique {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); padding: 0 8px 6px;
}
.mega-sous-titre { font-size: 12px; font-weight: 600; color: var(--texte-doux); padding: 8px 8px 2px; }
.mega-ecran {
    display: flex; align-items: center; gap: 8px; justify-content: space-between; text-align: left; padding: 6px 8px; cursor: pointer;
    background: none; border: none; border-radius: 4px; color: var(--texte);
}
.mega-ecran.decale { padding-left: 20px; }
.mega-ecran:hover, .nav-lat-ecran:hover, .popup-choix:hover { background: var(--accent-survol); }
.mega-ecran.courant, .nav-lat-ecran.courant { background: var(--accent-clair); font-weight: 600; }

.popup-nav {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 55; min-width: 260px; max-width: 340px; max-height: 70vh; overflow: auto; padding: 6px;
    background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 8px; box-shadow: var(--ombre-flottant);
}
.popup-nav.vers-le-haut { top: auto; bottom: calc(100% + 4px); left: 0; right: auto; }
.popup-titre { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); padding: 6px 8px 4px; }
.popup-vide { padding: 6px 8px; color: var(--texte-faible); }
.popup-trait { height: 1px; margin: 4px 6px; background: var(--bord); }
.popup-ligne { display: flex; align-items: center; }
.popup-ligne.courant { background: var(--accent-clair); border-radius: 4px; font-weight: 600; }
.popup-choix { flex: 1; display: block; width: 100%; text-align: left; padding: 6px 8px; cursor: pointer; background: none; border: none; border-radius: 4px; color: var(--texte); }
.popup-croix { flex: none; width: 26px; height: 26px; cursor: pointer; background: none; border: none; border-radius: 4px; color: var(--texte-doux); font-size: 16px; }
.popup-croix:hover { background: var(--accent-survol); color: var(--rouge); }

.nav-laterale {
    position: relative; z-index: 20; width: 236px; flex: none; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px;
    background: var(--fond-barre); border-right: 1px solid var(--bord); user-select: none;
}
.nav-lat-defile { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; }
.nav-lat-logo { display: flex; align-items: center; gap: 8px; padding: 2px 6px 10px; font-weight: 600; font-size: 14px; }
.nav-lat-logo .logo { width: 24px; height: 24px; border-radius: 6px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.nav-lat-groupe { padding: 10px 8px 4px; }
.nav-lat-module {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; cursor: pointer; text-align: left;
    background: none; border: none; border-radius: 6px; color: var(--texte); font-weight: 500;
}
.nav-lat-module:hover { background: var(--accent-survol); }
.nav-lat-module.ouvert { background: var(--accent-clair); color: var(--accent-texte); font-weight: 600; }
.nav-lat-libelle { flex: 1; }
.nav-lat-ecrans { display: flex; flex-direction: column; padding: 2px 0 6px 14px; }
.nav-lat-rubrique { padding: 8px 8px 2px; }
.nav-lat-rubrique.sous { padding-left: 14px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.nav-lat-ecran {
    display: flex; align-items: center; gap: 8px; justify-content: space-between; width: 100%; padding: 5px 8px; cursor: pointer; text-align: left;
    background: none; border: none; border-radius: 5px; color: var(--texte); font-size: 12.5px;
}
.nav-lat-ecran.fav { justify-content: flex-start; }
.nav-lat-pied { flex: none; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bord); }
.nav-lat-compte { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; cursor: pointer; background: none; border: none; border-radius: 6px; color: var(--texte); text-align: left; }
.nav-lat-compte:hover { background: var(--accent-survol); }
.nav-lat-compte .avatar { width: 30px; height: 30px; border-radius: 15px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-clair); color: var(--accent-texte); font-weight: 700; font-size: 12px; }
.nav-lat-qui { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nav-lat-qui > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-laterale .ancre-popup { display: flex; }
.pousse { flex: 1; }
@media (max-width: 800px) { .nav-laterale { width: 190px; } }

/* ---- « Aller à… » (Ctrl K) : le déclencheur dans les deux navigations, et la palette ---- */
.nav-recherche {
    display: flex; align-items: center; gap: 8px; height: 30px; box-sizing: border-box; padding: 0 10px; cursor: pointer; color: var(--texte-doux);
    background: var(--fond); border: 1px solid var(--bord-fort); border-radius: 6px; text-align: left;
}
.nav-recherche:hover { border-color: var(--accent); color: var(--texte); }
.nav-recherche-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-classique .nav-recherche { width: 340px; margin: 0 8px 0 auto; flex: 0 1 340px; }
.barre-classique .nav-recherche + .barre-menu-fin { margin-left: 0; }
.nav-laterale .nav-recherche { width: 100%; margin: 0 0 8px 0; }
.touche { font-size: 11px; padding: 0 6px; border: 1px solid var(--bord); border-radius: 4px; color: var(--texte-doux); flex: none; }

.voile-recherche { align-items: flex-start; padding-top: 12vh; z-index: 70; }
.aller-a { width: min(620px, calc(100vw - 32px)); }
.aller-a-champ { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--bord); color: var(--texte-doux); }
.aller-a-champ input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--texte); }
.aller-a-liste { max-height: 56vh; overflow: auto; padding: 6px; }
.aller-a-groupe { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); padding: 8px 8px 4px; }
.aller-a-ligne {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 10px; cursor: pointer; text-align: left;
    background: none; border: none; border-radius: 5px; color: var(--texte);
}
.aller-a-ligne:hover, .aller-a-ligne.courant { background: var(--accent-clair); }
.aller-a-ligne.courant .aller-a-libelle { font-weight: 600; }
.aller-a-chemin { font-size: 12px; color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aller-a-vide { padding: 14px 10px; color: var(--texte-doux); }

/* ======================================================================
   Gestion des heures (« Mes heures », « Validation des heures », sans fenêtre WinDev) : reprise de l'application mobile, pensée pour le doigt.
   Une colonne, un seul défilement, boutons de 44 px au moins ; les jetons suivent les thèmes clair, sombre et auto.
   ====================================================================== */
:root {
    --hh-ok: #1f7a3a; --hh-attente: #8a5a00; --hh-refus: #a4262c; --hh-brouillon: #5f6b7a;
    --hh-ok-fond: #e3f4e8; --hh-attente-fond: #fdf0d5; --hh-refus-fond: #fbe3e4; --hh-brouillon-fond: #eaedf1;
}
html[data-theme="sombre"] {
    --hh-ok: #6fc08a; --hh-attente: #e8b95a; --hh-refus: #f1707b; --hh-brouillon: #aab4c2;
    --hh-ok-fond: #1b3a26; --hh-attente-fond: #3d2f10; --hh-refus-fond: #44191c; --hh-brouillon-fond: #2a313b;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --hh-ok: #6fc08a; --hh-attente: #e8b95a; --hh-refus: #f1707b; --hh-brouillon: #aab4c2;
        --hh-ok-fond: #1b3a26; --hh-attente-fond: #3d2f10; --hh-refus-fond: #44191c; --hh-brouillon-fond: #2a313b;
    }
}
.ecran-heures { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.hh-onglets { flex: none; }
.hh-defile { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; }
.hh-colonne { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }
.hh-gros { min-height: 44px; padding: 6px 14px; border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--fond-carte); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.hh-gros:hover:not(:disabled) { background: var(--accent-survol); }
.hh-gros:disabled { opacity: .55; cursor: default; }
.hh-gros.actif { background: var(--accent-clair); border-color: var(--accent); color: var(--accent-texte); }
.hh-gros.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.hh-gros.hh-large { width: 100%; }
.hh-gros.hh-raz { min-width: 44px; padding: 6px; }
.hh-navigation { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; align-items: center; }
.hh-fleche { font-size: 24px; }
.hh-date { position: relative; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); }
.hh-date-texte { font-weight: 600; text-align: center; padding: 0 8px; }
.hh-date input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hh-carte { border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.hh-titre { font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.hh-ok { color: var(--hh-ok); font-weight: 600; }
.hh-alerte { color: var(--hh-refus); font-weight: 600; }
.hh-nom { font-weight: 600; overflow-wrap: anywhere; }
.hh-heures { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hh-progression { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hh-total { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hh-total.alerte { color: var(--hh-refus); }
.hh-barre { height: 10px; border-radius: 5px; background: var(--hh-brouillon-fond); overflow: hidden; }
.hh-barre span { display: block; height: 100%; background: var(--hh-ok); }
.hh-barre span.alerte { background: var(--hh-refus); }
.hh-bandeau { border-radius: var(--r); padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hh-bandeau.verrou { background: var(--hh-attente-fond); color: var(--hh-attente); }
.hh-bandeau.refus { background: var(--hh-refus-fond); color: var(--hh-refus); flex-direction: column; align-items: flex-start; }
.hh-commentaire, .hh-absence { flex-direction: row; align-items: center; justify-content: space-between; }
.hh-commentaire-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.hh-prevu { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hh-prevu.fait { color: var(--hh-ok); }
.hh-ligne-pointage { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--bord); padding-top: 8px; }
.hh-ligne-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.hh-synthese { flex-direction: row; justify-content: space-around; }
.hh-synthese > div { display: flex; flex-direction: column; align-items: center; }
.hh-compteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hh-compteur { border-radius: var(--r); padding: 8px 4px; display: flex; flex-direction: column; align-items: center; font-size: 12px; text-align: center; }
.hh-compteur b { font-size: 20px; }
.hh-compteur.validee, .hh-badge.validee { background: var(--hh-ok-fond); color: var(--hh-ok); }
.hh-compteur.attente, .hh-badge.enattente { background: var(--hh-attente-fond); color: var(--hh-attente); }
.hh-compteur.refusee, .hh-badge.refusee { background: var(--hh-refus-fond); color: var(--hh-refus); }
.hh-compteur.brouillon, .hh-badge.brouillon { background: var(--hh-brouillon-fond); color: var(--hh-brouillon); }
.hh-jour { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 56px; padding: 8px 10px; text-align: left; border: 1px solid var(--bord); border-left-width: 5px; border-radius: var(--r); background: var(--fond-carte); color: var(--texte); font: inherit; cursor: pointer; }
.hh-jour.validee { border-left-color: var(--hh-ok); }
.hh-jour.enattente { border-left-color: var(--hh-attente); }
.hh-jour.refusee { border-left-color: var(--hh-refus); }
.hh-jour.brouillon { border-left-color: var(--hh-brouillon); }
.hh-jour.repos { background: var(--fond-gris); }
.hh-jour-date { flex: none; width: 52px; font-weight: 700; }
.hh-jour-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.hh-badge { flex: none; border-radius: 12px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.hh-recap { display: flex; justify-content: space-between; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--bord); }
.hh-corps { display: flex; flex-direction: column; gap: 10px; max-height: 72vh; overflow-y: auto; }
.hh-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.hh-recherche { display: flex; gap: 8px; flex-wrap: wrap; }
.hh-recherche input { flex: 1; min-width: 160px; min-height: 44px; }
.hh-liste { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow-y: auto; }
.hh-ligne-choix { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 48px; padding: 8px 12px; text-align: left; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond-carte); color: var(--texte); font: inherit; cursor: pointer; }
.hh-ligne-choix.actif { background: var(--accent-clair); border-color: var(--accent); }
.hh-chantier { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hh-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.hh-pastille { min-height: 44px; padding: 6px 12px; border: 1px solid var(--bord-fort); border-radius: 22px; background: var(--fond-carte); color: var(--texte); font: inherit; cursor: pointer; text-align: left; }
.hh-pastille.actif { background: var(--accent-clair); border-color: var(--accent); color: var(--accent-texte); font-weight: 600; }
.hh-pas { border: 1px solid var(--bord); border-radius: var(--r); padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.hh-pas.actif { background: var(--accent-clair); }
.hh-pas-tete { display: flex; align-items: center; gap: 8px; }
.hh-pas-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.hh-increments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hh-increment { padding: 6px 2px; font-size: 13px; }
.hh-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hh-pied .hh-total { margin-right: auto; font-size: 16px; }
.hh-champ { display: flex; flex-direction: column; gap: 4px; }
.hh-champ textarea, .hh-corps textarea { width: 100%; box-sizing: border-box; }
.boite.boite-heures { width: min(560px, 96vw); max-height: 94vh; display: flex; flex-direction: column; }
.hh-personne { padding: 0; gap: 0; overflow: hidden; }
.hh-personne-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; background: transparent; color: var(--texte); font: inherit; text-align: left; cursor: pointer; }
.hh-jour-validation { border-top: 1px solid var(--bord); padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.hh-jour-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hh-jour-resume { flex: 1; min-width: 150px; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 0; background: transparent; color: var(--texte); font: inherit; text-align: left; cursor: pointer; }
.hh-valider { background: var(--hh-ok-fond); border-color: var(--hh-ok); color: var(--hh-ok); }
.hh-refuser { background: var(--hh-refus-fond); border-color: var(--hh-refus); color: var(--hh-refus); }
.hh-detail { display: flex; flex-direction: column; gap: 6px; background: var(--fond-gris); border-radius: var(--r); padding: 8px 10px; }
.hh-detail-ligne { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 640px) {
    .hh-defile { padding: 8px; }
    .hh-increments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hh-jour-tete .hh-gros { flex: 1; }
}

/* ---- À la taille d'un téléphone : la barre latérale se replie derrière un bouton (elle ne mord pas sur l'écran), le menu classique passe sur plusieurs lignes ---- */
.nav-burger { display: none; }
@media (max-width: 800px) {
    .nav-burger {
        display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 5px; left: 6px; z-index: 57; width: 36px; height: 34px;
        cursor: pointer; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 6px;
    }
    html[data-navigation="laterale"] .app-titre { padding-left: 52px; }
    .corps-app.avec-laterale { display: block; }
    .nav-laterale {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 56; width: min(290px, 86vw); transform: translateX(-102%); transition: transform .15s ease;
        box-shadow: none; padding-top: 48px;
    }
    .nav-laterale.ouvert { transform: none; box-shadow: var(--ombre-flottant); }
    .voile-tiroir { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.3); }
    .barre-classique { flex-wrap: wrap; }
    .barre-classique .nav-recherche { width: 36px; flex: none; padding: 0 8px; margin-left: auto; }
    .barre-classique .nav-recherche .nav-recherche-texte, .barre-classique .nav-recherche .touche { display: none; }
    .mega { grid-template-columns: 1fr; padding: 10px 12px; }
    .popup-nav { max-width: calc(100vw - 16px); }
}

/* ==== FEN_Tresorerie : une ligne du tableau dépliée en ses lignes récurrentes ==== */
.table-tresorerie .treso-chevron { flex: none; border: 0; background: none; color: var(--texte-doux); cursor: pointer; padding: 0 4px 0 0; font: inherit; line-height: 1; }
.table-tresorerie .treso-chevron:hover { color: var(--texte); }
.table-tresorerie .sous-ligne td { font-size: 0.95em; }
.table-tresorerie .sous-ligne td.libelle-ligne { padding-left: 22px; color: var(--texte-doux); }

/* ==== FEN_FB_Utilisateur1 : onglet Sécurité (machines), mot de passe provisoire ==== */
.securite-fiche { padding: 8px; }
.liste-machines { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-machines .machine { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px; align-items: center; padding: 6px 8px; border: 1px solid var(--bord); border-radius: 6px; }
.liste-machines .machine-vue { grid-column: 1; font-size: 0.9em; }
.liste-machines .machine-etat { grid-column: 2; grid-row: 1; font-weight: 600; }
.liste-machines .machine-actions { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 6px; }
.liste-machines .machine-attente .machine-etat { color: var(--texte-attention); }
.liste-machines .machine-refuse, .liste-machines .machine-retire { opacity: 0.7; }
.mdp-provisoire { width: 100%; font-family: Consolas, "Cascadia Mono", monospace; font-size: 1.2em; letter-spacing: 0.08em; }

/* ------------------------------------------------------------------ Page publique « Version de bureau » (coquille de bureau) */
.telechargement-bureau { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; background: var(--fond-gris); }
.telechargement-carte { max-width: 640px; background: var(--fond-carte); border: 1px solid var(--bord-fort); border-radius: var(--r); padding: 24px 32px; }
.telechargement-carte h1 { font-size: 20px; margin: 0 0 12px 0; }
.telechargement-carte h2 { font-size: 15px; margin: 22px 0 6px 0; }
.telechargement-carte ol { padding-left: 20px; }
.telechargement-carte code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 11px; word-break: break-all; }
.telechargement-action { margin: 16px 0; }
.telechargement-retour { margin-top: 18px; }

/* ------------------------------------------------------------------ Identite visuelle (logo, ecran de demarrage, jauge, panneau de connexion) */
/* ---- L'identité : le logo de l'application (jamais celui d'une entité) et le panneau de gauche de l'écran de connexion (maquette « Connexion_Fenetre ») ---- */
.logo-app { width: 26px; height: 26px; flex: none; display: block; }
.nav-lat-logo .logo-app { width: 26px; height: 26px; }
.panneau-connexion {
    width: 360px; flex: none; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 30px 32px;
    color: #ffffff; background: linear-gradient(160deg, #22305a 0%, #141b33 100%);
}
.panneau-marque { display: flex; align-items: center; gap: 14px; }
.panneau-nom { display: flex; flex-direction: column; gap: 3px; }
.panneau-sur { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #c9d1e8; }
.panneau-base { font-size: 24px; font-weight: 700; line-height: 1; }
.panneau-trait { width: 44px; height: 3px; border-radius: 2px; margin-top: 5px; }
.panneau-phrases { display: flex; flex-direction: column; gap: 16px; }
.panneau-phrase-boite { min-height: 112px; }
.panneau-phrase { display: block; font-size: 23px; font-weight: 600; line-height: 1.3; opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }
.panneau-phrase.cachee { opacity: 0; transform: translateY(8px); }
.panneau-points { display: flex; gap: 7px; }
.panneau-point { width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.3); transition: width .3s ease; }
.panneau-point.courant { width: 20px; }
.panneau-logo-entite { align-self: flex-start; padding: 8px 12px; border-radius: 8px; background: #ffffff; display: flex; align-items: center; }
.panneau-logo-entite img { height: 38px; max-width: 230px; object-fit: contain; }
.panneau-nom-entite { font-size: 13px; color: #c9d1e8; }
@media (prefers-reduced-motion: reduce) {
    .panneau-phrase, .panneau-point { transition: none; }
    .panneau-phrase.cachee { opacity: 1; transform: none; }
}

/* ---- Aperçu de la connexion (/apercu/connexion) ---- */
.apercu-connexion { min-height: 100vh; box-sizing: border-box; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #dcdad5; }
.apercu-cas { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.apercu-fenetre { width: min(900px, 100%); min-height: 540px; display: flex; border-radius: 12px; overflow: hidden; background: #fff; color: #1f1f1e; box-shadow: 0 24px 60px rgba(20,27,51,.28); }
.apercu-formulaire { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 0 56px; }
.apercu-formulaire h1 { margin: 0; font-size: 24px; font-weight: 600; }
.apercu-formulaire label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.apercu-formulaire input { height: 40px; padding: 0 12px; border: 1px solid #c9c6c1; border-radius: 6px; font: inherit; font-weight: 400; }
@media (max-width: 800px) { .apercu-fenetre { flex-direction: column; } .panneau-connexion { width: auto; } .apercu-formulaire { padding: 24px; } }

/* ---- Le logo qui charge (maquette « Logo_Chargement ») : CSS pur. Arrivée des pièces (14 px, -120°, 0,55 -> 1, 0,3 s d'écart) ; tant que ça charge, l'anneau tourne d'un quart
   toutes les 0,7 s ; à la fin (.fin) les pièces se resserrent, le point tombe et appuie, les pièces encaissent, une onde part du centre. Sans mouvement : le logo fixe + le texte. ---- */
.sym { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; --sym-depart: 0deg; --sym-arrivee: 360deg; }   /* chargement.js les pose à l'angle réel de l'anneau */
.sym svg { width: var(--sym-taille, 160px); height: var(--sym-taille, 160px); }
.sym { --sym-p1: #cdb972; --sym-p2: #2563eb; --sym-p3: #22b8c9; --sym-p4: #1f2a44; --sym-point: #1f2a44; --sym-onde: #1f2a44; --sym-texte: #3d3b38; --sym-corps: 14px; --sym-graisse: 400; }
.sym.sombre { --sym-p4: #c9d1e8; --sym-point: #ffffff; --sym-onde: #cdb972; --sym-texte: #e6eaf5; --sym-corps: 15px; --sym-graisse: 700; }
html[data-theme="sombre"] .sym { --sym-p4: #c9d1e8; --sym-point: #ffffff; --sym-onde: #cdb972; --sym-texte: #e6eaf5; --sym-corps: 15px; --sym-graisse: 700; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .sym { --sym-p4: #c9d1e8; --sym-point: #ffffff; --sym-onde: #cdb972; --sym-texte: #e6eaf5; --sym-corps: 15px; --sym-graisse: 700; } }
.sym-texte { font-size: var(--sym-corps); font-weight: var(--sym-graisse); letter-spacing: .03em; color: var(--sym-texte); }
.sym-piece, .sym-anneau, .sym-point, .sym-onde { transform-box: view-box; transform-origin: 32px 32px; }
.sym-piece.p1 circle { stroke: var(--sym-p1); }
.sym-piece.p2 circle { stroke: var(--sym-p2); }
.sym-piece.p3 circle { stroke: var(--sym-p3); }
.sym-piece.p4 circle { stroke: var(--sym-p4); }
.sym-point circle { fill: var(--sym-point); }
.sym-point { opacity: 0; }
.sym-onde { stroke: var(--sym-onde); opacity: 0; transform: scale(.4); }

.sym-piece { animation: sym-arrive .5s cubic-bezier(.16,1.25,.3,1) both; }
.sym-piece.p1 { animation-delay: .35s; }
.sym-piece.p2 { animation-delay: .65s; }
.sym-piece.p3 { animation-delay: .95s; }
.sym-piece.p4 { animation-delay: 1.25s; }
@keyframes sym-arrive {
    from { opacity: 0; transform: translate(calc(var(--dx) * 14px), calc(var(--dy) * 14px)) rotate(-120deg) scale(.55); }
    to { opacity: 1; transform: none; }
}

.sym-anneau { animation: sym-tourne 2.8s infinite 1.75s; }
@keyframes sym-tourne {
    0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45,0,.2,1); }
    25% { transform: rotate(90deg); animation-timing-function: cubic-bezier(.45,0,.2,1); }
    50% { transform: rotate(180deg); animation-timing-function: cubic-bezier(.45,0,.2,1); }
    75% { transform: rotate(270deg); animation-timing-function: cubic-bezier(.45,0,.2,1); }
    100% { transform: rotate(360deg); }
}

/* La fin : 1,14 s en tout. 0 -> 23 % resserrement ; 23 -> 49 % le point tombe ; 49 -> 60 % l'appui ; 60 -> 100 % le relâchement avec rebond ; l'onde part au relâchement. */
.sym.fin .sym-anneau { animation: sym-redresse .26s ease-out both; }
@keyframes sym-redresse { from { transform: rotate(var(--sym-depart, 0deg)); } to { transform: rotate(var(--sym-arrivee, 360deg)); } }
.sym.fin .sym-piece { animation: sym-fin-piece 1.14s both; }
@keyframes sym-fin-piece {
    0% { transform: none; animation-timing-function: ease-out; }
    23% { transform: translate(calc(var(--dx) * -1.2px), calc(var(--dy) * -1.2px)); }
    49% { transform: translate(calc(var(--dx) * -1.2px), calc(var(--dy) * -1.2px)); animation-timing-function: ease-out; }
    60.5% { transform: translate(calc(var(--dx) * 2.2px), calc(var(--dy) * 2.2px)); animation-timing-function: cubic-bezier(.2,1.6,.4,1); }
    100% { transform: none; }
}
.sym.fin .sym-point { animation: sym-fin-point 1.14s both; }
@keyframes sym-fin-point {
    0% { opacity: 0; transform: translateY(-16px) scale(.2); }
    23% { opacity: 0; transform: translateY(-16px) scale(.2); animation-timing-function: cubic-bezier(.5,0,.75,0); }
    49% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; }
    60.5% { opacity: 1; transform: scale(.5); animation-timing-function: cubic-bezier(.2,1.8,.4,1); }
    100% { opacity: 1; transform: scale(1); }
}
.sym.fin .sym-onde { animation: sym-fin-onde .9s ease-out .69s both; }
@keyframes sym-fin-onde { from { opacity: .55; transform: scale(.4); } to { opacity: 0; transform: scale(4.2); } }

/* L'écran de démarrage : le logo qui charge sur fond sombre, jusqu'à ce que l'application soit prête, puis il s'efface. */
.sym-demarrage {
    position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 42%, #2a3a6a 0%, #141b33 70%); transition: opacity .45s ease;
}
.sym-demarrage.efface { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .sym-piece, .sym-anneau, .sym-point, .sym-onde, .sym.fin .sym-anneau, .sym.fin .sym-piece, .sym.fin .sym-point, .sym.fin .sym-onde { animation: none; }
    .sym-point { opacity: 1; }
    .sym-demarrage { transition: none; }
}

/* ---- Aperçu du chargement (/apercu/chargement) ---- */
.apercu-chargement { min-height: 100vh; box-sizing: border-box; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; background: #ffffff; }
.apercu-fonds { width: min(900px, 100%); display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; border-radius: 12px; overflow: hidden; }
.apercu-fond { display: flex; align-items: center; justify-content: center; }
.apercu-fond.clair { background: #f4f4f2; }
.apercu-fond.sombre { background: radial-gradient(circle at 50% 42%, #2a3a6a 0%, #141b33 70%); }

/* ---- La jauge de chargement symphonique (Layout/JaugeSymphonique) : le logo qui tourne + le libellé. Les pièces sont déjà posées (pas d'arrivée : une lecture courte doit se voir),
   l'anneau tourne dès la première image, et la fin courte (0,3 s) réutilise les keyframes du logo. ---- */
.sym-jauge .sym-piece { animation: none; }
.sym-jauge .sym-anneau { animation-delay: 0s; }
.sym-jauge.sym-pied { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 2px 10px; min-height: 24px; }
.sym-jauge.sym-pied svg { width: 20px; height: 20px; flex: none; }
.sym-jauge.sym-page { gap: 10px; padding: 24px; }
.sym-jauge.sym-page svg { width: 56px; height: 56px; }
.pied-ecran .sym-jauge, .tunnel-pied .sym-jauge { flex: 1; min-width: 120px; }
.chargement-pac .sym-jauge { width: min(480px, 90%); }
.sym-jauge.fin .sym-anneau { animation: none; }
.sym-jauge.fin .sym-piece { animation: sym-fin-piece .3s both; }
.sym-jauge.fin .sym-point { animation: sym-fin-point .3s both; }
.sym-jauge.fin .sym-onde { animation: sym-fin-onde .3s ease-out .1s both; }
@media (prefers-reduced-motion: reduce) {
    .sym-jauge .sym-anneau, .sym-jauge.fin .sym-piece, .sym-jauge.fin .sym-point, .sym-jauge.fin .sym-onde { animation: none; }
}
.sym-place { flex: 1; min-width: 120px; }

/* Le logo de la barre latérale suit le thème : la pièce bleu nuit devient claire sur fond sombre. */
.nav-lat-logo .logo-sur-sombre { display: none; }
html[data-theme="sombre"] .nav-lat-logo .logo-sur-clair { display: none; }
html[data-theme="sombre"] .nav-lat-logo .logo-sur-sombre { display: block; }
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .nav-lat-logo .logo-sur-clair { display: none; }
    html[data-theme="auto"] .nav-lat-logo .logo-sur-sombre { display: block; }
}

/* ==== Fenêtre de connexion (maquette « Connexion_Fenetre », 900 × 540) : le panneau à gauche, le formulaire à droite ==== */
.login-formulaire { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--fond-carte); color: var(--texte); }
.login-formulaire .login-centre { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 56px; }
.login-formulaire h1 { margin: 0; font-size: 24px; font-weight: 600; }
.login-formulaire .doux { margin: 0 0 4px; }
.login-formulaire .login-corps { display: flex; flex-direction: column; align-items: stretch; gap: 13px; padding: 0; }
.login-formulaire .login-corps label { display: flex; flex-direction: column; gap: 5px; text-align: left; font-size: 13px; font-weight: 600; color: var(--texte); }
.login-formulaire .login-corps input:not([type=checkbox]) { height: 40px; padding: 0 12px; border: 1px solid var(--bord-fort); border-radius: 6px; font: inherit; font-weight: 400; background-color: var(--fond-carte); color: var(--texte); }
.login-formulaire .login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-formulaire .login-corps label.login-memo { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; color: var(--texte-doux); }
.login-formulaire .login-valider { width: 100%; height: 42px; justify-content: center; font-weight: 600; }
.login-formulaire .login-message { margin: 0; }
.login-formulaire .login-pas-vous, .login-formulaire .login-serveur { font-size: 13px; text-align: center; }
.login-formulaire .login-serveur { margin-top: 4px; font-size: 12px; }
.login-formulaire .login-serveur select { height: 28px; font: inherit; font-size: 12px; background-color: var(--fond-carte); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: 4px; }
.login-pied { display: flex; justify-content: space-between; gap: 12px; padding: 12px 56px 16px; font-size: 12px; color: var(--texte-faible); }
@media (max-width: 800px) { .login-fen { flex-direction: column; } .login-formulaire .login-centre { padding: 24px; } .login-pied { padding: 12px 24px 16px; } }