:root{--papier:#f1ead9;--encre:#2b2a20;--sepia:#6b5636;--vert:#4d6146;--vert-pale:#8fa183;
  --carmin:#8c3a30;--fil:#c9bda2}
*{box-sizing:border-box}
/* WordPress injecte « body.custom-background{background-image:none} » dans l'en-tête :
   il faut donc au moins deux crans de spécificité pour que le papier tienne. */
body.herbier-accueil, body.herbier{margin:0;color:var(--encre);
  font-family:"Spectral",Georgia,serif;font-size:17.5px;line-height:1.62;
  /* un vrai papier ancien, scanné (Wikimedia Commons, domaine public), rendu tuilable
     sans couture ; JP a jugé le papier fabriqué par calcul « pas terrible » (22/09). */
  /* 28/09 : le papier n'est plus une tuile répétée (JP : « on voit qu'il s'agit d'un carré
     répété x fois »). C'est une feuille unique, fixe, posée sous la page par html::before ;
     le corps de page reste transparent pour la laisser voir. */
  background:none !important;background-color:transparent !important}
html{background:#d9c9a5}
html::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:#d9c9a5 url("papier-ocre-20260928-153834.jpg") center/cover no-repeat}
/* le filigrane botanique, semé par herbier-filigrane-*.js */
#filigrane{position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none;z-index:-1}
#filigrane img{position:absolute;height:auto;opacity:.22}
@media print{#filigrane,html::before{display:none}}
main,header,footer,section{position:relative;z-index:1}
a{color:inherit}

/* ---------- l'en-tête ---------- */
header{padding:34px 24px 0;text-align:center}
.titre-site{font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(30px,6vw,52px);letter-spacing:.16em;margin:0;color:var(--vert)}
.devise{font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(15px,2.4vw,20px);color:var(--sepia);margin:6px 0 0;letter-spacing:.04em}

/* ---------- les sept feuilles d'ortie ---------- */
/* 23/09 — JP : « les six feuilles d'ortie sont trop uniformes, les feuilles et fleurs
   du bas sont vraiment agréables » : l'en-tête reprend les mêmes spécimens, avec le même
   agencement (le nom sous l'image), un cran plus petit que le bas. Les règles des
   spécimens (.specimens) s'appliquent ; celles-ci ne fixent que la taille. */
.rubriques.specimens{max-width:1120px;margin:18px auto 0;padding:0 20px;gap:8px 20px}
.rubriques.specimens a{width:118px;gap:6px}
.rubriques.specimens .porte{height:140px}
.rubriques.specimens .nom{font-size:16px}
.rubriques.specimens .latin{font-size:11.5px;margin-top:-4px}

/* ---------- la recherche ---------- */
.chercher{max-width:620px;margin:6px auto 0;padding:0 20px}
.chercher form{display:flex;gap:10px;align-items:center;background:rgba(255,253,246,.72);
  border:1px solid var(--fil);border-radius:44px/38px;padding:7px 8px 7px 22px;
  box-shadow:inset 0 1px 3px rgba(120,100,70,.10)}
.chercher input{flex:1;min-width:0;width:100%;border:0;background:none;outline:none;font:inherit;
  font-size:16.5px;color:var(--encre);font-family:"Spectral",Georgia,serif}
.chercher button{border:0;cursor:pointer;background:var(--vert);color:#f6f2e6;font:inherit;
  font-family:"Cormorant Garamond",serif;font-size:17px;letter-spacing:.06em;
  padding:9px 26px;border-radius:40px/34px}
.chercher button:hover{background:var(--carmin)}

/* ---------- le seuil : ce que contient le carnet ---------- */
.seuil{max-width:900px;margin:44px auto 0;padding:0 24px;text-align:center}
.seuil p{font-size:20px;line-height:1.68;color:var(--sepia);margin:0 auto;max-width:34em;
  font-family:"Cormorant Garamond",serif;font-style:italic}
.compte{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 46px;margin:26px 0 0}
.compte b{display:block;font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:34px;color:var(--vert);line-height:1}
.compte span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vert-pale)}

/* ---------- les dernières plantes : des médaillons, pas des cases ---------- */
.titre-bloc{text-align:center;margin:56px 0 4px;font-family:"Cormorant Garamond",serif;
  font-weight:300;font-size:23px;letter-spacing:.18em;text-transform:uppercase;color:var(--sepia)}
.sous-bloc{text-align:center;font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:16.5px;color:var(--vert-pale);margin:0 0 28px}
.plantes{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;
  justify-content:center;gap:40px 36px}
.plante{width:300px;text-decoration:none;display:flex;flex-direction:column;align-items:center;
  gap:11px;transition:transform .45s cubic-bezier(.3,1,.4,1)}
.medaillon{display:flex;align-items:center;justify-content:center;
  width:290px;height:290px;overflow:hidden;padding:16px;
  border-radius:52% 48% 46% 54% / 50% 54% 46% 50%;
  background:rgba(255,253,247,.86);box-shadow:0 2px 5px rgba(60,50,30,.14),
  0 14px 26px rgba(60,50,30,.16), inset 0 0 0 1px rgba(201,189,162,.6)}
/* une planche botanique se regarde en entier : on la contient, on ne la rogne pas */
.medaillon img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  display:block;transition:transform .6s cubic-bezier(.3,1,.4,1)}
.plante:hover{transform:translateY(-5px)}
.plante:hover .medaillon img{transform:scale(1.07)}
.nomfr{font-family:"Cormorant Garamond",serif;font-size:21px;color:var(--encre);text-align:center;
  line-height:1.25}
.nomlat{font-style:italic;font-size:13.5px;color:var(--vert-pale);text-align:center;margin-top:-6px}

/* ---------- les familles : des étiquettes d'herbier épinglées ---------- */
.familles{max-width:760px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;
  justify-content:center;gap:6px 7px}
.famille{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;
  background:rgba(255,253,246,.70);border:1px solid var(--fil);
  border-radius:14px 4px 14px 4px/5px 14px 5px 14px;padding:3px 10px;
  transform:rotate(var(--r,0));box-shadow:0 1px 2px rgba(60,50,30,.08);
  transition:transform .3s, background .3s, color .3s}
.famille span{font-family:"Cormorant Garamond",serif;font-size:15px;color:var(--encre);
  line-height:1.5}
.famille em{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:9.5px;
  color:var(--vert-pale)}
.famille:hover{background:rgba(77,97,70,.10);transform:rotate(0) translateY(-2px)}
.famille:hover span{color:var(--carmin)}
.famille:nth-child(3n+1){--r:-1.4deg} .famille:nth-child(3n+2){--r:1.1deg}
.famille:nth-child(4n+3){--r:-.7deg}

/* ---------- la balade : une bande pleine largeur, photographique ---------- */
.balade{max-width:1100px;margin:58px auto 0;padding:0 24px;display:flex;flex-wrap:wrap;
  align-items:center;gap:30px}
.balade .vue{flex:1 1 320px;min-width:280px;overflow:hidden;
  border-radius:46% 54% 48% 52% / 44% 42% 58% 56%;
  box-shadow:0 3px 8px rgba(60,50,30,.16),0 20px 40px rgba(60,50,30,.18)}
