:root {
  --color-surface-alt: #F1ECF0;
  --color-border: #D8D3D7;
  --color-text-muted: #6B6A6B;
  --radius-card: 0;
  --shadow-card: 0 2px 8px rgba(0,0,0,.08);
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Nunito', 'Segoe UI', sans-serif;
  --color-sur-secondary: #FDF8FC;
  --color-sur-primary: #2D2D2D;
  --focus-ring: #2D2D2D;
  --color-lien: #916189;
  --color-primary: #C77DBA;
  --color-secondary: #5C2D5E;
  --color-bg: #FDF8FC;
  --color-text: #2D2D2D;
  --color-surface: #F8E8F5;
}

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

/* lib-card-article (vitrine) : la photo dans une arche au cadre dore, le titre en didone,
   la date entre deux losanges. Remplace la partielle du socle sur les sites du theme. */

.sat__lib-card-article {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: .9rem .9rem 1.2rem;
  background: var(--color-bg);
  border: 1px solid var(--vit-filet);
  text-align: center;
  box-shadow: 0 18px 30px -26px color-mix(in srgb, var(--vit-laque) 80%, transparent);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.sat__lib-card-article__vitrine {
  padding: .32rem;
  border-radius: 999px 999px 0 0;
  background: var(--vit-or-degrade);
}

.sat__lib-card-article__vitrine:has(> .sat__lib-card-article__media:empty) { display: none; }

.sat__lib-card-article__media {
  display: block;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background: var(--vit-velours);
}

.sat__lib-card-article__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform .6s ease;
}

.sat__lib-card-article__corps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.1rem .5rem 0;
}

.sat__lib-card-article__titre {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1rem + .35vw, 1.28rem);
  font-weight: 700;
  line-height: 1.24;
  text-wrap: balance;
}

.sat__lib-card-article__lien {
  color: var(--vit-encre);
  text-decoration: none;
}

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

.sat__lib-card-article__meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sat__lib-card-article__meta::before,
.sat__lib-card-article__meta::after {
  content: "";
  width: .3rem;
  height: .3rem;
  background: var(--vit-or);
  transform: rotate(45deg);
}

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

.sat__lib-card-article__extrait {
  margin: .2rem 0 0;
  font-size: .92rem;
  line-height: 1.58;
  color: var(--color-text);
  text-wrap: pretty;
}

.sat__lib-card-article__lire {
  margin-top: auto;
  padding-top: .8rem;
  font-size: 0;
  color: var(--vit-or);
}

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

.sat__lib-card-article:hover,
.sat__lib-card-article:has(.sat__lib-card-article__lien:focus-visible) {
  transform: translateY(-4px);
  border-color: var(--vit-or);
  box-shadow: 0 26px 40px -26px color-mix(in srgb, var(--vit-laque) 90%, transparent);
}

.sat__lib-card-article:hover .sat__lib-card-article__media img { transform: scale(1.04); }
.sat__lib-card-article:hover .sat__lib-card-article__lire::after { transform: translateX(4px); }
.sat__lib-card-article:hover .sat__lib-card-article__lien { text-decoration: underline; text-underline-offset: .2em; }

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

