/* MyPeptide accueil v3 (motion) — feuille de style portée depuis mypeptide-home-motion/prototype/index.html (lignes 6-451).
   TOUT est sous .mp3 (ou body.mp-home-v3 pour le socle global) : aucun sélecteur nu (*, html, body, a, button, ::selection).
   Contrôlé par build/home-v3-review/static-check.py. Polices : servies depuis fonts/ (latin + latin étendu, copiées de Google Fonts le 14/10/2026,
   mêmes fichiers et unicode-range), préchargées dans le <head> ; plus d'aller-retour vers fonts.googleapis.com (tâche 6).
   Retirés (blocs repris du thème) : .offer*, .hdr*, .icon-btn, .burger*, .menu*, .langs, .ftr*, .pay.
   Retirés (blocs supprimés du plan, tâche 3) : .marquee, .mq*, .rcard*, .zscale*, .kpi*, .feed* (remplacé par .mph-feed de la v2).
   Thème sombre unique, choisi : c'est l'identité MyPeptide. */
@font-face{font-family: 'Bricolage Grotesque';font-style: normal;font-weight: 600;font-stretch: 100%;font-display: swap;src: url(fonts/bricolage-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Bricolage Grotesque';font-style: normal;font-weight: 600;font-stretch: 100%;font-display: swap;src: url(fonts/bricolage-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: 'Bricolage Grotesque';font-style: normal;font-weight: 800;font-stretch: 100%;font-display: swap;src: url(fonts/bricolage-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Bricolage Grotesque';font-style: normal;font-weight: 800;font-stretch: 100%;font-display: swap;src: url(fonts/bricolage-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: 'Geist Mono';font-style: normal;font-weight: 400;font-display: swap;src: url(fonts/geistmono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Geist Mono';font-style: normal;font-weight: 400;font-display: swap;src: url(fonts/geistmono-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: 'Geist Mono';font-style: normal;font-weight: 500;font-display: swap;src: url(fonts/geistmono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Geist Mono';font-style: normal;font-weight: 500;font-display: swap;src: url(fonts/geistmono-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: 'Geist Mono';font-style: normal;font-weight: 600;font-display: swap;src: url(fonts/geistmono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Geist Mono';font-style: normal;font-weight: 600;font-display: swap;src: url(fonts/geistmono-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: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src: url(fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src: url(fonts/inter-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: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src: url(fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src: url(fonts/inter-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: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src: url(fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src: url(fonts/inter-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;}

/* ===== Socle global (repris de la v2, mypeptide-home.php) =====
   Police système et fond sur le corps : sans lui le bandeau, la pastille de langue, #mp-homepage-content et le pied
   (hors .mp3) retombent sur Lora (kit Elementor). :where() = spécificité nulle ; l'intérieur de la v3 (.mp3) est exclu. */
body.mp-home-v3{background:#08090A;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
html:has(body.mp-home-v3),body.mp-home-v3{overflow-x:clip}
:where(body.mp-home-v3) :where(*:not(.mp3, .mp3 *)){box-sizing:border-box;margin:0;padding:0}
:where(body.mp-home-v3) :where(a:not(.mp3 a)){color:inherit;text-decoration:none}
:where(body.mp-home-v3) :where(img:not(.mp3 img)){max-width:100%;display:block}
:where(body.mp-home-v3) :where(h2:not(.mp3 h2)){font-size:clamp(32px,4.5vw,52px);font-weight:700;letter-spacing:-0.03em;line-height:1.05;margin-bottom:20px}
:where(body.mp-home-v3) :where(footer){border-top:1px solid #222;padding:60px 0 40px;color:#a8a8a8}

/* Bloc SEO #mp-homepage-content (mypeptide-seo-fixes.php, hors .mp3, styles inline : !important), ton de l'ancienne section .dossier. */
body.mp-home-v3 #mp-homepage-content{max-width:1180px!important;color:#A1A69C!important;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important}
body.mp-home-v3 #mp-homepage-content h2{font-family:"Bricolage Grotesque","Bricolage Fallback","Arial Narrow",Georgia,serif!important;font-weight:600!important;letter-spacing:-.01em!important;color:#eef0ea!important}
body.mp-home-v3 #mp-homepage-content strong,body.mp-home-v3 #mp-homepage-content dt{color:#EEF0EA!important}
body.mp-home-v3 #mp-homepage-content a{color:#C9F64A!important}

/* Lenis : classes posées par la bibliothèque sur <html> */
html:has(body.mp-home-v3).lenis,html:has(body.mp-home-v3).lenis body{height:auto}
html:has(body.mp-home-v3).lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
html:has(body.mp-home-v3).lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* Police de repli calée sur Bricolage Grotesque 800 (CLS) : size-adjust = largeur Bricolage / largeur Arial à la même taille
   (1611,7 / 1567,8 px sur le H1 à 76 px, Chrome 1440x900) ; ascent/descent = hhea 930 / -270 sur 1000, divisés par 1,028 ; line-gap 0. */
@font-face{font-family:"Bricolage Fallback";src:local("Arial");size-adjust:102.8%;ascent-override:90.5%;descent-override:26.3%;line-gap-override:0%}

.mp3{
  flex:1 1 100%;width:100%;min-width:0; /* le thème met .ast-container en flex (>=922px) : sans ça .mp3 s'élargit au contenu du catalogue */
  --bg:#08090A;
  --surface:#0F110F;
  --surface-2:#131613;
  --line:#1F231D;
  --line-2:#353A32;
  --line-lime:#2B3619;
  --grid:#121511;
  --fg:#F4F6F0;
  --fg-2:#EEF0EA;
  --soft:#C9CCC4;
  --muted:#A1A69C;
  --dim:#5E6359;
  --lime:#C9F64A;
  --mint:#BDF07D;
  --teal:#62C5C5;
  --ink:#08090A;
  --font-display:"Bricolage Grotesque","Bricolage Fallback","Arial Narrow",Georgia,serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,40px);
  --maxw:1240px;
  --r:22px;
  --r-btn:14px;
  --ease:cubic-bezier(.16,1,.3,1);
  --mp3-base:112px; /* hauteur du menu fixe ; le bandeau promo (--mp-alert-h, posé sur <html>) s'y ajoute */
  --mp3-top:calc(var(--mp3-base) + var(--mp-alert-h,0px));
  color-scheme:dark;
  background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--font-body);-webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body.mp-home-v3.admin-bar .mp3{--mp3-base:144px}

/* ===== Base ===== */
.mp3 *,.mp3 *::before,.mp3 *::after{box-sizing:border-box}
.mp3 img,.mp3 svg,.mp3 canvas{display:block;max-width:100%}
.mp3 img{height:auto}
.mp3 a{color:inherit;text-decoration:none}
.mp3 button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.mp3 p,.mp3 h1,.mp3 h2,.mp3 h3,.mp3 figure{margin:0}
.mp3 ul,.mp3 ol,.mp3 dl,.mp3 dd{margin:0;padding:0}
.mp3 ul,.mp3 ol{list-style:none}
.mp3 sup{font-size:.62em;line-height:0}
.mp3 :focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:8px}
.mp3 ::selection{background:var(--lime);color:var(--ink)}
/* Le CSS global du site (Astra + CSS additionnel) colore h1/h2/h3 directement : la couleur héritée ne s'applique pas. */
.mp3 h1,.mp3 h2,.mp3 h3{color:var(--fg)}
.mp3 .pill::before{content:none!important;display:none!important} /* une CSS globale hors vault ajoute un point vert à .pill::before */

.mp3 .wrap{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}
.mp3 .skip{position:absolute;left:var(--gutter);top:-80px;z-index:200;background:var(--lime);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:600}
.mp3 .skip:focus{top:12px}

/* ===== Type ===== */
.mp3 .label{display:inline-flex;align-items:center;gap:10px;font:500 12px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.mp3 .h1{font:800 clamp(38px,5.3vw,76px)/1.04 var(--font-display);font-stretch:100%;letter-spacing:-.018em;text-wrap:balance}
.mp3 .h2{font:800 clamp(34px,4.6vw,64px)/.98 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.mp3 .lead{font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--muted);max-width:54ch}
.mp3 .intro{font-size:17px;line-height:1.65;color:var(--muted);max-width:52ch}
.mp3 .lime{color:var(--lime)}
.mp3 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .03em .16em;margin:-.14em -.03em -.16em}
.mp3 .wi{display:inline-block}
/* Intro du hero en CSS seul (tâche 4) : le texte est dans le HTML et lisible au premier rendu, sans attendre le JavaScript.
   Le titre monte mot par mot (< 0,8 s en tout) ; GSAP n'anime au chargement que le flacon, le halo et l'ombre. fill-mode « backwards » :
   rien n'est figé après coup, donc le transform inline posé ensuite par GSAP (boutons magnétiques) reste libre. */
@keyframes mp3-rise{from{transform:translateY(112%)}to{transform:none}}
/* Départ à 0,01 et non 0 (invisible à l'œil) : Chrome ignore un élément à opacité 0 pour le LCP ; le paragraphe du hero
   comptait sinon 0,6 s après le premier affichage en mobile (tâche 6). Même animation. */
@keyframes mp3-fade-up{from{opacity:.01;transform:translateY(var(--mp3-dy,18px))}to{opacity:1;transform:none}}
.mp3 .h1 .wi{animation:mp3-rise .55s cubic-bezier(.16,1,.3,1) backwards}
.mp3 .h1 .w:nth-of-type(2) .wi{animation-delay:.04s}
.mp3 .h1 .w:nth-of-type(3) .wi{animation-delay:.08s}
.mp3 .h1 .lime .w:nth-of-type(1) .wi{animation-delay:.12s}
.mp3 .h1 .lime .w:nth-of-type(2) .wi{animation-delay:.2s}
.mp3 .hero .pill{--mp3-dy:16px;animation:mp3-fade-up .5s cubic-bezier(.16,1,.3,1) .04s backwards}
.mp3 .hero .lead{--mp3-dy:20px;animation:mp3-fade-up .55s cubic-bezier(.16,1,.3,1) .12s backwards}
.mp3 .hero__ctas .btn{animation:mp3-fade-up .55s cubic-bezier(.16,1,.3,1) .18s backwards}
.mp3 .hero__ctas .btn+.btn{animation-delay:.24s}
.mp3 .trust li{--mp3-dy:10px;animation:mp3-fade-up .45s cubic-bezier(.16,1,.3,1) .24s backwards}
.mp3 .trust li:nth-child(2){animation-delay:.27s}
.mp3 .trust li:nth-child(3){animation-delay:.3s}
.mp3 .trust li:nth-child(4){animation-delay:.33s}
.mp3 .stage__glow{animation:mp3-glow-in .62s cubic-bezier(.16,1,.3,1) backwards}
.mp3 .stage__vialanim{animation:mp3-vial-in .75s cubic-bezier(.16,1,.3,1) .05s backwards}
.mp3 .stage__shadow{animation:mp3-shadow-in .6s cubic-bezier(.16,1,.3,1) .15s backwards}
@keyframes mp3-glow-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes mp3-vial-in{from{opacity:.01;transform:translateY(90px) scale(.92)}to{opacity:1;transform:none}}
@keyframes mp3-shadow-in{from{opacity:0;transform:scaleX(.4)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mp3 .stage__glow,.mp3 .stage__vialanim,.mp3 .stage__shadow{animation:none}}
@media (prefers-reduced-motion:reduce){.mp3 .h1 .wi,.mp3 .hero .pill,.mp3 .hero .lead,.mp3 .hero__ctas .btn,.mp3 .trust li{animation:none}}

/* ===== Buttons & small parts ===== */
.mp3 .btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 24px;border-radius:var(--r-btn);font:600 16px/1 var(--font-body);white-space:nowrap;transition:color .35s,border-color .35s,background-color .35s}
.mp3 .btn svg{width:18px;height:18px;flex:none;transition:transform .45s var(--ease)}
.mp3 .btn:hover svg{transform:translateX(4px)}
.mp3 .btn--lime{background:var(--lime);color:var(--ink)}
.mp3 .btn--lime::before,.mp3 .btn--ink::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(102%);transition:transform .55s var(--ease)}
.mp3 .btn--lime::before{background:var(--fg)}
.mp3 .btn--lime:hover::before,.mp3 .btn--ink:hover::before{transform:none}
.mp3 .btn--ghost{border:1px solid var(--line-2);color:var(--fg-2)}
.mp3 .btn--ghost:hover{border-color:var(--lime);color:var(--lime)}
.mp3 .btn--ink{background:var(--ink);color:var(--lime)}
.mp3 .btn--ink::before{background:#1B2014}
.mp3 .btn--sm{height:44px;padding:0 18px;font-size:15px;border-radius:12px}
.mp3 .roll{position:relative;display:inline-block;overflow:hidden;height:1.25em;line-height:1.25}
.mp3 .roll>span{display:block;transition:transform .55s var(--ease)}
.mp3 .roll>span+span{position:absolute;left:0;top:100%}
.mp3 a:hover .roll>span,.mp3 button:hover .roll>span{transform:translateY(-100%)}
.mp3 .chip{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--font-mono);color:var(--lime);background:rgba(201,246,74,.06);border:1px solid var(--line-lime);padding:6px 9px;border-radius:9px;white-space:nowrap}
.mp3 .pulse{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none;animation:mp3-ping 2.2s infinite}
@keyframes mp3-ping{0%{box-shadow:0 0 0 0 rgba(201,246,74,.55)}70%{box-shadow:0 0 0 9px rgba(201,246,74,0)}100%{box-shadow:0 0 0 0 rgba(201,246,74,0)}}
.mp3 .arrow{width:18px;height:18px}

/* ===== Cursor & scroll bar ===== */
.mp3 .cursor{position:fixed;inset:0;z-index:300;pointer-events:none;display:none}
html:has(body.mp-home-v3).has-cursor .mp3 .cursor,.mp3.has-cursor .cursor{display:block}
.mp3 .cursor__dot,.mp3 .cursor__ring{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.mp3 .cursor__dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--lime)}
.mp3 .cursor__ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(201,246,74,.45);display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background-color .35s,border-color .35s}
.mp3 .cursor__label{font:600 13px/1 var(--font-body);color:var(--ink);opacity:0;transition:opacity .2s}
.mp3 .cursor.cur-hover .cursor__ring{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:rgba(201,246,74,.8)}
.mp3 .cursor.cur-label .cursor__ring{width:78px;height:78px;margin:-39px 0 0 -39px;background:var(--lime);border-color:var(--lime)}
.mp3 .cursor.cur-label .cursor__label{opacity:1}
.mp3 .cursor.cur-label .cursor__dot{opacity:0}
.mp3 .scrollbar{position:fixed;left:0;right:0;top:var(--mp3-top);height:2px;z-index:120;pointer-events:none}
.mp3 .scrollbar span{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}

/* ===== Hero ===== */
.mp3 .hero{position:relative;padding-block:calc(var(--mp3-top) + clamp(36px,6vw,84px)) clamp(64px,8vw,112px);overflow:hidden}
.mp3 .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 70% 40%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 70% 40%,#000 25%,transparent 78%)}
.mp3 .hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,56px);align-items:center}
.mp3 .hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px;min-width:0}
.mp3 .pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 11px;border:1px solid var(--line-lime);border-radius:999px;background:rgba(201,246,74,.04);font:500 13px/1.3 var(--font-mono);color:var(--lime)}
.mp3 .hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.mp3 .trust{display:grid;grid-template-columns:repeat(2,max-content);gap:10px 26px;font-size:14px;color:var(--soft)}
.mp3 .trust li{display:flex;align-items:center;gap:9px}
.mp3 .trust svg{width:16px;height:16px;color:var(--lime);flex:none}
.mp3 .hero__visual{position:relative;min-width:0}
.mp3 .hero__stage{position:relative;height:clamp(470px,44vw,630px);--vx:56%}
.mp3 .stage__glow{position:absolute;left:50%;top:46%;width:125%;aspect-ratio:1;margin:-62.5% 0 0 -62.5%;background:radial-gradient(closest-side,rgba(201,246,74,.17),rgba(98,197,197,.09) 46%,transparent 74%);pointer-events:none}
.mp3 .helix{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mp3 .helix--front{z-index:3}
.mp3 .stage__mouse{position:absolute;inset:0;z-index:2}
.mp3 .stage__vialwrap{position:absolute;left:var(--vx,50%);top:50%;height:84%;aspect-ratio:405/929;width:auto;translate:-50% -50%}
.mp3 .stage__vialanim{width:100%;height:100%}
.mp3 .stage__vial{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.7))}
.mp3 .stage__shadow{position:absolute;left:var(--vx,50%);bottom:4.5%;width:40%;height:26px;margin-left:-20%;background:radial-gradient(closest-side,rgba(201,246,74,.18),transparent);filter:blur(6px)}
@media (min-width:1024px) and (max-width:1279px){.mp3 .hero__stage{--vx:58%}.mp3 .stage__vialwrap{height:72%}}
@media (max-width:1023px){
  .mp3 .hero__in{grid-template-columns:minmax(0,1fr)}
  .mp3 .hero__stage{height:clamp(380px,86vw,540px);--vx:50%}
}
@media (max-width:520px){.mp3 .trust{grid-template-columns:1fr}.mp3 .hero__ctas{width:100%}.mp3 .hero__ctas .btn{flex:1 1 220px}}

