/* METHANYS — feuille de style
   Direction : sobriété type Emil Kowalski (typo serrée, easing maison, mouvements courts),
   palette vert / jaune / brun / rouge / kaki en dégradés. */

:root {
  --cream: #f6f2e6;
  --paper: #fffdf6;
  --ink: #1f2418;
  --ink-soft: #4b5040;
  --line: rgba(60, 55, 30, 0.14);

  --green: #5aa02c;
  --green-d: #2f6b1f;
  --lime: #a6cf3f;
  --yellow: #e8b923;
  --amber: #d98d1c;
  --brown: #6b4426;
  --brown-d: #3d2716;
  --red: #b5432c;
  --khaki: #6f7440;
  --khaki-d: #474b27;

  --g-hero: radial-gradient(60% 60% at 15% 20%, rgba(166, 207, 63, .55), transparent 70%),
            radial-gradient(50% 55% at 85% 15%, rgba(232, 185, 35, .5), transparent 70%),
            radial-gradient(55% 60% at 80% 90%, rgba(181, 67, 44, .28), transparent 70%),
            radial-gradient(60% 60% at 10% 95%, rgba(111, 116, 64, .45), transparent 70%);
  --g-brand: linear-gradient(120deg, var(--green-d), var(--green) 40%, var(--yellow) 100%);
  --g-earth: linear-gradient(135deg, var(--khaki-d), var(--brown) 60%, var(--red));

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --radius: 18px;
  --shadow: 0 1px 2px rgba(40, 35, 10, .06), 0 8px 24px -12px rgba(40, 35, 10, .18);
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.028em; margin: 0; font-weight: 640; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--green-d); outline-offset: 3px; border-radius: 6px; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 242, 230, .78);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out);
}
.header.scrolled { border-bottom-color: var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  text-decoration: none; font-size: 15px; font-weight: 520; color: var(--ink-soft);
  padding: 8px 12px; border-radius: 999px;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.lang {
  font: inherit; font-size: 13px; font-weight: 640; letter-spacing: .04em;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  padding: 7px 12px; border-radius: 999px; cursor: pointer; margin-left: 6px;
  transition: transform .16s var(--ease-out), background-color .2s var(--ease-out);
}
.lang:active, .btn:active, .tab:active, .step:active, .chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { background: rgba(90, 160, 44, .12); color: var(--green-d); }
  .lang:hover { background: #fff; }
}
@media (max-width: 860px) {
  .nav a { display: none; }
  .nav a.keep { display: inline-block; }
}

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  padding: 14px 22px; border-radius: 999px; border: 0;
  transition: transform .16s var(--ease-out), box-shadow .25s var(--ease-out), background-position .5s var(--ease-out);
}
.btn-primary {
  color: #fff; background: linear-gradient(120deg, var(--green-d), var(--green), var(--lime));
  background-size: 200% 100%; background-position: 0 0;
  box-shadow: 0 10px 24px -10px rgba(47, 107, 31, .7);
}
.btn-ghost { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background-position: 100% 0; }
  .btn:hover svg { transform: translateX(3px); }
  .btn-ghost:hover { background: #fff; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 120px) 0 clamp(56px, 8vw, 110px); isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background: var(--g-hero);
  filter: blur(30px);
  animation: drift 24s var(--ease-in-out) infinite alternate;
}
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 3%, 0) scale(1.08); } }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 640;
  letter-spacing: .06em; text-transform: uppercase; color: var(--green-d);
  padding: 6px 12px; border-radius: 999px; background: rgba(255, 253, 246, .7); border: 1px solid var(--line);
}
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(90, 160, 44, .6); animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(90, 160, 44, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(90, 160, 44, 0); } }
.hero h1 { font-size: clamp(38px, 5.4vw, 66px); margin: 20px 0 22px; }
.grad { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: clamp(18px, 2vw, 21px); color: var(--ink-soft); max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.digester {
  background: linear-gradient(160deg, rgba(255, 253, 246, .92), rgba(255, 253, 246, .6));
  border: 1px solid var(--line); border-radius: 28px; padding: 22px; box-shadow: var(--shadow);
}
.digester svg { width: 100%; height: auto; }
.bubble { fill: rgba(255, 255, 255, .85); animation: rise 5s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }
.bubble:nth-child(2) { animation-delay: -1.2s; animation-duration: 6s; }
.bubble:nth-child(3) { animation-delay: -2.4s; animation-duration: 4.4s; }
.bubble:nth-child(4) { animation-delay: -3.3s; animation-duration: 5.6s; }
.bubble:nth-child(5) { animation-delay: -.6s; animation-duration: 6.4s; }
@keyframes rise { 0% { transform: translateY(70px) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-90px) scale(1); opacity: 0; } }
.flow { stroke-dasharray: 6 8; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.caption { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink-soft); font-weight: 520; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .digester { max-width: 460px; } }

/* ---------- sections ---------- */
section { padding: clamp(56px, 8vw, 104px) 0; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--khaki-d); }
.sec-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head h2 { font-size: clamp(30px, 4.4vw, 52px); margin: 10px 0 14px; }
.sec-head p { color: var(--ink-soft); font-size: 19px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }

