/* Solaris — Tinte: Nachtblau. Akzent: Garance, das warme Rot.
   Schriften: EB Garamond (Stimme), Jost (Beschriftung). */

:root {
  /* Tinte. Das alte #16293B stand mit 14,4:1 auf dem hellen Grund wie ein
     Scherenschnitt — technisch tadellos, zum Lesen zu hart. #263C50 sind
     10,4:1: immer noch weit ueber AAA, aber die Kante tut nicht mehr weh. */
  --nuit:      #263C50;
  --brume:     #5A6B7A;     /* Auf Papier 5,2:1, auf --voile 4,8:1. Der alte
                              Wert #5F7182 fiel auf dem Grund des Schemas mit
                              4,35:1 durch. */

  /* Papier, kein Blatt Kopierpapier. Die Seite faellt von oben nach unten
     ins Warme — die Strasse in die Daemmerung, die auf ihrer alten Seite
     hinter allem liegt. */
  --jour:      #FAF7F1;
  --jour-mitte:#F6F1E8;
  /* Das untere Ende war mit #EFE6D9 so tief, dass Dunst und Garance dunkel
     dort auf 4,45:1 fielen — knapp daneben ist auch daneben. */
  --jour-bas:  #F3EBE0;
  --voile:     #F2EDE4;
  /* Der zweite Grund fuer die Bahnen. --voile war dafuer zu nah am Papier:
     auf einem Koerper, der ohnehin einen Verlauf traegt, war der
     Unterschied nicht zu sehen und die Bahn tat nichts. --sable hat genug
     Abstand, um als eigene Bahn zu lesen, und bleibt hell genug, dass
     Tinte darauf ueber 9:1 steht. */
  --sable:     #EDE3D4;
  --sable-bas: #E8DCCA;
  --trait:     #E4DDD1;
  --garance:   #C8553D;
  /* Garance dunkel, fuer kleine Schrift auf hellem Grund. War bis 0.9.1
     #B04832 und reichte, solange "hell" immer Creme hiess. Mit --sable
     gibt es seit 1.0.0 einen zweiten hellen Grund, und dort fiel der Ton
     auf 4,09:1 durch — nicht am Ton lag das, sondern daran, dass die
     Schwelle fuer beide Gruende gelten muss. Jetzt 4,74:1 auf Sand und
     5,75:1 auf Creme. Ein dunklerer Ton war die kleinere Aenderung als
     ein vierter Garance-Token. */
  --garance-f: #A33F2C;
  --garance-c: #FBEDE7;
  --miel:      #F2D9A8;

  /* Nacht und Glut. Beides an ihren eigenen Bildern abgenommen: der
     Kopfstreifen der alten Seite ist ein fast schwarzer Himmel ueber einer
     brennenden Linie, der Seitengrund eine Strasse in die Daemmerung.
     Die hellen Toene sind die, die auf diesem Grund noch tragen —
     Garance selbst kommt auf Nacht nur auf 4,0:1 und faellt durch. */
  --nuit-fond: #1A2E44;
  --nuit-bas:  #0D1B27;
  --garance-c2: #EC8B70;   /* Garance auf Nacht. Gegen den aufgehellten
                              Grund direkt unter dem Horizont bleiben 5,1:1 —
                              dort stehen die Beschriftungen. */
  --brume-c2:   #9FB0C0;   /* Dunst auf Nacht, 7,0:1 */
  --trait-c2:   rgba(252, 251, 248, .17);  /* Haarstrich auf Nacht */

  /* Die Gestirne. Die Konstellation steht seit 1.0.0 auf Nacht und wird
     inline eingesetzt — damit kann sie diese Tokens erben, statt eine
     zweite Palette mitzuschleppen. */
  --astre:       #CBDCEC;  /* Licht, kuehl. Auf --nuit-fond 9,6:1 */
  --astre-chaud: #F0A579;  /* Licht, warm */
  --fil:         #E3A176;  /* die Faeden zwischen nahen Zellen */
  --contour:     #E8B98C;  /* der Umriss des Festlands */

  /* Der Trennstrich zwischen den Abschnitten.
     Bis 1.0.1 war jeder Uebergang ein weiches Band ueber 60 bis 90 px:
     als Daemmerung gemeint, als Unschaerfe gelesen. Rueckmeldung, zu
     Recht: sieht veraltet aus. Ein Uebergang, der Hoehe hat, ist eine
     Zone; eine Trennung ist eine Kante. Jetzt ein Haarstrich, ueberall
     derselbe, ueber die volle Breite und ohne auslaufende Enden.
     Genau ein Pixel: mehr traegt keine Bedeutung, sondern nur Gewicht. */
  --filet: var(--garance);

  --voix: "EB Garamond", Garamond, "Hoefler Text", Georgia, serif;
  --note: "Jost", Futura, "Century Gothic", -apple-system, BlinkMacSystemFont, sans-serif;

  --marge: clamp(20px, 6vw, 92px);
  /* Die Seitenraender getrennt, damit die Aussparung eines Telefons im
     Querformat nicht ins Logo schneidet. Die Gruende bleiben randlos —
     nur was Text traegt, rueckt nach innen. */
  --marge-g: var(--marge);
  --marge-d: var(--marge);
  /* rem, nicht px (war 1320px, bei 18 px Wurzel dasselbe): die Textspalte
     ab 68em ist in rem bemessen. Stand die Bahn in px fest, blieb bei
     groesserer Browser-Grundschrift (18 bis 24 px, unter Linux ueblich) fuer
     die Titelspalte kaum etwas uebrig, und das « ? » am Ende der h2 brach
     allein in die letzte Zeile - trotz geschuetztem Leerzeichen, weil
     overflow-wrap dann mitten in der Einheit trennt. */
  --max: 73.3333rem;
  /* Absolut, nicht in ch: ch hängt an der Schriftgröße des Elements, dadurch
     stand eine h2 fast doppelt so breit wie der Absatz darunter. */
  --texte: 34rem;

  /* Lesegroesse (1.4.0). --echelle ist die Wahl des Lesers (Schalter
     « Taille du texte », html[data-lecture]), --lecture das, was davon am
     Fliesstext ankommt: auf dem Telefon von Haus aus 11 % mehr, siehe
     unten. Ueberschriften wachsen nur halb so stark mit (--titres), sonst
     holt der Text sie ein und die Ordnung kippt. */
  --echelle: 1;
  --lecture: var(--echelle);
  --titres: calc(1 + (var(--lecture) - 1) * .5);
}

html[data-lecture="2"] { --echelle: 1.13; }
html[data-lecture="3"] { --echelle: 1.26; }

/* Auf dem Telefon war der Fliesstext 21,6 px Garamond. Die Garamond hat
   kleine Mittellaengen und liest sich damit wie gut 17 px einer
   Groteske: ohne Brille zu klein (Rueckmeldung zu 1.3.1). 24 px geben
   bei 375 px Breite noch 33 bis 35 Zeichen je Zeile. em, nicht px: wer
   die Grundschrift seines Browsers hochsetzt, bekommt die Telefonfassung
   entsprechend frueher. */
@media (max-width: 44.99em) {
  :root { --lecture: calc(1.11 * var(--echelle)); }
}

/* Ab Tablet wirkte der Fliesstext in Standardgroesse etwas zu gross
   (Rueckmeldung 2026-10-03): 21,6 -> 20 px. Das Telefon bleibt bei 24 px.
   Die Ueberschriften im Text folgen ueber --titres halb so stark, der
   Schalter « Taille du texte » rechnet von hier aus weiter (22,6 / 25,2). */
@media (min-width: 45em) {
  :root { --lecture: calc(.926 * var(--echelle)); }
}

@supports (padding: env(safe-area-inset-left)) {
  :root {
    --marge-g: calc(var(--marge) + env(safe-area-inset-left));
    --marge-d: calc(var(--marge) + env(safe-area-inset-right));
  }
}

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

/* Die Grundgröße sitzt auf html, nicht auf body: fast alle Maße im Theme
   sind rem und hängen an der Wurzel. 112.5% sind 18px bei üblicher
   Browsereinstellung — und skalieren mit, wenn jemand sie hochgesetzt hat. */
html {
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  min-height: 100vh;
  /* Spalte, damit der Fuss auch auf kurzen Seiten am unteren Rand endet.
     Bis 1.2.2 gab min-height dem Koerper die Fensterhoehe, der Fuss blieb
     aber am Ende des Inhalts haengen: auf der 404 stand darunter ein
     Streifen Papier (54 px bei 1440x900, 234 px bei 1920x1080) - die Seite
     soll in der Nacht enden, nicht mitten im Tag. */
  display: flex;
  flex-direction: column;
  /* Zwei Schichten: ein warmes Feld oben rechts, wo die Konstellation
     leuchtet — damit ihr Schein zur Seite gehoert und nicht als Insel auf
     Weiss sitzt. Darunter der langsame Abstieg ueber die ganze Seitenhoehe. */
  /* Die beiden warmen Felder sassen bis 0.9.1 am oberen Seitenrand: dort
     stand die Konstellation auf Creme und brauchte einen Schein. Seit
     1.0.0 ist der Seitenkopf Nacht und deckt sie zu. Sie sind deshalb
     nach unten gerutscht — jetzt liegen sie direkt unter dem Horizont
     und sind das, was vom Licht der Nacht in den Tag hineinreicht. */
  background:
    /* Mitte in rem, nicht in Prozent: Prozent bezieht sich auf die
       Seitenhoehe, das Feld waere auf der Tutorials-Seite woanders
       gelandet als auf der 404. */
    radial-gradient(78rem 40rem at 72% 6rem, rgba(242, 217, 168, .30), rgba(242, 217, 168, 0) 64%),
    radial-gradient(64rem 30rem at 24% 14rem, rgba(242, 217, 168, .16), rgba(242, 217, 168, 0) 68%),
    linear-gradient(180deg, var(--jour) 0%, var(--jour-mitte) 42%, var(--jour-bas) 100%);
  color: var(--nuit);
  font-family: var(--note);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--voix);
  font-weight: 500;
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}

a { color: inherit; }

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

/* Auf Nacht traegt --garance den Ring nicht: gegen die vom Glutfeld
   angehobene Nacht sind es 2,5 bis 2,9:1, im Untermenue (#223850) 2,76:1 -
   unter den 3:1, die ein Bedienelement braucht. --garance-c2 kommt dort auf
   4,8:1 und mehr. */