.balade .vue img{width:100%;height:300px;object-fit:cover;object-position:center 42%;display:block}
.balade .mot{flex:1 1 300px;min-width:260px}
.balade h3{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:27px;
  margin:0 0 8px;color:var(--vert)}
.balade p{margin:0 0 14px;color:var(--encre)}
.balade a.lire{font-family:"Cormorant Garamond",serif;font-size:17px;letter-spacing:.05em;
  color:var(--carmin);text-decoration:none;border-bottom:1px solid rgba(140,58,48,.35);
  padding-bottom:2px}
.balade a.lire:hover{border-bottom-color:var(--carmin)}

/* ---------- l'herbier des rubriques, en bas ---------- */
.herbier-bas{max-width:1180px;margin:64px auto 0;padding:44px 20px 10px;
  border-top:1px solid var(--fil)}
.specimens{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:14px 26px}
.specimens a{display:flex;flex-direction:column;align-items:center;gap:10px;width:132px;
  text-decoration:none;transition:transform .45s cubic-bezier(.3,1,.4,1)}
.specimens .porte{display:block;width:100%;height:168px;
  filter:drop-shadow(2px 5px 4px rgba(42,52,32,.26)) drop-shadow(10px 17px 15px rgba(42,52,32,.18));
  transition:filter .45s ease}
.specimens img{width:100%;height:100%;object-fit:contain;object-position:center bottom;
  display:block;transform:rotate(var(--b));transform-origin:bottom center;
  transition:transform .45s cubic-bezier(.3,1,.4,1)}
.specimens .nom{font-family:"Cormorant Garamond",serif;font-size:17px;letter-spacing:.05em;
  color:var(--sepia);white-space:nowrap}
.specimens .latin{font-style:italic;font-size:12px;color:var(--vert-pale);margin-top:-8px;
  white-space:nowrap}
.specimens a:hover{transform:translateY(-8px)}
.specimens a:hover .nom{color:var(--carmin)}
.specimens a:hover img{transform:rotate(calc(var(--b) * .25))}
.specimens a:nth-child(1){--b:-7deg} .specimens a:nth-child(2){--b:5deg}
.specimens a:nth-child(3){--b:-4deg} .specimens a:nth-child(4){--b:8deg}
.specimens a:nth-child(5){--b:-6deg} .specimens a:nth-child(6){--b:4deg}
.specimens a:nth-child(7){--b:-9deg}

footer{text-align:center;padding:46px 20px 56px;color:var(--sepia);font-size:14px;
  font-family:"Cormorant Garamond",serif;letter-spacing:.08em}

@media (max-width:860px){
  /* Sur un téléphone, sept feuilles grandeur nature occupaient tout le premier écran.
     Elles sont réduites, et le nom reste écrit dessus : le poser dessous coûtait une
     ligne de plus par feuille. La lisibilité vient d'une ombre portée serrée. */
  /* « Jardin-forêt » ne tient pas sur la largeur d'une feuille de 76 px : le nom
     se replie donc sur deux lignes au lieu de déborder sur la feuille voisine. */
  /* Du texte blanc posé à même le limbe ne se lit pas : le vert de l'ortie est trop
     clair par endroits et le nom déborde sur le papier. Il reçoit donc une étiquette
     sombre, collée sur la feuille comme on colle une bande de papier gommé. Elle ne
     prend aucune ligne de plus, puisqu'elle est posée par-dessus. */
  /* La bande sombre rendait le nom illisible sur l'écran de JP. On revient au texte
     posé sur la feuille, mais assez grand pour se lire, avec une ombre dense qui le
     détache du vert sans peindre de rectangle. */
  /* Le nom se détache par un contour d'encre, pas par une ombre floue : c'est net,
     et cela se lit sur le vert de la feuille comme sur le papier. */
  /* Le nom doit tenir DANS la feuille : « Balades botaniques » fait dix-huit
     caractères, il se replie sur deux lignes plutôt que de déborder sur le papier. */
  .rubriques.specimens{gap:4px 10px;padding:0 8px;margin-top:8px}
  .rubriques.specimens a{width:96px;gap:3px}
  .rubriques.specimens .porte{height:104px}
  .rubriques.specimens .nom{font-size:13.5px}
  .rubriques.specimens .latin{font-size:10px;margin-top:-2px}
  .chercher{margin-top:2px}
  .chercher form{padding:5px 6px 5px 16px}
  .chercher input{font-size:15px}
  .chercher button{padding:8px 18px;font-size:16px}
  .plante{width:142px} .medaillon{width:132px;height:132px}
  .nomfr{font-size:17px}
  .specimens a{width:100px} .specimens .porte{height:126px}
  .specimens .nom{font-size:15px} .specimens .latin{font-size:11px}
  .compte{gap:10px 26px} .compte b{font-size:27px}
  .balade .vue img{height:210px}
  /* sur un téléphone, ces étiquettes prenaient un écran entier pour dix-huit noms */
  .familles{gap:5px 6px;padding:0 16px}
  .famille{padding:2px 8px;gap:5px}
  .famille span{font-size:13.5px}
  .famille em{font-size:9px}
}

/* ---------- l'accès au menu complet du site ---------- */
.carnet-acces{position:absolute;top:16px;left:18px;z-index:40}
/* Le même bouton à trois barres que sur le reste du site : on ne réinvente pas un
   accès au menu, on reprend celui que JP connaît. */
#ouvre-menu{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:38px;padding:0 9px;cursor:pointer;
  background:transparent;border:1px solid var(--fil);border-radius:4px}
#ouvre-menu span{display:block;height:2px;background:var(--encre);border-radius:2px}
#ouvre-menu:hover{background:rgba(77,97,70,.10)}
#ouvre-menu:focus-visible{outline:2px solid var(--carmin);outline-offset:2px}
/* Le menu du site : un fond franc, un texte à l'encre, assez grand pour se lire.
   JP l'a vu délavé le 22/09 — sépia clair de 14 px sur crème, avec un trait sous
   chaque lien hérité du thème parent. */
#menu-site{position:absolute;top:calc(100% + 8px);left:0;min-width:340px;max-width:min(94vw,900px);
  max-height:min(76vh,680px);overflow:auto;background:#fbf8ee;
  border:1px solid #c9bda2;border-radius:6px;
  box-shadow:0 6px 14px rgba(50,42,25,.18), 0 26px 60px rgba(50,42,25,.30);
  padding:12px 0}
#menu-site[hidden]{display:none}
#menu-site ul{list-style:none;margin:0;padding:0}
#menu-site li>a{display:block;font-family:"Cormorant Garamond",serif;font-size:19px;
  color:#2b2a20;text-decoration:none;padding:6px 20px;border:0 !important}
#menu-site li>a:hover{background:rgba(77,97,70,.10);color:var(--carmin)}
/* Le thème glisse dans chaque entrée à sous-menu un <svg class="icon icon-expand">
   sans dimensions : hors de son CSS d'origine, il s'affichait en chevron géant au
   milieu du menu. On le ramène à la taille d'une flèche. */
