/* Network Effect, style « Studio ». Jetons, composants et mouvements repris tels quels du prototype
   (handoff/reference/prototype/index.html) ; les ajouts du site sont en fin de fichier. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/inter-latin-var.0a65262cb0.woff2') format('woff2');
}
:root {
  --bg: #FFFFFF;
  --band: #F5F5F7;
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --dim: #C7C7CC;
  --hair: #D2D2D7;
  --brand: #084151;
  --on-brand: #FFFFFF;
  --link: #0A6A84;
  --orange: #E97E1C;
  --orange-ink: #B5560B;
  --mark: #1D1D1F;
  --mark-op: 0.045;
  --nav-bg: rgba(255, 255, 255, 0.78);
  --chip-bg: rgba(210, 210, 215, 0.64);
  --stage-bg: #000000;
  --stage-ink: #F5F5F7;
  --stage-muted: #A1A1A6;
  --stage-off: #1F1F22;
  --scene-bg: #FFFFFF;
  --coin: #F5F5F7;
  --light-only: block;
  --dark-only: none;
  --puce: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1906 1714%22%3E%3Cg transform=%22translate%28-206 -192%29%22%3E%3Cg class=%22c%22 fill=%22%23084151%22%3E%3Crect x=%22218%22 y=%221378%22 width=%221893%22 height=%22220%22/%3E%3Crect x=%22218%22 y=%221073%22 width=%221893%22 height=%22219%22/%3E%3Cpath d=%22M218.458 1071.69 1369.96 657.414 1443.67 862.283 292.163 1276.56Z%22/%3E%3Cpath d=%22M277.184 241.231 1462.59 675.505 1394.55 861.22 209.147 426.945Z%22/%3E%3Crect x=%22208%22 y=%22194%22 width=%221893%22 height=%22233%22/%3E%3Crect x=%221880%22 y=%22194%22 width=%22221%22 height=%22363%22/%3E%3Crect x=%221891%22 y=%22920%22 width=%22220%22 height=%22364%22/%3E%3Cpath d=%22M1205 585 1722 764.554 1205 945Z%22/%3E%3C/g%3E%3Crect x=%22218%22 y=%221683%22 width=%221893%22 height=%22220%22 fill=%22%23E97E1C%22/%3E%3C/g%3E%3C/svg%3E");
  --media-blend: multiply;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --nav-h: 52px;
  --radius: 28px;
  --wrap: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --band: #161617; --ink: #F5F5F7; --muted: #A1A1A6; --dim: #48484A; --hair: #424245;
    --brand: #0E6A86; --on-brand: #FFFFFF; --link: #5CC0D8; --orange-ink: #F2A65A;
    --mark: #F5F5F7; --mark-op: 0.06; --nav-bg: rgba(22, 22, 23, 0.78); --chip-bg: rgba(66, 66, 69, 0.72);
    --light-only: none; --dark-only: block; --media-blend: screen; color-scheme: dark; --puce: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1906 1714%22%3E%3Cg transform=%22translate%28-206 -192%29%22%3E%3Cg class=%22c%22 fill=%22%23F5F5F7%22%3E%3Crect x=%22218%22 y=%221378%22 width=%221893%22 height=%22220%22/%3E%3Crect x=%22218%22 y=%221073%22 width=%221893%22 height=%22219%22/%3E%3Cpath d=%22M218.458 1071.69 1369.96 657.414 1443.67 862.283 292.163 1276.56Z%22/%3E%3Cpath d=%22M277.184 241.231 1462.59 675.505 1394.55 861.22 209.147 426.945Z%22/%3E%3Crect x=%22208%22 y=%22194%22 width=%221893%22 height=%22233%22/%3E%3Crect x=%221880%22 y=%22194%22 width=%22221%22 height=%22363%22/%3E%3Crect x=%221891%22 y=%22920%22 width=%22220%22 height=%22364%22/%3E%3Cpath d=%22M1205 585 1722 764.554 1205 945Z%22/%3E%3C/g%3E%3Crect x=%22218%22 y=%221683%22 width=%221893%22 height=%22220%22 fill=%22%23E97E1C%22/%3E%3C/g%3E%3C/svg%3E"); --scene-bg: #1D1D1F; --coin: #000000;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --band: #161617; --ink: #F5F5F7; --muted: #A1A1A6; --dim: #48484A; --hair: #424245;
  --brand: #0E6A86; --on-brand: #FFFFFF; --link: #5CC0D8; --orange-ink: #F2A65A;
  --mark: #F5F5F7; --mark-op: 0.06; --nav-bg: rgba(22, 22, 23, 0.78); --chip-bg: rgba(66, 66, 69, 0.72);
  --light-only: none; --dark-only: block; --media-blend: screen; color-scheme: dark; --puce: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1906 1714%22%3E%3Cg transform=%22translate%28-206 -192%29%22%3E%3Cg class=%22c%22 fill=%22%23F5F5F7%22%3E%3Crect x=%22218%22 y=%221378%22 width=%221893%22 height=%22220%22/%3E%3Crect x=%22218%22 y=%221073%22 width=%221893%22 height=%22219%22/%3E%3Cpath d=%22M218.458 1071.69 1369.96 657.414 1443.67 862.283 292.163 1276.56Z%22/%3E%3Cpath d=%22M277.184 241.231 1462.59 675.505 1394.55 861.22 209.147 426.945Z%22/%3E%3Crect x=%22208%22 y=%22194%22 width=%221893%22 height=%22233%22/%3E%3Crect x=%221880%22 y=%22194%22 width=%22221%22 height=%22363%22/%3E%3Crect x=%221891%22 y=%22920%22 width=%22220%22 height=%22364%22/%3E%3Cpath d=%22M1205 585 1722 764.554 1205 945Z%22/%3E%3C/g%3E%3Crect x=%22218%22 y=%221683%22 width=%221893%22 height=%22220%22 fill=%22%23E97E1C%22/%3E%3C/g%3E%3C/svg%3E"); --scene-bg: #1D1D1F; --coin: #000000;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.47; letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 600; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

.wrap {
  max-width: calc(var(--wrap) + 6vw); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px), 3vw);
  padding-right: max(16px, env(safe-area-inset-right, 0px), 3vw);
}
.band { background: var(--band); }
.section { padding-block: clamp(72px, 10vw, 128px); }
section[id] { scroll-margin-top: var(--nav-h); }

.eyebrow { font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: 0.005em; color: var(--orange-ink); }
.h-xl { font-size: clamp(44px, 7.2vw, 88px); line-height: 1.04; letter-spacing: -0.03em; }
.h-l { font-size: clamp(34px, 4.8vw, 56px); line-height: 1.07; letter-spacing: -0.022em; }
.h-m { font-size: clamp(24px, 2.4vw, 28px); line-height: 1.14; letter-spacing: -0.012em; }
.lead { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.33; font-weight: 500; letter-spacing: -0.015em; }
.small { font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 980px;
  font: 500 17px/1 var(--font); letter-spacing: -0.02em; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s ease, background-color .2s ease;
}
.btn:hover { text-decoration: none; transform: scale(1.02); }
.btn-fill { background: var(--brand); color: var(--on-brand); }
.btn-line { border-color: var(--brand); color: var(--ink); background: transparent; }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: 14px; }
.more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 17px; }
.more::after { content: "›"; font-size: 1.2em; line-height: 1; transform: translateY(-1px); }
.mark { color: var(--mark); --ne-bar: var(--mark); opacity: var(--mark-op); pointer-events: none; }

/* Navigation */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hair); }
.nav-row { height: var(--nav-h); display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; min-height: 44px; }
.brand:hover { text-decoration: none; }
.brand svg { width: 24px; height: 22px; color: var(--brand); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { color: var(--ink); opacity: .85; font-size: 13px; padding: 0 10px; min-height: 44px; display: flex; align-items: center; }
.nav-links a:hover { opacity: 1; text-decoration: none; }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; padding: 2px; border-radius: 980px; background: var(--chip-bg); }
.lang button { border: 0; background: transparent; color: var(--ink); font: 600 12px/1 var(--font); letter-spacing: 0.02em; padding: 0 10px; min-height: 28px; min-width: 36px; border-radius: 980px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--bg); box-shadow: 0 0 0 1px var(--hair); }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.menu-panel { border-top: 1px solid var(--hair); padding-block: 8px 20px; }
.menu-panel a { display: flex; align-items: center; min-height: 48px; font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-tools { margin-left: auto; }
  .nav-cta { display: none; }
  /* Sans JavaScript, le bouton reste caché et le menu reste déplié : la barre ne colle plus en haut,
     sinon le menu couvrirait les deux tiers de l'écran à chaque défilement (lot 7b). */
  .nav:has(.menu-btn[hidden]) { position: relative; }
}

