/* =========================================================================
   teogest-fonctionnel.css

   Regroupe les regles NON-couleur qui vivaient dans le theme dynamique
   _Style.cshtml (injecte via /Theme/Style), retire de l'app dans le cadre
   de la migration UI/UX : 100% Bootstrap, couleurs definies par le theme
   (assets/themes), plus aucune couleur d'ancien theme abonne.

   On ne conserve ici que le PUREMENT structurel/fonctionnel :
   - largeurs de champs CERFA (.taille-champ-*),
   - debordement des menus deroulants longs,
   - dimensionnement de quelques icones,
   plus un FOND DE REPLI Bootstrap pour le shell (bandeau + menu), car
   Site.css affiche leur texte en blanc : sans fond injecte, ce serait
   illisible. Ce repli est provisoire, a remplacer par le mecanisme
   d'override header + logo de l'abonne quand il sera en place.
   ========================================================================= */

/* --- Largeurs de champs (ex-_Style ; valeurs = TeoGest.Core.Constants.TailleChampInt).
   !important conserve pour la parite de comportement avec l'ancien _Style
   (doit gagner sur les largeurs de .form-control / styles inline). --- */
.taille-champ-1 { width: 50px !important; }
.taille-champ-2 { width: 100px !important; }
.taille-champ-2b { width: 120px !important; }
.taille-champ-3 { width: 200px !important; }
.taille-champ-4 { width: 300px !important; }
.taille-champ-5 { width: 400px !important; }
.taille-champ-6 { width: 500px !important; }

/* --- Largeurs de champ génériques (migration 100 % Bootstrap) ---
   Remplacent les `style="width:Xpx !important"` des anciennes vues BS3.
   Globales (chargées par tous les layouts) → utilisables aussi par les
   partials de popup qui ne peuvent pas charger leur propre feuille.
   max-width = responsive (le champ peut rétrécir, jamais dépasser). */
.champ-30 { max-width: 30px; }
.champ-32 { max-width: 32px; }
.champ-40 { max-width: 40px; }
.champ-45 { max-width: 45px; }
.champ-50 { max-width: 50px; }
.champ-55 { max-width: 55px; }
.champ-60 { max-width: 60px; }
.champ-70 { max-width: 70px; }
.champ-90 { max-width: 90px; }
.champ-96 { max-width: 96px; }
.champ-100 { max-width: 100px; }
.champ-110 { max-width: 110px; }
.champ-155 { max-width: 155px; }
.champ-120 { max-width: 120px; }
.champ-150 { max-width: 150px; }
.champ-180 { max-width: 180px; }
.champ-175 { max-width: 175px; }
.separator { font-weight: bold; margin: 5px 2px 1px 4px; }
.champ-200 { max-width: 200px; }
.champ-220 { max-width: 220px; }
.champ-225 { max-width: 225px; }
.champ-250 { max-width: 250px; }
.champ-270 { max-width: 270px; }
.champ-300 { max-width: 300px; }
.champ-340 { max-width: 340px; }
.champ-350 { max-width: 350px; }
.champ-400 { max-width: 400px; }
.champ-450 { max-width: 450px; }
.champ-420 { max-width: 420px; }
.champ-500 { max-width: 500px; }
.champ-600 { max-width: 600px; }
/* Zone de texte non redimensionnable par l'utilisateur (remplace les
   `style="resize:none"` inline des anciennes vues BS3). */
.champ-sans-resize { resize: none; }
.champ-rib { max-width: 55px; }
.champ-cle { max-width: 40px; }

/* Libellé de compte (ex- <style> inline répété dans les vues ScrapBanque). */
.text-box-libelle {
    width: 100%;
    max-width: 400px;
    text-overflow: ellipsis;
}

/* Groupes de segments (RIB, IBAN…) : champs alignés horizontalement. */
.groupe-segments {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
}

