/*
Theme Name: Plantes & Bien-être
Theme URI: https://plantes-bienetre.com
Author: BOATENG
Description: Thème sur mesure pour plantes-bienetre.com. Parti pris « herbier » : chaque plante est une planche de spécimen, encre violette, étiquettes monospace.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: plantes-bienetre
*/

/* ------------------------------------------------------------------
   1. Jetons
------------------------------------------------------------------ */
:root{
  --encre:#241E33;
  --encre-2:#5A5270;
  --encre-3:#8A83A0;
  --mauve:#5C3D80;
  --mauve-clair:#8B6DB0;
  --mauve-voile:#EDE7F4;
  --papier:#F8F7FA;
  --papier-2:#EFECF4;
  --blanc:#FFFFFF;
  --trait:#DCD6E6;
  --trait-fort:#B7ADC9;
  --chloro:#2F6B48;
  --chloro-voile:#E6F0EA;
  --prudence:#A6491C;
  --prudence-voile:#FAEDE6;

  --display:'Young Serif',Georgia,'Times New Roman',serif;
  --corps:'Spectral',Georgia,'Times New Roman',serif;
  --label:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --page:1180px;
  --gouttiere:clamp(1.1rem,4vw,2.5rem);
  --rythme:clamp(3.5rem,7vw,6rem);
}

/* ------------------------------------------------------------------
   2. Base
------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--corps);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:var(--mauve);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;text-decoration-color:var(--trait-fort);}
a:hover{text-decoration-color:var(--mauve);}
:focus-visible{outline:2px solid var(--mauve);outline-offset:3px;}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.14;margin:0;text-wrap:normal;letter-spacing:-.005em;}
h1{font-size:clamp(2.3rem,5.4vw,3.7rem);}
h2{font-size:clamp(1.7rem,3.2vw,2.35rem);line-height:1.18;}
h3{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.25;}
h4{font-size:1.1rem;font-family:var(--corps);font-weight:600;}
p{margin:0 0 1.15em;max-width:none;}
ul,ol{margin:0 0 1.3em;padding-left:1.25em;}
li{margin-bottom:.45em;}
blockquote{margin:2rem 0;padding:0 0 0 1.4rem;border-left:3px solid var(--mauve);font-style:italic;color:var(--encre-2);}
hr{border:0;border-top:1px solid var(--trait);margin:2.5rem 0;}
table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.95rem;}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--trait);vertical-align:top;}
th{font-family:var(--label);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--encre-2);background:var(--papier-2);}
code{font-family:var(--label);font-size:.88em;background:var(--papier-2);padding:.1em .35em;border-radius:2px;}

.enveloppe{max-width:var(--page);margin-inline:auto;padding-inline:var(--gouttiere);}
.saut-contenu{position:absolute;left:-9999px;}
.saut-contenu:focus{left:1rem;top:1rem;z-index:99;background:var(--encre);color:var(--blanc);padding:.7rem 1.1rem;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ------------------------------------------------------------------
   3. Étiquette de spécimen (élément signature)
------------------------------------------------------------------ */
.etiquette{
  font-family:var(--label);
  font-size:.7rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:var(--encre-2);
  line-height:1.5;
}
.etiquette-lignes{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;}
.etiquette-lignes li{display:flex;gap:.7rem;margin:0;border-bottom:1px dotted var(--trait);padding-bottom:.3rem;}
.etiquette-lignes b{flex:0 0 7.4rem;font-weight:500;color:var(--encre-3);}
.etiquette-lignes span{font-weight:600;color:var(--encre);font-style:normal;}
.etiquette-lignes .latin{font-style:italic;text-transform:none;letter-spacing:.04em;}
.cote{
  font-family:var(--label);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mauve);
}

/* ------------------------------------------------------------------
   4. En-tête
------------------------------------------------------------------ */
.entete{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--papier) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--trait);
}
.entete-rang{display:flex;align-items:center;gap:1.5rem;height:66px;}
.marque{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:var(--encre);flex:0 0 auto;}
.marque-nom{font-family:var(--display);font-size:1.32rem;line-height:1;letter-spacing:-.01em;}
.marque-cote{font-family:var(--label);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mauve);}
.nav-site{margin-left:auto;}
.nav-site ul{list-style:none;display:flex;gap:1.6rem;margin:0;padding:0;}
.nav-site li{margin:0;}
.nav-site a{
  font-family:var(--label);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  color:var(--encre-2);text-decoration:none;padding-block:.4rem;border-bottom:1px solid transparent;
}
.nav-site a:hover,.nav-site .current-menu-item>a{color:var(--mauve);border-bottom-color:var(--mauve);}
.bouton-menu{display:none;background:none;border:1px solid var(--trait);border-radius:2px;padding:.45rem .7rem;font-family:var(--label);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre);cursor:pointer;margin-left:auto;}