#menu-site svg.icon{width:11px;height:11px;margin-left:7px;vertical-align:baseline;
  fill:currentColor;opacity:.55;flex:none}
#menu-site li>a{display:flex;align-items:center;justify-content:space-between;gap:10px}
#menu-site li.menu-item-has-children>a{cursor:pointer}
#menu-site li.menu-item-has-children.ouvert>a svg.icon{transform:rotate(180deg)}

/* les sous-menus restent repliés : on déplie celui qu'on veut */
#menu-site ul ul{display:none;columns:2;column-gap:18px;padding:4px 0 10px;
  border-top:1px solid rgba(201,189,162,.6);margin:4px 12px 6px;
  max-height:46vh;overflow-y:auto;position:relative}
#menu-site li.ouvert>ul{display:block}
#menu-site ul ul a{font-family:"Spectral",Georgia,serif;font-size:15.5px;padding:3px 12px;
  color:#2b2a20;display:block;break-inside:avoid;border:0 !important;
  text-decoration:none !important;border-radius:3px}
#menu-site ul ul a:hover{color:#8c3a30;background:rgba(77,97,70,.10);border:0 !important}

/* le champ de filtre des molécules, que le méga-menu du site pose lui-même */
/* le champ de filtre reste collé en haut de la liste : avec soixante et une molécules,
   chercher celle qui commence par U ne doit pas demander de descendre la colonne. */
#menu-site .mega-filter{column-span:all;padding:6px 10px 8px;display:flex;align-items:center;
  gap:10px;position:sticky;top:0;z-index:2;background:rgba(253,250,242,.98);
  border-bottom:1px solid rgba(201,189,162,.5);margin:0 0 4px}
#menu-site .mega-filter-input{flex:1;min-width:0;font:inherit;font-size:14.5px;
  background:rgba(240,235,222,.7);border:1px solid var(--fil);border-radius:3px;
  padding:5px 9px;color:var(--encre)}
#menu-site .mega-filter-count{font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.1em;color:var(--vert-pale);white-space:nowrap}
@media (max-width:860px){
  .carnet-acces{top:10px;left:10px}
  #ouvre-menu{width:38px;height:34px;padding:0 8px;gap:4px}
  /* ⛔ 22/09, 20 h 40 — JP : « scroller de haut en bas et non de gauche à droite ».
     Des colonnes CSS avec une hauteur limitée débordent vers la DROITE dès que la
     liste dépasse la hauteur : les 86 familles créaient des colonnes hors écran. Sur
     téléphone, une seule colonne sans hauteur limitée ; c'est le panneau qui défile. */
  #menu-site ul ul{columns:2;column-gap:10px;max-height:none;overflow:visible}
  #menu-site ul ul a{font-size:14px;padding:5px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- la liste complète des familles, repliée ---------- */
.toutes{text-align:center;margin:14px 0 0}
.toutes a{font-family:"Cormorant Garamond",serif;font-size:16px;letter-spacing:.05em;
  color:var(--carmin);text-decoration:none;border-bottom:1px solid rgba(140,58,48,.3)}
.familles.reste{margin-top:8px}
.familles.reste[hidden]{display:none}
.titre-site a{color:inherit;text-decoration:none}
header{padding-top:52px}
@media (max-width:860px){header{padding-top:46px}}

/* ---------- le mot d'accueil, écrit par JP et Mireille ----------
   C'était le contenu de l'ancienne page d'accueil ; il reprend sa place, posé sur le
   papier, à une largeur de lecture, avec sa photographie détourée en médaillon. */
.mot-accueil{max-width:44em;margin:44px auto 0;padding:0 24px;font-size:17.5px;line-height:1.72}
.mot-accueil p{margin:0 0 15px}
.mot-accueil p.has-medium-font-size:first-of-type{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:27px;line-height:1.3;
  color:var(--vert);margin:0 0 8px;text-align:center}
.mot-accueil p.has-medium-font-size{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:20px;font-style:italic;color:var(--sepia);text-align:center;margin:0 0 26px}
.mot-accueil h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:25px;color:var(--vert);margin:30px 0 10px;letter-spacing:.01em}
.mot-accueil h2 strong{font-weight:400}
.mot-accueil ul{margin:0 0 16px;padding-left:1.1em;list-style:none}
.mot-accueil li{position:relative;margin:0 0 6px;padding-left:.2em}
.mot-accueil li::before{content:"—";position:absolute;left:-1.1em;color:var(--vert-pale)}
.mot-accueil hr{border:0;height:1px;background:var(--fil);margin:32px auto;max-width:60%}
.mot-accueil figure{margin:0 0 18px}
.mot-accueil img{max-width:100%;height:auto;border-radius:48% 52% 46% 54% / 52% 46% 54% 48%;
  box-shadow:0 2px 6px rgba(60,50,30,.16), 0 16px 34px rgba(60,50,30,.16)}
.mot-accueil img.alignleft{float:left;width:min(42%,290px);margin:6px 28px 16px 0}
.mot-accueil figure.wp-block-image{margin:0}
.seuil{margin-top:34px}
@media (max-width:860px){
  .mot-accueil{font-size:16.5px;padding:0 18px;margin-top:30px}
  .mot-accueil p.has-medium-font-size:first-of-type{font-size:23px}
  .mot-accueil img.alignleft{float:none;width:74%;margin:0 auto 18px;display:block}
  .mot-accueil h2{font-size:21px}
}

/* ===========================================================================
   LA FICHE D'ESPÈCE — gabarit single.php, écrit le 22 septembre 2026.
   La page n'emprunte plus rien au thème du parent : ce qui suit la compose
   entièrement, du cartouche d'identité aux espèces voisines.
   =========================================================================== */

.fiche-espece{max-width:1100px;margin:30px auto 0;padding:0 24px}

/* la feuille de papier sur laquelle la fiche est posée : un vrai papier ancien scanné,
   plus clair que le bureau, demandé par JP le 22/09 à la place du fond uni */
/* Le style.css du thème enfant (refonte d'avril, règle 21.8) impose à tout
   article.post / article.page un trait vert de 3 px en tête, en !important et avec
   plus de poids que cette classe seule. On le neutralise à poids supérieur. */
.herbier article.post, .herbier article.page, .herbier .type-post, .herbier .type-page{
  border:0 !important;transition:none !important}
article.feuille-fiche, .herbier article.feuille-fiche{border:1px solid rgba(201,189,162,.55) !important}
.feuille-fiche{background:#f3e9d2 url("papier-feuille.jpg") repeat !important;background-size:1140px auto !important;
  border:1px solid rgba(201,189,162,.55) !important;border-top:1px solid rgba(201,189,162,.55) !important;
  border-radius:3px 16px 3px 16px/16px 3px 16px 3px;
  box-shadow:0 2px 6px rgba(60,50,30,.10), 0 20px 44px rgba(60,50,30,.12);
  padding:40px 48px 44px}

