/* =========================================================================
   VINCEAUX — thème du blog
   Titres : Clash Display · Texte : Switzer · Code : Fragment Mono
   Palette « carnet » élargie : un vert de structure + accents braise, teal,
   ambre, berry, indigo.
   ========================================================================= */
:root{
  /* surfaces */
  --bg:#ffffff; --bg-alt:#F5F3EA; --card:#ffffff;
  --line:#E7E4D9; --line-2:#D6D3C5;
  /* encre */
  --ink:#16211B; --body:#48514B; --muted:#7C857D;
  /* accents */
  --blue:#2F5D4A; --blue-d:#244A3B; --blue-soft:#E8F1EB; --blue-line:#C7DED1;
  --teal:#2C6E71; --teal-soft:#E6F2F2; --teal-line:#BADFDF;
  --violet:#8C4A3F; --violet-soft:#F6EAE7; --violet-line:#E4C9C3;
  --amber:#B06A2E; --amber-soft:#F8EEE0; --amber-line:#E8D2B2;
  --ember:#C0451D; --ember-soft:#FBEAE2; --ember-line:#F0CDBE;
  --berry:#8A3B5B; --berry-soft:#F6E9EF; --berry-line:#E3C7D4;
  --gold:#C08A2E; --gold-soft:#FBF2E0; --gold-line:#EFDDB6;
  --indigo:#3D4E8F; --indigo-soft:#EAEDF9; --indigo-line:#C9D1EE;
  --red:#B42318; --red-soft:#FDECEA;
  /* dégradés */
  --grad:linear-gradient(115deg,#244A3B 0%,#2F5D4A 45%,#2C6E71 100%);
  --grad-warm:linear-gradient(115deg,#C0451D 0%,#B06A2E 50%,#C08A2E 100%);
  --grad-spectrum:linear-gradient(115deg,#2F5D4A 0%,#2C6E71 26%,#3D4E8F 50%,#8A3B5B 74%,#C0451D 100%);
  --shadow-1:0 1px 2px rgba(16,24,40,.04);
  --shadow-2:0 24px 46px -28px rgba(16,24,40,.42);
  --r:16px; --rs:10px;
  --sans:"Switzer",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Clash Display","Switzer",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --railw:212px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;color:var(--body);font-family:var(--sans);font-size:16.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 560px at 88% -12%,rgba(44,110,113,.09),transparent 62%),
    radial-gradient(900px 520px at 2% -6%,rgba(192,69,29,.07),transparent 60%),
    var(--bg);
  background-attachment:fixed}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);letter-spacing:-.02em;line-height:1.14;margin:0}
a{color:inherit}
code,pre,.mono{font-family:var(--mono)}
::selection{background:var(--ember-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}

/* titres dégradés animés */
.grad-text{background-image:var(--grad-spectrum);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradshift 11s ease-in-out infinite}

/* progression */
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-spectrum);
  background-size:220% 100%;z-index:60;animation:gradshift 6s linear infinite}

/* sommaire horizontal — uniquement en responsive */
.tocbar{display:none;position:sticky;top:66px;z-index:45;background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tocbar::-webkit-scrollbar{display:none}
.tocbar .in{margin:0 auto;padding:9px 28px;display:flex;gap:4px;width:max-content;max-width:100%}
.tocbar a{font-family:var(--sans);font-size:12.5px;color:var(--muted);text-decoration:none;
  padding:6px 12px;border-radius:999px;border:1px solid transparent;flex:none;white-space:nowrap;transition:.15s}
.tocbar a:hover{color:var(--ink);background:var(--bg-alt)}
.tocbar a.active{color:var(--ink);border-color:var(--blue-line);background:var(--blue-soft)}
.tocbar a .n{font-family:var(--mono);font-size:10.5px;color:var(--blue);margin-right:6px}

/* sommaire de droite « collant » (desktop) + colonne de lecture élargie */
.shell{max-width:1360px;margin:0 auto;padding:0 28px;display:grid;
  grid-template-columns:110px minmax(0,860px) minmax(0,1fr) var(--railw);
  column-gap:0;align-items:start}
#rail{grid-column:4;position:sticky;top:88px;height:auto;max-height:calc(100vh - 120px);overflow-y:auto;
  padding:0 0 20px 20px;border-left:1px solid var(--line);font-size:12.5px}
#rail .ttl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
#rail a{display:block;color:var(--muted);text-decoration:none;padding:7px 0 7px 13px;
  border-left:2px solid transparent;line-height:1.35;transition:color .15s,border-color .15s,background .15s}
#rail a:hover{color:var(--ink)}
#rail a.active{color:var(--ink);border-left-color:var(--blue);background:var(--bg-alt)}
#rail a .n{color:var(--blue);font-family:var(--mono);font-size:10.5px;margin-right:8px}

