/* Ne pas editer : copie de build/. */
:root {
    --shadow-card: none;
    --font-heading: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
    --font-body: Calibri, Carlito, 'Segoe UI', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
    --color-sur-secondary: #F0F6F3;
    --color-sur-primary: #F0F6F3;
    --focus-ring: #2F5D46;
    --color-primary: #2F5D46;
    --color-secondary: #6B4E8E;
    --color-bg: #F0F6F3;
    --color-text: #1C2A24;
    --color-surface: #E3EEE9;
    --color-surface-alt: #E3EAE7;
    --color-border: #CAD1CE;
    --color-text-muted: #66716C;
    --radius-card: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* lib-faq — les questions frequentes.

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

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

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

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

.ivx__lib-faq__liste details {
  border: 1px solid var(--trait, var(--color-border));
  border-radius: var(--rayon-m, var(--radius-card));
  background: var(--surface-haute, var(--color-surface));
  overflow: hidden;
  transition: border-color .18s ease;
}

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

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

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

/* Le chevron pivote a l'ouverture : deux traits en CSS, aucune requete. */
.ivx__lib-faq__liste summary::after {
  content: "";
  position: absolute;
  right: 1.25em;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.35rem;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .ivx__lib-faq__liste details,
  .ivx__lib-faq__liste summary::after { transition: none; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ivx__lib-progression {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ivx__lib-prose sup a { text-decoration: 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. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* lib-suite-guide — le guide suivant.

   UNE SEULE SUITE, MISE EN AVANT. Un bloc « articles lies » propose trois voisins et laisse
   choisir ; celui-ci propose UN pas suivant, parce qu'une serie a un ordre. Le lecteur qui
   vient de finir l'etape douze ne veut pas arbitrer entre trois options, il veut savoir ce
   qui vient apres — et c'est ce qui transforme une collection en parcours.

   Le precedent et l'index de famille tiennent sur une ligne discrete : on remonte rarement
   une serie, et ces liens servent surtout a celui qui est arrive par le milieu. */

.ivx__lib-suite-guide {
  margin: var(--pas-section, 3rem) 0 0;
}

/* --- le pas suivant --------------------------------------------------------------- */
.ivx__lib-suite-guide__suivant {
  position: relative;
  display: grid;
  gap: .3rem;
  padding: clamp(1.1rem, .9rem + 1vw, 1.6rem) clamp(3rem, 2.4rem + 2vw, 4rem)
           clamp(1.1rem, .9rem + 1vw, 1.6rem) clamp(1.2rem, 1rem + 1vw, 1.8rem);
  border: 1px solid var(--trait, var(--color-border));
  border-radius: var(--rayon-l, var(--radius-card));
  background: var(--surface-haute, var(--color-surface));
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

/* Le filet d'accent se deploie depuis la gauche : le mouvement dit dans quel sens on
   avance dans la serie. transform, donc pas de reflow. */
.ivx__lib-suite-guide__suivant::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--rayon-l, var(--radius-card)) var(--rayon-l, var(--radius-card)) 0 0;
  background: linear-gradient(90deg, var(--color-primary),
              color-mix(in srgb, var(--color-primary) 25%, transparent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}

/* La fleche est un caractere positionne, pas une image ni une police d'icones. */
.ivx__lib-suite-guide__suivant::after {
  content: "\2192";
  position: absolute;
  right: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  top: 50%;
  margin-top: -.7rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-primary);
  transition: transform .2s ease;
}

.ivx__lib-suite-guide__suivant:hover,
.ivx__lib-suite-guide__suivant:focus-visible {
  border-color: var(--accent-trait, var(--color-primary));
  background: var(--accent-doux, var(--color-surface));
  transform: translateY(-2px);
}

.ivx__lib-suite-guide__suivant:hover::before,
.ivx__lib-suite-guide__suivant:focus-visible::before { transform: scaleX(1); }

.ivx__lib-suite-guide__suivant:hover::after { transform: translateX(4px); }

.ivx__lib-suite-guide__eti {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Le rang situe la page dans sa serie : « 4 of 19 » dit qu'il reste du chemin, ce qu'un
   simple « suivant » ne dit pas. */
.ivx__lib-suite-guide__rang {
  padding: .1rem .45rem;
  border: 1px solid var(--accent-trait, var(--color-primary));
  border-radius: 999px;
  font-size: .92em;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.ivx__lib-suite-guide__rang:empty { display: none; }

.ivx__lib-suite-guide__titre {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--color-text);
  text-wrap: balance;
}

.ivx__lib-suite-guide__promesse {
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.ivx__lib-suite-guide__promesse:empty { display: none; }

/* --- la ligne discrete : precedent et index de famille ----------------------------- */
.ivx__lib-suite-guide__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.4rem;
  margin: .8rem 0 0;
  font-family: var(--font-body);
  font-size: .82rem;
}

.ivx__lib-suite-guide__pied a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.ivx__lib-suite-guide__pied a:hover,
.ivx__lib-suite-guide__pied a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Un lien sans cible n'est pas un lien : la premiere page d'une serie n'a pas de
   precedent, et l'entree disparait plutot que de renvoyer sur la page courante. */
.ivx__lib-suite-guide__precedent[href=""],
.ivx__lib-suite-guide__precedent:not([href]),
.ivx__lib-suite-guide__precedent:empty { display: none; }

.ivx__lib-suite-guide__precedent::before { content: "\2190\00a0"; }
.ivx__lib-suite-guide__famille { margin-left: auto; }

.ivx__lib-suite-guide a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ivx__lib-suite-guide__suivant,
  .ivx__lib-suite-guide__suivant::before,
  .ivx__lib-suite-guide__suivant::after { transition: none; }
  .ivx__lib-suite-guide__suivant:hover { transform: none; }
  .ivx__lib-suite-guide__suivant:hover::after { transform: none; }
}

@media print {
  .ivx__lib-suite-guide { display: none; }
}


/* infogerance-vaucluse.fr — le parcours d'externalisation, une frise et six stations.
   Vert d'eau pour les surfaces, vert de garrigue pour la structure, fleur de thym pour
   les reperes. Polices systeme uniquement : aucune requete tierce. */

:root {
  --ivx-eau: #D7ECE4;
  --ivx-eau-trait: #A8D1C2;
  --ivx-calcaire: #EEEBE1;
  --ivx-papier: #FBFDFC;
  --ivx-encre: #13201B;
  --ivx-largeur: 74rem;
  --ivx-lecture: 45rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ivx__corps {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.62;
}
img { max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--color-secondary); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; color: var(--ivx-encre); }

.ivx__evitement {
  position: absolute; left: -9999px; top: 0;
  background: var(--ivx-encre); color: var(--ivx-papier); padding: 0.5rem 1rem;
}
.ivx__evitement:focus { left: 1rem; z-index: 20; }

/* ---------- En-tete : marque, pages de confiance, frise des six etapes ---------- */
.ivx__entete { background: var(--ivx-papier); border-bottom: 1px solid var(--ivx-eau-trait); }
.ivx__entete-ligne {
  max-width: var(--ivx-largeur); margin: 0 auto; padding: 0.9rem 16px 0.5rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1.5rem;
}
.ivx__marque { display: flex; flex-direction: column; text-decoration: none; color: var(--ivx-encre); }
.ivx__marque:hover { color: var(--ivx-encre); }
.ivx__marque-nom { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 700; letter-spacing: 0.01em; }
.ivx__marque-sous { font-size: 0.86rem; color: var(--color-text-muted); }
.ivx__outils-liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.1rem; font-size: 0.95rem; }
.ivx__outils-liste a { color: var(--ivx-encre); text-decoration: none; border-bottom: 2px solid transparent; }
.ivx__outils-liste a:hover { border-bottom-color: var(--color-secondary); }

.ivx__frise { background: var(--ivx-eau); }
.ivx__frise-liste {
  position: relative; list-style: none; margin: 0 auto; padding: 0.8rem 16px 0.7rem;
  max-width: var(--ivx-largeur);
  display: grid; grid-template-columns: repeat(6, minmax(6.5rem, 1fr)); gap: 0;
  overflow-x: auto; scrollbar-width: thin;
}
.ivx__station { position: relative; text-align: center; }
.ivx__station::before {
  content: ""; position: absolute; top: 0.95rem; left: 0; right: 0; height: 2px;
  background: var(--color-primary); opacity: 0.45;
}
.ivx__station:first-child::before { left: 50%; }
.ivx__station:last-child::before { right: 50%; }
.ivx__station-lien {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  text-decoration: none; color: var(--ivx-encre); padding: 0 0.3rem;
}
.ivx__station-num {
  display: grid; place-items: center; width: 1.95rem; height: 1.95rem; border-radius: 50%;
  background: var(--color-primary); color: var(--color-sur-primary);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem;
  border: 3px solid var(--ivx-eau);
}
.ivx__station-nom { font-size: 0.88rem; line-height: 1.25; }
.ivx__station-lien:hover .ivx__station-num { background: var(--color-secondary); color: var(--color-sur-secondary); }
.ivx__station-lien:hover { color: var(--color-secondary); }

/* ---------- Accueil ---------- */
.ivx__ouverture { background: linear-gradient(180deg, var(--ivx-eau) 0%, var(--color-bg) 100%); }
.ivx__ouverture-dedans { max-width: var(--ivx-largeur); margin: 0 auto; padding: 2.6rem 16px 2.2rem; }
.ivx__surtitre {
  margin: 0 0 0.6rem; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-secondary); font-weight: 700;
}
.ivx__ouverture-titre { font-size: clamp(1.9rem, 4.2vw, 3rem); margin: 0 0 1rem; max-width: 22ch; color: var(--color-primary); }
.ivx__ouverture-chapo { font-size: 1.2rem; max-width: 46rem; margin: 0 0 1.4rem; }
.ivx__gestes { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0 0 1.2rem; }
.ivx__geste {
  display: inline-block; padding: 0.65rem 1.1rem; border: 2px solid var(--color-primary);
  border-radius: 2px; text-decoration: none; font-weight: 700; color: var(--color-primary);
  background: var(--ivx-papier);
}
.ivx__geste:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.ivx__geste--plein { background: var(--color-primary); color: var(--color-sur-primary); }
.ivx__geste--plein:hover { background: var(--color-secondary); color: var(--color-sur-secondary); }
.ivx__ouverture-note { margin: 0; font-size: 0.95rem; color: var(--color-text-muted); }

.ivx__parcours, .ivx__reperes, .ivx__section { max-width: var(--ivx-largeur); margin: 0 auto; padding: 2rem 16px; }
.ivx__parcours-titre, .ivx__reperes-titre, .ivx__section-titre { font-size: clamp(1.45rem, 3vw, 1.95rem); margin: 0 0 0.5rem; }
.ivx__parcours-chapo, .ivx__section-chapo { margin: 0 0 1.5rem; max-width: 46rem; color: var(--color-text-muted); }
.ivx__parcours-liste { list-style: none; margin: 0; padding: 0; position: relative; max-width: 52rem; }
.ivx__parcours-liste::before {
  content: ""; position: absolute; left: 1.2rem; top: 0.6rem; bottom: 0.6rem; width: 2px;
  background: var(--ivx-eau-trait);
}
.ivx__etape { position: relative; display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; padding: 0 0 1.6rem; }
.ivx__etape-num {
  position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--ivx-papier); border: 2px solid var(--color-primary); color: var(--color-primary);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem;
}
.ivx__etape-nom { margin: 0.2rem 0 0.3rem; font-size: 1.3rem; }
.ivx__etape-nom a { text-decoration: none; }
.ivx__etape-nom a:hover { text-decoration: underline; }
.ivx__etape-question { margin: 0 0 0.5rem; }
.ivx__etape-livrable {
  margin: 0; padding: 0.55rem 0.8rem; background: var(--ivx-calcaire);
  border-left: 3px solid var(--color-secondary); font-size: 0.98rem;
}

.ivx__reperes { border-top: 1px solid var(--ivx-eau-trait); }
.ivx__reperes-liste {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem;
}
.ivx__repere { padding-top: 0.8rem; border-top: 3px solid var(--color-secondary); }
.ivx__repere-intitule { margin: 0 0 0.3rem; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--ivx-encre); }
.ivx__repere-texte { margin: 0; font-size: 1rem; }

/* Fil de dossiers : accueil et pages d'etape */
.ivx__fil { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.ivx__carte {
  position: relative; background: var(--ivx-papier); border: 1px solid var(--ivx-eau-trait);
  border-top: 4px solid var(--color-primary); padding: 1rem 1.1rem 1.1rem;
}
.ivx__carte:hover { border-top-color: var(--color-secondary); }
.ivx__carte-date { margin: 0 0 0.35rem; font-size: 0.85rem; color: var(--color-text-muted); }
.ivx__carte-titre { margin: 0 0 0.45rem; font-size: 1.18rem; }
.ivx__carte-lien { text-decoration: none; color: var(--ivx-encre); }
.ivx__carte-lien::after { content: ""; position: absolute; inset: 0; }
.ivx__carte-lien:hover { color: var(--color-primary); text-decoration: underline; }
.ivx__carte-extrait { margin: 0; font-size: 0.98rem; }

/* ---------- Dossier : tete, rail du sommaire, texte ---------- */
.ivx__dossier, .ivx__etape-page { max-width: var(--ivx-largeur); margin: 0 auto; padding: 1.6rem 16px 3rem; }
.ivx__tete { max-width: 52rem; margin: 0 0 1.8rem; }
.ivx__ariane { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--color-text-muted); }
.ivx__ariane a { color: inherit; }
.ivx__ariane a::after { content: " ƒA "; color: var(--color-secondary); text-decoration: none; display: inline-block; margin: 0 0.35em; }
.ivx__tete-titre { font-size: clamp(1.75rem, 3.8vw, 2.6rem); margin: 0 0 0.8rem; }
.ivx__tete-chapo { font-size: 1.18rem; margin: 0 0 0.8rem; padding-left: 0.9rem; border-left: 4px solid var(--ivx-eau-trait); }
.ivx__tete-meta { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }
.ivx__tete--etape .ivx__tete-titre { color: var(--color-primary); }

.ivx__dossier-grille { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.ivx__rail:empty { display: none; }
.ivx__dossier-corps { min-width: 0; max-width: var(--ivx-lecture); }
@media (min-width: 62rem) {
  .ivx__dossier-grille { grid-template-columns: 15rem minmax(0, var(--ivx-lecture)); gap: 3rem; }
  .ivx__rail { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; }
  .ivx__rail:empty { display: block; }
}
.ivx__rail { font-size: 0.95rem; }

.ivx__dossier-corps h2, .ivx__guide h2, .ivx__page h2 { font-size: 1.5rem; margin: 2.2rem 0 0.7rem; }
.ivx__dossier-corps h3, .ivx__guide h3, .ivx__page h3 { font-size: 1.2rem; margin: 1.6rem 0 0.5rem; }
.ivx__dossier-corps table, .ivx__guide table, .ivx__page table {
  width: 100%; border-collapse: collapse; margin: 1.3rem 0; font-size: 0.98rem;
  display: block; overflow-x: auto;
}
.ivx__dossier-corps th, .ivx__dossier-corps td,
.ivx__guide th, .ivx__guide td, .ivx__page th, .ivx__page td {
  text-align: left; vertical-align: top; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--ivx-eau-trait);
}
.ivx__dossier-corps th, .ivx__guide th, .ivx__page th { background: var(--ivx-eau); font-family: var(--font-heading); }
.ivx__dossier-corps blockquote, .ivx__guide blockquote, .ivx__page blockquote {
  margin: 1.4rem 0; padding: 0.3rem 0 0.3rem 1.1rem; border-left: 4px solid var(--color-secondary);
}
.ivx__dossier-corps figcaption, .ivx__guide figcaption { font-size: 0.9rem; color: var(--color-text-muted); }

/* Chapitres numerotes : numero en pastille de thym, titre colle pendant la lecture */
.ivx__lib-chapitre { margin: 2.4rem 0 0; }
.ivx__lib-chapitre__tete { display: flex; align-items: baseline; gap: 0.7rem; background: var(--color-bg); }
.ivx__lib-chapitre__numero {
  flex: 0 0 auto; font-family: var(--font-heading); font-weight: 700; color: var(--color-secondary);
  font-size: 1rem; background: var(--ivx-eau); border: 0; text-decoration: none;
}
.ivx__lib-chapitre__titre { margin: 0; font-size: 1.5rem; }
.ivx__lib-chapitre__crochet { font-style: italic; color: var(--color-text-muted); }
.ivx__lib-chapitre__crochet:empty { display: none; }

.ivx__lib-detour {
  margin: 1.5rem 0; padding: 1rem 1.2rem; background: var(--ivx-calcaire);
  border-left: 4px solid var(--color-primary); border-radius: 0;
}
.ivx__lib-detour__etiquette {
  margin: 0 0 0.2rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--color-secondary);
}
.ivx__lib-detour__titre { margin: 0 0 0.4rem; font-size: 1.12rem; }

