/* Alliance Synoïa — Stylesheet der statischen Website.

   Die Tokens tragen absichtlich die Namen der WordPress-Presets. Wenn die
   Seite später auf ein Block-Theme umzieht, gehen sie unverändert nach
   theme.json über und alle Abschnitte behalten ihr Aussehen.

   Gestaltung passiert hier, nicht am einzelnen Element im HTML. */

:root {
  /* Farben. Wenige, ruhig, kein Verlauf. */
  /* Drei helle Flächen, nicht eine. Eine einzige beige Fläche über neun
     Seiten wirkt trüb; drei gestufte Töne geben der Seite einen Takt,
     ohne dass irgendwo Weiß auftaucht. Weiß ist ausgeschlossen: Frédéric
     hat strahlende Flächen ausdrücklich als anstrengend benannt.
       Papier  — der Lesegrund, bleibt wie er war
       Sable   — abgesetzter Abschnitt, wärmer und eine Stufe tiefer
       Pierre  — die tiefste helle Fläche, leicht kühl statt gelb.
     Die Kühle ist der eigentliche Griff: sie setzt die beiden warmen
     Töne ab, während eine vierte Beigestufe sie nur verwaschen hätte. */
  --wp--preset--color--base: #F7F3EC;        /* Papier */
  --wp--preset--color--surface: #EFE7D7;     /* Sable: abgesetzter Abschnitt */
  --wp--preset--color--pierre: #E6E4DB;      /* Pierre: tiefste helle Fläche, kühl */
  /* Drei Stufen derselben Tinte statt einer. Die volle Tinte trägt nur
     noch die Fläche des Fußes; gelesen wird eine Spur heller, und
     Überschriften stehen noch eine Stufe darüber. Der Unterschied ist
     klein und genau deshalb richtig: harte Tinte auf warmem Papier
     wirkt wie Schwarz auf Weiß. */
  --wp--preset--color--contrast: #1B2130;    /* Fußfläche, Druck */
  --wp--preset--color--texte: #272E3F;       /* Fließtext */
  --wp--preset--color--titre: #3B4460;       /* Überschriften */
  --wp--preset--color--muted: #5A6070;       /* Nebentext */
  --wp--preset--color--line: #D9D0BF;        /* Trennlinien */
  --wp--preset--color--accent: #24386E;      /* Blau des Wappens, abgedunkelt: Verweise und Knöpfe */
  /* Das Blau der Identität: heller als --accent, damit es dem Wappen
     nahe steht, aber deutlich entsättigt. Das gemessene Wappenblau
     (#0030A8) direkt zu nehmen war ein Fehlgriff — in dieser Größe wirkt
     ein voll gesättigtes Blau grell und billig, nicht edel. Verwendet
     für das griechische Wort, nicht für Verweise und Knöpfe. */
  --wp--preset--color--blason: #35507F;
  --wp--preset--color--accent-dark: #1A2A55;
  --wp--preset--color--gold: #A8873F;        /* Gold des Wappens, sparsam */
  --wp--preset--color--gold-clair: #C9AE76;  /* dasselbe Gold, aufgehellt: nur für Haarlinien */
  --onde: rgba(168, 135, 63, 0.22);          /* Gold, fast unsichtbar: die Resonanzringe */
  --wp--preset--color--feld: #FFFDF9;        /* Formularfelder */

  --wp--preset--font-size--small: 1.0625rem;
  --wp--preset--font-size--large: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  --wp--preset--font-size--x-large: clamp(1.875rem, 1.3rem + 2vw, 2.875rem);
  /* 4,75rem waren 76 px auf dem Desktop: die Überschrift stand dann als
     Block über dem Text und erschlug ihn. 3,8rem sind 61 px — immer noch
     die lauteste Stimme der Seite, aber sie spricht, statt zu rufen. */
  --wp--preset--font-size--xx-large: clamp(2.25rem, 1.4rem + 2.7vw, 3.8rem);

  --wp--preset--spacing--30: 1rem;
  --wp--preset--spacing--40: 1.5rem;
  --wp--preset--spacing--50: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --wp--preset--spacing--60: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  --wp--preset--spacing--70: clamp(3rem, 2.2rem + 3.4vw, 5.5rem);

  /* EINE linke Kante für die ganze Seite. Kopf, Titel, Fließtext,
     Zwischentitel, Raster und Fuß beginnen alle bei derselben x-Position.
     Das ist die Regel, an der sich alles andere ausrichtet — zwei Kanten
     im Abstand von 200 px sehen nicht nach Rhythmus aus, sondern nach
     Unfall.

     Die Lesespalte ist schmaler als der Satzspiegel: 45rem sind bei
     23 px etwa 73 Zeichen je Zeile, gemessen (EB Garamond bringt 8,58 px
     je Zeichen). 50rem wären 83 Zeichen, zu lang. Rechts bleibt dadurch
     Luft — die ist gewollt und ruhig, solange sie immer auf derselben
     Seite liegt. Der Satzspiegel ist auf 70rem gesetzt: schmal genug,
     dass rechts nur rund 320 px Luft bleiben statt 420, und breit genug,
     dass Kopf und Fuß nicht gequetscht werden. 66rem waren zu eng — dort
     brach die Wortmarke um und die Navigation klebte an ihr.

     Nicht zentrieren. Zentrierter Lesetext neben linksbündigen Rastern
     erzeugt genau den Versatz, den diese Regel verhindert.

     Ab 1200 px füllt eine Randspalte rechts die Luft (.avec-marge):
     Inhaltsverzeichnis, Download. Der Lesetext bleibt bei 45rem, weil
     längere Zeilen schlechter lesbar sind; die Fläche wird mit Inhalt
     gefüllt, nicht mit Zeilenlänge. */
  --wp--style--global--content-size: 45rem;
  --wp--style--global--wide-size: 70rem;

  /* Schriften. Fallback ist Pflicht: ohne ihn landet ein fehlendes
     Zeichen bei Times New Roman. */
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Ysabeau Office", "Segoe UI", system-ui, sans-serif;

  /* Feinabstimmung der Schriften. Lesbarkeit geht hier vor Eleganz:
     die Seite soll ohne Brille lesbar sein, auf jedem Gerät.
     EB Garamond hat eine kleine x-Höhe, deshalb steht der Fließtext bei
     23 px statt der üblichen 18. Nichts auf der Seite ist kleiner als
     15 px, Navigation und Formularbeschriftungen stehen bei 17 px.
     Wer diese Werte verkleinern will: es gibt keinen guten Grund. */
  --body-size: 1.4375rem;
  --body-weight: 400;
  --body-lh: 1.6;
  --head-weight: 450;
  --head-lh: 1.1;
  --head-track: -0.005em;
  --wordmark-weight: 500;
  --sans-weight: 500;
  --sans-weight-strong: 600;
  --caps-track: 0.14em;
  --caps-size: 0.9375rem;
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  /* Das Papier ist oben eine Spur heller als unten. Kein Verlauf im
     dekorativen Sinn — man sieht ihn nicht bewusst, man merkt nur, dass
     die Fläche beleuchtet wirkt statt bedruckt. Das ist die leiseste Art,
     „lumière" zu sagen, die seine Texte an mehreren Stellen aufrufen. */
  background-color: var(--wp--preset--color--base);
  background-image: radial-gradient(115% 55% at 50% -12%, #FFFDF8 0%, rgba(255, 253, 248, 0) 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--wp--preset--color--texte);
  font-family: var(--serif);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
figure { margin: 0; }
/* Was site.js mit hidden ausblendet, bleibt aus, auch wenn eine Klasse
   wie .bouton ein eigenes display setzt (sonst gewönne sie). */
[hidden] { display: none !important; }

/* Überschriften stehen eine Stufe heller als der Fließtext. In dieser
   Größe wirkt die volle Texttinte auf dem Papier wie Schwarz auf Weiß —
   hart und aus dem Ton gefallen. Große Schrift braucht weniger Kontrast,
   um gelesen zu werden: 9:1 statt 14:1, immer noch weit über AAA für
   große Schrift (4,5:1). Der Fließtext behält die volle Tinte. */
h1, h2, h3, h4 {
  color: var(--wp--preset--color--titre);
  font-family: var(--serif);
  font-weight: var(--head-weight);
  line-height: var(--head-lh);
  letter-spacing: var(--head-track);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--wp--preset--font-size--xx-large); }
h2 { font-size: var(--wp--preset--font-size--x-large); }
h3 { font-size: var(--wp--preset--font-size--large); }
h4 { font-size: calc(var(--body-size) * 1.05); font-weight: 600; letter-spacing: 0; }

:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

.saut {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 50;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-family: var(--sans);
  font-size: var(--wp--preset--font-size--small);
  padding: 0.7rem 1rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.saut:focus { top: 0.5rem; }

/* ---------- Raster ---------- */

.wrap {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.lecture { max-width: var(--wp--style--global--content-size); }
.lecture p, .chapeau, .principe p, .vocation p, .faq__reponse p, .bloc-texte p {
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}
.section { padding-block: var(--wp--preset--spacing--70); }
.section--serre { padding-block: var(--wp--preset--spacing--60); }
.section--surface { background: var(--wp--preset--color--surface); }
/* Pierre trägt den Beitrittsblock am Seitenende und die beiden
   Formularseiten. Dadurch wird die Seite nach unten hin eine Spur tiefer
   und läuft nicht abrupt in den dunklen Fuß. */
.section--pierre { background: var(--wp--preset--color--pierre); }

/* Zwischenüberschriften beginnen an der Seitenkante wie alles andere.
   Der Titel darf über die volle Breite laufen, der erklärende Satz
   darunter bleibt auf der Lesespalte. */
.section__tete { margin-bottom: var(--wp--preset--spacing--50); }
.section__tete h2 { max-width: calc(var(--wp--style--global--content-size) * 1.25); }
.section__tete .label { margin-bottom: var(--wp--preset--spacing--30); }
.section__tete p { margin-top: var(--wp--preset--spacing--30); max-width: var(--wp--style--global--content-size); }

.label {
  font-family: var(--sans);
  font-size: var(--caps-size);
  font-weight: var(--sans-weight);
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--wp--preset--color--muted);
  margin: 0;
}

.filet { width: 3rem; height: 1px; border: 0; margin: 0; background: var(--wp--preset--color--gold); }

/* ---------- Schaltflächen ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--sans-weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 1em 1.6em;
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 2px;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bouton:hover { background: var(--wp--preset--color--accent-dark); border-color: var(--wp--preset--color--accent-dark); }
.bouton--contour { background: transparent; color: var(--wp--preset--color--accent); }
.bouton--contour:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }

.lien-fleche {
  font-family: var(--sans);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--sans-weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp--preset--color--accent);
}
.lien-fleche::after { content: "\00a0\2192"; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin: var(--wp--preset--spacing--50) 0 0; }

/* ---------- Kopf ---------- */

/* Der Kopf muss in den Satzspiegel passen, sonst staucht Flexbox das
   erste nachgiebige Element — und das ist die Wortmarke. Genau das ist
   passiert: „Alliance Synoïa" brach zweizeilig um und klebte an der
   Navigation. Drei Vorkehrungen dagegen:
   1. die Wortmarke bricht nie um und schrumpft nie (nowrap, flex-shrink 0)
   2. zwischen Marke und Navigation liegt ein echter Abstand, kein Rest
   3. die Navigation ist kompakter gesetzt als der Fließtext */
.site-header {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--50);
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  margin-right: auto;
  flex: 0 0 auto;
}
/* Seit dem 21.09.2026 steht hier kein Wappen mehr — es ist nicht fertig,
   und ein unfertiges Zeichen auf jeder Seite ist schlechter als keins.
   Damit trägt die Marke allein die Schrift, und die muss das können:

   - **größer.** 17 px neben einem 56-px-Wappen war ein Beiwerk; ohne das
     Wappen wäre es eine Fußnote. Die Staffel läuft mit dem Fenster von
     20 auf 26 px, damit sie auf dem Telefon nicht schrumpft und auf dem
     Schirm nicht schreit.
   - **etwas enger gesperrt.** Sperrung gleicht kleine Grade aus; bei
     26 px wären 0,16em Luft zu viel und das Wort zerfiele in Buchstaben.
     0,13em hält es zusammen.
   - **Wortabstand eigens gesetzt.** Bei gesperrten Versalien verschluckt
     die Sperrung den Wortzwischenraum, und „ALLIANCESYNOÏA" rückt
     zusammen. 0,12em trennt die beiden Wörter wieder.
   - **Überschriftentinte statt Fließtexttinte.** Die Wortmarke ist die
     oberste Überschrift der Seite, nicht ihr erster Satz. */
.marque__nom {
  font-family: var(--serif);
  font-weight: var(--wordmark-weight);
  font-size: clamp(1.25rem, 1.05rem + 0.62vw, 1.625rem);
  letter-spacing: 0.13em;
  word-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--wp--preset--color--titre);
}
.nav { flex: 0 1 auto; }
/* Fester Abstand, nicht an vw gekoppelt: der Satzspiegel steht ab
   1120 px still, ein mit dem Fenster wachsender Abstand würde die
   Navigation dort gegen die Wortmarke schieben. */
