/*
 * Design system Mouvement Municipal — Phase 2
 * Parti pris "assemblée des savoirs" : papier chaud, risographie 2 encres vert/terre,
 * serif éditorial + mono pour les libellés catalogue.
 *
 * Sections :
 *   1. Variables de charte
 *   2. Reset & base
 *   3. Layout général (sticky footer)
 *   4. Header & navigation
 *   5. Footer
 *   6. Typographie & composants partagés
 *   7. Hero (accueil)
 *   8. Bibliothèque — barre recherche, facettes, cartes
 *   9. Fiche ressource
 *  10. Responsive
 */

/* ============================================================
   1. Variables de charte
   ============================================================ */
:root {
  /* Couleurs risographie 2 encres */
  --papier:    #f4f0e6;
  --papier2:   #efe9da;
  --encre:     #1a2b22;
  --vert:      #2f6b4f;
  --vert-f:    #27583f;
  --terre:     #c8632e;
  --terre-cl:  #e0a06a;
  --ligne:     #d8cfb8;
  --gris:      #5b5247;

  /* Polices éditoriales */
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:  "SFMono-Regular","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:  ui-sans-serif,"Segoe UI",Roboto,sans-serif;

  /* Largeur max du site — changer ici suffit pour tout aligner */
  --site-max-w: 1200px;

  /* Hauteur du header sticky — à maintenir synchrone avec .header-inner height */
  --header-h: 58px;

  /* Rayons & transitions */
  --r3: 3px;
  --r6: 6px;
  --trans: 200ms cubic-bezier(.4,0,.2,1);

  /* Ombres papier */
  --shadow-paper: 0 2px 8px rgba(26,43,34,.07), 0 1px 2px rgba(26,43,34,.04);
  --shadow-lift:  0 6px 24px rgba(26,43,34,.10), 0 2px 6px rgba(26,43,34,.06);
}

/* ============================================================
   2. Reset & base
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Masque les éléments [hidden] même quand un display: est défini sur le sélecteur. */
[hidden] { display: none !important; }

/* Skip-link : visible uniquement au focus clavier, positionné avant le header. */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: .5rem 1rem;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  border-radius: var(--r3);
  text-decoration: none;
  transition: top .1s;
}
.skip-link:focus { top: 1rem; }

/* Contenu réservé aux lecteurs d'écran — masqué visuellement mais lisible par AT. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--encre);
  background-color: var(--papier);
  -webkit-font-smoothing: antialiased;
  /* Grain papier SVG en data-uri — subtile texture risographie */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  /* Sticky footer */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* La zone principale occupe l'espace restant pour coller le footer en bas
   (sticky footer). 0 en flex-basis évite tout débordement avec le contenu. */
main, .app-main { flex: 1 0 auto; min-width: 0; }

a { color: var(--vert); text-decoration: none; }
.res-author-link { text-decoration: underline; }
.res-author-link:hover, .res-author-link:focus-visible { text-decoration: underline; }
/* Survol vert réservé aux liens texte : les boutons-liens (.btn-*) gèrent leur propre
   couleur au survol — sans l'exclusion, tout nouveau bouton dont le :hover ne redéclare
   pas color voyait son texte virer au vert (piège corrigé au cas par cas jusqu'ici).
   :where() = spécificité zéro : la règle reste à (0,1,1), la cascade existante
   (.action-link:hover, .res-title:hover…) est strictement préservée. */
a:where(:not([class*="btn"])):hover { color: var(--vert-f); }

/* Règle globale focus clavier — outline toujours visible, jamais supprimé sans remplacement */
:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sur fond encre (nav, hero, tabs, footer) : outline --terre-cl pour contraste suffisant */
.site-header :focus-visible,
.site-nav :focus-visible,
.fiche-header :focus-visible,
.fiche-tabs :focus-visible,
.hero :focus-visible,
.rejoindre-section :focus-visible,
.temoignage-section :focus-visible {
  outline-color: var(--terre-cl);
}

/* ============================================================
   3. Layout général
   ============================================================ */
.container {
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ============================================================
   4. Header & navigation
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--encre);
  border-bottom: 2px solid var(--vert);
}

.header-inner {
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  height: 58px;
  gap: 0;
}

/* Logo */
.logo {
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1.1;
  /* Écart de respiration avant la nav : modéré sur laptop, plus large sur grand écran. */
  margin-right: clamp(1rem, 2.5vw, 3rem);
}
.logo-word {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terre-cl);
  font-weight: 400;
}
.logo-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--papier);
}

/* Navigation principale à plat */
.site-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin-left: auto;
  gap: 0;
}
.site-nav li a {
  display: block;
  padding: .35rem .9rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,240,230,.72);
  text-decoration: none;
  transition: color var(--trans);
  white-space: nowrap;
}
.site-nav li a:hover,
.site-nav li a.active { color: var(--papier); }

/* Sépare visuellement la zone compte (Connexion / Mon compte) de la nav de contenu. */
.site-nav .nav-account {
  margin-left: .6rem;
  padding-left: .6rem;
  border-left: 1px solid rgba(244,240,230,.18);
}

/* Bouton "Adhérer" en nav */
.btn-adherer-nav {
  margin-left: .75rem;
  padding: .35rem 1.1rem;
  background: var(--terre) !important;
  color: var(--papier) !important;
  border-radius: var(--r3);
  transition: background var(--trans) !important;
}
.btn-adherer-nav:hover { background: #b0521f !important; color: var(--papier) !important; }

/* ── Dropdown desktop (hover + focus-within) — scoped to .site-nav only ── */
.site-nav .nav-has-children { position: relative; }

/* Extend hover zone downward via ::after pseudo-element so the li baseline stays aligned
   with plain links (padding-bottom on the li itself shifts the flex baseline). */
.site-nav .nav-has-children::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.site-nav .nav-dropdown {
  /* visibility+opacity instead of display so transition-delay can apply on close. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, visibility 0s linear .15s;
  position: absolute;
  /* Panel starts immediately below the link — the ::after bridge covers the 8px gap. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  box-shadow: var(--shadow-lift);
  list-style: none;
  padding: .375rem 0;
  z-index: 300;
}

/* Opens on hover OR when any child has keyboard focus.
   No delay on opening; 150 ms grace on closing (diagonal mouse moves). */
.site-nav .nav-has-children:hover > .nav-dropdown,
.site-nav .nav-has-children:focus-within > .nav-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .15s ease, visibility 0s linear 0s;
}

.site-nav .nav-dropdown li a {
  display: block;
  padding: .5rem 1.1rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre);
  text-decoration: none;
  /* Une entrée = une ligne : le panneau s'élargit au contenu (max-content via nowrap). */
  white-space: nowrap;
  transition: background var(--trans), color var(--trans);
}

.site-nav .nav-dropdown li a:hover,
.site-nav .nav-dropdown li a.active {
  background: var(--vert);
  color: var(--papier);
}

/* Chevron indicator */
.nav-parent-link { display: flex; align-items: center; gap: .25rem; }
.nav-chevron {
  font-size: .55rem;
  opacity: .7;
  transition: transform var(--trans);
  display: inline-block;
}
.site-nav .nav-has-children:hover .nav-chevron,
.site-nav .nav-has-children:focus-within .nav-chevron { transform: rotate(180deg); }

/* Hamburger mobile */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  padding: .5rem;
}
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--papier); }

/* ============================================================
   5. Footer
   ============================================================ */
.site-footer { background: #111c15; padding: 3.5rem 0 2rem; }
.footer-inner { max-width: var(--site-max-w); margin: 0 auto; padding: 0 2rem; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(244,240,230,.08);
  margin-bottom: 1.5rem;
}
.footer-brand-name {
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 700;
  color: var(--papier);
  margin-bottom: .875rem;
}
.footer-brand p {
  font-family: var(--serif);
  font-size: .82rem;
  color: rgba(244,240,230,.62);
  line-height: 1.7;
  max-width: 26ch;
}
.footer-col-title {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,240,230,.62);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-col ul a {
  font-family: var(--serif);
  font-size: .82rem;
  color: rgba(244,240,230,.66);
  text-decoration: none;
  transition: color var(--trans);
}
.footer-col ul a:hover { color: var(--papier); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .06em;
  color: rgba(244,240,230,.62);
}
.footer-licence {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .06em;
  color: rgba(244,240,230,.62);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color var(--trans);
}
.footer-licence:hover { color: rgba(244,240,230,.9); }
.footer-credit {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .06em;
  color: rgba(244,240,230,.62);
}
.footer-credit a {
  color: inherit;
  text-decoration: none;
  transition: color var(--trans);
}
.footer-credit a:hover { color: rgba(244,240,230,.9); }

/* Footer newsletter block */
.footer-newsletter-desc {
  font-family: var(--serif);
  font-size: .82rem;
  color: rgba(244,240,230,.62);
  line-height: 1.6;
  margin-bottom: .85rem;
}
.footer-newsletter-form { display: flex; flex-direction: column; gap: .5rem; }
.footer-newsletter-row { display: flex; gap: .5rem; }
.footer-newsletter-input {
  flex: 1;
  min-width: 0;
  padding: .45rem .75rem;
  border: 1px solid rgba(244,240,230,.2);
  border-radius: var(--r3);
  background: rgba(244,240,230,.07);
  color: var(--papier);
  font-family: var(--serif);
  font-size: .82rem;
}
.footer-newsletter-input::placeholder { color: rgba(244,240,230,.38); }
.footer-newsletter-input:focus {
  outline: 2px solid var(--terre-cl);
  outline-offset: 1px;
  border-color: var(--vert);
}
.footer-newsletter-btn {
  padding: .45rem .9rem;
  background: var(--vert);
  color: var(--papier);
  border: none;
  border-radius: var(--r3);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--trans);
}
.footer-newsletter-btn:hover { background: var(--vert-f); }
.footer-newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-family: var(--serif);
  font-size: .75rem;
  color: rgba(244,240,230,.55);
  line-height: 1.5;
}
.footer-newsletter-consent input[type="checkbox"] { margin-top: .2rem; flex-shrink: 0; accent-color: var(--vert); }
.footer-newsletter-consent a { color: rgba(244,240,230,.65); text-decoration: underline; }
.footer-newsletter-consent a:hover { color: var(--papier); }
.footer-newsletter-flash {
  font-size: .78rem;
  font-family: var(--serif);
  padding: .4rem .7rem;
  border-radius: var(--r3);
  margin-bottom: .5rem;
}
.footer-newsletter-flash--success { background: rgba(47,107,79,.25); color: rgba(244,240,230,.9); border: 1px solid rgba(47,107,79,.4); }
.footer-newsletter-flash--error   { background: rgba(200,99,46,.2);  color: rgba(244,240,230,.9); border: 1px solid rgba(200,99,46,.35); }
.footer-newsletter-flash--info    { background: rgba(244,240,230,.06); color: rgba(244,240,230,.8); border: 1px solid rgba(244,240,230,.15); }