.saut:focus-visible,
.ciel :focus-visible,
.pied :focus-visible,
.bande--nuit :focus-visible { outline-color: var(--garance-c2); }

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--nuit);
  color: var(--jour);
  padding: 12px 20px;
  z-index: 99;
}
.saut:focus { left: 0; }
/* Der Ring lag aussen und damit rechts auf dem Logo, sobald eines gesetzt
   ist (ihr Emblem ist weiss und rot: 1,49:1). Wie im Untermenue: hinein,
   auf den eigenen Grund. */
.saut:focus-visible { outline-offset: -5px; }

.mention {
  font-size: .74rem;
  text-wrap: balance;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--garance-f);
  margin: 0;
}

/* ---------- Bandeau ---------- */

.bandeau {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 22px var(--marge-d) 0 var(--marge-g);
  max-width: var(--max);
  margin-inline: auto;
}

.marque {
  display: flex;
  /* Umbruch statt Ueberlauf: bei grosser Schrift ist die Wortmarke breiter
     als ein Telefon (200 %: 446 px bei 320 px Fenster).
     Der Abstand bleibt in beiden Achsen 10px. Ohne Umbruch hat die Zeilen-
     luecke ohnehin keine Wirkung; mit Umbruch — und den gibt es, sobald ein
     Logo dabei ist — stand die Wortmarke sonst auf 0 px an der Unterkante
     des Logos. */
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}

.marque__nom {
  font-family: var(--voix);
  font-size: 2rem;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.marque__nom { line-height: 1; }

/* Seit 1.3.0 ist die Wortmarke der ganze Kopf, ohne Zeichen davor (ihre
   alte Seite hatte dort auch nur Schrift). Der Zusatz in der Kursive der
   Garamond statt in gesperrten Versalien: zwei Versalzeilen nebeneinander
   lasen sich wie ein Stempel, die Kursive dagegen wie eine Unterschrift. */
.marque__lieu {
  font-family: var(--voix);
  font-style: italic;
  font-size: 1.36rem;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--brume);
}


/* Die Menütitel der Redaktion sind lang ("Carte géographique des Cellules").
   Die Navigation darf deshalb umbrechen, statt den Kopf zu sprengen. */
.navigation .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 62ch;
}

.navigation a {
  display: inline-block;
  font-size: .80rem;
  text-wrap: balance;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .18s, color .18s;
}

.navigation a:hover,
.navigation .current-menu-item > a,
.navigation .current_page_item > a {
  border-bottom-color: var(--garance);
}

.bascule {
  display: none;
  background: none;
  border: 0;
  padding: 8px 0;
  font: inherit;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
}

/* ---------- Untermenü ---------- */

/* Sieben gleichrangige Einträge waren keine Navigation, sondern eine Liste.
   Die drei erklärenden Seiten hängen jetzt unter "Présentation de SOLARIS". */
.navigation .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1081px) {
  .navigation .menu-item-has-children { position: relative; }

  /* Das Unicode-Dreieck war zu blass, um zu sagen "hier ist mehr".
     Gezeichnetes Chevron in Garance, das sich beim Öffnen dreht. */
  .navigation .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: .40em;
    height: .40em;
    margin-left: .6em;
    /* Um 45 Grad gedreht ragt das Quadrat um ~.08em ueber seinen Kasten.
       Steht der Punkt am rechten Rand (bei grosser Schrift bricht
       « Nous Rejoindre » um, dann steht « Carte » dort), lief die Spitze
       3 px ueber die Navigation hinaus. */
    margin-right: .12em;
    border-right: 1.6px solid var(--garance);
    border-bottom: 1.6px solid var(--garance);
    transform: translateY(-.20em) rotate(45deg);
    transition: transform .2s;
  }

  .navigation .menu-item-has-children:hover > a::after,
  .navigation .menu-item-has-children:focus-within > a::after {
    transform: translateY(.02em) rotate(-135deg);
  }

  .navigation .menu-item-has-children > a { border-bottom-color: var(--trait); }

  .navigation .menu-item-has-children:hover > a,
  .navigation .menu-item-has-children:focus-within > a {
    border-bottom-color: var(--garance);
  }

  .navigation .sub-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    min-width: 12rem;
    /* Ein absolut gesetzter Kasten nimmt sonst die Breite seines Elternpunkts
       als verfuegbaren Platz: unter dem kurzen « Carte » brach « Le réseau,
       par Départements » zweizeilig um. Inhaltsbreite, nach oben begrenzt. */
    width: max-content;
    max-width: min(26rem, 90vw);
    background: var(--jour);
    border: 1px solid var(--trait);
    box-shadow: 0 14px 34px -18px rgba(22, 41, 59, .34);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .16s, transform .16s, visibility .16s;
  }

  /* :focus-within, damit die Punkte auch per Tastatur erreichbar sind —
     ein reines :hover-Menü ist für Tastatur und Vorleser eine Sackgasse. */
  .navigation .menu-item-has-children:hover > .sub-menu,
  .navigation .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .navigation .sub-menu a {
    display: block;
    padding: 9px 18px;
    text-align: right;
    border-bottom: 0;
  }

  .navigation .sub-menu a:hover,
  .navigation .sub-menu .current-menu-item > a,
  .navigation .sub-menu .current_page_item > a {
    color: var(--garance-f);
    border-bottom: 0;
  }

  /* Der Fokusring gehoert INNEN. Das Untermenue hat waagerecht keine
     Polsterung (padding: 6px 0) und der Punkt ist so breit wie der Kasten;
     ein Ring mit outline-offset: 3px liegt links und rechts also 4 px
     ausserhalb des Kastens, auf dem Papier dahinter. Dort bringt
     --garance-c2 nur 1,74:1 — sichtbar war der Ring nur an Ober- und
     Unterkante. Innen steht er ganz auf der Nacht des Kastens: 4,9:1. */
  .navigation .sub-menu a:focus-visible { outline-offset: -2px; }

  /* Dasselbe am Elternpunkt: das aufgeklappte Untermenue setzt direkt an
     seiner Unterkante an und deckte die untere Ringseite zu 88 % zu. Innen
     liegt der Ring ganz frei. */
  .navigation .menu-item-has-children > a:focus-visible { outline-offset: -2px; }
}

@media (max-width: 1080px) {
  /* Ausgeklappt lassen: der Knopf hat die Liste schon aufgemacht, ein zweiter
     Klapp-Schritt für drei Punkte wäre eine Tür vor einer Tür. Der Strich
     links zeigt, dass die drei zusammengehören. */
  .navigation .sub-menu { border-left: 2px solid var(--garance-c); margin-left: 2px; }
  .navigation .sub-menu a { padding-left: 20px; color: var(--brume); }
}

/* Auf dem Telefon soll der Schriftzug neben dem Menüknopf bleiben und ihn
   nicht in die nächste Zeile drücken. */

@media (max-width: 560px) {
  .marque { column-gap: 8px; }
  /* Wortmarke, Zusatz und Menuknopf brauchen 315 px und standen bei 1,7rem
     fest; unter 358 px Fensterbreite fiel der Knopf deshalb in eine eigene
     Zeile (Kopf 127 statt 71 px), obwohl dieser Block ihn neben der
     Wortmarke halten soll. Unter 360 px schrumpft die Schrift mit der
     Breite; die Untergrenze in rem folgt der eingestellten Textgroesse. */
  .marque__nom { font-size: clamp(1.14rem, calc(20vw - 41px), 1.7rem); }
  .marque__lieu { font-size: clamp(.98rem, calc(13vw - 26px), 1.2rem); }
}

@media (max-width: 1080px) {
  .bandeau { flex-wrap: wrap; gap: 16px; }
  /* Knopf und Zuklappen nur, wenn das Skript da ist (Klasse .js, in
     functions.php gesetzt). Ohne Skript stand der Knopf da, tat nichts, und
     die Navigation war weg - nur die Wortmarke blieb als Link. */
  .js .bascule { display: block; }
  .navigation { flex-basis: 100%; }
  .js .navigation { display: none; }
  .js .navigation.est-ouverte { display: block; }
  .navigation .menu { flex-direction: column; gap: 0; max-width: none; justify-content: flex-start; }
  .navigation a { display: block; padding: 10px 0; border-bottom: 1px solid var(--trait); }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(8px, 2vw, 24px) var(--marge-d) clamp(44px, 6vw, 80px) var(--marge-g);
}

.hero__titre {
  font-size: clamp(2.4rem, 4.9vw, 4rem);
  margin: 18px 0 0;
  max-width: 21ch;
  /* Bei 200 % Textgroesse ist ein einzelnes Wort breiter als ein Telefon; die
     Spalte des Hero (1fr) wuchs dann mit und schob die Seite auf 418 px.
     anywhere bricht nur, wenn das Wort nicht passt - sonst aendert sich nichts. */
  overflow-wrap: anywhere;
}

/* Die Kursive der EB Garamond ist kalligrafisch und trägt in dieser Größe
   nicht — sie wirkt wie ein Zitat, nicht wie eine Betonung. Die Hervorhebung
   macht deshalb die Farbe, nicht die Schräglage. */
.hero__titre em {
  font-style: normal;
  color: var(--garance);
}

.hero__intro {
  margin: 22px 0 0;
  max-width: 38ch;
  font-family: var(--voix);
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--nuit);
}

.hero__actes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin: 28px 0 0;
}

/* Gefuellt plus dunkler Versatzbalken waren zwei laute Elemente uebereinander,
   und Garance stand dann zweimal in derselben Spalte — einmal in der
   Schlagzeile, einmal als Block. Der Knopf gewann, obwohl die Schlagzeile
   fuehren soll. Jetzt Kontur: leise im Ruhezustand, entschieden beim
   Anfassen. Der Versatz bleibt, aber in Garance statt in Nachtblau — ein
   Druckversatz, kein Schlagschatten. */
.bouton {
  display: inline-block;
  background: transparent;
  color: var(--garance-f);
  border: 1.5px solid var(--garance);
  padding: 15.5px 32.5px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(200, 85, 61, .26);
  transition: background .18s, color .18s, transform .12s, box-shadow .12s;
  /* Der Titel der Seite ist die Beschriftung, und die ist lang („Carte
     géographique des Cellules"). Bei 200 % Textgroesse ist „GÉOGRAPHIQUE"
     mit Sperrung und Rand breiter als ein Telefon. */
  max-width: 100%;
  overflow-wrap: anywhere;
  /* Der Browser holt einen fokussierten Knopf ins Bild, bevor er um seinen
     Versatz sinkt: ohne Abstand ragt er am unteren Rand 4 px heraus. */
  scroll-margin-block: 12px;
}