.sat__lib-card-article:has(.sat__lib-card-article__lien:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

@media print {
  .sat__lib-card-article { box-shadow: none; break-inside: avoid; }
  .sat__lib-card-article__vitrine { background: none; padding: 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. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sat__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. */
.sat__lib-figure__legende:empty { display: none; }

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

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

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

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

/* lib-grille — la grille d'une page de categorie.
 *
 * LE NOMBRE DE COLONNES EST CALCULE, PAS DECLARE. auto-fill plus minmax laissent le
 * navigateur compter selon la largeur disponible : une grille declaree a trois colonnes
 * rend trois colonnes sur un telephone, ou oblige a une classe par format.
 *
 * 17rem EST UN SEUIL MESURE, PAS UN ARRONDI : en dessous, le titre d'une classe de
 * produit passe a trois lignes et les cartes cessent d'avoir la meme hauteur de tete,
 * ce qui detruit le balayage vertical qui fait tout l'interet d'une grille. */

.sat__lib-grille {
  margin: 2rem 0;
}

.sat__lib-grille__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .4rem;
}

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

.sat__lib-grille__compte {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--btq-police-texte, var(--font-body, system-ui, sans-serif));
  font-size: .8rem;
  color: var(--btq-texte-doux, var(--color-text-muted, #6f6a62));
}

.sat__lib-grille__intro {
  margin: 0 0 1.3rem;
  max-width: 62ch;
  font-family: var(--btq-police-texte, var(--font-body, system-ui, sans-serif));
  font-size: .95rem;
  line-height: 1.6;
  color: var(--btq-texte-doux, var(--color-text-muted, #6f6a62));
}

.sat__lib-grille__cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.1rem;
}

/* L'ordre annonce. Il se lit avant la grille, pas apres : une fois la grille parcourue,
 * savoir comment elle etait rangee n'aide plus. Discret mais pas efface — c'est une
 * instruction de lecture, pas une note de bas de page. */
.sat__lib-grille__ordre {
  margin: -.6rem 0 1.2rem;
  font-family: var(--btq-police-texte, var(--font-body, system-ui, sans-serif));
  font-size: .8rem;
  color: var(--btq-texte-doux, var(--color-text-muted, #6f6a62));
}

.sat__lib-grille__ordre:empty {
  display: none;
}

/* LA VARIANTE « LISTE » : une suite dense, pour une section qui suit une grille.
 *
 * Deux grilles de cartes empilees se lisent comme un seul bloc long — c'est ce qui
 * faisait « pate » sur l'accueil, bien plus que le nombre d'entrees. La liste donne le
 * contraste de forme qui separe les deux sections, et elle convient a ce qu'elle porte :
 * un fil de publications se parcourt par les titres, pas par les visuels.
 *
 * ELLE NE CHANGE PAS LE MODE DE DISPOSITION DE LA CARTE, ELLE LE TOURNE. La premiere
 * version imposait display:grid avec deux colonnes fixes a une carte ecrite en flex
 * colonne. Servi : chaque mot du titre sur sa propre ligne, sur une colonne de 4,6 rem,
 * et les deux tiers de l'ecran vides a droite. Une carte sait deja s'empiler ; il suffit
 * de lui demander de s'aligner, et de dire au corps de prendre ce qui reste.
 *
 * L'EMPLACEMENT D'IMAGE VIDE NE RESERVE PLUS SA PLACE. Les dossiers n'ont pas tous une
 * vignette : sans cette regle, un lien vide occupait la premiere colonne et decalait
 * tout le texte. */
.sat__lib-grille[data-forme="liste"] .sat__lib-grille__cartes {
  display: block;
}

.sat__lib-grille[data-forme="liste"] .sat__lib-grille__cartes > * {
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
  padding: .95rem .2rem;
  border: 0;
  border-bottom: 1px solid var(--btq-filet, var(--color-border, #d7d2c8));
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.sat__lib-grille[data-forme="liste"] .sat__lib-grille__cartes > *:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--btq-filet, var(--color-border, #d7d2c8));
}

/* Le corps prend tout ce que la vignette ne prend pas. min-width:0 est ce qui autorise
   le texte a se replier au lieu de pousser la ligne au-dela du conteneur. */
.sat__lib-grille[data-forme="liste"] .sat__lib-grille__cartes > * > *:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.sat__lib-grille[data-forme="liste"] .sat__lib-grille__cartes > * > *:first-child {
  flex: 0 0 auto;
}

.sat__lib-grille[data-forme="liste"] .sat__lib-grille__cartes > * > *:first-child:empty {
  display: none;
}

.sat__lib-grille[data-forme="liste"] .sat__lib-grille__cartes img {
  width: 5rem;
  height: 5rem;
  border-radius: 8px;
  object-fit: cover;
}

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

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

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

.sat__lib-limites__examine,
.sat__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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sat__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 {
  .sat__lib-plan-site__familles { grid-template-columns: 1fr; }
  .sat__lib-plan-site__famille { break-inside: avoid; }
  .sat__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. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* lib-related (vitrine) : trois petites vitrines en arche. La photo est un fond,
   --vit-vignette, pose par la feuille du site : le builder ne livre que des liens.
   ponytail: vignette par CSS faute de trou IMG dans lib-related ; a remplacer par une
   <img> quand le builder passera l'image de l'article similaire. */

.sat__lib-related {
  max-width: 56rem;
  margin: var(--vit-pas, 3rem) auto 0;
  text-align: center;
}

.sat__lib-related__titre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 1.8rem;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  color: var(--vit-encre);
}

.sat__lib-related__titre::before,
.sat__lib-related__titre::after {
  content: "";
  flex: 0 1 4rem;
  height: 1px;
  background: var(--vit-or);
}

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

.sat__lib-related__liste li { margin: 0; }

.sat__lib-related__liste a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--vit-encre);
  text-decoration: none;
  text-wrap: balance;
}

.sat__lib-related__liste a::before {
  content: "";
  display: block;
  width: min(100%, 13rem);
  aspect-ratio: 4 / 5;
  border: .3rem solid var(--vit-or-clair);
  border-radius: 999px 999px 0 0;
  outline: 1px solid var(--vit-or);
  background: var(--vit-vignette, none) center / cover no-repeat, var(--vit-velours);
  box-shadow: var(--vit-ombre);
  transition: transform .3s ease;
}

.sat__lib-related__liste a:hover::before,
.sat__lib-related__liste a:focus-visible::before { transform: translateY(-4px); }

.sat__lib-related__liste a:hover { text-decoration: underline; text-underline-offset: .2em; }

@media print {
  .sat__lib-related { display: none; }
}

/* lib-routeur — « votre cas est lequel ? ». La seule brique qui ELIMINE.

   Porte aussi les classes de lib-routeur-cas : une sous-brique n'a pas de feuille a elle,
   ses classes appartiennent au bloc, comme lib-liste-item dans le theme agence.

   CE QUE LA MISE EN PAGE DOIT OBTENIR. Le lecteur doit reconnaitre SA situation en un
   balayage, pas lire six propositions. D'ou : une seule ligne forte par cas, la reponse en
   dessous en gris, et des cartes assez larges pour que la phrase ne se casse pas en trois.
   Une grille intrinseque, sans point de rupture — c'est le contenu qui decide du nombre de
   colonnes, pas une largeur d'ecran devinee.

   TOUTE LA CARTE EST CLIQUABLE, et pourtant le seul element focalisable reste le <a>.
   L'agrandissement se fait avec un ::after en position absolue qui couvre l'item : le
   clavier voit un lien, la souris voit une cible de 100 % de la carte. Aucun div onclick,
   aucune duplication de lien. */

.sat__lib-routeur {
  margin: 0 0 var(--btq-pas, 2.5rem);
  padding: 1.4rem 1.5rem 1.6rem;
  border: 1px solid var(--btq-trait, var(--color-border, #e2e2e2));
  border-radius: var(--btq-rayon, var(--radius-card, 10px));
  background: var(--btq-surface, var(--color-surface, #fafafa));
}

.sat__lib-routeur__titre {
  margin: 0 0 1.1rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--color-text, #222);
  text-wrap: balance;
}

.sat__lib-routeur__cas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sat__lib-routeur__cas-item {
  position: relative;
  padding: .85rem 2.2rem .9rem 1rem;
  border: 1px solid var(--btq-trait, var(--color-border, #e2e2e2));
  border-radius: calc(var(--btq-rayon, var(--radius-card, 10px)) - 3px);
  background: var(--color-bg, #fff);
}

/* Le chevron dit « ca mene quelque part », sans image ni police d'icones. */
.sat__lib-routeur__cas-item::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.05rem;
  width: .42rem;
  height: .42rem;
  border: solid var(--btq-action, var(--color-primary, #1a1a1a));
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.sat__lib-routeur__cas-item:hover {
  border-color: var(--btq-action, var(--color-primary, #1a1a1a));
}

/* La carte entiere devient la cible, le lien reste le seul noeud focalisable. */
.sat__lib-routeur__cas-item:has(.sat__lib-routeur__lien:focus-visible) {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
}

.sat__lib-routeur__lien {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text, #222);
  text-decoration: none;
  text-wrap: pretty;
}

.sat__lib-routeur__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.sat__lib-routeur__lien:focus-visible { outline: none; }

@supports not selector(:has(*)) {
  .sat__lib-routeur__lien:focus-visible {
    outline: 2px solid var(--focus-ring, currentColor);
    outline-offset: 2px;
  }
}

.sat__lib-routeur__reponse {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--color-text-muted, #666);
  text-wrap: pretty;
}

.sat__lib-routeur__reponse:empty { display: none; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* lib-vit-bandeau-noeud : photo pleine largeur, ruban de satin en travers, noeud SVG,
   citation sur plaque.

   Le satin est un degrade vertical de la teinte --vit-ruban vers l'ombre puis vers la
   lumiere ; le noeud reprend les memes melanges. Aucune couleur n'est ecrite dans le SVG. */

/* Ruban et noeud se placent sur la PHOTO (--photo-h), pas sur la section : sur
   telephone la plaque de citation passe dessous et allonge la section. */
.sat__lib-vit-bandeau-noeud {
  --photo-h: clamp(19rem, 11rem + 26vw, 36rem);
  --ruban-y: calc(var(--photo-h) * .64);
  --ruban-h: clamp(1.7rem, 1.1rem + 1.6vw, 2.7rem);
  position: relative;
  isolation: isolate;
  margin: var(--vit-pas) 0;
}

.sat__lib-vit-bandeau-noeud__figure { margin: 0; }

.sat__lib-vit-bandeau-noeud__photo {
  display: block;
  width: 100%;
  height: var(--photo-h);
  object-fit: cover;
  background: var(--vit-velours);
}

.sat__lib-vit-bandeau-noeud[data-cadrage="haut"] .sat__lib-vit-bandeau-noeud__photo { object-position: 50% 15%; }
.sat__lib-vit-bandeau-noeud[data-cadrage="bas"] .sat__lib-vit-bandeau-noeud__photo { object-position: 50% 85%; }
.sat__lib-vit-bandeau-noeud[data-cadrage="gauche"] .sat__lib-vit-bandeau-noeud__photo { object-position: 20% 50%; }
.sat__lib-vit-bandeau-noeud[data-cadrage="droite"] .sat__lib-vit-bandeau-noeud__photo { object-position: 80% 50%; }

/* Le credit, en pastille sur la photo : il reste lie a l'image qu'il attribue. */
.sat__lib-vit-bandeau-noeud__credit {
  position: absolute;
  z-index: 3;
  right: .6rem;
  bottom: .6rem;
  max-width: min(36rem, calc(100% - 1.2rem));
  padding: .3rem .6rem;
  background: color-mix(in srgb, var(--vit-laque) 82%, transparent);
  font-size: .72rem;
  line-height: 1.45;
  color: var(--vit-or-clair);
}

.sat__lib-vit-bandeau-noeud__credit a { color: inherit; }

.sat__lib-vit-bandeau-noeud__legende:empty { display: none; }

.sat__lib-vit-bandeau-noeud__ruban {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: var(--ruban-y);
  height: var(--ruban-h);
  transform: translateY(-50%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--vit-ruban) 62%, black) 0%,
    var(--vit-ruban) 22%,
    color-mix(in srgb, var(--vit-ruban) 45%, white) 46%,
    var(--vit-ruban) 64%,
    color-mix(in srgb, var(--vit-ruban) 70%, black) 100%);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, black 55%, transparent);
}

.sat__lib-vit-bandeau-noeud__noeud {
  position: absolute;
  z-index: 2;
  left: 72%;
  top: var(--ruban-y);
  width: clamp(7rem, 4.5rem + 9vw, 13rem);
  height: auto;
  transform: translate(-50%, -46%);
  filter: drop-shadow(0 10px 10px color-mix(in srgb, black 40%, transparent));
}

.sat__lib-vit-bandeau-noeud__boucle { fill: var(--vit-ruban); }
.sat__lib-vit-bandeau-noeud__pan { fill: color-mix(in srgb, var(--vit-ruban) 78%, black); }
.sat__lib-vit-bandeau-noeud__reflet { fill: color-mix(in srgb, var(--vit-ruban) 40%, white); opacity: .85; }
.sat__lib-vit-bandeau-noeud__coeur { fill: color-mix(in srgb, var(--vit-ruban) 82%, black); }

/* La plaque de citation, a gauche du noeud. */
.sat__lib-vit-bandeau-noeud__citation {
  position: absolute;
  z-index: 3;
  left: max(var(--vit-gouttiere), calc(50% - var(--vit-largeur) / 2));
  top: 10%;
  width: min(30rem, 46%);
  margin: 0;
  padding: 1.5rem 1.7rem 1.3rem;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  border: 1px solid var(--vit-or);
  outline: 1px solid var(--vit-filet);
  outline-offset: -.45rem;
  box-shadow: var(--vit-ombre);
}

.sat__lib-vit-bandeau-noeud__citation:has(> .sat__lib-vit-bandeau-noeud__texte:empty) { display: none; }

.sat__lib-vit-bandeau-noeud__texte {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.08rem, .95rem + .55vw, 1.4rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--vit-encre);
  text-wrap: pretty;
}

.sat__lib-vit-bandeau-noeud__source {
  margin-top: .8rem;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--color-text-muted);
}

.sat__lib-vit-bandeau-noeud__source cite { font-style: normal; }

/* Sur telephone, la plaque passe sous la photo, a cheval sur son bord. */
@media (max-width: 48rem) {
  .sat__lib-vit-bandeau-noeud { --ruban-y: calc(var(--photo-h) * .58); }

  .sat__lib-vit-bandeau-noeud__citation {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    margin: 1rem var(--vit-gouttiere) 0;
  }

  /* Le credit quitte la photo : sous elle, sur la laque, il ne cache plus rien. */
  .sat__lib-vit-bandeau-noeud__credit {
    position: static;
    max-width: none;
    padding: .45rem var(--vit-gouttiere);
    background: var(--vit-laque);
  }

  .sat__lib-vit-bandeau-noeud__noeud { left: 50%; }
}

@media print {
  .sat__lib-vit-bandeau-noeud__ruban,
  .sat__lib-vit-bandeau-noeud__noeud { display: none; }
  .sat__lib-vit-bandeau-noeud__citation { position: static; width: auto; box-shadow: none; }
}

/* lib-vit-en-bref : plaque gravee, quatre vis aux coins, etiquette laquee. */

.sat__lib-vit-en-bref {
  --vis: radial-gradient(circle, var(--vit-or-clair) 0 .12rem, var(--vit-or) .14rem .24rem, transparent .26rem);
  position: relative;
  max-width: 50rem;
  margin: var(--vit-pas) auto;
  margin-inline: max(var(--vit-gouttiere), calc(50% - 25rem));
  padding: 2rem clamp(1.3rem, .8rem + 2.4vw, 2.6rem) 1.8rem;
  background:
    var(--vis) .7rem .7rem / .6rem .6rem no-repeat,
    var(--vis) calc(100% - .7rem) .7rem / .6rem .6rem no-repeat,
    var(--vis) .7rem calc(100% - .7rem) / .6rem .6rem no-repeat,
    var(--vis) calc(100% - .7rem) calc(100% - .7rem) / .6rem .6rem no-repeat,
    linear-gradient(180deg, var(--vit-creme), var(--color-bg));
  border: 1px solid var(--vit-or);
  outline: 1px solid var(--vit-filet);
  outline-offset: .35rem;
  box-shadow: var(--vit-ombre);
}

.sat__lib-vit-en-bref__etiquette {
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .3rem .8rem;
  background: var(--vit-laque);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vit-or-clair);
}

.sat__lib-vit-en-bref__etiquette:empty { display: none; }

.sat__lib-vit-en-bref__question {
  margin: 0 0 .7rem;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.2;
  color: var(--vit-encre);
  text-wrap: balance;
}

.sat__lib-vit-en-bref__reponse {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.sat__lib-vit-en-bref__suite {
  font-weight: 700;
  color: var(--vit-encre);
  text-underline-offset: .22em;
}

.sat__lib-vit-en-bref__suite::after { content: "\2009\2192"; }

.sat__lib-vit-en-bref__suite:empty { display: none; }

@media print {
  .sat__lib-vit-en-bref { background: none; box-shadow: none; outline: 0; }
}

/* lib-vit-etalage : photos sous cloche, sur socle laque, etiquette a oeillet pendue au
   socle par un fil dore.

   L'etiquette ne pivote pas : une transformation ferait d'elle le bloc conteneur du lien
   etire, qui ne couvrirait plus la photo. Le fil et l'oeillet sont dessines par le socle
   et par le fond de l'etiquette. */

.sat__lib-vit-etalage {
  max-width: var(--vit-largeur);
  margin: 0 auto;
  padding: var(--vit-pas) var(--vit-gouttiere);
}

.sat__lib-vit-etalage__entete {
  max-width: 44rem;
  margin: 0 auto clamp(1.8rem, 1.2rem + 2vw, 3rem);
  text-align: center;
}

.sat__lib-vit-etalage__rayon {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: 2.6rem 1.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sur telephone, la rangee defile au doigt et deborde jusqu'aux bords de l'ecran : la
   carte suivante, coupee, dit qu'il y en a d'autres. */
@media (max-width: 40rem) {
  .sat__lib-vit-etalage__rayon {
    display: flex;
    gap: 1.1rem;
    margin: 0 calc(-1 * var(--vit-gouttiere));
    padding: .4rem var(--vit-gouttiere) 1.2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--vit-gouttiere);
    scrollbar-width: thin;
    scrollbar-color: var(--vit-or) transparent;
  }

  .sat__lib-vit-etalage__article {
    flex: 0 0 min(15rem, 70%);
    scroll-snap-align: start;
  }
}

.sat__lib-vit-etalage__article {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}

.sat__lib-vit-etalage__socle {
  position: relative;
  width: 100%;
  padding-bottom: 1rem;
}

/* Le socle : un trapeze laque, file d'or. */
.sat__lib-vit-etalage__socle::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 1rem;
  background:
    linear-gradient(var(--vit-or), var(--vit-or)) top / 100% 2px no-repeat,
    var(--vit-laque);
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}

/* Le fil, du socle a l'oeillet. */
.sat__lib-vit-etalage__socle::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.1rem;
  width: 1px;
  height: 1.8rem;
  background: var(--vit-or);
}

.sat__lib-vit-etalage__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: .3rem solid var(--color-bg);
  border-radius: 48% 48% .4rem .4rem / 34% 34% .4rem .4rem;
  outline: 1px solid var(--vit-filet);
  background: var(--vit-velours);
  box-shadow: var(--vit-ombre);
  transition: transform .3s ease;
}

.sat__lib-vit-etalage__article[data-cadrage="haut"] .sat__lib-vit-etalage__photo { object-position: 50% 20%; }
.sat__lib-vit-etalage__article[data-cadrage="bas"] .sat__lib-vit-etalage__photo { object-position: 50% 80%; }
.sat__lib-vit-etalage__article[data-cadrage="gauche"] .sat__lib-vit-etalage__photo { object-position: 22% 50%; }
.sat__lib-vit-etalage__article[data-cadrage="droite"] .sat__lib-vit-etalage__photo { object-position: 78% 50%; }

/* L'etiquette : carton ivoire, double filet, oeillet cercle d'or en haut. */
.sat__lib-vit-etalage__etiquette {
  width: 88%;
  margin-top: 1.1rem;
  padding: 1.5rem .95rem .9rem;
  background:
    radial-gradient(circle at 50% .75rem, var(--vit-creme) 0 .2rem, var(--vit-or) .22rem .34rem,
      transparent .36rem),
    var(--color-bg);
  border: 1px solid var(--vit-filet);
  outline: 1px solid color-mix(in srgb, var(--vit-or) 30%, transparent);
  outline-offset: -.3rem;
  box-shadow: 0 12px 20px -16px color-mix(in srgb, var(--vit-laque) 70%, transparent);
}

.sat__lib-vit-etalage__nom {
  margin: 0 0 .35rem;
  font-family: var(--font-heading);
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.22;
  text-wrap: balance;
}

.sat__lib-vit-etalage__lien {
  color: var(--vit-encre);
  text-decoration: none;
}

.sat__lib-vit-etalage__lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sat__lib-vit-etalage__pour-qui {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.sat__lib-vit-etalage__fourchette {
  margin: .5rem 0 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vit-encre);
}

.sat__lib-vit-etalage__fourchette:empty { display: none; }

.sat__lib-vit-etalage__article:hover .sat__lib-vit-etalage__photo,
.sat__lib-vit-etalage__article:focus-within .sat__lib-vit-etalage__photo { transform: translateY(-5px); }

.sat__lib-vit-etalage__article:hover .sat__lib-vit-etalage__lien { text-decoration: underline; text-underline-offset: .2em; }

.sat__lib-vit-etalage__lien:focus-visible { outline: none; }

.sat__lib-vit-etalage__article:has(.sat__lib-vit-etalage__lien:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 6px;
}

@media print {
  .sat__lib-vit-etalage__socle::before,
  .sat__lib-vit-etalage__socle::after { display: none; }
  .sat__lib-vit-etalage__rayon { display: block; }
}

/* lib-vit-eventail : un demi-disque de rayons dores (conic-gradient masque), un filet de
   chaque cote. */

.sat__lib-vit-eventail {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  max-width: 34rem;
  margin: clamp(1.2rem, .8rem + 2vw, 2.6rem) auto;
  padding: 0 var(--vit-gouttiere);
}

.sat__lib-vit-eventail::before,
.sat__lib-vit-eventail::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-bottom: .1rem;
  background: linear-gradient(90deg, transparent, var(--vit-or));
}

.sat__lib-vit-eventail::after { background: linear-gradient(90deg, var(--vit-or), transparent); }

.sat__lib-vit-eventail__motif {
  flex: 0 0 auto;
  width: 4.4rem;
  height: 2.2rem;
  background:
    radial-gradient(circle at 50% 100%, var(--vit-or) 0 .55rem, transparent .6rem),
    repeating-conic-gradient(from -90deg at 50% 100%, var(--vit-or) 0deg 7deg, transparent 7deg 15deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, black 0 2.15rem, transparent 2.2rem);
  mask: radial-gradient(circle at 50% 100%, black 0 2.15rem, transparent 2.2rem);
}

@media print {
  .sat__lib-vit-eventail { display: none; }
}

/* lib-vit-facade : le fronton et ses vitrines en arche.

   Les arches reposent sur un meme soubassement (align-items: end) : l'arche centrale,
   plus large, monte plus haut, comme la porte d'un grand magasin. La pierre est une
   trame de lignes horizontales, les cadres sont le degrade dore du theme. */

.sat__lib-vit-facade {
  position: relative;
  padding: clamp(1.6rem, .8rem + 2.6vw, 3rem) var(--vit-gouttiere) 0;
  text-align: center;
  background:
    repeating-linear-gradient(180deg, transparent 0 4.4rem,
      color-mix(in srgb, var(--vit-or) 8%, transparent) 4.4rem calc(4.4rem + 1px)),
    linear-gradient(180deg, var(--vit-creme), color-mix(in srgb, var(--vit-creme) 40%, var(--color-bg)));
}

/* Le soubassement : une plinthe laquee filetee d'or, sous toute la rangee. */
.sat__lib-vit-facade::after {
  content: "";
  display: block;
  height: 1.1rem;
  margin: 0 calc(-1 * var(--vit-gouttiere));
  background:
    linear-gradient(var(--vit-or), var(--vit-or)) top / 100% 2px no-repeat,
    var(--vit-laque);
}

.sat__lib-vit-facade__fronton {
  max-width: 46rem;
  margin: 0 auto clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
}

.sat__lib-vit-facade__titre {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--vit-encre);
  text-wrap: balance;
}

.sat__lib-vit-facade__chapo {
  max-width: 40rem;
  margin: .8rem auto 0;
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  line-height: 1.65;
  color: var(--color-text);
  text-wrap: pretty;
}

.sat__lib-vit-facade__chapo:empty { display: none; }

.sat__lib-vit-facade__arches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  align-items: end;
  gap: 1.4rem 1rem;
  max-width: var(--vit-largeur);
  margin: 0 auto;
  padding: 0 0 1.4rem;
  list-style: none;
}

.sat__lib-vit-facade__arche { margin: 0; }

.sat__lib-vit-facade__arche--lcp { grid-column: 1 / -1; }

@media (min-width: 52rem) {
  .sat__lib-vit-facade__arches {
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: clamp(.9rem, 1.6vw, 1.8rem);
  }

  .sat__lib-vit-facade__arches:has(> :nth-child(5)) {
    grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr;
  }

  .sat__lib-vit-facade__arche--lcp { grid-column: 2; grid-row: 1; }

  .sat__lib-vit-facade__arches:has(> :nth-child(5)) > .sat__lib-vit-facade__arche--lcp { grid-column: 3; }
}

.sat__lib-vit-facade__lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* La vitre : cadre dore en arche, reflet oblique, cle de voute. */
.sat__lib-vit-facade__vitre {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: .42rem;
  border-radius: 999px 999px 0 0;
  background: var(--vit-or-degrade);
  box-shadow: var(--vit-ombre);
  transition: transform .3s ease, box-shadow .3s ease;
}

.sat__lib-vit-facade__arche--lcp .sat__lib-vit-facade__vitre { aspect-ratio: 5 / 4; }

@media (min-width: 52rem) {
  .sat__lib-vit-facade__arche--lcp .sat__lib-vit-facade__vitre { aspect-ratio: 4 / 5; }
}

.sat__lib-vit-facade__vitre::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -.35rem;
  left: 50%;
  width: 1.3rem;
  height: 1.1rem;
  background: var(--vit-or-degrade);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
  transform: translateX(-50%);
}

.sat__lib-vit-facade__vitre::after {
  content: "";
  position: absolute;
  inset: .42rem;
  border-radius: 999px 999px 0 0;
  background:
    linear-gradient(118deg, color-mix(in srgb, white 26%, transparent) 0 14%, transparent 26%),
    radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--vit-or-clair) 40%, transparent), transparent 62%);
  opacity: .55;
  transition: opacity .3s ease;
  pointer-events: none;
}

.sat__lib-vit-facade__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
  background: var(--vit-velours);
}

.sat__lib-vit-facade__arche[data-cadrage="haut"] .sat__lib-vit-facade__photo { object-position: 50% 20%; }
.sat__lib-vit-facade__arche[data-cadrage="bas"] .sat__lib-vit-facade__photo { object-position: 50% 80%; }
.sat__lib-vit-facade__arche[data-cadrage="gauche"] .sat__lib-vit-facade__photo { object-position: 22% 50%; }
.sat__lib-vit-facade__arche[data-cadrage="droite"] .sat__lib-vit-facade__photo { object-position: 78% 50%; }

/* La plaque de laiton sous chaque vitrine. */
.sat__lib-vit-facade__rubrique {
  display: inline-block;
  margin-top: .8rem;
  padding: .4rem .85rem;
  background: var(--vit-laque);
  border: 1px solid var(--vit-or);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vit-or-clair);
}

.sat__lib-vit-facade__arche--lcp .sat__lib-vit-facade__rubrique { font-size: .84rem; padding: .5rem 1.1rem; }

.sat__lib-vit-facade__lien:hover .sat__lib-vit-facade__vitre,
.sat__lib-vit-facade__lien:focus-visible .sat__lib-vit-facade__vitre {
  transform: translateY(-5px);
  box-shadow: 0 30px 50px -24px color-mix(in srgb, var(--vit-laque) 80%, transparent);
}

.sat__lib-vit-facade__lien:hover .sat__lib-vit-facade__vitre::after,
.sat__lib-vit-facade__lien:focus-visible .sat__lib-vit-facade__vitre::after { opacity: 1; }

.sat__lib-vit-facade__lien:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; }

@media (max-width: 30rem) {
  .sat__lib-vit-facade__rubrique { font-size: .68rem; letter-spacing: .08em; padding: .35rem .55rem; }
}

@media print {
  .sat__lib-vit-facade { background: none; }
  .sat__lib-vit-facade::after,
  .sat__lib-vit-facade__vitre::before,
  .sat__lib-vit-facade__vitre::after { display: none; }
}

/* lib-vit-heros-rideau : une scene laquee, deux rideaux de velours retenus par des
   embrasses dorees, un lambrequin festonne, la photo au cadre dore au milieu, puis la
   plaque de titre qui chevauche le bas de la scene.

   Les plis du velours sont un degrade repete de --vit-velours vers l'ombre et vers la
   lumiere ; le feston du lambrequin est le meme masque que le store de la marquise. */

.sat__lib-vit-heros-rideau { position: relative; }

/* La scene fait 72rem au plus : les rideaux cadrent la photo au lieu de pendre aux bords
   d'un ecran large. Le mur laque, lui, va d'un bord a l'autre (ombre portee rognee). */
.sat__lib-vit-heros-rideau__scene {
  --rideau: clamp(1.4rem, 11vw, 10rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(var(--rideau), 1fr) minmax(0, 50rem) minmax(var(--rideau), 1fr);
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(3.2rem, 2rem + 3vw, 4.8rem) 0 clamp(5.5rem, 3.5rem + 6vw, 8.5rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 50% 42%, color-mix(in srgb, var(--vit-or) 22%, var(--vit-laque)), transparent 72%),
    var(--vit-laque);
  box-shadow: 0 0 0 100vmax var(--vit-laque);
  clip-path: inset(0 -100vmax);
}

.sat__lib-vit-heros-rideau__rideau {
  --plis: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--vit-velours) 70%, black) 0,
    var(--vit-velours) .9rem,
    color-mix(in srgb, var(--vit-velours) 78%, white) 1.5rem,
    var(--vit-velours) 2.1rem,
    color-mix(in srgb, var(--vit-velours) 70%, black) 2.9rem);
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: var(--rideau);
  background: var(--plis);
  box-shadow: inset 0 -3rem 3rem -2rem color-mix(in srgb, black 45%, transparent);
}