.nav ul { display: flex; gap: 1.45rem; list-style: none; margin: 0; padding: 0; }
/* 1.125rem statt 1rem: die Navigation war kleiner gesetzt als alles
   andere und wurde dadurch schwer lesbar. Möglich wurde das erst,
   nachdem „Concept Synoïa" und „Alliance Synoïa" im Menü zu „Concept"
   und „Alliance" gekürzt wurden — der Zusatz stand ohnehin zweimal im
   Kopf, einmal in der Wortmarke daneben. Seit dem 03.10.2026 heißt der
   Punkt auf Frédérics Wunsch wieder „Alliance Synoïa"; gemessen passt
   der Kopf trotzdem ab 900 px einzeilig (engste Stelle 920 px: 37 px
   zwischen Wortmarke und Navigation). */
.nav a {
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: var(--sans-weight);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.4rem;
  background: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.25s ease;
}
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 1px; }


.nav-bascule { display: none; }

/* ---------- Einstieg ---------- */

/* Text und Bild beginnen auf derselben Höhe. Mittig ausgerichtet stand
   das Bild 121 px tiefer als die Überschrift — auf einem breiten Schirm
   sieht das aus, als wäre es verrutscht, nicht als wäre es gesetzt.
   Oben bündig ist die einzige Ausrichtung, die bei jeder Textlänge
   vorhersehbar bleibt. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--wp--preset--spacing--60);
  align-items: start;
  padding-block: var(--wp--preset--spacing--70);
}
.hero .label { margin-bottom: var(--wp--preset--spacing--40); }
/* Die kleinere Überschrift braucht den Abstand, den ihre Größe vorher
   selbst hergestellt hat, sonst klebt der Vorspann an ihr. */
.hero h1 { margin-bottom: var(--wp--preset--spacing--50); }
.chapeau { font-size: calc(var(--body-size) * 1.18); line-height: 1.5; max-width: var(--wp--style--global--content-size); }
/* Bildausschnitt: object-fit schneidet mittig zu. Wo das den falschen Teil
   trifft, wird der Ausschnitt verschoben — hier im Stylesheet, eine Zeile
   je Bild, adressiert über den Dateinamen.
   Erster Wert links/rechts, zweiter oben/unten, 0% ist oben bzw. links.
   Nicht als style="" ans Bild schreiben: die Content-Security-Policy
   erlaubt keine Inline-Styles (siehe memory/SICHERHEIT.md). */
.hero__image img, .bandeau img, .duo figure img {
  object-position: var(--ausschnitt, center);
}
.hero__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Hero-Bild ohne Rahmen. Auf dem Desktop füllt es die Höhe des Textblocks:
   oben bündig mit dem Titel, unten mit dem Vorspann, damit beide Spalten
   gemeinsam abschließen. Der Passepartout war für ein Handyfoto gedacht,
   das Halt brauchte; ein ruhiges Motiv trägt sich selbst. */
@media (min-width: 900.02px) {
  .hero { align-items: stretch; }
  .hero__image img { height: 100%; min-height: 24rem; aspect-ratio: auto; }
}
/* Unter dem Text, auf schmalen Bildschirmen: quer, sonst wird es höher als der Bildschirm. */
@media (max-width: 900px) {
  .hero__image img { aspect-ratio: 4 / 3; }
}

figcaption {
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--muted);
  margin-top: 0.6rem;
}

/* Kopf einer Unterseite: ohne Bild, an der Seitenkante, nicht zentriert.
   Ein zentrierter Block direkt unter einer linksbündigen Navigation ist
   das Erste, was man sieht, und das Erste, was schief aussieht. */
.page-tete { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }
.page-tete > * { max-width: var(--wp--style--global--content-size); }
/* Titel und Vorspann dürfen breiter laufen als der Lesetext: der Titel
   ist kurz, der Vorspann steht größer und verträgt eine längere Zeile. */
.page-tete > h1 { max-width: none; }
.page-tete > .chapeau { max-width: 52rem; }
@media (min-width: 75rem) {
  .page-tete > .chapeau { font-size: calc(var(--body-size) * 1.3); max-width: 56rem; }
}
.page-tete > p:last-child { margin-bottom: 0; }
.page-tete .label { margin-bottom: var(--wp--preset--spacing--30); }
.page-tete .chapeau { margin-top: var(--wp--preset--spacing--40); }
/* Kopf und erster Abschnitt gehören zusammen: ihre Abstände würden sich
   sonst addieren und einen leeren Streifen erzeugen. */
.page-tete + .section--serre { padding-block-start: var(--wp--preset--spacing--40); }

/* ---------- Inhaltsverzeichnis der langen Seiten ---------- */

