/* =================================================================
   GRIMORIUM - Univers HERBIER
   « Planche d'herboriste à l'ancienne »
   Skin spécifique à la rubrique Herbier. Conserve l'ADN de marque
   (logo, duo Garamond, filets à losange, petites capitales dorées,
   structure des pages) - mais bascule du nocturne au papier vergé.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&display=swap');

:root{
  /* - papier & encres - */
  --paper:#eee3c8;          /* vergé clair */
  --paper-2:#e7dab9;        /* vergé ombré (panneaux) */
  --paper-3:#ddcca4;        /* vergé profond */
  --paper-edge:#d8c9a3;
  --ink:#33291a;            /* encre sépia (texte) */
  --ink-soft:#5e503a;       /* encre délavée */
  --ink-faint:#897553;      /* légende, mention */
  --rubric:#8a3522;         /* rouge de rubrication / sang de bœuf */
  --rubric-deep:#6e2a1c;
  /* - végétal - */
  --leaf:#46552f;           /* vert feuille profond */
  --leaf-2:#5f713c;         /* vert herbe */
  --leaf-soft:#7d8a56;
  --bind:#2f3a26;           /* vert reliure (bandeau / pied) */
  --bind-2:#3a4730;
  /* - or de marque (point commun, patiné) - */
  --gold-1:#a98233;
  --gold-2:#8a6a2c;
  --gold-soft:#cda94f;
  /* - filets - */
  --line:rgba(51,41,26,0.30);
  --line-soft:rgba(51,41,26,0.16);
  --line-strong:rgba(51,41,26,0.55);
  --line-gold:rgba(138,106,44,0.5);
  /* - typo - */
  --display:"IM Fell English", "Cormorant Garamond", Georgia, serif;
  --serif:"Cormorant Garamond", Georgia, serif;
  --text:"EB Garamond", Georgia, serif;
  --sc:"IM Fell English SC", "EB Garamond", serif;
  --maxw:1180px;
  --maxw-wide:1320px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--text);
  font-size:20px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-color:var(--paper);
  background-image:
    /* foxing / taches discrètes */
    radial-gradient(120px 90px at 12% 22%, rgba(138,53,34,0.05), transparent 70%),
    radial-gradient(160px 120px at 88% 68%, rgba(70,85,47,0.06), transparent 70%),
    radial-gradient(90px 80px at 70% 12%, rgba(120,90,40,0.05), transparent 70%),
    /* vignette douce du bord de page */
    radial-gradient(150% 120% at 50% 0%, transparent 60%, rgba(90,70,40,0.10) 100%);
}
img{max-width:100%; display:block;}

/* grain de papier */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:0.06; mix-blend-mode:multiply;
}
.page{position:relative; z-index:1;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 36px;}
.container-wide{max-width:var(--maxw-wide); margin:0 auto; padding:0 36px;}

/* ---------- typographie ---------- */
h1,h2,h3,h4,h5{font-family:var(--display); font-weight:400; margin:0; line-height:1.06; color:var(--ink);}
p{margin:0 0 1.15em;}
a{color:inherit; text-decoration:none;}
em,i{font-style:italic;}
sup{font-size:0.62em;}

.eyebrow{font-family:var(--sc); text-transform:uppercase; letter-spacing:0.30em; font-size:14px; color:var(--rubric);}
.kicker{font-family:var(--sc); font-size:14px; text-transform:uppercase; letter-spacing:0.24em; color:var(--leaf);}
.lede{font-size:24px; line-height:1.55; color:var(--ink); font-family:var(--serif);}
.muted{color:var(--ink-soft);}
.faint{color:var(--ink-faint);}
.italic{font-style:italic;}
.center{text-align:center;}
.latin{font-style:italic; font-family:var(--serif); color:var(--ink-soft);}

/* filet à losange (point commun de marque, ré-encré) */
.rule{display:flex; align-items:center; gap:20px; color:var(--gold-2);}
.rule::before,.rule::after{content:""; height:1px; flex:1;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);}
.rule .dot{width:7px; height:7px; transform:rotate(45deg); background:var(--rubric); flex:0 0 auto;}
/* fleuron central possible */
.rule .floret{flex:0 0 auto; color:var(--rubric); width:26px; height:26px;}

/* ---------- sections ---------- */
section{position:relative; padding:88px 0;}
.section-head{max-width:760px; margin:0 0 14px;}
.section-head.center{text-align:center; margin-left:auto; margin-right:auto;}
.section-head h2{font-size:clamp(34px,4.4vw,54px); margin-top:14px; letter-spacing:0.01em;}
.section-head p{margin-top:14px; color:var(--ink-soft); font-size:21px;}

