/* ==========================================================================
   LAYOUT SYSTEM - STRUCTURE
   Fichier : /css/03-layout.css
   Usage : Grilles, conteneurs, disposition
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTAINER PRINCIPAL
   -------------------------------------------------------------------------- */
.main-container {
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-md);
}

@media (min-width: 768px) {
    .main-container {
        max-width: 1200px;
        padding: var(--spacing-xl);
    }
}

@media (max-width: 767px) {
    .main-container {
        padding: var(--spacing-sm);
    }
}

/* ==========================================================================
   SYSTÈME DE GRILLE
   ========================================================================== */

/* Grille responsive */
.grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
}

.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 576px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Grille des modules (cartes) */
.module-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-top: 1.5rem !important;
}

@media (min-width: 768px) {
    .module-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.75rem !important;
    }
}

@media (min-width: 992px) {
    .module-grid {
        max-width: 1400px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 1200px) {
    .module-grid {
        gap: 2rem !important;
    }
}

/* Grille Bootstrap compatible */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--spacing-sm) * -0.5);
    margin-left: calc(var(--spacing-sm) * -0.5);
}

[class*="col-"] {
    padding-right: calc(var(--spacing-sm) * 0.5);
    padding-left: calc(var(--spacing-sm) * 0.5);
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ==========================================================================
   FLEXBOX UTILITIES
   ========================================================================== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }

.gap-0 { gap: 0; }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* ==========================================================================
   ESPACEMENTS
   ========================================================================== */

/* Margins */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }

.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }

/* Paddings */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }

.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }

/* ==========================================================================
   DISPLAY RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

.show-mobile {
    display: none;
}

@media (max-width: 767px) {
    .show-mobile {
        display: block;
    }
}

/* ==========================================================================
   UTILITAIRES DE TEXTE
   ========================================================================== */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-break {
    word-break: break-word;
    overflow-wrap: break-word;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.float-end {
    float: right;
}

.float-start {
    float: left;
}

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