/* SPDX-FileCopyrightText: 2026 FTW.group Sàrl */
/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* ==========================================================================
   SYSTEMIC.CLUB — feuille de style unique.
   Identité reprise de la maquette (docs/maquette/design.md) : encre sur papier
   chaud, presque monochrome, couleur réservée aux états, filets fins, titres en
   Prata, texte en Geist. Trois paliers : mobile ≤ 640 px, intermédiaire
   641–1023 px, large ≥ 1024 px. Aucun style en ligne (politique de sécurité).
   ========================================================================== */

@layer reset, jetons, base, composants, mise-en-page, pages, utilitaires;

/* Polices hébergées par le site (licence OFL 1.1, voir assets/polices/) */
@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../polices/prata-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../polices/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../polices/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ Remise à zéro */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[class], ol[class], nav ul, nav ol { padding: 0; list-style: none; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  legend { padding: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

/* ------------------------------------------------------------------ Jetons */
@layer jetons {
  :root {
    color-scheme: light;
    --fond: #fcfcfb;
    --panneau: #f6f6f4;
    --releve: #fcfcfb;
    --champ: #fcfcfb;
    --encre: #111214;
    --texte: #3a3b3f;
    --discret: #5f6064;
    --filet: #e0e0dd;
    --filet-appuye: #c4c4c0;
    --bordure-controle: #8a8a85;
    --survol: #1112140b;
    --selection: #ededea;
    --sur-encre: #fcfcfb;
    --encre-survol: #2c2d31;
    --focus: #111214;
    --voile: #11121457;
    --barre: #fcfcfbf0;
    --succes: #2e6a47;
    --succes-doux: #eaf1ec;
    --attention: #765511;
    --attention-doux: #f5efe0;
    --danger: #9d2f2b;
    --danger-doux: #f8ebe9;
    --info: #2b5b76;
    --info-doux: #e8eef2;
    --ombre-flottante: 0 0 0 1px var(--filet), 0 24px 64px -28px #1112144d;
    --ombre-dock: 0 16px 40px -24px #11121466;
    --ombre-menu: 0 24px 48px -32px #1112144d;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f6064' stroke-width='1.5'/%3E%3C/svg%3E");

    --police-titre: "Prata", Georgia, "Times New Roman", serif;
    --contour-titre: clamp(.2px, .008em, .5px);
    --police: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --police-chasse-fixe: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --taille-xs: .75rem;
    --taille-petite: .875rem;
    --taille: 1rem;
    --taille-chapeau: 1.0625rem;
    --titre-petit: 1.125rem;
    --titre-section: 1.375rem;
    --titre-page: 1.75rem;
    --titre-affiche: 2.25rem;
    --interligne-titre: 1.16;
    --interligne-section: 1.24;
    --interligne: 1.55;
    --approche-titre: -.012em;
    --approche-section: -.006em;
    --approche-libelle: .1em;
    --mesure: 68ch;

    --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
    --gouttiere: 20px;
    --largeur-page: 1200px;
    --largeur-etroite: 760px;
    --rayon-xs: 4px;
    --rayon: 6px;
    --rayon-surface: 8px;
    --hauteur-controle: 44px;
    --hauteur-barre: 56px;
    --hauteur-dock: 64px;
    --largeur-barre-laterale: 248px;
    --marge-haut: env(safe-area-inset-top, 0px);
    --marge-bas: env(safe-area-inset-bottom, 0px);

    --duree-vive: .12s;
    --duree: .18s;
    --duree-lente: .24s;
    --courbe: cubic-bezier(.22, 1, .36, 1);
    --courbe-sortie: cubic-bezier(.4, 0, 1, 1);
  }

  :root[data-theme="sombre"] {
    color-scheme: dark;
    --fond: #0e1013;
    --panneau: #0a0c0f;
    --releve: #15181c;
    --champ: #121418;
    --encre: #eceae6;
    --texte: #b6b7ba;
    --discret: #8f9196;
    --filet: #2b2e33;
    --filet-appuye: #3a3d43;
    --bordure-controle: #666a71;
    --survol: #eceae60e;
    --selection: #1d2025;
    --sur-encre: #0e1013;
    --encre-survol: #d4d2cd;
    --focus: #eceae6;
    --voile: #00000094;
    --barre: #0e1013f0;
    --succes: #8cc6a0;
    --succes-doux: #14231a;
    --attention: #e0c07a;
    --attention-doux: #272114;
    --danger: #f0a39d;
    --danger-doux: #2c1918;
    --info: #94bfd8;
    --info-doux: #13222c;
    --ombre-flottante: 0 0 0 1px var(--filet-appuye), 0 28px 72px -24px #000000b8;
    --ombre-dock: 0 16px 40px -20px #000000b3;
    --ombre-menu: 0 24px 48px -28px #000000a6;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238f9196' stroke-width='1.5'/%3E%3C/svg%3E");
    --contour-titre: clamp(.12px, .004em, .25px);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
      --fond: #0e1013;
      --panneau: #0a0c0f;
      --releve: #15181c;
      --champ: #121418;
      --encre: #eceae6;
      --texte: #b6b7ba;
      --discret: #8f9196;
      --filet: #2b2e33;
      --filet-appuye: #3a3d43;
      --bordure-controle: #666a71;
      --survol: #eceae60e;
      --selection: #1d2025;
      --sur-encre: #0e1013;
      --encre-survol: #d4d2cd;
      --focus: #eceae6;
      --voile: #00000094;
      --barre: #0e1013f0;
      --succes: #8cc6a0;
      --succes-doux: #14231a;
      --attention: #e0c07a;
      --attention-doux: #272114;
      --danger: #f0a39d;
      --danger-doux: #2c1918;
      --info: #94bfd8;
      --info-doux: #13222c;
      --ombre-flottante: 0 0 0 1px var(--filet-appuye), 0 28px 72px -24px #000000b8;
      --ombre-dock: 0 16px 40px -20px #000000b3;
      --ombre-menu: 0 24px 48px -28px #000000a6;
      --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238f9196' stroke-width='1.5'/%3E%3C/svg%3E");
      --contour-titre: clamp(.12px, .004em, .25px);
    }
  }

  @media (width >= 641px) {
    :root { --gouttiere: 32px; --titre-page: 2rem; --titre-affiche: 2.75rem; }
  }
  @media (width >= 1024px) {
    :root { --gouttiere: 48px; --titre-affiche: 3rem; }
  }
}

/* ------------------------------------------------------------------ Base */
@layer base {
  html { background: var(--fond); scroll-padding-top: calc(var(--hauteur-barre) + var(--e4)); }
  body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--taille);
    line-height: var(--interligne);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* Aucune police italique n’est fournie : l’italique est dessiné par le navigateur (seulement lui ;
     les graisses, elles, existent). Sans cela, *italique* ne se verrait nulle part. */
  em, i, cite { font-synthesis: style; }
  h1, h2, h3 {
    color: var(--encre);
    font-family: var(--police-titre);
    font-weight: 400;
    text-wrap: balance;
    -webkit-text-stroke: var(--contour-titre) currentColor;
  }
  h1 { font-size: var(--titre-page); line-height: var(--interligne-titre); letter-spacing: var(--approche-titre); }
  h2 { font-size: var(--titre-section); line-height: var(--interligne-section); letter-spacing: var(--approche-section); }
  h3 { font-size: var(--titre-petit); line-height: var(--interligne-section); }
  h4, h5, h6 { color: var(--encre); font-size: var(--taille); font-weight: 600; }
  p, li, dd { text-wrap: pretty; }
  strong, b { color: var(--encre); font-weight: 600; }
  a { color: var(--encre); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--filet-appuye); transition: text-decoration-color var(--duree-vive) var(--courbe); }
  a:hover { text-decoration-color: currentColor; }
  code, kbd { font-family: var(--police-chasse-fixe); font-size: .9em; }
  ::selection { background: var(--encre); color: var(--sur-encre); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
  :focus:not(:focus-visible) { outline: none; }
  main:focus { outline: none; }
  hr { border: 0; border-top: 1px solid var(--filet); margin: var(--e6) 0; }

  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
}

