/* SHIPEO Logistics Engineering — page styles.
   Tokens first (the rebrand), then the page's own classes. Nothing here restyles
   .sc-stage, .sc-copy or any [data-sc-*] selector: those are the mechanism. */

/* ------------------------------------------------------------- fonts -- */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 100% 125%; font-display: swap;
  src: url("assets/fonts/Archivo-400_800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 100% 125%; font-display: swap;
  src: url("assets/fonts/Archivo-400_800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

/* ------------------------------------------------------------ tokens -- */
:root {
  /* Sol terre (actes 1 à 3). */
  --sc-canvas:     #12100D;
  --sc-surface:    #1A1712;
  --sc-ink:        #F2EDE4;
  --sc-ink-soft:   #A79C8C;
  /* Accent unique, le bleu ciel du logo, constant sur les deux sols. */
  --sc-accent:     #6FB0E0;
  --sc-accent-ink: #08151F;

  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --sc-shadow-color: 30 25% 3%;
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px;

  --sea:   #08151F;
  --terre: #12100D;

  /* The waterline. JS writes --wl-y (px from the top). Fallback = low position. */
  --wl-off: 3.25rem;
  --wl-y: calc(100svh - var(--wl-off));

  /* Copy sits above the low waterline with room to spare. */
  --copy-bottom: clamp(6.5rem, 15vh, 10.5rem);
}
/* Sol mer (actes 4 à 7). color is restated because inherited color is computed, not live. */
.g-sea {
  --sc-canvas:   #08151F;
  --sc-surface:  #0E1E2C;
  --sc-ink:      #E6EDF2;
  --sc-ink-soft: #8CA0AE;
  --sc-shadow-color: 205 45% 3%;
  color: var(--sc-ink);
}

body { font-weight: 400; }
/* Light on dark: a touch more tracking and leading than light-mode metrics. */
.sc-body { letter-spacing: 0.002em; line-height: 1.66; }
.sc-display { font-weight: 500; }
.sc-display--xl { font-weight: 700; font-stretch: 125%; letter-spacing: -0.04em; }

/* ------------------------------------------------------- the waterline -- */
.wl { position: fixed; inset: 0; z-index: var(--sc-z-chrome); pointer-events: none; }
.wl__line {
  position: absolute; left: 0; right: 0; top: var(--wl-y); height: 1px;
  background: color-mix(in oklab, var(--sc-ink) 38%, transparent);
  will-change: top;
}
.wl__bar {
  position: absolute; left: 0; right: 0; top: calc(var(--wl-y) - 2.25rem); height: 2.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5);
  padding-inline: var(--sc-gutter);
  pointer-events: auto;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 500;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
  transition: opacity 220ms var(--sc-ease-out);
}
.wl--rising .wl__bar { opacity: 0; pointer-events: none; }
/* Horizon high (acts 4 to 7): page content scrolls under the labels, so the band above
   the line takes a translucent canvas backdrop. Functional, not decorative: it is what
   keeps the fixed labels legible over the lanes table and the arrival copy. */
.wl__back { position: absolute; left: 0; right: 0; top: 0; height: var(--wl-y); opacity: 0; pointer-events: none;
  background: color-mix(in oklab, var(--sc-canvas) 78%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity 260ms var(--sc-ease-out); }
.wl--high .wl__back { opacity: 1; }
/* Horizon low (acts 1 to 3, close): a soft foot gradient under the labels, so they hold
   over a bright frame (the grey sky of the peak's entry slide). Hidden while rising. */
.wl__foot { position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% - var(--wl-y) + 4rem); opacity: 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 60%, transparent) 40%, transparent 100%);
  transition: opacity 260ms var(--sc-ease-out); }
.wl--low .wl__foot { opacity: 1; }
.wl__brand { display: flex; align-items: center; gap: 0.6rem; color: var(--sc-ink); text-decoration: none; white-space: nowrap; }
.wl__brand img { height: 1.6rem; width: auto; opacity: 0.92; }
.wl__stages { display: flex; gap: clamp(0.9rem, 1.8vw, 1.8rem); list-style: none; margin: 0; padding: 0; }
.wl__stages a {
  display: block; position: relative; color: var(--sc-ink-soft); text-decoration: none;
  padding: 0.55rem 0; white-space: nowrap;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.wl__stages a:hover { color: var(--sc-ink); }
.wl__stages a.is-current { color: var(--sc-accent); }
/* The current stage is a lit segment of the horizon itself. */
.wl__stages a.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--sc-accent);
}
.wl__stages a:active { transform: translateY(1px); }
.wl__lang { display: flex; gap: 0.5rem; white-space: nowrap; }
.wl__lang a { color: var(--sc-ink-soft); text-decoration: none; padding: 0.55rem 0; }
.wl__lang a:hover { color: var(--sc-ink); }
.wl__lang a[aria-current] { color: var(--sc-ink); }