/* Concept und Alliance sind lange Texte — 630 und 1470 Wörter, und kein
   Wort davon dürfen wir kürzen. Was gegen die Länge hilft, ist nicht
   engerer Satz, sondern die Möglichkeit, gezielt hinzuspringen. Auf dem
   Desktop steht die Liste in der Randspalte neben dem ersten Abschnitt,
   darunter über dem Text. Ohne JavaScript, im WordPress-Umzug ein
   gewöhnlicher Block. */
.sommaire {
  padding-block: 0 var(--wp--preset--spacing--50);
}
.sommaire > * { max-width: var(--wp--style--global--content-size); }
.sommaire .label { margin-bottom: var(--wp--preset--spacing--30); }
.sommaire ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sommaire;
  border-top: 1px solid var(--wp--preset--color--line);
}
.sommaire li { counter-increment: sommaire; border-bottom: 1px solid var(--wp--preset--color--line); }
.sommaire a {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem;
  padding-block: 0.7rem;
  font-family: var(--sans);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--sans-weight);
  text-decoration: none;
  color: var(--wp--preset--color--texte);
}
.sommaire a::before {
  content: counter(sommaire, decimal-leading-zero);
  font-variant-numeric: lining-nums;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--gold);
}
.sommaire a:hover { color: var(--wp--preset--color--accent); }
/* ---------- Randspalte ---------- */

/* Unter 1200 px steht die Randspalte einfach im Fluss. Darüber rückt sie
   rechts neben den Lesetext und läuft mit, solange ihr Abschnitt sichtbar
   ist. Sie klebt nur innerhalb ihres Abschnitts: über die ganze Seite
   würde sie über Bildbänder und Raster fahren. */
.avec-marge > .sommaire { padding-bottom: var(--wp--preset--spacing--50); }
.avec-marge > .telecharger__bloc { margin-top: var(--wp--preset--spacing--60); }
@media (min-width: 75rem) {
  .avec-marge {
    display: grid;
    grid-template-columns: minmax(0, var(--wp--style--global--content-size)) minmax(0, 1fr);
    column-gap: var(--wp--preset--spacing--60);
    align-items: start;
  }
  .avec-marge > * { grid-column: 1; }
  .avec-marge > .marge {
    grid-column: 2;
    grid-row: 1 / span 30;
    position: sticky;
    top: var(--wp--preset--spacing--50);
    margin-top: 0;
    padding-bottom: 0;
  }
  .avec-marge > .marge > * { max-width: none; }
}

/* Ein Sprungziel darf nicht unter dem Kopf der Seite landen. */
:target { scroll-margin-top: var(--wp--preset--spacing--50); }

/* ---------- Die Wappentafel ---------- */

/* Nur auf der Blason-Seite. Das Wappen ist dort nicht Marke, sondern
   Gegenstand: man liest von unten nach oben, und das Bild muss dabei
   sichtbar bleiben. Ab 1200 px übernimmt .marge das — die Tafel läuft
   in der Randspalte mit, solange der Abschnitt steht.

   Darunter steht sie im Fluss über dem Text. Ohne Deckel wäre sie dort
   fast einen ganzen Bildschirm hoch (Seitenverhältnis 2:3): man scrollte
   an einem Wappen vorbei, um zu lesen, was darauf steht. 20rem ist die
   Breite, bei der auf dem Telefon Text und Bild zusammen in den Blick
   passen. Linksbündig, wie alles andere — kein margin-inline: auto. */
.plaque { margin: 0 0 var(--wp--preset--spacing--50); }
.plaque img {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  /* Das Bild bringt seinen eigenen dunklen Grund mit. Eine Haarlinie im
     Gold fasst ihn, damit er auf dem Papier nicht als ausgefranstes
     Rechteck steht, sondern als Tafel. */
  border: 1px solid var(--wp--preset--color--gold-clair);
}
@media (min-width: 75rem) {
  .plaque img { max-width: none; }
}

/* Jeder Symbolabsatz setzt neu an. Der Abstand ist die einzige
   Gliederung: eigene Zwischentitel wären erfunden, seine Sätze tragen
   ihren Gegenstand schon im ersten Wort. */
.symbole { margin-top: var(--wp--preset--spacing--50); }
.symbole b { color: var(--wp--preset--color--titre); font-weight: var(--head-weight); }

/* ---------- Etymologie ---------- */

/* Eine Atempause, keine Sektion. Zwischen zwei Textstrecken steht ein
   einziges Wort, das der Verein sich selbst gegeben hat, und die Seite
   hält kurz an.

   Drei Anläufe liegen dahinter, alle verworfen: ein bildschirmhohes Band
   mit Lichtkreis und Ringen, dann dasselbe kompakter, dann flach
   gedrückte Ringe hinter dem Wort. Der gemeinsame Fehler war, die Würde
   des Wortes aus einer Grafik holen zu wollen. In einem gut gesetzten
   Buch macht das die Typografie: Größe, Weißraum, eine Haarlinie. Mehr
   ist hier nicht, und weniger ginge auch nicht.

   Kein Farbfeld. Die graue Fläche (Pierre) hat das Wort nicht gehoben,
   sondern eingesperrt — eine Kachel im Lesefluss, dazu kühl auf warmem
   Papier. Die Pause entsteht jetzt durch Abstand: das Band hat mehr Luft
   als jeder andere Abschnitt und trotzdem weniger Höhe als vorher.

   Kein Blau. Das Wort steht in derselben Tinte wie die Überschriften,
   nur größer und weiter gesperrt — wie ein griechisches Zitat im Buch
   gesetzt würde. Das Wappenblau bleibt dafür den Verweisen und Knöpfen,
   die Goldlinie bleibt das einzige Farbsignal. */
.etymologie {
  padding-block: clamp(3.5rem, 2.4rem + 4vw, 6.5rem);
}
.etymologie__inner {
  display: grid;
  justify-items: start;
  text-align: left;
  gap: var(--wp--preset--spacing--40);
}
/* Die Beschriftung kündigt an, sie erklärt nicht: weiter gesperrt als
   sonst und im Gold, damit sie zur Haarlinie darunter gehört. */
.etymologie .label {
  letter-spacing: 0.24em;
  color: var(--wp--preset--color--gold);
}
.grec {
  font-family: var(--serif);
  font-weight: var(--head-weight);
  /* Vorher bis 8,5rem. In dieser Größe war das Wort nicht feierlich,
     sondern laut, und es zwang die Seite in ein eigenes Kapitel. */
  font-size: clamp(3rem, 1.9rem + 4.6vw, 5.25rem);
  line-height: 1;
  /* Griechische Minuskeln stehen von Haus aus eng. Gesperrt bekommen sie
     etwas Inschriftliches, und das Wort liest sich langsamer — was an
     dieser Stelle genau der Zweck ist. */
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--titre);
  margin: 0;
}
.etymologie .filet { width: 3.5rem; }
/* Die Herleitung tritt zurück, aber sie verschwindet nicht: eine Stufe
   kleiner als der Fließtext, in voller Tinte. Mit Nebentextfarbe wurde
   die ganze Stelle blass. */
.etymologie__texte {
  font-size: calc(var(--body-size) * 0.95);
  max-width: 34em;
  margin: 0;
}

/* ---------- Prinzipien ---------- */

.principes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.principe {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: 1rem;
  border-top: 1px solid var(--wp--preset--color--line);
  padding-top: var(--wp--preset--spacing--40);
}
.principe > * { grid-column: 2; }
.principe__num {
  grid-column: 1;
  grid-row: 1 / span 4;
  font-family: var(--serif);
  font-weight: var(--head-weight);
  font-size: 2.75rem;
  line-height: 0.9;
  font-variant-numeric: oldstyle-nums;
  color: var(--wp--preset--color--gold);
}
.principe h3 { margin-bottom: 0.75rem; }
.principe__sous {
  display: block;
  margin-top: 0.3rem;
  font-size: calc(var(--body-size) * 0.9);
  font-style: italic;
  font-weight: var(--body-weight);
  letter-spacing: 0;
  color: var(--wp--preset--color--muted);
}
.principe p { margin: 0 0 0.7em; }
.principe p:last-child { margin-bottom: 0; }
.mots-cles { font-family: var(--sans); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); line-height: 1.5; }
.principe .mots-cles { margin-top: 1rem; }
.mots-cles .label { display: block; margin-bottom: 0.3rem; }

/* ---------- Lesetext ---------- */

.article h2 { margin-bottom: var(--wp--preset--spacing--40); }
.article h2:not(:first-child) { margin-top: var(--wp--preset--spacing--60); }
.article h3 { margin: var(--wp--preset--spacing--50) 0 0.75rem; }
.article h4 { margin: var(--wp--preset--spacing--40) 0 0.5rem; }

.citation {
  margin: var(--wp--preset--spacing--50) 0;
  padding: 0.25rem 0 0.25rem var(--wp--preset--spacing--40);
  border-left: 2px solid var(--wp--preset--color--gold);
}
.citation p {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--wp--preset--font-size--x-large) * 0.78);
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}