/* Kein Schwebe-Effekt, ein Druck: beim Zeigen sinkt der Knopf auf seinen
   eigenen Versatz. Harte Kante, keine Weichzeichnung, kein Rundungsradius. */
.bouton:hover,
.bouton:focus-visible {
  background: var(--garance-f);
  color: var(--jour);
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 rgba(200, 85, 61, 0);
}

/* Im Fließtext gewinnt sonst `.article a` mit seiner Linkfarbe — Garance auf
   Garance, der Knopf steht dann leer da (auf der 404-Seite so passiert). */
.article a.bouton { color: var(--garance-f); font-family: var(--note); text-decoration: none; }
.article a.bouton:hover, .article a.bouton:focus-visible { color: var(--jour); }

.lien-fleche {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 6px;
  transition: border-color .18s;
}

.lien-fleche::after { content: " \2192"; }
.lien-fleche:hover { border-bottom-color: var(--nuit); }

/* Die Zahlen sind der Beleg, dass es das Netz gibt. Darueber gehoert die
   Glut-Linie und nicht derselbe hoefliche Haarstrich wie ueber jedem
   Absatz. Background statt border, damit der Verlauf durchlaeuft. */
.chiffres {
  display: flex;
  /* Umbruch erlaubt: bei 125 % Textgroesse passten die drei Zahlen mit ihren
     gesperrten Beschriftungen nicht mehr in 329 px, und die Spalte des Hero
     wuchs ueber das Fenster hinaus (Seite seitlich verschiebbar). */
  flex-wrap: wrap;
  gap: 14px clamp(26px, 5vw, 56px);
  margin: clamp(26px, 4vw, 42px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--trait);
}

.chiffres__bloc { margin: 0; }

.chiffres__valeur {
  font-family: var(--voix);
  font-size: 2.2rem;
  line-height: 1;
}

.chiffres__label {
  margin: 6px 0 0;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brume);
}

/* Die Grafik ist 640x608. Ungebremst zieht sie die Textspalte auseinander
   und reißt oben ein Loch — deshalb gedeckelt. */
/* Ohne linke Spalte (alle Felder leer) waere die halbe Breite Nichts. */
.hero--sans-mot { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.hero--sans-mot .hero__carte { max-width: 520px; }

.hero__carte { margin: 0; }
.hero__carte img { width: 100%; }
.hero__carte figcaption { text-align: center; margin-top: 8px; color: var(--brume); }

@media (max-width: 900px) {
  /* minmax(0, 1fr) statt 1fr: 1fr heisst minmax(auto, 1fr), die Spalte durfte
     also mit ihrem breitesten Inhalt ueber das Fenster hinauswachsen. */
  .hero { grid-template-columns: minmax(0, 1fr); }
  /* Derselbe Achsenwechsel, dieselbe Falle wie beim Glutfeld: `gap` war als
     Abstand ZWISCHEN zwei Spalten bemessen (28-64 px), gilt gestapelt aber
     senkrecht. Dazu kam das `margin-top: 18px` der Schlagzeile, das in der
     zweispaltigen Fassung nur ein kleiner Versatz am Spaltenkopf ist. Unter
     der Grafik standen damit 46 px Luft, und weil das SVG unter dem letzten
     Punkt noch rund 19 px Leerraum mitbringt, las es sich als 65 px. Jetzt
     traegt allein `row-gap` den Abstand, einmal und sichtbar. */
  .hero { row-gap: clamp(12px, 3vw, 28px); }
  .hero__mot > :first-child { margin-top: 0; }
  .hero__carte { order: -1; max-width: 420px; margin-inline: auto; }
}

/* ---------- Seiten ---------- */

/* Vorher stand der Text links und rechts daneben 500 px Nichts. Eine
   Textseite ist kein Raster: Titel und Text bilden eine mittige Spalte,
   breitere Elemente (Raster, Schema, Bilder) brechen daraus aus. */
.feuille {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 72px) var(--marge-d) clamp(48px, 7vw, 96px) var(--marge-g);
}

.feuille--large { max-width: var(--max); }

.feuille__tete {
  max-width: var(--texte);
  margin: 0 auto clamp(26px, 4vw, 44px);
}

.feuille__titre {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  margin-top: 14px;
  max-width: 22ch;
  overflow-wrap: anywhere;
}

/* Der Fließtext bleibt schmal, Sektionen wie das Sprachenraster dürfen
   ausbrechen. Darum begrenzt nicht der Container, sondern das Element. */
.article {
  font-family: var(--voix);
  font-size: calc(1.2rem * var(--lecture));
  line-height: 1.66;
  /* Die Redaktion setzt volle URLs als Linktext. Ohne Umbruchregel schiebt so
     ein Link auf dem Telefon die ganze Seite nach rechts aus dem Bild. */
  overflow-wrap: break-word;
}

.article a { overflow-wrap: anywhere; }

:where(.article, .bande__corps) > :where(p, h2, h3, h4, ul, ol, blockquote, figure, pre):not(.langues):not(.schema) {
  max-width: var(--texte);
  margin-inline: auto;
}

:where(.article, .bande__corps) > * + * { margin-top: 1.1em; }

.article h2 {
  font-size: calc(1.72rem * var(--titres));
  margin-top: 2.2em;
  padding-top: .8em;
  border-top: 1px solid var(--trait);
}

.article h3 { font-size: calc(1.32rem * var(--titres)); margin-top: 1.8em; }

.article a {
  color: var(--garance-f);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article :where(ul, ol):not(.langues):not(.litanie) { padding-left: 1.3em; }
.article :where(ul, ol):not(.langues):not(.litanie) li + li { margin-top: .4em; }

.article blockquote {
  margin: 1.8em auto;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--garance);
  font-style: italic;
  color: var(--brume);
}

.article figure { margin: 2em auto; }
.article figcaption { font-family: var(--note); font-size: calc(.88rem * var(--lecture)); color: var(--brume); margin-top: .6em; }

.article :where(.wp-block-button__link) {
  display: inline-block;
  background: transparent;
  color: var(--garance-f);
  border: 1.5px solid var(--garance);
  font-family: var(--note);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14.5px 30.5px;
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(200, 85, 61, .26);
  transition: background .18s, color .18s, transform .12s, box-shadow .12s;
}

.article :where(.wp-block-button__link):hover,
.article :where(.wp-block-button__link):focus-visible {
  background: var(--garance-f);
  color: var(--jour);
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 rgba(200, 85, 61, 0);
}

.article :where(.wp-block-file) {
  font-family: var(--note);
  font-size: calc(1rem * var(--lecture));
}

.article :where(.wp-block-group) { margin-block: 1.4em; }

/* ---------- Das Bild « l’Internet Humain » ---------- */

/* Bis 1.0.3 stand hier eine Kette aus drei Pastillen mit Pfeilen dazwischen.
   Die Pfeile schnitten in die Kreise — das war der sichtbare Mangel. Der
   größere lag darunter: ihr Text sagt, das System sei ausdrücklich KEIN
   Tausch („ni même sur l’idée d’un échange de service"), und eine Reihe von
   links nach rechts ist eine Rangfolge, wo „sans hiérarchie" steht.
   Begründung im Einzelnen in inc/schema.php.

   Die Farben stehen als Eigenschaften am Bild selbst, nicht global: so
   trägt es sich auf hellem Grund genauso wie auf der Nachtbahn, auf der es
   heute liegt. */
.schema {
  --tissu:  #9AAABA;
  --don:    var(--garance-f);
  --retour: var(--nuit);

  max-width: 940px;
  margin: 2.4em auto 2.8em;
  padding: 0;
  background: none;
  border: 0;
}

.schema__scene { position: relative; }

.schema svg { width: 100%; height: auto; display: block; }

.schema .tissu { stroke: var(--tissu); }
.schema .cellule { fill: var(--tissu); }
.schema .cellule--vous { fill: var(--don); }
.schema .halo { stroke: var(--don); opacity: .38; }
.schema .voie--don { stroke: var(--don); }
.schema .voie--retour { stroke: var(--retour); }

/* Der Satz gehört neben die Zeichnung, nicht hinein: Text im SVG schrumpft
   auf dem Telefon mitsamt der Zeichnung auf Streichholzgröße.

   Auf schmalen Schirmen steht er als ein Satz unter dem Bild — er ist ja
   einer. Erst wenn Platz ist, treten seine beiden Hälften an die Enden
   auseinander, an denen die beiden Wege anfangen und aufhören. */
.schema__phrase {
  font-family: var(--voix);
  font-size: calc(1.06rem * var(--lecture));
  line-height: 1.5;
  margin: 1.2em 0 0;
  text-wrap: balance;
}

.schema__don { color: var(--don); }
.schema__retour { color: var(--retour); }

@media (min-width: 860px) {
  .schema__phrase {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
  }

  /* Die Ebene deckt die ganze Zeichnung und faengt deshalb keine Zeigerereignisse;
     die Saetze selbst schon - sonst lassen sie sich nicht markieren und
     kopieren, obwohl sie echter Text sind. */
  .schema__don,
  .schema__retour { position: absolute; max-width: 16ch; pointer-events: auto; }

  .schema__don { left: 0; top: 8%; }
  .schema__retour { right: 0; bottom: 6%; text-align: right; }
}

/* ---------- Annuaire (iframe cagots.fr) ---------- */

.annuaire { margin-top: clamp(30px, 5vw, 52px); }

.annuaire__cadre {
  width: 100%;
  height: clamp(560px, 82vh, 1100px);
  border: 1px solid var(--trait);
  background: var(--voile);
}

.annuaire__note { margin-top: 10px; color: var(--brume); }

/* ---------- Listen ---------- */

.liste { list-style: none; margin: 0; padding: 0; }

.liste__item { border-top: 1px solid var(--trait); }
.liste__item:last-child { border-bottom: 1px solid var(--trait); }

.liste__item a {
  display: block;
  padding: 26px 0;
  text-decoration: none;
  /* transform statt padding-left: eine Layout-Eigenschaft zu animieren
     laesst den Browser bei jedem Bild neu umbrechen. */
  transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}

.liste__item a:hover { transform: translateX(10px); }

