/**
 * MADAME Premium Product — Fiche produit éditoriale
 * Charte : blanc / noir / vert profond (pas d'or)
 * Réf design : madame-fiche-produit (5).html
 * Project: MADAME / 2026-04-29
 */

/* ============================================================
   Variables — charte unique
   ============================================================ */
:root {
    --white: #FFFFFF; --paper: #FAFAF8; --bone: #F2F0EB; --line: #E5E3DD;
    --black: #0A0A0A; --ink: #161616;
    --graphite: #3A3A3A; --stone: #6B6B6B; --mist: #9A9A9A;
    --forest: #1B3328; --forest-deep: #0F1E16; --forest-soft: #2D4A3C;
    --serif: 'Playfair Display', 'Times New Roman', serif;
    --serif-italic: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter Tight', -apple-system, sans-serif;
    --gutter: clamp(20px, 4vw, 80px);
    --section-gap: clamp(80px, 10vw, 160px);
    --ease: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Reset léger sur le scope produit
   ============================================================ */
.mpp-product-page * { box-sizing: border-box; }
.mpp-product-page { font-family: var(--sans); font-weight: 300; color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* ============================================================
   Breadcrumb
   ============================================================ */
.mpp-breadcrumb {
    padding: 28px var(--gutter) 8px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stone);
    max-width: 1700px;
    margin: 0 auto;
}
.mpp-breadcrumb a { color: var(--stone); text-decoration: none; transition: color 0.3s var(--ease); }
.mpp-breadcrumb a:hover { color: var(--forest); }
.mpp-breadcrumb .sep { margin: 0 12px; opacity: 0.4; }
.mpp-breadcrumb .current { color: var(--ink); }

/* ============================================================
   Layout produit principal
   ============================================================ */
.mpp-product-layout {
    display: grid;
    /* Colonne info un peu plus large pour le titre + meilleur ratio d'air */
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr);
    gap: clamp(32px, 4vw, 72px);
    max-width: 1700px;
    margin: 0 auto;
    padding: 24px var(--gutter) var(--section-gap);
    align-items: flex-start;
}
@media (max-width: 1024px) {
    .mpp-product-layout { grid-template-columns: 1fr; gap: 32px; padding: 16px var(--gutter) 60px; }
}

/* ============================================================
   Galerie verticale
   ============================================================ */
