/* ==========================================================================
   VAGABON — css/pages/qui-suis-je.css
   Styles de qui-suis-je.html — page de présentation personnelle de
   Virgil Boukraa, atteinte depuis l'entrée "Qui suis-je" du menu plein
   écran de universe.html (ancienne entrée "Philosophie").

   Ne redéfinit AUCUN jeton : réutilise entièrement la palette --u-* et les
   classes de rythme (.universe-section, .universe-section__inner,
   .universe-eyebrow) déjà déclarées dans css/pages/universe.css, chargé
   avant ce fichier (voir qui-suis-je.html). Portée strictement limitée aux
   classes préfixées "who-" ci-dessous : aucune règle ici ne modifie
   universe.html, face-a-face.html, contact.html ou un composant partagé.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* A. Lien de retour — même traitement visuel que .project-page__back      */
/* (face-a-face.css), redéclaré ici sous un nom propre à cette page plutôt */
/* que de charger face-a-face.css pour une seule règle.                    */
/* ---------------------------------------------------------------------- */
.who-back {
  position: absolute;
  top: calc(var(--nav-height) + var(--space-lg));
  left: clamp(24px, 5vw, 64px);
  z-index: 2;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  letter-spacing: 0.04em;
  color: var(--u-ink-subtle);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.who-back:hover,
.who-back:focus-visible {
  color: var(--u-warm);
  border-color: var(--u-warm-soft);
}

/* ---------------------------------------------------------------------- */
/* B. Hero — identité de la page (nom + fonction) + emplacement portrait.  */
/* ---------------------------------------------------------------------- */
.who-hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  padding-bottom: var(--space-lg);
}

.who-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.who-hero__title {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: var(--letter-spacing-display);
  color: var(--u-ink);
}

/* Texte d'introduction personnel — même famille typographique que
   who-hero__role juste en dessous (corps de texte standard, pas la
   version "lg"), pour bien distinguer visuellement les deux niveaux tout
   en restant dans le même vocabulaire de styles déjà utilisé sur cette
   page (voir who-section__body). */
.who-hero__intro {
  margin-top: var(--space-lg);
  max-width: 46ch;
}

.who-hero__intro p {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: #495359;
}

.who-hero__intro p + p {
  margin-top: var(--space-sm);
}

.who-hero__role {
  margin-top: var(--space-lg);
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: #495359;
}

/* Portrait — cadre calé sur le ratio RÉEL de la photo actuelle
   (virgil-portrait-poolside.webp, 1100×1955px, ≈ 9:16) plutôt que sur un
   3:4 fixe, pour afficher la composition complète de la photo sans jamais
   la recadrer (demande explicite). Même traitement visuel qu'avant :
   rectangle discret, jamais une carte ou un cadre avec ombre. */
.who-hero__portrait-frame {
  width: 100%;
  aspect-ratio: 1100 / 1955;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--u-bg) 100%, black 10%);
  border: 1px solid color-mix(in srgb, var(--u-bg) 100%, black 24%);
  text-align: center;
}

.who-hero__portrait-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #495359;
}

/* object-fit:contain (plutôt que cover) garantit qu'aucun bord de la photo
   n'est jamais rogné, y compris en cas d'écart d'arrondi entre le ratio du
   cadre et celui du fichier réel — priorité donnée à la composition
   complète sur le remplissage exact du cadre. */
.who-hero__portrait-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1100 / 1955;
  object-fit: contain;
}

@media (max-width: 900px) {
  .who-hero__inner {
    grid-template-columns: 1fr;
  }
  .who-hero__portrait-frame {
    max-width: 360px;
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .who-back {
    position: static;
    display: inline-block;
    margin: var(--space-lg) clamp(24px, 5vw, 64px) 0;
  }
  .who-hero {
    padding-top: var(--space-lg);
  }
}

/* ---------------------------------------------------------------------- */
/* C. Sections 01–04 — rythme partagé avec .universe-section /             */
/* .universe-section__inner (padding vertical, largeur de contenu),        */
/* seules les classes ci-dessous sont propres à cette page.                */
/* ---------------------------------------------------------------------- */
.who-section__number {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  color: var(--u-ink-subtle);
}

.who-section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.16;
  color: var(--u-ink);
  max-width: 20ch;
}

.who-section__body {
  margin-top: var(--space-md);
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: #495359;
}

