/* olympic-arts.com — feuille unique (S-PERF-04)
   Design system : _docs/DESIGN-SYSTEM-olympic-arts.com.md — guide : _docs/styleguide.html
   Mobile d'abord : règles de base à 360 px, élargissements en min-width uniquement (S-MOB-01). */

@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- RESET */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  table { border-collapse: collapse; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}

/* ---------------------------------------------------------------- TOKENS */
@layer tokens {
  @font-face {
    font-family: "Source Serif 4";
    src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2");
    font-weight: 200 900; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Source Serif 4";
    src: url("/assets/fonts/source-serif-4-latin-ext.woff2") format("woff2");
    font-weight: 200 900; font-style: normal; font-display: swap;
    unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Source Serif 4";
    src: url("/assets/fonts/source-serif-4-latin-italic.woff2") format("woff2");
    font-weight: 200 900; font-style: italic; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
  }

  :root {
    /* Primitives — jamais utilisées hors de ce bloc (S-DS-03) */
    --p-ivoire-50: #FFFDF8;
    --p-ivoire-100: #F6F1E7;
    --p-ivoire-300: #D9D0BE;
    --p-encre-600: #565B6B;
    --p-encre-900: #1E2030;
    --p-noir: #000000;
    /* Couleurs officielles du symbole */
    --p-etoile-gris: #CDCDCD;
    --p-etoile-bleu: #007FC4;
    --p-etoile-rouge: #F0484B;
    --p-etoile-jaune: #FFC20D;
    --p-etoile-vert: #4FB848;
    --p-etoile-violet: #8E53A1;
    /* Variantes « texte » : même teinte, contraste ≥ 4,5:1 sur ivoire-100 */
    --p-bleu-texte: #0072B0;
    --p-rouge-texte: #C43B3D;
    --p-jaune-texte: #896807;
    --p-vert-texte: #347B30;
    --p-violet-texte: #8E53A1;

    /* Sémantiques — seules autorisées hors de ce bloc */
    --color-bg: var(--p-ivoire-100);
    --color-surface: var(--p-ivoire-50);
    --color-text: var(--p-encre-900);
    --color-text-muted: var(--p-encre-600);
    --color-border: var(--p-ivoire-300);
    --color-action: var(--p-encre-900);
    --color-on-action: var(--p-ivoire-50);
    --color-action-hover: var(--p-encre-600);
    --color-focus: var(--p-bleu-texte);
    --color-sommet: var(--p-etoile-gris);

    /* Dates : couleur officielle (étoiles, bandeaux) + variante texte */
    --color-566: var(--p-etoile-bleu);    --color-566-texte: var(--p-bleu-texte);
    --color-1912: var(--p-etoile-rouge);  --color-1912-texte: var(--p-rouge-texte);
    --color-1995: var(--p-etoile-jaune);  --color-1995-texte: var(--p-jaune-texte);
    --color-2025: var(--p-etoile-vert);   --color-2025-texte: var(--p-vert-texte);
    --color-2027: var(--p-etoile-violet); --color-2027-texte: var(--p-violet-texte);

    /* Couleur de la date courante : réaffectée par .date-xxx */
    --date: var(--color-sommet);
    --date-texte: var(--color-text-muted);

    /* Typographie (S-DS-08 : rem + vw, jamais vw seul) */
    --font-text: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --step--1: clamp(0.9375rem, 0.91rem + 0.15vw, 1rem); /* 15 → 16 px : jamais de texte sous 15 px (DS v1.16) */
    --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
    --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.28rem + 0.85vw, 1.9rem);
    --step-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.6rem);
    --step-4: clamp(2.1rem, 1.6rem + 2.5vw, 3.6rem);
    --leading-title: 1.15;
    --leading-text: 1.6;
    --measure: 44rem; /* colonne de lecture unique (texte ET images d'archives) : un seul bord droit ; ≈ 65-70 caractères par ligne */

    /* Espacements — base 4 px (S-DS-07) */
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
    --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;

    /* Formes et mouvement */
    --radius-s: 2px;
    --radius-m: 0.5rem;
    --border: 1px solid var(--color-border);
    --band: 5px;
    --focus-ring: 3px solid var(--color-focus);
    --duration: 150ms;
    --container: 70rem;
  }
  /* Thème sombre de la visionneuse : réaffectation des tokens sémantiques uniquement (S-DS-03) */
  .visionneuse-page { --color-bg: var(--p-noir); --color-text: var(--p-ivoire-100); --color-text-muted: var(--p-ivoire-300); --color-action: var(--p-ivoire-50); --color-action-hover: var(--p-ivoire-300); --color-focus: var(--p-etoile-jaune); }

  @media (prefers-reduced-motion: reduce) {
    :root { --duration: 0ms; }
  }
}

