:root {
  --bg:        #f4f1e9;
  --bg-2:      #ede9dd;
  --ink:       #1c1f1a;
  --ink-mute:  #6a6c64;
  --ink-soft:  #9a9c94;
  --rule:      #d8d3c6;
  --rule-soft: #e6e1d2;
  --accent:    #586d3a;
  --accent-2:  #b8553c;
  --accent-3:  #c19a4c;
  --accent-4:  #b9c98a;  /* vert-jaune — accentuation douce sur fonds sombres */
  --dk-bg:     #0c0a09;
  --dk-ink:    #efece4;
  --dk-mute:   rgba(239,236,228,.55);
  --dk-faint:  rgba(239,236,228,.28);
  --grotesk:   "Inter Tight", system-ui, sans-serif;
  --serif:     "Fraunces", "Times New Roman", serif;
  --mono:      "JetBrains Mono", ui-monospace, monospace;
  --sh-soft:   0 1px 2px rgba(28,31,26,.04), 0 8px 24px -8px rgba(28,31,26,.10);
  --sh-lift:   0 1px 2px rgba(28,31,26,.05), 0 16px 40px -12px rgba(28,31,26,.14);
  --sh-deep:   0 2px 4px rgba(28,31,26,.06), 0 32px 64px -16px rgba(28,31,26,.18);

  /* Z-index layers */
  --z-chrome:  10;
  --z-dots:    200;
  --z-nav:     300;

  /* Card surface tokens */
  --card-bg-top: #faf8f2;
  --card-bg-bot: #f4f1e9;

  /* Spacing reference */
  --pad-h: clamp(36px,4.5vw,96px);

  /* Easing tokens */
  --ease-out-quart: cubic-bezier(0.25,1,0.5,1);
  --ease-out-expo:  cubic-bezier(0.22,1,0.36,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--dk-bg); font-family: var(--grotesk); }
#root { height: 100%; }

#scroller {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
#scroller::-webkit-scrollbar { display: none; }

section {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  position: relative;
  /* Isolate layout/style recalc to each section — avoids cascade reflows */
  contain: layout style;
}

/* ── Typography scale ── */
.t-display { font-family: var(--grotesk); font-weight: 500; font-size: clamp(52px,8.5vw,148px); line-height: .92; letter-spacing: -.045em; text-rendering: optimizeLegibility; font-kerning: normal; }
.t-chapter { font-family: var(--grotesk); font-weight: 500; font-size: clamp(72px,13vw,210px); line-height: .88; letter-spacing: -.052em; text-rendering: optimizeLegibility; font-kerning: normal; }
.t-title   { font-family: var(--grotesk); font-weight: 500; font-size: clamp(26px,3.8vw,62px); line-height: 1.05; letter-spacing: -.025em; }
.t-lead    { font-family: var(--serif); font-style: italic; font-size: clamp(16px,2vw,30px); line-height: 1.38; font-optical-sizing: auto; font-kerning: normal; }
.t-body    { font-family: var(--grotesk); font-size: clamp(14px,1.3vw,19px); line-height: 1.56; }
.t-label   { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.t-label-d { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(239,236,228,.5); }
.it  { font-family: var(--serif); font-style: italic; font-weight: 400; font-optical-sizing: auto; }
.itg { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); font-optical-sizing: auto; }
.itr { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-2); font-optical-sizing: auto; }
.ity { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-4); font-optical-sizing: auto; }