/* ------------------------------------------------------------------
   5. Planche (hero)
------------------------------------------------------------------ */
.planche{padding-block:clamp(2.5rem,5vw,4.5rem) var(--rythme);}
.planche-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.planche-dit .sur-titre{
  font-family:var(--label);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mauve);margin:0 0 1.2rem;display:flex;align-items:center;gap:.7rem;
}
.planche-dit .sur-titre::after{content:"";flex:1;height:1px;background:var(--trait);}
.planche-dit h1{margin-bottom:1.1rem;}
.planche-dit h1 em{font-style:normal;color:var(--mauve);}
.planche-dit .chapo{font-size:1.12rem;color:var(--encre-2);margin-bottom:1.8rem;}
.planche-actions{display:flex;flex-wrap:wrap;gap:.8rem;}

.bouton{
  display:inline-block;font-family:var(--label);font-size:.73rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;padding:.85rem 1.5rem;border-radius:2px;transition:.18s ease;
}
.bouton-plein{background:var(--mauve);color:var(--blanc);border:1px solid var(--mauve);}
.bouton-plein:hover{background:var(--encre);border-color:var(--encre);color:var(--blanc);}
.bouton-vide{background:transparent;color:var(--encre);border:1px solid var(--trait-fort);}
.bouton-vide:hover{border-color:var(--mauve);color:var(--mauve);}

/* Cadre de spécimen */
.specimen{
  background:var(--blanc);
  border:1px solid var(--trait-fort);
  padding:.75rem;
  box-shadow:0 1px 0 var(--trait),0 18px 40px -28px rgba(36,30,51,.4);
}
.specimen-interieur{border:1px solid var(--trait);padding:1.1rem;}
.specimen figure{margin:0;}
.specimen img{width:100%;aspect-ratio:4/3.2;object-fit:cover;}
.specimen-pied{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--trait);}
.specimen-vernaculaire{font-family:var(--display);font-size:1.35rem;line-height:1.1;}
.specimen-latin{font-family:var(--corps);font-style:italic;color:var(--encre-2);font-size:.95rem;}

/* ------------------------------------------------------------------
   6. Sections
------------------------------------------------------------------ */
.section{padding-block:var(--rythme);border-top:1px solid var(--trait);}
.section-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2.6rem;flex-wrap:wrap;}
.section-tete h2{margin:0;}
.section-tete .cote{margin-bottom:.45rem;display:block;}
.lien-suite{font-family:var(--label);font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;color:var(--mauve);white-space:nowrap;}
.lien-suite:hover{text-decoration:underline;}

/* Grille de l'herbier */
.grille-herbier{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:clamp(1.2rem,2.5vw,2rem);}
.fiche{
  background:var(--blanc);border:1px solid var(--trait);display:flex;flex-direction:column;
  transition:border-color .18s ease,transform .18s ease;
}
.fiche:hover{border-color:var(--trait-fort);transform:translateY(-2px);}
.fiche-visuel{position:relative;overflow:hidden;}
.fiche-visuel img{width:100%;aspect-ratio:5/3.6;object-fit:cover;}
.fiche-vide{background:var(--mauve-voile);aspect-ratio:5/3.6;display:grid;place-items:center;}
.fiche-vide span{font-family:var(--display);font-size:2.2rem;color:var(--mauve-clair);}
.fiche-corps{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;flex:1;}
.fiche-rubrique{font-family:var(--label);font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mauve);}
.fiche h3{font-size:1.18rem;}
.fiche h3 a{color:inherit;text-decoration:none;}
.fiche h3 a:hover{color:var(--mauve);}
.fiche-latin{font-style:italic;color:var(--encre-2);font-size:.9rem;margin:0;}
.fiche-extrait{font-size:.94rem;color:var(--encre-2);margin:0;}
.fiche-meta{margin-top:auto;padding-top:.8rem;border-top:1px dotted var(--trait);font-family:var(--label);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);display:flex;gap:.8rem;}