.ivx__dossier-fin { max-width: 52rem; margin-top: 2.5rem; }
.ivx__lib-suite-guide { border: 2px solid var(--color-primary); background: var(--ivx-papier); }
.ivx__lib-suite-guide__rang { margin-left: 0.5em; color: var(--color-text-muted); }

.ivx__signature {
  margin: 2rem 0 0; padding: 1rem 1.2rem; background: var(--ivx-eau);
  border-top: 3px solid var(--color-primary);
}
.ivx__signature-titre { margin: 0 0 0.3rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; }
.ivx__signature-texte { margin: 0; font-size: 0.98rem; }

/* ---------- Page d'etape : guide, puis dossiers parus ---------- */
.ivx__guide { max-width: var(--ivx-lecture); }
.ivx__liste { margin-top: 2.6rem; padding-top: 1.5rem; border-top: 2px solid var(--ivx-eau-trait); }
.ivx__liste:not(:has(.ivx__carte)) { display: none; }
.ivx__liste-titre { font-size: 1.5rem; margin: 0 0 1rem; }

/* ---------- Pages fixes ---------- */
.ivx__page { max-width: var(--ivx-lecture); margin: 0 auto; padding: 2rem 16px 3rem; }
.ivx__page h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: 0 0 1rem; color: var(--color-primary); }
.ivx__page dl { margin: 1rem 0; }
.ivx__page dt { font-family: var(--font-heading); font-weight: 700; margin-top: 1rem; }
.ivx__page dd { margin: 0.2rem 0 0; }