/* le cartouche d'identité, comme l'étiquette collée au coin d'une planche */
.cartouche{max-width:36em;margin:0 auto 26px;text-align:left;
  border-bottom:1px solid rgba(201,189,162,.9);padding-bottom:16px}
.nom-espece{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(28px,4.6vw,44px);line-height:1.04;color:var(--encre);margin:0}
.nom-latin{font-family:"Spectral",Georgia,serif;font-style:italic;font-size:19px;
  color:var(--vert);margin:3px 0 0}
.nom-famille{font-family:"IBM Plex Mono",Menlo,monospace;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--vert-pale);margin:8px 0 0}
.note-lecture{font-family:"IBM Plex Mono",Menlo,monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#a2967c;margin:10px 0 0}

/* le corps : une colonne de lecture, et des planches plus larges qu'elle */
.corps-fiche{max-width:36em;margin:0 auto;font-size:18px;line-height:1.74}
.corps-fiche p{margin:0 0 15px}
.corps-fiche h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:23px;letter-spacing:.14em;text-transform:uppercase;color:var(--sepia);
  border-top:1px solid rgba(201,189,162,.9);padding:26px 0 0;margin:36px 0 12px}
.corps-fiche h2::after{content:none}
.corps-fiche h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:21px;color:var(--vert);margin:22px 0 7px}
.corps-fiche ul, .corps-fiche ol{margin:0 0 15px;padding-left:1.2em}
.corps-fiche li{margin:0 0 5px}
.corps-fiche a{color:var(--carmin);text-decoration:none;
  border-bottom:1px solid rgba(140,58,48,.30)}
.corps-fiche a:hover{border-bottom-color:var(--carmin)}
.corps-fiche hr{border:0;height:1px;background:rgba(201,189,162,.75);
  max-width:38%;margin:30px auto}
.corps-fiche table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:16px}
.corps-fiche th, .corps-fiche td{border-bottom:1px solid rgba(201,189,162,.6);
  padding:7px 10px;text-align:left}
.corps-fiche th{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  color:var(--sepia);font-size:17px}
.corps-fiche blockquote{margin:18px 0;padding:2px 0 2px 18px;
  border-left:2px solid rgba(140,58,48,.45);color:var(--sepia);font-style:italic}

/* la planche : elle déborde de la colonne de texte, sans cadre blanc */
.corps-fiche figure, .corps-fiche .planche-botanique{
  width:min(100%, 46em);margin:28px auto 32px;
  margin-left:calc(50% - min(50%, 23em))}
.corps-fiche figure img, .corps-fiche .planche-botanique img,
.corps-fiche img{max-width:100%;height:auto;border:0;padding:0;background:none;
  border-radius:2px;box-shadow:0 2px 6px rgba(60,50,30,.16), 0 18px 40px rgba(60,50,30,.16)}
.corps-fiche figcaption{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:15px;color:var(--vert-pale);text-align:center;margin-top:9px}

/* les espèces de la même famille, en médaillons comme sur l'accueil */
.voisines{max-width:1080px;margin:44px auto 0;padding:34px 0 0;
  border-top:1px solid var(--fil)}
.voisines .titre-bloc{margin:0 0 24px}

@media (max-width:860px){
  .fiche-espece{padding:0 10px;margin-top:14px}
  .feuille-fiche{padding:24px 20px 28px;
    border-radius:3px 12px 3px 12px/12px 3px 12px 3px}
  .cartouche{max-width:none}
  .corps-fiche{max-width:none;font-size:17px}
  .corps-fiche h2{font-size:19px;margin-top:28px}
  .corps-fiche figure, .corps-fiche .planche-botanique{width:100%;margin-left:0}
}

/* Le thème ajoute son propre badge « Lecture : ~9 min » par un filtre sur le contenu.
   Le cartouche le donne déjà : on retire le doublon. */
.corps-fiche .reading-time-badge{display:none !important}

/* ===========================================================================
   LES LISTES — gabarit archive.php, écrit le 22 septembre 2026.
   Une rubrique se lit comme une planche d'herbier : chaque entrée montre sa
   planche en médaillon, son nom, son nom latin et ses premières lignes.
   =========================================================================== */

.liste-herbier{max-width:1100px;margin:30px auto 0;padding:0 24px}
/* la feuille des listes porte le même papier scanné que celle des fiches */
.feuille-liste{background:#f3e9d2 url("papier-feuille.jpg") repeat !important;background-size:1140px auto !important;
  border:1px solid rgba(201,189,162,.55) !important;
  border-radius:3px 16px 3px 16px/16px 3px 16px 3px;
  box-shadow:0 2px 6px rgba(60,50,30,.10), 0 20px 44px rgba(60,50,30,.12);
  padding:38px 44px 40px}

.entete-liste{border-bottom:1px solid rgba(201,189,162,.9);padding-bottom:14px;margin:0 0 26px}
.titre-liste{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(26px,4.2vw,38px);line-height:1.06;color:var(--encre);margin:0}
.compte-liste{font-family:"IBM Plex Mono",Menlo,monospace;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--vert-pale);margin:7px 0 0}
.mot-liste{max-width:36em;margin:12px 0 0;font-size:17px;line-height:1.66;color:var(--sepia)}

/* chaque entrée : la planche à gauche, le nom et le chapeau à droite */
.entrees{display:flex;flex-direction:column;gap:0}
.entree{display:flex;gap:24px;align-items:flex-start;
  padding:22px 0;border-bottom:1px solid rgba(201,189,162,.6)}
.entree:last-child{border-bottom:0}
.entree .vignette{flex:none;display:block;width:112px;height:112px;overflow:hidden;
  border-radius:52% 48% 46% 54% / 50% 54% 46% 50%;
  background:rgba(255,253,247,.9);padding:7px;
  box-shadow:0 2px 4px rgba(60,50,30,.12), 0 10px 20px rgba(60,50,30,.12);
  transition:transform .4s cubic-bezier(.3,1,.4,1)}
.entree .vignette img{width:100%;height:100%;object-fit:contain;display:block}
.entree:hover .vignette{transform:translateY(-3px)}
.entree .dire{flex:1;min-width:0}
.nom-entree{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:26px;line-height:1.12;margin:0}
.nom-entree a{color:var(--encre);text-decoration:none}
.nom-entree a:hover{color:var(--carmin)}
.latin-entree{font-family:"Spectral",Georgia,serif;font-style:italic;font-size:16px;
  color:var(--vert);margin:2px 0 0}
.chapeau-entree{font-size:16.5px;line-height:1.62;color:var(--encre);margin:9px 0 0;
  max-width:44em}
.date-entree{font-family:"IBM Plex Mono",Menlo,monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#a2967c;margin:8px 0 0}

/* la pagination, en pastilles comme les lettres des répertoires */
.pages-liste{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:30px 0 0}
.pages-liste .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:17px;color:var(--vert);
  text-decoration:none;border:1px solid rgba(201,189,162,.75);
  border-radius:50% 50% 47% 53% / 52% 48% 52% 48%;background:rgba(255,253,246,.72)}
