/*!
 * ygrc-bs5.css — Surcharges Y@GRC pour Bootstrap 5.3.x
 * Migration BS3 -> BS5. Chargé APRES bootstrap.min.css (l'ordre conditionne l'override).
 *
 * Contenu :
 *  1. Thème de marque (variables --bs-*)
 *  2. Ponts de compatibilité BS3 (well, has-error, form-group, label)
 *  3. Classes custom portées depuis backagent/bootstrap/ygrc.less
 *  4. Patches bootstrap-select 1.14.0-beta3 sous BS5
 */

/* ============================================================
 * 1. Thème de marque  (depuis variables.less / ygrc.less)
 *    @dark-blue #019ED8 ; @light-blue #5CBBDF ; @brand-primary = @dark-blue
 * ============================================================ */
:root {
  --bs-primary: #019ED8;
  --bs-primary-rgb: 1, 158, 216;
  /* Palette de statut BS3 (vs palette BS5 par défaut, plus foncée). Les utilitaires natifs
     text-bg / bg / text lisent ces --bs-COLOR-rgb : les fixer suffit (aucune surcharge de classe).
     NE PAS écrire d'étoile-slash dans ce commentaire : ça le fermerait et casserait --bs-secondary. */
  --bs-secondary: #777777;  --bs-secondary-rgb: 119, 119, 119;
  --bs-success:   #5cb85c;  --bs-success-rgb:   92, 184, 92;
  --bs-info:      #5bc0de;  --bs-info-rgb:      91, 192, 222;
  --bs-warning:   #f0ad4e;  --bs-warning-rgb:   240, 173, 78;
  --bs-danger:    #d9534f;  --bs-danger-rgb:    217, 83, 79;
  /* Liens : bleu de MARQUE (@dark-blue) = défaut back-office. Le front réassigne #337ab7
     (BS3 défaut) dans front/v2/ygrc.css (chargé après, et uniquement par l'app frontend). */
  --bs-link-color: #019ED8;
  --bs-link-color-rgb: 1, 158, 216;
  --bs-link-hover-color: #0179a5;       /* darken(@dark-blue, ~12%) */
  --bs-link-hover-color-rgb: 1, 121, 165;
  --bs-body-font-size: 0.875rem;        /* @font-size-base 14px */
  --bs-border-radius: 0.25rem;          /* @border-radius-base BS3 4px (BS5 = 0.375rem/6px) */
}

/* .btn-default (BS3) -> .btn-secondary (BS5) re-thémé en bleu marque (@btn-default-bg: @dark-blue) */
.btn-secondary {
  --bs-btn-bg: #019ED8;
  --bs-btn-border-color: #019ED8;
  --bs-btn-hover-bg: #017aa8;
  --bs-btn-hover-border-color: #017aa8;
  --bs-btn-active-bg: #016a93;
  --bs-btn-active-border-color: #016a93;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

/* nav-pills actif en couleur de marque (BS3 @component-active-bg) */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
}

/* ============================================================
 * 2. Ponts de compatibilité BS3 -> BS5
 *    (évite de réécrire des milliers de templates d'un coup)
 * ============================================================ */

/* BS5 a retiré les utilitaires .hidden / .hide (BS3) — largement utilisés par le front
   (ex: accordéons de démarches tp-panel-content). Sans eux, les blocs masqués s'affichent. */
.hidden { display: none !important; }
.hide { display: none !important; }

/* BS5 a retiré la marge de .form-group : on la rétablit */
.form-group { margin-bottom: 1rem; }

/* <select class="form-control"> (markup BS3, ~partout via les formatters symfony) :
   BS5 pose appearance:none sur .form-control sans fournir le chevron svg de .form-select
   -> les selects ressemblent à des champs texte sans flèche. Réf BS3 mesurée :
   appearance auto (flèche native du navigateur). */