.mpp-gallery-vertical { display: flex; flex-direction: column; gap: 8px; position: relative; }
.mpp-gallery-frame {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--bone);
    overflow: hidden;
    cursor: zoom-in;
}
.mpp-gallery-frame .frame-visual {
    width: 100%; height: 100%;
    transition: transform 1.4s var(--ease-out);
    will-change: transform;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.mpp-gallery-frame .frame-visual img,
.mpp-gallery-frame .frame-visual picture,
.mpp-gallery-frame .frame-visual video {
    width: 100%; height: 100%;
    display: block;
}
.mpp-gallery-frame .frame-visual img,
.mpp-gallery-frame .frame-visual video { object-fit: cover; }
.mpp-gallery-frame.has-video .frame-visual { background: var(--bone); }
@media (prefers-reduced-motion: reduce) {
    .mpp-hero-video { display: none; }
    .mpp-gallery-frame.has-video::after {
        content: ''; position: absolute; inset: 0;
        background-image: var(--mpp-hero-poster, none);
        background-size: cover; background-position: center;
    }
}
.mpp-gallery-frame:hover .frame-visual { transform: scale(1.04); }
.mpp-gallery-frame.mpp-frame-active .frame-visual { transform: scale(1.02); }
.mpp-frame-detail { aspect-ratio: 4/3; }

.mpp-frame-counter {
    position: absolute; top: 22px; left: 22px;
    font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
    color: var(--white);
    background: rgba(10,10,10,0.6);
    padding: 6px 12px;
    backdrop-filter: blur(6px);
    z-index: 2;
}
.mpp-frame-badge {
    position: absolute; top: 22px; right: 22px;
    font-family: var(--sans); font-size: 10px; letter-spacing: 0.28em;
    text-transform: uppercase;
    background: var(--white); color: var(--forest);
    padding: 7px 13px;
    border: 1px solid var(--forest);
    z-index: 2;
}
.mpp-frame-badge.dark { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Frames sans image — fallback gradient + watermark letter */
.mpp-gallery-frame.is-fallback .frame-visual::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.mpp-gallery-frame.is-fallback .frame-visual::after {
    content: attr(data-letter);
    font-family: var(--serif); font-style: italic;
    font-size: clamp(80px, 12vw, 160px);
    color: rgba(255,255,255,0.08);
    font-weight: 400; letter-spacing: -0.05em;
    z-index: 1;
}
.mpp-gallery-frame.is-fallback.frame-1 { background: linear-gradient(135deg, #1B3328 0%, #0F1E16 50%, #0A0A0A 100%); }
.mpp-gallery-frame.is-fallback.frame-2 { background: linear-gradient(135deg, #2C3E36 0%, #1B3328 100%); }
.mpp-gallery-frame.is-fallback.frame-3 { background: linear-gradient(135deg, #1B3328 0%, #2A2A2A 100%); }
.mpp-gallery-frame.is-fallback.frame-4 { background: linear-gradient(140deg, #0F1E16 0%, #2D4A3C 50%, #1B3328 100%); }
.mpp-gallery-frame.is-fallback.frame-5 { background: linear-gradient(135deg, #2A2A2A 0%, #0A0A0A 100%); }

@media (max-width: 1024px) {
    .mpp-gallery-vertical {
        flex-direction: row; gap: 6px;
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        margin: 0 calc(var(--gutter) * -1);
        padding: 0 var(--gutter);
    }
    .mpp-gallery-vertical::-webkit-scrollbar { display: none; }
    .mpp-gallery-frame { flex: 0 0 90%; scroll-snap-align: center; aspect-ratio: 3/4; }
    .mpp-frame-detail { aspect-ratio: 3/4; }
}

/* ============================================================
   Info sticky (panneau droit)
   ============================================================ */
/* Pas de scroll indépendant sur la colonne droite — on laisse le contenu
   s'étendre, l'utilisateur scrolle la page entière. L'effet sticky reste
   actif tant que la colonne tient dans la viewport. */
.mpp-info-sticky {
    position: sticky;
    top: 24px; /* moins de marge → plus de place pour le contenu */
    align-self: start;
    padding-top: 0;
}
@media (max-width: 1024px) {
    .mpp-info-sticky { position: static; padding-top: 0; }
}

/* === Densification de la colonne droite (fini les espaces géants) === */
.mpp-info-sticky .mpp-collection-tag { margin-bottom: 10px; }
.mpp-info-sticky .mpp-brand-house     { margin-bottom: 16px; font-size: 15px; }
.mpp-info-sticky .mpp-rating          { margin-bottom: 16px; padding-bottom: 16px; }
.mpp-info-sticky .mpp-price-block     { margin-bottom: 4px; }
.mpp-info-sticky .mpp-price           { font-size: 28px; }
.mpp-info-sticky .mpp-price-tax       { margin-bottom: 16px; font-size: 11px; }
.mpp-info-sticky .mpp-installment     { padding: 11px 14px; margin-bottom: 20px; font-size: 12.5px; }
.mpp-info-sticky .mpp-installment .icon { width: 26px; height: 26px; font-size: 12px; }
.mpp-info-sticky .mpp-option-group    { margin-bottom: 18px; }
.mpp-info-sticky .mpp-option-label    { margin-bottom: 10px; }
.mpp-info-sticky .mpp-stock           { margin: 16px 0 14px; font-size: 13px; }
.mpp-info-sticky .mpp-cta-row         { margin-bottom: 10px; }
.mpp-info-sticky .mpp-btn-secondary   { padding: 14px; margin-bottom: 20px; }
.mpp-info-sticky .mpp-guarantees      { margin-bottom: 20px; }
.mpp-info-sticky .mpp-guarantee       { padding: 14px; }
.mpp-info-sticky .mpp-guarantee-text strong { font-size: 11px; }
.mpp-info-sticky .mpp-guarantee-text span   { font-size: 12px; }
.mpp-info-sticky .mpp-payment-secure  { padding: 14px; margin-bottom: 20px; }
.mpp-info-sticky .mpp-payment-icon    { font-size: 9px; padding: 3px 8px; }
.mpp-info-sticky .mpp-materials       { padding-top: 20px; }
.mpp-info-sticky .mpp-materials-title { font-size: 18px; margin-bottom: 12px; }
.mpp-info-sticky .mpp-material-row    { padding: 8px 0; grid-template-columns: 110px 1fr; gap: 12px; }
.mpp-info-sticky .mpp-material-row span { font-size: 13.5px; }
.mpp-info-sticky .mpp-material-row strong { font-size: 10px; }
.mpp-info-sticky .mpp-size-guide      { margin-top: 10px; font-size: 13px; }

.mpp-collection-tag {
    font-family: var(--sans); font-size: 10px;
    letter-spacing: 0.34em; text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 14px;
}
.mpp-collection-tag::before { content: ''; width: 28px; height: 1px; background: var(--forest); }

/* Title row — h1 à gauche + badge "Made in EU" à droite (flex, align-items:flex-start
   pour que le badge reste collé au sommet du titre même sur titres multilignes). */
.mpp-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 10px;
    flex-wrap: nowrap;
}
.mpp-title-row > .mpp-product-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
}
/* Logo PNG officiel "Made in Europe" — pastille discrète à droite du titre.
   On force avec !important car le PNG source est très large (~2000px) et
   sans contrainte explicite l'image éclipse le titre. */
.mpp-eu-logo,
img.mpp-eu-logo,
.mpp-title-row .mpp-eu-logo {
    flex: 0 0 56px !important;
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    margin-top: 2px !important;
    object-fit: contain !important;
    transition: opacity 0.3s var(--ease);
}
.mpp-eu-logo:hover { opacity: 0.85; }
@media (max-width: 768px) {
    .mpp-title-row { gap: 10px; }
    .mpp-eu-logo,
    img.mpp-eu-logo,
    .mpp-title-row .mpp-eu-logo {
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
    }
}

/* Force MAX 26px — Shoptimizer / theme child override defaults to ~80-100px sur h1.entry-title.
   On gagne via !important + sélecteurs renforcés (h1.mpp-product-title, body .mpp-product-title). */
h1.mpp-product-title,
body .mpp-product-title,
.woocommerce h1.mpp-product-title {
    font-family: var(--serif) !important; font-weight: 400 !important;
    font-size: clamp(20px, 1.8vw, 26px) !important;
    line-height: 1.15 !important;
    color: var(--ink) !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.015em !important;
    /* INTERDIT formellement la coupure d'un mot — chaque mot reste atomique */
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    text-wrap: balance;
    white-space: normal !important;
    text-transform: none !important;
}
h1.mpp-product-title em,
body .mpp-product-title em {
    font-family: var(--serif-italic) !important; font-style: italic !important;
    font-weight: 500 !important; color: var(--forest) !important;
    display: inline !important;
    font-size: inherit !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
}

.mpp-brand-house {
    font-family: var(--serif-italic); font-style: italic;
    font-size: 17px; color: var(--stone);
    margin-bottom: 28px;
}
.mpp-brand-house a {
    color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1px;
    transition: all 0.3s var(--ease);
}
.mpp-brand-house a:hover { border-color: var(--forest); color: var(--forest); }

.mpp-rating {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 28px; padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
}
.mpp-stars { display: flex; gap: 2px; }
.mpp-stars svg { width: 13px; height: 13px; fill: var(--forest); }
.mpp-stars svg.empty { fill: var(--line); }
.mpp-rating-text {
    font-family: var(--sans); font-size: 12px;
    color: var(--graphite); letter-spacing: 0.05em;
}
.mpp-rating-text a {
    color: var(--ink); text-decoration: underline;
    text-decoration-color: var(--line); text-underline-offset: 3px;
}

/* Prix */
.mpp-price-block { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.mpp-price {
    font-family: var(--serif); font-weight: 400;
    font-size: 34px; color: var(--ink);
    letter-spacing: -0.01em;
}
.mpp-price-old {
    font-family: var(--serif-italic); font-size: 19px;
    color: var(--stone);
    text-decoration: line-through;
    font-style: italic;
}
.mpp-price-discount {
    background: var(--forest); color: var(--white);
    font-family: var(--sans); font-size: 10px; font-weight: 500;
    letter-spacing: 0.16em;
    padding: 4px 10px;
    text-transform: uppercase;
}
.mpp-price-tax {
    font-family: var(--sans); font-size: 11px;
    color: var(--stone); margin-bottom: 28px;
    letter-spacing: 0.05em;
}

/* Klarna installment */
.mpp-installment {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 14px 18px;
    margin-bottom: 32px;
    display: flex; align-items: center; gap: 14px;
    font-family: var(--sans); font-size: 12.5px;
    color: var(--graphite);
}
.mpp-installment strong { color: var(--ink); font-weight: 500; }
.mpp-installment .icon {
    width: 30px; height: 30px;
    background: var(--ink); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 13px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Options (couleur, taille) */
.mpp-option-group { margin-bottom: 26px; }
.mpp-option-label {
    font-family: var(--sans); font-size: 11px;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--graphite);
    margin-bottom: 14px;
    display: flex; justify-content: space-between; align-items: center;
}
.mpp-option-label .selected {
    color: var(--ink); font-weight: 400;
    text-transform: none; letter-spacing: 0.02em;
    font-style: italic; font-family: var(--serif-italic);
    font-size: 15px;
}

.mpp-colors { display: flex; gap: 12px; flex-wrap: wrap; }
.mpp-color-swatch {
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    border: 1px solid var(--line);
    transition: transform 0.3s var(--ease);
    background-size: cover; background-position: center;
}
.mpp-color-swatch:hover { transform: scale(1.08); }
.mpp-color-swatch.active::after {
    content: ''; position: absolute; inset: -5px;
    border: 1px solid var(--ink); border-radius: 50%;
}

.mpp-sizes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}
.mpp-size-btn {
    background: var(--white);
    border: 1px solid var(--line);
    font-family: var(--sans); font-size: 13px; font-weight: 400;
    padding: 14px 0;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    color: var(--ink);
    letter-spacing: 0.05em;
    position: relative;
}
.mpp-size-btn:hover { border-color: var(--ink); }
.mpp-size-btn.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.mpp-size-btn:disabled, .mpp-size-btn.is-out {
    color: var(--mist); cursor: not-allowed; background: var(--paper);
}
.mpp-size-btn.is-out::after {
    content: ''; position: absolute;
    top: 50%; left: 8%; right: 8%;
    height: 1px; background: var(--line);
    transform: rotate(-18deg);
}

.mpp-size-guide {
    margin-top: 14px;
    font-family: var(--serif-italic); font-style: italic;
    font-size: 14px; color: var(--graphite);
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 2px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s var(--ease);
}
.mpp-size-guide:hover { border-bottom-color: var(--forest); color: var(--forest); }
.mpp-size-guide svg { width: 14px; height: 14px; stroke-width: 1.4; }

/* ============================================================
   Guide des tailles — Modal WOW (effet éditorial premium MADAME)
   ============================================================
   Architecture :
   - dialog: shell plein écran responsive (max 960×95vh)
   - hero split: silhouette SVG line-art (stroke forest) + calculateur 3 inputs
   - sections numérotées 01/02/03 avec gros chiffres serif italic
   - tableau premium: headers éditoriaux, ligne user surlignée forest gradient
   - étapes: layout chiffre géant + texte
   - footer: quote box + dual CTA
   ============================================================ */

.mpp-sg-dialog {
    border: none;
    padding: 0;
    background: var(--white);
    color: var(--ink);
    max-width: min(960px, 95vw);
    width: 100%;
    max-height: 95vh;
    margin: auto;
    box-shadow: 0 30px 100px rgba(15, 30, 22, 0.22), 0 0 0 1px rgba(15, 30, 22, 0.04);
    overflow: hidden;
    border-radius: 0;
    font-family: var(--sans);
    position: relative;
}
.mpp-sg-dialog::backdrop {
    background: rgba(15, 30, 22, 0.6);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    animation: mppSgBackdrop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mppSgBackdrop {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mpp-sg-dialog[open] {
    animation: mppSgIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mppSgIn {
    from { opacity: 0; transform: translateY(40px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close X flottant en haut-droite */
.mpp-sg-x {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--graphite);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s var(--ease);
}
.mpp-sg-x:hover {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
    transform: rotate(90deg);
}

.mpp-sg-shell {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 95vh;
    scrollbar-gutter: stable;
}
.mpp-sg-shell::-webkit-scrollbar { width: 6px; }
.mpp-sg-shell::-webkit-scrollbar-track { background: transparent; }
.mpp-sg-shell::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.mpp-sg-shell::-webkit-scrollbar-thumb:hover { background: var(--forest-soft); }

/* ============================================================
   HERO split — silhouette + calculateur
   ============================================================ */
.mpp-sg-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    background: linear-gradient(135deg, var(--paper) 0%, var(--bone) 100%);
    position: relative;
}
.mpp-sg-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--forest-soft) 50%, transparent 100%);
    opacity: 0.4;
}

.mpp-sg-hero-illust {
    padding: 40px 0 40px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--forest);
    position: relative;
}
.mpp-sg-hero-illust svg {
    width: 100%;
    max-width: 240px;
    height: auto;
    filter: drop-shadow(0 4px 20px rgba(15, 30, 22, 0.12));
    animation: mppSgFloat 8s ease-in-out infinite;
}
@keyframes mppSgFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.mpp-sg-line {
    opacity: 0.55;
    transition: opacity 0.4s var(--ease);
}
.mpp-sg-line:hover { opacity: 1; }
.mpp-sg-line text {
    font-family: var(--serif-italic);
    font-style: italic;
    letter-spacing: 0.02em;
}

.mpp-sg-hero-content {
    padding: 48px 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, var(--white) 0%, var(--paper) 100%);
}
.mpp-sg-eyebrow {
    display: inline-block;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 12px;
    position: relative;
    padding-left: 22px;
}
.mpp-sg-eyebrow::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 14px;
    height: 1px;
    background: var(--forest);
}
.mpp-sg-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.05;
    margin: 0 0 6px;
    color: var(--ink);
    letter-spacing: -0.018em;
}
.mpp-sg-title em {
    font-family: var(--serif-italic);
    font-style: italic;
    color: var(--forest);
}
.mpp-sg-piece-label {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 14px;
    color: var(--stone);
    margin: 0 0 28px;
}

/* Calculateur 3 inputs */
.mpp-sg-calc {
    margin: 0 0 20px;
    padding: 0;
    border: none;
}
.mpp-sg-calc-intro {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--graphite);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.mpp-sg-calc-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(229, 227, 221, 0.5);
}
.mpp-sg-calc-field:last-child { border-bottom: none; }
.mpp-sg-calc-lbl {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink);
    flex: 1 1 auto;
}
.mpp-sg-calc-input {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.mpp-sg-calc-input input {
    width: 64px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    background: var(--white);
    font-family: var(--serif);
    font-size: 18px;
    text-align: center;
    color: var(--ink);
    -moz-appearance: textfield;
    appearance: textfield;
    transition: all 0.3s var(--ease);
}
.mpp-sg-calc-input input:focus {
    outline: none;
    border-color: var(--forest);
    background: var(--paper);
    box-shadow: 0 0 0 3px rgba(27, 51, 40, 0.08);
}
.mpp-sg-calc-input input::-webkit-outer-spin-button,
.mpp-sg-calc-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mpp-sg-calc-unit {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 12px;
    color: var(--stone);
    min-width: 18px;
}

/* Résultat — pull massif */
.mpp-sg-result {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: all 0.4s var(--ease);
    position: relative;
    overflow: hidden;
}
.mpp-sg-result::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--line);
    transition: background 0.4s var(--ease);
}
.mpp-sg-result.is-active {
    background: linear-gradient(135deg, var(--white) 0%, rgba(27, 51, 40, 0.04) 100%);
    border-color: var(--forest);
    box-shadow: 0 6px 24px rgba(27, 51, 40, 0.08);
}
.mpp-sg-result.is-active::before { background: var(--forest); }
.mpp-sg-result-label {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stone);
    line-height: 1.4;
    flex: 1 1 auto;
    min-width: 0;
}
.mpp-sg-result-size {
    text-align: right;
    flex-shrink: 0;
}
.mpp-sg-result-eu {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    transition: color 0.4s var(--ease);
}
.mpp-sg-result.is-active .mpp-sg-result-eu { color: var(--forest); }
.mpp-sg-result-meta {
    display: block;
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 12px;
    color: var(--stone);
    margin-top: 4px;
    transition: color 0.4s var(--ease);
}
.mpp-sg-result-meta.is-avail   { color: var(--forest); }
.mpp-sg-result-meta.is-unavail { color: #b91c1c; }

/* ============================================================
   Sections numérotées
   ============================================================ */
.mpp-sg-section {
    padding: 48px 48px 40px;
    border-top: 1px solid var(--line);
}
.mpp-sg-section-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "num title"
        "num desc";
    gap: 0 28px;
    margin-bottom: 32px;
    align-items: start;
}
.mpp-sg-section-num {
    grid-area: num;
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: clamp(36px, 5vw, 56px);
    color: var(--forest);
    line-height: 0.9;
    font-weight: 400;
    letter-spacing: -0.03em;
    align-self: center;
}
.mpp-sg-section-header h3 {
    grid-area: title;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(20px, 2.5vw, 28px);
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.01em;
    align-self: end;
}
.mpp-sg-section-header h3 em {
    font-family: var(--serif-italic);
    font-style: italic;
    color: var(--forest);
}
.mpp-sg-section-header p {
    grid-area: desc;
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 14px;
    color: var(--stone);
    margin: 6px 0 0;
    line-height: 1.5;
    max-width: 56ch;
}

/* ============================================================
   Tableau pleine largeur
   ============================================================ */
.mpp-sg-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
}
.mpp-sg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.mpp-sg-table th {
    padding: 14px 16px;
    text-align: left;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--graphite);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.mpp-sg-th-unit {
    font-weight: 400;
    color: var(--stone);
    letter-spacing: 0.1em;
    font-size: 9px;
    text-transform: lowercase;
}
.mpp-sg-th-status { text-align: right !important; }

.mpp-sg-table tbody tr {
    transition: all 0.3s var(--ease);
    border-bottom: 1px solid rgba(229, 227, 221, 0.5);
}
.mpp-sg-table tbody tr:last-child { border-bottom: none; }
.mpp-sg-table tbody tr:hover {
    background: rgba(27, 51, 40, 0.025);
}
.mpp-sg-table td {
    padding: 14px 16px;
    text-align: left;
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink);
    white-space: nowrap;
}
.mpp-sg-eu-cell {
    line-height: 1.2;
}
.mpp-sg-eu-num {
    display: block;
    font-weight: 500;
    color: var(--ink);
    font-size: 16px;
}
.mpp-sg-fr-num {
    display: block;
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 11px;
    color: var(--mist);
    margin-top: 1px;
    letter-spacing: 0.04em;
}
.mpp-sg-meas {
    font-variant-numeric: tabular-nums;
    color: var(--graphite);
}
.mpp-sg-status { text-align: right !important; }
.mpp-sg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
}
.mpp-sg-pill--avail {
    background: rgba(27, 51, 40, 0.08);
    color: var(--forest);
}
.mpp-sg-pill--unavail {
    background: var(--paper);
    color: var(--mist);
}
.mpp-sg-pill-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--forest);
    box-shadow: 0 0 0 3px rgba(27, 51, 40, 0.15);
}

