/* =========================================================================
   Zinc Studio — feuille de style du site vitrine
   Applique zinc-studio/design-system.md :
   - la structure est une MATIÈRE (rail, surface, contour), la couleur est une DONNÉE
   - accent laiton contrôlé au contraste (valeur différente selon le fond)
   - polices auto-hébergées, aucun appel réseau externe (RGPD : aucun tiers)
   ========================================================================= */

/* ---------- polices (OFL, servies depuis ce domaine) ---------- */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonts/archivo-variable-latin.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/source-serif-4-italic-latin.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root{
  /* fonds & matières — édition papier (crème), îlots vert bouteille */
  --fond:#F2EDE4; --fond-2:#EBE4D6; --carte:#FBF8F2; --ligne:#DCD5C6;
  --vert:#1E3A34; --vert-f:#162B27; --vert-n:#10201C; --ligne-s:#2C4A43;
  --creme:#F2EDE4;
  /* texte */
  --encre:#1B2B26; --doux:#4A5A54; --sourd:#7A8078;
  --doux-s:#A8BDB5; --sourd-s:#7A9A8F;      /* sur fond vert */
  /* accent : valeur contrôlée au contraste selon le fond */
  --laiton:#A8861B;        /* sur crème — filets, fonds, labels ≥13px 500 */
  --laiton-clair:#C9A227;  /* sur vert */
  --laiton-txt:#DDB84A;    /* texte accentué sur vert */
  --zinc:#75818B;
  /* données uniquement — jamais pour structurer la page */
  --ok:#2E8F68; --warn:#B98A16; --err:#C25546;
  --ok-s:#4CAF85; --warn-s:#DDB84A; --err-s:#D96C5A;
  /* formes & rythme */
  --r-s:10px; --r-m:16px; --r-l:28px;
  --e1:8px; --e2:16px; --e3:24px; --e4:40px; --e5:64px; --e6:104px;
  --ombre:0 10px 40px rgba(27,43,38,.14);
  --ombre-s:0 10px 40px rgba(0,0,0,.25);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--fond);color:var(--encre);
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16.5px;line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--laiton);color:#fff}
:focus-visible{outline:2.5px solid var(--vert);outline-offset:2px;border-radius:4px}
/* sur les ilots vert bouteille, c'est l'accent laiton qui devient lisible (6,16:1) */
footer :focus-visible,.band-vert :focus-visible,.brief :focus-visible,.preuve :focus-visible,.encart :focus-visible{outline-color:var(--laiton-clair)}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.mono{font-family:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace}
.serif{font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-style:italic}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:99;background:var(--vert);color:var(--creme);padding:10px 16px;border-radius:var(--r-s)}

/* ---------- titraille ---------- */
h1{font-weight:800;font-size:clamp(34px,5vw,56px);line-height:1.07;letter-spacing:-.015em;color:var(--vert)}
h2{font-weight:700;font-size:clamp(27px,3.4vw,36px);line-height:1.15;letter-spacing:-.01em;color:var(--vert)}
h3{font-weight:700;font-size:19px;line-height:1.3}
.eyebrow{
  font-family:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;
  font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--doux);margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
/* le laiton reste l'accent, mais en FILET : sur creme il est interdit en texte (charte) */
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--laiton);flex-shrink:0}
.eyebrow.on-vert{color:var(--laiton-txt)}
.eyebrow.on-vert::before{background:var(--laiton-clair)}
.lead{font-size:19px;color:var(--doux);max-width:62ch}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:30;
  background:rgba(242,237,228,.93);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ligne);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--vert)}
