/* histoire-et-art — feuille unique. Pas de framework, pas de build.

   Parti pris (10/11/2026) : un atlas. Le site montre un graphe
   transdisciplinaire ; ses couches sont des blocs de papier posés sur une
   pierre claire, et les ponts entre couches sont des traits qui passent de la
   teinte de l'une à celle de l'autre. Un seul point rouge — le sceau — dit
   « vous êtes ici ». Le texte reste du texte : le dessin s'ajoute, il ne
   remplace jamais une liste.

   Tout le contenu est dans le HTML. La 3D (WebGPU, repli WebGL 2) se pose
   dans des emplacements dont la taille est réservée ici : son arrivée ne
   décale rien, et une page sans JavaScript est la même page, sans le dessin. */

/* --- Polices : servies par le site, voir assets/fonts/LICENCE.md ----------- */
@font-face { font-family: "HEA Serif"; font-style: normal; font-weight: 400 700; font-display: swap;
             src: url("../fonts/hea-serif.woff") format("woff"); }
@font-face { font-family: "HEA Serif"; font-style: italic; font-weight: 400 700; font-display: swap;
             src: url("../fonts/hea-serif-italic.woff") format("woff"); }
@font-face { font-family: "HEA Sans"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("../fonts/hea-sans-400.woff") format("woff"); }
@font-face { font-family: "HEA Sans"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("../fonts/hea-sans-600.woff") format("woff"); }

:root {
  color-scheme: light dark;

  --paper:      #fcfcfa;   /* papier de riz */
  --paper-sunk: #eef0ec;   /* pierre claire : le fond des cartes */
  --paper-up:   #ffffff;   /* un bloc posé sur la pierre */
  --rule:       #dfe1dc;
  --ink:        #1f2422;   /* encre */
  --ink-soft:   #4d5552;
  --ink-faint:  #68706d;
  --accent:     #35604f;   /* mousse : les liens */
  --accent-ink: #fcfcfa;
  --seal:       #c2452f;   /* sceau : la position courante, et rien d'autre */

  --serif: "HEA Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "HEA Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --mono:  ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --page:    76rem;                          /* largeur de la page */
  --gutter:  clamp(1.25rem, 4.5vw, 3.5rem);  /* marge latérale */
  --measure: 38rem;                          /* longueur de ligne du texte courant */
  --gap:     1.5rem;
  --stem:    1.5rem;                         /* retrait de la tige du parcours */

  /* Une teinte par couche du graphe. Elle sert au cercle de l'accueil, aux
     pastilles des listes et aux liens vers une autre couche : la couleur
     redit ce que le libellé dit déjà, elle ne le remplace jamais. */
  --l-astronomy:     #3f5f91;
  --l-discipline:    #35604f;
  --l-chronology:    #8a6a2f;
  --l-geography:     #2d6b6e;
  --l-relief:        #556b35;
  --l-geohistory:    #6b4a7d;
  --l-civilization:  #8f4a39;
  --l-biography:     #8c4668;
  --l-heritage:      #6e5547;
  --l-bibliography:  #455a6b;
  --l-education:     #7b7a36;
  --l-noologiagraph: #5d5d58;

  /* Le spectre des couches, en une barre : la marque du site. */
  --spectrum: linear-gradient(90deg, var(--l-astronomy) 0 20%, var(--l-relief) 0 40%,
              var(--l-geography) 0 60%, var(--l-civilization) 0 80%, var(--l-chronology) 0);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131614; --paper-sunk: #0e1110; --paper-up: #1a1e1c; --rule: #2b312e;
    --ink: #e4e7e3; --ink-soft: #adb5b0; --ink-faint: #858d88;
    --accent: #a3cbb9; --accent-ink: #131614; --seal: #e2644f;
    --l-astronomy:     #8fb0e0;
    --l-discipline:    #8fcbb4;
    --l-chronology:    #d8b069;
    --l-geography:     #72bdbd;
    --l-relief:        #a3c478;
    --l-geohistory:    #b795c9;
    --l-civilization:  #e0917c;
    --l-biography:     #dc8fae;
    --l-heritage:      #bda191;
    --l-bibliography:  #93aec4;
    --l-education:     #c9c877;
    --l-noologiagraph: #a8a8a0;
  }
}
:root[data-theme="dark"] {
  --paper: #131614; --paper-sunk: #0e1110; --paper-up: #1a1e1c; --rule: #2b312e;
  --ink: #e4e7e3; --ink-soft: #adb5b0; --ink-faint: #858d88;
  --accent: #a3cbb9; --accent-ink: #131614; --seal: #e2644f;
  --l-astronomy:     #8fb0e0;
  --l-discipline:    #8fcbb4;
  --l-chronology:    #d8b069;
  --l-geography:     #72bdbd;
  --l-relief:        #a3c478;
  --l-geohistory:    #b795c9;
  --l-civilization:  #e0917c;
  --l-biography:     #dc8fae;
  --l-heritage:      #bda191;
  --l-bibliography:  #93aec4;
  --l-education:     #c9c877;
  --l-noologiagraph: #a8a8a0;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Le plein écran (accueil, vue 3D) utilise 100vw, qui compte la largeur de
   l'ascenseur vertical : sans cette ligne, un défilement horizontal apparaît. */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .6rem .9rem; border-radius: 3px; text-decoration: none;
}
.skip:focus { left: var(--gutter); top: .75rem; z-index: 10; }

