/* ============================================================
   Leadership sans bruit — leadershipsansbruit.com
   Base évolutive : styles partagés par toutes les pages.

   Parti pris : papier (héros) → une seule immersion bleue pour le
   manifeste → nuages → papier (l'auteur, le lien). La couleur ne
   sert qu'une fois, là où la thèse le justifie.
   Sobre, blanc, aéré : le mouvement est rare et court.
   ============================================================ */

:root {
  /* Papier & encre */
  --paper:   #FBFBF9;
  --ink:     #05193C;   /* navy de marque, releve sur le monogramme */
  --ink-2:   #4D5A6B;
  --ink-3:   #667180;
  --line:    rgba(5, 25, 60, 0.18);
  --line-2:  rgba(5, 25, 60, 0.09);

  /* Relevé sur la couverture Vuibert */
  --sea:     #0263A2;
  --sun:     #FFE271;

  --accent:  #0E68A2;
  --accent-2:#0B5586;

  /* Sur fond bleu */
  --on-sea:      #FFF7E1;
  --on-sea-soft: #D9E9F5;

  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Échelle typographique : quatre paliers, pas un de plus.
     Tout ce qui est plus petit que --fs-small devient illisible
     sur un écran de portable tenu à bout de bras. */
  --fs-micro: 13px;   /* surtitres en capitales espacées */
  --fs-small: 15px;   /* mentions, méta, pied de page */
  --fs-ui:    16px;   /* boutons, liens d'action, champs */
  --fs-base:  17px;   /* corps de texte */

  --container: 1100px;
  --gutter: clamp(22px, 5vw, 72px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-cine: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px; /* compense l'en-tête collant sur les ancres */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .25s var(--ease);
}
a:hover { color: var(--accent-2); }

.prose a { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Sur fond bleu, l'encre du focus ne se verrait pas : on passe au soleil */
.section-sea :focus-visible { outline-color: var(--sun); }
main:focus { outline: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  z-index: 100;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.arrow { flex: none; display: block; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}

/* ---------- Étiquettes éditoriales ---------- */

.overline {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
}

/* Soleil + horizon : unique reprise figurative de la couverture */
.horizon {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  margin: 0;
  padding: 0;
}
.horizon::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--sun);
  flex: none;
}
.horizon::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
  transform-origin: left;
}

/* ---------- En-tête ---------- */

.site-header {
  border-bottom: 1px solid var(--line-2);
  background: rgba(251, 251, 249, .88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--paper); }
}
.site-header .container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 22px;
  padding-bottom: 20px;
}
.brand {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .01em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.site-nav {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  letter-spacing: .02em;
}
.site-nav a { color: var(--ink-2); position: relative; padding-bottom: 3px; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-cine);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }

/* ---------- Bloc 1 — héros ---------- */

.hero {
  padding: clamp(58px, 9vw, 116px) 0 clamp(66px, 8vw, 108px);
  overflow: hidden;
  overflow: clip;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(46px, 6.4vw, 76px);
  line-height: 1.06;
  letter-spacing: -.012em;
}

.hero .tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(21px, 2.6vw, 28px);
  color: var(--accent);
  margin: 20px 0 0;
}

.hero .horizon { margin: 38px 0; max-width: 380px; }

/* Le texte au-dessus de l'onde : .hero-cover vient après dans le DOM,
   il serait peint par-dessus sans cette précaution. */
.hero-grid > div:first-child { position: relative; z-index: 1; }

.book-meta .book-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 6px;
}
.book-meta .book-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink-2);
  margin: 0 0 10px;
  line-height: 1.45;
}
.book-meta .book-edition {
  font-size: var(--fs-small);
  letter-spacing: .06em;
  color: var(--ink-3);
  margin: 0 0 30px;
}

/* ---------- Bouton ---------- */

