/* Système de grille personnalisé 12 colonnes (Flexbox) */

:root {
    /* Centralisation des points de rupture */
    --bp-xs: 450px;
    --bp-md: 1150px;
    --bp-lg: 2300px;
}

.grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

/* Colonne à remplissage automatique */
.col-auto {
    flex: 1 1 0;
    min-width: 0;
}

/* Base des colonnes */
[class*="col-"]:not(.col-auto) {
    flex: 0 0 auto;
}

/* Helper pour calculer la largeur avec gap : calc((100% * N / 12) - (Gap * (1 - N / 12))) */
.col-1  { width: calc((8.3333%)  - (20px * 0.9166)); }
.col-2  { width: calc((16.6666%) - (20px * 0.8333)); }
.col-3  { width: calc((25%)      - (20px * 0.75)); }
.col-4  { width: calc((33.3333%) - (20px * 0.6666)); }
.col-5  { width: calc((41.6666%) - (20px * 0.5833)); }
.col-6  { width: calc((50%)      - (20px * 0.5)); }
.col-7  { width: calc((58.3333%) - (20px * 0.4166)); }
.col-8  { width: calc((66.6666%) - (20px * 0.3333)); }
.col-9  { width: calc((75%)      - (20px * 0.25)); }
.col-10 { width: calc((83.3333%) - (20px * 0.1666)); }
.col-11 { width: calc((91.6666%) - (20px * 0.0833)); }
.col-12 { width: 100%; }

/* Breakpoint XL : >= 2300px */
@media (min-width: 2300px) {
    .col-xl-auto { flex: 1 1 0; min-width: 0; }
    .col-xl-1  { width: calc((8.3333%)  - (20px * 0.9166)); }
    .col-xl-2  { width: calc((16.6666%) - (20px * 0.8333)); }
    .col-xl-3  { width: calc((25%)      - (20px * 0.75)); }
    .col-xl-4  { width: calc((33.3333%) - (20px * 0.6666)); }
    .col-xl-5  { width: calc((41.6666%) - (20px * 0.5833)); }
    .col-xl-6  { width: calc((50%)      - (20px * 0.5)); }
    .col-xl-7  { width: calc((58.3333%) - (20px * 0.4166)); }
    .col-xl-8  { width: calc((66.6666%) - (20px * 0.3333)); }
    .col-xl-9  { width: calc((75%)      - (20px * 0.25)); }
    .col-xl-10 { width: calc((83.3333%) - (20px * 0.1666)); }
    .col-xl-11 { width: calc((91.6666%) - (20px * 0.0833)); }
    .col-xl-12 { width: 100%; }
}

/* Breakpoint LG : < 2300px */
@media (max-width: 2299.98px) {
    .col-lg-auto { flex: 1 1 0; min-width: 0; }
    .col-lg-1  { width: calc((8.3333%)  - (20px * 0.9166)); }
    .col-lg-2  { width: calc((16.6666%) - (20px * 0.8333)); }
    .col-lg-3  { width: calc((25%)      - (20px * 0.75)); }
    .col-lg-4  { width: calc((33.3333%) - (20px * 0.6666)); }
    .col-lg-5  { width: calc((41.6666%) - (20px * 0.5833)); }
    .col-lg-6  { width: calc((50%)      - (20px * 0.5)); }
    .col-lg-7  { width: calc((58.3333%) - (20px * 0.4166)); }
    .col-lg-8  { width: calc((66.6666%) - (20px * 0.3333)); }
    .col-lg-9  { width: calc((75%)      - (20px * 0.25)); }
    .col-lg-10 { width: calc((83.3333%) - (20px * 0.1666)); }
    .col-lg-11 { width: calc((91.6666%) - (20px * 0.0833)); }
    .col-lg-12 { width: 100%; }
}

/* Breakpoint MD : < 1150px */
@media (max-width: 1149.98px) {
    .col-md-auto { flex: 1 1 0; min-width: 0; }
    .col-md-1  { width: calc((8.3333%)  - (20px * 0.9166)); }
    .col-md-2  { width: calc((16.6666%) - (20px * 0.8333)); }
    .col-md-3  { width: calc((25%)      - (20px * 0.75)); }
    .col-md-4  { width: calc((33.3333%) - (20px * 0.6666)); }
    .col-md-5  { width: calc((41.6666%) - (20px * 0.5833)); }
    .col-md-6  { width: calc((50%)      - (20px * 0.5)); }
    .col-md-7  { width: calc((58.3333%) - (20px * 0.4166)); }
    .col-md-8  { width: calc((66.6666%) - (20px * 0.3333)); }
    .col-md-9  { width: calc((75%)      - (20px * 0.25)); }
    .col-md-10 { width: calc((83.3333%) - (20px * 0.1666)); }
    .col-md-11 { width: calc((91.6666%) - (20px * 0.0833)); }
    .col-md-12 { width: 100%; }
}

/* Breakpoint XS : < 450px */
@media (max-width: 449.98px) {
    .col-xs-auto { flex: 1 1 0; min-width: 0; }
    .col-xs-1  { width: calc((8.3333%)  - (20px * 0.9166)); }
    .col-xs-2  { width: calc((16.6666%) - (20px * 0.8333)); }
    .col-xs-3  { width: calc((25%)      - (20px * 0.75)); }
    .col-xs-4  { width: calc((33.3333%) - (20px * 0.6666)); }
    .col-xs-5  { width: calc((41.6666%) - (20px * 0.5833)); }
    .col-xs-6  { width: calc((50%)      - (20px * 0.5)); }
    .col-xs-7  { width: calc((58.3333%) - (20px * 0.4166)); }
    .col-xs-8  { width: calc((66.6666%) - (20px * 0.3333)); }
    .col-xs-9  { width: calc((75%)      - (20px * 0.25)); }
    .col-xs-10 { width: calc((83.3333%) - (20px * 0.1666)); }
    .col-xs-11 { width: calc((91.6666%) - (20px * 0.0833)); }
    .col-xs-12 { width: 100%; }
}