/* ==========================================================================
   About page — intro row, company-history timeline, guiding-principles
   flowing text, founder profile.
   Container/header/eyebrow/title come from css/components/section.css;
   the stat card reuses .stat-highlight as-is.
   Blocks: .about-intro, .timeline, .about-guide, .founder
   ========================================================================== */

/* --- Intro row: mission text beside the reused stat card, with extra
   breathing room between the two so the split reads cleanly. --- */
.about-intro {
  display: flex;
  align-items: center;
  gap: var(--space-8) calc(var(--space-8) * 2);
}

.about-intro__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about-intro__title {
  color: var(--color-text-primary);
}

.about-intro__paragraph {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.about-intro__stat {
  flex: 0 0 320px;
}

/* Page-load entrance, timed to fade in alongside the hero's own subtext
   (see .hero__subtext.fade-in-up delay in css/components/hero.css). */
.about-intro__text.fade-in-up,
.about-intro__stat.fade-in-up {
  animation-delay: 1s;
}

@media (max-width: 900px) {
  .about-intro {
    flex-direction: column;
    gap: var(--space-6);
  }

  .about-intro__stat {
    flex: none;
    width: 100%;
    max-width: 320px;
  }
}

/* --- Timeline: vertical rail + numbered markers + card content --- */
.timeline {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 23px;
  width: 2px;
  background: linear-gradient(to bottom, var(--glass-border-strong), transparent 96%);
}

.timeline__item {
  position: relative;
  display: flex;
  gap: var(--space-5);
  padding-bottom: var(--space-7);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__marker {
  position: relative;
  z-index: 1;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-white);
  background: linear-gradient(180deg, var(--color-red-light) 0%, var(--color-red) 55%, var(--color-red-dark) 100%);
  box-shadow: 0 4px 14px rgba(227, 0, 27, 0.35);
}

.timeline__marker--green {
  background: var(--color-apple-green);
  box-shadow: 0 4px 14px rgba(52, 199, 89, 0.35);
}

.timeline__content {
  flex: 1;
  min-width: 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-50);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(44, 44, 46, 0.08);
}

.timeline__title {
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.timeline__text {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .timeline__item {
    gap: var(--space-4);
  }

  .timeline__content {
    padding: var(--space-4) var(--space-5);
  }
}

/* --- "Ce qui nous guide": dignité / fraternité / réciprocité, a flowing
   text block of three chapters separated by a top border, echoing the
   "Fondements" pattern used on the methodologie page. --- */
.about-guide {
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about-guide__text {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.about-guide__highlight {
  font-size: var(--fs-md);
  font-weight: 700;
  font-style: italic;
  color: var(--color-red-dark);
}

.about-guide__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--glass-border-strong);
}

.about-guide__block-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Modifier for a two-column layout ("Pourquoi Valoritech") — the default
   .about-guide stays a single stacked column (used as-is by "Ce qui nous
   guide"), so the row layout and the left-border divider (replacing
   .about-guide__block's default top border) only apply here. */
.about-guide--split {
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-5);
}

.about-guide--split .about-guide__column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about-guide--split .about-guide__block {
  padding-top: 0;
  padding-left: var(--space-8);
  border-top: none;
  border-left: 1px solid var(--glass-border-strong);
}

@media (max-width: 900px) {
  .about-guide--split {
    flex-direction: column;
    gap: var(--space-6);
  }

  .about-guide--split .about-guide__block {
    padding-top: var(--space-6);
    padding-left: 0;
    border-top: 1px solid var(--glass-border-strong);
    border-left: none;
  }
}

/* --- Founder profile: photo card beside a matching content card --- */
.founder {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.founder__photo {
  position: relative;
  flex: 0 0 340px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  box-shadow: 0 16px 40px rgba(44, 44, 46, 0.16);
}

.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}

.founder__badge {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-white);
}

.founder__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-7);
  background: var(--color-surface-50);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(44, 44, 46, 0.08);
}

.founder__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.founder__name {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.founder__quote {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-red);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-red-dark);
}

.founder__bio {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.founder__deck {
  padding-top: var(--space-5);
  border-top: 1px solid var(--glass-border-strong);
}

/* Slide deck — Anne's bio spans more ground than fits in one panel, so it's
   split into pages the reader flips through via the dots below, instead of
   one long scroll. Wired by the shared js/method-modal.js
   ([data-method-modal]/[data-method-tab]/[data-method-panel]), same script
   as the homepage's Structogénie modal and the methodologie page's
   Fondements switcher. */
.founder__slide {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}

.founder__slide.is-active {
  display: flex;
  animation: founder-slide-fade 0.4s ease;
}

@keyframes founder-slide-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .founder__slide.is-active {
    animation: none;
  }
}

.founder__slide-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}

.founder__pagination {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.founder__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--glass-border-strong);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.founder__dot:hover {
  background: var(--color-text-secondary);
}

.founder__dot.is-active {
  background: var(--color-red);
  transform: scale(1.3);
}

@media (max-width: 900px) {
  .founder {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  .founder__photo {
    flex: none;
    width: 100%;
    max-width: 340px;
  }

  .founder__content {
    padding: var(--space-5);
  }
}