/* ── Cards ── */
.card {
  background: linear-gradient(180deg,var(--card-bg-top) 0%,var(--card-bg-bot) 100%);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(18px,2.2vw,32px);
  display: flex; flex-direction: column; gap: 9px;
  position: relative; overflow: hidden;
  box-shadow: var(--sh-soft);
}
.card.dark { background:linear-gradient(160deg,#232520 0%,#16181d 100%); border-color:#2a2c26; box-shadow:var(--sh-deep); }
.card.dark::before { background:linear-gradient(90deg,transparent,rgba(180,200,140,.22),transparent); }
.card.accent { background:linear-gradient(160deg,rgba(88,109,58,.10) 0%,rgba(88,109,58,.03) 100%); border-color:rgba(88,109,58,.25); }
.card.rust   { background:linear-gradient(160deg,rgba(184,85,60,.08) 0%,rgba(184,85,60,.02) 100%); border-color:rgba(184,85,60,.22); }
.card .ch { font-family:var(--mono); font-size:10px; letter-spacing:.10em; text-transform:uppercase; color:var(--ink-mute); display:flex; justify-content:space-between; align-items:center; }
.card .ct { font-family:var(--grotesk); font-weight:500; font-size:clamp(15px,1.8vw,24px); letter-spacing:-.015em; line-height:1.1; color:var(--ink); }
.card .cd { font-size:clamp(11px,1.1vw,15px); line-height:1.5; color:var(--ink-mute); }
.card.dark .ch { color:rgba(239,236,228,.5); }
.card.dark .ct { color:var(--bg); }
.card.dark .cd { color:rgba(239,236,228,.6); }
.card.dark .ct em { color:var(--accent-4); }

/* ── Metrics ── */
.metric {
  background:linear-gradient(180deg,var(--card-bg-top) 0%,var(--card-bg-bot) 100%);
  border:1px solid var(--rule); border-radius:16px;
  padding:clamp(18px,2.2vw,32px);
  display:flex; flex-direction:column; gap:5px;
  position:relative; overflow:hidden; box-shadow:var(--sh-soft);
}
.metric .ml { font-family:var(--mono); font-size:9px; letter-spacing:.10em; text-transform:uppercase; color:var(--ink-mute); }
.metric .mv { font-family:var(--grotesk); font-weight:500; font-size:clamp(36px,5vw,72px); line-height:1; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums; }
.metric .mv em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent); }
.metric .mv.rust em { color:var(--accent-2); }
.metric .mf { font-size:clamp(10px,1vw,13px); color:var(--ink-mute); line-height:1.45; }

/* ── Chip / Lozenge ── */
.chip {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); padding:5px 13px; border:1px solid var(--rule); border-radius:100px;
  background:var(--card-bg-top);
  box-shadow:var(--sh-soft);
}
.chip .seed { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(88,109,58,.15); }
.chip-dk {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(239,236,228,.75); padding:5px 13px; border:1px solid rgba(239,236,228,.22);
  border-radius:100px; background:rgba(239,236,228,.10);
}
.lozenge      { display:inline-flex; align-items:center; padding:3px 11px; background:rgba(88,109,58,.10); border:1px solid rgba(88,109,58,.28); border-radius:100px; font-family:var(--mono); font-size:9px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.lozenge.rust { background:rgba(184,85,60,.10); border-color:rgba(184,85,60,.28); color:var(--accent-2); }
.lozenge.gold { background:rgba(185,201,138,.14); border-color:rgba(185,201,138,.38); color:var(--accent-4); }

/* ── Table ── */
table.proto { width:100%; border-collapse:collapse; font-family:var(--grotesk); }
table.proto th, table.proto td { padding:clamp(9px,1vw,16px) clamp(10px,1.2vw,20px); text-align:left; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
table.proto th { font-family:var(--mono); font-size:9px; letter-spacing:.10em; text-transform:uppercase; color:var(--ink-mute); border-bottom-color:var(--ink); padding-bottom:11px; font-weight:500; }
table.proto td.tk { font-weight:600; font-size:clamp(12px,1.2vw,17px); letter-spacing:-.01em; }
table.proto td.tk em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent); }
table.proto td.tv { font-size:clamp(11px,1.1vw,15px); line-height:1.42; color:var(--ink-mute); }
table.proto td.tv em { font-family:var(--serif); font-style:italic; color:var(--accent); }
table.proto tr:last-child td { border-bottom:none; }
table.proto td.bad { color:var(--accent-2); }

/* ── Step top accent bar ── */
.step-card { position:relative; }
.step-card::after { content:""; position:absolute; top:0; left:clamp(18px,2.2vw,32px); right:clamp(18px,2.2vw,32px); height:3px; background:linear-gradient(90deg,var(--accent),transparent); border-radius:0 0 2px 2px; }
.step-card.dark::after { background:linear-gradient(90deg,var(--accent-4),transparent); }