.liste { margin: 0 0 1em; padding-left: 1.2em; }
.liste li { padding-left: 0.3em; margin-bottom: 0.4em; }
.liste li::marker { color: var(--wp--preset--color--gold); }
.liste--aere li { margin-bottom: 1em; }
.liste--aere li p { margin: 0.5em 0 0; }

/* ---------- Bildband ---------- */

/* Die Oberkante des Bandes fällt leicht nach links ab — der Zuschnitt und
   seine Begründung stehen unten im Abschnitt „Bilder öffnen sich". Um die
   halbe Schräge wächst die Höhe mit, denn im Mittel nimmt der Zuschnitt
   oben genau so viel weg; sonst wirkt das Band schmaler als vorher.

   Das Maß **beginnt erst bei 800 px** und wächst dann schneller als das
   Fenster: 0 auf dem Telefon und dem kleinen Tablet, 29 px auf 1440 px,
   höchstens 48 px. Zwei Anläufe waren nötig. Ein über alle Breiten
   gleicher Winkel war falsch, weil das Band auf dem Telefon nur halb so
   hoch ist — dieselbe Neigung frisst dort den doppelten Anteil seiner
   Fläche. Aber auch eine bloß kleinere Neigung blieb falsch: der Keil,
   den sie oben links frei legt, ist auf dem schmalen Schirm breiter als
   das Band hoch ist, und ein heller Streifen über einem Bild sieht nach
   Fehler aus, nicht nach Absicht. Die Schräge braucht eine Fläche, die
   sie tragen kann. Unter 800 px steht das Band deshalb rechtwinklig —
   dort trägt die Öffnung beim Hereinscrollen die Bewegung allein. */
.bandeau { --pente: clamp(0px, 4.5vw - 2.25rem, 3rem); }
.bandeau img { width: 100%; height: calc(clamp(10rem, 22vw, 22rem) + var(--pente) / 2); object-fit: cover; }
.bandeau figcaption { margin-top: 0.5rem; }
.bandeau .wrap { padding-top: 0.2rem; }

/* ---------- Berufungen ---------- */

.vocations { list-style: none; margin: 0; padding: 0; }
.vocation {
  display: grid;
  grid-template-columns: minmax(3rem, 8rem) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--line);
  padding-block: var(--wp--preset--spacing--50);
}
.vocation:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.vocation__num {
  font-family: var(--serif);
  font-weight: var(--head-weight);
  font-size: calc(var(--wp--preset--font-size--xx-large) * 0.8);
  line-height: 0.85;
  font-variant-numeric: oldstyle-nums;
  color: var(--wp--preset--color--gold);
}
.vocation__corps { max-width: var(--wp--style--global--content-size); }
.vocation h3 { margin-bottom: 1rem; }
.vocation p:last-child { margin-bottom: 0; }

/* ---------- Kartenreihe ---------- */

.cartes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50);
}
/* Vier kurze Karten mitten im Lesetext: zwei mal zwei auf der
   Lesespalte, damit der Textfluss nicht plötzlich breiter wird. */
.cartes--serre {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--wp--style--global--content-size);
}
.carte { display: grid; align-content: start; gap: 0.85rem; border-top: 1px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--40); }
.carte p { margin: 0; }
.carte h3 { font-size: calc(var(--wp--preset--font-size--large) * 0.92); }
/* Karten, die ganze Sätze tragen statt kurzer Stichworte (Collaborations:
   seine Sätze, 30 bis 55 Wörter). In drei Spalten liefen sie 6 gegen 13
   Zeilen zu je 35 Zeichen. Als Zeilen: Beschriftung links, Satz rechts in
   Lesebreite — derselbe Aufbau wie die Berufungen auf der Alliance-Seite. */
.cartes--lignes { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--50); }
.cartes--lignes .carte {
  grid-template-columns: minmax(0, 16rem) minmax(0, var(--wp--style--global--content-size));
  column-gap: var(--wp--preset--spacing--60);
}

/* ---------- FAQ ---------- */

/* Frage, Antwort und Gruppentitel: eine Breite, eine Kante. */
.faq { border-bottom: 1px solid var(--wp--preset--color--line); max-width: var(--wp--style--global--content-size); }
.page-faq main h2.label { max-width: var(--wp--style--global--content-size); }
.faq details { border-top: 1px solid var(--wp--preset--color--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  padding-block: 1.35rem;
  font-family: var(--serif);
  font-weight: var(--head-weight);
  font-size: calc(var(--wp--preset--font-size--large) * 0.92);
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.5em;
  line-height: 1;
  color: var(--wp--preset--color--gold);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
/* Die Frage darf über die ganze Breite des Blocks laufen, die Antwort
   nicht: 54rem sind bei 23 px rund 100 Zeichen je Zeile, und bei so einer
   Zeile findet das Auge den nächsten Anfang nicht mehr. */
.faq__reponse { padding-bottom: 1.5rem; max-width: var(--wp--style--global--content-size); }
.faq__reponse p:last-child { margin-bottom: 0; }

/* ---------- Beitritt ---------- */

/* Der Block hieß bis zum 24.09.2026 `.adhesion`. Er war damit für jeden
   Besucher mit Werbeblocker unsichtbar: EasyList enthält die Regel
   `##.adhesion:not(body)`, weil „adhesion unit" in der Werbebranche das
   klebende Banner am unteren Bildschirmrand heißt. Betroffen waren das
   Beitrittsformular, das Kontaktformular und die beiden Adhésion-Blöcke
   auf Startseite und FAQ — die vier Stellen, an denen die Seite um eine
   Handlung bittet. Aufgefallen ist es erst nach dem Livegang, in Brave.
   Klassennamen deshalb nie nach dem Inhalt benennen, wenn das Wort auch
   ein Werbeformat sein könnte: `adhesion`, `banner`, `sponsor`, `promo`,
   `newsletter`, `social`. Gegenprobe: `pruefen.py --werbeblocker`. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--wp--preset--spacing--60);
  align-items: start;
}
.duo h2 { margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40); }
/* Auf Contact schließt ein Bild die linke Spalte ab. Es stand vorher als
   Band über die volle Breite zwischen Vorspann und Formular — und damit
   genau im Weg: wer schreiben will, musste erst daran vorbei. Ein Bild vor
   einem Formular ist eine Schranke, kein Empfang. In der Spalte steht es
   neben dem Formular statt davor, füllt die Fläche, die die noch fehlenden
   Kontaktangaben frei lassen, und hält den Weg zum Schreibfeld frei. */
.illustration { margin: 0; }
.illustration img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* Im Markup steht die Figur **hinter** dem Formular. Auf dem Telefon, wo
   alles untereinander läuft, ist das die richtige Reihenfolge: erst
   schreiben können, dann das Bild. Auf dem Desktop holt das Raster sie in
   die linke Spalte unter die Angaben — dort füllt sie die Fläche, die die
   noch fehlenden Kontaktdaten frei lassen, und steht neben dem Formular
   statt davor. */
@media (min-width: 900.02px) {
  .page-contact .duo {
    grid-template-areas:
      "texte formulaire"
      "image formulaire";
    align-content: start;
  }
  .page-contact .duo__texte { grid-area: texte; }
  .page-contact .formulaire { grid-area: formulaire; }
  .page-contact .illustration { grid-area: image; align-self: start; }
}
.montant { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 var(--wp--preset--spacing--40); }
.montant__chiffre {
  font-family: var(--serif);
  font-weight: var(--head-weight);
  font-size: calc(var(--wp--preset--font-size--xx-large) * 1.2);
  line-height: 1;
  font-variant-numeric: lining-nums;
  /* Im Knopfblau sah die 17 aus wie ein Preisschild. Im Gold ist sie
     dieselbe Ziffer wie die der drei Berufungen: eine Zahl, die zählt,
     nicht eine, die kassiert. */
  color: var(--wp--preset--color--gold);
}
.montant__unite {
  font-family: var(--sans);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--sans-weight);
  letter-spacing: 0.04em;
  line-height: 1.35;
  max-width: 12em;
  color: var(--wp--preset--color--muted);
}

.faits { list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; font-family: var(--sans); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.faits li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding-block: 0.7rem; border-top: 1px solid var(--wp--preset--color--line); }
.faits dt, .faits__cle { color: var(--wp--preset--color--muted); letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--caps-size); }

/* ---------- Formular ---------- */

