/* ============================================================
   ECOMMERCE CAPITAL CLUB — Colors & Type Foundations
   Dark-theme, premium, "carré". Black canvas, white text,
   blue reserved for CTA. Helvetica Now Display throughout.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face{font-family:"Helvetica Now Display";src:url("fonts/HelveticaNowDisplay-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Helvetica Now Display";src:url("fonts/HelveticaNowDisplay-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Helvetica Now Display";src:url("fonts/HelveticaNowDisplay-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Helvetica Now Display";src:url("fonts/HelveticaNowDisplay-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Helvetica Now Display";src:url("fonts/HelveticaNowDisplay-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Helvetica Now Display";src:url("fonts/HelveticaNowDisplay-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:"Helvetica Now Display";src:url("fonts/HelveticaNowDisplay-BlackIta.ttf") format("truetype");font-weight:900;font-style:italic;font-display:swap;}

:root{
  /* ---------- CORE PALETTE ---------- */
  --ecc-black:#000000;          /* canvas — never flat in practice; always with a gradient/halo */
  --ecc-charbon-900:#0A0A0A;    /* near-black panels */
  --ecc-charbon-800:#0E0E0E;    /* card base */
  --ecc-charbon-700:#141414;    /* raised card */
  --ecc-charbon-600:#1A1A1A;    /* hover / inset */
  --ecc-charbon-500:#202020;    /* charcoal — top of dark gradients */
  --ecc-charbon-400:#2A2A2A;    /* hairline-on-dark, chips */

  --ecc-white:#FFFFFF;          /* primary text, logo, key headlines */
  --ecc-paper:#E5E5E5;          /* off-white — long-form body copy */
  --ecc-grey-300:#B5B5B5;       /* secondary text */
  --ecc-grey-400:#8A8A8A;       /* muted / captions */
  --ecc-grey-500:#5E5E5E;       /* disabled, faint labels, index numbers */
  --ecc-grey-600:#3A3A3A;       /* ghost / watermark strokes */

  /* ---------- ACCENTS ---------- */
  --ecc-blue:#1E5DEC;           /* THE accent — CTA & key elements only */
  --ecc-blue-hover:#3B73F0;     /* CTA hover (lift) */
  --ecc-blue-press:#1747B8;     /* CTA active (deeper) */
  --ecc-blue-tint:rgba(30,93,236,0.14); /* faint blue wash */

  --ecc-green:#45D483;          /* success / positive metrics / "wins" */
  --ecc-green-soft:#7DE6AC;     /* softer mint for large display numbers */
  --ecc-green-tint:rgba(69,212,131,0.12);

  --ecc-red:#E5484D;            /* live / destructive (Quitter, mic-off, REC) */

  /* ---------- BORDERS (white on dark) ---------- */
  --ecc-line:rgba(255,255,255,0.08);   /* default hairline */
  --ecc-line-strong:rgba(255,255,255,0.14);
  --ecc-line-faint:rgba(255,255,255,0.05);
  --ecc-divider:rgba(255,255,255,0.10); /* the thin vertical/horizontal rules in lockups */

  /* ---------- BACKGROUNDS (never flat black, never milky) ---------- */
  /* deep charcoal radial wash with a soft corner key light */
  --ecc-bg-gradient:radial-gradient(135% 115% at 82% -8%, #1E1E1E 0%, #151515 22%, #0A0A0A 48%, #000000 78%);
  /* dimensional key light — a soft spotlight in a dark room, faint metallic core */
  --ecc-halo-tr:radial-gradient(70% 60% at 86% 6%, rgba(255,255,255,0.16) 0%, rgba(228,232,240,0.07) 26%, rgba(255,255,255,0.02) 46%, transparent 64%);
  --ecc-halo-center:radial-gradient(75% 60% at 50% 38%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%, transparent 66%);
  /* card surface gradient (subtle top-light) */
  --ecc-surface-gradient:linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 14%, rgba(255,255,255,0) 40%), var(--ecc-charbon-800);
  /* metallic silver text fill for hero headlines */
  --ecc-metal:linear-gradient(180deg,#FFFFFF 0%,#F0F0F0 38%,#9C9C9C 100%);

  /* ---------- SHADOWS / ELEVATION ---------- */
  --ecc-shadow-card:0 24px 60px -20px rgba(0,0,0,0.8);
  --ecc-shadow-float:0 40px 90px -30px rgba(0,0,0,0.9);
  --ecc-shadow-cta:0 10px 30px -8px rgba(30,93,236,0.45);
  --ecc-glow-green:0 0 0 1px rgba(69,212,131,0.35), 0 0 24px -6px rgba(69,212,131,0.4);

  /* ---------- RADII (premium but "carré" — restrained) ---------- */
  --ecc-r-xs:6px;
  --ecc-r-sm:10px;
  --ecc-r-md:14px;     /* default card */
  --ecc-r-lg:20px;     /* large panels / mockups */
  --ecc-r-xl:28px;
  --ecc-r-pill:999px;  /* buttons, chips, avatars */

  /* ---------- SPACING (8pt base) ---------- */
  --ecc-s-1:4px;  --ecc-s-2:8px;  --ecc-s-3:12px; --ecc-s-4:16px;
  --ecc-s-5:24px; --ecc-s-6:32px; --ecc-s-7:48px; --ecc-s-8:64px;
  --ecc-s-9:96px; --ecc-s-10:128px;

  /* ---------- TYPE ---------- */
  --ecc-font:"Helvetica Now Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ecc-mono:"JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; /* technical labels, timestamps, data */

  /* fluid display scale */
  --ecc-fs-display:clamp(48px,9vw,112px);
  --ecc-fs-h1:clamp(36px,6vw,72px);
  --ecc-fs-h2:clamp(28px,4vw,48px);
  --ecc-fs-h3:clamp(22px,2.4vw,32px);
  --ecc-fs-lead:clamp(18px,1.6vw,22px);
  --ecc-fs-body:16px;
  --ecc-fs-sm:14px;
  --ecc-fs-label:12px;   /* mono kicker / eyebrow */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.ecc-display{
  font-family:var(--ecc-font);
  font-weight:900;
  font-size:var(--ecc-fs-display);
  line-height:0.92;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:var(--ecc-white);
}
/* metallic silver hero fill */
.ecc-display--metal{
  background:var(--ecc-metal);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* the signature emphasis: italic black for the stressed word */
.ecc-em-italic{font-style:italic;font-weight:900;}

.ecc-h1{font-family:var(--ecc-font);font-weight:800;font-size:var(--ecc-fs-h1);line-height:0.96;letter-spacing:-0.015em;text-transform:uppercase;color:var(--ecc-white);}
.ecc-h2{font-family:var(--ecc-font);font-weight:700;font-size:var(--ecc-fs-h2);line-height:1.0;letter-spacing:-0.01em;text-transform:uppercase;color:var(--ecc-white);}
.ecc-h3{font-family:var(--ecc-font);font-weight:700;font-size:var(--ecc-fs-h3);line-height:1.1;letter-spacing:-0.005em;color:var(--ecc-white);}

/* mixed-weight headline helper: light base, bold stress (as in "PROBLÈME → RÉSOLU") */
.ecc-h-light{font-weight:300;}
.ecc-h-bold{font-weight:800;}

.ecc-lead{font-family:var(--ecc-font);font-weight:400;font-size:var(--ecc-fs-lead);line-height:1.45;color:var(--ecc-paper);}
.ecc-body{font-family:var(--ecc-font);font-weight:400;font-size:var(--ecc-fs-body);line-height:1.6;color:var(--ecc-paper);}
.ecc-body-muted{font-family:var(--ecc-font);font-weight:400;font-size:var(--ecc-fs-body);line-height:1.6;color:var(--ecc-grey-400);}

/* mono kicker / section index — "— 01 / CALLS PRIVÉS" */
.ecc-kicker{font-family:var(--ecc-font);font-weight:500;font-size:var(--ecc-fs-label);letter-spacing:0.16em;text-transform:uppercase;color:var(--ecc-white);}
.ecc-index{font-family:var(--ecc-mono);font-weight:400;font-size:var(--ecc-fs-sm);letter-spacing:0.04em;color:var(--ecc-grey-500);}

/* technical/data label — monospace, low-key */
.ecc-mono{font-family:var(--ecc-mono);font-weight:400;font-size:var(--ecc-fs-sm);letter-spacing:0.02em;color:var(--ecc-grey-400);}
.ecc-data-pos{font-family:var(--ecc-font);font-weight:700;color:var(--ecc-green);}

/* caption */
.ecc-caption{font-family:var(--ecc-font);font-weight:500;font-size:var(--ecc-fs-sm);letter-spacing:0.02em;color:var(--ecc-grey-400);}