/* tokens.css : copie exacte du bloc CSS de design.md §11. Ne pas modifier ici : modifier design.md puis recopier. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&family=Source+Serif+4:opsz,wght@8..60,400&display=swap');

:root {
  /* Marque */
  --color-ambre: #C8921A;          /* primaire : accents graphiques, boutons */
  --color-ambre-hover: var(--color-ocre);
  --color-miel: #E6B648;           /* accent sur fond Encre uniquement */
  --color-ocre: #BB7414;           /* point focal, état en cours */
  --color-encre: #121212;
  --color-ivoire: #FAF6EC;

  /* Neutres fonctionnels */
  --color-bg: var(--color-ivoire);  /* fond principal (v1.7) */
  --color-surface: #FFFFFF;          /* cartes et visuels posés sur l'Ivoire */
  --color-bg-alt: #F3EDDF;
  --color-line: #E7E0CF;
  --color-line-strong: #D9D0BB;
  --color-text: var(--color-encre);
  --color-text-muted: #6B665B;
  --color-text-subtle: #8C8576;
  --color-dark-surface: #1E1E1C;
  --color-dark-line: #2A2926;
  --color-negative: #A23B2A;

  /* Statuts */
  --status-done: var(--color-encre);
  --status-current: var(--color-ocre);
  --status-upcoming: var(--color-line-strong);

  /* Typographie */
  --font-title: 'Manrope', system-ui, sans-serif;
  --font-text: 'Source Sans 3', system-ui, sans-serif;
  --font-quote: 'Source Serif 4', Georgia, serif;   /* citations de dirigeants uniquement (v1.7) */

  /* Paliers (§3.1) : valeur mobile à 390 px, valeur desktop atteinte à 1280 px.
     rem + vw pour que le texte suive le zoom du navigateur (WCAG 1.4.4). */
  --fs-display: clamp(2.75rem, 1.545rem + 4.944vw, 5.5rem);    /* 44 → 88 */
  --fs-h1:      clamp(2.375rem, 1.663rem + 2.921vw, 4rem);     /* 38 → 64 */
  --fs-h2:      clamp(1.875rem, 1.492rem + 1.573vw, 2.75rem);  /* 30 → 44 */
  --fs-h3:      clamp(1.375rem, 1.211rem + 0.674vw, 1.75rem);  /* 22 → 28 */
  --fs-lead:    clamp(1.1875rem, 1.105rem + 0.337vw, 1.375rem);/* 19 → 22 */
  --fs-body:    clamp(1.0625rem, 1.035rem + 0.112vw, 1.125rem);/* 17 → 18 */
  --fs-ui:      1rem;       /* 16 : boutons, navigation, cellules, corps de carte */
  --fs-small:   0.875rem;   /* 14 : légendes, eyebrows, en-têtes de tableau, badges, mentions */

  /* Alias : partagent un palier, pas de taille propre */
  --fs-kpi: var(--fs-h1);
  --fs-h4: var(--fs-lead);
  --fs-eyebrow: var(--fs-small);

  /* Interlignage par niveau */
  --lh-display: 1.0;
  --lh-h1: 1.05;
  --lh-kpi: 1.0;
  --lh-h2: 1.1;
  --lh-h3: 1.2;
  --lh-h4: 1.3;
  --lh-lead: 1.5;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-ui: 1;

  /* Interlettrage par niveau */
  --ls-display: -0.035em;
  --ls-h1: -0.03em;
  --ls-kpi: -0.04em;
  --ls-h2: -0.025em;
  --ls-h3: -0.015em;
  --ls-h4: -0.01em;
  --ls-button: -0.005em;
  --ls-eyebrow: 0;          /* casse de phrase (v1.7) */

  /* Espacement (base 8) */
  --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; --space-11: 160px;
  --section-gap: clamp(4rem, 1.371rem + 10.787vw, 10rem);      /* 64 → 160 (v1.7) */

  /* Rythme interne (§4.2) */
  --gap-eyebrow-title: var(--space-4);   /* 16 */
  --gap-title-lead: var(--space-5);      /* 24 */
  --gap-lead-action: var(--space-6);     /* 32 */
  --gap-head-content: var(--space-7);    /* 48 mobile, 64 desktop (voir media query) */
  --gap-cards: var(--grid-gutter);
  --gap-index-row: var(--space-5);       /* 24 mobile, 32 desktop : padding vertical d'une ligne D */
  --gap-field: var(--space-6);           /* 32 entre deux champs de formulaire */
  --hero-top: var(--space-8);            /* 64 mobile, 128 desktop sous le header */

  /* Grille : valeurs fixes par breakpoint (§4.1), mobile d'abord */
  --container-max: 1280px;
  --grid-columns: 4;
  --grid-gutter: 16px;
  --page-margin: 20px;
  --measure: 65ch;

  /* Formes */
  --radius-sm: 4px;
  --radius-md: 0px;     /* cartes, visuels, badges : angles droits */
  --radius-photo: 12px; /* photographies uniquement (v1.7) */
  --stroke-hairline: 1px;
  --stroke: 1.5px;
  --stroke-accent: 2px;
  --underline-accent: 3px;
  --shadow-card: 0 1px 2px rgba(18, 18, 18, 0.04);

  /* Mouvement */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 450ms;
  --dur-draw: 1000ms;
  --stagger: 70ms;

  /* Header */
  --header-height: 72px;

  /* Soulignement d'accent (§2.3) : proportionnel à la taille du texte */
  --underline-offset: 0.18em;
}