/* --- En-tête ---------------------------------------------------------------
   Deux axes, dits en toutes lettres : les couches (de quoi le graphe est
   fait) et les façons de le parcourir. Le nom et les outils au-dessus. */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead-in {
  display: grid; align-items: center; gap: 0 2.5rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "mark modes tools" "layers layers layers";
  max-width: var(--page); margin-inline: auto; padding: 1.3rem var(--gutter) 0;
}
.wordmark { grid-area: mark; margin: 0; font: 400 1.5rem/1.15 var(--serif); letter-spacing: .005em; white-space: nowrap; }
.wordmark a { color: var(--ink); text-decoration: none; }
.wordmark-sub { display: none; align-items: center; gap: .55rem; margin-left: 1rem;
                color: var(--ink-faint); font: 400 .8125rem/1 var(--sans); vertical-align: .2em; }
.wordmark-sub::before { content: ""; width: 2.25rem; height: 3px; border-radius: 2px; background: var(--spectrum); }
.masthead-tools { grid-area: tools; display: flex; align-items: baseline; gap: 1.75rem; font-size: .875rem; }
.masthead-account { color: var(--ink-soft); text-decoration: none; }
.masthead-account:hover { color: var(--ink); text-decoration: underline; }
.nav-modes .nav-account { display: none; }
@media (max-width: 30rem) {
  .masthead-account { display: none; }
  .nav-modes .nav-account { display: inline-flex; }
}

.nav-group { display: flex; align-items: baseline; gap: 0 1.35rem; font-size: .9375rem; line-height: 1.3; }
.nav-modes { grid-area: modes; justify-self: end; }
.nav-layers { grid-area: layers; margin-top: .9rem; padding-top: .1rem; border-top: 1px solid var(--rule); }
.nav-title { color: var(--ink-faint); font-size: .75rem; letter-spacing: .04em; }
.nav-group a { display: inline-flex; align-items: baseline; gap: .4rem; padding: .65rem 0 .75rem;
               color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav-modes a { padding-block: .4rem; white-space: nowrap; }
.nav-group a:hover { color: var(--ink); }
.nav-group a[aria-current] { color: var(--ink); border-bottom-color: var(--c, var(--ink)); }
.nav-layer::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%;
                     background: var(--c, var(--ink-faint)); transform: translateY(-.05em); }

/* Écran étroit : le nom et les outils, puis deux bandes que l'on fait glisser. */
@media (max-width: 72rem) {
  .wordmark-sub { display: none; }
  .masthead-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mark tools" "modes modes" "layers layers"; }
  .nav-group { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
               overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .nav-group::-webkit-scrollbar { display: none; }
  .nav-modes { justify-self: stretch; margin-top: .6rem; }
  .nav-layers { margin-top: 0; }
}

.langs { display: flex; gap: .85rem; font-size: .8125rem; letter-spacing: .04em; }
.langs a { color: var(--ink-faint); text-decoration: none; }
.langs a:hover { color: var(--ink); }
.langs [aria-current] { color: var(--ink); font-weight: 600; }

/* --- Contenu --------------------------------------------------------------- */
.content {
  max-width: var(--page); margin-inline: auto;
  padding: 3.5rem var(--gutter) 7rem;
  min-height: 60vh;
}

h1 { margin: 0 0 1.25rem; font: 400 clamp(2.25rem, 1.45rem + 3vw, 3.75rem)/1.08 var(--serif);
     letter-spacing: -.015em; text-wrap: balance; }
h2 { margin: 4.5rem 0 1.25rem; font: 400 1.625rem/1.25 var(--serif); letter-spacing: -.005em; }
h3 { margin: 0 0 .4rem; font: 600 1rem/1.35 var(--sans); }
h2 a, h3 a { color: inherit; text-decoration: none; }
h2 a:hover, h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.lede { max-width: var(--measure); margin: 0 0 2.5rem; color: var(--ink-soft);
        font: 400 1.25rem/1.55 var(--serif); text-wrap: pretty; }
.kind { margin: 0 0 .75rem; color: var(--ink-faint); font-size: .9375rem; }

/* La couche d'un concept, au-dessus de son titre, et celle d'un groupe de
   résultats quand il sort de la couche courante : la pastille redit ce que
   le nom dit déjà. */
.layer-tag { display: inline-flex; align-items: baseline; gap: .4rem;
             color: var(--ink-soft); text-decoration: none; }
.layer-tag::before { content: ""; flex: none; width: .4rem; height: .4rem; border-radius: 50%;
                     background: var(--c, var(--ink-faint)); }
a.layer-tag:hover { color: var(--ink); text-decoration: underline; }
.kind .sep { margin-inline: .45rem; color: var(--rule); }
.layer-head { margin: -.5rem 0 1.25rem; font-variant-numeric: tabular-nums lining-nums; }

.group-layer { display: flex; align-items: baseline; gap: .4rem; margin: -.15rem 0 .4rem;
               color: var(--ink-faint); font-size: .8125rem; }
.group-layer::before { content: ""; flex: none; width: .375rem; height: .375rem; border-radius: 50%;
                       background: var(--c, var(--ink-faint)); }

.kodo-jump { margin: -.9rem 0 1.5rem; padding-left: var(--stem); font-size: .875rem; }
.meta { margin: 0 0 1.5rem; color: var(--ink-faint); font-size: .875rem; }
.empty { color: var(--ink-faint); }
.note { max-width: var(--measure); color: var(--ink-soft); font-size: .9375rem; }
.count { margin-left: .4rem; color: var(--ink-faint);
         font: 400 .8125rem/1 var(--sans); font-variant-numeric: tabular-nums lining-nums; }
.more { margin: 1.25rem 0 0; font-size: .9375rem; }

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .15rem .6rem;
                 margin: 0 0 3rem; padding: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-faint); }
.breadcrumb li + li::before { content: "/"; margin-right: .6rem; color: var(--rule); }
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink-soft); }
.breadcrumb .plain { color: var(--ink-faint); }


