/* Ne pas editer : copie de build/. */
:root {
    --color-surface: #FFF8E3;
    --color-surface-alt: #F2F0EA;
    --color-border: #D9D5CF;
    --color-text-muted: #756D67;
    --radius-card: 3px;
    --shadow-card: 0 2px 8px rgba(0,0,0,.08);
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Literata', Georgia, serif;
    --color-sur-secondary: #FFFDF7;
    --color-sur-primary: #FFFDF7;
    --focus-ring: #9C7A1E;
    --color-primary: #9C7A1E;
    --color-secondary: #7A1F2B;
    --color-bg: #FFFDF7;
    --color-text: #2A2019;
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
@supports not selector(:focus-visible) {
    :focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
}

/* =================================================================================
   lib-bande — la bande pleine largeur, ET la couche de tokens du theme agence.

   POURQUOI LES TOKENS SONT ICI. Le builder emet 12 tokens par site (couleurs, polices,
   un rayon, une ombre). C'est assez pour habiller, pas pour construire : il manque une
   echelle d'espacement, des niveaux d'elevation, une surface teintee et une echelle de
   rayon. Les ajouter au builder changerait les 48 sites ; les DERIVER ici ne change que
   les sites qui declarent ce theme.

   Tout est derive par color-mix() des 12 tokens de base : la palette du site reste la
   seule source, et deux sites gardent des teintes disjointes.
   ================================================================================= */

/* POURQUOI « :root, .lib-bande » ET NON « .lib-bande » SEUL. L'entete et le pied de page
   vivent HORS de la sequence de bandes : sans la declaration sur :root, --trait et
   --ombre-2 y seraient vides, et la barre de tete sortirait sans filet ni relief.
   La declaration reste AUSSI sur .lib-bande, et ce n'est pas une redondance : une valeur
   de propriete personnalisee est resolue sur l'element qui la DECLARE. Calculee une seule
   fois sur :root, --ombre-1 figerait le --color-text du fond clair et sortirait invisible
   dans une bande sombre. Declaree sur les deux, elle se recalcule a l'entree de chaque
   bande, avec les tokens que la bande vient de redefinir. */
:root,
.vei__lib-bande {
  /* --- elevation : trois niveaux, pas un ------------------------------------- */
  --ombre-1: 0 1px 2px color-mix(in srgb, var(--color-text) 8%, transparent);
  --ombre-2: 0 2px 4px color-mix(in srgb, var(--color-text) 6%, transparent),
             0 8px 16px color-mix(in srgb, var(--color-text) 8%, transparent);
  --ombre-3: 0 4px 8px color-mix(in srgb, var(--color-text) 8%, transparent),
             0 16px 40px color-mix(in srgb, var(--color-text) 12%, transparent);

  /* --- matiere ---------------------------------------------------------------- */
  --accent-doux: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  --accent-trait: color-mix(in srgb, var(--color-primary) 35%, transparent);
  --surface-haute: color-mix(in srgb, var(--color-bg) 92%, var(--color-text));
  --trait: color-mix(in srgb, var(--color-text) 12%, transparent);

  /* --- rayons : une echelle, pas une valeur ----------------------------------- */
  --rayon-s: calc(var(--radius-card) * .5);
  --rayon-m: var(--radius-card);
  --rayon-l: calc(var(--radius-card) * 2);

  /* --- rythme vertical --------------------------------------------------------- */
  --pas-section: clamp(3rem, 2rem + 5vw, 6.5rem);
  --pas-bloc: clamp(1.5rem, 1rem + 2vw, 2.5rem);

}

/* La bande elle-meme. Ces proprietes-la restent sur .lib-bande SEUL : appliquees a :root
   elles poseraient un 100vw et un margin negatif sur <html>. */
.vei__lib-bande {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* une bande sort d'un conteneur etroit sans rien demander a ses parents : c'est ce
     qui permet des fonds alternes sur un site dont le contenu vit dans 820px. */
  overflow-x: clip;
  position: relative;
}

/* LA BANDE RESPIRE, SINON ELLE NE SEPARE RIEN. Il n'y avait aucun remplissage vertical :
   deux bandes de fonds differents se touchaient au pixel, et la derniere rangee de
   cartes sortait du fond colore — une carte qui se souleve de 4 px au survol debordait
   sur la bande suivante. Constate le 2026-09-13 sur l'accueil de compagnon-cocoon.com.

   Le remplissage est en padding-block et non en padding : la forme courte ecraserait les
   gouttieres laterales, qui sont calculees separement et servent de marge de securite sur
   telephone. */
.vei__lib-bande__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding-block: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem);
  padding-left: clamp(1.2rem, .8rem + 2vw, 2.5rem);
  padding-right: clamp(1.2rem, .8rem + 2vw, 2.5rem);
}

/* La largeur se passe par un ATTRIBUT et non par une classe : la valeur vient d'une
   donnee, et une classe arrivant par une donnee echappe a prefixer_classes — elle
   sortirait nue et ne rencontrerait jamais ce selecteur. Constate le 2026-09-09 sur
   « lib-bande--sombre », puis reste arme ici jusqu'au 2026-09-11. Le prefixe vit sur
   la partie classe, litterale dans le gabarit ; la donnee ne transporte qu'un mot. */
.vei__lib-bande__inner[data-largeur="large"] { max-width: 82rem; }
.vei__lib-bande__inner[data-largeur="etroit"] { max-width: 46rem; }

/* --- les fonds -------------------------------------------------------------------
   Chaque variante redefinit les tokens de TEXTE pour son fond : une bande sombre
   n'a pas seulement un fond sombre, elle inverse ce que les briques lisent a
   l'interieur. C'est ce qui evite d'ecrire une variante de chaque brique par fond. */

.vei__lib-bande--sombre {
  background:
    radial-gradient(90rem 40rem at 78% -10%,
                    color-mix(in srgb, var(--color-primary) 42%, transparent), transparent 62%),
    radial-gradient(60rem 30rem at 5% 110%,
                    color-mix(in srgb, var(--color-secondary) 60%, transparent), transparent 55%),
    var(--color-secondary);
  /* --color-sur-secondary est CALCULE au build, sur un contraste mesure. Inverser vers
     --color-bg supposait un site a fond clair : sur un site sombre, le titre du hero
     sortait sombre sur sombre, donc invisible. */
  --color-text: var(--color-sur-secondary, var(--color-bg));
  --color-text-muted: color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 66%, transparent);
  --color-surface: color-mix(in srgb, var(--color-bg) 7%, transparent);
  --color-border: color-mix(in srgb, var(--color-bg) 16%, transparent);
  --surface-haute: color-mix(in srgb, var(--color-bg) 10%, transparent);
  --trait: color-mix(in srgb, var(--color-bg) 16%, transparent);
  --accent-doux: color-mix(in srgb, var(--color-bg) 8%, transparent);
}

.vei__lib-bande--surface {
  background: var(--color-surface-alt);
  --surface-haute: var(--color-bg);
}

.vei__lib-bande--accent {
  background:
    linear-gradient(135deg,
      var(--color-primary),
      color-mix(in srgb, var(--color-primary) 55%, var(--color-secondary)));
  --color-text: var(--color-sur-primary, var(--color-bg));
  --color-text-muted: color-mix(in srgb, var(--color-sur-primary, var(--color-bg)) 74%, transparent);
  --color-border: color-mix(in srgb, var(--color-bg) 28%, transparent);
  --surface-haute: color-mix(in srgb, var(--color-bg) 12%, transparent);
}

/* Un filet entre deux bandes claires successives : la limite sans le poids. */
.vei__lib-bande:not([class*="--"]) + .vei__lib-bande:not([class*="--"]) {
  border-top: 1px solid var(--trait);
}

/* lib-bandeau-cta — la bande d'appel a l'action.

   Elle vit dans une lib-bande--accent, qui porte deja le degrade et inverse les tokens
   de texte. La brique ne repeint donc rien : elle compose. C'est ce que permet la
   redefinition de tokens par bande — une seule brique, tous les fonds. */

.vei__lib-bandeau-cta {
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  padding: var(--pas-section) 0;
  text-align: center;
}

.vei__lib-bandeau-cta__titre {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--color-text);
  text-wrap: balance;
}

.vei__lib-bandeau-cta__texte {
  margin: 0;
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.vei__lib-bandeau-cta__texte:empty { display: none; }

.vei__lib-bandeau-cta__action { margin: 0; }

/* Le bouton est en negatif du fond : sur une bande accent, un bouton accent
   disparaitrait. Le fond de page devient l'encre. */
.vei__lib-bandeau-cta__lien {
  display: inline-block;
  padding: .85rem 1.9rem;
  background: var(--color-bg);
  color: var(--color-secondary);
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-2);
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.vei__lib-bandeau-cta__lien:hover,
.vei__lib-bandeau-cta__lien:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ombre-3);
}

@media (prefers-reduced-motion: reduce) {
  .vei__lib-bandeau-cta__lien { transition: none; }
  .vei__lib-bandeau-cta__lien:hover { transform: none; }
}

.vei__lib-bandeau-cta a:focus-visible {
  outline: 2px solid var(--color-bg);
  outline-offset: 3px;
}

/* lib-card-article — la carte de magazine (surcharge gazette du socle).

   Photo au format 4:3 sous un filet de cadre, date en petites capitales precedee d'une
   etoile, titre en serif de presse, chapo coupe a trois lignes. La carte entiere est
   cliquable par le lien du titre, etire. */

.vei__lib-card-article {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.vei__lib-card-article__media {
  margin: 0 0 .95rem;
  overflow: hidden;
  background: var(--gaz-papier);
}

.vei__lib-card-article__media:empty { display: none; }

.vei__lib-card-article__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  outline: 1px solid var(--gaz-cadre);
  outline-offset: -.6rem;
  filter: saturate(.92);
  transition: filter .3s ease, transform .6s ease;
}

.vei__lib-card-article:hover .vei__lib-card-article__media img,
.vei__lib-card-article:focus-within .vei__lib-card-article__media img {
  filter: saturate(1.08);
  transform: scale(1.03);
}

.vei__lib-card-article__meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .45rem;
  font: 600 .7rem/1.3 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.vei__lib-card-article__meta::before {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  background: var(--color-primary);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.vei__lib-card-article__date { font-variant-numeric: tabular-nums; }

.vei__lib-card-article__titre {
  margin: 0 0 .55rem;
  font: 600 1.38rem/1.12 var(--font-heading);
  text-wrap: balance;
}

.vei__lib-card-article__lien {
  text-decoration: none;
  color: var(--gaz-encre);
  transition: color .2s ease;
}

.vei__lib-card-article__lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.vei__lib-card-article:hover .vei__lib-card-article__lien,
.vei__lib-card-article__lien:focus-visible { color: var(--color-secondary); }

.vei__lib-card-article__lien:focus-visible { outline: none; }

.vei__lib-card-article:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 6px;
}

.vei__lib-card-article__extrait {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: .93rem;
  line-height: 1.58;
  color: var(--color-text-muted);
}

.vei__lib-card-article__lire {
  margin-top: .7rem;
  font-size: .86rem;
  font-style: italic;
  color: var(--gaz-lien);
}

/* Sur un telephone, la carte passe en ligne : vignette carree a gauche, texte a droite.
   Huit cartes empilees pleine largeur feraient huit ecrans ; en ligne, trois par ecran. */
@media (max-width: 35rem) {
  .vei__lib-card-article {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 1rem;
    align-content: start;
  }
  .vei__lib-card-article__media {
    grid-row: 1 / span 4;
    margin: 0;
    align-self: start;
  }
  .vei__lib-card-article__media img { aspect-ratio: 1 / 1; outline-offset: -.4rem; }
  .vei__lib-card-article__titre { font-size: 1.2rem; }
  .vei__lib-card-article__extrait { -webkit-line-clamp: 2; font-size: .88rem; }
  .vei__lib-card-article__lire { margin-top: .35rem; }
}

@media print {
  .vei__lib-card-article__media img { filter: none; }
}

/* lib-carte — une carte qui a de la matiere, pas un paragraphe dans une boite.

   Trois choses la font tenir : un numero en filigrane qui donne de la profondeur sans
   image, un filet d'accent qui se deploie au survol, et une elevation qui change. */

.vei__lib-carte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.7rem 1.5rem 1.6rem;
  background: var(--surface-haute);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-1);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

/* Le filet d'accent : invisible au repos, il se deploie de la gauche au survol.
   transform plutot que width : la transition reste sur le compositeur. */
.vei__lib-carte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary),
              color-mix(in srgb, var(--color-primary) 40%, transparent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}

.vei__lib-carte:hover,
.vei__lib-carte:focus-within {
  transform: translateY(-3px);
  border-color: var(--accent-trait);
  box-shadow: var(--ombre-2);
}

.vei__lib-carte:hover::before,
.vei__lib-carte:focus-within::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .vei__lib-carte,
  .vei__lib-carte::before { transition: none; }
  .vei__lib-carte:hover { transform: none; }
}

/* Le numero en filigrane : de la profondeur sans une seule image. */
.vei__lib-carte__num {
  position: absolute;
  z-index: -1;
  top: -.35em;
  right: .1em;
  font-family: var(--font-heading);
  font-size: 6.5rem;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--color-primary) 9%, transparent);
  pointer-events: none;
  user-select: none;
}

.vei__lib-carte__num:empty { display: none; }

.vei__lib-carte__titre {
  margin: 0 0 .55rem;
  font-family: var(--font-heading);
  font-size: 1.12rem;
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--color-text);
  text-wrap: balance;
}

.vei__lib-carte__texte {
  margin: 0 0 .7rem;
  font-family: var(--font-body);
  font-size: .98rem;
  line-height: 1.62;
  color: var(--color-text);
  text-wrap: pretty;
}

