/* Custom CSS for Sao */

/* ── « Traitement en cours » — RENDU VISIBLE ────────────────────────────────
 *
 * Sao pose cet indicateur en `top: 0` (sao.less:1777-1782), c'est-à-dire
 * PILE SOUS LA BARRE DE NAVIGATION, qui est sombre et pleine largeur. Le
 * résultat : un rectangle bleu pâle noyé entre « Type de compte » et
 * « Sociétés suivies », que l'utilisateur ne voyait pas — au point de croire
 * l'application figée et de relancer la requête, ce qui aggravait tout
 * (constaté le 2026-08-06, capture à l'appui).
 *
 * Trois corrections, dans l'ordre d'efficacité :
 *   1. ON LE DESCEND sous la barre de navigation, où rien ne le recouvre ;
 *   2. ON LE REND CONTRASTÉ — ambre soutenu sur texte blanc, au lieu du bleu
 *      pâle de `alert-info` qui se confondait avec le fond ;
 *   3. ON LE FAIT RESPIRER — pulsation lente, qui attire l'œil sans le
 *      harceler. Sao anime déjà les trois points ; la pulsation porte sur le
 *      bandeau entier, seule façon de le repérer sans le chercher.
 *
 * ⚠️ `!important` est nécessaire : `sao.less` est chargé APRÈS cette feuille
 * dans index.html, et `#processing` y a la même spécificité.
 */
#processing {
    top: 62px !important;                   /* sous la barre de navigation */
    background-color: #b45309 !important;   /* ambre soutenu */
    border: 2px solid #78350f !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 1.05em !important;
    padding: 10px 26px !important;
    border-radius: 6px !important;
    /* L'ombre le détache du fond, y compris au-dessus d'un tableau clair. */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
    animation: verda-processing-pulse 1.4s ease-in-out infinite !important;
}

/* Le texte et les points héritent du blanc — sans quoi ils resteraient dans
 * la couleur de `alert-info` et disparaîtraient sur l'ambre. */
#processing p,
#processing .dot {
    color: #ffffff !important;
    margin-bottom: 0 !important;
}

/* Pulsation SOBRE : l'opacité descend à 0,72 et remonte. Un vrai clignotement
 * (opacité 0) rendrait le texte illisible une partie du temps et fatiguerait
 * sur un traitement long — or ce sont justement les traitements longs que cet
 * indicateur accompagne. */
@keyframes verda-processing-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.72; }
}

/* Écrans étroits : la barre de navigation est plus haute une fois repliée. */
@media (max-width: 767px) {
    #processing {
        top: 74px !important;
    }
}

/* ── IMPRESSION DU NAVIGATEUR (Cmd+P) — LE TABLEAU, PAS LE MENU ────────────
 *
 * Sao n'a AUCUNE règle `@media print` propre : `dist/tryton-sao.css` ne
 * contient que les utilitaires génériques de Bootstrap
 * (`visible-print`, `hidden-print`), qu'il n'applique nulle part. Un Cmd+P
 * imprimait donc la page entière — barre de navigation, menu latéral complet
 * (« Nouveau client », « Supprimer un dossier », « Tiers »…), onglets — et
 * le tableau se retrouvait noyé. Constaté le 2026-08-06 : un bilan sorti sur
 * 14 pages dont la première ne contenait QUE le menu.
 *
 * ⚠️ Ceci ne remplace PAS le rapport « Bilan / Compte de résultat
 * (N-1, N, écart) » du bouton imprimante, qui reste la bonne voie pour un
 * état comptable en bonne et due forme (colonnes N-1/N/Écart, en-tête,
 * millésimes). Ces règles servent le geste RÉFLEXE — Cmd+P — pour qu'il
 * donne quelque chose d'utilisable plutôt qu'un menu.
 */
