/* tokens */
:root {
    --color-primary: #22336B;
    --color-secondary: #A3322B;
    --color-bg: #F7F5F0;
    --color-text: #161C2E;
    --color-surface: #ECEEF5;
    --color-surface-alt: #DFE3EF;
    --color-border: #C8CEDE;
    --color-text-muted: #4B5470;
    --radius-card: 3px;
    --shadow-card: 0 2px 8px rgba(0,0,0,.08);
    --font-heading: Bahnschrift, 'DIN Alternate', 'DIN Next', 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Lucida Bright', Athelas, 'Noto Serif', Sylfaen, 'DejaVu Serif', serif;
    --color-sur-secondary: #F7F5F0;
    --color-sur-primary: #F7F5F0;
    --focus-ring: #22336B;
}

: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,
.inm__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>. */
.inm__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. */
.inm__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. */
.inm__lib-bande__inner[data-largeur="large"] { max-width: 82rem; }
.inm__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. */

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

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

.inm__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. */
.inm__lib-bande:not([class*="--"]) + .inm__lib-bande:not([class*="--"]) {
  border-top: 1px solid var(--trait);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* lib-entete — la barre de tete.

   Elle vit HORS des bandes, donc hors de l'element qui portait la couche de tokens
   derives du theme. C'est pour elle que lib-bande.css declare cette couche sur
   « :root, .lib-bande » et non sur « .lib-bande » seul : sans ca, --trait et --ombre-2
   seraient vides ici et la barre n'aurait ni filet ni relief.

   Le fond est --color-secondary, comme les bandes sombres : la tete et le pied
   encadrent la page dans la meme matiere, et les bandes claires respirent entre les
   deux. */

.inm__lib-entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-secondary) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 12%, transparent);
}

/* Le flou ne s'active que la ou il est supporte : ailleurs le fond a 92% reste lisible
   parce qu'il est deja presque opaque. */
@supports (backdrop-filter: blur(1px)) {
  .inm__lib-entete { backdrop-filter: blur(10px) saturate(1.4); }
}

/* Le filet d'accent sous la barre : 2px, sur toute la largeur, comme une reglure. */
.inm__lib-entete::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 20%, transparent) 70%,
    transparent);
}

.inm__lib-entete__inner {
  max-width: 82rem;
  margin: 0 auto;
  padding: .85rem clamp(1.2rem, .8rem + 2vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem clamp(1rem, .5rem + 2vw, 2.5rem);
}

/* --- la marque ------------------------------------------------------------------- */
.inm__lib-entete__marque {
  display: grid;
  gap: .1rem;
  text-decoration: none;
  margin-right: auto;
}

.inm__lib-entete__nom {
  position: relative;
  padding-left: .95rem;
  font-family: var(--font-heading);
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-sur-secondary, var(--color-bg));
}

/* Un point d'accent en guise de monogramme : une marque sans fichier image. */
.inm__lib-entete__nom::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.inm__lib-entete__marque:hover .inm__lib-entete__nom,
.inm__lib-entete__marque:focus-visible .inm__lib-entete__nom { color: var(--color-primary); }

.inm__lib-entete__baseline {
  padding-left: .95rem;
  font-family: var(--font-body);
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 55%, transparent);
  max-width: 34ch;
}

.inm__lib-entete__baseline:empty { display: none; }

/* --- la navigation ---------------------------------------------------------------- */
.inm__lib-entete__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem clamp(.4rem, .2rem + 1vw, 1.4rem);
}

.inm__lib-entete__lien {
  position: relative;
  padding: .45rem .1rem;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 78%, transparent);
  text-decoration: none;
  white-space: nowrap;
}

/* Le soulignement se deploie depuis la gauche plutot que d'apparaitre : le mouvement
   dit dans quel sens on lit. transform, donc pas de reflow. */
.inm__lib-entete__lien::after {
  content: "";
  position: absolute;
  inset: auto 0 .1rem 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.inm__lib-entete__lien:hover,
.inm__lib-entete__lien:focus-visible { color: var(--color-sur-secondary, var(--color-bg)); }

.inm__lib-entete__lien:hover::after,
.inm__lib-entete__lien:focus-visible::after { transform: scaleX(1); }

/* La page courante est marquee par aria-current, pas par une classe : l'information
   sert d'abord au lecteur d'ecran, le style s'y accroche ensuite. */
.inm__lib-entete__lien[aria-current="page"] { color: var(--color-sur-secondary, var(--color-bg)); }
.inm__lib-entete__lien[aria-current="page"]::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .inm__lib-entete__lien::after { transition: none; }
}

/* --- l'appel a l'action ------------------------------------------------------------ */
.inm__lib-entete__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-sur-secondary, var(--color-bg));
  text-decoration: none;
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}