/* Auf diesen beiden Seiten wird der Leser tätig: er schreibt uns oder er
   tritt bei. Das ist kein Vorgang, das ist eine Entscheidung. Vorher stand
   dafür ein weißer Kasten mit grauem Rahmen auf kühlem Grau — ein Antrag,
   kein Willkommen. Drei Dinge ändern das, alle aus der vorhandenen Palette:

   Der Grund ist **Sable** statt Pierre. Pierre ist die kühlste helle
   Fläche der Seite; auf einer Seite, die um Zugehörigkeit bittet, war
   genau das falsch.

   Die Karte trägt oben eine **Goldkante**, 3 px. Dasselbe Gold wie die
   Haarlinien, nur einmal breit: es macht aus dem Kasten ein Blatt, das
   jemand hingelegt hat. Ihr Rand ist warmes Beige statt Grau.

   Die Felder sind **Papierfelder**: heller als die Karte, warm umrandet,
   mit sichtbarem Fokus im Wappenblau. Ein Feld, das auf Berührung
   antwortet, fühlt sich an wie ein Gegenüber; eines, das nichts tut, wie
   ein Formular auf dem Amt. */

.formulaire {
  display: grid;
  gap: 1.35rem;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-top: 3px solid var(--wp--preset--color--gold);
}
@media (min-width: 900.02px) {
  .formulaire { padding: var(--wp--preset--spacing--60); }
}
/* Die Überschrift der Karte gehört zur Goldkante darüber: dasselbe Gold,
   dieselbe weite Sperrung wie bei der Etymologie. */
.formulaire > .label {
  color: var(--wp--preset--color--gold);
  letter-spacing: 0.22em;
  margin-bottom: 0.25rem;
}
.formulaire label {
  display: grid;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: var(--sans-weight-strong);
  letter-spacing: 0.02em;
}
.champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; }
@media (max-width: 480px) {
  .champs-2 { grid-template-columns: minmax(0, 1fr); }
}
.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire input[type="date"],
.formulaire textarea,
.formulaire select {
  width: 100%;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--wp--preset--color--texte);
  background: var(--wp--preset--color--feld);
  /* #857E70 war ein neutrales Grau und damit der kälteste Strich auf der
     ganzen Seite. Dieser Ton ist dieselbe Helligkeit, nur warm. */
  border: 1px solid #BFB29A;
  border-radius: 3px;
  padding: 0.8rem 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.formulaire input:hover,
.formulaire textarea:hover,
.formulaire select:hover { border-color: #9C8E74; }
/* Der Fokus ist hier eigens gesetzt, weil der allgemeine Umriss der Seite
   (outline mit Abstand) an einem Feld wie ein zweiter Rahmen aussieht.
   Stattdessen färbt sich der Rand und bekommt einen weichen Hof. */
.formulaire input:focus-visible,
.formulaire textarea:focus-visible,
.formulaire select:focus-visible {
  outline: none;
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px rgba(53, 80, 127, 0.2);
}
.formulaire textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.formulaire .case {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--wp--preset--color--muted);
}
.case input { width: 1.1rem; height: 1.1rem; margin: 0.1rem 0 0; accent-color: var(--wp--preset--color--accent); }
/* Der Knopf steht auf dem Telefon über die ganze Breite: mit dem Daumen
   trifft man eine Fläche, keinen Punkt. */
.formulaire .bouton { justify-self: stretch; margin-top: 0.25rem; }
@media (min-width: 600.02px) {
  .formulaire .bouton { justify-self: start; }
}
.formulaire__note { font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--wp--preset--color--muted); margin: 0; }

/* Gruppen im Beitrittsformular (seit 23.09.2026, nach Frédérics Vorlage):
   Auswahlfelder, offene Fragen, Einwilligung. Der Rahmen des Browsers
   fällt weg — die Karte ist schon der Rahmen; die Gruppe hält nur
   zusammen, was zusammengehört, und die Legende steht wie ein Label. */
.formulaire .choix { display: grid; gap: 0.2rem; margin: 0; padding: 0; border: 0; min-width: 0; }
/* Ein Auswahlfeld war 25 px hoch — mit dem Daumen trifft man das nicht.
   Der Innenabstand macht die ganze Zeile zur Trefferfläche (44 px, das
   Mindestmaß der WCAG), ohne die linke Kante zu verschieben. Der
   Zeilenabstand der Gruppe ist im Gegenzug kleiner: der Weißraum wandert
   von zwischen den Zeilen in die Zeilen hinein. */
.formulaire .choix .case { padding-block: 0.6rem; }
.formulaire .choix legend {
  padding: 0;
  margin-bottom: 0.7rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: var(--sans-weight-strong);
  letter-spacing: 0.02em;
}
.formulaire .choix .case { color: var(--wp--preset--color--texte); }
.formulaire .choix--ligne { grid-template-columns: repeat(2, max-content); column-gap: 2rem; }
.formulaire .choix__autre { font-weight: 400; color: var(--wp--preset--color--muted); }
/* Die offenen Fragen sind länger als ein Label; sie laufen im Lesegewicht. */
.formulaire .choix label:has(textarea) { font-weight: 400; line-height: 1.45; }

/* Der Honigtopf. Nicht display:none und nicht hidden: manche Skripte
   überspringen, was offensichtlich versteckt ist. Aus dem Sichtfeld
   geschoben fällt er ihnen nicht auf, und für Bildschirmleser ist er über
   aria-hidden und tabindex="-1" im Markup erledigt. */
.leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

/* ---------- Statuten ---------- */

/* Seit dem 03.10.2026 liest man im Beitrittsformular die Statuten des
   gewählten Vereins, ohne die Seite zu verlassen: ein Verweis über dem
   Häkchen öffnet sie in einem Dialog (adhesion.html, site.js).

   Seit dem 08.10.2026 ist derselbe Verweis zugleich ein gewöhnlicher
   Verweis auf eine eigene Seite (statuts-suisse.html, statuts-france.html),
   gesetzt wie jede Textseite. Dorthin führt er, wenn der Dialog nicht
   aufgeht: ohne JavaScript, bei einem Fehler, oder wenn site.js merkt,
   dass der Dialog nicht zu sehen ist. Darunter steht für alle übrigen
   Fälle « La fenêtre ne s’ouvre pas ? » (.statuts-secours).

   Zum Lesen, nicht zum Mitnehmen: Frédéric will kein PDF, das man
   herunterlädt und weiterreicht. Deshalb keine Textauswahl, kein
   Kontextmenü „Kopieren" auf dem Telefon, nichts im Druck. Das hält ab,
   es schützt nicht — der Text steht im Quelltext der Seite.

   Gestalt des Dialogs: dieselbe Karte wie das Formular (Papier, Goldkante
   oben), auf dem Telefon über den ganzen Schirm. Kein Einblenden, kein
   Weichzeichner hinter dem Fenster: die Seite hat ihre drei Griffe
   (CLAUDE.md), ein Dialog bekommt keinen vierten. Der Text scrollt in
   sich; der Knopf „J’accepte ces statuts" steht am Ende, nicht
   festgeklebt: man kommt zu ihm, indem man liest. Schließen geht immer,
   oben und mit Escape. */
.statuts-liens { display: grid; gap: 0.6rem; justify-items: start; margin: 0 0 0.4rem; }
.statuts-liens:not(:has(a:not([hidden]))) { display: none; }
.statuts-liens .bouton { font-size: 0.9375rem; padding: 0.95em 1.3em; text-align: left; line-height: 1.25; }
@media (max-width: 600px) {
  .statuts-liens { justify-items: stretch; }
}
.statuts-secours { margin: 0 0 0.6rem; }

.statuts {
  /* Der Browser setzt für dialog Rand, Innenabstand und Weiß. */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 42rem: abzüglich Innenabstand bleiben 37rem, bei 20 px rund 79 Zeichen
     je Zeile. Mit 48rem waren es 92. */
  width: min(42rem, calc(100vw - 2rem));
  max-width: none;
  height: min(54rem, calc(100vh - 3rem));
  height: min(54rem, calc(100dvh - 3rem));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--wp--preset--color--texte);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-top: 3px solid var(--wp--preset--color--gold);
  border-radius: 0;
  box-shadow: 0 1.5rem 4rem rgba(27, 33, 48, 0.28);
}
/* Geschlossen bleibt er zu, auch gegen das display oben. */
.statuts:not([open]) { display: none; }
.statuts::backdrop { background: rgba(27, 33, 48, 0.55); }
/* Hinter dem offenen Dialog scrollt die Seite nicht mit. */
html:has(.statuts[open]) { overflow: hidden; scrollbar-gutter: stable; }

.statuts__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.statuts__tete h2 { font-size: var(--wp--preset--font-size--large); }
.statuts__fermer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  margin-right: -0.5rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: var(--sans-weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp--preset--color--accent);
}
.statuts__fermer::after { content: "\00a0\00d7"; font-size: 1.35em; line-height: 1; }

.statuts__corps {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--wp--preset--spacing--40) clamp(1rem, 4vw, 2.5rem) var(--wp--preset--spacing--50);
  font-size: 1.25rem;
  line-height: 1.55;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.statuts__corps:focus { outline: none; }