/* ===== Sections ===== */
.mp3 .sec{padding-block:clamp(84px,11vw,150px)}
.mp3 .sec__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.mp3 .sec__head .label{margin-bottom:18px}
@media (max-width:860px){.mp3 .sec__head{grid-template-columns:minmax(0,1fr)}}

/* Spotlight + tilt cards */
.mp3 .spot{position:relative;isolation:isolate}
.mp3 .spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(201,246,74,.085),transparent 62%);opacity:0;transition:opacity .45s}
.mp3 .spot:hover::before{opacity:1}
.mp3 .tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:border-color .4s}
.mp3 .tilt.is-tilting{transition:transform .6s var(--ease),border-color .4s}

/* ===== Pillars ===== */
.mp3 .pillars__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mp3 .pcard{display:flex;flex-direction:column;gap:16px;padding:30px 28px 32px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);transition:border-color .4s}
.mp3 .pcard:hover{border-color:var(--line-2)}
.mp3 .pcard h3{font:600 25px/1.1 var(--font-display);letter-spacing:-.01em;margin-top:18px}
.mp3 .pcard p{color:var(--muted);font-size:15.5px;line-height:1.6}
.mp3 .ic-box{width:66px;height:66px;display:grid;place-items:center;border-radius:18px;background:rgba(201,246,74,.05);border:1px solid var(--line-lime)}
.mp3 .ic{width:46px;height:46px;fill:none;stroke:var(--lime);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.mp3 .ic .ic__soft{stroke:var(--line-2)}
.mp3 .ic__scan{fill:var(--lime);stroke:none;opacity:.5;animation:mp3-scan 3.4s var(--ease) infinite}
@keyframes mp3-scan{0%{transform:translateX(0);opacity:0}15%{opacity:.55}85%{opacity:.55}100%{transform:translateX(46px);opacity:0}}
.mp3 .ic__parcel{fill:var(--lime);stroke:none}
.mp3 .ic__route{stroke-dasharray:3 5;stroke:var(--line-2)}
@media (max-width:900px){.mp3 .pillars__grid{grid-template-columns:minmax(0,1fr)}}

/* ===== Proof (pinned chromatogram) ===== */
.mp3 .proof{border-top:1px solid var(--line);position:relative}
.mp3 .proof__pin{min-height:100vh;display:flex;align-items:center;padding-block:max(clamp(80px,11vh,120px),var(--mp3-top)) clamp(28px,5vh,56px)}
/* Épinglé, le pin commence déjà sous le menu fixe (start « top top+=--mp3-top ») : pas de 2ᵉ marge, hauteur = écran − menu (tâche 6 : le bas du tracé sortait de 157 px à 1440 × 900) */
@media (min-width:1024px) and (min-height:640px){.mp3.is-pinned .proof__pin{min-height:calc(100vh - var(--mp3-top));padding-block:clamp(20px,3vh,40px)}}
@media (min-width:1024px) and (max-height:960px){.mp3 .proof .scope__plot{height:19vh}}
.mp3 .proof__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:24px 40px;align-items:end}
.mp3 .proof__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.mp3 .proof__readout{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:10px;min-width:0}
.mp3 .proof__caption{font:500 11px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mp3 .giant{display:flex;align-items:flex-start;font-family:var(--font-display);font-size:clamp(72px,11vw,164px);line-height:.84;letter-spacing:-.045em;font-weight:800;font-stretch:100%;color:var(--lime);font-variant-numeric:tabular-nums;white-space:nowrap}
.mp3 .giant__u{font-size:.42em;margin:.12em 0 0 .08em;letter-spacing:0}
.mp3 .proof__sample{font:500 13px var(--font-mono);color:var(--soft)}
.mp3 .scope{margin-top:clamp(24px,4vh,40px);padding:14px 18px 10px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,#0D0F0D,#0A0B0A)}
.mp3 .scope__bar{display:flex;justify-content:space-between;gap:16px;font:500 11px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.mp3 .scope__bar b{color:var(--muted);font-weight:500}
.mp3 .scope__plot{position:relative;height:clamp(190px,30vh,320px);margin-top:12px}
.mp3 .scope__plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mp3 .scope__peak{position:absolute;left:0;top:0;transform:translate(14px,-2px);font:500 11px/1.35 var(--font-mono);color:var(--lime);white-space:nowrap;opacity:var(--chips,1);pointer-events:none}
.mp3 .scope__peak span{display:block;color:var(--muted)}
.mp3 .scope__ticks{position:relative;height:20px;margin-top:6px;font:400 10.5px/1 var(--font-mono);color:var(--dim)}
.mp3 .scope__ticks span{position:absolute;top:6px;transform:translateX(-50%);white-space:nowrap}
.mp3 .scope__ticks span:first-child{transform:none}
.mp3 .scope__ticks span:last-child{transform:translateX(-100%)}
.mp3 .scope__axes{display:flex;justify-content:space-between;gap:16px;font:400 10.5px/1.4 var(--font-mono);color:var(--dim);margin-top:4px}
.mp3 .readout{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mp3 .readout li{display:inline-flex;gap:8px;align-items:baseline;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font:500 12.5px/1.2 var(--font-mono);color:var(--fg-2);opacity:calc(.35 + .65 * var(--chips,1))}
.mp3 .readout li span{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:1023px){
  .mp3 .proof__pin{min-height:0;padding-block:clamp(84px,11vw,130px) 24px}
  .mp3 .proof__top{grid-template-columns:minmax(0,1fr)}
  .mp3 .proof__readout{align-items:flex-start;text-align:left}
}
@media (min-width:1024px) and (max-height:820px){.mp3 .proof .h2{font-size:clamp(34px,4vw,54px)}.mp3 .proof .intro{font-size:16px}.mp3 .scope__plot{height:24vh}.mp3 .giant{font-size:clamp(64px,9.5vw,140px)}}

.mp3 .proof__more{padding-block:clamp(40px,6vw,72px) clamp(84px,11vw,140px)}
.mp3 .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mp3 .stat{padding:24px 24px 22px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.mp3 .stat__num{display:block;font:800 clamp(30px,3.2vw,40px)/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.mp3 .stat__num--lime{color:var(--lime)}
.mp3 .stat p{margin-top:10px;font-size:14.5px;color:var(--muted)}
.mp3 .reports{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.mp3 .rep{display:flex;flex-direction:column;padding:24px 24px 22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.mp3 .rep:hover{border-color:var(--line-2)}
.mp3 .rep__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mp3 .rep__name{font:600 21px/1.15 var(--font-display);letter-spacing:-.01em}
.mp3 .rep__lot{margin-top:6px;font:400 11.5px/1.3 var(--font-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.mp3 .rep__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:22px}
.mp3 .rep__val{font:800 clamp(36px,3.6vw,44px)/1 var(--font-display);letter-spacing:-.03em;color:var(--lime);font-variant-numeric:tabular-nums;white-space:nowrap}
.mp3 .rep__val small{font-size:.5em;margin-left:.06em}
.mp3 .rep__mg{font-size:13px;color:var(--muted);white-space:nowrap}
.mp3 .bar{height:5px;margin-top:14px;border-radius:5px;background:var(--line);overflow:hidden}
.mp3 .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--teal),var(--lime));transform-origin:0 50%;transform:scaleX(var(--v,1))}
.mp3 .rep__more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:600;font-size:14.5px}
.mp3 .rep__more svg{width:16px;height:16px;color:var(--lime);transition:transform .45s var(--ease)}
.mp3 .rep:hover .rep__more svg{transform:translateX(4px)}
.mp3 .reports__note{margin-top:14px;font:400 11.5px/1.4 var(--font-mono);color:var(--dim)}
@media (max-width:1023px){.mp3 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.mp3 .reports{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mp3 .reports{grid-template-columns:minmax(0,1fr)}}

.mp3 .steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px;padding:28px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);--p:1}
.mp3 .steps::before,.mp3 .steps::after{content:"";position:absolute;left:48px;top:48px;height:1px;width:calc((100% - 56px - 48px) * 2 / 3 + 48px);transform-origin:0 50%}
.mp3 .steps::before{background:var(--line-2)}
.mp3 .steps::after{background:var(--lime);transform:scaleX(var(--p))}
.mp3 .step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.mp3 .step__n{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted);font:600 16px/1 var(--font-display);transition:background-color .5s,color .5s,border-color .5s,box-shadow .5s}
.mp3 .step.is-on .step__n{background:var(--lime);border-color:var(--lime);color:var(--ink);box-shadow:0 0 0 6px rgba(201,246,74,.1)}
.mp3 .step h3{font:600 18px/1.25 var(--font-body);color:var(--fg)}
.mp3 .step p{margin-top:4px;font-size:14.5px;color:var(--muted)}
@media (max-width:860px){.mp3 .steps{grid-template-columns:minmax(0,1fr);gap:26px}.mp3 .step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px}.mp3 .steps::before,.mp3 .steps::after{left:48px;top:48px;width:1px;height:calc(100% - 96px);transform-origin:50% 0}.mp3 .steps::after{transform:scaleY(var(--p))}}

/* ===== Catalogue (horizontal) ===== */
.mp3 .catalog{border-top:1px solid var(--line);position:relative}
.mp3 .catalog__pin{position:relative;overflow:hidden;padding-block:clamp(84px,11vw,130px) clamp(56px,7vw,90px)}
.mp3.is-pinned .track{display:flex;align-items:stretch;gap:20px;width:max-content;padding-inline:max(var(--gutter),(100% - var(--maxw)) / 2)}
.mp3 .cat-intro{width:clamp(300px,30vw,430px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding-right:20px}
.mp3 .cat-intro .label{margin-bottom:18px}
.mp3 .cat-hint{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mp3 .hint-touch{display:none}
@media (max-width:1023px){.mp3 .hint-desk{display:none}.mp3 .hint-touch{display:inline}}
.mp3 .cat-hint svg{width:16px;height:16px;color:var(--lime);animation:mp3-nudge 1.8s var(--ease) infinite}
@keyframes mp3-nudge{0%,100%{transform:none}50%{transform:translateX(6px)}}
.mp3 .cat-offer{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid var(--line-lime);background:rgba(201,246,74,.04);font-size:14px;color:var(--soft);max-width:360px}
.mp3 .cat-offer b{color:var(--lime)}
.mp3 .track__row{display:flex;gap:20px}
.mp3 .prod{position:relative;display:flex;flex-direction:column;width:clamp(290px,25vw,360px);border-radius:var(--r);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.mp3 .prod:hover{border-color:var(--line-2)}
.mp3 .prod__media{position:relative;height:clamp(300px,40vh,400px);overflow:hidden;background:radial-gradient(70% 60% at 50% 58%,rgba(var(--glow),.26),rgba(var(--glow),.05) 55%,transparent 75%),linear-gradient(180deg,#0C0E0C,#0F110F)}
.mp3 .prod__media::after{content:"";position:absolute;inset:auto 0 0;height:26%;background:linear-gradient(180deg,transparent,var(--surface))}
.mp3 .prod__vial{position:absolute;inset:0}
.mp3 .prod__media img{position:absolute;left:0;right:0;margin-inline:auto;top:7%;height:88%;width:auto;max-width:none;transition:scale .8s var(--ease)}
.mp3 .prod:hover .prod__media img{scale:1.05}
.mp3 .coa{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:var(--lime);color:var(--ink);font:600 12px/1 var(--font-mono)}
.mp3 .coa svg{width:13px;height:13px}
.mp3 .deal{position:absolute;right:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line-lime);background:rgba(8,9,10,.6);color:var(--lime);font:600 12px/1 var(--font-mono)}
.mp3 .prod__body{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:6px 22px 22px;margin-top:-8px}
.mp3 .prod__name{font:600 24px/1.15 var(--font-display);letter-spacing:-.01em}
.mp3 .prod__meta{font:400 12px/1.4 var(--font-mono);color:var(--muted)}
.mp3 .prod__foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.mp3 .prod__price{font:800 26px/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mp3 .prod__go{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--lime);transition:background-color .4s,color .4s,border-color .4s}
.mp3 .prod__go svg{width:18px;height:18px;transition:transform .45s var(--ease)}
.mp3 .prod:hover .prod__go{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.mp3 .prod:hover .prod__go svg{transform:rotate(-45deg)}
.mp3 .prod--all{justify-content:space-between;padding:28px;background:var(--lime);color:var(--ink);border-color:var(--lime)}
.mp3 .prod--all:hover{border-color:var(--lime)}
.mp3 .prod--all .label{color:var(--ink)}
.mp3 .prod--all strong{font:800 clamp(40px,3.6vw,52px)/.98 var(--font-display);letter-spacing:-.03em}
.mp3 .prod--all p{font-size:15px;max-width:26ch;color:#22281A}
.mp3 .all-arrow{width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--lime);transition:transform .6s var(--ease)}
.mp3 .all-arrow svg{width:28px;height:28px}
.mp3 .prod--all:hover .all-arrow{transform:rotate(-45deg) scale(1.06)}
.mp3 .catalog__progress{width:min(var(--maxw),100% - 2*var(--gutter));margin:36px auto 0;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.mp3 .catalog__progress span{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
/* Piste horizontale épinglée : seulement quand le JS crée vraiment le pin (classe is-pinned sur .mp3, >= 1024x640, mouvement autorisé).
   Sinon (reduced-motion, écran bas, sans JS) : rangée à faire glisser, comme sur mobile. */
@media (min-width:1024px){.mp3.is-pinned .catalog__pin{height:calc(100vh - var(--mp3-top));display:flex;flex-direction:column;justify-content:center;padding-block:24px 32px}}
@media (min-width:1024px) and (max-height:760px){.mp3.is-pinned .prod__media{height:34vh}.mp3.is-pinned .prod__name{font-size:21px}}
/* Rangée à faire glisser : mobile, et partout où le pin n'existe pas */
.mp3:not(.is-pinned) .track{display:block;width:auto;padding-inline:0}
.mp3:not(.is-pinned) .cat-intro{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto;padding-right:0;margin-bottom:32px;flex-direction:row;flex-wrap:wrap;align-items:flex-end}
.mp3:not(.is-pinned) .track__row{overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);padding-bottom:6px;scrollbar-width:none}
.mp3:not(.is-pinned) .track__row::-webkit-scrollbar{display:none}
.mp3:not(.is-pinned) .prod{flex:none;width:min(78vw,340px);scroll-snap-align:start}
.mp3:not(.is-pinned) .catalog__progress{display:none}

/* ===== FAQ ===== */
.mp3 .faq{border-top:1px solid var(--line)}
.mp3 .faq__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px 72px;align-items:start}
.mp3 .faq__head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;position:sticky;top:calc(var(--mp3-top) + 18px)}
.mp3 .faq__list{border-top:1px solid var(--line)}
.mp3 .faq__item{border-bottom:1px solid var(--line)}
.mp3 .faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;text-align:left;font:600 clamp(18px,1.6vw,21px)/1.3 var(--font-display);letter-spacing:-.005em;transition:color .3s}
.mp3 .faq__q:hover{color:var(--lime)}
.mp3 .faq__ico{position:relative;width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line-2);transition:transform .6s var(--ease),background-color .4s,border-color .4s}
.mp3 .faq__ico::before,.mp3 .faq__ico::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--lime)}
.mp3 .faq__ico::after{transform:rotate(90deg)}
.mp3 .faq__item.is-open .faq__ico{transform:rotate(135deg);background:var(--lime);border-color:var(--lime)}
.mp3 .faq__item.is-open .faq__ico::before,.mp3 .faq__item.is-open .faq__ico::after{background:var(--ink)}
.mp3 .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.mp3 .faq__item.is-open .faq__a{grid-template-rows:1fr}
.mp3 .faq__a>div{overflow:hidden}
.mp3.no-js .faq__a{grid-template-rows:1fr} /* sans JavaScript, toutes les réponses restent lisibles (le JS retire .no-js et referme les items 2 à 4) */
.mp3 .faq__a p{padding:0 48px 26px 0;color:var(--muted);line-height:1.65}
@media (max-width:900px){.mp3 .faq__grid{grid-template-columns:minmax(0,1fr)}.mp3 .faq__head{position:static}}

/* ===== CTA ===== */
.mp3 .cta{padding-block:0 clamp(84px,11vw,140px)}
.mp3 .cta__panel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;min-height:340px;padding:clamp(32px,5vw,64px);border-radius:28px;background:var(--lime);color:var(--ink);transform-origin:50% 100%}
.mp3 .cta__panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(8,9,10,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(8,9,10,.06) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.mp3 .cta__copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:640px}
.mp3 .cta__title{font:800 clamp(38px,5.2vw,72px)/.95 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.mp3 .cta__panel .cta__title{color:var(--ink)!important}
.mp3 .cta__copy p{font-size:18px;line-height:1.55;color:#22281A;max-width:46ch}
.mp3 .cta__vial{position:relative;z-index:1;align-self:end;height:clamp(260px,30vw,400px);width:auto;margin:-40px 0 calc(-1 * clamp(32px,5vw,64px) - 60px);filter:drop-shadow(0 30px 40px rgba(8,9,10,.35))}
@media (max-width:760px){.mp3 .cta__panel{grid-template-columns:minmax(0,1fr)}.mp3 .cta__vial{display:none}}

/* ===== Dossier (copie SEO) ===== */
.mp3 .dossier{border-top:1px solid var(--line);padding-block:clamp(72px,9vw,120px)}
.mp3 .dossier__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:28px}
.mp3 .dossier article{display:flex;flex-direction:column;gap:14px;min-width:0}
.mp3 .dossier h2{font:600 22px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.mp3 .dossier p,.mp3 .dossier dd{font-size:15px;line-height:1.7;color:var(--muted)}
.mp3 .dossier strong{color:var(--fg-2);font-weight:600}
.mp3 .dossier a{color:var(--lime);border-bottom:1px solid rgba(201,246,74,.35);transition:border-color .3s}
.mp3 .dossier a:hover{border-color:var(--lime)}
.mp3 .dossier dl{display:flex;flex-direction:column;gap:18px}
.mp3 .dossier dt{font-weight:600;color:var(--fg-2);font-size:15.5px;line-height:1.45}
.mp3 .dossier dd{margin-top:6px}
@media (max-width:1023px){.mp3 .dossier__grid{grid-template-columns:minmax(0,1fr)}}

/* ===== Pied : lettrage et retour en haut (le reste du pied est celui du thème) ===== */
.mp3 .wordmark{margin-top:clamp(40px,6vw,72px);padding-bottom:.06em;font:800 15vw/.9 var(--font-display);letter-spacing:-.05em;white-space:nowrap;text-align:center;color:transparent;background:linear-gradient(90deg,var(--mint),var(--teal)) 0 0/var(--fill,0%) 100% no-repeat,linear-gradient(var(--surface-2),var(--surface-2));-webkit-background-clip:text;background-clip:text;user-select:none}
.mp3 .totop{display:inline-flex;align-items:center;gap:8px;color:var(--soft);font-size:13.5px;font-weight:500;transition:color .3s}
.mp3 .totop:hover{color:var(--lime)}
.mp3 .totop svg{width:16px;height:16px;transform:rotate(-90deg)}

/* ===== Flux labo (repris tel quel de la v2, mypeptide-home.php : .mph-feed*) =====
   Rendu dans <div class="mpx mph"> en tête de .mp3. Variables v2 remplacées par leurs valeurs (--mono, --txt #eef0ea, --mut2 #8b9186).
   Le script (tâche 4) décode le lot lettre par lettre, dessine .line, met en pause hors écran (.mph-off) et démarre 1,5 s après load. */
.mp3 .mph-top{padding-top:calc(112px + var(--mp-alert-h, 0px))}
body.mp-home-v3.admin-bar .mp3 .mph-top{padding-top:calc(144px + var(--mp-alert-h, 0px))}
.mp3 .mph~.hero{padding-block-start:clamp(36px,6vw,84px)} /* le flux a déjà dégagé le menu fixe : le hero n'ajoute plus --mp3-top */
.mp3 .mph-feed{position:relative;background:linear-gradient(180deg,#0d0f0d,#08090a);border-top:1px solid #1c1f1b;border-bottom:1px solid #1c1f1b;overflow:hidden}
.mp3 .mph-feed .glint{position:absolute;top:0;bottom:0;left:0;width:220px;background:linear-gradient(90deg,rgba(201,246,74,0),rgba(201,246,74,.10),rgba(201,246,74,0));animation:mph-glint 3.6s cubic-bezier(.5,0,.3,1) infinite;pointer-events:none;will-change:transform}
.mp3 .mph-feed .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px}
.mp3 .mph-feed .side{display:inline-flex;align-items:center;gap:10px;font:11px var(--font-mono);letter-spacing:.14em;color:#6e7469}
.mp3 .mph-feed .side .dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none;box-shadow:0 0 6px rgba(201,246,74,.6)}
.mp3 .mph-feed .side .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(201,246,74,.55);animation:mph-ping 2s cubic-bezier(.2,.6,.3,1) infinite;will-change:transform,opacity}
@keyframes mph-ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(3.8);opacity:0}}
.mp3 .mph-feed a.side{color:var(--lime)}.mp3 .mph-feed a.side svg{width:14px;height:14px;stroke-width:2.4}
.mp3 .mph-feed .cur{display:inline-flex;align-items:center;gap:14px;font:12.5px var(--font-mono);letter-spacing:.06em;white-space:nowrap;overflow:hidden;color:var(--fg-2);min-width:0}
.mp3 .mph-feed .cur .n{color:#8b9186;flex:none}.mp3 .mph-feed .cur .v{color:var(--lime);font-weight:500;flex:none}
/* Le nom du lot cède la place : sur téléphone il se termine par « … », le pourcentage (.v) reste toujours entier. */
.mp3 .mph-feed .cur .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mp3 .mph-feed .line{position:absolute;left:0;bottom:0;height:1px;width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform,opacity;background:linear-gradient(90deg,rgba(201,246,74,0),var(--lime));box-shadow:0 0 12px var(--lime)}
@keyframes mph-glint{0%{transform:translateX(-40vw)}60%,100%{transform:translateX(140vw)}}
.mp3 .mph-off *,.mp3 .mph-off *::before,.mp3 .mph-off *::after{animation-play-state:paused!important}
@media (max-width:980px){.mp3 .mph-feed .side{display:none}.mp3 .mph-feed .cur{gap:10px;font-size:12px;letter-spacing:.03em}}

/* Offre 2+1 (rendue côté serveur seulement tant que mypeptide_promo_active()) : pastille reprise du bloc .offer retiré. */
.mp3 .offer__tag{background:var(--lime);color:var(--ink);font:700 12px/1 var(--font-body);padding:6px 9px;border-radius:999px}
/* Prix WooCommerce (get_price_html) : ancien prix barré s'il y en a un. */
.mp3 .prod__price del{opacity:.5;font-size:.7em;margin-right:6px}
.mp3 .prod__price ins{text-decoration:none}

@media (prefers-reduced-motion:reduce){
  .mp3 *,.mp3 *::before,.mp3 *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Flacon vivant (14/10, choix de Sami : la photo plutôt que la 3D, animée au maximum).
   La photo est inclinée en perspective (souris, défilement, balancement), et des calques découpés à sa silhouette
   (masque = la photo elle-même, fond transparent ; url relative à cette feuille) ajoutent : liserés de lumière citron/sarcelle qui suivent
   l'inclinaison, reflet qui balaie le verre, tache de lumière sous la souris, laser de scan HPLC, poudre qui scintille.
   Reflet au sol en miroir. Tout est en transform/opacity (composité), rien sous prefers-reduced-motion. */
.mp3 .stage__vialanim{position:relative}
.mp3 .vfx{position:relative;width:100%;height:100%;transform:perspective(1100px) rotateX(var(--vrx,0deg)) rotateY(var(--vry,0deg));transform-origin:50% 60%;will-change:transform}
.mp3 .vfx__fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:url(img/reta10.webp) center/contain no-repeat;mask:url(img/reta10.webp) center/contain no-repeat}
.mp3 .vfx__fx i{position:absolute;display:block;pointer-events:none}
.mp3 .vfx__rim{top:0;bottom:0;width:38%;opacity:.25;mix-blend-mode:screen;transition:opacity .2s linear}
.mp3 .vfx__rim--l{left:0;background:linear-gradient(90deg,rgba(98,197,197,.95),rgba(98,197,197,.3) 24%,transparent 70%)}
.mp3 .vfx__rim--r{right:0;background:linear-gradient(270deg,rgba(201,246,74,1),rgba(201,246,74,.32) 24%,transparent 70%)}
.mp3 .vfx__sweep{top:-10%;bottom:-10%;left:0;width:55%;background:linear-gradient(100deg,transparent 0,rgba(255,255,255,0) 30%,rgba(255,255,255,.62) 48%,rgba(255,255,255,.16) 56%,transparent 70%);mix-blend-mode:screen;transform:translateX(-120%) skewX(-8deg);animation:mp3-sweep 6.5s cubic-bezier(.45,0,.2,1) 2.4s infinite}
@keyframes mp3-sweep{0%{transform:translateX(-120%) skewX(-8deg)}38%,100%{transform:translateX(230%) skewX(-8deg)}}
.mp3 .vfx__spot{left:0;top:0;width:90%;aspect-ratio:1;margin:-45% 0 0 -45%;background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(201,246,74,.14) 55%,transparent);mix-blend-mode:screen;opacity:0;transform:translate3d(var(--spx,50%),var(--spy,40%),0);transition:opacity .4s ease}
.mp3 .vfx.is-lit .vfx__spot{opacity:1}
.mp3 .vfx__scan{left:0;right:0;top:0;height:16%;background:linear-gradient(180deg,transparent,rgba(201,246,74,.06) 55%,rgba(201,246,74,.6) 92%,rgba(240,255,200,1) 97%,transparent);mix-blend-mode:screen;transform:translateY(-110%);animation:mp3-scan-v 9s cubic-bezier(.55,0,.35,1) 3.2s infinite}
@keyframes mp3-scan-v{0%{transform:translateY(-110%)}24%{transform:translateY(640%)}24.01%,100%{transform:translateY(-110%)}}
.mp3 .vfx__dust{inset:0}
.mp3 .vfx__dust b{position:absolute;width:4px;height:4px;margin:-2px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px rgba(255,255,255,.6);opacity:0;animation:mp3-dust 3.8s ease-in-out infinite}
.mp3 .vfx__dust b:nth-child(1){left:22%;top:88%;animation-delay:.2s}
.mp3 .vfx__dust b:nth-child(2){left:41%;top:90.5%;animation-delay:1.7s}
.mp3 .vfx__dust b:nth-child(3){left:63%;top:88.5%;animation-delay:.9s}
.mp3 .vfx__dust b:nth-child(4){left:78%;top:91%;animation-delay:2.6s}
.mp3 .vfx__dust b:nth-child(5){left:31%;top:92.5%;animation-delay:3.1s}
.mp3 .vfx__dust b:nth-child(6){left:55%;top:93%;animation-delay:.5s}
.mp3 .vfx__dust b:nth-child(7){left:27%;top:28%;animation-delay:1.3s;width:2px;height:2px}
.mp3 .vfx__dust b:nth-child(8){left:68%;top:31%;animation-delay:2.2s;width:2px;height:2px}
.mp3 .vfx__dust b:nth-child(9){left:47%;top:26%;animation-delay:3.4s;width:2px;height:2px}
.mp3 .vfx__dust b:nth-child(10){left:84%;top:86.5%;animation-delay:1.1s}
@keyframes mp3-dust{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1)}60%{opacity:.2;transform:scale(.6)}}
.mp3 .vfx__reflect{position:absolute;left:0;top:100%;width:100%;height:100%;max-width:none;object-fit:contain;transform:scaleY(-1);opacity:.15;pointer-events:none;-webkit-mask:linear-gradient(to top,#000,transparent 16%);mask:linear-gradient(to top,#000,transparent 16%)}
@media (prefers-reduced-motion:reduce){.mp3 .vfx__sweep,.mp3 .vfx__scan,.mp3 .vfx__dust b{animation:none}.mp3 .vfx__dust,.mp3 .vfx__scan{display:none}}
.mp3 .mp3-mol{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.mp3 .mp3-mol.is-on{opacity:1}

/* ---- Carrousel des trois flacons (Reta devant, GHK-Cu et 5-Amino derrière ; 14/10/2026) ----
 * Les items se superposent dans le cadre du flacon principal ; le JS les place sur une ellipse (translate + scale) et
 * les fait tourner. Sans JS ou sous prefers-reduced-motion : disposition fixe ci-dessous (pas de décalage de mise en page). */
.mp3 .carou{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mp3 .carou__item{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform,opacity;cursor:pointer}
.mp3 .carou__item[data-i="0"]{z-index:3}
.mp3 .carou__item[data-i="1"]{z-index:1;transform:translate3d(92%,-7%,0) scale(.64);opacity:.78}
.mp3 .carou__item[data-i="2"]{z-index:1;transform:translate3d(-92%,-7%,0) scale(.64);opacity:.78}
.mp3 .carou.is-live .carou__item{opacity:1}
.mp3 .carou:not(.is-live) .carou__item:not(.is-front) .stage__vial{filter:drop-shadow(0 30px 40px rgba(0,0,0,.7)) brightness(.62) saturate(.85)}
/* Volume des photos (créés par le JS) : ombre de cylindre, reflet vertical qui glisse avec la rotation, voile de profondeur */
.mp3 .vfx__shade{inset:0 -12%;background:linear-gradient(90deg,rgba(4,6,7,.62),rgba(4,6,7,.18) 16%,transparent 34%,transparent 62%,rgba(4,6,7,.24) 82%,rgba(4,6,7,.7));mix-blend-mode:multiply}
.mp3 .vfx__spec{top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07) 30%,rgba(255,255,255,.42) 47%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.12) 62%,transparent);mix-blend-mode:screen;will-change:transform}
.mp3 .vfx__dim{inset:0;background:#06080a;opacity:0}
.mp3 .carou__item img{-webkit-user-drag:none;pointer-events:none}
.mp3 .carou__item .vfx__scan,.mp3 .carou__item .vfx__dust,.mp3 .carou__item .vfx__spot{transition:opacity .45s ease}
.mp3 .carou__item:not(.is-front) .vfx__scan,.mp3 .carou__item:not(.is-front) .vfx__dust,.mp3 .carou__item:not(.is-front) .vfx__spot{opacity:0}
.mp3 .carou__item:not(.is-front) .vfx__reflect{opacity:.08}
.mp3 .carou.is-ready .vfx--ghk .vfx__fx{-webkit-mask-image:url(img/ghkcu50.webp);mask-image:url(img/ghkcu50.webp)}
.mp3 .carou.is-ready .vfx--amino .vfx__fx{-webkit-mask-image:url(img/amino10.webp);mask-image:url(img/amino10.webp)}
.mp3 .carou__item[data-i="1"] .stage__vialanim{animation:mp3-side-in-r .9s cubic-bezier(.16,1,.3,1) .35s backwards}
.mp3 .carou__item[data-i="2"] .stage__vialanim{animation:mp3-side-in-l .9s cubic-bezier(.16,1,.3,1) .45s backwards}
@keyframes mp3-side-in-r{from{opacity:0;transform:translateX(-70%) scale(.8)}to{opacity:1;transform:none}}
@keyframes mp3-side-in-l{from{opacity:0;transform:translateX(70%) scale(.8)}to{opacity:1;transform:none}}
.mp3 .carou.is-dragging{cursor:grabbing}
@media (prefers-reduced-motion:reduce){.mp3 .carou__item .stage__vialanim{animation:none}}

/* Alvéoles électriques (version D, 14/10/2026) : canvas en fond de section, le contenu passe devant */
.mp3 .hexfx-host{position:relative;isolation:isolate}
.mp3 .hexfx-host>:not(.mp3-hexfx):not(.mp3-mol){position:relative;z-index:1}
.mp3 .mp3-hexfx{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;z-index:0}