/* bandeau « page de droite » légèrement plus chaud, pour rythmer */
.band-warm{background:
  radial-gradient(120% 90% at 50% 0%, rgba(255,250,235,0.5), transparent 55%),
  var(--paper-2);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}

/* ---------- en-tête de site (reliure verte = point commun marque) ---------- */
.site-header{position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,var(--bind),var(--bind-2));
  border-bottom:2px solid var(--gold-2);
  box-shadow:0 2px 0 rgba(138,106,44,0.25), 0 10px 24px rgba(30,24,12,0.18);}
.site-header .inner{display:flex; align-items:center; justify-content:space-between;
  padding:14px 36px; max-width:var(--maxw-wide); margin:0 auto;}
.brand{display:flex; align-items:center; gap:13px;}
.brand .mark{width:30px; height:30px; color:var(--gold-soft); flex:0 0 auto;}
.brand .word{font-family:var(--display); font-size:26px; letter-spacing:0.18em; color:#f3ead0; line-height:1;}
.brand .word small{display:block; font-family:var(--sc); font-size:10px; letter-spacing:0.34em;
  color:#b9c2a0; margin-top:2px; text-transform:uppercase;}
.main-nav{display:flex; gap:30px; font-family:var(--sc); font-size:14px;
  text-transform:uppercase; letter-spacing:0.16em; color:#cdd3b6;}
.main-nav a{transition:color .2s; position:relative;}
.main-nav a:hover{color:var(--gold-soft);}
.main-nav a.active{color:var(--gold-soft);}
.header-tools{display:flex; align-items:center; gap:16px;}
.icon-btn{width:36px; height:36px; border:1px solid rgba(201,169,79,0.5);
  display:flex; align-items:center; justify-content:center; color:var(--gold-soft); transition:.2s;}
.icon-btn:hover{background:rgba(201,169,79,0.14);}
@media(max-width:920px){ .main-nav{display:none;} }

/* ---------- fil d'ariane ---------- */
.crumb{display:flex; gap:12px; align-items:center; font-family:var(--sc);
  font-size:14px; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-faint);}
.crumb a{transition:color .2s;}
.crumb a:hover{color:var(--rubric);}
.crumb .sep{color:var(--gold-2);}
.crumb .here{color:var(--leaf);}

/* ---------- boutons (façon tampon gravé) ---------- */
.btn{display:inline-flex; align-items:center; gap:12px; padding:15px 30px;
  border:1px solid var(--line-strong); color:var(--ink); background:transparent;
  font-family:var(--sc); text-transform:uppercase; letter-spacing:0.18em; font-size:14px;
  cursor:pointer; transition:.22s; white-space:nowrap;}
.btn:hover{background:rgba(51,41,26,0.06); border-color:var(--ink);}
.btn-solid{background:var(--leaf); color:#f3ead0; border-color:var(--leaf);}
.btn-solid:hover{background:var(--bind); color:#f3ead0;}
.btn-rubric{background:var(--rubric); color:#f3ead0; border-color:var(--rubric);}
.btn-rubric:hover{background:var(--rubric-deep);}
.link-more{display:inline-flex; align-items:center; gap:10px; color:var(--rubric);
  font-family:var(--sc); text-transform:uppercase; letter-spacing:0.16em; font-size:14px;}
.link-more:hover{color:var(--rubric-deep);}

/* ---------- étiquettes / méta (estampillées) ---------- */
.tag{display:inline-block; border:1px solid var(--line-strong); padding:6px 14px;
  font-family:var(--sc); font-size:13px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--ink-soft); white-space:nowrap; background:rgba(255,250,235,0.3);}
.tag.leaf{border-color:var(--leaf); color:var(--leaf);}
.tag.rubric{border-color:var(--rubric); color:var(--rubric);}
.taglist{display:flex; flex-wrap:wrap; gap:9px;}

/* ---------- planche botanique (cadre gravé autour des images) ---------- */
.plate{position:relative; background:var(--paper); padding:14px;
  border:1px solid var(--line-strong);
  box-shadow:0 1px 0 rgba(255,250,235,0.6) inset, 0 14px 30px rgba(60,45,20,0.16);}
.plate::after{content:""; position:absolute; inset:7px; border:1px solid var(--line-soft); pointer-events:none;}
.plate .img-wrap{position:relative; overflow:hidden; background:var(--paper-3);}
.plate img, .plate image-slot{display:block; width:100%; height:100%;}
/* léger virage ancien sur les photos */
.plate.aged img{filter:sepia(0.22) saturate(0.92) contrast(1.02) brightness(1.02);}
.plate .plate-no{position:absolute; top:20px; left:20px; z-index:2;
  font-family:var(--sc); font-size:13px; letter-spacing:0.12em; color:var(--ink-faint);
  text-transform:uppercase;}
.plate .cap{margin-top:11px; text-align:center; font-style:italic; font-family:var(--serif);
  font-size:16px; color:var(--ink-faint);}
.plate .cap b{font-style:normal; font-family:var(--sc); letter-spacing:0.06em; color:var(--ink-soft);}

/* ---------- carte encadrée générique ---------- */
.card{border:1px solid var(--line-strong); background:rgba(255,250,235,0.32);
  padding:30px 32px; position:relative; transition:.25s;}
.card .frame{position:absolute; inset:8px; border:1px solid var(--line-soft); pointer-events:none;}
.card:hover{background:rgba(255,250,235,0.55); border-color:var(--ink-soft);}
.card .gly{width:30px; height:30px; color:var(--rubric); margin-bottom:14px;}
.card h3,.card h4{font-size:27px; margin-bottom:8px;}
.card p{margin:0; color:var(--ink-soft); font-size:17px;}

/* ---------- carte plante (grille de l'herbier) ---------- */
.plant-card{display:block; transition:.25s; background:var(--paper);
  border:1px solid var(--line-strong);
  box-shadow:0 10px 22px rgba(60,45,20,0.10);}
.plant-card:hover{transform:translateY(-4px); border-color:var(--leaf);
  box-shadow:0 16px 30px rgba(60,45,20,0.18);}
.plant-card .ph{aspect-ratio:4/3; margin:12px 12px 0; overflow:hidden;
  border:1px solid var(--line-soft); background:var(--paper-3); position:relative;}
.plant-card .ph img, .plant-card .ph image-slot{width:100%; height:100%; object-fit:cover;
  filter:sepia(0.20) saturate(0.95) contrast(1.02);}
.plant-card .ph .pno{position:absolute; top:8px; left:9px; font-family:var(--sc);
  font-size:11px; letter-spacing:0.1em; color:var(--ink-faint); text-transform:uppercase;
  background:rgba(238,227,200,0.85); padding:1px 6px;}
.plant-card .body{padding:16px 18px 20px;}
.plant-card h3,.plant-card h4{font-size:25px; margin-bottom:2px;}
.plant-card .sub{font-style:italic; font-family:var(--serif); color:var(--ink-soft); font-size:16px;}
.plant-card .props{display:flex; gap:8px; margin-top:13px; flex-wrap:wrap;}

/* ---------- fiche : table de données (façon table d'imprimé) ---------- */
.datasheet{border:1px solid var(--line-strong); background:rgba(255,250,235,0.32);}
.datasheet .row{display:grid; grid-template-columns:0.9fr 1.3fr; border-bottom:1px solid var(--line-soft);}
.datasheet .row:last-child{border-bottom:none;}
.datasheet .k{padding:15px 20px; font-family:var(--sc); font-size:13px; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--rubric); border-right:1px solid var(--line-soft);
  background:rgba(51,41,26,0.03);}
.datasheet .v{padding:15px 20px; color:var(--ink); font-size:18px;}

/* encadré « pierres affines » / aside */
.aside-box{border:1px solid var(--line-strong); background:rgba(70,85,47,0.07);
  padding:24px 26px; margin-top:24px;}
.aside-box .kicker{margin-bottom:14px;}
.aside-box a{display:flex; align-items:center; gap:8px; padding:7px 0; color:var(--rubric);
  font-family:var(--sc); text-transform:uppercase; letter-spacing:0.1em; font-size:14px;}
.aside-box a:hover{color:var(--rubric-deep);}

/* ---------- prose / corps d'article ---------- */
.prose{font-size:20px; line-height:1.78; color:var(--ink); max-width:720px;}
.prose p{margin:0 0 1.3em;}
.prose .drop::first-letter{float:left; font-family:var(--display); font-size:92px; line-height:0.66;
  padding:12px 14px 0 0; color:var(--rubric); font-weight:400;}
.prose strong{font-weight:600; color:var(--ink);}
.prose a.inline{color:var(--rubric); border-bottom:1px solid var(--line-gold);}

/* encadré précautions (rubrication rouge) */
.callout{border:1px solid var(--rubric); background:rgba(138,53,34,0.06);
  padding:24px 28px; margin:0; position:relative;}
.callout .kicker{color:var(--rubric); margin-bottom:8px;}
.callout p{margin:0; font-size:18px; color:var(--ink);}

/* ---------- pied de page (reliure verte, symétrie de l'en-tête) ---------- */
.site-footer{background:linear-gradient(180deg,var(--bind-2),var(--bind));
  border-top:2px solid var(--gold-2); padding:64px 0 44px; color:#cdd3b6;}
.site-footer .col-h{font-family:var(--sc); font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.18em; color:var(--gold-soft); margin:0 0 16px;}
.site-footer .word{font-family:var(--display); font-size:28px; letter-spacing:0.18em; color:#f3ead0;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;}
.site-footer .col a{display:block; color:#cdd3b6; padding:5px 0; font-size:16px; transition:color .2s;}
.site-footer .col a:hover{color:var(--gold-soft);}
.site-footer .tagline{color:#b9c2a0; margin-top:16px; max-width:300px; font-size:16px; font-style:italic;}
.footer-base{border-top:1px solid rgba(201,169,79,0.3); margin-top:46px; padding-top:24px;
  display:flex; justify-content:space-between; color:#a7b08c; font-size:13px;
  font-family:var(--sc); letter-spacing:0.08em; text-transform:uppercase;}
.footer-base .disc{max-width:560px; text-transform:none; font-family:var(--text); letter-spacing:0; font-size:14px;}
@media(max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} .footer-base{flex-direction:column; gap:14px;} }

/* ---------- grilles utilitaires ---------- */
.grid{display:grid; gap:26px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .g2,.g3,.g4{grid-template-columns:1fr;} }

@media(prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} html{scroll-behavior:auto;} }

/* =================================================================
   GABARITS DE PAGE (consolidés depuis les maquettes de handoff)
   ================================================================= */

/* ----- gabarit pilier (/herbier/ + facettes) ----- */
.pilier-hero{padding:60px 0 40px; text-align:center; position:relative; overflow:hidden;}
.pilier-hero .eyebrow{display:block; margin-bottom:22px;}
.pilier-hero h1{font-size:clamp(54px,8vw,104px); line-height:0.96; margin:0 auto 26px; max-width:13ch;}
.pilier-hero .sub{font-family:var(--serif); font-size:23px; line-height:1.5; color:var(--ink-soft);
  max-width:48ch; margin:0 auto 34px;}
.hero-orn{width:70px; height:70px; color:var(--rubric); margin:0 auto 18px; opacity:0.9;}

.intro-text{max-width:720px; margin:0 auto; padding:54px 0 0;}
.intro-text .prose{margin:0 auto;}

.portes{padding:84px 0;}
.portes .grid{margin-top:44px;}
.porte{display:flex; flex-direction:column;}
.porte .gly{width:34px; height:34px; color:var(--leaf); margin-bottom:18px;}
.porte h3{font-size:30px; margin-bottom:10px;}
.porte p{color:var(--ink-soft); font-size:17px; flex:1; margin-bottom:18px;}

.cloud{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; list-style:none; padding:0; margin:0;}

.toutes{padding:30px 0 96px;}
.toutes .section-head{margin-bottom:36px;}

/* ----- gabarit fiche plante (/herbier/{slug}/) ----- */
.fiche-hero{padding:46px 0 70px;}
.hero-grid{display:grid; grid-template-columns:0.92fr 1.08fr; gap:56px; align-items:center;}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:36px;} }
.hero-text .eyebrow{display:block; margin-bottom:18px;}
.hero-text h1{font-size:clamp(60px,8vw,108px); line-height:0.92; margin-bottom:14px;}
.hero-text .latin{font-size:23px; display:block; margin-bottom:22px;}
.hero-text .intro{font-family:var(--serif); font-size:23px; line-height:1.5; color:var(--ink); max-width:34ch; margin-bottom:26px;}
.hero-text .taglist{margin-top:6px;}

.fiche-body{padding:64px 0 90px;}
.layout{display:grid; grid-template-columns:1fr 360px; gap:64px; align-items:start;}
@media(max-width:960px){ .layout{grid-template-columns:1fr; gap:48px;} }
.aside{position:sticky; top:96px;}
.block{margin-bottom:64px;}
.block:last-child{margin-bottom:0;}
.block .kicker{display:block; margin-bottom:6px;}
.block h2{font-size:clamp(32px,3.6vw,46px); margin-bottom:24px;}
.block .rule{margin:0 0 30px;}
.block p{color:var(--ink); max-width:62ch;}
.vertus{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media(max-width:620px){ .vertus{grid-template-columns:1fr;} }
.assoc{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px;}

/* liens fléchés aside (pierres affines / plantes associées) */
.aside-box a .arr{margin-left:auto;}