.inm__lib-entete__cta::after {
  content: "\2197";
  font-size: .95em;
  opacity: .8;
}

.inm__lib-entete__cta:hover,
.inm__lib-entete__cta:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-sur-secondary, var(--color-bg));
}

.inm__lib-entete__cta:empty { display: none; }

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

/* lib-entete-tuto — le haut d'un tutoriel.

   IL REPOND AUX QUATRE QUESTIONS QU'ON SE POSE AVANT DE S'ENGAGER dans quarante etapes :
   combien de temps ca coute, combien d'etapes, sur quoi ca s'appuie, et quand ca a ete
   verifie. Aucune n'est une question de style, et aucune n'a sa place en pied de page.

   Aucune couleur n'est ecrite : la brique lit les tokens que sa bande redefinit. Posee dans
   une lib-bande--sombre elle sort claire sur sombre, dans une bande claire l'inverse. Depuis
   la correction du contraste mesure, c'est vrai aussi sur un site a palette sombre. */

.inm__lib-entete-tuto {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1.8rem, 1.2rem + 3vw, 3.5rem);
  align-items: start;
  padding: clamp(2.2rem, 1.6rem + 2.6vw, 4rem) 0 clamp(2rem, 1.4rem + 2vw, 3.2rem);
}

/* La trame technique : deux degrades a pas fixe, aucune image, aucune requete. Elle donne
   une matiere de laboratoire au fond sans jamais concurrencer le texte — d'ou l'opacite
   basse et le masque qui la fait disparaitre vers le bas. */
.inm__lib-entete-tuto::before {
  content: "";
  position: absolute;
  inset: -2rem -50vw;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--trait) 1px, transparent 1px),
    linear-gradient(to bottom, var(--trait) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 10%, transparent 85%);
}

.inm__lib-entete-tuto > * { position: relative; }

.inm__lib-entete-tuto__texte { min-width: 0; }

/* --- fil d'Ariane ------------------------------------------------------------------ */
.inm__lib-entete-tuto__fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--color-text-muted);
}

.inm__lib-entete-tuto__fil:empty { display: none; }
.inm__lib-entete-tuto__fil a { color: var(--color-text-muted); text-decoration: none; }

.inm__lib-entete-tuto__fil a:hover,
.inm__lib-entete-tuto__fil a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Le chevron suit chaque lien : l'etape courante est un <span>, elle ferme le fil. */
.inm__lib-entete-tuto__fil a::after {
  content: "\203A";
  margin: 0 .5em;
  opacity: .55;
  display: inline-block;
}

.inm__lib-entete-tuto__fil span { color: var(--color-text); opacity: .8; }

/* --- surtitre ---------------------------------------------------------------------- */
.inm__lib-entete-tuto__surtitre {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .8rem;
  padding: .28rem .8rem;
  border: 1px solid var(--accent-trait);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.inm__lib-entete-tuto__surtitre::before {
  content: "";
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.inm__lib-entete-tuto__surtitre:empty { display: none; }

/* --- titre ---------------------------------------------------------------------------
   Il descend a 2rem sur petit ecran et monte a 3.4rem sur grand, par interpolation : pas
   une media query a maintenir sur un parc. */
.inm__lib-entete-tuto__titre {
  margin: 0 0 .9rem;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.032em;
  color: var(--color-text);
  text-wrap: balance;
}

.inm__lib-entete-tuto__chapo {
  margin: 0 0 1.4rem;
  max-width: 48ch;
  font-family: var(--font-body);
  font-size: clamp(1.02rem, .96rem + .4vw, 1.2rem);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.inm__lib-entete-tuto__chapo:empty { display: none; }

/* --- meta ------------------------------------------------------------------------- */
.inm__lib-entete-tuto__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem 1.1rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: .84rem;
  color: var(--color-text-muted);
}

/* La puce separatrice est dessinee : un lecteur d'ecran lit trois faits, pas des points. */
.inm__lib-entete-tuto__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 1.1rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  vertical-align: middle;
}

.inm__lib-entete-tuto__meta > :empty { display: none; }
.inm__lib-entete-tuto__auteur { font-weight: 700; color: var(--color-text); }
.inm__lib-entete-tuto__date { font-variant-numeric: tabular-nums; }

/* La mention de mise a jour : plus discrete que la date de publication, parce qu'elle dit
   « cette page a ete reprise », pas « cette page est neuve ». */
.inm__lib-entete-tuto__maj {
  font-style: italic;
  opacity: .85;
}

/* --- etiquettes -------------------------------------------------------------------- */
.inm__lib-entete-tuto__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.2rem;
}

.inm__lib-entete-tuto__tags:empty { display: none; }

.inm__lib-entete-tuto__tags a,
.inm__lib-entete-tuto__tags span {
  display: inline-block;
  padding: .26rem .68rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
}