/* Liste d'articles */
.liste-articles{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait);}
.liste-articles li{margin:0;}
.ligne-article{display:grid;grid-template-columns:8.5rem 1fr auto;gap:1.6rem;align-items:baseline;padding:1.35rem 0;border-bottom:1px solid var(--trait);text-decoration:none;color:inherit;transition:.15s ease;}
.ligne-article:hover{background:var(--mauve-voile);box-shadow:0 0 0 var(--gouttiere) var(--mauve-voile);}
.ligne-date{font-family:var(--label);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-3);}
.ligne-titre{font-family:var(--display);font-size:1.22rem;line-height:1.25;}
.ligne-rubrique{font-family:var(--label);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mauve);white-space:nowrap;}

/* ------------------------------------------------------------------
   7. Article
------------------------------------------------------------------ */
.article-tete{padding-block:clamp(2.2rem,4vw,3.4rem) 0;}
.fil{font-family:var(--label);font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3);margin-bottom:1.4rem;}
.fil a{color:var(--encre-2);text-decoration:none;}
.fil a:hover{color:var(--mauve);}
.article-tete h1{margin-bottom:1rem;max-width:none;}
.article-chapo{font-size:1.16rem;color:var(--encre-2);max-width:none;margin-bottom:1.6rem;}
.signature{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.1rem;font-family:var(--label);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);padding-block:1rem;border-block:1px solid var(--trait);}
.signature strong{color:var(--encre);font-weight:600;}
.article-vedette{margin:2.2rem 0 0;}
.article-vedette img{width:100%;}
.article-vedette figcaption{font-family:var(--label);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-3);margin-top:.6rem;}

.contenu{padding-block:2.4rem var(--rythme);}
.contenu>*{max-width:none;}
.contenu h2{margin:2.8rem 0 1rem;padding-top:1.4rem;border-top:1px solid var(--trait);}
.contenu h3{margin:2rem 0 .7rem;}
.contenu figure{margin:2.2rem 0;}
.contenu figcaption{font-family:var(--label);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-3);margin-top:.6rem;}
.contenu>ul li::marker,.contenu>ol li::marker{color:var(--mauve-clair);}

/* Encadrés */
.encart{margin:2.2rem 0;padding:1.4rem 1.6rem;border:1px solid var(--trait);background:var(--blanc);}
.encart-titre{font-family:var(--label);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .8rem;display:flex;align-items:center;gap:.6rem;}
.encart p:last-child,.encart ul:last-child{margin-bottom:0;}
.encart--essentiel{background:var(--mauve-voile);border-color:var(--mauve-clair);}
.encart--essentiel .encart-titre{color:var(--mauve);}
.encart--prudence{background:var(--prudence-voile);border-color:var(--prudence);border-left-width:4px;}
.encart--prudence .encart-titre{color:var(--prudence);}
.encart--usage{background:var(--chloro-voile);border-color:var(--chloro);border-left-width:4px;}
.encart--usage .encart-titre{color:var(--chloro);}

/* Fiche d'identité de la plante */
.identite{margin:2.4rem 0;border:1px solid var(--trait-fort);background:var(--blanc);padding:.6rem;}
.identite-interieur{border:1px solid var(--trait);padding:1.3rem 1.5rem;}
.identite h2{margin:0 0 1rem;padding:0;border:0;font-size:1.3rem;}

/* Sommaire */
.sommaire{margin:2.4rem 0;padding:1.3rem 1.5rem;background:var(--papier-2);border:1px solid var(--trait);}
.sommaire .encart-titre{color:var(--encre-2);}
.sommaire ol{list-style:none;padding:0;margin:0;counter-reset:som;}
.sommaire li{counter-increment:som;margin-bottom:.4rem;font-size:.96rem;}
.sommaire li::before{content:counter(som,decimal-leading-zero);font-family:var(--label);font-size:.68rem;color:var(--mauve);margin-right:.7rem;letter-spacing:.08em;}
.sommaire a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--trait);}
.sommaire a:hover{color:var(--mauve);border-bottom-color:var(--mauve);}

/* FAQ */
.faq{margin:2.8rem 0;}
.faq details{border-bottom:1px solid var(--trait);}
.faq details:first-of-type{border-top:1px solid var(--trait);}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;position:relative;font-family:var(--display);font-size:1.08rem;line-height:1.3;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);font-family:var(--label);color:var(--mauve);font-size:1.15rem;}
.faq details[open] summary::after{content:"\2013";}
.faq details[open] summary{color:var(--mauve);}
.faq-reponse{padding:0 0 1.2rem;max-width:none;}
.faq-reponse p:last-child{margin-bottom:0;}

/* Sources */
.sources{margin:2.8rem 0 0;padding-top:1.4rem;border-top:1px solid var(--trait);}
.sources .encart-titre{color:var(--encre-2);}
.sources ol{font-size:.9rem;color:var(--encre-2);padding-left:1.2rem;}