.sat__lib-vit-heros-rideau__rideau[data-cote="gauche"] {
  left: 0;
  border-bottom-right-radius: 100% 26%;
}

.sat__lib-vit-heros-rideau__rideau[data-cote="droite"] {
  right: 0;
  border-bottom-left-radius: 100% 26%;
}

/* L'embrasse : une cordeliere doree qui retient le rideau aux deux tiers. */
.sat__lib-vit-heros-rideau__rideau::after {
  content: "";
  position: absolute;
  top: 60%;
  width: 70%;
  height: .55rem;
  border-radius: 999px;
  background: var(--vit-or-degrade);
  box-shadow: 0 3px 6px color-mix(in srgb, black 40%, transparent);
}

.sat__lib-vit-heros-rideau__rideau[data-cote="gauche"]::after { left: 0; }
.sat__lib-vit-heros-rideau__rideau[data-cote="droite"]::after { right: 0; }

.sat__lib-vit-heros-rideau__lambrequin {
  --feston: 1.6rem;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: calc(1.4rem + var(--feston));
  border-top: .35rem solid var(--vit-or);
  background:
    linear-gradient(180deg, transparent 60%, color-mix(in srgb, black 25%, transparent)),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--vit-velours) 72%, black) 0,
      var(--vit-velours) calc(var(--feston) * .7),
      color-mix(in srgb, var(--vit-velours) 80%, white) var(--feston),
      var(--vit-velours) calc(var(--feston) * 1.3),
      color-mix(in srgb, var(--vit-velours) 72%, black) calc(var(--feston) * 2));
  -webkit-mask:
    linear-gradient(black, black) top / 100% calc(100% - var(--feston)) no-repeat,
    radial-gradient(circle at 50% 0, black calc(var(--feston) - .5px), transparent var(--feston))
      0 100% / calc(var(--feston) * 2) var(--feston) repeat-x;
  mask:
    linear-gradient(black, black) top / 100% calc(100% - var(--feston)) no-repeat,
    radial-gradient(circle at 50% 0, black calc(var(--feston) - .5px), transparent var(--feston))
      0 100% / calc(var(--feston) * 2) var(--feston) repeat-x;
}