.brand .lock{display:flex;flex-direction:column;line-height:1.15}
.brand b{font-weight:800;letter-spacing:.15em;font-size:16.5px}
.brand i{font-family:'IBM Plex Mono',monospace;font-style:normal;font-weight:400;letter-spacing:.22em;font-size:10.5px;color:var(--doux)}
.nav-links{display:flex;gap:8px;align-items:center}
.nav-links a{
  color:var(--doux);text-decoration:none;font-size:15px;font-weight:500;
  padding:8px 12px;border-radius:var(--r-s);
}
.nav-links a:hover{color:var(--encre);background:rgba(27,43,38,.05)}
.nav-links a[aria-current="page"]{color:var(--encre);box-shadow:inset 0 -2px 0 var(--laiton)}
.cta{
  background:var(--vert);color:var(--creme);font-weight:700;font-size:15px;
  padding:11px 20px;border-radius:var(--r-s);text-decoration:none;display:inline-block;
  border:1.5px solid var(--vert);
}
.cta:hover{background:var(--vert-f);border-color:var(--vert-f);color:var(--creme)}
.nav-links .cta{color:var(--creme)}
.nav-links .cta:hover{background:var(--vert-f);color:var(--creme)}
.btn2{
  border:1.5px solid var(--zinc);color:var(--encre);font-weight:600;font-size:15px;
  padding:11px 20px;border-radius:var(--r-s);text-decoration:none;display:inline-block;background:transparent;
}
.btn2:hover{border-color:var(--vert);background:rgba(27,43,38,.04)}
.burger{display:none;background:none;border:1.5px solid var(--ligne);border-radius:var(--r-s);padding:11px 12px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--encre);border-radius:2px}
.burger span+span{margin-top:5px}
@media(max-width:900px){
  .burger{display:block}
  .nav-links{
    position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--fond);border-bottom:1px solid var(--ligne);padding:12px 24px 20px;
    box-shadow:var(--ombre);
  }
  .nav-links[hidden]{display:none}
  .nav-links a{padding:12px 4px;font-size:16.5px}
  .nav-links .cta{text-align:center;margin-top:8px;padding:13px 20px}
}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,7vw,84px) 0 clamp(40px,6vw,68px)}
.hero .cols{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
@media(max-width:940px){.hero .cols{grid-template-columns:1fr;gap:40px}}
.hero .lead{margin:22px 0 30px;font-size:19.5px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* le Z se dessine à l'ouverture */
.zdraw path{stroke-dasharray:620;stroke-dashoffset:620;animation:draw .9s cubic-bezier(.22,1,.36,1) forwards}
.zdraw path:nth-of-type(2){animation-delay:.26s}
.zdraw path:nth-of-type(3){animation-delay:.48s}
.zdraw circle{transform:scale(0);transform-origin:262px 228px;animation:pop .25s cubic-bezier(.34,1.56,.64,1) .92s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}

/* ---------- carte « message du matin » (îlot sombre) ---------- */
.brief{
  background:var(--vert-f);border:1px solid var(--ligne-s);color:var(--creme);
  border-radius:var(--r-l);padding:24px 24px 20px;box-shadow:var(--ombre-s);
  max-width:460px;margin-left:auto;
}
@media(max-width:940px){.brief{margin:0 auto}}
.brief .from{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.brief .avatar{width:36px;height:36px;border-radius:50%;background:var(--creme);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brief .from .n{font-weight:700;font-size:14.5px}
.brief .from .t{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--doux-s);letter-spacing:.06em}
.brief .tag{display:inline-block;border:1px solid var(--ligne-s);border-radius:999px;padding:1px 8px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux-s)}
.brief .row{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.9;
  color:var(--doux-s);
}
.brief .row b{color:var(--creme);font-weight:400;font-variant-numeric:tabular-nums}
.brief .row .hl{color:var(--laiton-txt)}
.brief .row .ok{color:var(--ok-s)}
.brief .sep{height:1px;background:var(--ligne-s);margin:12px 0}
.brief .jauge{margin-top:14px;background:var(--vert-n);border-radius:12px;padding:12px 15px}
.brief .jauge .lab{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--doux-s);margin-bottom:8px}
.brief .jauge .bar{height:13px;border-radius:7px;background:var(--ligne-s);overflow:hidden}
.brief .jauge .fill{height:100%;border-radius:7px;background:var(--ok-s)}
.brief .live{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--laiton-txt)}
.brief .dot{width:7px;height:7px;border-radius:50%;background:var(--laiton-clair);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- bande preuve ---------- */
.preuve{background:var(--vert);color:var(--creme)}
.preuve .row{display:flex;gap:24px;align-items:center;justify-content:space-between;padding:22px 0;flex-wrap:wrap}
.preuve p{font-size:15px;color:var(--doux-s);max-width:60ch}
.preuve p b{color:var(--creme);font-weight:700}
.preuve .etabs{display:flex;gap:22px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;color:var(--doux-s)}

/* ---------- sections ---------- */
section{padding:clamp(56px,8vw,88px) 0}
section.tight{padding:clamp(40px,5vw,56px) 0}
.sec-head{max-width:660px;margin-bottom:var(--e4)}
.sec-head p{color:var(--doux)}
.band{background:var(--fond-2);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.band-vert{background:var(--vert);color:var(--creme)}
.band-vert h2{color:var(--creme)}
.band-vert .sec-head p{color:var(--doux-s)}

/* ---------- chiffres clés ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{border-top:2px solid var(--laiton);padding-top:14px}
.band-vert .stat{border-top-color:var(--laiton-clair)}
.stat .v{font-weight:800;font-size:clamp(30px,4vw,40px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--vert)}
.band-vert .stat .v{color:var(--creme)}
.stat .v small{font-size:.5em;font-weight:700;margin-left:2px}
.stat .k{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);margin:10px 0 6px}
.band-vert .stat .k{color:var(--laiton-txt)}
.stat p{font-size:13.5px;color:var(--doux);line-height:1.5}
.band-vert .stat p{color:var(--doux-s)}

/* ---------- outils : la MATIÈRE encode le statut ---------- */
.outils{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:960px){.outils{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.outils{grid-template-columns:1fr}}
.outil{
  background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-m);
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;
  border-top:3px solid var(--laiton);           /* rail PLEIN = en service */
  text-decoration:none;color:inherit;
}
a.outil:hover{box-shadow:var(--ombre);transform:translateY(-2px)}
a.outil{transition:box-shadow .2s,transform .2s}
.outil.futur{
  background:transparent;border-style:dashed;border-top:3px dashed var(--laiton); /* rail TIRETÉ = à venir */
}
.outil .statut{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);display:flex;align-items:center;gap:7px;
}
.outil .statut::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex-shrink:0}
.outil.futur .statut::before{background:transparent;border:1.5px dashed var(--zinc)}
.outil h3{color:var(--vert)}
.outil p{font-size:14.8px;color:var(--doux);flex-grow:1}
.outil .plus{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--doux);border-top:1px solid var(--ligne);padding-top:12px;text-transform:uppercase}
.outil.futur .plus{border-top-style:dashed}