/* ---------------------------------------------------------------- BASE */
@layer base {
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: var(--step-0);
    line-height: var(--leading-text);
  }
  :lang(zh) { font-family: var(--font-zh); }
  /* Chinois : pas d’italique (non idiomatique pour les idéogrammes) ; les citations restent entre guillemets */
  :lang(zh) .citation, :lang(zh) q, :lang(zh) cite, :lang(zh) .charte__signature { font-style: normal; }
  h1, h2, h3, h4 { font-weight: 400; line-height: var(--leading-title); text-wrap: balance; }
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); margin-block: var(--space-12) var(--space-4); }
  h3 { font-size: var(--step-1); margin-block: var(--space-8) var(--space-2); }
  h4 { font-size: var(--step-0); font-weight: 600; margin-block: var(--space-6) var(--space-2); }
  p, ul, ol, dl, table, figure, blockquote { margin-block: 0 var(--space-4); }
  p, li, dd, blockquote { max-width: var(--measure); }
  a { color: var(--color-action); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  :focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
  cite { font-style: italic; }
  q { font-style: italic; quotes: none; }
  abbr[title] { text-decoration: underline dotted; }
  small, figcaption, caption { font-family: var(--font-ui); font-size: var(--step--1); }
  @media (hover: hover) {
    a:hover { text-decoration-thickness: 2px; }
  }
}

