/* Ne pas editer : copie de build/. */
:root {
  --shadow-card: 0 1px 2px rgba(0,0,0,.06);
  --font-heading: 'Bitter', Georgia, serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --color-sur-secondary: #FBF7EF;
  --color-sur-primary: #FBF7EF;
  --focus-ring: #A4161A;
  --color-primary: #A4161A;
  --color-secondary: #2F4A3A;
  --color-bg: #FBF7EF;
  --color-text: #231F1C;
  --color-surface: #F7EFDF;
  --color-surface-alt: #EEEAE2;
  --color-border: #D4D0C9;
  --color-text-muted: #6F6B66;
  --radius-card: 0;
}

: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-alerte-securite — un danger connu, date et source.

   ELLE A LE DROIT D'ETRE LA SEULE COULEUR FRANCHE DE LA PAGE. Partout ailleurs cette
   bibliotheque evite le rouge : un encadre d'avertissement banalise se saute comme un
   bandeau de cookies, et la page finit par crier partout donc nulle part. Ici la couleur
   est justifiee parce qu'elle est RARE — une page qui porte cinq alertes n'a pas un
   probleme de CSS, elle a un probleme de produit.

   LA COULEUR N'EST PAS LE SEUL SIGNAL. Un daltonien deuteranope ne distingue pas ce rouge
   d'un vert de meme luminosite ; quelqu'un qui imprime la page ne voit rien du tout. Le
   poids vient donc aussi de la bordure epaisse, du titre, et du geste a tenir en gras.
   La couleur ajoute, elle ne porte jamais seule.

   LE GESTE A TENIR EST LE PLUS VISIBLE DU BLOC, plus que le danger lui-meme. Une alerte
   qui inquiete sans dire quoi faire laisse le lecteur avec le probleme et sans la prise. */

.mai__lib-alerte-securite {
  scroll-margin-top: var(--btq-ancrage, 5rem);
  margin: var(--btq-pas, 2.5rem) 0;
  padding: 1.2rem 1.4rem 1.3rem;
  border: 1px solid var(--btq-danger-trait, #d9534f);
  border-left: 6px solid var(--btq-danger, #c9302c);
  border-radius: var(--btq-rayon, var(--radius-card, 10px));
  /* Un fond a peine teinte : assez pour detacher le bloc, pas assez pour que le texte
     perde du contraste. La teinte est melangee au fond du site pour rester juste en
     theme sombre comme en theme clair. */
  background: color-mix(in srgb, var(--btq-danger, #c9302c) 7%,
                        var(--color-bg, #fff));
}

.mai__lib-alerte-securite__titre {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin: 0 0 .6rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-text, #222);
  text-wrap: balance;
}

/* Le triangle est dessine en CSS : aucune image, aucune police d'icones, et il survit a
   une coupure reseau. aria-hidden n'est pas necessaire — un ::before n'est pas annonce
   comme du contenu par les lecteurs d'ecran des lors qu'il ne porte pas de texte. */
.mai__lib-alerte-securite__titre::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: .48rem solid transparent;
  border-right: .48rem solid transparent;
  border-bottom: .82rem solid var(--btq-danger, #c9302c);
  transform: translateY(.06em);
}

.mai__lib-alerte-securite__quoi,
.mai__lib-alerte-securite__qui {
  margin: 0 0 .55rem;
  max-width: 62ch;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .96rem;
  line-height: 1.62;
  color: var(--color-text, #222);
  text-wrap: pretty;
}

.mai__lib-alerte-securite__qui {
  font-size: .89rem;
  color: var(--color-text-muted, #666);
}

.mai__lib-alerte-securite__qui:empty { display: none; }

/* Le geste a tenir : l'element le plus lourd du bloc. */
.mai__lib-alerte-securite__geste {
  margin: 0 0 .7rem;
  padding: .7rem 1rem;
  border-radius: calc(var(--btq-rayon, var(--radius-card, 10px)) - 3px);
  background: var(--color-bg, #fff);
  border: 1px solid var(--btq-danger-trait, #d9534f);
  max-width: 62ch;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text, #222);
  text-wrap: pretty;
}

/* Une alerte sans source est une rumeur. La ligne reste visible meme reduite. */
.mai__lib-alerte-securite__source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .6rem;
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--color-text-muted, #666);
}

.mai__lib-alerte-securite__source a {
  color: var(--color-text, #222);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.mai__lib-alerte-securite__source a:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
  border-radius: 2px;
}

.mai__lib-alerte-securite__date { font-variant-numeric: tabular-nums; }

/* 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. */

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

.mai__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;
}

.mai__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;
}

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

.mai__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. */
.mai__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;
}

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

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

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

/* lib-caracteristiques — le tableau de fiche technique.
 *
 * TROIS COLONNES SUR GRAND ECRAN, DEUX LIGNES EMPILEES SUR TELEPHONE. La troisieme
 * colonne — ce que la valeur change a l'usage — est la plus longue des trois ; la
 * garder en colonne sous 40rem produit une bande de six mots de large. Elle passe donc
 * sous le couple nom/valeur, ou elle se lit comme un commentaire.
 *
 * LE TABLEAU DEFILE PLUTOT QU'IL NE DEBORDE : un tableau qui pousse la page en largeur
 * casse la lecture de tout ce qui l'entoure. */

.mai__lib-caracteristiques {
  margin: 2rem 0;
}

.mai__lib-caracteristiques__titre {
  margin: 0 0 .8rem;
  font-family: var(--btq-police-titre, var(--font-heading, Georgia, serif));
  font-size: 1.16rem;
  color: var(--btq-texte, var(--color-text, #23201c));
}

.mai__lib-caracteristiques__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--btq-police-texte, var(--font-body, system-ui, sans-serif));
  font-size: .88rem;
  line-height: 1.55;
}

.mai__lib-caracteristiques__ligne {
  border-bottom: 1px solid var(--btq-filet, var(--color-border, #d7d2c8));
}

.mai__lib-caracteristiques__nom,
.mai__lib-caracteristiques__valeur,
.mai__lib-caracteristiques__consequence {
  padding: .6rem .7rem .6rem 0;
  text-align: left;
  vertical-align: baseline;
}

.mai__lib-caracteristiques__nom {
  width: 30%;
  font-weight: 600;
  color: var(--btq-texte, var(--color-text, #23201c));
}

.mai__lib-caracteristiques__valeur {
  width: 24%;
  color: var(--btq-texte, var(--color-text, #23201c));
}

.mai__lib-caracteristiques__consequence {
  color: var(--btq-texte-doux, var(--color-text-muted, #6f6a62));
}

.mai__lib-caracteristiques__source {
  margin: .8rem 0 0;
  font-family: var(--btq-police-texte, var(--font-body, system-ui, sans-serif));
  font-size: .78rem;
  font-style: italic;
  color: var(--btq-texte-doux, var(--color-text-muted, #6f6a62));
}

@media (max-width: 40rem) {
  .mai__lib-caracteristiques__table,
  .mai__lib-caracteristiques__table tbody,
  .mai__lib-caracteristiques__ligne,
  .mai__lib-caracteristiques__nom,
  .mai__lib-caracteristiques__valeur,
  .mai__lib-caracteristiques__consequence {
    display: block;
    width: auto;
  }

  .mai__lib-caracteristiques__ligne {
    padding: .6rem 0;
  }

  .mai__lib-caracteristiques__nom,
  .mai__lib-caracteristiques__valeur {
    display: inline;
    padding: 0;
  }

  .mai__lib-caracteristiques__nom::after {
    content: " : ";
  }

  .mai__lib-caracteristiques__consequence {
    padding: .25rem 0 0;
  }
}

/* lib-card-article — SURCHARGE du socle : la carte a bord tricote.

   La photo porte un bord de cotes en bas (des colonnes alternees, comme l'ourlet d'un
   pull) ; la carte est surpiquee a l'interieur ; au survol elle se souleve d'un cran.
   La carte entiere est cliquable par le lien du titre etire, sans JavaScript. */

.mai__lib-card-article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--cha-rayon);
  background: var(--cha-neige);
  box-shadow: 0 12px 24px -18px var(--cha-ombre), 0 0 0 1px color-mix(in srgb, var(--cha-graduation) 12%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}

.mai__lib-card-article:hover,
.mai__lib-card-article:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px -18px var(--cha-ombre), 0 0 0 1px var(--cha-braise);
}

.mai__lib-card-article__media {
  position: relative;
  display: block;
}

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

.mai__lib-card-article__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* L'ourlet en cotes, sous la photo. */
.mai__lib-card-article__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--cha-braise) 0 5px,
              color-mix(in srgb, var(--cha-braise) 72%, var(--color-text)) 5px 8px);
}

.mai__lib-card-article__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .5rem;
  margin: 8px;
  padding: 1.1rem 1.1rem 1rem;
  outline: 1.5px dashed color-mix(in srgb, var(--cha-graduation) 16%, transparent);
  outline-offset: -1px;
}

.mai__lib-card-article__date {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.mai__lib-card-article__titre {
  margin: 0;
  font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
}

.mai__lib-card-article__lien {
  color: var(--color-text);
  text-decoration: none;
}

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

.mai__lib-card-article:hover .mai__lib-card-article__lien,
.mai__lib-card-article__lien:focus-visible { color: var(--cha-lien); }

.mai__lib-card-article__extrait {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.mai__lib-card-article__lire {
  margin-top: auto;
  padding-top: .5rem;
  align-self: flex-end;
  font-size: 0;
  color: var(--cha-lien);
}

.mai__lib-card-article__lire::after {
  content: "\2192";
  font-size: 1.2rem;
  display: inline-block;
  transition: transform .2s ease;
}

.mai__lib-card-article:hover .mai__lib-card-article__lire::after { transform: translateX(4px); }

.mai__lib-card-article a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

@media print {
  .mai__lib-card-article { box-shadow: none; break-inside: avoid; }
  .mai__lib-card-article__media::after { content: 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. */

.mai__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. */
.mai__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;
}

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

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

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

/* Le numero en filigrane : de la profondeur sans une seule image. */
.mai__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;
}

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

.mai__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;
}

.mai__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. */
.mai__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;
}

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

/* lib-carte-lien — le lien d'une carte vers une autre page du site.

   IL NE RESSEMBLE PAS AU BOUTON D'ACHAT, ET C'EST LE POINT. lib-sortie est un bloc plein
   et lourd parce qu'elle envoie depenser de l'argent ailleurs ; sur une grille de huit
   cartes, huit boutons pleins mettent huit fois le meme poids a l'ecran et plus rien ne
   ressort. Un lien souligne en teinte du site lit « continuer ici », pas « conclure ».

   LA CIBLE TACTILE RESTE PRISE. Le trait sous le texte n'est pas la zone cliquable : le
   remplissage vertical porte le lien a 44px de haut, ce qui est le minimum pour ne pas
   rater la cible au pouce. */

.mai__lib-carte-lien {
  margin: .9rem 0 0;
}

.mai__lib-carte-lien__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .2rem 0;
  border-bottom: 2px solid var(--btq-action, var(--color-primary, #1a1a1a));
  color: var(--btq-action, var(--color-primary, #1a1a1a));
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.mai__lib-carte-lien__lien:hover {
  border-bottom-color: transparent;
}

.mai__lib-carte-lien__lien:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 3px;
}

/* lib-cha-action — l'appel a l'action du chalet : un bouton epais, cousu d'une surpiqure,
   qui s'enfonce d'un pixel au survol. Trois tons par data-ton : plein (braise), creux
   (contour braise), clair (sur planches sombres). */

.mai__lib-cha-action {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.35rem;
  border: 2px solid var(--cha-braise);
  border-radius: var(--cha-rayon);
  background: var(--cha-braise);
  color: var(--cha-sur-braise);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  outline: 1px dashed color-mix(in srgb, var(--cha-sur-braise) 55%, transparent);
  outline-offset: -6px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cha-braise) 55%, var(--color-text));
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.mai__lib-cha-action::after {
  content: "\2192";
  transition: transform .15s ease;
}

.mai__lib-cha-action:hover,
.mai__lib-cha-action:focus-visible {
  transform: translateY(1px);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--cha-braise) 55%, var(--color-text));
}

.mai__lib-cha-action:hover::after { transform: translateX(3px); }

.mai__lib-cha-action:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.mai__lib-cha-action[data-ton="creux"] {
  background: transparent;
  color: var(--cha-lien);
  outline-color: color-mix(in srgb, var(--cha-braise) 35%, transparent);
  box-shadow: none;
}

.mai__lib-cha-action[data-ton="creux"]:hover { background: color-mix(in srgb, var(--cha-braise) 8%, transparent); }

.mai__lib-cha-action[data-ton="clair"] {
  border-color: var(--cha-sur-bois);
  background: var(--cha-sur-bois);
  color: var(--cha-bois);
  outline-color: color-mix(in srgb, var(--cha-bois) 35%, transparent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cha-sur-bois) 45%, var(--cha-bois));
}

@media print {
  .mai__lib-cha-action { box-shadow: none; outline: 0; }
  .mai__lib-cha-action::after { content: none; }
}

/* lib-cha-bande — la bande pleine largeur du chalet, et ses fonds.

   data-fond : (rien) le fond du site ; laine, la maille jersey en filigrane sur la laine ;
   bois, des planches sombres ou tout ce qui se lit passe en --cha-sur-bois.
   data-largeur : (rien) la largeur du site ; etroit, la colonne de lecture.
   Une bande que la page n'a pas remplie ne laisse pas un aplat vide. */

.mai__lib-cha-bande {
  position: relative;
  padding: var(--cha-pas) var(--cha-gouttiere);
  scroll-margin-top: 1rem;
}

.mai__lib-cha-bande:has(> .mai__lib-cha-bande__interieur:empty) { display: none; }

.mai__lib-cha-bande__interieur {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem);
  max-width: var(--cha-large);
  margin: 0 auto;
}

.mai__lib-cha-bande[data-largeur="etroit"] > .mai__lib-cha-bande__interieur { max-width: var(--cha-etroit); }

.mai__lib-cha-bande[data-fond="laine"] {
  background: var(--cha-tricot), var(--cha-laine);
  border-block: 1px solid color-mix(in srgb, var(--cha-graduation) 10%, transparent);
}

.mai__lib-cha-bande[data-fond="bois"] {
  --cha-lien: var(--cha-sur-bois);
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--cha-graduation) 35%, transparent) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cha-sur-bois) 4%, transparent) 0 1px, transparent 1px 11px),
    var(--cha-bois);
  color: var(--cha-sur-bois);
}

/* Deux bandes de meme fond qui se suivent ne doublent pas leur marge. */
.mai__lib-cha-bande:not([data-fond]) + .mai__lib-cha-bande:not([data-fond]) { padding-top: 0; }

/* Le sommaire du socle colle en haut de SA colonne (position: sticky). Pose dans le flux
   d'une bande a une colonne, il n'a pas de colonne a lui : il restait colle par-dessus le
   texte pendant toute la lecture (constate a 390 et a 1440 px, 2026-09-28). Etroit, il
   redevient un encadre du flux ; large, il prend une colonne a gauche de la lecture et y
   colle, borne a la hauteur de l'ecran. */
.mai__lib-cha-bande__interieur > .mai__lib-sommaire { position: static; }

@media (min-width: 72rem) {
  .mai__lib-cha-bande[data-largeur="etroit"] > .mai__lib-cha-bande__interieur:has(> .mai__lib-sommaire) {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
    max-width: calc(15rem + 3rem + var(--cha-etroit));
  }
  .mai__lib-cha-bande[data-largeur="etroit"] > .mai__lib-cha-bande__interieur > .mai__lib-sommaire {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}

@media print {
  .mai__lib-cha-bande { padding: 1rem 0; background: none; color: inherit; border: 0; }
}

/* lib-cha-bandeau-flambee — la photo pleine largeur, reveillee d'une lueur de braise.

   La photo couvre la bande ; un voile de bois sombre monte depuis la gauche, une lueur de
   braise chauffe le centre. Le panneau de texte se pose dans la partie voilee : sur un
   ecran etroit, il passe SOUS la photo, sur les planches, pour ne jamais lire du texte sur
   une zone claire de l'image. */

.mai__lib-cha-bandeau-flambee {
  position: relative;
  display: grid;
  min-height: clamp(26rem, 20rem + 18vw, 36rem);
  overflow: hidden;
  background: var(--cha-bois);
  color: var(--cha-sur-bois);
  isolation: isolate;
}

.mai__lib-cha-bandeau-flambee__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mai__lib-cha-bandeau-flambee::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 70% at 72% 55%, color-mix(in srgb, var(--cha-braise) 26%, transparent), transparent 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--cha-bois) 94%, transparent) 0 36%,
                    color-mix(in srgb, var(--cha-bois) 70%, transparent) 52%, transparent 78%);
}

