/* ═══════════════════════════════════════════════════════
   CS Grid — Front CSS
   Grille responsive CSS native, zéro framework
   Système 12 colonnes — mobile first
   ═══════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────── */
:root {
    --cs-gap:            1.5rem;
    --cs-container-max:  1200px;
    --cs-container-pad:  1.5rem;
    --cs-container-wide: 1440px;
    --cs-container-narrow: 960px;
}

/* ── Base bloc responsive ───────────────────────────────── */
.cs-container,
.cs-container-fluid,
.cs-container-wide,
.cs-container-narrow,
.cs-row,
.cs-row-fluid,
[class*="cs-col-"] {
    min-height: var(--cs-min-height, auto);
}

/* ── Containers ─────────────────────────────────────────── */
.cs-container {
    width:        100%;
    max-width:    var(--cs-container-max);
    margin-left:  auto;
    margin-right: auto;
    padding-left: var(--cs-container-pad);
    padding-right: var(--cs-container-pad);
}

.cs-container-wide {
    width: 100%;
    max-width: var(--cs-container-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cs-container-pad);
    padding-right: var(--cs-container-pad);
}

.cs-container-narrow {
    width: 100%;
    max-width: var(--cs-container-narrow);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cs-container-pad);
    padding-right: var(--cs-container-pad);
}

.cs-container-fluid,
.cs-row-fluid {
    width: 100%;
    max-width: none;
    padding-left: var(--cs-container-pad);
    padding-right: var(--cs-container-pad);
}

/* ── Row ────────────────────────────────────────────────── */
.cs-row {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--cs-gap);
}

/* Transmission de hauteur: on propage la min-height du parent aux colonnes
   et a leur premier bloc imbrique sans toucher au systeme responsive flex. */
.cs-row > [class*="cs-col-"],
.cs-row > .wp-block-column {
    min-height: inherit;
}

.cs-row > [class*="cs-col-"] > .cs-row,
.cs-row > [class*="cs-col-"] > .cs-container,
.cs-row > [class*="cs-col-"] > .cs-container-fluid,
.cs-row > [class*="cs-col-"] > .cs-container-wide,
.cs-row > [class*="cs-col-"] > .cs-container-narrow,
.cs-row > [class*="cs-col-"] > .wp-block-group,
.cs-row > [class*="cs-col-"] > .wp-block-columns,
.cs-row > .wp-block-column > .cs-row,
.cs-row > .wp-block-column > .cs-container,
.cs-row > .wp-block-column > .cs-container-fluid,
.cs-row > .wp-block-column > .cs-container-wide,
.cs-row > .wp-block-column > .cs-container-narrow,
.cs-row > .wp-block-column > .wp-block-group,
.cs-row > .wp-block-column > .wp-block-columns {
    min-height: inherit;
}

/* ── Colonnes — mobile first (base = 100%) ──────────────── */
[class*="cs-col-"] { min-width: 0; }

.cs-col-1  { flex: 0 0 8.333%;   max-width: 8.333%;  }
.cs-col-2  { flex: 0 0 16.666%;  max-width: 16.666%; }
.cs-col-3  { flex: 0 0 25%;      max-width: 25%;     }
.cs-col-4  { flex: 0 0 33.333%;  max-width: 33.333%; }
.cs-col-5  { flex: 0 0 41.666%;  max-width: 41.666%; }
.cs-col-6  { flex: 0 0 50%;      max-width: 50%;     }
.cs-col-7  { flex: 0 0 58.333%;  max-width: 58.333%; }
.cs-col-8  { flex: 0 0 66.666%;  max-width: 66.666%; }
.cs-col-9  { flex: 0 0 75%;      max-width: 75%;     }
.cs-col-10 { flex: 0 0 83.333%;  max-width: 83.333%; }
.cs-col-11 { flex: 0 0 91.666%;  max-width: 91.666%; }
.cs-col-12 { flex: 0 0 100%;     max-width: 100%;    }