/* --- Filet : grise des champs en lecture seule ([readonly]) ---
   Bootstrap 3 (ancienne UI) grisait a la fois [disabled] ET [readonly]
   (.form-control[readonly] { background-color:#eee }). Bootstrap 5 ne grise
   plus QUE :disabled -> les champs readonly (toujours non editables) sont
   redevenus blancs, perdant leur indice visuel (symptome « champs plus grises »
   sur les ecrans DossierPermanent, p.ex. CodePays / Code categorie juridique).
   On retablit le comportement BS3. Valeur = $input-disabled-bg (#e9ecef) pour
   rester coherent avec :disabled. Charge apres le theme -> l'emporte. */
.form-control[readonly] {
    background-color: var(--bs-secondary-bg);
    opacity: 1;
}

/* --- Debordement des menus deroulants longs (comportement, pas couleur) --- */
.dropdown-menu {
    overflow-y: auto;
    max-height: calc(100vh - 130px);
}

/* --- Dimensionnement d'icones (ex-_Style) --- */
svg.resize-body {
    height: 18px;
    width: 18px;
    vertical-align: bottom;
}

/* --- Bouton d'action d'un input-group (composant TeoGest.Core InputGroup) ---
   Uniformise le gabarit du bouton (ex. crayon de formule) sur celui de l'addon
   .input-group-text (l'unité « % ») : bouton CARRÉ à la hauteur du groupe (aspect-ratio
   + padding horizontal annulé, l'icône est centrée), en couleur PRIMAIRE avec une icône
   BLANCHE. Piloté par la classe socle .input-group-bouton posée par MvcInputGroup sur
   tous ses boutons. Le sélecteur `.input-group > .input-group-bouton` (2 classes) prime
   sur `.btn-outline-secondary` (1 classe) → recolore quel que soit le variant passé par
   l'appelant. NE TOUCHE PAS à .input-group-text (le « % » reste inchangé). */
.input-group > .input-group-bouton {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    /*display: inline-flex;*/
    align-items: center;
    justify-content: center;
    padding-left: 0.6em;
    padding-right: 0.6em;
}
/* Icône blanche (Lucide/SvgPicto : stroke=currentColor → suit la couleur du bouton). */
.input-group > .input-group-bouton svg {
    color: #fff;
}

.icon.croix {
    max-height: 15px;
}

.icon.s_bold {
    max-height: 17px;
}

/* =========================================================================
   THÈME HEADER + NAVIGATION (100 % Bootstrap, couleurs via --bs-*)
   Le bandeau (#topBlock / .navbar-teogest) et la navigation principale
   (#navBlock / .navbar-sousmenu) tiraient leurs couleurs de _Style.cshtml
   (retiré). On les réhabille ici via le thème Bootstrap. Zone « possédée »
   (header + navigation) : à ne pas retoucher côté écrans. La STRUCTURE
   (layout, dimensions) reste dans topmenu.css.
   À terme : override abonné du bandeau (3 couleurs + logo) via --bs-* runtime.
   ========================================================================= */

/* --- Bandeau (header / top bar) ---
   Couleurs personnalisables par l'abonne (2 couleurs) poussees au runtime en variables
   --tg-bandeau-* par _BandeauTheme.cshtml. Fallback sur le theme Bootstrap si absentes. */
#topBlock {
    background-color: var(--tg-bandeau-fond, var(--tg-sidebar-bg, var(--bs-primary)));
    color: var(--tg-bandeau-texte, var(--tg-sidebar-text-hover, #fff));
}

#topBlock a,
#topBlock .nav-link {
    color: var(--tg-bandeau-texte, var(--tg-sidebar-text-hover, #fff));
}

/* --- Navigation principale (menu des modules) --- */
#navBlock {
    background-color: var(--bs-primary);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

#navBlock .navbar-nav > li > a,
#navBlock .nav-link {
    color: #fff;
}

/* Survol et entrée ouverte (1er niveau) */
#navBlock .navbar-nav > li > a:hover,
#navBlock li.open > a {
    background-color: rgba(255, 255, 255, .15);
    color: #fff;
    border-radius: 5px;
    max-height: 36px;
}

/* Entrée active / sélectionnée */
#navBlock .actif > a,
#navBlock .navbar-nav .active > a {
    background-color: rgba(0, 0, 0, .2);
    color: #fff;
}