.mai__lib-cha-bandeau-flambee__panneau {
  align-self: center;
  width: min(100%, var(--cha-large));
  margin: 0 auto;
  padding: var(--cha-pas) var(--cha-gouttiere);
}

.mai__lib-cha-bandeau-flambee__panneau > * { max-width: 34rem; }

.mai__lib-cha-bandeau-flambee__surtitre {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .7rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mai__lib-cha-bandeau-flambee__surtitre::after {
  content: "";
  width: 3rem;
  height: 9px;
  background: var(--cha-graduations), var(--cha-ruban);
}

.mai__lib-cha-bandeau-flambee__titre {
  margin: 0 0 1rem;
  color: var(--cha-sur-bois);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.mai__lib-cha-bandeau-flambee__texte { font-size: 1.02rem; line-height: 1.65; }

.mai__lib-cha-bandeau-flambee__texte p { margin: 0 0 .9rem; }

.mai__lib-cha-bandeau-flambee__liste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .6rem 0 1.4rem;
  padding: 0;
  list-style: none;
}

.mai__lib-cha-bandeau-flambee__liste:empty { display: none; }

.mai__lib-cha-bandeau-flambee__liste a {
  display: inline-block;
  padding: .35rem .75rem;
  border: 1px dashed color-mix(in srgb, var(--cha-sur-bois) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cha-bois) 55%, transparent);
  color: var(--cha-sur-bois);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}

.mai__lib-cha-bandeau-flambee__liste a:hover,
.mai__lib-cha-bandeau-flambee__liste a:focus-visible {
  border-style: solid;
  background: color-mix(in srgb, var(--cha-braise) 70%, var(--cha-bois));
}

.mai__lib-cha-bandeau-flambee__action { margin: 0; }

.mai__lib-cha-bandeau-flambee__action:empty { display: none; }

.mai__lib-cha-bandeau-flambee__credit {
  position: absolute;
  right: .6rem;
  bottom: .5rem;
  max-width: calc(100% - 1.2rem);
  padding: .1rem .45rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--cha-bois) 80%, transparent);
  font-size: .66rem;
}

.mai__lib-cha-bandeau-flambee__credit a { color: inherit; }

@media (max-width: 46rem) {
  .mai__lib-cha-bandeau-flambee { min-height: 0; }
  .mai__lib-cha-bandeau-flambee__image { position: static; height: 15rem; }
  .mai__lib-cha-bandeau-flambee::before { inset: 0 0 auto; height: 15rem; background: radial-gradient(ellipse at 60% 60%, color-mix(in srgb, var(--cha-braise) 22%, transparent), transparent 70%); }
  .mai__lib-cha-bandeau-flambee__credit { bottom: auto; top: 13.8rem; }
}

@media print {
  .mai__lib-cha-bandeau-flambee { display: block; background: none; color: inherit; min-height: 0; }
  .mai__lib-cha-bandeau-flambee__image,
  .mai__lib-cha-bandeau-flambee::before,
  .mai__lib-cha-bandeau-flambee__credit { display: none; }
  .mai__lib-cha-bandeau-flambee__titre { color: inherit; }
}

/* lib-cha-cordelette — des photos pincees sur une ficelle.

   La ficelle est un degrade tendu en haut de la liste ; chaque photo a son bord blanc, une
   pince a linge (deux pseudo-elements, bois clair) et une inclinaison alternee. Sur un
   ecran etroit, la liste defile DANS sa boite avec des arrets (scroll-snap) : la page ne
   defile jamais de cote. */

.mai__lib-cha-cordelette {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding: 1.6rem .25rem 1.2rem;
}

.mai__lib-cha-cordelette:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.mai__lib-cha-cordelette__fil {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(10.5rem, 1fr);
  gap: clamp(.9rem, .6rem + 1vw, 1.6rem);
  margin: 0;
  padding: 0 .4rem;
  list-style: none;
  min-width: min-content;
}

/* La ficelle : deux tons de lin, tendue au-dessus des pinces. */
.mai__lib-cha-cordelette__fil::before {
  content: "";
  position: absolute;
  top: -.35rem;
  left: -.25rem;
  right: -.25rem;
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--cha-bois-clair) 0 5px,
              color-mix(in srgb, var(--cha-bois-clair) 60%, var(--cha-bois)) 5px 8px);
  box-shadow: 0 1px 1px var(--cha-ombre);
}

.mai__lib-cha-cordelette__photo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .5rem .5rem .8rem;
  background: var(--cha-neige);
  box-shadow: 0 10px 18px -12px var(--cha-ombre), 0 0 0 1px color-mix(in srgb, var(--cha-graduation) 10%, transparent);
  scroll-snap-align: start;
  transform: rotate(-1.4deg);
  transform-origin: 50% 0;
  transition: transform .25s ease;
}

.mai__lib-cha-cordelette__photo:nth-child(even) { transform: rotate(1.2deg); }
.mai__lib-cha-cordelette__photo:nth-child(3n) { transform: rotate(-.4deg); }

.mai__lib-cha-cordelette__photo:hover,
.mai__lib-cha-cordelette__photo:focus-within { transform: rotate(0) translateY(-2px); }

/* La pince a linge. */
.mai__lib-cha-cordelette__photo::before {
  content: "";
  position: absolute;
  top: -1.05rem;
  left: 50%;
  z-index: 2;
  width: 12px;
  height: 1.7rem;
  margin-left: -6px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 45%, color-mix(in srgb, var(--cha-bois) 45%, transparent) 45% 55%, transparent 55%),
    linear-gradient(color-mix(in srgb, var(--cha-bois-clair) 80%, var(--cha-neige)), var(--cha-bois-clair));
  box-shadow: 0 1px 2px var(--cha-ombre);
}

.mai__lib-cha-cordelette__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.mai__lib-cha-cordelette__lien {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.mai__lib-cha-cordelette__lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.mai__lib-cha-cordelette__photo:hover .mai__lib-cha-cordelette__lien { color: var(--cha-lien); text-decoration: underline; }

.mai__lib-cha-cordelette__texte {
  font-size: .82rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.mai__lib-cha-cordelette__texte:empty { display: none; }

.mai__lib-cha-cordelette__credit {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: .64rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.mai__lib-cha-cordelette__credit a { color: inherit; }

.mai__lib-cha-cordelette__credit:empty { display: none; }

/* Sur un telephone, deux photos et le bord de la troisieme : la ficelle continue, on le
   voit avant d'avoir a le deviner. */
@media (max-width: 40rem) {
  .mai__lib-cha-cordelette__fil { grid-auto-columns: calc((100vw - 2 * var(--cha-gouttiere)) * .43); }
}

@media print {
  .mai__lib-cha-cordelette { overflow: visible; }
  .mai__lib-cha-cordelette__fil { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .mai__lib-cha-cordelette__fil::before,
  .mai__lib-cha-cordelette__photo::before { content: none; }
  .mai__lib-cha-cordelette__photo { transform: none; box-shadow: none; }
}

/* lib-cha-echantillon — une fiche matiere.

   Le tissu est decoupe aux CISEAUX CRANTEURS : cinq masques unis (le centre et une rangee
   de dents par bord), aucune image. Une epingle le tient au carton, une etiquette blanche
   porte son nom. Les echantillons se decalent d'un demi-degre, comme poses a la main. */

.mai__lib-cha-echantillon { margin: 0; }

.mai__lib-cha-echantillon__figure {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  height: 100%;
  margin: 0;
}

.mai__lib-cha-echantillon__tissu {
  --dent: 7px;
  position: relative;
  display: block;
  aspect-ratio: 1;
  filter: drop-shadow(0 3px 3px var(--cha-ombre));
  transform: rotate(-.8deg);
  transition: transform .2s ease;
}

.mai__lib-cha-echantillon:nth-child(even) .mai__lib-cha-echantillon__tissu { transform: rotate(.9deg); }
.mai__lib-cha-echantillon:nth-child(3n) .mai__lib-cha-echantillon__tissu { transform: rotate(-.3deg); }

.mai__lib-cha-echantillon:hover .mai__lib-cha-echantillon__tissu { transform: rotate(0) scale(1.02); }

/* L'epingle : une tete ronde et sa pointe, en haut a gauche. */
.mai__lib-cha-echantillon__tissu::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -5px;
  left: 18%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--cha-braise) 30%, var(--cha-neige)) 0 18%,
              var(--cha-braise) 45%, color-mix(in srgb, var(--cha-braise) 60%, var(--color-text)) 100%);
}

