/* PHYTO 5 — The Element. CHARTER-PURE per charter.typ:
   PALETTE = black + white + the 5 element colours ONLY. No transverse colour accent (the PHYTO 5
   magenta was banned in 2026 — so is any brown/gold). Hierarchy = GREYSCALE + Raleway WEIGHT
   (Light 300 → ExtraBold 800 → Black 900). Emphasis is weight, not colour. Element colours are
   reserved for element signage. Avoid solid colour fills (aplats) and heavy rules. */
:root{
  --ink:#1a1a1a; --paper:#ffffff; --g1:#454545; --muted:#8a8a8a; --line:#e9e9e9; --wash:#f7f7f7;
  --wood:#7fb828; --wood-d:#649717; --fire:#e95372; --fire-d:#a40a29;   /* palette OFFICIELLE (KNOWLEDGE/FICHE_DIAGNOSTIC) + dérivées foncées */
  --earth:#f3bc4a; --earth-d:#ad7500; --metal:#89b6e2; --metal-d:#1a5793; --water:#aa94c6; --water-d:#533875;
  --f-0:1.0625rem; --f-1:1.33rem; --f-2:1.66rem; --f-3:2.07rem; --f-4:2.59rem; --hero:clamp(2.6rem,6vw,4.2rem);
  --measure:680px; --wrap:1120px; --gap:clamp(1rem,3vw,2rem); --space:clamp(3rem,7vw,6rem);
}
*{box-sizing:border-box}
html{font-size:112.5%;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Raleway',system-ui,sans-serif;font-weight:300;font-size:var(--f-0);
  color:var(--ink);background:var(--paper);line-height:1.72;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
main{min-height:60vh}
h1,h2,h3{font-weight:300;line-height:1.12;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.nowrap{white-space:nowrap}
h1{font-size:var(--f-4);margin:.1em 0 .35em}
h2{font-size:var(--f-2);margin:1.8em 0 .5em;font-weight:400}
h3{font-size:var(--f-1);font-weight:600;letter-spacing:-.01em}
/* emphasis = WEIGHT, never colour */
em{font-style:normal;font-weight:800;color:inherit}
strong{font-weight:700}
p,ul{margin:1.1em 0}
.lead{font-size:var(--f-1);color:var(--g1);font-weight:300;line-height:1.55;text-wrap:pretty}
.muted{color:var(--muted)}
.kicker{font-weight:800;letter-spacing:.26em;font-size:.7rem;color:var(--ink);text-transform:uppercase;margin:0 0 .8em}

/* header — nav only, centred (the logo signs at the bottom, not the top) */
.site-head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(10px);
  display:flex;align-items:center;justify-content:center;padding:1.1rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--line)}
.nav a{margin:0 clamp(.6rem,2vw,1.2rem);font-size:.82rem;letter-spacing:.05em;color:var(--g1)}
.nav a:hover{color:var(--ink)}
.nav-cta{color:var(--ink)!important;font-weight:700}

/* hero */
.hero{max-width:var(--wrap);margin:0 auto;padding:var(--space) clamp(1rem,4vw,2.5rem) 2rem;text-align:center}
.hero h1{font-size:clamp(1.9rem,8vw,4.2rem);font-weight:200;margin:.2em auto .3em}
.hero .lead{max-width:60ch;margin:1.2rem auto}
/* CTA = weight + underline, no colour, no fill */
.btn{display:inline-block;margin-top:1.2rem;font-weight:700;font-size:.9rem;letter-spacing:.04em;
  border-bottom:2px solid var(--ink);padding-bottom:.25rem}