/* ------------------------------------------------------------------ Composants */
@layer composants {
  /* Icônes (Lucide) : trait de la couleur du texte */
  .icone { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

  /* Avatar : photo ronde, ou initiales sur fond de panneau */
  .avatar { flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--selection); color: var(--encre); object-fit: cover; font-weight: 600; letter-spacing: .02em; }
  .avatar--petit { width: 32px; height: 32px; font-size: .75rem; }
  .avatar--moyen { width: 48px; height: 48px; font-size: .9375rem; }
  .avatar--grand { width: 96px; height: 96px; font-size: 1.75rem; font-family: var(--police-titre); font-weight: 400; }

  /* Logo */
  .logo { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); text-decoration: none; }
  .logo .marque { width: 30px; height: 30px; }
  .logo__nom { font-family: var(--police-titre); font-size: 1.25rem; line-height: 1; letter-spacing: -.01em; -webkit-text-stroke: var(--contour-titre) currentColor; }
  .logo__nom span { color: var(--discret); }

  /* Textes d’appoint */
  .surtitre { color: var(--discret); font-size: var(--taille-xs); font-weight: 500; letter-spacing: var(--approche-libelle); line-height: 1.5; text-transform: uppercase; }
  .chapeau { max-width: var(--mesure); color: var(--texte); font-size: var(--taille-chapeau); line-height: 1.6; }
  .titre-affiche { font-size: var(--titre-affiche); line-height: 1.08; letter-spacing: -.02em; }
  .titre-section-grand { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem); line-height: 1.15; letter-spacing: -.015em; }
  .texte-courant { max-width: var(--mesure); }
  .texte-courant > * + * { margin-top: var(--e4); }
  .discret { color: var(--discret); font-size: var(--taille-petite); }
  .intitule { color: var(--encre); font-size: var(--taille-xs); font-weight: 600; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }

  /* Boutons */
  .bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
    min-height: var(--hauteur-controle); max-width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--encre); border-radius: var(--rayon);
    background: var(--encre); color: var(--sur-encre);
    font-size: var(--taille-petite); font-weight: 500; line-height: 20px; text-align: center; text-decoration: none;
    transition: background-color var(--duree-vive) var(--courbe), border-color var(--duree-vive) var(--courbe), color var(--duree-vive) var(--courbe), scale var(--duree) var(--courbe);
  }
  .bouton:hover { background: var(--encre-survol); border-color: var(--encre-survol); }
  .bouton:active { scale: .98; }
  .bouton:disabled, .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
  .bouton .icone { width: 18px; height: 18px; }
  .bouton--secondaire { border-color: var(--bordure-controle); background: transparent; color: var(--encre); }
  .bouton--secondaire:hover { border-color: var(--encre); background: var(--survol); }
  .bouton--discret { border-color: transparent; background: transparent; color: var(--texte); }
  .bouton--discret:hover { border-color: transparent; background: var(--survol); color: var(--encre); }
  .bouton--danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--filet)); background: transparent; color: var(--danger); }
  .bouton--danger:hover { border-color: var(--danger); background: var(--danger-doux); }
  .bouton--petit { min-height: 36px; padding: 6px 12px; }
  .bouton--large { width: 100%; }
  .bouton-icone { display: inline-grid; place-items: center; width: var(--hauteur-controle); height: var(--hauteur-controle); border-radius: var(--rayon); color: var(--texte); text-decoration: none; }
  .bouton-icone:hover, .bouton-icone[aria-current] { background: var(--survol); color: var(--encre); }
  .groupe-boutons { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
  .lien-fleche { display: inline-flex; align-items: center; gap: var(--e2); min-height: 24px; color: var(--encre); font-size: var(--taille-petite); font-weight: 500; text-decoration-color: var(--filet-appuye); }
  .lien-fleche .icone { width: 16px; height: 16px; transition: translate var(--duree) var(--courbe); }
  .lien-fleche:hover .icone { translate: 3px 0; }
  /* Lien de retour, en tête d’une fiche ; .retour le rapproche du haut de la page */
  .retour { margin: calc(-1 * var(--e3)) 0 var(--e3); }
  .lien-retour { display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--hauteur-controle); color: var(--texte); font-size: var(--taille-petite); font-weight: 500; text-decoration: none; }
  .lien-retour:hover { color: var(--encre); text-decoration: underline; text-decoration-color: currentColor; }
  .lien-retour .icone { width: 16px; height: 16px; transition: translate var(--duree) var(--courbe); }
  .lien-retour:hover .icone { translate: -3px 0; }
  /* Au doigt, toute cible fait au moins 44 px de haut (au pointeur fin, 24 px suffisent : WCAG 2.5.8) */
  @media (pointer: coarse) {
    .bouton--petit, .lien-fleche { min-height: var(--hauteur-controle); }
  }

  /* Formulaires */
  .formulaire { display: grid; gap: var(--e5); }
  .champ { display: grid; gap: 6px; min-width: 0; }
  .champ > label, .legende { color: var(--encre); font-size: var(--taille-petite); font-weight: 500; line-height: 1.4; }
  .champ-facultatif { color: var(--discret); font-weight: 400; }
  .champ-aide { color: var(--discret); font-size: var(--taille-petite); line-height: 1.5; }
  .champ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"]),
  .champ select, .champ textarea {
    width: 100%; min-width: 0; min-height: var(--hauteur-controle);
    padding: 10px 12px;
    border: 1px solid var(--bordure-controle); border-radius: var(--rayon);
    background-color: var(--champ); color: var(--encre);
    font-size: var(--taille); line-height: 22px;
    transition: border-color var(--duree-vive) var(--courbe), box-shadow var(--duree-vive) var(--courbe);
  }
  .champ textarea { min-height: 120px; resize: vertical; }

  /* Éditeur de texte mis en forme (js/editeur.js) : barre d’outils, zone d’écriture, mode Markdown */
  .editeur { display: grid; min-width: 0; border: 1px solid var(--bordure-controle); border-radius: var(--rayon); background: var(--champ); }
  .editeur:hover { border-color: var(--encre); }
  .editeur:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--encre); }
  .champ--erreur .editeur, .editeur:has([aria-invalid="true"]) { border-color: var(--danger); }
  .editeur__barre { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 4px; border-bottom: 1px solid var(--filet); border-radius: var(--rayon) var(--rayon) 0 0; background: var(--panneau); }
  .editeur__bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 8px; border: 0; border-radius: var(--rayon-xs); background: transparent; color: var(--texte); font-size: var(--taille-xs); font-weight: 600; cursor: pointer; }
  .editeur__bouton .icone { width: 18px; height: 18px; }
  .editeur__bouton:hover:not(:disabled) { background: var(--selection); color: var(--encre); }
  .editeur__bouton[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); }
  .editeur__bouton:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .editeur__bouton:disabled { opacity: .4; cursor: default; }
  .editeur__bouton--source { margin-left: auto; }
  .editeur__separateur { width: 1px; height: 24px; margin: 0 4px; background: var(--filet); }
  .editeur__zone > :first-child { margin-top: 0; }
  .editeur__zone { position: relative; max-width: none; min-height: 240px; max-height: 70vh; overflow: auto; padding: 12px 14px; color: var(--texte); line-height: var(--interligne); overflow-wrap: anywhere; resize: vertical; outline: none; }
  .editeur__zone[data-vide]::before { content: attr(data-placeholder); position: absolute; top: 12px; left: 14px; color: var(--discret); pointer-events: none; }
  .editeur__zone a { color: var(--encre); text-decoration: underline; }
  .editeur__zone hr { margin-block: var(--e4); border: 0; border-top: 1px solid var(--filet-appuye); }
  .editeur__zone code { padding: 0 4px; border-radius: var(--rayon-xs); background: var(--selection); font-family: var(--police-chasse-fixe); font-size: .92em; }
  .champ .editeur textarea { min-height: 240px; border: 0; border-radius: 0 0 var(--rayon) var(--rayon); outline-offset: -2px; font-family: var(--police-chasse-fixe); font-size: var(--taille-petite); }
  @media (pointer: coarse) { .editeur__bouton { min-width: 44px; height: 44px; } }
  .champ input[type="file"] { max-width: 100%; color: var(--texte); font-size: var(--taille-petite); }
  .champ input[type="file"]::file-selector-button {
    min-height: var(--hauteur-controle); margin-right: var(--e3); padding: 10px 16px; border: 1px solid var(--bordure-controle); border-radius: var(--rayon);
    background: transparent; color: var(--encre); font: 500 var(--taille-petite)/20px var(--police); cursor: pointer;
    transition: border-color var(--duree-vive) var(--courbe), background-color var(--duree-vive) var(--courbe);
  }
  .champ input[type="file"]::file-selector-button:hover { border-color: var(--encre); background: var(--survol); }
  .champ input[type="file"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .champ--erreur input[type="file"]::file-selector-button { border-color: var(--danger); }
  .champ select { appearance: none; padding-right: 36px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 14px center; }
  .champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--encre); }
  .champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--encre); }
  .champ ::placeholder { color: var(--discret); opacity: 1; }
  .champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--danger); }
  .champ-erreur { display: flex; gap: 6px; align-items: flex-start; color: var(--danger); font-size: var(--taille-petite); line-height: 1.45; }
  .champ-erreur .icone { width: 16px; height: 16px; margin-top: 2px; }
  .champ--code input { max-width: 14ch; font-family: var(--police-chasse-fixe); font-size: 1.375rem; letter-spacing: .4em; text-align: center; padding-inline: 12px 4px; }
  .case { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--e3); align-items: start; }
  .case input { width: 20px; height: 20px; margin: 0; accent-color: var(--encre); }
  .case > label { padding-top: 1px; color: var(--texte); font-size: var(--taille); font-weight: 400; }
  .case .champ-aide { grid-column: 2; }
  .resume-erreurs { padding: var(--e4); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: var(--rayon); background: var(--danger-doux); color: var(--danger); }
  .resume-erreurs h2 { display: flex; gap: var(--e2); align-items: center; color: var(--danger); font-family: var(--police); font-size: var(--taille); font-weight: 600; -webkit-text-stroke: 0; }
  .resume-erreurs ul { margin-top: var(--e2); padding-left: 1.25em; }
  .resume-erreurs a { color: var(--danger); }
  form.en-ligne { display: inline-flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

  /* Option : un choix (bouton radio, case) présenté en carte cliquable */
  .option { display: flex; gap: var(--e3); align-items: flex-start; min-height: var(--hauteur-controle); padding: var(--e3); border: 1px solid var(--filet); border-radius: var(--rayon); cursor: pointer; transition: border-color var(--duree-vive) var(--courbe), background-color var(--duree-vive) var(--courbe); }
  .option:hover { border-color: var(--bordure-controle); }
  .option:has(input:checked) { border-color: var(--encre); background: var(--selection); }
  .option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .option input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--encre); }
  .option input:focus-visible { outline: none; }
  .option span { display: grid; gap: 2px; }
  .option strong { font-weight: 500; }
  .option small { color: var(--discret); font-size: var(--taille-petite); }

  /* Sélecteur segmenté. Deux formes :
     - liens ou boutons (vue, affichage) : .segments > a | button, état par aria-current ou aria-pressed ;
     - boutons radio d’un formulaire (filtre), sans script et au clavier (flèches) :
       fieldset.segments > legend + .segments__choix > .segments__option > input + label. */
  .segments:not(fieldset) { display: inline-flex; flex: none; gap: 2px; max-width: 100%; padding: 2px; overflow-x: auto; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond); }
  .segments > a, .segments > button {
    display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--hauteur-controle); padding: 0 var(--e4);
    border: 0; border-radius: 4px; background: transparent; color: var(--discret);
    font-size: var(--taille-petite); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
    transition: background-color var(--duree-vive) var(--courbe), color var(--duree-vive) var(--courbe);
  }
  .segments > a:hover, .segments > button:hover { background: var(--survol); color: var(--encre); }
  .segments > [aria-current], .segments > [aria-pressed="true"] { background: var(--selection); color: var(--encre); box-shadow: inset 0 0 0 1px var(--filet-appuye); }
  .segments .icone { width: 16px; height: 16px; }
  fieldset.segments { min-width: 0; }
  fieldset.segments legend { margin-bottom: 6px; color: var(--encre); font-size: var(--taille-petite); font-weight: 500; line-height: 1.4; }
  .segments__choix { display: inline-flex; max-width: 100%; gap: 2px; padding: 2px; overflow-x: auto; border: 1px solid var(--bordure-controle); border-radius: var(--rayon); background: var(--champ); }
  .segments__option { position: relative; display: flex; flex: none; }
  .segments__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .segments__option label { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--e4); border-radius: 4px; color: var(--texte); font-size: var(--taille-petite); font-weight: 500; white-space: nowrap; cursor: pointer; }
  .segments__option input:hover + label { background: var(--survol); color: var(--encre); }
  .segments__option input:checked + label { background: var(--encre); color: var(--sur-encre); }
  .segments__option input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* Puces : choix d’une période ou d’un filtre par des liens (nav.puces > ul > li > a) */
  .puces ul { display: flex; flex-wrap: wrap; gap: var(--e2); }
  .puces a { display: inline-flex; align-items: center; min-height: var(--hauteur-controle); padding: 0 var(--e4); border: 1px solid var(--filet); border-radius: 999px; color: var(--texte); font-size: var(--taille-petite); font-weight: 500; text-decoration: none; transition: border-color var(--duree-vive) var(--courbe), background-color var(--duree-vive) var(--courbe); }
  .puces a:hover { border-color: var(--bordure-controle); color: var(--encre); }
  .puces a[aria-current] { border-color: var(--encre); background: var(--encre); color: var(--sur-encre); }

  /* Pagination d’une liste */
  .pagination { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; justify-content: space-between; margin-top: var(--e5); }
  .pagination__etat { color: var(--discret); font-size: var(--taille-petite); }

  /* Messages après une action */
  .annonces { display: grid; gap: var(--e2); }
  .annonces:has(.annonce) { margin-bottom: var(--e5); }
  .annonce { display: grid; grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr); grid-auto-columns: auto; gap: var(--e3); align-items: center; padding: var(--e3) var(--e4); border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--panneau); color: var(--encre); font-size: var(--taille-petite); }
  .annonce > .icone { width: 18px; height: 18px; }
  .annonce--succes { border-color: color-mix(in srgb, var(--succes) 30%, transparent); background: var(--succes-doux); color: var(--succes); }
  .annonce--attention { border-color: color-mix(in srgb, var(--attention) 30%, transparent); background: var(--attention-doux); color: var(--attention); }
  .annonce--erreur { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-doux); color: var(--danger); }
  .annonce--info { border-color: color-mix(in srgb, var(--info) 30%, transparent); background: var(--info-doux); color: var(--info); }
  .annonce p { color: inherit; overflow-wrap: anywhere; }
  .annonce__fermer { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--rayon); background: transparent; color: inherit; }
  /* Au doigt : 44 px, sans grandir le message (marges négatives) */
  @media (pointer: coarse) { .annonce__fermer { width: var(--hauteur-controle); height: var(--hauteur-controle); margin: -6px -10px -6px 0; } }
  .annonce__fermer:hover { background: var(--survol); }
  .annonce__annuler .bouton { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

  /* Encadré, étiquette, pastille d’état */
  .encadre { padding: var(--e3) var(--e4); border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--panneau); color: var(--encre); font-size: var(--taille-petite); line-height: 1.5; }
  /* Encadré à icône (p.encadre > .icone + span) ; les variantes d’état en reprennent la forme */
  .encadre--icone, .encadre--succes, .encadre--attention, .encadre--danger, .encadre--info { display: flex; gap: var(--e3); align-items: flex-start; }
  .encadre > .icone { width: 18px; height: 18px; margin-top: 1px; }
  .encadre--succes { border-color: color-mix(in srgb, var(--succes) 30%, transparent); background: var(--succes-doux); color: var(--succes); }
  .encadre--attention { border-color: color-mix(in srgb, var(--attention) 30%, transparent); background: var(--attention-doux); color: var(--attention); }
  .encadre--danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-doux); color: var(--danger); }
  .encadre--info { border-color: color-mix(in srgb, var(--info) 30%, transparent); background: var(--info-doux); color: var(--info); }
  :is(.encadre--succes, .encadre--attention, .encadre--danger, .encadre--info) :is(a, strong) { color: inherit; }
  :is(.encadre--succes, .encadre--attention, .encadre--danger, .encadre--info) a { font-weight: 600; }
  .etiquette { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; max-width: 100%; padding: 2px 8px; border: 1px solid var(--filet); border-radius: var(--rayon-xs); color: var(--texte); font-size: var(--taille-xs); font-weight: 500; line-height: 18px; white-space: nowrap; }
  .pastille { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border: 1px solid var(--filet); border-radius: 999px; color: var(--texte); font-size: var(--taille-xs); font-weight: 600; line-height: 18px; white-space: nowrap; }
  .pastille--succes { border-color: color-mix(in srgb, var(--succes) 30%, transparent); background: var(--succes-doux); color: var(--succes); }
  .pastille--attention { border-color: color-mix(in srgb, var(--attention) 30%, transparent); background: var(--attention-doux); color: var(--attention); }
  .pastille--danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-doux); color: var(--danger); }
  .pastille--info { border-color: color-mix(in srgb, var(--info) 30%, transparent); background: var(--info-doux); color: var(--info); }
  .etiquette .icone, .pastille .icone { width: 14px; height: 14px; }
  .etiquette--forte { border-color: var(--filet-appuye); color: var(--encre); }
  .etiquette--attention { border-color: color-mix(in srgb, var(--attention) 35%, transparent); background: var(--attention-doux); color: var(--attention); }

  /* Sujets : ce qui attend une action (vue d’ensemble, fil). Toute la ligne mène au lien (lien
     étiré) ; à gauche un nombre (.sujet__nombre), une icône (.sujet__icone) ou un avatar. */
  .sujets { display: grid; border-top: 1px solid var(--filet); }
  .sujet { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--e4); align-items: center; padding: var(--e3) var(--e2) var(--e3) 0; border-bottom: 1px solid var(--filet); transition: background-color var(--duree-vive) var(--courbe); }
  .sujet:hover { background: var(--survol); }
  .sujet__nombre, .sujet__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--rayon); background: var(--selection); color: var(--encre); }
  .sujet__nombre { background: var(--attention-doux); color: var(--attention); font-family: var(--police-titre); font-size: 1.375rem; line-height: 1; }
  .sujet__icone .icone { width: 20px; height: 20px; }
  .sujet--attention .sujet__icone { background: var(--attention-doux); color: var(--attention); }
  .sujet > .avatar { width: 44px; height: 44px; font-size: .875rem; }
  .sujet__texte { display: grid; gap: 2px; min-width: 0; }
  .sujet__lien { color: var(--encre); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
  .sujet__lien::after { content: ""; position: absolute; inset: 0; }
  .sujet__texte p { color: var(--discret); font-size: var(--taille-petite); }
  .sujet__fleche { width: 18px; height: 18px; color: var(--discret); transition: translate var(--duree) var(--courbe), color var(--duree-vive) var(--courbe); }
  .sujet:hover .sujet__fleche { translate: 3px 0; color: var(--encre); }
  .sujet__lien:focus-visible { outline: none; }
  .sujet:has(.sujet__lien:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
  .sujets-vide { display: flex; gap: var(--e3); align-items: center; padding: var(--e4) 0; border-block: 1px solid var(--filet); color: var(--discret); font-size: var(--taille-petite); }
  .sujets-vide strong { color: var(--encre); }
  .sujets-vide__icone { display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--succes) 40%, transparent); border-radius: 50%; background: var(--succes-doux); color: var(--succes); }
  .sujets-vide__icone .icone { width: 18px; height: 18px; }

  /* État vide */
  .vide { display: grid; justify-items: start; gap: var(--e3); padding: var(--e6) 0; border-block: 1px solid var(--filet); color: var(--discret); }
  .vide > .icone { width: 24px; height: 24px; }
  .vide > p { max-width: 52ch; }

  /* En-tête de page */
  .entete-page { display: grid; gap: var(--e2); max-width: var(--largeur-etroite); margin-bottom: var(--e6); }
  .entete-page > * { min-width: 0; }

  /* Sélecteur segmenté (thème) */
  .choix-theme fieldset { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--filet); border-radius: var(--rayon); }
  .choix-theme button { display: inline-grid; place-items: center; width: 40px; height: 36px; border: 0; border-radius: 4px; background: transparent; color: var(--discret); }
  .choix-theme button:hover { background: var(--survol); color: var(--encre); }
  .choix-theme button[aria-pressed="true"] { background: var(--selection); color: var(--encre); }
  .choix-theme .icone { width: 18px; height: 18px; }

  /* Tableaux */
  .tableau-defilant { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  .tableau-defilant:focus-visible { outline-offset: 4px; }
  .tableau { width: 100%; font-size: var(--taille-petite); }
  .tableau caption { padding-bottom: var(--e3); color: var(--discret); text-align: left; }
  .tableau th { padding: var(--e2) var(--e3); border-bottom: 1px solid var(--filet-appuye); color: var(--discret); font-size: var(--taille-xs); font-weight: 600; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
  .tableau td { padding: var(--e3); border-bottom: 1px solid var(--filet); vertical-align: top; }
  .tableau tr:hover td { background: var(--survol); }
  /* .tableau--cartes : sur mobile, chaque ligne devient une carte à deux colonnes ; chaque cellule
     reprend son libellé de colonne (data-libelle). Le gabarit pose role="table" et les rôles des
     lignes et cellules, qui gardent la structure du tableau pour les lecteurs d’écran. */
  @media (width <= 640px) {
    .tableau--cartes, .tableau--cartes tbody { display: block; }
    .tableau--cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .tableau--cartes tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3) var(--e4); padding: var(--e4); border: 1px solid var(--filet); border-radius: var(--rayon-surface); background: var(--fond); }
    .tableau--cartes tr + tr { margin-top: var(--e3); }
    .tableau--cartes tr:hover td { background: none; }
    .tableau--cartes tbody th[scope="row"] { grid-column: 1 / -1; padding: 0 0 var(--e3); border-bottom: 1px solid var(--filet); }
    .tableau--cartes td { display: block; min-width: 0; padding: 0; border: 0; }
    .tableau--cartes td::before { content: attr(data-libelle); content: attr(data-libelle) / ""; display: block; margin-bottom: 2px; color: var(--discret); font-size: var(--taille-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
    .tableau--cartes .cellule--large { grid-column: 1 / -1; }
  }

  /* Boîte de dialogue (confirmations) */
  .dialogue { width: min(100% - 2 * var(--gouttiere), 460px); padding: 0; border: 0; border-radius: var(--rayon-surface); background: var(--releve); color: var(--texte); box-shadow: var(--ombre-flottante); }
  .dialogue::backdrop { background: var(--voile); }
  .dialogue__corps { display: grid; gap: var(--e3); padding: var(--e5); }
  .dialogue__corps h2 { font-size: var(--titre-section); }
  .dialogue__corps p { overflow-wrap: anywhere; }
  .dialogue__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e3); padding: var(--e4) var(--e5); border-top: 1px solid var(--filet); }
  @media (prefers-reduced-motion: no-preference) {
    .dialogue[open] { animation: apparition var(--duree-lente) var(--courbe); }
  }
  @keyframes apparition { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

  /* Silhouettes de chargement */
  .silhouette { display: block; border-radius: var(--rayon-xs); background: linear-gradient(90deg, var(--panneau) 0%, var(--selection) 50%, var(--panneau) 100%) 0 0 / 200% 100%; color: transparent; }
  @media (prefers-reduced-motion: no-preference) {
    .silhouette { animation: chatoiement 1.4s linear infinite; }
  }
  @keyframes chatoiement { to { background-position: -200% 0; } }

  /* Carte d’un parcours court (connexion, étapes) */
  .carte-parcours { display: grid; gap: var(--e4); width: 100%; max-width: 440px; }
  .carte-parcours h1 { margin-top: calc(-1 * var(--e2)); }
  .carte-parcours .formulaire { margin-top: var(--e3); }
  .carte-parcours__pied { display: grid; gap: var(--e2); margin-top: var(--e3); padding-top: var(--e4); border-top: 1px solid var(--filet); color: var(--discret); font-size: var(--taille-petite); }

  /* Cadre d’accès (connexion, étapes de l’adhésion) : présentation à gauche, carte à droite */
  .cadre-acces { display: grid; gap: var(--e6); width: min(100%, calc(var(--largeur-page) + 2 * var(--gouttiere))); margin-inline: auto; padding: var(--e7) var(--gouttiere) var(--e8); }
  .cadre-acces__presentation { display: grid; align-content: start; gap: var(--e3); }
  .cadre-acces__presentation .chapeau { max-width: 44ch; color: var(--discret); }
  .carte-acces { display: grid; gap: var(--e4); padding: var(--e5); border: 1px solid var(--filet); border-radius: var(--rayon-surface); background: var(--panneau); }
  @media (width >= 641px) { .carte-acces { padding: var(--e6); } }
  .carte-acces h2 { font-size: 1.625rem; }
  .carte-acces .chapeau { font-size: var(--taille); color: var(--discret); }
  .carte-acces .formulaire { gap: var(--e4); }
  .separateur-ou { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--e4); align-items: center; color: var(--discret); font-size: var(--taille-petite); }
  .separateur-ou::before, .separateur-ou::after { content: ""; border-top: 1px solid var(--filet); }
  .carte-acces__pied { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; color: var(--discret); font-size: var(--taille-petite); }
  .carte-acces__pied a { color: var(--encre); font-weight: 500; }
  @media (width >= 900px) {
    .cadre-acces { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--e8); padding-top: var(--e8); }
    .cadre-acces::before { content: ""; grid-column: 1 / -1; margin-bottom: calc(-1 * var(--e6)); border-top: 1px solid var(--filet-appuye); }
  }

  /* Texte mis en forme (Markdown) */
  .texte-mis-en-forme { max-width: var(--mesure); }
  .texte-mis-en-forme > * + * { margin-top: var(--e4); }
  .texte-mis-en-forme h2 { margin-top: var(--e6); }
  .texte-mis-en-forme h3 { margin-top: var(--e5); }
  .texte-mis-en-forme ul, .texte-mis-en-forme ol { padding-left: 1.25em; }
  .texte-mis-en-forme li + li { margin-top: var(--e1); }
  .texte-mis-en-forme blockquote { padding-left: var(--e4); border-left: 2px solid var(--filet-appuye); color: var(--encre); font-family: var(--police-titre); font-size: 1.125rem; }

  /* Sections de réglages et listes d’états (administration) */
  .pile-sections { display: grid; gap: var(--e7); max-width: var(--largeur-etroite); }
  .section-reglages { display: grid; gap: var(--e4); }
  .section-reglages > h2 { padding-bottom: var(--e3); border-bottom: 1px solid var(--filet-appuye); }
  .liste-etats { display: grid; }
  .liste-etats > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e1); padding: var(--e3) 0; border-bottom: 1px solid var(--filet); }
  .liste-etats dt { color: var(--discret); font-size: var(--taille-petite); }
  .liste-etats dd { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; color: var(--encre); overflow-wrap: anywhere; }
  @container (width >= 520px) { .liste-etats > div { grid-template-columns: 220px minmax(0, 1fr); gap: var(--e4); } }
  .section-reglages { container-type: inline-size; }
  .champ-avec-bouton { display: flex; gap: var(--e2); }
  .champ-avec-bouton input { flex: 1; min-width: 0; font-family: var(--police-chasse-fixe); font-size: var(--taille-petite) !important; }

  .detail-erreur { overflow: auto; max-height: 50vh; padding: var(--e4); border-radius: var(--rayon); background: var(--panneau); font-size: var(--taille-xs); white-space: pre-wrap; }
}