.liste__titre { font-size: 1.6rem; }
.liste__extrait { margin: 8px 0 0; color: var(--brume); max-width: var(--texte); }

/* ---------- Pied ---------- */

/* Der Fuss war ein Block Altrosa — die Farbe einer Einladungskarte, nicht
   die eines Netzes, das sich selbst organisiert. Er ist jetzt die Nacht:
   dunkler Grund, eine brennende Linie an der Oberkante, tief links das
   letzte Licht. Genau die drei Elemente ihres eigenen Kopfbildes. */
.pied {
  position: relative;
  /* Kein Abstand: der Haarstrich an der Oberkante IST die Trennung. Bis
     1.0.1 lag hier ein Daemmerungsband, das Platz brauchte. */
  margin-top: 0;
  /* Drei Schichten statt eines Pseudo-Elements fuer den Schein: damit bleibt
     ::after frei fuer das Daemmerungsband ueber dem Fuss, und der Fuss
     braucht kein overflow:hidden mehr. */
  background:
    radial-gradient(128% 118px at 50% 0, rgba(242, 217, 168, .15), rgba(242, 217, 168, 0) 100%),
    radial-gradient(46% 108% at 18% 46%, rgba(200, 85, 61, .30), rgba(200, 85, 61, 0) 72%),
    linear-gradient(174deg, var(--nuit-fond), var(--nuit-bas) 78%);
  color: var(--jour);
}

/* Die Oberkante des Fusses. Zwei Versionen lang stand hier ein Band, das
   den Uebergang weich machen sollte — erst 200 px Grauverlauf, dann 88 px.
   Beide Male derselbe Denkfehler: eine Trennung braucht keine Tiefe. Der
   Strich genuegt, und der harte Wechsel von Papier auf Nacht ist kein
   Fehler, den man kaschieren muss, sondern die Trennung selbst. */
.pied::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--filet);
}

/* Vorher war der Fuß eine einzige gequetschte Zeile. Jetzt drei Spalten und
   darunter eine schmale Zeile für das Kleingedruckte. */
.pied__corps {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(54px, 6vw, 86px) var(--marge-d) clamp(26px, 3vw, 36px) var(--marge-g);
  /* Flex statt drei fester Spalten: das Fussmenue gibt es erst, wenn jemand
     ein zweites Menue angelegt hat, und die Kontaktadresse kann leer sein.
     Mit festem Raster blieb dann ein Drittel leer und der Fuss sah kaputt
     aus. So teilen sich die Bloecke, die da sind, die Breite. */
  display: flex;
  flex-wrap: wrap;
  /* Die Lücke war mit 56 px so breit, dass die drei Blöcke ab 1 600 px
     nicht mehr nebeneinander passten (828 px Blöcke + 112 px Lücken gegen
     936 px Innenmaß) und der Fuß auf 462 px umbrach — ausgerechnet dort,
     wo am meisten Platz ist. */
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}

.pied__bloc { flex: 1 1 13rem; min-width: 0; }
.pied__bloc:first-child { flex: 1.6 1 19rem; }

.pied__marque {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--voix);
  font-size: 1.5rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* flex-wrap: bei 32 px Grundschrift sind Name und Zusatz breiter als ein
   Telefon (388 px bei 320). */
.pied__marque { align-items: baseline; flex-wrap: wrap; column-gap: 10px; row-gap: 4px; }
.pied__marque .marque__nom { font-size: 1.5rem; }
.pied__marque .marque__lieu { font-size: 1.12rem; color: var(--brume-c2); }

.pied__devise {
  font-family: var(--voix);
  font-style: italic;
  font-size: 1.18rem;
  margin: 0;
  max-width: 34ch;
  color: var(--jour);
  /* Sonst steht auf dem Telefon „l'humain" allein in der zweiten Zeile. */
  text-wrap: balance;
}

.pied__titre {
  font-size: .70rem;
  font-weight: 500;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--garance-c2);
  margin: 0 0 14px;
}

.pied__menu {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .80rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pied__menu a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color .18s, color .18s;
}

.pied__menu a:hover {
  color: var(--garance-c2);
  border-bottom-color: var(--garance-c2);
}

.pied__contact {
  margin: 0;
  font-family: var(--note);
  font-size: .88rem;
  overflow-wrap: anywhere;
}

.pied__contact a {
  color: var(--garance-c2);
  text-decoration: none;
  border-bottom: 1px solid rgba(236, 139, 112, .38);
  padding-bottom: 2px;
  transition: border-color .18s;
}

.pied__contact a:hover { border-bottom-color: var(--garance-c2); }

.pied__bas {
  max-width: 1120px;
  margin-inline: auto;
  padding: 0 var(--marge-d) clamp(38px, 4.5vw, 56px) var(--marge-g);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: baseline;
}

.pied__trait {
  border: 0;
  border-top: 1px solid rgba(252, 251, 248, .14);
  max-width: 1120px;
  margin: 0 auto clamp(18px, 2vw, 24px);
  width: calc(100% - var(--marge-g) - var(--marge-d));
}

.pied__mention {
  margin: 0;
  font-size: .70rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brume-c2);
}

/* Dazwischen tragen drei Spalten nicht, zwei schon: Name und Devise
   nehmen die ganze Zeile, Links und Adresse teilen sich die nächste.
   Ohne diese Regel bricht ein beliebiger Block um und es sieht aus wie
   ein Versehen. */
@media (min-width: 761px) and (max-width: 1100px) {
  .pied__bloc:first-child { flex: 1 1 100%; }
}

@media (max-width: 760px) {
  /* Der Fuß war auf dem Telefon 1 045 px hoch für einen Namen, eine
     Devise, zwei Links und eine Adresse. Das war kein Gestaltungsfehler,
     sondern ein echter:

     `flex: 1 1 13rem` und `flex: 1.6 1 20rem` sind für die ZEILE
     geschrieben — dort ist flex-basis die Breite. Die Spaltenumschaltung
     hat nur `flex-direction` gedreht und die Werte stehen lassen; in der
     Spalte ist flex-basis die HÖHE. Jeder Block bekam damit 234 px, der
     erste 360 px, ganz gleich was drinsteht. Die Kontaktadresse füllte
     davon 45 px, der Rest war Luft.

     Also die Flex-Werte zurücknehmen, sobald gestapelt wird. */
  .pied__corps {
    flex-direction: column;
    gap: 26px;
    padding-top: clamp(36px, 9vw, 54px);
  }

  .pied__bloc,
  .pied__bloc:first-child { flex: 0 0 auto; }

  .pied__titre { margin-bottom: 10px; }

  /* Zwei Links untereinander sind zwei Zeilen für nichts. Nebeneinander
     passen sie in eine und brechen von selbst um, wenn es einmal mehr
     werden. */
  .pied__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
  }

  .pied__bas { padding-bottom: clamp(26px, 7vw, 38px); }
}

/* ---------- Divers ---------- */

.pagination { margin-top: 40px; font-size: .9rem; }
.pagination a { color: var(--garance-f); }

.vide { color: var(--brume); }

.contenu { flex: 1 0 auto; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------- Überschriften im Fließtext ---------- */

/* Die Redaktion setzt Abschnittstitel als eingefärbten Fettabsatz.
   Das Theme macht daraus echte h2 — hier bekommen sie ihre Form. */
.article > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- Die Sprachen, in denen es das Video gibt ---------- */

/* Als Kachelraster war das ein Flickenteppich: neun Kästen unterschiedlicher
   Höhe, eine angerissene letzte Reihe, und ausgerechnet der einzige
   Unterschied zwischen den Einträgen — eine Quelle oder zwei — riss die
   Löcher. Es ist keine Sammlung gleichwertiger Kacheln, sondern eine Liste:
   ein Video, neun Sprachen, je ein oder zwei Quellen. Also ausgerichtet —
   Sprache links, Quellen rechts, ein Haarstrich dazwischen, keine Kästen.

   Die Liste bleibt im Textmaß, statt wie das Raster daraus auszubrechen.
   Sie ist die Fortsetzung des Satzes darüber, und über die volle Breite
   klaffte zwischen Sprache und Quelle ein Loch von 280 px — zu weit, um
   ohne Führungspunkte von links nach rechts zu kommen. */
.langues {
  list-style: none;
  max-width: var(--texte);
  margin: 1.9em auto 2.8em;
  padding: 0;
  display: grid;
  /* minmax(0, …): sonst waechst die Spur mit ihrem breitesten Eintrag ueber
     die Textspalte hinaus. */
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(26px, 3.4vw, 46px);
}

.langues__item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1.2rem;
  padding: 13px 0;
  border-bottom: 1px solid var(--trait);
}

/* Der obere Strich gehört an den Eintrag, nicht an die Liste: an der Liste
   liefe er als durchgehende Linie über die Spaltenlücke hinweg, während
   jeder andere Strich dort unterbrochen ist. Eine Linie, die anders gebaut
   ist als alle darunter, sieht man sofort. */
.langues__item:first-child { border-top: 1px solid var(--trait); }

.langues__nom {
  font-family: var(--voix);
  font-size: calc(1.12rem * var(--lecture));
  line-height: 1.25;
}

/* „Русский“ steht zweimal in der Liste. Was die beiden unterscheidet, ist
   eine Beifügung und kein zweiter Name — also zurückgenommen, statt
   gleichrangig hinter einem Mittelpunkt. */
.langues__precision {
  font-family: var(--note);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--brume);
  margin-left: .5em;
}

.langues__sources {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  max-width: 100%;
}

.langues__sep {
  margin: 0 .62em;
  color: var(--brume);
  font-size: .7rem;
}

.langues__source {
  font-family: var(--note);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--garance-f);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 85, 61, .3);
  padding-bottom: 2px;
  transition: border-color .18s;
}

.langues__source:hover { border-bottom-color: var(--garance); }

/* Zwei Spalten, sobald Platz ist: neun Zeilen untereinander sind eine lange
   Strecke für eine Nebensache. Die Liste füllt zeilenweise, die Striche
   liegen also auf einer Höhe; oben bekommt deshalb jede Spalte ihren
   eigenen Anfangsstrich. */
