/* =============================================================================
   Qorlet — feuille de style unique
   Aucune dépendance, aucune police distante, aucun JavaScript.
   Palette reprise de l'identité visuelle (concept 09 · Cap).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Couleurs de marque — mode clair */
  --ink:          #0f172a;
  --ink-soft:     #334155;
  --ink-faint:    #64748b;
  --paper:        #ffffff;
  --paper-tint:   #f8fafc;
  --paper-sunk:   #f1f5f9;
  --line:         #e2e8f0;
  --line-strong:  #cbd5e1;
  --accent:       #b45309;   /* ambre assombri : 5,02:1 sur blanc */
  --accent-plain: #f59e0b;   /* ambre de marque, réservé aux aplats */
  --accent-wash:  #fffbeb;
  --focus:        #0f172a;

  /* Typographie */
  --font-display: "Sitka Banner", "Iowan Old Style", "Palatino Linotype",
                  Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-text:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, "Noto Sans", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Consolas,
                  "Liberation Mono", Menlo, monospace;

  /* Échelle fluide */
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.8rem + 2.5vw, 4rem);

  /* Rythme */
  --space-2xs: 0.35rem;
  --space-xs:  0.6rem;
  --space-s:   1rem;
  --space-m:   1.6rem;
  --space-l:   2.6rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  --measure: 68ch;
  --container: 74rem;
  --radius: 0.7rem;
  --radius-lg: 1.2rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:          #f1f5f9;
    --ink-soft:     #cbd5e1;
    --ink-faint:    #94a3b8;
    --paper:        #0b1220;
    --paper-tint:   #0f172a;
    --paper-sunk:   #131f33;
    --line:         #1e293b;
    --line-strong:  #334155;
    --accent:       #fbbf24;   /* 11,22:1 sur #0b1220 */
    --accent-plain: #fbbf24;
    --accent-wash:  #1c1917;
    --focus:        #fbbf24;
  }
}

/* -----------------------------------------------------------------------------
   2. Réinitialisation mesurée
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-l);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }

:where(a) {
  color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
:where(a):hover { text-decoration-thickness: 0.14em; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent-plain); color: #0b1220; }

/* -----------------------------------------------------------------------------
   3. Structure
   -------------------------------------------------------------------------- */

.shell {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.skip {
  position: absolute;
  inset-inline-start: var(--space-s);
  top: var(--space-s);
  z-index: 100;
  padding: 0.7em 1.1em;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform 120ms ease-out;
}
.skip:focus { transform: none; }

main { flex: 1; }

section { padding-block: var(--space-xl); }
section + section { border-top: 1px solid var(--line); }

/* -----------------------------------------------------------------------------
   4. Typographie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); margin-block-end: var(--space-s); }
h3 { font-size: var(--step-1); margin-block-end: var(--space-2xs); }
h4 { font-size: var(--step-0); font-family: var(--font-text); font-weight: 700; }

p, ul, ol, dl, table, figure, blockquote { margin-block-end: var(--space-s); }
p:last-child, ul:last-child, ol:last-child { margin-block-end: 0; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--space-s); }
.prose h2 { margin-block-start: var(--space-l); }
.prose h3 { margin-block-start: var(--space-m); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-block-start: 0.4em; }
.prose li::marker { color: var(--accent); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-block-end: var(--space-xs);
}

.muted { color: var(--ink-faint); }
.small { font-size: var(--step--1); }

/* -----------------------------------------------------------------------------
   5. En-tête et navigation
   -------------------------------------------------------------------------- */

.masthead {
  border-block-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  padding-block: var(--space-s);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-inline-end: auto;
}
/* Marque 09 · Cap. L'anneau, les repères et l'aiguille arrière prennent la
   couleur du texte : la marque suit le thème sans règle de mode sombre.
   Seule l'aiguille avant porte l'ambre de marque. */
.qmark .ring,
.qmark .ticks { stroke: currentColor; }
.qmark .needle { fill: currentColor; }
.qmark .needle--lead { fill: var(--accent-plain); }

.brand .qmark { width: 2rem; height: 2rem; flex: none; }

/* La marque en grand, sur la page de présentation. Elle est en ligne et non en
   `<img>` : une SVG chargée comme image n'hérite pas des jetons de thème. */
.qmark--xl { width: clamp(3.5rem, 9vw, 5.5rem); height: auto; flex: none; }

.brandblock {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
  margin-block-end: var(--space-m);
}
.brandblock h1 { margin: 0; max-width: 20ch; }
.brandblock .eyebrow { margin-block-end: var(--space-2xs); }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  padding-block: 0.25em;
  border-block-end: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-block-end-color: var(--line-strong); }
.nav a[aria-current="page"] {
  color: var(--ink);
  border-block-end-color: var(--accent-plain);
}

