/* Corrections de la page About - Réduction de la hauteur de la section hero */
/* AutoBF - 2025-01-08 */

/* Réduction de la hauteur de la section hero "Plateforme N°1 au Burkina Faso" */
/* Cibler la div avec bg-gradient qui contient la section hero - Réduire de 2/3 */
div[class*="bg-gradient-to-br"][class*="from-blue-600"],
div[class*="bg-gradient"][class*="blue"],
div:has(h1:contains("À propos de autobf")),
div:has(h1:contains("À propos")) {
  min-height: auto !important;
  height: auto !important;
  padding-top: 0.33rem !important;
  padding-bottom: 0.33rem !important;
}

/* Cibler spécifiquement les divs avec py-24 ou py-32 sur la page about - Réduire de 2/3 */
body[data-page="about"] div[class*="py-24"],
body[data-page="about"] div[class*="py-32"],
body:has([class*="About"]) div[class*="py-24"],
body:has([class*="About"]) div[class*="py-32"] {
  padding-top: 0.33rem !important;
  padding-bottom: 0.33rem !important;
}

/* Forcer les classes Tailwind py-24 et py-32 à 0.33rem (1/3) sur la page about */
/* Cette règle sera appliquée par le JavaScript qui ajoute une classe */
.about-hero-section-compact,
div.about-hero-section-compact,
section.about-hero-section-compact {
  padding-top: 0.33rem !important;
  padding-bottom: 0.33rem !important;
  min-height: auto !important;
  height: auto !important;
}

/* Cibler les divs avec bg-gradient et blue qui contiennent "Plateforme N°1" */
div[class*="bg-gradient-to-br"][class*="from-blue"]:has(h1),
div[class*="bg-gradient-to-br"][class*="from-blue"]:has(h2) {
  padding-top: 0.33rem !important;
  padding-bottom: 0.33rem !important;
}

/* Cibler la div container avec py-24 md:py-32 dans le code compilé */
div[class*="py-24"][class*="md:py-32"] {
  padding-top: 0.33rem !important;
  padding-bottom: 0.33rem !important;
}

/* Réduction de la taille du texte dans la section hero - Cibler directement */
div[class*="bg-gradient-to-br"][class*="from-blue"] h1,
div[class*="bg-gradient-to-br"][class*="from-blue"] h2 {
  font-size: 1.5rem !important;
  line-height: 1.2 !important;
}

div[class*="bg-gradient-to-br"][class*="from-blue"] h1 {
  font-size: 2rem !important;
}

div[class*="bg-gradient-to-br"][class*="from-blue"] p {
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
}

/* Réduction de la taille des boutons dans la section hero */
div[class*="bg-gradient-to-br"][class*="from-blue"] button,
div[class*="bg-gradient-to-br"][class*="from-blue"] a[role="button"] {
  font-size: 0.75rem !important;
  padding: 0.5rem 1rem !important;
  min-height: auto !important;
  height: auto !important;
}

/* Réduction des paddings verticaux dans la section hero - Réduire de 2/3 */
[class*="About"] section:first-child,
[class*="About"] section:first-of-type,
[class*="about"] section:first-child,
[class*="about"] section:first-of-type {
  padding-top: 0.33rem !important;
  padding-bottom: 0.33rem !important;
}

/* Réduction des marges verticales dans la section hero */
[class*="About"] section:first-child > *,
[class*="About"] section:first-of-type > * {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Réduction des espacements entre les éléments */
[class*="About"] section:first-child h1,
[class*="About"] section:first-child h2,
[class*="About"] section:first-of-type h1,
[class*="About"] section:first-of-type h2 {
  margin-bottom: 0.75rem !important;
}

[class*="About"] section:first-child p,
[class*="About"] section:first-of-type p {
  margin-bottom: 0.75rem !important;
}

/* Réduction des espacements des boutons */
[class*="About"] section:first-child button,
[class*="About"] section:first-child a[role="button"],
[class*="About"] section:first-of-type button,
[class*="About"] section:first-of-type a[role="button"] {
  margin-top: 0.75rem !important;
  margin-bottom: 0.5rem !important;
}

/* Cibler spécifiquement la section hero avec la classe ajoutée par JavaScript */
.about-hero-section-compact {
  min-height: auto !important;
  height: auto !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* Réduction supplémentaire des espacements internes - Réduire de 2/3 */
.about-hero-section-compact > * {
  margin-top: 0.083rem !important;
  margin-bottom: 0.083rem !important;
}

/* Réduction de la taille du texte dans la section hero */
.about-hero-section-compact h1,
.about-hero-section-compact h2 {
  margin-bottom: 0.17rem !important;
  margin-top: 0.083rem !important;
  font-size: 1.5rem !important; /* Réduire de moitié environ */
  line-height: 1.2 !important;
}

.about-hero-section-compact h1 {
  font-size: 2rem !important; /* Titre principal plus petit */
}

.about-hero-section-compact p {
  margin-bottom: 0.17rem !important;
  margin-top: 0.083rem !important;
  font-size: 0.875rem !important; /* Réduire la taille du texte */
  line-height: 1.4 !important;
}

/* Réduction de la taille des boutons */
.about-hero-section-compact button,
.about-hero-section-compact a[role="button"],
.about-hero-section-compact a.button {
  font-size: 0.75rem !important; /* Texte des boutons plus petit */
  padding: 0.5rem 1rem !important; /* Padding réduit */
  min-height: auto !important;
  height: auto !important;
}

/* Réduire aussi les espacements des conteneurs internes de 2/3 */
.about-hero-section-compact > div {
  padding-top: 0.17rem !important;
  padding-bottom: 0.17rem !important;
}