.mai__lib-cha-echantillon__tissu::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 4px;
  left: calc(18% + 6px);
  width: 1.5px;
  height: 26px;
  background: color-mix(in srgb, var(--cha-graduation) 45%, var(--cha-neige));
  transform: rotate(-24deg);
  transform-origin: top;
}

.mai__lib-cha-echantillon__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask:
    linear-gradient(black 0 0) center / calc(100% - 2 * var(--dent)) calc(100% - 2 * var(--dent)) no-repeat,
    conic-gradient(from 135deg at top, black 90deg, transparent 0) top / calc(2 * var(--dent)) var(--dent) repeat-x,
    conic-gradient(from -45deg at bottom, black 90deg, transparent 0) bottom / calc(2 * var(--dent)) var(--dent) repeat-x,
    conic-gradient(from 45deg at left, black 90deg, transparent 0) left / var(--dent) calc(2 * var(--dent)) repeat-y,
    conic-gradient(from 225deg at right, black 90deg, transparent 0) right / var(--dent) calc(2 * var(--dent)) repeat-y;
  mask:
    linear-gradient(black 0 0) center / calc(100% - 2 * var(--dent)) calc(100% - 2 * var(--dent)) no-repeat,
    conic-gradient(from 135deg at top, black 90deg, transparent 0) top / calc(2 * var(--dent)) var(--dent) repeat-x,
    conic-gradient(from -45deg at bottom, black 90deg, transparent 0) bottom / calc(2 * var(--dent)) var(--dent) repeat-x,
    conic-gradient(from 45deg at left, black 90deg, transparent 0) left / var(--dent) calc(2 * var(--dent)) repeat-y,
    conic-gradient(from 225deg at right, black 90deg, transparent 0) right / var(--dent) calc(2 * var(--dent)) repeat-y;
}

/* La fiche : une etiquette blanche percee d'un oeillet, le nom, puis ce que fait la maille. */
.mai__lib-cha-echantillon__fiche {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--color-text);
}

.mai__lib-cha-echantillon__nom {
  align-self: flex-start;
  position: relative;
  padding: .12rem .6rem .12rem 1.3rem;
  background: var(--cha-neige);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 700;
  border-radius: 2px 10px 10px 2px;
  box-shadow: 0 1px 2px var(--cha-ombre);
}

.mai__lib-cha-echantillon__nom::before {
  content: "";
  position: absolute;
  top: 50%;
  left: .45rem;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cha-graduation) 55%, transparent);
}

.mai__lib-cha-echantillon__proprietes { text-wrap: pretty; }

.mai__lib-cha-echantillon__proprietes a {
  color: var(--cha-lien);
  font-weight: 700;
  text-underline-offset: .15em;
}

.mai__lib-cha-echantillon__credit {
  margin-top: auto;
  font-size: .68rem;
  line-height: 1.35;
  /* Sur le carton, le gris attenue du site tombe sous 4,5:1 : le credit prend le bois. */
  color: var(--cha-bois);
}

.mai__lib-cha-echantillon__credit a { color: inherit; }

.mai__lib-cha-echantillon__credit:empty { display: none; }

@media print {
  .mai__lib-cha-echantillon__tissu { filter: none; transform: none; }
  .mai__lib-cha-echantillon__tissu::before,
  .mai__lib-cha-echantillon__tissu::after { content: none; }
}

/* lib-cha-en-bref — une reponse autonome sur une etiquette cousue.

   Une carte de laine claire, surpiquee a l'interieur, une languette braise en haut a
   gauche, la question en titre, la reponse en gros, le lien vers le guide en dernier. */

.mai__lib-cha-en-bref {
  position: relative;
  margin: 0;
  padding: 1.9rem clamp(1.2rem, 1rem + 1.5vw, 2.2rem) 1.5rem;
  border-radius: var(--cha-rayon);
  background: var(--cha-neige);
  outline: 1.5px dashed color-mix(in srgb, var(--cha-braise) 55%, transparent);
  outline-offset: -9px;
  box-shadow: 0 12px 24px -16px var(--cha-ombre), 0 0 0 1px color-mix(in srgb, var(--cha-graduation) 10%, transparent);
}

.mai__lib-cha-en-bref__etiquette {
  position: absolute;
  top: -.8rem;
  left: 1.4rem;
  margin: 0;
  padding: .25rem .8rem;
  background: var(--cha-braise);
  color: var(--cha-sur-braise);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--cha-braise) 55%, var(--color-text));
}

.mai__lib-cha-en-bref__question {
  margin: 0 0 .6rem;
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
}

.mai__lib-cha-en-bref__reponse {
  margin: 0 0 .9rem;
  font-size: 1.05rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.mai__lib-cha-en-bref__suite {
  color: var(--cha-lien);
  font-weight: 700;
  text-underline-offset: .2em;
}

.mai__lib-cha-en-bref__suite::after { content: " \2192"; }

.mai__lib-cha-en-bref__suite:empty { display: none; }

@media print {
  .mai__lib-cha-en-bref { box-shadow: none; outline: 1px solid; }
}

/* lib-cha-entete — l'en-tete du chalet.

   En haut, la marque cousue comme une etiquette de vetement (fond braise, surpiqure en
   pointilles) sur un fond de laine. Dessous, le rail des rubriques : en variante mercerie,
   un metre ruban gradue tendu d'un bord a l'autre, les rubriques ecrites dessus.
   Sous 46rem, tout passe a la ligne : aucun element ne pousse la page de cote. */

.mai__lib-cha-entete {
  position: relative;
  background: var(--cha-tricot), var(--cha-laine);
  border-bottom: 1px solid color-mix(in srgb, var(--cha-graduation) 18%, transparent);
}

.mai__lib-cha-entete__haut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 2rem;
  max-width: var(--cha-large);
  margin: 0 auto;
  padding: 1rem var(--cha-gouttiere) .95rem;
}

.mai__lib-cha-entete__marque {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1rem;
  color: var(--color-text);
  text-decoration: none;
}

/* L'etiquette cousue : un rectangle braise, une surpiqure interieure, deux points
   d'arret aux extremites. */
.mai__lib-cha-entete__nom {
  position: relative;
  padding: .45rem 1.15rem .5rem;
  background: var(--cha-braise);
  color: var(--cha-sur-braise);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  border-radius: 2px;
  outline: 1.5px dashed color-mix(in srgb, var(--cha-sur-braise) 75%, transparent);
  outline-offset: -6px;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--cha-braise) 60%, var(--color-text));
}

.mai__lib-cha-entete__nom::before,
.mai__lib-cha-entete__nom::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--cha-sur-braise);
  opacity: .8;
}

.mai__lib-cha-entete__nom::before { left: 3px; }
.mai__lib-cha-entete__nom::after { right: 3px; }

.mai__lib-cha-entete__baseline {
  max-width: 22ch;
  font-size: .86rem;
  line-height: 1.35;
  /* Le gris attenue du site est calcule pour le fond, pas pour la laine : on l'eclaircit
     moins, pour garder 4,5:1 sur le tricot. */
  color: color-mix(in srgb, var(--color-text) 80%, var(--cha-laine));
  text-wrap: balance;
}

.mai__lib-cha-entete__liens {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mai__lib-cha-entete__lien {
  padding: .25rem 0;
  color: var(--color-text);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}

.mai__lib-cha-entete__lien:hover,
.mai__lib-cha-entete__lien:focus-visible,
.mai__lib-cha-entete__lien[aria-current="page"] {
  color: var(--cha-lien);
  border-bottom-color: currentColor;
}

/* --- Le rail : un metre ruban -------------------------------------------------------- */
.mai__lib-cha-entete__rail {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .2rem 1.5rem;
  max-width: var(--cha-large);
  margin: 0 auto;
  padding: .7rem var(--cha-gouttiere) .55rem;
}

.mai__lib-cha-entete__rail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cha-graduations), var(--cha-ruban);
  box-shadow: 0 3px 6px var(--cha-ombre);
}

/* La languette de metal au bout du ruban. */
.mai__lib-cha-entete__rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cha-graduation) 45%, var(--cha-ruban)),
              color-mix(in srgb, var(--cha-graduation) 20%, var(--cha-ruban)));
}

.mai__lib-cha-page[data-variante="mercerie"] .mai__lib-cha-entete__rail {
  max-width: none;
  padding-left: max(var(--cha-gouttiere), calc((100% - var(--cha-large)) / 2 + var(--cha-gouttiere)));
  padding-right: max(var(--cha-gouttiere), calc((100% - var(--cha-large)) / 2 + var(--cha-gouttiere)));
}

.mai__lib-cha-entete__rubriques {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 1.6rem;
  margin: 0;
  padding: .55rem 0 0;
  list-style: none;
}

.mai__lib-cha-entete__rubriques .mai__lib-cha-entete__lien {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cha-graduation);
}

.mai__lib-cha-entete__rubriques .mai__lib-cha-entete__lien:hover,
.mai__lib-cha-entete__rubriques .mai__lib-cha-entete__lien:focus-visible,
.mai__lib-cha-entete__rubriques .mai__lib-cha-entete__lien[aria-current="page"] {
  color: var(--cha-graduation);
  border-bottom-color: var(--cha-braise);
}

.mai__lib-cha-entete__index {
  position: relative;
  z-index: 1;
  padding-top: .55rem;
  color: var(--cha-graduation);
  font-size: .88rem;
  font-weight: 700;
  text-underline-offset: .2em;
}

@media (max-width: 46rem) {
  .mai__lib-cha-entete__haut { padding-top: .8rem; }
  .mai__lib-cha-entete__baseline { max-width: none; }
  .mai__lib-cha-entete__rubriques { gap: .1rem 1.1rem; }
  .mai__lib-cha-entete__rubriques .mai__lib-cha-entete__lien { font-size: .95rem; }
}

@media print {
  .mai__lib-cha-entete { display: none; }
}

/* lib-cha-grille — la grille des cartes d'articles : une colonne sur un telephone, deux
   sur une tablette, trois au large, sans jamais pousser la page de cote.

   Pas de carte orpheline sur la derniere rangee : quand le compte ne tombe pas juste
   (impair a deux colonnes, 3n+1 a trois), la PREMIERE carte prend toute la rangee et se
   couche, photo a gauche, texte a droite. Le compte est lu par :nth-last-child, sans
   script ni donnee : 9 cartes font 3 x 3, 7 font 1 + 3 + 3. */

.mai__lib-cha-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, .9rem + 1vw, 1.8rem);
}

.mai__lib-cha-grille:empty { display: none; }

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

@media (min-width: 68rem) {
  .mai__lib-cha-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La carte couchee : meme brique, autre sens de lecture. */
@media (min-width: 46rem) and (max-width: 67.99rem) {
  .mai__lib-cha-grille > .mai__lib-card-article:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .mai__lib-cha-grille > .mai__lib-card-article:first-child:nth-last-child(odd) > .mai__lib-card-article__media { flex: 0 0 52%; }
}

@media (min-width: 68rem) {
  .mai__lib-cha-grille > .mai__lib-card-article:first-child:nth-last-child(3n+1) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .mai__lib-cha-grille > .mai__lib-card-article:first-child:nth-last-child(3n+1) > .mai__lib-card-article__media { flex: 0 0 58%; }
  .mai__lib-cha-grille > .mai__lib-card-article:first-child:nth-last-child(3n+1) img { aspect-ratio: 16 / 9; }
  .mai__lib-cha-grille > .mai__lib-card-article:first-child:nth-last-child(3n+1) .mai__lib-card-article__corps {
    justify-content: center;
    padding: 2rem 2.2rem;
  }
  .mai__lib-cha-grille > .mai__lib-card-article:first-child:nth-last-child(3n+1) .mai__lib-card-article__titre {
    font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem);
  }
}

