/* ============================================================
   MSW — DESIGN TOKENS
   ============================================================
   Ce fichier est la source unique du design system.
   POUR FORKER LE THÈME : c'est le seul fichier à ajuster en profondeur.
   Palette, typo, spacing, radius, ombres — tout est ici.
   ============================================================ */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF, U+2113, U+2116, U+2122, U+2212;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF, U+2113, U+2116, U+2122, U+2212;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF, U+2113, U+2116, U+2122, U+2212;
}

:root {
  /* ---------- PALETTE ---------- */
  /* Encre + fond papier */
  --ink:        #23201B;   /* texte principal, warm dark */
  --ink-2:      #3A362E;   /* texte body secondaire */
  --ink-3:      #4A463D;   /* texte body tertiaire */
  --ink-4:      #6B6559;   /* labels, aide, meta */
  --ink-5:      #8A8578;   /* placeholder, tres discret */
  --ink-6:      #A49D8D;   /* muted, décorations */

  --paper:      #F7F5EF;   /* fond principal cream */
  --paper-2:    #F4F1EA;   /* fond alternance */
  --paper-3:    #F0ECE3;   /* fond section darker */
  --paper-4:    #EDE9E0;   /* fond emphase */
  --paper-5:    #E6E1D6;   /* fond most emphasized */
  --paper-hi:   #FAF9F5;   /* fond ultra-clair (input, card) */
  --paper-hi-2: #EFECE4;   /* variante */

  --surface:    #FFFFFF;   /* blanc pur, cards emphase */

  /* Accents */
  --brass:      #C7844D;   /* accent laiton — eyebrows, verdicts, callouts */
  --brass-d:    #A6693A;   /* laiton pressé/hover */

  --blue:       #1B3A6B;   /* bleu profond — CTA primaires */
  --blue-d:     #16305A;   /* bleu hover */

  --green:      #0F9058;   /* vert action — check, confirmation */
  --green-d:    #0C7346;

  /* Borders */
  --border:     #D9D3C7;   /* border neutre */
  --border-2:   #C9C3B8;   /* border emphase */
  --hair:       rgba(35, 32, 27, 0.14);  /* filet horizontal */

  /* ---------- TYPOGRAPHIE ---------- */
  --f-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --f-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Tailles (rythme du mockup) */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;   /* body default */
  --fs-16: 16px;   /* body confortable */
  --fs-17: 17px;   /* body large */
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-44: 44px;
  --fs-48: 48px;

  /* Line-heights */
  --lh-tight:  1.05;   /* h1 display */
  --lh-title:  1.15;   /* h2/h3 */
  --lh-snug:   1.35;
  --lh-body:   1.55;
  --lh-loose:  1.65;

  /* Letter-spacing */
  --ls-tight:  -0.015em;   /* display */
  --ls-title:  -0.01em;    /* h2/h3 */
  --ls-body:   0;
  --ls-eyebrow: 0.06em;
  --ls-eyebrow-loose: 0.09em;

  /* ---------- SPACING ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-28: 112px;
  --sp-32: 128px;

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --container-narrow: 780px;   /* pour lecture d'article */
  --pad-x: clamp(20px, 4vw, 40px);
  --nav-h: 64px;
  --nav-h-desktop: 72px;

  /* ---------- RADIUS ---------- */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 8px;    /* boutons, inputs */
  --r-4: 10px;
  --r-5: 13px;   /* cards principales */
  --r-6: 16px;
  --r-pill: 999px;

  /* ---------- OMBRES (douces, magazine) ---------- */
  --shadow-1: 0 1px 2px rgba(35, 32, 27, 0.05);
  --shadow-2: 0 2px 8px rgba(35, 32, 27, 0.06);
  --shadow-3: 0 6px 20px rgba(35, 32, 27, 0.08);
  --shadow-4: 0 12px 40px rgba(35, 32, 27, 0.10);

  /* ---------- ANIMATION ---------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1:     0.14s;
  --dur-2:     0.24s;
  --dur-3:     0.4s;
}

/* ---------- RESET LIGHT ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 500; margin: 0; }
p, ul, ol, dl, figure { margin: 0; }
a {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--brass); }
button { font: inherit; cursor: pointer; }

/* ---------- CONTAINER ---------- */
.msw-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.msw-container--narrow {
  max-width: var(--container-narrow);
}

/* ---------- SKIP LINK A11y ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- FOCUS ACCESSIBLE ---------- */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: var(--r-2);
}

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