/* ---------- fiche outil détaillée (page outils) ---------- */
.fiche{
  background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-l);
  padding:clamp(26px,4vw,40px);margin-bottom:20px;border-left:4px solid var(--laiton);
  scroll-margin-top:96px;
}
.fiche.futur{background:transparent;border-style:dashed;border-left:4px dashed var(--laiton)}
.fiche .head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.fiche h2{font-size:clamp(23px,2.8vw,29px)}
.fiche .cols{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:start}
@media(max-width:860px){.fiche .cols{grid-template-columns:1fr;gap:24px}}
.fiche p+p{margin-top:12px}
.fiche p{color:var(--doux)}
.fiche .apport{list-style:none;display:flex;flex-direction:column;gap:10px}
.fiche .apport li{position:relative;padding-left:26px;font-size:15px;color:var(--encre)}
.fiche .apport li::before{
  content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--laiton);border-radius:2px;
}
.encart{background:var(--vert);color:var(--creme);border-radius:var(--r-m);padding:22px}
.encart .k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton-txt);margin-bottom:12px}
.encart .l{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:7px 0;border-bottom:1px solid var(--ligne-s);font-variant-numeric:tabular-nums}
.encart .l:last-child{border-bottom:none}
.encart .l span:first-child{color:var(--doux-s)}
.encart .l b{font-weight:700}
.encart .note{font-size:12.5px;color:var(--doux-s);margin-top:12px;line-height:1.5}

/* ---------- badges catalogue ---------- */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:9px;background:var(--carte);
  border:1.5px solid var(--ligne);border-radius:999px;padding:7px 16px 7px 8px;text-decoration:none;
}
.pill .r{width:32px;height:32px;border-radius:50%;background:var(--vert);color:var(--creme);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.pill.on .r{background:var(--laiton);color:#fff}
.pill .n{font-size:14px;font-weight:600;line-height:1.2;display:block}
.pill .s{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);display:block}

/* ---------- étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--ligne);border-radius:var(--r-m);padding:26px 24px;background:var(--carte)}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;color:var(--doux);
}
.step h3{margin:10px 0 8px;color:var(--vert)}
.step p{font-size:14.8px;color:var(--doux)}

/* ---------- deux colonnes avant/après ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.duo .col{border-radius:var(--r-m);padding:26px 24px}
.duo .avant{background:transparent;border:1px dashed var(--ligne)}
.duo .apres{background:var(--carte);border:1px solid var(--ligne);border-top:3px solid var(--laiton)}
.duo h3{margin-bottom:16px;color:var(--vert)}
.duo ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.duo li{font-size:15px;color:var(--doux);padding-left:24px;position:relative}
.duo .avant li::before{content:"—";position:absolute;left:0;color:var(--zinc)}
.duo .apres li::before{content:"→";position:absolute;left:0;color:var(--laiton);font-weight:700}

/* ---------- îlot histoire / citation ---------- */
.story{background:var(--vert);border-radius:var(--r-l);padding:clamp(30px,5vw,52px);color:var(--creme)}
.story .serif{font-size:20px;line-height:1.8;color:var(--creme)}
.story .serif+.serif{margin-top:16px}
.story .sig{margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;color:var(--laiton-txt)}

/* ---------- honnêteté ---------- */
.franc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.franc{grid-template-columns:1fr}}
.franc .item{border-left:2px solid var(--zinc);padding-left:18px}
.band-vert .franc .item{border-left-color:var(--sourd-s)}
.franc .item b{display:block;font-weight:700;margin-bottom:6px}
.franc .item p{font-size:14.8px;color:var(--doux)}
.band-vert .franc .item p{color:var(--doux-s)}