.page{grid-column:2;max-width:860px;margin:0;padding:0 0 96px}

/* liste sans sommaire : pleine largeur */
.shell.no-rail{display:block;max-width:1140px}
.shell.no-rail .page{max-width:1140px;margin:0 auto}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.nav .bar{max-width:1140px;margin:0 auto;padding:0 28px;height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:2px;font-family:var(--display);
  font-weight:700;font-size:21px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand .dot{display:inline-block;width:.30em;height:.30em;border-radius:50%;
  background:var(--grad-warm);margin-left:.10em;vertical-align:.10em;animation:pulseDot 3.6s ease-in-out infinite}
.brand-tag{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-left:11px;padding-left:12px;
  border-left:1px solid var(--line-2);text-decoration:none;transition:color .15s}
.brand-tag:hover{color:var(--ink)}
.brandrow{display:inline-flex;align-items:center}
.navlinks{display:flex;align-items:center;gap:2px}
.navlinks > *{font-size:14px;font-weight:500;color:var(--body);text-decoration:none;
  padding:8px 13px;border-radius:8px;transition:.14s;position:relative;display:inline-block}
.navlinks a:hover{color:var(--ink);background:var(--bg-alt)}
.navlinks .active{color:var(--ink)}
.navlinks .active::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:3px;
  border-radius:3px;background:var(--grad-warm)}
.navlinks .back{display:inline-flex;align-items:center;padding:8px 9px;color:var(--muted)}
.navlinks .back svg{width:17px;height:17px}
.navlinks .back:hover{color:var(--ink);background:var(--bg-alt)}
.navlinks .cta{margin-left:10px;background:var(--blue);color:#fff;font-weight:600;padding:10px 18px}
.navlinks .cta:hover{background:var(--blue-d);color:#fff}
.burger{display:none;background:#fff;border:1px solid var(--line-2);border-radius:8px;
  width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:20px;height:20px;color:var(--ink)}
@media(max-width:900px){
  .navlinks{display:flex}
  .navlinks span.active{display:none}
}

/* article */
@media(max-width:1159px){
  .tocbar{display:block}
  .shell{display:block;max-width:1140px}
  .page{max-width:760px;margin:0 auto}
  #rail{display:none}
  h2{scroll-margin-top:122px}
}
.post{padding-top:42px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ec,var(--blue));background:var(--eb,var(--blue-soft));
  border:1px solid var(--el,var(--blue-line));border-radius:999px;padding:6px 13px;margin-bottom:20px}
h1{font-weight:700;font-size:clamp(32px,5.4vw,50px);letter-spacing:-.018em}
.standfirst{font-size:20px;color:var(--body);margin:20px 0 24px;max-width:640px}
.byline{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:0;
  padding-bottom:30px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tagchip{font-family:var(--mono);font-size:10.5px;text-transform:lowercase;color:var(--blue);
  background:var(--blue-soft);border-radius:999px;padding:2px 9px}

p{margin:18px 0;color:var(--body)}
strong{font-weight:600;color:var(--ink)}
a{color:var(--blue)}
.post a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--blue-line);transition:text-decoration-color .2s,color .2s}
.post a:hover{text-decoration-color:var(--ember);color:var(--ember)}
code{font-size:.86em;background:var(--bg-alt);border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--ink)}

h2{font-weight:700;font-size:clamp(23px,3.4vw,31px);margin:64px 0 6px;scroll-margin-top:84px}
.sec-num{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--sn,var(--blue));background:var(--sn-soft,var(--blue-soft));
  border:1px solid var(--sn-line,var(--blue-line));border-radius:7px;padding:2px 8px;
  margin-right:12px;vertical-align:2px;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
h2:hover .sec-num{transform:translateY(-2px) rotate(-2deg)}
/* les sections alternent les couleurs */
.post > h2:nth-of-type(3n+2) .sec-num{--sn:var(--teal);--sn-soft:var(--teal-soft);--sn-line:var(--teal-line)}
.post > h2:nth-of-type(3n+3) .sec-num{--sn:var(--ember);--sn-soft:var(--ember-soft);--sn-line:var(--ember-line)}
h3{font-family:var(--display);font-weight:600;font-size:20px;margin:34px 0 4px}
blockquote{margin:30px 0;padding:6px 0 6px 22px;position:relative;
  font-family:var(--display);font-weight:600;font-size:21px;line-height:1.45;color:var(--ink)}
blockquote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
  background:var(--grad-spectrum);background-size:100% 220%;animation:gradslide 8s ease-in-out infinite}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}
ul,ol{padding-left:22px}
li{margin:6px 0}