/* --- Accueil ---------------------------------------------------------------
   L'en-tête dit ce qu'est le graphe, en chiffres. Puis la carte, sur la
   pierre ; puis les ponts en toutes lettres ; puis les façons de parcourir. */
.home .content { padding-top: 3.5rem; }

.kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem;
          color: var(--ink-soft); font: 400 .9375rem/1.3 var(--sans); }
.kicker::before { content: ""; flex: none; width: 3rem; height: 4px; border-radius: 2px; background: var(--spectrum); }

.hero { display: grid; gap: 1.5rem 5rem; align-items: end; margin-bottom: 4.5rem; }
.hero .kicker { grid-column: 1 / -1; margin: 0; }
.hero h1 { margin: 0; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1.02; }
.hero .lede { margin: 0 0 2rem; }
@media (min-width: 62rem) { .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

.figures { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 2.25rem; margin: 0; }
.figures div { display: flex; flex-direction: column-reverse; }
.figures dd { margin: 0; font: 400 1.875rem/1.1 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.figures dt { margin-top: .3rem; color: var(--ink-faint); font-size: .8125rem; line-height: 1.25; }
@media (max-width: 30rem) { .figures { grid-template-columns: repeat(2, auto); gap: 1.25rem 2.5rem; } }

/* En-tête d'une section : le titre à gauche, ce qu'il faut savoir à droite. */
.section-head { display: grid; gap: .5rem 4rem; align-items: baseline; margin-bottom: 2.75rem; }
.section-head h2 { margin: 0; }
.section-head .note { margin: 0; }
@media (min-width: 62rem) { .section-head { grid-template-columns: minmax(0, 24rem) minmax(0, var(--measure)); } }

/* La pierre : une bande pleine largeur, sur laquelle les couches sont posées. */
.atlas-section, .hood-section {
  width: 100vw; margin-inline: calc(50% - 50vw);
  background: var(--paper-sunk);
  padding-block: 4rem 4.5rem;
}
.atlas-section > *, .hood-in { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

/* La carte. La place de chaque couche est un choix de lecture : du cosmos
   (en haut à gauche) aux sociétés et au temps (à droite), le cadre en bas. */
.atlas {
  position: relative; display: grid; align-items: start; gap: 3.25rem 4.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "astronomy relief        geography civilization"
    "discipline noologiagraph .        chronology";
}
.a-astronomy { grid-area: astronomy; }       .a-relief { grid-area: relief; }
.a-geography { grid-area: geography; }       .a-civilization { grid-area: civilization; }
.a-chronology { grid-area: chronology; }     .a-noologiagraph { grid-area: noologiagraph; }
.a-discipline { grid-area: discipline; }
@media (max-width: 68rem) {
  .atlas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 5rem;
           grid-template-areas: "astronomy relief" "geography civilization" "noologiagraph chronology" "discipline ."; }
}
@media (max-width: 40rem) {
  /* Une colonne : les arcs passent dans la marge de droite, gardée libre. */
  .atlas { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; padding-right: calc(var(--gutter) + 2.75rem);
           grid-template-areas: "astronomy" "relief" "geography" "noologiagraph" "chronology" "civilization" "discipline"; }
}

.atlas-card { position: relative; z-index: 1; padding: 1.05rem 0 .35rem;
              background: var(--paper-up); border-radius: 6px;
              box-shadow: 0 0 0 1px var(--rule), 0 -3px 0 0 var(--c, var(--ink-faint));
              transition: box-shadow .15s; }
.atlas-card:hover, .atlas-card:focus-within { box-shadow: 0 0 0 1px var(--c, var(--ink-faint)), 0 -3px 0 0 var(--c, var(--ink-faint)); }
.atlas-head { display: flex; align-items: baseline; gap: .55rem; margin: 0 1.1rem .1rem;
              font: 400 1.375rem/1.2 var(--serif); }
.atlas-head::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); }
.atlas-head a { color: var(--ink); text-decoration: none; }
.atlas-head a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.atlas-size { margin: 0 1.1rem .8rem; color: var(--ink-faint); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.atlas-types { list-style: none; margin: 0; padding: 0; }
.atlas-types li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: .75rem;
                  padding: .42rem 1.1rem .38rem; border-top: 1px solid var(--rule); font-size: .875rem; line-height: 1.3; }
.atlas-types a { color: var(--ink-soft); text-decoration: none; }
.atlas-types a:hover { color: var(--ink); text-decoration: underline; }
.atlas-types .count { margin: 0; }
.atlas-types .is-bridge a { color: var(--ink); font-weight: 600; }
.atlas-bar { grid-column: 1 / -1; display: block; width: 100%; height: 3px; margin-top: .4rem;
             border-radius: 2px; background: color-mix(in srgb, var(--c, var(--ink-faint)) 12%, transparent); }
.atlas-bar rect { fill: var(--c, var(--ink-faint)); opacity: .7; }
.atlas-rest a { color: var(--ink-faint); }

.planned { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem; margin-top: 2.75rem;
           color: var(--ink-faint); font-size: .875rem; }
.planned-layer { display: inline-flex; align-items: baseline; gap: .4rem; }
.planned-layer::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%;
                         box-shadow: inset 0 0 0 1px var(--c, var(--ink-faint)); }

/* Les traits (graph-links.mjs). Au-dessus des blocs, sans pointeur : ils
   partent du bord d'un bloc et passent dans les marges. */
.graph-wires { position: absolute; inset: 0; z-index: 2; overflow: visible; pointer-events: none; }
.wire { fill: none; stroke-linecap: round; opacity: .72; transition: opacity .2s; }
/* Un cadre (un référentiel qui encadre une couche) n'est pas un pont de
   données : il est tireté. */
