/* genere au build */
:root {
  --color-sur-secondary: #FFFFFF;
  --color-sur-primary: #FFFFFF;
  --focus-ring: #2C3742;
  --color-primary: #2C3742;
  --color-secondary: #1A2129;
  --color-bg: #FFFFFF;
  --color-text: #212830;
  --color-surface: #F5F5F5;
  --color-surface-alt: #F2F2F3;
  --color-border: #D7D8DA;
  --color-text-muted: #6F7378;
  --radius-card: 3px;
  --shadow-card: 0 2px 8px rgba(0,0,0,.08);
  --font-heading: 'Trebuchet MS', 'Lucida Grande', 'Helvetica Neue', Arial, sans-serif;
  --font-body: Verdana, Geneva, 'DejaVu Sans', Tahoma, sans-serif;
}

: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-aere-liste — la famille aeree : index et listes de sujets.

   TOUTES LES REGLES SONT EN DOUBLE CLASSE, ET C'EST LA RAISON D'ETRE DU FICHIER. Les
   partielles du theme `forum` sont groupees, pas une par brique : `.lib-sujet-ligne` y
   est stylee a la fois dans lib-forum-categorie.css et dans lib-forum-tete.css. Les
   remplacer en entier forkerait sept cents lignes de chrome partage, qui divergeraient a
   la premiere correction. Un selecteur a deux classes l'emporte sur un selecteur a une,
   quel que soit l'ordre d'emission — et cet ordre est alphabetique, donc pas de notre
   cote.

   LA MARQUE `lib-aere-liste` COMMANDE LA LIVRAISON. build_network ne sert une partielle
   que si sa classe racine prefixee apparait dans le HTML construit. Cette classe est
   posee sur lib-forum-categorie et sur lib-sujets : la feuille part avec l'index et les
   listes, et jamais sur un site qui ne tire pas ce theme.

   L'AIR N'EST PAS UN GOUT, C'EST UNE CONVENTION. La famille dense se parcourt du regard,
   trente lignes d'un coup ; la famille aeree se lit une entree a la fois, avec le titre
   en premier et le reste dessous. Les deux existent vraiment, et un lecteur qui a
   frequente un forum reconnait les deux. */

/* --- L'index : une categorie, puis des rangees ------------------------------------ */

