/* ============ Polices auto-hébergées ============
Plus AUCUNE requête vers un hôte tiers (RGPD — jurisprudence allemande sur
Google Fonts) : les woff2 sont servis depuis assets/fonts/, subsets latin +
latin-ext (langues du site : EN FR DE IT ES NL). Inter et Jost sont les
fichiers VARIABLES que Google Fonts servait déjà à Chrome : un seul woff2 par
subset, partagé par toutes les graisses déclarées — rendu identique à
l'@import d'origine. IBM Plex Mono est en fichiers statiques (un par
graisse). Licences et copyrights : assets/fonts/LICENSE.txt. */
/* latin-ext */
@font-face{
font-family:'Jost';
font-style:normal;
font-weight:300;
font-display:swap;
src:url('../assets/fonts/jost-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'Jost';
font-style:normal;
font-weight:300;
font-display:swap;
src:url('../assets/fonts/jost-variable-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'Jost';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../assets/fonts/jost-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'Jost';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../assets/fonts/jost-variable-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'Jost';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('../assets/fonts/jost-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'Jost';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('../assets/fonts/jost-variable-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'Jost';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('../assets/fonts/jost-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'Jost';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('../assets/fonts/jost-variable-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'Jost';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('../assets/fonts/jost-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'Jost';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('../assets/fonts/jost-variable-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../assets/fonts/inter-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../assets/fonts/inter-variable-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('../assets/fonts/inter-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('../assets/fonts/inter-variable-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('../assets/fonts/inter-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('../assets/fonts/inter-variable-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('../assets/fonts/inter-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('../assets/fonts/inter-variable-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:800;
font-display:swap;
src:url('../assets/fonts/inter-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:800;
font-display:swap;
src:url('../assets/fonts/inter-variable-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('../assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('../assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('../assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('../assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Flag emoji font so country flags render everywhere (incl. Windows) */
@font-face{
font-family:'Twemoji Country Flags';
unicode-range:U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
src:url('../assets/fonts/twemoji-country-flags.woff2') format('woff2');
font-display:swap;
}
/* ============ Tokens (Mercury-inspired) ============ */
:root{
--bg:#ffffff;
--bg-soft:#f5f8fb;
--ink:#16233f; /* deep navy (PURE) */
--ink-soft:#5c697f;
--line:#e6ebf2;
--navy:#1c2b54;
--violet:#2563a8; /* brand primary blue (name kept for reuse) */
--violet-2:#2f86c0;
--teal:#3fb0a3;
--pink:#43b0a0;
--blue:#2f86c0;
--cap:#1746b8; /* vial cap glossy royal blue */
--cap-light:#2f6fe0;
--radius:16px;
--radius-lg:24px;
--shadow-sm:0 1px 2px rgba(22,35,63,.06), 0 2px 8px rgba(22,35,63,.04);
--shadow-md:0 10px 30px rgba(22,35,63,.10);
--shadow-lg:0 30px 60px rgba(28,43,84,.18);
--grad:linear-gradient(120deg,#1f4f93 0%,#2f86c0 52%,#3fb0a3 100%);
--maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
select,option{font-family:'Twemoji Country Flags','Inter',system-ui,-apple-system,sans-serif}
html{scroll-behavior:smooth}
body{
font-family:'Twemoji Country Flags','Inter',system-ui,-apple-system,sans-serif;
color:var(--ink);
background:var(--bg);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center;margin-top:40px}
.gradient-text{
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* ============ Buttons ============ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-weight:600;font-size:15px;border-radius:999px;padding:11px 20px;
border:1px solid transparent;cursor:pointer;transition:.2s ease;white-space:nowrap;
}
.btn--lg{padding:15px 28px;font-size:16px}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--bg-soft)}
.btn--ghost-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.btn--ghost-light:hover{background:rgba(255,255,255,.2)}
/* ============ Nav ============ */
.nav{
position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);
backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;
transition:border-color .2s, box-shadow .2s;
}
.nav.is-scrolled{border-color:var(--line);box-shadow:var(--shadow-sm)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.brand{display:flex;align-items:center;gap:9px}
.brand__mark{height:32px;width:auto;display:block}
.brand__word-img{height:17px;width:auto;display:block}
.brand__word{font-weight:700;font-size:19px;letter-spacing:.15em;color:var(--navy)}
.brand__word span{color:#2f9ab0} /* visible fallback */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.brand__word span{background:linear-gradient(90deg,#2f86c0,#3fb0a3);
-webkit-background-clip:text;background-clip:text;color:transparent}
}
/* light variant for dark backgrounds (footer) */
.brand--light .brand__word{color:#fff}
.brand--light .brand__word span{color:#5fd0bf}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.brand--light .brand__word span{background:linear-gradient(90deg,#5bb6dd,#5fd0bf);
-webkit-background-clip:text;background-clip:text;color:transparent}
}
.nav__links{display:flex;gap:28px;font-size:15px;font-weight:500;color:var(--ink-soft)}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink)}
.nav__actions{display:flex;gap:10px;align-items:center}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav__burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
/* ============ Hero ============ */
.hero{position:relative;overflow:hidden;padding:90px 0 120px}
.hero__glow{
position:absolute;top:-220px;left:50%;transform:translateX(-50%);
width:900px;height:600px;border-radius:50%;
background:radial-gradient(closest-side, rgba(47,134,192,.28), rgba(63,176,163,.16) 50%, transparent 75%);
filter:blur(20px);z-index:0;
}
.hero__inner{position:relative;z-index:1;max-width:820px;text-align:center;margin:0 auto}
.pill{
display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
color:var(--ink-soft);background:#fff;border:1px solid var(--line);
padding:7px 14px;border-radius:999px;box-shadow:var(--shadow-sm);margin-bottom:26px;
}
.pill__dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.hero__title{font-size:clamp(38px,6vw,68px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.hero__sub{font-size:clamp(16px,2vw,20px);color:var(--ink-soft);margin:24px auto 0;max-width:620px}
.hero__cta{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.hero__trust{margin-top:60px;color:var(--ink-soft)}
.hero__trust span{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.logos{display:flex;gap:36px;justify-content:center;flex-wrap:wrap;margin-top:18px;
font-weight:700;font-size:18px;color:#aab;letter-spacing:-.01em}
.hero__card{
position:absolute;right:max(24px,calc(50% - 560px));bottom:40px;z-index:2;width:280px;
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:20px;box-shadow:var(--shadow-lg);animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.card__label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.badge{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.badge--green{background:#e7f9ee;color:#16a34a}
.card__row{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-bottom:1px dashed var(--line)}
.card__row span{color:var(--ink-soft)}
.card__bar{height:8px;border-radius:999px;background:var(--bg-soft);margin-top:14px;overflow:hidden}
.card__bar-fill{height:100%;background:var(--grad);border-radius:999px}
/* ============ Stats ============ */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:46px 24px}
.stat{text-align:center}
.stat__num{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-.02em}
.stat__label{color:var(--ink-soft);font-size:14px;margin-top:4px}
/* ============ Sections ============ */
.section{padding:90px 0}
.section--alt{background:var(--bg-soft)}
.section__head{max-width:640px;margin:0 auto 54px;text-align:center}
.section__head--left{text-align:left;margin-left:0}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;text-transform:uppercase;
letter-spacing:.1em;color:var(--violet);margin-bottom:12px}
.eyebrow--light{color:#9fd6e6}
.section__head h2{font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;line-height:1.1}
.section__head p{color:var(--ink-soft);margin-top:16px;font-size:18px}
/* ============ Features ============ */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;
transition:.25s ease}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.feature__icon{width:48px;height:48px;display:grid;place-items:center;font-size:22px;
background:var(--bg-soft);border-radius:12px;margin-bottom:16px}
.feature h3{font-size:18px;letter-spacing:-.01em}
.feature p{color:var(--ink-soft);margin-top:8px;font-size:15px}
/* ============ Products ============ */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
display:flex;flex-direction:column;transition:.25s ease;
}
.product:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.product__media{position:relative;height:210px;display:grid;place-items:center;
background:radial-gradient(120% 100% at 50% 0,#eaf1ff,#f4f7fc 70%)}
.product__tag{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;z-index:3;
background:#fff;color:var(--violet);padding:4px 10px;border-radius:999px;box-shadow:var(--shadow-sm);text-transform:capitalize}
.product__photo{height:188px;width:auto;display:block;
filter:drop-shadow(0 14px 22px rgba(20,40,120,.20))}
/* ---- Realistic vial (matches brand photo) ---- */
.vial{position:relative;display:flex;flex-direction:column;align-items:center;
filter:drop-shadow(0 14px 22px rgba(20,40,120,.20))}
.vial__cap{width:48px;height:26px;border-radius:7px 7px 4px 4px;
background:linear-gradient(180deg,var(--cap-light),var(--cap));position:relative;z-index:2}
.vial__cap::before{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
width:20px;height:20px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,#3f6ee6,#142e86)}
.vial__neck{width:54px;height:7px;background:linear-gradient(180deg,#dfe6f2,#c4cee0);
border-radius:2px;margin-top:-1px;z-index:1}
.vial__body{width:84px;height:118px;border-radius:5px 5px 12px 12px;position:relative;
background:linear-gradient(105deg,rgba(255,255,255,.95) 0%,rgba(225,234,250,.7) 45%,rgba(255,255,255,.95) 100%);
border:1px solid rgba(255,255,255,.9);overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(180,196,228,.5)}
.vial__body::before{content:"";position:absolute;top:0;bottom:0;left:14px;width:8px;
background:rgba(255,255,255,.75);filter:blur(2px)}
.vial__label{position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);
background:#fff;border-radius:3px;padding:9px 4px 7px;text-align:center;
box-shadow:0 1px 4px rgba(20,40,120,.18)}
.vial__brand{font-size:8px;font-weight:800;letter-spacing:.02em;color:var(--ink);line-height:1}
.vial__rule{font-size:5px;font-weight:700;letter-spacing:.16em;color:var(--violet);margin-top:2px}
.vial__name{font-size:9px;font-weight:800;color:var(--ink);margin-top:5px;line-height:1.05;
text-transform:uppercase}
.vial__dose{display:inline-block;font-size:8px;font-weight:800;color:#fff;background:var(--cap);
border-radius:3px;padding:1px 6px;margin-top:3px;letter-spacing:.02em}
.vial__rpo{font-size:4.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-soft);margin-top:4px}
.product__body{padding:20px;display:flex;flex-direction:column;gap:6px;flex:1}
.product__name{font-size:18px;font-weight:700;letter-spacing:-.01em}
.product__desc{color:var(--ink-soft);font-size:14px;flex:1}
.product__meta{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.product__chip{font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--bg-soft);
padding:3px 10px;border-radius:999px}
.size-opts{display:flex;gap:8px;margin:4px 0 2px}
.size-opt{flex:1;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 8px;
font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.18s}
.size-opt:hover{border-color:var(--violet-2);color:var(--ink)}
.size-opt.is-active{border-color:var(--violet);color:var(--violet);box-shadow:inset 0 0 0 1px var(--violet)}
.product__foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.product__price{font-size:20px;font-weight:800;letter-spacing:-.02em}
.product__price small{display:block;font-size:12px;font-weight:500;color:var(--ink-soft);margin-top:2px}
.add-btn{border:1px solid var(--line);background:var(--ink);color:#fff;border-radius:999px;
padding:9px 16px;font-weight:600;font-size:14px;cursor:pointer;transition:.2s}
.add-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
/* ============ Quality ============ */
.quality{background:radial-gradient(120% 120% at 0% 0%, #221a52 0%, #14102e 55%, #0c0a1f 100%);
color:#fff;padding:100px 0}
.quality__inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.quality h2{font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;line-height:1.12}
.quality p{color:#bdbbd6;margin-top:16px;font-size:18px}
.checklist{list-style:none;margin:26px 0 30px;display:grid;gap:12px}
.checklist li{position:relative;padding-left:30px;color:#e7e6f3}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;
display:grid;place-items:center;border-radius:50%;background:var(--grad);font-size:12px;font-weight:800}
.visual-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
border-radius:var(--radius-lg);padding:24px;backdrop-filter:blur(6px)}
.visual-card__head{font-size:14px;font-weight:600;color:#cfcde6;margin-bottom:20px}
.chart{height:180px;display:flex;flex-direction:column;justify-content:flex-end}
.chart__bars{display:flex;align-items:flex-end;gap:14px;height:100%}
.chart__bars span{flex:1;background:var(--grad);border-radius:6px 6px 0 0;min-height:8px;
animation:grow 1s ease both}
@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1)}}
.chart__axis{height:1px;background:rgba(255,255,255,.2);margin-top:8px}
.visual-card__foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;
font-size:14px;color:#cfcde6}
.visual-card__foot strong{font-size:20px}
/* ============ Quote ============ */
.quote{max-width:760px;margin:0 auto;text-align:center}
.quote p{font-size:clamp(20px,3vw,30px);font-weight:600;letter-spacing:-.01em;line-height:1.4}
.quote__author{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:28px}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;
display:grid;place-items:center;font-weight:700}
.quote__author div{text-align:left}
.quote__author span{display:block;color:var(--ink-soft);font-size:14px}
/* ============ FAQ ============ */
.faq{max-width:760px}
.accordion{display:grid;gap:12px}
.acc-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
background:none;border:none;cursor:pointer;padding:20px 22px;font-size:17px;font-weight:600;
text-align:left;color:var(--ink)}
.acc-q span{font-size:22px;color:var(--violet);transition:.2s;line-height:1}
.acc-item.open .acc-q span{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-a p{padding:0 22px 20px;color:var(--ink-soft)}
/* ============ CTA ============ */
.cta{padding:30px 24px 90px}
.cta__inner{background:radial-gradient(120% 140% at 100% 0%, #2f86c0, #163a6e 55%, #0c1a33);
color:#fff;border-radius:32px;padding:70px 40px;text-align:center;box-shadow:var(--shadow-lg)}
.cta h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em}
.cta p{color:#d9d6f2;margin:14px auto 0;max-width:520px;font-size:18px}
.cta__buttons{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}
/* ============ Footer ============ */
.footer{background:#0c0a1f;color:#b9b7d0;padding:64px 0 28px}
.footer__inner{display:grid;grid-template-columns:1.4fr 2fr;gap:40px}
.footer .brand{color:#fff}
.footer__brand p{margin-top:14px;max-width:300px;font-size:14px}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer__cols h4{color:#fff;font-size:14px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.06em}
.footer__cols a{display:block;font-size:14px;padding:5px 0;color:#b9b7d0}
.footer__cols a:hover{color:#fff}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding-top:24px;font-size:13px}
.footer__legal{display:flex;gap:20px}
.footer__legal a:hover{color:#fff}
/* ============ Page hero (products) ============ */
.page-hero{padding:70px 0 50px;text-align:center;background:
radial-gradient(80% 120% at 50% -20%, rgba(47,134,192,.16), transparent 60%)}
.page-hero h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.03em;margin-top:6px}
.page-hero p{color:var(--ink-soft);max-width:560px;margin:16px auto 0;font-size:18px}
/* ============ Catalog toolbar ============ */
.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
margin-bottom:32px;flex-wrap:wrap}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:999px;
padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s}
.chip:hover{color:var(--ink)}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.search-input{border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-size:14px;
min-width:240px;font-family:inherit;outline:none;transition:.2s;background:#fff}
.search-input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(37,99,168,.14)}
.catalog-empty{text-align:center;color:var(--ink-soft);padding:40px}
.cart-btn span{background:rgba(255,255,255,.22);border-radius:999px;padding:1px 8px;font-size:13px}
/* ============ Toast ============ */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,80px);z-index:100;
background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font-weight:600;font-size:14px;
box-shadow:var(--shadow-lg);opacity:0;transition:.3s ease;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
/* ============ Product card links ============ */
.product__media{cursor:pointer;text-decoration:none}
.product__name{cursor:pointer;text-decoration:none;transition:color .15s}
a.product__name:hover{color:var(--violet)}
.cart-btn.is-active{box-shadow:0 0 0 3px rgba(37,99,168,.18)}
/* ============ Product detail page ============ */
.pd__crumb{font-size:14px;color:var(--ink-soft);margin-bottom:24px}
.pd__crumb a{color:var(--violet);font-weight:600}
.pd__crumb span{margin:0 6px;color:var(--line)}
.pd__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pd__media{background:radial-gradient(120% 100% at 50% 0,#eaf1ff,#f4f7fc 70%);
border:1px solid var(--line);border-radius:var(--radius-lg);min-height:420px;
display:grid;place-items:center;padding:24px}
.pd__photo{height:360px;width:auto;filter:drop-shadow(0 20px 30px rgba(20,40,120,.22))}
.pd__vialwrap{transform:scale(1.6)}
.pd__cat{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
color:var(--violet);background:var(--bg-soft);padding:5px 12px;border-radius:999px}
.pd__name{font-size:clamp(30px,4vw,46px);letter-spacing:-.02em;margin:14px 0 6px}
.pd__subtitle{font-size:17px;color:var(--violet);font-weight:600;margin-bottom:12px}
.pd__purity{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);margin-bottom:18px}
.pd__purity strong{color:var(--ink)}
.pd__desc{font-size:17px;color:var(--ink-soft);margin-bottom:24px}
.pd__label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.pd .size-opts{max-width:260px}
.pd__buy{display:flex;align-items:center;gap:20px;margin:24px 0;flex-wrap:wrap}
.pd__buy .product__price{font-size:30px;font-weight:800}
.pd__perks{list-style:none;display:grid;gap:10px;padding:20px;background:var(--bg-soft);
border-radius:var(--radius);margin:8px 0 18px}
.pd__perks li{font-size:14px;color:var(--ink)}
.pd__rpo{font-size:13px;color:var(--ink-soft)}
.pd__sections{margin-top:60px;display:grid;gap:44px;max-width:880px}
.pd__section h2{font-size:24px;letter-spacing:-.01em;margin-bottom:14px}
.pd__section p{color:var(--ink-soft);font-size:16px}
.spec-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);overflow:hidden}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table tr:last-child{border-bottom:none}
.spec-table td{padding:13px 18px;font-size:15px}
.spec-table td:first-child{color:var(--ink-soft);width:44%;font-weight:600}
.spec-table td:last-child{color:var(--ink);font-weight:600}
.pd__list{list-style:none;display:grid;gap:11px}
.pd__list li{position:relative;padding-left:26px;color:var(--ink-soft);font-size:16px}
.pd__list li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;
border-radius:50%;background:var(--grad)}
/* ============ Cart ============ */
.cart-grid{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.cart-h{font-size:20px;letter-spacing:-.01em;margin:0 0 16px}
.cart-main .cart-h:nth-of-type(2){margin-top:40px}
.cart-items{display:grid;gap:12px;margin-bottom:8px}
.ci{display:grid;grid-template-columns:84px 1fr auto auto;gap:18px;align-items:center;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.ci__thumb{width:84px;height:96px;border-radius:12px;background:radial-gradient(120% 100% at 50% 0,#eaf1ff,#f4f7fc 70%);
display:grid;place-items:center;overflow:hidden}
.ci__thumb img{height:88px;width:auto}
.ci__mono{font-weight:800;color:var(--violet);font-size:22px;letter-spacing:.02em}
.ci__name{font-weight:700;font-size:16px;color:var(--ink);text-decoration:none}
.ci__name:hover{color:var(--violet)}
.ci__size{font-size:13px;color:var(--ink-soft);margin:2px 0 8px}
.ci__remove{background:none;border:none;color:var(--ink-soft);font-size:13px;font-weight:600;
cursor:pointer;padding:0;text-decoration:underline}
.ci__remove:hover{color:#d23b3b}
.ci__qty{display:flex;align-items:center;gap:10px}
.ci__qty button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;
font-size:18px;line-height:1;cursor:pointer;color:var(--ink)}
.ci__qty button:hover{border-color:var(--violet);color:var(--violet)}
.ci__qty span{min-width:18px;text-align:center;font-weight:600}
.ci__price{font-weight:800;font-size:16px}
.ship-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1 / -1}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
.field input,.field select{border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:15px;
font-family:inherit;background:#fff;outline:none;transition:.15s}
.field input:focus,.field select:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(37,99,168,.12)}
.field__hint{font-size:12px;color:var(--ink-soft);margin-top:2px}
.phone-row{display:flex;gap:10px}
.phone-row select{flex:0 0 110px;border:1px solid var(--line);border-radius:10px;padding:11px 10px;
font-size:15px;font-family:inherit;background:#fff;outline:none}
.phone-row input{flex:1}
.phone-row select:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(37,99,168,.12)}
.cart-summary{position:sticky;top:90px;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.cart-summary h3{font-size:17px;margin-bottom:16px}
.sum-row{display:flex;justify-content:space-between;font-size:15px;color:var(--ink-soft);padding:9px 0;
border-bottom:1px solid var(--line)}
.sum-row strong{color:var(--ink)}
.sum-row--total{border-bottom:none;font-size:18px;padding-top:14px}
.sum-row--total strong{font-size:22px}
.cart-checkout{width:100%;margin-top:18px}
.cart-note{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:10px}
.cart-empty{text-align:center;padding:60px 20px;max-width:480px;margin:0 auto}
.cart-empty__icon{font-size:48px;margin-bottom:12px}
.cart-empty h2{font-size:26px;letter-spacing:-.01em}
.cart-empty p{color:var(--ink-soft);margin:10px 0 22px}
.cart-done__sum{font-size:16px;color:var(--ink)}
/* ============ Account / auth ============ */
.auth{max-width:460px;margin:0 auto}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:30px;box-shadow:var(--shadow-sm)}
.auth-title{font-size:22px;letter-spacing:-.01em;margin-bottom:20px;text-align:center}
.auth-form{display:grid;gap:14px}
.auth-form .btn{margin-top:6px;width:100%}
.auth-alt{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;
margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.auth-alt span{font-size:14px;color:var(--ink-soft)}
.auth-alt .btn{width:100%}
.dash{text-align:center}
.dash__avatar{width:66px;height:66px;border-radius:50%;background:var(--grad);color:#fff;
display:grid;place-items:center;font-weight:800;font-size:24px;margin:0 auto 14px}
.dash h2{font-size:24px;letter-spacing:-.01em}
.dash__email{color:var(--ink-soft);margin-bottom:26px}
.dash h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);
text-align:left;margin-bottom:12px}
.dash__orders{display:grid;gap:10px;margin-bottom:24px}
.dash-order{border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:left}
.dash-order__top{display:flex;justify-content:space-between;font-weight:700;font-size:15px}
.dash-order__meta{color:var(--ink-soft);font-size:13px;margin-top:4px}
.dash-empty{color:var(--ink-soft);font-size:14px;text-align:left;padding:16px;
background:var(--bg-soft);border-radius:var(--radius)}
/* ============ Responsive ============ */
@media(max-width:900px){
.nav__links,.nav__actions{display:none}
.nav__burger{display:flex}
.nav.menu-open .nav__links{display:flex;position:absolute;top:68px;left:0;right:0;
flex-direction:column;background:#fff;padding:18px 24px;gap:18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md)}
.hero__card{display:none}
.stats__grid{grid-template-columns:repeat(2,1fr)}
.features,.products-grid{grid-template-columns:repeat(2,1fr)}
.quality__inner{grid-template-columns:1fr;gap:40px}
.footer__inner{grid-template-columns:1fr}
.pd__grid{grid-template-columns:1fr;gap:32px}
.cart-grid{grid-template-columns:1fr;gap:28px}
.cart-summary{position:static}
}
@media(max-width:600px){
.features,.products-grid,.footer__cols{grid-template-columns:1fr}
.section{padding:64px 0}
.section__head--left{text-align:center}
.catalog-toolbar{flex-direction:column;align-items:stretch}
.search-input{width:100%}
.ship-form{grid-template-columns:1fr}
.ci{grid-template-columns:64px 1fr;grid-template-areas:"thumb main" "thumb qty";row-gap:10px}
.ci__thumb{grid-area:thumb;width:64px;height:74px}
.ci__thumb img{height:66px}
.ci__main{grid-area:main}
.ci__qty{grid-area:qty}
.ci__price{grid-column:1 / -1;text-align:right}
.pd__photo{height:280px}
}
/* ============================================================
Pharma-lab art direction (DA)
============================================================ */
:root{
--mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
--bg-soft:#eef4fa; /* cooler, clinical tint */
--line:#e1e9f2;
}
/* clinical accent bar pinned to the very top */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;
background:var(--grad);z-index:200}
/* faint lab graph-paper texture on light surfaces */
.hero,.section--alt,.page-hero{
background-image:
linear-gradient(rgba(31,79,147,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(31,79,147,.05) 1px, transparent 1px);
background-size:32px 32px;
}
.section--alt{background-color:var(--bg-soft)}
.page-hero{
background-image:
radial-gradient(80% 120% at 50% -20%, rgba(47,134,192,.16), transparent 60%),
linear-gradient(rgba(31,79,147,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(31,79,147,.05) 1px, transparent 1px);
background-size:640px auto, 32px 32px, 32px 32px;
}
/* technical mono micro-labels */
.eyebrow{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.14em}
.eyebrow::before{content:"⬡ ";opacity:.7}
.pill{font-family:var(--mono);font-size:12px;letter-spacing:.04em}
/* lab-readout numerals (tabular) */
.stat__num,.product__price,.visual-card__foot strong,.sum-row--total strong,
.pd__buy .product__price{font-family:var(--mono);font-feature-settings:"tnum" 1}
.card__row strong,.pd__purity strong,.dash-order__top strong{font-family:var(--mono)}
/* spec table -> instrument data sheet */
.spec-table td:first-child{font-family:var(--mono);text-transform:uppercase;
font-size:12px;letter-spacing:.05em}
.spec-table td:last-child{font-family:var(--mono);font-size:14px}
/* clinical precision: hairlines + crisper cards */
.nav{border-bottom:1px solid var(--line)}
.feature{border-color:var(--line)}
.feature__icon{border:1px solid var(--line);background:#fff;border-radius:10px}
/* lab credentials strip under the hero trust line */
.specbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:#fff}
.specbar__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.specbar__item{padding:22px 20px;text-align:center;border-left:1px solid var(--line)}
.specbar__item:first-child{border-left:none}
.specbar__k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-soft)}
.specbar__v{font-weight:700;font-size:15px;margin-top:6px;color:var(--ink)}
.specbar__v b{color:var(--violet)}
@media(max-width:700px){.specbar__grid{grid-template-columns:repeat(2,1fr)}
.specbar__item:nth-child(3){border-left:none}}
/* molecular watermark on the dark quality section */
.quality{position:relative;overflow:hidden}
.quality::after{content:"";position:absolute;right:-80px;top:-80px;width:420px;height:420px;
opacity:.10;pointer-events:none;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ============================================================
Brand DA refinement — soft, airy, elegant (matches brand art)
============================================================ */
:root{
--bg:#ffffff;
--paper:#f6f8f8; /* soft off-white page tone */
--paper-2:#eef3f5; /* gentle alt tint */
--line:#e6ecf1;
}
body{background:var(--paper)}
/* replace the heavy lab grid with a faint paper speckle */
.hero,.page-hero{
background-color:var(--paper);
background-image:radial-gradient(rgba(31,79,147,.045) 0.6px, transparent 0.7px);
background-size:18px 18px;
}
.page-hero{
background-image:
radial-gradient(72% 110% at 50% -10%, rgba(47,134,192,.13), transparent 60%),
radial-gradient(rgba(31,79,147,.045) 0.6px, transparent 0.7px);
background-size:640px auto, 18px 18px;
}
.section{background:var(--bg)} /* crisp white content -> airy */
.section--alt{
background-color:var(--paper-2);
background-image:radial-gradient(rgba(31,79,147,.04) 0.6px, transparent 0.7px);
background-size:18px 18px;
}
/* signature gradient hairline under headings */
.section__head h2,.page-hero h1,.quality h2{position:relative;padding-bottom:20px}
.section__head h2::after,.page-hero h1::after,.quality h2::after{
content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:66px;height:3px;border-radius:3px;background:var(--grad)}
.section__head--left h2::after,.quality h2::after{left:0;transform:none}
/* brand tagline (Science. Purity. Potential.) */
.tagline{display:inline-block;margin-top:22px;font-size:13px;font-weight:600;
letter-spacing:.26em;text-transform:uppercase;color:#2f86c0}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.tagline{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
}
/* lighter, more elegant headings */
.hero__title{font-weight:700;letter-spacing:-.02em}
.section__head h2,.quality h2,.pd__name,.page-hero h1{font-weight:700}
/* soften the molecular watermark a touch for the airy feel */
.quality::after{opacity:.08}
/* refine eyebrow marker to a finer hexagon */
.eyebrow::before{content:"⬡ ";opacity:.55;font-size:.9em}
/* Brand typography: geometric sans (Jost) to match the wordmark */
body{font-family:'Twemoji Country Flags','Jost','Inter',system-ui,-apple-system,sans-serif}
select,option,input,textarea,button{font-family:'Twemoji Country Flags','Jost','Inter',system-ui,-apple-system,sans-serif}
.hero__title,.section__head h2,.quality h2,.pd__name,.page-hero h1,.cta h2,.quote p{
letter-spacing:-.01em}
/* ============================================================
Mobile polish
============================================================ */
@media(max-width:900px){
/* expanding mobile menu that INCLUDES the actions (Connexion / Panier) */
.nav.menu-open .nav__inner{flex-wrap:wrap;height:auto;padding-bottom:16px}
.nav.menu-open .nav__links,
.nav.menu-open .nav__actions{
display:flex;flex-direction:column;width:100%;gap:12px;align-items:stretch;
position:static;background:none;box-shadow:none;padding:0;border:none;
}
.nav.menu-open .nav__links{order:3;margin-top:12px;padding-top:14px;
border-top:1px solid var(--line);font-size:17px}
.nav.menu-open .nav__links a{padding:6px 2px}
.nav.menu-open .nav__actions{order:4;margin-top:6px}
.nav.menu-open .nav__actions .btn{width:100%;justify-content:center;padding:13px}
}
@media(max-width:680px){
.container{padding:0 18px}
/* hero */
.hero{padding:52px 0 60px}
.hero__title{font-size:clamp(31px,8.5vw,40px);line-height:1.08}
.hero__sub{font-size:16px;margin-top:18px}
.hero__cta{flex-direction:column;align-items:stretch;gap:12px}
.hero__cta .btn{width:100%}
.hero__trust{margin-top:40px}
.logos{gap:18px 22px;font-size:15px}
.tagline{letter-spacing:.18em;font-size:12px}
/* generic sections */
.section{padding:52px 0}
.section__head{margin-bottom:36px}
.section__head h2,.page-hero h1,.quality h2{font-size:clamp(24px,7vw,30px)}
.section__head p{font-size:16px}
/* page hero (catalog/cart/account) */
.page-hero{padding:48px 0 36px}
/* specbar + stats: comfy 2-col on phones */
.specbar__item{padding:16px 12px}
.specbar__v{font-size:14px}
.stats__grid{gap:18px 12px;padding:34px 18px}
.stat__num{font-size:30px}
/* product detail */
.pd__grid{gap:24px}
.pd__media{min-height:300px;padding:18px}
.pd__photo{height:240px}
.pd__buy{gap:14px}
.pd__buy .btn{width:100%}
.pd__sections{margin-top:40px;gap:32px}
/* quality + cta breathing room */
.quality{padding:64px 0}
.cta{padding:10px 16px 60px}
.cta__inner{padding:48px 22px;border-radius:24px}
.cta h2{font-size:clamp(24px,7vw,32px)}
.cta p{font-size:16px}
.cta__buttons{flex-direction:column}
.cta__buttons .btn{width:100%}
/* account / forms */
.auth-card{padding:22px}
/* 16px inputs to stop iOS zoom-on-focus */
.field input,.field select,.search-input,.phone-row select{font-size:16px}
/* footer */
.footer__bottom{flex-direction:column;align-items:flex-start;gap:10px}
}
@media(max-width:380px){
.stats__grid{grid-template-columns:1fr 1fr}
.specbar__grid{grid-template-columns:1fr 1fr}
}
/* Phones: keep 2 products per row (compact cards) */
@media(max-width:680px){
.products-grid{grid-template-columns:1fr 1fr;gap:12px}
.product__media{height:148px}
.product__photo{height:124px}
.product__body{padding:14px;gap:5px}
.product__name{font-size:15px}
.product__desc{font-size:12.5px}
.product__meta{gap:6px;margin:4px 0}
.product__chip{font-size:11px;padding:2px 8px}
.product__foot{flex-direction:column;align-items:stretch;gap:9px;margin-top:6px}
.product__price{font-size:18px}
/* .add-btn est devenu un (lien vers la fiche) : sur mobile il est en pleine
largeur, son texte partait à gauche. On le centre explicitement. */
.add-btn{width:100%;padding:9px;font-size:13px;display:flex;align-items:center;justify-content:center;text-align:center}
.size-opts{gap:6px}
.size-opt{padding:6px 4px;font-size:12px}
.product .vial{transform:scale(.8)}
}
@media(max-width:360px){
.products-grid{gap:10px}
.product__body{padding:11px}
}
/* ============ Floating cart button ============ */
.cart-fab{position:fixed;right:22px;bottom:22px;z-index:140;
display:inline-flex;align-items:center;gap:10px;
padding:13px 20px;border-radius:999px;text-decoration:none;
background:var(--grad);color:#fff;font-weight:700;font-size:15px;letter-spacing:.01em;
box-shadow:0 10px 26px rgba(28,43,84,.30);transition:transform .15s ease,box-shadow .15s ease}
.cart-fab:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(28,43,84,.36)}
.cart-fab svg{display:block;flex:none}
.cart-fab__label{line-height:1}
.cart-fab__count{min-width:22px;height:22px;padding:0 6px;border-radius:999px;
background:#fff;color:var(--ink);font-size:12px;font-weight:800;
display:inline-grid;place-items:center}
.cart-fab:not(.has-items) .cart-fab__count{display:none}
.cart-fab.bump{animation:fabbump .42s ease}
@keyframes fabbump{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-2px) scale(1.1)}}
@media(max-width:680px){
.cart-fab{right:14px;bottom:14px;padding:12px 18px;font-size:14px}
}
/* ============================================================
Épuré — direction clinique/minimale (esprit dermo-labo)
============================================================ */
:root{
--line:#ededee;
--paper-2:#f7f8f8;
--radius:6px;
--radius-lg:10px;
}
body{background:#fff}
/* retirer les décors : texture, halo, filigrane, barre d'accent */
.hero,.page-hero,.section--alt{background-image:none}
.hero__glow{display:none}
.quality::after{display:none}
body::before{display:none}
.section--alt{background-color:var(--paper-2)}
/* plus d'air */
.section{padding:104px 0}
.hero{padding:92px 0 80px}
.section__head{margin-bottom:60px}
/* composants nets et plats */
.btn{border-radius:5px}
.cart-fab{border-radius:6px}
.hero__card{border-radius:10px;box-shadow:0 12px 30px rgba(22,35,63,.10)}
.product{border-radius:8px;box-shadow:none}
.product:hover{transform:none;box-shadow:0 8px 24px rgba(22,35,63,.07);border-color:var(--line)}
.feature{border:none;background:transparent;border-radius:0;padding:24px 0 0;border-top:1px solid var(--line)}
.feature:hover{transform:none;box-shadow:none}
.feature__icon{display:none}
.feature h3{font-size:17px}
.eyebrow::before{content:""} /* retire le marqueur hexagone */
/* titres : trait dégradé conservé mais plus discret */
.section__head h2::after,.page-hero h1::after,.quality h2::after{width:48px;height:2px}
/* section "Qualité" passée en clair (esprit SVR) */
.quality{background:var(--paper-2);color:var(--ink)}
.quality p{color:var(--ink-soft)}
.eyebrow--light{color:var(--violet)}
.checklist li{color:var(--ink)}
.visual-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.visual-card__head,.visual-card__foot{color:var(--ink-soft)}
.chart__axis{background:var(--line)}
/* CTA : on garde un seul bloc accent, plus sobre */
.cta__inner{border-radius:14px}
/* ============================================================
Hero éditorial (clean dermo-labo) + nav
============================================================ */
.hero__split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;text-align:left}
.hero__copy{max-width:580px}
.hero__title{font-size:clamp(40px,6.2vw,72px);line-height:1.02;font-weight:700;letter-spacing:-.025em}
.hero__copy .hero__sub{margin-left:0}
.hero__copy .hero__cta{justify-content:flex-start}
.hero__meta{display:flex;gap:40px;margin-top:46px;padding-top:26px;border-top:1px solid var(--line)}
.hero__meta strong{display:block;font-family:var(--mono);font-size:23px;color:var(--ink);line-height:1}
.hero__meta span{font-size:13px;color:var(--ink-soft);margin-top:4px;display:block}
.hero__media{display:flex;justify-content:center;align-items:center}
.hero__media img{max-height:480px;width:auto;filter:drop-shadow(0 30px 55px rgba(22,35,63,.20))}
.nav__links a{text-transform:uppercase;font-size:13px;letter-spacing:.09em;font-weight:600}
@media(max-width:900px){
.hero__split{grid-template-columns:1fr;gap:28px;text-align:center}
.hero__copy{max-width:none;margin:0 auto}
.hero__copy .hero__cta{justify-content:center}
.hero__meta{justify-content:center;gap:26px}
.hero__media{order:-1}
.hero__media img{max-height:280px}
}
/* ============================================================
Direction "max épuré" — typo fine, presque noir & blanc
============================================================ */
:root{
--ink:#1b1e24; /* near-black neutre */
--ink-soft:#6b7280;
--line:#eceef0;
}
/* Typo géométrique fine (proche du logo) */
body{font-weight:400}
.hero__title,.section__head h2,.page-hero h1,.quality h2,.pd__name,.cta h2,.quote p{
font-weight:300;letter-spacing:-.01em}
.tagline{font-weight:400}
/* on abandonne le monospace -> sans géométrique partout (cohérent, élégant) */
.stat__num,.product__price,.visual-card__foot strong,.sum-row--total strong,.pd__buy .product__price,
.card__row strong,.pd__purity strong,.dash-order__top strong,.spec-table td,.eyebrow,.pill,
.specbar__k,.vial__rule{font-family:'Jost',system-ui,-apple-system,sans-serif !important}
.stat__num,.product__price{font-weight:500}
/* micro-libellés très espacés (editorial) */
.eyebrow{letter-spacing:.22em;font-weight:500;color:var(--ink-soft)}
.specbar__k{letter-spacing:.16em}
/* boutons rectangulaires, capitales fines */
.btn{border-radius:2px;text-transform:uppercase;letter-spacing:.1em;font-weight:500;font-size:13px}
.btn--lg{font-size:13px;padding:17px 32px}
.add-btn{text-transform:uppercase;letter-spacing:.08em;font-weight:500;border-radius:2px}
.nav__links a{font-weight:500}
/* encore plus d'air, titres plus grands et fins */
.section{padding:120px 0}
.hero{padding:104px 0 92px}
.section__head h2,.page-hero h1{font-size:clamp(30px,5vw,50px)}
.hero__title{font-size:clamp(44px,7vw,82px);line-height:1}
/* accent couleur réservé : trait fin sous les titres uniquement */
.section__head h2::after,.page-hero h1::after,.quality h2::after{width:40px;height:2px}
/* cartes & flacon : très sobres */
.product{border:1px solid var(--line)}
.product__media{background:#fafbfb}
.pd__media{background:#fafbfb}
/* ============================================================
Texte des boutons en dégradé + flottement de la fiole
============================================================ */
/* repli : texte bleu plein si background-clip:text non supporté */
.btn--primary,.btn--dark,.btn--ghost,.add-btn{ color:#1f4f93; background:#fff; border:1px solid #dbe1e8; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.btn--primary,.btn--dark,.btn--ghost,.add-btn{
background:var(--grad);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
border:1px solid #dbe1e8;
}
}
.btn--primary:hover,.btn--dark:hover,.btn--ghost:hover,.add-btn:hover{
border-color:#b8c6d6;transform:translateY(-1px);
box-shadow:inset 0 0 0 999px rgba(47,134,192,.06), var(--shadow-sm);
}
/* flottement doux de la fiole en page d'accueil */
.hero__media img{animation:vialFloat 6.5s ease-in-out infinite;will-change:transform}
@keyframes vialFloat{
0% {transform:translateY(0) rotate(-1.2deg)}
50% {transform:translateY(-18px) rotate(1.2deg)}
100% {transform:translateY(0) rotate(-1.2deg)}
}
@media(prefers-reduced-motion:reduce){ .hero__media img{animation:none} }
/* CTA (fond foncé) : bouton primaire rempli blanc + texte dégradé pour rester lisible */
.cta__inner .btn--primary{box-shadow:inset 0 0 0 999px #fff;border-color:transparent}
.cta__inner .btn--primary:hover{box-shadow:inset 0 0 0 999px #eef4fb, var(--shadow-md);transform:translateY(-1px)}
/* ============================================================
Tout en dégradé + boutons remplis arrondis + fiole inclinée + hexagones
============================================================ */
/* ---- 1. Boutons : remplis (dégradé) et arrondis ---- */
.btn{border-radius:999px}
.btn--primary,.btn--dark,.add-btn,.cart-btn{
background:var(--grad);
-webkit-background-clip:border-box;background-clip:border-box;
-webkit-text-fill-color:#fff;color:#fff;
border:1px solid transparent;border-radius:999px;
}
.btn--primary:hover,.btn--dark:hover,.add-btn:hover,.cart-btn:hover{
box-shadow:var(--shadow-md);transform:translateY(-1px);filter:saturate(1.08);
}
.btn--ghost{
background:#fff;border:1px solid #cfd8e3;border-radius:999px;
-webkit-background-clip:border-box;background-clip:border-box;
-webkit-text-fill-color:#1f6aa6;color:#1f6aa6;
}
.cta__inner .btn--primary{box-shadow:none}
.cta__inner .btn--primary:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn--ghost-light{border-radius:999px}
/* ---- 2. Tout le texte en dégradé de marque (repli couleur si non supporté) ---- */
.hero__title,.hero__sub,.tagline,.hero__meta strong,.hero__meta span,
.section__head h2,.section__head p,.eyebrow,
.feature h3,.feature p,
.product__name,.product__desc,.product__price,.product__price small,
.stat__num,.stat__label,
.specbar__k,.specbar__v,
.quality h2,.quality p,.checklist li,
.pd__name,.pd__subtitle,.pd__desc,.pd__section h2,.pd__section p,.pd__list li,.spec-table td,
.quote p,.quote__author strong,.quote__author span,
.page-hero h1,.page-hero p,
.nav__links a,
.cart-h,.auth-title,.dash h2,.dash__email{ color:#23618f; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.hero__title,.hero__sub,.tagline,.hero__meta strong,.hero__meta span,
.section__head h2,.section__head p,.eyebrow,
.feature h3,.feature p,
.product__name,.product__desc,.product__price,.product__price small,
.stat__num,.stat__label,
.specbar__k,.specbar__v,
.quality h2,.quality p,.checklist li,
.pd__name,.pd__subtitle,.pd__desc,.pd__section h2,.pd__section p,.pd__list li,.spec-table td,
.quote p,.quote__author strong,.quote__author span,
.page-hero h1,.page-hero p,
.nav__links a,
.cart-h,.auth-title,.dash h2,.dash__email{
background:var(--grad);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
}
/* garde le check ✓ des listes lisible */
.checklist li::before{-webkit-text-fill-color:#fff;color:#fff}
/* ---- 3. Fiole inclinée + flottement ---- */
@keyframes vialFloat{
0% {transform:translateY(0) rotate(-9deg)}
50% {transform:translateY(-18px) rotate(-5deg)}
100% {transform:translateY(0) rotate(-9deg)}
}
.hero__media img{animation:vialFloat 6.5s ease-in-out infinite;transform-origin:center}
/* ---- 4. Hexagones flottants autour de la fiole ---- */
.hero__media{position:relative;overflow:visible}
.hex{position:absolute;z-index:0;pointer-events:none;
background:var(--grad);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
animation:hexFloat 7s ease-in-out infinite;will-change:transform}
.hero__media img{position:relative;z-index:1}
.hex--1{width:52px;height:58px;top:4%;left:2%;opacity:.22;animation-delay:0s}
.hex--2{width:30px;height:34px;top:24%;right:6%;opacity:.32;animation-delay:1.1s}
.hex--3{width:72px;height:80px;bottom:2%;right:0;opacity:.14;animation-delay:.5s;animation-duration:8.5s}
.hex--4{width:22px;height:25px;bottom:22%;left:8%;opacity:.4;animation-delay:1.8s;animation-duration:6s}
@keyframes hexFloat{
0%,100%{transform:translateY(0) rotate(0)}
50% {transform:translateY(-16px) rotate(12deg)}
}
@media(prefers-reduced-motion:reduce){
.hero__media img,.hex{animation:none}
}
/* ---- 5. Mobile : hexagones + fiole visibles et proportionnés ---- */
@media(max-width:680px){
.hero__media{overflow:visible}
.hex--1{width:36px;height:40px;top:2%;left:4%}
.hex--2{width:22px;height:25px;right:8%}
.hex--3{width:50px;height:56px}
.hex--4{width:18px;height:20px}
}
/* ---- Animations plus rapides ---- */
.hero__media img{animation-duration:3.6s}
.hex{animation-duration:3.8s}
.hex--2{animation-duration:3.2s}
.hex--3{animation-duration:4.4s}
.hex--4{animation-duration:3s}
/* ---- Badge d'économie sur le format avantageux (ex. 20 mg −25%) ---- */
.size-opt{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.size-opt .save{
font-size:10px;font-weight:800;letter-spacing:.02em;line-height:1;
color:#fff!important;-webkit-text-fill-color:#fff!important;
background:linear-gradient(120deg,#ff5a5f,#ff8a3d);
border-radius:999px;padding:3px 7px;white-space:nowrap;
}
/* ---- Fiole : pas d'ombre qui trace le découpage + visibilité mobile ---- */
.hero__media img{filter:none}
.product__photo{filter:drop-shadow(0 10px 16px rgba(22,35,63,.12))}
.pd__photo{filter:drop-shadow(0 16px 26px rgba(22,35,63,.14))}
@media(max-width:900px){
.hero__media{display:flex!important;width:100%;min-height:260px;align-items:center}
.hero__media img{display:block;height:auto;max-height:300px;margin:0 auto}
}
/* ============ Paiement simulé (style Stripe, démo) ============ */
.pay-overlay{position:fixed;inset:0;z-index:300;background:rgba(16,22,38,.55);
backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;
padding:34px 16px;overflow:auto;animation:payFade .2s ease}
@keyframes payFade{from{opacity:0}to{opacity:1}}
.pay-modal{position:relative;width:100%;max-width:420px;background:#fff;border-radius:16px;
padding:26px 24px 22px;box-shadow:0 30px 70px rgba(16,22,38,.4);animation:payUp .25s ease}
@keyframes payUp{from{transform:translateY(14px);opacity:.6}to{transform:translateY(0);opacity:1}}
.pay-close{position:absolute;top:12px;right:14px;border:none;background:none;font-size:24px;
line-height:1;color:#8a93a6;cursor:pointer}
.pay-brand{font-size:13px;color:var(--ink-soft);font-weight:600;display:flex;align-items:center;gap:6px}
.pay-amount{font-size:30px;font-weight:800;margin:4px 0 14px;color:var(--ink);
-webkit-text-fill-color:initial}
.pay-sum{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:14px}
.pay-sum div{display:flex;justify-content:space-between;padding:3px 0;color:var(--ink-soft)}
.pay-form label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:12px 0 6px}
.pay-form input{width:100%;border:1px solid #d7dde6;border-radius:8px;padding:12px 12px;font-size:16px;
font-family:inherit;outline:none;transition:.15s;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.pay-form input:focus{border-color:var(--violet-2);box-shadow:0 0 0 3px rgba(47,134,192,.15)}
.pay-card{border:1px solid #d7dde6;border-radius:8px;overflow:hidden}
.pay-card input{border:none;border-radius:0;box-shadow:none}
.pay-card input[name=card]{border-bottom:1px solid #e6ebf2}
.pay-card__row{display:flex}
.pay-card__row input{width:50%}
.pay-card__row input[name=exp]{border-right:1px solid #e6ebf2}
.pay-btn{width:100%;margin-top:18px;justify-content:center}
.pay-btn[disabled]{opacity:.85;cursor:default}
.pay-spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.5);
border-top-color:#fff;border-radius:50%;animation:paySpin .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes paySpin{to{transform:rotate(360deg)}}
.pay-test{font-size:12px;color:var(--ink-soft);margin-top:12px;line-height:1.5}
.pay-test code{background:var(--bg-soft);padding:1px 5px;border-radius:4px;font-size:11px}
.pay-powered{text-align:center;font-size:12px;color:#9aa3b2;margin-top:10px}
.pay-powered b{color:#635bff;font-weight:700;letter-spacing:-.02em}
/* ---- Badge -X% flottant juste au-dessus du bouton de format ---- */
.size-opts{margin-top:16px}
.size-opt{position:relative;overflow:visible}
.size-opt .save{
position:absolute;top:-10px;left:50%;transform:translateX(-50%);
padding:2px 8px;z-index:3;box-shadow:0 3px 9px rgba(255,90,95,.38);
pointer-events:none;
}
/* badge -X% : décalé sur le côté droit du bouton */
.size-opt .save{left:auto;right:-6px;transform:none}
/* ============================================================
Texture de particules grises (DA marque)
============================================================ */
body,.hero,.page-hero,.section,.section--alt,.quality,.specbar,.stats{
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Ccircle%20cx%3D'79.7'%20cy%3D'136.1'%20r%3D'1.82'%20fill%3D'%239aa3b2'%20opacity%3D'0.11'%2F%3E%3Ccircle%20cx%3D'183.4'%20cy%3D'15.2'%20r%3D'2.21'%20fill%3D'%239aa3b2'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'159.9'%20cy%3D'40.3'%20r%3D'1.62'%20fill%3D'%239aa3b2'%20opacity%3D'0.17'%2F%3E%3Ccircle%20cx%3D'86.9'%20cy%3D'48.4'%20r%3D'0.54'%20fill%3D'%239aa3b2'%20opacity%3D'0.14'%2F%3E%3Ccircle%20cx%3D'153.2'%20cy%3D'117.1'%20r%3D'1.59'%20fill%3D'%239aa3b2'%20opacity%3D'0.23'%2F%3E%3Ccircle%20cx%3D'123.0'%20cy%3D'166.8'%20r%3D'1.64'%20fill%3D'%239aa3b2'%20opacity%3D'0.16'%2F%3E%3Ccircle%20cx%3D'51.4'%20cy%3D'37.7'%20r%3D'0.56'%20fill%3D'%239aa3b2'%20opacity%3D'0.23'%2F%3E%3Ccircle%20cx%3D'101.0'%20cy%3D'1.1'%20r%3D'0.97'%20fill%3D'%239aa3b2'%20opacity%3D'0.41'%2F%3E%3Ccircle%20cx%3D'111.1'%20cy%3D'48.8'%20r%3D'2.39'%20fill%3D'%239aa3b2'%20opacity%3D'0.13'%2F%3E%3Ccircle%20cx%3D'130.5'%20cy%3D'156.6'%20r%3D'1.48'%20fill%3D'%239aa3b2'%20opacity%3D'0.16'%2F%3E%3Ccircle%20cx%3D'115.9'%20cy%3D'125.6'%20r%3D'0.84'%20fill%3D'%239aa3b2'%20opacity%3D'0.42'%2F%3E%3Ccircle%20cx%3D'183.3'%20cy%3D'106.2'%20r%3D'0.97'%20fill%3D'%239aa3b2'%20opacity%3D'0.17'%2F%3E%3Ccircle%20cx%3D'76.2'%20cy%3D'163.0'%20r%3D'0.88'%20fill%3D'%239aa3b2'%20opacity%3D'0.22'%2F%3E%3Ccircle%20cx%3D'107.3'%20cy%3D'179.3'%20r%3D'1.03'%20fill%3D'%239aa3b2'%20opacity%3D'0.25'%2F%3E%3Ccircle%20cx%3D'164.0'%20cy%3D'58.0'%20r%3D'0.86'%20fill%3D'%239aa3b2'%20opacity%3D'0.39'%2F%3E%3Ccircle%20cx%3D'0.7'%20cy%3D'64.3'%20r%3D'2.24'%20fill%3D'%239aa3b2'%20opacity%3D'0.28'%2F%3E%3Ccircle%20cx%3D'186.5'%20cy%3D'170.6'%20r%3D'2.02'%20fill%3D'%239aa3b2'%20opacity%3D'0.39'%2F%3E%3Ccircle%20cx%3D'178.7'%20cy%3D'122.7'%20r%3D'0.68'%20fill%3D'%239aa3b2'%20opacity%3D'0.25'%2F%3E%3Ccircle%20cx%3D'187.6'%20cy%3D'114.7'%20r%3D'1.19'%20fill%3D'%239aa3b2'%20opacity%3D'0.28'%2F%3E%3Ccircle%20cx%3D'34.0'%20cy%3D'23.6'%20r%3D'0.68'%20fill%3D'%239aa3b2'%20opacity%3D'0.40'%2F%3E%3Ccircle%20cx%3D'197.2'%20cy%3D'3.6'%20r%3D'2.19'%20fill%3D'%239aa3b2'%20opacity%3D'0.34'%2F%3E%3Ccircle%20cx%3D'20.9'%20cy%3D'1.7'%20r%3D'0.84'%20fill%3D'%239aa3b2'%20opacity%3D'0.28'%2F%3E%3Ccircle%20cx%3D'145.3'%20cy%3D'177.0'%20r%3D'1.15'%20fill%3D'%239aa3b2'%20opacity%3D'0.33'%2F%3E%3Ccircle%20cx%3D'106.6'%20cy%3D'74.3'%20r%3D'2.31'%20fill%3D'%239aa3b2'%20opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'114.5'%20cy%3D'121.7'%20r%3D'1.40'%20fill%3D'%239aa3b2'%20opacity%3D'0.23'%2F%3E%3Ccircle%20cx%3D'187.8'%20cy%3D'123.4'%20r%3D'0.60'%20fill%3D'%239aa3b2'%20opacity%3D'0.41'%2F%3E%3Ccircle%20cx%3D'199.5'%20cy%3D'115.2'%20r%3D'2.32'%20fill%3D'%239aa3b2'%20opacity%3D'0.38'%2F%3E%3Ccircle%20cx%3D'174.5'%20cy%3D'82.1'%20r%3D'1.90'%20fill%3D'%239aa3b2'%20opacity%3D'0.37'%2F%3E%3Ccircle%20cx%3D'98.4'%20cy%3D'141.8'%20r%3D'0.74'%20fill%3D'%239aa3b2'%20opacity%3D'0.17'%2F%3E%3Ccircle%20cx%3D'12.4'%20cy%3D'75.4'%20r%3D'0.51'%20fill%3D'%239aa3b2'%20opacity%3D'0.11'%2F%3E%3Ccircle%20cx%3D'199.8'%20cy%3D'75.0'%20r%3D'1.71'%20fill%3D'%239aa3b2'%20opacity%3D'0.24'%2F%3E%3Ccircle%20cx%3D'57.9'%20cy%3D'54.4'%20r%3D'2.20'%20fill%3D'%239aa3b2'%20opacity%3D'0.15'%2F%3E%3Ccircle%20cx%3D'71.8'%20cy%3D'140.5'%20r%3D'0.98'%20fill%3D'%239aa3b2'%20opacity%3D'0.21'%2F%3E%3Ccircle%20cx%3D'124.0'%20cy%3D'153.6'%20r%3D'1.00'%20fill%3D'%239aa3b2'%20opacity%3D'0.38'%2F%3E%3Ccircle%20cx%3D'6.3'%20cy%3D'22.8'%20r%3D'2.32'%20fill%3D'%239aa3b2'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'35.6'%20cy%3D'3.4'%20r%3D'1.26'%20fill%3D'%239aa3b2'%20opacity%3D'0.32'%2F%3E%3Ccircle%20cx%3D'100.7'%20cy%3D'151.8'%20r%3D'0.58'%20fill%3D'%239aa3b2'%20opacity%3D'0.18'%2F%3E%3Ccircle%20cx%3D'171.5'%20cy%3D'26.4'%20r%3D'1.98'%20fill%3D'%239aa3b2'%20opacity%3D'0.28'%2F%3E%3Ccircle%20cx%3D'65.6'%20cy%3D'92.2'%20r%3D'2.26'%20fill%3D'%239aa3b2'%20opacity%3D'0.22'%2F%3E%3Ccircle%20cx%3D'189.8'%20cy%3D'136.7'%20r%3D'0.65'%20fill%3D'%239aa3b2'%20opacity%3D'0.34'%2F%3E%3Ccircle%20cx%3D'20.6'%20cy%3D'149.1'%20r%3D'1.44'%20fill%3D'%239aa3b2'%20opacity%3D'0.20'%2F%3E%3Ccircle%20cx%3D'193.1'%20cy%3D'189.6'%20r%3D'1.44'%20fill%3D'%239aa3b2'%20opacity%3D'0.18'%2F%3E%3Ccircle%20cx%3D'12.5'%20cy%3D'76.7'%20r%3D'0.77'%20fill%3D'%239aa3b2'%20opacity%3D'0.30'%2F%3E%3Ccircle%20cx%3D'165.3'%20cy%3D'32.0'%20r%3D'2.26'%20fill%3D'%239aa3b2'%20opacity%3D'0.16'%2F%3E%3Ccircle%20cx%3D'77.2'%20cy%3D'72.2'%20r%3D'2.35'%20fill%3D'%239aa3b2'%20opacity%3D'0.31'%2F%3E%3Ccircle%20cx%3D'78.9'%20cy%3D'65.2'%20r%3D'0.56'%20fill%3D'%239aa3b2'%20opacity%3D'0.19'%2F%3E%3C%2Fsvg%3E");
background-repeat:repeat;
background-size:200px 200px;
}
/* Motif points + croix (texture de marque) — remplace les particules */
body,.hero,.page-hero,.section,.section--alt,.quality,.specbar,.stats{
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%3E%3Ccircle%20cx%3D'10'%20cy%3D'10'%20r%3D'1.3'%20fill%3D'%23c0c6d2'%2F%3E%3Cpath%20d%3D'M27%2010%20H33%20M30%207%20V13'%20stroke%3D'%23cad0da'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M7%2030%20H13%20M10%2027%20V33'%20stroke%3D'%23cad0da'%20stroke-width%3D'1'%2F%3E%3Ccircle%20cx%3D'30'%20cy%3D'30'%20r%3D'1.3'%20fill%3D'%23c0c6d2'%2F%3E%3C%2Fsvg%3E");
background-repeat:repeat;
background-size:40px 40px;
}
/* Motif fin points + croix (densité ajustée à la référence) */
body,.hero,.page-hero,.section,.section--alt,.quality,.specbar,.stats{
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'36'%20height%3D'36'%3E%3Ccircle%20cx%3D'9'%20cy%3D'9'%20r%3D'0.95'%20fill%3D'%23c7ccd6'%2F%3E%3Cpath%20d%3D'M24.7%209%20H29.3%20M27%206.7%20V11.3'%20stroke%3D'%23ccd1da'%20stroke-width%3D'0.9'%2F%3E%3Cpath%20d%3D'M6.7%2027%20H11.3%20M9%2024.7%20V29.3'%20stroke%3D'%23ccd1da'%20stroke-width%3D'0.9'%2F%3E%3Ccircle%20cx%3D'27'%20cy%3D'27'%20r%3D'0.95'%20fill%3D'%23c7ccd6'%2F%3E%3C%2Fsvg%3E");
background-repeat:repeat;
background-size:36px 36px;
}
/* Texture de marque : image fournie, telle quelle (remplace le motif recréé) */
body,.hero,.page-hero,.section,.section--alt,.quality,.specbar,.stats{
background-image:url("../assets/texture3.png");
background-repeat:repeat;
background-size:640px auto;
}
/* La texture n'est plus sur tout le fond -> seulement derrière la fiole */
body,.hero,.page-hero,.section,.section--alt,.quality,.specbar,.stats{background-image:none}
/* Halo moléculaire (ta texture) derrière la fiole flottante du hero */
.hero__media{position:relative}
.hero__backdrop{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(104%,500px);aspect-ratio:1/1;border-radius:50%;
background:
url("../assets/texture-alpha.png") center/240px repeat,
radial-gradient(closest-side, rgba(47,134,192,.18), rgba(63,176,163,.08) 50%, transparent 76%);
-webkit-mask:radial-gradient(closest-side,#000 72%,transparent 100%);
mask:radial-gradient(closest-side,#000 72%,transparent 100%);
z-index:0;pointer-events:none;opacity:1;
}
.hero__media img{position:relative;z-index:2}
.hex{z-index:1}
@media(max-width:680px){ .hero__backdrop{width:min(94%,330px);background-size:200px,auto} }
/* Glissement du flacon lors du changement de dosage */
.pd__media{overflow:hidden}
.vial-swap{backface-visibility:hidden}
/* Effet de zoom léger sur l'image du produit au survol */
.product{transition:box-shadow .25s ease,border-color .25s ease}
.product:hover{box-shadow:0 14px 34px rgba(22,35,63,.13);border-color:transparent;z-index:2;position:relative}
.product__media{overflow:hidden}
.product__photo,.product .vial{transition:transform .35s ease;transform-origin:center;will-change:transform}
.product:hover .product__photo,.product:hover .vial{transform:scale(1.06)}
/* ============================================================
Petits détails & micro-animations
============================================================ */
/* Apparition au défilement — fondu + flou qui se résorbe (easing premium) */
.reveal{opacity:0;transform:translateY(22px);filter:blur(7px);
transition:opacity .75s cubic-bezier(.22,.72,0,1),transform .75s cubic-bezier(.22,.72,0,1),filter .6s ease}
.reveal.is-visible{opacity:1;transform:none;filter:blur(0)}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;filter:none;transition:none} }
/* Barre de progression de lecture en haut */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
background:linear-gradient(90deg,#1f4f93,#2f86c0,#3fb0a3);z-index:300;will-change:transform;pointer-events:none}
/* Nav qui se densifie au scroll */
#nav{transition:box-shadow .3s ease,background-color .3s ease,backdrop-filter .3s ease}
#nav.is-scrolled{box-shadow:0 6px 24px rgba(22,35,63,.10);backdrop-filter:saturate(1.4) blur(10px);background:rgba(255,255,255,.86)}
/* Boutons : reflet qui balaie + ressort au survol/clic */
.btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .25s ease,filter .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--primary::before,.btn--dark::before{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);
animation:btnSheen 4.5s ease-in-out infinite;pointer-events:none}
@keyframes btnSheen{0%{left:-120%}32%{left:170%}100%{left:170%}}
.btn--primary:hover::before,.btn--dark:hover::before{animation-duration:1s}
@media(prefers-reduced-motion:reduce){ .btn--primary::before,.btn--dark::before{animation:none} }
/* Ondulation au clic (ripple) */
.add-btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);
animation:ripple .6s ease-out;pointer-events:none;z-index:0}
.add-btn:not(.btn) .ripple{background:rgba(47,134,192,.22)}
@keyframes ripple{to{transform:scale(2.4);opacity:0}}
.btn > *{position:relative;z-index:1}
/* Carte produit : la pastille de catégorie réagit */
.product__tag{transition:transform .25s ease,box-shadow .25s ease}
.product:hover .product__tag{transform:translateY(-2px);box-shadow:0 6px 16px rgba(22,35,63,.16)}
/* Puces de format : ressort à la sélection */
.size-opt{transition:transform .15s ease,border-color .2s ease,background-color .2s ease,color .2s ease}
.size-opt:hover{transform:translateY(-1px)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
.size-opt.is-active{animation:pop .32s ease}
/* Icônes de features : petit rebond */
.feature{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.feature:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(22,35,63,.12)}
.feature__icon{transition:transform .35s cubic-bezier(.2,.8,.3,1.4)}
.feature:hover .feature__icon{transform:scale(1.18) rotate(-6deg)}
/* Liens du footer & nav : soulignement qui pousse */
.footer__cols a{position:relative}
.footer__cols a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:currentColor;transition:width .25s ease;opacity:.7}
.footer__cols a:hover::after{width:100%}
.nav__links a{position:relative}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;border-radius:2px;
background:linear-gradient(90deg,#2f86c0,#3fb0a3);transition:width .25s ease}
.nav__links a:hover::after,.nav__links a.is-active::after{width:100%}
/* FAB panier : pulsation discrète d'invitation */
@keyframes fabPulse{0%,100%{box-shadow:0 10px 26px rgba(22,35,63,.22)}50%{box-shadow:0 10px 30px rgba(47,134,192,.45)}}
.cart-fab{animation:fabPulse 2.8s ease-in-out infinite}
.cart-fab:hover{animation:none}
/* Titre du hero : léger miroitement du dégradé */
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.hero__title .gradient-text{background-size:200% auto;animation:shimmer 6s linear infinite}
/* Halo du hero : transition douce au parallaxe */
.hero__backdrop{transition:transform .25s ease-out}
/* Lignes du tableau de specs : surbrillance au survol */
.spec-table tbody tr{transition:background-color .2s ease}
.spec-table tbody tr:hover{background:rgba(47,134,192,.06)}
/* Images qui arrivent : fondu */
.product__photo,.pd__photo{transition:transform .35s ease,opacity .3s ease}
/* ============ Barre livraison offerte (panier) ============ */
.ship-bar{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:22px;
box-shadow:0 4px 18px rgba(22,35,63,.05);transition:border-color .3s ease,box-shadow .3s ease}
.ship-bar.is-unlocked{border-color:#3fb0a3;box-shadow:0 6px 22px rgba(63,176,163,.18)}
.ship-bar__head{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:14px;color:var(--ink,#16233f)}
.ship-bar__icon{font-size:18px;transition:transform .4s cubic-bezier(.2,.8,.3,1.5)}
.ship-bar.is-unlocked .ship-bar__icon{transform:translateX(4px) scale(1.12)}
.ship-bar__msg strong{font-weight:700}
.ship-bar__track{height:8px;border-radius:999px;background:#eef2f7;overflow:hidden;position:relative}
.ship-bar__fill{height:100%;width:0;border-radius:999px;position:relative;overflow:hidden;
background:linear-gradient(90deg,#4bc4b2,#2f9c97);
transition:width .55s cubic-bezier(.22,.61,.36,1),background .3s ease}
.ship-bar.is-unlocked .ship-bar__fill{background:linear-gradient(90deg,#46c79a,#2bb58a)}
/* reflet blanc qui revient et repart */
.ship-bar__fill::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);
animation:shipSheen 2.8s ease-in-out infinite}
@keyframes shipSheen{0%{left:-60%}50%{left:130%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){ .ship-bar__fill::after{animation:none;display:none} }
.sum-row #sum-shipping.is-free{color:#2c9d86;font-weight:800}
/* ============ Showcase vidéo de marque ============ */
.showcase{padding:72px 0 40px}
.showcase__head{text-align:center;max-width:680px;margin:0 auto 30px}
.showcase__head .eyebrow{display:inline-block;margin-bottom:12px}
.showcase__head h2{font-size:clamp(28px,4.4vw,46px);line-height:1.05;margin:0 0 10px}
.showcase__head p{color:var(--muted,#5b6b86);font-size:16px;margin:0}
.showcase__frame{position:relative;max-width:1000px;margin:0 auto;padding:10px;border-radius:30px;
background:linear-gradient(180deg,rgba(47,134,192,.12),rgba(63,176,163,.06));
border:1px solid rgba(22,35,63,.08);box-shadow:0 34px 70px rgba(10,30,60,.20)}
.showcase__video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:21px;
background:#06182f;box-shadow:inset 0 1px 1px rgba(255,255,255,.18)}
.showcase__glow{position:absolute;inset:auto 10% -16px 10%;height:60px;border-radius:50%;z-index:-1;
background:radial-gradient(closest-side,rgba(47,134,192,.45),transparent);filter:blur(14px)}
.showcase__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:74px;height:74px;border:none;border-radius:50%;cursor:pointer;display:none;
align-items:center;justify-content:center;color:#fff;
background:linear-gradient(135deg,#2f86c0,#3fb0a3);box-shadow:0 12px 30px rgba(10,30,60,.35);
transition:transform .2s ease}
.showcase__play svg{margin-left:3px}
.showcase__play:hover{transform:translate(-50%,-50%) scale(1.07)}
.showcase__frame.is-paused .showcase__play{display:flex;animation:pop .35s ease}
/* ============ Spot publicitaire animé (fond blanc + transitions) ============ */
.showcase__frame--ad{background:linear-gradient(180deg,rgba(47,134,192,.10),rgba(63,176,163,.06))}
.ad{position:relative;width:100%;aspect-ratio:16/9;border-radius:21px;overflow:hidden;
background:radial-gradient(120% 90% at 15% 0%, #ffffff, #f4f8fc 62%, #eaf2fb 100%);
box-shadow:inset 0 1px 1px rgba(255,255,255,.7)}
.ad::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(38% 50% at 85% 12%, rgba(63,176,163,.16), transparent 70%),
radial-gradient(44% 55% at 10% 92%, rgba(47,134,192,.16), transparent 70%)}
.ad__hex{position:absolute;z-index:1;opacity:.10;
background:linear-gradient(135deg,#2f86c0,#3fb0a3);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
animation:adHex 7s ease-in-out infinite}
.ad__hex--a{top:13%;left:7%;width:70px;height:78px}
.ad__hex--b{bottom:14%;right:9%;width:98px;height:108px;opacity:.08;animation-delay:-2.5s}
.ad__hex--c{top:20%;right:20%;width:42px;height:46px;animation-delay:-4s}
@keyframes adHex{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(8deg)}}
.ad__scene{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;text-align:center;padding:6%;opacity:0;visibility:hidden;
transition:opacity .6s cubic-bezier(.22,.72,0,1),visibility .6s}
.ad__scene.is-active{opacity:1;visibility:visible}
/* Scène logo */
.ad__scene--logo .ad__logo{height:84px;opacity:0;transform:scale(.7)}
.ad__scene--logo .ad__word{height:34px;opacity:0;transform:translateY(14px)}
.ad__scene--logo .ad__tag{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:#7488a3;opacity:0;transform:translateY(10px)}
.ad__scene--logo.is-active .ad__logo{animation:adIn .8s cubic-bezier(.2,.8,.3,1.2) .05s forwards}
.ad__scene--logo.is-active .ad__word{animation:adUp .7s cubic-bezier(.22,.72,0,1) .3s forwards}
.ad__scene--logo.is-active .ad__tag{animation:adUp .7s cubic-bezier(.22,.72,0,1) .48s forwards}
/* Scène fiole */
.ad__scene--vial{flex-direction:row;gap:4%}
.ad__vial{height:80%;max-height:430px;width:auto;filter:drop-shadow(0 24px 30px rgba(20,40,120,.18));
opacity:0;transform:translateY(40px) rotate(-7deg)}
.ad__scene--vial.is-active .ad__vial{animation:adVial 1s cubic-bezier(.2,.8,.3,1) forwards}
.ad__copy{text-align:left;max-width:46%}
.ad__headline{font-size:clamp(26px,4.4vw,50px);font-weight:800;line-height:1.02;opacity:0;transform:translateY(18px)}
.ad__line2{margin-top:10px;color:#5b6b86;font-size:clamp(13px,1.7vw,18px);opacity:0;transform:translateY(14px)}
.ad__scene--vial.is-active .ad__headline{animation:adUp .8s cubic-bezier(.22,.72,0,1) .32s forwards}
.ad__scene--vial.is-active .ad__line2{animation:adUp .8s cubic-bezier(.22,.72,0,1) .52s forwards}
/* Scène preuve */
.ad__big{font-size:clamp(56px,12vw,148px);font-weight:800;line-height:1;opacity:0;transform:scale(.8)}
.ad__sub{color:#5b6b86;font-size:clamp(13px,1.9vw,19px);opacity:0;transform:translateY(12px)}
.ad__rule{width:0;height:3px;border-radius:2px;background:linear-gradient(90deg,#2f86c0,#3fb0a3);margin:4px 0}
.ad__pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;opacity:0;transform:translateY(12px)}
.ad__pills span{font-size:12px;font-weight:600;color:#2f6da0;background:rgba(47,134,192,.10);border-radius:999px;padding:6px 12px}
.ad__scene--proof.is-active .ad__big{animation:adPop .85s cubic-bezier(.2,.8,.3,1.3) forwards}
.ad__scene--proof.is-active .ad__sub{animation:adUp .7s ease .32s forwards}
.ad__scene--proof.is-active .ad__rule{animation:adRule .7s cubic-bezier(.22,.72,0,1) .26s forwards}
.ad__scene--proof.is-active .ad__pills{animation:adUp .7s ease .5s forwards}
/* Scène CTA */
.ad__scene--cta .ad__headline{opacity:0;transform:translateY(18px)}
.ad__btn{opacity:0;transform:translateY(16px) scale(.96)}
.ad__scene--cta.is-active .ad__headline{animation:adUp .8s cubic-bezier(.22,.72,0,1) .1s forwards}
.ad__scene--cta.is-active .ad__btn{animation:adUp .8s cubic-bezier(.2,.8,.3,1.2) .36s forwards}
@keyframes adIn{to{opacity:1;transform:scale(1)}}
@keyframes adUp{to{opacity:1;transform:none}}
@keyframes adPop{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes adVial{to{opacity:1;transform:translateY(0) rotate(-3deg)}}
@keyframes adRule{to{width:120px}}
.ad__progress{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:3}
.ad__progress span{width:22px;height:4px;border-radius:2px;background:rgba(22,35,63,.14);transition:background .3s ease,width .3s ease}
.ad__progress span.is-active{width:30px;background:linear-gradient(90deg,#2f86c0,#3fb0a3)}
@media(max-width:680px){
.ad__scene--vial{flex-direction:column;gap:12px}
.ad__copy{text-align:center;max-width:92%}
.ad__vial{height:auto;max-height:188px}
.ad__scene--logo .ad__logo{height:60px}
.ad__scene--logo .ad__word{height:26px}
}
@media(prefers-reduced-motion:reduce){
.ad__scene{transition:none}
.ad__hex{animation:none}
}
@media(max-width:680px){
.showcase{padding:48px 0 24px}
.showcase__frame{border-radius:22px;padding:7px}
.showcase__video{border-radius:16px}
}
/* ============ Animations premium (soft-skill) ============ */
html{scroll-behavior:smooth}
/* Entrée du hero en cascade : fondu + flou + montée, easing fluide */
.hero--anim .hero__copy > *,
.hero--anim .hero__media{opacity:0;transform:translateY(24px);filter:blur(8px);
will-change:transform,opacity,filter}
.hero--anim.is-in .hero__copy > *{animation:heroIn .9s cubic-bezier(.22,.72,0,1) forwards}
.hero--anim.is-in .hero__media{animation:heroIn 1s cubic-bezier(.22,.72,0,1) .18s forwards}
.hero--anim.is-in .hero__copy > *:nth-child(1){animation-delay:.04s}
.hero--anim.is-in .hero__copy > *:nth-child(2){animation-delay:.11s}
.hero--anim.is-in .hero__copy > *:nth-child(3){animation-delay:.18s}
.hero--anim.is-in .hero__copy > *:nth-child(4){animation-delay:.25s}
.hero--anim.is-in .hero__copy > *:nth-child(5){animation-delay:.32s}
.hero--anim.is-in .hero__copy > *:nth-child(6){animation-delay:.39s}
@keyframes heroIn{to{opacity:1;transform:none;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){
.hero--anim .hero__copy > *,.hero--anim .hero__media{opacity:1;transform:none;filter:none;animation:none}
}
/* Boutons magnétiques : ressort fluide + enfoncement au clic */
.btn--lg{transition:transform .35s cubic-bezier(.22,.72,0,1),box-shadow .25s ease,filter .25s ease}
.btn--lg:active{transform:scale(.97)}
.cart-fab{transition:transform .35s cubic-bezier(.22,.72,0,1),box-shadow .25s ease}
/* Cartes produit : basculement 3D doux au survol (le JS pilote l'angle) */
.product{transform-style:preserve-3d}
.product__media,.product__body{transform:translateZ(0)}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
/* ===========================================================
POLISH PREMIUM — soft-skill · taste-skill · ui-ux-pro-max · redesign
=========================================================== */
/* Rendu typographique plus net */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Eyebrow → badge pilule raffiné (avec pastille dégradée) */
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
background:rgba(47,134,192,.09);border:1px solid rgba(47,134,192,.18);
font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
background:linear-gradient(135deg,#2f86c0,#3fb0a3)}
.eyebrow--light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#eaf6ff}
/* CTA : flèche « button-in-button » sur les grands boutons remplis */
.btn--lg.btn--primary,.btn--lg.btn--dark{padding-right:62px}
.btn--lg.btn--primary::after,.btn--lg.btn--dark::after{
content:"\2192";position:absolute;right:8px;top:50%;transform:translateY(-50%);
width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;
background:rgba(255,255,255,.20);font-size:16px;font-weight:700;color:#fff;z-index:2;
transition:transform .28s cubic-bezier(.2,.8,.3,1.5)}
.btn--lg.btn--primary:hover::after,.btn--lg.btn--dark:hover::after{transform:translateY(-50%) translateX(4px)}
/* Sélection de texte aux couleurs de marque */
::selection{background:rgba(47,134,192,.24);color:#0c2747}
/* Accessibilité : focus clavier bien visible */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.btn:focus-visible{
outline:2px solid #2f86c0;outline-offset:3px;border-radius:10px}
/* Ancrage : les titres ne passent plus sous la nav fixe */
[id]{scroll-margin-top:96px}
/* Retour tactile discret sur mobile */
a,button{-webkit-tap-highlight-color:rgba(47,134,192,.18)}
/* Scrollbar fine aux teintes de marque (desktop) */
@media(pointer:fine){
*{scrollbar-width:thin;scrollbar-color:#9cc3de #eef3f9}
}
/* Logo qui pivote à chaque chargement / rafraîchissement de page */
@keyframes logoSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.brand__mark{animation:logoSpin .9s cubic-bezier(.22,.72,0,1) 1}
@media(prefers-reduced-motion:reduce){ .brand__mark{animation:none} }
/* ===========================================================
LISIBILITÉ — le dégradé reste sur les TITRES et accents,
les textes courants redeviennent unis (plus propres à lire)
=========================================================== */
.hero__sub,.hero__meta span,
.section__head p,.feature p,.product__desc,.stat__label,
.specbar__k,.specbar__v,
.quality p,.checklist li,
.pd__subtitle,.pd__desc,.pd__section p,.pd__list li,.spec-table td,
.quote p,.quote__author strong,.quote__author span,
.page-hero p,
.nav__links a,
.product__price small,
.dash__email{
background:none;-webkit-background-clip:initial;background-clip:initial;
-webkit-text-fill-color:currentColor;
}
.hero__sub,.section__head p,.feature p,.product__desc,.stat__label,
.quality p,.pd__subtitle,.pd__desc,.pd__section p,.pd__list li,
.page-hero p,.hero__meta span,.product__price small,.dash__email{color:#4a5a75}
.specbar__k{color:#7488a3}
.specbar__v,.checklist li,.spec-table td{color:#33435f}
.nav__links a{color:#1d2b45}
.quote p{color:#2c3c5c}
.quote__author strong{color:#16233f}
/* ===========================================================
Témoignages — grille éditoriale 3 colonnes (adapté de 21st.dev)
=========================================================== */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.tcard{position:relative;background:#fff;border:1px solid var(--line,#e6ebf2);border-radius:20px;
padding:30px 26px 26px;display:flex;flex-direction:column;gap:14px;
box-shadow:0 1px 2px rgba(22,35,63,.04);
transition:transform .3s cubic-bezier(.22,.72,0,1),box-shadow .3s ease,border-color .3s ease}
.tcard:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(22,35,63,.12);border-color:transparent}
.tcard__glyph{position:absolute;top:6px;right:22px;font-family:Georgia,serif;font-size:88px;line-height:1;
background:linear-gradient(135deg,#2f86c0,#3fb0a3);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;opacity:.22;pointer-events:none}
.tcard__stars{color:#f0a92e;font-size:16px;letter-spacing:3px;line-height:1}
.tcard blockquote{margin:0;font-size:15.5px;line-height:1.6;color:#3a4a66;font-weight:500}
.tcard__by{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:8px}
.tavatar{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
font-size:14px;font-weight:800;color:#fff;letter-spacing:.5px;
background:linear-gradient(135deg,#1f4f93,#3fb0a3);box-shadow:0 4px 12px rgba(31,79,147,.28)}
.tby__meta{display:flex;flex-direction:column;line-height:1.3}
.tby__meta strong{font-size:14.5px;color:#16233f;font-weight:700}
.tby__meta span{font-size:12.5px;color:#8090a8}
@media(max-width:900px){ .tgrid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto} }
/* ===========================================================
FIX — pastilles « eyebrow » : le texte était rendu invisible
(background-clip:text + fill transparent). On force un texte plein.
=========================================================== */
.eyebrow{
background:rgba(47,134,192,.10);
-webkit-background-clip:border-box;background-clip:border-box;
-webkit-text-fill-color:#2f6da0;color:#2f6da0;
}
.eyebrow--light{
background:rgba(255,255,255,.14);
-webkit-text-fill-color:#eaf6ff;color:#eaf6ff;
}
/* ═══════════════════════════════════════════════════════════════════
REFONTE PRO v70 — dé-slop systématique, DA vectorielle exacte
Cette couche finale fait autorité sur tout ce qui précède.
═══════════════════════════════════════════════════════════════════ */
:root{
/* gradient aligné sur les fichiers vectoriels de marque */
--grad:linear-gradient(115deg,#123A78 0%,#2A9AC2 55%,#16A48F 100%);
--brand-navy:#123A78;
--brand-blue:#2A9AC2;
--brand-teal:#16A48F;
--shadow-sm:0 1px 2px rgba(18,42,84,.05), 0 2px 6px rgba(18,42,84,.04);
--shadow-md:0 6px 16px rgba(18,42,84,.07), 0 16px 40px rgba(18,42,84,.07);
--shadow-lg:0 24px 64px rgba(18,42,84,.14);
}
::selection{background:rgba(42,154,194,.18)}
/* ---------- 1 · Titres : encre pleine, plus de dégradé-texte ---------- */
.hero__title,.section__head h2,.quality h2,.pd__name,.page-hero h1,.cta h2,.quote p,
.gradient-text{
background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
-webkit-text-fill-color:currentColor!important;color:var(--ink);
}
.quality h2,.cta h2{color:#fff}
.hero__title{font-weight:800;letter-spacing:-.028em}
.accent-dot{color:var(--brand-teal)}
.section__head h2{letter-spacing:-.022em}
/* ---------- 2 · Eyebrow : kicker éditorial, plus de pastille ---------- */
.eyebrow,.eyebrow--light{
background:none!important;border:none;padding:0;border-radius:0;
font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;
color:var(--brand-blue);-webkit-text-fill-color:var(--brand-blue);
display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";display:inline-block;width:26px;height:1.5px;
background:var(--grad);opacity:1;border-radius:1px}
.eyebrow--light{color:#9fd8ea;-webkit-text-fill-color:#9fd8ea}
/* ---------- 3 · Hero ---------- */
.tagline{
background:none!important;-webkit-text-fill-color:var(--ink-soft);color:var(--ink-soft);
font-size:12.5px;letter-spacing:.26em;font-weight:600;margin-top:18px;
}
.hero__sub{font-size:17.5px;line-height:1.65;color:var(--ink-soft)}
.hero__backdrop{opacity:.5;filter:blur(4px)}
.hero__media img{filter:drop-shadow(0 34px 48px rgba(18,42,84,.16))}
.hero__meta{border-top:1px solid var(--line);padding-top:22px;gap:0}
.hero__meta div{padding-right:34px;margin-right:34px;border-right:1px solid var(--line)}
.hero__meta div:last-child{border-right:none}
.hero__meta strong{font-size:21px;letter-spacing:-.01em;color:var(--ink);
background:none!important;-webkit-text-fill-color:var(--ink)}
.hero__meta span{font-size:12.5px;letter-spacing:.05em;color:var(--ink-soft)}
/* ---------- 4 · Boutons : plus de reflet en boucle, états sobres ---------- */
.btn{transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease}
.btn::before,.btn::after{display:none!important;animation:none!important}
.btn--primary{background:var(--grad);box-shadow:0 1px 2px rgba(18,42,84,.18), 0 8px 20px rgba(18,58,120,.22)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(18,42,84,.16), 0 12px 28px rgba(18,58,120,.26)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{border:1px solid var(--line);background:#fff}
.btn--ghost:hover{border-color:#c7d3e2;background:#fbfdff;transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}
/* ---------- 5 · Features : icônes trait, cartes hairline ---------- */
.feature{border:1px solid var(--line);box-shadow:none;transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.feature:hover{border-color:#c9d6e6;box-shadow:var(--shadow-md);transform:translateY(-2px)}
.feature__icon{width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
background:#f7fafd;color:var(--brand-navy)}
.feature__icon svg{width:22px;height:22px;display:block}
.feature h3{font-size:16.5px;letter-spacing:-.01em}
.feature p{font-size:14.5px;line-height:1.6}
/* ---------- 6 · Stats : chiffres encre pleine ---------- */
.stat__num,.product__price,.visual-card__foot strong,.sum-row--total strong{
background:none!important;-webkit-background-clip:border-box!important;
-webkit-text-fill-color:var(--ink)!important;color:var(--ink)}
.stat__label{font-size:13px;letter-spacing:.04em;color:var(--ink-soft)}
/* ---------- 7 · Film de marque ---------- */
.filmframe{position:relative;max-width:960px;margin:0 auto;border-radius:var(--radius-lg);
overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#F7F9FC}
.filmframe video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.filmframe__sound{position:absolute;right:16px;bottom:16px;width:40px;height:40px;
display:grid;place-items:center;border-radius:50%;border:1px solid rgba(18,42,84,.14);
background:rgba(255,255,255,.9);backdrop-filter:blur(6px);color:var(--brand-navy);
cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.filmframe__sound:hover{transform:scale(1.06);box-shadow:var(--shadow-md)}
.showcase__glow{display:none}
/* ---------- 8 · Chromatogramme (section qualité) ---------- */
.chroma{margin-top:6px}
.chroma svg{display:block;width:100%;height:170px}
.chroma__peak{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11.5px;
letter-spacing:.08em;color:#b9cfe2;margin-top:10px}
.chroma__value{font-size:20px;color:#fff;letter-spacing:-.01em}
.visual-card{border-radius:18px}
/* ---------- 9 · Témoignages ---------- */
.tcard{border:1px solid var(--line);box-shadow:none;border-radius:16px}
.tcard:hover{box-shadow:var(--shadow-md)}
.tcard__glyph{opacity:.12;font-size:56px;color:var(--brand-blue)}
.tcard__stars{color:var(--brand-blue);font-size:13px;letter-spacing:3px}
.tcard blockquote{font-size:15px;line-height:1.65}
.tavatar{background:#eef4fa;color:var(--brand-navy);font-weight:700;
border:1px solid var(--line)}
/* ---------- 10 · Specbar ---------- */
.specbar{background:#fbfcfe}
.specbar__v b{color:var(--brand-navy)}
/* ---------- 11 · FAQ ---------- */
.acc-item{border:1px solid var(--line);border-radius:12px;box-shadow:none}
.acc-q{font-size:15.5px}
.acc-q span{color:var(--brand-blue)}
/* ---------- 12 · CTA final ---------- */
.cta{background:linear-gradient(135deg,#0d2a56 0%,#123A78 45%,#155e83 100%)}
.cta p{color:#c9dcef}
/* ---------- 13 · Footer ---------- */
.footer .brand__word-img{height:15px}
.footer__brand p{color:#9db1c7;font-size:14px}
.footer h4{letter-spacing:.14em;font-size:11.5px}
.footer__cols a{color:#b9c9dc;font-size:14px}
.footer__cols a:hover{color:#fff}
.footer__bottom p{color:#8698ad;font-size:12.5px}
/* ---------- 14 · Nav & marque vectorielle ---------- */
.brand__mark{height:34px}
.brand__word-img{height:15px}
.nav__links a{font-size:14.5px;letter-spacing:.01em}
.nav__links a:hover{color:var(--brand-navy)}
/* ---------- 15 · FAB panier : discret, n'apparaît qu'avec articles ---------- */
.cart-fab{background:var(--brand-navy);box-shadow:0 10px 26px rgba(18,42,84,.28);
opacity:0;pointer-events:none;transform:translateY(8px);
transition:opacity .25s ease, transform .25s ease}
.cart-fab.has-items{opacity:1;pointer-events:auto;transform:none}
/* ---------- 16 · Accessibilité & mouvement ---------- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
}
html.no-io .reveal{opacity:1!important;transform:none!important}
/* ---------- v70.1 · correctifs ---------- */
/* icônes features : réactivées (une couche antérieure les masquait) */
.feature__icon{display:grid!important;place-items:center;margin-bottom:16px}
.feature:hover .feature__icon{transform:none}
.feature__icon{transition:border-color .2s ease}
/* section qualité : fond clair → titre encre */
.quality h2{color:var(--ink)}
.chroma__peak{color:#8aa3ba}
.chroma__value{color:var(--ink)}
.visual-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md)}
.visual-card__head{color:var(--ink)}
/* petite respiration sous le kicker centré */
.section__head .eyebrow{margin-bottom:14px}
/* ---------- v70.2 · nettoyage final ---------- */
/* plus de texture de points gris — champs propres */
body,.hero,.page-hero,.section,.section--alt,.quality,.specbar,.stats{background-image:none}
/* badge -X% : DA navy, plus de rouge */
.save{background:var(--brand-navy)!important;color:#fff!important;
box-shadow:0 3px 10px rgba(18,42,84,.25)!important}
.page-hero h1{font-weight:750;letter-spacing:-.025em}
/* ---------- v70.3 · finitions revue ---------- */
.page-hero{padding-top:96px}
@media (max-width:520px){
.container{padding:0 20px}
.hero__title{font-size:clamp(34px,10vw,44px)}
}
/* Correctif : theme.js ajoute la classe .is-in au toast, alors que la règle
historique ne ciblait que .toast.show — le toast ne s'affichait jamais. */
.toast.is-in{transform:translate(-50%,0);opacity:1}
/* ═══════════════════════════════════════════════════════════════════
Logos 3D en orbite autour du flacon du hero
Rendus depuis le fichier Blender du logo (assets/source/) : 72 images
d'un balancement de -40° à +40°, assemblées en une bande horizontale
— assets/logo3d-sprite.png.
72 images pour un cycle de 3 s, soit 24 images/seconde : en dessous le
pas devient visible et le mouvement saccade. C'est la contrainte qui
fixe le nombre d'images, pas le poids du fichier.
L'animation fait défiler la bande derrière une fenêtre plutôt que
d'animer `background-position` en pourcentage : sur une bande de N
images, translateX(-100%) parcourt exactement la largeur de l'image,
donc steps(72) tombe pile sur chaque image. Le calcul en pourcentage,
lui, se répartit sur N-1 intervalles et décale toutes les images sauf
la première.
═══════════════════════════════════════════════════════════════════ */
/* La zone d'orbite déborde du cadre du flacon : à droite il y a la marge
de page, à gauche 54 px avant la colonne de texte — d'où l'asymétrie. */
.hero__orbit{position:absolute;top:-6%;right:-8%;bottom:-6%;left:-6%;
pointer-events:none;z-index:1}
.hero__media img{position:relative;z-index:2}
.orbit-logo{
position:absolute;overflow:hidden;
width:var(--s);height:var(--s);
left:var(--x);top:var(--y);
opacity:var(--o,.72);
animation:pp-orbit-float var(--float,9s) ease-in-out var(--delay,0s) infinite;
filter:drop-shadow(0 6px 14px rgba(20,40,120,.18));
}
.orbit-logo i{
display:block;width:7200%;height:100%; /* 72 images côte à côte */
background:url(../assets/logo3d-sprite.png) 0 0 / 100% 100% no-repeat;
animation:pp-orbit-sway 3s steps(72) var(--delay,0s) infinite;
/* Propre couche de composition : le défilement image par image devient
une simple translation GPU, sans repeindre la bande à chaque pas. */
will-change:transform;
}
@keyframes pp-orbit-sway{ to{ transform:translateX(-100%) } }
@keyframes pp-orbit-float{
0%,100%{ transform:translate3d(0,0,0) }
50% { transform:translate3d(var(--dx,4px),var(--dy,-14px),0) }
}
/* Le flacon occupe la bande centrale : les logos se répartissent dans les
deux couloirs libres, quatre à gauche, trois à droite. Tailles, vitesses
et déphasages tous différents pour qu'aucune paire ne batte en rythme. */
.orbit-logo:nth-child(1){--s:clamp(46px, 5.4vw, 78px);--x:2%; --y:9%; --float:9.5s; --delay:-.2s; --dy:-16px;--dx:5px; --o:.84}
.orbit-logo:nth-child(2){--s:clamp(29px, 3.35vw, 48px);--x:9%;--y:31%;--float:11s; --delay:-2.6s;--dy:13px; --dx:6px; --o:.6}
.orbit-logo:nth-child(3){--s:clamp(37px, 4.3vw, 62px);--x:4%; --y:57%;--float:8.6s; --delay:-1.4s;--dy:-14px;--dx:7px; --o:.74}
.orbit-logo:nth-child(4){--s:clamp(24px, 2.7vw, 39px);--x:10%;--y:80%;--float:12s; --delay:-4.2s;--dy:-10px;--dx:4px; --o:.54}
.orbit-logo:nth-child(5){--s:clamp(32px, 3.7vw, 53px);--x:81%;--y:12%;--float:7.8s; --delay:-1.9s;--dy:-12px;--dx:-6px;--o:.68}
.orbit-logo:nth-child(6){--s:clamp(43px, 5vw, 72px);--x:85%;--y:43%;--float:10.4s;--delay:-.9s; --dy:-15px;--dx:-5px;--o:.86}
.orbit-logo:nth-child(7){--s:clamp(26px, 2.9vw, 42px);--x:82%;--y:72%;--float:7.2s; --delay:-3.1s;--dy:11px; --dx:-7px;--o:.58}
/* Même seuil que le hero lui-même (900 px) : au-delà il est en deux colonnes
et les couloirs latéraux existent, en dessous il passe en colonne unique et
les logos se retrouveraient sur le flacon. Un seuil choisi au jugé plutôt
que repris du hero les faisait disparaître alors qu'il y avait la place. */
@media(max-width:900px){ .hero__orbit{display:none} }
@media(prefers-reduced-motion:reduce){
.orbit-logo,.orbit-logo i{animation:none}
.orbit-logo{opacity:calc(var(--o,.72) * .8)}
}
/* ---------- v70.4 · tuiles et boutons ---------- */
/* Boutons : le padding-right de 62px réservait la place d'une flèche `::after`
que la couche v70 supprime en `display:none!important`. La réserve est restée :
pastille trop large, texte décalé de 30px vers la gauche. */
.btn--lg.btn--primary,.btn--lg.btn--dark{padding-right:32px}
/* Tuiles « Pourquoi PurePeptide » : titre et texte étaient restés en dégradé de
marque, hérités de la couche « tout le texte en dégradé ». C'est contraire à la
DA (encre pleine sur les titres) et en désaccord avec les h2 de la même page,
qui sont bien en encre. */
.feature h3{
background:none;-webkit-background-clip:border-box;background-clip:border-box;
-webkit-text-fill-color:var(--ink);color:var(--ink)}
.feature p{
background:none;-webkit-background-clip:border-box;background-clip:border-box;
-webkit-text-fill-color:var(--ink-soft);color:var(--ink-soft)}
/* La couche v70 a rendu la bordure complète aux tuiles mais a laissé le padding
d'une version sans bordure (`24px 0 0`) : le texte touchait le trait. */
.feature{padding:24px;border-radius:var(--radius-lg)}
/* ---------- v70.5 · noirs résiduels et tirets décoratifs ---------- */
/* `--ink` a été redéfini plus haut de #16233f (navy profond) à #1b1e24
(« near-black neutre »), ce qui convient au TEXTE mais pas aux surfaces de
marque. La pastille de filtre active et le toast se retrouvaient en noir franc
au milieu d'une page navy/teal. On les repasse au navy de marque. */
.chip.is-active{background:var(--brand-navy);border-color:var(--brand-navy)}
.toast{background:var(--brand-navy)}
/* Tiret décoratif devant chaque kicker : retiré à la demande. Le kicker garde
ses petites capitales espacées, qui suffisent à le distinguer. */
.eyebrow::before{display:none}
/* Boutons en dégradé : encoches sombres aux extrémités arrondies.
La couche « boutons remplis » pose `background-clip:border-box` et une bordure
de 1px transparente, mais `background-origin` reste à sa valeur par défaut,
`padding-box`. Le dégradé est donc DIMENSIONNÉ sur la boîte de padding et
PEINT jusqu'au bord externe : l'anneau d'1px en trop est comblé par répétition
du motif, si bien que le navy du début réapparaît à droite. Sur un rayon de
999px ce liseré s'étale le long de la courbe et se lit comme une encoche noire.
Aligner l'origine sur la zone de peinture supprime la répétition. */
.btn--primary,.btn--dark,.add-btn,.cart-btn{
-webkit-background-origin:border-box;background-origin:border-box}
/* ---------- v70.6 · graisse des prix ---------- */
/* La couche « on abandonne le monospace → sans géométrique » a posé
`.stat__num,.product__price{font-weight:500}`, ce qui a ramené le prix des
cartes de 800 à 500. La fiche produit y échappait (`.pd__buy .product__price`,
plus spécifique) et le panier aussi : seules les vignettes avaient perdu leur
graisse, d'où l'incohérence d'un prix maigre en carte et gras en fiche. */
.product__price{font-weight:800}
.ci__price,.sum-row--total strong{font-weight:800}
/* Le suffixe « / vial » reste en second registre, il ne devient pas gras. */
.product__price small{font-weight:500}
/* ---------- v70.7 · pourcentages du héros ---------- */
/* La couche « on abandonne le monospace → sans géométrique » a converti tous les
chiffres du site vers Jost, la police de marque… sauf deux endroits, oubliés
dans sa liste de sélecteurs. Résultat sur l'accueil : « ≥ 99% », « 100% » et
« 24h » sortaient en IBM Plex Mono, seuls éléments monospacés d'une page
entièrement en Jost. `inherit` les raccroche à la pile du corps, ce qui les
garde alignés sur la police du site même si celle-ci change un jour. */
.hero__meta strong{font-family:inherit;font-variant-numeric:tabular-nums}
/* Même oubli dans la carte du chromatogramme : la valeur (« 99,4 % ») était bien
en Jost, mais le libellé du pic restait monospacé juste au-dessus. */
.chroma__peak{font-family:inherit}
/* ---------- v70.8 · pages éditoriales ---------- */
/* `page.php` versait le contenu WordPress dans un `.container` nu : aucune règle
n'existait pour `.pp-content`. Trois défauts cumulés rendaient Science,
Qualité et FAQ pénibles à lire :
· 136 caractères par ligne (le confort est à 60-75) ;
· le reset global `*{margin:0}` privait titres, paragraphes et listes de
toute marge — tout était collé, sans rythme vertical ;
· les tableaux sortaient sans bordure ni padding de cellule.
On reprend ici l'anatomie éditoriale déjà utilisée sur la fiche produit
(`.pd__sections`, `.spec-table`), pour que ces pages appartiennent
visiblement au même site. */
.pp-content{max-width:880px}
/* Mesure de lecture : `ch` cale la largeur sur la police réelle, donc 68
caractères quelle que soit la taille choisie. Les tableaux, eux, ont besoin
de toute la colonne. */
.pp-content > p,
.pp-content > ul,
.pp-content > ol{max-width:52ch}
/* Rythme vertical — à reconstruire entièrement après le reset global. */
.pp-content p,
.pp-content ul,
.pp-content ol{margin-bottom:20px;color:var(--ink-soft);font-size:17px;line-height:1.72}
.pp-content > *:last-child{margin-bottom:0}
.pp-content h2{font-size:27px;font-weight:300;letter-spacing:-.018em;line-height:1.2;
margin:56px 0 16px;color:var(--ink)}
.pp-content > h2:first-child{margin-top:0}
.pp-content h3{font-size:18px;font-weight:600;letter-spacing:-.005em;
margin:34px 0 10px;color:var(--ink)}
.pp-content strong{color:var(--ink);font-weight:600}
.pp-content em{color:var(--ink-soft)}
.pp-content a{color:var(--violet);text-decoration:underline;
text-underline-offset:3px;text-decoration-thickness:1px}
.pp-content a:hover{color:var(--brand-navy)}
/* Listes : la puce dégradée du design system, comme `.pd__list`. */
.pp-content ul{list-style:none;display:grid;gap:11px}
.pp-content ul li{position:relative;padding-left:26px}
.pp-content ul li::before{content:"";position:absolute;left:0;top:10px;
width:8px;height:8px;border-radius:50%;background:var(--grad)}
.pp-content ol{padding-left:24px}
.pp-content ol li{margin-bottom:9px}
/* Tableaux : anatomie de `.spec-table`. */
.pp-content table{width:100%;border-collapse:collapse;background:#fff;
border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:26px 0 30px}
.pp-content caption{caption-side:top;text-align:left;font-size:13px;
color:var(--ink-soft);margin-bottom:10px}
.pp-content th,
.pp-content td{padding:13px 18px;font-size:15px;text-align:left;
border-bottom:1px solid var(--line);vertical-align:top}
.pp-content thead th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;
color:var(--ink-soft);font-weight:600;background:var(--bg-soft)}
.pp-content tbody th{color:var(--ink);font-weight:600}
.pp-content tr:last-child th,
.pp-content tr:last-child td{border-bottom:none}
.pp-content tbody tr:hover{background:rgba(47,134,192,.05)}
@media (max-width:680px){
.pp-content h2{font-size:23px;margin-top:42px}
.pp-content p,.pp-content ul,.pp-content ol{font-size:16px}
/* Un tableau à trois colonnes ne tient pas : on le fait défiler
plutôt que de le laisser déborder de la page. */
.pp-content table{display:block;overflow-x:auto}
}
/* ---------- v70.9 · pages éditoriales, signature de marque ---------- */
/* Le point d'accent teal après le titre est la signature du site (héros,
têtes de section). Les pages éditoriales ne l'avaient pas : elles se lisaient
comme du WordPress générique posé dans le gabarit. */
.pp-content h2::after{content:".";color:var(--brand-teal)}
/* Les mots mis en avant passent au navy de marque plutôt qu'à l'encre du corps :
c'est le seul relief typographique de ces pages, autant qu'il porte la couleur. */
.pp-content strong{color:var(--brand-navy)}
/* Mention réglementaire de fin de page : c'est la phrase la plus importante du
site sur le plan légal, elle sortait comme un paragraphe ordinaire. On lui
donne le traitement d'un encadré, dans le registre clinique du reste. */
.pp-content h2:last-of-type + p{
max-width:none;background:var(--bg-soft);border:1px solid var(--line);
border-left:3px solid var(--brand-teal);border-radius:10px;
padding:18px 22px;font-size:15px;color:var(--ink)}
/* ---------- v70.9b · ESSAI : emoji en tête de section ----------
⚠️ Contraire à la DA enregistrée (« icônes au trait, jamais d'emojis »).
Posé en CSS et non dans le contenu : supprimer ce bloc suffit à revenir en
arrière, et les emojis ne polluent ni les métadonnées SEO ni les exports.
Contrepartie : l'ancrage est positionnel — réordonner les sections d'une page
décale les emojis.
⚠️ Ancrage par SLUG (`pp-page-`, posé par le filtre body_class de
functions.php), jamais par `page-id-` : les identifiants de page ne
survivent pas à une migration. Ils avaient décalé de cinq entre le site local
et purepeptide.care, si bien que Science, Qualité et FAQ perdaient leurs
emojis pendant que la Politique de confidentialité et les CGV en héritaient. */
.pp-content h2::before{
font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
font-size:.82em;margin-right:.52em;display:inline-block;vertical-align:2px}
/* Science */
.pp-page-science .pp-content h2:nth-of-type(1)::before{content:"🧬"}
.pp-page-science .pp-content h2:nth-of-type(2)::before{content:"⚗️"}
.pp-page-science .pp-content h2:nth-of-type(3)::before{content:"🔬"}
.pp-page-science .pp-content h2:nth-of-type(4)::before{content:"📈"}
.pp-page-science .pp-content h2:nth-of-type(5)::before{content:"❄️"}
.pp-page-science .pp-content h2:nth-of-type(6)::before{content:"⚠️"}
/* Qualité */
.pp-page-quality .pp-content h2:nth-of-type(1)::before{content:"✅"}
.pp-page-quality .pp-content h2:nth-of-type(2)::before{content:"📊"}
.pp-page-quality .pp-content h2:nth-of-type(3)::before{content:"🔬"}
.pp-page-quality .pp-content h2:nth-of-type(4)::before{content:"❄️"}
.pp-page-quality .pp-content h2:nth-of-type(5)::before{content:"🚫"}
.pp-page-quality .pp-content h2:nth-of-type(6)::before{content:"⚠️"}
/* FAQ */
.pp-page-faq .pp-content h2:nth-of-type(1)::before{content:"🧪"}
.pp-page-faq .pp-content h2:nth-of-type(2)::before{content:"🧊"}
.pp-page-faq .pp-content h2:nth-of-type(3)::before{content:"📦"}
.pp-page-faq .pp-content h2:nth-of-type(4)::before{content:"⚠️"}
/* ---------- v70.10 · panier flottant : survol ---------- */
/* `.cart-fab.has-items{transform:none}` est déclaré APRÈS `.cart-fab:hover`
et à spécificité égale (0,2,0) : il gagne. Or `has-items` est exactement
l'état dans lequel le panier est visible — le survol ne produisait donc
rien. On repasse par `.cart-fab.has-items:hover` (0,3,0), qui tranche
sans dépendre de l'ordre du fichier. */
.cart-fab svg,
.cart-fab__count,
.cart-fab__label{transition:transform .32s cubic-bezier(.22,.72,0,1)}
.cart-fab.has-items:hover{
transform:translateY(-3px) scale(1.035);
box-shadow:0 18px 38px rgba(18,58,120,.34)}
/* Le chariot avance : c'est un panier, il a des roues. Léger, sinon
l'effet vire au gadget sur un site clinique. */
.cart-fab.has-items:hover svg{transform:translateX(3px) rotate(-5deg)}
.cart-fab.has-items:hover .cart-fab__label{transform:translateX(2px)}
/* Le compteur rebondit — la courbe dépasse volontairement 1 avant de revenir. */
.cart-fab.has-items:hover .cart-fab__count{
transform:scale(1.14);
transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
/* Appui : la pastille s'enfonce, on rend le clic tangible. */
.cart-fab.has-items:active{transform:translateY(-1px) scale(.985);
transition:transform .08s ease}
@media (prefers-reduced-motion:reduce){
.cart-fab.has-items:hover,
.cart-fab.has-items:hover svg,
.cart-fab.has-items:hover .cart-fab__label,
.cart-fab.has-items:hover .cart-fab__count{transform:none}
}
/* ---------- v70.11 · bandeau de consentement aux cookies ----------
Composant WordPress uniquement (voir inc/cookie-consent.php), posé ici pour
que le design system reste l'unique source de vérité visuelle.
Le point réglementaire se joue dans le CSS autant que dans le HTML : les deux
boutons doivent avoir le MÊME poids visuel. Un « Decline » plus petit, plus
pâle ou relégué sous le pli suffit à rendre le consentement invalide. Ils
partagent donc la même largeur minimale et la même typographie ; seul le
remplissage les distingue, ce que la CNIL admet. */
.cookiebar{
position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
box-shadow:0 18px 44px rgba(18,42,84,.16);
padding:18px 20px;
opacity:0;transform:translateY(14px);
transition:opacity .26s ease, transform .26s cubic-bezier(.22,.72,0,1);
}
.cookiebar.is-visible{opacity:1;transform:none}
.cookiebar__inner{
max-width:1120px;margin:0 auto;
display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.cookiebar__text{
flex:1 1 380px;margin:0;
font-size:14px;line-height:1.6;color:var(--ink-soft);
/* Le texte du bandeau échappe à la couche « tout le texte en dégradé » :
un paragraphe d'information légale se lit en encre pleine. */
background:none;-webkit-text-fill-color:var(--ink-soft);
}
.cookiebar__text a{color:var(--brand-blue);text-decoration:underline;text-underline-offset:2px}
.cookiebar__actions{display:flex;gap:10px;flex:0 0 auto}
.cookiebar__btn{min-width:132px;justify-content:center}
/* Illustration cookie (v70.16b) : posée à gauche du texte, ne rétrécit pas. */
.cookiebar__cookie{flex:0 0 auto;display:flex;line-height:0}
.cookiebar__cookie svg{display:block}
@media(max-width:640px){
.cookiebar{left:10px;right:10px;bottom:10px;padding:16px}
.cookiebar__inner{gap:14px}
.cookiebar__actions{width:100%}
.cookiebar__btn{flex:1 1 0;min-width:0}
}
@media(prefers-reduced-motion:reduce){
.cookiebar{transition:none}
}
/* Le bandeau passe au-dessus du panier flottant plutôt que de déplacer
celui-ci : il est éphémère, et bouger un élément fixe pendant que la page
peint se voit. Son z-index (9000) est déjà supérieur à celui du .cart-fab. */
/* ---------- v70.12 · apparitions au scroll plus vives ----------
Demande utilisateur (2026-08-08) : les révélations traînaient, surtout la
rangée des 6 cases « pourquoi ». On raccourcit les durées SANS changer
l'effet — même fondu, même montée, même flou qui se résorbe, juste deux
fois plus rapide : 0,75 s -> 0,42 s, et le flou animé (coûteux, source de
saccades) résorbé en 0,3 s au lieu de 0,6 s. `will-change` promeut la
composition GPU pour lisser le rendu. La cascade entre éléments est réduite
dans js/theme.js (70->40 ms, plafond 420->240). Le mouvement réduit reste
respecté par le @media(prefers-reduced-motion) de la couche d'origine. */
.reveal{
transition:opacity .42s cubic-bezier(.22,.72,0,1),
transform .42s cubic-bezier(.22,.72,0,1),
filter .3s ease;
}
/* will-change retiré le 2026-08-09 : appliqué à toutes les révélations, il
créait trop de couches GPU et pénalisait le mobile. La transition seule
suffit. */
/* ---------- v70.13 · hero responsive () ----------
Le hero est passé en pour servir une image légère au mobile
(LCP). `display:contents` efface le wrapper de la mise en page :
l'![]()
redevient l'enfant flex direct de .hero__media, exactement comme
avant — centrage, flottement et halo inchangés. */
.hero__media picture{display:contents}
/* ---------- v70.14 · densité mobile ----------
Demande utilisateur (2026-08-09) : sur mobile la page faisait ~18 écrans.
Cause : une couche tardive (.section{padding:120px 0}, .hero{104px 0 92px})
avait écrasé les variantes mobiles d'origine (52-64px) — même motif que les
bugs v70 déjà documentés. On restaure un espacement compact SOUS 900px
seulement. Le desktop (>900px) garde ses 120px : rien ne change au-dessus. */
@media (max-width: 900px){
.section{padding:56px 0}
.hero{padding:40px 0 52px}
.quality{padding:52px 0}
.section__head{margin-bottom:36px}
}
@media (max-width: 600px){
.section{padding:46px 0}
.hero{padding:30px 0 44px}
.section__head{margin-bottom:28px}
}
/* ---------- v70.15 · flacons produits plus présents sur mobile ----------
Inspection à 320px : dans les cartes 2 colonnes, le flacon tombait à ~61px de
large (image bridée à 124px de haut), perdu dans la carte. On l'agrandit sous
680px, et on rend le bouton d'ajout plus facile à toucher. Media query
uniquement : le desktop est strictement inchangé. */
@media (max-width: 680px){
.product__media{height:176px}
.product__photo{height:156px}
.product .btn,.product .add_to_cart_button{min-height:40px;padding-top:9px;padding-bottom:9px}
}
/* ---------- v70.16 · widget Trustpilot dans le hero ----------
Placé après « Learn more » dans .hero__cta. PC : .hero__cta est en row → le
widget s'aligne à côté des boutons. Mobile (≤680px) : .hero__cta passe en
colonne → le widget tombe dessous. On l'aligne verticalement avec les boutons
et on borne la largeur pour qu'il ne déborde pas du hero. */
.hero__trustpilot{display:flex;align-items:center;margin-top:4px}
/* Widget en data-style-width:100% + data-style-alignment:center : l'iframe
remplit la boîte et centre son contenu (« Great · étoiles · Trustpilot » + le
disclaimer d'avis). Boîte à 280px sur desktop ; sur mobile elle prend toute la
largeur et se centre sous les deux boutons, eux-mêmes centrés pleine largeur. */
.hero__trustpilot .trustpilot-widget{width:280px;max-width:100%}
@media(max-width:680px){
.hero__trustpilot{justify-content:center;width:100%}
.hero__trustpilot .trustpilot-widget{width:100%}
}
/* ---------- v70.17 · hero mobile : stats + Trustpilot (2026-08-13) ----------
Les stats (.hero__meta) avaient des séparateurs à 34px de marge : ~391px de
large sur un écran de 320px → « 24h Shipping » sortait de l'écran. On les met
en grille 3 colonnes égales qui rentrent, séparateurs resserrés. Le Trustpilot
ne déborde plus (il héritait de cette largeur). Media query ≤680px, PC intact. */
@media (max-width: 680px){
.hero__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;padding-top:20px}
.hero__meta div{padding-right:10px;margin-right:0;border-right:1px solid var(--line)}
.hero__meta div:last-child{border-right:none;padding-right:0}
.hero__meta strong{font-size:19px}
.hero__trustpilot{max-width:100%}
.hero__trustpilot .trustpilot-widget{width:100%;max-width:100%}
}
/* ---------- v70.18 · barre FDA Disclaimer (bas de page) ----------
Mention légale exigée par le Federal Food, Drug, and Cosmetic Act, posée en
bas du pied de page (footer.php), sur toutes les pages. Présentée en panneau
discret sur le navy du pied : filet d'accent en dégradé de marque à gauche,
icône de conformité au trait, kicker en capitales, lien souligné en survol. */
.fda-bar{margin-top:30px}
.fda-bar__panel{position:relative;display:flex;gap:16px;align-items:flex-start;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
border-radius:16px;padding:20px 22px 20px 24px;overflow:hidden}
.fda-bar__panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.fda-bar__icon{flex:0 0 auto;display:flex;color:#6f9fd0;margin-top:1px}
.fda-bar__icon svg{display:block}
.fda-bar__body{min-width:0}
.fda-bar__label{margin:0 0 5px;color:#aebfd4;font-weight:700;font-size:11px;
letter-spacing:.16em;text-transform:uppercase}
.fda-bar__text{margin:0;color:#8091a6;font-size:12px;line-height:1.75}
.fda-bar__link{color:var(--brand-blue);white-space:nowrap;text-decoration:none;font-weight:600;
border-bottom:1px solid rgba(47,134,192,.5);padding-bottom:1px}
.fda-bar__link:hover{color:#fff;border-bottom-color:#fff}
@media(max-width:600px){
.fda-bar__panel{padding:16px 16px 16px 18px;gap:12px}
.fda-bar__icon svg{width:20px;height:20px}
}
/* ---------- v70.19 · page Disclaimer : chapô + encart notice ----------
Améliore la lecture d'une page dense : un chapô en encre navy pose le cadre,
et la mention FDA — la plus importante — est présentée en encart (accent teal
à gauche, icône de conformité). L'icône est en data-URI CSS et non dans le
contenu, pour que WordPress ne la filtre pas au moment de l'enregistrement.
Les classes .disc-* n'existent que dans cette page : la règle reste générale. */
.pp-content .disc-lead{max-width:54ch;margin:0 0 34px;font-size:20px;line-height:1.55;
color:var(--brand-navy);font-weight:400}
.pp-content .disc-note{display:flex;gap:16px;align-items:flex-start;margin:6px 0 34px;
background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--brand-teal);
border-radius:14px;padding:22px 24px}
.pp-content .disc-note::before{content:"";flex:0 0 auto;width:26px;height:26px;margin-top:1px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f86c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.5v5c0 4.6-3 7.8-7 9-4-1.2-7-4.4-7-9v-5L12 3z'/%3E%3Cpath d='M9 12l2.2 2.2L15 10.2'/%3E%3C/svg%3E") center/contain no-repeat}
.pp-content .disc-note__body{min-width:0}
.pp-content .disc-note__body > p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink)}
.pp-content .disc-note__body > p.disc-note__title{margin:0 0 7px;color:var(--brand-navy);
font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:640px){
.pp-content .disc-lead{font-size:18px;margin-bottom:28px}
.pp-content .disc-note{padding:18px 18px;gap:12px}
}
/* ---------- v70.20 · CTA final : les boutons tiennent dans le cadre (mobile) ----------
La section « Ready to equip your lab? » (front-page.php, .cta__buttons) débordait
sur petit écran : .btn porte white-space:nowrap + .btn--lg un padding de 32px, si
bien que « EXPLORE THE CATALOG » (capitales espacées, insécable) dépasse la largeur
du cadre .cta__inner. Les lignes 660-661 empilaient bien la boîte mais ne levaient
pas le nowrap. On empile, on lève le nowrap, et on resserre le padding sous 680px.
Spécificité (0,2,0) + position en fin de fichier : robuste même si 660-661 tombent. */
@media (max-width: 680px){
.cta__buttons{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px}
.cta__buttons .btn{
width:100%;max-width:100%;
white-space:normal;overflow-wrap:anywhere;
padding-left:22px;padding-right:22px;text-align:center;
}
}
/* ---------- v70.21 · fiole du hero remontée (desktop) ----------
.hero__split est une grille align-items:center : la colonne gauche (kicker,
grand titre, sous-titre, CTA, Trustpilot) est plus haute que la fiole (480px),
qui se retrouvait centrée avec un grand vide AU-DESSUS et le bas coupé par la
ligne de flottaison. On aligne la fiole en haut et on la remonte pour combler
ce vide. Desktop uniquement (≥901px) : sous 900px la fiole passe en order:-1,
centrée, et ne doit pas bouger. */
@media (min-width: 901px){
.hero__media{align-self:flex-start;margin-top:-28px}
}
/* ---------- v70.22 · CTA final : padding vertical du cadre restauré (mobile) ----------
Le cadre en dégradé porte DEUX classes : `container cta__inner`. Sous 520px,
`.container{padding:0 20px}` (couche v70.3) est déclarée APRÈS
`.cta__inner{padding:48px 22px}` et, à spécificité égale (0,1,0), l'emporte :
le padding vertical retombe à 0, si bien que le titre « Ready to equip your
lab? » colle au haut du cadre et le bouton « Create an account » à son bas —
les deux boutons paraissent mal positionnés. Le sélecteur `.cta .cta__inner`
(0,2,0) bat `.container` sans dépendre de l'ordre et rend son souffle au cadre.
Même motif que les bugs v70 déjà documentés (couche tardive qui annule une
règle antérieure). */
@media (max-width: 680px){
.cta .cta__inner{padding:48px 22px}
}
/* ---------- v70.23 · fiche produit : titre à la DA de l'aperçu (gras) ----------
Le titre de la fiche (.pd__name) était en Jost 300 (fin) — plus fin que son
propre sous-titre en gras juste en dessous, et surtout à l'opposé du titre de
l'APERÇU produit (.product__name, Jost 700) que l'utilisateur prend pour
référence. Cause : .pd__name est bien posé en 700 (ligne 587) mais la couche
« titres fins de display » (ligne 805) le repasse à 300 avec le hero et les
têtes de section. On réaligne UNIQUEMENT la fiche produit sur l'aperçu, sans
toucher aux autres titres du site : .single-product .pd__name (0,2,0) bat la
règle de groupe (0,1,0) quel que soit l'ordre.
COULEUR : l'aperçu (.product__name) hérite du noir par défaut #000 ; la fiche
recevait #1b1e24 (near-black, --ink) via la règle de groupe qui peint en
`-webkit-text-fill-color:currentColor !important`. Pour matcher exactement
l'aperçu, on force le noir sur les DEUX propriétés (le text-fill-color en
!important pour battre celui de la règle de groupe, notre sélecteur étant plus
spécifique). */
.single-product .pd__name{
font-weight:700;
color:#000;
-webkit-text-fill-color:#000 !important;
}
/* ---------- v70.24 · sélecteur de langue (en-tête) ----------
Bouton compact à la DA dans .nav__actions : globe au trait + code langue +
chevron, dans le registre des boutons ghost de l'en-tête. Menu déroulant en
carte clinique. Ouverture en CSS pur (survol + focus-within), aucune dépendance
JS. Rendu par le thème via pp_language_switcher() ; les langues viennent de
Polylang quand il est actif. */
.lang-switch{position:relative;display:inline-flex}
.lang-switch__btn{
display:inline-flex;align-items:center;gap:6px;
height:40px;padding:0 12px;
background:#fff;border:1px solid #cfd8e3;border-radius:999px;
color:#1f4f93;font-family:inherit;font-size:12px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.lang-switch__btn:hover{background:var(--bg-soft);border-color:#b8c6d8;color:#123a78}
.lang-switch__globe{flex:0 0 auto}
.lang-switch__chev{flex:0 0 auto;transition:transform .2s ease;opacity:.7}
.lang-switch:hover .lang-switch__chev,
.lang-switch:focus-within .lang-switch__chev{transform:rotate(180deg)}
.lang-switch__menu{
position:absolute;top:calc(100% + 8px);right:0;z-index:1200;
min-width:194px;margin:0;padding:6px;list-style:none;
background:#fff;border:1px solid var(--line);border-radius:14px;
box-shadow:0 18px 44px rgba(18,42,84,.16);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.lang-switch__menu li{margin:0;padding:0}
.lang-switch__menu li::before{content:none}
.lang-switch:hover .lang-switch__menu,
.lang-switch:focus-within .lang-switch__menu{opacity:1;visibility:visible;transform:none}
.lang-switch__item{
display:flex;align-items:center;gap:11px;
padding:9px 12px;border-radius:9px;
color:var(--ink-soft);text-decoration:none;font-size:14px;font-weight:500;
transition:background .15s ease,color .15s ease;
}
.lang-switch__item:hover{background:var(--bg-soft);color:var(--ink)}
.lang-switch__item.is-active{color:var(--brand-navy);font-weight:600}
.lang-switch__flag{font-size:17px;line-height:1;flex:0 0 auto}
.lang-switch__name{white-space:nowrap}
/* Deux instances : --desk (dans .nav__actions, desktop) et --mob (barre du haut,
mobile, groupée avec le burger dans .nav__mobtools). Par défaut on masque la
mobile et son conteneur ; le CSS mobile inverse. */
.lang-switch--mob{display:none}
.nav__mobtools{display:none}
/* Aperçu admin (Polylang pas encore actif) : signale les langues à venir. */
.lang-switch.is-preview .lang-switch__item[data-preview]{opacity:.55}
.lang-switch.is-preview .lang-switch__item[data-preview]::after{
content:"soon";margin-left:auto;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-soft);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
/* ---------- v70.25 · sélecteur de langue STABLE dans la barre du haut (mobile) ----------
Version corrigée. Le sélecteur de .nav__actions se repliait dans le menu burger
à l'ouverture — et son dropdown y occupait ~256px de vide, « déplaçant tout ».
On garde donc une instance DÉDIÉE (--mob) directement dans la barre du haut,
avant le burger : elle ne se replie pas et reste stable à l'ouverture du menu.
Le sélecteur --desk (dans .nav__actions) est masqué sur mobile ; .nav__actions
reprend son comportement d'origine (masqué en barre, compte + panier dans le
menu ouvert). */
@media (max-width: 900px){
.lang-switch--desk{display:none}
.nav__mobtools{display:flex;align-items:center;gap:10px}
.lang-switch--mob{display:inline-flex}
.lang-switch--mob .lang-switch__btn{height:38px;padding:0 11px}
/* Le gap de 24px du nav était trop large : logo + (langue+burger) dépassaient
de ~8px la largeur dispo et le groupe langue/burger tombait sur une 2e ligne
à l'ouverture du menu. Resserré pour garder la barre du haut sur UNE ligne. */
.nav__inner{gap:12px}
}
/* ---------- v70.26 · suggestion BAC Water sur le panier ----------
Encart d'ajout du solvant de reconstitution, sous les articles du panier
(pp_cart_bac_water_suggestion). Carte clinique à accent teal, dans le registre
des encarts du site (même famille que .disc-note / .fda-bar__panel). */
.cart-addon{
display:flex;align-items:center;gap:18px;margin-top:22px;
background:var(--bg-soft);border:1px solid var(--line);
border-left:3px solid var(--brand-teal);border-radius:14px;padding:15px 18px;
}
.cart-addon__media{flex:0 0 auto;width:58px;height:58px;display:flex;align-items:center;justify-content:center}
.cart-addon__media img{max-width:100%;max-height:58px;width:auto}
.cart-addon__body{flex:1 1 auto;min-width:0}
.cart-addon__kicker{margin:0 0 3px;font-size:11px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--brand-navy)}
.cart-addon__title{margin:0 0 3px;font-size:16px;font-weight:700;color:var(--ink)}
.cart-addon__desc{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.cart-addon__foot{flex:0 0 auto;display:flex;align-items:center;gap:14px;margin:0}
.cart-addon__price{font-weight:700;color:var(--ink);white-space:nowrap}
.cart-addon__btn{white-space:nowrap}
@media(max-width:640px){
.cart-addon{flex-wrap:wrap;gap:12px 14px}
.cart-addon__body{flex:1 1 150px}
.cart-addon__foot{width:100%;justify-content:space-between}
}
/* ---------- v70.27 · portail de vérification (âge + usage recherche) ----------
Voile plein écran à l'entrée du site (inc/age-gate.php). Toujours présent dans
le HTML (compatible cache) ; masqué dès que la classe pp-verified est posée
(cookie), avant le premier rendu pour les visiteurs déjà vérifiés. */
html:not(.pp-verified){overflow:hidden}
:root.pp-verified .pp-agegate{display:none}
.pp-agegate{
position:fixed;inset:0;z-index:10000;
display:flex;align-items:center;justify-content:center;
padding:24px;overflow:auto;
background:rgba(12,26,51,.55);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.pp-agegate__card{
width:100%;max-width:520px;background:#fff;border-radius:20px;
box-shadow:0 30px 80px rgba(12,26,51,.4);
padding:38px 36px;text-align:center;
}
.pp-agegate__logo{height:20px;width:auto;margin:0 auto 22px;display:block}
.pp-agegate__kicker{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--brand-navy)}
.pp-agegate__intro{margin:0 0 24px;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.pp-agegate__intro a{color:var(--brand-blue);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.pp-agegate__check{
display:flex;align-items:flex-start;gap:12px;text-align:left;
padding:12px 14px;margin-bottom:10px;border:1px solid var(--line);border-radius:12px;
cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.pp-agegate__check:hover{border-color:#cfd8e3;background:var(--bg-soft)}
.pp-agegate__check input{margin-top:1px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--brand-navy);cursor:pointer}
.pp-agegate__check span{font-size:13.5px;line-height:1.5;color:var(--ink)}
.pp-agegate__btn{width:100%;margin-top:14px;justify-content:center}
.pp-agegate__btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.25);transform:none;box-shadow:none}
.pp-agegate__btn:disabled:hover{transform:none;box-shadow:none;filter:grayscale(.25)}
@media(max-width:560px){
.pp-agegate__card{padding:30px 22px;border-radius:16px}
}
/* ---------- v70.28 · FAB panier : ombre propre, sans halo pulsant ----------
`.cart-fab` portait une animation `fabPulse` infinie (2,8 s) qui faisait
clignoter son ombre en un halo bleu vif (rgba(47,134,192,.45)) — perçu comme
mal designé et trop insistant, surtout sur mobile. On retire ce pulse et on
pose une ombre nette et sobre. L'animation ponctuelle `.bump` à l'ajout au
panier (spécificité 0,2,0) reste intacte. */
.cart-fab{animation:none;box-shadow:0 8px 22px rgba(18,42,84,.20)}
.cart-fab:hover{box-shadow:0 12px 28px rgba(18,42,84,.26)}
@media(prefers-reduced-motion:reduce){ .cart-fab{animation:none} }
/* ---------- v70.29 · pastille « voir les tests Janoshik » (hero) ----------
Sur le modèle de ptm-peptide.com : petit lien-pastille près du hero qui renvoie
aux tests du labo indépendant (Janoshik). Accent teal de la marque, point
« vérifié » avec halo, icône bouclier-check au trait. */
.hero__jano{
display:inline-flex;align-items:center;gap:9px;
margin-top:22px;padding:9px 15px;
background:#fff;border:1px solid var(--brand-teal);border-radius:999px;
font-size:13px;font-weight:600;color:var(--brand-navy);text-decoration:none;
box-shadow:0 3px 12px rgba(22,164,143,.12);
transition:box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.hero__jano:hover{background:var(--bg-soft);box-shadow:0 8px 20px rgba(22,164,143,.22);transform:translateY(-1px)}
.hero__jano__dot{width:8px;height:8px;border-radius:999px;background:var(--brand-teal);flex:0 0 auto;
box-shadow:0 0 0 3px rgba(22,164,143,.18)}
.hero__jano__ico{color:var(--brand-teal);flex:0 0 auto}
.hero__jano__txt{white-space:nowrap}
.hero__jano__arrow{color:var(--brand-teal);flex:0 0 auto;transition:transform .18s ease}
.hero__jano:hover .hero__jano__arrow{transform:translateX(3px)}
/* ---------- v70.30 · fiche produit : panneau média laissé À L'ORIGINE ----------
Deux tentatives de combler le vide sous la boîte du flacon sur PC ont été
REJETÉES par l'utilisateur le 2026-08-17 : position:sticky (« j'aime pas
que la fiole scroll ») puis align-self:stretch (« l'image est trop grande,
mets-la comme avant »). Décision : le panneau reste tel que le design
d'origine le pose (min-height 420px, vide assumé sous la boîte). Cette
couche est volontairement VIDE de règles — elle documente l'arbitrage pour
qu'aucune session future ne « répare » ce vide une troisième fois. */
/* ---------- v70.31 · refonte pro — ruban conformité, hero XL, marquee, footer navy, profondeur ----------
Montée du NIVEAU d'exécution au standard refinedbiolabs/aminoclub, SANS
toucher à la DA (encre navy sur les titres, dégradé réservé aux CTAs,
kickers en petites capitales sans tiret). Voir docs/refonte-design-2026-08.md,
phase 1. Cinq sous-blocs, chacun annoté. */
/* --- 1 · Ruban de conformité (header.php, .ruo-bar) ---
Barre fine tout en haut, AVANT le et donc HORS de
l'élément sticky : elle défile avec la page, la nav seule reste collée à
top:0. Conséquences vérifiées : le menu mobile (.nav.menu-open .nav__links,
positionné en absolu à top:68px DANS .nav) ne bouge pas, et le
[id]{scroll-margin-top:96px} reste juste — seule la nav (68px) recouvre le
contenu ancré une fois le ruban sorti de l'écran. Pas de lien, pas de
fermeture : c'est une mention, pas une bannière. */
.ruo-bar{background:var(--brand-navy);color:rgba(255,255,255,.92);text-align:center;
padding:8px 18px;font-size:10.5px;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;line-height:1.6}
.ruo-bar__sep{display:inline-block;margin:0 12px;color:#4fc9b4}
@media(max-width:680px){
.ruo-bar{font-size:9.5px;letter-spacing:.1em;padding:7px 12px;line-height:1.7}
.ruo-bar__sep{margin:0 8px}
}
/* --- 2 · Hero XL ---
Échelle montée (~64-84px sur desktop), graisse ramenée à 700, interlignage
resserré. Le mot porteur (« Purity, ») passe en TEAL PLEIN via .hero__accent
— couleur unie, jamais un dégradé de texte (DA). Le span n'existe que dans
le thème ; le site statique partage les autres règles sans le span, et reste
sélecteur-compatible. La règle v70 « titres en encre » pose
-webkit-text-fill-color:currentColor!important sur .hero__title : la
déclaration DIRECTE sur le span l'emporte sur l'héritage, pas besoin de
surenchère. */
.hero__title{font-size:clamp(46px,7.4vw,84px);line-height:.98;font-weight:700;letter-spacing:-.03em}
.hero__title .hero__accent{color:var(--brand-teal);-webkit-text-fill-color:var(--brand-teal)}
.hero__sub{font-size:19px;line-height:1.62}
/* Cette couche étant déclarée APRÈS les variantes mobiles historiques (≤680px
et ≤520px), il faut les re-poser TOUTES LES DEUX : la règle racine du hero XL
les battrait sinon à spécificité égale (titre ET sous-titre). */
@media(max-width:680px){
.hero__title{font-size:clamp(34px,9vw,52px);line-height:1.04}
.hero__sub{font-size:16px}
}
@media(max-width:520px){
.hero__title{font-size:clamp(34px,10.5vw,46px);line-height:1.04}
}
/* --- 3 · Marquee de preuves (front-page.php, sous la barre labo) ---
Ruban défilant en petites capitales, points médians teal. Nos vérités
uniquement — pas de chiffre inventé. Boucle sans couture : la piste contient
DEUX groupes identiques (chacun rend la liste deux fois pour dépasser la
largeur d'un écran large) et translate de -50 %, soit exactement un groupe.
Sous prefers-reduced-motion, la règle globale v70 annule déjà toute
animation ; on le redit explicitement — le ruban reste lisible, figé sur son
premier groupe. Survol = pause, pour laisser lire. */
.marquee{overflow:hidden;background:var(--brand-navy);padding:13px 0}
.marquee__track{display:flex;align-items:center;width:max-content;
animation:ppMarquee 30s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;flex:0 0 auto}
.marquee__item{font-size:11px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.88);white-space:nowrap}
.marquee__dot{margin:0 22px;color:#4fc9b4;font-size:13px;line-height:1}
@keyframes ppMarquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
.marquee__track{animation:none}
}
@media(max-width:680px){
.marquee{padding:10px 0}
.marquee__item{font-size:10px;letter-spacing:.14em}
.marquee__dot{margin:0 14px}
}
/* --- 4 · Footer navy profond ---
Le pied quitte le #0c0a1f (noir violacé, hors palette) pour un navy dérivé
de --brand-navy, et toutes ses teintes de texte suivent (gris BLEUTÉS, plus
de violet). Le sigle de marque, dessiné pour fond clair, reçoit le petit
coup de clair admis par l'arbitrage (« filtre CSS propre ») pour que son
segment navy ne se fonde pas dans le fond. Le panneau FDA devient un encart
à liseré AMBRÉ doux (registre aminoclub) — texte strictement inchangé. */
/* Le lien du panneau FDA restait en --brand-blue : 4,44:1 sur le nouveau fond,
juste sous le seuil AA. Éclairci pour repasser largement au-dessus. */
.fda-bar__link{color:#6fc6e8}
.footer{background:linear-gradient(180deg,#0f2e60 0%,#0a2148 55%,#081c3e 100%);color:#a9bdd8}
.footer .brand__mark{filter:brightness(1.3)}
.footer__brand p{color:#93a9c8}
.footer__cols a{color:#b7c9df}
.footer__cols a:hover{color:#fff}
.footer__bottom{border-top-color:rgba(255,255,255,.1)}
.footer__bottom p{color:#8199b8}
.footer__legal a{color:#9db3d0}
.footer__legal a:hover{color:#fff}
.fda-bar__panel{background:rgba(226,178,92,.06);border-color:rgba(226,178,92,.3)}
.fda-bar__panel::before{background:linear-gradient(180deg,#e8be74,#c8913f)}
.fda-bar__icon{color:#d9ac5e}
.fda-bar__label{color:#e7cd96}
.fda-bar__text{color:#9fb0c9}
/* --- 5 · Profondeur : ombres étagées + rayons plus généreux ---
Trois niveaux d'ombre DOUCE et large (jamais de noir dur, teinte navy de la
palette), appliqués aux surfaces déjà cartes. Les rayons remontent là où le
design est déjà arrondi (la direction « épuré » les avait écrasés à 6-10px).
Les ombres du .cart-fab (v70.28) et du portail d'âge (v70.27) sont des
arbitrages récents : on ne les reprend pas. */
:root{
--shadow-soft:0 1px 2px rgba(18,42,84,.04), 0 8px 20px rgba(18,42,84,.05);
--shadow-card:0 2px 6px rgba(18,42,84,.05), 0 20px 48px rgba(18,42,84,.09);
--shadow-float:0 12px 28px rgba(18,42,84,.12), 0 36px 90px rgba(18,42,84,.16);
}
.feature{background:#fff;border-radius:16px;box-shadow:var(--shadow-soft)}
.feature:hover{box-shadow:var(--shadow-card)}
.product{border-radius:16px;box-shadow:var(--shadow-soft);
transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease}
.product:hover{box-shadow:var(--shadow-card);transform:translateY(-3px)}
.cart-summary{border-radius:20px;box-shadow:var(--shadow-card)}
/* Colonne d'achat de la fiche : le panneau des garanties devient une carte
blanche (report : « la colonne d'achat est une CARTE »). L'HABILLAGE de
.pd__media, lui, ne bouge pas — géométrie gelée par v70.30. */
.pd__perks{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft)}
.visual-card{box-shadow:var(--shadow-card)}
.acc-item{border-radius:14px;box-shadow:var(--shadow-soft)}
.ci{border-radius:14px;box-shadow:var(--shadow-soft)}
.cart-addon{box-shadow:var(--shadow-soft)}
.auth-card{box-shadow:var(--shadow-card)}
.lang-switch__menu{box-shadow:var(--shadow-float)}
.hero__card{box-shadow:var(--shadow-float)}
/* ---------- v70.32 · refonte pro — boutique : packshot, cartes catalogue, colonne d'achat ----------
Chantier B de la refonte (docs/refonte-design-2026-08.md, phase 1) : la fiche
produit et les cartes du catalogue montent au niveau refinedbiolabs/aminoclub
SANS toucher à la DA (dégradé de marque réservé aux CTAs et accents, encre
navy sur les titres). Trois sous-blocs annotés. Garde-fous respectés : la
GÉOMÉTRIE de .pd__media est gelée par v70.30 (ni sticky, ni étirée, flacon à
360px) — seul son HABILLAGE change ici. */
/* --- 1 · Packshot en compositing CSS (fiche produit) ---
La boîte blanche devient une scène de marque : deux voiles radiaux navy et
teal TRÈS dilués (≈10-13 % sur fond clair — clinique, pas criard) aux coins
opposés, sur une base à peine dégradée. Le flacon s'incline de −5° façon
studio via .pd__stage, un CONTENEUR ajouté par le gabarit WordPress :
js/shop.js (swapVial) écrase `transform` en style INLINE sur l'img à chaque
changement de dose — une rotation posée sur l'img serait perdue au premier
clic. Sur le site statique, .pd__stage n'existe pas : le fond s'applique, la
rotation non (même modèle que .hero__accent en v70.31, sélecteur-compatible).
L'ombre au sol vit sur .pd__stage::before : la rotation du conteneur crée un
contexte d'empilement, donc son z-index:-1 la peint DERRIÈRE le flacon mais
DEVANT le fond de .pd__media. */
.pd__media{
background:
radial-gradient(110% 90% at 12% 6%, rgba(18,58,120,.11), transparent 55%),
radial-gradient(120% 100% at 88% 94%, rgba(22,164,143,.13), transparent 58%),
linear-gradient(150deg,#f7fafd 0%,#f1f7f6 100%);
border-radius:20px;
box-shadow:var(--shadow-soft);
}
.pd__stage{position:relative;transform:rotate(-5deg)}
.pd__stage::before{content:"";position:absolute;z-index:-1;left:50%;bottom:-16px;
width:170px;height:30px;transform:translateX(-50%);
background:radial-gradient(50% 50% at 50% 50%, rgba(18,42,84,.22), transparent 72%)}
/* Ombre portée allongée du flacon (deux drop-shadows étagés, teinte navy). */
.pd__photo{filter:drop-shadow(0 26px 22px rgba(18,42,84,.16)) drop-shadow(0 8px 9px rgba(18,42,84,.09))}
@media(max-width:680px){
.pd__stage::before{width:120px;height:22px;bottom:-12px}
}
/* --- 2 · Cartes catalogue ---
Même scène de fond que la fiche (uniforme sur les six catégories : la DA n'a
qu'une palette de marque, pas une couleur par famille), ombre au sol sous le
flacon (::after sous l'img repassée en z-index:1 — l'étiquette catégorie est
à z-index:3 et reste au-dessus), coins plus généreux. Le « View » devient un
CTA PLEIN pleine largeur en pied de carte — dégradé de marque, donc SANS
bordure : le piège v70.5 (dégradé répété dans l'anneau d'une bordure
transparente) ne peut pas se produire. Survol de carte : élévation douce,
et PLUS AUCUN zoom d'image (le scale(1.06) d'une couche antérieure est
neutralisé ; le scale(.8) mobile du vial CSS legacy est re-posé). */
.product{border-radius:18px}
.product__media{
background:
radial-gradient(120% 100% at 15% 0%, rgba(18,58,120,.10), transparent 55%),
radial-gradient(130% 110% at 85% 100%, rgba(22,164,143,.12), transparent 60%),
linear-gradient(150deg,#f7fafd 0%,#f2f8f7 100%);
}
.product__media::after{content:"";position:absolute;left:50%;bottom:9px;width:120px;height:16px;
transform:translateX(-50%);pointer-events:none;
background:radial-gradient(50% 50% at 50% 50%, rgba(18,42,84,.18), transparent 72%)}
.product__photo{position:relative;z-index:1;
filter:drop-shadow(0 12px 14px rgba(18,42,84,.18))}
.product:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.product:hover .product__photo,.product:hover .vial{transform:none}
.product__foot{flex-direction:column;align-items:stretch;gap:12px;margin-top:14px}
.product .add-btn{display:flex;align-items:center;justify-content:center;width:100%;
background:var(--grad);color:#fff;border:0;border-radius:12px;
padding:13px 16px;font-size:14px;font-weight:700;text-align:center;
box-shadow:0 6px 16px rgba(18,58,120,.16)}
.product .add-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(18,58,120,.24)}
/* Cartes compactes ≤680px (2 par rangée) : le CTA suit le registre réduit —
la règle mobile existante sur .add-btn (0,1,0) perdrait sinon contre
.product .add-btn (0,2,0), média ou pas. */
@media(max-width:680px){
.product .add-btn{padding:10px 12px;font-size:13px;border-radius:10px}
}
/* ≤680px et non 600 : la règle legacy `.product .vial{transform:scale(.8)}`
vit dans le media query 680 — la re-pose doit couvrir le même intervalle,
sinon entre 601 et 680px le survol ferait sauter la fiole de .8 à 1. */
@media(max-width:680px){
.product:hover .vial{transform:scale(.8)}
}
/* --- 3 · Colonne d'achat en carte (fiche produit) ---
.pd__info devient un panneau arrondi XL à ombre étagée (--shadow-card,
v70.31), comme la carte d'achat de la référence. Les espacements internes
respirent (+20-30 % sur les marges d'origine). En mobile ≤680px, le panneau
redevient fluide : plus d'ombre, plus de bordure, plus de padding — la carte
n'a de sens que face à la colonne image. */
.pd__info{background:#fff;border:1px solid var(--line);border-radius:24px;
box-shadow:var(--shadow-card);padding:38px 36px}
.pd__purity{margin-bottom:22px}
.pd__desc{margin-bottom:30px}
.pd__label{margin-bottom:10px}
.pd .size-opts{margin-top:20px;gap:10px}
.pd__buy{gap:24px;margin:30px 0 26px}
.pd__perks{padding:24px;gap:12px;margin:12px 0 20px}
@media(max-width:680px){
.pd__info{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
}
/* ---------- v70.33 · accueil aminoclub — hero scindé, bande de stats, rythme des fonds, marquee iconé, décor CTA ----------
Chantier A de la refonte « design limite identique à aminoclub.com/us, mais
avec ma DA » (demande utilisateur). On reproduit la STRUCTURE du modèle —
hero coupé en deux avec flacon géant incliné, carte de stats qui chevauche
le hero, alternance de fonds pleine largeur, ruban défilant iconé, décor de
mini-fioles sur le CTA — réhabillée à la DA PurePeptide : encre navy sur les
titres, dégradé de marque réservé aux CTAs, icônes au trait, Jost.
Les classes .hero--panel, .statband, .section--sky et .cta__decor n'existent
QUE dans le thème WordPress (front-page.php) : le site statique partage
cette feuille sans les utiliser. Seul le restyle de .stats (fond teal pâle)
touche les deux vitrines — voulu. Cinq sous-blocs annotés. */
/* --- 1 · Hero scindé (.hero--panel) ---
Fond blanc à gauche, panneau teinté doux (navy/teal très pâles) pleine
hauteur à droite, posé en ::before absolu depuis le centre du viewport
jusqu'au bord droit. Le .hero de base a déjà position:relative et
overflow:hidden : c'est lui qui clippe le flacon débordant. Le flacon est
en ABSOLU, ancré au BAS de sa colonne (align-self:stretch) : sa hauteur
suit celle de la colonne de texte (~80 % du hero) et son dépassement de
-150px sous une section paddée à 110px garantit qu'il est coupé par le bas
de section quelle que soit la hauteur du texte. Incliné 11°, statique — le
vialFloat de la couche « flottement » est neutralisé ici (un flacon absolu
animé par des keyframes qui écrasent transform perdrait rotation ET
centrage). width/height/fetchpriority de l'img sont inchangés (LCP). */
.hero--panel{background:#fff;padding:96px 0 110px}
.hero--panel::before{content:"";position:absolute;top:0;bottom:0;right:0;
left:calc(50% + 20px);z-index:0;
background:
radial-gradient(120% 90% at 80% 100%, rgba(22,164,143,.10), transparent 60%),
linear-gradient(168deg,#eaf2fb 0%,#e9f5f2 100%)}
.hero--panel .hero__split{position:relative;z-index:1}
.hero--panel .hero__media{position:relative;align-self:stretch;min-height:480px}
.hero--panel .hero__media img{
position:absolute;left:50%;bottom:-150px;
height:calc(100% + 170px);max-height:none;width:auto;
transform:translateX(-50%) rotate(11deg);transform-origin:50% 60%;
animation:none;
filter:drop-shadow(0 42px 64px rgba(18,42,84,.26));
}
/* ≤900px : split abandonné, comme le hero actuel — flacon réduit AU-DESSUS du
texte (order:-1 de la couche d'origine), centré, sans inclinaison. Les
règles racines ci-dessus (0,2,1) battraient les variantes mobiles
historiques (0,1,1) : on re-pose tout. Le panneau disparaît. */
@media(max-width:900px){
.hero--panel{padding:40px 0 52px;background:var(--paper)}
.hero--panel::before{display:none}
.hero--panel .hero__media{align-self:auto;min-height:0;position:static}
.hero--panel .hero__media img{
position:static;height:auto;max-height:280px;bottom:auto;left:auto;
transform:none;filter:drop-shadow(0 30px 55px rgba(22,35,63,.20));
animation:vialFloat 6.5s ease-in-out infinite;
}
}
/* Re-pose du garde-fou reduced-motion : la règle historique (0,1,1) perdrait
contre la re-pose mobile ci-dessus (0,2,1). Déclaré APRÈS elle, exprès. */
@media(prefers-reduced-motion:reduce){
.hero--panel .hero__media img{animation:none}
}
/* --- 2 · Bande de stats qui chevauche le hero (.statband) ---
Remplace la .specbar du thème (le statique garde la sienne) : carte blanche
arrondie à ombre étagée (--shadow-card, v70.31), remontée de 52px sur le
hero — le motif « Guarantee » d'aminoclub. Pastilles d'icône au trait sur
fonds pastel déclinés de la palette (navy/bleu/teal), valeur en gras,
libellé gris. Le z-index passe au-dessus du hero (DOM suivant + z-index). */
.statband{position:relative;z-index:5;margin-top:-52px;padding-bottom:56px}
.statband__card{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
background:#fff;border:1px solid var(--line);border-radius:20px;
box-shadow:var(--shadow-card);padding:26px 28px}
.statband__item{display:flex;align-items:center;gap:14px;padding:0 8px;min-width:0}
.statband__ico{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
border-radius:12px}
.statband__ico svg{display:block}
.statband__ico--navy{background:rgba(18,58,120,.08);color:var(--brand-navy)}
.statband__ico--blue{background:rgba(42,154,194,.12);color:var(--brand-blue)}
.statband__ico--teal{background:rgba(22,164,143,.10);color:var(--brand-teal)}
.statband__txt{min-width:0}
.statband__txt strong{display:block;font-size:22px;line-height:1;font-weight:700;
letter-spacing:-.01em;color:var(--ink)}
.statband__txt span{display:block;font-size:13px;color:var(--ink-soft);margin-top:5px}
/* ≤900px : le hero mobile n'a que 52px de padding bas — un chevauchement de
52px collerait la carte au contenu. Adouci. (Déclaré APRÈS la règle racine,
sinon elle gagnerait à spécificité égale.) */
@media(max-width:900px){
.statband{margin-top:-32px}
}
@media(max-width:680px){
.statband{margin-top:-24px;padding-bottom:36px}
.statband__card{grid-template-columns:1fr 1fr;gap:16px 8px;padding:18px 14px;border-radius:16px}
.statband__item{gap:10px;padding:0}
.statband__ico{width:36px;height:36px;border-radius:10px}
.statband__ico svg{width:16px;height:16px}
.statband__txt strong{font-size:17px}
.statband__txt span{font-size:11.5px;margin-top:3px}
}
/* --- 3 · Rythme des fonds pleine largeur ---
Alternance nette façon aminoclub : hero blanc+panneau → marquee navy →
catalogue BLANC → stats teal pâle → « Why PurePeptide » bleu pâle →
qualité (paper-2, existant) → FAQ blanc → CTA navy. Les paddings desktop
des .section sont déjà à 120px (couche « max épuré ») ; la bande de stats
chiffrées .stats reçoit son propre registre. La re-pose mobile du padding
de .stats__grid est nécessaire : la règle racine ci-dessous battrait la
variante historique ≤680px à spécificité égale. */
.section--sky{background:#eef4fa}
.stats{background:#ecf7f4;border-top:0;border-bottom:0;padding:72px 0}
.stats__grid{padding:0 24px}
@media(max-width:680px){
.stats{padding:44px 0}
.stats__grid{padding:0 18px;gap:18px 12px}
}
/* --- 4 · Marquee iconé ---
Chaque item du ruban navy reçoit une icône au trait blanche 14px (fiole,
bouclier, globe, horloge, flocon, cadenas — SVG maison en currentColor,
dessinés dans front-page.php). Les points médians teal restent. */
.marquee__item{display:inline-flex;align-items:center;gap:8px}
.marquee__ico{display:block;flex:0 0 auto;opacity:.85}
@media(max-width:680px){
.marquee__ico{width:12px;height:12px}
}
/* --- 5 · Décor de mini-fioles sur le CTA final (.cta__decor) ---
Comme la section bulk d'aminoclub : petites cartes arrondies
semi-transparentes contenant vial-mini.png, éparpillées en absolu DERRIÈRE
le contenu, rotations variées, opacité ~.35. STATIQUES (aucune animation,
rien à couper en reduced-motion), aria-hidden, masquées ≤680px. Le contenu
du CTA repasse devant via z-index ; overflow:hidden clippe les cartes qui
mordent les bords arrondis du cadre. */
.cta__inner{position:relative;overflow:hidden}
.cta__inner > :not(.cta__decor){position:relative;z-index:1}
.cta__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta__minivial{position:absolute;display:flex;align-items:center;justify-content:center;
width:70px;height:90px;background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);border-radius:16px;opacity:.35}
.cta__minivial img{display:block;width:35px;height:60px}
.cta__minivial--1{top:13%;left:5%;transform:rotate(-10deg)}
.cta__minivial--2{bottom:15%;left:13%;transform:rotate(7deg)}
.cta__minivial--3{top:9%;right:7%;transform:rotate(12deg)}
.cta__minivial--4{bottom:12%;right:15%;transform:rotate(-8deg)}
.cta__minivial--5{top:44%;left:-18px;transform:rotate(16deg)}
.cta__minivial--6{top:40%;right:-16px;transform:rotate(-14deg)}
@media(max-width:680px){
.cta__decor{display:none}
}
/* ---------- v70.34 · hero--panel compacté — retour utilisateur « le hero est trop gros » ----------
Le hero scindé de v70.33 mangeait tout l'écran en 1440px : titre à 84px,
96/110px de padding, colonne média à 480px minimum. Resserré d'un cran
(titre 64px max, paddings 64/88, média 380px, débord de fiole réduit),
SANS toucher au hero du site statique : tout est scopé .hero--panel.
Chaque règle racine posée ici est re-déclarée dans ses media queries,
sinon elle battrait les variantes ≤900/≤680/≤520 des couches v70.31 et
v70.33, déclarées plus haut à spécificité égale ou moindre (piège
documenté des couches tardives). */
.hero--panel{padding:64px 0 88px}
.hero--panel .hero__title{font-size:clamp(40px,5.4vw,64px)}
.hero--panel .hero__sub{font-size:17px}
.hero--panel .hero__media{min-height:380px}
.hero--panel .hero__media img{height:calc(100% + 120px);bottom:-110px}
@media(max-width:900px){
.hero--panel{padding:40px 0 52px}
.hero--panel .hero__media{min-height:0}
.hero--panel .hero__media img{height:auto;bottom:auto}
}
@media(max-width:680px){
.hero--panel .hero__title{font-size:clamp(34px,9vw,52px)}
.hero--panel .hero__sub{font-size:16px}
}
@media(max-width:520px){
.hero--panel .hero__title{font-size:clamp(34px,10.5vw,46px)}
}
/* ---------- v70.35 · boutons et nav au registre des références — casse normale, texte plus gros ----------
Retour utilisateur : « je veux vraiment le design comme les 2 sites, les
boutons etc, ça fait trop HTML ». Mesuré dans Chrome sur aminoclub.com/us
et refinedbiolabs.com (2026-08-20) : leurs boutons font 40-48px de haut,
texte 14-16px, graisse 500-600, CASSE DE PHRASE, letter-spacing quasi nul,
fonds pleins. Les nôtres portaient le motif du kicker — 13px, capitales,
.1em d'espacement (couche « max épuré », l.1063) — appliqué à des
composants d'ACTION : c'est précisément ce qui « fait HTML ». Idem pour la
nav (13px capitales). Les capitales venaient du CSS seul : les sources
sont déjà en casse de phrase (« Explore the catalog », « View »,
« Panier »), la bascule est donc purement CSS, pour les deux vitrines.
Le dégradé de marque des CTAs et la pilule (DA) ne bougent pas ; les
kickers .eyebrow, les micro-étiquettes et le marquee RESTENT en petites
capitales — c'est leur rôle éditorial, que les références utilisent aussi. */
.btn{text-transform:none;letter-spacing:.01em;font-weight:600;font-size:15px;padding:12px 24px}
.btn--lg{font-size:16px;padding:16px 32px}
.add-btn{text-transform:none;letter-spacing:.01em;font-weight:600;font-size:14px}
/* Le « View » plein des cartes produit (refined : 44px, casse normale) */
.product .add-btn{font-size:15px;padding:12px 14px}
/* Nav en casse normale, comme les deux références */
.nav__links a{text-transform:none;font-size:15px;letter-spacing:.005em;font-weight:500}
/* Re-poses mobiles : mes règles racines, déclarées en dernier, battraient à
spécificité égale les variantes ≤680px posées plus haut dans le fichier. */
@media(max-width:680px){
.product .add-btn{font-size:14px;padding:10px 12px}
.btn--lg{font-size:15px;padding:14px 26px}
}
/* ---------- v70.36 · hero : la fiole générique FLOTTE à nouveau — retour utilisateur ----------
« je préfère la fiole hero qui flotte comme avant, et mets celle PurePeptide
sans produit ». On abandonne le flacon absolu incliné débordant de v70.33 :
la fiole redevient STATIQUE, centrée dans sa colonne, animée du flottement
d'origine. Le panneau teinté du hero scindé reste. L'image est désormais
`vial-purepeptide-angle.png` (fiole de marque sans produit), dont
l'inclinaison ~10° est DANS LES PIXELS : le vialFloat historique
(rotate -9°) la redresserait visuellement — d'où des keyframes dédiées,
oscillation douce autour de 0. Chaque propriété posée par v70.33/v70.34
(position, left, bottom, height, transform, animation) est explicitement
neutralisée ici ; le garde reduced-motion et le max-height mobile sont
RE-POSÉS après coup, sinon la règle racine, déclarée en dernier, les
battrait à spécificité égale. */
.hero--panel .hero__media img{
position:static;left:auto;bottom:auto;height:auto;max-height:500px;width:auto;
transform:none;transform-origin:center;
animation:vialFloatPanel 6.5s ease-in-out infinite;will-change:transform;
filter:drop-shadow(0 34px 58px rgba(18,42,84,.22));
}
@keyframes vialFloatPanel{
0% {transform:translateY(0) rotate(0deg)}
50% {transform:translateY(-16px) rotate(-2.4deg)}
100% {transform:translateY(0) rotate(0deg)}
}
@media(max-width:900px){
.hero--panel .hero__media img{max-height:280px}
}
@media(prefers-reduced-motion:reduce){
.hero--panel .hero__media img{animation:none}
}
/* ---------- v70.37 · boutons PLEINS navy, façon références — le dégradé quitte les boutons ----------
Deuxième passe après v70.35 (« les boutons sont moches, je veux vraiment un
design de ces 2 sites ») : la typographie ne suffisait pas, c'est le
DÉGRADÉ qui tranche avec les références. Mesuré : aminoclub = pilule noire
PLEINE (#131315), refined = pilule violette PLEINE — aucun des deux ne met
de dégradé sur un bouton, et le CTA du hero porte une flèche. Nos boutons
passent donc en NAVY PLEIN (--brand-navy, l'encre de marque). Le dégradé
navy→bleu→teal reste sur les accents (logo, hero__accent, pastilles) —
il ne fait que quitter les boutons. Décision utilisateur du 2026-08-20,
qui amende la règle « dégradé réservé aux CTAs » de la DA.
Sur le CTA final (fond navy), le bouton primaire s'inverse en blanc/navy,
comme les sections sombres des deux références. */
.btn--primary,.btn--dark{background:var(--brand-navy);color:#fff;
box-shadow:0 1px 2px rgba(18,42,84,.14),0 6px 16px rgba(18,58,120,.14)}
.btn--primary:hover,.btn--dark:hover{background:#0d2c5c;transform:translateY(-1px);
box-shadow:0 2px 4px rgba(18,42,84,.16),0 10px 22px rgba(18,58,120,.2)}
.add-btn{background:var(--brand-navy);border-color:transparent}
.add-btn:hover{background:#0d2c5c}
.product .add-btn{background:var(--brand-navy)}
.product .add-btn:hover{background:#0d2c5c}
/* ⚠️ -webkit-text-fill-color : l'ère « boutons blancs à texte dégradé »
(l.1087) a laissé un text-fill #fff restauré en l.1122 — il PRIME sur
`color` et rendait ce libellé blanc sur blanc (seule la flèche, en stroke
currentColor, restait visible). On le re-pose donc explicitement. */
.cta__inner .btn--primary{background:#fff;color:var(--brand-navy);
-webkit-text-fill-color:var(--brand-navy);box-shadow:none}
.cta__inner .btn--primary:hover{background:#eaf1fa;color:var(--brand-navy);
-webkit-text-fill-color:var(--brand-navy);
transform:translateY(-1px);box-shadow:var(--shadow-md)}
/* Flèche des grands CTAs (SVG enfant, posé dans les gabarits — les ::after
des boutons restent neutralisés par la couche v70). */
.btn .btn__arrow{display:block;flex:0 0 auto;transition:transform .18s ease}
.btn:hover .btn__arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
.btn .btn__arrow{transition:none}
.btn:hover .btn__arrow{transform:none}
}
/* ---------- v70.38 · carte produit entièrement cliquable — lien étiré ----------
Demande utilisateur : « quand on clique sur le rectangle du produit, ça
affiche la fiche » (avant : seuls l'image et View étaient cliquables).
Motif « stretched link » : le ::after du lien du NOM (présent et pointant
vers la fiche dans les DEUX vitrines) s'étire sur toute la carte — pas de
JS, sémantique inchangée pour clavier et lecteurs d'écran. Le ::after ne
peut pas vivre sur .add-btn : la couche « ripple » (l.1373) le positionne
relative + overflow:hidden, ce qui le confinerait au bouton.
Les commandes internes repassent AU-DESSUS de l'overlay : les tuiles de
format (.size-opts, qui changent prix et flacon sans naviguer) et le
.add-btn — lien « View » sur le thème, mais BOUTON d'ajout au panier sur
le site statique : sous l'overlay, il deviendrait inerte. */
.product{position:relative;cursor:pointer}
.product .product__name::after{content:"";position:absolute;inset:0;z-index:1}
.product .size-opts,.product .add-btn{position:relative;z-index:2}
/* ---------- v70.39 · en-tête : compte et panier en boutons-icônes, drapeau sur le sélecteur ----------
Demande utilisateur : icône de personne à la place de « My account », icône
de panier à la place de « Cart », et le drapeau de la langue courante à la
place du globe + « EN » (le markup vit dans header.php et
pp_language_switcher(), functions.php). Motif des deux références : rond de
44px, pastille de compteur en coin. Le libellé texte reste dans
.nav-ico__label — masqué visuellement (lecteurs d'écran), RÉAFFICHÉ dans
le menu burger où les boutons redeviennent des rangées pleine largeur. */
.nav__actions .nav-ico{width:44px;height:44px;padding:0;justify-content:center;border-radius:999px}
.nav-ico svg{display:block;flex:0 0 auto}
.nav-ico .nav-ico__label{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Pastille de compteur en coin — SCOPÉE .nav-ico : le header du site
statique a le même #cart-count dans son bouton « Panier » texte, qu'on ne
touche pas. ⚠️ .btn porte overflow:hidden (couche ripple, l.1362) : sans
overflow:visible ici, la pastille serait rognée. Et .cart-btn span (l.548)
peint tous les spans du bouton : l'ID re-pose tout. */
.nav__actions .cart-btn.nav-ico{overflow:visible;position:relative}
.cart-btn.nav-ico #cart-count{position:absolute;top:-4px;right:-4px;z-index:1;
min-width:19px;height:19px;padding:0 5px;border-radius:999px;
background:var(--brand-teal);color:#fff;border:2px solid #fff;
font-size:11px;font-weight:700;line-height:1;
display:grid;place-items:center}
/* Sélecteur de langue : le drapeau (police Twemoji Country Flags) remplace
globe + code — plus grand que les 17px du menu déroulant, et un bouton un
peu plus compact. */
.lang-switch__btn .lang-switch__flag{font-size:20px}
.lang-switch__btn{padding:0 10px}
/* Menu burger ouvert : les boutons-icônes redeviennent des rangées avec
libellé (la règle historique .nav.menu-open .nav__actions .btn pose déjà
width:100% et le padding ; on rend hauteur et libellé). */
.nav.menu-open .nav__actions .nav-ico{width:100%;height:auto}
.nav.menu-open .nav__actions .nav-ico .nav-ico__label{position:static;width:auto;height:auto;
overflow:visible;clip:auto;clip-path:none}
.nav.menu-open .nav__actions .cart-btn.nav-ico #cart-count{position:static;border:0}
/* ---------- v70.40 · le sélecteur de langues se referme — disclosure au clic ----------
Retour utilisateur : « quand on clique sur les langues, on doit pouvoir les
refermer ». Le menu était ouvert en PUR CSS par :hover/:focus-within
(l.2450) : après un clic, le bouton gardait le focus et le menu restait
ouvert — et tant que le curseur survolait le composant, aucun re-clic ne
pouvait le fermer. Bascule en disclosure piloté par theme.js (.is-open :
re-clic, clic extérieur, Échap). Les déclencheurs hover/focus ne sont
neutralisés QUE si le JS est là (classe .lang-switch--js posée à l'init) :
sans JavaScript, le comportement au survol reste un repli fonctionnel. */
.lang-switch--js:hover .lang-switch__menu,
.lang-switch--js:focus-within .lang-switch__menu{opacity:0;visibility:hidden;transform:translateY(-6px)}
.lang-switch.is-open .lang-switch__menu{opacity:1;visibility:visible;transform:none}
.lang-switch__chev{transition:transform .18s ease}
.lang-switch.is-open .lang-switch__chev{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){
.lang-switch__chev{transition:none}
}
/* ---------- v70.41 · icônes du header NUES — plus de cercles ----------
Retour utilisateur : « mets juste les icônes, pas dans des cercles ».
Les ronds ghost (compte) et navy (panier) disparaissent : icônes au trait
encre, un peu plus grandes (22px), survol en bleu de marque. La zone de
clic reste 44×44 (invisible) pour le tactile. ⚠️ .cart-btn hérite de
color:#fff (l.1122, boutons pleins) : sans re-pose de la couleur, l'icône
du sac serait blanche sur l'en-tête blanc. La pastille de compteur teal
reste. Dans le menu burger, les rangées pleine largeur reprennent un fond
discret pour rester des boutons lisibles. */
.nav__actions .nav-ico,
.nav__actions .cart-btn.nav-ico{background:transparent;border:0;box-shadow:none;
color:var(--ink);-webkit-text-fill-color:var(--ink)}
.nav__actions .nav-ico:hover,
.nav__actions .cart-btn.nav-ico:hover{background:transparent;box-shadow:none;
transform:none;color:var(--brand-blue);-webkit-text-fill-color:var(--brand-blue)}
.nav__actions .nav-ico svg{width:22px;height:22px}
.cart-btn.nav-ico #cart-count{top:-6px;right:-7px}
.nav.menu-open .nav__actions .nav-ico,
.nav.menu-open .nav__actions .cart-btn.nav-ico{background:var(--bg-soft);
border:1px solid var(--line)}
/* ---------- v70.42 · header : pastille du panier stable au survol, drapeau nu ----------
Deux retours utilisateur. (1) Au survol du sac, le « 10 » de la pastille
virait au bleu : le hover de v70.41 pose -webkit-text-fill-color sur le
lien, propriété HÉRITÉE que le color:#fff de la pastille ne suffit pas à
annuler — re-posée explicitement, survol compris. (2) Le bouton du
sélecteur de langues perd sa pilule : drapeau + chevron nus, comme les
icônes voisines (le menu déroulant, lui, garde son cadre). */
.cart-btn.nav-ico #cart-count,
.cart-btn.nav-ico:hover #cart-count{color:#fff;-webkit-text-fill-color:#fff}
.lang-switch__btn{background:transparent;border:0;padding:0 6px}
.lang-switch__btn:hover{background:transparent;border-color:transparent;color:var(--brand-blue)}
/* ---------- v70.43 · chantier B — pages intérieures au niveau des références ----------
Quatre morceaux, tous en NOUVELLES classes (aucun conflit de cascade avec
les couches précédentes) : la timeline du protocole qualité (.qtl,
page-quality.php — signature de la page, numérotation 01→06 d'une vraie
séquence), la FAQ groupée en accordéons (.faqp, page-faq.php — rubrique
collante à gauche, questions à droite), la ligne de micro-preuves du
catalogue (.page-hero__proof, archive-product.php) et la page 404 (.err,
404.php). Composants réutilisés : .eyebrow, .accordion/.acc-item,
.spec-table, .cta, --shadow-card. */
/* --- 1 · Micro-preuves du hero de page (catalogue) --- */
.page-hero__proof{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;
margin:0 0 18px;font-size:11px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-soft)}
.page-hero__dot{color:var(--brand-teal)}
.page-hero__lede{max-width:60ch;margin:14px auto 0;font-size:17px;line-height:1.65;color:var(--ink-soft)}
/* --- 2 · Timeline du protocole (.qtl) --- */
.qtl .qtl__wrap{max-width:920px}
.qtl__list{position:relative;list-style:none;margin:0;padding:0;
background:#fff;border:1px solid var(--line);border-radius:22px;
box-shadow:var(--shadow-card)}
.qtl__step{position:relative;display:grid;grid-template-columns:56px 52px 1fr auto;
align-items:center;gap:18px;padding:26px 28px}
.qtl__step + .qtl__step{border-top:1px solid var(--line)}
.qtl__num{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--brand-blue);
font-variant-numeric:tabular-nums}
.qtl__ico{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;
background:rgba(18,58,120,.07);color:var(--brand-navy)}
.qtl__step:nth-child(3n+2) .qtl__ico{background:rgba(22,164,143,.09);color:var(--brand-teal)}
.qtl__step:nth-child(3n) .qtl__ico{background:rgba(42,154,194,.10);color:var(--brand-blue)}
.qtl__txt h2{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0 0 5px;color:var(--ink)}
.qtl__txt p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:56ch}
.qtl__chip{flex:0 0 auto;align-self:center;padding:7px 13px;border-radius:999px;
background:rgba(22,164,143,.10);color:#0d6b5d;font-size:11px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.qtl-accent{color:var(--brand-teal)}
@media(max-width:760px){
.qtl__step{grid-template-columns:44px 1fr;grid-template-areas:"ico txt" "chip chip";
gap:8px 14px;padding:20px 18px}
.qtl__num{display:none}
.qtl__ico{grid-area:ico;width:44px;height:44px}
.qtl__ico svg{width:19px;height:19px}
.qtl__txt{grid-area:txt}
.qtl__chip{grid-area:chip;justify-self:start;margin-left:58px}
}
/* --- 2b · Tableau des seuils et bloc « ce qu'on ne fait pas » --- */
.qtl-thresholds .qtl-table__wrap{max-width:880px;margin:0 auto;overflow-x:auto}
.qtl-table{width:100%}
.qtl-nots .qtl-nots__card{max-width:880px;margin:0 auto;background:#fff;
border:1px solid var(--line);border-left:4px solid var(--brand-navy);
border-radius:18px;box-shadow:var(--shadow-soft);padding:30px 32px}
.qtl-nots__card ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:13px}
.qtl-nots__card li{display:flex;align-items:flex-start;gap:12px;
font-size:15.5px;line-height:1.6;color:var(--ink)}
.qtl-nots__card li svg{flex:0 0 auto;margin-top:4px;color:var(--brand-navy);opacity:.7}
.qtl-nots__ruo{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);
font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-soft)}
@media(max-width:680px){
.qtl-nots .qtl-nots__card{padding:22px 18px}
}
/* --- 3 · FAQ groupée (.faqp) --- */
.faqp__group{display:grid;grid-template-columns:260px 1fr;gap:20px 48px;
padding:44px 0}
.faqp__group + .faqp__group,
.faqp__group + .faqp__note{border-top:1px solid var(--line)}
.faqp__side h2{position:sticky;top:104px;font-size:21px;font-weight:700;
letter-spacing:-.01em;color:var(--ink);margin:0}
.faqp__note{max-width:880px;margin:10px 0 0;background:var(--bg-soft);
border:1px solid var(--line);border-radius:18px;padding:26px 30px}
.faqp__note h2{font-size:17px;font-weight:700;margin:0 0 10px;color:var(--ink)}
.faqp__note p{margin:0;font-size:15px;line-height:1.65;color:var(--ink-soft)}
.faqp__note p + p{margin-top:10px}
@media(max-width:860px){
.faqp__group{grid-template-columns:1fr;gap:16px;padding:32px 0}
.faqp__side h2{position:static}
}
/* --- 4 · Page 404 (.err) --- */
.err{position:relative;padding:96px 0 120px;background:#fff;overflow:hidden}
.err__inner{position:relative;text-align:center;max-width:640px}
.err__code{margin:6px 0 2px;font-size:clamp(96px,18vw,170px);font-weight:800;
line-height:1;letter-spacing:-.04em;color:transparent;
-webkit-text-stroke:2px #c9d6e8;paint-order:stroke fill}
@supports not (-webkit-text-stroke:2px #c9d6e8){
.err__code{color:#dfe8f4}
}
.err__inner h1{font-size:clamp(24px,4vw,34px);font-weight:700;letter-spacing:-.02em;
color:var(--ink);margin:0 0 12px}
.err__sub{max-width:46ch;margin:0 auto 30px;font-size:16px;line-height:1.65;
color:var(--ink-soft)}
.err__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.err__decor{position:absolute;inset:0;pointer-events:none}
.err__vial{position:absolute;display:flex;align-items:center;justify-content:center;
width:70px;height:90px;background:var(--bg-soft);border:1px solid var(--line);
border-radius:16px;opacity:.6}
.err__vial--1{top:8%;left:-6%;transform:rotate(-9deg)}
.err__vial--2{bottom:4%;right:-6%;transform:rotate(11deg)}
@media(max-width:680px){
.err{padding:56px 0 72px}
.err__decor{display:none}
}
/* ---------- v70.44 · correctifs de la revue multi-agents du chantier B ----------
Trois trouvailles confirmées par la passe adversariale (workflow) :
1. `.page-hero p` (l.534, spécificité 0,1,1) bat les nouvelles classes
0,1,0 de v70.43 quel que soit l'ordre du fichier : la ligne de
micro-preuves rendait en 18px/560px (d'où son retour à la ligne) et la
lede de Quality perdait ses 60ch. Re-pose en 0,2,1.
2. L'état ouvert des accordéons n'était stylé QUE pour la classe `open`
du site statique (l.504) ; theme.js toggle `is-open` : le « + » ne
pivotait jamais côté WordPress. Sélecteur doublé.
3. Habillage du chapeau d'intro et des chapeaux de rubrique de la FAQ,
que page-faq.php rendait perdus (corrigé côté gabarit). */
.page-hero p.page-hero__proof{font-size:11px;margin:0 0 18px;max-width:none;color:var(--ink-soft)}
.page-hero p.page-hero__lede{font-size:17px;margin:14px auto 0;max-width:60ch}
.acc-item.is-open .acc-q span{transform:rotate(45deg)}
.faqp__intro{max-width:70ch;margin:0 0 38px;font-size:16px;line-height:1.65;color:var(--ink-soft)}
.faqp__intro p{margin:0}
.faqp__intro p + p{margin-top:10px}
.faqp__groupnote{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.faqp__groupnote p{margin:0}
/* ---------- v70.45 · BASE TYPOGRAPHIQUE des références — DM Sans display + Inter corps ----------
Retour utilisateur : « je veux exactement le même site que ces 2 sites,
juste avec ma DA — tu n'as pas changé la base des textes ». Mesuré dans
Chrome : aminoclub = Anek Telugu 600-800 très serré (titres) + Poppins
(corps) ; refined = Bricolage Grotesque (titres) + Inter (corps). Notre
site rendait TOUT en Jost (géométrique élégante, graisse perçue légère) :
c'est cette base qui gardait le rendu « d'avant » malgré les composants.
Bascule complète, avec les fichiers variables DÉJÀ auto-hébergés
(aucun appel réseau nouveau, décision « polices auto-hébergées » intacte) :
· CORPS → Inter (le corps de refined, littéralement) ;
· DISPLAY (titres, prix, chiffres forts) → DM Sans grasse et serrée, le
même registre géométrique-humaniste qu'Anek/Poppins ;
· les boutons, la nav et les kickers HÉRITENT du corps (Inter), comme
chez les deux références ;
· IBM Plex Mono et Twemoji inchangés. Jost reste déclarée (rien ne la
référence plus : aucune casse si un contenu l'appelle encore).
DM Sans n'avait PAS de @font-face (fichier présent, jamais déclaré) :
déclarée ici en 400→800 sur le même woff2 variable. */
@font-face{
font-family:'DM Sans';
font-style:normal;
font-weight:400 800;
font-display:swap;
src:url('../assets/fonts/dm-sans-variable-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'DM Sans';
font-style:normal;
font-weight:400 800;
font-display:swap;
src:url('../assets/fonts/dm-sans-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Corps : Inter partout (la pile Twemoji reste en tête pour les drapeaux). */
body{font-family:'Twemoji Country Flags','Inter',system-ui,-apple-system,sans-serif}
select,option,input,textarea,button{font-family:'Twemoji Country Flags','Inter',system-ui,-apple-system,sans-serif}
/* Display : DM Sans grasse, interlettrage serré — la liste reprend tous les
sélecteurs de titres et de chiffres forts posés au fil des couches. */
h1,h2,h3,h4,
.hero__title,.section__head h2,.quality h2,.page-hero h1,.cta h2,.quote p,
.pd__name,.product__name,.product__price,.pd__buy .product__price,
.statband__txt strong,.stat__num,.qtl__txt h2,.faqp__side h2,
.dash__head h2,.auth-title,.err__code,.err__inner h1,
.acc-q,.dash-tile h3,.feature h3,.tcard h3{
font-family:'DM Sans','Inter',system-ui,-apple-system,sans-serif}
.hero__title{font-weight:800;letter-spacing:-.032em}
.section__head h2,.page-hero h1,.quality h2,.cta h2{font-weight:800;letter-spacing:-.028em}
.pd__name{font-weight:800;letter-spacing:-.025em}
.product__name{font-weight:700}
.qtl__txt h2,.faqp__side h2,.dash__head h2,.auth-title{font-weight:700}
/* Les prix gardent leur graisse existante (800 vignette / fiche) — seule la
famille change ; tabular-nums pour des colonnes stables. */
.product__price,.pd__buy .product__price,.stat__num{font-variant-numeric:tabular-nums}
/* ---------- v70.46 · registre des références sur TOUTES les pages + tiroir de panier ----------
« Toute la base, sur absolument toutes les pages » + « le panier sur le
côté comme sur les deux sites ». Quatre morceaux :
1 · Têtes de page intérieures (.page-hero — boutique, fiche catégorie,
Quality, FAQ, compte, panier, commande, légales, Science) : ALIGNÉES À
GAUCHE, compactes, sans halo — le registre des deux références. Fini
le grand bandeau centré hérité de l'ancien site.
2 · La BARRE D'ACCENT sous les titres disparaît partout (elle n'est pas
dans la DA — le point teal .accent-dot, lui, y est et reste).
3 · Kickers .eyebrow en gris neutre (registre refined) — le bleu restait
une signature de l'ancien site.
4 · Icônes des tuiles .feature RÉAFFICHÉES : une couche « épurée »
(l.993) les masquait — pastilles pastel au trait, registre statband.
5 · Tiroir de panier .cartdw (markup footer.php, JS setupCartDrawer) :
panneau qui glisse de la droite, contenu = mini-cart WooCommerce
(div.widget_shopping_cart_content, rafraîchi par les fragments AJAX
natifs), ouvert au clic sur le sac ET à l'ajout au panier. */
.page-hero{text-align:left;padding:54px 0 34px;background:none}
.page-hero h1{font-size:clamp(30px,4.2vw,44px);margin-top:8px}
.page-hero p{margin:14px 0 0;max-width:60ch}
.page-hero p.page-hero__lede{margin:14px 0 0}
.page-hero__proof{justify-content:flex-start}
.section__head h2::after,.page-hero h1::after,.quality h2::after{display:none}
.section__head h2,.page-hero h1,.quality h2{padding-bottom:0}
.eyebrow{color:var(--ink-soft);font-size:12px;letter-spacing:.12em}
.eyebrow--light{color:rgba(255,255,255,.66)}
.feature__icon{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:12px;
background:rgba(18,58,120,.07);color:var(--brand-navy);margin-bottom:14px}
.feature__icon svg{width:21px;height:21px}
.feature:nth-child(3n+2) .feature__icon{background:rgba(22,164,143,.09);color:var(--brand-teal)}
.feature:nth-child(3n) .feature__icon{background:rgba(42,154,194,.10);color:var(--brand-blue)}
@media(max-width:680px){
.page-hero{padding:36px 0 24px}
}
/* --- Tiroir de panier --- */
.cartdw{position:fixed;inset:0;z-index:1400;pointer-events:none}
.cartdw__overlay{position:absolute;inset:0;background:rgba(13,25,48,.44);
opacity:0;transition:opacity .25s ease}
.cartdw__panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100vw);
background:#fff;box-shadow:-24px 0 60px rgba(13,25,48,.18);
transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
display:flex;flex-direction:column}
.cartdw.is-open{pointer-events:auto}
.cartdw.is-open .cartdw__overlay{opacity:1}
.cartdw.is-open .cartdw__panel{transform:none}
body.cartdw-open{overflow:hidden}
.cartdw__head{display:flex;align-items:center;justify-content:space-between;
padding:18px 22px;border-bottom:1px solid var(--line)}
.cartdw__head h2{margin:0;font-size:18px;font-weight:700;color:var(--ink)}
.cartdw__close{display:grid;place-items:center;width:38px;height:38px;
border:0;background:transparent;border-radius:999px;color:var(--ink);cursor:pointer}
.cartdw__close:hover{background:var(--bg-soft)}
.cartdw__body{flex:1 1 auto;overflow-y:auto;padding:6px 22px 18px;min-height:0}
/* Anatomie RÉELLE d'un item du mini-cart Woo (vécu au premier rendu) :
× IMG + nom métas
n × prix — l'image est DANS le lien produit et
flottée à droite par Woo, dt/dd sont flottés avec bordure. On repasse
tout en flux : image en absolu à gauche, croix en absolu à droite,
métas en ligne discrète. */
#pp-cartdw ul.woocommerce-mini-cart{list-style:none;margin:0;padding:0}
#pp-cartdw li.woocommerce-mini-cart-item{position:relative;display:block;
margin:0;padding:14px 34px 14px 80px;min-height:92px;
border-bottom:1px solid var(--line)}
#pp-cartdw li.woocommerce-mini-cart-item::before{content:none}
#pp-cartdw .woocommerce-mini-cart-item img{position:absolute;left:0;top:14px;
float:none;margin:0;width:64px;height:64px;object-fit:contain;
border-radius:10px;background:var(--bg-soft);padding:6px;box-sizing:border-box}
#pp-cartdw .woocommerce-mini-cart-item a:not(.remove){display:block;
font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.4}
#pp-cartdw .woocommerce-mini-cart-item dl.variation{display:flex;flex-wrap:wrap;
gap:2px 6px;margin:4px 0 0;padding:0;border:0;font-size:12.5px;color:var(--ink-soft)}
#pp-cartdw .woocommerce-mini-cart-item dl.variation dt,
#pp-cartdw .woocommerce-mini-cart-item dl.variation dd{float:none;margin:0;padding:0;
border:0;font-weight:500}
#pp-cartdw .woocommerce-mini-cart-item dl.variation dd p{display:inline;margin:0}
#pp-cartdw .woocommerce-mini-cart-item .quantity{display:block;margin-top:5px;
font-size:13.5px;color:var(--ink-soft)}
#pp-cartdw .woocommerce-mini-cart-item a.remove{position:absolute;right:0;top:14px;
width:28px;height:28px;display:grid;place-items:center;
border-radius:999px;color:var(--ink-soft);text-decoration:none;
font-size:19px;line-height:1;font-weight:400}
#pp-cartdw .woocommerce-mini-cart-item a.remove:hover{background:var(--bg-soft);color:#b3373c}
#pp-cartdw .woocommerce-mini-cart__empty-message{margin:0;padding:48px 0;
text-align:center;font-size:15px;color:var(--ink-soft)}
#pp-cartdw .woocommerce-mini-cart__total{display:flex;justify-content:space-between;
align-items:baseline;gap:12px;margin:0;padding:16px 0 2px;
font-size:15px;color:var(--ink)}
#pp-cartdw .woocommerce-mini-cart__total .amount{font-size:19px;font-weight:800;
font-family:'DM Sans','Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums}
#pp-cartdw .woocommerce-mini-cart__buttons{display:grid;gap:10px;margin:14px 0 4px;padding:0}
#pp-cartdw .woocommerce-mini-cart__buttons a{display:inline-flex;align-items:center;
justify-content:center;margin:0;padding:13px 22px;border-radius:999px;
font-size:15px;font-weight:600;letter-spacing:.01em;text-decoration:none;
transition:background-color .18s ease,transform .18s ease}
#pp-cartdw .woocommerce-mini-cart__buttons a:first-child{background:#fff;
color:var(--ink);border:1px solid var(--line)}
#pp-cartdw .woocommerce-mini-cart__buttons a:first-child:hover{background:var(--bg-soft)}
#pp-cartdw .woocommerce-mini-cart__buttons a:last-child{background:var(--brand-navy);
color:#fff;border:1px solid transparent;
box-shadow:0 1px 2px rgba(18,42,84,.14),0 6px 16px rgba(18,58,120,.14)}
#pp-cartdw .woocommerce-mini-cart__buttons a:last-child:hover{background:#0d2c5c;transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){
.cartdw__overlay,.cartdw__panel{transition:none}
}
/* ---------- v70.47 · tiroir enrichi (BAC · code promo · express) + sac dans la barre mobile ----------
« Sur le panier il faut que ça propose le BAC Water, le code promo
directement, et Apple Pay / Google Pay » + « sur mobile, la petite icône
du panier au lieu d'aller dans les 3 barres ». Tout le contenu dynamique
vit dans le gabarit woocommerce/cart/mini-cart.php (la zone rafraîchie
par les fragments) ; le JS des coupons est DÉLÉGUÉ sur #pp-cartdw
(theme.js). Les boutons express Stripe ne peuvent pas se monter dans le
tiroir (l'élément ne s'initialise qu'aux pages du tunnel) : le tiroir
porte les marques Apple Pay / Google Pay et l'annonce honnête — les
boutons réels sont en tête du checkout, un clic plus loin. */
/* --- Sac de la barre mobile (à côté du burger, hors menu) ---
⚠️ .cart-btn est peint par les règles de boutons pleins (l.1119) : la mise
à nu de v70.41 était scopée .nav__actions — re-posée ici pour .nav__mobtools
(vécu : le sac mobile rendait sur un rond dégradé). */
.nav__mobtools .nav-ico--mob,
.nav__mobtools .cart-btn.nav-ico--mob{position:relative;display:grid;place-items:center;
width:42px;height:42px;padding:0;border:0;border-radius:999px;
background:transparent;box-shadow:none;
color:var(--ink);-webkit-text-fill-color:var(--ink)}
.nav__mobtools .cart-btn.nav-ico--mob:hover{background:transparent;box-shadow:none;
transform:none;color:var(--brand-blue);-webkit-text-fill-color:var(--brand-blue)}
.nav__mobtools .pp-cartcount{position:absolute;top:0;right:-3px;z-index:1;
min-width:17px;height:17px;padding:0 4px;border-radius:999px;
background:var(--brand-teal);color:#fff;border:2px solid #fff;
font-size:10px;font-weight:700;line-height:1;display:grid;place-items:center}
/* --- Bande BAC Water du tiroir --- */
#pp-cartdw .cartdw-bac{display:flex;align-items:center;gap:10px;margin:14px 0 0;
padding:10px 12px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px}
#pp-cartdw .cartdw-bac__ico{flex:0 0 auto;color:var(--brand-blue)}
#pp-cartdw .cartdw-bac__txt{flex:1 1 auto;min-width:0}
#pp-cartdw .cartdw-bac__txt strong{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
#pp-cartdw .cartdw-bac__txt span{display:block;margin-top:1px;font-size:12px;line-height:1.45;color:var(--ink-soft)}
#pp-cartdw .cartdw-bac__price{flex:0 0 auto;font-size:13px;font-weight:700;
color:var(--brand-navy);white-space:nowrap;font-variant-numeric:tabular-nums}
#pp-cartdw .cartdw-bac__btn{flex:0 0 auto;display:inline-flex;align-items:center;
padding:8px 16px;border-radius:999px;background:var(--brand-navy);color:#fff;
font-size:13.5px;font-weight:600;text-decoration:none;transition:background-color .18s ease}
#pp-cartdw .cartdw-bac__btn:hover{background:#0d2c5c}
/* --- Code promo --- */
#pp-cartdw .cartdw-coupon{margin:16px 0 4px}
#pp-cartdw .cartdw-coupon__form{display:flex;gap:8px}
#pp-cartdw .cartdw-coupon__form input{flex:1 1 auto;min-width:0;padding:11px 15px;
font:inherit;font-size:14px;color:var(--ink);background:#fff;
border:1px solid var(--line);border-radius:999px}
#pp-cartdw .cartdw-coupon__form input:focus{outline:none;border-color:var(--brand-blue);
box-shadow:0 0 0 3px rgba(42,154,194,.14)}
#pp-cartdw .cartdw-coupon__form button{flex:0 0 auto;padding:11px 18px;
border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);
font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .18s ease}
#pp-cartdw .cartdw-coupon__form button:hover{background:var(--bg-soft)}
#pp-cartdw .cartdw-coupon__form button:disabled{opacity:.55;cursor:default}
#pp-cartdw .cartdw-coupon__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#pp-cartdw .cartdw-coupon__tag{display:inline-flex;align-items:center;gap:6px;
padding:5px 8px 5px 11px;background:rgba(22,164,143,.10);color:#0d6b5d;
border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em}
#pp-cartdw .cartdw-coupon__tag a{display:grid;place-items:center;width:16px;height:16px;
border-radius:999px;color:inherit;text-decoration:none;font-size:13px;line-height:1}
#pp-cartdw .cartdw-coupon__tag a:hover{background:rgba(13,107,93,.15)}
/* --- Lignes remise et total --- */
#pp-cartdw .cartdw-line{display:flex;justify-content:space-between;align-items:baseline;
margin:0;padding:4px 0;font-size:14px;color:var(--ink)}
#pp-cartdw .cartdw-line--discount{color:#0d6b5d}
#pp-cartdw .cartdw-line--total{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);font-weight:700}
#pp-cartdw .cartdw-line--total span:last-child{font-size:18px;font-weight:800;
font-family:'DM Sans','Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums}
/* --- Rappel express --- */
#pp-cartdw .cartdw-express{display:flex;align-items:center;gap:8px;margin:12px 0 2px;
padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--ink-soft)}
#pp-cartdw .cartdw-express img{height:22px;width:auto;flex:0 0 auto}
/* --- Notices (réponses d'apply_coupon) --- */
.cartdw__notice:not(:empty){padding:12px 22px 0}
.cartdw__notice ul{margin:0;padding:0;list-style:none}
.cartdw__notice .woocommerce-error,
.cartdw__notice .woocommerce-message,
.cartdw__notice .woocommerce-info{margin:0;padding:10px 14px;border-radius:12px;
font-size:13.5px;line-height:1.5;list-style:none}
.cartdw__notice .woocommerce-error{background:#fdf0f0;color:#8c2f34;border:1px solid #f1d2d3}
.cartdw__notice .woocommerce-message,
.cartdw__notice .woocommerce-info{background:rgba(22,164,143,.08);color:#0d6b5d;border:1px solid rgba(22,164,143,.25)}
.cartdw__notice li{margin:0}
.cartdw__notice li + li{margin-top:6px}
/* ---------- v70.48 · express RÉEL dans le tiroir, erreur coupon en ligne, pastille ronde collée ----------
Trois retours utilisateur. (1) Les vrais boutons Apple Pay / Google Pay
dans le tiroir (pp_cartdw_express, inc/woocommerce.php) — partout sauf
fiche produit (l'élément Stripe est monté par ID unique et y vit déjà
sous le bouton d'achat), panier et commande (pas de tiroir). Révélé par
shop.js (.is-live) seulement quand un bouton est réellement peint ; la
ligne de marques du fragment se masque alors. (2) L'erreur de coupon
devient une ligne rouge SOUS le champ, comme les références — plus de
bandeau. (3) La pastille de compteur devient un CERCLE exact collé au
coin du sac (l'icône est centrée dans sa zone de clic de 44px : la
pastille s'ancre au coin de l'ICÔNE, pas de la zone). */
.cart-btn.nav-ico #cart-count{top:4px;right:4px;min-width:0;width:17px;height:17px;
padding:0;border-radius:50%;font-size:10px}
.nav__mobtools .pp-cartcount{top:2px;right:3px;min-width:0;width:16px;height:16px;
padding:0;border-radius:50%;font-size:9.5px}
/* Express dans le panneau du tiroir */
#pp-cartdw .cartdw__ece{position:static;opacity:1;pointer-events:auto;padding:0 22px 16px}
/* Le libellé « or check out instantly » et le masquage de la ligne de marques
suivent la PRÉSENCE RÉELLE d'une iframe Stripe montée — pas une classe
posée par un script : c'est l'état vrai du montage. */
#pp-cartdw .cartdw__ece .pp-express__or{display:none;margin:0 0 10px;font-size:10.5px}
#pp-cartdw .cartdw__ece:has(iframe) .pp-express__or{display:flex}
#pp-cartdw #wc-stripe-express-checkout-element{margin-top:0!important}
#pp-cartdw #wc-stripe-express-checkout-button-separator{display:none!important}
#pp-cartdw:has(.cartdw__ece iframe) .cartdw-express{display:none}
/* Erreur de coupon en ligne */
#pp-cartdw .cartdw-coupon__error{display:flex;align-items:flex-start;gap:6px;
margin:8px 2px 0;font-size:13px;line-height:1.5;color:#b3373c}
#pp-cartdw .cartdw-coupon__error::before{content:"";flex:0 0 auto;width:14px;height:14px;
margin-top:2px;border-radius:50%;
background:#b3373c;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
#pp-cartdw .cartdw-coupon.is-error input{border-color:#d98a8e}
#pp-cartdw .cartdw-coupon.is-error input:focus{border-color:#b3373c;box-shadow:0 0 0 3px rgba(179,55,60,.12)}
/* ---------- v70.49 · bande BAC du tiroir : photo produit à la place de l'icône ----------
Demande utilisateur. Même registre de vignette que les articles du
mini-cart (fond doux, rayon), fiole contenue en hauteur. */
#pp-cartdw .cartdw-bac__media{flex:0 0 auto;width:44px;height:58px;display:grid;
place-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
#pp-cartdw .cartdw-bac__media img{display:block;width:auto;height:48px;max-width:36px;object-fit:contain}
/* ---------- v70.50 · tiroir mobile quasi plein écran (gouttière amino) ----------
Sur mobile le panneau remplit presque tout, une gouttière de 36px laisse
voir la page assombrie — le registre du tiroir d'aminoclub. */
@media(max-width:680px){
.cartdw__panel{width:calc(100vw - 36px)}
}
/* ---------- v70.51 · jauge de livraison offerte dans le tiroir de panier ----------
Même composant .ship-bar que la page panier, rendu par le fragment mini-cart
(jamais en HTML cacheable — piège v70.50). Version compacte, en tête du
panneau. Sélecteurs sur l'ID #pp-cartdw : la feuille CORE de WooCommerce
bat les classes dans le widget (convention des couches v70.47/48). */
#pp-cartdw .cartdw-ship{margin:0 0 16px;padding:12px 14px}
#pp-cartdw .cartdw-ship .ship-bar__head{font-size:13px;margin-bottom:8px}
#pp-cartdw .cartdw-ship .ship-bar__track{height:7px}
/* ---------- v70.52 · tiroir mobile : tout visible sans défiler ----------
Demande utilisateur : sur mobile, le contenu du tiroir doit tenir dans
l'écran. Rythme vertical resserré (≤680px seulement, desktop inchangé),
et le vrai gain : View cart / Checkout passent CÔTE À CÔTE. Sélecteurs
sur l'ID #pp-cartdw, comme tout l'intérieur du tiroir (v70.47/48). */
@media(max-width:680px){
#pp-cartdw .cartdw__head{padding:12px 18px}
#pp-cartdw .cartdw__body{padding:6px 18px 12px}
#pp-cartdw .cartdw-ship{margin-bottom:8px;padding:9px 12px}
#pp-cartdw .cartdw-ship .ship-bar__head{margin-bottom:6px}
#pp-cartdw li.woocommerce-mini-cart-item{padding:10px 32px 10px 64px;min-height:70px}
#pp-cartdw .woocommerce-mini-cart-item img{width:52px;height:52px;top:10px;padding:4px}
#pp-cartdw .woocommerce-mini-cart-item a.remove{top:10px}
#pp-cartdw .woocommerce-mini-cart-item .quantity{margin-top:3px}
#pp-cartdw .cartdw-bac{margin-top:10px}
#pp-cartdw .woocommerce-mini-cart__total{padding:10px 0 0}
#pp-cartdw .woocommerce-mini-cart__buttons{grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 2px}
#pp-cartdw .cartdw__ece{padding:0 18px 12px}
#pp-cartdw .cartdw__ece .pp-express__or{margin-bottom:8px}
}
/* ---------- v70.53 · purge des accents dégradés (registre amino, DA amendée) ----------
Demande utilisateur du 2026-08-20 : « les petits cercles dégradés c'est
moche — tout le site exactement comme aminoclub ». Les références n'ont
QUE des aplats : le dégradé de marque ne survit que dans le logo et le
texte d'accent du hero. Inventaire vérifié dans Chrome page par page
(détecteur de dégradés, faux positifs display:none écartés). */
/* 1 · Puces de listes : point plein teal, plat — fiche produit et éditorial */
.pd__list li::before{width:7px;height:7px;background:var(--brand-teal)}
.pp-content ul li::before{background:var(--brand-teal)}
/* 2 · Checklist de l'accueil (section qualité, fond clair) : coche plate
teal, plus de disque dégradé */
.checklist li::before{background:none;color:var(--brand-teal);font-size:16px}
/* 3 · Avatar du tableau de bord compte : navy plein */
.dash__avatar{background:var(--brand-navy)}
/* 4 · Souligné de survol de la nav : trait plein discret, comme le footer */
.nav__links a::after{background:currentColor;opacity:.55}
/* 5 · Jauge de livraison offerte : remplissage PLEIN, reflet animé retiré */
.ship-bar__fill{background:var(--brand-teal)}
.ship-bar.is-unlocked .ship-bar__fill{background:#2bb58a}
.ship-bar__fill::after{content:none}
/* 6 · CTA final : panneau arrondi navy PLEIN sur fond blanc — le registre
exact de la section bulk d'aminoclub (les radiaux bleus sont retirés) */
.cta{background:var(--paper,#fff)}
.cta__inner{background:var(--brand-navy)}
/* 7 · Nom de produit des cartes catalogue : il était encore PEINT en dégradé
(fill transparent + background-clip:text hérités de l'ère « tout le texte
en dégradé », vérifié au style calculé) — encre navy pleine, comme la DA
l'exige depuis le départ */
.product__name,a.product__name{background:none;-webkit-background-clip:initial;
background-clip:initial;-webkit-text-fill-color:currentColor;color:var(--ink)}
/* 8 · Footer et barrette du panneau FDA : aplats (le dégradé vertical du
footer et le filet ambré dégradé deviennent des couleurs pleines) */
.footer{background:var(--brand-navy)}
.fda-bar__panel::before{background:#d8a75c}
/* ---------- v70.54 · bases « première époque » alignées sur les références ----------
Demande utilisateur : « enlève toutes les bases qu'on avait faites au début,
c'est pas pro ». Bandeau cookies et panneau FDA repassés au registre des
références ; le tunnel de commande est repris dans css/woocommerce.css
(section TUNNEL v2). */
/* 1 · Bandeau cookies → carte compacte en bas à GAUCHE, sans l'illustration
ronde (le logo cerclé). Les règles de conformité sont inchangées :
Decline et Accept gardent le même poids visuel, rien ne se charge avant
le choix. */
.cookiebar{left:18px;right:auto;bottom:18px;max-width:400px;padding:18px;border-radius:16px}
.cookiebar__inner{display:block;max-width:none}
.cookiebar__cookie{display:none}
.cookiebar__text{font-size:13px;line-height:1.6;margin:0 0 14px}
.cookiebar__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cookiebar__btn{min-width:0;padding:11px 14px;justify-content:center}
@media(max-width:520px){.cookiebar{left:12px;right:12px;max-width:none}}
/* 2 · Panneau FDA → bloc de texte sobre intégré au footer (hairline en tête,
sans icône, sans filet ambré, sans panneau). Le texte réglementaire est
INCHANGÉ, seule la présentation change. */
.fda-bar{margin-top:26px;border-top:1px solid rgba(255,255,255,.14);padding-top:4px}
.fda-bar__panel{background:none;border:0;padding:18px 0 2px;display:block}
.fda-bar__panel::before{content:none}
.fda-bar__icon{display:none}
.fda-bar__label{color:rgba(255,255,255,.55)}
.fda-bar__text{color:rgba(255,255,255,.38);font-size:12px;line-height:1.8}
.fda-bar__link{color:rgba(255,255,255,.66);border-bottom:1px solid rgba(255,255,255,.3)}
.fda-bar__link:hover{color:#fff;border-bottom-color:#fff}
/* ---------- v70.55 · FDA lisible + ruban ralenti ----------
Retours utilisateur : « on distingue pas bien le bandeau FDA » (la version
v70.54 était trop pâle) et « la barre qui défile, un peu moins vite ». */
.fda-bar__label{color:rgba(255,255,255,.8)}
.fda-bar__text{color:rgba(255,255,255,.58)}
.fda-bar__link{color:rgba(255,255,255,.85);border-bottom-color:rgba(255,255,255,.45)}
.marquee__track{animation-duration:48s}
/* ---------- v70.56 · hero pleine nappe façon refinedbiolabs (thème uniquement) ----------
Demande utilisateur : « pour le haut de la landing page j'aime celui de
refined, inspire-toi ». Adapté à la DA : nappe bleu-teal pâle PLEINE
LARGEUR avec particules discrètes (chez refined : lavande), trio de
fioles inclinées à droite, bouton secondaire BLANC, et le ruban défilant
navy directement sous le hero. Tout est scopé .hero--sky : le site
statique garde son hero. */
.hero--sky{
background:
radial-gradient(circle 2.5px at 7% 24%, rgba(18,58,120,.16) 98%, transparent 100%),
radial-gradient(circle 1.8px at 16% 70%, rgba(22,164,143,.2) 98%, transparent 100%),
radial-gradient(circle 2px at 27% 12%, rgba(18,58,120,.12) 98%, transparent 100%),
radial-gradient(circle 3px at 38% 86%, rgba(42,154,194,.14) 98%, transparent 100%),
radial-gradient(circle 1.6px at 52% 32%, rgba(18,58,120,.15) 98%, transparent 100%),
radial-gradient(circle 2.2px at 61% 78%, rgba(22,164,143,.16) 98%, transparent 100%),
radial-gradient(circle 2.6px at 72% 16%, rgba(42,154,194,.15) 98%, transparent 100%),
radial-gradient(circle 1.8px at 84% 62%, rgba(18,58,120,.16) 98%, transparent 100%),
radial-gradient(circle 2.2px at 93% 30%, rgba(22,164,143,.14) 98%, transparent 100%),
radial-gradient(circle 1.6px at 46% 94%, rgba(18,58,120,.12) 98%, transparent 100%),
radial-gradient(circle 2px at 90% 88%, rgba(42,154,194,.12) 98%, transparent 100%),
linear-gradient(180deg,#eef3fa 0%,#e8f1f5 100%);
padding:76px 0 72px;
}
/* Le panneau teinté du hero scindé disparaît : la nappe couvre tout. */
.hero--sky .hero__media{background:none;border:0;border-radius:0;box-shadow:none;
overflow:visible;min-height:470px;position:relative}
.hero--sky .hero__media::before,.hero--sky .hero__media::after{content:none}
/* Reset du positionnement absolu de la fiole unique (v70.33/36). */
.hero--sky .hero__media img{position:static;left:auto;bottom:auto;height:auto;
max-height:none;transform:none;animation:none;filter:none}
/* Trio : générique au centre (flotte), produits inclinés derrière. */
.hero--sky .hero__trio{position:relative;display:flex;align-items:center;
justify-content:center;min-height:470px;width:100%}
/* La couture verticale du panneau v70.33 (pseudo peint sur la section) n'a
plus lieu d'être sous la nappe pleine largeur. */
.hero--sky::before,.hero--sky::after,.hero--sky .hero__split::before,
.hero--sky .hero__split::after{content:none}
.hero--sky .hero__trio picture{position:relative;z-index:3;line-height:0}
.hero--sky .hero__trio picture img{height:450px;width:auto;
filter:drop-shadow(0 36px 46px rgba(18,42,84,.24));
animation:vialFloatPanel 7s ease-in-out infinite;will-change:transform}
/* ⚠️ Spécificité : le reset .hero--sky .hero__media img (0,2,1) ci-dessus
battait .hero--sky .hero__trio-side (0,2,0) — les latérales rendaient en
taille naturelle (vécu : 493×1009). D'où img.classe (0,3,1). */
.hero--sky .hero__media img.hero__trio-side{position:absolute;z-index:2;
height:330px;width:auto;filter:drop-shadow(0 26px 34px rgba(18,42,84,.2))}
.hero--sky .hero__media img.hero__trio-l{left:0;bottom:9%;transform:rotate(-14deg)}
.hero--sky .hero__media img.hero__trio-r{right:0;bottom:11%;transform:rotate(13deg)}
/* Titre à l'échelle refined, bouton secondaire blanc. */
.hero--sky .hero__title{font-size:clamp(42px,5.6vw,70px)}
.hero--sky .btn--ghost{background:#fff;border-color:#fff;
box-shadow:0 10px 24px rgba(18,42,84,.08)}
.hero--sky .btn--ghost:hover{background:#fff;border-color:#fff;
box-shadow:0 14px 30px rgba(18,42,84,.13);transform:translateY(-1px)}
/* Le ruban colle au hero ; la statband, passée APRÈS lui, ne chevauche plus. */
.hero--sky ~ .statband{margin-top:44px}
@media(max-width:900px){
.hero--sky .hero__trio{min-height:0}
.hero--sky .hero__media img.hero__trio-side{display:none}
.hero--sky .hero__trio picture img{height:auto;max-height:300px;
animation:none}
.hero--sky{padding:44px 0 52px}
}
@media(prefers-reduced-motion:reduce){
.hero--sky .hero__trio picture img{animation:none}
}
/* Bande défilante plus ÉPAISSE, texte plus grand (retour utilisateur pendant
la construction du hero refined — l'échelle de la bande de la référence). */
.marquee{padding:20px 0}
.marquee__item{font-size:13.5px;letter-spacing:.18em;font-weight:650}
.marquee__ico{width:17px;height:17px}
.marquee__dot{font-size:15px}
/* ---------- v70.57 · le ruban dépasse du bas de l'écran au chargement ----------
Demande utilisateur : à l'ouverture du site, la bande défilante doit être
PARTIELLEMENT visible sous le hero — le signal qu'il y a une suite. Le
hero prend la hauteur du viewport moins ruban RUO (~34px) + nav (~72px)
+ ~34px de bande visible ; son contenu se centre verticalement. Sur les
écrans trop courts pour tout montrer, le contenu reprend la main
(min-height, jamais height : rien n'est rogné). */
.hero--sky{padding:40px 0 36px;min-height:calc(100vh - 140px);
min-height:calc(100svh - 140px);display:grid;align-items:center}
@media(max-width:900px){
.hero--sky{min-height:0;display:block;padding:44px 0 52px}
}
/* La barre d'admin WordPress (32px, admins connectés) décale le calcul :
sans cette règle, la bande n'affleurait que de ~6px pour l'admin. */
body.admin-bar .hero--sky{min-height:calc(100vh - 172px);min-height:calc(100svh - 172px)}
/* v70.57b — « on doit voir un peu PLUS que la bande » : le hero cède ~50px
de plus, la bande est entière à l'écran avec un aperçu de la suite. */
.hero--sky{min-height:calc(100vh - 190px);min-height:calc(100svh - 190px)}
body.admin-bar .hero--sky{min-height:calc(100vh - 222px);min-height:calc(100svh - 222px)}
/* v70.57c — mobile : « c'est mal adapté ». L'ordre du hero--panel mettait la
fiole AVANT le texte dans une boîte de 470px (min-height du desktop posée
après la règle mobile de v70.34) : titre hors écran, grand vide. Sur
mobile : TEXTE d'abord, fiole compacte ensuite, paddings resserrés. */
@media(max-width:900px){
.hero--sky .hero__split{display:flex;flex-direction:column}
.hero--sky .hero__copy{order:1}
.hero--sky .hero__media{order:2;min-height:0}
.hero--sky .hero__trio{min-height:0}
.hero--sky .hero__trio picture img{max-height:250px}
.hero--sky{padding:34px 0 26px}
}
/* ---------- v70.58 · fiole « Fiole PP » du hero + mobile flottante par-dessus ----------
La fiole fournie par l'utilisateur (droite, détourée) remplace la
générique inclinée. Sur MOBILE (demande explicite) : la fiole FLOTTE EN
HAUT, PAR-DESSUS les textes et boutons — absolue en haut à droite,
au-dessus du contenu, pointer-events:none pour ne jamais bloquer un
clic sur les CTAs qu'elle chevauche. */
.hero--sky .hero__trio picture img{height:430px}
@media(max-width:900px){
.hero--sky{position:relative;overflow:visible}
.hero--sky .hero__media{position:absolute;top:-4px;right:8px;left:auto;order:0;
width:auto;min-height:0;z-index:6;pointer-events:none}
/* width:auto aussi sur le trio : la règle desktop width:100% (v70.56)
recentrait la fiole sur le titre au lieu de l'ancrer à droite (vécu). */
.hero--sky .hero__trio{min-height:0;width:auto}
.hero--sky .hero__trio picture img{height:auto;max-height:190px;
filter:drop-shadow(0 18px 24px rgba(18,42,84,.22));
animation:vialFloatPanel 6.5s ease-in-out infinite}
.hero--sky .hero__copy{position:relative;z-index:1}
}
@media(prefers-reduced-motion:reduce){
.hero--sky .hero__trio picture img{animation:none}
}
/* v70.58b — « incline la fiole » : rotation sur le CONTENEUR ,
jamais sur l'img (vialFloatPanel écrase transform — piège .pd__stage).
Et sur mobile, la fiole flottante passe EN ARRIÈRE-PLAN : la pile
texte → boutons → Janoshik reste devant, lisible (« comme ils étaient »). */
/* Une règle globale met en display:contents : sans boîte, aucun
transform ne s'applique (vérifié au style calculé). On lui rend une boîte. */
.hero--sky .hero__trio picture{display:block;line-height:0;transform:rotate(11deg)}
/* v70.58c — le volet MOBILE de v70.58b est ANNULÉ (« j'aime pas, remets
comme c'était avant — sur mobile ») : la fiole repasse PAR-DESSUS les
textes et boutons (z-index 6, état v70.58). L'inclinaison desktop reste.
Sur mobile, on neutralise aussi la rotation du conteneur : la fiole
mobile était droite avant v70.58b. */
@media(max-width:900px){
.hero--sky .hero__media{z-index:6}
.hero--sky .hero__trio picture{transform:none}
}
/* ---------- v70.59 · annulation du redimensionnement « ruban au pli » ----------
« Remets comme c'était avant qu'on modifie la barre qui défile, mais sans
la modifier » : les min-height plein écran de v70.57/b (hero calé sur le
viewport pour faire affleurer le ruban) sont ANNULÉS — le hero reprend sa
hauteur naturelle de v70.56 (padding 76/72). La bande GARDE son épaisseur
(20px/13.5px) et ses 48s. Le mobile (v70.57c/58c) est re-posé, la règle
desktop étant plus tardive que sa media query. */
.hero--sky{min-height:0;display:block;padding:76px 0 72px}
body.admin-bar .hero--sky{min-height:0}
@media(max-width:900px){
.hero--sky{padding:34px 0 26px}
}
/* ---------- v70.60 · mobile : disposition du hero d'AVANT la bande ----------
« Sans modifier la landing actuelle, remets la position du hero et du
texte sur mobile comme quand il n'y avait pas la barre qui défile — sans
l'enlever. » On revient à la pile du hero--panel mobile d'origine
(v70.34) : texte d'abord, fiole DANS LE FLUX en dessous, 280px max, sans
animation ni chevauchement. Desktop et bande inchangés. */
@media(max-width:900px){
.hero--sky{padding:40px 0 52px}
.hero--sky .hero__media{position:static;width:auto;min-height:0;
z-index:auto;pointer-events:auto;order:2}
.hero--sky .hero__copy{order:1}
.hero--sky .hero__trio{width:100%;justify-content:center}
.hero--sky .hero__trio picture img{max-height:280px;animation:none;
filter:drop-shadow(0 22px 30px rgba(18,42,84,.18))}
}
/* v70.60b — « encore avant : quand la fiole était inclinée et flottait » :
même pile mobile (texte puis fiole en dessous), mais la fiole reprend
l'inclinaison (conteneur, comme sur desktop) ET le flottement. */
@media(max-width:900px){
.hero--sky .hero__trio picture{transform:rotate(11deg)}
.hero--sky .hero__trio picture img{animation:vialFloatPanel 6.5s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){
.hero--sky .hero__trio picture img{animation:none!important}
}
/* v70.60c — mobile, l'état voulu (celui de v70.58b) : la fiole EN
ARRIÈRE-PLAN en haut de la page, inclinée et flottante, et la pile
texte + boutons PAR-DESSUS elle. pointer-events:none : rien n'est
jamais bloqué. (Les allers-retours v70.58c→60b venaient d'un malentendu
— c'est bien CETTE composition que l'utilisateur voulait.) */
@media(max-width:900px){
.hero--sky{position:relative;overflow:visible}
.hero--sky .hero__media{position:absolute;top:6px;right:-6px;left:auto;
width:auto;order:0;min-height:0;z-index:0;pointer-events:none}
.hero--sky .hero__trio{width:auto;min-height:0;justify-content:flex-end}
.hero--sky .hero__trio picture img{max-height:215px}
.hero--sky .hero__copy{position:relative;z-index:1}
}
/* v70.60d — mobile : fiole plus CENTRÉE et plus GROSSE, texte un peu plus
bas (il reste par-dessus, la fiole occupe le haut en fond). */
@media(max-width:900px){
.hero--sky .hero__media{left:0;right:0;width:auto}
.hero--sky .hero__trio{width:100%;justify-content:center}
.hero--sky .hero__trio picture img{max-height:295px}
.hero--sky .hero__copy{padding-top:125px}
}
/* ---------- v70.61 · mobile = l'état d'« hier » exact ; PC = la suite du site visible ----------
1 · MOBILE : v70.60d (fiole centrée 295px, texte +125px) est ANNULÉE —
retour exact à la composition validée : fiole en fond en haut à droite
(215px, inclinée, flottante), pile de texte par-dessus SANS décalage.
2 · PC : à l'atterrissage on voit le hero, la bande ENTIÈRE et ~60px du
reste du site après elle (retour du calage viewport, calc 227/259px). */
.hero--sky{min-height:calc(100vh - 227px);min-height:calc(100svh - 227px);
display:grid;align-items:center;padding:40px 0 36px}
body.admin-bar .hero--sky{min-height:calc(100vh - 259px);min-height:calc(100svh - 259px)}
@media(max-width:900px){
.hero--sky{min-height:0;display:block;padding:40px 0 52px}
.hero--sky .hero__media{left:auto;right:-6px}
.hero--sky .hero__trio{width:auto;justify-content:flex-end}
.hero--sky .hero__trio picture img{max-height:215px}
.hero--sky .hero__copy{padding-top:0}
}
/* v70.61b — un peu plus de « suite du site » visible après la bande sur PC :
paddings du hero resserrés (le contenu, plus haut que le min-height,
fixait la hauteur réelle — 17px seulement après la bande pour l'admin). */
@media(min-width:901px){
.hero--sky{padding:26px 0 22px}
}
/* ---------- v70.62 · hero mobile = la recette EXACTE de refinedbiolabs ----------
Lue dans leurs classes Tailwind (même-origine, styles calculés) :
texte CENTRÉ (text-center, mx-auto, boutons flex-col centrés), et le
bloc fioles en ABSOLU à droite à MI-HAUTEUR (top-1/2 -translate-y-1/2
right-6%, w-min(34vw,480px)), DERRIÈRE le texte (z-20 sur le texte),
flottant. Adaptation à notre fiole unique : conteneur 36vw plafonné
180px, ancré à droite, centré verticalement, inclinaison et flottement
conservés, pointer-events:none. */
@media(max-width:900px){
.hero--sky{padding:32px 0 64px}
.hero--sky .hero__media{position:absolute;top:50%;transform:translateY(-50%);
right:4%;left:auto;bottom:auto;width:min(36vw,180px);min-height:0;
z-index:0;pointer-events:none}
.hero--sky .hero__trio{width:100%;min-height:0;justify-content:center}
.hero--sky .hero__trio picture{width:100%}
.hero--sky .hero__trio picture img{max-height:none;width:100%;height:auto}
.hero--sky .hero__copy{padding-top:0;position:relative;z-index:1}
}
/* ---------- v70.63 · hero mobile = la VRAIE version mobile de refined ----------
D'après la capture d'écran fournie par l'utilisateur (tag « Fiole PP ») —
leur mobile réel, différent de ce que je déduisais des classes :
1. les FIOLES d'abord — grosses, centrées, en haut, sur la nappe ;
2. le titre CENTRÉ en dessous, puis le sous-titre centré ;
3. les boutons en pilules empilées pleine largeur ;
4. la bande défilante suit.
Notre fiole : centrée en haut, ~320px, inclinée, flottante, DANS LE FLUX. */
@media(max-width:900px){
.hero--sky{padding:22px 0 54px}
.hero--sky .hero__split{display:flex;flex-direction:column}
.hero--sky .hero__media{position:static;order:0;width:auto;transform:none;
z-index:auto;pointer-events:auto;min-height:0}
.hero--sky .hero__copy{order:1;padding-top:26px}
.hero--sky .hero__trio{width:100%;min-height:0;justify-content:center}
.hero--sky .hero__trio picture{width:auto}
.hero--sky .hero__trio picture img{width:auto;height:auto;max-height:320px}
}
/* ---------- v70.71 · RETOUR À L'ÉTAT « parfait merci super » (v70.63) ----------
L'utilisateur demande le retour exact au hero mobile validé le
2026-08-20 au soir : la copie de sa capture refined — grande fiole
centrée EN PREMIER (320px), kicker, titre deux lignes, sous-titre,
boutons empilés, Trustpilot, pastille Janoshik. Le fichier est
RESTAURÉ depuis le commit 05ad227 (toutes les couches v70.63b→70b,
allers-retours d'ajustements, vivent dans git). Deux correctifs
postérieurs sont conservés ci-dessous car toujours voulus : */
/* 1 · bande défilante AMINCIE sur mobile (demande explicite « la barre
est trop grosse en version mobile ») */
@media(max-width:900px){
.marquee{padding:12px 0}
.marquee__item{font-size:11px;letter-spacing:.16em}
.marquee__ico{width:13px;height:13px}
.marquee__dot{font-size:12px;margin:0 16px}
}
/* 2 · les fioles latérales du trio (revenues au DOM en v70.68 pour un
essai) restent MASQUÉES sur desktop — décision « juste la générique ».
Sur mobile, le bloc ≤900px de v70.56 les masque déjà. */
@media(min-width:901px){
.hero--sky .hero__media img.hero__trio-side{display:none}
}
/* ---------- v70.72 · rapetissement PROPORTIONNEL du hero mobile ----------
Consigne stricte : ne rien déplacer, ne rien retirer — tout rapetisse
(fiole, textes, BOUTONS compris) pour que les boutons et le widget
Trustpilot soient visibles au premier écran. Ordre et placements de
v70.63/71 inchangés. */
@media(max-width:900px){
.hero--sky{padding:14px 0 36px}
.hero--sky .hero__copy{padding-top:16px}
.hero--sky .hero__trio picture img{max-height:215px}
.hero--sky .eyebrow{font-size:11px;margin-bottom:5px}
.hero--sky .hero__title{font-size:29px;margin-bottom:5px}
.hero--sky .tagline{font-size:10px;margin:3px 0 7px}
.hero--sky .hero__sub{font-size:13.5px;line-height:1.5;margin:6px auto 12px;max-width:300px}
.hero--sky .hero__jano{padding:6px 12px;font-size:11.5px}
.hero--sky .hero__cta{gap:8px}
.hero--sky .hero__cta .btn{padding:11px 18px;font-size:13.5px}
.hero--sky .hero__trustpilot{margin-top:8px}
}
/* v70.72b — le gras mesuré : marges héritées (cta 34px, pastille 22px) et
iframe Trustpilot à 84px pleins. Resserrées + fiole 185px : boutons ET
widget au premier écran, ordre inchangé. */
@media(max-width:900px){
.hero--sky .hero__trio picture img{max-height:185px}
.hero--sky{padding-top:10px}
.hero--sky .hero__copy{padding-top:10px}
.hero--sky .hero__jano{margin-top:10px}
.hero--sky .hero__cta{margin-top:10px;gap:6px}
.hero--sky .hero__cta .btn{padding:9px 16px;font-size:13px}
.hero--sky .hero__trustpilot{margin-top:6px;max-height:56px;overflow:hidden}
}
/* v70.72c — dernier cran uniforme (−108px mesurés) : fiole 138px, titre
26px, sous-titre 13px, boutons 37px, pastille 28px, Trustpilot clippé
52px — boutons ET widget dans le premier écran. */
@media(max-width:900px){
.hero--sky{padding-top:8px}
.hero--sky .hero__copy{padding-top:6px}
.hero--sky .hero__trio picture img{max-height:138px}
.hero--sky .eyebrow{margin-bottom:4px;font-size:10.5px}
.hero--sky .hero__title{font-size:26px;margin-bottom:4px}
.hero--sky .tagline{margin:2px 0 5px;font-size:9.5px}
.hero--sky .hero__sub{font-size:13px;margin:4px auto 8px;max-width:310px}
.hero--sky .hero__jano{margin-top:6px;padding:5px 10px;font-size:11px}
.hero--sky .hero__cta{margin-top:6px;gap:5px}
.hero--sky .hero__cta .btn{padding:7px 14px;font-size:12.5px}
.hero--sky .hero__trustpilot{margin-top:4px;max-height:52px}
}
/* v70.72d — les 9 derniers pixels du widget. */
@media(max-width:900px){
.hero--sky{padding-top:6px}
.hero--sky .hero__copy{padding-top:4px}
.hero--sky .hero__sub{margin-bottom:6px}
.hero--sky .hero__cta{margin-top:4px}
.hero--sky .hero__trustpilot{margin-top:2px}
}
/* ---------- v70.73 · l'équilibre du jugement : tout visible, rien de coupé ----------
« Suis mes instructions mais fais-les selon ce que tu penses meilleur. »
Le v70.72 sur-rapetissait (boutons 37px) et coupait la mention du
widget en deux. Équilibre retenu : fiole 162px présente, titre 32px
(plancher de la grille display mobile), sous-titre 14px, boutons 42px
(vrai gabarit tactile), et Trustpilot clippé à 74px — SEUL le vide
interne de l'iframe est rogné, étoiles ET mention entières. Budget
mesuré ≈688px pour 694. */
@media(max-width:900px){
.hero--sky{padding-top:8px}
.hero--sky .hero__copy{padding-top:8px}
.hero--sky .hero__trio picture img{max-height:162px}
.hero--sky .eyebrow{font-size:11px;margin-bottom:4px}
.hero--sky .hero__title{font-size:32px;margin-bottom:6px}
.hero--sky .tagline{font-size:10px;margin:2px 0 6px}
.hero--sky .hero__sub{font-size:14px;margin:4px auto 8px;max-width:320px}
.hero--sky .hero__jano{padding:6px 12px;font-size:11.5px;margin-top:6px}
.hero--sky .hero__cta{margin-top:6px;gap:6px}
.hero--sky .hero__cta .btn{padding:10px 18px;font-size:13.5px}
.hero--sky .hero__trustpilot{margin-top:4px;max-height:74px}
}
/* ---------- v70.73b · l'équation RÉSOLUE : le gap fantôme de 28px ----------
Le .hero__split (grille desktop) garde un gap:28px qui s'applique aussi
au flex mobile — le voleur de place que tous les budgets rataient.
Ramené à 8px, tout tient à des tailles DIGNES : fiole 165px, titre
32px, sous-titre 14px, tagline conservée, boutons 43px tactiles,
pastille normale, Trustpilot 74px NON COUPÉ (seul le vide interne de
l'iframe est rogné). Budget mesuré ≈685px pour 694. */
@media(max-width:900px){
.hero--sky .hero__split{gap:8px}
.hero--sky{padding-top:6px}
.hero--sky .hero__copy{padding-top:6px}
.hero--sky .hero__trio picture img{max-height:165px}
.hero--sky .eyebrow{font-size:11px;margin-bottom:3px}
.hero--sky .hero__title{font-size:32px;margin-bottom:5px}
.hero--sky .tagline{font-size:10px;margin:2px 0 5px}
.hero--sky .hero__sub{font-size:14px;margin:3px auto 7px;max-width:320px}
.hero--sky .hero__jano{padding:6px 12px;font-size:11.5px;margin-top:5px}
.hero--sky .hero__cta{margin-top:5px;gap:5px}
.hero--sky .hero__cta .btn{padding:10px 18px;font-size:13.5px}
.hero--sky .hero__trustpilot{margin-top:3px;max-height:74px}
}
/* v70.73c — clôture de l'équation (jugement délégué) : la tagline sort du
hero MOBILE — elle est déjà imprimée sur l'étiquette de la fiole
au-dessus (doublon, −23px) — fiole 150px, micro-marges, Trustpilot 68px
(étoiles + mention entières, seul le vide sous la mention est rogné). */
@media(max-width:900px){
.hero--sky .tagline{display:none}
.hero--sky .hero__trio picture img{max-height:150px}
.hero--sky .hero__split{gap:6px}
.hero--sky .eyebrow{margin-bottom:2px}
.hero--sky .hero__title{margin-bottom:4px}
.hero--sky .hero__sub{margin-bottom:5px}
.hero--sky .hero__jano{margin-top:3px}
.hero--sky .hero__cta{margin-top:3px}
.hero--sky .hero__cta .btn{padding:9px 18px}
.hero--sky .hero__trustpilot{margin-top:2px;max-height:68px}
}
/* v70.73d — le pixel de trop (vide sous la mention). */
@media(max-width:900px){
.hero--sky{padding-top:4px}
}
/* v70.73e — retours « presque parfait » : le widget Trustpilot rendu
ENTIER (plus aucun clip — ses 84px naturels), fiole remontée à 180px,
et un peu d'air redistribué — la bande défilante n'a plus à tenir dans
le premier écran mobile (accord utilisateur), elle arrive au scroll. */
@media(max-width:900px){
.hero--sky .hero__trio picture img{max-height:180px}
.hero--sky .hero__trustpilot{max-height:none;margin-top:8px}
.hero--sky .hero__title{margin-bottom:6px}
.hero--sky .hero__sub{margin-bottom:8px}
.hero--sky .hero__jano{margin-top:6px}
.hero--sky .hero__cta{margin-top:6px;gap:7px}
.hero--sky{padding-bottom:34px}
}
/* ---------- v70.74 · fiole descendue/agrandie, boutons espacés, nappe SANS particules ----------
1 · la fiole descend de 12px par TRANSLATE sur le conteneur
(le flux ne bouge pas : « sans baisser le reste ») et passe à 195px ;
2 · boutons très légèrement plus espacés (gap 10) ;
3 · les PARTICULES de la nappe (petits cercles en radial-gradient)
disparaissent PARTOUT — mobile et desktop : nappe en dégradé pur. */
.hero--sky{background:linear-gradient(180deg,#eef3fa 0%,#e8f1f5 100%)}
@media(max-width:900px){
.hero--sky .hero__trio picture{transform:translateY(12px)}
.hero--sky .hero__trio picture img{max-height:195px}
.hero--sky .hero__cta{gap:10px}
}
/* v70.74b — fiole mobile INCLINÉE (11°, comme le desktop), en gardant sa
descente de 12px — les deux sur le conteneur (l'animation de
flottement écraserait un transform posé sur l'img). */
@media(max-width:900px){
.hero--sky .hero__trio picture{transform:translateY(12px) rotate(11deg)}
}
/* ---------- v70.74c · le « rectangle blanc » du mode sombre iOS ----------
Capture utilisateur analysée au pixel : le rectangle n'est PAS pleine
largeur (la nappe continue aux bords), il entoure exactement le widget
Trustpilot. Cause : l'iPhone est en MODE SOMBRE — Safari impose un
fond BLANC OPAQUE aux iframes cross-origin dont le color-scheme ne
correspond pas à celui de la page. Le site étant clair par conception,
on le déclare « light only » : Safari cesse de peindre le canvas des
iframes (Trustpilot redevient transparent) et n'auto-assombrit rien. */
:root{color-scheme:only light}
.hero__trustpilot iframe,.trustpilot-widget iframe{background:transparent;color-scheme:light}
/* v70.74d — le rectangle blanc RÉSISTAIT : mesure au pixel de la capture
utilisateur → boîte de ~208pt centrée sous les étoiles = l'IFRAME
Trustpilot elle-même, dont le document interne peint un fond blanc sur
iOS (transparent sur Chrome — invisible depuis mon poste). Correctif
indépendant de leur iframe : mix-blend-mode:multiply — le blanc
(255×fond=fond) disparaît sur la nappe, étoiles et texte restent
intacts. isolation:isolate borne le mélange au conteneur. */
.hero__trustpilot{isolation:isolate}
.hero__trustpilot iframe,.trustpilot-widget iframe{mix-blend-mode:multiply}
/* v70.74e — la barre Safari du bas se teinte en échantillonnant le contenu
au bord de l'écran (vérifié : refined a un theme-color NOIR mais une
barre lavande — c'est leur nappe saturée qui la teinte). La nôtre étant
quasi blanche en bas (#e8f1f5), la barre restait blanche. La nappe
s'enrichit doucement vers le bas (#dce9f5) et html porte la même teinte
pour l'overscroll — la barre Safari prend le bleu, comme chez refined. */
html{background-color:#dce9f5}
.hero--sky{background:linear-gradient(180deg,#eef3fa 0%,#e4eef7 55%,#dce9f5 100%)}
/* v70.74f — compagnon du viewport-fit=cover (header.php) : les éléments
FIXÉS en bas respectent la zone de geste iOS via safe-area-inset. */
.cart-fab{bottom:calc(22px + env(safe-area-inset-bottom, 0px))}
.cookiebar{bottom:calc(18px + env(safe-area-inset-bottom, 0px))}
#pp-cartdw .cartdw__panel{padding-bottom:env(safe-area-inset-bottom, 0px)}
/* v70.75 — la bande ne s'arrête plus au survol (demande utilisateur — la
pause :hover d'origine était pensée pour la lisibilité, retirée). */
.marquee:hover .marquee__track{animation-play-state:running}
/* ---------- v70.76 · chromatogramme refait en sortie d'instrument ----------
« Le graphe fait trop IA slop » : l'ancien dessin (trace en dégradé,
pic triangle, « 99.4% mesuré » inventé) devient une sortie HPLC
crédible — axes gradués min/mAU en libellés MONO, ligne de base
bruitée, pic asymétrique, marqueur de rétention pointillé, trace UNE
couleur pleine (DA v70.53). Le pied affiche la spécification réelle
(≥ 99.0 % HPLC), plus aucun chiffre inventé. */
.chroma--lab svg{display:block;width:100%;height:auto}
.chroma--lab .chroma__grid line{stroke:rgba(18,42,84,.06);stroke-width:1}
.chroma--lab .chroma__axis line{stroke:#b9c6d8;stroke-width:1}
.chroma--lab .chroma__ticks text{font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:9px;fill:#8a99b0;text-anchor:middle}
.chroma--lab .chroma__unit{text-anchor:end;font-size:8.5px;fill:#9aa8bd}
.chroma--lab .chroma__unit--y{text-anchor:start}
.chroma--lab .chroma__marker{stroke:rgba(22,164,143,.5);stroke-width:1;
stroke-dasharray:3 4}
.chroma--lab .chroma__rt{font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:9.5px;fill:#0E7D6C;text-anchor:end}
.chroma--lab .chroma__trace{stroke:var(--brand-navy);stroke-width:1.6;
stroke-linejoin:round;stroke-linecap:round}
.chroma--lab + .visual-card__foot .chroma__value small{font-size:11px;
font-weight:600;color:#8091a8;margin-left:4px}
/* L'ancienne étiquette flottante .chroma__peak n'existe plus dans le
balisage ; le libellé vit dans le SVG, ancré au marqueur. */
/* v70.77 — boutons « View » des cartes produit ARRONDIS en pilule (une
couche ancienne les avait mis en radius 2px, 10px sur mobile). */
.add-btn,.product .add-btn{border-radius:999px}
@media(max-width:680px){ .product .add-btn{border-radius:999px} }
/* v70.78 — « Purity, » : le teal descend d'un cran (#16A48F → #0E7D6C).
Sur la nappe pâle, le teal clair rendait ~3:1 (limite, effet pastel) ;
le profond rend ~4.9:1 — l'autorité du mot d'accent des références
(refined : violet PROFOND), sans quitter la marque. */
/* (0,2,0) obligatoire : la règle v70.31 est .hero__title .hero__accent. */
.hero__title .hero__accent{color:#0E7D6C;-webkit-text-fill-color:#0E7D6C}
/* v70.79 — le point vert de la pastille Janoshik devient un indicateur
ACTIF : anneau de pulsation qui s'étend et s'estompe (registre
« statut live »), coupé en reduced-motion. */
.hero__jano__dot{position:relative}
.hero__jano__dot::after{content:"";position:absolute;inset:0;border-radius:999px;
background:var(--brand-teal);
animation:janoPing 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes janoPing{
0%{transform:scale(1);opacity:.55}
75%,100%{transform:scale(2.8);opacity:0}
}
@media(prefers-reduced-motion:reduce){
.hero__jano__dot::after{animation:none;content:none}
}
/* v70.79b — pulsation plus RÉGULIÈRE : plus de temps mort entre deux
battements (l'ancien profil retenait l'anneau invisible 25% du cycle),
cadence continue en ease-out. */
.hero__jano__dot::after{animation:janoPingReg 1.6s ease-out infinite}
@keyframes janoPingReg{
0%{transform:scale(1);opacity:.5}
100%{transform:scale(2.4);opacity:0}
}
/* ============================================================
v70.80 · logo Janoshik dans la pastille du hero (2026-08-21)
Le vrai wordmark (assets/janoshik-logo.svg, gravé de leur SVG)
remplace le bouclier générique ; le libellé raccourcit en
« See the tests » — JANOSHIK est déjà écrit dans le logo.
img.classe + parent : bat le `.woocommerce img{height:auto}`
de woocommerce-layout.css si la classe se pose un jour ici.
============================================================ */
.hero__jano img.hero__jano__logo{height:13px;width:auto;display:block;flex:0 0 auto}
@media(max-width:680px){
.hero__jano img.hero__jano__logo{height:11px}
}
/* v70.80b — logo Janoshik en tête de la page COA (.coa-lab, contenu
WordPress + instantanés traduits). Hauteur fixée en CSS : bat le
height:auto des feuilles Woo, et l'attribut width/height ne sert
qu'à réserver l'espace avant peinture. */
.pp-content .coa-lab{margin:0 0 20px}
.pp-content .coa-lab img{height:30px;width:auto;display:block}
/* ============================================================
v70.81 · page COA compacte (2026-08-21)
« Trop d'espace ; quand on aura les COA il faut qu'on les voie
directement » : le cumul .page-hero (96px haut / 34 bas) +
.section{padding:120px 0} repoussait la liste des certificats
sous le pli. Resserré — SCOPÉ .pp-page-coa (classe body posée
par slug), les autres pages éditoriales gardent leur rythme.
Le contenu est aussi réordonné (WordPress + instantanés) :
« Batch certificates » suit l'accroche, la méthodologie clôt.
============================================================ */
.pp-page-coa .page-hero{padding:44px 0 12px}
.pp-page-coa .section{padding:26px 0 76px}
.pp-page-coa .pp-content h2{margin-top:34px}
@media(max-width:680px){
.pp-page-coa .page-hero{padding:28px 0 8px}
.pp-page-coa .section{padding:18px 0 56px}
}
/* ============================================================
v70.82 · boutique mobile : puces de catégories en UNE rangée
défilante (2026-08-21). « All / Cognitive… mal positionnés » :
les 7 puces se repliaient sur 3 lignes irrégulières. Motif des
références : rangée unique, défilement horizontal bord à bord
(marges négatives = padding du .container mobile, 20px), sans
barre visible ; la puce coupée au bord signale le défilement.
Vaut pour le thème ET le statique (products.html).
⚠️ Piège vérifié : .catalog-toolbar garde flex-wrap:wrap en
colonne — dans un conteneur MULTI-LIGNE, la ligne flex se
dimensionne sur son contenu et align-items:stretch stretch
vers 749px au lieu de contraindre. nowrap obligatoire ici.
============================================================ */
@media(max-width:680px){
.catalog-toolbar{flex-wrap:nowrap}
.chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;margin:0 -20px;padding:2px 20px 4px;
scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chips .chip{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
}
/* ============================================================
v70.83 · boutique mobile : micro-preuves empilées + fondu des
puces (2026-08-21). La ligne .page-hero__proof (3 vérités ·
points médians) se repliait sur 2 lignes irrégulières avec un
point suspendu en fin de ligne. Sur mobile : empilée, une
vérité par ligne, coche ✓ teal plate (registre v70.53), points
masqués. Et les puces de catégories reçoivent un fondu au bord
droit (mask-image) — signal de défilement plus net que la
seule puce coupée. Desktop inchangé.
============================================================ */
@media(max-width:680px){
.page-hero__proof{flex-direction:column;align-items:flex-start;gap:7px;margin-bottom:16px}
.page-hero__proof .page-hero__dot{display:none}
.page-hero__proof span:not(.page-hero__dot){position:relative;padding-left:20px}
.page-hero__proof span:not(.page-hero__dot)::before{content:"\2713";position:absolute;left:0;top:50%;
transform:translateY(-50%);color:var(--brand-teal);font-weight:700;letter-spacing:0}
.chips{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);
mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent)}
}
/* ============================================================
v70.83b · puces mobiles : encart gauche rendu + chevron
(2026-08-21). Deux retours utilisateur :
1) « Tout » collait au bord — piège vérifié : scroll-snap-align
aimante la 1re puce au scrollport, qui IGNORE le padding du
conteneur sans scroll-padding → scrollLeft=20 au chargement,
l'encart de 20px était mangé. scroll-padding le rétablit.
2) « on ne sait pas s'il faut scroller » — chevron › statique
épinglé au bord droit de la rangée (sur la toolbar, PAS sur
.chips qui défile avec son contenu), par-dessus le fondu.
============================================================ */
@media(max-width:680px){
.chips{scroll-padding:0 20px}
.catalog-toolbar{position:relative}
.catalog-toolbar::after{content:"\203A";position:absolute;right:0;top:11px;
font-size:22px;line-height:1;font-weight:600;color:var(--brand-navy);
opacity:.5;pointer-events:none}
}
/* ============================================================
v70.84 · boutique mobile : les produits au premier écran
(2026-08-21). Sous le pli, la 1re carte n'apparaissait qu'après
un défilement : l'accroche du hero répète mot pour mot les
trois coches de micro-preuves (labo tiers, ≥99 %, 24 h) — sur
mobile elle est masquée (le texte complet des catégories reste
rendu sous la grille, .catalog-desc), et les respirations se
resserrent. SCOPÉ aux archives produit ; desktop inchangé.
============================================================ */
@media(max-width:680px){
.post-type-archive-product .page-hero p:not(.page-hero__proof),
.tax-product_cat .page-hero p:not(.page-hero__proof){display:none}
.post-type-archive-product .page-hero,
.tax-product_cat .page-hero{padding:26px 0 14px}
.post-type-archive-product .section--alt,
.tax-product_cat .section--alt{padding-top:20px}
.post-type-archive-product .catalog-toolbar,
.tax-product_cat .catalog-toolbar{margin-bottom:18px;gap:10px}
.post-type-archive-product .page-hero__proof,
.tax-product_cat .page-hero__proof{margin-bottom:12px}
}
/* ============================================================
v70.85 · accueil : 4e vignette produit sur MOBILE (2026-08-21)
Demande utilisateur : « 3 produits puis View the full catalog,
mets-en 4, mais sur PC ne change pas. » front-page.php rend
désormais 4 cartes (3 vedettes + BPC-157/TB-500 par SKU) ; la
4e est masquée dès 681px — le PC garde ses 3 vedettes, le
mobile remplit sa grille 2×2 (la 3e carte restait orpheline).
Le statique (3 cartes) est insensible au sélecteur nth-child.
============================================================ */
@media(min-width:681px){
#catalog .products-grid .product:nth-child(4){display:none}
}
/* ============================================================
v70.86 · membership M3 — avantages Founder/VIP (2026-09-02)
Trois surfaces, toutes pilotées par l'ÉTAT SERVEUR du plugin
memberships (le CSS n'accorde rien) :
· .ship-bar.is-included — jauge du panier/tiroir quand la
livraison est INCLUSE (Founder) : pleine, teal, sans seuil ;
· .pd__early — bandeau d'accès anticipé 48 h sur la fiche
(carte à filet gauche, aplats : navy fermé / teal ouvert,
icône cadenas au trait, compte à rebours en DM Sans) ;
· .product__early — pastille d'état sur la vignette, sous
l'étiquette de catégorie (« Early access » teal plein /
« Coming soon » navy plein) ;
· .add-btn[disabled] — CTA inerte, libellé d'attente.
Aucun dégradé (DA amendée v70.53) ; couleurs de la palette.
============================================================ */
.ship-bar.is-included .ship-bar__fill{background:var(--brand-teal)}
.ship-bar.is-included .ship-bar__msg strong{color:var(--brand-navy)}
.pd__early{margin:0 0 14px;padding:12px 14px 12px 16px;border-radius:12px;
border:1px solid #e3e9f2;border-left:3px solid var(--brand-navy);background:#f6f8fc}
.pd__early.is-open{border-left-color:var(--brand-teal);background:#f1faf8;border-color:#d7ede8}
.pd__early-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pd__early-icon{display:inline-flex;color:var(--brand-navy)}
.pd__early.is-open .pd__early-icon{color:#0E7D6C}
.pd__early-kicker{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--brand-navy)}
.pd__early.is-open .pd__early-kicker{color:#0E7D6C}
.pd__early-msg{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.pd__early-count{font-family:var(--font-display,'DM Sans',Inter,system-ui,sans-serif);font-weight:700;
font-variant-numeric:tabular-nums;color:var(--brand-navy);white-space:nowrap}
.pd__early.is-open .pd__early-count{color:#0E7D6C}
.pd__early-count.is-done{font-weight:600}
.pd__early-date{margin:6px 0 0;font-size:12.5px;color:var(--muted,#5b6472)}
.pd__early-date a{color:var(--brand-navy);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.product__early{position:absolute;left:12px;top:40px;z-index:2;padding:3px 9px;border-radius:999px;
font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.5;color:#fff;
background:var(--brand-navy)}
.product__early.is-open{background:#0E7D6C}
.product__media{position:relative}
.pd__buy .add-btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}
/* ============================================================
v70.87 · page /membership/ — plans, module d'abonnement,
simulateur, FAQ (M4c, 2026-09-02). Registre des références
(aminoclub/refined : cartes de plans côte à côte, Founder en
carte pleine navy, pilules de cadence, comparatif chiffré)
dans NOTRE DA : aplats uniquement (v70.53), navy/teal, DM Sans
pour les chiffres, cartes blanches à hairline, coches teal /
tirets gris. Rien ici n'accorde un droit : le CSS habille ce
que le serveur a décidé (plugin memberships).
============================================================ */
/* ---- plans ---- */
.msp{padding-top:36px}
.msp__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.msp-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 26px 24px;
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}
.msp-card--vip{border-color:#b9d9ea;box-shadow:var(--shadow-card)}
.msp-card--founder{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}
.msp-card--founder .msp-card__name,.msp-card--founder .msp-card__price strong,
.msp-card--founder .msp-card__price span,.msp-card--founder .msp-card__alt,.msp-card--founder .msp-card__list li{color:#fff;
background:none;-webkit-text-fill-color:#fff}
.msp-card__tag{position:absolute;top:-12px;left:22px;padding:4px 11px;border-radius:999px;
font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--brand-teal)}
.msp-card--founder .msp-card__tag{background:#fff;color:var(--brand-navy)}
.msp-card__name{margin:0;font-size:22px;letter-spacing:-.015em;color:var(--ink);background:none;-webkit-text-fill-color:var(--ink)}
.msp-card__price{margin:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.msp-card__price strong{font-family:'DM Sans','Inter',system-ui,sans-serif;font-size:34px;font-weight:800;letter-spacing:-.02em;
line-height:1;color:var(--ink);background:none;-webkit-text-fill-color:var(--ink)}
.msp-card__price span{font-size:14px;color:var(--ink-soft)}
.msp-card__alt{margin:-6px 0 0;font-size:13.5px;color:var(--ink-soft)}
.msp-card__alt em{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-style:normal;font-size:11px;
font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#e6f5f2;color:#0E7D6C}
.msp-card--founder .msp-card__alt em{background:rgba(255,255,255,.16);color:#fff}
.msp-card__list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px;flex:1 1 auto}
.msp-card__list li{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.msp-card__list li::before{content:none}
.msp-card__list li svg{flex:0 0 auto;margin-top:3px}
.msp-card__list li.is-yes svg{color:var(--brand-teal)}
.msp-card--founder .msp-card__list li.is-yes svg{color:#7fe0cf}
.msp-card__list li.is-no{color:var(--ink-soft)}
.msp-card__list li.is-no svg{color:#b9c2d0}
.msp-card--founder .msp-card__list li.is-no{color:rgba(255,255,255,.62)}
.msp-card__foot{margin-top:6px}
.msp-card__foot .btn{width:100%;justify-content:center}
/* ⚠️ -webkit-text-fill-color:#fff hérité des boutons pleins (l.1122) PRIME sur
color : sans le re-poser, « Choose Founder » était blanc sur blanc (vu en
staging, 2026-09-02 — même piège que le CTA inversé, l.3074). */
.msp-card--founder .btn--primary{background:#fff;color:var(--brand-navy);-webkit-text-fill-color:var(--brand-navy);border-color:#fff}
.msp-card--founder .btn--primary:hover{background:#eef4fb;color:var(--brand-navy);-webkit-text-fill-color:var(--brand-navy)}
.msp-card__current{display:block;text-align:center;padding:11px 14px;border-radius:999px;font-size:13.5px;font-weight:700;
color:var(--brand-navy);background:#eef3fa}
.msp-card__current--muted{color:var(--ink-soft);background:var(--bg-soft);font-weight:600}
.msp-card--founder .msp-card__current{background:rgba(255,255,255,.14);color:#fff}
.msp-card.is-current{outline:2px solid var(--brand-teal);outline-offset:2px}
.msp__ruo{margin:18px 0 0;text-align:center;font-size:12.5px;color:var(--ink-soft)}
/* ---- module d'abonnement ---- */
.msjoin__inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.msjoin__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-card)}
.msjoin__row{display:grid;grid-template-columns:82px 1fr;gap:14px;align-items:center;margin-bottom:14px}
.msjoin__label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.msjoin__pills{display:flex;flex-wrap:wrap;gap:8px}
.msjoin__pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font:inherit;font-size:14.5px;
font-weight:600;color:var(--ink);background:#fff;border:1px solid #cfd8e3;cursor:pointer;transition:.16s ease}
.msjoin__pill:hover{border-color:var(--brand-navy)}
.msjoin__pill.is-active{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}
.msjoin__save{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;
border-radius:999px;background:#e6f5f2;color:#0E7D6C}
.msjoin__pill.is-active .msjoin__save{background:rgba(255,255,255,.18);color:#fff}
.msjoin__summary{display:grid;gap:2px;margin:18px 0 0;padding:16px 18px;border-radius:14px;background:var(--bg-soft)}
.msjoin__summary-plan{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-navy)}
.msjoin__summary-price{font-family:'DM Sans','Inter',system-ui,sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
background:none;-webkit-text-fill-color:var(--ink)}
.msjoin__summary-note{font-size:13.5px;color:var(--ink-soft)}
.msjoin__hint{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.msjoin__form{margin-top:18px}
.msjoin__form .btn{width:100%;justify-content:center}
.msjoin__secure{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-soft);text-align:center}
.msjoin__auth{margin-top:18px;text-align:center}
.msjoin__auth p{margin:0 0 12px;font-size:14px;color:var(--ink-soft)}
.msjoin__auth .btn{width:100%;justify-content:center}
/* ---- simulateur ---- */
.mssim__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-soft)}
.mssim__controls{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin-bottom:22px}
.mssim__presets{display:flex;flex-wrap:wrap;gap:8px}
.mssim__preset{padding:9px 14px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:#fff;
border:1px solid #cfd8e3;cursor:pointer;transition:.16s ease;font-variant-numeric:tabular-nums}
.mssim__preset:hover{border-color:var(--brand-navy)}
.mssim__preset.is-active{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}
.mssim__free{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft)}
.mssim__input{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.mssim__sym{padding:0 0 0 12px;color:var(--ink-soft);font-weight:600}
.mssim__input input{width:110px;padding:9px 12px 9px 6px;border:0;font:inherit;font-size:15px;font-weight:600;color:var(--ink);
font-variant-numeric:tabular-nums;background:transparent;outline:none}
.mssim__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mssim__col{display:grid;gap:4px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;
transition:opacity .15s ease}
.mssim__col--founder{background:var(--brand-navy);border-color:var(--brand-navy)}
.mssim__col--founder span,.mssim__col--founder small{color:#fff;background:none;-webkit-text-fill-color:#fff}
.mssim__col.is-current{outline:2px solid var(--brand-teal);outline-offset:2px}
.mssim__plan{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-navy)}
.mssim__plan em{font-style:normal;margin-left:6px;padding:1px 7px;border-radius:999px;background:#e6f5f2;color:#0E7D6C;letter-spacing:.02em}
.mssim__col--founder .mssim__plan em{background:rgba(255,255,255,.16);color:#fff}
.mssim__rate{font-size:12.5px;color:var(--ink-soft)}
.mssim__points{font-family:'DM Sans','Inter',system-ui,sans-serif;font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.05;
color:var(--ink);font-variant-numeric:tabular-nums;background:none;-webkit-text-fill-color:var(--ink)}
.mssim__points small{font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink-soft)}
.mssim__value{font-size:14px;color:var(--ink)}
.mssim__delta{min-height:18px;font-size:12.5px;font-weight:700;color:#0E7D6C}
.mssim__col--founder .mssim__delta{color:#7fe0cf;-webkit-text-fill-color:#7fe0cf}
.mssim.is-loading .mssim__col,[data-pp-sim].is-loading .mssim__col{opacity:.55}
.mssim__extras{margin-top:20px;padding:16px 18px;border-radius:14px;background:var(--bg-soft)}
.mssim__extras h3{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-navy);
background:none;-webkit-text-fill-color:var(--brand-navy)}
.mssim__extras ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mssim__extras li{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.mssim__extras li::before{content:none}
.mssim__extras li svg{flex:0 0 auto;margin-top:3px;color:var(--brand-teal)}
.mssim__breakeven{margin-top:14px;display:grid;gap:4px}
.mssim__breakeven p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-soft)}
.mssim__foot{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
/* ---- how points work ---- */
.mshow__ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#eef3fa;color:var(--brand-navy);margin-bottom:14px}
/* ---- responsive ---- */
@media(max-width:980px){
.msp__grid{grid-template-columns:1fr 1fr}
.msjoin__inner{grid-template-columns:1fr;gap:22px}
}
@media(max-width:680px){
.msp__grid{grid-template-columns:1fr}
.msp-card{padding:24px 20px 20px}
.msjoin__card,.mssim__card{padding:20px 18px}
.msjoin__row{grid-template-columns:1fr;gap:8px}
.mssim__grid{grid-template-columns:1fr}
.mssim__points{font-size:28px}
}
/* =====================================================================
v70.88 · page /membership/ — cartes de plan cliquables + marques de
paiement express sous le CTA (2026-09-02, demande utilisateur :
« quand on clique sur le carré ça le sélectionne » ; Apple Pay /
Google Pay sont proposés par la page Stripe hébergée, on l'annonce).
===================================================================== */
.msp-card[data-pp-card]{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.msp-card[data-pp-card]:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.msp-card[data-pp-card]:focus-visible{outline:3px solid var(--brand-teal);outline-offset:3px}
.msp-card.is-selected{border-color:var(--brand-teal);box-shadow:0 0 0 3px var(--brand-teal),var(--shadow-card)}
.msp-card--founder.is-selected{border-color:#7fe0cf;box-shadow:0 0 0 3px #7fe0cf,var(--shadow-card)}
.msp-card.is-selected .msp-card__foot .btn--ghost{border-color:var(--brand-teal);color:var(--brand-teal)}
.msjoin__express{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:14px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink-soft)}
.msjoin__express img{display:block;height:20px;width:auto}
.msjoin__express span{flex:1 1 100%}
@media(min-width:681px){.msjoin__express span{flex:1 1 auto}}
/* ============================================================
v70.89 · INSPIRÉ D'AMINOCLUB ET DE REFINEDBIOLABS, À LA DA (2026-09-03)
Demande utilisateur : « inspire-toi grandement du design de aminoclub
et refinedbiolabs » — après le retour à v70.88. Pas une copie : la
structure de la maison reste (hero nappe + Trustpilot + Janoshik,
marquee, statband), on y greffe les signatures des deux références,
mesurées dans Chrome :
· refined : kickers 11px/.18em gris, titres 48-60px serrés, cartes
16px à filet + halo d'angle, section « discovery » (catégories +
recherche) sur fond teinté à filets, protocole numéroté 01→06 en
carte, bandeau « proof on demand », bouton « View » pleine largeur,
CTA sur nappe avec fioles inclinées aux bords, footer navy à
colonnes + marques de paiement en pilules ;
· aminoclub : pastille de pureté sur le panneau, grille à 4, cartes
d'offres sur la boutique, tuiles bundle, rangées de réassurance,
panneau FDA à liseré, « We accept », FAQ à filets + chevron rond.
Couleurs : navy à la place du noir/violet, teal en accent, nappes
bleu-teal pâles à la place du lavande / vert-jaune.
============================================================ */
/* --- 0 · Tokens, sections, boutons, kickers --- */
:root{--v89-tint:#f4f8fb;--v89-line:#e3e9f0;--v89-muted:#6b7280;--v89-gray:#555}
.section{padding:88px 0}
.section--tint{background:var(--v89-tint);border-top:1px solid var(--v89-line);border-bottom:1px solid var(--v89-line)}
.section__head{max-width:760px;margin:0 auto 44px}
.section__head h2{font-size:clamp(32px,4.2vw,48px);line-height:1.06;letter-spacing:-.025em;font-weight:700}
.section__head p{font-size:17px;line-height:1.6;color:var(--v89-muted);margin-top:14px}
.section__head--left{margin-left:0}
.section__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.section__more{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--brand-navy);
padding-bottom:8px;white-space:nowrap}
.section__more:hover{text-decoration:underline}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:600;color:var(--v89-muted)}
.btn--lg{min-height:48px;padding:0 28px;font-size:14px;font-weight:600;line-height:1}
.btn--light{background:#fff;color:var(--brand-navy);-webkit-text-fill-color:var(--brand-navy);border:0;box-shadow:none}
.btn--light:hover{background:#eaf1fa;color:var(--brand-navy);-webkit-text-fill-color:var(--brand-navy);transform:translateY(-1px)}
@media(max-width:680px){
.section{padding:52px 0}
.section__head{margin-bottom:28px}
.section__head h2{font-size:30px}
.section__head p{font-size:15.5px}
.section__head--row{flex-direction:column;align-items:flex-start;gap:8px}
.section__more{display:none}
}
/* --- 1 · Catalogue : grille à 4, carte v89 (pureté sur le panneau, kicker,
« View » pleine largeur) --- */
#catalog{padding:80px 0 64px}
#catalog .center--mobile{display:none}
#catalog .products-grid,.section--shop .products-grid{grid-template-columns:repeat(4,1fr);gap:20px}
@media(min-width:681px){#catalog .products-grid .product:nth-child(4){display:flex}}
.section--shop .products-grid{grid-template-columns:repeat(3,1fr);gap:24px}
.product{position:relative;display:flex;flex-direction:column;background:#fff;
border:1px solid var(--v89-line);border-radius:16px;box-shadow:none;overflow:hidden;
transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease}
.product:hover{box-shadow:0 20px 48px rgba(18,42,84,.09);transform:translateY(-2px);border-color:transparent}
.product__media{position:relative;height:auto;aspect-ratio:1/1;display:grid;place-items:center;padding:34px 24px 26px;
background:
radial-gradient(90% 70% at 50% 100%, rgba(22,164,143,.10), transparent 62%),
radial-gradient(80% 60% at 20% 0%, rgba(42,154,194,.12), transparent 60%),
linear-gradient(180deg,#f3f7fb 0%,#e9f1f8 100%);
border-bottom:1px solid var(--v89-line)}
.product__media::after{display:none}
.product .product__media img.product__photo{height:auto;max-height:80%;width:auto;max-width:56%;object-fit:contain;
filter:drop-shadow(0 16px 20px rgba(18,42,84,.18))}
.product__proof{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;
height:26px;padding:0 10px 0 8px;border-radius:999px;background:rgba(255,255,255,.92);
border:1px solid rgba(18,42,84,.1);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.product__proof svg{color:var(--brand-teal)}
.product__early{position:absolute;top:14px;right:14px;z-index:3}
.product__tag{display:none}
.product__body{padding:18px 20px 20px;gap:5px}
.product__kicker{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--v89-muted)}
.product__name{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.product__desc{font-size:13px;line-height:1.5;color:var(--v89-muted);flex:0 0 auto;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product .size-opts{gap:6px;margin:6px 0 0}
.product .size-opt{flex:0 0 auto;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;
border:1px solid var(--v89-line);color:var(--v89-gray);background:#fff;box-shadow:none}
.product .size-opt.is-active{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff;box-shadow:none}
.product .size-opt .save{color:inherit;opacity:.85}
.product__foot{flex-direction:column;align-items:stretch;gap:12px;margin-top:auto;padding-top:10px}
.product__pricerow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.product__price{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.product__price small{display:inline;font-size:12px;font-weight:500;color:var(--v89-muted);margin-left:4px}
.product__size{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--v89-muted)}
.product .add-btn{display:flex;align-items:center;justify-content:center;width:100%;height:46px;padding:0 16px;
border-radius:999px;border:0;background:var(--brand-navy);color:#fff;-webkit-text-fill-color:#fff;
font-size:14px;font-weight:600;letter-spacing:.02em;box-shadow:none}
.product .add-btn:hover{background:#0d2c5c;transform:none;box-shadow:none}
@media(max-width:900px){
#catalog .products-grid,.section--shop .products-grid,.pd__related .products-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(max-width:680px){
#catalog{padding:52px 0 44px}
#catalog .center--mobile{display:flex;margin-top:22px}
.products-grid,#catalog .products-grid,.section--shop .products-grid,.pd__related .products-grid{grid-template-columns:1fr 1fr;gap:12px}
.product{border-radius:14px}
.product__media{padding:18px 12px 14px}
.product .product__media img.product__photo{max-width:66%}
.product__proof{top:10px;left:10px;height:22px;font-size:10px;padding:0 8px 0 6px}
.product__body{padding:12px 12px 14px}
.product__name{font-size:15px}
.product__desc{display:none}
.product__price{font-size:16px}
.product .add-btn{height:40px;font-size:13px}
}
/* --- 2 · Discovery : recherche centrée + cartes de catégories (refined) --- */
.discover .section__head{text-align:center}
.discover__search{position:relative;display:flex;align-items:center;max-width:560px;margin:-14px auto 36px;
background:#fff;border:1px solid var(--v89-line);border-radius:999px;height:56px;padding:0 20px;
box-shadow:0 12px 32px rgba(18,42,84,.06)}
.discover__search svg{flex:0 0 auto;color:var(--v89-muted)}
.discover__search input{flex:1 1 auto;min-width:0;height:100%;border:0;background:none;padding:0 12px;font-size:15px;color:var(--ink)}
.discover__search input:focus{outline:none}
.discover__search:focus-within{border-color:var(--brand-navy);box-shadow:0 0 0 3px rgba(18,58,120,.12)}
.discover__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.discover__card{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"ico ico" "name chev" "count chev";
align-items:center;gap:4px 12px;padding:24px;background:#fff;border:1px solid var(--v89-line);border-radius:16px;
text-decoration:none;color:var(--ink);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.discover__card:hover{box-shadow:0 20px 48px rgba(18,42,84,.09);transform:translateY(-2px);border-color:transparent}
.discover__ico{grid-area:ico;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:22px;
background:rgba(18,58,120,.07);color:var(--brand-navy)}
.discover__card:nth-child(3n+2) .discover__ico{background:rgba(22,164,143,.10);color:var(--brand-teal)}
.discover__card:nth-child(3n) .discover__ico{background:rgba(42,154,194,.11);color:var(--brand-blue)}
.discover__name{grid-area:name;font-size:19px;font-weight:700;letter-spacing:-.015em;
font-family:'DM Sans','Inter',system-ui,sans-serif}
.discover__count{grid-area:count;font-size:14px;color:var(--v89-muted)}
.discover__chev{grid-area:chev;color:var(--v89-muted)}
@media(max-width:900px){.discover__grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:680px){
.discover__search{height:48px;margin-bottom:24px}
.discover__grid{grid-template-columns:1fr 1fr;gap:10px}
.discover__card{padding:16px}
.discover__ico{width:40px;height:40px;margin-bottom:14px}
.discover__name{font-size:15px}
.discover__count{font-size:12.5px}
}
/* --- 3 · « Why » : cartes 16px à filet + halo d'angle, tuile d'icône (refined) --- */
.features--v89{grid-template-columns:repeat(3,1fr);gap:20px}
.features--v89 .feature{position:relative;overflow:hidden;background:#fff;border:1px solid var(--v89-line);border-radius:16px;
padding:36px 32px 34px;box-shadow:none}
.features--v89 .feature::before{content:"";position:absolute;top:-80px;right:-80px;width:240px;height:240px;border-radius:999px;
background:radial-gradient(50% 50% at 50% 50%, rgba(42,154,194,.13), transparent 70%);pointer-events:none}
.features--v89 .feature:hover{box-shadow:0 20px 48px rgba(18,42,84,.09);transform:translateY(-2px);border-color:transparent}
.features--v89 .feature__icon{width:48px;height:48px;border-radius:12px;margin-bottom:24px}
.features--v89 .feature h3{font-size:22px;letter-spacing:-.015em;line-height:1.2}
.features--v89 .feature p{font-size:15.5px;line-height:1.6;color:var(--v89-muted);margin-top:10px}
@media(max-width:900px){.features--v89{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
.features--v89{grid-template-columns:1fr;gap:12px}
.features--v89 .feature{padding:24px 22px}
.features--v89 .feature h3{font-size:19px}
}
/* --- 4 · Qualité : texte + chiffres + chromatogramme / protocole numéroté, puis bandeau de preuve --- */
.quality.quality--v89{background:var(--v89-tint);color:var(--ink);padding:96px 0 88px;
border-top:1px solid var(--v89-line);border-bottom:1px solid var(--v89-line);
background-image:
linear-gradient(rgba(18,42,84,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(18,42,84,.035) 1px, transparent 1px);
background-size:56px 56px}
.quality--v89 .quality__inner{grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.quality--v89 h2{font-size:clamp(36px,4.6vw,56px);line-height:1.02;letter-spacing:-.03em;color:var(--ink)}
.quality--v89 .quality__text > p{font-size:17px;line-height:1.6;color:var(--v89-gray);margin-top:16px;max-width:52ch}
.qstats{display:flex;margin:26px 0 24px;padding-bottom:22px;border-bottom:1px solid var(--v89-line)}
.qstats > div{display:flex;align-items:center;gap:10px;padding:0 22px}
.qstats > div:first-child{padding-left:0}
.qstats > div + div{border-left:1px solid var(--v89-line)}
.qstats strong{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
font-family:'DM Sans','Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums}
.qstats span{font-size:13px;line-height:1.25;color:var(--v89-muted);max-width:10ch}
.quality--v89 .visual-card{background:#fff;border:1px solid var(--v89-line);border-radius:16px;padding:22px;box-shadow:none;color:var(--ink)}
.quality--v89 .visual-card__head{color:var(--ink);font-weight:600}
.quality--v89 .visual-card__foot span{color:var(--v89-muted)}
.protocol{list-style:none;margin:0;padding:8px 0;background:#fff;border:1px solid var(--v89-line);border-radius:18px;
box-shadow:0 2px 6px rgba(18,42,84,.04),0 20px 48px rgba(18,42,84,.07)}
.protocol__row{display:grid;grid-template-columns:34px 44px 1fr auto;align-items:center;gap:14px;padding:18px 24px}
.protocol__row + .protocol__row{border-top:1px solid var(--v89-line)}
.protocol__num{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--v89-muted);font-variant-numeric:tabular-nums}
.protocol__ico{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
background:rgba(18,58,120,.07);color:var(--brand-navy)}
.protocol__row:nth-child(3n+2) .protocol__ico{background:rgba(22,164,143,.10);color:var(--brand-teal)}
.protocol__row:nth-child(3n) .protocol__ico{background:rgba(42,154,194,.11);color:var(--brand-blue)}
.protocol__txt{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
font-family:'DM Sans','Inter',system-ui,sans-serif}
.protocol__chip{padding:6px 11px;border-radius:999px;background:rgba(22,164,143,.10);color:#0d6b5d;
font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.protocol__more{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0 24px;font-size:14px;font-weight:600;color:var(--brand-navy)}
.protocol__more:hover{text-decoration:underline}
.proofbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:56px;padding:26px 32px;
border-radius:18px;background:var(--brand-navy);color:#fff;
background-image:radial-gradient(80% 120% at 100% 0%, rgba(22,164,143,.35), transparent 60%)}
.proofbar__txt{display:flex;flex-direction:column;gap:4px}
.proofbar__kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#5fd0bf}
.proofbar__txt strong{font-size:22px;letter-spacing:-.015em;font-family:'DM Sans','Inter',system-ui,sans-serif}
.proofbar__sub{font-size:14px;color:rgba(255,255,255,.72)}
@media(max-width:900px){
.quality--v89 .quality__inner{grid-template-columns:1fr;gap:36px}
.quality--v89 h2{font-size:34px}
.protocol__row{grid-template-columns:44px 1fr;grid-template-areas:"ico txt" "ico chip";gap:4px 14px;padding:14px 18px}
.protocol__num{display:none}
.protocol__ico{grid-area:ico}
.protocol__txt{grid-area:txt;font-size:16px}
.protocol__chip{grid-area:chip;justify-self:start}
.proofbar{flex-direction:column;align-items:flex-start;padding:22px;margin-top:40px}
}
@media(max-width:680px){
.quality.quality--v89{padding:56px 0 52px}
.qstats > div{padding:0 12px}
.qstats strong{font-size:22px}
}
/* --- 5 · FAQ : tête centrée, colonne 768px, filets, chevron rond --- */
.faq--v89 .faq{max-width:768px;margin:0 auto}
.faq--v89 .section__head{text-align:center;margin:0 auto 30px}
.faq--v89 .accordion{gap:0}
.faq--v89 .acc-item{background:none;border:0;border-bottom:1px solid var(--v89-line);border-radius:0;box-shadow:none}
.faq--v89 .acc-q{padding:22px 0;font-size:17px;font-weight:600;line-height:1.35;color:var(--ink);background:none;text-align:left}
.faq--v89 .acc-q:hover{color:var(--brand-navy)}
.faq--v89 .acc-q span{flex:0 0 auto;width:28px;height:28px;border-radius:999px;background:var(--v89-tint);
display:grid;place-items:center;font-size:18px;line-height:1;font-weight:400;color:var(--ink);
transition:transform .3s ease,background-color .2s ease}
.faq--v89 .acc-q:hover span{background:#e3e9f0}
.faq--v89 .acc-item.is-open .acc-q span,.faq--v89 .acc-item.open .acc-q span{transform:rotate(45deg)}
.faq--v89 .acc-a p{padding:0 44px 22px 0;font-size:15.5px;line-height:1.6;color:var(--v89-gray)}
@media(max-width:680px){
.faq--v89 .acc-q{padding:16px 0;font-size:15.5px}
.faq--v89 .acc-a p{padding:0 0 16px;font-size:15px}
}
/* --- 6 · CTA : nappe pâle, titre centré, deux fioles inclinées aux bords --- */
.cta.cta--v89{position:relative;overflow:hidden;padding:88px 0 96px;
background:linear-gradient(180deg,#eef4fa 0%,#e9f6f2 100%)}
.cta--v89 .cta__inner{position:relative;z-index:1;background:none;border-radius:0;padding:0;overflow:visible;
box-shadow:none;text-align:center;color:var(--ink)}
.cta--v89 h2{font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:700;letter-spacing:-.025em;color:var(--ink);
max-width:720px;margin:0 auto}
.cta--v89 .cta__inner p{color:var(--v89-gray);font-size:17px;line-height:1.6;max-width:520px;margin:14px auto 0}
.cta--v89 .cta__inner .btn--primary{background:var(--brand-navy);color:#fff;-webkit-text-fill-color:#fff;
box-shadow:0 1px 2px rgba(18,42,84,.14),0 6px 16px rgba(18,58,120,.14)}
.cta--v89 .cta__inner .btn--primary:hover{background:#0d2c5c;color:#fff;-webkit-text-fill-color:#fff;transform:translateY(-1px)}
.cta--v89 .btn--ghost-light{background:#fff;color:var(--ink);border-color:rgba(18,42,84,.18)}
.cta--v89 .btn--ghost-light:hover{background:#fff;border-color:rgba(18,42,84,.4)}
.cta--v89 .cta__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta--v89 .cta__vial{position:absolute;top:50%;width:auto;height:300px;filter:drop-shadow(0 30px 40px rgba(18,42,84,.2))}
.cta--v89 .cta__vial--l{left:2%;transform:translateY(-50%) rotate(-12deg)}
.cta--v89 .cta__vial--r{right:2%;transform:translateY(-50%) rotate(12deg)}
@media(max-width:900px){
.cta.cta--v89{padding:56px 0 64px}
.cta--v89 .cta__vial{height:160px;opacity:.6}
.cta--v89 .cta__vial--l{left:-40px}
.cta--v89 .cta__vial--r{right:-40px}
}
/* --- 7 · Footer : navy, 2+4 colonnes, panneau FDA à liseré, « We accept » en pilules, barre de confiance --- */
.footer.footer--v89{background:#0a192f;color:rgba(255,255,255,.75);padding:64px 0 0}
.footer--v89 .footer__inner{grid-template-columns:2fr 4fr;gap:48px}
.footer--v89 .footer__brand p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.7);max-width:340px;margin-top:16px}
.footer--v89 .footer__cols{grid-template-columns:repeat(4,1fr);gap:24px}
.footer--v89 .footer__cols h4{font-size:11px;letter-spacing:.18em;color:#fff;margin-bottom:16px}
.footer--v89 .footer__cols a{font-size:15px;padding:6px 0;color:rgba(255,255,255,.8)}
.footer--v89 .footer__cols a:hover{color:#fff}
.footer--v89 .fda-bar{margin-top:56px;border-top:0;padding-top:0}
.footer--v89 .fda-bar__panel{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.1);border-left:4px solid #e0b25a;border-radius:8px;padding:24px 28px}
.footer--v89 .fda-bar__panel::before{content:none}
.footer--v89 .fda-bar__icon{display:block;flex:0 0 auto;color:#e0b25a;margin-top:1px}
.footer--v89 .fda-bar__label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#e0b25a;font-weight:700;margin:0 0 8px}
.footer--v89 .fda-bar__text{font-size:12px;line-height:1.8;color:rgba(255,255,255,.62)}
.footer--v89 .fda-bar__link{color:#f0cf7f;border-bottom:1px solid rgba(240,207,127,.4)}
.footer--v89 .fda-bar__link:hover{color:#fff;border-bottom-color:#fff}
.footer__accept{display:flex;align-items:center;justify-content:center;gap:16px;
margin:26px auto 0;padding:22px 24px;border-top:1px solid rgba(255,255,255,.1)}
.footer__accept > span{font-size:12px;color:rgba(255,255,255,.55)}
.footer__accept ul{list-style:none;display:flex;gap:8px;margin:0;padding:0}
.footer__accept li{display:grid;place-items:center;height:26px;padding:0 6px;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);border-radius:999px}
.footer__accept img{height:16px;width:auto;display:block}
.footer--v89 .footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
border-top:1px solid rgba(255,255,255,.1);margin:0 auto;padding:18px 24px 24px}
.footer--v89 .footer__bottom p{margin:0;font-size:12px;color:rgba(255,255,255,.55)}
.footer__trust{list-style:none;display:flex;gap:22px;margin:0;padding:0}
.footer__trust li{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.65)}
.footer__trust svg{width:16px;height:16px;flex:0 0 auto}
@media(max-width:900px){
.footer--v89 .footer__inner{grid-template-columns:1fr;gap:36px}
.footer--v89 .footer__cols{grid-template-columns:1fr 1fr;gap:28px 16px}
}
@media(max-width:680px){
.footer.footer--v89{padding-top:44px}
.footer--v89 .footer__cols a{font-size:14px;padding:5px 0}
.footer--v89 .fda-bar{margin-top:36px}
.footer--v89 .fda-bar__panel{padding:18px 16px;gap:12px}
.footer__accept{flex-wrap:wrap;gap:10px 12px;padding:18px 20px}
.footer--v89 .footer__bottom{flex-direction:column;align-items:flex-start}
.footer__trust{flex-wrap:wrap;gap:12px 18px}
}
/* --- 8 · Boutique : hero centré (refined), puces, tri, cartes d'offres (amino), grille 3 --- */
.page-hero--shop{padding:56px 0 40px;text-align:center;background:var(--v89-tint);border-bottom:1px solid var(--v89-line)}
.shophero{display:flex;flex-direction:column;align-items:center;text-align:center}
.shophero__badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;
border:1px solid var(--v89-line);font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:18px}
.shophero__badge svg{color:var(--brand-teal)}
.page-hero--shop h1{font-size:clamp(36px,5.2vw,60px);line-height:1.02;letter-spacing:-.03em;margin:0}
.shophero > p{max-width:60ch;margin:14px auto 0;font-size:17px;line-height:1.6;color:var(--v89-muted)}
.shophero__search{position:relative;display:flex;align-items:center;width:min(100%,760px);height:64px;margin:30px auto 0;
padding:0 24px;background:#fff;border:1px solid var(--v89-line);border-radius:999px;box-shadow:0 12px 32px rgba(18,42,84,.06)}
.shophero__ico{flex:0 0 auto;color:var(--v89-muted)}
.shophero__search .search-input{flex:1 1 auto;min-width:0;height:100%;border:0;background:none;padding:0 14px;font-size:16px;
color:var(--ink);border-radius:0}
.shophero__search .search-input:focus{outline:none;box-shadow:none;border:0}
.shophero__search:focus-within{border-color:var(--brand-navy);box-shadow:0 0 0 3px rgba(18,58,120,.12)}
.shophero__count{flex:0 0 auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--v89-muted);white-space:nowrap}
.section.section--shop{background:#fff;padding:36px 0 72px}
.catalog-toolbar{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:16px;margin:0 0 26px;padding:0;border:0}
.catalog-sort{margin:0}
.catalog-sort select{height:42px;border-radius:999px;border:1px solid var(--v89-line);background:#fff;padding:0 40px 0 16px;
font-size:13.5px;font-weight:500;color:var(--ink);appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-size:16px 16px;background-position:right 14px center}
.chip,.chips .chip,.catalog-toolbar .chips a.chip{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;
border:1px solid var(--v89-line);background:#fff;color:var(--ink);font-size:11.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;line-height:1;box-shadow:none}
.chip:hover,.chips .chip:hover{border-color:rgba(18,42,84,.4);color:var(--ink);background:#fff}
.chip.is-active,.chips .chip.is-active{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}
.shop-promos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 32px}
.shop-promo{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center;padding:20px 22px;border-radius:16px;
border:1px solid var(--v89-line);background:#fff}
.shop-promo--a{background:linear-gradient(120deg,#eaf7f3 0%,#f4f8fb 100%)}
.shop-promo--b{background:linear-gradient(120deg,#eef0f8 0%,#f7f8fc 100%)}
.shop-promo--c{background:linear-gradient(120deg,#eaf2fb 0%,#f4f8fb 100%)}
.shop-promo__badge{width:60px;height:60px;border-radius:999px;background:#fff;display:flex;flex-direction:column;align-items:center;
justify-content:center;text-align:center;font-weight:800;color:var(--brand-navy);font-size:15px;line-height:1;
font-family:'DM Sans','Inter',system-ui,sans-serif;box-shadow:0 1px 3px rgba(18,42,84,.08)}
.shop-promo__badge small{display:block;font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--v89-muted);
margin-top:3px;font-family:'Inter',system-ui,sans-serif;font-weight:700}
.shop-promo h3{font-size:18px;font-weight:700;margin:0 0 4px;color:var(--ink)}
.shop-promo p{font-size:13.5px;line-height:1.45;color:#4b5563;margin:0}
.shop-promo .btn{grid-column:1/-1;justify-self:start;min-height:40px;padding:0 20px;font-size:14px}
.volume-note .bulk__pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0}
.volume-note .bulk__pill{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
background:#fff;border:1px solid var(--v89-line);color:var(--ink)}
.volume-note .bulk__pill.is-dark{background:var(--brand-navy);color:#fff;border-color:transparent}
.volume-note .bulk__pill.is-soft{background:#d9f2ec;color:#0d6b5d;border-color:transparent}
.volume-note .section__head{text-align:center}
.section--mint{background:var(--v89-tint);border-top:1px solid var(--v89-line);border-bottom:1px solid var(--v89-line)}
@media(max-width:900px){
.shop-promos{grid-template-columns:1fr}
.catalog-toolbar{flex-direction:column-reverse;align-items:stretch}
}
@media(max-width:680px){
.page-hero--shop{padding:36px 0 28px}
.shophero__search{height:52px;margin-top:20px;padding:0 16px}
.shophero__count{display:none}
.shop-promos{margin-bottom:18px;gap:10px}
.shop-promo{padding:14px 16px;border-radius:14px}
.shop-promo__badge{width:48px;height:48px;font-size:13px}
.shop-promo h3{font-size:16px}
.shop-promo p{font-size:13px}
}
/* --- 9 · Fiche : deux cartes 16px (refined), kicker, formats 8px, tuiles bundle bordées, CTA pilule, rangées de réassurance (amino) --- */
.pd__crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--v89-muted);margin:8px 0 22px}
.pd__crumb a{color:var(--v89-muted);font-weight:600}
.pd__grid{grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.pd__media{position:relative;display:flex;align-items:center;justify-content:center;align-self:start;min-height:600px;
padding:48px 24px 84px;border-radius:16px;box-shadow:none;border:1px solid var(--v89-line);
background:
radial-gradient(90% 70% at 50% 100%, rgba(22,164,143,.12), transparent 62%),
radial-gradient(80% 60% at 20% 0%, rgba(42,154,194,.14), transparent 60%),
linear-gradient(180deg,#f3f7fb 0%,#e9f1f8 100%)}
.pd__mediapills{position:absolute;left:16px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.pd__mediapill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;
background:#fff;border:1px solid rgba(18,42,84,.08);font-size:10px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:#3a4358;white-space:nowrap}
.pd__mediapill--dot::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--brand-teal)}
.pd__info{display:flex;flex-direction:column;border-radius:16px;padding:32px;border:1px solid var(--v89-line);box-shadow:none}
.pd__subtitle{order:-2;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--v89-muted);margin:0 0 10px}
.pd__name{order:-1;font-size:44px;line-height:1.02;letter-spacing:-.03em;margin:0 0 14px}
.pd__cat{display:inline-block;align-self:flex-start;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
color:var(--ink);border:1px solid var(--v89-line);border-radius:999px;padding:6px 11px;margin:0 0 14px;background:#fff}
.pd__purity{font-size:14px;color:var(--v89-gray);margin-bottom:14px}
.pd__desc{font-size:15px;line-height:1.6;color:#666;padding-bottom:22px;border-bottom:1px solid var(--v89-line);margin-bottom:22px}
.pd__label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--v89-muted);font-weight:600;margin:0 0 10px}
.pd .size-opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;max-width:none}
.pd .size-opt{flex:0 0 auto;height:40px;padding:0 16px;border-radius:8px;border:1px solid var(--v89-line);background:#fff;
color:var(--v89-gray);font-size:14px;font-weight:600;box-shadow:none;display:inline-flex;align-items:center;gap:6px}
.pd .size-opt:hover{border-color:#9aa8bb;color:var(--ink)}
.pd .size-opt.is-active{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff;box-shadow:none}
.pd .size-opt .save{color:inherit;opacity:.85;font-size:12px}
.pd__qty{display:inline-flex;align-items:center;align-self:flex-start;height:42px;padding:0 6px;
border:1px solid var(--v89-line);border-radius:999px;margin-bottom:20px}
.pd__qty button{width:32px;height:32px;border-radius:999px;border:0;background:none;font-size:18px;line-height:1;color:var(--v89-gray);cursor:pointer}
.pd__qty button:hover{background:var(--v89-tint);color:var(--ink)}
.pd__qty input{width:44px;border:0;background:none;text-align:center;font-weight:600;font-size:15px;color:var(--ink)}
.pd .pd__info .bundle-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 20px}
.pd .pd__info .bundle-opt{position:relative;min-height:66px;border-radius:12px;border:1px solid var(--v89-line);background:#fff;
padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:none}
.pd .pd__info .bundle-opt:hover{border-color:#9aa8bb}
.pd .pd__info .bundle-opt.is-active{background:rgba(22,164,143,.06);border-color:var(--brand-teal);box-shadow:inset 0 0 0 1px var(--brand-teal)}
.pd .pd__info .bundle-opt__flag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:8.5px;letter-spacing:.08em;
text-transform:uppercase;font-weight:700;color:#fff;padding:3px 8px;border-radius:999px;background:var(--brand-teal);white-space:nowrap;line-height:1.2}
.pd .pd__info .bundle-opt__flag--popular{background:var(--brand-navy)}
.pd .pd__info .bundle-opt__vials img{height:30px;width:auto}
.pd .pd__info .bundle-opt__text{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pd .pd__info .bundle-opt__label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.pd .pd__info .bundle-opt__save{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0d6b5d}
.pd__buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 14px}
.pd__buy .product__price{flex:1 0 100%;text-align:right;font-size:28px;font-weight:800;letter-spacing:-.02em}
.pd__coa{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 22px;border-radius:999px;
border:1px solid var(--v89-line);background:#fff;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;text-decoration:none}
.pd__coa:hover{border-color:#9aa8bb}
.pd__buy .add-btn{flex:1 1 auto;min-height:52px;height:52px;border-radius:999px;font-size:15px;font-weight:600;
justify-content:center;padding:0 24px;box-shadow:0 8px 20px rgba(18,58,120,.18)}
.pd__perks{list-style:none;display:block;margin:16px 0 0;padding:0;border:1px solid var(--v89-line);
border-radius:12px 12px 0 0;border-bottom:0;background:#fff;box-shadow:none}
.pd__perks li{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;font-size:13px;line-height:1.45;font-weight:500;color:var(--ink)}
.pd__perks li + li{border-top:1px solid #f0f3f7}
.pd__perks li svg{flex:0 0 auto;margin-top:1px}
.pd__accept{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:12px 16px;border:1px solid var(--v89-line);border-radius:0 0 12px 12px;font-size:11px;color:#8a8f98}
.pd__accept-marks{list-style:none;display:flex;gap:6px;margin:0;padding:0;order:3}
.pd__accept-marks li{display:grid;place-items:center;height:22px;padding:0 4px;border:1px solid #f0f3f7;border-radius:4px}
.pd__accept-marks img{height:16px;width:auto;display:block}
.pd__accept-secure{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a8f98}
.pd__accept-secure svg{color:var(--brand-teal)}
.pd__rpo{font-size:12px;color:#8a8f98;margin-top:14px}
/* Sections de fond : « About » pleine largeur, specs + conservation côte à côte en cartes, recherche pleine largeur. */
.pd__sections--v89{max-width:none;margin-top:72px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.pd__sections--v89 .pd__section{margin:0}
.pd__sections--v89 .pd__section h2{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;color:var(--ink)}
.pd__sections--v89 .pd__section--about{grid-column:1/-1;max-width:72ch}
.pd__sections--v89 .pd__section--about h2{font-size:32px;line-height:1.1;letter-spacing:-.02em;margin-bottom:14px}
.pd__sections--v89 .pd__section--about p{font-size:17px;line-height:1.65}
.pd__sections--v89 .pd__section--specs,.pd__sections--v89 .pd__section--reconst,.pd__sections--v89 .pd__section--research{
background:#fff;border:1px solid var(--v89-line);border-radius:16px;padding:30px}
.pd__sections--v89 .pd__section--specs h2,.pd__sections--v89 .pd__section--reconst h2,.pd__sections--v89 .pd__section--research h2{
font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:16px}
.pd__sections--v89 .pd__section--research{grid-column:1/-1;order:2}
.pd__sections--v89 .spec-table{width:100%}
.pd__sections--v89 .spec-table td{font-size:14px;padding:12px 0;border-bottom:1px solid #f0f3f7;background:none}
.pd__sections--v89 .spec-table td:first-child{color:var(--v89-muted);font-weight:400}
.pd__sections--v89 .spec-table td:last-child{text-align:right;font-weight:600;color:var(--ink)}
.pd__sections--v89 .spec-table tr:last-child td{border-bottom:0}
.pd__sections--v89 .pd__section--reconst p{font-size:14.5px;line-height:1.65}
.pd__sections--v89 .pd__list{gap:0}
.pd__sections--v89 .pd__list li{padding:14px 0 14px 26px;border-top:1px solid #f0f3f7;font-size:15px}
.pd__sections--v89 .pd__list li:first-child{border-top:0}
.pd__sections--v89 .pd__list li::before{top:20px}
.pd__related{margin-top:72px}
.pd__related .products-grid{grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){
.pd__grid{grid-template-columns:1fr;gap:16px}
.pd__media{min-height:420px;padding:32px 16px 72px}
.pd__name{font-size:34px}
.pd__sections--v89{grid-template-columns:1fr;margin-top:48px}
.pd__sections--v89 .pd__section--about h2{font-size:26px}
}
@media(max-width:680px){
.pd__info{border:0;padding:0}
.pd__mediapills{left:10px;bottom:10px}
.pd__mediapill{height:26px;font-size:9px;padding:0 9px}
.pd .pd__info .bundle-opts{gap:6px}
.pd .pd__info .bundle-opt{min-height:60px;padding:6px}
.pd .pd__info .bundle-opt__vials{display:none}
.pd__buy .product__price{text-align:left}
.pd__sections--v89 .pd__section--specs,.pd__sections--v89 .pd__section--reconst,.pd__sections--v89 .pd__section--research{padding:20px}
}
/* v70.89b · sélecteur de quantité de la fiche — retour utilisateur « trop de
cercles dans le petit rectangle arrondi » : le cadre devient un rectangle
à coins doux (comme les boutons de format), les − / + sont à PLAT (plus de
disques), séparés par des filets, l'input au centre. */
.pd .pd__qty{display:inline-flex;align-items:stretch;align-self:flex-start;height:44px;padding:0;
border:1px solid var(--v89-line);border-radius:10px;overflow:hidden;background:#fff;margin-bottom:20px}
.pd .pd__qty button{width:44px;height:auto;border:0;border-radius:0;background:none;box-shadow:none;
font-size:18px;line-height:1;color:var(--v89-gray);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.pd .pd__qty button:hover{background:var(--v89-tint);color:var(--ink);transform:none;box-shadow:none}
.pd .pd__qty input{width:52px;border:0;border-left:1px solid var(--v89-line);border-right:1px solid var(--v89-line);
border-radius:0;background:none;text-align:center;font-weight:600;font-size:15px;color:var(--ink)}
.pd .pd__qty input:focus{outline:none;box-shadow:none}
/* v70.89c · sélecteur de quantité — retour utilisateur : une PILULE bien
arrondie, la quantité au milieu, − et + aux extrémités, sans aucun
marquage (ni filets, ni fonds). */
.pd .pd__qty{border-radius:999px;height:46px;padding:0 4px;overflow:hidden}
.pd .pd__qty button{width:44px;background:none;border:0;border-radius:999px;font-size:20px;font-weight:400;color:var(--ink)}
.pd .pd__qty button:hover{background:none;color:var(--brand-navy)}
.pd .pd__qty input{width:56px;border:0;background:none;font-size:16px;font-weight:600}
/* v70.89c bis · la valeur et les − / + sur la même ligne médiane. */
.pd .pd__qty{align-items:center}
.pd .pd__qty button{height:100%;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.pd .pd__qty input{height:100%;padding:0;margin:0;line-height:1}
/* ============================================================
v70.90 · PLUS PRÈS D'AMINOCLUB, SANS LEUR IDENTITÉ (2026-09-03)
Demande utilisateur : « rapproche-toi du design de aminoclub sans voler
leur identité ». On reprend leurs STRUCTURES (hero scindé texte/panneau,
section garantie en damier, promos scindées, section remises quantité
centrée à mini-fioles, bento « tout ce qu'il vous faut », qualité avec
fiole sur carte + pastille + rangée de preuve, cartes « pourquoi », store à
titre + recherche + tri) — avec NOTRE identité : navy/teal, DM Sans +
Inter, nos fioles, nos textes, nos données (plans, paliers, contrôles).
Aucun nom, logo, couleur, offre ou formulation d'aminoclub. Blocs repris
du port du 2026-09-03 (commit 5a8b940), la carte produit à UN bouton
« View » et le sélecteur de quantité en pilule (v70.89b/c) sont conservés.
Le hero MOBILE reste intact (règles hero scopées ≥901px).
============================================================ */
/* --- 1 · (hero scindé RETIRÉ le 2026-09-03 : « j'aime bien le haut de la landing page de base » — le hero nappe v70.56/61/74 s'applique tel quel) --- */
/* --- 2 · Garantie (.guar) : panneau + fiole à GAUCHE, trois rangées à droite --- */
.guar{position:relative;overflow:hidden;background:#fff}
.guar::before{content:"";position:absolute;top:0;bottom:0;left:0;right:calc(50% + 8px);
background:
radial-gradient(110% 80% at 20% 100%, rgba(22,164,143,.12), transparent 60%),
radial-gradient(90% 70% at 80% 0%, rgba(42,154,194,.13), transparent 58%),
linear-gradient(192deg,#eaf2fb 0%,#e9f5f2 100%)}
.guar__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;min-height:532px}
.guar__visual{position:relative;min-height:532px}
.guar__visual img{position:absolute;left:4%;top:-70px;height:600px;width:auto;
transform:rotate(-9deg);transform-origin:50% 50%;
filter:drop-shadow(0 42px 64px rgba(18,42,84,.24))}
.guar__copy{padding:56px 0}
.guar__copy h2{font-size:32px;line-height:1.05;font-weight:700;letter-spacing:-.02em;margin:0}
.guar__copy > p{font-size:18px;line-height:1.55;color:var(--v89-gray);margin:14px 0 26px;max-width:52ch}
.guar__rows{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.guar__row{position:relative;display:flex;align-items:center;gap:16px;padding:20px 16px 20px 64px;
background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(18,42,84,.06),0 8px 24px rgba(18,42,84,.05)}
.guar__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:28px;border-radius:8px 0 0 8px;
background:var(--strip,#d9f2ec)}
.guar__row--teal{--strip:#d9f2ec}
.guar__row--blue{--strip:#dbe9f8}
.guar__row--navy{--strip:#e3e8f3}
.guar__ico{flex:0 0 auto;width:60px;height:60px;border-radius:999px;display:grid;place-items:center}
.guar__row--teal .guar__ico{background:#d9f2ec;color:#0d6b5d}
.guar__row--blue .guar__ico{background:#dbe9f8;color:#1f6f8e}
.guar__row--navy .guar__ico{background:#e3e8f3;color:var(--brand-navy)}
.guar__row h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0;color:var(--ink)}
.guar__row p{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--v89-gray)}
@media(max-width:900px){
.guar::before{display:none}
.guar__grid{grid-template-columns:1fr;min-height:0;gap:0}
.guar__visual{display:none}
.guar__copy{padding:40px 0 44px}
.guar__copy h2{font-size:26px}
.guar__copy > p{font-size:16px}
.guar__row{padding:16px 14px 16px 52px;gap:12px}
.guar__row::before{width:22px}
.guar__ico{width:48px;height:48px}
.guar__ico svg{width:20px;height:20px}
.guar__row h3{font-size:16px}
.guar__row p{font-size:14px}
}
/* --- 4 · Promo membership (.promo) : texte + coches / carte-maquette sur panneau --- */
.promo{position:relative;overflow:hidden;background:#fff}
.promo::before{content:"";position:absolute;top:0;bottom:0;right:0;left:50%;
background:
radial-gradient(90% 80% at 80% 100%, rgba(42,154,194,.12), transparent 60%),
linear-gradient(160deg,#e9f6f2 0%,#eaf2fb 100%)}
.promo__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
min-height:560px;padding:56px 0}
.promo__copy h2{font-size:36px;line-height:1.1;font-weight:700;letter-spacing:-.02em;margin:18px 0 16px}
.promo__copy > p{font-size:18px;line-height:1.55;color:var(--v89-gray);max-width:48ch;margin:0}
.checks{list-style:none;margin:24px 0 28px;padding:0;display:grid;gap:12px}
.checks li{position:relative;padding-left:32px;font-size:16px;line-height:1.45;color:var(--ink)}
.checks li small{color:var(--v89-muted);font-size:13px}
.checks li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:999px;
background:#d9f2ec;color:#0d6b5d;font-size:12px;font-weight:700;display:grid;place-items:center}
.promo__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.promo__note{font-size:12px;color:var(--v89-muted)}
.promo__visual{position:relative;display:flex;justify-content:flex-end;padding:20px 0}
.mscard{position:relative;width:min(100%,300px);background:#fff;border-radius:var(--v89-r);
box-shadow:var(--shadow-card);padding:22px}
.mscard__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.mscard__head strong{font-size:16px;font-weight:700}
.mscard__tag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
background:#f1f4f8;color:#4b5563;padding:4px 8px;border-radius:999px;white-space:nowrap}
.mscard__rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mscard__row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px;
border-radius:14px;background:#f5f8fb}
.mscard__row b{font-size:14px;font-weight:700;color:var(--ink)}
.mscard__row small{grid-column:1;font-size:11.5px;color:var(--v89-muted);line-height:1.35}
.mscard__price{grid-row:1/3;grid-column:2;align-self:center;font-size:12.5px;font-weight:700;
text-align:right;color:var(--ink);white-space:nowrap}
.mscard__row--founder{background:var(--brand-navy)}
.mscard__row--founder b,.mscard__row--founder .mscard__price{color:#fff}
.mscard__row--founder small{color:rgba(255,255,255,.72)}
.mscard__foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--v89-line);
font-size:11.5px;line-height:1.5;color:var(--v89-muted);text-align:center}
.mscard__foot b{color:var(--ink);font-weight:600}
.promo__badge{position:absolute;top:-4px;right:-14px;width:92px;height:92px;border-radius:999px;
background:#fff;box-shadow:var(--shadow-card);display:flex;flex-direction:column;align-items:center;
justify-content:center;text-align:center;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
color:var(--v89-muted);font-weight:700;line-height:1.1}
.promo__badge b{font-size:15px;letter-spacing:0;text-transform:none;color:var(--brand-teal);
font-family:'DM Sans','Inter',system-ui,sans-serif;margin-bottom:3px}
@media(max-width:900px){
.promo::before{display:none}
.promo__grid{grid-template-columns:1fr;min-height:0;gap:32px;padding:44px 0}
.promo__copy h2{font-size:28px}
.promo__copy > p{font-size:16px}
.promo__visual{justify-content:center;padding:24px 16px;border-radius:24px;
background:linear-gradient(160deg,#e9f6f2 0%,#eaf2fb 100%)}
.promo__badge{top:6px;right:6px;width:76px;height:76px}
}
/* --- 5 · Remises quantité (.bulk) : centré, pilules, carte exemple, mini-fioles éparpillées --- */
.bulk{position:relative;overflow:hidden;text-align:center;padding:80px 0 88px;
background:linear-gradient(160deg,#eef4fa 0%,#e9f6f2 100%)}
.bulk__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.bulk h2{font-size:36px;line-height:1.1;font-weight:700;letter-spacing:-.02em;margin:16px 0 14px;max-width:30ch}
.bulk__inner > p{font-size:18px;line-height:1.55;color:var(--v89-gray);max-width:54ch;margin:0}
.bulk__pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:24px 0 32px}
.bulk__pill{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
background:#fff;border:1px solid rgba(18,42,84,.12);color:var(--ink);line-height:1.2}
.bulk__pill.is-dark{background:var(--brand-navy);color:#fff;border-color:transparent}
.bulk__pill.is-soft{background:#d9f2ec;color:#0d6b5d;border-color:transparent}
.bulk__card{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;text-align:left;
width:min(100%,440px);background:#fff;border-radius:var(--v89-r);box-shadow:var(--shadow-card);
padding:20px 24px;margin-bottom:34px}
.bulk__vials{position:relative;width:88px;height:96px;display:flex;align-items:flex-end;justify-content:center;
background:#f0f4f9;border-radius:16px;padding-bottom:10px}
.bulk__vials img{height:62px;width:auto;margin:0 -11px;filter:drop-shadow(0 6px 8px rgba(18,42,84,.15))}
.bulk__qty{position:absolute;right:-8px;bottom:-8px;background:var(--brand-navy);color:#fff;
font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.bulk__card h3{font-size:16px;font-weight:600;margin:0;color:var(--ink)}
.bulk__sub{font-size:12px;color:var(--v89-muted);margin:2px 0 7px}
.bulk__applied{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
background:#d9f2ec;color:#0d6b5d;padding:3px 8px;border-radius:6px}
.bulk__price{text-align:right}
.bulk__price s{display:block;font-size:12px;color:#9ca3af}
.bulk__price strong{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;
font-family:'DM Sans','Inter',system-ui,sans-serif;color:var(--ink)}
.bulk__price small{display:block;font-size:11px;font-weight:600;color:#0d6b5d}
.bulk__note{margin:14px 0 0;font-size:12px;color:var(--v89-muted)}
.bulk__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.bulk__mini{position:absolute;width:64px;height:84px;border-radius:14px;display:grid;place-items:center;
background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);opacity:.75}
.bulk__mini img{width:30px;height:52px}
.bulk__mini--1{top:12%;left:4%;transform:rotate(-12deg)}
.bulk__mini--2{top:48%;left:9%;transform:rotate(8deg);width:52px;height:70px}
.bulk__mini--3{bottom:10%;left:19%;transform:rotate(-6deg)}
.bulk__mini--4{top:18%;left:27%;transform:rotate(14deg);width:44px;height:60px}
.bulk__mini--5{top:10%;right:6%;transform:rotate(10deg)}
.bulk__mini--6{top:46%;right:11%;transform:rotate(-9deg);width:52px;height:70px}
.bulk__mini--7{bottom:12%;right:20%;transform:rotate(7deg)}
.bulk__mini--8{top:22%;right:27%;transform:rotate(-15deg);width:44px;height:60px}
.bulk__mini--2 img,.bulk__mini--6 img{width:24px;height:42px}
.bulk__mini--4 img,.bulk__mini--8 img{width:20px;height:34px}
@media(max-width:900px){.bulk__mini--4,.bulk__mini--8,.bulk__mini--3,.bulk__mini--7{display:none}}
@media(max-width:680px){
.bulk{padding:48px 0 56px}
.bulk__decor{display:none}
.bulk h2{font-size:28px}
.bulk__inner > p{font-size:16px}
.bulk__card{grid-template-columns:auto 1fr;padding:16px 18px}
.bulk__price{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;text-align:left}
}
.volume-note .bulk__pills{margin:0;justify-content:center}
/* --- 6 · Bento « tout ce dont votre recherche a besoin » sur teal pâle --- */
.section--mint{background:var(--v89-mint)}
.section--mint .section__head{margin-bottom:40px;text-align:center}
.section--mint .section__head .eyebrow{display:none}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.bento__card{grid-column:span 6;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
min-height:140px;background:#fff;border-radius:var(--v89-r-lg);padding:24px 28px}
.bento__card:nth-child(1),.bento__card:nth-child(2){min-height:268px}
.bento__card:nth-child(6){grid-column:span 12;min-height:144px}
.bento__card:nth-child(6) .bento__txt{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center}
.bento__card:nth-child(6) .bento__txt h3{grid-column:1}
.bento__card:nth-child(6) .bento__txt p{grid-column:1}
.bento__card:nth-child(6) .bento__txt .btn{grid-column:2;grid-row:1/3;margin:0}
.bento__card h3{font-size:24px;font-weight:600;letter-spacing:-.015em;line-height:1.15;margin:0 0 10px;color:var(--ink)}
.bento__card p{font-size:16px;line-height:1.55;color:var(--ink);margin:0;max-width:52ch}
.bento__card .btn{margin-top:18px}
.bento__ico{width:110px;height:110px;color:#3a4358;display:grid;place-items:center;align-self:end;opacity:.9}
.bento__ico svg{width:100px;height:100px}
@media(max-width:900px){
.bento__card{grid-column:span 12}
.bento__card:nth-child(1),.bento__card:nth-child(2){min-height:0}
.bento__card:nth-child(6) .bento__txt{display:block}
.bento__card:nth-child(6) .bento__txt .btn{margin-top:18px}
}
@media(max-width:680px){
.bento{gap:12px}
.bento__card{padding:20px;border-radius:20px;grid-template-columns:1fr auto;gap:12px}
.bento__card h3{font-size:19px}
.bento__card p{font-size:14.5px}
.bento__ico{width:64px;height:64px}
.bento__ico svg{width:58px;height:58px}
}
/* --- 7 · Qualité v89 : blanc, chiffres, puces de méthodes, carte détail / fiole sur carte --- */
.quality.quality--v89{background:#fff;color:var(--ink);padding:72px 0}
.quality--v89 .quality__inner{grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.quality--v89 h2{font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.quality--v89 .quality__text > p{font-size:18px;line-height:1.55;color:#666;margin-top:14px}
.qstats{display:flex;margin:26px 0 22px;padding-bottom:22px;border-bottom:1px solid var(--v89-line)}
.qstats > div{display:flex;align-items:center;gap:10px;padding:0 22px}
.qstats > div:first-child{padding-left:0}
.qstats > div + div{border-left:1px solid var(--v89-line)}
.qstats strong{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
font-family:'DM Sans','Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums}
.qstats span{font-size:13px;line-height:1.25;color:var(--v89-muted);max-width:10ch}
.qchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.qchips span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
background:var(--v89-paper);color:#3a4358;font-size:14px;font-weight:600;line-height:1}
.qchips span:first-child{background:var(--brand-navy);color:#fff}
.quality--v89 .visual-card{background:#f8f9fb;border:1px solid var(--v89-line);border-radius:20px;
padding:22px;box-shadow:none;color:var(--ink)}
.quality--v89 .visual-card__head{color:var(--ink);font-weight:600}
.quality--v89 .visual-card__foot span{color:var(--v89-muted)}
.quality__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.quality__free{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#3a4358}
.quality__free svg{color:var(--brand-teal)}
.qvis{position:relative;min-height:640px;display:flex;align-items:center;justify-content:center;
padding:60px 40px 120px;border-radius:var(--v89-r-lg);box-shadow:var(--shadow-soft);overflow:hidden;
background:radial-gradient(120% 100% at 50% 100%, #e9f6f2 0%, #eef4fa 55%, #f5f8fb 100%)}
.qvis > img{height:440px;width:auto;transform:rotate(9deg);
filter:drop-shadow(0 36px 46px rgba(18,42,84,.22))}
.qvis__chip{position:absolute;top:28px;right:28px;display:flex;align-items:center;gap:12px;
background:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--shadow-card)}
.qvis__chip i{width:30px;height:30px;border-radius:999px;background:#d9f2ec;color:#0d6b5d;
display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px}
.qvis__chip b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.qvis__chip small{display:block;font-size:12px;color:var(--v89-muted)}
.qvis__proof{position:absolute;left:28px;right:28px;bottom:28px;display:flex;align-items:center;gap:14px;
background:#fff;border-radius:18px;padding:14px 18px;box-shadow:var(--shadow-card);
text-decoration:none;color:var(--ink);transition:transform .18s ease}
.qvis__proof:hover{transform:translateY(-2px)}
.qvis__proof-ico{width:40px;height:40px;border-radius:12px;background:#f0f4f9;display:grid;place-items:center;
color:var(--brand-navy);flex:0 0 auto}
.qvis__proof-txt b{display:block;font-size:15px;font-weight:700}
.qvis__proof-txt small{display:block;font-size:12px;color:var(--v89-muted)}
.qvis__proof > i{margin-left:auto;width:32px;height:32px;border-radius:999px;border:1px solid var(--v89-line);
display:grid;place-items:center;font-style:normal;color:var(--v89-muted);flex:0 0 auto}
@media(max-width:900px){
.quality--v89 .quality__inner{grid-template-columns:1fr;gap:36px}
.quality--v89 h2{font-size:30px}
.quality--v89 .quality__text > p{font-size:16px}
.qstats > div{padding:0 14px}
.qstats strong{font-size:22px}
.qvis{min-height:460px;padding:60px 20px 110px}
.qvis > img{height:300px}
.qvis__chip{top:16px;right:16px;padding:10px 12px}
.qvis__proof{left:16px;right:16px;bottom:16px}
}
/* --- 8 · « Pourquoi PurePeptide ? » : cartes bordées, tuile d'icône, chiffre --- */
.why{position:relative;overflow:hidden;background:#fff;padding:64px 0}
.why::before{content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(38% 50% at 12% 30%, rgba(42,154,194,.09), transparent 70%),
radial-gradient(38% 50% at 88% 70%, rgba(22,164,143,.09), transparent 70%)}
.why .container{position:relative}
.why .section__head{text-align:center;margin-bottom:40px}
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why__card{background:rgba(255,255,255,.85);border:1px solid rgba(227,227,227,.7);border-radius:var(--v89-r);
padding:20px;box-shadow:0 1px 2px rgba(18,42,84,.03)}
.why__ico{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;margin-bottom:34px}
.why__ico--navy{background:#e6ecf6;color:var(--brand-navy)}
.why__ico--teal{background:#d9f2ec;color:#0d6b5d}
.why__ico--blue{background:#dcecf6;color:#1f6f8e}
.why__card h3{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;margin:0 0 8px;color:var(--ink);
font-family:'DM Sans','Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums}
.why__card p{margin:0;font-size:15px;line-height:1.5;color:var(--v89-muted)}
@media(max-width:900px){.why__grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){
.why{padding:44px 0}
.why__grid{gap:12px}
.why__card{padding:16px;border-radius:18px}
.why__ico{width:44px;height:44px;margin-bottom:20px}
.why__ico svg{width:20px;height:20px}
.why__card h3{font-size:24px}
.why__card p{font-size:13.5px}
}
/* --- 12 · Store : en-tête (preuves + titre / recherche + tri), puces, cartes d'offres --- */
.page-hero--shop{padding:36px 0 18px}
.shophead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.shophead__title .page-hero__proof{margin-bottom:10px}
.shophead__title .eyebrow{display:none}
.page-hero--shop h1{font-size:36px;line-height:1.1;font-weight:700;letter-spacing:-.02em;margin:0}
.shophead__title > p{display:none}
.shophead__tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.catalog-search{margin:0}
.catalog-search .search-input{width:448px;max-width:100%;min-width:0;height:44px;border-radius:999px;
background:#f9fafb;border:1px solid #e5e7eb;padding:0 20px 0 46px;font-size:15px;color:#111827;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-size:18px 18px;background-position:18px 50%}
.catalog-search .search-input:focus{background-color:#fff;border-color:var(--brand-navy);box-shadow:0 0 0 3px rgba(18,58,120,.12)}
.catalog-sort{margin:0}
.catalog-sort select{height:44px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;
padding:0 40px 0 18px;font-size:14px;font-weight:500;color:var(--ink);appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-size:16px 16px;background-position:right 14px center;cursor:pointer}
.section--shop{padding:18px 0 64px}
.section.section--shop{background:#fff}
.catalog-toolbar{margin:0 0 20px;padding:0;border:0}
.chip,.chips .chip{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;
border:1px solid rgba(0,0,0,.2);background:#fff;color:var(--ink);font-size:14px;font-weight:600;line-height:1;
box-shadow:none;text-transform:none;letter-spacing:0}
.chip:hover,.chips .chip:hover{border-color:rgba(0,0,0,.45);color:var(--ink);background:#fff}
.chip.is-active,.chips .chip.is-active{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}
/* wp-compat.css pose `.chips a.chip{display:inline-block}` (0,2,1) APRÈS cette feuille : on re-spécifie en (0,3,1). */
.catalog-toolbar .chips a.chip{display:inline-flex;align-items:center}
.shop-promos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 28px}
.shop-promo{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center;
padding:20px 22px;border-radius:var(--v89-r);border:1px solid rgba(18,42,84,.06)}
.shop-promo--a{background:linear-gradient(120deg,#e9f6f2 0%,#eef4fa 100%)}
.shop-promo--b{background:linear-gradient(120deg,#eef0f8 0%,#f5f8fb 100%)}
.shop-promo--c{background:linear-gradient(120deg,#eaf2fb 0%,#f3f7fb 100%)}
.shop-promo__badge{width:60px;height:60px;border-radius:999px;background:#fff;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;font-weight:800;color:var(--brand-navy);
font-size:15px;line-height:1;font-family:'DM Sans','Inter',system-ui,sans-serif;
box-shadow:0 1px 3px rgba(18,42,84,.08)}
.shop-promo__badge small{display:block;font-size:8px;letter-spacing:.06em;text-transform:uppercase;
color:var(--v89-muted);margin-top:3px;font-family:'Inter',system-ui,sans-serif;font-weight:700}
.shop-promo h3{font-size:18px;font-weight:600;margin:0 0 4px;color:var(--ink)}
.shop-promo p{font-size:13.5px;line-height:1.45;color:#4b5563;margin:0}
.shop-promo .btn{grid-column:1/-1;justify-self:start;min-height:40px;padding:0 20px;font-size:14px}
@media(max-width:900px){
.shop-promos{grid-template-columns:1fr}
.catalog-search .search-input{width:100%}
.shophead__tools{width:100%}
.catalog-search{flex:1 1 auto}
}
@media(max-width:680px){
.page-hero--shop{padding:24px 0 10px}
.page-hero--shop h1{font-size:28px}
.shop-promos{margin-bottom:18px;gap:10px}
.shop-promo{padding:14px 16px;border-radius:18px}
.shop-promo__badge{width:48px;height:48px;font-size:13px}
.shop-promo h3{font-size:16px}
.shop-promo p{font-size:13px}
}
/* --- Ajustements après greffe --- */
.quality.quality--v89{background-image:none;border-top:0;border-bottom:0}
.section--mint{border-top:0;border-bottom:0}
.catalog-toolbar{flex-direction:row}
.chip,.chips .chip,.catalog-toolbar .chips a.chip{letter-spacing:0;text-transform:none;font-size:14px;height:40px}
.mscard__foot b{color:var(--ink);font-weight:600}
/* --- v70.90c · encore plus près (2026-09-03) : « enlève les fioles vers volume
pricing, tous les boutons cliquables, rapproche-toi encore plus » ---
· vignette à DEUX boutons « Details » + « Add » (ajout AJAX par variation,
recette du port 5a8b940) — bloc 3 du port repris ci-dessous ;
· section membership SOMBRE (navy) = leur section sombre de membre ;
· remises quantité SANS fioles (décor retiré, badge ×N à la place de la
pile), pilules = liens ; puces de méthodes, pilules « New », carte des
plans et cartes « pourquoi » = liens ;
· titres 600 / 36px, sections 64px, nav 16px (leurs mesures). */
/* --- 3 · Catalogue : grille à 4 (leur store), carte v89 --- */
#catalog{padding:64px 0 56px}
#catalog .center--mobile{display:none}
#catalog .products-grid,.section--shop .products-grid{grid-template-columns:repeat(4,1fr);gap:20px}
@media(min-width:681px){
#catalog .products-grid .product:nth-child(4){display:flex}
}
.pd__related .products-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){
#catalog .products-grid,.section--shop .products-grid,.pd__related .products-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
.product{position:relative;display:flex;flex-direction:column;background:#fff;
border:1px solid rgba(18,42,84,.08);border-radius:var(--v89-r);box-shadow:none;overflow:hidden;
transition:box-shadow .25s ease,transform .25s ease}
.product:hover{box-shadow:var(--shadow-card);transform:none;border-color:rgba(18,42,84,.08)}
/* Panneau visuel : ratio 330/410 du store, fond teinté décliné par position
(leur panneau change de couleur par produit ; nous déclinons la palette). */
.product__media{position:relative;height:auto;aspect-ratio:330/410;display:grid;place-items:center;
padding:26px 20px 56px;background:linear-gradient(180deg,#f2f6fb 0%,#e8eff8 100%);border-radius:0}
.products-grid .product:nth-child(4n+2) .product__media{background:linear-gradient(180deg,#eff8f6 0%,#e1f2ee 100%)}
.products-grid .product:nth-child(4n+3) .product__media{background:linear-gradient(180deg,#f1f2f9 0%,#e6e8f4 100%)}
.products-grid .product:nth-child(4n) .product__media{background:linear-gradient(180deg,#eef6fa 0%,#e1eef5 100%)}
.product__media::after{display:none}
/* (0,3,1) : bat l'épingle `img.product__photo{height:188px}` de wp-compat.css. */
.product .product__media img.product__photo{height:auto;max-height:78%;width:auto;max-width:60%;
object-fit:contain;filter:drop-shadow(0 16px 20px rgba(18,42,84,.18))}
.product__tag{top:14px;right:14px;left:auto;background:var(--brand-navy);color:#fff;
font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:none;padding:4px 9px;border-radius:999px}
.product__early{position:absolute;top:14px;left:14px;z-index:3}
.product__proof{position:relative;z-index:5;align-self:flex-start;margin:-42px 0 0 14px;
display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 9px;border-radius:999px;
background:rgba(255,255,255,.94);border:1px solid rgba(18,42,84,.08);
font-size:11px;font-weight:600;color:var(--ink);text-decoration:none;
box-shadow:0 2px 8px rgba(18,42,84,.08)}
.product__proof svg:first-child{color:var(--brand-teal)}
.product__proof u{text-decoration:underline;text-underline-offset:2px;color:var(--v89-muted);font-weight:400}
.product__proof svg:last-child{color:#9ca3af}
.product__proof:hover{border-color:rgba(18,42,84,.2)}
.product__body{padding:18px 18px 18px;gap:6px}
.product__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.product__name{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.product__size{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--v89-muted)}
.product__desc{font-size:12px;line-height:1.5;color:var(--v89-muted);flex:0 0 auto;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product .size-opts{gap:6px;margin:4px 0 0}
.product .size-opt{flex:0 0 auto;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;
border:1px solid #e0e0e0;color:var(--v89-gray);background:#fff;box-shadow:none}
.product .size-opt.is-active{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff;box-shadow:none}
.product .size-opt .save{color:inherit;opacity:.8}
.product__foot{flex-direction:column;align-items:stretch;gap:12px;margin-top:auto;padding-top:8px}
.product__price{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.product__price small{display:inline;font-size:12px;font-weight:500;color:var(--v89-muted);margin-left:4px}
.product__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.product__details{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;
height:44px;border-radius:999px;border:1px solid rgba(18,42,84,.2);background:#fff;
color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;
transition:background-color .18s ease,border-color .18s ease}
.product__details:hover{background:var(--v89-paper);border-color:rgba(18,42,84,.4)}
.product .add-btn{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:6px;
width:auto;height:44px;padding:0 16px;border-radius:999px;border:0;
background:var(--brand-navy);color:#fff;font-size:14px;font-weight:600;box-shadow:none;
-webkit-text-fill-color:#fff}
.product .add-btn:hover{background:#0d2c5c;transform:none;box-shadow:none}
.product .add-btn.ajax_add_to_cart::before{content:"+";font-size:17px;line-height:1;font-weight:500;margin-top:-1px}
.product .add-btn.loading{opacity:.6;pointer-events:none}
.product .add-btn.added::before{content:"✓"}
/* wc-add-to-cart.js insère un lien « View cart » après le bouton : le tiroir
s'ouvre déjà, le lien ferait doublon (et casserait la grille). */
.product .added_to_cart{display:none}
@media(max-width:680px){
#catalog{padding:44px 0 40px}
#catalog .center--mobile{display:flex;margin-top:22px}
.products-grid,#catalog .products-grid,.section--shop .products-grid,.pd__related .products-grid{grid-template-columns:1fr 1fr;gap:12px}
.product{border-radius:18px}
.product__media{padding:16px 12px 40px}
.product .product__media img.product__photo{max-height:74%;max-width:68%}
.product__tag{top:10px;right:10px;font-size:9px;padding:3px 7px}
.product__proof{margin:-34px 0 0 10px;height:24px;font-size:10px;padding:0 9px 0 7px;gap:4px}
.product__body{padding:12px 12px 12px}
.product__name{font-size:15px}
.product__desc{display:none}
.product__price{font-size:17px}
.product__actions{grid-template-columns:1fr;gap:8px}
.product__details{display:none}
.product .add-btn{height:40px;font-size:13px}
}
/* re-poses après greffe (le bloc v70.89 bis masquait l'étiquette et posait la pastille en absolu) */
.product__tag{display:inline-block;position:absolute;top:14px;right:14px;left:auto;z-index:3}
.product__proof{position:relative;top:auto;left:auto;z-index:5;align-self:flex-start;margin:-42px 0 0 14px;height:28px;
padding:0 12px 0 9px;letter-spacing:0;background:rgba(255,255,255,.94);border:1px solid rgba(18,42,84,.08);
box-shadow:0 2px 8px rgba(18,42,84,.08);font-size:11px;font-weight:600;color:var(--ink);text-decoration:none}
.product__kicker{display:none}
.product__body{padding:18px 18px 18px;gap:6px}
.product__pricerow{display:contents}
.product__media{aspect-ratio:330/410;padding:26px 20px 56px;border-bottom:0}
.products-grid .product:nth-child(4n+1) .product__media{background:linear-gradient(180deg,#f2f6fb 0%,#e8eff8 100%)}
@media(max-width:680px){.product__media{padding:16px 12px 40px}.product__proof{margin:-34px 0 0 10px;height:24px;font-size:10px;padding:0 9px 0 7px}}
/* titres, rythme, nav — leurs mesures (h2 36/40 600, sections 64, nav 16/500) */
.section{padding:64px 0}
#catalog{padding:64px 0 56px}
.section__head h2,.bulk h2,.promo__copy h2,.why .section__head h2,.faq--v89 .section__head h2,.cta--v89 h2{font-size:36px;line-height:1.1;font-weight:600;letter-spacing:-.015em}
.quality--v89 h2{font-size:40px;line-height:1.1;font-weight:600;letter-spacing:-.015em}
.section__head p{font-size:18px;line-height:1.55;color:#555}
.nav__links{font-size:16px;font-weight:500;gap:30px;color:#3a4358}
.nav__inner{height:70px}
/* membership : section sombre navy (leur section sombre), carte blanche à droite */
.promo--dark{background:#0a192f;color:#fff}
.promo--dark::before{left:50%;background:radial-gradient(90% 80% at 80% 100%, rgba(22,164,143,.16), transparent 60%),linear-gradient(160deg,#0f2447 0%,#0a192f 100%)}
.promo--dark .promo__copy h2{color:#fff}
.promo--dark .promo__copy > p{color:rgba(255,255,255,.78)}
.promo--dark .checks li{color:#fff}
.promo--dark .checks li small{color:rgba(255,255,255,.6)}
.promo--dark .checks li::before{background:rgba(22,164,143,.22);color:#5fd0bf}
.promo--dark .promo__note{color:rgba(255,255,255,.6)}
.promo--dark .pill{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)}
.promo--dark .promo__cta .btn--primary{background:#fff;color:var(--brand-navy);-webkit-text-fill-color:var(--brand-navy);box-shadow:none}
.promo--dark .promo__cta .btn--primary:hover{background:#eaf1fa;color:var(--brand-navy);-webkit-text-fill-color:var(--brand-navy)}
@media(max-width:900px){.promo--dark .promo__visual{background:rgba(255,255,255,.06)}}
a.mscard{display:block;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
a.mscard:hover{transform:translateY(-2px);box-shadow:0 24px 56px rgba(0,0,0,.28)}
a.pill{text-decoration:none;transition:filter .15s ease}
a.pill:hover{filter:brightness(.95)}
/* remises quantité : plus de fioles ; badge ×N ; pilules = liens */
.bulk__decor{display:none}
.bulk__qtybadge{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;background:var(--brand-navy);color:#fff;
font-size:22px;font-weight:800;letter-spacing:-.02em;font-family:'DM Sans','Inter',system-ui,sans-serif}
a.bulk__pill{text-decoration:none;transition:transform .15s ease,filter .15s ease}
a.bulk__pill:hover{transform:translateY(-1px);filter:brightness(.96)}
/* puces de méthodes et cartes « pourquoi » = liens */
.qchips a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#f5f7fa;color:#3a4358;
font-size:14px;font-weight:600;line-height:1;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.qchips a:first-child{background:var(--brand-navy);color:#fff}
.qchips a:hover{background:var(--brand-navy);color:#fff}
a.why__card{display:block;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.why__card:hover{transform:translateY(-2px);box-shadow:0 20px 48px rgba(18,42,84,.09);border-color:transparent}
/* v70.90c bis · la carte des plans est un LIEN dans une section sombre : elle héritait du blanc — encre re-posée. */
a.mscard,a.mscard .mscard__head strong{color:var(--ink)}
/* v70.90d · « arrondis tout » + retour des trois mini-fioles génériques dans
la carte des remises (le décor éparpillé reste retiré). Rayons généreux
partout, registre aminoclub (28 px bento, 24 px cartes, pilules). */
.bulk__vials{border-radius:20px}
.product{border-radius:24px}
.product__media{border-radius:24px 24px 0 0}
.product .size-opt{border-radius:999px}
.product__proof{border-radius:999px}
.statband__card{border-radius:28px}
.statband__ico{border-radius:16px}
.mscard{border-radius:28px}
.mscard__row{border-radius:18px}
.bulk__card{border-radius:28px}
.bulk__applied{border-radius:999px}
.bento__card{border-radius:32px}
.quality--v89 .visual-card{border-radius:24px}
.qvis{border-radius:32px}
.qvis__chip{border-radius:20px}
.qvis__proof{border-radius:22px}
.qvis__proof-ico{border-radius:14px}
.why__card{border-radius:28px}
.why__ico{border-radius:16px}
.faq--v89 .acc-q span{border-radius:999px}
.cta--v89 .btn{border-radius:999px}
.footer--v89 .fda-bar__panel{border-radius:18px}
.footer__accept li{border-radius:999px}
.shop-promo{border-radius:28px}
.shop-promo__badge{border-radius:999px}
.catalog-search .search-input,.catalog-sort select{border-radius:999px}
.pd__media{border-radius:28px}
.pd__info{border-radius:28px}
.pd .size-opt{border-radius:999px}
.pd .pd__info .bundle-opt{border-radius:16px}
.pd__perks{border-radius:18px 18px 0 0}
.pd__accept{border-radius:0 0 18px 18px}
.pd__sections--v89 .pd__section--specs,.pd__sections--v89 .pd__section--reconst,.pd__sections--v89 .pd__section--research{border-radius:24px}
.pd__early{border-radius:18px}
.pp-express{border-radius:18px}
.cookiebar{border-radius:24px}
.cartdw__panel{border-radius:28px 0 0 28px}
#pp-cartdw .woocommerce-mini-cart-item img{border-radius:14px}
.btn,.btn--lg,.btn--outline,.add-btn,.product__details{border-radius:999px}
@media(max-width:680px){
.product{border-radius:18px}
.product__media{border-radius:18px 18px 0 0}
.bento__card,.why__card,.bulk__card,.mscard{border-radius:22px}
}
/* v70.90e · bento « tout ce dont votre recherche a besoin » : les grandes
icônes au trait (100 px, à droite du texte) mangeaient la moitié de chaque
carte et restaient schématiques — retour utilisateur du 2026-09-03. Six
cartes ÉGALES sur trois colonnes, pastille d'icône 48 px teintée EN TÊTE
(registre .why__ico / .statband__ico), icônes duotone plus travaillées
(aplat à 14 % + trait 1.6, fiole avec niveau et bulles, flocon ramifié,
camion, document scellé, bouclier à cadenas, casque à micro), liens texte
à chevron à la place des boutons. Mobile : rangée pastille + texte. */
.bento{grid-template-columns:repeat(3,1fr);gap:16px}
.bento__card,.bento__card:nth-child(1),.bento__card:nth-child(2),.bento__card:nth-child(6){grid-column:auto;min-height:0;display:block;padding:26px 26px 28px;border-radius:24px}
.bento__card:nth-child(6) .bento__txt{display:block}
.bento__ico{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;align-self:auto;opacity:1;margin:0 0 20px;background:#e6ecf6;color:var(--brand-navy)}
.bento__ico svg{width:24px;height:24px;display:block}
.bento__ico--teal{background:#d9f2ec;color:#0d6b5d}
.bento__ico--blue{background:#dcecf6;color:#1f6f8e}
.bento__card h3{font-size:20px;margin:0 0 8px}
.bento__card p{font-size:15.5px;line-height:1.55;max-width:none}
.bento__link{display:inline-flex;align-items:center;gap:3px;margin-top:14px;font-size:15px;font-weight:600;line-height:1;color:var(--brand-navy);text-decoration:none}
.bento__link svg{width:15px;height:15px;display:block;transition:transform .15s ease}
.bento__link:hover{text-decoration:underline;text-underline-offset:3px}
.bento__link:hover svg{transform:translateX(2px)}
@media(max-width:900px){
.bento{grid-template-columns:repeat(2,1fr)}
.bento__card,.bento__card:nth-child(1),.bento__card:nth-child(2),.bento__card:nth-child(6){grid-column:auto;min-height:0}
}
@media(max-width:680px){
.bento{grid-template-columns:1fr;gap:12px}
.bento__card,.bento__card:nth-child(1),.bento__card:nth-child(2),.bento__card:nth-child(6){display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:18px 18px 20px;border-radius:22px}
.bento__ico{width:44px;height:44px;border-radius:14px;margin:0}
.bento__ico svg{width:22px;height:22px}
.bento__card h3{font-size:17.5px;margin-bottom:6px}
.bento__card p{font-size:14.5px}
.bento__link{margin-top:10px}
}
/* v70.90f · « rapproche-toi encore un peu plus d'aminoclub, avec mes
consignes » (2026-09-03). Mesuré dans Chrome sur aminoclub.com/us : leurs
sections vont presque bord à bord (gouttières 40 px), la qualité est en
ONGLETS avec une carte de détail et un encart « pourquoi », le bloc
« pourquoi » compte SIX cartes à pastille pastel + titre + description, la
FAQ a des chevrons ronds, la nav porte un badge « New », le rythme est plus
aéré (sections ~80 px). Consignes conservées : haut de page de base (hero +
marquee + statband restent à 1140), pas de fioles éparpillées, tout
cliquable, tout arrondi, icônes compactes, aucune couleur/copie à eux. */
/* largeur : sections de l'accueil, nav, footer et boutique à 1400 px */
.nav__inner,.footer--v89 .container,#catalog > .container,.promo--ms .container,.bulk .container,
.section--mint .container,.quality--v89 .container,.why .container,.cta--v89 .container,
.page-hero--shop .container,.section--shop .container{max-width:1400px;padding-left:32px;padding-right:32px}
/* rythme */
.section{padding:80px 0}
#catalog{padding:80px 0 64px}
.why{padding:80px 0}
.quality.quality--v89{padding:80px 0}
.section--mint .section__head,.why .section__head{margin-bottom:44px}
/* nav : badge « New » */
.nav__new{display:inline-block;vertical-align:middle;margin:-2px 0 0 6px;padding:3px 7px;border-radius:999px;
background:#d9f2ec;color:#0d6b5d;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
/* qualité : onglets + carte de détail */
.qtabs{margin-bottom:0}
.qchips{gap:8px;margin-bottom:18px}
.qchips button{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;
border-radius:999px;background:#f5f7fa;color:#3a4358;font:inherit;font-size:14px;font-weight:600;line-height:1;
transition:background-color .15s ease,color .15s ease}
.qchips button:hover{background:#e9edf3}
.qchips button.is-active{background:var(--brand-navy);color:#fff}
.qchips button:focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px}
.qpanel{background:#f8f9fb;border:1px solid var(--v89-line);border-radius:24px;padding:24px 26px;color:var(--ink)}
.qpanel[hidden]{display:none}
.qpanel__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.qpanel__head h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.qpanel__tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#d9f2ec;color:#0d6b5d;
font-size:12.5px;font-weight:600;line-height:1}
.qpanel__tag i{font-style:normal;font-size:11px}
.qpanel > p{margin:0;font-size:16px;line-height:1.55;color:#3a4358}
.qpanel__why{margin-top:16px;padding:14px 16px;background:#fff;border:1px solid var(--v89-line);border-left:3px solid var(--brand-teal);
border-radius:14px;font-size:14px;line-height:1.5;color:#3a4358}
.qpanel__why b{color:var(--ink);font-weight:700}
.qpanel__chart{margin-top:18px;padding-top:16px;border-top:1px solid var(--v89-line)}
.qpanel__chart .chroma{margin:0}
.qpanel__chart .chroma svg{width:100%;height:auto;display:block}
.qpanel__chart-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font-size:12.5px;color:var(--v89-muted)}
.qpanel__chart-foot strong{font-size:15px;color:var(--ink);font-family:'DM Sans','Inter',system-ui,sans-serif}
.qpanel__chart-foot strong small{font-size:11px;font-weight:600;color:var(--v89-muted);margin-left:4px}
.quality__cta{margin-top:24px}
/* pourquoi : six cartes, pastille pastel, titre + description */
.why__grid{grid-template-columns:repeat(3,1fr);gap:20px}
.why__card,a.why__card{display:block;padding:26px;border-radius:24px;background:#fff;border:1px solid #e6eaf0;box-shadow:none}
.why__card--navy{border-color:#dbe3f1}
.why__card--teal{border-color:#cfeae2}
.why__card--blue{border-color:#d3e6f1}
.why__card--amber{border-color:#f3e3c2}
.why__ico{width:52px;height:52px;border-radius:14px;margin-bottom:22px}
.why__ico--amber{background:#fdf1d8;color:#8a5a0b}
.why__card h3{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin:0 0 8px;color:var(--ink);
font-family:inherit;font-variant-numeric:normal}
.why__card p{font-size:15px;line-height:1.55;color:#4b5563}
a.why__card:hover{box-shadow:0 20px 48px rgba(18,42,84,.09)}
/* FAQ : chevrons ronds */
.faq--v89 .acc-q span{font-size:0;width:30px;height:30px;background:#eef1f5;color:#3a4358;display:grid;place-items:center;
transition:transform .25s ease,background-color .15s ease}
.faq--v89 .acc-q span svg{display:block}
.faq--v89 .acc-item.is-open .acc-q span,.faq--v89 .acc-item.open .acc-q span{transform:rotate(180deg)}
@media(max-width:900px){
.why__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
.nav__inner,.footer--v89 .container,#catalog > .container,.promo--ms .container,.bulk .container,
.section--mint .container,.quality--v89 .container,.why .container,.cta--v89 .container,
.page-hero--shop .container,.section--shop .container{padding-left:18px;padding-right:18px}
.section{padding:52px 0}
#catalog{padding:52px 0 44px}
.why{padding:52px 0}
.quality.quality--v89{padding:56px 0 52px}
.section--mint .section__head,.why .section__head{margin-bottom:26px}
.qchips{gap:6px}
.qchips button{padding:9px 12px;font-size:13px}
.qpanel{padding:18px;border-radius:20px}
.qpanel__head h3{font-size:18px}
.qpanel > p{font-size:15px}
.why__grid{grid-template-columns:1fr;gap:12px}
.why__card,a.why__card{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:start;padding:18px;border-radius:22px}
.why__ico{width:44px;height:44px;border-radius:12px;margin:0;grid-row:1/3}
.why__ico svg{width:20px;height:20px}
.why__card h3{font-size:16.5px;margin:0;grid-column:2}
.why__card p{font-size:14px;grid-column:2}
}
/* v70.91 · « ajoute pleins d'animation au site » (2026-09-03). Cascade de
révélation élargie (theme.js) avec un léger zoom sur les cartes, entrée du
hero en fondu monté, compteurs (JS), halo qui suit le pointeur sur les
cartes, tracé du chromatogramme, fioles qui flottent (qualité, fiche),
parallaxe des fioles du CTA, onglets qui glissent, survols vivants (cartes,
pastilles d'icônes, boutons, formats, liens du pied), rebond du bouton
« Add » et de la pastille panier. Tout ce qui bouge de lui-même passe par
la propriété `translate`/`scale`/`rotate` (indépendante de `transform`,
donc sans écraser les rotations existantes) et est coupé en
prefers-reduced-motion. Aussi : la pastille « View COA » de la vignette est
retirée (balisage), le panneau retrouve un pied plus court. */
.reveal{transition:opacity .55s cubic-bezier(.22,.72,0,1),transform .55s cubic-bezier(.22,.72,0,1),filter .4s ease}
.bento__card.reveal:not(.is-visible),.why__card.reveal:not(.is-visible),.product.reveal:not(.is-visible),
.mscard.reveal:not(.is-visible),.bulk__card.reveal:not(.is-visible),.shop-promo.reveal:not(.is-visible){transform:translateY(26px) scale(.96)}
.product .product__media{padding-bottom:16px}
@media(max-width:680px){.product__media{padding:16px 12px 14px}}
/* halo au pointeur (élément ajouté par theme.js) */
.spot{position:relative}
.spot__glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(22,164,143,.13),rgba(42,154,194,.06) 45%,transparent 70%)}
.spot:hover .spot__glow{opacity:1}
/* chromatogramme : la courbe se dessine */
.chroma__trace--anim{transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1) .2s}
.chroma__trace--anim.is-drawn{stroke-dashoffset:0!important}
/* parallaxe (--py posé par theme.js) */
.cta--v89 .cta__vial{translate:0 var(--py,0px);transition:translate .12s linear}
@media(prefers-reduced-motion:no-preference){
@keyframes ppHeroIn{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes ppFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ppFadeUp{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes ppFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes ppPop{0%{scale:1}40%{scale:1.14}100%{scale:1}}
@keyframes ppBadge{0%,100%{scale:1}50%{scale:1.08}}
@keyframes ppPanelIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
/* hero : entrée en cascade (opacité + translate, jamais transform : la
fiole et la pastille gardent leurs rotations et décalages) */
.hero--sky .hero__copy > *{animation:ppHeroIn .6s cubic-bezier(.22,.72,0,1) both}
.hero--sky .hero__copy > :nth-child(2){animation-delay:.07s}
.hero--sky .hero__copy > :nth-child(3){animation-delay:.14s}
.hero--sky .hero__copy > :nth-child(4){animation-delay:.21s}
.hero--sky .hero__copy > :nth-child(5){animation-delay:.28s}
.hero--sky .hero__copy > :nth-child(6){animation-delay:.35s}
.hero--sky .hero__media{animation:ppFadeIn .9s ease .2s both}
/* onglets qualité : le volet glisse à chaque bascule (l'animation repart
dès que l'élément quitte display:none) */
.qpanel{animation:ppPanelIn .35s cubic-bezier(.22,.72,0,1) both}
.qchips button{transition:background-color .2s ease,color .2s ease,scale .15s ease}
.qchips button:active{scale:.96}
/* fioles qui flottent (la rotation vit dans transform, le flottement dans translate) */
.qvis > img{animation:ppFloat 7s ease-in-out infinite}
.qvis__chip{animation:ppFloat 6s ease-in-out 1.2s infinite}
.promo__badge{animation:ppFloat 5.5s ease-in-out infinite}
.pd__stage{animation:ppFloat 7s ease-in-out infinite}
.nav__new{animation:ppBadge 2.6s ease-in-out infinite}
/* mini-fioles de la carte des remises : elles sautent en place à la révélation */
.bulk__vials img{transition:opacity .5s ease,translate .5s cubic-bezier(.34,1.56,.64,1),scale .5s cubic-bezier(.34,1.56,.64,1)}
.bulk__vials img:nth-child(2){transition-delay:.1s}
.bulk__vials img:nth-child(3){transition-delay:.2s}
.bulk__qty{transition:scale .45s cubic-bezier(.34,1.56,.64,1) .35s}
.bulk__card.reveal:not(.is-visible) .bulk__vials img{opacity:0;translate:0 14px;scale:.85}
.bulk__card.reveal:not(.is-visible) .bulk__qty{scale:0}
/* FAQ : la réponse monte en fondu */
.faq--v89 .acc-item.is-open .acc-a p{animation:ppFadeUp .4s ease both}
/* rebonds à l'ajout panier */
.add-btn.is-added{animation:ppPop .55s cubic-bezier(.34,1.56,.64,1)}
#cart-count.is-bump,.pp-cartcount.is-bump{animation:ppPop .55s cubic-bezier(.34,1.56,.64,1)}
/* survols : boutons, cartes, pastilles d'icônes, formats, liens */
.btn,.add-btn,.product__details,a.bulk__pill,.bento__link,.size-opt,.qvis__proof,.mscard__row,.footer__cols a,.statband__ico,
.bento__ico,.why__ico,.bento__ico svg,.why__ico svg,.statband__ico svg,.qvis__proof-ico svg{
transition:translate .25s ease,scale .25s cubic-bezier(.34,1.56,.64,1),rotate .3s cubic-bezier(.34,1.56,.64,1),
background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .25s ease}
.bento__card{transition:translate .3s ease,box-shadow .3s ease,opacity .55s cubic-bezier(.22,.72,0,1),transform .55s cubic-bezier(.22,.72,0,1),filter .4s ease}
.product{transition:translate .35s ease,box-shadow .35s ease,border-color .3s ease,opacity .55s cubic-bezier(.22,.72,0,1),transform .55s cubic-bezier(.22,.72,0,1),filter .4s ease}
.product .product__media img.product__photo{transition:translate .5s cubic-bezier(.22,.72,0,1),scale .5s cubic-bezier(.22,.72,0,1),rotate .5s cubic-bezier(.22,.72,0,1)}
.footer__cols a{display:inline-block}
.btn:active,.add-btn:active,.product__details:active,.size-opt:active{scale:.96}
@media(hover:hover){
.btn:hover,.add-btn:hover,.product__details:hover{translate:0 -2px;box-shadow:0 10px 24px rgba(18,58,120,.16)}
.btn--ghost:hover,.btn--ghost-light:hover,.btn--outline:hover,.product__details:hover{box-shadow:0 8px 20px rgba(18,42,84,.08)}
.size-opt:hover{translate:0 -1px}
.bento__card:hover{translate:0 -4px;box-shadow:0 18px 40px rgba(18,42,84,.08)}
a.why__card:hover{transform:translateY(-4px)}
.product:hover{translate:0 -4px;box-shadow:0 22px 48px rgba(18,42,84,.10)}
.product:hover .product__media img.product__photo{translate:0 -8px;scale:1.04;rotate:-3deg}
.bento__card:hover .bento__ico,a.why__card:hover .why__ico,.statband__item:hover .statband__ico{translate:0 -3px}
.bento__card:hover .bento__ico svg,a.why__card:hover .why__ico svg,.statband__item:hover .statband__ico svg,.qvis__proof:hover .qvis__proof-ico svg{scale:1.15;rotate:-6deg}
.mscard__row:hover{translate:4px 0}
.footer__cols a:hover{translate:3px 0}
.faq--v89 .acc-q:hover span{background:var(--brand-navy);color:#fff}
.qvis__proof:hover > i{background:var(--brand-navy);color:#fff;border-color:var(--brand-navy)}
}
@media(max-width:900px){
.pd__stage,.qvis > img{animation:none}
}
}
/* v70.92 · « règle tout ce que tu peux régler toi » (2026-09-03) — la matière.
Échelle de surfaces (page légèrement teintée, cartes blanches à filet, encarts
grisés), grain très léger sur les nappes (hero, remises, CTA, membership) et
éclat teal dans la section sombre, trois rayons seulement (16 / 24 / pilule)
et deux paddings de carte (24 / 28), chiffres tabulaires, paragraphes à 60ch,
en-têtes de section au même rythme, sélection / focus / soulignés /
ascenseur de marque, état vide du tiroir, barre d'achat collante (fiche,
mobile), tiroir en feuille du bas (mobile), icônes ramenées au même trait
(1.6 en 20-24 px, 2 en ≤ 14 px — le CSS stroke-width bat l'attribut). */
:root{--r-sm:16px;--r-md:24px;--r-pill:999px;--surface-0:#fbfcfe;--surface-1:#fff;--surface-2:#f4f6f9;--line:rgba(18,42,84,.08)}
@media(max-width:680px){:root{--r-md:20px}}
/* surfaces */
body{background:var(--surface-0)}
.quality.quality--v89,.why{background:var(--surface-0)}
.product,.bento__card,.qpanel,.shop-promo,.mscard,.bulk__card,.statband__card{border:1px solid var(--line)}
.qpanel,.qpanel__why{background:var(--surface-2)}
.qpanel__why{background:var(--surface-1)}
.visual-card,.cartdw__empty-ico,.qvis__proof-ico{background:var(--surface-2)}
/* grain (span.grain posé dans les gabarits) et éclat de la section sombre */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.promo--dark .grain{mix-blend-mode:soft-light;opacity:.5}
.promo--dark .glow{position:absolute;right:-8%;bottom:-45%;width:56%;aspect-ratio:1;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(22,164,143,.3),transparent);filter:blur(24px)}
/* Le grain et l'éclat passent SOUS le contenu sans toucher au z-index des
enfants : chaque section devient un contexte d'empilement (isolation:isolate,
sans effet de mise en page) et les deux voiles prennent z-index:-1 — ils se
peignent au-dessus du fond de la section, sous tout le reste. */
.hero.hero--sky,.bulk,.cta.cta--v89,.promo.promo--dark{isolation:isolate}
.grain,.promo--dark .glow{z-index:-1}
/* rayons : 16 / 24 / pilule */
.product,.bento__card,.qpanel,.shop-promo,.mscard,.bulk__card,.statband__card,.qvis,.pd__media,.pd__info,.cookiebar,
.pd__sections--v89 .pd__section--specs,.pd__sections--v89 .pd__section--reconst,.pd__sections--v89 .pd__section--research,
.quality--v89 .visual-card{border-radius:var(--r-md)}
.why__card,a.why__card{border-radius:var(--r-md)}
.product__media{border-radius:var(--r-md) var(--r-md) 0 0}
.cartdw__panel{border-radius:var(--r-md) 0 0 var(--r-md)}
.bento__ico,.why__ico,.statband__ico,.qvis__proof-ico,.mscard__row,.bulk__vials,.qvis__chip,.qvis__proof,.pd__early,.pp-express,
.pd .pd__info .bundle-opt,.qpanel__why,.cartdw__empty-ico,#pp-cartdw .woocommerce-mini-cart-item img,.footer--v89 .fda-bar__panel{border-radius:var(--r-sm)}
.pd__perks{border-radius:var(--r-sm) var(--r-sm) 0 0}
.pd__accept{border-radius:0 0 var(--r-sm) var(--r-sm)}
/* paddings de carte : 24 (cartes courantes) / 28 (grandes cartes) */
.bento__card{padding:24px}
.why__card,a.why__card{padding:24px}
.qpanel{padding:24px}
.shop-promo{padding:24px}
.mscard{padding:28px}
/* typographie : chiffres tabulaires, largeur de lecture, en-têtes au même rythme */
.product__price,.pd .product__price,.bulk__price,.qstats strong,.statband__txt strong,.mscard__row b,.woocommerce-Price-amount,
.bundle-opt,.cart-totals,.ci__price{font-variant-numeric:tabular-nums}
.product__price small{font-size:13px;font-weight:500;color:var(--v89-muted)}
.section__head p,.bento__card p,.why__card p,.qpanel > p,.promo__copy > p,.bulk__inner > p,.cta--v89 p,.quality--v89 .quality__text > p{max-width:60ch}
.section__head p{margin-left:auto;margin-right:auto}
.section__head--left p,.section__head--row p{margin-left:0}
.section__head{margin-bottom:44px}
.section__head .eyebrow{display:inline-block;margin-bottom:12px}
.section--mint .section__head .eyebrow{display:none}
.section__head h2{margin:0 0 12px}
.faq--v89 .section__head{margin-bottom:36px}
/* icônes : un seul trait */
.bento__ico svg,.why__ico svg,.statband__ico svg,.qvis__proof-ico svg,.cartdw__empty-ico svg,.footer--v89 .fda-bar__panel svg{stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.marquee__ico,.qchips svg,.bento__link svg,.qvis__proof > i svg,.faq--v89 .acc-q span svg{stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* micro-détails de marque */
::selection{background:rgba(22,164,143,.26);color:#0b1f3a}
:focus-visible{outline:2px solid var(--brand-teal);outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand-teal);outline-offset:1px;border-color:var(--brand-teal)}
a{text-underline-offset:3px;text-decoration-thickness:1px}
.cartdw__panel,.pp-content,.cartdw__body{scrollbar-width:thin;scrollbar-color:rgba(18,58,120,.28) transparent}
/* tiroir : état vide */
.cartdw__empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:44px 20px 32px}
.cartdw__empty-ico{width:72px;height:72px;display:grid;place-items:center;color:var(--brand-navy);margin-bottom:8px}
#pp-cartdw .cartdw__empty .woocommerce-mini-cart__empty-message{margin:0;padding:0;font-size:17px;font-weight:600;color:var(--ink)}
.cartdw__empty-sub{margin:0 0 10px;font-size:14px;color:var(--v89-muted)}
.cartdw__empty .btn{border-radius:var(--r-pill)}
/* fiche : barre d'achat collante (mobile) */
.pd__sticky{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:none;align-items:center;gap:12px;
padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);
box-shadow:0 -12px 32px rgba(18,42,84,.08);translate:0 110%;visibility:hidden;
transition:translate .3s cubic-bezier(.2,.8,.3,1),visibility 0s .3s}
.pd__sticky.is-shown{translate:0 0;visibility:visible;transition:translate .3s cubic-bezier(.2,.8,.3,1),visibility 0s}
.pd__sticky-txt{flex:1 1 auto;min-width:0}
.pd__sticky-txt b{display:block;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd__sticky-price{display:block;font-size:13px;color:var(--v89-muted);font-variant-numeric:tabular-nums}
.pd__sticky-btn{flex:0 0 auto;padding:12px 18px;font-size:15px}
@media(max-width:900px){
.pd__sticky{display:flex}
body.has-sticky-buy .cart-fab{translate:0 -72px}
}
/* tiroir : feuille du bas sur mobile */
@media(max-width:680px){
.cartdw__panel{top:auto;left:0;right:0;bottom:0;width:100%;max-height:88svh;border-radius:var(--r-md) var(--r-md) 0 0;
transform:translateY(102%);box-shadow:0 -24px 60px rgba(13,25,48,.18)}
.cartdw__panel::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:rgba(18,42,84,.14)}
.cartdw__head{padding-top:18px}
.bento__card,.why__card,a.why__card,.qpanel{padding:18px}
.mscard{padding:22px}
.section__head{margin-bottom:26px}
.faq--v89 .section__head{margin-bottom:22px}
}
/* v70.92b · padding du bento : les règles v70.90e ciblent aussi
.bento__card:nth-child(1/2/6) (0,2,0) et battaient le 24 px posé en (0,1,0)
sur ces trois cartes — re-posé à égalité de spécificité. */
.bento__card,.bento__card:nth-child(n){padding:24px}
@media(max-width:680px){.bento__card,.bento__card:nth-child(n){padding:18px}}
/* v70.93 · animations des CATÉGORIES (2026-09-03) : puces de la boutique qui
entrent en cascade et se soulèvent au survol, puce active qui « pose »,
étiquette de catégorie des vignettes qui glisse en place à la révélation et
se soulève avec la carte, en-tête des pages de catégorie / boutique en
cascade. Coupé en prefers-reduced-motion. */
@media(prefers-reduced-motion:no-preference){
@keyframes ppChipIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes ppChipPop{0%{scale:1}50%{scale:1.06}100%{scale:1}}
.chips .chip{animation:ppChipIn .45s cubic-bezier(.22,.72,0,1) both;animation-delay:calc(var(--i,0) * 45ms);
transition:translate .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.chips .chip:nth-child(1){--i:0}.chips .chip:nth-child(2){--i:1}.chips .chip:nth-child(3){--i:2}.chips .chip:nth-child(4){--i:3}
.chips .chip:nth-child(5){--i:4}.chips .chip:nth-child(6){--i:5}.chips .chip:nth-child(7){--i:6}.chips .chip:nth-child(8){--i:7}
.chips .chip.is-active{animation:ppChipIn .45s cubic-bezier(.22,.72,0,1) both,ppChipPop .5s cubic-bezier(.34,1.56,.64,1) .45s}
.chips .chip:active{scale:.96}
@media(hover:hover){
.chips .chip:hover{translate:0 -2px;box-shadow:0 8px 18px rgba(18,42,84,.10)}
.product:hover .product__tag{translate:0 -2px}
}
.product__tag{transition:opacity .45s ease .25s,translate .45s cubic-bezier(.22,.72,0,1) .25s}
.product.reveal:not(.is-visible) .product__tag{opacity:0;translate:12px 0}
.page-hero .container > *{animation:ppHeroIn .55s cubic-bezier(.22,.72,0,1) both}
.page-hero .container > :nth-child(2){animation-delay:.07s}
.page-hero .container > :nth-child(3){animation-delay:.14s}
.page-hero .container > :nth-child(4){animation-delay:.21s}
.page-hero__proof span{display:inline-block;animation:ppChipIn .45s cubic-bezier(.22,.72,0,1) both}
.page-hero__proof span:nth-child(3){animation-delay:.08s}.page-hero__proof span:nth-child(5){animation-delay:.16s}.page-hero__proof span:nth-child(7){animation-delay:.24s}
}
/* v70.93b · plus de grain sur le hero (« j'aime pas la texture granuleuse ») :
le span est retiré du gabarit et le hero redevient un empilement ordinaire —
le haut de page est exactement celui d'avant v70.92. Les autres nappes
(remises, CTA, membership) gardent leur grain. */
.hero.hero--sky{isolation:auto}
/* v70.94 · « la couleur qui suit la souris, au maximum » + survol des puces de
catégories (2026-09-03). Halo de carte étendu (produits, puces, ruban,
panneaux qualité, fiche, plans, offres, rangées FAQ, panneau FDA) et grande
LUEUR DE SECTION qui suit le pointeur derrière le contenu des nappes (hero,
remises, CTA, membership, bento, qualité, pourquoi, boutique). La lueur
vit en z-index:-1 dans une section isolée : au-dessus du fond, sous tout le
contenu. Survol souris uniquement, coupé en prefers-reduced-motion. */
@media(prefers-reduced-motion:no-preference) and (hover:hover){
.spot__glow{opacity:0;transition:opacity .35s ease}
.spot:hover > .spot__glow{opacity:1}
.product .spot__glow{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(22,164,143,.17),rgba(42,154,194,.08) 45%,transparent 70%)}
.statband__card .spot__glow,.qpanel .spot__glow,.pd__info .spot__glow{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(22,164,143,.14),rgba(42,154,194,.06) 45%,transparent 70%)}
.qvis .spot__glow{z-index:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),rgba(22,164,143,.10) 45%,transparent 72%)}
.qvis__chip,.qvis__proof{z-index:1}
.faq--v89 .acc-item .spot__glow{inset:2px -14px;border-radius:14px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(22,164,143,.12),transparent 70%)}
.footer--v89 .fda-bar__panel .spot__glow{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 70%)}
.promo--dark .mscard .spot__glow{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(22,164,143,.18),transparent 70%)}
/* puces de catégories : halo dans la pilule + survol net */
.chips .chip.spot{position:relative;overflow:hidden}
.chips .chip .spot__glow{background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),rgba(22,164,143,.32),transparent 70%)}
.chips .chip.is-active .spot__glow{background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.32),transparent 70%)}
.chips .chip{transition:translate .2s ease,scale .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.chips .chip:hover{translate:0 -2px;scale:1.04;box-shadow:0 10px 22px rgba(18,42,84,.14);border-color:rgba(18,58,120,.28);color:var(--brand-navy)}
.chips .chip.is-active:hover{color:#fff;border-color:var(--brand-navy)}
/* lueur de section */
.spot-section{position:relative;isolation:isolate}
.hero.hero--sky.spot-section{isolation:isolate}
.spot__light{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease;
background:radial-gradient(640px circle at var(--mx,50%) var(--my,50%),rgba(22,164,143,.13),rgba(42,154,194,.07) 40%,transparent 70%)}
.spot-section:hover > .spot__light{opacity:1}
.hero--sky .spot__light{background:radial-gradient(760px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.5),rgba(22,164,143,.09) 45%,transparent 72%)}
.promo--dark .spot__light{background:radial-gradient(640px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),rgba(22,164,143,.12) 40%,transparent 70%)}
.section--mint .spot__light{background:radial-gradient(640px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),rgba(22,164,143,.08) 45%,transparent 72%)}
}
/* v70.95 · MOBILE (2026-09-03) — « 99 % des clients sont sur mobile ».
Audit en 402 px : accueil de 9 882 px, boutique avec trois cartes d'offres
empilées avant le premier produit et un débordement de 4 px (puces à marges
−20 sur un conteneur à 18), liens du pied à la ligne (inline-block de
v70.92), badges des tuiles bundle tronqués, FAB panier par-dessus le contenu
alors que le sac est dans l'en-tête, menu mobile en petits liens.
Réponses : rythme resserré (sections 44, titres 28), FAB masqué, puces et
méthodes en rangées défilantes, cartes d'offres en carrousel, tuiles bundle
en RANGÉES, fiche plus courte, menu à grands liens, débordement horizontal
clippé, image du hero dédiée au mobile (600 px). Le hero lui-même ne bouge
pas (validé). */
.footer__cols a{display:block}
@media(max-width:900px){
html,body{overflow-x:clip}
/* menu mobile : grands liens, rangées tapables, compte et panier pleine largeur */
.nav.menu-open .nav__links a{font-size:19px;font-weight:600;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.nav.menu-open .nav__links a:last-child{border-bottom:0}
.nav.menu-open .nav__links .nav__new{font-size:10px;vertical-align:middle}
.nav.menu-open .nav__actions .nav-ico,.nav.menu-open .nav__actions .cart-btn.nav-ico{min-height:52px;font-size:16px;border-radius:var(--r-sm)}
}
@media(max-width:680px){
.cart-fab{display:none}
body.has-sticky-buy .cart-fab{translate:0 0}
/* rythme et échelle */
.section,#catalog,.why,.quality.quality--v89{padding:44px 0}
.bulk{padding:44px 0 48px}
.cta.cta--v89{padding:48px 0 52px}
.section__head{margin-bottom:22px}
.section--mint .section__head,.why .section__head{margin-bottom:20px}
.section__head h2,.bulk h2,.promo__copy h2,.why .section__head h2,.faq--v89 .section__head h2,.cta--v89 h2,.quality--v89 h2{font-size:28px;line-height:1.12;letter-spacing:-.02em}
.section__head p,.bulk__inner > p,.cta--v89 p,.quality--v89 .quality__text > p{font-size:16px;line-height:1.5}
.eyebrow{font-size:11px}
.btn--lg{min-height:50px}
/* catalogue : cartes lisibles au pouce */
.product__head h3,.product__name{font-size:16px}
.product__price{font-size:18px}
.product .add-btn{height:44px;font-size:14px}
.product .size-opt,.size-opt{min-height:34px}
/* membership : plus court */
.promo__grid{padding:36px 0 40px;gap:22px;min-height:0}
.checks li{font-size:15px}
.mscard{width:100%;padding:20px}
.mscard__row{padding:12px 14px}
.promo__badge{scale:.85}
/* qualité : méthodes en rangée défilante, chromatogramme masqué, fiole plus courte */
.qchips{flex-wrap:nowrap;overflow-x:auto;margin:0 -18px 16px;padding:0 18px 4px;scroll-snap-type:x proximity;scroll-padding-left:18px;scrollbar-width:none}
.qchips::-webkit-scrollbar{display:none}
.qchips button{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
.qpanel__chart{display:none}
.qvis{min-height:0;padding:56px 16px 104px}
.qvis > img{height:230px}
.qstats{margin:18px 0 16px;padding-bottom:16px}
/* boutique : en-tête compact, cartes d'offres en carrousel, puces sans débordement */
.page-hero--shop{padding:22px 0 8px}
.shophead{flex-direction:column;align-items:stretch;gap:12px}
.shophead__tools{display:flex;flex-direction:column;gap:8px;width:100%}
.catalog-search,.catalog-sort{width:100%;min-width:0}
.catalog-search .search-input{width:100%;min-width:0;height:46px}
.catalog-sort select{width:100%;height:44px}
.catalog-toolbar .chips{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px;scroll-padding-left:18px;width:auto}
.chips .chip{height:42px}
.shop-promos{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;margin:0 -18px;padding:4px 18px 10px;scroll-snap-type:x mandatory;scroll-padding-left:18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shop-promos::-webkit-scrollbar{display:none}
.shop-promo{flex:0 0 84%;min-width:0;scroll-snap-align:start}
/* fiche : média plus court, ligne « Verified » propre, tuiles bundle en rangées */
.pd__media{min-height:0;padding:20px 12px 64px}
.pd .pd__stage img.pd__photo{max-height:250px;height:auto;width:auto}
.pd__kicker,.pd .pd__info .eyebrow{font-size:10.5px;letter-spacing:.12em}
.pd__info div:has(> .badge--green){display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px;line-height:1.35}
.pd .pd__info .bundle-opts{grid-template-columns:1fr;gap:8px}
.pd .pd__info .bundle-opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;text-align:left}
.pd .pd__info .bundle-opt__vials{flex:0 0 auto}
.pd .pd__info .bundle-opt__text{display:flex;align-items:baseline;gap:8px;flex:1 1 auto;min-width:0}
.pd .pd__info .bundle-opt__flag{position:static;order:3;margin-left:auto;max-width:none;white-space:nowrap;font-size:9.5px;letter-spacing:.04em;transform:none}
/* FAQ : rangées tapables */
.faq--v89 .acc-q{min-height:52px}
/* pied */
.footer.footer--v89{padding-top:36px}
.footer--v89 .footer__cols{gap:22px 14px}
.footer--v89 .footer__cols a{padding:7px 0}
}
/* v70.95b · la rangée défilante des méthodes (qualité) gonflait sa colonne :
un item de grille garde min-width:auto, donc la largeur min-content d'un
enfant nowrap (les puces en flex:0 0 auto) s'impose à la colonne — panneau
et carte de la fiole débordaient à droite (masqué par overflow-x:clip, donc
invisible à la mesure du document). Même piège que les puces de la
boutique en v70.82 : min-width:0 sur les enfants de la grille. */
@media(max-width:900px){
.quality--v89 .quality__inner > *{min-width:0}
.quality__text,.quality__visual{max-width:100%}
}
/* v70.97 · boutique (2026-09-03) : (1) la puce de catégorie ACTIVE n'était
jamais remplie — `.catalog-toolbar .chips a.chip{background:#fff}` (0,3,1,
v70.89) battait `.chips .chip.is-active` (0,3,0) ; re-posée en (0,4,1).
(2) Sur mobile, les trois cartes d'offres du carrousel prenaient trop de
place : format compact (pastille 44 px, titre 14,5 px, texte sur deux lignes,
bouton 36 px), carte à 72 % pour laisser voir la suivante. */
.catalog-toolbar .chips a.chip.is-active,.chips a.chip.is-active,.chips .chip.is-active{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}
.catalog-toolbar .chips a.chip.is-active:hover,.chips a.chip.is-active:hover{background:var(--brand-navy);color:#fff}
@media(max-width:680px){
.shop-promos{gap:10px;padding:2px 18px 8px}
.shop-promo{flex:0 0 72%;padding:12px 14px;gap:6px 12px;border-radius:var(--r-sm);align-items:center}
.shop-promo__badge{width:44px;height:44px;font-size:12px;line-height:1}
.shop-promo__badge small{font-size:6.5px}
.shop-promo h3{font-size:14.5px;margin:0 0 2px}
.shop-promo p{font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-promo .btn{min-height:36px;padding:0 14px;font-size:13px;margin-top:2px}
}
/* v70.98 · mobile + membership (2026-09-04).
(1) Tuiles « Bundle & save » de la FICHE sur mobile : les mini-fioles
génériques (assets/vial-mini.png, arbitrage utilisateur du 2026-08-17)
étaient MASQUÉES ≤680px par v70.89 (display:none) alors que v70.95 avait
redessiné les tuiles en rangées — « ya pas les petites fioles ». Rangées
pleine largeur : pile de fioles à gauche (chevauchement −10px), libellé en
casse de phrase 14.5px, remise en pilule teal, badge « Most popular / Best
value » en fin de ligne, tuile active cerclée teal. Même spécificité (0,3,0)
que v70.89/v70.95, plus tard dans le fichier : gagne sous ≤680 aussi.
(2) La barre d'achat COLLANTE mobile (.pd__sticky, v70.92) est RETIRÉE du
gabarit single-product.php et de theme.js : elle glissait en bas d'écran à
chaque passage du bouton d'achat hors de l'écran (« le add to cart bouge
quand on scroll »). Ses règles restent, sans balisage, inertes.
(3) Page /membership/ : paiement Stripe INTÉGRÉ (Embedded Checkout —
Apple Pay, Google Pay, carte — sans quitter la page) : conteneur de montage,
barre « plan choisi · changer », état de chargement, erreur et avis de
retour (?sub=success). */
@media(max-width:900px){
.pd .pd__info .bundle-opts{grid-template-columns:1fr;gap:10px}
.pd .pd__info .bundle-opt{display:flex;align-items:center;gap:14px;min-height:66px;padding:10px 14px 10px 12px;text-align:left}
.pd .pd__info .bundle-opt__vials{display:flex;align-items:flex-end;justify-content:center;flex:0 0 auto;min-width:40px}
.pd .pd__info .bundle-opt__vials img{height:36px;width:auto;filter:drop-shadow(0 2px 3px rgba(18,42,84,.16))}
.pd .pd__info .bundle-opt__vials img+img{margin-left:-10px}
.pd .pd__info .bundle-opt__text{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 8px;flex:1 1 auto;min-width:0}
.pd .pd__info .bundle-opt__label{font-size:14.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.pd .pd__info .bundle-opt__save{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(22,164,143,.12);color:#0d6b5d}
.pd .pd__info .bundle-opt__flag{position:static;order:3;margin-left:auto;transform:none;max-width:none;white-space:nowrap;font-size:9.5px;letter-spacing:.04em;padding:4px 9px}
.pd .pd__info .bundle-opt.is-active{border-color:var(--brand-teal);box-shadow:inset 0 0 0 1.5px var(--brand-teal);background:rgba(22,164,143,.05)}
.pd .pd__info .bundle-opt.is-active .bundle-opt__label{color:var(--brand-navy)}
}
/* membership : paiement intégré */
.msjoin__form.is-busy .btn{opacity:.7;pointer-events:none}
.msjoin__embed{margin-top:18px}
.msjoin__embed-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:13.5px;color:var(--ink-soft)}
.msjoin__embed-bar strong{color:var(--ink);font-weight:600}
.msjoin__embed-back{appearance:none;border:0;background:none;padding:6px 0;font:inherit;font-size:13.5px;font-weight:600;color:var(--brand-navy);cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.msjoin__embed-back:hover{color:var(--brand-teal)}
.msjoin__embed-mount{position:relative;min-height:120px;border-radius:var(--r-sm,16px)}
.msjoin__embed-mount.is-loading{min-height:320px;background:var(--bg-soft)}
.msjoin__embed-mount.is-loading::before{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
border:3px solid rgba(18,58,120,.15);border-top-color:var(--brand-navy);animation:ppSpin .8s linear infinite}
@keyframes ppSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.msjoin__embed-mount.is-loading::before{animation:none}}
.msjoin__embed-err{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#fff4ec;border:1px solid #f3c9a6;color:#7a3a10;font-size:13.5px;line-height:1.5}
.msjoin__notice{margin:22px 0 0;padding:14px 18px;border-radius:14px;background:#eefaf6;border:1px solid rgba(22,164,143,.35);color:#0d6b5d;font-size:14.5px;line-height:1.55;display:flex;gap:10px;align-items:flex-start}
.msjoin__notice svg{flex:0 0 auto;margin-top:2px}
.msjoin__notice a{color:inherit;font-weight:600}