/* Hero */
.hero { position: relative; overflow: hidden; --p: 0; }
/* Le filigrane de l'ouverture : incliné à -36°, très grand, il déborde à droite (comme le fond « NE background ») ;
   le titre n'en cache plus le centre, et les barres se lisent comme des barres. */
.hero .mark { position: absolute; right: -14vw; top: -3vw; width: min(860px, 60vw); transform: rotate(-36deg) scale(calc(1 + var(--p) * 0.35)); opacity: calc(var(--mark-op) * (1 - var(--p))); }
.hero-copy { position: relative; text-align: center; padding-top: clamp(56px, 9vw, 112px); transform: scale(calc(1 - var(--p) * 0.06)); opacity: calc(1 - var(--p) * 0.9); transform-origin: 50% 0; }
.hero-copy .eyebrow { margin-bottom: 16px; }
.hero-copy .lead { max-width: 32em; margin: 24px auto 0; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.hero-copy .more { margin-top: 10px; }
.hero-media { --q: 1; position: relative; margin-top: clamp(24px, 4vw, 48px); overflow: hidden; }
.hero-media img { mix-blend-mode: var(--media-blend); width: 100%; transform: scale(calc(1.12 - var(--q) * 0.12)); transform-origin: 70% 50%; }
.only-light { display: var(--light-only); }
.only-dark { display: var(--dark-only); }

/* Statement */
.statement { font-size: clamp(28px, 4vw, 48px); line-height: 1.16; font-weight: 600; letter-spacing: -0.025em; max-width: 22em; }
.statement .w { transition: color .35s ease; }
.js-motion .statement .w { color: var(--dim); }
.js-motion .statement .w.lit { color: var(--ink); }

/* Story: three convergences */
.story { background: var(--stage-bg); color: var(--stage-ink); }
.story-stage { padding-block: clamp(72px, 10vw, 120px); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.story-visual { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.story-visual svg { width: min(420px, 100%); height: auto; overflow: visible; }
/* Au repos (sans script, mouvement réduit, téléphone), le logo est complet. Quand la scène est
   épinglée, le script écrit à chaque image la montée et la couleur des barres (de --stage-off à
   leur couleur), la montée et l'opacité des encarts, sans aucune transition, pour que l'écran
   suive la molette sans retard (lot 7c). */
.lg { fill: var(--stage-ink); transform-box: fill-box; transform-origin: 50% 50%; }
.lg-b1 { fill: var(--orange); }
/* La jauge : trois segments qui se remplissent avec la progression (--f, de 0 à 1, écrit par le
   script quand la scène est pilotée). Sans script, --f vaut 1 : la jauge est pleine, comme le logo. */
.dots { display: flex; gap: 6px; }
.dots span { position: relative; width: 28px; height: 4px; border-radius: 2px; background: var(--stage-off); overflow: hidden; }
.dots span::after { content: ""; position: absolute; inset: 0; background: var(--stage-ink); transform-origin: 0 50%; transform: scaleX(var(--f, 1)); }
.story-head .eyebrow { color: var(--orange); }
.story-head h2 { margin-top: 10px; }
.story-head p { margin-top: 12px; color: var(--stage-muted); font-size: 19px; }
.steps { margin-top: 40px; display: grid; gap: 40px; }
.step-label { font-size: 14px; font-weight: 600; color: var(--orange); letter-spacing: 0.01em; }
.step h3 { margin-top: 6px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.022em; }
.step p { margin-top: 12px; color: var(--stage-muted); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.42; max-width: 30em; }
.step .more { color: var(--orange); margin-top: 8px; }
/* 250vh : environ 14 crans de molette de 100 px sur un écran de 900 px (lot 7c). */
.pinned .story { height: 250vh; }
.pinned .story-stage { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--nav-h) - env(safe-area-inset-top, 0px)); display: flex; align-items: center; padding-block: 24px; }
.pinned .story-stage > .wrap { width: 100%; }
.pinned .steps { position: relative; min-height: 300px; }
.pinned .step { position: absolute; inset: 0 0 auto 0; pointer-events: none; }
.pinned .step:not(.step-1) { opacity: 0; }
@media (max-width: 819px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-visual svg { width: min(260px, 70%); }
}

/* Offer */
.offer-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.offer-head p { color: var(--muted); margin-top: 10px; font-size: 19px; max-width: 60ch; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 40px; }
.card { background: var(--bg); border-radius: var(--radius); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card .tag { font-size: 14px; font-weight: 600; color: var(--orange-ink); }
.card ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; }
.card li { padding: 12px 0; border-top: 1px solid var(--hair); }
.card li b { display: block; font-weight: 600; }
.card li span { display: block; font-size: 15px; color: var(--muted); }
.card .soon { color: var(--orange-ink); font-size: 12px; font-weight: 600; }
.card-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 8px; }
.card-brand { background: var(--brand); color: var(--on-brand); position: relative; overflow: hidden; }
.card-brand .tag { color: #F7B877; }
.card-brand p { color: rgba(255, 255, 255, 0.82); }
.card-brand .mark { position: absolute; right: -50px; bottom: -40px; width: 280px; color: #FFFFFF; --ne-bar: #FFFFFF; opacity: .08; }
.card-brand .btn { background: #FFFFFF; color: #084151; }

/* Resources */
.res-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.res-head p { color: var(--muted); margin-top: 10px; font-size: 19px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chips button { border: 1px solid var(--hair); background: transparent; color: var(--ink); font: 500 14px/1 var(--font); min-height: 36px; padding: 0 16px; border-radius: 980px; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 32px; padding-bottom: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px), 3vw, calc((100% - var(--wrap)) / 2));
  padding-right: max(16px, env(safe-area-inset-right, 0px), 3vw); scroll-padding-left: max(16px, 3vw, calc((100% - var(--wrap)) / 2)); }
.rail::-webkit-scrollbar { display: none; }
.rcard { flex: 0 0 min(340px, 82%); scroll-snap-align: start; border-radius: var(--radius); background: var(--band); color: var(--ink); overflow: hidden; display: flex; flex-direction: column; min-height: 440px; }
.rcard:hover { text-decoration: none; }
.rcard:hover .rtitle { text-decoration: underline; }
.rmedia { aspect-ratio: 4 / 3; overflow: hidden; background: var(--hair); }
.rmedia img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.rcard:hover .rmedia img { transform: scale(1.04); }
.rbody { padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 6px; }
.rmeta { font-size: 12px; font-weight: 600; color: var(--muted); }
.rmeta b { color: var(--orange-ink); font-weight: 600; }
.rtitle { font-size: 21px; line-height: 1.24; font-weight: 600; letter-spacing: -0.016em; }
.rcard-type { background: var(--brand); color: #FFFFFF; position: relative; justify-content: flex-end; }
.rcard-type .rmeta, .rcard-type .rmeta b { color: rgba(255, 255, 255, 0.78); }
.rcard-type .mark { position: absolute; left: 26px; top: 26px; width: 120px; color: #FFFFFF; --ne-bar: #E97E1C; opacity: .9; }
.rail-ctrl { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--chip-bg); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* Two axes */
.axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; margin-top: 40px; }
.axes + .cards { margin-top: 20px; }
.h-axis { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -0.024em; }
.axis-text, .card-text { color: var(--muted); font-size: 17px; line-height: 1.47; }
.axis .axis-text { font-size: 19px; line-height: 1.42; }
.card-brand .axis-text { color: rgba(255, 255, 255, 0.84); }
.card-brand li { border-color: rgba(255, 255, 255, 0.2); }
.card-brand li span { color: rgba(255, 255, 255, 0.76); }

/* Roots and values */
.roots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px clamp(40px, 7vw, 96px); align-items: center; }
.roots-lead { color: var(--muted); font-weight: 400; margin-top: 18px; max-width: 30em; }
.values-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.values-grid li { background: var(--bg); border-radius: 20px; padding: 20px 24px; }
.values-grid b { display: block; font-size: 21px; letter-spacing: -0.016em; }
.values-grid span { display: block; color: var(--muted); margin-top: 2px; }

/* L'appel final (la page /contact/ porte le formulaire) */
.appel { position: relative; overflow: hidden; text-align: center; }
.appel .mark { position: absolute; right: -22vw; top: 50%; width: min(1100px, 86vw); transform: translateY(-50%) rotate(-36deg); }
.appel-in { position: relative; }
.appel .lead { max-width: 28em; margin: 20px auto 0; }

/* Footer */
.foot { background: var(--band); color: var(--muted); font-size: 12px; line-height: 1.33; }
.foot-in { padding-block: 24px 28px; }
.foot-note { padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; padding-block: 20px; }
.foot-cols b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.foot-cols a { display: block; color: var(--muted); padding: 4px 0; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hair); }

/* Reveal: elements below the first screen rise in; everything stays readable at rest */
.js-motion .rise { transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease; }
.js-motion .rise.pre { transform: translateY(40px); opacity: .35; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Ajouts du site (au-delà de l'accueil du prototype) ---- */

.skip { position: absolute; left: 16px; top: -100px; z-index: 30; background: var(--bg); color: var(--link); padding: 12px 16px; border-radius: 12px; }
.skip:focus { top: 8px; }
[hidden] { display: none !important; }
.nav-links a[aria-current="page"], .menu-panel a[aria-current="page"] { opacity: 1; font-weight: 600; }
.lang a { color: var(--ink); font: 600 12px/1 var(--font); letter-spacing: 0.02em; padding: 0 10px; min-height: 28px; min-width: 36px; border-radius: 980px; display: inline-flex; align-items: center; justify-content: center; }
.lang a:hover { text-decoration: none; }
.lang a[aria-current="true"] { background: var(--bg); box-shadow: 0 0 0 1px var(--hair); }
.lang a { position: relative; }
.lang a::after { content: ""; position: absolute; inset: -8px -2px; }
.lang { align-items: center; }
.btn-on-brand { background: #FFFFFF; color: #084151; }

/* L'en-tête des pages intérieures */
.page-head { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 104px) clamp(32px, 5vw, 56px); }
.page-head > .mark { position: absolute; right: -6vw; top: -4vw; width: min(560px, 70vw); transform: rotate(-36deg); }
.page-head .wrap { position: relative; }
.page-head .eyebrow { margin-bottom: 12px; }
.page-head .eyebrow a { color: inherit; }
.page-head .lead { margin-top: 20px; max-width: 34em; color: var(--muted); font-weight: 400; }
.byline { margin-top: 20px; color: var(--muted); font-size: 14px; }
.cover { margin-top: clamp(32px, 5vw, 56px); }
.cover img { width: 100%; border-radius: var(--radius); background: var(--band); }

/* Le texte long */
.prose { max-width: 720px; margin-inline: auto; padding-bottom: clamp(56px, 8vw, 104px); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.12; letter-spacing: -0.02em; margin-top: 1.8em; }
.prose h3 { font-size: clamp(21px, 2vw, 24px); line-height: 1.2; letter-spacing: -0.016em; margin-top: 1.6em; }
.prose h4 { font-size: 19px; line-height: 1.3; font-weight: 600; margin-top: 1.4em; letter-spacing: -0.012em; }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose ul, .prose ol { padding-left: 1.6em; }
.prose li + li { margin-top: .35em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.5em; top: .42em; width: .9em; height: .82em; background: var(--puce) center / contain no-repeat; }
.prose ul ul { margin-top: .35em; }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--orange); font-size: clamp(19px, 1.9vw, 23px); line-height: 1.36; font-weight: 600; letter-spacing: -0.015em; }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin-block: 2.4em; }
.prose figure { margin: 2em 0; }
.prose figure img { border-radius: 18px; margin-inline: auto; }
.prose figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; text-align: center; }
.prose code { font-size: .9em; background: var(--band); padding: .1em .35em; border-radius: 6px; }
.prose video { width: 100%; height: auto; border-radius: 18px; background: #000; }
.fiche { background: var(--band); border-radius: var(--radius); padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.fiche .h-m { margin: 0; }
.fiche p { color: var(--muted); margin: 0; }
.fiche .btn { margin-top: 8px; }
.prose .fiche a.btn { text-decoration: none; }
.prose .fiche + .fiche { margin-top: 16px; }

/* L'épisode : l'image de l'épisode, avec son bouton de lecture, est un lien qui sort vers
   YouTube (aucun lecteur intégré). L'image est servie par le site. */
.video { display: block; margin-top: clamp(32px, 5vw, 56px); color: var(--ink); }
.video:hover { text-decoration: none; }
.video-image { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000000; }
.video-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.video:hover .video-image img { transform: scale(1.02); }
.video-legende { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.video-sortie { color: var(--link); font-size: 17px; }
.video-sortie::after { content: " ›"; font-size: 1.2em; line-height: 1; }
.video:hover .h-m { text-decoration: underline; }

/* La liste des ressources */
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 32px; padding-bottom: clamp(72px, 10vw, 128px); }
.res-grid .rcard { flex: none; min-height: 400px; }
.rcard .rdesc { color: var(--muted); font-size: 15px; line-height: 1.4; margin-top: 4px; }
.rcard-type .rdesc { color: rgba(255, 255, 255, 0.8); }
.rmedia img.pos-top { object-position: 50% 0; }
.rmedia-svg { background: #FFFFFF; }
.rmedia-svg img { object-fit: contain; padding: 24px; }
.chips[hidden] { display: none; }

/* Les fiches des guides et des pages anglaises */
.fiches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 40px; }
.fiches .fiche { background: var(--bg); }
.band .fiches .fiche { background: var(--bg); }
.section:not(.band) .fiches .fiche { background: var(--band); }

/* La page 404 */
.err { text-align: center; position: relative; overflow: hidden; padding-block: clamp(96px, 14vw, 180px); }
.err .mark { position: absolute; left: 50%; top: 50%; width: min(640px, 90vw); transform: translate(-50%, -50%) rotate(-36deg); }
.err .wrap { position: relative; }
.err .lead { margin: 20px auto 0; max-width: 28em; color: var(--muted); font-weight: 400; }
.err .hero-ctas { margin-top: 32px; }

/* Le pied de page : liens lisibles au clavier */
.foot a:hover { color: var(--ink); }
.foot-cols a { min-height: 32px; display: flex; align-items: center; }

/* Le logo en symbole : la barre orange se colore par un jeton (pas de style en ligne : CSP stricte) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ne-bar { fill: var(--ne-bar, #E97E1C); }
@media (min-width: 861px) { .menu-panel { display: none; } }
.menu-panel a.menu-ecrire { color: var(--link); }
.liens { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 4px; }
.liens .more { font-size: clamp(19px, 1.9vw, 24px); font-weight: 500; }
.roots-title { margin-top: 10px; }
.section .res-grid { padding-bottom: 0; }
/* Sur écran tactile, toute cible fait au moins 44 px (règle du site). */
@media (pointer: coarse) {
  .btn-sm, .chips button { min-height: 44px; }
  .foot-cols a { min-height: 44px; }
}
body { margin: 0; }
.cover-svg img { width: auto; max-height: min(320px, 50vh); margin-inline: auto; padding: 32px; }
.rmedia-svg { background: var(--band); }
/* Une page de PDF, blanche, éblouit moins en thème sombre. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rmedia img.pos-top { filter: brightness(.9); } }
:root[data-theme="dark"] .rmedia img.pos-top { filter: brightness(.9); }
@media (max-width: 699px) {
  .hero .mark { right: -38vw; top: -6vw; width: 96vw; }
  .appel .mark { right: -46vw; width: 118vw; }
}

/* Le formulaire de contact : des champs en rectangles arrondis (12 px), l'étiquette au-dessus,
   l'erreur dessous, qui dit comment corriger. Sans JavaScript, il s'envoie et revient tel quel. */
.formulaire .wrap { max-width: calc(760px + 6vw); }
.form { background: var(--bg); border-radius: var(--radius); padding: clamp(24px, 4vw, 48px); display: grid; gap: 22px; }
.section:not(.band) .form { background: var(--band); }
.champ { display: grid; gap: 8px; }
.champ label { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px;
  background: var(--bg); color: var(--ink); font: 400 17px/1.4 var(--font); letter-spacing: -0.016em;
}
.section:not(.band) .form :is(input, select, textarea) { background: var(--bg); }
.champ textarea { min-height: 180px; resize: vertical; }
.champ select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.champ :is(input, select, textarea):focus-visible { outline: 2px solid var(--link); outline-offset: 1px; border-color: var(--link); border-radius: 12px; }
.champ [aria-invalid="true"] { border-color: var(--orange-ink); border-width: 2px; }
.champ-aide { color: var(--muted); font-size: 15px; margin-top: -4px; }
.champ-erreur { color: var(--orange-ink); font-size: 15px; font-weight: 500; }
.champ-erreur::before { content: "! "; font-weight: 700; }
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-alerte { border-radius: 12px; padding: 14px 18px; background: var(--bg); border: 2px solid var(--orange-ink); color: var(--ink); font-weight: 500; }
.form-pied { display: grid; gap: 14px; justify-items: start; margin-top: 4px; }
.form-pied .btn { min-width: 160px; }
.form-pied .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.form-donnees { color: var(--muted); max-width: 40em; }
.form-merci { background: var(--bg); border-radius: var(--radius); padding: clamp(32px, 5vw, 64px); text-align: center; }
.section:not(.band) .form-merci { background: var(--band); }
.form-merci .lead { margin-top: 16px; color: var(--muted); font-weight: 400; }
.form-merci h2:focus { outline: none; }

/* ---- Lot 7 : les pages du contenu (contenu/fr, contenu/en) ---- */

/* Une section de page : l'en-tête (surtitre, question en H2) à gauche, le texte à droite sur grand écran. */
.bloc { display: grid; gap: 28px clamp(40px, 6vw, 96px); }
@media (min-width: 980px) {
  .bloc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .bloc-tete { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.bloc-tete .eyebrow { margin-bottom: 12px; }
.bloc-tete .h-l { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }
.bloc-sous { margin-top: 14px; color: var(--muted); font-size: 19px; }
.pastille { display: inline-flex; align-items: center; margin-top: 16px; min-height: 28px; padding: 0 12px; border-radius: 980px;
  border: 1px solid var(--orange-ink); color: var(--orange-ink); font-size: 13px; font-weight: 600; }
.bloc-corps, .bloc-seul { min-width: 0; font-size: 19px; line-height: 1.5; letter-spacing: -0.018em; }
.bloc-seul { max-width: 760px; }
.bloc-corps > * + *, .bloc-seul > * + * { margin-top: 1em; }
.bloc-corps a:not(.btn):not(.more), .bloc-seul a:not(.btn):not(.more) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 3px; }
.bloc-corps ul:not(.tuiles):not(.liens), .bloc-corps ol:not(.tuiles), .bloc-seul ul:not(.tuiles):not(.liens) { padding-left: 1.5em; }
.bloc-corps ul:not(.tuiles):not(.liens), .bloc-seul ul:not(.tuiles):not(.liens) { list-style: none; }
.bloc-corps ul:not(.tuiles):not(.liens) > li, .bloc-seul ul:not(.tuiles):not(.liens) > li { position: relative; }
.bloc-corps ul:not(.tuiles):not(.liens) > li::before, .bloc-seul ul:not(.tuiles):not(.liens) > li::before {
  content: ""; position: absolute; left: -1.45em; top: .45em; width: .85em; height: .78em; background: var(--puce) center / contain no-repeat; }
.bloc-corps li + li { margin-top: .4em; }
.bloc-corps h3 { font-size: 21px; line-height: 1.24; letter-spacing: -0.016em; margin-top: 1.4em; }

/* La phrase-choc : la barre orange du logo, puis la phrase en grand. */
.choc { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); padding-top: 22px; position: relative; margin-top: 1.4em !important; }
.choc::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 6px; border-radius: 1px; background: var(--orange); }
.citation { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--orange); font-size: clamp(19px, 1.9vw, 22px); line-height: 1.4; font-style: italic; color: var(--muted); }
.note { color: var(--muted); }

