/* ============================================================
   FRAMEWORK.CSS v1.0 - COMPLET AVEC CLASSES RESPONSIVES
   ============================================================ */

:root {
  --espace-0: 0;
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 3rem;
  --lecture-normal: 70ch;
  --lecture-large: 90ch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ========== CONTENEURS ========== */
.conteneur {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--espace-4);
  padding-right: var(--espace-4);
}

.conteneur-etroit {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--espace-4);
  padding-right: var(--espace-4);
}

.conteneur-large {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--espace-4);
  padding-right: var(--espace-4);
}

.conteneur-plein {
  width: 100%;
  padding-left: var(--espace-4);
  padding-right: var(--espace-4);
}

.conteneur-fluide {
  width: 100%;
  padding-left: var(--espace-4);
  padding-right: var(--espace-4);
}

.boite {
  width: 100%;
}

/* ========== GRILLE ========== */
.grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* ========== COLONNES (DÉFAUT = DESKTOP) ========== */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* ========== GAPS (DÉFAUT) ========== */
.gap-0 { gap: var(--espace-0); }
.gap-1 { gap: var(--espace-1); }
.gap-2 { gap: var(--espace-2); }
.gap-3 { gap: var(--espace-3); }
.gap-4 { gap: var(--espace-4); }
.gap-5 { gap: var(--espace-5); }
.gap-6 { gap: var(--espace-6); }

.gap-x-0 { column-gap: var(--espace-0); }
.gap-x-1 { column-gap: var(--espace-1); }
.gap-x-2 { column-gap: var(--espace-2); }
.gap-x-3 { column-gap: var(--espace-3); }
.gap-x-4 { column-gap: var(--espace-4); }
.gap-x-5 { column-gap: var(--espace-5); }
.gap-x-6 { column-gap: var(--espace-6); }

.gap-y-0 { row-gap: var(--espace-0); }
.gap-y-1 { row-gap: var(--espace-1); }
.gap-y-2 { row-gap: var(--espace-2); }
.gap-y-3 { row-gap: var(--espace-3); }
.gap-y-4 { row-gap: var(--espace-4); }
.gap-y-5 { row-gap: var(--espace-5); }
.gap-y-6 { row-gap: var(--espace-6); }

/* ========== EMPILEMENT ========== */
.empile > * + * { margin-top: var(--espace-4); }
.empile-0 > * + * { margin-top: var(--espace-0); }
.empile-1 > * + * { margin-top: var(--espace-1); }
.empile-2 > * + * { margin-top: var(--espace-2); }
.empile-3 > * + * { margin-top: var(--espace-3); }
.empile-4 > * + * { margin-top: var(--espace-4); }
.empile-5 > * + * { margin-top: var(--espace-5); }
.empile-6 > * + * { margin-top: var(--espace-6); }

/* ========== MARGES (DÉFAUT) ========== */
.m-0 { margin: var(--espace-0); }
.m-1 { margin: var(--espace-1); }
.m-2 { margin: var(--espace-2); }
.m-3 { margin: var(--espace-3); }
.m-4 { margin: var(--espace-4); }
.m-5 { margin: var(--espace-5); }
.m-6 { margin: var(--espace-6); }
.m-auto { margin: auto; }

.mt-0 { margin-top: var(--espace-0); }
.mt-1 { margin-top: var(--espace-1); }
.mt-2 { margin-top: var(--espace-2); }
.mt-3 { margin-top: var(--espace-3); }
.mt-4 { margin-top: var(--espace-4); }
.mt-5 { margin-top: var(--espace-5); }
.mt-6 { margin-top: var(--espace-6); }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: var(--espace-0); }
.mb-1 { margin-bottom: var(--espace-1); }
.mb-2 { margin-bottom: var(--espace-2); }
.mb-3 { margin-bottom: var(--espace-3); }
.mb-4 { margin-bottom: var(--espace-4); }
.mb-5 { margin-bottom: var(--espace-5); }
.mb-6 { margin-bottom: var(--espace-6); }
.mb-auto { margin-bottom: auto; }

.ml-0 { margin-left: var(--espace-0); }
.ml-1 { margin-left: var(--espace-1); }
.ml-2 { margin-left: var(--espace-2); }
.ml-3 { margin-left: var(--espace-3); }
.ml-4 { margin-left: var(--espace-4); }
.ml-5 { margin-left: var(--espace-5); }
.ml-6 { margin-left: var(--espace-6); }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: var(--espace-0); }
.mr-1 { margin-right: var(--espace-1); }
.mr-2 { margin-right: var(--espace-2); }
.mr-3 { margin-right: var(--espace-3); }
.mr-4 { margin-right: var(--espace-4); }
.mr-5 { margin-right: var(--espace-5); }
.mr-6 { margin-right: var(--espace-6); }
.mr-auto { margin-right: auto; }

.mx-0 { margin-left: var(--espace-0); margin-right: var(--espace-0); }
.mx-1 { margin-left: var(--espace-1); margin-right: var(--espace-1); }
.mx-2 { margin-left: var(--espace-2); margin-right: var(--espace-2); }
.mx-3 { margin-left: var(--espace-3); margin-right: var(--espace-3); }
.mx-4 { margin-left: var(--espace-4); margin-right: var(--espace-4); }
.mx-5 { margin-left: var(--espace-5); margin-right: var(--espace-5); }
.mx-6 { margin-left: var(--espace-6); margin-right: var(--espace-6); }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: var(--espace-0); margin-bottom: var(--espace-0); }
.my-1 { margin-top: var(--espace-1); margin-bottom: var(--espace-1); }
.my-2 { margin-top: var(--espace-2); margin-bottom: var(--espace-2); }
.my-3 { margin-top: var(--espace-3); margin-bottom: var(--espace-3); }
.my-4 { margin-top: var(--espace-4); margin-bottom: var(--espace-4); }
.my-5 { margin-top: var(--espace-5); margin-bottom: var(--espace-5); }
.my-6 { margin-top: var(--espace-6); margin-bottom: var(--espace-6); }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* ========== PADDINGS (DÉFAUT) ========== */
.p-0 { padding: var(--espace-0); }
.p-1 { padding: var(--espace-1); }
.p-2 { padding: var(--espace-2); }
.p-3 { padding: var(--espace-3); }
.p-4 { padding: var(--espace-4); }
.p-5 { padding: var(--espace-5); }
.p-6 { padding: var(--espace-6); }