/* ============================================================
   6. Typographie & composants partagés
   ============================================================ */

/* Séparateur risographie bicolore */
.riso-stripe {
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--vert) 0, var(--vert) 18px,
    var(--terre) 18px, var(--terre) 22px,
    var(--vert) 22px, var(--vert) 40px
  );
}

/* Eyebrow — libellé mono capitales avant un titre */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: var(--terre);
  flex-shrink: 0;
}

/* Titre de section serif éditorial */
.section-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--encre);
  letter-spacing: -.01em;
  margin-bottom: 1rem;
}

/* Lead de section */
.section-lead {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--gris);
  line-height: 1.8;
  max-width: 58ch;
  margin-bottom: 2.5rem;
}

/* Fil d'Ariane */
.breadcrumb { background: var(--papier2); border-bottom: 1px solid var(--ligne); }
.breadcrumb-inner {
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: .5rem 2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--gris);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--gris); text-decoration: none; transition: color var(--trans); }
.breadcrumb a:hover { color: var(--encre); }
.breadcrumb span { opacity: .5; margin: 0 .2rem; }

/* Boutons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.5rem;
  background: var(--vert);
  color: var(--papier);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r3);
  border: 1.5px solid var(--vert);
  transition: background var(--trans), transform var(--trans);
  cursor: pointer;
}
.btn-primary:hover { background: var(--vert-f); color: var(--papier); transform: translateY(-1px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.5rem;
  background: transparent;
  color: var(--papier);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r3);
  border: 1.5px solid rgba(244,240,230,.3);
  transition: border-color var(--trans), background var(--trans), color var(--trans), transform var(--trans);
  cursor: pointer;
}
.btn-outline:hover { border-color: rgba(244,240,230,.8); color: var(--encre); background: rgba(244,240,230,.8); transform: translateY(-1px); }

.btn-encre {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.5rem;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r3);
  border: 1.5px solid var(--encre);
  transition: background var(--trans), color var(--trans);
  cursor: pointer;
}
.btn-encre:hover { background: var(--vert); border-color: var(--vert); color: var(--papier); }

.btn-don {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.5rem;
  background: var(--terre);
  color: var(--papier);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r3);
  border: 1.5px solid var(--terre);
  transition: background var(--trans), color var(--trans), transform var(--trans);
  justify-content: center;
  cursor: pointer;
}
.btn-don:hover { background: #b0521f; color: var(--papier); transform: translateY(-1px); }

/* Badges type ressource */
.badge-type {
  display: inline-flex;
  align-items: center;
  padding: .25rem .75rem;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--papier);
}
.badge-livre          { background: var(--vert-f); }
.badge-article        { background: #2d607a; }
.badge-article_academique { background: #2d607a; }
.badge-article_presse { background: #2d607a; }
.badge-article_blog   { background: #2d607a; }
.badge-video          { background: #6b2d52; }
.badge-podcast        { background: #5a4a2d; }
.badge-etude_de_cas   { background: #2d5555; }
.badge-guide_pratique { background: #4a3d6b; }
.badge-essai          { background: var(--vert-f); }
.badge-conference     { background: #6b2d52; }
.badge-documentaire   { background: #6b2d52; }
.badge-entretien      { background: #2d5555; }
.badge-debat          { background: #5a4a2d; }
.badge-default        { background: var(--gris); }

/* Couleur de fond typée — fallback avant les règles spécifiques ci-dessous.
   Partagée entre cartes (liste) et fiche via var(--type-c) : un seul token,
   une seule source de vérité, pas de désynchronisation possible entre les deux vues. */
.res-card, .fiche-header, .adj-card { --type-c: #5b5247; }

/* Couleurs stables par famille de type — dérivées des teintes des badges */
.type-livre, .type-essai { --type-c: #27583f; }
.type-article_academique, .type-article_presse, .type-article_blog { --type-c: #2d607a; }
.type-video, .type-conference, .type-documentaire { --type-c: #6b2d52; }
.type-podcast, .type-debat { --type-c: #5a4a2d; }
.type-etude_de_cas, .type-entretien { --type-c: #2d5555; }
.type-guide_pratique { --type-c: #4a3d6b; }
.type-loi, .type-tract, .type-archive, .type-carte, .type-site_web, .type-infographie, .type-autre { --type-c: #5b5247; }

/* Flash messages */
.flash-list { list-style: none; max-width: var(--site-max-w); margin: 1rem auto; padding: 0 2rem; }
.flash-success {
  background: #d4edda; color: #155724; border: 1px solid #c3e6cb;
  border-radius: var(--r3); padding: .75rem 1rem; margin-bottom: .5rem;
}
.flash-error {
  background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
  border-radius: var(--r3); padding: .75rem 1rem; margin-bottom: .5rem;
}

/* ============================================================
   7. Hero — page d'accueil
   ============================================================ */
.hero {
  background: var(--encre);
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: 5rem 2rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terre-cl);
  margin-bottom: 1.75rem;
  opacity: 0;
  animation: fadeUp .6s .1s ease forwards;
}
.hero-badge::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--terre);
}
.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--papier);
  letter-spacing: -.01em;
  margin-bottom: 1.75rem;
  opacity: 0;
  animation: fadeUp .6s .2s ease forwards;
}
/* em italique plus gras que le reste du titre pour le contraste éditorial */
.hero-title em { font-style: italic; color: var(--terre-cl); font-weight: 600; }
.hero-sub {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(244,240,230,.75);
  margin-bottom: 2.5rem;
  max-width: 46ch;
  opacity: 0;
  animation: fadeUp .6s .35s ease forwards;
  /* pas de césure auto : les mots coupés en bout de ligne gênent la lecture dyslexique */
  text-wrap: pretty;
  hyphens: manual;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .6s .5s ease forwards;
}

/* Graphe SVG hero */
.hero-graph-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: fadeIn .8s .4s ease forwards;
}
.hero-graph-wrap svg { width: 100%; max-width: 520px; height: auto; }

/* Animations nœuds */
@keyframes nodePulse {
  0%, 100% { r: 8; opacity: 1; }
  50%       { r: 9.5; opacity: .85; }
}
@keyframes nodePulseSmall {
  0%, 100% { r: 5; opacity: .8; }
  50%       { r: 6.5; opacity: 1; }
}
.node-main { animation: nodePulse 4s 0s ease-in-out infinite; }
.node-a    { animation: nodePulseSmall 5s .3s ease-in-out infinite; }
.node-b    { animation: nodePulseSmall 5.5s .7s ease-in-out infinite; }
.node-c    { animation: nodePulseSmall 4.8s 1.1s ease-in-out infinite; }
.node-d    { animation: nodePulseSmall 6s .5s ease-in-out infinite; }
.node-e    { animation: nodePulseSmall 4.5s .9s ease-in-out infinite; }
.node-f    { animation: nodePulseSmall 5.2s 1.4s ease-in-out infinite; }
.node-g    { animation: nodePulseSmall 4.7s 0s ease-in-out infinite; }
.node-h    { animation: nodePulseSmall 5.8s .6s ease-in-out infinite; }
.node-i    { animation: nodePulseSmall 6.2s 1.8s ease-in-out infinite; }
.node-j    { animation: nodePulseSmall 4.9s 1.3s ease-in-out infinite; }
.node-k    { animation: nodePulseSmall 5.4s .2s ease-in-out infinite; }
.node-l    { animation: nodePulseSmall 5.1s 2s ease-in-out infinite; }
@keyframes linkFade {
  0%, 100% { opacity: .22; }
  50%       { opacity: .42; }
}
.graph-link   { animation: linkFade 6s ease-in-out infinite; }
.graph-link-t { animation: linkFade 7s .5s ease-in-out infinite; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Section bibliothèque accueil */
.biblio-section {
  background: var(--papier2);
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.biblio-layout-home {
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: 5rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start;
}
.biblio-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ligne);
}
.stat-n {
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--encre);
  line-height: 1;
  display: block;
}
.stat-l {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: .35rem;
  display: block;
}

/* Vignettes ressources sur la page d'accueil */
.res-vignettes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.res-vignette {
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  padding: 1.1rem;
  text-decoration: none;
  display: block;
  transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
  box-shadow: var(--shadow-paper);
}
.res-vignette:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--vert); }
/* --terre sur papier donne ~3.3:1 insuffisant pour ce texte très fin — --vert atteint ~5.1:1 */
.rv-type {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert-f);
  margin-bottom: .5rem;
}
.rv-title {
  font-family: var(--serif);
  font-size: .88rem;
  font-weight: 700;
  color: var(--encre);
  line-height: 1.35;
  margin-bottom: .4rem;
}
.rv-author { font-family: var(--mono); font-size: .6rem; color: var(--gris); letter-spacing: .06em; }

/* Section Nos Actions */
.actions-section { background: var(--papier); }
/* Respiration verticale augmentée pour matcher la maquette (5rem → 6rem) */
.section-generic { padding: 6rem 0; }
.section-inner { max-width: var(--site-max-w); margin: 0 auto; padding: 0 2rem; }

.assembly-ornament { display: flex; justify-content: center; margin-bottom: 3rem; }
.actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.action-card {
  padding: 2rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  background: var(--papier2);
  transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}
.action-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: var(--vert); }
.action-num {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .14em;
  color: var(--terre);
  margin-bottom: 1rem;
}
.action-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--encre); margin-bottom: .75rem; }
.action-desc { font-family: var(--serif); font-size: .9rem; color: var(--gris); line-height: 1.75; margin-bottom: 1.25rem; }
.action-link {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vert);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: gap var(--trans);
}
.action-link:hover { gap: .7rem; color: var(--vert); }

/* ============================================================
   Section Agenda (accueil + page /agenda)
   ============================================================ */
.agenda-section { border-top: 1px solid var(--ligne); }

.agenda-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

/* Grille des événements — 3 colonnes desktop, 1 mobile */
.agenda-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Page /agenda : liste en colonne, centrée, largeur de lecture maîtrisée */
.agenda-list {
  display: flex;
  flex-direction: column;
  gap: 0;                  /* séparation via dividers entre cartes */
  margin-bottom: 2rem;
  max-width: 820px;        /* évite le float pleine largeur à 1440px */
  margin-left: auto;
  margin-right: auto;
}

/* Carte de base — partagée accueil (grid) et page agenda (list) */
.event-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  background: var(--papier2);
  box-shadow: var(--shadow-paper);
  transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}
.event-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--vert); }

/* Variant liste (/agenda) : style divider éditorial, pas de card-box */
.agenda-list .event-card {
  gap: 1.75rem;
  padding: 1.75rem 0;
  border: none;
  border-bottom: 1px solid var(--ligne);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.agenda-list .event-card:first-child { border-top: 1px solid var(--ligne); }
.agenda-list .event-card:hover {
  background: color-mix(in srgb, var(--papier2) 60%, transparent);
  box-shadow: none;
  transform: none;
  border-color: var(--ligne);
}

/* Pastille date risographie — élément signature */
.event-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: .6rem .5rem;
  background: var(--papier2);
  border: 1.5px solid var(--terre);
  border-radius: var(--r3);
  flex-shrink: 0;
}
.event-date-day {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--encre);
  letter-spacing: -.02em;
}
.event-date-month {
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .14em;
  color: var(--terre);
  margin-top: .2rem;
}

/* Pastille dans la liste /agenda : un cran plus grande, fond papier clair */
.agenda-list .event-date-badge {
  min-width: 62px;
  padding: .55rem .6rem .6rem;
  background: var(--papier);
  margin-top: .15rem;
}
.agenda-list .event-date-day {
  font-size: 2.1rem;
  letter-spacing: -.03em;
}
.agenda-list .event-date-month {
  font-size: .55rem;
  letter-spacing: .18em;
  margin-top: .3rem;
}

.event-card-body { flex: 1; min-width: 0; }

/* Titre : serif, hiérarchie claire */
.event-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--encre);
  margin-bottom: .5rem;
  line-height: 1.3;
}

