/* Colours from the 2026 poster: cream paper, red, deep red, green, gold. */
:root {
  --bg: #f6ecd2;
  --surface: #fffaf0;
  --border: #e2d3ad;
  --text: #2a1a14;
  --muted: #5c4a40;
  --accent: #b3121b;       /* links, headings on cream */
  --accent-hover: #7a0e12;
  --green: #1d6b37;
  --hero: #7a0e12;         /* hero, header and footer stay dark red in both modes */
  --hero-text: #fbf3e0;
  --gold: #f4c430;
  color-scheme: light;
}

/* Light for everyone; the header checkbox switches to dark (CSS only, not remembered between pages). */
:root:has(#theme:checked) {
    color-scheme: dark;
    --bg: #1b1412;
    --surface: #2a1f1c;
    --border: #44332e;
    --text: #f3e9d6;
    --muted: #c9b8a6;
    --accent: #ff8f85;
    --accent-hover: #ffc2bc;
    --green: #7fd39a;
    --hero: #5c0a0e;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
  /* Footer stays at the bottom of the screen on short pages. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* On short pages the leftover height goes around the content, a little more below than above,
   so it sits just above the middle instead of leaving a gap over the footer. */
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main::before, main::after { content: ""; flex: 1 1 0; }
main::after { flex-grow: 1.6; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

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

a { color: var(--accent); text-underline-offset: .15em; }
/* Email addresses never break across lines; below ~330px they shrink to fit instead. */
a[href^="mailto:"]:not(.btn) { white-space: nowrap; font-size: min(1em, 5.2vw); }
a:hover { color: var(--accent-hover); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; hyphens: auto; }
/* Page titles never split a word: break only between words (or at a word's own hyphen) and shrink
   to fit when the longest word is wider than the column. Each h1 carries --longest, the width of
   its longest word in em plus ~10% for other system fonts (see DESIGN.md). */
:has(> h1, > h2[style*="--longest"]) { container-type: inline-size; }
h1 { hyphens: manual; font-size: var(--h1, 2em); font-size: min(var(--h1, 2em), 100cqi / var(--longest, .001)); }
/* Same for long-read titles (edition articles and sections) that carry --longest. */
h2[style*="--longest"] { hyphens: manual; font-size: min(var(--h2), 100cqi / var(--longest)); }
h2 { --h2: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); font-size: var(--h2); text-transform: uppercase; color: var(--accent); letter-spacing: .01em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.wrap { width: min(100% - 32px, 1080px); margin-inline: auto; }

.skip {
  position: absolute; left: 8px; top: -100px;
  background: var(--gold); color: #2a1a14; padding: .5em 1em; z-index: 10; font-weight: 700;
}
.skip:focus { top: 8px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--hero); color: var(--hero-text); box-shadow: 0 1px 0 rgb(0 0 0 / .15); }
/* Anchored targets land below the sticky header. */
html { scroll-padding-top: 5rem; }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1.5rem; padding-block: .6rem;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  color: inherit; text-decoration: none; font-weight: 800; letter-spacing: .04em;
}
.brand img { width: 44px; }
.brand:hover { color: var(--gold); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.site-nav a {
  display: inline-block; padding: .45em 0; min-height: 44px; line-height: 1.6;
  color: var(--hero-text); text-decoration: none; font-weight: 600;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--gold); }
/* « Participer » opens a classic drop-down with its two choices, « Devenir membre » and « Faire une contribution »
   (home page sections). Wide screens: a panel under it on hover or keyboard focus (CSS only; hidden, so not
   clickable, until then), its chevron turning. In the ☰ menu: the two choices indented under it, always shown. */