/* 45em, nicht 720px. Beides ist bei der ueblichen Einstellung dieselbe
   Grenze; der Unterschied zeigt sich erst, wenn jemand die Grundschrift
   seines Browsers hochsetzt. `em` in einer Media Query haengt naemlich an
   genau dieser Einstellung und NICHT an html{font-size} — bei einer
   Grundschrift von 24 px werden aus 45em 1 080 px, und die zweite Spalte
   kommt erst, wenn sie auch passt. Wer die Schriftvergroesserung nur ueber
   html{font-size} nachstellt, sieht diesen Teil nicht: dort bleibt die
   Abfrage bei 720 px stehen. (tools/mesure stellt sie richtig.)

   Was den gemessenen Ueberlauf bei grosser Schrift behoben hat, war nicht
   diese Zeile, sondern minmax(0, …) an der Spur und der Umbruch im
   Eintrag: eine Spur mit `1fr` waechst mit ihrem breitesten Eintrag. */
@media (min-width: 45em) {
  .langues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .langues__item:nth-child(-n+2) { border-top: 1px solid var(--trait); }
}

/* Einzelne Videolinks ausserhalb der Liste.
   Als umrandete Pillen standen sie da wie Knoepfe, und das Bindewort "ou"
   und der Satzpunkt hingen lose dazwischen in der Luft. Es ist aber ein
   Satz mit zwei Links darin. Also dieselbe Sprache wie die Quellen in der
   Liste — dann traegt der Satz wieder. */
.article p.media-seul {
  font-family: var(--note);
  font-size: .92rem;
  color: var(--brume);
}

.article p.media-seul a {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--garance-f);
  border-bottom: 1px solid rgba(200, 85, 61, .3);
  padding-bottom: 2px;
  transition: border-color .18s;
}

.article p.media-seul a:hover { border-bottom-color: var(--garance); }


/* ---------- Zwischenzeilen über den Videolisten ---------- */

/* Das ist ein hinfuehrender Satz, kein Etikett. In Versalien mit Sperrung
   lief er ueber zwei Zeilen und schrie lauter als die Ueberschrift darueber. */
.article p.intertitre {
  font-family: var(--voix);
  font-size: calc(1.08rem * var(--lecture));
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brume);
  margin-top: 2.2em;
  margin-bottom: .1em;
}

.article p.intertitre strong,
.article p.intertitre b { font-weight: 500; }

.article p.intertitre br { display: none; }


/* ---------- Bilder aus dem Editor ---------- */

.article img { height: auto; }

.article :where(.alignleft, .alignright) {
  display: block;
  margin: 1.6em auto;
}

.article .aligncenter { margin-inline: auto; }

/* Die Redaktion hängt Bilder gern in einen fetten Absatz. Der soll
   dann nicht wie Fließtext aussehen. */
.article p > img:only-child { margin: 0; }
.article p:has(> img:only-child),
.article p:has(> b > img:only-child),
.article p:has(> strong > img:only-child) { max-width: none; }

@media (min-width: 900px) {
  .article :where(.alignleft, .alignright) { max-width: 420px; }
  .article .alignleft { float: left; margin: .4em 2em 1.4em 0; }
  .article .alignright { float: right; margin: .4em 0 1.4em 2em; }
  .article h2 { clear: both; }

  /* Ein Float braucht Text, der ihn umfliesst. Steht das Bild allein in
     seiner Bahn — auf "Nous Rejoindre" ist es das Titelbild vor der ersten
     Ueberschrift —, dann haengt es am Rand der Bahn, 177 px links neben der
     Textspalte, und rechts stehen 700 px nichts. Ohne etwas zum Umfliessen
     gehoert es in die Spalte. */
  .bande__corps > p:only-child :where(.alignleft, .alignright) {
    float: none;
    margin-inline: auto;
  }
}


/* =========================================================================
   1.0.0 — EIN KÖRPER

   Bis 0.9.1 war die Startseite drei Fremde untereinander: ein heller Hero,
   5 173 px Fließtext in einer 612-px-Spalte ohne jeden Takt, ein dunkler
   Fuß. Gestaltet waren die ersten und die letzten zehn Prozent. Genau das
   liest sich als zusammengestückelt.

   Die Seite ist jetzt ein Tag: sie fängt in der Nacht an, geht über einen
   Horizont in den Tag, bekommt im Mittelteil einen Takt aus Bahnen und
   geht am Fuß wieder unter. Nacht, Glutlinie, Dämmerung — dieselben drei
   Elemente oben und unten, spiegelverkehrt. Das ist ihr eigenes Kopfbild,
   einmal von vorn und einmal von hinten gelesen.
   ========================================================================= */

/* ---------- Das Nachtfeld über der Seite ---------- */

/* Kopfleiste und Hero liegen in EINEM Element. Zwei Elemente mit je eigenem
   Verlauf ergeben an der Stoßkante eine Naht, die man sofort sieht — der
   Fehler, der 0.7.1 am Fuß gekostet hat. */
.ciel {
  position: relative;
  color: var(--jour);
  padding-bottom: clamp(16px, 2.6vw, 30px);
  background:
    /* Das letzte Licht sammelt sich am Horizont, also unten. */
    radial-gradient(130% 56% at 50% 100%, rgba(242, 217, 168, .13), rgba(242, 217, 168, 0) 72%),
    /* Ein Glutfeld rechts, wo die Konstellation steht. */
    radial-gradient(54% 74% at 76% 62%, rgba(200, 85, 61, .26), rgba(200, 85, 61, 0) 74%),
    linear-gradient(176deg, var(--nuit-bas), var(--nuit-fond) 86%);
}

/* Gestapelt steht die Konstellation OBEN (order: -1), das Glutfeld aber lag
   weiter bei 76 % / 62 % der Hoehe des Nachtfeldes - dort, wo im breiten
   Hero die Konstellation steht, im schmalen aber Knopf und Zahlen. Auf dem
   Telefon lag der Knopf deshalb auf angehobenem Grund und fiel auf
   4,22 bis 4,36:1 durch (Zahlenbeschriftung 4,45). Mitte und Radien in rem,
   nicht in Prozent: Prozent haengt hier an der Hoehe des ganzen Feldes. */
@media (max-width: 900px) {
  .ciel--accueil {
    background:
      radial-gradient(130% 56% at 50% 100%, rgba(242, 217, 168, .13), rgba(242, 217, 168, 0) 72%),
      radial-gradient(22rem 18rem at 50% 16rem, rgba(200, 85, 61, .26), rgba(200, 85, 61, 0) 74%),
      linear-gradient(176deg, var(--nuit-bas), var(--nuit-fond) 86%);
  }
}

/* Die Unterkante des Nachtfeldes. Dieselbe Linie wie an jeder anderen
   Abschnittsgrenze — ein Pixel, volle Breite, keine auslaufenden Enden.
   Darunter lag bis 1.0.1 ein 92 px hohes Daemmerungsband. */
.ciel::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--filet);
}

/* ---------- Kopfleiste auf Nacht ---------- */

.ciel .marque__nom { color: var(--jour); }
.ciel .marque__lieu { color: var(--brume-c2); }

.ciel .navigation a { color: var(--jour); }
.ciel .navigation a:hover,
.ciel .navigation .current-menu-item > a,
.ciel .navigation .current_page_item > a { border-bottom-color: var(--garance-c2); }

.ciel .bascule { color: var(--jour); }

/* Das Untermenü war ein cremefarbener Kasten und stand auf dem Nachtkopf
   da wie ein angeschaltetes Fenster. Jetzt eine Stufe heller als die
   Nacht, mit einem Rand statt eines Schattens. */
@media (min-width: 1081px) {
  .ciel .navigation .sub-menu {
    background: #223850;
    border-color: rgba(252, 251, 248, .16);
    box-shadow: 0 18px 40px -20px rgba(4, 12, 20, .8);
  }

  .ciel .navigation .sub-menu a:hover,
  .ciel .navigation .sub-menu .current-menu-item > a,
  .ciel .navigation .sub-menu .current_page_item > a { color: var(--garance-c2); }

  .ciel .navigation .menu-item-has-children > a { border-bottom-color: var(--trait-c2); }
}

@media (max-width: 1080px) {
  .ciel .navigation a { border-bottom-color: var(--trait-c2); }
  .ciel .navigation .sub-menu { border-left-color: rgba(236, 139, 112, .42); }
  .ciel .navigation .sub-menu a { color: var(--brume-c2); }
}

/* ---------- Hero auf Nacht ---------- */

.ciel .hero { padding-bottom: clamp(52px, 7vw, 96px); }

.ciel .hero__titre { color: var(--jour); }
/* Große Schrift, 3:1 genügt — --garance-c2 liegt mit 5,1:1 weit darüber. */
.ciel .hero__titre em { color: var(--garance-c2); }
.ciel .hero__intro { color: var(--brume-c2); }

/* Der Knopf bleibt Kontur mit Druckversatz, nur die Töne wechseln die
   Seite: --garance-f fällt auf Nacht durch (3,3:1), --garance-c2 steht mit
   5,1:1 gut da. Gefüllt wird weiter mit --garance-f, dort steht --jour
   mit 5,4:1 drauf. */
.ciel .bouton {
  color: var(--garance-c2);
  border-color: var(--garance);
  box-shadow: 4px 4px 0 rgba(200, 85, 61, .5);
}

.ciel .bouton:hover,
.ciel .bouton:focus-visible {
  background: var(--garance-f);
  color: var(--jour);
  box-shadow: 0 0 0 rgba(200, 85, 61, 0);
}

/* Der zweite Weg im Hero (« L'Esprit SOLARIS ») tritt hinter die Karte
   zurück: Haarlinie statt Rahmen, kein Versatz, leiserer Text. */
.ciel .bouton--fin {
  color: var(--brume-c2);
  border-width: 1px;
  border-color: rgba(236, 139, 112, .45);
  padding: 15.5px 33px;   /* gleiche Höhe wie der Knopf daneben (1,5 px Rahmen) */
  box-shadow: none;
}
.ciel .bouton--fin:hover,
.ciel .bouton--fin:focus-visible {
  background: rgba(236, 139, 112, .12);
  color: var(--jour);
  border-color: var(--garance-c2);
  transform: none;
}

.ciel .lien-fleche { color: var(--jour); border-bottom-color: var(--trait-c2); }
.ciel .lien-fleche:hover { border-bottom-color: var(--garance-c2); }

/* Über den Zahlen stand bis 0.9.1 die Glutlinie. Die ist jetzt der
   Horizont und steht 200 px tiefer — zweimal dieselbe Linie im selben
   Bild macht aus einem Zeichen eine Verzierung. Hier genügt ein
   Haarstrich. */
.ciel .chiffres {
  background-image: none;
  border-top: 1px solid var(--trait-c2);
  padding-top: 24px;
}