/* Titre dans la liste /agenda : un cran au-dessus */
.agenda-list .event-title { font-size: 1.2rem; }

.event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.event-time {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--gris);
}
.event-location {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--gris);
  display: inline-flex;
  align-items: flex-start;
  gap: .25rem;
}
.event-location svg {
  flex-shrink: 0;
  margin-top: .15em;
}

/* Description : de-emphasized */
.event-description {
  font-size: .875rem;
  color: var(--gris);
  line-height: 1.7;
  margin-bottom: .75rem;
  max-width: 62ch;      /* confort lecture, évite le mur pleine largeur */
}

/* Contenu Markdown dans la description : normalise h2/h3/listes/citations */
.event-description h2,
.event-description h3 {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 400;
  margin-top: 1rem;
  margin-bottom: .35rem;
}
.event-description ul,
.event-description ol {
  padding-left: 1.25rem;
  margin-bottom: .5rem;
}
.event-description li { margin-bottom: .2rem; }
.event-description blockquote {
  border-left: 2px solid var(--ligne);
  padding-left: .75rem;
  color: var(--gris);
  font-style: italic;
  margin: .5rem 0;
}

.event-link {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vert);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: gap var(--trans);
}
.event-link:hover { gap: .7rem; }

/* Lieu cliquable vers Google Maps : hérite du style .event-location, soulignement discret au hover */
.event-location-link {
  color: inherit;
  text-decoration: none;
}
.event-location-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Liens calendrier (Google Agenda + .ics) */
.event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}
.event-action-link {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: none;
  border: 1px solid var(--ligne);
  border-radius: var(--r3);
  padding: .3rem .65rem;
  transition: color var(--trans), border-color var(--trans);
}
.event-action-link:hover {
  color: var(--vert);
  border-color: var(--vert);
}

/* Empty states */
.agenda-home-empty,
.agenda-empty {
  padding: 2.5rem 0;
  color: var(--gris);
  font-family: var(--serif);
}
.agenda-home-empty a,
.agenda-empty a { color: var(--vert); }
.agenda-empty-text { font-size: 1.05rem; margin-bottom: .5rem; }
.agenda-empty-sub { font-size: .9rem; }

/* Section articles */
.articles-section { background: var(--papier2); border-top: 1px solid var(--ligne); }
.home-newsletter {
  border-top: 1px solid var(--ligne);
  text-align: center;
}
.home-newsletter .section-lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 65ch;   /* ← élargi (au lieu de 58ch) → tient sur 2 lignes */
}
.home-newsletter-form {
  max-width: 520px;
  margin: 2rem auto 0;   /* centré horizontalement, espace au-dessus */
  text-align: left;      /* le consentement reste lisible aligné à gauche */
}
.home-newsletter-row {
  display: flex;
  gap: .75rem;           /* espace entre le champ et le bouton */
}
.home-newsletter-input {
  flex: 1;               /* le champ prend toute la largeur dispo */
  padding: .7rem 1rem;
  font-size: .95rem;
  border: 1.5px solid var(--ligne);
  border-radius: var(--r3);
  background: var(--papier);
  color: var(--encre);
}
.home-newsletter-input:focus {
  outline: none;
  border-color: var(--vert);   /* feedback discret au focus */
}
.home-newsletter-btn {
  padding: .7rem 1.5rem;
  background: var(--vert);
  color: var(--papier);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1.5px solid var(--vert);
  border-radius: var(--r3);
  cursor: pointer;
  transition: background var(--trans);
  white-space: nowrap;          /* "S'inscrire" ne se coupe pas */
}
.home-newsletter-btn:hover {
  background: var(--vert-f);     /* hover SOBRE : juste un vert plus foncé, pas d'effet prononcé */
}
.home-newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .85rem;
  font-size: .8rem;
  color: var(--encre);
}
@media (max-width: 560px) {
  .home-newsletter-row { flex-direction: column; }  /* champ et bouton empilés sur mobile */
}

.articles-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.5rem;
  gap: 1rem;
}
.voir-tous {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vert);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  transition: gap var(--trans);
}
.voir-tous:hover { gap: .7rem; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.article-card {
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  overflow: hidden;
  box-shadow: var(--shadow-paper);
  transition: box-shadow var(--trans), transform var(--trans);
}
.article-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.article-thumb { height: 140px; position: relative; overflow: hidden; }
.art-th-1 { background-color: var(--vert); }
.art-th-2 { background-color: var(--encre); }
.art-th-3 { background-color: var(--terre); }
.art-cat {
  position: absolute;
  bottom: .75rem;
  left: .875rem;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--papier);
  background: rgba(26,43,34,.6);
  padding: 2px .5rem;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.article-body { padding: 1.25rem 1.375rem 1.375rem; }
.article-date { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; color: var(--gris); margin-bottom: .6rem; }
.article-title {
  font-family: var(--serif);
  font-size: .97rem;
  font-weight: 700;
  color: var(--encre);
  line-height: 1.4;
  margin-bottom: .75rem;
  text-decoration: none;
  display: block;
  transition: color var(--trans);
}
.article-title:hover { color: var(--vert); }
.article-excerpt { font-family: var(--serif); font-size: .84rem; color: var(--gris); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Témoignage */
.temoignage-section { background: var(--vert); padding: 5rem 2rem; }
.temoignage-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.quote-ornament { display: flex; justify-content: center; margin-bottom: 2rem; }
.temoignage-text { font-family: var(--serif); font-size: 1.18rem; font-style: italic; line-height: 1.85; color: rgba(244,240,230,.9); margin-bottom: 2rem; }
.temoignage-author { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--terre-cl); }
.temoignage-role { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: rgba(244,240,230,.5); margin-top: .3rem; }

/* Rejoindre */
.rejoindre-section { background: var(--encre); padding: 5rem 0; }
.rejoindre-inner {
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  align-items: center;
}
.rejoindre-title { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 400; color: var(--papier); letter-spacing: -.01em; line-height: 1.15; margin-bottom: 1rem; }
.rejoindre-sub { font-family: var(--serif); font-size: 1rem; color: rgba(244,240,230,.75); line-height: 1.8; }
.rejoindre-actions { display: flex; flex-direction: column; gap: .875rem; }
.rejoindre-note { font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; color: rgba(244,240,230,.7); text-align: center; }

/* ============================================================
   8. Bibliothèque — barre recherche, facettes, cartes
   ============================================================ */

/* En-tête page bibliothèque */
.page-header { background: var(--encre); padding: 2.5rem 0; }
.page-header-inner {
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.page-eyebrow {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terre-cl);
  margin-bottom: .5rem;
}
.page-title { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; color: var(--papier); letter-spacing: -.01em; line-height: 1.1; }
.page-sub { font-family: var(--serif); font-size: .9rem; color: rgba(244,240,230,.75); margin-top: .5rem; max-width: 50ch; }
.page-meta { display: flex; gap: 2rem; flex-shrink: 0; }
.meta-n { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; color: var(--papier); line-height: 1; display: block; }
.meta-l { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,240,230,.7); margin-top: .3rem; display: block; }

/* Barre de recherche sticky — top aligné sur --header-h pour éliminer le décalage de 2px */
.search-wrap {
  background: var(--papier2);
  border-bottom: 1px solid var(--ligne);
  padding: .875rem 0;
  position: sticky;
  top: var(--header-h);
  z-index: 100;
}
.search-inner { max-width: var(--site-max-w); margin: 0 auto; padding: 0 2rem; display: flex; gap: .875rem; align-items: center; }
.search-box { position: relative; flex: 1; }
.search-box svg { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: var(--gris); pointer-events: none; }
.search-input {
  width: 100%;
  padding: .65rem 1rem .65rem 2.6rem;
  border: 1.5px solid var(--ligne);
  border-radius: var(--r3);
  font-family: var(--serif);
  font-size: .92rem;
  color: var(--encre);
  background: var(--papier);
  transition: border-color var(--trans), box-shadow var(--trans);
  outline: none;
}
.search-input:focus { border-color: var(--vert); box-shadow: 0 0 0 3px rgba(47,107,79,.1); }
.search-input::placeholder { color: var(--gris); opacity: .85; }
.search-btn {
  padding: .65rem 1.5rem;
  background: var(--vert);
  color: var(--papier);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--r3);
  cursor: pointer;
  transition: background var(--trans);
  white-space: nowrap;
}
.search-btn:hover { background: var(--vert-f); }

/* Bouton toggle filtres — visible uniquement sur mobile (≤960px) */
.mobile-filters-btn {
  display: none;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre);
  background: var(--papier2);
  border: 1px solid var(--ligne);
  border-radius: var(--r3);
  padding: .5rem 1rem;
  cursor: pointer;
  margin: .75rem 1rem 0;
  transition: border-color var(--trans), background var(--trans);
}
.mobile-filters-btn:hover { border-color: var(--vert); }
.mobile-filters-btn[aria-expanded="true"] { border-color: var(--vert); background: color-mix(in srgb, var(--vert) 8%, var(--papier2)); }
.mobile-filters-count {
  background: var(--vert);
  color: var(--papier);
  border-radius: 10px;
  padding: 0 6px;
  font-size: .58rem;
  min-width: 18px;
  text-align: center;
  line-height: 1.6;
}