/* ------------------------------------------------------------------ Mise en page */
@layer mise-en-page {
  .lien-evitement { position: absolute; z-index: 100; top: var(--e2); left: var(--e2); padding: var(--e2) var(--e4); border-radius: var(--rayon); background: var(--encre); color: var(--sur-encre); font-weight: 500; text-decoration: none; translate: 0 -200%; }
  .lien-evitement:focus { translate: 0 0; }
  .bandeau-preversion { padding: 6px var(--gouttiere); background: var(--attention-doux); color: var(--attention); font-size: var(--taille-xs); font-weight: 500; text-align: center; }

  /* --- Pages publiques --- */
  .entete { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--filet); background: var(--barre); }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .entete, .barre-haute, .dock { -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
  }
  @media (prefers-reduced-transparency: reduce) {
    .entete, .barre-haute, .dock { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--fond); }
  }
  .entete__interieur { display: flex; align-items: center; gap: var(--e6); width: min(100%, calc(var(--largeur-page) + 2 * var(--gouttiere))); min-height: 72px; margin-inline: auto; padding-inline: var(--gouttiere); }
  .entete__navigation ul { display: flex; gap: var(--e5); }
  .entete__navigation a { color: var(--texte); font-size: var(--taille-petite); text-decoration: none; }
  .entete__navigation a:hover, .entete__navigation a[aria-current] { color: var(--encre); text-decoration: underline; text-decoration-color: currentColor; }
  .entete__actions { display: flex; align-items: center; gap: var(--e3); margin-left: auto; }
  .entete__menu { display: none; margin-left: auto; }
  .entete__menu > summary { display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--hauteur-controle); padding: 0 var(--e3); border: 1px solid var(--filet); border-radius: var(--rayon); color: var(--encre); font-size: var(--taille-petite); font-weight: 500; list-style: none; cursor: pointer; }
  .entete__menu > summary::-webkit-details-marker { display: none; }
  .entete__menu[open] > nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: var(--e4); padding: var(--e4) var(--gouttiere) var(--e5); border-bottom: 1px solid var(--filet); background: var(--fond); box-shadow: var(--ombre-menu); }
  .entete__menu nav ul { display: grid; }
  .entete__menu nav a { display: block; padding: var(--e3) 0; border-bottom: 1px solid var(--filet); color: var(--encre); font-size: var(--taille); text-decoration: none; }
  @media (width <= 900px) {
    .entete__navigation, .entete__actions { display: none; }
    .entete__menu { display: block; }
  }
  .pied { margin-top: var(--e8); border-top: 1px solid var(--filet); background: var(--panneau); }
  .pied__interieur { display: grid; gap: var(--e6); width: min(100%, calc(var(--largeur-page) + 2 * var(--gouttiere))); margin-inline: auto; padding: var(--e7) var(--gouttiere) var(--e6); }
  .pied__marque { display: grid; gap: var(--e4); align-content: start; }
  .pied__marque p { max-width: 36ch; color: var(--discret); font-size: var(--taille-petite); }
  .pied__colonne { display: grid; gap: var(--e3); align-content: start; }
  .pied__colonne ul { display: grid; gap: var(--e2); }
  .pied__colonne a { display: inline-block; padding: var(--e1) 0; color: var(--encre); font-size: var(--taille-petite); text-decoration: none; }
  .pied__colonne a:hover { text-decoration: underline; }
  .pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e2) var(--e5); width: min(100%, calc(var(--largeur-page) + 2 * var(--gouttiere))); margin-inline: auto; padding: 0 var(--gouttiere) calc(var(--e5) + var(--marge-bas)); color: var(--discret); font-size: var(--taille-xs); }
  .pied__bas::before { content: ""; flex-basis: 100%; margin-bottom: var(--e3); border-top: 1px solid var(--filet); }
  .pied__bas a { color: var(--discret); }
  @media (width >= 641px) { .pied__interieur { grid-template-columns: 2fr 1fr 1fr; } }
  .page-etroite { width: min(100%, calc(var(--largeur-etroite) + 2 * var(--gouttiere))); margin-inline: auto; padding: var(--e7) var(--gouttiere); }
  .page-large { width: min(100%, calc(var(--largeur-page) + 2 * var(--gouttiere))); margin-inline: auto; padding: var(--e7) var(--gouttiere); }
  .page-erreur { display: grid; gap: var(--e4); }

  /* --- Page seule (connexion, étapes) --- */
  .mise-en-page-seule { display: flex; flex-direction: column; }
  .entete-seule { padding: var(--e5) var(--gouttiere); }
  .seule { flex: 1; display: grid; align-content: start; justify-items: center; padding: var(--e6) var(--gouttiere) var(--e8); }
  .seule > .annonces { width: 100%; max-width: 440px; }
  @media (width >= 641px) { .seule { align-content: center; padding-bottom: 12vh; } }

  /* --- Espaces connectés --- */
  .coquille { display: grid; grid-template-columns: var(--largeur-barre-laterale) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
  .barre-laterale { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--e5); height: 100vh; height: 100dvh; padding: var(--e5) var(--e4); border-right: 1px solid var(--filet); background: var(--panneau); overflow-y: auto; }
  .barre-laterale > .logo { padding: 0 var(--e2); }
  .barre-laterale__espace { margin-top: calc(-1 * var(--e3)); padding: 0 var(--e2); color: var(--discret); font-size: var(--taille-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .navigation { display: grid; gap: 2px; }
  .navigation a { display: flex; align-items: center; gap: var(--e3); min-height: 40px; padding: 8px 10px; border-radius: var(--rayon); color: var(--texte); font-size: var(--taille-petite); font-weight: 500; text-decoration: none; }
  .navigation a:hover { background: var(--survol); color: var(--encre); }
  .navigation a[aria-current] { background: var(--selection); color: var(--encre); }
  .navigation .icone { width: 18px; height: 18px; }
  .navigation__compteur { flex: none; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--encre); color: var(--sur-encre); font-size: .6875rem; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
  .navigation--secondaire { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--filet); }
  .barre-laterale__pied { display: grid; gap: var(--e4); margin-top: auto; padding-top: var(--e4); border-top: 1px solid var(--filet); }
  .carte-membre { display: grid; gap: var(--e1); padding: 0 var(--e2); }
  .carte-membre__nom { overflow: hidden; color: var(--encre); font-size: var(--taille-petite); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  .carte-membre .bouton { justify-content: flex-start; margin-left: -12px; }
  .coquille__principal { min-width: 0; }
  .barre-haute { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; gap: var(--e3); height: calc(var(--hauteur-barre) + var(--marge-haut)); padding: var(--marge-haut) var(--gouttiere) 0; border-bottom: 1px solid var(--filet); background: var(--barre); }
  .barre-haute__titre { overflow: hidden; color: var(--encre); font-size: var(--taille-petite); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  .barre-haute__actions { display: flex; gap: var(--e1); margin-left: auto; }
  .logo--compact { display: none; }
  .logo--compact .marque { width: 26px; height: 26px; }
  .contenu-espace { width: min(100%, calc(var(--largeur-page) + 2 * var(--gouttiere))); padding: var(--e6) var(--gouttiere) var(--e8); }

  /* Intermédiaire : barre latérale réduite aux icônes */
  @media (641px <= width <= 1023px) {
    .coquille { grid-template-columns: 88px minmax(0, 1fr); }
    .barre-laterale { align-items: center; padding-inline: var(--e3); }
    .barre-laterale .logo__nom, .barre-laterale__espace, .barre-laterale .navigation span:not(.navigation__compteur), .carte-membre__nom, .carte-membre .bouton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .navigation a { position: relative; justify-content: center; width: 48px; padding: 0; }
    .barre-laterale .navigation__compteur { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; font-size: .625rem; line-height: 18px; box-shadow: 0 0 0 2px var(--panneau); }
    .carte-membre .bouton { margin-left: 0; }
    .choix-theme fieldset { flex-direction: column; }
  }

  /* Mobile : dock flottant en bas, feuille « Plus » */
  .dock { display: none; }
  @media (width <= 640px) {
    .coquille { grid-template-columns: minmax(0, 1fr); }
    .barre-laterale { display: none; }
    .logo--compact { display: inline-flex; }
    .contenu-espace { padding-bottom: calc(var(--hauteur-dock) + var(--e7) + var(--marge-bas)); }
    html:has(.dock) { scroll-padding-bottom: calc(var(--hauteur-dock) + var(--e5) + var(--marge-bas)); }
    .dock { position: fixed; z-index: 30; right: var(--e3); bottom: calc(var(--e3) + var(--marge-bas)); left: var(--e3); display: block; border: 1px solid var(--filet); border-radius: 14px; background: var(--barre); box-shadow: var(--ombre-dock); }
    .dock > ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--hauteur-dock); padding: 4px; }
    .dock > ul > li > a, .dock__plus > summary { display: grid; place-items: center; align-content: center; gap: 2px; height: 100%; border-radius: 10px; color: var(--discret); font-size: var(--taille-xs); font-weight: 500; line-height: 1.2; text-decoration: none; list-style: none; cursor: pointer; }
    .dock__plus > summary::-webkit-details-marker { display: none; }
    .dock > ul > li > a[aria-current], .dock__plus[open] > summary { color: var(--encre); background: var(--selection); }
    .dock > ul > li > a .icone, .dock__plus > summary .icone { width: 20px; height: 20px; }
    .dock__plus { height: 100%; }
    .dock__plus > summary { position: relative; }
    .dock__signal { position: absolute; top: 9px; left: calc(50% + 7px); width: 8px; height: 8px; border-radius: 50%; background: var(--encre); box-shadow: 0 0 0 2px var(--barre); }
    .dock__plus .feuille { position: fixed; right: var(--e3); bottom: calc(var(--hauteur-dock) + var(--e4) + var(--marge-bas)); left: var(--e3); display: grid; gap: var(--e4); max-height: 70vh; padding: var(--e4); overflow-y: auto; border: 1px solid var(--filet); border-radius: 14px; background: var(--releve); box-shadow: var(--ombre-flottante); }
    .feuille .navigation a { min-height: var(--hauteur-controle); font-size: var(--taille); }
  }
}