.atf__lib-forum-categorie.atf__lib-aere-liste {
  border: 1px solid var(--color-border, #e3e6ea);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 1.4rem;
  background: var(--color-bg, #fff);
}

.atf__lib-aere-liste .atf__lib-forum-categorie__nom {
  margin: 0;
  padding: .85rem 1.2rem;
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--frm-bandeau, var(--color-primary, #2c3742));
  color: var(--frm-sur-bandeau, #fff);
}

.atf__lib-aere-liste .atf__lib-forum-categorie__liste {
  display: block;
}

/* --- Une rangee de forum ---------------------------------------------------------- */

.atf__lib-forum-ligne.atf__lib-aere-ligne {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.25rem 1.2rem;
  border-top: 1px solid var(--color-border, #e3e6ea);
}

.atf__lib-aere-liste .atf__lib-forum-categorie__liste > .atf__lib-forum-ligne:first-child {
  border-top: 0;
}

.atf__lib-aere-ligne:hover {
  background: var(--frm-survol, #f6f8fa);
}

.atf__lib-aere-ligne .atf__lib-forum-ligne__icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.35rem;
  background: var(--frm-survol, #f1f4f7);
  color: var(--frm-icone, var(--color-primary, #2c3742));
}

.atf__lib-aere-ligne .atf__lib-forum-ligne__corps {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.atf__lib-aere-ligne .atf__lib-forum-ligne__nom {
  display: block;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.atf__lib-aere-ligne .atf__lib-forum-ligne__promesse {
  display: block;
  margin-top: .3rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--color-text-muted, #5b6672);
}

.atf__lib-aere-ligne__compteurs {
  display: block;
  margin-top: .45rem;
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--color-text-muted, #78838f);
}

.atf__lib-aere-ligne .atf__lib-forum-ligne__dernier {
  flex: 0 0 auto;
  max-width: 15rem;
  text-align: right;
  font-size: .85rem;
}

/* --- La liste des sujets ---------------------------------------------------------- */

.atf__lib-sujets.atf__lib-aere-liste {
  display: block;
  border: 1px solid var(--color-border, #e3e6ea);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-bg, #fff);
}

.atf__lib-sujets.atf__lib-aere-liste .atf__lib-sujets__epingles:empty {
  display: none;
}

.atf__lib-sujets.atf__lib-aere-liste .atf__lib-sujets__epingles {
  background: var(--frm-survol, #f6f8fa);
}

.atf__lib-sujet-ligne.atf__lib-aere-sujet {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  border-top: 1px solid var(--color-border, #e3e6ea);
}

.atf__lib-sujets.atf__lib-aere-liste .atf__lib-sujets__epingles > .atf__lib-sujet-ligne:first-child,
.atf__lib-sujets.atf__lib-aere-liste .atf__lib-sujets__epingles:empty + .atf__lib-sujets__corps > .atf__lib-sujet-ligne:first-child {
  border-top: 0;
}

.atf__lib-aere-sujet:hover {
  background: var(--frm-survol, #f6f8fa);
}

.atf__lib-aere-sujet .atf__lib-sujet-ligne__icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  font-size: 1.05rem;
  background: var(--frm-survol, #f1f4f7);
  color: var(--frm-icone, var(--color-primary, #2c3742));
}

.atf__lib-aere-sujet .atf__lib-sujet-ligne__corps {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.atf__lib-aere-sujet .atf__lib-sujet-ligne__titre {
  display: block;
  font-size: 1.04rem;
  line-height: 1.35;
}

.atf__lib-aere-sujet .atf__lib-sujet-ligne__lien {
  font-weight: 600;
  text-decoration: none;
}

.atf__lib-aere-sujet .atf__lib-sujet-ligne__prefixe:empty {
  display: none;
}

.atf__lib-aere-sujet .atf__lib-sujet-ligne__prefixe {
  display: inline-block;
  margin-right: .45rem;
  padding: .08rem .45rem;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--frm-bandeau, var(--color-primary, #2c3742));
  color: var(--frm-sur-bandeau, #fff);
}

/* LA META SOUS LE TITRE, EN UNE LIGNE. C'est ce qui remplace les deux colonnes de
   chiffres de la famille dense, et c'est ce qui permet de se passer de tableau. */
.atf__lib-aere-sujet .atf__lib-sujet-ligne__meta {
  display: block;
  margin-top: .35rem;
  font-size: .83rem;
  line-height: 1.5;
  color: var(--color-text-muted, #78838f);
}

.atf__lib-aere-sujet .atf__lib-sujet-ligne__dernier {
  flex: 0 0 auto;
  max-width: 14rem;
  text-align: right;
  font-size: .82rem;
}

/* --- Etroit : le dernier message passe sous le titre ------------------------------ */

@media (max-width: 720px) {
  .atf__lib-forum-ligne.atf__lib-aere-ligne,
  .atf__lib-sujet-ligne.atf__lib-aere-sujet {
    flex-wrap: wrap;
  }

  .atf__lib-aere-ligne .atf__lib-forum-ligne__dernier,
  .atf__lib-aere-sujet .atf__lib-sujet-ligne__dernier {
    flex: 1 1 100%;
    max-width: none;
    margin-top: .5rem;
    text-align: left;
  }
}

/* lib-aere-message — la famille aeree : un message dans un sujet.

   REGLES EN DOUBLE CLASSE, meme raison que lib-aere-liste : `.lib-message` est stylee
   dans lib-message.css ET dans lib-forum-tete.css cote theme `forum`. On ne remplace
   aucune des deux, on gagne par specificite.

   LA MARQUE `lib-aere-message` COMMANDE LA LIVRAISON : la feuille ne part qu'avec les
   pages de sujet, et jamais sur un site qui ne tire pas ce theme.

   CE QUI FAIT LA DIFFERENCE A L'OEIL. La colonne d'auteur reste — c'est le dispositif
   qui separe un forum de tout le reste du web — mais elle s'elargit, l'avatar devient
   rond et grand, et le pseudo prend la taille d'un nom plutot que celle d'une etiquette.
   Le corps du message respire : une ligne de texte y fait environ soixante-dix signes
   au lieu de quatre-vingt-dix. */

.atf__lib-message.atf__lib-aere-message {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0;
  margin: 0 0 1.1rem;
  border: 1px solid var(--color-border, #e3e6ea);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-bg, #fff);
}

.atf__lib-aere-message .atf__lib-message__auteur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1.5rem 1rem;
  text-align: center;
  background: var(--frm-survol, #f6f8fa);
  border-right: 1px solid var(--color-border, #e3e6ea);
}

/* L'AVATAR EST GRAND ET ROND. C'est le marqueur le plus immediat de la famille aeree,
   et il sert a autre chose qu'a decorer : dans un fil de trente messages, c'est lui qui
   permet de reconnaitre qui parle sans relire le pseudo. */
.atf__lib-aere-message .atf__lib-message__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  background: var(--frm-bandeau, var(--color-primary, #2c3742));
  color: var(--frm-sur-bandeau, #fff);
}

.atf__lib-aere-message .atf__lib-message__pseudo {
  margin-top: .55rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
  color: var(--frm-pseudo, var(--color-link, #b4551e));
}

.atf__lib-aere-message .atf__lib-message__rang {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted, #78838f);
}

/* LES COMPTEURS S'EMPILENT au lieu de s'aligner : c'est ce qui laisse la place a
   l'avatar large sans rallonger la colonne. */
.atf__lib-aere-message .atf__lib-message__compteurs {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  margin-top: .5rem;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--color-text-muted, #78838f);
}

.atf__lib-aere-message .atf__lib-message__lieu:empty {
  display: none;
}

.atf__lib-aere-message .atf__lib-message__corps {
  padding: 1.35rem 1.6rem 1.1rem;
  min-width: 0;
}

.atf__lib-aere-message .atf__lib-message__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .85rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--color-border, #eef1f4);
  font-size: .8rem;
  color: var(--color-text-muted, #78838f);
}

.atf__lib-aere-message .atf__lib-message__numero {
  order: 2;
  text-decoration: none;
  color: inherit;
}

.atf__lib-aere-message .atf__lib-message__date {
  order: 1;
}

.atf__lib-aere-message .atf__lib-message__texte {
  font-size: 1rem;
  line-height: 1.72;
  max-width: 68ch;
}

.atf__lib-aere-message .atf__lib-message__texte > p {
  margin: 0 0 .95rem;
}

.atf__lib-aere-message .atf__lib-message__texte > ul,
.atf__lib-aere-message .atf__lib-message__texte > ol {
  margin: 0 0 .95rem;
  padding-left: 1.4rem;
}

.atf__lib-aere-message .atf__lib-message__texte li {
  margin-bottom: .35rem;
}

.atf__lib-aere-message .atf__lib-message__signature:empty {
  display: none;
}

/* --- Etroit : la colonne d'auteur passe en bandeau horizontal --------------------- */

@media (max-width: 720px) {
  .atf__lib-message.atf__lib-aere-message {
    grid-template-columns: 1fr;
  }

  .atf__lib-aere-message .atf__lib-message__auteur {
    flex-direction: row;
    align-items: center;
    gap: .65rem;
    padding: .8rem 1rem;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid var(--color-border, #e3e6ea);
  }

  .atf__lib-aere-message .atf__lib-message__avatar {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.1rem;
  }

  .atf__lib-aere-message .atf__lib-message__pseudo {
    margin-top: 0;
  }

  .atf__lib-aere-message .atf__lib-message__compteurs {
    flex-direction: row;
    gap: .6rem;
    margin-top: 0;
    margin-left: auto;
  }

  .atf__lib-aere-message .atf__lib-message__corps {
    padding: 1rem;
  }
}

/* lib-faq — les questions frequentes.

   Le depliant est un <details> natif : le contenu vit dans le HTML servi, donc un moteur
   qui n'execute rien le lit quand meme. Une FAQ montee en JavaScript est invisible pour
   la moitie de ceux a qui elle s'adresse. */

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

.atf__lib-faq__titre {
  margin: 0 0 1.1rem;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--color-text);
  scroll-margin-top: 5.5rem;
  text-wrap: balance;
}

.atf__lib-faq__liste {
  display: grid;
  gap: .6rem;
}

.atf__lib-faq__liste details {
  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;
  transition: border-color .18s ease;
}

.atf__lib-faq__liste details[open] { border-color: var(--accent-trait, var(--color-primary)); }

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

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

/* Le chevron pivote a l'ouverture : deux traits en CSS, aucune requete. */
.atf__lib-faq__liste summary::after {
  content: "";
  position: absolute;
  right: 1.25em;
  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;
}

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

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

.atf__lib-faq__liste summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.atf__lib-faq__liste details > :not(summary) {
  margin: 0 1.15em 1.1em;
  font-family: var(--font-body);
  font-size: .97rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.atf__lib-faq__liste details a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: .18em;
}

@media (prefers-reduced-motion: reduce) {
  .atf__lib-faq__liste details,
  .atf__lib-faq__liste summary::after { transition: 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. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.atf__lib-forum-ligne__nom,
.atf__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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

  .atf__lib-forum-ligne__dernier,
  .atf__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. */

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

.atf__lib-forum-entete__inner,
.atf__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);
}

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

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

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

.atf__lib-forum-entete__liens,
.atf__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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.atf__lib-forum-stats,
.atf__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));
}

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

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

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

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

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

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

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

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

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

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

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

.atf__lib-pagination-page__lien,
.atf__lib-pagination-page__courante,
.atf__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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.atf__lib-message__lieu: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. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* atelierfourgon.fr — la base. Tout le reste vient des briques du theme.

   CE FICHIER NE PORTE QUE LES JETONS ET LA REMISE A ZERO. Les composants vivent dans
   network/_shared/themes/forum/blocks/*.css et network/_shared/themes/forum-aere/blocks/*.css,
   et le build ne livre que les partielles dont la brique est reellement rendue.

   RIEN NE REDEFINIT LA ZONE DE LECTURE ICI : la largeur vient de lib-forum-entete.css,
   qui la pose deja. Le premier forum du parc porte une regle equivalente qui ne matche
   rien, parce que les briques de bibliotheque sont prefixees — on ne la recopie pas.

   LA PALETTE EST CELLE D'UN ATELIER : ardoise, blanc, et un orange d'outillage pour les
   liens et les pseudonymes. L'autre forum du lot prend un bleu de route. Les deux
   n'utilisent pas non plus la meme famille de briques : ce site tire `forum-aere` en
   plus, qui remplace les tableaux par des rangees. */

:root {
  --color-primary: #2c3742;
  --color-secondary: #1a2129;
  --color-sur-primary: #ffffff;
  --color-bg: #ffffff;
  --color-surface: #f5f7f9;
  --color-text: #212830;
  --color-text-muted: #6d7883;
  --color-border: #e1e6ea;
  --trait: #e1e6ea;
  --radius-card: 10px;
  --rayon-l: 10px;
  --focus-ring: #b4551e;

  /* On ne declare que des polices REELLEMENT installees : rien n'est charge a distance,
     et nommer une famille absente revenait a retomber sur system-ui — donc sur la meme
     typographie que l'autre forum. Verdana est large et ouverte la ou l'autre site est
     etroit : la difference se voit sans qu'une seule requete parte. */
  --font-heading: 'Trebuchet MS', 'Lucida Grande', 'Helvetica Neue', Arial, sans-serif;
  --font-body: Verdana, Geneva, 'DejaVu Sans', Tahoma, sans-serif;

  /* Les jetons propres au theme forum. Ils sont plus contrastes que sur l'autre site :
     la famille aeree a moins de filets, donc l'aplat de bandeau porte seul la
     separation entre deux blocs. */
  --frm-bandeau: #2c3742;
  --frm-sur-bandeau: #ffffff;
  --frm-pseudo: #b4551e;
  --frm-icone: #b4551e;
  --frm-survol: #f5f7f9;
}

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

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

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

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

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