/* Framework CSS léger similaire à Bootstrap */

/* Conteneur principal */
.bs-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Extra small devices (xs - par défaut, moins de 576px) */
.bs-container {
    max-width: 100%;
}

@media (min-width: 576px) {
    .bs-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .bs-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .bs-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .bs-container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .bs-container {
        max-width: 1320px;
    }
}

/* Ligne */
.bs-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.bs-row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Colonnes */
.bs-col {
    flex: 1 0 0%;
}

/* Colonnes pour Extra small (xs - par défaut) */
.bs-col-1 { flex: 0 0 auto; width: 8.33333333%; }
.bs-col-2 { flex: 0 0 auto; width: 16.66666667%; }
.bs-col-3 { flex: 0 0 auto; width: 25%; }
.bs-col-4 { flex: 0 0 auto; width: 33.33333333%; }
.bs-col-5 { flex: 0 0 auto; width: 41.66666667%; }
.bs-col-6 { flex: 0 0 auto; width: 50%; }
.bs-col-7 { flex: 0 0 auto; width: 58.33333333%; }
.bs-col-8 { flex: 0 0 auto; width: 66.66666667%; }
.bs-col-9 { flex: 0 0 auto; width: 75%; }
.bs-col-10 { flex: 0 0 auto; width: 83.33333333%; }
.bs-col-11 { flex: 0 0 auto; width: 91.66666667%; }
.bs-col-12 { flex: 0 0 auto; width: 100%; }

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

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

    .bs-offset-sm-0 { margin-left: 0; }
    .bs-offset-sm-1 { margin-left: 8.33333333%; }
    .bs-offset-sm-2 { margin-left: 16.66666667%; }
    .bs-offset-sm-3 { margin-left: 25%; }
    .bs-offset-sm-4 { margin-left: 33.33333333%; }
    .bs-offset-sm-5 { margin-left: 41.66666667%; }
    .bs-offset-sm-6 { margin-left: 50%; }
    .bs-offset-sm-7 { margin-left: 58.33333333%; }
    .bs-offset-sm-8 { margin-left: 66.66666667%; }
    .bs-offset-sm-9 { margin-left: 75%; }
    .bs-offset-sm-10 { margin-left: 83.33333333%; }
    .bs-offset-sm-11 { margin-left: 91.66666667%; }
}

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

    .bs-offset-md-0 { margin-left: 0; }
    .bs-offset-md-1 { margin-left: 8.33333333%; }
    .bs-offset-md-2 { margin-left: 16.66666667%; }
    .bs-offset-md-3 { margin-left: 25%; }
    .bs-offset-md-4 { margin-left: 33.33333333%; }
    .bs-offset-md-5 { margin-left: 41.66666667%; }
    .bs-offset-md-6 { margin-left: 50%; }
    .bs-offset-md-7 { margin-left: 58.33333333%; }
    .bs-offset-md-8 { margin-left: 66.66666667%; }
    .bs-offset-md-9 { margin-left: 75%; }
    .bs-offset-md-10 { margin-left: 83.33333333%; }
    .bs-offset-md-11 { margin-left: 91.66666667%; }
}

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

    .bs-offset-lg-0 { margin-left: 0; }
    .bs-offset-lg-1 { margin-left: 8.33333333%; }
    .bs-offset-lg-2 { margin-left: 16.66666667%; }
    .bs-offset-lg-3 { margin-left: 25%; }
    .bs-offset-lg-4 { margin-left: 33.33333333%; }
    .bs-offset-lg-5 { margin-left: 41.66666667%; }
    .bs-offset-lg-6 { margin-left: 50%; }
    .bs-offset-lg-7 { margin-left: 58.33333333%; }
    .bs-offset-lg-8 { margin-left: 66.66666667%; }
    .bs-offset-lg-9 { margin-left: 75%; }
    .bs-offset-lg-10 { margin-left: 83.33333333%; }
    .bs-offset-lg-11 { margin-left: 91.66666667%; }
}

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

    .bs-offset-xl-0 { margin-left: 0; }
    .bs-offset-xl-1 { margin-left: 8.33333333%; }
    .bs-offset-xl-2 { margin-left: 16.66666667%; }
    .bs-offset-xl-3 { margin-left: 25%; }
    .bs-offset-xl-4 { margin-left: 33.33333333%; }
    .bs-offset-xl-5 { margin-left: 41.66666667%; }
    .bs-offset-xl-6 { margin-left: 50%; }
    .bs-offset-xl-7 { margin-left: 58.33333333%; }
    .bs-offset-xl-8 { margin-left: 66.66666667%; }
    .bs-offset-xl-9 { margin-left: 75%; }
    .bs-offset-xl-10 { margin-left: 83.33333333%; }
    .bs-offset-xl-11 { margin-left: 91.66666667%; }
}

/* Classes utilitaires pour l'alignement */
.bs-justify-content-start {
    justify-content: flex-start;
}

.bs-justify-content-end {
    justify-content: flex-end;
}

.bs-justify-content-center {
    justify-content: center;
}

.bs-justify-content-between {
    justify-content: space-between;
}

