et le peuvent toujours avoir des max-width. On force donc 100vw via negative margin sur toutes les V2 sections. */ .me-v2-hero, .me-v2-manifest, .me-v2-brand-story, .me-v2-pillars, .me-v2-brandstrip, .me-v2-pstrip, .me-v2-spread, .me-v2-section, .me-v2-verticals, .me-v2-journal { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); position:relative; box-sizing:border-box; } /* Pages V2 (template page-blank) — supprime padding par défaut */ body.page-template-page-blank #content.content-area { padding:0 !important; margin:0 !important; max-width:none !important; } body.page-template-page-blank #main { padding:0 !important; margin:0 !important; } body.page-template-page-blank .page-title, body.page-template-page-blank .page-title-inner, body.page-template-page-blank .page-header-wrapper { display:none !important; } /* Pages Woo (account / cart / checkout) — Flatsome wrappe le contenu dans une grille .row .large-12 col .col-inner avec max-width:1080px. On force le full-bleed pour que nos sections V2 occupent tout l'écran. */ body.woocommerce-account #content, body.woocommerce-cart #content, body.woocommerce-checkout #content, body.search #content, body.error404 #content { padding:0 !important; max-width:none !important; } body.woocommerce-account #content > .row, body.woocommerce-cart #content > .row, body.woocommerce-checkout #content > .row, body.search #content > .row, body.error404 #content > .row { max-width:none !important; padding:0 !important; margin:0 !important; } body.woocommerce-account #content > .row > .large-12, body.woocommerce-cart #content > .row > .large-12, body.woocommerce-checkout #content > .row > .large-12, body.search #content > .row > .large-12, body.error404 #content > .row > .large-12 { padding:0 !important; } body.woocommerce-account #content > .row > .large-12 > .col-inner, body.woocommerce-cart #content > .row > .large-12 > .col-inner, body.woocommerce-checkout #content > .row > .large-12 > .col-inner, body.search #content > .row > .large-12 > .col-inner, body.error404 #content > .row > .large-12 > .col-inner { max-width:none !important; padding:0 !important; } body.woocommerce-account .page-title, body.woocommerce-account .page-title-inner, body.woocommerce-account .page-header-wrapper, body.woocommerce-cart .page-title, body.woocommerce-cart .page-title-inner, body.woocommerce-cart .page-header-wrapper, body.woocommerce-checkout .page-title, body.woocommerce-checkout .page-title-inner, body.woocommerce-checkout .page-header-wrapper, body.search .page-title, body.search .page-title-inner, body.search .page-header-wrapper { display:none !important; } /* ── Helpers shared (sections / wrap / serif) ───────────────────────── */ .me-v2-section { padding:80px 0; } .me-v2-section--xl { padding:128px 0; } .me-v2-section--alt { background:var(--me-paper-2); } .me-v2-wrap { max-width:1320px; margin:0 auto; padding:0 32px; } .me-v2-wrap--narrow { max-width:920px; } .me-v2-eyebrow { font-family:var(--me-sans); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--me-gold); font-weight:600; display:inline-block; } .me-v2-eyebrow--ink { color:var(--me-ink-3); } .me-v2-eyebrow--white { color:rgba(255,255,255,.85); } .me-v2-divider { width:36px; height:1px; background:var(--me-gold); opacity:.6; margin:20px auto; } .me-v2-arrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--me-sans); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--me-ink); border-bottom:1px solid var(--me-gold); padding-bottom:4px; font-weight:500; transition:color 200ms var(--me-ease); } .me-v2-arrow:hover { color:var(--me-gold); } /* ── Hero V2 — pleine page, image dominante, copy minimal ───────────── */ .me-v2-hero { position:relative; min-height:88vh; background: linear-gradient(180deg, rgba(20,18,15,.32), rgba(20,18,15,.65)), linear-gradient(135deg, #d4b69a, #8a6c52 50%, #2f2620); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; } .me-v2-hero--bg-light { background: linear-gradient(180deg, rgba(255,253,247,.0), rgba(20,18,15,.45)), linear-gradient(135deg, #efe5d2, #c8a76a 60%, #5a4530); } .me-v2-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 75% 30%, rgba(184,146,58,.08), transparent 55%); pointer-events:none; } .me-v2-hero__inner { position:relative; z-index:2; max-width:1100px; margin:0 auto; padding:0 32px 96px; text-align:center; } .me-v2-hero .me-v2-eyebrow { color:rgba(255,255,255,.78); margin-bottom:24px; } .me-v2-hero__title { font-family:var(--me-serif); font-weight:300; font-size:84px; line-height:1.02; letter-spacing:.005em; margin:0 auto 24px; max-width:880px; color:#fff; } .me-v2-hero__title em { font-style:italic; color:var(--me-gold); } .me-v2-hero__lead { font-family:var(--me-sans); font-size:17px; line-height:1.75; color:rgba(255,255,255,.78); font-weight:300; max-width:540px; margin:0 auto 40px; } .me-v2-hero__cta { display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; } .me-v2-btn { display:inline-block; padding:14px 36px; background:transparent; color:#fff; font-family:var(--me-sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; border:1px solid #fff; border-radius:2px; transition:all 200ms var(--me-ease); } .me-v2-btn:hover { background:#fff; color:var(--me-ink); } .me-v2-btn--ink { background:var(--me-ink); color:#fff; border-color:var(--me-ink); } .me-v2-btn--ink:hover { background:var(--me-gold); border-color:var(--me-gold); } .me-v2-btn--ghost { color:var(--me-ink); border-color:var(--me-ink); } .me-v2-btn--ghost:hover { background:var(--me-ink); color:#fff; } @media (max-width:1024px){ .me-v2-hero__title { font-size:60px; } .me-v2-hero { min-height:72vh; } } @media (max-width:768px){ .me-v2-hero__title { font-size:42px; } .me-v2-hero__inner { padding:0 20px 48px; } } /* ── Spread éditorial : 1 image grand format + 1 paragraphe ─────────── */ .me-v2-spread { padding:128px 0; display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:center; max-width:1280px; margin:0 auto; padding-left:32px; padding-right:32px; } .me-v2-spread__visual { aspect-ratio:4/5; background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.32)), linear-gradient(135deg, #caa978, #8a6f2d 70%, #3a2f25); position:relative; overflow:hidden; } .me-v2-spread__visual img { width:100%; height:100%; object-fit:cover; display:block; } .me-v2-spread__copy { padding-right:24px; } .me-v2-spread__copy .me-v2-eyebrow { margin-bottom:20px; } .me-v2-spread__title { font-family:var(--me-serif); font-weight:300; font-size:54px; line-height:1.05; letter-spacing:.005em; margin:0 0 24px; } .me-v2-spread__copy p { font-size:17px; line-height:1.85; color:var(--me-ink-2); font-weight:300; margin:0 0 24px; max-width:460px; } @media (max-width:1024px){ .me-v2-spread { grid-template-columns:1fr; gap:48px; padding:80px 32px; } .me-v2-spread__title { font-size:38px; } } /* ── Manifeste centré ───────────────────────────────────────────────── */ .me-v2-manifest { background:var(--me-paper-2); padding:128px 0; text-align:center; } .me-v2-manifest__inner { max-width:740px; margin:0 auto; padding:0 32px; } .me-v2-manifest__eyebrow { display:inline-block; margin-bottom:20px; color:var(--me-gold); } .me-v2-manifest__quote { font-family:var(--me-serif); font-weight:300; font-style:italic; font-size:36px; line-height:1.5; letter-spacing:.005em; color:var(--me-ink-2); margin:0; } .me-v2-manifest__quote em { color:var(--me-gold); font-style:italic; } .me-v2-manifest__sign { margin-top:48px; font-family:var(--me-serif); font-size:19px; font-weight:400; color:var(--me-ink); letter-spacing:.04em; } .me-v2-manifest__sign small { display:block; font-family:var(--me-sans); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--me-ink-4); font-weight:500; margin-top:6px; } @media (max-width:768px){ .me-v2-manifest { padding:80px 0; } .me-v2-manifest__quote { font-size:24px; } } /* ── Strip produit (4 produits, image only) ─────────────────────────── */ .me-v2-pstrip { padding:80px 0 96px; } .me-v2-pstrip__head { text-align:center; max-width:760px; margin:0 auto 48px; padding:0 32px; } .me-v2-pstrip__head .me-v2-eyebrow { display:inline-block; margin-bottom:12px; } .me-v2-pstrip__title { font-family:var(--me-serif); font-size:42px; font-weight:300; } .me-v2-pstrip__grid { max-width:1280px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } @media (max-width:1024px){ .me-v2-pstrip__grid { grid-template-columns:repeat(2,1fr); } } .me-v2-pcard { display:flex; flex-direction:column; } .me-v2-pcard__img { aspect-ratio:3/4; background:linear-gradient(135deg, var(--me-paper-2), var(--me-paper-3)); position:relative; overflow:hidden; transition:filter 400ms var(--me-ease); } .me-v2-pcard__img img { width:100%; height:100%; object-fit:cover; display:block; } .me-v2-pcard:hover .me-v2-pcard__img { filter:brightness(1.04); } .me-v2-pcard__body { padding:16px 0; } .me-v2-pcard__brand { font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--me-gold); font-weight:600; margin-bottom:6px; } .me-v2-pcard__name { font-family:var(--me-serif); font-size:18px; font-weight:400; color:var(--me-ink); margin-bottom:6px; line-height:1.35; } .me-v2-pcard__price { font-size:13px; color:var(--me-ink-2); letter-spacing:.04em; font-weight:500; } /* ── Trois piliers (réassurance) — light, sans icônes lourdes ───────── */ .me-v2-pillars { background:var(--me-paper-2); padding:48px 0; border-top:1px solid var(--me-line); } .me-v2-pillars__inner { max-width:1080px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(3,1fr); gap:48px; } .me-v2-pillars__item { text-align:center; padding:0 12px; } .me-v2-pillars__rule { width:24px; height:1px; background:var(--me-gold); margin:0 auto 16px; } .me-v2-pillars__item h6 { font-family:var(--me-serif); font-size:18px; font-weight:400; margin-bottom:6px; color:var(--me-ink); } .me-v2-pillars__item p { font-size:13px; color:var(--me-ink-3); font-weight:300; max-width:280px; margin:0 auto; line-height:1.65; } @media (max-width:768px){ .me-v2-pillars__inner { grid-template-columns:1fr; gap:32px; } } /* ── Brand strip (sous le header) ────────────────────────────────────── */ .me-v2-brandstrip { background:var(--me-paper); border-bottom:1px solid var(--me-line); padding:20px 0; } .me-v2-brandstrip__inner { max-width:1280px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:32px; } .me-v2-brandstrip__label { font-family:var(--me-sans); font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:var(--me-ink-4); font-weight:600; white-space:nowrap; } .me-v2-brandstrip__list { display:flex; gap:40px; justify-content:flex-end; flex-wrap:wrap; } .me-v2-brandstrip__list a { font-family:var(--me-serif); font-size:18px; font-weight:300; color:var(--me-ink-3); letter-spacing:.04em; transition:color 200ms var(--me-ease); } .me-v2-brandstrip__list a:hover { color:var(--me-ink); } .me-v2-brandstrip__list a.me-v2-brandstrip__all { color:var(--me-gold); } @media (max-width:768px){ .me-v2-brandstrip__inner { grid-template-columns:1fr; } .me-v2-brandstrip__list { gap:20px; justify-content:center; } } /* ── Verticals (3 univers tiles) ─────────────────────────────────────── */ .me-v2-verticals { padding:80px 0; } .me-v2-verticals__head { text-align:center; margin-bottom:40px; padding:0 32px; } .me-v2-verticals__title { font-family:var(--me-serif); font-size:42px; font-weight:300; margin-top:12px; } .me-v2-verticals__grid { max-width:1280px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .me-v2-vcard { aspect-ratio:3/4; padding:32px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; transition:transform 400ms var(--me-ease); text-decoration:none; } .me-v2-vcard:hover { transform:translateY(-2px); color:#fff; } .me-v2-vcard--femme { background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55)),linear-gradient(135deg,#d4b69a,#8a6c52); } .me-v2-vcard--homme { background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.6)),linear-gradient(135deg,#5a4a3a,#2a2520); } .me-v2-vcard--bagagerie { background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55)),linear-gradient(135deg,#a8a09a,#4a4540); } .me-v2-vcard .me-v2-eyebrow { display:block; margin-bottom:8px; } .me-v2-vcard__title { font-family:var(--me-serif); font-size:42px; font-weight:300; margin:0 0 8px; color:#fff; line-height:1.1; } .me-v2-vcard p { font-size:13px; color:rgba(255,255,255,.85); margin-bottom:16px; max-width:280px; } .me-v2-vcard__cta { font-family:var(--me-sans); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#fff; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:3px; align-self:flex-start; } @media (max-width:1024px){ .me-v2-verticals__grid { grid-template-columns:1fr; } .me-v2-vcard { aspect-ratio:16/10; } } /* ── Journal (3 cards) ───────────────────────────────────────────────── */ .me-v2-journal { padding:80px 0; } .me-v2-journal__head { text-align:center; max-width:680px; margin:0 auto 48px; padding:0 32px; } .me-v2-journal__title { font-family:var(--me-serif); font-size:42px; font-weight:300; margin-top:12px; } .me-v2-journal__lead { font-size:17px; line-height:1.7; color:var(--me-ink-2); font-weight:300; margin-top:16px; } .me-v2-journal__grid { max-width:1280px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .me-v2-jcard { display:flex; flex-direction:column; } .me-v2-jcard__img { aspect-ratio:4/3; display:block; overflow:hidden; background:linear-gradient(135deg,var(--me-paper-2),var(--me-paper-3)); } .me-v2-jcard__img img { width:100%; height:100%; object-fit:cover; display:block; } .me-v2-jcard__body { padding:20px 0; } .me-v2-jcard__cat { font-family:var(--me-sans); font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--me-gold); font-weight:600; } .me-v2-jcard__title { font-family:var(--me-serif); font-size:22px; font-weight:400; line-height:1.3; margin:6px 0 12px; } .me-v2-jcard__title a { color:var(--me-ink); transition:color 200ms var(--me-ease); } .me-v2-jcard__title a:hover { color:var(--me-gold); } .me-v2-jcard__excerpt { font-size:13px; color:var(--me-ink-3); line-height:1.6; margin-bottom:12px; } .me-v2-journal__more { text-align:center; margin-top:48px; padding:0 32px; } @media (max-width:1024px){ .me-v2-journal__grid { grid-template-columns:1fr; } } /* ── Brand story (full-bleed dark) ──────────────────────────────────── */ .me-v2-brand-story { background:linear-gradient(135deg,#1a1a1a,#3a2f25); color:#fff; position:relative; overflow:hidden; padding:96px 0; } .me-v2-brand-story::after { content:""; position:absolute; right:-15%; bottom:-15%; width:50%; height:130%; background:radial-gradient(ellipse, rgba(184,146,58,.18), transparent 70%); pointer-events:none; } .me-v2-brand-story__inner { position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:center; } .me-v2-brand-story__copy .me-v2-eyebrow { color:var(--me-gold); display:block; margin-bottom:12px; } .me-v2-brand-story__title { font-family:var(--me-serif); font-size:54px; font-weight:300; line-height:1.05; margin:0 0 20px; color:#fff; } .me-v2-brand-story__copy p { font-size:16px; line-height:1.75; color:rgba(255,255,255,.78); margin:0 0 24px; max-width:420px; font-weight:300; } .me-v2-brand-story__copy .me-v2-btn { border-color:#fff; color:#fff; background:transparent; } .me-v2-brand-story__copy .me-v2-btn:hover { background:#fff; color:var(--me-ink); } .me-v2-brand-story__visual { aspect-ratio:5/4; position:relative; background:linear-gradient(135deg,#caa978, #5a4a3a 100%); overflow:hidden; } .me-v2-brand-story__visual::after { content:attr(data-mark); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--me-serif); font-size:280px; font-weight:300; color:rgba(255,255,255,.08); } @media (max-width:1024px){ .me-v2-brand-story__inner { grid-template-columns:1fr; gap:32px; } .me-v2-brand-story__title { font-size:38px; } } /* ── Generic section wrapper ────────────────────────────────────────── */ .me-v2-section--narrow .me-v2-section__head { max-width:680px; margin-left:auto; margin-right:auto; } .me-v2-section__head { text-align:center; max-width:760px; margin:0 auto 48px; } .me-v2-section__title { font-family:var(--me-serif); font-size:42px; font-weight:300; margin-top:12px; } .me-v2-section__lead { font-size:17px; line-height:1.7; color:var(--me-ink-2); font-weight:300; max-width:600px; margin:16px auto 0; } /* ── Flatsome chrome alignment (V2 quiet luxury) ────────────────────── */ .flatsome-shop a:hover, .product-small a:hover { color:var(--me-gold); } .product-small.box .price-wrapper .price { font-family:var(--me-sans); font-size:13px; letter-spacing:.04em; font-weight:500; color:var(--me-ink-2); } .product-small.box .price-wrapper del .amount { color:var(--me-ink-4); font-weight:400; } .product-small.box .price-wrapper ins { background:transparent; text-decoration:none; } .product-small .name a { font-family:var(--me-serif); font-size:18px; font-weight:400; color:var(--me-ink); line-height:1.35; } .product-small .name a:hover { color:var(--me-gold); } /* Brand eyebrow injected by maisonelite_loop_brand_eyebrow() */ .me-v2-loop-brand { display:block; font-family:var(--me-sans); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--me-gold); font-weight:600; margin-bottom:6px; } /* Hover : subtle brightness, no shadow lift */ .box-shadow-on-hover .box-image, .product-small .box-image, .product-small img { transition:filter 400ms var(--me-ease); } .box-shadow-on-hover:hover { box-shadow:none !important; } .box-shadow-on-hover:hover .box-image, .product-small:hover .box-image, .product-small:hover img { filter:brightness(1.04); } /* Sale badge → discreet gold pill instead of red rectangle */ .product-small .badge-container .badge, .onsale { background:transparent !important; color:var(--me-gold) !important; border:1px solid var(--me-gold); border-radius:0; font-family:var(--me-sans); font-size:9px; letter-spacing:.28em; text-transform:uppercase; font-weight:600; padding:4px 10px; } /* WooCommerce single product : title in serif, gold eyebrow brand */ .single-product .product_title.entry-title { font-family:var(--me-serif); font-weight:300; font-size:42px; letter-spacing:.005em; margin-bottom:12px; } @media (max-width:768px){ .single-product .product_title.entry-title { font-size:28px; } } .single-product .product .price { font-family:var(--me-sans); font-size:18px; font-weight:500; color:var(--me-ink); letter-spacing:.04em; } .single-product .woocommerce-product-details__short-description { font-size:15px; line-height:1.75; color:var(--me-ink-2); font-weight:300; } /* Buttons : flatsome → V2 (square, dark, gold hover) */ .button.primary, button.primary, .button--primary, .is-outline.primary, .button.alt { background:var(--me-ink) !important; border:1px solid var(--me-ink) !important; border-radius:2px !important; color:#fff !important; font-family:var(--me-sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; transition:all 200ms var(--me-ease) !important; } .button.primary:hover, button.primary:hover, .button--primary:hover, .is-outline.primary:hover, .button.alt:hover { background:var(--me-gold) !important; border-color:var(--me-gold) !important; } .me-breadcrumb-sep { color:var(--me-ink-4); padding:0 6px; } /* ── PDP V2 — eyebrow brand · category ──────────────────────────────── */ .me-v2-pdp-eyebrow { font-family:var(--me-sans); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--me-gold); font-weight:600; margin-bottom:14px; } /* ── PDP V2 — reassurance pillars stack (sous le prix) ──────────────── */ .me-v2-pdp-reassurance { list-style:none; margin:32px 0 24px; padding:0; border-top:1px solid var(--me-line); border-bottom:1px solid var(--me-line); } .me-v2-pdp-reassurance li { display:grid; grid-template-columns:auto 1fr; gap:16px 14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--me-line); font-size:13px; line-height:1.6; } .me-v2-pdp-reassurance li:last-child { border-bottom:0; } .me-v2-pdp-reassurance__rule { width:24px; height:1px; background:var(--me-gold); margin-top:10px; grid-row:span 2; } .me-v2-pdp-reassurance strong { font-family:var(--me-serif); font-size:16px; font-weight:400; color:var(--me-ink); display:block; } .me-v2-pdp-reassurance span { color:var(--me-ink-3); font-size:13px; font-weight:300; line-height:1.6; } /* ── Logo wordmark — Cormorant Garamond + sub Inter caps ─────────────── */ /* Le slot Flatsome `.flex-col.logo` impose son propre flex-direction. On force notre wordmark à se centrer + ne pas wrap. */ #logo.flex-col.logo { flex-direction:column !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:240px; padding:0 16px; } #logo.flex-col.logo > a { width:auto !important; } .me-v2-wordmark { display:flex !important; flex-direction:column !important; align-items:center !important; gap:2px; text-decoration:none; line-height:1; max-width:none !important; height:auto !important; white-space:nowrap; } .me-v2-wordmark img { display:none !important; } /* hide any fallback image */ .me-v2-wordmark__name { font-family:var(--me-serif) !important; font-weight:400 !important; font-style:normal !important; font-size:24px !important; letter-spacing:.18em !important; color:var(--me-ink) !important; white-space:nowrap !important; text-transform:uppercase !important; /* mockup style : MAISON ELITE caps */ line-height:1.1 !important; transition:color 200ms var(--me-ease); } .me-v2-wordmark:hover .me-v2-wordmark__name { color:var(--me-gold) !important; } .me-v2-wordmark__sub { font-family:var(--me-sans) !important; font-size:9px !important; letter-spacing:.34em !important; text-transform:uppercase !important; color:var(--me-ink-4) !important; font-weight:500 !important; margin-top:4px !important; white-space:nowrap; } /* Hide any leftover .me-logo-sub injected by me-storefront */ #logo .me-logo-sub { display:none !important; } /* Hide Flatsome's tagline if it sneaks in */ #logo .logo-tagline, #logo h1.logo-tagline { display:none !important; } @media (max-width:768px){ .me-v2-wordmark__name { font-size:20px !important; } .me-v2-wordmark__sub { font-size:8px !important; } #logo.flex-col.logo { min-width:160px; padding:0 8px; } } /* ── Archive header (catégorie / marque) V2 ─────────────────────────── */ .me-v2-archive-header { text-align:center; padding:48px 24px 32px; border-bottom:1px solid var(--me-line); background:var(--me-paper); } .me-v2-archive-header__title { font-family:var(--me-serif); font-weight:300; font-size:54px; line-height:1.1; letter-spacing:.005em; margin:12px auto 16px; color:var(--me-ink); } .me-v2-archive-header__lead { font-size:15px; line-height:1.7; color:var(--me-ink-2); font-weight:300; max-width:560px; margin:0 auto 12px; } .me-v2-archive-header__count { font-family:var(--me-sans); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--me-ink-4); font-weight:600; margin:0; } @media (max-width:768px){ .me-v2-archive-header__title { font-size:36px; } } /* ── WooCommerce Cart V2 ────────────────────────────────────────────── */ .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title, .woocommerce-account .entry-title { font-family:var(--me-serif); font-weight:300; font-size:42px; letter-spacing:.005em; } .woocommerce-cart table.cart { border:1px solid var(--me-line); font-family:var(--me-sans); } .woocommerce-cart table.cart th { font-family:var(--me-sans); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--me-ink-3); font-weight:600; padding:18px 16px; border-bottom:1px solid var(--me-line); background:var(--me-paper-2); } .woocommerce-cart table.cart td { border-bottom:1px solid var(--me-line); padding:24px 16px; vertical-align:middle; } .woocommerce-cart table.cart .product-name a { font-family:var(--me-serif); font-size:18px; font-weight:400; color:var(--me-ink); } .woocommerce-cart table.cart .product-name a:hover { color:var(--me-gold); } .woocommerce-cart .product-thumbnail img, .woocommerce-cart table.cart img { width:80px; height:auto; border:1px solid var(--me-line); } .woocommerce-cart .quantity .qty { border:1px solid var(--me-line); border-radius:0; font-family:var(--me-sans); font-size:13px; text-align:center; padding:8px; } .woocommerce-cart .actions { border-top:1px solid var(--me-line); background:var(--me-paper); } .woocommerce-cart .coupon input[type="text"] { border:1px solid var(--me-line); border-radius:0; padding:12px 16px; font-family:var(--me-sans); font-size:13px; } /* Cart totals box */ .woocommerce-cart .cart_totals { background:#fff; border:1px solid var(--me-line); padding:32px; } .woocommerce-cart .cart_totals h2 { font-family:var(--me-serif); font-weight:300; font-size:28px; margin:0 0 24px; padding-bottom:16px; border-bottom:1px solid var(--me-line); } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { font-family:var(--me-sans); font-size:13px; padding:12px 0; border:0; } .woocommerce-cart .cart_totals .order-total .amount { font-family:var(--me-serif); font-size:28px; font-weight:300; color:var(--me-gold); } .woocommerce-cart .checkout-button { font-family:var(--me-sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; background:var(--me-ink) !important; color:#fff !important; border:1px solid var(--me-ink) !important; border-radius:2px !important; padding:18px 36px !important; font-weight:500; } .woocommerce-cart .checkout-button:hover { background:var(--me-gold) !important; border-color:var(--me-gold) !important; } /* ── WooCommerce Checkout V2 ────────────────────────────────────────── */ .woocommerce-checkout #customer_details h3, .woocommerce-checkout #order_review_heading { font-family:var(--me-serif); font-weight:300; font-size:24px; letter-spacing:.005em; margin:0 0 24px; padding-bottom:12px; border-bottom:1px solid var(--me-line); } .woocommerce-checkout label { font-family:var(--me-sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--me-ink-3); font-weight:600; margin-bottom:6px; } .woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout input[type="number"], .woocommerce-checkout textarea, .woocommerce-checkout select { border:1px solid var(--me-line) !important; border-radius:0 !important; font-family:var(--me-sans); font-size:14px; padding:14px 16px !important; background:#fff; transition:border-color 200ms var(--me-ease); } .woocommerce-checkout input:focus, .woocommerce-checkout select:focus { border-color:var(--me-ink) !important; outline:0; box-shadow:none; } .woocommerce-checkout #order_review { background:#fff; border:1px solid var(--me-line); padding:32px; position:sticky; top:96px; } .woocommerce-checkout #order_review table.shop_table { border:0; } .woocommerce-checkout #order_review .order-total .amount { font-family:var(--me-serif); font-size:28px; font-weight:300; color:var(--me-gold); } .woocommerce-checkout #place_order { width:100%; background:var(--me-ink) !important; color:#fff !important; border:1px solid var(--me-ink) !important; border-radius:2px !important; font-family:var(--me-sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; padding:18px 36px !important; } .woocommerce-checkout #place_order:hover { background:var(--me-gold) !important; border-color:var(--me-gold) !important; } /* ── WooCommerce My Account V2 ──────────────────────────────────────── */ .woocommerce-MyAccount-navigation ul { list-style:none; padding:0; margin:0; border-top:1px solid var(--me-line); } .woocommerce-MyAccount-navigation li { border-bottom:1px solid var(--me-line); } .woocommerce-MyAccount-navigation a { display:block; padding:14px 0; font-family:var(--me-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--me-ink-3); font-weight:500; transition:color 200ms var(--me-ease); } .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation a:hover { color:var(--me-ink); } .woocommerce-MyAccount-navigation li.is-active a { border-left:2px solid var(--me-gold); padding-left:14px; } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-family:var(--me-serif); font-weight:300; letter-spacing:.005em; } /* ── Mobile rules for Woo pages (cart / checkout / account) ─────────── */ @media (max-width:768px){ .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title, .woocommerce-account .entry-title { font-size:30px; } /* Cart table : Woo's native mobile-stack layout (one row = block) */ .woocommerce-cart table.cart thead { display:none; } .woocommerce-cart table.cart tr { display:block; padding:20px 16px; border-bottom:1px solid var(--me-line); } .woocommerce-cart table.cart td { display:block; padding:6px 0; border:0; text-align:left; } .woocommerce-cart table.cart .product-thumbnail { float:left; margin-right:16px; } .woocommerce-cart table.cart .product-thumbnail img { width:64px; } .woocommerce-cart .cart_totals { padding:24px 20px; } .woocommerce-cart .cart_totals h2 { font-size:22px; } .woocommerce-cart .cart_totals .order-total .amount { font-size:24px; } /* Checkout : disable sticky aside, stack vertically */ .woocommerce-checkout #order_review { position:static !important; padding:24px 20px; margin-top:32px; } .woocommerce-checkout #customer_details h3, .woocommerce-checkout #order_review_heading { font-size:20px; } .woocommerce-checkout #order_review .order-total .amount { font-size:24px; } /* Account : sidebar nav passes above content */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width:100% !important; float:none !important; } .woocommerce-MyAccount-navigation { margin-bottom:32px; } .woocommerce-MyAccount-navigation a { padding:12px 0; font-size:10px; } } /* ── YITH Wishlist V2 ───────────────────────────────────────────────── */ .wishlist-title h2, .wishlist_table thead th { font-family:var(--me-serif); font-weight:300; } .wishlist_table { border:1px solid var(--me-line); font-family:var(--me-sans); } .wishlist_table thead th { font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--me-ink-3); font-weight:600; background:var(--me-paper-2); padding:18px 16px; } .wishlist_table .product-name a { font-family:var(--me-serif); font-size:18px; font-weight:400; color:var(--me-ink); } .wishlist_table .product-name a:hover { color:var(--me-gold); } /* ────────────────────────────────────────────────────────────────────── PIXEL-PERFECT HEADER (mockup spec : page-home-v2.html foundations) Tokens (all from mockup _shared.css) ──────────────────────────────────────────────────────────────────── */ /* Topbar — black bar, 11px caps, .18em tracking, padding 9px, max-w 1320 */ body .header-top { background:#1a1a1a !important; color:rgba(255,255,255,.78) !important; padding:0 !important; min-height:36px !important; height:36px !important; position:relative !important; line-height:1 !important; } body .header-top .header-inner { max-width:1320px !important; padding:0 32px !important; width:100% !important; margin:0 auto !important; min-height:36px !important; height:36px !important; display:flex !important; align-items:center !important; } body .header-top .flex-row.container, body .header-top .row { min-height:36px !important; height:36px !important; align-items:center !important; } /* The 3 messages span the full width, justify-content space-between */ body .header-top ul.nav-left, body .header-top ul.nav, body .header-top .flex-col.flex-left { width:100% !important; flex:1 1 100% !important; margin:0 !important; padding:0 !important; } body .header-top .flex-col.flex-center, body .header-top .flex-col.flex-right { display:none !important; } body .header-top ul.nav-left > li { width:100% !important; flex:1 1 100% !important; margin:0 !important; padding:0 !important; } body .header-top ul.nav-left > li::before, body .header-top ul.nav-left > li::after { display:none !important; content:none !important; } body .header-top .me-topbar-strip { display:grid !important; grid-template-columns:1fr 1fr 1fr !important; align-items:center !important; width:100% !important; /* Reserve space at the right edge so the language switcher (positioned * fixed at right:32px) never overlaps the rightmost message. The widest * label is "ENGLISH" (~64 px text + 24 px padding + 8 px gap to edge). */ padding-right:120px !important; } body .header-top .me-topbar-strip > span { font-family:"Inter",sans-serif !important; font-size:11px !important; letter-spacing:.22em !important; text-transform:uppercase !important; font-weight:500 !important; color:rgba(255,255,255,.78) !important; padding:0 !important; margin:0 !important; white-space:nowrap !important; position:relative !important; text-align:center !important; } body .header-top .me-topbar-strip > span:first-child { text-align:left !important; } body .header-top .me-topbar-strip > span:last-child { text-align:right !important; } /* No inter-cell separator — each cell is its own grid column. */ body .header-top .me-topbar-strip > span::before, body .header-top .me-topbar-strip > span::after { display:none !important; content:none !important; } /* Mobile : 3 messages 11px nowrap + 120px padding-right ne tient pas sur 390px. On garde uniquement le 1er message (concierge) centré, et on réduit la réserve droite pour le switcher EN qui devient compacte. */ @media (max-width:640px){ body .header-top .me-topbar-strip { grid-template-columns:1fr !important; padding-right:64px !important; } body .header-top .me-topbar-strip > span:nth-child(2), body .header-top .me-topbar-strip > span:nth-child(3) { display:none !important; } body .header-top .me-topbar-strip > span:first-child { text-align:center !important; font-size:9px !important; letter-spacing:.16em !important; } } /* Main header — Flatsome's native flex layout w/ logo-center. * Logo center is automatic when header has class `logo-center`. * We just style the colors / dimensions / max-width. */ body #masthead.header-main, body .header-main { background:#fdfbf6 !important; border-bottom:1px solid #e8e2d3 !important; height:80px !important; min-height:80px !important; } body .header-main .header-inner { max-width:1320px !important; padding:0 32px !important; margin:0 auto !important; width:100% !important; height:80px !important; min-height:80px !important; display:flex !important; align-items:center !important; } body .header-main .header-inner > #logo.flex-col.logo { flex:0 0 auto !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; order:2 !important; /* center via order */ text-align:center !important; } body .header-main .header-inner > .flex-col.hide-for-medium.flex-left { flex:1 1 0 !important; order:1 !important; justify-content:flex-start !important; display:flex !important; } body .header-main .header-inner > .flex-col.hide-for-medium.flex-right { flex:1 1 0 !important; order:3 !important; justify-content:flex-end !important; display:flex !important; } body .header-main .header-inner > .flex-col.show-for-medium { display:none !important; } /* Brand-mark — Cormorant Garamond 24/300/.05em, line-height:1 */ body #logo .me-v2-wordmark { display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important; text-decoration:none !important; line-height:1 !important; text-align:center !important; white-space:nowrap !important; } body #logo .me-v2-wordmark img { display:none !important; } body #logo .me-v2-wordmark__name { font-family:"Cormorant Garamond",serif !important; font-weight:300 !important; font-style:normal !important; font-size:24px !important; letter-spacing:.18em !important; color:#1a1a1a !important; line-height:1 !important; text-transform:uppercase !important; margin:0 !important; padding:0 !important; } body #logo .me-v2-wordmark__sub { font-family:"Inter",sans-serif !important; font-size:9px !important; letter-spacing:.34em !important; text-transform:uppercase !important; color:#9a9a9a !important; font-weight:500 !important; margin-top:4px !important; line-height:1 !important; white-space:nowrap !important; } /* Header nav links (LEFT) — 12px caps .18em, padding 6 0, gold underline on hover */ body .header-main .nav-left > li, body .header-main .header-nav > li { margin:0 12px !important; } body .header-main .nav-left > li:first-child { margin-left:0 !important; } body .header-main .nav-left > li > a, body .header-main .header-nav > li > a { font-family:"Inter",sans-serif !important; font-size:12px !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:#3a3a3a !important; font-weight:500 !important; padding:6px 0 !important; border-bottom:1px solid transparent !important; background:transparent !important; transition:border-color 200ms cubic-bezier(.2,.7,.2,1), color 200ms cubic-bezier(.2,.7,.2,1) !important; } body .header-main .nav-left > li > a:hover, body .header-main .nav-left > li.current-menu-item > a, body .header-main .nav-left > li.current-menu-parent > a, body .header-main .nav-left > li.current-menu-ancestor > a { color:#1a1a1a !important; border-bottom-color:#b8923a !important; } /* Kill the "::after" gold underline added by me-storefront */ body .header-main .nav-left li.current-menu-item > a::after, body .header-main .nav-left li.current-menu-parent > a::after, body .header-main .nav-left li.current-menu-item > a::before, body .header-main .nav-left li.current-menu-parent > a::before { display:none !important; content:none !important; } /* Header utility (RIGHT) — 12px caps .16em, gap 20 between items */ body .header-main .nav-right { gap:0 !important; align-items:center !important; } body .header-main .nav-right > li { margin:0 10px !important; padding:0 !important; white-space:nowrap !important; border:0 !important; background:transparent !important; } body .header-main .nav-right > li:first-child { margin-left:0 !important; } body .header-main .nav-right > li:last-child { margin-right:0 !important; } body .header-main .nav-right > li > a { font-family:"Inter",sans-serif !important; font-size:12px !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:#3a3a3a !important; font-weight:500 !important; display:inline-flex !important; flex-direction:row !important; align-items:center !important; gap:5px !important; padding:6px 0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; width:auto !important; height:auto !important; white-space:nowrap !important; } body .header-main .nav-right > li > a:hover { color:#b8923a !important; } body .header-main .nav-right > li > a > i, body .header-main .nav-right > li > a > svg, body .header-main .nav-right > li > a [class*="icon-"] { font-size:16px !important; width:auto !important; height:auto !important; background:transparent !important; border:0 !important; vertical-align:middle !important; display:inline-block !important; margin:0 !important; } /* Concierge pill — selectors raised to (0,5,1) so they beat the * `body .header-main .nav-right > li > a` cascade above (0,4,1) which * otherwise repaints the pill text in #3a3a3a + heavier visual weight. */ body .header-main .nav-right > li.me-concierge-pill { margin:0 10px !important; } body .header-main .nav-right > li.me-concierge-pill > a { display:inline-flex !important; align-items:center !important; gap:5px !important; padding:6px 12px !important; background:transparent !important; border:1px solid #b8923a !important; border-radius:9999px !important; color:#b8923a !important; font-family:"Inter",sans-serif !important; font-size:9px !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-weight:500 !important; line-height:1 !important; white-space:nowrap !important; width:auto !important; min-width:0 !important; height:auto !important; text-decoration:none !important; box-shadow:none !important; transition:background 200ms cubic-bezier(.2,.7,.2,1), color 200ms cubic-bezier(.2,.7,.2,1), border-color 200ms cubic-bezier(.2,.7,.2,1) !important; } body .header-main .nav-right > li.me-concierge-pill > a:hover { background:#b8923a !important; color:#fff !important; border-color:#b8923a !important; } body .header-main .nav-right > li.me-concierge-pill > a > .me-concierge-pill__star, body .header-main .nav-right > li.me-concierge-pill > a > .me-concierge-pill__label { display:inline !important; color:inherit !important; font-size:inherit !important; letter-spacing:inherit !important; font-weight:inherit !important; margin:0 !important; padding:0 !important; vertical-align:baseline !important; white-space:nowrap !important; } body .header-main .nav-right > li.me-concierge-pill > a > .me-concierge-pill__star { font-size:10px !important; line-height:1 !important; } /* Cart count badge — Flatsome injects via [data-icon-label]:after. * Restyle to match V2: black 16px circle, white 10px digit, top-right. * Override Flatsome's red/orange default via fs-color-secondary. */ body .header-main .cart-item .icon-shopping-basket[data-icon-label] { position:relative !important; font-size:18px !important; color:#1a1a1a !important; } body .header-main .cart-item .icon-shopping-basket[data-icon-label]::after, body .header-main .cart-item .icon-shopping-basket[data-icon-label="0"]::after { content:attr(data-icon-label) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; background:#1a1a1a !important; color:#fff !important; box-shadow:none !important; border-radius:50% !important; width:16px !important; height:16px !important; min-width:16px !important; font-family:"Inter",sans-serif !important; font-size:9px !important; font-weight:600 !important; letter-spacing:0 !important; line-height:1 !important; padding:0 !important; text-align:center !important; position:absolute !important; top:-6px !important; right:-8px !important; opacity:1 !important; visibility:visible !important; } /* Ensure the cart-link itself has no badge via the level */ body .header-main .cart-item .header-cart-link::after { display:none !important; } /* Hide the Flatsome cart text label "Panier / 0,00 €" — V2 shows icon only */ body .header-main .cart-item .header-cart-title { display:none !important; } /* Heart icon — V2 uses an outline heart (♡) not filled. * icon-heart in Flatsome's font is filled — override with the unicode outline char. */ body .header-main .header-wishlist-icon .wishlist-icon.icon-heart { font-family:"fl-icons" !important; } body .header-main .header-wishlist-icon .wishlist-icon.icon-heart::before { /* Use stroke-only rendering: transparent fill + 1px ink stroke */ -webkit-text-stroke:1px #1a1a1a !important; color:transparent !important; font-size:18px !important; } body .header-main .header-wishlist-icon a:hover .wishlist-icon.icon-heart::before { -webkit-text-stroke-color:#b8923a !important; } /* Wishlist link wrapper — match nav-right link sizing */ body .header-main .header-wishlist-icon { margin:0 10px !important; } body .header-main .header-wishlist-icon .header-button { margin:0 !important; } body .header-main .header-wishlist-icon .wishlist-link { padding:6px 0 !important; background:transparent !important; border:0 !important; display:inline-flex !important; align-items:center !important; } /* Account label override : "Compte" via ::after, hide source span */ body .header-main .account-item > a > span, body .header-main .account-item .header-account-title { display:inline-block !important; width:0 !important; overflow:hidden !important; text-indent:-9999px !important; font-size:0 !important; letter-spacing:0 !important; color:transparent !important; margin:0 !important; padding:0 !important; } body .header-main .account-item > a { position:relative !important; } /* Hide Flatsome's account svg/icon — we render our own outline circle */ body .header-main .account-item > a > i, body .header-main .account-item > a > svg, body .header-main .account-item > a [class*="icon-"] { display:none !important; } body .header-main .account-item > a::before { content:"" !important; display:inline-block !important; width:13px !important; height:13px !important; border:1px solid #3a3a3a !important; border-radius:50% !important; vertical-align:middle !important; margin-right:6px !important; background:transparent !important; opacity:1 !important; visibility:visible !important; position:relative !important; z-index:1 !important; flex:0 0 13px !important; transform:none !important; transition:border-color 200ms cubic-bezier(.2,.7,.2,1) !important; } /* Defensive : keep visible regardless of any sibling/parent hover side-effect */ body .header-main .nav-right:hover .account-item > a::before, body .header-main .me-concierge-pill:hover ~ .account-item > a::before, body .header-main .me-concierge-pill + .account-item > a::before { opacity:1 !important; visibility:visible !important; display:inline-block !important; } body .header-main .account-item > a::after { content:"Compte" !important; display:inline-block !important; font-family:"Inter",sans-serif !important; font-size:12px !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:#3a3a3a !important; font-weight:500 !important; vertical-align:middle !important; white-space:nowrap !important; } body .header-main .account-item > a:hover::before { border-color:#b8923a !important; } body .header-main .account-item > a:hover::after { color:#b8923a !important; } /* Hide WhatsApp FAB visually for cleaner pixel-perfect comparison — * still clickable for accessibility. Repositioned to bottom-left.*/ body .me-fab-whatsapp { background:#1a1a1a !important; border:1px solid #b8923a !important; color:#b8923a !important; bottom:24px !important; right:auto !important; left:24px !important; padding:10px 16px !important; font-size:10px !important; letter-spacing:.22em !important; animation:none !important; box-shadow:0 6px 20px -6px rgba(26,26,26,.4) !important; } /* TranslatePress switcher to topbar right */ /* Language switcher in topbar (right edge). * Plugin defaults: position:fixed; bottom:0; right:10vw — overridden here. */ html body nav.trp-floating-switcher.trp-language-switcher { position:fixed !important; bottom:auto !important; left:auto !important; top:0 !important; right:32px !important; z-index:9999 !important; width:auto !important; min-width:0 !important; max-width:none !important; height:36px !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; overflow:visible !important; display:flex !important; align-items:center !important; flex-direction:row !important; } @media (max-width:640px){ html body nav.trp-floating-switcher.trp-language-switcher { right:8px !important; } html body nav.trp-floating-switcher .trp-language-switcher-inner { padding:3px 8px !important; font-size:9px !important; } } html body nav.trp-floating-switcher .trp-language-switcher-inner { background:transparent !important; border:1px solid rgba(255,255,255,.25) !important; border-radius:9999px !important; padding:4px 14px !important; height:auto !important; width:auto !important; min-width:0 !important; max-width:none !important; display:inline-flex !important; align-items:center !important; flex-direction:row !important; white-space:nowrap !important; overflow:visible !important; cursor:pointer !important; } /* Plugin's `--switcher-width` inline style sets a fixed width on the nav * itself (e.g. 115px) which clips "ENGLISH". Force auto width on every * level so the pill grows with its content. */ html body nav.trp-floating-switcher .trp-language-item-name { width:auto !important; max-width:none !important; overflow:visible !important; text-overflow:clip !important; } html body nav.trp-floating-switcher .trp-language-item { background:transparent !important; border-radius:0 !important; padding:0 !important; display:flex !important; align-items:center !important; flex-direction:row !important; min-height:0 !important; box-sizing:border-box !important; gap:0 !important; } /* Current (compact) language item rendered inside the topbar pill — keep * the hover visual centered and on-brand (no light grey wash from the * plugin default hover background). */ html body nav.trp-floating-switcher .trp-language-switcher-inner > .trp-language-item:hover, html body nav.trp-floating-switcher .trp-language-switcher-inner > .trp-language-item__current:hover { background:transparent !important; } html body nav.trp-floating-switcher .trp-language-switcher-inner > .trp-language-item:hover .trp-language-item-name { color:#fff !important; } html body nav.trp-floating-switcher .trp-language-item-name { color:rgba(255,255,255,.85) !important; font-family:"Inter",sans-serif !important; font-size:10px !important; letter-spacing:.18em !important; text-transform:uppercase !important; font-weight:500 !important; background:transparent !important; line-height:1 !important; padding:0 !important; margin:0 !important; } html body nav.trp-floating-switcher .trp-flag-image { display:none !important; } /* Dropdown list — positioned BELOW the switcher pill, full-width matching * the pill, dark background to match topbar, items stack column (not the * plugin's default column-reverse which scrambled the order). * * IMPORTANT: top:100% (no gap) so mouseleave doesn't fire when the cursor * crosses from the pill to the dropdown. Visual breathing space comes * from a margin-top:4px on the FIRST list item instead of a real gap. */ html body nav.trp-floating-switcher .trp-switcher-dropdown-list { position:absolute !important; top:100% !important; bottom:auto !important; left:0 !important; right:0 !important; margin:0 !important; background:#1a1a1a !important; border:1px solid rgba(255,255,255,.15) !important; border-radius:8px !important; display:flex !important; flex-direction:column !important; box-shadow:0 8px 24px rgba(0,0,0,.35) !important; z-index:10000 !important; padding:8px 0 4px !important; min-width:120px !important; } /* When hidden, don't render — overrides display:flex */ html body nav.trp-floating-switcher .trp-switcher-dropdown-list[hidden] { display:none !important; } html body nav.trp-floating-switcher .trp-switcher-dropdown-list .trp-language-item { padding:8px 14px !important; background:transparent !important; width:100% !important; } html body nav.trp-floating-switcher .trp-switcher-dropdown-list .trp-language-item:hover { background:rgba(255,255,255,.06) !important; } html body nav.trp-floating-switcher .trp-switcher-dropdown-list .trp-language-item:hover .trp-language-item-name { color:#fff !important; } /* ──────────────────────────────────────────────────────────────────── */ /* ── Header background : paper (cream warm) — mockup is #fdfbf6 ────── */ body .header-main, body .header-main .header-inner, body .header, body .header.has-sticky.sticky-jump .header-wrapper, body .header-wrapper, body #masthead.header-main, body .header-bottom { background-color:#fdfbf6 !important; } body .header-bg-color, body .header-main .header-bg-color { background-color:#fdfbf6 !important; } /* ── Header inner container width — match mockup (1320px max-w) ────── */ .header-main .header-inner.container, .header-bottom .header-inner.container { max-width:1320px !important; padding-left:32px !important; padding-right:32px !important; width:100% !important; } /* Topbar : 3 messages avec séparateur `·` doré entre eux, centrés * naturellement par flex (gap = même espace) — matche le mockup. */ .header-top { position:relative !important; /* anchor for the language switcher */ } .header-top .header-inner.container, .header-top .flex-row.container { max-width:1320px !important; padding-left:32px !important; padding-right:32px !important; width:100% !important; position:relative; } /* Topbar : full-width 3-cell strip. Force every wrapper from .header-top * down to .me-topbar-strip to take full width, then space-between étale * les 3 spans aux bords + centre. Spécificité maxi via `body`. */ body .header-top .header-inner.flex-row { display:flex !important; } body .header-top .header-inner > .flex-col.flex-left { flex:1 1 100% !important; width:100% !important; max-width:none !important; } body .header-top .header-inner > .flex-col.flex-center, body .header-top .header-inner > .flex-col.flex-right { display:none !important; } body .header-top ul.nav-left, body .header-top ul.nav.nav-left { width:100% !important; display:flex !important; margin:0 !important; padding:0 !important; } body .header-top ul.nav-left > li { margin:0 !important; padding:0 !important; width:100% !important; flex:1 1 100% !important; } body .header-top ul.nav-left > li::before, body .header-top ul.nav-left > li::after { display:none !important; content:none !important; } body .header-top ul.nav-left > li > div.me-topbar-strip { width:100% !important; display:flex !important; justify-content:space-between !important; align-items:center !important; flex-wrap:nowrap !important; } body .header-top ul.nav-left > li > div.me-topbar-strip > span { font-size:11px !important; letter-spacing:.18em !important; padding:0 !important; white-space:nowrap !important; flex:0 0 auto !important; } .header-top .me-topbar-strip > span { font-size:11px !important; letter-spacing:.18em !important; padding:0 !important; position:relative; flex:0 0 auto; white-space:nowrap; } /* No `·` separator — the mockup uses pure space-between gap. */ .header-top .me-topbar-strip > span:not(:first-child)::before { display:none !important; content:none !important; } @media (max-width:1024px){ .header-main .header-inner.container { max-width:none !important; padding-left:20px !important; padding-right:20px !important; } } /* ── Header nav (Flatsome main nav) V2 ──────────────────────────────── */ .header-main .header-nav > li > a, .header-bottom-nav .nav-divided > li > a { font-family:var(--me-sans) !important; font-size:12px !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:var(--me-ink-2) !important; font-weight:500 !important; padding:6px 0 !important; border-bottom:1px solid transparent !important; transition:border-color 200ms var(--me-ease), color 200ms var(--me-ease) !important; } .header-main .header-nav > li > a:hover, .header-main .header-nav > li.active > a, .header-main .header-nav > li.current-menu-item > a, .header-main .header-nav > li.current-menu-parent > a, .header-main .header-nav > li.current-menu-ancestor > a, .header-main .header-nav > li > a.active, .header-bottom-nav .nav-divided > li > a:hover { color:var(--me-ink) !important; border-bottom-color:var(--me-gold) !important; } .header-main .header-nav > li { margin:0 16px; } /* Header utility (right side : search / account / wishlist / cart) */ .header-main .nav-right { gap:0; align-items:center; flex-wrap:nowrap; } .header-main .nav-right > li { margin:0 16px !important; white-space:nowrap !important; } .header-main .nav-right > li.me-concierge-pill { margin:0 18px !important; } .header-main .nav-right > li:first-child { margin-left:0 !important; } .header-main .nav-right > li:last-child { margin-right:0 !important; } .header-main .nav-right > li > a { white-space:nowrap !important; } @media (max-width:1280px){ .header-main .nav-right > li { margin:0 10px !important; } .header-main .nav-right > li.me-concierge-pill { margin:0 14px !important; } } .header-main .header-nav-secondary .nav > li > a, .header-main .nav-right > li > a { font-family:var(--me-sans) !important; font-size:11px !important; letter-spacing:.22em !important; text-transform:uppercase !important; color:var(--me-ink-2) !important; font-weight:500 !important; display:inline-flex !important; flex-direction:row !important; /* icon + label on the SAME line */ align-items:center !important; gap:6px !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; width:auto !important; height:auto !important; padding:6px 0 !important; white-space:nowrap !important; text-align:left !important; } .header-main .nav-right > li > a:hover { color:var(--me-gold) !important; } .header-main .nav-right > li > a > i, .header-main .nav-right > li > a > svg, .header-main .nav-right > li > a [class*="icon-"] { background:transparent !important; border:0 !important; width:auto !important; height:auto !important; font-size:16px !important; margin:0 !important; vertical-align:middle !important; display:inline-block !important; } /* Make sure the icon-only items (wishlist heart, cart) don't have width * forcing line break */ .header-main .nav-right > li.header-search, .header-main .nav-right > li.account-item, .header-main .nav-right > li.cart-item, .header-main .nav-right > li.wishlist-icon { width:auto !important; flex:0 0 auto !important; } /* Util labels (RECHERCHE / etc.) — match nav-right > a spec exactly so * "RECHERCHE" reads in the same Inter 12px / .16em as the concierge pill. */ .me-v2-util-label, .header-wishlist-title { font-family:"Inter",sans-serif !important; font-size:12px !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:#3a3a3a !important; font-weight:500 !important; margin-left:5px !important; } /* Account label : remplace "Se connecter" / "Login" par "Compte" via ::after. * Le span source est masqué avec text-indent (plus robuste que font-size:0 * face aux conflits Flatsome / me-storefront). Spécificité maximale via * `body` prefix pour passer devant les rules inline tardives. */ body .header-main .account-item .header-account-title, body .header-main .account-item a > span:not(.header-cart-title) { display:inline-block !important; width:0 !important; overflow:hidden !important; text-indent:-9999px !important; font-size:0 !important; letter-spacing:0 !important; color:transparent !important; background:transparent !important; } body .header-main .account-item > a::after { content:"Compte"; display:inline-block; font-family:var(--me-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--me-ink-2); font-weight:500; margin-left:6px; vertical-align:middle; white-space:nowrap; } body .header-main .account-item > a:hover::after { color:var(--me-gold); } /* Heart icon : outline only, no fill */ .header-main .nav-right .header-wishlist-icon i, .header-main .nav-right li.html .icon-heart, .header-main .nav-right .icon-heart { font-weight:300 !important; } /* (Topbar separators handled in header-top section above) */ /* (Language switcher rules consolidated in the html-body block above.) */ /* Green WhatsApp FAB : repositionné en bas LEFT (au lieu de bottom-right * où il chevauchait le panier). Couleur ink + gold, plus discret. */ .me-fab-whatsapp, a.me-fab-whatsapp { background:var(--me-ink) !important; border:1px solid var(--me-gold) !important; color:var(--me-gold) !important; box-shadow:0 6px 20px -6px rgba(26,26,26,.4) !important; padding:10px 16px 10px 14px !important; font-size:10px !important; letter-spacing:.22em !important; animation:none !important; bottom:24px !important; right:auto !important; left:24px !important; /* moved to bottom-LEFT */ } .me-fab-whatsapp:hover { background:var(--me-gold) !important; color:#fff !important; border-color:var(--me-gold) !important; } .me-fab-whatsapp svg { stroke:currentColor !important; } .me-fab-whatsapp__label { color:inherit !important; } /* Cart : keep small badge but no circle around the bag icon */ .header-main .nav-right .header-cart-link, .header-main .nav-right .cart-icon { background:transparent !important; } .header-main .nav-right .cart-icon strong { background:var(--me-ink) !important; color:#fff !important; border-radius:50% !important; width:18px !important; height:18px !important; display:inline-flex !important; align-items:center; justify-content:center; font-size:10px !important; font-weight:600 !important; margin-left:2px; } /* Concierge pill — petite, ✦ et texte INLINE en or, oval gold border */ .me-concierge-pill { display:inline-flex !important; align-items:center !important; margin:0 6px !important; height:auto !important; border:0 !important; background:transparent !important; box-shadow:none !important; } .me-concierge-pill > a { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; padding:6px 14px !important; background:transparent !important; border:1px solid var(--me-gold) !important; border-radius:9999px !important; color:var(--me-gold) !important; font-family:var(--me-sans) !important; font-size:10px !important; letter-spacing:.18em !important; text-transform:uppercase !important; font-weight:500 !important; line-height:1 !important; white-space:nowrap !important; width:auto !important; min-width:0 !important; height:auto !important; transition:all 200ms var(--me-ease) !important; box-shadow:none !important; text-decoration:none !important; } .me-concierge-pill > a:hover { background:var(--me-gold) !important; color:#fff !important; border-color:var(--me-gold) !important; } .me-concierge-pill > a > span { display:inline !important; /* keep star + label on the same line */ color:inherit !important; font-size:inherit !important; letter-spacing:inherit !important; margin:0 !important; padding:0 !important; vertical-align:baseline !important; position:static !important; text-indent:0 !important; width:auto !important; height:auto !important; } .me-concierge-pill > a > .me-concierge-pill__star { font-size:11px !important; line-height:1 !important; } /* Kill ALL Flatsome nav borders/underlines on the pill — only our pill * border should be visible. Higher specificity than Flatsome's defaults. */ ul.nav > li.me-concierge-pill > a, ul.nav > li.me-concierge-pill > a:hover, ul.nav > li.me-concierge-pill > a:focus, ul.nav > li.me-concierge-pill > a:active, ul.nav.nav-right > li.me-concierge-pill > a, .header-main ul.nav > li.me-concierge-pill > a { border-top:0 !important; border-left:0 !important; border-right:0 !important; border-bottom:0 !important; border:1px solid var(--me-gold) !important; border-radius:9999px !important; text-decoration:none !important; box-shadow:none !important; } ul.nav > li.me-concierge-pill { border:0 !important; background:transparent !important; box-shadow:none !important; } /* Disable Flatsome's border-bottom hover effect on the LI containing pill */ ul.nav > li.me-concierge-pill::before, ul.nav > li.me-concierge-pill::after { display:none !important; content:none !important; } .me-concierge-pill__star { font-size:11px !important; line-height:1 !important; } /* Cart count badge */ .header-main .cart-icon strong, .header-main .header-cart-link strong { background:var(--me-ink) !important; color:#fff !important; border-radius:50% !important; width:18px !important; height:18px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-family:var(--me-sans) !important; font-size:10px !important; font-weight:600 !important; } /* ── Mega-menu (Flatsome nav-dropdown) V2 ───────────────────────────── */ .nav-dropdown.nav-dropdown-default, .nav-dropdown.nav-dropdown-bold { background:#fff !important; border:1px solid var(--me-line) !important; box-shadow:var(--shadow-2) !important; border-radius:0 !important; padding:32px !important; } .nav-dropdown li > a { font-family:var(--me-sans); font-size:13px; color:var(--me-ink-2); padding:8px 12px; border-radius:0; transition:color 200ms var(--me-ease), background 200ms var(--me-ease); } .nav-dropdown li > a:hover, .nav-dropdown li.active > a { color:var(--me-gold); background:var(--me-paper); } .nav-dropdown li.nav-dropdown-col { padding:0 24px; } .nav-dropdown li.nav-dropdown-col > a:first-child, .nav-dropdown .menu-item > a strong { font-family:var(--me-sans) !important; font-size:10px !important; letter-spacing:.32em !important; text-transform:uppercase !important; color:var(--me-ink-4) !important; font-weight:600 !important; padding-bottom:12px !important; border-bottom:1px solid var(--me-line); display:block !important; margin-bottom:12px; } /* Mega-menu featured item (image right) */ .nav-dropdown .image-wrapper img { filter:brightness(0.95); transition:filter 400ms var(--me-ease); } .nav-dropdown .image-wrapper:hover img { filter:brightness(1.04); } /* ── Account hero (shared by wishlist/account/orders pages) ───────── */ .me-v2-wl-hero, .me-v2-acc-hero { background:var(--me-paper-2); padding:64px 0; border-bottom:1px solid var(--me-line); width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .me-v2-wl-hero__inner, .me-v2-acc-hero__inner { max-width:1320px; margin:0 auto; padding:0 32px; } .me-v2-wl-hero h1, .me-v2-acc-hero h1 { font-family:var(--me-serif); font-size:42px; font-weight:300; margin:12px 0 8px; line-height:1.15; color:var(--me-ink); } .me-v2-wl-hero p, .me-v2-acc-hero p { font-size:13px; color:var(--me-ink-3); margin:0; } /* Wishlist empty state */ .me-v2-wl-empty-wrap { padding:80px 32px; max-width:920px; margin:0 auto; text-align:center; } .me-v2-wl-empty { background:#fff; border:1px solid var(--me-line); padding:80px 40px; } .me-v2-wl-empty__icon { width:72px; height:72px; border-radius:50%; background:var(--me-paper-2); color:var(--me-gold); display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 24px; } .me-v2-wl-empty h2 { font-family:var(--me-serif); font-size:32px; font-weight:300; margin:0 0 12px; color:var(--me-ink); } .me-v2-wl-empty p { font-size:15px; color:var(--me-ink-3); line-height:1.7; max-width:520px; margin:0 auto 32px; } .me-v2-wl-empty__cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } /* ── Auth split (login / register / lost-password / reset / confirm) ─ Visual hero (gauche) + formulaire (droite). Source : page-login.html. CSS ici (pas inline) pour être partagé par tous les templates Woo. */ .me-v2-auth { display:grid; grid-template-columns:1fr 1fr; /* min-height calé sur viewport mais content-driven : pas de stretch démesuré quand le viewport est très grand. */ min-height:640px; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } @media (max-width:1024px){ .me-v2-auth { grid-template-columns:1fr; } } .me-v2-auth__visual { background: linear-gradient(180deg,rgba(20,18,15,.05) 0%,rgba(20,18,15,.55) 100%), linear-gradient(135deg,#caa978 0%,#5a4a3a 60%,#2a2520 100%); color:#fff; padding:80px 64px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; } .me-v2-auth__visual::after { content:"M"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--me-serif); font-size:280px; color:rgba(255,255,255,.06); pointer-events:none; line-height:1; } .me-v2-auth__visual .me-v2-eyebrow { color:rgba(255,255,255,.85); margin-bottom:12px; display:block; } .me-v2-auth__visual h2 { font-family:var(--me-serif); font-size:48px; font-weight:300; line-height:1.15; max-width:420px; margin:0 0 20px; color:#fff; } .me-v2-auth__visual .lead { color:rgba(255,255,255,.85); font-size:15px; line-height:1.7; max-width:380px; margin:0 0 24px; } .me-v2-auth__visual ul { display:flex; flex-direction:column; gap:12px; max-width:380px; margin:24px 0 0; padding:0; list-style:none; } .me-v2-auth__visual ul li { font-size:13px; color:rgba(255,255,255,.85); display:flex; align-items:flex-start; gap:10px; line-height:1.6; } .me-v2-auth__visual ul li .icon { color:var(--me-gold); flex-shrink:0; font-size:14px; margin-top:1px; } .me-v2-auth__form { background:#fff; padding:80px 64px; display:flex; flex-direction:column; justify-content:center; } .me-v2-auth__form-inner { max-width:380px; width:100%; margin:0 auto; } .me-v2-auth__form h1 { font-family:var(--me-serif); font-size:36px; font-weight:300; margin:12px 0; line-height:1.15; } .me-v2-auth__form .lead { color:var(--me-ink-3); font-size:13px; margin-bottom:32px; line-height:1.6; } /* Tabs login/register */ .me-v2-auth__tabs { display:flex; border-bottom:1px solid var(--me-line); margin-bottom:24px; } .me-v2-auth__tab { flex:1; padding:12px 0; text-align:center; cursor:pointer; font-family:var(--me-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--me-ink-4); border-bottom:2px solid transparent; transition:all 200ms var(--me-ease); background:none; border-left:0; border-right:0; border-top:0; } .me-v2-auth__tab.is-active { color:var(--me-ink); border-bottom-color:var(--me-ink); } .me-v2-auth__panel { display:none; } .me-v2-auth__panel.is-active { display:block; } .me-v2-auth__form .form-row { display:flex; flex-direction:column; gap:6px; margin:0 0 20px; } .me-v2-auth__form label { font-family:var(--me-sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--me-ink-3); font-weight:600; display:flex; justify-content:space-between; align-items:baseline; } .me-v2-auth__form label a { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--me-gold); font-weight:600; border-bottom:1px solid currentColor; padding-bottom:1px; } .me-v2-auth__form input[type=text], .me-v2-auth__form input[type=email], .me-v2-auth__form input[type=password] { width:100%; padding:12px 14px; border:1px solid var(--me-line-2); background:#fff; font-family:var(--me-sans); font-size:14px; color:var(--me-ink); border-radius:0; } .me-v2-auth__form input:focus { outline:none; border-color:var(--me-ink); } .me-v2-auth__check { display:flex; align-items:center; gap:10px; margin:12px 0 24px; font-size:13px; color:var(--me-ink-2); cursor:pointer; } .me-v2-auth__check input { width:14px; height:14px; margin:0; accent-color:var(--me-ink); } .me-v2-auth__form .btn-submit { width:100%; padding:16px; background:var(--me-ink); color:#fff; font-family:var(--me-sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; border:1px solid var(--me-ink); border-radius:0; cursor:pointer; transition:all 200ms var(--me-ease); } .me-v2-auth__form .btn-submit:hover { background:var(--me-gold); border-color:var(--me-gold); } .me-v2-auth__alt { text-align:center; margin-top:32px; padding-top:24px; border-top:1px solid var(--me-line); font-size:13px; color:var(--me-ink-3); } .me-v2-auth__alt a { color:var(--me-gold); font-weight:500; border-bottom:1px solid currentColor; padding-bottom:1px; cursor:pointer; } /* Confirmation panel (envoi email réussi / mot de passe changé) */ .me-v2-auth__confirm { text-align:center; padding:32px 0; } .me-v2-auth__confirm-icon { width:64px; height:64px; border-radius:50%; background:var(--me-paper-2); color:var(--me-gold); display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 24px; border:1px solid var(--me-gold); } .me-v2-auth__confirm h2 { font-family:var(--me-serif); font-size:28px; font-weight:300; margin:0 0 12px; color:var(--me-ink); } .me-v2-auth__confirm p { font-size:14px; color:var(--me-ink-2); line-height:1.7; margin:0 0 20px; } @media (max-width:1024px){ .me-v2-auth__visual { padding:64px 24px 40px; min-height:280px; } .me-v2-auth__visual h2 { font-size:30px; } .me-v2-auth__form { padding:48px 24px; } } /* ── YITH Wishlist styling — table & empty state aligned to v2 ───── */ .yith-wcwl-wishlist-search-form, .yith-wcwl-wishlist-new { max-width:1320px; margin:24px auto; padding:0 32px; } .yith-wcwl-wishlist-search-form input, .yith-wcwl-wishlist-new input[type="text"] { border:1px solid var(--me-line-2); padding:12px 14px; font-family:var(--me-sans); font-size:14px; border-radius:0; } .wishlist_table { max-width:1320px; margin:0 auto 48px; padding:0 32px; border-collapse:collapse; width:100%; font-family:var(--me-sans); } .wishlist_table thead th { font-family:var(--me-sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--me-ink-3); font-weight:600; background:var(--me-paper-2); padding:14px 12px; text-align:left; border-bottom:1px solid var(--me-line); } .wishlist_table tbody td { padding:18px 12px; border-bottom:1px solid var(--me-line); vertical-align:middle; background:#fff; } .wishlist_table .product-name a { font-family:var(--me-serif); font-size:16px; color:var(--me-ink); font-weight:400; text-decoration:none; } .wishlist_table .product-name a:hover { color:var(--me-gold); } .wishlist_table .product-thumbnail img { max-width:80px; height:auto; display:block; } .wishlist_table .product-price, .wishlist_table .product-price .amount { font-family:var(--me-sans); font-size:14px; font-weight:500; color:var(--me-ink); } .wishlist_table .product-add-to-cart .button, .wishlist_table .product-add-to-cart a.button, .wishlist_table .add_to_cart { background:var(--me-ink) !important; color:#fff !important; font-family:var(--me-sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; padding:10px 18px; border:1px solid var(--me-ink); border-radius:0; transition:all 200ms var(--me-ease); text-decoration:none; display:inline-block; } .wishlist_table .product-add-to-cart .button:hover, .wishlist_table .add_to_cart:hover { background:var(--me-gold) !important; border-color:var(--me-gold) !important; } .wishlist_table .remove_from_wishlist, .wishlist_table .product-remove a { color:var(--me-ink-3); font-size:18px; line-height:1; text-decoration:none; transition:color 200ms var(--me-ease); } .wishlist_table .remove_from_wishlist:hover, .wishlist_table .product-remove a:hover { color:var(--me-error, #c14a37); } .wishlist-empty { max-width:920px; margin:80px auto; background:#fff; border:1px solid var(--me-line); padding:80px 40px; text-align:center; font-family:var(--me-serif); font-size:24px; font-weight:300; color:var(--me-ink); line-height:1.4; } .wishlist-empty + .return-to-shop, .wishlist-empty + p { text-align:center; max-width:920px; margin:-48px auto 80px; } .wishlist-empty + .return-to-shop a, .wishlist-empty + p a { display:inline-block; padding:14px 28px; background:var(--me-ink); color:#fff; font-family:var(--me-sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; border:1px solid var(--me-ink); border-radius:0; text-decoration:none; transition:all 200ms var(--me-ease); } .wishlist-empty + .return-to-shop a:hover, .wishlist-empty + p a:hover { background:var(--me-gold); border-color:var(--me-gold); } /* Wishlist toolbar (share / ask estimate / etc) */ .yith-wcwl-share { max-width:1320px; margin:0 auto; padding:0 32px; } .yith-wcwl-share h4 { font-family:var(--me-sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--me-ink-3); font-weight:600; margin:24px 0 12px; } /* Buttons (shared) */ .me-v2-btn { display:inline-block; padding:14px 28px; font-family:var(--me-sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; border:1px solid transparent; border-radius:0; transition:all 200ms var(--me-ease); cursor:pointer; } .me-v2-btn--primary { background:var(--me-ink); color:#fff; border-color:var(--me-ink); } .me-v2-btn--primary:hover { background:var(--me-gold); border-color:var(--me-gold); color:#fff; } .me-v2-btn--ghost { background:transparent; color:var(--me-ink); border-color:var(--me-line-2); } .me-v2-btn--ghost:hover { border-color:var(--me-ink); } /* ── PDP V2 — single-product layout aligned to mockup page-produit ── Cible la markup Flatsome/Woo existante, modifie typographie et espace sans réécrire single-product.php. Référence : page-produit.html. */ .single-product div.product { padding-top:24px; } /* Title — already serif via Flatsome theme, just enforce weight + size */ .single-product div.product .product-title, .single-product div.product .product_title { font-family:var(--me-serif) !important; font-size:36px; font-weight:300 !important; line-height:1.2; letter-spacing:.005em; margin:0 0 12px; } /* Price */ .single-product div.product .price, .single-product div.product p.price { font-family:var(--me-sans); font-size:28px; font-weight:500; color:var(--me-ink); margin:0 0 8px; } .single-product div.product .price del { color:var(--me-ink-4); font-weight:400; } .single-product div.product .price ins { text-decoration:none; color:var(--me-ink); } /* Short description */ .single-product div.product .short-description, .single-product div.product .woocommerce-product-details__short-description { font-family:var(--me-sans); font-size:14px; color:var(--me-ink-2); line-height:1.7; margin:16px 0; } /* Variation labels */ .single-product div.product table.variations th, .single-product div.product table.variations label { font-family:var(--me-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--me-ink); font-weight:600; } .single-product div.product table.variations select { border:1px solid var(--me-line-2); padding:10px 12px; font-family:var(--me-sans); font-size:14px; color:var(--me-ink); border-radius:0; background:#fff; } /* CTA — single_add_to_cart_button */ .single-product div.product form.cart .single_add_to_cart_button, .single-product div.product .single_add_to_cart_button { background:var(--me-ink) !important; color:#fff !important; font-family:var(--me-sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; padding:18px 32px; border:1px solid var(--me-ink); border-radius:0; transition:all 200ms var(--me-ease); } .single-product div.product form.cart .single_add_to_cart_button:hover, .single-product div.product .single_add_to_cart_button:hover { background:var(--me-gold) !important; border-color:var(--me-gold) !important; } /* Quantity input near CTA */ .single-product div.product .quantity input.qty { border:1px solid var(--me-line-2); font-family:var(--me-sans); font-size:14px; height:auto; padding:10px; border-radius:0; } /* Tabs (description / additional info / reviews) */ .single-product .woocommerce-tabs ul.tabs { border-bottom:1px solid var(--me-line); padding:0; margin:48px 0 0; } .single-product .woocommerce-tabs ul.tabs li { background:transparent !important; border:0 !important; padding:0 !important; margin:0 32px 0 0; } .single-product .woocommerce-tabs ul.tabs li a { font-family:var(--me-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--me-ink-3); font-weight:600; padding:14px 0 !important; border-bottom:2px solid transparent !important; } .single-product .woocommerce-tabs ul.tabs li.active a { color:var(--me-ink) !important; border-bottom-color:var(--me-gold) !important; } .single-product .woocommerce-tabs .panel { padding:32px 0; font-family:var(--me-sans); font-size:14px; color:var(--me-ink-2); line-height:1.7; } .single-product .woocommerce-tabs .panel h2 { font-family:var(--me-serif); font-size:24px; font-weight:400; margin:0 0 16px; color:var(--me-ink); } /* Related products section */ .related.products, .upsells.products { border-top:1px solid var(--me-line); padding-top:64px; margin-top:64px; } .related.products > h2, .upsells.products > h2 { font-family:var(--me-serif); font-size:32px; font-weight:300; margin:0 0 32px; color:var(--me-ink); text-align:center; } /* Reassurance pillars (rendered by maisonelite_pdp_reassurance hook) */ .me-v2-pdp-reassurance { list-style:none; padding:24px 0; margin:24px 0; border-top:1px solid var(--me-line); border-bottom:1px solid var(--me-line); display:flex; flex-direction:column; gap:14px; } .me-v2-pdp-reassurance li { display:flex; align-items:center; gap:14px; font-family:var(--me-sans); font-size:13px; color:var(--me-ink-2); line-height:1.5; } .me-v2-pdp-reassurance__rule { width:24px; height:1px; background:var(--me-gold); flex-shrink:0; } .me-v2-pdp-reassurance strong { color:var(--me-ink); font-weight:500; } /* Brand eyebrow above title (rendered by maisonelite_pdp_brand_eyebrow) */ .me-v2-pdp-eyebrow { font-family:var(--me-sans); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--me-ink-3); font-weight:600; margin:0 0 12px; } /* ── Archive cinematic hero (catégorie + marque) ─────────────────── */ .me-v2-cat-hero { position:relative; aspect-ratio:16/6; min-height:360px; background: linear-gradient(180deg,rgba(20,18,15,.05) 0%,rgba(20,18,15,.55) 100%), linear-gradient(135deg,#d4b69a 0%,#7a5a3a 100%); overflow:hidden; display:flex; align-items:flex-end; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-bottom:48px; } .me-v2-cat-hero--brand { background: linear-gradient(180deg,rgba(20,18,15,.05) 0%,rgba(20,18,15,.65) 100%), linear-gradient(135deg,#1a1a1a 0%,#3a3a3a 100%); } .me-v2-cat-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 25% 70%,rgba(0,0,0,.3) 0%,transparent 60%); pointer-events:none; } .me-v2-cat-hero__inner { position:relative; z-index:2; width:100%; max-width:1320px; margin:0 auto; padding:64px 32px; color:#fff; } .me-v2-cat-hero__inner .me-v2-eyebrow { color:var(--me-gold); } .me-v2-cat-hero__title { font-family:var(--me-serif); font-size:88px; font-weight:300; line-height:1; margin:12px 0; letter-spacing:.005em; color:#fff; } .me-v2-cat-hero__lead { font-family:var(--me-sans); font-size:18px; line-height:1.6; color:rgba(255,255,255,.85); max-width:540px; margin:12px 0 0; } .me-v2-cat-hero__count { font-family:var(--me-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7); font-weight:500; margin-top:16px; } @media (max-width:768px){ .me-v2-cat-hero { aspect-ratio:4/5; min-height:auto; } .me-v2-cat-hero__title { font-size:54px; } } /* Sous-catégorie title block (centered, sober) */ .me-v2-listing-title { text-align:center; padding:64px 0 40px; border-bottom:1px solid var(--me-line); width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-bottom:40px; } .me-v2-listing-title__h1 { font-family:var(--me-serif); font-size:56px; font-weight:300; margin:12px 0; color:var(--me-ink); } .me-v2-listing-title__lead { max-width:560px; margin:0 auto 16px; color:var(--me-ink-3); font-size:15px; line-height:1.6; } .me-v2-listing-title__count { font-family:var(--me-sans); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--me-ink-4); font-weight:600; } @media (max-width:768px){ .me-v2-listing-title__h1 { font-size:38px; } } /* Sub-categories grid */ .me-v2-subcat-section { padding:0 0 64px; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .me-v2-subcat-section__head { text-align:center; margin-bottom:32px; } .me-v2-subcat-section__head h2 { font-family:var(--me-serif); font-size:30px; font-weight:300; margin:12px 0 0; color:var(--me-ink); } .me-v2-subcat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .me-v2-subcat-card { text-decoration:none; color:inherit; display:flex; flex-direction:column; } .me-v2-subcat-card__img { aspect-ratio:1/1; background:linear-gradient(135deg,var(--me-paper-2) 0%,var(--me-paper) 100%); position:relative; overflow:hidden; transition:transform 400ms var(--me-ease); } .me-v2-subcat-card:hover .me-v2-subcat-card__img { transform:scale(1.02); } .me-v2-subcat-card__img::after { content:attr(data-mark); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--me-serif); font-size:84px; font-weight:300; color:rgba(26,26,26,.07); } .me-v2-subcat-card__body { padding:20px 0 0; } .me-v2-subcat-card__cat { font-family:var(--me-serif); font-size:20px; font-weight:400; color:var(--me-ink); margin:0 0 8px; } .me-v2-subcat-card__count { font-family:var(--me-sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--me-ink-3); font-weight:500; } @media (max-width:1024px){ .me-v2-subcat-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:768px){ .me-v2-subcat-grid { grid-template-columns:repeat(2,1fr); gap:12px; } } /* ── Archives produits : grille — la définition de la grille (Option E, 5 cols) est plus bas dans la section "Product card — density Option E". On garde ici uniquement le margin négatif du wrapper et le ratio image. */ .products.row.large-columns-3 { margin-left:-8px !important; margin-right:-8px !important; } /* Card image : aspect ratio fixe 4:5 (pas 5:6 trop tall), object-fit cover pour images qui débordent. Marge basse propre. */ .products .product-small .box-image { aspect-ratio:4/5; background:var(--me-paper-2); overflow:hidden; } .products .product-small .box-image > a, .products .product-small .box-image > a > img, .products .product-small .box-image .image-cover > img, .products .product-small .box-image img { width:100% !important; height:100% !important; object-fit:cover !important; } /* ── PDP : gallery max-width pour ne pas avoir une image énorme. Flatsome rend la gallery dans .product-gallery / .woocommerce-product-gallery ; on contraint la zone images à 540px max et on aligne le summary à droite. */ .single-product div.product .product-gallery-container, .single-product div.product .product-gallery-slider, .single-product div.product .woocommerce-product-gallery, .single-product div.product .product-images { max-width:560px; } .single-product div.product .product-gallery-slider .slide img, .single-product div.product .woocommerce-product-gallery img, .single-product div.product .product-gallery img { max-width:560px; height:auto; margin:0 auto; } /* Layout 60/40 : la gallery prend ~55%, le summary ~45% — au lieu du défaut Flatsome qui peut faire 50/50 et étirer la gallery */ .single-product div.product .product-gallery { flex-basis:55% !important; max-width:55% !important; } .single-product div.product .product-info, .single-product div.product .summary { flex-basis:45% !important; max-width:45% !important; } @media (max-width:768px){ .single-product div.product .product-gallery, .single-product div.product .product-info, .single-product div.product .summary { flex-basis:100% !important; max-width:100% !important; } } /* ── Product card — density Option E (Net-a-Porter style) ────────────── Source : page-pcard-options.html — recommandation finale du mockup ("ma recommandation forte : Option E"). 5 cols 4:5, hiérarchie brand-serif → name-sans → price-uppercase, alignement centré. Override les blocs ci-dessus pour les pages d'archive (catégorie, sous-cat, marque, search, shop). PDP non touchée. */ /* 5 colonnes au lieu de 4 sur desktop. Le ratio 4:5 reste. */ .products.row.large-columns-3 > .product-small.col { flex-basis:20% !important; max-width:20% !important; } @media (max-width:1280px){ .products.row.large-columns-3 > .product-small.col { flex-basis:25% !important; max-width:25% !important; } } @media (max-width:1024px){ .products.row.large-columns-3 > .product-small.col { flex-basis:33.333% !important; max-width:33.333% !important; } } @media (max-width:640px){ .products.row.large-columns-3 > .product-small.col { flex-basis:50% !important; max-width:50% !important; } } /* Texte de card centré et hiérarchie inversée : brand devient le titre en serif, name passe en sub-line sans-serif. */ .products .product-small .box-text { text-align:center; padding:14px 8px 4px; } .products .product-small .me-v2-loop-brand { font-family:var(--me-serif); font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--me-ink); text-transform:none; margin-bottom:4px; } .products .product-small .name a { font-family:var(--me-sans); font-size:11px; font-weight:300; letter-spacing:.02em; color:var(--me-ink-3); line-height:1.4; text-transform:none; } .products .product-small.box .price-wrapper .price { font-family:var(--me-sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--me-ink); font-weight:600; margin-top:6px; } /* Spacing & dividers in box-text — pas de border, juste l'air. */ .products .product-small .box-text-products { border-top:0 !important; padding-top:0 !important; } /* ── PDP V2 — sticky summary ────────────────────────────────────────── La gallery prend toute la hauteur du contenu produit ; le summary à droite reste visible pendant qu'on scrolle les images (mockup l.46). On désactive sur mobile (.product est en stack vertical → pas de sens). */ @media (min-width:1025px){ .single-product div.product .product-info, .single-product div.product .summary { position:sticky; top:96px; align-self:flex-start; } } /* ── PDP V2 — accordion (override tabs.php) ────────────────────────── Native