/* Layout bibliothèque : facettes + grille */
.biblio-layout {
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

/* Colonne facettes — top = header + search-wrap (~64px) */
.facettes-col {
  background: var(--papier2);
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-h) + 64px);
}
.facettes-head {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--ligne);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.facettes-head-title { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre); font-weight: 700; }
.facettes-reset { font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); text-decoration: none; transition: color var(--trans); background: none; border: none; cursor: pointer; }
.facettes-reset:hover { color: var(--vert); }

.facette-group { border-bottom: 1px solid var(--ligne); }
.facette-group:last-child { border-bottom: none; }
.facette-toggle {
  width: 100%;
  padding: .65rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre);
  text-align: left;
  transition: background var(--trans);
}
.facette-toggle:hover { background: var(--papier); }
.facette-toggle svg { transition: transform var(--trans); color: var(--gris); flex-shrink: 0; }
.facette-toggle[aria-expanded="false"] svg { transform: rotate(0deg); }
.facette-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.facette-body { padding: .5rem 1.25rem .875rem; display: flex; flex-direction: column; gap: .375rem; }
.facette-body[hidden] { display: none; }

.facette-item { display: flex; align-items: center; gap: .625rem; cursor: pointer; }
.facette-item input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--vert); cursor: pointer; flex-shrink: 0; }
.facette-label { font-family: var(--serif); font-size: .83rem; color: var(--gris); flex: 1; transition: color var(--trans); }
.facette-item:hover .facette-label { color: var(--encre); }
.facette-item--sub { padding-left: 1rem; }
.facette-count {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .06em;
  color: var(--gris);
  background: var(--papier);
  border-radius: 2px;
  padding: 1px 5px;
  margin-left: auto;
  flex-shrink: 0;
}

/* En-tête résultats (compteur + tri) */
.resultats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.count-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--gris); }
.count-label strong { color: var(--encre); font-weight: 700; }

/* Sélecteur de densité : 1 à 4 colonnes */
.cols-select { display: inline-flex; align-items: center; gap: .25rem; }
.cols-label {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris); margin-right: .15rem;
}
.cols-btn {
  font-family: var(--mono); font-size: .8rem; width: 32px; height: 32px;
  border: 1px solid var(--ligne); background: var(--papier); color: var(--gris);
  border-radius: var(--r3); cursor: pointer; transition: all var(--trans);
}
.cols-btn:hover { border-color: var(--vert); color: var(--vert); }
.cols-btn.is-active { background: var(--encre); color: var(--papier); border-color: var(--encre); }
/* Sur petits écrans, le choix manuel de colonnes n'a pas de sens : on masque le sélecteur. */
@media (max-width: 720px) { .cols-select { display: none; } }

/* Outils à droite du compteur : tri + densité, groupés. */
.resultats-tools { display: flex; align-items: center; gap: 1.25rem; }
.sort-select { display: inline-flex; align-items: center; gap: .4rem; }
.sort-input {
  font-family: var(--mono); font-size: .72rem; color: var(--encre);
  padding: .4rem 1.7rem .4rem .6rem;
  background-color: var(--papier);
  border: 1px solid var(--ligne); border-radius: var(--r3);
  cursor: pointer; transition: border-color var(--trans);
  /* Chevron maison : on retire la flèche native pour rester à la charte. */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b5247' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center;
}
.sort-input:hover, .sort-input:focus { border-color: var(--vert); }

/* ===== Réseau documentaire (POC) ===== */
.graphe-doc {
  margin-top: 2rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r2);
  background: var(--papier2);
}
.graphe-doc > summary {
  cursor: pointer;
  padding: .85rem 1.1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre);
}
.graphe-doc .graphe-hint { color: var(--gris); text-transform: none; letter-spacing: 0; }
.graphe-canvas { padding: .5rem 1rem 1.25rem; }
.graphe-canvas svg { width: 100%; height: auto; display: block; }
.graphe-label {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--encre);
}
.graphe-canvas a:hover circle { stroke: var(--encre); stroke-width: 2; }
.graphe-canvas a:hover .graphe-label { fill: var(--vert); }

/* Grille de cartes ressources.
   Par défaut adaptative (remplit la largeur, min 240px → au moins 2 colonnes dès ~720px de zone).
   Le sélecteur de densité force un nombre exact de colonnes via data-cols (JS). */
.ressources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 1.25rem;
}
.ressources-grid[data-cols="1"] { grid-template-columns: 1fr; }
.ressources-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.ressources-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.ressources-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
/* En dessous de 720px on revient toujours à 1 colonne, quel que soit le réglage. */
@media (max-width: 720px) {
  .ressources-grid,
  .ressources-grid[data-cols="2"],
  .ressources-grid[data-cols="3"],
  .ressources-grid[data-cols="4"] { grid-template-columns: 1fr; }
}

/* Carte ressource */
.res-card {
  background: var(--papier2);
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-paper);
  transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
  text-decoration: none;
}
.res-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--vert); }

/* Vignette portrait 2/3 — format jaquette de livre. max-height augmenté pour donner plus de présence. */
.res-thumb { aspect-ratio: 2/3; height: auto; max-height: 380px; position: relative; flex-shrink: 0; overflow: hidden; }

/* Carte sans jaquette : label centré sur le gradient pour ne pas laisser un bloc vide */
.res-thumb--no-cover::before {
  content: attr(data-type-label);
  position: absolute;
  bottom: 1.75rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 240, 230, .38);
  pointer-events: none;
}
.res-thumb--no-cover { background: linear-gradient(150deg, color-mix(in oklab, var(--type-c) 78%, black), var(--type-c)); }

/* Badge type positionné sur la vignette.
   box-shadow + outline : détache le badge de l'aplat de même teinte (contraste porté par la structure, pas juste la couleur). */
.res-badge {
  position: absolute;
  top: .625rem;
  left: .625rem;
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--papier);
  padding: 2px .5rem;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  outline: 1px solid rgba(255,255,255,.18);
}

/* Vignette sans jaquette : un badge dérivé de --type-c se fondrait dans l'aplat de même teinte.
   Fond clair FIXE (non dérivé) = seule garantie d'un contraste >= 3:1 quel que soit le type
   (WCAG 1.4.11), et lecture immédiate du label. Pattern "étiquette claire sur visuel coloré". */
.res-thumb--no-cover .res-badge {
  background: var(--papier);
  color: var(--encre);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* Cover image (portrait book) inside res-thumb: contain so titles aren't cropped.
   Background fills the letterbox area with the warm off-white token. */
.res-thumb-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--papier2);
  /* Subtle book-on-table shadow — keeps the cover from floating on the background. */
  box-shadow: 0 4px 16px rgba(26,43,34,.18), 0 1px 4px rgba(26,43,34,.10);
}

.res-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.res-title {
  font-family: var(--serif);
  font-size: .9rem;
  font-weight: 700;
  color: var(--encre);
  line-height: 1.35;
  margin-bottom: .35rem;
  text-decoration: none;
  display: block;
  transition: color var(--trans);
}
.res-title:hover { color: var(--vert); }
.res-author { font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; color: var(--gris); margin-bottom: .625rem; }
.res-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; }
.res-tag {
  padding: 2px .45rem;
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}
.res-footer {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* Bascule vue Liste / Graphe */
.view-toggle {
  display: flex;
  gap: .25rem;
  background: var(--papier);
  border: 1.5px solid var(--ligne);
  border-radius: var(--r3);
  padding: 2px;
  flex-shrink: 0;
}
.view-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: 2px;
  border: none;
  background: transparent;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.view-btn.active { background: var(--encre); color: var(--papier); }

/* Barre chips filtres actifs */
.chips-bar {
  padding: .625rem 0;
  background: var(--papier);
  border-bottom: 1px solid var(--ligne);
}
.chips-inner {
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  min-height: 32px;
}
.chips-label {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  margin-right: .25rem;
  flex-shrink: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .35rem .625rem;
  background: var(--vert);
  color: var(--papier);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--trans), opacity var(--trans), transform var(--trans);
  border: none;
  min-height: 32px;
}
.chip:hover { background: var(--vert-f); }
.chip-x {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(244,240,230,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  line-height: 1;
  flex-shrink: 0;
}
.clear-all {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: underline;
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  transition: color var(--trans);
}
.clear-all:hover { color: var(--encre); }

/* Étoiles sur les cartes */
.stars { display: flex; gap: 2px; }
.star-i { width: 12px; height: 12px; }
.star-i--half { overflow: visible; }
.res-rating { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; }

/* Boutons d'action sur les cartes (lu, recommander, voir plus tard) */
.res-actions { display: flex; gap: .3rem; margin-left: auto; }
.ra-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r3);
  background: var(--papier);
  border: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
  color: var(--gris);
  flex-shrink: 0;
}
.ra-btn:hover { background: rgba(47,107,79,.12); border-color: var(--vert); color: var(--vert); }
.ra-btn.active { background: rgba(47,107,79,.15); border-color: var(--vert); color: var(--vert); }

/* Vue graphe bibliothèque */
.graph-view {
  background: var(--encre);
  border: 1px solid rgba(244,240,230,.08);
  border-radius: var(--r6);
  padding: 1.5rem;
}
.graph-view svg { width: 100%; height: auto; }
.graph-view details summary {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,240,230,.4);
  cursor: pointer;
  padding: .5rem 0;
}
.graph-view details ol {
  margin-top: .75rem;
  font-family: var(--serif);
  font-size: .85rem;
  color: rgba(244,240,230,.7);
  line-height: 1.7;
  padding-left: 1.5rem;
}

/* wrapper résultats — contexte pour #resultats-zone et #graphe-view */
#resultats-wrapper { display: flex; flex-direction: column; gap: 0; }

/* État vide */
.empty-state { text-align: center; padding: 4rem; color: var(--gris); }
.empty-state p { font-family: var(--serif); font-size: 1rem; }

/* ===== Pages d'erreur (404/500/403…) ===== */
.error-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 5rem 1.5rem 6rem;
  text-align: center;
}
.error-code {
  font-family: var(--mono);
  font-size: clamp(4rem, 14vw, 7rem);
  line-height: 1;
  font-weight: 700;
  color: var(--vert);
  letter-spacing: -.02em;
}
.error-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--encre);
  margin: 1rem 0 .75rem;
}
.error-text {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--encre);
  text-wrap: pretty;
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
}
/* Bouton secondaire sur fond clair : contour encre (btn-outline est pour fond sombre). */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  background: transparent;
  color: var(--encre);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .03em;
  border-radius: var(--r2);
  border: 1px solid var(--ligne);
  transition: all var(--trans);
}
.btn-line:hover { border-color: var(--vert); color: var(--vert); transform: translateY(-1px); }

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 2.5rem; }
.page-btn {
  height: 34px;
  min-width: 34px;
  padding: 0 .75rem;
  border-radius: var(--r3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--ligne);
  background: var(--papier);
  color: var(--encre);
  text-decoration: none;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.page-btn:hover, .page-btn.active { background: var(--vert); border-color: var(--vert); color: var(--papier); }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }
.page-dots { font-family: var(--mono); font-size: .7rem; color: var(--gris); padding: 0 .25rem; }

/* ============================================================
   9. Fiche ressource
   ============================================================ */

/* En-tête fiche */
/* padding-bottom à 0 : .fiche-tabs est le dernier enfant et son onglet actif se cale
   sur le bas du bandeau (border-bottom-color). Un padding en bas les décolle. */
.fiche-header { background: var(--encre); padding: 2rem 2rem 0; }
.fiche-header-inner { max-width: var(--site-max-w); margin: 0 auto; }

/* Layout en-tête fiche : couverture à gauche, contenu à droite (desktop) */
.fiche-header-cols { display: flex; gap: 2.5rem; align-items: flex-start; }
.fiche-header-main { flex: 1; min-width: 0; }

/* Couverture dans l'en-tête — image réelle ou aplat typé.
   Le ratio est appliqué directement en JS via style.aspectRatio (dimensions réelles
   de l'image) → zéro whitespace. La classe --landscape élargit le conteneur. */
.fiche-cover {
  width: 220px;
  flex-shrink: 0;
  aspect-ratio: 2/3;
  border-radius: var(--r3);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 24px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.25);
  align-self: center;
}
/* Paysage (ratio > 1.3) : conteneur plus large pour les images horizontales.
   À répercuter dans chaque media query qui redéfinit .fiche-cover — même
   spécificité, donc la dernière règle de la source gagne. */
.fiche-cover--landscape {
  width: 320px;
}
.fiche-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--papier2);
}
/* Aplat couleur typée — même logique que res-thumb--no-cover mais en grand.
   Label centré par ::before pour signaler le type sans image disponible. */
.fiche-cover--fallback {
  background: linear-gradient(150deg, color-mix(in oklab, var(--type-c) 78%, black), var(--type-c));
  display: flex;
  align-items: center;
  justify-content: center;
}
.fiche-cover--fallback::before {
  content: attr(data-type-label);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244,240,230,.42);
  text-align: center;
  padding: 0 1rem;
  pointer-events: none;
}
.fiche-badge-row { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .75rem;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--papier);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  outline: 1px solid rgba(255,255,255,.18);
}
.fiche-lang {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,240,230,.8);
  padding: .2rem .55rem;
  background: rgba(244,240,230,.1);
  border: 1px solid rgba(244,240,230,.18);
  border-radius: 2px;
}
.fiche-niveau {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terre-cl);
  padding: .2rem .55rem;
  background: rgba(200,99,46,.2);
  border: 1px solid rgba(200,99,46,.35);
  border-radius: 2px;
}
.fiche-title { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; color: var(--papier); letter-spacing: -.01em; line-height: 1.1; margin-bottom: .75rem; }
.fiche-subtitle { font-family: var(--serif); font-size: 1rem; color: rgba(244,240,230,.75); font-style: italic; max-width: 68ch; margin-bottom: 0; }
.fiche-tabs { display: flex; border-top: 1px solid rgba(244,240,230,.1); margin-top: 1.75rem; gap: 0; }
.fiche-tab {
  padding: .875rem 1.25rem;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,240,230,.7);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--trans), border-color var(--trans);
}
.fiche-tab:hover { color: rgba(244,240,230,.8); }
.fiche-tab.active { color: var(--papier); border-bottom-color: var(--terre); }

/* Layout fiche : corps + sidebar métadonnées */
.fiche-layout {
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 2rem;
  align-items: start;
}
/* Interactions placées en haut de la colonne de droite : sous les métadonnées,
   elles tombaient 435px sous le pli et personne ne les voyait. Le corps enjambe
   les deux rangées pour que les métadonnées reprennent sous le bloc.
   Scopé au modificateur : `.fiche-layout` sert aussi la fiche auteur, qui n'a
   pas de bloc d'interactions — sans ça sa sidebar part en rangée 2, seule. */
.fiche-layout--actions { row-gap: 1.25rem; }
.fiche-layout--actions .fiche-main    { grid-column: 1; grid-row: 1 / span 2; }
.fiche-layout--actions .fiche-actions { grid-column: 2; grid-row: 1; }
.fiche-layout--actions .meta-sidebar  { grid-column: 2; grid-row: 2; }
.fiche-actions { display: flex; flex-direction: column; gap: 1.25rem; }

/* Blocs corps */
.bloc {
  background: var(--papier2);
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-paper);
}
.bloc:last-child { margin-bottom: 0; }
.bloc-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--encre);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.bloc-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 1em;
  background: var(--terre);
  border-radius: 2px;
  flex-shrink: 0;
}
.bloc-body p { font-family: var(--serif); font-size: .95rem; color: var(--gris); line-height: 1.85; margin-bottom: 1rem; }
.bloc-body p:last-child { margin-bottom: 0; }

/* Sidebar métadonnées (carte catalogue) */
.meta-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.meta-card {
  background: var(--papier2);
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  overflow: hidden;
  box-shadow: var(--shadow-paper);
}
.meta-card-head {
  padding: .6rem 1rem;
  background: var(--papier);
  border-bottom: 1px solid var(--ligne);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}
