/* ═══════════════════════════════════════════════════════════
   STILL FLOW — styles de la maquette (Claude Design, v3)
   Repris tels quels du <helmet> de « Still Flow Website v3 ».
   Les animations vivent dans motion.css + js/app.js.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/BricolageGrotesque-Variable.ttf') format('truetype');font-weight:200 800;font-stretch:75% 100%;font-display:swap;}
:root{--font-heading:'Bricolage Grotesque', system-ui, sans-serif;--font-body:'Bricolage Grotesque', system-ui, sans-serif;--color-accent-2-100:oklch(0.95 0.015 260);--color-accent-2-200:oklch(0.89 0.025 260);--color-accent-2-300:oklch(0.8 0.04 260);--color-accent-2-400:oklch(0.68 0.055 262);--color-accent-2:oklch(0.56 0.065 263);--color-accent-2-500:oklch(0.56 0.065 263);--color-accent-2-600:oklch(0.46 0.065 264);--color-accent-2-700:oklch(0.37 0.06 265);--color-accent-2-800:oklch(0.29 0.05 265);--color-accent-2-900:oklch(0.22 0.04 265);--color-accent-100:oklch(0.95 0.025 85);--color-accent-200:oklch(0.9 0.045 84);--color-accent-300:oklch(0.84 0.07 82);--color-accent-400:oklch(0.76 0.09 80);--color-accent:oklch(0.68 0.1 79);--color-accent-500:oklch(0.68 0.1 79);--color-accent-600:oklch(0.6 0.095 77);--color-accent-700:oklch(0.51 0.085 75);--color-accent-800:oklch(0.43 0.075 73);--color-accent-900:oklch(0.35 0.06 72);}
html{scroll-behavior:smooth;}
h1,h2,h3{font-weight:300;letter-spacing:-0.02em;}
body{margin:0;font-optical-sizing:auto;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);overflow-x:hidden;}
a{color:var(--color-accent-700);}
a:hover{color:var(--color-accent-800);}
section{scroll-margin-top:0;}
details summary::-webkit-details-marker{display:none;}
.btn.btn-primary{color:var(--color-text);}
.btn.btn-primary:hover{background:var(--color-accent-400);color:var(--color-text);}

/* ── dock (styles inline de la maquette, sortis en classe pour l'animer) ── */
.dock{position:fixed;top:14px;left:50%;z-index:60;width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;display:flex;align-items:center;gap:clamp(10px,2.4vw,32px);padding:8px 8px 8px 18px;border-radius:999px;background:color-mix(in oklch, var(--color-bg) 86%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);transform:translateX(-50%);}

/* équivalents des attributs style-hover de la maquette */
.nav-link{color:var(--color-text);text-decoration:none;}
.nav-link:hover{color:var(--color-accent-700);}
.ig-link{width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--color-text);}
.ig-link:hover{background:var(--color-neutral-200);color:var(--color-text);}
.footer-mail{color:var(--color-accent-700);}
.footer-mail:hover{color:var(--color-accent-800);}

/* pastilles de progression du processus (état initial de la maquette) */
.step-pill{height:10px;width:10px;border-radius:999px;background:var(--color-accent-2-600);}
.step-pill:first-child{width:44px;background:var(--color-accent-300);}