.statuts__corps > * { max-width: var(--wp--style--global--content-size); }
.statuts__corps p { hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.statuts__corps h2 { font-size: 1.5rem; margin: 1.6em 0 0.6em; }
.statuts__corps h3 { font-size: 1.3rem; margin: 1.4em 0 0.5em; }
.statuts__corps h4 { font-size: 1.15rem; margin: 1.2em 0 0.4em; }
.statuts__corps > :first-child { margin-top: 0; }
.statuts__corps .liste { padding-left: 1.2em; margin: 0 0 1em; }
.statuts__fin {
  margin: var(--wp--preset--spacing--50) 0 0;
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--line);
}

/* Auf dem Telefon über den ganzen Schirm: ein schwebendes Fenster mit
   1 rem Rand ließe vom Text 330 px Breite übrig, und daneben wäre nichts
   zu sehen außer Abdunklung. */
@media (max-width: 600px) {
  .statuts {
    width: 100%;
    height: 100%;
    height: 100dvh;
    border: 0;
    border-top: 3px solid var(--wp--preset--color--gold);
    box-shadow: none;
  }
  .statuts__fin .bouton { display: flex; width: 100%; }
}


/* Die eigene Seite der Statuten. */
.statuts-texte {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.statuts-texte p { hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
/* Die Gliederung der Statuten (Titel I., II. …, darunter die Artikel)
   ist tiefer als die einer Textseite: eine Stufe kleiner, sonst stünden
   über vierzig Artikel in Abschnittsgröße untereinander. */
.statuts-texte h2 { font-size: var(--wp--preset--font-size--large); }
.statuts-texte h3 { font-size: calc(var(--body-size) * 1.1); }
.statuts-texte h4 { font-size: var(--body-size); }
.statuts-texte + .actions { margin-top: var(--wp--preset--spacing--60); }

/* ---------- Was noch fehlt ---------- */

/* Eine Seite, auf der Angaben fehlen, hat zwei Möglichkeiten: die Stelle
   leer lassen oder die Lücke benennen. Leer lassen sieht nach Fehler aus
   — und schlimmer, es sieht nach *fertig* aus, wenn niemand hinschaut.

   Also benennt die Seite die Lücke. Jede fehlende Angabe steht als
   kleines Feld im Text: gedämpfte Schrift auf einem Hauch Gold, mit
   gepunkteter Linie darunter. Man liest sofort, dass dort etwas hingehört
   und dass es noch nicht da ist. Damit ist das Layout vollständig, bevor
   die Inhalte es sind, und keine erfundene Adresse steht auf einer Seite,
   die öffentlich erreichbar ist.

   Im Druck bleibt es lesbar, aber ohne Fläche: Papier kennt kein Gold,
   und ein grauer Kasten im Ausdruck sieht aus wie ein Druckfehler. */
.a-completer {
  font-family: var(--sans);
  font-size: 0.92em;
  font-weight: var(--sans-weight);
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--muted);
  background: rgba(168, 135, 63, 0.10);
  border-bottom: 1px dotted var(--wp--preset--color--gold);
  border-radius: 2px;
  padding: 0.05em 0.4em;
}
/* In der Faktenliste ist jede Zelle eine Rasterspalte: ohne das zöge sich
   der Platzhalter über die ganze Breite und sähe aus wie ein leeres
   Eingabefeld. Er ist eine Notiz, keine Aufforderung. */
.faits .a-completer { justify-self: start; }

/* ---------- Zum Herunterladen ---------- */

.telecharger__bloc {
  border-top: 1px solid var(--wp--preset--color--line);
  padding-top: var(--wp--preset--spacing--40);
  max-width: var(--wp--style--global--content-size);
}
.telecharger__bloc .label { margin-bottom: 0.6rem; }
.telecharger__bloc p { margin-bottom: 0; }
.telecharger__bloc .actions { margin-top: var(--wp--preset--spacing--40); }

/* ---------- Hinweis, provisorisch ---------- */

/* Arbeitsnotizen für Frédéric. Sie sollen sich absetzen und als vorläufig
   erkennbar sein, ohne die Seite zu verderben: kühles Hellgrau, eine
   senkrechte Linie in Ocker. Jede Notiz nennt nur, was er prüfen, liefern
   oder entscheiden muss. Volle Breite; mehrere Punkte stehen ab 1000 px
   nebeneinander. Alle Notizen werden vor dem Livegang entfernt. */
.avis {
  --notiz-grund: #ECEBE8;
  --notiz-kante: #C99A00;
  background: var(--notiz-grund);
  color: var(--wp--preset--color--texte);
  border-left: 4px solid var(--notiz-kante);
  padding: var(--wp--preset--spacing--50);
  font-family: var(--sans);
  font-size: calc(var(--body-size) * 0.86);
  line-height: 1.6;
  max-width: none;
}
.avis p { max-width: 52rem; }
.avis p:last-child { margin-bottom: 0; }
.avis .label { margin-bottom: 0.75rem; color: #7A5A00; font-weight: 600; }
.avis a { color: inherit; }
@media (min-width: 62.5rem) {
  .avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); column-gap: var(--wp--preset--spacing--60); }
  .avis .label { grid-column: 1 / -1; }
  /* Nur ein Punkt: über die ganze Breite statt in der linken Hälfte. */
  .avis > p:nth-child(2):last-child { grid-column: 1 / -1; }
  .avis p { margin-bottom: 0; }
}

/* ---------- Fuß ---------- */

.site-footer { background: var(--wp--preset--color--contrast); color: #E7E1D6; padding-block: var(--wp--preset--spacing--60); }

/* Drei Spalten nebeneinander ließen der mittleren 243 px für einen Text,
   der zwei Zeilen lang ist — er brach auf fünf um und klemmte zwischen
   Wappen und Linkliste. Jetzt zwei Zeilen: oben Marke und Links, darunter
   die Vereinsangaben über die ganze Breite. Nichts drängt mehr. */
.site-footer__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--wp--preset--spacing--60);
  row-gap: var(--wp--preset--spacing--50);
  align-items: center;
}
/* Im Fuß eine Stufe leiser als im Kopf: dort eröffnet die Marke die
   Seite, hier schließt sie sie ab. Seit dem Wegfall des Wappens ist sie
   auch hier das einzige Zeichen — in der hellen Tinte auf der dunklen
   Fußfläche, nicht in der Überschriftentinte, die dort verschwände. */