/* Lignes indisponibles : barré subtil */
.mpp-sg-table tr.is-unavailable td:not(.mpp-sg-status) {
    color: var(--mist);
    text-decoration: line-through;
    text-decoration-color: var(--line);
    text-decoration-thickness: 1px;
    opacity: 0.7;
}
.mpp-sg-table tr.is-unavailable .mpp-sg-fr-num,
.mpp-sg-table tr.is-unavailable .mpp-sg-eu-num {
    text-decoration: none;
}

/* Ligne RECOMMANDÉE par le calculateur — full glow */
.mpp-sg-table tr.is-recommended {
    background: linear-gradient(90deg, rgba(27, 51, 40, 0.08) 0%, rgba(27, 51, 40, 0.02) 100%) !important;
    position: relative;
    animation: mppSgPulse 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mppSgPulse {
    0%   { background: rgba(27, 51, 40, 0.18) !important; transform: scale(1); }
    50%  { background: rgba(27, 51, 40, 0.10) !important; }
    100% { background: rgba(27, 51, 40, 0.08) !important; transform: scale(1); }
}
.mpp-sg-table tr.is-recommended td {
    color: var(--ink) !important;
    font-weight: 500;
    text-decoration: none !important;
    opacity: 1 !important;
}
.mpp-sg-table tr.is-recommended td:first-child {
    box-shadow: inset 4px 0 0 var(--forest);
}
.mpp-sg-table tr.is-recommended .mpp-sg-eu-num {
    color: var(--forest) !important;
    font-size: 18px;
}

.mpp-sg-hint {
    margin: 20px 0 0;
    padding: 14px 18px;
    background: var(--paper);
    border-left: 3px solid var(--forest);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 13px;
    color: var(--graphite);
    line-height: 1.6;
}
.mpp-sg-hint svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--forest);
}