/* ---------- Pied ---------- */
.ivx__pied { background: var(--color-primary); color: var(--color-sur-primary); margin-top: 2rem; }
.ivx__pied a { color: inherit; }
.ivx__pied a:hover { color: inherit; text-decoration-thickness: 2px; }
.ivx__pied-dedans {
  max-width: var(--ivx-largeur); margin: 0 auto; padding: 2rem 16px 1.2rem;
  display: grid; grid-template-columns: 1fr; gap: 1.4rem;
}
@media (min-width: 48rem) { .ivx__pied-dedans { grid-template-columns: 2fr 1.2fr 1fr; } }
.ivx__pied-texte { margin: 0; font-size: 1rem; }
.ivx__pied-titre { margin: 0 0 0.4rem; font-family: var(--font-heading); font-weight: 700; }
.ivx__pied-liste { margin: 0; padding-left: 1.2rem; font-size: 0.95rem; }
.ivx__pied-mentions {
  max-width: var(--ivx-largeur); margin: 0 auto; padding: 0.8rem 16px 1.4rem; font-size: 0.88rem;
  border-top: 1px solid currentColor; opacity: 0.9;
}

@media (max-width: 40rem) {
  body.ivx__corps { font-size: 1.0625rem; }
  .ivx__outils-liste { gap: 0.8rem; font-size: 0.9rem; }
  .ivx__station-nom { font-size: 0.8rem; }
  .ivx__ouverture-chapo { font-size: 1.08rem; }
}