/* encarts */
.note{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:var(--rs);padding:16px 20px;margin:26px 0;font-size:15.5px;color:var(--body);
  box-shadow:var(--shadow-1);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.note:hover{transform:translateX(3px);box-shadow:0 14px 30px -22px rgba(16,24,40,.45)}
.note .lb{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);margin-bottom:6px;font-weight:500}
.note.ok{border-left-color:var(--teal)} .note.ok .lb{color:var(--teal)}
.note.warn{border-left-color:var(--amber)} .note.warn .lb{color:var(--amber)}
.note.bad{border-left-color:var(--red)} .note.bad .lb{color:var(--red)}

/* média */
figure.fig{margin:30px 0}
figure.fig img{width:100%;height:auto;display:block;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
figure.fig:hover img{transform:translateY(-3px) scale(1.008);box-shadow:var(--shadow-2)}
figure.fig figcaption{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:11px;
  display:flex;gap:9px;align-items:baseline;line-height:1.5}
figure.fig figcaption::before{content:"";width:15px;height:2px;border-radius:2px;flex:none;
  background:var(--grad-warm);transform:translateY(-3px)}
figure.fig.wide{margin-left:-0px}

/* panneaux interactifs */
.demo{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  margin:28px 0;box-shadow:var(--shadow-1);position:relative;overflow:hidden}
.demo::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-spectrum);
  background-size:220% 100%;animation:gradshift 9s ease-in-out infinite;opacity:.9}
.demo .cap{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:18px}
.demo .cap::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--grad-warm)}
textarea{width:100%;min-height:76px;resize:vertical;background:var(--bg-alt);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--rs);padding:12px 14px;font-family:var(--mono);
  font-size:13px;line-height:1.6}
textarea:focus{outline:none;border-color:var(--blue);background:var(--card);box-shadow:0 0 0 4px rgba(47,93,74,.12)}
.hint{font-size:11.5px;color:var(--muted);margin-top:7px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.chip{background:var(--card);border:1px solid var(--line-2);color:var(--body);border-radius:999px;
  padding:6px 13px;font-size:12.5px;cursor:pointer;transition:.18s}
.chip:hover{border-color:var(--ember);color:var(--ember);transform:translateY(-1px)}
.spacer{flex:1}
label.thr{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
input[type=range]{accent-color:var(--blue);width:140px}
button.run{background:var(--blue);color:#fff;border:0;border-radius:var(--rs);padding:10px 20px;
  font-family:var(--sans);font-weight:600;font-size:13.5px;cursor:pointer;transition:.18s;
  box-shadow:0 6px 16px -8px rgba(47,93,74,.7);position:relative;overflow:hidden}
button.run:hover{background:var(--blue-d);transform:translateY(-1px)}
button.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--rs);
  padding:9px 16px;font-family:var(--sans);font-size:13.5px;font-weight:500;cursor:pointer;transition:.15s}
button.ghost:hover{border-color:var(--ember);color:var(--ember);transform:translateY(-1px)}

/* questions / barres */
.qblock{margin-bottom:22px}
.qhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.qname{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink)}
.qname code{font-family:var(--mono);color:var(--blue);font-size:12.5px;background:none;border:0;padding:0}
.qtype{font-family:var(--mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:2px 9px}
.choice{display:grid;grid-template-columns:92px 1fr 46px;align-items:center;gap:11px;margin:6px 0;font-size:12.5px}
.clabel{color:var(--muted);font-family:var(--mono);font-size:12px}
.track{height:10px;background:var(--bg-alt);border-radius:999px;overflow:hidden}
.fill{display:block;height:100%;width:0;border-radius:999px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.val{text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.choice.top .clabel,.choice.top .val{color:var(--ink)}
.picked{margin-top:11px;font-size:12px;color:var(--muted)}
.picked b{color:var(--ink);font-family:var(--mono)}
.verdict{margin-top:4px;display:flex;gap:13px;align-items:center;padding:15px 17px;border-radius:var(--rs);
  border:1px solid var(--line);background:var(--bg-alt)}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.vtext b{display:block;font-family:var(--display);font-size:15px;font-weight:600;margin-bottom:1px}
.vtext small{color:var(--muted);font-size:12.5px}

/* course */
.race{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lane{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  transition:transform .25s cubic-bezier(.22,1,.36,1)}
.lane:hover{transform:translateY(-2px)}
.lane h4{margin:0 0 3px;font-family:var(--display);font-size:14px;font-weight:600}
.lane .tag{font-size:11.5px;color:var(--muted);margin-bottom:13px}
.lane .out{font-family:var(--mono);font-size:12px;min-height:92px;white-space:pre-wrap;color:var(--muted)}
.lane .ms{margin-top:11px;font-size:11.5px;color:var(--muted)}
.lane.jev{border-top:3px solid var(--blue)}
.lane.llm{border-top:3px solid var(--ember)}
.tok{color:var(--ink)}
.mini{height:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:5px 0}
.mini>i{display:block;height:100%;width:0;background:var(--grad);transition:width .5s cubic-bezier(.22,1,.36,1)}

/* code */
pre{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--rs);padding:16px 18px;
  overflow-x:auto;font-size:12.5px;line-height:1.7;margin:24px 0;color:var(--ink)}
pre .s{color:#2C6E71}pre .p{color:#2F5D4A}pre .n{color:#B06A2E}pre .c{color:var(--muted)}
.codehilite{border:1px solid var(--line);border-radius:var(--rs);padding:16px 18px;margin:24px 0;overflow-x:auto;font-size:13px}
.codehilite pre{background:transparent;border:0;padding:0;margin:0;color:inherit}

/* tableau */
table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);transition:background .2s}
tbody tr:hover td{background:var(--bg-alt)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--ember)}
th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500}

