/**
 * bootstrap-compat.css
 * Fichier de compatibilité pour migration Bootstrap 3 → Bootstrap 5
 * Mon-Bonus-Malus.fr
 * 
 * Ce fichier garantit que les anciennes classes Bootstrap 3 fonctionnent
 * avec Bootstrap 5 tout en préservant le design existant.
 */

/* =============================================
   GRILLE: col-xs-* → col-*
   En Bootstrap 5, col-xs-* n'existe plus, on utilise col-*
============================================= */
.col-xs-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3 { flex: 0 0 auto; width: 25%; }
.col-xs-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6 { flex: 0 0 auto; width: 50%; }
.col-xs-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9 { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

/* Offsets col-xs-offset-* et col-*-offset-* → offset-* */
.col-xs-offset-1, .col-md-offset-1, .col-lg-offset-1, .col-sm-offset-1 { margin-left: 8.33333333%; }
.col-xs-offset-2, .col-md-offset-2, .col-lg-offset-2, .col-sm-offset-2 { margin-left: 16.66666667%; }
.col-xs-offset-3, .col-md-offset-3, .col-lg-offset-3, .col-sm-offset-3 { margin-left: 25%; }
.col-xs-offset-4, .col-md-offset-4, .col-lg-offset-4, .col-sm-offset-4 { margin-left: 33.33333333%; }
.col-xs-offset-5, .col-md-offset-5, .col-lg-offset-5, .col-sm-offset-5 { margin-left: 41.66666667%; }
.col-xs-offset-6, .col-md-offset-6, .col-lg-offset-6, .col-sm-offset-6 { margin-left: 50%; }
.col-xs-offset-7, .col-md-offset-7, .col-lg-offset-7, .col-sm-offset-7 { margin-left: 58.33333333%; }
.col-xs-offset-8, .col-md-offset-8, .col-lg-offset-8, .col-sm-offset-8 { margin-left: 66.66666667%; }
.col-xs-offset-9, .col-md-offset-9, .col-lg-offset-9, .col-sm-offset-9 { margin-left: 75%; }
.col-xs-offset-10, .col-md-offset-10, .col-lg-offset-10, .col-sm-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-11, .col-md-offset-11, .col-lg-offset-11, .col-sm-offset-11 { margin-left: 91.66666667%; }

/* Push/Pull → order (Bootstrap 5 utilise flexbox order) */
.col-xs-push-1, .col-sm-push-1, .col-md-push-1, .col-lg-push-1 { order: 1; }
.col-xs-push-2, .col-sm-push-2, .col-md-push-2, .col-lg-push-2 { order: 2; }
.col-xs-push-3, .col-sm-push-3, .col-md-push-3, .col-lg-push-3 { order: 3; }
.col-xs-push-4, .col-sm-push-4, .col-md-push-4, .col-lg-push-4 { order: 4; }
.col-xs-push-5, .col-sm-push-5, .col-md-push-5, .col-lg-push-5 { order: 5; }
.col-xs-push-6, .col-sm-push-6, .col-md-push-6, .col-lg-push-6 { order: 6; }
.col-xs-push-7, .col-sm-push-7, .col-md-push-7, .col-lg-push-7 { order: 7; }
.col-xs-push-8, .col-sm-push-8, .col-md-push-8, .col-lg-push-8 { order: 8; }
.col-xs-push-9, .col-sm-push-9, .col-md-push-9, .col-lg-push-9 { order: 9; }
.col-xs-push-10, .col-sm-push-10, .col-md-push-10, .col-lg-push-10 { order: 10; }
.col-xs-push-11, .col-sm-push-11, .col-md-push-11, .col-lg-push-11 { order: 11; }
.col-xs-push-12, .col-sm-push-12, .col-md-push-12, .col-lg-push-12 { order: 12; }

.col-xs-pull-1, .col-sm-pull-1, .col-md-pull-1, .col-lg-pull-1 { order: -1; }
.col-xs-pull-2, .col-sm-pull-2, .col-md-pull-2, .col-lg-pull-2 { order: -2; }
.col-xs-pull-3, .col-sm-pull-3, .col-md-pull-3, .col-lg-pull-3 { order: -3; }
.col-xs-pull-4, .col-sm-pull-4, .col-md-pull-4, .col-lg-pull-4 { order: -4; }
.col-xs-pull-5, .col-sm-pull-5, .col-md-pull-5, .col-lg-pull-5 { order: -5; }
.col-xs-pull-6, .col-sm-pull-6, .col-md-pull-6, .col-lg-pull-6 { order: -6; }
.col-xs-pull-7, .col-sm-pull-7, .col-md-pull-7, .col-lg-pull-7 { order: -7; }
.col-xs-pull-8, .col-sm-pull-8, .col-md-pull-8, .col-lg-pull-8 { order: -8; }
.col-xs-pull-9, .col-sm-pull-9, .col-md-pull-9, .col-lg-pull-9 { order: -9; }
.col-xs-pull-10, .col-sm-pull-10, .col-md-pull-10, .col-lg-pull-10 { order: -10; }
.col-xs-pull-11, .col-sm-pull-11, .col-md-pull-11, .col-lg-pull-11 { order: -11; }
.col-xs-pull-12, .col-sm-pull-12, .col-md-pull-12, .col-lg-pull-12 { order: -12; }

/* =============================================
   CLASSES VISIBILITY (hidden-*, visible-*)
============================================= */
/* hidden-xs = d-none d-sm-block */
.hidden-xs {
  display: none !important;
}
@media (min-width: 576px) {
  .hidden-xs {
    display: block !important;
  }
}

/* hidden-sm */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hidden-sm {
    display: none !important;
  }
}

