/* =============================================================
   ALDENE — Colors & Type tokens
   Derived from brand assets (logo, LinkedIn banner, Plaquette V2,
   Canva publication templates).
   ============================================================= */

/* --- Webfont declarations ------------------------------------
   BRAND FONTS (confirmed by client):
   - Display / Headings: Montserrat (variable weight)
   - Body: Poppins (variable weight)
   Both shipped as .ttf variable fonts in fonts/.
   ------------------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"), url("./fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Variable.ttf") format("truetype-variations"), url("./fonts/Poppins-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =========================================================
     COLORS — CORE BRAND
     ========================================================= */
  --aldene-navy:        #1E2442;   /* primary brand dark — page/bg */
  --aldene-navy-900:    #161B33;   /* deeper, used for footers, shadows */
  --aldene-navy-700:    #2B3155;   /* cards/panels on navy bg */
  --aldene-navy-500:    #3D4470;   /* slashes, decorative stripes */
  --aldene-navy-300:    #6B729B;   /* muted text on navy */

  --aldene-yellow:      #EFBA25;   /* signature accent — the dot */
  --aldene-yellow-600:  #C79410;   /* hover / pressed */
  --aldene-yellow-200:  #F9E4A5;   /* soft highlight wash */

  --aldene-white:       #FFFFFF;
  --aldene-off-white:   #F6F5F0;   /* warm off-white for light bg pages */
  --aldene-paper:       #EFEDE5;   /* subtle paper tone (brochure) */

  /* =========================================================
     COLORS — SERVICE / CATEGORY CHIPS
     Pulled from the LinkedIn banner's dotted service list
     ========================================================= */
  --aldene-svc-informatique: #2E8BE6;   /* Informatique — blue */
  --aldene-svc-impression:   #2EB85C;   /* Impression — green */
  --aldene-svc-telecom:      #B43C7E;   /* Télécom — magenta */
  --aldene-svc-mobilier:     #C4642A;   /* Mobilier / AV — burnt orange */
  --aldene-svc-ged:          #D9394E;   /* GED — red */
  --aldene-svc-cyber:        #8E3DC4;   /* Cybersécurité — purple (added) */
  --aldene-svc-ia:           #1FB8B0;   /* IA / Automatisation — teal (added) */

  /* =========================================================
     COLORS — SEMANTIC
     ========================================================= */
  --fg-1:               var(--aldene-white);       /* primary text on navy */
  --fg-2:               #C7CADD;                   /* secondary on navy */
  --fg-3:               var(--aldene-navy-300);    /* muted on navy */
  --fg-invert-1:        var(--aldene-navy);        /* primary text on light */
  --fg-invert-2:        #4A5175;                   /* secondary on light */
  --fg-invert-3:        #8A90B0;                   /* muted on light */

  --bg-1:               var(--aldene-navy);        /* default page */
  --bg-2:               var(--aldene-navy-700);    /* cards on dark */
  --bg-invert-1:        var(--aldene-white);       /* light page */
  --bg-invert-2:        var(--aldene-off-white);   /* light card */

  --accent:             var(--aldene-yellow);
  --accent-fg:          var(--aldene-navy);        /* text placed ON yellow */

  --border-1:           rgba(255,255,255,.10);
  --border-2:           rgba(255,255,255,.18);
  --border-invert-1:    rgba(30,36,66,.10);
  --border-invert-2:    rgba(30,36,66,.18);

  /* Status */
  --success:            #2EB85C;
  --warning:            #EFBA25;
  --danger:             #D9394E;
  --info:               #2E8BE6;

  /* =========================================================
     TYPE — FAMILIES
     ========================================================= */
  --font-display:       "Montserrat", "Aldene Display", system-ui, sans-serif;
  --font-body:          "Poppins", "Aldene Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* =========================================================
     TYPE — SCALE (fluid-friendly px)
     ========================================================= */
  --fs-display-xl:      88px;   /* brochure hero "TITRE DE LA" */
  --fs-display-lg:      64px;
  --fs-display-md:      48px;
  --fs-display-sm:      36px;

  --fs-h1:              40px;
  --fs-h2:              30px;
  --fs-h3:              22px;
  --fs-h4:              18px;

  --fs-body-lg:         18px;
  --fs-body:            16px;
  --fs-body-sm:         14px;
  --fs-caption:         12px;
  --fs-overline:        11px;

  /* Weights */
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-black:           800;

  /* Line heights */
  --lh-tight:           1.05;    /* display caps, brochure titles */
  --lh-snug:            1.2;     /* headings */
  --lh-normal:          1.45;    /* body */
  --lh-loose:           1.7;     /* long-form */

  /* Tracking — brochure "V O S  S U C C È S" uses very wide tracking */
  --tracking-display:   -0.01em;
  --tracking-overline:  0.24em;   /* spaced-out caps labels */
  --tracking-eyebrow:   0.18em;
  --tracking-body:      0;

  /* =========================================================
     SPACING / RADII / SHADOW / MOTION
     ========================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;    /* default card corner */
  --radius-xl:   20px;
  --radius-pill: 999px;
  --radius-sharp: 0px;    /* brochure "A noter" yellow block = sharp */

  --shadow-sm:    0 1px 2px rgba(16, 20, 45, .08);
  --shadow-md:    0 6px 18px rgba(16, 20, 45, .12);
  --shadow-lg:    0 24px 48px rgba(16, 20, 45, .22);
  --shadow-inset: inset 0 0 0 1px rgba(255,255,255,.06);

  --motion-fast:   140ms;
  --motion-base:   220ms;
  --motion-slow:   420ms;
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-out:      cubic-bezier(.16,1,.3,1);
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   Defaults assume DARK (navy) background — Aldene's primary mode.
   For light surfaces, wrap content in `.on-light` (see below).
   ============================================================= */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Display / Hero title (brochure "TITRE DE LA PUBLICATION") */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}
/* The signature "period" — a yellow dot after the last letter */
.display .dot, .display-dot {
  color: var(--accent);
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
}
h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4);
}
h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}
h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
p.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

/* Overline — "V O S  S U C C È S" style spaced caps */
.overline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--accent);
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: .92em;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
a:hover { border-bottom-color: currentColor; }

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-6) 0;
}

/* Yellow highlight block — "A noter" brochure component. Sharp
   corners, heavy weight, intentionally blocky. */
.notice-block {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-fg);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sharp);
}
.notice-block strong { font-weight: var(--fw-bold); }

/* --- Light surface override -------------------------------- */
.on-light {
  background: var(--bg-invert-1);
  color: var(--fg-invert-1);
}
.on-light p { color: var(--fg-invert-1); }
.on-light p.lead { color: var(--fg-invert-2); }
.on-light small, .on-light .caption { color: var(--fg-invert-3); }
.on-light hr { border-top-color: var(--border-invert-1); }