/* Sous-menus déroulants : panneau clair, texte foncé (Bootstrap natif) */
#navBlock .dropdown-menu {
    background-color: var(--bs-dropdown-bg, #fff);
    border-color: var(--bs-dropdown-border-color, rgba(0, 0, 0, .15));
}

#navBlock .dropdown-menu a,
#navBlock .dropdown-menu .dropdown-item {
    color: var(--bs-dropdown-link-color, #212529);
}

#navBlock .dropdown-menu a:hover,
#navBlock .dropdown-menu .dropdown-item:hover {
    background-color: var(--bs-dropdown-link-hover-bg, #e9ecef);
    color: var(--bs-dropdown-link-hover-color, #1e2125);
}

/* --- Icônes du bandeau en Bootstrap Icons (remplacent les pictos SVG du sprite) ---
   Barre d'icônes (_BarreIcones) + flèches dossier annuel (_SelecteurSocieteDossier).
   Sélecteur `#navbar-principale` (id du <nav>) : spécificité (1,x,x) pour passer DEVANT
   topmenu.css/.scss (chargés après teogest-fonctionnel.css). Couleur blanche héritée. */

/* Bloc société / dossier annuel : largeur naturelle + tout sur une ligne, centré.
   (L'ancienne largeur fixe 294px + select-label 8.55em était trop étroite → la liste
   et les flèches débordaient / se décalaient : « il manque de la place ».) */
#navbar-principale .societe-dossier {
    width: auto;
}

#navbar-principale .comboContainer {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

#navbar-principale .comboContainer .select-label {
    width: auto;
    white-space: nowrap;
}

/* Flèches de navigation du dossier annuel (chevrons BS), centrées et alignées. */
#navbar-principale .NavBtnContainer {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#navbar-principale .NavBtnContainer a {
    color: var(--tg-bandeau-texte, var(--tg-sidebar-text-hover, #fff));
    display: inline-flex;
    align-items: center;
}

#navbar-principale .NavBtnContainer .bi {
    font-size: 16px;
    line-height: 1;
}

/* Barre d'icônes : rangée flex centrée verticalement. */
#navbar-principale .bloc-icones {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

#navbar-principale .bloc-icones .nav-icon {
    display: inline-flex;
    align-items: center;
}

#navbar-principale .bloc-icones .nav-icon a,
#navbar-principale .btn-syntheseGlobale {
    color: var(--tg-bandeau-texte, var(--tg-sidebar-text-hover, #fff));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Neutralise le décalage vertical de l'étoile synthèse (padding-top:12px hérité). */
#navbar-principale .icon-syntheseGlobale {
    padding-top: 0;
    text-align: center;
}

#navbar-principale .bloc-icones .bi,
#navbar-principale .btn-syntheseGlobale .bi,
#navbar-principale .boutonFicheSynthese .bi {
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
}

/* Pastille « messages non lus » : ancrée sur l'icône enveloppe BS. */
#navbar-principale .icon-messages span {
    position: relative;
}

/* --- Filet : fond opaque des modales ---
   `.modal-content` tire son fond de `var(--bs-modal-bg)`, variable définie par BS5
   DANS le scope `.modal`. Certaines popups (adaptateur teogest.dialog.bs5, contenus
   chargés en AJAX) peuvent se retrouver sans ce scope → `--bs-modal-bg` indéfini →
   fond TRANSPARENT (symptôme « modale fond transparent » : édition relevé, login…).
   On force un repli en dur (#fff). teogest-fonctionnel.css est chargé après le thème
   → cette règle l'emporte à spécificité égale. */