/* ============================================================
   Mesures spécifiques — bento grid
   ============================================================ */
.mpp-sg-specific-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    border: 1px solid var(--line);
}
.mpp-sg-specific-item {
    padding: 18px 20px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--white);
    transition: background 0.3s var(--ease);
}
.mpp-sg-specific-item:hover { background: var(--paper); }
.mpp-sg-specific-list dt {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stone);
    margin: 0 0 8px;
}
.mpp-sg-specific-list dd {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* ============================================================
   Comment se mesurer — étapes layout chiffre+texte
   ============================================================ */
.mpp-sg-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    border: 1px solid var(--line);
}
.mpp-sg-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 22px 24px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--white);
    transition: background 0.4s var(--ease);
    align-items: start;
}
.mpp-sg-steps li:hover {
    background: var(--paper);
}
.mpp-sg-steps li:last-child { border-right: none; }
.mpp-sg-step-num {
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 32px;
    line-height: 1;
    color: var(--forest);
    font-weight: 400;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.mpp-sg-steps h4 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16px;
    margin: 0 0 6px;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.mpp-sg-steps p {
    margin: 0;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--graphite);
    line-height: 1.55;
}

/* ============================================================
   Footer — quote + dual CTA
   ============================================================ */
.mpp-sg-footer {
    padding: 40px 48px;
    border-top: 1px solid var(--line);
    background: linear-gradient(135deg, var(--ink) 0%, #0F1E16 100%);
    color: var(--white);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    position: relative;
    overflow: hidden;
}
.mpp-sg-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 80% 50%, rgba(45, 74, 60, 0.4) 0%, transparent 70%);
    pointer-events: none;
}
.mpp-sg-footer-quote {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    position: relative;
}
.mpp-sg-footer-quote svg {
    flex-shrink: 0;
    margin-top: 4px;
    color: rgba(201, 168, 76, 0.9);
}
.mpp-sg-footer-quote p {
    margin: 0;
    font-family: var(--serif-italic);
    font-style: italic;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
    max-width: 50ch;
}
.mpp-sg-footer-quote p strong {
    font-family: var(--serif);
    font-style: normal;
    font-weight: 500;
    color: var(--white);
}
.mpp-sg-footer-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Boutons messagerie — WhatsApp / Instagram / Messenger
   Look identique entre eux (cohérence MADAME), couleur d'accent au hover. */