.pages-liste .page-numbers.current{background:var(--vert);color:#f6f2e6;border-color:var(--vert)}
.pages-liste .page-numbers:hover{background:rgba(77,97,70,.14)}

.rien-trouve{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:20px;color:var(--sepia);text-align:center;margin:30px 0 18px}
.chercher-vide{margin:0 auto 10px}

@media (max-width:860px){
  .liste-herbier{padding:0 10px;margin-top:14px}
  .feuille-liste{padding:22px 18px 26px;border-radius:3px 12px 3px 12px/12px 3px 12px 3px}
  .entree{gap:14px;padding:16px 0}
  .entree .vignette{width:78px;height:78px;padding:5px}
  .nom-entree{font-size:21px}
  .latin-entree{font-size:14.5px}
  .chapeau-entree{font-size:15.5px;margin-top:7px}
}

/* ---------------------------------------------------------------------------
   L'OUVERTURE D'UNE FAMILLE — ce qui n'existe sur aucun autre site.
   Une rubrique de famille commence par ce qu'un botaniste regarde en premier :
   la planche des caractères distinctifs et la clé de reconnaissance, avant la
   liste des espèces. C'est l'ordre de la détermination.
   --------------------------------------------------------------------------- */
.cle-famille{display:flex;gap:30px;align-items:flex-start;
  margin:0 0 30px;padding:0 0 26px;border-bottom:1px solid rgba(201,189,162,.9)}
.planche-famille{flex:0 1 46%;margin:0;min-width:0}
.planche-famille img{width:100%;height:auto;display:block;border-radius:2px;
  box-shadow:0 2px 6px rgba(60,50,30,.16), 0 16px 34px rgba(60,50,30,.16);
  cursor:zoom-in}
.planche-famille figcaption{font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;font-size:14.5px;color:var(--vert-pale);text-align:center;margin-top:8px}
.cle-texte{flex:1 1 44%;min-width:0}
.cle-texte h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:21px;letter-spacing:.06em;color:var(--sepia);margin:0 0 12px}
.cle-texte ul{list-style:none;margin:0;padding:0}
.cle-texte li{position:relative;padding-left:1.3em;margin:0 0 9px;
  font-size:16.5px;line-height:1.55;color:var(--encre)}
.cle-texte li::before{content:"—";position:absolute;left:0;color:var(--vert-pale)}
.vers-famille{margin:16px 0 0}
.vers-famille a{font-family:"Cormorant Garamond",Georgia,serif;font-size:16.5px;
  color:var(--carmin);text-decoration:none;border-bottom:1px solid rgba(140,58,48,.3)}

@media (max-width:860px){
  .cle-famille{flex-direction:column;gap:18px}
  .planche-famille{flex:none;width:100%}
  .cle-texte li{font-size:15.5px}
}

/* ---------------------------------------------------------------------------
   LES ONGLETS DE LA FICHE — ce qu'aucun blog ne fait, et dont une monographie
   de quinze mille caractères a besoin : les parties du gabarit posées en marge
   comme les onglets d'un classeur, avec leur chiffre romain. Celui de la section
   qu'on lit s'allume. On saute où l'on veut sans dérouler.
   --------------------------------------------------------------------------- */
/* La fiche est une colonne de lecture flanquée de ses onglets, qui restent sous les
   yeux pendant qu'on descend — c'est tout l'intérêt d'un classeur.
   ⛔ Seuls les onglets et la fiche sont en colonnes : mettre le <main> entier en flex
   faisait des espèces voisines une troisième colonne, et le cartouche se retrouvait
   écrasé sur une lettre de large. */
.fiche-espece{display:block}
.fiche-corps{display:flex;gap:26px;align-items:flex-start;
  max-width:1100px;margin:0 auto}
.fiche-corps .feuille-fiche{flex:1;min-width:0}
.onglets{flex:none;width:168px;position:sticky;top:14px;
  display:flex;flex-direction:column;gap:1px;
  max-height:calc(100vh - 28px);overflow-y:auto;padding:10px 0 10px}
/* 23/09 — JP : les onglets sont « un peu trop effacés » sur le papier, titre compris.
   « Pas plus grand, la taille convient, c'est la netteté » : même taille qu'avant, mais
   encre pleine et graisse 600 au lieu du sépia clair en maigre. */
.onglets-tete{font-family:"IBM Plex Mono",Menlo,monospace;font-size:9.5px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--encre);
  margin:0 0 8px;padding-left:12px}
.onglets a{display:flex;align-items:baseline;gap:7px;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:14.5px;font-weight:600;line-height:1.24;
  color:var(--encre);text-decoration:none;
  padding:6px 10px 6px 12px;border-left:2px solid transparent;
  border-radius:0 12px 12px 0;transition:background .25s, color .25s, border-color .25s}
.onglets a em{font-family:"IBM Plex Mono",Menlo,monospace;font-style:normal;
  font-size:9px;font-weight:400;letter-spacing:.06em;color:var(--vert);flex:none;min-width:1.6em}
.onglets a span{flex:1;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.onglets a:hover{background:rgba(77,97,70,.09);color:var(--carmin)}
.onglets a.ici{border-left-color:var(--carmin);background:rgba(140,58,48,.10);
  color:var(--carmin)}
.onglets a.ici em{color:var(--carmin)}

/* Sous 1180 px il n'y a plus de marge : les onglets deviennent un bandeau.
   ⛔ Pas un bandeau qui s'enroule : avec seize parties, il occupait plus de la moitié
   de l'écran d'un iPhone et restait collé en haut (JP, 22/09 : « inutilisable »).
   Une seule ligne, haute d'environ 44 px, qui défile latéralement ; le script amène
   l'onglet de la partie lue au milieu. */
@media (max-width:1180px){
  .fiche-corps{display:block}
  .onglets{position:sticky;top:0;z-index:6;background:rgba(241,234,217,.96);
    width:auto;flex-direction:row;flex-wrap:nowrap;gap:6px;max-height:none;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 0 20px;padding:7px 8px 9px;
    border-bottom:1px solid rgba(201,189,162,.8)}
  .onglets::-webkit-scrollbar{display:none}
  .onglets-tete{display:none}
  .onglets a{flex:none;white-space:nowrap;border-left:0;border:1px solid rgba(201,189,162,.7);
    border-radius:16px 5px 16px 5px/5px 16px 5px 16px;padding:5px 12px;
    background:rgba(255,253,246,.6);font-size:14px;line-height:1.2}
  .onglets a span{overflow-wrap:normal;hyphens:none;max-width:52vw;overflow:hidden;text-overflow:ellipsis}
  .onglets a.ici{background:var(--vert);color:#f6f2e6;border-color:var(--vert)}
  .onglets a.ici em{color:rgba(246,242,230,.75)}
}
@media (max-width:860px){
  .onglets a{font-size:13.5px;padding:5px 11px}
  .onglets a em{display:none}
}
/* le titre visé ne se colle pas sous le haut de la fenêtre */
.corps-fiche h2[id]{scroll-margin-top:18px}

/* ---------------------------------------------------------------------------
   ⛔ `overflow-x: hidden` sur <html> fait de la page un conteneur de défilement,
   et tout `position: sticky` cesse alors de coller — les onglets de la fiche
   restaient en haut du document au lieu de suivre la lecture. `overflow: clip`
   coupe le débordement horizontal sans créer ce conteneur.
   --------------------------------------------------------------------------- */
html{overflow:visible !important;overflow-x:clip !important}
body.herbier{overflow:visible !important;overflow-x:clip !important}

/* ---------------------------------------------------------------------------
   La feuille « Botanique » n'ouvre que les familles — toutes, et rien d'autre.
   Le menu passe en mode « seul » : les autres entrées s'effacent, la rubrique
   ouverte devient un titre, et un bouton rappelle le menu complet.
   --------------------------------------------------------------------------- */
#menu-site .tout-le-menu{display:none;width:calc(100% - 24px);margin:0 12px 8px;
  font-family:"Cormorant Garamond",serif;font-size:15px;letter-spacing:.04em;
  color:var(--carmin);background:none;border:0;border-bottom:1px solid rgba(201,189,162,.7);
  text-align:left;padding:2px 0 8px;cursor:pointer}
#menu-site.seul .tout-le-menu{display:block}
#menu-site.seul > ul > li:not(.montre){display:none}
#menu-site.seul > ul > li.montre > a{font-size:22px;color:var(--vert);pointer-events:none;
  padding-bottom:2px}