.meta-card--centered {
  display: flex;
  justify-content: center;
}
.person-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r6);
  display: block;
}
.meta-list { padding: .25rem 0; }
.meta-card-body { padding: .7rem 1rem .75rem; }
/* Chaque ligne dt/dd du rail catalogue a un border-bottom — correspond à la maquette */
.meta-row { padding: .5rem 1rem; display: flex; flex-direction: column; gap: .15rem; border-bottom: 1px solid var(--ligne); }
.meta-row:last-child { border-bottom: none; }
.meta-label { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.meta-val { font-family: var(--serif); font-size: .88rem; color: var(--encre); }
.meta-val a { color: var(--vert); text-decoration: none; }
.meta-val a:hover { text-decoration: underline; }
.meta-val a.res-author-link { text-decoration: underline; }

/* Thématiques dans la sidebar */
.thematiques-wrap { padding: .875rem 1rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.theme-tag {
  padding: 3px .6rem;
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: none;
  transition: border-color var(--trans), color var(--trans);
}
.theme-tag:hover { border-color: var(--vert); color: var(--vert); }

/* Ressources adjacentes */
.graph-adjacentes {
  background: var(--encre);
  border-radius: var(--r6);
  padding: 1.5rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.graph-adjacentes-title {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,240,230,.7);
  margin-bottom: 1.25rem;
}
.graph-adjacentes svg { width: 100%; height: auto; display: block; }

@keyframes linkPulse { 0%,100% { opacity: .3; } 50% { opacity: .65; } }
@keyframes linkPulseTerre { 0%,100% { opacity: .25; } 50% { opacity: .55; } }
.mg-link   { animation: linkPulse 5s ease-in-out infinite; }
.mg-link-t { animation: linkPulseTerre 5.5s .5s ease-in-out infinite; }
@keyframes nodeCenterPulse { 0%,100% { r: 14; } 50% { r: 15.5; } }
.mg-center { animation: nodeCenterPulse 4s ease-in-out infinite; }
.mg-node-link { cursor: pointer; transition: opacity .15s; }
.mg-node-link:hover .mg-node,
.mg-node-link:focus .mg-node { opacity: 1; filter: url(#glow-c); }
.mg-node-link:hover text { fill: rgba(244,240,230,1); }

/* Cartes adjacentes sous le mini-graphe */
.adj-cards { display: flex; flex-direction: column; gap: .75rem; }
.adj-card {
  display: flex;
  gap: .875rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  padding: .875rem;
  text-decoration: none;
  background: var(--papier);
  transition: background var(--trans), border-color var(--trans), transform var(--trans);
  box-shadow: var(--shadow-paper);
}
.adj-card:hover { background: var(--papier2); border-color: var(--vert); transform: translateX(2px); }
.adj-thumb {
  width: 46px;
  height: 46px;
  border-radius: var(--r3);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: linear-gradient(150deg, color-mix(in oklab, var(--type-c) 78%, black), var(--type-c));
}

.adj-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.adj-content { min-width: 0; }
.adj-relation {
  display: inline-block;
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: .3rem;
  padding: 1px .4rem;
  border: 1px solid var(--ligne);
  border-radius: 2px;
  background: var(--papier2);
}
.adj-title { font-family: var(--serif); font-size: .88rem; font-weight: 700; color: var(--encre); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adj-author { font-family: var(--mono); font-size: .6rem; color: var(--gris); margin-top: .2rem; letter-spacing: .04em; }

/* Lien retour bibliothèque */
.retour-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: none;
  padding: .5rem;
  border-radius: var(--r3);
  transition: color var(--trans);
}
.retour-link:hover { color: var(--vert); }

/* Cote de catalogue — repère stable TYPE-AUT-ANNÉE, couleur réduite mais lisible */
.fiche-cote {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  color: rgba(244,240,230,.7);
  margin-left: auto;
}

/* Actions utilisateur sidebar */
.actions-card {
  background: var(--papier2);
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  padding: 1rem;
  box-shadow: var(--shadow-paper);
}
.actions-card-title {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: .875rem;
}
.user-actions { display: flex; flex-direction: column; gap: .5rem; }
.user-action-btn {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .6rem .875rem;
  border-radius: var(--r3);
  border: 1.5px solid var(--ligne);
  background: var(--papier);
  color: var(--gris);
  font-family: var(--serif);
  font-size: .85rem;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
  text-align: left;
  width: 100%;
}
.user-action-btn:hover { background: rgba(47,107,79,.1); border-color: var(--vert); color: var(--vert-f); }
.user-action-btn.active { background: rgba(47,107,79,.12); border-color: var(--vert); color: var(--vert-f); }
.user-action-btn svg { flex-shrink: 0; }

/* Étoiles interactives notation */
.rating-section { margin-top: 1rem; }
.rating-body { padding: .85rem 1rem .8rem; }
.rating-stars { --star-size: 22px; display: flex; gap: 3px; }
/* <button> reset : on garde uniquement les propriétés visuelles de l'étoile. */
.rating-star {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ligne);
  transition: color var(--trans);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rating-star svg { width: 100%; height: 100%; }
.rating-star.lit { color: var(--terre); }
/* Saisie à la demi-étoile : deux boutons par étoile, chacun ne laissant voir que sa
   moitié du même glyphe (overflow + svg pleine taille recalé sur son bord). */
.rating-slot { position: relative; display: block; width: var(--star-size); height: var(--star-size); }
.rating-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  overflow: hidden;
  cursor: pointer;
  color: var(--ligne);
  transition: color var(--trans);
}
.rating-half--l { left: 0; }
.rating-half--r { right: 0; }
.rating-half--solo { width: 100%; }
.rating-half svg { position: absolute; top: 0; width: var(--star-size); height: var(--star-size); }
.rating-half--l svg { left: 0; }
.rating-half--r svg { right: 0; }
.rating-half.lit { color: var(--terre); }
.rating-half:focus-visible { outline: 2px solid var(--vert); outline-offset: 1px; }
/* Au doigt, un demi-cran de 11px est intouchable : on agrandit l'étoile pour
   ramener chaque moitié aux 24px du critère WCAG 2.5.8. */
@media (pointer: coarse) {
  .rating-stars { --star-size: 48px; gap: 5px; }
}
.rating-text {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .06em;
  color: var(--gris);
  margin-top: .35rem;
}

/* Étoiles sidebar (notes affichées) */
.sidebar-stars { display: flex; gap: 2px; margin-bottom: .2rem; }
.ss { width: 16px; height: 16px; }
.ss--half { overflow: visible; }
.meta-note-count {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .06em;
  color: var(--gris);
}

/* Bouton nouvelle discussion */
.btn-new-disc {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.25rem;
  border: 1.5px solid var(--ligne);
  border-radius: var(--r3);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: none;
  background: var(--papier2);
  transition: background var(--trans), border-color var(--trans), color var(--trans);
  cursor: pointer;
  margin-top: .875rem;
}
.btn-new-disc:hover { background: rgba(47,107,79,.1); border-color: var(--vert); color: var(--vert); }

/* Barre admin */
.admin-bar {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: var(--r3);
  padding: .75rem 1rem;
  margin: 1rem 2rem;
  max-width: var(--site-max-w);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: .85rem;
}

/* ============================================================
   10. Formulaires auth & back-office (mutualisés)
   ============================================================ */

/* Carte auth : connexion, inscription, reset — fond papier, centré, ombre légère. */
.auth-wrap {
  max-width: 440px; margin: 4rem auto;
  background: white; border: 1px solid var(--ligne);
  border-radius: var(--r6); padding: 2.5rem;
  box-shadow: var(--shadow-paper);
}
.auth-wrap h1 { font-size: 1.5rem; margin-bottom: .5rem; }
.auth-wrap .subtitle { color: var(--gris); font-size: .9rem; margin-bottom: 2rem; }

/* Groupe de champ : label mono + input pleine largeur. */
.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block; font-family: var(--mono); font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .4rem;
}
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"],
.form-group input:not([type="checkbox"]) {
  width: 100%; padding: .6rem .9rem;
  border: 1px solid var(--ligne); border-radius: var(--r3);
  font-family: var(--serif); font-size: 1rem;
  transition: border-color 200ms ease;
}
.form-group input:not([type="checkbox"]):focus { outline: none; border-color: var(--vert); }
.form-group .invalid-feedback { color: #c0392b; font-size: .85rem; margin-top: .3rem; }

/* Checkbox avec label inline (CGU, email vérifié…). */
.form-check { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.5rem; }
.form-check input[type="checkbox"] { margin-top: .3rem; flex-shrink: 0; }
.form-check label { font-size: .9rem; color: var(--encre); }

/* Bouton principal auth (submit pleine largeur). */
.auth-btn {
  width: 100%; padding: .75rem;
  background: var(--vert); color: white;
  border: none; border-radius: var(--r3); cursor: pointer;
  font-family: var(--mono); font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background 200ms ease;
}
.auth-btn:hover { background: var(--vert-f); }

/* Liens secondaires sous les formulaires auth. */
.auth-links { margin-top: 1.5rem; font-size: .88rem; color: var(--gris); text-align: center; }
.auth-links a { color: var(--vert); }

/* Message d'erreur auth (flash login). */
.auth-error {
  background: #f8d7da; color: #721c24;
  border: 1px solid #f5c6cb; border-radius: var(--r3);
  padding: .75rem 1rem; margin-bottom: 1.5rem; font-size: .9rem;
}

/* Bouton "Enregistrer" (compte, admin) — moins large que auth-btn. */
.btn-save {
  padding: .65rem 1.5rem;
  background: var(--vert); color: white;
  border: none; border-radius: var(--r3); cursor: pointer;
  font-family: var(--mono); font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background 200ms ease;
}
.btn-save:hover { background: var(--vert-f); }

/* ---- Back-office ---- */

/* En-tête admin : titre + actions à droite, séparateur vert. */
.admin-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--vert);
}
.admin-header h1 { font-size: 1.5rem; }

/* Tableau admin générique. */
.admin-shell table { width: 100%; border-collapse: collapse; background: white; border-radius: var(--r6); overflow: hidden; }
.admin-shell th {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--encre); color: var(--papier);
  padding: .75rem 1rem; text-align: left;
}
.admin-shell td { padding: .75rem 1rem; border-bottom: 1px solid var(--ligne); font-size: .9rem; }
.admin-shell tr:last-child td { border-bottom: none; }
.admin-shell tr:hover td { background: var(--papier2); }

/* Bouton admin (lien-bouton mono vert, utilisé dans les tableaux). */
.btn {
  display: inline-block; padding: .35rem .8rem;
  background: var(--vert); color: white;
  border-radius: var(--r3); font-family: var(--mono); font-size: .72rem;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--vert-f); color: white; }
.btn-danger { background: #c0392b; }
.btn-danger:hover { background: #a93226; }
.btn-sm { padding: .25rem .6rem; font-size: .68rem; }

/* Badges status admin (vérifié, rôle). */
.badge-verified   { background: #d4edda; color: #155724; }
.badge-unverified { background: #fff3cd; color: #856404; }
.badge-admin { background: var(--encre); color: var(--papier); }
.badge-user  { background: var(--ligne);  color: var(--encre); }

/* Lien retour dans les formulaires admin. */
.back-link {
  font-family: var(--mono); font-size: .8rem; color: var(--gris);
  text-decoration: none; display: inline-block; margin-bottom: 1rem;
}

/* ============================================================
   11. Typographie de lecture
   ============================================================ */

/* ============================================================
   10b. Prose longue — articles & pages éditoriales
   ============================================================ */

/* Conteneur centré — remplace le .container générique sur les pages article/page. */
.content-wrap {
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}

/* Article : colonne de lecture unique, centrée à 800px.
   Titre, hero, excerpt et prose partagent le même bord gauche. */
.content-wrap--article {
  max-width: 800px;
}
.content-wrap--article .prose-content {
  max-width: none;
  margin: 0;
}
.article-hero-image {
  margin: 0 0 1.5rem;
  text-align: center;
}
.article-hero-image img {
  max-width: min(100%, 480px);
  height: auto;
  border-radius: var(--r3);
  display: inline-block;
}

/* Page éditoriale : titre aligné sur la prose (même axe que .prose-content). */
.page-title--aligned {
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  /* Override the crème base color: here the background is light (.content-wrap), not dark. */
  color: var(--encre);
}

/* Article show: fiche-title is on a light background (.content-wrap--article), not on .fiche-header. */
.content-wrap--article .fiche-title {
  color: var(--encre);
}

/* Scroll offset for sticky header: anchors land just below the header instead of hidden behind it. */
.prose-content :is(h2,h3,h4)[id],
.content-wrap [id] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* Zone de lecture confortable — ~78ch de mesure, centrée dans .content-wrap. */
.prose-content {
  max-width: 78ch;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--encre);
}

/* Paragraphes : légère coupure en fin de ligne, hyphens auto FR, pas de justify
   (rivières inévitables sur mobile avec justify + hyphens). */
.prose-content p {
  margin-bottom: 1.2em;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.prose-content p:last-child { margin-bottom: 0; }

/* Titres de section dans le contenu rendu */
.prose-content h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--encre);
  margin: 2.5em 0 .6em;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.prose-content h3 {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
  color: var(--vert);
  margin: 2em 0 .5em;
  line-height: 1.2;
  text-wrap: balance;
}
.prose-content h4 {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 1.75em 0 .5em;
}

/* Listes : puce discrète risographie */
.prose-content ul,
.prose-content ol {
  padding-left: 1.5em;
  margin-bottom: 1.2em;
}
.prose-content li {
  margin-bottom: .4em;
  line-height: 1.7;
}
.prose-content ul li::marker { color: var(--terre); }
.prose-content ol li::marker { color: var(--gris); font-family: var(--mono); font-size: .85em; }

/* Blockquote : bord terre, fond légèrement plus foncé, italique éditorial */
.prose-content blockquote {
  border-left: 3px solid var(--terre);
  background: var(--papier2);
  margin: 1.5em 0;
  padding: 1em 1.25em;
  border-radius: 0 var(--r3) var(--r3) 0;
  font-style: italic;
  color: var(--gris);
}
.prose-content blockquote p { margin-bottom: .5em; }
.prose-content blockquote p:last-child { margin-bottom: 0; }

/* Liens dans le contenu */
.prose-content a {
  color: var(--vert);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--trans);
}
.prose-content a:hover { color: var(--terre); }

/* Liens vidéo importés WordPress — pill discret avec icône ▶ */
.prose-content a[href*="youtu"],
.prose-content a[href*="vimeo"],
.prose-content a[href*="dailymotion"],
.prose-content a.video-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em .75em .3em .6em;
  background: var(--papier2);
  border: 1px solid var(--ligne);
  border-radius: 2em;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--gris);
  text-decoration: none;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.prose-content a[href*="youtu"]::before,
.prose-content a[href*="vimeo"]::before,
.prose-content a[href*="dailymotion"]::before,
.prose-content a.video-link::before {
  content: '▶';
  font-size: .65em;
  color: var(--terre);
}
.prose-content a[href*="youtu"]:hover,
.prose-content a[href*="vimeo"]:hover,
.prose-content a[href*="dailymotion"]:hover,
.prose-content a.video-link:hover {
  background: rgba(200,99,46,.08);
  border-color: var(--terre-cl);
  color: var(--terre);
}

/* Images et figures dans le contenu */
.prose-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r6);
  display: block;
  margin: 1.5em auto;
}
.prose-content img.img-petite  { max-width: 300px; }
.prose-content img.img-moyenne { max-width: 500px; }
.prose-content img.img-pleine  { max-width: 100%; }
.yt-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.5em 0; border-radius: var(--r6); overflow: hidden; background: var(--papier2); }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose-content figure {
  margin: 1.5em 0;
  text-align: center;
}
.prose-content figcaption {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--gris);
  margin-top: .5em;
  font-style: italic;
}

