/* ========================================================================== Comptoir de la Vallée — site-wide styles Colours and type come from Elementor Site Settings (global tokens): --e-global-color-primary #1f2718 Forest --e-global-color-secondary #f4eee2 Cream --e-global-color-text #22281a Ink --e-global-color-accent #c9a86a Gold --e-global-color-terra #b4602f Terracotta --e-global-color-moss #2f3b25 Moss --e-global-color-sand #e6d9bf Sand --e-global-color-linen #ece3d0 Linen --e-global-color-parch #f8efe2 Parchment --e-global-color-stone #8a7f66 Stone (meta) --e-global-color-olive #55574a Olive grey (muted body) --e-global-color-sage #cfc4a8 Sage (muted on dark) --e-global-color-mist #e6dcc6 Mist (lead on dark) --e-global-color-peach #f3d6b4 Peach (on terracotta) Utility classes below are applied through Elementor > Advanced > CSS Classes. ========================================================================== */ :root { --cdv-forest: var(--e-global-color-primary, #1f2718); --cdv-cream: var(--e-global-color-secondary, #f4eee2); --cdv-ink: var(--e-global-color-text, #22281a); --cdv-gold: var(--e-global-color-accent, #c9a86a); --cdv-terra: var(--e-global-color-terra, #b4602f); --cdv-moss: var(--e-global-color-moss, #2f3b25); --cdv-sand: var(--e-global-color-sand, #e6d9bf); --cdv-sage: var(--e-global-color-sage, #cfc4a8); --cdv-ease: cubic-bezier(.2, .7, .2, 1); --cdv-gutter: clamp(20px, 4vw, 56px); --cdv-gutter-header: clamp(16px, 3vw, 40px); } html { -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; background: var(--cdv-cream); } ::selection { background: var(--cdv-gold); color: var(--cdv-forest); } a { transition: color .25s; } img { height: auto; } /* Side gutter used by every full-width section: matches clamp(20px,4vw,56px) */ .cdv-gutter { padding-left: var(--cdv-gutter) !important; padding-right: var(--cdv-gutter) !important; } /* -------------------------------------------------------------------------- Kicker (eyebrow) — "—— SERVICE" Elementor Heading widget + class "cdv-kicker" -------------------------------------------------------------------------- */ .cdv-kicker .elementor-heading-title { display: flex; align-items: center; gap: 12px; } .cdv-kicker .elementor-heading-title::before { content: ""; flex: none; width: 36px; height: 1px; background: currentColor; } .cdv-kicker--long .elementor-heading-title::before { width: 40px; } .cdv-kicker--none .elementor-heading-title::before { display: none; } /* -------------------------------------------------------------------------- Pill buttons — Elementor Button widget Default (Site Settings > Buttons) = forest pill, cream text. Variants via CSS class on the widget: cdv-btn--cream cream bg / forest text cdv-btn--gold gold bg / forest text cdv-btn--parch parchment bg / terracotta text cdv-btn--ghost-light outline cream (on dark) cdv-btn--ghost-dark outline forest (on light) cdv-btn--disc label + round icon disc on the right -------------------------------------------------------------------------- */ .elementor-widget-button .elementor-button { transition: background-color .3s var(--cdv-ease), color .3s, border-color .3s, transform .3s var(--cdv-ease); line-height: 1; white-space: nowrap; } .elementor-widget-button .elementor-button:hover { transform: translateY(-2px); } .elementor-widget-button .elementor-button .elementor-button-content-wrapper { align-items: center; gap: 8px; } .cdv-btn--cream .elementor-button { background: var(--cdv-cream); color: var(--cdv-forest); } .cdv-btn--cream .elementor-button:hover { background: #fff; color: var(--cdv-forest); } .cdv-btn--gold .elementor-button { background: var(--cdv-gold); color: var(--cdv-forest); } .cdv-btn--gold .elementor-button:hover { background: #d6b77c; color: var(--cdv-forest); } .cdv-btn--parch .elementor-button { background: var(--e-global-color-parch, #f8efe2); color: var(--cdv-terra); } .cdv-btn--parch .elementor-button:hover { background: #fff; color: var(--cdv-terra); } .cdv-btn--ghost-light .elementor-button { background: transparent; color: var(--cdv-cream); border: 1px solid rgba(244, 238, 226, .5); font-weight: 600; } .cdv-btn--ghost-light .elementor-button:hover { background: var(--cdv-cream); color: var(--cdv-forest); border-color: var(--cdv-cream); } .cdv-btn--ghost-dark .elementor-button { background: transparent; color: var(--cdv-forest); border: 1px solid var(--cdv-forest); font-weight: 600; } .cdv-btn--ghost-dark .elementor-button:hover { background: var(--cdv-forest); color: var(--cdv-cream); } /* Label + round icon disc (e.g. "Voir la boutique (→)") */ .cdv-btn--disc .elementor-button { padding: 8px 8px 8px 22px !important; } .cdv-btn--disc .elementor-button .elementor-button-content-wrapper { gap: 14px; } .cdv-btn--disc .elementor-button-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cdv-gold); color: var(--cdv-forest); transition: transform .4s var(--cdv-ease); } .cdv-btn--disc.cdv-btn--cream .elementor-button-icon { background: var(--cdv-forest); color: var(--cdv-cream); } .cdv-btn--disc .elementor-button:hover .elementor-button-icon { transform: rotate(-45deg); } .cdv-btn--disc .elementor-button-icon svg { width: 14px; height: 14px; fill: currentColor; } /* -------------------------------------------------------------------------- Header (Theme Builder) — overlays the hero, turns solid on scroll Header root container gets class "cdv-header" -------------------------------------------------------------------------- */ .elementor-location-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; } .admin-bar .elementor-location-header { top: 32px; } @media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .elementor-location-header { top: var(--cdv-abar, 46px); } } .cdv-header { transition: background-color .5s, box-shadow .5s, backdrop-filter .5s; } .cdv-header .cdv-topbar { overflow: hidden; max-height: 60px; transition: max-height .45s var(--cdv-ease), opacity .45s; } .cdv-scrolled .cdv-header { background-color: rgba(31, 39, 24, .92) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5); } .cdv-scrolled .cdv-header .cdv-topbar { max-height: 0; opacity: 0; } .cdv-header .cdv-logo img { transition: width .45s var(--cdv-ease), height .45s var(--cdv-ease); } .cdv-header .cdv-logo { transform-origin: center top; transition: transform .45s var(--cdv-ease); } .cdv-scrolled .cdv-header .cdv-logo { transform: scale(.72); } /* Pulsing dot used in the "Appeler" button and the top bar */ .cdv-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cdv-gold); flex: none; } /* -------------------------------------------------------------------------- Motion helpers (motion.js). Content stays visible without JS. -------------------------------------------------------------------------- */ .cdv-js .cdv-reveal { opacity: 0; transform: translateY(56px); transition: opacity 1.1s var(--cdv-ease), transform 1.1s var(--cdv-ease); transition-delay: var(--cdv-delay, 0ms); } .cdv-js .cdv-reveal.is-in { opacity: 1; transform: none; } .cdv-js .cdv-clip { clip-path: inset(18% 10% 18% 10%); transition: clip-path 1.4s var(--cdv-ease); } .cdv-js .cdv-clip.is-in { clip-path: inset(0 0 0 0); } .cdv-spin { animation: cdv-spin 18s linear infinite; } @keyframes cdv-spin { to { transform: rotate(360deg); } } .cdv-marquee { display: flex; width: max-content; animation: cdv-marquee 38s linear infinite; } @keyframes cdv-marquee { to { transform: translateX(-50%); } } /* Never hide or animate things inside the Elementor editor, nor for reduced motion */ .elementor-editor-active .cdv-reveal, .elementor-editor-active .cdv-clip, .cdv-reduced .cdv-reveal, .cdv-reduced .cdv-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; } .cdv-reduced .cdv-spin, .cdv-reduced .cdv-marquee { animation: none; } /* Accessible focus ring */ :where(a, button, .elementor-button):focus-visible { outline: 2px solid var(--cdv-gold); outline-offset: 3px; } /* Screen-reader only text */ .cdv-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ========================================================================== Header details ========================================================================== */ /* Stroke-style SVG icons (uploaded outline icons) must not be filled */ .elementor svg[stroke="currentColor"], .elementor svg[stroke="currentColor"] * { fill: none !important; stroke: currentColor; } .cdv-topbar__addr .elementor-heading-title { display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cdv-topbar__addr { min-width: 0; } .cdv-langs .elementor-heading-title { display: flex; gap: 2px; } .cdv-langs .cdv-lang { padding: 2px 6px; color: var(--cdv-cream); cursor: pointer; } .cdv-langs .cdv-lang.is-on { color: var(--cdv-gold); } .cdv-langs .cdv-lang-sep { opacity: .4; } /* Logo: gold ring */ .cdv-logo img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(201, 168, 106, .5); display: block; } /* Mega menu: caret + underline like the design */ .cdv-nav-mega .e-n-menu-title { position: relative; } .cdv-nav-mega .e-n-menu-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--cdv-gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--cdv-ease); pointer-events: none; } .cdv-nav-mega .e-n-menu-title:hover::after, .cdv-nav-mega .e-n-menu-title.e-current::after, .cdv-nav-mega .e-n-menu-item:has(> .e-n-menu-content.e-active) .e-n-menu-title::after { transform: scaleX(1); } .cdv-nav-mega .e-n-menu-dropdown-icon { font-size: 8px; opacity: .75; transition: transform .35s; } .cdv-nav-mega .e-n-menu-dropdown-icon svg { width: 8px; height: 8px; } .cdv-nav-mega [aria-expanded="true"] .e-n-menu-dropdown-icon { transform: rotate(180deg); } .cdv-nav-mega .e-n-menu-title-text { white-space: nowrap; } /* Right-hand nav: thin gold underline 6px under the text */ .cdv-nav-right .elementor-nav-menu--main .elementor-item { white-space: nowrap; } .cdv-nav-right .e--pointer-underline .elementor-item::after { bottom: 6px; height: 1px; } /* Mega panel */ .cdv-mega-wrap > .e-con-inner, .cdv-mega-wrap { pointer-events: none; } .cdv-mega { max-width: 1500px; margin-inline: auto !important; pointer-events: auto; } .cdv-mega-link { transition: padding .35s var(--cdv-ease); } .cdv-mega-link:hover { padding-left: 10px !important; } .cdv-mega-link .cdv-mega-link__title .elementor-heading-title { transition: color .35s; } .cdv-mega-link:hover .cdv-mega-link__title .elementor-heading-title { color: var(--cdv-terra); } .cdv-mega-img { transition: transform .6s var(--cdv-ease); } .cdv-mega-img:hover { filter: saturate(1.05); } .cdv-promo-card { transition: transform .3s; } .cdv-promo-card:hover { transform: translateY(-2px); } .cdv-badge-round { flex: none; } .cdv-badge-round .elementor-heading-title { width: 54px; height: 54px; border-radius: 50%; background: var(--e-global-color-parch, #f8efe2); display: flex; align-items: center; justify-content: center; transform: rotate(-8deg); } .cdv-kicker--short .elementor-heading-title::before { width: 28px; } .cdv-btn--disc-sm .elementor-button-icon { width: 36px; height: 36px; } /* Call button: dark pulsing dot before the label */ .cdv-call .elementor-button-text { display: inline-flex; align-items: center; gap: 10px; } .cdv-call .elementor-button-text::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cdv-forest); flex: none; box-shadow: 0 0 0 0 rgba(31, 39, 24, .55); animation: cdv-ping 1.6s ease-out infinite; } @keyframes cdv-ping { 0% { box-shadow: 0 0 0 0 rgba(31, 39, 24, .55); } 100% { box-shadow: 0 0 0 9px rgba(31, 39, 24, 0); } } .cdv-call .elementor-button:hover { transform: scale(1.04); } .cdv-reduced .cdv-call .elementor-button-text::before { animation: none; } /* Burger button: two-line icon */ .cdv-burger .elementor-button-icon svg { width: 18px; height: 8px; } /* Shop button icon */ .cdv-shop-btn .elementor-button-icon svg { width: 18px; height: 18px; } /* Scroll progress bar */ .cdv-progress { transform: scaleX(var(--cdv-progress, 0)); transform-origin: left; } /* Inner-page header variant */ .cdv-logo--60 img { width: 60px; height: 60px; } .cdv-langs--tight .cdv-lang { padding: 2px 5px; } /* "Appeler · 04 27 50 15 10" on very wide screens (≥1700px), like the design */ @media (min-width: 1700px) { .cdv-call:not(.elementor-hidden-desktop) .elementor-button-text::after { content: "\00a0·\00a0" "04 27 50 15 10"; } } .cdv-nav-right { flex: none; } .cdv-nav-right .elementor-nav-menu { flex-wrap: nowrap; } .cdv-call .elementor-button-text::after { margin-left: -6px; } /* ========================================================================== Footer ========================================================================== */ .cdv-footer { position: relative; } .cdv-footer::before { content: ""; position: absolute; width: 70vw; aspect-ratio: 1; right: -25vw; top: -35vw; border-radius: 50%; background: radial-gradient(circle, rgba(201, 168, 106, .14), rgba(201, 168, 106, 0) 65%); pointer-events: none; } .cdv-footer > .e-con-inner { position: relative; } .cdv-ft-cta em { color: var(--cdv-gold); font-style: italic; } .cdv-logo--84 img { width: 84px; height: 84px; } .cdv-ft-nav .elementor-item { transition: color .3s, padding .3s; } .cdv-ft-nav .elementor-item:hover { padding-left: 6px !important; } .cdv-wordmark { margin-inline: calc(-1 * var(--cdv-gutter)) !important; width: auto !important; max-width: none !important; } .cdv-wordmark .elementor-heading-title { white-space: nowrap; } .cdv-btn--disc-dark .elementor-button-icon { background: var(--cdv-forest); color: var(--cdv-cream); width: 40px; height: 40px; } .cdv-legal-nav .elementor-nav-menu { flex-wrap: wrap; row-gap: 8px; } /* Mobile bottom bar (Itinéraire / Appeler) – visible under 760px */ .cdv-mobilebar { position: fixed !important; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; width: auto !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); } .cdv-mobilebar .elementor-button { width: 100%; justify-content: center; min-height: 50px; } /* Mobile menu popup */ .cdv-popnav .elementor-nav-menu--main .elementor-item { border-bottom: 1px solid rgba(244, 238, 226, .1); display: block; } .cdv-popnav .elementor-nav-menu--layout-vertical .elementor-nav-menu > li { overflow: hidden; } .elementor-location-popup .cdv-popmenu { min-height: 100svh; } .elementor-location-popup .dialog-close-button, .elementor-popup-modal .dialog-close-button { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; } /* Reusable CTA band "Une question ?" */ .cdv-cta-text { max-width: 820px !important; } .cdv-cta-text .elementor-heading-title { text-wrap: balance; } /* ========================================================================== HOME — Hero ========================================================================== */ .cdv-hero { position: relative; isolation: isolate; color: var(--cdv-cream); } .cdv-hero__media { position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; width: 100% !important; max-width: none !important; overflow: hidden; } .cdv-hero__media img { width: 100%; height: 100% !important; object-fit: cover; max-width: none; animation: cdv-zoom 2.4s var(--cdv-ease) .2s both; } @keyframes cdv-zoom { from { transform: scale(1.18); } to { transform: scale(1); } } .cdv-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(31,39,24,.7) 0%, rgba(31,39,24,.35) 28%, rgba(31,39,24,.62) 52%, rgba(31,39,24,.92) 85%), linear-gradient(90deg, rgba(31,39,24,.55) 0%, rgba(31,39,24,0) 70%); } .cdv-hero__content { position: relative; z-index: 3; } .cdv-hero__title { max-width: 1300px; } .cdv-hero__sub { max-width: 500px; } .cdv-hero__sub p { margin: 0; text-wrap: pretty; } .cdv-hero__float { position: absolute !important; right: 6vw; top: 17vh; z-index: 2; width: clamp(150px, 14vw, 220px) !important; max-width: none !important; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; border: 5px solid var(--cdv-cream); background: #3b4a2c; box-shadow: 0 30px 60px rgba(0,0,0,.35); transform: rotate(-3deg); animation: cdv-float-in 1.4s var(--cdv-ease) 1.2s both; } @keyframes cdv-float-in { from { transform: translateY(80px) rotate(8deg); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } } .cdv-hero__float .elementor-wrapper, .cdv-hero__float .elementor-widget-container { height: 100%; aspect-ratio: auto !important; } .cdv-hero__float video { width: 100%; height: 100%; object-fit: cover; display: block; } .cdv-scrollcue { position: absolute !important; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; pointer-events: none; width: auto !important; } .cdv-scrollcue .elementor-heading-title { display: flex; flex-direction: column; align-items: center; gap: 8px; } .cdv-cue { display: block; position: relative; width: 1px; height: 36px; overflow: hidden; background: rgba(244,238,226,.25); } .cdv-cue i { position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: var(--cdv-gold); animation: cdv-cue 1.6s cubic-bezier(.6,0,.4,1) infinite; } @keyframes cdv-cue { from { transform: translateY(-14px); } to { transform: translateY(36px); } } /* Word-by-word title reveal (motion.js wraps each word) */ .cdv-words .elementor-heading-title { display: flex; flex-wrap: wrap; column-gap: .22em; } .cdv-w { display: inline-block; overflow: hidden; padding-bottom: .08em; } .cdv-w > span { display: inline-block; } .cdv-js .cdv-words.is-split .cdv-w > span { transform: translateY(110%) rotate(4deg); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 70ms + 300ms); } .cdv-js .cdv-words.is-split.is-in .cdv-w > span { transform: none; } /* Marquee band */ .cdv-marquee .elementor-heading-title { display: flex; width: max-content; white-space: nowrap; animation: cdv-marquee 38s linear infinite; } .cdv-mq { display: flex; } .cdv-mq__i { display: flex; align-items: center; gap: 36px; padding-right: 36px; } .cdv-mq__s { font-size: .5em; } /* Nos univers — stacked sticky cards */ .cdv-world { transform-origin: center top; transition: transform .5s var(--cdv-ease); } .cdv-world__arrow .elementor-heading-title { width: 56px; height: 56px; border-radius: 50%; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; transition: transform .4s var(--cdv-ease); } .cdv-world:hover .cdv-world__arrow .elementor-heading-title { transform: rotate(45deg); } .cdv-world__text p { margin: 0; max-width: 420px; opacity: .85; text-wrap: pretty; } .cdv-world__media { background-size: cover; } .cdv-hero__sub { max-width: 500px !important; } .cdv-hero__title { max-width: 1300px !important; } /* Small utilities */ .cdv-maxw-400 { max-width: 400px !important; } .cdv-maxw-480 { max-width: 480px !important; } .cdv-maxw-400 p, .cdv-maxw-480 p { margin: 0; text-wrap: pretty; } .cdv-balance .elementor-heading-title { text-wrap: balance; } .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* Arrivages — horizontal scroll */ .cdv-arr__img { overflow: hidden; border-radius: 20px; background: var(--cdv-moss); transition: transform .6s var(--cdv-ease); } .cdv-arr__img:hover { transform: scale(.96) rotate(-1.5deg); } .cdv-arr__img img { width: 100%; display: block; } .cdv-hbar { transform: scaleX(var(--cdv-h, 0)); transform-origin: left; height: 2px; width: 100% !important; } /* Offre — arch + rotating ring */ .cdv-offer__media { position: relative; } .cdv-ring { position: absolute !important; right: -10px; bottom: 10%; width: clamp(140px, 14vw, 190px) !important; aspect-ratio: 1; pointer-events: none; } .cdv-ring .elementor-widget-container { position: relative; width: 100%; height: 100%; } .cdv-ring__spin { position: absolute; inset: 0; animation: cdv-spin 18s linear infinite; } .cdv-ring__spin svg { width: 100%; height: 100%; display: block; } .cdv-ring__badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Instrument Serif', serif; font-size: clamp(34px, 3.4vw, 46px); color: var(--cdv-terra); } .cdv-reduced .cdv-ring__spin { animation: none; } /* Récolte des olives — image with gradient */ .cdv-olive { position: relative; isolation: isolate; } .cdv-olive::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(31,39,24,.94) 0%, rgba(31,39,24,.65) 50%, rgba(31,39,24,.15) 100%); } .cdv-olive__inner { position: relative; z-index: 1; } .cdv-tool { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s, transform .3s !important; } .cdv-tool:hover { background: rgba(201,168,106,.22) !important; transform: translateX(-6px) !important; } /* Pourquoi le Comptoir */ .cdv-why { transition: padding .4s, background .4s !important; } .cdv-why:hover { padding-left: 20px !important; background: var(--e-global-color-linen, #ece3d0) !important; } .cdv-why__img img { width: 100%; display: block; } /* ========================================================================== HOME — Reels (phone mock-up driven by scroll) — markup in an HTML widget ========================================================================== */ .cdv-reels-sec { background: var(--cdv-forest); color: var(--cdv-cream); } .cdv-reels { position: relative; height: var(--cdv-reels-h, 430svh); } .cdv-reels__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; } .cdv-reels__glow { position: absolute; width: 56vw; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(201,168,106,.22), rgba(201,168,106,0) 62%); pointer-events: none; } .cdv-reels__grid { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; height: 100%; padding: 112px var(--cdv-gutter) 28px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: clamp(20px, 5vw, 80px); align-items: center; align-content: center; } .cdv-reels__intro { display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 28px); min-width: 0; } .cdv-reels__kicker { display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--cdv-gold); } .cdv-reels__kicker::before { content: ""; width: 36px; height: 1px; background: currentColor; } .cdv-reels__title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(40px, 5.6vw, 92px); line-height: .92; letter-spacing: -.02em; margin: 0; color: var(--cdv-cream); } .cdv-reels__count { display: flex; align-items: baseline; gap: 14px; margin-top: 12px; } .cdv-reels__num { font-family: 'Instrument Serif', serif; font-size: clamp(72px, 8vw, 132px); line-height: .8; color: var(--cdv-gold); } .cdv-reels__total { font-size: 15px; color: var(--cdv-sage); letter-spacing: .1em; } .cdv-reels__label { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 34px; line-height: 1.1; } .cdv-reels__ctrl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cdv-reels__prev { width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(244,238,226,.35); background: transparent; color: var(--cdv-cream); font-size: 22px; cursor: pointer; transition: background .3s, transform .3s, opacity .3s; padding: 0; } .cdv-reels__prev:hover { background: rgba(244,238,226,.12); transform: translateY(-3px); } .cdv-reels__next { height: 60px; padding: 0 10px 0 24px; border-radius: 999px; border: 0; background: var(--cdv-gold); color: var(--cdv-forest); font: 700 15px 'Hanken Grotesk', sans-serif; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: transform .3s, opacity .3s; } .cdv-reels__next:hover { transform: translateY(-3px); background: var(--cdv-gold); color: var(--cdv-forest); } .cdv-reels__next span { width: 42px; height: 42px; border-radius: 50%; background: var(--cdv-forest); color: var(--cdv-gold); display: flex; align-items: center; justify-content: center; } .cdv-reels__hint { font-size: 13px; color: var(--cdv-sage); max-width: 180px; line-height: 1.4; } .cdv-reels__stage { display: flex; justify-content: center; align-items: center; min-height: 0; } .cdv-reels__list { display: flex; flex-direction: column; gap: 6px; justify-self: end; width: 100%; max-width: 280px; min-width: 0; } .cdv-reels__thumb { display: flex; align-items: center; gap: 14px; border: 0; padding: 6px 14px 6px 6px; border-radius: 16px; cursor: pointer; color: var(--cdv-cream); text-align: left; opacity: .45; background: transparent; transition: opacity .4s, background .4s; font: inherit; } .cdv-reels__thumb:hover, .cdv-reels__thumb:focus { opacity: 1; background: transparent; color: var(--cdv-cream); } .cdv-reels__thumb.is-on { opacity: 1; background: rgba(244,238,226,.1); } .cdv-reels__thumb img { width: 40px; height: auto; aspect-ratio: 9/16; border-radius: 8px; object-fit: cover; display: block; box-shadow: 0 0 0 2px transparent; flex: none; } .cdv-reels__thumb.is-on img { box-shadow: 0 0 0 2px var(--cdv-gold); } .cdv-reels__thumb span { font-family: 'Instrument Serif', serif; font-size: 22px; line-height: 1.1; } .cdv-phone { --pw: clamp(260px, min(30vw, calc((100svh - 150px) * .466)), 480px); position: relative; width: var(--pw); height: calc(var(--pw) * 2.1444); flex: none; border-radius: 58px; background: #0b0d09; padding: 5px; box-shadow: 0 0 0 1px #ffb27a inset, 0 0 0 1.5px #c4521a, 0 0 0 3.5px #e8702f, 0 0 0 4.5px #a8420f, 0 60px 120px rgba(0,0,0,.6), 0 0 90px rgba(232,112,47,.25); } .cdv-phone__btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #a8420f, #f08a4b); } .cdv-phone__btn--1 { left: -6px; top: 22%; height: 56px; } .cdv-phone__btn--2 { left: -6px; top: 34%; height: 56px; } .cdv-phone__btn--3 { right: -6px; top: 28%; height: 84px; } .cdv-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 53px; overflow: hidden; background: #000; font-family: 'Hanken Grotesk', sans-serif; color: #fff; } .cdv-phone__slide { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.7,0,.2,1); } .cdv-phone__slide video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; } .cdv-phone__shade-top { position: absolute; left: 0; right: 0; top: 0; height: 130px; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); pointer-events: none; } .cdv-phone__shade-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6) 60%, rgba(0,0,0,.8)); pointer-events: none; } .cdv-phone__status { position: absolute; top: 12px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 26px; font-size: 14px; font-weight: 600; pointer-events: none; } .cdv-phone__notch { width: 96px; height: 28px; border-radius: 999px; background: #000; } .cdv-phone__bat { width: 16px; height: 9px; border-radius: 2px; border: 1.5px solid #fff; } .cdv-phone__bar { position: absolute; top: 54px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; } .cdv-phone__bar > span { font-size: 21px; font-weight: 700; letter-spacing: -.01em; } .cdv-phone__sound { position: absolute; top: 96px; right: 16px; display: flex; align-items: center; gap: 6px; border: 0; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: 600 12px 'Hanken Grotesk', sans-serif; padding: 7px 12px; border-radius: 999px; cursor: pointer; } .cdv-phone__sound:hover, .cdv-phone__sound:focus { background: rgba(0,0,0,.6); color: #fff; } .cdv-phone__actions { position: absolute; right: 14px; bottom: 178px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .cdv-phone__actions button, .cdv-phone__actions a { border: 0; background: transparent; padding: 0; cursor: pointer; color: #fff; display: flex; transition: transform .2s; } .cdv-phone__actions button:hover, .cdv-phone__actions button:focus { background: transparent; color: #fff; } .cdv-phone__actions button:active { transform: scale(.8); } .cdv-phone__like.is-liked { color: #ff3b5c; } .cdv-phone__like.is-liked svg { fill: #ff3b5c !important; } .cdv-phone__info { position: absolute; left: 18px; right: 18px; bottom: 84px; display: flex; flex-direction: column; gap: 12px; } .cdv-phone__user { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; font-weight: 700; } .cdv-phone__user img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1.5px #fff; } .cdv-phone__user span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cdv-phone__user a { flex: none; border: 1px solid rgba(255,255,255,.7); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 7px; } .cdv-phone__user a:hover { color: #fff; background: rgba(255,255,255,.18); } .cdv-phone__caption { font-size: 13px; line-height: 1.4; opacity: .95; padding-right: 40px; } .cdv-phone__tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; background: #000; display: flex; justify-content: space-around; align-items: center; padding: 0 10px 10px; pointer-events: none; } .cdv-phone__tabs svg { width: 24px; height: 24px; } .cdv-phone__me { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px #fff; } .cdv-phone__me img { width: 100%; height: 100%; object-fit: cover; display: block; } .cdv-phone__home { position: absolute; bottom: 6px; left: 50%; width: 110px; height: 4px; margin-left: -55px; border-radius: 2px; background: #fff; } .cdv-phone svg[stroke="currentColor"] { fill: none; } @media (max-width: 899px) { .cdv-reels__grid { grid-template-columns: minmax(0,1fr); } .cdv-reels__count, .cdv-reels__label, .cdv-reels__list { display: none; } } /* Full-screen viewer */ .cdv-rv { position: fixed; inset: 0; z-index: 400; background: rgba(10,12,8,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 40px); padding: 16px; } .cdv-rv.is-open { display: flex; } .cdv-rv__nav { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(244,238,226,.12); color: var(--cdv-cream); font-size: 22px; cursor: pointer; padding: 0; } .cdv-rv__nav:hover, .cdv-rv__nav:focus { background: rgba(244,238,226,.22); color: var(--cdv-cream); } .cdv-rv__panel { position: relative; height: min(92vh, 860px); max-width: calc(100vw - 32px); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .cdv-rv__panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; } .cdv-rv__top { position: absolute; left: 0; right: 0; top: 0; padding: 10px 12px 40px; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); display: flex; flex-direction: column; gap: 12px; } .cdv-rv__bars { display: flex; gap: 4px; } .cdv-rv__bars span { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; } .cdv-rv__bars i { display: block; height: 100%; width: 0; background: #fff; } .cdv-rv__head { display: flex; align-items: center; gap: 10px; color: #fff; font: 600 14px 'Hanken Grotesk', sans-serif; } .cdv-rv__head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cdv-gold); } .cdv-rv__head div { display: flex; flex-direction: column; line-height: 1.2; } .cdv-rv__head small { font-weight: 400; font-size: 12px; opacity: .85; } .cdv-rv__head a { margin-left: 6px; border: 1px solid rgba(255,255,255,.7); color: #fff; font: 600 12px 'Hanken Grotesk', sans-serif; padding: 5px 12px; border-radius: 8px; } .cdv-rv__mute, .cdv-rv__close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 15px; cursor: pointer; padding: 0; } .cdv-rv__mute { margin-left: auto; } .cdv-rv__close { font-size: 20px; } .cdv-rv__bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 70px 18px 16px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7)); color: #fff; pointer-events: none; display: flex; flex-direction: column; gap: 6px; font: 600 14px 'Hanken Grotesk', sans-serif; } .cdv-rv__bottom strong { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 26px; line-height: 1.05; } .cdv-rv__bottom small { font-weight: 400; font-size: 12px; opacity: .8; } /* ========================================================================== Product rail ("Notre sélection") — Loop Grid turned into a horizontal scroller ========================================================================== */ .cdv-maxw-720 { max-width: 720px !important; } .cdv-rail .elementor-loop-container { display: flex !important; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--cdv-gutter); padding: 0 var(--cdv-gutter) 12px; scrollbar-width: none; } .cdv-rail .elementor-loop-container::-webkit-scrollbar { display: none; } .cdv-rail .e-loop-item { flex: none; width: clamp(230px, 22vw, 300px); scroll-snap-align: start; } .cdv-pcard__media { transition: border-radius .6s; } .cdv-pcard__media:hover { border-radius: 36px !important; } .cdv-pcard__img, .cdv-pcard__img a { position: absolute !important; inset: 0; width: 100% !important; height: 100%; margin: 0 !important; display: block; } .cdv-pcard__img img { width: 100%; height: 100% !important; object-fit: cover; display: block; transition: transform 1s var(--cdv-ease); } .cdv-pcard__media:hover .cdv-pcard__img img { transform: scale(1.07); } .cdv-pcard__badge { position: absolute !important; top: 14px; left: 14px; z-index: 2; width: auto !important; } .cdv-pcard__stock { position: absolute !important; bottom: 12px; left: 12px; z-index: 2; width: auto !important; } .cdv-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; } .cdv-badge--new { background: var(--cdv-gold); color: var(--cdv-forest); } .cdv-badge--promo { background: var(--cdv-terra); color: var(--e-global-color-parch, #f8efe2); } .cdv-stock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(251,248,241,.92); font-size: 12px; font-weight: 600; color: var(--cdv-forest); line-height: 1.2; } .cdv-stock i { width: 7px; height: 7px; border-radius: 50%; background: #3f9b4f; } .cdv-stock--order i { background: #d08a2e; } .cdv-pcard__meta { color: var(--cdv-forest); min-width: 0; } .cdv-pcard__meta:hover .elementor-heading-title { color: var(--cdv-terra); } .cdv-pcat { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--e-global-color-stone, #8a7f66); font-weight: 600; line-height: 1.3; } .cdv-pcard__add { flex: none; width: auto !important; } .cdv-add { width: 46px; height: 46px; border-radius: 50%; background: var(--cdv-forest); color: var(--cdv-cream); font-size: 20px; display: flex; align-items: center; justify-content: center; transition: transform .3s, background .3s; line-height: 1; } .cdv-add:hover { transform: scale(1.08); color: var(--cdv-cream); } .cdv-add.added { background: #3f9b4f; } .cdv-add.loading { opacity: .6; } .cdv-pcard .added_to_cart { display: none !important; } .cdv-pcard__price { margin-top: -6px !important; } .cdv-price { display: flex; align-items: baseline; gap: 10px; } .cdv-price b { font-size: 18px; font-weight: 700; color: var(--cdv-forest); } .cdv-price del { font-size: 14px; color: var(--e-global-color-stone, #8a7f66); } /* ========================================================================== Google reviews ========================================================================== */ .cdv-stars { display: flex; gap: 3px; } .cdv-stars i { width: 24px; height: 24px; background: #f5b400; -webkit-mask: var(--cdv-star) center / contain no-repeat; mask: var(--cdv-star) center / contain no-repeat; } .cdv-stars i.is-part { background: linear-gradient(90deg, #f5b400 70%, #d8cdb4 70%); } :root { --cdv-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E"); } .cdv-rating-meta .elementor-heading-title { display: flex; flex-direction: column; gap: 8px; } .cdv-gcount { display: flex; align-items: center; gap: 8px; } .cdv-gcount b { color: var(--cdv-forest); } .cdv-google { font-weight: 700; letter-spacing: -.01em; } .cdv-google i { font-style: normal; } .cdv-google i:nth-child(1), .cdv-google i:nth-child(4) { color: #4285f4; } .cdv-google i:nth-child(2), .cdv-google i:nth-child(6) { color: #ea4335; } .cdv-google i:nth-child(3) { color: #fbbc05; } .cdv-google i:nth-child(5) { color: #34a853; } .cdv-gr-img { overflow: hidden; background: var(--cdv-sand); } .cdv-gr-img img { width: 100%; height: 100% !important; object-fit: cover; display: block; aspect-ratio: 1360 / 1020; } .cdv-gr-img--tall img { aspect-ratio: 765 / 1020; } .cdv-gr-badge-w { position: absolute !important; left: -18px; bottom: 28px; width: auto !important; z-index: 2; } .cdv-gr-badge { display: flex; align-items: center; gap: 12px; background: #fbf8f1; border-radius: 18px; padding: 12px 16px; box-shadow: 0 20px 40px rgba(31,39,24,.16); } .cdv-gr-badge__n { width: 42px; height: 42px; border-radius: 50%; background: var(--cdv-forest); color: var(--cdv-gold); display: flex; align-items: center; justify-content: center; font-family: 'Instrument Serif', serif; font-size: 20px; } .cdv-gr-badge__t { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.3; color: var(--cdv-forest); } .cdv-gr-badge__t small { color: #6b6a5a; font-size: 13px; } .cdv-reviews { display: flex; flex-direction: column; gap: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .cdv-revrow { overflow: hidden; } .cdv-revrow__track { display: flex; gap: 16px; width: max-content; animation: cdv-marquee 60s linear infinite; } .cdv-revrow--r .cdv-revrow__track { animation-direction: reverse; } .cdv-reviews:hover .cdv-revrow__track { animation-play-state: paused; } .cdv-reduced .cdv-revrow__track { animation: none; } .cdv-rev { margin: 0; flex: none; width: clamp(300px, 30vw, 400px); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; background: #fbf8f1; border: 1px solid rgba(31,39,24,.08); border-radius: 24px; padding: 26px 28px; } .cdv-rev__top { display: flex; flex-direction: column; gap: 14px; } .cdv-rev__head { display: flex; justify-content: space-between; align-items: center; } .cdv-rev__stars { width: 88px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5b400' d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") 0 0 / 18px 16px repeat-x; } .cdv-rev__when { font-size: 12px; color: var(--e-global-color-stone, #8a7f66); } .cdv-rev blockquote { margin: 0; padding: 0; border: 0; font-family: 'Instrument Serif', serif; font-size: 23px; line-height: 1.25; color: var(--cdv-forest); text-wrap: pretty; font-style: normal; } .cdv-rev figcaption { display: flex; align-items: center; gap: 12px; } .cdv-rev__av { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex: none; } .cdv-rev__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cdv-rev__who b { font-weight: 700; font-size: 15px; color: var(--cdv-ink); } .cdv-rev__who small { font-size: 12.5px; color: var(--e-global-color-stone, #8a7f66); } .cdv-rev__g { margin-left: auto; font-weight: 700; font-size: 18px; color: #4285f4; } /* Instagram masonry */ .cdv-ig__item { break-inside: avoid; margin-bottom: 12px !important; border-radius: 16px; overflow: hidden; background: #d8c9aa; transition: transform .5s, border-radius .5s; width: 100% !important; display: block; } .cdv-ig__item:hover { transform: rotate(-2deg) scale(1.04); border-radius: 48px; } .cdv-ig__item img { width: 100%; display: block; } /* Map */ .cdv-map__w, .cdv-map__w .elementor-custom-embed, .cdv-map__w iframe { height: 100% !important; min-height: 480px; width: 100%; } .cdv-map__w iframe { display: block; border: 0; filter: grayscale(.4) sepia(.2); } .cdv-map > .e-con-inner, .cdv-map { align-items: stretch; } /* specificity over the kit's heading / link colours */ .cdv-reels .cdv-reels__title { color: var(--cdv-cream); } .cdv-pcard a.cdv-add, .cdv-pcard a.cdv-add:hover { color: var(--cdv-cream); } .cdv-phone a, .cdv-phone a:hover { color: #fff; } .cdv-rv a, .cdv-rv a:hover { color: #fff; } /* Reels/viewer buttons: beat the kit's global button style */ .cdv-reels button, .cdv-rv button { font-family: 'Hanken Grotesk', sans-serif; text-transform: none; letter-spacing: 0; line-height: 1; } .cdv-reels .cdv-reels__next, .cdv-reels .cdv-reels__next:hover, .cdv-reels .cdv-reels__next:focus { background: var(--cdv-gold); color: var(--cdv-forest); font-weight: 700; font-size: 15px; border-radius: 999px; padding: 0 10px 0 24px; border: 0; } .cdv-reels .cdv-reels__prev, .cdv-reels .cdv-reels__prev:focus { background: transparent; color: var(--cdv-cream); border: 1px solid rgba(244,238,226,.35); border-radius: 50%; padding: 0; } .cdv-reels .cdv-reels__prev:hover { background: rgba(244,238,226,.12); color: var(--cdv-cream); } .cdv-reels .cdv-reels__thumb { background: transparent; border: 0; border-radius: 16px; padding: 6px 14px 6px 6px; color: var(--cdv-cream); } .cdv-reels .cdv-reels__thumb.is-on { background: rgba(244,238,226,.1); } .cdv-reels .cdv-phone__sound { background: rgba(0,0,0,.45); border: 0; border-radius: 999px; padding: 7px 12px; color: #fff; font-size: 12px; font-weight: 600; } .cdv-reels .cdv-phone__actions button { background: transparent; border: 0; padding: 0; color: #fff; } .cdv-reels .cdv-phone__like.is-liked { color: #ff3b5c; } .cdv-rv .cdv-rv__nav { background: rgba(244,238,226,.12); border: 0; border-radius: 50%; color: var(--cdv-cream); padding: 0; font-size: 22px; } .cdv-rv .cdv-rv__mute, .cdv-rv .cdv-rv__close { background: rgba(0,0,0,.35); border: 0; border-radius: 50%; color: #fff; padding: 0; } @media (max-width: 899px) { .cdv-reels__grid { padding-top: 96px; gap: 16px; } .cdv-reels__hint { display: none; } .cdv-reels .cdv-reels__prev, .cdv-reels .cdv-reels__next { height: 48px; } .cdv-reels .cdv-reels__prev { width: 48px; } .cdv-reels .cdv-reels__next span { width: 34px; height: 34px; } } /* Mobile / tablet: the phone keeps its real 300×643 layout and is scaled as a whole (zoom set by reels.js), so the Instagram UI never gets squeezed. Prev / next sit on either side of the phone. */ @media (max-width: 899px) { .cdv-reels__grid { grid-template-columns: 48px minmax(0, 1fr) 48px; grid-template-rows: auto auto minmax(0, 1fr); column-gap: 8px; row-gap: 10px; align-content: stretch; align-items: center; padding: 142px var(--cdv-gutter) calc(18px + env(safe-area-inset-bottom)); } .cdv-reels__kicker { display: none; } .cdv-reels__intro, .cdv-reels__ctrl { display: contents; } .cdv-reels__title { grid-column: 1 / -1; grid-row: 2; font-size: clamp(32px, 9vw, 52px); text-align: center; } .cdv-reels .cdv-reels__prev { grid-column: 1; grid-row: 3; align-self: center; } .cdv-reels .cdv-reels__next { grid-column: 3; grid-row: 3; align-self: center; width: 48px; padding: 0; font-size: 0; justify-content: center; gap: 0; } .cdv-reels .cdv-reels__next span { font-size: 18px; } .cdv-reels__stage { grid-column: 2; grid-row: 3; align-self: stretch; height: 100%; min-height: 0; min-width: 0; overflow: visible; } .cdv-phone { --pw: 300px; width: 300px; height: 643px; zoom: var(--cdv-pz, .62); } } /* Google Translate (EN): hide Google's own UI */ body { top: 0 !important; position: static !important; } .skiptranslate iframe, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; } .goog-text-highlight, font[style] { background: none !important; box-shadow: none !important; } #cdv-gt { display: none !important; } .cdv-lang { cursor: pointer; } /* Review stars: 4/5 shows one grey star */ .cdv-rev__stars { position: relative; } .cdv-rev__stars--4::after, .cdv-rev__stars--3::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d8cdb4' d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") 0 0 / 18px 16px repeat-x; } .cdv-rev__stars--4::after { left: 72px; } .cdv-rev__stars--3::after { left: 54px; } /* ========================================================================== INNER PAGES — Theme Builder "Page intérieure" ========================================================================== */ /* Hero: forest gradient + two soft blobs */ .cdv-phero { position: relative; overflow: hidden; isolation: isolate; color: var(--cdv-cream); background: linear-gradient(135deg, #1f2718 0%, #2a3420 60%, #36412a 100%) !important; } .cdv-phero::before, .cdv-phero::after { content: ""; position: absolute; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: -1; } .cdv-phero::before { width: 55vw; left: -20vw; top: -28vw; background: radial-gradient(circle, rgba(201,168,106,.22), rgba(201,168,106,0) 65%); } .cdv-phero::after { width: 45vw; right: -12vw; bottom: -26vw; background: radial-gradient(circle, rgba(180,96,47,.2), rgba(180,96,47,0) 65%); } .cdv-phero__text { min-width: 0; } .cdv-maxw-560 { max-width: 560px !important; } .cdv-maxw-560 p { margin: 0; text-wrap: pretty; } .cdv-btn--disc7 .elementor-button { padding: 7px 7px 7px 22px !important; } .cdv-lift .elementor-button { transition: transform .3s, background-color .3s, color .3s; } .cdv-lift .elementor-button:hover { transform: translateY(-3px); } /* Breadcrumb [cdv_breadcrumb] */ .cdv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1.3; } .cdv-crumbs a { color: var(--cdv-sage); } .cdv-crumbs a:hover { color: var(--cdv-gold); } .cdv-crumbs i { font-style: normal; color: var(--cdv-gold); } .cdv-crumbs span { color: var(--cdv-gold); } /* Arch image + offset frame + rotating badge (desktop only) */ .cdv-arch { position: relative; justify-self: end; padding: 18px 18px 0 0 !important; width: auto !important; } .cdv-arch::before { content: ""; position: absolute; top: 0; right: 0; bottom: -18px; left: 18px; border: 1px solid rgba(201,168,106,.55); border-radius: 999px 999px 32px 32px; pointer-events: none; } .cdv-arch__img { position: relative; width: auto !important; border-radius: 999px 999px 32px 32px; overflow: hidden; background: var(--cdv-moss); box-shadow: 0 40px 80px rgba(0,0,0,.4); transition: transform .8s var(--cdv-ease); } .cdv-arch__img:hover { transform: translateY(-8px); } .cdv-arch__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,39,24,0) 60%, rgba(31,39,24,.35)); pointer-events: none; } .cdv-arch__img img { display: block; height: min(calc(70svh - 190px), 580px) !important; min-height: 340px; width: auto !important; max-width: none !important; object-fit: cover; border-radius: 0 !important; } .cdv-hbadge-w { position: absolute !important; left: -46px; bottom: 36px; width: 112px !important; z-index: 2; margin: 0 !important; } .cdv-hbadge { position: relative; width: 112px; height: 112px; border-radius: 50%; background: var(--cdv-gold); display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 40px rgba(0,0,0,.3); } .cdv-hbadge svg { position: absolute; inset: 0; width: 112px; height: 112px; } .cdv-hbadge text { font: 700 10.5px 'Hanken Grotesk', sans-serif; letter-spacing: 2.6px; text-transform: uppercase; fill: var(--cdv-forest); } .cdv-hbadge img { position: relative; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } /* Content blocks */ .cdv-on-linen .cdv-cta-band { background-color: var(--e-global-color-linen, #ece3d0) !important; } /* Sub-page cards: auto-fill grid like the design (min 280px) */ .cdv-cards { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 24px !important; align-items: start; } .cdv-card { color: var(--cdv-forest); } .cdv-card:hover { color: var(--cdv-forest); } .cdv-card__img { width: 100% !important; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--cdv-sand); transition: transform .6s var(--cdv-ease), border-radius .6s; } .cdv-card__img img { width: 100%; height: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; } .cdv-card:hover .cdv-card__img { transform: scale(.97); border-radius: 40px; } .cdv-card__arrow { flex: none; } .cdv-card__text { margin-top: -6px !important; } .cdv-cards > .e-con:nth-child(4n+2), .cdv-gallery > .elementor-element:nth-child(3n+2) { --cdv-delay: 80ms; } .cdv-cards > .e-con:nth-child(4n+3), .cdv-gallery > .elementor-element:nth-child(3n+3) { --cdv-delay: 160ms; } .cdv-cards > .e-con:nth-child(4n+4) { --cdv-delay: 240ms; } /* Photo gallery: CSS columns masonry */ .cdv-gallery { display: block !important; columns: 3 240px; column-gap: 14px; } .cdv-gallery > .elementor-element { break-inside: avoid; margin: 0 0 14px !important; border-radius: 20px; overflow: hidden; background: var(--cdv-sand); transition: transform .5s; width: 100% !important; } .cdv-gallery > .elementor-element:hover { transform: rotate(-1.5deg) scale(1.02); } .cdv-gallery img { display: block; width: 100%; height: auto; border-radius: 0 !important; } /* Numbered rows (bullets) */ .cdv-row { border-top: 1px solid var(--cdv-forest); color: var(--cdv-forest); transition: padding .4s, background-color .4s; } .cdv-row:hover { padding-left: 18px !important; background-color: var(--e-global-color-linen, #ece3d0); color: var(--cdv-forest); } .cdv-row__n .elementor-heading-title { white-space: nowrap; } /* Season tip */ .cdv-tip .cdv-kicker .elementor-heading-title { gap: 14px; } .cdv-tip .cdv-kicker .elementor-heading-title::before { width: 40px; } /* "Page suivante" card [cdv_next_page] */ .cdv-next { position: relative; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); background: var(--cdv-gold); color: var(--cdv-forest); border-radius: 36px 36px 0 0; overflow: hidden; } .cdv-next:hover { color: var(--cdv-forest); } .cdv-next__glow { position: absolute; width: 40vw; aspect-ratio: 1; right: -10vw; top: -20vw; border-radius: 50%; background: radial-gradient(circle, rgba(244,238,226,.45), rgba(244,238,226,0) 65%); pointer-events: none; } .cdv-next__body { position: relative; padding: clamp(36px, 5vw, 80px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; } .cdv-next__kicker { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; line-height: 1.2; } .cdv-next__kicker::before { content: ""; width: 40px; height: 1px; background: var(--cdv-forest); } .cdv-next__text { display: flex; flex-direction: column; gap: 18px; } .cdv-next__title { font-family: 'Instrument Serif', serif; font-size: clamp(60px, 8.5vw, 150px); line-height: .88; letter-spacing: -.035em; } .cdv-next__card { font-size: 18px; line-height: 1.55; max-width: 460px; color: var(--cdv-moss); text-wrap: pretty; } .cdv-next__go { display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: 15px; line-height: 1.2; } .cdv-next__disc { width: 72px; height: 72px; border-radius: 50%; background: var(--cdv-forest); color: var(--cdv-gold); display: flex; align-items: center; justify-content: center; font-size: 26px; transition: transform .5s var(--cdv-ease); } .cdv-next:hover .cdv-next__disc { transform: rotate(-45deg) scale(1.08); } .cdv-next__media { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(28px, 4vw, 56px); min-height: 360px; } .cdv-next__frame { display: block; height: clamp(300px, 34vw, 460px); max-width: 100%; } .cdv-next__img { display: block; width: 100%; height: 100%; border-radius: 26px; transform: rotate(4deg); box-shadow: 0 40px 80px rgba(31,39,24,.35); border: 6px solid var(--cdv-cream); background: var(--cdv-moss) center / cover no-repeat; transition: transform .8s var(--cdv-ease); } .cdv-next:hover .cdv-next__img { transform: rotate(0deg) scale(1.03); } .cdv-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 40px !important; align-items: baseline !important; } .cdv-tip { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px 64px !important; align-items: center !important; } .cdv-tip p { margin: 0; text-wrap: pretty; } .cdv-btn--ghost54 .elementor-button { min-height: 54px; display: inline-flex; align-items: center; } .cdv-dl150 { --cdv-delay: 150ms; } .cdv-dl300 { --cdv-delay: 300ms; } .cdv-dl450 { --cdv-delay: 450ms; } .cdv-arch--45 .cdv-arch__img img { aspect-ratio: 4 / 5; } .cdv-r45 img { aspect-ratio: 4 / 5; object-fit: cover; } .cdv-row .elementor-heading-title { display: block; } .cdv-logo--84 img, .cdv-logo--60 img { display: block; } .cdv-logo--84 a, .cdv-logo--60 a { display: block; } .cdv-ft-nav .elementor-item { line-height: 20px !important; } /* "À confirmer" pill */ .cdv-tbc .elementor-heading-title { display: inline-block; font-size: 13px; font-style: italic; line-height: 1.3; color: var(--e-global-color-stone, #8a7f66); border: 1px dashed var(--cdv-gold); padding: 5px 10px; border-radius: 999px; } /* FAQ accordion (native
, no JS) */ .cdv-faq { display: flex; flex-direction: column; border-bottom: 1px solid var(--cdv-forest); color: var(--cdv-forest); } .cdv-faq__item { border-top: 1px solid var(--cdv-forest); } .cdv-faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; cursor: pointer; } .cdv-faq__item summary::-webkit-details-marker { display: none; } .cdv-faq__q { font-family: 'Instrument Serif', serif; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; } .cdv-faq__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cdv-forest); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform .35s; } .cdv-faq__item[open] .cdv-faq__icon { transform: rotate(45deg); } .cdv-faq__a { margin: 0 0 26px; max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--e-global-color-olive, #55574a); } .cdv-faq__a--tbc { color: var(--e-global-color-stone, #8a7f66); font-style: italic; } /* Offers (Promotions) */ .cdv-offers { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px !important; } .cdv-offers .cdv-offer { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 340px; overflow: hidden; gap: 0 !important; } .cdv-offer__media { position: relative; background: #9a4f25; min-height: 100%; } .cdv-offer__img { position: absolute !important; inset: 0; width: 100% !important; height: 100%; margin: 0 !important; } .cdv-offer__img img { width: 100%; height: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; } .cdv-offer__badge { position: absolute !important; top: 18px; left: 18px; width: 92px !important; height: 92px; border-radius: 50%; background: var(--e-global-color-parch, #f8efe2); display: flex; align-items: center; justify-content: center; transform: rotate(-8deg); pointer-events: none; z-index: 2; margin: 0 !important; } .cdv-offer__body p { margin: 0; } /* News cards (Actualités) */ .cdv-news { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px !important; align-items: start; } .cdv-newscard { background: #fbf8f1; color: var(--cdv-forest); transition: transform .4s, box-shadow .4s; } .cdv-newscard:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(31,39,24,.12); color: var(--cdv-forest); } .cdv-newscard__img { width: 100% !important; border-radius: 16px; overflow: hidden; background: var(--cdv-sand); } .cdv-newscard__img img { display: block; width: 100%; border-radius: 0 !important; } .cdv-newscard p { margin: 0; text-wrap: pretty; } .cdv-news > .e-con:nth-child(3n+2) { --cdv-delay: 90ms; } .cdv-news > .e-con:nth-child(3n+3) { --cdv-delay: 180ms; } .cdv-offers > .e-con:nth-child(2) { --cdv-delay: 100ms; } .cdv-offer .elementor-heading-title, .cdv-newscard .elementor-heading-title { display: block; } .cdv-offer__body > .elementor-widget-text-editor { line-height: 1.3; } /* "À compléter" box */ .cdv-tbcbox { border: 1px dashed var(--cdv-gold); border-radius: 20px; padding: 28px 32px; } .cdv-tbcbox p { margin: 0; } /* Contact: info tiles + map */ .cdv-info { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 20px !important; align-items: stretch; } .cdv-tiles { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px !important; } .cdv-tile { transition: transform .4s var(--cdv-ease), box-shadow .4s; } .cdv-tile--wide { grid-column: span 2; } a.cdv-tile:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(31,39,24,.16); } .cdv-tile .elementor-heading-title { display: block; } .cdv-tile__icon { flex: none; width: auto !important; } .cdv-tile__icon .elementor-heading-title { width: 40px; height: 40px; border-radius: 50%; border: 1px solid; display: flex !important; align-items: center; justify-content: center; } .cdv-kc--accent .elementor-heading-title { border-color: var(--cdv-gold); } .cdv-kc--primary .elementor-heading-title { border-color: var(--cdv-forest); } .cdv-kc--peach .elementor-heading-title { border-color: var(--e-global-color-peach, #f3d6b4); } .cdv-kc--stone .elementor-heading-title { border-color: var(--e-global-color-stone, #8a7f66); } .cdv-tiles > .e-con:nth-child(2) { --cdv-delay: 80ms; } .cdv-tiles > .e-con:nth-child(3) { --cdv-delay: 160ms; } .cdv-tiles > .e-con:nth-child(4) { --cdv-delay: 240ms; } .cdv-tiles > .e-con:nth-child(5) { --cdv-delay: 320ms; } .cdv-map2-w { min-height: 540px; } .cdv-map2-w > .elementor-widget-container, .cdv-map2-w { position: relative; } .cdv-map2 { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: var(--cdv-sand); } .cdv-map2 iframe { position: absolute; inset: 0; border: 0; width: 100%; height: 100%; display: block; filter: grayscale(.35) sepia(.25); } .cdv-map2__bar { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: rgba(31,39,24,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--cdv-cream); border-radius: 20px; padding: 14px 14px 14px 16px; } .cdv-map2__who { display: flex; align-items: center; gap: 12px; min-width: 0; } .cdv-map2__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; } .cdv-map2__who div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cdv-map2__who b { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 22px; line-height: 1; } .cdv-map2__who span { font-size: 13px; color: var(--cdv-sage); line-height: 1.4; } .cdv-map2__bar a { background: var(--cdv-gold); color: var(--cdv-forest); font-weight: 700; font-size: 14px; line-height: 1.2; padding: 12px 18px; border-radius: 999px; } .cdv-map2__bar a:hover { background: #e0c58f; color: var(--cdv-forest); } /* Contact form (Elementor Pro Form widget) */ .cdv-formbox { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px !important; color: var(--cdv-cream); } .cdv-form .elementor-form-fields-wrapper { margin: 0 !important; display: flex; flex-direction: column; gap: 14px; } .cdv-form .elementor-field-group { padding: 0 !important; margin: 0 !important; flex-direction: column; align-items: stretch; gap: 6px; } .cdv-form .elementor-field-group > label.elementor-field-label { padding: 0 !important; margin: 0; font: 700 12px/1.3 'Hanken Grotesk', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--cdv-sage); } .cdv-form .elementor-field-textual { font: 400 17px/1.4 'Hanken Grotesk', sans-serif !important; color: var(--cdv-cream) !important; background: rgba(244,238,226,.06) !important; border: 1px solid rgba(244,238,226,.2) !important; border-radius: 14px !important; padding: 14px 16px !important; min-height: 0 !important; outline: none; box-shadow: none !important; transition: border-color .25s; } .cdv-form .elementor-field-textual:focus { border-color: var(--cdv-gold) !important; } .cdv-form textarea.elementor-field-textual { resize: vertical; } .cdv-form .elementor-field-type-acceptance { padding: 6px 0 !important; } .cdv-form .elementor-field-type-acceptance .elementor-field-subgroup { display: flex; } .cdv-form .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: center; gap: 12px; } .cdv-form .elementor-field-type-acceptance input { width: 20px; height: 20px; margin: 0; accent-color: var(--cdv-gold); flex: none; } .cdv-form .elementor-field-type-acceptance label { font-size: 15px; line-height: 1.4; color: var(--e-global-color-mist, #e6dcc6); cursor: pointer; padding: 0 !important; } .cdv-form .elementor-field-type-submit { margin-top: 0 !important; } .cdv-form .elementor-button[type="submit"] { width: auto !important; background: var(--cdv-gold) !important; color: var(--cdv-forest) !important; font: 700 15px/1.2 'Hanken Grotesk', sans-serif !important; padding: 17px 28px !important; border-radius: 999px !important; border: 0 !important; transition: transform .3s; min-height: 0; } .cdv-form .elementor-button[type="submit"]:hover { transform: translateY(-3px); } .cdv-form .elementor-message { color: var(--cdv-gold); font-size: 20px; line-height: 1.5; margin-top: 16px; } .cdv-form .elementor-message.elementor-message-danger { color: #f3b4a0; font-size: 15px; } .cdv-form .elementor-error .elementor-field-textual { border-color: #e08b6d !important; } .cdv-form .elementor-message::before { display: none; } .cdv-form .elementor-field-type-honeypot { display: none !important; } .cdv-form .elementor-field-textual { line-height: normal !important; } .cdv-form .elementor-field-type-acceptance { padding: 8px 0 !important; } .cdv-form .elementor-field-type-acceptance .elementor-field-option { min-height: 22px; } .cdv-form .elementor-form-fields-wrapper > div:has(input[name="form_fields[hp]"]) { display: none !important; } .cdv-form .elementor-field-type-submit { width: auto !important; align-self: flex-start; } .cdv-form .elementor-button[type="submit"] { line-height: 20px !important; } .cdv-words--tight .elementor-heading-title { column-gap: .2em; } /* Legal pages — long-form text */ .cdv-legal { max-width: 820px; color: var(--e-global-color-olive, #55574a); font-size: 17px; line-height: 1.7; } .cdv-legal h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.01em; color: var(--cdv-forest); margin: 48px 0 14px; } .cdv-legal h2:first-child { margin-top: 0; } .cdv-legal p, .cdv-legal ul { margin: 0 0 14px; } .cdv-legal ul { padding-left: 1.2em; } .cdv-legal li { margin-bottom: 8px; } .cdv-legal strong { color: var(--cdv-forest); font-weight: 600; } .cdv-legal a { color: var(--cdv-terra); text-decoration: underline; text-underline-offset: 3px; } .cdv-legal code { font-size: .85em; background: rgba(31,39,24,.06); padding: 1px 5px; border-radius: 4px; } .cdv-legal__date { margin-top: 40px !important; font-size: 14px; color: var(--e-global-color-stone, #8a7f66); } .cdv-todo { background: rgba(201,168,106,.28); color: var(--cdv-forest); padding: 0 4px; border-radius: 4px; font-style: italic; } /* Contact form privacy note */ .cdv-form-note p { margin: 0; } .cdv-form-note a { color: var(--cdv-gold); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== BOUTIQUE (inc/shop.php + assets/js/shop.js) ========================================================================== */ .cdv-legal { max-width: 820px !important; } .cdv-shop-page .elementor-location-header { position: sticky; } .cdv-noscroll { overflow: hidden; } .cdv-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; } .cdv-shop__k { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--e-global-color-stone, #8a7f66); line-height: 1.3; } /* Shop header */ .cdv-shophdr { background: rgba(31,39,24,.94) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,.12); } .cdv-shopnav .elementor-heading-title a, .cdv-shopnav .elementor-heading-title { white-space: nowrap; } .cdv-logo--52 img { width: 52px; height: 52px; display: block; } .cdv-cartbtn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--cdv-gold) !important; color: var(--cdv-forest) !important; font: 700 14px/1 'Hanken Grotesk', sans-serif; cursor: pointer; transition: transform .3s; } .cdv-cartbtn:hover { transform: scale(1.04); background: var(--cdv-gold); color: var(--cdv-forest); } .cdv-cartbtn__n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--cdv-forest); color: var(--cdv-gold); display: flex; align-items: center; justify-content: center; font-size: 12px; } @media (max-width: 559px) { .cdv-cartbtn__t { display: none; } .cdv-cartbtn { padding: 0 12px; } } /* Shop hero */ .cdv-shophero { position: relative; overflow: hidden; isolation: isolate; } .cdv-shophero::before { content: ""; position: absolute; width: 50vw; aspect-ratio: 1; right: -12vw; top: -24vw; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,106,.22), rgba(201,168,106,0) 65%); pointer-events: none; z-index: -1; } .cdv-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .cdv-steps li { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.3; color: var(--cdv-cream); } .cdv-steps li span { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cdv-gold); color: var(--cdv-gold); display: flex; align-items: center; justify-content: center; font-family: 'Instrument Serif', serif; font-size: 18px; } /* Category chips */ .cdv-chips { position: sticky; top: 72px; z-index: 20; background: rgba(244,238,226,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(31,39,24,.1); } .admin-bar .cdv-chips { top: 104px; } .cdv-chips__in { max-width: 1440px; margin: 0 auto; padding: 14px var(--cdv-gutter); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .cdv-chips__in::-webkit-scrollbar { display: none; } .cdv-chip { flex: none; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(31,39,24,.18); color: var(--cdv-forest); font-weight: 600; font-size: 14px; white-space: nowrap; display: flex; align-items: center; gap: 8px; transition: background .3s, color .3s; } .cdv-chip span { font-size: 12px; opacity: .6; } .cdv-chip:hover { color: var(--cdv-forest); border-color: var(--cdv-forest); } .cdv-chip.is-on { background: var(--cdv-forest); border-color: var(--cdv-forest); color: var(--cdv-cream); } /* List layout */ .cdv-shop { max-width: 1440px; margin: 0 auto; padding: clamp(28px,4vw,48px) var(--cdv-gutter) clamp(80px,9vw,120px); display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(24px,3vw,48px); align-items: start; } @media (min-width: 980px) { .cdv-shop { grid-template-columns: 260px minmax(0,1fr); } .cdv-shop__aside { position: sticky; top: 150px; } .admin-bar .cdv-shop__aside { top: 182px; } } .cdv-shop__aside { display: flex; flex-direction: column; gap: 24px; } .cdv-shop__group { display: flex; flex-direction: column; gap: 10px; } .cdv-search { display: flex; align-items: center; gap: 10px; background: #fbf8f1; border: 1px solid rgba(31,39,24,.12); border-radius: 999px; padding: 0 18px; height: 50px; } .cdv-search input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; outline: none; font-size: 15px; color: var(--cdv-forest); padding: 0 !important; box-shadow: none !important; } .cdv-toggle { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px !important; border-radius: 16px !important; border: 1px solid rgba(31,39,24,.12) !important; background: #fbf8f1 !important; cursor: pointer; color: var(--cdv-forest) !important; font: 500 15px/1.3 'Hanken Grotesk', sans-serif !important; text-align: left; } .cdv-toggle__t { flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgba(31,39,24,.2); position: relative; transition: background .3s; } .cdv-toggle__t i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .3s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .cdv-toggle[aria-pressed="true"] .cdv-toggle__t { background: var(--cdv-terra); } .cdv-toggle[aria-pressed="true"] .cdv-toggle__t i { transform: translateX(16px); } .cdv-select { height: 50px; border-radius: 16px !important; border: 1px solid rgba(31,39,24,.12) !important; background-color: #fbf8f1 !important; padding: 0 14px !important; font-size: 15px; color: var(--cdv-forest); cursor: pointer; } .cdv-advice { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px; border-radius: 20px; background: var(--cdv-moss); color: var(--cdv-cream); } .cdv-advice:hover { color: var(--cdv-cream); background: var(--cdv-forest); } .cdv-advice > span:first-child { display: flex; flex-direction: column; gap: 4px; } .cdv-advice__k { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--cdv-gold); font-weight: 700; } .cdv-advice__t { font-family: 'Instrument Serif', serif; font-size: 24px; line-height: 1.05; } .cdv-shop__main { display: flex; flex-direction: column; gap: 22px; min-width: 0; } .cdv-shop__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 15px; color: var(--e-global-color-olive, #55574a); } .cdv-shop__clear, .cdv-empty button { border: 0 !important; background: transparent !important; color: var(--cdv-terra) !important; font: 700 14px 'Hanken Grotesk', sans-serif !important; cursor: pointer; padding: 6px 0 !important; } .cdv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 28px 20px; } .cdv-grid [hidden] { display: none !important; } .cdv-empty { padding: 60px 24px; border: 1px dashed var(--cdv-gold); border-radius: 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; } .cdv-empty[hidden] { display: none; } .cdv-empty span { font-family: 'Instrument Serif', serif; font-size: 34px; color: var(--cdv-forest); } .cdv-empty button { background: var(--cdv-forest) !important; color: var(--cdv-cream) !important; font-size: 15px !important; padding: 14px 22px !important; border-radius: 999px !important; } /* Product card (shop grid) */ .cdv-sc { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .cdv-sc__media { position: relative; display: block; aspect-ratio: 4/5; border-radius: 22px; overflow: hidden; background: var(--cdv-sand); transition: border-radius .6s; } .cdv-sc__media:hover { border-radius: 36px; } .cdv-sc__media img { width: 100%; height: 100% !important; object-fit: cover; display: block; transition: transform 1s var(--cdv-ease); border-radius: 0 !important; } .cdv-sc__media:hover img { transform: scale(1.07); } .cdv-sc__media .cdv-badge { position: absolute; top: 14px; left: 14px; } .cdv-sc__media .cdv-stock { position: absolute; bottom: 12px; left: 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .cdv-sc__row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .cdv-sc__meta { display: flex; flex-direction: column; gap: 4px; color: var(--cdv-forest); min-width: 0; } .cdv-sc__meta:hover { color: var(--cdv-terra); } .cdv-sc__name { font-family: 'Instrument Serif', serif; font-size: 24px; line-height: 1.08; text-wrap: balance; } .cdv-sc__add, .cdv-add { flex: none; width: 46px !important; height: 46px; border-radius: 50% !important; border: 0 !important; background: var(--cdv-forest) !important; color: var(--cdv-cream) !important; font: 400 22px/1 'Hanken Grotesk', sans-serif !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; transition: transform .3s, background .3s !important; } .cdv-sc__add:hover { background: var(--cdv-terra) !important; transform: rotate(90deg); color: var(--cdv-cream) !important; } .cdv-add { font-size: 20px !important; } .cdv-add:hover { transform: scale(1.08); } .cdv-sc__add.is-added, .cdv-add.is-added { background: #3f9b4f !important; } .is-busy { opacity: .6; pointer-events: none; } .cdv-sc > .cdv-price { margin-top: -6px; } /* Product page */ .cdv-pd { max-width: 1440px; margin: 0 auto; padding: clamp(28px,4vw,48px) var(--cdv-gutter) clamp(64px,8vw,110px); display: flex; flex-direction: column; gap: 28px; color: var(--cdv-forest); } .cdv-pd__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--e-global-color-olive, #55574a); line-height: 1.4; } .cdv-pd__crumbs a { color: var(--e-global-color-olive, #55574a); } .cdv-pd__crumbs a:hover { color: var(--cdv-terra); } .cdv-pd__crumbs i { font-style: normal; color: var(--cdv-gold); } .cdv-pd__crumbs span { color: var(--cdv-forest); font-weight: 600; } .cdv-pd__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px,5vw,80px); align-items: start; } .cdv-pd__img { position: relative; aspect-ratio: 4/5; border-radius: 32px; overflow: hidden; background: var(--cdv-sand); } .cdv-pd__img img { width: 100%; height: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; } .cdv-js .cdv-pd__img img { animation: cdv-pdclip 1.2s var(--cdv-ease) both; } @keyframes cdv-pdclip { from { clip-path: inset(12% 10% 12% 10% round 32px); } to { clip-path: inset(0 0 0 0 round 32px); } } .cdv-reduced .cdv-pd__img img { animation: none; } .cdv-pd__badge { position: absolute; top: 20px; left: 20px; width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Instrument Serif', serif; font-size: 22px; transform: rotate(-8deg); pointer-events: none; } .cdv-pd__badge.cdv-badge--promo { background: var(--cdv-terra); color: var(--e-global-color-parch, #f8efe2); } .cdv-pd__badge.cdv-badge--new { background: var(--cdv-gold); color: var(--cdv-forest); } .cdv-pd__info { display: flex; flex-direction: column; gap: 26px; } @media (min-width: 900px) { .cdv-pd__info { position: sticky; top: 110px; } } .cdv-pd__head { display: flex; flex-direction: column; gap: 14px; } .cdv-pd__cat { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--cdv-terra); line-height: 1.3; } .cdv-pd__title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(46px,5.4vw,84px); line-height: .92; letter-spacing: -.025em; margin: 0; text-wrap: balance; color: var(--cdv-forest); } .cdv-pd__price { display: flex; align-items: baseline; gap: 14px; } .cdv-pd__price b { font-size: 30px; font-weight: 700; } .cdv-pd__price del { font-size: 18px; color: var(--e-global-color-stone, #8a7f66); } .cdv-pd__desc { margin: 0; font-size: 18px; line-height: 1.6; color: var(--e-global-color-olive, #55574a); max-width: 520px; text-wrap: pretty; } .cdv-pd__sizes { display: flex; flex-direction: column; gap: 10px; } .cdv-pd__sizes > div { display: flex; flex-wrap: wrap; gap: 8px; } .cdv-size { height: 48px; padding: 0 20px !important; border-radius: 999px !important; border: 1px solid rgba(31,39,24,.2) !important; background: transparent !important; color: var(--cdv-forest) !important; font: 600 15px 'Hanken Grotesk', sans-serif !important; cursor: pointer; } .cdv-size.is-on { background: var(--cdv-forest) !important; border-color: var(--cdv-forest) !important; color: var(--cdv-cream) !important; } .cdv-pd__stock { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 16px; background: #fbf8f1; border: 1px solid rgba(31,39,24,.1); font-size: 15px; line-height: 1.4; } .cdv-pd__stock i { width: 9px; height: 9px; border-radius: 50%; background: #3f9b4f; flex: none; } .cdv-pd__stock i.is-order { background: #d08a2e; } .cdv-pd__stock span { color: #6b6a5a; } .cdv-pd__buy { display: flex; gap: 12px; flex-wrap: wrap; } .cdv-qty { display: flex; align-items: center; height: 38px; border-radius: 999px; border: 1px solid rgba(31,39,24,.25); } .cdv-qty button { width: 36px; height: 100%; border: 0 !important; background: transparent !important; cursor: pointer; font: 400 17px 'Hanken Grotesk', sans-serif !important; color: var(--cdv-forest) !important; padding: 0 !important; } .cdv-qty span { min-width: 20px; text-align: center; font-weight: 700; font-size: 14px; } .cdv-qty--lg { height: 60px; border-color: var(--cdv-forest); } .cdv-qty--lg button { width: 52px; font-size: 22px !important; } .cdv-qty--lg span { min-width: 28px; font-size: 17px; } .cdv-pd__add { flex: 1; min-width: 220px; height: 60px; border-radius: 999px !important; border: 0 !important; background: var(--cdv-forest) !important; color: var(--cdv-cream) !important; font: 700 16px 'Hanken Grotesk', sans-serif !important; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .3s, transform .3s; padding: 0 20px !important; } .cdv-pd__add:hover { background: var(--cdv-moss) !important; transform: translateY(-2px); } .cdv-pd__add.is-added { background: #3f9b4f !important; } .cdv-pd__add[disabled] { opacity: .5; cursor: not-allowed; } .cdv-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; } .cdv-perks div { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; background: var(--e-global-color-linen, #ece3d0); } .cdv-perks b { font-weight: 700; font-size: 14px; line-height: 1.3; } .cdv-perks span { font-size: 13px; line-height: 1.45; color: var(--e-global-color-olive, #55574a); } .cdv-related { display: flex; flex-direction: column; gap: 24px; margin-top: clamp(40px,5vw,72px); } .cdv-related h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(36px,4vw,60px); line-height: 1; margin: 0; color: var(--cdv-forest); letter-spacing: 0; } .cdv-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 20px; } .cdv-rc { display: flex; flex-direction: column; gap: 12px; color: var(--cdv-forest); } .cdv-rc:hover { color: var(--cdv-terra); } .cdv-rc__img { display: block; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; background: var(--cdv-sand); } .cdv-rc__img img { width: 100%; height: 100% !important; object-fit: cover; display: block; transition: transform 1s; border-radius: 0 !important; } .cdv-rc:hover .cdv-rc__img img { transform: scale(1.06); } .cdv-rc__name { font-family: 'Instrument Serif', serif; font-size: 22px; line-height: 1.1; } .cdv-rc__price { font-weight: 700; margin-top: -6px; } /* Basket drawer + toast */ .cdv-drawer { position: fixed; inset: 0; z-index: 9990; } .cdv-drawer[hidden] { display: none; } .cdv-drawer__scrim { position: absolute; inset: 0; background: rgba(15,19,11,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s; } .cdv-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 460px); background: var(--cdv-cream); display: flex; flex-direction: column; box-shadow: -30px 0 80px rgba(0,0,0,.25); transform: translateX(100%); transition: transform .55s var(--cdv-ease); color: var(--cdv-forest); } .cdv-drawer.is-open .cdv-drawer__scrim { opacity: 1; } .cdv-drawer.is-open .cdv-drawer__panel { transform: none; } .cdv-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 24px 26px; border-bottom: 1px solid rgba(31,39,24,.1); } .cdv-drawer__title { font-family: 'Instrument Serif', serif; font-size: 36px; line-height: 1; } .cdv-drawer__title > span { font-size: 20px; color: var(--e-global-color-stone, #8a7f66); } .cdv-drawer__x { width: 44px; height: 44px; border-radius: 50% !important; border: 1px solid rgba(31,39,24,.2) !important; background: transparent !important; font: 400 20px/1 'Hanken Grotesk', sans-serif !important; cursor: pointer; color: var(--cdv-forest) !important; padding: 0 !important; } .cdv-drawer__body { flex: 1; overflow: auto; padding: 12px 26px; display: flex; flex-direction: column; } .cdv-drawer__body[hidden] { display: none; } .cdv-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 40px 26px; } .cdv-drawer__empty[hidden] { display: none; } .cdv-drawer__empty span { font-family: 'Instrument Serif', serif; font-size: 32px; } .cdv-drawer__empty a { background: var(--cdv-forest); color: var(--cdv-cream); font-weight: 700; padding: 15px 22px; border-radius: 999px; font-size: 15px; } .cdv-drawer__empty a:hover { color: var(--cdv-cream); } .cdv-ci { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(31,39,24,.1); } .cdv-ci__img { width: 76px; height: 95px; border-radius: 14px; background: var(--cdv-sand) center / cover no-repeat; display: block; } .cdv-ci__body { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; } .cdv-ci__top { display: flex; justify-content: space-between; gap: 10px; } .cdv-ci__top b { white-space: nowrap; } .cdv-ci__nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cdv-ci__nm a { font-family: 'Instrument Serif', serif; font-size: 22px; line-height: 1.1; color: var(--cdv-forest); } .cdv-ci__nm small { font-size: 13px; color: #6b6a5a; } .cdv-ci__bot { display: flex; justify-content: space-between; align-items: center; } .cdv-ci__rm { border: 0 !important; background: transparent !important; color: var(--e-global-color-stone, #8a7f66) !important; font: 400 13px 'Hanken Grotesk', sans-serif !important; cursor: pointer; text-decoration: underline; padding: 0 !important; } .cdv-drawer__foot { padding: 22px 26px 26px; border-top: 1px solid rgba(31,39,24,.1); display: flex; flex-direction: column; gap: 14px; background: #fbf8f1; } .cdv-drawer__foot[hidden] { display: none; } .cdv-drawer__total { display: flex; justify-content: space-between; align-items: baseline; } .cdv-drawer__total span { color: var(--e-global-color-olive, #55574a); } .cdv-drawer__total b { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 38px; } .cdv-drawer__note { font-size: 13px; color: var(--e-global-color-olive, #55574a); line-height: 1.45; } .cdv-drawer__go { display: flex; align-items: center; justify-content: center; gap: 12px; height: 60px; border-radius: 999px; background: var(--cdv-terra); color: var(--e-global-color-parch, #f8efe2); font-weight: 700; font-size: 16px; } .cdv-drawer__go:hover { color: var(--e-global-color-parch, #f8efe2); background: #9a4f25; } .cdv-toast { position: fixed; left: 50%; bottom: 28px; z-index: 9980; transform: translate(-50%, calc(100% + 60px)); opacity: 0; visibility: hidden; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--cdv-forest); color: var(--cdv-cream); box-shadow: 0 20px 40px rgba(0,0,0,.3); font-size: 15px; transition: transform .5s var(--cdv-ease), opacity .4s, visibility .4s; max-width: calc(100vw - 24px); } .cdv-toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; } @media (max-width: 759px) { .cdv-toast { bottom: calc(84px + env(safe-area-inset-bottom)); } } .cdv-toast__ok { width: 24px; height: 24px; border-radius: 50%; background: var(--cdv-gold); color: var(--cdv-forest); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; } .cdv-toast__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cdv-toast button { flex: none; border: 0 !important; background: var(--cdv-gold) !important; color: var(--cdv-forest) !important; font: 700 14px 'Hanken Grotesk', sans-serif !important; padding: 10px 16px !important; border-radius: 999px !important; cursor: pointer; } /* Reservation */ .cdv-res { max-width: 1300px; margin: 0 auto; padding: clamp(36px,5vw,64px) var(--cdv-gutter) clamp(64px,8vw,110px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px,5vw,72px); align-items: start; color: var(--cdv-forest); } .cdv-res__form { display: flex; flex-direction: column; gap: 28px; } .cdv-res__head { display: flex; flex-direction: column; gap: 12px; } .cdv-res__head a { font-size: 14px; color: var(--e-global-color-olive, #55574a); } .cdv-res__head a:hover { color: var(--cdv-terra); } .cdv-res__head h1 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(46px,5.6vw,88px); line-height: .92; letter-spacing: -.025em; margin: 0; color: var(--cdv-forest); } .cdv-res__head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--e-global-color-olive, #55574a); max-width: 520px; } .cdv-res__step { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .cdv-res__step legend { padding: 0; margin-bottom: 14px; } .cdv-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; } .cdv-day, .cdv-slot { position: relative; cursor: pointer; } .cdv-day input, .cdv-slot input { position: absolute; opacity: 0; pointer-events: none; } .cdv-day > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; border: 1px solid rgba(31,39,24,.15); background: #fbf8f1; color: var(--cdv-forest); transition: background .25s, color .25s; } .cdv-day small { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; line-height: 1.3; } .cdv-day small.cdv-day__m { text-transform: none; letter-spacing: 0; font-weight: 400; } .cdv-day b { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 30px; line-height: 1; } .cdv-day input:checked + span { background: var(--cdv-forest); border-color: var(--cdv-forest); color: var(--cdv-cream); } .cdv-day input:focus-visible + span, .cdv-slot input:focus-visible + span { outline: 2px solid var(--cdv-gold); outline-offset: 2px; } .cdv-slots { display: flex; flex-wrap: wrap; gap: 8px; } .cdv-slot > span { display: flex; align-items: center; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(31,39,24,.2); color: var(--cdv-forest); font-weight: 600; font-size: 14px; transition: background .25s, color .25s; } .cdv-slot input:checked + span { background: var(--cdv-terra); border-color: var(--cdv-terra); color: var(--e-global-color-parch, #f8efe2); } .cdv-res__tbc { font-size: 13px; font-style: italic; color: var(--e-global-color-stone, #8a7f66); } .cdv-res__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; } .cdv-res__form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--e-global-color-olive, #55574a); line-height: 1.3; } .cdv-res__form input[type=text], .cdv-res__form input[type=tel], .cdv-res__form input[type=email], .cdv-res__form textarea { height: 52px; border-radius: 14px !important; border: 1px solid rgba(31,39,24,.18) !important; background: #fbf8f1 !important; padding: 0 16px !important; font: 400 16px 'Hanken Grotesk', sans-serif !important; color: var(--cdv-forest) !important; outline: none; box-shadow: none !important; } .cdv-res__form textarea { height: auto; padding: 14px 16px !important; resize: vertical; } .cdv-res__form input:focus, .cdv-res__form textarea:focus { border-color: var(--cdv-terra) !important; } .cdv-res__msg { padding: 14px 18px; border-radius: 14px; background: rgba(180,96,47,.1); color: #9a4f25; font-size: 15px; } .cdv-res__msg[hidden] { display: none; } .cdv-res__submit { height: 64px; border-radius: 999px !important; border: 0 !important; background: var(--cdv-terra) !important; color: var(--e-global-color-parch, #f8efe2) !important; font: 700 17px 'Hanken Grotesk', sans-serif !important; cursor: pointer; transition: transform .3s, background .3s; } .cdv-res__submit:hover { background: #9a4f25 !important; transform: translateY(-2px); } .cdv-res__nopay { font-size: 14px; color: var(--e-global-color-olive, #55574a); text-align: center; margin-top: -14px; } .cdv-res__privacy { font-size: 12px; color: var(--e-global-color-stone, #8a7f66); text-align: center; margin-top: -20px; } .cdv-res__privacy a { color: inherit; text-decoration: underline; } .cdv-res__sum { background: var(--cdv-forest); color: var(--cdv-cream); border-radius: 28px; padding: clamp(24px,3vw,36px); display: flex; flex-direction: column; gap: 20px; } @media (min-width: 900px) { .cdv-res__sum { position: sticky; top: 110px; } } .cdv-res__sumt { font-family: 'Instrument Serif', serif; font-size: 34px; line-height: 1; } .cdv-res__items { display: flex; flex-direction: column; gap: 14px; } .cdv-res__item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; } .cdv-res__thumb { width: 56px; height: 70px; border-radius: 12px; background: var(--cdv-moss) center / cover no-repeat; display: block; } .cdv-res__nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cdv-res__nm b { font-weight: 600; font-size: 15px; } .cdv-res__nm small { font-size: 13px; color: var(--cdv-sage); } .cdv-res__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(244,238,226,.15); padding-top: 18px; } .cdv-res__total span { color: var(--cdv-sage); } .cdv-res__total b { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 40px; color: var(--cdv-gold); } .cdv-res__pickup { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: rgba(244,238,226,.06); } .cdv-res__pickup img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .cdv-res__pickup span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; color: var(--cdv-sage); } .cdv-res__pickup b { font-weight: 700; color: var(--cdv-cream); } /* Confirmation */ .cdv-done { position: relative; min-height: calc(100vh - 72px); background: var(--cdv-forest); color: var(--cdv-cream); padding: clamp(56px,8vw,110px) var(--cdv-gutter); overflow: hidden; display: flex; align-items: center; } .cdv-done::before { content: ""; position: absolute; width: 60vw; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(201,168,106,.2), rgba(201,168,106,0) 62%); pointer-events: none; } .cdv-done__in { position: relative; max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; } .cdv-done__check { width: 96px; height: 96px; border-radius: 50%; background: var(--cdv-gold); color: var(--cdv-forest); display: flex; align-items: center; justify-content: center; font-size: 44px; animation: cdv-check .9s var(--cdv-ease) both; } @keyframes cdv-check { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.15); } 100% { transform: none; } } .cdv-done h1 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(52px,7vw,116px); line-height: .9; letter-spacing: -.03em; margin: 0; color: var(--cdv-cream); } .cdv-done p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--e-global-color-mist, #e6dcc6); max-width: 620px; } .cdv-done__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .cdv-done__facts div { display: flex; flex-direction: column; gap: 4px; padding: 18px 24px; border-radius: 20px; background: rgba(244,238,226,.07); border: 1px solid rgba(244,238,226,.14); min-width: 170px; } .cdv-done__facts span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--cdv-gold); font-weight: 700; } .cdv-done__facts b { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 28px; } .cdv-done__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .cdv-done__a1 { background: var(--cdv-cream); color: var(--cdv-forest); font-weight: 700; padding: 17px 26px; border-radius: 999px; font-size: 15px; } .cdv-done__a1:hover { color: var(--cdv-forest); } .cdv-done__a2 { border: 1px solid rgba(244,238,226,.4); color: var(--cdv-cream); font-weight: 600; padding: 17px 26px; border-radius: 999px; font-size: 15px; } .cdv-done__a2:hover { color: var(--cdv-cream); background: rgba(244,238,226,.1); } /* Shop footer */ .cdv-shopfoot a { color: var(--cdv-gold); } .cdv-shopfoot a:hover { color: #e0c58f; } .cdv-maxw-760 { max-width: 760px !important; } .cdv-logo--48 img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; } .cdv-shop [hidden], .cdv-drawer [hidden], .cdv-res [hidden] { display: none !important; } .admin-bar .cdv-drawer__panel { top: 32px; } @media (max-width: 782px) { .admin-bar .cdv-drawer__panel { top: 46px; } } .cdv-logo--52 a, .cdv-logo--52 img { display: block; } .cdv-shophdr .cdv-mainbar { padding-top: 10px !important; padding-bottom: 10px !important; } .cdv-sc .cdv-price, .cdv-sc .cdv-price b, .cdv-sc .cdv-price del { line-height: normal; } .cdv-logo--52 img { width: 52px !important; height: 52px !important; } .cdv-logo--48 a { display: block; } /* Shop links: beat the kit's global link colour */ body a.cdv-done__a1, body a.cdv-done__a1:hover { color: var(--cdv-forest); } body a.cdv-done__a2, body a.cdv-done__a2:hover { color: var(--cdv-cream); } body a.cdv-advice, body a.cdv-advice:hover { color: var(--cdv-cream); } body a.cdv-drawer__go, body a.cdv-drawer__go:hover { color: var(--e-global-color-parch, #f8efe2); } body .cdv-drawer__empty a, body .cdv-drawer__empty a:hover { color: var(--cdv-cream); } body a.cdv-chip { color: var(--cdv-forest); } body a.cdv-chip.is-on { color: var(--cdv-cream); } body a.cdv-sc__meta, body a.cdv-rc, body .cdv-ci__nm a { color: var(--cdv-forest); } body a.cdv-sc__meta:hover, body a.cdv-rc:hover { color: var(--cdv-terra); } body .cdv-pd__crumbs a, body .cdv-res__head a { color: var(--e-global-color-olive, #55574a); } body .cdv-pd__crumbs a:hover, body .cdv-res__head a:hover { color: var(--cdv-terra); } body .cdv-res__privacy a { color: inherit; } .cdv-slot small { margin-left: 8px; font-weight: 500; font-size: 13px; opacity: .7; } .cdv-slot input:disabled + span { opacity: .4; cursor: not-allowed; text-decoration: line-through; } /* Map consent panel */ .elementor-widget-google_maps .elementor-custom-embed { position: relative; } .cdv-mapgate { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: radial-gradient(circle at 30% 30%, #ece3d0, #e6d9bf); color: var(--cdv-forest); border-radius: inherit; } .cdv-mapgate__k { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--cdv-terra); } .cdv-mapgate p { margin: 0; max-width: 320px; font-size: 15px; line-height: 1.5; color: var(--e-global-color-olive, #55574a); } .cdv-mapgate button { border: 0 !important; background: var(--cdv-forest) !important; color: var(--cdv-cream) !important; font: 700 15px 'Hanken Grotesk', sans-serif !important; padding: 14px 22px !important; border-radius: 999px !important; cursor: pointer; } body .cdv-mapgate a { font-size: 14px; font-weight: 600; color: var(--cdv-terra); } .cdv-map2__bar { z-index: 2; } /* Header right group: keep every button whole on tablets and small phones */ .cdv-mainbar > .e-con:last-child > .elementor-widget { flex-shrink: 0; } @media (max-width: 899px) { .cdv-mainbar > .e-con:last-child { --gap: 8px !important; gap: 8px !important; } .cdv-mainbar .cdv-call .elementor-button, .cdv-mainbar .cdv-shop-btn .elementor-button { padding-left: 14px !important; padding-right: 14px !important; } } @media (max-width: 559px) { .cdv-cartbtn { gap: 6px; padding: 0 10px; } .cdv-shophdr .cdv-mainbar > .e-con:last-child { --gap: 6px !important; gap: 6px !important; } } .cdv-cartbtn { padding: 0 18px 0 14px !important; min-width: 0 !important; border: 0 !important; } @media (max-width: 559px) { .cdv-cartbtn { padding: 0 10px !important; gap: 6px !important; } } /* Header basket (site headers 112/120): Boutique (text) + round basket with count badge; old Itinéraire / Appeler bar removed */ .cdv-hdr-cart { flex-shrink: 0; } .cdv-hdr-cart .elementor-shortcode { display: flex; } .cdv-mainbar .cdv-shop-btn { flex-shrink: 0; } .cdv-mainbar .cdv-shop-btn .elementor-button-icon { display: none !important; } .cdv-mainbar .cdv-hdr-cart .cdv-cartbtn { width: 44px; height: 44px; padding: 0 !important; gap: 0 !important; justify-content: center; overflow: visible; } .cdv-mainbar .cdv-hdr-cart .cdv-cartbtn__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cdv-mainbar .cdv-hdr-cart .cdv-cartbtn__n { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; box-shadow: 0 0 0 2px var(--cdv-gold); } @media (max-width: 1500px) { .cdv-mainbar > .e-con:last-child { --gap: 12px !important; gap: 12px !important; } } @media (max-width: 559px) { .cdv-mainbar > .e-con:last-child { --gap: 8px !important; gap: 8px !important; } .cdv-mainbar .cdv-shop-btn .elementor-button { padding-left: 12px !important; padding-right: 12px !important; font-size: 13px !important; } } /* 1360–1560px: tighten the right-hand header group so it clears the centred logo */ @media (min-width: 1360px) and (max-width: 1560px) { .cdv-mainbar > .e-con:last-child { --gap: 8px !important; gap: 8px !important; } .cdv-mainbar .cdv-nav-right { --e-nav-menu-horizontal-menu-item-margin: 6px !important; } .cdv-mainbar .cdv-shop-btn .elementor-button, .cdv-mainbar .cdv-call .elementor-button { padding-left: 16px !important; padding-right: 16px !important; } } @media (max-width: 389px) { .cdv-mainbar > .e-con:last-child { --gap: 6px !important; gap: 6px !important; } .cdv-mainbar .cdv-shop-btn .elementor-button { padding-left: 10px !important; padding-right: 10px !important; } } /* Phones: "Ça vient d'arriver" becomes a native swipe row (no pinned horizontal scroll) */ @media (max-width: 759px) { .cdv-hscroll { --min-height: 0px !important; min-height: 0 !important; height: auto !important; } .cdv-hscroll__sticky { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; padding-bottom: 56px !important; } .cdv-hscroll__sticky > .e-con:first-child { padding-top: 72px !important; } .cdv-htrack { transform: none !important; width: 100% !important; max-width: 100% !important; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap !important; scroll-snap-type: x mandatory; scroll-padding-inline: var(--cdv-gutter); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .cdv-htrack::-webkit-scrollbar { display: none; } .cdv-htrack > * { flex: none !important; scroll-snap-align: start; } .cdv-hbar { margin-inline: var(--cdv-gutter); width: auto !important; } /* Offre du moment: image on top, text below */ .cdv-offers .cdv-offer { grid-template-columns: minmax(0, 1fr) !important; min-height: 0; } .cdv-offers .cdv-offer__media { min-height: 0; aspect-ratio: 4 / 3; } } /* Footer legal links: even spacing when they wrap */ .cdv-legal-nav .elementor-nav-menu { --e-nav-menu-horizontal-menu-item-margin: 0px; column-gap: 20px; } .cdv-legal-nav .elementor-nav-menu > li > a { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Phones: shop grid in two columns with compact cards */ @media (max-width: 759px) { .cdv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } .cdv-sc { gap: 10px; } .cdv-sc__media { border-radius: 16px; } .cdv-sc__media .cdv-badge { top: 8px; left: 8px; font-size: 10px; padding: 4px 8px; } .cdv-sc__media .cdv-stock { bottom: 8px; left: 8px; font-size: 10px; padding: 4px 8px; gap: 5px; } .cdv-sc__row { gap: 8px; } .cdv-sc .cdv-pcat { font-size: 10px; letter-spacing: .12em; } .cdv-sc__name { font-size: 18px; } .cdv-sc__add { width: 36px !important; height: 36px; font-size: 18px !important; } .cdv-sc > .cdv-price { margin-top: -4px; font-size: 14px; } } @media (max-width: 759px) { .cdv-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 12px !important; } /* iOS Safari zooms into any field under 16px */ .cdv-shop input, .cdv-shop select, .cdv-shop textarea { font-size: 16px !important; } } .cdv-shopfoot a[href^="tel"], .cdv-footer a[href^="tel"] { white-space: nowrap; }