/* ==========================================================================
   bootstrap-compat.css — IN-301 (10.2026) : Bootstrap 5 avec l'allure Bootstrap 3

   Chargé juste après bootstrap.min.css (5.3) dans les deux layouts
   (templates/base.html.twig et legacy/templates/base.html.twig).

   1. Réglages globaux : densité 14px (Bootstrap 5 est en rem) et palette
      Bootstrap 3, par variables CSS --bs-*.
   2. Classes Bootstrap 3 conservées comme classes « maison » : celles sans
      équivalent en 5 (panel, label, well, btn-xs, hidden-xs…) ou dont le
      renommage coûterait plus qu'il ne rapporte (form-group, has-error…).
      Valeurs reprises de bootstrap.css 3.4.1.
   3. Mise en page de l'en-tête et du menu latéral (classes navbar-* maison).
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Réglages globaux
   ------------------------------------------------------------------------- */

html {
  font-size: 14px; /* tout Bootstrap 5 est en rem : 14px rend la densité de la version 3 */
}

:root,
[data-bs-theme="light"] {
  scroll-behavior: auto;
  --bs-body-font-family: Verdana, Geneva, sans-serif;
  --bs-body-font-size: 13px;
  --bs-body-line-height: 1.42857143;
  --bs-body-color: #333;
  --bs-body-color-rgb: 51, 51, 51;
  --bs-link-color: #337ab7;
  --bs-link-color-rgb: 51, 122, 183;
  --bs-link-hover-color: #23527c;
  --bs-link-hover-color-rgb: 35, 82, 124;
  --bs-border-color: #ddd;
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 6px;
  --bs-secondary-color: #777;
  --bs-primary: #337ab7;
  --bs-primary-rgb: 51, 122, 183;
  --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;
}

a {
  text-decoration: none; /* Bootstrap 5 souligne tous les liens */
}