@media (min-width: 640px) {
  :root { --grid-columns: 8; --grid-gutter: 24px; --page-margin: 40px; }
}
@media (min-width: 1024px) {
  :root {
    --grid-columns: 12; --page-margin: 64px;
    --gap-head-content: var(--space-8);   /* 64 */
    --gap-index-row: var(--space-6);      /* 32 */
    --hero-top: var(--space-10);          /* 128 */
  }
}
@media (min-width: 1440px) {
  :root { --grid-gutter: 32px; }
}

/* Conteneur : contenu max 1280 px, marges auto au-delà */
.container {
  max-width: calc(var(--container-max) + 2 * var(--page-margin));
  padding-inline: var(--page-margin);
  margin-inline: auto;
}

/* Un titre appartient au texte qui le suit : 2× plus d'espace au-dessus qu'en dessous */
h2, h3, h4 { margin-block: calc(2 * var(--gap-title-lead)) 0; }
h2 + *, h3 + *, h4 + * { margin-top: var(--gap-title-lead); }
:is(h2, h3, h4):first-child { margin-top: 0; }

/* Section sombre */
.section--dark {
  --color-bg: var(--color-encre);
  --color-text: var(--color-ivoire);
  --color-line: var(--color-dark-line);
  --color-surface: var(--color-dark-surface);
  --color-accent-text: var(--color-miel);   /* Ambre/Miel autorisés en texte ici */
}

/* Mise en valeur d'un mot sur fond clair */
.mark {
  text-decoration: underline;
  text-decoration-color: var(--color-ambre);
  text-decoration-thickness: var(--underline-accent);
  text-underline-offset: var(--underline-offset);
}
.section--dark .mark {
  text-decoration: none;
  color: var(--color-ambre);
}

/* Lien dans le texte courant : distinct de .mark (§2.3) */
:is(p, li) a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: var(--stroke-hairline);
  text-underline-offset: var(--underline-offset);
}
:is(p, li) a:not([class]):hover {
  text-decoration-color: var(--color-ambre);
  text-decoration-thickness: var(--stroke-accent);
}

/* Contraste renforcé demandé par le système (§13) */
@media (prefers-contrast: more) {
  :root {
    --color-text-muted: var(--color-encre);
    --color-text-subtle: #6B665B;
    --color-line: var(--color-line-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}