/* -----------------------------------------------------------------------------
   6. Héros
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--space-xl), 10vw, var(--space-2xl));
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -12%;
  inline-size: min(38rem, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.6rem solid color-mix(in srgb, var(--accent-plain) 12%, transparent);
  pointer-events: none;
}
@media (prefers-reduced-transparency: reduce) {
  .hero::before { display: none; }
}
.hero > * { position: relative; }
.hero h1 { max-width: 18ch; margin-block-end: var(--space-m); }

/* -----------------------------------------------------------------------------
   7. Grilles et cartes
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.card--link { transition: border-color 140ms ease, transform 140ms ease; }
.card--link:hover,
.card--link:focus-within {
  border-color: var(--accent-plain);
  transform: translateY(-2px);
}
.card h3 a {
  color: inherit;
  text-decoration: none;
}
/* La carte entière devient cliquable sans piéger le clavier */
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card--link { position: relative; }

.card__meta {
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
}

/* -----------------------------------------------------------------------------
   8. Encadrés et listes de faits
   -------------------------------------------------------------------------- */

.callout {
  border-inline-start: 4px solid var(--accent-plain);
  background: var(--accent-wash);
  padding: var(--space-s) var(--space-m);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p { max-width: var(--measure); }

.facts {
  display: grid;
  gap: 0;
  margin: 0;
}
.facts > div {
  display: grid;
  grid-template-columns: minmax(9rem, 16rem) 1fr;
  gap: var(--space-xs) var(--space-m);
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--line);
}
.facts > div:first-child { border-block-start: 1px solid var(--line); }
.facts dt { color: var(--ink-faint); font-size: var(--step--1); font-weight: 600; }
.facts dd { margin: 0; }
@media (max-width: 34rem) {
  .facts > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* -----------------------------------------------------------------------------
   9. Tableaux
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }
table {
  border-collapse: collapse;
  inline-size: 100%;
  font-size: var(--step--1);
}
caption {
  text-align: start;
  color: var(--ink-faint);
  font-size: var(--step--1);
  padding-block-end: var(--space-xs);
}
th, td {
  text-align: start;
  padding: 0.7rem 0.9rem;
  border-block-end: 1px solid var(--line);
  vertical-align: top;
}
thead th {
  border-block-end: 2px solid var(--line-strong);
  font-weight: 700;
}

/* -----------------------------------------------------------------------------
   10. Boutons
   -------------------------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.4em;
  border-radius: var(--radius);
  font-weight: 650;
  font-size: var(--step-0);
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: opacity 140ms ease;
}
.btn:hover { opacity: 0.85; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--paper-sunk); opacity: 1; }

/* -----------------------------------------------------------------------------
   11. Pied de page
   -------------------------------------------------------------------------- */

.footer {
  border-block-start: 1px solid var(--line);
  background: var(--paper-tint);
  padding-block: var(--space-l);
  font-size: var(--step--1);
}
.footer__grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.footer h2 {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-block-end: var(--space-xs);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li + li { margin-block-start: 0.4em; }
.footer a { color: var(--ink-soft); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.footer__legal {
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--line);
  color: var(--ink-faint);
}

/* -----------------------------------------------------------------------------
   12. Divers
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 700;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: var(--paper);
}
.badge--soon { border-color: var(--accent-plain); color: var(--accent); }

code, kbd { font-family: var(--font-mono); font-size: 0.92em; }
code {
  background: var(--paper-sunk);
  padding: 0.15em 0.4em;
  border-radius: 0.3em;
}

hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--space-l); }

/* Contraste renforcé si le système le demande */
@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --ink-faint: var(--ink-soft); }
  .btn, .card { border-width: 2px; }
}