.pt-0 { padding-top: var(--espace-0); }
.pt-1 { padding-top: var(--espace-1); }
.pt-2 { padding-top: var(--espace-2); }
.pt-3 { padding-top: var(--espace-3); }
.pt-4 { padding-top: var(--espace-4); }
.pt-5 { padding-top: var(--espace-5); }
.pt-6 { padding-top: var(--espace-6); }

.pb-0 { padding-bottom: var(--espace-0); }
.pb-1 { padding-bottom: var(--espace-1); }
.pb-2 { padding-bottom: var(--espace-2); }
.pb-3 { padding-bottom: var(--espace-3); }
.pb-4 { padding-bottom: var(--espace-4); }
.pb-5 { padding-bottom: var(--espace-5); }
.pb-6 { padding-bottom: var(--espace-6); }

.pl-0 { padding-left: var(--espace-0); }
.pl-1 { padding-left: var(--espace-1); }
.pl-2 { padding-left: var(--espace-2); }
.pl-3 { padding-left: var(--espace-3); }
.pl-4 { padding-left: var(--espace-4); }
.pl-5 { padding-left: var(--espace-5); }
.pl-6 { padding-left: var(--espace-6); }

.pr-0 { padding-right: var(--espace-0); }
.pr-1 { padding-right: var(--espace-1); }
.pr-2 { padding-right: var(--espace-2); }
.pr-3 { padding-right: var(--espace-3); }
.pr-4 { padding-right: var(--espace-4); }
.pr-5 { padding-right: var(--espace-5); }
.pr-6 { padding-right: var(--espace-6); }

.px-0 { padding-left: var(--espace-0); padding-right: var(--espace-0); }
.px-1 { padding-left: var(--espace-1); padding-right: var(--espace-1); }
.px-2 { padding-left: var(--espace-2); padding-right: var(--espace-2); }
.px-3 { padding-left: var(--espace-3); padding-right: var(--espace-3); }
.px-4 { padding-left: var(--espace-4); padding-right: var(--espace-4); }
.px-5 { padding-left: var(--espace-5); padding-right: var(--espace-5); }
.px-6 { padding-left: var(--espace-6); padding-right: var(--espace-6); }

.py-0 { padding-top: var(--espace-0); padding-bottom: var(--espace-0); }
.py-1 { padding-top: var(--espace-1); padding-bottom: var(--espace-1); }
.py-2 { padding-top: var(--espace-2); padding-bottom: var(--espace-2); }
.py-3 { padding-top: var(--espace-3); padding-bottom: var(--espace-3); }
.py-4 { padding-top: var(--espace-4); padding-bottom: var(--espace-4); }
.py-5 { padding-top: var(--espace-5); padding-bottom: var(--espace-5); }
.py-6 { padding-top: var(--espace-6); padding-bottom: var(--espace-6); }