.btn:hover{opacity:.6}
/* Primary CTA — filled black pill, unmistakable (black & white only, on charter). The one action. */
.btn-solid{display:inline-block;padding:1rem 2.5rem;border:1px solid var(--ink);border-radius:2rem;
  background:var(--ink);color:#fff;font-weight:700;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;transition:.18s}
.btn-solid:hover{background:#fff;color:var(--ink)}
.hero .btn-solid{margin-top:1.6rem}

.elements-row{max-width:var(--wrap);margin:1.5rem auto;padding:0 1.5rem;text-align:center}
.chip{display:inline-block;border-radius:2rem;padding:.26rem 1rem;font-size:.78rem;font-weight:600;color:#fff;margin:.2rem}
.chip.wood{background:var(--wood)} .chip.fire{background:var(--fire)} .chip.earth{background:var(--earth);color:#5a4200}
.chip.metal{background:var(--metal);color:#123} .chip.water{background:var(--water)}
.elements-row .muted{margin-top:1rem;max-width:52ch;margin-left:auto;margin-right:auto}

/* reading column — Medium-grade */
.prose,.page-head,.article{max-width:var(--measure);margin-inline:auto;padding-inline:clamp(1rem,5vw,1.5rem)}
.prose h2{border-top:1px solid var(--line);padding-top:1em}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.96rem}
.prose th,.prose td{text-align:left;padding:.6rem .6rem;border-bottom:1px solid var(--line)}
.prose th{font-weight:700}
.article{padding-top:var(--space)}
.article .chip{margin-bottom:1rem}
.page-head{padding-top:var(--space);text-align:center}

/* cards — whitespace + weight, a single greyscale hairline (no colour, no fill) */
.cards{max-width:var(--wrap);margin:var(--space) auto;padding:0 clamp(1rem,4vw,2.5rem);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--gap)}
.card{border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.5rem;transition:.18s;background:#fff}
.card:hover{border-color:var(--muted)}
.card:hover h3{text-decoration:underline;text-underline-offset:3px}
.card h3{margin:.1em 0 .5em}
.card p{color:var(--muted);font-size:.92rem;margin:0}

/* closing CTA band — the one action per page; hairline + whitespace, solid button */
.reveal-cta{border-top:1px solid var(--line);margin-top:var(--space);padding:var(--space) clamp(1rem,4vw,2.5rem);text-align:center}
.reveal-cta h2{font-size:var(--f-3);font-weight:200;margin:.2em 0 .1em}
.reveal-cta .lead{max-width:52ch;margin:.6rem auto 0}
.cta-note{font-size:.76rem;color:var(--muted);margin:1.1rem 0 0}
/* newsletter — no colour fill; separated by a hairline + whitespace */
.newsletter{border-top:1px solid var(--line);margin-top:var(--space);padding:var(--space) clamp(1rem,4vw,2.5rem);text-align:center}
.newsletter h2{font-size:var(--f-3);font-weight:200}
.newsletter .lead{max-width:56ch;margin:.6rem auto 1.7rem}
.nl-form{max-width:480px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.nl-form input[type=email]{flex:1 1 240px;padding:.85rem 1.1rem;border:1px solid var(--muted);border-radius:2rem;font:inherit;background:#fff}
.nl-form input[type=email]:focus{outline:none;border-color:var(--ink)}
/* form submit — black & white only (charter: web forms are black & white exclusively) */
.nl-form button{padding:.85rem 1.8rem;border:1px solid var(--ink);border-radius:2rem;background:var(--ink);color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:.18s}
.nl-form button:hover{background:#fff;color:var(--ink)}
.consent{flex:1 1 100%;font-size:.76rem;color:var(--muted);margin-top:.5rem;line-height:1.5}
.consent a{color:var(--ink);text-decoration:underline}

/* footer */
.site-foot{max-width:var(--wrap);margin:0 auto;padding:var(--space) clamp(1rem,4vw,2.5rem) 0}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap)}
.foot-h{font-weight:700;margin:0 0 .7em;font-size:.95rem}
.site-foot a,.cookie-link{display:block;color:var(--muted);font-size:.85rem;margin:.35em 0;background:none;border:none;padding:0;text-align:left;cursor:pointer;font:inherit}
.site-foot a:hover,.cookie-link:hover{color:var(--ink)}

/* Signature — the only authoritative mark: the black-on-white SVG, centred, at the bottom.
   ~5 mm tall, ~5 mm of white margin above and below, no rule, no frame. */
.signature{text-align:center;padding:5mm 0;margin-top:2rem}
.signature .logo{height:5mm;width:auto;display:inline-block}
.foot-legal{color:var(--muted);font-size:.72rem;text-align:center;margin:0 0 .6rem}
/* Fine print — shop reachable but never promoted; discreet inline row. */
.foot-fine{text-align:center;margin:0 0 1.6rem;font-size:.72rem}
.foot-fine a,.foot-fine .cookie-link{display:inline;color:var(--muted);margin:0 .5rem;background:none;border:none;padding:0;font:inherit;cursor:pointer}
.foot-fine a:hover,.foot-fine .cookie-link:hover{color:var(--ink)}

.cookie-banner{display:none;position:fixed;bottom:1rem;left:1rem;right:1rem;max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--ink);border-radius:14px;padding:1rem 1.2rem;gap:1rem;align-items:center;font-size:.84rem;box-shadow:0 8px 40px rgba(0,0,0,.10)}
.cookie-banner.show{display:flex}
.cookie-banner button{margin-left:auto;padding:.5rem 1.2rem;border:1px solid var(--ink);border-radius:2rem;background:var(--ink);color:#fff;cursor:pointer}

@media(max-width:640px){ html{font-size:106%} .nav a{margin:0 .6rem;font-size:.76rem} .hero{padding-top:3rem} }

/* Micro-animations — ultra discrètes : une entrée qui donne du souffle, jamais de spectacle. */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero .kicker{animation:rise .55s cubic-bezier(.16,1,.3,1) both}
.hero h1{animation:rise .65s .06s cubic-bezier(.16,1,.3,1) both}
.hero .lead{animation:rise .65s .14s cubic-bezier(.16,1,.3,1) both}
.hero .btn,.hero .btn-solid{animation:rise .65s .22s cubic-bezier(.16,1,.3,1) both}
.elements-row .chip{animation:rise .5s both}
.elements-row .chip:nth-child(2){animation-delay:.05s}
.elements-row .chip:nth-child(3){animation-delay:.10s}
.elements-row .chip:nth-child(4){animation-delay:.15s}
.elements-row .chip:nth-child(5){animation-delay:.20s}
@media (prefers-reduced-motion:reduce){ .hero *,.elements-row .chip,.card{animation:none!important;transition:none!important} }

/* Scroll-reveal (Dawn) : ajouté par JS uniquement si l'animation est possible (sinon contenu visible). */
.sr{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.sr.in{opacity:1;transform:none}

/* Portes discrètes tout en bas — la seule navigation « site » (boutique · journal · pros). */
.foot-nav{text-align:center;margin:0 0 1rem;font-size:.8rem;letter-spacing:.02em}
.foot-nav a{display:inline;color:var(--g1);margin:0 .7rem;text-decoration:none}
.foot-nav a:hover{color:var(--ink)}

/* Navigation douce en pied d'article : lien vers le portrait de l'élément + lectures voisines. */
.element-link{margin:2.2rem 0 .4rem;font-size:.92rem}
.element-link a{color:var(--g1);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.element-link a:hover{color:var(--ink);border-color:var(--ink)}
.more-reading{margin:1.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line)}
.more-reading .more-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.more-reading ul{list-style:none;padding:0;margin:0}
.more-reading li{margin:.35rem 0}
.more-reading a{color:var(--g1);text-decoration:none;font-size:.96rem}
.more-reading a:hover{color:var(--ink)}

/* Home « plein » — les cinq éléments enrichis, la méthode, par où commencer. Même charte
   (filets --line, poids Raleway, chips d'élément, tokens --space/--wrap), jamais d'aplat. */
.five{max-width:var(--wrap);margin:var(--space) auto 0;padding:0 clamp(1rem,4vw,2.5rem);text-align:center}
.five-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap);max-width:920px;margin:0 auto}
.five .el{padding:.3rem 0}
.five .el p{color:var(--g1);font-size:.9rem;margin:.7rem 0 0;line-height:1.5}
.five-note{max-width:52ch;margin:2rem auto 0}

.steps{max-width:var(--wrap);margin:var(--space) auto 0;padding:var(--space) clamp(1rem,4vw,2.5rem) 0;border-top:1px solid var(--line);text-align:center}
.steps-kicker,.begin-kicker{color:var(--muted);text-align:center;margin:0 0 2rem}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.4rem var(--gap);max-width:960px;margin:0 auto}
.step-n{display:block;font-size:2.2rem;font-weight:200;color:var(--muted);margin:0 0 .2rem}
.step h3{margin:.1em 0 .45em}
.step p{color:var(--g1);font-size:.95rem;margin:0;line-height:1.6}

.begin{max-width:var(--wrap);margin:var(--space) auto 0;padding-top:var(--space);border-top:1px solid var(--line)}
.begin .cards{margin:0 auto}