.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: .04em;
  padding: 15px 34px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.btn:hover { background: var(--accent-2); color: #fff; }

/* ---------- Couverture ---------- */

.hero-cover { justify-self: center; position: relative; perspective: 1400px; }

/* ---------- L'onde ---------- */
/* Cousine de la géométrie Diadem : même trait fin qui se dessine, même
   discrétion. Mais rien n'orbite ici — l'onde part du livre et se propage.
   C'est la thèse du bouquin, dessinée : une impulsion sans bruit qui porte. */

.onde {
  position: absolute;
  top: 50%; left: 50%;
  width: 190%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.onde-arc {
  fill: none;
  stroke: var(--sea);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  animation:
    onde-trace 2.6s var(--ease-cine) forwards,
    onde-souffle 14s ease-in-out infinite;
}
/* Les arcs se dessinent du centre vers l'extérieur, puis respirent dans
   le même ordre : la crête paraît s'éloigner. */
.onde-arc.a1 { animation-delay: .35s, 3.0s; }
.onde-arc.a2 { animation-delay: .70s, 3.7s; }
.onde-arc.a3 { animation-delay: 1.05s, 4.4s; }
.onde-arc.a4 { animation-delay: 1.40s, 5.1s; }
.onde-arc.a5 { animation-delay: 1.75s, 5.8s; }

@keyframes onde-trace {
  from { stroke-dashoffset: 1; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: .17; }
}
@keyframes onde-souffle {
  0%, 100% { opacity: .17; }
  50%      { opacity: .07; }
}

/* L'astre : le soleil de la couverture, en orbite lente autour du livre.
   Il passe derrière lui en haut et en bas — une éclipse à chaque tour. */
.onde-orbite {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: onde-orbite 46s linear infinite;
}
.onde-astre { fill: var(--sun); }
@keyframes onde-orbite { to { transform: rotate(360deg); } }

.hero-cover picture { position: relative; z-index: 1; }
.hero-cover img {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  width: min(340px, 100%);
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(5, 25, 60, .12),
    0 34px 70px -32px rgba(5, 25, 60, .45);
  transition: transform .45s var(--ease-cine), box-shadow .5s var(--ease);
  will-change: transform;
}
.hero-cover:hover img {
  box-shadow:
    0 2px 3px rgba(5, 25, 60, .14),
    0 44px 84px -36px rgba(5, 25, 60, .52);
}

/* ---------- Sections ---------- */

.section { padding: clamp(64px, 9vw, 110px) 0; }
.section h2 {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.008em;
  margin: 0 0 34px;
}
.prose { max-width: 66ch; }

/* ---------- Bloc 2 — le manifeste, seule immersion bleue ---------- */

.section-sea {
  position: relative;
  background: var(--sea);
  color: var(--on-sea-soft);
  padding: 0;
  overflow: hidden;
}
/* padding-top/bottom seulement : le raccourci `padding` écraserait la
   gouttière horizontale héritée de .container */
.section-sea .inner {
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(54px, 7vw, 88px);
}
.section-sea h2 { color: var(--on-sea); }
.section-sea .overline { color: var(--on-sea-soft); }
.section-sea .prose { color: var(--on-sea-soft); }

/* Ligne d'horizon : la bande plus sombre qui court sous la ligne d'eau
   sur la couverture. Un seul trait, à l'entrée dans le bleu. */
.section-sea::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 9px;
  background: #0B4670;
}

/* Lever de soleil : ancré en unités absolues, pas en % de la section */
.sun-glow {
  position: absolute;
  bottom: clamp(-150px, -13vw, -60px);
  left: 50%;
  width: min(760px, 105vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 241, 199, .22) 0%, rgba(255, 241, 199, .09) 40%, transparent 66%);
  pointer-events: none;
}

/* La vidéo est un format vertical (Short) : le cadre suit, sinon on afficherait
   une vignette minuscule au milieu de deux bandes noires. */
.video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 340px;
  background: rgba(11, 70, 112, .45);
  border: 1px solid rgba(255, 247, 225, .18);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto 56px;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Façade : l'affiche du film, cliquable en entier. */
.video-play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--on-sea);
  font: inherit;
}
.video-play img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-cine), opacity .3s var(--ease);
}
.video-play:hover img,
.video-play:focus-visible img { transform: scale(1.03); opacity: .88; }

.video-play-marque {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: rgba(5, 25, 60, .55);
  border: 1px solid rgba(255, 247, 225, .5);
  backdrop-filter: blur(2px);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.video-play-marque svg { margin-left: 3px; }
.video-play:hover .video-play-marque,
.video-play:focus-visible .video-play-marque {
  background: rgba(5, 25, 60, .78);
  transform: translate(-50%, -50%) scale(1.06);
}
.video-play-texte {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
  font-size: var(--fs-small);
  letter-spacing: .05em;
  text-shadow: 0 1px 12px rgba(5, 25, 60, .75);
}
.video-play:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .video-play img,
  .video-play-marque { transition: none; }
  .video-play:hover img,
  .video-play:focus-visible img { transform: none; }
}

