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

  /* 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; }
/* 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: 1180px;
  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: 1180px;
  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 2rem 2rem; }
.footer-inner { max-width: 1180px; margin: 0 auto; }

.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: 1180px;
  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 { --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: 1180px; 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: 1180px;
  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: 1180px;
  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 2rem; }
.section-inner { max-width: 1180px; margin: 0 auto; }

.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 2rem; }
.rejoindre-inner {
  max-width: 1180px;
  margin: 0 auto;
  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 2rem; }
.page-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  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 2rem;
  position: sticky;
  top: var(--header-h);
  z-index: 100;
}
.search-inner { max-width: 1180px; margin: 0 auto; 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); }

/* Layout bibliothèque : facettes + grille */
.biblio-layout {
  max-width: 1320px;
  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-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 2rem;
  background: var(--papier);
  border-bottom: 1px solid var(--ligne);
}
.chips-inner {
  max-width: 1180px;
  margin: 0 auto;
  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 */
.fiche-header { background: var(--encre); padding: 2.5rem 2rem 0; }
.fiche-header-inner { max-width: 1180px; 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é, même dimension */
.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);
}
.fiche-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  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: 1180px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 2rem;
  align-items: start;
}

/* 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-list { padding: .25rem 0; }
/* 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; }

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

/* 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; }
.at-1 { background: linear-gradient(135deg, #8a3d20, var(--terre)); }
.at-2 { background: linear-gradient(135deg, var(--encre), var(--vert-f)); }
.at-3 { background: linear-gradient(135deg, var(--vert), #4a9b75); }
.at-4 { background: linear-gradient(135deg, var(--vert-f), var(--vert)); }
.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; padding-top: 1rem; border-top: 1px solid var(--ligne); }
.rating-label {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: .5rem;
}
.rating-stars { 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); }
.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: 1180px;
  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: 1180px;
  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;
}

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

/* 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; }
  .biblio-layout { grid-template-columns: 1fr; }
  .facettes-col { position: static; }
  .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; }
  /* Couverture fiche : réduite sur tablette */
  .fiche-cover { width: 160px; }
  /* 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 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 1rem; }
  .page-header { padding: 1.75rem 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-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%; }
}