.mpp-sg-msg,
a.mpp-sg-msg {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--white) !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
    transition: all 0.3s var(--ease) !important;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mpp-sg-msg svg {
    flex-shrink: 0;
    transition: transform 0.3s var(--ease);
}
.mpp-sg-msg:hover {
    transform: translateY(-1px);
}
.mpp-sg-msg:hover svg {
    transform: scale(1.1);
}
.mpp-sg-msg--wa:hover {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}
.mpp-sg-msg--ig:hover {
    background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(221, 42, 123, 0.35);
}
.mpp-sg-msg--fb:hover {
    background: #0084FF !important;
    border-color: #0084FF !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0, 132, 255, 0.35);
}
.mpp-sg-cta-ghost {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px 20px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: all 0.3s var(--ease) !important;
}
.mpp-sg-cta-ghost:hover {
    border-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
    .mpp-sg-hero {
        grid-template-columns: 1fr;
    }
    .mpp-sg-hero-illust {
        padding: 32px 32px 0;
    }
    .mpp-sg-hero-illust svg { max-width: 180px; }
    .mpp-sg-hero-content {
        padding: 32px;
    }
    .mpp-sg-section { padding: 36px 32px; }
    .mpp-sg-footer { padding: 32px; }
    .mpp-sg-steps,
    .mpp-sg-specific-list {
        grid-template-columns: 1fr;
    }
    .mpp-sg-steps li,
    .mpp-sg-specific-item {
        border-right: none;
    }
}
@media (max-width: 600px) {
    .mpp-sg-dialog {
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        margin: 0;
    }
    .mpp-sg-x { top: 12px; right: 12px; width: 38px; height: 38px; }
    .mpp-sg-shell { max-height: 100vh; }
    .mpp-sg-hero-illust { padding: 24px 24px 0; }
    .mpp-sg-hero-illust svg { max-width: 140px; }
    .mpp-sg-hero-content { padding: 24px; }
    .mpp-sg-section { padding: 28px 22px; }
    .mpp-sg-section-header {
        grid-template-areas:
            "num title"
            "desc desc";
        gap: 0 18px;
    }
    .mpp-sg-section-header p { margin-top: 12px; }
    .mpp-sg-table { font-size: 13px; }
    .mpp-sg-table th { padding: 10px 12px; font-size: 9px; letter-spacing: 0.16em; }
    .mpp-sg-table td { padding: 12px; font-size: 14px; }
    .mpp-sg-pill { padding: 3px 8px; font-size: 9px; }
    .mpp-sg-footer {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 20px;
    }
    .mpp-sg-footer-actions { flex-direction: column; align-items: stretch; }
    .mpp-sg-cta-primary, .mpp-sg-cta-ghost { justify-content: center; }
}

/* Stock indicator */
.mpp-stock {
    display: flex; align-items: center; gap: 10px;
    margin: 28px 0 20px;
    font-family: var(--sans); font-size: 13px;
    color: var(--graphite);
}
.mpp-stock-dot {
    width: 8px; height: 8px;
    background: var(--forest); border-radius: 50%;
    position: relative;
}
.mpp-stock-dot::after {
    content: ''; position: absolute; inset: -3px;
    border-radius: 50%; background: var(--forest);
    opacity: 0.3;
    animation: mpp-pulse 2s ease-in-out infinite;
}
.mpp-stock.is-out .mpp-stock-dot { background: var(--stone); }
.mpp-stock.is-out .mpp-stock-dot::after { display: none; }
@keyframes mpp-pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50%      { transform: scale(1.4); opacity: 0; }
}
.mpp-stock strong { color: var(--ink); font-weight: 500; }