.bs-justify-content-around {
    justify-content: space-around;
}

.bs-justify-content-evenly {
    justify-content: space-evenly;
}

.bs-align-items-start {
    align-items: flex-start;
}

.bs-align-items-end {
    align-items: flex-end;
}

.bs-align-items-center {
    align-items: center;
}

.bs-align-items-stretch {
    align-items: stretch;
}

.bs-align-items-baseline {
    align-items: baseline;
}

/* Classes utilitaires pour le display */
.bs-d-none {
    display: none !important;
}

.bs-d-block {
    display: block !important;
}

.bs-d-inline {
    display: inline !important;
}

.bs-d-inline-block {
    display: inline-block !important;
}

.bs-d-flex {
    display: flex !important;
}

.bs-d-inline-flex {
    display: inline-flex !important;
}

/* Responsive display - xs (par défaut) */
.bs-d-none { display: none !important; }
.bs-d-block { display: block !important; }
.bs-d-inline { display: inline !important; }
.bs-d-inline-block { display: inline-block !important; }
.bs-d-flex { display: flex !important; }
.bs-d-inline-flex { display: inline-flex !important; }

/* Responsive display - sm */
@media (min-width: 576px) {
    .bs-d-sm-none { display: none !important; }
    .bs-d-sm-block { display: block !important; }
    .bs-d-sm-inline { display: inline !important; }
    .bs-d-sm-inline-block { display: inline-block !important; }
    .bs-d-sm-flex { display: flex !important; }
    .bs-d-sm-inline-flex { display: inline-flex !important; }
}

/* Responsive display - md */
@media (min-width: 768px) {
    .bs-d-md-none { display: none !important; }
    .bs-d-md-block { display: block !important; }
    .bs-d-md-inline { display: inline !important; }
    .bs-d-md-inline-block { display: inline-block !important; }
    .bs-d-md-flex { display: flex !important; }
    .bs-d-md-inline-flex { display: inline-flex !important; }
}

/* Responsive display - lg */
@media (min-width: 992px) {
    .bs-d-lg-none { display: none !important; }
    .bs-d-lg-block { display: block !important; }
    .bs-d-lg-inline { display: inline !important; }
    .bs-d-lg-inline-block { display: inline-block !important; }
    .bs-d-lg-flex { display: flex !important; }
    .bs-d-lg-inline-flex { display: inline-flex !important; }
}

/* Responsive display - xl */
@media (min-width: 1200px) {
    .bs-d-xl-none { display: none !important; }
    .bs-d-xl-block { display: block !important; }
    .bs-d-xl-inline { display: inline !important; }
    .bs-d-xl-inline-block { display: inline-block !important; }
    .bs-d-xl-flex { display: flex !important; }
    .bs-d-xl-inline-flex { display: inline-flex !important; }
}

/* Classes utilitaires pour le padding et margin */
.bs-p-0 { padding: 0 !important; }
.bs-p-1 { padding: 0.25rem !important; }
.bs-p-2 { padding: 0.5rem !important; }
.bs-p-3 { padding: 1rem !important; }
.bs-p-4 { padding: 1.5rem !important; }
.bs-p-5 { padding: 3rem !important; }

.bs-pt-0 { padding-top: 0 !important; }
.bs-pt-1 { padding-top: 0.25rem !important; }
.bs-pt-2 { padding-top: 0.5rem !important; }
.bs-pt-3 { padding-top: 1rem !important; }
.bs-pt-4 { padding-top: 1.5rem !important; }
.bs-pt-5 { padding-top: 3rem !important; }

.bs-pr-0 { padding-right: 0 !important; }
.bs-pr-1 { padding-right: 0.25rem !important; }
.bs-pr-2 { padding-right: 0.5rem !important; }
.bs-pr-3 { padding-right: 1rem !important; }
.bs-pr-4 { padding-right: 1.5rem !important; }
.bs-pr-5 { padding-right: 3rem !important; }

.bs-pb-0 { padding-bottom: 0 !important; }
.bs-pb-1 { padding-bottom: 0.25rem !important; }
.bs-pb-2 { padding-bottom: 0.5rem !important; }
.bs-pb-3 { padding-bottom: 1rem !important; }
.bs-pb-4 { padding-bottom: 1.5rem !important; }
.bs-pb-5 { padding-bottom: 3rem !important; }

.bs-pl-0 { padding-left: 0 !important; }
.bs-pl-1 { padding-left: 0.25rem !important; }
.bs-pl-2 { padding-left: 0.5rem !important; }
.bs-pl-3 { padding-left: 1rem !important; }
.bs-pl-4 { padding-left: 1.5rem !important; }
.bs-pl-5 { padding-left: 3rem !important; }

.bs-m-0 { margin: 0 !important; }
.bs-m-1 { margin: 0.25rem !important; }
.bs-m-2 { margin: 0.5rem !important; }
.bs-m-3 { margin: 1rem !important; }
.bs-m-4 { margin: 1.5rem !important; }
.bs-m-5 { margin: 3rem !important; }

