/* ============================================================
   NORTHMANNIA — feuille de style unique
   Direction : pierre et lichen
   ============================================================ */

:root{
  /* Deux thèmes, aucun imposé. À la première visite, le site prend celui de
     l'appareil ; dès que le visiteur touche au sélecteur, son choix prime et
     il est retenu. La résolution se fait en JavaScript, dans le <head> de
     chaque page, et pose data-theme="light" ou "dark" avant le premier
     affichage — la CSS n'a donc jamais à deviner. Voir [data-theme="dark"].
     Sans JavaScript, le thème clair s'applique : c'est le repli. */
  color-scheme: light;

  /* pierre */
  --ground:#EBEBE6;
  --ground-2:#E3E4DD;
  --surface:#F7F7F4;
  --ink:#21252A;
  --ink-2:#4A5158;
  --ink-3:#5D646A;
  --line:#D0D2CB;
  --line-2:#B7BAB1;
  /* lichen */
  --lichen:#4E6A58;
  --lichen-soft:#DBE3DB;
  --on-lichen:#F7F7F4;
  /* ocre */
  --ocre:#7D6231;
  --ocre-soft:#EDE4D4;
  /* parties récoltées — calendrier, filtres */
  --p-resine:#A0772F;
  --p-aiguilles:#4E6A58;
  --p-baies:#4D6385;
  --p-feuilles:#7A7F2E;
  --p-bourgeons:#9A5B43;

  --f-disp:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --gut:clamp(20px, 5vw, 60px);
  --maxw:1180px;
}

/* ---------- thème sombre ----------
   La même direction, de nuit : la pierre devient ardoise, le lichen
   s'éclaircit pour tenir sur fond sombre, l'ocre passe au laiton. */
:root[data-theme="dark"]{
  color-scheme: dark;

  /* ardoise */
  --ground:#1B1E21;
  --ground-2:#16191C;
  --surface:#23272B;
  --ink:#E9EAE5;
  --ink-2:#C0C5C2;
  --ink-3:#9DA3A1;
  --line:#343A41;
  --line-2:#4C545E;
  /* lichen de nuit */
  --lichen:#93B8A0;
  --lichen-soft:#2A342E;
  --on-lichen:#14181B;
  /* laiton */
  --ocre:#CBA96E;
  --ocre-soft:#332A1B;
  --p-resine:#D2AE6A;
  --p-aiguilles:#93B8A0;
  --p-baies:#9DB3D6;
  --p-feuilles:#C3C77F;
  --p-bourgeons:#DDA48C;
}

/* Les planches sont peintes sur papier crème : en plein sur fond d'ardoise,
   elles éblouissent. On les assoit légèrement, sans les délaver. */
:root[data-theme="dark"] .plate,
:root[data-theme="dark"] .lot-photos img{
  filter:brightness(.86) saturate(.94);
}
/* Le lavis de strates est une texture claire : posé sur l'ardoise il éclaire
   au lieu d'ombrer. On le retient davantage. */
:root[data-theme="dark"] .hero::before{opacity:.07}

/* Réservé aux lecteurs d'écran */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Un exposant agrandit sa boîte de ligne et creuse un trou au milieu d'un
   paragraphe. On le sort du flux vertical et on le repositionne à la main. */
sup, sub{
  font-size:.72em; line-height:0;
  position:relative; vertical-align:baseline;
}
sup{top:-.45em}
sub{bottom:-.25em}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--lichen); outline-offset:3px}
[hidden]{display:none !important}

/* ---------- ossature ---------- */
.shell{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.rule{border:0; border-top:1px solid var(--line); margin:0}

/* Séparateur — repli CSS : quatre filets d'épaisseur décroissante */
.strata{height:26px; display:flex; flex-direction:column; justify-content:space-between; opacity:.7}
.strata i{display:block; background:var(--line-2)}
.strata i:nth-child(1){height:2px; opacity:.9}
.strata i:nth-child(2){height:1px; opacity:.55}
.strata i:nth-child(3){height:1px; opacity:.3}
.strata i:nth-child(4){height:3px; opacity:.75}

/* Séparateur — filet gravé. Posé en masque plutôt qu'en image, pour que
   sa couleur vienne du jeton de thème et qu'il tienne en clair comme en
   sombre. Si le navigateur ne gère pas les masques, le repli ci-dessus
   reste affiché. */
@supports (mask-image: url("/img/texture-filet.webp")) or (-webkit-mask-image: url("/img/texture-filet.webp")){
  .strata{
    height:40px; display:block; opacity:1;
    background:var(--line-2);
    -webkit-mask:url("/img/texture-filet.webp") center/contain no-repeat;
    mask:url("/img/texture-filet.webp") center/contain no-repeat;
  }
  .strata i{display:none}
}

/* Héros — lavis de strates de pierre, très en retrait. Il doit se deviner :
   au-delà, le texte perd en lisibilité. */
.hero{position:relative; isolation:isolate}
.hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-12px 0 0;
  background:url("/img/texture-strates.webp") center/cover no-repeat;
  opacity:.15;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 42%, transparent 96%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 42%, transparent 96%);
}
@media (prefers-reduced-transparency: reduce){ .hero::before{display:none} }