/* lib-cha-heros-echantillons — l'echantillonnier du premier ecran.

   A gauche le titre, sur la laine. A droite le carton d'une mercerie : un metre ruban
   cloue sur sa tranche haute, et les echantillons epingles en grille. Le carton est un
   aplat de --cha-bois-clair ; son grain est un degrade, pas une image. */

.mai__lib-cha-heros-echantillons {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  max-width: var(--cha-large);
  margin: 0 auto;
  padding: clamp(1.8rem, 1rem + 3vw, 3.6rem) var(--cha-gouttiere) clamp(2.2rem, 1.4rem + 3vw, 4rem);
}

.mai__lib-cha-heros-echantillons__etiquette {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: .3rem .85rem;
  background: var(--cha-sapin);
  color: var(--color-sur-secondary);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
  outline: 1px dashed color-mix(in srgb, var(--color-sur-secondary) 70%, transparent);
  outline-offset: -4px;
  transform: rotate(-1.5deg);
}

.mai__lib-cha-heros-echantillons__titre {
  margin: 0 0 1.1rem;
  font-size: clamp(2.1rem, 1.3rem + 3.3vw, 3.7rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--color-text);
}

.mai__lib-cha-heros-echantillons__chapo {
  margin: 0 0 1.6rem;
  max-width: 44ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.12rem);
  line-height: 1.65;
  color: var(--color-text);
  text-wrap: pretty;
}

.mai__lib-cha-heros-echantillons__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 0;
}

/* --- Le carton ------------------------------------------------------------------------ */
.mai__lib-cha-heros-echantillons__carton {
  position: relative;
  padding: 2.4rem clamp(.9rem, .5rem + 1.5vw, 1.6rem) 1.4rem;
  border-radius: var(--cha-rayon);
  background:
    repeating-linear-gradient(94deg, color-mix(in srgb, var(--cha-bois) 6%, transparent) 0 2px, transparent 2px 9px),
    color-mix(in srgb, var(--cha-bois-clair) 42%, var(--cha-laine));
  box-shadow: 0 18px 30px -18px var(--cha-ombre), inset 0 0 0 1px color-mix(in srgb, var(--cha-bois) 25%, transparent);
}

/* Le metre ruban cloue en haut du carton. */
.mai__lib-cha-heros-echantillons__carton::before {
  content: "";
  position: absolute;
  top: .7rem;
  left: -.6rem;
  right: -.6rem;
  height: 1.15rem;
  background: var(--cha-graduations), var(--cha-ruban);
  box-shadow: 0 2px 4px var(--cha-ombre);
  transform: rotate(-.6deg);
}

.mai__lib-cha-heros-echantillons__legende {
  position: relative;
  margin: 0 0 1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cha-bois);
}

.mai__lib-cha-heros-echantillons__legende:empty { display: none; }

.mai__lib-cha-heros-echantillons__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 60rem) {
  .mai__lib-cha-heros-echantillons { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 34rem) {
  .mai__lib-cha-heros-echantillons__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .mai__lib-cha-heros-echantillons__carton { box-shadow: none; background: none; }
  .mai__lib-cha-heros-echantillons__carton::before { content: none; }
}

/* lib-cha-heros-plaid — le heros d'article et de rubrique.

   Le texte est borde d'une lisiere de plaid (deux trames croisees, --cha-plaid) ; la photo
   est prise dans un cadre de bois clair, surpique a l'interieur. La figure arrive rendue par
   une autre brique : le cadre habille donc ce qu'il contient (img, figcaption), sans en
   connaitre les classes. */

.mai__lib-cha-heros-plaid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  max-width: var(--cha-large);
  margin: 0 auto;
  padding: clamp(1.4rem, 1rem + 2vw, 2.6rem) var(--cha-gouttiere) clamp(2rem, 1.4rem + 2.5vw, 3.4rem);
}

.mai__lib-cha-heros-plaid__texte {
  position: relative;
  padding-left: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
}

/* La lisiere de plaid, tout du long du texte. */
.mai__lib-cha-heros-plaid__texte::before {
  content: "";
  position: absolute;
  top: .3rem;
  bottom: .3rem;
  left: 0;
  width: 12px;
  border-radius: 2px;
  background: var(--cha-plaid);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cha-braise) 30%, transparent);
}

.mai__lib-cha-heros-plaid__surtitre {
  margin: 0 0 .7rem;
  color: var(--cha-lien);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mai__lib-cha-heros-plaid__surtitre:empty { display: none; }

.mai__lib-cha-heros-plaid__titre {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.mai__lib-cha-heros-plaid__chapo {
  margin: 0 0 1.1rem;
  max-width: 58ch;
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.mai__lib-cha-heros-plaid__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.1rem;
  margin: 0;
  font-size: .88rem;
  color: var(--color-text-muted);
}

.mai__lib-cha-heros-plaid__meta:empty,
.mai__lib-cha-heros-plaid__meta > :empty { display: none; }

.mai__lib-cha-heros-plaid__meta > :first-child { font-weight: 700; color: var(--color-text); }

.mai__lib-cha-heros-plaid__fraicheur:empty { display: none; }

.mai__lib-cha-heros-plaid__fraicheur > * { margin: .5rem 0 0; font-size: .86rem; }

/* --- Le cadre de bois ----------------------------------------------------------------- */
.mai__lib-cha-heros-plaid__cadre {
  position: relative;
  padding: 12px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(88deg, color-mix(in srgb, var(--cha-bois) 9%, transparent) 0 2px, transparent 2px 7px),
    color-mix(in srgb, var(--cha-bois-clair) 55%, var(--cha-laine));
  box-shadow: 0 16px 28px -16px var(--cha-ombre), inset 0 0 0 1px color-mix(in srgb, var(--cha-bois) 35%, transparent);
  transform: rotate(.6deg);
}

.mai__lib-cha-heros-plaid__cadre:empty { display: none; }

.mai__lib-cha-heros-plaid__cadre figure { margin: 0; }

.mai__lib-cha-heros-plaid__cadre img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: none;
  object-fit: cover;
  border-radius: 1px;
  outline: 1.5px dashed color-mix(in srgb, var(--cha-neige) 85%, transparent);
  outline-offset: -9px;
  box-shadow: none;
}

.mai__lib-cha-heros-plaid__cadre figcaption {
  margin: .55rem .2rem 0;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--cha-bois);
}

.mai__lib-cha-heros-plaid__cadre figcaption a { color: inherit; }

.mai__lib-cha-heros-plaid__cadre figcaption:empty { display: none; }

@media (max-width: 52rem) {
  .mai__lib-cha-heros-plaid { grid-template-columns: minmax(0, 1fr); }
  .mai__lib-cha-heros-plaid__cadre { transform: none; }
}

@media print {
  .mai__lib-cha-heros-plaid { display: block; }
  .mai__lib-cha-heros-plaid__texte::before { content: none; }
  .mai__lib-cha-heros-plaid__cadre { box-shadow: none; background: none; transform: none; }
}

/* lib-cha-jacquard — la frise de jacquard, pleine largeur.

   Le motif est un MASQUE : le site nomme son fichier dans --cha-jacquard (carres noirs sur
   fond transparent, genere), la couleur est le fond de la frise. Sans motif declare
   (--cha-jacquard: none), la frise sort en aplat : chaque site adoptant nomme le sien,
   propre a lui, ce qui evite qu'un meme dessin relie deux sites. */

.mai__lib-cha-jacquard {
  height: clamp(44px, 3.2vw + 30px, 64px);
  background: var(--cha-braise);
  -webkit-mask: var(--cha-jacquard) 0 50% / auto 100% repeat-x;
  mask: var(--cha-jacquard) 0 50% / auto 100% repeat-x;
}

.mai__lib-cha-page[data-variante="mercerie"] .mai__lib-cha-jacquard { background: var(--cha-sapin); }

@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .mai__lib-cha-jacquard { display: none; }
}

@media print {
  .mai__lib-cha-jacquard { display: none; }
}

/* lib-cha-page — l'enveloppe du chalet ET sa couche de tokens.

   Les valeurs ci-dessous sont DERIVEES des douze tokens du builder (--color-*) : le theme
   est lisible seul, sans une couleur ecrite en dur. Elles ne sont pas faites pour etre
   servies telles quelles : chaque site redefinit l'echelle entiere dans sa feuille, sur
   .<prefixe>__lib-cha-page (meme poids, feuille du site en dernier : elle gagne).

   Motifs : ce sont des MASQUES ou des degrades qui lisent un token. Aucun ne porte sa
   couleur ; le meme ruban sort dore chez l'un, rouge chez l'autre. */

.mai__lib-cha-page {
  --cha-bois: color-mix(in srgb, var(--color-secondary) 45%, var(--color-text));
  --cha-bois-clair: color-mix(in srgb, var(--color-secondary) 30%, var(--color-bg));
  --cha-sur-bois: var(--color-bg);
  --cha-laine: color-mix(in srgb, var(--color-surface) 65%, var(--color-bg));
  --cha-braise: var(--color-primary);
  --cha-sur-braise: var(--color-sur-primary);
  --cha-sapin: var(--color-secondary);
  --cha-givre: color-mix(in srgb, var(--color-bg) 88%, var(--color-secondary));
  --cha-neige: var(--color-bg);
  --cha-maille: color-mix(in srgb, var(--color-text) 7%, transparent);
  --cha-ruban: color-mix(in srgb, var(--color-primary) 16%, var(--color-bg));
  --cha-graduation: var(--color-text);
  --cha-lien: var(--color-primary);
  --cha-ombre: color-mix(in srgb, var(--color-text) 22%, transparent);
  --cha-jacquard: none;
  --cha-large: 74rem;
  --cha-etroit: 46rem;
  --cha-gouttiere: clamp(1rem, 4vw, 2.25rem);
  --cha-rayon: 4px;
  --cha-pas: clamp(2.75rem, 2rem + 3vw, 4.75rem);

  /* Le metre ruban : trois echelles de graduations, du millimetre au decimetre, posees
     depuis le bord haut. Une seule declaration, reprise par l'en-tete, le tableau des
     tailles et les titres. Les traits sont plafonnes en pixels : sur un ruban haut
     (l'en-tete, une ligne de tableau), ils restent au bord et ne barrent jamais le texte. */
  --cha-graduations:
    repeating-linear-gradient(90deg, var(--cha-graduation) 0 1px, transparent 1px 6px) 0 0 / 100% min(22%, 4px) no-repeat,
    repeating-linear-gradient(90deg, var(--cha-graduation) 0 1px, transparent 1px 30px) 0 0 / 100% min(42%, 8px) no-repeat,
    repeating-linear-gradient(90deg, var(--cha-graduation) 0 2px, transparent 2px 60px) 0 0 / 100% min(62%, 12px) no-repeat;

  /* La maille jersey : des V en filigrane, pour les fonds de laine. */
  --cha-tricot:
    linear-gradient(60deg, transparent 42%, var(--cha-maille) 42% 58%, transparent 58%) 0 0 / 12px 16px,
    linear-gradient(-60deg, transparent 42%, var(--cha-maille) 42% 58%, transparent 58%) 6px 0 / 12px 16px;

  /* Le plaid : deux trames croisees, rouge et vert, sur la laine. */
  --cha-plaid:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cha-braise) 55%, transparent) 0 14px, transparent 14px 22px,
      color-mix(in srgb, var(--cha-sapin) 45%, transparent) 22px 26px, transparent 26px 44px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--cha-braise) 45%, transparent) 0 14px, transparent 14px 22px,
      color-mix(in srgb, var(--cha-sapin) 40%, transparent) 22px 26px, transparent 26px 44px),
    var(--cha-laine);

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

