/* ========================================================================= Augmented Human — ah_refonte.css Fondation visuelle de la refonte UI (v2). Source unique : couleurs par pilier, typo Hanken Grotesk, matière verre, adaptatif clair/sombre. Activée page par page derrière le flag `ui_refonte_v2`. Thème : poser data-theme="light" | "dark" sur (clair par défaut). ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800;900&display=swap'); :root{ /* Piliers (invariants de marque) */ --perf:#FF3B1E; --perf-2:#FF7A4D; --perf-ink:#C42A0E; --perf-bg:rgba(255,59,30,.12); --nutri:#13C0BA; --nutri-ink:#0A7E79; --nutri-bg:rgba(19,192,186,.13); --long:#6B61FF; --long-ink:#3F37C2; --long-bg:rgba(107,97,255,.13); --champ:#CBA75E; --champ-ink:#9A7C3A; --champ-bg:rgba(203,167,94,.15); /* Neutres — thème clair (défaut) */ --bg:#F4F1EA; --solid:#FFFFFF; --surface:rgba(255,255,255,.7); --surface-2:rgba(255,255,255,.5); --ink:#16140F; --dim:#5C574C; --faint:#9A9384; --line:rgba(20,18,12,.10); --line-soft:rgba(20,18,12,.06); --edge:rgba(255,255,255,.85); /* Rayons / ombres / matière */ --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:100px; --sh:0 10px 28px rgba(50,42,20,.10); --blur:saturate(170%) blur(20px); --font:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; } body[data-theme="dark"]{ --bg:#0B0A07; --solid:#16130C; --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.04); --ink:#F4F0E6; --dim:rgba(244,240,230,.6); --faint:rgba(244,240,230,.4); --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06); --edge:rgba(255,255,255,.18); --sh:0 14px 38px rgba(0,0,0,.5); /* lisibilité des accents en sombre */ --perf-ink:#FF6A4D; --nutri-ink:#2FD3C2; --long-ink:#9088FF; --champ-ink:#DCBE7E; --perf-bg:rgba(255,106,77,.12); --nutri-bg:rgba(47,211,194,.12); --long-bg:rgba(144,136,255,.12); --champ-bg:rgba(203,167,94,.16); } /* ---- Base ---- */ .ah-ui{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased} .ah-ui *{box-sizing:border-box} .ah-ui h1,.ah-ui h2,.ah-ui h3{letter-spacing:-.03em;font-weight:800;margin:0} .ah-ui h1{font-size:27px;line-height:1.05} .ah-ui h2{font-size:21px;line-height:1.08} .ah-ui .num{font-weight:300;letter-spacing:-.02em} /* gros chiffres légers */ .ah-ui .ov{display:block;font-size:9.5px;font-weight:800;color:var(--faint);text-transform:uppercase;letter-spacing:.09em;margin:16px 0 8px} .ah-ui .dim{color:var(--dim)} .ah-ui .faint{color:var(--faint)} /* ---- Surfaces ---- */ .ah-card{background:var(--solid);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)} .ah-glass{background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:var(--r-lg)} .ah-soft{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)} .ah-hr{height:1px;background:var(--line-soft);border:0;margin:0} /* ---- Pastilles / tags ---- */ .ah-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;border-radius:var(--r-pill);padding:5px 11px;background:var(--surface-2);border:1px solid var(--line);color:var(--dim)} .ah-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:6px;padding:2px 6px} .ah-tag.perf{color:var(--perf-ink);background:var(--perf-bg)} .ah-tag.nutri{color:var(--nutri-ink);background:var(--nutri-bg)} .ah-tag.long{color:var(--long-ink);background:var(--long-bg)} .ah-tag.champ{color:var(--champ-ink);background:var(--champ-bg)} /* ---- Boutons ---- */ .ah-btn{font-family:var(--font);font-size:15px;font-weight:800;border:none;border-radius:var(--r-md);padding:15px;cursor:pointer;width:100%;transition:transform .12s} .ah-btn:active{transform:scale(.99)} .ah-btn--primary{color:#fff;background:linear-gradient(135deg,var(--perf),var(--perf-ink));box-shadow:0 10px 24px -10px var(--perf)} .ah-btn--ink{color:var(--bg);background:var(--ink)} .ah-btn--ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink)} /* ---- Accents par pilier (bordure gauche utilitaire) ---- */ .ah-acc-perf{border-left:3px solid var(--perf);padding-left:13px} .ah-acc-nutri{border-left:3px solid var(--nutri);padding-left:13px} .ah-acc-long{border-left:3px solid var(--long);padding-left:13px} .ah-acc-champ{border-left:3px solid var(--champ);padding-left:13px}