/* ---------- en-tête ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ground) 93%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{
  max-width:var(--maxw); margin:0 auto; padding:15px var(--gut);
  display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap;
}
.wordmark{
  font-family:var(--f-disp); font-weight:700; font-size:18px;
  letter-spacing:.17em; text-transform:uppercase; text-decoration:none;
  margin-right:auto; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.62em;
}
.wordmark .mk{width:.469em; height:.66em; flex:0 0 auto; display:block}

.soonmark{color:var(--ocre)}
.site-head nav{display:flex; gap:20px; align-items:center}
.site-head nav a{
  font-family:var(--f-disp); font-size:13.5px; font-weight:500;
  letter-spacing:.04em; text-decoration:none; color:var(--ink-2);
  white-space:nowrap;
}
.site-head nav a:hover{color:var(--ink)}

/* téléphone : la navigation passe sur une deuxième ligne pleine largeur */
@media (max-width:620px){
  .head-in{padding-block:10px}
  .wordmark{font-size:15.5px; letter-spacing:.14em}
  .site-head nav{
    order:3; width:100%; gap:9px 16px; flex-wrap:wrap;
    border-top:1px solid var(--line); padding-top:9px;
  }
  .site-head nav a{font-size:13px}
  .site-head nav a{font-size:12.5px}
  .langsw button{padding:4px 8px}
}

.langsw{display:inline-flex; border:1px solid var(--line-2); border-radius:3px; overflow:hidden}
.langsw button{
  font-family:var(--f-disp); font-size:12px; font-weight:600; letter-spacing:.06em;
  border:0; background:transparent; color:var(--ink-3);
  padding:5px 9px; cursor:pointer;
}
.langsw button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}

.themesw{display:inline-flex; border:1px solid var(--line-2); border-radius:3px; overflow:hidden}
.themesw button{
  appearance:none; background:transparent; border:0; cursor:pointer;
  display:grid; place-items:center; padding:5px 9px; color:var(--ink-2);
  line-height:0;
}
.themesw button:hover{color:var(--ink)}
.themesw button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
.themesw svg{width:14px; height:14px; display:block; fill:none;
  stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:620px){ .themesw button{padding:4px 8px} }

/* ---------- hero ---------- */
.hero{padding-block:clamp(56px,10vw,104px) clamp(40px,7vw,72px)}
.hero .runes{
  font-family:var(--f-disp); font-size:13px; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase; color:var(--lichen);
  margin:0 0 22px;
}
.hero h1{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(38px,8.2vw,80px); line-height:1.02; letter-spacing:-.025em;
  margin:0 0 18px; text-wrap:balance;
}
.hero .lede{
  font-size:clamp(18px,2.4vw,22px); line-height:1.5; color:var(--ink-2);
  max-width:44ch; margin:0 0 30px;
}
.hero .lede strong{color:var(--ink); font-weight:400}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:8px 26px;
  font-family:var(--f-disp); font-size:12.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ---------- sections ---------- */
section{padding-block:clamp(44px,7vw,80px)}
.eyebrow{
  font-family:var(--f-disp); font-size:12px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 14px;
}
h2{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(25px,3.6vw,36px); line-height:1.14; letter-spacing:-.016em;
  margin:0 0 18px; text-wrap:balance; max-width:22ch;
}
h3{font-family:var(--f-disp); font-weight:600; font-size:18px; line-height:1.3; margin:0 0 7px}
p{margin:0 0 17px; max-width:66ch}
p:last-child{margin-bottom:0}
.muted{color:var(--ink-2)}

.two{display:grid; gap:clamp(28px,5vw,64px); grid-template-columns:1fr 1fr; align-items:start}
@media (max-width:760px){ .two{grid-template-columns:1fr} }

.quote{
  font-family:var(--f-body); font-style:italic;
  font-size:clamp(20px,2.9vw,27px); line-height:1.44;
  color:var(--ink); max-width:26ch; margin:0;
  border-left:2px solid var(--lichen); padding-left:clamp(18px,3vw,30px);
}
/* Section Origine : le texte est long, la citation courte. On la fait
   accompagner la lecture plutôt que de laisser une colonne vide. */
@media (min-width:761px){
  #histoire .two > div:last-child{align-self:stretch}
  #histoire .quote{position:sticky; top:calc(env(safe-area-inset-top, 0px) + 104px)}
}

.quote cite{
  display:block; font-style:normal; font-family:var(--f-disp);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:16px;
}

/* ---------- gamme ---------- */
.range{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px}
@media (min-width:700px){ .range{grid-template-columns:repeat(2,1fr)} }
.range > div{background:var(--ground); padding:22px 24px}
.range .n{
  font-family:var(--f-mono); font-size:11.5px; color:var(--lichen);
  letter-spacing:.06em; display:block; margin-bottom:8px;
}
.range p{font-size:15.5px; color:var(--ink-2); margin:0}
.range .soon{
  font-family:var(--f-disp); font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ocre);
  margin-left:7px; vertical-align:2px;
}