.sat__lib-vit-heros-rideau__cadre {
  position: relative;
  z-index: 1;
  grid-column: 2;
}

.sat__lib-vit-heros-rideau__cadre figure { margin: 0; }

.sat__lib-vit-heros-rideau__cadre img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  padding: .5rem;
  border-radius: 0;
  background: var(--vit-or-degrade);
  box-shadow: 0 34px 60px -26px color-mix(in srgb, black 80%, transparent);
}

.sat__lib-vit-heros-rideau__cadre figcaption {
  justify-content: center;
  margin-top: .7rem;
  font-size: .76rem;
  text-align: center;
  color: color-mix(in srgb, var(--vit-or-clair) 88%, transparent);
}

.sat__lib-vit-heros-rideau__cadre figcaption a { color: inherit; }

/* La plaque de titre : ivoire, double filet dore, a cheval sur la scene. */
.sat__lib-vit-heros-rideau__plaque {
  position: relative;
  z-index: 4;
  width: min(50rem, calc(100% - 2 * var(--vit-gouttiere)));
  margin: calc(-1 * clamp(3.6rem, 2.2rem + 4vw, 6rem)) auto 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.6rem) clamp(1.1rem, .6rem + 2.6vw, 3rem);
  background: var(--color-bg);
  border: 1px solid var(--vit-or);
  outline: 1px solid var(--vit-filet);
  outline-offset: -.5rem;
  box-shadow: var(--vit-ombre);
  text-align: center;
}

.sat__lib-vit-heros-rideau__fil {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem .6rem;
  margin-bottom: .9rem;
  font-size: .8rem;
  color: var(--color-text-muted);
}

.sat__lib-vit-heros-rideau__fil:empty { display: none; }

.sat__lib-vit-heros-rideau__fil > * + *::before {
  content: "";
  display: inline-block;
  width: .3rem;
  height: .3rem;
  margin-right: .6rem;
  vertical-align: middle;
  background: var(--vit-or);
  transform: rotate(45deg);
}

.sat__lib-vit-heros-rideau__fil a { color: var(--vit-encre); }

.sat__lib-vit-heros-rideau__titre {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 1.15rem + 2.5vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--vit-encre);
  text-wrap: balance;
}

.sat__lib-vit-heros-rideau__chapo {
  max-width: 40rem;
  margin: 1rem auto 0;
  font-size: 1.06rem;
  font-style: italic;
  line-height: 1.62;
  text-wrap: pretty;
}

.sat__lib-vit-heros-rideau__chapo:empty { display: none; }

.sat__lib-vit-heros-rideau__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem .9rem;
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--vit-filet);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sat__lib-vit-heros-rideau__meta:empty { display: none; }

