/* 🌙 Mode sombre par défaut */
:root {
    --color-bg: #0d1117;
    --color-text: #f0f6fc;
    --color-muted: #8b949e;
    --color-border: #30363d;
  
    --color-primary: #4ca5ff;
    --color-primary-light: #77c3ff;
    --color-primary-dark: #2677b3;
  
    --color-secondary: #161b22;
    --color-secondary-light: #21262d;
    --color-secondary-dark: #0d1117;
  
    --color-accent: #f85149;
    --color-focus: #58a6ff;
    
    /* Couleurs pour le back office */
    --color-success: #28a745;
    --color-success-light: #34ce57;
    --color-success-dark: #1e7e34;
    
    --color-warning: #ffc107;
    --color-warning-light: #ffcd39;
    --color-warning-dark: #d39e00;
    
    --color-danger: #dc3545;
    --color-danger-light: #e4606d;
    --color-danger-dark: #bd2130;
    
    --color-info: #17a2b8;
    --color-info-light: #3dd5f3;
    --color-info-dark: #117a8b;

    --font-size-base: 1.6rem; /* 16px */
    --font-family-base: 'Inter', 'Segoe UI', sans-serif;
    
    /* Variables pour les couleurs de streamer (par défaut = couleurs du site) */
    --streamer-primary: var(--color-primary);
    --streamer-primary-light: var(--color-primary-light);
    --streamer-primary-dark: var(--color-primary-dark);
  }

  /* Mode clair forcé avec classe */
  body.light-theme {
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-muted: #777777;
    --color-border: #dcdcdc;

    --color-primary: #2A6FBD;
    --color-primary-light: #4e8ee0;
    --color-primary-dark: #1a4a87;

    --color-secondary: #d6e1ec;
    --color-secondary-light: #eef4f9;
    --color-secondary-dark: #b4c7d9;

    --color-accent: #FFCC00;
    --color-focus: #005fcc;
    
    /* Variables pour les couleurs de streamer en mode clair */
    --streamer-primary: var(--color-primary);
    --streamer-primary-light: var(--color-primary-light);
    --streamer-primary-dark: var(--color-primary-dark);
  }

  /* Mode sombre forcé avec classe */
  body.dark-theme {
    --color-bg: #0d1117;
    --color-text: #f0f6fc;
    --color-muted: #8b949e;
    --color-border: #30363d;

    --color-primary: #4ca5ff;
    --color-primary-light: #77c3ff;
    --color-primary-dark: #2677b3;

    --color-secondary: #161b22;
    --color-secondary-light: #21262d;
    --color-secondary-dark: #0d1117;

    --color-accent: #f85149;
    --color-focus: #58a6ff;
    
    /* Variables pour les couleurs de streamer en mode sombre */
    --streamer-primary: var(--color-primary);
    --streamer-primary-light: var(--color-primary-light);
    --streamer-primary-dark: var(--color-primary-dark);
  }
html {
  font-size: 62.5%; /* 1rem = 10px */
}

@media (min-width: 1921px) {
  html {
    font-size: 75%; /* 1rem = 12px */
  }
}

@media (min-width: 2561px) {
  html {
    font-size: 87.5%; /* 1rem = 14px */
  }
}

@media (min-width: 3841px) {
  html {
    font-size: 100%; /* 1rem = 16px */
  }
}

a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.section-padding {
  padding: 6rem 3rem;
}

