/* =============================================================================
   YAHEMMA — Styles page À propos
   ============================================================================= */

/* --- Hero --- */
.about-hero {
  position: relative;
  padding-top: calc(var(--header-height) + 4rem);
  padding-bottom: 4rem;
  background-color: var(--color-background-dark);
  color: var(--color-text-light);
  overflow: hidden;
}

.about-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.about-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(2, 11, 28, 0.94) 0%,
    rgba(2, 11, 28, 0.82) 50%,
    rgba(7, 21, 43, 0.7) 100%
  );
}

.about-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.5rem;
  align-items: center;
}

.about-hero__badge {
  display: inline-flex;
  margin-bottom: 1.25rem;
}

.about-hero__title {
  margin-bottom: 1.25rem;
  font-size: clamp(1.85rem, 4.5vw, var(--font-size-4xl));
  line-height: 1.15;
}

.about-hero__title .highlight {
  color: var(--color-primary);
}

.about-hero__subtitle {
  margin-bottom: 2rem;
  max-width: 540px;
  font-size: clamp(1rem, 2vw, var(--font-size-lg));
  color: var(--color-text-muted-light);
  line-height: 1.7;
}

.about-hero__visual {
  display: flex;
  justify-content: center;
}

.about-hero__visual img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border-dark);
  box-shadow: var(--shadow-lg);
}

/* --- Mission / Vision --- */
.mission-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.mission-block__lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-dark);
  line-height: 1.75;
}

.mission-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mission-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
}

.mission-list__item img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.mission-list__item p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.vision-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.vision-pillar {
  padding: 1.35rem 1.15rem;
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  text-align: center;
}

.vision-pillar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 0.85rem;
  border-radius: var(--border-radius-sm);
  background: linear-gradient(
    135deg,
    rgba(22, 119, 255, 0.12),
    rgba(0, 184, 148, 0.1)
  );
}

.vision-pillar__icon img {
  width: 22px;
  height: 22px;
}

.vision-pillar__title {
  margin-bottom: 0.45rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

.vision-pillar__text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* --- Valeurs --- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.value-card {
  padding: 1.5rem 1.25rem;
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.value-card:hover {
  border-color: rgba(22, 119, 255, 0.3);
  box-shadow: var(--shadow-sm);
}

.value-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: var(--border-radius-sm);
  background: linear-gradient(
    135deg,
    rgba(22, 119, 255, 0.12),
    rgba(114, 92, 255, 0.1)
  );
}

.value-card__icon img {
  width: 24px;
  height: 24px;
}

.value-card__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
}

.value-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* --- Méthode --- */
.about-method {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  counter-reset: about-method;
}

.about-method__step {
  position: relative;
  padding: 1.5rem 1.25rem 1.5rem 1.5rem;
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  counter-increment: about-method;
}

.about-method__step::before {
  content: counter(about-method);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background-color: var(--color-background-dark);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  border: 2px solid var(--color-primary);
}

.about-method__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
}

.about-method__text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* --- Expertise --- */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.expertise-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 1.25rem 0.75rem;
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  text-align: center;
  transition: border-color var(--transition-base);
}

.expertise-item:hover {
  border-color: rgba(22, 119, 255, 0.3);
}

.expertise-item img {
  width: 36px;
  height: 36px;
}

.expertise-item__name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  line-height: 1.4;
}

/* --- Note légale --- */
.about-note {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* --- CTA --- */
.about-cta {
  padding-block: var(--section-padding);
  background: linear-gradient(
    135deg,
    var(--color-background-dark) 0%,
    var(--color-background-dark-alt) 50%,
    #0a1f3d 100%
  );
  color: var(--color-text-light);
  text-align: center;
}

.about-cta__title {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 3.5vw, var(--font-size-3xl));
}

.about-cta__text {
  margin-bottom: 2rem;
  max-width: 600px;
  margin-inline: auto;
  color: var(--color-text-muted-light);
  font-size: var(--font-size-lg);
  line-height: 1.7;
}

.about-cta .btn-group {
  justify-content: center;
}