/* Citation de la section "Mon profil" (01) : la règle globale de base.css
   (em { color: var(--color-accent); font-style: normal; }) affiche par
   défaut les <em> en couleur d'accent et SANS italique — l'inverse de ce
   qui est demandé ici ("italique uniquement, sans autre effet"). Override
   scopé à cette seule classe, même approche que legal.css/contact.css/
   face-a-face.css ailleurs sur le site : couleur identique au texte
   environnant, italique réactivée, aucun autre effet ajouté. */
.who-section__body em {
  color: inherit;
  font-style: italic;
}

/* --------------------------- Alternance gauche/droite ------------------- */
.who-section__inner--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.who-section--visual-left .who-section__visual {
  order: -1;
}

/* Emplacement visuel réservé (image grand format à venir) — même famille
   visuelle que le portrait du Hero (rectangle discret, sans cadre ni
   ombre), en attendant un fichier réel pour ces sections. */
.who-section__visual {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--u-bg) 100%, black 10%);
  border: 1px solid color-mix(in srgb, var(--u-bg) 100%, black 24%);
}

/* Une fois une image réelle placée à l'intérieur d'un who-section__visual
   (voir section "Mes valeurs") : remplit le même cadre (largeur, ratio 4:5,
   bordure — tout hérité du conteneur ci-dessus, rien ne change), recadrée
   proprement en object-fit:cover, jamais déformée. Règle générique
   (réutilisable telle quelle si section 02 ou 04 reçoivent un jour une
   image de la même façon), pas de recadrage manuel (object-position) : le
   sujet est déjà bien centré sur la photo source, le centre par défaut du
   cadre suffit. */
.who-section__visual > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section 01 "Mon profil" — diaporama automatique (LiteYear / URCA) à la
   place du rectangle vide : .who-section__slideshow réutilise
   .who-section__visual (même largeur 100%, même ratio 4:5, même bordure
   fine — cf. .who-hero__portrait-frame plus haut dans ce fichier — aucun
   nouveau style de cadre inventé), et n'ajoute que ce qui est strictement
   nécessaire au fondu enchaîné : position relative + overflow:hidden pour
   contenir le zoom des deux <img> superposées en absolute. La logique
   d'alternance (classe "is-active") est gérée par
   js/qui-suis-je-slideshow.js — ce fichier ne contient que le rendu
   visuel, jamais la temporisation. */
.who-section__slideshow {
  position: relative;
  overflow: hidden;
}

.who-section__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* object-fit:cover : les deux photos (LiteYear en 1:1, URCA en ~16:10)
     partagent exactement le même cadre 4:5 sans jamais être déformées —
     seul le recadrage diffère, jamais l'échelle horizontale/verticale. */
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1200ms ease-in-out;
}

.who-section__slide.is-active {
  opacity: 1;
  z-index: 1;
  /* Zoom très léger et lent (Ken Burns discret) pendant tout le temps où
     l'image reste affichée (3000ms d'affichage + 1200ms de fondu = 4200ms,
     voir js/qui-suis-je-slideshow.js) — jamais de à-coup, l'animation
     redémarre proprement à chaque fois que la classe est réappliquée. */
  animation: who-slide-zoom 4200ms ease-out forwards;
}

@keyframes who-slide-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .who-section__slide {
    /* Fondu conservé (nettement adouci) mais zoom entièrement désactivé,
       comme demandé explicitement pour prefers-reduced-motion. */
    transition: opacity 600ms ease-in-out;
  }
  .who-section__slide.is-active {
    animation: none;
    transform: scale(1);
  }
}

/* Desktop uniquement : le bloc image doit être "visuellement plus présent"
   (texte de gauche désormais long) — override scopé à #profil uniquement :
   la section 02 "Mon approche" juste en dessous garde son 1fr/1fr d'origine,
   inchangé.
   Alignement vertical : align-items:center (plutôt que "start", essayé
   précédemment puis jugé trop haut par rapport au texte) — solution native
   de la grille déjà utilisée par .who-section__inner--split pour la
   section 02, sans valeur "magique" et donc robuste à tous les
   breakpoints : le bloc image se cale sur le centre vertical réel de la
   colonne de texte, quelle que soit sa hauteur (qui varie déjà pas mal
   d'un breakpoint à l'autre vu la longueur du texte). */
@media (min-width: 901px) {
  #profil .who-section__inner--split {
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
  }
}

