/* NOTE D'INTÉGRATION (Claude Code, 18/09/2026)
   Source : 03-visuels/visuels-interactifs/_charte/melorio-design-system.css

   Aucun token de charte n'est modifié : couleurs, échelle typographique,
   rayons, ombres et motion sont identiques à la source. Deux adaptations,
   et deux seulement :

   1. URL des @font-face — les polices sont servies depuis ../fonts/ au
      format WOFF2 (Montserrat : 749 Ko en TTF, 241 Ko en WOFF2).

   2. Les @font-face de Programme sont RETIRÉS, et le fichier de police
      n'est pas publié. Programme est une fonte commerciale de Production
      Type : la licence bureautique fournie avec la charte ne couvre pas
      l'usage web, qui exige une licence distincte. Décision du 18/09/2026.

      Le token --font-display reste écrit tel que la charte le pose.
      Programme n'étant plus déclaré, il se replie de lui-même sur
      Montserrat. Le jour où une licence web sera acquise, rétablir les
      deux @font-face suffit à repasser tout le site en Programme.

      Le logo reste en Programme : c'est une image livrée par l'agence,
      pas une police redistribuée. */
/* =========================================================
   Melorio Design System — Colors & Type
   Source: Charte graphique Melorio (official brand guidelines)
   ========================================================= */

/* ---------- Fonts ----------
   "Programme Bold" is the official titling face (proprietary — Production Type).
   Only the Bold weight was provided in the brand package.
   For body copy the charte specifies "Programme" (regular);
   as no regular weight was supplied we substitute Montserrat,
   which is also shipped inside the brand package as a fallback.
   ▲ FLAG: please provide Programme-Regular/Medium if available.
*/
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat-400.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat-400-italic.woff2") format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat-500.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat-500-italic.woff2") format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat-700.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat-700-italic.woff2") format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ===================================================
     COLOR — Brand primitives (from charte graphique)
     =================================================== */

  /* Dark forest green — primary / text on light */
  --melorio-green:        #0E3934;  /* CMJN 100/25/60/50 · RGB 14/57/52  */
  --melorio-green-ink:    #0A2824;  /* shade for hover on dark surfaces   */
  --melorio-green-soft:   #1A4E47;  /* lift for cards on dark bg          */

  /* Coral red — accent / energy / CTAs */
  --melorio-coral:        #FD4A43;  /* CMJN 0/80/65/0 · RGB 253/74/67     */
  --melorio-coral-ink:    #E03A34;  /* pressed / hover darker             */
  --melorio-coral-tint:   #FEE7E5;  /* light wash for badges              */

  /* Soft pink — secondary / data viz / paper */
  --melorio-pink:         #F5C7CF;  /* CMJN 0/30/10/0 · RGB 245/199/207   */
  --melorio-pink-deep:    #E9A5B0;  /* hover / contrast variant           */

  /* Off-white / paper */
  --melorio-paper:        #F7F6FF;  /* near-white with a cool cast        */
  --melorio-paper-warm:   #FBFAF6;  /* alt letterhead cream               */
  --melorio-white:        #FFFFFF;

  /* Neutrals (derived from green) */
  --melorio-n-900:        #0E3934;
  --melorio-n-800:        #2A4B47;
  --melorio-n-700:        #4A635F;
  --melorio-n-500:        #7C908D;
  --melorio-n-300:        #C7D0CE;
  --melorio-n-200:        #E1E6E4;
  --melorio-n-100:        #EFF1F0;
  --melorio-n-050:        #F6F7F7;

  /* Semantic */
  --color-bg:             var(--melorio-paper);
  --color-surface:        #FFFFFF;
  --color-surface-sunk:   var(--melorio-n-050);
  --color-surface-dark:   var(--melorio-green);
  --color-border:         var(--melorio-n-200);
  --color-border-strong:  var(--melorio-n-300);

  --color-fg-1:           var(--melorio-green);    /* titles, strong body */
  --color-fg-2:           var(--melorio-n-700);    /* secondary copy      */
  --color-fg-3:           var(--melorio-n-500);    /* tertiary / labels   */
  --color-fg-on-dark:     var(--melorio-paper);
  --color-fg-on-coral:    var(--melorio-paper);

  --color-accent:         var(--melorio-coral);
  --color-accent-ink:     var(--melorio-coral-ink);
  --color-accent-soft:    var(--melorio-pink);

  /* Status (derived, harmonised with palette) */
  --color-success:        #2F8F6A;
  --color-warning:        #E39438;
  --color-danger:         var(--melorio-coral);
  --color-info:           #3A7A8C;

  /* Data-viz palette (ordered) */
  --viz-1: var(--melorio-coral);
  --viz-2: var(--melorio-green);
  --viz-3: var(--melorio-pink);
  --viz-4: #F0B4A0;
  --viz-5: #2F8F6A;
  --viz-6: #3A7A8C;

  /* ===================================================
     TYPE — families & scale
     =================================================== */

  --font-display: 'Programme', 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Aucune police à chasse fixe n'est spécifiée par la charte : pile système uniquement. */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale — body unit 16px. Display uses Programme Bold only. */
  --fs-3xs:   10px;   /* micro / legal            */
  --fs-2xs:   12px;   /* caption, address block   */
  --fs-xs:    13px;   /* meta, table rows         */
  --fs-sm:    14px;   /* ui labels, small body    */
  --fs-base:  16px;   /* body                     */
  --fs-md:    18px;   /* lead body                */
  --fs-lg:    22px;   /* h5                       */
  --fs-xl:    28px;   /* h4                       */
  --fs-2xl:   36px;   /* h3                       */
  --fs-3xl:   48px;   /* h2                       */
  --fs-4xl:   64px;   /* h1                       */
  --fs-5xl:   88px;   /* hero display             */

  --lh-tight:  1.05; /* @kind other */
  --lh-snug:   1.2; /* @kind other */
  --lh-normal: 1.45; /* @kind other */
  --lh-loose:  1.65; /* @kind other */

  /* The charte's lowercase wordmark uses visibly open tracking.
     Display titles inherit that feel. */
  --ls-display: -0.01em;
  --ls-body:     0; /* @kind other */
  --ls-eyebrow:  0.14em;   /* uppercase small labels */

  /* ===================================================
     SPACING & RADII (aligned to 4px grid)
     =================================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;
  --radius-none: 0px;

  /* Shadow system — subtle, warm, grounded.
     Melorio prefers flat surfaces; shadows are used sparingly. */
  --shadow-xs: 0 1px 2px rgba(14, 57, 52, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 57, 52, 0.08);
  --shadow-md: 0 8px 20px -6px rgba(14, 57, 52, 0.14);
  --shadow-lg: 0 24px 40px -16px rgba(14, 57, 52, 0.22);
  --shadow-ring: 0 0 0 3px rgba(253, 74, 67, 0.25);

  /* Motion */
  --ease-out:   cubic-bezier(.2, .8, .2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(.5, 0, .3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ===========================================================
   SEMANTIC ELEMENT STYLES
   =========================================================== */

html, body {
  background: var(--color-bg);
  color: var(--color-fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Display / headings — Programme Bold, lowercase-friendly ----- */
.display,
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-fg-1);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
}

h1, .h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight);  }
h2, .h2 { font-size: var(--fs-3xl); line-height: var(--lh-tight);  }
h3, .h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug);   }
h4, .h4 { font-size: var(--fs-xl);  line-height: var(--lh-snug);   }
h5, .h5 { font-size: var(--fs-lg);  line-height: var(--lh-snug);   }