/* reveal : entrée courte, jamais depuis scale(0) */
.reveal { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), filter .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------- parcours ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; position: relative; }
.step {
  font: inherit; text-align: left; cursor: pointer; padding: 16px; border-radius: 16px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  transition: transform .16s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.step b { display: block; font-size: 12px; letter-spacing: .08em; color: var(--khaki); margin-bottom: 6px; }
.step span { font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; display: block; }
.step[aria-selected="true"] { background: linear-gradient(150deg, #fff, #f2f7df); border-color: var(--green); box-shadow: 0 10px 26px -14px rgba(47, 107, 31, .6); }
.step[aria-selected="true"] b { color: var(--green-d); }
.progress { height: 5px; border-radius: 99px; background: rgba(60, 55, 30, .1); margin: 18px 0 22px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 20%; border-radius: 99px; background: var(--g-brand); transition: width .6s var(--ease-out); }
.panel { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: stretch; }
.panel .txt h3 { font-size: 28px; margin-bottom: 10px; }
.panel .txt p { color: var(--ink-soft); }
.panel .fact { border-radius: var(--radius); padding: 24px; color: #fff; background: var(--g-earth); display: flex; flex-direction: column; justify-content: flex-end; min-height: 160px; }
.panel .fact small { text-transform: uppercase; letter-spacing: .08em; opacity: .8; font-weight: 640; font-size: 12px; }
.panel .fact p { font-size: 20px; line-height: 1.35; margin-top: 8px; letter-spacing: -0.01em; }
.swap { animation: swap .45s var(--ease-out); }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } .panel { grid-template-columns: 1fr; } }

/* ---------- filières ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tab { font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); transition: transform .16s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.type-card { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.type-card h3 { font-size: 26px; margin-bottom: 10px; }
.type-card p { color: var(--ink-soft); }
.meta { display: grid; gap: 12px; align-content: start; }
.meta div { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--cream); font-size: 15px; }
.meta dt { font-weight: 700; min-width: 96px; color: var(--brown); }
.meta dd { margin: 0; color: var(--ink-soft); }
.meta dl { display: contents; }
@media (max-width: 860px) { .type-card { grid-template-columns: 1fr; } }

.valo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.valo .card { position: relative; overflow: hidden; }
.valo .card::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 200px; height: 200px; border-radius: 50%; opacity: .16; filter: blur(8px); background: var(--c); }
.valo h3 { font-size: 20px; margin: 10px 0 8px; letter-spacing: -.02em; }
.valo p { color: var(--ink-soft); font-size: 15.5px; }
.tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c) 58%, #000); }
@media (max-width: 860px) { .valo { grid-template-columns: 1fr; } }

/* ---------- actualités ---------- */
#actus { background: linear-gradient(180deg, transparent, rgba(166, 207, 63, .12) 30%, rgba(232, 185, 35, .1) 70%, transparent); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); transition: transform .16s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out); }
.chip[aria-pressed="true"] { background: var(--green-d); color: #fff; border-color: var(--green-d); }
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.news a.item { text-decoration: none; display: flex; flex-direction: column; gap: 12px; min-height: 170px; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.item .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase; color: var(--khaki); }
.item .top em { font-style: normal; background: rgba(111, 116, 64, .12); padding: 3px 9px; border-radius: 99px; }
.item h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }
.item .go { margin-top: auto; font-size: 14px; font-weight: 640; color: var(--green-d); }
@media (hover: hover) and (pointer: fine) { .news a.item:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(40,35,10,.06), 0 18px 30px -14px rgba(40,35,10,.28); } }
.notice { padding: 18px 22px; border-radius: var(--radius); background: rgba(255, 253, 246, .7); border: 1px dashed rgba(60, 55, 30, .3); color: var(--ink-soft); font-size: 15.5px; margin-bottom: 16px; }
.small { font-size: 13.5px; color: var(--ink-soft); margin-top: 18px; }
@media (max-width: 960px) { .news { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .news { grid-template-columns: 1fr; } }

/* ---------- réglementation ---------- */
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rule { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.rule .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; background: var(--c); }
.rule h3 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 6px; }
.rule p { color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 760px) { .rules { grid-template-columns: 1fr; } }

/* ---------- ressources ---------- */
.res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.res a { text-decoration: none; display: block; transition: transform .25s var(--ease-out), border-color .25s var(--ease-out); }
.res a strong { display: block; font-size: 17px; letter-spacing: -.015em; }
.res a span { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
@media (hover: hover) and (pointer: fine) { .res a:hover { transform: translateY(-3px); border-color: var(--green); } }
@media (max-width: 860px) { .res { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .res { grid-template-columns: 1fr; } }

/* ---------- à propos + footer ---------- */
.about { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; border-radius: 28px; padding: clamp(28px, 5vw, 56px); color: #f6f2e6; background: radial-gradient(70% 90% at 90% 0%, rgba(232, 185, 35, .35), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(90, 160, 44, .4), transparent 60%), linear-gradient(135deg, var(--khaki-d), var(--brown-d)); }
.about h2 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 14px; }
.about p { color: rgba(246, 242, 230, .85); }
.about .kicker { color: var(--lime); }
.about .logo-card { background: var(--cream); border-radius: 22px; padding: 22px; justify-self: center; }
.about .logo-card img { width: min(300px, 100%); }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }
footer { padding: 40px 0 56px; color: var(--ink-soft); font-size: 14.5px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; border-top: 1px solid var(--line); padding-top: 24px; }
footer a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- page légale ---------- */
.legal { padding: 56px 0 24px; max-width: 760px; }
.legal h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 28px; }
.legal h2 { font-size: 22px; margin: 32px 0 8px; letter-spacing: -.02em; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* =====================  v2 : bandeau, sections enrichies  ===================== */
.masthead { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line);
  background: radial-gradient(55% 140% at 100% 0%, rgba(232,185,35,.42), transparent 62%), radial-gradient(60% 140% at 0% 100%, rgba(166,207,63,.5), transparent 62%), radial-gradient(45% 120% at 62% 120%, rgba(181,67,44,.18), transparent 60%), linear-gradient(180deg, #fbf8ec, var(--cream)); }
.masthead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 80% at 30% 50%, rgba(255,255,255,.65), transparent 70%); }
.masthead-in { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding: clamp(18px, 3vw, 36px) 0; flex-wrap: wrap; }
.mast-logo img { width: clamp(230px, 34vw, 430px); height: auto; filter: drop-shadow(0 6px 14px rgba(60,55,30,.12)); }
.mast-tag { display: grid; gap: 6px; text-align: right; margin-left: auto; font-size: clamp(15px, 1.7vw, 19px); font-weight: 640; letter-spacing: -.01em; color: var(--khaki-d); }
.mast-tag small { font-weight: 500; font-size: .82em; color: var(--ink-soft); }
@media (max-width: 720px) { .mast-tag { text-align: left; margin-left: 0; } }
.header .wrap { height: 58px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 30px; }
.brand b { font-size: 15px; letter-spacing: .1em; color: var(--khaki-d); }
@media (max-width: 860px) { .brand b { display: none; } }
.nav a { padding: 8px 10px; }

.hero { padding-top: clamp(40px, 6vw, 84px); }
.hero h1 { font-size: clamp(36px, 5.4vw, 68px); margin: 18px 0 14px; }
.h1b { font-size: clamp(19px, 2.3vw, 27px); font-weight: 620; letter-spacing: -.02em; color: var(--khaki-d); margin: 0 0 18px; line-height: 1.2; }

.tint-warm { background: linear-gradient(180deg, transparent, rgba(232,185,35,.13) 20%, rgba(232,185,35,.13) 80%, transparent); }
.tint-green { background: linear-gradient(180deg, transparent, rgba(166,207,63,.16) 25%, rgba(232,185,35,.1) 75%, transparent); }
.tint-earth { background: linear-gradient(180deg, transparent, rgba(111,116,64,.16) 20%, rgba(107,68,38,.1) 80%, transparent); }

.loop-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -6px; padding: 0 6px; }
.loopsvg { min-width: 760px; width: 100%; height: auto; }
.wetsvg { min-width: 900px; width: 100%; height: auto; }
.loop { padding: clamp(16px, 2.4vw, 28px); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.trio h3 { font-size: 20px; margin: 10px 0 8px; letter-spacing: -.02em; }
.trio p { color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }

/* galerie & photos */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.gallery.mini { grid-template-columns: 1fr 1fr; margin: 0; }
figure.ph { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); aspect-ratio: 8 / 5.4; }
figure.ph .art, figure.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
figure.ph .art svg { width: 100%; height: 100%; }
figure.ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; color: #fff; font-size: 14px; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(30,24,10,.72)); }
figure.ph .badge { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); background: rgba(255,253,246,.88); border-radius: 99px; padding: 4px 9px; }
@media (hover: hover) and (pointer: fine) { figure.ph > img, figure.ph .art svg { transition: transform .6s var(--ease-out); } figure.ph:hover > img, figure.ph:hover .art svg { transform: scale(1.035); } }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery figure:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16/8; } }