@media (max-width: 900px) {
  .who-section__inner--split {
    grid-template-columns: 1fr;
  }
  /* Demande explicite pour cette section (contrairement à "Mon approche") :
     le diaporama passe AU-DESSUS du texte sur mobile. order:-1 ne change
     que l'ordre visuel dans la grille à une seule colonne — le texte reste
     bien le premier élément du DOM (lu en premier par un lecteur d'écran
     ou en l'absence de CSS), même principe déjà utilisé par
     .who-section--visual-left ci-dessous pour l'inverse. */
  #profil .who-section__slideshow {
    order: -1;
  }
  .who-section--visual-left .who-section__visual {
    order: 0;
  }
}

/* --------------------------- Rupture éditoriale (03) --------------------- */
/* Bloc centré pleine largeur, dans l'esprit de .universe-philosophy —
   volontairement différent des deux alternances qui l'entourent (demande
   explicite d'alterner les compositions plutôt que de répéter le même
   gabarit quatre fois). */
.who-section--statement .who-section__inner {
  text-align: center;
}

.who-section--statement .universe-eyebrow {
  justify-content: center;
}

.who-section__statement {
  margin-inline: auto;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.16;
  color: var(--u-ink);
}

.who-section__body--centered {
  margin-inline: auto;
  text-align: center;
}

/* --------------------------- Manifeste "Ma vision" ------------------------ */
/* Même gabarit que la rupture éditoriale (03) juste au-dessus
   (who-section--statement, who-section__body--centered) — seules deux
   valeurs sont ajustées ici, scopées à #vision uniquement, sans toucher aux
   règles génériques ni à la section 03 :
   - who-section__statement : titre plus long que le statement de la
     section 03 ("Ma manière d'aborder la communication et la création"
     contre un court intitulé de rupture) → max-width relevé à 34ch pour un
     retour à la ligne équilibré (2 lignes) plutôt que fragmenté. Taille de
     police/graisse/interligne repris À L'IDENTIQUE de l'ancienne citation
     de conclusion de "Mes valeurs" (who-values__quote, supprimée — voir
     plus bas) suite à sa suppression : demande explicite de réutiliser
     exactement cette hiérarchie visuelle pour ce titre plutôt que de
     garder la taille par défaut de who-section__statement (utilisée par la
     section 03). font-family/font-weight/color restent hérités de
     who-section__statement (déjà identiques à l'ancienne citation, aucun
     changement nécessaire).
   - who-section__body : colonne de texte volontairement plus large que
     l'habituel 52ch (demande explicite : "environ 700 à 850px"), avec un
     corps de texte légèrement agrandi (--font-size-body-lg, déjà utilisé
     ailleurs sur cette page pour who-hero__role) pour rester confortable à
     lire sur une colonne aussi large, et un espacement entre paragraphes
     nettement augmenté (--space-lg au lieu de --space-md) pour la
     respiration "manifeste" demandée. */
#vision .who-section__statement {
  max-width: 34ch;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.28;
}

#vision .who-section__body {
  max-width: clamp(700px, 60vw, 850px);
  margin-top: var(--space-lg);
  font-size: var(--font-size-body-lg);
}

/* Remonte légèrement la section (espace au-dessus uniquement) suite à la
   suppression de la citation de conclusion de "Mes valeurs" juste au-dessus
   — sans cette citation, l'espacement partagé habituel (universe-section :
   padding-block: var(--space-3xl) en haut ET en bas de chaque section)
   laissait un vide trop grand entre les deux sections. Seul padding-top est
   réduit (var(--space-2xl) au lieu de var(--space-3xl) hérité) : l'espace
   sous la section (vers "Mon approche" juste après) reste inchangé, comme
   demandé ("ne modifie rien d'autre"). */
#vision {
  padding-top: var(--space-2xl);
}

/* --------------------------- Étapes détaillées (04) ------------------------ */
/* Grille 2x2 (4 étapes réparties sur la largeur de la colonne de texte),
   toujours sans carte ni bordure ni icône : seul un numéro discret (même
   traitement que who-section__number) introduit chaque étape, dans le même
   esprit minimaliste que le reste de la page. */
.who-methode-steps {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl) var(--space-lg);
  list-style: none;
}

.who-methode-step__number {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  color: var(--u-ink-subtle);
}

.who-methode-step__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--u-ink);
}

.who-methode-step__body {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: #495359;
}

/* Sur une seule colonne (mobile/tablette, cf. who-section__inner--split
   ci-dessus), la grille 2x2 repasse en liste verticale simple pour garder
   des lignes de texte confortables. */
@media (max-width: 900px) {
  .who-methode-steps {
    grid-template-columns: 1fr;
  }
}