/* CTA Add to cart */
.mpp-cta-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    margin-bottom: 14px;
}
.mpp-qty-selector {
    display: flex; align-items: center;
    border: 1px solid var(--line);
    background: var(--white);
}
.mpp-qty-selector button {
    width: 44px; height: 56px;
    background: transparent; border: none;
    font-size: 16px; cursor: pointer;
    color: var(--graphite);
    transition: color 0.3s var(--ease);
    font-family: var(--serif-italic);
}
.mpp-qty-selector button:hover { color: var(--forest); }
.mpp-qty-selector input {
    width: 38px; height: 56px;
    text-align: center;
    border: none; background: transparent;
    font-family: var(--serif); font-size: 16px;
    color: var(--ink);
    -moz-appearance: textfield;
}
.mpp-qty-selector input::-webkit-outer-spin-button,
.mpp-qty-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* Note : le sélecteur double avec .single_add_to_cart_button + body class
   override le CSS Shoptimizer (qui force vert #3bb54a sur add-to-cart). */
.mpp-product-page .mpp-btn-add,
.mpp-product-page .mpp-btn-add.single_add_to_cart_button,
body.mpp-active .mpp-btn-add,
body.mpp-active .mpp-btn-add.single_add_to_cart_button {
    background: var(--ink) !important;
    color: var(--white) !important;
    border: 1px solid var(--ink) !important;
    font-family: var(--sans); font-weight: 500;
    font-size: 12px; letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 0 32px; height: 56px;
    cursor: pointer;
    transition: all 0.4s var(--ease);
    position: relative;
    overflow: hidden;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.mpp-product-page .mpp-btn-add:hover,
body.mpp-active .mpp-btn-add:hover {
    background: var(--forest) !important;
    border-color: var(--forest) !important;
}
.mpp-btn-add::before {
    content: ''; position: absolute; inset: 0;
    background: var(--forest);
    transform: translateY(101%);
    transition: transform 0.4s var(--ease);
    z-index: 0;
}
.mpp-btn-add span { position: relative; z-index: 1; }
.mpp-btn-add:hover::before { transform: translateY(0); }
.mpp-btn-add:hover { border-color: var(--forest); }
.mpp-btn-add:disabled { opacity: 0.5; cursor: not-allowed; }

.mpp-btn-wishlist {
    width: 56px; height: 56px;
    background: var(--white);
    border: 1px solid var(--line);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s var(--ease);
}
.mpp-btn-wishlist:hover { border-color: var(--forest); }
.mpp-btn-wishlist svg {
    width: 18px; height: 18px;
    stroke-width: 1.2;
    transition: all 0.3s var(--ease);
}
.mpp-btn-wishlist.active svg { fill: var(--forest); stroke: var(--forest); }

.mpp-btn-secondary {
    width: 100%;
    background: var(--white); color: var(--ink);
    border: 1px solid var(--ink);
    font-family: var(--sans); font-size: 12px;
    letter-spacing: 0.22em; text-transform: uppercase;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    margin-bottom: 32px;
    font-weight: 500;
}
.mpp-btn-secondary:hover { background: var(--ink); color: var(--white); }

/* Garanties 2x2 */
.mpp-guarantees {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 32px;
}
.mpp-guarantee {
    background: var(--paper);
    padding: 18px;
    display: flex; align-items: flex-start; gap: 12px;
}
.mpp-guarantee svg {
    width: 22px; height: 22px;
    stroke-width: 1.2; color: var(--forest);
    flex-shrink: 0; margin-top: 2px;
}
.mpp-guarantee-text strong {
    display: block;
    font-family: var(--sans); font-weight: 500;
    font-size: 12px; letter-spacing: 0.08em;
    color: var(--ink); margin-bottom: 2px;
    text-transform: uppercase;
}
.mpp-guarantee-text span {
    font-family: var(--serif-italic); font-style: italic;
    font-size: 13px; color: var(--stone);
    line-height: 1.4;
}

/* Paiement sécurisé */
.mpp-payment-secure {
    border: 1px solid var(--line);
    padding: 18px;
    text-align: center;
    margin-bottom: 32px;
    background: var(--paper);
}
.mpp-payment-secure-label {
    font-family: var(--sans); font-size: 10px;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--graphite); margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.mpp-payment-secure-label svg { width: 14px; height: 14px; stroke-width: 1.4; color: var(--forest); }
.mpp-payment-icons { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mpp-payment-icon {
    height: 22px; padding: 4px 10px;
    background: var(--white);
    border: 1px solid var(--line);
    display: flex; align-items: center;
    font-family: var(--sans); font-size: 10px; font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--graphite);
}

/* Materials */
.mpp-materials {
    border-top: 1px solid var(--line);
    padding-top: 32px;
}
.mpp-materials-title {
    font-family: var(--serif); font-weight: 400;
    font-size: 22px; color: var(--ink);
    margin-bottom: 18px;
    letter-spacing: -0.005em;
}
.mpp-materials-title em {
    font-family: var(--serif-italic); font-style: italic;
    color: var(--forest);
}
.mpp-materials-list { display: grid; gap: 14px; }
.mpp-material-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
    font-family: var(--sans); font-size: 13px;
}
.mpp-material-row:last-child { border-bottom: none; }
.mpp-material-row strong {
    color: var(--graphite); font-weight: 400;
    letter-spacing: 0.12em;
    font-size: 11px;
    text-transform: uppercase;
}
.mpp-material-row span {
    color: var(--ink);
    font-family: var(--serif-italic);
    font-size: 15px;
    font-style: italic;
}
.mpp-material-row em {
    color: var(--forest); font-style: italic;
    font-family: var(--serif-italic);
    font-size: 14px;
}
.mpp-material-row.is-mono span {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.05em;
    font-style: normal;
}

/* ============================================================
   Section Editorial
   ============================================================ */
.mpp-editorial {
    background: var(--paper);
    padding: var(--section-gap) var(--gutter);
    position: relative;
    overflow: hidden;
}
.mpp-editorial::before {
    content: 'MADAME';
    position: absolute;
    top: 30px; right: -40px;
    font-family: var(--serif);
    font-size: clamp(120px, 18vw, 240px);
    font-weight: 400;
    color: var(--bone);
    letter-spacing: 0.1em;
    z-index: 0;
    pointer-events: none;
    opacity: 0.7;
}
.mpp-editorial-inner {
    max-width: 1500px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
    position: relative; z-index: 1;
}
@media (max-width: 900px) {
    .mpp-editorial-inner { grid-template-columns: 1fr; }
}
.mpp-editorial-image {
    aspect-ratio: 4/5;
    background: var(--bone);
    position: relative;
    overflow: hidden;
}
.mpp-editorial-image .ed-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #2C3E36 0%, #1B3328 50%, #0F1E16 100%);
    transition: transform 1.4s var(--ease-out);
}
.mpp-editorial-image .ed-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.mpp-editorial-image:hover .ed-bg { transform: scale(1.05); }
.mpp-editorial-image::after {
    content: ''; position: absolute; inset: 24px;
    border: 1px solid rgba(255,255,255,0.15);
    pointer-events: none;
    z-index: 2;
}
.mpp-editorial-image .ed-mark {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-style: italic;
    font-size: clamp(120px, 16vw, 200px);
    color: rgba(255,255,255,0.12);
    font-weight: 400;
    z-index: 1;
}
.mpp-editorial-tag {
    position: absolute; top: 32px; left: 32px;
    font-family: var(--sans); font-size: 10px;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--white);
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    padding: 8px 14px;
    z-index: 3;
}
.mpp-editorial-content .chapter {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 28px;
    font-family: var(--sans); font-size: 11px;
    letter-spacing: 0.34em; text-transform: uppercase;
    color: var(--forest);
}
.mpp-editorial-content .chapter-num {
    font-family: var(--serif); font-style: italic;
    font-size: 36px;
    color: var(--ink);
    letter-spacing: 0;
    font-weight: 400;
    text-transform: none;
}
.mpp-editorial-content h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin-bottom: 32px;
}
.mpp-editorial-content h2 em {
    font-family: var(--serif-italic); font-style: italic;
    color: var(--forest);
}
.mpp-editorial-content .lead {
    font-family: var(--serif-italic); font-style: italic;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.55;
    color: var(--graphite);
    margin-bottom: 24px;
}
.mpp-editorial-content .lead::first-letter {
    font-family: var(--serif); font-style: normal;
    font-size: 56px; font-weight: 700;
    color: var(--forest);
    float: left;
    line-height: 0.9;
    margin-right: 8px; margin-top: 4px;
}
.mpp-editorial-content p {
    font-family: var(--sans); font-size: 14.5px;
    line-height: 1.75;
    color: var(--graphite);
    margin-bottom: 20px;
    max-width: 540px;
}
.mpp-editorial-signature {
    margin-top: 36px; padding-top: 28px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 18px;
}
.mpp-signature-mark {
    font-family: var(--serif); font-style: italic;
    font-size: 36px; color: var(--forest);
    line-height: 1;
}
.mpp-signature-text {
    font-family: var(--serif-italic); font-style: italic;
    font-size: 14px; color: var(--stone);
    line-height: 1.4;
}
.mpp-signature-text strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   Sections génériques (eyebrow + title + sub)
   ============================================================ */
.mpp-section-eyebrow {
    font-family: var(--sans); font-size: 11px;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 18px;
    display: inline-flex; align-items: center; gap: 14px;
}
.mpp-section-eyebrow::before,
.mpp-section-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--forest); }
.mpp-section-eyebrow.left-only::after { display: none; }

.mpp-section-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(34px, 4.5vw, 56px);
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 16px;
}
.mpp-section-title em {
    font-family: var(--serif-italic); font-style: italic;
    color: var(--forest); font-weight: 500;
}
.mpp-section-sub {
    font-family: var(--serif-italic); font-style: italic;
    font-size: 17px;
    color: var(--stone);
    max-width: 580px; margin: 0 auto;
    line-height: 1.5;
}

/* ============================================================
   Occasions (5 cards)
   ============================================================ */