/* --- Animations --- */
.about-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.about-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Valeurs — cascade alternée */
.values-cascade .values-cascade__card:nth-child(1) { --cascade-i: 0; --cascade-x: -36px; }
.values-cascade .values-cascade__card:nth-child(2) { --cascade-i: 1; --cascade-x: 36px; }
.values-cascade .values-cascade__card:nth-child(3) { --cascade-i: 2; --cascade-x: -36px; }
.values-cascade .values-cascade__card:nth-child(4) { --cascade-i: 3; --cascade-x: 36px; }
.values-cascade .values-cascade__card:nth-child(5) { --cascade-i: 4; --cascade-x: -36px; }
.values-cascade .values-cascade__card:nth-child(6) { --cascade-i: 5; --cascade-x: 36px; }

.values-cascade:not(.is-cascaded) .values-cascade__card {
  opacity: 0;
  transform: translateX(var(--cascade-x, 0)) translateY(24px) scale(0.97);
}

.values-cascade.is-cascaded .values-cascade__card {
  animation: about-values-in 0.68s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--cascade-i, 0) * 90ms);
}

@keyframes about-values-in {
  0% {
    opacity: 0;
    transform: translateX(var(--cascade-x, 0)) translateY(24px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Expertise — mosaïque */
.expertise-mosaic .expertise-mosaic__item:nth-child(1) { --mosaic-i: 0; }
.expertise-mosaic .expertise-mosaic__item:nth-child(2) { --mosaic-i: 1; }
.expertise-mosaic .expertise-mosaic__item:nth-child(3) { --mosaic-i: 2; }
.expertise-mosaic .expertise-mosaic__item:nth-child(4) { --mosaic-i: 3; }
.expertise-mosaic .expertise-mosaic__item:nth-child(5) { --mosaic-i: 4; }
.expertise-mosaic .expertise-mosaic__item:nth-child(6) { --mosaic-i: 5; }
.expertise-mosaic .expertise-mosaic__item:nth-child(7) { --mosaic-i: 6; }
.expertise-mosaic .expertise-mosaic__item:nth-child(8) { --mosaic-i: 7; }
.expertise-mosaic .expertise-mosaic__item:nth-child(9) { --mosaic-i: 8; }
.expertise-mosaic .expertise-mosaic__item:nth-child(10) { --mosaic-i: 9; }

.expertise-mosaic:not(.is-mosaic) .expertise-mosaic__item {
  opacity: 0;
  transform: scale(0.75) translateY(16px);
}

.expertise-mosaic.is-mosaic .expertise-mosaic__item {
  animation: about-expertise-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--mosaic-i, 0) * 50ms);
}

@keyframes about-expertise-in {
  0% {
    opacity: 0;
    transform: scale(0.75) translateY(16px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Méthode — montée séquentielle */
.about-method-rise .about-method-rise__step:nth-child(1) { --step-i: 0; }
.about-method-rise .about-method-rise__step:nth-child(2) { --step-i: 1; }
.about-method-rise .about-method-rise__step:nth-child(3) { --step-i: 2; }
.about-method-rise .about-method-rise__step:nth-child(4) { --step-i: 3; }
.about-method-rise .about-method-rise__step:nth-child(5) { --step-i: 4; }
.about-method-rise .about-method-rise__step:nth-child(6) { --step-i: 5; }

.about-method-rise:not(.is-risen) .about-method-rise__step {
  opacity: 0;
  transform: translateY(32px);
}

.about-method-rise.is-risen .about-method-rise__step {
  animation: about-method-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--step-i, 0) * 85ms);
}

@keyframes about-method-in {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .values-cascade:not(.is-cascaded) .values-cascade__card,
  .values-cascade.is-cascaded .values-cascade__card,
  .expertise-mosaic:not(.is-mosaic) .expertise-mosaic__item,
  .expertise-mosaic.is-mosaic .expertise-mosaic__item,
  .about-method-rise:not(.is-risen) .about-method-rise__step,
  .about-method-rise.is-risen .about-method-rise__step {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* --- Responsive --- */
@media (max-width: 1023px) {
  .about-hero__inner {
    grid-template-columns: 1fr;
  }

  .about-hero__visual {
    order: -1;
  }

  .mission-block {
    grid-template-columns: 1fr;
  }

  .vision-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-method {
    grid-template-columns: repeat(2, 1fr);
  }

  .expertise-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .vision-grid,
  .values-grid,
  .about-method,
  .expertise-grid {
    grid-template-columns: 1fr;
  }

  .about-cta .btn-group {
    flex-direction: column;
  }

  .about-cta .btn {
    width: 100%;
  }
}