rendering, no JS. Reprend les styles de page-produit.html mockup l.131-150 (.acc, .acc__head, .acc__body). */ .me-v2-pdp-acc { border-top:1px solid var(--me-line); margin-top:48px; } .me-v2-pdp-acc::before { content:none; } .me-v2-pdp-acc__item { border-bottom:1px solid var(--me-line); background:transparent; padding:0; margin:0; border-top:0; border-left:0; border-right:0; } .me-v2-pdp-acc__item + .me-v2-pdp-acc__item { margin-top:0; } .me-v2-pdp-acc__head { display:flex; justify-content:space-between; align-items:center; padding:24px 0; cursor:pointer; font-family:var(--me-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--me-ink); font-weight:600; list-style:none; user-select:none; } .me-v2-pdp-acc__head::-webkit-details-marker { display:none; } .me-v2-pdp-acc__head::marker { content:""; } .me-v2-pdp-acc__label { flex:1; } .me-v2-pdp-acc__ico { width:14px; height:14px; position:relative; flex-shrink:0; color:var(--me-ink-3); } .me-v2-pdp-acc__ico::before, .me-v2-pdp-acc__ico::after { content:""; position:absolute; background:currentColor; transition:transform 200ms var(--me-ease); } .me-v2-pdp-acc__ico::before { /* horizontal bar */ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); } .me-v2-pdp-acc__ico::after { /* vertical bar */ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); } .me-v2-pdp-acc__item[open] .me-v2-pdp-acc__ico::after { transform:translateX(-50%) scaleY(0); /* hide vertical → minus sign */ } .me-v2-pdp-acc__body { padding:0 0 24px; font-size:14px; color:var(--me-ink-2); line-height:1.7; font-weight:300; } .me-v2-pdp-acc__body p { margin:0 0 12px; } .me-v2-pdp-acc__body p:last-child { margin:0; } .me-v2-pdp-acc__body ul { padding-left:18px; list-style:disc; color:var(--me-ink-3); } .me-v2-pdp-acc__body ul li { margin:0 0 6px; } .me-v2-pdp-acc__body table { width:100%; border-collapse:collapse; font-size:13px; } .me-v2-pdp-acc__body table th, .me-v2-pdp-acc__body table td { padding:10px 0; border-bottom:1px solid var(--me-line); text-align:left; font-weight:400; color:var(--me-ink-2); } .me-v2-pdp-acc__body table th { font-family:var(--me-sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--me-ink-3); font-weight:500; width:40%; } /* Hide Flatsome's default tabs nav if it slips through (defensive) */ .single-product .tabs.wc-tabs { display:none !important; } /* Print-safe (mockups partagés via PDF export) */ @media print { .me-v2-hero { min-height:auto; } .me-v2-hero__title { font-size:48px; } }