.mai__lib-cha-page > main { flex: 1 0 auto; }

/* Poids minimal (:where) : une brique qui colore ses titres ou ses liens gagne toujours,
   quel que soit l'ordre d'emission des partielles (alphabetique, donc pas de notre cote). */
:where(.mai__lib-cha-page) :where(h1, h2, h3) {
  font-family: var(--font-heading);
  text-wrap: balance;
}

:where(.mai__lib-cha-page) a { color: var(--cha-lien); }

/* Le cadrage d'une photo passe par un attribut, jamais par un style en ligne. */
.mai__lib-cha-page [data-cadrage="haut"] { object-position: 50% 15%; }
.mai__lib-cha-page [data-cadrage="bas"] { object-position: 50% 85%; }
.mai__lib-cha-page [data-cadrage="gauche"] { object-position: 15% 50%; }
.mai__lib-cha-page [data-cadrage="droite"] { object-position: 85% 50%; }

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

@media print {
  .mai__lib-cha-page { display: block; min-height: 0; background: none; }
}

/* lib-cha-photo — une photo dans un cadre surpique : un passe-partout de laine, une
   surpiqure en pointilles a l'interieur, la legende et le credit dessous. */

.mai__lib-cha-photo {
  margin: 0;
  padding: 10px 10px .7rem;
  border-radius: 3px;
  background: var(--cha-neige);
  box-shadow: 0 14px 26px -16px var(--cha-ombre), 0 0 0 1px color-mix(in srgb, var(--cha-graduation) 12%, transparent);
}

.mai__lib-cha-photo__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  outline: 1.5px dashed color-mix(in srgb, var(--cha-neige) 85%, transparent);
  outline-offset: -8px;
}

.mai__lib-cha-photo[data-format="carre"] .mai__lib-cha-photo__image { aspect-ratio: 1; }
.mai__lib-cha-photo[data-format="portrait"] .mai__lib-cha-photo__image { aspect-ratio: 4 / 5; }
.mai__lib-cha-photo[data-format="paysage"] .mai__lib-cha-photo__image { aspect-ratio: 3 / 2; }

.mai__lib-cha-photo__legende {
  margin-top: .6rem;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--color-text);
}

.mai__lib-cha-photo__credit {
  display: block;
  margin-top: .2rem;
  font-size: .7rem;
  color: var(--color-text-muted);
}

.mai__lib-cha-photo__credit a { color: inherit; }

.mai__lib-cha-photo__credit:empty { display: none; }

@media print {
  .mai__lib-cha-photo { box-shadow: none; }
}

/* lib-cha-pied — le pied du chalet.

   Au-dessus des planches sombres, une rangee de sapins (deux rangs de triangles en
   conic-gradient, decales, pour la profondeur) plantes dans une congere : un ruban de
   neige dont les deux bords ondulent (radial-gradient). Aucune image, aucun texte
   d'ornement : tout lit --cha-sapin, --cha-neige et --cha-bois. */

.mai__lib-cha-pied {
  --cha-lien: var(--cha-sur-bois);
  position: relative;
  margin-top: 64px;
  padding: calc(var(--cha-pas) * .8) var(--cha-gouttiere) 1.4rem;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--cha-graduation) 40%, transparent) 0 2px, transparent 2px 58px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cha-sur-bois) 4%, transparent) 0 1px, transparent 1px 13px),
    var(--cha-bois);
  color: var(--cha-sur-bois);
}

.mai__lib-cha-pied::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 58px;
  background:
    conic-gradient(from 152deg at 50% 0, var(--cha-sapin) 56deg, transparent 0) 0 100% / 44px 58px repeat-x,
    conic-gradient(from 150deg at 50% 0, color-mix(in srgb, var(--cha-sapin) 70%, var(--cha-neige)) 60deg, transparent 0) 22px 100% / 30px 38px repeat-x;
  pointer-events: none;
}

.mai__lib-cha-pied::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 30px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 100%, var(--cha-neige) 0 96%, transparent 100%) 0 0 / 74px 10px repeat-x,
    linear-gradient(var(--cha-neige), var(--cha-neige)) 0 10px / 100% 10px no-repeat,
    radial-gradient(ellipse 55% 100% at 50% 0, var(--cha-neige) 0 96%, transparent 100%) 20px 20px / 96px 10px repeat-x;
  pointer-events: none;
}

.mai__lib-cha-pied__interieur {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 2rem clamp(2rem, 1rem + 4vw, 5rem);
  max-width: var(--cha-large);
  margin: 0 auto;
}

.mai__lib-cha-pied__nom {
  display: inline-block;
  margin: 0 0 .8rem;
  padding: .3rem .9rem;
  background: var(--cha-braise);
  color: var(--cha-sur-braise);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  border-radius: 2px;
  outline: 1px dashed color-mix(in srgb, var(--cha-sur-braise) 70%, transparent);
  outline-offset: -5px;
}

.mai__lib-cha-pied__description {
  margin: 0 0 1.2rem;
  max-width: 34ch;
  line-height: 1.6;
}

.mai__lib-cha-pied__action { margin: 0; }

.mai__lib-cha-pied__action:empty { display: none; }

.mai__lib-cha-pied__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1.6rem 2rem;
}

.mai__lib-cha-pied__titre {
  margin: 0 0 .7rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .88;
}

.mai__lib-cha-pied__liens {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mai__lib-cha-pied__liens a {
  color: var(--cha-sur-bois);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--cha-sur-bois) 35%, transparent);
}

.mai__lib-cha-pied__liens a:hover,
.mai__lib-cha-pied__liens a:focus-visible { border-bottom-style: solid; border-bottom-color: currentColor; }

.mai__lib-cha-pied__mentions {
  max-width: var(--cha-large);
  margin: 2.4rem auto 0;
  padding-top: 1rem;
  border-top: 1px dashed color-mix(in srgb, var(--cha-sur-bois) 30%, transparent);
  font-size: .8rem;
  line-height: 1.55;
  opacity: .9;
}

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

@media print {
  .mai__lib-cha-pied { display: none; }
}

/* lib-cha-portrait — la persona dans un cadre de bois rond.

   L'avatar est une illustration generee : un cadre de bois clair veine, une surpiqure,
   pas de photo de personne. Le texte se range a cote, sous le cadre sur un ecran etroit. */

.mai__lib-cha-portrait {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.2rem 1.8rem;
}

.mai__lib-cha-portrait__avatar {
  display: block;
  width: clamp(7rem, 5rem + 6vw, 9.5rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 9px;
  background:
    repeating-conic-gradient(from 10deg, color-mix(in srgb, var(--cha-bois) 16%, transparent) 0 4deg, transparent 4deg 13deg),
    var(--cha-bois-clair);
  box-shadow: 0 12px 22px -12px var(--cha-ombre), inset 0 0 0 1px color-mix(in srgb, var(--cha-bois) 45%, transparent);
}

.mai__lib-cha-portrait__nom {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
}

.mai__lib-cha-portrait__role {
  margin: .1rem 0 .6rem;
  color: var(--cha-lien);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mai__lib-cha-portrait__role:empty { display: none; }

.mai__lib-cha-portrait__bio {
  margin: 0;
  max-width: 58ch;
  line-height: 1.65;
  text-wrap: pretty;
}

@media (max-width: 34rem) {
  .mai__lib-cha-portrait { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* lib-cha-poutres — la mosaique entre les poutres.

   Le conteneur EST la charpente : un aplat de bois clair veine, visible dans les
   gouttieres de la grille. Chaque tuile est une photo, une legende posee sur un voile de
   bois sombre (le texte y garde son contraste quelle que soit la photo), et un lien qui
   s'etire sur toute la tuile. data-format="trio" : la premiere tuile en grand, les deux
   autres empilees a cote. */

.mai__lib-cha-poutres {
  --poutre: clamp(8px, .5rem + .3vw, 12px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--poutre);
  margin: 0;
  padding: var(--poutre);
  list-style: none;
  border-radius: var(--cha-rayon);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cha-bois) 14%, transparent) 0 1px, transparent 1px 7px),
    linear-gradient(color-mix(in srgb, var(--cha-bois) 22%, transparent), transparent 40%),
    var(--cha-bois-clair);
  box-shadow: 0 14px 26px -18px var(--cha-ombre), inset 0 0 0 1px color-mix(in srgb, var(--cha-bois) 40%, transparent);
}

.mai__lib-cha-poutres[data-format="trio"] {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.mai__lib-cha-poutres[data-format="trio"] > :first-child { grid-row: span 2; }

.mai__lib-cha-poutres__tuile {
  position: relative;
  display: flex;
  min-height: clamp(13rem, 10rem + 8vw, 17rem);
  overflow: hidden;
  border-radius: 2px;
  background: var(--cha-bois);
  isolation: isolate;
}

.mai__lib-cha-poutres__image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.mai__lib-cha-poutres__tuile:hover .mai__lib-cha-poutres__image,
.mai__lib-cha-poutres__tuile:focus-within .mai__lib-cha-poutres__image { transform: scale(1.04); }

.mai__lib-cha-poutres__legende {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .25rem;
  width: 100%;
  margin-top: auto;
  padding: 3.2rem 1.1rem 1rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--cha-bois) 94%, transparent) 0 45%,
              color-mix(in srgb, var(--cha-bois) 70%, transparent) 70%, transparent);
  color: var(--cha-sur-bois);
}

.mai__lib-cha-poutres__rubrique {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .92;
}

.mai__lib-cha-poutres__rubrique:empty,
.mai__lib-cha-poutres__texte:empty { display: none; }

.mai__lib-cha-poutres__lien {
  color: var(--cha-sur-bois);
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.mai__lib-cha-poutres__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mai__lib-cha-poutres__lien:focus-visible { outline: 2px solid var(--cha-sur-bois); outline-offset: 3px; }

.mai__lib-cha-poutres__tuile:hover .mai__lib-cha-poutres__lien { text-decoration: underline; text-underline-offset: .18em; }

.mai__lib-cha-poutres__texte {
  font-size: .9rem;
  line-height: 1.45;
}

/* Le credit reste cliquable au-dessus du lien etire. */
.mai__lib-cha-poutres__credit {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 2;
  max-width: calc(100% - .9rem);
  padding: .1rem .4rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--cha-bois) 82%, transparent);
  color: var(--cha-sur-bois);
  font-size: .64rem;
  line-height: 1.35;
}

.mai__lib-cha-poutres__credit a { color: inherit; }

.mai__lib-cha-poutres__credit:empty { display: none; }