#menu-site.seul > ul > li.montre > a svg.icon{display:none}
/* Sur écran, les quatre-vingt-six familles tiennent d'un seul coup d'œil : le panneau
   s'élargit, la liste se range en six colonnes, et rien ne défile, ni en hauteur ni en
   largeur (demande de JP, 22/09). Le téléphone garde deux colonnes qui défilent. */
#menu-site.seul{min-width:min(96vw,1180px);max-width:96vw;max-height:none;overflow:visible}
#menu-site.seul ul ul{columns:6;column-gap:10px;max-height:none;overflow:visible;margin:4px 10px 4px}
#menu-site.seul ul ul a{font-size:14.5px;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1180px){ #menu-site.seul ul ul{columns:5} }
@media (max-width:980px){ #menu-site.seul ul ul{columns:4} }
@media (max-width:860px){
  #menu-site.seul{min-width:min(94vw,420px);max-height:min(80vh,720px);overflow-y:auto;overflow-x:hidden}
  #menu-site.seul ul ul{columns:2;max-height:none;overflow:visible}   /* JP, 21 h 55 : deux colonnes, c'est possible sans hauteur limitée */
  #menu-site.seul ul ul a{white-space:normal}
}


/* ===========================================================================
   LES PAGES — gabarit page.php, écrit le 22 septembre 2026.
   Familles, phytochimie et ses molécules, glossaire, « Qui sommes nous ? ».
   =========================================================================== */
.page-site .cartouche .nom-famille a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(143,161,131,.5)}
.page-site .cartouche .nom-famille a:hover{color:var(--carmin);border-bottom-color:var(--carmin)}
/* les répertoires et les familles ont besoin de largeur : quatre-vingt-six lettres,
   soixante et une molécules, soixante-quatorze espèces ne tiennent pas dans 36 em */
.page-site.large{max-width:1180px}
.cartouche.large, .corps-page.large{max-width:62em}
.corps-page > div:first-child{margin-top:0}

/* ---- les répertoires par lettre (Phytochimie) : colonnes et pastilles ---- */
.corps-page .family-directory-alphabet, .corps-page .botafamily-alpha-index{
  position:sticky;top:0;z-index:5;background:#f3e9d2 url("papier-feuille.jpg") repeat;background-size:1140px auto;
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;
  padding:10px 6px;margin:0 0 12px;border-bottom:1px solid rgba(201,189,162,.6)}
.corps-page .family-directory-alphabet a, .corps-page .botafamily-alpha-index a.alpha-letter{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;line-height:1;color:var(--vert);
  border:1px solid rgba(201,189,162,.75);border-radius:50% 50% 47% 53%/52% 48% 52% 48%;
  background:rgba(255,253,246,.72);text-decoration:none;transition:background .25s,color .25s,transform .25s}
.corps-page .family-directory-alphabet a:hover, .corps-page .botafamily-alpha-index a.alpha-letter:hover{
  background:var(--vert);color:#f6f2e6;border-color:var(--vert);transform:translateY(-2px)}
.corps-page .botafamily-alpha-index .alpha-spacer{flex:1 0 12px}
.corps-page .botafamily-alpha-index a.alpha-utility{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:15.5px;color:var(--carmin);border:0;text-decoration:none}
.corps-page .family-directory-group h2, .corps-page .botafamily-letter-heading{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:21px !important;
  letter-spacing:.14em;text-transform:none;color:var(--carmin) !important;
  border:0;border-bottom:1px solid rgba(201,189,162,.8);padding:0 0 3px !important;
  margin:22px 0 6px !important;text-align:left}
.corps-page .family-directory-group h2::after, .corps-page .family-directory-group h2::before,
.corps-page .botafamily-letter-heading::after{content:none;display:none}
.corps-page .family-directory-group ul{columns:3;column-gap:26px;list-style:none;margin:6px 0 22px;padding:0}
.corps-page .family-directory-group li{break-inside:avoid;margin:0 0 3px;padding:0}
.corps-page .family-directory-group li a{display:block;padding:2px 0;border:0;
  font-family:"Spectral",Georgia,serif;font-size:16.5px;color:var(--encre)}
.corps-page .family-directory-group li a:hover{color:var(--carmin)}

/* ---- les pages de familles : le HTML enregistré porte ses propres styles en ligne,
   et le style.css du thème enfant (règles 10, 21.15, 21.16) y ajoute en !important une
   bannière en dégradé gris-vert et des cartes blanches. JP, 22/09 : « un fond gris
   pisseux horrible, la planche et le texte décalés à gauche ». On efface la bannière et
   on centre la planche et la description sur la feuille. ---- */
.page-famille .botafamily-hero{background:none !important;border:0 !important;
  padding:0 0 10px !important;border-radius:0 !important;box-shadow:none !important;text-align:left !important}
.page-famille .planche-botanique{margin:6px auto 22px !important;text-align:center !important;max-width:900px}
.page-famille .planche-botanique img{display:block;margin:0 auto !important;max-width:100% !important;height:auto}
.page-famille .botafamily-meta, .page-famille .botafamily-description{margin-left:auto !important;margin-right:auto !important;text-align:left !important}
.page-famille .botafamily-meta{text-align:center !important;max-width:36em}
.page-famille .botafamily-alpha-index a.alpha-utility{background:none !important;color:var(--carmin) !important;
  border:0 !important;height:auto !important;padding:0 6px !important;font-weight:400 !important}
.page-famille .botafamily-alpha-index a.alpha-letter{color:var(--vert) !important;border-color:rgba(201,189,162,.75) !important;
  background:rgba(255,253,246,.72) !important;width:38px !important;height:38px !important;border-radius:50% 50% 47% 53%/52% 48% 52% 48% !important}
.page-famille .botafamily-alpha-index a.alpha-letter:hover{background:var(--vert) !important;color:#f6f2e6 !important;border-color:var(--vert) !important}
.page-famille .botafamily-hero .botafamily-kicker,
.page-famille .botafamily-hero .botafamily-heading{display:none !important}
.page-famille .botafamily-hero{padding-top:0 !important}
.page-famille .botafamily-meta{font-family:"IBM Plex Mono",Menlo,monospace;font-size:10.5px !important;
  letter-spacing:.16em;text-transform:uppercase;color:var(--vert-pale) !important;font-weight:400 !important}
.page-famille .botafamily-description{max-width:36em !important;font-size:17.5px}
.page-famille .botafamily-list{display:grid}
.page-famille .botafamily-card{background:none !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;padding:8px 0 10px !important;
  border-bottom:1px solid rgba(201,189,162,.55) !important}
.page-famille .botafamily-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:20px !important}
.page-famille .botafamily-title a{color:var(--encre) !important;border:0}
.page-family .botafamily-title a:hover, .page-famille .botafamily-title a:hover{color:var(--carmin) !important}
.page-famille .botafamily-scientific{font-family:"Spectral",Georgia,serif;font-style:italic;color:var(--vert) !important;font-size:15.5px !important}
.page-famille .botafamily-open a{font-family:"IBM Plex Mono",Menlo,monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--carmin) !important;border:0}
.page-famille .planche-botanique img{box-shadow:0 2px 6px rgba(60,50,30,.16), 0 18px 40px rgba(60,50,30,.16);border-radius:2px}