/* Les rubriques (« Pour qui », « Programme »…) */
.rubrique strong.rub { color: var(--orange-ink); font-weight: 600; }
.rub-titre { font-size: 15px !important; font-weight: 600; color: var(--orange-ink); letter-spacing: 0; margin: 0 0 10px !important; }
.programme { background: var(--band); border-radius: 20px; padding: clamp(20px, 3vw, 32px); font-size: 17px; line-height: 1.45; }
.band .programme { background: var(--bg); }
.programme .prog-temps { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -0.012em; }
.programme .prog-temps:not(:first-child) { margin-top: 22px; }
.programme ol { margin: 10px 0 0; padding-left: 1.4em; }
.programme li + li { margin-top: 8px; }

/* Les listes dont chaque élément s'ouvre sur un gras : des tuiles. */
.tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.tuiles li { background: var(--band); border-radius: 20px; padding: 20px 22px; margin: 0 !important; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.45; }
.band .tuiles li { background: var(--bg); }
.tuiles b { font-size: 19px; line-height: 1.25; letter-spacing: -0.016em; }
.tuiles span { color: var(--muted); }
.tuile-num { font-size: 13px; font-weight: 600; color: var(--orange-ink); letter-spacing: 0.02em; }

/* Les actions et les liens d'une section */
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 28px !important; }
.page-head .ctas { margin-top: 32px; }
.liens { margin-top: 20px !important; }
.bloc-corps .liens .more { font-size: 19px; }