/* -----------------------------------------------------------------------------
   13. Impression
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .footer__grid, .skip, .actions { display: none; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  section { padding-block: 1rem; border: 0; }
}

/* -----------------------------------------------------------------------------
   14. Chiffres repères
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  padding: var(--space-m) 0;
  border-block: 1px solid var(--line);
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}
.stat__label {
  display: block;
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--ink-faint);
  text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
   15. Pastilles d'état
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.15em 0.7em 0.2em;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 650;
  line-height: 1.4;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: var(--paper);
  white-space: nowrap;
}
/* La forme du point distingue les états sans recourir à la seule couleur. */
.pill::before {
  content: "";
  inline-size: 0.5em;
  block-size: 0.5em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pill--actif   { color: var(--accent); border-color: var(--accent-plain); }
.pill--prepa   { color: var(--ink-soft); }
.pill--prepa::before { border-radius: 0; transform: rotate(45deg); }
.pill--ouvert  { color: var(--ink-faint); border-style: dashed; }
.pill--ouvert::before { background: none; border: 1.5px solid currentColor; }

/* -----------------------------------------------------------------------------
   16. Domaines
   -------------------------------------------------------------------------- */

.domains { list-style: none; padding: 0; margin: 0; }
.domains > li {
  padding-block: var(--space-m);
  border-block-end: 1px solid var(--line);
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-2xs) var(--space-m);
  align-items: start;
}
.domains > li:first-child { border-block-start: 1px solid var(--line); }
.domains__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--line-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.domains__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin-block-end: var(--space-2xs);
}
.domains__head h3 { margin: 0; }
.domains p { max-width: var(--measure); }
.domains__tags {
  margin-block-start: var(--space-xs);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
@media (max-width: 34rem) {
  .domains > li { grid-template-columns: 1fr; }
  .domains__num { font-size: var(--step-0); }
}

/* -----------------------------------------------------------------------------
   17. Repères chronologiques
   -------------------------------------------------------------------------- */

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline > li {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) 1fr;
  gap: var(--space-2xs) var(--space-m);
  padding-block: var(--space-s);
  border-block-end: 1px solid var(--line);
}
.timeline > li:first-child { border-block-start: 1px solid var(--line); }
.timeline time {
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 34rem) {
  .timeline > li { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   18. Bandeau sombre
   -------------------------------------------------------------------------- */

.band {
  background: var(--ink);
  color: var(--paper);
}
.band h2, .band h3 { color: inherit; }
.band .lede, .band .muted { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.band .eyebrow { color: color-mix(in srgb, var(--paper) 60%, transparent); }
/* Dans le bandeau, le lien reprend la couleur du texte : l'ambre n'a pas le
   contraste requis quand le bandeau s'inverse en thème sombre. */
.band a { color: var(--paper); text-decoration-thickness: 0.1em; }
.band .btn {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.band .btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 45%, transparent);
}
.band :focus-visible { outline-color: var(--paper); }

/* -----------------------------------------------------------------------------
   12. Sélecteur de langue — sans JavaScript

   `<details>` est un élément natif : il s'ouvre au clic et au clavier. La
   politique `default-src 'none'` reste donc tenue, sélecteur compris.
   -------------------------------------------------------------------------- */

.langs { position: relative; flex: none; }

.langs > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.7em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.langs > summary::-webkit-details-marker { display: none; }
.langs > summary:hover { color: var(--ink); border-color: var(--ink-faint); }
.langs[open] > summary { color: var(--ink); border-color: var(--ink-faint); }

.langs > ul {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.4rem);
  z-index: 60;
  min-width: 11rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgb(15 23 42 / 12%);
}
.langs > ul a {
  display: block;
  padding: 0.4em 0.7em;
  border-radius: calc(var(--radius) - 0.25rem);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step--1);
}
.langs > ul a:hover { background: var(--paper-sunk); color: var(--ink); }
.langs > ul a[aria-current="true"] {
  color: var(--ink);
  font-weight: 700;
  background: var(--paper-sunk);
}

/* Variante de pied de page : toujours dépliable, mais posée dans le flux et
   étalée en ligne. Elle sert de repli si l'en-tête est masqué à l'impression. */
.langs--foot {
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line);
}
.langs--foot > ul {
  position: static;
  min-width: 0;
  margin-block-start: var(--space-xs);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem var(--space-s);
}
.langs--foot > ul a { padding-inline: 0; }
.langs--foot > ul a:hover { background: none; text-decoration: underline; }
.langs--foot > ul a[aria-current="true"] { background: none; }

/* Grille de langues de la page 404. */
.langgrid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
}
.langgrid a { font-size: var(--step-0); }

/* -----------------------------------------------------------------------------
   13. Écritures non latines

   Le caractère d'affichage — Sitka Banner, puis les Garalde de repli — ne porte
   ni idéogrammes ni caractères arabes. Le navigateur substituerait au coup par
   coup, avec des hauteurs d'œil disparates. On bascule donc explicitement les
   titres sur la pile système, qui, elle, couvre ces écritures.
   -------------------------------------------------------------------------- */

:is(:lang(zh), :lang(ja), :lang(ko)) :is(h1, h2, h3, h4) {
  font-family: var(--font-text);
  letter-spacing: 0;
  line-height: 1.3;
}

/* Une mesure en `ch` se calcule sur le zéro : un idéogramme en vaut deux.
   Sans correctif, une ligne de titre chinoise tomberait à neuf caractères. */
:is(:lang(zh), :lang(ja), :lang(ko)) .hero h1 { max-width: 26ch; }
:is(:lang(zh), :lang(ja), :lang(ko)) .lede { max-width: 62ch; }
:is(:lang(zh), :lang(ja), :lang(ko)) .prose { max-width: 80ch; }

:lang(ar) {
  --font-display: "Segoe UI", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic",
                  "Times New Roman", serif;
}
:lang(ar) :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: 1.35; }
/* Les signes diacritiques arabes demandent plus d'interligne que le latin. */
:lang(ar) body, :lang(ar) .prose { line-height: 1.85; }
:lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; }
:lang(ar) .footer h2 { letter-spacing: 0; text-transform: none; }

/* Le compteur des domaines et l'heure des repères restent en chiffres latins :
   ils sont recopiés dans des formulaires, jamais lus à voix haute. */
[dir="rtl"] .domains__num, [dir="rtl"] .timeline time { direction: ltr; }