.sat__lib-vit-heros-rideau__meta > * + *::before {
  content: "";
  display: inline-block;
  width: .3rem;
  height: .3rem;
  margin-right: .9rem;
  vertical-align: middle;
  background: var(--vit-or);
  transform: rotate(45deg);
}

/* La lettrine du premier paragraphe, sur les pages que ce heros ouvre. */
.sat__lib-vit-heros-rideau ~ * .sat__lib-prose > p:first-child::first-letter {
  float: left;
  margin: .08em .12em 0 0;
  font-family: var(--font-heading);
  font-size: 3.4em;
  font-weight: 700;
  line-height: .8;
  color: var(--vit-encre);
}

/* ECRAN LARGE : LA PLAQUE MONTE SUR LA SCENE, A COTE DE LA PHOTO. Empilee sous la scene,
   elle mettait le H1 a 1 000 px du haut (mesure du 2026-09-28, 1 440 x 900 et 1 280 x
   720) : le lecteur voyait une photo et pas le titre de la page. Cote a cote, photo et
   titre tiennent dans le premier ecran ; sur telephone, rien ne change (la pile y place
   deja le H1 a 630 px).
   L'en-tete et la scene partagent la meme grille (--scene-colonnes, meme gouttiere) : la
   photo occupe la 2e colonne de la scene, la plaque la 3e de l'en-tete, par-dessus. */
@media (min-width: 64rem) {
  .sat__lib-vit-heros-rideau,
  .sat__lib-vit-heros-rideau__scene { --rideau: clamp(3.5rem, 5vw, 6rem); }

  .sat__lib-vit-heros-rideau {
    --scene-colonnes: minmax(var(--rideau), 1fr) minmax(0, 38rem) minmax(22rem, 27rem) minmax(var(--rideau), 1fr);
    --scene-gouttiere: clamp(1.6rem, 2.5vw, 2.6rem);
    display: grid;
    grid-template-columns: var(--scene-colonnes);
    column-gap: var(--scene-gouttiere);
    max-width: 84rem;
    margin: 0 auto;
  }

  .sat__lib-vit-heros-rideau__scene {
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: var(--scene-colonnes);
    column-gap: var(--scene-gouttiere);
    align-content: center;
    max-width: none;
    width: 100%;
    padding-bottom: clamp(3.2rem, 2rem + 3vw, 4.8rem);
  }

  .sat__lib-vit-heros-rideau__plaque {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    width: auto;
    margin: 4.2rem 0 2.4rem;
  }

  .sat__lib-vit-heros-rideau__titre { font-size: clamp(1.9rem, .9rem + 1.5vw, 2.55rem); }

  .sat__lib-vit-heros-rideau__chapo { font-size: 1rem; }
}

@media (max-width: 40rem) {
  .sat__lib-vit-heros-rideau__lambrequin { --feston: 1.1rem; height: calc(.9rem + var(--feston)); }
  .sat__lib-vit-heros-rideau__rideau::after { height: .4rem; }
}

@media print {
  .sat__lib-vit-heros-rideau__scene { background: none; padding: 0; }
  .sat__lib-vit-heros-rideau__rideau,
  .sat__lib-vit-heros-rideau__lambrequin { display: none; }
  .sat__lib-vit-heros-rideau__plaque { margin-top: 1rem; box-shadow: none; }
}

/* lib-vit-marquise : store raye festonne, enseigne doree sur laque, rayons.

   Le feston est un MASQUE : un rectangle, plus une rangee de demi-disques au bas du
   store. Seule l'opacite du masque compte, sa couleur n'est jamais vue. */

.sat__lib-vit-marquise {
  position: relative;
  background: var(--vit-laque);
  color: var(--vit-or-clair);
  border-bottom: 4px double var(--vit-or);
}

.sat__lib-vit-marquise__store {
  --feston: 1.3rem;
  height: calc(2.2rem + var(--feston));
  border-top: .4rem solid var(--vit-or);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--vit-laque) 38%, transparent),
      transparent 45%, color-mix(in srgb, var(--vit-laque) 16%, transparent)),
    repeating-linear-gradient(90deg, var(--vit-rayure-a) 0 calc(var(--feston) * 2),
      var(--vit-rayure-b) calc(var(--feston) * 2) calc(var(--feston) * 4));
  -webkit-mask:
    linear-gradient(black, black) top / 100% calc(100% - var(--feston)) no-repeat,
    radial-gradient(circle at 50% 0, black calc(var(--feston) - .5px), transparent var(--feston))
      0 100% / calc(var(--feston) * 2) var(--feston) repeat-x;
  mask:
    linear-gradient(black, black) top / 100% calc(100% - var(--feston)) no-repeat,
    radial-gradient(circle at 50% 0, black calc(var(--feston) - .5px), transparent var(--feston))
      0 100% / calc(var(--feston) * 2) var(--feston) repeat-x;
}

.sat__lib-vit-marquise__fronton {
  max-width: var(--vit-largeur);
  margin: 0 auto;
  padding: .9rem var(--vit-gouttiere) 1rem;
  text-align: center;
}

/* L'enseigne : double filet dore, coins en losange. */
.sat__lib-vit-marquise__enseigne {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  max-width: 100%;
  padding: .8rem clamp(1.2rem, .6rem + 3vw, 3rem);
  border: 1px solid var(--vit-or);
  outline: 1px solid color-mix(in srgb, var(--vit-or) 55%, transparent);
  outline-offset: .3rem;
  color: var(--vit-or-clair);
  text-decoration: none;
}

.sat__lib-vit-marquise__enseigne::before,
.sat__lib-vit-marquise__enseigne::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .7rem;
  height: .7rem;
  background: var(--vit-or);
  transform: translateY(-50%) rotate(45deg);
}

.sat__lib-vit-marquise__enseigne::before { left: -.72rem; }
.sat__lib-vit-marquise__enseigne::after { right: -.72rem; }

.sat__lib-vit-marquise__marque {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .03em;
  color: var(--vit-or-clair);
  background: var(--vit-or-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sat__lib-vit-marquise__baseline {
  font-family: var(--font-body);
  font-size: .92rem;
  font-style: italic;
  color: color-mix(in srgb, var(--vit-or-clair) 88%, transparent);
}

.sat__lib-vit-marquise__baseline:empty { display: none; }

.sat__lib-vit-marquise__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem 1.6rem;
  margin-top: .9rem;
}

.sat__lib-vit-marquise__lien {
  position: relative;
  padding: .3rem 0;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vit-or-clair);
  text-decoration: none;
}

/* Un losange dore entre deux rayons. */
.sat__lib-vit-marquise__lien + .sat__lib-vit-marquise__lien::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: 50%;
  width: .32rem;
  height: .32rem;
  background: var(--vit-or);
  transform: translateY(-50%) rotate(45deg);
}

.sat__lib-vit-marquise__lien::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--vit-or);
  transform: scaleX(0);
  transition: transform .25s ease;
}

.sat__lib-vit-marquise__lien:hover::after,
.sat__lib-vit-marquise__lien:focus-visible::after,
.sat__lib-vit-marquise__lien[aria-current="page"]::after { transform: scaleX(1); }

.sat__lib-vit-marquise a:focus-visible {
  outline: 2px solid var(--vit-or-clair);
  outline-offset: 4px;
}

@media (max-width: 40rem) {
  .sat__lib-vit-marquise__store { --feston: 1rem; height: calc(1.4rem + var(--feston)); }
  .sat__lib-vit-marquise__nav { gap: .2rem 1.05rem; }
  .sat__lib-vit-marquise__lien { font-size: .7rem; letter-spacing: .08em; }
  .sat__lib-vit-marquise__lien + .sat__lib-vit-marquise__lien::before { left: -.7rem; }
}

@media print {
  .sat__lib-vit-marquise { background: none; color: inherit; border: 0; }
  .sat__lib-vit-marquise__store,
  .sat__lib-vit-marquise__nav { display: none; }
  .sat__lib-vit-marquise__marque { -webkit-text-fill-color: currentColor; background: none; }
}

/* lib-vit-page : enveloppe de page du theme vitrine, et sa couche de tokens.

   Livree sur chaque page (la brique enveloppe tout, 404 comprise) : c'est donc ici que
   vivent l'echelle --vit-*, le papier peint, et l'habillage des briques de la base
   (socle, agence, boutique) quand elles sont posees dans une page du theme.

   L'ECHELLE SE REDEFINIT EN ENTIER DANS LA FEUILLE DU SITE (sur :root). Les valeurs
   ci-dessous rendent le theme lisible seul ; servies telles quelles par deux sites,
   elles deviendraient un invariant commun. */

:root {
  --vit-or: #A8844A;
  --vit-or-clair: #EBDDB8;
  --vit-velours: #5A1F3A;
  --vit-laque: #2A1426;
  --vit-rayure-a: #C9A0B8;
  --vit-rayure-b: #FBF6EE;
  /* L'encre des titres et des liens sur fond clair. Par defaut la couleur de lien du
     builder (--color-lien : la primaire assombrie jusqu'a 4,5:1) ; un site dont la
     secondaire est sombre peut la prendre a la place. */
  --vit-encre: var(--color-lien, var(--color-text));
}

/* Les valeurs DERIVEES se declarent sur l'enveloppe : elles se calculent avec les six
   jetons du site, pas avec les valeurs par defaut ci-dessus. */