/* ---- le glossaire : chaque terme est un <div> avec le mot en gras ---- */
.corps-page > div > strong:first-child{color:var(--sepia);font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:600}
.corps-page > div{margin:0 0 12px}
.corps-page [style*="Roboto"]{font-family:"Spectral",Georgia,serif !important}

@media (max-width:860px){
  .corps-page .family-directory-group ul{columns:2;column-gap:14px}
  .corps-page .family-directory-group li a{font-size:15px}
  .corps-page .family-directory-alphabet a, .corps-page .botafamily-alpha-index a.alpha-letter{min-width:44px;height:44px;font-size:19px}
  .page-famille .botafamily-list{grid-template-columns:1fr !important}
}


/* ---------------------------------------------------------------------------
   Les planches flottantes des fiches (float:left / float:right, 380 px, posées en
   style en ligne dans le contenu) : sur un téléphone, le texte s'enroulait autour et
   « Nom » restait seul en haut à droite pendant que la suite tombait sous la planche
   (JP, arnica, 22/09). Sous 860 px la planche prend toute la largeur et le texte
   reprend dessous. Sur écran large, le flottement reste tel que la fiche le prévoit.
   --------------------------------------------------------------------------- */
@media (max-width:860px){
  .corps-fiche figure, .corps-fiche [style*="float:left"], .corps-fiche [style*="float:right"],
  .corps-fiche [style*="float: left"], .corps-fiche [style*="float: right"]{
    float:none !important;width:auto !important;max-width:100% !important;
    margin:14px auto 18px !important;clear:both}
  .corps-fiche figure img{display:block;margin:0 auto;max-width:100% !important}
}

/* Le style.css du thème enfant impose « EB Garamond » à body p / li / td en !important :
   la fiche reprend sa propre police à poids supérieur. */
.corps-fiche p, .corps-fiche li, .corps-fiche td, .corps-fiche th, .corps-fiche blockquote,
.corps-fiche dd, .corps-fiche dt, .chapeau-entree, .mot-liste p{
  font-family:"Spectral",Georgia,serif !important}


/* Les tableaux des fiches : l'ancien style.css les faisait défiler de côté sur un
   téléphone ; sans lui, douze fiches sur quarante voyaient leur tableau coupé
   (mesuré le 22/09). Sur écran étroit, le tableau défile dans son propre cadre. */
@media (max-width:860px){
  .corps-fiche table{display:block;width:100%;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;font-size:15px}
  .corps-fiche table th, .corps-fiche table td{white-space:normal;min-width:7em}
}
.corps-fiche table{border:0}
.corps-fiche th{background:rgba(77,97,70,.08);color:var(--vert);text-align:left}
.corps-fiche tbody tr:nth-child(even){background:rgba(201,189,162,.10)}


/* ---------------------------------------------------------------------------
   22/09, 22 h 20 — JP : « ce n'est pas fluide, il faut faire le geste, arrêter, puis
   recommencer ». Un panneau qui défile à l'intérieur de la page perd l'élan du doigt
   sur iPhone. Sous 860 px, il n'y a donc PLUS de défilement interne : quand le menu
   s'ouvre, tout le reste de la page est masqué et le menu devient la page, qui
   défile normalement, avec l'élan natif de Safari. Un bouton « Fermer » reste collé
   en haut, le champ de filtre juste dessous.
   --------------------------------------------------------------------------- */
#menu-site .fermer-menu{display:none}
@media (max-width:860px){
  body.menu-ouvert > :not(.carnet-acces){display:none !important}
  body.menu-ouvert .carnet-acces{position:static;padding:0;margin:0}
  body.menu-ouvert #ouvre-menu{display:none}
  #menu-site, #menu-site.seul{position:static;width:auto;min-width:0;max-width:none;
    max-height:none;height:auto;margin:0;border:0;border-radius:0;box-shadow:none;
    overflow:visible;padding:0 0 48px}
  #menu-site .fermer-menu{display:block;position:sticky;top:0;z-index:7;width:100%;
    text-align:right;background:#fbf8ee;border:0;border-bottom:1px solid rgba(201,189,162,.7);
    font-family:"Cormorant Garamond",Georgia,serif;font-size:17px;color:var(--carmin);
    padding:12px 16px;cursor:pointer}
  #menu-site .tout-le-menu{width:calc(100% - 32px);margin:8px 16px 4px}
  #menu-site ul ul{margin:4px 10px 10px}
  #menu-site .mega-filter{top:47px}
}


/* ---------------------------------------------------------------------------
   La fenêtre « Livres » — 23/09/2026. Ouverte par le septième spécimen (le petit livre
   vert), en haut comme en bas. Une feuille de papier posée sur la page assombrie ;
   la couverture, le titre, les auteurs, l'accroche de la quatrième et le lien d'achat.
   --------------------------------------------------------------------------- */
.fenetre{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:20px}
.fenetre[hidden]{display:none}
.fenetre-fond{position:absolute;inset:0;background:rgba(38,30,16,.58)}
.fenetre-corps{position:relative;width:100%;max-width:680px;max-height:92vh;overflow:auto;
  background:#f3e9d2 url("papier-feuille.jpg") repeat;background-size:1140px auto;
  border:1px solid rgba(201,189,162,.7);border-radius:3px 16px 3px 16px/16px 3px 16px 3px;
  box-shadow:0 4px 10px rgba(30,24,12,.25), 0 30px 70px rgba(30,24,12,.45);padding:26px 30px 30px}