/* hidden-md */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hidden-md {
    display: none !important;
  }
}

/* hidden-lg */
@media (min-width: 992px) {
  .hidden-lg {
    display: none !important;
  }
}

/* visible-xs */
.visible-xs {
  display: none !important;
}
@media (max-width: 575.98px) {
  .visible-xs {
    display: block !important;
  }
}

/* visible-sm */
.visible-sm {
  display: none !important;
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .visible-sm {
    display: block !important;
  }
}

/* visible-md */
.visible-md {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .visible-md {
    display: block !important;
  }
}

/* visible-lg */
.visible-lg {
  display: none !important;
}
@media (min-width: 992px) {
  .visible-lg {
    display: block !important;
  }
}

/* =============================================
   PANEL → CARD (compatibilité)
============================================= */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.375rem;
  margin-bottom: 20px;
}

.panel-body {
  flex: 1 1 auto;
  padding: 1rem;
}

.panel-heading {
  padding: 0.75rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.panel-heading:first-child {
  border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;
}

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

.panel-footer {
  padding: 0.75rem 1rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.panel-footer:last-child {
  border-radius: 0 0 calc(0.375rem - 1px) calc(0.375rem - 1px);
}

.panel-default {
  border-color: #ddd;
}

.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.panel-primary {
  border-color: #0d6efd;
}

.panel-primary > .panel-heading {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* =============================================
   BTN-DEFAULT → BTN-SECONDARY (équivalent)
============================================= */
.btn-default {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-default:hover,
.btn-default:focus {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

/* =============================================
   GLYPHICONS (remplacement par des caractères unicode ou CSS)
============================================= */
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glyphicon-send::before { content: "✉"; }
.glyphicon-chevron-left::before { content: "‹"; }
.glyphicon-chevron-right::before { content: "›"; }
.glyphicon-chevron-up::before { content: "ˆ"; }
.glyphicon-chevron-down::before { content: "ˇ"; }
.glyphicon-ok::before { content: "✓"; }
.glyphicon-remove::before { content: "✕"; }
.glyphicon-search::before { content: "🔍"; }
.glyphicon-plus::before { content: "+"; }
.glyphicon-minus::before { content: "−"; }
.glyphicon-star::before { content: "★"; }
.glyphicon-star-empty::before { content: "☆"; }
.glyphicon-user::before { content: "👤"; }
.glyphicon-envelope::before { content: "✉"; }
.glyphicon-home::before { content: "🏠"; }
.glyphicon-time::before { content: "⏰"; }
.glyphicon-calendar::before { content: "📅"; }
.glyphicon-phone::before { content: "📞"; }
.glyphicon-cog::before { content: "⚙"; }
.glyphicon-lock::before { content: "🔒"; }
.glyphicon-info-sign::before { content: "ℹ"; }
.glyphicon-exclamation-sign::before { content: "⚠"; }
.glyphicon-question-sign::before { content: "❓"; }
.glyphicon-arrow-left::before { content: "←"; }
.glyphicon-arrow-right::before { content: "→"; }
.glyphicon-arrow-up::before { content: "↑"; }
.glyphicon-arrow-down::before { content: "↓"; }
.glyphicon-refresh::before { content: "↻"; }
.glyphicon-file::before { content: "📄"; }
.glyphicon-download::before { content: "⬇"; }
.glyphicon-upload::before { content: "⬆"; }
.glyphicon-print::before { content: "🖨"; }
.glyphicon-trash::before { content: "🗑"; }
.glyphicon-pencil::before { content: "✏"; }
.glyphicon-edit::before { content: "✏"; }

/* =============================================
   WELL (supprimé en Bootstrap 5, utilise .card ou bg-body-tertiary)
============================================= */
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
}

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

.well-lg {
  padding: 24px;
  border-radius: 0.5rem;
}

/* =============================================
   FORMULAIRES (compatibilité)
============================================= */
/* En Bootstrap 5, .form-control est toujours utilisé mais avec quelques différences */
.form-group {
  margin-bottom: 1rem;
}

/* Label inline */
.control-label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

/* Input group addon */
.input-group-addon {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

/* =============================================
   NAVIGATION / NAVBAR (compatibilité)
============================================= */
/* Bootstrap 5 utilise .navbar-expand-* au lieu de .navbar-collapse */
.navbar-toggle {
  display: none;
}

@media (max-width: 767.98px) {
  .navbar-toggle {
    display: block;
  }
}

/* =============================================
   UTILITAIRES DIVERS
============================================= */
/* Clearfix (toujours utile) */
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/* Center block */
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/* Pull left/right (devenus float-start/float-end en BS5) */
.pull-left {
  float: left !important;
}

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

/* Text helpers */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

/* Hide/Show */
.hide {
  display: none !important;
}

.show {
  display: block !important;
}

/* Image responsive */
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Thumbnail */
.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  max-width: 100%;
  height: auto;
}

/* Label (devenus .badge en BS5) */
.label {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem;
}

.label-default { background-color: #6c757d; }
.label-primary { background-color: #0d6efd; }
.label-success { background-color: #198754; }
.label-info { background-color: #0dcaf0; color: #000; }
.label-warning { background-color: #ffc107; color: #000; }
.label-danger { background-color: #dc3545; }

/* =============================================
   AJUSTEMENTS SPÉCIFIQUES AU SITE
============================================= */
/* Assurer que les rows en flexbox fonctionnent correctement */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* Colonnes avec padding cohérent */
.row > [class*="col-"] {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
}

/* Media queries pour les colonnes SM, MD, LG */
@media (min-width: 576px) {
  .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}