/* --------------------------- Section "Mes valeurs" ------------------------ */
/* Alternance inversée (image à gauche) : who-section--visual-left et
   who-section__visual sont réutilisées telles quelles (déjà déclarées plus
   haut pour la section 04) — aucune règle ci-dessous ne redéfinit la
   structure en 2 colonnes elle-même ni le comportement mobile de
   who-section--visual-left, déjà correct par défaut (image en premier dans
   le DOM = image au-dessus du texte en une colonne, cf. règle
   ".who-section--visual-left .who-section__visual { order:0; }" plus haut
   dans ce fichier). */

/* Largeur des colonnes alignée sur celle de la section 01 "Mon profil" :
   même ratio (1fr / 1.15fr), la colonne visuelle recevant toujours la plus
   grande part — ici la colonne visuelle est la première de la grille
   (image à gauche), d'où l'ordre inverse des valeurs par rapport à
   l'override #profil. Scopé à #valeurs uniquement : la section 04 plus bas,
   qui utilise la même classe who-section--visual-left, garde son 1fr/1fr
   d'origine, inchangé. */
@media (min-width: 901px) {
  #valeurs .who-section__inner--split {
    grid-template-columns: 1.15fr 1fr;
  }
}

/* Liste des 4 valeurs — lecture éditoriale (icône + titre marqué + courte
   accroche en italique + texte), séparateurs fins entre chaque valeur
   (var(--u-line), même token que les séparateurs déjà utilisés ailleurs sur
   le site) plutôt que des cards ou des blocs avec fond. */
.who-values {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
}

.who-value {
  display: flex;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}

.who-value:first-child {
  padding-top: 0;
}

.who-value + .who-value {
  border-top: 1px solid var(--u-line);
}

.who-value__icon {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 3px;
  color: var(--u-ink-subtle);
}

.who-value__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--u-ink);
}

.who-value__tagline {
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--u-ink-subtle);
}

.who-value__text {
  margin-top: var(--space-sm);
  max-width: 48ch;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: #495359;
}

/* ==========================================================================
   D. PAGINATION PLEIN ÉCRAN — feature/about-page-pagination
   ==========================================================================
   Toute cette section ne redéfinit toujours aucun jeton --u-* / --color-*,
   ne modifie aucune des règles ci-dessus (A/B/C), et reste strictement
   scopée à .who-pagination / .who-page / #profil-#valeurs-#vision-#methode
   DANS le contexte .who-pagination--active. Portée : qui-suis-je.html
   uniquement (js/about-pagination.js n'est chargé sur aucune autre page).

   ÉTAT PAR DÉFAUT (repli) — tant que js/about-pagination.js n'a pas posé
   .who-pagination--active sur .who-pagination, .who-pagination /
   .who-pagination__viewport / .who-page restent des conteneurs neutres
   (display de base, aucun position/transform) : les 5 sections s'affichent
   EXACTEMENT comme avant cette fonctionnalité, en flux vertical normal. Ce
   repli s'applique sans JS, si le CDN GSAP/ScrollTrigger ne charge pas, et
   AVANT que le script n'ait tranché entre mode enrichi et mode réduit.
   -------------------------------------------------------------------------- */

.who-pagination__nav {
  display: none;
}

/* Posée immédiatement par js/about-pagination.js dès qu'il s'exécute (que
   GSAP soit disponible ou non, que prefers-reduced-motion s'applique ou
   non) : seule la VISIBILITÉ de la pagination dépend de la présence du
   script, jamais du mode d'animation choisi ensuite. */
.who-pagination--nav-visible .who-pagination__nav {
  display: flex;
}

.who-pagination__nav {
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

.who-pagination__dot {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  color: var(--u-ink-subtle);
  transition: color var(--duration-fast) var(--ease-standard);
}

.who-pagination__dot:hover,
.who-pagination__dot:focus-visible {
  color: var(--color-warm);
}

.who-pagination__dot[aria-current="true"] {
  color: var(--color-warm);
}

.who-pagination__dot:focus-visible {
  outline: 2px solid var(--color-warm);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.who-pagination__sr-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .who-pagination__nav {
    right: 10px;
    gap: 4px;
  }
  .who-pagination__dot {
    width: 26px;
    height: 26px;
    font-size: 0.62rem;
  }
}

/* --------------------------------------------------------------------------
   ÉTAT ENRICHI — .who-pagination--active, posée uniquement par
   js/about-pagination.js pendant qu'un contexte gsap.matchMedia()
   desktop/tablette/mobile est actif (jamais sous prefers-reduced-motion,
   jamais sans GSAP/ScrollTrigger). C'est ici, et UNIQUEMENT ici, que les
   5 pages passent en empilement plein écran pin + scrub.
   -------------------------------------------------------------------------- */

.who-pagination--active .who-pagination__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Hauteur fixe, une seule fois pour toutes (plus de redimensionnement
     dynamique à la page la plus haute) : le débordement de contenu de
     chaque page est désormais géré par la lecture interne pilotée par le
     scrub (.who-page__content-track ci-dessous), plus par un
     agrandissement de cette boîte. */
  height: 100vh;
  height: 100dvh;
}

