/* Remise à zéro minimale */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Layout : une piste horizontale de panneaux plein écran, un rail d'altitude fixe à gauche, une ligne de crête qui monte en arrière-plan. Pile verticale sous 900px. */
:root {
  --teal: #0a4a41;
  --surface: #0c5a4f;
  --ink: #fef4e1;
  --text: #f3e9d6;
  --muted: #bfd4cd;
  --terra: #f7bda1;
  --terra-deep: #b5451f;
  --sage: #9ac6b6;
  --line: #ffffff1a;
  --line-strong: #ffffff33;
  --cream: #f4ece0;
  --fs-cap: 12px;
  --fs-small: 14px;
  --fs-body: 17px;
  --fs-mid: 24px;
  --fs-h2: 38px;
  --fs-h1: clamp(40px, 3.9vw, 56px);
  --radius: 14px;
  --radius-btn: 8px;
  --rail-ring: #0a4a41;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --header-h: 76px;
  --rail-left: 40px;
  --pad-left: 210px;
  --ease: cubic-bezier(.65, 0, .25, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--teal);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
p, h1, h2, h3, ul, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--terra); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
strong { color: var(--ink); font-weight: 600; }

/* Symbole */
.mark { display: block; color: var(--ink); flex-shrink: 0; }

/* En-tête */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: var(--header-h);
  padding: env(safe-area-inset-top, 0px) 48px 0 var(--rail-left);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--teal);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-name {
  font-family: var(--serif); font-variation-settings: 'opsz' 24;
  font-size: 20px; font-weight: 500; line-height: 1.2; color: var(--ink);
}
.brand-name em { font-style: italic; font-weight: 400; }
.header-right { display: flex; align-items: center; gap: 24px; }
.counter { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.btn-ghost {
  border: 1px solid var(--line-strong); color: var(--text); text-decoration: none;
  padding: 10px 20px; font-size: var(--fs-small); border-radius: var(--radius-btn);
}
.btn-ghost:hover { border-color: var(--terra); color: var(--ink); }

/* Piste horizontale */
.viewport { position: fixed; inset: 0; overflow: hidden; }
.track {
  position: relative; display: flex; height: 100%;
  transition: transform .9s var(--ease);
  will-change: transform;
}
.ridge {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.ridge path { fill: none; stroke: var(--sage); vector-effect: non-scaling-stroke; }
.panel { position: relative; flex: 0 0 100vw; width: 100vw; height: 100%; overflow: hidden; color: var(--text); }

/* Sections claires : aplat crème, encre teal */
.panel.light {
  --ink: #0a4a41;
  --text: #23403a;
  --muted: #3d5951;
  --terra: #b5451f;
  --sage: #4f8a78;
  --surface: #fffaf2;
  --line: #0a4a411f;
  --line-strong: #0a4a4133;
}
.panel.hero { overflow: visible; }
.panel.light::before { content: ""; position: absolute; inset: 0; background: var(--cream); z-index: 0; }
body.on-light .rail {
  --line-strong: #0a4a4133;
  --terra: #b5451f;
  --sage: #3d5951;
  --muted: #3d5951;
  --rail-ring: #f4ece0;
}
.panel-inner {
  position: relative; z-index: 2;
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + 40px) 64px 64px var(--pad-left);
}
.content {
  margin-block: auto; width: 100%; max-width: 1180px;
  display: flex; flex-direction: column; gap: 28px;
}

/* Rail d'altitude */
.rail {
  position: fixed; z-index: 9;
  left: var(--rail-left); top: calc(50% + var(--header-h) / 2);
  transform: translateY(-50%);
  height: min(58vh, 520px); width: 14px;
  --p: 0%;
}
.rail-cap {
  position: absolute; left: 0; font-size: var(--fs-cap); letter-spacing: .14em;
  text-transform: uppercase; color: var(--sage); white-space: nowrap;
}
.rail-cap.top { top: -34px; }
.rail-cap.bottom { bottom: -34px; }
.rail-line, .rail-climb { position: absolute; left: 6px; width: 1px; }
.rail-line { top: 0; bottom: 0; background: var(--line-strong); }
.rail-climb { bottom: 0; height: var(--p); background: var(--terra); transition: height .9s var(--ease); }
.rail-dot {
  position: absolute; left: 6.5px; bottom: var(--p);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--terra); box-shadow: 0 0 0 4px var(--rail-ring);
  transform: translate(-50%, 50%);
  transition: bottom .9s var(--ease);
}
.rail-tick {
  position: absolute; left: -2px; bottom: calc(var(--y) * 100%);
  transform: translateY(50%);
  width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer;
}
.rail-tick::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 9px; height: 1px;
  background: var(--line-strong);
}
.rail-tick.passed::before { background: var(--terra); }
.rail-label {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  font-family: var(--sans); font-size: var(--fs-cap); letter-spacing: .14em; line-height: 1.35;
  text-transform: uppercase; white-space: nowrap; color: var(--muted);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.rail-label .alt { color: var(--sage); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.rail-tick:hover .rail-label, .rail-tick:focus-visible .rail-label { opacity: 1; }
.rail-tick.active .rail-label { opacity: 1; color: var(--terra); }

/* Typo commune */
.eyebrow { display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ""; display: block; width: 26px; height: 1px; background: var(--terra); flex-shrink: 0; }
.eyebrow span {
  font-size: var(--fs-cap); letter-spacing: .18em; text-transform: uppercase;
  color: var(--terra); font-weight: 500; line-height: 1.4;
}
h1, h2, .display {
  font-family: var(--serif); font-variation-settings: 'opsz' 72;
  font-weight: 500; color: var(--ink); text-wrap: pretty;
}
h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.015em; }
h1 em { font-style: italic; font-weight: 400; color: var(--terra); }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.012em; }
h3 {
  font-family: var(--serif); font-variation-settings: 'opsz' 24;
  font-size: var(--fs-mid); font-weight: 500; line-height: 1.2; color: var(--ink); text-wrap: pretty;
}
.lede { font-size: var(--fs-body); line-height: 1.65; color: var(--text); max-width: 60ch; }
.hero-lede { max-width: none; }
.body { display: flex; flex-direction: column; gap: 18px; max-width: 60ch; }
.head { display: flex; flex-direction: column; gap: 20px; }