.mpp-occasions {
    padding: var(--section-gap) var(--gutter);
    max-width: 1700px; margin: 0 auto;
}
.mpp-occasions-header { text-align: center; margin-bottom: 60px; }
.mpp-occasions-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
@media (max-width: 900px) {
    .mpp-occasions-grid { grid-template-columns: repeat(2, 1fr); }
}
.mpp-occasion-card {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--bone);
    cursor: pointer;
}
.mpp-occasion-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,0.85) 100%);
    z-index: 1;
}
.mpp-occasion-card .bg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-style: italic;
    font-size: 90px;
    color: rgba(255,255,255,0.08);
    transition: transform 0.8s var(--ease-out);
}
.mpp-occasion-card:hover .bg { transform: scale(1.15); }
/* Cards SANS image — gradient fallback charte verte */
.mpp-occasion-card:not(.has-image).occ-1 { background: linear-gradient(135deg, #2C3E36 0%, #1B3328 100%); }
.mpp-occasion-card:not(.has-image).occ-2 { background: linear-gradient(135deg, #2A2A2A 0%, #0A0A0A 100%); }
.mpp-occasion-card:not(.has-image).occ-3 { background: linear-gradient(135deg, #1B3328 0%, #0F1E16 100%); }
.mpp-occasion-card:not(.has-image).occ-4 { background: linear-gradient(135deg, #2D4A3C 0%, #1B3328 100%); }
.mpp-occasion-card:not(.has-image).occ-5 { background: linear-gradient(135deg, #161616 0%, #2A2A2A 100%); }
/* Cards AVEC image — pas de lettre filigrane, overlay plus léger pour rester clair */
.mpp-occasion-card.has-image .bg { display: none; }
.mpp-occasion-card.has-image::after {
    background: linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,0.55) 75%, rgba(10,10,10,0.85) 100%);
}
.mpp-occasion-card .label {
    position: absolute; bottom: 24px; left: 22px; right: 22px;
    z-index: 2;
    color: var(--white);
}
.mpp-occasion-card .label strong {
    display: block;
    font-family: var(--serif); font-weight: 400;
    font-size: 19px; margin-bottom: 4px;
    letter-spacing: -0.005em;
}
.mpp-occasion-card .label strong em {
    font-family: var(--serif-italic); font-style: italic;
    color: rgba(255,255,255,0.85);
}
.mpp-occasion-card .label span {
    font-family: var(--serif-italic); font-style: italic;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

/* ============================================================
   Style tips (look book noir)
   ============================================================ */
.mpp-style-tips {
    background: var(--black); color: var(--white);
    padding: var(--section-gap) var(--gutter);
    position: relative; overflow: hidden;
}
.mpp-style-tips::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(27,51,40,0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(27,51,40,0.2) 0%, transparent 50%);
    pointer-events: none;
}
.mpp-tips-inner {
    max-width: 1500px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    position: relative; z-index: 1;
}
@media (max-width: 900px) {
    .mpp-tips-inner { grid-template-columns: 1fr; gap: 50px; }
}
.mpp-tips-heading .mpp-section-eyebrow { color: var(--forest-soft); }
.mpp-tips-heading .mpp-section-eyebrow::before,
.mpp-tips-heading .mpp-section-eyebrow::after { background: var(--forest-soft); }
.mpp-tips-heading .mpp-section-title { color: var(--white); margin-bottom: 24px; text-align: left; }
.mpp-tips-heading .mpp-section-title em { color: var(--forest-soft); }
.mpp-tips-heading p {
    font-family: var(--serif-italic); font-style: italic;
    font-size: 17px; line-height: 1.55;
    color: rgba(255,255,255,0.65);
    text-align: left; margin: 0;
}
.mpp-tips-list { display: grid; gap: 4px; }
.mpp-tip {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mpp-tip:last-child { border-bottom: none; }
.mpp-tip-num {
    font-family: var(--serif); font-style: italic;
    font-size: 38px;
    color: var(--forest-soft);
    font-weight: 500;
    line-height: 1;
    min-width: 56px;
}
.mpp-tip-content h3 {
    font-family: var(--serif); font-weight: 400;
    font-size: 20px;
    color: var(--white); margin-bottom: 8px;
    letter-spacing: -0.005em;
}
.mpp-tip-content h3 em {
    font-family: var(--serif-italic); font-style: italic;
    color: var(--forest-soft);
}
.mpp-tip-content p {
    font-family: var(--sans); font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255,255,255,0.65);
}

/* ============================================================
   FAQ
   ============================================================ */
.mpp-faq {
    padding: var(--section-gap) var(--gutter);
    max-width: 1100px; margin: 0 auto;
}
.mpp-faq-header { text-align: center; margin-bottom: 56px; }
.mpp-faq-list { border-top: 1px solid var(--line); }
.mpp-faq-item { border-bottom: 1px solid var(--line); }
.mpp-faq-q {
    width: 100%;
    background: transparent; border: none;
    padding: 28px 0;
    text-align: left;
    cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(18px, 2vw, 23px);
    color: var(--ink);
    transition: color 0.3s var(--ease);
    letter-spacing: -0.005em;
}
.mpp-faq-q:hover { color: var(--forest); }
.mpp-faq-q .icon {
    width: 32px; height: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-left: 16px;
    transition: all 0.4s var(--ease);
    position: relative;
}
.mpp-faq-q .icon::before,
.mpp-faq-q .icon::after {
    content: ''; position: absolute;
    background: var(--ink);
    transition: all 0.3s var(--ease);
}
.mpp-faq-q .icon::before { width: 12px; height: 1px; }
.mpp-faq-q .icon::after  { width: 1px; height: 12px; }
.mpp-faq-item.open .mpp-faq-q .icon {
    background: var(--forest); border-color: var(--forest);
    transform: rotate(180deg);
}
.mpp-faq-item.open .mpp-faq-q .icon::before,
.mpp-faq-item.open .mpp-faq-q .icon::after { background: var(--white); }
.mpp-faq-item.open .mpp-faq-q .icon::after { height: 0; }
.mpp-faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height 0.5s var(--ease);
}
.mpp-faq-item.open .mpp-faq-a { max-height: 600px; }
.mpp-faq-a-inner {
    padding: 0 0 28px;
    font-family: var(--serif-italic); font-style: italic;
    font-size: 16px; line-height: 1.7;
    color: var(--graphite);
    max-width: 90%;
}

/* ============================================================
   Similar products
   ============================================================ */
.mpp-similar {
    padding: var(--section-gap) var(--gutter);
    max-width: 1700px; margin: 0 auto;
}
.mpp-similar-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 48px;
    flex-wrap: wrap; gap: 20px;
}
.mpp-similar-link {
    font-family: var(--serif-italic); font-style: italic;
    font-size: 17px;
    color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 4px;
    display: inline-flex; align-items: center; gap: 10px;
    transition: all 0.3s var(--ease);
    white-space: nowrap;
}
.mpp-similar-link:hover {
    color: var(--forest);
    border-bottom-color: var(--forest);
    gap: 16px;
}
.mpp-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px;
}
@media (max-width: 900px) {
    .mpp-products-grid { grid-template-columns: repeat(2, 1fr); }
}
.mpp-product-card {
    cursor: pointer; text-decoration: none;
    color: inherit; display: block;
}
.mpp-product-card-image {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--bone);
    overflow: hidden;
    margin-bottom: 18px;
}
.mpp-product-card-image .pi-bg,
.mpp-product-card-image .pi-bg-2 {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.mpp-product-card-image .pi-bg {
    transition: opacity 0.6s var(--ease), transform 1.4s var(--ease-out);
}
.mpp-product-card-image .pi-bg-2 {
    opacity: 0;
    transition: opacity 0.6s var(--ease);
}
.mpp-product-card:hover .pi-bg-2 { opacity: 1; }
.mpp-product-card:hover .pi-bg  { transform: scale(1.04); }

.mpp-card-tag {
    position: absolute; top: 16px; left: 16px;
    background: var(--white); color: var(--forest);
    font-family: var(--sans); font-size: 9px;
    letter-spacing: 0.28em; text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid var(--forest);
    z-index: 2;
}
.mpp-card-tag.dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.mpp-card-fav {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: var(--white); border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    transition: all 0.3s var(--ease);
    opacity: 0;
    transform: translateY(-6px);
}
.mpp-product-card:hover .mpp-card-fav {
    opacity: 1; transform: translateY(0);
}
.mpp-card-fav:hover { background: var(--forest); color: var(--white); }
.mpp-card-fav svg { width: 14px; height: 14px; stroke-width: 1.4; }

.mpp-card-quick {
    position: absolute; bottom: 16px; left: 16px; right: 16px;
    background: var(--white); color: var(--ink);
    border: none;
    font-family: var(--sans); font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase;
    padding: 14px;
    cursor: pointer;
    opacity: 0; transform: translateY(10px);
    transition: all 0.4s var(--ease);
    z-index: 2;
}
.mpp-product-card:hover .mpp-card-quick {
    opacity: 1; transform: translateY(0);
}
.mpp-card-quick:hover { background: var(--ink); color: var(--white); }

.mpp-product-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}
.mpp-product-card-name {
    font-family: var(--serif); font-weight: 400;
    font-size: 17px; color: var(--ink);
    line-height: 1.3;
    letter-spacing: -0.005em;
}
.mpp-product-card-price {
    font-family: var(--sans); font-size: 13px; font-weight: 500;
    color: var(--ink); white-space: nowrap;
}
.mpp-product-card-house {
    font-family: var(--serif-italic); font-style: italic;
    font-size: 13px; color: var(--stone);
    margin-bottom: 8px;
}

/* ============================================================
   Engagement (3 piliers)
   ============================================================ */
.mpp-engagement {
    padding: var(--section-gap) var(--gutter);
    max-width: 1500px; margin: 0 auto;
    text-align: center;
}
.mpp-engagement-mark {
    font-family: var(--serif); font-style: italic;
    font-size: 80px; color: var(--forest);
    line-height: 1; margin-bottom: 32px;
    font-weight: 500;
}
.mpp-engagement h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.1;
    color: var(--ink); margin-bottom: 28px;
    letter-spacing: -0.015em;
    max-width: 1000px; margin-left: auto; margin-right: auto;
}
.mpp-engagement h2 em {
    font-family: var(--serif-italic); font-style: italic;
    color: var(--forest);
}
.mpp-engagement-lead {
    font-family: var(--serif-italic); font-style: italic;
    font-size: 18px; line-height: 1.55;
    color: var(--graphite);
    max-width: 720px; margin: 0 auto 80px;
}
.mpp-eng-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    text-align: left;
    margin-top: 60px;
}
@media (max-width: 900px) {
    .mpp-eng-pillars { grid-template-columns: 1fr; gap: 40px; }
}
.mpp-pillar {
    position: relative;
    padding-left: 40px;
    border-left: 1px solid var(--forest);
}
.mpp-pillar-num {
    position: absolute; top: -8px; left: 40px;
    font-family: var(--serif); font-style: italic;
    font-size: 14px; color: var(--forest);
    background: var(--white);
    padding: 0 12px;
    font-weight: 500;
}
.mpp-pillar h3 {
    font-family: var(--serif); font-weight: 400;
    font-size: 22px;
    color: var(--ink);
    margin-bottom: 12px; margin-top: 12px;
    letter-spacing: -0.005em;
}
.mpp-pillar h3 em {
    font-family: var(--serif-italic); font-style: italic;
    color: var(--forest);
}
.mpp-pillar p {
    font-family: var(--sans); font-size: 14px;
    line-height: 1.7;
    color: var(--graphite);
}
.mpp-eng-flags {
    margin-top: 80px;
    display: flex; justify-content: center;
    gap: 48px; flex-wrap: wrap;
    padding-top: 48px;
    border-top: 1px solid var(--line);
}
.mpp-eng-flag {
    font-family: var(--sans); font-size: 11px;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--graphite);
    display: flex; align-items: center; gap: 10px;
}
.mpp-eng-flag::before {
    content: ''; width: 6px; height: 6px;
    background: var(--forest); border-radius: 50%;
    flex-shrink: 0;
}

/* ============================================================
   Mobile CTA bar
   ============================================================ */
.mpp-mobile-cta-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--line);
    padding: 12px var(--gutter);
    display: none;
    align-items: center; gap: 16px;
    z-index: 99;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.04);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.mpp-mobile-cta-bar.visible { display: flex; }