.who-pagination--active .who-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Fenêtre le défilement interne du contenu (.who-page__content-track) à
     exactement la hauteur de la page, sans jamais afficher de scrollbar :
     c'est ce cadrage qui rend le "y: -overflowDistance" du track invisible
     en dehors de la page elle-même. */
  overflow: hidden;
  /* Fond opaque — exactement --u-bg, le même bleu-gris que le reste du
     site (déjà posé sur body.page-universe dans universe.css, jamais
     redéfini ici). Sans cette ligne, .who-page n'a aucun fond propre : la
     page active laisse transparaître le texte/les images des pages
     précédentes/suivantes empilées derrière elle pendant la rotation
     (bug signalé par le client). Avec ce fond, chaque page se comporte
     comme une vraie feuille opaque qui masque totalement ce qu'il y a
     dessous, tout en gardant le z-index déjà posé par
     js/about-pagination.js (inchangé) pour l'ordre d'empilement. */
  background-color: var(--u-bg);
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: 0% 100%; /* bas gauche, demande explicite */
}

/* Le conteneur interne qui se translate verticalement pendant la phase de
   lecture (voir js/about-pagination.js) : hauteur naturelle (jamais forcée
   à 100%), pour que son scrollHeight réel puisse dépasser la page — c'est
   justement ce débordement qui est mesuré, puis parcouru via "y". */
.who-pagination--active .who-page__content-track {
  will-change: transform;
}

/* Centrage vertical du contenu à l'intérieur de la page pinnée — who-hero
   garde son display:flex existant (aligné en interne, inchangé) ; seules
   les sections who-section (qui n'ont par défaut aucun centrage vertical
   propre, juste un padding-block de rythme) en reçoivent un ici, scopé à
   .who-pagination--active uniquement : le rendu de repli (flux normal) ne
   voit jamais cette règle. Si le contenu déborde réellement (classe
   who-page--overflow posée par js/about-pagination.js après mesure),
   l'alignement passe en haut : la lecture doit commencer par le début du
   contenu, pas par son milieu. */
.who-pagination--active .who-section.who-page {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Marge de sécurité haute/basse, uniforme sur les 4 sections (who-hero
     garde son padding propre défini en section B, déjà correct, non
     modifié ici). --nav-height est la hauteur réelle du header fixe
     (.c-header, voir css/components.css) : ce padding-top s'adapte donc
     automatiquement à toute résolution, contrairement à une valeur fixe
     devinée pour un seul écran. Remplace à la fois le padding-block:10rem
     hérité de .universe-section (beaucoup trop généreux dans une page
     désormais pinnée à hauteur fixe : c'est ce qui faisait sous-estimer le
     débordement réel de #profil/#valeurs et déclencher la transition
     suivante trop tôt) et l'ancien correctif ponctuel de #vision plus bas
     dans ce fichier (padding-top:var(--space-lg), devenu inférieur à
     --nav-height après une passe de compaction précédente — cause du
     titre masqué par le header). js/about-pagination.js lit ce padding
     réel via getComputedStyle pour calculer la hauteur disponible. */
  padding-top: calc(var(--nav-height) + var(--space-md));
  padding-bottom: var(--space-lg);
}

.who-pagination--active .who-page.who-page--overflow {
  align-items: flex-start;
}

/* --------------------------- Compaction ciblée (100dvh) -------------------
   Objectif : faire tenir chaque page dans le viewport sans jamais couper de
   texte. Uniquement scopé à .who-pagination--active : le rendu de repli
   (fallback / reduced-motion) garde la mise en page actuelle, déjà validée,
   inchangée. Si malgré cette compaction une page reste plus haute que le
   viewport, js/about-pagination.js fait défiler son contenu interne
   (.who-page__content-track) pendant une phase de lecture dédiée, sans
   jamais couper de texte ni ouvrir de scroll indépendant. */

