/**
 * Utilitaires layout Cargox (remplace Tailwind CDN)
 */
.cgx-relative { position: relative; }
.cgx-fixed { position: fixed; }
.cgx-inset-0 { inset: 0; }
.cgx-z-0 { z-index: 0; }
.cgx-z-10 { z-index: 10; }
.cgx-z-20 { z-index: 20; }
.cgx-z-top { z-index: 99999; }

.cgx-flex { display: flex; }
.cgx-inline-flex { display: inline-flex; }
.cgx-flex-wrap { flex-wrap: wrap; }
.cgx-items-center { align-items: center; }
.cgx-items-end { align-items: flex-end; }
.cgx-justify-center { justify-content: center; }
.cgx-justify-between { justify-content: space-between; }
.cgx-justify-end { justify-content: flex-end; }
.cgx-shrink-0 { flex-shrink: 0; }

.cgx-w-full { width: 100%; }
.cgx-w-auto { width: auto; }
.cgx-h-40 { height: 10rem; }
.cgx-w-48 { width: 12rem; }
.cgx-max-w-4xl { max-width: 56rem; }
.cgx-max-w-80vw { max-width: 80vw; }
.cgx-mx-auto { margin-left: auto; margin-right: auto; }
.cgx-ml-auto { margin-left: auto; }

.cgx-gap-2 { gap: 0.5rem; }
.cgx-gap-3 { gap: 0.75rem; }
.cgx-gap-4 { gap: 1rem; }
.cgx-gap-6 { gap: 1.5rem; }

.cgx-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.cgx-px-4 { padding-left: 1rem; padding-right: 1rem; }
.cgx-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.cgx-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.cgx-pb-4 { padding-bottom: 1rem; }
.cgx-pb-6 { padding-bottom: 1.5rem; }

.cgx-mb-0 { margin-bottom: 0 !important; }
.cgx-mb-2 { margin-bottom: 0.5rem; }
.cgx-mb-3 { margin-bottom: 0.75rem; }
.cgx-mb-4 { margin-bottom: 1rem; }
.cgx-mb-6 { margin-bottom: 1.5rem; }
.cgx-mb-10 { margin-bottom: 2.5rem; }
.cgx-mb-16 { margin-bottom: 4rem; }

.cgx-text-center { text-align: center; }
.cgx-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.cgx-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.cgx-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.cgx-font-semibold { font-weight: 600; }
.cgx-leading-none { line-height: 1; }
.cgx-leading-relaxed { line-height: 1.625; }

.cgx-rounded { border-radius: 0.25rem; }
.cgx-rounded-20 { border-radius: 20px; }
.cgx-border { border-width: 1px; border-style: solid; }
.cgx-border-cargox { border-color: var(--cargox-border); }

.cgx-bg-white { background-color: var(--cargox-white); }
.cgx-bg-contain { background-size: contain; }
.cgx-bg-center { background-position: center; }
.cgx-bg-no-repeat { background-repeat: no-repeat; }

.cgx-min-h-100 { min-height: 100px; }
.cgx-max-h-12 { max-height: 3rem; }

.cgx-space-y-3 > * + * { margin-top: 0.75rem; }

@media (min-width: 640px) {
  .sm\:cgx-mb-20 { margin-bottom: 5rem; }
}

@media (min-width: 1024px) {
  .lg\:cgx-mb-28 { margin-bottom: 7rem; }
  .lg\:cgx-mb-32 { margin-bottom: 8rem; }
}

@media (min-width: 1280px) {
  .xl\:cgx-mb-28 { margin-bottom: 7rem; }
  .xl\:cgx-mb-44 { margin-bottom: 11rem; }
  .xl\:cgx-mb-52 { margin-bottom: 13rem; }
  .xl\:cgx-max-w-58 { max-width: 58%; }
  .xl\:cgx-text-left { text-align: left; }
  .xl\:cgx-max-h-none { max-height: none; }
}

@media (min-width: 1536px) {
  .\32xl\:cgx-mb-52 { margin-bottom: 13rem; }
  .\32xl\:cgx-mb-56 { margin-bottom: 14rem; }
}

/* Alias classes Tailwind existantes → cgx (évite de toucher tout le HTML) */
.relative { position: relative; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-\[99999\] { z-index: 99999; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.shrink-0 { flex-shrink: 0; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-40 { height: 10rem; }
.w-48 { width: 12rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-\[80vw\] { max-width: 80vw; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.\!mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-16 { margin-bottom: 4rem; }
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.font-semibold { font-weight: 600; }
.leading-none { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.rounded { border-radius: 0.25rem; }
.rounded-\[20px\] { border-radius: 20px; }
.border { border-width: 1px; border-style: solid; }
.border-cargox-border { border-color: var(--cargox-border); }
.bg-cargox-white { background-color: var(--cargox-white); }
.bg-contain { background-size: contain; }
.bg-center { background-position: center; }
.bg-no-repeat { background-repeat: no-repeat; }
.min-h-\[100px\] { min-height: 100px; }
.max-h-12 { max-height: 3rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
@media (min-width: 640px) {
  .sm\:mb-20 { margin-bottom: 5rem; }
}
@media (min-width: 1024px) {
  .lg\:mb-28 { margin-bottom: 7rem; }
  .lg\:mb-32 { margin-bottom: 8rem; }
}
@media (min-width: 1280px) {
  .xl\:mb-28 { margin-bottom: 7rem; }
  .xl\:mb-44 { margin-bottom: 11rem; }
  .xl\:mb-52 { margin-bottom: 13rem; }
  .xl\:max-w-\[58\%\] { max-width: 58%; }
  .xl\:text-left { text-align: left; }
  .xl\:max-h-none { max-height: none; }
}
@media (min-width: 1536px) {
  .\32xl\:mb-52 { margin-bottom: 13rem; }
  .\32xl\:mb-56 { margin-bottom: 14rem; }
}