.inm__lib-entete-tuto__tags a:hover,
.inm__lib-entete-tuto__tags a:focus-visible {
  border-color: var(--accent-trait);
  color: var(--color-text);
}

/* --- les quatre reperes ---------------------------------------------------------------
   C'est le bloc qui remplit la moitie droite de la bande, et il la remplit avec des
   nombres DENOMBRABLES sur la page plutot qu'avec du decor. Le filet d'accent en tete du
   panneau repond a celui de l'entete du site. */
.inm__lib-entete-tuto__reperes {
  position: relative;
  display: grid;
  /* DEUX COLONNES FIXES, pas une grille intrinseque. Avec auto-fit, quatre reperes
     tombaient en 3 + 1 : trois cellules serrees et une orpheline sous elles. Un carre de
     deux par deux se lit d'un coup et laisse a chaque valeur la largeur d'une date. */
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  background: var(--surface-haute);
  overflow: hidden;
}

.inm__lib-entete-tuto__reperes:empty { display: none; }

.inm__lib-entete-tuto__reperes::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary),
              color-mix(in srgb, var(--color-primary) 15%, transparent));
}

/* Les filets entre cellules sont poses par les cellules elles-memes : la grille est
   intrinseque, on ne sait pas combien de colonnes elle produira, et overflow:hidden coupe
   les filets qui depassent. */
.inm__lib-entete-tuto__repere {
  display: flex;
  border-left: 1px solid var(--trait);
  border-top: 1px solid var(--trait);
}

.inm__lib-entete-tuto__repere-lien {
  flex: 1 1 auto;
  display: grid;
  gap: .22rem;
  padding: 1.1rem 1rem;
  text-decoration: none;
  transition: background .16s ease;
}

/* Un repere sans preuve a montrer n'est pas un lien : href vide, on coupe l'interaction
   plutot que de renvoyer le lecteur sur la page ou il est deja. */
.inm__lib-entete-tuto__repere-lien[href=""],
.inm__lib-entete-tuto__repere-lien:not([href]) {
  pointer-events: none;
  cursor: default;
}

.inm__lib-entete-tuto__repere-lien:not([href=""]):hover,
.inm__lib-entete-tuto__repere-lien:not([href=""]):focus-visible {
  background: var(--accent-doux);
}

.inm__lib-entete-tuto__repere-valeur {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* Un repere cliquable porte la couleur d'accent : c'est le seul signe qui dit qu'il y a
   une preuve au bout. */
.inm__lib-entete-tuto__repere-lien:not([href=""]) .inm__lib-entete-tuto__repere-valeur {
  color: var(--color-primary);
}

.inm__lib-entete-tuto__repere-label {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.inm__lib-entete-tuto a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .inm__lib-entete-tuto__repere-lien { transition: none; }
}

@media print {
  .inm__lib-entete-tuto::before { display: none; }
  .inm__lib-entete-tuto__reperes { border-color: #999; background: none; }
  .inm__lib-entete-tuto__repere { border-color: #999; }
}

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

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

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

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

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

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

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

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

/* Le chevron pivote a l'ouverture : deux traits en CSS, aucune requete. */
.inm__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;
}

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

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

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

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

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

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

/* lib-grille — l'entete de section et la grille de cartes. */

.inm__lib-grille {
  padding: var(--pas-section) 0;
}

.inm__lib-grille__entete {
  max-width: 58ch;
  margin: 0 0 var(--pas-bloc);
}

/* Le meme traitement d'oeil-de-boeuf que lib-mise-en-avant : c'est ce qui fait qu'une
   page se lit comme un systeme et non comme une pile de sections independantes. */
.inm__lib-grille__surtitre {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .7rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.inm__lib-grille__surtitre::after {
  content: "";
  flex: 1 1 auto;
  max-width: 3.5rem;
  height: 1px;
  background: var(--accent-trait);
}

.inm__lib-grille__surtitre:empty,
.inm__lib-grille__intro:empty { display: none; }

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

.inm__lib-grille__intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* minmax a 15rem et non 17 : dans une bande de 68rem, trois cartes tiennent sur une
   ligne au lieu de deux plus une orpheline. Constate sur la capture du 2026-09-09. */
.inm__lib-grille__cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.2rem;
  align-items: stretch;
}

/* lib-pied — le pied de page.

   Il REDEFINIT les tokens de texte pour son fond sombre, comme lib-bande--sombre : toute
   brique posee dedans (lib-profils, notamment) se lit sans variante dediee. C'est le
   contrat du theme — le fond redefinit ce que les briques lisent.

   Il vit hors des bandes, donc il depend de la couche de tokens derives declaree sur
   « :root, .lib-bande » dans lib-bande.css. */

.inm__lib-pied {
  position: relative;
  background:
    radial-gradient(70rem 30rem at 88% -20%,
                    color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 60%),
    var(--color-secondary);

  /* Meme raison que lib-bande--sombre : le pied est une bande sombre, et sur un site
     deja sombre l'inversion vers --color-bg le rendait illisible. */
  --color-text: var(--color-sur-secondary, var(--color-bg));
  --color-text-muted: color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 62%, transparent);
  --color-border: color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 16%, transparent);
  --trait: color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 14%, transparent);
  --surface-haute: color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 6%, transparent);
  --accent-doux: color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 10%, transparent);
  --accent-trait: color-mix(in srgb, var(--color-primary) 55%, transparent);

  color: var(--color-text-muted);
}