@media print {
    /* Navigation et chrome de l'application : rien de tout cela n'a sa place
       sur un état comptable. */
    .navbar,
    #menu,
    #tablist,
    #user-preferences,
    #global-search,
    #processing,
    .tab-nav,
    .toolbar,
    .btn-toolbar,
    .pagination,
    .filter-box,
    .searchbox,
    .record-selection,
    .expander,
    input[type="checkbox"] {
        display: none !important;
    }

    /* Le contenu récupère toute la largeur — sans quoi il resterait dans la
       colonne étroite que lui laissait le menu. */
    .body,
    #main,
    #tabs,
    #tabcontent,
    .tab-content,
    .tab-pane {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        overflow: visible !important;
    }

    /* Les tableaux de Sao défilent dans un conteneur à hauteur fixe : à
       l'impression, il faut TOUT dérouler, sinon seule la partie visible à
       l'écran sort sur le papier. */
    .treeview,
    .treeview-container,
    .scrollable,
    .screen-container {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    /* Un tableau comptable se lit ligne à ligne : on évite qu'une ligne soit
       coupée en deux par un saut de page, et on répète l'en-tête sur chaque
       page. */
    table { width: 100% !important; border-collapse: collapse !important; }
    thead { display: table-header-group; }
    tr, td, th { page-break-inside: avoid; }
    /* Le fond blanc et le texte noir : les nuances d'écran passent mal en
       impression, surtout en noir et blanc. */
    body, .tab-pane { background: #ffffff !important; color: #000000 !important; }

    @page { margin: 12mm; }
}


/* ═══════════════════════════════════════════════════════════════════
   LE DÉTAIL DE TVA AU PIED DE FACTURE — pas de boîte, pas d'ascenseur
   ═══════════════════════════════════════════════════════════════════
   `detail_tva` est un champ Text : Sao le rend en `<textarea>`, donc avec
   une hauteur FIXE, un ascenseur dès trois lignes et une poignée de
   redimensionnement en bas à droite. Constaté le 2026-09-01 : sur une
   facture à deux taux, « Taxe au taux de 20 % : » et son montant étaient
   séparés par un retour à la ligne, le reste caché derrière l'ascenseur.

   Le champ est en lecture seule et ne contient que 2 à 4 lignes courtes :
   il doit se lire comme du TEXTE, pas comme une zone de saisie. On lui
   retire donc son cadre et on le laisse prendre sa hauteur.

   ⚠️ `field="detail_tva"` est l'attribut que Sao pose sur le conteneur du
   widget (form.js) : c'est le seul crochet stable — les classes CSS de
   Sao changent d'une version à l'autre. */
[field="detail_tva"] textarea,
textarea[name="detail_tva"] {
    resize: none;              /* pas de poignée : rien à redimensionner */
    overflow: hidden;          /* pas d'ascenseur sur 3 lignes */
    height: auto;
    min-height: 4.5em;         /* 3 lignes : deux taux + le total */
    border: none;              /* du texte, pas un champ de saisie */
    background: transparent;
    box-shadow: none;
    padding-right: 0;
    white-space: pre;          /* une ligne par taux, jamais de coupure */
    text-align: right;         /* aligné sur les montants qu'il décompose */
}

/* ════════════════════════════════════════════════════════════════════════
   LA LIGNE DE CHAPITRE d'un devis — « Phase 1 : découverte »
   ════════════════════════════════════════════════════════════════════════
   La fusion des cellules est faite par `custom.js` § 16 (impossible en XML :
   `tree.rng` ne connaît pas `colspan`). Ici, seulement de quoi la LIRE comme
   un intertitre et non comme une ligne de vente ratée.

   ⚠️ SANS CE STYLE, LA FUSION SEULE NE SE VOIT PAS : le texte s'étale bien
   sur toute la largeur, mais dans la même graisse et la même couleur qu'une
   désignation ordinaire — l'œil ne distingue alors plus la structure, qui
   est pourtant tout l'objet de la demande. */
tr.verda-ligne-chapitre > td {
    background-color: #eef4f4;
}
/* ⛔ LE FILET RESTE SUR LE `td`, LE GRAS SEUL DESCEND. Réunir les deux dans
   une règle `> td, > td *` dessinait UN FILET PAR DESCENDANT : Sao emboîte
   plusieurs `<div class="cell">` et `<span>` dans chaque cellule, et les
   bordures s'empilaient en RAYURES horizontales, bien visibles dans les
   colonnes vides d'un chapitre (capture du 2026-09-03). Les `padding` se
   cumulaient de la même façon, d'où la hauteur excessive de la ligne.
   ➜ Deux règles distinctes : la géométrie (bordure, marges) appartient à la
   CELLULE, jamais à son contenu. */
tr.verda-ligne-chapitre[data-verda-type="titre"] > td {
    /* Un filet au-dessus SÉPARE les phases, là où une simple couleur les
       ferait seulement se ressembler. */
    border-top: 2px solid #2b6a6a;
    padding-top: 0.45em;
    padding-bottom: 0.45em;
}
/* ⚠️ LE GRAS DOIT DESCENDRE JUSQU'AU TEXTE. Sao emballe le contenu de
   chaque cellule dans des `<div class="cell">` et des `<span>` ; un
   `font-weight` posé sur le seul `<td>` est hérité DANS LE CAS SIMPLE, mais
   un widget d'édition (input, select) ne l'hérite PAS — il porte sa propre
   police. D'où le `*` : le chapitre reste gras qu'il soit affiché ou en
   cours de saisie.
   « On pourrait faire en sorte que le texte des lignes chapitre soit en
   caractères gras pour les distinguer » (utilisateur, 2026-09-03). */
tr.verda-ligne-chapitre[data-verda-type="titre"] > td,
tr.verda-ligne-chapitre[data-verda-type="titre"] > td * {
    font-weight: 700;
}
/* Un commentaire n'est pas un titre : il explique, il ne structure pas.
   En retrait et en gris, il ne se confond pas avec une phase. */
tr.verda-ligne-chapitre[data-verda-type="commentaire"] > td {
    font-style: italic;
    color: #566;
    padding-left: 2em;
}
/* Un sous-total se lit comme un résultat : aligné à droite, en gras. */
tr.verda-ligne-chapitre[data-verda-type="soustotal"] > td,
tr.verda-ligne-chapitre[data-verda-type="soustotal"] > td * {
    font-weight: 700;
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════
   LE TABLEAU D'UN ÉCRAN DE RÉSULTAT PREND LA HAUTEUR DISPONIBLE
   ═══════════════════════════════════════════════════════════════════════

   ⚠️ CE QUE `yexpand="1"` NE PEUT PAS FAIRE SEUL — et pourquoi le correctif
   du 2026-09-06 matin (c82de83, d827b13) n'avait rien changé à l'écran.

   Sao borne TOUT tableau de One2Many à 300 px en dur :

       .form-one2many-content .treeview { max-height: 300px; }   (sao.less)

   C'est un `max-height` CSS : aucun attribut de vue ne passe outre. On
   pouvait donc poser `yexpand`, `yfill`, `height` — la grille accordait bien
   la place au tableau, et le tableau refusait de la prendre. D'où la
   lucarne à barre de défilement du Compte de Résultat Durable, dix lignes
   visibles sur cinquante, pendant que la fenêtre elle-même restait basse
   (constaté par l'utilisateur, 2026-09-06 16:50).

   ▸ ON NE LÈVE LA BORNE QUE LÀ OÙ LA VUE L'A DEMANDÉ. La classe `yexpand`
   n'est posée par Sao (`form.js:664-668`) que sur un champ déclaré
   `yexpand="1" yfill="1"` — c'est-à-dire nos écrans de résultat, et eux
   seuls. Les One2Many ordinaires (lignes de facture, adresses d'un tiers…)
   gardent leur lucarne de 300 px : elle y est utile, ces tableaux sont un
   détail au milieu d'un formulaire, pas ce qu'on vient lire.

   ⚠️ `min-height` DOIT TOMBER AUSSI. Il vaut 150 px : sur un résultat de
   trois lignes, le garder réserverait du vide sous le tableau. */
/* ▸ La classe `yexpand` est posée sur le PANEL (`this.el`, form.js:667),
   et le tableau vit dans son `-content` (panel-body, form.js:3457) : le
   sélecteur descend donc du panel vers le tableau. Un `.form-one2many-
   content.yexpand` — la classe sur le content lui-même — ne matcherait
   RIEN, la classe n'y est jamais posée. */
.form .form-one2many.yexpand .treeview,
.form .form-many2many.yexpand .treeview {
    max-height: none;
    min-height: 0;
    height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   L'AIDE — pastille permanente et panneau
   ═══════════════════════════════════════════════════════════════════════
   ⚠️ `z-index` ÉLEVÉ MAIS PAS MAXIMAL : les modales de Sao doivent rester
   au-dessus. Une aide qui recouvre une boîte de dialogue empêcherait de
   valider une saisie — l'inverse du service rendu.

   ⚠️ POSITION À DROITE, EN BAS : la gauche porte déjà le bandeau de trace
   (`#verda-trace-tva`), et le bas de l'écran est libre dans toutes les vues
   de Sao (liste, formulaire, tableau de bord). */
#verda-aide-pastille {
    position: fixed; right: 24px; bottom: 24px; z-index: 900;
    height: 58px; border-radius: 29px;
    border: none; cursor: grab;
    /* ⚠️ SANS CECI LE GLISSEMENT NE MARCHE PAS AU DOIGT : le navigateur
       interprète le mouvement comme un défilement de la page et ne délivre
       jamais les `pointermove`. `touch-action: none` lui dit que ce geste
       appartient à l'élément. */
    touch-action: none;
    /* Un glissement ne doit pas sélectionner le texte du bouton. */
    user-select: none; -webkit-user-select: none;
    background: #2b6cb0; color: #fff;
    font-size: 17px; font-weight: 600;
    padding: 0 26px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
#verda-aide-pastille:hover { background: #2c5282; }

/* ⛔ LE BOUTON MASQUAIT LA DERNIÈRE LIGNE DES LISTES.
   « le bouton d'aide est mal positionné, il cache une ligne Impôts sur les
   bénéfices » (utilisateur, 2026-09-13, capture à l'appui : la ligne était
   illisible sous la pastille).

   Le commentaire ci-dessus supposait « le bas de l'écran est libre dans
   toutes les vues de Sao ». C'est faux dès qu'une liste descend jusqu'en
   bas — un compte de résultat déplié, par exemple. Le bouton est
   `position: fixed` : il flotte AU-DESSUS du contenu et ne pousse rien.

   ➜ On réserve donc la hauteur du bouton (58 px) plus sa marge (24 px) au
   bas des zones qui défilent. Le contenu peut alors défiler jusqu'au bout
   sans jamais finir sous la pastille.

   ⚠️ En `@media screen` uniquement : à l'impression la pastille n'existe
   pas, et cette réserve laisserait un blanc en pied de page. */
@media screen {
    /* ⛔ PREMIÈRE VERSION INOPÉRANTE (2026-09-13) : elle visait
       `.treeview-container` et `.scrollable`, deux classes qui N'EXISTENT
       PAS dans Sao — vérifié dans le bundle, `scrollable` n'y apparaît que
       dans « pre-scrollable » et un commentaire. La règle ne s'appliquait
       donc à rien, et le bouton continuait de masquer la dernière ligne.
       Les classes réelles sont `screen-container` (tryton-sao.js:12678) et
       `treeview responsive`. */
    .screen-container,
    .treeview.responsive {
        padding-bottom: 92px;
    }
}

/* ⚠️ DIMENSIONNÉ POUR UN GRAND ÉCRAN, PAS POUR MON APERÇU. Première
   version : 320 px et .88rem — « tellement petit que j'ai le plus grand mal
   à lire » (utilisateur, 2026-09-10, sur grand écran). Les tailles sont
   désormais en `rem` et le panneau s'élargit avec la fenêtre. */
#verda-aide-panneau {
    position: fixed; right: 24px; bottom: 88px; z-index: 900;
    width: 620px; max-width: calc(100vw - 48px);
    max-height: 78vh; overflow-y: auto;
    background: #fff; color: #1a202c;
    border: 1px solid #cbd5e0; border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    padding: 26px; font-size: 16px;
}
.verda-aide-entete {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.verda-aide-entete strong { font-size: 21px; }
.verda-aide-fermer {
    border: none; background: none; cursor: pointer;
    font-size: 30px; line-height: 1; color: #718096; padding: 0 8px;
}
.verda-aide-intro { margin: 0 0 14px; color: #4a5568; font-size: 17px; }
.verda-aide-champ {
    width: 100%; box-sizing: border-box; padding: 14px 16px;
    border: 1px solid #cbd5e0; border-radius: 6px; font-size: 18px;
}
.verda-aide-reponses { margin-top: 14px; }
.verda-aide-ambigu {
    margin: 0 0 12px; color: #975a16; font-size: 15px;
}
.verda-aide-reponse {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 6px;
    padding: 14px 16px; margin-bottom: 9px; font-size: 16px;
}
.verda-aide-reponse:hover { background: #edf2f7; border-color: #cbd5e0; }
.verda-aide-nom { display: block; font-weight: 600; font-size: 17px; }
.verda-aide-parent {
    display: block; color: #718096; font-size: 14px; margin-top: 3px;
}
.verda-aide-echec { background: #fffaf0; border-color: #f6ad55; }
.verda-aide-rien { margin: 0; color: #718096; font-size: 16px; }

/* ⚠️ TAILLES EN PIXELS, PAS EN `rem` : Sao fixe une police racine petite,
   dont tout `rem` hérite — « la taille est à peine plus grande » après un
   premier passage en rem (2026-09-10). Le panneau doit être lisible quelle
   que soit la feuille de style de l'hôte. */

/* Le registre « pourquoi » : une réponse en TEXTE, pas une liste de liens. */
.verda-aide-texte {
    margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: #1a202c;
}
.verda-aide-texte strong { font-weight: 600; }
.verda-aide-source {
    margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #edf2f7;
    font-size: 14px; color: #718096;
}
.verda-aide-titre-rep {
    margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #2b6cb0;
}
.verda-aide-ecrans {
    margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #edf2f7;
    font-size: 14px; color: #718096;
}

/* Une puce se présente comme une puce : sans ça, deux puces successives se
   collent dans un même bloc et deviennent illisibles (constaté 2026-09-10). */
.verda-aide-puce {
    margin: 0 0 6px; padding-left: 18px; position: relative;
}
.verda-aide-puce::before {
    content: '•'; position: absolute; left: 4px; color: #2b6cb0;
}
/* Enchaîner d'une réponse à l'autre. */
.verda-aide-lien-rep {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; padding: 6px 0;
    color: #2b6cb0; font-size: 15px; text-decoration: underline;
}
.verda-aide-lien-rep:hover { color: #2c5282; }

/* « Pour aller plus loin » — références externes, sourcées par nos docs. */
.verda-aide-source-lien {
    display: block; padding: 6px 0; color: #2b6cb0;
    font-size: 15px; text-decoration: none; line-height: 1.4;
}
.verda-aide-source-lien:hover { text-decoration: underline; }
.verda-aide-source-lien::before { content: '↗ '; color: #a0aec0; }

/* ── LE PAS-À-PAS — demandé le 2026-09-12 ────────────────────────────────
   « des explications et un pas à pas ». Les deux parties doivent se
   DISTINGUER AU PREMIER COUP D'ŒIL : on lit l'explication, on exécute les
   étapes. Fondues dans un même pavé, l'utilisateur doit retrouver lui-même
   où commencer — c'est exactement ce qu'une aide doit lui épargner. */
.verda-aide-titre-pas {
    margin: 18px 0 10px; padding-top: 12px;
    border-top: 1px solid #edf2f7;
    font-size: 15px; font-weight: 600; color: #2b6cb0;
    text-transform: uppercase; letter-spacing: .04em;
}
.verda-aide-etape {
    margin: 0 0 10px; padding-left: 30px; position: relative;
    font-size: 16px; line-height: 1.55; color: #1a202c;
}
/* ▸ L'ÉCRAN CITÉ DANS UNE ÉTAPE, cliquable — 2026-09-20.
   « Ouvrez « Financier › Reporting › … » » décrivait un chemin à refaire à
   la main, alors que le panneau sait ouvrir l'écran. Le lien est EN LIGNE
   dans le texte (`inline`), sinon il casserait la phrase qui le porte.
   Souligné en pointillé : assez visible pour inviter au clic, assez discret
   pour ne pas hacher un pas-à-pas qui en compte plusieurs. */
.verda-aide-lien-ecran {
    display: inline; padding: 0; margin: 0; cursor: pointer;
    background: none; border: none; font: inherit; color: #2b6cb0;
    text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.verda-aide-lien-ecran:hover {
    color: #2c5282; text-decoration-style: solid;
}
/* L'échec garde la trace : l'infobulle dit où aller, la couleur dit que le
   clic a été tenté. Muet, le lien passerait pour inerte. */
.verda-aide-lien-ecran.verda-aide-echec {
    color: #c05621; text-decoration-style: wavy; background: none;
}

/* Le numéro dans une pastille : il porte l'ORDRE, qui est l'information
   même du pas-à-pas. Une puce ronde ne dirait pas « d'abord, puis ». */
.verda-aide-num {
    position: absolute; left: 0; top: 1px;
    display: inline-block; width: 21px; height: 21px;
    border-radius: 50%; background: #2b6cb0; color: #fff;
    font-size: 12px; font-weight: 600; line-height: 21px;
    text-align: center;
}

/* ── « TOUT DÉPLIER » SUR LES ÉTATS COMPTABLES ──────────────────────────
   Demandé le 2026-09-13 : « ce qui manque c'est de pouvoir descendre
   directement au niveau de la ligne sans devoir faire une série de clics ».
   Le compte de résultat est un arbre à quatre niveaux ; l'atteindre en
   entier demandait une dizaine de clics, à refaire à chaque ouverture.

   Discret par défaut : ce sont des commandes d'agrément, elles ne doivent
   pas concurrencer les boutons de la barre d'outils. */
.verda-deplier {
    display: flex; gap: 8px;
    padding: 6px 0 8px;
}
.verda-deplier-bouton {
    background: #edf2f7; color: #2d3748;
    border: 1px solid #cbd5e0; border-radius: 4px;
    padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.verda-deplier-bouton:hover:not(:disabled) { background: #e2e8f0; }
.verda-deplier-bouton:disabled { opacity: .6; cursor: default; }

/* ── LE BOUTON « ENREGISTRER » QU'ON VOIT ───────────────────────────────
   Demandé le 2026-09-17 : « devoir enregistrer les entrées » — la seule
   commande d'enregistrement était la disquette de la barre d'outils, hors
   du champ de vision au bas d'une fiche longue.

   ⚠️ IL NE S'AFFICHE QUE S'IL Y A QUELQUE CHOSE À ENREGISTRER. L'onglet
   enregistre désormais tout seul aux moments qui comptent (fermeture,
   changement de vue, navigation) ; ce bouton sert à VOIR qu'un travail
   est en attente, et à le confirmer sans chercher.

   Posé en `fixed` en bas à droite : il doit rester atteignable quel que
   soit le défilement, puisque c'est précisément le défaut qu'il corrige.
   `z-index` sous les modales de Sao (1050) pour ne jamais les recouvrir. */
.verda-bouton-enregistrer {
    position: fixed;
    right: 24px; bottom: 24px;
    z-index: 1040;
    display: none;
    background: #2f855a; color: #fff;
    border: none; border-radius: 4px;
    padding: 10px 20px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.verda-bouton-enregistrer.verda-visible { display: block; }
.verda-bouton-enregistrer:hover { background: #276749; }


/* Le bandeau « Société · Carte » à côté de « Verda » (custom.js,
   install_bandeau — 2026-09-26). */
#verda-bandeau {
    display: inline-block;
    margin: 12px 0 0 6px;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    max-width: 45vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    text-decoration: none;
}
#verda-bandeau:hover,
#verda-bandeau:focus {
    background: rgba(255, 255, 255, .3);
    color: #fff;
    text-decoration: none;
}
/* La liste des espaces, sous le bandeau (changer_de_carte). */
#verda-bandeau-menu {
    position: absolute;
    z-index: 2000;
    min-width: 240px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
#verda-bandeau-menu a {
    display: block;
    padding: 7px 16px;
    color: #1f2d27;
    text-decoration: none;
    white-space: nowrap;
}
#verda-bandeau-menu a:hover,
#verda-bandeau-menu a:focus { background: #edf5f0; }
#verda-bandeau-menu a.verda-actuelle { font-weight: 700; }
#verda-bandeau-menu a.verda-inactive { color: #9aa5a0; cursor: not-allowed; }
#verda-bandeau-menu .verda-bandeau-attente { padding: 7px 16px; color: #6b7671; }
#verda-bandeau-menu .verda-separateur {
    height: 1px; margin: 6px 0; background: rgba(0, 0, 0, .1);
}
@media print {
    #verda-bandeau, #verda-bandeau-menu { display: none !important; }
}

/* ═══ LARGEUR DES MODALES (2026-09-28) ═══
   Sao ouvre les assistants en `modal-md` (600 px, fixés par Bootstrap) et
   les messages en `modal-sm` (300 px) : les champs relationnels y étaient
   tronqués (« e — départ 2019 ») et les listes déroulantes inutilisables.
   « Il faut faire le tour de toutes celles existantes pour les élargir »
   (utilisateur) : UNE règle ici les couvre toutes, y compris les assistants
   à venir. Les `modal-lg` (listes, recherches) occupent déjà la largeur
   de l'écran (tryton-sao.css). Sous 768 px, Bootstrap garde la pleine
   largeur. */
@media (min-width: 768px) {
    .modal-dialog.modal-md {
        width: 1000px;
        max-width: calc(100vw - 60px);
    }
    .modal-dialog.modal-sm {
        width: 520px;
        max-width: calc(100vw - 60px);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ASSISTANT DE SECTEUR — des textes LISIBLES (2026-09-29)
   ═══════════════════════════════════════════════════════════════════
   « beaucoup trop petit pour être lisible, digne des conditions générales
   d'une police d'assurance ». Les champs Text en lecture seule de Sao sont
   des `<textarea>` au corps de saisie : on les lit ici comme du texte.
   ⚠️ Ciblés par leur nom de champ (`explication`, `resume`), le seul
   crochet stable (cf. detail_tva ci-dessus). */
[field="explication"] textarea,
textarea[name="explication"],
[field="resume"] textarea,
textarea[name="resume"] {
    font-size: 15px !important;   /* `.input-sm` de Bootstrap : 12px */
    line-height: 1.5 !important;
    resize: none;
    border: none;
    background: transparent;
    box-shadow: none;
}

/* ═══ LA BARRE D'OUTILS LISIBLE (2026-10-06, custom.js install_barre_lisible)
   « Pour moi illisible » : 15 icônes blanches sans un mot. Les ESSENTIELS
   portent leur nom sur fond blanc ; le reste est dans « Plus ▾ ». */
.verda-barre .verda-dans-plus { display: none !important; }
.verda-barre .navbar-btn.verda-essentiel,
.verda-barre .verda-plus > .navbar-btn {
    background: #fff; color: #1d4e4a;
    border: 1px solid rgba(0, 0, 0, .15);
    font-weight: 600; font-size: 14px;
    padding: 6px 12px;
}
.verda-barre .verda-libelle { margin-left: 6px; }
.verda-barre .verda-plus .verda-libelle { margin-left: 0; margin-right: 4px; }
/* Les icônes Tryton sont blanches : sur fond blanc, on les fonce. */
.verda-barre .navbar-btn.verda-essentiel img,
.verda-barre .verda-plus > .navbar-btn img { filter: brightness(0) saturate(100%) invert(22%) sepia(18%) saturate(1200%) hue-rotate(130deg); }
.verda-barre .navbar-btn.verda-essentiel:hover:not([disabled]),
.verda-barre .verda-plus > .navbar-btn:hover { background: #e6f2f0; }
/* GRISÉ = rien à faire (natif : disabled). Nettement grisé, pas « presque ». */
.verda-barre .navbar-btn.verda-essentiel[disabled] { opacity: .45; }
/* ENREGISTRER : vert vif dès qu'il y a quelque chose à enregistrer… */
.verda-barre #save.verda-essentiel:not([disabled]) {
    background: #2f855a; color: #fff; border-color: #276749;
}
.verda-barre #save.verda-essentiel:not([disabled]) img { filter: none; }
.verda-barre #save.verda-essentiel:not([disabled]):hover { background: #276749; }
/* …et « Enregistré ✓ » deux secondes après la réussite. */
.verda-barre #save.verda-enregistre {
    background: #c6f6d5 !important; color: #22543d !important; opacity: 1 !important;
}
/* Supprimer : rouge au survol, pour qu'on sache ce qu'on va faire. */
.verda-barre #delete_.verda-essentiel:hover:not([disabled]) {
    background: #fff5f5; color: #c53030; border-color: #feb2b2;
}
/* Le compteur « 3 sur 12 » / « Nouvelle fiche » : lisible, pas une pastille. */
.verda-barre .navbar-text .badge {
    background: transparent; color: #fff; font-size: 14px; font-weight: 600;
}
/* Le titre n'ouvre plus de menu (déplacé sous « Plus »). */
.verda-barre .verda-titre-seul { cursor: default; }
/* Écran étroit : les icônes seules, pour tenir sur une ligne. */
@media (max-width: 1100px) {
    .verda-barre .verda-essentiel .verda-libelle { display: none; }
}
/* Le compteur entier (« Nouvelle fiche », « 12 cochées sur 40 ») : Sao le
   bornait à 7em avec des points de suspension. */
.verda-barre .navbar-text .badge { max-width: none; min-width: 0; }
/* « Plus » sans ce qui est déjà dans la barre. */
.verda-plus .dropdown-menu > li.verda-dans-barre { display: none; }
/* LA BULLE IMMÉDIATE (data-aide) — aussi sur un bouton grisé, pour dire
   pourquoi. La bulle native tarde et ne s'affiche jamais sur un grisé. */
.verda-barre [data-aide] { position: relative; }
.verda-barre [data-aide]:hover::after {
    content: attr(data-aide);
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 1100;
    width: max-content; max-width: 280px; white-space: normal;
    background: #1a202c; color: #fff; text-align: left;
    font-size: 13px; font-weight: 400; line-height: 1.35;
    padding: 6px 10px; border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    pointer-events: none;
}
/* LES TITRES DE BLOC des fiches (« Coordonnées », « Situation dans ce
   dossier », « Le suivi »…) : en gras, pour qu'ils se lisent comme des
   titres et non comme du texte ordinaire (demandé le 2026-10-06). */
.form .form-separator label { font-weight: 700; font-size: 15px; color: #1d4e4a; }
/* LE CURSEUR « INTERDIT » DES SOUS-LISTES (2026-10-14). Bootstrap le pose sur
   tout bouton désactivé. Or la corbeille se désactive d'elle-même JUSTE APRÈS
   avoir supprimé (plus aucune ligne sélectionnée) : la souris, encore dessus,
   affichait « interdit » sur un geste qui venait de réussir. Le grisé suffit
   à dire qu'un bouton n'est pas disponible. */
.form-one2many-toolbar .btn[disabled],
.form-many2many-toolbar .btn[disabled] { cursor: default; }

/* ═══ « ＋ AJOUTER UNE LIGNE » SOUS LES SOUS-LISTES (2026-10-17,
   custom.js install_clic_vide_nouvelle_ligne) ═══ */
.verda-ajout-ligne {
    padding: 8px 12px; cursor: pointer;
    color: #1d4e4a; font-weight: 600; font-size: 15px;
    border-top: 1px dashed rgba(0, 0, 0, .2);
    background: #f6faf9;
}
.verda-ajout-ligne:hover { background: #e6f2f0; }