/* ── Stack mobile ───────────────────────────────────────── */
@media (max-width: 767px) {
    .cs-mobile-stack {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .cs-mobile-stack-reverse {
        flex-direction: column-reverse;
        flex-wrap: nowrap;
    }
    .cs-mobile-wrap { flex-wrap: wrap; }
    .cs-mobile-nowrap { flex-wrap: nowrap; }
    .cs-order-mobile-first { order: -1; }
    .cs-order-mobile-last  { order: 99; }
}

/* ── SM ≥ 576px ─────────────────────────────────────────── */
@media (min-width: 576px) {
    .cs-container,
    .cs-container-fluid,
    .cs-container-wide,
    .cs-container-narrow,
    .cs-row,
    .cs-row-fluid,
    [class*="cs-col-"] {
        min-height: var(--cs-min-height-sm, var(--cs-min-height, auto));
    }

    .cs-col-sm-1  { flex: 0 0 8.333%;   max-width: 8.333%;  }
    .cs-col-sm-2  { flex: 0 0 16.666%;  max-width: 16.666%; }
    .cs-col-sm-3  { flex: 0 0 25%;      max-width: 25%;     }
    .cs-col-sm-4  { flex: 0 0 33.333%;  max-width: 33.333%; }
    .cs-col-sm-5  { flex: 0 0 41.666%;  max-width: 41.666%; }
    .cs-col-sm-6  { flex: 0 0 50%;      max-width: 50%;     }
    .cs-col-sm-7  { flex: 0 0 58.333%;  max-width: 58.333%; }
    .cs-col-sm-8  { flex: 0 0 66.666%;  max-width: 66.666%; }
    .cs-col-sm-9  { flex: 0 0 75%;      max-width: 75%;     }
    .cs-col-sm-10 { flex: 0 0 83.333%;  max-width: 83.333%; }
    .cs-col-sm-11 { flex: 0 0 91.666%;  max-width: 91.666%; }
    .cs-col-sm-12 { flex: 0 0 100%;     max-width: 100%;    }
}

/* ── MD ≥ 768px ─────────────────────────────────────────── */
@media (min-width: 768px) {
    .cs-container,
    .cs-container-fluid,
    .cs-container-wide,
    .cs-container-narrow,
    .cs-row,
    .cs-row-fluid,
    [class*="cs-col-"] {
        min-height: var(--cs-min-height-md, var(--cs-min-height-sm, var(--cs-min-height, auto)));
    }

    .cs-col-md-1  { flex: 0 0 8.333%;   max-width: 8.333%;  }
    .cs-col-md-2  { flex: 0 0 16.666%;  max-width: 16.666%; }
    .cs-col-md-3  { flex: 0 0 25%;      max-width: 25%;     }
    .cs-col-md-4  { flex: 0 0 33.333%;  max-width: 33.333%; }
    .cs-col-md-5  { flex: 0 0 41.666%;  max-width: 41.666%; }
    .cs-col-md-6  { flex: 0 0 50%;      max-width: 50%;     }
    .cs-col-md-7  { flex: 0 0 58.333%;  max-width: 58.333%; }
    .cs-col-md-8  { flex: 0 0 66.666%;  max-width: 66.666%; }
    .cs-col-md-9  { flex: 0 0 75%;      max-width: 75%;     }
    .cs-col-md-10 { flex: 0 0 83.333%;  max-width: 83.333%; }
    .cs-col-md-11 { flex: 0 0 91.666%;  max-width: 91.666%; }
    .cs-col-md-12 { flex: 0 0 100%;     max-width: 100%;    }

    /* Offsets MD */
    .cs-offset-md-1 { margin-left: 8.333%;  }
    .cs-offset-md-2 { margin-left: 16.666%; }
    .cs-offset-md-3 { margin-left: 25%;     }
    .cs-offset-md-4 { margin-left: 33.333%; }
    .cs-offset-md-5 { margin-left: 41.666%; }
    .cs-offset-md-6 { margin-left: 50%;     }
}

/* ── LG ≥ 992px ─────────────────────────────────────────── */
@media (min-width: 992px) {
    .cs-container,
    .cs-container-fluid,
    .cs-container-wide,
    .cs-container-narrow,
    .cs-row,
    .cs-row-fluid,
    [class*="cs-col-"] {
        min-height: var(--cs-min-height-lg, var(--cs-min-height-md, var(--cs-min-height-sm, var(--cs-min-height, auto))));
    }

    .cs-col-lg-1  { flex: 0 0 8.333%;   max-width: 8.333%;  }
    .cs-col-lg-2  { flex: 0 0 16.666%;  max-width: 16.666%; }
    .cs-col-lg-3  { flex: 0 0 25%;      max-width: 25%;     }
    .cs-col-lg-4  { flex: 0 0 33.333%;  max-width: 33.333%; }
    .cs-col-lg-5  { flex: 0 0 41.666%;  max-width: 41.666%; }
    .cs-col-lg-6  { flex: 0 0 50%;      max-width: 50%;     }
    .cs-col-lg-7  { flex: 0 0 58.333%;  max-width: 58.333%; }
    .cs-col-lg-8  { flex: 0 0 66.666%;  max-width: 66.666%; }
    .cs-col-lg-9  { flex: 0 0 75%;      max-width: 75%;     }
    .cs-col-lg-10 { flex: 0 0 83.333%;  max-width: 83.333%; }
    .cs-col-lg-11 { flex: 0 0 91.666%;  max-width: 91.666%; }
    .cs-col-lg-12 { flex: 0 0 100%;     max-width: 100%;    }

    /* Offsets LG */
    .cs-offset-lg-1 { margin-left: 8.333%;  }
    .cs-offset-lg-2 { margin-left: 16.666%; }
    .cs-offset-lg-3 { margin-left: 25%;     }
    .cs-offset-lg-4 { margin-left: 33.333%; }
    .cs-offset-lg-5 { margin-left: 41.666%; }
    .cs-offset-lg-6 { margin-left: 50%;     }
}

/* ── XL ≥ 1200px ────────────────────────────────────────── */
@media (min-width: 1200px) {
    .cs-container,
    .cs-container-fluid,
    .cs-container-wide,
    .cs-container-narrow,
    .cs-row,
    .cs-row-fluid,
    [class*="cs-col-"] {
        min-height: var(--cs-min-height-xl, var(--cs-min-height-lg, var(--cs-min-height-md, var(--cs-min-height-sm, var(--cs-min-height, auto)))));
    }

    .cs-col-xl-1  { flex: 0 0 8.333%;   max-width: 8.333%;  }
    .cs-col-xl-2  { flex: 0 0 16.666%;  max-width: 16.666%; }
    .cs-col-xl-3  { flex: 0 0 25%;      max-width: 25%;     }
    .cs-col-xl-4  { flex: 0 0 33.333%;  max-width: 33.333%; }
    .cs-col-xl-5  { flex: 0 0 41.666%;  max-width: 41.666%; }
    .cs-col-xl-6  { flex: 0 0 50%;      max-width: 50%;     }
    .cs-col-xl-7  { flex: 0 0 58.333%;  max-width: 58.333%; }
    .cs-col-xl-8  { flex: 0 0 66.666%;  max-width: 66.666%; }
    .cs-col-xl-9  { flex: 0 0 75%;      max-width: 75%;     }
    .cs-col-xl-10 { flex: 0 0 83.333%;  max-width: 83.333%; }
    .cs-col-xl-11 { flex: 0 0 91.666%;  max-width: 91.666%; }
    .cs-col-xl-12 { flex: 0 0 100%;     max-width: 100%;    }
}