/* ==========================================================
   LETTRE SHOP — SYSTÈME DE GRILLE
   Inspiré de Bootstrap 5
   ========================================================== */

/* ----------------------------------------------------------
   1. VARIABLES
   ---------------------------------------------------------- */

:root {
    --grid-gutter-x: 1.5rem;
    --grid-gutter-y: 0;
    --container-padding: calc(var(--grid-gutter-x) * 0.5);
}

/* ----------------------------------------------------------
   2. CONTAINERS
   ---------------------------------------------------------- */

.container,
.container-fluid {
    width: 100%;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

/* Conteneurs à largeur maximale progressive */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

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

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

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

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

/* Container sans padding horizontal */
.container-no-gutters {
    padding-right: 0;
    padding-left: 0;
}

/* ----------------------------------------------------------
   3. ROW
   ---------------------------------------------------------- */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--grid-gutter-y));
    margin-right: calc(-0.5 * var(--grid-gutter-x));
    margin-left: calc(-0.5 * var(--grid-gutter-x));
    box-sizing: border-box;
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--grid-gutter-x) * 0.5);
    padding-left: calc(var(--grid-gutter-x) * 0.5);
    margin-top: var(--grid-gutter-y);
    box-sizing: border-box;
}

/* Gouttières */
.g-0 {
    --grid-gutter-x: 0;
    --grid-gutter-y: 0;
}

.g-1 {
    --grid-gutter-x: 0.25rem;
    --grid-gutter-y: 0.25rem;
}

.g-2 {
    --grid-gutter-x: 0.5rem;
    --grid-gutter-y: 0.5rem;
}

.g-3 {
    --grid-gutter-x: 1rem;
    --grid-gutter-y: 1rem;
}

.g-4 {
    --grid-gutter-x: 1.5rem;
    --grid-gutter-y: 1.5rem;
}

.g-5 {
    --grid-gutter-x: 3rem;
    --grid-gutter-y: 3rem;
}

.gx-0 { --grid-gutter-x: 0; }
.gx-1 { --grid-gutter-x: 0.25rem; }
.gx-2 { --grid-gutter-x: 0.5rem; }
.gx-3 { --grid-gutter-x: 1rem; }
.gx-4 { --grid-gutter-x: 1.5rem; }
.gx-5 { --grid-gutter-x: 3rem; }

.gy-0 { --grid-gutter-y: 0; }
.gy-1 { --grid-gutter-y: 0.25rem; }
.gy-2 { --grid-gutter-y: 0.5rem; }
.gy-3 { --grid-gutter-y: 1rem; }
.gy-4 { --grid-gutter-y: 1.5rem; }
.gy-5 { --grid-gutter-y: 3rem; }

/* ----------------------------------------------------------
   4. COLONNES DE BASE
   ---------------------------------------------------------- */

.col {
    flex: 1 0 0%;
    width: auto;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

/* Colonnes fixes : 1 à 12 sur 12 */
.col-1  { width: 8.333333%; }
.col-2  { width: 16.666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-5  { width: 41.666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333333%; }
.col-8  { width: 66.666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }

/* Colonnes fixes : conserver le comportement de flexbox */
.row > [class^="col-"],
.row > [class*=" col-"] {
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   5. BREAKPOINT SM — 576 PX
   ---------------------------------------------------------- */

@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0%;
        width: auto;
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-sm-1  { width: 8.333333%; }
    .col-sm-2  { width: 16.666667%; }
    .col-sm-3  { width: 25%; }
    .col-sm-4  { width: 33.333333%; }
    .col-sm-5  { width: 41.666667%; }
    .col-sm-6  { width: 50%; }
    .col-sm-7  { width: 58.333333%; }
    .col-sm-8  { width: 66.666667%; }
    .col-sm-9  { width: 75%; }
    .col-sm-10 { width: 83.333333%; }
    .col-sm-11 { width: 91.666667%; }
    .col-sm-12 { width: 100%; }
}

/* ----------------------------------------------------------
   6. BREAKPOINT MD — 768 PX
   ---------------------------------------------------------- */

@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0%;
        width: auto;
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-md-1  { width: 8.333333%; }
    .col-md-2  { width: 16.666667%; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.333333%; }
    .col-md-5  { width: 41.666667%; }
    .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.333333%; }
    .col-md-8  { width: 66.666667%; }
    .col-md-9  { width: 75%; }
    .col-md-10 { width: 83.333333%; }
    .col-md-11 { width: 91.666667%; }
    .col-md-12 { width: 100%; }
}

/* ----------------------------------------------------------
   7. BREAKPOINT LG — 992 PX
   ---------------------------------------------------------- */