@media (max-width: 40rem) {
  .mai__lib-cha-poutres[data-format="trio"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .mai__lib-cha-poutres[data-format="trio"] > :first-child { grid-row: auto; }
}

@media print {
  .mai__lib-cha-poutres { background: none; box-shadow: none; }
}

/* lib-cha-titre — l'entree d'une section : l'etiquette cousue, le titre, une phrase.
   Sous le titre, un bout de metre ruban tient lieu de filet. */

.mai__lib-cha-titre { max-width: 62ch; }

.mai__lib-cha-titre__etiquette {
  display: inline-block;
  margin: 0 0 .8rem;
  padding: .22rem .75rem;
  background: var(--cha-braise);
  color: var(--cha-sur-braise);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
  outline: 1px dashed color-mix(in srgb, var(--cha-sur-braise) 70%, transparent);
  outline-offset: -4px;
}

.mai__lib-cha-titre__etiquette:empty { display: none; }

.mai__lib-cha-titre__titre {
  margin: 0;
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.mai__lib-cha-titre__titre::after {
  content: "";
  display: block;
  width: 6rem;
  height: 11px;
  margin-top: .8rem;
  background: var(--cha-graduations), var(--cha-ruban);
  box-shadow: 0 1px 2px var(--cha-ombre);
}

.mai__lib-cha-titre__intro {
  margin: .9rem 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 80%, var(--cha-laine));
  text-wrap: pretty;
}

.mai__lib-cha-titre__intro:empty { display: none; }

.mai__lib-cha-bande[data-fond="bois"] .mai__lib-cha-titre__intro { color: var(--cha-sur-bois); opacity: .9; }

/* lib-comparatif — le tableau qui fait decider, et sa forme etroite.

   Porte aussi les classes de lib-comparatif-ligne : une sous-brique n'a pas de feuille.

   ─── CE QUE J'AI CHANGE PAR RAPPORT A LA NOTE DE LA BRIQUE ────────────────────────────
   La note annoncait, en forme etroite, « une carte par produit, l'ordre des lignes
   identique d'une carte a l'autre ». J'ai fait l'inverse — une carte par CRITERE — et la
   raison vaut d'etre ecrite, parce qu'elle contredit ce que je croyais en ecrivant la note.

   Une carte par produit oblige a MEMORISER : pour savoir si A est lavable et B ne l'est
   pas, il faut lire la valeur dans la carte A, faire defiler, et la comparer de tete a
   celle de la carte B. C'est exactement l'acte que le lecteur est venu eviter. Une carte
   par critere pose les trois ou quatre valeurs cote a cote, sous la consequence qui les
   departage : la comparaison est faite a l'ecran, pas dans sa tete. Et c'est en prime
   l'ordre naturel du DOM — un <tr> EST un critere — donc aucune transposition, aucune
   grille acrobatique, aucun markup en double.

   ─── LE CONTRAT DE BUILD ──────────────────────────────────────────────────────────────
   Chaque <td> du corps DOIT porter data-produit="<nom de la colonne>". C'est
   ce qui remplace l'en-tete de colonne quand la grille disparait. Sans lui, la forme
   etroite rend une liste de valeurs sans savoir de qui on parle.

   ─── POURQUOI LES role= SONT DANS LE HTML ─────────────────────────────────────────────
   display:block sur les elements d'un tableau EFFACE ses roles implicites : le lecteur
   d'ecran cesse d'annoncer « ligne 3 sur 8, colonne Modele B ». Les role="table" / "row" /
   "rowheader" / "cell" poses en dur dans la brique sont redondants en mode tableau et
   PORTEURS en mode carte. C'est la contrepartie obligatoire de la bascule d'affichage.

   ─── border-collapse: separate, ET C'EST UN CHOIX ─────────────────────────────────────
   La colonne de criteres est collante pendant le defilement horizontal — sans elle on perd
   la ligne qu'on lit des la troisieme colonne. Or position:sticky sur une cellule d'un
   tableau en border-collapse:collapse fait disparaitre les bordures dans plusieurs
   moteurs. On separe donc, et les traits sont portes par les cellules. */

.mai__lib-comparatif {
  scroll-margin-top: var(--btq-ancrage, 5rem);
  margin: 0 0 var(--btq-pas, 2.5rem);
}

/* Le debordement est enferme ICI. La page, elle, ne defile jamais lateralement. */
.mai__lib-comparatif__defilement {
  overflow-x: auto;
  border: 1px solid var(--btq-trait, var(--color-border, #e2e2e2));
  border-radius: var(--btq-rayon, var(--radius-card, 10px));
  background: var(--color-bg, #fff);
}

.mai__lib-comparatif__defilement:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
}

.mai__lib-comparatif__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .92rem;
  line-height: 1.55;
}

/* La legende nomme le tableau. Elle est aussi la cible de aria-labelledby : on ne la
   masque pas, on l'assume comme titre. */
.mai__lib-comparatif__legende {
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--btq-trait, var(--color-border, #e2e2e2));
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  color: var(--color-text, #222);
  text-wrap: balance;
}

.mai__lib-comparatif__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .7rem 1rem;
  background: var(--btq-surface, var(--color-surface, #fafafa));
  border-bottom: 2px solid var(--btq-action, var(--color-primary, #1a1a1a));
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-text, #222);
}

/* Le critere ne se perd pas pendant le defilement horizontal. */
.mai__lib-comparatif__critere {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 11rem;
  max-width: 16rem;
  padding: .75rem 1rem;
  background: var(--color-bg, #fff);
  border-right: 1px solid var(--btq-trait, var(--color-border, #e2e2e2));
  border-bottom: 1px solid var(--btq-trait, var(--color-border, #e2e2e2));
  font-weight: 700;
  text-align: left;
  vertical-align: top;
  color: var(--color-text, #222);
  text-wrap: pretty;
}

.mai__lib-comparatif__table thead th:first-child {
  left: 0;
  z-index: 3;
}

/* La consequence : ce que l'ecart CHANGE. C'est elle qui decide, la valeur ne fait que
   la justifier — d'ou sa place sous le critere, en permanence, et pas en note. */
.mai__lib-comparatif__consequence {
  display: block;
  margin-top: .22rem;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted, #666);
  text-wrap: pretty;
}

.mai__lib-comparatif__consequence:empty { display: none; }

.mai__lib-comparatif__table tbody td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--btq-trait, var(--color-border, #e2e2e2));
  vertical-align: top;
  color: var(--color-text, #222);
  text-wrap: pretty;
}

.mai__lib-comparatif__table tbody tr:last-child > * { border-bottom: 0; }

.mai__lib-comparatif__table a {
  color: var(--btq-action, var(--color-primary, #1a1a1a));
  font-weight: 600;
  text-underline-offset: .18em;
}

.mai__lib-comparatif__table a:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── LA FORME ETROITE ───────────────────────────────────────────────────────────────
   Un tableau qui se decale lateralement empeche precisement ce pour quoi on vient : voir
   deux valeurs cote a cote. En dessous du seuil, la grille est abandonnee au profit d'une
   pile de cartes — une par critere, l'ordre des valeurs identique d'une carte a l'autre.
   Les en-tetes de colonne quittent le <thead> et reapparaissent devant chaque valeur. */
@media (max-width: 48rem) {
  .mai__lib-comparatif__defilement {
    overflow-x: visible;
    border: 0;
    background: none;
  }

  .mai__lib-comparatif__table,
  .mai__lib-comparatif__table thead,
  .mai__lib-comparatif__table tbody,
  .mai__lib-comparatif__table tr,
  .mai__lib-comparatif__table th,
  .mai__lib-comparatif__table td {
    display: block;
  }

  /* Les en-tetes de colonne sont repris un a un par ::before : le <thead> n'a plus
     d'office. clip au lieu de display:none — il reste dans l'arbre d'accessibilite. */
  .mai__lib-comparatif__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mai__lib-comparatif__legende {
    padding: 0 0 .8rem;
    border-bottom: 0;
  }

  .mai__lib-comparatif__ligne {
    margin-bottom: .9rem;
    border: 1px solid var(--btq-trait, var(--color-border, #e2e2e2));
    border-radius: var(--btq-rayon, var(--radius-card, 10px));
    background: var(--color-bg, #fff);
    overflow: hidden;
  }

  .mai__lib-comparatif__critere {
    position: static;
    max-width: none;
    padding: .8rem 1rem;
    background: var(--btq-surface, var(--color-surface, #fafafa));
    border-right: 0;
    border-bottom: 1px solid var(--btq-trait, var(--color-border, #e2e2e2));
  }

  .mai__lib-comparatif__table tbody td {
    display: grid;
    grid-template-columns: minmax(6rem, 38%) 1fr;
    gap: .2rem .8rem;
    padding: .55rem 1rem;
    font-size: .9rem;
  }

  /* Le nom de la colonne, pose par le build sur chaque cellule. Sans lui, la carte rend
     des valeurs sans dire de qui elles parlent. */
  .mai__lib-comparatif__table tbody td::before {
    content: attr(data-produit);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.5;
    color: var(--color-text-muted, #666);
    text-wrap: pretty;
  }

  .mai__lib-comparatif__table tbody tr:last-child > * {
    border-bottom: 1px solid var(--btq-trait, var(--color-border, #e2e2e2));
  }

  .mai__lib-comparatif__table tbody td:last-child { border-bottom: 0; }
}

/* lib-faq — les questions qu'on pose vraiment.
 *
 * LE REPLI EST NATIF. <details> se replie sans une ligne de JavaScript, reste indexable
 * ferme, et s'ouvre tout seul quand le navigateur cherche du texte dans la page — ce
 * qu'un repli en JavaScript casse presque toujours.
 *
 * PAS DE BALISAGE FAQPage SUR CETTE BRIQUE. Son resultat enrichi a ete retire de Search
 * le 2026-05-07 ; le poser ne produirait plus rien, et ajouterait du balisage a
 * maintenir pour un affichage qui n'existe plus. La brique sert le lecteur, c'est tout,
 * et c'est deja une raison suffisante.
 *
 * LE MARQUEUR DE REPLI EST DESSINE, pas herite : le triangle par defaut change de forme
 * d'un navigateur a l'autre et s'aligne mal sur une question de deux lignes. */

.mai__lib-faq {
  margin: 2rem 0;
}

.mai__lib-faq__titre {
  margin: 0 0 .9rem;
  font-family: var(--btq-police-titre, var(--font-heading, Georgia, serif));
  font-size: 1.22rem;
  color: var(--btq-texte, var(--color-text, #23201c));
}

.mai__lib-faq__liste {
  display: grid;
  gap: .1rem;
}

.mai__lib-faq__item {
  border-bottom: 1px solid var(--btq-filet, var(--color-border, #d7d2c8));
}

.mai__lib-faq__item:first-child {
  border-top: 1px solid var(--btq-filet, var(--color-border, #d7d2c8));
}

.mai__lib-faq__question {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  padding: .85rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--btq-police-texte, var(--font-body, system-ui, sans-serif));
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--btq-texte, var(--color-text, #23201c));
}

.mai__lib-faq__question::-webkit-details-marker {
  display: none;
}

.mai__lib-faq__question::before {
  content: "";
  flex: 0 0 auto;
  width: .45rem;
  height: .45rem;
  margin-top: .35rem;
  border-right: 2px solid var(--btq-accent, var(--color-primary, #b4682a));
  border-bottom: 2px solid var(--btq-accent, var(--color-primary, #b4682a));
  transform: rotate(-45deg);
  transition: transform .15s ease;
}

.mai__lib-faq__item[open] .mai__lib-faq__question::before {
  transform: rotate(45deg);
}

.mai__lib-faq__question:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
}

.mai__lib-faq__reponse {
  padding: 0 0 1rem 1.1rem;
  font-family: var(--btq-police-texte, var(--font-body, system-ui, sans-serif));
  font-size: .93rem;
  line-height: 1.62;
  color: var(--btq-texte, var(--color-text, #23201c));
}

.mai__lib-faq__reponse p {
  margin: 0 0 .7rem;
}

@media (prefers-reduced-motion: reduce) {
  .mai__lib-faq__question::before {
    transition: none;
  }
}

/* lib-figure — une image, sa legende, son credit. Habille aussi lib-figure-lcp.

   LA BOITE EST RESERVEE PAR L'IMAGE ELLE-MEME. width et height sont poses par l'etape 3c
   du build, relevés sur le fichier servi ; `height: auto` laisse alors le navigateur
   deduire l'aspect-ratio de ces deux attributs et garder la place avant meme le premier
   octet de pixel. C'est ce couple — attributs justes + height:auto — qui supprime le saut,
   pas l'un des deux seul. Une `aspect-ratio` ecrite ici casserait au contraire les images
   qui n'ont pas le format prevu.

   LA LEGENDE N'EST PAS UNE REDITE DE L'ALT. L'alt s'adresse a qui ne voit pas l'image, la
   legende a qui la voit : si les deux disent la meme chose, l'une des deux est inutile.
   Le CSS ne peut pas verifier ca — il peut seulement faire disparaitre proprement la
   legende absente, pour qu'une figure sans commentaire ne laisse pas un blanc. */

.mai__lib-figure {
  margin: 1.8rem 0;
}

.mai__lib-figure__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fig-rayon, var(--radius-card, 10px));
  /* Un fond sous l'image : pendant le chargement, la boite reservee est une surface et
     non un trou blanc au milieu du texte. */
  background: var(--color-surface, #f2f2f2);
}

.mai__lib-figure__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .6rem;
  margin-top: .55rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--color-text-muted, #666);
  text-wrap: pretty;
}

/* Une legende vide ne laisse pas d'espace. Le :has() couvre le cas ou seul le credit est
   vide ; sans lui, la marge du bloc subsiste alors qu'il n'y a rien a lire. */
.mai__lib-figure__legende:empty { display: none; }

.mai__lib-figure__credit {
  font-size: .76rem;
  opacity: .85;
}

.mai__lib-figure__credit:empty { display: none; }

.mai__lib-figure__legende a {
  color: inherit;
  text-underline-offset: .18em;
}

.mai__lib-figure__legende a:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
  border-radius: 2px;
}

/* lib-fil — le fil d'Ariane.
 *
 * LE DERNIER MAILLON NE SE SOULIGNE PAS et ne change pas au survol : il ne mene nulle
 * part. Le distinguer par la seule couleur ne suffirait pas — un daltonien verrait
 * quatre liens identiques. Il perd donc le soulignement ET gagne du gras.
 *
 * LE SEPARATEUR EST UN ::after, jamais un caractere du HTML : un « > » ecrit dans le
 * texte est annonce par un lecteur d'ecran a chaque cran, et il repart dans le
 * presse-papier quand on copie le fil.
 *
 * LE FIL DEFILE PLUTOT QU'IL NE SE CASSE. Sur un telephone, un chemin a quatre crans ne
 * tient pas en largeur. Le passer a la ligne empile des fragments illisibles ; le faire
 * defiler garde la lecture lineaire, et le debut reste visible — c'est lui qui porte la
 * remontee, la fin etant la page ou l'on est deja. */

.mai__lib-fil {
  margin: 0 0 1.1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.mai__lib-fil::-webkit-scrollbar {
  display: none;
}

.mai__lib-fil__liste {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  font-family: var(--btq-police-texte, var(--font-body, system-ui, sans-serif));
  font-size: .78rem;
  line-height: 1.5;
}

.mai__lib-fil__maillon {
  display: inline-flex;
  align-items: baseline;
}

.mai__lib-fil__maillon:not(:last-child)::after {
  content: "";
  width: .42rem;
  height: .42rem;
  margin: 0 .5rem;
  border-right: 1px solid var(--btq-filet, var(--color-border, #d7d2c8));
  border-bottom: 1px solid var(--btq-filet, var(--color-border, #d7d2c8));
  transform: rotate(-45deg);
  flex: 0 0 auto;
}

.mai__lib-fil__lien {
  color: var(--btq-texte-doux, var(--color-text-muted, #6f6a62));
  text-decoration: underline;
  text-underline-offset: .16em;
  text-decoration-thickness: 1px;
}

.mai__lib-fil__lien:hover {
  color: var(--btq-accent, var(--color-primary, #b4682a));
}

.mai__lib-fil__lien:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
  border-radius: 2px;
}

/* La page courante : ni lien, ni cible. */
.mai__lib-fil__lien[aria-current="page"] {
  color: var(--btq-texte, var(--color-text, #23201c));
  font-weight: 600;
  text-decoration: none;
  pointer-events: 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. */

.mai__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;
}

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

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

.mai__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;
}

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

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

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

.mai__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);
}

.mai__lib-forum-formulaire__chapo,
.mai__lib-forum-formulaire__aide,
.mai__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);
}

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

.mai__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));
}

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

.mai__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. */
.mai__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;
}

.mai__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. */
.mai__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);
}

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

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

.mai__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;
}

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

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

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

.mai__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. */

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

.mai__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;
}

.mai__lib-forum-categorie__table,
.mai__lib-sujets,
.mai__lib-membres,
.mai__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);
}

.mai__lib-forum-categorie__th,
.mai__lib-sujets__th,
.mai__lib-membres__th,
.mai__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;
}

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

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

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

.mai__lib-forum-ligne__sujet,
.mai__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. */
.mai__lib-forum-ligne__icone,
.mai__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));
}

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

.mai__lib-forum-ligne__nom,
.mai__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;
}

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

.mai__lib-forum-ligne__promesse,
.mai__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. */
.mai__lib-forum-ligne__n,
.mai__lib-sujet-ligne__n,
.mai__lib-membre-ligne__n {
  padding: .75rem .9rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #23201c);
  white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

  .mai__lib-forum-ligne,
  .mai__lib-sujet-ligne,
  .mai__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. */
  .mai__lib-forum-ligne__n,
  .mai__lib-sujet-ligne__n,
  .mai__lib-membre-ligne__n {
    display: inline-block;
    padding-right: 0;
    font-size: .8rem;
    color: var(--color-text-muted, #6f6a62);
  }

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

  .mai__lib-forum-ligne__dernier,
  .mai__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. */

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

.mai__lib-forum-entete__inner,
.mai__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);
}

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

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

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

.mai__lib-forum-entete__liens,
.mai__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;
}

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

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

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

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

.mai__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);
}

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

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

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

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

.mai__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));
}

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

.mai__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);
}

.mai__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);
}

.mai__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);
}

.mai__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;
}

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

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

.mai__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. */

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

.mai__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));
}

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

.mai__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);
}

.mai__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);
}

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

.mai__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);
}

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

.mai__lib-forum-stats,
.mai__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));
}

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

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