/* ---------------------------------------------------------------- LAYOUT */
@layer layout {
  .conteneur { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
  main { padding-block: var(--space-6) var(--space-16); }
  .grille { display: grid; gap: var(--space-6); margin-block: 0 var(--space-4); }
  @media (min-width: 48em) {
    .conteneur { padding-inline: var(--space-8); }
    .grille--2 { grid-template-columns: 1fr 1fr; }
    .grille--3 { grid-template-columns: repeat(3, 1fr); }
  }
}

/* ---------------------------------------------------------------- COMPONENTS */
@layer components {

  /* Lien d'évitement */
  .evitement { position: absolute; left: var(--space-4); top: -10rem; padding: var(--space-2) var(--space-4);
    background: var(--color-surface); font-family: var(--font-ui); z-index: 10; }
  .evitement:focus { top: var(--space-4); }

  /* En-tête */
  .entete { border-bottom: var(--border); font-family: var(--font-ui); }
  .entete__haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); }
  .entete__marque { display: flex; flex: 1 1 15rem; align-items: center; gap: var(--space-3); text-decoration: none; }
  .entete__marque img, .entete__marque svg { width: 2.75rem; height: auto; flex: none; }
  .entete__titre { font-family: var(--font-text); font-size: var(--step-0); line-height: 1.2; }
  .entete__titre small { display: block; color: var(--color-text-muted); }
  .langues { display: flex; gap: var(--space-3); list-style: none; padding: 0; margin: 0; font-size: var(--step--1); }
  .langues a { display: inline-block; min-height: 24px; padding-block: var(--space-1); }
  .langues a[aria-current="page"] { font-weight: 700; text-decoration: none; }
  .langues__a-venir { color: var(--color-text-muted); }

  /* Navigation chronologique — élément signature (S-UX-07) ; sans JavaScript (S-MOB-05) */
  .chrono { display: flex; gap: var(--space-2); overflow-x: auto; list-style: none; margin: 0; padding: 0 0 var(--space-3);
    scroll-snap-type: x proximity; }
  .chrono li { display: flex; }
  .chrono__lien { display: block; flex: 1; min-width: 9.5rem; min-height: 44px; padding: var(--space-2) var(--space-3);
    background: var(--color-surface); border: var(--border); border-top: var(--band) solid var(--date);
    border-radius: var(--radius-m); text-decoration: none; font-size: var(--step--1); line-height: 1.3; scroll-snap-align: start; }
  .chrono__date { display: block; white-space: nowrap; font-size: var(--step-0); font-weight: 700; color: var(--date-texte); }
  .chrono__lien[aria-current="page"] { background: var(--color-bg); border-color: var(--date); box-shadow: 0 0 0 1px var(--date); }
  @media (hover: hover) {
    .chrono__lien { transition: transform var(--duration); }
    .chrono__lien:hover { transform: translateY(-2px); }
  }
  @media (min-width: 64em) {
    .chrono { overflow: visible; }
    .chrono li { flex: 1; }
  }

  /* Fil d'Ariane */
  .ariane ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-4);
    font-family: var(--font-ui); font-size: var(--step--1); color: var(--color-text-muted); }
  .ariane li + li::before { content: "›"; margin-right: var(--space-2); }

  /* Titre de page date : bandeau à la couleur de l'étoile */
  .titre-date { border-top: var(--band) solid var(--date); padding-top: var(--space-4); }
  .titre-date__etoile { width: 2rem; height: 2rem; margin-bottom: var(--space-2); fill: var(--date); }
  .accueil__titre { font-size: var(--step-4); margin-block: var(--space-2); }

  /* Réponse d'abord (S-EDIT-02) */
  .reponse { font-size: var(--step-1); line-height: 1.5; max-width: var(--measure); margin-block: var(--space-4) var(--space-6); }
  .hommage, .accroche { font-family: var(--font-ui); color: var(--color-text-muted); }
  .accroche { font-family: var(--font-text); font-size: var(--step-1); }

  /* Bouton — action principale (S-UX-04) */
  .bouton { display: inline-block; min-height: 44px; padding: var(--space-3) var(--space-6);
    background: var(--color-action); color: var(--color-on-action); border-radius: var(--radius-s);
    font-family: var(--font-ui); font-weight: 600; text-decoration: none; }
  .bouton:focus-visible { outline-offset: 3px; }
  @media (hover: hover) { .bouton:hover { background: var(--color-action-hover); } }
  .bouton:active { transform: translateY(1px); }
  button.bouton { border: 0; cursor: pointer; font-size: inherit; line-height: inherit; }
  .refus-stats { margin-block: var(--space-3) var(--space-4); }
  .refus-stats__etat { font-weight: 600; }

  /* Pièce d'archive : passe-partout + cartel (traitement unique des images) */
  .archive { background: var(--color-surface); border: var(--border); padding: var(--space-3); max-width: var(--measure); }
  .archive img { width: auto; max-width: 100%; margin-inline: auto; filter: sepia(0.2) saturate(0.9); }
  .archive figcaption { border-left: 3px solid var(--date); padding-left: var(--space-3); margin-top: var(--space-3); color: var(--color-text-muted); }
  .archive--document img { filter: none; }

  /* Citation */
  .citation { border-left: var(--band) solid var(--date); padding: var(--space-2) 0 var(--space-2) var(--space-4); font-size: var(--step-1); font-style: italic; }
  .citation + p { font-family: var(--font-ui); font-size: var(--step--1); color: var(--color-text-muted); }

  /* Tableau : défilement horizontal interne, jamais celui de la page (S-A11Y-11) */
  .tableau { overflow-x: auto; margin-block: 0 var(--space-6); }
  .tableau table { width: 100%; min-width: 32rem; font-size: var(--step--1); font-family: var(--font-ui); background: var(--color-surface); }
  .tableau caption { text-align: left; padding-bottom: var(--space-2); color: var(--color-text-muted); }
  .tableau th, .tableau td { border: var(--border); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
  .tableau thead th { background: var(--color-bg); }

  /* Fiche (liste de définitions) */
  .fiche { display: grid; gap: var(--space-1) var(--space-4); }
  .fiche dt { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 700; color: var(--date-texte); }
  .fiche dd { margin: 0 0 var(--space-3); }
  @media (min-width: 48em) { .fiche { grid-template-columns: 12rem 1fr; } .fiche dd { margin: 0; } }

  /* Frise des cinq dates (accueil) */
  .frise { display: grid; gap: var(--space-4); list-style: none; padding: 0; }
  .frise__item { position: relative; padding: var(--space-4) var(--space-4) var(--space-4) 3.5rem;
    background: var(--color-surface); border: var(--border); border-radius: var(--radius-m); }
  .frise__etoile { position: absolute; left: var(--space-4); top: var(--space-4); width: 1.75rem; height: 1.75rem; fill: var(--date); }
  .frise__item h3 { margin: 0; font-size: var(--step-0); }
  .frise__item h3 a { text-decoration: none; }
  .frise__item h3 a:hover, .frise__item h3 a:focus-visible { text-decoration: underline; }
  .frise__date { display: block; font-family: var(--font-ui); font-size: var(--step-0); font-weight: 700; color: var(--date-texte); }
  .frise__item p { margin: var(--space-2) 0 0; font-size: var(--step--1); font-family: var(--font-ui); }
  @media (min-width: 48em) {
    .frise { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
    .frise__item { padding: 3.5rem var(--space-4) var(--space-4); }
  }

  /* Carte (fondateur, Genève, symbole) — un seul lien par carte */
  .carte { background: var(--color-surface); border: var(--border); border-radius: var(--radius-m); padding: var(--space-4); }
  .carte h2, .carte h3 { margin-top: 0; }
  .carte .archive { padding: var(--space-2); }
  .grille > .archive { margin: 0; }
  .galerie { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .galerie .archive { padding: var(--space-2); }
  .galerie img { aspect-ratio: 3 / 2; object-fit: cover; }
  /* Liseuse : pages d’un document côte à côte, défilement horizontal page à page (sans JavaScript) */
  .liseuse { max-width: 32rem; margin-inline: auto; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .liseuse__pages { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
  .liseuse__pages > li { flex: 0 0 100%; max-width: none; scroll-snap-align: start; }
  .liseuse__pages .archive { margin: 0; }
  /* Visionneuse : image agrandie sur fond noir, nouvel onglet, flèches du clavier (visionneuse.js, facultatif) */
  .visionneuse-page { min-height: 100vh; display: flex; flex-direction: column; }
  .visionneuse__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); font-family: var(--font-ui); }
  .visionneuse__nav { display: flex; align-items: center; gap: var(--space-4); }
  .visionneuse__compteur { color: var(--color-text-muted); }
  .visionneuse__barre a { text-decoration: none; padding: var(--space-1) var(--space-2); }
  .visionneuse__barre a:hover { text-decoration: underline; }
  .visionneuse { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: 0 var(--space-2) var(--space-3); }
  .visionneuse img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; }
  .visionneuse figcaption { max-width: var(--measure); margin-top: var(--space-2); text-align: center; font-family: var(--font-ui); font-size: var(--step--1); color: var(--color-text-muted); }
  .liseuse__nav { display: flex; justify-content: center; gap: var(--space-4); margin-block: var(--space-2) var(--space-4); font-family: var(--font-ui); }
  @media (min-width: 48em) { .galerie { grid-template-columns: repeat(3, 1fr); } }

  /* Agrandir une image : lien vers le grand format, sans JavaScript */
  .archive__zoom { display: block; cursor: zoom-in; }

  /* Dépliant : <details> natif (texte présent dans le HTML, S-MOB-02) */
  .depliant { background: var(--color-surface); border: var(--border); border-left: var(--band) solid var(--date);
    border-radius: var(--radius-m); margin-block: 0 var(--space-6); }
  .depliant > summary { min-height: 44px; padding: var(--space-3) var(--space-4); cursor: pointer;
    font-family: var(--font-ui); font-weight: 600; }
  .depliant[open] > summary { border-bottom: var(--border); }
  .depliant__contenu { padding: var(--space-4); }

  /* Accueil : le symbole introduit la frise (une date = une étoile) */
  .frise__intro { display: flex; align-items: center; gap: var(--space-4); margin-block-end: var(--space-6); }
  .frise__intro p { margin: 0; }
  .frise__symbole { flex: none; width: 5rem; height: auto; }
  /* Carte avec image à côté du texte (≥ 48em) */
  .carte__media { display: grid; gap: var(--space-4); }
  .carte__media .archive { margin: 0; }
  @media (min-width: 48em) { .carte__media { grid-template-columns: 12rem 1fr; align-items: start; } }

  /* Lien externe : flèche décorative, non soulignée */
  .lien-externe { display: inline-block; text-decoration: none; margin-inline-start: 0.1em; }

  /* Sommaire de page (« Sur cette page ») */
  .sommaire { border-left: var(--band) solid var(--date); padding: var(--space-2) var(--space-4); margin-block: var(--space-6);
    font-family: var(--font-ui); font-size: var(--step--1); }
  .sommaire__titre { margin: 0 0 var(--space-2); font-weight: 700; color: var(--color-text-muted); }
  .sommaire ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; }
  .sommaire a { display: inline-block; min-height: 24px; }

  /* Chiffres clés */
  .chiffres { display: grid; gap: var(--space-3); list-style: none; padding: 0; margin-block: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .chiffres li { background: var(--color-surface); border: var(--border); border-top: var(--band) solid var(--date);
    border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); font-family: var(--font-ui); font-size: var(--step--1); }
  .chiffres__nombre { display: block; font-family: var(--font-text); font-size: var(--step-3); line-height: var(--leading-title); color: var(--date-texte); }

  /* Appel à l'action encadré (page 2027) */
  .appel { background: var(--color-surface); border: var(--border); border-top: var(--band) solid var(--date);
    border-radius: var(--radius-m); padding: var(--space-6); margin-block: var(--space-8); }
  .appel h2 { margin-top: 0; }

  /* Charte : un paragraphe = une carte, étoile aux couleurs des dates */
  .charte { display: grid; gap: var(--space-4); list-style: none; padding: 0; }
  .charte li { position: relative; background: var(--color-surface); border: var(--border); border-radius: var(--radius-m);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12); }
  .charte li p { margin: 0; }
  .charte__etoile { position: absolute; left: var(--space-4); top: var(--space-4); width: 1.25rem; height: 1.25rem; fill: var(--date); }
  .charte__signature { font-style: italic; }
  @media (min-width: 48em) { .charte { grid-template-columns: 1fr 1fr; } }

  /* Page 404 : salle de musée fermée */
  .salle-fermee { max-width: 36rem; margin-inline: auto; text-align: center; padding-block: var(--space-8); }
  .salle-fermee__barriere { width: min(22rem, 100%); height: auto; margin-inline: auto; display: block; }
  .salle-fermee__cartel { font-family: var(--font-ui); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-text-muted); margin-top: var(--space-6); }
  .salle-fermee h1 { margin-top: var(--space-2); }
  .barriere__sol { stroke: var(--color-border); stroke-width: 2; }
  .barriere__poteau, .barriere__socle { fill: var(--color-text); }
  .barriere__pommeau { fill: var(--color-1995); }
  .barriere__cordon { fill: none; stroke: var(--color-1912); stroke-width: 7; stroke-linecap: round; }
  .barriere__attache { stroke: var(--color-text); stroke-width: 2; }
  .barriere__panneau { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 2; }
  .barriere__texte { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.1em; fill: var(--color-text); }
  .barriere__texte--petit { font-weight: 600; fill: var(--color-text-muted); }

  /* Logos des partenaires */
  .logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-3); list-style: none; padding: 0; }
  .logos li { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: var(--space-3); background: var(--color-surface); border: var(--border); border-radius: var(--radius-m);
    text-align: center; font-family: var(--font-ui); font-size: var(--step--1); }
  .logos img { height: 6.5rem; width: auto; max-width: 100%; object-fit: contain; }
  .logos span { line-height: 1.3; color: var(--color-text-muted); }
  .logos .logos__fond-sombre { background: var(--color-text); padding: var(--space-1); border-radius: var(--radius-s); }

  /* Contenu à fournir : visible en recette, interdit en production (S-EDIT-11) */
  .a-fournir { border: 2px dashed var(--color-border); padding: var(--space-3) var(--space-4); color: var(--color-text-muted);
    font-family: var(--font-ui); font-size: var(--step--1); background: var(--color-surface); }
  figure.a-fournir p { margin: 0 0 var(--space-2); }

  /* Symbole des six étoiles */
  .symbole { width: 10rem; height: auto; }
  .archive .symbole { width: min(20rem, 100%); margin-inline: auto; }

  /* Vidéo : <video> natif (S-LLM-10) */
  .video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--color-text); }

  /* Dates voisines */
  .voisins ul { display: grid; gap: var(--space-3); list-style: none; padding: 0; margin-top: var(--space-12); font-family: var(--font-ui); }
  .voisins a { display: block; padding: var(--space-3) var(--space-4); border: var(--border); border-radius: var(--radius-m); background: var(--color-surface); }
  @media (min-width: 48em) { .voisins ul { grid-template-columns: 1fr 1fr; } }

  /* Mise à jour (S-OPQ-07) */
  .maj { font-family: var(--font-ui); font-size: var(--step--1); color: var(--color-text-muted); }

  /* Pied de page — contact au même endroit partout (S-A11Y-14) */
  .pied { border-top: var(--border); padding-block: var(--space-8); font-family: var(--font-ui); font-size: var(--step--1); color: var(--color-text-muted); }
  .pied ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; }
  .pied a { display: inline-block; min-height: 24px; color: var(--color-text); }
}