/* Le manifeste : traité comme une page de livre, pas comme du texte courant. */
.manifeste {
  max-width: 40em;
  margin: 0 0 8px;
}
.manifeste p {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.35vw, 26px);
  line-height: 1.62;
  margin: 0 0 1.05em;
}
/* La phrase qui nomme le concept : c'est le pivot du texte. */
.manifeste .pivot { font-style: italic; }
.manifeste .amorce {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  margin-top: 1.6em;
}
.section-sea .manifeste p { color: var(--on-sea-soft); }
.section-sea .manifeste .pivot { color: var(--on-sea); }
.section-sea .manifeste .amorce { color: var(--on-sea-soft); }

/* Les trois repères : liste éditoriale, pas une grille de piliers.
   Le verbatim du client est lui-même une liste « Terme — question ». */
.reperes {
  margin: 46px 0 0;
  padding: 0;
  max-width: 74ch;
}
.reperes > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0 32px;
  align-items: baseline;
  padding: 17px 0;
  border-top: 1px solid rgba(255, 247, 225, .22);
}
.reperes > div:last-child { border-bottom: 1px solid rgba(255, 247, 225, .22); }
.reperes dt {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--on-sea);
}
.reperes dd {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--on-sea-soft);
}

/* ---------- Bloc 3 — l'auteur ---------- */

.bio-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(36px, 6vw, 72px);
  align-items: start;
}
.bio-grid .portrait img { width: 220px; border-radius: 4px; }

.bio-links {
  display: flex;
  gap: 36px;
  margin-top: 28px;
  font-size: var(--fs-ui);
}
.bio-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.bio-links a .arrow { transition: transform .35s var(--ease-cine); }
.bio-links a:hover { border-color: var(--accent-2); }
.bio-links a:hover .arrow { transform: translateX(4px); }

/* ---------- Bloc 4 — rester en lien ---------- */

.newsletter {
  border-top: 1px solid var(--line-2);
  text-align: center;
}
.newsletter h2 { margin-bottom: 16px; }

/* Promesse éditoriale de la newsletter (texte fourni par le client) */
.newsletter .promesse {
  max-width: 54ch;
  margin: 0 auto 38px;
  color: var(--ink-2);
}

.newsletter form {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 0 auto;
}
.newsletter input {
  font: inherit;
  font-size: var(--fs-ui);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 13px 18px;
  min-width: 0;
}
.newsletter input::placeholder { color: var(--ink-2); opacity: 1; }
.newsletter input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}
.newsletter input[name="EMAIL"]  { flex: 2 1 240px; }

/* Confirmation d'inscription : prend la place du formulaire, meme aplomb.
   Meme bleu que « Inspirer sans imposer » -- c'est le seul endroit du site ou
   la couleur porte une phrase, elle signale ici que quelque chose a eu lieu. */
.newsletter .confirmation {
  font-family: var(--font-display);
  font-size: var(--fs-lead, 20px);
  color: var(--accent);
  max-width: 46ch;
  margin: 0 auto;
  line-height: 1.55;
}
.newsletter .confirmation--erreur {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--ink-2);
  margin-top: 16px;
}
.newsletter .btn { flex: 0 0 auto; }

.newsletter .rgpd {
  font-size: var(--fs-small);
  color: var(--ink-3);
  max-width: 56ch;
  margin: 18px auto 0;
  line-height: 1.6;
}

.newsletter .linkedin {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 36px;
  font-size: var(--fs-ui);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease);
}
.newsletter .linkedin:hover { border-color: var(--accent-2); }
.newsletter .linkedin .arrow { transition: transform .35s var(--ease-cine); }
.newsletter .linkedin:hover .arrow { transform: translateX(4px); }

/* Champ anti-robots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pied de page ---------- */

.site-footer {
  border-top: 1px solid var(--line-2);
  padding: 40px 0 48px;
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer nav { display: flex; gap: 28px; flex-wrap: wrap; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--ink); }