/* Le detail est separe par un filet, pas par du vide : la hierarchie se voit. */
.vei__lib-carte__detail {
  margin: 0;
  padding-top: .7rem;
  border-top: 1px solid var(--trait);
  font-family: var(--font-body);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.vei__lib-carte__detail:empty { display: none; }

/* lib-chapitre — un chapitre numerote, dont le titre colle pendant la lecture.

   LE NUMERO EST DESSINE, PAS ECRIT DANS LE TEXTE. Un gros chiffre en marge cree une
   suite : « 3 » sous-entend qu'il y a un 4 et un 7. C'est le meme ressort que la dette
   chiffree du hero, a l'echelle de la section — et c'est ce qui transforme une page en
   parcours dont on veut voir la fin.

   LE TITRE COLLANT REPOND A « OU SUIS-JE ». Sur vingt mille signes, le lecteur qui
   remonte d'un ecran ne sait plus dans quelle partie il est, et cette desorientation
   suffit a faire abandonner. position: sticky le garde a l'ecran pour une declaration.

   ATTENTION AU PIEGE DE sticky : il ne fonctionne que si AUCUN ancetre ne porte
   overflow autre que visible, et si le parent direct est plus haut que l'element. Le
   conteneur de chapitre ne doit donc jamais recevoir overflow: hidden — c'est ecrit ici
   parce que c'est la premiere chose qu'on ajoute sans y penser, et la panne est
   silencieuse : le titre cesse simplement de coller.
*/

.vei__lib-chapitre {
  /* PAS d'overflow ici : il casserait le sticky du titre. Voir l'entete. */
  position: relative;
  margin: 0 0 var(--dsr-pas, 3.5rem);
  scroll-margin-top: var(--dsr-ancrage, 4rem);
}

.vei__lib-chapitre__tete {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 0 0 1.4rem;
  padding: .7rem 0 .6rem;
  /* Le fond est indispensable : sans lui, le texte defile VISIBLEMENT derriere le titre
     colle, ce qui est pire que pas de sticky du tout. */
  background: var(--color-bg, #1a1a1a);
  border-bottom: 1px solid var(--dsr-filet, var(--color-border, #333));
}

.vei__lib-chapitre__numero {
  flex: none;
  font-family: var(--font-heading, ui-monospace, monospace);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  color: var(--dsr-accent, var(--color-primary, #ffb000));
  font-variant-numeric: tabular-nums;
}

/* La pastille derriere le numero : un cercle en CSS, qui prend la couleur d'accent de
   la declinaison sans qu'on ait rien a redessiner. */
.vei__lib-chapitre__numero::before {
  content: "";
  position: absolute;
  left: -.55rem;
  width: var(--dsr-pastille, 2.4rem);
  height: var(--dsr-pastille, 2.4rem);
  margin-top: -.2rem;
  border-radius: 50%;
  background: color-mix(in srgb,
    var(--dsr-accent, var(--color-primary, #ffb000)) 14%, transparent);
  z-index: -1;
}

.vei__lib-chapitre__titre {
  margin: 0;
  font-family: var(--font-heading, ui-monospace, monospace);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--dsr-titre, var(--color-text, #e8e8e8));
  text-wrap: balance;
}

.vei__lib-chapitre__corps {
  font-family: var(--font-body, ui-monospace, monospace);
  font-size: var(--dsr-corps-taille, 1rem);
  line-height: var(--dsr-corps-interligne, 1.8);
  color: var(--dsr-encre, var(--color-text, #e0e0e0));
}

.vei__lib-chapitre__corps > p {
  margin: 0 0 1.25em;
  max-width: var(--dsr-mesure, 68ch);
  text-wrap: pretty;
}

/* Une mesure en ch et non en px : elle survit a un changement de police, ce qui est
   exactement ce qu'une declinaison fait. Une largeur en pixels aurait donne 75 signes
   en Space Mono et 110 en Georgia. */
.vei__lib-chapitre__corps > ul,
.vei__lib-chapitre__corps > ol {
  margin: 0 0 1.25em;
  max-width: var(--dsr-mesure, 68ch);
  padding-left: 1.4rem;
}

.vei__lib-chapitre__corps > ul > li,
.vei__lib-chapitre__corps > ol > li { margin-bottom: .5em; }

.vei__lib-chapitre__corps > h3 {
  margin: 2em 0 .7em;
  font-family: var(--font-heading, ui-monospace, monospace);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dsr-titre, var(--color-text, #e8e8e8));
}

.vei__lib-chapitre__corps a {
  color: var(--dsr-accent, var(--color-primary, #ffb000));
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

.vei__lib-chapitre__corps a:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
}

.vei__lib-chapitre__corps code {
  padding: .1em .35em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--dsr-accent, var(--color-primary, #ffb000)) 12%,
                        transparent);
  font-size: .92em;
}

/* LE CROCHET : la phrase qui donne la raison de lire le chapitre suivant. Il est
   typographiquement distinct du corps — italique, en retrait, precede d'un chevron
   dessine — pour qu'on le reconnaisse comme une transition et non comme une conclusion. */
.vei__lib-chapitre__crochet {
  position: relative;
  margin: 2rem 0 0;
  padding-left: 1.6rem;
  max-width: 58ch;
  font-family: var(--font-body, ui-monospace, monospace);
  font-size: .97rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--dsr-accent, var(--color-primary, #ffb000));
  text-wrap: pretty;
}

.vei__lib-chapitre__crochet::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .62em;
  width: .4rem;
  height: .4rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.vei__lib-chapitre__crochet:empty { display: none; }

/* --- LE SOMMAIRE NE COLLE PAS DANS CE THEME ---------------------------------------
   lib-sommaire vient du socle, ou il est concu pour une colonne LATERALE : sticky a
   5,5 rem, il accompagne la lecture depuis le cote. Dans un dossier, la mise en page est
   a une seule colonne et le sommaire est POSE DANS le flux, juste avant le premier
   chapitre. Colle, il reste alors au milieu de l'ecran et recouvre le texte qui defile
   dessous — constate le 2026-09-12 sur seodaweb.fr, ou l'encadre « au sommaire »
   chevauchait un paragraphe du chapitre 6.

   C'est aussi le second element colle a concurrencer le titre de chapitre, qui est le
   seul repere dont un dossier a besoin en haut d'ecran.

   L'override vit ici et non dans la feuille du site : le conflit nait du systeme de
   chapitres, il se regle avec lui. _css_partagees ne livre lib-chapitre.css que si des
   chapitres sont rendus — c'est-a-dire exactement quand le conflit existe. */
.vei__lib-chapitre ~ .vei__lib-sommaire,
.vei__lib-sommaire:has(~ .vei__lib-chapitre) {
  position: static;
}

/* Repli sans :has() — le selecteur de frere suffit dans le sens habituel (sommaire AVANT
   les chapitres), qui est l'ordre de composition reel de ce theme. */
@supports not selector(:has(*)) {
  .vei__lib-sommaire { position: static; }
}

/* lib-chiffre — un chiffre et son label, empiles. */

.vei__lib-chiffre {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.vei__lib-chiffre:last-child { border-bottom: 0; }

.vei__lib-chiffre__valeur {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--color-primary);
}

.vei__lib-chiffre__label {
  font-family: var(--font-body);
  font-size: .86rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* lib-chrono — SURCHARGE gazette : la frise en page d'almanach.
   Habille aussi lib-chrono-jalon (classes lib-chrono__jalon, __date, __nom, __quoi).

   L'ANNEE EST LE TITRE DU JALON. En grands chiffres de titrage sur la primary, elle se
   lit de loin (plus de 24 px : 3:1 suffit, la primary d'un theme festif le tient) ; un
   double filet la prolonge jusqu'au bord de la colonne. Le nom vient dessous, puis ce que
   le jalon a change, en texte attenue.

   LES JALONS SE LISENT PAR RANGEES, de gauche a droite : trois colonnes au bureau, deux
   sur une tablette, une sur un telephone, sans une ligne de media query. */

.vei__lib-chrono {
  max-width: var(--gaz-large);
  margin: 0 auto;
  padding: 0 var(--gaz-gouttiere);
}

.vei__lib-chrono__titre {
  max-width: 40rem;
  margin: 0 auto 2rem;
  font: italic 600 clamp(1.2rem, 2vw, 1.45rem)/1.3 var(--font-heading);
  text-align: center;
  text-wrap: balance;
  color: var(--color-secondary);
}

.vei__lib-chrono__jalons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vei__lib-chrono__jalon {
  display: flex;
  flex-direction: column;
  padding: 1rem 0 2rem;
}

.vei__lib-chrono__date {
  display: flex;
  align-items: center;
  gap: .9rem;
  font: 600 clamp(2.6rem, 4.2vw, 3.5rem)/1 var(--font-heading);
  font-variant-numeric: lining-nums;
  color: var(--color-primary);
}

.vei__lib-chrono__date::after {
  content: "";
  flex: 1;
  border-top: 3px double var(--gaz-filet);
}

.vei__lib-chrono__nom {
  margin: .7rem 0 .4rem;
  font: 600 1.32rem/1.18 var(--font-heading);
  text-wrap: balance;
  color: var(--gaz-encre);
}

.vei__lib-chrono__nom a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gaz-filet);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.vei__lib-chrono__nom a:hover,
.vei__lib-chrono__nom a:focus-visible {
  color: var(--color-secondary);
  text-decoration-color: var(--color-primary);
}

.vei__lib-chrono__quoi {
  font-size: .93rem;
  line-height: 1.62;
  text-wrap: pretty;
  color: var(--color-text-muted);
}

.vei__lib-chrono__source {
  max-width: 40rem;
  margin: .4rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gaz-filet);
  font-size: .88rem;
  font-style: italic;
  text-align: center;
  color: var(--color-text-muted);
}

.vei__lib-chrono__source:empty { display: none; }

@media print {
  .vei__lib-chrono__date::after { border-top-width: 1px; }
}

/* lib-citation — SURCHARGE gazette : l'exergue de magazine.

   Deux doubles filets, une etoile sur celui du haut, la phrase en grand italique de
   titrage sur la secondary (elle tient 4,5:1 sur le fond, a toute taille). L'etoile est un
   clip-path lisant la primary ; derriere elle, un carre du fond de page coupe le filet :
   aucune image, aucune couleur ecrite.

   AU BUREAU, L'EXERGUE DEBORDE LA COLONNE de 3,5 rem de chaque cote : c'est le debordement
   qui signale le changement de registre (lecon du dossier). Sur un telephone, il reste
   dans la colonne. */

.vei__lib-citation {
  position: relative;
  margin: 3rem 0;
  padding: 2.2rem 0 1.7rem;
  border-top: 3px double var(--gaz-filet);
  border-bottom: 3px double var(--gaz-filet);
  text-align: center;
}

.vei__lib-citation::before,
.vei__lib-citation::after {
  content: "";
  position: absolute;
  left: 50%;
}

.vei__lib-citation::before {
  top: -1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: -1.25rem;
  background: var(--color-bg);
}

.vei__lib-citation::after {
  top: -.8rem;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: -.8rem;
  background: var(--color-primary);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.vei__lib-citation__texte {
  max-width: 34ch;
  margin: 0 auto;
  font: italic 600 clamp(1.55rem, 1.1rem + 1.6vw, 2.25rem)/1.2 var(--font-heading);
  text-wrap: balance;
  color: var(--color-secondary);
}

.vei__lib-citation__qui {
  margin-top: 1rem;
  font: 600 .72rem/1.5 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gaz-lien);
}

.vei__lib-citation__qui:empty { display: none; }

@media (min-width: 60rem) {
  .vei__lib-citation { margin-inline: -3.5rem; }
}

@media print {
  .vei__lib-citation::before,
  .vei__lib-citation::after { display: none; }
}

/* lib-detour — la digression. La signature visuelle de ce theme.

   ELLE DOIT SE VOIR COMME UN OBJET DIFFERENT, pas comme un paragraphe grise. C'est tout
   l'effet : un bloc pose a l'ecart et etiquete se lit DAVANTAGE qu'un paragraphe
   ordinaire, parce que le lecteur choisit d'y entrer au lieu de le subir. D'ou une
   rupture franche — fond, filet, decalage — et non une nuance de gris.

   ELLE DEBORDE LEGEREMENT DANS LA MARGE, cote gauche, par une marge negative. C'est ce
   qui la fait lire comme une note portee a cote du texte et non comme une section de
   plus. Sous 50rem la marge negative disparait : dans une colonne etroite, deborder
   revient a rogner le texte.

   LE CHEVRON EST DESSINE EN CSS, pas en caractere : un « › » depend de la police, et
   cinq declinaisons changent de police. Une bordure tournee a 45 degres ne depend de rien.
*/

.vei__lib-detour {
  position: relative;
  margin: 2rem 0 2rem calc(-1 * var(--dsr-detour-debord, 1.8rem));
  padding: 1.2rem 1.4rem 1.3rem calc(1.4rem + var(--dsr-detour-debord, 1.8rem));
  max-width: calc(var(--dsr-mesure, 68ch) + var(--dsr-detour-debord, 1.8rem));
  border-left: var(--dsr-detour-filet, 3px) solid
               var(--dsr-accent, var(--color-primary, #ffb000));
  border-radius: 0 var(--dsr-rayon, 6px) var(--dsr-rayon, 6px) 0;
  background: var(--dsr-detour-fond,
    color-mix(in srgb, var(--dsr-accent, var(--color-primary, #ffb000)) 7%,
              var(--color-bg, #1a1a1a)));
}

@media (max-width: 50rem) {
  .vei__lib-detour {
    margin-left: 0;
    padding-left: 1.2rem;
    max-width: 100%;
  }
}

/* L'etiquette : c'est elle qui permet de decider d'entrer en un coup d'oeil. Sans
   intitule, un encadre n'est qu'un paragraphe deplace. */
.vei__lib-detour__etiquette {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .45rem;
  font-family: var(--font-body, ui-monospace, monospace);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--dsr-accent, var(--color-primary, #ffb000));
}

.vei__lib-detour__etiquette::before {
  content: "";
  width: .38rem;
  height: .38rem;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.vei__lib-detour__titre {
  margin: 0 0 .6rem;
  font-family: var(--font-heading, ui-monospace, monospace);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dsr-titre, var(--color-text, #e8e8e8));
  text-wrap: balance;
}

.vei__lib-detour__corps {
  font-family: var(--font-body, ui-monospace, monospace);
  font-size: .93rem;
  line-height: 1.7;
  color: var(--dsr-encre, var(--color-text, #e0e0e0));
}

.vei__lib-detour__corps > p { margin: 0 0 .9em; text-wrap: pretty; }
.vei__lib-detour__corps > p:last-child { margin-bottom: 0; }

.vei__lib-detour__corps a {
  color: var(--dsr-accent, var(--color-primary, #ffb000));
  text-underline-offset: .18em;
}

.vei__lib-detour__corps a:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
}

/* lib-faq — SURCHARGE gazette : les questions en rubrique de magazine.

   Le depliant reste un <details> natif (le contenu vit dans le HTML servi). Les questions
   se separent par un filet, le bloc entier par deux doubles filets ; l'etoile du theme
   marque chaque question et pivote d'un quart de tour a l'ouverture. La reponse ouverte se
   pose sur le papier du theme, filet de primary a gauche. Les liens d'une reponse lisent
   --gaz-lien (4,5:1), jamais la primary. */

.vei__lib-faq {
  padding-top: 1rem;
}

.vei__lib-faq__titre {
  margin: 0 0 1rem;
  font: italic 600 clamp(1.5rem, 1.2rem + 1vw, 1.95rem)/1.15 var(--font-heading);
  text-wrap: balance;
  color: var(--color-secondary);
  scroll-margin-top: 5.5rem;
}

/* Filet simple en bas : le bloc qui suit (articles lies) s'ouvre deja sur un double filet,
   et deux doubles filets a quarante pixels l'un de l'autre se lisaient comme une faute. */
.vei__lib-faq__liste {
  border-top: 3px double var(--gaz-filet);
  border-bottom: 1px solid var(--gaz-filet);
}

.vei__lib-faq__liste details + details { border-top: 1px solid var(--gaz-filet); }

.vei__lib-faq__liste summary {
  position: relative;
  display: block;
  padding: 1rem 2.6rem 1rem 0;
  font: 600 1.3rem/1.28 var(--font-heading);
  color: var(--gaz-encre);
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}

.vei__lib-faq__liste summary::-webkit-details-marker { display: none; }

.vei__lib-faq__liste summary::after {
  content: "";
  position: absolute;
  right: .45rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -.5rem;
  background: var(--color-primary);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  transition: transform .3s ease;
}

.vei__lib-faq__liste details[open] > summary::after { transform: rotate(45deg); }

.vei__lib-faq__liste summary:hover,
.vei__lib-faq__liste summary:focus-visible { color: var(--color-secondary); }

.vei__lib-faq__liste summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.vei__lib-faq__liste details > :not(summary) {
  margin: 0 0 1.1rem;
  padding: .9rem 1.15rem;
  background: var(--gaz-papier);
  border-left: 3px solid var(--color-primary);
  font-size: .97rem;
  line-height: 1.68;
  text-wrap: pretty;
  color: var(--color-text);
}

.vei__lib-faq__liste details a {
  color: var(--gaz-lien);
  text-decoration: underline;
  text-underline-offset: .18em;
}

@media print {
  .vei__lib-faq__liste summary::after { display: none; }
}

/* lib-forum-acces, lib-forum-formulaire, lib-forum-champ — l'acces au compte.

   DEUX POIDS, PAS UN. « Se connecter » en lien simple, « Creer un compte » en bouton
   plein : deux actions de meme poids ne proposent pas un choix, elles le suspendent.
   C'est l'ordre de tous les forums, et il suit l'usage — la majorite de ceux qui
   cliquent ont deja un compte, mais c'est l'inscription qui fait grandir le lieu.

   LE FORMULAIRE EST ETROIT. Un champ de saisie large de mille pixels donne une cible
   absurde et une ligne de texte illisible. Trente rem est la largeur ou l'oeil suit sa
   propre saisie. */

.vei__lib-forum-acces {
  display: flex;
  align-items: center;
  gap: .4rem 1rem;
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .86rem;
}

.vei__lib-forum-acces__lien {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  color: inherit;
  text-decoration: none;
  opacity: .85;
}

.vei__lib-forum-acces__lien:hover { opacity: 1; text-decoration: underline; }

.vei__lib-forum-acces__bouton {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 .9rem;
  border-radius: 6px;
  background: var(--frm-sur-bandeau, #fff);
  color: var(--frm-bandeau, var(--color-primary, #16283c));
  font-weight: 700;
  text-decoration: none;
}

.vei__lib-forum-acces__bouton:hover {
  background: color-mix(in srgb, var(--frm-sur-bandeau, #fff) 88%, var(--frm-bandeau, #16283c));
}

.vei__lib-forum-acces__lien:focus-visible,
.vei__lib-forum-acces__bouton:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.vei__lib-forum-formulaire {
  max-width: 30rem;
}

.vei__lib-forum-formulaire__titre {
  margin: 0 0 .4rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.18;
  color: var(--color-text, #1c2430);
}

.vei__lib-forum-formulaire__chapo,
.vei__lib-forum-formulaire__aide,
.vei__lib-forum-formulaire__bascule {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--color-text-muted, #61707f);
}

.vei__lib-forum-formulaire__chapo { margin: 0 0 1.5rem; }

.vei__lib-forum-formulaire__form {
  padding: 1.3rem 1.2rem;
  border: 1px solid var(--trait, var(--color-border, #dfe4ea));
  border-radius: var(--rayon-l, var(--radius-card, 8px));
  background: var(--frm-survol, var(--color-surface, #f4f6f8));
}

.vei__lib-forum-champ {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: 0 0 1rem;
}

.vei__lib-forum-champ__etiquette {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .86rem;
  font-weight: 600;
  color: var(--color-text, #1c2430);
}

/* Cible de saisie a 44 px : en dessous, on rate le champ au pouce et on tape a cote. */
.vei__lib-forum-champ__saisie {
  min-height: 44px;
  padding: .5rem .7rem;
  border: 1px solid var(--trait, var(--color-border, #dfe4ea));
  border-radius: 6px;
  background: var(--color-bg, #fff);
  color: var(--color-text, #1c2430);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
}

.vei__lib-forum-champ__saisie:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-primary, #2d4a6b));
  outline-offset: 1px;
}

/* L'aide est AVANT la saisie dans l'ordre de lecture, pas apres l'erreur. */
.vei__lib-forum-champ__aide {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--color-text-muted, #61707f);
}

.vei__lib-forum-champ__aide:empty { display: none; }

.vei__lib-forum-formulaire__envoi { margin: 1.3rem 0 0; }

.vei__lib-forum-formulaire__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  width: 100%;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 6px;
  background: var(--frm-bandeau, var(--color-primary, #16283c));
  color: var(--frm-sur-bandeau, #fff);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.vei__lib-forum-formulaire__bouton:hover {
  background: color-mix(in srgb, var(--frm-bandeau, #16283c) 85%, #000);
}

.vei__lib-forum-formulaire__bouton:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 3px;
}

.vei__lib-forum-formulaire__aide { margin: 1rem 0 0; }

.vei__lib-forum-formulaire__bascule {
  margin: 1.4rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--trait, var(--color-border, #dfe4ea));
}

/* lib-forum-categorie, lib-forum-ligne, lib-forum-dernier — la page d'index.

   LE TABLEAU EST LA BONNE BALISE, ET C'EST RARE. Un forum aligne des donnees a colonnes
   homogenes — nom, sujets, messages, dernier — sur des dizaines de lignes. C'est la
   definition d'un tableau. Le rendre en <div> obligerait a reconstruire l'alignement, la
   navigation au clavier et l'annonce des en-tetes par les lecteurs d'ecran, qui viennent
   tous gratuitement ici.

   SUR TELEPHONE IL SE REPLIE EN CARTES. Un tableau de quatre colonnes a 380 px est
   illisible quelle que soit la typographie. Les cellules passent en blocs, et les
   compteurs se mettent en ligne sous le nom — l'ordre de lecture reste celui du tableau.

   LA DENSITE EST LE SUJET. Un forum aere ne ressemble plus a un forum : c'est la
   compacite qui permet de balayer trente entrees d'un regard, et c'est pour cela que
   le genre a garde ses lignes serrees pendant vingt-cinq ans. */

.vei__lib-forum-categorie {
  margin: 0 0 1.8rem;
}

.vei__lib-forum-categorie__nom {
  margin: 0;
  padding: .6rem .9rem;
  border-radius: var(--rayon-l, var(--radius-card, 8px)) var(--rayon-l, var(--radius-card, 8px)) 0 0;
  background: var(--frm-bandeau, var(--color-primary, #2d4a6b));
  color: var(--frm-sur-bandeau, var(--color-sur-primary, #fff));
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1rem;
  letter-spacing: .01em;
}

.vei__lib-forum-categorie__table,
.vei__lib-sujets,
.vei__lib-membres,
.vei__lib-equipe__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .9rem;
  background: var(--color-bg, #fff);
}

.vei__lib-forum-categorie__th,
.vei__lib-sujets__th,
.vei__lib-membres__th,
.vei__lib-equipe__th {
  padding: .5rem .9rem;
  border-bottom: 2px solid var(--trait, var(--color-border, #d7d2c8));
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-muted, #6f6a62);
  white-space: nowrap;
}

.vei__lib-forum-categorie__th--n,
.vei__lib-sujets__th--n,
.vei__lib-membres__th--n,
.vei__lib-equipe__th--n {
  text-align: right;
}

.vei__lib-forum-ligne,
.vei__lib-sujet-ligne,
.vei__lib-membre-ligne {
  border-bottom: 1px solid var(--trait, var(--color-border, #e8e2da));
}

.vei__lib-forum-ligne:hover,
.vei__lib-sujet-ligne:hover {
  background: var(--frm-survol, var(--color-surface, #f7f5f1));
}

.vei__lib-forum-ligne__sujet,
.vei__lib-sujet-ligne__sujet {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .75rem .9rem;
}

/* L'icone est un reperage, pas un etat de lecture : un site statique ne sait pas ce que
   ce visiteur a deja lu, et pretendre le contraire serait un compteur qui ment. */
.vei__lib-forum-ligne__icone,
.vei__lib-sujet-ligne__icone {
  flex: 0 0 auto;
  width: 1.6rem;
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: center;
  color: var(--frm-icone, var(--color-primary, #2d4a6b));
}

.vei__lib-forum-ligne__corps,
.vei__lib-sujet-ligne__corps {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.vei__lib-forum-ligne__nom,
.vei__lib-sujet-ligne__lien {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1rem;
  line-height: 1.28;
  color: var(--color-text, #23201c);
  text-decoration: none;
}

.vei__lib-forum-ligne__nom:hover,
.vei__lib-sujet-ligne__lien:hover {
  text-decoration: underline;
  text-underline-offset: .18em;
}

.vei__lib-forum-ligne__promesse,
.vei__lib-sujet-ligne__meta {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--color-text-muted, #6f6a62);
}

/* Les compteurs sont en chiffres tabulaires : sans cela, une colonne de nombres danse
   d'une ligne a l'autre et cesse d'etre comparable d'un coup d'oeil. */
.vei__lib-forum-ligne__n,
.vei__lib-sujet-ligne__n,
.vei__lib-membre-ligne__n {
  padding: .75rem .9rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #23201c);
  white-space: nowrap;
}

.vei__lib-forum-ligne__dernier,
.vei__lib-sujet-ligne__dernier {
  padding: .75rem .9rem;
  min-width: 12rem;
}

.vei__lib-forum-dernier {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-size: .82rem;
  line-height: 1.45;
}

.vei__lib-forum-dernier__titre {
  color: var(--color-text, #23201c);
  text-decoration: none;
}

.vei__lib-forum-dernier__titre:hover { text-decoration: underline; }

.vei__lib-forum-dernier__meta,
.vei__lib-forum-dernier__date {
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-forum-dernier__auteur {
  font-weight: 600;
  color: var(--frm-pseudo, var(--color-primary, #2d4a6b));
}

@media (max-width: 48rem) {
  .vei__lib-forum-categorie__table thead,
  .vei__lib-sujets thead,
  .vei__lib-membres thead,
  .vei__lib-equipe__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .vei__lib-forum-categorie__table,
  .vei__lib-sujets,
  .vei__lib-membres,
  .vei__lib-equipe__table,
  .vei__lib-forum-categorie__table tbody,
  .vei__lib-sujets tbody,
  .vei__lib-membres tbody,
  .vei__lib-equipe__table tbody,
  .vei__lib-forum-ligne,
  .vei__lib-sujet-ligne,
  .vei__lib-membre-ligne,
  .vei__lib-forum-ligne > td,
  .vei__lib-sujet-ligne > td,
  .vei__lib-membre-ligne > td {
    display: block;
    width: auto;
  }

  .vei__lib-forum-ligne > td,
  .vei__lib-sujet-ligne > td,
  .vei__lib-membre-ligne > td {
    padding: 0 .9rem;
    text-align: left;
  }

  .vei__lib-forum-ligne,
  .vei__lib-sujet-ligne,
  .vei__lib-membre-ligne {
    padding: .8rem 0;
  }

  /* Les compteurs se remettent en ligne sous le nom : ils gardent leur sens sans
     occuper chacun une ligne entiere. */
  .vei__lib-forum-ligne__n,
  .vei__lib-sujet-ligne__n,
  .vei__lib-membre-ligne__n {
    display: inline-block;
    padding-right: 0;
    font-size: .8rem;
    color: var(--color-text-muted, #6f6a62);
  }

  .vei__lib-forum-ligne__n::after,
  .vei__lib-sujet-ligne__n::after { content: " ·"; }

  .vei__lib-forum-ligne__dernier,
  .vei__lib-sujet-ligne__dernier { padding-top: .4rem; }
}

/* lib-forum-entete, lib-forum-pied, lib-forum-texte — le cadre du forum.

   LA BARRE EST SOMBRE ET DENSE. C'est la convention du genre depuis phpBB : un bandeau
   qui tranche avec la zone de lecture, pour que l'oeil sache en permanence ou s'arrete
   le site et ou commence la discussion. Sur un blog on peut s'en passer ; sur un forum,
   ou l'on navigue verticalement pendant des minutes, c'est le seul repere fixe.

   LARGEUR : le forum va plus large qu'un article. Un tableau a quatre colonnes etouffe
   a 46 rem, et la densite est precisement ce qui fait tenir trente lignes a l'ecran. */

.vei__lib-forum-entete {
  background: var(--frm-bandeau, var(--color-primary, #2d4a6b));
  color: var(--frm-sur-bandeau, var(--color-sur-primary, #fff));
}

.vei__lib-forum-entete__inner,
.vei__lib-forum-pied__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.6rem;
  max-width: 74rem;
  margin: 0 auto;
  padding: .75rem clamp(1rem, .6rem + 1.8vw, 2rem);
}

.vei__lib-forum-entete__marque {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  color: inherit;
  text-decoration: none;
}

.vei__lib-forum-entete__nom {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.2;
}

.vei__lib-forum-entete__baseline {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .76rem;
  opacity: .8;
}

.vei__lib-forum-entete__liens,
.vei__lib-forum-pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .86rem;
}

.vei__lib-forum-lien__lien {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  color: inherit;
  text-decoration: none;
  opacity: .85;
}

.vei__lib-forum-lien__lien:hover { opacity: 1; text-decoration: underline; }

.vei__lib-forum-lien__lien[aria-current="page"] {
  opacity: 1;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .3em;
}

.vei__lib-forum-lien__lien:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.vei__lib-forum-pied {
  margin: 2.5rem 0 0;
  border-top: 3px solid var(--frm-bandeau, var(--color-primary, #2d4a6b));
  background: var(--frm-survol, var(--color-surface, #f7f5f1));
  color: var(--color-text, #1c2430);
}

.vei__lib-forum-pied__inner { align-items: flex-start; padding-block: 1.4rem; }

.vei__lib-forum-pied__marque {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
}

.vei__lib-forum-pied__nom {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1rem;
}

.vei__lib-forum-pied__phrase,
.vei__lib-forum-pied__mentions {
  font-size: .8rem;
  line-height: 1.55;
  color: var(--color-text-muted, #61707f);
}

.vei__lib-forum-pied__mentions {
  flex: 1 0 100%;
  margin: .8rem 0 0;
  padding: .8rem 0 0;
  border-top: 1px solid var(--trait, var(--color-border, #dfe4ea));
}

.vei__lib-forum-texte {
  max-width: 64ch;
}

.vei__lib-forum-texte__titre {
  margin: 0 0 .5rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.16;
  color: var(--color-text, #1c2430);
}

.vei__lib-forum-texte__chapo {
  margin: 0 0 1.6rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--color-text-muted, #61707f);
}

.vei__lib-forum-texte__corps {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .97rem;
  line-height: 1.72;
  color: var(--color-text, #1c2430);
}

.vei__lib-forum-texte__corps h2 {
  margin: 1.8rem 0 .6rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.2rem;
  line-height: 1.25;
}

.vei__lib-forum-texte__corps ul { padding-left: 1.2rem; }
.vei__lib-forum-texte__corps li { margin: .3rem 0; }

.vei__lib-forum-page {
  display: block;
  max-width: 74rem;
  margin: 0 auto;
  padding: 1.6rem clamp(1rem, .6rem + 1.8vw, 2rem) 2.4rem;
}

.vei__lib-forum-page[data-largeur="etroit"] { max-width: 52rem; }

/* lib-forum-tete, lib-forum-stats, lib-pagination, lib-legende, lib-profil, lib-equipe
   — les blocs de service d'un forum.

   ILS SONT DISCRETS ET ILS SONT INDISPENSABLES. Aucun ne porte le contenu ; tous disent
   ou l'on est, ce qu'on regarde, et ce que le lieu vaut. Un forum prive de ces blocs
   reste lisible et cesse d'etre un forum : c'est la somme des compteurs, de la legende
   et de la pagination qui produit la reconnaissance du genre, pas un seul d'entre eux. */

.vei__lib-forum-tete {
  margin: 0 0 1.2rem;
  padding: 0 0 .9rem;
  border-bottom: 2px solid var(--trait, var(--color-border, #e8e2da));
}

.vei__lib-forum-tete__surtitre {
  margin: 0 0 .25rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--frm-pseudo, var(--color-primary, #2d4a6b));
}

.vei__lib-forum-tete__surtitre:empty { display: none; }

.vei__lib-forum-tete__titre {
  margin: 0 0 .4rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);
  line-height: 1.18;
  color: var(--color-text, #23201c);
}

.vei__lib-forum-tete__promesse {
  margin: 0 0 .6rem;
  max-width: 62ch;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .94rem;
  line-height: 1.6;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-forum-tete__promesse:empty { display: none; }

.vei__lib-forum-tete__pied {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .8rem;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-forum-tete__equipe:empty { display: none; }

.vei__lib-forum-stats,
.vei__lib-legende {
  margin: 1.6rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--trait, var(--color-border, #e8e2da));
  border-radius: var(--rayon-l, var(--radius-card, 8px));
  background: var(--frm-survol, var(--color-surface, #f7f5f1));
}

.vei__lib-forum-stats__titre,
.vei__lib-legende__titre {
  margin: 0 0 .7rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: .95rem;
  color: var(--color-text, #23201c);
}

.vei__lib-forum-stats__liste,
.vei__lib-profil__chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  margin: 0;
}

.vei__lib-forum-chiffre {
  display: flex;
  flex-direction: column-reverse;
  gap: .05rem;
}

/* La valeur au-dessus du libelle, en chiffres tabulaires : c'est le nombre qu'on vient
   chercher, le mot ne fait que le nommer. */
.vei__lib-forum-chiffre__valeur {
  margin: 0;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.35rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--frm-pseudo, var(--color-primary, #2d4a6b));
}

.vei__lib-forum-chiffre__nom {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-forum-stats__note {
  margin: .8rem 0 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-forum-stats__note:empty { display: none; }

.vei__lib-legende__liste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vei__lib-legende-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .8rem;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-legende-item__signe {
  color: var(--frm-icone, var(--color-primary, #2d4a6b));
}

.vei__lib-pagination {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.2rem 0;
}

.vei__lib-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vei__lib-pagination-page__lien,
.vei__lib-pagination-page__courante,
.vei__lib-pagination__bord a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 .5rem;
  border: 1px solid var(--trait, var(--color-border, #e8e2da));
  border-radius: 6px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #23201c);
  text-decoration: none;
}

.vei__lib-pagination-page__lien:hover,
.vei__lib-pagination__bord a:hover {
  border-color: var(--frm-icone, var(--color-primary, #2d4a6b));
}

/* La page courante n'est pas un lien : le CSS retire celui dont la cible est vide, et
   fait apparaitre la mention a sa place. Meme mecanisme que le selecteur de langue. */
.vei__lib-pagination-page__courante { display: none; }

.vei__lib-pagination-page:has(.vei__lib-pagination-page__lien[href=""]) .vei__lib-pagination-page__lien {
  display: none;
}

.vei__lib-pagination-page:has(.vei__lib-pagination-page__lien[href=""]) .vei__lib-pagination-page__courante {
  display: inline-flex;
  border-color: var(--frm-bandeau, var(--color-primary, #2d4a6b));
  background: var(--frm-bandeau, var(--color-primary, #2d4a6b));
  color: var(--frm-sur-bandeau, var(--color-sur-primary, #fff));
  font-weight: 700;
}

@supports not selector(:has(*)) {
  .vei__lib-pagination-page__lien[href=""] { display: none; }
  .vei__lib-pagination-page__courante { display: inline-flex; font-weight: 700; }
}

.vei__lib-profil {
  display: grid;
  gap: 1.6rem;
}

@media (min-width: 52rem) {
  .vei__lib-profil { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; }
}

.vei__lib-profil__identite {
  padding: 1.2rem 1.1rem;
  border: 1px solid var(--trait, var(--color-border, #e8e2da));
  border-radius: var(--rayon-l, var(--radius-card, 8px));
  background: var(--frm-survol, var(--color-surface, #f7f5f1));
  text-align: center;
}

.vei__lib-profil__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--frm-bandeau, var(--color-primary, #2d4a6b));
  color: var(--frm-sur-bandeau, var(--color-sur-primary, #fff));
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.7rem;
}

.vei__lib-profil__pseudo {
  margin: .6rem 0 .2rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.3rem;
  color: var(--color-text, #23201c);
}

.vei__lib-profil__rang {
  margin: 0 0 .8rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--frm-pseudo, var(--color-primary, #2d4a6b));
}

.vei__lib-profil__bio {
  margin: 0 0 1rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .88rem;
  line-height: 1.6;
  text-align: left;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-profil__bio:empty { display: none; }

.vei__lib-profil__chiffres { justify-content: center; }

.vei__lib-profil__titre-fils,
.vei__lib-equipe__titre {
  margin: 0 0 .8rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.15rem;
  color: var(--color-text, #23201c);
}

.vei__lib-equipe__chapo {
  margin: 0 0 1.2rem;
  max-width: 62ch;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .94rem;
  line-height: 1.62;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-membre-ligne__membre {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
}

.vei__lib-membre-ligne__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--frm-bandeau, var(--color-primary, #2d4a6b));
  color: var(--frm-sur-bandeau, var(--color-sur-primary, #fff));
  font-size: .85rem;
}

.vei__lib-membre-ligne__pseudo {
  font-weight: 600;
  color: var(--frm-pseudo, var(--color-primary, #2d4a6b));
  text-decoration: none;
}

.vei__lib-membre-ligne__pseudo:hover { text-decoration: underline; }

.vei__lib-membre-ligne__rang,
.vei__lib-membre-ligne__inscrit {
  padding: .6rem .9rem;
  font-size: .82rem;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-sujet-ligne__prefixe {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--frm-icone, var(--color-primary, #2d4a6b));
}

.vei__lib-sujet-ligne__prefixe:empty { display: none; }

/* Les epingles se distinguent du flot : c'est la seule hierarchie editoriale d'un
   forum, et elle ne sert a rien si elle ne se voit pas. */
.vei__lib-sujets__epingles .vei__lib-sujet-ligne {
  background: color-mix(in srgb,
              var(--frm-icone, var(--color-primary, #2d4a6b)) 5%, transparent);
}

.vei__lib-sujets__epingles:empty { display: none; }

/* lib-forum-ariane — le fil, sous la barre. Le marqueur le plus constant du genre.
 *
 * Les separateurs sont poses en CSS et non dans le HTML : un « > » ecrit entre deux
 * liens est lu a voix haute par un lecteur d'ecran, et il se copie avec le texte. */
.vei__lib-forum-ariane {
  margin: 0 0 1rem;
}

.vei__lib-forum-ariane__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .8rem;
  color: var(--color-text-muted, #61707f);
}

.vei__lib-forum-maillon {
  display: inline-flex;
  align-items: center;
}

.vei__lib-forum-maillon + .vei__lib-forum-maillon::before {
  content: "›";
  margin: 0 .45rem;
  opacity: .55;
}

.vei__lib-forum-maillon__lien {
  color: var(--frm-pseudo, var(--color-primary, #2d4a6b));
  text-decoration: none;
}

.vei__lib-forum-maillon__lien:hover { text-decoration: underline; }

.vei__lib-forum-maillon__courant { display: none; color: var(--color-text, #1c2430); }

.vei__lib-forum-maillon:has(.vei__lib-forum-maillon__lien[href=""]) .vei__lib-forum-maillon__lien {
  display: none;
}

.vei__lib-forum-maillon:has(.vei__lib-forum-maillon__lien[href=""]) .vei__lib-forum-maillon__courant {
  display: inline;
}

@supports not selector(:has(*)) {
  .vei__lib-forum-maillon__lien[href=""] { display: none; }
  .vei__lib-forum-maillon__courant { display: inline; }
}

/* lib-forum-suite — les voisins d'un sujet. */
.vei__lib-forum-suite {
  margin: 2rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 2px solid var(--trait, var(--color-border, #dfe4ea));
}

.vei__lib-forum-suite__sequence {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 1.4rem;
  margin: 0 0 1.4rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .84rem;
}

.vei__lib-forum-suite__bord a {
  color: var(--frm-pseudo, var(--color-primary, #2d4a6b));
  text-decoration: none;
}

.vei__lib-forum-suite__bord a:hover { text-decoration: underline; }

.vei__lib-forum-suite__titre {
  margin: 0 0 .7rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.05rem;
  color: var(--color-text, #1c2430);
}

.vei__lib-forum-suite__liste {
  display: grid;
  gap: .7rem;
}

@media (min-width: 46rem) {
  .vei__lib-forum-suite__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vei__lib-forum-suite__liste:empty { display: none; }
.vei__lib-forum-suite__liste:empty + .vei__lib-forum-suite__titre { display: none; }

/* lib-forum-haut et lib-forum-saut — le pied de page d'un forum. */
.vei__lib-forum-haut {
  margin: 1.6rem 0 0;
  text-align: right;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .8rem;
}

.vei__lib-forum-haut__lien {
  color: var(--color-text-muted, #61707f);
  text-decoration: none;
}

.vei__lib-forum-haut__lien::before { content: "↑ "; }
.vei__lib-forum-haut__lien:hover { text-decoration: underline; }

.vei__lib-forum-saut {
  margin: 1.6rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--trait, var(--color-border, #dfe4ea));
  border-radius: var(--rayon-l, var(--radius-card, 8px));
  background: var(--frm-survol, var(--color-surface, #f4f6f8));
}

.vei__lib-forum-saut__titre {
  margin: 0 0 .6rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #61707f);
}

.vei__lib-forum-saut__liste {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .84rem;
}

.vei__lib-forum-saut .vei__lib-forum-lien__lien {
  min-height: 32px;
  color: var(--frm-pseudo, var(--color-primary, #2d4a6b));
  opacity: 1;
}

/* Le rang prend des pastilles, comme les etoiles de phpBB : une lecture instantanee de
   l'anciennete, sans avoir a lire un nombre. */
.vei__lib-message__pastilles {
  letter-spacing: .12em;
  font-size: .62rem;
  color: var(--frm-icone, var(--color-primary, #2d4a6b));
}

.vei__lib-message__pastilles:empty { display: none; }

.vei__lib-message__lieu {
  font-size: .72rem;
  color: var(--color-text-muted, #61707f);
}

.vei__lib-message__lieu:empty { display: none; }

/* lib-gaz-bandeau — l'ouverture d'une rubrique : un carton qui chevauche la photo.

   Comme la couverture : la photo garde sa taille native (colonne de droite), le carton
   deborde sur elle depuis la gauche. Sur un telephone, la photo passe au-dessus et le
   carton remonte sur son bas. */

.vei__lib-gaz-bandeau {
  max-width: var(--gaz-large);
  margin: 1.6rem auto 0;
  padding: 0 var(--gaz-gouttiere);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-areas: "carton photo";
  align-items: center;
}

.vei__lib-gaz-bandeau__photo {
  grid-area: photo;
  position: relative;
  isolation: isolate;
}

.vei__lib-gaz-bandeau__photo::before {
  content: "";
  position: absolute;
  inset: -1.1rem 1.1rem 1.1rem -1.1rem;
  z-index: -1;
  background: var(--gaz-creme);
}

.vei__lib-gaz-bandeau__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  outline: 1px solid var(--gaz-cadre);
  outline-offset: -.9rem;
}

.vei__lib-gaz-bandeau__photo:empty { display: none; }

.vei__lib-gaz-bandeau__carton {
  grid-area: carton;
  position: relative;
  z-index: 1;
  margin-right: -5rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--color-bg);
  border-top: 4px solid var(--color-primary);
  box-shadow: var(--gaz-ombre);
}

.vei__lib-gaz-bandeau__fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  margin: 0 0 1.1rem;
  font-size: .82rem;
  color: var(--color-text-muted);
}

.vei__lib-gaz-bandeau__fil a {
  color: var(--gaz-lien);
  text-underline-offset: .2em;
}

.vei__lib-gaz-bandeau__fil a::after {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-left: .6rem;
  vertical-align: .1em;
  background: var(--color-primary);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.vei__lib-gaz-bandeau__surtitre {
  margin: 0 0 .5rem;
  font: 600 .74rem/1.3 var(--font-body);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.vei__lib-gaz-bandeau__titre {
  margin: 0 0 .9rem;
  font: italic 600 clamp(2.3rem, 4.8vw, 3.9rem)/1.02 var(--font-heading);
  text-wrap: balance;
  color: var(--gaz-encre);
}

.vei__lib-gaz-bandeau__chapo {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.vei__lib-gaz-bandeau__fil:empty,
.vei__lib-gaz-bandeau__surtitre:empty,
.vei__lib-gaz-bandeau__chapo:empty { display: none; }

@media (max-width: 56.25rem) {
  .vei__lib-gaz-bandeau {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photo" "carton";
    margin-top: 1rem;
  }
  .vei__lib-gaz-bandeau__photo { margin-left: 1.1rem; }
  .vei__lib-gaz-bandeau__carton { margin: -3rem .75rem 0; }
}

@media print {
  .vei__lib-gaz-bandeau__photo::before { display: none; }
  .vei__lib-gaz-bandeau__carton { box-shadow: none; }
}

/* lib-gaz-cliche — la photo d'ouverture d'une page de texte.
   50 rem de large au plus : la taille native des photos du build (C1), donc nette. */

.vei__lib-gaz-cliche {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--gaz-gouttiere));
  max-width: 50rem;
  margin: 1.6rem auto 0;
}

.vei__lib-gaz-cliche__photo {
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  outline: 1px solid var(--gaz-cadre);
  outline-offset: -.9rem;
  box-shadow: 1.1rem 1.1rem 0 var(--gaz-creme);
}

.vei__lib-gaz-cliche__legende {
  margin: 1.6rem 0 0;
  font-size: .85rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.vei__lib-gaz-cliche__legende:empty { display: none; }

@media (max-width: 35rem) {
  .vei__lib-gaz-cliche__photo { aspect-ratio: 16 / 9; box-shadow: .6rem .6rem 0 var(--gaz-creme); }
}

@media print {
  .vei__lib-gaz-cliche__photo { box-shadow: none; }
}

/* lib-gaz-en-bref — la reponse autonome, sur papier, onglet en tete. */

.vei__lib-gaz-en-bref {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 2 * var(--gaz-gouttiere));
  max-width: 53.75rem;
  margin: var(--gaz-respiration) auto 0;
  padding: 1.9rem clamp(1.25rem, 3vw, 2.5rem) 1.75rem;
  background: var(--gaz-papier);
  border: 1px solid var(--gaz-filet);
  border-left: 6px solid var(--color-primary);
}

.vei__lib-gaz-en-bref__etiquette {
  position: absolute;
  top: -.85rem;
  left: 1.6rem;
  margin: 0;
  padding: .3rem .8rem;
  background: var(--color-secondary);
  color: var(--color-sur-secondary);
  font: 600 .7rem/1.2 var(--font-body);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.vei__lib-gaz-en-bref__question {
  margin: .25rem 0 .7rem;
  font: 600 clamp(1.45rem, 2.6vw, 2rem)/1.12 var(--font-heading);
  text-wrap: balance;
  color: var(--gaz-encre);
}

.vei__lib-gaz-en-bref__reponse {
  margin: 0 0 .9rem;
  line-height: 1.7;
}

.vei__lib-gaz-en-bref__suite {
  font-weight: 600;
  color: var(--color-secondary);
  text-underline-offset: .25em;
}

/* La fleche est collee au dernier mot par une espace insecable, et reste en ligne : en
   inline-block, elle passait seule a la ligne sur un telephone (constate a 390 px). */
.vei__lib-gaz-en-bref__suite::after {
  content: "\00a0\2192";
  transition: padding-left .2s ease;
}

.vei__lib-gaz-en-bref__suite:hover::after { padding-left: 3px; }

@media print {
  .vei__lib-gaz-en-bref { border-left-width: 2px; }
}

/* lib-gaz-entete — le titre du journal.

   Habille aussi lib-gaz-lien-nav (classe lib-gaz-entete__lien).

   L'etoile qui separe les rubriques est un clip-path : aucune URL, aucune donnee SVG dans
   la feuille, et sa couleur lit un token. Sous 560 px les rubriques passent sur plusieurs
   lignes centrees ; l'etoile disparait, car elle ouvrirait une ligne sur rien. */

.vei__lib-gaz-entete {
  max-width: var(--gaz-large);
  margin: 0 auto;
  padding: .6rem var(--gaz-gouttiere) 0;
  text-align: center;
}

.vei__lib-gaz-entete__surtitre {
  margin: 0;
  font: 600 .76rem/1.5 var(--font-body);
  letter-spacing: .26em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--gaz-lien);
}

.vei__lib-gaz-entete__titre-ligne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.4rem, 2vw, 1.4rem);
  padding: .3rem 0 .85rem;
}

.vei__lib-gaz-entete__marque {
  font: 700 clamp(2.5rem, 10vw, 6.4rem)/.95 var(--font-heading);
  white-space: nowrap;
  text-decoration: none;
  color: var(--gaz-encre);
  transition: color .2s ease;
}

.vei__lib-gaz-entete__marque:hover { color: var(--color-secondary); }

.vei__lib-gaz-entete__houx {
  flex: none;
  width: clamp(2.1rem, 6vw, 4.5rem);
  height: auto;
}

.vei__lib-gaz-entete__houx--miroir { transform: scaleX(-1); }
.vei__lib-gaz-entete__feuille { fill: var(--gaz-sapin); }
.vei__lib-gaz-entete__baie { fill: var(--color-secondary); }

.vei__lib-gaz-entete__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem 0;
  padding: .7rem 0;
  border-top: 3px double var(--gaz-encre);
  border-bottom: 1px solid var(--gaz-encre);
}

.vei__lib-gaz-entete__lien {
  display: inline-flex;
  align-items: center;
  padding: .1rem 1.05rem;
  font: 600 .8rem/1.6 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gaz-encre);
  transition: color .2s ease;
}

.vei__lib-gaz-entete__lien + .vei__lib-gaz-entete__lien::before {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  margin: 0 .75rem 0 -1.35rem;
  background: var(--color-primary);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.vei__lib-gaz-entete__lien:hover,
.vei__lib-gaz-entete__lien[aria-current="page"] { color: var(--color-secondary); }

.vei__lib-gaz-entete__lien[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: .4em;
}

@media (max-width: 35rem) {
  .vei__lib-gaz-entete__surtitre { font-size: .66rem; letter-spacing: .14em; }
  .vei__lib-gaz-entete__lien { padding: .15rem .6rem; font-size: .72rem; letter-spacing: .12em; }
  .vei__lib-gaz-entete__lien + .vei__lib-gaz-entete__lien::before { display: none; }
}

@media print {
  .vei__lib-gaz-entete__nav,
  .vei__lib-gaz-entete__houx { display: none; }
}

/* lib-gaz-fleuron — le separateur etoile. */

.vei__lib-gaz-fleuron {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  max-width: 32.5rem;
  margin: var(--gaz-respiration) auto;
  padding: 0 var(--gaz-gouttiere);
}

.vei__lib-gaz-fleuron::before,
.vei__lib-gaz-fleuron::after {
  content: "";
  flex: 1;
  border-top: 3px double var(--gaz-filet);
}

.vei__lib-gaz-fleuron__etoile {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  fill: var(--color-primary);
}

@media print {
  .vei__lib-gaz-fleuron { display: none; }
}

/* lib-gaz-grille — la grille des cartes, en colonnes intrinseques.
   min(100%, ...) empeche la colonne de deborder d'un conteneur plus etroit qu'elle. */

.vei__lib-gaz-grille {
  max-width: var(--gaz-large);
  margin: 0 auto;
  padding: 0 var(--gaz-gouttiere);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 2.4rem 1.75rem;
}

.vei__lib-gaz-grille:empty { display: none; }

@media (max-width: 35rem) {
  .vei__lib-gaz-grille { gap: 1.6rem; }
}

/* lib-gaz-guirlande — la guirlande d'ampoules.

   Les ampoules scintillent par une opacite decalee de l'une a l'autre ; le mouvement
   s'arrete sous prefers-reduced-motion (regle portee par lib-gaz-page) et la guirlande
   disparait a l'impression. */

.vei__lib-gaz-guirlande {
  display: block;
  width: 100%;
  height: 34px;
}

.vei__lib-gaz-guirlande__fil {
  fill: none;
  stroke: var(--gaz-sapin);
  stroke-width: 2;
}

.vei__lib-gaz-guirlande__douille { fill: var(--gaz-filet); }

.vei__lib-gaz-guirlande__ampoule {
  animation: gaz-scintille 2.4s ease-in-out infinite alternate;
}

.vei__lib-gaz-guirlande__ampoule--a { fill: var(--color-primary); }

.vei__lib-gaz-guirlande__ampoule--b {
  fill: var(--color-secondary);
  animation-delay: .6s;
}

.vei__lib-gaz-guirlande__ampoule--c {
  fill: var(--gaz-sapin);
  animation-delay: 1.2s;
}

.vei__lib-gaz-guirlande__ampoule--d {
  fill: var(--gaz-creme);
  animation-delay: 1.8s;
}

@keyframes gaz-scintille {
  from { opacity: .5; }
  to { opacity: 1; }
}

@media print {
  .vei__lib-gaz-guirlande { display: none; }
}

/* lib-gaz-heros-article — l'ouverture d'un recit.

   LA PHOTO GARDE SA TAILLE NATIVE. Le build sert des photos de 800 px de large (C1) : en
   colonne, elle s'affiche a sa taille, nette. Un carton creme decale derriere elle et un
   filet de cadre en retrait font le travail d'une photo de magazine. */

.vei__lib-gaz-heros-article {
  max-width: var(--gaz-large);
  margin: 1.6rem auto 0;
  padding: 0 var(--gaz-gouttiere) clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "texte photo";
  gap: clamp(1.75rem, 4vw, 3.75rem);
  align-items: center;
  border-bottom: 3px double var(--gaz-filet);
}

.vei__lib-gaz-heros-article__photo {
  grid-area: photo;
  position: relative;
  isolation: isolate;
}

.vei__lib-gaz-heros-article__photo::before {
  content: "";
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  z-index: -1;
  background: var(--gaz-creme);
}

.vei__lib-gaz-heros-article__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  outline: 1px solid var(--gaz-cadre);
  outline-offset: -.9rem;
}

.vei__lib-gaz-heros-article__photo:empty { display: none; }

.vei__lib-gaz-heros-article:has(.vei__lib-gaz-heros-article__photo:empty) {
  max-width: calc(var(--gaz-colonne) + 2 * var(--gaz-gouttiere));
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "texte";
}

.vei__lib-gaz-heros-article__texte { grid-area: texte; }

.vei__lib-gaz-heros-article__meta {
  margin: 1.1rem 0 0;
  font-size: .92rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.vei__lib-gaz-heros-article__meta:empty { display: none; }

@media (max-width: 56.25rem) {
  .vei__lib-gaz-heros-article {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photo" "texte";
    margin-top: 1rem;
  }
  .vei__lib-gaz-heros-article__photo { margin-right: 1.1rem; }
}

@media print {
  .vei__lib-gaz-heros-article__photo::before { display: none; }
}

/* lib-gaz-mosaique — la mosaique a voile degrade. Habille aussi lib-gaz-tuile.

   UNE TUILE EST UNE GRILLE A UNE SEULE CASE. Photo, voile (::after) et texte s'y empilent
   sans position absolue ; le texte monte au-dessus par z-index, ce qu'un element de grille
   peut faire sans etre positionne. Resultat : la tuile reste le bloc conteneur du lien
   etire, qui couvre toute la case.

   L'etiquette de rubrique est posee sur la secondary et non sur la primary : un texte de
   0,7 rem doit tenir 4,5:1, ce qu'une couleur festive vive ne garantit pas. */

.vei__lib-gaz-mosaique {
  max-width: var(--gaz-large);
  margin: 0 auto;
  padding: 0 var(--gaz-gouttiere);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(12.5rem, 20vw, 17rem);
  gap: .9rem;
}

/* LA BANDE EST UNE RANGEE FLEXIBLE, PAS UNE GRILLE. En grille auto-fit, cinq tuiles
   sortaient quatre plus une a 1 024 px : une case orpheline suivie d'un trou de trois
   cases (constate en capture). En flex, la derniere rangee s'etire et se remplit, quel
   que soit le nombre de tuiles. La base de 11 rem tient cinq tuiles sur une rangee des
   1 000 px ; en dessous, trois plus deux. */
.vei__lib-gaz-mosaique[data-format="bande"] {
  display: flex;
  flex-wrap: wrap;
}

.vei__lib-gaz-mosaique[data-format="bande"] .vei__lib-gaz-tuile {
  flex: 1 1 11rem;
  height: clamp(12rem, 17vw, 15rem);
}

.vei__lib-gaz-tuile {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  margin: 0;
  overflow: hidden;
  background: var(--gaz-encre);
}

.vei__lib-gaz-mosaique[data-format="une"] .vei__lib-gaz-tuile[data-taille="grande"] {
  grid-column: span 2;
  grid-row: span 2;
}

.vei__lib-gaz-tuile__photo {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  transition: transform .6s ease;
}

/* LE VOILE MONTE ASSEZ HAUT POUR TOUTE PHOTO, PAS SEULEMENT LES PHOTOS SOMBRES. Arrete a
   26 % et encore a moitie transparent sous le titre, il laissait passer les chiffres
   blancs d'un calendrier a travers « Les fetes de decembre et janvier » : titre illisible,
   constate en capture a 1 440, 1 024 et 390 px. Le titre porte en plus une ombre courte,
   qui le detache d'un detail clair que le voile n'aurait pas eteint. */
.vei__lib-gaz-tuile::after {
  content: "";
  grid-area: 1 / 1;
  z-index: 1;
  background: linear-gradient(180deg, transparent 14%,
    color-mix(in srgb, var(--gaz-voile) 55%, transparent) 38%,
    color-mix(in srgb, var(--gaz-voile) 92%, transparent) 62%, var(--gaz-voile) 100%);
  pointer-events: none;
}

.vei__lib-gaz-tuile:hover .vei__lib-gaz-tuile__photo,
.vei__lib-gaz-tuile:focus-within .vei__lib-gaz-tuile__photo { transform: scale(1.05); }

.vei__lib-gaz-tuile__texte {
  grid-area: 1 / 1;
  z-index: 2;
  align-self: end;
  padding: 1.1rem 1.25rem 1.2rem;
}

.vei__lib-gaz-tuile__rubrique {
  display: inline-block;
  margin: 0 0 .55rem;
  padding: .3rem .6rem;
  background: var(--color-secondary);
  color: var(--color-sur-secondary);
  font: 600 .66rem/1.2 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.vei__lib-gaz-tuile__titre {
  margin: 0;
  font: 600 clamp(1.3rem, 1.6vw, 1.5rem)/1.08 var(--font-heading);
  text-wrap: balance;
  color: var(--color-bg);
  text-shadow: 0 1px .6rem var(--gaz-voile);
}

.vei__lib-gaz-mosaique[data-format="une"] .vei__lib-gaz-tuile[data-taille="grande"] .vei__lib-gaz-tuile__titre {
  max-width: 16ch;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
}

.vei__lib-gaz-tuile__lien {
  color: inherit;
  text-decoration: none;
}

.vei__lib-gaz-tuile__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.vei__lib-gaz-tuile__lien:focus-visible { outline: none; }

.vei__lib-gaz-tuile:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.vei__lib-gaz-tuile__extrait {
  max-width: 34ch;
  margin: .45rem 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-bg) 88%, transparent);
  text-shadow: 0 1px .5rem var(--gaz-voile);
}

.vei__lib-gaz-tuile__rubrique:empty,
.vei__lib-gaz-tuile__extrait:empty { display: none; }

/* En bande, la tuile est basse : le titre seul, la photo garde la place. */
.vei__lib-gaz-mosaique[data-format="bande"] .vei__lib-gaz-tuile__extrait { display: none; }

/* Sous 1 200 px, une petite tuile ne garde que son titre : sa ligne d'extrait montait a
   quatre ou cinq lignes, couvrait la photo aux deux tiers et poussait le titre dans la
   partie claire de l'image (constate en capture a 1 024 px). */
@media (max-width: 75rem) {
  .vei__lib-gaz-mosaique[data-format="une"] .vei__lib-gaz-tuile:not([data-taille="grande"]) .vei__lib-gaz-tuile__extrait {
    display: none;
  }
}

@media (max-width: 56.25rem) {
  .vei__lib-gaz-mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 14rem; }
}

/* SUR UN TELEPHONE, LA MOSAIQUE RESTE UNE MOSAIQUE. Empilees une par ligne, cinq tuiles
   de 14,5 rem faisaient 1 200 px de cases sombres (constate en capture a 390 px) : la
   grande tuile garde toute la largeur, les petites passent deux par deux et gardent leur
   titre seul. La bande fait de meme, sa derniere tuile s'etirant sur la rangee. */
@media (max-width: 35rem) {
  .vei__lib-gaz-mosaique {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 10.5rem;
    gap: .6rem;
  }
  .vei__lib-gaz-mosaique[data-format="bande"] .vei__lib-gaz-tuile {
    flex-basis: 9rem;
    height: 10.5rem;
  }
  .vei__lib-gaz-tuile__texte { padding: .8rem .85rem .9rem; }
  .vei__lib-gaz-tuile__titre { font-size: 1.12rem; }
  .vei__lib-gaz-tuile__extrait { display: none; }
  .vei__lib-gaz-mosaique[data-format="une"] .vei__lib-gaz-tuile[data-taille="grande"] { grid-row: span 2; }
  .vei__lib-gaz-mosaique[data-format="une"] .vei__lib-gaz-tuile[data-taille="grande"] .vei__lib-gaz-tuile__texte {
    padding: 1.1rem 1.2rem 1.2rem;
  }
  .vei__lib-gaz-mosaique[data-format="une"] .vei__lib-gaz-tuile[data-taille="grande"] .vei__lib-gaz-tuile__titre {
    font-size: 1.8rem;
  }
  .vei__lib-gaz-mosaique[data-format="une"] .vei__lib-gaz-tuile[data-taille="grande"] .vei__lib-gaz-tuile__extrait {
    display: block;
  }
}

@media print {
  .vei__lib-gaz-mosaique { gap: .4rem; }
  .vei__lib-gaz-tuile::after { display: none; }
}

/* lib-gaz-page — l'enveloppe du theme gazette, ET sa couche de tokens.

   POURQUOI LES TOKENS SONT ICI. lib-gaz-page est la seule brique garantie sur chaque page :
   sa partielle est donc la seule qui part a coup sur. Les briques du theme lisent --gaz-*,
   jamais une couleur ecrite.

   LES VALEURS CI-DESSOUS SONT DES DEFAUTS LISIBLES, PAS UNE PALETTE A PARTAGER. Toutes sont
   derivees des tokens du site par color-mix() ; chaque adoptant redefinit l'echelle entiere
   dans sa propre feuille, sur le meme selecteur (elle passe en dernier dans la cascade).
   Deux sites qui ne la redefiniraient pas serviraient les memes nuances : c'est une
   empreinte, pas un raccourci.

   --gaz-lien : la primary melee vers le texte. Une couleur festive vive (or, corail) est un
   bon accent et un mauvais lien : sous 4,5:1 sur le fond, elle ne porte que des aplats, des
   filets et des grands titres. Les liens et les petits textes lisent --gaz-lien. */

.vei__lib-gaz-page {
  --gaz-encre: var(--color-text);
  --gaz-papier: var(--color-surface-alt);
  --gaz-filet: color-mix(in srgb, var(--color-primary) 42%, var(--color-bg));
  --gaz-sapin: color-mix(in srgb, var(--color-secondary) 40%, var(--color-text));
  --gaz-creme: color-mix(in srgb, var(--color-primary) 26%, var(--color-bg));
  --gaz-or-clair: color-mix(in srgb, var(--color-primary) 50%, var(--color-bg));
  --gaz-lien: color-mix(in srgb, var(--color-primary) 72%, var(--color-text));
  --gaz-voile: color-mix(in srgb, var(--gaz-encre) 90%, transparent);
  --gaz-cadre: color-mix(in srgb, var(--color-bg) 70%, transparent);
  --gaz-ombre: 0 1.1rem 2.5rem -1.4rem color-mix(in srgb, var(--gaz-encre) 60%, transparent);
  --gaz-large: 77.5rem;
  --gaz-colonne: 46rem;
  --gaz-gouttiere: clamp(1rem, 4vw, 2.5rem);
  --gaz-respiration: clamp(3.5rem, 7vw, 5.5rem);

  position: relative;
  display: block;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* Specificite minimale (:where) : une brique qui fixe la hauteur de ses photos (tuile,
   vignette carree) doit gagner sans surenchere. Ecrite en .lib-gaz-page img, cette regle
   ecrasait height: 100% des tuiles : constate en capture, la photo ne couvrait que le
   haut de la case. */
:where(.vei__lib-gaz-page) img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Le cadrage d'une photo passe par un attribut, jamais par une classe en donnee. */
.vei__lib-gaz-page [data-cadrage="centre"] { object-position: 50% 50%; }
.vei__lib-gaz-page [data-cadrage="haut"] { object-position: 50% 22%; }
.vei__lib-gaz-page [data-cadrage="bas"] { object-position: 50% 78%; }
.vei__lib-gaz-page [data-cadrage="gauche"] { object-position: 25% 50%; }
.vei__lib-gaz-page [data-cadrage="droite"] { object-position: 75% 50%; }

/* Le lien d'evitement : hors champ au repos, visible des qu'il recoit le focus clavier. */
.vei__lib-gaz-page__evitement {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: .65rem 1.1rem;
  background: var(--color-secondary);
  color: var(--color-sur-secondary);
  font: 600 .9rem/1.2 var(--font-body);
  text-decoration: none;
}

.vei__lib-gaz-page__evitement:focus { top: 1rem; }

.vei__lib-gaz-page__corps {
  display: block;
  padding-bottom: var(--gaz-respiration);
}

@media (prefers-reduced-motion: reduce) {
  .vei__lib-gaz-page *,
  .vei__lib-gaz-page *::before,
  .vei__lib-gaz-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .vei__lib-gaz-page { min-height: 0; background: none; }
  .vei__lib-gaz-page__evitement { display: none; }
}

/* lib-gaz-pied — le pied de page. Habille aussi lib-gaz-pied-colonne.

   Tout ce qui se lit sur le fond secondary lit --color-sur-secondary (calcule au build,
   contraste mesure) ou --gaz-or-clair, que chaque site regle pour tenir 4,5:1 sur ce fond.
   L'anneau de focus passe a l'or clair : celui du site est regle pour le fond clair. */

.vei__lib-gaz-pied {
  background: var(--color-secondary);
  color: var(--color-sur-secondary);
  border-top: 6px double var(--gaz-or-clair);
}

.vei__lib-gaz-pied__colonnes {
  max-width: var(--gaz-large);
  margin: 0 auto;
  padding: 3.4rem var(--gaz-gouttiere) 2.6rem;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
}

.vei__lib-gaz-pied__marque {
  margin: 0 0 .7rem;
  font: 700 2.5rem/1 var(--font-heading);
}

.vei__lib-gaz-pied__description {
  max-width: 42ch;
  margin: 0;
  line-height: 1.6;
}

.vei__lib-gaz-pied__titre {
  margin: 0 0 .8rem;
  font: 600 .74rem/1.3 var(--font-body);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gaz-or-clair);
}

.vei__lib-gaz-pied__liens {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vei__lib-gaz-pied__liens a {
  display: inline-block;
  padding: .25rem 0;
  color: var(--color-sur-secondary);
  text-decoration: none;
}

.vei__lib-gaz-pied__liens a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gaz-or-clair);
  text-underline-offset: .25em;
}

.vei__lib-gaz-pied a:focus-visible {
  outline: 2px solid var(--gaz-or-clair);
  outline-offset: 2px;
}

.vei__lib-gaz-pied__mentions {
  max-width: var(--gaz-large);
  margin: 0 auto;
  padding: 1.1rem var(--gaz-gouttiere) 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--gaz-or-clair) 45%, transparent);
  font-size: .85rem;
}

@media (max-width: 56.25rem) {
  .vei__lib-gaz-pied__colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vei__lib-gaz-pied__presentation { grid-column: 1 / -1; }
}

@media (max-width: 35rem) {
  .vei__lib-gaz-pied__colonnes { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .vei__lib-gaz-pied__marque { font-size: 2.1rem; }
}

@media print {
  .vei__lib-gaz-pied { background: none; color: inherit; border-top-width: 1px; }
  .vei__lib-gaz-pied__liens a { color: inherit; }
}

/* lib-gaz-reportage — le grand reportage.

   POURQUOI LA PHOTO NE PREND PAS TOUTE LA LARGEUR. Le build reduit toute photo a 800 px
   de large (design.md, C1). Etiree sur 1 440 px, elle sortirait floue. La bande, elle,
   occupe toute la largeur ; la photo garde sa taille native, et le panneau la chevauche. */

.vei__lib-gaz-reportage {
  margin: var(--gaz-respiration) 0 0;
  padding: clamp(2rem, 5vw, 3.75rem) 0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%,
      color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%),
    var(--gaz-encre);
}

.vei__lib-gaz-reportage[data-cote="gauche"] {
  background:
    radial-gradient(ellipse 60% 80% at 70% 50%,
      color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%),
    var(--gaz-encre);
}

.vei__lib-gaz-reportage__cadre {
  max-width: var(--gaz-large);
  margin: 0 auto;
  padding: 0 var(--gaz-gouttiere);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas: "photo panneau";
  align-items: center;
}

.vei__lib-gaz-reportage[data-cote="gauche"] .vei__lib-gaz-reportage__cadre {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  grid-template-areas: "panneau photo";
}

.vei__lib-gaz-reportage__photo {
  grid-area: photo;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  outline: 1px solid var(--gaz-cadre);
  outline-offset: -.9rem;
}

.vei__lib-gaz-reportage__panneau {
  grid-area: panneau;
  z-index: 1;
  position: relative;
  margin-left: -5rem;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--color-secondary);
  color: var(--color-sur-secondary);
  box-shadow: 0 1.8rem 3.5rem -1.8rem color-mix(in srgb, var(--gaz-encre) 85%, transparent);
}

.vei__lib-gaz-reportage[data-cote="gauche"] .vei__lib-gaz-reportage__panneau {
  margin-left: 0;
  margin-right: -5rem;
}

.vei__lib-gaz-reportage__panneau::before {
  content: "";
  position: absolute;
  inset: .6rem;
  border: 1px solid color-mix(in srgb, var(--gaz-or-clair) 60%, transparent);
  pointer-events: none;
}

.vei__lib-gaz-reportage__surtitre {
  margin: 0 0 .8rem;
  font: 600 .72rem/1.3 var(--font-body);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gaz-or-clair);
}

.vei__lib-gaz-reportage__exergue {
  margin: 0 0 1.3rem;
  font: italic 500 clamp(1.45rem, 2.4vw, 2.05rem)/1.18 var(--font-heading);
  text-wrap: pretty;
}

.vei__lib-gaz-reportage__lien {
  position: relative;
  font-weight: 600;
  color: var(--color-sur-secondary);
  text-decoration-color: var(--gaz-or-clair);
  text-underline-offset: .3em;
}

.vei__lib-gaz-reportage__lien:hover { color: var(--gaz-or-clair); }

.vei__lib-gaz-reportage__lien:focus-visible {
  outline: 2px solid var(--gaz-or-clair);
  outline-offset: 3px;
}

@media (max-width: 56.25rem) {
  .vei__lib-gaz-reportage__cadre,
  .vei__lib-gaz-reportage[data-cote="gauche"] .vei__lib-gaz-reportage__cadre {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photo" "panneau";
  }
  .vei__lib-gaz-reportage__panneau,
  .vei__lib-gaz-reportage[data-cote="gauche"] .vei__lib-gaz-reportage__panneau {
    margin: -2.5rem .75rem 0;
  }
}

@media print {
  .vei__lib-gaz-reportage { background: none; }
  .vei__lib-gaz-reportage__panneau { box-shadow: none; }
}

/* lib-gaz-rubrique — l'ouverture de section, entre filets. */

.vei__lib-gaz-rubrique {
  max-width: var(--gaz-large);
  margin: var(--gaz-respiration) auto 1.6rem;
  padding: 0 var(--gaz-gouttiere);
  text-align: center;
}

.vei__lib-gaz-rubrique__surtitre {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 .55rem;
  font: 600 .74rem/1.3 var(--font-body);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gaz-lien);
}

.vei__lib-gaz-rubrique__surtitre::before,
.vei__lib-gaz-rubrique__surtitre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gaz-filet);
}

.vei__lib-gaz-rubrique__titre {
  margin: 0;
  font: italic 600 clamp(1.9rem, 4.2vw, 3.2rem)/1.06 var(--font-heading);
  text-wrap: balance;
  color: var(--gaz-encre);
}

.vei__lib-gaz-rubrique__chapo {
  max-width: 44rem;
  margin: .9rem auto 0;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.vei__lib-gaz-rubrique__surtitre:empty,
.vei__lib-gaz-rubrique__chapo:empty { display: none; }

/* lib-gaz-une — la couverture.

   Habille aussi lib-gaz-une-item (classes lib-gaz-une__item*).

   LE CARTON CHEVAUCHE LA PHOTO SANS ETRE POSITIONNE. Une boite positionnee deviendrait le
   bloc conteneur du lien etire, qui ne couvrirait plus que le carton. La couverture est
   donc une grille a une colonne : le carton en est un element, et un element de grille
   monte au-dessus de la photo par z-index sans etre positionne (constate en capture : en
   simple bloc, Chromium peint la photo PAR-DESSUS le fond du carton).

   Le cadre fin dans la photo est un outline en retrait : aucun pseudo-element, aucun
   element de plus. */

.vei__lib-gaz-une {
  max-width: var(--gaz-large);
  margin: 0 auto;
  padding: 0 var(--gaz-gouttiere);
}

.vei__lib-gaz-une__manchette {
  max-width: 56rem;
  margin: 1.5rem auto 1.9rem;
  font: 600 clamp(1.55rem, 3.1vw, 2.45rem)/1.16 var(--font-heading);
  text-align: center;
  text-wrap: balance;
  color: var(--gaz-encre);
}

.vei__lib-gaz-une__manchette em {
  font-style: italic;
  color: var(--color-secondary);
}

.vei__lib-gaz-une__grille {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.vei__lib-gaz-une__principal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.vei__lib-gaz-une__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  outline: 1px solid var(--gaz-cadre);
  outline-offset: -.9rem;
}

.vei__lib-gaz-une__carton {
  z-index: 1;
  width: min(90%, 37.5rem);
  margin: -6.5rem 0 0 clamp(1rem, 3vw, 2.25rem);
  padding: 1.6rem 2rem 1.5rem;
  background: var(--color-bg);
  border-top: 4px solid var(--color-primary);
  box-shadow: var(--gaz-ombre);
}

.vei__lib-gaz-une__rubrique {
  margin: 0 0 .5rem;
  font: 600 .72rem/1.3 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.vei__lib-gaz-une__titre {
  margin: 0 0 .8rem;
  font: 600 clamp(1.85rem, 3.4vw, 3rem)/1.04 var(--font-heading);
  text-wrap: balance;
}

.vei__lib-gaz-une__lien {
  text-decoration: none;
  color: var(--gaz-encre);
}

.vei__lib-gaz-une__lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.vei__lib-gaz-une__principal:hover .vei__lib-gaz-une__lien,
.vei__lib-gaz-une__lien:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}

.vei__lib-gaz-une__chapo {
  margin: 0 0 .9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.vei__lib-gaz-une__signature {
  margin: 0;
  font-size: .9rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.vei__lib-gaz-une__signature:empty { display: none; }

/* --- la colonne « aussi a la une » --------------------------------------------------- */
.vei__lib-gaz-une__numero {
  padding-left: clamp(1.1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--gaz-filet);
}

.vei__lib-gaz-une__numero-titre {
  margin: 0 0 .35rem;
  padding-bottom: .6rem;
  font: italic 600 1.7rem/1.05 var(--font-heading);
  color: var(--gaz-encre);
  border-bottom: 1px solid var(--gaz-encre);
}

.vei__lib-gaz-une__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gaz-une;
}

.vei__lib-gaz-une__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem 5.75rem minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
  counter-increment: gaz-une;
}

.vei__lib-gaz-une__item::before {
  content: counter(gaz-une);
  font: 600 2.3rem/1 var(--font-heading);
  color: var(--color-primary);
}

.vei__lib-gaz-une__vignette {
  width: 5.75rem;
  height: 5.75rem;
  object-fit: cover;
}

.vei__lib-gaz-une__item-texte {
  margin: 0;
  font: 600 1.18rem/1.15 var(--font-heading);
}

.vei__lib-gaz-une__item-rubrique {
  display: block;
  margin-bottom: .3rem;
  font: 600 .66rem/1.2 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gaz-lien);
}

.vei__lib-gaz-une__item-lien {
  text-decoration: none;
  color: var(--gaz-encre);
}

.vei__lib-gaz-une__item-lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.vei__lib-gaz-une__item:hover .vei__lib-gaz-une__item-lien,
.vei__lib-gaz-une__item-lien:focus-visible { color: var(--color-secondary); }

/* ENTRE LA TABLETTE ET LE GRAND ECRAN, LA VIGNETTE PASSE AU-DESSUS DU TITRE. La colonne
   fait moins de 300 px a 1 024 : numero, vignette et titre cote a cote laissaient 140 px
   au titre, qui tombait sur quatre ou cinq lignes (constate en capture). Le numero reste
   en marge, la vignette prend la largeur, le titre dessous. */
@media (min-width: 56.3125rem) and (max-width: 75rem) {
  .vei__lib-gaz-une__item {
    grid-template-columns: 1.9rem minmax(0, 1fr);
    grid-template-areas: "numero vignette" ". texte";
    row-gap: .65rem;
    align-items: start;
  }
  .vei__lib-gaz-une__item::before { grid-area: numero; font-size: 2rem; }
  .vei__lib-gaz-une__vignette {
    grid-area: vignette;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
  }
  .vei__lib-gaz-une__item-texte { grid-area: texte; }
}

@media (max-width: 56.25rem) {
  .vei__lib-gaz-une__grille { grid-template-columns: minmax(0, 1fr); }
  .vei__lib-gaz-une__numero { padding-left: 0; border-left: 0; }
}

@media (max-width: 35rem) {
  .vei__lib-gaz-une__carton {
    width: auto;
    margin: -3rem .75rem 0;
    padding: 1.2rem 1.25rem 1.1rem;
  }
  .vei__lib-gaz-une__image { aspect-ratio: 4 / 3; outline-offset: -.6rem; }
  .vei__lib-gaz-une__item { grid-template-columns: 1.7rem 4.5rem minmax(0, 1fr); gap: .75rem; }
  .vei__lib-gaz-une__item::before { font-size: 1.9rem; }
  .vei__lib-gaz-une__vignette { width: 4.5rem; height: 4.5rem; }
}

@media print {
  .vei__lib-gaz-une__carton { margin-top: 0; box-shadow: none; }
}

/* lib-hero-dossier — SURCHARGE gazette : le haut de dossier en page de magazine.
   Habille aussi lib-hero-repere (classes lib-hero-dossier__repere*).

   La lettrine est un ::first-letter flottant : aucune donnee a saisir, aucun <span> dans
   le texte. Elle prend la secondary, qui tient le contraste sur le fond. */

.vei__lib-hero-dossier { margin: 0; }

.vei__lib-hero-dossier__surtitre {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1rem;
  font: 600 .74rem/1.3 var(--font-body);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.vei__lib-hero-dossier__surtitre::after {
  content: "";
  flex: 0 0 3.5rem;
  height: 1px;
  background: var(--gaz-filet);
}

.vei__lib-hero-dossier__titre {
  margin: 0 0 1.2rem;
  font: 600 clamp(2.2rem, 4.3vw, 3.7rem)/1.03 var(--font-heading);
  text-wrap: balance;
  color: var(--gaz-encre);
}

.vei__lib-hero-dossier__promesse {
  margin: 0 0 1rem;
  font: italic 500 1.3rem/1.35 var(--font-heading);
  color: var(--color-secondary);
}

.vei__lib-hero-dossier__amorce {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.72;
  text-wrap: pretty;
  color: var(--color-text);
}

.vei__lib-hero-dossier__amorce::first-letter {
  float: left;
  margin: .06em .12em 0 0;
  padding: 0 .04em;
  font: 600 4.2em/.78 var(--font-heading);
  color: var(--color-secondary);
}

.vei__lib-hero-dossier__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.8rem;
  margin: 1.4rem 0 0;
  padding: .95rem 0 0;
  list-style: none;
  border-top: 1px solid var(--gaz-filet);
}

.vei__lib-hero-dossier__repere {
  display: flex;
  align-items: baseline;
  gap: .45rem;
}

.vei__lib-hero-dossier__valeur {
  font: 600 1.75rem/1 var(--font-heading);
  color: var(--color-secondary);
  font-variant-numeric: lining-nums;
}

.vei__lib-hero-dossier__legende {
  font-size: .82rem;
  color: var(--color-text-muted);
}

.vei__lib-hero-dossier__surtitre:empty,
.vei__lib-hero-dossier__promesse:empty,
.vei__lib-hero-dossier__amorce:empty,
.vei__lib-hero-dossier__reperes:empty { display: none; }

/* lib-liste-item — un item de listicle.

   Le rang est un <span> et non un compteur CSS : un compteur ne se copie pas quand on
   extrait le bloc, et l'interet d'un item est justement qu'il survive a l'extraction. */

.vei__lib-liste-item {
  padding: 1.4rem 0;
  border-top: 1px solid var(--color-border);
}

.vei__lib-liste-item:first-of-type { border-top: 0; }

.vei__lib-liste-item__titre {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 0 0 .55rem;
  font-family: var(--font-heading);
  font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem);
  line-height: 1.3;
  color: var(--color-text);
}

.vei__lib-liste-item__rang {
  flex: none;
  min-width: 2.1rem;
  padding: .12rem .5rem;
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: var(--radius-card);
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
}

.vei__lib-liste-item__nom {
  /* laisse le titre respirer a cote du rang, sans casser le baseline */
  flex: 1 1 auto;
}

.vei__lib-liste-item__reponse {
  margin: 0 0 .7rem;
  max-width: 68ch;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--color-text);
}

.vei__lib-liste-item__faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: .3rem 1.4rem;
  margin: 0 0 .6rem;
  padding: 0;
  list-style: none;
}

.vei__lib-liste-item__faits:empty { display: none; }

.vei__lib-liste-item__faits li {
  position: relative;
  padding-left: .95rem;
  font-family: var(--font-body);
  font-size: .93rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.vei__lib-liste-item__faits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.vei__lib-liste-item__quand {
  margin: 0;
  padding: .55rem .8rem;
  background: var(--color-surface-alt);
  border-radius: var(--radius-card);
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--color-text);
}

.vei__lib-liste-item__quand:empty { display: none; }

/* lib-message, lib-citation — la page d'un sujet.

   LA COLONNE D'AUTEUR EST LA SIGNATURE VISUELLE DU GENRE. Une bande a gauche, plus
   dense et sur un fond different, qui porte l'identite ; le message a droite. Personne
   n'a besoin qu'on lui explique ce que c'est : quiconque a frequente un forum une fois
   le reconnait, et c'est precisement pour cela qu'on ne le reinvente pas.

   ELLE PASSE AU-DESSUS SUR TELEPHONE, EN LIGNE. Garder la colonne a 380 px laisserait
   quinze caracteres au message. Passee en bandeau horizontal, elle garde son role —
   dire qui parle avant qu'on lise — sans voler la largeur.

   LE MESSAGE CIBLE A UNE ANCRE, ET ELLE SE VOIT. :target pose un filet d'accent : sans
   marque visible, un lien profond depose le lecteur au milieu d'un fil de trente
   messages sans lui dire lequel il cherchait. */

.vei__lib-message {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  margin: 0 0 1.1rem;
  border: 1px solid var(--trait, var(--color-border, #e8e2da));
  border-radius: var(--rayon-l, var(--radius-card, 8px));
  overflow: hidden;
  background: var(--color-bg, #fff);
}

.vei__lib-message:target {
  border-color: var(--frm-icone, var(--color-primary, #2d4a6b));
  box-shadow: 0 0 0 3px color-mix(in srgb,
              var(--frm-icone, var(--color-primary, #2d4a6b)) 18%, transparent);
}

.vei__lib-message__auteur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1rem .8rem;
  border-right: 1px solid var(--trait, var(--color-border, #e8e2da));
  background: var(--frm-survol, var(--color-surface, #f7f5f1));
  text-align: center;
}

.vei__lib-message__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--frm-bandeau, var(--color-primary, #2d4a6b));
  color: var(--frm-sur-bandeau, var(--color-sur-primary, #fff));
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.3rem;
  line-height: 1;
}

.vei__lib-message__pseudo {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .94rem;
  font-weight: 700;
  color: var(--frm-pseudo, var(--color-primary, #2d4a6b));
  overflow-wrap: anywhere;
}

/* Le rang est ce qui pondere la parole. Discret, mais jamais absent : un forum sans
   rangs est un fil de commentaires. */
.vei__lib-message__rang {
  padding: .1rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--frm-pseudo, var(--color-primary, #2d4a6b)) 12%, transparent);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-message__compteurs {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  font-size: .74rem;
  line-height: 1.4;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-message__corps {
  padding: .8rem 1.1rem 1rem;
  min-width: 0;
}

.vei__lib-message__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  margin: 0 0 .6rem;
  padding: 0 0 .5rem;
  border-bottom: 1px solid var(--trait, var(--color-border, #e8e2da));
  font-size: .78rem;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-message__numero {
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.vei__lib-message__numero:hover { text-decoration: underline; }

.vei__lib-message__texte {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .95rem;
  line-height: 1.68;
  color: var(--color-text, #23201c);
  overflow-wrap: break-word;
}

.vei__lib-message__texte > :first-child { margin-top: 0; }
.vei__lib-message__texte > :last-child { margin-bottom: 0; }

/* La signature est separee par un filet, comme sur tout forum depuis toujours : elle
   n'est pas du message, et la confondre avec lui fait lire un argument la ou il n'y a
   qu'une habitude. */
.vei__lib-message__signature {
  margin: 1rem 0 0;
  padding: .6rem 0 0;
  border-top: 1px solid var(--trait, var(--color-border, #e8e2da));
  font-size: .8rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-message__signature:empty { display: none; }

.vei__lib-citation {
  margin: .9rem 0;
  padding: .7rem .9rem;
  border-left: 3px solid var(--frm-icone, var(--color-primary, #2d4a6b));
  border-radius: 0 6px 6px 0;
  background: var(--frm-survol, var(--color-surface, #f7f5f1));
}

.vei__lib-citation__source {
  margin: 0 0 .35rem;
  font-size: .78rem;
  color: var(--color-text-muted, #6f6a62);
}

.vei__lib-citation__auteur {
  font-style: normal;
  font-weight: 700;
  color: var(--frm-pseudo, var(--color-primary, #2d4a6b));
}

.vei__lib-citation__texte {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--color-text, #23201c);
}

@media (max-width: 46rem) {
  .vei__lib-message {
    grid-template-columns: minmax(0, 1fr);
  }

  .vei__lib-message__auteur {
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    border-right: 0;
    border-bottom: 1px solid var(--trait, var(--color-border, #e8e2da));
    text-align: left;
  }

  .vei__lib-message__avatar {
    width: 2.1rem;
    height: 2.1rem;
    font-size: .95rem;
  }

  .vei__lib-message__compteurs {
    flex-direction: row;
    gap: .6rem;
    margin-left: auto;
  }
}

/* lib-mise-en-avant — section scindee, propos + panneau.

   La bascule en une colonne se fait par la grille intrinseque : tant que les deux
   colonnes tiennent, elles cohabitent ; en dessous, elles s'empilent. Aucun point de
   rupture a maintenir, ce qui est le seul moyen tenable a 48 sites. */

.vei__lib-mise-en-avant {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.8rem, 1.2rem + 3vw, 3.5rem);
  /* Les deux colonnes demarrent en haut, elles ne se centrent pas l'une sur l'autre.
     Avec « center », un panneau de quinze lignes face a un propos de quatre faisait
     flotter le titre au milieu d'un vide haut et bas — visible sur la page pilier des
     logiciels SEO, ou le panneau des criteres est trois fois plus haut que son texte. */
  align-items: start;
  padding: var(--pas-section) 0;
}

/* La colonne de propos porte la mesure de lecture : le panneau, lui, respire. */
.vei__lib-mise-en-avant__propos {
  min-width: 0;
}

.vei__lib-mise-en-avant__surtitre {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .7rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Le filet apres l'oeil-de-boeuf : un detail typographique qui ancre la section. */
.vei__lib-mise-en-avant__surtitre::after {
  content: "";
  flex: 1 1 auto;
  max-width: 3.5rem;
  height: 1px;
  background: var(--accent-trait);
}

.vei__lib-mise-en-avant__surtitre:empty { display: none; }

.vei__lib-mise-en-avant__titre {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--color-text);
  text-wrap: balance;
}

.vei__lib-mise-en-avant__texte {
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.vei__lib-mise-en-avant__texte p { margin: 0 0 .9rem; }
.vei__lib-mise-en-avant__texte p:last-child { margin-bottom: 0; }

.vei__lib-mise-en-avant__suite { margin: 1.3rem 0 0; }

.vei__lib-mise-en-avant__lien {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

/* La fleche est un caractere, pas une image ni une police d'icones. */
.vei__lib-mise-en-avant__lien::after {
  content: "\2192";
  transition: transform .18s ease;
}

.vei__lib-mise-en-avant__lien:hover::after,
.vei__lib-mise-en-avant__lien:focus-visible::after { transform: translateX(3px); }

.vei__lib-mise-en-avant__lien:hover,
.vei__lib-mise-en-avant__lien:focus-visible { text-decoration: underline; }

.vei__lib-mise-en-avant__suite:has(.vei__lib-mise-en-avant__lien:empty) { display: none; }

/* --- le panneau : une matiere, pas une image ------------------------------------ */
.vei__lib-mise-en-avant__panneau {
  position: relative;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  background:
    radial-gradient(28rem 18rem at 88% -8%, var(--accent-doux), transparent 68%),
    var(--surface-haute);
  box-shadow: var(--ombre-2);
}

.vei__lib-mise-en-avant__panneau-titre {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.vei__lib-mise-en-avant__panneau-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .85rem;
}

.vei__lib-mise-en-avant__panneau-liste li {
  position: relative;
  padding-left: 1.6rem;
  font-family: var(--font-body);
  font-size: .96rem;
  line-height: 1.55;
  color: var(--color-text);
  text-wrap: pretty;
}

/* La coche est dessinee en CSS : deux traits, aucune requete. */
.vei__lib-mise-en-avant__panneau-liste li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .42em;
  width: .42rem;
  height: .78rem;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.vei__lib-mise-en-avant a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* lib-plan-site — le sommaire du domaine.

   LA FORME SUIT LES TROIS USAGES. Groupement par famille pour que le lecteur voie
   l'etendue ; titre ET promesse pour qu'un moteur de reponse reprenne une couverture
   thematique plutot qu'une liste d'URL ; compteurs par famille pour que le desequilibre de
   couverture se voie.

   Une page qui liste cent cinquante entrees doit rester parcourable a l'oeil : d'ou les
   familles en grille intrinseque, et un rythme typographique serre a l'interieur de
   chacune. */

.vei__lib-plan-site { padding: var(--pas-section, 3rem) 0; }

.vei__lib-plan-site__entete { margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem); }

.vei__lib-plan-site__titre {
  margin: 0 0 .6rem;
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 1.2rem + 1.7vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--color-text);
  text-wrap: balance;
}

.vei__lib-plan-site__intro {
  margin: 0 0 .8rem;
  max-width: 58ch;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.vei__lib-plan-site__intro:empty { display: none; }

.vei__lib-plan-site__total {
  display: inline-block;
  margin: 0;
  padding: .3rem .85rem;
  border: 1px solid var(--trait, var(--color-border));
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.vei__lib-plan-site__total:empty { display: none; }

/* --- les familles ---------------------------------------------------------------
   Deux colonnes des qu'il y a la place : cent cinquante entrees sur une seule colonne
   font une page qu'on ne parcourt pas, on la subit. */
.vei__lib-plan-site__familles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  align-items: start;
}

.vei__lib-plan-site__famille { min-width: 0; }

.vei__lib-plan-site__famille-titre {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 .4rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, .98rem + .4vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--color-text);
}

/* Le compteur est un outil, pas un ornement : cote a cote, les familles montrent ou la
   couverture est mince. */
.vei__lib-plan-site__compte {
  margin-left: auto;
  flex: none;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

.vei__lib-plan-site__famille-intro {
  margin: .6rem 0 .9rem;
  font-family: var(--font-body);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.vei__lib-plan-site__famille-intro:empty { display: none; }

/* --- les entrees ------------------------------------------------------------------ */
.vei__lib-plan-site__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: plan;
}

.vei__lib-plan-site__entree {
  counter-increment: plan;
  position: relative;
  display: grid;
  gap: .1rem;
  padding: .55rem 0 .55rem 2rem;
  border-top: 1px solid var(--trait, var(--color-border));
}

.vei__lib-plan-site__entree:first-child { border-top: 0; }

/* Le rang vient d'un compteur CSS : il suit l'ordre reel de la liste, et il n'a pas a
   etre saisi dans la donnee ni a etre maintenu quand on intercale une page. */
.vei__lib-plan-site__entree::before {
  content: counter(plan, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .62rem;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  opacity: .6;
}

.vei__lib-plan-site__lien {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
  text-decoration: none;
  text-wrap: pretty;
}

.vei__lib-plan-site__lien:hover,
.vei__lib-plan-site__lien:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* La promesse est ce qui rend ce sommaire lisible par une machine : une liste d'URL ne se
   resume pas, une liste de « ce que fait chaque page » si. */
.vei__lib-plan-site__promesse {
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.vei__lib-plan-site__promesse:empty { display: none; }

.vei__lib-plan-site__date {
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  opacity: .7;
}

.vei__lib-plan-site__date:empty { display: none; }

.vei__lib-plan-site a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* A l'impression, une colonne : le sommaire sert alors de table des matieres papier. */
@media print {
  .vei__lib-plan-site__familles { grid-template-columns: 1fr; }
  .vei__lib-plan-site__famille { break-inside: avoid; }
  .vei__lib-plan-site__famille-titre { border-bottom-color: #999; }
}

/* lib-progression — la barre de lecture, en CSS pur.

   animation-timeline: scroll() lie l'avancement d'une animation au defilement du
   document. C'etait, il y a peu, le cas d'ecole du script obligatoire : un ecouteur de
   defilement qui recalcule un pourcentage a chaque pixel, plus un requestAnimationFrame
   pour ne pas bloquer le fil. Ici, zero octet de JavaScript.

   LE REPLI EST LA DISPARITION, PAS LA DEGRADATION. Sans le support, une barre a largeur
   fixe resterait collee en haut de page en affirmant une progression fausse — pire que
   rien. @supports la retire donc entierement : le lecteur n'a pas de barre, et aucune
   information mensongere.

   ELLE NE PREND PAS DE PLACE DANS LE FLUX. position: fixed, deux pixels de haut, et
   pointer-events: none pour qu'elle n'intercepte jamais un clic destine a ce qui est
   dessous.
*/

.vei__lib-progression {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .vei__lib-progression {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: var(--dsr-progression-hauteur, 3px);
    background: color-mix(in srgb,
      var(--dsr-filet, var(--color-border, #333)) 60%, transparent);
    pointer-events: none;
  }

  .vei__lib-progression__barre {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: 0 50%;
    background: linear-gradient(to right,
      var(--dsr-accent, var(--color-primary, #ffb000)),
      color-mix(in srgb, var(--dsr-accent, var(--color-primary, #ffb000)) 55%,
                var(--dsr-halo, #fff)));
    /* La lueur reprend la couleur d'accent : en declinaison papier ou cahier, ou
       --dsr-halo vaut une teinte sourde, elle s'eteint d'elle-meme. */
    box-shadow: 0 0 var(--dsr-progression-lueur, 8px)
                color-mix(in srgb, var(--dsr-accent, var(--color-primary, #ffb000)) 50%,
                          transparent);
    animation: lib-progression-avance linear both;
    animation-timeline: scroll(root block);
  }

  @keyframes lib-progression-avance {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* Qui demande moins d'animation garde la barre — elle n'anime rien au sens ou on
     l'entend, elle suit le doigt. Mais on retire la lueur, qui elle est purement
     decorative et scintille sur certains ecrans. */
  @media (prefers-reduced-motion: reduce) {
    .vei__lib-progression__barre { box-shadow: none; }
  }
}

/* lib-prose — la typographie d'un corps d'article.

   Tout est en tokens : deux sites qui tirent cette brique servent la meme structure
   typographique sous des couleurs, des polices et des selecteurs disjoints.

   La mesure de lecture est portee par la brique elle-meme (68 caracteres environ), pas
   par un conteneur exterieur : un corps de texte doit rester lisible meme si on le pose
   dans une bande large. */

.vei__lib-prose {
  max-width: 40rem;
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--color-text);
  text-wrap: pretty;
}

.vei__lib-prose > :first-child { margin-top: 0; }
.vei__lib-prose > :last-child { margin-bottom: 0; }

.vei__lib-prose p { margin: 0 0 1.25em; }

/* Le premier paragraphe fait office de chapo quand l'article n'en declare pas : un peu
   plus grand, un peu plus aere. Une regle, pas une donnee de plus a saisir. */
.vei__lib-prose > p:first-of-type {
  font-size: 1.14rem;
  line-height: 1.68;
  color: var(--color-text);
}

/* --- titres --------------------------------------------------------------------- */
.vei__lib-prose h2 {
  position: relative;
  margin: 2.6em 0 .7em;
  padding-top: .9em;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.15rem + .9vw, 1.72rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--color-text);
  text-wrap: balance;
}

/* Un filet court au-dessus de chaque H2 : la respiration se voit, sans trait pleine
   largeur qui couperait la colonne en tranches. */
.vei__lib-prose h2::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 2.6rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
}

.vei__lib-prose h3 {
  margin: 2em 0 .5em;
  font-family: var(--font-heading);
  font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--color-text);
}

.vei__lib-prose h4 {
  margin: 1.6em 0 .4em;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* --- listes --------------------------------------------------------------------- */
.vei__lib-prose ul,
.vei__lib-prose ol {
  margin: 0 0 1.35em;
  padding-left: 1.4em;
}

.vei__lib-prose li { margin-bottom: .5em; }
.vei__lib-prose li::marker { color: var(--color-primary); }

.vei__lib-prose li > ul,
.vei__lib-prose li > ol { margin: .5em 0 0; }

/* --- liens ----------------------------------------------------------------------- */
.vei__lib-prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  transition: text-decoration-color .15s ease;
}

.vei__lib-prose a:hover,
.vei__lib-prose a:focus-visible { text-decoration-color: var(--color-primary); }

.vei__lib-prose a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- citation --------------------------------------------------------------------
   Le guillemet est dessine par le CSS et retire du flux : il decore sans s'inserer
   dans ce qu'un lecteur d'ecran restitue. */
.vei__lib-prose blockquote {
  position: relative;
  margin: 1.8em 0;
  padding: 1.1em 1.3em 1.1em 2.6em;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--rayon-m, var(--radius-card)) var(--rayon-m, var(--radius-card)) 0;
  background: var(--accent-doux, var(--color-surface));
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--color-text);
}

.vei__lib-prose blockquote::before {
  content: "\201C";
  position: absolute;
  left: .5rem;
  top: .1em;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: .35;
}

.vei__lib-prose blockquote > :last-child { margin-bottom: 0; }

/* --- la citation attribuee ----------------------------------------------------------
   <figure> + <blockquote cite="URL"> + <figcaption> contenant le lien vers la source.

   POURQUOI C'EST UN BLOC A PART ENTIERE. Citer un tiers dans le corps et pointer vers lui
   est un geste editorial ET un signal : la page se retrouve associee aux entites qu'elle
   cite. Une reference reléguée en pied de page ne produit pas cet effet, parce qu'elle
   n'est pas dans le passage qu'un moteur de reponse extrait.

   La forme est imposee par des BALISES, pas par des classes : un corps d'article ne peut
   pas porter de classe sans echapper au prefixage. L'attribut cite= porte l'URL pour les
   machines, le lien du figcaption la porte pour le lecteur. */
.vei__lib-prose figure:has(> blockquote) {
  margin: 2em 0;
  padding: 0;
}

.vei__lib-prose figure > blockquote {
  margin: 0;
  border-left-width: 4px;
  border-radius: var(--rayon-m, var(--radius-card));
  border-left-color: var(--color-primary);
  font-size: 1.06rem;
}

/* La source est attachee sous la citation, sans espace : les deux forment un objet. */
.vei__lib-prose figure > blockquote + figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .5rem;
  margin: .55em 0 0;
  padding-left: 2.6rem;
  font-family: var(--font-body);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Le tiret cadratin qui ouvre une attribution, dessine plutot qu'ecrit : le redacteur
   n'a pas a s'en souvenir, et un lecteur d'ecran ne lit pas un tiret orphelin. */
.vei__lib-prose figure > blockquote + figcaption::before {
  content: "\2014";
  color: var(--color-primary);
  opacity: .7;
}

.vei__lib-prose figcaption a {
  font-weight: 600;
  color: var(--color-text);
  text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.vei__lib-prose figcaption a:hover,
.vei__lib-prose figcaption a:focus-visible { color: var(--color-primary); }

/* --- code -------------------------------------------------------------------------
   La pile monospace est ecrite ici : le theme n'expose pas de token de police a
   chasse fixe, et en inventer un obligerait a le derailler sur 48 sites. */
.vei__lib-prose code {
  padding: .12em .38em;
  border-radius: var(--rayon-s, 4px);
  background: var(--accent-doux, var(--color-surface));
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  font-size: .89em;
  color: var(--color-text);
}

.vei__lib-prose pre {
  margin: 1.6em 0;
  padding: 1.1em 1.3em;
  border-radius: var(--rayon-m, var(--radius-card));
  background: var(--color-secondary);
  color: color-mix(in srgb, var(--color-bg) 88%, transparent);
  overflow-x: auto;
  font-size: .9rem;
  line-height: 1.6;
}

.vei__lib-prose pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: 1em;
}

/* --- tableau ----------------------------------------------------------------------
   Il deborde de la mesure de lecture plutot que d'ecraser ses colonnes, et defile dans
   son propre conteneur : le corps de page, lui, ne defile jamais horizontalement. */
.vei__lib-prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 1.7em 0;
  border-collapse: collapse;
  font-size: .95rem;
}

.vei__lib-prose th,
.vei__lib-prose td {
  padding: .6em .8em;
  border-bottom: 1px solid var(--trait, var(--color-border));
  text-align: left;
  vertical-align: top;
}

/* L'en-tete reste visible pendant qu'on fait defiler un long tableau : sans lui, a la
   dixieme ligne on ne sait plus quelle colonne on lit. */
.vei__lib-prose thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg);
}

.vei__lib-prose th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
  white-space: nowrap;
}

/* La premiere colonne nomme la ligne : elle porte le poids, comme un intitule. */
.vei__lib-prose tbody th,
.vei__lib-prose tbody td:first-child {
  font-weight: 700;
  color: var(--color-text);
}

.vei__lib-prose tbody tr:hover { background: var(--accent-doux, var(--color-surface)); }

.vei__lib-prose caption {
  caption-side: bottom;
  padding-top: .7em;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: left;
}

/* --- encadre ----------------------------------------------------------------------
   <aside> DANS un corps d'article, sans classe. C'est le pari de cette brique : donner
   au redacteur un vocabulaire de BALISES plutot qu'un vocabulaire de classes. Une classe
   ecrite dans un corps d'article echapperait au prefixage et sortirait nue sur la page —
   le piege deja rencontre deux fois le 2026-09-09. Une balise, elle, ne peut pas fuir. */
.vei__lib-prose aside {
  position: relative;
  margin: 1.9em 0;
  padding: 1.15em 1.35em 1.15em 1.5em;
  border: 1px solid var(--trait, var(--color-border));
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--rayon-m, var(--radius-card)) var(--rayon-m, var(--radius-card)) 0;
  background: var(--surface-haute, var(--color-surface));
  font-size: .98rem;
  line-height: 1.62;
}

.vei__lib-prose aside > :last-child { margin-bottom: 0; }

/* Le premier <strong> d'un encadre sert d'intitule : un titre sans niveau de titre, donc
   sans casser la hierarchie des H2/H3 que le sommaire lit. */
.vei__lib-prose aside > p:first-child > strong:first-child {
  display: block;
  margin-bottom: .35em;
  font-family: var(--font-heading);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* --- liste de definitions ----------------------------------------------------------
   La forme la plus juste pour un glossaire, et celle qu'un moteur de reponse extrait le
   plus proprement : un terme, sa definition, rien entre les deux. */
.vei__lib-prose dl {
  margin: 1.6em 0;
  display: grid;
  gap: .1em;
}

.vei__lib-prose dt {
  margin-top: .9em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-text);
}

.vei__lib-prose dt:first-child { margin-top: 0; }

.vei__lib-prose dd {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-trait, var(--color-primary));
  color: var(--color-text-muted);
}

/* --- accordeon ---------------------------------------------------------------------
   <details> natif : un depliant sans une ligne de JavaScript. Le triangle par defaut est
   remplace par un signe dessine en CSS, qui pivote a l'ouverture. */
.vei__lib-prose details {
  margin: .7em 0;
  border: 1px solid var(--trait, var(--color-border));
  border-radius: var(--rayon-m, var(--radius-card));
  background: var(--surface-haute, var(--color-surface));
  overflow: hidden;
}

.vei__lib-prose summary {
  position: relative;
  padding: .85em 3em .85em 1.1em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.vei__lib-prose summary::-webkit-details-marker { display: none; }

.vei__lib-prose summary::after {
  content: "";
  position: absolute;
  right: 1.2em;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.35rem;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.vei__lib-prose details[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -.15rem;
}

.vei__lib-prose summary:hover,
.vei__lib-prose summary:focus-visible { color: var(--color-primary); }

.vei__lib-prose details > :not(summary) {
  margin: 0 1.1em 1.1em;
}

@media (prefers-reduced-motion: reduce) {
  .vei__lib-prose summary::after { transition: none; }
}

/* --- surlignage et mentions ------------------------------------------------------- */
.vei__lib-prose mark {
  padding: .05em .25em;
  border-radius: 3px;
  background: var(--accent-doux, var(--color-surface));
  color: var(--color-text);
}

.vei__lib-prose small {
  font-size: .84rem;
  color: var(--color-text-muted);
}

/* --- media ------------------------------------------------------------------------ */
.vei__lib-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.7em 0;
  border-radius: var(--rayon-m, var(--radius-card));
}

.vei__lib-prose figure { margin: 1.7em 0; }
.vei__lib-prose figure img { margin: 0 0 .6em; }

.vei__lib-prose figcaption {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.vei__lib-prose hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--trait, var(--color-border));
}

.vei__lib-prose strong { font-weight: 700; color: var(--color-text); }

.vei__lib-prose abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: .18em;
  cursor: help;
}

/* --- citation en ligne --------------------------------------------------------------
   <q cite="URL"> pour quelques mots cites dans une phrase, la ou <blockquote> serait
   demesure. Les guillemets sont poses par le CSS, aux formes francaises : le redacteur
   n'a pas a s'en souvenir, et un lecteur d'ecran annonce deja la citation. */
.vei__lib-prose q {
  quotes: "\00ab\00a0" "\00a0\00bb" "\201c" "\201d";
  font-style: italic;
  color: var(--color-text);
}

.vei__lib-prose q::before { content: open-quote; }
.vei__lib-prose q::after { content: close-quote; }

/* --- titre de source cite dans le texte ------------------------------------------- */
.vei__lib-prose cite {
  font-style: normal;
  font-weight: 600;
  color: var(--color-text);
}

/* --- date en chiffres alignes ----------------------------------------------------- */
.vei__lib-prose time { font-variant-numeric: tabular-nums; }

/* --- appel de note ------------------------------------------------------------------ */
.vei__lib-prose sup {
  font-size: .7em;
  line-height: 0;
  vertical-align: super;
}

.vei__lib-prose sup a { text-decoration: none; }

/* lib-related — SURCHARGE gazette : « a lire aussi » entre filets, liens en colonnes. */

.vei__lib-related {
  margin: 2.6rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 3px double var(--gaz-filet);
}

.vei__lib-related__titre {
  margin: 0 0 1rem;
  font: italic 600 1.65rem/1.1 var(--font-heading);
  color: var(--color-secondary);
}

.vei__lib-related__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vei__lib-related__liste li {
  position: relative;
  padding-left: 1.35rem;
  font: 600 1.16rem/1.22 var(--font-heading);
}

.vei__lib-related__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: .7rem;
  height: .7rem;
  background: var(--color-primary);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.vei__lib-related__liste a {
  color: var(--gaz-encre);
  text-decoration: none;
}

.vei__lib-related__liste a:hover,
.vei__lib-related__liste a:focus-visible {
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: .2em;
}

/* lib-sommaire — le sommaire d'une page longue.

   Il colle en haut de sa colonne pendant la lecture. C'est tout l'interet : un sommaire
   qui defile avec le texte ne sert qu'une fois, au premier ecran. position:sticky suffit,
   aucun script — le seul prerequis est que sa colonne ne soit pas en overflow, ce dont
   la mise en page de l'article se charge.

   Il n'indique PAS la section courante : le faire demanderait un observateur
   d'intersection, donc du JavaScript, donc une dependance sur 48 sites pour un gain de
   confort mineur. */

.vei__lib-sommaire {
  position: sticky;
  top: 5.5rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--trait, var(--color-border));
  border-radius: var(--rayon-m, var(--radius-card));
  background: var(--surface-haute, var(--color-surface));
  font-family: var(--font-body);
}

.vei__lib-sommaire__titre {
  margin: 0 0 .75rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Les numeros sont poses par un compteur CSS et non ecrits dans le HTML : contrairement
   au rang d'un item de listicle, celui-ci n'a aucun sens hors de sa page, et personne ne
   copiera un sommaire ailleurs. */
.vei__lib-sommaire__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sommaire;
  display: grid;
  gap: .1rem;
}

.vei__lib-sommaire__liste li { counter-increment: sommaire; }

.vei__lib-sommaire__liste a {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .1rem;
  padding: .38rem 0;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: 4px;
  transition: color .15s ease;
}

.vei__lib-sommaire__liste a::before {
  content: counter(sommaire, decimal-leading-zero);
  font-size: .72rem;
  font-weight: 700;
  color: var(--color-primary);
  opacity: .7;
  padding-top: .12em;
}

.vei__lib-sommaire__liste a:hover,
.vei__lib-sommaire__liste a:focus-visible { color: var(--color-text); }

.vei__lib-sommaire__liste a:hover::before,
.vei__lib-sommaire__liste a:focus-visible::before { opacity: 1; }

.vei__lib-sommaire__liste a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* La cible d'une ancre se place SOUS la barre de tete collante : sans cette marge, le
   titre vise atterrit derriere elle et le lecteur croit avoir rate son clic. */
.vei__lib-prose h2[id],
.vei__lib-prose h3[id] { scroll-margin-top: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  .vei__lib-sommaire__liste a { transition: none; }
}

/* lib-sources — la webographie.

   C'est un appareil de PREUVE, et sa lisibilite fait partie de la preuve. Une liste de
   titres bleus ne dit pas d'ou vient l'information ; « developers.google.com » le dit
   d'un coup d'oeil. Chaque entree porte donc les deux : ce que dit la source, et qui la
   publie.

   Les entrees sont NUMEROTEES. Un lecteur qui veut renvoyer vers la troisieme reference
   doit pouvoir la nommer, et un moteur qui reprend le passage garde l'ordre. */

.vei__lib-sources {
  margin: 2.5rem 0 0;
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid var(--trait, var(--color-border));
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--rayon-m, var(--radius-card)) var(--rayon-m, var(--radius-card)) 0;
  background: var(--surface-haute, var(--color-surface));
}

.vei__lib-sources__titre {
  margin: 0 0 .8rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .13em;
}

/* --- la forme enrichie : titre + domaine ------------------------------------------- */
.vei__lib-sources__ordre {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: source;
  display: grid;
  gap: .1rem;
}

.vei__lib-sources__item {
  counter-increment: source;
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.vei__lib-sources__lien {
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 0 .2rem;
  padding: .45rem 0;
  text-decoration: none;
  border-radius: 4px;
}

/* Le numero est pose par un compteur : la liste reste une <ol> semantique, et le style
   ne depend pas d'un chiffre ecrit dans le HTML. */
.vei__lib-sources__lien::before {
  content: counter(source, decimal-leading-zero);
  grid-row: span 2;
  font-size: .72rem;
  font-weight: 700;
  color: var(--color-primary);
  opacity: .65;
  padding-top: .18em;
}

.vei__lib-sources__nom {
  font-weight: 600;
  color: var(--color-text);
  /* Le titre d'une source est parfois tres long : on coupe plutot que de deborder. */
  overflow-wrap: anywhere;
}

/* Le domaine : ce qui permet de juger la source avant de cliquer. */
.vei__lib-sources__hote {
  font-size: .78rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.vei__lib-sources__lien:hover .vei__lib-sources__nom,
.vei__lib-sources__lien:focus-visible .vei__lib-sources__nom {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.vei__lib-sources__lien:hover::before,
.vei__lib-sources__lien:focus-visible::before { opacity: 1; }

/* --- le repli : la liste nue emise par build_sources_html -------------------------- */
.vei__lib-sources__liste ul,
.vei__lib-sources__liste ol {
  margin: 0;
  padding-left: 1.1rem;
}

.vei__lib-sources__liste li {
  margin: .25rem 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.55;
}

.vei__lib-sources__liste a {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.vei__lib-sources__liste a:hover,
.vei__lib-sources__liste a:focus-visible { color: var(--color-primary); }

.vei__lib-sources a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* lib-tableau — le tableau comparatif.

   Le cadre porte tabindex="0" et role="region" : un conteneur a defilement doit etre
   atteignable au clavier, sinon son contenu devient inaccessible a qui n'utilise pas de
   souris. C'est une exigence, pas une finition. */

.vei__lib-tableau {
  padding: var(--pas-section) 0;
}

.vei__lib-tableau__titre {
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.3rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--color-text);
  text-wrap: balance;
}

.vei__lib-tableau__titre:empty { display: none; }

.vei__lib-tableau__intro {
  margin: 0 0 1.5rem;
  max-width: 58ch;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.vei__lib-tableau__intro:empty { display: none; }

/* Le debordement est enferme ICI. La page, elle, ne defile jamais lateralement. */
.vei__lib-tableau__cadre {
  overflow-x: auto;
  border: 1px solid var(--trait, var(--color-border));
  border-radius: var(--rayon-m, var(--radius-card));
  background: var(--surface-haute, var(--color-surface));
  /* Une ombre portee sur les bords pendant le defilement dit qu'il reste du contenu a
     droite. Fond fixe + degrades attaches au conteneur : aucun element en plus. */
  background-image:
    linear-gradient(to right, var(--surface-haute, var(--color-surface)), transparent 2.5rem),
    linear-gradient(to left, var(--surface-haute, var(--color-surface)), transparent 2.5rem),
    linear-gradient(to right, color-mix(in srgb, var(--color-text) 12%, transparent), transparent 1rem),
    linear-gradient(to left, color-mix(in srgb, var(--color-text) 12%, transparent), transparent 1rem);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
  background-attachment: local, local, scroll, scroll;
}

.vei__lib-tableau__cadre:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.vei__lib-tableau__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: .93rem;
  line-height: 1.5;
}

.vei__lib-tableau__table th,
.vei__lib-tableau__table td {
  padding: .75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--trait, var(--color-border));
}

/* L'en-tete reste visible pendant le defilement vertical de la page. */
.vei__lib-tableau__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-haute, var(--color-surface));
  border-bottom: 2px solid var(--color-primary);
  font-family: var(--font-heading);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

/* La premiere colonne nomme la ligne : elle porte le poids et ne se coupe pas. */
.vei__lib-tableau__table tbody th,
.vei__lib-tableau__table tbody td:first-child {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.vei__lib-tableau__table tbody td { color: var(--color-text-muted); }

.vei__lib-tableau__table tbody tr:last-child th,
.vei__lib-tableau__table tbody tr:last-child td { border-bottom: 0; }

.vei__lib-tableau__table tbody tr:hover { background: var(--accent-doux, transparent); }

.vei__lib-tableau__table a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.vei__lib-tableau__table a:hover,
.vei__lib-tableau__table a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* La legende porte la date et la source : sans elle, un comparatif se perime en silence. */
.vei__lib-tableau__legende {
  margin: .8rem 0 0;
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.vei__lib-tableau__legende:empty { display: none; }

.vei__lib-tableau a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* lib-todo-resume — la reponse courte, avant la liste.

   IL EST DESSINE POUR ETRE EXTRAIT. Un moteur de reponse reprend un passage, pas une page :
   ce bloc doit se comprendre entierement sorti de son contexte. D'ou la forme — un titre,
   deux ou trois phrases autoportantes, et des points qui ne renvoient a rien d'implicite.

   Il est visuellement distinct du corps sans etre un encadre decoratif : le lecteur presse
   doit le reperer en une seconde et repartir. */

.vei__lib-todo-resume {
  margin: 0 0 1.6rem;
  padding: clamp(1.1rem, .9rem + 1vw, 1.6rem) clamp(1.2rem, 1rem + 1vw, 1.8rem);
  border: 1px solid var(--accent-trait, var(--color-primary));
  border-radius: var(--rayon-l, var(--radius-card));
  background: var(--surface-haute, var(--color-surface));
  box-shadow: var(--ombre-1, none);
}

.vei__lib-todo-resume__titre {
  margin: 0 0 .6rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.vei__lib-todo-resume__texte {
  margin: 0;
  max-width: 64ch;
  font-family: var(--font-body);
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--color-text);
  text-wrap: pretty;
}

.vei__lib-todo-resume__texte:empty { display: none; }

.vei__lib-todo-resume__points {
  display: grid;
  gap: .45rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.vei__lib-todo-resume__points:empty { display: none; }

.vei__lib-todo-resume__points li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* La coche est dessinee en CSS : deux traits, aucune requete, aucune police d'icones. */
.vei__lib-todo-resume__points li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .4em;
  width: .4rem;
  height: .72rem;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.vei__lib-todo-resume a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.vei__lib-todo-resume a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media print {
  .vei__lib-todo-resume { border-color: #999; background: none; box-shadow: none; }
}


/* Fête de Noël : feuille du site, servie APRES les partielles des briques.
   Theme gazette, variante grand-magazine (cascade socle, agence, dossier, gazette).
   Cette feuille pose les polices auto-hebergees, redefinit l'echelle de tokens des themes
   (--gaz-* pour gazette, --dsr-* pour les chapitres du theme dossier), et regle les briques
   du socle et du dossier qui restent dans la page (sommaire, chapitres, sources, FAQ, plan).
   Palette et polices : config.json (theme). Les seules couleurs ecrites ici sont des tokens.
*/

/* ---------------------------------------------------------------------------------
   Polices auto-hebergees (SIL Open Font License), sous-ensemble latin, variables :
   un fichier sert toutes les graisses. Aucune requete tierce au rendu.
   --------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italique.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: 'Literata';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/literata.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: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/literata-italique.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;
}

/* ---------------------------------------------------------------------------------
   Jetons du site. L'or (--color-primary) fait 3,96:1 sur le papier : il porte les
   aplats, les filets, les etoiles et les grands chiffres ; le texte lie prend
   --vei-or-encre (5,76:1). Sur le bordeaux, l'or eclairci tient 5,43:1.
   --------------------------------------------------------------------------------- */
:root {
  --vei-or-encre: color-mix(in srgb, var(--color-primary) 72%, var(--color-text));
  --vei-or-clair: color-mix(in srgb, var(--color-primary) 50%, var(--color-bg));
  --vei-papier: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
  --vei-filet: color-mix(in srgb, var(--color-primary) 38%, transparent);
  --vei-double: 3px double var(--vei-filet);
  --vei-sapin: #2F5D3A;

  --dsr-accent: var(--color-primary);
  --dsr-encre: var(--color-text);
  --dsr-titre: var(--color-secondary);
  --dsr-filet: var(--vei-filet);
  --dsr-halo: var(--color-primary);
  --dsr-mesure: 66ch;
  --dsr-corps-taille: 1.03rem;
  --dsr-corps-interligne: 1.78;
  --dsr-progression-lueur: 0;
  --dsr-progression-hauteur: 3px;
  --radius-card: 0;
}

/* L'echelle gazette, redefinie en entier : aucune valeur par defaut du theme n'est servie
   telle quelle. Meme selecteur que la partielle, feuille servie apres : elle gagne. */
.vei__lib-gaz-page {
  --gaz-encre: var(--color-text);
  --gaz-papier: var(--vei-papier);
  --gaz-filet: color-mix(in srgb, var(--color-primary) 48%, var(--color-bg));
  --gaz-sapin: var(--vei-sapin);
  --gaz-creme: color-mix(in srgb, var(--color-primary) 24%, var(--color-bg));
  --gaz-or-clair: var(--vei-or-clair);
  --gaz-lien: var(--vei-or-encre);
  --gaz-voile: color-mix(in srgb, var(--color-text) 90%, transparent);
  --gaz-cadre: color-mix(in srgb, var(--color-bg) 72%, transparent);
  --gaz-ombre: 0 1.2rem 2.6rem -1.5rem color-mix(in srgb, var(--color-secondary) 55%, transparent);
  --gaz-large: 77.5rem;
  --gaz-colonne: 46rem;
  --gaz-gouttiere: clamp(1rem, 4vw, 2.5rem);
  --gaz-respiration: clamp(3.5rem, 7vw, 5.5rem);
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }

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

a { color: var(--vei-or-encre); text-underline-offset: .18em; }

::selection {
  background: color-mix(in srgb, var(--color-primary) 28%, var(--color-bg));
  color: var(--color-secondary);
}

/* ---------------------------------------------------------------------------------
   Le corps d'un recit : introduction, sommaire, chapitres (theme dossier).
   --------------------------------------------------------------------------------- */
.vei__lib-prose:empty { display: none; }

.vei__lib-prose a { color: var(--vei-or-encre); }

.vei__lib-prose > p:first-child { font-size: 1.08rem; line-height: 1.75; }

.vei__lib-sommaire {
  margin: 2rem 0 2.6rem;
  padding: 1.1rem 1.3rem;
  border-top: var(--vei-double);
  border-bottom: var(--vei-double);
  background: var(--vei-papier);
}

.vei__lib-sommaire__titre {
  font-size: 1.3rem;
  font-style: italic;
  color: var(--color-secondary);
}

.vei__lib-sommaire__liste { counter-reset: vei-sommaire; }

.vei__lib-sommaire__liste a { color: var(--color-text); text-decoration: none; }

.vei__lib-sommaire__liste a:hover,
.vei__lib-sommaire__liste a:focus-visible {
  color: var(--color-secondary);
  text-decoration: underline;
}

.vei__lib-chapitre__numero,
.vei__lib-chapitre__corps a { color: var(--vei-or-encre); }

.vei__lib-chapitre__titre { font-weight: 600; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }

/* La premiere lettre de chaque chapitre, en lettrine : la marque du magazine, reprise
   chapitre par chapitre sans une donnee de plus. */
.vei__lib-chapitre__corps > p:first-child::first-letter {
  float: left;
  margin: .05em .1em 0 0;
  font: 600 3.3em/.8 var(--font-heading);
  color: var(--color-secondary);
}

/* Le corps vient du JSON, sans classe : tableaux et citations se stylent par leurs
   balises, toujours sous le chapitre. */
.vei__lib-chapitre__corps table {
  width: 100%;
  margin: 0 0 1.6em;
  border-collapse: collapse;
  font-size: .9rem;
  line-height: 1.5;
  display: block;
  overflow-x: auto;
  /* Une ombre au bord qui cache encore des colonnes : elle suit le defilement. */
  background:
    linear-gradient(to right, var(--color-bg) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--color-bg) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--color-text) 22%, transparent), transparent) left / .8rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--color-text) 22%, transparent), transparent) right / .8rem 100% no-repeat;
}

.vei__lib-chapitre__corps th,
.vei__lib-chapitre__corps td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--vei-filet);
  text-align: left;
  vertical-align: top;
}

.vei__lib-chapitre__corps th {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-secondary);
  background: var(--vei-papier);
}

/* :not([class]) : seulement le HTML nu du JSON. L'exergue du theme (lib-citation) est
   aussi une figure a blockquote, sous le chapitre : sans ce filtre, ces regles plus
   specifiques que sa partielle lui remettaient un filet gauche et lui otaient son
   debordement (constate en capture). */
.vei__lib-chapitre__corps figure:not([class]) { margin: 1.8em 0; }

.vei__lib-chapitre__corps blockquote:not([class]) {
  margin: 0;
  padding: .2rem 0 .2rem 1.2rem;
  border-left: 2px solid var(--color-primary);
  font-style: italic;
}

.vei__lib-chapitre__corps figcaption:not([class]) {
  margin-top: .5rem;
  padding-left: 1.2rem;
  font-size: .85rem;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------------
   Le detour de fin : qui raconte. Un encart de papier borde d'or.
   --------------------------------------------------------------------------------- */
.vei__lib-detour {
  margin-block: 0;
  border-left: 0;
  border-top: var(--vei-double);
  border-bottom: var(--vei-double);
  background: var(--color-bg);
}

.vei__lib-detour__etiquette { color: var(--vei-or-encre); }
.vei__lib-detour__titre { font-size: 1.5rem; font-style: italic; color: var(--color-secondary); }

/* ---------------------------------------------------------------------------------
   Sources et questions (les questions sont habillees par le theme gazette).
   Les surfaces du theme agence tirent vers le gris (#F2F0EA) : sur ce papier creme, la
   bande du detour et l'encadre des sources passent au papier dore du site, le meme que
   l'encadre « En bref ».
   --------------------------------------------------------------------------------- */
.vei__lib-bande--surface { background: var(--vei-papier); }

.vei__lib-sources, .vei__lib-faq { margin-bottom: 2.4rem; }

.vei__lib-sources {
  background: var(--vei-papier);
  border-color: var(--vei-filet);
  border-left-color: var(--color-primary);
}

.vei__lib-sources__titre {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-secondary);
}

.vei__lib-sources__lien { color: var(--color-text); }
.vei__lib-sources__hote { color: var(--vei-or-encre); }

/* ---------------------------------------------------------------------------------
   Pages a propos, mentions, plan : le titre est le <h1> du texte.
   --------------------------------------------------------------------------------- */
.vei__lib-prose h1 {
  margin: 0 0 1.2rem;
  font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.2rem);
  font-style: italic;
  line-height: 1.08;
  color: var(--color-secondary);
}

.vei__lib-prose h2 { color: var(--color-secondary); }

.vei__lib-plan-site__famille-titre { color: var(--color-secondary); }
.vei__lib-plan-site__lien { color: var(--color-text); font-weight: 600; }

@media (max-width: 40rem) {
  .vei__lib-chapitre__corps th, .vei__lib-chapitre__corps td { padding: .45rem .5rem; }
}