.has-sub { position: relative; }
.caret { width: .9em; height: .9em; margin-left: .2em; vertical-align: -.1em; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.site-nav ul.sub { display: block; }
@media (min-width: 69.01rem) {
  .site-nav ul.sub {
    position: absolute; left: -1rem; top: 100%; z-index: 1; min-width: 14rem; padding: .35rem 0;
    background: var(--hero); border: 1px solid rgb(255 255 255 / .15); border-top: 3px solid var(--gold);
    border-radius: 0 0 6px 6px; box-shadow: 0 10px 24px rgb(0 0 0 / .3);
    opacity: 0; visibility: hidden;
  }
  .has-sub:is(:hover, :focus-within) > .sub { opacity: 1; visibility: visible; }
  .has-sub:is(:hover, :focus-within) .caret { transform: rotate(180deg); }
  .site-nav .sub a { display: block; min-height: 0; padding: .5em 1rem; border: 0; font-weight: 500; }
  .site-nav .sub a:hover { background: rgb(255 255 255 / .08); color: var(--gold); }
  .site-nav .sub a[aria-current] { color: var(--gold); }
}
/* Home page « Accueil » (#top): on wide screens, scrolling down slowly turns the word into an up arrow (back
   to top); see Motion. Elsewhere, and without scroll-driven animations, it stays the word. */
.nav-home { position: relative; }
.nav-top { display: none; }
.site-nav a[aria-current] { border-bottom-color: var(--gold); }
/* Home page sections in the menu (/#chantier, /#participer, /#contact): once followed, that link shows as
   current instead of Accueil (CSS :target, no script). Scrolling by hand doesn't change it. */
:root:has(#chantier:target) .site-nav a[href="/#chantier"],
:root:has(#participer:target) .site-nav a[href="/#participer"],
:root:has(#contact:target) .site-nav a[href="/#contact"] { border-bottom-color: var(--gold); }
:root:has(:is(#chantier, #participer, #contact):target) .site-nav a[aria-current] { border-bottom-color: transparent; }
/* Header tools, top right: social links, then the dark mode switch. Round 40px targets. */
.header-tools { display: flex; align-items: center; gap: .25rem; }
.social { display: flex; list-style: none; margin: 0; padding: 0; gap: .25rem; }
.social a, .theme-toggle, .menu-toggle {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--hero-text); cursor: pointer;
}
.social a:hover, .theme-toggle:hover, .menu-toggle:hover { color: var(--gold); background: rgb(255 255 255 / .1); }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.social .icon-mail { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The theme switch is a setting, not a fourth network: a divider, then an outlined round button. */
.social { padding-right: .5rem; margin-right: .25rem; border-right: 1px solid rgb(255 255 255 / .25); }
.theme-toggle { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }

/* Dark mode switch: a real checkbox (keyboard and screen readers), hidden behind a moon/sun icon. */
.theme-toggle:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.theme-toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.theme-toggle svg { grid-area: 1 / 1; width: 22px; height: 22px; }
.icon-moon { fill: currentColor; }
.icon-sun { display: none; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#theme:checked ~ .icon-moon { display: none; }
#theme:checked ~ .icon-sun { display: block; }
/* Menu button (phones only) and the copy of the social links shown inside the phone menu. */
.menu-toggle { display: none; padding: 0; border: 0; background: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
.menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.menu-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.site-nav .social-menu { display: none; }

/* Wide screens: the nav is a popover only below 69rem; here it is always shown, in the header's flow. */
@media (min-width: 69.01rem) {
  .site-nav[popover] {
    display: block; position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0;
    border: 0; background: none; color: inherit; overflow: visible;
  }
}

/* Below 69rem (where the full menu no longer fits on one line): one row (logo, theme switch, menu button);
   the menu opens as a panel under the header
   (HTML popover: Esc or a tap outside closes it, no JavaScript). */
@media (max-width: 69rem) {
  .brand { margin-right: auto; }
  .site-header .wrap { column-gap: .5rem; }
  .header-tools .social { display: none; }
  .menu-toggle { display: inline-grid; }
  .site-nav[popover] {
    position: fixed; inset: calc(68px + var(--dev-h, 0px)) 0 auto 0; width: auto; margin: 0; max-height: calc(100dvh - 68px - var(--dev-h, 0px)); overflow: auto;
    padding: .25rem 16px 1rem; border: 0; border-top: 1px solid rgb(255 255 255 / .15);
    background: var(--hero); color: var(--hero-text); box-shadow: 0 12px 24px rgb(0 0 0 / .3);
  }
  .site-nav ul:not(.social) { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .site-nav ul:not(.social) a { display: block; padding: .55em 0; border-bottom: 1px solid rgb(255 255 255 / .1); }
  .site-nav ul.sub a { padding-left: 1.1rem; font-size: .95em; font-weight: 500; }
  .site-nav .caret { display: none; }
  .site-nav ul:not(.social) a[aria-current] { border-bottom-color: rgb(255 255 255 / .1); color: var(--gold); }
  :root:has(#chantier:target) .site-nav a[href="/#chantier"],
  :root:has(#participer:target) .site-nav a[href="/#participer"],
  :root:has(#contact:target) .site-nav a[href="/#contact"] { border-bottom-color: rgb(255 255 255 / .1); color: var(--gold); }
  :root:has(:is(#chantier, #participer, #contact):target) .site-nav a[aria-current] { border-bottom-color: rgb(255 255 255 / .1); color: var(--hero-text); }
  .site-nav .social-menu { display: flex; margin: .75rem 0 0; padding: 0; border: 0; }
  .site-nav .social a { display: inline-grid; min-height: 0; padding: 0; border: 0; line-height: 1; }
  html { scroll-padding-top: 4.75rem; }
}
/* Very narrow (big zoom): the logo alone, smaller round buttons. */
@media (max-width: 14rem) {
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .theme-toggle, .menu-toggle { width: 36px; height: 36px; }
}

/* ---------- Hero ---------- */
.hero { background: var(--hero); color: var(--hero-text); padding-block: 2.5rem 3.5rem; border-top: 1px solid rgb(255 255 255 / .12); }
.hero .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.hero-logo { width: clamp(120px, 28vw, 230px); flex: none; }
.hero-text { flex: 1 1 18rem; min-width: 0; }
.hero h1 { --h1: clamp(1.9rem, 1.2rem + 3.6vw, 3.4rem); text-transform: uppercase; margin-bottom: .3em; }
.hero .tagline { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); color: var(--gold); font-weight: 700; margin-bottom: 1.4em; }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  display: inline-block; padding: .7em clamp(.6em, 3vw, 1.3em); min-height: 44px; border-radius: 6px;
  font-weight: 700; text-decoration: none; text-align: center;
  background: var(--accent); color: #fff; border: 2px solid var(--accent);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
:where(:root:has(#theme:checked)) .btn,
:where(:root:has(#theme:checked)) .btn:hover { color: #1b1412; }
.btn-outline { background: transparent; color: var(--accent); }
.btn-outline:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero .btn { background: var(--gold); border-color: var(--gold); color: #2a1a14; }
.hero .btn:hover { background: #fff; border-color: #fff; color: #2a1a14; }
.hero .btn-outline { background: transparent; border-color: var(--hero-text); color: var(--hero-text); }
.hero .btn-outline:hover { background: var(--hero-text); border-color: var(--hero-text); color: var(--hero); }

/* ---------- Sections ---------- */
main section { padding-block: 3rem; }
main section + section { border-top: 1px solid var(--border); }
/* Home page: sections get more air and an editorial divider across the content width: a fine rule with a short
   red tab at its left end, where the section's text starts. It replaces the full-width hairline. */
main:has(> .hero) > section { padding-block: 3.5rem; }
main:has(> .hero) > section + section { border-top: 0; padding-top: 0; }
main:has(> .hero) > section + section::before {
  content: ""; display: block; width: min(100% - 32px, 1080px); height: 3px; margin: 0 auto 3.5rem;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 2.5rem 3px no-repeat,
    linear-gradient(var(--border), var(--border)) left center / 100% 1px no-repeat;
}
.page-head { padding-block: 2.5rem 1rem; }
.page-head + section { padding-top: 1rem; }
.page-head h1 { --h1: clamp(1.9rem, 1.3rem + 3vw, 3rem); text-transform: uppercase; color: var(--accent); }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 46rem; }
/* Error page (/formulaire-non-envoye/): a warning triangle above the title and the explanation in a red box. */
.error-icon { display: block; width: clamp(3.5rem, 12vw, 5rem); height: auto; color: var(--accent); margin-bottom: .75rem; }
.alert { max-width: 46rem; margin-bottom: 1.5rem; padding: 1rem clamp(.6rem, 3vw, 1.25rem);
  border: 1px solid var(--border); border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  border-left: 6px solid var(--accent); border-radius: 8px;
  background: var(--surface); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } /* plain fallbacks first, for browsers without color-mix() */
.alert strong { display: block; color: var(--accent); font-size: 1.15rem; }
.alert .lead { color: var(--text); margin: .35rem 0 0; }
.alert .lead + .lead { margin-top: .75rem; }


.split { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.split > * { flex: 1 1 20rem; min-width: 0; }
.split > .cover { flex: 0 1 200px; }
/* Recueil cover drawn as a book in CSS, flat (a 3D turn blurs the image): the cover image on top, with
   the binding on its left (the cover wrapping round the spine, then the hinge groove, ::after), the
   page block at the fore-edge on the right and the back cover's rim behind it (::before). Tilted -2deg.
   Used on the home page and the recueil page. */
.book { position: relative; display: block; transform: rotate(-2deg); border-radius: 7px 4px 4px 7px;
  box-shadow: 1px 2px 3px rgb(0 0 0 / .18), 3px 8px 14px -4px rgb(0 0 0 / .22), 6px 18px 28px -12px rgb(0 0 0 / .3); }
.book img { position: relative; z-index: 1; width: 100%; border-radius: 7px 3px 3px 7px;
  box-shadow: -3px 0 0 #c9b583, -3px 0 0 1px rgb(0 0 0 / .15); }
.book::before { content: ""; position: absolute; z-index: 0; inset: 3px -7px 3px 50%; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, transparent calc(100% - 8px), rgb(0 0 0 / .12) calc(100% - 8px), transparent calc(100% - 5px)),
    repeating-linear-gradient(90deg, #fffaf0 0, #e2d7bd 1.25px, #fffaf0 2.5px) right / 8px 100% no-repeat, #fffaf0;
  box-shadow: 2px 3px 0 #d9c697, 2px 3px 0 1px rgb(0 0 0 / .12); }
.book::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: 7px 3px 3px 7px; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .3), rgb(255 255 255 / .3) 1.6%, rgb(0 0 0 / .04) 3.6%, rgb(0 0 0 / .26) 5%,
      rgb(255 255 255 / .4) 5.7%, rgb(255 255 255 / 0) 8.5%),
    linear-gradient(115deg, rgb(255 255 255 / .2), transparent 35%, transparent 70%, rgb(0 0 0 / .06)); }

.points { padding-left: 1.2em; margin: 0 0 1.5em; }
.points li { margin-bottom: .5em; font-weight: 600; }
.points li::marker { color: var(--accent); }
.slogan { font-weight: 800; text-transform: uppercase; color: var(--green); font-size: 1.1rem; }

.poster { border-radius: 6px; box-shadow: 0 4px 18px rgb(0 0 0 / .2); }

/* An event (home page conference): a big tear-off calendar page (month, day, weekday; decorative, the kicker says
   the date) to the left of the text, above it when there isn't room. */
.event { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.event-text { flex: 1 1 18rem; min-width: 0; }
.cal { flex: none; display: flex; flex-direction: column; width: clamp(6.5rem, 16vw, 8.5rem); text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 16px rgb(0 0 0 / .12); }
.cal-m { position: relative; padding: .55em 0 .35em; border-radius: 9px 9px 0 0; background: var(--hero); color: var(--hero-text);
  font-size: clamp(.7rem, 1.8vw, .9rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* Two binding rings on the top edge. */
.cal-m::before, .cal-m::after { content: ""; position: absolute; top: -.45em; width: .5em; height: .9em; border-radius: 99px;
  background: var(--gold); box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.cal-m::before { left: 28%; } .cal-m::after { right: 28%; }
.cal-d { padding-top: .1em; font-size: clamp(2.8rem, 8vw, 4rem); font-weight: 800; line-height: 1; color: var(--text); }
.cal-w { padding: .2em 0 .65em; font-size: clamp(.7rem, 1.8vw, .85rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }

/* « Participer »: each way to take part (.way: membership, contribution) is a title over its options side by
   side (.option tiles, each with an icon, one line on how it works and its button), small print under them.
   The recommended option (.option-main) gets a red border and a gold corner badge. */
.ways { display: grid; gap: 2.5rem; }
.way + .way { padding-top: 2.5rem; border-top: 1px solid var(--border); }
/* Frame for the arrival glow (see Motion): a little outside the way, below the rule for the second one. */
.way { position: relative; }
.way::before { content: ""; position: absolute; inset: -.75rem; border-radius: 12px; pointer-events: none; }
.way + .way::before { top: 1.5rem; }
/* « Faire une contribution » stops a bit above its way, like « Devenir membre » stops at the section title. */
#soutenir { scroll-margin-top: 3rem; }
.way h3 { color: var(--green); margin: 0 0 1rem; }
.way { container-type: inline-size; }
/* Options stacked, an « ou » between them on a rule; side by side once both fit, the rule turned upright. */
.options { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@container (min-width: 36rem) { .options { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; } .or { flex-direction: column; } }
.or { display: flex; align-items: center; gap: .6rem; }
.or::before, .or::after { content: ""; flex: 1; min-width: 1px; min-height: 1px; background: var(--border); }
.or span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--gold);
  background: var(--bg); color: var(--green); font: italic 700 1.15rem/1 Georgia, 'Times New Roman', serif; }
.option { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
  padding: clamp(.6rem, 4vw, 1.4rem); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
/* Very narrow (big zoom): button icons step aside so labels like « Faire une contribution » still fit. */
@media (max-width: 16rem) { .btn > svg:first-child { display: none; } }
.option-main { border: 2px solid var(--accent); }
.option h4 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.15rem; }
.option h4 svg { flex: none; width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.option p { margin: 0 0 .4rem; color: var(--muted); }
.option .btn { margin-top: auto; }
.way > .note { margin: 1rem 0 0; font-size: .9rem; max-width: 46rem; }
.badge { position: absolute; top: -.8em; right: 1rem; padding: .15em .7em; border-radius: 999px;
  background: var(--gold); color: #2a1a14; font-size: .8rem; font-weight: 700; line-height: 1.35; max-width: calc(100% - 2rem); text-align: center;
  box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
/* Too narrow for it to sit on the corner (it would cover the title): it opens the tile instead. */
@container (max-width: 20rem) { .badge { position: static; max-width: none; } }
/* Info note: smaller, greyed print after a round "i" icon. */
.note.note-info { display: flex; gap: .45rem; font-size: .8rem; line-height: 1.5;
  color: var(--muted); color: color-mix(in srgb, var(--muted) 80%, var(--surface)); } /* greyed, still 4.5:1 */
.note-info svg { flex: none; width: 1.1em; height: 1.1em; margin-top: .2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.contact-list li { margin-bottom: .6em; }
.contact-list strong { display: block; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.editions { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; max-width: 34rem; }
.editions a {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem;
  padding: .8rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  text-decoration: none; font-weight: 600;
}
.editions a:hover { border-color: var(--accent); }
.editions .num { color: var(--muted); font-weight: 400; }

.prose { max-width: 46rem; }

/* Privacy policy: plain section titles, smaller than page-section h2s, and the update date under the h1. */
.policy h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); text-transform: none; letter-spacing: 0; margin-top: 1.8em; }
.policy .updated { color: var(--muted); font-size: .95rem; }
/* Publication date under a page title (declarations): small and muted, the same date as the page's metadata. */
.page-head .published { margin: .35rem 0 0; color: var(--muted); font-size: .95rem; }

.note { font-size: .9rem; color: var(--muted); max-width: 46rem; margin: 1rem 0 0; }

/* ---------- Forms (/adhesion/, /conference-avenir-du-quebec/) ---------- */
/* Form beside a side box (.form-aside), wrapping below it on narrow screens. Fields sit in fieldset boxes,
   in a grid that wraps at 15rem (.full spans the row). No backend: see the comment in each form. */
.form-layout { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; padding-bottom: 3rem; container-type: inline-size; }
/* A side box that must be read before filling the form (event fees) comes first in the HTML, so it sits
   above the form on phones, and moves to the right once both fit side by side (30rem + 2rem + 18rem). */
@container (min-width: 50rem) { .form-layout > .form-aside:first-child { order: 1; } }
.form-main { flex: 1 1 30rem; min-width: 0; }
.form-aside { flex: 1 1 18rem; min-width: 0; padding: clamp(.6rem, 4vw, 1.25rem); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: .95rem; }
/* Side-box titles shrink like page titles when they carry --longest (see h1 above). */
.form-aside h2 { font-size: 1.2rem; font-size: min(1.2rem, 100cqi / var(--longest, .001)); hyphens: manual; margin-top: 1.25rem; }
.form-aside h2:first-child { margin-top: 0; }
.form-aside ol { padding-left: 1.25rem; }
.form-aside li + li { margin-top: .5em; }
.form-aside details { margin-top: 1rem; }
.form-aside summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.form-main fieldset { margin: 0 0 1.5rem; padding: clamp(.6rem, 4vw, 1.25rem); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.form-main legend { padding: 0 .4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem 1.25rem; }
.fields .full { grid-column: 1 / -1; }
.field label, .field .label { display: block; margin-bottom: .3rem; font-weight: 700; }
.count { text-align: right; }
.hint + .count { margin-top: 0; }
.form-main :user-invalid { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hint { display: block; margin-top: .3rem; font-size: .88rem; color: var(--muted); }
.form-main input:not([type=checkbox]):not([type=radio]), .form-main textarea {
  width: 100%; min-height: 44px; padding: .55rem .7rem; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}
.form-main textarea { min-height: 5.5rem; resize: vertical; }
.form-main input:focus-visible, .form-main textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--accent); }
.choices { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.choice, .field label.choice { display: flex; align-items: flex-start; gap: .55rem; min-height: 44px; padding-top: .55rem; font-weight: 400; }
.choice input { flex: none; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--accent); }
.money { display: flex; align-items: center; gap: .5rem; }
.money input { max-width: 9rem; }
.total { margin: 1rem 0 0; font-weight: 700; }
.question { margin-bottom: .5rem; }
.actions-form { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.actions-form .hint { margin: 0; }
.form-main .btn { font: inherit; font-weight: 700; }

/* Home page Facebook and Instagram frames, side by side, wrapping: each starts on a local stand-in
   (/embed/facebook.html, /embed/instagram.html; nothing from Meta) whose button loads the real embed into
   the same frame. Instagram's profile embed is a header (~150-170px) over two rows of three square posts,
   so the height follows the width (cqi of .feed); Facebook's frame gets the same height (its page plugin,
   180 to 500 px wide, is asked for 510px, the tallest frame). */
.feeds { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.feed { flex: 1 1 18rem; max-width: 500px; container-type: inline-size; }
.feed iframe {
  display: block; width: 100%; height: 510px; height: calc(175px + 67cqi);
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}

/* ---------- Chantier politique masthead ---------- */
/* The journal's title banner rebuilt in HTML/CSS: real text, paper and perspective grid drawn by CSS,
   only the Patriote silhouette and the PMLQ logo are images. Sizes follow the banner's width (cqi). */
@font-face {
  font-family: "League Spartan"; font-weight: 900; font-display: swap;
  src: url(assets/fonts/league-spartan-black.woff) format("woff"); /* SIL OFL, see league-spartan-OFL.txt */
}
.cp-masthead {
  --paper: #f3e8c9; --grid: #3d6e67; --green: #1d5534; --red: #c40d0d;
  container-type: inline-size; display: block; margin-bottom: .75rem; overflow: hidden;
  border: 3px solid var(--green); border-radius: 6px; color: #111; text-decoration: none;
  font-family: "League Spartan", "Arial Black", "Helvetica Neue", Arial, sans-serif; font-weight: 900; line-height: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .014' numOctaves='5' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .37 0 0 0 0 .25 0 0 0 -1.6 .78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") center / cover,
    var(--paper);
}
.cp-masthead:hover { color: #111; }
.cp-masthead:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* cqi only measures an ancestor container, so the padding lives on this inner box. */
/* --u is 1% of the banner's width. Browsers with container units use 1cqi; older ones (Firefox < 110)
   use the column width it always has (.wrap: 100vw minus the gutters, at most 1080px, minus the 3px borders). */
.cp-mast-in { --u: calc((min(100vw - 32px, 1080px) - 6px) / 100); }
@supports (width: 1cqi) { .cp-mast-in { --u: 1cqi; } }
.cp-mast-in { position: relative; isolation: isolate; display: grid; justify-items: center; text-align: center; padding: calc(1.4 * var(--u)) calc(1 * var(--u)) calc(1.1 * var(--u)); }
/* Floor: perspective grid drawn as SVG lines (anti-aliased, unlike tilted CSS gradients),
   stretched to the floor area with strokes kept at a constant width. */
.cp-mast-floor { position: absolute; z-index: -1; left: 0; top: 36%; width: 100%; height: 64%; overflow: visible;
  color: var(--grid);
  /* lines fade out toward the horizon instead of piling up; a mask, not a gradient stroke: iOS Safari
     resolves a stroke gradient in screen pixels when vector-effect is set, and drew the lines opaque */
  -webkit-mask-image: linear-gradient(transparent 12%, rgb(0 0 0 / .18) 35%, rgb(0 0 0 / .6) 65%, #000);
  mask-image: linear-gradient(transparent 12%, rgb(0 0 0 / .18) 35%, rgb(0 0 0 / .6) 65%, #000); }
.cp-mast-floor line { stroke: currentColor; stroke-width: max(1px, calc(.2 * var(--u))); vector-effect: non-scaling-stroke; }
.cp-mast-title {
  font-size: calc(9.15 * var(--u)); line-height: .9; letter-spacing: .015em; text-transform: uppercase; color: var(--red); white-space: nowrap;
  text-shadow: 0 0 .03em #000, 0 0 .08em rgb(0 0 0 / .9), 0 0 .18em rgb(0 0 0 / .5);
  margin-bottom: calc(2.6 * var(--u));
}
.cp-mast-sub {
  font-size: calc(2.95 * var(--u)); letter-spacing: .03em; text-transform: uppercase; color: #fff; white-space: nowrap;
  -webkit-text-stroke: .12em var(--green); paint-order: stroke fill;
  text-shadow: 0 .05em .1em rgb(0 0 0 / .35); margin-bottom: calc(1 * var(--u));
}
.cp-mast-pub {
  font-size: calc(1.63 * var(--u)); line-height: 1.25;
  /* Paper-coloured glow so the grid lines don't run through the small black letters. */
  text-shadow: 0 0 .12em var(--paper), 0 0 .25em var(--paper), 0 0 .45em var(--paper), 0 0 .7em var(--paper);
}
/* The two small lines keep clear of the Patriote and the logo. */
.cp-mast-sub, .cp-mast-pub { max-width: calc(78 * var(--u)); }
.cp-mast-patriote { position: absolute; left: calc(1.2 * var(--u)); bottom: 0; height: 52%; width: auto; }
.cp-mast-logo { position: absolute; right: calc(2.4 * var(--u)); bottom: 9%; height: 44%; width: auto; }
/* Narrow banner: bigger lines that may wrap, no side figures, so everything stays readable. */
@container (max-width: 34rem) {
  .cp-mast-in { padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(3.5 * var(--u)); }
  .cp-mast-sub, .cp-mast-pub { max-width: none; }
  .cp-mast-title { font-size: calc(8.9 * var(--u)); margin-bottom: calc(6 * var(--u)); }
  .cp-mast-sub { font-size: max(calc(4.4 * var(--u)), .72rem); white-space: normal; line-height: 1.2; margin-bottom: calc(2.5 * var(--u)); }
  .cp-mast-pub { font-size: max(calc(2.6 * var(--u)), .62rem); }
  .cp-mast-patriote, .cp-mast-logo { display: none; }
}

/* ---------- Chantier politique edition ---------- */
.cp-mast-wrap { padding-top: 2rem; }
.cp-mast-wrap .cp-masthead { margin-bottom: 1rem; }
.cp-head { padding-top: 0; }
.cp-issue { margin: 0; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; }
.cp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
/* « Imprimer » buttons, added by script.js on edition pages. */
.print-btn {
  display: inline-flex; align-items: center; gap: .4em; min-height: 36px; padding: .3em .8em;
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--accent); cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: 6px;
}
/* Buttons with an icon (every filled red button: a line icon before the label; « Envoyer »'s paper plane after). */
.btn:has(> svg) { display: inline-flex; align-items: center; justify-content: center; gap: .5em; }
.btn > svg { flex: none; vertical-align: -.2em; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.print-btn:hover { border-color: var(--accent); }
.print-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.print-btn svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.cp-part > .print-btn { margin: 0 0 1rem; }
.cp-body { padding-block: 1.5rem 1rem; }
.cp-body h1 { --h1: clamp(1.9rem, 1.3rem + 3vw, 3rem); text-transform: uppercase; color: var(--accent); }
/* ---------- Long-read components, shared by every long page (editions, recueil): see DESIGN.md ---------- */
.kicker { margin: 0 0 .4em; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .05em; }
.intro { font-size: 1.1rem; color: var(--muted); border-left: 4px solid var(--gold); padding-left: 1rem; }
.byline { font-style: italic; color: var(--muted); }
.sep { clear: both; border: 0; margin: 2.5rem 0; text-align: center; overflow: visible; }
.sep::before { content: "* * *"; letter-spacing: .6em; color: var(--accent); font-weight: 700; }
.fig { margin: .4rem auto 1.25rem; max-width: 20rem; }
.fig img { width: 100%; border: 1px solid var(--border); border-radius: 6px; }
.fig-wide { max-width: none; clear: both; }
.fig > a { display: block; }
.fig figcaption { margin-top: .4rem; font-size: .9rem; line-height: 1.45; color: var(--muted); }
/* Several photos with one caption (an edition's photo reports): a grid that wraps. */
.fig-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .5rem; align-items: start; }
.fig-group figcaption { grid-column: 1 / -1; margin-top: 0; }
.fig-group > .fig-span { grid-column: 1 / -1; } /* a panorama in a group takes the whole row */
@media (min-width: 40rem) {
  .fig-right { float: right; width: min(45%, 290px); margin: .3rem 0 1rem 1.5rem; }
  .fig-left { float: left; width: min(45%, 290px); margin: .3rem 1.5rem 1rem 0; }
}
/* Table of contents, Wikipedia style: sticky in the left margin on wide screens (.toc-side),
   a collapsible box at the top of the text otherwise (.toc-top), plus the floating pill (.toc-pill/.toc-pop).
   Entries are the page's own section labels (edition: contributors' signatures; recueil: the PDF's contents). */
/* Entries are numbered in reading order (the number in the left gutter, the title indented beside it), separated by
   hairlines. Front matter that is not one of the texts (.toc-front, e.g. the recueil's note de l'éditeur) is
   left unnumbered; a list with a single entry shows no number. */
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc li + li { border-top: 1px solid var(--border); }
.toc li a { position: relative; display: block; padding: .5em .4em .5em 1.95em; line-height: 1.35; }
.toc li a::before { content: counter(toc); position: absolute; left: 0; width: 1.4em; text-align: right; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.toc li.toc-front { counter-increment: none; }
.toc li.toc-front a::before, .toc ol:has(> li:only-child) a::before { content: "\2013"; color: var(--muted); font-weight: 400; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.toc-title, .toc summary { margin: 0 0 .5em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; color: var(--muted); }
.toc-side { display: none; }
.toc-top { margin: 0 0 1.5rem; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.toc-top summary { margin: 0; cursor: pointer; }
.toc-top[open] summary { margin-bottom: .5em; }
.cp-contrib, .cp-part { scroll-margin-top: 1rem; }
/* Editions with several articles: each is a .cp-part section whose h2 is the article title. */
.cp-part > h2 { margin-top: .2em; --h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem); }
.cp-part h3 { margin-top: 1.8em; }
@media (min-width: 82rem) {
  .cp-layout { display: grid; grid-template-columns: 1fr minmax(0, 46rem) 1fr; column-gap: 2.5rem; }
  .cp-layout > .cp-body { grid-column: 2; width: auto; margin: 0; }
  .toc-side {
    display: block; grid-column: 1; grid-row: 1; justify-self: end; align-self: start;
    position: sticky; top: 5.5rem; width: min(18rem, 100% - 1rem); max-height: calc(100vh - 6.5rem); overflow-y: auto;
    margin-top: 1.5rem; padding: 1rem 1.25rem; font-size: .92rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  }
  .toc-top { display: none; }
}

/* Below the sidebar width: once the top "Sommaire" box has scrolled away, a small pill sits at the bottom
   right; tapping it opens the list (popover: a tap outside or Esc closes it). Browsers without
   scroll-driven animations (Firefox for now) show the pill all the time. */
.toc-pill, .toc-pop { display: none; }
@media (max-width: 81.99rem) {
  .toc-pill {
    display: inline-flex; align-items: center; gap: .45em; position: fixed; z-index: 40;
    right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
    min-height: 44px; padding: .5em 1.1em; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; font-weight: 700;
    box-shadow: 0 4px 16px rgb(0 0 0 / .2); cursor: pointer;
  }
  .toc-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .toc-pill:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
  .toc-pop:popover-open {
    display: block; position: fixed; inset: auto max(1rem, env(safe-area-inset-right)) calc(max(1rem, env(safe-area-inset-bottom)) + 3.6rem) auto;
    width: min(20rem, calc(100vw - 2rem)); max-height: min(60vh, 28rem); overflow: auto; margin: 0; padding: 1rem 1.25rem;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
    box-shadow: 0 12px 32px rgb(0 0 0 / .28);
  }
  @supports (animation-timeline: view()) {
    .cp-layout { timeline-scope: --toc-top; }
    .toc-top { view-timeline: --toc-top block; }
    .toc-pill { animation: toc-pill-in linear both; animation-timeline: --toc-top; animation-range: exit 0% exit 100%; }
  }
}
@keyframes toc-pill-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }

/* Image zoom: the HTML Popover API (no JavaScript). Esc, a click outside or × closes it. */
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.lightbox { padding: 0; border: 0; background: transparent; overflow: visible; max-width: 95vw; max-height: 92vh; }
.lightbox img { display: block; width: auto; height: auto; max-width: 95vw; max-height: 92vh; border-radius: 6px; box-shadow: 0 10px 40px rgb(0 0 0 / .5); }
.lightbox::backdrop { background: rgb(15 10 8 / .82); backdrop-filter: blur(3px); }
.lightbox-close {
  position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--gold); color: #2a1a14; font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / .4);
}
.lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 30rem) { .lightbox-close { top: 6px; right: 6px; } }
.cp-foot { clear: both; padding-block: 1rem 3rem; border-top: 1px solid var(--border); }
.cp-foot p { margin-top: 1rem; color: var(--muted); }

/* ---------- Recueil: "Les principes en cause dans l'exercice de la souveraineté du Québec" ---------- */
.rc-hero { background: var(--hero); color: var(--hero-text); padding-block: 2.5rem 3rem; }
.rc-hero-in { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem; }
.rc-cover { flex: none; width: clamp(140px, 28vw, 240px); }
.rc-hero-text { flex: 1 1 20rem; min-width: 0; }
.rc-kicker { color: var(--gold); font-style: italic; }
.rc-hero h1 { --h1: clamp(1.8rem, 1.1rem + 3.2vw, 3.1rem); line-height: 1.1; margin-bottom: .35em; }
.rc-author { font-weight: 700; font-size: 1.15rem; color: var(--gold); margin-bottom: 1.4em; }
.rc-hero .btn { background: var(--gold); border-color: var(--gold); color: #2a1a14; }
.rc-hero .btn:hover { background: #fff; border-color: #fff; color: #2a1a14; }
.rc-hero .btn-outline { background: transparent; border-color: var(--hero-text); color: var(--hero-text); }
.rc-hero .btn-outline:hover { background: var(--hero-text); color: var(--hero); }
/* Reading progress, drawn by the browser from the scroll position (no script); absent where unsupported. */
.rc-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .rc-progress {
    display: block; position: fixed; top: 68px; left: 0; z-index: 49; height: 3px; width: 100%;
    background: var(--gold); transform-origin: 0 50%; transform: scaleX(0);
    animation: rc-progress linear both; animation-timeline: scroll(root);
  }
}
@keyframes rc-progress { to { transform: scaleX(1); } }
.rc-body { padding-top: 2rem; padding-bottom: 3rem; }
.rc-note { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 3rem; scroll-margin-top: 1rem; }
.rc-note h2 { font-size: 1.3rem; }
.rc-pub { font-size: .92rem; color: var(--muted); margin-bottom: 0; }
.rc-text { padding-top: 1.5rem; margin-top: 2.5rem; border-top: 1px solid var(--border); scroll-margin-top: 1rem; }
.rc-text-head { margin-bottom: 1.5rem; }
.rc-num { display: block; font-size: 3.2rem; line-height: 1; font-weight: 800; color: var(--gold); letter-spacing: .02em; margin-bottom: .3rem; }
.rc-text h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); text-transform: none; letter-spacing: 0; }
.rc-text h3 { margin: 2.2rem 0 .8rem; font-size: 1rem; line-height: 1.35; letter-spacing: .06em; color: var(--accent); scroll-margin-top: 1rem; }
.rc-text blockquote { margin: 1.25rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--accent); font-size: 1.04rem; color: var(--text); }
.rc-text blockquote + blockquote { margin-top: -.5rem; }
.rc-text blockquote p { margin: 0; }
.fn a { text-decoration: none; font-weight: 700; padding: 0 .1em; }
.fn { font-size: .75em; line-height: 0; }
.rc-notes-title { font-size: .95rem !important; }
.rc-notes { list-style: none; margin: 0; padding: 0; font-size: .92rem; color: var(--muted); }
.rc-notes li { margin-bottom: .6em; scroll-margin-top: 5rem; }
.rc-notes li:target { background: rgb(244 196 48 / .18); border-radius: 4px; }
.rc-back { font-weight: 700; margin-right: .35em; text-decoration: none; }
.rc-colophon { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); text-align: center; color: var(--muted); }
.rc-colophon img { width: 90px; margin: 0 auto 1rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--hero); color: var(--hero-text); padding-block: 2rem; font-size: .95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.site-footer img { width: 56px; }
.site-footer p { margin: 0 0 .3em; }
.site-footer a { color: var(--hero-text); }
.site-footer a:hover { color: var(--gold); }
.site-footer .agent { opacity: .85; }
/* Links line (also gives Google's sitelinks the pages we want: Chantier politique, Devenir membre). */
.footer-links { display: flex; flex-wrap: wrap; gap: .2em 0; list-style: none; margin: 0; padding: 0; }
.footer-links li + li::before { content: "·"; margin: 0 .6em; opacity: .6; }
.footer-links a[aria-current] { color: var(--gold); text-decoration: none; }
/* Deployed commit's short hash (script.js, from /version.txt): bottom right corner, discreet. */
.footer-sha { align-self: flex-end; margin: 0 0 0 auto !important; font-size: .75rem; opacity: .6; }
.footer-sha code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/* Narrow: one link per line, no dots (a dot would start a wrapped line). */
@media (max-width: 30rem) { .footer-links { flex-direction: column; gap: .3em; } .footer-links li + li::before { content: none; } }

/* ---------- Browsers without the Popover API (Firefox < 125, Safari < 17) ---------- */
/* No ☰ panel, contents pill or image zoom there: the menu stays in the header and wraps under the logo,
   images simply stay in the text. Everything remains usable. */
@supports not selector(:popover-open) {
  .menu-toggle, .toc-pill, .toc-pop, .lightbox, .site-nav .social-menu { display: none !important; }
  .site-nav[popover] {
    display: block !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important;
    max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    background: none !important; box-shadow: none !important; overflow: visible !important; color: inherit !important;
  }
  .header-tools .social { display: flex !important; }
  .zoom { cursor: default; }
}
@supports not selector(:popover-open) {
  @media (max-width: 69rem) {
    .site-nav { order: 2; flex-basis: 100%; }
    .header-tools { order: 1; }
    .site-nav ul:not(.social) { flex-direction: row !important; flex-wrap: wrap !important; gap: .25rem 1.1rem !important; }
    .site-nav ul:not(.social) a { display: inline-block !important; padding: .45em 0 !important; border-bottom: 3px solid transparent !important; color: var(--hero-text) !important; }
    .site-nav ul:not(.social) a[aria-current] { border-bottom-color: var(--gold) !important; }
    /* the wrapped menu makes the header too tall to keep sticky on small screens */
    .site-header { position: static; }
    html { scroll-padding-top: 1rem; }
  }
}

/* ---------- Motion ---------- */
/* Gentle, CSS only, and nothing at all for people who asked their system for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Colours ease when switching between light and dark. */
  body, .site-header, .hero, .site-footer, .option, .editions a, h1, h2, h3, .lead, .slogan {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
  }

  /* Opening of the page: the first block fades in. Opacity only: a slide made every load look like the
     page scrolled itself. */
  .hero .wrap, .page-head, .cp-head { animation: rise .6s cubic-bezier(.2, .7, .3, 1) both; }

  /* Sections fade up as they scroll into view, where the browser supports scroll-driven animations;
     elsewhere they are simply shown. Done once the top 160px are on screen, so a section is never still
     faded while you read it (a range in % of the section stayed faded on tall screens). */
  @supports (animation-timeline: view()) {
    main section .wrap {
      animation: rise-far linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 160px;
    }
  }

  /* Home page: one logo at a time. The header's logo and « PMLQ » stay hidden while the hero logo is on screen,
     and fade in as it slides out under the header (the hero logo itself fades and slides up a little once
     it is about two-thirds under) (its own view timeline, shared through timeline-scope; plays
     backwards going up). Unsupported or reduced motion: both logos simply stay. */
  @supports (animation-timeline: view()) {
    :root:has(.hero-logo) { timeline-scope: --hero-logo; }
    .hero-logo {
      view-timeline: --hero-logo block; view-timeline-inset: 68px 0;
      animation: hero-logo-out linear both; animation-timeline: --hero-logo; animation-range: exit 60% exit 90%;
    }
    :root:has(.hero-logo) .brand {
      animation: brand-in linear both; animation-timeline: --hero-logo; animation-range: exit 45% exit 85%;
    }
  }

  /* Home page, wide screens: « Accueil » in the menu melts into an up arrow over the first screenful of
     scrolling (back to top), and back again going up. The word keeps its width, so nothing shifts. */
  @supports (animation-timeline: scroll()) {
    @media (min-width: 69.01rem) {
      .nav-top {
        display: block; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
        fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
        animation: nav-top-in linear both; animation-timeline: scroll(root); animation-range: 250px 550px;
      }
      .nav-home-label { display: inline-block; animation: nav-label-out linear both; animation-timeline: scroll(root); animation-range: 100px 400px; }
      .nav-home { animation: nav-underline-out linear both; animation-timeline: scroll(root); animation-range: 100px 400px; }
    }
  }

  /* Hover and press feedback. */
  .btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgb(0 0 0 / .15); }
  .btn:active { transform: translateY(0); box-shadow: none; }
  .btn-send svg { transition: transform .25s ease; }
  .btn-send:hover svg { transform: translate(3px, -3px) rotate(-6deg); }
  .site-nav a { transition: color .2s ease, border-color .2s ease; }
  .site-nav ul.sub { transition: opacity .15s ease, visibility .15s; }
  .caret { transition: transform .2s ease; }
  .site-nav a:hover:not([aria-current]) { border-bottom-color: rgb(244 196 48 / .5); }
  .social a, .theme-toggle { transition: color .2s ease, background-color .2s ease; }
  .option { transition: transform .25s ease, box-shadow .25s ease, background-color .3s ease, border-color .3s ease; }
  .option:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgb(0 0 0 / .1); }
  /* Arriving from the hero's « Devenir membre » (to #participer, so the section title shows) or « Faire une
     contribution » (#soutenir): a gold glow around that whole way (title, tiles, small print), pulses twice
     once the jump has scrolled there (under 3s in all). */
  #participer:target .way:first-child::before, .way:target::before { animation: glow 1.3s ease-in-out .3s 2; }
  .editions a { transition: transform .2s ease, border-color .2s ease, background-color .3s ease; }
  .editions a:hover { transform: translateX(4px); }
  .poster, .book, a.cp-masthead { transition: transform .3s ease, box-shadow .3s ease; }
  a:hover > .poster, a.cp-masthead:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(0 0 0 / .2); }
  a.cover:hover .book { transform: translateY(-4px) rotate(-1deg);
    box-shadow: 1px 3px 4px rgb(0 0 0 / .16), 4px 12px 18px -4px rgb(0 0 0 / .22), 8px 26px 36px -12px rgb(0 0 0 / .3); }

  html { scroll-behavior: smooth; }

  /* Zoomed images fade and grow in. */
  .lightbox, .lightbox::backdrop { transition: opacity .25s ease, transform .25s ease, overlay .25s allow-discrete, display .25s allow-discrete; }
  .lightbox { opacity: 0; transform: scale(.96); }
  .lightbox::backdrop { opacity: 0; }
  .lightbox:popover-open { opacity: 1; transform: none; }
  .lightbox:popover-open::backdrop { opacity: 1; }
  @starting-style {
    .lightbox:popover-open { opacity: 0; transform: scale(.96); }
    .lightbox:popover-open::backdrop { opacity: 0; }
  }

  /* The moon/sun icon turns in when the theme changes. */
  #theme ~ svg { animation: turn-in .4s ease both; }
}

@keyframes rise { from { opacity: 0; } }
@keyframes nav-label-out { to { opacity: 0; transform: translateY(-8px) scale(.85); filter: blur(3px); } }
@keyframes nav-underline-out { to { border-bottom-color: transparent; } }
@keyframes nav-top-in { from { opacity: 0; transform: translateY(10px) scale(.6); } }
/* Hidden, not just transparent, before it shows: no click or Tab stop on an invisible logo. */
@keyframes brand-in { from { opacity: 0; visibility: hidden; } }
@keyframes hero-logo-out { to { opacity: 0; transform: translateY(-20px); } }
@keyframes glow { 50% { box-shadow: 0 0 0 4px var(--gold), 0 0 40px 12px rgb(244 196 48 / .75); } }
@keyframes rise-far { from { opacity: 0; transform: translateY(30px); } }
@keyframes turn-in { from { opacity: 0; transform: rotate(-90deg) scale(.6); } }

/* ---------- Print: editions as a newspaper page ---------- */
/* One column, read top to bottom: no split columns, so the reading order is never in doubt. Newspaper
   typography instead: the masthead in colour, number and date between a thick and a thin rule, a big serif
   headline, a raised initial on each article's first paragraph (not a floated drop cap: Chrome
   can strand a floated letter on the next page), articles opened by a heavy rule, photos with
   their captions kept whole, small photos floated beside the text, a running footer with page numbers
   (Chrome; other browsers just omit it). The text block is at most 17cm wide (centred in landscape) for
   a comfortable line length. Site chrome, contents and buttons hidden; dark mode ignored.
   "Imprimer cet article" sets .print-one on <html> and .print-this on its section to print it alone. */
@media print {
  :root, :root:has(#theme:checked) {
    color-scheme: light; --bg: #fff; --surface: #fff; --border: #bbb; --text: #111; --muted: #444;
    --accent: #111; --accent-hover: #111; --green: #333;
  }
  @page {
    margin: 1.6cm 1.8cm 1.9cm;
    @bottom-left { content: "Chantier politique"; font: italic 8pt Georgia, serif; color: #555; }
    @bottom-right { content: counter(page) " / " counter(pages); font: 8pt Georgia, serif; color: #555; }
  }
  * { animation: none !important; transition: none !important; }
  body { display: block; min-height: 0; background: #fff; color: #111; font: 11pt/1.5 Georgia, "Times New Roman", serif; }
  main { max-width: 17cm; margin: 0 auto; }
  .site-header, .site-footer, .skip, .toc, .toc-pill, .print-btn, .lightbox, .cp-foot .actions { display: none !important; }
  a { color: inherit; text-decoration: none; }
  .wrap, .cp-layout > .cp-body { width: auto; max-width: none; margin: 0; padding: 0; }
  .cp-layout { display: block; }

  /* Masthead and dateline */
  .cp-masthead { print-color-adjust: exact; -webkit-print-color-adjust: exact; break-inside: avoid; }
  .cp-mast-wrap { padding: 0; }
  .cp-head { display: block; margin: .15cm 0 .5cm; padding: .1cm 0 .12cm; border-top: 2.5pt solid #111; border-bottom: .6pt solid #111; text-align: center; }
  .cp-issue { color: #111; font: 700 8.5pt/1.2 Georgia, serif; letter-spacing: .16em; }

  /* Headlines */
  .cp-body { text-align: justify; hyphens: auto; }
  .cp-body * { container-type: normal; }
  .cp-body h1, .cp-body h2, .cp-body h3 { color: #111; text-align: left; text-transform: none; text-wrap: balance; hyphens: manual; break-after: avoid; break-inside: avoid; }
  .cp-body h1 { font: 700 27pt/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.01em; margin: .05cm 0 .3cm; }
  .cp-body h2 { font: 700 17pt/1.15 Georgia, "Times New Roman", serif; margin: .45cm 0 .2cm; }
  .cp-body h3 { font: 700 12pt/1.25 Georgia, serif; margin: .35cm 0 .1cm; }
  .kicker { color: #9b1111; font: 700 8pt/1.3 Georgia, serif; letter-spacing: .14em; margin: 0 0 .1cm; break-after: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  /* Browsers often ignore break-after: avoid, so a title reserves ~4 lines below it and moves to the next page without them. */
  .cp-body h2::after, .cp-body h3::after { content: ""; display: block; height: 6em; margin-bottom: -6em; }
  .cp-lead { margin-bottom: .35cm; padding-bottom: .3cm; border-bottom: .6pt solid #111; }
  .intro { color: #222; font-size: 12pt; font-style: italic; line-height: 1.45; border: 0; padding: 0; margin: .2cm 0 0; }

  /* Articles: each section (several-article editions) opens with a heavy rule; first paragraph gets a drop cap. */
  .cp-body section { padding-block: 0; border: 0; } /* undo the screen's main section spacing */
  .cp-part { clear: both; margin-top: .6cm; padding-top: .25cm; border-top: 2.5pt solid #111; break-before: auto; }
  .cp-part:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
  .cp-body > hr.sep:has(+ .cp-part), .cp-lead + hr.sep { display: none; } /* the article's own rule separates it */
  .cp-lead:has(> h1.visually-hidden:only-child) { margin: 0; padding: 0; border: 0; }
  .cp-part > .kicker { margin-top: 0; }
  .cp-body > :is(.cp-lead, h2) ~ p:not(.byline, .kicker, .intro):not(:is(.cp-lead, h2) ~ p:not(.byline, .kicker, .intro) ~ p)::first-letter,
  .cp-part > h2 ~ p:not(.byline):not(h2 ~ p:not(.byline) ~ p)::first-letter,
  .cp-contrib > p:first-of-type:not(.byline)::first-letter {
    font: 700 2.1em/1 Georgia, serif; color: #111;
  }
  p, li { orphans: 3; widows: 3; }
  .cp-body p { margin: 0 0 .5em; }
  .byline { color: #333; text-align: right; margin-top: .2em; break-before: avoid; }
  hr.sep { clear: both; height: 0; margin: .45cm auto; border: 0; break-after: avoid; }
  hr.sep::before { font-size: 10pt; color: #111; }

  /* Photos: never split, caption kept with the picture. Small ones float beside the text, wide ones span it. */
  .fig { margin: .1cm auto .35cm; max-width: none; break-inside: avoid; }
  .fig img { width: auto; max-width: 100%; max-height: 7.5cm; margin-inline: auto; object-fit: contain; border: 0; border-radius: 0; }
  .fig-right, .fig-left { width: 42%; }
  .fig-right { float: right; margin: .1cm 0 .25cm .5cm; }
  .fig-left { float: left; margin: .1cm .5cm .25cm 0; }
  .fig-right img, .fig-left img { max-height: 6cm; }
  .fig-wide { clear: both; }
  .cp-lead .fig img { max-height: 9cm; }
  .fig-group { grid-template-columns: repeat(auto-fit, minmax(4.5cm, 1fr)); gap: .12cm; }
  .fig-group img { width: 100%; height: 3.8cm; max-height: none; object-fit: cover; }
  .fig-group > .fig-span img { height: auto; max-height: 6cm; }
  .fig figcaption { color: #444; font: italic 8.5pt/1.35 Georgia, serif; text-align: left; margin-top: .08cm; padding-top: .05cm; border-top: .4pt solid #999; }
  .rc-notes-title { font-size: 9pt !important; }
  .rc-notes { font-size: 8.5pt; color: #333; text-align: left; }
  .cp-foot { clear: both; break-inside: avoid; border-top: 2.5pt solid #111; margin-top: .5cm; padding: .2cm 0 0; font-size: 8.5pt; text-align: center; }
  .cp-foot p { margin: 0 0 .2em; }
  .print-one .cp-part:not(.print-this), .print-one .cp-lead, .print-one .cp-body > hr.sep { display: none !important; }
  .print-one .cp-part.print-this { margin-top: 0; padding-top: 0; border-top: 0; }
}
/* Narrow paper (A5): no room beside a photo, so photos stack in the text. */
@media print and (max-width: 15cm) {
  .fig-right, .fig-left { float: none; width: auto; margin: .1cm auto .35cm; }
  .cp-body h1 { font-size: 21pt; }
}

/* Dev preview notice, added by script.js on dev.<project>.pages.dev only. */
#bandeau-dev {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem .75rem; margin: 0; padding: .75rem 1rem;
  background: var(--gold); color: var(--hero); text-align: center; font-weight: 700;
}
#bandeau-dev > span { flex: 1 1 12rem; }
#bandeau-dev a { color: inherit; }
/* Commit badge: label and short hash, like a CI status badge. */
#bandeau-dev .dev-sha {
  display: inline-flex; flex: none; border: 1px solid var(--hero); border-radius: .3rem; overflow: hidden;
  font-size: .8em; line-height: 1.6; text-decoration: none;
}
#bandeau-dev .dev-sha span { padding: 0 .45em; background: var(--hero); color: var(--gold); font-weight: 600; }
#bandeau-dev .dev-sha code { padding: 0 .45em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 400; }
#bandeau-dev .dev-sha:hover code { text-decoration: underline; }
@media print { #bandeau-dev { display: none; } }