/* ---------- Pages intérieures (base évolutive) ---------- */

.page { padding: clamp(56px, 8vw, 96px) 0; }
.page h1 { font-size: clamp(34px, 4.6vw, 52px); margin-bottom: 34px; }
.page h2 { font-size: 24px; margin: 40px 0 12px; }

/* ---------- Apparitions au défilement ---------- */
/* Sans JS ou en mouvement réduit : tout reste visible.
   L'image de couverture (élément LCP) n'est jamais retardée. */

.has-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-cine), transform .65s var(--ease-cine);
}
.has-reveal .reveal.in { opacity: 1; transform: none; }

/* Le filet de l'horizon se déploie vers la droite */
.has-reveal .horizon::after { transform: scaleX(0); transition: transform .9s var(--ease-cine) .15s; }
.has-reveal .horizon.in::after { transform: scaleX(1); }

@media (max-width: 820px) {
  .has-reveal .reveal {
    transform: translateY(10px);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
    transition-delay: 0ms !important;
  }
  .has-reveal .horizon::after { transition: transform .5s var(--ease) .1s; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .onde { width: 155%; }
}

@media (max-width: 900px) {
  /* Contre-intuitif mais nécessaire : la couverture masque le centre de
     l'onde. La rétrécir la ferait disparaître — on l'élargit au contraire,
     pour que les arcs et l'astre débordent bien de part et d'autre du livre. */
  .onde { width: 190%; }
  .hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .hero-cover { order: -1; }
  .hero-cover img { width: min(280px, 70vw); }
  .bio-grid { grid-template-columns: 1fr; }
  .bio-grid .portrait img { width: 180px; }
}

@media (max-width: 620px) {
  .reperes > div { grid-template-columns: 1fr; gap: 4px; padding: 15px 0; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 0; }
  .site-header { position: static; }
  .site-header .container { flex-direction: column; gap: 10px; align-items: flex-start; }
  .site-nav { gap: 22px; }
  .bio-links { flex-direction: column; gap: 16px; align-items: flex-start; }
  .newsletter h2 br { display: none; }
  .newsletter form { flex-direction: column; }
  .newsletter input[name="PRENOM"],
  .newsletter input[name="EMAIL"] { flex: 0 0 auto; width: 100%; }
  .newsletter .btn { width: 100%; }
  .site-footer .container { flex-direction: column; gap: 18px; }
}

/* L'ombre de l'en-tête n'a de sens que s'il flotte réellement */
@media (min-width: 641px) {
  .site-header.is-stuck {
    border-color: transparent;
    box-shadow: 0 10px 30px -22px rgba(5, 25, 60, .55);
  }
}

/* Écrans tactiles : aucun état de survol persistant */
@media (hover: none) {
  .hero-cover img { will-change: auto; }
  .hero-cover:hover img {
    box-shadow: 0 1px 2px rgba(5, 25, 60, .12), 0 34px 70px -32px rgba(5, 25, 60, .45);
  }
  .btn:hover { background: var(--ink); }
  .site-nav a:hover::after { transform: scaleX(0); }
  .bio-links a:hover .arrow,
  .newsletter .linkedin:hover .arrow { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .has-reveal .reveal { opacity: 1 !important; transform: none !important; }
  .has-reveal .horizon::after { transform: scaleX(1) !important; }
  /* L'onde reste visible mais ne respire plus, l'astre s'immobilise */
  .onde-arc { stroke-dashoffset: 0; opacity: .14; }
  .hero-cover img { transform: none !important; }
}

/* ---------- Impression ---------- */
/* Les couleurs du fond bleu sont posées sur les enfants : il faut la même
   spécificité ici, sinon le manifeste s'imprime en blanc sur blanc. */

@media print {
  .site-header, .site-footer, .newsletter, .video-frame, .sun-glow, .onde { display: none; }
  .section-sea { background: none; }
  .section-sea h2,
  .reperes dt { color: var(--ink); }
  .section-sea .prose,
  .section-sea .overline,
  .section-sea .manifeste p,
  .reperes dd { color: var(--ink-2); }
  .section-sea .manifeste .pivot { color: var(--ink); }
  .section-sea::before { display: none; }
  .reperes > div { border-color: var(--line); }
}