.mai__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. */
.mai__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));
}

.mai__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);
}

.mai__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);
}

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

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

.mai__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);
}

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

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

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

.mai__lib-pagination-page__lien,
.mai__lib-pagination-page__courante,
.mai__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;
}

.mai__lib-pagination-page__lien:hover,
.mai__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. */
.mai__lib-pagination-page__courante { display: none; }

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

.mai__lib-pagination-page:has(.mai__lib-pagination-page__lien[href=""]) .mai__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(*)) {
  .mai__lib-pagination-page__lien[href=""] { display: none; }
  .mai__lib-pagination-page__courante { display: inline-flex; font-weight: 700; }
}

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

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

.mai__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;
}

.mai__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;
}

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

.mai__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));
}

.mai__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);
}

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

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

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

.mai__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);
}

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

.mai__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;
}

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

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

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

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

.mai__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. */
.mai__lib-sujets__epingles .mai__lib-sujet-ligne {
  background: color-mix(in srgb,
              var(--frm-icone, var(--color-primary, #2d4a6b)) 5%, transparent);
}

.mai__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. */
.mai__lib-forum-ariane {
  margin: 0 0 1rem;
}

.mai__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);
}

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

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

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

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

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

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

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

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

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

.mai__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;
}

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

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

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

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

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

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

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

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

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

.mai__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));
}

.mai__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);
}

.mai__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;
}

.mai__lib-forum-saut .mai__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. */
.mai__lib-message__pastilles {
  letter-spacing: .12em;
  font-size: .62rem;
  color: var(--frm-icone, var(--color-primary, #2d4a6b));
}

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

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

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

/* lib-fraicheur — « mis a jour le », visible.

   PETITE MAIS PAS DISCRETE. Sur une requete d'achat, la fraicheur est l'un des rares
   departages disponibles quand deux pages disent la meme chose. Elle se pose donc en tete
   d'article, a hauteur de la signature, et la date elle-meme porte plus de poids que son
   intitule — c'est la date que l'oeil cherche, pas le mot « mis ».

   Mesure du 2026-09-11 : 43 des 47 sites du parc n'ont aucun article portant une date de
   revision. Cette brique n'a d'interet que si la donnee suit ; le CSS ne peut pas
   l'inventer. */

.mai__lib-fraicheur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
  margin: 0 0 1.2rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--color-text-muted, #666);
}

.mai__lib-fraicheur__date {
  font-weight: 700;
  color: var(--color-text, #222);
  font-variant-numeric: tabular-nums;
}

.mai__lib-fraicheur:empty { display: none; }

/* lib-limites — ce que la page NE SAIT PAS.

   AUCUNE REGLE :empty ICI, ET C'EST DELIBERE. Partout ailleurs dans cette bibliotheque, un
   emplacement vide se retire tout seul. Si on donnait ce contrat a l'aveu de ce qui n'a pas
   ete examine, il deviendrait le seul bloc de la page supprimable en silence — alors que
   les briques commerciales, elles, ne le sont pas. Un champ vide DOIT donc se voir, en
   relecture comme au build.

   ELLE NE RESSEMBLE PAS A UN AVERTISSEMENT. Un encadre rouge se lit comme un defaut du
   produit et se saute comme un bandeau de cookies. Celui-ci a la forme d'une note de bas de
   travail : trait lateral, fond neutre, texte plein. Ce n'est pas une alerte, c'est la
   methode — et la methode est la seule chose qui rende le reste verifiable. */

.mai__lib-limites {
  margin: var(--btq-pas, 2.5rem) 0;
  padding: 1.2rem 1.4rem;
  border-left: 4px solid var(--btq-alerte, var(--color-secondary, var(--color-primary, #1a1a1a)));
  border-radius: 0 var(--btq-rayon, var(--radius-card, 10px))
                 var(--btq-rayon, var(--radius-card, 10px)) 0;
  background: var(--btq-surface, var(--color-surface, #fafafa));
}

.mai__lib-limites__titre {
  margin: 0 0 .7rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--color-text, #222);
}

.mai__lib-limites__examine,
.mai__lib-limites__non {
  margin: 0 0 .6rem;
  max-width: 62ch;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .93rem;
  line-height: 1.65;
  color: var(--color-text, #222);
  text-wrap: pretty;
}

.mai__lib-limites__non strong { font-weight: 700; }

.mai__lib-limites__date {
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--color-text-muted, #666);
}

/* 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. */

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

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

.mai__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);
}

.mai__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;
}

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

.mai__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);
}

.mai__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;
}

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

.mai__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);
}

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

.mai__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);
}

.mai__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. */

.mai__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);
}

.mai__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);
}

.mai__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;
}

.mai__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;
}

.mai__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. */
.mai__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);
}

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

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

.mai__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);
}

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

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

.mai__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;
}

.mai__lib-message__texte > :first-child { margin-top: 0; }
.mai__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. */
.mai__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);
}

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

.mai__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));
}

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

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

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

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

  .mai__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;
  }

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

  .mai__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. */

.mai__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. */
.mai__lib-mise-en-avant__propos {
  min-width: 0;
}

.mai__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. */
.mai__lib-mise-en-avant__surtitre::after {
  content: "";
  flex: 1 1 auto;
  max-width: 3.5rem;
  height: 1px;
  background: var(--accent-trait);
}

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

.mai__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;
}

.mai__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;
}

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

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

.mai__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. */
.mai__lib-mise-en-avant__lien::after {
  content: "\2192";
  transition: transform .18s ease;
}

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

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

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

/* --- le panneau : une matiere, pas une image ------------------------------------ */
.mai__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);
}

.mai__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);
}

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

.mai__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. */
.mai__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);
}

.mai__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. */

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

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

.mai__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;
}

.mai__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;
}

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

.mai__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);
}

.mai__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. */
.mai__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;
}

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

.mai__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. */
.mai__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);
}

.mai__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;
}

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

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

.mai__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));
}

.mai__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. */
.mai__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;
}

.mai__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;
}

.mai__lib-plan-site__lien:hover,
.mai__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. */
.mai__lib-plan-site__promesse {
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

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

.mai__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;
}

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

.mai__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 {
  .mai__lib-plan-site__familles { grid-template-columns: 1fr; }
  .mai__lib-plan-site__famille { break-inside: avoid; }
  .mai__lib-plan-site__famille-titre { border-bottom-color: #999; }
}

/* 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. */

.mai__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;
}

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

.mai__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. */
.mai__lib-prose > p:first-of-type {
  font-size: 1.14rem;
  line-height: 1.68;
  color: var(--color-text);
}

/* --- titres --------------------------------------------------------------------- */
.mai__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. */
.mai__lib-prose h2::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 2.6rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
}

.mai__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);
}

.mai__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 --------------------------------------------------------------------- */
.mai__lib-prose ul,
.mai__lib-prose ol {
  margin: 0 0 1.35em;
  padding-left: 1.4em;
}

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

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

/* --- liens ----------------------------------------------------------------------- */
.mai__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;
}

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

.mai__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. */
.mai__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);
}

.mai__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;
}

.mai__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. */
.mai__lib-prose figure:has(> blockquote) {
  margin: 2em 0;
  padding: 0;
}

.mai__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. */
.mai__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. */
.mai__lib-prose figure > blockquote + figcaption::before {
  content: "\2014";
  color: var(--color-primary);
  opacity: .7;
}

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