/* ---------- espèces ---------- */
.species{
  display:grid; gap:14px; margin-top:12px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
}
.species article, .species > a{
  background:var(--surface); border:1px solid var(--line);
  padding:0 0 16px; display:flex; flex-direction:column;
  overflow:hidden; transition:border-color .3s ease;
}
.species article:hover, .species > a:hover{border-color:var(--line-2)}
.species .plate{transition:transform .65s cubic-bezier(.2,.7,.3,1)}
.species article:hover .plate, .species > a:hover .plate{transform:scale(1.035)}
@media (prefers-reduced-motion: reduce){
  .species .plate, .species article, .species > a{transition:none}
  .species article:hover .plate{transform:none}
}
.species .plate{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  background:#F2F0E8; border-bottom:1px solid var(--line); margin-bottom:14px;
}
.species .code{margin-bottom:4px}
.species article > *:not(.plate), .species > a > *:not(.plate){padding-inline:19px}
.species .code{padding-top:0}
.species .code{
  font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3);
  letter-spacing:.09em; display:block; margin-bottom:5px;
}
.species h3{font-size:16px; margin-bottom:2px}
.species .lat{font-style:italic; font-size:14px; color:var(--ink-2); margin:0}
.species .win{
  font-family:var(--f-disp); font-size:11px; letter-spacing:.07em;
  color:var(--lichen); margin:9px 0 0;
}
.species article.cand .win, .species > a.cand .win{color:var(--ocre)}
.species > a{text-decoration:none; color:inherit}
.species > a:hover h3{color:var(--lichen)}
.species > a:focus-visible{outline:2px solid var(--lichen); outline-offset:2px}

/* l'en-tete est collant : sans ça, toute ancre atterrit dessous */
html{scroll-padding-top:76px}
@media (max-width:620px){ html{scroll-padding-top:128px} }
/* sous 340px, le sélecteur de thème passe sur sa propre rangée */
@media (max-width:339px){ html{scroll-padding-top:162px} }

/* ---------- carnet / lots ---------- */
.lotgrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); margin-top:10px}
.lotcard{
  display:block; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); padding:19px 20px 17px;
  transition:border-color .16s, transform .16s;
}
.lotcard:hover{border-color:var(--lichen); transform:translateY(-2px)}
.lotcard .code{
  font-family:var(--f-mono); font-size:12.5px; color:var(--lichen);
  letter-spacing:.05em; display:block; margin-bottom:9px;
}
.lotcard h3{font-size:17px; margin-bottom:1px}
.lotcard .lat{font-style:italic; font-size:14px; color:var(--ink-2); margin:0 0 11px}
.lotcard dl{
  display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:0;
  font-family:var(--f-disp); font-size:12.5px;
}
.lotcard dt{color:var(--ink-3); letter-spacing:.06em}
.lotcard dd{margin:0; font-variant-numeric:tabular-nums}

/* fiche de lot */
.lot-head{padding-block:clamp(40px,7vw,72px) 26px}
.lot-top{
  display:grid; gap:clamp(20px,4vw,44px);
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  align-items:start;
}
@media (max-width:700px){ .lot-top{grid-template-columns:1fr} }
.lot-plate{margin:0}
.lot-plate img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  background:#F2F0E8; border:1px solid var(--line);
}
.lot-plate figcaption{
  font-family:var(--f-disp); font-size:11.5px; letter-spacing:.06em;
  color:var(--ink-3); margin-top:8px;
}
.mark-eth{
  font-family:var(--f-disp); font-size:11.5px; font-weight:500;
  letter-spacing:.44em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 16px;
}
.lot-head .code{
  font-family:var(--f-mono); font-size:15px; color:var(--lichen);
  letter-spacing:.09em; margin:0 0 14px;
}
.lot-head h1{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(31px,6vw,56px); line-height:1.05; letter-spacing:-.022em; margin:0 0 8px;
}
.lot-head .lat{font-style:italic; font-size:clamp(17px,2.2vw,21px); color:var(--ink-2); margin:0}

.lot-facts{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); margin-block:6px 30px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.lot-facts > div{background:var(--ground); padding:16px 18px}
.lot-facts dt{
  font-family:var(--f-disp); font-size:11px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
}
.lot-facts dd{
  margin:0; font-family:var(--f-disp); font-size:16px;
  font-variant-numeric:tabular-nums;
}
.lot-photos{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); margin-block:26px}
.lot-photos figure{margin:0}
.lot-photos img{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--ground-2)}
.lot-photos figcaption{
  font-family:var(--f-disp); font-size:11.5px; color:var(--ink-3);
  letter-spacing:.05em; margin-top:7px;
}
.backlink{
  font-family:var(--f-disp); font-size:13px; letter-spacing:.05em;
  text-decoration:none; color:var(--ink-2); display:inline-block; margin-top:8px;
}
.backlink:hover{color:var(--lichen)}

/* ---------- infolettre ---------- */
.signup{background:var(--ground-2); border-block:1px solid var(--line)}
.signup .inner{max-width:var(--maxw); margin:0 auto; padding:clamp(44px,7vw,76px) var(--gut)}
.signup h2{max-width:20ch}
.signup .cols{display:grid; gap:clamp(26px,4vw,56px); grid-template-columns:1.05fr 1fr; align-items:start}
@media (max-width:760px){ .signup .cols{grid-template-columns:1fr} }
form.nl{display:flex; flex-direction:column; gap:13px; max-width:420px}
form.nl label{
  font-family:var(--f-disp); font-size:11.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
}
form.nl input[type="email"]{
  font-family:var(--f-disp); font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:3px; padding:12px 14px; width:100%;
}
form.nl input[type="email"]:focus{border-color:var(--lichen); outline:none; box-shadow:0 0 0 3px var(--lichen-soft)}
.consent{display:flex; gap:10px; align-items:flex-start}
.consent input{margin-top:5px; flex:0 0 auto; accent-color:var(--lichen); width:16px; height:16px}
.consent span{font-size:14px; line-height:1.45; color:var(--ink-2)}
button.submit{
  font-family:var(--f-disp); font-size:14px; font-weight:500; letter-spacing:.04em;
  background:var(--lichen); color:var(--on-lichen); border:1px solid var(--lichen);
  border-radius:3px; padding:12px 22px; cursor:pointer; align-self:flex-start;
}
button.submit:hover{filter:brightness(1.08)}
.formnote{font-size:13px; color:var(--ink-3); margin:0; max-width:44ch}