.modal-content,
.teogest-dialog .modal-content {
    background-color: var(--bs-modal-bg, var(--bs-body-bg, #fff));
}

/* --- Loader générique « Veuillez patienter / Déconnexion en cours » (#genericLoader) ---
   Son fond blanc + son cadre venaient des classes jQuery UI (.ui-dialog / .ui-widget-content),
   désormais vides → boîte transparente. On réhabille un fond opaque + ombre. L'overlay
   sombre (#genericModaloverlay.modal-overlay) est géré par socle/utilitaires.css.
   Positionnement : `.divWait` est en `position: absolute; top: 50%`, donc centré par rapport
   au plus proche ancêtre positionné. Sur les pages au contenu plus haut que la fenêtre (ex.
   Révision et ses grandes grilles), `top: 50%` tombe au milieu de la PAGE et non de la FENÊTRE
   → loader décalé vers le bas / hors écran. On force `position: fixed` pour le centrer sur le
   viewport, comme l'overlay (fixed), et on le place au-dessus de celui-ci (z-index 10). */
/* Loader « Traitement en cours » : PLEIN PAGE, plus de boite/modale.
   Le voile (translucide blanc) vient de #genericModaloverlay.modal-overlay ; ici on ne
   garde QUE le message + le spinner, centres, sans fond/bordure/ombre (plus de "modal"). */
/* Couleur UNIQUE des spinners `.preloader` de l'appli = couleur « main » du thème (les anneaux
   héritent de `currentColor`, cf. loaders.css `border: 4px solid`). Couvre #genericLoader,
   clones ged/ocr, etc. (Le login définit sa propre couleur main via ecran-construction.css.) */
.preloader,
.preloader-mini {
    color: var(--bs-main, #ff6136);
}

#genericLoader.divWait,
#genericLoader {
    position: fixed;
    z-index: 11;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    /* Boite du message elargie (200px -> 300px) pour le texte du preloader « Traitement en cours »
       (hors login). On ajuste le margin-left a -150px pour rester centre (left:50% - moitie largeur). */
    width: 300px;
    margin-left: -150px;
    /* Spinner AU-DESSUS, texte EN DESSOUS (comme le preloader de connexion). Le DOM a le texte
       (.ui-dialog-titlebar) avant le spinner (.preloader) -> column-reverse pour inverser. */
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

/* Spinner en flux (plus de positionnement absolu bottom hérité) pour le placer au-dessus du texte. */
#genericLoader .preloader {
    position: relative;
    bottom: auto;
    margin: 0;
}

#genericLoader .ui-dialog-titlebar {
    /* Pas de padding vertical : l'espacement avec le spinner est porte par le gap du flex parent,
       pour aligner la position du texte sur le preloader de connexion (message colle sous le loader). */
    padding: 0;
    /* Meme taille de texte que le preloader de connexion (.tg-ecran-construction__message). */
    font-size: 1rem;
    /* Texte en gris secondaire (le spinner porte la couleur main) — test 2026-07-16. */
    color: var(--bs-secondary-color, #6c757d);
}

/* Points de suspension animes apres « Traitement en cours » (meme rythme que
   l'ecran de preparation .tg-ecran-construction__points). En ::after = independant
   du texte pose par showGenericLoading() (qui utilise .text()). Largeur fixe pour
   ne pas decaler le texte selon 1/2/3 points. */
/* `:not(:empty)` : points animés UNIQUEMENT quand il y a un message (traitement / login).
   Titlebar vide (navigation / chargement de page) → spinner seul, aucun point. */
#genericLoader .ui-dialog-titlebar:not(:empty)::after {
    content: "\2026";
    display: inline-block;
    width: 1.25em;
    text-align: left;
    animation: tg-traitement-points 1.4s steps(1, end) infinite;
}

@keyframes tg-traitement-points {
    0% { content: "."; }
    33% { content: ".."; }
    66% { content: "..."; }
}

/* --- Voile « Traitement en cours » : overlay BLANC SEMI-TRANSPARENT ---
   Scopé a #genericModaloverlay (le loader generique) pour ne PAS modifier le
   .modal-overlay global (fond noir 0.3 des autres usages). L'ecran de
   « Preparation de votre environnement » (.tg-ecran-construction) reste, lui,
   BLANC OPAQUE — il n'est pas concerne par cette regle. */
#genericModaloverlay.modal-overlay {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

/* Clones du loader generique (GED bannettes #gedGenericLoader, OCR upload #ocrGenericLoader) :
   meme rendu PLEIN PAGE translucide, plus de boite, meme points animes. */
#gedGenericModaloverlay.modal-overlay,
#ocrGenericModaloverlay.modal-overlay {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

#gedGenericLoader.divWait, #gedGenericLoader,
#ocrGenericLoader.divWait, #ocrGenericLoader {
    position: fixed;
    z-index: 11;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    /* Spinner au-dessus, texte en dessous (idem #genericLoader / preloader de connexion). */
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

#gedGenericLoader .preloader,
#ocrGenericLoader .preloader {
    position: relative;
    bottom: auto;
    margin: 0;
}