/* cascade chimie */
.cascade { display: grid; gap: 0; max-width: 900px; margin-inline: auto; }
.node { text-align: center; padding: 16px 20px; border-radius: 16px; font-weight: 620; letter-spacing: -.01em; }
.node small { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-bottom: 4px; }
.node.start { background: var(--paper); border: 1px dashed rgba(60,55,30,.35); }
.node.end { color: #fff; background: linear-gradient(120deg, var(--green-d), var(--green), var(--yellow)); box-shadow: 0 12px 28px -14px rgba(47,107,31,.8); }
.pass { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 0; color: var(--khaki-d); font-size: 14px; font-weight: 640; }
.pass i { width: 2px; height: 26px; background: linear-gradient(var(--khaki), var(--green)); position: relative; border-radius: 2px; }
.pass i::after { content: ""; position: absolute; left: -4px; bottom: -3px; width: 10px; height: 10px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg) scale(.85); }
.pass span { background: rgba(255,253,246,.85); border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; font-weight: 600; text-align: center; }
.stage { position: relative; border-left: 6px solid var(--c); padding: 20px 22px; }
.stage .sh { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.stage .sh b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 15px; }
.stage h3 { font-size: 24px; }
.stage .sb { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.stage dl { margin: 0; display: grid; gap: 4px; align-content: start; }
.stage dt { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c); margin-top: 8px; }
.stage dt:first-child { margin-top: 0; }
.stage dd { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.eqs { display: grid; gap: 8px; align-content: start; }
.eqs small { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: block; overflow-x: auto; white-space: nowrap; }
.sn { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); }
.global { display: grid; grid-template-columns: auto 1fr; gap: 20px 32px; align-items: center; max-width: 900px; margin: 24px auto 0; }
.global small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--khaki); margin-bottom: 6px; }
.global code { font-size: 20px; padding: 12px 16px; background: linear-gradient(120deg, #eaf3c9, #fbeaa6); border: 0; font-weight: 600; }
.global p { color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 760px) { .stage .sb, .global { grid-template-columns: 1fr; } }

/* procédés */
.type-card { grid-template-columns: 1.05fr .95fr; align-items: center; }
.type-card .art { background: linear-gradient(180deg, #fbf0c4, #eaf3c9); border-radius: 16px; padding: 10px; border: 1px solid var(--line); }
.type-card .art svg { width: 100%; height: auto; }
.meta { margin: 18px 0 0; }
.liquid { margin-top: 40px; }
.liquid-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.liquid-head h3 { font-size: clamp(22px, 3vw, 32px); }
.seg { display: inline-flex; gap: 6px; }
.regime { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; }
.regime .th { display: grid; justify-items: center; gap: 4px; }
.regime .th b { font-size: 22px; letter-spacing: -.02em; }
.thermo { width: 110px; height: auto; }
.regime h4 { font-size: 24px; margin: 0 0 8px; letter-spacing: -.02em; }
.regime p { color: var(--ink-soft); }
.table-wrap { overflow-x: auto; margin-top: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.cmp th, .cmp td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--khaki-d); }
.cmp tbody th { font-weight: 640; width: 30%; color: var(--brown); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .on { background: linear-gradient(180deg, rgba(166,207,63,.2), rgba(232,185,35,.12)); transition: background .3s var(--ease-out); }
.flowdiag { margin-top: 24px; }
.flowdiag h3 { font-size: 24px; margin-bottom: 14px; }
.digestat { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; margin-top: 16px; background: linear-gradient(135deg, rgba(255,253,246,1), rgba(231,220,198,.6)); }
.digestat h3 { font-size: 26px; margin: 10px 0; }
.digestat p { color: var(--ink-soft); }
@media (max-width: 860px) { .type-card, .regime, .digestat { grid-template-columns: 1fr; } .regime .th { justify-items: start; grid-auto-flow: column; gap: 16px; align-items: center; justify-content: start; } .thermo { width: 70px; } }

/* lecture */
.read-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.lang-h { display: flex; align-items: center; gap: 10px; font-size: 22px; margin-bottom: 14px; }
.lang-h span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .08em; background: var(--ink); color: var(--cream); border-radius: 8px; padding: 4px 8px; }
.books { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.books li { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 16px 18px; display: grid; gap: 3px; position: relative; box-shadow: var(--shadow); }
.books .ty { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--g-earth); border-radius: 99px; padding: 3px 9px; margin-bottom: 4px; }
.books strong { font-size: 17px; letter-spacing: -.015em; line-height: 1.3; }
.books em { font-style: normal; color: var(--brown); font-size: 14.5px; font-weight: 560; }
.books small { color: var(--ink-soft); font-size: 14.5px; }
.books a { color: var(--green-d); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 860px) { .read-grid { grid-template-columns: 1fr; } }

/* organismes */
.orgs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.org { display: grid; gap: 14px; text-decoration: none; padding: 18px; align-content: start; transition: transform .25s var(--ease-out), border-color .25s var(--ease-out); }
.org .logo { height: 64px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #eaf3c9, #fbeaa6); }
.org .logo b { font-size: 22px; letter-spacing: .06em; color: var(--khaki-d); }
.org .logo.has-logo { background: #fff; border: 1px solid var(--line); padding: 8px; }
.org .logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.org strong { display: block; font-size: 15.5px; letter-spacing: -.01em; line-height: 1.25; }
.org small { display: block; color: var(--ink-soft); font-size: 13.5px; margin-top: 3px; }
@media (hover: hover) and (pointer: fine) { .org:hover { transform: translateY(-3px); border-color: var(--green); } }
@media (max-width: 1000px) { .orgs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .orgs { grid-template-columns: 1fr 1fr; } }

/* =====================  v3 : site multi-pages  ===================== */
.sec-head h1 { font-size: clamp(30px, 4.4vw, 52px); margin: 10px 0 14px; }
.masthead.compact .masthead-in { padding: clamp(10px, 1.6vw, 18px) 0; }
.masthead.compact .mast-logo img { width: clamp(150px, 20vw, 230px); }
.masthead.compact .mast-tag { font-size: clamp(13.5px, 1.4vw, 16px); }
.nav a[aria-current="page"] { background: rgba(90, 160, 44, .16); color: var(--green-d); font-weight: 640; }
.nav { gap: 2px; }
.nav a { font-size: 14.5px; padding: 8px 10px; white-space: nowrap; }
@media (max-width: 1080px) { .nav a { font-size: 14px; padding: 8px 8px; } }
@media (max-width: 900px) {
  .header .wrap { gap: 8px; }
  .nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-width: 0; flex: 1 1 auto; justify-content: flex-start; padding: 4px 0; mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 20px), transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a, .nav a.keep { display: inline-block; flex: 0 0 auto; }
  .nav .lang { flex: 0 0 auto; margin-left: 4px; }
}
.xgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.xcard { display: grid; gap: 12px; align-content: start; text-decoration: none; min-height: 150px; transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.xcard p { color: var(--ink-soft); font-size: 16px; }
.xcard .go { margin-top: 4px; font-size: 14px; font-weight: 640; color: var(--green-d); }
.xcard .tag { justify-self: start; }
@media (hover: hover) and (pointer: fine) { .xcard:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 1px 2px rgba(40,35,10,.06), 0 18px 30px -14px rgba(40,35,10,.28); } }
@media (max-width: 860px) { .xgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .xgrid { grid-template-columns: 1fr; } }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 72px; }
.pg { display: grid; gap: 4px; padding: 18px 22px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); text-decoration: none; box-shadow: var(--shadow); transition: transform .25s var(--ease-out), border-color .25s var(--ease-out); }
.pg small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--khaki); }
.pg strong { font-size: 18px; letter-spacing: -.015em; line-height: 1.25; }
.pg.next { text-align: right; grid-column: 2; }
.pg.prev { grid-column: 1; }
@media (hover: hover) and (pointer: fine) { .pg:hover { transform: translateY(-3px); border-color: var(--green); } }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } .pg.next, .pg.prev { grid-column: 1; text-align: left; } }