/* ========== FLEXBOX (DÉFAUT) ========== */
.flex { display: flex; }
.flex-inline { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-colonne { flex-direction: column; }
.flex-ligne { flex-direction: row; }

.align-centre { align-items: center; }
.align-debut { align-items: flex-start; }
.align-fin { align-items: flex-end; }
.align-base { align-items: baseline; }
.align-etire { align-items: stretch; }

.juste-centre { justify-content: center; }
.juste-debut { justify-content: flex-start; }
.juste-fin { justify-content: flex-end; }
.juste-entre { justify-content: space-between; }
.juste-autour { justify-content: space-around; }
.juste-egal { justify-content: space-evenly; }

.soi-centre { align-self: center; }
.soi-debut { align-self: flex-start; }
.soi-fin { align-self: flex-end; }

/* ========== AFFICHAGE (DÉFAUT) ========== */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.cache { display: none; }
.affiche { display: block; }

/* ========== DIMENSIONS ========== */
.l-25 { width: 25%; }
.l-50 { width: 50%; }
.l-75 { width: 75%; }
.l-85 { width: 85%; }
.l-100 { width: 100%; }
.l-auto { width: auto; }

.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

/* ========== MÉDIAS ========== */
.media-fluid {
  max-width: 100%;
  height: auto;
}

/* ========== RATIOS ========== */
.ratio-carre { aspect-ratio: 1 / 1; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-3-2 { aspect-ratio: 3 / 2; }

/* ========== LECTURE ========== */
.lecture { max-width: var(--lecture-normal); }
.lecture-large { max-width: var(--lecture-large); }

/* ========== ALIGNEMENT TEXTE ========== */
.texte-gauche   { text-align: left; }
.texte-centre   { text-align: center; }
.texte-droite   { text-align: right; }
.texte-justifie { text-align: justify; }

/* ============================================================
   ========== RESPONSIVE ==========
   ============================================================ */

/* ========== MOBILE (≤767px) ========== */
@media (max-width: 767px) {
  /* ---- AFFICHAGE ---- */
  .mob-cache { display: none; }
  .mob-affiche { display: block; }
  .mob-block { display: block; }
  .mob-inline { display: inline; }
  .mob-inline-block { display: inline-block; }
  .mob-flex { display: flex; }
  .mob-flex-inline { display: inline-flex; }
  
  /* ---- FLEX DIRECTION ---- */
  .mob-flex-ligne { flex-direction: row; }
  .mob-flex-colonne { flex-direction: column; }
  .mob-flex-wrap { flex-wrap: wrap; }
  .mob-flex-nowrap { flex-wrap: nowrap; }
  
  /* ---- FLEX ALIGN ---- */
  .mob-align-centre { align-items: center; }
  .mob-align-debut { align-items: flex-start; }
  .mob-align-fin { align-items: flex-end; }
  .mob-align-base { align-items: baseline; }
  .mob-align-etire { align-items: stretch; }
  
  /* ---- FLEX JUSTIFY ---- */
  .mob-juste-centre { justify-content: center; }
  .mob-juste-debut { justify-content: flex-start; }
  .mob-juste-fin { justify-content: flex-end; }
  .mob-juste-entre { justify-content: space-between; }
  .mob-juste-autour { justify-content: space-around; }
  .mob-juste-egal { justify-content: space-evenly; }
  
  /* ---- SELF ALIGN ---- */
  .mob-soi-centre { align-self: center; }
  .mob-soi-debut { align-self: flex-start; }
  .mob-soi-fin { align-self: flex-end; }
  
  /* ---- GRILLE ---- */
  .grille {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* ---- COLONNES ---- */
  .mob-col-1 { grid-column: span 1; }
  .mob-col-2 { grid-column: span 2; }
  .mob-col-3 { grid-column: span 3; }
  .mob-col-4 { grid-column: span 4; }
  .mob-col-5 { grid-column: span 5; }
  .mob-col-6 { grid-column: span 6; }
  .mob-col-7 { grid-column: span 7; }
  .mob-col-8 { grid-column: span 8; }
  .mob-col-9 { grid-column: span 9; }
  .mob-col-10 { grid-column: span 10; }
  .mob-col-11 { grid-column: span 11; }
  .mob-col-12 { grid-column: span 12; }
  
  /* ---- GAPS ---- */
  .mob-gap-0 { gap: var(--espace-0); }
  .mob-gap-1 { gap: var(--espace-1); }
  .mob-gap-2 { gap: var(--espace-2); }
  .mob-gap-3 { gap: var(--espace-3); }
  .mob-gap-4 { gap: var(--espace-4); }
  .mob-gap-5 { gap: var(--espace-5); }
  .mob-gap-6 { gap: var(--espace-6); }
  
  .mob-gap-x-0 { column-gap: var(--espace-0); }
  .mob-gap-x-1 { column-gap: var(--espace-1); }
  .mob-gap-x-2 { column-gap: var(--espace-2); }
  .mob-gap-x-3 { column-gap: var(--espace-3); }
  .mob-gap-x-4 { column-gap: var(--espace-4); }
  .mob-gap-x-5 { column-gap: var(--espace-5); }
  .mob-gap-x-6 { column-gap: var(--espace-6); }
  
  .mob-gap-y-0 { row-gap: var(--espace-0); }
  .mob-gap-y-1 { row-gap: var(--espace-1); }
  .mob-gap-y-2 { row-gap: var(--espace-2); }
  .mob-gap-y-3 { row-gap: var(--espace-3); }
  .mob-gap-y-4 { row-gap: var(--espace-4); }
  .mob-gap-y-5 { row-gap: var(--espace-5); }
  .mob-gap-y-6 { row-gap: var(--espace-6); }
  
  /* ---- MARGES ---- */
  .mob-m-0 { margin: var(--espace-0); }
  .mob-m-1 { margin: var(--espace-1); }
  .mob-m-2 { margin: var(--espace-2); }
  .mob-m-3 { margin: var(--espace-3); }
  .mob-m-4 { margin: var(--espace-4); }
  .mob-m-5 { margin: var(--espace-5); }
  .mob-m-6 { margin: var(--espace-6); }
  .mob-m-auto { margin: auto; }
  
  .mob-mt-0 { margin-top: var(--espace-0); }
  .mob-mt-1 { margin-top: var(--espace-1); }
  .mob-mt-2 { margin-top: var(--espace-2); }
  .mob-mt-3 { margin-top: var(--espace-3); }
  .mob-mt-4 { margin-top: var(--espace-4); }
  .mob-mt-5 { margin-top: var(--espace-5); }
  .mob-mt-6 { margin-top: var(--espace-6); }
  .mob-mt-auto { margin-top: auto; }
  
  .mob-mb-0 { margin-bottom: var(--espace-0); }
  .mob-mb-1 { margin-bottom: var(--espace-1); }
  .mob-mb-2 { margin-bottom: var(--espace-2); }
  .mob-mb-3 { margin-bottom: var(--espace-3); }
  .mob-mb-4 { margin-bottom: var(--espace-4); }
  .mob-mb-5 { margin-bottom: var(--espace-5); }
  .mob-mb-6 { margin-bottom: var(--espace-6); }
  .mob-mb-auto { margin-bottom: auto; }
  
  .mob-ml-0 { margin-left: var(--espace-0); }
  .mob-ml-1 { margin-left: var(--espace-1); }
  .mob-ml-2 { margin-left: var(--espace-2); }
  .mob-ml-3 { margin-left: var(--espace-3); }
  .mob-ml-4 { margin-left: var(--espace-4); }
  .mob-ml-5 { margin-left: var(--espace-5); }
  .mob-ml-6 { margin-left: var(--espace-6); }
  .mob-ml-auto { margin-left: auto; }
  
  .mob-mr-0 { margin-right: var(--espace-0); }
  .mob-mr-1 { margin-right: var(--espace-1); }
  .mob-mr-2 { margin-right: var(--espace-2); }
  .mob-mr-3 { margin-right: var(--espace-3); }
  .mob-mr-4 { margin-right: var(--espace-4); }
  .mob-mr-5 { margin-right: var(--espace-5); }
  .mob-mr-6 { margin-right: var(--espace-6); }
  .mob-mr-auto { margin-right: auto; }
  
  .mob-mx-0 { margin-left: var(--espace-0); margin-right: var(--espace-0); }
  .mob-mx-1 { margin-left: var(--espace-1); margin-right: var(--espace-1); }
  .mob-mx-2 { margin-left: var(--espace-2); margin-right: var(--espace-2); }
  .mob-mx-3 { margin-left: var(--espace-3); margin-right: var(--espace-3); }
  .mob-mx-4 { margin-left: var(--espace-4); margin-right: var(--espace-4); }
  .mob-mx-5 { margin-left: var(--espace-5); margin-right: var(--espace-5); }
  .mob-mx-6 { margin-left: var(--espace-6); margin-right: var(--espace-6); }
  .mob-mx-auto { margin-left: auto; margin-right: auto; }
  
  .mob-my-0 { margin-top: var(--espace-0); margin-bottom: var(--espace-0); }
  .mob-my-1 { margin-top: var(--espace-1); margin-bottom: var(--espace-1); }
  .mob-my-2 { margin-top: var(--espace-2); margin-bottom: var(--espace-2); }
  .mob-my-3 { margin-top: var(--espace-3); margin-bottom: var(--espace-3); }
  .mob-my-4 { margin-top: var(--espace-4); margin-bottom: var(--espace-4); }
  .mob-my-5 { margin-top: var(--espace-5); margin-bottom: var(--espace-5); }
  .mob-my-6 { margin-top: var(--espace-6); margin-bottom: var(--espace-6); }
  .mob-my-auto { margin-top: auto; margin-bottom: auto; }
  
  /* ---- PADDINGS ---- */
  .mob-p-0 { padding: var(--espace-0); }
  .mob-p-1 { padding: var(--espace-1); }
  .mob-p-2 { padding: var(--espace-2); }
  .mob-p-3 { padding: var(--espace-3); }
  .mob-p-4 { padding: var(--espace-4); }
  .mob-p-5 { padding: var(--espace-5); }
  .mob-p-6 { padding: var(--espace-6); }
  
  .mob-pt-0 { padding-top: var(--espace-0); }
  .mob-pt-1 { padding-top: var(--espace-1); }
  .mob-pt-2 { padding-top: var(--espace-2); }
  .mob-pt-3 { padding-top: var(--espace-3); }
  .mob-pt-4 { padding-top: var(--espace-4); }
  .mob-pt-5 { padding-top: var(--espace-5); }
  .mob-pt-6 { padding-top: var(--espace-6); }
  
  .mob-pb-0 { padding-bottom: var(--espace-0); }
  .mob-pb-1 { padding-bottom: var(--espace-1); }
  .mob-pb-2 { padding-bottom: var(--espace-2); }
  .mob-pb-3 { padding-bottom: var(--espace-3); }
  .mob-pb-4 { padding-bottom: var(--espace-4); }
  .mob-pb-5 { padding-bottom: var(--espace-5); }
  .mob-pb-6 { padding-bottom: var(--espace-6); }
  
  .mob-pl-0 { padding-left: var(--espace-0); }
  .mob-pl-1 { padding-left: var(--espace-1); }
  .mob-pl-2 { padding-left: var(--espace-2); }
  .mob-pl-3 { padding-left: var(--espace-3); }
  .mob-pl-4 { padding-left: var(--espace-4); }
  .mob-pl-5 { padding-left: var(--espace-5); }
  .mob-pl-6 { padding-left: var(--espace-6); }
  
  .mob-pr-0 { padding-right: var(--espace-0); }
  .mob-pr-1 { padding-right: var(--espace-1); }
  .mob-pr-2 { padding-right: var(--espace-2); }
  .mob-pr-3 { padding-right: var(--espace-3); }
  .mob-pr-4 { padding-right: var(--espace-4); }
  .mob-pr-5 { padding-right: var(--espace-5); }
  .mob-pr-6 { padding-right: var(--espace-6); }
  
  .mob-px-0 { padding-left: var(--espace-0); padding-right: var(--espace-0); }
  .mob-px-1 { padding-left: var(--espace-1); padding-right: var(--espace-1); }
  .mob-px-2 { padding-left: var(--espace-2); padding-right: var(--espace-2); }
  .mob-px-3 { padding-left: var(--espace-3); padding-right: var(--espace-3); }
  .mob-px-4 { padding-left: var(--espace-4); padding-right: var(--espace-4); }
  .mob-px-5 { padding-left: var(--espace-5); padding-right: var(--espace-5); }
  .mob-px-6 { padding-left: var(--espace-6); padding-right: var(--espace-6); }
  
  .mob-py-0 { padding-top: var(--espace-0); padding-bottom: var(--espace-0); }
  .mob-py-1 { padding-top: var(--espace-1); padding-bottom: var(--espace-1); }
  .mob-py-2 { padding-top: var(--espace-2); padding-bottom: var(--espace-2); }
  .mob-py-3 { padding-top: var(--espace-3); padding-bottom: var(--espace-3); }
  .mob-py-4 { padding-top: var(--espace-4); padding-bottom: var(--espace-4); }
  .mob-py-5 { padding-top: var(--espace-5); padding-bottom: var(--espace-5); }
  .mob-py-6 { padding-top: var(--espace-6); padding-bottom: var(--espace-6); }
  
  /* ---- TEXT ALIGN ---- */
  .mob-texte-gauche { text-align: left; }
  .mob-texte-centre { text-align: center; }
  .mob-texte-droite { text-align: right; }
  .mob-texte-justifie { text-align: justify; }
  
  /* ---- DIMENSIONS ---- */
  .mob-l-25 { width: 25%; }
  .mob-l-50 { width: 50%; }
  .mob-l-75 { width: 75%; }
  .mob-l-85 { width: 85%; }
  .mob-l-100 { width: 100%; }
  .mob-l-auto { width: auto; }
  
  /* ---- CONTENEUR ---- */
  .conteneur {
    padding-left: var(--espace-4);
    padding-right: var(--espace-4);
  }
}

/* ========== TABLETTE (768px - 1023px) ========== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* ---- AFFICHAGE ---- */
  .tab-cache { display: none; }
  .tab-affiche { display: block; }
  .tab-block { display: block; }
  .tab-inline { display: inline; }
  .tab-inline-block { display: inline-block; }
  .tab-flex { display: flex; }
  .tab-flex-inline { display: inline-flex; }
  
  /* ---- FLEX DIRECTION ---- */
  .tab-flex-ligne { flex-direction: row; }
  .tab-flex-colonne { flex-direction: column; }
  .tab-flex-wrap { flex-wrap: wrap; }
  .tab-flex-nowrap { flex-wrap: nowrap; }
  
  /* ---- FLEX ALIGN ---- */
  .tab-align-centre { align-items: center; }
  .tab-align-debut { align-items: flex-start; }
  .tab-align-fin { align-items: flex-end; }
  .tab-align-base { align-items: baseline; }
  .tab-align-etire { align-items: stretch; }
  
  /* ---- FLEX JUSTIFY ---- */
  .tab-juste-centre { justify-content: center; }
  .tab-juste-debut { justify-content: flex-start; }
  .tab-juste-fin { justify-content: flex-end; }
  .tab-juste-entre { justify-content: space-between; }
  .tab-juste-autour { justify-content: space-around; }
  .tab-juste-egal { justify-content: space-evenly; }
  
  /* ---- SELF ALIGN ---- */
  .tab-soi-centre { align-self: center; }
  .tab-soi-debut { align-self: flex-start; }
  .tab-soi-fin { align-self: flex-end; }
  
  /* ---- COLONNES ---- */
  .tab-col-1 { grid-column: span 1; }
  .tab-col-2 { grid-column: span 2; }
  .tab-col-3 { grid-column: span 3; }
  .tab-col-4 { grid-column: span 4; }
  .tab-col-5 { grid-column: span 5; }
  .tab-col-6 { grid-column: span 6; }
  .tab-col-7 { grid-column: span 7; }
  .tab-col-8 { grid-column: span 8; }
  .tab-col-9 { grid-column: span 9; }
  .tab-col-10 { grid-column: span 10; }
  .tab-col-11 { grid-column: span 11; }
  .tab-col-12 { grid-column: span 12; }
  
  /* ---- GAPS ---- */
  .tab-gap-0 { gap: var(--espace-0); }
  .tab-gap-1 { gap: var(--espace-1); }
  .tab-gap-2 { gap: var(--espace-2); }
  .tab-gap-3 { gap: var(--espace-3); }
  .tab-gap-4 { gap: var(--espace-4); }
  .tab-gap-5 { gap: var(--espace-5); }
  .tab-gap-6 { gap: var(--espace-6); }
  
  .tab-gap-x-0 { column-gap: var(--espace-0); }
  .tab-gap-x-1 { column-gap: var(--espace-1); }
  .tab-gap-x-2 { column-gap: var(--espace-2); }
  .tab-gap-x-3 { column-gap: var(--espace-3); }
  .tab-gap-x-4 { column-gap: var(--espace-4); }
  .tab-gap-x-5 { column-gap: var(--espace-5); }
  .tab-gap-x-6 { column-gap: var(--espace-6); }
  
  .tab-gap-y-0 { row-gap: var(--espace-0); }
  .tab-gap-y-1 { row-gap: var(--espace-1); }
  .tab-gap-y-2 { row-gap: var(--espace-2); }
  .tab-gap-y-3 { row-gap: var(--espace-3); }
  .tab-gap-y-4 { row-gap: var(--espace-4); }
  .tab-gap-y-5 { row-gap: var(--espace-5); }
  .tab-gap-y-6 { row-gap: var(--espace-6); }
  
  /* ---- MARGES ---- */
  .tab-m-0 { margin: var(--espace-0); }
  .tab-m-1 { margin: var(--espace-1); }
  .tab-m-2 { margin: var(--espace-2); }
  .tab-m-3 { margin: var(--espace-3); }
  .tab-m-4 { margin: var(--espace-4); }
  .tab-m-5 { margin: var(--espace-5); }
  .tab-m-6 { margin: var(--espace-6); }
  .tab-m-auto { margin: auto; }
  
  .tab-mt-0 { margin-top: var(--espace-0); }
  .tab-mt-1 { margin-top: var(--espace-1); }
  .tab-mt-2 { margin-top: var(--espace-2); }
  .tab-mt-3 { margin-top: var(--espace-3); }
  .tab-mt-4 { margin-top: var(--espace-4); }
  .tab-mt-5 { margin-top: var(--espace-5); }
  .tab-mt-6 { margin-top: var(--espace-6); }
  .tab-mt-auto { margin-top: auto; }
  
  .tab-mb-0 { margin-bottom: var(--espace-0); }
  .tab-mb-1 { margin-bottom: var(--espace-1); }
  .tab-mb-2 { margin-bottom: var(--espace-2); }
  .tab-mb-3 { margin-bottom: var(--espace-3); }
  .tab-mb-4 { margin-bottom: var(--espace-4); }
  .tab-mb-5 { margin-bottom: var(--espace-5); }
  .tab-mb-6 { margin-bottom: var(--espace-6); }
  .tab-mb-auto { margin-bottom: auto; }
  
  .tab-ml-0 { margin-left: var(--espace-0); }
  .tab-ml-1 { margin-left: var(--espace-1); }
  .tab-ml-2 { margin-left: var(--espace-2); }
  .tab-ml-3 { margin-left: var(--espace-3); }
  .tab-ml-4 { margin-left: var(--espace-4); }
  .tab-ml-5 { margin-left: var(--espace-5); }
  .tab-ml-6 { margin-left: var(--espace-6); }
  .tab-ml-auto { margin-left: auto; }
  
  .tab-mr-0 { margin-right: var(--espace-0); }
  .tab-mr-1 { margin-right: var(--espace-1); }
  .tab-mr-2 { margin-right: var(--espace-2); }
  .tab-mr-3 { margin-right: var(--espace-3); }
  .tab-mr-4 { margin-right: var(--espace-4); }
  .tab-mr-5 { margin-right: var(--espace-5); }
  .tab-mr-6 { margin-right: var(--espace-6); }
  .tab-mr-auto { margin-right: auto; }
  
  .tab-mx-0 { margin-left: var(--espace-0); margin-right: var(--espace-0); }
  .tab-mx-1 { margin-left: var(--espace-1); margin-right: var(--espace-1); }
  .tab-mx-2 { margin-left: var(--espace-2); margin-right: var(--espace-2); }
  .tab-mx-3 { margin-left: var(--espace-3); margin-right: var(--espace-3); }
  .tab-mx-4 { margin-left: var(--espace-4); margin-right: var(--espace-4); }
  .tab-mx-5 { margin-left: var(--espace-5); margin-right: var(--espace-5); }
  .tab-mx-6 { margin-left: var(--espace-6); margin-right: var(--espace-6); }
  .tab-mx-auto { margin-left: auto; margin-right: auto; }
  
  .tab-my-0 { margin-top: var(--espace-0); margin-bottom: var(--espace-0); }
  .tab-my-1 { margin-top: var(--espace-1); margin-bottom: var(--espace-1); }
  .tab-my-2 { margin-top: var(--espace-2); margin-bottom: var(--espace-2); }
  .tab-my-3 { margin-top: var(--espace-3); margin-bottom: var(--espace-3); }
  .tab-my-4 { margin-top: var(--espace-4); margin-bottom: var(--espace-4); }
  .tab-my-5 { margin-top: var(--espace-5); margin-bottom: var(--espace-5); }
  .tab-my-6 { margin-top: var(--espace-6); margin-bottom: var(--espace-6); }
  .tab-my-auto { margin-top: auto; margin-bottom: auto; }
  
  /* ---- PADDINGS ---- */
  .tab-p-0 { padding: var(--espace-0); }
  .tab-p-1 { padding: var(--espace-1); }
  .tab-p-2 { padding: var(--espace-2); }
  .tab-p-3 { padding: var(--espace-3); }
  .tab-p-4 { padding: var(--espace-4); }
  .tab-p-5 { padding: var(--espace-5); }
  .tab-p-6 { padding: var(--espace-6); }
  
  .tab-pt-0 { padding-top: var(--espace-0); }
  .tab-pt-1 { padding-top: var(--espace-1); }
  .tab-pt-2 { padding-top: var(--espace-2); }
  .tab-pt-3 { padding-top: var(--espace-3); }
  .tab-pt-4 { padding-top: var(--espace-4); }
  .tab-pt-5 { padding-top: var(--espace-5); }
  .tab-pt-6 { padding-top: var(--espace-6); }
  
  .tab-pb-0 { padding-bottom: var(--espace-0); }
  .tab-pb-1 { padding-bottom: var(--espace-1); }
  .tab-pb-2 { padding-bottom: var(--espace-2); }
  .tab-pb-3 { padding-bottom: var(--espace-3); }
  .tab-pb-4 { padding-bottom: var(--espace-4); }
  .tab-pb-5 { padding-bottom: var(--espace-5); }
  .tab-pb-6 { padding-bottom: var(--espace-6); }
  
  .tab-pl-0 { padding-left: var(--espace-0); }
  .tab-pl-1 { padding-left: var(--espace-1); }
  .tab-pl-2 { padding-left: var(--espace-2); }
  .tab-pl-3 { padding-left: var(--espace-3); }
  .tab-pl-4 { padding-left: var(--espace-4); }
  .tab-pl-5 { padding-left: var(--espace-5); }
  .tab-pl-6 { padding-left: var(--espace-6); }
  
  .tab-pr-0 { padding-right: var(--espace-0); }
  .tab-pr-1 { padding-right: var(--espace-1); }
  .tab-pr-2 { padding-right: var(--espace-2); }
  .tab-pr-3 { padding-right: var(--espace-3); }
  .tab-pr-4 { padding-right: var(--espace-4); }
  .tab-pr-5 { padding-right: var(--espace-5); }
  .tab-pr-6 { padding-right: var(--espace-6); }
  
  .tab-px-0 { padding-left: var(--espace-0); padding-right: var(--espace-0); }
  .tab-px-1 { padding-left: var(--espace-1); padding-right: var(--espace-1); }
  .tab-px-2 { padding-left: var(--espace-2); padding-right: var(--espace-2); }
  .tab-px-3 { padding-left: var(--espace-3); padding-right: var(--espace-3); }
  .tab-px-4 { padding-left: var(--espace-4); padding-right: var(--espace-4); }
  .tab-px-5 { padding-left: var(--espace-5); padding-right: var(--espace-5); }
  .tab-px-6 { padding-left: var(--espace-6); padding-right: var(--espace-6); }
  
  .tab-py-0 { padding-top: var(--espace-0); padding-bottom: var(--espace-0); }
  .tab-py-1 { padding-top: var(--espace-1); padding-bottom: var(--espace-1); }
  .tab-py-2 { padding-top: var(--espace-2); padding-bottom: var(--espace-2); }
  .tab-py-3 { padding-top: var(--espace-3); padding-bottom: var(--espace-3); }
  .tab-py-4 { padding-top: var(--espace-4); padding-bottom: var(--espace-4); }
  .tab-py-5 { padding-top: var(--espace-5); padding-bottom: var(--espace-5); }
  .tab-py-6 { padding-top: var(--espace-6); padding-bottom: var(--espace-6); }
  
  /* ---- TEXT ALIGN ---- */
  .tab-texte-gauche { text-align: left; }
  .tab-texte-centre { text-align: center; }
  .tab-texte-droite { text-align: right; }
  .tab-texte-justifie { text-align: justify; }
  
  /* ---- DIMENSIONS ---- */
  .tab-l-25 { width: 25%; }
  .tab-l-50 { width: 50%; }
  .tab-l-75 { width: 75%; }
  .tab-l-85 { width: 85%; }
  .tab-l-100 { width: 100%; }
  .tab-l-auto { width: auto; }
  
  /* ---- CONTENEUR ---- */
  .conteneur {
    padding-left: var(--espace-5);
    padding-right: var(--espace-5);
  }
}

/* ========== BUREAU (≥1024px) ========== */
@media (min-width: 1024px) {
  /* ---- AFFICHAGE ---- */
  .bur-cache { display: none; }
  .bur-affiche { display: block; }
  .bur-block { display: block; }
  .bur-inline { display: inline; }
  .bur-inline-block { display: inline-block; }
  .bur-flex { display: flex; }
  .bur-flex-inline { display: inline-flex; }
  
  /* ---- FLEX DIRECTION ---- */
  .bur-flex-ligne { flex-direction: row; }
  .bur-flex-colonne { flex-direction: column; }
  .bur-flex-wrap { flex-wrap: wrap; }
  .bur-flex-nowrap { flex-wrap: nowrap; }
  
  /* ---- FLEX ALIGN ---- */
  .bur-align-centre { align-items: center; }
  .bur-align-debut { align-items: flex-start; }
  .bur-align-fin { align-items: flex-end; }
  .bur-align-base { align-items: baseline; }
  .bur-align-etire { align-items: stretch; }
  
  /* ---- FLEX JUSTIFY ---- */
  .bur-juste-centre { justify-content: center; }
  .bur-juste-debut { justify-content: flex-start; }
  .bur-juste-fin { justify-content: flex-end; }
  .bur-juste-entre { justify-content: space-between; }
  .bur-juste-autour { justify-content: space-around; }
  .bur-juste-egal { justify-content: space-evenly; }
  
  /* ---- SELF ALIGN ---- */
  .bur-soi-centre { align-self: center; }
  .bur-soi-debut { align-self: flex-start; }
  .bur-soi-fin { align-self: flex-end; }
  
  /* ---- COLONNES ---- */
  .bur-col-1 { grid-column: span 1; }
  .bur-col-2 { grid-column: span 2; }
  .bur-col-3 { grid-column: span 3; }
  .bur-col-4 { grid-column: span 4; }
  .bur-col-5 { grid-column: span 5; }
  .bur-col-6 { grid-column: span 6; }
  .bur-col-7 { grid-column: span 7; }
  .bur-col-8 { grid-column: span 8; }
  .bur-col-9 { grid-column: span 9; }
  .bur-col-10 { grid-column: span 10; }
  .bur-col-11 { grid-column: span 11; }
  .bur-col-12 { grid-column: span 12; }
  
  /* ---- GAPS ---- */
  .bur-gap-0 { gap: var(--espace-0); }
  .bur-gap-1 { gap: var(--espace-1); }
  .bur-gap-2 { gap: var(--espace-2); }
  .bur-gap-3 { gap: var(--espace-3); }
  .bur-gap-4 { gap: var(--espace-4); }
  .bur-gap-5 { gap: var(--espace-5); }
  .bur-gap-6 { gap: var(--espace-6); }
  
  .bur-gap-x-0 { column-gap: var(--espace-0); }
  .bur-gap-x-1 { column-gap: var(--espace-1); }
  .bur-gap-x-2 { column-gap: var(--espace-2); }
  .bur-gap-x-3 { column-gap: var(--espace-3); }
  .bur-gap-x-4 { column-gap: var(--espace-4); }
  .bur-gap-x-5 { column-gap: var(--espace-5); }
  .bur-gap-x-6 { column-gap: var(--espace-6); }
  
  .bur-gap-y-0 { row-gap: var(--espace-0); }
  .bur-gap-y-1 { row-gap: var(--espace-1); }
  .bur-gap-y-2 { row-gap: var(--espace-2); }
  .bur-gap-y-3 { row-gap: var(--espace-3); }
  .bur-gap-y-4 { row-gap: var(--espace-4); }
  .bur-gap-y-5 { row-gap: var(--espace-5); }
  .bur-gap-y-6 { row-gap: var(--espace-6); }
  
  /* ---- MARGES ---- */
  .bur-m-0 { margin: var(--espace-0); }
  .bur-m-1 { margin: var(--espace-1); }
  .bur-m-2 { margin: var(--espace-2); }
  .bur-m-3 { margin: var(--espace-3); }
  .bur-m-4 { margin: var(--espace-4); }
  .bur-m-5 { margin: var(--espace-5); }
  .bur-m-6 { margin: var(--espace-6); }
  .bur-m-auto { margin: auto; }
  
  .bur-mt-0 { margin-top: var(--espace-0); }
  .bur-mt-1 { margin-top: var(--espace-1); }
  .bur-mt-2 { margin-top: var(--espace-2); }
  .bur-mt-3 { margin-top: var(--espace-3); }
  .bur-mt-4 { margin-top: var(--espace-4); }
  .bur-mt-5 { margin-top: var(--espace-5); }
  .bur-mt-6 { margin-top: var(--espace-6); }
  .bur-mt-auto { margin-top: auto; }
  
  .bur-mb-0 { margin-bottom: var(--espace-0); }
  .bur-mb-1 { margin-bottom: var(--espace-1); }
  .bur-mb-2 { margin-bottom: var(--espace-2); }
  .bur-mb-3 { margin-bottom: var(--espace-3); }
  .bur-mb-4 { margin-bottom: var(--espace-4); }
  .bur-mb-5 { margin-bottom: var(--espace-5); }
  .bur-mb-6 { margin-bottom: var(--espace-6); }
  .bur-mb-auto { margin-bottom: auto; }
  
  .bur-ml-0 { margin-left: var(--espace-0); }
  .bur-ml-1 { margin-left: var(--espace-1); }
  .bur-ml-2 { margin-left: var(--espace-2); }
  .bur-ml-3 { margin-left: var(--espace-3); }
  .bur-ml-4 { margin-left: var(--espace-4); }
  .bur-ml-5 { margin-left: var(--espace-5); }
  .bur-ml-6 { margin-left: var(--espace-6); }
  .bur-ml-auto { margin-left: auto; }
  
  .bur-mr-0 { margin-right: var(--espace-0); }
  .bur-mr-1 { margin-right: var(--espace-1); }
  .bur-mr-2 { margin-right: var(--espace-2); }
  .bur-mr-3 { margin-right: var(--espace-3); }
  .bur-mr-4 { margin-right: var(--espace-4); }
  .bur-mr-5 { margin-right: var(--espace-5); }
  .bur-mr-6 { margin-right: var(--espace-6); }
  .bur-mr-auto { margin-right: auto; }
  
  .bur-mx-0 { margin-left: var(--espace-0); margin-right: var(--espace-0); }
  .bur-mx-1 { margin-left: var(--espace-1); margin-right: var(--espace-1); }
  .bur-mx-2 { margin-left: var(--espace-2); margin-right: var(--espace-2); }
  .bur-mx-3 { margin-left: var(--espace-3); margin-right: var(--espace-3); }
  .bur-mx-4 { margin-left: var(--espace-4); margin-right: var(--espace-4); }
  .bur-mx-5 { margin-left: var(--espace-5); margin-right: var(--espace-5); }
  .bur-mx-6 { margin-left: var(--espace-6); margin-right: var(--espace-6); }
  .bur-mx-auto { margin-left: auto; margin-right: auto; }
  
  .bur-my-0 { margin-top: var(--espace-0); margin-bottom: var(--espace-0); }
  .bur-my-1 { margin-top: var(--espace-1); margin-bottom: var(--espace-1); }
  .bur-my-2 { margin-top: var(--espace-2); margin-bottom: var(--espace-2); }
  .bur-my-3 { margin-top: var(--espace-3); margin-bottom: var(--espace-3); }
  .bur-my-4 { margin-top: var(--espace-4); margin-bottom: var(--espace-4); }
  .bur-my-5 { margin-top: var(--espace-5); margin-bottom: var(--espace-5); }
  .bur-my-6 { margin-top: var(--espace-6); margin-bottom: var(--espace-6); }
  .bur-my-auto { margin-top: auto; margin-bottom: auto; }
  
  /* ---- PADDINGS ---- */
  .bur-p-0 { padding: var(--espace-0); }
  .bur-p-1 { padding: var(--espace-1); }
  .bur-p-2 { padding: var(--espace-2); }
  .bur-p-3 { padding: var(--espace-3); }
  .bur-p-4 { padding: var(--espace-4); }
  .bur-p-5 { padding: var(--espace-5); }
  .bur-p-6 { padding: var(--espace-6); }
  
  .bur-pt-0 { padding-top: var(--espace-0); }
  .bur-pt-1 { padding-top: var(--espace-1); }
  .bur-pt-2 { padding-top: var(--espace-2); }
  .bur-pt-3 { padding-top: var(--espace-3); }
  .bur-pt-4 { padding-top: var(--espace-4); }
  .bur-pt-5 { padding-top: var(--espace-5); }
  .bur-pt-6 { padding-top: var(--espace-6); }
  
  .bur-pb-0 { padding-bottom: var(--espace-0); }
  .bur-pb-1 { padding-bottom: var(--espace-1); }
  .bur-pb-2 { padding-bottom: var(--espace-2); }
  .bur-pb-3 { padding-bottom: var(--espace-3); }
  .bur-pb-4 { padding-bottom: var(--espace-4); }
  .bur-pb-5 { padding-bottom: var(--espace-5); }
  .bur-pb-6 { padding-bottom: var(--espace-6); }
  
  .bur-pl-0 { padding-left: var(--espace-0); }
  .bur-pl-1 { padding-left: var(--espace-1); }
  .bur-pl-2 { padding-left: var(--espace-2); }
  .bur-pl-3 { padding-left: var(--espace-3); }
  .bur-pl-4 { padding-left: var(--espace-4); }
  .bur-pl-5 { padding-left: var(--espace-5); }
  .bur-pl-6 { padding-left: var(--espace-6); }
  
  .bur-pr-0 { padding-right: var(--espace-0); }
  .bur-pr-1 { padding-right: var(--espace-1); }
  .bur-pr-2 { padding-right: var(--espace-2); }
  .bur-pr-3 { padding-right: var(--espace-3); }
  .bur-pr-4 { padding-right: var(--espace-4); }
  .bur-pr-5 { padding-right: var(--espace-5); }
  .bur-pr-6 { padding-right: var(--espace-6); }
  
  .bur-px-0 { padding-left: var(--espace-0); padding-right: var(--espace-0); }
  .bur-px-1 { padding-left: var(--espace-1); padding-right: var(--espace-1); }
  .bur-px-2 { padding-left: var(--espace-2); padding-right: var(--espace-2); }
  .bur-px-3 { padding-left: var(--espace-3); padding-right: var(--espace-3); }
  .bur-px-4 { padding-left: var(--espace-4); padding-right: var(--espace-4); }
  .bur-px-5 { padding-left: var(--espace-5); padding-right: var(--espace-5); }
  .bur-px-6 { padding-left: var(--espace-6); padding-right: var(--espace-6); }
  
  .bur-py-0 { padding-top: var(--espace-0); padding-bottom: var(--espace-0); }
  .bur-py-1 { padding-top: var(--espace-1); padding-bottom: var(--espace-1); }
  .bur-py-2 { padding-top: var(--espace-2); padding-bottom: var(--espace-2); }
  .bur-py-3 { padding-top: var(--espace-3); padding-bottom: var(--espace-3); }
  .bur-py-4 { padding-top: var(--espace-4); padding-bottom: var(--espace-4); }
  .bur-py-5 { padding-top: var(--espace-5); padding-bottom: var(--espace-5); }
  .bur-py-6 { padding-top: var(--espace-6); padding-bottom: var(--espace-6); }
  
  /* ---- TEXT ALIGN ---- */
  .bur-texte-gauche { text-align: left; }
  .bur-texte-centre { text-align: center; }
  .bur-texte-droite { text-align: right; }
  .bur-texte-justifie { text-align: justify; }
  
  /* ---- DIMENSIONS ---- */
  .bur-l-25 { width: 25%; }
  .bur-l-50 { width: 50%; }
  .bur-l-75 { width: 75%; }
  .bur-l-85 { width: 85%; }
  .bur-l-100 { width: 100%; }
  .bur-l-auto { width: auto; }
  
  /* ---- CONTENEUR ---- */
  .conteneur {
    padding-left: var(--espace-6);
    padding-right: var(--espace-6);
  }
}