/* 
  Utilitaires pour remplacer les styles inline (Nettoyage SEO/Perf)
*/

/* 1. Conteneur principal A Propos */
.about-container-inner {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
}

/* 2. Wrapper image A Propos */
.about-image-wrapper {
  flex: 1 1 350px;
  max-width: 500px;
}
.about-image-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* 3. Wrapper texte A Propos */
.about-text-wrapper {
  flex: 1 1 450px;
  text-align: left;
}

/* 4. Divers flex utilities */
.flex-center-gap {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.flex-wrap {
  flex-wrap: wrap;
}

/* 5. Bannière "Force probante" (Carea Banner) */
.carea-banner {
  border: 1px solid #B8860B;
  padding: 6px 14px;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: #B8860B;
  letter-spacing: 0.5px;
  background: rgba(184, 134, 11, 0.1);
  width: 100%;
  margin-top: 4px;
}

/* Accessibilité: Réduction des animations si demandée par l'utilisateur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}