/* Icônes emoji inline (remplacement SVG dans le contenu prose) */
.ico-md { display: inline-block; width: .95em; height: .95em; vertical-align: -.12em; }
.ico-md svg { display: block; width: 100%; height: 100%; }

/* ── Notices bibliographiques ─────────────────────────────────────────────
   Convention de contenu : un h2 qui contient un lien = entrée d'ouvrage
   « Auteur – [Titre](url) (année) » (cf. recensement-ouvrages-cles).
   L'auteur et l'année restent en label mono ; le titre devient le bloc serif,
   sur sa propre ligne — plus aucune coupure au milieu d'un « Qu'est-ce ». */
.prose-content h2:has(> a) {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  line-height: 1.7;
  margin: 3.2em 0 .9em;
  padding-top: 2em;
  border-top: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
  clear: both; /* referme le flottant de la couverture de la notice précédente */
}
.prose-content h2 > a {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 700;
  text-transform: none; /* annule l'uppercase hérité du label auteur */
  letter-spacing: -.01em;
  line-height: 1.18;
  text-wrap: balance;
  color: var(--encre);
  text-decoration: none;
  margin: .35em 0 .2em;
  transition: color var(--trans);
}
.prose-content h2 > a:hover,
.prose-content h2 > a:focus-visible { color: var(--vert); }

/* Couverture de la notice : le lien-image flotte à gauche, le texte habille. */
.prose-content p a:has(> img) {
  float: left;
  width: clamp(110px, 14vw, 140px);
  margin: .3em 1.5em .8em 0;
}
.prose-content p a:has(> img) img {
  width: 100%;
  margin: 0;
  border-radius: var(--r3);
  border: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
}
@media (max-width: 640px) {
  .prose-content p a:has(> img) {
    float: none;
    display: block;
    width: 150px;
    margin: 0 auto 1em;
  }
}

/* Tables dans le contenu */
.prose-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
  font-size: .9rem;
}
.prose-content th {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--encre);
  color: var(--papier);
  padding: .6rem .875rem;
  text-align: left;
}
.prose-content td {
  padding: .6rem .875rem;
  border-bottom: 1px solid var(--ligne);
  font-size: .9rem;
  background: var(--papier);
}
.prose-content tr:last-child td { border-bottom: none; }
.prose-content tr:hover td { background: var(--papier2); }

/* Code dans le texte */
.prose-content code {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--papier2);
  border: 1px solid var(--ligne);
  padding: .1em .35em;
  border-radius: var(--r3);
  color: var(--encre);
}
.prose-content pre {
  background: var(--encre);
  color: var(--papier);
  padding: 1.25em;
  border-radius: var(--r6);
  overflow-x: auto;
  margin-bottom: 1.5em;
  font-size: .85rem;
}
.prose-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: 1em;
}

/* Séparateur horizontal */
.prose-content hr {
  border: none;
  border-top: 2px solid var(--ligne);
  margin: 2.5em auto;
  width: 60%;
}

/* Table des matières générée par JS */
.prose-toc {
  background: var(--papier2);
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-paper);
}
.prose-toc-title {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: .75rem;
}
.prose-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.prose-toc li { margin: 0; }
.prose-toc a {
  font-family: var(--serif);
  font-size: .92rem;
  color: var(--encre);
  text-decoration: none;
  padding: .15rem 0;
  border-bottom: 1px solid transparent;
  display: block;
  transition: color var(--trans), border-color var(--trans);
}
.prose-toc a:hover { color: var(--vert); border-bottom-color: var(--ligne); }

/* Grille de cartes articles (/actualites) */
.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 2rem 0;
}

/* Les .article-card dans la grille liste : image à ratio fixe */
.article-list .article-card { display: flex; flex-direction: column; }

/* Lien englobant l'image de la carte (raccourci vers l'article). */
.article-card-media { display: block; }

.article-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}
.article-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Placeholder pour les cartes sans image */
.article-card-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acp-1 { background: linear-gradient(135deg, var(--vert-f), var(--vert)); }
.acp-2 { background: linear-gradient(135deg, var(--encre), var(--vert-f)); }
.acp-3 { background: linear-gradient(135deg, #8a3d20, var(--terre)); }
.acp-4 { background: linear-gradient(135deg, #3a8060, var(--vert)); }
.article-card-placeholder-icon {
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(244,240,230,.35);
  letter-spacing: .06em;
  text-transform: uppercase;
  user-select: none;
}

.article-card-body {
  padding: 1.25rem 1.375rem 1.375rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.article-card .article-date { display: block; margin-bottom: .6rem; }
.article-card .article-title { font-size: 1rem; margin-bottom: .6rem; }
.article-card .article-title a { color: var(--encre); text-decoration: none; transition: color var(--trans); }
.article-card .article-title a:hover { color: var(--vert); }
.article-card .article-excerpt { margin-bottom: .875rem; flex: 1; }

/* Bloc "à la une" — premier article page 1 */
.article-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--papier2);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 2rem;
  transition: box-shadow var(--trans);
}
.article-featured:hover { box-shadow: var(--shadow-lift); }
.article-featured-media { display: block; }
.article-featured-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  overflow: hidden;
}
.article-featured-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.article-featured-placeholder {
  width: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-featured-body {
  padding: 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.article-featured-label {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--vert);
  font-weight: 700;
  margin-bottom: .75rem;
  display: block;
}
.article-featured-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .75rem;
}
.article-featured-title a { color: var(--encre); text-decoration: none; transition: color var(--trans); }
.article-featured-title a:hover { color: var(--vert); }
.article-featured-excerpt {
  font-family: var(--serif);
  font-size: .9rem;
  color: var(--gris);
  line-height: 1.75;
  flex: 1;
}
@media (max-width: 700px) {
  .article-featured { grid-template-columns: 1fr; }
  .article-featured-image, .article-featured-placeholder { min-height: 200px; }
  .article-featured-body { padding: 1.25rem 1.375rem 1.375rem; }
  .article-featured-title { font-size: 1.2rem; }
}

/* Responsive prose */
@media (max-width: 960px) {
  .content-wrap { padding: 1.5rem 1.5rem 3rem; }
  .prose-content { font-size: 1rem; }
}
@media (max-width: 600px) {
  .content-wrap { padding: 1.25rem 1rem 2.5rem; }
  .prose-content { font-size: .97rem; }
  .prose-content h2 { font-size: 1.2rem; margin: 2em 0 .5em; }
  .prose-content h3 { font-size: 1.05rem; }
  .article-list { grid-template-columns: 1fr; gap: 1rem; }
  .res-thumb { aspect-ratio: auto; height: 220px; max-height: none; }
}

/* Titres : équilibrage des lignes, pas de césure automatique (les titres doivent rester lisibles entiers). */
h1, h2, h3,
.hero-title,
.section-title,
.fiche-title,
.rejoindre-title,
.rv-title,
.action-title,
.article-title,
.bloc-title,
.adj-title {
  text-wrap: balance;
  hyphens: manual;
}

/* Prose courante (textes d'accompagnement, listes sans justify) :
   text-wrap:pretty évite les veuves (dernier mot seul) sans dégrader sur vieux navigateurs.
   NB : .hero-sub exclu volontairement — hyphens:manual porté par le sélecteur (a11y dyslexie). */
.section-lead,
.temoignage-text,
.footer-brand p,
.action-desc,
.article-excerpt,
.rejoindre-sub {
  text-wrap: pretty;
  hyphens: auto;
}

/* Prose longue (résumés, corps de fiche) : justify + hyphens obligatoires pour éviter les rivières.
   max-width:72ch maintient la mesure lisible quand la colonne est large. */
.bloc-body p {
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
  max-width: 72ch;
}

/* ============================================================
   12. Feedback HTMX
   ============================================================ */

/* Indique le chargement en cours — HTMX ajoute .htmx-request sur l'élément hx-indicator */
#resultats-zone.htmx-request {
  opacity: .55;
  transition: opacity .2s ease;
}

/* ============================================================
   13. Responsive
   ============================================================ */
/* ── Mobile nav panel ── */
.mobile-nav {
  display: none;
  position: absolute;
  top: 58px; left: 0; right: 0;
  background: var(--encre);
  border-top: 1px solid rgba(244,240,230,.1);
  z-index: 199;
  overflow-y: auto;
  max-height: calc(100vh - 58px);
}
.mobile-nav.open { display: block; }
.mobile-nav-list {
  list-style: none;
  padding: .75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-nav-list li a {
  display: block;
  padding: .55rem 0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,240,230,.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(244,240,230,.06);
  transition: color var(--trans);
}
.mobile-nav-list li a:hover,
.mobile-nav-list li a.active { color: var(--papier); }
/* Parent row: link + toggle button side by side */
.nav-parent-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(244,240,230,.06);
}
.nav-parent-wrap > a {
  flex: 1;
  border-bottom: none;
}
.nav-accordion-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(244,240,230,.6);
  padding: .4rem .5rem;
  line-height: 1;
  font-size: .8rem;
  transition: color var(--trans), transform var(--trans);
}
.nav-accordion-toggle:hover { color: var(--papier); }
.nav-has-children.acc-open > .nav-parent-wrap .nav-accordion-toggle .nav-chevron {
  transform: rotate(180deg);
}
/* Mobile sub-list */
.nav-dropdown--mobile {
  display: none;
  list-style: none;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--vert);
  margin: 0 0 .25rem;
}
.nav-has-children.acc-open > .nav-dropdown--mobile { display: block; }
.nav-dropdown--mobile li a {
  padding: .4rem 0;
  font-size: .65rem;
  border-bottom-color: transparent;
  color: rgba(244,240,230,.6);
}
.nav-dropdown--mobile li a:hover { color: var(--papier); }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-graph-wrap { display: none; }
  .biblio-layout-home { grid-template-columns: 1fr; gap: 3rem; }
  .mobile-filters-btn { display: flex; }
  .biblio-layout { grid-template-columns: 1fr; }
  .facettes-col { position: static; display: none; }
  .facettes-col.is-open { display: block; }
  .actions-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr; }
  .rejoindre-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Desktop nav hidden on mobile — mobile-nav takes over */
  .site-nav { display: none; }
  .hamburger { display: flex; }
  .page-meta { display: none; }
  .fiche-layout { grid-template-columns: 1fr; }
  /* Le placement explicite doit sauter, sinon grid-column:2 recrée une 2e colonne.
     En pile, l'ordre du DOM suffit : les interactions y précèdent déjà le corps. */
  .fiche-layout--actions .fiche-main,
  .fiche-layout--actions .fiche-actions,
  .fiche-layout--actions .meta-sidebar { grid-column: auto; grid-row: auto; }
  /* Couverture fiche : réduite sur tablette */
  .fiche-cover { width: 160px; }
  .fiche-cover--landscape { width: 220px; }
  /* Agenda : 2 colonnes sur tablette */
  .agenda-home-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  /* Agenda : 1 colonne ≤720px */
  .agenda-home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .section-generic { padding: 3.5rem 0; }
  .section-inner { padding: 0 1.25rem; }
  .biblio-layout-home { padding: 3rem 1.25rem; }
  .res-vignettes { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .articles-header { flex-direction: column; align-items: flex-start; }
  .agenda-header { flex-direction: column; align-items: flex-start; }
  .biblio-stats { gap: 1.5rem; }
  .biblio-layout { padding: 1rem; }
  .ressources-grid { grid-template-columns: 1fr; }
  .search-wrap { padding: .875rem 0; }
  .search-inner { padding: 0 1rem; }
  .page-header { padding: 1.75rem 0; }
  .page-header-inner { padding: 0 1rem; }
  .fiche-header { padding: 1.5rem 1rem 0; }
  .fiche-layout { padding: 1rem; }
  /* Mobile : couverture au-dessus du titre (column), centrée, taille contenue */
  .fiche-header-cols { flex-direction: column; gap: 1.25rem; align-items: center; }
  .fiche-cover { width: 140px; }
  .fiche-cover--landscape { width: 190px; }
  .fiche-header-main { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   12. Formulaire public d'adhésion
   ============================================================ */

.adhesion-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.adhesion-intro {
  margin-bottom: 2.5rem;
}
.adhesion-intro h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--encre);
  margin-bottom: .75rem;
  line-height: 1.15;
}
.adhesion-intro p {
  font-size: 1.05rem;
  color: var(--gris);
  line-height: 1.7;
  max-width: 65ch;
}
.adhesion-intro p + p { margin-top: .6rem; }
.adhesion-privacy-note { font-size: .9rem; }
.adhesion-privacy-note a { color: var(--vert); }