/* accueil / liste */
.journal{padding-top:34px}
.journal h1{font-size:clamp(30px,5vw,44px)}
.feed{margin-top:46px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-1);
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .2s}
.card > *{position:relative;z-index:1}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--accent,var(--blue)),var(--accent-2,var(--teal)));
  transform:scaleX(0);transform-origin:left;transition:transform .36s cubic-bezier(.22,1,.36,1)}
.card:hover::before{transform:scaleX(1)}
.card::after{content:"";position:absolute;right:-70px;bottom:-80px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft,var(--blue-soft)),transparent 70%);
  opacity:0;transition:opacity .45s;pointer-events:none;z-index:0}
.card:hover::after{opacity:.85}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
.feed .card:nth-child(3n+1){--accent:var(--blue);--accent-soft:var(--blue-soft);--accent-2:var(--teal)}
.feed .card:nth-child(3n+2){--accent:var(--teal);--accent-soft:var(--teal-soft);--accent-2:var(--indigo)}
.feed .card:nth-child(3n+3){--accent:var(--ember);--accent-soft:var(--ember-soft);--accent-2:var(--gold)}
.cardtitle{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.26;margin:0 0 10px}
.cardtitle a{color:var(--ink);text-decoration:none;transition:color .2s}
.cardtitle a:hover{color:var(--accent,var(--blue))}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.feed .card .tagchip{color:var(--accent,var(--blue));background:var(--accent-soft,var(--blue-soft))}
.excerpt{margin:0 0 18px;font-size:15px;color:var(--muted);flex:1}
.more{font-size:13.5px;font-weight:600;color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.card .more{color:var(--accent,var(--blue))}
.more svg{width:14px;height:14px;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.more:hover{text-decoration:underline}
.more:hover svg{transform:translateX(4px)}
.empty{color:var(--muted);font-style:italic;grid-column:1/-1}
.pager{display:flex;justify-content:space-between;align-items:center;margin:36px 0 8px;font-size:13.5px}
.pager a{color:var(--blue);text-decoration:none;font-weight:600}
.pager a:hover{text-decoration:underline;color:var(--ember)}
.pager .pg{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* page libre */
.page-art{padding-top:42px}
.page-art h1{font-size:clamp(30px,4.6vw,42px)}

/* pied */
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
footer{background:#17211B;color:#C2CFC6;padding:56px 0 40px;font-size:13.5px;position:relative}
footer::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-spectrum);
  background-size:220% 100%;animation:gradshift 8s ease-in-out infinite}
footer a{color:#C2CFC6;text-decoration:none;transition:.15s}
footer a:hover{color:#fff}
footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:flex-start}
footer .brand{color:#fff;font-size:18px;margin-bottom:8px}
footer .cols{display:flex;gap:34px;flex-wrap:wrap}
footer .col span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#8A9A90;margin-bottom:10px}
footer .col a{display:block;padding:3px 0}
footer .legal{margin-top:34px;padding-top:22px;border-top:1px solid #25332B;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:#8A9A90}
.err{padding-top:70px}
.err h1{font-size:clamp(28px,4.4vw,40px)}

/* =========================================================================
   Animations
   ========================================================================= */
@keyframes gradshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes gradslide{0%,100%{background-position:50% 0%}50%{background-position:50% 100%}}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.75}}

/* apparition au défilement — rapide */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.reveal.from-left{transform:translateX(-20px)}
.reveal.zoom{transform:scale(.975)}
.reveal.zoom.in,.reveal.from-left.in{transform:none}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .grad-text,#prog,footer::before,.demo::before,blockquote::before,.brand .dot{animation:none!important}
  html{scroll-behavior:auto}
}