#gedGenericLoader .ui-dialog-titlebar,
#ocrGenericLoader .ui-dialog-titlebar {
    padding: 0;
    font-size: 1rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Loader de l'import multiple OCR (#ocrUploadMultipleLoader) : même recadrage unifié que
   #ocrGenericLoader. Il portait encore les classes jQuery UI mortes (.divWait/.ui-dialog) sans
   centrage viewport, et OCRMultipleUpload.js lui force width:350/height:170 en inline → boîte
   bordée décalée au milieu de la grille. On neutralise (transform-centering + tailles auto). */
#ocrUploadMultipleLoader.divWait,
#ocrUploadMultipleLoader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    height: auto !important;
    margin: 0;
    z-index: 11;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

#ocrUploadMultipleLoader .preloader {
    position: relative;
    bottom: auto;
    margin: 0;
}

#ocrUploadMultipleLoader .ui-dialog-titlebar,
#ocrUploadMultipleLoader .t-window-titlebar {
    padding: 0;
    font-size: 1rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Loader de grille MvcGrid : remplace le spinner « 3 points » d'origine (NonFactors,
   @keyframes loader-points) par le SPINNER STANDARD (double anneau pulsé `animate-preloader`
   de loaders.css) — le même que #genericLoader / .preloader partout dans l'appli.
   Override CSS scopé `.mvc-grid` (spécificité > règles de mvc-grid.css), sans toucher la lib. */
.mvc-grid .mvc-grid-loader {
    background-color: rgba(255, 255, 255, 0.5); /* voile blanc translucide (comme le loader appli) */
}

.mvc-grid .mvc-grid-loading > div {
    position: relative;
    width: 72px;
    height: 72px;
}

    .mvc-grid .mvc-grid-loading > div > div {
        display: none; /* masque les 3 points d'origine */
    }

    .mvc-grid .mvc-grid-loading > div::before,
    .mvc-grid .mvc-grid-loading > div::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 4px solid var(--bs-main, #ff6136);
        animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

    .mvc-grid .mvc-grid-loading > div::after {
        animation-delay: -0.5s;
    }

/* Spinner de chargement d'un contenu de module dans le panneau Paramètres (iframe) :
   overlay translucide centré, scopé au conteneur de l'iframe (composant .preloader unifié). */
.param-iframe-conteneur {
    position: relative;
}

.param-iframe-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    z-index: 5;
}

    .param-iframe-loader .preloader {
        color: var(--bs-main, #ff6136);
        flex: 0 0 auto;
        width: 72px;
        height: 72px;
        padding: 0;
    }

#gedGenericLoader .ui-dialog-titlebar:not(:empty)::after,
#ocrGenericLoader .ui-dialog-titlebar:not(:empty)::after {
    content: "\2026";
    display: inline-block;
    width: 1.25em;
    text-align: left;
    animation: tg-traitement-points 1.4s steps(1, end) infinite;
}

/* --- Pied (#foot) dans les popups (adaptateur dialog -> modale BS5) ---
   `#foot` est position:fixed (barre de boutons en bas de page). Dans les anciens
   dialogs jQuery UI, `.ui-dialog #foot { position: static }` le remettait dans le
   flux de la popup. L'adaptateur teogest.dialog.bs5 produit `.modal.teogest-dialog`
   (et NON `.ui-dialog`) -> le #foot repartait en fixed plein écran (barre
   transparente, boutons Valider/Annuler collés au bord droit de l'écran).
   On le re-contient dans la modale. */