/* Cartes : aplats séparés, coins arrondis */
.grid { display: grid; gap: 16px; }
.cell { background: var(--surface); border-radius: var(--radius); padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Puce ronde, rappel de la pastille du logo */
.dots { display: flex; flex-direction: column; gap: 18px; }
.dots li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 16px; align-items: start; font-size: var(--fs-body); line-height: 1.55; }
.dots li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--terra); margin-top: .5em; }
.cell p { font-size: var(--fs-body); line-height: 1.6; }

/* Ligne de clôture, motif commun sections 3 et 5 */
.closing {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  max-width: 78ch; color: var(--muted); font-size: var(--fs-body); line-height: 1.6;
}
.closing::before { content: ""; display: block; height: 1px; background: var(--sage); margin-top: .8em; }

/* Boutons */
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-block; background: var(--terra-deep); color: var(--ink);
  padding: 14px 28px; font-size: var(--fs-small); font-weight: 600; text-decoration: none; border-radius: var(--radius-btn);
}
.btn:hover { color: var(--ink); background: #9f3c1b; }

/* 1. Départ */
.hero-mark {
  position: absolute; right: -8vw; top: 50%; transform: translateY(-46%);
  width: min(78vh, 760px); height: min(78vh, 760px);
  opacity: .14; pointer-events: none; z-index: 0;
}
.hero .content { position: relative; z-index: 1; gap: 30px; }
.scroll-hint {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  font-size: var(--fs-cap); letter-spacing: .16em; text-transform: uppercase; color: var(--sage);
}
.scroll-hint svg { width: 44px; height: 10px; }
.hint-mobile { display: none; }

/* 2. Camp de base */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.verdict {
  font-family: var(--serif); font-variation-settings: 'opsz' 24; font-style: italic;
  font-weight: 400; font-size: var(--fs-mid); line-height: 1.3; color: var(--ink); max-width: 28ch;
}

/* 3. Boussole */
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 4. Ascension */
.rythme {
  font-family: var(--serif); font-variation-settings: 'opsz' 24; font-weight: 500;
  font-size: var(--fs-mid); line-height: 1.2; color: var(--ink);
}
.disc {
  background: var(--surface); border-radius: var(--radius);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; max-width: 46ch;
}
.disc .traits {
  font-family: var(--serif); font-variation-settings: 'opsz' 24; font-size: var(--fs-mid);
  font-weight: 500; line-height: 1.3; color: var(--ink);
}
.disc p:last-child { font-size: var(--fs-small); color: var(--muted); }

/* 5. Sac à dos : onglets (bureau), accordéon (mobile) */
.pack {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 40px; row-gap: 6px; align-items: start;
}
.pack-item { display: contents; }
.pack-item:nth-child(1) .pack-tab { grid-row: 1; }
.pack-item:nth-child(2) .pack-tab { grid-row: 2; }
.pack-item:nth-child(3) .pack-tab { grid-row: 3; }
.pack-item:nth-child(4) .pack-tab { grid-row: 4; }
.pack-item:nth-child(5) .pack-tab { grid-row: 5; }
.pack-tab {
  grid-column: 1; display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 20px; border: 0; border-radius: var(--radius); background: transparent;
  color: var(--muted); cursor: pointer; text-align: left; white-space: nowrap;
  font-family: var(--serif); font-variation-settings: 'opsz' 24; font-size: var(--fs-mid); font-weight: 500; line-height: 1.25;
}
.pack-tab:hover { color: var(--ink); }
.pack-tab .pip { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--terra); flex-shrink: 0; }
.pack-tab[aria-expanded="true"] { background: var(--surface); color: var(--ink); }
.pack-tab[aria-expanded="true"] .pip { background: var(--terra); }
.pack-panel {
  grid-column: 2; grid-row: 1 / span 5; align-self: stretch; min-width: 0;
  display: flex; align-items: center;
  background: var(--surface); border-radius: var(--radius); padding: 36px 44px;
}
.pack-panel[hidden] { display: none; }
.pack-panel p { font-size: var(--fs-body); line-height: 1.65; max-width: 60ch; }

