/* ============================================
   RÈGLES GLOBALES TYPOGRAPHIE & ESPACEMENT
   Uniformise les espacements et alignements sur toutes les pages
   ============================================ */

/* ============================================
   ESPACEMENTS VERTICAUX UNIFORMES
   ============================================ */

/* Espacement entre sections */
section {
  padding-top: clamp(3rem, 8vw, 6rem) !important;
  padding-bottom: clamp(3rem, 8vw, 6rem) !important;
}

/* Espacement entre éléments dans les listes */
.space-y-2 > * + * {
  margin-top: 0.5rem !important;
}

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

.space-y-4 > * + * {
  margin-top: clamp(0.75rem, 2vw, 1rem) !important;
}

.space-y-6 > * + * {
  margin-top: clamp(1rem, 2.5vw, 1.5rem) !important;
}

.space-y-8 > * + * {
  margin-top: clamp(1.25rem, 3vw, 2rem) !important;
}

.space-y-10 > * + * {
  margin-top: clamp(1.5rem, 4vw, 2.5rem) !important;
}

.space-y-12 > * + * {
  margin-top: clamp(2rem, 5vw, 3rem) !important;
}

/* ============================================
   MARGES VERTICALES UNIFORMES
   ============================================ */

/* Marges bottom cohérentes */
.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: clamp(0.375rem, 1vw, 0.5rem) !important;
}

.mb-3 {
  margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem) !important;
}

.mb-4 {
  margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
}

.mb-6 {
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem) !important;
}

.mb-8 {
  margin-bottom: clamp(1.25rem, 3vw, 2rem) !important;
}

.mb-10 {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem) !important;
}

.mb-12 {
  margin-bottom: clamp(2rem, 5vw, 3rem) !important;
}

/* Marges top cohérentes */
.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: clamp(0.375rem, 1vw, 0.5rem) !important;
}

.mt-3 {
  margin-top: clamp(0.5rem, 1.5vw, 0.75rem) !important;
}

.mt-4 {
  margin-top: clamp(0.75rem, 2vw, 1rem) !important;
}

/* ============================================
   ALIGNEMENT DE TEXTE
   ============================================ */

/* Alignement vertical des textes dans les cartes */
.flex.items-center {
  align-items: center !important;
}

.flex.items-start {
  align-items: flex-start !important;
}

.flex.items-end {
  align-items: flex-end !important;
}

/* Alignement horizontal */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

/* ============================================
   LEADING (LINE HEIGHT) UNIFORME
   ============================================ */

.leading-tight {
  line-height: 1.2 !important;
}

.leading-normal {
  line-height: 1.5 !important;
}

.leading-relaxed {
  line-height: clamp(1.5, 2vw, 1.75) !important;
}

.leading-loose {
  line-height: 2 !important;
}

/* ============================================
   TRACKING (LETTER SPACING) UNIFORME
   ============================================ */

.tracking-tight {
  letter-spacing: -0.025em !important;
}

.tracking-normal {
  letter-spacing: 0 !important;
}

.tracking-wide {
  letter-spacing: clamp(0.05em, 0.1vw, 0.1em) !important;
}

.tracking-wider {
  letter-spacing: clamp(0.1em, 0.15vw, 0.15em) !important;
}

/* ============================================
   PADDING HORIZONTAL UNIFORME
   ============================================ */

.px-4 {
  padding-left: clamp(0.75rem, 2vw, 1rem) !important;
  padding-right: clamp(0.75rem, 2vw, 1rem) !important;
}

.px-5 {
  padding-left: clamp(1rem, 2.5vw, 1.25rem) !important;
  padding-right: clamp(1rem, 2.5vw, 1.25rem) !important;
}

.px-6 {
  padding-left: clamp(1rem, 3vw, 1.5rem) !important;
  padding-right: clamp(1rem, 3vw, 1.5rem) !important;
}

.px-8 {
  padding-left: clamp(1.25rem, 4vw, 2rem) !important;
  padding-right: clamp(1.25rem, 4vw, 2rem) !important;
}

