/* ═══════════════════════════════════════════════════════════════
   EMC DESIGN SYSTEM v2 — load AFTER styles.css
   Everything new is prefixed v2- so nothing collides with v1.
   Site convention kept: dark is the default, [data-theme="light"] = Douala daytime.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --v2-bg:#0A0A0A;--v2-surface:#141312;--v2-tint:#1B1916;
  --v2-ink:#FAF7F1;        /* headings */
  --v2-text:#DDD7CB;       /* body      13.8:1 */
  --v2-muted:#A69F92;      /* labels     7.5:1 — nothing lighter carries words */
  --v2-rule:#2E2B26;
  --v2-bronze:#BF8C4E;     /* shapes, bars, frames, button fills */
  --v2-bronze-text:#D3A467;/* bronze when it is TEXT  8.7:1 */
  --v2-flag:#FFD21F;       /* "à confirmer" asterisk */
  --v2-stage:#F3EFE8;      /* studio panel behind cut-out cars */
  --v2-on-bronze:#14110C;

  --v2-f-text:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --v2-f-display:'Barlow Condensed','Barlow','Arial Narrow',sans-serif;

  --v2-fs-small:0.875rem;  /* 14px FLOOR — nothing smaller, anywhere */
  --v2-fs-body:1.0625rem;  /* 17px */
  --v2-fs-lead:clamp(1.2rem,1rem + 1vw,1.5rem);
  --v2-fs-h3:1.25rem;
  --v2-fs-h2:clamp(2.1rem,1.4rem + 3.2vw,3.5rem);
  --v2-fs-h1:clamp(3.4rem,1.5rem + 9vw,8rem);
  --v2-fs-mega:clamp(6rem,2rem + 22vw,17rem);

  --v2-measure:62ch;
  --v2-gutter:clamp(1.25rem,4vw,4rem);
  --v2-section:clamp(5rem,4rem + 7vw,10rem);
  --v2-ease:cubic-bezier(.22,.7,.2,1);
}
@media (min-width:900px){:root{--v2-fs-body:1.125rem}}
[data-theme="light"]{
  --v2-bg:#F9F7F3;--v2-surface:#FFFFFF;--v2-tint:#F3EFE8;
  --v2-ink:#151515;--v2-text:#2E2C29;   /* 13:1 */
  --v2-muted:#5F5A52;                   /* 6.4:1 (v1 #888 was 3.3:1) */
  --v2-rule:#DDD6CA;
  --v2-bronze-text:#86602A;             /* 5.3:1 (raw bronze is 2.8:1 — never for small text) */
  --v2-flag:#B98F00;--v2-stage:#FFFFFF;
}

/* ── Component base ─────────────────────────────────────── */
:where([class*="v2-"]),:where([class*="v2-"])::before,:where([class*="v2-"])::after{box-sizing:border-box}
.v2-band,.v2-hero,.v2-scene{font:400 var(--v2-fs-body)/1.65 var(--v2-f-text);color:var(--v2-text);
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
.v2-band,.v2-hero{background:var(--v2-bg);padding-inline:0;max-width:none;margin:0}
.v2-scene{padding:0;max-width:none;margin:0}
:where(.v2-band,.v2-hero,.v2-scene) p,:where(.v2-band,.v2-hero,.v2-scene) figure,
:where(.v2-band,.v2-hero,.v2-scene) dl,:where(.v2-band,.v2-hero,.v2-scene) dd{margin:0}
.v2-h1,.v2-h2,.v2-h3,.v2-specs h3{margin:0;text-transform:none}
.v2-h2,.v2-h3,.v2-specs h3{letter-spacing:0}
.v2-features{list-style:none;padding:0;margin:0}
:where(.v2-band,.v2-hero,.v2-scene) img{max-width:100%;display:block}
:where(.v2-band,.v2-hero,.v2-scene) :focus-visible{outline:3px solid var(--v2-bronze);outline-offset:3px}

.v2-wrap{max-width:76rem;margin-inline:auto;padding-inline:var(--v2-gutter)}
.v2-band{padding-block:var(--v2-section)}
.v2-band--tint{background:var(--v2-tint)}

/* ── Type roles ─────────────────────────────────────────── */
.v2-h1{font:600 var(--v2-fs-h1)/.92 var(--v2-f-display);color:var(--v2-ink);letter-spacing:-.01em;text-wrap:balance;hyphens:manual}
.v2-h1 small{display:block;font-weight:500;font-size:.42em;line-height:1.1;color:var(--v2-bronze-text);letter-spacing:0;margin-top:.15em}
.v2-h2{font:600 var(--v2-fs-h2)/1.04 var(--v2-f-display);color:var(--v2-ink);text-wrap:balance;max-width:18ch;hyphens:manual}
.v2-h3{font:600 var(--v2-fs-h3)/1.3 var(--v2-f-text);color:var(--v2-ink)}
.v2-kicker{font:500 var(--v2-fs-small)/1.4 var(--v2-f-text);color:var(--v2-bronze-text);margin-bottom:1rem}
.v2-lead{font-size:var(--v2-fs-lead);line-height:1.5;color:var(--v2-ink);max-width:36ch;text-wrap:pretty}
.v2-prose{max-width:var(--v2-measure)}
.v2-prose p + p{margin-top:1.1em}
.v2-note{font-size:var(--v2-fs-small);line-height:1.55;color:var(--v2-muted);max-width:var(--v2-measure)}
.v2-flag{color:var(--v2-flag);font-weight:600;font-size:1.15em;line-height:0}
.v2-num{font-family:var(--v2-f-display);font-weight:600;font-variant-numeric:tabular-nums;color:var(--v2-ink);line-height:.9}

/* ── Buttons ────────────────────────────────────────────── */
.v2-btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.6rem 1.6rem;
  font:600 1rem/1.2 var(--v2-f-text);text-decoration:none;border:1.5px solid var(--v2-bronze);cursor:pointer;
  transition:background .2s,color .2s}