select.form-control { appearance: auto; }
/* Bordure des champs : BS3 #ccc, BS5 #dee2e6 (plus pâle) — parité réf. */
.form-control { border-color: #ccc; }

/* Toggle des selectpickers (bootstrap-select) : la réf les rendait en .btn-default
   (blanc, texte #444, bordure #ccc) ; beta3 sous BS5 retombe sur .btn-light gris pâle.
   Thémé en CSS sur les DEUX classes (btn-light = défaut beta3, btn-default = défaut
   reposé par ygrc-bs5-init.js pour les inits tardives), scopé aux pickers. */
.bootstrap-select > .btn-default,
.bootstrap-select > .btn-light {
  color: #444;
  background-color: #fff;
  border: 1px solid #ccc;
}
.bootstrap-select > .btn-default:hover,
.bootstrap-select > .btn-default:focus,
.bootstrap-select.show > .btn-default,
.bootstrap-select > .btn-light:hover,
.bootstrap-select > .btn-light:focus,
.bootstrap-select.show > .btn-light {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-default,
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-light { color: #444; }

/* États de validation BS3 (has-error/-warning/-success posés sur le groupe).
   CONSERVÉ (petit, scopé) : la migration vers is-invalid/is-valid exige de modifier
   formatRow (marquer le CHAMP, pas le groupe) + injecter .invalid-feedback, et de valider
   en état d'erreur réel (soumission invalide) -> différé, hors budget de validation actuel. */
.has-error  .form-control,
.has-error  .custom-select { border-color: var(--bs-danger); }
.has-error  .form-label,
.has-error  .form-text { color: var(--bs-danger); }
.has-warning .form-control { border-color: var(--bs-warning); }
.has-success .form-control { border-color: var(--bs-success); }

/* (.well retiré en BS4/5 : markup migré en .card.card-body.bg-light natif, pont supprimé) */

/* Liens dans un badge (ex-.label) lisibles sur fond coloré */
.badge a, span.label a { color: #fff; }
.badge a:hover, span.label a:hover { color: #fff; }

/* (Phase 5) Boutons .close (BS3) migrés en .btn-close natif BS5 (glyphe en CSS,
   contenu × retiré) -> reconstruction supprimée. */
.btn-close { margin-left: auto; }   /* en-tête flex : pousse la croix à droite comme en BS3 */

/* .label en ligne (BS3, retiré en BS5) : pont type badge pour les usages restants.
   Ne s'applique pas aux <label> de formulaire (ciblage via [class~="label"] sur non-label). */
span.label, a.label, .label:not(label) {
  display: inline-block;
  padding: .2em .6em .3em;   /* métriques labels.less BS3 */
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  /* pas de background ici : la couleur des badges de statut vient des .text-bg-* (qui lisent
     les --bs-*-rgb de la palette BS3, §1) ou des classes sémantiques custom (.label-ko... front). */
}

/* BS5 fige la couleur de TEXTE de .text-bg-* à la compilation depuis SA palette (noir sur son
   jaune #ffc107 / cyan #0dcaf0). On a re-pointé le FOND sur la palette BS3 via les variables,
   mais ce texte ne suit pas (aucune variable runtime) : on le remet en blanc comme en BS3 sur
   warning/info, où BS5 avait choisi du noir. (success/danger/secondary/primary sont déjà blancs.) */
.text-bg-warning, .text-bg-info { color: #fff !important; }

/* ============================================================
 * 3. Classes custom portées depuis ygrc.less
 * ============================================================ */
.mini-margin { margin-bottom: 3px; }
.clear { clear: both; }
.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }
.table-fixed { table-layout: fixed; }

.roundedImageLegende {
  border-radius: 50px;
  height: 15px;
  width: 15px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* ex-:extend(.nav-pills active link) */
a.link-action-menu {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: #fff;
  background-color: var(--bs-primary);
  border-radius: var(--bs-border-radius, 0.375rem);
  text-decoration: none;
}
a.link-action-menu:hover,
a.link-action-menu:focus {
  color: #fff;
  text-decoration: none;
  background-color: #0179a5;            /* hover toolbar BS3 (darken @dark-blue ~12%) */
}

h2 button.btn, h2 a.btn { margin-bottom: 5px; }

.row.bordered {
  border-bottom: 1px solid #ddd;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

/* En-tête de card spécifique GRC (ex panel-heading-grc, migré en card-header-grc)
   BS3 faisait :extend(.panel-heading) -> fond gris + bordure basse. On le restitue. */
.card-header-grc {
  font-size: 19px;            /* ceil(14 * 1.3) large-font */
  font-weight: bold;
  text-align: center;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.card-header-grc.blue {
  background-color: var(--bs-primary);
  color: #fff;
}
.panel-comment .card-header { padding: 2px 5px; }

/* .checkbox (liste) */
.checkbox { list-style: none; }
.checkbox label label { padding-left: 10px; font-weight: bold; }

/* BlocToggle */
.bloctoggle .bloctoggle-title {
  border-bottom: 1px dotted #000;
  cursor: pointer;
  font-weight: bold;
}
.bloctoggle .bloctoggle-title i.fa-chevron-up,
.bloctoggle .bloctoggle-title i.fa-chevron-down { float: right; }
.bloctoggle.opened .bloctoggle-bloc { display: block; }
.bloctoggle.closed .bloctoggle-bloc { display: none; }
.bloctoggle .bloctoggle-bloc {
  padding: 1rem;
  background-color: var(--bs-light, #f8f9fa);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  margin-bottom: 1rem;
}

/* Barre de navigation spéciale (line-special-nav-pills) */
.line-special-nav-pills .nav-pills > li { float: right; padding: 0; }
/* Onglets du show des demandes : ce sont des <a class="tab_link"> (markup nav-pills BS3), pas des
   .nav-link -> BS5 ne leur applique aucun style de pilule, ils se collaient en texte brut. On
   restitue le rendu BS3 (pilules espacées avec padding/coins arrondis), l'actif en orange ci-dessous. */
.line-special-nav-pills .nav-pills > li > a {
  display: block;
  padding: 10px 15px;
  border-radius: 4px;
  color: #000;
  text-decoration: none;                /* BS5 souligne les <a> au survol ; les onglets BS3 non */
}
.line-special-nav-pills .nav-pills > li.active > a {
  color: #000;
  background-color: #f0ad4e;            /* @btn-warning-bg */
  border-color: #eea236;
}
/* Hover des onglets (oublié à la migration) : inactif -> gris BS3 #eee ; actif -> orange foncé.
   text-decoration répété ici par défense : sans lui, la règle ne tient que par la spécificité
   de la règle de base face au a:hover { underline } global. */
.line-special-nav-pills .nav-pills > li > a:hover,
.line-special-nav-pills .nav-pills > li > a:focus {
  background-color: #eee;
  text-decoration: none;
}
.line-special-nav-pills .nav-pills > li.active > a:hover,
.line-special-nav-pills .nav-pills > li.active > a:focus {
  background-color: #ec971f;            /* @btn-warning hover */
  border-color: #d58512;
}
.line-special-nav-pills .nav-pills.left-nav > li { float: left; }

/* Désactive le style des <a> */
.unlink, .unlink:hover { color: inherit; text-decoration: none; }

/* Polices (base 14px) */
.small-font  { font-size: 12px; }
.base-font   { font-size: 14px; }
.large-font  { font-size: 19px; }
.xlarge-font { font-size: 24px; }
.xxlarge-font{ font-size: 30px; }
.title-font  { font-size: 26px; font-weight: 700; color: #fff; }

.font-success  { color: #5cb85c; }
.font-info     { color: #5bc0de; }
.font-warning  { color: #f0ad4e; }
.font-danger   { color: #c82333; }
.font-inactive { color: #777; }

.shadowed { box-shadow: 0 3px 9px rgba(0, 0, 0, .5); }

/* Tags input */
div.tagsinput {
  border: 1px solid #e5e5e5;
  background: #fff;
  padding: 5px;
  overflow-y: auto;
  border-radius: 4px;
}
div.tagsinput span.tag {
  border-radius: 3px;
  display: block;
  float: left;
  padding: 6px 10px;
  text-decoration: none;
  background: #019ED8;
  color: #fff;
  margin-right: 5px;
  margin-bottom: 5px;
  font-weight: 700;
}
div.tagsinput span.tag a { font-weight: bold; color: #444; text-decoration: none; font-size: 11px; }
div.tagsinput input {
  width: 80px;
  margin: 0 5px 5px 0;
  border: 1px solid transparent;
  padding: 5px;
  background: transparent;
  color: #000;
  outline: 0;
}
div.tagsinput div { display: block; float: left; }
div.tagsinput .not_valid { background: #FBD8DB !important; color: #90111A !important; }
div.tagsinput .tags_clear { clear: both; width: 100%; height: 0; }

/* ============================================================
 * 4. Patches bootstrap-select 1.14.0-beta3 sous BS5
 *    (à affiner après validation pwtest sur l'app pilote)
 * ============================================================ */
.bootstrap-select > .dropdown-toggle { height: calc(1.5em + 0.75rem + 2px); }
.bootstrap-select .dropdown-menu { font-size: var(--bs-body-font-size, 0.875rem); }
.bootstrap-select.form-control { padding: 0; border: 0; height: auto; }

/* (§5 .input-group-btn retiré en BS5 : le bouton est désormais enfant direct de
   .input-group dans le markup — pont supprimé.) */

/* ============================================================
 * 6. Navbar : émulation navbar-expand-md GARDÉE (légitime). L'en-tête front utilise un
 *    pattern responsive CUSTOM (swap menu_big/menu_small + dropdowns au survol), pas le
 *    collapse standard BS5 ; navbar-expand-md en markup ne conviendrait pas. On conserve.
 *    (frontend conserve aussi le thème custom front/v2/ygrc.css)
 *    BS5 cache .navbar-collapse.collapse hors .show ; on émule navbar-expand-md en CSS
 *    pour ne pas réécrire le markup des navbars BS3.
 * ============================================================ */
@media (min-width: 768px) {
  /* On force l'affichage du menu desktop (émulation navbar-expand-md), mais PAS des
     menus réservés au mobile (.menu_small / .menu_small_account) : sinon ils sont
     forcés visibles ≥768px (ils battent leur display:none inline et leur .d-md-none)
     et se dédoublent sous l'en-tête. */
  .navbar .navbar-collapse:not(.menu_small):not(.menu_small_account) { display: flex !important; flex-basis: auto; }
  .navbar .navbar-toggle,
  .navbar .navbar-toggler { display: none !important; }
}
/* (navbar-right/left migrés en .ms-auto/.me-auto natifs dans le markup — ponts supprimés.) */
.navbar-form { display: flex; align-items: center; gap: .5rem; }
/* navbar-btn / navbar-header : neutres, conservés comme hooks du thème custom */

/* BS5 met .dropdown-menu en 1rem (16px) ; BS3 héritait des 14px du body -> on s'aligne
   (thème, pas une rustine). Les liens sont désormais des .dropdown-item natifs (Phase 6),
   le pont `.dropdown-menu > li > a` a été supprimé. */
.dropdown-menu { font-size: 14px; }
/* Liens des déroulants générés dynamiquement (en-tête front, helpers PHP) non atteints
   par le codemod : ils restent en <li><a> sans .dropdown-item -> on les style comme BS3.
   Les liens migrés en .dropdown-item natif sont exclus (styling BS5 natif), de même que les
   boutons .btn (ex. favoris <a class="btn btn-primary">), qui doivent garder leur couleur propre. */
.dropdown-menu > li > a:not(.dropdown-item):not(.btn) {
  display: block;
  color: #333;
  line-height: 20px;
  white-space: nowrap;
  text-decoration: none;
}

/* En-tête front (#page_header) : ponts BS3 -> BS5 du menu du haut */
/* BS5 ajoute un caret natif via .dropdown-toggle::after ; le gabarit a déjà son
   propre chevron -> caret en double. On masque le caret natif dans l'en-tête. */
#page_header .dropdown-toggle::after { display: none; }
/* BS5 .badge n'a plus de fond par défaut (BS3 = #777) -> le compteur de
   notifications (Messages) perdait sa pastille. */
#page_header .badge { background-color: #777; }
/* Positionnement : BS5 met .dropdown-menu en `position:static` par défaut et ne
   l'absolutise (top:100%) que via `[data-bs-popper]`, posé par Popper AU CLIC. Or
   ces menus d'en-tête s'ouvrent au SURVOL (CSS, display:block) sans Popper -> ils
   restaient `static` et tombaient dans le flux (à côté du bouton, pas dessous).
   BS3 avait `.dropdown-menu { position:absolute }` en base. On le restitue ici.
   (Les menus ouverts au clic via Popper posent un style inline qui prime, donc OK.)
   + coins hauts droits comme en BS3. */
#page_header .dropdown-menu { position: absolute; border-radius: 0 0 4px 4px; }

/* ============================================================
 * 7. .form-horizontal : implémentation BS5 LÉGITIME du formulaire horizontal (GARDÉ).
 *    BS5 a retiré le NOM .form-horizontal mais pas le besoin : c'est un alias sémantique
 *    de mise en page grille (flex row + col-*), posé par form au cas par cas. Le retirer
 *    casserait les ~79 formulaires front NON horizontaux (qui ne portent pas la classe).
 *    Ce n'est PAS une rustine (≠ recréation d'une classe supprimée) : on le conserve.
 * ============================================================ */
/* Le variant :has couvre les .form-group avec col-* directs HORS .form-horizontal :
   en BS3 les col-* flottaient toujours (label/champ côte à côte, ex. demarche-suivi) ;
   en BS5 ils s'empilent sans contexte flex. */
.form-horizontal .form-group,
.form-group:not(.row):has(> [class*="col-"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
  margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
}
.form-horizontal .form-group > [class*="col-"],
.form-group:not(.row):has(> [class*="col-"]) > [class*="col-"] {
  padding-right: calc(0.5 * var(--bs-gutter-x, 1.5rem));
  padding-left: calc(0.5 * var(--bs-gutter-x, 1.5rem));
}
/* En BS3 (.form-group = block), un enfant bloc NON col-* prenait 100 % de la largeur.
   En flex il passe en shrink-to-fit et écrase tout son sous-arbre (vu : conteneurs
   what_to_search_* de sessions réduits à 184px -> selectpicker 38px ; critères de
   regie/consommations sur 1 colonne). On rétablit le comportement bloc. */
.form-horizontal .form-group > div:not([class*="col-"]),
.form-horizontal .form-group > fieldset,
.form-group:not(.row):has(> [class*="col-"]) > div:not([class*="col-"]),
.form-group:not(.row):has(> [class*="col-"]) > fieldset {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .form-horizontal .form-label { margin-bottom: 0; text-align: right; padding-top: 7px; }
}

/* Récapitulatif de la démarche : paires label/valeur en .form-group contenant des col-md-*
   (et non une .row). BS3 les affichait côte à côte par float ; BS5 ne le fait qu'en contexte
   flex, sinon la valeur s'empile SOUS le libellé. On passe donc ces .form-group en flex
   (côte à côte) en GARDANT les labels alignés à gauche comme la réf (contrairement à
   .form-horizontal qui les aligne à droite).
   - .approach-details-recap .form-group : « + » déplié de la recherche (cf _approach_table2.php).
   - .approach_print_group : récap du show, du contrat et de l'impression (cf _approachData.php) ;
     classe posée explicitement sur les lignes concernées (health-record exclu volontairement).
   On exclut .use_div_for_labels (présent uniquement sur le récap FRONT, _approachData front) pour
   ne pas modifier son rendu propre. */
.approach-details-recap .form-group,
.approach_print_group:not(.use_div_for_labels) { display: flex; flex-wrap: wrap; align-items: center; }

/* ============================================================================
 * 8. COUCHE DE COMPATIBILITÉ BS3 -> BS5  (composants retirés en BS5)
 *    Le markup conserve les classes BS3 ; le thème custom (style.css, etc.)
 *    qui cible ces classes continue donc de fonctionner. Valeurs BS3 d'origine
 *    (avec la marque YGRC pour primary/btn-default).
 * ============================================================================ */

/* --- Panels --- */
/* (Phase 3) panel -> card : la structure (bordure/rayon/fond/padding) vient de .card
   natif BS5. On garde le margin-bottom + l'ombre légère des panels BS3 (thème), le
   .card-title à la taille BS3, et les COULEURS CONTEXTUELLES re-pointées sur les classes
   marqueur .card-default/.card-primary/... (markup migré + ciblées par FrontColorManager). */
.card { margin-bottom: 20px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
/* Métriques BS3 : panel-heading/-body/-footer paddaient 10px 15px / 15px ;
   .card-header/-body/-footer BS5 padde en rem (8px 16px / 16px). */
.card-header, .card-footer { padding: 10px 15px; }
.card-body { padding: 15px; }
.card-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; }
.card > .list-group, .card > .table { margin-bottom: 0; }
.card-default { border-color: #ddd; }
.card-default > .card-header { color: #333; background-color: #f5f5f5; border-color: #ddd; }
.card-primary { border-color: #019ED8; }
.card-primary > .card-header { color: #fff; background-color: #019ED8; border-color: #019ED8; }
.card-success { border-color: #d6e9c6; }
.card-success > .card-header { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.card-info { border-color: #bce8f1; }
.card-info > .card-header { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.card-warning { border-color: #faebcc; }
.card-warning > .card-header { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.card-danger { border-color: #ebccd1; }
.card-danger > .card-header { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

/* BS5 pose width:100% sur TOUT enfant direct de .row (.row > *), y compris les overlays
   en position absolue — un séparateur centré via right:50% + translateX(50%) se retrouve
   éjecté au bord (ex. « OU » entre les cartes identifiants-perdus). BS3/BS4 ne posaient
   pas de largeur sur les enfants non-col : on rétablit la largeur de contenu. */
.row > .position-absolute { width: auto; }

/* BS3 (et BS4) posaient position:relative sur TOUTES les colonnes ; BS5 l'a retiré.
   Les pseudo-éléments/overlays absolus ancrés sur leur colonne (ex. le trait pointillé
   .vertical_hr::before entre les cartes identifiants-perdus) sautaient à l'ancêtre
   positionné suivant (la .row pleine largeur). */
[class*="col-"] { position: relative; }

/* Titre des toolbars FullCalendar v3 : FC pose 1.75em mais le h2 du reboot BS5
   (calc rem+vw) l'emporte -> titre ~30px qui ne tient plus inline entre les groupes
   de boutons (il passait à la ligne, centré, sur l'agenda global). Réf mesurée : 25px. */
.fc-toolbar h2 { font-size: 1.75em; }

/* --- Classes contextuelles de LIGNES de table BS3 (tr.active/.success/.info/.warning/
   .danger), retirées en BS5 (remplacées par .table-*). ~90 usages dans les templates,
   ex. lignes « Non lu » de /echanges en tr.info (réf : fond #d9edf7). Valeurs BS3. --- */
.table > tbody > tr.active > td, .table > tbody > tr.active > th { background-color: #f5f5f5; }
.table > tbody > tr.success > td, .table > tbody > tr.success > th { background-color: #dff0d8; }
.table > tbody > tr.info > td, .table > tbody > tr.info > th { background-color: #d9edf7; }
.table > tbody > tr.warning > td, .table > tbody > tr.warning > th { background-color: #fcf8e3; }
.table > tbody > tr.danger > td, .table > tbody > tr.danger > th { background-color: #f2dede; }

/* --- Modèle de fond des tables : BS3 laissait les CELLULES transparentes et peignait le
   zébrage/survol sur le TR ; BS5 peint chaque cellule en --bs-table-bg opaque + zébrage par
   CELLULE (--bs-table-bg-type). Conséquences mesurées : fonds de thème masqués (carte du show
   de demande, TR zébrés beiges des thèmes front) et zébrage désaligné sous les cellules à
   rowspan (mes-adresses : bandes décalées sous la colonne Actions). Retour au modèle BS3 :
   cellules transparentes, zébrage et survol au niveau de la LIGNE, valeurs BS3
   (#f9f9f9 / #f5f5f5) — les thèmes front qui zèbrent le TR (newdesign.css) reprennent la main. */
.table { --bs-table-bg: transparent; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: initial; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: initial; }
.table-hover > tbody > tr:hover { background-color: #f5f5f5; }
/* Bordures : BS3 séparait les lignes par le border-TOP des cellules (+ border-bottom 2px
   sous le thead) ; BS5 par le border-BOTTOM — qui, sur un td.d-flex (sorti du modèle
   table-cell par le fixup), se dessine au bas du CONTENU, en plein milieu de la ligne
   (vu sur mes-adresses). Modèle BS3 rétabli, couleur BS3 #ddd. */
.table > :not(caption) > * > * { border-bottom-width: 0; }
.table > thead > tr > th, .table > thead > tr > td { border-bottom: 2px solid #ddd; }
.table > tbody > tr > th, .table > tbody > tr > td,
.table > tfoot > tr > th, .table > tfoot > tr > td { border-top: 1px solid #ddd; }
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td { border-top: 0; }

/* --- Bouton .btn-xs : taille BS3 conservée comme utilitaire custom (aucun équivalent
   BS5 natif ; btn-default migré en .btn-secondary, thémé marque plus haut). --- */
.btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }

/* Variantes contextuelles à la palette BS3 (BS5 redéfinit primary/success/... avec
   d'autres teintes -> repos ET survol divergeaient de la réf). On pilote via --bs-btn-*. */
.btn-primary {
  --bs-btn-color:#fff; --bs-btn-bg:#019ED8; --bs-btn-border-color:#018bbf;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#0179a5; --bs-btn-hover-border-color:#015f82;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#0179a5; --bs-btn-active-border-color:#015f82;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#019ED8; --bs-btn-disabled-border-color:#018bbf;
}
.btn-success {
  --bs-btn-color:#fff; --bs-btn-bg:#5cb85c; --bs-btn-border-color:#4cae4c;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#449d44; --bs-btn-hover-border-color:#398439;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#449d44; --bs-btn-active-border-color:#398439;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#5cb85c; --bs-btn-disabled-border-color:#4cae4c;
}
.btn-info {
  --bs-btn-color:#fff; --bs-btn-bg:#5bc0de; --bs-btn-border-color:#46b8da;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#31b0d5; --bs-btn-hover-border-color:#269abc;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#31b0d5; --bs-btn-active-border-color:#269abc;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#5bc0de; --bs-btn-disabled-border-color:#46b8da;
}
.btn-warning {
  --bs-btn-color:#fff; --bs-btn-bg:#f0ad4e; --bs-btn-border-color:#eea236;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#ec971f; --bs-btn-hover-border-color:#d58512;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#ec971f; --bs-btn-active-border-color:#d58512;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#f0ad4e; --bs-btn-disabled-border-color:#eea236;
}
.btn-danger {
  --bs-btn-color:#fff; --bs-btn-bg:#d9534f; --bs-btn-border-color:#d43f3a;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#c9302c; --bs-btn-hover-border-color:#ac2925;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#c9302c; --bs-btn-active-border-color:#ac2925;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#d9534f; --bs-btn-disabled-border-color:#d43f3a;
}

/* État :focus des boutons — parité BS3 mesurée sur :8443. BS3 assombrissait le fond sur
   TOUT focus (pas seulement :focus-visible comme BS5) et posait l'anneau natif du
   navigateur. Mesures réf : .btn-danger -> #c9302c + anneau ; boutons toolbar DT
   (ex .btn-default blanc) -> #e6e6e6 + anneau ; .btn-primary -> AUCUN changement
   (neutralisé par le thème) — on ne touche donc pas à primary. */
.btn-success:focus { background-color:#449d44; border-color:#398439; }
.btn-info:focus    { background-color:#31b0d5; border-color:#269abc; }
.btn-warning:focus { background-color:#ec971f; border-color:#d58512; }
.btn-danger:focus  { background-color:#c9302c; border-color:#ac2925; }
.dt-container .dt-buttons .btn:focus { background-color:#e6e6e6; }
.btn-success:focus, .btn-info:focus, .btn-warning:focus, .btn-danger:focus,
.dt-container .dt-buttons .btn:focus {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/* (Phase 4) Labels BS3 -> badges BS5 : variantes label-* migrées en text-bg-* natif.
   Le `label` nu (span/a) résiduel garde le pont .label:not(label) plus haut (cas Tier-3
   ambigus <label> vs badge, laissés en manuel). */

/* --- DataTables 2.x sous Bootstrap 5 : alignement sur le rendu de référence --- */
/* Boutons de la barre d'outils : petits boutons gris dégradés SÉPARÉS comme la réf BS3
   (≈12px, fond dégradé #fff->#e9e9e9, bordure #999, coins 2px), pas les gros boutons BS5
   blancs/14px groupés. DT2 BS5 les rend en .btn.btn-secondary dans un .dt-buttons.btn-group ;
   on neutralise le groupement (marges/coins) — scopé .dt-container pour battre .btn-group. */
.dt-container .dt-buttons .btn,
.dt-container .dt-buttons .btn-secondary {
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1.42857143;
  font-weight: 400;
  color: #000;
  background-color: #e9e9e9;
  background-image: linear-gradient(#fff 0%, #e9e9e9 100%);
  border: 1px solid #999;
  border-radius: 2px !important;     /* annule le retrait des coins internes du .btn-group */
  margin: 0 4px 4px 0 !important;    /* annule le margin-left:-1px du .btn-group -> boutons séparés */
  box-shadow: none;
}
.dt-container .dt-buttons .btn:hover,
.dt-container .dt-buttons .btn-secondary:hover {
  color: #000;
  background-image: linear-gradient(#fff 0%, #d9d9d9 100%);
  border-color: #888;
}
/* Surbrillance de ligne sélectionnée : bleu-gris doux (réf #9FAFD1) au lieu du bleu vif BS5.
   DT2 Select pilote la couleur via --dt-row-selected (composantes RGB). */
table.dataTable {
  --dt-row-selected: 159, 175, 209;
  --dt-row-selected-text: 51, 51, 51;
  /* Liens d'une ligne sélectionnée : DT2 les met en gris très clair (228,228,228), illisible sur
     le fond bleu-gris de sélection. On garde la couleur de lien de l'app (brand back / #337ab7 front). */
  --dt-row-selected-link: var(--bs-link-color-rgb);
}
/* …mais PAS sur les BOUTONS (.btn : le +/- de la 1re colonne ET les icônes d'action à droite) :
   DT2 recolore tous les <a> d'une ligne sélectionnée, ce qui peignait les glyphes en bleu (ex. +/-
   bleu au milieu du rond vert/rouge, crayon/historique bleus). On rétablit la couleur propre du
   bouton via --bs-btn-color (p.ex. #fff pour success/info/danger), valable pour toute variante. */
table.dataTable > tbody > tr.selected a.btn,
table.dataTable > tbody > tr.selected a.btn i { color: var(--bs-btn-color); }
/* Texte des cellules #444 comme la réf (BS5 le rendait noir). */
table.dataTable > tbody > tr > td { color: #444; }
/* En-tête de table : fond gris comme la réf BS3 (DT2/BS5 le laisse blanc).
   En-tête normal = #e8e7e7 ; colonne triée = #d4d2d2 (légèrement plus foncée), comme la réf.
   !important car datatables.min.css est chargé APRÈS ygrc-bs5.css et repeint le fond des cellules. */
table.dataTable thead th,
table.dataTable thead td {
  color: #444;
  background-color: #e8e7e7 !important;
  border-bottom: 2px solid #ddd;
}
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc,
table.dataTable thead td.dt-ordering-asc,
table.dataTable thead td.dt-ordering-desc {
  background-color: #d4d2d2 !important;
}
/* Flèche de tri ACTIVE : DT2 la rend à opacity:.6 (trop pâle). On la met pleine opacité
   (glyphe couleur #444 = bien visible comme les flèches PNG de la réf). !important car
   datatables.min.css est chargé après. La flèche inactive reste discrète (opacity .125 DT2). */
/* Flèches INACTIVES des colonnes triables : DT2 les rend à opacity .125, quasi invisibles —
   la réf affichait sort_both.png (double flèche grise bien visible) sur toute colonne triable.
   L'affordance « cette colonne se trie » est rétablie sans revenir aux PNG. !important pour
   battre datatables.min.css (chargé après) ; la flèche ACTIVE est remise à 1 par la règle
   suivante (même poids, déclarée après). */
table.dataTable thead th.dt-orderable-asc .dt-column-order:before,
table.dataTable thead th.dt-orderable-desc .dt-column-order:after,
table.dataTable thead td.dt-orderable-asc .dt-column-order:before,
table.dataTable thead td.dt-orderable-desc .dt-column-order:after {
  opacity: 0.4 !important;
}
table.dataTable thead th.dt-ordering-asc .dt-column-order:before,
table.dataTable thead th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead td.dt-ordering-asc .dt-column-order:before,
table.dataTable thead td.dt-ordering-desc .dt-column-order:after {
  opacity: 1 !important;
}
/* DT2 auto-détecte les types de colonnes et aligne nombres/dates à droite ; la réf DT1
   laissait tout aligné à gauche (pda, stats des comptes…) — l'alignement change la lecture
   des données. !important : datatables.min.css est chargé après cette feuille. */
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: left !important;
}
/* Pagination : boutons bordés joints comme la réf BS3 (boîtes blanches, bordure #ddd, coins
   arrondis aux extrémités, page active en bleu clair #afd9ee). DT2 BS5 rend
   .dt-paging .pagination .page-item > .page-link ; on reproduit le rendu .pagination de BS3. */
.dt-container .dt-paging .pagination { margin: 0; gap: 0; }
.dt-container .dt-paging .page-item .page-link {
  padding: 6px 12px;
  margin-left: -1px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #337ab7;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0;
  box-shadow: none;
}
.dt-container .dt-paging .page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.dt-container .dt-paging .page-item:last-child .page-link {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.dt-container .dt-paging .page-item .page-link:hover { background-color: #eee; color: #337ab7; }
.dt-container .dt-paging .page-item.active .page-link {
  color: #337ab7; /* réf BS3 mesurée : la page active garde la couleur de lien */
  background-color: #afd9ee;
  border-color: #ddd;
  font-weight: 400;
}
.dt-container .dt-paging .page-item.disabled .page-link { color: #337ab7; background-color: #fff; }
/* Barre de contrôles (Afficher … éléments / Filtrer) : compacte comme la réf.
   DT2 BS5 rend un .form-select-sm large (grosse flèche) et un .form-control plus haut/espacé. */
.dt-container .dt-length label,
.dt-container .dt-search label { font-weight: normal; margin-bottom: 0; }
/* « Afficher … éléments » : ne pas casser sur plusieurs lignes. */
.dt-container .dt-length label, .dt-container .dt-search label { white-space: nowrap; }
.dt-container .dt-length select.form-select {
  display: inline-block; width: auto; height: auto;
  padding: 1px 18px 1px 5px; font-size: 13px; line-height: 1.4;
  background-position: right 4px center; background-size: 10px 12px;
}
.dt-container .dt-search input.form-control {
  display: inline-block; width: auto; height: auto;
  padding: 1px 6px; font-size: 13px; line-height: 1.4;
}
/* Layout DT2 (cf. helper render_javascript2 -> layout topStart:buttons / topEnd:search) :
   la cellule des boutons est un col-md-auto qui prend la largeur de tous les boutons ; quand ils sont
   nombreux la row flex déborde et le filtre passe à la ligne. On rend la cellule boutons rétrécissable
   (flex-shrink + min-width:0) pour que les boutons reviennent à la ligne dans l'espace dispo et que le
   filtre reste à droite sur la même row (comportement de la réf, sans largeur magique).
   Scopé >=768px : sur mobile la row DT2 doit pouvoir empiler ses contrôles (wrap par défaut). */
@media (min-width: 768px) {
  .dt-container > .row { flex-wrap: nowrap; }
}
.dt-container .dt-layout-start { min-width: 0; flex-shrink: 1; }
.dt-container .dt-layout-start .dt-buttons { flex-wrap: wrap; }

/* Débordement horizontal : DT2 BS5 enveloppe ses contrôles/table dans des .row Bootstrap à gouttières
   négatives (-12px). Hors d'un .container/.col padded (ex parent .sf_admin_list backadmin), une row
   déborde de 12px à gauche/droite -> on neutralise les gouttières des rows du conteneur (pattern
   standard « row sans container »). */
.dt-container > .row { margin-left: 0; margin-right: 0; }
.dt-container > .row > [class*="col"] { padding-left: 0; padding-right: 0; }

/* Loader « Chargement en cours… » : DT2 rend div.dt-processing en position:absolute centré
   DANS .dt-container (position:relative). Avec beaucoup de lignes le conteneur est très haut,
   donc top:50% tombe au milieu d'une table longue -> le loader apparaît « trop bas », hors écran.
   On le fixe au centre du viewport (position:fixed) avec un encart léger pour la lisibilité, et on
   colore les dots du spinner à la marque (#019ED8) au lieu du gris pâle hérité de --dt-row-selected. */
.dt-container .dt-processing {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 2000;
  width: 220px;
  padding: 10px 2px 6px;
  background: #fff;
  border: 1px solid var(--bs-border-color, #ccc);
  border-radius: var(--bs-border-radius, 0.25rem);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.dt-container .dt-processing > div:last-child > div { background: var(--bs-primary); }

th.search .dt-column-footer:has(.input-group),
.dt-column-footer:has(.input-group) { display: block; }
th.search .dt-column-footer:has(.input-group) .dt-column-title,
.dt-column-footer:has(.input-group) .dt-column-title { display: block; width: 100%; }
th.search .input-group,
.dt-column-footer .input-group { flex-wrap: nowrap; width: 100%; }
th.search .input-group > .form-control,
.dt-column-footer .input-group > .form-control { flex: 1 1 auto; width: auto !important; min-width: 0; }

/* Modales : le markup historique (≈130 partials) place le .btn-close AVANT le .modal-title —
   convention BS3 où .modal-header .close était `float:right` (donc l'ordre source n'avait pas
   d'importance). BS5 a retiré le float et aligne le .btn-close via margin-left:auto : placé en
   premier dans un flex justify-content:space-between, il pousse le titre à droite et se retrouve
   lui-même à gauche (croix en haut-à-gauche). On rétablit l'ordre visuel natif (titre à gauche,
   croix à droite) via l'ordre flex, sans toucher aux 130 templates. */
.modal-header .modal-title { order: 0; }
.modal-header .btn-close { order: 1; margin-left: auto; }
/* Titre de modale : le markup utilise des balises titre variées (82 h2, 60 h4…). En BS5 le h2
   ressort à ~30px + une marge haute legacy de 20px (titre trop gros et décalé vers le bas) ; la réf
   BS3 affiche un titre compact 25px, sans marge, couleur #444. On uniformise tous les .modal-title. */
.modal-header .modal-title {
  margin: 0;
  font-size: 1.5625rem;
  line-height: 1.4286;
  font-weight: 500;
  color: #444;
}
/* Gabarit des modales : BS3 = 600px, BS5 = 500px — toutes les modales (export, version…)
   retrouvent leur largeur familière. Le btn-close natif BS5 est conservé. */
.modal-dialog { --bs-modal-width: 600px; }

/* (Phase 2 migration BS5 native) .table-condensed -> .table-sm, .control-label -> .form-label,
   .help-block -> .form-text, .input-group-addon -> .input-group-text : markup + sélecteurs
   de thème migrés vers le natif BS5, reconstructions supprimées. */

/* --- Navbar BS3 : fond/bordure (en plus de l'émulation navbar-expand-md du §6) --- */
.navbar-default { background-color: #f8f8f8; border: 1px solid #e7e7e7; }
.navbar-default .navbar-nav > li > a { color: #777; }
.navbar-nav > li { position: relative; }

/* ============================================================================
 * 9. PARITÉ DE BASE BS3  (BS5 a changé font-size/line-height/poids -> on s'aligne)
 * ============================================================================ */
:root {
  --bs-body-line-height: 1.428571429;   /* BS3 (BS5 = 1.5) */
}
/* BS3 mettait TOUS les <label> en gras */
label, .form-label { font-weight: 700; }
/* ... sauf les labels de cases/radios BS5 (.form-check-label), qui restent en poids normal. */
.form-check-label { font-weight: 400; }
/* Boutons à la taille BS3 (14px, rayon 4px) -> évite que les libellés débordent */
.btn { --bs-btn-font-size: .875rem; --bs-btn-border-radius: .25rem; --bs-btn-line-height: 1.428571429; }

/* BS5 souligne les liens par défaut ; BS3 non (souligné au survol seulement). */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
/* sauf boutons/nav/composants : jamais soulignés, même au survol (sinon les .btn qui sont
   des <a> se soulignent via a:hover, contrairement aux .btn qui sont des <button>). */
.btn, .nav-link, .navbar-brand, .dropdown-item, .page-link,
.btn:hover, .btn:focus,
.nav-link:hover, .nav-link:focus,
.navbar-brand:hover, .navbar-brand:focus,
.dropdown-item:hover, .dropdown-item:focus,
.page-link:hover, .page-link:focus { text-decoration: none; }

/* form-horizontal en flex : .float-end/.pull-right poussent la colonne champ à droite
   (equivalent du float:right BS3, ignore sur un flex-item). */
.form-horizontal .form-group > .float-end,
.form-horizontal .form-group > .pull-right { margin-left: auto; }

/* Police : BS5 utilise une stack systeme ; BS3 utilisait Helvetica Neue/Arial.
   On s'aligne sur BS3 pour un rendu de texte identique (largeurs/poids). */
:root { --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* Padding de colonne BS3 (15px) dans les form-horizontal (alignement labels/champs). */
.form-horizontal .form-group > [class*="col-"] { padding-right: 15px; padding-left: 15px; }

/* Titres : le reboot BS5 supprime le margin-top et change tailles/poids/interligne.
   On restitue les tailles du thème (variables.less @font-size-base 14px) + les marges
   BS3 (h1-3 top 20px, h4-6 top 10px) + poids 500 / interligne 1.1. (style.css, chargé
   après, garde la main là où il surcharge déjà ces titres.) */
h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; }
h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 500; line-height: 1.1; }
h1, .h1 { font-size: 36px; }   /* floor(14*2.6)  — échelle BS3 (variables.less) */
h2, .h2 { font-size: 30px; }   /* floor(14*2.15) */
h3, .h3 { font-size: 24px; }   /* ceil(14*1.7)   */
h4, .h4 { font-size: 18px; }   /* ceil(14*1.25)  */
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }   /* ceil(14*0.85)  */

/* Corps de texte : le reboot BS5 espace en rem (p/listes 1rem = 16px, label 0) là où
   BS3 (type.less, base 14px) posait des px : p et ul/ol à 10px de marge basse,
   label à 5px, listes à 40px de retrait navigateur (reboot : 2rem = 32px). Les
   composants BS5 (nav, dropdown-menu…) reposent leur propre padding-left:0. */
p { margin-bottom: 10px; }
ul, ol { margin-bottom: 10px; padding-left: 40px; }
label { margin-bottom: 5px; }
/* normalize BS3 : les cellules nues étaient à 0 ; le reboot BS5 laisse le 1px UA
   (+2px par ligne sur toutes les tables sans .table, ex. récapitulatifs mon-compte).
   Les .table/.dataTable gardent leur padding (sélecteurs plus spécifiques). */
td, th { padding: 0; }

/* Séparateurs : BS5 met hr en currentColor (foncé) à 25% d'opacité ; BS3 = #eee opaque. */
hr { border-top-color: #eee; opacity: 1; }

/* Champs : BS5 .form-control/.form-select sont en 16px/interligne 1.5 -> hauteur 38px.
   BS3 était en 14px/1.428 -> hauteur 34px. On s'aligne (sinon les champs sont visiblement
   plus hauts que la réf et décalent les rangées). */
.form-control, .form-select { font-size: 14px; line-height: 1.428571429; }

/* eonasdan bootstrap-datetimepicker : le widget bascule ses panneaux (date/heure) via
   la classe BS3 .collapse.in, renommée .collapse.show en BS5. Le JS du plugin (vendor,
   hors scope) pose toujours .in -> on restitue l'affichage pour les deux classes,
   sinon les sous-panneaux du datetimepicker restent masques. */
.bootstrap-datetimepicker-widget .collapse.in,
.bootstrap-datetimepicker-widget .collapse.show { display: block; }

/* (Phase 1 migration BS5 native) Les alias d'utilitaires BS4 horizontaux
   (margin/padding right-left, float-left-right, no-gutters) ont ete SUPPRIMES :
   le markup utilise desormais les noms BS5 natifs (me/ms/ps/pe, float-start-end, g-0). */

/* EXCEPTION : les contenus stockés EN BASE (pied de page FrontColorManager, corps de
   posts/mails édités en WYSIWYG chez les clients) gardent les noms BS3/BS4 — aucun
   codemod ne peut les migrer. Pont minimal pour ces classes (ex. logo YPOK du footer
   étiré : <img class="img-responsive" width height> sans le height:auto de BS3 ;
   coordonnées centrées : text-left mort). */
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-rounded { border-radius: 6px; }
.img-circle { border-radius: 50%; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.pull-left, .float-left { float: left !important; }
.pull-right, .float-right { float: right !important; }

/* En-tête front : BS5 met .navbar-nav en flex-direction:column par défaut (vertical)
   tant qu'il n'y a pas de classe .navbar-expand-* sur le .navbar. BS3 le mettait en
   ligne. Sans cela, le bandeau de navigation (logo / Accueil / Me connecter / Suivre
   mes demandes) s'empile et se centre au lieu de s'étaler sur une ligne. On restitue
   l'horizontale, en scope #page_header (en-tête front uniquement, n'affecte pas les
   navbars du back). */
#page_header .navbar-nav { flex-direction: row; }

/* BS5 ajoute aussi un padding vertical .5rem sur .navbar (BS3 : aucun) : l'en-tête
   front passait de 151 à 166px et décalait toute la page vers le bas. Scopé
   #page_header (la topbar backagent a son propre gabarit, déjà conforme). */
#page_header .navbar { padding-top: 0; padding-bottom: 0; }