/* ============================================================
   02 — UTILITIES
   Classes utilitaires basées sur les Design Tokens
   ============================================================ */

/* ==========================================================
   1. TYPOGRAPHY
   ========================================================== */
.text-3xl, .text-3xl :is(h1,h2,h3,h4,h5,h6,p,span,a,li) {
  font-size: var(--fs-3xl) !important;
  line-height: 1.1 !important;
}
.text-2xl, .text-2xl :is(h1,h2,h3,h4,h5,h6,p,span,a,li) {
  font-size: var(--fs-2xl) !important;
  line-height: 1.15 !important;
}
.text-xl, .text-xl :is(h1,h2,h3,h4,h5,h6,p,span,a,li) {
  font-size: var(--fs-xl) !important;
  line-height: 1.2 !important;
}
.text-l, .text-l :is(h1,h2,h3,h4,h5,h6,p,span,a,li) {
  font-size: var(--fs-l) !important;
  line-height: 1.2 !important;
}
.text-m, .text-m :is(h1,h2,h3,h4,h5,h6,p,span,a,li) {
  font-size: var(--fs-m) !important;
  line-height: 1.3 !important;
}
.text-s, .text-s :is(h1,h2,h3,h4,h5,h6,p,span,a,li) {
  font-size: var(--fs-s) !important;
  line-height: 1.4 !important;
}
.text-sm, .text-sm :is(h1,h2,h3,h4,h5,h6,p,span,a,li) {
  font-size: var(--fs-sm) !important;
  line-height: 1.4 !important;
}
.text-xs, .text-xs :is(h1,h2,h3,h4,h5,h6,p,span,a,li) {
  font-size: var(--fs-xs) !important;
  line-height: 1.4 !important;
}

/* ==========================================================
   2. SECTIONS
   ========================================================== */
:is(.section-2xl, .section-xl, .section-l, .section-m, .section-s, .section-xs, .section-2xs, .section-3xs) {
  padding-left: var(--section-padding-x) !important;
  padding-right: var(--section-padding-x) !important;
}
.section-2xl { padding-block: var(--section-2xl) !important; }
.section-xl  { padding-block: var(--section-xl) !important; }
.section-l   { padding-block: var(--section-l) !important; }
.section-m   { padding-block: var(--section-m) !important; }
.section-s   { padding-block: var(--section-s) !important; }
.section-xs  { padding-block: var(--section-xs) !important; }
.section-2xs { padding-block: var(--section-2xs) !important; }
.section-3xs { padding-block: var(--section-3xs) !important; }

.section-hero { min-height: 100vh !important; }
.section-hero .e-con-inner { justify-content: center !important; }
.section-narrow .e-con-inner { max-width: 1000px !important; }
.section-narrow-xs .e-con-inner { max-width: 720px !important; }
.section-offset { padding-top: calc(80px + var(--section-l)) !important; }

/* ==========================================================
   3. GAPS
   ========================================================== */
.gap-3xl, .gap-3xl .e-con-inner { gap: var(--spacing-3xl) !important; }
.gap-2xl, .gap-2xl .e-con-inner { gap: var(--spacing-2xl) !important; }
.gap-xl,  .gap-xl  .e-con-inner { gap: var(--spacing-xl) !important; }
.gap-l,   .gap-l   .e-con-inner { gap: var(--spacing-l) !important; }
.gap-m,   .gap-m   .e-con-inner { gap: var(--spacing-m) !important; }
.gap-s,   .gap-s   .e-con-inner { gap: var(--spacing-s) !important; }
.gap-xs,  .gap-xs  .e-con-inner { gap: var(--spacing-xs) !important; }
.gap-2xs, .gap-2xs .e-con-inner { gap: var(--spacing-2xs) !important; }
.gap-3xs, .gap-3xs .e-con-inner { gap: var(--spacing-3xs) !important; }
.gap-0,   .gap-0   .e-con-inner { gap: 0 !important; }

/* ==========================================================
   4. MARGINS
   ========================================================== */