/* L'ouverture des pages intérieures */
.ouv-choc { margin-top: 28px; max-width: 30em; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.ouv-citation { margin-top: 24px; max-width: 34em; }
.page-head .lead p + p { margin-top: .6em; }

/* Les [À COMPLÉTER] restent visibles, dans une pastille discrète. */
.ac { display: inline; padding: 1px 8px; border-radius: 980px; border: 1px dashed var(--orange-ink); color: var(--orange-ink);
  font-size: .78em; font-weight: 500; letter-spacing: 0; white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* La FAQ */
.faq-item + .faq-item { margin-top: 28px !important; padding-top: 28px; border-top: 1px solid var(--hair); }
.faq-item h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; letter-spacing: -0.016em; }
.faq-item p { color: var(--muted); }

/* La liste des ressources : des groupes par type ; les filtres sont des ancres, que le script change en filtres. */
.res-liste { padding-bottom: clamp(72px, 10vw, 128px); }
.res-groupe { padding-top: 40px; scroll-margin-top: var(--nav-h); }
.res-groupe-titre { margin-top: 0; }
.res-groupe .res-grid { padding-bottom: 0; margin-top: 20px; }
.chips-liens a { display: inline-flex; align-items: center; border: 1px solid var(--hair); color: var(--ink); font: 500 14px/1 var(--font); min-height: 44px; padding: 0 16px; border-radius: 980px; }
.chips-liens a:hover { text-decoration: none; border-color: var(--ink); }
.chips-liens a[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips-themes { margin-top: 12px; }
.chips-themes button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #FFFFFF; }

/* Relecture visuelle du lot 7 */
.tuile-phrase { color: var(--muted); }
.tuile-phrase strong { color: var(--ink); font-weight: 600; }
.ac { overflow-wrap: anywhere; max-width: 100%; }
.liens .more { display: inline-block; padding: 10px 0; min-height: 44px; }
.liens .more::after { display: inline; margin-left: 4px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card-brand .tag { color: #FFD3A6; }
  :root:not([data-theme="light"]) .card-brand p, :root:not([data-theme="light"]) .card-brand li span, :root:not([data-theme="light"]) .card-brand .axis-text { color: rgba(255, 255, 255, 0.9); }
  :root:not([data-theme="light"]) .rcard-type .rmeta, :root:not([data-theme="light"]) .rcard-type .rmeta b, :root:not([data-theme="light"]) .rcard-type .rdesc { color: rgba(255, 255, 255, 0.92); }
}
:root[data-theme="dark"] .card-brand .tag { color: #FFD3A6; }
:root[data-theme="dark"] .card-brand p, :root[data-theme="dark"] .card-brand li span, :root[data-theme="dark"] .card-brand .axis-text { color: rgba(255, 255, 255, 0.9); }
:root[data-theme="dark"] .rcard-type .rmeta, :root[data-theme="dark"] .rcard-type .rmeta b, :root[data-theme="dark"] .rcard-type .rdesc { color: rgba(255, 255, 255, 0.92); }

/* ---- Lot 7f : les scènes animées et les articles ---- */

/* Une scène (le capital immatériel sur l'accueil, le trilemme dans son article) : comme les convergences,
   un dessin et des encarts qui se relaient, pilotés par le défilement quand la scène est épinglée. Au
   repos (sans script, mouvement réduit, téléphone), le dessin est complet et les encarts se suivent.
   Son fond n'est pas noir : blanc en clair, gris très sombre en sombre (la scène des convergences est noire). */
.scene { background: var(--scene-bg); color: var(--ink); }
.scene-stage { padding-block: clamp(72px, 10vw, 120px); }
.scene-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.scene-visual { display: flex; flex-direction: column; align-items: center; gap: 28px; min-width: 0; }
.scene-svg { display: block; width: min(440px, 100%); height: auto; overflow: visible; }
.scene-head .eyebrow { color: var(--orange-ink); }
.scene-head h2 { margin-top: 10px; }
.scene .steps { margin-top: 40px; }
.scene .step h3 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.022em; }
.scene .step p { margin-top: 12px; color: var(--muted); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.42; max-width: 30em; }
.scene .step .step-btc { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--orange-ink); }
.scene .scene-texte > .more { margin-top: 28px; }
.scene .dots { display: none; }
.pinned .scene .dots { display: flex; }
.scene .dots span { background: var(--hair); }
.scene .dots span::after { background: var(--ink); }
.pinned .scene { height: 250vh; }
.pinned .scene-trilemme { height: 300vh; }
.pinned .scene-stage { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--nav-h) - env(safe-area-inset-top, 0px)); display: flex; align-items: center; padding-block: 24px; }
.pinned .scene-stage > .wrap { width: 100%; }
.pinned .scene .steps { min-height: 320px; }
@media (max-width: 819px) {
  .scene-grid { grid-template-columns: minmax(0, 1fr); }
  .scene-svg { width: min(300px, 80%); }
}
/* L'image de repli d'une scène (la ligne qui suit « ::: scene » dans l'article) : au repos, elle tient lieu
   de dessin ; quand la scène est épinglée, le dessin la remplace (et l'image, cachée, n'est pas chargée). */