/* ---------- CTA final ---------- */
.final{text-align:center;max-width:720px;margin:0 auto}
.final .lead{margin:18px auto 30px}
.final .hero-ctas{justify-content:center}

/* ---------- formulaire ---------- */
.form-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
@media(max-width:860px){.form-grid{grid-template-columns:1fr;gap:32px}}
form{display:flex;flex-direction:column;gap:16px}
.field label{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--doux);margin-bottom:7px;
}
input,textarea,select{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--r-s);color:var(--encre);
  font-family:'Archivo',Helvetica,Arial,sans-serif;font-size:16px;padding:13px 15px;width:100%;
}
textarea{resize:vertical;min-height:120px}
input:focus,textarea:focus,select:focus{outline:2.5px solid var(--laiton);outline-offset:1px;border-color:transparent}
button[type=submit]{
  background:var(--vert);color:var(--creme);font-weight:700;font-size:16px;padding:15px 28px;
  border:none;border-radius:var(--r-s);cursor:pointer;font-family:'Archivo',Helvetica,Arial,sans-serif;
}
button[type=submit]:hover{background:var(--vert-f)}
.consent{font-size:13.5px;color:var(--doux);border-left:2px solid var(--ligne);padding-left:14px}
/* piege a robots : invisible a l'ecran et au lecteur d'ecran, doit rester vide */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:13px;color:var(--doux);line-height:1.55}
.coord{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-m);padding:26px 24px}
.coord dl{display:flex;flex-direction:column;gap:16px}
.coord dt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin-bottom:4px}
.coord dd{font-size:15.5px}
.coord a{color:var(--encre)}

/* ---------- pages de texte (légal) ---------- */
.doc{max-width:760px}
.doc h2{font-size:clamp(22px,2.6vw,27px);margin:var(--e4) 0 var(--e2)}
.doc h3{margin:var(--e3) 0 var(--e1);color:var(--vert);font-size:17.5px}
.doc p,.doc li{color:var(--doux)}
.doc p{margin-bottom:14px}
.doc ul,.doc ol{margin:0 0 16px 22px;display:flex;flex-direction:column;gap:8px}
.doc a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--laiton);text-underline-offset:3px}
.doc .maj{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--doux);text-transform:uppercase}
.doc table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:14.5px}
.doc th,.doc td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--ligne);vertical-align:top}
.doc th{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);font-weight:400}
.doc td{color:var(--doux)}
.tablewrap{overflow-x:auto}
@media(max-width:760px){
  .tablewrap{position:relative}
  .tablewrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:26px;pointer-events:none;
    background:linear-gradient(to left,var(--fond),transparent)}
}
.encadre{
  background:var(--carte);border:1px solid var(--ligne);border-left:3px solid var(--laiton);
  border-radius:var(--r-s);padding:20px 22px;margin:24px 0;
}
.encadre p:last-child{margin-bottom:0}
.encadre p{color:var(--encre)}

/* ---------- pied de page ---------- */
footer{background:var(--vert);color:var(--creme);margin-top:0}
.frise{padding:20px 0 6px;opacity:.45}
.foot{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px 0 34px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;color:var(--doux-s);
}
.foot a{color:var(--doux-s);text-decoration:none}
.foot a:hover{color:var(--creme);text-decoration:underline}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- révélation au défilement ---------- */
.reveal{transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.js .reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none}

@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!important;transform:none!important}
  .zdraw path{stroke-dashoffset:0}
  .zdraw circle{transform:scale(1)}
}