/*!
 * about.css — page À propos (v2). Chargé APRÈS styles.css et content.css. Préfixe : .ab-
 * Remplace identite.css pour cette page (identite.css reste propre à methode.html).
 */
@layer pages {
  /* Les deux premières sections sont mises en page avec le premier affichage (voir le guide, §9). */
  .ab-hero + .section { content-visibility: visible; }

  /* ---------- En-tête : texte + portrait annoté ---------- */
  .ab-hero { --grid-at: 80% 26%; }
  .ab-hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 64em) { .ab-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); column-gap: var(--space-2xl); } }
  .ab-hero__title { font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.045em; }
  .ab-hero .lead { max-inline-size: 34rem; }
  .ab-hero__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0; font-size: var(--step--1); color: var(--c-text-2); }
  .ab-hero__meta span:not(:last-child)::after { content: "·"; margin-inline: 0.55em; color: var(--c-text-3); }
  @media (max-width: 29.99em) { .ab-hero .cluster > .btn { flex: 1 1 100%; } }

  .ab-portrait { margin: 0; inline-size: min(100%, 21rem); justify-self: center; }
  @media (min-width: 64em) { .ab-portrait { justify-self: end; } }
  .ab-portrait__frame { position: relative; padding: 0.5rem; border: 1px solid var(--c-line-strong); border-block-end: 0; background: var(--c-raised); }
  .ab-portrait__frame img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--c-surface); }
  .ab-portrait .dims { --dims-inset: -0.6rem -0.6rem 0; }
  .ab-portrait .cartouche { --cols: 2; }

  /* ---------- Titres de section : plus calmes que les titres d'accueil ---------- */
  .ab-title { font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.03em; max-inline-size: 14em; }
  .ab-title--sm { font-size: var(--step-2); }

  /* ---------- Parcours ---------- */
  .ab-text { display: grid; gap: var(--space-s); max-inline-size: 36em; color: var(--c-text-2); }
  .ab-text p:first-child { color: var(--c-text); }

  /* ---------- Manifeste court ---------- */
  .ab-manifest { display: grid; gap: var(--space-l); }
  .ab-manifest__body { display: grid; gap: 0.85em; font-size: var(--step-1); line-height: 1.5; letter-spacing: -0.01em; }
  .ab-manifest__body p:nth-child(n+2) { color: var(--c-text-2); }
  .ab-manifest__sign { font-family: var(--font-serif); font-style: italic; font-size: var(--step-3); line-height: 1.15; }
  .ab-manifest__sign::before { content: ""; display: block; inline-size: 2.5rem; block-size: 2px; margin-block-end: var(--space-s); background: var(--c-accent); }

  /* ---------- L'IA | Avec qui je travaille ---------- */
  .ab-duo { display: grid; gap: var(--space-xl); }
  .ab-duo__item { display: grid; gap: var(--space-s); align-content: start; }
  .ab-duo__item p { color: var(--c-text-2); max-inline-size: 32em; }
  .ab-duo__item .ab-title { margin-block-end: var(--space-2xs); }
  .ab-duo__item .link-arrow { justify-self: start; margin-block-start: var(--space-2xs); }
  @media (max-width: 55.99em) { .ab-duo__item + .ab-duo__item { padding-block-start: var(--space-xl); border-block-start: 1px solid var(--c-line); } }
  @media (min-width: 56em) {
    .ab-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
    .ab-duo__item:first-child { padding-inline-end: var(--space-xl); }
    .ab-duo__item + .ab-duo__item { padding-inline-start: var(--space-xl); border-inline-start: 1px solid var(--c-line); }
  }
}