.sat__lib-vit-page {
  --vit-or-degrade: linear-gradient(135deg, var(--vit-or-clair) 0%, var(--vit-or) 36%,
    color-mix(in srgb, var(--vit-or) 70%, var(--vit-laque)) 52%, var(--vit-or) 68%,
    var(--vit-or-clair) 100%);
  --vit-creme: color-mix(in srgb, var(--vit-or-clair) 28%, var(--color-bg));
  --vit-ruban: var(--color-primary);
  --vit-filet: color-mix(in srgb, var(--vit-or) 55%, transparent);
  --vit-ombre: 0 24px 44px -24px color-mix(in srgb, var(--vit-laque) 70%, transparent);
  --vit-gouttiere: clamp(1rem, .5rem + 2.2vw, 2.5rem);
  --vit-largeur: 76rem;
  --vit-pas: clamp(2.6rem, 1.6rem + 4vw, 5.2rem);

  min-height: 100vh;
  overflow-x: clip;
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Le papier peint : une rayure de boutique, a peine lisible, jamais sous un texte long
     (les bandes et les cartes posent leur propre fond). */
  background-image: repeating-linear-gradient(90deg, transparent 0 2.8rem,
    color-mix(in srgb, var(--vit-rayure-a) 4.5%, transparent) 2.8rem 5.6rem);
}

.sat__lib-vit-page__main { display: block; }

/* --- Ornements partages ------------------------------------------------------------
   Un sur-titre et un titre de section se ressemblent d'une brique a l'autre : ils sont
   marques par l'attribut data-vit et habilles ici, une seule fois. */
.sat__lib-vit-page [data-vit="surtitre"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 0 0 .7rem;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vit-encre);
}

.sat__lib-vit-page [data-vit="surtitre"]::before,
.sat__lib-vit-page [data-vit="surtitre"]::after {
  content: "";
  flex: 0 1 3.2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vit-or));
}

.sat__lib-vit-page [data-vit="surtitre"]::after {
  background: linear-gradient(90deg, var(--vit-or), transparent);
}

.sat__lib-vit-page [data-vit="surtitre"]:empty { display: none; }

.sat__lib-vit-page [data-vit="titre"] {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--vit-encre);
  text-wrap: balance;
}

.sat__lib-vit-page [data-vit="intro"] {
  max-width: 40rem;
  margin: .8rem auto 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.sat__lib-vit-page [data-vit="intro"]:empty { display: none; }

/* --- Habillage de la base -------------------------------------------------------- */
/* :where() ramene la regle a la force d'un simple selecteur d'element : les liens des
   bandes sombres (marquise, rayons, pied) gardent la couleur que leur brique leur donne. */
:where(.sat__lib-vit-page) a { color: var(--vit-encre); text-decoration-color: var(--vit-filet); }

.sat__lib-vit-page .sat__lib-grille__titre,
.sat__lib-vit-page .sat__lib-faq__titre,
.sat__lib-vit-page .sat__lib-sources__titre,
.sat__lib-vit-page .sat__lib-limites__titre,
.sat__lib-vit-page .sat__lib-routeur__titre,
.sat__lib-vit-page .sat__lib-plan-site__titre,
.sat__lib-vit-page .sat__lib-plan-site__famille-titre,
.sat__lib-vit-page .sat__lib-sommaire__titre {
  font-family: var(--font-heading);
  color: var(--vit-encre);
  letter-spacing: -.005em;
}

.sat__lib-vit-page .sat__lib-grille__tete { justify-content: center; text-align: center; }

.sat__lib-vit-page .sat__lib-grille__titre { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); }

/* UNE RANGEE INCOMPLETE SE CENTRE, COMME UN ETALAGE. En grille, la derniere carte d'une
   rubrique de seize guides restait seule a gauche sous trois colonnes (capture du
   2026-09-28, /offrir/) : une vitrine a moitie garnie. En flex, elle se pose au milieu. */
.sat__lib-vit-page .sat__lib-grille__cartes {
  --par-rangee: 1;
  --ecart: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.2rem var(--ecart);
}

.sat__lib-vit-page .sat__lib-grille__cartes > * {
  flex: 0 1 calc((100% - (var(--par-rangee) - 1) * var(--ecart)) / var(--par-rangee));
  min-width: 0;
}

@media (min-width: 38rem) { .sat__lib-vit-page .sat__lib-grille__cartes { --par-rangee: 2; } }
@media (min-width: 60rem) { .sat__lib-vit-page .sat__lib-grille__cartes { --par-rangee: 3; } }

.sat__lib-vit-page .sat__lib-grille__intro,
.sat__lib-vit-page .sat__lib-grille__ordre { margin-inline: auto; text-align: center; }

.sat__lib-vit-page .sat__lib-grille__compte:empty,
.sat__lib-vit-page .sat__lib-grille__intro:empty { display: none; }

/* Les briques de la base lisent --color-primary pour leurs liens, numeros et petits
   titres. Une primaire festive y serait illisible (design.md 5) : dans ces briques-la,
   la primaire devient l'encre du theme. Les aplats du theme ne passent pas par elles. */
.sat__lib-vit-page :is(.sat__lib-prose, .sat__lib-sommaire, .sat__lib-sources, .sat__lib-faq, .sat__lib-limites,
  .sat__lib-plan-site, .sat__lib-routeur) {
  --color-primary: var(--vit-encre);
}

.sat__lib-vit-page .sat__lib-sources {
  background: var(--vit-creme);
  border-color: var(--vit-or);
  border-radius: 0;
}

/* Le routeur devient un comptoir de renseignements : chaque cas est une etiquette. */
.sat__lib-vit-page .sat__lib-routeur {
  max-width: var(--vit-largeur);
  margin: 0 auto;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sat__lib-vit-page .sat__lib-routeur__titre {
  text-align: center;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);
}

/* Meme regle que la grille des cartes : huit cas en rangees de quatre, et une rangee
   incomplete centree plutot que calee a gauche (capture du 2026-09-28 : 3 + 3 + 2). */
.sat__lib-vit-page .sat__lib-routeur__cas {
  --par-rangee: 1;
  --ecart: .9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ecart);
}

.sat__lib-vit-page .sat__lib-routeur__cas > * {
  flex: 0 1 calc((100% - (var(--par-rangee) - 1) * var(--ecart)) / var(--par-rangee));
  min-width: 0;
}

@media (min-width: 38rem) { .sat__lib-vit-page .sat__lib-routeur__cas { --par-rangee: 2; } }
@media (min-width: 64rem) { .sat__lib-vit-page .sat__lib-routeur__cas { --par-rangee: 4; } }

.sat__lib-vit-page .sat__lib-routeur__cas-item {
  background: var(--color-bg);
  border: 1px solid var(--vit-filet);
  border-top: 3px solid var(--vit-or);
  border-radius: 0;
  box-shadow: var(--vit-ombre);
}

.sat__lib-vit-page .sat__lib-routeur__lien {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  color: var(--vit-encre);
}

/* UN TEXTE LONG NE SE LIT PAS SUR LE PAPIER PEINT. Les rayures passaient sous les neuf
   minutes d'un article et sous sa FAQ (capture du 2026-09-28) : la bande qui les porte
   pose un fond uni, le papier peint reste aux pages de vitrine. */
.sat__lib-vit-page .sat__lib-bande:has(.sat__lib-prose, .sat__lib-faq) { background-color: var(--color-bg); }

/* Le corps de texte : titres a la couleur du magazine, citations en plaques. */
.sat__lib-vit-page .sat__lib-prose h2 {
  position: relative;
  padding-top: .9rem;
  font-family: var(--font-heading);
  color: var(--vit-encre);
}

.sat__lib-vit-page .sat__lib-prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6rem;
  height: 2px;
  background: var(--vit-or-degrade);
}

.sat__lib-vit-page .sat__lib-prose h1 {
  margin: 0 0 1.2rem;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  line-height: 1.12;
  color: var(--vit-encre);
  text-wrap: balance;
}

.sat__lib-vit-page .sat__lib-prose h3 { font-family: var(--font-heading); color: var(--vit-encre); }

.sat__lib-vit-page .sat__lib-prose figure { margin: 2rem 0; }

.sat__lib-vit-page .sat__lib-prose blockquote {
  margin: 0;
  padding: 1.2rem 1.4rem;
  background: var(--vit-creme);
  border: 0;
  border-left: 3px solid var(--vit-or);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--vit-encre);
}

.sat__lib-vit-page .sat__lib-prose figcaption {
  margin-top: .5rem;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}

.sat__lib-vit-page .sat__lib-prose aside {
  background: var(--vit-creme);
  border-color: var(--vit-filet);
}

.sat__lib-vit-page .sat__lib-prose th {
  background: var(--vit-creme);
  color: var(--vit-encre);
}

/* Page d'article : sommaire a cote du texte au-dela de 64rem, colle dans sa colonne. */
@media (min-width: 64rem) {
  .sat__lib-vit-page .sat__lib-bande__inner:has(> .sat__lib-sommaire) {
    display: grid;
    grid-template-columns: 14rem minmax(0, 41rem);
    justify-content: center;
    align-items: start;
    gap: 3.5rem;
  }

  .sat__lib-vit-page .sat__lib-bande__inner:has(> .sat__lib-sommaire) > .sat__lib-sommaire {
    position: sticky;
    top: 1.5rem;
    margin: 0;
  }
}

.sat__lib-vit-page .sat__lib-sommaire {
  position: static;
  padding: 1.1rem 1.2rem;
  background: var(--vit-creme);
  border: 1px solid var(--vit-filet);
  border-top: 3px solid var(--vit-or);
  border-radius: 0;
}

.sat__lib-vit-page .sat__lib-limites,
.sat__lib-vit-page .sat__lib-faq,
.sat__lib-vit-page .sat__lib-sources {
  max-width: 48rem;
  margin-inline: auto;
}

.sat__lib-vit-page .sat__lib-limites {
  background: var(--color-bg);
  border: 1px solid var(--vit-filet);
  outline: 1px solid var(--vit-filet);
  outline-offset: -.45rem;
  border-radius: 0;
}

.sat__lib-vit-page .sat__lib-plan-site__lien { font-weight: 700; }

.sat__lib-vit-page .sat__lib-plan-site__famille {
  border-top: 3px double var(--vit-or);
}

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

