/* ==========================================================================
   Power 21 — page « Qui sommes-nous » (route 'who', content/<lang>/p_who.php)
   Compléments de layout.css : raison d'être, lien + avatars des fondateurs,
   philosophie, transition « orbite » vers la page Fondateurs (who.js).
   Préfixe : .who-
   ========================================================================== */

/* 1. Raison d'être — photo / bleu -------------------------------------------- */
.who-reason { display: flex; flex-wrap: wrap; background: var(--c-blue); color: var(--c-white); min-height: min(92vh, 860px); }
.who-reason__media { flex: 1 1 420px; position: relative; min-height: 420px; overflow: hidden; }
.who-reason__img {
  position: absolute; top: -10%; left: 0; right: 0; bottom: -10%; will-change: transform;
}
.who-reason__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.who-reason__media.is-tinted::after { content: ''; position: absolute; inset: 0; background: var(--c-blue); mix-blend-mode: multiply; opacity: .45; }

.who-reason__body {
  flex: 1 1 460px; display: flex; flex-direction: column; justify-content: center; gap: 40px;
  padding: clamp(64px, 8vw, 112px) clamp(20px, 5vw, 88px);
}
.who-reason .lyt-h2 em { color: var(--c-yellow); }
.who-reason__lead {
  max-width: 560px; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.4;
  letter-spacing: -.015em; font-weight: 600; text-wrap: pretty;
}
.who-reason__lead u { text-decoration: none; border-bottom: 2px solid var(--c-yellow); }
.who-reason__text { max-width: 520px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.86); text-wrap: pretty; }
.who-reason .link-rule { color: var(--c-white); }
.who-reason .link-rule:hover { color: var(--c-white); gap: 22px; }
/* lien fondateurs + avatars ronds qui se chevauchent (assets/avatars/founders/ : hors du
   dossier lu par le réseau de la home) ; liseré bleu = fond de la section */
.who-founders { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.who-avatars { display: flex; list-style: none; margin: 0; padding: 0; }
.who-avatars li + li { margin-left: -20px; }
.who-avatars img {
  display: block; width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--c-blue); background: var(--c-blue-deep);
  transition: transform .4s var(--ease);
}
/* survol du lien OU des avatars : les avatars s'écartent vers la droite en vague,
   le lien texte prend son état survolé. Uniquement en transform : aucun décalage
   de mise en page (la marge reste fixe). */
.who-avatars-link { display: block; }
.who-founders:hover .who-avatars li:nth-child(1) img { transform: none; }
.who-founders:hover .who-avatars li:nth-child(2) img { transform: translateX(12px); transition-delay: .05s; }
.who-founders:hover .who-avatars li:nth-child(3) img { transform: translateX(24px); transition-delay: .1s; }
.who-founders:has(.who-avatars-link:hover) .link-rule { gap: 22px; }

/* 4. Philosophy — sticky title + scroll-lit list ---------------------------- */
.who-philo { padding: clamp(64px, 8vw, 112px) var(--gutter) clamp(80px, 10vw, 140px); }
.who-philo__inner { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); align-items: flex-start; }
.who-philo__title { flex: 1 1 280px; top: 120px; }
.who-philo__title.is-sticky { position: sticky; }    /* set by JS only when beside the list */
.who-philo__title em { color: var(--c-blue); }
.who-principles { flex: 2 1 520px; min-width: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(15,17,21,.12); }
.who-principle {
  padding: 30px 0; border-bottom: 1px solid rgba(15,17,21,.12);
  color: var(--c-ink); transition: color .4s ease;
}
.who-principle p {
  font-size: clamp(22px, 2.2vw, 34px); line-height: 1.25; letter-spacing: -.025em; font-weight: 600; text-wrap: pretty;
}
.who-principle em { font-family: var(--ff-serif); font-weight: 400; font-size: 1.12em; letter-spacing: -.01em; color: var(--c-blue); transition: color .4s ease; }
/* reading-line highlight (JS adds .is-reading on the list, .is-lit on one row) */
.who-principles.is-reading .who-principle { color: var(--c-grey-light); }
.who-principles.is-reading .who-principle em { color: var(--c-grey-light); }
.who-principles.is-reading .who-principle.is-lit { color: var(--c-ink); }
.who-principles.is-reading .who-principle.is-lit em { color: var(--c-blue); }

/* 7. Transition « Rencontrer les fondateurs » (who-we-are.js, orbit) ---------
   Calque fixe : voile bleu + anneau + copies des avatars, posés en JS (transform). */
.who-orbit { position: fixed; inset: 0; z-index: 10000; overflow: hidden; cursor: progress; }
.who-orbit__veil { position: absolute; inset: 0; background: var(--c-blue); opacity: 0; }
.who-orbit__ring {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); opacity: 0;
}
.who-orbit__av {
  position: absolute; left: 0; top: 0; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--c-blue); background: var(--c-blue-deep);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .who-reason__img { transform: none !important; }
}