/* Taille de corps de texte UNIQUE pour les 3 "niveaux" de paragraphe
   présents sur les 5 pages (who-section__body : #profil/#vision/#methode ;
   who-value__text : les 4 blocs de #valeurs ; who-methode-step__body : les
   4 étapes de #methode) — avant cette règle, #profil et #valeurs avaient
   chacun leur propre clamp() différent, et #vision/#methode gardaient la
   taille de base non réduite : d'où l'impression de typographie
   incohérente entre les pages signalée par le client. Une seule valeur,
   réduction volontairement très légère (comparer à --font-size-body:1rem /
   --line-height-body:1.55 en base), mélangeant vw et vh comme demandé. */
.who-pagination--active .who-section__body,
.who-pagination--active .who-value__text,
.who-pagination--active .who-methode-step__body {
  font-size: clamp(0.85rem, 0.7vw + 0.4vh, 0.95rem);
  line-height: 1.5;
}

/* #profil — page la plus dense (10 paragraphes). Priorité 1 : élargir la
   colonne de texte (moins de lignes = moins de hauteur, "largeur de texte
   mieux exploitée" demandée) plutôt que de réduire drastiquement la
   typographie. Priorité 2 seulement : resserrer légèrement taille/interligne
   et l'espacement entre paragraphes. */
@media (min-width: 901px) {
  .who-pagination--active #profil .who-section__inner--split {
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(24px, 3.5vw, 48px);
  }
}

.who-pagination--active #profil .who-section__body {
  margin-top: var(--space-xs);
}

.who-pagination--active #profil .who-section__title {
  margin-bottom: 0;
}

.who-pagination--active #profil .who-section__number {
  margin-bottom: var(--space-2xs);
}

/* #valeurs — les 4 blocs passent d'une liste verticale à une grille 2x2 sur
   desktop/tablette large (répartition en colonnes, explicitement permise) :
   même contenu, même nombre de mots, hauteur totale divisée par ~2. Les
   séparateurs (var(--u-line), déjà utilisé au repos) suivent la nouvelle
   grille au lieu de rester uniquement horizontaux. */
@media (min-width: 901px) {
  .who-pagination--active #valeurs .who-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: var(--space-lg);
  }
  .who-pagination--active #valeurs .who-value {
    padding: var(--space-md) var(--space-lg);
    border-top: none;
  }
  .who-pagination--active #valeurs .who-value:nth-child(3),
  .who-pagination--active #valeurs .who-value:nth-child(4) {
    border-top: 1px solid var(--u-line);
  }
  .who-pagination--active #valeurs .who-value:nth-child(odd) {
    border-right: 1px solid var(--u-line);
    padding-left: 0;
  }
  .who-pagination--active #valeurs .who-value:nth-child(even) {
    padding-right: 0;
  }
}

/* #vision — resserre l'espacement entre les 5 paragraphes centrés (déjà
   volontairement plus large, --space-lg, en repos) sans toucher à la
   largeur de colonne propre à cette section. Le padding-top spécifique
   utilisé ici auparavant (var(--space-lg), 44px) a été retiré : il était
   devenu inférieur à --nav-height (88px) et faisait passer le titre sous
   le header. #vision utilise désormais le même padding-top header-safe
   que les 3 autres sections (règle .who-pagination--active
   .who-section.who-page ci-dessus). */
.who-pagination--active #vision .who-section__body {
  margin-top: var(--space-sm);
}

/* #methode — déjà en grille 2x2 : resserrage léger uniquement. */
.who-pagination--active #methode .who-methode-steps {
  margin-top: var(--space-md);
  gap: var(--space-md) var(--space-lg);
}

.who-pagination--active #methode .who-section__body {
  margin-top: var(--space-sm);
}

/* --------------------------- Mobile (<901px) -------------------------------
   Priorité absolue : lisibilité. Aucune superposition de texte, aucune
   largeur coupée, aucune image qui masque le contenu — la compaction
   desktop ci-dessus (colonnes, grille 2x2) est desactivée par les media
   queries min-width:901px déjà utilisées ; seuls des ajustements
   d'espacement, déjà présents dans les sections A/B/C de ce fichier
   (@media max-width:900px / 768px), continuent de s'appliquer. */
@media (max-width: 900px) {
  .who-pagination--active .who-page {
    padding-block: var(--space-lg);
  }
}