/* zhjiana.com - feuille de style partagee (thème clair uniquement) */
:root{
  color-scheme:only light;
  --ink:#2b2b2b;
  --ink2:#454542;
  --muted:#5a5a57;
  --line:#e3e3de;
  --green:#3f7d20;
  --green-d:#2f6317;
  --green-b:#5ea437;
  --tint:#f3f5ef;
  --card:#efefef;
  --head:"Avenir Next Condensed","Franklin Gothic Medium","Roboto Condensed","sans-serif-condensed","Arial Narrow","Liberation Sans Narrow","Helvetica Neue",Arial,sans-serif;
  --body:Charter,"Iowan Old Style",Georgia,Cambria,"Times New Roman",serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:8px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background-color:#fff;color:#2b2b2b;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body.page{margin:0;background-color:#fff;color:#2b2b2b;font-family:var(--body);font-size:1.125rem;line-height:1.7;overflow-x:hidden}
@media (min-width:768px){body.page{font-size:1.1875rem}}
img,video{max-width:100%;height:auto}
a:focus-visible,button:focus-visible{outline:3px solid #1f1f1f;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;color:#1f1f1f;padding:10px 16px;border-radius:8px;z-index:50;font-family:var(--ui)}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:992px;margin-inline:auto;padding-inline:16px}
.col{max-width:682px}
.col-mid{max-width:892px}
.sec{padding-block:clamp(40px,7vw,76px);background-color:#fff;color:#2b2b2b}
.sec-tint{background-color:var(--tint);color:#2b2b2b}
.sec-green{background-color:var(--green);color:#fff}
.sec-lead{padding-top:clamp(32px,5vw,56px)}
.h2.h2-gap{margin-top:clamp(40px,7vw,72px)}
.cta-flush{margin-top:0}

/* ---------- masthead ---------- */
.mast{background-color:#fff;color:#2b2b2b;padding:20px 16px 0;text-align:center}
.mast-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px}
.brand{font-family:var(--head);font-weight:700;font-size:clamp(2.125rem,1.5rem + 2.8vw,3.375rem);line-height:1;letter-spacing:-.01em;color:var(--green);text-decoration:none;padding:6px 0}
.brand:hover{color:var(--green-d)}
.tag{font-family:var(--head);font-weight:700;font-size:.75rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);border:1px solid #8c8c87;border-radius:999px;padding:5px 11px}
.nav{margin-top:8px}
button.nav-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;font-family:var(--head);font-weight:700;font-size:1.125rem;letter-spacing:.02em;background-color:#fff;color:#2b2b2b;border:2px solid #2b2b2b;border-radius:var(--radius);cursor:pointer;transition:background-color .2s,color .2s}
.nav-toggle:hover{background-color:#2b2b2b;color:#fff}
.burger{width:18px;height:12px;background:
  linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
  linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,
  linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.nav-list{display:none;list-style:none;margin:8px 0 0;padding:0}
.nav.open .nav-list{display:block}
.nav-list a{display:block;min-height:44px;padding:11px 8px;font-family:var(--head);font-weight:700;font-size:1.3125rem;line-height:1.3;text-transform:lowercase;letter-spacing:.01em;color:#2b2b2b;text-decoration:none;transition:color .2s}
.nav-list a:hover{color:var(--green)}
.back{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0 8px;font-family:var(--head);font-weight:700;font-size:1.125rem;color:#2b2b2b;text-decoration:none}
.back:hover{color:var(--green)}
@media (min-width:768px){
  button.nav-toggle{display:none}
  .nav-list{display:flex;justify-content:center;gap:4px 38px;margin-top:20px}
  .nav-list a{padding:10px 0;font-size:1.4375rem}
}

/* ---------- hero ---------- */
.hero{background-color:#fff;color:#2b2b2b;text-align:center;padding-top:clamp(28px,6vw,68px)}
.h1{font-family:var(--head);font-weight:700;font-size:clamp(1.75rem,1.2rem + 2.8vw,3rem);line-height:1.13;letter-spacing:.005em;color:#2b2b2b;margin:0 auto;max-width:860px;text-wrap:balance}
.rule{width:88px;height:3px;background-color:var(--green-b);margin:clamp(20px,3vw,30px) auto}
.dek{font-family:var(--head);font-weight:400;font-size:clamp(1.1875rem,1.05rem + .7vw,1.625rem);line-height:1.38;color:#454542;margin:0 auto;max-width:760px}
.byline{font-family:var(--ui);font-size:.8125rem;line-height:1.5;color:var(--muted);margin:16px 0 0}
.hero-fig{margin-top:clamp(24px,4vw,40px)}

/* ---------- figures ---------- */
.fig{margin:0}
.fig img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.fig figcaption{font-family:var(--ui);font-style:italic;font-size:.875rem;line-height:1.5;color:var(--muted);margin-top:10px;text-align:left}
.fig-hero img{aspect-ratio:3/2;object-fit:cover;object-position:35% 40%}
.fig-wide img{aspect-ratio:3/2;object-fit:cover}
.fig-green figcaption{color:#fff}
@media (min-width:768px){
  .fig-hero img{aspect-ratio:2/1;object-position:30% 38%}
  .fig-wide img{aspect-ratio:16/9}
}
.fig-in{margin:clamp(28px,4vw,44px) 0}

/* ---------- article text ---------- */
.prose p{margin:0 0 1.15em;color:#2b2b2b}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:700;color:#2b2b2b}
.h2{font-family:var(--head);font-weight:700;font-size:clamp(1.625rem,1.3rem + 1.5vw,2.375rem);line-height:1.15;letter-spacing:.005em;color:#2b2b2b;margin:0 0 .65em;text-wrap:balance}
.h2-rule::before{content:"";display:block;width:56px;height:3px;background-color:var(--green-b);margin-bottom:16px}
.sec-green .h2{color:#fff}
.sec-green .h2-rule::before{background-color:#fff}
.h3{font-family:var(--head);font-weight:700;font-size:clamp(1.3125rem,1.15rem + .7vw,1.625rem);line-height:1.2;color:#2b2b2b;margin:1.8em 0 .5em}
.center{text-align:center}
.lede{font-size:1.0625rem;color:#454542;margin:0 auto 1.6em;max-width:34em}

.steps{counter-reset:s;list-style:none;margin:1.6rem 0 0;padding:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;padding:16px 0;border-top:1px solid var(--line);color:#2b2b2b}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);font-family:var(--head);font-weight:700;font-size:2.375rem;line-height:1;color:var(--green-b)}

.plain{list-style:none;margin:1.2rem 0 0;padding:0}
.plain li{position:relative;padding:14px 0 14px 34px;border-top:1px solid #d9dfd0;color:#2b2b2b}
.plain li:last-child{border-bottom:1px solid #d9dfd0}
.plain li::before{content:"";position:absolute;left:4px;top:1.2em;width:12px;height:12px;border-radius:3px;background-color:var(--green-b)}

/* ---------- video ---------- */
.vid{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background-color:#d9ddd3}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
@media (min-width:768px){.vid{aspect-ratio:9/16}}

/* ---------- buttons / CTA ---------- */
.cta{text-align:center;margin:clamp(28px,4vw,40px) 0 0}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:14px 26px;background-color:var(--green);color:#fff;font-family:var(--head);font-weight:700;font-size:1.375rem;letter-spacing:.02em;line-height:1.2;text-align:center;text-decoration:none;border:2px solid var(--green);border-radius:var(--radius);box-shadow:0 2px 0 rgba(0,0,0,.12);cursor:pointer;transition:background-color .2s,transform .2s,box-shadow .2s}
.btn:hover{background-color:var(--green-d);border-color:var(--green-d);transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.16)}
button.btn{background-color:var(--green)}
.btn[disabled]{background-color:#8aa77b;border-color:#8aa77b;color:#fff;cursor:not-allowed;transform:none;box-shadow:none}
.btn-inv{background-color:#fff;color:var(--green-d);border-color:#fff}
.btn-inv:hover{background-color:#f0f5ea;border-color:#f0f5ea}
button.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;background-color:#fff;color:#2b2b2b;font-family:var(--head);font-weight:700;font-size:1.125rem;border:2px solid #2b2b2b;border-radius:var(--radius);cursor:pointer;transition:background-color .2s,color .2s}
.btn-ghost:hover{background-color:#2b2b2b;color:#fff}
.cta .btn-note{font-family:var(--ui);font-size:.8125rem;line-height:1.5;color:var(--muted);margin:10px auto 0;max-width:36em;background:none;border:0;padding:0}
.sec-green .cta .btn-note{color:#fff}
@media (min-width:768px){.cta-left{text-align:left}.cta-left .btn-note{margin-left:0}}
.sec-green a:focus-visible{outline-color:#fff}
@media (min-width:480px){.btn{display:inline-flex;width:auto;min-width:300px}}

/* ---------- table ---------- */
.tbl-wrap{margin:1.6rem 0 0;overflow-x:auto;border:1px solid #d6d6d0;border-radius:var(--radius);background-color:#fff}
.tbl{width:100%;border-collapse:collapse;font-family:var(--ui);font-size:.9375rem;line-height:1.5;color:#2b2b2b}
.tbl caption{caption-side:top;text-align:left;padding:14px 16px;font-family:var(--head);font-weight:700;font-size:1.125rem;color:#2b2b2b;background-color:#fff;border-bottom:1px solid #d6d6d0}
.tbl thead th{background-color:#2b2b2b;color:#fff;text-align:left;font-family:var(--head);font-weight:700;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;padding:12px 16px}
.tbl tbody th,.tbl tbody td{padding:14px 16px;vertical-align:top;text-align:left;border-top:1px solid #e4e4de}
.tbl tbody th{font-family:var(--head);font-weight:700;font-size:1.0625rem;color:var(--green-d);width:30%}
.tbl tbody tr:nth-child(even){background-color:#f6f6f3}
.tbl tbody tr:first-child th,.tbl tbody tr:first-child td{border-top:0}

/* ---------- quiz ---------- */
.quiz{max-width:650px;margin:0 auto;color:#2b2b2b}
.qtext{font-family:var(--head);font-weight:400;font-size:clamp(1.625rem,1.3rem + 1.6vw,2.375rem);line-height:1.15;color:#2b2b2b;text-align:center;margin:0 0 18px}
.qtext:focus{outline:none}
.quiz-fig img{aspect-ratio:16/8;object-fit:cover;object-position:50% 30%}
.opts{display:grid;gap:10px;margin-top:10px}
button.opt{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:10px 14px 10px 12px;background-color:var(--card);color:#2b2b2b;font-family:var(--head);font-weight:400;font-size:1.25rem;line-height:1.25;text-align:left;border:2px solid transparent;border-radius:var(--radius);cursor:pointer;transition:background-color .2s,border-color .2s}
.opt:hover{background-color:#e4e4e4}
@media (min-width:768px){button.opt{font-size:1.4375rem;min-height:62px}}
.opt-box{position:relative;flex:none;width:30px;height:30px;background-color:#fff;border:1px solid #c4c4c0;border-radius:6px;transition:background-color .2s,border-color .2s}
.opt[aria-checked="true"]{background-color:#e8f1e1;border-color:var(--green)}
.opt[aria-checked="true"] .opt-box{background-color:var(--green);border-color:var(--green)}
.opt[aria-checked="true"] .opt-box::after{content:"";position:absolute;left:10px;top:5px;width:8px;height:15px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.explain{margin:16px 0 0;padding:2px 0 2px 14px;border-left:3px solid var(--green-b);font-size:1rem;line-height:1.6;color:#2b2b2b}
.quiz-actions{margin-top:18px;text-align:center}
.quiz-actions .btn{min-width:0}
.qprog{margin-top:22px;text-align:center}
.qcount{display:block;font-family:var(--head);font-weight:700;font-size:1.0625rem;color:#2b2b2b;margin-bottom:8px}
.bar{height:6px;max-width:260px;margin:0 auto;background-color:#e1e1dc;border-radius:999px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background-color:var(--green-b);border-radius:999px;transition:width .3s}
.result{padding-top:4px}
.result p{margin:0 0 1em}
.rlist{list-style:none;margin:1.2rem 0 1.4rem;padding:0}
.rlist li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line);font-size:1rem;line-height:1.55;color:#2b2b2b}
.rlist li:last-child{border-bottom:1px solid var(--line)}
.rlist li::before{content:"";position:absolute;left:4px;top:1.15em;width:10px;height:10px;border-radius:2px;background-color:var(--green-b)}
.result-actions{display:flex;flex-direction:column;align-items:center;gap:18px}
.quiz-noscript{font-size:1rem;text-align:center;color:#454542}

/* ---------- final band ---------- */
.sec-green .prose p{color:#fff}

/* ---------- footer ---------- */
.footer{background-color:#fff;color:var(--muted);font-family:var(--ui);font-size:13px;line-height:1.65;padding:clamp(40px,6vw,64px) 0 56px}
.footer-grid{display:grid;gap:18px 56px;align-content:start}
.footer .contact_info p{margin:0;color:var(--muted)}
.footer .contact_info p:first-child{color:#2b2b2b;font-weight:700}
.footer .policies ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 14px}
.footer .policies a{display:inline-flex;align-items:center;min-height:44px;color:#2b2b2b;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#9a9a95;transition:color .2s,text-decoration-color .2s}
.footer .policies a:hover{color:var(--green);text-decoration-color:var(--green)}
.footer .publisher_note{margin:0;color:var(--muted)}
@media (min-width:768px){
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-areas:"c n" "p n"}
  .footer .contact_info{grid-area:c}
  .footer .policies{grid-area:p}
  .footer .publisher_note{grid-area:n}
}

/* ---------- legal pages ---------- */
.legal{padding-block:clamp(32px,6vw,64px) clamp(40px,7vw,72px);background-color:#fff;color:#2b2b2b}
.legal .h1{text-align:left;margin:0;max-width:none;font-size:clamp(1.875rem,1.4rem + 2.2vw,2.75rem)}
.dateline,.legal .prose .dateline{font-family:var(--ui);font-size:.875rem;line-height:1.5;color:var(--muted);margin:14px 0 0}
.legal .rule{margin:24px 0 28px}
.legal .prose h2{font-family:var(--head);font-weight:700;font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem);line-height:1.2;color:#2b2b2b;margin:2em 0 .5em}
.legal .prose ul{margin:0 0 1.2em;padding-left:1.3em;list-style:disc}
.legal .prose li{margin:0 0 .5em;color:#2b2b2b}
.legal .prose p{font-size:1.0625rem}
.legal .prose li{font-size:1.0625rem}
.legal .prose a{color:var(--green-d);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.legal .prose a:hover{color:#1f4510}
.legal .prose address{font-style:normal;margin:0 0 1.2em;font-size:1.0625rem}