/* menthe.org — feuille de style unique. Aucune police distante, aucun @import. */

:root{
  --encre:#10251f;
  --encre-doux:#3d5750;
  --papier:#edf1e8;
  --papier-2:#e2e9db;
  --carte:#f7faf4;
  --menthe:#1f6b4f;
  --menthe-vif:#2e8b6b;
  --menthe-pale:#a9d9c2;
  --glacial:#1e5f7d;
  --trait:#c9d6c4;
  --mesure:68ch;
  --r:3px;
  --pas:clamp(2.5rem,6vw,4.5rem);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,ui-serif,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font:400 1.0625rem/1.65 var(--sans);
  text-rendering:optimizeLegibility;
}

/* ---------- Squelette ---------- */
.enveloppe{width:min(100% - 2.5rem,74rem);margin-inline:auto}
.etroit{width:min(100% - 2.5rem,50rem);margin-inline:auto}
main{display:block;padding-bottom:var(--pas)}
section{margin-block:var(--pas)}

/* ---------- Typographie ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem)}
h2{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.15rem);margin-top:1.6em}
h3{font-size:clamp(1.18rem,1.05rem + .6vw,1.4rem);margin-top:1.8em}
h4{font-size:1.05rem;margin-top:1.6em}
p,ul,ol,dl,table,figure,blockquote{margin:0 0 1.15em}
p,li{max-width:var(--mesure);text-wrap:pretty}
li{margin-bottom:.35em}
a{color:var(--menthe);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--glacial)}
:focus-visible{outline:2px solid var(--glacial);outline-offset:3px;border-radius:2px}
strong{font-weight:600}
abbr[title]{text-decoration:underline dotted;cursor:help}
.chapo{font-size:1.2rem;line-height:1.55;color:var(--encre-doux);max-width:60ch}
.binome{font-family:var(--serif);font-style:italic}
.etiquette{
  font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--menthe);display:inline-block;margin-bottom:.9rem;
}
.note{
  font-size:.95rem;color:var(--encre-doux);border-left:2px solid var(--menthe-pale);
  padding:.1rem 0 .1rem 1rem;margin-block:1.5em;max-width:var(--mesure)
}

/* ---------- En-tête ---------- */
.bandeau{border-bottom:1px solid var(--trait);background:var(--carte)}
.bandeau-int{display:flex;align-items:center;gap:1rem;min-height:4.25rem}
.marque{display:flex;align-items:center;gap:.55rem;font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--encre);text-decoration:none;letter-spacing:-.02em}
.marque svg{flex:none}
.marque span{color:var(--menthe)}
.nav{margin-left:auto}
.nav ul{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{font-size:.95rem;color:var(--encre);text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--menthe);color:var(--menthe)}
.bascule{display:none;background:none;border:1px solid var(--trait);border-radius:var(--r);padding:.5rem .7rem;font:600 .85rem var(--sans);color:var(--encre);margin-left:auto;cursor:pointer}
@media (max-width:56rem){
  .bascule{display:block}
  .nav{flex-basis:100%;margin:0;display:none;order:3}
  .nav[data-ouvert]{display:block}
  .bandeau-int{flex-wrap:wrap;padding-bottom:.5rem}
  .nav ul{flex-direction:column;gap:0;padding-bottom:.5rem}
  .nav li{border-top:1px solid var(--trait)}
  .nav a{display:block;padding:.7rem 0;border:0}
}

/* ---------- Fil d'Ariane ---------- */
.fil{font-size:.85rem;color:var(--encre-doux);padding:1.1rem 0 0}
.fil ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.fil li::after{content:"›";margin-left:.4rem;color:var(--trait)}
.fil li:last-child::after{content:""}
.fil a{color:var(--encre-doux)}

