/* ============================================
   🎨 VARIABLES & RESET
   ============================================ */
:root {
  /* Breakpoints (identiques à Bootstrap 5) */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* Couleurs */
  --danger-color: #dc3545;
  --danger-bg: #f8d7da;
  --danger-border: #f5c6cb;
  --text-color: #212529;
  --bg-color: #fff;
  --border-color: #dee2e6;
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
  --btn-bg: #0d6efd;
  --btn-hover-bg: #0b5ed7;
  --btn-color: #fff;

  /* Espacements */
  --spacing-unit: 0.5rem; /* 8px par défaut (Bootstrap utilise 1rem = 16px, donc 1 = 16px, 2 = 32px, etc.) */
  --gutter-width: 1.5rem; /* Espacement entre les colonnes (g-2 = 0.5rem * 2) */
}

/* Reset de base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================
   📐 SYSTÈME DE GRILLE RESPONSIVE
   ============================================ */
/* Conteneur principal (remplace .container) */
.container-fluid {
  width: 100%;
  /* padding-right: calc(var(--gutter-width) * 0.5);
  padding-left: calc(var(--gutter-width) * 0.5); */
  margin-right: auto;
  margin-left: auto;
}

.container {
  width: 100%;
  /* padding-right: calc(var(--gutter-width) * 0.5);
  padding-left: calc(var(--gutter-width) * 0.5); */
  margin-right: auto;
  margin-left: auto;
}

/* Row (remplace .row) */
.row {
  --bs-gutter-x: var(--gutter-width);
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

/* Gutter (remplace .g-2, .g-3, etc.) */
.g-1 { --bs-gutter-x: 0.25rem; --bs-gutter-y: 0.25rem; }
.g-2 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.g-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }

/* Colonnes (remplace .col-*, .col-sm-*, .col-md-*, etc.) */
.col {
  flex: 1 0 0% auto;
}
.col-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* Colonnes responsives */
@media (min-width: 576px) {
  .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* Justify-content (pour .row) */
.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; }

/* ============================================
   📏 UTILITAIRES D'ESPACEMENT
   ============================================ */
/* Padding (p-1 à p-5) */
.p-1 { padding: calc(var(--spacing-unit) * 1) !important; }
.p-2 { padding: calc(var(--spacing-unit) * 2) !important; }
.p-3 { padding: calc(var(--spacing-unit) * 3) !important; }
.p-4 { padding: calc(var(--spacing-unit) * 4) !important; }
.p-5 { padding: calc(var(--spacing-unit) * 5) !important; }
.px-1 { padding-left: calc(var(--spacing-unit) * 1) !important; padding-right: calc(var(--spacing-unit) * 1) !important; }
.px-2 { padding-left: calc(var(--spacing-unit) * 2) !important; padding-right: calc(var(--spacing-unit) * 2) !important; }
.px-3 { padding-left: calc(var(--spacing-unit) * 3) !important; padding-right: calc(var(--spacing-unit) * 3) !important; }
.py-1 { padding-top: calc(var(--spacing-unit) * 1) !important; padding-bottom: calc(var(--spacing-unit) * 1) !important; }
.py-2 { padding-top: calc(var(--spacing-unit) * 2) !important; padding-bottom: calc(var(--spacing-unit) * 2) !important; }
.py-3 { padding-top: calc(var(--spacing-unit) * 3) !important; padding-bottom: calc(var(--spacing-unit) * 3) !important; }

/* Margin (m-1 à m-5) */
.m-1 { margin: calc(var(--spacing-unit) * 1) !important; }
.m-2 { margin: calc(var(--spacing-unit) * 2) !important; }
.m-3 { margin: calc(var(--spacing-unit) * 3) !important; }
.m-4 { margin: calc(var(--spacing-unit) * 4) !important; }
.m-5 { margin: calc(var(--spacing-unit) * 5) !important; }
.mx-1 { margin-left: calc(var(--spacing-unit) * 1) !important; margin-right: calc(var(--spacing-unit) * 1) !important; }
.mx-2 { margin-left: calc(var(--spacing-unit) * 2) !important; margin-right: calc(var(--spacing-unit) * 2) !important; }
.mx-3 { margin-left: calc(var(--spacing-unit) * 3) !important; margin-right: calc(var(--spacing-unit) * 3) !important; }
.my-1 { margin-top: calc(var(--spacing-unit) * 1) !important; margin-bottom: calc(var(--spacing-unit) * 1) !important; }
.my-2 { margin-top: calc(var(--spacing-unit) * 2) !important; margin-bottom: calc(var(--spacing-unit) * 2) !important; }
.my-3 { margin-top: calc(var(--spacing-unit) * 3) !important; margin-bottom: calc(var(--spacing-unit) * 3) !important; }
.mt-1 { margin-top: calc(var(--spacing-unit) * 1) !important; }
.mt-2 { margin-top: calc(var(--spacing-unit) * 2) !important; }
.mt-3 { margin-top: calc(var(--spacing-unit) * 3) !important; }
.mb-1 { margin-bottom: calc(var(--spacing-unit) * 1) !important; }
.mb-2 { margin-bottom: calc(var(--spacing-unit) * 2) !important; }
.mb-3 { margin-bottom: calc(var(--spacing-unit) * 3) !important; }

/* ============================================
   🪄 FLEXBOX (remplace .d-flex, .justify-content-*)
   ============================================ */
.d-flex {
  display: 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; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }

/* ============================================
   ⚡ AUTRES UTILITAIRES
   ============================================ */
hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid var(--border-color);
  opacity: 0.25;
}