.v2-btn--solid{background:var(--v2-bronze);color:var(--v2-on-bronze)}
.v2-btn--solid:hover{background:var(--v2-ink);border-color:var(--v2-ink);color:var(--v2-bg)}
.v2-btn--ghost{background:transparent;color:var(--v2-ink)}
.v2-btn--ghost:hover{background:var(--v2-bronze);color:var(--v2-on-bronze)}

/* ─────────────────────────────────────────────────────────
   MOTION — three verbs only. Text never moves.
   tracer (draw) · dévoiler (unveil) · compter (count)
   ───────────────────────────────────────────────────────── */

/* Side accent + M-frame: v2 UPGRADES the existing v1 classes in place.
   v2.js adds .m-frame--v2 and the <i class="m-frame__top"> to every .m-frame it finds,
   so no template needs touching. Without JS the v1 frame renders exactly as before. */
.v2-js .side-accent__bar{transform-origin:top;transform:scaleY(0);transition:transform 1.1s var(--v2-ease)}
.v2-js .side-accent__bar:nth-child(2){transition-delay:.12s}
.v2-js .side-accent__bar:nth-child(3){transition-delay:.24s}
.v2-js .side-accent.is-in .side-accent__bar{transform:scaleY(1)}

.m-frame--v2{border:0 !important;overflow:hidden}
.m-frame--v2::before,.m-frame--v2::after,.m-frame__top{content:"";position:absolute;background:var(--v2-bronze);z-index:2;pointer-events:none}
.m-frame--v2::before{left:0;bottom:0;top:0;width:2px;transform-origin:bottom;transform:scaleY(0);transition:transform .45s var(--v2-ease)}
.m-frame__top{left:0;right:0;top:0;height:2px;transform-origin:left;transform:scaleX(0);transition:transform .5s var(--v2-ease) .4s}
.m-frame--v2::after{right:0;bottom:0;top:0;width:2px;transform-origin:top;transform:scaleY(0);transition:transform .45s var(--v2-ease) .85s}
.m-frame--v2 img{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--v2-ease) .55s,transform .6s ease}
.m-frame--v2.is-in::before,.m-frame--v2.is-in::after{transform:scaleY(1)}
.m-frame--v2.is-in .m-frame__top{transform:scaleX(1)}
.m-frame--v2.is-in img{clip-path:inset(0 0 0 0)}
.m-frame--stage{background:var(--v2-stage)}
.m-frame--stage img{width:100%;height:100%;object-fit:cover}
.m-frame--cutout img{object-fit:contain;mix-blend-mode:multiply}
.m-frame figcaption{position:absolute;left:0;bottom:0;z-index:3;background:var(--v2-bg);color:var(--v2-text);
  font-size:var(--v2-fs-small);padding:.35rem .8rem .35rem 0}

/* E-data — the three bars of the E now carry the three numbers.
   Brand ratio 100 / 68 / 43 is fixed; the biggest promise gets the longest bar. */