.wire-g.is-frame .wire { stroke-dasharray: 2 5; opacity: .6; }
.wire-end { transition: opacity .2s; }
.wire-label { fill: var(--ink-soft); font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums;
              paint-order: stroke; stroke: var(--paper-sunk); stroke-width: 4px; stroke-linejoin: round;
              transition: opacity .2s; }
.is-focused .wire-g:not(.on) .wire { opacity: .07; }
.is-focused .wire-g:not(.on) :is(.wire-end, .wire-label) { opacity: .1; }
.is-focused .wire-g.on .wire { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wire, .wire-end, .wire-label, .atlas-card { transition: none; } }
@media print { .graph-wires { display: none; } }

/* Les ponts, en toutes lettres. */
.bridges { margin-top: 6rem; }
.bridge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 4.5rem;
               grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); }
.bridge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.5rem; align-items: baseline;
          padding: 1.15rem 0 1.3rem; border-top: 1px solid var(--rule); }
.bridge p { margin: 0; }
.bridge-ends { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; font: 400 1.1875rem/1.3 var(--serif); }
.bridge-end { display: inline-flex; flex-direction: column; }
.bridge-layer { display: inline-flex; align-items: baseline; gap: .4rem; color: var(--ink-faint); font: 400 .75rem/1.4 var(--sans); }
.bridge-layer::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--c); }
.bridge-arrow { align-self: end; width: 2rem; height: 1px; margin-bottom: .6em; background: var(--ink-faint); position: relative; }
.bridge-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
                       border-top: 1px solid var(--ink-faint); border-right: 1px solid var(--ink-faint); transform: rotate(45deg); }
.bridge-n { color: var(--ink-faint); font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bridge-ex { grid-column: 1 / -1; color: var(--ink-faint); font-size: .875rem; }
.bridge-ex > span:first-child { margin-right: .5rem; }
.bridge-ex a { color: var(--accent); }

.bridges-layer { margin-top: 3rem; }
.bridges-layer h2 { margin-bottom: 1.25rem; }
.frames { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem; margin: 1.5rem 0 0;
          padding-top: 1.15rem; border-top: 1px solid var(--rule); color: var(--ink-faint); font-size: .875rem; }
.frame { display: inline-flex; align-items: baseline; gap: .4rem; color: var(--ink-soft); }
.frame::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--c); }
.frame .count { margin-left: .15rem; }

/* Les façons de parcourir. */
.modes { margin-top: 6rem; }
.mode-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem 3.5rem;
             grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.mode { padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.mode h3 { margin: .9rem 0 .4rem; font: 400 1.5rem/1.2 var(--serif); }
.mode p { margin: 0; color: var(--ink-soft); font-size: .9375rem; }
.mode .more { margin-top: 1rem; }

.glyph { display: block; width: 4rem; height: 2.5rem; overflow: visible;
         fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.glyph circle { fill: var(--paper); }
.glyph .g-fill { fill: var(--accent); stroke: none; }
.glyph .g-accent { stroke: var(--accent); stroke-width: 1.6; }
.glyph .g-faint { stroke: var(--rule); }
.glyph .g-thick { stroke: var(--ink-soft); stroke-width: 3.4; }

/* La bande du système solaire : une couche que l'on parcourt en 3D. */
.band {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100vw; margin: 7rem 0; margin-inline: calc(50% - 50vw);
  display: grid; align-items: center; min-height: 23rem;
  padding-block: 4.5rem; background: var(--paper-sunk);
}
.band-text { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.band-text h2 { margin: 0 0 .9rem; font-size: clamp(1.875rem, 1.2rem + 2vw, 2.75rem); }
.band-text h2 a { color: var(--ink); text-decoration: none; }
.band-text h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.band-text p { max-width: 29rem; margin: 0; color: var(--ink-soft); }
.band-text .more { margin-top: 1.5rem; }

.backdrop {
  position: absolute; inset: 0 -14% 0 38%; z-index: -1;
  pointer-events: none;        /* ne vole jamais un clic ni une sélection */
  overflow: hidden; contain: layout style paint;
  /* Le dessin s'efface vers le texte, à gauche. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28%);
}
.backdrop canvas { display: block; width: 100%; height: 100%; }
/* Le contraste final se règle ici, pas dans la scène : un fond reste un fond.
   Le drapeau data-tone est posé par le module. */
.backdrop[data-tone="dark"]  { opacity: .8; }
.backdrop[data-tone="light"] { opacity: .66; }
@media (max-width: 52rem) {
  .band { min-height: 0; padding-block: 3.5rem; }
  .backdrop { inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70%);
                                mask-image: linear-gradient(180deg, transparent 0, #000 70%); }
  .band-text { padding-top: 11rem; }
}
@media print { .backdrop { display: none; } }


.band .kicker { margin-bottom: .9rem; }

/* Une couche et ses voisines (entrée d'un module). */
.layer-head { margin: -.5rem 0 1.25rem; font-variant-numeric: tabular-nums lining-nums; }
.layer-with { display: flex; flex-wrap: wrap; gap: .3rem .75rem; margin: 1.1rem 0 0; font-size: .875rem; }
.layer-with > span { color: var(--ink-faint); }
.layer-with a { display: inline-flex; align-items: baseline; gap: .35rem;
                color: var(--ink-soft); text-decoration: none; }
.layer-with a::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%;
                        background: var(--c, var(--ink-faint)); }
.layer-with a:hover { color: var(--ink); text-decoration: underline; }

/* --- Listes ---------------------------------------------------------------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.75rem 4.5rem;
         grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.card { padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.card .kind { margin-bottom: .3rem; font-size: .8125rem; }
.card h2, .card h3 { margin: 0 0 .5rem; font: 400 1.3125rem/1.25 var(--serif); letter-spacing: 0; }
.card h2 a, .card h3 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.card p:not(.kind) { margin: 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.55;
                     display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

.terms, .index { list-style: none; margin: 0; padding: 0; columns: 15rem auto; column-gap: 4.5rem; font-size: .9688rem; }
.terms li, .index li { margin: 0; padding: .28rem 0; break-inside: avoid; }
.terms a, .index a { color: var(--ink-soft); text-decoration: none; }
.terms a:hover, .index a:hover { color: var(--ink); text-decoration: underline; }
.index a.sheet, .index .plain { color: var(--ink-faint); }
.type-group .more { margin-top: 1.25rem; }

.facets { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0 0 1.5rem;
          font-size: .8125rem; color: var(--ink-faint); }
.facets > span:first-child { margin-right: .25rem; }
.facets a, .facets strong { padding: .12rem .6rem; border: 1px solid var(--rule); border-radius: 999px;
                            color: var(--ink-soft); text-decoration: none; font-weight: 400; white-space: nowrap; }
.facets a:hover { border-color: var(--ink-faint); color: var(--ink); }
.facets strong { border-color: var(--ink); color: var(--ink); }
.facets .count { margin-left: .25rem; font-size: .75rem; }

.pager { display: flex; align-items: baseline; justify-content: center; gap: 2rem; margin-top: 5rem; font-size: .9375rem; }
.pager span { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.badge { display: inline-block; margin: 0 0 .35rem; font-size: .8125rem; color: var(--accent); }

/* --- Fiche d'un concept ---------------------------------------------------
   L'en-tête, les vues, puis le voisinage sur la pierre : au-dessus à gauche,
   le concept au centre, en dessous et dans les autres couches à droite. */
.page-head { margin: 0 0 2rem; }
.page-head .lede { margin-bottom: 0; }

.reach { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: 1.5rem 0 0;
         color: var(--ink-faint); font-size: .875rem; }
.reach > span:first-child { color: var(--ink-soft); }
.reach-layer { display: inline-flex; align-items: baseline; gap: .4rem; }
.reach-layer::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c); }

.views { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 3rem; }
.view { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem 1.1rem .35rem .55rem;
        border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); text-decoration: none;
        font-size: .9375rem; transition: border-color .15s, color .15s; }
.view:hover { border-color: var(--ink); color: var(--ink); }
.view .glyph { width: 2.4rem; height: 1.5rem; }

.hood-section { padding-block: 3.25rem 4rem; margin-bottom: 4.5rem; }
.hood-section h2 { margin: 0 0 .5rem; }
.hood-section .note { margin: 0 0 2.75rem; }

.hood { position: relative; display: grid; align-items: start; gap: 1.75rem 5.5rem;
        grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem) minmax(0, 1fr);
        grid-template-areas: "up center down" "up center cross"; }