/* Le filet d'accent en haut du pied repond a celui sous l'entete : la page est tenue
   entre deux reglures de la meme couleur. */
.inm__lib-pied::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--color-primary) 20%, transparent) 30%,
    var(--color-primary));
}

.inm__lib-pied__inner {
  max-width: 82rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 1.8rem + 2.5vw, 4rem) clamp(1.2rem, .8rem + 2vw, 2.5rem) 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}

/* --- la colonne de marque ---------------------------------------------------------- */
.inm__lib-pied__marque { min-width: 0; }

.inm__lib-pied__nom {
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text);
}

.inm__lib-pied__phrase {
  margin: 0 0 1.2rem;
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.62;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.inm__lib-pied__action { margin: 0; }

.inm__lib-pied__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-sur-primary, var(--color-bg));
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter .18s ease, transform .18s ease;
}

.inm__lib-pied__cta::after { content: "\2197"; opacity: .85; }

.inm__lib-pied__cta:hover,
.inm__lib-pied__cta:focus-visible { filter: brightness(1.12); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .inm__lib-pied__cta { transition: none; }
  .inm__lib-pied__cta:hover { transform: none; }
}

/* --- les colonnes de liens ---------------------------------------------------------- */
.inm__lib-pied__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.6rem;
}

.inm__lib-pied__colonne { min-width: 0; }

.inm__lib-pied__colonne-titre {
  margin: 0 0 .7rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 45%, transparent);
}

.inm__lib-pied__colonne-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45rem;
}

.inm__lib-pied__colonne-liste a {
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.inm__lib-pied__colonne-liste a:hover,
.inm__lib-pied__colonne-liste a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* --- la zone basse : ce qu'on pose sous le filet ------------------------------------- */
.inm__lib-pied__bas {
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, .8rem + 2vw, 2.5rem);
  border-top: 1px solid var(--trait);
}

.inm__lib-pied__bas:empty { display: none; }

/* lib-profils pose dedans respire moins qu'en pleine page : le pas de section serait
   demesure ici. */
.inm__lib-pied__bas .inm__lib-profils { padding: 1.8rem 0; }

.inm__lib-pied__mentions {
  max-width: 82rem;
  margin: 0 auto;
  padding: 1.1rem clamp(1.2rem, .8rem + 2vw, 2.5rem) 1.6rem;
  border-top: 1px solid var(--trait);
  font-family: var(--font-body);
  font-size: .8rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 45%, transparent);
}

.inm__lib-pied__mentions a {
  color: color-mix(in srgb, var(--color-sur-secondary, var(--color-bg)) 70%, transparent);
  text-decoration: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- le pas suivant --------------------------------------------------------------- */
.inm__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. */
.inm__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. */
.inm__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;
}

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

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

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

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

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

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

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

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

/* --- la ligne discrete : precedent et index de famille ----------------------------- */
.inm__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;
}

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

.inm__lib-suite-guide__pied a:hover,
.inm__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. */
.inm__lib-suite-guide__precedent[href=""],
.inm__lib-suite-guide__precedent:not([href]),
.inm__lib-suite-guide__precedent:empty { display: none; }

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

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

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

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

/* lib-tableau — le tableau comparatif.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* lib-todo — l'enveloppe d'un tutoriel en etapes, et ses phases.

   LE PROBLEME DE CETTE PAGE EST LA DENSITE. Quarante etapes fois six champs font deux cent
   quarante atomes d'information. Rendus a plat, c'est un mur. Trois leviers y repondent :
   une ligne par etape et le reste replie (lib-todo-item), des phases qui donnent des
   paliers, et une barre de total qui colle en haut pendant la lecture.

   Le perimetre est traite comme un encadre d'avertissement et non comme du corps de texte :
   il doit s'attraper en diagonale, avant la premiere etape. */

.inm__lib-todo {
  padding: var(--pas-section, 3rem) 0;
}

/* --- l'en-tete ------------------------------------------------------------------- */
.inm__lib-todo__entete { margin-bottom: 1.4rem; }

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

