/* ================================================================
   page-a-propos.css — enbi
   Page /a-propos/ (template page-a-propos.hbs).
   Portée : .page-a-propos (classe body ajoutée par Ghost).
   Grammaire harmonisée (theme.css : .hero, .band, .proof-rows, .cta).
   Registre Accueil : chaleureux, lisible, rassurant. On entre par
   la personne. Inria Serif pour la voix, filets et nœuds pour le
   parcours, navy réservé au seul appel final. Tokens uniquement.
================================================================ */

/* ────────────────────────────────────────────────────────────
   HERO — on rencontre quelqu'un, à la première personne
──────────────────────────────────────────────────────────── */
.page-a-propos .about-role {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--methode);
  margin: 0 0 1.25rem;
}
.page-a-propos .hero__lede { margin-bottom: 1.125rem; }
.page-a-propos .about-lede {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.58;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 0 1.875rem;
  text-wrap: pretty;
}

/* Portrait — cadre fin, coins doux, aucune ombre, ratio respecté */
.page-a-propos .about-portrait {
  margin: 0;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
}
.page-a-propos .about-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  display: block;
  animation: fade-up .85s var(--ease) both;
}
.page-a-propos .about-portrait figcaption {
  margin: .75rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-align: center;
}


/* ────────────────────────────────────────────────────────────
   PROSE — paragraphes de corps (Inria Serif) dans une bande
──────────────────────────────────────────────────────────── */
.page-a-propos .about-prose {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}
.page-a-propos .about-prose + .about-prose { margin-top: var(--s-4); }

/* ────────────────────────────────────────────────────────────
   PARCOURS — timeline : la ligne relie les nœuds (langage enbi)
──────────────────────────────────────────────────────────── */
.page-a-propos .about-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 2rem;
  max-width: 640px;
}
.page-a-propos .about-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: .55em;
  bottom: .55em;
  width: 1px;
  background: var(--line-strong);
}
.page-a-propos .about-timeline__item {
  position: relative;
  padding-bottom: 1.625rem;
}
.page-a-propos .about-timeline__item:last-child { padding-bottom: 0; }
.page-a-propos .about-timeline__node {
  position: absolute;
  left: 0;
  top: .32em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--methode);
}
.page-a-propos .about-timeline__node--now { background: var(--resolution); }
.page-a-propos .about-timeline__org {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--cadre);
  margin: 0;
}
.page-a-propos .about-timeline__role {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: .25rem 0 0;
}

/* ────────────────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .page-a-propos .about-portrait { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-a-propos .about-portrait img { animation: none; }
}