// ===============================
//  FLEX UTILITIES
// ===============================

// // DISPLAY
// .flex {
//   display: flex;
// }

// .inline-flex {
//   display: inline-flex;
// }

// // FLEX DIRECTION
// .flex-row         { flex-direction: row; }
// .flex-row-reverse { flex-direction: row-reverse; }
// .flex-col         { flex-direction: column; }
// .flex-col-reverse { flex-direction: column-reverse; }

// // FLEX WRAP
// .flex-nowrap { flex-wrap: nowrap; }
// .flex-wrap   { flex-wrap: wrap; }
// .flex-wrap-reverse { flex-wrap: wrap-reverse; }

// // GAP
// .gap-0 { gap: 0; }
// .gap-1 { gap: .25rem; }
// .gap-2 { gap: .5rem; }
// .gap-3 { gap: .75rem; }
// .gap-4 { gap: 1rem; }
// .gap-6 { gap: 1.5rem; }
// .gap-8 { gap: 2rem; }

// $list-disposition: start, end, center, between, around, evenly;
// @each $disposition in $list-disposition {
//   .justify-#{$disposition} {
//       justify-content: var(--flex-#{$disposition});
//   }
//   .content-#{$disposition} {
//       align-content: var(--flex-#{$disposition});
//   }
// }

// $list-alignment: start, end, center, stretch, baseline;
// @each $alignment in $list-alignment {
//   .items-#{$alignment} {
//       align-items: var(--flex-#{$alignment});
//   }
//   .self-#{$alignment} {
//       align-self: var(--flex-#{$alignment});
//   }
// }

/* --- Container display --- */
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}

/* --- Flex direction --- */
.flex-row         { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col         { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* --- Flex wrap --- */
.flex-wrap         { flex-wrap: wrap; }
.flex-nowrap       { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

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

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

/* --- Align content (multi-line) --- */
.content-start    { align-content: flex-start; }
.content-end      { align-content: flex-end; }
.content-center   { align-content: center; }
.content-between  { align-content: space-between; }
.content-around   { align-content: space-around; }
.content-evenly   { align-content: space-evenly; }

/* --- Align self --- */
.self-auto     { align-self: auto; }
.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.self-stretch  { align-self: stretch; }

/* --- Flex grow / shrink --- */
.flex-grow      { flex-grow: 1; }
.flex-grow-0    { flex-grow: 0; }

.flex-shrink    { flex-shrink: 1; }
.flex-shrink-0  { flex-shrink: 0; }

/* --- Flex basis --- */
.flex-auto      { flex: 1 1 auto; }
.flex-initial   { flex: 0 1 auto; }
.flex-none      { flex: none; }

/* --- Gap (simple système responsive) --- */
$gap-values: (0, 0.25rem, 0.5rem, 1rem, 1.5rem, 2rem, 3rem);

@for $i from 0 through 6 {
  .gap-#{$i} {
    gap: nth($gap-values, $i + 1);
  }
  .gap-x-#{$i} {
    column-gap: nth($gap-values, $i + 1);
  }
  .gap-y-#{$i} {
    row-gap: nth($gap-values, $i + 1);
  }
}

/* --- Order --- */
@for $i from 1 through 12 {
  .order-#{$i} { order: $i; }
}
.order-first { order: -9999; }
.order-last  { order: 9999; }
.order-none  { order: 0; }