.teogest-dialog #foot,
.teogest-dialog .footPop {
    position: static;
    width: auto;
    margin: 0;
    /* Footer re-contenu dans la modale : on retire l'elevation/fond opaque du footer fixe de page. */
    box-shadow: none;
    background-color: transparent;
    z-index: auto;
}

/* --- Pied (#foot) plein écran : barre fixe OPAQUE ---
   shell.css pose `#foot` en position:fixed;bottom:0 mais SANS fond -> le contenu qui
   defile passe AU TRAVERS de la barre de boutons (« les boutons passent devant »). On
   restaure un fond opaque et on place la barre au-dessus du contenu defilant. (En modale,
   le bloc `.teogest-dialog #foot` ci-dessus le remet dans le flux : non concerne.) */
#foot {
    background-color: var(--bs-body-bg, #fff);
    z-index: 1020;
}

/* --- Barres de boutons de pied : flex au lieu de floats + clearfix ---
   Remplace l'ancien `clearfix` sur `ul.btnContainer` (abandonné : les layouts
   passent en flex/grid BS5, plus de floats à purger). */
#foot .btnContainer,
.footPop .btnContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Boutons d'action Teogest ---
   L'ancien `_Style.cshtml` peignait `.btn` (fond + texte) ; il est retiré, et
   `teogest.css` laisse `body .btn { color: white }` SANS fond -> boutons
   illisibles (blanc sur transparent) sur tout l'app. On les recolore via le
   thème Bootstrap (var --bs-*), en gardant les classes sémantiques existantes
   (`btn-primary`/`btn-primary`/`btn-success`/`btn-danger`) qui servent de hooks JS.
   Sélecteurs au même niveau de spécificité (0,2,0) : l'ordre source tranche
   (Enregistrer = btn-primary + btn-success -> vert). État cible : `GenererBouton`
   émettra directement les classes contextuelles BS (btn-primary/-success/-danger). */

/* --- Croix de fermeture des modales = icône Lucide (data-lucide="x") ---
   On n'utilise pas le `.btn-close` natif (image SVG de fond) : sur un en-tête `fond-theme`
   (couleur sombre) la croix par défaut est sombre et `btn-close-white` (déprécié BS 5.3.4+)
   ne la reteinte pas de façon fiable -> croix invisible (symptôme « croix manquante » sur la
   synthèse globale). Le bouton porte donc `<i data-lucide="x">` (rendu en <svg> Lucide,
   stroke=currentColor). `color:inherit` -> croix foncée sur en-tête clair ; override blanc sur
   `.modal-header.fond-theme`. `margin-left:auto` la pousse à droite ; l'ordre DOM est titre PUIS
   bouton dans _BSModalLayout (BS 5.3.8 n'ayant plus justify-content:space-between sur .modal-header,
   l'ordre inverse plaçait la croix à gauche du titre). Le SVG Lucide est calibré en `1em`. */
.modal-header .btn-close-icone {
    margin-left: auto;
    padding: .25rem .4rem;
    border: 0;
    background: transparent;
    font-size: 1.05rem;
    line-height: 1;
    color: inherit;
    opacity: .75;
    cursor: pointer;
}

.modal-header .btn-close-icone svg,
.modal-header .btn-close-icone i {
    width: 1em;
    height: 1em;
}

.modal-header .btn-close-icone:hover {
    opacity: 1;
}