.fenetre-fermer{position:absolute;top:12px;right:14px;background:none;border:0;cursor:pointer;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:16px;color:var(--carmin);padding:6px 8px}
.fenetre-corps .titre-bloc{margin:2px 0 18px;text-align:left}
.livre{display:flex;gap:26px;align-items:flex-start}
.livre + .livre{margin-top:26px;padding-top:24px;border-top:1px solid rgba(201,189,162,.8)}
.livre-couverture{flex:none;width:190px;display:block}
.livre-couverture img{width:100%;height:auto;display:block;border-radius:2px;
  box-shadow:0 2px 6px rgba(60,50,30,.2), 0 16px 34px rgba(60,50,30,.28)}
.livre-texte{flex:1;min-width:0}
.livre-collection{font-family:"IBM Plex Mono",Menlo,monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vert-pale);margin:4px 0 6px}
.livre-titre{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:32px;line-height:1.05;
  color:var(--encre);margin:0}
.livre-latin{font-family:"Spectral",Georgia,serif;font-style:italic;color:var(--vert);margin:2px 0 0;font-size:17px}
.livre-auteurs{font-family:"Cormorant Garamond",Georgia,serif;font-size:17px;color:var(--sepia);margin:8px 0 12px}
.livre-accroche{font-family:"Spectral",Georgia,serif;font-style:italic;font-size:16.5px;line-height:1.55;
  color:var(--encre);margin:0 0 18px}
.livre-achat{display:inline-block;background:var(--vert);color:#f6f2e6;text-decoration:none;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:17px;letter-spacing:.06em;
  padding:9px 22px;border-radius:40px/34px;transition:background .25s}
.livre-achat:hover{background:var(--carmin);color:#f6f2e6}
@media (max-width:860px){
  .fenetre{padding:10px}
  .fenetre-corps{padding:22px 18px 24px;max-height:94vh}
  .livre{flex-direction:column;align-items:center;gap:16px}
  .livre-couverture{width:170px}
  .livre-texte{text-align:center}
  .livre-titre{font-size:28px}
}

/* ---------- 28/09 — nous en vidéo : trois tirages posés sur la page ----------
   Trois films de Plantes & Jardins, hébergés sur plantesjardins.fr. Les vignettes sont
   des images de la vidéo elle-même, copiées ici pour ne rien charger chez YouTube. */
.en-video{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;
  justify-content:center;gap:34px 30px}
.film{width:320px;display:flex;flex-direction:column;gap:12px;text-decoration:none;
  color:var(--encre);transform:rotate(var(--r,0));transition:transform .45s cubic-bezier(.3,1,.4,1)}
.film:nth-child(1){--r:-1.2deg} .film:nth-child(2){--r:.8deg} .film:nth-child(3){--r:-.6deg}
.film .tirage{position:relative;display:block;background:#fffdf6;padding:9px 9px 9px;
  box-shadow:0 2px 5px rgba(60,50,30,.16),0 16px 30px rgba(60,50,30,.18),
  inset 0 0 0 1px rgba(201,189,162,.7)}
.film .tirage img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.88) sepia(.08)}
/* le cachet est posé sur le coin du tirage : au centre, il cachait le visage */
.film .lire-film{position:absolute;right:-14px;bottom:-14px;width:60px;height:60px;
  border-radius:50%;background:rgba(140,58,48,.88);box-shadow:0 0 0 5px rgba(255,253,246,.55),
  0 6px 16px rgba(40,30,20,.35);transition:transform .35s cubic-bezier(.3,1,.4,1),background .35s}
.film .lire-film::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;
  border-width:12px 0 12px 19px;border-color:transparent transparent transparent #fffdf6}
.film .duree{position:absolute;right:16px;top:16px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.08em;color:#fffdf6;background:rgba(43,42,32,.72);padding:2px 7px}
.film .titre-film{font-family:"Cormorant Garamond",serif;font-size:22px;line-height:1.2;
  color:var(--vert);text-wrap:balance}
.film .accroche{font-size:15.5px;line-height:1.55;margin-top:-4px}
.film .voir{font-family:"Cormorant Garamond",serif;font-size:17px;letter-spacing:.05em;
  color:var(--carmin);align-self:flex-start;border-bottom:1px solid rgba(140,58,48,.35);padding-bottom:2px}
.film:hover,.film:focus-visible{transform:rotate(0) translateY(-5px)}
.film:hover .lire-film,.film:focus-visible .lire-film{transform:scale(1.1);background:var(--carmin)}
.film:hover .voir{border-bottom-color:var(--carmin)}
.film:focus-visible{outline:2px solid var(--carmin);outline-offset:6px}
.en-video-source{text-align:center;font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:15px;color:var(--sepia);margin:22px auto 0;padding:0 24px}
@media (max-width:860px){
  .en-video{gap:30px}
  .film{width:min(100%,380px)}
}
@media (prefers-reduced-motion:reduce){
  .film,.film .lire-film{transition:none}
}

/* 28/09 — la vidéo se lit sur place, dans la fenêtre du site (même cadre que « Nos livres ») :
   JP ne voulait pas que le visiteur passe par la page de présentation. */
.fenetre-video .fenetre-corps{max-width:980px;overflow:visible;padding:48px 22px 22px}
.fenetre-video .fenetre-fermer{top:10px}
.fenetre-video .titre-film-lu{font-family:"Cormorant Garamond",serif;font-size:21px;color:var(--vert);
  margin:0 0 12px;padding-right:90px;position:absolute;top:12px;left:24px;right:24px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fenetre-video .lecteur{position:relative;width:100%;aspect-ratio:16/9;background:#1d1a12}
.fenetre-video .lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:860px){
  .fenetre-video .fenetre-corps{padding:46px 8px 8px}
  .fenetre-video .titre-film-lu{font-size:17px;left:12px}
}

/* 28/09 — sur le papier ocre du filigrane, le vert pâle des petites lignes ne se lisait plus */
.sous-bloc{color:var(--vert)}
.specimens .latin{color:var(--vert)}

/* 29/09 — la source des vidéos, sous les cartes et dans la fenêtre du lecteur. */
.en-video-source{line-height:1.6;max-width:760px}
.en-video-source a,.source-film-lu a{color:var(--vert);text-decoration:underline;text-underline-offset:2px}
.fenetre-video .source-film-lu{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px;
  color:var(--sepia);margin:10px 0 0;text-align:center}

/* 30/09 — un huitième bouton, « Nous rencontrer » (chicorée sauvage) : sur ordinateur, la
   rangée doit tenir sur une seule ligne, en haut comme en bas ; la chicorée ne doit pas
   partir seule à la ligne. Le téléphone (sous 861 px) garde ses rangées de trois. */
@media (min-width:861px){
  .rubriques.specimens{max-width:1240px}
  .herbier-bas{max-width:1300px}
  .herbier-bas .specimens{gap:14px 18px}
}
@media (min-width:861px) and (max-width:1300px){
  .rubriques.specimens{gap:8px 10px}
  .rubriques.specimens a{width:clamp(92px,calc((100vw - 150px) / 8),118px)}
  .herbier-bas .specimens a{width:clamp(96px,calc((100vw - 200px) / 8),132px)}
  .specimens .nom,.rubriques.specimens .nom{font-size:14px}
}