.hood.no-down  { grid-template-areas: "up center cross" "up center cross"; }
.hood.no-cross { grid-template-areas: "up center down" "up center down"; }
.hood.no-down.no-cross { grid-template-areas: "up center ." "up center ."; }
.hood-up { grid-area: up; }
.hood-center { grid-area: center; align-self: center; position: relative; z-index: 1; }
.hood-down { grid-area: down; }
.hood-cross { grid-area: cross; }
.hood-down + .hood-cross { margin-top: .75rem; }

.hood-title { margin: 0 0 .75rem; color: var(--ink-faint); font-size: .8125rem; }
.hood-up .hood-title, .hood-up .hood-group h3 { text-align: right; }
.hood-col ul, .hood-col ol { list-style: none; margin: 0; padding: 0; }
.hood-group { margin: 0 0 1.5rem; }
.hood-group h3 { margin: 0 0 .5rem; font: 600 .875rem/1.35 var(--sans); color: var(--ink); }
.hood-group h3 .count { font-weight: 400; }
.hood-layer { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .15rem;
              color: var(--ink-soft); font: 400 .75rem/1.3 var(--sans); }
.hood-layer::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c); }
.hood-up .hood-layer { justify-content: flex-end; }
.hood-group .more { margin: .35rem 0 0; font-size: .8125rem; }
.hood-up .more { text-align: right; }

/* Un voisin : un petit bloc, d'où part un trait. */
.hood-col li { position: relative; z-index: 1; width: fit-content; max-width: 100%;
               margin: 0 0 .4rem; padding: .32rem .75rem; border-radius: 4px;
               background: var(--paper-up); box-shadow: 0 0 0 1px var(--rule), inset 3px 0 0 var(--c, var(--rule));
               font-size: .875rem; line-height: 1.35; }
.hood-up li { margin-left: auto; box-shadow: 0 0 0 1px var(--rule), inset -3px 0 0 var(--c, var(--rule)); }
.hood-col li a { color: var(--ink-soft); text-decoration: none; }
.hood-col li a:hover { color: var(--ink); text-decoration: underline; }
.hood-col li a.sheet, .hood-col li .plain { color: var(--ink-faint); }
.hood-chain { margin-bottom: 1.5rem !important; }
.hood-chain li + li { margin-top: 1.1rem; }
.hood-col li.hood-chain-layer { margin: 0 0 .3rem auto; padding: 0; background: none; box-shadow: none; }
.hood-chain li + li.hood-chain-layer { margin-top: 1.4rem; }
.hood-chain li.hood-chain-layer + li { margin-top: 0; }

/* Le concept : le bloc central, et le sceau. */
.hood-here { position: relative; padding: 1.15rem 1.35rem 1.1rem; border-radius: 8px;
             background: var(--paper-up); box-shadow: 0 0 0 1px var(--c, var(--ink)), 0 -4px 0 0 var(--c, var(--ink)); }