@media print {
  .sat__lib-vit-page { background: none; }
  .sat__lib-vit-page [data-vit="surtitre"]::before,
  .sat__lib-vit-page [data-vit="surtitre"]::after { display: none; }
}

/* lib-vit-pied : laque, corniche a denticules dorees, colonnes de liens. */

.sat__lib-vit-pied {
  position: relative;
  margin-top: var(--vit-pas);
  background: var(--vit-laque);
  color: var(--vit-or-clair);
}

.sat__lib-vit-pied__corniche {
  height: 1.3rem;
  border-top: 4px double var(--vit-or);
  background:
    linear-gradient(var(--vit-or), var(--vit-or)) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--vit-or) 0 .55rem, transparent .55rem 1.1rem)
      0 .35rem / 100% .55rem no-repeat;
  opacity: .9;
}

.sat__lib-vit-pied__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.4rem;
  max-width: var(--vit-largeur);
  margin: 0 auto;
  padding: clamp(2.2rem, 1.6rem + 2vw, 3.4rem) var(--vit-gouttiere);
}

@media (min-width: 56rem) {
  .sat__lib-vit-pied__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; }
}

.sat__lib-vit-pied__nom {
  margin: 0 0 .6rem;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--vit-or-clair);
  background: var(--vit-or-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sat__lib-vit-pied__description {
  margin: 0 0 1.2rem;
  font-size: .95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--vit-or-clair) 88%, transparent);
}

.sat__lib-vit-pied__action {
  display: inline-block;
  padding: .6rem 1.1rem;
  border: 1px solid var(--vit-or);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vit-or-clair);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.sat__lib-vit-pied__action:empty { display: none; }

.sat__lib-vit-pied__action:hover,
.sat__lib-vit-pied__action:focus-visible {
  background: var(--vit-or-clair);
  color: var(--vit-laque);
}

.sat__lib-vit-pied__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2rem;
}

.sat__lib-vit-pied__colonne-titre {
  margin: 0 0 .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--vit-or) 60%, transparent);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vit-or-clair);
}

.sat__lib-vit-pied__liste {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sat__lib-vit-pied a:not(.sat__lib-vit-pied__action) {
  color: var(--vit-or-clair);
  font-size: .95rem;
  text-decoration: none;
}

.sat__lib-vit-pied a:not(.sat__lib-vit-pied__action):hover,
.sat__lib-vit-pied a:not(.sat__lib-vit-pied__action):focus-visible {
  text-decoration: underline;
  text-underline-offset: .2em;
}

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

.sat__lib-vit-pied__mentions {
  max-width: var(--vit-largeur);
  margin: 0 auto;
  padding: 1.2rem var(--vit-gouttiere) 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--vit-or) 35%, transparent);
  font-size: .8rem;
  line-height: 1.6;
  text-align: center;
  color: color-mix(in srgb, var(--vit-or-clair) 80%, transparent);
}

@media print {
  .sat__lib-vit-pied { display: none; }
}

/* lib-vit-portrait : medaillon ovale laque, double filet dore, initiales en didone. */

.sat__lib-vit-portrait {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem 1.6rem;
  max-width: 48rem;
  margin: 2.6rem auto 0;
  padding: 1.4rem 1.6rem;
  background: var(--vit-creme);
  border: 1px solid var(--vit-filet);
  border-left: 3px solid var(--vit-or);
}

.sat__lib-vit-portrait__medaillon {
  width: clamp(4.6rem, 3.6rem + 3vw, 6.2rem);
  height: auto;
  filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--vit-laque) 35%, transparent));
}

.sat__lib-vit-portrait__fond { fill: var(--vit-laque); stroke: var(--vit-or); stroke-width: 4; }
.sat__lib-vit-portrait__filet { fill: none; stroke: var(--vit-or-clair); stroke-width: 1; opacity: .8; }

.sat__lib-vit-portrait__initiales {
  fill: var(--vit-or-clair);
  font-family: var(--font-heading);
  font-size: 40px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 1px;
}

.sat__lib-vit-portrait__nom {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--vit-encre);
}

.sat__lib-vit-portrait__role {
  margin: .15rem 0 .5rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sat__lib-vit-portrait__role:empty { display: none; }

.sat__lib-vit-portrait__bio {
  margin: 0;
  font-size: .96rem;
  line-height: 1.6;
  text-wrap: pretty;
}

@media (max-width: 30rem) {
  .sat__lib-vit-portrait { grid-template-columns: 1fr; justify-items: center; text-align: center; border-left-width: 1px; border-top: 3px solid var(--vit-or); }
}

@media print {
  .sat__lib-vit-portrait { background: none; }
}

/* lib-vit-rayons : bande laquee, un panneau photo par etage, plaque de laiton.
   La bande redefinit ce que lisent les ornements partages (sur-titre, titre, intro). */

.sat__lib-vit-rayons {
  position: relative;
  padding: var(--vit-pas) var(--vit-gouttiere);
  background:
    radial-gradient(60rem 22rem at 50% 0, color-mix(in srgb, var(--vit-velours) 70%, transparent), transparent 70%),
    var(--vit-laque);
  border-block: 4px double var(--vit-or);
  color: var(--vit-or-clair);
}

.sat__lib-vit-rayons [data-vit="surtitre"] { color: var(--vit-or-clair); }
.sat__lib-vit-rayons [data-vit="titre"] { color: var(--vit-or-clair); }
.sat__lib-vit-rayons [data-vit="intro"] { color: color-mix(in srgb, var(--vit-or-clair) 86%, transparent); }

.sat__lib-vit-rayons__entete {
  max-width: 44rem;
  margin: 0 auto clamp(1.8rem, 1.2rem + 2vw, 3rem);
  text-align: center;
}

.sat__lib-vit-rayons__etages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.6rem;
  max-width: var(--vit-largeur);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.sat__lib-vit-rayons__rayon {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(18rem, 14rem + 10vw, 25rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--vit-or);
  outline: 1px solid color-mix(in srgb, var(--vit-or) 40%, transparent);
  outline-offset: .35rem;
}

.sat__lib-vit-rayons__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--vit-velours);
  transition: transform .8s ease;
}

.sat__lib-vit-rayons__rayon[data-cadrage="haut"] .sat__lib-vit-rayons__photo { object-position: 50% 20%; }
.sat__lib-vit-rayons__rayon[data-cadrage="bas"] .sat__lib-vit-rayons__photo { object-position: 50% 80%; }
.sat__lib-vit-rayons__rayon[data-cadrage="gauche"] .sat__lib-vit-rayons__photo { object-position: 22% 50%; }
.sat__lib-vit-rayons__rayon[data-cadrage="droite"] .sat__lib-vit-rayons__photo { object-position: 78% 50%; }

.sat__lib-vit-rayons__rayon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--vit-laque) 75%, transparent));
  pointer-events: none;
}

.sat__lib-vit-rayons__plaque {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 1.1rem;
  padding: 1rem 1.2rem 1.1rem;
  background: color-mix(in srgb, var(--vit-laque) 88%, transparent);
  border-top: 2px solid var(--vit-or);
}

.sat__lib-vit-rayons__etage {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .35rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vit-or-clair);
}

.sat__lib-vit-rayons__etage::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border: 1px solid var(--vit-or);
  border-radius: 50%;
  background: radial-gradient(circle, var(--vit-or-clair) 0 35%, transparent 40%);
}

.sat__lib-vit-rayons__nom {
  margin: 0 0 .3rem;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem);
  line-height: 1.15;
}

.sat__lib-vit-rayons__lien {
  color: var(--vit-or-clair);
  text-decoration: none;
}

/* Le lien s'etire sur tout le panneau : la plaque est son bloc conteneur, le debord est
   rogne par l'overflow du rayon. */
.sat__lib-vit-rayons__lien::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -100vh -100vw;
}

.sat__lib-vit-rayons__texte {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--vit-or-clair) 90%, transparent);
}

.sat__lib-vit-rayons__rayon:hover .sat__lib-vit-rayons__photo { transform: scale(1.05); }
.sat__lib-vit-rayons__rayon:hover .sat__lib-vit-rayons__lien { text-decoration: underline; text-underline-offset: .2em; }

.sat__lib-vit-rayons__lien:focus-visible { outline: none; }
.sat__lib-vit-rayons__rayon:has(.sat__lib-vit-rayons__lien:focus-visible) { outline: 2px solid var(--vit-or-clair); }

@media print {
  .sat__lib-vit-rayons { background: none; color: inherit; }
  .sat__lib-vit-rayons__rayon::after { display: none; }
}

/* lib-vit-selection : cartes a medaillon ovale cercle d'or, rang en pastille laquee. */

.sat__lib-vit-selection {
  max-width: var(--vit-largeur);
  margin: 0 auto;
  padding: var(--vit-pas) var(--vit-gouttiere);
}

.sat__lib-vit-selection__entete {
  max-width: 44rem;
  margin: 0 auto clamp(1.8rem, 1.2rem + 2vw, 3rem);
  text-align: center;
}

.sat__lib-vit-selection__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
  gap: 2rem 2.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sat__lib-vit-selection__item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(6rem, 4.5rem + 5vw, 8.5rem) minmax(0, 1fr);
  align-items: center;
  gap: 1.2rem 1.4rem;
  margin: 0;
  padding: 1.4rem 1.4rem 1.3rem;
  background: var(--color-bg);
  border: 1px solid var(--vit-filet);
  box-shadow: var(--vit-ombre);
  transition: transform .3s ease, border-color .3s ease;
}

.sat__lib-vit-selection__rang {
  position: absolute;
  z-index: 1;
  top: -1rem;
  left: 1rem;
  display: grid;
  place-items: center;
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 .4rem;
  border: 1px solid var(--vit-or);
  border-radius: 999px;
  background: var(--vit-laque);
  font-family: var(--font-heading);
  font-size: .95rem;
  font-style: italic;
  font-weight: 600;
  color: var(--vit-or-clair);
}