.adhesion-flash-success {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: var(--r6);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: .95rem;
}
.adhesion-flash-success svg { flex-shrink: 0; margin-top: .1rem; }

.adhesion-card {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--r6);
  padding: 2.5rem;
  box-shadow: var(--shadow-paper);
}

/* Two columns for paired fields (prénom/nom, téléphone/département). */
.adhesion-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}

/* Re-use .form-group conventions from auth forms. */
.adhesion-form .form-group { margin-bottom: 1.25rem; }
.adhesion-form .form-group label {
  display: block;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: .4rem;
}
.adhesion-form input[type="text"],
.adhesion-form input[type="email"],
.adhesion-form input[type="tel"],
.adhesion-form textarea {
  width: 100%;
  padding: .6rem .9rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r3);
  font-family: var(--serif);
  font-size: 1rem;
  background: var(--papier);
  transition: border-color var(--trans);
}
.adhesion-form input:focus,
.adhesion-form textarea:focus {
  outline: 2px solid var(--vert);
  outline-offset: 1px;
  border-color: var(--vert);
}
.adhesion-form textarea { resize: vertical; min-height: 130px; }

/* Inline errors in the terre (burnt orange) charte colour. */
.adhesion-form ul.form-errors,
.adhesion-form .form-error {
  color: var(--terre);
  font-size: .85rem;
  margin-top: .3rem;
  list-style: none;
  padding: 0;
}

/* Consent checkbox block. */
.adhesion-consent {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 1.25rem 0 .5rem;
}
.adhesion-consent input[type="checkbox"] { margin-top: .25rem; flex-shrink: 0; accent-color: var(--vert); }
.adhesion-consent label { font-size: .9rem; color: var(--encre); line-height: 1.5; }
.adhesion-consent label a { color: var(--vert); }

.adhesion-submit { margin-top: 1.75rem; }
.adhesion-submit .btn-primary { padding: .8rem 2rem; font-size: .9rem; }

/* Responsive: single column on narrow screens. */
@media (max-width: 600px) {
  .adhesion-card { padding: 1.5rem 1.25rem; }
  .adhesion-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   Page Faire un don — widget HelloAsso + notice fallback
   ============================================================ */

/* Responsive wrapper for the HelloAsso iframe. */
.don-widget {
  margin-top: 2.5rem;
  border-radius: var(--r6);
  overflow: hidden;
  box-shadow: var(--shadow-paper);
}
.don-widget iframe {
  display: block;
  width: 100%;
  min-height: 750px;
  border: 0;
}

/* Fallback notice when HELLOASSO_DON_URL is not configured. */
.don-notice {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--papier2);
  border: 1px solid var(--ligne);
  border-left: 4px solid var(--vert);
  border-radius: var(--r6);
}
.don-notice__text {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--encre);
  margin: 0;
  line-height: 1.6;
}
.don-notice__link { color: var(--vert); text-decoration: underline; }
.don-notice__link:hover { color: var(--vert-f); }

@media (max-width: 600px) {
  .don-widget iframe { min-height: 600px; }
}

/* ============================================================
   11. Page Auteurs — catalogue de bibliothèque
   ============================================================ */

.auteurs-wrap { padding: 2rem 2rem 4rem; max-width: 1100px; margin: 0 auto; }

/* Barre outils : tabs + search */
.auteurs-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--ligne);
}

.auteurs-tabs { display: flex; gap: .25rem; }

.auteurs-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--gris);
  background: transparent;
  border: 1.5px solid var(--ligne);
  border-radius: var(--r3);
  cursor: pointer;
  transition: all var(--trans);
}
.auteurs-tab:hover { border-color: var(--vert); color: var(--vert); }
.auteurs-tab--active {
  background: var(--encre);
  color: var(--papier);
  border-color: var(--encre);
}
.auteurs-tab-count {
  display: inline-block;
  padding: .05rem .35rem;
  font-size: .65rem;
  background: rgba(255,255,255,.18);
  border-radius: 2px;
}
.auteurs-tab--active .auteurs-tab-count { background: rgba(255,255,255,.2); }
.auteurs-tab:not(.auteurs-tab--active) .auteurs-tab-count {
  background: var(--papier2);
  color: var(--encre);
}

/* Search */
.auteurs-search-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  padding: .4rem .75rem;
  background: white;
  border: 1.5px solid var(--ligne);
  border-radius: var(--r3);
  transition: border-color var(--trans);
}
.auteurs-search-wrap:focus-within { border-color: var(--vert); }
.auteurs-search-icon { color: var(--gris); flex-shrink: 0; }
.auteurs-search {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: .875rem;
  font-family: var(--sans);
  color: var(--encre);
}
.auteurs-search::placeholder { color: var(--gris); }

.auteurs-no-results {
  text-align: center;
  color: var(--gris);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .05em;
  padding: 3rem 0;
}

/* Divider alphabétique — onglet catalog */
.auteurs-alpha-group { margin-bottom: 2rem; }

.auteurs-alpha-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: .75rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--papier);
  background: var(--encre);
  border-radius: 2px 2px 0 0;
  position: relative;
}
.auteurs-alpha-tab::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--encre);
}

/* Grille de cartes */
.auteurs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
}

/* Carte auteur */
.auteurs-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  background: white;
  border: 1.5px solid var(--ligne);
  border-radius: var(--r3);
  text-decoration: none;
  color: var(--encre);
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
  box-shadow: var(--shadow-paper);
}
.auteurs-card:hover {
  border-color: var(--vert);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.auteurs-card-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.auteurs-card-avatar--vert { background: var(--vert); }
.auteurs-card-avatar--terre { background: var(--terre); }
.auteurs-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.auteurs-card-initial {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.auteurs-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.auteurs-card-name {
  font-family: var(--serif);
  font-size: .925rem;
  font-weight: 600;
  color: var(--encre);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auteurs-card-count {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .05em;
  color: var(--vert);
}
.auteurs-card-count--zero { color: var(--gris); opacity: .6; }

/* Responsive */
@media (max-width: 600px) {
  .auteurs-wrap { padding: 1.25rem 1rem 3rem; }
  .auteurs-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .auteurs-toolbar { gap: .75rem; }
  .auteurs-search-wrap { max-width: 100%; }
}

/* ── Graphe global D3.js ──────────────────────────────────────────────────── */
.graphe-page { display: flex; flex-direction: column; min-height: calc(100vh - 60px); }
.graphe-header { background: var(--encre); padding: 1.5rem 2rem 1.25rem; border-bottom: 1px solid rgba(244,240,230,.08); }
.graphe-header-inner { max-width: 960px; margin: 0 auto; }
.graphe-title { font-family: var(--mono); font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--papier); margin: .4rem 0 .35rem; }
.graphe-subtitle { font-size: .82rem; color: rgba(244,240,230,.55); margin: 0 0 .75rem; }
.graphe-legend { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.gl-item { display: flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .65rem; letter-spacing: .07em; color: rgba(244,240,230,.5); }
.gl-line { display: inline-block; width: 24px; height: 1.5px; }
.gl-line--theme { background: #2f6b4f; }
.gl-line--auteur { background: #c8632e; }
.gl-hint { font-size: .6rem; opacity: .4; }
#graph-container { position: relative; flex: 1; background: var(--encre); min-height: 520px; }
#graph-container svg { display: block; width: 100%; height: 100%; }
.graph-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; color: rgba(244,240,230,.3); }
.rg-tooltip { background: rgba(20,32,26,.92); border: 1px solid rgba(244,240,230,.12); border-radius: 4px; padding: .45rem .65rem; font-family: var(--mono); font-size: .7rem; color: var(--papier); max-width: 220px; z-index: 10; line-height: 1.4; }
.rg-tooltip strong { display: block; margin-bottom: .2rem; color: #fff; }
.rg-tooltip span { opacity: .55; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.graphe-fallback { text-align: center; padding: .75rem; font-family: var(--mono); font-size: .75rem; background: var(--encre); margin: 0; }
.graphe-fallback a { color: rgba(244,240,230,.45); }
.graphe-link { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .07em; color: var(--gris); text-decoration: none; padding: .3rem .55rem; border: 1px solid var(--ligne); border-radius: 3px; white-space: nowrap; transition: color .15s, border-color .15s; }
.graphe-link:hover { color: var(--encre); border-color: var(--encre); }
.res-excerpt { font-size: 0.82rem; color: var(--gris); margin: 0.3rem 0 0; line-height: 1.5; }
.res-excerpt mark { background: color-mix(in oklab, var(--terre-cl) 35%, transparent); border-radius: 2px; padding: 0 2px; }