.bs-mt-0 { margin-top: 0 !important; }
.bs-mt-1 { margin-top: 0.25rem !important; }
.bs-mt-2 { margin-top: 0.5rem !important; }
.bs-mt-3 { margin-top: 1rem !important; }
.bs-mt-4 { margin-top: 1.5rem !important; }
.bs-mt-5 { margin-top: 3rem !important; }

.bs-mr-0 { margin-right: 0 !important; }
.bs-mr-1 { margin-right: 0.25rem !important; }
.bs-mr-2 { margin-right: 0.5rem !important; }
.bs-mr-3 { margin-right: 1rem !important; }
.bs-mr-4 { margin-right: 1.5rem !important; }
.bs-mr-5 { margin-right: 3rem !important; }

.bs-mb-0 { margin-bottom: 0 !important; }
.bs-mb-1 { margin-bottom: 0.25rem !important; }
.bs-mb-2 { margin-bottom: 0.5rem !important; }
.bs-mb-3 { margin-bottom: 1rem !important; }
.bs-mb-4 { margin-bottom: 1.5rem !important; }
.bs-mb-5 { margin-bottom: 3rem !important; }

.bs-ml-0 { margin-left: 0 !important; }
.bs-ml-1 { margin-left: 0.25rem !important; }
.bs-ml-2 { margin-left: 0.5rem !important; }
.bs-ml-3 { margin-left: 1rem !important; }
.bs-ml-4 { margin-left: 1.5rem !important; }
.bs-ml-5 { margin-left: 3rem !important; }

.bs-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.bs-mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.bs-mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.bs-mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.bs-mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.bs-mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }

.bs-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.bs-my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.bs-my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.bs-my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.bs-my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.bs-my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* Classes utilitaires pour le text */
.bs-text-left { text-align: left !important; }
.bs-text-center { text-align: center !important; }
.bs-text-right { text-align: right !important; }
.bs-text-justify { text-align: justify !important; }

.bs-text-uppercase { text-transform: uppercase !important; }
.bs-text-lowercase { text-transform: lowercase !important; }
.bs-text-capitalize { text-transform: capitalize !important; }

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

/* Responsive text alignment */
@media (min-width: 576px) {
    .bs-text-sm-left { text-align: left !important; }
    .bs-text-sm-center { text-align: center !important; }
    .bs-text-sm-right { text-align: right !important; }
    .bs-text-sm-justify { text-align: justify !important; }
}

@media (min-width: 768px) {
    .bs-text-md-left { text-align: left !important; }
    .bs-text-md-center { text-align: center !important; }
    .bs-text-md-right { text-align: right !important; }
    .bs-text-md-justify { text-align: justify !important; }
}

@media (min-width: 992px) {
    .bs-text-lg-left { text-align: left !important; }
    .bs-text-lg-center { text-align: center !important; }
    .bs-text-lg-right { text-align: right !important; }
    .bs-text-lg-justify { text-align: justify !important; }
}

@media (min-width: 1200px) {
    .bs-text-xl-left { text-align: left !important; }
    .bs-text-xl-center { text-align: center !important; }
    .bs-text-xl-right { text-align: right !important; }
    .bs-text-xl-justify { text-align: justify !important; }
}

/* Classes utilitaires pour les couleurs */
.bs-bg-primary { background-color: #007bff !important; }
.bs-bg-secondary { background-color: #6c757d !important; }
.bs-bg-success { background-color: #28a745 !important; }
.bs-bg-danger { background-color: #dc3545 !important; }
.bs-bg-warning { background-color: #ffc107 !important; }
.bs-bg-info { background-color: #17a2b8 !important; }
.bs-bg-light { background-color: #f8f9fa !important; }
.bs-bg-dark { background-color: #343a40 !important; }
.bs-bg-white { background-color: #ffffff !important; }
.bs-bg-transparent { background-color: transparent !important; }

.bs-text-primary { color: #007bff !important; }
.bs-text-secondary { color: #6c757d !important; }
.bs-text-success { color: #28a745 !important; }
.bs-text-danger { color: #dc3545 !important; }
.bs-text-warning { color: #ffc107 !important; }
.bs-text-info { color: #17a2b8 !important; }
.bs-text-light { color: #f8f9fa !important; }
.bs-text-dark { color: #343a40 !important; }
.bs-text-white { color: #ffffff !important; }
.bs-text-muted { color: #6c757d !important; }

/* Classes utilitaires pour les bordures */
.bs-border { border: 1px solid #dee2e6 !important; }
.bs-border-top { border-top: 1px solid #dee2e6 !important; }
.bs-border-right { border-right: 1px solid #dee2e6 !important; }
.bs-border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.bs-border-left { border-left: 1px solid #dee2e6 !important; }
.bs-border-0 { border: 0 !important; }

/* Ordre des colonnes */
.bs-order-first { order: -1 !important; }
.bs-order-last { order: 6 !important; }
.bs-order-0 { order: 0 !important; }
.bs-order-1 { order: 1 !important; }
.bs-order-2 { order: 2 !important; }
.bs-order-3 { order: 3 !important; }
.bs-order-4 { order: 4 !important; }
.bs-order-5 { order: 5 !important; }