.inm__lib-todo__surtitre::after {
  content: "";
  flex: 0 1 3.5rem;
  height: 1px;
  background: var(--accent-trait, var(--color-primary));
}

.inm__lib-todo__surtitre:empty { display: none; }

.inm__lib-todo__titre {
  margin: 0 0 .7rem;
  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;
}

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

.inm__lib-todo__intro:empty { display: none; }

/* --- le perimetre ----------------------------------------------------------------
   Trois lignes que le lecteur doit pouvoir lire en diagonale AVANT de commencer : pour
   qui, ce qui n'est pas couvert, et quand ca a ete verifie. Une liste d'etapes sans ces
   trois lignes a l'air juste longtemps apres avoir cesse de l'etre. */
.inm__lib-todo__perimetre {
  display: grid;
  gap: .5rem;
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  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(--accent-doux, var(--color-surface));
}

.inm__lib-todo__ligne {
  margin: 0;
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.inm__lib-todo__ligne strong {
  color: var(--color-text);
  font-weight: 700;
}

/* Une ligne dont la valeur est vide ne doit pas servir son intitule tout seul. */
.inm__lib-todo__ligne:not(:has(strong + *)):empty { display: none; }

/* --- la barre de total -----------------------------------------------------------
   Elle colle en haut pendant la lecture : a quarante etapes, savoir ou on en est sans
   remonter est la difference entre une liste qu'on finit et une qu'on abandonne.
   Sans JavaScript elle affiche ce que le build a compte ; un script la fait passer a
   « 12 / 24 » et retient l'etat. */
.inm__lib-todo__barre {
  position: sticky;
  top: 3.6rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.4rem;
  padding: .55rem .95rem;
  border: 1px solid var(--trait, var(--color-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

@supports (backdrop-filter: blur(1px)) {
  .inm__lib-todo__barre { backdrop-filter: blur(8px); }
}

.inm__lib-todo__total { font-variant-numeric: tabular-nums; }

/* --- les phases ------------------------------------------------------------------- */
.inm__lib-todo__phases { display: grid; gap: clamp(1.8rem, 1.2rem + 2vw, 3rem); }

.inm__lib-todo__phase-titre {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.12rem, 1rem + .6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--color-text);
}

/* Le rang de phase est un jalon, pas une decoration : il se lit de loin quand on defile. */
.inm__lib-todo__phase-rang {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.inm__lib-todo__phase-intro {
  margin: 0 0 1rem;
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: .94rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.inm__lib-todo__phase-intro:empty { display: none; }

.inm__lib-todo__phase-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Une phase entierement faite se replie visuellement : c'est le levier de densite le plus
   fort quand on avance. Elle reste lisible, elle recule. */
.inm__lib-todo__phase:has(.inm__lib-todo__phase-items:not(:has(.inm__lib-todo-item__case:not(:checked))))
  .inm__lib-todo__phase-rang {
  background: var(--trait, var(--color-border));
  color: var(--color-text-muted);
}

/* --- a l'impression ---------------------------------------------------------------- */
@media print {
  .inm__lib-todo__barre { position: static; border-color: #999; }
  .inm__lib-todo__perimetre { border-color: #999; background: none; }
  .inm__lib-todo__phase { break-inside: auto; }
  .inm__lib-todo__phase-titre { break-after: avoid; }
}

/* lib-todo-item — une etape.

   TOUT L'ETAT EST EN CSS PUR. Sans une ligne de JavaScript, la case coche, l'etape se
   barre, le detail s'ouvre et la page s'imprime. Le script n'ajoutera qu'un compteur et la
   persistance — deux conforts, jamais le fonctionnement.

   Le masquage des etapes faites est pilote par :checked, donc par une action du lecteur.
   Au chargement, tout est visible : l'etat servi est complet, et il n'y a rien a cacher. */

.inm__lib-todo-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--trait, var(--color-border));
  border-radius: var(--rayon-m, var(--radius-card));
  background: var(--color-bg);
  transition: border-color .18s ease, opacity .18s ease;
}

.inm__lib-todo-item + .inm__lib-todo-item { margin-top: .6rem; }

/* La case : dimensionnee pour le pouce, pas pour la souris. 1.15rem est le minimum
   confortable sur mobile, et le decalage la pose sur la ligne du titre. */
.inm__lib-todo-item__case {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .25rem;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex: none;
}

.inm__lib-todo-item__corps { min-width: 0; }

/* --- l'etape faite recule, elle ne disparait pas ---------------------------------
   Barrer et attenuer suffit : retirer la ligne du flux ferait sauter la page sous le
   doigt au moment meme ou on coche. */
.inm__lib-todo-item__case:checked ~ .inm__lib-todo-item__corps .inm__lib-todo-item__label {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-text-muted);
}

.inm__lib-todo-item:has(.inm__lib-todo-item__case:checked) {
  opacity: .55;
  border-color: var(--trait, var(--color-border));
}

.inm__lib-todo-item:has(.inm__lib-todo-item__case:checked):hover { opacity: .85; }

/* --- titre --------------------------------------------------------------------- */
.inm__lib-todo-item__titre {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin: 0 0 .3rem;
  font-family: var(--font-heading);
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--color-text);
}

.inm__lib-todo-item__rang {
  flex: none;
  min-width: 1.6rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  opacity: .75;
}

/* Le label porte le titre : cliquer le texte coche l'etape, ce qu'on attend d'une liste
   de taches. La cible de clic fait donc toute la largeur de la ligne. */
.inm__lib-todo-item__label { cursor: pointer; }

/* L'ancre ne se montre qu'au survol : elle sert a partager une etape precise, elle n'a
   rien a faire dans la lecture courante. Elle reste atteignable au clavier. */
.inm__lib-todo-item__lien {
  flex: none;
  margin-left: auto;
  color: var(--color-primary);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  transition: opacity .15s ease;
}

.inm__lib-todo-item:hover .inm__lib-todo-item__lien,
.inm__lib-todo-item__lien:focus-visible { opacity: .8; }

/* --- la raison, et c'est elle qui se fait citer ---------------------------------- */
.inm__lib-todo-item__pourquoi {
  margin: 0 0 .4rem;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: .96rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.inm__lib-todo-item__pourquoi:empty { display: none; }

/* --- meta : duree et role, en pastilles discretes -------------------------------- */
.inm__lib-todo-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
}

.inm__lib-todo-item__meta:not(:has(> *:not(:empty))) { display: none; }

.inm__lib-todo-item__duree,
.inm__lib-todo-item__role {
  padding: .14rem .55rem;
  border: 1px solid var(--trait, var(--color-border));
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.inm__lib-todo-item__duree:empty,
.inm__lib-todo-item__role:empty { display: none; }

/* --- le detail ------------------------------------------------------------------
   Replie, mais servi : le HTML contient tout des le chargement. */
.inm__lib-todo-item__detail { margin-top: .6rem; }

.inm__lib-todo-item__resume {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
}

.inm__lib-todo-item__resume::-webkit-details-marker { display: none; }

.inm__lib-todo-item__resume::after {
  content: "\25be";
  font-size: .8em;
  transition: transform .18s ease;
}

.inm__lib-todo-item__detail[open] .inm__lib-todo-item__resume::after { transform: rotate(180deg); }

.inm__lib-todo-item__detail > p {
  margin: .6rem 0 0;
  padding-left: .85rem;
  border-left: 2px solid var(--trait, var(--color-border));
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.58;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* Un intitule vide vaut une ligne absente : on ne sert pas un « Le piege » suivi de rien. */
.inm__lib-todo-item__detail > p:empty,
.inm__lib-todo-item__detail > p:not(:has(strong)) :empty { display: none; }

.inm__lib-todo-item__detail > p strong {
  display: block;
  margin-bottom: .12rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Le critere de fait est la raison d'etre de ce bloc : il porte la couleur d'accent. */
.inm__lib-todo-item__fait { border-left-color: var(--color-primary) !important; }
.inm__lib-todo-item__fait strong { color: var(--color-primary); }

.inm__lib-todo-item__verif strong { color: var(--color-text); }
.inm__lib-todo-item__piege strong { color: var(--color-text-muted); }

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

.inm__lib-todo-item a:focus-visible,
.inm__lib-todo-item__case:focus-visible,
.inm__lib-todo-item__resume:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- a l'impression ---------------------------------------------------------------
   Une liste de taches finit scotchee au mur. On deplie tout, on rend les cases vides pour
   qu'elles se cochent au stylo, et on retire ce qui ne s'imprime pas. */
@media print {
  .inm__lib-todo-item {
    break-inside: avoid;
    opacity: 1 !important;
    border-color: #999;
    background: none;
  }
  .inm__lib-todo-item__detail { display: block; }
  .inm__lib-todo-item__detail > p { display: block; }
  .inm__lib-todo-item__resume { display: none; }
  .inm__lib-todo-item__lien { display: none; }
  .inm__lib-todo-item__label { text-decoration: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .inm__lib-todo-item,
  .inm__lib-todo-item__lien,
  .inm__lib-todo-item__resume::after { transition: none; }
}

/* --- la commande qu'on tape -----------------------------------------------------------
   Une etape de tutoriel technique porte parfois une commande de terminal. Elle doit se
   distinguer de la phrase pour etre copiee juste : une virgule de ponctuation et une
   virgule d'argument ne se ressemblent qu'en chasse variable.

   Pas de bloc, pas de coloration : c'est une commande DANS une phrase, et l'entourer d'un
   bloc casserait la lecture de l'etape. */
.inm__lib-todo-item code {
  padding: .1em .35em;
  border-radius: var(--rayon-s, 3px);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  overflow-wrap: anywhere;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* infogerance-nimes.fr — le carnet de maintenance : toile indigo de Nimes, fil rouge garance.
   Les briques partagees (socle, agence) portent leur propre feuille ; celle-ci, servie en
   dernier, pose l'identite du site et les blocs locaux (classes inm__). */

*, *::before, *::after { box-sizing: border-box; }
body.inm__page {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 1.04rem/1.68 var(--font-body);
  /* la trame de la toile : un sergé discret, sans image */
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 3%, transparent) 0 2px, transparent 2px 7px);
}
img { max-width: 100%; height: auto; }
a { color: var(--color-primary); text-underline-offset: .18em; }
a:hover, a:focus-visible { color: var(--color-secondary); }
h1, h2, h3 { font-family: var(--font-heading); letter-spacing: .01em; }

.inm__saut { position: absolute; left: -9999px; top: .5rem; z-index: 20;
  background: var(--color-bg); color: var(--color-primary); padding: .5rem .9rem; }
.inm__saut:focus { left: .5rem; }

/* ---- En-tete agence : indigo plein, fil garance ---------------------------------- */
.inm__lib-entete {
  background: var(--color-primary);
  border-bottom: 4px solid var(--color-secondary);
}
.inm__lib-entete__nom { text-transform: uppercase; letter-spacing: .08em; }
.inm__lib-entete__cta {
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius-card);
}
.inm__lib-entete__cta:hover, .inm__lib-entete__cta:focus-visible {
  background: color-mix(in srgb, var(--color-secondary) 82%, #000);
  color: #fff;
}

/* ---- Onglets des postes : les intercalaires du carnet ---------------------------- */
.inm__onglets {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.inm__onglets-liste {
  max-width: 82rem; margin: 0 auto; padding: 0 1rem;
  list-style: none; display: flex; gap: .25rem; overflow-x: auto;
  scrollbar-width: thin;
}
.inm__onglets-liste a {
  display: block; white-space: nowrap;
  padding: .6rem .85rem .5rem;
  font: 600 .9rem/1.2 var(--font-heading);
  color: var(--color-primary); text-decoration: none;
  border-top: 3px solid transparent;
}
.inm__onglets-liste a:hover, .inm__onglets-liste a:focus-visible {
  border-top-color: var(--color-secondary);
  background: var(--color-bg);
  color: var(--color-text);
}

.inm__principal { display: block; }

/* ---- Ouverture de l'accueil ------------------------------------------------------- */
.inm__ouverture {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
}
.inm__surtitre {
  margin: 0 0 .6rem;
  font: 700 .8rem/1.2 var(--font-heading);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--color-secondary);
}
.inm__ouverture-titre {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.08;
  color: var(--color-primary);
}
.inm__ouverture-chapo { margin: 0 0 1.5rem; font-size: 1.12rem; max-width: 44rem; }
.inm__ouverture-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.inm__bouton {
  display: inline-block; padding: .7rem 1.15rem;
  font: 600 1rem/1.2 var(--font-heading);
  background: var(--color-primary); color: #fff; text-decoration: none;
  border-radius: var(--radius-card);
}
.inm__bouton:hover, .inm__bouton:focus-visible { background: var(--color-text); color: #fff; }
.inm__bouton--garance { background: var(--color-secondary); }
.inm__legende {
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--color-secondary);
  padding: 1.2rem 1.3rem;
}
.inm__legende-titre {
  margin: 0 0 .6rem; font: 700 .95rem/1.3 var(--font-heading); color: var(--color-primary);
}
.inm__legende-liste { margin: 0; padding: 0; list-style: none; }
.inm__legende-liste li { padding: .45rem 0; border-top: 1px dashed var(--color-border); font-size: .97rem; }
.inm__legende-liste li:first-child { border-top: 0; }
.inm__legende-liste strong { color: var(--color-secondary); font-family: var(--font-heading); }

/* ---- En-tete d'un poste ----------------------------------------------------------- */
.inm__fil-ariane { margin: 0 0 .7rem; font-size: .88rem; color: var(--color-text-muted); }
.inm__fil-ariane a { color: inherit; }
.inm__tete-titre {
  margin: 0 0 .8rem;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); line-height: 1.1;
  color: var(--color-primary);
}
.inm__tete-chapo { margin: 0; font-size: 1.12rem; max-width: 46rem; }

/* ---- Fil des procedures (accueil, postes) ---------------------------------------- */
.inm__fil { list-style: none; margin: 0; padding: 0; counter-reset: proc; }
.inm__proc {
  counter-increment: proc;
  position: relative;
  padding: 1rem 0 1rem 3.2rem;
  border-top: 1px solid var(--color-border);
}
.inm__proc:first-child { border-top: 0; }
.inm__proc::before {
  content: counter(proc, decimal-leading-zero);
  position: absolute; left: 0; top: 1.05rem;
  font: 700 1.05rem/1 var(--font-heading); color: var(--color-secondary);
}
.inm__proc-titre { margin: 0 0 .3rem; font-size: 1.15rem; line-height: 1.3; }
.inm__proc-titre a { text-decoration: none; }
.inm__proc-titre a:hover, .inm__proc-titre a:focus-visible { text-decoration: underline; }
.inm__proc-extrait { margin: 0 0 .3rem; }
.inm__proc-date { margin: 0; font-size: .85rem; color: var(--color-text-muted); }

/* La liste d'un poste se tait tant qu'aucune procedure n'est parue. */
.inm__liste:has(> .inm__fil:empty) { display: none; }
.inm__liste-titre, .inm__parues-titre { margin: 0 0 .4rem; font-size: 1.5rem; }
.inm__renvoi { margin: 1.2rem 0 0; font-size: .95rem; }

/* Bande sombre : indigo plein (la brique la peint en garance par defaut) */
.inm__lib-bande--sombre {
  background: var(--color-primary);
  color: #fff;
}
.inm__lib-bande--sombre h2 { color: #fff; }
.inm__lib-bande--sombre .inm__proc-extrait { color: color-mix(in srgb, #fff 88%, transparent); }
.inm__parues:has(> .inm__fil:empty) { display: none; }
.inm__parues-intro { margin: 0 0 1rem; opacity: .85; }
.inm__lib-bande--sombre .inm__proc { border-top-color: color-mix(in srgb, #fff 22%, transparent); }
.inm__lib-bande--sombre .inm__proc-titre a { color: #fff; }
.inm__lib-bande--sombre .inm__proc-date { color: color-mix(in srgb, #fff 70%, transparent); }
.inm__lib-bande--sombre .inm__proc::before { color: color-mix(in srgb, var(--color-secondary) 55%, #fff); }

/* ---- Cartes des postes ------------------------------------------------------------ */
.inm__lib-carte { border-top: 4px solid var(--color-primary); }
.inm__lib-carte__num { color: color-mix(in srgb, var(--color-secondary) 16%, transparent); }
.inm__lib-carte__titre a { text-decoration: none; color: var(--color-primary); }
.inm__lib-carte__titre a::after { content: " →"; color: var(--color-secondary); }
.inm__lib-carte__detail { font-style: italic; }

/* ---- Corps de texte --------------------------------------------------------------- */
.inm__lib-prose h1 {
  margin: 0 0 1rem; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); line-height: 1.12;
  color: var(--color-primary);
}
.inm__lib-prose h2 { color: var(--color-primary); border-left: 4px solid var(--color-secondary); padding-left: .7rem; }
.inm__lib-prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.inm__lib-prose th, .inm__lib-prose td { border: 1px solid var(--color-border); padding: .5rem .65rem; text-align: left; vertical-align: top; }
.inm__lib-prose th { background: var(--color-surface); font-family: var(--font-heading); }
.inm__lib-prose blockquote { margin: 1.2rem 0; padding: .4rem 1rem; border-left: 4px solid var(--color-primary); background: var(--color-surface); }

/* ---- Signature -------------------------------------------------------------------- */
.inm__signature {
  margin-top: 2.5rem; padding: 1.2rem 1.3rem;
  background: var(--color-surface); border-left: 4px solid var(--color-primary);
}
.inm__signature-titre { margin: 0 0 .4rem; font-size: 1.05rem; }
.inm__signature p { margin: 0; font-size: .97rem; }

/* ---- Tableau du calendrier (accueil) ---------------------------------------------- */
.inm__lib-tableau__table th { background: var(--color-primary); color: #fff; }
.inm__lib-tableau__table th:first-child, .inm__lib-tableau__table td:first-child { width: 30%; }
.inm__lib-tableau__table td:nth-child(2) { width: 46%; }

/* ---- Pied --------------------------------------------------------------------------- */
.inm__lib-pied {
  background: var(--color-text);
  border-top: 6px solid var(--color-secondary);
}
.inm__lib-pied__cta { background: var(--color-secondary); color: #fff; }
.inm__lib-pied a:not(.inm__lib-pied__cta) { color: #fff; }

@media (max-width: 52rem) {
  .inm__ouverture { grid-template-columns: minmax(0, 1fr); }
  .inm__proc { padding-left: 2.6rem; }
}