@media (max-width: 767px) {
  .section-padding {
    padding: 3rem 1.5rem;
  }
}
.txt-white { color: #f2f2f2; }
.bg-white  { background-color: #f2f2f2; }
.border-white { border-color: #f2f2f2; }

  /* === TEXT COLORS === */
.txt-bg           { color: var(--color-bg); }
.txt-text         { color: var(--color-text); }
.txt-muted        { color: var(--color-muted); }
.txt-border       { color: var(--color-border); }

.txt-primary      { color: var(--color-primary); }
.txt-primary-light{ color: var(--color-primary-light); }
.txt-primary-dark { color: var(--color-primary-dark); }

.txt-secondary        { color: var(--color-secondary); }
.txt-secondary-light  { color: var(--color-secondary-light); }
.txt-secondary-dark   { color: var(--color-secondary-dark); }

.txt-accent       { color: var(--color-accent); }
.txt-focus        { color: var(--color-focus); }

/* === BACKGROUND COLORS === */
.bg-bg           { background: var(--color-bg); }
.bg-text         { background: var(--color-text); }
.bg-muted        { background: var(--color-muted); }
.bg-border       { background: var(--color-border); }

.bg-primary      { background: var(--color-primary); }
.bg-primary-light{ background: var(--color-primary-light); }
.bg-primary-dark { background: var(--color-primary-dark); }

.bg-secondary        { background: var(--color-secondary); }
.bg-secondary-light  { background: var(--color-secondary-light); }
.bg-secondary-dark   { background: var(--color-secondary-dark); }

.bg-accent       { background: var(--color-accent); }
.bg-focus        { background: var(--color-focus); }

/* === BORDER COLORS === */
.border-bg           { border-color: var(--color-bg); }
.border-text         { border-color: var(--color-text); }
.border-muted        { border-color: var(--color-muted); }
.border-border       { border-color: var(--color-border); }

.border-primary      { border-color: var(--color-primary); }
.border-primary-light{ border-color: var(--color-primary-light); }
.border-primary-dark { border-color: var(--color-primary-dark); }

.border-secondary        { border-color: var(--color-secondary); }
.border-secondary-light  { border-color: var(--color-secondary-light); }
.border-secondary-dark   { border-color: var(--color-secondary-dark); }

.border-accent       { border-color: var(--color-accent); }
.border-focus        { border-color: var(--color-focus); }

/* === HOVER BACKGROUND COLORS === */
.hover-bg-bg:hover                    { background: var(--color-bg); }
.hover-bg-text:hover                  { background: var(--color-text); }
.hover-bg-muted:hover                 { background: var(--color-muted); }
.hover-bg-border:hover                { background: var(--color-border); }

.hover-bg-primary:hover               { background: var(--color-primary); }
.hover-bg-primary-light:hover         { background: var(--color-primary-light); }
.hover-bg-primary-dark:hover          { background: var(--color-primary-dark); }

.hover-bg-secondary:hover             { background: var(--color-secondary); }
.hover-bg-secondary-light:hover       { background: var(--color-secondary-light); }
.hover-bg-secondary-dark:hover        { background: var(--color-secondary-dark); }

.hover-bg-accent:hover                { background: var(--color-accent); }
.hover-bg-focus:hover                 { background: var(--color-focus); }

/* === HOVER TEXT COLORS === */
.hover-txt-bg:hover                   { color: var(--color-bg); }
.hover-txt-text:hover                 { color: var(--color-text); }
.hover-txt-muted:hover                { color: var(--color-muted); }
.hover-txt-border:hover               { color: var(--color-border); }

.hover-txt-primary:hover              { color: var(--color-primary); }
.hover-txt-primary-light:hover        { color: var(--color-primary-light); }
.hover-txt-primary-dark:hover         { color: var(--color-primary-dark); }

.hover-txt-secondary:hover            { color: var(--color-secondary); }
.hover-txt-secondary-light:hover      { color: var(--color-secondary-light); }
.hover-txt-secondary-dark:hover       { color: var(--color-secondary-dark); }

.hover-txt-accent:hover               { color: var(--color-accent); }
.hover-txt-focus:hover                { color: var(--color-focus); }

/* === HOVER BORDER COLORS === */
.hover-border-bg:hover                { border-color: var(--color-bg); }
.hover-border-text:hover              { border-color: var(--color-text); }
.hover-border-muted:hover             { border-color: var(--color-muted); }
.hover-border-border:hover            { border-color: var(--color-border); }

.hover-border-primary:hover           { border-color: var(--color-primary); }
.hover-border-primary-light:hover     { border-color: var(--color-primary-light); }
.hover-border-primary-dark:hover      { border-color: var(--color-primary-dark); }

.hover-border-secondary:hover         { border-color: var(--color-secondary); }
.hover-border-secondary-light:hover   { border-color: var(--color-secondary-light); }
.hover-border-secondary-dark:hover    { border-color: var(--color-secondary-dark); }

.hover-border-accent:hover            { border-color: var(--color-accent); }
.hover-border-focus:hover             { border-color: var(--color-focus); }

  
  /* ========== FONT-SIZE + LINE-HEIGHT ========== */
  .fz-10 { font-size: 1rem; line-height: 1.3; }
  .fz-12 { font-size: 1.2rem; line-height: 1.3; }
  .fz-14 { font-size: 1.4rem; line-height: 1.4; }
  .fz-16 { font-size: 1.6rem; line-height: 1.4; }
  .fz-18 { font-size: 1.8rem; line-height: 1.4; }
  .fz-20 { font-size: 2rem; line-height: 1.3; }
  .fz-22 { font-size: 2.2rem; line-height: 1.3; }
  .fz-24 { font-size: 2.4rem; line-height: 1.2; }
  .fz-26 { font-size: 2.6rem; line-height: 1.2; }
  .fz-28 { font-size: 2.8rem; line-height: 1.2; }
  .fz-30 { font-size: 3rem; line-height: 1.1; }
  
  .fz-34 { font-size: 3.4rem; line-height: 1.1; }
  .fz-38 { font-size: 3.8rem; line-height: 1.1; }
  .fz-42 { font-size: 4.2rem; line-height: 1.1; }
  .fz-46 { font-size: 4.6rem; line-height: 1.1; }
  .fz-50 { font-size: 5rem; line-height: 1.1; }
  .fz-54 { font-size: 5.4rem; line-height: 1.1; }
  .fz-58 { font-size: 5.8rem; line-height: 1.1; }
  .fz-60 { font-size: 6rem; line-height: 1.1; }
  
/* ========== PADDING TOP ========== */
.pt-0 { padding-top: 0; }
.pt-2 { padding-top: 0.2rem; }   /* 2px */
.pt-4 { padding-top: 0.4rem; }   /* 4px */
.pt-6 { padding-top: 0.6rem; }   /* 6px */
.pt-8 { padding-top: 0.8rem; }   /* 8px */
.pt-10 { padding-top: 1rem; }    /* 10px */
.pt-12 { padding-top: 1.2rem; }  /* 12px */
.pt-14 { padding-top: 1.4rem; }  /* 14px */
.pt-16 { padding-top: 1.6rem; }  /* 16px */
.pt-18 { padding-top: 1.8rem; }  /* 18px */
.pt-20 { padding-top: 2rem; }    /* 20px */
.pt-24 { padding-top: 2.4rem; }  /* 24px */
.pt-28 { padding-top: 2.8rem; }  /* 28px */
.pt-32 { padding-top: 3.2rem; }  /* 32px */
.pt-36 { padding-top: 3.6rem; }  /* 36px */
.pt-40 { padding-top: 4rem; }    /* 40px */
.pt-44 { padding-top: 4.4rem; }  /* 44px */
.pt-48 { padding-top: 4.8rem; }  /* 48px */
.pt-52 { padding-top: 5.2rem; }  /* 52px */
.pt-56 { padding-top: 5.6rem; }  /* 56px */
.pt-60 { padding-top: 6rem; }    /* 60px */
.pt-70 { padding-top: 7rem; }    /* 70px */
.pt-80 { padding-top: 8rem; }    /* 80px */
.pt-90 { padding-top: 9rem; }    /* 90px */
.pt-100 { padding-top: 10rem; }    /* 100px */
.pt-110 { padding-top: 11rem; }    /* 110px */
.pt-120 { padding-top: 12rem; }    /* 120px */

/* ========== PADDING BOTTOM ========== */
.pb-0 { padding-bottom: 0; }
.pb-2 { padding-bottom: 0.2rem; }   /* 2px */
.pb-4 { padding-bottom: 0.4rem; }   /* 4px */
.pb-6 { padding-bottom: 0.6rem; }   /* 6px */
.pb-8 { padding-bottom: 0.8rem; }   /* 8px */
.pb-10 { padding-bottom: 1rem; }    /* 10px */
.pb-12 { padding-bottom: 1.2rem; }  /* 12px */
.pb-14 { padding-bottom: 1.4rem; }  /* 14px */
.pb-16 { padding-bottom: 1.6rem; }  /* 16px */
.pb-18 { padding-bottom: 1.8rem; }  /* 18px */
.pb-20 { padding-bottom: 2rem; }    /* 20px */
.pb-24 { padding-bottom: 2.4rem; }  /* 24px */
.pb-28 { padding-bottom: 2.8rem; }  /* 28px */
.pb-32 { padding-bottom: 3.2rem; }  /* 32px */
.pb-36 { padding-bottom: 3.6rem; }  /* 36px */
.pb-40 { padding-bottom: 4rem; }    /* 40px */
.pb-44 { padding-bottom: 4.4rem; }  /* 44px */
.pb-48 { padding-bottom: 4.8rem; }  /* 48px */
.pb-52 { padding-bottom: 5.2rem; }  /* 52px */
.pb-56 { padding-bottom: 5.6rem; }  /* 56px */
.pb-60 { padding-bottom: 6rem; }    /* 60px */

/* ========== PADDING LEFT ========== */
.pl-0 { padding-left: 0; }
.pl-2 { padding-left: 0.2rem; }   /* 2px */
.pl-4 { padding-left: 0.4rem; }   /* 4px */
.pl-6 { padding-left: 0.6rem; }   /* 6px */
.pl-8 { padding-left: 0.8rem; }   /* 8px */
.pl-10 { padding-left: 1rem; }    /* 10px */
.pl-12 { padding-left: 1.2rem; }  /* 12px */
.pl-14 { padding-left: 1.4rem; }  /* 14px */
.pl-16 { padding-left: 1.6rem; }  /* 16px */
.pl-18 { padding-left: 1.8rem; }  /* 18px */
.pl-20 { padding-left: 2rem; }    /* 20px */
.pl-24 { padding-left: 2.4rem; }  /* 24px */
.pl-28 { padding-left: 2.8rem; }  /* 28px */
.pl-32 { padding-left: 3.2rem; }  /* 32px */
.pl-36 { padding-left: 3.6rem; }  /* 36px */
.pl-40 { padding-left: 4rem; }    /* 40px */
.pl-44 { padding-left: 4.4rem; }  /* 44px */
.pl-48 { padding-left: 4.8rem; }  /* 48px */
.pl-52 { padding-left: 5.2rem; }  /* 52px */
.pl-56 { padding-left: 5.6rem; }  /* 56px */
.pl-60 { padding-left: 6rem; }    /* 60px */

/* ========== PADDING RIGHT ========== */
.pr-0 { padding-right: 0; }
.pr-2 { padding-right: 0.2rem; }   /* 2px */
.pr-4 { padding-right: 0.4rem; }   /* 4px */
.pr-6 { padding-right: 0.6rem; }   /* 6px */
.pr-8 { padding-right: 0.8rem; }   /* 8px */
.pr-10 { padding-right: 1rem; }    /* 10px */
.pr-12 { padding-right: 1.2rem; }  /* 12px */
.pr-14 { padding-right: 1.4rem; }  /* 14px */
.pr-16 { padding-right: 1.6rem; }  /* 16px */
.pr-18 { padding-right: 1.8rem; }  /* 18px */
.pr-20 { padding-right: 2rem; }    /* 20px */
.pr-24 { padding-right: 2.4rem; }  /* 24px */
.pr-28 { padding-right: 2.8rem; }  /* 28px */
.pr-32 { padding-right: 3.2rem; }  /* 32px */
.pr-36 { padding-right: 3.6rem; }  /* 36px */
.pr-40 { padding-right: 4rem; }    /* 40px */
.pr-44 { padding-right: 4.4rem; }  /* 44px */
.pr-48 { padding-right: 4.8rem; }  /* 48px */
.pr-52 { padding-right: 5.2rem; }  /* 52px */
.pr-56 { padding-right: 5.6rem; }  /* 56px */
.pr-60 { padding-right: 6rem; }    /* 60px */

/* ========== margin TOP ========== */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 0.2rem; }   /* 2px */
.mt-4 { margin-top: 0.4rem; }   /* 4px */
.mt-6 { margin-top: 0.6rem; }   /* 6px */
.mt-8 { margin-top: 0.8rem; }   /* 8px */
.mt-10 { margin-top: 1rem; }    /* 10px */
.mt-12 { margin-top: 1.2rem; }  /* 12px */
.mt-14 { margin-top: 1.4rem; }  /* 14px */
.mt-16 { margin-top: 1.6rem; }  /* 16px */
.mt-18 { margin-top: 1.8rem; }  /* 18px */
.mt-20 { margin-top: 2rem; }    /* 20px */
.mt-24 { margin-top: 2.4rem; }  /* 24px */
.mt-28 { margin-top: 2.8rem; }  /* 28px */
.mt-32 { margin-top: 3.2rem; }  /* 32px */
.mt-36 { margin-top: 3.6rem; }  /* 36px */
.mt-40 { margin-top: 4rem; }    /* 40px */
.mt-44 { margin-top: 4.4rem; }  /* 44px */
.mt-48 { margin-top: 4.8rem; }  /* 48px */
.mt-52 { margin-top: 5.2rem; }  /* 52px */
.mt-56 { margin-top: 5.6rem; }  /* 56px */
.mt-60 { margin-top: 6rem; }    /* 60px */

/* ========== margin BOTTOM ========== */
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.2rem; }   /* 2px */
.mb-4 { margin-bottom: 0.4rem; }   /* 4px */
.mb-6 { margin-bottom: 0.6rem; }   /* 6px */
.mb-8 { margin-bottom: 0.8rem; }   /* 8px */
.mb-10 { margin-bottom: 1rem; }    /* 10px */
.mb-12 { margin-bottom: 1.2rem; }  /* 12px */
.mb-14 { margin-bottom: 1.4rem; }  /* 14px */
.mb-16 { margin-bottom: 1.6rem; }  /* 16px */
.mb-18 { margin-bottom: 1.8rem; }  /* 18px */
.mb-20 { margin-bottom: 2rem; }    /* 20px */
.mb-24 { margin-bottom: 2.4rem; }  /* 24px */
.mb-28 { margin-bottom: 2.8rem; }  /* 28px */
.mb-32 { margin-bottom: 3.2rem; }  /* 32px */
.mb-36 { margin-bottom: 3.6rem; }  /* 36px */
.mb-40 { margin-bottom: 4rem; }    /* 40px */
.mb-44 { margin-bottom: 4.4rem; }  /* 44px */
.mb-48 { margin-bottom: 4.8rem; }  /* 48px */
.mb-52 { margin-bottom: 5.2rem; }  /* 52px */
.mb-56 { margin-bottom: 5.6rem; }  /* 56px */
.mb-60 { margin-bottom: 6rem; }    /* 60px */

/* ========== margin LEFT ========== */
.ml-0 { margin-left: 0; }
.ml-2 { margin-left: 0.2rem; }   /* 2px */
.ml-4 { margin-left: 0.4rem; }   /* 4px */
.ml-6 { margin-left: 0.6rem; }   /* 6px */
.ml-8 { margin-left: 0.8rem; }   /* 8px */
.ml-10 { margin-left: 1rem; }    /* 10px */
.ml-12 { margin-left: 1.2rem; }  /* 12px */
.ml-14 { margin-left: 1.4rem; }  /* 14px */
.ml-16 { margin-left: 1.6rem; }  /* 16px */
.ml-18 { margin-left: 1.8rem; }  /* 18px */
.ml-20 { margin-left: 2rem; }    /* 20px */
.ml-24 { margin-left: 2.4rem; }  /* 24px */
.ml-28 { margin-left: 2.8rem; }  /* 28px */
.ml-32 { margin-left: 3.2rem; }  /* 32px */
.ml-36 { margin-left: 3.6rem; }  /* 36px */
.ml-40 { margin-left: 4rem; }    /* 40px */
.ml-44 { margin-left: 4.4rem; }  /* 44px */
.ml-48 { margin-left: 4.8rem; }  /* 48px */
.ml-52 { margin-left: 5.2rem; }  /* 52px */
.ml-56 { margin-left: 5.6rem; }  /* 56px */
.ml-60 { margin-left: 6rem; }    /* 60px */

/* ========== margin RIGHT ========== */
.mr-0 { margin-right: 0; }
.mr-2 { margin-right: 0.2rem; }   /* 2px */
.mr-4 { margin-right: 0.4rem; }   /* 4px */
.mr-6 { margin-right: 0.6rem; }   /* 6px */
.mr-8 { margin-right: 0.8rem; }   /* 8px */
.mr-10 { margin-right: 1rem; }    /* 10px */
.mr-12 { margin-right: 1.2rem; }  /* 12px */
.mr-14 { margin-right: 1.4rem; }  /* 14px */
.mr-16 { margin-right: 1.6rem; }  /* 16px */
.mr-18 { margin-right: 1.8rem; }  /* 18px */
.mr-20 { margin-right: 2rem; }    /* 20px */
.mr-24 { margin-right: 2.4rem; }  /* 24px */
.mr-28 { margin-right: 2.8rem; }  /* 28px */
.mr-32 { margin-right: 3.2rem; }  /* 32px */
.mr-36 { margin-right: 3.6rem; }  /* 36px */
.mr-40 { margin-right: 4rem; }    /* 40px */
.mr-44 { margin-right: 4.4rem; }  /* 44px */
.mr-48 { margin-right: 4.8rem; }  /* 48px */
.mr-52 { margin-right: 5.2rem; }  /* 52px */
.mr-56 { margin-right: 5.6rem; }  /* 56px */
.mr-60 { margin-right: 6rem; }    /* 60px */

/* ========== WIDTH ========== */
.w-4  { width: 0.4rem; }
.w-8  { width: 0.8rem; }
.w-12 { width: 1.2rem; }
.w-16 { width: 1.6rem; }
.w-20 { width: 2rem; }
.w-24 { width: 2.4rem; }
.w-32 { width: 3.2rem; }
.w-40 { width: 4rem; }
.w-44 { width: 4.4rem; }
.w-48 { width: 4.8rem; }
.w-60 { width: 6rem; }
.w-80 { width: 8rem; }
.w-100 { width: 10rem; }
.w-200 { width: 20rem; }
.w-300 { width: 30rem; }
.w-400 { width: 40rem; }
.w-auto { width: auto; }

/* ========== WIDTH PERCENTAGES ========== */
.w-p10  { width: 10%; }
.w-p20  { width: 20%; }
.w-p25  { width: 25%; }
.w-p30  { width: 30%; }
.w-p40  { width: 40%; }
.w-p50  { width: 50%; }
.w-p60  { width: 60%; }
.w-p70  { width: 70%; }
.w-p75  { width: 75%; }
.w-p80  { width: 80%; }
.w-p90  { width: 90%; }
.w-p100 { width: 100%; }

/* ========== MAX WIDTH PERCENTAGES ========== */

.max-w-p10  { max-width: 10%; }
.max-w-p20  { max-width: 20%; }
.max-w-p25  { max-width: 25%; }
.max-w-p30  { max-width: 30%; }
.max-w-p40  { max-width: 40%; }
.max-w-p50  { max-width: 50%; }
.max-w-p60  { max-width: 60%; }
.max-w-p70  { max-width: 70%; }
.max-w-p75  { max-width: 75%; }
.max-w-p80  { max-width: 80%; }
.max-w-p90  { max-width: 90%; }
.max-w-p100 { max-width: 100%; }

/* ========== HEIGHT ========== */
.h-4  { height: 0.4rem; }
.h-8  { height: 0.8rem; }
.h-12 { height: 1.2rem; }
.h-16 { height: 1.6rem; }
.h-20 { height: 2rem; }
.h-24 { height: 2.4rem; }
.h-32 { height: 3.2rem; }
.h-40 { height: 4rem; }
.h-44 { height: 4.4rem; }
.h-46 { height: 4.6rem; }
.h-48 { height: 4.8rem; }
.h-50 { height: 5rem; }
.h-60 { height: 6rem; }
.h-80 { height: 8rem; }
.h-100 { height: 10rem; }
.h-auto { height: auto; }

/* ========== HEIGHT ========== */
.min-h-4  { min-height: 0.4rem; }
.min-h-8  { min-height: 0.8rem; }
.min-h-12 { min-height: 1.2rem; }
.min-h-16 { min-height: 1.6rem; }
.min-h-20 { min-height: 2rem; }
.min-h-24 { min-height: 2.4rem; }
.min-h-32 { min-height: 3.2rem; }
.min-h-40 { min-height: 4rem; }
.min-h-44 { min-height: 4.4rem; }
.min-h-46 { min-height: 4.6rem; }
.min-h-48 { min-height: 4.8rem; }
.min-h-50 { min-height: 5rem; }
.min-h-60 { min-height: 6rem; }
.min-h-80 { min-height: 8rem; }
.min-h-100 { min-height: 10rem; }

.p-0   { padding: 0; }
.p-2   { padding: 0.2rem; }
.p-4   { padding: 0.4rem; }
.p-6   { padding: 0.6rem; }
.p-8   { padding: 0.8rem; }
.p-10  { padding: 1rem; }
.p-12  { padding: 1.2rem; }
.p-14  { padding: 1.4rem; }
.p-16  { padding: 1.6rem; }
.p-18  { padding: 1.8rem; }
.p-20  { padding: 2rem; }
.p-24  { padding: 2.4rem; }
.p-28  { padding: 2.8rem; }
.p-32  { padding: 3.2rem; }
.p-36  { padding: 3.6rem; }
.p-40  { padding: 4rem; }
.p-48  { padding: 4.8rem; }
.p-60  { padding: 6rem; }
.p-80  { padding: 8rem; }


/* ========== GAP UTILITIES ========== */
.gap-0  { gap: 0; }
.gap-4  { gap: 0.4rem; }
.gap-8  { gap: 0.8rem; }
.gap-12 { gap: 1.2rem; }
.gap-16 { gap: 1.6rem; }
.gap-20 { gap: 2rem; }
.gap-24 { gap: 2.4rem; }
.gap-28 { gap: 2.8rem; }
.gap-32 { gap: 3.2rem; }
.gap-36 { gap: 3.6rem; }
.gap-40 { gap: 4rem; }

.left-0 { left: 0; }
/* ========== BORDER RADIUS (arrondis) ========== */
.rounded-0   { border-radius: 0; }
.rounded-2   { border-radius: 0.2rem; }
.rounded-4   { border-radius: 0.4rem; }
.rounded-6   { border-radius: 0.6rem; }
.rounded-8   { border-radius: 0.8rem; }
.rounded-10  { border-radius: 1rem; }
.rounded-12  { border-radius: 1.2rem; }
.rounded-16  { border-radius: 1.6rem; }
.rounded-20  { border-radius: 2rem; }
.rounded-30  { border-radius: 3rem; }
.rounded-40  { border-radius: 4rem; }
.rounded-50  { border-radius: 5rem; }
.rounded-full { border-radius: 9999rem; } /* Pour les cercles */

/* ========== FONT WEIGHT (valeurs nettes + raccourcis) ========== */
.fw-300 { font-weight: 300; } /* Light */
.fw-400 { font-weight: 400; } /* Normal */
.fw-500 { font-weight: 500; } /* Medium */
.fw-600 { font-weight: 600; } /* Semi-bold */
.fw-700 { font-weight: 700; } /* Bold */
.fw-800 { font-weight: 800; } /* Extra-bold */

.fw-normal { font-weight: 400; }
.fw-bold   { font-weight: 700; }
.overflow-hidden { overflow: hidden; }
.txt-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.txt-shadow-muted { text-shadow: 0 0.1rem 0.3rem var(--color-muted); }
.txt-shadow-hover-primary:hover { text-shadow: 0 0.1rem 0.3rem var(--color-primary); }
.text-shadow-black { text-shadow: 0 0.1rem 0.3rem #080808; }
.txt-none { text-decoration: none; }
.transition-color { transition: color 0.3s; }
.transition-bg { transition: background 0.3s; }

.ls-tight { letter-spacing: -0.04rem; }
.ls-normal { letter-spacing: 0; }

/* ========== FONT STYLE ========== */
.italic      { font-style: italic; }
.not-italic  { font-style: normal; }


/* ========== DISPLAY ========== */
.d-none   { display: none; }
.d-block  { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

.d-flex   { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-flex-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* pour un scroll fluide sur iOS */
  }

/* ========== FLEX DIRECTION ========== */
.flex-row     { flex-direction: row; }
.flex-column  { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-row-reverse { flex-direction: row-reverse; }

/* ========== FLEX ALIGNEMENT ========== */
.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.items-stretch   { align-items: stretch; }

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

/* ========== TEXT ALIGNEMENT ========== */
.txt-left    { text-align: left; }
.txt-center  { text-align: center; }
.txt-right   { text-align: right; }

/* ========== POSITION ========== */
.position-static   { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed    { position: fixed; }
.position-sticky   { position: sticky; }

.mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  

  /* ✅ UTILITAIRES DE POSITION & ALIGNEMENT + Effets de liens (underline animé) */

.link-underline-hover::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--color-primary-light);
  transition: width 0.3s ease-in-out;
}
.link-underline-hover:hover::after {
  width: 100%;
}

.btn-1 {
  padding: 0.8rem 1.6rem;
  border-radius: 0.8rem;
  font-size: 1.8rem;
  font-weight: 600;
  background: var(--color-secondary-light);
  color: var(--color-text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.3s;
}

.btn-1:hover {
  background: var(--color-primary);
}
.btn-2 {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  font-size: 1.8rem;
  padding: 0.8rem 1.6rem;
  border-radius: 0.8rem;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-2:hover {
  background: #fff;
  color: #000;
}

/**
 * reveal.css – Effets d’entrée progressifs
 * À combiner avec le script IntersectionObserver
 * HTML : class="reveal slide-up" / class="reveal fade-in" etc.
 * JS ajoute automatiquement .in-view à l’affichage
 */

/* Base : le script observe .reveal, mais aucun style ici */
/* .reveal {
}
 */