.v2-e-data{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.v2-e-data__row{display:grid;gap:.55rem}
.v2-e-data__row:nth-child(1){width:100%}
.v2-e-data__row:nth-child(2){width:68%}
.v2-e-data__row:nth-child(3){width:43%}
.v2-e-data__fig{display:flex;align-items:baseline;gap:.4rem;white-space:nowrap}
.v2-e-data__fig .v2-num{font-size:clamp(3rem,1.6rem + 6vw,6rem)}
.v2-e-data__row:nth-child(1) .v2-num{font-size:clamp(4rem,2rem + 9vw,8.5rem)}
.v2-e-data__unit{font:500 clamp(1.1rem,1rem + .6vw,1.5rem)/1 var(--v2-f-display);color:var(--v2-bronze-text)}
.v2-e-data__bar{height:5px;background:var(--v2-bronze);transform-origin:left}
.v2-e-data__label{font-size:1rem;line-height:1.4;color:var(--v2-text);white-space:normal}
.v2-js .v2-e-data__bar{transform:scaleX(0);transition:transform 1.2s var(--v2-ease)}
.v2-js .v2-e-data__row:nth-child(2) .v2-e-data__bar{transition-delay:.18s}
.v2-js .v2-e-data__row:nth-child(3) .v2-e-data__bar{transition-delay:.36s}
.v2-js .v2-e-data.is-in .v2-e-data__bar{transform:scaleX(1)}
@media (max-width:640px){
  .v2-e-data__row:nth-child(2){width:78%}
  .v2-e-data__row:nth-child(3){width:58%}
}

/* ── Hero ───────────────────────────────────────────────── */
.v2-hero{position:relative;padding-block:clamp(2.5rem,6vw,5rem) clamp(3.5rem,7vw,6rem)}
.v2-hero__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:end}
.v2-hero__maker{font:500 1rem/1.4 var(--v2-f-text);color:var(--v2-muted);margin-bottom:1.25rem}
.v2-hero__tag{font-size:var(--v2-fs-lead);color:var(--v2-text);margin-top:1.5rem;max-width:24ch;line-height:1.35}
.v2-hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.v2-hero .m-frame{aspect-ratio:16/10}
.v2-hero .v2-e-data{margin-top:clamp(3rem,6vw,5rem)}
@media (max-width:899px){.v2-hero__grid > figure{order:-1}}
@media (min-width:900px){.v2-hero__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}

/* ── Two-column content bands ──────────────────────────── */
.v2-split{display:grid;gap:clamp(2rem,5vw,5rem)}
@media (min-width:900px){
  .v2-split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
  .v2-split--flip > :first-child{order:2}
}
.v2-split .v2-h2{margin-bottom:1.5rem}

/* Feature rows — replaces "■ Bold — grey 11px description" */
.v2-features{border-top:1px solid var(--v2-rule)}
.v2-features li{display:grid;gap:.2rem;padding-block:1.15rem;border-bottom:1px solid var(--v2-rule)}
.v2-features strong{font:600 1.125rem/1.3 var(--v2-f-text);color:var(--v2-ink)}
.v2-features span{color:var(--v2-text);line-height:1.5}
@media (min-width:560px){
  .v2-features li{grid-template-columns:13rem 1fr;gap:1.5rem;align-items:baseline}
}

/* ── Range scene (scroll-scrubbed) ─────────────────────── */
.v2-scene{position:relative;height:260vh;background:var(--v2-tint)}
.v2-scene__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:5rem 3rem;overflow:hidden}
.v2-scene__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 2rem}
.v2-scene__fig{display:flex;align-items:baseline;gap:.6rem;margin-top:.5rem}
.v2-scene__fig .v2-num{font-size:var(--v2-fs-mega);letter-spacing:-.02em}
.v2-scene__fig .v2-e-data__unit{font-size:clamp(1.5rem,1rem + 3vw,3.5rem)}
.v2-batt{display:inline-flex;border:1.5px solid var(--v2-bronze)}
.v2-batt button{background:none;border:0;color:var(--v2-text);font:500 1rem/1.2 var(--v2-f-text);padding:.7rem 1.1rem;min-height:3rem;cursor:pointer}
.v2-batt button[aria-pressed="true"]{background:var(--v2-bronze);color:var(--v2-on-bronze);font-weight:600}
.v2-route{position:relative;margin-block:3.75rem 3.5rem;height:5px;background:var(--v2-rule)}
.v2-route__fill{position:absolute;inset:0;background:var(--v2-bronze);transform-origin:left;transform:scaleX(var(--p,1))}
.v2-route__car{position:absolute;top:50%;left:calc(var(--p,1)*100%);width:15px;height:15px;background:var(--v2-ink);
  border:3px solid var(--v2-bronze);transform:translate(-50%,-50%) rotate(45deg)}