a:hover {
  text-decoration: underline;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

h1, h2, h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h4, h5, h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

p {
  margin: 0 0 10px;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

legend {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border-top: 1px solid #eee;
  opacity: 1;
}

.row,
.container,
.container-fluid {
  --bs-gutter-x: 30px;
}

/* Tables : Bootstrap 5 peint chaque cellule avec --bs-table-bg (blanc), ce qui
   masquerait les fonds posés sur les <tr> (tr.selected, tr.row-title, bg-info…) */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: inherit;
}

/* <caption> au-dessus de la table, comme en Bootstrap 3 (Bootstrap 5 : caption-side:bottom,
   .caption-top pour revenir en haut) — titres « Totaux » / « Détails » du rapport SAM */
table {
  caption-side: top;
}

caption {
  padding: 8px 0;
  font-size: inherit;
  color: #777;
  text-align: left;
}

/* Table imbriquée sur fond blanc, comme en Bootstrap 3 (formulaire d'un chantier
   dans la saisie quotidienne, posé dans une ligne .bg-info du tableau du jour) */
.table .table {
  background-color: #fff;
}

.table > :not(caption) > * > * {
  padding: 8px;
}

.table-sm > :not(caption) > * > * {
  padding: 5px;
}

@media (min-width: 768px) {
  .table-responsive {
    overflow-x: visible; /* Bootstrap 3 ne faisait défiler que sous 768px */
  }
}

/* Boutons : palette Bootstrap 3 (Bootstrap 5 met du texte noir sur info et warning) */
.btn-primary {
  --bs-btn-bg: #337ab7;
  --bs-btn-border-color: #2e6da4;
  --bs-btn-hover-bg: #286090;
  --bs-btn-hover-border-color: #204d74;
  --bs-btn-active-bg: #204d74;
  --bs-btn-active-border-color: #122b40;
  --bs-btn-disabled-bg: #337ab7;
  --bs-btn-disabled-border-color: #2e6da4;
}

.btn-success {
  --bs-btn-bg: #5cb85c;
  --bs-btn-border-color: #4cae4c;
  --bs-btn-hover-bg: #449d44;
  --bs-btn-hover-border-color: #398439;
  --bs-btn-active-bg: #398439;
  --bs-btn-active-border-color: #255625;
  --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: #269abc;
  --bs-btn-active-border-color: #1b6d85;
  --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: #d58512;
  --bs-btn-active-border-color: #985f0d;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #f0ad4e;
  --bs-btn-disabled-border-color: #eea236;
}

.btn-danger {
  --bs-btn-bg: #d9534f;
  --bs-btn-border-color: #d43f3a;
  --bs-btn-hover-bg: #c9302c;
  --bs-btn-hover-border-color: #ac2925;
  --bs-btn-active-bg: #ac2925;
  --bs-btn-active-border-color: #761c19;
  --bs-btn-disabled-bg: #d9534f;
  --bs-btn-disabled-border-color: #d43f3a;
}

/* Alertes : couleurs Bootstrap 3 */
.alert-success {
  --bs-alert-color: #3c763d;
  --bs-alert-bg: #dff0d8;
  --bs-alert-border-color: #d6e9c6;
  --bs-alert-link-color: #2b542c;
}

.alert-info {
  --bs-alert-color: #31708f;
  --bs-alert-bg: #d9edf7;
  --bs-alert-border-color: #bce8f1;
  --bs-alert-link-color: #245269;
}

.alert-warning {
  --bs-alert-color: #8a6d3b;
  --bs-alert-bg: #fcf8e3;
  --bs-alert-border-color: #faebcc;
  --bs-alert-link-color: #66512c;
}

.alert-danger {
  --bs-alert-color: #a94442;
  --bs-alert-bg: #f2dede;
  --bs-alert-border-color: #ebccd1;
  --bs-alert-link-color: #843534;
}

.alert > p:last-child {
  margin-bottom: 0;
}

/* Couleurs contextuelles de texte et de fond : valeurs Bootstrap 3
   (en 5, text-warning est un jaune illisible sur blanc) */
.text-muted { color: #777 !important; }
.text-primary { color: #337ab7 !important; }
.text-success { color: #3c763d !important; }
.text-info { color: #31708f !important; }
.text-warning { color: #8a6d3b !important; }
.text-danger { color: #a94442 !important; }
.bg-primary { color: #fff; background-color: #337ab7 !important; }
.bg-success { background-color: #dff0d8 !important; }
.bg-info { background-color: #d9edf7 !important; }
.bg-warning { background-color: #fcf8e3 !important; }
.bg-danger { background-color: #f2dede !important; }

/* Champ en lecture seule grisé, comme en Bootstrap 3 (5.3 ne distingue plus
   readonly de la saisie normale). Les fonds posés par le projet sur une classe
   plus spécifique (totaux jaunes de la grille, #dateMonday) restent prioritaires. */
.form-control[readonly] {
  background-color: #eee;
  opacity: 1;
}

/* Modales */
/* select2 ajoute sa liste au <body> avec z-index 1051 : au-dessus de la modale
   Bootstrap 3 (1050), mais sous celle de Bootstrap 5 (1055). On la remonte, en
   restant sous popovers (1070) et tooltips (1080). Pas de dropdownParent côté JS :
   la liste vivrait dans la modale et Échap, remontant à celle-ci, la fermerait. */
.select2-container--open .select2-dropdown {
  z-index: 1056;
}
.modal-lg {
  --bs-modal-width: 900px;
}

.modal-header {
  padding: 15px;
}

/* En Bootstrap 5 l'en-tête est en flex ; le bouton de fermeture précède le
   titre dans le balisage (ordre Bootstrap 3) : on le renvoie à droite */
.modal-header .close {
  order: 2;
  margin-left: auto;
}

.modal-header .modal-title {
  order: 1;
}

.modal-footer {
  display: block; /* les boutons de #modal flottent (float-start) */
  text-align: right;
}

.modal-footer::after {
  content: "";
  display: table;
  clear: both;
}

/* L'application dessine ses propres carets (icônes), pas celui de Bootstrap 5 */
.dropdown-toggle::after {
  display: none;
}

/* Progress : dimensions Bootstrap 3 */
.progress {
  --bs-progress-height: 20px;
  --bs-progress-font-size: 12px;
  --bs-progress-bg: #f5f5f5;
  --bs-progress-border-radius: 4px;
  --bs-progress-bar-bg: #337ab7;
  margin-bottom: 20px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

/* -------------------------------------------------------------------------
   2. Classes Bootstrap 3 conservées (valeurs de bootstrap.css 3.4.1)
   ------------------------------------------------------------------------- */

/* --- Boutons --- */
.btn-default {
  --bs-btn-color: #333;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ccc;
  --bs-btn-hover-color: #333;
  --bs-btn-hover-bg: #e6e6e6;
  --bs-btn-hover-border-color: #adadad;
  --bs-btn-active-color: #333;
  --bs-btn-active-bg: #e6e6e6;
  --bs-btn-active-border-color: #adadad;
  --bs-btn-disabled-color: #333;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: #ccc;
}

.btn-xs,
.btn-group-xs > .btn {
  --bs-btn-padding-y: 1px;
  --bs-btn-padding-x: 5px;
  --bs-btn-font-size: 12px;
  --bs-btn-border-radius: 3px;
  line-height: 1.5;
}

/* --- Étiquettes et badges --- */
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

a.label:hover,
a.label:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.label:empty {
  display: none;
}

.btn .label {
  position: relative;
  top: -1px;
}

.label-default { background-color: #777; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; }
.label-info { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger { background-color: #d9534f; }

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

/* --- Panneaux --- */
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-body {
  padding: 15px;
}

.panel-body::after {
  content: "";
  display: table;
  clear: both;
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}

.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
  color: inherit;
}

.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.panel > .table,
.panel > .table-responsive > .table {
  margin-bottom: 0;
}

.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive {
  border-top: 1px solid #ddd;
}

.panel-group {
  margin-bottom: 20px;
}

.panel-group .panel {
  margin-bottom: 0;
  border-radius: 4px;
}

.panel-group .panel + .panel {
  margin-top: 5px;
}

.panel-group .panel-heading {
  border-bottom: 0;
}

.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
  border-top: 1px solid #ddd;
}

.panel-group .panel-footer {
  border-top: 0;
}

.panel-group .panel-footer + .panel-collapse .panel-body {
  border-bottom: 1px solid #ddd;
}

.panel-default { border-color: #ddd; }
.panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; }
.panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ddd; }
.panel-default > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #ddd; }

.panel-primary { border-color: #337ab7; }
.panel-primary > .panel-heading { color: #fff; background-color: #337ab7; border-color: #337ab7; }

.panel-success { border-color: #d6e9c6; }
.panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }

.panel-info { border-color: #bce8f1; }
.panel-info > .panel-heading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }

.panel-warning { border-color: #faebcc; }
.panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }

.panel-danger { border-color: #ebccd1; }
.panel-danger > .panel-heading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

/* --- Divers composants supprimés en 5 --- */
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.well-sm {
  padding: 9px;
  border-radius: 3px;
}

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}

.pager {
  padding-left: 0;
  margin: 20px 0;
  text-align: center;
  list-style: none;
}

.pager::after {
  content: "";
  display: table;
  clear: both;
}

.pager li {
  display: inline;
}

.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}

.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;
  background-color: #eee;
}

.pager .next > a,
.pager .next > span {
  float: right;
}

.pager .previous > a,
.pager .previous > span {
  float: left;
}

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > span {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
}

@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dl-horizontal dd {
    margin-left: 180px;
  }
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.close {
  float: right;
  padding: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: .2;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  opacity: .5;
}

.media {
  margin-top: 15px;
}

.media:first-child {
  margin-top: 0;
}

.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}

.media-body {
  width: 10000px;
}

.media-object {
  display: block;
}

.media-object.img-thumbnail {
  max-width: none;
}

.media-right,
.media > .float-end {
  padding-left: 10px;
}

.media-left,
.media > .float-start {
  padding-right: 10px;
}

.media-left,
.media-right,
.media-body {
  display: table-cell;
  vertical-align: top;
}

.media-middle {
  vertical-align: middle;
}

.media-bottom {
  vertical-align: bottom;
}

.media-heading {
  margin-top: 0;
  margin-bottom: 5px;
}

.media-list {
  padding-left: 0;
  list-style: none;
}

/* --- Formulaires --- */
.form-group {
  margin-bottom: 15px;
}

.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}

.checkbox,
.radio {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.checkbox.disabled label,
.radio.disabled label,
fieldset[disabled] .checkbox label,
fieldset[disabled] .radio label {
  cursor: not-allowed;
}

.checkbox label,
.radio label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
  position: absolute;
  margin-left: -20px;
}

.checkbox + .checkbox,
.radio + .radio {
  margin-top: -5px;
}

.checkbox-inline,
.radio-inline {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  vertical-align: middle;
  cursor: pointer;
}

.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline {
  margin-top: 0;
  margin-left: 10px;
}

.has-error .help-block,
.has-error .control-label,
.has-error .form-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error legend {
  color: #a94442;
}

.has-error .form-control,
.has-error .form-select {
  border-color: #a94442;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.has-error .form-control:focus,
.has-error .form-select:focus {
  border-color: #843534;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}

.has-error .input-group-text {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}

@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .form-inline .form-control,
  .form-inline .form-select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
  }

  .form-inline .input-group .form-control {
    width: auto;
  }

  .form-inline .form-label {
    margin-bottom: 0;
    vertical-align: middle;
  }

  .form-inline .checkbox,
  .form-inline .radio {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .form-inline .checkbox label,
  .form-inline .radio label {
    padding-left: 0;
  }

  .form-inline .checkbox input[type="checkbox"],
  .form-inline .radio input[type="radio"] {
    position: relative;
    margin-left: 0;
  }
}

/* --- Colonnes hors .row : Bootstrap 3 les faisait flotter avec leurs 15px de
   gouttière, Bootstrap 5 ne les dispose que dans un .row (flex, où le float est
   sans effet). Les templates en ont des dizaines posées sans .row. --- */
[class^="col-"]:not([class*="col-form-label"]),
[class*=" col-"]:not([class*="col-form-label"]) {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  float: left;
}

@media (min-width: 768px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
}

@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    float: left;
  }
}

/* --- Flotteurs Bootstrap 3 : gardés pour le HTML stocké hors templates
   (billets du blog, coordonnées de support saisies par les entreprises) --- */
.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

/* --- Visibilité (grille Bootstrap 3 : xs < 768, sm 768-991, md 992-1199, lg ≥ 1200) --- */
.hidden {
  display: none !important;
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-xs-block { display: block !important; }
  .visible-xs-inline { display: inline !important; }
  .visible-xs-inline-block { display: inline-block !important; }
  .hidden-xs { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block { display: block !important; }
  .visible-sm-inline { display: inline !important; }
  .visible-sm-inline-block { display: inline-block !important; }
  .hidden-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block { display: block !important; }
  .visible-md-inline { display: inline !important; }
  .visible-md-inline-block { display: inline-block !important; }
  .hidden-md { display: none !important; }
}

@media (min-width: 1200px) {
  .visible-lg-block { display: block !important; }
  .visible-lg-inline { display: inline !important; }
  .visible-lg-inline-block { display: inline-block !important; }
  .hidden-lg { display: none !important; }
}

/* --- Lignes de tableau contextuelles --- */
.table > thead > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active {
  background-color: #f5f5f5;
}

.table > tbody > tr.success > td,
.table > tbody > tr.success > th,
.table > tbody > tr > td.success {
  background-color: #dff0d8;
}

.table > tbody > tr.info > td,
.table > tbody > tr.info > th,
.table > tbody > tr > td.info {
  background-color: #d9edf7;
}

.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th,
.table > tbody > tr > td.warning {
  background-color: #fcf8e3;
}

.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table > tbody > tr > td.danger {
  background-color: #f2dede;
}

/* --- Progress --- */
.progress-bar-success { background-color: #5cb85c; }
.progress-bar-info { background-color: #5bc0de; }
.progress-bar-warning { background-color: #f0ad4e; }
.progress-bar-danger { background-color: #d9534f; }

/* --- Navs : balisage Bootstrap 3 conservé (ul.nav > li.active > a).
   Seuls les onglets pilotés par le plugin Tab utilisent nav-item / nav-link,
   que le plugin exige ; les variables alignent les deux sur l'aspect 3. --- */
.nav {
  --bs-nav-link-padding-x: 15px;
  --bs-nav-link-padding-y: 10px;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-tabs-border-color: #ddd;
  --bs-nav-tabs-link-hover-border-color: #eee #eee #ddd;
  --bs-nav-tabs-link-active-color: #555;
  --bs-nav-tabs-link-active-bg: #fff;
  --bs-nav-tabs-link-active-border-color: #ddd #ddd #fff;
  --bs-nav-pills-border-radius: 4px;
  --bs-nav-pills-link-active-bg: #337ab7;
}

.nav > li {
  position: relative;
  display: block;
}

.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}

.nav > li.disabled > a {
  color: #777;
}

.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}

.nav-stacked {
  flex-direction: column;
}

.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}

.nav-tabs > li {
  margin-bottom: -1px;
}

.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:hover {
  border-color: #eee #eee #ddd;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

.nav-pills > li + li {
  margin-left: 2px;
}

.nav-pills > li > a {
  border-radius: 4px;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #337ab7;
}

/* --- Menus déroulants : éléments <li><a> sans .dropdown-item --- */
.dropdown-menu {
  --bs-dropdown-min-width: 160px;
  --bs-dropdown-padding-y: 5px;
  --bs-dropdown-font-size: 14px;
  --bs-dropdown-border-radius: 4px;
  --bs-dropdown-border-color: rgba(0, 0, 0, .15);
  --bs-dropdown-link-color: #333;
  --bs-dropdown-link-hover-color: #262626;
  --bs-dropdown-link-hover-bg: #f5f5f5;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #337ab7;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777;
}

.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777;
  white-space: nowrap;
}

/* --- Pagination (balisage Bootstrap 5 de Pagerfanta, couleurs 3) --- */
.pagination {
  --bs-pagination-padding-x: 12px;
  --bs-pagination-padding-y: 6px;
  --bs-pagination-font-size: 14px;
  --bs-pagination-color: #337ab7;
  --bs-pagination-border-color: #ddd;
  --bs-pagination-border-radius: 4px;
  --bs-pagination-hover-color: #23527c;
  --bs-pagination-hover-bg: #eee;
  --bs-pagination-hover-border-color: #ddd;
  --bs-pagination-focus-color: #23527c;
  --bs-pagination-focus-bg: #eee;
  --bs-pagination-active-bg: #337ab7;
  --bs-pagination-active-border-color: #337ab7;
  --bs-pagination-disabled-color: #777;
  --bs-pagination-disabled-border-color: #ddd;
  margin: 20px 0;
}

/* --- Alertes : espacement Bootstrap 3 --- */
.alert {
  --bs-alert-padding-x: 15px;
  --bs-alert-padding-y: 15px;
  --bs-alert-margin-bottom: 20px;
}

/* Bootstrap 3 : un bouton ne se replie pas sur deux lignes, et les liens-boutons
   ou les onglets ne se soulignent pas au survol (a:hover ci-dessus est plus spécifique
   que .btn / .nav-link) */
.btn {
  white-space: nowrap;
}

a.btn:hover,
a.btn:focus,
.nav-link:hover,
.nav-link:focus {
  text-decoration: none;
}

/* Titres secondaires : <small> dans un titre, comme en Bootstrap 3 */
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small {
  font-weight: 400;
  line-height: 1;
  color: #777;
}

h1 small, h2 small, h3 small {
  font-size: 65%;
}

h4 small, h5 small, h6 small {
  font-size: 75%;
}

/* Thème de formulaire bootstrap_5_layout : un choix déplié (radios, cases) est
   un <fieldset> dont la <legend class="col-form-label"> tient lieu de label */
legend.col-form-label {
  display: inline-block;
  float: none;
  width: auto;
  margin-bottom: 5px;
  font-size: inherit;
  font-weight: 700;
  color: inherit;
  border: 0;
}

/* Images de carousel : Bootstrap 3 les bornait à la largeur du cadre */
.carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bootstrap 3 (normalize) donnait le curseur main aux boutons ; 5 non */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   3. Mise en page : en-tête et menu latéral (classes navbar-* maison)
   ------------------------------------------------------------------------- */

/* Le <nav> d'en-tête n'est plus un .navbar Bootstrap (flex en 5, qui casserait
   les flottants) : .site-header reprend la boîte de .navbar 3 */
.site-header {
  position: relative;
  min-height: 50px;
  border: 1px solid transparent;
}

.site-header::before,
.site-header::after,
.navbar-header::before,
.navbar-header::after {
  content: " ";
  display: table;
}

.site-header::after,
.navbar-header::after {
  clear: both;
}

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }

  .navbar-right {
    float: right !important;
    margin-right: -15px;
  }
}

.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.navbar-toggle:focus {
  outline: 0;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
  background-color: #ddd;
}

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #888;
  border-radius: 1px;
}

.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}