/* ---------- pied ---------- */
.site-foot{border-top:1px solid var(--line); margin-top:clamp(40px,6vw,72px)}
.foot-in{
  max-width:var(--maxw); margin:0 auto; padding:34px var(--gut) 46px;
  display:grid; gap:24px; grid-template-columns:1.4fr 1fr 1fr;
  font-family:var(--f-disp); font-size:13px;
}
@media (max-width:700px){ .foot-in{grid-template-columns:1fr 1fr} }
@media (max-width:440px){ .foot-in{grid-template-columns:1fr} }
.foot-in h4{
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px;
}
.foot-in a{display:block; text-decoration:none; color:var(--ink-2); margin-bottom:5px}
.foot-in a:hover{color:var(--ink)}
.foot-in .fine{font-size:13px; color:var(--ink-3); line-height:1.55; max-width:36ch}

/* mention de politique — permanente au pied, et en fin de section Gamme */
.foot-note{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut) 26px;
  border-top:1px solid var(--line); padding-top:16px; margin-top:8px;
}
.foot-note p{
  font-size:12.5px; line-height:1.6; color:var(--ink-3);
  max-width:72ch; margin:0;
}
.policy{
  margin-top:clamp(22px,3vw,34px); padding:14px 0 0;
  border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.6; color:var(--ink-3);
  max-width:64ch;
}

/* ---------- bilingue ---------- */
[data-lang]{display:none}
html[lang="fr"] [data-lang="fr"]{display:revert}
html[lang="en"] [data-lang="en"]{display:revert}
span[data-lang],a[data-lang],strong[data-lang],em[data-lang],cite[data-lang],dd[data-lang],dt[data-lang]{display:none}
html[lang="fr"] span[data-lang="fr"],html[lang="fr"] a[data-lang="fr"],html[lang="fr"] strong[data-lang="fr"],
html[lang="fr"] em[data-lang="fr"],html[lang="fr"] cite[data-lang="fr"],html[lang="fr"] dd[data-lang="fr"],html[lang="fr"] dt[data-lang="fr"]{display:revert}
html[lang="en"] span[data-lang="en"],html[lang="en"] a[data-lang="en"],html[lang="en"] strong[data-lang="en"],
html[lang="en"] em[data-lang="en"],html[lang="en"] cite[data-lang="en"],html[lang="en"] dd[data-lang="en"],html[lang="en"] dt[data-lang="en"]{display:revert}

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



/* ===== pages Notes documentaires et Portraits ===== */
.doc-nav{display:flex; flex-wrap:wrap; gap:8px 9px; margin:20px 0 0; padding:0; list-style:none}
.doc-nav a{
  display:inline-block;
  font-family:var(--f-disp); font-size:11.5px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; text-decoration:none;
  color:var(--ink-2); border:1px solid var(--line); border-radius:999px;
  padding:6px 13px; transition:border-color .2s, color .2s;
}
.doc-nav a:hover{border-color:var(--line-2); color:var(--ink)}

.note{padding-block:clamp(34px,5vw,58px); border-top:1px solid var(--line)}
.note:first-of-type{border-top:0; padding-top:clamp(26px,4vw,40px)}
.note .num{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--lichen); display:block; margin-bottom:7px;
}
.note h2{margin:0}
.note > .lat{font-style:italic; font-size:clamp(16px,2vw,19px); color:var(--ink-2); margin:3px 0 0}
.note .kicker{
  font-family:var(--f-disp); font-size:13.5px; color:var(--ink-3);
  margin:9px 0 0; max-width:54ch;
}
.note-body{
  display:grid; grid-template-columns:minmax(0,1fr) 288px;
  gap:clamp(22px,3vw,46px); margin-top:24px; align-items:start;
}
@media (max-width:860px){ .note-body{grid-template-columns:1fr} }
.note-body h3{
  font-family:var(--f-disp); font-size:11.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin:24px 0 7px;
}
.note-body h3:first-child{margin-top:0}
.note-prose p{margin:0 0 11px; max-width:66ch}
.note-prose p:last-child{margin-bottom:0}
.fiche{border:1px solid var(--line); background:var(--surface); overflow:hidden}
.fiche .plate{display:block; width:100%; height:auto; border-bottom:1px solid var(--line)}
.fiche dl{margin:0; padding:15px 17px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 13px}
.fiche dt{
  font-family:var(--f-disp); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); padding-top:2px; white-space:nowrap;
}
.fiche dd{margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.caution{border-left:2px solid var(--ocre); padding-left:15px}
.caution p{margin-bottom:9px}
.article-note{
  margin-top:20px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.6; color:var(--ink-3); max-width:72ch;
}


/* ============================================================
   ACCUEIL — refonte du 24 septembre 2026
   Tout ce qui bouge ici est un enrichissement : sans JavaScript,
   la page reste complète et lisible ; avec « réduire les animations »,
   rien ne glisse ni ne pivote.
   ============================================================ */

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-disp); font-size:14px; font-weight:500; letter-spacing:.03em;
  text-decoration:none; cursor:pointer;
  padding:12px 20px; border-radius:3px; border:1px solid var(--line-2);
  background:transparent; color:var(--ink);
  transition:border-color .2s, background-color .2s, transform .2s;
}
.btn:hover{border-color:var(--ink-3); transform:translateY(-1px)}
.btn-main{background:var(--lichen); border-color:var(--lichen); color:var(--on-lichen)}
.btn-main:hover{border-color:var(--lichen); filter:brightness(1.08)}
.btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.btn .mono{font-family:var(--f-mono); font-size:13px; letter-spacing:.04em}