.scene-figure { margin: 0; width: 100%; }
.scene-figure img { width: 100%; border-radius: 18px; }
.scene-figure figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; text-align: center; }
.scene:has(.scene-figure) .scene-svg { display: none; }
.pinned .scene:has(.scene-figure) .scene-svg { display: block; }
.pinned .scene .scene-figure { display: none; }

/* La pièce du capital immatériel. Au repos : les deux faces côte à côte, dans l'anneau orange fermé. */
.ci-face { transform-box: view-box; transform-origin: 200px 200px; }
.ci-a { transform: translate(-82px, 0) scale(.46); }
.ci-b { transform: translate(82px, 0) scale(.46); }
.ci-disque { fill: var(--coin); stroke: var(--hair); stroke-width: 3; }
.ci-filet { fill: none; stroke: var(--hair); stroke-width: 2; }
.ci-bord { stroke: var(--hair); stroke-width: 3; stroke-linecap: round; }
.ci-frag { fill: var(--ink); transform-box: fill-box; transform-origin: 50% 50%; }
.ci-puce { fill: var(--orange); }
.ci-btc path { stroke: var(--ink); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.ci-btc .ci-btc-t { stroke-width: 12; }
.ci-seg { fill: none; stroke: var(--orange); stroke-width: 9; stroke-linecap: round; }

/* Le triangle du trilemme. Au repos, ses trois côtés et ses trois sommets. */
.tr-cote { stroke: var(--hair); stroke-width: 3; }
.tr-allume { stroke: var(--orange); stroke-width: 6; stroke-linecap: round; opacity: 0; }
.tr-point { fill: var(--bg); stroke: var(--ink); stroke-width: 3; }
.tr-feu { fill: var(--orange); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.tr-sommet { transform-box: view-box; }
.tr-nom { fill: var(--ink); font: 600 34px/1 var(--font); letter-spacing: -0.02em; }
.tr-sommets { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.tr-sommets li { color: var(--muted); font-size: 17px; line-height: 1.4; }
.tr-sommets b { display: block; color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -0.012em; }
.tr-sommets span { display: block; }

/* L'ouverture d'un article neuf : le grand titre, le chapeau et la signature s'effacent au défilement
   (--p, écrit par le script, comme à l'accueil), la couverture se resserre (--q) ; le filigrane incliné. */
.art-head { position: relative; overflow: hidden; --p: 0; padding-top: clamp(48px, 8vw, 104px); }
.art-head > .mark { position: absolute; right: -14vw; top: -4vw; width: min(820px, 64vw); transform: rotate(-36deg) scale(calc(1 + var(--p) * 0.3)); opacity: calc(var(--mark-op) * (1 - var(--p))); }
.art-copy { position: relative; max-width: calc(980px + 6vw); transform: translateY(calc(var(--p) * -24px)); opacity: calc(1 - var(--p) * 0.9); }
.art-copy .eyebrow { margin-bottom: 16px; }
.art-copy .eyebrow a { color: inherit; }
.h-art { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.03em; max-width: 16em; }
.art-copy .lead { margin-top: 28px; max-width: 34em; font-weight: 400; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.42; }
.art-copy .byline { margin-top: 24px; }
.art-cover { --q: 1; margin-top: clamp(40px, 6vw, 72px); border-radius: var(--radius); overflow: hidden; background: var(--band); }
.art-cover img { width: 100%; border-radius: 0; transform: scale(calc(1.08 - var(--q) * 0.08)); transform-origin: 50% 40%; }
.art-head + .wrap .art-prose { padding-top: clamp(48px, 7vw, 88px); }
/* Une scène coupe la colonne de texte : les deux morceaux de texte se rejoignent sans grand blanc. */
.wrap:has(+ .scene) > .art-prose { padding-bottom: clamp(32px, 5vw, 56px); }
.scene + .wrap > .art-prose { padding-top: clamp(32px, 5vw, 56px); }
.art-prose:empty { display: none; }

/* L'exergue : la citation en tête de l'article, en grand, qui s'allume mot à mot (comme la phrase-manifeste). */
.prose blockquote.exergue { border: 0; padding: 26px 0 0; position: relative; margin-block: 1.6em; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.16; letter-spacing: -0.025em; }
.prose blockquote.exergue::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 6px; border-radius: 1px; background: var(--orange); }
.exergue .w { transition: color .35s ease; }
.js-motion .exergue .w { color: var(--dim); }
.js-motion .exergue .w.lit { color: var(--ink); }

/* La barre de lecture : fine, orange, sous la barre de navigation ; seulement avec le script. */
.lecture { display: none; position: fixed; left: 0; right: 0; top: calc(var(--nav-h) + 1px + env(safe-area-inset-top, 0px)); height: 3px; z-index: 19; pointer-events: none; }
.js-motion .lecture { display: block; }
.lecture span { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--l, 0)); }

/* En sombre, un filet autour des images d'article : la couverture et les schémas noirs ne se fondent plus dans le fond. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .art-cover, :root:not([data-theme="light"]) .art-prose figure img, :root:not([data-theme="light"]) .scene-figure img { outline: 1px solid var(--hair); outline-offset: -1px; }
}
:root[data-theme="dark"] .art-cover, :root[data-theme="dark"] .art-prose figure img, :root[data-theme="dark"] .scene-figure img { outline: 1px solid var(--hair); outline-offset: -1px; }
.scene-trilemme .scene-svg { width: min(540px, 100%); }