/* The sea, inside the peak's stage: from the waterline down. */
.sea {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--wl-y); z-index: 2;
  background: linear-gradient(to bottom, rgb(8 21 31 / 0.55), rgb(8 21 31 / 0.86));
  pointer-events: none; will-change: top;
}
.sea::before {
  /* the surface: a faint lighter film just under the line */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6rem;
  background: linear-gradient(to bottom, rgb(111 176 224 / 0.16), transparent);
}
@media (prefers-reduced-motion: reduce) { .sea { display: none; } }

/* ------------------------------------------------------------ shades --
   Density only where the copy sits. Corner on desktop, band on phones, where both
   anchors become a full-width block. Sibling of the copy, never a child. */
.shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.shade--lead { background: linear-gradient(to top right,
  color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
  color-mix(in oklab, var(--sc-canvas) 88%, transparent) 26%,
  color-mix(in oklab, var(--sc-canvas) 64%, transparent) 46%,
  color-mix(in oklab, var(--sc-canvas) 24%, transparent) 62%,
  transparent 78%); }
.shade--trail { background: linear-gradient(to top left,
  color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
  color-mix(in oklab, var(--sc-canvas) 88%, transparent) 26%,
  color-mix(in oklab, var(--sc-canvas) 64%, transparent) 46%,
  color-mix(in oklab, var(--sc-canvas) 24%, transparent) 62%,
  transparent 78%); }

/* ------------------------------------------------------------ copy blocks -- */
.copy { bottom: var(--copy-bottom); display: grid; gap: var(--sc-4); }
.copy--wide { max-width: min(58rem, 82vw); }
.h1 { max-width: 30ch; }
.lede { font-size: var(--sc-t-lg); line-height: 1.42; letter-spacing: var(--sc-track-snug); color: var(--sc-ink); max-width: 44ch; margin: 0; text-wrap: pretty; }

/* The slate: the transport-document idiom. Place, operation, condition. */
.slate {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 400;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; line-height: 1.7;
  color: var(--sc-ink-soft); margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.7em;
}
.slate b { color: var(--sc-accent); font-weight: 500; }
.slate__sep { color: color-mix(in oklab, var(--sc-ink-soft) 55%, transparent); }
.slate--stack { display: grid; gap: 0.1em; }
.slate--stack .slate__sep { display: none; }
.slate--stack span:first-child, .slate--stack b { color: var(--sc-ink); }
.slate--wait { color: var(--sc-ink); }
/* Over media the slate reads in full ink; the soft tint is for plain ground only. */
.copy .slate, .term__copy .slate { color: var(--sc-ink); }

/* --------------------------------------------------------------- 2 · rail -- */
.rail { height: 100svh; }
.rail__img { flex: none; height: 100svh; width: max(170vw, 180svh); max-width: none; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .rail__img { width: 100vw; } }

/* ----------------------------------------------------------- 3 · terminal -- */
.term { background: var(--sc-canvas); }
.term__img {
  position: absolute; left: 0; top: 0; width: 100%; height: max(132vw, 150svh); object-fit: cover;
  transform: translate3d(0, calc(var(--sc-p, 0) * (100svh - 100%)), 0);
  will-change: transform;
}
.term__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to left,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 84%, transparent) 38%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 58%,
    transparent 76%);
}
.term__copy {
  position: absolute; z-index: var(--sc-z-copy); right: var(--sc-gutter); top: 50%; translate: 0 -50%;
  width: min(34rem, 42vw); display: grid; gap: var(--sc-5); bottom: auto;
}
.term__copy > [data-sc-cue] { grid-area: auto; }
/* every cued line lives in the same column; the list stacks under the heading */
.docs { margin: 0; display: grid; gap: var(--sc-3); }
.docs__row {
  display: grid; grid-template-columns: 9.5ch 1fr; gap: var(--sc-4);
  padding-top: var(--sc-3); border-top: 1px solid var(--sc-hairline-strong);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); line-height: 1.5;
}
.docs__row dt { color: var(--sc-accent); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.docs__row dd { color: var(--sc-ink); margin: 0; }
.slate--wait { position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(var(--wl-off) + 3rem); }
@media (prefers-reduced-motion: reduce) { .term__img { transform: none; height: 100svh; } }

/* ----------------------------------------------------------- 5 · sea flow -- */
.mer { padding-top: var(--sc-7); }
.mer__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8); align-items: start; }
.mer__fig { margin: 0; display: grid; gap: var(--sc-3); overflow: clip; }
.mer__fig picture { overflow: clip; }
.mer__img { width: 100%; height: auto; aspect-ratio: 1920 / 1066; object-fit: cover;
  transform: translate3d(calc((var(--sc-p, 0.5) - 0.5) * -3%), 0, 0) scale(1.05); transform-origin: 50% 50%; will-change: transform; }