/* ── Nav dots ── */
.nav-dots {
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  z-index:var(--z-dots); display:flex; flex-direction:column; gap:8px; align-items:center;
}
.nav-dots button {
  border:none; border-radius:50%; cursor:pointer; padding:0;
  position:relative;
  transition:width .3s var(--ease-out-quart), height .3s var(--ease-out-quart), background .3s var(--ease-out-quart), border-color .3s var(--ease-out-quart); display:block; flex-shrink:0;
}
/* Invisible hit-area extension: brings touch target to ≥24×24px */
.nav-dots button::before {
  content:''; position:absolute; inset:-10px; border-radius:50%;
}

@media (max-width:640px) { .nav-dots { display:none; } }

/* ── Animations ── */
@keyframes arcDrift1 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(10px,-7px) rotate(1.8deg)} }
@keyframes arcDrift2 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-8px,11px) rotate(-1.6deg)} }
@keyframes arcDrift3 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(7px,9px) rotate(1.2deg)} }
@keyframes labelFade { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
@keyframes metricPop { 0%{transform:scale(1)} 35%{transform:scale(1.06)} 70%{transform:scale(0.98)} 100%{transform:scale(1)} }
@keyframes shimmer  { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes scrollHint { 0%,100%{opacity:.42} 50%{opacity:1} }

/* ── Scroll hint — pulse to guide attention downward ── */
.sec-bot span + span { animation: scrollHint 3.2s ease-in-out infinite; }

/* ── Card & Metric hover ── */
.card { transition:transform .28s var(--ease-out-quart), box-shadow .28s var(--ease-out-quart); }
.card:hover { transform:translateY(-4px); box-shadow:var(--sh-lift); }
.card.no-hover:hover { transform:none; box-shadow:var(--sh-soft); }
.metric { transition:transform .28s var(--ease-out-quart), box-shadow .28s var(--ease-out-quart); cursor:pointer; }
.metric:hover { transform:translateY(-3px); box-shadow:var(--sh-lift); }
.metric.is-popping { animation:metricPop .5s var(--ease-out-quart) forwards; }
.glass-card { border-radius:16px; padding:clamp(18px,2.2vw,36px); display:flex; flex-direction:column; justify-content:space-between; transition:transform .28s var(--ease-out-quart), border-color .28s var(--ease-out-quart); }
.glass-card:hover { transform:translateY(-3px); border-color:rgba(239,236,228,.32) !important; }

/* ── Sticky nav ── */
#sticky-nav {
  position:fixed; top:0; left:0; right:0; height:44px; z-index:var(--z-nav);
  display:flex; align-items:center; gap:0;
  padding:0 clamp(18px,2.8vw,44px);
  transition:background .45s ease, border-color .45s ease;
  backdrop-filter:blur(18px) saturate(1.15);
}
#sticky-nav.is-dark  { background:rgba(12,10,9,.82);     border-bottom:1px solid rgba(239,236,228,.10); }
#sticky-nav.is-light { background:rgba(239,236,228,.88); border-bottom:1px solid rgba(28,31,26,.10); }
.snav-mark  { font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.04em; flex:0 0 auto; transition:color .45s ease; user-select:none; }
.snav-label { flex:1; text-align:center; font-family:var(--mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; animation:labelFade .38s ease; pointer-events:none; }
.snav-right { flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.snav-count { font-family:var(--mono); font-size:9px; letter-spacing:.2em; transition:color .45s ease; }
.snav-btn   {
  background:none; border-radius:5px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:12px; transition:background .18s ease, color .45s ease;
}
.snav-btn:hover { background:rgba(128,128,128,.14); }
.snav-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:5px; }
.nav-dots button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ── Section bottom chrome ── */
.sec-bot { position:absolute; bottom:14px; left:26px; right:26px; display:flex; justify-content:space-between; z-index:var(--z-chrome); font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; pointer-events:none; }

/* ── Slide-up enter for section content (FI wrapper) ── */
.fi { will-change:opacity,transform; }

/* ── S14 responsive case grid ── */
.s14-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(10px,1.2vw,16px); align-items:stretch; flex:1; margin-top:clamp(10px,1.2vh,16px); }
@media (max-width:900px) { .s14-grid { grid-template-columns:1fr; } }

/* ── S15 CTA grid responsive ── */
.s15-cta-grid { display:grid; grid-template-columns:repeat(3,1fr) auto; gap:clamp(9px,1.1vw,16px); align-items:stretch; }
@media (max-width:768px) { .s15-cta-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .s15-cta-grid { grid-template-columns:1fr; } }

/* ── S01 chapter index strip responsive ── */
.s01-index { border-top:1px solid rgba(239,236,228,.10); padding-top:clamp(10px,1.4vh,18px); display:flex; }
@media (max-width:640px) { .s01-index { display:none; } }

/* ── Mobile progress bar + counter (replaces hidden nav dots ≤640px) ── */
.mob-progress-bar {
  position:fixed; top:0; left:0; right:0; height:2px;
  background:var(--accent); transform-origin:left center;
  z-index:calc(var(--z-nav) + 1); pointer-events:none;
  transition:transform .35s var(--ease-out-quart);
  will-change:transform;
}
@media (min-width:641px) { .mob-progress-bar { display:none; } }

.mob-counter {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(239,236,228,.85); background:rgba(12,10,9,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:20px; padding:4px 12px; z-index:var(--z-dots); pointer-events:none;
  display:none;
}
@media (max-width:640px) { .mob-counter { display:block; } }

/* ── Nav action pills (Contact / Partager) ── */
.snav-action {
  background:none; border-radius:100px; cursor:pointer;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 14px; height:36px; display:flex; align-items:center; flex-shrink:0;
  transition:background .18s var(--ease-out-quart), opacity .18s ease;
  white-space:nowrap;
}
.snav-action:hover { background:rgba(128,128,128,.14); }
.snav-action:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:100px; }
@media (max-width:600px) { .snav-action { display:none; } }

/* ── Share border shader ── */
@property --sh-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes sh-spin { to { --sh-angle: 360deg; } }
.share-dialog-wrap {
  position:relative; border-radius:22px; padding:1.5px;
  background: conic-gradient(
    from var(--sh-angle),
    rgba(100,40,5,.06)   0deg,
    rgba(165,68,12,.44)  42deg,
    rgba(222,112,18,.80) 68deg,
    rgba(250,158,45,1.0) 86deg,
    rgba(255,205,80,.90) 96deg,
    rgba(228,128,32,.66) 118deg,
    rgba(165,68,12,.30)  152deg,
    rgba(100,40,5,.05)   210deg,
    rgba(100,40,5,.06)   360deg
  );
  animation: sh-spin 7s linear infinite;
  display:flex; width:min(680px,96vw);
}

/* ── Share modal ── */
@keyframes shareIn {
  from { opacity:0; transform:scale(0.95) translateY(12px); }
  to   { opacity:1; transform:scale(1)    translateY(0);    }
}
/* amber design tokens — local to share modal */
:root {
  --sh-amber:      #e8892a;
  --sh-amber-dim:  rgba(232,137,42,.55);
  --sh-surface:    #121008;
  --sh-card:       rgba(232,137,42,.06);
  --sh-card-b:     rgba(232,137,42,.14);
  --sh-card-hov:   rgba(232,137,42,.11);
  --sh-card-hov-b: rgba(232,137,42,.34);
  --sh-text:       rgba(255,235,200,.88);
  --sh-mute:       rgba(255,200,120,.42);
  --sh-done-bg:    rgba(232,137,42,.14);
  --sh-done-b:     rgba(232,137,42,.52);
}
.share-backdrop {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center; padding:16px;
  animation:labelFade .20s ease;
}
.share-dialog {
  background:var(--sh-surface);
  background-image:
    radial-gradient(ellipse 130% 90% at 0% 105%, rgba(200,100,18,.28) 0%, transparent 52%),
    radial-gradient(ellipse 60%  50% at 95%  -5%, rgba(160,80,10,.14)  0%, transparent 48%);
  border:none;
  border-radius:20px; padding:clamp(24px,3.4vw,46px);
  width:min(680px,96vw); position:relative; overflow:hidden;
  animation:shareIn .40s cubic-bezier(0.22,1,0.36,1);
  box-shadow:0 40px 100px rgba(0,0,0,.80), 0 0 0 1px rgba(232,137,42,.07);
  z-index:2; isolation:isolate;
}
/* top accent line */
.share-dialog::before {
  content:""; position:absolute; top:0;
  left:clamp(24px,3.4vw,46px); right:clamp(24px,3.4vw,46px); height:1px;
  background:linear-gradient(90deg, var(--sh-amber) 0%, rgba(232,137,42,.30) 60%, transparent 100%);
}
/* subtle grid */
.share-dialog::after {
  content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:38px 38px;
}
.share-close {
  position:absolute; top:16px; right:16px; z-index:10;
  width:30px; height:30px; border-radius:50%;
  background:rgba(232,137,42,.08); border:1px solid rgba(232,137,42,.16);
  color:var(--sh-mute); font-size:15px; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease;
}
.share-close:hover { background:rgba(232,137,42,.18); color:var(--sh-text); }
.share-close:focus-visible { outline:2px solid var(--sh-amber); outline-offset:2px; }
/* 2-col top row */
.share-row-top { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:clamp(20px,2.8vw,32px); }
@media (max-width:400px) { .share-row-top { grid-template-columns:1fr; } }
.share-card {
  background:var(--sh-card); border:1px solid var(--sh-card-b);
  border-radius:14px; padding:clamp(14px,1.8vw,20px);
  cursor:pointer; display:flex; flex-direction:column; gap:12px; text-align:left;
  position:relative; overflow:hidden; width:100%;
  transition:background .20s var(--ease-out-quart), border-color .20s var(--ease-out-quart), transform .20s var(--ease-out-quart);
}
.share-card:hover { background:var(--sh-card-hov); border-color:var(--sh-card-hov-b); transform:translateY(-2px); }
.share-card:focus-visible { outline:2px solid var(--sh-amber); outline-offset:2px; }
.share-card.is-done { border-color:var(--sh-done-b); background:var(--sh-done-bg); }
/* AI section */
.share-ai-section {
  margin-top:clamp(12px,1.6vw,18px);
  padding:clamp(14px,1.8vw,20px);
  background:rgba(232,137,42,.04); border:1px solid rgba(232,137,42,.14);
  border-radius:14px; position:relative; overflow:hidden;
}
.share-ai-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
@media (max-width:380px) { .share-ai-grid { grid-template-columns:1fr; } }
.share-ai-card {
  background:rgba(232,137,42,.07); border:1px solid rgba(232,137,42,.18);
  border-radius:10px; padding:clamp(11px,1.3vw,15px) clamp(12px,1.4vw,16px);
  text-decoration:none; display:flex; flex-direction:column; gap:6px;
  transition:background .20s var(--ease-out-quart), border-color .20s var(--ease-out-quart), transform .20s var(--ease-out-quart);
}
.share-ai-card:hover { background:rgba(232,137,42,.16); border-color:rgba(232,137,42,.40); transform:translateY(-2px); }
.share-ai-card:focus-visible { outline:2px solid var(--sh-amber); outline-offset:2px; }

/* ── Mobile share FAB (visible ≤600px where snav-action is hidden) ── */
.mob-share-fab {
  display:none;
  position:fixed; bottom:clamp(60px,9vh,80px); right:16px;
  z-index:calc(var(--z-nav) + 2);
  width:44px; height:44px; border-radius:50%;
  background:var(--accent); color:var(--bg);
  border:none; cursor:pointer; font-size:18px; line-height:1;
  box-shadow:0 4px 16px rgba(88,109,58,.45);
  transition:transform .22s var(--ease-out-quart), box-shadow .22s var(--ease-out-quart);
  align-items:center; justify-content:center;
}
.mob-share-fab:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(88,109,58,.50); }
.mob-share-fab:focus-visible { outline:2px solid var(--accent-4); outline-offset:3px; }
@media (max-width:600px) { .mob-share-fab { display:flex; } }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Canvas fill utility ── */
.cvs { display:block; width:100%; height:100%; }

/* ── Section content frame (replaces CONTENT JS object) ── */
.sec-content {
  position:absolute; inset:44px 0 38px;
  padding:0 var(--pad-h);
  display:flex; flex-direction:column; justify-content:space-between;
  box-sizing:border-box; z-index:2;
  color:var(--ink);
}
.sec-content.sec-dk { color:var(--dk-ink); }

/* ── Section overlay layers (DarkSec / LightSec) ── */
.sec-vignette  { position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at center,transparent 28%,rgba(0,0,0,.62) 100%); pointer-events:none; }
.sec-noise-dk  { position:absolute; inset:0; z-index:1; background-size:240px; mix-blend-mode:screen; opacity:.38; pointer-events:none; }
.sec-noise-lt  { position:absolute; inset:0; z-index:0; background-size:280px; mix-blend-mode:multiply; opacity:.52; pointer-events:none; }