/* ==========================================================================
   Page Parcours (/a-propos) — complément de main.css et projet.css.
   Aucune couleur écrite ici : uniquement les variables de main.css
   (vérifié par tests/build.test.js ; contrastes dans tests/contrast.test.js).
   Composants réutilisés tels quels : .eyebrow, .tools__title, .p-hero__titre
   (et son apparition), .p-texte, .stats/.stat, .state, .btn, .contact,
   .liquid-fallback, curseur, en-tête et pied de page.
   ========================================================================== */
.page-parcours {
  --mesure: 64ch;          /* largeur de ligne des textes longs (comme les projets) */
  --rayon: 14px;
  --pa-sommaire: 13.5rem;  /* largeur du sommaire latéral */
  --pa-espace: clamp(4.5rem, 13vh, 9rem);
}

/* Masqué à l'écran, lu par les lecteurs d'écran */
.pa-masque {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Hero ---------- */
.pa-hero {
  position: relative; display: grid; gap: 1.5rem; align-items: end;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) var(--pa-espace);
}
.pa-hero .eyebrow { margin-top: clamp(1rem, 6vh, 4rem); }
.pa-hero__titre.p-hero__titre {
  margin: 0 0 0 -.05em; max-width: none; white-space: nowrap;
  font-size: var(--h1-xl); font-stretch: 96%; letter-spacing: -.05em; line-height: .84;
}
@media (max-width: 759px) {
  .pa-hero__titre.p-hero__titre { font-size: 16.5vw; }   /* « Paul Féry » tient sur une ligne et occupe la largeur */
}
.pa-hero__intro {
  font-size: clamp(1.25rem, 2.2vw, 2.1rem); font-weight: 500; font-stretch: 92%; line-height: 1.22; letter-spacing: -.01em;
  color: var(--paper-dim); max-width: 34ch; text-wrap: pretty;
}
.pa-hero__intro sup { font-size: .55em; line-height: 0; }

.pa-portrait { position: relative; margin: 0; width: min(68vw, 20rem); justify-self: end; }
.pa-portrait__cadre { overflow: hidden; border-radius: var(--rayon); aspect-ratio: 1; }
.pa-portrait__cadre img { width: 100%; height: 100%; object-fit: cover; }
/* Goutte figée en CSS (composant de l'accueil) : visible sans WebGL ou en mouvement réduit */
.pa-portrait .liquid-fallback {
  width: clamp(4.5rem, 9vw, 7rem); right: -1.75rem; bottom: -1.75rem; top: auto; z-index: 1; animation-duration: 18s;
}
/* Masque du portrait avant sa révélation (JS) ; filet de sécurité si le script ne se lance pas */
.js:not(.rm) .pa-portrait__cadre { clip-path: inset(100% 0 0 0); animation: pa-secours 0s 2.5s forwards; }
@keyframes pa-secours { to { clip-path: inset(0 0 0 0); } }

@media (min-width: 960px) {
  .pa-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .pa-hero > * { grid-column: 1 / -1; }
  .pa-hero__intro { grid-column: 1 / 8; }
  .pa-portrait { grid-column: 9 / 13; width: 100%; max-width: 20rem; }
}

/* ---------- Corps : sommaire + sections ---------- */
.pa-corps { display: grid; gap: 2.5rem; padding: 0 var(--gutter); }
.pa-sections { min-width: 0; }

.pa-sommaire ol { display: grid; border-top: 1px solid var(--line); }
.pa-sommaire li { border-bottom: 1px solid var(--line); }
.pa-sommaire a {
  display: flex; align-items: baseline; gap: .9rem; min-height: 44px; padding: .75rem 0;
  color: var(--paper-dim); transition: color 300ms var(--ease-out);
}
.pa-sommaire__num { color: var(--grey); transition: color 300ms var(--ease-out); }
.pa-sommaire a:hover, .pa-sommaire a:focus-visible { color: var(--paper); }
.pa-sommaire a[data-active="true"] { color: var(--paper); }
.pa-sommaire a[data-active="true"] .pa-sommaire__num { color: var(--accent); }

@media (min-width: 1100px) {
  .pa-corps { grid-template-columns: var(--pa-sommaire) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
  .pa-sommaire { position: sticky; top: calc(var(--header-h) + 2rem); padding-top: var(--pa-espace); }
  .pa-sommaire ol { border-top: 0; }
  .pa-sommaire li { border-bottom: 0; }
  .pa-sommaire a { position: relative; padding: .45rem 0 .45rem 1.1rem; min-height: 0; }
  .pa-sommaire a::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
    background: var(--accent); transform: scale(0); transition: transform 350ms var(--ease-out);
  }
  .pa-sommaire a[data-active="true"]::before { transform: scale(1); }
}