.mb-3xl { margin-bottom: var(--spacing-3xl) !important; }
.mb-2xl { margin-bottom: var(--spacing-2xl) !important; }
.mb-xl  { margin-bottom: var(--spacing-xl) !important; }
.mb-l   { margin-bottom: var(--spacing-l) !important; }
.mb-m   { margin-bottom: var(--spacing-m) !important; }
.mb-s   { margin-bottom: var(--spacing-s) !important; }
.mb-xs  { margin-bottom: var(--spacing-xs) !important; }
.mb-2xs { margin-bottom: var(--spacing-2xs) !important; }
.mb-3xs { margin-bottom: var(--spacing-3xs) !important; }
.mb-0   { margin-bottom: 0 !important; }

.mt-3xl { margin-top: var(--spacing-3xl) !important; }
.mt-2xl { margin-top: var(--spacing-2xl) !important; }
.mt-xl  { margin-top: var(--spacing-xl) !important; }
.mt-l   { margin-top: var(--spacing-l) !important; }
.mt-m   { margin-top: var(--spacing-m) !important; }
.mt-s   { margin-top: var(--spacing-s) !important; }
.mt-xs  { margin-top: var(--spacing-xs) !important; }
.mt-2xs { margin-top: var(--spacing-2xs) !important; }
.mt-3xs { margin-top: var(--spacing-3xs) !important; }
.mt-0   { margin-top: 0 !important; }

.mx-auto { margin-inline: auto !important; }
.mx-0    { margin-inline: 0 !important; }

/* ==========================================================
   5. PADDINGS
   ========================================================== */
.p-3xl { padding: var(--spacing-3xl) !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }
.p-xl  { padding: var(--spacing-xl) !important; }
.p-l   { padding: var(--spacing-l) !important; }
.p-m   { padding: var(--spacing-m) !important; }
.p-s   { padding: var(--spacing-s) !important; }
.p-xs  { padding: var(--spacing-xs) !important; }
.p-2xs { padding: var(--spacing-2xs) !important; }
.p-3xs { padding: var(--spacing-3xs) !important; }
.p-0   { padding: 0 !important; }

.py-3xl { padding-block: var(--spacing-3xl) !important; }
.py-2xl { padding-block: var(--spacing-2xl) !important; }
.py-xl  { padding-block: var(--spacing-xl) !important; }
.py-l   { padding-block: var(--spacing-l) !important; }
.py-m   { padding-block: var(--spacing-m) !important; }
.py-s   { padding-block: var(--spacing-s) !important; }
.py-xs  { padding-block: var(--spacing-xs) !important; }
.py-2xs { padding-block: var(--spacing-2xs) !important; }
.py-3xs { padding-block: var(--spacing-3xs) !important; }
.py-0   { padding-block: 0 !important; }

.px-3xl { padding-inline: var(--spacing-3xl) !important; }
.px-2xl { padding-inline: var(--spacing-2xl) !important; }
.px-xl  { padding-inline: var(--spacing-xl) !important; }
.px-l   { padding-inline: var(--spacing-l) !important; }
.px-m   { padding-inline: var(--spacing-m) !important; }
.px-s   { padding-inline: var(--spacing-s) !important; }
.px-xs  { padding-inline: var(--spacing-xs) !important; }
.px-2xs { padding-inline: var(--spacing-2xs) !important; }
.px-3xs { padding-inline: var(--spacing-3xs) !important; }
.px-0   { padding-inline: 0 !important; }

.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }

/* ==========================================================
   6. BORDER RADIUS
   ========================================================== */
.radius-3xl  { border-radius: var(--radius-3xl) !important; }
.radius-2xl  { border-radius: var(--radius-2xl) !important; }
.radius-xl   { border-radius: var(--radius-xl) !important; }
.radius-l    { border-radius: var(--radius-l) !important; }
.radius-m    { border-radius: var(--radius-m) !important; }
.radius-s    { border-radius: var(--radius-s) !important; }
.radius-xs   { border-radius: var(--radius-xs) !important; }
.radius-full { border-radius: var(--radius-full) !important; }
.radius-none { border-radius: var(--radius-none) !important; }