.ciel .chiffres__valeur { color: var(--jour); }
.ciel .chiffres__label { color: var(--brume-c2); }
.ciel .mention { color: var(--garance-c2); }

/* ---------- Die Konstellation ---------- */

/* Inline im Dokument, nicht als <img>. Der ursprüngliche Grund war die
   Animation (ein SVG hinter <img> läuft im "secure static mode", jede
   Animation steht dort bei t=0 still); die ist mit 1.0.2 weggefallen.
   Inline bleibt sie trotzdem, aus dem besseren Grund: so erbt sie die
   Farbtokens des Themes, statt eine zweite Palette mitzuschleppen. */
.hero__carte svg { width: 100%; height: auto; overflow: visible; }

.hero__carte .c-froid { fill: var(--astre); }
.hero__carte .c-chaud { fill: var(--astre-chaud); }
.hero__carte .f { stroke: var(--fil); }
.hero__carte .contour { stroke: var(--contour); }

/* Keine Bewegung. 1.0.2 ließ die Punkte in Wellen aufgehen und danach ein
   Zwanzigstel von ihnen weiteratmen. Rückmeldung: das Design soll den
   Inhalt tragen und keine eigene Show machen. Stimmt — die Karte belegt,
   dass es 1 780 Zellen gibt; dass sie sich beim Laden vorführt, belegt
   nichts. Zwei Deckungsstufen bleiben, damit aus der Karte ein Bild wird
   und kein Raster. */
.hero__carte .d { opacity: .72; }

/* Die Grafik führt auf die Karte (der Knopf daneben auch). Zeiger und ein
   wenig mehr Licht in den Punkten sagen, dass man tippen kann. */
.hero__lien { display: block; color: inherit; }
.hero__lien .d { transition: opacity .2s; }
@media (hover: hover) {
  .hero__lien:hover .d { opacity: 1; }
}

/* ---------- Die Bahnen ---------- */

/* Der Fließtext war eine einzige 612-px-Spalte über 5 173 px. Die
   Überschriften standen darin wie Kilometersteine an einer geraden
   Straße: man sieht sie erst, wenn man daneben ist.

   Jetzt bekommt jeder Abschnitt seine eigene Bahn über die volle Breite.
   Die Textspalte bleibt, was sie war — nur der Grund unter ihr wechselt,
   und das sieht man beim Scrollen, ohne zu lesen. inc/contenu.php
   schneidet dafür an den h2. */
.article--bandes {
  font-family: var(--voix);
  font-size: calc(1.2rem * var(--lecture));
  line-height: 1.66;
  overflow-wrap: break-word;
}

/* Der Trennstrich. Eine Regel fuer alle Abschnittsgrenzen: zwischen zwei
   Bahnen, und auf den Unterseiten zwischen Titelkopf und erster Bahn.
   Die Grenze zum Nachtfeld oben und zum Fuss unten tragen .ciel::after
   und .pied::before — sonst staende dort ein zweiter Strich daneben. */
.bande { position: relative; }

.bande + .bande,
.feuille--tete + .article--bandes > .bande:first-child {
  border-top: 1px solid var(--filet);
}

.bande__corps {
  /* flow-root: die Bahn schliesst ihre Floats ein. Ohne das ragte das
     Titelbild von „Nous Rejoindre" (float: left ab 900 px) aus seiner Bahn
     in die naechste, deren Grund (position: relative) es ueberdeckte - 68 bis
     79 % des Bildes waren unsichtbar -, und das h2 der Folgebahn rueckte per
     clear: both um 258 px nach unten. */
  display: flow-root;
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(40px, 5vw, 76px) var(--marge-d) clamp(46px, 5.6vw, 84px) var(--marge-g);
}

/* Die Nummer sagt, wie weit man ist. Vier Fragen, vier Bahnen — das ist
   eine Auskunft und keine Verzierung, deshalb klein und beiseite. */
.bande__no {
  max-width: var(--texte);
  margin: 0 auto .7em;
  font-family: var(--note);
  font-size: .70rem;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--garance-f);
}

/* In der Bahn braucht die Überschrift keinen eigenen Strich mehr: die
   Kante der Bahn macht die Arbeit, und zwei Trennungen an derselben
   Stelle sind eine zu viel. */
.bande__corps > h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: calc(clamp(1.72rem, 2.6vw, 2.2rem) * var(--titres));
}

.bande__corps > h2 ~ h2 {
  margin-top: 2em;
  padding-top: .8em;
  border-top: 1px solid var(--trait);
}

/* Der letzte "Abschnittstitel" ihrer Startseite ist 126 Zeichen lang und
   endet auf drei Punkte. Das ist ein Satz, keine Überschrift, und als
   Überschrift war er fünf Zeilen hoch. inc/contenu.php lässt ihn jetzt
   Absatz sein — als Vorspann der Bahn, in der er steht. */
.bande__corps > .chapo {
  font-size: calc(1.34rem * var(--lecture));
  line-height: 1.45;
  color: var(--nuit);
  margin-bottom: 1.4em;
}

.bande__corps > .chapo :where(b, strong) { font-weight: 500; }

.bande--voile {
  background: linear-gradient(180deg, var(--sable), var(--sable-bas));
}

/* ---------- Die Bahn, die nachts liegt ---------- */

/* Eine dunkle Bahn in der Mitte, und zwar genau die, in der das Schema
   steht: der Abschnitt, der erklärt, wie eine Anfrage durch das Netz
   läuft. Sie ist der Grund, aus dem es die Seite gibt, und sie hält
   Kopf und Fuß zusammen — sonst stünde die Nacht an beiden Enden und
   dazwischen 4 000 px Papier.

   Welche Bahn das ist, entscheidet nicht eine Nummer, sondern der
   Inhalt: die Bahn mit dem Schema. Ändert die Redaktion die Reihenfolge,
   wandert die Nacht mit. */
.bande--nuit {
  color: var(--jour);
  background:
    radial-gradient(60% 90% at 22% 40%, rgba(200, 85, 61, .22), rgba(200, 85, 61, 0) 72%),
    linear-gradient(178deg, var(--nuit-fond), var(--nuit-bas) 92%);
}

.bande--nuit .bande__corps { padding-block: clamp(54px, 6vw, 92px); }

/* Text auf der Nachtbahn. --brume und --garance-f fallen dort durch. */
.bande--nuit .bande__no { color: var(--garance-c2); }
.bande--nuit a { color: var(--garance-c2); }
.bande--nuit :where(.langues__source, p.media-seul a) {
  color: var(--garance-c2);
  border-bottom-color: rgba(236, 139, 112, .42);
}
.bande--nuit p.media-seul,
.bande--nuit .langues__precision,
.bande--nuit .langues__sep { color: var(--brume-c2); }
.bande--nuit :where(.langues__item, .langues__item:first-child) { border-color: var(--trait-c2); }
.bande--nuit blockquote { border-left-color: var(--garance-c2); color: var(--brume-c2); }
.bande--nuit p.intertitre { color: var(--brume-c2); }
.bande--nuit .chapo { color: var(--jour); }
.bande--nuit > .bande__corps > h2 ~ h2 { border-top-color: var(--trait-c2); }

/* Auf der Nachtbahn dreht das Bild seine Töne um. Die Zeichnung selbst
   bleibt dieselbe Datei. */
.bande--nuit .schema {
  --tissu:  #7E93A8;
  --don:    var(--astre-chaud);
  --retour: #EAF3FB;
}

/* ---------- Der Titelkopf der Unterseiten ---------- */

/* Auf den Unterseiten steht kein Hero unter der Kopfleiste; der Titel
   bekommt eigene Luft. Die Zuschlaege fuer das Daemmerungsband sind mit
   1.0.2 weggefallen — es gibt kein Band mehr zu unterlaufen. */
.feuille--tete {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: 0;
}

.feuille--tete .feuille__tete { margin-bottom: 0; }

/* Ohne Inhalt darunter fehlt die Bahn, die den Abstand zum Fuss macht. */
.feuille--tete.feuille--seule { padding-bottom: clamp(48px, 7vw, 96px); }

/* Das Verzeichnis liegt jetzt in einem eigenen Blatt; dessen Polsterung
   macht den Abstand, der vorher als margin am Rahmen hing. */
.feuille.annuaire { margin-top: 0; padding-top: 0; }


/* ---------- Litanei ---------- */

/* „L’Esprit SOLARIS" ist keine Prosa: acht Absätze fangen wortgleich an.
   Als gleich gesetzte Fließabsätze untereinander war das unsichtbar und
   die Seite eine 3 183 px hohe Wand.

   Die Wiederholung bleibt stehen — sie ist das rhetorische Mittel, nicht
   ein Versehen der Redaktion. Sie tritt nur zurück, damit die acht
   verschiedenen Fortsetzungen als Spalte lesbar werden. Keine Punkte,
   keine Striche, keine Kästen: eine Anrufung ist keine Aufzählung. Was
   den Takt macht, ist der Abstand. */
.litanie {
  list-style: none;
  max-width: var(--texte);
  margin: 1.7em auto 2.2em;
  padding: 0;
}

.litanie__vers + .litanie__vers { margin-top: 1.25em; }

.litanie__reprise { color: var(--brume); }

.bande--nuit .litanie__reprise { color: var(--brume-c2); }

/* ---------- Der Schlusssatz ---------- */

/* Ein kurzer letzter Satz hinter Absätzen von 400 bis 700 Zeichen
   verschwindet, wenn er aussieht wie sie. Größer, nicht lauter: dieselbe
   Farbe, nur mehr Raum darum. */
/* Die Breite gehoert an dieselbe Stelle wie die Spaltenregel, sonst bleibt
   sie wirkungslos: :where() zaehlt null, aber die beiden :not() in der
   Spaltenregel bringen sie auf (0,2,0) und schlagen ein blosses .chute. Der
   Schlusssatz stand deshalb auf voller Spaltenbreite in einer Zeile, obwohl
   28ch dastand. */
:where(.article, .bande__corps) > .chute:not(.langues):not(.schema) {
  font-size: calc(1.36rem * var(--lecture));
  line-height: 1.4;
  margin-top: 1.9em;
  max-width: 28ch;
}