.sat__lib-vit-selection__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 50%;
  border: .28rem solid var(--vit-creme);
  box-shadow: 0 0 0 1px var(--vit-or), 0 12px 22px -14px color-mix(in srgb, var(--vit-laque) 80%, transparent);
  background: var(--vit-velours);
}

.sat__lib-vit-selection__item[data-cadrage="haut"] .sat__lib-vit-selection__photo { object-position: 50% 20%; }
.sat__lib-vit-selection__item[data-cadrage="bas"] .sat__lib-vit-selection__photo { object-position: 50% 80%; }
.sat__lib-vit-selection__item[data-cadrage="gauche"] .sat__lib-vit-selection__photo { object-position: 22% 50%; }
.sat__lib-vit-selection__item[data-cadrage="droite"] .sat__lib-vit-selection__photo { object-position: 78% 50%; }

.sat__lib-vit-selection__nom {
  margin: 0 0 .4rem;
  font-family: var(--font-heading);
  font-size: 1.22rem;
  line-height: 1.22;
  text-wrap: balance;
}

.sat__lib-vit-selection__lien {
  color: var(--vit-encre);
  text-decoration: none;
}

.sat__lib-vit-selection__lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sat__lib-vit-selection__pourquoi {
  margin: 0;
  font-size: .95rem;
  line-height: 1.58;
  text-wrap: pretty;
}

.sat__lib-vit-selection__pour-qui {
  margin: .55rem 0 0;
  padding-top: .5rem;
  border-top: 1px solid var(--vit-filet);
  font-size: .86rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.sat__lib-vit-selection__pour-qui:empty { display: none; }

.sat__lib-vit-selection__item:hover,
.sat__lib-vit-selection__item:has(.sat__lib-vit-selection__lien:focus-visible) {
  transform: translateY(-3px);
  border-color: var(--vit-or);
}

.sat__lib-vit-selection__item:hover .sat__lib-vit-selection__lien { text-decoration: underline; text-underline-offset: .2em; }

.sat__lib-vit-selection__lien:focus-visible { outline: none; }

.sat__lib-vit-selection__item:has(.sat__lib-vit-selection__lien:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

@media (max-width: 26rem) {
  .sat__lib-vit-selection__item { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .sat__lib-vit-selection__photo { width: 9rem; }
}

@media print {
  .sat__lib-vit-selection__item { box-shadow: none; break-inside: avoid; }
}


/* Au Bonheur des Dames : feuille du site, servie APRES les partielles des briques.
   Theme vitrine, variante belle-epoque. Cette feuille ne fait que trois choses : declarer
   les polices auto-hebergees, redefinir l'echelle --vit-* du theme pour ce site, et
   habiller ce que le site a en propre (sa FAQ servie ouverte, les vignettes des articles
   similaires). Palette et polices de base : config.json (theme). */

/* ---------------------------------------------------------------------------------
   Polices auto-hebergees (woff2, sous-ensemble latin). Aucune requete a un tiers : la
   police de titre est prechargee par les gabarits.
   --------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-display.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: 'Playfair Display';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-italique.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/nunito.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: 'Nunito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/nunito-italique.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------------
   L'echelle du theme vitrine, redefinie en entier : laiton, champagne, velours prune,
   laque presque noire, store rose et ivoire.
   --------------------------------------------------------------------------------- */
:root {
  --vit-or: #B08A4E;
  --vit-or-clair: #EFDFBB;
  --vit-velours: #6A2458;
  --vit-laque: #2E1430;
  --vit-rayure-a: #C77DBA;
  --vit-rayure-b: #FBF3E6;
  --vit-encre: var(--color-secondary);
  --btq-rayon: 0;
  --btq-police-titre: var(--font-heading);
  --btq-police-texte: var(--font-body);
  --fig-rayon: 0;
}

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

html { scroll-behavior: smooth; }

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

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

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

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

/* ---------------------------------------------------------------------------------
   La FAQ est servie ouverte (blocks/lib-faq-item.html) : la question est un titre, plus
   un bouton. Le chevron de la bibliotheque devient un losange dore, sans rotation.
   --------------------------------------------------------------------------------- */
.sat__lib-faq__item { padding: .3rem 0 .2rem; }

.sat__lib-faq__question {
  margin: 0;
  padding-bottom: .35rem;
  cursor: auto;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--color-secondary);
}

.sat__lib-faq__question::before {
  width: .45rem;
  height: .45rem;
  border: 0;
  border-radius: 0;
  background: var(--vit-or);
  transform: rotate(45deg);
}

.sat__lib-faq__reponse { margin: 0; }

/* ---------------------------------------------------------------------------------
   Les vitrines des articles similaires. Le builder ne livre que des liens : chaque guide
   donne ici sa photo a la vitrine qui le porte. Un guide sans ligne garde une vitrine de
   velours uni. ponytail: table tenue a la main, a retirer quand lib-related recevra
   l'image de l'article similaire depuis le builder.
   --------------------------------------------------------------------------------- */
.sat__lib-related a[href="/beaute-des-fetes-preparer-sa-peau/"] { --vit-vignette: url(/assets/img/beaute-des-fetes-preparer-sa-peau.webp); }
.sat__lib-related a[href="/bien-choisir-robe-nouvel-an/"] { --vit-vignette: url(/assets/img/bien-choisir-robe-nouvel-an.webp); }
.sat__lib-related a[href="/bijoux-createurs-francais/"] { --vit-vignette: url(/assets/img/bijoux-createurs-francais.webp); }
.sat__lib-related a[href="/bougies-parfumees-noel/"] { --vit-vignette: url(/assets/img/bougies-parfumees-noel.webp); }
.sat__lib-related a[href="/broche-vintage-accessoire-oublie/"] { --vit-vignette: url(/assets/img/broche-vintage-accessoire-oublie.webp); }
.sat__lib-related a[href="/cachemire-guide-achat/"] { --vit-vignette: url(/assets/img/cachemire-guide-achat.webp); }
.sat__lib-related a[href="/cadeau-noel-belle-mere/"] { --vit-vignette: url(/assets/img/cadeau-noel-belle-mere.webp); }
.sat__lib-related a[href="/cadeau-noel-grand-mere/"] { --vit-vignette: url(/assets/img/cadeau-noel-grand-mere.webp); }
.sat__lib-related a[href="/cadeau-noel-meilleure-amie/"] { --vit-vignette: url(/assets/img/cadeau-noel-meilleure-amie.webp); }
.sat__lib-related a[href="/cadeaux-noel-femme/"] { --vit-vignette: url(/assets/img/cadeaux-noel-femme.webp); }
.sat__lib-related a[href="/calendrier-avent-beaute-mode/"] { --vit-vignette: url(/assets/img/calendrier-avent-beaute-mode.webp); }
.sat__lib-related a[href="/capsule-wardrobe-hiver/"] { --vit-vignette: url(/assets/img/capsule-wardrobe-hiver.webp); }
.sat__lib-related a[href="/coffret-beaute-noel-selection/"] { --vit-vignette: url(/assets/img/coffret-beaute-noel-selection.webp); }
.sat__lib-related a[href="/echarpe-laine-cachemire-choisir/"] { --vit-vignette: url(/assets/img/echarpe-laine-cachemire-choisir.webp); }
.sat__lib-related a[href="/foulard-soie-porter-nouer/"] { --vit-vignette: url(/assets/img/foulard-soie-porter-nouer.webp); }
.sat__lib-related a[href="/garde-robe-fetes-reveillon/"] { --vit-vignette: url(/assets/img/garde-robe-fetes-reveillon.webp); }
.sat__lib-related a[href="/idees-cadeaux-maman-noel/"] { --vit-vignette: url(/assets/img/idees-cadeaux-maman-noel.webp); }
.sat__lib-related a[href="/lingerie-fine-offrir-noel/"] { --vit-vignette: url(/assets/img/lingerie-fine-offrir-noel.webp); }
.sat__lib-related a[href="/manteau-hiver-femme-guide/"] { --vit-vignette: url(/assets/img/manteau-hiver-femme-guide.webp); }
.sat__lib-related a[href="/maroquinerie-francaise-cuir/"] { --vit-vignette: url(/assets/img/maroquinerie-francaise-cuir.webp); }
.sat__lib-related a[href="/mode-ethique-marques-francaises/"] { --vit-vignette: url(/assets/img/mode-ethique-marques-francaises.webp); }
.sat__lib-related a[href="/montres-femme-elegantes-selection/"] { --vit-vignette: url(/assets/img/montres-femme-elegantes-selection.webp); }
.sat__lib-related a[href="/pantoufles-chaussons-hiver-cocooning/"] { --vit-vignette: url(/assets/img/pantoufles-chaussons-hiver-cocooning.webp); }
.sat__lib-related a[href="/parfum-femme-offrir-guide/"] { --vit-vignette: url(/assets/img/parfum-femme-offrir-guide.webp); }
.sat__lib-related a[href="/petits-cadeaux-femme-moins-de-20-euros/"] { --vit-vignette: url(/assets/img/petits-cadeaux-femme-moins-de-20-euros.webp); }
.sat__lib-related a[href="/pulls-noel-mode-assumer/"] { --vit-vignette: url(/assets/img/pulls-noel-mode-assumer.webp); }
.sat__lib-related a[href="/sac-main-intemporel/"] { --vit-vignette: url(/assets/img/sac-main-intemporel.webp); }
.sat__lib-related a[href="/soie-matiere-noble-guide/"] { --vit-vignette: url(/assets/img/soie-matiere-noble-guide.webp); }
.sat__lib-related a[href="/tenue-noel-en-famille-confortable/"] { --vit-vignette: url(/assets/img/tenue-noel-en-famille-confortable.webp); }
.sat__lib-related a[href="/tenue-noel-vintage/"] { --vit-vignette: url(/assets/img/tenue-noel-vintage.webp); }