/* 6. Sommet : citations hiérarchisées, sans cadre */
.quotes { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.quotes blockquote {
  font-family: var(--serif); font-variation-settings: 'opsz' 24; font-style: italic; font-weight: 400;
  font-size: var(--fs-mid); line-height: 1.4; color: var(--ink); text-wrap: pretty;
}
.q-side { display: flex; flex-direction: column; gap: 32px; }
.q-side figure + figure { border-top: 1px solid var(--line-strong); padding-top: 32px; }
.quotes figure { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 20px; }
.quotes figure::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--terra); margin-top: .55em; }

/* 7. Huggy */
.huggy { gap: 30px; }
.huggy blockquote {
  font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 500;
  font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.015em;
  color: var(--ink); white-space: nowrap;
}
.huggy blockquote em { font-style: italic; font-weight: 400; }
.huggy cite { font-style: normal; font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.huggy cite strong { display: block; font-size: var(--fs-body); }

/* 8. À propos */
.about { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 56px; align-items: center; }
.bio { max-width: none; display: block; columns: 2; column-gap: 44px; }
.bio p { line-height: 1.58; margin-bottom: 12px; orphans: 3; widows: 3; }
.photo-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-width: 100%; object-fit: cover; border-radius: var(--radius); background: var(--surface); }
.photo {
  aspect-ratio: 4 / 5; max-width: 100%; background: var(--surface);
  border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.photo .mark { width: 42%; height: auto; aspect-ratio: 1; opacity: .35; }
.photo span { font-size: var(--fs-cap); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }

/* 9. Contact */
.draft-tag {
  align-self: flex-start; font-size: var(--fs-cap); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); border: 1px dashed var(--line-strong); padding: 5px 10px; border-radius: 3px;
}
.foot a { color: var(--sage); }
.foot a:hover { color: var(--ink); }
.foot { font-size: var(--fs-small); color: var(--sage); line-height: 1.5; padding-top: 24px; border-top: 1px solid var(--line); max-width: 60ch; display: flex; flex-direction: column; gap: 18px; }
.foot p { margin: 0; }