.site-footer .marque { margin: 0; grid-column: 1; grid-row: 1; }
.site-footer .marque__nom { font-size: 1.3125rem; color: inherit; }
.site-footer nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem 1.75rem;
  font-family: var(--sans);
  font-size: var(--wp--preset--font-size--small);
}
.site-footer__assoc {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--sans);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
  margin: 0;
  max-width: 44em;
  color: #C9C3B8;
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid rgba(231, 225, 214, 0.16);
}
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 900px) {
  /* Die Umschaltung greift nur, wenn JavaScript lief (Klasse js am <html>).
     Ohne JavaScript bleibt die Navigation sichtbar statt unerreichbar. */
  /* Der Knopf trägt keine Beschriftung mehr. „Menu" neben drei Strichen,
     die nichts anderes bedeuten können, war ein Wort zu viel — und es nahm
     der Wortmarke die Breite, die sie auf dem Telefon braucht. Für
     Screenreader steht der Name im aria-label am Knopf.

     Das Zeichen selbst ist kein Balkenstapel, sondern eine Textstaffel:
     drei Striche, nach unten kürzer werdend wie die letzten Zeilen eines
     Absatzes, der mittlere im Gold der Filets.

     **2 px, nicht 1 px, und die volle Texttinte.** Die erste Fassung war
     auf dem Telefon so leise, dass sie als Zierat durchging statt als
     Knopf — Philippe zu Recht: „das muss etwas kräftiger sein, damit es
     als Menü wahrgenommen wird". Das Gold liegt jetzt auf der mittleren
     statt der kürzesten Linie: dort ist genug Länge da, dass die
     Akzentfarbe auch trägt. Ein Balkenstapel wird daraus trotzdem
     nicht — 2 px ist ein gezogener Strich, keine Fläche. */
  .js .nav-bascule {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    /* Der Knopf ist größer als sein Zeichen, damit der Daumen ihn trifft.
       Die Striche liegen dabei rechtsbündig im Knopf (align-items) und
       enden damit genau auf der rechten Satzkante; die Fläche wächst nach
       links und innen, nicht über den Satzspiegel hinaus. */
    color: var(--wp--preset--color--texte);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-bascule__barres, .nav-bascule__barres::before, .nav-bascule__barres::after {
    display: block;
    height: 2px;
    background: currentColor;
    /* Nicht auf „all": die Striche liegen absolut, eine Übergangszeit auf
       top ließe sie beim Umschalten zusätzlich wandern. */
    transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
                transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  /* Die mittlere Linie trägt das Gold — und wird im offenen Zustand zum
     einen der beiden Kreuzstriche. */
  .nav-bascule__barres {
    position: relative;
    width: 1.35rem;
    background: var(--wp--preset--color--gold);
  }
  .nav-bascule__barres::before, .nav-bascule__barres::after {
    content: "";
    position: absolute;
    right: 0;
  }
  .nav-bascule__barres::before { top: -0.5rem; width: 1.65rem; }
  .nav-bascule__barres::after { top: 0.5rem; width: 1.05rem; }
  /* Die Staffel richtet sich unter dem Zeiger aus, bevor sie sich öffnet.
     Nur wo es einen Zeiger gibt: auf dem Touchscreen bliebe :hover nach
     dem Tippen hängen und das Zeichen stünde dauerhaft ausgerichtet da. */
  @media (hover: hover) {
    .js .nav-bascule:hover .nav-bascule__barres,
    .js .nav-bascule:hover .nav-bascule__barres::after { width: 1.65rem; }
  }

  /* Offen: die unterste Linie zieht sich nach rechts aus dem Bild, die
     oberste und die goldene mittlere legen sich zum Kreuz. Ein Strich
     Tinte, ein Strich Gold — dieselben zwei Farben wie die Filets.
     Keine Deckkraft am Elternstrich: opacity hätte das Kreuz
     mitgenommen, ::before und ::after liegen in seiner Gruppe. */
  .js .site-header.est-ouverte .nav-bascule__barres,
  .js .site-header.est-ouverte .nav-bascule__barres::before {
    width: 1.5rem;
  }
  /* 90 Grad, nicht 45: ::before liegt im gedrehten Elternstrich und erbt
     dessen −45 Grad. 90 minus 45 ergibt die Gegendiagonale. */
  .js .site-header.est-ouverte .nav-bascule__barres::before { top: 0; transform: rotate(90deg); }
  .js .site-header.est-ouverte .nav-bascule__barres { transform: rotate(-45deg); }
  .js .site-header.est-ouverte .nav-bascule__barres::after { width: 0; }

  .site-header { flex-wrap: wrap; }
  /* Die Größe regelt seit dem 21.09.2026 das clamp() weiter oben — ohne
     Wappen daneben braucht der Name hier keine eigene Stufe mehr. */
  .nav { order: 3; width: 100%; }
  .js .nav { display: none; }
  .js .site-header.est-ouverte .nav { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding-top: 0.5rem; }
  .nav li { border-top: 1px solid var(--wp--preset--color--line); }
  .nav a { display: block; padding-block: 0.85rem; background-size: 0 1px; }
  .nav a[aria-current="page"] { color: var(--wp--preset--color--accent); }

  .hero, .duo { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-block: var(--wp--preset--spacing--60); }
  .principes, .cartes { grid-template-columns: minmax(0, 1fr); }
  .cartes--lignes .carte { grid-template-columns: minmax(0, 1fr); }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp--preset--spacing--40); }
  .site-footer nav { grid-column: 1; grid-row: 2; justify-self: start; justify-content: flex-start; }
  .site-footer__assoc { grid-row: 3; }
}

@media (max-width: 600px) {
  /* Auf dem Telefon passen bei 23 px nur rund 30 Zeichen in die Zeile, das
     trennt zu oft. 22 px sind noch gut ohne Brille und geben zwei Zeichen
     mehr. Kleiner wird es nicht. */
  :root { --body-size: 1.375rem; }
}