@media (min-width: 992px) {
    .col-lg {
        flex: 1 0 0%;
        width: auto;
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-lg-1  { width: 8.333333%; }
    .col-lg-2  { width: 16.666667%; }
    .col-lg-3  { width: 25%; }
    .col-lg-4  { width: 33.333333%; }
    .col-lg-5  { width: 41.666667%; }
    .col-lg-6  { width: 50%; }
    .col-lg-7  { width: 58.333333%; }
    .col-lg-8  { width: 66.666667%; }
    .col-lg-9  { width: 75%; }
    .col-lg-10 { width: 83.333333%; }
    .col-lg-11 { width: 91.666667%; }
    .col-lg-12 { width: 100%; }
}

/* ----------------------------------------------------------
   8. BREAKPOINT XL — 1200 PX
   ---------------------------------------------------------- */

@media (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0%;
        width: auto;
    }

    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xl-1  { width: 8.333333%; }
    .col-xl-2  { width: 16.666667%; }
    .col-xl-3  { width: 25%; }
    .col-xl-4  { width: 33.333333%; }
    .col-xl-5  { width: 41.666667%; }
    .col-xl-6  { width: 50%; }
    .col-xl-7  { width: 58.333333%; }
    .col-xl-8  { width: 66.666667%; }
    .col-xl-9  { width: 75%; }
    .col-xl-10 { width: 83.333333%; }
    .col-xl-11 { width: 91.666667%; }
    .col-xl-12 { width: 100%; }
}

/* ----------------------------------------------------------
   9. BREAKPOINT XXL — 1400 PX
   ---------------------------------------------------------- */

@media (min-width: 1400px) {
    .col-xxl {
        flex: 1 0 0%;
        width: auto;
    }

    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xxl-1  { width: 8.333333%; }
    .col-xxl-2  { width: 16.666667%; }
    .col-xxl-3  { width: 25%; }
    .col-xxl-4  { width: 33.333333%; }
    .col-xxl-5  { width: 41.666667%; }
    .col-xxl-6  { width: 50%; }
    .col-xxl-7  { width: 58.333333%; }
    .col-xxl-8  { width: 66.666667%; }
    .col-xxl-9  { width: 75%; }
    .col-xxl-10 { width: 83.333333%; }
    .col-xxl-11 { width: 91.666667%; }
    .col-xxl-12 { width: 100%; }
}

/* ----------------------------------------------------------
   10. DÉCALAGES — OFFSET
   ---------------------------------------------------------- */

.offset-0  { margin-left: 0; }
.offset-1  { margin-left: 8.333333%; }
.offset-2  { margin-left: 16.666667%; }
.offset-3  { margin-left: 25%; }
.offset-4  { margin-left: 33.333333%; }
.offset-5  { margin-left: 41.666667%; }
.offset-6  { margin-left: 50%; }
.offset-7  { margin-left: 58.333333%; }
.offset-8  { margin-left: 66.666667%; }
.offset-9  { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }

@media (min-width: 576px) {
    .offset-sm-0  { margin-left: 0; }
    .offset-sm-1  { margin-left: 8.333333%; }
    .offset-sm-2  { margin-left: 16.666667%; }
    .offset-sm-3  { margin-left: 25%; }
    .offset-sm-4  { margin-left: 33.333333%; }
    .offset-sm-5  { margin-left: 41.666667%; }
    .offset-sm-6  { margin-left: 50%; }
    .offset-sm-7  { margin-left: 58.333333%; }
    .offset-sm-8  { margin-left: 66.666667%; }
    .offset-sm-9  { margin-left: 75%; }
    .offset-sm-10 { margin-left: 83.333333%; }
    .offset-sm-11 { margin-left: 91.666667%; }
}

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

@media (min-width: 992px) {
    .offset-lg-0  { margin-left: 0; }
    .offset-lg-1  { margin-left: 8.333333%; }
    .offset-lg-2  { margin-left: 16.666667%; }
    .offset-lg-3  { margin-left: 25%; }
    .offset-lg-4  { margin-left: 33.333333%; }
    .offset-lg-5  { margin-left: 41.666667%; }
    .offset-lg-6  { margin-left: 50%; }
    .offset-lg-7  { margin-left: 58.333333%; }
    .offset-lg-8  { margin-left: 66.666667%; }
    .offset-lg-9  { margin-left: 75%; }
    .offset-lg-10 { margin-left: 83.333333%; }
    .offset-lg-11 { margin-left: 91.666667%; }
}

@media (min-width: 1200px) {
    .offset-xl-0  { margin-left: 0; }
    .offset-xl-1  { margin-left: 8.333333%; }
    .offset-xl-2  { margin-left: 16.666667%; }
    .offset-xl-3  { margin-left: 25%; }
    .offset-xl-4  { margin-left: 33.333333%; }
    .offset-xl-5  { margin-left: 41.666667%; }
    .offset-xl-6  { margin-left: 50%; }
    .offset-xl-7  { margin-left: 58.333333%; }
    .offset-xl-8  { margin-left: 66.666667%; }
    .offset-xl-9  { margin-left: 75%; }
    .offset-xl-10 { margin-left: 83.333333%; }
    .offset-xl-11 { margin-left: 91.666667%; }
}