.mpp-mobile-price {
    font-family: var(--serif); font-size: 22px;
    color: var(--ink);
    flex-shrink: 0;
}
.mpp-mobile-add {
    flex: 1;
    background: var(--ink); color: var(--white);
    border: none;
    padding: 14px 0;
    font-family: var(--sans); font-size: 11px;
    letter-spacing: 0.24em; text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s var(--ease);
}
.mpp-mobile-add:hover { background: var(--forest); }
@media (min-width: 1025px) {
    .mpp-mobile-cta-bar { display: none !important; }
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes mpp-fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mpp-product-page [data-animate] {
    opacity: 0;
    animation: mpp-fadeUp 1s var(--ease-out) forwards;
}
.mpp-product-page [data-animate="1"] { animation-delay: 0.1s; }
.mpp-product-page [data-animate="2"] { animation-delay: 0.25s; }
.mpp-product-page [data-animate="3"] { animation-delay: 0.4s; }
.mpp-product-page [data-animate="4"] { animation-delay: 0.55s; }

/* ============================================================
   Mobile responsive overrides
   ============================================================ */
@media (max-width: 600px) {
    .mpp-cta-row { grid-template-columns: 1fr auto; }
    .mpp-qty-selector { grid-column: 1 / -1; }
    .mpp-sizes { grid-template-columns: repeat(4, 1fr); }
    .mpp-guarantees { grid-template-columns: 1fr; }
}