.pa-section { padding-top: var(--pa-espace); scroll-margin-top: var(--header-h); display: grid; gap: 1.25rem; align-content: start; }
.pa-section__titre { margin-bottom: clamp(1rem, 4vh, 2.5rem); text-wrap: balance; }
.pa-section .p-texte code { overflow-wrap: anywhere; }

/* ---------- Parcours : frise verticale ---------- */
.pa-frise { position: relative; padding-left: 2.25rem; }
.pa-frise::before, .pa-frise__trait {
  content: ""; position: absolute; left: .4rem; top: .55rem; bottom: .55rem; width: 1px; background: var(--line);
}
.pa-frise__trait { width: 2px; margin-left: -.5px; background: var(--accent); transform-origin: 50% 0; }
.pa-frise__etapes { display: grid; gap: clamp(2.75rem, 7vh, 4.5rem); }
.pa-etape { position: relative; display: grid; gap: .75rem; }
.pa-etape::before {
  content: ""; position: absolute; left: calc(-2.25rem + .4rem - 6px); top: .3rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--grey); transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.no-js .pa-etape::before, .rm .pa-etape::before, .pa-etape.is-atteinte::before { background: var(--accent); border-color: var(--accent); }
.pa-etape__repere { color: var(--grey); }
.pa-etape__titre { font-size: clamp(1.45rem, 2.4vw, 2.2rem); font-weight: 800; font-stretch: 88%; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }

/* ---------- Ce que je cherche ---------- */
.pa-cherche__phrase {
  font-size: clamp(1.9rem, 4.4vw, 4.4rem); font-weight: 800; font-stretch: 84%; line-height: 1.02; letter-spacing: -.025em;
  max-width: 20ch; text-wrap: balance;
}
.pa-cherche__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: .75rem; }
.no-js [data-copy] { display: none; }

/* ---------- Construction du site : six blocs ouverts ---------- */
.pa-points { display: grid; border-top: 1px solid var(--line); margin-top: clamp(1.5rem, 5vh, 3rem); }
.pa-point { display: grid; gap: 1.1rem; align-content: start; padding: clamp(2rem, 5vh, 3rem) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.pa-point__num { display: flex; align-items: center; gap: .6rem; color: var(--grey); }
.pa-point__titre { font-size: clamp(1.4rem, 2.1vw, 2rem); font-weight: 800; font-stretch: 88%; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.pa-stats { gap: 1.5rem 2.5rem; }
.pa-stats .stat__num { font-size: clamp(2.4rem, 4.2vw, 3.8rem); }
.pa-point .p-texte { font-size: clamp(1rem, 1.05vw, 1.12rem); }
@media (min-width: 900px) {
  .pa-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
}

/* ---------- Révisions : frise, la plus récente en haut ---------- */
.pa-revisions { display: block; width: 100%; border-collapse: collapse; }
.pa-revisions tbody { position: relative; display: grid; }
.pa-revisions tbody::before {
  content: ""; position: absolute; left: 1.2rem; top: 1.5rem; bottom: 1.5rem; width: 1px; background: var(--line);
}
.pa-revisions tr {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); grid-template-areas: "indice date" "indice texte";
  column-gap: 1.25rem; row-gap: .3rem; padding: 1rem 0; align-items: start;
}
.pa-revisions th[scope="row"] {
  grid-area: indice; position: relative; z-index: 1; display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--grey); border-radius: 50%; background: var(--bg); color: var(--paper);
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 400;
}
.pa-revisions tbody tr:first-child th[scope="row"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pa-revisions td { padding: 0; }
.pa-revisions td:nth-of-type(1) { grid-area: date; color: var(--grey); padding-top: .2rem; }
.pa-revisions td:nth-of-type(2) { grid-area: texte; color: var(--paper-dim); max-width: var(--mesure); line-height: 1.55; text-wrap: pretty; }
@media (min-width: 760px) {
  .pa-revisions tr { grid-template-columns: 2.4rem 7.5rem minmax(0, 1fr); grid-template-areas: "indice date texte"; align-items: baseline; }
  .pa-revisions th[scope="row"] { align-self: center; }
}

/* ---------- Contact : même bloc que l'accueil ---------- */
.page-parcours .contact { margin-top: var(--pa-espace); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .pa-sommaire a, .pa-sommaire a::before, .pa-etape::before { transition: none; }
}