@media (min-width: 1400px) {
    .offset-xxl-0  { margin-left: 0; }
    .offset-xxl-1  { margin-left: 8.333333%; }
    .offset-xxl-2  { margin-left: 16.666667%; }
    .offset-xxl-3  { margin-left: 25%; }
    .offset-xxl-4  { margin-left: 33.333333%; }
    .offset-xxl-5  { margin-left: 41.666667%; }
    .offset-xxl-6  { margin-left: 50%; }
    .offset-xxl-7  { margin-left: 58.333333%; }
    .offset-xxl-8  { margin-left: 66.666667%; }
    .offset-xxl-9  { margin-left: 75%; }
    .offset-xxl-10 { margin-left: 83.333333%; }
    .offset-xxl-11 { margin-left: 91.666667%; }
}

/* ----------------------------------------------------------
   11. ORDRE DES COLONNES
   ---------------------------------------------------------- */

.order-first { order: -1; }
.order-last  { order: 13; }

.order-0  { order: 0; }
.order-1  { order: 1; }
.order-2  { order: 2; }
.order-3  { order: 3; }
.order-4  { order: 4; }
.order-5  { order: 5; }
.order-6  { order: 6; }
.order-7  { order: 7; }
.order-8  { order: 8; }
.order-9  { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }

@media (min-width: 576px) {
    .order-sm-first { order: -1; }
    .order-sm-last  { order: 13; }
    .order-sm-0 { order: 0; }
    .order-sm-1 { order: 1; }
    .order-sm-2 { order: 2; }
    .order-sm-3 { order: 3; }
    .order-sm-4 { order: 4; }
    .order-sm-5 { order: 5; }
    .order-sm-6 { order: 6; }
    .order-sm-7 { order: 7; }
    .order-sm-8 { order: 8; }
    .order-sm-9 { order: 9; }
    .order-sm-10 { order: 10; }
    .order-sm-11 { order: 11; }
    .order-sm-12 { order: 12; }
}

@media (min-width: 768px) {
    .order-md-first { order: -1; }
    .order-md-last  { order: 13; }
    .order-md-0 { order: 0; }
    .order-md-1 { order: 1; }
    .order-md-2 { order: 2; }
    .order-md-3 { order: 3; }
    .order-md-4 { order: 4; }
    .order-md-5 { order: 5; }
    .order-md-6 { order: 6; }
    .order-md-7 { order: 7; }
    .order-md-8 { order: 8; }
    .order-md-9 { order: 9; }
    .order-md-10 { order: 10; }
    .order-md-11 { order: 11; }
    .order-md-12 { order: 12; }
}

@media (min-width: 992px) {
    .order-lg-first { order: -1; }
    .order-lg-last  { order: 13; }
    .order-lg-0 { order: 0; }
    .order-lg-1 { order: 1; }
    .order-lg-2 { order: 2; }
    .order-lg-3 { order: 3; }
    .order-lg-4 { order: 4; }
    .order-lg-5 { order: 5; }
    .order-lg-6 { order: 6; }
    .order-lg-7 { order: 7; }
    .order-lg-8 { order: 8; }
    .order-lg-9 { order: 9; }
    .order-lg-10 { order: 10; }
    .order-lg-11 { order: 11; }
    .order-lg-12 { order: 12; }
}

/* ----------------------------------------------------------
   12. ALIGNEMENTS FLEX
   ---------------------------------------------------------- */

.justify-content-start {
    justify-content: flex-start;
}

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

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

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

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

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

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

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

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

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

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

.align-self-start {
    align-self: flex-start;
}

.align-self-end {
    align-self: flex-end;
}

.align-self-center {
    align-self: center;
}

.align-self-stretch {
    align-self: stretch;
}

/* ----------------------------------------------------------
   13. AFFICHAGE RESPONSIVE
   ---------------------------------------------------------- */

.d-none {
    display: none !important;
}

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

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

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

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

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

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

@media (min-width: 1400px) {
    .d-xxl-none { display: none !important; }
    .d-xxl-block { display: block !important; }
    .d-xxl-flex { display: flex !important; }
}

/* ==========================================================
   FLEXBOX — ALIGNEMENTS ET JUSTIFICATION
   ========================================================== */

/* Activation Flexbox */
.d-flex {
    display: flex !important;
}

/* Justification horizontale */
.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;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

/* Alignement vertical */
.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;
}

/* Alignement individuel */
.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-stretch {
    align-self: stretch !important;
}