// ===========================
// CLASSES UTILITAIRES RESPONSIVE
// ===========================

@import "/./src/assets/scss/breakpoints.scss";

// ===========================
// SYSTÈME DE GRILLE RESPONSIVE
// ===========================

.container {
    width: 100%;
    padding-right: $spacing-md;
    padding-left: $spacing-md;
    margin-right: auto;
    margin-left: auto;
    
    @include respond-below('md') {
        padding-right: $spacing-sm;
        padding-left: $spacing-sm;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -($grid-gutter-width / 2);
    margin-left: -($grid-gutter-width / 2);
    
    @include respond-below('md') {
        margin-right: -($grid-gutter-width / 4);
        margin-left: -($grid-gutter-width / 4);
    }
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-right: ($grid-gutter-width / 2);
    padding-left: ($grid-gutter-width / 2);
    
    @include respond-below('md') {
        padding-right: ($grid-gutter-width / 4);
        padding-left: ($grid-gutter-width / 4);
    }
}

// Colonnes responsive
@for $i from 1 through $grid-columns {
    .col-#{$i} {
        flex: 0 0 percentage($i / $grid-columns);
        max-width: percentage($i / $grid-columns);
    }
    
    .col-sm-#{$i} {
        @include respond-to('sm') {
            flex: 0 0 percentage($i / $grid-columns);
            max-width: percentage($i / $grid-columns);
        }
    }
    
    .col-md-#{$i} {
        @include respond-to('md') {
            flex: 0 0 percentage($i / $grid-columns);
            max-width: percentage($i / $grid-columns);
        }
    }
    
    .col-lg-#{$i} {
        @include respond-to('lg') {
            flex: 0 0 percentage($i / $grid-columns);
            max-width: percentage($i / $grid-columns);
        }
    }
}

// ===========================
// ESPACEMENT RESPONSIVE
// ===========================

// Margins
.m-0 { margin: 0 !important; }
.m-1 { margin: $spacing-xs !important; }
.m-2 { margin: $spacing-sm !important; }
.m-3 { margin: $spacing-md !important; }
.m-4 { margin: $spacing-lg !important; }
.m-5 { margin: $spacing-xl !important; }

// Margins responsive
@include respond-below('md') {
    .m-md-0 { margin: 0 !important; }
    .m-md-1 { margin: $spacing-xs !important; }
    .m-md-2 { margin: $spacing-sm !important; }
    .m-md-3 { margin: $spacing-md !important; }
}

@include respond-below('sm') {
    .m-sm-0 { margin: 0 !important; }
    .m-sm-1 { margin: $spacing-xs !important; }
    .m-sm-2 { margin: $spacing-sm !important; }
}

// Paddings
.p-0 { padding: 0 !important; }
.p-1 { padding: $spacing-xs !important; }
.p-2 { padding: $spacing-sm !important; }
.p-3 { padding: $spacing-md !important; }
.p-4 { padding: $spacing-lg !important; }
.p-5 { padding: $spacing-xl !important; }

// Paddings responsive
@include respond-below('md') {
    .p-md-0 { padding: 0 !important; }
    .p-md-1 { padding: $spacing-xs !important; }
    .p-md-2 { padding: $spacing-sm !important; }
    .p-md-3 { padding: $spacing-md !important; }
}

@include respond-below('sm') {
    .p-sm-0 { padding: 0 !important; }
    .p-sm-1 { padding: $spacing-xs !important; }
    .p-sm-2 { padding: $spacing-sm !important; }
}

// ===========================
// AFFICHAGE RESPONSIVE
// ===========================

// Flex utilities
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

// Flex responsive
@include respond-below('md') {
    .d-md-flex { display: flex !important; }
    .d-md-block { display: block !important; }
    .d-md-none { display: none !important; }
}

@include respond-below('sm') {
    .d-sm-flex { display: flex !important; }
    .d-sm-block { display: block !important; }
    .d-sm-none { display: none !important; }
}

// Flex direction
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

@include respond-below('md') {
    .flex-md-row { flex-direction: row !important; }
    .flex-md-column { flex-direction: column !important; }
}

@include respond-below('sm') {
    .flex-sm-row { flex-direction: row !important; }
    .flex-sm-column { flex-direction: column !important; }
}

// Justify content
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

// Align items
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

// ===========================
// TEXTE RESPONSIVE
// ===========================

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

@include respond-below('md') {
    .text-md-center { text-align: center !important; }
    .text-md-left { text-align: left !important; }
    .text-md-right { text-align: right !important; }
}

@include respond-below('sm') {
    .text-sm-center { text-align: center !important; }
    .text-sm-left { text-align: left !important; }
    .text-sm-right { text-align: right !important; }
}

// ===========================
// LARGEURS RESPONSIVE
// ===========================

.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

@include respond-below('md') {
    .w-md-25 { width: 25% !important; }
    .w-md-50 { width: 50% !important; }
    .w-md-75 { width: 75% !important; }
    .w-md-100 { width: 100% !important; }
    .w-md-auto { width: auto !important; }
}

@include respond-below('sm') {
    .w-sm-100 { width: 100% !important; }
    .w-sm-auto { width: auto !important; }
}

// ===========================
// HAUTEURS RESPONSIVE
// ===========================

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

// ===========================
// OVERFLOW RESPONSIVE
// ===========================

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

@include respond-below('md') {
    .overflow-md-auto { overflow: auto !important; }
    .overflow-md-hidden { overflow: hidden !important; }
    .overflow-x-md-auto { overflow-x: auto !important; }
    .overflow-y-md-auto { overflow-y: auto !important; }
} 