/* ---------------------------------------------------------------- UTILITIES */
/* ---------------------------------------------------------------- GRILLE À DEUX LARGEURS (DS v1.13)
   Colonne de lecture (--measure) pour tout bloc de contenu : texte, images, encadrés, cartes isolées.
   Pleine largeur du conteneur réservée aux grilles : frise, galeries, Charte, chiffres, logos, tableaux.
   Un seul bord gauche pour toute la page. Placé en fin de couche « components » pour primer sur les règles des composants. */
@layer components {
  .frise__intro, .appel, .depliant, .sommaire, section.carte, .fiche, .refus-stats, main h2, main h3 { max-width: var(--measure); }
  .frise__item h3 { max-width: none; }
  .liseuse { margin-inline: 0; }
  .liseuse__nav { max-width: 32rem; }

  /* Rythme vertical (DS v1.14) : 1 rem entre deux textes ; 2 rem autour de tout bloc (image, vidéo, grille, encadré, citation) ;
     un titre colle à son contenu (1 rem), même quand ce contenu est un bloc. */
  :is(.archive, .grille, .tableau, .depliant, .sommaire, .chiffres, .appel, .frise__intro, .liseuse, .refus-stats,
      .fiche, .charte, .logos, .frise, .citation, :where(section).carte) { margin-block: var(--space-8); }
  :is(h2, h3, h4) + :is(.archive, .grille, .tableau, .depliant, .sommaire, .chiffres, .appel, .frise__intro, .liseuse,
      .refus-stats, .fiche, .charte, .logos, .frise, .citation, :where(section).carte) { margin-top: 0; }
  .frise__intro { margin-block-end: var(--space-6); }
  .liseuse { margin-block-end: 0; }
  .liseuse__nav { margin-block: var(--space-2) var(--space-8); }
  .reponse { margin-block-end: var(--space-8); }

  /* Finitions visuelles (DS v1.15) */
  /* Hommage à Coubertin : frontispice en italique sous un filet fin */
  .hommage { font-family: var(--font-text); font-style: italic; max-width: var(--measure);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
  :lang(zh) .hommage { font-style: normal; }

  /* Frise : toute la carte est cliquable (un seul lien, étendu par ::after), bordure à la couleur de la date au survol */
  .frise__item h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-m); }
  .frise__item h3 a:focus-visible { outline: none; }
  .frise__item h3 a:focus-visible::after { outline: var(--focus-ring); outline-offset: 2px; }
  .frise__item:hover { border-color: var(--date); box-shadow: inset 0 -3px 0 var(--date); }
  @media (prefers-reduced-motion: no-preference) { .frise__item { transition: border-color .15s, box-shadow .15s; } }

  /* Galerie : une seule légende pour l'ensemble (les légendes par photo restent pour la visionneuse) */
  .galerie .archive figcaption { display: none; }
  .galerie__legende { max-width: var(--measure); margin-top: calc(var(--space-6) * -1); padding-left: var(--space-3);
    border-left: 3px solid var(--date); font-family: var(--font-ui); font-size: var(--step--1); color: var(--color-text-muted); }

  /* Charte : liste numérotée sur une colonne, dans la colonne de lecture */
  .charte { counter-reset: article; max-width: var(--measure); }
  @media (min-width: 48em) { .charte { grid-template-columns: 1fr; } }
  .charte li { counter-increment: article; }
  .charte li::before { content: counter(article); position: absolute; left: var(--space-4); top: calc(var(--space-4) + 1.5rem);
    width: 1.25rem; text-align: center; font-family: var(--font-ui); font-weight: 700; font-size: var(--step--1); color: var(--date-texte); }

  /* Dates voisines : cartes aux couleurs de la date visée */
  .voisins a { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-3); align-items: baseline;
    padding: var(--space-4); border-top: var(--band) solid var(--date); text-decoration: none; color: var(--color-text); }
  .voisins__etoile { grid-row: span 3; align-self: start; width: 1.75rem; height: 1.75rem; fill: var(--date); }
  .voisins__sens { font-size: var(--step--1); color: var(--color-text-muted); }
  .voisins__date { font-size: var(--step-1); font-weight: 700; color: var(--date-texte); }
  .voisins__titre { font-family: var(--font-text); text-decoration: underline; text-underline-offset: 0.15em; }
  .voisins a:hover { border-color: var(--date); }
  .voisins a:hover .voisins__titre { text-decoration-thickness: 2px; }
  @media (min-width: 48em) { .voisins__suivant { grid-column: 2; } }

  /* Pied de page : bande aux cinq couleurs des dates, symbole et signature */
  .pied { position: relative; border-top: 0; }
  .pied::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--band);
    background: linear-gradient(90deg, var(--color-566) 0 20%, var(--color-1912) 20% 40%, var(--color-1995) 40% 60%,
      var(--color-2025) 60% 80%, var(--color-2027) 80%); }
  .pied__signature { display: flex; align-items: center; gap: var(--space-3); }
  .pied__symbole { width: 2.5rem; height: auto; flex: none; }

  /* Sobriété (DS v1.16, revue Impeccable) : la couleur de date est réservée au menu chronologique, au titre de page,
     aux étoiles et aux dates écrites. Ailleurs, l'espace et la typographie font le travail. */
  .archive figcaption, .galerie__legende { border-left: 0; padding-left: 0; }
  .citation { border-left: 0; padding-left: var(--space-6); }
  .depliant { border-left: var(--border); }
  .sommaire { border-left: 0; padding-inline: 0; }
  .appel { border-top: var(--border); }
  .voisins a { border-top: var(--border); }
  /* Carte « Le fondateur » : plus de cadre autour du portrait déjà encadré */
  :where(section).carte { background: none; border: 0; border-radius: 0; padding: 0; }
  /* Charte : liste éditoriale, articles séparés par un filet */
  .charte { gap: 0; }
  .charte li { background: none; border: 0; border-radius: 0; border-top: var(--border); }
  .charte li:last-child { border-bottom: var(--border); }
  /* Titre des pages de date : « ★ 1995 » sur une ligne, titre dessous */
  .titre-date__annee { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui);
    font-size: var(--step-1); font-weight: 700; color: var(--date-texte); }
  .titre-date__annee .titre-date__etoile { width: 1.5rem; height: 1.5rem; margin: 0; }
  .titre-date__titre { display: block; margin-top: var(--space-1); }

  /* Couleur ciblée (DS v1.18) : la couleur de date revient par petits repères, sans bande latérale ni fond teinté. */
  main h2::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: var(--space-3);
    background: var(--date); border-radius: 2px; }
  .carte h2::before, .appel h2::before, .frise__item h2::before { content: none; }
  .appel { border-color: var(--date); }
  .sommaire a, .liseuse__nav a { color: var(--date-texte); }
  .depliant > summary { color: var(--date-texte); }

  /* Frise : l'étoile à côté de la date, comme dans le titre des pages de date */
  .frise__item { padding: var(--space-4); }
  .frise__etoile { width: 1.25rem; height: 1.25rem; top: calc(var(--space-4) + 0.1rem); }
  .frise__date { padding-left: calc(1.25rem + var(--space-2)); }

}

@layer utilities {
  .insecable { white-space: nowrap; }
  /* Couleur de date : une étoile du symbole par date (CDC §7, décision du 26/09/2026) */
  .date-566  { --date: var(--color-566); --date-texte: var(--color-566-texte); }
  .date-1912 { --date: var(--color-1912); --date-texte: var(--color-1912-texte); }
  .date-1995 { --date: var(--color-1995); --date-texte: var(--color-1995-texte); }
  .date-2025 { --date: var(--color-2025); --date-texte: var(--color-2025-texte); }
  .date-2027 { --date: var(--color-2027); --date-texte: var(--color-2027-texte); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Impression (S-OPQ-11) */
  @media print {
    .entete nav, .voisins, .evitement, .pied nav { display: none; }
    body { background: var(--color-surface); color: var(--color-text); }
    a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  }
}