@media (max-width: 560px) {
  .champs-2 { grid-template-columns: minmax(0, 1fr); }
  .vocation { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .vocation__num { font-size: 2.5rem; }
  .faits li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .marque__nom { letter-spacing: 0.11em; }
  .formulaire { padding: var(--wp--preset--spacing--40); }
}

@media (max-width: 350px) {
  /* Unter 350 px wird es auch ohne Wappen eng: Name und Zeichen müssen
     nebeneinander bleiben, sonst fällt das Zeichen unter die Marke und
     steht dort allein links. Enger gesperrt statt kleiner gesetzt —
     die Sperrung ist das, was hier am ehesten entbehrlich ist. */
  .site-header { gap: 0.75rem; }
  .marque__nom { font-size: 1.1875rem; letter-spacing: 0.07em; word-spacing: 0.1em; }
}

/* ---------- Ruhiges Auftauchen beim Scrollen ---------- */

/* Abschnitte treten beim Scrollen leise hervor statt einfach dazustehen.
   Das ist der dritte und letzte Griff zur Anmutung: keine Bewegung, die
   auffällt, sondern eine, die man erst bemerkt, wenn man sie abschaltet.

   Reines CSS über scroll-driven animations. Kein JavaScript, kein
   Beobachter, keine Bibliothek. Wo der Browser das nicht kennt —
   Firefox tut es derzeit nicht — passiert schlicht nichts und alles steht
   sofort da. Deshalb die @supports-Klammer: ohne sie bliebe der Inhalt
   dort unsichtbar.

   Nur Überschriften, Zitate und Rasterzellen. Nie Fließtext:
   Text, der beim Lesen noch wandert, ist eine Zumutung. Die Bilder
   tauchen nicht auf, sie öffnen sich (nächster Abschnitt). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section__tete,
    .citation,
    .etymologie__inner,
    .principe,
    .carte,
    .vocation,
    .telecharger__bloc {
      animation: paraitre linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 24%;
    }
  }
}
@keyframes paraitre {
  from { opacity: 0.2; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Bilder öffnen sich ---------- */

/* Teil des dritten Griffs, kein vierter: statt aufzutauchen öffnen sich
   die Bilder. Das Bildband kommt so breit wie der Satzspiegel an der
   einen linken Kante herein und öffnet sich bis an die Fensterränder,
   während es zur Mitte wandert; das Motiv darin gleitet etwas langsamer
   als die Seite. Das Hero-Bild öffnet sich beim Laden und tritt eine Spur
   zurück, während es oben aus dem Bildschirm geht. Kleinere Bilder öffnen
   sich von ihrer linken Kante aus.

   Bezug in seinen Texten: « une expansion de conscience » (Startseite),
   « en décloisonnant les disciplines » (Alliance). Das Bild bleibt nicht
   im Kasten der Textspalte.

   Alle scrollgebundenen Bereiche hängen an der Lage des Bildes selbst
   (view-timeline), nie an der Scrollstrecke der Seite: auf dem Telefon
   steht das Hero-Bild unter dem Vorspann und wäre sonst schon verändert,
   bevor man es sieht. Wo der Browser das nicht kennt, stehen die Bilder
   still da wie vorher. */

/* Die Oberkante des Bildbands fällt nach links ab, die Unterkante bleibt
   gerade. Das Band kippt also nicht, es steht — nur sein oberer Rand ist
   nicht mit dem Lineal gezogen, sondern sinkt nach links weg, anfangs
   kaum, dann stärker. Die Kurve besteht aus sieben Stützpunkten einer
   flachen Parabel; eine Gerade sähe an dieser Stelle nach Schablone aus,
   eine Ellipse nach Bühne.

   Das Maß `--pente` steht oben bei der Höhe des Bandes: unter 800 px
   null, auf 1440 px 29 px, am unteren Rand immer nichts. Die Standlinie
   der Seite bleibt unberührt — und genau darum darf die Kante oben
   überhaupt so frei sein.

   Ein Zuschnitt, keine Animation: er steht auch dort, wo der Browser
   scrollgebundene Animationen nicht kennt. Im Druck sind Bildbänder
   ohnehin ausgeblendet. */
@media screen {
  .bandeau figure {
    clip-path: polygon(
      0 var(--pente),
      18% calc(var(--pente) * 0.80),
      36% calc(var(--pente) * 0.58),
      54% calc(var(--pente) * 0.36),
      72% calc(var(--pente) * 0.18),
      88% calc(var(--pente) * 0.06),
      100% 0,
      100% 100%,
      0 100%);
  }
}

/* Der erste Blick. Das Hero-Bild stand bisher einfach da; jetzt öffnet
   es sich beim Laden — von der linken Kante her, derselben, an der der
   Titel daneben beginnt, und zugleich eine Spur nach oben und unten wie
   eine Blende. Eineinhalb Sekunden, ausklingend, danach nie wieder: eine
   Begrüßung, keine Schleife.

   Als einziger Effekt der Seite kommt er ohne scrollgebundene Animation
   aus. Er läuft deshalb auch in Firefox und auf älteren Telefonen, wo
   der Rest still steht — und er ist auf dem kleinen Schirm genauso zu
   sehen wie auf dem großen, wo die übrigen Griffe leiser wirken. Wer
   Bewegung abbestellt hat, sieht das Bild sofort und vollständig.

   Ein Versuch, die Öffnung auf dem Telefon stattdessen an die Lage des
   Bildes zu hängen, ist verworfen: am Scrollrad hängt die Bewegung an
   der Hand statt am Blick, läuft mit der Scrollgeschwindigkeit ab und
   wirkt mechanisch. Eine Begrüßung hat ihr eigenes Tempo. */
@media screen and (prefers-reduced-motion: no-preference) {
  .hero__image {
    animation: ouvrir-hero 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 150ms both;
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Der Rand, um den das Band anfangs eingezogen ist, ist genau der
       Abstand der Satzkante vom Fensterrand, derselbe Wert, den .wrap
       herstellt. In WordPress kommt der Seitenrand aus theme.json. */
    .bandeau figure {
      --satzrand: calc(max(0px, (100% - var(--wp--style--global--wide-size)) / 2) + clamp(1rem, 4vw, 2.5rem));
      overflow: hidden;
      view-timeline: --bande block;
      animation: ouvrir-bande linear both;
      animation-timeline: --bande;
      animation-range: entry 60% cover 50%;
    }
    .bandeau img {
      animation: profondeur linear both;
      animation-timeline: --bande;
      animation-range: cover 0% cover 100%;
    }

    .hero__image {
      overflow: hidden;
      view-timeline: --hero block;
    }
    .hero__image img {
      animation: recul linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }

    .duo figure img {
      animation: ouvrir-image linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
  }
}
/* Dieselbe Kante von Anfang bis Ende, nur die Seiten wandern nach außen:
   beide Stützpunkte haben dieselben neun Ecken, sonst rechnet der Browser
   den Übergang nicht aus. Die x-Werte der Anfangsstellung sind die der
   Endstellung, zusammengeschoben auf die Breite zwischen den beiden
   Satzkanten — `18 % + satzrand · 0,64` ist nichts anderes als
   `satzrand + 0,18 · (100 % − 2 · satzrand)`, ausmultipliziert. */
@keyframes ouvrir-bande {
  from {
    clip-path: polygon(
      var(--satzrand) var(--pente),
      calc(18% + var(--satzrand) * 0.64) calc(var(--pente) * 0.80),
      calc(36% + var(--satzrand) * 0.28) calc(var(--pente) * 0.58),
      calc(54% - var(--satzrand) * 0.08) calc(var(--pente) * 0.36),
      calc(72% - var(--satzrand) * 0.44) calc(var(--pente) * 0.18),
      calc(88% - var(--satzrand) * 0.76) calc(var(--pente) * 0.06),
      calc(100% - var(--satzrand)) 0,
      calc(100% - var(--satzrand)) 100%,
      var(--satzrand) 100%);
  }
  to {
    clip-path: polygon(
      0 var(--pente),
      18% calc(var(--pente) * 0.80),
      36% calc(var(--pente) * 0.58),
      54% calc(var(--pente) * 0.36),
      72% calc(var(--pente) * 0.18),
      88% calc(var(--pente) * 0.06),
      100% 0,
      100% 100%,
      0 100%);
  }
}
/* Das Motiv ist 12 % größer als sein Rahmen und wandert darin um
   ±5 %: genug für Tiefe, zu wenig, um es als Bewegung zu verfolgen. */
@keyframes profondeur {
  from { transform: translateY(-5%) scale(1.12); }
  to   { transform: translateY(5%) scale(1.12); }
}
/* 6 % statt 10 %: der Rückzug lief auf dem Telefon, wo der Hero schnell
   oben hinausgeht, sichtbar mit dem Daumen mit. Weniger Weg auf derselben
   Strecke heißt weniger Tempo. */
@keyframes recul {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes ouvrir-hero {
  from { clip-path: inset(9% 100% 9% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes ouvrir-image {
  from { clip-path: inset(0 24% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.impression-pied { display: none; }

/* ---------- Druck ---------- */

/* Diese Regeln erzeugen auch die beiden PDFs zum Herunterladen (pdf.py).
   Ziel: gut lesbar auf Papier, sparsam im Verbrauch. Keine Fotos, keine
   Flächen, kein Blau — schwarz auf weiß, aber in derselben Schrift wie
   die Website, damit es dasselbe Dokument bleibt. */

@page {
  /* Breite Seitenränder sind hier kein Luxus: bei 13 pt Garamond hält
     das die Zeile auf eine Länge, die man noch bequem liest. */
  size: A4;
  margin: 18mm 26mm;
}

@media print {
  :root {
    --wp--preset--color--base: #fff;
    --wp--preset--color--surface: #fff;
    --wp--preset--color--pierre: #fff;
    --wp--preset--color--contrast: #000;
    --wp--preset--color--texte: #000;
    --wp--preset--color--titre: #000;
    --wp--preset--color--muted: #333;
    --wp--preset--color--line: #999;
    --wp--preset--color--accent: #000;
    --wp--preset--color--blason: #000;
    --wp--preset--color--gold: #666;
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;
    --body-size: 13pt;
    --body-lh: 1.55;
  }

  html, body { background: #fff; color: #000; background-image: none; }

  /* Bewegung ist Bildschirmsache. */
  .section__tete, .citation, .bandeau figure, .hero__image,
  .etymologie__inner, .principe, .carte, .vocation, .telecharger__bloc {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Der Platzhalter bleibt lesbar, aber ohne Fläche: ein grauer Kasten
     im Ausdruck sieht aus wie ein Druckfehler. */
  .a-completer { background: none; border-bottom: 1px dotted #999; color: #333; }

  /* Alles, was auf Papier nichts verloren hat. */
  .site-header, .site-footer, .saut, .actions, .formulaire,
  .avis, .bandeau, .hero__image, .nav-bascule, .telecharger,
  .sommaire { display: none; }
  /* Die Statuten werden nicht gedruckt, auch nicht bei offenem Dialog
     (Frédéric: lesen, nicht mitnehmen). */
  .statuts, .statuts[open], .statuts-texte { display: none !important; }

  .wrap { max-width: none; padding-inline: 0; margin: 0; }
  .lecture, .vocation__corps, .faq__reponse { max-width: none; }
  .section, .section--serre, .page-tete, .etymologie { padding-block: 0; }
  .section + .section, .section--serre + .section--serre { margin-top: 8mm; }

  h1 { font-size: 25pt; margin-bottom: 4mm; }
  h2 { font-size: 17pt; margin-top: 8mm; margin-bottom: 3mm; }
  h3 { font-size: 14pt; margin-bottom: 2mm; }
  h4 { font-size: 13pt; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Eine Zwischenüberschrift besteht aus Label und Titel. Die beiden
     dürfen nie auf zwei Seiten stehen, und allein am Seitenfuß auch nicht. */
  .section__tete { break-inside: avoid; page-break-inside: avoid; break-after: avoid; page-break-after: avoid; }
  .label { break-after: avoid; page-break-after: avoid; }

  .page-tete { margin-bottom: 6mm; }
  .chapeau { font-size: 14pt; }
  .label { font-size: 10pt; letter-spacing: 0.12em; }

  /* Etymologie: aus dem gestalteten Block wird eine ruhige Zeile. */
  .etymologie { text-align: left; margin: 6mm 0; border-block: 0.5pt solid #999; padding-block: 4mm; }
  .etymologie__inner { display: block; }
  .etymologie .label { margin-bottom: 2mm; }
  .grec { font-size: 26pt; display: inline; margin-right: 4mm; }
  .etymologie .filet { display: none; }
  .etymologie__texte { display: inline; font-size: 12.5pt; }

  /* Raster werden auf Papier zu Abschnitten. */
  .principes, .cartes { display: block; }
  .principe, .carte, .vocation {
    display: block;
    border-top: 0.5pt solid #999;
    padding-top: 3mm;
    margin-top: 5mm;
  }
  /* Kurze Einheiten bleiben zusammen. Die Berufungen sind je fast eine
     ganze Seite lang — die dürfen umbrechen, sonst schiebt der Browser
     sie als Ganzes weiter und lässt eine halbe Seite leer. */
  .principe, .carte { break-inside: avoid; page-break-inside: avoid; }
  .vocation { break-inside: auto; page-break-inside: auto; }
  .principe__num, .vocation__num { font-size: 15pt; display: inline; margin-right: 2mm; }
  .principe h3, .vocation h3 { display: inline; }
  .principe__sous { display: inline; font-size: 12.5pt; }
  .principe__sous::before { content: " — "; }
  .principe p, .vocation p { margin-top: 2mm; }
  .mots-cles { font-size: 11.5pt; }

  .citation { border-left: 1.5pt solid #666; break-inside: avoid; }
  .citation p { font-size: 14.5pt; }

  /* Aufklapper aufklappen, sonst fehlt der halbe Inhalt. */
  details { break-inside: avoid; page-break-inside: avoid; }
  details > .faq__reponse { display: block !important; }
  summary { list-style: none; font-size: 14pt; }
  summary::after { content: none; }

  /* Links: die Adresse dazuschreiben, ein Papier kann man nicht anklicken. */
  a { text-decoration: none; color: #000; }
  .article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10.5pt; color: #555; }

  img { break-inside: avoid; }

  /* Fußzeile des Dokuments, nur im Druck sichtbar. */
  .impression-pied {
    display: block;
    margin-top: 10mm;
    padding-top: 3mm;
    border-top: 0.5pt solid #999;
    font-family: var(--sans);
    font-size: 10.5pt;
    line-height: 1.5;
    color: #555;
  }
}