/**
 * Bootstrap 5 Flexbox Utilities - Version simplifiée pour grilles
 * Adapté pour Bootstrap 3 (breakpoints: xs, sm, md, lg)
 * 
 * Breakpoints Bootstrap 3:
 * - xs: < 768px (mobile)
 * - sm: >= 768px (tablette)
 * - md: >= 992px (desktop)
 * - lg: >= 1200px (large desktop)
 */

/* Display Flex */
.d-flex {
  display: flex !important;
}

/* Flex Wrap */
.flex-wrap {
  flex-wrap: wrap !important;
}

/* Justify Content */
.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;
}

/* Align Items */
.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-stretch {
  align-items: stretch !important;
}

/* Flex Fill */
.flex-fill {
  flex: 1 1 auto !important;
}


/* ==========================================================================
   SM Breakpoint (>= 768px - Tablette)
   ========================================================================== */
@media (min-width: 768px) {
  .d-sm-flex {
    display: flex !important;
  }

  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }

  .justify-content-sm-start {
    justify-content: flex-start !important;
  }

  .justify-content-sm-end {
    justify-content: flex-end !important;
  }

  .justify-content-sm-center {
    justify-content: center !important;
  }

  .justify-content-sm-between {
    justify-content: space-between !important;
  }

  .justify-content-sm-around {
    justify-content: space-around !important;
  }

  .align-items-sm-start {
    align-items: flex-start !important;
  }

  .align-items-sm-end {
    align-items: flex-end !important;
  }

  .align-items-sm-center {
    align-items: center !important;
  }

  .align-items-sm-stretch {
    align-items: stretch !important;
  }

  .flex-sm-fill {
    flex: 1 1 auto !important;
  }
}


/* ==========================================================================
   MD Breakpoint (>= 992px - Desktop)
   ========================================================================== */
@media (min-width: 992px) {
  .d-md-flex {
    display: flex !important;
  }

  .flex-md-wrap {
    flex-wrap: wrap !important;
  }

  .justify-content-md-start {
    justify-content: flex-start !important;
  }

  .justify-content-md-end {
    justify-content: flex-end !important;
  }

  .justify-content-md-center {
    justify-content: center !important;
  }

  .justify-content-md-between {
    justify-content: space-between !important;
  }

  .justify-content-md-around {
    justify-content: space-around !important;
  }

  .align-items-md-start {
    align-items: flex-start !important;
  }

  .align-items-md-end {
    align-items: flex-end !important;
  }

  .align-items-md-center {
    align-items: center !important;
  }

  .align-items-md-stretch {
    align-items: stretch !important;
  }

  .flex-md-fill {
    flex: 1 1 auto !important;
  }
}


/* ==========================================================================
   LG Breakpoint (>= 1200px - Large Desktop)
   ========================================================================== */
@media (min-width: 1200px) {
  .d-lg-flex {
    display: flex !important;
  }

  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }

  .justify-content-lg-start {
    justify-content: flex-start !important;
  }

  .justify-content-lg-end {
    justify-content: flex-end !important;
  }

  .justify-content-lg-center {
    justify-content: center !important;
  }

  .justify-content-lg-between {
    justify-content: space-between !important;
  }

  .justify-content-lg-around {
    justify-content: space-around !important;
  }

  .align-items-lg-start {
    align-items: flex-start !important;
  }

  .align-items-lg-end {
    align-items: flex-end !important;
  }

  .align-items-lg-center {
    align-items: center !important;
  }

  .align-items-lg-stretch {
    align-items: stretch !important;
  }

  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
}