@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&family=Cormorant+Garamond:ital@1&family=Playfair+Display:wght@400;500;600;700&display=swap'); /* Astra's default footer builder rows (empty light row + its own copyright line) sit below our real .mc-footer and were never disabled — showed as a stray white band plus a duplicate "© 2026" line. Our own footer already has its own legal row. */ .site-above-footer-wrap, .site-primary-footer-wrap, .mc-footer-bottom { display: none !important; } /* Base typography */ h1, h2, h3, h4, h5, h6, .elementor-heading-title { font-family: 'Montserrat', 'Helvetica Neue', sans-serif !important; letter-spacing: 1px; font-weight: 700; } body, p, a, span, .elementor-widget-text-editor { font-family: 'Manrope', 'Helvetica Neue', sans-serif; } .mc-accent-serif { font-family: 'Cormorant Garamond', serif !important; font-style: italic; font-weight: 400 !important; letter-spacing: .5px !important; } /* Collection cards — hover zoom + dark overlay */ .mc-collection-card { position: relative; overflow: hidden; transition: transform .45s ease, box-shadow .45s ease; } .mc-collection-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.5); } .mc-collection-card .elementor-widget-image { overflow: hidden; } .mc-collection-card .elementor-widget-image img { transition: transform .7s ease; display:block; } .mc-collection-card:hover .elementor-widget-image img { transform: scale(1.08); } .mc-collection-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.1) 55%, rgba(0,0,0,0) 75%); pointer-events: none; opacity: .7; transition: opacity .4s ease; } .mc-collection-card:hover::after { opacity: .92; } .mc-collection-card .elementor-widget-heading, .mc-collection-card .elementor-widget-button { position: relative; z-index: 2; } /* WooCommerce product cards on dark background */ .woocommerce ul.products li.product, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .price { color: #F8F8F6 !important; } .woocommerce ul.products li.product { background: #161616; padding: 18px 18px 24px; border-radius: 2px; transition: transform .4s ease; } .woocommerce ul.products li.product:hover { transform: translateY(-4px); } .woocommerce ul.products li.product .price { color: #C8A45D !important; } .woocommerce ul.products li.product a.button { background: #C8A45D !important; color: #111111 !important; border-radius: 2px; } .woocommerce ul.products li.product a.button:hover { background: transparent !important; color: #C8A45D !important; box-shadow: inset 0 0 0 1px #C8A45D; } /* Buttons — gold fill, hover = gold outline / transparent */ .mc-btn-gold .elementor-button, .mc-btn-gold.elementor-button { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } /* Hide default page title on the homepage */ .page-id-701 .entry-header, .page-id-701 .page-header, .page-id-701 h1.entry-title, .page-id-701 .ast-archive-title { display: none !important; } /* Full-bleed safety for full-width containers */ .elementor-701 .e-con.e-con-full { max-width: 100% !important; } /* Generous breathing room between top-level sections */ .elementor-701 > .elementor-element > .e-con { scroll-margin-top: 100px; } /* Sticky header — subtle shadow once scrolled */ .mc-scrolled .ast-primary-header-bar, .mc-scrolled #masthead { box-shadow: 0 2px 24px rgba(0,0,0,.10) !important; transition: box-shadow .3s ease; } #masthead, .ast-primary-header-bar { transition: box-shadow .3s ease; } /* Subtle fade-in for elements with Elementor entrance animation already respects reduced motion */ @media (prefers-reduced-motion: reduce) { .elementor-invisible { opacity: 1 !important; transform: none !important; } } /* ---- Footer ---- */ footer, #colophon, .site-footer { background: #0A0A0A !important; position: relative; } footer::before, #colophon::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(200,164,93,.5) 50%, transparent 100%); } .mc-footer { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 80px 60px 40px; max-width:1400px; margin:0 auto; } .mc-footer-logo { font-family:'Playfair Display',serif; font-size:26px; letter-spacing:2px; background:linear-gradient(120deg,#8a6a2f,#C8A45D,#F3D9A4,#C8A45D,#8a6a2f); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; } .mc-footer-tagline { color:#C9C9C9; margin-top:8px; font-size:14px; } .mc-footer-col h4 { color:#C8A45D; font-family:'Playfair Display',serif; font-weight:500; font-size:14px; letter-spacing:1.5px; margin-bottom:16px; text-transform:uppercase; } .mc-footer-col ul { list-style:none; margin:0; padding:0; } .mc-footer-col ul li { margin-bottom:10px; } .mc-footer-col ul li a { color:#C9C9C9; text-decoration:none; font-size:14px; transition:color .3s ease; } .mc-footer-col ul li a:hover { color:#C8A45D; } .mc-footer-bottom { text-align:center; color:#666; font-size:12px; padding:24px 20px; border-top:1px solid rgba(255,255,255,.08); margin-top:20px; } @media (max-width:768px){ .mc-footer{grid-template-columns:1fr 1fr; padding:60px 30px 30px;} } /* ---- Header: gold gradient logo + refined hover ---- */ .ast-site-identity .site-title a, .ast-site-title-inner .site-title a, .site-title a { font-family:'Playfair Display',serif !important; font-weight:500; font-size: 44px !important; letter-spacing:4px; background:linear-gradient(120deg,#8a6a2f 0%,#C8A45D 25%,#F3D9A4 50%,#C8A45D 75%,#8a6a2f 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent !important; } .ast-site-title-wrap { display: flex; flex-direction: column; align-items: center; line-height: 1; } /* Playfair Display's "&" is an ornate calligraphic swash that reads oddly at a glance — swap just that glyph for a plain, conventional ampersand in a solid gold, and apply the same treatment everywhere "MISTER & CO." appears (custom.js wraps every instance site-wide) so the mark stays consistent. */ .mc-amp { font-family: Arial, Helvetica, sans-serif !important; font-weight: 500; color: #C8A45D !important; -webkit-text-fill-color: #C8A45D !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; text-shadow: none !important; } /* Every other "MISTER & CO." on the site gets the same treatment as the logo: Playfair Display in the same gold gradient for "MISTER"/"CO.", with the conventional-font gold "&" (.mc-amp) nested inside — matching the logo exactly rather than approximating it. */ .mc-brandmark { font-family: 'Playfair Display', serif !important; font-weight: 500; background: linear-gradient(120deg,#8a6a2f 0%,#C8A45D 25%,#F3D9A4 50%,#C8A45D 75%,#8a6a2f 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-shadow: none !important; } .mc-tagline { font-family: Manrope, sans-serif; font-size: 19px; font-weight: 400; letter-spacing: .02em; color: #FFFFFF; opacity: .92; text-align: center; white-space: nowrap; margin-top: 2px; line-height: 1.25; } @media (max-width: 700px) { .mc-tagline { font-size: 14px; white-space: normal; max-width: 220px; } } @media (max-width: 480px) { .mc-tagline { font-size: 12px; max-width: 200px; } } /* ---- Shared full-bleed texture background for sections 2 and 3 ---- Real element (not Elementor's background_image or a CSS background-image property) — this project's proven technique after Elementor's native background setting was found unreliable on this install. */ .mc-presentation-section, .mc-why-section { position: relative; z-index: 2; } /* User explicitly asked to remove the marble/texture background from sections 2 and 3 entirely and keep them pure black ("je voulais tout noir") — the shared-image and its overlay are hidden rather than deleted from the Elementor JSON, so this is a single reversible CSS toggle if a background image is wanted again later. */ .mc-section-bg-img, .mc-section-bg-overlay { display: none !important; } .mc-presentwhy-wrap { position: relative; overflow: hidden; background-color: #0A0A0A; } /* Elementor gives every widget's own wrapper div position:relative by default, which "steals" the positioning context from our intended ancestor (this is what caused the earlier per-section height bug — the background was sizing against its own empty widget wrapper instead of the section). Forcing this one widget's wrapper back to static lets the absolute-positioned background correctly reference .mc-presentwhy-wrap. */ .elementor-element-sharedbg001, .elementor-element-sharedbg001 > .elementor-widget-container { position: static !important; } .mc-presentation-grid, .mc-why-wrap { position: relative; z-index: 2; } /* ---- Presentation section (Section 2): image left / real HTML text right ---- */ .mc-presentation-grid { max-width: 1680px; margin: 0 auto; padding-top: clamp(70px, 8vw, 120px); padding-bottom: clamp(70px, 8vw, 120px); padding-left: clamp(24px, 4vw, 64px); padding-right: clamp(24px, 4vw, 64px); display: grid; grid-template-columns: 48% 48%; column-gap: 4%; row-gap: clamp(28px, 3.4vw, 48px); align-items: start; } .mc-presentation-image { position: relative; width: 100%; aspect-ratio: 5 / 4; border-radius: 6px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.28); } .mc-presentation-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; } .mc-presentation-text { position: relative; border-left: 1px solid rgba(216,164,59,.45); padding-left: clamp(24px, 3vw, 48px); } .mc-presentation-text::before { content: ""; position: absolute; top: -24px; bottom: -24px; left: -24px; right: -6%; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.58) 60%, rgba(0,0,0,.4) 85%, rgba(0,0,0,.15) 100%); z-index: -1; pointer-events: none; } .mc-presentation-text h2, .mc-presentation-text h3 { color: #d8a43b !important; font-weight: 700; font-size: clamp(32px, 2.4vw, 46px); line-height: 1.15; letter-spacing: -0.02em !important; margin: 0 0 22px; text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9); } .mc-presentation-text h3 { font-size: clamp(24px, 1.8vw, 32px); } .mc-presentation-text p { color: #ffffff; font-size: clamp(16px, 1.05vw, 18px); line-height: 1.8; font-weight: 700; max-width: 760px; margin: 0 0 20px; text-shadow: 0 1px 6px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9); } .mc-presentation-text p:last-child { margin-bottom: 0; } .mc-presentation-image, .mc-presentation-text { opacity: 0; transition: opacity .8s ease, transform .8s ease; } .mc-presentation-image { transform: translateY(20px); } .mc-presentation-text { transform: translateY(12px); transition-delay: .1s; } .mc-presentation-grid.mc-in-view .mc-presentation-image, .mc-presentation-grid.mc-in-view .mc-presentation-text { opacity: 1; transform: translateY(0); } @media (max-width: 1024px) { .mc-presentation-grid { grid-template-columns: 1fr; gap: 32px; } .mc-presentation-text { border-left: none; padding-left: 0; border-top: 1px solid rgba(216,164,59,.32); padding-top: 32px; } .mc-presentation-image { aspect-ratio: 16/11; } } @media (max-width: 767px) { .mc-presentation-section { padding: 0; } .mc-presentation-grid { grid-template-columns: 1fr; gap: 0; max-width: 100%; padding: 0; } .mc-presentation-image { aspect-ratio: 4/3; border-radius: 0; box-shadow: none; } .mc-presentation-text { border-top: none; padding: 28px 18px 48px; } .mc-presentation-text h2, .mc-presentation-text h3 { font-size: 28px; line-height: 1.15; } .mc-presentation-text p { font-size: 16px; line-height: 1.65; max-width: none; } } @media (prefers-reduced-motion: reduce) { .mc-presentation-image, .mc-presentation-text { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---- Why section (Section 3): compact 6-frame gallery grid ---- */ .mc-why-wrap { max-width: 1500px; margin: -54px auto 0; padding: 0px 40px 90px; } .mc-why-wrap h2 { color: #d8a43b !important; text-align: center; font-size: clamp(30px, 2.2vw, 42px); margin: 0 0 16px; text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9); } .mc-why-intro { color: #f2f2f2; text-align: center; font-size: clamp(16px, 1.1vw, 18px); line-height: 1.7; font-weight: 700; max-width: 640px; margin: 0 auto 56px; text-shadow: 0 1px 6px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9); } .mc-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 36px; } .mc-why-item { text-align: center; } /* Layered gallery-frame effect: brushed-gold metal border (gradient + inset bevel shadows) wrapping a pale passe-partout mat, with a diagonal shine sweep on hover — built from two nested layers, not a single CSS border. */ .mc-why-frame { position: relative; display: flex; min-height: 170px; padding: 12px; border-radius: 3px; background: linear-gradient(135deg, #f3dd97 0%, #b8862f 20%, #f6e6b0 38%, #9c711d 56%, #f3dd97 74%, #8a6218 90%, #ecd28e 100%); background-size: 220% 220%; background-position: 0% 50%; box-shadow: 0 20px 45px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.3), inset 0 1px 2px rgba(255,255,255,.65), inset 0 -2px 3px rgba(0,0,0,.55); transition: transform .45s ease, box-shadow .45s ease, background-position .6s ease; overflow: hidden; } .mc-why-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.4) 50%, transparent 58%); background-size: 250% 250%; background-position: -120% -120%; opacity: 0; transition: background-position .8s ease, opacity .5s ease; pointer-events: none; } .mc-why-item:hover .mc-why-frame { transform: translateY(-6px) rotate(.6deg); background-position: 100% 50%; box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 10px 20px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.8), inset 0 -2px 3px rgba(0,0,0,.6); } .mc-why-item:hover .mc-why-frame::after { opacity: 1; background-position: 120% 120%; } .mc-why-frame-mat { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: 1px; background: linear-gradient(160deg, #efe9dd 0%, #ddd5c4 100%); box-shadow: inset 0 3px 10px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.06); } .mc-why-frame h3 { color: #241a0d !important; font-size: clamp(19px, 1.4vw, 25px); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; line-height: 1.3; margin: 0; } .mc-why-item p { color: #f2f2f2; font-size: 16px; line-height: 1.65; font-weight: 700; text-align: center; max-width: 420px; margin: 20px auto 0; text-shadow: 0 1px 6px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9); } .mc-why-reassurance { color: rgba(242,242,242,.6); font-size: 13px; line-height: 1.6; text-align: center; max-width: 520px; margin: 56px auto 0; } @media (prefers-reduced-motion: reduce) { .mc-why-frame, .mc-why-frame::after { transition: none; } } @media (max-width: 1024px) { .mc-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .mc-why-wrap { padding: 60px 18px; } .mc-why-grid { grid-template-columns: 1fr; gap: 34px; } } /* Header: transparent over hero, solid on scroll; social icons injected via JS */ .ast-primary-header-bar { background: rgba(10,10,10,.55); backdrop-filter: blur(6px); } .mc-scrolled .ast-primary-header-bar { background: rgba(10,10,10,.96) !important; } /* TranslatePress's own floating switcher is replaced by a header-integrated one below. Its "yes" setting is force-reverted by the plugin itself on save (free-tier behavior) — hiding it in CSS is the only reliable way to remove it regardless of that option's state. */ #trp-floater-ls { display: none !important; } .mc-lang-switcher { display: flex; align-items: center; gap: 6px; margin-left: 24px; position: relative; } .mc-lang-switcher a { color: #C9C9C9; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: color .3s ease; } .mc-lang-switcher a:hover { color: #C8A45D; } .mc-lang-switcher a.mc-lang-active { color: #C8A45D; pointer-events: none; } .mc-lang-switcher .mc-lang-sep { color: #555; font-size: 12px; } @media (max-width: 921px) { .mc-lang-switcher { margin-left: 0; margin-top: 16px; } } /* Desktop copy sits in the header top-right; mobile copy sits inside the off-canvas menu list (appended as its own item) so it's reachable once the hamburger is open. */ .mc-lang-switcher-desktop { flex-shrink: 0; } @media (max-width: 921px) { .site-header-primary-section-right-center div.mc-lang-switcher-desktop { display: none; } } .mc-lang-switcher-mobile-item { list-style: none; padding-left: 20px; } .mc-lang-switcher-mobile-item::before { content: none; } @media (min-width: 922px) { .main-header-menu li.mc-lang-switcher-mobile-item, #ast-hf-menu-1 li.mc-lang-switcher-mobile-item { display: none; } } .main-header-menu .menu-item a, #primary-menu a { transition: color .3s ease; } .main-header-menu .menu-item a:hover, #primary-menu a:hover { color: #C8A45D !important; } .ast-primary-header-bar { padding-top: 10px; padding-bottom: 10px; } /* ---- Hero ---- FIXED: previous versions used a raw-HTML absolutely-positioned div for the background image so it could be Ken-Burns-zoomed independently of the text. That div's positioning context was the HTML widget's own (zero-height, auto-sized) wrapper, not the section — so the image never rendered at all (confirmed visually: solid black hero). Using Elementor's native background_image/background_overlay container settings instead: simple, reliably sized, proven. */ .mc-hero-content > * { position: relative; z-index: 2; } /* ---- Museum-style gallery tiles for Collections ---- */ .mc-gallery-tile { position: relative; overflow: hidden; } .mc-gallery-tile > .e-con-inner { position: relative; z-index: 2; height: 100%; } .mc-gallery-tile .elementor-widget-image { position: absolute; inset: 0; z-index: 0; margin: 0; } .mc-gallery-tile .elementor-widget-image .elementor-widget-container, .mc-gallery-tile .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .mc-gallery-tile .elementor-widget-image img { transition: transform 1.1s ease; } .mc-gallery-tile:hover .elementor-widget-image img { transform: scale(1.06); } .mc-gallery-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 72%); transition: opacity .4s ease; } .mc-gallery-tile:hover::after { opacity: .85; } .mc-gallery-tile .elementor-widget-heading { position: absolute; bottom: 34px; left: 34px; z-index: 2; margin: 0; } .mc-gallery-tile .elementor-widget-heading .elementor-heading-title { letter-spacing: 3px; text-transform: uppercase; font-size: 20px !important; } /* ---- Background via real element ---- Elementor's native background_image container setting silently fails to apply for several sections on this install: confirmed via direct CSSOM inspection that the generated rule exists, is correctly parsed with the right URL, and its selector matches the element (.matches() returns true) — yet getComputedStyle().backgroundImage still resolves to "none" while every other property from the same rule (size, position, repeat) applies correctly. An !important override targeting the same property from a separately-loaded stylesheet exhibits the exact same failure. Root cause not identified (not a caching issue — reproduced with a fully purged cache and cross-checked with adoptedStyleSheets, inline styles, and rule specificity — the background-image sub-property specifically is not being painted despite every inspectable signal saying it should be). Using a real element sidesteps the CSS background-image mechanism entirely and is unaffected by whatever this is. */ .mc-bg-host { position: relative; overflow: hidden; } .elementor-element-bannerbgimg, .elementor-element-whybgimg, .elementor-element-showcasebgimg, .elementor-element-custombgimg, .elementor-element-tsbgimg, .elementor-element-herocarousel, .elementor-element-introbgimg { position: absolute; inset: 0; z-index: 0; margin: 0; line-height: 0; } .elementor-element-herocarousel .elementor-widget-container { height: 100%; } .mc-bg-host img.mc-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; } .mc-bg-overlay { position: absolute; inset: 0; } .mc-bg-host > .e-con-inner > *:not(.elementor-element-bannerbgimg):not(.elementor-element-whybgimg):not(.elementor-element-showcasebgimg):not(.elementor-element-custombgimg):not(.elementor-element-tsbgimg):not(.elementor-element-herocarousel):not(.elementor-element-introbgimg), .mc-bg-host > *:not(.elementor-element-bannerbgimg):not(.elementor-element-whybgimg):not(.elementor-element-showcasebgimg):not(.elementor-element-custombgimg):not(.elementor-element-tsbgimg):not(.elementor-element-herocarousel):not(.elementor-element-introbgimg) { position: relative; z-index: 1; } /* ---- Hero carousel ---- */ .mc-hero-carousel { position: relative; width: 100%; height: 100%; overflow: hidden; } .mc-hero-carousel img.mc-hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; filter: brightness(1.14) contrast(1.10) saturate(1.10); } .mc-hero-carousel img.mc-hero-slide.active { opacity: 1; } .mc-hero-carousel .mc-hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(0,0,0,.08); } .mc-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.3); color: #F8F8F6; font-size: 24px; line-height: 1; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; transition: background .3s ease, border-color .3s ease; } .mc-hero-arrow:hover { background: rgba(200,164,93,.65); border-color: #C8A45D; } .mc-hero-prev { left: 24px; } .mc-hero-next { right: 24px; } .mc-hero-dots { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; } .mc-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; padding: 0; transition: background .3s ease, transform .3s ease; } .mc-hero-dot.active { background: #C8A45D; transform: scale(1.35); } @media (max-width: 767px) { .mc-hero-arrow { width: 34px; height: 34px; font-size: 18px; } .mc-hero-prev { left: 10px; } .mc-hero-next { right: 10px; } } @media (prefers-reduced-motion: reduce) { .mc-hero-carousel img.mc-hero-slide { transition: none; } } /* ---- Painterly texture accent ---- FIXED: previously used ::before/::after pseudo-elements + z-index to blend a texture photo behind the content. That relied on ".e-con-inner" being the container's flex wrapper and on z-index stacking that didn't hold in this Elementor version — result: the dark overlay painted OVER the text, making it nearly unreadable (confirmed visually). Sections needing a background photo now use Elementor's own native background_image + background_overlay_color settings (the same mechanism already proven reliable on the Hero) instead of custom CSS layering. */ .mc-texture-accent { background-color: #0A0A0A; } /* Hero logo mark */ .mc-hero-logo img { filter: drop-shadow(0 6px 30px rgba(200,164,93,.35)); } /* Force dark background on Astra's own wrappers so nothing shows through white between sections */ #content, .site-content, .ast-container, #primary, .ast-separate-container .ast-article-single, main#main { background-color: #0A0A0A !important; } /* ---- Manifesto / big statement quote screen ---- */ .mc-manifesto blockquote { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.5; color: #F8F8F6; text-align: center; max-width: 960px; margin: 0 auto; } .mc-manifesto .mc-quote-mark { color: #C8A45D; font-size: 60px; line-height: 1; display: block; margin-bottom: 10px; font-family: 'Playfair Display', serif; } .mc-manifesto em { color: #C8A45D; font-style: normal; } /* ---- Collections: full-bleed large bands ---- */ .mc-band-tile { position: relative; overflow: hidden; width: 100%; } .mc-band-tile .elementor-widget-image { position: absolute; inset: 0; margin: 0; z-index: 0; } .mc-band-tile .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease; } .mc-band-tile:hover .elementor-widget-image img { transform: scale(1.05); } .mc-band-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.55) 100%); transition: background .5s ease; } .mc-band-tile:hover::after { background: linear-gradient(100deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.4) 100%); } .mc-band-tile .elementor-widget-heading { position: relative; z-index: 2; } .mc-band-tile .elementor-widget-heading .elementor-heading-title { font-size: clamp(32px, 5vw, 64px) !important; letter-spacing: 5px; text-transform: uppercase; color: #F8F8F6 !important; } .mc-band-tile .elementor-widget-text-editor { position: relative; z-index: 2; } /* ---- Lifestyle placeholders (until real interior photos exist) ---- */ .mc-lifestyle-tile { position: relative; overflow: hidden; background: linear-gradient(150deg,#141414,#0A0A0A 60%); border: 1px solid rgba(200,164,93,.18); display: flex; align-items: flex-end; justify-content: center; min-height: 340px; } .mc-lifestyle-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 300px 200px at 50% 30%, rgba(200,164,93,.08), transparent 70%); } .mc-lifestyle-tile .elementor-widget-heading { position: relative; z-index: 1; padding-bottom: 24px; } .mc-lifestyle-tile .elementor-heading-title { font-size: 15px !important; letter-spacing: 3px; text-transform: uppercase; color: #C9C9C9 !important; } /* ---- Product cards: hide clutter, show only image/name/price/button ---- */ .woocommerce ul.products li.product .posted_in, .woocommerce ul.products li.product .product-category, .woocommerce ul.products li.product .sku, .woocommerce ul.products li.product mark.count, .woocommerce ul.products li.product .star-rating, .woocommerce ul.products li.product > a > span.onsale { display: none !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Playfair Display', serif; font-size: 17px; } /* ---- Section reveal on scroll (paired with JS) ---- */ .mc-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; } .mc-reveal.mc-in { opacity: 1; transform: translateY(0); } /* ==== Boutique (Shop archive) ==== */ body.woocommerce-shop #primary, body.post-type-archive-product #primary, body.woocommerce-page.woocommerce-shop .ast-container, body.page-id-332 .ast-container { background: #0A0A0A; max-width: 100% !important; padding: 0 !important; } .mc-shop-banner { text-align: center; padding: 140px 20px 70px; background: #0A0A0A; } .mc-shop-banner h1 { font-family: 'Playfair Display', serif; color: #F8F8F6; font-size: 48px; letter-spacing: 2px; margin: 0 0 14px; } .mc-shop-banner p { color: #C9C9C9; font-family: 'Manrope', sans-serif; font-size: 16px; } .woocommerce-shop ul.products, .post-type-archive-product ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 40px !important; max-width: 1400px; margin: 0 auto !important; padding: 40px 60px 140px !important; background: #0A0A0A; } .woocommerce-shop ul.products li.product, .post-type-archive-product ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; } .woocommerce-shop .woocommerce-ordering, .woocommerce-shop .woocommerce-result-count { color: #C9C9C9; font-family: 'Manrope', sans-serif; padding: 0 60px; } .woocommerce-shop .woocommerce-ordering select { background: #161616; color: #F8F8F6; border: 1px solid #333; } @media (max-width: 1024px) { .woocommerce-shop ul.products, .post-type-archive-product ul.products { grid-template-columns: repeat(2, 1fr) !important; padding: 30px !important; } } @media (max-width: 640px) { .woocommerce-shop ul.products, .post-type-archive-product ul.products { grid-template-columns: 1fr !important; padding: 20px !important; } .mc-shop-banner { padding: 100px 20px 50px; } .mc-shop-banner h1 { font-size: 34px; } } /* ==== Single product page ==== */ body.single-product #primary, body.single-product .ast-container { background: #0A0A0A; color: #F8F8F6; } .single-product div.product .product_title { font-family: 'Playfair Display', serif; color: #F8F8F6; font-size: 34px; } .single-product div.product p.price { color: #C8A45D !important; font-size: 22px; } .single-product div.product .woocommerce-product-details__short-description, .single-product div.product .woocommerce-Tabs-panel { color: #C9C9C9; font-family: 'Manrope', sans-serif; } .single-product div.product form.cart .button, .single-product div.product .single_add_to_cart_button { background: #C8A45D !important; color: #111111 !important; border-radius: 2px; border: 1px solid #C8A45D; padding: 14px 34px; transition: background .3s ease, color .3s ease; } .single-product div.product form.cart .button:hover, .single-product div.product .single_add_to_cart_button:hover { background: transparent !important; color: #C8A45D !important; } .single-product .woocommerce-tabs ul.tabs li a { color: #C9C9C9; } .single-product .woocommerce-tabs ul.tabs li.active a { color: #C8A45D; } .single-product .related.products h2 { font-family: 'Playfair Display', serif; color: #F8F8F6; } /* hide SKU/category clutter on single product too */ .single-product .product_meta { display: none !important; } .woocommerce-shop .woocommerce-info, .post-type-archive-product .woocommerce-info { background: #161616; color: #C9C9C9; border-top-color: #C8A45D; max-width: 1400px; margin: 0 auto 140px; font-family: 'Manrope', sans-serif; } /* Product image zoom on hover (loop) */ .woocommerce ul.products li.product a img { transition: transform .8s ease; } .woocommerce ul.products li.product:hover a img { transform: scale(1.04); } /* ==== Why-choose cards: real premium cards, gold SVG icons ==== */ .mc-why-card { background: #131313; border: 1px solid rgba(200,164,93,.22); border-radius: 3px; transition: border-color .3s ease, transform .3s ease; } .mc-why-card:hover { border-color: rgba(200,164,93,.6); transform: translateY(-4px); } .mc-why-icon { width: 40px; height: 40px; margin: 0 auto 18px; display: block; } .mc-why-icon svg { width: 100%; height: 100%; } /* ==== Footer v2 ==== */ .mc-footer-legal { text-align: center; padding: 18px 20px; font-size: 11px; color: #666; border-top: 1px solid rgba(255,255,255,.06); } .mc-footer-legal a { color: #888; text-decoration: none; margin: 0 8px; } .mc-footer-legal a:hover { color: #C8A45D; } /* ==== Consistent section padding (no bare 100vh voids except Hero) ==== */ .mc-section { padding-top: 80px; padding-bottom: 80px; } @media (max-width: 767px) { .mc-section { padding-top: 48px; padding-bottom: 48px; } .mc-hero-min { min-height: 72vh !important; } } /* "L'art réinventé" pre-composed image sits flush against the Hero carousel above it, so it opts out of the standard section padding. */ .elementor-element-intro001.mc-section { padding-top: 0 !important; padding-bottom: 0 !important; } /* ---- Collections page: gallery-frame cards (3 + 2 centered), no photos ---- Each card is a thin brushed-gold "gallery frame" holding a fine gold line-icon representing the collection's universe — never an actual artwork/photo. */ .mc-collections-wrap { padding: 40px 40px 90px; } .mc-collections-intro { max-width: 960px; margin: 0 auto 16px; text-align: center; } .mc-collections-intro h1 { font-family: Montserrat, sans-serif !important; font-weight: 700; color: #F8F8F6 !important; font-size: clamp(32px, 3vw, 44px); letter-spacing: 1px; margin: 0; } .mc-collections-intro p { font-family: Manrope, sans-serif; color: #C9C9C9; font-size: 16px; line-height: 1.75; margin: 14px auto 0; max-width: 940px; } .mc-collections-stat { text-align: center; font-family: Manrope, sans-serif; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #C8A45D; margin: 0 0 22px; } /* Flexbox (not grid) so a partial last row centers itself automatically via justify-content — CSS Grid would leave the trailing 2 cards flush left. 3 columns by design: Animaux/Humains/Sports, then Couples/Divers centered. */ .mc-coll-grid { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 48px; } .mc-coll-card { display: block; text-decoration: none !important; flex: 0 0 calc((100% - 96px) / 3); } /* Brushed-gold gallery frame: metal band (padding) + inset bevel shadows for depth, a matte-black inner "canvas" recessed via its own inset shadow, and two soft corner glints to read as polished metal catching light from above. Same construction proven on .mc-why-frame (Pourquoi choisir), scaled down and thinned for this page's more minimal brief — no rotation/shine-sweep, no rounded corners, no ornamentation. */ .mc-coll-frame { position: relative; aspect-ratio: 2 / 1; padding: 9px; border-radius: 3px; background: linear-gradient(152deg, #ddbd7c 0%, #8a6b34 20%, #f1dc9f 38%, #7d5f2c 58%, #e9d093 76%, #8a6b34 90%, #ddbd7c 100%); box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.32), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,0,0,.55); transition: transform .4s ease, box-shadow .4s ease, filter .4s ease; } .mc-coll-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 8% 8%, rgba(255,255,255,.55), transparent 24%), radial-gradient(circle at 92% 8%, rgba(255,255,255,.32), transparent 22%); opacity: .75; pointer-events: none; transition: opacity .4s ease; } .mc-coll-card:hover .mc-coll-frame { transform: translateY(-5px); filter: brightness(1.09); box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.34), inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 2px rgba(0,0,0,.6); } .mc-coll-card:hover .mc-coll-frame::before { opacity: 1; } .mc-coll-frame-inner { position: relative; width: 100%; height: 100%; border-radius: 1px; background: linear-gradient(160deg, #0d0d0c 0%, #030303 100%); box-shadow: inset 0 3px 12px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; transition: background .4s ease; } .mc-coll-card:hover .mc-coll-frame-inner { background: linear-gradient(160deg, #151513 0%, #060605 100%); } .mc-coll-icon { width: 24%; max-width: 52px; color: rgba(200,164,93,.7); transition: color .4s ease; } .mc-coll-card:hover .mc-coll-icon { color: #F3D9A4; } .mc-coll-body { padding-top: 26px; text-align: center; } .mc-coll-title { font-family: 'Playfair Display', serif !important; font-weight: 600; color: #FFFFFF !important; font-size: clamp(20px, 1.6vw, 26px); margin: 0 0 12px; letter-spacing: .3px; } .mc-coll-desc { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 14px; line-height: 1.65; margin: 0 auto 16px; max-width: 32ch; } .mc-coll-link { font-family: Manrope, sans-serif; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: #8c8c8c; font-weight: 500; transition: color .4s ease; } .mc-coll-card:hover .mc-coll-link { color: #C8A45D; } @media (max-width: 1024px) { .mc-coll-card { flex-basis: calc((100% - 48px) / 2); } } @media (max-width: 767px) { .mc-collections-wrap { padding: 32px 20px 60px; } .mc-coll-grid { gap: 40px 20px; } .mc-coll-card { flex-basis: 100%; } .mc-collections-stat { margin-bottom: 20px; } } @media (prefers-reduced-motion: reduce) { .mc-coll-frame, .mc-coll-frame::before, .mc-coll-frame-inner, .mc-coll-icon, .mc-coll-link { transition: none; } } /* ---- Category hub pages (Niveau 2): Animaux / Humains / Couples / Sports / Divers ---- Default WooCommerce/Astra archive title ("Animaux", "Humains", etc.) is hidden on all 5 top-level category pages; a custom sub-category tab bar (injected by custom.js) replaces it on the 4 categories that have children. The product grid stays hidden on those 4 until a specific sub-category is chosen — Couples has no children, so its grid shows directly. */ body.mc-cat-top .woocommerce-products-header { display: none !important; } body.mc-cat-hub ul.products:not(.mc-search-results-grid) { display: none !important; } .mc-cat-tabs { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 1100px; margin: 0 auto; padding: 34px 40px 60px; } .mc-cat-tab { font-family: 'Manrope', sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #C9C9C9; text-decoration: none; padding: 11px 24px; border: 1px solid rgba(200,164,93,.35); border-radius: 2px; transition: background .3s ease, color .3s ease, border-color .3s ease; } .mc-cat-tab:hover { color: #0A0A0A; background: #C8A45D; border-color: #C8A45D; } @media (max-width: 767px) { .mc-cat-tabs { padding: 110px 20px 30px; gap: 10px; } .mc-cat-tab { font-size: 12px; padding: 9px 16px; } } /* ---- Remove the redundant "Continuer la lecture" / "Read more" button from product loop cards site-wide (shop, category archives, related products) — the whole card (image + title) already links to the product, so the button added nothing. Both the hover-icon overlay button and the text button below the title show this same string, so both are hidden. */ .astra-shop-thumbnail-wrap .ast-on-card-button, a.button.product_type_simple { display: none !important; } /* ---- Instant visual search (category & sub-category archive pages) ---- 100% client-side: builds a local searchable index from the public, unauthenticated wp/v2/product REST endpoint (title + content + excerpt + category/tag names via _embed=1), so it needs no new server code and never touches credentials. */ .mc-search-wrap { max-width: 700px; margin: 0 auto 6px; padding: 0 20px; } .mc-search-wrap.mc-search-top { margin-top: 0; padding-top: 150px; } .mc-search-bar { position: relative; display: flex; align-items: center; background: #131211; border: 1px solid #2a2a2a; border-radius: 10px; padding: 0 18px; height: 52px; transition: border-color .3s ease, box-shadow .3s ease; } .mc-search-bar:focus-within { border-color: rgba(200,164,93,.7); box-shadow: 0 0 0 3px rgba(200,164,93,.12); } .mc-search-icon { width: 18px; height: 18px; color: #C8A45D; flex: 0 0 18px; margin-right: 12px; } .mc-search-input { flex: 1; min-width: 0; background: transparent !important; border: none !important; outline: none; color: #F8F8F6 !important; font-family: Manrope, sans-serif; font-size: 15px; box-shadow: none !important; } .mc-search-input::placeholder { color: #767676 !important; } .mc-search-spinner { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; margin-left: 10px; border: 2px solid rgba(200,164,93,.25); border-top-color: #C8A45D; animation: mc-search-spin .7s linear infinite; } @keyframes mc-search-spin { to { transform: rotate(360deg); } } .mc-search-confirm { background: none; border: none; color: #C8A45D; cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1; padding: 4px 6px; flex: 0 0 auto; transition: color .2s ease; } .mc-search-confirm:hover { color: #F3D9A4; } .mc-search-clear-x { background: none; border: none; color: #767676; cursor: pointer; font-size: 17px; line-height: 1; padding: 4px 2px 4px 8px; flex: 0 0 auto; transition: color .2s ease; } .mc-search-clear-x:hover { color: #F3D9A4; } .mc-search-status { text-align: center; font-family: Manrope, sans-serif; font-size: 13px; color: #909090; margin: 18px 0 0; min-height: 16px; } .mc-search-status strong { color: #C8A45D; font-weight: 600; } .mc-search-clear-btn { display: none; margin: 10px auto 0; background: none; border: 1px solid rgba(200,164,93,.4); color: #C8A45D; font-family: Manrope, sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 20px; border-radius: 2px; cursor: pointer; transition: background .3s ease, color .3s ease; } .mc-search-clear-btn:hover { background: #C8A45D; color: #0A0A0A; } .mc-search-active .mc-search-clear-btn { display: inline-block; } .mc-search-empty { text-align: center; color: #9a9a9a; font-family: Manrope, sans-serif; font-size: 15px; line-height: 1.7; padding: 50px 20px 70px; max-width: 460px; margin: 0 auto; } /* Hide the native grid/result-count/ordering/pagination only while a search is active — the pagination nav in particular sits right after the grid and was left showing (it belongs to the un-filtered category, e.g. page 1-16 of the full Animaux archive), pushing the actual matching images out of view. */ .mc-search-active ul.products:not(.mc-search-results-grid), .mc-search-active .woocommerce-result-count, .mc-search-active .woocommerce-ordering, .mc-search-active nav.woocommerce-pagination, .mc-search-active .woocommerce-pagination { display: none !important; } /* Top-level Collections page (5 gallery-frame tiles) — same active-search behaviour: the tiles hide while a query is live, matching works appear directly below the bar instead. */ .mc-search-active .mc-coll-grid { display: none !important; } .mc-search-wrap.mc-search-collections { padding-top: 0; margin-bottom: 20px; } .mc-search-results-grid { margin-top: 8px; } @media (max-width: 767px) { .mc-search-wrap { padding: 0 16px; } .mc-search-wrap.mc-search-top { padding-top: 110px; } .mc-search-bar { height: 48px; } } @media (prefers-reduced-motion: reduce) { .mc-search-spinner { animation: none; } } /* ========================================================================= PRODUCT CONFIGURATOR — deployed catalogue-wide on every single-product page (gated by body.mc-cfg-active, added by custom.js on all of them). */ body.mc-cfg-active .site-content, body.mc-cfg-active #content, body.mc-cfg-active #primary { background: #0A0A0A; } .mc-cfg-demo-banner { position: sticky; top: 0; z-index: 50; text-align: center; background: #3a2e0f; color: #ffd580; border-bottom: 1px solid #8a6a2f; font-family: Manrope, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; padding: 6px 16px; } body.postid-921 #primary, body.mc-cfg-active #primary { margin-top: 0 !important; } .mc-cfg { display: grid; grid-template-columns: 57% 43%; column-gap: 56px; row-gap: 14px; max-width: 1500px; margin: 0 auto; padding: 20px 40px 100px; font-family: Manrope, sans-serif; color: #F8F8F6; } .mc-cfg-cat { grid-column: 1 / -1; font-size: 11px; letter-spacing: .1em; line-height: 1.3; margin: 0; color: #C8A45D; text-transform: uppercase; } .mc-cfg-left { position: sticky; top: 70px; align-self: start; } .mc-cfg-canvas-wrap { position: relative; border-radius: 4px; overflow: hidden; background: #050504; border: 1px solid rgba(200,164,93,.22); } .mc-cfg-canvas { display: block; width: 100%; height: auto; } .mc-cfg-auto-crop-caption { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: #9a9a9a; text-align: center; } .mc-cfg-right { padding-top: 0; } .mc-cfg-title { font-family: 'Playfair Display', serif !important; font-weight: 600; color: #F8F8F6 !important; font-size: clamp(28px, 2.6vw, 40px); margin: 0 0 14px; letter-spacing: .3px; } .mc-cfg-desc { font-size: 14.5px; line-height: 1.7; color: #b8b8b8; margin-bottom: 36px; max-width: 52ch; } .mc-cfg-desc p { margin: 0; } .mc-cfg-step { padding: 28px 0; border-top: 1px solid rgba(255,255,255,.07); } .mc-cfg-step:first-of-type { border-top: none; padding-top: 0; } .mc-cfg-step-title { display: flex; align-items: center; gap: 12px; font-family: 'Playfair Display', serif !important; font-weight: 600; font-size: 19px; color: #F8F8F6 !important; margin: 0 0 18px; letter-spacing: .2px; } .mc-cfg-step-num { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(200,164,93,.5); color: #C8A45D; font-family: Manrope, sans-serif; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mc-cfg-family-tabs { display: flex; gap: 8px; margin-bottom: 16px; } .mc-cfg-family-tab { font-family: Manrope, sans-serif; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; padding: 9px 18px; border-radius: 2px; border: 1px solid #2a2a2a; background: none; color: #9a9a9a; cursor: pointer; transition: all .25s ease; } .mc-cfg-family-tab.active { border-color: #C8A45D; color: #F3D9A4; background: rgba(200,164,93,.08); } .mc-cfg-family-tab:hover { color: #F3D9A4; border-color: rgba(200,164,93,.5); } .mc-cfg-format-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .mc-cfg-format-card { position: relative; text-align: left; background: #131211; border: 1px solid #2a2a2a; border-radius: 3px; padding: 14px; cursor: pointer; transition: all .25s ease; display: flex; flex-direction: column; gap: 4px; } .mc-cfg-format-card:hover { border-color: rgba(200,164,93,.5); } .mc-cfg-format-card.active { border-color: #C8A45D; background: rgba(200,164,93,.1); box-shadow: inset 0 0 0 1px rgba(200,164,93,.35); } .mc-cfg-format-card.active::after { content: '✓'; position: absolute; top: 8px; right: 10px; color: #C8A45D; font-size: 13px; font-weight: 700; } .mc-cfg-format-dims { font-family: 'Playfair Display', serif; font-size: 16px; color: #F8F8F6; } .mc-cfg-format-orientation { font-size: 11px; color: #8a8a8a; text-transform: uppercase; letter-spacing: .04em; } .mc-cfg-format-price { font-size: 12px; color: #C8A45D; margin-top: 4px; } .mc-cfg-format-badge { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: #F3D9A4; background: rgba(200,164,93,.15); border-radius: 2px; padding: 3px 6px; align-self: flex-start; margin-top: 2px; } .mc-cfg-custom-note { font-size: 12.5px; color: #8a8a8a; margin: 18px 0 6px; line-height: 1.6; } .mc-cfg-custom-link { font-size: 12.5px; color: #C8A45D; text-decoration: underline; text-underline-offset: 3px; } .mc-cfg-custom-link:hover { color: #F3D9A4; } .mc-cfg-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mc-cfg-choice-row-3 { grid-template-columns: 1fr 1fr 1fr; } .mc-cfg-choice-card { position: relative; background: #131211; border: 1px solid #2a2a2a; border-radius: 3px; padding: 18px; cursor: pointer; transition: all .25s ease; } .mc-cfg-choice-card:hover { border-color: rgba(200,164,93,.5); } .mc-cfg-choice-card.active { border-color: #C8A45D; background: rgba(200,164,93,.08); } .mc-cfg-choice-check { position: absolute; top: 12px; right: 14px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #444; color: transparent; font-size: 11px; display: flex; align-items: center; justify-content: center; transition: all .25s ease; } .mc-cfg-choice-card.active .mc-cfg-choice-check { border-color: #C8A45D; background: #C8A45D; color: #0A0A0A; } .mc-cfg-choice-card h3 { font-family: 'Playfair Display', serif !important; font-weight: 600; font-size: 15px; color: #F8F8F6 !important; margin: 0 26px 8px 0; line-height: 1.35; } .mc-cfg-choice-card p { font-size: 12.5px; line-height: 1.6; color: #a8a8a8; margin: 0 0 12px; } .mc-cfg-choice-price { font-size: 12px; color: #C8A45D; font-weight: 600; } .mc-cfg-auto-note { font-size: 12.5px; color: #e8c164; background: rgba(200,164,93,.08); border-left: 2px solid #C8A45D; padding: 10px 14px; margin-top: 14px; line-height: 1.6; } .mc-cfg-summary { background: #131211; border: 1px solid #2a2a2a; border-radius: 4px; padding: 22px 24px; } .mc-cfg-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13.5px; } .mc-cfg-summary-row span:first-child { color: #9a9a9a; } .mc-cfg-summary-row span:last-child { color: #F8F8F6; text-align: right; } .mc-cfg-summary-total { border-bottom: none; padding-top: 16px; margin-top: 4px; border-top: 1px solid rgba(200,164,93,.3); } .mc-cfg-summary-total span { font-size: 17px; font-weight: 700; } .mc-cfg-summary-total span:first-child { color: #F8F8F6; } .mc-cfg-summary-total span:last-child { color: #F3D9A4; font-family: 'Playfair Display', serif; } .mc-cfg-add-to-cart { width: 100%; margin-top: 20px; padding: 16px; border-radius: 2px; border: none; background: #C8A45D; color: #0A0A0A; font-family: Manrope, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: all .25s ease; } .mc-cfg-add-to-cart:hover:not(:disabled) { background: #F3D9A4; } .mc-cfg-add-to-cart:disabled { background: #2a2a2a; color: #666; cursor: not-allowed; } .mc-cfg-below-btn { font-size: 12px; color: #8a8a8a; text-align: center; margin: 14px 0 6px; line-height: 1.6; } .mc-cfg-contact-link { display: block; text-align: center; font-size: 12.5px; color: #C8A45D; text-decoration: underline; text-underline-offset: 3px; } .mc-cfg-contact-link:hover { color: #F3D9A4; } .mc-cfg-phase-note { margin-top: 22px; font-size: 11px; color: #6a6a6a; text-align: center; line-height: 1.6; border-top: 1px dashed #2a2a2a; padding-top: 14px; } /* ---- Guide interactif des dimensions (prototype UX) ---- */ .mc-cfg-dim-guide-link { display: inline-block; background: none; border: none; padding: 0; margin: 8px 0 18px; font-family: Manrope, sans-serif; font-size: 12.5px; color: #C8A45D; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .mc-cfg-dim-guide-link:hover { color: #F3D9A4; } /* Réagencement titre/description sous l'image + ligne d'en-tête étape 1 — validé sur la fiche pilote (post 921), déployé à tout le catalogue. Voir initProductLayoutRework() dans custom.js. */ body.mc-cfg-active .mc-cfg-title { margin-top: 28px; } body.mc-cfg-active .mc-cfg-step1-headrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; } body.mc-cfg-active .mc-cfg-step1-headrow .mc-cfg-step-title { margin-bottom: 0; } body.mc-cfg-active .mc-cfg-dim-guide-link { font-size: 16px; margin: 0; } .mc-cfg-modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5,5,4,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .mc-cfg-modal-overlay.open { opacity: 1; pointer-events: auto; } body.mc-cfg-modal-lock { overflow: hidden; } .mc-cfg-modal { position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; background: #0A0A0A; border: 1px solid rgba(200,164,93,.25); border-radius: 4px; padding: 36px 32px 30px; text-align: center; color: #F8F8F6; box-shadow: 0 30px 80px rgba(0,0,0,.55); transform: scale(.96); transition: transform .3s ease; } .mc-cfg-modal-overlay.open .mc-cfg-modal { transform: scale(1); } .mc-cfg-modal-close { position: absolute; top: 16px; right: 18px; background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; color: #8a8a8a; padding: 6px; } .mc-cfg-modal-close:hover { color: #F3D9A4; } .mc-cfg-modal-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #C8A45D; margin: 0 0 8px; } .mc-cfg-modal-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 22px; margin: 0 0 22px; color: #F8F8F6; } /* ---- Immersive layout (near-fullscreen): scene left, format picker right, zoom/action controls in a footer bar. The room photo itself is sized in JS (mcFitRoomBox) to fill its column like object-fit:contain would. ---- */ .mc-cfg-modal-immersive { max-width: 95vw; width: 95vw; max-height: 92vh; height: 92vh; padding: 22px 28px 20px; text-align: left; display: flex; flex-direction: column; } .mc-cfg-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex: 0 0 auto; } .mc-cfg-modal-immersive .mc-cfg-modal-eyebrow { margin: 0 0 4px; } .mc-cfg-modal-immersive .mc-cfg-modal-title { margin: 0; font-size: 20px; } .mc-cfg-modal-immersive .mc-cfg-modal-close { position: static; flex: 0 0 auto; } .mc-cfg-modal-body { display: flex; gap: 28px; flex: 1 1 auto; min-height: 0; margin-top: 16px; } .mc-cfg-modal-scene-col { flex: 1 1 68%; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .mc-cfg-modal-room-frame { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; } .mc-cfg-modal-side-col { flex: 0 0 300px; min-width: 260px; max-width: 320px; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; } .mc-cfg-modal-room { position: relative; overflow: hidden; border-radius: 3px; background: #050504; } .mc-cfg-modal-scene { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .5s cubic-bezier(.4,0,.2,1); } .mc-cfg-modal-room-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .mc-cfg-modal-art { position: absolute; background-size: cover; background-position: center; /* No decorative frame — reads as an actual canvas on the wall: a soft natural drop shadow for depth, plus a faint inset shade along the bottom/right suggesting the canvas's thin (1.5") wrapped edge. */ box-shadow: 0 10px 22px rgba(0,0,0,.4), inset -3px -3px 5px rgba(0,0,0,.14); transition: width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1), left .4s cubic-bezier(.4,0,.2,1), top .4s cubic-bezier(.4,0,.2,1), box-shadow .2s ease; cursor: grab; touch-action: none; } .mc-cfg-modal-art:hover { box-shadow: 0 10px 22px rgba(0,0,0,.4), inset -3px -3px 5px rgba(0,0,0,.14), 0 0 0 2px rgba(200,164,93,.5); } .mc-cfg-modal-art.dragging { cursor: grabbing; transition: box-shadow .2s ease; box-shadow: 0 14px 28px rgba(0,0,0,.48), inset -3px -3px 5px rgba(0,0,0,.14), 0 0 0 2px rgba(200,164,93,.85); } .mc-cfg-modal-hint { font-size: 11.5px; color: #ffffff; font-style: italic; line-height: 1.55; margin: 10px 0 0; text-align: center; flex: 0 0 auto; } .mc-cfg-modal-caption.mc-cfg-modal-dims { display: block; color: #C8A45D; font-size: 13px; font-weight: 600; letter-spacing: .02em; flex: 0 0 auto; } .mc-cfg-modal-picker { margin-top: 16px; text-align: left; border-top: 1px solid rgba(255,255,255,.07); padding-top: 16px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .mc-cfg-modal-picker-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a; margin: 0 0 12px; flex: 0 0 auto; } .mc-cfg-modal-guide-tabs { margin-bottom: 14px; flex: 0 0 auto; } .mc-cfg-modal-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; align-content: start; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; } .mc-cfg-modal-guide-grid .mc-cfg-format-card { padding: 9px 8px; gap: 2px; } .mc-cfg-modal-guide-grid .mc-cfg-format-dims { font-size: 12px; } .mc-cfg-modal-guide-grid .mc-cfg-format-price { font-size: 11px; color: #8a8a8a; } .mc-cfg-modal-guide-grid .mc-cfg-format-card.active .mc-cfg-format-price { color: #C8A45D; } @media (max-width: 900px) { .mc-cfg-modal-immersive { width: 96vw; max-width: 96vw; height: 94vh; max-height: 94vh; padding: 18px 16px 16px; } .mc-cfg-modal-body { flex-direction: column; gap: 16px; } .mc-cfg-modal-scene-col { flex: 1 1 52%; } .mc-cfg-modal-side-col { flex: 1 1 40%; max-width: none; min-width: 0; } } @media (max-width: 640px) { .mc-cfg-modal { padding: 28px 18px 24px; } .mc-cfg-modal-title { font-size: 19px; margin-bottom: 18px; } .mc-cfg-modal-guide-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } } @media (max-width: 1024px) { .mc-cfg { grid-template-columns: 1fr; padding: 20px 24px 70px; gap: 32px; } .mc-cfg-left { position: static; } } @media (max-width: 640px) { .mc-cfg { padding: 16px 16px 50px; } .mc-cfg-choice-row, .mc-cfg-choice-row-3 { grid-template-columns: 1fr; } .mc-cfg-format-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .mc-cfg-reference { width: 120px; } } @media (prefers-reduced-motion: reduce) { .mc-cfg-zoom-btn, .mc-cfg-format-card, .mc-cfg-choice-card, .mc-cfg-add-to-cart { transition: none; } } /* ============================================================ GALLERY CATEGORY PAGES — shared redesign applied identically to all 7 top-level categories (Animaux, Femmes, Hommes, Couples, Sports, Divers, Personnages fictifs). Every rule below keys off body.mc-gallery-page, one class set synchronously (before first paint — see initGalleryPageClass in custom.js) for exactly those 7 pages, so there is a single place to touch if the design ever changes for all of them at once, and a single place (the MC_GALLERY_CATEGORIES array in custom.js) to add or remove one. No other category page is affected. ============================================================ */ body.mc-gallery-page .woocommerce-products-header { display: none; } body.mc-gallery-page .woocommerce-breadcrumb { font-family: Manrope, sans-serif; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #7a7a7a; margin: 0 0 20px; } body.mc-gallery-page .woocommerce-breadcrumb a { color: #9a9a9a; } /* The search bar lives above the whole category layout (see .mc-search-hero below), so it's no longer a child of .ast-woocommerce- container — dropped from this reorder. Sort ("Tri") is removed outright per the brief rather than just reordered. The native grid, hidden by default on hub categories (see the mc-cat-hub rule above, Animaux/Sports/ Divers only) so that only the tab bar shows, is explicitly restored here: with the result count and "Produits" both requested as visible, hiding the grid under them would read as broken, not intentional. Categories without sub-categories never get mc-cat-hub in the first place, so their grid was never hidden and this override is simply inert for them — nothing extra needed to handle that case. */ body.mc-gallery-page .ast-woocommerce-container { display: flex; flex-direction: column; } body.mc-gallery-page .ast-woocommerce-container > .woocommerce-breadcrumb { order: 2; } body.mc-gallery-page .ast-woocommerce-container > .woocommerce-result-count { order: 3; } body.mc-gallery-page .ast-woocommerce-container > ul.products { order: 4; } body.mc-gallery-page .ast-woocommerce-container > .woocommerce-pagination { order: 5; } body.mc-gallery-page .woocommerce-ordering { display: none !important; } body.mc-gallery-page.mc-cat-hub .ast-woocommerce-container > ul.products:not(.mc-search-results-grid) { display: grid !important; } /* Tightened on every gallery category — the brief asked for the whole top of the page (tabs, search, works, start of the grid) to be reachable without scrolling on a standard screen, so vertical rhythm is deliberately denser here than the site's usual spacing. Only Animaux/Sports/Divers actually render a .mc-cat-tabs bar (the other 4 have no sub-categories), so this is inert — not just inconsistent-looking — on the rest; no separate "no sub-categories" spacing rule is needed, the layout closes the gap on its own since the element simply isn't there. */ body.mc-gallery-page .mc-cat-tabs { padding: 16px 40px 26px; } .mc-search-wrap.mc-search-hero { margin: 0 auto; padding: 26px 20px 6px; } @media (max-width: 767px) { .mc-search-wrap.mc-search-hero { padding: 18px 16px 4px; } } /* ========================================================================= CONFIGURATEUR — ajout au panier : indicateur de chargement, message d'erreur, et fenêtre de confirmation post-ajout (misterco-configurator-cart). ========================================================================= */ .mc-cfg-add-to-cart.mc-loading { position: relative; color: transparent !important; pointer-events: none; } .mc-cfg-add-to-cart.mc-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: mc-spin 0.7s linear infinite; } @keyframes mc-spin { to { transform: rotate(360deg); } } .mc-cfg-cart-error { margin: 10px 0 0; padding: 10px 14px; background: rgba(178, 58, 58, 0.12); border: 1px solid rgba(178, 58, 58, 0.4); color: #d98080; font-size: 12.5px; border-radius: 2px; display: none; } .mc-cfg-cart-error.show { display: block; } body.mc-cart-modal-lock { overflow: hidden; } .mc-cart-modal-overlay { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.72); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px; opacity: 0; pointer-events: none; visibility: hidden; /* visibility switches to hidden only once the fade-out finishes, and back to visible instantly on open — without this, the modal's buttons stay keyboard-focusable (just invisible) between closes, which is a real keyboard-trap bug: opacity alone never removes elements from tab order. */ transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .mc-cart-modal-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.25s ease, visibility 0s linear 0s; } .mc-cart-modal { background: #0f0f0f; color: #f5f0e6; border: 1px solid rgba(197, 164, 90, 0.35); border-radius: 4px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 32px 28px 24px; position: relative; transform: translateY(12px); transition: transform 0.25s ease; } .mc-cart-modal-overlay.open .mc-cart-modal { transform: translateY(0); } .mc-cart-modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: #cfc6b3; font-size: 22px; line-height: 1; cursor: pointer; padding: 6px; } .mc-cart-modal-check { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #c5a45a; color: #c5a45a; display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 0 16px; } .mc-cart-modal h2 { font-family: 'Playfair Display', serif; font-size: 20px; letter-spacing: 0.01em; margin: 0 0 20px; font-weight: 600; color: #f5f0e6; } .mc-cart-modal-body { display: flex; gap: 16px; margin-bottom: 24px; } .mc-cart-modal-img { width: 96px; height: 96px; object-fit: cover; border-radius: 2px; flex-shrink: 0; background: #1c1c1c; } .mc-cart-modal-details { min-width: 0; } .mc-cart-modal-work-title { font-size: 15px; margin: 0 0 10px; color: #f5f0e6; font-weight: 500; } .mc-cart-modal-specs { margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; } .mc-cart-modal-specs > div { display: contents; } .mc-cart-modal-specs dt { color: #8f8676; margin: 0; } .mc-cart-modal-specs dd { margin: 0; color: #e4ddcb; } .mc-cart-modal-price { font-size: 17px; color: #c5a45a; margin: 0; font-weight: 600; } .mc-cart-modal-actions { display: flex; gap: 12px; flex-wrap: wrap; } .mc-cart-modal-continue, .mc-cart-modal-viewcart { flex: 1 1 auto; min-width: 160px; text-align: center; padding: 13px 18px; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 2px; transition: opacity 0.2s ease; } .mc-cart-modal-continue { background: transparent; border: 1px solid #6b6455; color: #e4ddcb; } .mc-cart-modal-viewcart { background: #c5a45a; border: 1px solid #c5a45a; color: #0f0f0f; } .mc-cart-modal-continue:hover, .mc-cart-modal-viewcart:hover { opacity: 0.85; } @media (max-width: 480px) { .mc-cart-modal { padding: 24px 18px 18px; } .mc-cart-modal-body { flex-direction: column; } .mc-cart-modal-img { width: 100%; height: 160px; } .mc-cart-modal-actions { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .mc-cart-modal-overlay, .mc-cart-modal { transition: none; } .mc-cfg-add-to-cart.mc-loading::after { animation: none; border-top-color: rgba(255, 255, 255, 0.6); } } /* ========================================================================= PANIER / COMMANDE / MON COMPTE — habillage MISTER & CO. Portée strictement limitée à ces 3 pages via les classes body natives de WooCommerce (body.woocommerce-cart / -checkout / -account) : aucun style ci-dessous ne peut s'appliquer ailleurs sur le site. Aucun name/id/logique WooCommerce n'est modifié — uniquement l'apparence des mêmes éléments. ========================================================================= */ body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account { --mcwc-bg: #0a0a0a; --mcwc-panel: #111111; --mcwc-line: rgba(197, 164, 90, 0.4); --mcwc-line-soft: rgba(255, 255, 255, 0.14); --mcwc-gold: #c5a45a; --mcwc-gold-soft: rgba(197, 164, 90, 0.14); --mcwc-text: #f5f2ea; --mcwc-text-dim: #d9d0bd; --mcwc-text-mute: #a89f8c; --mcwc-error: #e28080; --mcwc-error-bg: rgba(200, 90, 90, 0.14); --mcwc-success: #8fbf8a; --mcwc-success-bg: rgba(120, 175, 115, 0.14); --mcwc-info: #8fb4d9; --mcwc-info-bg: rgba(120, 155, 200, 0.14); } body.woocommerce-cart .woocommerce, body.woocommerce-checkout .woocommerce, body.woocommerce-account .woocommerce { color: var(--mcwc-text); font-family: 'Manrope', sans-serif; } body.woocommerce-cart .woocommerce a, body.woocommerce-checkout .woocommerce a, body.woocommerce-account .woocommerce a { color: inherit; } body.woocommerce-cart .entry-header, body.woocommerce-checkout .entry-header, body.woocommerce-account .entry-header { border-bottom: 1px solid var(--mcwc-line-soft); padding-bottom: 22px; margin-bottom: 8px; } body.woocommerce-cart .entry-title, body.woocommerce-checkout .entry-title, body.woocommerce-account .entry-title { font-family: 'Playfair Display', serif; font-weight: 600; } /* ---- Bandeaux de notice WooCommerce (succès / erreur / info) — jamais masqués, juste réhabillés pour rester dans la charte tout en restant parfaitement lisibles et clairement distingués les uns des autres. ---- */ body.woocommerce-cart .woocommerce-message, body.woocommerce-checkout .woocommerce-message, body.woocommerce-account .woocommerce-message, body.woocommerce-cart .woocommerce-error, body.woocommerce-checkout .woocommerce-error, body.woocommerce-account .woocommerce-error, body.woocommerce-cart .woocommerce-info, body.woocommerce-checkout .woocommerce-info, body.woocommerce-account .woocommerce-info { background: var(--mcwc-panel); border: 1px solid var(--mcwc-line-soft); border-left-width: 3px; color: var(--mcwc-text); border-radius: 2px; padding: 16px 20px; font-size: 13.5px; list-style: none; } body.woocommerce-cart .woocommerce-message, body.woocommerce-checkout .woocommerce-message, body.woocommerce-account .woocommerce-message { background: var(--mcwc-success-bg); border-left-color: var(--mcwc-success); } body.woocommerce-cart .woocommerce-error, body.woocommerce-checkout .woocommerce-error, body.woocommerce-account .woocommerce-error { background: var(--mcwc-error-bg); border-left-color: var(--mcwc-error); } body.woocommerce-cart .woocommerce-info, body.woocommerce-checkout .woocommerce-info, body.woocommerce-account .woocommerce-info { background: var(--mcwc-info-bg); border-left-color: var(--mcwc-info); } body.woocommerce-cart .woocommerce-message a.button, body.woocommerce-checkout .woocommerce-message a.button, body.woocommerce-account .woocommerce-message a.button { background: var(--mcwc-gold); color: #0a0a0a; } /* ========================================================================= PANIER ========================================================================= */ body.woocommerce-cart table.cart { background: none; border: none; width: 100%; } body.woocommerce-cart table.cart thead { display: none; /* les libellés réapparaissent en ligne dans chaque carte */ } /* WooCommerce injecte ses propres étiquettes ("Produit:", "Quantité:"...) via ::before { content: attr(data-title) } dans son CSS responsive natif — neutralisé ici pour éviter un doublon avec nos propres libellés (dl.variation). */ body.woocommerce-cart table.cart td::before { content: none !important; } body.woocommerce-cart table.cart td { text-align: left !important; border-bottom: none !important; padding: 0 !important; } body.woocommerce-cart table.cart, body.woocommerce-cart table.cart tbody, body.woocommerce-cart table.cart tr, body.woocommerce-cart table.cart td { display: block; width: 100%; } body.woocommerce-cart table.cart tr.cart_item { display: grid; grid-template-columns: 92px 1fr auto; grid-template-areas: "thumb name name" "thumb qty price" "thumb remove remove"; column-gap: 22px; row-gap: 10px; padding: 26px 0; border-bottom: 1px solid var(--mcwc-line-soft); align-items: start; } body.woocommerce-cart table.cart tr.cart_item:first-child { padding-top: 0; } body.woocommerce-cart table.cart td.product-thumbnail { grid-area: thumb; } body.woocommerce-cart table.cart td.product-name { grid-area: name; } body.woocommerce-cart table.cart td.product-quantity { grid-area: qty; } body.woocommerce-cart table.cart td.product-price, body.woocommerce-cart table.cart td.product-subtotal { grid-area: price; text-align: right; } body.woocommerce-cart table.cart td.product-remove { grid-area: remove; text-align: left; } /* WooCommerce affiche le prix ET le sous-total séparément ; en quantité 1 ils sont identiques — on garde seulement le sous-total (déjà correct dans tous les cas, y compris quantité > 1) pour éviter la redondance visuelle. */ body.woocommerce-cart table.cart td.product-price { display: none; } body.woocommerce-cart table.cart td.product-thumbnail img { width: 92px; height: 92px; object-fit: cover; border-radius: 2px; } body.woocommerce-cart table.cart td.product-name > a { font-size: 16px; font-weight: 500; color: var(--mcwc-text); text-decoration: none; display: block; margin-bottom: 10px; } body.woocommerce-cart table.cart td.product-name dl.variation { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12px; } body.woocommerce-cart table.cart td.product-name dl.variation dt { color: var(--mcwc-text-mute); font-weight: 400; margin: 0; float: none; clear: none; width: auto; } body.woocommerce-cart table.cart td.product-name dl.variation dd { color: var(--mcwc-text-dim); margin: 0; float: none; width: auto; } body.woocommerce-cart table.cart td.product-name dl.variation p { margin: 0; } body.woocommerce-cart table.cart td.product-subtotal .woocommerce-Price-amount { font-family: 'Playfair Display', serif; font-size: 16px; color: var(--mcwc-gold); } body.woocommerce-cart table.cart .quantity { display: inline-flex; align-items: center; border: 1px solid var(--mcwc-line-soft); border-radius: 2px; } body.woocommerce-cart table.cart input.qty { background: none; border: none; color: var(--mcwc-text); width: 52px; text-align: center; font-size: 13px; padding: 9px 4px; font-family: 'Manrope', sans-serif; } body.woocommerce-cart table.cart input.qty:focus { outline: none; box-shadow: 0 0 0 2px var(--mcwc-gold-soft) inset; } body.woocommerce-cart table.cart td.product-remove a.remove { color: var(--mcwc-text-mute); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; line-height: normal; background: none; border-radius: 0; } body.woocommerce-cart table.cart td.product-remove a.remove:hover { color: var(--mcwc-error); background: none; } body.woocommerce-cart table.cart td.product-remove a.remove svg { width: 12px; height: 12px; } /* ---- Totaux / bouton commander ---- */ body.woocommerce-cart .cart-collaterals { max-width: 380px; margin-left: auto; margin-top: 20px; } body.woocommerce-cart .cart_totals { background: var(--mcwc-panel); border: 1px solid var(--mcwc-line-soft); border-radius: 4px; padding: 26px; } body.woocommerce-cart .cart_totals h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 16px; margin: 0 0 18px; background: none; color: var(--mcwc-text); padding: 0; } /* Astra (thème) impose son propre fond clair sur ce titre précis via .woocommerce-cart .cart-collaterals .cart_totals > h2 { background-color: var(--ast-global-dark-lfs) } — plus spécifique que la règle ci-dessus, donc elle gagnait. Neutralisée explicitement, avec la même spécificité. */ .woocommerce-cart .cart-collaterals .cart_totals > h2, .woocommerce-cart .cart-collaterals .cross-sells > h2 { background-color: transparent !important; border-bottom: 1px solid var(--mcwc-line-soft) !important; color: var(--mcwc-text) !important; margin: 0 0 18px !important; padding-bottom: 14px !important; } /* Garde-fou : un style global du thème (fond quasi blanc sur les h2) peut se glisser sur n'importe quel titre de ces 3 pages — neutralisé partout. */ body.woocommerce-cart h1, body.woocommerce-cart h2, body.woocommerce-cart h3, body.woocommerce-checkout h1, body.woocommerce-checkout h2, body.woocommerce-checkout h3, body.woocommerce-account h1, body.woocommerce-account h2, body.woocommerce-account h3 { background: none; color: var(--mcwc-text); } body.woocommerce-cart .cart_totals table { width: 100%; border: none; } body.woocommerce-cart .cart_totals table tr th, body.woocommerce-cart .cart_totals table tr td { border: none; border-bottom: 1px solid var(--mcwc-line-soft); padding: 10px 0; font-size: 13px; color: var(--mcwc-text-dim); text-align: right; font-weight: 400; } body.woocommerce-cart .cart_totals table tr th { text-align: left; color: var(--mcwc-text-dim); } body.woocommerce-cart .cart_totals table tr.order-total th, body.woocommerce-cart .cart_totals table tr.order-total td { border-bottom: none; padding-top: 16px; color: var(--mcwc-text); font-size: 15px; } body.woocommerce-cart .cart_totals table tr.order-total .woocommerce-Price-amount { font-family: 'Playfair Display', serif; color: var(--mcwc-gold); font-size: 19px; } /* Bouton "Mettre à jour le panier" — même famille visuelle que le bouton principal, avec un état désactivé explicite et lisible (WooCommerce le désactive nativement tant que la quantité n'a pas changé — comportement fonctionnel intact, seul l'habillage change). */ body.woocommerce-cart .woocommerce-cart-form .button, body.woocommerce-checkout .button { background: var(--mcwc-gold); border: 1px solid var(--mcwc-gold); color: #0a0a0a; border-radius: 2px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 13px 22px; } body.woocommerce-cart .woocommerce-cart-form .button:disabled, body.woocommerce-cart .woocommerce-cart-form .button.disabled, body.woocommerce-checkout .button:disabled { background: transparent; border-color: var(--mcwc-line-soft); color: var(--mcwc-text-mute); cursor: not-allowed; opacity: 1; } body.woocommerce-cart .wc-proceed-to-checkout { padding: 0; margin-top: 18px; } body.woocommerce-cart .checkout-button { display: block; width: 100%; text-align: center; padding: 15px 20px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--mcwc-gold); border: 1px solid var(--mcwc-gold); color: #0a0a0a !important; border-radius: 2px; font-weight: 600; } body.woocommerce-cart .checkout-button:hover { opacity: 0.88; } /* ---- Panier vide ---- */ body.woocommerce-cart .cart-empty.woocommerce-info { text-align: center; padding: 60px 20px; border: 1px dashed var(--mcwc-line); background: none; list-style: none; border-left-width: 1px; } body.woocommerce-cart .return-to-shop .button { display: inline-block; margin-top: 18px; padding: 14px 30px; background: var(--mcwc-gold); color: #0a0a0a; text-decoration: none; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; font-weight: 600; } @media (max-width: 767px) { body.woocommerce-cart table.cart tr.cart_item { grid-template-columns: 68px 1fr; grid-template-areas: "thumb name" "thumb qty" "thumb price" "thumb remove"; } body.woocommerce-cart table.cart td.product-thumbnail img { width: 68px; height: 68px; } body.woocommerce-cart table.cart td.product-price, body.woocommerce-cart table.cart td.product-subtotal { text-align: left; } body.woocommerce-cart .cart-collaterals { max-width: 100%; } } /* ========================================================================= COMMANDE (checkout) — portée : body.woocommerce-checkout uniquement. ========================================================================= */ /* form.checkout a en réalité 3 enfants directs (pas 2) : .col2-set (facturation), un

Votre commande

SANS classe, puis .woocommerce-checkout-review-order. Confirmé par inspection réelle du DOM — le h3 doit être explicitement placé dans la même colonne que le récapitulatif, sinon la grille à 2 pistes le place mal et écrase la largeur du panneau de droite. */ body.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1fr 380px; grid-template-areas: "billing title" "billing review"; column-gap: 56px; row-gap: 18px; align-items: start; } /* Les éléments de grille gardent, par défaut, une largeur minimale implicite basée sur leur contenu (min-width: auto) — combinée aux anciennes règles float de WooCommerce/Astra sur .col2-set (width:100% + float:left, hérité d'une mise en page à colonnes flottantes), cela empêchait l'étirement correct dans la grille et écrasait la largeur du panneau de droite. Confirmé par inspection réelle : .col2-set ne faisait que 255px au lieu des ~465px attendus. */ body.woocommerce-checkout form.checkout > .col2-set, body.woocommerce-checkout form.checkout > h3, body.woocommerce-checkout form.checkout > .woocommerce-checkout-review-order { min-width: 0; width: auto !important; float: none !important; } body.woocommerce-checkout form.checkout > .col2-set { grid-area: billing; } body.woocommerce-checkout form.checkout > h3 { grid-area: title; } body.woocommerce-checkout form.checkout > .woocommerce-checkout-review-order { grid-area: review; } /* .col-1 (facturation) à l'intérieur de .col2-set garde le même piège float/width hérité — neutralisé pour occuper toute la largeur disponible. */ body.woocommerce-checkout .col2-set .col-1 { width: 100% !important; float: none !important; min-width: 0; } @media (max-width: 900px) { body.woocommerce-checkout form.checkout { grid-template-columns: 1fr; grid-template-areas: "billing" "title" "review"; row-gap: 22px; } } /* ---- Champs de facturation ---- */ body.woocommerce-checkout .woocommerce-billing-fields h3, body.woocommerce-checkout .woocommerce-additional-fields h3 { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mcwc-gold); margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--mcwc-line); background: none; font-family: 'Manrope', sans-serif; font-weight: 600; } body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper, body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; } @media (max-width: 500px) { body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper, body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; } } body.woocommerce-checkout .form-row-wide, body.woocommerce-checkout #order_comments_field { grid-column: 1 / -1; } body.woocommerce-checkout p.form-row, body.woocommerce-account p.form-row { margin: 0 0 4px; } body.woocommerce-checkout .form-row label, body.woocommerce-account .form-row label { display: block; font-size: 11px; letter-spacing: 0.03em; color: var(--mcwc-text-mute); margin-bottom: 8px; } body.woocommerce-checkout .form-row label .required, body.woocommerce-account .form-row label .required { color: var(--mcwc-gold); text-decoration: none; } body.woocommerce-checkout .form-row label .optional, body.woocommerce-account .form-row label .optional { color: var(--mcwc-text-mute); font-size: 10.5px; } body.woocommerce-checkout .input-text, body.woocommerce-checkout select, body.woocommerce-checkout textarea, body.woocommerce-checkout .select2-selection, body.woocommerce-account .input-text, body.woocommerce-account select, body.woocommerce-account textarea, body.woocommerce-account .select2-selection { width: 100%; background: var(--mcwc-panel) !important; border: 1px solid var(--mcwc-line-soft) !important; color: var(--mcwc-text) !important; padding: 12px 14px; font-size: 13.5px; border-radius: 2px; font-family: 'Manrope', sans-serif; box-shadow: none; } body.woocommerce-checkout .select2-selection__rendered, body.woocommerce-account .select2-selection__rendered { color: var(--mcwc-text) !important; line-height: 2.4 !important; } body.woocommerce-checkout .input-text:focus, body.woocommerce-checkout select:focus, body.woocommerce-checkout textarea:focus, body.woocommerce-account .input-text:focus, body.woocommerce-account select:focus, body.woocommerce-account textarea:focus { outline: none; border-color: var(--mcwc-gold) !important; box-shadow: 0 0 0 3px var(--mcwc-gold-soft) !important; } /* État d'erreur — WooCommerce ajoute .woocommerce-invalid sur le