.hood-here p { margin: 0; }
.hood-here-kind { color: var(--ink-faint); font-size: .75rem; }
.hood-here-name { display: flex; align-items: baseline; gap: .55rem; margin: .3rem 0 .4rem !important;
                  font: 400 1.5rem/1.2 var(--serif); color: var(--ink); }
.hood-here-name::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%;
                          background: var(--seal); transform: translateY(-.1em); }
.hood-here-code { color: var(--ink-faint); font-size: .75rem; letter-spacing: .05em; }
.hood-siblings { margin-top: 1.5rem; font-size: .8125rem; }
.hood-siblings ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.hood-siblings a { color: var(--ink-soft); text-decoration: none; }
.hood-siblings a:hover { color: var(--ink); text-decoration: underline; }

/* Écran étroit : une colonne ; les traits laissent la place à une tige. */
@media (max-width: 61.999rem) {
  .hood, .hood.no-down, .hood.no-cross, .hood.no-down.no-cross {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "up" "center" "down" "cross"; gap: 1.75rem; }
  .hood .graph-wires { display: none; }
  .hood-up .hood-title, .hood-up .hood-group h3, .hood-up .more { text-align: left; }
  .hood-up .hood-layer { justify-content: flex-start; }
  .hood-col { padding-left: 1rem; border-left: 1px solid var(--rule); }
  .hood-up li { margin-left: 0; box-shadow: 0 0 0 1px var(--rule), inset 3px 0 0 var(--c, var(--rule)); }
  .hood-chain li + li { margin-top: .4rem; }
  .hood-col li.hood-chain-layer { margin-left: 0; }
}

#article { scroll-margin-top: 2rem; }
.prose { max-width: var(--measure); }

.prose .body { font: 400 1.1875rem/1.75 var(--serif); white-space: normal; text-wrap: pretty; }
.prose .body > :first-child { margin-top: 0; }
.prose .body p { margin: 0 0 1.3em; }
.prose .body h2 { margin: 3rem 0 .85rem; font-size: 1.5rem; }
.prose .body h3 { margin: 2rem 0 .5rem; font: 600 1.0625rem/1.35 var(--sans); }
.prose .body ul, .prose .body ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.prose .body li { margin: 0 0 .35em; }
.prose .body blockquote { margin: 0 0 1.3em; padding-left: 1.25rem; border-left: 1px solid var(--ink-faint);
                          color: var(--ink-soft); font-style: italic; }
.prose .body img { max-width: 100%; height: auto; }
.prose .body table { border-collapse: collapse; font: 400 .9375rem/1.5 var(--sans); }
.prose .body th, .prose .body td { padding: .4rem .9rem .4rem 0; border-top: 1px solid var(--rule); text-align: left; }


.node-parallel { margin-top: 5rem; }
.parallel-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.parallel-strip li { padding: .3rem .8rem; border: 1px solid var(--rule); border-radius: 999px; font-size: .875rem; }
.parallel-strip li a { color: var(--ink-soft); text-decoration: none; }
.parallel-strip li.current { border-color: var(--ink); }
.parallel-strip li.current a { color: var(--ink); font-weight: 600; }


/* --- Entrée d'un module ----------------------------------------------------
   Chronologies parallèles : une colonne par racine, côte à côte. */
.parallel > h2 { margin-top: 3rem; }
.parallel .note { margin: 0 0 2.5rem; }
.lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 3.5rem 3rem; }
.lane { padding-top: 1.1rem; border-top: 1px solid var(--ink); font-size: .9375rem; line-height: 1.45; }
.lane h3 { margin: 0 0 .4rem; font: 400 1.25rem/1.3 var(--serif); }
.lane h3 a { color: var(--ink); }
.lane .counts { margin: 0 0 1rem; color: var(--ink-faint); font-size: .8125rem; }
.lane ul { list-style: none; margin: 0; padding: 0; }
.lane li { margin: 0; padding: .22rem 0; }
.lane details ul { margin: .25rem 0 .5rem 1.05rem; padding-left: .85rem; border-left: 1px solid var(--rule); }
.lane summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; }
.lane summary::-webkit-details-marker { display: none; }
.lane summary::before { content: "+"; flex: 0 0 1.05rem; color: var(--ink-faint); }
/* Une entrée sans sous-niveau s'aligne sur celles qui en ont un. */
.lane > ul:has(details) > li > :is(a, .plain) { margin-left: 1.05rem; }
.lane details[open] > summary::before { content: "−"; }
.lane a { color: var(--ink-soft); text-decoration: none; }
.lane a:hover { color: var(--ink); text-decoration: underline; }
.lane .plain { color: var(--ink-faint); }

/* --- Compte, abonnement ---------------------------------------------------- */
.panel { max-width: var(--measure); margin: 0; padding: 1.75rem 0; border-top: 1px solid var(--rule); }
.panel h2 { margin: 0 0 .5rem; font-size: 1.375rem; }
.panel p { margin: 0; color: var(--ink-soft); }
.prices { list-style: none; margin: 0 0 .75rem; padding: 0; }

.paywall { max-width: var(--measure); margin: 3rem 0 0; padding: 1.75rem 0 0; border-top: 1px solid var(--ink); }
.paywall h2 { margin: 0 0 .5rem; font-size: 1.375rem; }
.paywall p { margin: 0 0 1.25rem; color: var(--ink-soft); }
.button { display: inline-block; padding: .65rem 1.35rem; border: 1px solid var(--ink); border-radius: 999px;
          background: transparent; color: var(--ink); cursor: pointer;
          font: 400 .9375rem/1.2 var(--sans); text-decoration: none; }
.button:hover { background: var(--ink); color: var(--paper); }