.radius-t-3xl { border-radius: var(--radius-3xl) var(--radius-3xl) 0 0 !important; }
.radius-t-2xl { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important; }
.radius-t-xl  { border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important; }
.radius-t-l   { border-radius: var(--radius-l) var(--radius-l) 0 0 !important; }
.radius-t-m   { border-radius: var(--radius-m) var(--radius-m) 0 0 !important; }
.radius-t-s   { border-radius: var(--radius-s) var(--radius-s) 0 0 !important; }

.radius-b-3xl { border-radius: 0 0 var(--radius-3xl) var(--radius-3xl) !important; }
.radius-b-2xl { border-radius: 0 0 var(--radius-2xl) var(--radius-2xl) !important; }
.radius-b-xl  { border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important; }
.radius-b-l   { border-radius: 0 0 var(--radius-l) var(--radius-l) !important; }
.radius-b-m   { border-radius: 0 0 var(--radius-m) var(--radius-m) !important; }
.radius-b-s   { border-radius: 0 0 var(--radius-s) var(--radius-s) !important; }

/* ==========================================================
   7. TEXT COLORS
   ========================================================== */
.text-teal-900, .text-teal-900 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-teal-900) !important; }
.text-teal-800, .text-teal-800 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-teal-800) !important; }
.text-teal-700, .text-teal-700 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-teal-700) !important; }
.text-teal-600, .text-teal-600 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-teal-600) !important; }
.text-teal-500, .text-teal-500 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-teal-500) !important; }
.text-teal-400, .text-teal-400 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-teal-400) !important; }
.text-teal-300, .text-teal-300 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-teal-300) !important; }
.text-teal,     .text-teal     :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-teal-500) !important; }

.text-coral-700, .text-coral-700 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-coral-700) !important; }
.text-coral-600, .text-coral-600 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-coral-600) !important; }
.text-coral-500, .text-coral-500 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-coral-500) !important; }
.text-coral,     .text-coral     :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-coral-500) !important; }

.text-yellow-700, .text-yellow-700 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-yellow-700) !important; }
.text-yellow-600, .text-yellow-600 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-yellow-600) !important; }
.text-yellow-500, .text-yellow-500 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-yellow-500) !important; }
.text-yellow-400, .text-yellow-400 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-yellow-400) !important; }
.text-yellow,     .text-yellow     :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-yellow-500) !important; }

.text-orange-600, .text-orange-600 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-orange-600) !important; }
.text-orange-500, .text-orange-500 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-orange-500) !important; }
.text-orange,     .text-orange     :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-orange-500) !important; }

.text-dark-900, .text-dark-900 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-dark-900) !important; }
.text-dark-800, .text-dark-800 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-dark-800) !important; }
.text-dark,     .text-dark     :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-dark-900) !important; }

.text-beige-100, .text-beige-100 :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-beige-100) !important; }
.text-beige-50,  .text-beige-50  :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-beige-50) !important; }
.text-beige-25,  .text-beige-25  :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-beige-25) !important; }
.text-beige,     .text-beige     :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-beige-25) !important; }

.text-white, .text-white :is(h1,h2,h3,h4,h5,h6,p,span,a,.elementor-heading-title) { color: var(--color-white) !important; }

/* ==========================================================
   8. BACKGROUND COLORS
   ========================================================== */
.bg-teal-900 { background-color: var(--color-teal-900) !important; }
.bg-teal-800 { background-color: var(--color-teal-800) !important; }
.bg-teal-700 { background-color: var(--color-teal-700) !important; }
.bg-teal-600 { background-color: var(--color-teal-600) !important; }
.bg-teal-500 { background-color: var(--color-teal-500) !important; }
.bg-teal-400 { background-color: var(--color-teal-400) !important; }
.bg-teal-300 { background-color: var(--color-teal-300) !important; }
.bg-teal     { background-color: var(--color-teal-500) !important; }

.bg-coral-700 { background-color: var(--color-coral-700) !important; }
.bg-coral-600 { background-color: var(--color-coral-600) !important; }
.bg-coral-500 { background-color: var(--color-coral-500) !important; }
.bg-coral     { background-color: var(--color-coral-500) !important; }