/* =========================================================================
   1.3.0 — Ihre Bilder

   Die Ordnung von 1.2.5 bleibt: Nacht, Tag in Bahnen, Nacht. Neu ist, dass
   die beiden Uebergaenge wieder IHRE Bilder zeigen. Oben endet das
   Nachtfeld nicht am Strich, sondern an ihrem Horizont: die Gruppe im
   Abendlicht steigt aus der Nacht auf und steht mit den Fuessen auf der
   Glutlinie. Unten schliesst der Fuss mit der Erde vom All aus.

   Auf keinem der beiden Bilder steht Schrift. Das war auf der alten Seite
   die Schwaeche: Titel mit schwarzem Schlagschatten gegen Wolken, Text auf
   einem weissen Kasten ueber dem Weltall.
   ========================================================================= */

.ciel--horizon { padding-bottom: 0; }

/* Der Hero liegt ueber dem Bild, das von unten in ihn hineinwaechst. */
.ciel--horizon .hero { position: relative; z-index: 1; }

.horizon {
  position: relative;
  height: clamp(130px, 15vw, 220px);
  overflow: hidden;
  /* Unter dem Bild die Farbe seines Bodens, damit beim Laden kein Loch
     aufgeht. */
  background: #0b0a0c;
}

.horizon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Die Gruppe steht im rechten Drittel, die Fuesse am unteren Rand. */
  object-position: 72% 100%;
  /* Der Himmel des Fotos kommt aus der Nacht, er faengt nicht an einer
     Kante an. Die Maske blendet nur die Deckkraft - Farbe und Licht des
     Bildes bleiben, wie sie sind. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) 38%, #000 70%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) 38%, #000 70%);
}

.ciel--horizon .horizon { background: transparent; }

/* Die Startseite ist EIN Bildschirm: Kopf, Inhalt, und am unteren Rand
   die Gruppe auf dem Horizont. In der ersten Fassung von 1.3.0 hatte das
   Foto eine feste Hoehe unter dem Inhalt: auf einem hohen Bildschirm
   (1 760 x 1 100) hing der Inhalt oben, darunter ein breiter Streifen
   Wolken, und die Leute standen unter dem Rand.

   Jetzt fuellt das Nachtfeld die Fensterhoehe (gedeckelt), der Inhalt
   behaelt seine Hoehe, und das Foto nimmt den Rest: auf einem hohen
   Bildschirm waechst es nach oben bis an die Zahlen heran, auf einem
   niedrigen schrumpft es bis auf seine Mindesthoehe. Oben abgeschnitten
   wird dabei nur Himmel, die Gruppe steht immer am unteren Rand.

   width: 100 % an Kopf und Hero: in einer Flex-Spalte lassen die
   auto-Raender (margin-inline: auto) die Elemente sonst auf Inhaltsbreite
   schrumpfen, statt sie bis max-width zu dehnen. */
.ciel--accueil.ciel--horizon {
  display: flex;
  flex-direction: column;
  min-height: min(100svh, 1200px);
}

.ciel--accueil.ciel--horizon > .bandeau,
.ciel--accueil.ciel--horizon > .hero { width: 100%; }

.ciel--accueil.ciel--horizon > .hero {
  flex: 0 0 auto;
  padding-bottom: clamp(24px, 3vw, 48px);
}

.ciel--accueil .horizon {
  flex: 1 0 auto;
  height: auto;
  min-height: clamp(190px, 19vw, 300px);
  margin-top: calc(-1 * clamp(20px, 3vw, 56px));
}

/* Ab 901 px liegt das Foto nicht mehr UNTER dem Inhalt, sondern als Grund
   HINTER seiner unteren Haelfte. Auch mit Foto im Fluss hing der Inhalt
   auf einem Laptop (1 470 x 840) oben unter dem Kopf, und das Foto fing
   erst unter den Zahlen an: oben gedraengt, unten ein Band Himmel.

   Jetzt: das Foto nimmt die unteren ~62 % des Nachtfelds ein und blendet
   nach oben in die Nacht aus, sein Rand liegt also hinter Knopf und
   Zahlen. Unten haelt das Nachtfeld einen Streifen frei (padding-bottom),
   in dem die Gruppe steht - dort steht nie Text. Der Inhalt steht mittig
   im Raum darueber. Die Gruppe steht im rechten Teil des Bildes, Titel und
   Zahlen links; die Karte rechts endet ueber den Koepfen.

   Die Kopfleiste liegt eine Ebene hoeher als der Hero, sonst verschwaende
   das aufgeklappte Untermenue hinter ihm. */
@media (min-width: 901px) {
  .ciel--accueil.ciel--horizon {
    padding-bottom: clamp(150px, 12vw, 240px);
  }

  .ciel--accueil.ciel--horizon > .bandeau { position: relative; z-index: 2; }

  .ciel--accueil.ciel--horizon > .hero {
    flex: 1 0 auto;
    align-content: center;
    padding-top: clamp(24px, 5vh, 72px);
    padding-bottom: clamp(24px, 4vh, 56px);
  }

  /* Die Hoehe haengt auch an der Breite (44vw). Das Foto ist ein Querformat
     (3,3:1), object-fit: cover vergroessert es nach der knapperen Achse. Mit
     62 % allein war es auf dem Tablet hochkant (1 024 x 1 366) 744 px hoch,
     also 2,4-fach vergroessert, und die Gruppe lief rechts aus dem Bild.
     Auf Laptop und Desktop ist 62 % die kleinere Zahl, dort aendert sich
     nichts. Dasselbe beim Nachtfeld (105vw): hochkant stand sonst ueber dem
     Inhalt ein Streifen leerer Nacht, weil das Feld 1 200 px hoch war. */
  .ciel--accueil.ciel--horizon { min-height: min(100svh, 1200px, 105vw); }

  .ciel--accueil .horizon {
    position: absolute;
    inset: auto 0 0;
    z-index: 0;
    height: clamp(360px, min(62%, 44vw), 760px);
    min-height: 0;
    margin: 0;
  }

  .ciel--accueil .hero__carte svg { max-height: 52svh; }

  /* Links stehen Knopf und Zahlen auf dem Foto, und dort sind seine Wolken
     am hellsten. Ein Schleier aus der Nachtfarbe, nach rechts auslaufend,
     bevor er die Gruppe erreicht. */
  /* Die Ausblendung nach oben gehoert hier an den ganzen Streifen, nicht
     nur an das Bild: sonst endet der Schleier oben mit einer harten Kante. */
  .ciel--accueil .horizon {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) 38%, #000 70%);
            mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) 38%, #000 70%);
  }

  .ciel--accueil .horizon img { -webkit-mask-image: none; mask-image: none; }

  .ciel--accueil .horizon::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Gemessen (tools/mesure, Kontrast aus dem Bild): mit .62 / .38 fielen
       die Zahlenbeschriftung und der Knopf bei 1 024 und 1 440 px auf
       4,1-4,4:1, bei offenem Menue (der Hero rutscht dann tiefer) bis 1,6:1.
       Deshalb kraeftig, solange Text darueber stehen kann, und erst hinter
       der Textspalte auslaufend. */
    background: linear-gradient(90deg, rgba(13, 27, 39, .82) 0, rgba(13, 27, 39, .74) 46%, rgba(13, 27, 39, 0) 68%);
  }
}

/* ---------- Die Erde unter dem Fuss ---------- */

.terre {
  position: relative;
  height: clamp(120px, 15vw, 230px);
  overflow: hidden;
}

.terre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 62%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 55%);
}

/* Auf den Unterseiten ist der Streifen schmal; der dunkle Boden des Fotos
   nahm dort ein Drittel der Hoehe. Etwas tiefer angeschnitten, die Fuesse
   bleiben stehen. */
.ciel--horizon:not(.ciel--accueil) .horizon img { object-position: 72% 88%; }

/* Der Titel stand bis 1.2.5 direkt auf dem Strich, die Unterlaengen
   schnitten hinein (das p in « L'Esprit »). Mit dem Foto darueber ist der
   Titelkopf jetzt ein eigener Abschnitt zwischen zwei Kanten und braucht
   unten dieselbe Luft wie oben. */
.feuille--tete { padding-bottom: clamp(30px, 4vw, 56px); }

/* ---------- Der Text auf breiten Bildschirmen ---------- */

/* Bis 1.2.5 stand der Fliesstext auch bei 1 440 px in einer mittigen
   612-px-Spalte, links und rechts je 400 px Papier. Die Spalte war fuer
   die Lesbarkeit richtig, die Leere daneben nicht: sie hatte keine
   Aufgabe. Jetzt hat sie eine. Die Ueberschrift jeder Bahn steht links in
   ihrer eigenen Spalte und laeuft beim Lesen mit (sticky), der Text rechts
   daneben, breiter als vorher, aber unter 80 Zeichen.

   Kein Raster, sondern Blockfluss mit der Ueberschrift als Float im
   linken Rand. Im Raster fallen Raender nicht zusammen: jeder Absatzabstand
   war doppelt so gross, und die auto-Raender der Spaltenregel liessen jede
   Zelle auf Inhaltsbreite schrumpfen (« Oui, nous tous. » stand als 128 px
   breiter Block mitten in der Spalte). Im Blockfluss bleibt alles, was die
   Abstaende bisher geregelt hat, wie es war.

   68em und nicht px: wer die Grundschrift seines Browsers hochsetzt,
   bekommt die zwei Spalten erst, wenn sie bei seiner Schrift auch passen
   (bei 24 px Grundschrift ab 1 632 px), und bis dahin die eine. */
