/* ==========================================================================
   MOTS-c 20mg — theme + unique sections (loads product_page_base.css)
   Warm "cellular energy" — amber/coral/violet on indigo. Unique: energy-core
   hero, what-is, 3-mechanism cards, effects. Fact strip uses shared .pdp-facts.
   ========================================================================== */

.pdp-page.theme-mots {
    --pdp-bg: #0b0716;
    --pdp-bg2: #130a24;
    --pdp-ink: #f5eeff;
    --pdp-muted: #b0a0d0;
    --pdp-accent: #ffb340;
    --pdp-accent2: #ff5d7a;
    --pdp-accent-ink: #2a0f18;
    --pdp-line: rgba(255,255,255,.08);
    --pdp-card: rgba(255,255,255,.04);
    --pdp-glass: rgba(19,10,36,.6);
    --pdp-alt-mid: #150b28;
    --m-violet: #8b6cff;
    --pdp-hero-bg:
        radial-gradient(100% 80% at 50% 0%, rgba(139,108,255,.18), transparent 55%),
        radial-gradient(80% 70% at 80% 100%, rgba(255,93,122,.12), transparent 55%),
        linear-gradient(180deg, var(--pdp-bg2), var(--pdp-bg));
    --pdp-cta-bg:
        radial-gradient(90% 120% at 0% 0%, rgba(255,93,122,.14), transparent 55%),
        linear-gradient(180deg, #150b28, var(--pdp-bg));
}

/* hero motif — energy core + orbits */
.theme-mots .mtc-core { position: absolute; width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--pdp-accent) 0%, var(--pdp-accent2) 42%, rgba(139,108,255,.2) 70%, transparent 75%); filter: blur(6px); animation: mtc-pulse 5.5s ease-in-out infinite; }
@keyframes mtc-pulse { 0%,100% { transform: scale(.94); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
.theme-mots .mtc-orbit { position: absolute; border: 1px solid var(--pdp-line); border-radius: 50%; }
.theme-mots .mtc-orbit--1 { width: 78%; aspect-ratio: 1; animation: mtc-spin 22s linear infinite; }
.theme-mots .mtc-orbit--2 { width: 96%; aspect-ratio: 1; animation: mtc-spin 34s linear infinite reverse; }
.theme-mots .mtc-orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--pdp-accent); box-shadow: 0 0 12px var(--pdp-accent); }
.theme-mots .mtc-orbit--2::after { background: var(--m-violet); box-shadow: 0 0 12px var(--m-violet); }
@keyframes mtc-spin { to { transform: rotate(360deg); } }
.theme-mots .mtc-vial { position: relative; z-index: 2; max-height: 78%; max-width: 62%; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); animation: mtc-float 7s ease-in-out infinite; }
@keyframes mtc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* what-is */
.theme-mots .mtc-about { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.theme-mots .mtc-about-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.theme-mots .mtc-about-points li { position: relative; padding-left: 34px; line-height: 1.5; }
.theme-mots .mtc-about-points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--pdp-accent), var(--pdp-accent2)); opacity: .25; }
.theme-mots .mtc-about-points li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--pdp-accent); }
.theme-mots .mtc-about-visual { position: relative; display: grid; place-items: center; aspect-ratio: 4/3; border-radius: 24px; border: 1px solid var(--pdp-line); background: radial-gradient(circle at 50% 40%, rgba(255,179,64,.14), transparent 60%), var(--pdp-card); overflow: hidden; }
.theme-mots .mtc-about-visual img { max-width: 62%; max-height: 82%; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); }

/* 3 mechanisms */
.theme-mots .mtc-mech { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.theme-mots .mtc-mcard { position: relative; padding: 32px 26px; border-radius: 22px; border: 1px solid var(--pdp-line); background: var(--pdp-card); overflow: hidden; transition: transform .25s ease, border-color .25s ease; }
.theme-mots .mtc-mcard:hover { transform: translateY(-5px); border-color: rgba(255,179,64,.5); }
.theme-mots .mtc-mcard::before { content: ""; position: absolute; top: -40%; right: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,93,122,.25), transparent 65%); }
.theme-mots .mtc-mcard .n { font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--pdp-accent); }
.theme-mots .mtc-mcard h3 { font-size: 1.28rem; margin: 12px 0 10px; position: relative; }
.theme-mots .mtc-mcard p { color: var(--pdp-muted); line-height: 1.55; margin: 0; position: relative; }

/* effects */
.theme-mots .mtc-effects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.theme-mots .mtc-effect { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: 16px; background: var(--pdp-card); border: 1px solid var(--pdp-line); }
.theme-mots .mtc-effect .spark { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,179,64,.2), rgba(255,93,122,.2)); color: var(--pdp-accent); }
.theme-mots .mtc-effect span { font-weight: 600; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
    .theme-mots .mtc-core, .theme-mots .mtc-orbit, .theme-mots .mtc-vial { animation: none !important; }
}
@media (max-width: 900px) {
    .theme-mots .mtc-about { grid-template-columns: 1fr; }
    .theme-mots .mtc-about-visual { order: -1; }
    .theme-mots .mtc-mech { grid-template-columns: 1fr; }
    .theme-mots .mtc-effects { grid-template-columns: 1fr; }
}