/* ---------- Hero / planche ---------- */
.planche{
  border-bottom:1px solid var(--trait);
  background:
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(31,107,79,.06) 39px 40px),
    var(--carte);
}
.planche-int{display:grid;gap:2.5rem;padding-block:clamp(2.5rem,6vw,4.5rem);grid-template-columns:1fr}
@media (min-width:60rem){.planche-int{grid-template-columns:1.15fr .85fr;align-items:center}}
.planche h1{margin-bottom:.35em}
.herbier{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:var(--r)}
.herbier a{background:var(--carte);padding:1rem .75rem 1.1rem;text-align:center;text-decoration:none;color:var(--encre);display:block;transition:background .18s}
.herbier a:hover{background:#fff}
.herbier svg{display:block;margin:0 auto .5rem}
@media (max-width:30rem){.herbier{grid-template-columns:repeat(2,1fr)}}
.herbier b{display:block;font-family:var(--serif);font-size:.95rem;font-weight:600}
.herbier i{display:block;font:400 .7rem/1.3 var(--mono);font-style:normal;color:var(--encre-doux);letter-spacing:.02em;margin-top:.15rem}

/* ---------- Grilles de cartes ---------- */
.grille{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));list-style:none;margin:0;padding:0}
.grille li{margin:0;max-width:none}
.carte{
  display:block;height:100%;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r);padding:1.15rem 1.25rem 1.3rem;text-decoration:none;color:var(--encre);
  transition:border-color .18s,transform .18s;
}
.carte:hover{border-color:var(--menthe-vif);transform:translateY(-2px)}
.carte b{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:600;margin-bottom:.3rem;color:var(--menthe)}
.carte span{display:block;font-size:.92rem;color:var(--encre-doux);line-height:1.5}
.carte em{display:block;font:600 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-doux);font-style:normal;margin-bottom:.6rem}

/* ---------- Listes de liens (sommaires de rubrique) ---------- */
.sommaire{columns:3 15rem;column-gap:2.5rem;list-style:none;margin:0 0 1.5em;padding:0}
.sommaire li{break-inside:avoid;margin:0 0 .55em;max-width:none;font-size:.97rem}
.sommaire a{color:var(--encre);text-decoration-color:var(--trait)}
.sommaire a:hover{color:var(--menthe);text-decoration-color:currentColor}
.bloc-rubrique{border-top:1px solid var(--trait);padding-top:1.5rem;margin-top:2.5rem}
.bloc-rubrique h2{margin-top:0}

/* ---------- Tableaux ---------- */
.tableau{overflow-x:auto;margin-block:1.5em}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--carte)}
caption{text-align:left;font-size:.85rem;color:var(--encre-doux);padding-bottom:.5rem}
th,td{border:1px solid var(--trait);padding:.6rem .75rem;text-align:left;vertical-align:top}
th{background:var(--papier-2);font-weight:600;font-size:.85rem;letter-spacing:.02em}

/* ---------- FAQ ---------- */
details{border:1px solid var(--trait);border-radius:var(--r);background:var(--carte);padding:.85rem 1.1rem;margin-bottom:.7rem;max-width:var(--mesure)}
details[open]{border-color:var(--menthe-pale)}
summary{font-family:var(--serif);font-size:1.05rem;font-weight:600;cursor:pointer}
summary::marker{color:var(--menthe)}
details p{margin:.7rem 0 .2rem}

/* ---------- Carte Leaflet ---------- */
.carto{height:26rem;border:1px solid var(--trait);border-radius:var(--r);background:var(--papier-2);margin-block:1.5em}
.carto:not(.leaflet-container)::after{content:"Carte en cours de chargement…";display:grid;place-items:center;height:100%;font-size:.9rem;color:var(--encre-doux)}
.leaflet-container{font:inherit}

/* ---------- Pied ---------- */
.pied{border-top:1px solid var(--trait);background:var(--carte);padding-block:var(--pas) 2rem;margin-top:var(--pas)}
.pied-grille{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.pied h2{font-size:.75rem;font-family:var(--mono);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-doux);margin:0 0 .8rem}
.pied ul{list-style:none;margin:0;padding:0;font-size:.94rem}
.pied li{margin-bottom:.45em}
.pied a{color:var(--encre);text-decoration-color:var(--trait)}
.pied a:hover{color:var(--menthe)}
.mentions{border-top:1px solid var(--trait);margin-top:2.5rem;padding-top:1.25rem;font-size:.85rem;color:var(--encre-doux)}
.mentions p{max-width:none}

/* ---------- Divers ---------- */
.evitement{position:absolute;left:-9999px}
.evitement:focus{left:1rem;top:1rem;z-index:10;background:var(--carte);padding:.6rem 1rem;border:1px solid var(--menthe);border-radius:var(--r)}
.feuille-sep{display:block;margin:var(--pas) auto;color:var(--menthe-pale)}
hr{border:0;border-top:1px solid var(--trait);margin-block:2.5rem}

@media (prefers-color-scheme:dark){
  :root{
    --encre:#e6ede6;--encre-doux:#a6b8ae;--papier:#0e1815;--papier-2:#16241f;
    --carte:#132019;--trait:#28382f;--menthe:#6ec49d;--menthe-vif:#8ad9b5;
    --menthe-pale:#2f5c48;--glacial:#7cc0dd;
  }
  .planche{background:repeating-linear-gradient(90deg,transparent 0 39px,rgba(110,196,157,.06) 39px 40px),var(--carte)}
  .herbier a:hover{background:#17281f}
}