.v2-stop{position:absolute;top:50%;left:calc(var(--at)*100%);transition:left .6s var(--v2-ease)}
.v2-stop::before{content:"";position:absolute;left:-1px;top:-9px;width:2px;height:18px;background:var(--v2-muted)}
.v2-stop b{position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;font:600 1rem/1.2 var(--v2-f-text);color:var(--v2-muted);transition:color .3s}
.v2-stop small{display:block;font:400 var(--v2-fs-small)/1.3 var(--v2-f-text);text-align:center}
.v2-stop--up b{bottom:1rem}
.v2-stop--down b{top:1rem}
.v2-stop--start b{transform:none}
.v2-stop.is-passed b{color:var(--v2-ink)}
.v2-stop.is-passed::before{background:var(--v2-bronze)}
.v2-scene__say{min-height:4.5em;font-size:var(--v2-fs-lead);line-height:1.4;color:var(--v2-ink);max-width:34ch}
.v2-scene__say span{display:none}
.v2-scene__say span.is-on{display:block}
.v2-static .v2-scene{height:auto}
.v2-static .v2-scene__pin{position:static;height:auto;padding-block:var(--v2-section)}

/* ── Charge ─────────────────────────────────────────────── */
.v2-charge__fig{display:flex;align-items:baseline;gap:.5rem}
.v2-charge__fig .v2-num{font-size:clamp(5rem,2rem + 14vw,11rem)}
.v2-cell{position:relative;height:clamp(3.5rem,8vw,5rem);border:2px solid var(--v2-bronze);margin-top:2rem;max-width:34rem}
.v2-cell::after{content:"";position:absolute;right:-9px;top:30%;bottom:30%;width:7px;background:var(--v2-bronze)}
.v2-cell__fill{position:absolute;inset:4px auto 4px 4px;width:calc(var(--from,30%) - 4px);background:var(--v2-bronze)}
.v2-js .v2-cell__fill{transition:width 2.4s cubic-bezier(.3,.1,.2,1) .3s}
.v2-js .v2-cell.is-in .v2-cell__fill{width:calc(var(--to,80%) - 4px)}
.v2-cell__pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:1rem;
  font:600 1.5rem/1 var(--v2-f-display);color:var(--v2-ink);font-variant-numeric:tabular-nums}
.v2-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:2.5rem;max-width:34rem;
  border-top:1px solid var(--v2-rule);padding-top:1.5rem}
.v2-pair .v2-num{font-size:2.75rem;display:block}
.v2-pair span{display:block;margin-top:.35rem;line-height:1.4}

/* ── Gallery ────────────────────────────────────────────── */
.v2-duo{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:1rem}
.v2-duo .m-frame{aspect-ratio:6/7}
.v2-wide.m-frame{aspect-ratio:14/5}

/* ── Spec sheet — 52px rows, 17px type, no grey-on-grey ─── */
.v2-specs{display:grid;gap:clamp(2rem,4vw,3.5rem) clamp(2rem,5vw,5rem);margin-top:3rem}
@media (min-width:900px){.v2-specs{grid-template-columns:1fr 1fr}}
.v2-specs h3{font:600 1.5rem/1.2 var(--v2-f-display);color:var(--v2-ink);padding-bottom:.75rem;border-bottom:3px solid var(--v2-bronze)}
.v2-specs dl > div{display:grid;grid-template-columns:minmax(7.5rem,2fr) 3fr;gap:1rem;align-items:baseline;
  padding-block:.85rem;border-bottom:1px solid var(--v2-rule);min-height:3.25rem}
.v2-specs dt{color:var(--v2-muted)}
.v2-specs dd{color:var(--v2-ink);font-weight:500;font-variant-numeric:tabular-nums}