@media (min-width: 68em) {
  .article--bandes { counter-reset: bande; }

  .article--bandes .bande__corps {
    /* Die Textspalte: 40rem, darunter schrumpft sie mit der Bahn, aber
       nicht unter das alte Mass. */
    --col: clamp(34rem, 55vw, 40rem);
    --gout: clamp(56px, 6vw, 112px);
    /* vw und nicht cqw mit einem Container auf der Bahn: container-type
       bringt Stil-Eingrenzung mit, und die kapselt CSS-Zaehler - jede Bahn
       zaehlte dann wieder ab 01. vw enthaelt eine sichtbare Bildlaufleiste
       (bis 17 px); unter 1 337 px wird die Textspalte dadurch so viel
       schmaler, die Kanten stimmen trotzdem. */
    --tete: calc(min(100vw, var(--max)) - var(--marge-g) - var(--marge-d) - var(--col) - var(--gout));
    /* In der Spalte nimmt jeder Baustein die volle Spaltenbreite; das Mass
       macht jetzt der Rand, nicht mehr das Element. */
    --texte: none;
    max-width: var(--max);
    padding-left: calc(var(--marge-g) + var(--tete) + var(--gout));
  }

  /* Die Nummer wandert in die Ueberschrift (siehe unten): so bleiben beide
     zusammen stehen, wenn die Ueberschrift mitlaeuft. */
  .article--bandes .bande__corps > .bande__no { display: none; }

  .article--bandes .bande__corps > .bande__no + h2 {
    float: left;
    clear: none;
    width: var(--tete);
    max-width: none;
    margin: 0 0 0 calc(-1 * (var(--tete) + var(--gout)));
    position: sticky;
    top: clamp(28px, 4vw, 56px);
    font-size: calc(clamp(2rem, 2.7vw, 2.6rem) * var(--titres));
    line-height: 1.15;
    text-wrap: balance;
    counter-increment: bande;
  }

  .article--bandes .bande__corps > .bande__no + h2::before {
    content: counter(bande, decimal-leading-zero);
    /* Leerer Ersatztext: fuer Vorleser ist die Nummer Rauschen, wie schon
       beim aria-hidden der Nummer in inc/contenu.php. */
    content: counter(bande, decimal-leading-zero) / "";
    display: block;
    margin-bottom: 1.1rem;
    font-family: var(--note);
    font-size: .70rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .24em;
    color: var(--garance-f);
  }

  .bande--nuit .bande__corps > .bande__no + h2::before { color: var(--garance-c2); }

  /* Der Text beginnt auf Hoehe der ersten Titelzeile, nicht der Nummer. */
  .article--bandes .bande__corps > .bande__no + h2 + * { margin-top: 1.55rem; }

  /* Eine zweite Ueberschrift in derselben Bahn bleibt in der Textspalte,
     statt unter die erste zu springen. */
  .article--bandes .bande__corps > h2 ~ h2 { clear: none; }

  /* Die Zeichnung braucht die ganze Breite; sie steht unter Ueberschrift
     und Einleitung. */
  /* Mittig ueber beide Spalten, im alten Hoechstmass: die Textspalte ist
     100 %, die ganze Breite 100 % + Titelspalte + Luecke. */
  .article--bandes .bande__corps > .schema {
    --w: min(940px, 100% + var(--tete) + var(--gout));
    clear: both;
    width: var(--w);
    max-width: none;
    margin-left: calc((100% - var(--tete) - var(--gout) - var(--w)) / 2);
  }

  /* Der Titelkopf der Unterseiten steht auf derselben Kante wie die
     Ueberschriften darunter. */
  .feuille--tete { max-width: var(--max); }
  .feuille--tete .feuille__tete { max-width: none; margin-inline: 0; }
}


/* =========================================================================
   1.4.0 — Taille du texte

   Drei A in steigender Groesse, ueber jedem laengeren Text, rechts an der
   Kante der Textspalte. Sie aendern nur --echelle (oben in :root); was
   daran haengt, ist der Fliesstext und, halb so stark, seine
   Ueberschriften. Kopf, Menue, Hero und Fuss bleiben, wie sie sind.

   Die drei A haben feste Groessen in rem und wachsen nicht mit der Wahl:
   ein Schalter, der unter dem Finger groesser wird, springt weg.
   Die gewaehlte Stufe traegt einen Strich in Garance, nicht nur eine
   dunklere Farbe - Farbe allein ist kein Zustand. */
.lecture { display: none; }

.js .lecture {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0 2px;
  margin-top: 14px;
}

/* Seit 2026-10-03 leiser (Benutzer: « schöner und diskreter »): ein
   Werkzeug am Rand, kein Bedienfeld. Kleinere Buchstaben, dichter
   gesetzt, dünnere Marke; die Fingerfläche bleibt über 24 px. */
.lecture__mot {
  font-family: var(--note);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brume);
  margin-right: 4px;
}

.lecture__choix {
  /* Fläche für den Finger: 30 × 40 px, auch wenn der Buchstabe klein ist. */
  min-width: 30px;
  min-height: 40px;
  padding: 0 4px 5px;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--voix);
  line-height: 1;
  color: var(--brume);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .18s, text-decoration-color .18s;
}

.lecture__choix[data-lecture="1"] { font-size: .82rem; }
.lecture__choix[data-lecture="2"] { font-size: 1rem; }
.lecture__choix[data-lecture="3"] { font-size: 1.2rem; }

.lecture__choix:hover { color: var(--nuit); text-decoration-color: var(--trait); }

.lecture__choix[aria-pressed="true"] {
  color: var(--nuit);
  text-decoration-color: var(--garance);
}

.lecture__choix:focus-visible { outline-offset: -2px; }

/* Startseite: kein Titelkopf, der Schalter steht in einer eigenen Zeile
   ueber der ersten Bahn, auf der Kante der Textspalte darunter. */
.lecture-rang {
  max-width: 1120px;
  margin-inline: auto;
  padding: 0 var(--marge-d) 0 var(--marge-g);
}

.lecture-rang .lecture { max-width: var(--texte); margin-inline: auto; }

@media (min-width: 68em) {
  .lecture-rang { max-width: var(--max); }
  .lecture-rang .lecture { max-width: none; margin-right: 0; }

  /* Auf den Unterseiten neben den Titel, auf seine Grundlinie, statt eine
     eigene Zeile darunter aufzumachen: dort stand er als Insel zwischen
     Titel und Strich. Ohne Schalter (Carte, 404) bleibt die zweite Spalte
     leer und hat keine Breite. */
  .feuille--tete .feuille__tete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 40px;
  }
  .feuille--tete .feuille__tete > .mention { grid-column: 1 / -1; }
  .feuille--tete .feuille__tete > .lecture { margin: 0 0 2px; }
}


/* =========================================================================
   Der Weg zu « L'Esprit SOLARIS » (Startseite, Ende von 01)

   Die Seite, nach der sich die meisten anmelden, hing an einem kursiven
   Link im Fliesstext. Jetzt ein Vers aus ihrer eigenen Litanei, gesetzt
   wie dort (Wiederholung zurueckgenommen), und darunter der Knopf mit dem
   Titel ihrer Seite. Haarstrich wie ueber einer h2, kein --filet: das ist
   ein Absatz im Text, keine Kante zwischen zwei Gruenden.
   ========================================================================= */
.vers-esprit {
  max-width: var(--texte);
  margin: 2.4em auto 0;
  padding-top: 1.6em;
  border-top: 1px solid var(--trait);
}

.vers-esprit__mot {
  font-size: calc(1.36rem * var(--lecture));
  line-height: 1.4;
  margin: 0;
}

/* Derselbe Weg steht schon als Knopf im Hero: hier nur ein Link. */
.vers-esprit__acte { margin: .9em 0 .4em; }

/* Zwei Knoepfe im Hero. Wo sie nicht nebeneinander passen, stehen sie
   untereinander und gleich breit (so breit wie der laengere), sonst sieht
   der Umbruch aus wie ein Versehen. */
@media (max-width: 37.99em) {
  .hero__actes {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    gap: 14px;
  }
  .hero__actes .bouton { text-align: center; }
}


/* =========================================================================
   Das Netz als Liste (« par Départements », « par Pays »)

   Bisher 130 Absätze der Form « SOLARIS 03 : https://t.me/+eBAu… – adresse »:
   der Einladungslink als Text sagt niemandem etwas und brach auf dem
   Telefon mitten in der Zeile. Jetzt aus den Daten des Espace, gebaut wie
   die Sprachenliste: links, wonach man sucht (Nummer und Name), rechts,
   was man antippt. Telegram als Wort, die Mail ausgeschrieben, weil die
   Leute sie abschreiben. Die Zahl der Zellen fuehrt auf die Karte.
   ========================================================================= */
.reseau {
  list-style: none;
  max-width: var(--texte);
  margin: 1.7em auto 2.6em;
  padding: 0;
}

.reseau__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 1.4rem;
  padding: 13px 0;
  border-bottom: 1px solid var(--trait);
  /* Sprungziel (#d-03 von der Karte): nicht unter den Rand des Fensters. */
  scroll-margin-top: 5rem;
}

.reseau__item:first-child { border-top: 1px solid var(--trait); }
.reseau__item:target { background: var(--jour); box-shadow: -14px 0 0 var(--jour), 14px 0 0 var(--jour); }

.reseau__nom {
  min-width: 0;
  font-family: var(--voix);
  font-size: calc(1.12rem * var(--lecture));
  line-height: 1.25;
  /* Bei 200 % Schrift ist ein Name wie „Pyrénées-Orientales" breiter als
     ein Telefon. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.reseau__code {
  display: inline-block;
  min-width: 2.3em;
  font-family: var(--note);
  font-size: .76em;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--garance-f);
}

.reseau__liens {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px 1.15em;
  max-width: 100%;
}

.article .reseau__lien {
  font-family: var(--note);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--garance-f);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 85, 61, .3);
  padding-bottom: 2px;
  transition: border-color .18s;
}

.article .reseau__mail,
.article .reseau__compte {
  font-family: var(--note);
  font-size: .86rem;
  color: var(--nuit);
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 1px;
  transition: border-color .18s;
}

/* Als eigener Block im Text: dann darf die Zeile vor der Zahl umbrechen
   (zwischen Name und Zahl steht kein Leerzeichen). Sonst sind „Luxembourg"
   und „10 cellules" bei großer Schrift ein Wort, breiter als das Telefon. */
.article .reseau__compte {
  display: inline-block;
  margin-left: .8em;
  font-size: .74rem;
  letter-spacing: .03em;
  /* --brume hält auf Papier 5,2:1, auf dem Sand der Bahn nur 4,1:1. */
  color: color-mix(in srgb, var(--brume), var(--nuit) 45%);
  white-space: nowrap;
}

.article .reseau__lien:hover,
.article .reseau__mail:hover,
.article .reseau__compte:hover { border-bottom-color: var(--garance); }

.article h3.reseau__titre {
  max-width: var(--texte);
  margin: 2.6em auto 0;
  font-family: var(--note);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brume), var(--nuit) 45%);
}

.bande--nuit .reseau__item { border-color: var(--trait-c2); }

/* Auf dem Telefon untereinander und linksbuendig: rechtsbuendig gestapelt
   flatterte die Kante, und der Daumen musste jedes Mal die Seite wechseln. */
@media (max-width: 44.99em) {
  .reseau__item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .reseau__liens { justify-content: flex-start; gap: 8px 1.3em; }
}