parent quand la validation native échoue ; jamais masqué, toujours visible. */ body.woocommerce-checkout .form-row.woocommerce-invalid .input-text, body.woocommerce-checkout .form-row.woocommerce-invalid select, body.woocommerce-account .form-row.woocommerce-invalid .input-text, body.woocommerce-account .form-row.woocommerce-invalid select { border-color: var(--mcwc-error) !important; box-shadow: 0 0 0 3px var(--mcwc-error-bg) !important; } body.woocommerce-checkout .form-row.woocommerce-invalid label, body.woocommerce-account .form-row.woocommerce-invalid label { color: var(--mcwc-error); } /* Mot de passe : bouton "afficher" natif de WooCommerce, dans le champ */ body.woocommerce-account .show-password-input { right: 10px; } body.woocommerce-account span.password-input { position: relative; display: block; } /* ---- Récapitulatif de commande — même traitement "carte" que le panier ---- */ body.woocommerce-checkout form.checkout > h3 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 16px; background: none; color: var(--mcwc-text); margin: 0; } body.woocommerce-checkout #order_review { background: var(--mcwc-panel); border: 1px solid var(--mcwc-line-soft); border-radius: 4px; padding: 26px; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table { background: none; border: none; width: 100%; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead, .woocommerce-page.woocommerce-checkout table.shop_table thead, .woocommerce.woocommerce-checkout table.shop_table thead { display: none !important; background: none !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table, body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody, body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr, body.woocommerce-checkout table.woocommerce-checkout-review-order-table td { display: block; width: 100%; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item { padding: 16px 0; border-bottom: 1px solid var(--mcwc-line-soft); } body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item:first-child { padding-top: 0; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table td { padding: 0 !important; border: none !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name { font-size: 13px; color: var(--mcwc-text); margin-bottom: 6px; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name .product-quantity { color: var(--mcwc-text-mute); font-weight: 400; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0 0; font-size: 11px; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation dt { color: var(--mcwc-text-mute); font-weight: 400; float: none; width: auto; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation dd { color: var(--mcwc-text-dim); margin: 0; float: none; width: auto; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation p { margin: 0; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total { text-align: left; margin-top: 6px; font-family: 'Playfair Display', serif; color: var(--mcwc-gold); font-size: 14px; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--mcwc-line-soft); font-size: 13px; color: var(--mcwc-text-dim); } body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr th { font-weight: 400; text-align: left; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total { border-bottom: none; padding-top: 16px; font-size: 15px; color: var(--mcwc-text); } body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount { font-family: 'Playfair Display', serif; color: var(--mcwc-gold); font-size: 19px; } /* ---- Moyens de paiement ---- */ body.woocommerce-checkout ul.wc_payment_methods { list-style: none; margin: 20px 0 0; padding: 0; } body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method { border: 1px solid var(--mcwc-line-soft); border-radius: 2px; padding: 14px 16px; margin-bottom: 10px; } body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label { color: var(--mcwc-text); font-size: 13px; display: flex; align-items: center; gap: 10px; } /* #payment div.payment_box — fond gris clair imposé par Astra (rgb(223,220,222) + texte rgb(81,81,81)) : illisible sur fond noir, neutralisé avec la même spécificité que la règle du thème. */ #add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box, .woocommerce-page.woocommerce-checkout #payment div.payment_box, .woocommerce.woocommerce-checkout #payment div.payment_box { background-color: var(--mcwc-gold-soft) !important; color: var(--mcwc-text-dim) !important; border: 1px solid var(--mcwc-line) !important; border-radius: 2px !important; } body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method .payment_box p { color: var(--mcwc-text-dim); } /* ---- Bouton "Commander" ---- */ body.woocommerce-checkout #place_order { width: 100%; background: var(--mcwc-gold); border: 1px solid var(--mcwc-gold); color: #0a0a0a; padding: 16px 20px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; border-radius: 2px; margin-top: 18px; } body.woocommerce-checkout #place_order:hover { opacity: 0.88; } @media (max-width: 767px) { body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper, body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; } body.woocommerce-checkout .form-row-first, body.woocommerce-checkout .form-row-last { grid-column: 1 / -1; } } /* ========================================================================= MON COMPTE — portée : body.woocommerce-account uniquement. Structure ci-dessous basée sur les gabarits standards et stables de WooCommerce (myaccount/*.php, inchangés depuis de nombreuses versions). Vérifié en direct, sans connexion : connexion, mot de passe oublié. Le tableau de bord/commandes/adresses/détails exigent un compte connecté — voir la checklist de vérification manuelle fournie séparément. ========================================================================= */ /* ---- Connexion / inscription / mot de passe oublié ---- */ body.woocommerce-account .woocommerce > form.woocommerce-form-login, body.woocommerce-account .woocommerce > form.lost_reset_password, body.woocommerce-account .woocommerce > form.woocommerce-ResetPassword { max-width: 420px; margin: 0 auto; background: var(--mcwc-panel); border: 1px solid var(--mcwc-line-soft); border-radius: 4px; padding: 34px 32px; } body.woocommerce-account .woocommerce > p { max-width: 420px; margin: 0 auto 20px; text-align: center; color: var(--mcwc-text-dim); font-size: 13px; } /* Si l'inscription est un jour activée, WooCommerce ajoute .u-columns.col2-set avec .col-1 (connexion) / .col-2 (inscription) — même traitement carte, côte à côte, comme validé sur la maquette. */ body.woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 760px; margin: 0 auto; border: 1px solid var(--mcwc-line-soft); border-radius: 4px; overflow: hidden; } body.woocommerce-account .u-columns.col2-set .u-column1, body.woocommerce-account .u-columns.col2-set .u-column2 { padding: 34px 32px; } body.woocommerce-account .u-columns.col2-set .u-column2 { border-left: 1px solid var(--mcwc-line-soft); background: var(--mcwc-panel-2, #161616); } body.woocommerce-account .u-columns.col2-set form { max-width: none !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; } @media (max-width: 700px) { body.woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; } body.woocommerce-account .u-columns.col2-set .u-column2 { border-left: none; border-top: 1px solid var(--mcwc-line-soft); } } body.woocommerce-account .woocommerce-form-row--wide { margin: 0 0 16px; } body.woocommerce-account .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mcwc-text-mute); font-weight: 400; } body.woocommerce-account .woocommerce-LostPassword { display: block; margin-top: 14px; font-size: 11.5px; color: var(--mcwc-gold); text-decoration: underline; text-underline-offset: 3px; } body.woocommerce-account button.woocommerce-Button, body.woocommerce-account button.woocommerce-button { width: 100%; background: var(--mcwc-gold); border: 1px solid var(--mcwc-gold); color: #0a0a0a; padding: 14px 20px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; border-radius: 2px; margin-top: 8px; } body.woocommerce-account button.woocommerce-Button:hover { opacity: 0.88; } /* ---- Navigation "Mon compte" (tableau de bord / commandes / adresses / détails / déconnexion) ---- */ body.woocommerce-account .woocommerce-MyAccount-navigation { border: 1px solid var(--mcwc-line-soft); border-radius: 4px; overflow: hidden; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--mcwc-line-soft); } body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; } body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 13px 18px; font-size: 12.5px; color: var(--mcwc-text-dim); text-decoration: none; border-left: 2px solid transparent; } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--mcwc-gold); background: var(--mcwc-gold-soft); border-left-color: var(--mcwc-gold); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--mcwc-text-mute); } body.woocommerce-account .woocommerce-MyAccount-content { background: var(--mcwc-panel); border: 1px solid var(--mcwc-line-soft); border-radius: 4px; padding: 30px; } body.woocommerce-account .woocommerce-MyAccount-content > p { color: var(--mcwc-text-dim); font-size: 13.5px; line-height: 1.8; } body.woocommerce-account .woocommerce-MyAccount-content mark { background: none; color: var(--mcwc-gold); font-weight: 600; } body.woocommerce-account .woocommerce-MyAccount-content a { color: var(--mcwc-gold); } /* Disposition générale : navigation à gauche, contenu à droite (structure par défaut du gabarit myaccount/my-account.php de WooCommerce). */ body.woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; } body.woocommerce-account .woocommerce > form.woocommerce-form-login, body.woocommerce-account .woocommerce > form.lost_reset_password, body.woocommerce-account .woocommerce > p, body.woocommerce-account .woocommerce > .u-columns, body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:only-of-type { grid-column: 1 / -1; } @media (max-width: 782px) { body.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 20px; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; } body.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: none; flex-shrink: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation li a { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { border-left: none; border-bottom-color: var(--mcwc-gold); } } /* ---- Historique des commandes → cartes ---- */ body.woocommerce-account table.woocommerce-orders-table, body.woocommerce-account table.my_account_orders { background: none; border: none; width: 100%; } body.woocommerce-account table.woocommerce-orders-table thead { display: none; } body.woocommerce-account table.woocommerce-orders-table, body.woocommerce-account table.woocommerce-orders-table tbody, body.woocommerce-account table.woocommerce-orders-table tr, body.woocommerce-account table.woocommerce-orders-table td { display: block; width: 100%; } body.woocommerce-account table.woocommerce-orders-table td::before { content: none !important; } body.woocommerce-account table.woocommerce-orders-table td { padding: 0 !important; border: none !important; text-align: left !important; } body.woocommerce-account table.woocommerce-orders-table tr.order { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border: 1px solid var(--mcwc-line-soft); border-radius: 3px; padding: 16px 18px; margin-bottom: 12px; } body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number { font-family: 'Playfair Display', serif; color: var(--mcwc-gold); font-size: 14px; } body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-date { color: var(--mcwc-text-mute); font-size: 12px; } body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--mcwc-success); color: var(--mcwc-success); width: fit-content; } body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total { color: var(--mcwc-text); font-family: 'Playfair Display', serif; } body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { margin-left: auto; } body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button { background: transparent; border: 1px solid var(--mcwc-line); color: var(--mcwc-gold); padding: 8px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 2px; } /* ---- Détails d'une commande / téléchargements ---- */ body.woocommerce-account .woocommerce-order-details, body.woocommerce-account .woocommerce-customer-details, body.woocommerce-account .woocommerce-order-downloads { margin-top: 24px; } body.woocommerce-account .woocommerce-order-details__title, body.woocommerce-account .woocommerce-column__title, body.woocommerce-account .woocommerce-order-downloads__title { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600; background: none !important; border: none !important; padding: 0 0 12px !important; margin: 0 0 16px !important; border-bottom: 1px solid var(--mcwc-line-soft) !important; color: var(--mcwc-text) !important; } body.woocommerce-account table.shop_table thead th { background: none !important; color: var(--mcwc-text-mute) !important; border-bottom: 1px solid var(--mcwc-line) !important; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } body.woocommerce-account table.shop_table td { border-bottom: 1px solid var(--mcwc-line-soft) !important; color: var(--mcwc-text-dim); } body.woocommerce-account table.shop_table .woocommerce-Price-amount { color: var(--mcwc-gold); font-family: 'Playfair Display', serif; } /* ---- Adresses ---- */ body.woocommerce-account .woocommerce-Addresses, body.woocommerce-account .woocommerce-customer-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 600px) { body.woocommerce-account .woocommerce-Addresses, body.woocommerce-account .woocommerce-customer-details { grid-template-columns: 1fr; } } body.woocommerce-account .woocommerce-Address { border: 1px solid var(--mcwc-line-soft); border-radius: 3px; padding: 22px; } /* Astra impose un fond quasi blanc sur ces titres — neutralisé, même spécificité que la règle du thème (confirmé pour .cart_totals h2 plus haut ; même piège probable ici, corrigé par précaution). */ .woocommerce .woocommerce-Addresses .woocommerce-Address-title, .woocommerce .woocommerce-Addresses .woocommerce-column__title, .woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title, .woocommerce .woocommerce-MyAccount-content .woocommerce-column__title, .woocommerce-account .woocommerce-Addresses .woocommerce-Address-title, .woocommerce-account .woocommerce-Addresses .woocommerce-column__title, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title { background: none !important; border: none !important; border-bottom: 1px solid var(--mcwc-line-soft) !important; color: var(--mcwc-text) !important; padding: 0 0 12px !important; margin: 0 0 14px !important; font-family: 'Playfair Display', serif; font-size: 14px; } body.woocommerce-account .woocommerce-Address address { color: var(--mcwc-text-dim); font-size: 13px; line-height: 1.8; font-style: normal; } body.woocommerce-account .woocommerce-Address a.edit { display: inline-block; margin-top: 14px; font-size: 11.5px; color: var(--mcwc-gold); text-decoration: underline; text-underline-offset: 3px; } /* ---- Formulaire modifier adresse / détails du compte : mêmes champs, même traitement que la facturation à la commande. ---- */ body.woocommerce-account .woocommerce-address-fields__field-wrapper, body.woocommerce-account .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } body.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide, body.woocommerce-account .woocommerce-EditAccountForm fieldset, body.woocommerce-account .woocommerce-EditAccountForm > p:not([class*="form-row-"]) { grid-column: 1 / -1; } body.woocommerce-account .woocommerce-EditAccountForm fieldset { border: none; padding: 0; margin: 20px 0 0; } body.woocommerce-account .woocommerce-EditAccountForm legend { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mcwc-gold); padding-bottom: 12px; border-bottom: 1px solid var(--mcwc-line); width: 100%; margin-bottom: 18px; } @media (max-width: 600px) { body.woocommerce-account .woocommerce-address-fields__field-wrapper, body.woocommerce-account .woocommerce-EditAccountForm { grid-template-columns: 1fr; } } /* ============================================================ PHASE 2 — Refonte visuelle du panier (CSS uniquement) 21 juillet 2026 (v2 — ajustements : largeur du résumé, note de ramassage distincte) Cause exacte du problème corrigé ici, confirmée par inspection réelle : Astra applique .cart-collaterals .cart_totals { float:right; width:48%; } (pensé pour deux boîtes côte à côte). Un CSS antérieur limitait déjà .cart-collaterals à max-width:380px, mais ne réinitialisait jamais ce 48% sur l'enfant .cart_totals — 48% de 380px = 182px, d'où le texte coupé lettre par lettre. Corrigé en remplaçant la mise en page par flottants par une grille CSS explicite sur .woocommerce (qui contient exactement 3 enfants directs : notices, formulaire panier, totaux — confirmé par inspection du DOM réel), et en neutralisant les width hérités d'Astra sur .cart_totals lui-même. Aucun calcul, taxe, règle de livraison ni hook WooCommerce touché — uniquement de la présentation. ============================================================ */ body.woocommerce-cart .woocommerce { max-width: 1360px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 1fr 410px; grid-template-areas: "notices notices" "form totals"; column-gap: 40px; align-items: start; } body.woocommerce-cart .woocommerce-notices-wrapper { grid-area: notices; } body.woocommerce-cart .woocommerce-cart-form { grid-area: form; float: none; width: auto; } /* Neutralise le float:right et le width:48% hérités d'Astra — cause exacte du rétrécissement. La grille ci-dessus gère maintenant la position et la largeur de cette colonne. */ body.woocommerce-cart .cart-collaterals { grid-area: totals; float: none !important; width: 100% !important; max-width: 420px; min-width: 400px; margin: 0 !important; } body.woocommerce-cart .cart-collaterals .cart_totals { float: none !important; width: 100% !important; } /* Le bouton héritait de la largeur figée à 182px de l'ancien conteneur — corrigé pour occuper toute la largeur du bloc, sur une seule ligne. */ body.woocommerce-cart .wc-proceed-to-checkout .checkout-button, body.woocommerce-cart a.checkout-button { display: block !important; width: 100% !important; box-sizing: border-box !important; white-space: nowrap; text-align: center; } /* Note distincte sous le tableau des totaux, pour les instructions de ramassage détaillées — le titre de la méthode d'expédition a été raccourci séparément (réglage WooCommerce, pas du code). Bordure supérieure + espacement pour bien la séparer visuellement de la liste des méthodes d'expédition, plutôt que de sembler collée. IMPORTANT : .woocommerce-shipping-totals est la classe du , pas du — un ::after display:block posé directement sur le crée une cellule de tableau anonyme (nouvelle colonne à DROITE), au lieu d'un bloc EN DESSOUS. D'où le ciblage explicite du . */ body.woocommerce-cart tr.woocommerce-shipping-totals ul.woocommerce-shipping-methods { margin-bottom: 0 !important; } body.woocommerce-cart tr.woocommerce-shipping-totals td::after { content: "L'adresse complète et les instructions de ramassage seront transmises après la commande."; display: block; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; line-height: 1.5; color: var(--mcwc-text-dim, #9a9a9a); font-style: italic; } /* Responsive : tablette et mobile repassent en une seule colonne */ @media (max-width: 1024px) { body.woocommerce-cart .woocommerce { grid-template-columns: 1fr; grid-template-areas: "notices" "form" "totals"; } body.woocommerce-cart .cart-collaterals { max-width: 100%; min-width: 0; margin-top: 24px !important; } } /* ============================================================ RÈGLE GLOBALE PERMANENTE — 21 juillet 2026 Le nom de marque « MISTER & CO. » ne doit JAMAIS se couper sur deux lignes, peu importe la page, le composant, l'appareil ou la résolution d'écran (en-tête, pied de page, menu mobile, fiches produits, panier, commande, compte, fenêtres modales… — toutes ces zones utilisent le même en-tête/pied de page globaux ci-dessous, donc une seule règle les couvre toutes). Cause racine trouvée par inspection réelle : .site-title a avait une largeur ET une hauteur fixes (336px × 59px) codées en dur. Sur mobile, son conteneur flex le compresse à ~235–265px de large — plus petit que sa largeur intrinsèque — donc le texte se répartissait sur 2 lignes pour tenir dans l'espace réduit. Corrigé en libérant la largeur/hauteur (auto), en empêchant le flex de le compresser (flex-shrink:0) et en interdisant tout retour à la ligne (white-space:nowrap). Une taille de police adaptative réduit le texte sur petits écrans pour qu'il tienne toujours dans l'en-tête sans jamais se couper, conformément à la consigne : le conteneur/la mise en page s'ajustent, jamais le nom de marque. ============================================================ */ .site-title, .site-title a, .ast-site-title-wrap .site-title a { white-space: nowrap !important; width: auto !important; max-width: none !important; height: auto !important; flex-shrink: 0 !important; overflow: visible !important; } .ast-site-title-wrap { flex-shrink: 0 !important; } /* Police adaptative pour l'en-tête mobile compact (logo + icône menu sur une seule rangée) — mesuré empiriquement : ce texte, dans cette police, occupe environ 7,6px de largeur par px de taille de police ; les valeurs ci-dessous restent toujours nettement sous la largeur disponible mesurée (~235–265px). */ @media (max-width: 480px) { .ast-site-identity .site-title a, .ast-site-title-inner .site-title a, .ast-site-title-wrap .site-title a, .site-title a { font-size: 26px !important; } } @media (min-width: 481px) and (max-width: 767px) { .ast-site-identity .site-title a, .ast-site-title-inner .site-title a, .ast-site-title-wrap .site-title a, .site-title a { font-size: 32px !important; } } /* Toute autre occurrence du nom de marque dans le contenu du site (pied de page, section « Pourquoi choisir », texte éditorial…) déjà marquée par la classe .mc-brandmark lors de sa création. */ .mc-brandmark { white-space: nowrap !important; } /* ============================================================ CORRECTIFS AUDIT TEXTES COUPÉS — 21 juillet 2026 A, B, C, D, E — validés empiriquement avant déploiement (chaque test a confirmé : zéro débordement de page introduit, redistribution automatique via la disposition existante). Aucun prix, taxe, règle de livraison ni logique WooCommerce touché — présentation uniquement. ============================================================ */ /* ---- A. Étape 1 du configurateur (mobile) ---- Le titre et le bouton "Guide des dimensions" partageaient une même ligne flex trop étroite pour les deux combinés. Le titre reste toujours en texte complet sur une ligne ; si l'espace manque, le bouton (secondaire) passe sur sa propre ligne en dessous plutôt que de forcer le titre à se couper. */ .mc-cfg-step1-headrow { flex-wrap: wrap; row-gap: 8px; } .mc-cfg-step1-headrow .mc-cfg-step-title { white-space: nowrap; } .mc-cfg-step1-headrow .mc-cfg-dim-guide-link { white-space: nowrap; } /* ---- B. Format / Présentation / Finition (panier + commande) ---- La règle grid existante (auto 1fr) répartissait déjà correctement l'espace disponible — il ne manquait que white-space:nowrap sur la valeur. Vérifié avec le texte le plus long possible ("96 × 48 po — Horizontal") : le tableau du panier se redistribue automatiquement sans débordement de page. */ body.woocommerce-cart dl.variation dd, body.woocommerce-cart dl.variation dd p, body.woocommerce-checkout dl.variation dd, body.woocommerce-checkout dl.variation dd p { white-space: nowrap; } /* ---- C. Méthodes de livraison (panier + commande) ---- Espace déjà suffisant dans les deux cas — seul nowrap manquait. Vérifié : aucun débordement introduit sur panier ni commande. */ .woocommerce-shipping-methods li label { white-space: nowrap; } /* ---- D. Produits similaires (page produit) ---- Même règle responsive déjà validée sur la grille principale de la Boutique (3 → 2 → 1 colonnes), appliquée ici à la section "Produits similaires" qui ne l'avait jamais reçue. */ body.single-product .related.products ul.products, body.single-product .upsells.products ul.products { grid-template-columns: repeat(3, 1fr) !important; } @media (max-width: 1024px) { body.single-product .related.products ul.products, body.single-product .upsells.products ul.products { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { body.single-product .related.products ul.products, body.single-product .upsells.products ul.products { grid-template-columns: 1fr !important; } } /* ---- E. "Sous-Total" et libellés du tableau de totaux ---- Confirmé visuellement : "Sous-Total" se coupait littéralement au trait d'union ("Sous-" / "Total"). Vérifié : le tableau se redistribue automatiquement (212px → colonne élargie) sans changer sa largeur totale ni déborder la page. Appliqué à tous les libellés de la table de totaux par cohérence (Sous-Total, Shipment, TPS, TVQ, Total). */ .cart_totals table.shop_table th, .woocommerce-checkout-review-order-table th { white-space: nowrap; } /* ============================================================ Réduction de l'espace vertical excessif — pages catégories « galerie » de premier niveau uniquement (Animaux, Femmes, Hommes, Couples, Sports, Divers, Personnages fictifs). Cause exacte confirmée par mesure réelle (pas une supposition) : #primary { margin-top: 4em; } est une règle du thème Astra lui-même (main.min.css), pas quelque chose ajouté précédemment. À 16px de police racine, 4em = 64px — c'est cette marge qui crée l'essentiel de l'espace vide entre la barre de recherche et le fil d'Ariane/titre/description sur ces 7 pages, puisque la barre de recherche s'insère juste au-dessus de #primary. Réduite ici à 30px, uniquement sur les 7 pages galerie (portée strictement limitée via body.mc-gallery-page) — combinée au padding-bottom de 6px déjà présent sur .mc-search-wrap.mc-search-hero, cela donne un espace final d'environ 36px, dans la fourchette cible de 30-40px demandée. Rien d'autre n'est modifié : ni la barre de recherche, ni l'en-tête, ni la grille de produits, ni la typographie, ni les largeurs, ni les images, ni les pages de sous-catégories (qui n'ont pas la classe mc-gallery-page). ============================================================ */ body.mc-gallery-page #primary { margin-top: 30px !important; } /* ========================================================================= NOUVEAUX COMPOSANTS — À propos / Finitions / Informations (2026-07-22) Réutilisent la palette et les motifs déjà en place (mc-why-frame, mc-coll-*, mc-presentation-*) pour rester visuellement cohérents avec Collections et Accueil. Rien ci-dessous ne modifie une classe existante. ========================================================================= */ /* ---- Hero de page intérieure (photo + voile sombre + titre) ---- */ .mc-page-hero { position: relative; min-height: 43vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 40px 20px; background-color: #0A0A0A; } .mc-page-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; z-index: 0; } .mc-page-hero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,6,6,.55) 0%, rgba(6,6,6,.72) 55%, rgba(6,6,6,.92) 100%); } .mc-page-hero-content { position: relative; z-index: 2; max-width: 780px; } .mc-page-hero-eyebrow { display: block; font-family: Manrope, sans-serif; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: #C8A45D; margin: 0 0 18px; } .mc-page-hero h1 { font-family: 'Playfair Display', serif !important; font-weight: 600; color: #F8F8F6 !important; font-size: clamp(34px, 4vw, 54px); margin: 0; line-height: 1.12; } .mc-page-hero p { font-family: Manrope, sans-serif; color: #E4E1D8; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.75; margin: 20px auto 0; max-width: 620px; } .mc-page-hero .mc-btn-gold { margin-top: 24px; } @media (max-width: 767px) { .mc-page-hero { min-height: 34vh; padding: 34px 20px; } } /* ---- Bouton doré générique (extrait du bouton CTA déjà en usage) ---- */ .mc-btn-gold { display: inline-block; font-family: Manrope, sans-serif; font-weight: 600; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: #111111 !important; background: #C8A45D; text-decoration: none !important; padding: 15px 34px; border: 1px solid #C8A45D; border-radius: 2px; transition: background .35s ease, color .35s ease, border-color .35s ease; } .mc-btn-gold:hover { background: transparent; color: #C8A45D !important; } .mc-btn-outline { display: inline-block; font-family: Manrope, sans-serif; font-weight: 600; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: #C8A45D !important; background: transparent; text-decoration: none !important; padding: 14px 32px; border: 1px solid rgba(200,164,93,.55); border-radius: 2px; transition: background .35s ease, border-color .35s ease; } .mc-btn-outline:hover { background: rgba(200,164,93,.1); border-color: #C8A45D; } /* ---- Bande CTA générique (titre + bouton sur fond sombre) ---- */ .mc-cta-band { background: #111111; text-align: center; padding: clamp(36px, 4.6vw, 56px) 30px; } .mc-cta-band h2 { font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important; font-size: clamp(26px, 2.4vw, 36px); margin: 0 0 30px; } /* ---- Section "Notre philosophie" — 3 cartes sobres (icône + titre + texte) ---- */ .mc-value-wrap { max-width: 1200px; margin: 0 auto; padding: clamp(42px, 4.6vw, 64px) 24px; } .mc-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; margin-top: 34px; } .mc-value-card { text-align: center; padding: 40px 26px; border: 1px solid rgba(200,164,93,.22); border-radius: 2px; transition: border-color .35s ease, transform .35s ease; } .mc-value-card:hover { border-color: rgba(200,164,93,.55); transform: translateY(-4px); } .mc-value-icon { width: 46px; height: 46px; margin: 0 auto 22px; color: #C8A45D; } .mc-value-card h3 { font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important; font-size: 21px; margin: 0 0 14px; } .mc-value-card p { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 14.5px; line-height: 1.7; margin: 0; } @media (max-width: 900px) { .mc-value-grid { grid-template-columns: 1fr; gap: 30px; } } /* ---- Section "Notre processus de création" — 5 étapes avec émoji ---- */ .mc-process-wrap { background: #0A0A0A; padding: clamp(42px, 4.6vw, 64px) 24px; } .mc-process-inner { max-width: 1400px; margin: 0 auto; } .mc-process-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; margin-top: 34px; } .mc-process-card { text-align: center; position: relative; padding: 0 10px; } .mc-process-emoji { font-size: 30px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 20px; background: radial-gradient(circle at 35% 30%, rgba(200,164,93,.22), rgba(200,164,93,.05)); border: 1px solid rgba(200,164,93,.4); } .mc-process-card h3 { font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important; font-size: 17.5px; margin: 0 0 10px; letter-spacing: .2px; } .mc-process-card p { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 13.5px; line-height: 1.65; margin: 0; } .mc-process-arrow { position: absolute; top: 34px; right: -18px; color: rgba(200,164,93,.4); font-size: 18px; } @media (max-width: 1100px) { .mc-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; } .mc-process-arrow { display: none; } } @media (max-width: 640px) { .mc-process-grid { grid-template-columns: 1fr; gap: 34px; } } /* ---- Section "Notre engagement" — bande image plein-largeur avec citation ---- */ .mc-commit-band { position: relative; min-height: 36vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .mc-commit-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .mc-commit-veil { position: absolute; inset: 0; z-index: 1; background: rgba(6,6,6,.6); } .mc-commit-content { position: relative; z-index: 2; max-width: 720px; text-align: center; padding: 40px 24px; } .mc-commit-content p { font-family: 'Playfair Display', serif; font-style: italic; color: #F8F8F6; font-size: clamp(20px, 2vw, 28px); line-height: 1.6; margin: 0; } @media (max-width: 767px) { .mc-commit-band { min-height: 30vh; } } /* ---- Override d'espacement scopé à la page À propos pour .mc-presentation-grid (classe partagée avec l'Accueil — on ne touche jamais ses valeurs par défaut) ---- */ .mc-apropos-page .mc-presentation-grid { padding-top: clamp(42px, 4.6vw, 64px); padding-bottom: clamp(42px, 4.6vw, 64px); } /* ---- Section finale "Vous avez des questions ?" — grille de 9 cartes, même esthétique sobre à bordure que "Notre philosophie" (mc-value-card), avec icône émoji pour rester cohérent avec "Notre processus" ---- */ .mc-help-wrap { max-width: 1300px; margin: 0 auto; padding: clamp(42px, 4.6vw, 64px) 24px clamp(60px, 7vw, 90px); } .mc-help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 40px; } .mc-help-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 24px; border: 1px solid rgba(200,164,93,.22); border-radius: 2px; text-decoration: none !important; transition: border-color .35s ease, transform .35s ease; } .mc-help-card:hover { border-color: rgba(200,164,93,.55); transform: translateY(-4px); } .mc-help-emoji { font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; margin: 0 0 18px; background: radial-gradient(circle at 35% 30%, rgba(200,164,93,.22), rgba(200,164,93,.05)); border: 1px solid rgba(200,164,93,.4); } .mc-help-card h3 { font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important; font-size: 18px; margin: 0 0 10px; } .mc-help-card p { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; flex: 1; } .mc-help-card .mc-help-btn { font-family: Manrope, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #C8A45D; padding: 9px 20px; border: 1px solid rgba(200,164,93,.5); border-radius: 2px; transition: background .35s ease, color .35s ease; } .mc-help-card:hover .mc-help-btn { background: #C8A45D; color: #111111; } @media (max-width: 900px) { .mc-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .mc-help-grid { grid-template-columns: 1fr; } } /* ---- Informations — grille 3x3 (réutilise la mécanique de mc-coll-*, pas ses classes, pour ne jamais interférer visuellement avec la page Collections) ---- */ .mc-hub-wrap { padding: 40px 40px 90px; } .mc-hub-grid { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 48px; } .mc-hub-card { display: block; text-decoration: none !important; flex: 0 0 calc((100% - 96px) / 3); } .mc-hub-frame { position: relative; aspect-ratio: 2 / 1; padding: 9px; border-radius: 3px; background: linear-gradient(152deg, #ddbd7c 0%, #8a6b34 20%, #f1dc9f 38%, #7d5f2c 58%, #e9d093 76%, #8a6b34 90%, #ddbd7c 100%); box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.32), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,0,0,.55); transition: transform .4s ease, box-shadow .4s ease, filter .4s ease; } .mc-hub-card:hover .mc-hub-frame { transform: translateY(-5px); filter: brightness(1.09); } .mc-hub-frame-inner { position: relative; width: 100%; height: 100%; border-radius: 1px; background: linear-gradient(160deg, #0d0d0c 0%, #030303 100%); box-shadow: inset 0 3px 12px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; transition: background .4s ease; } .mc-hub-card:hover .mc-hub-frame-inner { background: linear-gradient(160deg, #151513 0%, #060605 100%); } .mc-hub-icon { width: 24%; max-width: 46px; color: rgba(200,164,93,.75); transition: color .4s ease; } .mc-hub-card:hover .mc-hub-icon { color: #F3D9A4; } .mc-hub-body { padding-top: 24px; text-align: center; } .mc-hub-title { font-family: 'Playfair Display', serif !important; font-weight: 600; color: #FFFFFF !important; font-size: clamp(18px, 1.4vw, 22px); margin: 0 0 10px; } .mc-hub-desc { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 13.5px; line-height: 1.6; margin: 0 auto 14px; max-width: 30ch; } .mc-hub-link { font-family: Manrope, sans-serif; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #8c8c8c; font-weight: 500; transition: color .4s ease; } .mc-hub-card:hover .mc-hub-link { color: #C8A45D; } @media (max-width: 1024px) { .mc-hub-card { flex-basis: calc((100% - 48px) / 2); } } @media (max-width: 767px) { .mc-hub-wrap { padding: 32px 20px 60px; } .mc-hub-grid { gap: 34px 20px; } .mc-hub-card { flex-basis: 100%; } } /* ---- Lien retour, en haut des sous-pages ---- */ .mc-back-link-wrap { max-width: 1100px; margin: 0 auto; padding: 34px 24px 0; } .mc-back-link { display: inline-flex; align-items: center; gap: 8px; font-family: Manrope, sans-serif; font-size: 13px; letter-spacing: .04em; color: #9c9c9c; text-decoration: none !important; transition: color .3s ease; } .mc-back-link:hover { color: #C8A45D; } /* ---- Contenu texte standard d'une page d'information (intro + sections) ---- Gabarit commun réutilisé par FAQ, Nos finitions, Livraison, Conditions, Confidentialité, Contact — un seul changement ici s'applique partout. En-tête (titre + texte d'intro) reste centré et étroit ; le corps (à partir du premier sous-titre) est plus large et ancré à gauche pour ne pas donner l'impression d'un contenu compressé au centre de l'écran. ---- */ .mc-info-page { max-width: 1300px; margin: 0 auto; padding: 20px 24px clamp(70px, 8vw, 110px); } .mc-info-page h1 { font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important; font-size: clamp(32px, 3.2vw, 46px); margin: 8px auto 18px; text-align: center; max-width: 760px; } .mc-info-lede { font-family: Manrope, sans-serif; color: #C9C9C9; font-size: clamp(15.5px, 1.05vw, 18px); line-height: 1.8; text-align: center; max-width: 760px; margin: 0 auto 60px; } .mc-info-section { max-width: 960px; margin: 0 auto 56px 0; } /* ---- Corps plus large et ancré à gauche sur toutes les sous-pages d'information (FAQ, Nos choix de qualité d'impression, Livraison, Conditions générales, Confidentialité, Contact). Le vrai plafond était le conteneur du thème Astra (max-width:1240px, partagé par tout le site) — même technique que la Boutique (page-id-332). En-tête (h1 + intro) reste centré via sa propre largeur/marge auto. ---- */ body.page-id-1540 .ast-container, body.page-id-1542 .ast-container, body.page-id-1545 .ast-container, body.page-id-805 .ast-container, body.page-id-804 .ast-container, body.page-id-23 .ast-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .page-id-1540 .mc-info-page, .page-id-1542 .mc-info-page, .page-id-1545 .mc-info-page, .page-id-805 .mc-info-page, .page-id-804 .mc-info-page, .page-id-23 .mc-info-page { max-width: none; margin: 0; padding-left: 40px; padding-right: 40px; } .page-id-1540 .mc-info-page h1, .page-id-1542 .mc-info-page h1, .page-id-1545 .mc-info-page h1, .page-id-805 .mc-info-page h1, .page-id-804 .mc-info-page h1, .page-id-23 .mc-info-page h1 { margin-left: auto; margin-right: auto; } .page-id-23 .mc-contact-split { max-width: none; margin: 0; padding-left: 40px; padding-right: 40px; } .mc-info-section h2 { font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important; font-size: clamp(21px, 1.7vw, 27px); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(200,164,93,.25); } .mc-info-section p, .mc-info-section li { font-family: Manrope, sans-serif; color: #C9C9C9; font-size: 15.5px; line-height: 1.85; } .mc-info-section p { margin: 0 0 16px; } .mc-info-section ul { margin: 0 0 16px; padding-left: 22px; } .mc-info-section li { margin-bottom: 8px; } .mc-info-section strong { color: #F0E4CC; } /* Étapes numérotées (Suivi, Retours) */ .mc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; margin-top: 10px; } .mc-step { padding: 26px 22px; background: #111111; border: 1px solid rgba(200,164,93,.16); border-radius: 2px; } .mc-step-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #C8A45D; color: #C8A45D; font-family: 'Playfair Display', serif; font-size: 15px; margin-bottom: 16px; } .mc-step h3 { font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important; font-size: 16.5px; margin: 0 0 10px; } .mc-step p { font-size: 14px !important; color: #ABABAB !important; margin: 0 !important; } /* Grille d'icônes courte (Livraison zones/coûts) */ .mc-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 10px; } .mc-fact { padding: 24px; background: #111111; border: 1px solid rgba(200,164,93,.16); border-radius: 2px; } .mc-fact strong { display: block; color: #C8A45D !important; font-family: Manrope, sans-serif; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; } .mc-fact span { display: block; color: #F0EFEA; font-family: 'Playfair Display', serif; font-size: 20px; } /* ---- FAQ en accordéon (details/summary — aucun JS requis) ---- */ .mc-faq-list { display: flex; flex-direction: column; gap: 2px; } .mc-faq-item { background: #111111; border: 1px solid rgba(200,164,93,.14); border-radius: 2px; } .mc-faq-item summary { cursor: pointer; list-style: none; padding: 20px 52px 20px 24px; position: relative; font-family: Manrope, sans-serif; font-weight: 600; color: #F0EFEA; font-size: 15px; } .mc-faq-item summary::-webkit-details-marker { display: none; } .mc-faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: #C8A45D; font-size: 22px; font-weight: 300; transition: transform .3s ease; } .mc-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .mc-faq-item p { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 14.5px; line-height: 1.75; margin: 0; padding: 0 24px 22px; } /* ---- Bandeau "texte à venir" pour Conditions / Confidentialité ---- */ .mc-legal-note { display: flex; gap: 16px; align-items: flex-start; max-width: 1100px; margin: 0 auto 50px; padding: 22px 26px; background: rgba(200,164,93,.07); border: 1px solid rgba(200,164,93,.3); border-radius: 2px; } .mc-legal-note svg { flex: none; width: 22px; height: 22px; color: #C8A45D; margin-top: 2px; } .mc-legal-note p { font-family: Manrope, sans-serif; color: #D8D2C0; font-size: 14px; line-height: 1.7; margin: 0; } .mc-legal-placeholder { padding: 18px 20px; background: rgba(255,255,255,.02); border: 1px dashed rgba(200,164,93,.3); border-radius: 2px; color: #7c7c7c !important; font-style: italic; font-size: 14px !important; } /* ---- Comparatif des finitions (3 cartes riches) ---- */ .mc-finish-wrap { max-width: 1300px; margin: 0 auto; padding: 20px 24px clamp(70px, 8vw, 110px); } .mc-finish-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin-top: 20px; } .mc-finish-card { background: #111111; border: 1px solid rgba(200,164,93,.2); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; } .mc-finish-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .mc-finish-card-body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; } .mc-finish-card h3 { font-family: 'Playfair Display', serif !important; color: #F8F8F6 !important; font-size: 21px; margin: 0 0 6px; } .mc-finish-card .mc-finish-tagline { font-family: Manrope, sans-serif; color: #C8A45D; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 18px; } .mc-finish-card ul { margin: 0 0 20px; padding-left: 18px; flex: 1; } .mc-finish-card li { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 14px; line-height: 1.65; margin-bottom: 8px; } .mc-finish-card .mc-finish-reco { font-family: Manrope, sans-serif; font-size: 13px; color: #8c8c8c; font-style: italic; border-top: 1px solid rgba(200,164,93,.15); padding-top: 16px; margin-top: auto; } .mc-finish-card p { font-family: Manrope, sans-serif; color: #ABABAB; font-size: 14px; line-height: 1.7; margin: 0 0 14px; } @media (max-width: 1000px) { .mc-finish-grid { grid-template-columns: 1fr; } } /* Tableau comparatif */ .mc-compare-scroll { overflow-x: auto; margin-top: 10px; } .mc-compare-table { width: 100%; border-collapse: collapse; min-width: 680px; } .mc-compare-table th, .mc-compare-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid rgba(200,164,93,.15); font-family: Manrope, sans-serif; font-size: 14px; } .mc-compare-table thead th { color: #C8A45D; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid rgba(200,164,93,.4); font-weight: 600; } .mc-compare-table tbody td { color: #C9C9C9; } .mc-compare-table tbody th { color: #F8F8F6; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 15px; } .mc-compare-table .mc-stars { color: #C8A45D; letter-spacing: 1px; } .mc-compare-table tbody tr:hover { background: rgba(200,164,93,.04); } @media (max-width: 767px) { .mc-value-wrap, .mc-process-wrap, .mc-info-page, .mc-finish-wrap { padding-left: 18px; padding-right: 18px; } .mc-info-page h1 { font-size: 30px; } } /* ---- Sous-menu déroulant "À propos" (Astra affiche un fond blanc par défaut — on l'habille dans la même identité noir/or que le reste du site) ---- */ .main-header-menu .sub-menu { background-color: #0A0A0A !important; border: 1px solid rgba(200,164,93,.28) !important; box-shadow: 0 18px 40px rgba(0,0,0,.55); padding: 8px 0; min-width: 232px; } .main-header-menu .sub-menu .menu-item { border-bottom: 1px solid rgba(200,164,93,.12); } .main-header-menu .sub-menu .menu-item:last-child { border-bottom: none; } .main-header-menu .sub-menu .menu-link { color: #C9C9C9 !important; font-family: Manrope, sans-serif !important; font-size: 13px !important; letter-spacing: .02em; padding: 12px 22px !important; transition: color .25s ease, background-color .25s ease; } .main-header-menu .sub-menu .menu-item:hover > .menu-link, .main-header-menu .sub-menu .menu-link:hover { color: #C8A45D !important; background-color: rgba(200,164,93,.08) !important; } @media (max-width: 921px) { .main-header-menu .sub-menu { background-color: transparent !important; border: none !important; box-shadow: none; } .main-header-menu .sub-menu .menu-link { color: #C9C9C9 !important; } } /* ---- Masquer le titre de page par défaut d'Astra sur les nouvelles pages d'information (même technique déjà utilisée pour page-id-701) — chaque page définit son propre h1 dans son propre widget HTML. ---- */ .page-id-1540 .entry-header, .page-id-1540 .page-header, .page-id-1540 h1.entry-title, .page-id-1540 .ast-archive-title, .page-id-1542 .entry-header, .page-id-1542 .page-header, .page-id-1542 h1.entry-title, .page-id-1542 .ast-archive-title, .page-id-1545 .entry-header, .page-id-1545 .page-header, .page-id-1545 h1.entry-title, .page-id-1545 .ast-archive-title, .page-id-805 .entry-header, .page-id-805 .page-header, .page-id-805 h1.entry-title, .page-id-805 .ast-archive-title, .page-id-804 .entry-header, .page-id-804 .page-header, .page-id-804 h1.entry-title, .page-id-804 .ast-archive-title, .page-id-23 .entry-header, .page-id-23 .page-header, .page-id-23 h1.entry-title, .page-id-23 .ast-archive-title { display: none !important; } /* ---- Formulaire de contact (SureForms) — habillage dans l'identité noir/or ---- */ .srfm-single-form-container, .srfm-form-container { background: transparent !important; } .srfm-block-label { font-family: Manrope, sans-serif !important; color: #F0EFEA !important; font-size: 13.5px !important; letter-spacing: .02em; } .srfm-input-common { background: #111111 !important; border: 1px solid rgba(200,164,93,.3) !important; color: #F8F8F6 !important; border-radius: 2px !important; } .srfm-input-common:focus { border-color: #C8A45D !important; outline: none !important; box-shadow: 0 0 0 1px rgba(200,164,93,.4) !important; } .srfm-submit-button, button.srfm-button { background: #C8A45D !important; color: #111111 !important; border: 1px solid #C8A45D !important; font-family: Manrope, sans-serif !important; font-weight: 600 !important; letter-spacing: .05em; text-transform: uppercase; font-size: 13px !important; border-radius: 2px !important; transition: background .3s ease, color .3s ease; } .srfm-submit-button:hover, button.srfm-button:hover { background: transparent !important; color: #C8A45D !important; } .srfm-cbx .srfm-span-wrap:first-child { border-color: rgba(200,164,93,.5) !important; } .srfm-single-form-container .srfm-page-break-container, .srfm-form-container form { max-width: 640px; margin: 0; } /* ---- Page Contact — mise en page à deux colonnes : informations à gauche, formulaire à droite, tous deux alignés au même point de départ vertical (juste sous l'en-tête centré) pour une meilleure visibilité du formulaire. ---- */ .mc-contact-split { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; padding: 10px 24px clamp(60px, 7vw, 90px); } .mc-contact-left .mc-info-section, .mc-contact-right .mc-info-section { max-width: none; margin-left: 0; margin-right: 0; } @media (max-width: 1000px) { .mc-contact-split { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 767px) { .mc-contact-split { padding-left: 18px; padding-right: 18px; } }