/* ── Savings ────────────────────────────────────────────── */
.v2-dial{margin-top:2.5rem;max-width:30rem}
.v2-dial label{display:block;font-size:1.125rem;color:var(--v2-ink);margin-bottom:1rem}
.v2-dial output{font:600 1.75rem/1 var(--v2-f-display);font-variant-numeric:tabular-nums;color:var(--v2-bronze-text)}
.v2-dial input{width:100%;height:2.75rem;accent-color:var(--v2-bronze);cursor:pointer}
.v2-dial__presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.v2-dial__presets button{background:none;border:1.5px solid var(--v2-bronze);color:var(--v2-ink);font:500 1rem/1.2 var(--v2-f-text);
  min-height:3rem;padding:.5rem 1.1rem;cursor:pointer}
.v2-dial__presets button:hover{background:var(--v2-bronze);color:var(--v2-on-bronze)}
.v2-save__over{color:var(--v2-muted)}
.v2-save__fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;margin-top:.25rem}
.v2-save__fig .v2-num{font-size:clamp(3.75rem,1.5rem + 9vw,8rem);letter-spacing:-.01em}
.v2-save__year{font-size:var(--v2-fs-lead);color:var(--v2-ink);margin-top:.5rem}
.v2-save__year b{font-weight:600;font-variant-numeric:tabular-nums}
.v2-save__bars{display:grid;gap:1.25rem;margin-top:2.5rem}
.v2-save__row p{margin-bottom:.45rem;display:flex;flex-wrap:wrap;gap:0 .6rem;justify-content:space-between;max-width:100%}
.v2-save__row b{font-weight:600;color:var(--v2-ink)}
.v2-save__row span{font-variant-numeric:tabular-nums}
.v2-js .v2-save__bars.is-in .v2-e-data__bar{transform:scaleX(1)}
.v2-js .v2-save__row:nth-child(2) .v2-e-data__bar{transition-delay:.18s}
.v2-js .v2-save__row:nth-child(3) .v2-e-data__bar{transition-delay:.36s}

/* ── Campaign band ─────────────────────────────────────── */
.v2-arrive{background:var(--v2-bronze);color:var(--v2-on-bronze)}
.v2-arrive .v2-wrap{display:grid;gap:2rem;align-items:end}
.v2-arrive .v2-num{color:var(--v2-on-bronze);font-size:var(--v2-fs-mega);letter-spacing:-.02em}
.v2-arrive p{font-size:var(--v2-fs-lead);line-height:1.35;max-width:26ch;color:var(--v2-on-bronze)}
.v2-arrive .v2-btn{background:var(--v2-on-bronze);border-color:var(--v2-on-bronze);color:#F9F7F3;margin-top:1.75rem}
.v2-arrive .v2-btn:hover{background:#F9F7F3;color:var(--v2-on-bronze);border-color:#F9F7F3}
@media (min-width:800px){.v2-arrive .v2-wrap{grid-template-columns:auto 1fr;gap:4rem}}

@media (prefers-reduced-motion:reduce){
  [class*="v2-"],[class*="v2-"]::before,[class*="v2-"]::after,.m-frame--v2 img{transition:none !important;animation:none !important}
}

.v2-arrive__more{display:inline-block;margin:1.75rem 0 0 1.5rem;color:var(--v2-on-bronze);font:600 1rem/1.2 var(--v2-f-text);text-underline-offset:.25em}

/* ── Hardening: v1 has global p/li colour and size rules. Keep these LAST. ── */
.v2-band p,.v2-hero p,.v2-scene p,.v2-band li,.v2-band dd,.v2-band dt{font-size:inherit;line-height:inherit}
.v2-band p,.v2-hero p,.v2-scene p,.v2-features span{color:var(--v2-text)}
.v2-features li{margin:0}
p.v2-note,p.v2-save__over,p.v2-hero__maker{color:var(--v2-muted)}
p.v2-note{font-size:var(--v2-fs-small);line-height:1.55}
p.v2-hero__maker,p.v2-e-data__label{font-size:1rem;line-height:1.4}
p.v2-lead,p.v2-scene__say,p.v2-save__year,p.v2-hero__tag{font-size:var(--v2-fs-lead);color:var(--v2-ink)}
p.v2-lead{line-height:1.5} p.v2-scene__say{line-height:1.4} p.v2-hero__tag{line-height:1.35;color:var(--v2-text)}
.v2-save__row p,.v2-save__row p span{color:var(--v2-text)} .v2-save__row p b{color:var(--v2-ink)}
.v2-arrive p{font-size:var(--v2-fs-lead);line-height:1.35;color:var(--v2-on-bronze)}
.v2-specs dt{color:var(--v2-muted)} .v2-specs dd{color:var(--v2-ink)}