.mai__lib-prose figcaption a:hover,
.mai__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. */
.mai__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);
}

.mai__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;
}

.mai__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. */
.mai__lib-prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 1.7em 0;
  border-collapse: collapse;
  font-size: .95rem;
}

.mai__lib-prose th,
.mai__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. */
.mai__lib-prose thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg);
}

.mai__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. */
.mai__lib-prose tbody th,
.mai__lib-prose tbody td:first-child {
  font-weight: 700;
  color: var(--color-text);
}

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

.mai__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. */
.mai__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;
}

.mai__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. */
.mai__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. */
.mai__lib-prose dl {
  margin: 1.6em 0;
  display: grid;
  gap: .1em;
}

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

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

.mai__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. */
.mai__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;
}

.mai__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;
}

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

.mai__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;
}

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

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

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

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

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

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

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

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

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

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

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

.mai__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. */
.mai__lib-prose q {
  quotes: "\00ab\00a0" "\00a0\00bb" "\201c" "\201d";
  font-style: italic;
  color: var(--color-text);
}

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

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

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

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

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

/* lib-related — les 983 pages qui servaient ce bloc sans aucune regle CSS en ont une. */

.mai__lib-related {
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--color-surface-alt);
  border-radius: var(--radius-card);
}

.mai__lib-related__titre {
  margin: 0 0 .8rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-text);
}

/* Grille intrinseque : les liens se repartissent selon la place disponible, sans une
   seule media query. C'est la technique la plus generalisable du depot et elle n'avait
   jamais franchi la frontiere de POWERiti. min(100%, ...) est le garde-fou qui empeche
   le debordement quand le conteneur est plus etroit que la colonne demandee. */
.mai__lib-related__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .45rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mai__lib-related__liste li {
  padding-left: .9rem;
  position: relative;
  line-height: 1.5;
}

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

.mai__lib-related__liste a {
  color: var(--color-text);
  font-family: var(--font-body);
  text-decoration: none;
}

.mai__lib-related__liste a:hover,
.mai__lib-related__liste a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

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

/* 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. */

.mai__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);
}

.mai__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. */
.mai__lib-sommaire__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sommaire;
  display: grid;
  gap: .1rem;
}

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

.mai__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;
}

.mai__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;
}

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

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

.mai__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. */
.mai__lib-prose h2[id],
.mai__lib-prose h3[id] { scroll-margin-top: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  .mai__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. */

.mai__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));
}

.mai__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 ------------------------------------------- */
.mai__lib-sources__ordre {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: source;
  display: grid;
  gap: .1rem;
}

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

.mai__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. */
.mai__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;
}

.mai__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. */
.mai__lib-sources__hote {
  font-size: .78rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

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

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

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

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

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

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

.mai__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. */

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

.mai__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;
}

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

.mai__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;
}

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

/* Le debordement est enferme ICI. La page, elle, ne defile jamais lateralement. */
.mai__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;
}

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

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

.mai__lib-tableau__table th,
.mai__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. */
.mai__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. */
.mai__lib-tableau__table tbody th,
.mai__lib-tableau__table tbody td:first-child {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

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

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

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

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

.mai__lib-tableau__table a:hover,
.mai__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. */
.mai__lib-tableau__legende {
  margin: .8rem 0 0;
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

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

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

/* lib-tailles — SURCHARGE de la partielle de boutique : le tableau des tailles en metre
   ruban.

   Un ruban gradue ouvre le bloc ; la ligne d'en-tete du tableau est elle-meme un ruban ;
   la premiere colonne, ce qu'on mesure, se lit en gras. Le cas « entre deux tailles »
   reste le sujet : il est cousu en etiquette sous le tableau, la ou le lecteur arrive avec
   sa mesure en main. Le defilement horizontal est enferme dans l'enveloppe du tableau. */

.mai__lib-tailles {
  position: relative;
  scroll-margin-top: 1rem;
  margin: 0;
}

.mai__lib-tailles__ruban {
  position: relative;
  height: 18px;
  margin: 0 0 1.2rem;
  background: var(--cha-graduations), var(--cha-ruban);
  box-shadow: 0 2px 4px var(--cha-ombre);
  transform: rotate(-.4deg);
}

.mai__lib-tailles__ruban::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 12px;
  background: color-mix(in srgb, var(--cha-graduation) 35%, var(--cha-ruban));
}

.mai__lib-tailles__titre {
  margin: 0 0 .55rem;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
}

.mai__lib-tailles__comment {
  margin: 0 0 1.1rem;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.mai__lib-tailles__comment:empty { display: none; }

.mai__lib-tailles__defilement {
  overflow-x: auto;
  border-radius: var(--cha-rayon);
  background: var(--cha-neige);
  box-shadow: 0 12px 24px -18px var(--cha-ombre), 0 0 0 1px color-mix(in srgb, var(--cha-graduation) 14%, transparent);
}

.mai__lib-tailles__defilement:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.mai__lib-tailles__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .93rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.mai__lib-tailles__legende {
  caption-side: bottom;
  padding: .7rem 1rem .8rem;
  font-size: .78rem;
  line-height: 1.5;
  text-align: left;
  color: var(--color-text-muted);
}

.mai__lib-tailles__table thead th {
  padding: 1.2rem 1rem .6rem;
  background: var(--cha-graduations), var(--cha-ruban);
  color: var(--cha-graduation);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}

.mai__lib-tailles__table tbody th,
.mai__lib-tailles__table tbody td {
  padding: .75rem 1rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--cha-graduation) 18%, transparent);
  text-align: left;
  vertical-align: top;
}

.mai__lib-tailles__table tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--cha-laine) 70%, transparent); }

.mai__lib-tailles__table tbody th {
  font-family: var(--font-heading);
  font-weight: 700;
  min-width: 8.5rem;
}

.mai__lib-tailles__table tbody tr:last-child > * { border-bottom: 0; }

.mai__lib-tailles__entre-deux {
  position: relative;
  margin: 1.3rem 0 0;
  max-width: 62ch;
  padding: 1rem 1.2rem 1rem 1.5rem;
  border-radius: 2px;
  background: var(--cha-laine);
  outline: 1.5px dashed color-mix(in srgb, var(--cha-braise) 50%, transparent);
  outline-offset: -6px;
  font-size: .98rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.mai__lib-tailles__entre-deux::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--cha-braise);
}

.mai__lib-tailles__entre-deux:empty { display: none; }

@media print {
  .mai__lib-tailles__ruban { display: none; }
  .mai__lib-tailles__defilement { overflow: visible; box-shadow: none; }
  .mai__lib-tailles__table thead th { background: none; }
}

/* 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. */

.mai__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);
}

.mai__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);
}

.mai__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;
}

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

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

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

.mai__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. */
.mai__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);
}

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

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

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


/* Taille & Maille : feuille du site, servie apres les partielles des briques.
   Couche de Noel : theme chalet, variante mercerie. Cette feuille declare les polices
   auto-hebergees, redefinit l'echelle entiere du theme (--cha-*) sur la palette du site,
   puis ajuste les briques de contenu du socle et de la boutique (fil, prose, figure,
   limites, questions, sources). Les seules couleurs ecrites ici sont les tokens du chalet. */

/* --- Polices, servies par le site ------------------------------------------------------ */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/bitter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-400.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: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-700.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: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-400-i.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;
}

/* --- L'echelle du chalet, redefinie en entier sur la palette du site ------------------- */
.mai__lib-cha-page {
  --cha-bois: #4A3223;
  --cha-bois-clair: #B88A5E;
  --cha-sur-bois: var(--color-bg);
  --cha-laine: #F3EADA;
  --cha-braise: var(--color-primary);
  --cha-sur-braise: var(--color-sur-primary);
  --cha-sapin: var(--color-secondary);
  --cha-givre: #E7EEEC;
  --cha-neige: #FFFDF8;
  --cha-maille: color-mix(in srgb, var(--color-text) 6%, transparent);
  --cha-ruban: #E4B94F;
  --cha-graduation: var(--color-text);
  --cha-lien: var(--color-primary);
  --cha-ombre: color-mix(in srgb, #2A1A10 30%, transparent);
  --cha-jacquard: url("../img/motif-jacquard-etoile-sapin.svg");
  --cha-large: 76rem;
  --cha-etroit: 47rem;
  --cha-rayon: 3px;
  --btq-ancrage: 1rem;
  --fig-rayon: 1px;
}

/* --- Socle de page ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: 1rem; }

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

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

:where(a) { color: var(--color-primary); }

/* --- Fil d'Ariane, au-dessus du heros d'article ------------------------------------------ */
.mai__lib-fil {
  max-width: var(--cha-large);
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2.25rem) 0;
  font-size: .84rem;
}

.mai__lib-fil__lien[aria-current="page"] { pointer-events: none; color: var(--color-text-muted); }

/* Le fil de la boutique defile de cote dans sa boite ; ici il passe a la ligne, pour que
   le titre de l'article, dernier maillon, se lise en entier sur un telephone. */
.mai__lib-fil__liste { flex-wrap: wrap; row-gap: .2rem; white-space: normal; }

.mai__lib-fraicheur {
  margin: 0;
  font-size: .86rem;
  color: var(--color-text-muted);
}

/* --- Corps : titres gradues au metre ruban, tableaux lisibles ---------------------------- */
.mai__lib-prose h2::before {
  width: 4.5rem;
  height: 8px;
  border-radius: 0;
  background: var(--cha-graduations), var(--cha-ruban);
  box-shadow: 0 1px 2px var(--cha-ombre);
}

/* Les pages de texte (a propos, methode, mentions, plan) portent leur titre dans le corps. */
.mai__lib-prose h1 {
  margin: 0 0 1.1rem;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.mai__lib-prose table { font-size: .93rem; }

.mai__lib-prose thead th {
  background: var(--cha-graduations), var(--cha-ruban);
  color: var(--cha-graduation);
  text-align: left;
  padding-top: 1.1rem;
}

/* Le socle interdit le retour a la ligne des en-tetes : dans la colonne de lecture, un
   intitule long (« Tour du pull pour un corps de… ») faisait deborder le tableau. */
.mai__lib-prose th { white-space: normal; }

.mai__lib-prose tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--cha-laine) 75%, transparent); }

.mai__lib-prose tbody th { font-weight: 700; }

.mai__lib-sommaire {
  padding: 1.1rem 1.3rem;
  border-radius: var(--cha-rayon);
  background: var(--cha-laine);
  outline: 1.5px dashed color-mix(in srgb, var(--cha-braise) 40%, transparent);
  outline-offset: -6px;
}

.mai__lib-sommaire__titre {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* --- Figure d'en-tete d'article et de rubrique (brique du site / du socle) --------------- */
.mai__lib-figure { margin: 0; }

.mai__lib-figure__legende {
  margin-top: .5rem;
  font-size: .76rem;
  color: var(--cha-bois);
}

/* --- Encarts de fin d'article -------------------------------------------------------- */
.mai__lib-limites {
  padding: 1.2rem 1.4rem;
  border-left: 6px solid var(--color-secondary);
  border-radius: 0 var(--cha-rayon) var(--cha-rayon) 0;
  background: var(--cha-neige);
}

.mai__lib-limites__date:empty { display: none; }

.mai__lib-alerte-securite { border-radius: var(--cha-rayon); }

.mai__lib-faq__question { font-weight: 700; cursor: pointer; }

.mai__lib-faq__reponse { padding: .3rem 0 .8rem; }

.mai__lib-sources__hote {
  font-size: .8rem;
  color: var(--color-text-muted);
}

.mai__lib-related {
  padding: 1.1rem 1.3rem;
  border-radius: var(--cha-rayon);
  background: var(--cha-laine);
}

/* --- Plan du site ------------------------------------------------------------------- */
.mai__lib-plan-site__date { display: none; }

.mai__lib-plan-site__famille-titre a { color: inherit; }

/* --- Petits ecrans ------------------------------------------------------------------ */
@media (max-width: 46rem) {
  body { font-size: 1rem; }

  .mai__lib-prose table { font-size: .86rem; }
}

@media print {
  .mai__lib-fil,
  .mai__lib-related { display: none; }

  body { background: none; }
}