/* ---------- héros : texte + planche d'herbier ---------- */
.hero2{
  display:grid; gap:clamp(34px,5vw,70px); align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  padding-block:clamp(40px,7vw,86px) clamp(44px,6vw,72px);
}
@media (max-width:880px){ .hero2{grid-template-columns:1fr} }
.hero2 .runes{
  font-family:var(--f-disp); font-size:13px; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase; color:var(--lichen); margin:0 0 20px;
}
.hero2 h1{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(40px,6.6vw,76px); line-height:1.01; letter-spacing:-.028em;
  margin:0 0 20px; text-wrap:balance;
}
.hero2 .lede{font-size:clamp(18px,2.2vw,21px); line-height:1.52; color:var(--ink-2); max-width:42ch; margin:0 0 28px}
.hero2 .lede strong{color:var(--ink); font-weight:400}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 28px}
.hero2 .hero-meta{margin-top:4px}
.hero-meta .live{color:var(--lichen)}
.hero-meta .live::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:currentColor; margin-right:8px; vertical-align:1px;
  box-shadow:0 0 0 0 currentColor; animation:pouls 2.4s ease-out infinite;
}
@keyframes pouls{0%{box-shadow:0 0 0 0 color-mix(in srgb, currentColor 55%, transparent)}
  70%,100%{box-shadow:0 0 0 7px transparent}}

/* la pile de planches */
/* grille : la planche en haut ; dessous, l'étiquette (à gauche, à peine
   posée sur le bas de la feuille) et les boutons (à droite) */
.specimen{position:relative; margin:0 auto; width:100%; max-width:470px; perspective:1100px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"pile pile" "etiq act";
  column-gap:16px; align-items:end}