/* --- Globe d'un corps ------------------------------------------------------ */
.globe { margin: 0 0 1rem; }
.globe-stage {
  aspect-ratio: 16 / 9; min-height: 20rem; position: relative; overflow: hidden;
  background: var(--paper-sunk); border-radius: 4px;
}
.globe-stage canvas { display: block; width: 100%; height: 100%; }
.globe-stage canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.globe-status { margin: .9rem 0 0; color: var(--ink-faint); font-size: .875rem; }
.globe[data-state="failed"] .globe-status { color: var(--seal); }

.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.25rem; font-size: .875rem; line-height: 1.5; }
.facts dt { color: var(--ink-faint); }
.facts dd { margin: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.facts.wide { max-width: 30rem; gap: 0 2.5rem; font-size: 1rem; }
.facts.wide dt, .facts.wide dd { padding: .6rem 0; border-top: 1px solid var(--rule); }
.facts.wide dd { color: var(--ink); text-align: right; }
.facts .note { margin-left: .35rem; color: var(--ink-faint); font-size: .875rem; }

/* --- Système solaire -------------------------------------------------------
   Une liste de corps, pas une grille d'images : il n'y a pas de vignettes, et
   les chiffres portent l'information. Les corps explorables sont marqués. */
.bodies { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem 4.5rem;
          grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.body-card { padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.body-card h2 { margin: 0 0 .7rem; font-size: 1.375rem; }
.body-card h2 a { color: var(--ink); }
.body-card[data-kind="star"] { border-top-color: var(--ink); }
.body-card[data-kind="moon"] h2 { font-size: 1.125rem; }
.tiles-flag { margin: .85rem 0 0; font-size: .8125rem; color: var(--accent); }
.tiles-flag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .5rem .1em 0;
                      border-radius: 50%; background: currentColor; }
.tiles-flag.off { color: var(--ink-faint); }
.tiles-flag.off::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.satellites { margin: .5rem 0 0; font-size: .8125rem; color: var(--ink-faint); }

/* Vue 3D : le canvas est une surface de travail, pas une image. Elle sort de
   la colonne et prend la largeur de la fenêtre. La nuit reste la nuit dans
   les deux thèmes. La liste des corps reste dessous, au défilement, au
   clavier et pour les moteurs de recherche. */
.solar-view {
  position: relative; overflow: hidden;
  width: 100vw; margin-inline: calc(50% - 50vw);
  height: min(100vh, 56rem); min-height: 24rem;
  margin-block: 0 1rem;
  background: #030508;
  touch-action: none;          /* la molette et le glissement pilotent la vue */
}
.solar-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.solar-canvas:focus-visible { outline: 2px solid #a3cbb9; outline-offset: -3px; }

.solar-label {
  position: absolute; margin: 0; padding: .25rem .65rem;
  transform: translate(.9rem, -1.9rem);
  background: var(--paper); color: var(--ink); border-radius: 999px;
  font: 400 .8125rem/1.3 var(--sans); pointer-events: none; white-space: nowrap;
}
.solar-help { margin: 0 0 4rem; color: var(--ink-faint); font-size: .875rem; }
@media (prefers-reduced-motion: reduce) { .solar-view { height: min(80vh, 48rem); } }

/* Panneau du corps visé, dans la vue 3D. */
.solar-focus {
  position: absolute; left: var(--gutter); bottom: 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem .8rem .7rem 1.25rem;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-radius: 999px;
}
.solar-focus p { margin: 0; font: 400 1.125rem/1.2 var(--serif); color: var(--ink); }
.solar-focus a { font-size: .875rem; }
.solar-focus button {
  padding: .4rem .9rem; border: 1px solid var(--rule); border-radius: 999px; background: transparent;
  color: var(--ink-soft); font: 400 .8125rem/1.2 var(--sans); cursor: pointer;
}
.solar-focus button:hover { color: var(--ink); border-color: var(--ink); }

/* Reperes et noms des corps. A l'echelle reelle un corps lointain fait moins
   d'un pixel : il est signale par un viseur de la couleur de son orbite et
   par son nom, comme sur un instrument de bord. Ce sont de vrais boutons. */
.solar-tags { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.solar-tag {
  position: absolute; left: 0; top: 0; display: flex; align-items: center;
  height: 20px; margin: -10px 0 0; padding: 0; border: 0; background: none;
  color: #b9c6c9; font: 500 .625rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap; text-shadow: 0 0 3px #000, 0 0 8px #000; cursor: pointer; pointer-events: auto;
  transition: color .15s;
}
.solar-tag[hidden] { display: none; }
/* Le viseur : un anneau fin et son point central. */
.solar-tag i {
  flex: none; box-sizing: border-box; width: 11px; height: 11px; margin-left: -5.5px;
  border: 1px solid var(--c); border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0 1.6px, transparent 2.2px);
  box-shadow: 0 0 6px color-mix(in srgb, var(--c) 55%, transparent);
  transition: transform .15s;
}
.solar-tag span { margin-left: calc(var(--marge, 9px) - 5.5px); }
.solar-tag[data-gros] i { visibility: hidden; }
.solar-tag[data-nu] span { display: none; }
.solar-tag:hover, .solar-tag:focus-visible { color: #fff; outline: none; }
.solar-tag:hover i, .solar-tag:focus-visible i { transform: scale(1.45); }
.solar-tag:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .solar-tag, .solar-tag i { transition: none; } }

/* Date affichee et cadence du temps. */
.solar-time {
  position: absolute; right: var(--gutter); bottom: 1.5rem;
  display: flex; align-items: center; gap: .35rem;
  padding: .45rem .5rem .45rem 1.1rem; border-radius: 999px;
  background: rgba(8, 11, 14, .78); color: #cfd6d2;
  font: 400 .8125rem/1.2 var(--sans); font-variant-numeric: tabular-nums;
}
.solar-time time { margin-right: .5rem; white-space: nowrap; }
.solar-time .solar-rate { min-width: 5.5em; padding-inline: .35rem; color: #9aa4a0; white-space: nowrap; }
.solar-time button {
  min-width: 2rem; height: 2rem; padding: 0 .6rem; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.solar-time button:hover, .solar-time button:focus-visible { border-color: #fff; color: #fff; outline: none; }
/* Téléphone : la vue laisse dépasser le haut de la liste (le doigt peut
   faire défiler la page en dehors du canevas). L'horloge monte en haut de la
   vue, la date sur sa propre ligne au-dessus des boutons : le bas reste au
   panneau du corps visé, qui peut passer sur deux lignes. */
@media (max-width: 44rem) {
  .solar-view { height: 72vh; height: 72svh; min-height: 22rem; }
  .solar-time { left: var(--gutter); right: var(--gutter); top: 1rem; bottom: auto;
                flex-wrap: wrap; justify-content: center; row-gap: .35rem;
                padding: .5rem .6rem; border-radius: 1.25rem; }
  .solar-time time { width: 100%; margin: 0; text-align: center; }
  .solar-time .solar-rate { display: none; }
  .solar-focus { right: var(--gutter); bottom: 1rem; flex-wrap: wrap; justify-content: space-between; gap: .35rem .9rem; padding: .6rem .7rem .6rem 1.1rem; border-radius: 1.25rem; }
}

/* --- Pied ------------------------------------------------------------------ */
.footer { border-top: 1px solid var(--rule); }
.footer-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2.75rem;
             max-width: var(--page); margin-inline: auto; padding: 2.5rem var(--gutter) 3.5rem;
             color: var(--ink-faint); font-size: .875rem; }
.footer-in p { margin: 0; }
.footer-mark { font: 400 1.125rem/1.2 var(--serif); color: var(--ink); }

/* --- Erreur ---------------------------------------------------------------- */
.error-page { padding-block: 4rem; }

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

@media print {
  .masthead .nav-group, .masthead .langs, .masthead-account, .footer, .solar-view, .solar-help, .skip { display: none; }
  body { background: #fff; color: #000; }
  .content { padding: 0; max-width: none; }
  .article-layout { display: block; }
  .kodo { margin-top: 2rem; }
}

/* --- Teinte d'une couche ---------------------------------------------------
   Une seule variable, lue par le cercle, les pastilles et les liens. */
.l-astronomy      { --c: var(--l-astronomy); }
.l-discipline     { --c: var(--l-discipline); }
.l-chronology     { --c: var(--l-chronology); }
.l-geography      { --c: var(--l-geography); }
.l-relief         { --c: var(--l-relief); }
.l-geohistory     { --c: var(--l-geohistory); }
.l-civilization   { --c: var(--l-civilization); }
.l-biography      { --c: var(--l-biography); }
.l-heritage       { --c: var(--l-heritage); }
.l-bibliography   { --c: var(--l-bibliography); }
.l-education      { --c: var(--l-education); }
.l-noologiagraph  { --c: var(--l-noologiagraph); }

/* --- Pages juridiques et liens du pied de page ------------------------------ */
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font: 400 .875rem/1.4 var(--sans); }
.footer-legal a { color: var(--ink-soft); }
.legal .body h2 { margin-top: 3.5rem; }
.legal .table-wrap { overflow-x: auto; margin: 0 0 1.3em; }
.legal table { border-collapse: collapse; font: 400 .9375rem/1.5 var(--sans); min-width: 32rem; }
.legal th, .legal td { padding: .5rem .75rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.legal th { font-weight: 600; }
.legal code { font: 400 .875em/1 var(--mono); }

/* --- Contact ---------------------------------------------------------------- */
.contact-mail { font: 400 1.375rem/1.4 var(--serif); margin: 0 0 .4rem; }
.contact-hint { color: var(--ink-soft); font: 400 .9375rem/1.55 var(--sans); }
.contact-form, .account-form { display: grid; gap: .2rem; margin: 1.25rem 0; }
.contact-form p, .account-form p { margin: 0 0 .9rem; }
.contact-form label, .account-form label { display: block; margin-bottom: .35rem; font: 600 .9375rem/1.3 var(--sans); }
.contact-form .optional { font-weight: 400; color: var(--ink-faint); }
.contact-form input, .contact-form textarea, .account-form input { width: 100%; min-height: 2.75rem; padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper-up); color: var(--ink); font: 400 1rem/1.5 var(--sans); }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus, .account-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.contact-form .button, .account .button { min-height: 2.75rem; cursor: pointer; background: transparent; color: var(--ink); font: 400 1rem/1.2 var(--sans); }
.contact-error { color: var(--seal); font: 600 .9375rem/1.4 var(--sans); }

/* --- Compte ------------------------------------------------------------------ */
.account .panel { max-width: 34rem; }
.account-flash { margin: 0 0 1rem; padding: .7rem 1rem; border-left: 3px solid var(--seal); background: var(--paper-sunk); font: 400 .9375rem/1.5 var(--sans); color: var(--ink); }
.account-note { margin-top: .75rem; font: 400 .875rem/1.5 var(--sans); }
.account-facts { display: grid; gap: .5rem; margin: .75rem 0 1.25rem; }
.account-facts dt { font: 400 .8125rem/1.3 var(--sans); color: var(--ink-faint); }
.account-facts dd { margin: 0; }
.plans { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.plan { padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 12px; }
.plan h3 { margin: 0 0 .3rem; font: 400 1.15rem/1.3 var(--serif); }
.plan p { margin: 0; }
.plan-note { font: 400 .8125rem/1.4 var(--sans); }