.modal-header.fond-theme .btn-close-icone {
    color: var(--tg-bandeau-texte, var(--tg-sidebar-text-hover, #fff));
}

/* Notifications transverses (TgNotify) : conteneurs au-dessus des modales BS5 (~1055/1056).
   Markup = Views/Shared/Layout/_Notifications.cshtml ; pilotage = assets/js/core/notifications.js. */
#tgToastContainer,
#tgBandeauContainer {
    z-index: 1090;
}

/* Barre d'erreur (haut) : ne doit RECOUVRIR ni le header du haut ni le rail/sidebar de gauche.
   Position par défaut prudente (plein haut), affinée par contexte de layout ci-dessous.
   ⚠️ Ces positions sont calées sur le layout de PAGE. Une surface pleine hauteur ouverte par-dessus
   (tiroir offcanvas, panneau de Révision V2) part, elle, de `top:0` : la barre lui recouvrirait le haut
   du corps. La place est donc RÉSERVÉE côté surface — `body.tg-bandeau-ouvert` + `--tg-bandeau-h`, posés
   par notifications.js, consommés par socle/tiroir.css et Compta/Revision/revision-v2.css.
   `!important` : prioritaire sur d'éventuels utilitaires Bootstrap top-0/start-0/end-0 (eux-mêmes
   en !important) qui resteraient sur le conteneur tant que la vue n'est pas recompilée. */
#tgBandeauContainer {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* `left` + `right` définissent DÉJÀ la largeur : une largeur intrinsèque (`fit-content`,
       `max-content`) héritée d'ailleurs la réduirait au seul texte — la barre se retrouverait
       en pavé étroit au lieu d'occuper la largeur utile. */
    width: auto !important;
}

/* 🛑 Neutralisation du legacy `.show { display: inline|inline-block !important }` (Compta/Lettrage.css,
   Compta/SaisieCaisse/Saisie.css, immobilisations/Commun.css) : classe GLOBALE non scopée, héritée du
   couple `.hide`/`.show` d'avant Bootstrap 5. Or `.show` est aussi la classe d'état de BS5 — une alert
   ou un toast affichés la portent. Sur les écrans qui chargent l'un de ces CSS, le bandeau d'erreur
   devenait donc `display: inline` : un élément inline ignore `width`, donc `w-100` était SANS EFFET et
   la barre se réduisait à la largeur de son texte, calée en haut à gauche — le conteneur, lui, était
   correctement positionné (diagnostic confirmé par le dev le 2026-08-06).
   `display` explicite ici, avec `!important` pour battre le legacy à égalité de spécificité.
   Même parade que les 3 contournements déjà présents dans Compta/Revision/revision-v2.css.
   ⚠️ La vraie dette reste à traiter à la source : SCOPER ces `.show` legacy aux éléments qui les
   utilisent (pictos de grille de saisie, `.lierdoc`, `.solde`…), car ils cassent aussi modales,
   offcanvas, dropdowns et collapses BS5 sur ces mêmes écrans. */
#tgBandeauContainer > .alert,
.tg-bandeau-panel {
    display: block !important;
}

#tgToastContainer > .toast.show {
    display: block !important;
}

/* Barre affichée DANS un panneau ouvert (modale / tiroir) : posée par TgNotify juste au-dessus du
   corps du panneau, donc elle épouse SA largeur. Il faut annuler le `position: fixed` : le nœud
   n'est plus dans #tgBandeauContainer, mais le template reste le même. `flex: 0 0 auto` l'empêche
   d'être comprimée par le corps (modale et offcanvas sont des conteneurs flex en colonne). */
.tg-bandeau-panel {
    position: static !important;
    width: 100% !important;
    flex: 0 0 auto;
    border-radius: 0;
    margin: 0;
}

/* Pages hors dashboard : sous le header (#header = --rail-header-h) et à droite du rail (--rail-w). */
body.has-rail-modules #tgBandeauContainer {
    top: var(--rail-header-h, 60px) !important;
    left: var(--rail-w, 64px) !important;
}

/* Dashboard : tout en haut, à droite de la sidebar (220px)... */
body.dashboard-sidebar-layout #tgBandeauContainer {
    top: 0 !important;
    left: 220px !important;
}

/* ...ou collée à gauche quand la sidebar dashboard est repliée. */
body.dashboard-sidebar-layout.dashboard-sidebar-collapsed #tgBandeauContainer {
    left: 0 !important;
}

/* Mobile : nav repliée (burger) → la barre reprend toute la largeur. */
@media (max-width: 767.98px) {
    #tgBandeauContainer {
        left: 0 !important;
    }
}

/* btn-outline-warning : texte BLANC au survol/actif désormais géré DANS LE THÈME
   (bootstrap.default.css, règle @each sur tous les variants). Patch retiré d'ici. */