.specimen .stack{grid-area:pile}
.specimen .stack{position:relative; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.specimen .stack::before,.specimen .stack::after{
  content:""; position:absolute; inset:0; background:#EFECE2; border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.specimen .stack::before{transform:rotate(-3.2deg) translate(-6px,6px)}
.specimen .stack::after{transform:rotate(2.1deg) translate(7px,3px)}
:root[data-theme="dark"] .specimen .stack::before,
:root[data-theme="dark"] .specimen .stack::after{background:#3A3D3C; border-color:#474C50}
.sheet{
  position:relative; z-index:1; display:block; background:#F2F0E8;
  border:1px solid var(--line-2);
  box-shadow:0 2px 4px rgba(33,37,42,.06), 0 22px 44px -26px rgba(33,37,42,.45);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), opacity .45s;
}
.sheet img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover}
:root[data-theme="dark"] .sheet img{filter:brightness(.88) saturate(.94)}
.sheet.sortie{transform:translate(-14%,4%) rotate(-7deg); opacity:0}
.sheet.entree{transform:translate(12%,-3%) rotate(6deg); opacity:0; transition:none}

/* étiquette d'herbier, épinglée sur le bord bas de la planche */
.etiquette{
  grid-area:etiq; position:relative; z-index:2; margin:-22px 0 0 -14px; max-width:300px;
  background:#FBFAF5; color:#21252A; border:1px solid #CFCBBC;
  padding:12px 14px 11px; transform:rotate(-1.4deg);
  box-shadow:0 10px 24px -14px rgba(33,37,42,.5);
  font-family:var(--f-disp); font-size:12px; line-height:1.45;
  transition:opacity .35s;
}
.etiquette::before{ /* l'épingle */
  content:""; position:absolute; top:-5px; left:50%; width:9px; height:9px; margin-left:-4.5px;
  border-radius:50%; background:#7D6231; box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.etiquette .tete{display:flex; justify-content:space-between; gap:10px;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:#5D646A;
  border-bottom:1px solid #DDD8C8; padding-bottom:6px; margin-bottom:7px}
.etiquette .tete b{font-family:var(--f-mono); font-weight:500; letter-spacing:.08em; color:#4E6A58}
.etiquette .nom{font-weight:600; font-size:15px; margin:0; line-height:1.25}
.etiquette .lat{font-family:var(--f-body); font-style:italic; font-size:13px; color:#4A5158; margin:0 0 6px}
.etiquette .lig{margin:0; color:#4A5158}
.etiquette .lig span.k{color:#5D646A; letter-spacing:.06em; text-transform:uppercase; font-size:9.5px; margin-right:6px}
.etiquette.fondu{opacity:0}
.specimen-actions{grid-area:act; display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  padding-bottom:2px; min-height:40px}
/* le compteur prend la largeur du bouton sans jamais l'élargir : la colonne
   ne bouge pas quand il devient « L'herbier est complet » */
.specimen-actions .compte{width:0; min-width:100%; text-align:right; line-height:1.3}
.specimen-actions .compte{font-family:var(--f-mono); font-size:12px; color:var(--ink-3); letter-spacing:.04em}
@media (max-width:880px){ .specimen{max-width:420px} .etiquette{margin-left:-6px} }
/* trop étroit pour deux colonnes : l'étiquette, puis les boutons dessous */
@media (max-width:480px){
  .specimen{grid-template-columns:minmax(0,1fr); grid-template-areas:"pile" "etiq" "act"}
  .etiquette{margin:-20px 8px 0; max-width:none; transform:rotate(-.8deg)}
  .specimen-actions{flex-direction:row; justify-content:flex-end; align-items:center; gap:12px; margin-top:16px}
  .specimen-actions .compte{width:auto; flex:1; min-width:0; text-align:right; line-height:1.3} /* « L'herbier est complet » tient sur deux lignes sans grandir le bloc */
}

/* ---------- bandeau « en ce moment » ---------- */
.maintenant{border-block:1px solid var(--line); background:var(--ground-2)}
.maintenant .shell{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding-block:14px}
.maintenant .quand{font-family:var(--f-disp); font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.maintenant .quand b{color:var(--ink); font-weight:600}
.puces{display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none}
.puce{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-disp); font-size:12.5px; color:var(--ink-2); text-decoration:none;
  border:1px solid var(--line-2); border-radius:999px; padding:4px 11px 4px 9px; background:var(--surface);
}
.puce:hover{border-color:var(--ink-3); color:var(--ink)}
.puce i{width:8px; height:8px; border-radius:50%; background:var(--c, var(--lichen)); flex:0 0 auto}
.maintenant .voir{margin-left:auto; font-family:var(--f-disp); font-size:12.5px; color:var(--ink-2); text-decoration:none; white-space:nowrap}
.maintenant .voir:hover{color:var(--lichen)}

/* ---------- le fil (origine) ---------- */
.fil{list-style:none; margin:6px 0 clamp(26px,4vw,40px); padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; position:relative}
.fil::before{content:""; position:absolute; left:6px; right:6px; top:6px; height:1px; background:var(--line-2)}
.fil li{position:relative; padding:24px 18px 0 0}
.fil li::before{content:""; position:absolute; top:0; left:0; width:13px; height:13px; border-radius:50%;
  background:var(--ground); border:1.5px solid var(--lichen)}
.fil li:last-child::before{background:var(--lichen)}
.fil .t{font-family:var(--f-disp); font-weight:600; font-size:15.5px; display:block; margin-bottom:2px}
.fil .d{font-size:14px; color:var(--ink-2); line-height:1.45; display:block}
@media (max-width:640px){
  .fil{grid-template-columns:1fr; gap:16px}
  .fil::before{left:6px; right:auto; top:6px; bottom:6px; width:1px; height:auto}
  .fil li{padding:0 0 0 28px}
}
.histoire-plus[data-replie="1"] > .muted:nth-of-type(n+3){display:none}
.lire-plus{margin-top:4px}
.drop::first-letter{
  font-family:var(--f-disp); font-weight:600; float:left; font-size:3.3em; line-height:.86;
  margin:.06em .1em 0 0; color:var(--lichen);
}

/* ---------- gamme : icônes ---------- */
.range .ico{width:34px; height:34px; display:block; margin-bottom:12px; color:var(--lichen);
  fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.range > div{transition:background-color .25s}
.range > div:hover{background:var(--surface)}
.range .n{float:right; margin:0}

/* ---------- échelle d'intensité ---------- */
.echelle{display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; margin-top:10px}
@media (max-width:820px){ .echelle{grid-template-columns:1fr} }
.echelle .vue{position:relative; aspect-ratio:1/1; background:#F2F0E8; border:1px solid var(--line); overflow:hidden; max-width:440px; width:100%}
.echelle .vue img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s}
.echelle .vue img.on{opacity:1}
:root[data-theme="dark"] .echelle .vue img{filter:brightness(.88) saturate(.94)}
.curseur{margin:6px 0 22px}
.curseur input[type=range]{width:100%; accent-color:var(--lichen); margin:0; height:28px; cursor:pointer}
.graduations{display:flex; justify-content:space-between; font-family:var(--f-disp); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:2px}
.graduations button{all:unset; cursor:pointer; padding:2px 0}
.graduations button[aria-pressed="true"]{color:var(--ink); font-weight:600}
.graduations button:focus-visible{outline:2px solid var(--lichen); outline-offset:3px}
.echelle .nom{font-family:var(--f-disp); font-weight:600; font-size:clamp(24px,3vw,32px); margin:0; line-height:1.15}
.echelle .lat{font-style:italic; color:var(--ink-2); margin:0 0 12px}
.echelle .prof{font-size:18px; line-height:1.55; max-width:44ch; margin:0 0 14px; min-height:5.2em}
.fumee{display:flex; align-items:flex-end; gap:6px; height:46px; margin:0 0 6px}
.fumee svg{width:22px; height:46px; fill:none; stroke:var(--ink-3); stroke-width:1.4; stroke-linecap:round;
  opacity:.18; transition:opacity .4s, stroke .4s}
.fumee svg.on{opacity:1; stroke:var(--lichen)}
.fumee-l{font-family:var(--f-disp); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0}

/* ---------- calendrier de cueillette ---------- */
.cal{margin-top:14px; border:1px solid var(--line); background:var(--surface); padding:14px 14px 10px}
.cal-grille{display:grid; grid-template-columns:minmax(96px,170px) minmax(0,1fr); align-items:center}
.cal-mois{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); position:relative}
.cal-mois button{
  all:unset; box-sizing:border-box; text-align:center; cursor:pointer;
  font-family:var(--f-disp); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  padding:6px 0; border-radius:2px;
}
.cal-mois button:hover{color:var(--ink)}
.cal-mois button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
.cal-mois .mc{display:none}
@media (max-width:560px){ .cal-mois .ml{display:none} .cal-mois .mc{display:inline} }
.cal-mois button:focus-visible{outline:2px solid var(--lichen); outline-offset:1px}
.cal-ligne{display:contents}
.cal-nom{
  font-family:var(--f-disp); font-size:13.5px; font-weight:500; text-decoration:none; color:var(--ink);
  padding:9px 10px 9px 0; border-top:1px solid var(--line); line-height:1.2;
}
.cal-nom small{display:block; font-family:var(--f-body); font-style:italic; font-weight:400; font-size:12px; color:var(--ink-3)}
.cal-nom:hover{color:var(--lichen)}
.cal-piste{position:relative; height:100%; min-height:44px; border-top:1px solid var(--line);
  background-image:linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size:calc(100% / 12) 100%;
}
.cal-barre{position:absolute; height:9px; border-radius:5px; background:var(--c); opacity:.9}
.cal-barre.l1{top:calc(50% - 11px)} .cal-barre.l2{top:calc(50% + 2px)}
.cal-barre.seule{top:calc(50% - 4.5px)}
.cal-barre.douce{opacity:.38}
.cal-barre.pic{opacity:1; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent)}
.cal-barre.cand{background:transparent; border:1.5px dashed var(--ink-3); opacity:.8}
.cal-auj{position:absolute; top:0; bottom:0; width:2px; background:var(--ocre); pointer-events:none; z-index:2}
.cal-auj span{position:absolute; top:-2px; left:5px; font-family:var(--f-mono); font-size:10px; color:var(--ocre); white-space:nowrap; letter-spacing:.04em}
.cal-col{position:absolute; top:0; bottom:0; background:color-mix(in srgb, var(--lichen) 9%, transparent); pointer-events:none}
.cal-ligne.eteinte .cal-nom{color:var(--ink-3)}
.cal-ligne.eteinte .cal-barre{opacity:.14}
.cal-legende{display:flex; flex-wrap:wrap; gap:6px 16px; margin:12px 0 0; padding:10px 0 0; border-top:1px solid var(--line);
  font-family:var(--f-disp); font-size:12px; color:var(--ink-2)}
.cal-legende > span{display:inline-flex; align-items:center; gap:7px}
.cal-legende i{width:18px; height:8px; border-radius:4px; background:var(--c)}
.cal-legende i.pic{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent)}
.cal-legende i.cand{background:transparent; border:1.5px dashed var(--ink-3)}
.cal-resume{margin:16px 0 0; font-size:16px; color:var(--ink-2); min-height:1.6em}
.cal-resume b{color:var(--ink); font-weight:600}
@media (max-width:560px){
  .cal{padding:10px 8px 8px}
  .cal-grille{grid-template-columns:86px minmax(0,1fr)}
  .cal-nom{font-size:12.5px} .cal-nom small{display:none}
  .cal-mois button{font-size:10px; letter-spacing:0}
}

/* ---------- traçabilité : décodeur + dernier lot ---------- */
.trace{display:grid; gap:clamp(26px,4vw,56px); grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:start}
@media (max-width:820px){ .trace{grid-template-columns:1fr} }
.decodeur{margin-top:22px; border:1px solid var(--line); background:var(--surface); padding:18px 18px 16px}
.decodeur label{display:block; font-family:var(--f-disp); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.decodeur input{
  width:100%; font-family:var(--f-mono); font-size:22px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:var(--ground); border:1px solid var(--line-2); border-radius:3px; padding:10px 12px;
}
.decodeur input:focus{outline:none; border-color:var(--lichen); box-shadow:0 0 0 3px var(--lichen-soft)}
.morceaux{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0 0}
.morceau{border-top:2px solid var(--line-2); padding-top:8px; transition:border-color .3s}
.morceau.ok{border-color:var(--lichen)}
.morceau.ko{border-color:var(--ocre)}
.morceau > b{display:block; font-family:var(--f-mono); font-weight:500; font-size:15px; color:var(--ink)}
.morceau > span{display:block; font-family:var(--f-disp); font-size:12.5px; color:var(--ink-2); line-height:1.4}
@media (max-width:460px){ .morceaux{grid-template-columns:1fr} }
.verdict{margin:14px 0 0; font-family:var(--f-disp); font-size:14px; color:var(--ink-2); min-height:1.5em}
.verdict a{color:var(--lichen); font-weight:600}

.dernier{display:block; text-decoration:none; color:inherit; border:1px solid var(--line); background:var(--surface);
  transition:border-color .25s, transform .25s}
.dernier:hover{border-color:var(--lichen); transform:translateY(-2px)}
.dernier .ph{aspect-ratio:4/3; overflow:hidden; background:var(--ground-2); position:relative}
.dernier .ph img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.dernier:hover .ph img{transform:scale(1.04)}
:root[data-theme="dark"] .dernier .ph img{filter:brightness(.9)}
.dernier .ph .badge{position:absolute; top:12px; left:12px; font-family:var(--f-disp); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; background:var(--ground); color:var(--ink); padding:5px 9px; border-radius:2px}
.dernier .corps{padding:16px 18px 18px}
.dernier .code{font-family:var(--f-mono); font-size:13px; color:var(--lichen); letter-spacing:.06em; display:block; margin-bottom:6px}
.dernier h3{margin:0 0 2px; font-size:19px}
.dernier .lat{font-style:italic; font-size:14.5px; color:var(--ink-2); margin:0 0 10px}
.dernier dl{display:grid; grid-template-columns:auto 1fr; gap:3px 14px; margin:0; font-family:var(--f-disp); font-size:13px}
.dernier dt{color:var(--ink-3); letter-spacing:.05em}
.dernier dd{margin:0; font-variant-numeric:tabular-nums}
.dernier .aller{display:block; margin-top:12px; font-family:var(--f-disp); font-size:13px; color:var(--ink-2)}
.dernier:hover .aller{color:var(--lichen)}

/* ---------- espèces : filtres et survol ---------- */
.filtres{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 16px}
.filtres button{
  font-family:var(--f-disp); font-size:12.5px; font-weight:500; letter-spacing:.04em; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:6px 13px;
}
.filtres button i{width:8px; height:8px; border-radius:50%; background:var(--c, var(--ink-3))}
.filtres button:hover{border-color:var(--ink-3); color:var(--ink)}
.filtres button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--ground)}
.filtres .n{font-family:var(--f-mono); font-size:12px; color:var(--ink-3); margin-left:4px}
.species > a{position:relative; transition:border-color .3s ease, opacity .35s, transform .35s}
.species > a.masque{display:none}
.species .apercu{
  position:absolute; left:0; right:0; top:0; aspect-ratio:1/1; display:flex; align-items:flex-end;
  padding:16px 18px; margin:0; font-size:14.5px; line-height:1.45; color:#F4F2EA;
  background:linear-gradient(to top, rgba(22,26,24,.86) 0%, rgba(22,26,24,.55) 45%, transparent 75%);
  opacity:0; transition:opacity .35s; pointer-events:none;
}
@media (hover:hover){ .species > a:hover .apercu, .species > a:focus-visible .apercu{opacity:1} }
.species .parts{display:flex; gap:5px; margin:9px 0 0}
.species .parts i{width:8px; height:8px; border-radius:50%; background:var(--c)}

/* téléphone : deux planches par rangée plutôt qu'une — la grille reste lisible
   et le défilement est deux fois moins long */
@media (max-width:620px){
  .species{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .species > a > *:not(.plate){padding-inline:11px}
  .species .plate{margin-bottom:9px}
  .species h3{font-size:14px}
  .species .lat{font-size:12.5px}
  .species .win{font-size:10.5px; letter-spacing:.03em; line-height:1.35}
  .species > a{padding-bottom:11px}
}

/* ---------- apparition au défilement ---------- */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rv.vu{opacity:1; transform:none}

/* ---------- infolettre : retours ---------- */
.nl-msg{font-family:var(--f-disp); font-size:14px; margin:0; min-height:1.4em; color:var(--lichen)}
.nl-msg.ko{color:var(--ocre)}

@media (prefers-reduced-motion: reduce){
  .js .rv{opacity:1; transform:none}
  .hero-meta .live::before{animation:none}
  .sheet.sortie,.sheet.entree{transform:none}
}

/* infolettre : le piège à robots, hors de l'écran (jamais display:none,
   que certains robots savent lire) */
form.nl .pot{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
form.nl{position:relative}
form.nl button.submit:disabled{opacity:.6; cursor:progress}
form.nl.fait input[type="email"]{border-color:var(--lichen)}
.formnote a{color:inherit; text-decoration:underline; text-underline-offset:2px}

/* pages /merci et /confidentialite */
.merci-bloc{padding-block:clamp(26px,4vw,44px); border-bottom:1px solid var(--line); max-width:var(--maxw)}
.merci-bloc:last-of-type{border-bottom:0}
.merci-bloc h2{margin-top:0}
.merci-bloc h3{font-size:17px; margin:0 0 6px}
.merci-cols{display:grid; gap:22px 44px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:14px; max-width:880px}
@media (max-width:700px){ .merci-cols{grid-template-columns:1fr} }
.merci-cols p{margin:0; color:var(--ink-2)}
form.trouver{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; max-width:460px}
form.trouver input{flex:1 1 180px; font-size:17px; padding:11px 13px; border:1px solid var(--line); border-radius:6px;
  background:var(--ground); color:var(--ink); letter-spacing:.04em; text-transform:uppercase}
form.trouver input:focus{border-color:var(--lichen); outline:none; box-shadow:0 0 0 3px var(--lichen-soft)}
.trouver-msg{margin-top:8px}
.prose p{max-width:68ch}
.prose h2{margin-top:28px}
.merci-bloc form.nl{margin-top:16px}
form.nl label.consent{text-transform:none; letter-spacing:normal; font-weight:400}