.display-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* ----- Eyebrow / small caps labels (used a lot in the brand) ----- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ----- Body text ----- */
p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--color-fg-1);
  text-wrap: pretty;
  margin: 0;
}
.body-lead { font-size: var(--fs-md);  line-height: var(--lh-loose);  color: var(--color-fg-1); }
.body-sm   { font-size: var(--fs-sm);  line-height: var(--lh-normal); color: var(--color-fg-2); }
.caption   { font-size: var(--fs-2xs); line-height: var(--lh-normal); color: var(--color-fg-3); }

strong, b { font-weight: 700; }
em { font-style: italic; }

/* ----- Links ----- */
a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--color-accent) 30%, transparent);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-accent-ink); border-bottom-color: var(--color-accent-ink); }

/* ----- Code / mono ----- */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-surface-sunk);
  padding: 0.12em 0.34em;
  border-radius: var(--radius-xs);
  color: var(--color-fg-1);
}
pre { padding: var(--space-4); overflow: auto; }

/* ----- Selection ----- */
::selection { background: var(--melorio-pink); color: var(--melorio-green); }

/* ----- Focus ring (accessibility) ----- */
:focus-visible {
  outline: 2px solid var(--melorio-coral);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ----- Utility: address block (the a1./a2./t./m./w./rs. pattern) ----- */
.addr-block {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  line-height: 1.7;
  color: currentColor;
  display: grid;
  grid-template-columns: 1.8em 1fr;
  gap: 2px 10px;
}
.addr-block dt { font-weight: 500; opacity: 0.95; }
.addr-block dt::after { content: '.'; }
.addr-block dd { margin: 0; }

/* =========================================================
   Melorio — charte 1a « papier & corail » (2026)
   À CONCATÉNER en fin de colors_and_type.css.
   Aucun token existant n'est supprimé : la palette est inchangée,
   seul l'USAGE change — le vert redevient une encre.
   ========================================================= */

:root {
  /* ---- Rôles de surface (nouveaux) ----
     Le vert n'est plus une couleur de fond de section.
     Il ne subsiste qu'en encre et sur UNE zone par page. */
  --color-surface-emphasis: var(--melorio-pink);   /* carte mise en avant, chiffre clé */
  --color-surface-footer:   var(--melorio-green);  /* pied de page / bandeau de contact
                                                      — un seul par page */

  /* ---- Confetti : les deux facettes du ruban ---- */
  --confetti-face-1: var(--melorio-coral);
  --confetti-face-2: var(--melorio-pink);

  /* ---- Budget de surfaces indicatif (documentation) ----
     papier 70 % · rose 14 % · corail 11 % · vert 5 % */

  /* ---- Display resserré (titres en bas de casse) ---- */
  --ls-display-lg: -0.025em;   /* à partir de --fs-3xl */
}

/* Les grands titres se resserrent davantage qu'en 2019. */
.display-hero,
h1, .h1 {
  letter-spacing: var(--ls-display-lg);
  text-transform: lowercase;   /* le titrage de marque est en bas de casse */
}

/* Aplat coloré : une seule zone par page.
   Utiliser .surface-footer sur le pied de page OU le bandeau de contact,
   jamais sur deux blocs de la même page. */
.surface-footer {
  background: var(--color-surface-footer);
  color: var(--color-fg-on-dark);
}
.surface-emphasis {
  background: var(--color-surface-emphasis);
  color: var(--melorio-green);
}

/* Corail : accent, jamais fond de page.
   Interdits de contraste explicités pour la revue. */
/* ✗ .on-green  .text-coral  → corail sur vert : contraste insuffisant */
/* ✗ .on-pink   .text-coral  → corail sur rose : contraste insuffisant */

/* Print — le papier ne s'imprime pas, rayons resserrés, aucune ombre. */
@media print {
  html, body { background: #FFFFFF; }
  * { box-shadow: none !important; }
  .card, [class*="radius-lg"], [class*="radius-xl"] { border-radius: 10px; }
}