/* Astérisque et renvoi vers la slide sherpa */
h1 .ast {
  color: var(--terra); text-decoration: none; font-family: var(--sans); font-weight: 500;
  font-size: .42em; line-height: 0; vertical-align: .95em; margin-left: .04em;
}
h1 .ast:hover { color: var(--ink); }
.footnote { align-self: flex-start; margin-top: 8px; font-size: var(--fs-small); color: var(--sage); }
.footnote:hover { color: var(--ink); }

/* 10. Sherpa */
.sherpa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sherpa .stack p { max-width: 58ch; }
.revol {
  background: var(--surface); border-radius: var(--radius); padding: 34px 36px;
  display: flex; flex-direction: column; gap: 18px;
}
.revol blockquote {
  font-family: var(--serif); font-variation-settings: 'opsz' 24; font-style: italic; font-weight: 400;
  font-size: var(--fs-mid); line-height: 1.4; color: var(--ink); text-wrap: pretty;
}
.revol figcaption {
  display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; align-items: baseline;
  font-size: var(--fs-small); color: var(--muted);
}
.revol figcaption cite { font-style: italic; }
.revol figcaption::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--terra); }
.tintin { max-width: 92ch; }
.rail { transition: opacity .4s; }
body.no-rail .rail { opacity: 0; pointer-events: none; }

/* Texte justifié : césure française pour éviter les grands blancs entre les mots */
.lede, .body p, .cell p, .pack-panel p, .bio p, .sherpa .stack p, .tintin, .dots li, .closing span {
  text-align: justify; text-justify: inter-word;
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 7 3 3; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
  text-wrap: pretty;
}

/* Mobile : pile verticale */
@media (max-width: 900px) {
  :root { --header-h: 68px; --fs-body: 16px; --fs-mid: 20px; --fs-h2: 30px; --fs-h1: 34px; }
  body { overflow: auto; overflow-x: hidden; }
  .site-header { position: sticky; top: 0; padding: env(safe-area-inset-top, 0px) 20px 0 20px; border-bottom: 0; }
  .brand .mark { width: 42px; height: 42px; }
  .brand-name { font-size: 21px; }
  .btn-ghost { display: none; }
  .viewport { position: static; overflow: visible; }
  .track { display: block; transform: none !important; transition: none; }
  .ridge, .hero-mark { display: none; }
  .panel { width: auto; height: auto; }
  #bons-tuyaux .panel-inner { padding-top: 96px; padding-bottom: 96px; }
  .panel-inner { height: auto; overflow: visible; padding: 56px 20px 64px 48px; }
  .content { margin-block: 0; }
  .rail { left: 18px; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 28px); transform: none; height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 100px); height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 100px); }
  .rail-label, .rail-cap { display: none; }
  .rail-tick { pointer-events: none; }
  h1 { line-height: 1.16; }
  h2 { font-variation-settings: 'opsz' 24; }
  .bio { columns: 1; }
  h1 br, h2 br, .hero-lede br { display: none; }
  .lede, .body p, .cell p, .pack-panel p, .bio p, .sherpa .stack p, .tintin, .dots li, .closing span { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
  .split, .about, .quotes, .sherpa { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .pack { display: flex; flex-direction: column; gap: 6px; }
  .pack-item { display: block; }
  .pack-tab { padding: 14px 16px; white-space: normal; }
  .pack-panel { margin-top: 6px; padding: 22px 20px; }
  .huggy blockquote { white-space: normal; }
  .photo, .photo-img { max-width: 260px; }
  .scroll-hint { display: none; }
  .q-side figure + figure { border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .track, .rail-climb, .rail-dot { transition: none; }
}