/* ===== Espace opérateurs ===== */
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
.tool { position: relative; text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); color: var(--ink); transition: transform .16s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.tool:active:not(.soon) { transform: scale(.97); }
.tool strong { font-size: 15.5px; } .tool small { color: var(--ink-soft); font-size: 13px; line-height: 1.35; }
.tool .ti { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--lime), var(--yellow)); color: var(--brown-d); margin-bottom: 6px; }
.tool .ti svg { width: 22px; height: 22px; }
.tool[aria-selected="true"] { border-color: var(--green-d); box-shadow: 0 0 0 2px rgba(47, 107, 31, .25), var(--shadow); }
.tool.soon { opacity: .6; cursor: default; } .tool em { position: absolute; top: 12px; right: 12px; font-size: 11px; font-style: normal; padding: 2px 8px; border-radius: 999px; background: rgba(111, 116, 64, .18); color: var(--khaki-d); }
@media (hover: hover) and (pointer: fine) { .tool:not(.soon):hover { border-color: var(--green); transform: translateY(-2px); } }
.tpanel[hidden] { display: none; } .tpanel { margin-bottom: 18px; }
.tp-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10px; }
.tp-head h3 { margin: 0 0 4px; } .tp-head p { margin: 0; color: var(--ink-soft); max-width: 62ch; }
.tp-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn.sm { padding: 9px 16px; font-size: 14px; }
.small-n { font-size: 14px; padding: 12px 16px; } .disclaimer { margin-top: 8px; }
.tbl-wrap { overflow-x: auto; margin: 10px 0; border-radius: 12px; border: 1px solid var(--line); }
.rt { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 14px; background: #fff; }
.rt th { text-align: left; font-size: 12px; letter-spacing: .02em; padding: 10px 8px; background: rgba(111, 116, 64, .12); color: var(--khaki-d); }
.rt td { padding: 6px 8px; border-top: 1px solid var(--line); }
.rt td.calc, .rt th.calc { text-align: right; font-variant-numeric: tabular-nums; background: rgba(166, 207, 63, .08); }
.rt input[type=number], .rt input[type=text] { width: 100%; min-width: 70px; }
.rt td:first-child input { min-width: 170px; }
.rt .del { border: 0; background: none; cursor: pointer; color: var(--red); font-size: 18px; padding: 4px 8px; }
input[type=number], input[type=text], select { font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); max-width: 100%; }
input:focus-visible, select:focus-visible, .tool:focus-visible, .del:focus-visible { outline: 2px solid var(--green-d); outline-offset: 2px; }
.r-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 16px; } .r-add label { font-weight: 600; font-size: 14px; }
.params { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 14px 0; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .params .field { margin: 0; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } @media (max-width: 820px) { .two { grid-template-columns: 1fr; gap: 12px; } }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.kpis.two-k { grid-template-columns: 1fr 1fr; margin-top: 0; }
.kpi { padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(166, 207, 63, .18), rgba(232, 185, 35, .14)); border: 1px solid var(--line); }
.kpi b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.2; } .kpi span { font-size: 12.5px; color: var(--ink-soft); } .kpi i { display: block; font-style: normal; font-size: 12px; margin-top: 3px; font-weight: 600; }
.kpi.ok i { color: var(--green-d); } .kpi.warn i { color: var(--amber); } .kpi.bad i { color: var(--red); }
.sub { margin: 18px 0 8px; font-size: 15px; }
.bars { display: grid; gap: 6px; }
.bar { display: grid; grid-template-columns: minmax(110px, 200px) 1fr 56px; gap: 10px; align-items: center; font-size: 13.5px; }
.bar div { height: 12px; border-radius: 999px; background: rgba(60, 55, 30, .08); overflow: hidden; } .bar div i { display: block; height: 100%; border-radius: 999px; background: var(--g-brand); transition: width .5s var(--ease-out); } .bar span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.formula { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(60, 55, 30, .06); display: grid; gap: 4px; } .formula code { font-size: 13.5px; } .formula small { color: var(--ink-soft); }
.gauge { position: relative; display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin-top: 16px; }
.gauge .z { display: block; height: 100%; } .z1 { width: 20%; background: var(--yellow); } .z2 { width: 20%; background: var(--green); } .z3 { width: 20%; background: var(--amber); } .z4 { width: 40%; background: var(--red); }
.gauge .mk { position: absolute; top: 0; width: 4px; height: 14px; background: var(--ink); border-radius: 2px; transform: translateX(-2px); transition: left .5s var(--ease-out); }
.gauge-l { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }
.diag { margin-top: 12px; font-size: 14.5px; }
.hist { margin-top: 20px; } .hist-h { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; }
.hist-b table { border-collapse: collapse; width: 100%; font-size: 14px; } .hist-b th, .hist-b td { padding: 6px 8px; text-align: left; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .bar div i, .gauge .mk { transition: none; } }