/* ============================================
   GAPS UNIFORMES
   ============================================ */

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: clamp(0.5rem, 1.5vw, 0.75rem) !important;
}

.gap-4 {
  gap: clamp(0.75rem, 2vw, 1rem) !important;
}

.gap-6 {
  gap: clamp(1rem, 2.5vw, 1.5rem) !important;
}

.gap-8 {
  gap: clamp(1.25rem, 3vw, 2rem) !important;
}

.gap-10 {
  gap: clamp(1.5rem, 4vw, 2.5rem) !important;
}

.gap-12 {
  gap: clamp(2rem, 5vw, 3rem) !important;
}

.gap-24 {
  gap: clamp(2rem, 8vw, 6rem) !important;
}

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

@media (max-width: 640px) {
  /* Réduire les gaps sur mobile */
  .gap-8 {
    gap: 1rem !important;
  }
  
  .gap-10 {
    gap: 1.25rem !important;
  }
  
  .gap-12 {
    gap: 1.5rem !important;
  }
  
  .gap-24 {
    gap: 2rem !important;
  }
  
  /* Espacements verticaux réduits */
  .space-y-10 > * + * {
    margin-top: 1.5rem !important;
  }
  
  .space-y-12 > * + * {
    margin-top: 2rem !important;
  }
}

/* ============================================
   ALIGNEMENT VERTICAL DES CONTENUS
   ============================================ */

/* Garantir l'alignement vertical dans les flex */
.flex {
  align-items: stretch;
}

.flex.items-center {
  align-items: center !important;
}

/* Alignement vertical dans les grilles */
.grid {
  align-items: start;
}

.grid.items-center {
  align-items: center !important;
}

/* ============================================
   CORRECTION DES TEXTES DÉCALÉS
   ============================================ */

/* Éviter les décalages de texte */
p, h1, h2, h3, h4, h5, h6, span, a {
  line-height: inherit;
  vertical-align: baseline;
}

/* Correction pour les textes dans les flex */
.flex p,
.flex h1,
.flex h2,
.flex h3,
.flex span {
  margin: 0;
  padding: 0;
}

/* Alignement des labels et inputs */
label {
  display: block;
  margin-bottom: 0.5rem;
}

/* Correction des listes */
ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* ============================================
   ESPACEMENTS DANS LES CARTES
   ============================================ */

/* Padding uniforme dans les cartes - ne pas forcer, respecter les classes Tailwind */
.p-4 {
  padding: clamp(0.875rem, 2.5vw, 1rem) !important;
}

.p-5 {
  padding: clamp(1rem, 3vw, 1.25rem) !important;
}

.p-6 {
  padding: clamp(1.25rem, 3.5vw, 1.5rem) !important;
}

.p-8 {
  padding: clamp(1.5rem, 4vw, 2rem) !important;
}

/* Espacement entre icône et texte dans les cartes */
.flex.items-center > [data-lucide] + *,
.flex.items-center > [class*="w-"] + * {
  margin-left: 0 !important;
}

/* Alignement vertical parfait dans les cartes */
[class*="rounded"][class*="border"] {
  display: flex;
  flex-direction: column;
}

[class*="rounded"][class*="border"] > * {
  flex-shrink: 0;
}

/* Espacement cohérent entre icône, titre et description */
[class*="rounded"][class*="border"] > div:first-child {
  margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
}

[class*="rounded"][class*="border"] > h3 {
  margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem) !important;
  margin-top: 0 !important;
}

[class*="rounded"][class*="border"] > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================
   CORRECTIONS MOBILE
   ============================================ */

@media (max-width: 480px) {
  /* Réduire encore plus les espacements sur très petits écrans */
  section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  
  .mb-8 {
    margin-bottom: 1.25rem !important;
  }
  
  .mb-10 {
    margin-bottom: 1.5rem !important;
  }
  
  .mb-12 {
    margin-bottom: 2rem !important;
  }
}