.mer__text { padding-top: var(--sc-4); }
.lines { width: 100%; border-collapse: collapse; font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); }
.lines caption { text-align: left; padding-bottom: var(--sc-3); }
.lines th, .lines td { text-align: left; padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline-strong); vertical-align: top; font-weight: 400; }
.lines th { color: var(--sc-ink); padding-right: var(--sc-5); white-space: nowrap; }
.lines td { color: var(--sc-ink-soft); }
.lines tr:last-child th, .lines tr:last-child td { border-bottom: 1px solid var(--sc-hairline-strong); }
@media (prefers-reduced-motion: reduce) { .mer__img { transform: none; } }

/* ------------------------------------------------------------ 6 · arrival -- */
.arr { padding-top: var(--sc-8); }
.arr__fig { margin: 0; }
.arr__img { width: 100%; height: min(72svh, 56vw); object-fit: cover; }
.arr__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-4) var(--sc-8); padding-top: var(--sc-6); align-items: end; }
.arr__copy .slate { grid-column: 1; }
.arr__h { grid-column: 1; grid-row: 2; }
.arr__copy .sc-body { grid-column: 2; grid-row: 2; align-self: end; }

/* --------------------------------------------------------------- 7 · close -- */
.close { display: grid; place-items: center; align-content: center; gap: var(--sc-8); padding: var(--sc-8) var(--sc-gutter) 6.5rem; background: var(--sc-canvas); }
.plate { width: min(40rem, 100%); display: grid; gap: var(--sc-6); }
.plate__head { display: grid; justify-items: start; gap: var(--sc-2); }
.plate__mark { height: 4.5rem; width: auto; margin-bottom: var(--sc-3); }
.plate__word { font-family: var(--sc-font-display); font-weight: 800; font-stretch: 125%; font-size: var(--sc-t-3xl); line-height: 0.92; letter-spacing: -0.03em; margin: 0; color: var(--sc-ink); }
.plate__sub { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); margin: 0; }
.plate__rows { margin: 0; display: grid; }
.plate__row[hidden] { display: none; }
.plate__row { display: grid; grid-template-columns: 9.5ch 1fr; gap: var(--sc-5); padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline-strong);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); line-height: 1.5; }
.plate__row:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.plate__row dt { color: var(--sc-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--sc-t-xs); padding-top: 0.15em; margin: 0; }
.plate__row dd { margin: 0; color: var(--sc-ink); }
.plate__row a { color: var(--sc-accent); font-weight: 500; text-decoration-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); padding: 0.35rem 0; margin: -0.35rem 0; display: inline-block; }
.plate__row a:hover { text-decoration-color: var(--sc-accent); }
.plate__row a:active { transform: translateY(1px); }
.foot { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 7.25rem;
  display: flex; justify-content: space-between; gap: var(--sc-5); flex-wrap: wrap;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.foot a { color: var(--sc-ink-soft); padding: 0.4rem 0; }
.foot a:hover { color: var(--sc-ink); }

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  :root { --copy-bottom: 5.75rem; }
  .wl__stages a:not(.is-current) { display: none; }
  .wl__brand img { display: none; }
  .wl__bar { gap: var(--sc-4); }
  .copy { gap: var(--sc-3); }
  .h1 { font-size: var(--sc-t-xl); max-width: none; }
  .lede { font-size: var(--sc-t-base); }
  .sc-display--md { font-size: var(--sc-t-xl); }
  .copy--wide .sc-display--lg { font-size: var(--sc-t-2xl); }
  .term__copy { right: var(--sc-gutter); left: var(--sc-gutter); top: auto; translate: none; bottom: 5.75rem; width: auto; gap: var(--sc-4); }
  .term__scrim { background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 44%,
    color-mix(in oklab, var(--sc-canvas) 60%, transparent) 64%,
    color-mix(in oklab, var(--sc-canvas) 20%, transparent) 78%,
    transparent 90%); }
  .docs__row { grid-template-columns: 8ch 1fr; font-size: var(--sc-t-xs); }
  .docs__row dd { font-size: var(--sc-t-sm); }
  .mer__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .arr__img { height: 56svh; }
  .arr__copy { grid-template-columns: 1fr; }
  .arr__copy .sc-body, .arr__h { grid-column: 1; grid-row: auto; }
  .arr__h { font-size: var(--sc-t-3xl); }
  .close { padding: var(--sc-7) var(--sc-gutter) 7.5rem; gap: var(--sc-6); }
  .plate__mark { height: 3.5rem; }
  .plate__row { grid-template-columns: 8ch 1fr; gap: var(--sc-4); }
  .foot { bottom: 8rem; }
  .shade--lead, .shade--trail { background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 28%,
    color-mix(in oklab, var(--sc-canvas) 66%, transparent) 46%,
    color-mix(in oklab, var(--sc-canvas) 26%, transparent) 60%,
    transparent 74%); }
}