/* À lire aussi */
.suite{border-top:1px solid var(--trait);padding-block:var(--rythme);}

/* ------------------------------------------------------------------
   8. Archives, recherche, 404
------------------------------------------------------------------ */
.tete-archive{padding-block:clamp(2.4rem,5vw,4rem);border-bottom:1px solid var(--trait);}
.tete-archive h1{margin-bottom:.9rem;}
.tete-archive p{color:var(--encre-2);font-size:1.08rem;margin:0;}
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;padding-block:2.5rem;font-family:var(--label);font-size:.72rem;letter-spacing:.08em;}
.pagination .page-numbers{padding:.5rem .85rem;border:1px solid var(--trait);text-decoration:none;color:var(--encre-2);}
.pagination .current{background:var(--mauve);border-color:var(--mauve);color:var(--blanc);}
.recherche{display:flex;gap:.5rem;max-width:460px;}
.recherche input[type=search]{flex:1;font-family:var(--corps);font-size:1rem;padding:.7rem .9rem;border:1px solid var(--trait-fort);background:var(--blanc);color:var(--encre);border-radius:2px;}
.recherche button{font-family:var(--label);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;padding:.7rem 1.1rem;background:var(--encre);color:var(--blanc);border:0;border-radius:2px;cursor:pointer;}
.page-vide{padding-block:var(--rythme);}

/* ------------------------------------------------------------------
   9. Pied de page
------------------------------------------------------------------ */
.pied{background:var(--encre);color:var(--papier-2);padding-block:clamp(3rem,6vw,4.5rem) 2rem;}
.pied a{color:var(--papier-2);text-decoration-color:rgba(248,247,250,.35);}
.pied a:hover{color:var(--blanc);text-decoration-color:var(--blanc);}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(248,247,250,.16);}
.pied .marque-nom{color:var(--blanc);}
.pied-intro{color:#B9B1CB;font-size:.96rem;margin-top:.9rem;max-width:none;}
.pied h2{font-family:var(--label);font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#B9B1CB;margin:0 0 1rem;}
.pied ul{list-style:none;padding:0;margin:0;}
.pied li{margin-bottom:.5rem;font-size:.94rem;}
.pied-bas{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;padding-top:1.6rem;font-family:var(--label);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:#8A83A0;}
.avertissement{margin-top:1.6rem;padding:1rem 1.2rem;border:1px solid rgba(248,247,250,.2);font-size:.86rem;color:#B9B1CB;}
.avertissement strong{color:var(--blanc);}

/* ------------------------------------------------------------------
   10. Adaptatif
------------------------------------------------------------------ */
@media (max-width:900px){
  .planche-grille{grid-template-columns:1fr;}
  .planche-dit{order:2;}
  .pied-grille{grid-template-columns:1fr;gap:2rem;}
  .ligne-article{grid-template-columns:1fr;gap:.45rem;}
  .ligne-rubrique{order:-1;}
}
@media (max-width:720px){
  body{font-size:16.5px;}
  .bouton-menu{display:block;}
  .nav-site{display:none;position:absolute;top:66px;left:0;right:0;background:var(--papier);border-bottom:1px solid var(--trait);padding:1rem var(--gouttiere) 1.4rem;}
  .nav-site.ouvert{display:block;}
  .nav-site ul{flex-direction:column;gap:.2rem;}
  .nav-site a{display:block;padding:.65rem 0;border-bottom:1px solid var(--trait);}
  .specimen-pied{flex-direction:column;align-items:flex-start;gap:.4rem;}
  .etiquette-lignes li{flex-direction:column;gap:.05rem;}
  .etiquette-lignes b{flex:none;}
}

/* ------------------------------------------------------------------
   11. Mouvement
------------------------------------------------------------------ */
@keyframes leve{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.planche-dit>*{animation:leve .55s cubic-bezier(.22,.61,.36,1) both;}
.planche-dit>*:nth-child(1){animation-delay:.02s;}
.planche-dit>*:nth-child(2){animation-delay:.09s;}
.planche-dit>*:nth-child(3){animation-delay:.16s;}
.planche-dit>*:nth-child(4){animation-delay:.23s;}
.planche-visuel{animation:leve .7s .1s cubic-bezier(.22,.61,.36,1) both;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* Impression */
@media print{
  .entete,.pied,.suite,.bouton-menu{display:none;}
  body{background:#fff;font-size:11pt;}
}