/* ------------------------------------------------------------------ Pages */
@layer pages {
  /* Fil de l’espace : blocs successifs séparés par un filet appuyé (comme .fil-actualites) */
  .fil-bloc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid var(--filet-appuye); }
  .fil-bloc__entete { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: end; justify-content: space-between; }
  .fil-bloc > .lien-fleche { justify-self: start; min-height: var(--hauteur-controle); }

  /* Accueil */
  .accueil { display: grid; grid-template-columns: minmax(0, 1fr); }
  .accueil__manifeste { display: flex; align-items: center; padding: var(--e7) var(--gouttiere); background: var(--panneau); }
  .accueil__manifeste-interieur { display: grid; gap: var(--e5); max-width: 520px; }
  .titre-affiche > span { display: block; }
  .titre-affiche__suite { margin-top: .2em; color: var(--texte); }
  .accueil__club { display: grid; align-content: start; gap: var(--e5); padding: var(--e7) var(--gouttiere); }
  .accueil__club h2 { max-width: 22ch; }
  .rythme { margin-top: var(--e4); border-top: 1px solid var(--filet-appuye); }
  .rythme__ligne { display: grid; gap: var(--e2); padding: var(--e5) 0; border-bottom: 1px solid var(--filet); }
  .rythme dt { color: var(--encre); font-family: var(--police-titre); font-size: 1.375rem; line-height: 1.2; -webkit-text-stroke: var(--contour-titre) currentColor; }
  .citation-accueil { max-width: 30ch; margin-top: var(--e5); color: var(--encre); font-family: var(--police-titre); font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); line-height: 1.25; -webkit-text-stroke: var(--contour-titre) currentColor; }
  .appel-adhesion { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e5); align-items: center; justify-content: space-between; margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--encre); }
  .appel-adhesion > p:first-child { flex: 1 1 240px; max-width: 42ch; color: var(--encre); }
  .appel-adhesion .groupe-boutons { flex: none; }
  @media (width >= 1024px) {
    .accueil { grid-template-columns: 5fr 7fr; min-height: calc(100vh - 73px); }
    .accueil__manifeste { padding: var(--e8) var(--e7) var(--e8) max(var(--gouttiere), calc((100vw - var(--largeur-page)) / 2)); border-right: 1px solid var(--filet); }
    .accueil__club { padding: var(--e8) max(var(--gouttiere), calc((100vw - var(--largeur-page)) / 2)) var(--e8) var(--e8); }
    .rythme__ligne { grid-template-columns: 200px minmax(0, 1fr); gap: var(--e5); }
  }
  .mise-en-page-public:has(.accueil) .pied { margin-top: 0; }
}

/* ------------------------------------------------------------------ Utilitaires */
@layer utilitaires {
  .visuellement-cache { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
  .marge-haut { margin-top: var(--e5); }
}