/**
 * Bootstrap 4 to 5 Compatibility Layer
 * =====================================
 * Ce fichier permet d'utiliser Bootstrap 5.3.3 tout en gardant
 * la compatibilité avec les classes Bootstrap 4.
 * 
 * Charger ce fichier APRÈS bootstrap.min.css
 * 
 * Créé le 10/02/2026 pour RDConnect
 */

/* ===========================================
   MARGIN LEFT/RIGHT → START/END
   =========================================== */

/* ml-* → ms-* (margin-left → margin-start) */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

/* mr-* → me-* (margin-right → margin-end) */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }

/* ===========================================
   PADDING LEFT/RIGHT → START/END
   =========================================== */

/* pl-* → ps-* (padding-left → padding-start) */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

/* pr-* → pe-* (padding-right → padding-end) */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* ===========================================
   FLOAT LEFT/RIGHT → START/END
   =========================================== */

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

/* Responsive variants */
@media (min-width: 576px) {
    .float-sm-left { float: left !important; }
    .float-sm-right { float: right !important; }
}
@media (min-width: 768px) {
    .float-md-left { float: left !important; }
    .float-md-right { float: right !important; }
}
@media (min-width: 992px) {
    .float-lg-left { float: left !important; }
    .float-lg-right { float: right !important; }
}
@media (min-width: 1200px) {
    .float-xl-left { float: left !important; }
    .float-xl-right { float: right !important; }
}

/* ===========================================
   TEXT ALIGN LEFT/RIGHT → START/END
   =========================================== */

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Responsive variants */
@media (min-width: 576px) {
    .text-sm-left { text-align: left !important; }
    .text-sm-right { text-align: right !important; }
}
@media (min-width: 768px) {
    .text-md-left { text-align: left !important; }
    .text-md-right { text-align: right !important; }
}
@media (min-width: 992px) {
    .text-lg-left { text-align: left !important; }
    .text-lg-right { text-align: right !important; }
}
@media (min-width: 1200px) {
    .text-xl-left { text-align: left !important; }
    .text-xl-right { text-align: right !important; }
}

/* ===========================================
   BORDER LEFT/RIGHT → START/END
   =========================================== */

.border-left { border-left: 1px solid #dee2e6 !important; }
.border-right { border-right: 1px solid #dee2e6 !important; }
.border-left-0 { border-left: 0 !important; }
.border-right-0 { border-right: 0 !important; }

/* ===========================================
   ROUNDED LEFT/RIGHT → START/END
   =========================================== */

.rounded-left { 
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}
.rounded-right { 
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

/* ===========================================
   FONT WEIGHT CLASSES (BS4 compat)
   =========================================== */

.font-weight-light { font-weight: 300 !important; }
.font-weight-lighter { font-weight: lighter !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-bolder { font-weight: bolder !important; }

/* BS5 uses fw-* instead */
.font-italic { font-style: italic !important; }

/* ===========================================
   FORM CLASSES (BS4 compat)
   =========================================== */

/* BS4 form-group is deprecated in BS5 */
.form-group {
    margin-bottom: 1rem;
}

/* BS4 form-row is now row g-3 in BS5 */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

/* BS4 custom-control classes */
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #0d6efd;
}

/* ===========================================
   BADGE CLASSES (BS4 compat)
   =========================================== */

/* BS4 badge-* → BS5 bg-* + text-* */
.badge-primary { background-color: #0d6efd !important; color: #fff !important; }
.badge-secondary { background-color: #6c757d !important; color: #fff !important; }
.badge-success { background-color: #198754 !important; color: #fff !important; }
.badge-danger { background-color: #dc3545 !important; color: #fff !important; }
.badge-warning { background-color: #ffc107 !important; color: #212529 !important; }
.badge-info { background-color: #0dcaf0 !important; color: #212529 !important; }
.badge-light { background-color: #f8f9fa !important; color: #212529 !important; }
.badge-dark { background-color: #212529 !important; color: #fff !important; }

/* BS4 badge-pill → BS5 rounded-pill */
.badge-pill {
    padding-right: 0.6em;
    padding-left: 0.6em;
    border-radius: 50rem;
}

/* ===========================================
   BUTTON CLASSES (BS4 compat)
   =========================================== */

/* btn-block is deprecated in BS5 */
.btn-block {
    display: block;
    width: 100%;
}

/* ===========================================
   CLOSE BUTTON (BS4 compat)
   =========================================== */

/* BS4 close button style */
button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
}
button.close:hover {
    opacity: 0.75;
}

/* ===========================================
   MEDIA OBJECT (BS4 compat)
   BS5 deprecated media object, use flex
   =========================================== */

.media {
    display: flex;
    align-items: flex-start;
}
.media-body {
    flex: 1;
}

/* ===========================================
   JUMBOTRON (BS4 compat)
   BS5 deprecated jumbotron
   =========================================== */

.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: 0.3rem;
}
@media (min-width: 576px) {
    .jumbotron {
        padding: 4rem 2rem;
    }
}
.jumbotron-fluid {
    padding-right: 0;
    padding-left: 0;
    border-radius: 0;
}

/* ===========================================
   CARD DECK/COLUMNS (BS4 compat)
   BS5 deprecated, use grid instead
   =========================================== */

.card-deck {
    display: flex;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.card-deck .card {
    flex: 1 0 0%;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 0;
}

/* ===========================================
   RESPONSIVE EMBED (BS4 compat)
   BS5 uses ratio instead
   =========================================== */

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.embed-responsive::before {
    display: block;
    content: "";
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.embed-responsive-16by9::before {
    padding-top: 56.25%;
}
.embed-responsive-4by3::before {
    padding-top: 75%;
}
.embed-responsive-1by1::before {
    padding-top: 100%;
}

/* ===========================================
   SCREEN READER (BS4 compat)
   =========================================== */

/* BS4 sr-only → BS5 visually-hidden */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ===========================================
   MISC BS4 COMPAT
   =========================================== */

/* no-gutters → g-0 */
.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

/* thead-light / thead-dark */
.thead-light th {
    color: #495057;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.thead-dark th {
    color: #fff;
    background-color: #343a40;
    border-color: #454d55;
}