.bg-yellow-700 { background-color: var(--color-yellow-700) !important; }
.bg-yellow-600 { background-color: var(--color-yellow-600) !important; }
.bg-yellow-500 { background-color: var(--color-yellow-500) !important; }
.bg-yellow-400 { background-color: var(--color-yellow-400) !important; }
.bg-yellow     { background-color: var(--color-yellow-500) !important; }

.bg-orange-600 { background-color: var(--color-orange-600) !important; }
.bg-orange-500 { background-color: var(--color-orange-500) !important; }
.bg-orange     { background-color: var(--color-orange-500) !important; }

.bg-dark-900 { background-color: var(--color-dark-900) !important; }
.bg-dark-800 { background-color: var(--color-dark-800) !important; }
.bg-dark     { background-color: var(--color-dark-900) !important; }

.bg-beige-100 { background-color: var(--color-beige-100) !important; }
.bg-beige-50  { background-color: var(--color-beige-50) !important; }
.bg-beige-25  { background-color: var(--color-beige-25) !important; }
.bg-beige     { background-color: var(--color-beige-25) !important; }

.bg-white       { background-color: var(--color-white) !important; }
.bg-transparent { background-color: transparent !important; }

/* ==========================================================
   9. SHADOWS
   ========================================================== */
.shadow-xl   { box-shadow: var(--shadow-xl) !important; }
.shadow-l    { box-shadow: var(--shadow-l) !important; }
.shadow-m    { box-shadow: var(--shadow-m) !important; }
.shadow-s    { box-shadow: var(--shadow-s) !important; }
.shadow-dark-xl { box-shadow: var(--shadow-dark-xl) !important; }
.shadow-dark-l  { box-shadow: var(--shadow-dark-l) !important; }
.shadow-dark-m  { box-shadow: var(--shadow-dark-m) !important; }
.shadow-none { box-shadow: none !important; }

/* ==========================================================
   10. DISPLAY & VISIBILITY
   ========================================================== */
.hidden { display: none !important; }

@media (min-width: 1025px) { .no-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .no-tablet { display: none !important; } }
@media (max-width: 767px) { .no-mobile { display: none !important; } }

.desktop-only { display: none !important; }
@media (min-width: 1025px) { .desktop-only { display: block !important; } }

.tablet-only { display: none !important; }
@media (min-width: 768px) and (max-width: 1024px) { .tablet-only { display: block !important; } }

.mobile-only { display: none !important; }
@media (max-width: 767px) { .mobile-only { display: block !important; } }

/* ==========================================================
   11. CONTENT WIDTHS
   ========================================================== */
.content-narrow { max-width: var(--content-narrow) !important; }
.content-medium { max-width: var(--content-medium) !important; }
.content-wide   { max-width: var(--content-wide) !important; }

/* ==========================================================
   12. ASPECT RATIOS
   ========================================================== */
.ratio-square     { aspect-ratio: var(--ratio-square) !important; }
.ratio-landscape  { aspect-ratio: var(--ratio-landscape) !important; }
.ratio-portrait   { aspect-ratio: var(--ratio-portrait) !important; }
.ratio-widescreen { aspect-ratio: var(--ratio-widescreen) !important; }
.ratio-cinematic  { aspect-ratio: var(--ratio-cinematic) !important; }
.ratio-ultrawide  { aspect-ratio: var(--ratio-ultrawide) !important; }
.ratio-golden     { aspect-ratio: var(--ratio-golden) !important; }

/* ==========================================================
   13. OPACITY
   ========================================================== */
.opacity-100 { opacity: 1 !important; }
.opacity-90  { opacity: 0.9 !important; }
.opacity-80  { opacity: 0.8 !important; }
.opacity-70  { opacity: 0.7 !important; }
.opacity-60  { opacity: 0.6 !important; }
.opacity-50  { opacity: 0.5 !important; }
.opacity-40  { opacity: 0.4 !important; }
.opacity-30  { opacity: 0.3 !important; }
.opacity-20  { opacity: 0.2 !important; }
.opacity-10  { opacity: 0.1 !important; }
.opacity-0   { opacity: 0 !important; }

/* ==========================================================
   14. MISC
   ========================================================== */
.container-inline { container-type: inline-size !important; }

/* Elementor fixes */
.elementor-icon-wrapper { line-height: 0; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0 !important; }