/* ===== Deux espaces : grand public (clair) / professionnels (sombre) ===== */
body[data-zone="pro"], .pro-band {
  --cream: #11150d; --paper: #1a2014; --ink: #eef0e0; --ink-soft: #b5bba2; --line: rgba(238, 240, 224, .14);
  --green-d: #b7dc57; --khaki: #a4aa6c; --khaki-d: #c9cf93; --brown-d: #2a1a0e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -14px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
body[data-zone="pro"] { background: radial-gradient(70% 40% at 90% 0%, rgba(111, 116, 64, .22), transparent 70%), radial-gradient(60% 40% at 0% 30%, rgba(90, 160, 44, .10), transparent 70%), var(--cream); }
body[data-zone="pro"] .header { background: rgba(17, 21, 13, .78); }
body[data-zone="pro"] .masthead { background: radial-gradient(55% 140% at 100% 0%, rgba(232, 185, 35, .16), transparent 62%), radial-gradient(60% 140% at 0% 100%, rgba(90, 160, 44, .22), transparent 62%), linear-gradient(180deg, #1b2214, var(--cream)); }
body[data-zone="pro"] .masthead::after { display: none; }
body[data-zone="pro"] .mast-logo img { background: #f6f2e6; padding: 8px 18px; border-radius: 16px; filter: none; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7); }
body[data-zone="pro"] .masthead.compact .mast-logo img { padding: 5px 12px; border-radius: 12px; }
body[data-zone="pro"] .tint-green, body[data-zone="pro"] .tint-earth, body[data-zone="pro"] .tint-warm { background: none; }
body[data-zone="pro"] .lang, body[data-zone="pro"] .btn-ghost, body[data-zone="pro"] .tab, body[data-zone="pro"] .chip, body[data-zone="pro"] .tool { background: var(--paper); color: var(--ink); }
body[data-zone="pro"] .tab[aria-selected="true"], body[data-zone="pro"] .tool[aria-selected="true"] { background: #eef0e0; color: #11150d; }
body[data-zone="pro"] .tool[aria-selected="true"] small, body[data-zone="pro"] .tool[aria-selected="true"] strong { color: #11150d; }
body[data-zone="pro"] .chip[aria-pressed="true"] { background: var(--lime); color: #11150d; border-color: var(--lime); }
body[data-zone="pro"] .btn-primary { color: #11150d; }
body[data-zone="pro"] .notice { background: rgba(238, 240, 224, .05); border-color: rgba(238, 240, 224, .25); }
body[data-zone="pro"] .nav a[aria-current="page"] { background: rgba(183, 220, 87, .16); color: var(--lime); }
body[data-zone="pro"] input[type=number], body[data-zone="pro"] input[type=text], body[data-zone="pro"] select { background: #11150d; color: var(--ink); border-color: rgba(238, 240, 224, .22); }
body[data-zone="pro"] .rt, body[data-zone="pro"] .tbl-wrap { background: #141a10; }
body[data-zone="pro"] .rt th { background: rgba(238, 240, 224, .07); color: var(--khaki-d); }
body[data-zone="pro"] .rt td.calc, body[data-zone="pro"] .rt th.calc { background: rgba(166, 207, 63, .07); }
body[data-zone="pro"] .kpi { background: linear-gradient(135deg, rgba(166, 207, 63, .13), rgba(232, 185, 35, .08)); }
body[data-zone="pro"] .kpi.ok i { color: var(--lime); } body[data-zone="pro"] .kpi.warn i { color: var(--yellow); } body[data-zone="pro"] .kpi.bad i { color: #ff8f78; }
body[data-zone="pro"] .formula { background: rgba(238, 240, 224, .06); }
body[data-zone="pro"] .bar div { background: rgba(238, 240, 224, .1); }
body[data-zone="pro"] .tool.soon em { background: rgba(238, 240, 224, .1); color: var(--ink-soft); }
body[data-zone="pro"] .pg, body[data-zone="pro"] .card { background: var(--paper); }
body[data-zone="pro"] figure.ph .badge { background: rgba(17, 21, 13, .8); color: var(--ink); }
body[data-zone="pro"] .org .logo.has-logo { background: #f6f2e6; }

/* bandeau de zone */
.zonebar { font-size: 12.5px; letter-spacing: .02em; background: linear-gradient(100deg, var(--green-d), var(--green) 45%, var(--yellow)); color: #fff; }
.zonebar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 32px; }
.zb-l { display: inline-flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; }
.zb-l i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); flex: none; }
.zb-l em { font-style: normal; opacity: .85; overflow: hidden; text-overflow: ellipsis; } .zb-l em::before { content: "· "; }
.zonebar a { color: inherit; text-decoration: none; font-weight: 640; white-space: nowrap; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .18); transition: background .2s var(--ease-out), transform .16s var(--ease-out); }
.zonebar a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .zonebar a:hover { background: rgba(255, 255, 255, .3); } }
body[data-zone="pro"] .zonebar { background: linear-gradient(100deg, #0a0d07, #2b3319 55%, #4a3a1c); color: #eef0e0; border-bottom: 1px solid rgba(238, 240, 224, .12); }
body[data-zone="pro"] .zb-l i { background: var(--yellow); box-shadow: 0 0 0 3px rgba(232, 185, 35, .3); }
@media (max-width: 640px) { .zb-l em { display: none; } }

/* interrupteur d'espace */
.zswitch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(60, 55, 30, .08); border: 1px solid var(--line); flex: none; }
.zswitch a { text-decoration: none; font-size: 13px; font-weight: 640; padding: 6px 13px; border-radius: 999px; color: var(--ink-soft); white-space: nowrap; transition: background .25s var(--ease-out), color .25s var(--ease-out), transform .16s var(--ease-out); }
.zswitch a:active { transform: scale(.97); }
.zswitch .z-pub.on { background: linear-gradient(120deg, var(--green), var(--lime)); color: #1f2418; }
.zswitch .z-pro.on { background: #11150d; color: #eef0e0; }
body[data-zone="pro"] .zswitch { background: rgba(238, 240, 224, .08); }
body[data-zone="pro"] .zswitch .z-pro.on { background: linear-gradient(120deg, var(--yellow), var(--amber)); color: #11150d; }
body[data-zone="pro"] .zswitch .z-pub.on { background: #f6f2e6; color: #1f2418; }
@media (hover: hover) and (pointer: fine) { .zswitch a:not(.on):hover { color: var(--ink); } }
.header .wrap { gap: 10px; }
@media (max-width: 900px) { .header .wrap { flex-wrap: wrap; height: auto; padding: 8px 0; } .brand b { display: none; } .nav { order: 3; width: 100%; } }

/* bouton sombre (accueil) */
.btn-dark { background: #11150d; color: #eef0e0; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
@media (hover: hover) and (pointer: fine) { .btn-dark:hover { background: #232b17; } .btn-dark:hover svg { transform: translateX(3px); } }

/* bandeau professionnels sur l'accueil */
.pro-band { position: relative; background: radial-gradient(60% 60% at 90% 0%, rgba(232, 185, 35, .12), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgba(90, 160, 44, .18), transparent 70%), #11150d; color: var(--ink); padding-top: clamp(80px, 10vw, 130px); margin-top: clamp(40px, 6vw, 80px); }
.pro-band .pro-edge { position: absolute; left: 0; right: 0; top: -1px; height: clamp(40px, 6vw, 80px); background: #f6f2e6; clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%); }
.pro-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(238, 240, 224, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(238, 240, 224, .045) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(180deg, transparent, #000 25%, #000 80%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 80%, transparent); pointer-events: none; }
.pro-band .wrap { position: relative; }
.pro-band .kicker { color: var(--yellow); }
.pro-band .sec-head p { color: var(--ink-soft); }
.pro-band .card { background: #1a2014; }
.pro-band .xcard { border-color: rgba(238, 240, 224, .14); }
.pro-grid { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .pro-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .pro-grid { grid-template-columns: 1fr; } }

/* ===== annuaire & référentiel ===== */
.adir { display: grid; gap: 14px; }
.a-filters { display: grid; grid-template-columns: 1fr minmax(160px, 240px); gap: 10px; }
@media (max-width: 640px) { .a-filters { grid-template-columns: 1fr; } }
input[type=search] { font: inherit; font-size: 15px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); width: 100%; }
body[data-zone="pro"] input[type=search] { background: #11150d; border-color: rgba(238, 240, 224, .22); }
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 4px; }
.acard { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.acard h3 { font-size: 18px; margin-top: 4px; } .acard p { font-size: 14.5px; color: var(--ink-soft); } .acard .aloc { font-size: 13px; font-weight: 600; color: var(--khaki); }
.alink { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 640; color: var(--green-d); text-decoration: none; width: fit-content; }
.alink:hover { text-decoration: underline; text-underline-offset: 3px; }
.atag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; color: #11150d; background: var(--lime); }
.t-etudes { background: #e8b923; } .t-epuration { background: #7fb7c9; } .t-cogeneration { background: #d98d1c; } .t-equipements { background: #c9cf93; } .t-analyses { background: #c5a3d8; } .t-digestat { background: #b08a5e; } .t-financement { background: #e29a86; } .t-exploitation { background: #9fc99a; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.small-inline { font-size: 13.5px; color: var(--ink-soft); }
.ref th[scope=row] { text-align: left; min-width: 190px; font-weight: 640; } .ref th[scope=row] small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 12px; }
.ref td { text-align: right; font-variant-numeric: tabular-nums; vertical-align: top; } .ref td b { display: block; font-weight: 640; } .ref td small, .ref th small { display: block; font-size: 11.5px; color: var(--ink-soft); font-weight: 400; }
.ref thead th { text-align: right; } .ref thead th:first-child { text-align: left; }
.ref { min-width: 820px; }
details.sources { font-size: 14px; color: var(--ink-soft); } details.sources summary { cursor: pointer; font-weight: 640; color: var(--ink); } details.sources ul { padding-left: 18px; } details.sources a { color: var(--green-d); }

/* ===== Accessibilité : lien d'évitement, focus ===== */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--green-d); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 640; text-decoration: none; transition: top .2s var(--ease-out); }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
main:focus { outline: none; }

/* ===== Navigation pro : menus déroulants ===== */
.ngrp { position: relative; }
.ng-btn { font: inherit; font-size: 14.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; border: 0; background: none; color: inherit; border-radius: 999px; white-space: nowrap; transition: background .2s var(--ease-out); }
.ng-btn svg { width: 12px; height: 12px; transition: transform .2s var(--ease-out); }
.ngrp.open .ng-btn svg { transform: rotate(180deg); }
.ng-btn[data-here="1"] { font-weight: 640; color: var(--green-d); }
.nmenu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 230px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: none; flex-direction: column; z-index: 60; }
.ngrp.open .nmenu { display: flex; animation: pop .16s var(--ease-out); }
.nmenu a { display: block !important; padding: 9px 12px !important; border-radius: 9px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
@media (hover: hover) and (pointer: fine) { .ng-btn:hover { background: rgba(90, 160, 44, .12); } }
@media (max-width: 900px) {
  .ngrp, .nmenu { display: contents; position: static; }
  .ng-btn { display: none; }
  .nmenu a { display: inline-block !important; padding: 8px 10px !important; }
}
.nav a.member { border: 1px solid var(--line); margin-left: 4px; font-weight: 640; }
.nav a.member.on { background: var(--green-d); color: #fff; border-color: transparent; }
body[data-zone="pro"] .nav a.member.on { background: var(--lime); color: #11150d; }
.lock { display: inline-block; width: 9px; height: 11px; margin-left: 5px; vertical-align: -1px; background: currentColor; opacity: .6; border-radius: 2px; position: relative; }
.lockb { float: right; font-size: 11.5px; font-weight: 640; padding: 2px 9px; border-radius: 99px; background: rgba(232, 185, 35, .22); color: #7a5200; }
body[data-zone="pro"] .lockb, .pro-band .lockb { color: #f3d36b; }

/* ===== Bandeau membres & hub pro ===== */
.member-band { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 26px; border-radius: var(--radius); margin: 0 0 22px; background: linear-gradient(110deg, rgba(90, 160, 44, .2), rgba(232, 185, 35, .14)); border: 1px solid var(--line); }
.member-band h3 { margin: 0 0 4px; } .member-band p { margin: 0; max-width: 60ch; color: var(--ink-soft); }
.pro-more { text-align: center; margin-top: 28px; }

/* ===== Formulaires ===== */
.acc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .acc-grid { grid-template-columns: 1fr; } }
.acc-card { padding: clamp(18px, 3vw, 30px); margin-bottom: 20px; }
.acc-card h3 { margin: 0 0 14px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 14px; }
.fgrid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }
.f label { display: block; font-size: 14px; font-weight: 640; margin-bottom: 5px; }
.muted { font-weight: 400; color: var(--ink-soft); }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=search], input[type=date], textarea, select { width: 100%; font: inherit; font-size: 16px; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(60, 55, 30, .28); background: #fff; color: var(--ink); transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(90, 160, 44, .22); outline: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); }
body[data-zone="pro"] input[type=email], body[data-zone="pro"] input[type=tel], body[data-zone="pro"] input[type=url], body[data-zone="pro"] input[type=search], body[data-zone="pro"] input[type=date], body[data-zone="pro"] textarea { background: #11150d; color: var(--ink); border-color: rgba(238, 240, 224, .22); }
.err { display: block; min-height: 0; color: var(--red); font-size: 13.5px; margin-top: 4px; }
body[data-zone="pro"] .err { color: #ff9c85; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; margin: 10px 0 4px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--green-d); }
.f-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.f-status[data-ok="0"] { color: var(--red); } .f-status[data-ok="1"] { color: var(--green-d); }
.acc-msg { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--line); background: var(--paper); font-weight: 560; }
.acc-msg[data-tone="ok"] { border-color: var(--green); background: rgba(90, 160, 44, .14); }
.acc-msg[data-tone="warn"] { border-color: var(--amber); background: rgba(232, 185, 35, .16); }
.acc-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.acc-danger { margin-top: 12px; } .acc-danger summary { cursor: pointer; font-weight: 640; }
.ticks { list-style: none; padding: 0; margin: 10px 0 0; } .ticks li { padding-left: 24px; position: relative; margin-bottom: 8px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--green-d); font-weight: 800; }
.acc-side .card { padding: 22px; margin-bottom: 18px; }
.contrib-tabs { margin-bottom: 18px; }

/* ===== Assistants (diagnostic / réglementaire) ===== */
.wiz-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.wiz-card { text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 22px; transition: transform .2s var(--ease-out), box-shadow .25s var(--ease-out); }
.wiz-card:active { transform: scale(.98); }
.wiz-card span { color: var(--ink-soft); font-size: 15px; } .wiz-card em { margin-top: auto; font-style: normal; font-weight: 640; color: var(--green-d); }
@media (hover: hover) and (pointer: fine) { .wiz-card:hover { transform: translateY(-3px); } }
.wiz-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .wiz-title { font-weight: 700; }
.wiz-trail { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.wiz-trail li { font-size: 14px; padding: 8px 12px; border-left: 3px solid var(--green); background: rgba(90, 160, 44, .08); border-radius: 0 8px 8px 0; } .wiz-trail small { display: block; color: var(--ink-soft); }
.wiz-q, .wiz-res { padding: clamp(20px, 3vw, 32px); }
.wiz-q h3, .wiz-res h3 { margin: 4px 0 10px; outline: none; font-size: clamp(20px, 2.6vw, 26px); }
.wiz-step { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 700; }
.wiz-help { color: var(--ink-soft); }
.wiz-opts { display: grid; gap: 10px; margin-top: 16px; }
.wiz-opt { font: inherit; text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); transition: transform .16s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out); }
.wiz-opt:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .wiz-opt:hover { border-color: var(--green); background: rgba(90, 160, 44, .1); } }
.wiz-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.wiz-badge { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 11px; border-radius: 99px; background: rgba(90, 160, 44, .2); color: var(--green-d); }
.wiz-res[data-level="warn"] { border-left: 5px solid var(--amber); } .wiz-res[data-level="warn"] .wiz-badge { background: rgba(232, 185, 35, .25); color: var(--amber); }
.wiz-res[data-level="alert"] { border-left: 5px solid var(--red); } .wiz-res[data-level="alert"] .wiz-badge { background: rgba(181, 67, 44, .2); color: #e0735c; }
.wiz-res[data-level="ok"] { border-left: 5px solid var(--green); } .wiz-res[data-level="info"] { border-left: 5px solid var(--khaki); }
.wiz-res h4 { margin: 20px 0 6px; } .wiz-steps li, .wiz-refs li { margin-bottom: 6px; }
.wiz-see { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.wiz-foot { margin-top: 18px; color: var(--ink-soft); }
@media print { .header, .zonebar, .footer, .wiz-nav, .wiz-trail, .wiz-head { display: none !important; } body { background: #fff !important; color: #000 !important; } .card { box-shadow: none; border: 1px solid #999; } }

/* ===== Veille / agenda ===== */
.vitem, .eitem { padding: 20px 22px; margin-bottom: 14px; }
.vitem h3, .eitem h3 { margin: 8px 0 6px; font-size: 19px; }
.v-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-soft); }
.vb, .vs, .gtag { font-size: 12px; font-weight: 640; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--line); }
.vs { background: rgba(90, 160, 44, .18); color: var(--green-d); border-color: transparent; }
.vitem[data-status="soon"] .vs { background: rgba(232, 185, 35, .22); color: var(--amber); }
.vitem[data-status="check"] .vs, .vs[data-s="check"] { background: rgba(181, 67, 44, .18); color: #d9715a; }
.v-impact { background: rgba(90, 160, 44, .08); padding: 10px 12px; border-radius: 10px; }
.v-ref { color: var(--ink-soft); }
.eitem { display: grid; grid-template-columns: 72px 1fr; gap: 18px; }
.e-date { text-align: center; padding: 8px 0; border-radius: 12px; background: var(--g-brand); color: #fff; align-self: start; }
.e-date b { display: block; font-size: 28px; line-height: 1; } .e-date span { text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.go { font-weight: 640; color: var(--green-d); text-decoration: none; } .go:hover { text-decoration: underline; }
.small-inline { color: var(--ink-soft); font-size: 14px; } .small-n { margin-top: 18px; font-size: 14.5px; }

/* ===== Glossaire ===== */
.az { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; } .az .chip { padding: 5px 11px; }
.gloss { margin: 0; } .gterm { padding: 14px 0; border-top: 1px solid var(--line); transition: background .6s var(--ease-out); }
.gterm.flash { background: rgba(232, 185, 35, .22); }
.gterm dt { font-weight: 700; font-size: 17px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .gterm dt small { font-weight: 400; color: var(--ink-soft); }
.gtag { margin-left: auto; color: var(--ink-soft); } .gterm dd { margin: 6px 0 0; } .gterm dd p { margin: 0 0 6px; }

/* ===== Quiz ===== */
.quiz { padding: clamp(20px, 3vw, 34px); max-width: 760px; }
.q-top { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 14px; font-weight: 640; }
.q-bar { height: 6px; border-radius: 9px; background: var(--line); margin: 8px 0 18px; overflow: hidden; } .q-bar i { display: block; height: 100%; background: var(--g-brand); transition: width .4s var(--ease-out); }
.quiz h3 { outline: none; font-size: clamp(20px, 2.6vw, 25px); margin: 0 0 14px; }
.q-opts { display: grid; gap: 10px; }
.q-opt { font: inherit; text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); transition: transform .16s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out); }
.q-opt:not(:disabled):active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .q-opt:not(:disabled):hover { border-color: var(--green); background: rgba(90, 160, 44, .1); } }
.q-opt[data-state="right"] { background: rgba(90, 160, 44, .25); border-color: var(--green); }
.q-opt[data-state="wrong"] { background: rgba(181, 67, 44, .18); border-color: var(--red); }
.q-fb { margin-top: 16px; } .q-fb .ok b { color: var(--green-d); } .q-fb .ko b { color: var(--red); }
.q-res h3 { font-size: 44px; }

/* ===== Pays ===== */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin: 18px 0; }
.pcard { padding: 22px; } .pcard h3 { margin: 0 0 10px; }
.pfig { margin: 0 0 12px; display: grid; gap: 8px; } .pfig div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.pfig dt { color: var(--ink-soft); font-size: 14px; } .pfig dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .pfig small { font-weight: 400; color: var(--ink-soft); }
.sources { margin-top: 16px; } .sources summary { cursor: pointer; font-weight: 640; } .sources li { margin: 6px 0; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .nmenu, .q-bar i, .gterm, .skip { animation: none; transition: none; } }